npm - @primer/primitives - Versions diffs - 11.2.2-rc.fc1eacf3 → 11.3.0 - Mend

@primer/primitives 11.2.2-rc.fc1eacf3 → 11.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (67) hide show

package/dist/css/functional/themes/dark-colorblind-high-contrast.css +70 -0
package/dist/css/functional/themes/dark-colorblind.css +70 -0
package/dist/css/functional/themes/dark-dimmed-high-contrast.css +70 -0
package/dist/css/functional/themes/dark-dimmed.css +70 -0
package/dist/css/functional/themes/dark-high-contrast.css +70 -0
package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +70 -0
package/dist/css/functional/themes/dark-tritanopia.css +70 -0
package/dist/css/functional/themes/dark.css +70 -0
package/dist/css/functional/themes/light-colorblind-high-contrast.css +70 -0
package/dist/css/functional/themes/light-colorblind.css +70 -0
package/dist/css/functional/themes/light-high-contrast.css +70 -0
package/dist/css/functional/themes/light-tritanopia-high-contrast.css +70 -0
package/dist/css/functional/themes/light-tritanopia.css +70 -0
package/dist/css/functional/themes/light.css +70 -0
package/dist/docs/functional/themes/dark-colorblind-high-contrast.json +1373 -0
package/dist/docs/functional/themes/dark-colorblind.json +1377 -0
package/dist/docs/functional/themes/dark-dimmed-high-contrast.json +1373 -0
package/dist/docs/functional/themes/dark-dimmed.json +1377 -0
package/dist/docs/functional/themes/dark-high-contrast.json +1373 -0
package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json +1373 -0
package/dist/docs/functional/themes/dark-tritanopia.json +1377 -0
package/dist/docs/functional/themes/dark.json +1377 -0
package/dist/docs/functional/themes/light-colorblind-high-contrast.json +1373 -0
package/dist/docs/functional/themes/light-colorblind.json +1373 -0
package/dist/docs/functional/themes/light-high-contrast.json +1373 -0
package/dist/docs/functional/themes/light-tritanopia-high-contrast.json +1373 -0
package/dist/docs/functional/themes/light-tritanopia.json +1373 -0
package/dist/docs/functional/themes/light.json +1373 -0
package/dist/figma/themes/dark-colorblind.json +565 -0
package/dist/figma/themes/dark-dimmed.json +565 -0
package/dist/figma/themes/dark-high-contrast.json +563 -0
package/dist/figma/themes/dark-tritanopia.json +565 -0
package/dist/figma/themes/dark.json +565 -0
package/dist/figma/themes/light-colorblind.json +563 -0
package/dist/figma/themes/light-high-contrast.json +563 -0
package/dist/figma/themes/light-tritanopia.json +563 -0
package/dist/figma/themes/light.json +563 -0
package/dist/internalCss/dark-colorblind-high-contrast.css +70 -0
package/dist/internalCss/dark-colorblind.css +70 -0
package/dist/internalCss/dark-dimmed-high-contrast.css +70 -0
package/dist/internalCss/dark-dimmed.css +70 -0
package/dist/internalCss/dark-high-contrast.css +70 -0
package/dist/internalCss/dark-tritanopia-high-contrast.css +70 -0
package/dist/internalCss/dark-tritanopia.css +70 -0
package/dist/internalCss/dark.css +70 -0
package/dist/internalCss/light-colorblind-high-contrast.css +70 -0
package/dist/internalCss/light-colorblind.css +70 -0
package/dist/internalCss/light-high-contrast.css +70 -0
package/dist/internalCss/light-tritanopia-high-contrast.css +70 -0
package/dist/internalCss/light-tritanopia.css +70 -0
package/dist/internalCss/light.css +70 -0
package/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json +1373 -0
package/dist/styleLint/functional/themes/dark-colorblind.json +1377 -0
package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json +1373 -0
package/dist/styleLint/functional/themes/dark-dimmed.json +1377 -0
package/dist/styleLint/functional/themes/dark-high-contrast.json +1373 -0
package/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json +1373 -0
package/dist/styleLint/functional/themes/dark-tritanopia.json +1377 -0
package/dist/styleLint/functional/themes/dark.json +1377 -0
package/dist/styleLint/functional/themes/light-colorblind-high-contrast.json +1373 -0
package/dist/styleLint/functional/themes/light-colorblind.json +1373 -0
package/dist/styleLint/functional/themes/light-high-contrast.json +1373 -0
package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json +1373 -0
package/dist/styleLint/functional/themes/light-tritanopia.json +1373 -0
package/dist/styleLint/functional/themes/light.json +1373 -0
package/package.json +1 -1
package/src/tokens/component/button.json5 +522 -0

package/dist/internalCss/dark-tritanopia-high-contrast.css CHANGED Viewed

@@ -392,6 +392,12 @@
   --buttonCounter-outline-fgColor-disabled: #74b9ff80;
   --buttonCounter-outline-fgColor-hover: var(--base-color-blue-3);
   --buttonCounter-outline-fgColor-rest: var(--base-color-blue-4);
+  --buttonKeybindingHint-danger-bgColor-active: #01040966;
+  --buttonKeybindingHint-danger-bgColor-hover: #01040933;
+  --buttonKeybindingHint-danger-borderColor-hover: var(--base-color-white);
+  --buttonKeybindingHint-default-bgColor-rest: var(--base-color-neutral-4);
+  --buttonKeybindingHint-inactive-bgColor: var(--base-color-neutral-4);
+  --buttonKeybindingHint-primary-borderColor-rest: var(--base-color-white);
   --codeMirror-selection-bgColor: #5cacff66;
   --codeMirror-syntax-fgColor-comment: var(--base-color-neutral-8);
   --codeMirror-syntax-fgColor-constant: var(--base-color-blue-2);
@@ -1002,6 +1008,16 @@
   --buttonCounter-invisible-bgColor-rest: var(--bgColor-neutral-muted);
   --buttonCounter-outline-bgColor-disabled: #194fb10d;
   --buttonCounter-primary-bgColor-rest: #01040926;
+  --buttonKeybindingHint-danger-bgColor-rest: var(--buttonKeybindingHint-default-bgColor-rest);
+  --buttonKeybindingHint-danger-borderColor-active: var(--buttonKeybindingHint-danger-borderColor-hover);
+  --buttonKeybindingHint-default-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-rest);
+  --buttonKeybindingHint-default-fgColor-rest: var(--fgColor-muted);
+  --buttonKeybindingHint-inactive-fgColor: var(--button-inactive-fgColor);
+  --buttonKeybindingHint-invisible-bgColor-active: var(--control-transparent-bgColor-active);
+  --buttonKeybindingHint-invisible-bgColor-disabled: var(--button-invisible-bgColor-disabled);
+  --buttonKeybindingHint-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
+  --buttonKeybindingHint-invisible-bgColor-rest: var(--buttonKeybindingHint-default-bgColor-rest);
+  --buttonKeybindingHint-invisible-fgColor-rest: var(--fgColor-muted);
   --card-bgColor: var(--bgColor-muted);
   --codeMirror-activeline-bgColor: var(--bgColor-neutral-muted);
   --codeMirror-gutterMarker-fgColor-muted: var(--fgColor-muted);
@@ -1113,6 +1129,22 @@
   --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
   --button-primary-fgColor-rest: var(--fgColor-white);
   --button-primary-iconColor-rest: var(--fgColor-white);
+  --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
+  --buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
+  --buttonKeybindingHint-danger-fgColor-hover: var(--fgColor-onEmphasis);
+  --buttonKeybindingHint-danger-fgColor-rest: var(--buttonKeybindingHint-default-fgColor-rest);
+  --buttonKeybindingHint-default-borderColor-disabled: var(--control-borderColor-disabled);
+  --buttonKeybindingHint-default-borderColor-rest: var(--borderColor-muted);
+  --buttonKeybindingHint-default-fgColor-disabled: var(--control-fgColor-disabled);
+  --buttonKeybindingHint-inactive-borderColor: var(--borderColor-muted);
+  --buttonKeybindingHint-invisible-borderColor-disabled: var(--control-borderColor-disabled);
+  --buttonKeybindingHint-invisible-borderColor-rest: var(--borderColor-muted);
+  --buttonKeybindingHint-invisible-fgColor-disabled: var(--control-fgColor-disabled);
+  --buttonKeybindingHint-primary-bgColor-disabled: #0104091a;
+  --buttonKeybindingHint-primary-bgColor-rest: var(--buttonCounter-primary-bgColor-rest);
+  --buttonKeybindingHint-primary-borderColor-disabled: var(--control-borderColor-disabled);
+  --buttonKeybindingHint-primary-fgColor-disabled: var(--button-primary-fgColor-disabled);
+  --buttonKeybindingHint-primary-fgColor-rest: var(--fgColor-onEmphasis);
   --codeMirror-bgColor: var(--bgColor-default);
   --codeMirror-cursor-fgColor: var(--fgColor-default);
   --codeMirror-fgColor: var(--fgColor-default);
@@ -1160,6 +1192,9 @@
   --button-invisible-fgColor-active: var(--control-fgColor-rest);
   --button-invisible-fgColor-hover: var(--control-fgColor-rest);
   --button-invisible-fgColor-rest: var(--control-fgColor-rest);
+  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
+  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
+  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
   --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
   --progressBar-track-borderColor: var(--progressBar-track-bgColor);
   --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
@@ -1559,6 +1594,12 @@
     --buttonCounter-outline-fgColor-disabled: #74b9ff80;
     --buttonCounter-outline-fgColor-hover: var(--base-color-blue-3);
     --buttonCounter-outline-fgColor-rest: var(--base-color-blue-4);
+    --buttonKeybindingHint-danger-bgColor-active: #01040966;
+    --buttonKeybindingHint-danger-bgColor-hover: #01040933;
+    --buttonKeybindingHint-danger-borderColor-hover: var(--base-color-white);
+    --buttonKeybindingHint-default-bgColor-rest: var(--base-color-neutral-4);
+    --buttonKeybindingHint-inactive-bgColor: var(--base-color-neutral-4);
+    --buttonKeybindingHint-primary-borderColor-rest: var(--base-color-white);
     --codeMirror-selection-bgColor: #5cacff66;
     --codeMirror-syntax-fgColor-comment: var(--base-color-neutral-8);
     --codeMirror-syntax-fgColor-constant: var(--base-color-blue-2);
@@ -2169,6 +2210,16 @@
     --buttonCounter-invisible-bgColor-rest: var(--bgColor-neutral-muted);
     --buttonCounter-outline-bgColor-disabled: #194fb10d;
     --buttonCounter-primary-bgColor-rest: #01040926;
+    --buttonKeybindingHint-danger-bgColor-rest: var(--buttonKeybindingHint-default-bgColor-rest);
+    --buttonKeybindingHint-danger-borderColor-active: var(--buttonKeybindingHint-danger-borderColor-hover);
+    --buttonKeybindingHint-default-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-rest);
+    --buttonKeybindingHint-default-fgColor-rest: var(--fgColor-muted);
+    --buttonKeybindingHint-inactive-fgColor: var(--button-inactive-fgColor);
+    --buttonKeybindingHint-invisible-bgColor-active: var(--control-transparent-bgColor-active);
+    --buttonKeybindingHint-invisible-bgColor-disabled: var(--button-invisible-bgColor-disabled);
+    --buttonKeybindingHint-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
+    --buttonKeybindingHint-invisible-bgColor-rest: var(--buttonKeybindingHint-default-bgColor-rest);
+    --buttonKeybindingHint-invisible-fgColor-rest: var(--fgColor-muted);
     --card-bgColor: var(--bgColor-muted);
     --codeMirror-activeline-bgColor: var(--bgColor-neutral-muted);
     --codeMirror-gutterMarker-fgColor-muted: var(--fgColor-muted);
@@ -2280,6 +2331,22 @@
     --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
     --button-primary-fgColor-rest: var(--fgColor-white);
     --button-primary-iconColor-rest: var(--fgColor-white);
+    --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
+    --buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
+    --buttonKeybindingHint-danger-fgColor-hover: var(--fgColor-onEmphasis);
+    --buttonKeybindingHint-danger-fgColor-rest: var(--buttonKeybindingHint-default-fgColor-rest);
+    --buttonKeybindingHint-default-borderColor-disabled: var(--control-borderColor-disabled);
+    --buttonKeybindingHint-default-borderColor-rest: var(--borderColor-muted);
+    --buttonKeybindingHint-default-fgColor-disabled: var(--control-fgColor-disabled);
+    --buttonKeybindingHint-inactive-borderColor: var(--borderColor-muted);
+    --buttonKeybindingHint-invisible-borderColor-disabled: var(--control-borderColor-disabled);
+    --buttonKeybindingHint-invisible-borderColor-rest: var(--borderColor-muted);
+    --buttonKeybindingHint-invisible-fgColor-disabled: var(--control-fgColor-disabled);
+    --buttonKeybindingHint-primary-bgColor-disabled: #0104091a;
+    --buttonKeybindingHint-primary-bgColor-rest: var(--buttonCounter-primary-bgColor-rest);
+    --buttonKeybindingHint-primary-borderColor-disabled: var(--control-borderColor-disabled);
+    --buttonKeybindingHint-primary-fgColor-disabled: var(--button-primary-fgColor-disabled);
+    --buttonKeybindingHint-primary-fgColor-rest: var(--fgColor-onEmphasis);
     --codeMirror-bgColor: var(--bgColor-default);
     --codeMirror-cursor-fgColor: var(--fgColor-default);
     --codeMirror-fgColor: var(--fgColor-default);
@@ -2327,6 +2394,9 @@
     --button-invisible-fgColor-active: var(--control-fgColor-rest);
     --button-invisible-fgColor-hover: var(--control-fgColor-rest);
     --button-invisible-fgColor-rest: var(--control-fgColor-rest);
+    --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
+    --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
+    --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
     --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
     --progressBar-track-borderColor: var(--progressBar-track-bgColor);
     --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);

package/dist/internalCss/dark-tritanopia.css CHANGED Viewed

@@ -389,6 +389,12 @@
   --buttonCounter-outline-fgColor-hover: var(--base-color-blue-3);
   --buttonCounter-outline-fgColor-rest: var(--base-color-blue-4);
   --buttonCounter-primary-bgColor-rest: #04260f33;
+  --buttonKeybindingHint-danger-bgColor-active: #01040966;
+  --buttonKeybindingHint-danger-bgColor-hover: #01040933;
+  --buttonKeybindingHint-danger-borderColor-hover: #0104091a;
+  --buttonKeybindingHint-default-bgColor-rest: var(--base-color-neutral-5);
+  --buttonKeybindingHint-inactive-bgColor: var(--base-color-neutral-5);
+  --buttonKeybindingHint-invisible-borderColor-rest: var(--base-color-transparent);
   --codeMirror-syntax-fgColor-comment: var(--base-color-neutral-8);
   --codeMirror-syntax-fgColor-constant: var(--base-color-blue-2);
   --codeMirror-syntax-fgColor-entity: var(--base-color-purple-2);
@@ -1025,6 +1031,19 @@
   --buttonCounter-danger-fgColor-rest: var(--fgColor-danger);
   --buttonCounter-invisible-bgColor-rest: var(--bgColor-neutral-muted);
   --buttonCounter-outline-bgColor-disabled: #1f6feb0d;
+  --buttonKeybindingHint-danger-bgColor-rest: var(--buttonKeybindingHint-default-bgColor-rest);
+  --buttonKeybindingHint-danger-borderColor-active: var(--buttonKeybindingHint-danger-borderColor-hover);
+  --buttonKeybindingHint-default-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-rest);
+  --buttonKeybindingHint-default-fgColor-rest: var(--fgColor-muted);
+  --buttonKeybindingHint-inactive-fgColor: var(--button-inactive-fgColor);
+  --buttonKeybindingHint-invisible-bgColor-active: var(--control-transparent-bgColor-active);
+  --buttonKeybindingHint-invisible-bgColor-disabled: var(--button-invisible-bgColor-disabled);
+  --buttonKeybindingHint-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
+  --buttonKeybindingHint-invisible-bgColor-rest: var(--buttonKeybindingHint-default-bgColor-rest);
+  --buttonKeybindingHint-invisible-fgColor-rest: var(--fgColor-muted);
+  --buttonKeybindingHint-primary-bgColor-disabled: #04260f1a;
+  --buttonKeybindingHint-primary-bgColor-rest: var(--buttonCounter-primary-bgColor-rest);
+  --buttonKeybindingHint-primary-borderColor-rest: #04260f1a;
   --card-bgColor: var(--bgColor-muted);
   --codeMirror-activeline-bgColor: var(--bgColor-neutral-muted);
   --codeMirror-bgColor: var(--bgColor-default);
@@ -1137,6 +1156,19 @@
   --button-primary-borderColor-rest: var(--borderColor-translucent);
   --button-primary-fgColor-rest: var(--fgColor-white);
   --button-primary-iconColor-rest: var(--fgColor-white);
+  --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
+  --buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
+  --buttonKeybindingHint-danger-fgColor-hover: var(--fgColor-onEmphasis);
+  --buttonKeybindingHint-danger-fgColor-rest: var(--buttonKeybindingHint-default-fgColor-rest);
+  --buttonKeybindingHint-default-borderColor-disabled: var(--control-borderColor-disabled);
+  --buttonKeybindingHint-default-borderColor-rest: var(--borderColor-muted);
+  --buttonKeybindingHint-default-fgColor-disabled: var(--control-fgColor-disabled);
+  --buttonKeybindingHint-inactive-borderColor: var(--borderColor-muted);
+  --buttonKeybindingHint-invisible-borderColor-disabled: var(--control-borderColor-disabled);
+  --buttonKeybindingHint-invisible-fgColor-disabled: var(--control-fgColor-disabled);
+  --buttonKeybindingHint-primary-borderColor-disabled: var(--control-borderColor-disabled);
+  --buttonKeybindingHint-primary-fgColor-disabled: var(--button-primary-fgColor-disabled);
+  --buttonKeybindingHint-primary-fgColor-rest: var(--fgColor-onEmphasis);
   --control-checked-borderColor-disabled: var(--control-checked-bgColor-disabled);
   --control-checked-borderColor-rest: var(--control-checked-bgColor-rest);
   --control-checked-fgColor-rest: var(--fgColor-onEmphasis);
@@ -1157,6 +1189,9 @@
   --button-default-borderColor-hover: var(--button-default-borderColor-rest);
   --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
   --button-primary-borderColor-hover: var(--button-primary-borderColor-rest);
+  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
+  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
+  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
   --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409;
   --shadow-floating-medium: 0px 0px 0px 1px #3d444d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
   --shadow-floating-small: 0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
@@ -1556,6 +1591,12 @@
     --buttonCounter-outline-fgColor-hover: var(--base-color-blue-3);
     --buttonCounter-outline-fgColor-rest: var(--base-color-blue-4);
     --buttonCounter-primary-bgColor-rest: #04260f33;
+    --buttonKeybindingHint-danger-bgColor-active: #01040966;
+    --buttonKeybindingHint-danger-bgColor-hover: #01040933;
+    --buttonKeybindingHint-danger-borderColor-hover: #0104091a;
+    --buttonKeybindingHint-default-bgColor-rest: var(--base-color-neutral-5);
+    --buttonKeybindingHint-inactive-bgColor: var(--base-color-neutral-5);
+    --buttonKeybindingHint-invisible-borderColor-rest: var(--base-color-transparent);
     --codeMirror-syntax-fgColor-comment: var(--base-color-neutral-8);
     --codeMirror-syntax-fgColor-constant: var(--base-color-blue-2);
     --codeMirror-syntax-fgColor-entity: var(--base-color-purple-2);
@@ -2192,6 +2233,19 @@
     --buttonCounter-danger-fgColor-rest: var(--fgColor-danger);
     --buttonCounter-invisible-bgColor-rest: var(--bgColor-neutral-muted);
     --buttonCounter-outline-bgColor-disabled: #1f6feb0d;
+    --buttonKeybindingHint-danger-bgColor-rest: var(--buttonKeybindingHint-default-bgColor-rest);
+    --buttonKeybindingHint-danger-borderColor-active: var(--buttonKeybindingHint-danger-borderColor-hover);
+    --buttonKeybindingHint-default-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-rest);
+    --buttonKeybindingHint-default-fgColor-rest: var(--fgColor-muted);
+    --buttonKeybindingHint-inactive-fgColor: var(--button-inactive-fgColor);
+    --buttonKeybindingHint-invisible-bgColor-active: var(--control-transparent-bgColor-active);
+    --buttonKeybindingHint-invisible-bgColor-disabled: var(--button-invisible-bgColor-disabled);
+    --buttonKeybindingHint-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
+    --buttonKeybindingHint-invisible-bgColor-rest: var(--buttonKeybindingHint-default-bgColor-rest);
+    --buttonKeybindingHint-invisible-fgColor-rest: var(--fgColor-muted);
+    --buttonKeybindingHint-primary-bgColor-disabled: #04260f1a;
+    --buttonKeybindingHint-primary-bgColor-rest: var(--buttonCounter-primary-bgColor-rest);
+    --buttonKeybindingHint-primary-borderColor-rest: #04260f1a;
     --card-bgColor: var(--bgColor-muted);
     --codeMirror-activeline-bgColor: var(--bgColor-neutral-muted);
     --codeMirror-bgColor: var(--bgColor-default);
@@ -2304,6 +2358,19 @@
     --button-primary-borderColor-rest: var(--borderColor-translucent);
     --button-primary-fgColor-rest: var(--fgColor-white);
     --button-primary-iconColor-rest: var(--fgColor-white);
+    --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
+    --buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
+    --buttonKeybindingHint-danger-fgColor-hover: var(--fgColor-onEmphasis);
+    --buttonKeybindingHint-danger-fgColor-rest: var(--buttonKeybindingHint-default-fgColor-rest);
+    --buttonKeybindingHint-default-borderColor-disabled: var(--control-borderColor-disabled);
+    --buttonKeybindingHint-default-borderColor-rest: var(--borderColor-muted);
+    --buttonKeybindingHint-default-fgColor-disabled: var(--control-fgColor-disabled);
+    --buttonKeybindingHint-inactive-borderColor: var(--borderColor-muted);
+    --buttonKeybindingHint-invisible-borderColor-disabled: var(--control-borderColor-disabled);
+    --buttonKeybindingHint-invisible-fgColor-disabled: var(--control-fgColor-disabled);
+    --buttonKeybindingHint-primary-borderColor-disabled: var(--control-borderColor-disabled);
+    --buttonKeybindingHint-primary-fgColor-disabled: var(--button-primary-fgColor-disabled);
+    --buttonKeybindingHint-primary-fgColor-rest: var(--fgColor-onEmphasis);
     --control-checked-borderColor-disabled: var(--control-checked-bgColor-disabled);
     --control-checked-borderColor-rest: var(--control-checked-bgColor-rest);
     --control-checked-fgColor-rest: var(--fgColor-onEmphasis);
@@ -2324,6 +2391,9 @@
     --button-default-borderColor-hover: var(--button-default-borderColor-rest);
     --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
     --button-primary-borderColor-hover: var(--button-primary-borderColor-rest);
+    --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
+    --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
+    --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
     --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409;
     --shadow-floating-medium: 0px 0px 0px 1px #3d444d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
     --shadow-floating-small: 0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;

package/dist/internalCss/dark.css CHANGED Viewed

@@ -383,6 +383,12 @@
   --buttonCounter-outline-fgColor-hover: var(--base-color-blue-3);
   --buttonCounter-outline-fgColor-rest: var(--base-color-blue-4);
   --buttonCounter-primary-bgColor-rest: #04260f33;
+  --buttonKeybindingHint-danger-bgColor-active: #01040966;
+  --buttonKeybindingHint-danger-bgColor-hover: #01040933;
+  --buttonKeybindingHint-danger-borderColor-hover: #0104091a;
+  --buttonKeybindingHint-default-bgColor-rest: var(--base-color-neutral-5);
+  --buttonKeybindingHint-inactive-bgColor: var(--base-color-neutral-5);
+  --buttonKeybindingHint-invisible-borderColor-rest: var(--base-color-transparent);
   --codeMirror-syntax-fgColor-comment: var(--base-color-neutral-8);
   --codeMirror-syntax-fgColor-constant: var(--base-color-blue-2);
   --codeMirror-syntax-fgColor-entity: var(--base-color-purple-2);
@@ -1020,6 +1026,19 @@
   --buttonCounter-danger-fgColor-rest: var(--fgColor-danger);
   --buttonCounter-invisible-bgColor-rest: var(--bgColor-neutral-muted);
   --buttonCounter-outline-bgColor-disabled: #1f6feb0d;
+  --buttonKeybindingHint-danger-bgColor-rest: var(--buttonKeybindingHint-default-bgColor-rest);
+  --buttonKeybindingHint-danger-borderColor-active: var(--buttonKeybindingHint-danger-borderColor-hover);
+  --buttonKeybindingHint-default-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-rest);
+  --buttonKeybindingHint-default-fgColor-rest: var(--fgColor-muted);
+  --buttonKeybindingHint-inactive-fgColor: var(--button-inactive-fgColor);
+  --buttonKeybindingHint-invisible-bgColor-active: var(--control-transparent-bgColor-active);
+  --buttonKeybindingHint-invisible-bgColor-disabled: var(--button-invisible-bgColor-disabled);
+  --buttonKeybindingHint-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
+  --buttonKeybindingHint-invisible-bgColor-rest: var(--buttonKeybindingHint-default-bgColor-rest);
+  --buttonKeybindingHint-invisible-fgColor-rest: var(--fgColor-muted);
+  --buttonKeybindingHint-primary-bgColor-disabled: #04260f1a;
+  --buttonKeybindingHint-primary-bgColor-rest: var(--buttonCounter-primary-bgColor-rest);
+  --buttonKeybindingHint-primary-borderColor-rest: #04260f1a;
   --card-bgColor: var(--bgColor-muted);
   --codeMirror-activeline-bgColor: var(--bgColor-neutral-muted);
   --codeMirror-bgColor: var(--bgColor-default);
@@ -1136,6 +1155,19 @@
   --button-primary-borderColor-rest: var(--borderColor-translucent);
   --button-primary-fgColor-rest: var(--fgColor-white);
   --button-primary-iconColor-rest: var(--fgColor-white);
+  --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
+  --buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
+  --buttonKeybindingHint-danger-fgColor-hover: var(--fgColor-onEmphasis);
+  --buttonKeybindingHint-danger-fgColor-rest: var(--buttonKeybindingHint-default-fgColor-rest);
+  --buttonKeybindingHint-default-borderColor-disabled: var(--control-borderColor-disabled);
+  --buttonKeybindingHint-default-borderColor-rest: var(--borderColor-muted);
+  --buttonKeybindingHint-default-fgColor-disabled: var(--control-fgColor-disabled);
+  --buttonKeybindingHint-inactive-borderColor: var(--borderColor-muted);
+  --buttonKeybindingHint-invisible-borderColor-disabled: var(--control-borderColor-disabled);
+  --buttonKeybindingHint-invisible-fgColor-disabled: var(--control-fgColor-disabled);
+  --buttonKeybindingHint-primary-borderColor-disabled: var(--control-borderColor-disabled);
+  --buttonKeybindingHint-primary-fgColor-disabled: var(--button-primary-fgColor-disabled);
+  --buttonKeybindingHint-primary-fgColor-rest: var(--fgColor-onEmphasis);
   --control-checked-borderColor-disabled: var(--control-checked-bgColor-disabled);
   --control-checked-borderColor-rest: var(--control-checked-bgColor-rest);
   --control-checked-fgColor-rest: var(--fgColor-onEmphasis);
@@ -1157,6 +1189,9 @@
   --button-default-borderColor-hover: var(--button-default-borderColor-rest);
   --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
   --button-primary-borderColor-hover: var(--button-primary-borderColor-rest);
+  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
+  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
+  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
   --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409;
   --shadow-floating-medium: 0px 0px 0px 1px #3d444d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
   --shadow-floating-small: 0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
@@ -1550,6 +1585,12 @@
     --buttonCounter-outline-fgColor-hover: var(--base-color-blue-3);
     --buttonCounter-outline-fgColor-rest: var(--base-color-blue-4);
     --buttonCounter-primary-bgColor-rest: #04260f33;
+    --buttonKeybindingHint-danger-bgColor-active: #01040966;
+    --buttonKeybindingHint-danger-bgColor-hover: #01040933;
+    --buttonKeybindingHint-danger-borderColor-hover: #0104091a;
+    --buttonKeybindingHint-default-bgColor-rest: var(--base-color-neutral-5);
+    --buttonKeybindingHint-inactive-bgColor: var(--base-color-neutral-5);
+    --buttonKeybindingHint-invisible-borderColor-rest: var(--base-color-transparent);
     --codeMirror-syntax-fgColor-comment: var(--base-color-neutral-8);
     --codeMirror-syntax-fgColor-constant: var(--base-color-blue-2);
     --codeMirror-syntax-fgColor-entity: var(--base-color-purple-2);
@@ -2187,6 +2228,19 @@
     --buttonCounter-danger-fgColor-rest: var(--fgColor-danger);
     --buttonCounter-invisible-bgColor-rest: var(--bgColor-neutral-muted);
     --buttonCounter-outline-bgColor-disabled: #1f6feb0d;
+    --buttonKeybindingHint-danger-bgColor-rest: var(--buttonKeybindingHint-default-bgColor-rest);
+    --buttonKeybindingHint-danger-borderColor-active: var(--buttonKeybindingHint-danger-borderColor-hover);
+    --buttonKeybindingHint-default-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-rest);
+    --buttonKeybindingHint-default-fgColor-rest: var(--fgColor-muted);
+    --buttonKeybindingHint-inactive-fgColor: var(--button-inactive-fgColor);
+    --buttonKeybindingHint-invisible-bgColor-active: var(--control-transparent-bgColor-active);
+    --buttonKeybindingHint-invisible-bgColor-disabled: var(--button-invisible-bgColor-disabled);
+    --buttonKeybindingHint-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
+    --buttonKeybindingHint-invisible-bgColor-rest: var(--buttonKeybindingHint-default-bgColor-rest);
+    --buttonKeybindingHint-invisible-fgColor-rest: var(--fgColor-muted);
+    --buttonKeybindingHint-primary-bgColor-disabled: #04260f1a;
+    --buttonKeybindingHint-primary-bgColor-rest: var(--buttonCounter-primary-bgColor-rest);
+    --buttonKeybindingHint-primary-borderColor-rest: #04260f1a;
     --card-bgColor: var(--bgColor-muted);
     --codeMirror-activeline-bgColor: var(--bgColor-neutral-muted);
     --codeMirror-bgColor: var(--bgColor-default);
@@ -2303,6 +2357,19 @@
     --button-primary-borderColor-rest: var(--borderColor-translucent);
     --button-primary-fgColor-rest: var(--fgColor-white);
     --button-primary-iconColor-rest: var(--fgColor-white);
+    --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
+    --buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
+    --buttonKeybindingHint-danger-fgColor-hover: var(--fgColor-onEmphasis);
+    --buttonKeybindingHint-danger-fgColor-rest: var(--buttonKeybindingHint-default-fgColor-rest);
+    --buttonKeybindingHint-default-borderColor-disabled: var(--control-borderColor-disabled);
+    --buttonKeybindingHint-default-borderColor-rest: var(--borderColor-muted);
+    --buttonKeybindingHint-default-fgColor-disabled: var(--control-fgColor-disabled);
+    --buttonKeybindingHint-inactive-borderColor: var(--borderColor-muted);
+    --buttonKeybindingHint-invisible-borderColor-disabled: var(--control-borderColor-disabled);
+    --buttonKeybindingHint-invisible-fgColor-disabled: var(--control-fgColor-disabled);
+    --buttonKeybindingHint-primary-borderColor-disabled: var(--control-borderColor-disabled);
+    --buttonKeybindingHint-primary-fgColor-disabled: var(--button-primary-fgColor-disabled);
+    --buttonKeybindingHint-primary-fgColor-rest: var(--fgColor-onEmphasis);
     --control-checked-borderColor-disabled: var(--control-checked-bgColor-disabled);
     --control-checked-borderColor-rest: var(--control-checked-bgColor-rest);
     --control-checked-fgColor-rest: var(--fgColor-onEmphasis);
@@ -2324,6 +2391,9 @@
     --button-default-borderColor-hover: var(--button-default-borderColor-rest);
     --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
     --button-primary-borderColor-hover: var(--button-primary-borderColor-rest);
+    --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
+    --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
+    --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
     --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409;
     --shadow-floating-medium: 0px 0px 0px 1px #3d444d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
     --shadow-floating-small: 0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;

package/dist/internalCss/light-colorblind-high-contrast.css CHANGED Viewed

@@ -381,6 +381,12 @@
   --buttonCounter-default-bgColor-rest: var(--base-color-neutral-7);
   --buttonCounter-outline-fgColor-rest: var(--base-color-blue-6);
   --buttonCounter-primary-bgColor-rest: #00230b33;
+  --buttonKeybindingHint-danger-bgColor-active: #01040966;
+  --buttonKeybindingHint-danger-bgColor-hover: #01040933;
+  --buttonKeybindingHint-danger-borderColor-hover: var(--base-color-white);
+  --buttonKeybindingHint-default-bgColor-rest: var(--base-color-neutral-2);
+  --buttonKeybindingHint-inactive-bgColor: var(--base-color-neutral-2);
+  --buttonKeybindingHint-primary-borderColor-rest: var(--base-color-white);
   --codeMirror-syntax-fgColor-constant: var(--base-color-blue-6);
   --codeMirror-syntax-fgColor-entity: var(--base-color-purple-5);
   --codeMirror-syntax-fgColor-keyword: var(--base-color-orange-5);
@@ -1007,6 +1013,18 @@
   --buttonCounter-outline-bgColor-rest: #0349b41a;
   --buttonCounter-outline-fgColor-disabled: #023b9580;
   --buttonCounter-outline-fgColor-hover: var(--base-color-neutral-0);
+  --buttonKeybindingHint-danger-bgColor-rest: var(--buttonKeybindingHint-default-bgColor-rest);
+  --buttonKeybindingHint-danger-borderColor-active: var(--buttonKeybindingHint-danger-borderColor-hover);
+  --buttonKeybindingHint-default-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-rest);
+  --buttonKeybindingHint-default-fgColor-rest: var(--fgColor-muted);
+  --buttonKeybindingHint-inactive-fgColor: var(--button-inactive-fgColor);
+  --buttonKeybindingHint-invisible-bgColor-active: var(--control-transparent-bgColor-active);
+  --buttonKeybindingHint-invisible-bgColor-disabled: var(--button-invisible-bgColor-disabled);
+  --buttonKeybindingHint-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
+  --buttonKeybindingHint-invisible-bgColor-rest: var(--buttonKeybindingHint-default-bgColor-rest);
+  --buttonKeybindingHint-invisible-fgColor-rest: var(--fgColor-muted);
+  --buttonKeybindingHint-primary-bgColor-disabled: #00230b1a;
+  --buttonKeybindingHint-primary-bgColor-rest: var(--buttonCounter-primary-bgColor-rest);
   --codeMirror-activeline-bgColor: var(--bgColor-neutral-muted);
   --codeMirror-gutterMarker-fgColor-muted: var(--fgColor-muted);
   --codeMirror-lineNumber-fgColor: var(--fgColor-muted);
@@ -1123,6 +1141,20 @@
   --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
   --button-primary-fgColor-rest: var(--fgColor-white);
   --button-primary-iconColor-rest: #ffffffcc;
+  --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
+  --buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
+  --buttonKeybindingHint-danger-fgColor-hover: var(--fgColor-onEmphasis);
+  --buttonKeybindingHint-danger-fgColor-rest: var(--buttonKeybindingHint-default-fgColor-rest);
+  --buttonKeybindingHint-default-borderColor-disabled: var(--control-borderColor-disabled);
+  --buttonKeybindingHint-default-borderColor-rest: var(--borderColor-muted);
+  --buttonKeybindingHint-default-fgColor-disabled: var(--control-fgColor-disabled);
+  --buttonKeybindingHint-inactive-borderColor: var(--borderColor-muted);
+  --buttonKeybindingHint-invisible-borderColor-disabled: var(--control-borderColor-disabled);
+  --buttonKeybindingHint-invisible-borderColor-rest: var(--borderColor-muted);
+  --buttonKeybindingHint-invisible-fgColor-disabled: var(--control-fgColor-disabled);
+  --buttonKeybindingHint-primary-borderColor-disabled: var(--control-borderColor-disabled);
+  --buttonKeybindingHint-primary-fgColor-disabled: var(--button-primary-fgColor-disabled);
+  --buttonKeybindingHint-primary-fgColor-rest: var(--fgColor-onEmphasis);
   --card-bgColor: var(--bgColor-default);
   --codeMirror-bgColor: var(--bgColor-default);
   --codeMirror-cursor-fgColor: var(--fgColor-default);
@@ -1164,6 +1196,9 @@
   --underlineNav-borderColor-hover: var(--borderColor-muted);
   --border-neutral-muted: 0.0625rem solid #454c54;
   --button-default-borderColor-hover: var(--button-default-borderColor-rest);
+  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
+  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
+  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
   --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
 }
 @media (prefers-color-scheme: dark) {
@@ -1548,6 +1583,12 @@
     --buttonCounter-default-bgColor-rest: var(--base-color-neutral-7);
     --buttonCounter-outline-fgColor-rest: var(--base-color-blue-6);
     --buttonCounter-primary-bgColor-rest: #00230b33;
+    --buttonKeybindingHint-danger-bgColor-active: #01040966;
+    --buttonKeybindingHint-danger-bgColor-hover: #01040933;
+    --buttonKeybindingHint-danger-borderColor-hover: var(--base-color-white);
+    --buttonKeybindingHint-default-bgColor-rest: var(--base-color-neutral-2);
+    --buttonKeybindingHint-inactive-bgColor: var(--base-color-neutral-2);
+    --buttonKeybindingHint-primary-borderColor-rest: var(--base-color-white);
     --codeMirror-syntax-fgColor-constant: var(--base-color-blue-6);
     --codeMirror-syntax-fgColor-entity: var(--base-color-purple-5);
     --codeMirror-syntax-fgColor-keyword: var(--base-color-orange-5);
@@ -2174,6 +2215,18 @@
     --buttonCounter-outline-bgColor-rest: #0349b41a;
     --buttonCounter-outline-fgColor-disabled: #023b9580;
     --buttonCounter-outline-fgColor-hover: var(--base-color-neutral-0);
+    --buttonKeybindingHint-danger-bgColor-rest: var(--buttonKeybindingHint-default-bgColor-rest);
+    --buttonKeybindingHint-danger-borderColor-active: var(--buttonKeybindingHint-danger-borderColor-hover);
+    --buttonKeybindingHint-default-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-rest);
+    --buttonKeybindingHint-default-fgColor-rest: var(--fgColor-muted);
+    --buttonKeybindingHint-inactive-fgColor: var(--button-inactive-fgColor);
+    --buttonKeybindingHint-invisible-bgColor-active: var(--control-transparent-bgColor-active);
+    --buttonKeybindingHint-invisible-bgColor-disabled: var(--button-invisible-bgColor-disabled);
+    --buttonKeybindingHint-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
+    --buttonKeybindingHint-invisible-bgColor-rest: var(--buttonKeybindingHint-default-bgColor-rest);
+    --buttonKeybindingHint-invisible-fgColor-rest: var(--fgColor-muted);
+    --buttonKeybindingHint-primary-bgColor-disabled: #00230b1a;
+    --buttonKeybindingHint-primary-bgColor-rest: var(--buttonCounter-primary-bgColor-rest);
     --codeMirror-activeline-bgColor: var(--bgColor-neutral-muted);
     --codeMirror-gutterMarker-fgColor-muted: var(--fgColor-muted);
     --codeMirror-lineNumber-fgColor: var(--fgColor-muted);
@@ -2290,6 +2343,20 @@
     --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
     --button-primary-fgColor-rest: var(--fgColor-white);
     --button-primary-iconColor-rest: #ffffffcc;
+    --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
+    --buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
+    --buttonKeybindingHint-danger-fgColor-hover: var(--fgColor-onEmphasis);
+    --buttonKeybindingHint-danger-fgColor-rest: var(--buttonKeybindingHint-default-fgColor-rest);
+    --buttonKeybindingHint-default-borderColor-disabled: var(--control-borderColor-disabled);
+    --buttonKeybindingHint-default-borderColor-rest: var(--borderColor-muted);
+    --buttonKeybindingHint-default-fgColor-disabled: var(--control-fgColor-disabled);
+    --buttonKeybindingHint-inactive-borderColor: var(--borderColor-muted);
+    --buttonKeybindingHint-invisible-borderColor-disabled: var(--control-borderColor-disabled);
+    --buttonKeybindingHint-invisible-borderColor-rest: var(--borderColor-muted);
+    --buttonKeybindingHint-invisible-fgColor-disabled: var(--control-fgColor-disabled);
+    --buttonKeybindingHint-primary-borderColor-disabled: var(--control-borderColor-disabled);
+    --buttonKeybindingHint-primary-fgColor-disabled: var(--button-primary-fgColor-disabled);
+    --buttonKeybindingHint-primary-fgColor-rest: var(--fgColor-onEmphasis);
     --card-bgColor: var(--bgColor-default);
     --codeMirror-bgColor: var(--bgColor-default);
     --codeMirror-cursor-fgColor: var(--fgColor-default);
@@ -2331,6 +2398,9 @@
     --underlineNav-borderColor-hover: var(--borderColor-muted);
     --border-neutral-muted: 0.0625rem solid #454c54;
     --button-default-borderColor-hover: var(--button-default-borderColor-rest);
+    --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
+    --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
+    --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
     --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
   }
 }

package/dist/internalCss/light-colorblind.css CHANGED Viewed

@@ -373,6 +373,11 @@
   --buttonCounter-danger-fgColor-rest: var(--base-color-orange-6);
   --buttonCounter-outline-fgColor-rest: var(--base-color-blue-6);
   --buttonCounter-primary-bgColor-rest: #002d1133;
+  --buttonKeybindingHint-danger-bgColor-active: #1f232866;
+  --buttonKeybindingHint-danger-bgColor-hover: #1f232833;
+  --buttonKeybindingHint-default-bgColor-rest: var(--base-color-neutral-2);
+  --buttonKeybindingHint-inactive-bgColor: var(--base-color-neutral-2);
+  --buttonKeybindingHint-invisible-borderColor-rest: var(--base-color-transparent);
   --codeMirror-syntax-fgColor-constant: var(--base-color-blue-6);
   --codeMirror-syntax-fgColor-entity: var(--base-color-purple-5);
   --codeMirror-syntax-fgColor-keyword: var(--base-color-orange-5);
@@ -1024,6 +1029,17 @@
   --buttonCounter-outline-bgColor-rest: #0969da1a;
   --buttonCounter-outline-fgColor-disabled: #0969da80;
   --buttonCounter-outline-fgColor-hover: var(--base-color-neutral-0);
+  --buttonKeybindingHint-danger-bgColor-rest: var(--buttonKeybindingHint-default-bgColor-rest);
+  --buttonKeybindingHint-default-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-rest);
+  --buttonKeybindingHint-default-fgColor-rest: var(--fgColor-muted);
+  --buttonKeybindingHint-inactive-fgColor: var(--button-inactive-fgColor);
+  --buttonKeybindingHint-invisible-bgColor-active: var(--control-transparent-bgColor-active);
+  --buttonKeybindingHint-invisible-bgColor-disabled: var(--button-invisible-bgColor-disabled);
+  --buttonKeybindingHint-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
+  --buttonKeybindingHint-invisible-bgColor-rest: var(--buttonKeybindingHint-default-bgColor-rest);
+  --buttonKeybindingHint-invisible-fgColor-rest: var(--fgColor-muted);
+  --buttonKeybindingHint-primary-bgColor-disabled: #002d111a;
+  --buttonKeybindingHint-primary-bgColor-rest: var(--buttonCounter-primary-bgColor-rest);
   --codeMirror-activeline-bgColor: var(--bgColor-neutral-muted);
   --codeMirror-gutterMarker-fgColor-muted: var(--fgColor-muted);
   --codeMirror-lineNumber-fgColor: var(--fgColor-muted);
@@ -1121,6 +1137,21 @@
   --button-primary-borderColor-rest: var(--borderColor-translucent);
   --button-primary-fgColor-rest: var(--fgColor-white);
   --button-primary-iconColor-rest: #ffffffcc;
+  --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
+  --buttonKeybindingHint-danger-borderColor-hover: var(--borderColor-translucent);
+  --buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
+  --buttonKeybindingHint-danger-fgColor-hover: var(--fgColor-onEmphasis);
+  --buttonKeybindingHint-danger-fgColor-rest: var(--buttonKeybindingHint-default-fgColor-rest);
+  --buttonKeybindingHint-default-borderColor-disabled: var(--control-borderColor-disabled);
+  --buttonKeybindingHint-default-borderColor-rest: var(--borderColor-muted);
+  --buttonKeybindingHint-default-fgColor-disabled: var(--control-fgColor-disabled);
+  --buttonKeybindingHint-inactive-borderColor: var(--borderColor-muted);
+  --buttonKeybindingHint-invisible-borderColor-disabled: var(--control-borderColor-disabled);
+  --buttonKeybindingHint-invisible-fgColor-disabled: var(--control-fgColor-disabled);
+  --buttonKeybindingHint-primary-borderColor-disabled: var(--control-borderColor-disabled);
+  --buttonKeybindingHint-primary-borderColor-rest: var(--borderColor-translucent);
+  --buttonKeybindingHint-primary-fgColor-disabled: var(--button-primary-fgColor-disabled);
+  --buttonKeybindingHint-primary-fgColor-rest: var(--fgColor-onEmphasis);
   --card-bgColor: var(--bgColor-default);
   --codeMirror-bgColor: var(--bgColor-default);
   --codeMirror-cursor-fgColor: var(--fgColor-default);
@@ -1158,6 +1189,10 @@
   --button-default-borderColor-hover: var(--button-default-borderColor-rest);
   --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
   --button-primary-borderColor-hover: var(--button-primary-borderColor-rest);
+  --buttonKeybindingHint-danger-borderColor-active: var(--buttonKeybindingHint-danger-borderColor-hover);
+  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
+  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
+  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
   --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d;
   --shadow-floating-medium: 0px 0px 0px 1px #d1d9e0, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;
   --shadow-floating-small: 0px 0px 0px 1px #d1d9e080, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
@@ -1540,6 +1575,11 @@
     --buttonCounter-danger-fgColor-rest: var(--base-color-orange-6);
     --buttonCounter-outline-fgColor-rest: var(--base-color-blue-6);
     --buttonCounter-primary-bgColor-rest: #002d1133;
+    --buttonKeybindingHint-danger-bgColor-active: #1f232866;
+    --buttonKeybindingHint-danger-bgColor-hover: #1f232833;
+    --buttonKeybindingHint-default-bgColor-rest: var(--base-color-neutral-2);
+    --buttonKeybindingHint-inactive-bgColor: var(--base-color-neutral-2);
+    --buttonKeybindingHint-invisible-borderColor-rest: var(--base-color-transparent);
     --codeMirror-syntax-fgColor-constant: var(--base-color-blue-6);
     --codeMirror-syntax-fgColor-entity: var(--base-color-purple-5);
     --codeMirror-syntax-fgColor-keyword: var(--base-color-orange-5);
@@ -2191,6 +2231,17 @@
     --buttonCounter-outline-bgColor-rest: #0969da1a;
     --buttonCounter-outline-fgColor-disabled: #0969da80;
     --buttonCounter-outline-fgColor-hover: var(--base-color-neutral-0);
+    --buttonKeybindingHint-danger-bgColor-rest: var(--buttonKeybindingHint-default-bgColor-rest);
+    --buttonKeybindingHint-default-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-rest);
+    --buttonKeybindingHint-default-fgColor-rest: var(--fgColor-muted);
+    --buttonKeybindingHint-inactive-fgColor: var(--button-inactive-fgColor);
+    --buttonKeybindingHint-invisible-bgColor-active: var(--control-transparent-bgColor-active);
+    --buttonKeybindingHint-invisible-bgColor-disabled: var(--button-invisible-bgColor-disabled);
+    --buttonKeybindingHint-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
+    --buttonKeybindingHint-invisible-bgColor-rest: var(--buttonKeybindingHint-default-bgColor-rest);
+    --buttonKeybindingHint-invisible-fgColor-rest: var(--fgColor-muted);
+    --buttonKeybindingHint-primary-bgColor-disabled: #002d111a;
+    --buttonKeybindingHint-primary-bgColor-rest: var(--buttonCounter-primary-bgColor-rest);
     --codeMirror-activeline-bgColor: var(--bgColor-neutral-muted);
     --codeMirror-gutterMarker-fgColor-muted: var(--fgColor-muted);
     --codeMirror-lineNumber-fgColor: var(--fgColor-muted);
@@ -2288,6 +2339,21 @@
     --button-primary-borderColor-rest: var(--borderColor-translucent);
     --button-primary-fgColor-rest: var(--fgColor-white);
     --button-primary-iconColor-rest: #ffffffcc;
+    --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
+    --buttonKeybindingHint-danger-borderColor-hover: var(--borderColor-translucent);
+    --buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
+    --buttonKeybindingHint-danger-fgColor-hover: var(--fgColor-onEmphasis);
+    --buttonKeybindingHint-danger-fgColor-rest: var(--buttonKeybindingHint-default-fgColor-rest);
+    --buttonKeybindingHint-default-borderColor-disabled: var(--control-borderColor-disabled);
+    --buttonKeybindingHint-default-borderColor-rest: var(--borderColor-muted);
+    --buttonKeybindingHint-default-fgColor-disabled: var(--control-fgColor-disabled);
+    --buttonKeybindingHint-inactive-borderColor: var(--borderColor-muted);
+    --buttonKeybindingHint-invisible-borderColor-disabled: var(--control-borderColor-disabled);
+    --buttonKeybindingHint-invisible-fgColor-disabled: var(--control-fgColor-disabled);
+    --buttonKeybindingHint-primary-borderColor-disabled: var(--control-borderColor-disabled);
+    --buttonKeybindingHint-primary-borderColor-rest: var(--borderColor-translucent);
+    --buttonKeybindingHint-primary-fgColor-disabled: var(--button-primary-fgColor-disabled);
+    --buttonKeybindingHint-primary-fgColor-rest: var(--fgColor-onEmphasis);
     --card-bgColor: var(--bgColor-default);
     --codeMirror-bgColor: var(--bgColor-default);
     --codeMirror-cursor-fgColor: var(--fgColor-default);
@@ -2325,6 +2391,10 @@
     --button-default-borderColor-hover: var(--button-default-borderColor-rest);
     --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
     --button-primary-borderColor-hover: var(--button-primary-borderColor-rest);
+    --buttonKeybindingHint-danger-borderColor-active: var(--buttonKeybindingHint-danger-borderColor-hover);
+    --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
+    --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
+    --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
     --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d;
     --shadow-floating-medium: 0px 0px 0px 1px #d1d9e0, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;
     --shadow-floating-small: 0px 0px 0px 1px #d1d9e080, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;