From ead35661d97c4a3d5625bd53b3a52567843dcde2 Mon Sep 17 00:00:00 2001 From: Chris Burnell Date: Sun, 28 Nov 2021 11:14:44 +0000 Subject: [PATCH] add missing logical properties --- package.json | 2 +- src/_config.scss | 223 ++++++++++++++++++++------------------------ src/_functions.scss | 27 +++--- 3 files changed, 117 insertions(+), 135 deletions(-) diff --git a/package.json b/package.json index 49fab10..748a54d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@chrisburnell/bowhead", - "version": "0.2.1", + "version": "0.2.2", "description": "Memorable and maintainable design tokens in SCSS", "main": "bowhead.scss", "scripts": { diff --git a/src/_config.scss b/src/_config.scss index da563a5..3d68224 100644 --- a/src/_config.scss +++ b/src/_config.scss @@ -8,125 +8,108 @@ $bowhead-show-fallback: true !default; // Decides whether or not to generate CSS Variables for you. $bowhead-generate: true !default; -$bowhead-tokens: ( - measure: ( - small: 0.5rem, - medium: 1rem, - large: 2rem, - ), - color: ( - brick: #b22222, - plankton: #3cb371, - desert: #d2b48c - ), - opacity: ( - alpha: 0.8, - beta: 0.5, - gamma: 0.2 - ), - z-index: ( - below: -1, - root: 0, - default: 1, - above: 2 - ) -) !default; +$bowhead-tokens: () !default; $bowhead-property-map: () !default; -$bowhead-property-map: map-merge(( - width: measure, - min-width: measure, - min-inline-size: measure, - max-width: measure, - max-inline-size: measure, - height: measure, - min-height: measure, - min-block-size: measure, - max-height: measure, - max-block-size: measure, - padding: measure, - padding-block: measure, - padding-inline: measure, - padding-top: measure, - padding-block-start: measure, - padding-right: measure, - padding-inline-end: measure, - padding-bottom: measure, - padding-block-end: measure, - padding-left: measure, - padding-inline-start: measure, - margin: measure, - margin-block: measure, - margin-inline: measure, - margin-top: measure, - margin-block-start: measure, - margin-right: measure, - margin-inline-end: measure, - margin-bottom: measure, - margin-block-end: measure, - margin-left: measure, - margin-inline-start: measure, - outline-offset: measure, - flex-basis: measure, - gap: measure, - grid-gap: measure, - column-gap: measure, - row-gap: measure, - top: measure, - bottom: measure, - left: measure, - right: measure, - border-width: measure, - border-block: measure, - border-inline: measure, - border-top-width: measure, - border-block-start-width: measure, - border-right-width: measure, - border-inline-start-width: measure, - border-bottom-width: measure, - border-block-end-width: measure, - border-left-width: measure, - border-inline-end-width: measure, - outline-width: measure, - text-decoration-thickness: measure, - text-underline-offset: measure, - border-radius: measure, - border-top-left-radius: measure, - border-start-start-radius: measure, - border-top-right-radius: measure, - border-start-end-radius: measure, - border-bottom-right-radius: measure, - border-end-end-radius: measure, - border-bottom-left-radius: measure, - border-end-start-radius: measure, - background-color: color, - accent-color: color, - caret-color: color, - border-color: color, - border-block-color: color, - border-inline-color: color, - border-top-color: color, - border-block-start-color: color, - border-right-color: color, - border-inline-start-color: color, - border-bottom-color: color, - border-block-end-color: color, - border-left-color: color, - border-inline-end-color: color, - outline-color: color, - fill: color, - stroke: color, - text-decoration-color: color, - text-emphasis-color: color, - border-block-style: border-style, - border-inline-style: border-style, - border-top-style: border-style, - border-block-start-style: border-style, - border-right-style: border-style, - border-inline-start-style: border-style, - border-bottom-style: border-style, - border-block-end-style: border-style, - border-left-style: border-style, - border-inline-end-style: border-style, - outline-style: border-style -), $bowhead-property-map); +$bowhead-property-map: map-merge( + ( + width: measure, + inline-size: measure, + min-width: measure, + min-inline-size: measure, + max-width: measure, + max-inline-size: measure, + height: measure, + block-size: measure, + min-height: measure, + min-block-size: measure, + max-height: measure, + max-block-size: measure, + padding: measure, + padding-block: measure, + padding-inline: measure, + padding-top: measure, + padding-block-start: measure, + padding-right: measure, + padding-inline-end: measure, + padding-bottom: measure, + padding-block-end: measure, + padding-left: measure, + padding-inline-start: measure, + margin: measure, + margin-block: measure, + margin-inline: measure, + margin-top: measure, + margin-block-start: measure, + margin-right: measure, + margin-inline-end: measure, + margin-bottom: measure, + margin-block-end: measure, + margin-left: measure, + margin-inline-start: measure, + outline-offset: measure, + flex-basis: measure, + gap: measure, + grid-gap: measure, + column-gap: measure, + row-gap: measure, + top: measure, + bottom: measure, + left: measure, + right: measure, + border-width: measure, + border-block: measure, + border-inline: measure, + border-top-width: measure, + border-block-start-width: measure, + border-right-width: measure, + border-inline-start-width: measure, + border-bottom-width: measure, + border-block-end-width: measure, + border-left-width: measure, + border-inline-end-width: measure, + outline-width: measure, + text-decoration-thickness: measure, + text-underline-offset: measure, + border-radius: measure, + border-top-left-radius: measure, + border-start-start-radius: measure, + border-top-right-radius: measure, + border-start-end-radius: measure, + border-bottom-right-radius: measure, + border-end-end-radius: measure, + border-bottom-left-radius: measure, + border-end-start-radius: measure, + background-color: color, + accent-color: color, + caret-color: color, + border-color: color, + border-block-color: color, + border-inline-color: color, + border-top-color: color, + border-block-start-color: color, + border-right-color: color, + border-inline-start-color: color, + border-bottom-color: color, + border-block-end-color: color, + border-left-color: color, + border-inline-end-color: color, + outline-color: color, + fill: color, + stroke: color, + text-decoration-color: color, + text-emphasis-color: color, + border-block-style: border-style, + border-inline-style: border-style, + border-top-style: border-style, + border-block-start-style: border-style, + border-right-style: border-style, + border-inline-start-style: border-style, + border-bottom-style: border-style, + border-block-end-style: border-style, + border-left-style: border-style, + border-inline-end-style: border-style, + outline-style: border-style, + ), + $bowhead-property-map +); diff --git a/src/_functions.scss b/src/_functions.scss index 9f3b653..90bc3ec 100644 --- a/src/_functions.scss +++ b/src/_functions.scss @@ -19,12 +19,16 @@ /// /// @return Associated CSS Variable or SCSS value /// -@function v($property, $value: default, $fallback: not $bowhead-variable-as-default) { - $generic-values: auto, inherit, initial, none, revert, unset, 0, 1, 100%, currentColor; +@function v( + $property, + $value: default, + $fallback: not $bowhead-variable-as-default +) { + $generic-values: auto, inherit, initial, none, revert, unset, 0, 1, 100%, + currentColor; @if (index($generic-values, $value)) { @return $value; - } - @else { + } @else { // if we're passing in a key in the tokens Map (e.g. measure) @if map-has-key($bowhead-tokens, $property) { $map-variables: map-get($bowhead-tokens, $property); @@ -36,8 +40,7 @@ @if $fallback { @return map-get($map-variables, $value); - } - @else { + } @else { @return var(--#{$property}-#{$value}); } } @@ -70,12 +73,10 @@ @if $fallback { @return map-get($nest-map, $value); - } - @else { + } @else { @return var(--#{$nest-name}-#{$nest-map-name}-#{$value}); } - } - @else { + } @else { // get the map from map name $map: map-get($bowhead-tokens, $map-properties); @@ -86,13 +87,11 @@ @if $fallback { @return map-get($map, $value); - } - @else { + } @else { @return var(--#{$map-properties}-#{$value}); } } - } - @else { + } @else { // throw a warning if the property does not exist @warn "There is no property named `#{$property}` in the variable or property map. The value should be one of `#{map-keys(map-merge($bowhead-tokens, $bowhead-property-map))}`."; }