@atlaskit/tokens 13.0.2 → 13.0.4
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/CHANGELOG.md +18 -0
- package/codemods/css-to-design-tokens/lib/meta.tsx +1 -1
- package/codemods/css-to-design-tokens/lib/tokens.tsx +1 -1
- package/codemods/theme-to-design-tokens/transform.tsx +16 -14
- package/codemods/theme-to-design-tokens/utils/ast-meta.tsx +2 -151
- package/codemods/theme-to-design-tokens/utils/ast.tsx +3 -35
- package/codemods/theme-to-design-tokens/utils/clean-meta.tsx +63 -0
- package/codemods/theme-to-design-tokens/utils/color.tsx +3 -11
- package/codemods/theme-to-design-tokens/utils/contains-replaceable-css-declarations.tsx +13 -0
- package/codemods/theme-to-design-tokens/utils/css-utils.tsx +2 -35
- package/codemods/theme-to-design-tokens/utils/find-end-index-of-css-expression.tsx +21 -0
- package/codemods/theme-to-design-tokens/utils/find-first-nonspace-index-after.tsx +9 -0
- package/codemods/theme-to-design-tokens/utils/get-closest-decendant-of-type.tsx +10 -0
- package/codemods/theme-to-design-tokens/utils/get-meta-from-ancestors.tsx +87 -0
- package/codemods/theme-to-design-tokens/utils/is-bold-color.tsx +4 -0
- package/codemods/theme-to-design-tokens/utils/is-decendant-of-token.tsx +14 -0
- package/codemods/theme-to-design-tokens/utils/is-legacy-color.tsx +4 -0
- package/codemods/theme-to-design-tokens/utils/is-legacy-named-color.tsx +4 -0
- package/codemods/theme-to-design-tokens/utils/is-parent-of-token.tsx +13 -0
- package/codemods/theme-to-design-tokens/utils/kebabize.tsx +2 -0
- package/codemods/theme-to-design-tokens/utils/legacy-color-meta-map.tsx +88 -0
- package/codemods/theme-to-design-tokens/utils/legacy-color-mixins.tsx +26 -0
- package/codemods/theme-to-design-tokens/utils/legacy-colors.tsx +2 -115
- package/codemods/theme-to-design-tokens/utils/split-at-index.tsx +3 -0
- package/codemods/theme-to-design-tokens/utils/string-utils.tsx +3 -16
- package/codemods/utils/active-tokens.tsx +284 -0
- package/codemods/utils/tokens.tsx +2 -376
- package/codemods/utils/unique-words-from-tokens.tsx +91 -0
- package/dist/cjs/artifacts/replacement-mapping.js +5 -2
- package/dist/cjs/artifacts/tokens-raw/atlassian-motion.js +3 -3
- package/dist/cjs/custom-theme.js +10 -60
- package/dist/cjs/entry-points/token-metadata.codegen.js +1 -10
- package/dist/cjs/get-custom-theme-styles.js +57 -0
- package/dist/cjs/get-global-theme.js +2 -2
- package/dist/cjs/get-theme-html-attrs.js +2 -2
- package/dist/cjs/get-theme-styles.js +6 -5
- package/dist/cjs/load-custom-theme-styles.js +2 -2
- package/dist/cjs/set-global-theme.js +4 -3
- package/dist/cjs/theme-color-modes.js +13 -0
- package/dist/cjs/theme-config.js +19 -16
- package/dist/cjs/theme-ids.js +13 -0
- package/dist/cjs/theme-state-transformer.js +2 -2
- package/dist/cjs/utils/color-detection.js +9 -12
- package/dist/cjs/utils/color-utils.js +38 -47
- package/dist/cjs/utils/custom-theme-loading-utils.js +7 -11
- package/dist/cjs/utils/generate-custom-color-ramp.js +16 -19
- package/dist/cjs/utils/get-alpha.js +13 -0
- package/dist/cjs/utils/get-closest-color-index.js +20 -0
- package/dist/cjs/utils/get-css-custom-property.js +32 -0
- package/dist/cjs/utils/get-fully-qualified-token-id.js +19 -0
- package/dist/cjs/utils/get-theme-override-preferences.js +12 -0
- package/dist/cjs/utils/get-theme-preferences.js +8 -5
- package/dist/cjs/utils/get-token-id.js +26 -0
- package/dist/cjs/utils/hct-color-utils/argb-from-rgb.js +12 -0
- package/dist/cjs/utils/hct-color-utils/clamp-double.js +20 -0
- package/dist/cjs/utils/hct-color-utils/clamp-int.js +20 -0
- package/dist/cjs/utils/hct-color-utils/color-utils.js +34 -59
- package/dist/cjs/utils/hct-color-utils/delinearized.js +27 -0
- package/dist/cjs/utils/hct-color-utils/hct.js +19 -95
- package/dist/cjs/utils/hct-color-utils/lerp.js +14 -0
- package/dist/cjs/utils/hct-color-utils/linearized.js +22 -0
- package/dist/cjs/utils/hct-color-utils/math-utils.js +38 -107
- package/dist/cjs/utils/hct-color-utils/matrix-multiply.js +15 -0
- package/dist/cjs/utils/hct-color-utils/sanitize-degrees-double.js +19 -0
- package/dist/cjs/utils/hct-color-utils/signum.js +20 -0
- package/dist/cjs/utils/hct-color-utils/viewing-conditions.js +98 -0
- package/dist/cjs/utils/hex-to-rgba-values.js +15 -0
- package/dist/cjs/utils/hsl-to-rgb.js +18 -0
- package/dist/cjs/utils/is-valid-brand-hex.js +9 -0
- package/dist/cjs/utils/limit-size-of-custom-style-elements.js +16 -0
- package/dist/cjs/utils/load-theme-css.js +32 -0
- package/dist/cjs/utils/relative-luminance-w3-c.js +18 -0
- package/dist/cjs/utils/rgb-to-hex.js +9 -0
- package/dist/cjs/utils/theme-loading.js +10 -25
- package/dist/cjs/utils/token-ids.js +21 -62
- package/dist/es2019/artifacts/replacement-mapping.js +5 -2
- package/dist/es2019/artifacts/tokens-raw/atlassian-motion.js +3 -3
- package/dist/es2019/custom-theme.js +4 -66
- package/dist/es2019/entry-points/token-metadata.codegen.js +1 -10
- package/dist/es2019/get-custom-theme-styles.js +60 -0
- package/dist/es2019/get-global-theme.js +1 -1
- package/dist/es2019/get-theme-html-attrs.js +1 -1
- package/dist/es2019/get-theme-styles.js +4 -3
- package/dist/es2019/load-custom-theme-styles.js +1 -1
- package/dist/es2019/set-global-theme.js +3 -2
- package/dist/es2019/theme-color-modes.js +7 -0
- package/dist/es2019/theme-config.js +4 -16
- package/dist/es2019/theme-ids.js +7 -0
- package/dist/es2019/theme-state-transformer.js +1 -1
- package/dist/es2019/utils/color-detection.js +3 -11
- package/dist/es2019/utils/color-utils.js +8 -34
- package/dist/es2019/utils/custom-theme-loading-utils.js +2 -8
- package/dist/es2019/utils/generate-custom-color-ramp.js +7 -15
- package/dist/es2019/utils/get-alpha.js +7 -0
- package/dist/es2019/utils/get-closest-color-index.js +14 -0
- package/dist/es2019/utils/get-css-custom-property.js +23 -0
- package/dist/es2019/utils/get-fully-qualified-token-id.js +11 -0
- package/dist/es2019/utils/get-theme-override-preferences.js +4 -0
- package/dist/es2019/utils/get-theme-preferences.js +1 -4
- package/dist/es2019/utils/get-token-id.js +18 -0
- package/dist/es2019/utils/hct-color-utils/argb-from-rgb.js +6 -0
- package/dist/es2019/utils/hct-color-utils/clamp-double.js +14 -0
- package/dist/es2019/utils/hct-color-utils/clamp-int.js +14 -0
- package/dist/es2019/utils/hct-color-utils/color-utils.js +7 -45
- package/dist/es2019/utils/hct-color-utils/delinearized.js +20 -0
- package/dist/es2019/utils/hct-color-utils/hct.js +3 -76
- package/dist/es2019/utils/hct-color-utils/lerp.js +8 -0
- package/dist/es2019/utils/hct-color-utils/linearized.js +16 -0
- package/dist/es2019/utils/hct-color-utils/math-utils.js +6 -105
- package/dist/es2019/utils/hct-color-utils/matrix-multiply.js +9 -0
- package/dist/es2019/utils/hct-color-utils/sanitize-degrees-double.js +13 -0
- package/dist/es2019/utils/hct-color-utils/signum.js +14 -0
- package/dist/es2019/utils/hct-color-utils/viewing-conditions.js +78 -0
- package/dist/es2019/utils/hex-to-rgba-values.js +9 -0
- package/dist/es2019/utils/hsl-to-rgb.js +8 -0
- package/dist/es2019/utils/is-valid-brand-hex.js +1 -0
- package/dist/es2019/utils/limit-size-of-custom-style-elements.js +8 -0
- package/dist/es2019/utils/load-theme-css.js +7 -0
- package/dist/es2019/utils/relative-luminance-w3-c.js +12 -0
- package/dist/es2019/utils/rgb-to-hex.js +3 -0
- package/dist/es2019/utils/theme-loading.js +3 -8
- package/dist/es2019/utils/token-ids.js +3 -54
- package/dist/esm/artifacts/replacement-mapping.js +5 -2
- package/dist/esm/artifacts/tokens-raw/atlassian-motion.js +3 -3
- package/dist/esm/custom-theme.js +4 -58
- package/dist/esm/entry-points/token-metadata.codegen.js +1 -10
- package/dist/esm/get-custom-theme-styles.js +52 -0
- package/dist/esm/get-global-theme.js +1 -1
- package/dist/esm/get-theme-html-attrs.js +1 -1
- package/dist/esm/get-theme-styles.js +4 -3
- package/dist/esm/load-custom-theme-styles.js +1 -1
- package/dist/esm/set-global-theme.js +3 -2
- package/dist/esm/theme-color-modes.js +7 -0
- package/dist/esm/theme-config.js +6 -17
- package/dist/esm/theme-ids.js +7 -0
- package/dist/esm/theme-state-transformer.js +1 -1
- package/dist/esm/utils/color-detection.js +3 -11
- package/dist/esm/utils/color-utils.js +8 -40
- package/dist/esm/utils/custom-theme-loading-utils.js +2 -11
- package/dist/esm/utils/generate-custom-color-ramp.js +7 -15
- package/dist/esm/utils/get-alpha.js +7 -0
- package/dist/esm/utils/get-closest-color-index.js +14 -0
- package/dist/esm/utils/get-css-custom-property.js +26 -0
- package/dist/esm/utils/get-fully-qualified-token-id.js +13 -0
- package/dist/esm/utils/get-theme-override-preferences.js +5 -0
- package/dist/esm/utils/get-theme-preferences.js +1 -4
- package/dist/esm/utils/get-token-id.js +20 -0
- package/dist/esm/utils/hct-color-utils/argb-from-rgb.js +6 -0
- package/dist/esm/utils/hct-color-utils/clamp-double.js +14 -0
- package/dist/esm/utils/hct-color-utils/clamp-int.js +14 -0
- package/dist/esm/utils/hct-color-utils/color-utils.js +7 -45
- package/dist/esm/utils/hct-color-utils/delinearized.js +20 -0
- package/dist/esm/utils/hct-color-utils/hct.js +5 -87
- package/dist/esm/utils/hct-color-utils/lerp.js +8 -0
- package/dist/esm/utils/hct-color-utils/linearized.js +16 -0
- package/dist/esm/utils/hct-color-utils/math-utils.js +6 -105
- package/dist/esm/utils/hct-color-utils/matrix-multiply.js +9 -0
- package/dist/esm/utils/hct-color-utils/sanitize-degrees-double.js +13 -0
- package/dist/esm/utils/hct-color-utils/signum.js +14 -0
- package/dist/esm/utils/hct-color-utils/viewing-conditions.js +89 -0
- package/dist/esm/utils/hex-to-rgba-values.js +9 -0
- package/dist/esm/utils/hsl-to-rgb.js +12 -0
- package/dist/esm/utils/is-valid-brand-hex.js +3 -0
- package/dist/esm/utils/limit-size-of-custom-style-elements.js +10 -0
- package/dist/esm/utils/load-theme-css.js +25 -0
- package/dist/esm/utils/relative-luminance-w3-c.js +12 -0
- package/dist/esm/utils/rgb-to-hex.js +3 -0
- package/dist/esm/utils/theme-loading.js +3 -24
- package/dist/esm/utils/token-ids.js +3 -61
- package/dist/types/artifacts/replacement-mapping.d.ts +1 -1
- package/dist/types/artifacts/tokens-raw/atlassian-motion.d.ts +1 -1
- package/dist/types/artifacts/types-internal.d.ts +2 -2
- package/dist/types/artifacts/types.d.ts +2 -2
- package/dist/types/custom-theme.d.ts +1 -20
- package/dist/types/entry-points/css-type-schema.codegen.d.ts +2 -2
- package/dist/types/entry-points/token-metadata.codegen.d.ts +1 -1
- package/dist/types/get-custom-theme-styles.d.ts +16 -0
- package/dist/types/get-global-theme.d.ts +1 -1
- package/dist/types/theme-color-modes.d.ts +7 -0
- package/dist/types/theme-config.d.ts +4 -14
- package/dist/types/theme-ids.d.ts +7 -0
- package/dist/types/theme-state-transformer.d.ts +1 -1
- package/dist/types/utils/color-detection.d.ts +1 -6
- package/dist/types/utils/color-utils.d.ts +5 -5
- package/dist/types/utils/custom-theme-loading-utils.d.ts +1 -2
- package/dist/types/utils/generate-custom-color-ramp.d.ts +1 -2
- package/dist/types/utils/get-alpha.d.ts +1 -0
- package/dist/types/utils/get-closest-color-index.d.ts +2 -0
- package/dist/types/utils/get-css-custom-property.d.ts +15 -0
- package/dist/types/utils/get-fully-qualified-token-id.d.ts +11 -0
- package/dist/types/utils/get-theme-override-preferences.d.ts +2 -0
- package/dist/types/utils/get-theme-preferences.d.ts +1 -1
- package/dist/types/utils/get-token-id.d.ts +15 -0
- package/dist/types/utils/hct-color-utils/argb-from-rgb.d.ts +4 -0
- package/dist/types/utils/hct-color-utils/clamp-double.d.ts +7 -0
- package/dist/types/utils/hct-color-utils/clamp-int.d.ts +7 -0
- package/dist/types/utils/hct-color-utils/color-utils.d.ts +3 -23
- package/dist/types/utils/hct-color-utils/delinearized.d.ts +9 -0
- package/dist/types/utils/hct-color-utils/hct.d.ts +3 -48
- package/dist/types/utils/hct-color-utils/lerp.d.ts +6 -0
- package/dist/types/utils/hct-color-utils/linearized.d.ts +9 -0
- package/dist/types/utils/hct-color-utils/math-utils.d.ts +6 -60
- package/dist/types/utils/hct-color-utils/matrix-multiply.d.ts +4 -0
- package/dist/types/utils/hct-color-utils/sanitize-degrees-double.d.ts +7 -0
- package/dist/types/utils/hct-color-utils/signum.d.ts +6 -0
- package/dist/types/utils/hct-color-utils/viewing-conditions.d.ts +47 -0
- package/dist/types/utils/hex-to-rgba-values.d.ts +6 -0
- package/dist/types/utils/hsl-to-rgb.d.ts +1 -0
- package/dist/types/utils/is-valid-brand-hex.d.ts +1 -0
- package/dist/types/utils/limit-size-of-custom-style-elements.d.ts +1 -0
- package/dist/types/utils/load-theme-css.d.ts +2 -0
- package/dist/types/utils/relative-luminance-w3-c.d.ts +1 -0
- package/dist/types/utils/rgb-to-hex.d.ts +1 -0
- package/dist/types/utils/theme-loading.d.ts +1 -1
- package/dist/types/utils/token-ids.d.ts +3 -41
- package/dist/types-ts4.5/artifacts/replacement-mapping.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-motion.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/types-internal.d.ts +2 -2
- package/dist/types-ts4.5/artifacts/types.d.ts +2 -2
- package/dist/types-ts4.5/custom-theme.d.ts +1 -20
- package/dist/types-ts4.5/entry-points/css-type-schema.codegen.d.ts +2 -2
- package/dist/types-ts4.5/entry-points/token-metadata.codegen.d.ts +1 -1
- package/dist/types-ts4.5/get-custom-theme-styles.d.ts +16 -0
- package/dist/types-ts4.5/get-global-theme.d.ts +1 -1
- package/dist/types-ts4.5/theme-color-modes.d.ts +11 -0
- package/dist/types-ts4.5/theme-config.d.ts +4 -29
- package/dist/types-ts4.5/theme-ids.d.ts +18 -0
- package/dist/types-ts4.5/theme-state-transformer.d.ts +1 -1
- package/dist/types-ts4.5/utils/color-detection.d.ts +1 -6
- package/dist/types-ts4.5/utils/color-utils.d.ts +5 -9
- package/dist/types-ts4.5/utils/custom-theme-loading-utils.d.ts +1 -2
- package/dist/types-ts4.5/utils/generate-custom-color-ramp.d.ts +1 -2
- package/dist/types-ts4.5/utils/get-alpha.d.ts +1 -0
- package/dist/types-ts4.5/utils/get-closest-color-index.d.ts +2 -0
- package/dist/types-ts4.5/utils/get-css-custom-property.d.ts +15 -0
- package/dist/types-ts4.5/utils/get-fully-qualified-token-id.d.ts +11 -0
- package/dist/types-ts4.5/utils/get-theme-override-preferences.d.ts +2 -0
- package/dist/types-ts4.5/utils/get-theme-preferences.d.ts +1 -1
- package/dist/types-ts4.5/utils/get-token-id.d.ts +15 -0
- package/dist/types-ts4.5/utils/hct-color-utils/argb-from-rgb.d.ts +4 -0
- package/dist/types-ts4.5/utils/hct-color-utils/clamp-double.d.ts +7 -0
- package/dist/types-ts4.5/utils/hct-color-utils/clamp-int.d.ts +7 -0
- package/dist/types-ts4.5/utils/hct-color-utils/color-utils.d.ts +3 -23
- package/dist/types-ts4.5/utils/hct-color-utils/delinearized.d.ts +9 -0
- package/dist/types-ts4.5/utils/hct-color-utils/hct.d.ts +3 -48
- package/dist/types-ts4.5/utils/hct-color-utils/lerp.d.ts +6 -0
- package/dist/types-ts4.5/utils/hct-color-utils/linearized.d.ts +9 -0
- package/dist/types-ts4.5/utils/hct-color-utils/math-utils.d.ts +6 -60
- package/dist/types-ts4.5/utils/hct-color-utils/matrix-multiply.d.ts +4 -0
- package/dist/types-ts4.5/utils/hct-color-utils/sanitize-degrees-double.d.ts +7 -0
- package/dist/types-ts4.5/utils/hct-color-utils/signum.d.ts +6 -0
- package/dist/types-ts4.5/utils/hct-color-utils/viewing-conditions.d.ts +47 -0
- package/dist/types-ts4.5/utils/hex-to-rgba-values.d.ts +6 -0
- package/dist/types-ts4.5/utils/hsl-to-rgb.d.ts +5 -0
- package/dist/types-ts4.5/utils/is-valid-brand-hex.d.ts +1 -0
- package/dist/types-ts4.5/utils/limit-size-of-custom-style-elements.d.ts +1 -0
- package/dist/types-ts4.5/utils/load-theme-css.d.ts +2 -0
- package/dist/types-ts4.5/utils/relative-luminance-w3-c.d.ts +1 -0
- package/dist/types-ts4.5/utils/rgb-to-hex.d.ts +1 -0
- package/dist/types-ts4.5/utils/theme-loading.d.ts +1 -1
- package/dist/types-ts4.5/utils/token-ids.d.ts +3 -41
- package/package.json +7 -7
- package/offerings.json +0 -44
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
export declare const isValidBrandHex: (hex: string) => boolean;
|
|
2
|
-
export declare function rgbToHex(r: number, g: number, b: number): string;
|
|
3
|
-
export declare function getAlpha(hex: string): number;
|
|
4
1
|
export declare function hexToRgbA(hex: string): [
|
|
5
2
|
number,
|
|
6
3
|
number,
|
|
@@ -17,11 +14,10 @@ export declare function hexToHSL(hex: string): [
|
|
|
17
14
|
number,
|
|
18
15
|
number
|
|
19
16
|
];
|
|
20
|
-
export declare function HSLToRGB(h: number, s: number, l: number): [
|
|
21
|
-
number,
|
|
22
|
-
number,
|
|
23
|
-
number
|
|
24
|
-
];
|
|
25
|
-
export declare function relativeLuminanceW3C(r: number, g: number, b: number): number;
|
|
26
17
|
export declare function getContrastRatio(foreground: string, background: string): number;
|
|
27
18
|
export declare function deltaE(rgbA: number[], rgbB: number[]): number;
|
|
19
|
+
export { isValidBrandHex } from './is-valid-brand-hex';
|
|
20
|
+
export { rgbToHex } from './rgb-to-hex';
|
|
21
|
+
export { getAlpha } from './get-alpha';
|
|
22
|
+
export { HSLToRGB } from './hsl-to-rgb';
|
|
23
|
+
export { relativeLuminanceW3C } from './relative-luminance-w3-c';
|
|
@@ -3,8 +3,7 @@ import { type ThemeColorModes, type ThemeOptionsSchema } from '../theme-config';
|
|
|
3
3
|
type Token = keyof typeof tokens;
|
|
4
4
|
type ThemeAttributeId = 'light' | 'dark';
|
|
5
5
|
export declare function findMissingCustomStyleElements(UNSAFE_themeOptions: ThemeOptionsSchema, mode: ThemeColorModes): ThemeAttributeId[];
|
|
6
|
-
export declare function limitSizeOfCustomStyleElements(sizeThreshold: number): void;
|
|
7
6
|
export declare function reduceTokenMap(tokenMap: {
|
|
8
7
|
[key in Token]?: number | string;
|
|
9
8
|
}, themeRamp: string[]): string;
|
|
10
|
-
export {};
|
|
9
|
+
export { limitSizeOfCustomStyleElements } from './limit-size-of-custom-style-elements';
|
|
@@ -5,7 +5,6 @@ type TokenMap = {
|
|
|
5
5
|
[key in Token]?: number | string;
|
|
6
6
|
};
|
|
7
7
|
type Mode = 'light' | 'dark';
|
|
8
|
-
export declare const getClosestColorIndex: (themeRamp: CSSColor[], brandColor: CSSColor) => number;
|
|
9
8
|
export declare const generateColors: (brandColor: CSSColor) => {
|
|
10
9
|
ramp: CSSColor[];
|
|
11
10
|
replacedColor: CSSColor;
|
|
@@ -16,4 +15,4 @@ export declare const generateTokenMap: (brandColor: CSSColor, mode: ThemeColorMo
|
|
|
16
15
|
export declare const generateTokenMapWithContrastCheck: (brandColor: CSSColor, mode: ThemeColorModes, themeRamp?: CSSColor[]) => {
|
|
17
16
|
[mode in Mode]?: TokenMap;
|
|
18
17
|
};
|
|
19
|
-
export {};
|
|
18
|
+
export { getClosestColorIndex } from './get-closest-color-index';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function getAlpha(hex: string): number;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Transforms a style dictionary token path to a CSS custom property.
|
|
3
|
+
*
|
|
4
|
+
* A css prefix will be prepended and all [default] key words will be omitted
|
|
5
|
+
* from the path
|
|
6
|
+
*
|
|
7
|
+
* @example <caption>Passing a path as an array</caption>
|
|
8
|
+
* // Returns ds-background-bold
|
|
9
|
+
* getCSSCustomProperty(['color', 'background', 'bold', '[default]'])
|
|
10
|
+
*
|
|
11
|
+
* @example <caption>Passing a path as a string</caption>
|
|
12
|
+
* // Returns ds-background-bold
|
|
13
|
+
* getCSSCustomProperty('color.background.bold.[default]')
|
|
14
|
+
*/
|
|
15
|
+
export declare const getCSSCustomProperty: (path: string | string[]) => string;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Transforms a style dictionary token path to a fully qualified token id
|
|
3
|
+
* These Ids are intended to be used internal to this package by style-dictionary
|
|
4
|
+
*
|
|
5
|
+
* [default] key words will NOT be omitted from the path
|
|
6
|
+
*
|
|
7
|
+
* @example <caption>Passing a path as a string</caption>
|
|
8
|
+
* // Returns color.background.bold.[default]
|
|
9
|
+
* getFullyQualifiedTokenId(['color', 'background', 'bold', '[default]'])
|
|
10
|
+
*/
|
|
11
|
+
export declare const getFullyQualifiedTokenId: (path: string[]) => string;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { type ThemeIdsWithOverrides, type ThemeState } from '../theme-config';
|
|
2
2
|
export declare const getThemePreferences: (themeState: ThemeState) => ThemeIdsWithOverrides[];
|
|
3
|
-
export
|
|
3
|
+
export { getThemeOverridePreferences } from './get-theme-override-preferences';
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Transforms a style dictionary token path to a shorthand token id
|
|
3
|
+
* These ids will be typically be how tokens are interacted with via typescript and css
|
|
4
|
+
*
|
|
5
|
+
* All [default] key words will be omitted from the path
|
|
6
|
+
*
|
|
7
|
+
* @example <caption>Passing a path as an array</caption>
|
|
8
|
+
* // Returns color.background.bold
|
|
9
|
+
* getTokenId(['color', 'background', 'bold', '[default]'])
|
|
10
|
+
*
|
|
11
|
+
* @example <caption>Passing a path as a string</caption>
|
|
12
|
+
* // Returns color.background.bold
|
|
13
|
+
* getTokenId('color.background.bold.[default]')
|
|
14
|
+
*/
|
|
15
|
+
export declare const getTokenId: (path: string | string[]) => string;
|
|
@@ -2,10 +2,6 @@
|
|
|
2
2
|
* Below lines are copied from @material/material-color-utilities.
|
|
3
3
|
* Do not modify it.
|
|
4
4
|
*/
|
|
5
|
-
/**
|
|
6
|
-
* Converts a color from RGB components to ARGB format.
|
|
7
|
-
*/
|
|
8
|
-
export declare function argbFromRgb(red: number, green: number, blue: number): number;
|
|
9
5
|
/**
|
|
10
6
|
* Converts a color from linear RGB components to ARGB format.
|
|
11
7
|
*/
|
|
@@ -53,24 +49,6 @@ export declare function yFromLstar(lstar: number): number;
|
|
|
53
49
|
* @return L* in L*a*b*
|
|
54
50
|
*/
|
|
55
51
|
export declare function lstarFromY(y: number): number;
|
|
56
|
-
/**
|
|
57
|
-
* Linearizes an RGB component.
|
|
58
|
-
*
|
|
59
|
-
* @param rgbComponent 0 <= rgb_component <= 255, represents R/G/B
|
|
60
|
-
* channel
|
|
61
|
-
* @return 0.0 <= output <= 100.0, color channel converted to
|
|
62
|
-
* linear RGB space
|
|
63
|
-
*/
|
|
64
|
-
export declare function linearized(rgbComponent: number): number;
|
|
65
|
-
/**
|
|
66
|
-
* Delinearizes an RGB component.
|
|
67
|
-
*
|
|
68
|
-
* @param rgbComponent 0.0 <= rgb_component <= 100.0, represents
|
|
69
|
-
* linear R/G/B channel
|
|
70
|
-
* @return 0 <= output <= 255, color channel converted to regular
|
|
71
|
-
* RGB space
|
|
72
|
-
*/
|
|
73
|
-
export declare function delinearized(rgbComponent: number): number;
|
|
74
52
|
/**
|
|
75
53
|
* Returns the standard white point; white on a sunny day.
|
|
76
54
|
*
|
|
@@ -105,4 +83,6 @@ export declare function rgbaFromArgb(argb: number): Rgba;
|
|
|
105
83
|
* @returns ARGB representation of a int32 color.
|
|
106
84
|
*/
|
|
107
85
|
export declare function argbFromRgba({ r, g, b, a }: Rgba): number;
|
|
108
|
-
export {};
|
|
86
|
+
export { argbFromRgb } from './argb-from-rgb';
|
|
87
|
+
export { linearized } from './linearized';
|
|
88
|
+
export { delinearized } from './delinearized';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Delinearizes an RGB component.
|
|
3
|
+
*
|
|
4
|
+
* @param rgbComponent 0.0 <= rgb_component <= 100.0, represents
|
|
5
|
+
* linear R/G/B channel
|
|
6
|
+
* @return 0 <= output <= 255, color channel converted to regular
|
|
7
|
+
* RGB space
|
|
8
|
+
*/
|
|
9
|
+
export declare function delinearized(rgbComponent: number): number;
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
* Below lines are copied from @material/material-color-utilities.
|
|
3
3
|
* Do not modify it.
|
|
4
4
|
*/
|
|
5
|
+
import { ViewingConditions } from './viewing-conditions';
|
|
5
6
|
/**
|
|
6
7
|
* A color system built using CAM16 hue and chroma, and L* from
|
|
7
8
|
* L*a*b*.
|
|
@@ -23,7 +24,6 @@
|
|
|
23
24
|
* will appear as in different lighting environments.
|
|
24
25
|
*/
|
|
25
26
|
export declare class Hct {
|
|
26
|
-
private argb;
|
|
27
27
|
/**
|
|
28
28
|
* @param hue 0 <= hue < 360; invalid values are corrected.
|
|
29
29
|
* @param chroma 0 <= chroma < ?; Informally, colorfulness. The color
|
|
@@ -35,6 +35,7 @@ export declare class Hct {
|
|
|
35
35
|
internalHue: number;
|
|
36
36
|
internalChroma: number;
|
|
37
37
|
internalTone: number;
|
|
38
|
+
private argb;
|
|
38
39
|
static from(hue: number, chroma: number, tone: number): Hct;
|
|
39
40
|
/**
|
|
40
41
|
* @param argb ARGB representation of a color.
|
|
@@ -88,50 +89,4 @@ export declare class Hct {
|
|
|
88
89
|
*/
|
|
89
90
|
inViewingConditions(vc: ViewingConditions): Hct;
|
|
90
91
|
}
|
|
91
|
-
export
|
|
92
|
-
n: number;
|
|
93
|
-
aw: number;
|
|
94
|
-
nbb: number;
|
|
95
|
-
ncb: number;
|
|
96
|
-
c: number;
|
|
97
|
-
nc: number;
|
|
98
|
-
rgbD: number[];
|
|
99
|
-
fl: number;
|
|
100
|
-
fLRoot: number;
|
|
101
|
-
z: number;
|
|
102
|
-
/**
|
|
103
|
-
* sRGB-like viewing conditions.
|
|
104
|
-
*/
|
|
105
|
-
static DEFAULT: ViewingConditions;
|
|
106
|
-
/**
|
|
107
|
-
* Create ViewingConditions from a simple, physically relevant, set of
|
|
108
|
-
* parameters.
|
|
109
|
-
*
|
|
110
|
-
* @param whitePoint White point, measured in the XYZ color space.
|
|
111
|
-
* default = D65, or sunny day afternoon
|
|
112
|
-
* @param adaptingLuminance The luminance of the adapting field. Informally,
|
|
113
|
-
* how bright it is in the room where the color is viewed. Can be
|
|
114
|
-
* calculated from lux by multiplying lux by 0.0586. default = 11.72,
|
|
115
|
-
* or 200 lux.
|
|
116
|
-
* @param backgroundLstar The lightness of the area surrounding the color.
|
|
117
|
-
* measured by L* in L*a*b*. default = 50.0
|
|
118
|
-
* @param surround A general description of the lighting surrounding the
|
|
119
|
-
* color. 0 is pitch dark, like watching a movie in a theater. 1.0 is a
|
|
120
|
-
* dimly light room, like watching TV at home at night. 2.0 means there
|
|
121
|
-
* is no difference between the lighting on the color and around it.
|
|
122
|
-
* default = 2.0
|
|
123
|
-
* @param discountingIlluminant Whether the eye accounts for the tint of the
|
|
124
|
-
* ambient lighting, such as knowing an apple is still red in green light.
|
|
125
|
-
* default = false, the eye does not perform this process on
|
|
126
|
-
* self-luminous objects like displays.
|
|
127
|
-
*/
|
|
128
|
-
static make(whitePoint?: number[], adaptingLuminance?: number, backgroundLstar?: number, surround?: number, discountingIlluminant?: boolean): ViewingConditions;
|
|
129
|
-
/**
|
|
130
|
-
* Parameters are intermediate values of the CAM16 conversion process. Their
|
|
131
|
-
* names are shorthand for technical color science terminology, this class
|
|
132
|
-
* would not benefit from documenting them individually. A brief overview
|
|
133
|
-
* is available in the CAM16 specification, and a complete overview requires
|
|
134
|
-
* a color science textbook, such as Fairchild's Color Appearance Models.
|
|
135
|
-
*/
|
|
136
|
-
private constructor();
|
|
137
|
-
}
|
|
92
|
+
export { ViewingConditions } from './viewing-conditions';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Linearizes an RGB component.
|
|
3
|
+
*
|
|
4
|
+
* @param rgbComponent 0 <= rgb_component <= 255, represents R/G/B
|
|
5
|
+
* channel
|
|
6
|
+
* @return 0.0 <= output <= 100.0, color channel converted to
|
|
7
|
+
* linear RGB space
|
|
8
|
+
*/
|
|
9
|
+
export declare function linearized(rgbComponent: number): number;
|
|
@@ -1,60 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
* Copyright 2021 Google LLC
|
|
8
|
-
*
|
|
9
|
-
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
10
|
-
* you may not use this file except in compliance with the License.
|
|
11
|
-
* You may obtain a copy of the License at
|
|
12
|
-
*
|
|
13
|
-
* http://www.apache.org/licenses/LICENSE-2.0
|
|
14
|
-
*
|
|
15
|
-
* Unless required by applicable law or agreed to in writing, software
|
|
16
|
-
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
17
|
-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
18
|
-
* See the License for the specific language governing permissions and
|
|
19
|
-
* limitations under the License.
|
|
20
|
-
*/
|
|
21
|
-
/**
|
|
22
|
-
* Utility methods for mathematical operations.
|
|
23
|
-
*/
|
|
24
|
-
/**
|
|
25
|
-
* The signum function.
|
|
26
|
-
*
|
|
27
|
-
* @return 1 if num > 0, -1 if num < 0, and 0 if num = 0
|
|
28
|
-
*/
|
|
29
|
-
export declare function signum(num: number): number;
|
|
30
|
-
/**
|
|
31
|
-
* The linear interpolation function.
|
|
32
|
-
*
|
|
33
|
-
* @return start if amount = 0 and stop if amount = 1
|
|
34
|
-
*/
|
|
35
|
-
export declare function lerp(start: number, stop: number, amount: number): number;
|
|
36
|
-
/**
|
|
37
|
-
* Clamps an integer between two integers.
|
|
38
|
-
*
|
|
39
|
-
* @return input when min <= input <= max, and either min or max
|
|
40
|
-
* otherwise.
|
|
41
|
-
*/
|
|
42
|
-
export declare function clampInt(min: number, max: number, input: number): number;
|
|
43
|
-
/**
|
|
44
|
-
* Clamps an integer between two floating-point numbers.
|
|
45
|
-
*
|
|
46
|
-
* @return input when min <= input <= max, and either min or max
|
|
47
|
-
* otherwise.
|
|
48
|
-
*/
|
|
49
|
-
export declare function clampDouble(min: number, max: number, input: number): number;
|
|
50
|
-
/**
|
|
51
|
-
* Sanitizes a degree measure as a floating-point number.
|
|
52
|
-
*
|
|
53
|
-
* @return a degree measure between 0.0 (inclusive) and 360.0
|
|
54
|
-
* (exclusive).
|
|
55
|
-
*/
|
|
56
|
-
export declare function sanitizeDegreesDouble(degrees: number): number;
|
|
57
|
-
/**
|
|
58
|
-
* Multiplies a 1x3 row vector with a 3x3 matrix.
|
|
59
|
-
*/
|
|
60
|
-
export declare function matrixMultiply(row: number[], matrix: number[][]): number[];
|
|
1
|
+
export { signum } from './signum';
|
|
2
|
+
export { lerp } from './lerp';
|
|
3
|
+
export { clampInt } from './clamp-int';
|
|
4
|
+
export { clampDouble } from './clamp-double';
|
|
5
|
+
export { sanitizeDegreesDouble } from './sanitize-degrees-double';
|
|
6
|
+
export { matrixMultiply } from './matrix-multiply';
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
export declare class ViewingConditions {
|
|
2
|
+
/**
|
|
3
|
+
* sRGB-like viewing conditions.
|
|
4
|
+
*/
|
|
5
|
+
static DEFAULT: ViewingConditions;
|
|
6
|
+
/**
|
|
7
|
+
* Create ViewingConditions from a simple, physically relevant, set of
|
|
8
|
+
* parameters.
|
|
9
|
+
*
|
|
10
|
+
* @param whitePoint White point, measured in the XYZ color space.
|
|
11
|
+
* default = D65, or sunny day afternoon
|
|
12
|
+
* @param adaptingLuminance The luminance of the adapting field. Informally,
|
|
13
|
+
* how bright it is in the room where the color is viewed. Can be
|
|
14
|
+
* calculated from lux by multiplying lux by 0.0586. default = 11.72,
|
|
15
|
+
* or 200 lux.
|
|
16
|
+
* @param backgroundLstar The lightness of the area surrounding the color.
|
|
17
|
+
* measured by L* in L*a*b*. default = 50.0
|
|
18
|
+
* @param surround A general description of the lighting surrounding the
|
|
19
|
+
* color. 0 is pitch dark, like watching a movie in a theater. 1.0 is a
|
|
20
|
+
* dimly light room, like watching TV at home at night. 2.0 means there
|
|
21
|
+
* is no difference between the lighting on the color and around it.
|
|
22
|
+
* default = 2.0
|
|
23
|
+
* @param discountingIlluminant Whether the eye accounts for the tint of the
|
|
24
|
+
* ambient lighting, such as knowing an apple is still red in green light.
|
|
25
|
+
* default = false, the eye does not perform this process on
|
|
26
|
+
* self-luminous objects like displays.
|
|
27
|
+
*/
|
|
28
|
+
static make(whitePoint?: number[], adaptingLuminance?: number, backgroundLstar?: number, surround?: number, discountingIlluminant?: boolean): ViewingConditions;
|
|
29
|
+
/**
|
|
30
|
+
* Parameters are intermediate values of the CAM16 conversion process. Their
|
|
31
|
+
* names are shorthand for technical color science terminology, this class
|
|
32
|
+
* would not benefit from documenting them individually. A brief overview
|
|
33
|
+
* is available in the CAM16 specification, and a complete overview requires
|
|
34
|
+
* a color science textbook, such as Fairchild's Color Appearance Models.
|
|
35
|
+
*/
|
|
36
|
+
n: number;
|
|
37
|
+
aw: number;
|
|
38
|
+
nbb: number;
|
|
39
|
+
ncb: number;
|
|
40
|
+
c: number;
|
|
41
|
+
nc: number;
|
|
42
|
+
rgbD: number[];
|
|
43
|
+
fl: number;
|
|
44
|
+
fLRoot: number;
|
|
45
|
+
z: number;
|
|
46
|
+
private constructor();
|
|
47
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const isValidBrandHex: (hex: string) => boolean;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function limitSizeOfCustomStyleElements(sizeThreshold: number): void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function relativeLuminanceW3C(r: number, g: number, b: number): number;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function rgbToHex(r: number, g: number, b: number): string;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type ThemeIdsWithOverrides } from '../theme-config';
|
|
2
2
|
export declare const loadAndAppendThemeCss: (themeId: ThemeIdsWithOverrides) => Promise<void>;
|
|
3
|
-
export declare const loadThemeCss: (themeId: ThemeIdsWithOverrides) => Promise<string>;
|
|
4
3
|
export declare const darkModeMediaQuery = "(prefers-color-scheme: dark)";
|
|
5
4
|
export declare const moreContrastMediaQuery = "(prefers-contrast: more)";
|
|
5
|
+
export { loadThemeCss } from './load-theme-css';
|
|
@@ -1,41 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
* A css prefix will be prepended and all [default] key words will be omitted
|
|
5
|
-
* from the path
|
|
6
|
-
*
|
|
7
|
-
* @example <caption>Passing a path as an array</caption>
|
|
8
|
-
* // Returns ds-background-bold
|
|
9
|
-
* getCSSCustomProperty(['color', 'background', 'bold', '[default]'])
|
|
10
|
-
*
|
|
11
|
-
* @example <caption>Passing a path as a string</caption>
|
|
12
|
-
* // Returns ds-background-bold
|
|
13
|
-
* getCSSCustomProperty('color.background.bold.[default]')
|
|
14
|
-
*/
|
|
15
|
-
export declare const getCSSCustomProperty: (path: string | string[]) => string;
|
|
16
|
-
/**
|
|
17
|
-
* Transforms a style dictionary token path to a shorthand token id
|
|
18
|
-
* These ids will be typically be how tokens are interacted with via typescript and css
|
|
19
|
-
*
|
|
20
|
-
* All [default] key words will be omitted from the path
|
|
21
|
-
*
|
|
22
|
-
* @example <caption>Passing a path as an array</caption>
|
|
23
|
-
* // Returns color.background.bold
|
|
24
|
-
* getTokenId(['color', 'background', 'bold', '[default]'])
|
|
25
|
-
*
|
|
26
|
-
* @example <caption>Passing a path as a string</caption>
|
|
27
|
-
* // Returns color.background.bold
|
|
28
|
-
* getTokenId('color.background.bold.[default]')
|
|
29
|
-
*/
|
|
30
|
-
export declare const getTokenId: (path: string | string[]) => string;
|
|
31
|
-
/**
|
|
32
|
-
* Transforms a style dictionary token path to a fully qualified token id
|
|
33
|
-
* These Ids are intended to be used internal to this package by style-dictionary
|
|
34
|
-
*
|
|
35
|
-
* [default] key words will NOT be omitted from the path
|
|
36
|
-
*
|
|
37
|
-
* @example <caption>Passing a path as a string</caption>
|
|
38
|
-
* // Returns color.background.bold.[default]
|
|
39
|
-
* getFullyQualifiedTokenId(['color', 'background', 'bold', '[default]'])
|
|
40
|
-
*/
|
|
41
|
-
export declare const getFullyQualifiedTokenId: (path: string[]) => string;
|
|
1
|
+
export { getCSSCustomProperty } from './get-css-custom-property';
|
|
2
|
+
export { getTokenId } from './get-token-id';
|
|
3
|
+
export { getFullyQualifiedTokenId } from './get-fully-qualified-token-id';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/tokens",
|
|
3
|
-
"version": "13.0.
|
|
3
|
+
"version": "13.0.4",
|
|
4
4
|
"description": "Design tokens are the single source of truth to name and store design decisions.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -54,29 +54,29 @@
|
|
|
54
54
|
"@atlaskit/button": "^23.11.0",
|
|
55
55
|
"@atlaskit/calendar": "^17.2.0",
|
|
56
56
|
"@atlaskit/checkbox": "^17.3.0",
|
|
57
|
-
"@atlaskit/code": "^17.
|
|
57
|
+
"@atlaskit/code": "^17.5.0",
|
|
58
58
|
"@atlaskit/css": "^0.19.0",
|
|
59
59
|
"@atlaskit/docs": "^11.8.0",
|
|
60
60
|
"@atlaskit/dropdown-menu": "^16.8.0",
|
|
61
61
|
"@atlaskit/dynamic-table": "^18.4.0",
|
|
62
62
|
"@atlaskit/form": "^15.5.0",
|
|
63
63
|
"@atlaskit/heading": "^5.4.0",
|
|
64
|
-
"@atlaskit/icon": "^34.
|
|
64
|
+
"@atlaskit/icon": "^34.4.0",
|
|
65
65
|
"@atlaskit/inline-message": "^15.6.0",
|
|
66
66
|
"@atlaskit/link": "^3.4.0",
|
|
67
67
|
"@atlaskit/lozenge": "^13.8.0",
|
|
68
68
|
"@atlaskit/popup": "^4.17.0",
|
|
69
69
|
"@atlaskit/primitives": "^19.0.0",
|
|
70
|
-
"@atlaskit/radio": "^8.
|
|
70
|
+
"@atlaskit/radio": "^8.6.0",
|
|
71
71
|
"@atlaskit/section-message": "^8.12.0",
|
|
72
72
|
"@atlaskit/select": "^21.10.0",
|
|
73
|
-
"@atlaskit/tag": "^14.
|
|
73
|
+
"@atlaskit/tag": "^14.13.0",
|
|
74
74
|
"@atlaskit/textarea": "^8.3.0",
|
|
75
75
|
"@atlaskit/textfield": "^8.3.0",
|
|
76
76
|
"@atlaskit/theme": "^23.2.0",
|
|
77
|
-
"@atlaskit/tooltip": "^
|
|
77
|
+
"@atlaskit/tooltip": "^22.0.0",
|
|
78
78
|
"@atlassian/codegen": "^0.2.0",
|
|
79
|
-
"@atlassian/feature-flags-test-utils": "^1.
|
|
79
|
+
"@atlassian/feature-flags-test-utils": "^1.1.0",
|
|
80
80
|
"@atlassian/react-compiler-gating": "workspace:^",
|
|
81
81
|
"@atlassian/structured-docs-types": "workspace:^",
|
|
82
82
|
"@atlassian/ts-loader": "^0.1.0",
|
package/offerings.json
DELETED
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
[
|
|
2
|
-
{
|
|
3
|
-
"name": "token",
|
|
4
|
-
"package": "@atlaskit/tokens",
|
|
5
|
-
"import": {
|
|
6
|
-
"name": "token",
|
|
7
|
-
"package": "@atlaskit/tokens",
|
|
8
|
-
"type": "named"
|
|
9
|
-
},
|
|
10
|
-
"type": "function",
|
|
11
|
-
"keywords": [
|
|
12
|
-
"token",
|
|
13
|
-
"design",
|
|
14
|
-
"system",
|
|
15
|
-
"color",
|
|
16
|
-
"spacing",
|
|
17
|
-
"typography",
|
|
18
|
-
"radius",
|
|
19
|
-
"theme",
|
|
20
|
-
"css",
|
|
21
|
-
"style",
|
|
22
|
-
"variable"
|
|
23
|
-
],
|
|
24
|
-
"categories": ["tokens"],
|
|
25
|
-
"shortDescription": "Design tokens provide consistent, semantic values for colors, spacing, typography, and other design properties across the Atlassian Design System. Use tokens instead of hardcoded values to ensure consistency and proper theming.",
|
|
26
|
-
"status": "general-availability",
|
|
27
|
-
"accessibilityGuidelines": [
|
|
28
|
-
"Use color tokens to ensure proper contrast ratios",
|
|
29
|
-
"Test color combinations for accessibility compliance",
|
|
30
|
-
"Use semantic color names (success, warning, danger) for better meaning"
|
|
31
|
-
],
|
|
32
|
-
"usageGuidelines": [
|
|
33
|
-
"AVOID hardcoding any CSS values where a token exists for that type; in many cases you may be forced to use a token",
|
|
34
|
-
"Use the `token()` function with CSS-in-JS",
|
|
35
|
-
"Use semantic token names for better maintainability"
|
|
36
|
-
],
|
|
37
|
-
"generativeInstructions": [
|
|
38
|
-
"./docs/ai/color-instructions.md",
|
|
39
|
-
"./docs/ai/spacing-instructions.md",
|
|
40
|
-
"./docs/ai/border-radius-instructions.md"
|
|
41
|
-
],
|
|
42
|
-
"examples": ["./examples/ai/basic.tsx"]
|
|
43
|
-
}
|
|
44
|
-
]
|