npm - @primer/primitives - Versions diffs - 11.0.1-rc.84dc6db1 → 11.1.0-rc.27a415da - Mend

@primer/primitives 11.0.1-rc.84dc6db1 → 11.1.0-rc.27a415da

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 (73) hide show

package/dist/figma/themes/light.json CHANGED Viewed

@@ -2799,14 +2799,14 @@
   {
     "name": "controlKnob/borderColor/rest",
     "value": {
-      "r": 0.5058823529411764,
-      "g": 0.5450980392156862,
-      "b": 0.596078431372549,
+      "r": 0.8196078431372549,
+      "g": 0.8509803921568627,
+      "b": 0.8784313725490196,
       "a": 1
     },
     "type": "COLOR",
     "refId": "mode/controlKnob/borderColor/rest",
-    "reference": "mode/control/borderColor/emphasis",
+    "reference": "mode/control/borderColor/rest",
     "collection": "mode",
     "mode": "light",
     "group": "component (internal)",
@@ -13898,6 +13898,166 @@
     "group": "component",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "progressBar/track/bgColor",
+    "value": {
+      "r": 0.8196078431372549,
+      "g": 0.8509803921568627,
+      "b": 0.8784313725490196,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/progressBar/track/bgColor",
+    "reference": "mode/borderColor/default",
+    "collection": "mode",
+    "mode": "light",
+    "group": "component",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
+  },
+  {
+    "name": "progressBar/track/borderColor",
+    "value": {
+      "r": 1,
+      "g": 1,
+      "b": 1,
+      "a": 0
+    },
+    "type": "COLOR",
+    "refId": "mode/progressBar/track/borderColor",
+    "reference": "base/color/light/base/color/transparent",
+    "collection": "mode",
+    "mode": "light",
+    "group": "component",
+    "scopes": ["STROKE_COLOR"]
+  },
+  {
+    "name": "progressBar/bgColor/danger",
+    "value": {
+      "r": 0.8117647058823529,
+      "g": 0.13333333333333333,
+      "b": 0.1803921568627451,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/progressBar/bgColor/danger",
+    "reference": "mode/bgColor/danger-emphasis",
+    "collection": "mode",
+    "mode": "light",
+    "group": "component",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
+  },
+  {
+    "name": "progressBar/bgColor/severe",
+    "value": {
+      "r": 0.7372549019607844,
+      "g": 0.2980392156862745,
+      "b": 0,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/progressBar/bgColor/severe",
+    "reference": "mode/bgColor/severe-emphasis",
+    "collection": "mode",
+    "mode": "light",
+    "group": "component",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
+  },
+  {
+    "name": "progressBar/bgColor/sponsors",
+    "value": {
+      "r": 0.7490196078431373,
+      "g": 0.2235294117647059,
+      "b": 0.5372549019607843,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/progressBar/bgColor/sponsors",
+    "reference": "mode/bgColor/sponsors-emphasis",
+    "collection": "mode",
+    "mode": "light",
+    "group": "component",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
+  },
+  {
+    "name": "progressBar/bgColor/done",
+    "value": {
+      "r": 0.5098039215686274,
+      "g": 0.3137254901960784,
+      "b": 0.8745098039215686,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/progressBar/bgColor/done",
+    "reference": "mode/bgColor/done-emphasis",
+    "collection": "mode",
+    "mode": "light",
+    "group": "component",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
+  },
+  {
+    "name": "progressBar/bgColor/accent",
+    "value": {
+      "r": 0.03529411764705882,
+      "g": 0.4117647058823529,
+      "b": 0.8549019607843137,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/progressBar/bgColor/accent",
+    "reference": "mode/bgColor/accent-emphasis",
+    "collection": "mode",
+    "mode": "light",
+    "group": "component",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
+  },
+  {
+    "name": "progressBar/bgColor/success",
+    "value": {
+      "r": 0.12156862745098039,
+      "g": 0.5333333333333333,
+      "b": 0.23921568627450981,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/progressBar/bgColor/success",
+    "reference": "mode/bgColor/success-emphasis",
+    "collection": "mode",
+    "mode": "light",
+    "group": "component",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
+  },
+  {
+    "name": "progressBar/bgColor/neutral",
+    "value": {
+      "r": 0.34901960784313724,
+      "g": 0.38823529411764707,
+      "b": 0.43137254901960786,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/progressBar/bgColor/neutral",
+    "reference": "mode/bgColor/neutral-emphasis",
+    "collection": "mode",
+    "mode": "light",
+    "group": "component",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
+  },
+  {
+    "name": "progressBar/bgColor/attention",
+    "value": {
+      "r": 0.6039215686274509,
+      "g": 0.403921568627451,
+      "b": 0,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/progressBar/bgColor/attention",
+    "reference": "mode/bgColor/attention-emphasis",
+    "collection": "mode",
+    "mode": "light",
+    "group": "component",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
+  },
   {
     "name": "reactionButton/selected/bgColor/rest",
     "value": {

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

@@ -930,6 +930,7 @@
   --label-yellow-fgColor-rest: var(--base-display-color-yellow-6);
   --menu-bgColor-active: var(--base-color-neutral-2);
   --overlay-backdrop-bgColor: #d1d7e066;
+  --progressBar-bgColor-neutral: var(--base-color-neutral-8);
   --reactionButton-selected-bgColor-rest: #5cacff33;
   --reactionButton-selected-fgColor-hover: var(--base-color-blue-2);
   --selectMenu-bgColor-active: var(--base-color-blue-8);
@@ -1067,6 +1068,13 @@
   --label-yellow-borderColor: var(--label-yellow-fgColor-rest);
   --overlay-bgColor: var(--base-color-neutral-0);
   --overlay-borderColor: var(--borderColor-default);
+  --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+  --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+  --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+  --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+  --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);
   --selection-bgColor: #194fb1b3;
@@ -1131,6 +1139,7 @@
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
   --focus-outline: 2px solid #409eff;
   --page-header-bgColor: var(--bgColor-default);
+  --progressBar-track-bgColor: var(--bgColor-inverse);
   --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409;
   --shadow-floating-medium: 0px 0px 0px 1px #b7bdc8, 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 #b7bdc8, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
@@ -1146,6 +1155,7 @@
   --button-invisible-fgColor-hover: var(--control-fgColor-rest);
   --button-invisible-fgColor-rest: var(--control-fgColor-rest);
   --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
+  --progressBar-track-borderColor: var(--progressBar-track-bgColor);
   --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
   --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
@@ -2081,6 +2091,7 @@
     --label-yellow-fgColor-rest: var(--base-display-color-yellow-6);
     --menu-bgColor-active: var(--base-color-neutral-2);
     --overlay-backdrop-bgColor: #d1d7e066;
+    --progressBar-bgColor-neutral: var(--base-color-neutral-8);
     --reactionButton-selected-bgColor-rest: #5cacff33;
     --reactionButton-selected-fgColor-hover: var(--base-color-blue-2);
     --selectMenu-bgColor-active: var(--base-color-blue-8);
@@ -2218,6 +2229,13 @@
     --label-yellow-borderColor: var(--label-yellow-fgColor-rest);
     --overlay-bgColor: var(--base-color-neutral-0);
     --overlay-borderColor: var(--borderColor-default);
+    --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+    --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+    --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+    --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+    --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+    --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+    --progressBar-bgColor-success: var(--bgColor-success-emphasis);
     --reactionButton-selected-fgColor-rest: var(--fgColor-link);
     --selectMenu-borderColor: var(--borderColor-default);
     --selection-bgColor: #194fb1b3;
@@ -2282,6 +2300,7 @@
     --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
     --focus-outline: 2px solid #409eff;
     --page-header-bgColor: var(--bgColor-default);
+    --progressBar-track-bgColor: var(--bgColor-inverse);
     --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409;
     --shadow-floating-medium: 0px 0px 0px 1px #b7bdc8, 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 #b7bdc8, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
@@ -2297,6 +2316,7 @@
     --button-invisible-fgColor-hover: var(--control-fgColor-rest);
     --button-invisible-fgColor-rest: var(--control-fgColor-rest);
     --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
+    --progressBar-track-borderColor: var(--progressBar-track-bgColor);
     --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
     --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
     --button-outline-borderColor-active: var(--button-outline-borderColor-hover);

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

@@ -949,6 +949,7 @@
   --label-yellow-fgColor-rest: var(--base-display-color-yellow-6);
   --menu-bgColor-active: var(--base-color-neutral-2);
   --overlay-backdrop-bgColor: #21283066;
+  --progressBar-track-borderColor: var(--base-color-transparent);
   --reactionButton-selected-bgColor-rest: #388bfd33;
   --reactionButton-selected-fgColor-hover: var(--base-color-blue-2);
   --selectMenu-bgColor-active: var(--base-color-blue-8);
@@ -1085,6 +1086,15 @@
   --header-fgColor-default: #ffffffb3;
   --overlay-bgColor: var(--base-color-neutral-0);
   --page-header-bgColor: var(--bgColor-default);
+  --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+  --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+  --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+  --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+  --progressBar-bgColor-neutral: var(--bgColor-neutral-emphasis);
+  --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
+  --progressBar-track-bgColor: var(--borderColor-default);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);
   --selection-bgColor: #1f6febb3;
@@ -1129,7 +1139,7 @@
   --controlKnob-bgColor-rest: var(--bgColor-inset);
   --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
   --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
-  --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
+  --controlKnob-borderColor-rest: var(--control-borderColor-rest);
   --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
   --focus-outline: 2px solid #1f6feb;
@@ -2100,6 +2110,7 @@
     --label-yellow-fgColor-rest: var(--base-display-color-yellow-6);
     --menu-bgColor-active: var(--base-color-neutral-2);
     --overlay-backdrop-bgColor: #21283066;
+    --progressBar-track-borderColor: var(--base-color-transparent);
     --reactionButton-selected-bgColor-rest: #388bfd33;
     --reactionButton-selected-fgColor-hover: var(--base-color-blue-2);
     --selectMenu-bgColor-active: var(--base-color-blue-8);
@@ -2236,6 +2247,15 @@
     --header-fgColor-default: #ffffffb3;
     --overlay-bgColor: var(--base-color-neutral-0);
     --page-header-bgColor: var(--bgColor-default);
+    --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+    --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+    --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+    --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+    --progressBar-bgColor-neutral: var(--bgColor-neutral-emphasis);
+    --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+    --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+    --progressBar-bgColor-success: var(--bgColor-success-emphasis);
+    --progressBar-track-bgColor: var(--borderColor-default);
     --reactionButton-selected-fgColor-rest: var(--fgColor-link);
     --selectMenu-borderColor: var(--borderColor-default);
     --selection-bgColor: #1f6febb3;
@@ -2280,7 +2300,7 @@
     --controlKnob-bgColor-rest: var(--bgColor-inset);
     --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
     --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
-    --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
+    --controlKnob-borderColor-rest: var(--control-borderColor-rest);
     --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
     --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
     --focus-outline: 2px solid #1f6feb;

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

@@ -935,6 +935,7 @@
   --label-yellow-fgColor-rest: var(--base-display-color-yellow-6);
   --menu-bgColor-active: var(--base-color-neutral-2);
   --overlay-backdrop-bgColor: #9198a166;
+  --progressBar-bgColor-neutral: var(--base-color-neutral-8);
   --reactionButton-selected-bgColor-rest: #4184e433;
   --reactionButton-selected-fgColor-hover: var(--base-color-blue-2);
   --selectMenu-bgColor-active: var(--base-color-blue-8);
@@ -1093,6 +1094,13 @@
   --overlay-bgColor: var(--base-color-neutral-0);
   --overlay-borderColor: var(--borderColor-default);
   --page-header-bgColor: var(--bgColor-default);
+  --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+  --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+  --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+  --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+  --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
   --selectMenu-borderColor: var(--borderColor-default);
   --selection-bgColor: #1b4b91b3;
   --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
@@ -1134,6 +1142,7 @@
   --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
   --controlTrack-borderColor-rest: var(--borderColor-emphasis);
   --focus-outline: 2px solid #6cb6ff;
+  --progressBar-track-bgColor: var(--bgColor-inverse);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409;
   --shadow-floating-medium: 0px 0px 0px 1px #b7bdc8, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
@@ -1146,6 +1155,7 @@
   --button-default-borderColor-active: var(--button-default-borderColor-rest);
   --button-default-borderColor-hover: var(--button-default-borderColor-rest);
   --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
+  --progressBar-track-borderColor: var(--progressBar-track-bgColor);
   --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
   --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
@@ -2086,6 +2096,7 @@
     --label-yellow-fgColor-rest: var(--base-display-color-yellow-6);
     --menu-bgColor-active: var(--base-color-neutral-2);
     --overlay-backdrop-bgColor: #9198a166;
+    --progressBar-bgColor-neutral: var(--base-color-neutral-8);
     --reactionButton-selected-bgColor-rest: #4184e433;
     --reactionButton-selected-fgColor-hover: var(--base-color-blue-2);
     --selectMenu-bgColor-active: var(--base-color-blue-8);
@@ -2244,6 +2255,13 @@
     --overlay-bgColor: var(--base-color-neutral-0);
     --overlay-borderColor: var(--borderColor-default);
     --page-header-bgColor: var(--bgColor-default);
+    --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+    --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+    --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+    --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+    --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+    --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+    --progressBar-bgColor-success: var(--bgColor-success-emphasis);
     --selectMenu-borderColor: var(--borderColor-default);
     --selection-bgColor: #1b4b91b3;
     --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
@@ -2285,6 +2303,7 @@
     --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
     --controlTrack-borderColor-rest: var(--borderColor-emphasis);
     --focus-outline: 2px solid #6cb6ff;
+    --progressBar-track-bgColor: var(--bgColor-inverse);
     --reactionButton-selected-fgColor-rest: var(--fgColor-link);
     --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409;
     --shadow-floating-medium: 0px 0px 0px 1px #b7bdc8, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
@@ -2297,6 +2316,7 @@
     --button-default-borderColor-active: var(--button-default-borderColor-rest);
     --button-default-borderColor-hover: var(--button-default-borderColor-rest);
     --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
+    --progressBar-track-borderColor: var(--progressBar-track-bgColor);
     --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
     --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
     --button-outline-borderColor-active: var(--button-outline-borderColor-hover);

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

@@ -476,6 +476,7 @@
   --control-transparent-borderColor-active: var(--base-color-transparent);
   --control-transparent-borderColor-hover: var(--base-color-transparent);
   --control-transparent-borderColor-rest: var(--base-color-transparent);
+  --controlKnob-borderColor-rest: var(--control-borderColor-rest);
   --controlTrack-bgColor-active: var(--base-color-neutral-7);
   --controlTrack-bgColor-hover: var(--base-color-neutral-6);
   --controlTrack-bgColor-rest: var(--base-color-neutral-5);
@@ -960,6 +961,7 @@
   --overlay-backdrop-bgColor: #262c3666;
   --overlay-bgColor: var(--base-color-neutral-5);
   --overlay-borderColor: #3d444db3;
+  --progressBar-track-borderColor: var(--base-color-transparent);
   --reactionButton-selected-bgColor-rest: #4184e433;
   --reactionButton-selected-fgColor-hover: var(--base-color-blue-2);
   --selectMenu-bgColor-active: var(--base-color-blue-8);
@@ -1101,6 +1103,15 @@
   --focus-outlineColor: var(--borderColor-accent-emphasis);
   --header-fgColor-default: #cdd9e5b3;
   --page-header-bgColor: var(--bgColor-default);
+  --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+  --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+  --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+  --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+  --progressBar-bgColor-neutral: var(--bgColor-neutral-emphasis);
+  --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
+  --progressBar-track-bgColor: var(--borderColor-default);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);
   --selection-bgColor: #316dcab3;
@@ -1142,7 +1153,6 @@
   --controlKnob-bgColor-disabled: var(--control-bgColor-disabled);
   --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
   --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
-  --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
   --focus-outline: 2px solid #316dca;
   --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
@@ -1627,6 +1637,7 @@
     --control-transparent-borderColor-active: var(--base-color-transparent);
     --control-transparent-borderColor-hover: var(--base-color-transparent);
     --control-transparent-borderColor-rest: var(--base-color-transparent);
+    --controlKnob-borderColor-rest: var(--control-borderColor-rest);
     --controlTrack-bgColor-active: var(--base-color-neutral-7);
     --controlTrack-bgColor-hover: var(--base-color-neutral-6);
     --controlTrack-bgColor-rest: var(--base-color-neutral-5);
@@ -2111,6 +2122,7 @@
     --overlay-backdrop-bgColor: #262c3666;
     --overlay-bgColor: var(--base-color-neutral-5);
     --overlay-borderColor: #3d444db3;
+    --progressBar-track-borderColor: var(--base-color-transparent);
     --reactionButton-selected-bgColor-rest: #4184e433;
     --reactionButton-selected-fgColor-hover: var(--base-color-blue-2);
     --selectMenu-bgColor-active: var(--base-color-blue-8);
@@ -2252,6 +2264,15 @@
     --focus-outlineColor: var(--borderColor-accent-emphasis);
     --header-fgColor-default: #cdd9e5b3;
     --page-header-bgColor: var(--bgColor-default);
+    --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+    --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+    --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+    --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+    --progressBar-bgColor-neutral: var(--bgColor-neutral-emphasis);
+    --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+    --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+    --progressBar-bgColor-success: var(--bgColor-success-emphasis);
+    --progressBar-track-bgColor: var(--borderColor-default);
     --reactionButton-selected-fgColor-rest: var(--fgColor-link);
     --selectMenu-borderColor: var(--borderColor-default);
     --selection-bgColor: #316dcab3;
@@ -2293,7 +2314,6 @@
     --controlKnob-bgColor-disabled: var(--control-bgColor-disabled);
     --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
     --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
-    --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
     --focus-outline: 2px solid #316dca;
     --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
     --button-outline-borderColor-active: var(--button-outline-borderColor-hover);

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

@@ -924,6 +924,7 @@
   --label-yellow-fgColor-rest: var(--base-display-color-yellow-6);
   --menu-bgColor-active: var(--base-color-neutral-2);
   --overlay-backdrop-bgColor: #d1d7e066;
+  --progressBar-bgColor-neutral: var(--base-color-neutral-8);
   --reactionButton-selected-bgColor-rest: #5cacff33;
   --reactionButton-selected-fgColor-hover: var(--base-color-blue-2);
   --selectMenu-bgColor-active: var(--base-color-blue-8);
@@ -1068,6 +1069,13 @@
   --label-yellow-borderColor: var(--label-yellow-fgColor-rest);
   --overlay-bgColor: var(--base-color-neutral-0);
   --overlay-borderColor: var(--borderColor-default);
+  --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+  --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+  --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+  --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+  --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);
   --selection-bgColor: #194fb1b3;
@@ -1131,6 +1139,7 @@
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
   --focus-outline: 2px solid #409eff;
   --page-header-bgColor: var(--bgColor-default);
+  --progressBar-track-bgColor: var(--bgColor-inverse);
   --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409;
   --shadow-floating-medium: 0px 0px 0px 1px #b7bdc8, 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 #b7bdc8, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
@@ -1146,6 +1155,7 @@
   --button-invisible-fgColor-hover: var(--control-fgColor-rest);
   --button-invisible-fgColor-rest: var(--control-fgColor-rest);
   --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
+  --progressBar-track-borderColor: var(--progressBar-track-bgColor);
   --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
   --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
@@ -2075,6 +2085,7 @@
     --label-yellow-fgColor-rest: var(--base-display-color-yellow-6);
     --menu-bgColor-active: var(--base-color-neutral-2);
     --overlay-backdrop-bgColor: #d1d7e066;
+    --progressBar-bgColor-neutral: var(--base-color-neutral-8);
     --reactionButton-selected-bgColor-rest: #5cacff33;
     --reactionButton-selected-fgColor-hover: var(--base-color-blue-2);
     --selectMenu-bgColor-active: var(--base-color-blue-8);
@@ -2219,6 +2230,13 @@
     --label-yellow-borderColor: var(--label-yellow-fgColor-rest);
     --overlay-bgColor: var(--base-color-neutral-0);
     --overlay-borderColor: var(--borderColor-default);
+    --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+    --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+    --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+    --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+    --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+    --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+    --progressBar-bgColor-success: var(--bgColor-success-emphasis);
     --reactionButton-selected-fgColor-rest: var(--fgColor-link);
     --selectMenu-borderColor: var(--borderColor-default);
     --selection-bgColor: #194fb1b3;
@@ -2282,6 +2300,7 @@
     --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
     --focus-outline: 2px solid #409eff;
     --page-header-bgColor: var(--bgColor-default);
+    --progressBar-track-bgColor: var(--bgColor-inverse);
     --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409;
     --shadow-floating-medium: 0px 0px 0px 1px #b7bdc8, 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 #b7bdc8, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
@@ -2297,6 +2316,7 @@
     --button-invisible-fgColor-hover: var(--control-fgColor-rest);
     --button-invisible-fgColor-rest: var(--control-fgColor-rest);
     --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
+    --progressBar-track-borderColor: var(--progressBar-track-bgColor);
     --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
     --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
     --button-outline-borderColor-active: var(--button-outline-borderColor-hover);

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

@@ -930,6 +930,7 @@
   --label-yellow-fgColor-rest: var(--base-display-color-yellow-6);
   --menu-bgColor-active: var(--base-color-neutral-2);
   --overlay-backdrop-bgColor: #d1d7e066;
+  --progressBar-bgColor-neutral: var(--base-color-neutral-8);
   --reactionButton-selected-bgColor-rest: #5cacff33;
   --reactionButton-selected-fgColor-hover: var(--base-color-blue-2);
   --selectMenu-bgColor-active: var(--base-color-blue-8);
@@ -1067,6 +1068,13 @@
   --label-yellow-borderColor: var(--label-yellow-fgColor-rest);
   --overlay-bgColor: var(--base-color-neutral-0);
   --overlay-borderColor: var(--borderColor-default);
+  --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+  --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+  --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+  --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+  --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);
   --selection-bgColor: #194fb1b3;
@@ -1131,6 +1139,7 @@
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
   --focus-outline: 2px solid #409eff;
   --page-header-bgColor: var(--bgColor-default);
+  --progressBar-track-bgColor: var(--bgColor-inverse);
   --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409;
   --shadow-floating-medium: 0px 0px 0px 1px #b7bdc8, 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 #b7bdc8, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
@@ -1146,6 +1155,7 @@
   --button-invisible-fgColor-hover: var(--control-fgColor-rest);
   --button-invisible-fgColor-rest: var(--control-fgColor-rest);
   --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
+  --progressBar-track-borderColor: var(--progressBar-track-bgColor);
   --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
   --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
@@ -2081,6 +2091,7 @@
     --label-yellow-fgColor-rest: var(--base-display-color-yellow-6);
     --menu-bgColor-active: var(--base-color-neutral-2);
     --overlay-backdrop-bgColor: #d1d7e066;
+    --progressBar-bgColor-neutral: var(--base-color-neutral-8);
     --reactionButton-selected-bgColor-rest: #5cacff33;
     --reactionButton-selected-fgColor-hover: var(--base-color-blue-2);
     --selectMenu-bgColor-active: var(--base-color-blue-8);
@@ -2218,6 +2229,13 @@
     --label-yellow-borderColor: var(--label-yellow-fgColor-rest);
     --overlay-bgColor: var(--base-color-neutral-0);
     --overlay-borderColor: var(--borderColor-default);
+    --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+    --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+    --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+    --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+    --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+    --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+    --progressBar-bgColor-success: var(--bgColor-success-emphasis);
     --reactionButton-selected-fgColor-rest: var(--fgColor-link);
     --selectMenu-borderColor: var(--borderColor-default);
     --selection-bgColor: #194fb1b3;
@@ -2282,6 +2300,7 @@
     --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
     --focus-outline: 2px solid #409eff;
     --page-header-bgColor: var(--bgColor-default);
+    --progressBar-track-bgColor: var(--bgColor-inverse);
     --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409;
     --shadow-floating-medium: 0px 0px 0px 1px #b7bdc8, 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 #b7bdc8, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
@@ -2297,6 +2316,7 @@
     --button-invisible-fgColor-hover: var(--control-fgColor-rest);
     --button-invisible-fgColor-rest: var(--control-fgColor-rest);
     --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
+    --progressBar-track-borderColor: var(--progressBar-track-bgColor);
     --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
     --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
     --button-outline-borderColor-active: var(--button-outline-borderColor-hover);