add composite border token

primer · Dec 11, 2024 · 50b7f69 · 50b7f69
1 parent b516379
commit 50b7f69
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 15 deletions.
diff --git a/scripts/buildTokens.ts b/scripts/buildTokens.ts
@@ -204,7 +204,7 @@ export const buildDesignTokens = async (buildOptions: ConfigGeneratorOptions): P
         `src/tokens/functional/shadow/light.json5`,
         `src/tokens/functional/border/*.json5`,
       ],
-      include: [`src/tokens/base/color/light/light.json5`],
+      include: [`src/tokens/base/color/light/light.json5`, 'src/tokens/functional/size/border.json5'],
     },
     // typography
     {

diff --git a/scripts/themes.config.ts b/scripts/themes.config.ts
@@ -10,7 +10,11 @@ export const themes: TokenBuildInput[] = [
       `src/tokens/functional/border/*.json5`,
       `src/tokens/functional/color/components/*.json5`,
     ],
-    include: [`src/tokens/base/color/light/light.json5`, `src/tokens/base/color/light/display-light.json5`],
+    include: [
+      `src/tokens/functional/size/border.json5`,
+      `src/tokens/base/color/light/light.json5`,
+      `src/tokens/base/color/light/display-light.json5`,
+    ],
   },
   {
     filename: 'light-tritanopia',
@@ -22,7 +26,11 @@ export const themes: TokenBuildInput[] = [
       `src/tokens/functional/color/components/*.json5`,
       `src/tokens/functional/color/light/overrides/light.tritanopia.json5`,
     ],
-    include: [`src/tokens/base/color/light/light.json5`, `src/tokens/base/color/light/display-light.json5`],
+    include: [
+      `src/tokens/functional/size/border.json5`,
+      `src/tokens/base/color/light/light.json5`,
+      `src/tokens/base/color/light/display-light.json5`,
+    ],
   },
   {
     filename: 'light-colorblind',
@@ -34,7 +42,11 @@ export const themes: TokenBuildInput[] = [
       `src/tokens/functional/color/components/*.json5`,
       `src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5`,
     ],
-    include: [`src/tokens/base/color/light/light.json5`, `src/tokens/base/color/light/display-light.json5`],
+    include: [
+      `src/tokens/functional/size/border.json5`,
+      `src/tokens/base/color/light/light.json5`,
+      `src/tokens/base/color/light/display-light.json5`,
+    ],
   },
   {
     filename: 'light-high-contrast',
@@ -47,6 +59,7 @@ export const themes: TokenBuildInput[] = [
       `src/tokens/functional/color/light/overrides/light.high-contrast.json5`,
     ],
     include: [
+      `src/tokens/functional/size/border.json5`,
       `src/tokens/base/color/light/light.json5`,
       `src/tokens/base/color/light/light.high-contrast.json5`,
       `src/tokens/base/color/light/display-light.json5`,
@@ -61,7 +74,11 @@ export const themes: TokenBuildInput[] = [
       `src/tokens/functional/border/*.json5`,
       `src/tokens/functional/color/components/*.json5`,
     ],
-    include: [`src/tokens/base/color/dark/dark.json5`, `src/tokens/base/color/dark/display-dark.json5`],
+    include: [
+      `src/tokens/functional/size/border.json5`,
+      `src/tokens/base/color/dark/dark.json5`,
+      `src/tokens/base/color/dark/display-dark.json5`,
+    ],
   },
   {
     filename: 'dark-dimmed',
@@ -74,6 +91,7 @@ export const themes: TokenBuildInput[] = [
       `src/tokens/functional/color/components/*.json5`,
     ],
     include: [
+      `src/tokens/functional/size/border.json5`,
       `src/tokens/base/color/dark/dark.json5`,
       `src/tokens/base/color/dark/dark.dimmed.json5`,
       `src/tokens/base/color/dark/display-dark.json5`,
@@ -90,7 +108,11 @@ export const themes: TokenBuildInput[] = [
       `src/tokens/functional/color/components/*.json5`,
       `src/tokens/functional/color/dark/overrides/dark.tritanopia.json5`,
     ],
-    include: [`src/tokens/base/color/dark/dark.json5`, `src/tokens/base/color/dark/display-dark.json5`],
+    include: [
+      `src/tokens/functional/size/border.json5`,
+      `src/tokens/base/color/dark/dark.json5`,
+      `src/tokens/base/color/dark/display-dark.json5`,
+    ],
   },
   {
     filename: 'dark-colorblind',
@@ -102,7 +124,11 @@ export const themes: TokenBuildInput[] = [
       `src/tokens/functional/color/components/*.json5`,
       `src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5`,
     ],
-    include: [`src/tokens/base/color/dark/dark.json5`, `src/tokens/base/color/dark/display-dark.json5`],
+    include: [
+      `src/tokens/functional/size/border.json5`,
+      `src/tokens/base/color/dark/dark.json5`,
+      `src/tokens/base/color/dark/display-dark.json5`,
+    ],
   },
   {
     filename: 'dark-high-contrast',
@@ -115,6 +141,7 @@ export const themes: TokenBuildInput[] = [
       `src/tokens/functional/color/dark/overrides/dark.high-contrast.json5`,
     ],
     include: [
+      `src/tokens/functional/size/border.json5`,
       `src/tokens/base/color/dark/dark.json5`,
       `src/tokens/base/color/dark/dark.high-contrast.json5`,
       `src/tokens/base/color/dark/display-dark.json5`,

diff --git a/src/primerStyleDictionary.ts b/src/primerStyleDictionary.ts
@@ -45,7 +45,12 @@ import {themeOverrides} from './preprocessors/themeOverrides.js'
  * @formats [javascript/esm](https://github.com/primer/primitives/blob/main/config/formats/javascript-esm.ts), [javascript/commonJs](https://github.com/primer/primitives/blob/main/config/formats/javascript-commonJs.ts), [typescript/export-definition](https://github.com/primer/primitives/blob/main/config/formats/typescript-export-defition.ts)
  * @transformers [color/rgbAlpha](https://github.com/primer/primitives/blob/main/config/tranformers/color-to-rgb-alpha.ts), [color/hexAlpha](https://github.com/primer/primitives/blob/main/config/tranformers/color-to-hex-alpha.ts), [color/hex](https://github.com/primer/primitives/blob/main/config/tranformers/color-to-hex6.ts), [json/deprecated](https://github.com/primer/primitives/blob/main/config/tranformers/json-deprecated.ts), [name/pathToDotNotation](https://github.com/primer/primitives/blob/main/config/tranformers/name-path-to-dot-notation.ts)
  */
-export const PrimerStyleDictionary: StyleDictionary = new StyleDictionary()
+export const PrimerStyleDictionary: StyleDictionary = new StyleDictionary({
+  // these are the defaults
+  log: {
+    verbosity: 'default', // 'default' | 'silent' | 'verbose'
+  },
+})
 
 /**
  * Formats

diff --git a/src/tokens/functional/border/border.json5 b/src/tokens/functional/border/border.json5
@@ -9,4 +9,64 @@
       $type: 'border',
     },
   },
+  border: {
+    default: {
+      $value: {
+        color: '{borderColor.default}',
+        style: 'solid',
+        width: '{borderWidth.default}',
+      },
+      $type: 'border',
+    },
+    muted: {
+      $value: {
+        color: '{borderColor.muted}',
+        style: 'solid',
+        width: '{borderWidth.default}',
+      },
+      $type: 'border',
+    },
+    emphasis: {
+      $value: {
+        color: '{borderColor.emphasis}',
+        style: 'solid',
+        width: '{borderWidth.default}',
+      },
+      $type: 'border',
+    },
+    disabled: {
+      $value: {
+        color: '{borderColor.disabled}',
+        style: 'solid',
+        width: '{borderWidth.default}',
+      },
+      $type: 'border',
+    },
+    transparent: {
+      $value: {
+        color: '{borderColor.transparent}',
+        style: 'solid',
+        width: '{borderWidth.default}',
+      },
+      $type: 'border',
+    },
+    accent: {
+      emphasis: {
+        $value: {
+          color: '{borderColor.accent.emphasis}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+      muted: {
+        $value: {
+          color: '{borderColor.accent.muted}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+    },
+  },
 }
diff --git a/src/tokens/functional/color/dark/primitives-dark.json5 b/src/tokens/functional/color/dark/primitives-dark.json5
@@ -833,7 +833,6 @@
       $extensions: {
         'org.primer.figma': {
           collection: 'mode',
-
           group: 'component (internal)',
           scopes: ['borderColor'],
         },

diff --git a/src/tokens/functional/size/border.json5 b/src/tokens/functional/size/border.json5
@@ -15,14 +15,14 @@
     },
   },
   borderWidth: {
-    default: {
-      $value: '{borderWidth.thin}',
-      $type: 'string',
-    },
     thin: {
       $value: 'max(1px, 0.0625rem)',
       $type: 'string',
     },
+    default: {
+      $value: '{borderWidth.thin}',
+      $type: 'string',
+    },
     thick: {
       $value: 'max(2px, 0.125rem)',
       $type: 'string',

diff --git a/src/transformers/borderToCss.ts b/src/transformers/borderToCss.ts
@@ -36,7 +36,7 @@ export const borderToCss: Transform = {
         `Invalid border token property ${JSON.stringify(value)}. Must be an object with color, width and style properties.`,
       )
     }
-    /* color | style | width */
-    return `${value.color} ${value.style} ${value.width}`
+    /* width | style | color */
+    return `${value.width} ${value.style} ${value.color}`
   },
 }