add default border (#1117)

primer · Dec 11, 2024 · b516379 · b516379
1 parent 794b116
commit b516379
Showing 19 changed files with 727 additions and 732 deletions.
diff --git a/.changeset/pretty-donkeys-sell.md b/.changeset/pretty-donkeys-sell.md
@@ -0,0 +1,5 @@
+---
+'@primer/primitives': patch
+---
+
+Add default border and fix wrong dark color token
diff --git a/scripts/buildFigma.ts b/scripts/buildFigma.ts
@@ -78,12 +78,10 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
    * Size tokens
    * ----------------------------------- */
   const sizeFiles = [
-    'src/tokens/base/size/size.json',
-    'src/tokens/functional/size/breakpoints.json',
-    'src/tokens/functional/size/size.json',
-    'src/tokens/functional/size/border.json',
-    // 'src/tokens/functional/size/size-fine.json',
-    // 'src/tokens/functional/size/size-coarse.json',
+    'src/tokens/base/size/size.json5',
+    'src/tokens/functional/size/breakpoints.json5',
+    'src/tokens/functional/size/size.json5',
+    'src/tokens/functional/size/border.json5',
   ]
   //
   const sizeExtended = await PrimerStyleDictionary.extend({
@@ -101,7 +99,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
    * ----------------------------------- */
   //
   const typeExtended = await PrimerStyleDictionary.extend({
-    source: ['src/tokens/base/typography/typography.json', 'src/tokens/functional/typography/typography.json'],
+    source: ['src/tokens/base/typography/typography.json5', 'src/tokens/functional/typography/typography.json5'],
     include: [],
     platforms: {
       figma: figma(`figma/typography/typography.json`, buildOptions.prefix, buildOptions.buildPath),

diff --git a/scripts/buildTokens.ts b/scripts/buildTokens.ts
@@ -30,7 +30,7 @@ const getStyleDictionaryConfig: StyleDictionaryConfigGenerator = (
   include,
   log: {
     warnings: 'disabled', // 'warn' | 'error' | 'disabled'
-    verbosity: 'silent', // 'default' | 'silent' | 'verbose'
+    verbosity: 'verbose', // 'default' | 'silent' | 'verbose'
     errors: {
       brokenReferences: 'throw', // 'throw' | 'console'
     },
@@ -106,9 +106,9 @@ export const buildDesignTokens = async (buildOptions: ConfigGeneratorOptions): P
     for (const file of sizeFiles) {
       const extendedSD = await PrimerStyleDictionary.extend(
         getStyleDictionaryConfig(
-          `functional/size/${file.replace('src/tokens/functional/size/', '').replace('.json', '')}`,
+          `functional/size/${file.replace('src/tokens/functional/size/', '').replace('.json5', '')}`,
           [file],
-          ['src/tokens/base/size/size.json', ...sizeFiles],
+          ['src/tokens/base/size/size.json5', ...sizeFiles],
           buildOptions,
         ),
       )
@@ -117,7 +117,7 @@ export const buildDesignTokens = async (buildOptions: ConfigGeneratorOptions): P
     // build base scales
     const SdBaseSize = await PrimerStyleDictionary.extend(
       // using includes as source
-      getStyleDictionaryConfig(`base/size/size`, ['src/tokens/base/size/size.json'], [], {
+      getStyleDictionaryConfig(`base/size/size`, ['src/tokens/base/size/size.json5'], [], {
         buildPath: buildOptions.buildPath,
         prefix: undefined,
       }),
@@ -134,8 +134,8 @@ export const buildDesignTokens = async (buildOptions: ConfigGeneratorOptions): P
     const extendedSD = await PrimerStyleDictionary.extend(
       getStyleDictionaryConfig(
         `functional/typography/typography`,
-        [`src/tokens/functional/typography/*.json`],
-        [`src/tokens/base/typography/*.json`],
+        [`src/tokens/functional/typography/*.json5`],
+        [`src/tokens/base/typography/*.json5`],
         buildOptions,
         {
           css: css(`css/functional/typography/typography.css`, buildOptions.prefix, buildOptions.buildPath, {
@@ -149,7 +149,7 @@ export const buildDesignTokens = async (buildOptions: ConfigGeneratorOptions): P
     await extendedSD.buildAllPlatforms()
 
     const SdTypo = await PrimerStyleDictionary.extend(
-      getStyleDictionaryConfig(`base/typography/typography`, [`src/tokens/base/typography/*.json`], [], buildOptions),
+      getStyleDictionaryConfig(`base/typography/typography`, [`src/tokens/base/typography/*.json5`], [], buildOptions),
     )
     await SdTypo.buildAllPlatforms()
   } catch (e) {
@@ -202,21 +202,21 @@ export const buildDesignTokens = async (buildOptions: ConfigGeneratorOptions): P
         `src/tokens/base/color/light/display-light.json5`,
         `src/tokens/functional/color/light/*.json5`,
         `src/tokens/functional/shadow/light.json5`,
-        `src/tokens/functional/border/light.json5`,
+        `src/tokens/functional/border/*.json5`,
       ],
       include: [`src/tokens/base/color/light/light.json5`],
     },
     // typography
     {
       filename: 'typography',
-      source: [`src/tokens/base/typography/*.json`, `src/tokens/functional/typography/*.json`],
-      include: [`src/tokens/base/typography/*.json`],
+      source: [`src/tokens/base/typography/*.json5`, `src/tokens/functional/typography/*.json5`],
+      include: [`src/tokens/base/typography/*.json5`],
     },
     // size
     {
       filename: 'size',
-      source: [`src/tokens/base/size/*.json`, `src/tokens/functional/size/*.json`],
-      include: [`src/tokens/base/size/*.json`],
+      source: [`src/tokens/base/size/*.json5`, `src/tokens/functional/size/*.json5`],
+      include: [`src/tokens/base/size/*.json5`],
     },
     // motion
     {

diff --git a/scripts/themes.config.ts b/scripts/themes.config.ts
@@ -7,7 +7,7 @@ export const themes: TokenBuildInput[] = [
     source: [
       `src/tokens/functional/color/light/*.json5`,
       `src/tokens/functional/shadow/light.json5`,
-      `src/tokens/functional/border/light.json5`,
+      `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`],
@@ -18,7 +18,7 @@ export const themes: TokenBuildInput[] = [
     source: [
       `src/tokens/functional/color/light/*.json5`,
       `src/tokens/functional/shadow/light.json5`,
-      `src/tokens/functional/border/light.json5`,
+      `src/tokens/functional/border/*.json5`,
       `src/tokens/functional/color/components/*.json5`,
       `src/tokens/functional/color/light/overrides/light.tritanopia.json5`,
     ],
@@ -30,7 +30,7 @@ export const themes: TokenBuildInput[] = [
     source: [
       `src/tokens/functional/color/light/*.json5`,
       `src/tokens/functional/shadow/light.json5`,
-      `src/tokens/functional/border/light.json5`,
+      `src/tokens/functional/border/*.json5`,
       `src/tokens/functional/color/components/*.json5`,
       `src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5`,
     ],
@@ -42,7 +42,7 @@ export const themes: TokenBuildInput[] = [
     source: [
       `src/tokens/functional/color/light/*.json5`,
       `src/tokens/functional/shadow/light.json5`,
-      `src/tokens/functional/border/light.json5`,
+      `src/tokens/functional/border/*.json5`,
       `src/tokens/functional/color/components/*.json5`,
       `src/tokens/functional/color/light/overrides/light.high-contrast.json5`,
     ],
@@ -58,7 +58,7 @@ export const themes: TokenBuildInput[] = [
     source: [
       `src/tokens/functional/color/dark/*.json5`,
       `src/tokens/functional/shadow/dark.json5`,
-      `src/tokens/functional/border/dark.json5`,
+      `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`],
@@ -70,7 +70,7 @@ export const themes: TokenBuildInput[] = [
       `src/tokens/functional/color/dark/*.json5`,
       `src/tokens/functional/color/dark/overrides/dark.dimmed.json5`,
       `src/tokens/functional/shadow/dark.json5`,
-      `src/tokens/functional/border/dark.json5`,
+      `src/tokens/functional/border/*.json5`,
       `src/tokens/functional/color/components/*.json5`,
     ],
     include: [
@@ -86,7 +86,7 @@ export const themes: TokenBuildInput[] = [
     source: [
       `src/tokens/functional/color/dark/*.json5`,
       `src/tokens/functional/shadow/dark.json5`,
-      `src/tokens/functional/border/dark.json5`,
+      `src/tokens/functional/border/*.json5`,
       `src/tokens/functional/color/components/*.json5`,
       `src/tokens/functional/color/dark/overrides/dark.tritanopia.json5`,
     ],
@@ -98,7 +98,7 @@ export const themes: TokenBuildInput[] = [
     source: [
       `src/tokens/functional/color/dark/*.json5`,
       `src/tokens/functional/shadow/dark.json5`,
-      `src/tokens/functional/border/dark.json5`,
+      `src/tokens/functional/border/*.json5`,
       `src/tokens/functional/color/components/*.json5`,
       `src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5`,
     ],
@@ -110,7 +110,7 @@ export const themes: TokenBuildInput[] = [
     source: [
       `src/tokens/functional/color/dark/*.json5`,
       `src/tokens/functional/shadow/dark.json5`,
-      `src/tokens/functional/border/dark.json5`,
+      `src/tokens/functional/border/*.json5`,
       `src/tokens/functional/color/components/*.json5`,
       `src/tokens/functional/color/dark/overrides/dark.high-contrast.json5`,
     ],

diff --git a/src/platforms/css.ts b/src/platforms/css.ts
@@ -53,8 +53,8 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
           options?.themed === true &&
           token.$type !== 'custom-viewportRange' &&
           !isFromFile(token, [
-            'src/tokens/functional/size/size-coarse.json',
-            'src/tokens/functional/size/size-fine.json',
+            'src/tokens/functional/size/size-coarse.json5',
+            'src/tokens/functional/size/size-fine.json5',
           ]),
         options: {
           showFileHeader: false,
@@ -72,8 +72,8 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
           options?.themed !== true &&
           token.$type !== 'custom-viewportRange' &&
           !isFromFile(token, [
-            'src/tokens/functional/size/size-coarse.json',
-            'src/tokens/functional/size/size-fine.json',
+            'src/tokens/functional/size/size-coarse.json5',
+            'src/tokens/functional/size/size-fine.json5',
           ]),
         options: {
           showFileHeader: false,
@@ -95,8 +95,8 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
         filter: token =>
           isSource(token) &&
           isFromFile(token, [
-            'src/tokens/functional/size/size-coarse.json',
-            'src/tokens/functional/size/size-fine.json',
+            'src/tokens/functional/size/size-coarse.json5',
+            'src/tokens/functional/size/size-fine.json5',
           ]),
         options: {
           descriptions: false,

diff --git a/src/tokens/base/size/size.json → src/tokens/base/size/size.json5 b/src/tokens/base/size/size.json → src/tokens/base/size/size.json5
diff --git a/src/tokens/base/typography/typography.json b/src/tokens/base/typography/typography.json
diff --git a/src/tokens/base/typography/typography.json5 b/src/tokens/base/typography/typography.json5
@@ -0,0 +1,48 @@
+{
+  base: {
+    text: {
+      weight: {
+        light: {
+          $type: 'fontWeight',
+          $value: 300,
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'base/typography',
+              scopes: ['fontWeight'],
+            },
+          },
+        },
+        normal: {
+          $value: 400,
+          $type: 'fontWeight',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'base/typography',
+              scopes: ['fontWeight'],
+            },
+          },
+        },
+        medium: {
+          $value: 500,
+          $type: 'fontWeight',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'base/typography',
+              scopes: ['fontWeight'],
+            },
+          },
+        },
+        semibold: {
+          $value: 600,
+          $type: 'fontWeight',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'base/typography',
+              scopes: ['fontWeight'],
+            },
+          },
+        },
+      },
+    },
+  },
+}
diff --git a/src/tokens/functional/border/light.json5 → src/tokens/functional/border/border.json5 b/src/tokens/functional/border/light.json5 → src/tokens/functional/border/border.json5
diff --git a/src/tokens/functional/border/dark.json5 b/src/tokens/functional/border/dark.json5