@primer/primitives 10.3.3 → 10.3.4

package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5

@@ -4,120 +4,6 @@
  * @description All overwrites for functional color tokens for dark high contrast color mode are in this file
  */
 {
-  fgColor: {
-    default: {
-      $value: '{base.color.neutral.13}',
-      $type: 'color',
-    },
-    muted: {
-      $value: '{base.color.neutral.10}',
-      $type: 'color',
-    },
-    disabled: {
-      $value: '{base.color.neutral.8}',
-      $type: 'color',
-    },
-    neutral: {
-      $value: '{base.color.neutral.11}',
-      $type: 'color',
-    },
-    accent: {
-      $value: '#74B9FF',
-      $type: 'color',
-    },
-    success: {
-      $value: '#2BD853',
-      $type: 'color',
-    },
-    danger: {
-      $value: '{base.color.red.3}',
-      $type: 'color',
-    },
-    severe: {
-      $value: '{base.color.orange.3}',
-      $type: 'color',
-    },
-    done: {
-      $value: '#D3ABFF',
-      $type: 'color',
-    },
-    sponsors: {
-      $value: '#FF90C8',
-      $type: 'color',
-    },
-  },
-  bgColor: {
-    default: {
-      $value: '{base.color.neutral.0}',
-      $type: 'color',
-    },
-    muted: {
-      $value: '{base.color.neutral.2}',
-      $type: 'color',
-    },
-    disabled: {
-      $value: '{base.color.neutral.4}',
-      $type: 'color',
-    },
-    disabled: {
-      $value: '{base.color.neutral.4}',
-      $type: 'color',
-    },
-    neutral: {
-      emphasis: {
-        $value: '{base.color.neutral.7}',
-        $type: 'color',
-      },
-      muted: {
-        $value: '{base.color.neutral.3}',
-        $type: 'color',
-        alpha: 1,
-      },
-    },
-    accent: {
-      emphasis: {
-        $value: '{base.color.blue.9}',
-        $type: 'color',
-      },
-    },
-    success: {
-      emphasis: {
-        $value: '{base.color.green.9}',
-        $type: 'color',
-      },
-    },
-    danger: {
-      emphasis: {
-        $value: '{base.color.red.9}',
-        $type: 'color',
-      },
-    },
-    severe: {
-      emphasis: {
-        $value: '{base.color.orange.9}',
-        $type: 'color',
-      },
-    },
-    attention: {
-      emphasis: {
-        $value: '{base.color.yellow.9}',
-        $type: 'color',
-      },
-    },
-    done: {
-      emphasis: {
-        $value: '{base.color.purple.9}',
-        $type: 'color',
-      },
-    },
-    sponsors: {
-      emphasis: {
-        $value: '{base.color.pink.9}',
-        $type: 'color',
-      },
-    },
-  },
-  // patterns
   counter: {
     borderColor: {
       $value: '{borderColor.default}',

package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5

@@ -4,69 +4,6 @@
  * @description All overwrites for functional color tokens for dark protanopia and deuteranopia color mode are in this file
  */
 {
-  fgColor: {
-    success: {
-      $value: '{base.color.blue.3}',
-      $type: 'color',
-    },
-    danger: {
-      $value: '{base.color.orange.3}',
-      $type: 'color',
-    },
-    open: {
-      $value: '{base.color.blue.3}',
-      $type: 'color',
-    },
-    closed: {
-      $value: '{fgColor.muted}',
-      $type: 'color',
-    },
-  },
-  bgColor: {
-    success: {
-      muted: {
-        $value: '{base.color.blue.4}',
-        $type: 'color',
-        alpha: 0.2,
-      },
-      emphasis: {
-        $value: '{base.color.blue.5}',
-        $type: 'color',
-      },
-    },
-    open: {
-      muted: {
-        $value: '{bgColor.success.muted}',
-        $type: 'color',
-      },
-      emphasis: {
-        $value: '{bgColor.success.emphasis}',
-        $type: 'color',
-      },
-    },
-    danger: {
-      muted: {
-        $value: '{base.color.orange.4}',
-        $type: 'color',
-        alpha: 0.1,
-      },
-      emphasis: {
-        $value: '{base.color.orange.5}',
-        $type: 'color',
-      },
-    },
-    closed: {
-      muted: {
-        $value: '{bgColor.neutral.muted}',
-        $type: 'color',
-        alpha: 0.1,
-      },
-      emphasis: {
-        $value: '{bgColor.neutral.emphasis}',
-        $type: 'color',
-      },
-    },
-  },
   control: {
     danger: {
       fgColor: {

package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5

@@ -4,77 +4,6 @@
  * @description All overwrites for functional color tokens for this theme are in this file
  */
 {
-  fgColor: {
-    success: {
-      $value: '{base.color.blue.3}',
-      $type: 'color',
-    },
-    severe: {
-      $value: '{base.color.red.4}',
-      $type: 'color',
-    },
-    open: {
-      $value: '{base.color.red.4}',
-      $type: 'color',
-    },
-    closed: {
-      $value: '{fgColor.muted}',
-      $type: 'color',
-    },
-  },
-  bgColor: {
-    success: {
-      muted: {
-        $value: '{base.color.blue.4}',
-        $type: 'color',
-        alpha: 0.15,
-      },
-      emphasis: {
-        $value: '{base.color.blue.5}',
-        $type: 'color',
-      },
-    },
-    severe: {
-      muted: {
-        $value: '{base.color.red.4}',
-        $type: 'color',
-        alpha: 0.1,
-      },
-      emphasis: {
-        $value: '{base.color.red.5}',
-        $type: 'color',
-      },
-    },
-    open: {
-      muted: {
-        $value: '{base.color.red.4}',
-        $type: 'color',
-        alpha: 0.1,
-      },
-      emphasis: {
-        $value: '{base.color.red.5}',
-        $type: 'color',
-      },
-    },
-    closed: {
-      muted: {
-        $value: '{bgColor.neutral.muted}',
-        $type: 'color',
-        alpha: 0.1,
-      },
-      emphasis: {
-        $value: '{bgColor.neutral.emphasis}',
-        $type: 'color',
-      },
-    },
-    sponsors: {
-      muted: {
-        $value: '#db61a2',
-        $type: 'color',
-        alpha: 0.1,
-      },
-    },
-  },
   codeMirror: {
     syntax: {
       fgColor: {

package/src/tokens/functional/color/fgColor.json5

@@ -0,0 +1,342 @@
+{
+  fgColor: {
+    default: {
+      $value: '{base.color.neutral.13}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'semantic',
+          scopes: ['fgColor'],
+          codeSyntax: {
+            web: 'var(--fgColor-default) /* utility class: .color-fg-default */',
+          },
+        },
+        'org.primer.overrides': {
+          dark: '{base.color.neutral.12}',
+          "dark-high-contrast": '{base.color.neutral.13}',
+          "dark-dimmed": '{base.color.neutral.11}',
+        },
+      },
+    },
+    muted: {
+      $value: '{base.color.neutral.9}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'semantic',
+          scopes: ['fgColor'],
+          codeSyntax: {
+            web: 'var(--fgColor-muted) /* utility class: .color-fg-muted */',
+          },
+        },
+        'org.primer.overrides': {
+          'light-high-contrast': '{base.color.neutral.10}',
+          'dark-high-contrast': '{base.color.neutral.10}',
+        },
+      },
+    },
+    onEmphasis: {
+      $value: '{base.color.neutral.0}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'semantic',
+          scopes: ['fgColor'],
+          codeSyntax: {
+            web: 'var(--fgColor-onEmphasis) /* utility class: .color-fg-on-emphasis */',
+          },
+        },
+        'org.primer.overrides': {
+          dark: '{base.color.neutral.13}',
+          "dark-dimmed": '{base.color.neutral.12}',
+        },
+      },
+    },
+    onInverse: {
+      $value: '{base.color.neutral.0}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'semantic',
+          scopes: ['fgColor'],
+        },
+      },
+    },
+    white: {
+      $value: '{base.color.neutral.0}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'semantic',
+          scopes: ['fgColor'],
+        },
+        'org.primer.overrides': {
+          dark: '{base.color.neutral.13}',
+        },
+      },
+    },
+    black: {
+      $value: '{base.color.neutral.13}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'semantic',
+          scopes: ['fgColor'],
+        },
+        'org.primer.overrides': {
+          dark: '{base.color.neutral.0}',
+        },
+      },
+    },
+    disabled: {
+      $value: '{base.color.neutral.8}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'semantic',
+          scopes: ['fgColor'],
+        },
+        'org.primer.overrides': {
+          dark: {
+            $value: '{base.color.neutral.8}',
+            alpha: 0.6,
+          },
+          "dark-dimmed": '{base.color.neutral.8}',
+          'light-high-contrast': '{base.color.neutral.9}',
+          'dark-high-contrast': '{base.color.neutral.8}',
+        },
+      },
+    },
+    link: {
+      $value: '{fgColor.accent}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'semantic',
+          scopes: ['fgColor'],
+          codeSyntax: {
+            web: 'var(--fgColor-link) /* utility class: .color-fg-accent */',
+          },
+        },
+      },
+    },
+    neutral: {
+      $value: '{base.color.neutral.9}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'semantic',
+          scopes: ['fgColor'],
+        },
+        'org.primer.overrides': {
+          'light-high-contrast': '{base.color.neutral.11}',
+          'dark-high-contrast': '{base.color.neutral.11}',
+        },
+      },
+    },
+    accent: {
+      $value: '{base.color.blue.5}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'semantic',
+          scopes: ['fgColor'],
+          codeSyntax: {
+            web: 'var(--fgColor-accent) /* utility class: .color-fg-accent */',
+          },
+        },
+        'org.primer.overrides': {
+          dark: '#4493F8',
+          "dark-dimmed": '#478be6',
+          'dark-high-contrast': '#74B9FF',
+          'light-high-contrast': '{base.color.blue.6}',
+        },
+      },
+    },
+    success: {
+      $value: '{base.color.green.5}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'semantic',
+          scopes: ['fgColor'],
+          codeSyntax: {
+            web: 'var(--fgColor-success) /* utility class: .color-fg-success */',
+          },
+        },
+        'org.primer.overrides': {
+          dark: '{base.color.green.3}',
+          'dark-high-contrast': '#2BD853',
+          'light-high-contrast': '{base.color.green.6}',
+          "dark-protanopia-deuteranopia": '{base.color.blue.3}',
+          'light-protanopia-deuteranopia': '{base.color.blue.5}',
+          "dark-tritanopia": '{base.color.blue.3}',
+          "light-tritanopia": '{base.color.blue.5}',
+        },
+      },
+    },
+    open: {
+      $value: '{fgColor.success}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'semantic',
+          scopes: ['fgColor'],
+          codeSyntax: {
+            web: 'var(--fgColor-open) /* utility class: .color-fg-open */',
+          },
+        },
+        'org.primer.overrides': {
+          "dark-protanopia-deuteranopia": '{base.color.orange.4}',
+          'light-protanopia-deuteranopia': '{base.color.orange.5}',
+          "dark-tritanopia": '{base.color.red.4}',
+          "light-tritanopia": '{base.color.red.5}',
+        },
+      },
+    },
+    attention: {
+      $value: '{base.color.yellow.5}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'semantic',
+          scopes: ['fgColor'],
+          codeSyntax: {
+            web: 'var(--fgColor-attention) /* utility class: .color-fg-attention */',
+          },
+        },
+        'org.primer.overrides': {
+          dark: '{base.color.yellow.3}',
+          'light-high-contrast': '{base.color.yellow.6}',
+        },
+      },
+    },
+    severe: {
+      $value: '{base.color.orange.5}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'semantic',
+          scopes: ['fgColor'],
+          codeSyntax: {
+            web: 'var(--fgColor-severe) /* utility class: .color-fg-severe */',
+          },
+        },
+        'org.primer.overrides': {
+          dark: '{base.color.orange.4}',
+          'dark-high-contrast': '{base.color.orange.3}',
+          'light-high-contrast': '{base.color.orange.6}',
+          "dark-tritanopia": '{base.color.red.4}',
+          "light-tritanopia": '{base.color.red.5}',
+        },
+      },
+    },
+    danger: {
+      $value: '#d1242f',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'semantic',
+          scopes: ['fgColor'],
+          codeSyntax: {
+            web: 'var(--fgColor-danger) /* utility class: .color-fg-danger */',
+          },
+        },
+        'org.primer.overrides': {
+          dark: '{base.color.red.4}',
+          "dark-protanopia-deuteranopia": '{base.color.orange.3}',
+          'light-protanopia-deuteranopia': '{base.color.orange.5}',
+          'dark-high-contrast': '{base.color.red.3}',
+          'light-high-contrast': '{base.color.red.6}',
+        },
+      },
+    },
+    closed: {
+      $value: '{fgColor.danger}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'semantic',
+          scopes: ['fgColor'],
+          codeSyntax: {
+            web: 'var(--fgColor-closed) /* utility class: .color-fg-closed */',
+          },
+        },
+        'org.primer.overrides': {
+          "dark-protanopia-deuteranopia": '{fgColor.muted}',
+          'light-protanopia-deuteranopia': '{fgColor.muted}',
+          "dark-tritanopia": '{fgColor.muted}',
+          "light-tritanopia": '{fgColor.muted}',
+        },
+      },
+    },
+    done: {
+      $value: '{base.color.purple.5}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'semantic',
+          scopes: ['fgColor'],
+          codeSyntax: {
+            web: 'var(--fgColor-done) /* utility class: .color-fg-done */',
+          },
+        },
+        'org.primer.overrides': {
+          dark: '{base.color.purple.4}',
+          'dark-high-contrast': '#D3ABFF',
+          'light-high-contrast': '{base.color.purple.6}',
+        },
+      },
+    },
+    upsell: {
+      $value: '{fgColor.done}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'semantic',
+          scopes: ['fgColor'],
+          codeSyntax: {
+            web: 'var(--fgColor-upsell)',
+          },
+        },
+      },
+    },
+    sponsors: {
+      $value: '{base.color.pink.5}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'semantic',
+          scopes: ['fgColor'],
+          codeSyntax: {
+            web: 'var(--fgColor-sponsors) /* utility class: .color-fg-sponsors */',
+          },
+        },
+        'org.primer.overrides': {
+          dark: '{base.color.pink.4}',
+          'dark-high-contrast': '#FF90C8',
+          'light-high-contrast': '{base.color.pink.6}',
+        },
+      },
+    },
+  },
+}

package/src/tokens/functional/color/light/overrides/light.high-contrast.json5

@@ -4,90 +4,6 @@
  * @description All overwrites for functional color tokens for light high contrast color mode are in this file
  */
 {
-  fgColor: {
-    muted: {
-      $value: '{base.color.neutral.10}',
-      $type: 'color',
-    },
-    disabled: {
-      $value: '{base.color.neutral.9}',
-      $type: 'color',
-    },
-    neutral: {
-      $value: '{base.color.neutral.11}',
-      $type: 'color',
-    },
-    success: {
-      $value: '{base.color.green.6}',
-      $type: 'color',
-    },
-    danger: {
-      $value: '{base.color.red.6}',
-      $type: 'color',
-    },
-    attention: {
-      $value: '{base.color.yellow.6}',
-      $type: 'color',
-    },
-    severe: {
-      $value: '{base.color.orange.6}',
-      $type: 'color',
-    },
-    done: {
-      $value: '{base.color.purple.6}',
-      $type: 'color',
-    },
-    accent: {
-      $value: '{base.color.blue.6}',
-      $type: 'color',
-    },
-    accent: {
-      $value: '{base.color.blue.6}',
-      $type: 'color',
-    },
-    sponsors: {
-      $value: '{base.color.pink.6}',
-      $type: 'color',
-    },
-  },
-  bgColor: {
-    muted: {
-      $value: '{base.color.neutral.3}',
-      $type: 'color',
-    },
-    inset: {
-      $value: '{base.color.neutral.2}',
-      $type: 'color',
-    },
-    neutral: {
-      emphasis: {
-        $value: '{base.color.neutral.10}',
-        $type: 'color',
-      },
-      muted: {
-        $value: '{base.color.neutral.4}',
-        $type: 'color',
-        alpha: 1,
-      },
-    },
-    disabled: {
-      $value: '{base.color.neutral.4}',
-      $type: 'color',
-    },
-    success: {
-      emphasis: {
-        $value: '{base.color.green.5}',
-        $type: 'color',
-      },
-    },
-    attention: {
-      emphasis: {
-        $value: '{base.color.yellow.5}',
-        $type: 'color',
-      },
-    },
-  },
-  // patterns
   counter: {
     borderColor: {
       $value: '{borderColor.default}',