@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/light.css CHANGED
@@ -947,25 +947,25 @@
947
947
  --bgColor-upsell-emphasis: var(--bgColor-done-emphasis); /** Strong background for prominent upsell elements */
948
948
  --bgColor-upsell-muted: var(--bgColor-done-muted); /** Subtle background for upsell and promotional content */
949
949
  --bgColor-white: var(--base-color-neutral-0); /** Pure white background */
950
- --border-accent-emphasis: 0.0625rem solid #0969da;
951
- --border-accent-muted: 0.0625rem solid #54aeff66;
952
- --border-attention-emphasis: 0.0625rem solid #9a6700;
953
- --border-attention-muted: 0.0625rem solid #d4a72c66;
954
- --border-danger-emphasis: 0.0625rem solid #cf222e;
955
- --border-danger-muted: 0.0625rem solid #ff818266;
956
- --border-default: 0.0625rem solid #d1d9e0;
957
- --border-disabled: 0.0625rem solid #818b981a;
958
- --border-done-emphasis: 0.0625rem solid #8250df;
959
- --border-done-muted: 0.0625rem solid #c297ff66;
960
- --border-emphasis: 0.0625rem solid #818b98;
961
- --border-neutral-emphasis: 0.0625rem solid #59636e;
962
- --border-severe-emphasis: 0.0625rem solid #bc4c00;
963
- --border-severe-muted: 0.0625rem solid #fb8f4466;
964
- --border-sponsors-emphasis: 0.0625rem solid #bf3989;
965
- --border-sponsors-muted: 0.0625rem solid #ff80c866;
966
- --border-success-emphasis: 0.0625rem solid #1a7f37;
967
- --border-success-muted: 0.0625rem solid #4ac26b66;
968
- --border-transparent: 0.0625rem solid #ffffff00;
950
+ --border-accent-emphasis: var(--borderWidth-default) solid var(--borderColor-accent-emphasis);
951
+ --border-accent-muted: var(--borderWidth-default) solid var(--borderColor-accent-muted);
952
+ --border-attention-emphasis: var(--borderWidth-default) solid var(--borderColor-attention-emphasis);
953
+ --border-attention-muted: var(--borderWidth-default) solid var(--borderColor-attention-muted);
954
+ --border-danger-emphasis: var(--borderWidth-default) solid var(--borderColor-danger-emphasis);
955
+ --border-danger-muted: var(--borderWidth-default) solid var(--borderColor-danger-muted);
956
+ --border-default: var(--borderWidth-default) solid var(--borderColor-default);
957
+ --border-disabled: var(--borderWidth-default) solid var(--borderColor-disabled);
958
+ --border-done-emphasis: var(--borderWidth-default) solid var(--borderColor-done-emphasis);
959
+ --border-done-muted: var(--borderWidth-default) solid var(--borderColor-done-muted);
960
+ --border-emphasis: var(--borderWidth-default) solid var(--borderColor-emphasis);
961
+ --border-neutral-emphasis: var(--borderWidth-default) solid var(--borderColor-neutral-emphasis);
962
+ --border-severe-emphasis: var(--borderWidth-default) solid var(--borderColor-severe-emphasis);
963
+ --border-severe-muted: var(--borderWidth-default) solid var(--borderColor-severe-muted);
964
+ --border-sponsors-emphasis: var(--borderWidth-default) solid var(--borderColor-sponsors-emphasis);
965
+ --border-sponsors-muted: var(--borderWidth-default) solid var(--borderColor-sponsors-muted);
966
+ --border-success-emphasis: var(--borderWidth-default) solid var(--borderColor-success-emphasis);
967
+ --border-success-muted: var(--borderWidth-default) solid var(--borderColor-success-muted);
968
+ --border-transparent: var(--borderWidth-default) solid var(--borderColor-transparent);
969
969
  --borderColor-closed-emphasis: var(--borderColor-danger-emphasis); /** Strong border for closed state badges */
970
970
  --borderColor-closed-muted: var(--borderColor-danger-muted); /** Subtle border for closed state indicators */
971
971
  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
@@ -1105,13 +1105,13 @@
1105
1105
  --avatar-borderColor: var(--borderColor-translucent);
1106
1106
  --border-closed-emphasis: var(--border-danger-emphasis);
1107
1107
  --border-closed-muted: var(--border-danger-muted);
1108
- --border-draft-emphasis: 0.0625rem solid #59636e;
1109
- --border-muted: 0.0625rem solid #d1d9e0b3;
1108
+ --border-draft-emphasis: var(--borderWidth-default) solid var(--borderColor-draft-emphasis);
1109
+ --border-muted: var(--borderWidth-default) solid var(--borderColor-muted);
1110
1110
  --border-open-emphasis: var(--border-success-emphasis);
1111
1111
  --border-open-muted: var(--border-success-muted);
1112
- --border-translucent: 0.0625rem solid #1f232826; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
1113
- --border-upsell-emphasis: 0.0625rem solid #8250df;
1114
- --border-upsell-muted: 0.0625rem solid #c297ff66;
1112
+ --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. */
1113
+ --border-upsell-emphasis: var(--borderWidth-default) solid var(--borderColor-upsell-emphasis);
1114
+ --border-upsell-muted: var(--borderWidth-default) solid var(--borderColor-upsell-muted);
1115
1115
  --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
1116
1116
  --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
1117
1117
  --button-danger-borderColor-rest: var(--control-borderColor-rest);
@@ -1169,13 +1169,13 @@
1169
1169
  --diffBlob-deletionWord-fgColor: var(--fgColor-default);
1170
1170
  --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
1171
1171
  --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
1172
- --focus-outline: 0.125rem solid #0969da; /** Focus ring outline for keyboard navigation and accessibility. */
1172
+ --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color); /** Focus ring outline for keyboard navigation and accessibility. */
1173
1173
  --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
1174
1174
  --overlay-borderColor: #d1d9e080;
1175
1175
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
1176
1176
  --tooltip-fgColor: var(--fgColor-onEmphasis);
1177
1177
  --underlineNav-borderColor-hover: var(--borderColor-muted);
1178
- --border-neutral-muted: 0.0625rem solid #d1d9e0b3;
1178
+ --border-neutral-muted: var(--borderWidth-default) solid var(--borderColor-neutral-muted);
1179
1179
  --borderColor-draft-muted: var(--borderColor-neutral-muted); /** Subtle border for draft state indicators */
1180
1180
  --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
1181
1181
  --button-default-borderColor-hover: var(--button-default-borderColor-rest);
@@ -1189,7 +1189,7 @@
1189
1189
  --shadow-floating-medium: 0 0 0 1px #d1d9e000, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14; /** Medium floating shadow for popovers and action menus */
1190
1190
  --shadow-floating-small: 0 0 0 1px #d1d9e040, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
1191
1191
  --shadow-floating-xlarge: 0 0 0 1px #d1d9e000, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
1192
- --border-draft-muted: 0.0625rem solid #d1d9e0b3;
1192
+ --border-draft-muted: var(--borderWidth-default) solid var(--borderColor-draft-muted);
1193
1193
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
1194
1194
  --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
1195
1195
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
@@ -2143,25 +2143,25 @@
2143
2143
  --bgColor-upsell-emphasis: var(--bgColor-done-emphasis); /** Strong background for prominent upsell elements */
2144
2144
  --bgColor-upsell-muted: var(--bgColor-done-muted); /** Subtle background for upsell and promotional content */
2145
2145
  --bgColor-white: var(--base-color-neutral-0); /** Pure white background */
2146
- --border-accent-emphasis: 0.0625rem solid #0969da;
2147
- --border-accent-muted: 0.0625rem solid #54aeff66;
2148
- --border-attention-emphasis: 0.0625rem solid #9a6700;
2149
- --border-attention-muted: 0.0625rem solid #d4a72c66;
2150
- --border-danger-emphasis: 0.0625rem solid #cf222e;
2151
- --border-danger-muted: 0.0625rem solid #ff818266;
2152
- --border-default: 0.0625rem solid #d1d9e0;
2153
- --border-disabled: 0.0625rem solid #818b981a;
2154
- --border-done-emphasis: 0.0625rem solid #8250df;
2155
- --border-done-muted: 0.0625rem solid #c297ff66;
2156
- --border-emphasis: 0.0625rem solid #818b98;
2157
- --border-neutral-emphasis: 0.0625rem solid #59636e;
2158
- --border-severe-emphasis: 0.0625rem solid #bc4c00;
2159
- --border-severe-muted: 0.0625rem solid #fb8f4466;
2160
- --border-sponsors-emphasis: 0.0625rem solid #bf3989;
2161
- --border-sponsors-muted: 0.0625rem solid #ff80c866;
2162
- --border-success-emphasis: 0.0625rem solid #1a7f37;
2163
- --border-success-muted: 0.0625rem solid #4ac26b66;
2164
- --border-transparent: 0.0625rem solid #ffffff00;
2146
+ --border-accent-emphasis: var(--borderWidth-default) solid var(--borderColor-accent-emphasis);
2147
+ --border-accent-muted: var(--borderWidth-default) solid var(--borderColor-accent-muted);
2148
+ --border-attention-emphasis: var(--borderWidth-default) solid var(--borderColor-attention-emphasis);
2149
+ --border-attention-muted: var(--borderWidth-default) solid var(--borderColor-attention-muted);
2150
+ --border-danger-emphasis: var(--borderWidth-default) solid var(--borderColor-danger-emphasis);
2151
+ --border-danger-muted: var(--borderWidth-default) solid var(--borderColor-danger-muted);
2152
+ --border-default: var(--borderWidth-default) solid var(--borderColor-default);
2153
+ --border-disabled: var(--borderWidth-default) solid var(--borderColor-disabled);
2154
+ --border-done-emphasis: var(--borderWidth-default) solid var(--borderColor-done-emphasis);
2155
+ --border-done-muted: var(--borderWidth-default) solid var(--borderColor-done-muted);
2156
+ --border-emphasis: var(--borderWidth-default) solid var(--borderColor-emphasis);
2157
+ --border-neutral-emphasis: var(--borderWidth-default) solid var(--borderColor-neutral-emphasis);
2158
+ --border-severe-emphasis: var(--borderWidth-default) solid var(--borderColor-severe-emphasis);
2159
+ --border-severe-muted: var(--borderWidth-default) solid var(--borderColor-severe-muted);
2160
+ --border-sponsors-emphasis: var(--borderWidth-default) solid var(--borderColor-sponsors-emphasis);
2161
+ --border-sponsors-muted: var(--borderWidth-default) solid var(--borderColor-sponsors-muted);
2162
+ --border-success-emphasis: var(--borderWidth-default) solid var(--borderColor-success-emphasis);
2163
+ --border-success-muted: var(--borderWidth-default) solid var(--borderColor-success-muted);
2164
+ --border-transparent: var(--borderWidth-default) solid var(--borderColor-transparent);
2165
2165
  --borderColor-closed-emphasis: var(--borderColor-danger-emphasis); /** Strong border for closed state badges */
2166
2166
  --borderColor-closed-muted: var(--borderColor-danger-muted); /** Subtle border for closed state indicators */
2167
2167
  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
@@ -2301,13 +2301,13 @@
2301
2301
  --avatar-borderColor: var(--borderColor-translucent);
2302
2302
  --border-closed-emphasis: var(--border-danger-emphasis);
2303
2303
  --border-closed-muted: var(--border-danger-muted);
2304
- --border-draft-emphasis: 0.0625rem solid #59636e;
2305
- --border-muted: 0.0625rem solid #d1d9e0b3;
2304
+ --border-draft-emphasis: var(--borderWidth-default) solid var(--borderColor-draft-emphasis);
2305
+ --border-muted: var(--borderWidth-default) solid var(--borderColor-muted);
2306
2306
  --border-open-emphasis: var(--border-success-emphasis);
2307
2307
  --border-open-muted: var(--border-success-muted);
2308
- --border-translucent: 0.0625rem solid #1f232826; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
2309
- --border-upsell-emphasis: 0.0625rem solid #8250df;
2310
- --border-upsell-muted: 0.0625rem solid #c297ff66;
2308
+ --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. */
2309
+ --border-upsell-emphasis: var(--borderWidth-default) solid var(--borderColor-upsell-emphasis);
2310
+ --border-upsell-muted: var(--borderWidth-default) solid var(--borderColor-upsell-muted);
2311
2311
  --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
2312
2312
  --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
2313
2313
  --button-danger-borderColor-rest: var(--control-borderColor-rest);
@@ -2365,13 +2365,13 @@
2365
2365
  --diffBlob-deletionWord-fgColor: var(--fgColor-default);
2366
2366
  --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
2367
2367
  --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
2368
- --focus-outline: 0.125rem solid #0969da; /** Focus ring outline for keyboard navigation and accessibility. */
2368
+ --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color); /** Focus ring outline for keyboard navigation and accessibility. */
2369
2369
  --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
2370
2370
  --overlay-borderColor: #d1d9e080;
2371
2371
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
2372
2372
  --tooltip-fgColor: var(--fgColor-onEmphasis);
2373
2373
  --underlineNav-borderColor-hover: var(--borderColor-muted);
2374
- --border-neutral-muted: 0.0625rem solid #d1d9e0b3;
2374
+ --border-neutral-muted: var(--borderWidth-default) solid var(--borderColor-neutral-muted);
2375
2375
  --borderColor-draft-muted: var(--borderColor-neutral-muted); /** Subtle border for draft state indicators */
2376
2376
  --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
2377
2377
  --button-default-borderColor-hover: var(--button-default-borderColor-rest);
@@ -2385,7 +2385,7 @@
2385
2385
  --shadow-floating-medium: 0 0 0 1px #d1d9e000, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14; /** Medium floating shadow for popovers and action menus */
2386
2386
  --shadow-floating-small: 0 0 0 1px #d1d9e040, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
2387
2387
  --shadow-floating-xlarge: 0 0 0 1px #d1d9e000, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
2388
- --border-draft-muted: 0.0625rem solid #d1d9e0b3;
2388
+ --border-draft-muted: var(--borderWidth-default) solid var(--borderColor-draft-muted);
2389
2389
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
2390
2390
  --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
2391
2391
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/primitives",
3
- "version": "11.7.0",
3
+ "version": "11.7.1-rc.97abd424",
4
4
  "description": "Typography, spacing, and color primitives for Primer design system",
5
5
  "type": "module",
6
6
  "files": [
@@ -25,27 +25,28 @@
25
25
  },
26
26
  "homepage": "https://github.com/primer/primitives#readme",
27
27
  "scripts": {
28
- "build": "npm run clean && npm run build:tokens && npm run build:fallbacks && npm run build:figma && npm run build:config && npm run build:llm",
29
- "build:tokens": "tsx ./scripts/buildTokens.ts",
30
- "build:fallbacks": "tsx ./scripts/buildFallbacks.ts",
28
+ "build": "npm run build:tokens && npm run build:fallbacks && npm run build:figma && npm run build:types && npm run build:llm",
29
+ "build:tokens": "tsx scripts/buildTokens.ts",
30
+ "build:fallbacks": "tsx scripts/buildFallbacks.ts",
31
31
  "build:figma": "tsx scripts/buildFigma.ts",
32
- "build:config": "tsc -p build.tsconfig.jsonc && tsx ./scripts/copyDir.ts src/types dist/build/types",
33
- "build:llm": "tsx ./scripts/buildLlm.ts",
32
+ "build:types": "tsc -p build.tsconfig.jsonc && tsx scripts/copyDir.ts src/types dist/build/types",
33
+ "build:llm": "tsx scripts/buildLlm.ts",
34
+ "check": "npm run lint && npm run format:check && npm run test && npm run build",
35
+ "check:contrast": "tsx scripts/colorContrast.ts",
34
36
  "clean": "rm -rf dist",
35
- "validate:contrast": "tsx scripts/colorContrast.ts",
36
- "format": "prettier --check '**/*.{js,jsx,ts,tsx,md,mdx,css}'",
37
- "format:fix": "prettier --write '**/*.{js,jsx,ts,tsx,md,mdx,css}'",
38
- "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --config eslint.config.mjs && npm run lint:tokens",
37
+ "format": "prettier --write '**/*.{js,jsx,ts,tsx,md,mdx,css}'",
38
+ "format:check": "prettier --check '**/*.{js,jsx,ts,tsx,md,mdx,css}'",
39
+ "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0 --config eslint.config.mjs && npm run lint:tokens",
39
40
  "lint:fix": "eslint '**/*.{js,ts,tsx,md,mdx}' --fix --max-warnings=0 --config eslint.config.mjs",
40
- "lint:tokens": "tsx ./scripts/validateTokenJson.ts",
41
+ "lint:tokens": "tsx scripts/validateTokenJson.ts",
41
42
  "test": "npm run test:unit && npm run test:integration",
42
43
  "test:unit": "vitest run --coverage",
43
44
  "test:integration": "vitest run -r integration",
44
45
  "prebuild": "rm -rf dist",
45
46
  "prepack": "npm run build",
46
47
  "release": "changeset publish",
47
- "install:storybook": "cd docs/storybook && npm ci --legacy-peer-deps --no-audit --no-fund",
48
- "start:storybook": "npm run build:tokens && cd docs/storybook && npm run storybook"
48
+ "storybook": "npm run build:tokens && cd docs/storybook && npm run storybook",
49
+ "storybook:install": "cd docs/storybook && npm ci --legacy-peer-deps --no-audit --no-fund"
49
50
  },
50
51
  "prettier": "@github/prettier-config",
51
52
  "devDependencies": {
@@ -81,4 +82,4 @@
81
82
  "zod-validation-error": "^4.0.1",
82
83
  "colorjs.io": "^0.6.1"
83
84
  }
84
- }
85
+ }