@primer/primitives 7.11.0 → 7.11.1

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 (101) hide show
  1. package/dist/js/colors/dark.d.ts +12 -0
  2. package/dist/js/colors/dark.js +18 -6
  3. package/dist/js/colors/dark_colorblind.d.ts +12 -0
  4. package/dist/js/colors/dark_colorblind.js +18 -6
  5. package/dist/js/colors/dark_dimmed.d.ts +12 -0
  6. package/dist/js/colors/dark_dimmed.js +18 -6
  7. package/dist/js/colors/dark_high_contrast.d.ts +12 -0
  8. package/dist/js/colors/dark_high_contrast.js +19 -7
  9. package/dist/js/colors/dark_tritanopia.d.ts +12 -0
  10. package/dist/js/colors/dark_tritanopia.js +18 -6
  11. package/dist/js/colors/index.d.ts +108 -0
  12. package/dist/js/colors/light.d.ts +12 -0
  13. package/dist/js/colors/light.js +20 -8
  14. package/dist/js/colors/light_colorblind.d.ts +12 -0
  15. package/dist/js/colors/light_colorblind.js +20 -8
  16. package/dist/js/colors/light_high_contrast.d.ts +12 -0
  17. package/dist/js/colors/light_high_contrast.js +21 -9
  18. package/dist/js/colors/light_tritanopia.d.ts +12 -0
  19. package/dist/js/colors/light_tritanopia.js +20 -8
  20. package/dist/js/index.d.ts +108 -0
  21. package/dist/json/colors/dark.json +18 -6
  22. package/dist/json/colors/dark_colorblind.json +18 -6
  23. package/dist/json/colors/dark_dimmed.json +18 -6
  24. package/dist/json/colors/dark_high_contrast.json +19 -7
  25. package/dist/json/colors/dark_tritanopia.json +18 -6
  26. package/dist/json/colors/light.json +20 -8
  27. package/dist/json/colors/light_colorblind.json +20 -8
  28. package/dist/json/colors/light_high_contrast.json +21 -9
  29. package/dist/json/colors/light_tritanopia.json +20 -8
  30. package/dist/scss/colors/_dark.scss +18 -6
  31. package/dist/scss/colors/_dark_colorblind.scss +18 -6
  32. package/dist/scss/colors/_dark_dimmed.scss +18 -6
  33. package/dist/scss/colors/_dark_high_contrast.scss +19 -7
  34. package/dist/scss/colors/_dark_tritanopia.scss +18 -6
  35. package/dist/scss/colors/_light.scss +20 -8
  36. package/dist/scss/colors/_light_colorblind.scss +20 -8
  37. package/dist/scss/colors/_light_high_contrast.scss +21 -9
  38. package/dist/scss/colors/_light_tritanopia.scss +20 -8
  39. package/dist/ts/colors/dark.ts +18 -6
  40. package/dist/ts/colors/dark_colorblind.ts +18 -6
  41. package/dist/ts/colors/dark_dimmed.ts +18 -6
  42. package/dist/ts/colors/dark_high_contrast.ts +19 -7
  43. package/dist/ts/colors/dark_tritanopia.ts +18 -6
  44. package/dist/ts/colors/light.ts +20 -8
  45. package/dist/ts/colors/light_colorblind.ts +20 -8
  46. package/dist/ts/colors/light_high_contrast.ts +21 -9
  47. package/dist/ts/colors/light_tritanopia.ts +20 -8
  48. package/package.json +1 -1
  49. package/tokens-v2-private/css/tokens/base/size/size.css +1 -1
  50. package/tokens-v2-private/css/tokens/base/typography/typography.css +1 -1
  51. package/tokens-v2-private/css/tokens/functional/size/border.css +1 -1
  52. package/tokens-v2-private/css/tokens/functional/size/breakpoints.css +1 -1
  53. package/tokens-v2-private/css/tokens/functional/size/size-coarse.css +1 -1
  54. package/tokens-v2-private/css/tokens/functional/size/size-fine.css +1 -1
  55. package/tokens-v2-private/css/tokens/functional/size/size.css +1 -1
  56. package/tokens-v2-private/css/tokens/functional/typography/typography.css +1 -1
  57. package/tokens-v2-private/js/module/tokens/base/size/size.js +1 -1
  58. package/tokens-v2-private/js/module/tokens/base/typography/typography.js +1 -1
  59. package/tokens-v2-private/js/module/tokens/functional/size/border.js +1 -1
  60. package/tokens-v2-private/js/module/tokens/functional/size/breakpoints.js +1 -1
  61. package/tokens-v2-private/js/module/tokens/functional/size/size-coarse.js +1 -1
  62. package/tokens-v2-private/js/module/tokens/functional/size/size-fine.js +1 -1
  63. package/tokens-v2-private/js/module/tokens/functional/size/size.js +1 -1
  64. package/tokens-v2-private/js/module/tokens/functional/size/viewport.js +1 -1
  65. package/tokens-v2-private/js/module/tokens/functional/typography/typography.js +1 -1
  66. package/tokens-v2-private/js/tokens/base/size/size.js +1 -1
  67. package/tokens-v2-private/js/tokens/base/typography/typography.js +1 -1
  68. package/tokens-v2-private/js/tokens/functional/size/border.js +1 -1
  69. package/tokens-v2-private/js/tokens/functional/size/breakpoints.js +1 -1
  70. package/tokens-v2-private/js/tokens/functional/size/size-coarse.js +1 -1
  71. package/tokens-v2-private/js/tokens/functional/size/size-fine.js +1 -1
  72. package/tokens-v2-private/js/tokens/functional/size/size.js +1 -1
  73. package/tokens-v2-private/js/tokens/functional/size/viewport.js +1 -1
  74. package/tokens-v2-private/js/tokens/functional/typography/typography.js +1 -1
  75. package/tokens-v2-private/scss/tokens/base/size/size.scss +1 -1
  76. package/tokens-v2-private/scss/tokens/base/typography/typography.scss +1 -1
  77. package/tokens-v2-private/scss/tokens/functional/size/border.scss +1 -1
  78. package/tokens-v2-private/scss/tokens/functional/size/breakpoints.scss +1 -1
  79. package/tokens-v2-private/scss/tokens/functional/size/size-coarse.scss +1 -1
  80. package/tokens-v2-private/scss/tokens/functional/size/size-fine.scss +1 -1
  81. package/tokens-v2-private/scss/tokens/functional/size/size.scss +1 -1
  82. package/tokens-v2-private/scss/tokens/functional/size/viewport.scss +1 -1
  83. package/tokens-v2-private/scss/tokens/functional/typography/typography.scss +1 -1
  84. package/tokens-v2-private/ts/tokens/base/size/size.d.ts +1 -1
  85. package/tokens-v2-private/ts/tokens/base/size/size.js +1 -1
  86. package/tokens-v2-private/ts/tokens/base/typography/typography.d.ts +1 -1
  87. package/tokens-v2-private/ts/tokens/base/typography/typography.js +1 -1
  88. package/tokens-v2-private/ts/tokens/functional/size/border.d.ts +1 -1
  89. package/tokens-v2-private/ts/tokens/functional/size/border.js +1 -1
  90. package/tokens-v2-private/ts/tokens/functional/size/breakpoints.d.ts +1 -1
  91. package/tokens-v2-private/ts/tokens/functional/size/breakpoints.js +1 -1
  92. package/tokens-v2-private/ts/tokens/functional/size/size-coarse.d.ts +1 -1
  93. package/tokens-v2-private/ts/tokens/functional/size/size-coarse.js +1 -1
  94. package/tokens-v2-private/ts/tokens/functional/size/size-fine.d.ts +1 -1
  95. package/tokens-v2-private/ts/tokens/functional/size/size-fine.js +1 -1
  96. package/tokens-v2-private/ts/tokens/functional/size/size.d.ts +1 -1
  97. package/tokens-v2-private/ts/tokens/functional/size/size.js +1 -1
  98. package/tokens-v2-private/ts/tokens/functional/size/viewport.d.ts +1 -1
  99. package/tokens-v2-private/ts/tokens/functional/size/viewport.js +1 -1
  100. package/tokens-v2-private/ts/tokens/functional/typography/typography.d.ts +1 -1
  101. package/tokens-v2-private/ts/tokens/functional/typography/typography.js +1 -1
package/dist/js/colors/dark.d.ts CHANGED
@@ -340,23 +340,35 @@ declare const _default: {
340
340
  };
341
341
  switchTrack: {
342
342
  bg: string;
343
+ hoverBg: string;
344
+ activeBg: string;
345
+ disabledBg: string;
346
+ fg: string;
347
+ disabledFg: string;
343
348
  border: string;
344
349
  checked: {
345
350
  bg: string;
346
351
  hoverBg: string;
347
352
  activeBg: string;
353
+ fg: string;
354
+ disabledFg: string;
348
355
  border: string;
349
356
  };
350
357
  };
351
358
  switchKnob: {
359
+ bg: string;
360
+ border: string;
361
+ disabledBg: string;
352
362
  checked: {
353
363
  bg: string;
354
364
  disabledBg: string;
365
+ border: string;
355
366
  };
356
367
  };
357
368
  segmentedControl: {
358
369
  bg: string;
359
370
  button: {
371
+ bg: string;
360
372
  hover: {
361
373
  bg: string;
362
374
  };
package/dist/js/colors/dark.js CHANGED
@@ -341,24 +341,36 @@ exports.default = {
341
341
  }
342
342
  },
343
343
  "switchTrack": {
344
- "bg": "#010409",
345
- "border": "#6e7681",
344
+ "bg": "rgba(110,118,129,0.1)",
345
+ "hoverBg": "hsla(215,8%,72%,0.1)",
346
+ "activeBg": "rgba(110,118,129,0.4)",
347
+ "disabledBg": "#21262d",
348
+ "fg": "#8b949e",
349
+ "disabledFg": "#010409",
350
+ "border": "rgba(0,0,0,0)",
346
351
  "checked": {
347
352
  "bg": "rgba(31,111,235,0.35)",
348
353
  "hoverBg": "rgba(31,111,235,0.5)",
349
354
  "activeBg": "rgba(31,111,235,0.65)",
350
- "border": "#58a6ff"
355
+ "fg": "#ffffff",
356
+ "disabledFg": "#010409",
357
+ "border": "rgba(0,0,0,0)"
351
358
  }
352
359
  },
353
360
  "switchKnob": {
361
+ "bg": "#0d1117",
362
+ "border": "#606771",
363
+ "disabledBg": "#161b22",
354
364
  "checked": {
355
- "bg": "#1f6feb",
356
- "disabledBg": "#484f58"
365
+ "bg": "#0d1117",
366
+ "disabledBg": "#161b22",
367
+ "border": "rgba(31,111,235,0.35)"
357
368
  }
358
369
  },
359
370
  "segmentedControl": {
360
- "bg": "#161b22",
371
+ "bg": "rgba(110,118,129,0.1)",
361
372
  "button": {
373
+ "bg": "#0d1117",
362
374
  "hover": {
363
375
  "bg": "#30363d"
364
376
  },
package/dist/js/colors/dark_colorblind.d.ts CHANGED
@@ -340,23 +340,35 @@ declare const _default: {
340
340
  };
341
341
  switchTrack: {
342
342
  bg: string;
343
+ hoverBg: string;
344
+ activeBg: string;
345
+ disabledBg: string;
346
+ fg: string;
347
+ disabledFg: string;
343
348
  border: string;
344
349
  checked: {
345
350
  bg: string;
346
351
  hoverBg: string;
347
352
  activeBg: string;
353
+ fg: string;
354
+ disabledFg: string;
348
355
  border: string;
349
356
  };
350
357
  };
351
358
  switchKnob: {
359
+ bg: string;
360
+ border: string;
361
+ disabledBg: string;
352
362
  checked: {
353
363
  bg: string;
354
364
  disabledBg: string;
365
+ border: string;
355
366
  };
356
367
  };
357
368
  segmentedControl: {
358
369
  bg: string;
359
370
  button: {
371
+ bg: string;
360
372
  hover: {
361
373
  bg: string;
362
374
  };
package/dist/js/colors/dark_colorblind.js CHANGED
@@ -341,24 +341,36 @@ exports.default = {
341
341
  }
342
342
  },
343
343
  "switchTrack": {
344
- "bg": "#010409",
345
- "border": "#6e7681",
344
+ "bg": "rgba(110,118,129,0.1)",
345
+ "hoverBg": "hsla(215,8%,72%,0.1)",
346
+ "activeBg": "rgba(110,118,129,0.4)",
347
+ "disabledBg": "#21262d",
348
+ "fg": "#8b949e",
349
+ "disabledFg": "#010409",
350
+ "border": "rgba(0,0,0,0)",
346
351
  "checked": {
347
352
  "bg": "rgba(31,111,235,0.35)",
348
353
  "hoverBg": "rgba(31,111,235,0.5)",
349
354
  "activeBg": "rgba(31,111,235,0.65)",
350
- "border": "#58a6ff"
355
+ "fg": "#ffffff",
356
+ "disabledFg": "#010409",
357
+ "border": "rgba(0,0,0,0)"
351
358
  }
352
359
  },
353
360
  "switchKnob": {
361
+ "bg": "#0d1117",
362
+ "border": "#606771",
363
+ "disabledBg": "#161b22",
354
364
  "checked": {
355
- "bg": "#1f6feb",
356
- "disabledBg": "#484f58"
365
+ "bg": "#0d1117",
366
+ "disabledBg": "#161b22",
367
+ "border": "rgba(31,111,235,0.35)"
357
368
  }
358
369
  },
359
370
  "segmentedControl": {
360
- "bg": "#161b22",
371
+ "bg": "rgba(110,118,129,0.1)",
361
372
  "button": {
373
+ "bg": "#0d1117",
362
374
  "hover": {
363
375
  "bg": "#30363d"
364
376
  },
package/dist/js/colors/dark_dimmed.d.ts CHANGED
@@ -340,23 +340,35 @@ declare const _default: {
340
340
  };
341
341
  switchTrack: {
342
342
  bg: string;
343
+ hoverBg: string;
344
+ activeBg: string;
345
+ disabledBg: string;
346
+ fg: string;
347
+ disabledFg: string;
343
348
  border: string;
344
349
  checked: {
345
350
  bg: string;
346
351
  hoverBg: string;
347
352
  activeBg: string;
353
+ fg: string;
354
+ disabledFg: string;
348
355
  border: string;
349
356
  };
350
357
  };
351
358
  switchKnob: {
359
+ bg: string;
360
+ border: string;
361
+ disabledBg: string;
352
362
  checked: {
353
363
  bg: string;
354
364
  disabledBg: string;
365
+ border: string;
355
366
  };
356
367
  };
357
368
  segmentedControl: {
358
369
  bg: string;
359
370
  button: {
371
+ bg: string;
360
372
  hover: {
361
373
  bg: string;
362
374
  };
package/dist/js/colors/dark_dimmed.js CHANGED
@@ -341,24 +341,36 @@ exports.default = {
341
341
  }
342
342
  },
343
343
  "switchTrack": {
344
- "bg": "#1c2128",
345
- "border": "#636e7b",
344
+ "bg": "rgba(99,110,123,0.1)",
345
+ "hoverBg": "hsla(213,11%,69%,0.1)",
346
+ "activeBg": "rgba(99,110,123,0.4)",
347
+ "disabledBg": "#373e47",
348
+ "fg": "#768390",
349
+ "disabledFg": "#1c2128",
350
+ "border": "rgba(0,0,0,0)",
346
351
  "checked": {
347
352
  "bg": "rgba(49,109,202,0.35)",
348
353
  "hoverBg": "rgba(49,109,202,0.5)",
349
354
  "activeBg": "rgba(49,109,202,0.65)",
350
- "border": "#539bf5"
355
+ "fg": "#cdd9e5",
356
+ "disabledFg": "#1c2128",
357
+ "border": "rgba(0,0,0,0)"
351
358
  }
352
359
  },
353
360
  "switchKnob": {
361
+ "bg": "#22272e",
362
+ "border": "#606771",
363
+ "disabledBg": "#2d333b",
354
364
  "checked": {
355
- "bg": "#316dca",
356
- "disabledBg": "#545d68"
365
+ "bg": "#22272e",
366
+ "disabledBg": "#2d333b",
367
+ "border": "rgba(49,109,202,0.35)"
357
368
  }
358
369
  },
359
370
  "segmentedControl": {
360
- "bg": "#2d333b",
371
+ "bg": "rgba(99,110,123,0.1)",
361
372
  "button": {
373
+ "bg": "#22272e",
362
374
  "hover": {
363
375
  "bg": "#444c56"
364
376
  },
package/dist/js/colors/dark_high_contrast.d.ts CHANGED
@@ -340,23 +340,35 @@ declare const _default: {
340
340
  };
341
341
  switchTrack: {
342
342
  bg: string;
343
+ hoverBg: string;
344
+ activeBg: string;
345
+ disabledBg: string;
346
+ fg: string;
347
+ disabledFg: string;
343
348
  border: string;
344
349
  checked: {
345
350
  bg: string;
346
351
  hoverBg: string;
347
352
  activeBg: string;
353
+ fg: string;
354
+ disabledFg: string;
348
355
  border: string;
349
356
  };
350
357
  };
351
358
  switchKnob: {
359
+ bg: string;
360
+ border: string;
361
+ disabledBg: string;
352
362
  checked: {
353
363
  bg: string;
354
364
  disabledBg: string;
365
+ border: string;
355
366
  };
356
367
  };
357
368
  segmentedControl: {
358
369
  bg: string;
359
370
  button: {
371
+ bg: string;
360
372
  hover: {
361
373
  bg: string;
362
374
  };
package/dist/js/colors/dark_high_contrast.js CHANGED
@@ -341,24 +341,36 @@ exports.default = {
341
341
  }
342
342
  },
343
343
  "switchTrack": {
344
- "bg": "#010409",
345
- "border": "#7a828e",
344
+ "bg": "#9ea7b3",
345
+ "hoverBg": "hsla(214,12%,61%,1)",
346
+ "activeBg": "hsla(214,12%,58%,1)",
347
+ "disabledBg": "#272b33",
348
+ "fg": "#0a0c10",
349
+ "disabledFg": "#010409",
350
+ "border": "rgba(0,0,0,0)",
346
351
  "checked": {
347
- "bg": "rgba(64,158,255,0.35)",
352
+ "bg": "#409eff",
348
353
  "hoverBg": "rgba(64,158,255,0.5)",
349
354
  "activeBg": "rgba(64,158,255,0.65)",
350
- "border": "#409eff"
355
+ "fg": "#0a0c10",
356
+ "disabledFg": "#010409",
357
+ "border": "rgba(0,0,0,0)"
351
358
  }
352
359
  },
353
360
  "switchKnob": {
361
+ "bg": "#0a0c10",
362
+ "border": "#9ea7b3",
363
+ "disabledBg": "#272b33",
354
364
  "checked": {
355
- "bg": "#409eff",
356
- "disabledBg": "#7a828e"
365
+ "bg": "#0a0c10",
366
+ "disabledBg": "#272b33",
367
+ "border": "#409eff"
357
368
  }
358
369
  },
359
370
  "segmentedControl": {
360
- "bg": "#272b33",
371
+ "bg": "rgba(158,167,179,0.1)",
361
372
  "button": {
373
+ "bg": "#0a0c10",
362
374
  "hover": {
363
375
  "bg": "#525964"
364
376
  },
package/dist/js/colors/dark_tritanopia.d.ts CHANGED
@@ -340,23 +340,35 @@ declare const _default: {
340
340
  };
341
341
  switchTrack: {
342
342
  bg: string;
343
+ hoverBg: string;
344
+ activeBg: string;
345
+ disabledBg: string;
346
+ fg: string;
347
+ disabledFg: string;
343
348
  border: string;
344
349
  checked: {
345
350
  bg: string;
346
351
  hoverBg: string;
347
352
  activeBg: string;
353
+ fg: string;
354
+ disabledFg: string;
348
355
  border: string;
349
356
  };
350
357
  };
351
358
  switchKnob: {
359
+ bg: string;
360
+ border: string;
361
+ disabledBg: string;
352
362
  checked: {
353
363
  bg: string;
354
364
  disabledBg: string;
365
+ border: string;
355
366
  };
356
367
  };
357
368
  segmentedControl: {
358
369
  bg: string;
359
370
  button: {
371
+ bg: string;
360
372
  hover: {
361
373
  bg: string;
362
374
  };
package/dist/js/colors/dark_tritanopia.js CHANGED
@@ -341,24 +341,36 @@ exports.default = {
341
341
  }
342
342
  },
343
343
  "switchTrack": {
344
- "bg": "#010409",
345
- "border": "#6e7681",
344
+ "bg": "rgba(110,118,129,0.1)",
345
+ "hoverBg": "hsla(215,8%,72%,0.1)",
346
+ "activeBg": "rgba(110,118,129,0.4)",
347
+ "disabledBg": "#21262d",
348
+ "fg": "#8b949e",
349
+ "disabledFg": "#010409",
350
+ "border": "rgba(0,0,0,0)",
346
351
  "checked": {
347
352
  "bg": "rgba(31,111,235,0.35)",
348
353
  "hoverBg": "rgba(31,111,235,0.5)",
349
354
  "activeBg": "rgba(31,111,235,0.65)",
350
- "border": "#58a6ff"
355
+ "fg": "#ffffff",
356
+ "disabledFg": "#010409",
357
+ "border": "rgba(0,0,0,0)"
351
358
  }
352
359
  },
353
360
  "switchKnob": {
361
+ "bg": "#0d1117",
362
+ "border": "#606771",
363
+ "disabledBg": "#161b22",
354
364
  "checked": {
355
- "bg": "#1f6feb",
356
- "disabledBg": "#484f58"
365
+ "bg": "#0d1117",
366
+ "disabledBg": "#161b22",
367
+ "border": "rgba(31,111,235,0.35)"
357
368
  }
358
369
  },
359
370
  "segmentedControl": {
360
- "bg": "#161b22",
371
+ "bg": "rgba(110,118,129,0.1)",
361
372
  "button": {
373
+ "bg": "#0d1117",
362
374
  "hover": {
363
375
  "bg": "#30363d"
364
376
  },