@primer/primitives 10.2.0 → 10.3.0-rc.37645a3a

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 (95) hide show
  1. package/dist/build/formats/cssCustomMedia.js +2 -2
  2. package/dist/build/formats/jsonOneDimensional.js +2 -1
  3. package/dist/build/platforms/css.js +5 -2
  4. package/dist/build/platforms/figma.js +2 -2
  5. package/dist/build/preprocessors/themeOverrides.js +7 -4
  6. package/dist/build/schemas/collections.d.ts +1 -1
  7. package/dist/build/schemas/colorToken.d.ts +471 -65
  8. package/dist/build/schemas/colorToken.js +18 -15
  9. package/dist/build/schemas/shadowToken.js +2 -2
  10. package/dist/build/transformers/colorAlphaToCss.d.ts +1 -1
  11. package/dist/build/transformers/figmaAttributes.js +2 -1
  12. package/dist/build/types/styleDictionaryConfigGenerator.d.ts +1 -1
  13. package/dist/build/utilities/asArray.d.ts +1 -0
  14. package/dist/build/utilities/asArray.js +1 -0
  15. package/dist/css/functional/size/border.css +5 -5
  16. package/dist/css/functional/size/size.css +15 -15
  17. package/dist/css/functional/size/viewport.css +2 -2
  18. package/dist/css/functional/themes/dark-colorblind.css +408 -408
  19. package/dist/css/functional/themes/dark-dimmed.css +390 -390
  20. package/dist/css/functional/themes/dark-high-contrast.css +412 -412
  21. package/dist/css/functional/themes/dark-tritanopia.css +406 -406
  22. package/dist/css/functional/themes/dark.css +416 -416
  23. package/dist/css/functional/themes/light-colorblind.css +444 -444
  24. package/dist/css/functional/themes/light-high-contrast.css +438 -438
  25. package/dist/css/functional/themes/light-tritanopia.css +432 -432
  26. package/dist/css/functional/themes/light.css +444 -444
  27. package/dist/css/primitives.css +20 -20
  28. package/dist/docs/base/motion/motion.json +88 -73
  29. package/dist/docs/base/size/size.json +94 -75
  30. package/dist/docs/base/typography/typography.json +14 -10
  31. package/dist/docs/functional/motion/motion.json +19 -15
  32. package/dist/docs/functional/size/border.json +139 -125
  33. package/dist/docs/functional/size/breakpoints.json +31 -25
  34. package/dist/docs/functional/size/size-coarse.json +13 -10
  35. package/dist/docs/functional/size/size-fine.json +9 -6
  36. package/dist/docs/functional/size/size.json +499 -433
  37. package/dist/docs/functional/size/viewport.json +32 -26
  38. package/dist/docs/functional/themes/dark-colorblind.json +7175 -6545
  39. package/dist/docs/functional/themes/dark-dimmed.json +7181 -6473
  40. package/dist/docs/functional/themes/dark-high-contrast.json +7445 -6789
  41. package/dist/docs/functional/themes/dark-tritanopia.json +7164 -6498
  42. package/dist/docs/functional/themes/dark.json +7202 -6494
  43. package/dist/docs/functional/themes/light-colorblind.json +7096 -6466
  44. package/dist/docs/functional/themes/light-high-contrast.json +7326 -6660
  45. package/dist/docs/functional/themes/light-tritanopia.json +7109 -6479
  46. package/dist/docs/functional/themes/light.json +7159 -6451
  47. package/dist/docs/functional/typography/typography.json +518 -472
  48. package/dist/figma/figma.json +3 -3
  49. package/dist/figma/shadows/dark-colorblind.json +115 -115
  50. package/dist/figma/shadows/light-colorblind.json +105 -105
  51. package/dist/figma/themes/dark-colorblind.json +5553 -5553
  52. package/dist/figma/themes/dark-dimmed.json +5162 -5162
  53. package/dist/figma/themes/dark-high-contrast.json +4196 -4196
  54. package/dist/figma/themes/dark-tritanopia.json +5211 -5211
  55. package/dist/figma/themes/dark.json +5537 -5537
  56. package/dist/figma/themes/light-colorblind.json +5501 -5501
  57. package/dist/figma/themes/light-high-contrast.json +4176 -4176
  58. package/dist/figma/themes/light-tritanopia.json +5077 -5077
  59. package/dist/figma/themes/light.json +1950 -1950
  60. package/dist/internalCss/dark-colorblind.css +1148 -1148
  61. package/dist/internalCss/dark-dimmed.css +1138 -1138
  62. package/dist/internalCss/dark-high-contrast.css +1154 -1154
  63. package/dist/internalCss/dark-tritanopia.css +1148 -1148
  64. package/dist/internalCss/dark.css +1150 -1150
  65. package/dist/internalCss/light-colorblind.css +1152 -1152
  66. package/dist/internalCss/light-high-contrast.css +1166 -1166
  67. package/dist/internalCss/light-tritanopia.css +1156 -1156
  68. package/dist/internalCss/light.css +1158 -1158
  69. package/dist/styleLint/base/motion/motion.json +97 -82
  70. package/dist/styleLint/base/size/size.json +102 -83
  71. package/dist/styleLint/base/typography/typography.json +16 -12
  72. package/dist/styleLint/functional/motion/motion.json +22 -18
  73. package/dist/styleLint/functional/size/border.json +140 -126
  74. package/dist/styleLint/functional/size/breakpoints.json +32 -26
  75. package/dist/styleLint/functional/size/size-coarse.json +14 -11
  76. package/dist/styleLint/functional/size/size-fine.json +10 -7
  77. package/dist/styleLint/functional/size/size.json +486 -420
  78. package/dist/styleLint/functional/size/viewport.json +36 -30
  79. package/dist/styleLint/functional/themes/dark-colorblind.json +6927 -6297
  80. package/dist/styleLint/functional/themes/dark-dimmed.json +7372 -6664
  81. package/dist/styleLint/functional/themes/dark-high-contrast.json +7472 -6816
  82. package/dist/styleLint/functional/themes/dark-tritanopia.json +7051 -6385
  83. package/dist/styleLint/functional/themes/dark.json +7180 -6472
  84. package/dist/styleLint/functional/themes/light-colorblind.json +7042 -6412
  85. package/dist/styleLint/functional/themes/light-high-contrast.json +7418 -6752
  86. package/dist/styleLint/functional/themes/light-tritanopia.json +6926 -6296
  87. package/dist/styleLint/functional/themes/light.json +7093 -6385
  88. package/dist/styleLint/functional/typography/typography.json +520 -474
  89. package/package.json +2 -2
  90. package/src/tokens/component/diffBlob.json5 +293 -0
  91. package/src/tokens/component/highlight.json5 +23 -0
  92. package/src/tokens/functional/color/dark/app-dark.json5 +0 -302
  93. package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +5 -5
  94. package/src/tokens/functional/color/light/app-light.json5 +1 -274
  95. package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +5 -5
@@ -1,3 +1,4 @@
1
+ import { asArray } from '../utilities/asArray.js';
1
2
  const figmaScopes = {
2
3
  all: ['ALL_SCOPES'],
3
4
  radius: ['CORNER_RADIUS'],
@@ -45,7 +46,7 @@ export const figmaAttributes = {
45
46
  var _a, _b;
46
47
  const { modeOverride, collection, scopes, group, codeSyntax } = ((_a = token.$extensions) === null || _a === void 0 ? void 0 : _a['org.primer.figma']) || {};
47
48
  return {
48
- mode: ((_b = platform.options) === null || _b === void 0 ? void 0 : _b.theme) || modeOverride || 'default',
49
+ mode: asArray((_b = platform.options) === null || _b === void 0 ? void 0 : _b.theme)[0] || modeOverride || 'default',
49
50
  collection,
50
51
  group: group || collection,
51
52
  scopes: getScopes(scopes),
@@ -4,7 +4,7 @@ export type ConfigGeneratorOptions = {
4
4
  buildPath: string
5
5
  prefix?: string
6
6
  themed?: boolean
7
- theme?: string
7
+ theme?: string | [string | undefined, string | undefined]
8
8
  }
9
9
 
10
10
  export type StyleDictionaryConfigGenerator = (
@@ -0,0 +1 @@
1
+ export declare const asArray: (item: unknown) => any[];
@@ -0,0 +1 @@
1
+ export const asArray = (item) => (Array.isArray(item) ? item : [item]).filter(Boolean);
@@ -1,16 +1,16 @@
1
1
  :root {
2
- --borderRadius-default: 0.375rem;
3
2
  --borderRadius-full: 624.9375rem; /* Use this border radius for pill shaped elements */
4
3
  --borderRadius-large: 0.75rem;
5
4
  --borderRadius-medium: 0.375rem;
6
5
  --borderRadius-small: 0.1875rem;
7
- --borderWidth-default: 0.0625rem;
8
6
  --borderWidth-thick: 0.125rem;
9
7
  --borderWidth-thicker: 0.25rem;
10
8
  --borderWidth-thin: 0.0625rem;
11
- --boxShadow-thick: inset 0 0 0 0.125rem;
12
- --boxShadow-thicker: inset 0 0 0 0.25rem;
13
- --boxShadow-thin: inset 0 0 0 0.0625rem; /* Thin shadow for borders */
14
9
  --outline-focus-offset: -0.125rem;
15
10
  --outline-focus-width: 0.125rem;
11
+ --borderRadius-default: var(--borderRadius-medium);
12
+ --borderWidth-default: var(--borderWidth-thin);
13
+ --boxShadow-thick: inset 0 0 0 var(--borderWidth-thick);
14
+ --boxShadow-thicker: inset 0 0 0 var(--borderWidth-thicker);
15
+ --boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /* Thin shadow for borders */
16
16
  }
@@ -1,13 +1,26 @@
1
1
  :root {
2
+ --control-large-paddingBlock: 0.625rem;
3
+ --control-medium-paddingBlock: 0.375rem;
4
+ --control-xlarge-paddingBlock: 0.875rem;
5
+ --control-xsmall-paddingBlock: 0.125rem;
6
+ --overlay-height-large: 27rem;
7
+ --overlay-height-medium: 20rem;
8
+ --overlay-height-small: 16rem;
9
+ --overlay-height-xlarge: 37.5rem;
10
+ --overlay-offset: 0.25rem;
11
+ --overlay-width-large: 40rem;
12
+ --overlay-width-medium: 30rem;
13
+ --overlay-width-small: 20rem;
14
+ --overlay-width-xlarge: 60rem;
15
+ --overlay-width-xsmall: 12rem;
16
+ --spinner-strokeWidth-default: 0.125rem;
2
17
  --control-large-gap: 0.5rem;
3
18
  --control-large-lineBoxHeight: 1.25rem;
4
- --control-large-paddingBlock: 0.625rem;
5
19
  --control-large-paddingInline-normal: 0.75rem;
6
20
  --control-large-paddingInline-spacious: 1rem;
7
21
  --control-large-size: 2.5rem;
8
22
  --control-medium-gap: 0.5rem;
9
23
  --control-medium-lineBoxHeight: 1.25rem;
10
- --control-medium-paddingBlock: 0.375rem;
11
24
  --control-medium-paddingInline-condensed: 0.5rem;
12
25
  --control-medium-paddingInline-normal: 0.75rem;
13
26
  --control-medium-paddingInline-spacious: 1rem;
@@ -22,13 +35,11 @@
22
35
  --control-small-size: 1.75rem;
23
36
  --control-xlarge-gap: 0.5rem;
24
37
  --control-xlarge-lineBoxHeight: 1.25rem;
25
- --control-xlarge-paddingBlock: 0.875rem;
26
38
  --control-xlarge-paddingInline-normal: 0.75rem;
27
39
  --control-xlarge-paddingInline-spacious: 1rem;
28
40
  --control-xlarge-size: 3rem;
29
41
  --control-xsmall-gap: 0.25rem;
30
42
  --control-xsmall-lineBoxHeight: 1.25rem;
31
- --control-xsmall-paddingBlock: 0.125rem;
32
43
  --control-xsmall-paddingInline-condensed: 0.25rem;
33
44
  --control-xsmall-paddingInline-normal: 0.5rem;
34
45
  --control-xsmall-paddingInline-spacious: 0.75rem;
@@ -41,24 +52,13 @@
41
52
  --controlStack-small-gap-condensed: 0.5rem;
42
53
  --controlStack-small-gap-spacious: 1rem;
43
54
  --overlay-borderRadius: 0.375rem;
44
- --overlay-height-large: 27rem;
45
- --overlay-height-medium: 20rem;
46
- --overlay-height-small: 16rem;
47
- --overlay-height-xlarge: 37.5rem;
48
- --overlay-offset: 0.25rem;
49
55
  --overlay-padding-condensed: 0.5rem;
50
56
  --overlay-padding-normal: 1rem;
51
57
  --overlay-paddingBlock-condensed: 0.25rem;
52
58
  --overlay-paddingBlock-normal: 0.75rem;
53
- --overlay-width-large: 40rem;
54
- --overlay-width-medium: 30rem;
55
- --overlay-width-small: 20rem;
56
- --overlay-width-xlarge: 60rem;
57
- --overlay-width-xsmall: 12rem;
58
59
  --spinner-size-large: 4rem;
59
60
  --spinner-size-medium: 2rem;
60
61
  --spinner-size-small: 1rem;
61
- --spinner-strokeWidth-default: 0.125rem;
62
62
  --stack-gap-condensed: 0.5rem;
63
63
  --stack-gap-normal: 1rem;
64
64
  --stack-gap-spacious: 1.5rem;
@@ -1,6 +1,6 @@
1
+ @custom-media --viewportRange-landscape (orientation: landscape);
1
2
  @custom-media --viewportRange-narrow (max-width: calc(48rem - 0.02px));
2
3
  @custom-media --viewportRange-narrowLandscape (max-width: calc(63.25rem - 0.02px) and (max-height: calc(34rem - 0.02px)) and (orientation: landscape));
4
+ @custom-media --viewportRange-portrait (orientation: portrait);
3
5
  @custom-media --viewportRange-regular (min-width: 48rem);
4
6
  @custom-media --viewportRange-wide (min-width: 87.5rem);
5
- @custom-media --viewportRange-portrait (orientation: portrait);
6
- @custom-media --viewportRange-landscape (orientation: landscape);