@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.
- package/dist/build/transformers/colorToHex.js +3 -3
- package/dist/build/transformers/colorToRgbAlpha.js +2 -2
- package/dist/build/transformers/shadowToCss.js +2 -2
- package/dist/build/transformers/utilities/alpha.d.ts +2 -2
- package/dist/build/transformers/utilities/alpha.js +3 -3
- package/dist/build/utilities/log.d.ts +6 -0
- package/dist/build/utilities/log.js +34 -0
- package/dist/docs/functional/themes/dark-colorblind.json +324 -26
- package/dist/docs/functional/themes/dark-dimmed.json +391 -27
- package/dist/docs/functional/themes/dark-high-contrast.json +377 -27
- package/dist/docs/functional/themes/dark-tritanopia.json +525 -37
- package/dist/docs/functional/themes/dark.json +324 -26
- package/dist/docs/functional/themes/light-colorblind.json +318 -22
- package/dist/docs/functional/themes/light-high-contrast.json +374 -24
- package/dist/docs/functional/themes/light-tritanopia.json +599 -29
- package/dist/docs/functional/themes/light.json +318 -22
- package/dist/figma/themes/dark-colorblind.json +255 -254
- package/dist/figma/themes/dark-dimmed.json +255 -173
- package/dist/figma/themes/dark-high-contrast.json +254 -187
- package/dist/figma/themes/dark-tritanopia.json +340 -257
- package/dist/figma/themes/dark.json +255 -254
- package/dist/figma/themes/light-colorblind.json +249 -249
- package/dist/figma/themes/light-high-contrast.json +238 -172
- package/dist/figma/themes/light-tritanopia.json +332 -252
- package/dist/figma/themes/light.json +273 -273
- package/dist/styleLint/functional/themes/dark-colorblind.json +324 -26
- package/dist/styleLint/functional/themes/dark-dimmed.json +391 -27
- package/dist/styleLint/functional/themes/dark-high-contrast.json +377 -27
- package/dist/styleLint/functional/themes/dark-tritanopia.json +525 -37
- package/dist/styleLint/functional/themes/dark.json +324 -26
- package/dist/styleLint/functional/themes/light-colorblind.json +318 -22
- package/dist/styleLint/functional/themes/light-high-contrast.json +374 -24
- package/dist/styleLint/functional/themes/light-tritanopia.json +599 -29
- package/dist/styleLint/functional/themes/light.json +318 -22
- package/package.json +1 -1
- package/src/tokens/component/diffBlob.json5 +19 -0
- package/src/tokens/component/header.json5 +65 -0
- package/src/tokens/component/headerSerach.json5 +32 -0
- package/src/tokens/component/overlay.json5 +68 -0
- package/src/tokens/component/page.json5 +20 -0
- package/src/tokens/component/reactionButton.json5 +78 -0
- package/src/tokens/component/skeletonLoader.json5 +29 -0
- package/src/tokens/component/timelineBadge.json5 +19 -0
- package/src/tokens/functional/color/dark/app-dark.json5 +0 -97
- package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +0 -35
- package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +0 -32
- package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +0 -37
- package/src/tokens/functional/color/dark/patterns-dark.json5 +0 -194
- package/src/tokens/functional/color/light/app-light.json5 +0 -91
- package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +0 -31
- package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +0 -71
- package/src/tokens/functional/color/light/patterns-light.json5 +1 -192
- package/dist/figma/figma.json +0 -133
- package/dist/figma/shadows/dark-colorblind.json +0 -1152
- package/dist/figma/shadows/dark-dimmed.json +0 -1152
- package/dist/figma/shadows/dark-high-contrast.json +0 -1152
- package/dist/figma/shadows/dark-tritanopia.json +0 -1152
- package/dist/figma/shadows/dark.json +0 -1152
- package/dist/figma/shadows/light-colorblind.json +0 -1052
- package/dist/figma/shadows/light-high-contrast.json +0 -1052
- package/dist/figma/shadows/light-tritanopia.json +0 -1052
- 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
|
-
|
|
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
|
+
};
|