@primer/primitives 10.3.0-rc.fcd52a27 → 10.3.0

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 (62) hide show
  1. package/dist/build/transformers/colorToHex.js +3 -3
  2. package/dist/build/transformers/colorToRgbAlpha.js +2 -2
  3. package/dist/build/transformers/shadowToCss.js +2 -2
  4. package/dist/build/transformers/utilities/alpha.d.ts +2 -2
  5. package/dist/build/transformers/utilities/alpha.js +3 -3
  6. package/dist/build/utilities/log.d.ts +6 -0
  7. package/dist/build/utilities/log.js +34 -0
  8. package/dist/docs/functional/themes/dark-colorblind.json +324 -26
  9. package/dist/docs/functional/themes/dark-dimmed.json +391 -27
  10. package/dist/docs/functional/themes/dark-high-contrast.json +377 -27
  11. package/dist/docs/functional/themes/dark-tritanopia.json +525 -37
  12. package/dist/docs/functional/themes/dark.json +324 -26
  13. package/dist/docs/functional/themes/light-colorblind.json +318 -22
  14. package/dist/docs/functional/themes/light-high-contrast.json +374 -24
  15. package/dist/docs/functional/themes/light-tritanopia.json +599 -29
  16. package/dist/docs/functional/themes/light.json +318 -22
  17. package/dist/figma/themes/dark-colorblind.json +255 -254
  18. package/dist/figma/themes/dark-dimmed.json +255 -173
  19. package/dist/figma/themes/dark-high-contrast.json +254 -187
  20. package/dist/figma/themes/dark-tritanopia.json +340 -257
  21. package/dist/figma/themes/dark.json +255 -254
  22. package/dist/figma/themes/light-colorblind.json +249 -249
  23. package/dist/figma/themes/light-high-contrast.json +238 -172
  24. package/dist/figma/themes/light-tritanopia.json +332 -252
  25. package/dist/figma/themes/light.json +273 -273
  26. package/dist/styleLint/functional/themes/dark-colorblind.json +324 -26
  27. package/dist/styleLint/functional/themes/dark-dimmed.json +391 -27
  28. package/dist/styleLint/functional/themes/dark-high-contrast.json +377 -27
  29. package/dist/styleLint/functional/themes/dark-tritanopia.json +525 -37
  30. package/dist/styleLint/functional/themes/dark.json +324 -26
  31. package/dist/styleLint/functional/themes/light-colorblind.json +318 -22
  32. package/dist/styleLint/functional/themes/light-high-contrast.json +374 -24
  33. package/dist/styleLint/functional/themes/light-tritanopia.json +599 -29
  34. package/dist/styleLint/functional/themes/light.json +318 -22
  35. package/package.json +1 -1
  36. package/src/tokens/component/diffBlob.json5 +19 -0
  37. package/src/tokens/component/header.json5 +65 -0
  38. package/src/tokens/component/headerSerach.json5 +32 -0
  39. package/src/tokens/component/overlay.json5 +68 -0
  40. package/src/tokens/component/page.json5 +20 -0
  41. package/src/tokens/component/reactionButton.json5 +78 -0
  42. package/src/tokens/component/skeletonLoader.json5 +29 -0
  43. package/src/tokens/component/timelineBadge.json5 +19 -0
  44. package/src/tokens/functional/color/dark/app-dark.json5 +0 -97
  45. package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +0 -35
  46. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +0 -32
  47. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +0 -37
  48. package/src/tokens/functional/color/dark/patterns-dark.json5 +0 -194
  49. package/src/tokens/functional/color/light/app-light.json5 +0 -91
  50. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +0 -31
  51. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +0 -71
  52. package/src/tokens/functional/color/light/patterns-light.json5 +1 -192
  53. package/dist/figma/figma.json +0 -133
  54. package/dist/figma/shadows/dark-colorblind.json +0 -1152
  55. package/dist/figma/shadows/dark-dimmed.json +0 -1152
  56. package/dist/figma/shadows/dark-high-contrast.json +0 -1152
  57. package/dist/figma/shadows/dark-tritanopia.json +0 -1152
  58. package/dist/figma/shadows/dark.json +0 -1152
  59. package/dist/figma/shadows/light-colorblind.json +0 -1052
  60. package/dist/figma/shadows/light-high-contrast.json +0 -1052
  61. package/dist/figma/shadows/light-tritanopia.json +0 -1052
  62. package/dist/figma/shadows/light.json +0 -1052
@@ -13,11 +13,11 @@ export const colorToHex = {
13
13
  type: 'value',
14
14
  transitive: true,
15
15
  filter: isColor,
16
- transform: (token) => {
16
+ transform: (token, config) => {
17
17
  const alphaValue = token.alpha;
18
- if (alphaValue === null || alphaValue === undefined) {
18
+ if (alphaValue === null || alphaValue === undefined || alphaValue === 1) {
19
19
  return toHex(getTokenValue(token));
20
20
  }
21
- return toHex(alpha(getTokenValue(token), alphaValue, token));
21
+ return toHex(alpha(getTokenValue(token), alphaValue, token, config));
22
22
  },
23
23
  };
@@ -12,9 +12,9 @@ export const colorToRgbAlpha = {
12
12
  type: 'value',
13
13
  transitive: true,
14
14
  filter: isColorWithAlpha,
15
- transform: (token) => {
15
+ transform: (token, config) => {
16
16
  if (token.alpha === null)
17
17
  return getTokenValue(token);
18
- return alpha(getTokenValue(token), token.alpha, token);
18
+ return alpha(getTokenValue(token), token.alpha, token, config);
19
19
  },
20
20
  };
@@ -14,7 +14,7 @@ export const shadowToCss = {
14
14
  type: 'value',
15
15
  transitive: true,
16
16
  filter: isShadow,
17
- transform: (token) => {
17
+ transform: (token, config) => {
18
18
  // extract value
19
19
  const value = getTokenValue(token);
20
20
  const valueProp = token.$value ? '$value' : 'value';
@@ -27,7 +27,7 @@ export const shadowToCss = {
27
27
  return shadow;
28
28
  checkRequiredTokenProperties(shadow, ['color', 'offsetX', 'offsetY', 'blur', 'spread']);
29
29
  /*css box shadow: inset? | offset-x | offset-y | blur-radius | spread-radius | color */
30
- return `${shadow.inset === true ? 'inset ' : ''}${shadow.offsetX} ${shadow.offsetY} ${shadow.blur} ${shadow.spread} ${toHex(alpha(getTokenValue(Object.assign(Object.assign({}, token), { [valueProp]: shadow }), 'color'), shadow.alpha || 1, token))}`;
30
+ return `${shadow.inset === true ? 'inset ' : ''}${shadow.offsetX} ${shadow.offsetY} ${shadow.blur} ${shadow.spread} ${toHex(alpha(getTokenValue(Object.assign(Object.assign({}, token), { [valueProp]: shadow }), 'color'), shadow.alpha || 1, token, config))}`;
31
31
  })
32
32
  .join(', ');
33
33
  },
@@ -1,4 +1,4 @@
1
- import type { TransformedToken } from 'style-dictionary/types';
1
+ import type { PlatformConfig, TransformedToken } from 'style-dictionary/types';
2
2
  /**
3
3
  * alpha
4
4
  * @description takes a colors string like hex or rgba and returns an rgba color with the specified alpha value
@@ -6,4 +6,4 @@ import type { TransformedToken } from 'style-dictionary/types';
6
6
  * @param desiredAlpha number
7
7
  * @returns rgba value
8
8
  */
9
- export declare const alpha: (color: string, desiredAlpha: number, token?: TransformedToken) => string;
9
+ export declare const alpha: (color: string, desiredAlpha: number, token?: TransformedToken, config?: PlatformConfig) => string;
@@ -1,4 +1,5 @@
1
1
  import { rgba, parseToRgba } from 'color2k';
2
+ import { log } from '../../utilities/log.js';
2
3
  /**
3
4
  * alpha
4
5
  * @description takes a colors string like hex or rgba and returns an rgba color with the specified alpha value
@@ -6,11 +7,10 @@ import { rgba, parseToRgba } from 'color2k';
6
7
  * @param desiredAlpha number
7
8
  * @returns rgba value
8
9
  */
9
- export const alpha = (color, desiredAlpha, token) => {
10
+ export const alpha = (color, desiredAlpha, token, config) => {
10
11
  const [r, g, b, a] = parseToRgba(color);
11
12
  if (a < 1 && desiredAlpha < 1) {
12
- // eslint-disable-next-line no-console
13
- console.warn(`🚨 You are setting an alpha value of "${desiredAlpha}" for a color with an alpha value (${color}). The previous alpha value will be disregarded as if the color would have been 100% opaque.${token !== undefined ? `\n ↳ Token: "${token.name}" in file: "${token.filePath}"` : ''}`);
13
+ log.info(`🚨 You are setting an alpha value of "${desiredAlpha}" for a color with an alpha value (${color}). The previous alpha value will be disregarded as if the color would have been 100% opaque.${token !== undefined ? `\n ↳ Token: "${token.name}" in file: "${token.filePath}"` : ''}`, config);
14
14
  }
15
15
  return rgba(r, g, b, desiredAlpha);
16
16
  };
@@ -0,0 +1,6 @@
1
+ import type { PlatformConfig } from 'style-dictionary/types';
2
+ export declare const log: {
3
+ info: (message: string, config?: PlatformConfig) => void;
4
+ warning: (message: string, config?: PlatformConfig) => void;
5
+ error: (message: string, config?: PlatformConfig) => void;
6
+ };
@@ -0,0 +1,34 @@
1
+ const logMessage = (message, type = 'warning', config) => {
2
+ var _a, _b, _c, _d, _e;
3
+ // early return if verbosity is silent
4
+ if (((_a = config === null || config === void 0 ? void 0 : config.log) === null || _a === void 0 ? void 0 : _a.verbosity) === 'silent' && type !== 'error') {
5
+ return;
6
+ }
7
+ // early return if verbosity is default and type is info
8
+ if (((_b = config === null || config === void 0 ? void 0 : config.log) === null || _b === void 0 ? void 0 : _b.verbosity) === 'default' && type === 'info') {
9
+ return;
10
+ }
11
+ // early return
12
+ if ((((_c = config === null || config === void 0 ? void 0 : config.log) === null || _c === void 0 ? void 0 : _c.warnings) === 'disabled' || ((_d = config === null || config === void 0 ? void 0 : config.log) === null || _d === void 0 ? void 0 : _d.warnings) === 'warn') && type === 'info') {
13
+ return;
14
+ }
15
+ // early return
16
+ if (((_e = config === null || config === void 0 ? void 0 : config.log) === null || _e === void 0 ? void 0 : _e.warnings) === 'disabled' && type === 'warning') {
17
+ return;
18
+ }
19
+ if (type === 'warning') {
20
+ // eslint-disable-next-line no-console
21
+ return console.warn(message);
22
+ }
23
+ if (type === 'error') {
24
+ // eslint-disable-next-line no-console
25
+ return console.error(message);
26
+ }
27
+ // eslint-disable-next-line no-console
28
+ console.log(message);
29
+ };
30
+ export const log = {
31
+ info: (message, config) => logMessage(message, 'info', config),
32
+ warning: (message, config) => logMessage(message, 'warning', config),
33
+ error: (message, config) => logMessage(message, 'error', config),
34
+ };