From 73c280ac11e1dfc90fdb67b24eb13affec91bf0d Mon Sep 17 00:00:00 2001
From: Lukas Oppermann <lukasoppermann@github.com>
Date: Thu, 27 Apr 2023 13:15:44 +0200
Subject: [PATCH 01/21] add flex to label demo (#617)

---
 docs/storybook/stories/Demos/Components.stories.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/storybook/stories/Demos/Components.stories.tsx b/docs/storybook/stories/Demos/Components.stories.tsx
index 543995d90..e1942a87e 100644
--- a/docs/storybook/stories/Demos/Components.stories.tsx
+++ b/docs/storybook/stories/Demos/Components.stories.tsx
@@ -19,7 +19,7 @@ export const FlashDemo = () => {
 
 export const LabelDemo = () => {
   return (
-    <div style={{display: 'grid', gap: '1rem'}}>
+    <div style={{display: 'flex', gap: '1rem', flexDirection: 'row', flexWrap: 'wrap'}}>
       <Label variant="primary">Primary</Label>
       <Label variant="secondary">Secondary</Label>
       <Label variant="accent">Accent</Label>
@@ -35,7 +35,7 @@ export const LabelDemo = () => {
 
 export const StateLabelDemo = () => {
   return (
-    <div style={{display: 'grid', gap: '1rem'}}>
+    <div style={{display: 'flex', gap: '1rem', flexDirection: 'row', flexWrap: 'wrap'}}>
       <StateLabel status="issueOpened">Open</StateLabel>
       <StateLabel status="issueClosed">Closed</StateLabel>
       <StateLabel status="issueClosedNotPlanned">Closed</StateLabel>

From f80a5fd3111ed23839d055b4bae3909dfc7c5b69 Mon Sep 17 00:00:00 2001
From: Lukas Oppermann <lukasoppermann@github.com>
Date: Thu, 27 Apr 2023 13:22:16 +0200
Subject: [PATCH 02/21] add option to remove descriptions from css output
 (#618)

---
 .changeset/pretty-apes-pump.md         |  5 +++++
 src/PrimerStyleDictionary.ts           |  6 ++++++
 src/formats/cssThemed.ts               | 10 +++++++---
 src/formats/cssVariables.ts            | 26 ++++++++++++++++++++++++++
 src/formats/cssWrapMediaQuery.ts       |  8 ++++++--
 src/formats/index.ts                   |  1 +
 src/platforms/css.ts                   |  3 +++
 src/tokens/functional/size/border.json |  3 ++-
 8 files changed, 56 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/pretty-apes-pump.md
 create mode 100644 src/formats/cssVariables.ts

diff --git a/.changeset/pretty-apes-pump.md b/.changeset/pretty-apes-pump.md
new file mode 100644
index 000000000..2620703a9
--- /dev/null
+++ b/.changeset/pretty-apes-pump.md
@@ -0,0 +1,5 @@
+---
+'@primer/primitives': patch
+---
+
+add option to remove descriptions from css output
diff --git a/src/PrimerStyleDictionary.ts b/src/PrimerStyleDictionary.ts
index fb0c7e9ff..9ad6c2b46 100644
--- a/src/PrimerStyleDictionary.ts
+++ b/src/PrimerStyleDictionary.ts
@@ -26,6 +26,7 @@ import {
   cssCustomMedia,
   jsonOneDimensional,
   cssWrapMediaQuery,
+  cssVariables,
 } from './formats'
 
 /**
@@ -53,6 +54,11 @@ StyleDictionary.registerFormat({
   formatter: cssWrapMediaQuery,
 })
 
+StyleDictionary.registerFormat({
+  name: 'css/variables',
+  formatter: cssVariables,
+})
+
 StyleDictionary.registerFormat({
   name: 'scss/mixin-css-variables',
   formatter: scssMixinCssVariables,
diff --git a/src/formats/cssThemed.ts b/src/formats/cssThemed.ts
index 68bec4971..a8a2d39e1 100644
--- a/src/formats/cssThemed.ts
+++ b/src/formats/cssThemed.ts
@@ -1,6 +1,7 @@
 import StyleDictionary from 'style-dictionary'
 import type {FormatterArguments} from 'style-dictionary/types/Format'
 import {format} from 'prettier'
+import type {LineFormatting} from 'style-dictionary/types/FormatHelpers'
 const {fileHeader, formattedVariables} = StyleDictionary.formatHelpers
 
 /**
@@ -11,18 +12,21 @@ const {fileHeader, formattedVariables} = StyleDictionary.formatHelpers
  */
 export const cssThemed: StyleDictionary.Formatter = ({dictionary, options = {}, file}: FormatterArguments) => {
   const {selector, selectorLight, selectorDark} = options
-  const {outputReferences} = options
+  const {outputReferences, descriptions} = options
+  const formatting: LineFormatting = {
+    commentStyle: descriptions ? 'long' : 'none',
+  }
   // add file header
   const output = [fileHeader({file})]
   // add single theme css
   output.push(`${selector || ':root'}${selectorLight ? `, ${selectorLight}` : ''}{
-    ${formattedVariables({format: 'css', dictionary, outputReferences})}
+    ${formattedVariables({format: 'css', dictionary, outputReferences, formatting})}
   }`)
   // add auto dark theme css
   if (selectorDark) {
     output.push(`@media (prefers-color-scheme: dark) {
       ${selectorDark} {
-        ${formattedVariables({format: 'css', dictionary, outputReferences})}
+        ${formattedVariables({format: 'css', dictionary, outputReferences, formatting})}
       }
     }`)
   }
diff --git a/src/formats/cssVariables.ts b/src/formats/cssVariables.ts
new file mode 100644
index 000000000..914b5c4c9
--- /dev/null
+++ b/src/formats/cssVariables.ts
@@ -0,0 +1,26 @@
+import StyleDictionary from 'style-dictionary'
+import type {FormatterArguments} from 'style-dictionary/types/Format'
+import type {LineFormatting} from 'style-dictionary/types/FormatHelpers'
+const {fileHeader, formattedVariables} = StyleDictionary.formatHelpers
+
+/**
+ * @description Converts `StyleDictionary.dictionary.tokens` to css with prefers dark and light section
+ * @param arguments [FormatterArguments](https://github.com/amzn/style-dictionary/blob/main/types/Format.d.ts)
+ * @param arguments.options outputReferences `boolean`, selector `string`, selectorLight `string`, selectorDark `string`
+ * @returns formatted `string`
+ */
+export const cssVariables: StyleDictionary.Formatter = ({dictionary, options = {}, file}: FormatterArguments) => {
+  const selector = options.selector ? options.selector : `:root`
+  const {outputReferences, descriptions} = options
+  const formatting: LineFormatting = {
+    commentStyle: descriptions ? 'long' : 'none',
+  }
+  // add file header
+
+  return `${fileHeader({file})}${selector} {\n${formattedVariables({
+    format: 'css',
+    dictionary,
+    outputReferences,
+    formatting,
+  })}\n}\n`
+}
diff --git a/src/formats/cssWrapMediaQuery.ts b/src/formats/cssWrapMediaQuery.ts
index 3b37eeb5f..f99bbb0d0 100644
--- a/src/formats/cssWrapMediaQuery.ts
+++ b/src/formats/cssWrapMediaQuery.ts
@@ -1,6 +1,7 @@
 import StyleDictionary from 'style-dictionary'
 import type {FormatterArguments} from 'style-dictionary/types/Format'
 import {format} from 'prettier'
+import type {LineFormatting} from 'style-dictionary/types/FormatHelpers'
 const {fileHeader, formattedVariables} = StyleDictionary.formatHelpers
 
 /**
@@ -9,7 +10,10 @@ const {fileHeader, formattedVariables} = StyleDictionary.formatHelpers
  * @returns formatted `string`
  */
 export const cssWrapMediaQuery: StyleDictionary.Formatter = ({dictionary, options, file}: FormatterArguments) => {
-  const {outputReferences} = options
+  const {outputReferences, descriptions} = options
+  const formatting: LineFormatting = {
+    commentStyle: descriptions ? 'long' : 'none',
+  }
   // get specific media query or use screen
   const mediaQuery = options.mediaQuery?.[file.destination] || 'screen'
   // add file header
@@ -17,7 +21,7 @@ export const cssWrapMediaQuery: StyleDictionary.Formatter = ({dictionary, option
   // add meadia query
   output.push(`@media ${mediaQuery} {\n:root {`)
   // add tokens
-  output.push(formattedVariables({format: 'css', dictionary, outputReferences}))
+  output.push(formattedVariables({format: 'css', dictionary, outputReferences, formatting}))
   // close media query
   output.push(`}\n}`)
   // return prettified
diff --git a/src/formats/index.ts b/src/formats/index.ts
index c7b232975..6e2067d42 100644
--- a/src/formats/index.ts
+++ b/src/formats/index.ts
@@ -1,6 +1,7 @@
 export {cssThemed} from './cssThemed'
 export {cssCustomMedia} from './cssCustomMedia'
 export {cssWrapMediaQuery} from './cssWrapMediaQuery'
+export {cssVariables} from './cssVariables'
 export {javascriptCommonJs} from './javascriptCommonJs'
 export {javascriptEsm} from './javascriptEsm'
 export {jsonNestedPrefixed} from './jsonNestedPrefixed'
diff --git a/src/platforms/css.ts b/src/platforms/css.ts
index 5528605a6..99b4a74da 100644
--- a/src/platforms/css.ts
+++ b/src/platforms/css.ts
@@ -44,6 +44,7 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
         options: {
           showFileHeader: false,
           outputReferences: false,
+          descriptions: false,
           selector,
           selectorLight,
           selectorDark,
@@ -56,6 +57,7 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
         filter: token => isSource(token) && options?.themed !== true,
         options: {
           showFileHeader: false,
+          descriptions: false,
           ...options?.options,
         },
       },
@@ -77,6 +79,7 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
             'src/tokens/functional/size/size-fine.json',
           ]),
         options: {
+          descriptions: false,
           showFileHeader: false,
           mediaQuery: {
             'css/functional/size/size-fine.css': '(pointer: fine)',
diff --git a/src/tokens/functional/size/border.json b/src/tokens/functional/size/border.json
index 1e8d2dd06..13f5324bd 100644
--- a/src/tokens/functional/size/border.json
+++ b/src/tokens/functional/size/border.json
@@ -1,7 +1,8 @@
 {
   "boxShadow": {
     "thin": {
-      "value": "inset 0 0 0 {borderWidth.thin}"
+      "value": "inset 0 0 0 {borderWidth.thin}",
+      "description": "Thin shadow for borders"
     },
     "thick": {
       "value": "inset 0 0 0 {borderWidth.thick}"

From 224be8f24b4716a428d0c0cd8a2c0ab1eb0a1eef Mon Sep 17 00:00:00 2001
From: Lukas Oppermann <lukasoppermann@github.com>
Date: Thu, 27 Apr 2023 14:42:10 +0200
Subject: [PATCH 03/21] adding test for comment in cssWrap (#619)

---
 src/formats/cssVariables.ts           |   1 -
 src/formats/cssWrapMediaQuery.test.ts | 104 +++++++++++++++++++++++++-
 2 files changed, 103 insertions(+), 2 deletions(-)

diff --git a/src/formats/cssVariables.ts b/src/formats/cssVariables.ts
index 914b5c4c9..9d8d90b92 100644
--- a/src/formats/cssVariables.ts
+++ b/src/formats/cssVariables.ts
@@ -15,7 +15,6 @@ export const cssVariables: StyleDictionary.Formatter = ({dictionary, options = {
   const formatting: LineFormatting = {
     commentStyle: descriptions ? 'long' : 'none',
   }
-  // add file header
 
   return `${fileHeader({file})}${selector} {\n${formattedVariables({
     format: 'css',
diff --git a/src/formats/cssWrapMediaQuery.test.ts b/src/formats/cssWrapMediaQuery.test.ts
index 93d3468eb..cd459ca30 100644
--- a/src/formats/cssWrapMediaQuery.test.ts
+++ b/src/formats/cssWrapMediaQuery.test.ts
@@ -1,5 +1,5 @@
 import {cssWrapMediaQuery} from './cssWrapMediaQuery'
-import {getMockFormatterArguments} from '~/src/test-utilities'
+import {getMockDictionary, getMockFormatterArguments, getMockToken} from '~/src/test-utilities'
 import {format} from 'prettier'
 
 describe('Format: tokens nested in media query', () => {
@@ -65,4 +65,106 @@ describe('Format: tokens nested in media query', () => {
     )
     expect(cssWrapMediaQuery(input)).toStrictEqual(expectedOutput)
   })
+
+  it('Show comment if option.description is true', () => {
+    const input = getMockFormatterArguments({
+      dictionary: getMockDictionary({
+        tokens: {
+          subgroup: {
+            red: getMockToken({
+              name: 'red',
+              value: 'transformedValue',
+              comment: 'This is a description',
+            }),
+          },
+        },
+      }),
+      options: {
+        mediaQuery: {
+          'size-fine.css': '(pointer: fine)',
+        },
+        descriptions: true,
+      },
+      file: {
+        destination: 'size-fine.css',
+        options: {
+          showFileHeader: false,
+        },
+      },
+    })
+
+    const expectedOutput = format(
+      ` @media (pointer: fine) {
+        :root {
+          --red: transformedValue; /* This is a description */
+        }
+      }`,
+      {parser: 'css', printWidth: 500},
+    )
+    expect(cssWrapMediaQuery(input)).toStrictEqual(expectedOutput)
+  })
+
+  it('Hides comment if option.description is false or not set', () => {
+    const input = getMockFormatterArguments({
+      dictionary: getMockDictionary({
+        tokens: {
+          subgroup: {
+            red: getMockToken({
+              name: 'red',
+              value: 'transformedValue',
+              comment: 'This is a description',
+            }),
+          },
+        },
+      }),
+      options: {
+        mediaQuery: {
+          'size-fine.css': '(pointer: fine)',
+        },
+        descriptions: false,
+      },
+      file: {
+        destination: 'size-fine.css',
+        options: {
+          showFileHeader: false,
+        },
+      },
+    })
+
+    const inputUnset = getMockFormatterArguments({
+      dictionary: getMockDictionary({
+        tokens: {
+          subgroup: {
+            red: getMockToken({
+              name: 'red',
+              value: 'transformedValue',
+              comment: 'This is a description',
+            }),
+          },
+        },
+      }),
+      options: {
+        mediaQuery: {
+          'size-fine.css': '(pointer: fine)',
+        },
+      },
+      file: {
+        destination: 'size-fine.css',
+        options: {
+          showFileHeader: false,
+        },
+      },
+    })
+
+    const expectedOutput = format(
+      ` @media (pointer: fine) {
+        :root {
+          --red: transformedValue;
+        }
+      }`,
+      {parser: 'css', printWidth: 500},
+    )
+    expect(cssWrapMediaQuery(input)).toStrictEqual(expectedOutput)
+    expect(cssWrapMediaQuery(inputUnset)).toStrictEqual(expectedOutput)
+  })
 })

From d63a70549a2be892531a1ae6d3a4d4ce05e23e80 Mon Sep 17 00:00:00 2001
From: Lukas Oppermann <lukasoppermann@github.com>
Date: Thu, 27 Apr 2023 15:18:59 +0200
Subject: [PATCH 04/21] adding reusable check for tokens (#620)

Merging this to test
---
 .github/workflows/hasChanged.yml | 32 ++++++++++++++++++++++++++++++++
 .github/workflows/test.yml       | 11 +++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 .github/workflows/hasChanged.yml
 create mode 100644 .github/workflows/test.yml

diff --git a/.github/workflows/hasChanged.yml b/.github/workflows/hasChanged.yml
new file mode 100644
index 000000000..5310b15c6
--- /dev/null
+++ b/.github/workflows/hasChanged.yml
@@ -0,0 +1,32 @@
+name: Check if files or folders have been changed
+
+on:
+  workflow_call:
+    inputs:
+      filter:
+        required: true
+        type: string
+    outputs:
+      hasChanged:
+        description: "Boolean value indicating if the files or folders have changed"
+        value: ${{ jobs.hasChanged.outputs.hasChanged }}
+
+jobs: 
+  hasChanged:
+    name: Checking for changes
+    runs-on: ubuntu-latest
+       # Required permissions
+    permissions:
+      pull-requests: read
+    outputs:
+      hasChanged: ${{ steps.filter.outputs.output }}
+    steps:
+    - uses: dorny/paths-filter@v2
+      id: filter
+      with:
+        list-files: shell
+        filters: |
+          output:
+            - ${{ inputs.filter }}
+    - name: Detecting changes that effect output
+      run: echo ${{ steps.filter.outputs.output == 'true' && 'Changes detected' || 'No changes detected' }} for "${{ inputs.filter }}"
\ No newline at end of file
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
new file mode 100644
index 000000000..0ee6d0f33
--- /dev/null
+++ b/.github/workflows/test.yml
@@ -0,0 +1,11 @@
+name: My Starter Workflow
+
+on:
+  workflow_dispatch:
+
+jobs:
+  call-reusable-workflow:
+    uses: ./.github/workflows/hasChanged.yml
+    with:
+      filter: '!(*.md|**/**/*.md|**/**/*.test.ts|**/**/*.test.js|docs/**|storybook/**)'
+      
\ No newline at end of file

From 23b62c920385c3a5a185a8cede5c467c4f4b943a Mon Sep 17 00:00:00 2001
From: Katie Langerman <18661030+langermank@users.noreply.github.com>
Date: Thu, 27 Apr 2023 11:54:06 -0700
Subject: [PATCH 05/21] Improve Storybook stories for docs embed (#622)

* hide titles

* add no padding option
---
 docs/storybook/.storybook/main.ts             |   1 +
 docs/storybook/.storybook/preview.js          |   9 +-
 docs/storybook/.storybook/storybook.css       |  13 +-
 docs/storybook/package-lock.json              | 492 +++---------------
 docs/storybook/package.json                   |   7 +-
 .../storybook/stories/Size/Border.stories.tsx |  12 +-
 .../stories/Size/Breakpoints.stories.tsx      |   4 +-
 .../stories/Size/Control.stories.tsx          |  16 +-
 docs/storybook/stories/Size/Space.stories.tsx |   4 +-
 docs/storybook/stories/Size/Stack.stories.tsx |   4 +-
 .../stories/Size/ViewportRange.stories.tsx    |   4 +-
 .../stories/Typography/Base.stories.tsx       |   4 +-
 .../stories/Typography/Functional.stories.tsx |  12 +-
 13 files changed, 137 insertions(+), 445 deletions(-)

diff --git a/docs/storybook/.storybook/main.ts b/docs/storybook/.storybook/main.ts
index b278de952..9debd0054 100644
--- a/docs/storybook/.storybook/main.ts
+++ b/docs/storybook/.storybook/main.ts
@@ -7,6 +7,7 @@ const config: StorybookConfig = {
     '@storybook/addon-interactions',
     '@storybook/addon-a11y',
     'storybook-addon-rem',
+    'storybook-addon-paddings',
   ],
   framework: {
     name: '@storybook/react-webpack5',
diff --git a/docs/storybook/.storybook/preview.js b/docs/storybook/.storybook/preview.js
index d9f134e03..cfe6cfc2d 100644
--- a/docs/storybook/.storybook/preview.js
+++ b/docs/storybook/.storybook/preview.js
@@ -21,6 +21,14 @@ const preview = {
         order: ['Color', 'Typography', 'Size', 'Demos', 'Migration'],
       },
     },
+    paddings: {
+      values: [
+        {name: 'Small', value: '1rem'},
+        {name: 'Medium', value: '2rem'},
+        {name: 'None', value: '0px'},
+      ],
+      default: 'Small',
+    },
   },
 }
 
@@ -327,7 +335,6 @@ const tempTheme = deepmerge(theme, {
 
 export const decorators = [
   (Story, context) => {
-    console.log('test:', context.globals.theme)
     const {parameters} = context
     const defaultStoryType = 'swatch'
     const storyType = parameters.storyType || defaultStoryType
diff --git a/docs/storybook/.storybook/storybook.css b/docs/storybook/.storybook/storybook.css
index f2ed7738f..5dcef3959 100644
--- a/docs/storybook/.storybook/storybook.css
+++ b/docs/storybook/.storybook/storybook.css
@@ -23,8 +23,6 @@
 .story-wrap {
   font-family: var(--fontStack-system);
   color: var(--fgColor-default);
-  /* background-color: var(--bgColor-default); */
-  padding: 1rem;
 }
 
 #storybook-preview-wrapper {
@@ -153,3 +151,14 @@ code {
   border: unset;
   color: var(--fgColor-default) !important;
 }
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  word-wrap: normal;
+  border: 0;
+}
diff --git a/docs/storybook/package-lock.json b/docs/storybook/package-lock.json
index db3d7751a..1d9c268f5 100644
--- a/docs/storybook/package-lock.json
+++ b/docs/storybook/package-lock.json
@@ -32,10 +32,11 @@
         "@storybook/react": "^7.0.6",
         "@storybook/react-webpack5": "^7.0.6",
         "@storybook/testing-library": "^0.0.14-next.1",
-        "@storybook/theming": "6.5.16",
+        "@storybook/theming": "^7.0.6",
         "babel-loader": "^8.3.0",
         "prop-types": "^15.8.1",
         "storybook": "^7.0.6",
+        "storybook-addon-paddings": "^5.0.0",
         "storybook-addon-rem": "^1.3.0",
         "typescript": "^4.9.4"
       }
@@ -2835,26 +2836,6 @@
         }
       }
     },
-    "node_modules/@storybook/addon-actions/node_modules/@storybook/theming": {
-      "version": "7.0.7",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.0.7.tgz",
-      "integrity": "sha512-InTZe+Sgco1NsxgiG+cyUKWQe3GsjlIyU/o5qDdtOTXcZ64HzyBuAZlAequSddqfDeMDqxRFPc2w1J28MAUHxA==",
-      "dev": true,
-      "dependencies": {
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-        "@storybook/client-logger": "7.0.7",
-        "@storybook/global": "^5.0.0",
-        "memoizerific": "^1.11.3"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/@storybook/addon-backgrounds": {
       "version": "7.0.7",
       "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-7.0.7.tgz",
@@ -2889,26 +2870,6 @@
         }
       }
     },
-    "node_modules/@storybook/addon-backgrounds/node_modules/@storybook/theming": {
-      "version": "7.0.7",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.0.7.tgz",
-      "integrity": "sha512-InTZe+Sgco1NsxgiG+cyUKWQe3GsjlIyU/o5qDdtOTXcZ64HzyBuAZlAequSddqfDeMDqxRFPc2w1J28MAUHxA==",
-      "dev": true,
-      "dependencies": {
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-        "@storybook/client-logger": "7.0.7",
-        "@storybook/global": "^5.0.0",
-        "memoizerific": "^1.11.3"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/@storybook/addon-controls": {
       "version": "7.0.7",
       "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-7.0.7.tgz",
@@ -2944,26 +2905,6 @@
         }
       }
     },
-    "node_modules/@storybook/addon-controls/node_modules/@storybook/theming": {
-      "version": "7.0.7",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.0.7.tgz",
-      "integrity": "sha512-InTZe+Sgco1NsxgiG+cyUKWQe3GsjlIyU/o5qDdtOTXcZ64HzyBuAZlAequSddqfDeMDqxRFPc2w1J28MAUHxA==",
-      "dev": true,
-      "dependencies": {
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-        "@storybook/client-logger": "7.0.7",
-        "@storybook/global": "^5.0.0",
-        "memoizerific": "^1.11.3"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/@storybook/addon-docs": {
       "version": "7.0.7",
       "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-7.0.7.tgz",
@@ -3001,26 +2942,6 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/@storybook/addon-docs/node_modules/@storybook/theming": {
-      "version": "7.0.7",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.0.7.tgz",
-      "integrity": "sha512-InTZe+Sgco1NsxgiG+cyUKWQe3GsjlIyU/o5qDdtOTXcZ64HzyBuAZlAequSddqfDeMDqxRFPc2w1J28MAUHxA==",
-      "dev": true,
-      "dependencies": {
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-        "@storybook/client-logger": "7.0.7",
-        "@storybook/global": "^5.0.0",
-        "memoizerific": "^1.11.3"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/@storybook/addon-essentials": {
       "version": "7.0.7",
       "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-7.0.7.tgz",
@@ -3103,26 +3024,6 @@
         }
       }
     },
-    "node_modules/@storybook/addon-interactions/node_modules/@storybook/theming": {
-      "version": "7.0.7",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.0.7.tgz",
-      "integrity": "sha512-InTZe+Sgco1NsxgiG+cyUKWQe3GsjlIyU/o5qDdtOTXcZ64HzyBuAZlAequSddqfDeMDqxRFPc2w1J28MAUHxA==",
-      "dev": true,
-      "dependencies": {
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-        "@storybook/client-logger": "7.0.7",
-        "@storybook/global": "^5.0.0",
-        "memoizerific": "^1.11.3"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/@storybook/addon-links": {
       "version": "7.0.7",
       "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-7.0.7.tgz",
@@ -3249,26 +3150,6 @@
         }
       }
     },
-    "node_modules/@storybook/addon-toolbars/node_modules/@storybook/theming": {
-      "version": "7.0.7",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.0.7.tgz",
-      "integrity": "sha512-InTZe+Sgco1NsxgiG+cyUKWQe3GsjlIyU/o5qDdtOTXcZ64HzyBuAZlAequSddqfDeMDqxRFPc2w1J28MAUHxA==",
-      "dev": true,
-      "dependencies": {
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-        "@storybook/client-logger": "7.0.7",
-        "@storybook/global": "^5.0.0",
-        "memoizerific": "^1.11.3"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/@storybook/addon-viewport": {
       "version": "7.0.7",
       "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-7.0.7.tgz",
@@ -3302,26 +3183,6 @@
         }
       }
     },
-    "node_modules/@storybook/addon-viewport/node_modules/@storybook/theming": {
-      "version": "7.0.7",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.0.7.tgz",
-      "integrity": "sha512-InTZe+Sgco1NsxgiG+cyUKWQe3GsjlIyU/o5qDdtOTXcZ64HzyBuAZlAequSddqfDeMDqxRFPc2w1J28MAUHxA==",
-      "dev": true,
-      "dependencies": {
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-        "@storybook/client-logger": "7.0.7",
-        "@storybook/global": "^5.0.0",
-        "memoizerific": "^1.11.3"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/@storybook/addons": {
       "version": "7.0.7",
       "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-7.0.7.tgz",
@@ -3405,26 +3266,6 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/@storybook/blocks/node_modules/@storybook/theming": {
-      "version": "7.0.7",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.0.7.tgz",
-      "integrity": "sha512-InTZe+Sgco1NsxgiG+cyUKWQe3GsjlIyU/o5qDdtOTXcZ64HzyBuAZlAequSddqfDeMDqxRFPc2w1J28MAUHxA==",
-      "dev": true,
-      "dependencies": {
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-        "@storybook/client-logger": "7.0.7",
-        "@storybook/global": "^5.0.0",
-        "memoizerific": "^1.11.3"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/@storybook/blocks/node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -3535,26 +3376,6 @@
         }
       }
     },
-    "node_modules/@storybook/builder-webpack5/node_modules/@storybook/theming": {
-      "version": "7.0.7",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.0.7.tgz",
-      "integrity": "sha512-InTZe+Sgco1NsxgiG+cyUKWQe3GsjlIyU/o5qDdtOTXcZ64HzyBuAZlAequSddqfDeMDqxRFPc2w1J28MAUHxA==",
-      "dev": true,
-      "dependencies": {
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-        "@storybook/client-logger": "7.0.7",
-        "@storybook/global": "^5.0.0",
-        "memoizerific": "^1.11.3"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/@storybook/builder-webpack5/node_modules/@types/node": {
       "version": "16.18.24",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.24.tgz",
@@ -4011,26 +3832,6 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/@storybook/components/node_modules/@storybook/theming": {
-      "version": "7.0.7",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.0.7.tgz",
-      "integrity": "sha512-InTZe+Sgco1NsxgiG+cyUKWQe3GsjlIyU/o5qDdtOTXcZ64HzyBuAZlAequSddqfDeMDqxRFPc2w1J28MAUHxA==",
-      "dev": true,
-      "dependencies": {
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-        "@storybook/client-logger": "7.0.7",
-        "@storybook/global": "^5.0.0",
-        "memoizerific": "^1.11.3"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/@storybook/core-client": {
       "version": "7.0.7",
       "resolved": "https://registry.npmjs.org/@storybook/core-client/-/core-client-7.0.7.tgz",
@@ -4553,26 +4354,6 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/@storybook/manager-api/node_modules/@storybook/theming": {
-      "version": "7.0.7",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.0.7.tgz",
-      "integrity": "sha512-InTZe+Sgco1NsxgiG+cyUKWQe3GsjlIyU/o5qDdtOTXcZ64HzyBuAZlAequSddqfDeMDqxRFPc2w1J28MAUHxA==",
-      "dev": true,
-      "dependencies": {
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-        "@storybook/client-logger": "7.0.7",
-        "@storybook/global": "^5.0.0",
-        "memoizerific": "^1.11.3"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/@storybook/manager-api/node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -5125,15 +4906,15 @@
       }
     },
     "node_modules/@storybook/theming": {
-      "version": "6.5.16",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.5.16.tgz",
-      "integrity": "sha512-hNLctkjaYLRdk1+xYTkC1mg4dYz2wSv6SqbLpcKMbkPHTE0ElhddGPHQqB362md/w9emYXNkt1LSMD8Xk9JzVQ==",
+      "version": "7.0.7",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.0.7.tgz",
+      "integrity": "sha512-InTZe+Sgco1NsxgiG+cyUKWQe3GsjlIyU/o5qDdtOTXcZ64HzyBuAZlAequSddqfDeMDqxRFPc2w1J28MAUHxA==",
       "dev": true,
       "dependencies": {
-        "@storybook/client-logger": "6.5.16",
-        "core-js": "^3.8.2",
-        "memoizerific": "^1.11.3",
-        "regenerator-runtime": "^0.13.7"
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+        "@storybook/client-logger": "7.0.7",
+        "@storybook/global": "^5.0.0",
+        "memoizerific": "^1.11.3"
       },
       "funding": {
         "type": "opencollective",
@@ -5144,20 +4925,6 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/@storybook/theming/node_modules/@storybook/client-logger": {
-      "version": "6.5.16",
-      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.5.16.tgz",
-      "integrity": "sha512-pxcNaCj3ItDdicPTXTtmYJE3YC1SjxFrBmHcyrN+nffeNyiMuViJdOOZzzzucTUG0wcOOX8jaSyak+nnHg5H1Q==",
-      "dev": true,
-      "dependencies": {
-        "core-js": "^3.8.2",
-        "global": "^4.4.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
     "node_modules/@storybook/types": {
       "version": "7.0.7",
       "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.0.7.tgz",
@@ -12814,6 +12581,32 @@
         "url": "https://opencollective.com/storybook"
       }
     },
+    "node_modules/storybook-addon-paddings": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/storybook-addon-paddings/-/storybook-addon-paddings-5.0.0.tgz",
+      "integrity": "sha512-+4x9zlOS82tHg4wmm1j67kiwDho+l7CfOttshczlcFQCOP2mHM3PrpXnxbNus5v6xf46Qh0vnYzD+wg0tfZY3Q==",
+      "dev": true,
+      "dependencies": {
+        "memoizerific": "^1.11.0"
+      },
+      "peerDependencies": {
+        "@storybook/components": "^7.0.0",
+        "@storybook/manager-api": "^7.0.0",
+        "@storybook/preview-api": "^7.0.0",
+        "@storybook/theming": "^7.0.0",
+        "@storybook/types": "^7.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/storybook-addon-rem": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/storybook-addon-rem/-/storybook-addon-rem-1.3.0.tgz",
@@ -12982,6 +12775,26 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/storybook-addon-rem/node_modules/@storybook/theming": {
+      "version": "6.5.16",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.5.16.tgz",
+      "integrity": "sha512-hNLctkjaYLRdk1+xYTkC1mg4dYz2wSv6SqbLpcKMbkPHTE0ElhddGPHQqB362md/w9emYXNkt1LSMD8Xk9JzVQ==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "6.5.16",
+        "core-js": "^3.8.2",
+        "memoizerific": "^1.11.3",
+        "regenerator-runtime": "^0.13.7"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/storybook-addon-rem/node_modules/isobject": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-4.0.0.tgz",
@@ -16092,20 +15905,6 @@
         "telejson": "^7.0.3",
         "ts-dedent": "^2.0.0",
         "uuid": "^9.0.0"
-      },
-      "dependencies": {
-        "@storybook/theming": {
-          "version": "7.0.7",
-          "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.0.7.tgz",
-          "integrity": "sha512-InTZe+Sgco1NsxgiG+cyUKWQe3GsjlIyU/o5qDdtOTXcZ64HzyBuAZlAequSddqfDeMDqxRFPc2w1J28MAUHxA==",
-          "dev": true,
-          "requires": {
-            "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-            "@storybook/client-logger": "7.0.7",
-            "@storybook/global": "^5.0.0",
-            "memoizerific": "^1.11.3"
-          }
-        }
       }
     },
     "@storybook/addon-backgrounds": {
@@ -16124,20 +15923,6 @@
         "@storybook/types": "7.0.7",
         "memoizerific": "^1.11.3",
         "ts-dedent": "^2.0.0"
-      },
-      "dependencies": {
-        "@storybook/theming": {
-          "version": "7.0.7",
-          "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.0.7.tgz",
-          "integrity": "sha512-InTZe+Sgco1NsxgiG+cyUKWQe3GsjlIyU/o5qDdtOTXcZ64HzyBuAZlAequSddqfDeMDqxRFPc2w1J28MAUHxA==",
-          "dev": true,
-          "requires": {
-            "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-            "@storybook/client-logger": "7.0.7",
-            "@storybook/global": "^5.0.0",
-            "memoizerific": "^1.11.3"
-          }
-        }
       }
     },
     "@storybook/addon-controls": {
@@ -16157,20 +15942,6 @@
         "@storybook/types": "7.0.7",
         "lodash": "^4.17.21",
         "ts-dedent": "^2.0.0"
-      },
-      "dependencies": {
-        "@storybook/theming": {
-          "version": "7.0.7",
-          "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.0.7.tgz",
-          "integrity": "sha512-InTZe+Sgco1NsxgiG+cyUKWQe3GsjlIyU/o5qDdtOTXcZ64HzyBuAZlAequSddqfDeMDqxRFPc2w1J28MAUHxA==",
-          "dev": true,
-          "requires": {
-            "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-            "@storybook/client-logger": "7.0.7",
-            "@storybook/global": "^5.0.0",
-            "memoizerific": "^1.11.3"
-          }
-        }
       }
     },
     "@storybook/addon-docs": {
@@ -16200,20 +15971,6 @@
         "remark-external-links": "^8.0.0",
         "remark-slug": "^6.0.0",
         "ts-dedent": "^2.0.0"
-      },
-      "dependencies": {
-        "@storybook/theming": {
-          "version": "7.0.7",
-          "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.0.7.tgz",
-          "integrity": "sha512-InTZe+Sgco1NsxgiG+cyUKWQe3GsjlIyU/o5qDdtOTXcZ64HzyBuAZlAequSddqfDeMDqxRFPc2w1J28MAUHxA==",
-          "dev": true,
-          "requires": {
-            "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-            "@storybook/client-logger": "7.0.7",
-            "@storybook/global": "^5.0.0",
-            "memoizerific": "^1.11.3"
-          }
-        }
       }
     },
     "@storybook/addon-essentials": {
@@ -16268,20 +16025,6 @@
         "jest-mock": "^27.0.6",
         "polished": "^4.2.2",
         "ts-dedent": "^2.2.0"
-      },
-      "dependencies": {
-        "@storybook/theming": {
-          "version": "7.0.7",
-          "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.0.7.tgz",
-          "integrity": "sha512-InTZe+Sgco1NsxgiG+cyUKWQe3GsjlIyU/o5qDdtOTXcZ64HzyBuAZlAequSddqfDeMDqxRFPc2w1J28MAUHxA==",
-          "dev": true,
-          "requires": {
-            "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-            "@storybook/client-logger": "7.0.7",
-            "@storybook/global": "^5.0.0",
-            "memoizerific": "^1.11.3"
-          }
-        }
       }
     },
     "@storybook/addon-links": {
@@ -16344,20 +16087,6 @@
         "@storybook/manager-api": "7.0.7",
         "@storybook/preview-api": "7.0.7",
         "@storybook/theming": "7.0.7"
-      },
-      "dependencies": {
-        "@storybook/theming": {
-          "version": "7.0.7",
-          "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.0.7.tgz",
-          "integrity": "sha512-InTZe+Sgco1NsxgiG+cyUKWQe3GsjlIyU/o5qDdtOTXcZ64HzyBuAZlAequSddqfDeMDqxRFPc2w1J28MAUHxA==",
-          "dev": true,
-          "requires": {
-            "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-            "@storybook/client-logger": "7.0.7",
-            "@storybook/global": "^5.0.0",
-            "memoizerific": "^1.11.3"
-          }
-        }
       }
     },
     "@storybook/addon-viewport": {
@@ -16375,20 +16104,6 @@
         "@storybook/theming": "7.0.7",
         "memoizerific": "^1.11.3",
         "prop-types": "^15.7.2"
-      },
-      "dependencies": {
-        "@storybook/theming": {
-          "version": "7.0.7",
-          "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.0.7.tgz",
-          "integrity": "sha512-InTZe+Sgco1NsxgiG+cyUKWQe3GsjlIyU/o5qDdtOTXcZ64HzyBuAZlAequSddqfDeMDqxRFPc2w1J28MAUHxA==",
-          "dev": true,
-          "requires": {
-            "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-            "@storybook/client-logger": "7.0.7",
-            "@storybook/global": "^5.0.0",
-            "memoizerific": "^1.11.3"
-          }
-        }
       }
     },
     "@storybook/addons": {
@@ -16442,18 +16157,6 @@
         "util-deprecate": "^1.0.2"
       },
       "dependencies": {
-        "@storybook/theming": {
-          "version": "7.0.7",
-          "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.0.7.tgz",
-          "integrity": "sha512-InTZe+Sgco1NsxgiG+cyUKWQe3GsjlIyU/o5qDdtOTXcZ64HzyBuAZlAequSddqfDeMDqxRFPc2w1J28MAUHxA==",
-          "dev": true,
-          "requires": {
-            "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-            "@storybook/client-logger": "7.0.7",
-            "@storybook/global": "^5.0.0",
-            "memoizerific": "^1.11.3"
-          }
-        },
         "color-convert": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -16546,18 +16249,6 @@
         "webpack-virtual-modules": "^0.4.3"
       },
       "dependencies": {
-        "@storybook/theming": {
-          "version": "7.0.7",
-          "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.0.7.tgz",
-          "integrity": "sha512-InTZe+Sgco1NsxgiG+cyUKWQe3GsjlIyU/o5qDdtOTXcZ64HzyBuAZlAequSddqfDeMDqxRFPc2w1J28MAUHxA==",
-          "dev": true,
-          "requires": {
-            "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-            "@storybook/client-logger": "7.0.7",
-            "@storybook/global": "^5.0.0",
-            "memoizerific": "^1.11.3"
-          }
-        },
         "@types/node": {
           "version": "16.18.24",
           "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.24.tgz",
@@ -16889,20 +16580,6 @@
         "memoizerific": "^1.11.3",
         "use-resize-observer": "^9.1.0",
         "util-deprecate": "^1.0.2"
-      },
-      "dependencies": {
-        "@storybook/theming": {
-          "version": "7.0.7",
-          "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.0.7.tgz",
-          "integrity": "sha512-InTZe+Sgco1NsxgiG+cyUKWQe3GsjlIyU/o5qDdtOTXcZ64HzyBuAZlAequSddqfDeMDqxRFPc2w1J28MAUHxA==",
-          "dev": true,
-          "requires": {
-            "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-            "@storybook/client-logger": "7.0.7",
-            "@storybook/global": "^5.0.0",
-            "memoizerific": "^1.11.3"
-          }
-        }
       }
     },
     "@storybook/core-client": {
@@ -17306,18 +16983,6 @@
         "ts-dedent": "^2.0.0"
       },
       "dependencies": {
-        "@storybook/theming": {
-          "version": "7.0.7",
-          "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.0.7.tgz",
-          "integrity": "sha512-InTZe+Sgco1NsxgiG+cyUKWQe3GsjlIyU/o5qDdtOTXcZ64HzyBuAZlAequSddqfDeMDqxRFPc2w1J28MAUHxA==",
-          "dev": true,
-          "requires": {
-            "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-            "@storybook/client-logger": "7.0.7",
-            "@storybook/global": "^5.0.0",
-            "memoizerific": "^1.11.3"
-          }
-        },
         "lru-cache": {
           "version": "6.0.0",
           "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -17705,27 +17370,15 @@
       }
     },
     "@storybook/theming": {
-      "version": "6.5.16",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.5.16.tgz",
-      "integrity": "sha512-hNLctkjaYLRdk1+xYTkC1mg4dYz2wSv6SqbLpcKMbkPHTE0ElhddGPHQqB362md/w9emYXNkt1LSMD8Xk9JzVQ==",
+      "version": "7.0.7",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.0.7.tgz",
+      "integrity": "sha512-InTZe+Sgco1NsxgiG+cyUKWQe3GsjlIyU/o5qDdtOTXcZ64HzyBuAZlAequSddqfDeMDqxRFPc2w1J28MAUHxA==",
       "dev": true,
       "requires": {
-        "@storybook/client-logger": "6.5.16",
-        "core-js": "^3.8.2",
-        "memoizerific": "^1.11.3",
-        "regenerator-runtime": "^0.13.7"
-      },
-      "dependencies": {
-        "@storybook/client-logger": {
-          "version": "6.5.16",
-          "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.5.16.tgz",
-          "integrity": "sha512-pxcNaCj3ItDdicPTXTtmYJE3YC1SjxFrBmHcyrN+nffeNyiMuViJdOOZzzzucTUG0wcOOX8jaSyak+nnHg5H1Q==",
-          "dev": true,
-          "requires": {
-            "core-js": "^3.8.2",
-            "global": "^4.4.0"
-          }
-        }
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+        "@storybook/client-logger": "7.0.7",
+        "@storybook/global": "^5.0.0",
+        "memoizerific": "^1.11.3"
       }
     },
     "@storybook/types": {
@@ -23205,6 +22858,15 @@
         "@storybook/cli": "7.0.7"
       }
     },
+    "storybook-addon-paddings": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/storybook-addon-paddings/-/storybook-addon-paddings-5.0.0.tgz",
+      "integrity": "sha512-+4x9zlOS82tHg4wmm1j67kiwDho+l7CfOttshczlcFQCOP2mHM3PrpXnxbNus5v6xf46Qh0vnYzD+wg0tfZY3Q==",
+      "dev": true,
+      "requires": {
+        "memoizerific": "^1.11.0"
+      }
+    },
     "storybook-addon-rem": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/storybook-addon-rem/-/storybook-addon-rem-1.3.0.tgz",
@@ -23329,6 +22991,18 @@
             "regenerator-runtime": "^0.13.7"
           }
         },
+        "@storybook/theming": {
+          "version": "6.5.16",
+          "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.5.16.tgz",
+          "integrity": "sha512-hNLctkjaYLRdk1+xYTkC1mg4dYz2wSv6SqbLpcKMbkPHTE0ElhddGPHQqB362md/w9emYXNkt1LSMD8Xk9JzVQ==",
+          "dev": true,
+          "requires": {
+            "@storybook/client-logger": "6.5.16",
+            "core-js": "^3.8.2",
+            "memoizerific": "^1.11.3",
+            "regenerator-runtime": "^0.13.7"
+          }
+        },
         "isobject": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/isobject/-/isobject-4.0.0.tgz",
diff --git a/docs/storybook/package.json b/docs/storybook/package.json
index e1ff0327c..28feea4c9 100644
--- a/docs/storybook/package.json
+++ b/docs/storybook/package.json
@@ -8,6 +8,7 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",
+    "@storybook/addon-a11y": "^7.0.6",
     "@storybook/addon-essentials": "^7.0.6",
     "@storybook/addon-interactions": "^7.0.6",
     "@storybook/addon-links": "^7.0.6",
@@ -15,12 +16,12 @@
     "@storybook/react": "^7.0.6",
     "@storybook/react-webpack5": "^7.0.6",
     "@storybook/testing-library": "^0.0.14-next.1",
-    "@storybook/theming": "6.5.16",
-    "@storybook/addon-a11y": "^7.0.6",
-    "storybook-addon-rem": "^1.3.0",
+    "@storybook/theming": "^7.0.6",
     "babel-loader": "^8.3.0",
     "prop-types": "^15.8.1",
     "storybook": "^7.0.6",
+    "storybook-addon-paddings": "^5.0.0",
+    "storybook-addon-rem": "^1.3.0",
     "typescript": "^4.9.4"
   },
   "dependencies": {
diff --git a/docs/storybook/stories/Size/Border.stories.tsx b/docs/storybook/stories/Size/Border.stories.tsx
index 8befb29f0..06831eee7 100644
--- a/docs/storybook/stories/Size/Border.stories.tsx
+++ b/docs/storybook/stories/Size/Border.stories.tsx
@@ -35,9 +35,9 @@ export const BorderSize = () => {
 
   return (
     <Table.Container>
-      <Table.Title as="h1" id="sizing">
+      <h1 className="sr-only" id="sizing">
         Border size
-      </Table.Title>
+      </h1>
       <DataTable
         aria-labelledby="sizing"
         data={data}
@@ -95,9 +95,9 @@ export const BorderRadius = () => {
 
   return (
     <Table.Container>
-      <Table.Title as="h1" id="sizing">
+      <h1 className="sr-only" id="sizing">
         Border radius
-      </Table.Title>
+      </h1>
       <DataTable
         aria-labelledby="sizing"
         data={data}
@@ -150,9 +150,9 @@ export const Outline = () => {
 
   return (
     <Table.Container>
-      <Table.Title as="h1" id="sizing">
+      <h1 className="sr-only" id="sizing">
         Focus outline
-      </Table.Title>
+      </h1>
       <DataTable
         aria-labelledby="sizing"
         data={data}
diff --git a/docs/storybook/stories/Size/Breakpoints.stories.tsx b/docs/storybook/stories/Size/Breakpoints.stories.tsx
index c7a89f768..9f3b7d060 100644
--- a/docs/storybook/stories/Size/Breakpoints.stories.tsx
+++ b/docs/storybook/stories/Size/Breakpoints.stories.tsx
@@ -22,9 +22,9 @@ export const Breakpoints = () => {
 
   return (
     <Table.Container>
-      <Table.Title as="h1" id="breakpoints">
+      <h1 className="sr-only" id="breakpoints">
         Breakpoints
-      </Table.Title>
+      </h1>
       <DataTable
         aria-labelledby="breakpoints"
         data={data}
diff --git a/docs/storybook/stories/Size/Control.stories.tsx b/docs/storybook/stories/Size/Control.stories.tsx
index 5a892ab41..febc6894d 100644
--- a/docs/storybook/stories/Size/Control.stories.tsx
+++ b/docs/storybook/stories/Size/Control.stories.tsx
@@ -421,9 +421,9 @@ export const ControlStackRegular = () => {
 
   return (
     <Table.Container>
-      <Table.Title as="h1" id="sizing">
+      <h1 className="sr-only" id="sizing">
         Control stack
-      </Table.Title>
+      </h1>
       <DataTable
         aria-labelledby="sizing"
         data={data}
@@ -490,9 +490,9 @@ export const ControlStackResponsive = () => {
 
   return (
     <Table.Container>
-      <Table.Title as="h1" id="sizing">
+      <h1 className="sr-only" id="sizing">
         Responsive control stack
-      </Table.Title>
+      </h1>
       <DataTable
         aria-labelledby="sizing"
         data={data}
@@ -550,9 +550,9 @@ export const ControlTouchTarget = () => {
 
   return (
     <Table.Container>
-      <Table.Title as="h1" id="sizing">
+      <h1 className="sr-only" id="sizing">
         Touch target
-      </Table.Title>
+      </h1>
       <DataTable
         aria-labelledby="sizing"
         data={data}
@@ -607,9 +607,9 @@ export const ControlTouchTargetResponsive = () => {
 
   return (
     <Table.Container>
-      <Table.Title as="h1" id="sizing">
+      <h1 className="sr-only" id="sizing">
         Responsive touch target
-      </Table.Title>
+      </h1>
       <DataTable
         aria-labelledby="sizing"
         data={data}
diff --git a/docs/storybook/stories/Size/Space.stories.tsx b/docs/storybook/stories/Size/Space.stories.tsx
index f5dbfebef..b01aa5e1d 100644
--- a/docs/storybook/stories/Size/Space.stories.tsx
+++ b/docs/storybook/stories/Size/Space.stories.tsx
@@ -23,9 +23,9 @@ export const Base = () => {
 
   return (
     <Table.Container>
-      <Table.Title as="h1" id="sizing">
+      <h1 className="sr-only" id="sizing">
         Base size
-      </Table.Title>
+      </h1>
       <DataTable
         aria-labelledby="sizing"
         data={data}
diff --git a/docs/storybook/stories/Size/Stack.stories.tsx b/docs/storybook/stories/Size/Stack.stories.tsx
index dae1f4258..37953b5d7 100644
--- a/docs/storybook/stories/Size/Stack.stories.tsx
+++ b/docs/storybook/stories/Size/Stack.stories.tsx
@@ -23,9 +23,9 @@ export const Stack = () => {
 
   return (
     <Table.Container>
-      <Table.Title as="h1" id="sizing">
+      <h1 className="sr-only" id="sizing">
         Stack
-      </Table.Title>
+      </h1>
       <DataTable
         aria-labelledby="sizing"
         data={data}
diff --git a/docs/storybook/stories/Size/ViewportRange.stories.tsx b/docs/storybook/stories/Size/ViewportRange.stories.tsx
index 8c76a1abe..d106356f9 100644
--- a/docs/storybook/stories/Size/ViewportRange.stories.tsx
+++ b/docs/storybook/stories/Size/ViewportRange.stories.tsx
@@ -21,9 +21,9 @@ export const Viewport = () => {
   })
   return (
     <Table.Container>
-      <Table.Title as="h1" id="viewports">
+      <h1 className="sr-only" id="sizing">
         Viewport ranges
-      </Table.Title>
+      </h1>
       <DataTable
         aria-labelledby="viewports"
         data={data}
diff --git a/docs/storybook/stories/Typography/Base.stories.tsx b/docs/storybook/stories/Typography/Base.stories.tsx
index d829ae3c4..f226cc522 100644
--- a/docs/storybook/stories/Typography/Base.stories.tsx
+++ b/docs/storybook/stories/Typography/Base.stories.tsx
@@ -23,9 +23,9 @@ export const Base = () => {
 
   return (
     <Table.Container>
-      <Table.Title as="h1" id="weight">
+      <h1 className="sr-only" id="weight">
         Base weight
-      </Table.Title>
+      </h1>
       <DataTable
         aria-labelledby="weight"
         data={data}
diff --git a/docs/storybook/stories/Typography/Functional.stories.tsx b/docs/storybook/stories/Typography/Functional.stories.tsx
index 6eb014933..ace5323bb 100644
--- a/docs/storybook/stories/Typography/Functional.stories.tsx
+++ b/docs/storybook/stories/Typography/Functional.stories.tsx
@@ -23,9 +23,9 @@ export const FontFamily = () => {
 
   return (
     <Table.Container>
-      <Table.Title as="h1" id="type">
+      <h1 className="sr-only" id="type">
         Font family
-      </Table.Title>
+      </h1>
       <DataTable
         aria-labelledby="type"
         data={data}
@@ -81,9 +81,9 @@ export const FontShorthand = () => {
 
   return (
     <Table.Container>
-      <Table.Title as="h1" id="type">
+      <h1 className="sr-only" id="type">
         Font shorthand
-      </Table.Title>
+      </h1>
       <DataTable
         aria-labelledby="type"
         data={filteredData}
@@ -960,9 +960,9 @@ export const Overview = () => {
 
   return (
     <Table.Container>
-      <Table.Title as="h1" id="type">
+      <h1 className="sr-only" id="type">
         Overview
-      </Table.Title>
+      </h1>
       <DataTable
         aria-labelledby="type"
         data={filteredData}

From f387cde8327fa3973a20f3fd6fa06b36d1620c10 Mon Sep 17 00:00:00 2001
From: Katie Langerman <18661030+langermank@users.noreply.github.com>
Date: Thu, 27 Apr 2023 15:24:47 -0700
Subject: [PATCH 06/21] fix table responsiveness (#624)

---
 .../stories/Typography/Functional.stories.tsx | 79 +++++++++++--------
 1 file changed, 44 insertions(+), 35 deletions(-)

diff --git a/docs/storybook/stories/Typography/Functional.stories.tsx b/docs/storybook/stories/Typography/Functional.stories.tsx
index ace5323bb..11f88f233 100644
--- a/docs/storybook/stories/Typography/Functional.stories.tsx
+++ b/docs/storybook/stories/Typography/Functional.stories.tsx
@@ -58,7 +58,7 @@ export const FontFamily = () => {
             header: 'Output value',
             field: 'value',
             rowHeader: true,
-            width: 'growCollapse',
+
             renderCell: row => {
               return <p>{row.value}</p>
             },
@@ -143,7 +143,7 @@ export const Display = () => {
     }
   })
 
-  const filteredData = data.filter(item => item.id.includes('display'))
+  const filteredData = data.filter(item => !item.id.includes('shorthand') && item.id.includes('display'))
 
   return (
     <Table.Container>
@@ -158,7 +158,6 @@ export const Display = () => {
             header: 'Property',
             field: 'name',
             rowHeader: true,
-            width: 'growCollapse',
             renderCell: row => {
               return (
                 <code>
@@ -189,7 +188,6 @@ export const Display = () => {
             header: 'Output value',
             field: 'value',
             rowHeader: true,
-            width: 'growCollapse',
             renderCell: row => {
               return <p>{row.value}</p>
             },
@@ -216,7 +214,9 @@ export const TitleLarge = () => {
     }
   })
 
-  const filteredData = data.filter(item => item.id.includes('title') && item.id.includes('large'))
+  const filteredData = data.filter(
+    item => !item.id.includes('shorthand') && item.id.includes('title') && item.id.includes('large'),
+  )
 
   return (
     <Table.Container>
@@ -232,7 +232,6 @@ export const TitleLarge = () => {
             header: 'Property',
             field: 'name',
             rowHeader: true,
-            width: 'growCollapse',
             renderCell: row => {
               return (
                 <code>
@@ -263,7 +262,7 @@ export const TitleLarge = () => {
             header: 'Output value',
             field: 'value',
             rowHeader: true,
-            width: 'growCollapse',
+
             renderCell: row => {
               return <p>{row.value}</p>
             },
@@ -290,7 +289,9 @@ export const TitleMedium = () => {
     }
   })
 
-  const filteredData = data.filter(item => item.id.includes('title') && item.id.includes('medium'))
+  const filteredData = data.filter(
+    item => !item.id.includes('shorthand') && item.id.includes('title') && item.id.includes('medium'),
+  )
 
   return (
     <Table.Container>
@@ -306,7 +307,7 @@ export const TitleMedium = () => {
             header: 'Property',
             field: 'name',
             rowHeader: true,
-            width: 'growCollapse',
+
             renderCell: row => {
               return (
                 <code>
@@ -337,7 +338,7 @@ export const TitleMedium = () => {
             header: 'Output value',
             field: 'value',
             rowHeader: true,
-            width: 'growCollapse',
+
             renderCell: row => {
               return <p>{row.value}</p>
             },
@@ -364,7 +365,9 @@ export const TitleSmall = () => {
     }
   })
 
-  const filteredData = data.filter(item => item.id.includes('title') && item.id.includes('small'))
+  const filteredData = data.filter(
+    item => !item.id.includes('shorthand') && item.id.includes('title') && item.id.includes('small'),
+  )
 
   return (
     <Table.Container>
@@ -380,7 +383,7 @@ export const TitleSmall = () => {
             header: 'Property',
             field: 'name',
             rowHeader: true,
-            width: 'growCollapse',
+
             renderCell: row => {
               return (
                 <code>
@@ -411,7 +414,7 @@ export const TitleSmall = () => {
             header: 'Output value',
             field: 'value',
             rowHeader: true,
-            width: 'growCollapse',
+
             renderCell: row => {
               return <p>{row.value}</p>
             },
@@ -438,7 +441,7 @@ export const Subtitle = () => {
     }
   })
 
-  const filteredData = data.filter(item => item.id.includes('subtitle'))
+  const filteredData = data.filter(item => !item.id.includes('shorthand') && item.id.includes('subtitle'))
 
   return (
     <Table.Container>
@@ -454,7 +457,7 @@ export const Subtitle = () => {
             header: 'Property',
             field: 'name',
             rowHeader: true,
-            width: 'growCollapse',
+
             renderCell: row => {
               return (
                 <code>
@@ -485,7 +488,7 @@ export const Subtitle = () => {
             header: 'Output value',
             field: 'value',
             rowHeader: true,
-            width: 'growCollapse',
+
             renderCell: row => {
               return <p>{row.value}</p>
             },
@@ -512,7 +515,9 @@ export const BodyLarge = () => {
     }
   })
 
-  const filteredData = data.filter(item => item.id.includes('body') && item.id.includes('large'))
+  const filteredData = data.filter(
+    item => !item.id.includes('shorthand') && item.id.includes('body') && item.id.includes('large'),
+  )
 
   return (
     <Table.Container>
@@ -528,7 +533,7 @@ export const BodyLarge = () => {
             header: 'Property',
             field: 'name',
             rowHeader: true,
-            width: 'growCollapse',
+
             renderCell: row => {
               return (
                 <code>
@@ -559,7 +564,7 @@ export const BodyLarge = () => {
             header: 'Output value',
             field: 'value',
             rowHeader: true,
-            width: 'growCollapse',
+
             renderCell: row => {
               return <p>{row.value}</p>
             },
@@ -586,7 +591,9 @@ export const BodyMedium = () => {
     }
   })
 
-  const filteredData = data.filter(item => item.id.includes('body') && item.id.includes('medium'))
+  const filteredData = data.filter(
+    item => !item.id.includes('shorthand') && item.id.includes('title') && item.id.includes('medium'),
+  )
 
   return (
     <Table.Container>
@@ -602,7 +609,7 @@ export const BodyMedium = () => {
             header: 'Property',
             field: 'name',
             rowHeader: true,
-            width: 'growCollapse',
+
             renderCell: row => {
               return (
                 <code>
@@ -633,7 +640,7 @@ export const BodyMedium = () => {
             header: 'Output value',
             field: 'value',
             rowHeader: true,
-            width: 'growCollapse',
+
             renderCell: row => {
               return <p>{row.value}</p>
             },
@@ -660,7 +667,9 @@ export const BodySmall = () => {
     }
   })
 
-  const filteredData = data.filter(item => item.id.includes('body') && item.id.includes('small'))
+  const filteredData = data.filter(
+    item => !item.id.includes('shorthand') && item.id.includes('title') && item.id.includes('small'),
+  )
 
   return (
     <Table.Container>
@@ -676,7 +685,7 @@ export const BodySmall = () => {
             header: 'Property',
             field: 'name',
             rowHeader: true,
-            width: 'growCollapse',
+
             renderCell: row => {
               return (
                 <code>
@@ -707,7 +716,7 @@ export const BodySmall = () => {
             header: 'Output value',
             field: 'value',
             rowHeader: true,
-            width: 'growCollapse',
+
             renderCell: row => {
               return <p>{row.value}</p>
             },
@@ -734,7 +743,7 @@ export const Caption = () => {
     }
   })
 
-  const filteredData = data.filter(item => item.id.includes('caption'))
+  const filteredData = data.filter(item => !item.id.includes('shorthand') && item.id.includes('caption'))
 
   return (
     <Table.Container>
@@ -750,7 +759,7 @@ export const Caption = () => {
             header: 'Property',
             field: 'name',
             rowHeader: true,
-            width: 'growCollapse',
+
             renderCell: row => {
               return (
                 <code>
@@ -781,7 +790,7 @@ export const Caption = () => {
             header: 'Output value',
             field: 'value',
             rowHeader: true,
-            width: 'growCollapse',
+
             renderCell: row => {
               return <p>{row.value}</p>
             },
@@ -808,7 +817,7 @@ export const CodeBlock = () => {
     }
   })
 
-  const filteredData = data.filter(item => item.id.includes('codeBlock'))
+  const filteredData = data.filter(item => !item.id.includes('shorthand') && item.id.includes('codeBlock'))
 
   return (
     <Table.Container>
@@ -824,7 +833,7 @@ export const CodeBlock = () => {
             header: 'Property',
             field: 'name',
             rowHeader: true,
-            width: 'growCollapse',
+
             renderCell: row => {
               return (
                 <code>
@@ -855,7 +864,7 @@ export const CodeBlock = () => {
             header: 'Output value',
             field: 'value',
             rowHeader: true,
-            width: 'growCollapse',
+
             renderCell: row => {
               return <p>{row.value}</p>
             },
@@ -882,7 +891,7 @@ export const InlineCodeBlock = () => {
     }
   })
 
-  const filteredData = data.filter(item => item.id.includes('codeInline'))
+  const filteredData = data.filter(item => !item.id.includes('shorthand') && item.id.includes('codeInline'))
 
   return (
     <Table.Container>
@@ -898,7 +907,7 @@ export const InlineCodeBlock = () => {
             header: 'Property',
             field: 'name',
             rowHeader: true,
-            width: 'growCollapse',
+
             renderCell: row => {
               return (
                 <code>
@@ -929,7 +938,7 @@ export const InlineCodeBlock = () => {
             header: 'Output value',
             field: 'value',
             rowHeader: true,
-            width: 'growCollapse',
+
             renderCell: row => {
               return <p>{row.value}</p>
             },
@@ -991,7 +1000,7 @@ export const Overview = () => {
             header: 'Description',
             field: 'comment',
             rowHeader: true,
-            width: 'growCollapse',
+
             renderCell: row => {
               return (
                 <p

From 62da8183e626997c7699b1342630b97d83e503c7 Mon Sep 17 00:00:00 2001
From: Katie Langerman <18661030+langermank@users.noreply.github.com>
Date: Thu, 27 Apr 2023 18:15:35 -0700
Subject: [PATCH 07/21] one more try (#625)

---
 docs/storybook/stories/Typography/Functional.stories.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/storybook/stories/Typography/Functional.stories.tsx b/docs/storybook/stories/Typography/Functional.stories.tsx
index 11f88f233..25a7ff6d1 100644
--- a/docs/storybook/stories/Typography/Functional.stories.tsx
+++ b/docs/storybook/stories/Typography/Functional.stories.tsx
@@ -58,7 +58,7 @@ export const FontFamily = () => {
             header: 'Output value',
             field: 'value',
             rowHeader: true,
-
+            width: 'auto',
             renderCell: row => {
               return <p>{row.value}</p>
             },
@@ -1000,7 +1000,7 @@ export const Overview = () => {
             header: 'Description',
             field: 'comment',
             rowHeader: true,
-
+            width: 'auto',
             renderCell: row => {
               return (
                 <p

From a984d511607bacae08b22be94b04e5ee7fbab56c Mon Sep 17 00:00:00 2001
From: Lukas Oppermann <lukasoppermann@github.com>
Date: Fri, 28 Apr 2023 11:12:56 +0200
Subject: [PATCH 08/21] fix dep (#626)

---
 package.json | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 5024acee0..b6a9c60c5 100644
--- a/package.json
+++ b/package.json
@@ -87,9 +87,7 @@
     "ts-jest": "^29.0.3",
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^4.1.0",
-    "typescript": "^4.9.3"
-  },
-  "dependencies": {
+    "typescript": "^4.9.3",
     "markdown-table-ts": "^1.0.3"
   }
 }

From 838ebcddbc2f0fbd2b733f1ae5d83057a01155c7 Mon Sep 17 00:00:00 2001
From: Lukas Oppermann <lukasoppermann@github.com>
Date: Fri, 28 Apr 2023 11:20:02 +0200
Subject: [PATCH 09/21] Optimize actions (#621)

* reusable workflow to check for changes

* use reusable changes check for a11y contrast
---
 .github/workflows/a11y-contrast.yml | 23 +-----------
 .github/workflows/hasChanged.yml    | 57 ++++++++++++++++++++++-------
 .github/workflows/test.yml          | 11 ------
 3 files changed, 46 insertions(+), 45 deletions(-)
 delete mode 100644 .github/workflows/test.yml

diff --git a/.github/workflows/a11y-contrast.yml b/.github/workflows/a11y-contrast.yml
index 653c04010..2f839cb8b 100644
--- a/.github/workflows/a11y-contrast.yml
+++ b/.github/workflows/a11y-contrast.yml
@@ -8,30 +8,11 @@ on:
 jobs:
   # JOB to run change detection
   changes:
-    runs-on: ubuntu-latest
-    # Required permissions
-    permissions:
-      pull-requests: read
-    # Set job outputs to values from filter step
-    outputs:
-      tokens: ${{ steps.filter.outputs.tokens }}
-      # transformation: ${{ steps.filter.outputs.transformation }}
-    steps:
-    # For pull requests it's not necessary to checkout the code
-    - uses: dorny/paths-filter@v2
-      id: filter
-      with:
-        filters: |
-          tokens:
-            - 'src/tokens/**'
-            - 'data/**'
-    - name: No changes to tokens detected
-      if: ${{ steps.filter.outputs.tokens == 'false' }}
-      run: echo "No changes to tokens detected, skipping further jobs checking tokens"
+    uses: ./.github/workflows/hasChanged.yml
 
   build:
     needs: changes
-    if: ${{ needs.changes.outputs.tokens == 'true' }}
+    if: ${{ needs.changes.outputs.oldTokens == 'true' }}
     name: Check design token color contrast
     runs-on: ubuntu-latest
     steps:
diff --git a/.github/workflows/hasChanged.yml b/.github/workflows/hasChanged.yml
index 5310b15c6..a033891a4 100644
--- a/.github/workflows/hasChanged.yml
+++ b/.github/workflows/hasChanged.yml
@@ -2,20 +2,30 @@ name: Check if files or folders have been changed
 
 on:
   workflow_call:
-    inputs:
-      filter:
-        required: true
-        type: string
     outputs:
-      hasChanged:
-        description: "Boolean value indicating if the files or folders have changed"
-        value: ${{ jobs.hasChanged.outputs.hasChanged }}
-
-jobs: 
+      tokens:
+        description: "Boolean value indicating change in src/tokens folder"
+        value: ${{ jobs.hasChanged.outputs.tokens }}
+      oldTokens:
+        description: "Boolean value indicating change in data folder"
+        value: ${{ jobs.hasChanged.outputs.oldTokens }}
+      src:
+        description: "Boolean value indicating change in src folder"
+        value: ${{ jobs.hasChanged.outputs.src }}
+      scripts:
+        description: "Boolean value indicating change in scripts folder"
+        value: ${{ jobs.hasChanged.outputs.scripts }}
+      dependencies:
+        description: "Boolean value indicating change in dependencies"
+        value: ${{ jobs.hasChanged.outputs.dependencies }}
+      docs:
+        description: "Boolean value indicating change in docs folder"
+        value: ${{ jobs.hasChanged.outputs.docs }}
+jobs:
   hasChanged:
     name: Checking for changes
     runs-on: ubuntu-latest
-       # Required permissions
+    # Required permissions
     permissions:
       pull-requests: read
     outputs:
@@ -26,7 +36,28 @@ jobs:
       with:
         list-files: shell
         filters: |
-          output:
-            - ${{ inputs.filter }}
+          tokens:
+            - 'src/tokens/**'
+          oldTokens:
+            - 'data/**'
+          src:
+            - 'src/**/**.ts'
+            - 'src/**/**.json'
+            - 'src/**/**.json5'
+          scripts:
+            - 'scripts/**'
+          dependencies:
+            - 'package.json'
+            - 'package-lock.json'
+          docs:
+            - 'docs/**'
     - name: Detecting changes that effect output
-      run: echo ${{ steps.filter.outputs.output == 'true' && 'Changes detected' || 'No changes detected' }} for "${{ inputs.filter }}"
\ No newline at end of file
+      if: steps.filter.outputs.tokens == 'true' || steps.filter.outputs.oldTokens == 'true' || steps.filter.outputs.src == 'true' || steps.filter.outputs.scripts == 'true' || steps.filter.outputs.dependencies == 'true' || steps.filter.outputs.docs == 'true'
+      run: |
+        echo Changes detected
+        echo   - tokens: ${{ steps.filter.outputs.tokens }}
+        echo   - oldTokens: ${{ steps.filter.outputs.oldTokens }}
+        echo   - src: ${{ steps.filter.outputs.src }}
+        echo   - scripts: ${{ steps.filter.outputs.scripts }}
+        echo   - dependencies: ${{ steps.filter.outputs.dependencies }}
+        echo   - docs: ${{ steps.filter.outputs.docs }}
\ No newline at end of file
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
deleted file mode 100644
index 0ee6d0f33..000000000
--- a/.github/workflows/test.yml
+++ /dev/null
@@ -1,11 +0,0 @@
-name: My Starter Workflow
-
-on:
-  workflow_dispatch:
-
-jobs:
-  call-reusable-workflow:
-    uses: ./.github/workflows/hasChanged.yml
-    with:
-      filter: '!(*.md|**/**/*.md|**/**/*.test.ts|**/**/*.test.js|docs/**|storybook/**)'
-      
\ No newline at end of file

From e92d9b37a2b80e674c3dd11de074d1c9742628cf Mon Sep 17 00:00:00 2001
From: Lukas Oppermann <lukasoppermann@github.com>
Date: Fri, 28 Apr 2023 13:51:34 +0200
Subject: [PATCH 10/21] run actions on file changes (#627)

---
 .github/workflows/a11y-contrast.yml           |  1 -
 .github/workflows/consumer_test.yml           | 19 +--------------
 ...mitives_diff.yml => design_token_diff.yml} |  5 +++-
 .github/workflows/diff.yml                    | 23 ++-----------------
 .github/workflows/hasChanged.yml              | 14 +++++++++++
 5 files changed, 21 insertions(+), 41 deletions(-)
 rename .github/workflows/{ui_test_primitives_diff.yml => design_token_diff.yml} (92%)

diff --git a/.github/workflows/a11y-contrast.yml b/.github/workflows/a11y-contrast.yml
index 2f839cb8b..91b70a438 100644
--- a/.github/workflows/a11y-contrast.yml
+++ b/.github/workflows/a11y-contrast.yml
@@ -6,7 +6,6 @@ on:
       - main
 
 jobs:
-  # JOB to run change detection
   changes:
     uses: ./.github/workflows/hasChanged.yml
 
diff --git a/.github/workflows/consumer_test.yml b/.github/workflows/consumer_test.yml
index 44f41f9eb..54f744937 100644
--- a/.github/workflows/consumer_test.yml
+++ b/.github/workflows/consumer_test.yml
@@ -11,24 +11,7 @@ env:
 
 jobs:
   changes:
-    runs-on: ubuntu-latest
-    # Required permissions
-    permissions:
-      pull-requests: read
-    # Set job outputs to values from filter step
-    outputs:
-      outputAffected: ${{ steps.filter.outputs.outputAffected }}
-    steps:
-    # For pull requests it's not necessary to checkout the code
-    - uses: dorny/paths-filter@v2
-      id: filter
-      with:
-        list-files: shell
-        filters: |
-          outputAffected:
-            - '!(*.md|**/**/*.md|**/**/*.test.ts|**/**/*.test.js|docs/**|storybook/**)'
-    - name: Detecting changes that effect output
-      run: echo ${{ steps.filter.outputs.outputAffected == 'true' && 'Committed changes may affect output' || 'Committed changes do not affect output' }}
+    uses: ./.github/workflows/hasChanged.yml
 
   test:
     needs: changes
diff --git a/.github/workflows/ui_test_primitives_diff.yml b/.github/workflows/design_token_diff.yml
similarity index 92%
rename from .github/workflows/ui_test_primitives_diff.yml
rename to .github/workflows/design_token_diff.yml
index ec759e228..987bc5127 100644
--- a/.github/workflows/ui_test_primitives_diff.yml
+++ b/.github/workflows/design_token_diff.yml
@@ -4,8 +4,11 @@ on:
   pull_request:
 
 jobs:
+  changes:
+    uses: ./.github/workflows/hasChanged.yml
+  
   test:
-    if: ${{ github.repository == 'primer/primitives' }}
+    if: ${{ github.repository == 'primer/primitives' && needs.changes.outputs.outputAffected == 'true' }}
     name: Primitives v2
     runs-on: ubuntu-latest
     steps:
diff --git a/.github/workflows/diff.yml b/.github/workflows/diff.yml
index 73f1ff545..4da86adc4 100644
--- a/.github/workflows/diff.yml
+++ b/.github/workflows/diff.yml
@@ -5,31 +5,12 @@ on:
     branches-ignore:
       - 'changeset-release/**'
 jobs:
-    # JOB to run change detection
   changes:
-    runs-on: ubuntu-latest
-    # Required permissions
-    permissions:
-      pull-requests: read
-    # Set job outputs to values from filter step
-    outputs:
-      tokens: ${{ steps.filter.outputs.tokens }}
-    steps:
-    # For pull requests it's not necessary to checkout the code
-    - uses: dorny/paths-filter@v2
-      id: filter
-      with:
-        filters: |
-          tokens:
-            - 'src/tokens/**'
-            - 'data/**'
-    - name: No changes to tokens detected
-      if: ${{ steps.filter.outputs.tokens == 'false' }}
-      run: echo "No changes to tokens detected, skipping further jobs checking tokens"
+    uses: ./.github/workflows/hasChanged.yml
 
   comment:
     needs: changes
-    if: ${{ needs.changes.outputs.tokens == 'true' }}
+    if: ${{ needs.changes.outputs.tokens == 'true' || needs.changes.outputs.oldTokens == 'true'  }}
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
diff --git a/.github/workflows/hasChanged.yml b/.github/workflows/hasChanged.yml
index a033891a4..aa291a368 100644
--- a/.github/workflows/hasChanged.yml
+++ b/.github/workflows/hasChanged.yml
@@ -3,6 +3,9 @@ name: Check if files or folders have been changed
 on:
   workflow_call:
     outputs:
+      outputAffected:
+        description: "Boolean value indicating changes in any file or folder that has an effect on the output"
+        value: ${{ jobs.hasChanged.outputs.oldTokens || jobs.hasChanged.outputs.src || jobs.hasChanged.outputs.buildScripts }}
       tokens:
         description: "Boolean value indicating change in src/tokens folder"
         value: ${{ jobs.hasChanged.outputs.tokens }}
@@ -15,6 +18,9 @@ on:
       scripts:
         description: "Boolean value indicating change in scripts folder"
         value: ${{ jobs.hasChanged.outputs.scripts }}
+      buildScripts:
+        description: "Boolean value indicating change in build files in the build folder"
+        value: ${{ jobs.hasChanged.outputs.buildScripts }}
       dependencies:
         description: "Boolean value indicating change in dependencies"
         value: ${{ jobs.hasChanged.outputs.dependencies }}
@@ -46,6 +52,13 @@ jobs:
             - 'src/**/**.json5'
           scripts:
             - 'scripts/**'
+          buildScripts:
+            - 'scripts/build.ts'
+            - 'scripts/buildTokens.ts'
+            - 'scripts/themes.config.ts'
+            - 'tsconfig.json'
+            - 'tsconfig.build.json'
+            - 'package.json'
           dependencies:
             - 'package.json'
             - 'package-lock.json'
@@ -59,5 +72,6 @@ jobs:
         echo   - oldTokens: ${{ steps.filter.outputs.oldTokens }}
         echo   - src: ${{ steps.filter.outputs.src }}
         echo   - scripts: ${{ steps.filter.outputs.scripts }}
+        echo   - buildScripts: ${{ steps.filter.outputs.buildScripts }}
         echo   - dependencies: ${{ steps.filter.outputs.dependencies }}
         echo   - docs: ${{ steps.filter.outputs.docs }}
\ No newline at end of file

From c8a4435b0f81123a797e40a7c3cc6f3d87c3cb13 Mon Sep 17 00:00:00 2001
From: Lukas Oppermann <lukasoppermann@github.com>
Date: Fri, 28 Apr 2023 14:18:01 +0200
Subject: [PATCH 11/21] fix for tests after merge (#628)

---
 .github/workflows/hasChanged.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/hasChanged.yml b/.github/workflows/hasChanged.yml
index aa291a368..b12a44669 100644
--- a/.github/workflows/hasChanged.yml
+++ b/.github/workflows/hasChanged.yml
@@ -37,6 +37,7 @@ jobs:
     outputs:
       hasChanged: ${{ steps.filter.outputs.output }}
     steps:
+    - uses: actions/checkout@v3
     - uses: dorny/paths-filter@v2
       id: filter
       with:

From 3c31253a5207e97cb69c42940af5afde83b7290f Mon Sep 17 00:00:00 2001
From: Lukas Oppermann <lukasoppermann@github.com>
Date: Tue, 2 May 2023 10:00:42 +0200
Subject: [PATCH 12/21] a11y-cache (#629)

* a11y-cache

* fix for hasChanged
---
 .github/workflows/a11y-contrast.yml | 3 ++-
 .github/workflows/hasChanged.yml    | 9 ++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/a11y-contrast.yml b/.github/workflows/a11y-contrast.yml
index 91b70a438..6e3bfa50c 100644
--- a/.github/workflows/a11y-contrast.yml
+++ b/.github/workflows/a11y-contrast.yml
@@ -11,7 +11,7 @@ jobs:
 
   build:
     needs: changes
-    if: ${{ needs.changes.outputs.oldTokens == 'true' }}
+    if: needs.changes.outputs.oldTokens == 'true'
     name: Check design token color contrast
     runs-on: ubuntu-latest
     steps:
@@ -22,6 +22,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 18
+          cache: 'npm'
 
       - name: Install dependencies
         run: npm ci --no-audit --no-fund
diff --git a/.github/workflows/hasChanged.yml b/.github/workflows/hasChanged.yml
index b12a44669..dd3e3b0a3 100644
--- a/.github/workflows/hasChanged.yml
+++ b/.github/workflows/hasChanged.yml
@@ -35,7 +35,14 @@ jobs:
     permissions:
       pull-requests: read
     outputs:
-      hasChanged: ${{ steps.filter.outputs.output }}
+      outputAffected: ${{ steps.filter.outputs.outputAffected }}
+      tokens: ${{ steps.filter.outputs.tokens }}
+      oldTokens: ${{ steps.filter.outputs.oldTokens }}
+      src: ${{ steps.filter.outputs.src }}
+      scripts: ${{ steps.filter.outputs.scripts }}
+      buildScripts: ${{ steps.filter.outputs.buildScripts }}
+      dependencies: ${{ steps.filter.outputs.dependencies }}
+      docs: ${{ steps.filter.outputs.docs }}
     steps:
     - uses: actions/checkout@v3
     - uses: dorny/paths-filter@v2

From 63839a58f9e8f5ed91791ea1d8531f9ebb0f3ac3 Mon Sep 17 00:00:00 2001
From: Lukas Oppermann <lukasoppermann@github.com>
Date: Tue, 2 May 2023 12:16:56 +0200
Subject: [PATCH 13/21] Add --ignore-scripts to npm run build (#630)

* add --ignore-scripts to npm run build

* add caching to npm install

* add  --ignore-scripts

* add build:docs in deploy_preview
---
 .github/workflows/a11y-contrast.yml     |  2 +-
 .github/workflows/ci.yml                | 10 +++++++---
 .github/workflows/consumer_test.yml     |  4 ++--
 .github/workflows/deploy.yml            |  3 ++-
 .github/workflows/deploy_preview.yml    |  3 ++-
 .github/workflows/design_token_diff.yml |  7 ++++---
 .github/workflows/diff.yml              | 10 ++++++----
 .github/workflows/release.yml           |  3 ++-
 .github/workflows/release_candidate.yml |  3 ++-
 package.json                            |  2 +-
 10 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/.github/workflows/a11y-contrast.yml b/.github/workflows/a11y-contrast.yml
index 6e3bfa50c..bb15cf34d 100644
--- a/.github/workflows/a11y-contrast.yml
+++ b/.github/workflows/a11y-contrast.yml
@@ -25,7 +25,7 @@ jobs:
           cache: 'npm'
 
       - name: Install dependencies
-        run: npm ci --no-audit --no-fund
+        run: npm ci --no-audit --no-fund --ignore-scripts
 
       - name: Build tokens
         run: npm run build # building v1 as they are currently used for contrast check
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index abdeefc4e..395fb2fbc 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -19,9 +19,10 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 16
+          cache: 'npm'
 
       - name: Install dependencies
-        run: npm ci --legacy-peer-deps --no-audit --no-fund && cd docs && npm ci --legacy-peer-deps --no-audit --no-fund
+        run: npm ci --legacy-peer-deps --no-audit --no-fund --ignore-scripts && cd docs && npm ci --legacy-peer-deps --no-audit --no-fund --ignore-scripts
 
       - name: Build v1 tokens
         run: npm run build
@@ -41,6 +42,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 16
+          cache: 'npm'
 
       - name: Install dependencies
         run: npm ci --legacy-peer-deps --no-audit --no-fund && cd docs && npm ci --legacy-peer-deps --no-audit --no-fund
@@ -66,9 +68,10 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 16
+          cache: 'npm'
 
       - name: Install dependencies
-        run: npm ci --legacy-peer-deps --no-audit --no-fund && cd docs && npm ci --legacy-peer-deps --no-audit --no-fund
+        run: npm ci --legacy-peer-deps --no-audit --no-fund --ignore-scripts && cd docs && npm ci --legacy-peer-deps --no-audit --no-fund --ignore-scripts
 
       - name: Lint
         run: npm run format:check
@@ -85,9 +88,10 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 16
+          cache: 'npm'
 
       - name: Install dependencies
-        run: npm ci --legacy-peer-deps --no-audit --no-fund && cd docs && npm ci --legacy-peer-deps --no-audit --no-fund
+        run: npm ci --legacy-peer-deps --no-audit --no-fund --ignore-scripts && cd docs && npm ci --legacy-peer-deps --no-audit --no-fund --ignore-scripts
 
       - name: Build v1 tokens
         run: npm run build
diff --git a/.github/workflows/consumer_test.yml b/.github/workflows/consumer_test.yml
index 54f744937..e42afe729 100644
--- a/.github/workflows/consumer_test.yml
+++ b/.github/workflows/consumer_test.yml
@@ -31,7 +31,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: 16
 
       - name: Caching dependencies
         uses: actions/cache@v3
@@ -42,7 +42,7 @@ jobs:
             ${{ runner.os }}-node-
 
       - name: Install local dependencies
-        run: npm install --legacy-peer-deps
+        run: npm install --legacy-peer-deps --ignore-scripts
 
       - name: Install consumer dependencies (reference)
         run: pushd ${{env.TEST_FOLDER}}; npm install --legacy-peer-deps; popd
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index cd1f8e727..11bdfb9c1 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -16,6 +16,7 @@ jobs:
     uses: primer/.github/.github/workflows/deploy.yml@main
     with:
       node_version: 18
-      install: npm ci --legacy-peer-deps --no-audit --no-fund && cd docs && npm ci --legacy-peer-deps --no-audit --no-fund && cd ..
+      install: npm ci --legacy-peer-deps --no-audit --no-fund --ignore-scripts && cd docs && npm ci --legacy-peer-deps --no-audit --no-fund --ignore-scripts && cd ..
       build: npm run build:tokens && npm run build && npm run build:next && cd docs && npm run build
       output_dir: docs/public
+
diff --git a/.github/workflows/deploy_preview.yml b/.github/workflows/deploy_preview.yml
index 94fc2f208..5c2232132 100644
--- a/.github/workflows/deploy_preview.yml
+++ b/.github/workflows/deploy_preview.yml
@@ -15,10 +15,11 @@ jobs:
     uses: primer/.github/.github/workflows/deploy_preview.yml@main
     with:
       node_version: 18
-      install: npm ci --no-audit --no-fund
+      install: npm ci --no-audit --no-fund --ignore-scripts && npm run install:storybook && npm run install:docs
       build: npm run build:tokens && npm run build && npm run build:next && cd docs && npm run build:preview
       output_dir: docs/public
 
+
   post_storybook:
     needs: deploy
     name: Link storybook
diff --git a/.github/workflows/design_token_diff.yml b/.github/workflows/design_token_diff.yml
index 987bc5127..7855ade54 100644
--- a/.github/workflows/design_token_diff.yml
+++ b/.github/workflows/design_token_diff.yml
@@ -24,7 +24,8 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: 16
+          cache: 'npm'
 
       - name: Cache dependencies
         uses: actions/cache@v3
@@ -35,10 +36,10 @@ jobs:
             ${{ runner.os }}-node-
 
       - name: Install dependencies
-        run: npm install --legacy-peer-deps
+        run: npm install --legacy-peer-deps --ignore-scripts
 
       - name: Install dependencies (reference)
-        run: pushd temp-main; npm install --legacy-peer-deps; popd
+        run: pushd temp-main; npm install --legacy-peer-deps --ignore-scripts; popd
 
       - name: Build
         run: npm run build:tokens
diff --git a/.github/workflows/diff.yml b/.github/workflows/diff.yml
index 4da86adc4..5431fdf87 100644
--- a/.github/workflows/diff.yml
+++ b/.github/workflows/diff.yml
@@ -19,7 +19,8 @@ jobs:
       - name: Set up node
         uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 16
+          cache: 'npm'
 
       - name: Create comment (if necessary)
         uses: actions/github-script@v5
@@ -61,10 +62,11 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 16
+          cache: 'npm'
 
       - name: Install dependencies
-        run: npm ci --no-audit --no-fund --include=dev
+        run: npm ci --no-audit --no-fund --include=dev --ignore-scripts
 
       - name: Build tokens
         run: npm run build
@@ -73,7 +75,7 @@ jobs:
         run: npm run build:tokens
 
       - name: Install dependencies (base)
-        run: pushd base; npm i --no-audit --no-fund; popd
+        run: pushd base; npm i --no-audit --no-fund --ignore-scripts; popd
 
       - name: Build (base)
         run: pushd base; npm run build; popd
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 83a70fc1f..2e47f8158 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -21,7 +21,8 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 16
+          cache: 'npm'
 
       - name: Install dependencies
         run: npm ci --legacy-peer-deps --no-audit --no-fund && pushd docs; npm ci --legacy-peer-deps --no-audit --no-fund; popd
diff --git a/.github/workflows/release_candidate.yml b/.github/workflows/release_candidate.yml
index a7747d23d..f9fc23eec 100644
--- a/.github/workflows/release_candidate.yml
+++ b/.github/workflows/release_candidate.yml
@@ -20,7 +20,8 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 16
+          cache: 'npm'
 
       - name: Install dependencies
         run: npm ci --legacy-peer-deps
diff --git a/package.json b/package.json
index b6a9c60c5..b8b4118c9 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "prebuild:tokens": "rm -rf tokens-v2-private",
     "prebuild:next": "rm -rf tokens-next-private",
     "prepack": "npm run build && npm run build:tokens && npm run build:next",
-    "prepare": "husky install && npm run install:docs && npm run install:storybook",
+    "prepare": "husky install",
     "release": "changeset publish",
     "start:storybook": "npm run build:next && cd docs/storybook && npm run storybook",
     "test": "jest --verbose --coverage",

From 2356b25c7036deb1d0452d958050ffbcc10f5ecb Mon Sep 17 00:00:00 2001
From: Lukas Oppermann <lukasoppermann@github.com>
Date: Tue, 2 May 2023 12:44:32 +0200
Subject: [PATCH 14/21] Optimize ci build (#631)

* optimize ci build
---
 .github/workflows/ci.yml | 75 ++++------------------------------------
 1 file changed, 6 insertions(+), 69 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 395fb2fbc..df259539b 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -22,82 +22,19 @@ jobs:
           cache: 'npm'
 
       - name: Install dependencies
-        run: npm ci --legacy-peer-deps --no-audit --no-fund --ignore-scripts && cd docs && npm ci --legacy-peer-deps --no-audit --no-fund --ignore-scripts
+        run: npm ci --no-audit --no-fund --ignore-scripts
 
       - name: Build v1 tokens
         run: npm run build
 
-      - name: Build v2 tokens
-        run: npm run build:tokens
+      - name: Build v8 tokens
+        run: npm run build:next
 
-  lint:
-    if: ${{ github.repository == 'primer/primitives' }}
-    name: Code linting check
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v3
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
-          cache: 'npm'
-
-      - name: Install dependencies
-        run: npm ci --legacy-peer-deps --no-audit --no-fund && cd docs && npm ci --legacy-peer-deps --no-audit --no-fund
-
-      - name: Build v1 tokens
-        run: npm run build
-
-      - name: Build v2 tokens
-        run: npm run build:tokens
-
-      - name: Lint
+      - name: Code linting check
         run: npm run lint
 
-  formatting:
-    if: ${{ github.repository == 'primer/primitives' }}
-    name: Code formatting check
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v3
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
-          cache: 'npm'
-
-      - name: Install dependencies
-        run: npm ci --legacy-peer-deps --no-audit --no-fund --ignore-scripts && cd docs && npm ci --legacy-peer-deps --no-audit --no-fund --ignore-scripts
-
-      - name: Lint
+      - name: Code formatting check
         run: npm run format:check
 
-  test:
-    if: ${{ github.repository == 'primer/primitives' }}
-    name: Unit tests
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v3
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
-          cache: 'npm'
-
-      - name: Install dependencies
-        run: npm ci --legacy-peer-deps --no-audit --no-fund --ignore-scripts && cd docs && npm ci --legacy-peer-deps --no-audit --no-fund --ignore-scripts
-
-      - name: Build v1 tokens
-        run: npm run build
-
-      - name: Build v2 tokens
-        run: npm run build:tokens
-
       - name: Run unit tests
-        run: npm test
+        run: npm test
\ No newline at end of file

From 88744c393e454aab470f0a3c1cb64b0a0922d3ae Mon Sep 17 00:00:00 2001
From: Lukas Oppermann <lukasoppermann@github.com>
Date: Tue, 2 May 2023 12:59:42 +0200
Subject: [PATCH 15/21] rm old tests (#632)

---
 __tests__/buildJs/pathToDotNotation.test.js | 16 ----------------
 __tests__/buildJs/pathToKebabCase.test.js   | 16 ----------------
 __tests__/buildJs/pathToPascalCase.test.js  | 16 ----------------
 3 files changed, 48 deletions(-)
 delete mode 100644 __tests__/buildJs/pathToDotNotation.test.js
 delete mode 100644 __tests__/buildJs/pathToKebabCase.test.js
 delete mode 100644 __tests__/buildJs/pathToPascalCase.test.js

diff --git a/__tests__/buildJs/pathToDotNotation.test.js b/__tests__/buildJs/pathToDotNotation.test.js
deleted file mode 100644
index e5c4e2a20..000000000
--- a/__tests__/buildJs/pathToDotNotation.test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-const {pathToDotNotation} = require('../../build')
-
-// eslint-disable-next-line i18n-text/no-en
-describe('Token formatters: dot.notation', () => {
-  it('returns a valid token name in dot.notation', () => {
-    expect(pathToDotNotation({path: ['red']})).toBe('red')
-    expect(pathToDotNotation({path: ['color', 'red']})).toBe('color.red')
-    expect(pathToDotNotation({path: ['color', 'functional', 'danger']})).toBe('color.functional.danger')
-  })
-
-  it('works as expected with empty token path', () => {
-    expect(pathToDotNotation({path: []})).toBe('')
-    expect(() => pathToDotNotation({path: null})).toThrowError()
-    expect(() => pathToDotNotation([])).toThrowError()
-  })
-})
diff --git a/__tests__/buildJs/pathToKebabCase.test.js b/__tests__/buildJs/pathToKebabCase.test.js
deleted file mode 100644
index e9dc33b83..000000000
--- a/__tests__/buildJs/pathToKebabCase.test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-const {pathToKebabCase} = require('../../build')
-
-// eslint-disable-next-line i18n-text/no-en
-describe('Token formatters: kebab-case', () => {
-  it('returns a valid token name in kebab-case', () => {
-    expect(pathToKebabCase({path: ['red']})).toBe('red')
-    expect(pathToKebabCase({path: ['color', 'red']})).toBe('color-red')
-    expect(pathToKebabCase({path: ['color', 'functional', 'danger']})).toBe('color-functional-danger')
-  })
-
-  it('works as expected with empty token path', () => {
-    expect(pathToKebabCase({path: []})).toBe('')
-    expect(() => pathToKebabCase({path: null})).toThrowError()
-    expect(() => pathToKebabCase([])).toThrowError()
-  })
-})
diff --git a/__tests__/buildJs/pathToPascalCase.test.js b/__tests__/buildJs/pathToPascalCase.test.js
deleted file mode 100644
index c2e1578f0..000000000
--- a/__tests__/buildJs/pathToPascalCase.test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-const {pathToPascalCase} = require('../../build')
-
-// eslint-disable-next-line i18n-text/no-en
-describe('Token formatters: PascalCase', () => {
-  test('returns a valid token name in PascalCase', () => {
-    expect(pathToPascalCase({path: ['red']})).toBe('Red')
-    expect(pathToPascalCase({path: ['color', 'red']})).toBe('ColorRed')
-    expect(pathToPascalCase({path: ['color', 'functional', 'danger']})).toBe('ColorFunctionalDanger')
-  })
-
-  it('works as expected with empty token path', () => {
-    expect(pathToPascalCase({path: []})).toBe('')
-    expect(() => pathToPascalCase({path: null})).toThrowError()
-    expect(() => pathToPascalCase([])).toThrowError()
-  })
-})

From e946525191cb5e014fb62984bda4f97de73e4ead Mon Sep 17 00:00:00 2001
From: Lukas Oppermann <lukasoppermann@github.com>
Date: Tue, 2 May 2023 18:40:40 +0200
Subject: [PATCH 16/21] deploy (#633)

---
 .github/workflows/deploy.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 11bdfb9c1..f92f44e0a 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -16,7 +16,7 @@ jobs:
     uses: primer/.github/.github/workflows/deploy.yml@main
     with:
       node_version: 18
-      install: npm ci --legacy-peer-deps --no-audit --no-fund --ignore-scripts && cd docs && npm ci --legacy-peer-deps --no-audit --no-fund --ignore-scripts && cd ..
+      install: npm ci --legacy-peer-deps --no-audit --no-fund && cd docs && npm ci --legacy-peer-deps --no-audit --no-fund && cd ..
       build: npm run build:tokens && npm run build && npm run build:next && cd docs && npm run build
       output_dir: docs/public
 

From 3e331b6e81cce5d6db7ae0c66e724a125bf7a1e8 Mon Sep 17 00:00:00 2001
From: Katie Langerman <18661030+langermank@users.noreply.github.com>
Date: Tue, 2 May 2023 12:19:26 -0700
Subject: [PATCH 17/21] Minor docs fixes (#634)

* small fixes

* Create tricky-maps-buy.md
---
 .changeset/tricky-maps-buy.md                 |  5 +++++
 .../Color/Functional/Background.stories.tsx   |  2 +-
 .../Color/Patterns/AllPatterns.stories.tsx    | 21 ++++++++++++++++++-
 .../v8/DeprecatedPatternTokensMap.json        |  3 +++
 .../functional/color/dark/patterns-dark.json5 |  2 +-
 5 files changed, 30 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/tricky-maps-buy.md

diff --git a/.changeset/tricky-maps-buy.md b/.changeset/tricky-maps-buy.md
new file mode 100644
index 000000000..decfbe32d
--- /dev/null
+++ b/.changeset/tricky-maps-buy.md
@@ -0,0 +1,5 @@
+---
+"@primer/primitives": patch
+---
+
+Minor docs fixes
diff --git a/docs/storybook/stories/Color/Functional/Background.stories.tsx b/docs/storybook/stories/Color/Functional/Background.stories.tsx
index 7bbe70047..bc8a80e62 100644
--- a/docs/storybook/stories/Color/Functional/Background.stories.tsx
+++ b/docs/storybook/stories/Color/Functional/Background.stories.tsx
@@ -9,7 +9,7 @@ export default {
   },
 }
 
-const bgColors = ['bgColor-default', 'bgColor-muted', 'bgColor-disabled']
+const bgColors = ['bgColor-default', 'bgColor-muted', 'bgColor-disabled', 'bgColor-emphasis']
 
 export const Background = () => {
   return (
diff --git a/docs/storybook/stories/Color/Patterns/AllPatterns.stories.tsx b/docs/storybook/stories/Color/Patterns/AllPatterns.stories.tsx
index 33df1638c..a33710d34 100644
--- a/docs/storybook/stories/Color/Patterns/AllPatterns.stories.tsx
+++ b/docs/storybook/stories/Color/Patterns/AllPatterns.stories.tsx
@@ -72,12 +72,31 @@ export const Avatar = () => {
 }
 
 export const Control = () => {
-  const data = getTokensByName(colorTokens, 'control').map(token => {
+  const control = getTokensByName(colorTokens, 'control').map(token => {
     return {
       id: token.name,
       ...token,
     }
   })
+
+  const controlKnob = getTokensByName(colorTokens, 'controlKnob').map(token => {
+    return {
+      id: token.name,
+      ...token,
+    }
+  })
+
+  const controlTrack = getTokensByName(colorTokens, 'controlTrack').map(token => {
+    return {
+      id: token.name,
+      ...token,
+    }
+  })
+
+  const data = control.concat(controlKnob, controlTrack).map((item, index) => ({
+    ...item,
+    index,
+  }))
   return (
     <Table.Container>
       <Table.Title as="h1" id="pattern">
diff --git a/docs/storybook/stories/Migration/v8/DeprecatedPatternTokensMap.json b/docs/storybook/stories/Migration/v8/DeprecatedPatternTokensMap.json
index a7f643727..9f116b294 100644
--- a/docs/storybook/stories/Migration/v8/DeprecatedPatternTokensMap.json
+++ b/docs/storybook/stories/Migration/v8/DeprecatedPatternTokensMap.json
@@ -36,6 +36,9 @@
   "color-timeline-badge-bg": {
     "background": "timelineBadge-bgColor"
   },
+  "color-btn-text": {
+    "color": "control-fgColor-rest"
+  },
   "color-btn-bg": {
     "background": "button-default-bgColor-rest"
   },
diff --git a/src/tokens/functional/color/dark/patterns-dark.json5 b/src/tokens/functional/color/dark/patterns-dark.json5
index 6d1a28f95..eb4d90d4f 100644
--- a/src/tokens/functional/color/dark/patterns-dark.json5
+++ b/src/tokens/functional/color/dark/patterns-dark.json5
@@ -6,7 +6,7 @@
       alpha: 0.1,
     },
     borderColor: {
-      $value: 'transparent',
+      $value: '{borderColor.muted}',
       $type: 'color',
     },
   },

From 13a25d137914d660b35957e4b0c946955df99e08 Mon Sep 17 00:00:00 2001
From: Lukas Oppermann <lukasoppermann@github.com>
Date: Tue, 2 May 2023 22:17:11 +0200
Subject: [PATCH 18/21] working on diffing v8 tokens (#614)

* working on diffing v8 tokens

* update script

* use action glob
---
 .github/workflows/diff-v8.yml           | 138 ++++++++++++++++++++++++
 src/tokens/base/color/light/light.json5 |   2 +-
 2 files changed, 139 insertions(+), 1 deletion(-)
 create mode 100644 .github/workflows/diff-v8.yml

diff --git a/.github/workflows/diff-v8.yml b/.github/workflows/diff-v8.yml
new file mode 100644
index 000000000..98213cb01
--- /dev/null
+++ b/.github/workflows/diff-v8.yml
@@ -0,0 +1,138 @@
+# Posts a comment listing all the variables that changed in a PR
+name: Show diff for v8 design token changes
+on:
+  pull_request:
+    branches-ignore:
+      - 'changeset-release/**'
+jobs:
+  changes:
+    uses: ./.github/workflows/hasChanged.yml
+
+  diff:
+    # needs: changes
+    # if: ${{ needs.changes.outputs.tokens == 'true' }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Checkout base branch
+        uses: actions/checkout@v2
+        with:
+          ref: ${{ github.base_ref }}
+          path: base
+
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci --no-audit --no-fund --include=dev --ignore-scripts
+
+      - name: Build v8 tokens
+        run: npm run build:next
+
+      - name: Install dependencies (base)
+        run: pushd base; npm i --no-audit --no-fund --ignore-scripts; popd
+
+      - name: Build (base)
+        run: pushd base; npm run build:next; popd
+
+      - name: Install dependecies for diffing
+        run: npm install glob shelljs
+
+      - name: Diff v8 tokens
+        uses: actions/github-script@v6
+        with:
+          script: |
+            const shell = require('shelljs')
+            const globber = await glob.create('tokens-next-private/css/**/**/*.css')
+            const files = await globber.glob()
+
+            // create diffs
+            const diffs = files.map(file => {
+              const diff = shell.exec(`diff -U 1 base/${file} ${file} 2> /dev/null || true`, {silent: true})
+
+              if (diff.stderr) {
+                throw new Error(diff.stderr)
+              }
+              
+              return {
+                file: file.replace('tokens-next-private/css/', ''),
+                diff: diff.stdout || ''
+              }
+            })
+            // filter files with no diffs
+            .filter(item => item.diff !== '')
+            
+            // prepare comment body
+            const body = '## Design Token Diff\n\n' + 
+              diffs.map(({file, diff}) => 
+                '<details>' +
+                `<summary><h3>${file}</h3></summary>\n` +
+                "  \n"+
+                "  ```diff"+
+                `  ${diff}` +
+                "  ```"+
+                '\n</details>'
+              ).join('\n')
+            // get comments
+            const {data: comments} = await github.rest.issues.listComments({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo
+            });
+
+            // get comment if exists
+            const existingComment = comments.filter(comment => comment.body.includes('## Design Token Diff'));
+            // if token issue exists, update it
+            if(existingComment.length > 0) {
+              await github.rest.issues.updateComment({
+                comment_id: existingComment[0].id,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                body
+              })
+            }
+
+            // if comment does not exist, create it
+            else {
+              await github.rest.issues.createComment({
+                issue_number: context.issue.number,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                body
+              })
+            }
+      # - name: Diff
+      #   uses: primer/comment-token-update@main
+      #   env:
+      #     GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      #     GITHUB_USER: github-actions[bot]
+      #   with:
+          # This action will find the first comment by `github-actions[bot]` and
+          # insert the diff data if `<!-- diff --><!-- /diff -->` is present in that comment.
+          # If there are multiple comments by `github-actions[bot]`
+          # or if `<!-- diff --><!-- /diff -->` is missing,
+          # this action may not work as expected.
+          # comment-token: 'diff'
+          # script: |
+          #   diff=$(for file in tokens-next-private/css/**/**/*.css
+          #     do
+          #       # using `2> /dev/null || true` here to suppress errors because,
+          #       # in this case, differences are not errors
+          #       diff -U 1 base/$file $file 2> /dev/null || true
+          #     done)
+
+          #   echo "\`\`\`diff"
+
+          #   if [[ $diff ]]
+          #   then
+          #     echo "$diff"
+          #   else
+          #     echo "No variables changed"
+          #   fi
+
+          #   echo "\`\`\`"
diff --git a/src/tokens/base/color/light/light.json5 b/src/tokens/base/color/light/light.json5
index aa44e32ff..e91122a55 100644
--- a/src/tokens/base/color/light/light.json5
+++ b/src/tokens/base/color/light/light.json5
@@ -6,7 +6,7 @@
   base: {
     color: {
       black: {
-        $value: '#1f2328',
+        $value: '#9f2328',
         $type: 'color',
       },
       transparent: {

From 1bfeeb5b03ba26afd5a3bee27f79e38f4eec66eb Mon Sep 17 00:00:00 2001
From: Lukas Oppermann <lukasoppermann@github.com>
Date: Tue, 2 May 2023 22:18:46 +0200
Subject: [PATCH 19/21] rest color from testing (#635)

---
 src/tokens/base/color/light/light.json5 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/tokens/base/color/light/light.json5 b/src/tokens/base/color/light/light.json5
index e91122a55..aa44e32ff 100644
--- a/src/tokens/base/color/light/light.json5
+++ b/src/tokens/base/color/light/light.json5
@@ -6,7 +6,7 @@
   base: {
     color: {
       black: {
-        $value: '#9f2328',
+        $value: '#1f2328',
         $type: 'color',
       },
       transparent: {

From 08986701ba5fa357cb4be6f65a53cdad7c485ebb Mon Sep 17 00:00:00 2001
From: Lukas Oppermann <lukasoppermann@github.com>
Date: Wed, 3 May 2023 12:26:54 +0200
Subject: [PATCH 20/21] add text when no tokens change (#636)

---
 .github/workflows/diff-v8.yml | 61 ++++++++++++-----------------------
 1 file changed, 20 insertions(+), 41 deletions(-)

diff --git a/.github/workflows/diff-v8.yml b/.github/workflows/diff-v8.yml
index 98213cb01..557a9639d 100644
--- a/.github/workflows/diff-v8.yml
+++ b/.github/workflows/diff-v8.yml
@@ -9,8 +9,8 @@ jobs:
     uses: ./.github/workflows/hasChanged.yml
 
   diff:
-    # needs: changes
-    # if: ${{ needs.changes.outputs.tokens == 'true' }}
+    needs: changes
+    if: ${{ needs.changes.outputs.tokens == 'true' }}
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
@@ -41,35 +41,43 @@ jobs:
         run: pushd base; npm run build:next; popd
 
       - name: Install dependecies for diffing
-        run: npm install glob shelljs
+        run: npm install shelljs
 
       - name: Diff v8 tokens
         uses: actions/github-script@v6
         with:
           script: |
+            const cssFolder = 'tokens-next-private/css'
             const shell = require('shelljs')
-            const globber = await glob.create('tokens-next-private/css/**/**/*.css')
+            const globber = await glob.create(cssFolder + '/**/**/*.css')
             const files = await globber.glob()
 
             // create diffs
             const diffs = files.map(file => {
-              const diff = shell.exec(`diff -U 1 base/${file} ${file} 2> /dev/null || true`, {silent: true})
+              const diff = shell.exec(`diff -u ${file.replace(cssFolder, 'base/' + cssFolder)} ${file}`)
 
               if (diff.stderr) {
-                throw new Error(diff.stderr)
+                console.error(diff.stderr)
+                core.setFailed(diff.stderr)
               }
               
+              const regexRunnerPath = new RegExp('^[a-z\/]+\/tokens-next-private', 'g')
               return {
-                file: file.replace('tokens-next-private/css/', ''),
+                file: file.replaceAll(regexRunnerPath,''),
                 diff: diff.stdout || ''
               }
             })
             // filter files with no diffs
-            .filter(item => item.diff !== '')
-            
+            .filter(item => {
+              return item.diff !== ''
+            })
+
             // prepare comment body
-            const body = '## Design Token Diff\n\n' + 
-              diffs.map(({file, diff}) => 
+            let body = '## Design Token Diff\n\n'
+            if (diffs.length === 0) {
+              body += 'No design tokens changed'
+            } else {
+              body += diffs.map(({file, diff}) => 
                 '<details>' +
                 `<summary><h3>${file}</h3></summary>\n` +
                 "  \n"+
@@ -78,6 +86,7 @@ jobs:
                 "  ```"+
                 '\n</details>'
               ).join('\n')
+            }
             // get comments
             const {data: comments} = await github.rest.issues.listComments({
               issue_number: context.issue.number,
@@ -106,33 +115,3 @@ jobs:
                 body
               })
             }
-      # - name: Diff
-      #   uses: primer/comment-token-update@main
-      #   env:
-      #     GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      #     GITHUB_USER: github-actions[bot]
-      #   with:
-          # This action will find the first comment by `github-actions[bot]` and
-          # insert the diff data if `<!-- diff --><!-- /diff -->` is present in that comment.
-          # If there are multiple comments by `github-actions[bot]`
-          # or if `<!-- diff --><!-- /diff -->` is missing,
-          # this action may not work as expected.
-          # comment-token: 'diff'
-          # script: |
-          #   diff=$(for file in tokens-next-private/css/**/**/*.css
-          #     do
-          #       # using `2> /dev/null || true` here to suppress errors because,
-          #       # in this case, differences are not errors
-          #       diff -U 1 base/$file $file 2> /dev/null || true
-          #     done)
-
-          #   echo "\`\`\`diff"
-
-          #   if [[ $diff ]]
-          #   then
-          #     echo "$diff"
-          #   else
-          #     echo "No variables changed"
-          #   fi
-
-          #   echo "\`\`\`"

From f9f54737d115315de072fec9a7ffcc70e2221991 Mon Sep 17 00:00:00 2001
From: Lukas Oppermann <lukasoppermann@github.com>
Date: Wed, 3 May 2023 13:02:40 +0200
Subject: [PATCH 21/21] more info while diffing (#638)

---
 .github/workflows/diff-v8.yml | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/diff-v8.yml b/.github/workflows/diff-v8.yml
index 557a9639d..6636cd2d4 100644
--- a/.github/workflows/diff-v8.yml
+++ b/.github/workflows/diff-v8.yml
@@ -14,10 +14,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Checkout base branch
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           ref: ${{ github.base_ref }}
           path: base
@@ -54,16 +54,27 @@ jobs:
 
             // create diffs
             const diffs = files.map(file => {
+              // run diff
               const diff = shell.exec(`diff -u ${file.replace(cssFolder, 'base/' + cssFolder)} ${file}`)
+              // get filename
+              const regexRunnerPath = new RegExp('^[a-z\/]+\/tokens-next-private', 'g')
+              const filename = file.replaceAll(regexRunnerPath,'')
+
+              console.log('Checking diff for ' + filename + '...')
 
               if (diff.stderr) {
                 console.error(diff.stderr)
                 core.setFailed(diff.stderr)
               }
               
-              const regexRunnerPath = new RegExp('^[a-z\/]+\/tokens-next-private', 'g')
+              if (diff.stdout === '') {
+                console.log('No diff for ' + filename + '\n')
+              } else {
+                console.log(diff.stdout + '\n')
+              }
+              
               return {
-                file: file.replaceAll(regexRunnerPath,''),
+                file: filename,
                 diff: diff.stdout || ''
               }
             })