add missing logical properties

chrisburnell · Nov 28, 2021 · ead3566 · ead3566
1 parent b104b0d
commit ead3566
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 135 deletions.
diff --git 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
@@ -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
@@ -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))}`.";
  }