@primer/primitives 10.5.0-rc.6c9d75b1 → 10.5.1-rc.aa2b8f62

package/README.md

@@ -60,7 +60,7 @@ To make working with tokens easier, we added some additional functionality on to
 We have two main color modes: `light` and `dark`. Additionally we have specific accessibility modes based on those, such as `light high contrast`.
 
 We added a way to create a mode by only including the changes from the main mode. We call this `overrides`.
-`Overrides` are cerated in `src/tokens/functional/color/[light|dark]/overrides/` and have to be added to [themes.config.ts](./scripts/themes.config.ts) to work.
+`Overrides` are created in `src/tokens/functional/color/[light|dark]/overrides/` and have to be added to [themes.config.ts](./scripts/themes.config.ts) to work.
 In the individual files, e.g. `light.high-contrast.json5` you can now add tokens in the same structure as in any main file, e.g. `primitives-light.json5` to replace them.
 
 ### Transforming Colors with Alpha and Mix
@@ -88,7 +88,7 @@ For our Figma export we use the following meta data:
 
 - `collection` the collection that the token is added to within Figma
 - `mode` the mode that the token is added to within the collection in Figma
-- `scopes` the scopes that are assigned to the token in Figma, the actual Figma compatible `scopes` are retreive from an object in the [figmaAttributes transformer](./src/transformers/figmaAttributes.ts)
+- `scopes` the scopes that are assigned to the token in Figma, the actual Figma compatible `scopes` are retrieved from an object in the [figmaAttributes transformer](./src/transformers/figmaAttributes.ts)
 
 Code example
 
@@ -109,8 +109,8 @@ Code example
 #### Token names and @-hack
 
 Token names have to be in camelCase or kebab-case and may only include letters, numbers and `-`. This is enforced by the token validation (`npm run lint:tokens`).
-The only acception is the `@`-hack. This is used when you want to have a default value and sub-values, e.g. `bgColor.accent` and `bgColor.accent.muted`.
-In this case you can create the follwing structure. The `@` will be removed from the name and act as the default value.
+The only exception is the `@`-hack. This is used when you want to have a default value and sub-values, e.g. `bgColor.accent` and `bgColor.accent.muted`.
+In this case you can create the following structure. The `@` will be removed from the name and act as the default value.
 
 ```json5
 {

package/dist/css/functional/themes/dark-high-contrast.css

@@ -55,7 +55,7 @@
   --borderColor-sponsors-muted: #f87cbd;
   --borderColor-success-emphasis: #09b43a;
   --borderColor-success-muted: #0ac740;
-  --borderColor-translucent: #2f3742;
+  --borderColor-translucent: #9198a1;
   --borderColor-transparent: #00000000;
   --button-danger-borderColor-active: #ffb1af;
   --button-danger-borderColor-hover: #ffb1af;
@@ -140,16 +140,16 @@
   --color-prettylights-syntax-string-regexp: #72f088;
   --color-prettylights-syntax-sublimelinter-gutter-mark: #3d444d;
   --color-prettylights-syntax-variable: #ffb757;
-  --contribution-default-bgColor-0: #212830;
+  --contribution-default-bgColor-0: #151b23;
   --contribution-default-bgColor-1: #007728;
   --contribution-default-bgColor-2: #02a232;
   --contribution-default-bgColor-3: #0ac740;
   --contribution-default-bgColor-4: #4ae168;
-  --contribution-default-borderColor-0: #ffffff;
-  --contribution-default-borderColor-1: #ffffff;
-  --contribution-default-borderColor-2: #ffffff;
-  --contribution-default-borderColor-3: #ffffff;
-  --contribution-default-borderColor-4: #ffffff;
+  --contribution-default-borderColor-0: #ffffff0d;
+  --contribution-default-borderColor-1: #ffffff0d;
+  --contribution-default-borderColor-2: #ffffff0d;
+  --contribution-default-borderColor-3: #ffffff0d;
+  --contribution-default-borderColor-4: #ffffff0d;
   --contribution-halloween-bgColor-1: #fac68f;
   --contribution-halloween-bgColor-2: #c46212;
   --contribution-halloween-bgColor-3: #984b10;
@@ -165,7 +165,6 @@
   --control-checked-borderColor-active: #91cbff;
   --control-checked-borderColor-hover: #91cbff;
   --control-checked-borderColor-rest: #91cbff;
-  --control-danger-fgColor-hover: #ff9492;
   --control-fgColor-placeholder: #b7bdc8;
   --control-transparent-bgColor-active: #3d444d;
   --control-transparent-bgColor-hover: #2f3742;
@@ -633,6 +632,7 @@
   --control-borderColor-emphasis: var(--borderColor-emphasis);
   --control-checked-borderColor-disabled: var(--control-checked-bgColor-disabled);
   --control-checked-fgColor-rest: var(--fgColor-onEmphasis);
+  --control-danger-fgColor-hover: var(--fgColor-onEmphasis);
   --control-fgColor-rest: var(--fgColor-default);
   --controlKnob-bgColor-disabled: var(--control-bgColor-disabled);
   --controlKnob-bgColor-rest: var(--bgColor-inset);
@@ -744,7 +744,7 @@
     --borderColor-sponsors-muted: #f87cbd;
     --borderColor-success-emphasis: #09b43a;
     --borderColor-success-muted: #0ac740;
-    --borderColor-translucent: #2f3742;
+    --borderColor-translucent: #9198a1;
     --borderColor-transparent: #00000000;
     --button-danger-borderColor-active: #ffb1af;
     --button-danger-borderColor-hover: #ffb1af;
@@ -829,16 +829,16 @@
     --color-prettylights-syntax-string-regexp: #72f088;
     --color-prettylights-syntax-sublimelinter-gutter-mark: #3d444d;
     --color-prettylights-syntax-variable: #ffb757;
-    --contribution-default-bgColor-0: #212830;
+    --contribution-default-bgColor-0: #151b23;
     --contribution-default-bgColor-1: #007728;
     --contribution-default-bgColor-2: #02a232;
     --contribution-default-bgColor-3: #0ac740;
     --contribution-default-bgColor-4: #4ae168;
-    --contribution-default-borderColor-0: #ffffff;
-    --contribution-default-borderColor-1: #ffffff;
-    --contribution-default-borderColor-2: #ffffff;
-    --contribution-default-borderColor-3: #ffffff;
-    --contribution-default-borderColor-4: #ffffff;
+    --contribution-default-borderColor-0: #ffffff0d;
+    --contribution-default-borderColor-1: #ffffff0d;
+    --contribution-default-borderColor-2: #ffffff0d;
+    --contribution-default-borderColor-3: #ffffff0d;
+    --contribution-default-borderColor-4: #ffffff0d;
     --contribution-halloween-bgColor-1: #fac68f;
     --contribution-halloween-bgColor-2: #c46212;
     --contribution-halloween-bgColor-3: #984b10;
@@ -854,7 +854,6 @@
     --control-checked-borderColor-active: #91cbff;
     --control-checked-borderColor-hover: #91cbff;
     --control-checked-borderColor-rest: #91cbff;
-    --control-danger-fgColor-hover: #ff9492;
     --control-fgColor-placeholder: #b7bdc8;
     --control-transparent-bgColor-active: #3d444d;
     --control-transparent-bgColor-hover: #2f3742;
@@ -1322,6 +1321,7 @@
     --control-borderColor-emphasis: var(--borderColor-emphasis);
     --control-checked-borderColor-disabled: var(--control-checked-bgColor-disabled);
     --control-checked-fgColor-rest: var(--fgColor-onEmphasis);
+    --control-danger-fgColor-hover: var(--fgColor-onEmphasis);
     --control-fgColor-rest: var(--fgColor-default);
     --controlKnob-bgColor-disabled: var(--control-bgColor-disabled);
     --controlKnob-bgColor-rest: var(--bgColor-inset);

package/dist/css/functional/themes/light-high-contrast.css

@@ -61,6 +61,7 @@
   --borderColor-translucent: #59636e;
   --borderColor-transparent: #ffffff00;
   --button-danger-bgColor-hover: #86061d;
+  --button-danger-borderColor-hover: #6e011a;
   --button-danger-shadow-selected: inset 0px 1px 0px 0px #43001133;
   --button-inactive-fgColor: #454c54;
   --button-invisible-bgColor-disabled: #ffffff00;
@@ -125,16 +126,16 @@
   --color-prettylights-syntax-string-regexp: #024c1a;
   --color-prettylights-syntax-sublimelinter-gutter-mark: #818b98;
   --color-prettylights-syntax-variable: #702c00;
-  --contribution-default-bgColor-0: #e6eaef;
+  --contribution-default-bgColor-0: #eff2f5;
   --contribution-default-bgColor-1: #82e596;
   --contribution-default-bgColor-2: #26a148;
   --contribution-default-bgColor-3: #117f32;
   --contribution-default-bgColor-4: #024c1a;
-  --contribution-default-borderColor-0: #010409;
-  --contribution-default-borderColor-1: #010409;
-  --contribution-default-borderColor-2: #010409;
-  --contribution-default-borderColor-3: #010409;
-  --contribution-default-borderColor-4: #010409;
+  --contribution-default-borderColor-0: #0104090d;
+  --contribution-default-borderColor-1: #0104090d;
+  --contribution-default-borderColor-2: #0104090d;
+  --contribution-default-borderColor-3: #0104090d;
+  --contribution-default-borderColor-4: #0104090d;
   --contribution-halloween-bgColor-1: #f0db3d;
   --contribution-halloween-bgColor-2: #ffd642;
   --contribution-halloween-bgColor-3: #f68c41;
@@ -470,7 +471,7 @@
   --borderColor-upsell-emphasis: var(--borderColor-done-emphasis);
   --borderColor-upsell-muted: var(--borderColor-done-muted);
   --button-danger-bgColor-rest: var(--control-bgColor-rest);
-  --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
+  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
   --button-danger-fgColor-active: #ffffff;
   --button-danger-fgColor-disabled: #86061d80;
   --button-danger-fgColor-hover: #ffffff;
@@ -617,7 +618,6 @@
   --border-upsell-muted: 0.0625rem solid #a371f7;
   --borderColor-neutral-muted: var(--borderColor-muted);
   --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
-  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
   --button-danger-borderColor-rest: var(--control-borderColor-rest);
   --button-default-bgColor-disabled: var(--control-bgColor-disabled);
   --button-default-borderColor-active: var(--control-borderColor-rest);
@@ -750,6 +750,7 @@
     --borderColor-translucent: #59636e;
     --borderColor-transparent: #ffffff00;
     --button-danger-bgColor-hover: #86061d;
+    --button-danger-borderColor-hover: #6e011a;
     --button-danger-shadow-selected: inset 0px 1px 0px 0px #43001133;
     --button-inactive-fgColor: #454c54;
     --button-invisible-bgColor-disabled: #ffffff00;
@@ -814,16 +815,16 @@
     --color-prettylights-syntax-string-regexp: #024c1a;
     --color-prettylights-syntax-sublimelinter-gutter-mark: #818b98;
     --color-prettylights-syntax-variable: #702c00;
-    --contribution-default-bgColor-0: #e6eaef;
+    --contribution-default-bgColor-0: #eff2f5;
     --contribution-default-bgColor-1: #82e596;
     --contribution-default-bgColor-2: #26a148;
     --contribution-default-bgColor-3: #117f32;
     --contribution-default-bgColor-4: #024c1a;
-    --contribution-default-borderColor-0: #010409;
-    --contribution-default-borderColor-1: #010409;
-    --contribution-default-borderColor-2: #010409;
-    --contribution-default-borderColor-3: #010409;
-    --contribution-default-borderColor-4: #010409;
+    --contribution-default-borderColor-0: #0104090d;
+    --contribution-default-borderColor-1: #0104090d;
+    --contribution-default-borderColor-2: #0104090d;
+    --contribution-default-borderColor-3: #0104090d;
+    --contribution-default-borderColor-4: #0104090d;
     --contribution-halloween-bgColor-1: #f0db3d;
     --contribution-halloween-bgColor-2: #ffd642;
     --contribution-halloween-bgColor-3: #f68c41;
@@ -1159,7 +1160,7 @@
     --borderColor-upsell-emphasis: var(--borderColor-done-emphasis);
     --borderColor-upsell-muted: var(--borderColor-done-muted);
     --button-danger-bgColor-rest: var(--control-bgColor-rest);
-    --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
+    --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
     --button-danger-fgColor-active: #ffffff;
     --button-danger-fgColor-disabled: #86061d80;
     --button-danger-fgColor-hover: #ffffff;
@@ -1306,7 +1307,6 @@
     --border-upsell-muted: 0.0625rem solid #a371f7;
     --borderColor-neutral-muted: var(--borderColor-muted);
     --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
-    --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
     --button-danger-borderColor-rest: var(--control-borderColor-rest);
     --button-default-bgColor-disabled: var(--control-bgColor-disabled);
     --button-default-borderColor-active: var(--control-borderColor-rest);

package/dist/docs/functional/themes/dark-colorblind.json

@@ -2225,7 +2225,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */"
         }
@@ -2240,7 +2240,7 @@
         "org.primer.figma": {
           "collection": "mode",
           "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
           "codeSyntax": {
             "web": "var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */"
           }
@@ -2259,7 +2259,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-accent-muted) /* utility class: .color-border-accent */"
         }
@@ -2292,7 +2292,7 @@
         "org.primer.figma": {
           "collection": "mode",
           "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
           "codeSyntax": {
             "web": "var(--borderColor-accent-muted) /* utility class: .color-border-accent */"
           }
@@ -2739,7 +2739,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-default) /* utility class: .color-border-default */"
         }
@@ -2760,7 +2760,7 @@
         "org.primer.figma": {
           "collection": "mode",
           "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
           "codeSyntax": {
             "web": "var(--borderColor-default) /* utility class: .color-border-default */"
           }
@@ -2779,7 +2779,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
       },
       "org.primer.overrides": {
         "dark-dimmed": {
@@ -2808,7 +2808,7 @@
         "org.primer.figma": {
           "collection": "mode",
           "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
         },
         "org.primer.overrides": {
           "dark-dimmed": {
@@ -2945,7 +2945,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
       },
       "org.primer.overrides": {
         "light-high-contrast": "#3d444d",
@@ -2961,7 +2961,7 @@
         "org.primer.figma": {
           "collection": "mode",
           "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
         },
         "org.primer.overrides": {
           "light-high-contrast": "{borderColor.default}",
@@ -2981,7 +2981,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-muted) /* utility class: .color-border-muted */"
         }
@@ -3020,7 +3020,7 @@
         "org.primer.figma": {
           "collection": "mode",
           "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
           "codeSyntax": {
             "web": "var(--borderColor-muted) /* utility class: .color-border-muted */"
           }
@@ -3675,7 +3675,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
       },
       "org.primer.overrides": {
         "light-high-contrast": {
@@ -3686,7 +3686,7 @@
           "$type": "color"
         },
         "dark-high-contrast": {
-          "$value": "#2f3742",
+          "$value": "#9198a1",
           "alpha": 1,
           "filePath": "src/tokens/functional/color/borderColor.json5",
           "isSource": true,
@@ -3704,7 +3704,7 @@
         "org.primer.figma": {
           "collection": "mode",
           "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
         },
         "org.primer.overrides": {
           "light-high-contrast": {
@@ -3715,7 +3715,7 @@
             "$type": "color"
           },
           "dark-high-contrast": {
-            "$value": "{base.color.neutral.6}",
+            "$value": "{base.color.neutral.9}",
             "alpha": 1,
             "filePath": "src/tokens/functional/color/borderColor.json5",
             "isSource": true,
@@ -3737,7 +3737,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
       }
     },
     "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3749,7 +3749,7 @@
         "org.primer.figma": {
           "collection": "mode",
           "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
         }
       }
     },
@@ -4178,6 +4178,13 @@
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
+        },
+        "light-high-contrast": {
+          "$value": "#8e1519",
+          "alpha": 1,
+          "filePath": "src/tokens/component/button.json5",
+          "isSource": true,
+          "$type": "color"
         }
       }
     },
@@ -4205,6 +4212,13 @@
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
+          },
+          "light-high-contrast": {
+            "$value": "{base.color.red.7}",
+            "alpha": 1,
+            "filePath": "src/tokens/component/button.json5",
+            "isSource": true,
+            "$type": "color"
           }
         }
       }
@@ -10738,8 +10752,6 @@
         "scopes": ["bgColor"]
       },
       "org.primer.overrides": {
-        "dark-high-contrast": "#212830",
-        "light-high-contrast": "#212830",
         "dark-dimmed": "#2a313c"
       }
     },
@@ -10755,8 +10767,6 @@
           "scopes": ["bgColor"]
         },
         "org.primer.overrides": {
-          "dark-high-contrast": "{base.color.neutral.3}",
-          "light-high-contrast": "{base.color.neutral.3}",
           "dark-dimmed": "{base.color.neutral.5}"
         }
       }
@@ -10920,16 +10930,6 @@
           "filePath": "src/tokens/component/contribution.json5",
           "isSource": true,
           "$type": "color"
-        },
-        "dark-high-contrast": {
-          "$value": "#ffffff",
-          "alpha": 1,
-          "filePath": "src/tokens/component/contribution.json5",
-          "isSource": true,
-          "$type": "color"
-        },
-        "light-high-contrast": {
-          "alpha": 1
         }
       }
     },
@@ -10959,16 +10959,6 @@
             "filePath": "src/tokens/component/contribution.json5",
             "isSource": true,
             "$type": "color"
-          },
-          "dark-high-contrast": {
-            "$value": "{base.color.white}",
-            "alpha": 1,
-            "filePath": "src/tokens/component/contribution.json5",
-            "isSource": true,
-            "$type": "color"
-          },
-          "light-high-contrast": {
-            "alpha": 1
           }
         }
       }
@@ -11002,16 +10992,6 @@
           "filePath": "src/tokens/component/contribution.json5",
           "isSource": true,
           "$type": "color"
-        },
-        "dark-high-contrast": {
-          "$value": "#ffffff",
-          "alpha": 1,
-          "filePath": "src/tokens/component/contribution.json5",
-          "isSource": true,
-          "$type": "color"
-        },
-        "light-high-contrast": {
-          "alpha": 1
         }
       }
     },
@@ -11041,16 +11021,6 @@
             "filePath": "src/tokens/component/contribution.json5",
             "isSource": true,
             "$type": "color"
-          },
-          "dark-high-contrast": {
-            "$value": "{base.color.white}",
-            "alpha": 1,
-            "filePath": "src/tokens/component/contribution.json5",
-            "isSource": true,
-            "$type": "color"
-          },
-          "light-high-contrast": {
-            "alpha": 1
           }
         }
       }
@@ -11084,16 +11054,6 @@
           "filePath": "src/tokens/component/contribution.json5",
           "isSource": true,
           "$type": "color"
-        },
-        "dark-high-contrast": {
-          "$value": "#ffffff",
-          "alpha": 1,
-          "filePath": "src/tokens/component/contribution.json5",
-          "isSource": true,
-          "$type": "color"
-        },
-        "light-high-contrast": {
-          "alpha": 1
         }
       }
     },
@@ -11123,16 +11083,6 @@
             "filePath": "src/tokens/component/contribution.json5",
             "isSource": true,
             "$type": "color"
-          },
-          "dark-high-contrast": {
-            "$value": "{base.color.white}",
-            "alpha": 1,
-            "filePath": "src/tokens/component/contribution.json5",
-            "isSource": true,
-            "$type": "color"
-          },
-          "light-high-contrast": {
-            "alpha": 1
           }
         }
       }
@@ -11166,16 +11116,6 @@
           "filePath": "src/tokens/component/contribution.json5",
           "isSource": true,
           "$type": "color"
-        },
-        "dark-high-contrast": {
-          "$value": "#ffffff",
-          "alpha": 1,
-          "filePath": "src/tokens/component/contribution.json5",
-          "isSource": true,
-          "$type": "color"
-        },
-        "light-high-contrast": {
-          "alpha": 1
         }
       }
     },
@@ -11205,16 +11145,6 @@
             "filePath": "src/tokens/component/contribution.json5",
             "isSource": true,
             "$type": "color"
-          },
-          "dark-high-contrast": {
-            "$value": "{base.color.white}",
-            "alpha": 1,
-            "filePath": "src/tokens/component/contribution.json5",
-            "isSource": true,
-            "$type": "color"
-          },
-          "light-high-contrast": {
-            "alpha": 1
           }
         }
       }
@@ -11248,16 +11178,6 @@
           "filePath": "src/tokens/component/contribution.json5",
           "isSource": true,
           "$type": "color"
-        },
-        "dark-high-contrast": {
-          "$value": "#ffffff",
-          "alpha": 1,
-          "filePath": "src/tokens/component/contribution.json5",
-          "isSource": true,
-          "$type": "color"
-        },
-        "light-high-contrast": {
-          "alpha": 1
         }
       }
     },
@@ -11287,16 +11207,6 @@
             "filePath": "src/tokens/component/contribution.json5",
             "isSource": true,
             "$type": "color"
-          },
-          "dark-high-contrast": {
-            "$value": "{base.color.white}",
-            "alpha": 1,
-            "filePath": "src/tokens/component/contribution.json5",
-            "isSource": true,
-            "$type": "color"
-          },
-          "light-high-contrast": {
-            "alpha": 1
           }
         }
       }
@@ -12793,6 +12703,12 @@
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
+        },
+        "dark-high-contrast": {
+          "$value": "#ffffff",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
         }
       }
     },
@@ -12815,6 +12731,12 @@
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
+          },
+          "dark-high-contrast": {
+            "$value": "{fgColor.onEmphasis}",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
           }
         }
       }