add composite border token (#1118)

* add composite border token

* add changeset

* change borderWith values to px

* added remaining borders and story

* github-actions[bot] Regenerated snapshots

---------

Co-authored-by: lukasoppermann <[email protected]>

Author: lukasoppermann

.changeset/shaggy-mails-clean.md

@@ -0,0 +1,48 @@
+import React from 'react'
+// eslint-disable-next-line import/extensions
+import ColorPreview from '../StorybookComponents/ColorPreview/ColorPreview'
+
+export default {
+  title: 'Borders/Standard',
+  parameters: {
+    storyType: 'swatch',
+    controls: {hideNoControlsWarning: true},
+    tags: ['snapshotLight'],
+  },
+}
+
+const borders = ['border-default', 'border-muted', 'border-emphasis', 'border-disabled', 'border-transparent']
+
+export const Standard = () => {
+  return (
+    <>
+      {borders.map(border => (
+        <ColorPreview key={border} color={border} border canvasColor="bgColor-default" />
+      ))}
+    </>
+  )
+}
+
+const roleBorders = [
+  'accent',
+  'success',
+  'open',
+  'danger',
+  'closed',
+  'attention',
+  'severe',
+  'done',
+  'upsell',
+  'sponsors',
+  'neutral',
+].flatMap(border => [`border-${border}-emphasis`, `border-${border}-muted`])
+
+export const Roles = () => {
+  return (
+    <>
+      {roleBorders.map(border => (
+        <ColorPreview key={border} color={border} border canvasColor="bgColor-default" />
+      ))}
+    </>
+  )
+}

.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-accent-emphasis-linux.png

@@ -1,6 +1,5 @@
 import React from 'react'
 // eslint-disable-next-line import/extensions
-import sizeTokens from '../../../../dist/docs/functional/size/border.json'
 import {SizeTokenSwatch} from '../StorybookComponents/SizeTokenSwatch/SizeTokenSwatch'
 import {DataTable, Table} from '@primer/react/drafts'
 import {InlineCode} from '../StorybookComponents/InlineCode/InlineCode'

.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-accent-muted-linux.png

@@ -5,6 +5,7 @@ import './ColorPreview.css'
 export type ColorPreviewProps = {
   textColor?: boolean
   borderColor?: boolean
+  border?: boolean
   bgColor?: boolean
   canvasColor?: string
   color?: string
@@ -16,6 +17,7 @@ export type ColorPreviewProps = {
 
 export function ColorPreview({
   textColor,
+  border,
   borderColor,
   bgColor,
   canvasColor,
@@ -34,6 +36,7 @@ export function ColorPreview({
           </p>
         )}
         {borderColor && <div style={{borderColor: `var(--${color})`, ...style}} data-border></div>}
+        {border && <div style={{border: `var(--${color})`, ...style}} data-border></div>}
         {bgColor && (
           <div
             style={{backgroundColor: `var(--${color})`, border: `solid 1px var(--${bgColorBorder})`, ...style}}

.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-attention-emphasis-linux.png

@@ -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
     {

.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-attention-muted-linux.png

@@ -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`,

.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-closed-emphasis-linux.png

@@ -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