@primer/primitives 11.7.0 → 11.7.1-rc.97abd424

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 (30) hide show
  1. package/dist/build/platforms/css.js +22 -4
  2. package/dist/css/functional/themes/dark-colorblind-high-contrast.css +54 -54
  3. package/dist/css/functional/themes/dark-colorblind.css +54 -54
  4. package/dist/css/functional/themes/dark-dimmed-high-contrast.css +54 -54
  5. package/dist/css/functional/themes/dark-dimmed.css +54 -54
  6. package/dist/css/functional/themes/dark-high-contrast.css +54 -54
  7. package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +54 -54
  8. package/dist/css/functional/themes/dark-tritanopia.css +54 -54
  9. package/dist/css/functional/themes/dark.css +54 -54
  10. package/dist/css/functional/themes/light-colorblind-high-contrast.css +54 -54
  11. package/dist/css/functional/themes/light-colorblind.css +54 -54
  12. package/dist/css/functional/themes/light-high-contrast.css +54 -54
  13. package/dist/css/functional/themes/light-tritanopia-high-contrast.css +54 -54
  14. package/dist/css/functional/themes/light-tritanopia.css +54 -54
  15. package/dist/css/functional/themes/light.css +54 -54
  16. package/dist/internalCss/dark-colorblind-high-contrast.css +54 -54
  17. package/dist/internalCss/dark-colorblind.css +54 -54
  18. package/dist/internalCss/dark-dimmed-high-contrast.css +54 -54
  19. package/dist/internalCss/dark-dimmed.css +54 -54
  20. package/dist/internalCss/dark-high-contrast.css +54 -54
  21. package/dist/internalCss/dark-tritanopia-high-contrast.css +54 -54
  22. package/dist/internalCss/dark-tritanopia.css +54 -54
  23. package/dist/internalCss/dark.css +54 -54
  24. package/dist/internalCss/light-colorblind-high-contrast.css +54 -54
  25. package/dist/internalCss/light-colorblind.css +54 -54
  26. package/dist/internalCss/light-high-contrast.css +54 -54
  27. package/dist/internalCss/light-tritanopia-high-contrast.css +54 -54
  28. package/dist/internalCss/light-tritanopia.css +54 -54
  29. package/dist/internalCss/light.css +54 -54
  30. package/package.json +15 -14
package/dist/internalCss/dark-colorblind.css CHANGED
@@ -960,24 +960,24 @@
960
960
  --bgColor-upsell-emphasis: var(--bgColor-done-emphasis); /** Strong background for prominent upsell elements */
961
961
  --bgColor-upsell-muted: var(--bgColor-done-muted); /** Subtle background for upsell and promotional content */
962
962
  --bgColor-white: var(--base-color-neutral-13); /** Pure white background */
963
- --border-accent-emphasis: 0.0625rem solid #1f6feb;
964
- --border-accent-muted: 0.0625rem solid #388bfd66;
965
- --border-attention-emphasis: 0.0625rem solid #9e6a03;
966
- --border-attention-muted: 0.0625rem solid #bb800966;
967
- --border-danger-emphasis: 0.0625rem solid #bd561d;
968
- --border-danger-muted: 0.0625rem solid #db6d2866;
969
- --border-default: 0.0625rem solid #3d444d;
970
- --border-disabled: 0.0625rem solid #656c761a;
971
- --border-done-emphasis: 0.0625rem solid #8957e5;
972
- --border-done-muted: 0.0625rem solid #ab7df866;
973
- --border-emphasis: 0.0625rem solid #656c76;
974
- --border-severe-emphasis: 0.0625rem solid #bd561d;
975
- --border-severe-muted: 0.0625rem solid #db6d2866;
976
- --border-sponsors-emphasis: 0.0625rem solid #bf4b8a;
977
- --border-sponsors-muted: 0.0625rem solid #db61a266;
978
- --border-success-emphasis: 0.0625rem solid #1f6feb;
979
- --border-success-muted: 0.0625rem solid #388bfd66;
980
- --border-transparent: 0.0625rem solid #00000000;
963
+ --border-accent-emphasis: var(--borderWidth-default) solid var(--borderColor-accent-emphasis);
964
+ --border-accent-muted: var(--borderWidth-default) solid var(--borderColor-accent-muted);
965
+ --border-attention-emphasis: var(--borderWidth-default) solid var(--borderColor-attention-emphasis);
966
+ --border-attention-muted: var(--borderWidth-default) solid var(--borderColor-attention-muted);
967
+ --border-danger-emphasis: var(--borderWidth-default) solid var(--borderColor-danger-emphasis);
968
+ --border-danger-muted: var(--borderWidth-default) solid var(--borderColor-danger-muted);
969
+ --border-default: var(--borderWidth-default) solid var(--borderColor-default);
970
+ --border-disabled: var(--borderWidth-default) solid var(--borderColor-disabled);
971
+ --border-done-emphasis: var(--borderWidth-default) solid var(--borderColor-done-emphasis);
972
+ --border-done-muted: var(--borderWidth-default) solid var(--borderColor-done-muted);
973
+ --border-emphasis: var(--borderWidth-default) solid var(--borderColor-emphasis);
974
+ --border-severe-emphasis: var(--borderWidth-default) solid var(--borderColor-severe-emphasis);
975
+ --border-severe-muted: var(--borderWidth-default) solid var(--borderColor-severe-muted);
976
+ --border-sponsors-emphasis: var(--borderWidth-default) solid var(--borderColor-sponsors-emphasis);
977
+ --border-sponsors-muted: var(--borderWidth-default) solid var(--borderColor-sponsors-muted);
978
+ --border-success-emphasis: var(--borderWidth-default) solid var(--borderColor-success-emphasis);
979
+ --border-success-muted: var(--borderWidth-default) solid var(--borderColor-success-muted);
980
+ --border-transparent: var(--borderWidth-default) solid var(--borderColor-transparent);
981
981
  --borderColor-closed-emphasis: var(--borderColor-emphasis); /** Strong border for closed state badges */
982
982
  --borderColor-closed-muted: #3d444d66; /** Subtle border for closed state indicators */
983
983
  --borderColor-draft-muted: #3d444d66; /** Subtle border for draft state indicators */
@@ -1119,14 +1119,14 @@
1119
1119
  --avatar-borderColor: var(--borderColor-translucent);
1120
1120
  --border-closed-emphasis: var(--border-danger-emphasis);
1121
1121
  --border-closed-muted: var(--border-danger-muted);
1122
- --border-draft-muted: 0.0625rem solid #3d444d66;
1123
- --border-muted: 0.0625rem solid #3d444db3;
1124
- --border-neutral-emphasis: 0.0625rem solid #656c76;
1122
+ --border-draft-muted: var(--borderWidth-default) solid var(--borderColor-draft-muted);
1123
+ --border-muted: var(--borderWidth-default) solid var(--borderColor-muted);
1124
+ --border-neutral-emphasis: var(--borderWidth-default) solid var(--borderColor-neutral-emphasis);
1125
1125
  --border-open-emphasis: var(--border-success-emphasis);
1126
1126
  --border-open-muted: var(--border-success-muted);
1127
- --border-translucent: 0.0625rem solid #ffffff26; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
1128
- --border-upsell-emphasis: 0.0625rem solid #8957e5;
1129
- --border-upsell-muted: 0.0625rem solid #ab7df866;
1127
+ --border-translucent: var(--borderWidth-default) solid var(--borderColor-translucent); /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
1128
+ --border-upsell-emphasis: var(--borderWidth-default) solid var(--borderColor-upsell-emphasis);
1129
+ --border-upsell-muted: var(--borderWidth-default) solid var(--borderColor-upsell-muted);
1130
1130
  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
1131
1131
  --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
1132
1132
  --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
@@ -1171,12 +1171,12 @@
1171
1171
  --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
1172
1172
  --dashboard-bgColor: var(--bgColor-inset);
1173
1173
  --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
1174
- --focus-outline: 0.125rem solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
1174
+ --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color); /** Focus ring outline for keyboard navigation and accessibility. */
1175
1175
  --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
1176
1176
  --overlay-borderColor: var(--borderColor-muted);
1177
1177
  --tooltip-fgColor: var(--fgColor-onEmphasis);
1178
- --border-draft-emphasis: 0.0625rem solid #656c76;
1179
- --border-neutral-muted: 0.0625rem solid #3d444db3;
1178
+ --border-draft-emphasis: var(--borderWidth-default) solid var(--borderColor-draft-emphasis);
1179
+ --border-neutral-muted: var(--borderWidth-default) solid var(--borderColor-neutral-muted);
1180
1180
  --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
1181
1181
  --button-default-borderColor-active: var(--button-default-borderColor-rest);
1182
1182
  --button-default-borderColor-hover: var(--button-default-borderColor-rest);
@@ -2156,24 +2156,24 @@
2156
2156
  --bgColor-upsell-emphasis: var(--bgColor-done-emphasis); /** Strong background for prominent upsell elements */
2157
2157
  --bgColor-upsell-muted: var(--bgColor-done-muted); /** Subtle background for upsell and promotional content */
2158
2158
  --bgColor-white: var(--base-color-neutral-13); /** Pure white background */
2159
- --border-accent-emphasis: 0.0625rem solid #1f6feb;
2160
- --border-accent-muted: 0.0625rem solid #388bfd66;
2161
- --border-attention-emphasis: 0.0625rem solid #9e6a03;
2162
- --border-attention-muted: 0.0625rem solid #bb800966;
2163
- --border-danger-emphasis: 0.0625rem solid #bd561d;
2164
- --border-danger-muted: 0.0625rem solid #db6d2866;
2165
- --border-default: 0.0625rem solid #3d444d;
2166
- --border-disabled: 0.0625rem solid #656c761a;
2167
- --border-done-emphasis: 0.0625rem solid #8957e5;
2168
- --border-done-muted: 0.0625rem solid #ab7df866;
2169
- --border-emphasis: 0.0625rem solid #656c76;
2170
- --border-severe-emphasis: 0.0625rem solid #bd561d;
2171
- --border-severe-muted: 0.0625rem solid #db6d2866;
2172
- --border-sponsors-emphasis: 0.0625rem solid #bf4b8a;
2173
- --border-sponsors-muted: 0.0625rem solid #db61a266;
2174
- --border-success-emphasis: 0.0625rem solid #1f6feb;
2175
- --border-success-muted: 0.0625rem solid #388bfd66;
2176
- --border-transparent: 0.0625rem solid #00000000;
2159
+ --border-accent-emphasis: var(--borderWidth-default) solid var(--borderColor-accent-emphasis);
2160
+ --border-accent-muted: var(--borderWidth-default) solid var(--borderColor-accent-muted);
2161
+ --border-attention-emphasis: var(--borderWidth-default) solid var(--borderColor-attention-emphasis);
2162
+ --border-attention-muted: var(--borderWidth-default) solid var(--borderColor-attention-muted);
2163
+ --border-danger-emphasis: var(--borderWidth-default) solid var(--borderColor-danger-emphasis);
2164
+ --border-danger-muted: var(--borderWidth-default) solid var(--borderColor-danger-muted);
2165
+ --border-default: var(--borderWidth-default) solid var(--borderColor-default);
2166
+ --border-disabled: var(--borderWidth-default) solid var(--borderColor-disabled);
2167
+ --border-done-emphasis: var(--borderWidth-default) solid var(--borderColor-done-emphasis);
2168
+ --border-done-muted: var(--borderWidth-default) solid var(--borderColor-done-muted);
2169
+ --border-emphasis: var(--borderWidth-default) solid var(--borderColor-emphasis);
2170
+ --border-severe-emphasis: var(--borderWidth-default) solid var(--borderColor-severe-emphasis);
2171
+ --border-severe-muted: var(--borderWidth-default) solid var(--borderColor-severe-muted);
2172
+ --border-sponsors-emphasis: var(--borderWidth-default) solid var(--borderColor-sponsors-emphasis);
2173
+ --border-sponsors-muted: var(--borderWidth-default) solid var(--borderColor-sponsors-muted);
2174
+ --border-success-emphasis: var(--borderWidth-default) solid var(--borderColor-success-emphasis);
2175
+ --border-success-muted: var(--borderWidth-default) solid var(--borderColor-success-muted);
2176
+ --border-transparent: var(--borderWidth-default) solid var(--borderColor-transparent);
2177
2177
  --borderColor-closed-emphasis: var(--borderColor-emphasis); /** Strong border for closed state badges */
2178
2178
  --borderColor-closed-muted: #3d444d66; /** Subtle border for closed state indicators */
2179
2179
  --borderColor-draft-muted: #3d444d66; /** Subtle border for draft state indicators */
@@ -2315,14 +2315,14 @@
2315
2315
  --avatar-borderColor: var(--borderColor-translucent);
2316
2316
  --border-closed-emphasis: var(--border-danger-emphasis);
2317
2317
  --border-closed-muted: var(--border-danger-muted);
2318
- --border-draft-muted: 0.0625rem solid #3d444d66;
2319
- --border-muted: 0.0625rem solid #3d444db3;
2320
- --border-neutral-emphasis: 0.0625rem solid #656c76;
2318
+ --border-draft-muted: var(--borderWidth-default) solid var(--borderColor-draft-muted);
2319
+ --border-muted: var(--borderWidth-default) solid var(--borderColor-muted);
2320
+ --border-neutral-emphasis: var(--borderWidth-default) solid var(--borderColor-neutral-emphasis);
2321
2321
  --border-open-emphasis: var(--border-success-emphasis);
2322
2322
  --border-open-muted: var(--border-success-muted);
2323
- --border-translucent: 0.0625rem solid #ffffff26; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
2324
- --border-upsell-emphasis: 0.0625rem solid #8957e5;
2325
- --border-upsell-muted: 0.0625rem solid #ab7df866;
2323
+ --border-translucent: var(--borderWidth-default) solid var(--borderColor-translucent); /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
2324
+ --border-upsell-emphasis: var(--borderWidth-default) solid var(--borderColor-upsell-emphasis);
2325
+ --border-upsell-muted: var(--borderWidth-default) solid var(--borderColor-upsell-muted);
2326
2326
  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
2327
2327
  --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
2328
2328
  --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
@@ -2367,12 +2367,12 @@
2367
2367
  --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
2368
2368
  --dashboard-bgColor: var(--bgColor-inset);
2369
2369
  --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
2370
- --focus-outline: 0.125rem solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
2370
+ --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color); /** Focus ring outline for keyboard navigation and accessibility. */
2371
2371
  --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
2372
2372
  --overlay-borderColor: var(--borderColor-muted);
2373
2373
  --tooltip-fgColor: var(--fgColor-onEmphasis);
2374
- --border-draft-emphasis: 0.0625rem solid #656c76;
2375
- --border-neutral-muted: 0.0625rem solid #3d444db3;
2374
+ --border-draft-emphasis: var(--borderWidth-default) solid var(--borderColor-draft-emphasis);
2375
+ --border-neutral-muted: var(--borderWidth-default) solid var(--borderColor-neutral-muted);
2376
2376
  --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
2377
2377
  --button-default-borderColor-active: var(--button-default-borderColor-rest);
2378
2378
  --button-default-borderColor-hover: var(--button-default-borderColor-rest);
package/dist/internalCss/dark-dimmed-high-contrast.css CHANGED
@@ -952,24 +952,24 @@
952
952
  --bgColor-upsell-emphasis: var(--bgColor-done-emphasis); /** Strong background for prominent upsell elements */
953
953
  --bgColor-upsell-muted: var(--bgColor-done-muted); /** Subtle background for upsell and promotional content */
954
954
  --bgColor-white: var(--base-color-neutral-13); /** Pure white background */
955
- --border-accent-emphasis: 0.0625rem solid #6cb6ff;
956
- --border-accent-muted: 0.0625rem solid #6cb6ff;
957
- --border-attention-emphasis: 0.0625rem solid #daaa3f;
958
- --border-attention-muted: 0.0625rem solid #daaa3f;
959
- --border-danger-emphasis: 0.0625rem solid #ff938a;
960
- --border-danger-muted: 0.0625rem solid #ff938a;
961
- --border-default: 0.0625rem solid #b7bdc8;
962
- --border-disabled: 0.0625rem solid #656c761a;
963
- --border-done-emphasis: 0.0625rem solid #dcbdfb;
964
- --border-done-muted: 0.0625rem solid #dcbdfb;
965
- --border-severe-emphasis: 0.0625rem solid #f69d50;
966
- --border-severe-muted: 0.0625rem solid #f69d50;
967
- --border-sponsors-emphasis: 0.0625rem solid #e275ad;
968
- --border-sponsors-muted: 0.0625rem solid #fc8dc7;
969
- --border-success-emphasis: 0.0625rem solid #6bc46d;
970
- --border-success-muted: 0.0625rem solid #6bc46d;
971
- --border-translucent: 0.0625rem solid #9198a1; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
972
- --border-transparent: 0.0625rem solid #00000000;
955
+ --border-accent-emphasis: var(--borderWidth-default) solid var(--borderColor-accent-emphasis);
956
+ --border-accent-muted: var(--borderWidth-default) solid var(--borderColor-accent-muted);
957
+ --border-attention-emphasis: var(--borderWidth-default) solid var(--borderColor-attention-emphasis);
958
+ --border-attention-muted: var(--borderWidth-default) solid var(--borderColor-attention-muted);
959
+ --border-danger-emphasis: var(--borderWidth-default) solid var(--borderColor-danger-emphasis);
960
+ --border-danger-muted: var(--borderWidth-default) solid var(--borderColor-danger-muted);
961
+ --border-default: var(--borderWidth-default) solid var(--borderColor-default);
962
+ --border-disabled: var(--borderWidth-default) solid var(--borderColor-disabled);
963
+ --border-done-emphasis: var(--borderWidth-default) solid var(--borderColor-done-emphasis);
964
+ --border-done-muted: var(--borderWidth-default) solid var(--borderColor-done-muted);
965
+ --border-severe-emphasis: var(--borderWidth-default) solid var(--borderColor-severe-emphasis);
966
+ --border-severe-muted: var(--borderWidth-default) solid var(--borderColor-severe-muted);
967
+ --border-sponsors-emphasis: var(--borderWidth-default) solid var(--borderColor-sponsors-emphasis);
968
+ --border-sponsors-muted: var(--borderWidth-default) solid var(--borderColor-sponsors-muted);
969
+ --border-success-emphasis: var(--borderWidth-default) solid var(--borderColor-success-emphasis);
970
+ --border-success-muted: var(--borderWidth-default) solid var(--borderColor-success-muted);
971
+ --border-translucent: var(--borderWidth-default) solid var(--borderColor-translucent); /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
972
+ --border-transparent: var(--borderWidth-default) solid var(--borderColor-transparent);
973
973
  --borderColor-closed-emphasis: var(--borderColor-danger-emphasis); /** Strong border for closed state badges */
974
974
  --borderColor-closed-muted: var(--borderColor-danger-muted); /** Subtle border for closed state indicators */
975
975
  --borderColor-emphasis: var(--borderColor-default); /** Strong border for emphasis and visual weight */
@@ -1127,12 +1127,12 @@
1127
1127
  --avatar-borderColor: var(--borderColor-emphasis);
1128
1128
  --border-closed-emphasis: var(--border-danger-emphasis);
1129
1129
  --border-closed-muted: var(--border-danger-muted);
1130
- --border-emphasis: 0.0625rem solid #b7bdc8;
1131
- --border-muted: 0.0625rem solid #b7bdc8;
1130
+ --border-emphasis: var(--borderWidth-default) solid var(--borderColor-emphasis);
1131
+ --border-muted: var(--borderWidth-default) solid var(--borderColor-muted);
1132
1132
  --border-open-emphasis: var(--border-success-emphasis);
1133
1133
  --border-open-muted: var(--border-success-muted);
1134
- --border-upsell-emphasis: 0.0625rem solid #dcbdfb;
1135
- --border-upsell-muted: 0.0625rem solid #dcbdfb;
1134
+ --border-upsell-emphasis: var(--borderWidth-default) solid var(--borderColor-upsell-emphasis);
1135
+ --border-upsell-muted: var(--borderWidth-default) solid var(--borderColor-upsell-muted);
1136
1136
  --borderColor-neutral-emphasis: var(--borderColor-emphasis); /** Strong neutral semantic border */
1137
1137
  --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
1138
1138
  --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
@@ -1167,7 +1167,7 @@
1167
1167
  --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
1168
1168
  --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
1169
1169
  --controlTrack-borderColor-rest: var(--borderColor-emphasis);
1170
- --focus-outline: 0.125rem solid #6cb6ff; /** Focus ring outline for keyboard navigation and accessibility. */
1170
+ --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color); /** Focus ring outline for keyboard navigation and accessibility. */
1171
1171
  --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
1172
1172
  --progressBar-track-bgColor: var(--bgColor-inverse);
1173
1173
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
@@ -1177,8 +1177,8 @@
1177
1177
  --shadow-floating-xlarge: 0 0 0 1px #b7bdc8, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
1178
1178
  --tooltip-bgColor: var(--bgColor-inverse);
1179
1179
  --tooltip-fgColor: var(--fgColor-onInverse);
1180
- --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
1181
- --border-neutral-muted: 0.0625rem solid #b7bdc8;
1180
+ --border-neutral-emphasis: var(--borderWidth-default) solid var(--borderColor-neutral-emphasis);
1181
+ --border-neutral-muted: var(--borderWidth-default) solid var(--borderColor-neutral-muted);
1182
1182
  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
1183
1183
  --borderColor-draft-muted: var(--borderColor-neutral-muted); /** Subtle border for draft state indicators */
1184
1184
  --button-default-borderColor-active: var(--button-default-borderColor-rest);
@@ -1189,8 +1189,8 @@
1189
1189
  --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
1190
1190
  --progressBar-track-borderColor: var(--progressBar-track-bgColor);
1191
1191
  --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
1192
- --border-draft-emphasis: 0.0625rem solid #b7bdc8;
1193
- --border-draft-muted: 0.0625rem solid #b7bdc8;
1192
+ --border-draft-emphasis: var(--borderWidth-default) solid var(--borderColor-draft-emphasis);
1193
+ --border-draft-muted: var(--borderWidth-default) solid var(--borderColor-draft-muted);
1194
1194
  --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
1195
1195
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
1196
1196
  }
@@ -2148,24 +2148,24 @@
2148
2148
  --bgColor-upsell-emphasis: var(--bgColor-done-emphasis); /** Strong background for prominent upsell elements */
2149
2149
  --bgColor-upsell-muted: var(--bgColor-done-muted); /** Subtle background for upsell and promotional content */
2150
2150
  --bgColor-white: var(--base-color-neutral-13); /** Pure white background */
2151
- --border-accent-emphasis: 0.0625rem solid #6cb6ff;
2152
- --border-accent-muted: 0.0625rem solid #6cb6ff;
2153
- --border-attention-emphasis: 0.0625rem solid #daaa3f;
2154
- --border-attention-muted: 0.0625rem solid #daaa3f;
2155
- --border-danger-emphasis: 0.0625rem solid #ff938a;
2156
- --border-danger-muted: 0.0625rem solid #ff938a;
2157
- --border-default: 0.0625rem solid #b7bdc8;
2158
- --border-disabled: 0.0625rem solid #656c761a;
2159
- --border-done-emphasis: 0.0625rem solid #dcbdfb;
2160
- --border-done-muted: 0.0625rem solid #dcbdfb;
2161
- --border-severe-emphasis: 0.0625rem solid #f69d50;
2162
- --border-severe-muted: 0.0625rem solid #f69d50;
2163
- --border-sponsors-emphasis: 0.0625rem solid #e275ad;
2164
- --border-sponsors-muted: 0.0625rem solid #fc8dc7;
2165
- --border-success-emphasis: 0.0625rem solid #6bc46d;
2166
- --border-success-muted: 0.0625rem solid #6bc46d;
2167
- --border-translucent: 0.0625rem solid #9198a1; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
2168
- --border-transparent: 0.0625rem solid #00000000;
2151
+ --border-accent-emphasis: var(--borderWidth-default) solid var(--borderColor-accent-emphasis);
2152
+ --border-accent-muted: var(--borderWidth-default) solid var(--borderColor-accent-muted);
2153
+ --border-attention-emphasis: var(--borderWidth-default) solid var(--borderColor-attention-emphasis);
2154
+ --border-attention-muted: var(--borderWidth-default) solid var(--borderColor-attention-muted);
2155
+ --border-danger-emphasis: var(--borderWidth-default) solid var(--borderColor-danger-emphasis);
2156
+ --border-danger-muted: var(--borderWidth-default) solid var(--borderColor-danger-muted);
2157
+ --border-default: var(--borderWidth-default) solid var(--borderColor-default);
2158
+ --border-disabled: var(--borderWidth-default) solid var(--borderColor-disabled);
2159
+ --border-done-emphasis: var(--borderWidth-default) solid var(--borderColor-done-emphasis);
2160
+ --border-done-muted: var(--borderWidth-default) solid var(--borderColor-done-muted);
2161
+ --border-severe-emphasis: var(--borderWidth-default) solid var(--borderColor-severe-emphasis);
2162
+ --border-severe-muted: var(--borderWidth-default) solid var(--borderColor-severe-muted);
2163
+ --border-sponsors-emphasis: var(--borderWidth-default) solid var(--borderColor-sponsors-emphasis);
2164
+ --border-sponsors-muted: var(--borderWidth-default) solid var(--borderColor-sponsors-muted);
2165
+ --border-success-emphasis: var(--borderWidth-default) solid var(--borderColor-success-emphasis);
2166
+ --border-success-muted: var(--borderWidth-default) solid var(--borderColor-success-muted);
2167
+ --border-translucent: var(--borderWidth-default) solid var(--borderColor-translucent); /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
2168
+ --border-transparent: var(--borderWidth-default) solid var(--borderColor-transparent);
2169
2169
  --borderColor-closed-emphasis: var(--borderColor-danger-emphasis); /** Strong border for closed state badges */
2170
2170
  --borderColor-closed-muted: var(--borderColor-danger-muted); /** Subtle border for closed state indicators */
2171
2171
  --borderColor-emphasis: var(--borderColor-default); /** Strong border for emphasis and visual weight */
@@ -2323,12 +2323,12 @@
2323
2323
  --avatar-borderColor: var(--borderColor-emphasis);
2324
2324
  --border-closed-emphasis: var(--border-danger-emphasis);
2325
2325
  --border-closed-muted: var(--border-danger-muted);
2326
- --border-emphasis: 0.0625rem solid #b7bdc8;
2327
- --border-muted: 0.0625rem solid #b7bdc8;
2326
+ --border-emphasis: var(--borderWidth-default) solid var(--borderColor-emphasis);
2327
+ --border-muted: var(--borderWidth-default) solid var(--borderColor-muted);
2328
2328
  --border-open-emphasis: var(--border-success-emphasis);
2329
2329
  --border-open-muted: var(--border-success-muted);
2330
- --border-upsell-emphasis: 0.0625rem solid #dcbdfb;
2331
- --border-upsell-muted: 0.0625rem solid #dcbdfb;
2330
+ --border-upsell-emphasis: var(--borderWidth-default) solid var(--borderColor-upsell-emphasis);
2331
+ --border-upsell-muted: var(--borderWidth-default) solid var(--borderColor-upsell-muted);
2332
2332
  --borderColor-neutral-emphasis: var(--borderColor-emphasis); /** Strong neutral semantic border */
2333
2333
  --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
2334
2334
  --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
@@ -2363,7 +2363,7 @@
2363
2363
  --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
2364
2364
  --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
2365
2365
  --controlTrack-borderColor-rest: var(--borderColor-emphasis);
2366
- --focus-outline: 0.125rem solid #6cb6ff; /** Focus ring outline for keyboard navigation and accessibility. */
2366
+ --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color); /** Focus ring outline for keyboard navigation and accessibility. */
2367
2367
  --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
2368
2368
  --progressBar-track-bgColor: var(--bgColor-inverse);
2369
2369
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
@@ -2373,8 +2373,8 @@
2373
2373
  --shadow-floating-xlarge: 0 0 0 1px #b7bdc8, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
2374
2374
  --tooltip-bgColor: var(--bgColor-inverse);
2375
2375
  --tooltip-fgColor: var(--fgColor-onInverse);
2376
- --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
2377
- --border-neutral-muted: 0.0625rem solid #b7bdc8;
2376
+ --border-neutral-emphasis: var(--borderWidth-default) solid var(--borderColor-neutral-emphasis);
2377
+ --border-neutral-muted: var(--borderWidth-default) solid var(--borderColor-neutral-muted);
2378
2378
  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
2379
2379
  --borderColor-draft-muted: var(--borderColor-neutral-muted); /** Subtle border for draft state indicators */
2380
2380
  --button-default-borderColor-active: var(--button-default-borderColor-rest);
@@ -2385,8 +2385,8 @@
2385
2385
  --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
2386
2386
  --progressBar-track-borderColor: var(--progressBar-track-bgColor);
2387
2387
  --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
2388
- --border-draft-emphasis: 0.0625rem solid #b7bdc8;
2389
- --border-draft-muted: 0.0625rem solid #b7bdc8;
2388
+ --border-draft-emphasis: var(--borderWidth-default) solid var(--borderColor-draft-emphasis);
2389
+ --border-draft-muted: var(--borderWidth-default) solid var(--borderColor-draft-muted);
2390
2390
  --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
2391
2391
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
2392
2392
  }
package/dist/internalCss/dark-dimmed.css CHANGED
@@ -974,26 +974,26 @@
974
974
  --bgColor-upsell-emphasis: var(--bgColor-done-emphasis); /** Strong background for prominent upsell elements */
975
975
  --bgColor-upsell-muted: var(--bgColor-done-muted); /** Subtle background for upsell and promotional content */
976
976
  --bgColor-white: var(--base-color-neutral-13); /** Pure white background */
977
- --border-accent-emphasis: 0.0625rem solid #316dca;
978
- --border-accent-muted: 0.0625rem solid #4184e466;
979
- --border-attention-emphasis: 0.0625rem solid #966600;
980
- --border-attention-muted: 0.0625rem solid #ae7c1466;
981
- --border-danger-emphasis: 0.0625rem solid #c93c37;
982
- --border-danger-muted: 0.0625rem solid #e5534b66;
983
- --border-default: 0.0625rem solid #3d444d;
984
- --border-disabled: 0.0625rem solid #656c761a;
985
- --border-done-emphasis: 0.0625rem solid #8256d0;
986
- --border-done-muted: 0.0625rem solid #986ee266;
987
- --border-emphasis: 0.0625rem solid #656c76;
988
- --border-muted: 0.0625rem solid #3d444db3;
989
- --border-neutral-muted: 0.0625rem solid #3d444db3;
990
- --border-severe-emphasis: 0.0625rem solid #ae5622;
991
- --border-severe-muted: 0.0625rem solid #cc6b2c66;
992
- --border-sponsors-emphasis: 0.0625rem solid #ae4c82;
993
- --border-sponsors-muted: 0.0625rem solid #c9619866;
994
- --border-success-emphasis: 0.0625rem solid #347d39;
995
- --border-success-muted: 0.0625rem solid #46954a66;
996
- --border-transparent: 0.0625rem solid #00000000;
977
+ --border-accent-emphasis: var(--borderWidth-default) solid var(--borderColor-accent-emphasis);
978
+ --border-accent-muted: var(--borderWidth-default) solid var(--borderColor-accent-muted);
979
+ --border-attention-emphasis: var(--borderWidth-default) solid var(--borderColor-attention-emphasis);
980
+ --border-attention-muted: var(--borderWidth-default) solid var(--borderColor-attention-muted);
981
+ --border-danger-emphasis: var(--borderWidth-default) solid var(--borderColor-danger-emphasis);
982
+ --border-danger-muted: var(--borderWidth-default) solid var(--borderColor-danger-muted);
983
+ --border-default: var(--borderWidth-default) solid var(--borderColor-default);
984
+ --border-disabled: var(--borderWidth-default) solid var(--borderColor-disabled);
985
+ --border-done-emphasis: var(--borderWidth-default) solid var(--borderColor-done-emphasis);
986
+ --border-done-muted: var(--borderWidth-default) solid var(--borderColor-done-muted);
987
+ --border-emphasis: var(--borderWidth-default) solid var(--borderColor-emphasis);
988
+ --border-muted: var(--borderWidth-default) solid var(--borderColor-muted);
989
+ --border-neutral-muted: var(--borderWidth-default) solid var(--borderColor-neutral-muted);
990
+ --border-severe-emphasis: var(--borderWidth-default) solid var(--borderColor-severe-emphasis);
991
+ --border-severe-muted: var(--borderWidth-default) solid var(--borderColor-severe-muted);
992
+ --border-sponsors-emphasis: var(--borderWidth-default) solid var(--borderColor-sponsors-emphasis);
993
+ --border-sponsors-muted: var(--borderWidth-default) solid var(--borderColor-sponsors-muted);
994
+ --border-success-emphasis: var(--borderWidth-default) solid var(--borderColor-success-emphasis);
995
+ --border-success-muted: var(--borderWidth-default) solid var(--borderColor-success-muted);
996
+ --border-transparent: var(--borderWidth-default) solid var(--borderColor-transparent);
997
997
  --borderColor-closed-emphasis: var(--borderColor-danger-emphasis); /** Strong border for closed state badges */
998
998
  --borderColor-closed-muted: var(--borderColor-danger-muted); /** Subtle border for closed state indicators */
999
999
  --borderColor-draft-muted: var(--borderColor-neutral-muted); /** Subtle border for draft state indicators */
@@ -1150,13 +1150,13 @@
1150
1150
  --avatar-borderColor: var(--borderColor-translucent);
1151
1151
  --border-closed-emphasis: var(--border-danger-emphasis);
1152
1152
  --border-closed-muted: var(--border-danger-muted);
1153
- --border-draft-muted: 0.0625rem solid #3d444db3;
1154
- --border-neutral-emphasis: 0.0625rem solid #656c76;
1153
+ --border-draft-muted: var(--borderWidth-default) solid var(--borderColor-draft-muted);
1154
+ --border-neutral-emphasis: var(--borderWidth-default) solid var(--borderColor-neutral-emphasis);
1155
1155
  --border-open-emphasis: var(--border-success-emphasis);
1156
1156
  --border-open-muted: var(--border-success-muted);
1157
- --border-translucent: 0.0625rem solid #cdd9e526; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
1158
- --border-upsell-emphasis: 0.0625rem solid #8256d0;
1159
- --border-upsell-muted: 0.0625rem solid #986ee266;
1157
+ --border-translucent: var(--borderWidth-default) solid var(--borderColor-translucent); /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
1158
+ --border-upsell-emphasis: var(--borderWidth-default) solid var(--borderColor-upsell-emphasis);
1159
+ --border-upsell-muted: var(--borderWidth-default) solid var(--borderColor-upsell-muted);
1160
1160
  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
1161
1161
  --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
1162
1162
  --button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
@@ -1184,9 +1184,9 @@
1184
1184
  --controlKnob-bgColor-disabled: var(--control-bgColor-disabled);
1185
1185
  --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
1186
1186
  --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
1187
- --focus-outline: 0.125rem solid #316dca; /** Focus ring outline for keyboard navigation and accessibility. */
1187
+ --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color); /** Focus ring outline for keyboard navigation and accessibility. */
1188
1188
  --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
1189
- --border-draft-emphasis: 0.0625rem solid #656c76;
1189
+ --border-draft-emphasis: var(--borderWidth-default) solid var(--borderColor-draft-emphasis);
1190
1190
  --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
1191
1191
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
1192
1192
  --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
@@ -2170,26 +2170,26 @@
2170
2170
  --bgColor-upsell-emphasis: var(--bgColor-done-emphasis); /** Strong background for prominent upsell elements */
2171
2171
  --bgColor-upsell-muted: var(--bgColor-done-muted); /** Subtle background for upsell and promotional content */
2172
2172
  --bgColor-white: var(--base-color-neutral-13); /** Pure white background */
2173
- --border-accent-emphasis: 0.0625rem solid #316dca;
2174
- --border-accent-muted: 0.0625rem solid #4184e466;
2175
- --border-attention-emphasis: 0.0625rem solid #966600;
2176
- --border-attention-muted: 0.0625rem solid #ae7c1466;
2177
- --border-danger-emphasis: 0.0625rem solid #c93c37;
2178
- --border-danger-muted: 0.0625rem solid #e5534b66;
2179
- --border-default: 0.0625rem solid #3d444d;
2180
- --border-disabled: 0.0625rem solid #656c761a;
2181
- --border-done-emphasis: 0.0625rem solid #8256d0;
2182
- --border-done-muted: 0.0625rem solid #986ee266;
2183
- --border-emphasis: 0.0625rem solid #656c76;
2184
- --border-muted: 0.0625rem solid #3d444db3;
2185
- --border-neutral-muted: 0.0625rem solid #3d444db3;
2186
- --border-severe-emphasis: 0.0625rem solid #ae5622;
2187
- --border-severe-muted: 0.0625rem solid #cc6b2c66;
2188
- --border-sponsors-emphasis: 0.0625rem solid #ae4c82;
2189
- --border-sponsors-muted: 0.0625rem solid #c9619866;
2190
- --border-success-emphasis: 0.0625rem solid #347d39;
2191
- --border-success-muted: 0.0625rem solid #46954a66;
2192
- --border-transparent: 0.0625rem solid #00000000;
2173
+ --border-accent-emphasis: var(--borderWidth-default) solid var(--borderColor-accent-emphasis);
2174
+ --border-accent-muted: var(--borderWidth-default) solid var(--borderColor-accent-muted);
2175
+ --border-attention-emphasis: var(--borderWidth-default) solid var(--borderColor-attention-emphasis);
2176
+ --border-attention-muted: var(--borderWidth-default) solid var(--borderColor-attention-muted);
2177
+ --border-danger-emphasis: var(--borderWidth-default) solid var(--borderColor-danger-emphasis);
2178
+ --border-danger-muted: var(--borderWidth-default) solid var(--borderColor-danger-muted);
2179
+ --border-default: var(--borderWidth-default) solid var(--borderColor-default);
2180
+ --border-disabled: var(--borderWidth-default) solid var(--borderColor-disabled);
2181
+ --border-done-emphasis: var(--borderWidth-default) solid var(--borderColor-done-emphasis);
2182
+ --border-done-muted: var(--borderWidth-default) solid var(--borderColor-done-muted);
2183
+ --border-emphasis: var(--borderWidth-default) solid var(--borderColor-emphasis);
2184
+ --border-muted: var(--borderWidth-default) solid var(--borderColor-muted);
2185
+ --border-neutral-muted: var(--borderWidth-default) solid var(--borderColor-neutral-muted);
2186
+ --border-severe-emphasis: var(--borderWidth-default) solid var(--borderColor-severe-emphasis);
2187
+ --border-severe-muted: var(--borderWidth-default) solid var(--borderColor-severe-muted);
2188
+ --border-sponsors-emphasis: var(--borderWidth-default) solid var(--borderColor-sponsors-emphasis);
2189
+ --border-sponsors-muted: var(--borderWidth-default) solid var(--borderColor-sponsors-muted);
2190
+ --border-success-emphasis: var(--borderWidth-default) solid var(--borderColor-success-emphasis);
2191
+ --border-success-muted: var(--borderWidth-default) solid var(--borderColor-success-muted);
2192
+ --border-transparent: var(--borderWidth-default) solid var(--borderColor-transparent);
2193
2193
  --borderColor-closed-emphasis: var(--borderColor-danger-emphasis); /** Strong border for closed state badges */
2194
2194
  --borderColor-closed-muted: var(--borderColor-danger-muted); /** Subtle border for closed state indicators */
2195
2195
  --borderColor-draft-muted: var(--borderColor-neutral-muted); /** Subtle border for draft state indicators */
@@ -2346,13 +2346,13 @@
2346
2346
  --avatar-borderColor: var(--borderColor-translucent);
2347
2347
  --border-closed-emphasis: var(--border-danger-emphasis);
2348
2348
  --border-closed-muted: var(--border-danger-muted);
2349
- --border-draft-muted: 0.0625rem solid #3d444db3;
2350
- --border-neutral-emphasis: 0.0625rem solid #656c76;
2349
+ --border-draft-muted: var(--borderWidth-default) solid var(--borderColor-draft-muted);
2350
+ --border-neutral-emphasis: var(--borderWidth-default) solid var(--borderColor-neutral-emphasis);
2351
2351
  --border-open-emphasis: var(--border-success-emphasis);
2352
2352
  --border-open-muted: var(--border-success-muted);
2353
- --border-translucent: 0.0625rem solid #cdd9e526; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
2354
- --border-upsell-emphasis: 0.0625rem solid #8256d0;
2355
- --border-upsell-muted: 0.0625rem solid #986ee266;
2353
+ --border-translucent: var(--borderWidth-default) solid var(--borderColor-translucent); /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
2354
+ --border-upsell-emphasis: var(--borderWidth-default) solid var(--borderColor-upsell-emphasis);
2355
+ --border-upsell-muted: var(--borderWidth-default) solid var(--borderColor-upsell-muted);
2356
2356
  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
2357
2357
  --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
2358
2358
  --button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
@@ -2380,9 +2380,9 @@
2380
2380
  --controlKnob-bgColor-disabled: var(--control-bgColor-disabled);
2381
2381
  --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
2382
2382
  --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
2383
- --focus-outline: 0.125rem solid #316dca; /** Focus ring outline for keyboard navigation and accessibility. */
2383
+ --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color); /** Focus ring outline for keyboard navigation and accessibility. */
2384
2384
  --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
2385
- --border-draft-emphasis: 0.0625rem solid #656c76;
2385
+ --border-draft-emphasis: var(--borderWidth-default) solid var(--borderColor-draft-emphasis);
2386
2386
  --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
2387
2387
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
2388
2388
  --button-primary-borderColor-active: var(--button-primary-borderColor-rest);