@primer/primitives 10.5.0 → 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;
@@ -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;
@@ -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;
@@ -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;
@@ -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

@@ -3686,7 +3686,7 @@
           "$type": "color"
         },
         "dark-high-contrast": {
-          "$value": "#2f3742",
+          "$value": "#9198a1",
           "alpha": 1,
           "filePath": "src/tokens/functional/color/borderColor.json5",
           "isSource": true,
@@ -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,
@@ -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"
           }
         }
       }
@@ -12689,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"
         }
       }
     },
@@ -12711,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"
           }
         }
       }

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

@@ -3680,7 +3680,7 @@
           "$type": "color"
         },
         "dark-high-contrast": {
-          "$value": "#2f3742",
+          "$value": "#9198a1",
           "alpha": 1,
           "filePath": "src/tokens/functional/color/borderColor.json5",
           "isSource": true,
@@ -3709,7 +3709,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,
@@ -4172,6 +4172,13 @@
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
+        },
+        "light-high-contrast": {
+          "$value": "#922323",
+          "alpha": 1,
+          "filePath": "src/tokens/component/button.json5",
+          "isSource": true,
+          "$type": "color"
         }
       }
     },
@@ -4199,6 +4206,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"
           }
         }
       }
@@ -12685,6 +12699,12 @@
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
+        },
+        "dark-high-contrast": {
+          "$value": "#f0f6fc",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
         }
       }
     },
@@ -12707,6 +12727,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"
           }
         }
       }

package/dist/docs/functional/themes/dark-high-contrast.json

@@ -3678,7 +3678,7 @@
           "$type": "color"
         },
         "dark-high-contrast": {
-          "$value": "#2f3742",
+          "$value": "#9198a1",
           "alpha": 1,
           "filePath": "src/tokens/functional/color/borderColor.json5",
           "isSource": true,
@@ -3690,7 +3690,7 @@
     "filePath": "src/tokens/functional/color/borderColor.json5",
     "isSource": true,
     "original": {
-      "$value": "{base.color.neutral.6}",
+      "$value": "{base.color.neutral.9}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -3707,7 +3707,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,
@@ -3721,7 +3721,7 @@
     "attributes": {},
     "path": ["borderColor", "translucent"],
     "key": "{borderColor.translucent}",
-    "value": "#2f3742",
+    "value": "#9198a1",
     "type": "color"
   },
   "borderColor-transparent": {
@@ -4172,6 +4172,13 @@
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
+        },
+        "light-high-contrast": {
+          "$value": "#e82a2f",
+          "alpha": 1,
+          "filePath": "src/tokens/component/button.json5",
+          "isSource": true,
+          "$type": "color"
         }
       }
     },
@@ -4200,6 +4207,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"
           }
         }
       },
@@ -12697,13 +12711,19 @@
           "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"
         }
       }
     },
     "filePath": "src/tokens/functional/color/control.json5",
     "isSource": true,
     "original": {
-      "$value": "{base.color.red.3}",
+      "$value": "{fgColor.onEmphasis}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -12719,6 +12739,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"
           }
         }
       }
@@ -12727,7 +12753,7 @@
     "attributes": {},
     "path": ["control", "danger", "fgColor", "hover"],
     "key": "{control.danger.fgColor.hover}",
-    "value": "#ff9492",
+    "value": "#ffffff",
     "type": "color"
   },
   "control-danger-fgColor-rest": {

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

@@ -3686,7 +3686,7 @@
           "$type": "color"
         },
         "dark-high-contrast": {
-          "$value": "#2f3742",
+          "$value": "#9198a1",
           "alpha": 1,
           "filePath": "src/tokens/functional/color/borderColor.json5",
           "isSource": true,
@@ -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,
@@ -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"
           }
         }
       }
@@ -12689,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"
         }
       }
     },
@@ -12711,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"
           }
         }
       }

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

@@ -3678,7 +3678,7 @@
           "$type": "color"
         },
         "dark-high-contrast": {
-          "$value": "#2f3742",
+          "$value": "#9198a1",
           "alpha": 1,
           "filePath": "src/tokens/functional/color/borderColor.json5",
           "isSource": true,
@@ -3707,7 +3707,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,
@@ -4170,6 +4170,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"
         }
       }
     },
@@ -4197,6 +4204,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"
           }
         }
       }
@@ -12681,6 +12695,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"
         }
       }
     },
@@ -12703,6 +12723,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"
           }
         }
       }

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

@@ -3666,7 +3666,7 @@
           "$type": "color"
         },
         "dark-high-contrast": {
-          "$value": "#d1d9e0",
+          "$value": "#59636e",
           "alpha": 1,
           "filePath": "src/tokens/functional/color/borderColor.json5",
           "isSource": true,
@@ -3695,7 +3695,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,
@@ -4158,6 +4158,13 @@
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
+        },
+        "light-high-contrast": {
+          "$value": "#82071e",
+          "alpha": 1,
+          "filePath": "src/tokens/component/button.json5",
+          "isSource": true,
+          "$type": "color"
         }
       }
     },
@@ -4185,6 +4192,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"
           }
         }
       }
@@ -12671,6 +12685,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"
         }
       }
     },
@@ -12693,6 +12713,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"
           }
         }
       }