@atlaskit/tokens 13.1.0 → 13.1.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.
- package/CHANGELOG.md +8 -0
- package/codemods/css-to-design-tokens/lib/colors.tsx +3 -8
- package/codemods/css-to-design-tokens/lib/declaration.tsx +3 -13
- package/codemods/css-to-design-tokens/lib/extract-between-parentheses.tsx +4 -0
- package/codemods/css-to-design-tokens/lib/extract-less-var-name.tsx +3 -0
- package/codemods/css-to-design-tokens/lib/get-css-var-meta.tsx +13 -0
- package/codemods/css-to-design-tokens/lib/get-named-color-meta.tsx +5 -0
- package/codemods/css-to-design-tokens/lib/get-raw-color-meta.tsx +11 -0
- package/codemods/css-to-design-tokens/lib/is-css-declaration.tsx +3 -0
- package/codemods/css-to-design-tokens/lib/is-known-css-variable.tsx +5 -0
- package/codemods/css-to-design-tokens/lib/known-named-colors.tsx +150 -0
- package/codemods/css-to-design-tokens/lib/known-raw-colors.tsx +17 -0
- package/codemods/css-to-design-tokens/lib/known-variables.tsx +167 -0
- package/codemods/css-to-design-tokens/lib/legacy-colors.tsx +3 -335
- package/codemods/css-to-design-tokens/lib/meta.tsx +3 -28
- package/codemods/css-to-design-tokens/lib/split-css-value.tsx +4 -0
- package/codemods/css-to-design-tokens/lib/value.tsx +6 -9
- package/codemods/css-to-design-tokens/transform.tsx +3 -1
- package/dist/cjs/artifacts/palettes-raw/palette.js +35 -1
- package/dist/cjs/entry-points/theme-state-transformer.js +4 -3
- package/dist/cjs/get-custom-theme-styles.js +7 -6
- package/dist/cjs/get-global-theme.js +2 -2
- package/dist/cjs/get-theme-html-attrs.js +2 -2
- package/dist/cjs/index.js +4 -3
- package/dist/cjs/is-color-mode.js +9 -0
- package/dist/cjs/is-theme-ids.js +12 -0
- package/dist/cjs/is-theme-kind.js +12 -0
- package/dist/cjs/theme-config.js +8 -44
- package/dist/cjs/theme-object-to-string.js +42 -0
- package/dist/cjs/theme-options-schema.js +1 -0
- package/dist/cjs/theme-state-defaults.js +39 -0
- package/dist/cjs/theme-state.js +5 -0
- package/dist/cjs/theme-string-to-object.js +51 -0
- package/dist/cjs/utils/additional-contrast-checker.js +43 -0
- package/dist/cjs/utils/custom-theme-loading-utils.js +0 -22
- package/dist/cjs/utils/custom-theme-token-contrast-check.js +2 -40
- package/dist/cjs/utils/delta-e.js +26 -0
- package/dist/cjs/utils/generate-colors.js +47 -0
- package/dist/cjs/utils/generate-token-map-with-contrast-check.js +32 -0
- package/dist/cjs/utils/{generate-custom-color-ramp.js → generate-token-map.js} +6 -75
- package/dist/cjs/utils/get-closest-color-index.js +3 -2
- package/dist/cjs/utils/get-contrast-ratio.js +22 -0
- package/dist/cjs/utils/hct-color-utils/alpha-from-argb.js +12 -0
- package/dist/cjs/utils/hct-color-utils/argb-from-linrgb.js +17 -0
- package/dist/cjs/utils/hct-color-utils/argb-from-lstar.js +21 -0
- package/dist/cjs/utils/hct-color-utils/argb-from-rgba.js +24 -0
- package/dist/cjs/utils/hct-color-utils/argb-from-xyz.js +29 -0
- package/dist/cjs/utils/hct-color-utils/blue-from-argb.js +12 -0
- package/dist/cjs/utils/hct-color-utils/clamp-component.js +15 -0
- package/dist/cjs/utils/hct-color-utils/contrast.js +10 -11
- package/dist/cjs/utils/hct-color-utils/green-from-argb.js +12 -0
- package/dist/cjs/utils/hct-color-utils/hct.js +18 -12
- package/dist/cjs/utils/hct-color-utils/index.js +4 -3
- package/dist/cjs/utils/hct-color-utils/lab-f.js +15 -0
- package/dist/cjs/utils/hct-color-utils/lab-invf.js +16 -0
- package/dist/cjs/utils/hct-color-utils/lstar-from-argb.js +34 -0
- package/dist/cjs/utils/hct-color-utils/lstar-from-y.js +21 -0
- package/dist/cjs/utils/hct-color-utils/red-from-argb.js +12 -0
- package/dist/cjs/utils/hct-color-utils/rgba-from-argb.js +28 -0
- package/dist/cjs/utils/hct-color-utils/rgba.js +1 -0
- package/dist/cjs/utils/hct-color-utils/viewing-conditions.js +5 -4
- package/dist/cjs/utils/hct-color-utils/white-point-d65.js +14 -0
- package/dist/cjs/utils/hct-color-utils/y-from-lstar.js +21 -0
- package/dist/cjs/utils/hex-to-hsl.js +52 -0
- package/dist/cjs/utils/hex-to-rgb-a.js +20 -0
- package/dist/cjs/utils/hex-to-rgb.js +19 -0
- package/dist/cjs/utils/is-valid-hex.js +10 -0
- package/dist/cjs/utils/reduce-token-map.js +18 -0
- package/dist/cjs/utils/rgb-to-lab.js +24 -0
- package/dist/es2019/artifacts/palettes-raw/palette.js +35 -1
- package/dist/es2019/entry-points/theme-state-transformer.js +2 -1
- package/dist/es2019/get-custom-theme-styles.js +3 -2
- package/dist/es2019/get-global-theme.js +1 -1
- package/dist/es2019/get-theme-html-attrs.js +1 -1
- package/dist/es2019/index.js +2 -1
- package/dist/es2019/is-color-mode.js +3 -0
- package/dist/es2019/is-theme-ids.js +4 -0
- package/dist/es2019/is-theme-kind.js +4 -0
- package/dist/es2019/theme-config.js +4 -45
- package/dist/es2019/theme-object-to-string.js +28 -0
- package/dist/es2019/theme-options-schema.js +0 -0
- package/dist/es2019/theme-state-defaults.js +34 -0
- package/dist/es2019/theme-state.js +1 -0
- package/dist/es2019/theme-string-to-object.js +38 -0
- package/dist/es2019/utils/additional-contrast-checker.js +39 -0
- package/dist/es2019/utils/custom-theme-loading-utils.js +1 -11
- package/dist/es2019/utils/custom-theme-token-contrast-check.js +1 -41
- package/dist/es2019/utils/delta-e.js +20 -0
- package/dist/es2019/utils/generate-colors.js +39 -0
- package/dist/es2019/utils/generate-token-map-with-contrast-check.js +21 -0
- package/dist/es2019/utils/{generate-custom-color-ramp.js → generate-token-map.js} +3 -63
- package/dist/es2019/utils/get-closest-color-index.js +2 -1
- package/dist/es2019/utils/get-contrast-ratio.js +16 -0
- package/dist/es2019/utils/hct-color-utils/alpha-from-argb.js +6 -0
- package/dist/es2019/utils/hct-color-utils/argb-from-linrgb.js +12 -0
- package/dist/es2019/utils/hct-color-utils/argb-from-lstar.js +16 -0
- package/dist/es2019/utils/hct-color-utils/argb-from-rgba.js +19 -0
- package/dist/es2019/utils/hct-color-utils/argb-from-xyz.js +24 -0
- package/dist/es2019/utils/hct-color-utils/blue-from-argb.js +6 -0
- package/dist/es2019/utils/hct-color-utils/clamp-component.js +9 -0
- package/dist/es2019/utils/hct-color-utils/contrast.js +10 -10
- package/dist/es2019/utils/hct-color-utils/green-from-argb.js +6 -0
- package/dist/es2019/utils/hct-color-utils/hct.js +19 -12
- package/dist/es2019/utils/hct-color-utils/index.js +2 -1
- package/dist/es2019/utils/hct-color-utils/lab-f.js +9 -0
- package/dist/es2019/utils/hct-color-utils/lab-invf.js +10 -0
- package/dist/es2019/utils/hct-color-utils/lstar-from-argb.js +28 -0
- package/dist/es2019/utils/hct-color-utils/lstar-from-y.js +16 -0
- package/dist/es2019/utils/hct-color-utils/red-from-argb.js +6 -0
- package/dist/es2019/utils/hct-color-utils/rgba-from-argb.js +22 -0
- package/dist/es2019/utils/hct-color-utils/rgba.js +0 -0
- package/dist/es2019/utils/hct-color-utils/viewing-conditions.js +4 -3
- package/dist/es2019/utils/hct-color-utils/white-point-d65.js +8 -0
- package/dist/es2019/utils/hct-color-utils/y-from-lstar.js +16 -0
- package/dist/es2019/utils/hex-to-hsl.js +46 -0
- package/dist/es2019/utils/hex-to-rgb-a.js +14 -0
- package/dist/es2019/utils/hex-to-rgb.js +13 -0
- package/dist/es2019/utils/is-valid-hex.js +2 -0
- package/dist/es2019/utils/reduce-token-map.js +7 -0
- package/dist/es2019/utils/rgb-to-lab.js +18 -0
- package/dist/esm/artifacts/palettes-raw/palette.js +35 -1
- package/dist/esm/entry-points/theme-state-transformer.js +2 -1
- package/dist/esm/get-custom-theme-styles.js +3 -2
- package/dist/esm/get-global-theme.js +1 -1
- package/dist/esm/get-theme-html-attrs.js +1 -1
- package/dist/esm/index.js +2 -1
- package/dist/esm/is-color-mode.js +3 -0
- package/dist/esm/is-theme-ids.js +6 -0
- package/dist/esm/is-theme-kind.js +6 -0
- package/dist/esm/theme-config.js +4 -45
- package/dist/esm/theme-object-to-string.js +35 -0
- package/dist/esm/theme-options-schema.js +0 -0
- package/dist/esm/theme-state-defaults.js +34 -0
- package/dist/esm/theme-state.js +1 -0
- package/dist/esm/theme-string-to-object.js +44 -0
- package/dist/esm/utils/additional-contrast-checker.js +36 -0
- package/dist/esm/utils/custom-theme-loading-utils.js +1 -15
- package/dist/esm/utils/custom-theme-token-contrast-check.js +1 -38
- package/dist/esm/utils/delta-e.js +20 -0
- package/dist/esm/utils/generate-colors.js +40 -0
- package/dist/esm/utils/generate-token-map-with-contrast-check.js +25 -0
- package/dist/esm/utils/{generate-custom-color-ramp.js → generate-token-map.js} +3 -67
- package/dist/esm/utils/get-closest-color-index.js +2 -1
- package/dist/esm/utils/get-contrast-ratio.js +16 -0
- package/dist/esm/utils/hct-color-utils/alpha-from-argb.js +6 -0
- package/dist/esm/utils/hct-color-utils/argb-from-linrgb.js +12 -0
- package/dist/esm/utils/hct-color-utils/argb-from-lstar.js +16 -0
- package/dist/esm/utils/hct-color-utils/argb-from-rgba.js +18 -0
- package/dist/esm/utils/hct-color-utils/argb-from-xyz.js +24 -0
- package/dist/esm/utils/hct-color-utils/blue-from-argb.js +6 -0
- package/dist/esm/utils/hct-color-utils/clamp-component.js +9 -0
- package/dist/esm/utils/hct-color-utils/contrast.js +10 -10
- package/dist/esm/utils/hct-color-utils/green-from-argb.js +6 -0
- package/dist/esm/utils/hct-color-utils/hct.js +19 -12
- package/dist/esm/utils/hct-color-utils/index.js +2 -1
- package/dist/esm/utils/hct-color-utils/lab-f.js +9 -0
- package/dist/esm/utils/hct-color-utils/lab-invf.js +10 -0
- package/dist/esm/utils/hct-color-utils/lstar-from-argb.js +28 -0
- package/dist/esm/utils/hct-color-utils/lstar-from-y.js +16 -0
- package/dist/esm/utils/hct-color-utils/red-from-argb.js +6 -0
- package/dist/esm/utils/hct-color-utils/rgba-from-argb.js +22 -0
- package/dist/esm/utils/hct-color-utils/rgba.js +0 -0
- package/dist/esm/utils/hct-color-utils/viewing-conditions.js +5 -4
- package/dist/esm/utils/hct-color-utils/white-point-d65.js +8 -0
- package/dist/esm/utils/hct-color-utils/y-from-lstar.js +16 -0
- package/dist/esm/utils/hex-to-hsl.js +46 -0
- package/dist/esm/utils/hex-to-rgb-a.js +14 -0
- package/dist/esm/utils/hex-to-rgb.js +13 -0
- package/dist/esm/utils/is-valid-hex.js +4 -0
- package/dist/esm/utils/reduce-token-map.js +11 -0
- package/dist/esm/utils/rgb-to-lab.js +18 -0
- package/dist/types/artifacts/palettes-raw/palette.d.ts +1 -1
- package/dist/types/entry-points/theme-state-transformer.d.ts +2 -1
- package/dist/types/index.d.ts +2 -1
- package/dist/types/is-color-mode.d.ts +2 -0
- package/dist/types/is-theme-ids.d.ts +2 -0
- package/dist/types/is-theme-kind.d.ts +4 -0
- package/dist/types/theme-color-modes.d.ts +1 -0
- package/dist/types/theme-config.d.ts +8 -40
- package/dist/types/theme-ids.d.ts +1 -0
- package/dist/types/theme-object-to-string.d.ts +13 -0
- package/dist/types/theme-options-schema.d.ts +7 -0
- package/dist/types/theme-state-defaults.d.ts +14 -0
- package/dist/types/theme-state.d.ts +17 -0
- package/dist/types/{theme-state-transformer.d.ts → theme-string-to-object.d.ts} +0 -12
- package/dist/types/utils/additional-contrast-checker.d.ts +9 -0
- package/dist/types/utils/custom-theme-loading-utils.d.ts +1 -6
- package/dist/types/utils/custom-theme-token-contrast-check.d.ts +0 -9
- package/dist/types/utils/delta-e.d.ts +1 -0
- package/dist/types/utils/generate-colors.d.ts +5 -0
- package/dist/types/utils/{generate-custom-color-ramp.d.ts → generate-token-map-with-contrast-check.d.ts} +1 -6
- package/dist/types/utils/generate-token-map.d.ts +9 -0
- package/dist/types/utils/get-contrast-ratio.d.ts +1 -0
- package/dist/types/utils/hct-color-utils/alpha-from-argb.d.ts +4 -0
- package/dist/types/utils/hct-color-utils/argb-from-linrgb.d.ts +4 -0
- package/dist/types/utils/hct-color-utils/argb-from-lstar.d.ts +8 -0
- package/dist/types/utils/hct-color-utils/argb-from-rgba.d.ts +8 -0
- package/dist/types/utils/hct-color-utils/argb-from-xyz.d.ts +4 -0
- package/dist/types/utils/hct-color-utils/blue-from-argb.d.ts +4 -0
- package/dist/types/utils/hct-color-utils/clamp-component.d.ts +1 -0
- package/dist/types/utils/hct-color-utils/green-from-argb.d.ts +4 -0
- package/dist/types/utils/hct-color-utils/index.d.ts +2 -1
- package/dist/types/utils/hct-color-utils/lab-f.d.ts +1 -0
- package/dist/types/utils/hct-color-utils/lab-invf.d.ts +1 -0
- package/dist/types/utils/hct-color-utils/lstar-from-argb.d.ts +7 -0
- package/dist/types/utils/hct-color-utils/lstar-from-y.d.ts +12 -0
- package/dist/types/utils/hct-color-utils/red-from-argb.d.ts +4 -0
- package/dist/types/utils/hct-color-utils/rgba-from-argb.d.ts +8 -0
- package/dist/types/utils/hct-color-utils/rgba.d.ts +14 -0
- package/dist/types/utils/hct-color-utils/white-point-d65.d.ts +6 -0
- package/dist/types/utils/hct-color-utils/y-from-lstar.d.ts +12 -0
- package/dist/types/utils/hex-to-hsl.d.ts +1 -0
- package/dist/types/utils/hex-to-rgb-a.d.ts +1 -0
- package/dist/types/utils/hex-to-rgb.d.ts +1 -0
- package/dist/types/utils/is-valid-hex.d.ts +1 -0
- package/dist/types/utils/reduce-token-map.d.ts +6 -0
- package/dist/types/utils/rgb-to-lab.d.ts +1 -0
- package/dist/types-ts4.5/artifacts/palettes-raw/palette.d.ts +1 -1
- package/dist/types-ts4.5/entry-points/theme-state-transformer.d.ts +2 -1
- package/dist/types-ts4.5/index.d.ts +2 -1
- package/dist/types-ts4.5/is-color-mode.d.ts +2 -0
- package/dist/types-ts4.5/is-theme-ids.d.ts +2 -0
- package/dist/types-ts4.5/is-theme-kind.d.ts +11 -0
- package/dist/types-ts4.5/theme-color-modes.d.ts +1 -0
- package/dist/types-ts4.5/theme-config.d.ts +8 -40
- package/dist/types-ts4.5/theme-ids.d.ts +1 -0
- package/dist/types-ts4.5/theme-object-to-string.d.ts +13 -0
- package/dist/types-ts4.5/theme-options-schema.d.ts +7 -0
- package/dist/types-ts4.5/theme-state-defaults.d.ts +14 -0
- package/dist/types-ts4.5/theme-state.d.ts +17 -0
- package/dist/types-ts4.5/{theme-state-transformer.d.ts → theme-string-to-object.d.ts} +0 -12
- package/dist/types-ts4.5/utils/additional-contrast-checker.d.ts +9 -0
- package/dist/types-ts4.5/utils/custom-theme-loading-utils.d.ts +1 -6
- package/dist/types-ts4.5/utils/custom-theme-token-contrast-check.d.ts +0 -9
- package/dist/types-ts4.5/utils/delta-e.d.ts +1 -0
- package/dist/types-ts4.5/utils/generate-colors.d.ts +5 -0
- package/dist/types-ts4.5/utils/{generate-custom-color-ramp.d.ts → generate-token-map-with-contrast-check.d.ts} +1 -8
- package/dist/types-ts4.5/utils/generate-token-map.d.ts +11 -0
- package/dist/types-ts4.5/utils/get-contrast-ratio.d.ts +1 -0
- package/dist/types-ts4.5/utils/hct-color-utils/alpha-from-argb.d.ts +4 -0
- package/dist/types-ts4.5/utils/hct-color-utils/argb-from-linrgb.d.ts +4 -0
- package/dist/types-ts4.5/utils/hct-color-utils/argb-from-lstar.d.ts +8 -0
- package/dist/types-ts4.5/utils/hct-color-utils/argb-from-rgba.d.ts +8 -0
- package/dist/types-ts4.5/utils/hct-color-utils/argb-from-xyz.d.ts +4 -0
- package/dist/types-ts4.5/utils/hct-color-utils/blue-from-argb.d.ts +4 -0
- package/dist/types-ts4.5/utils/hct-color-utils/clamp-component.d.ts +1 -0
- package/dist/types-ts4.5/utils/hct-color-utils/green-from-argb.d.ts +4 -0
- package/dist/types-ts4.5/utils/hct-color-utils/index.d.ts +2 -1
- package/dist/types-ts4.5/utils/hct-color-utils/lab-f.d.ts +1 -0
- package/dist/types-ts4.5/utils/hct-color-utils/lab-invf.d.ts +1 -0
- package/dist/types-ts4.5/utils/hct-color-utils/lstar-from-argb.d.ts +7 -0
- package/dist/types-ts4.5/utils/hct-color-utils/lstar-from-y.d.ts +12 -0
- package/dist/types-ts4.5/utils/hct-color-utils/red-from-argb.d.ts +4 -0
- package/dist/types-ts4.5/utils/hct-color-utils/rgba-from-argb.d.ts +8 -0
- package/dist/types-ts4.5/utils/hct-color-utils/rgba.d.ts +14 -0
- package/dist/types-ts4.5/utils/hct-color-utils/white-point-d65.d.ts +6 -0
- package/dist/types-ts4.5/utils/hct-color-utils/y-from-lstar.d.ts +12 -0
- package/dist/types-ts4.5/utils/hex-to-hsl.d.ts +5 -0
- package/dist/types-ts4.5/utils/hex-to-rgb-a.d.ts +6 -0
- package/dist/types-ts4.5/utils/hex-to-rgb.d.ts +5 -0
- package/dist/types-ts4.5/utils/is-valid-hex.d.ts +1 -0
- package/dist/types-ts4.5/utils/reduce-token-map.d.ts +6 -0
- package/dist/types-ts4.5/utils/rgb-to-lab.d.ts +5 -0
- package/package.json +5 -5
- package/dist/cjs/theme-state-transformer.js +0 -93
- package/dist/cjs/utils/color-utils.js +0 -176
- package/dist/cjs/utils/hct-color-utils/color-utils.js +0 -279
- package/dist/es2019/theme-state-transformer.js +0 -70
- package/dist/es2019/utils/color-utils.js +0 -136
- package/dist/es2019/utils/hct-color-utils/color-utils.js +0 -249
- package/dist/esm/theme-state-transformer.js +0 -86
- package/dist/esm/utils/color-utils.js +0 -138
- package/dist/esm/utils/hct-color-utils/color-utils.js +0 -248
- package/dist/types/utils/color-utils.d.ts +0 -10
- package/dist/types/utils/hct-color-utils/color-utils.d.ts +0 -88
- package/dist/types-ts4.5/utils/color-utils.d.ts +0 -23
- package/dist/types-ts4.5/utils/hct-color-utils/color-utils.d.ts +0 -88
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
import tokens from '../artifacts/token-names';
|
|
2
1
|
import { type ThemeColorModes, type ThemeOptionsSchema } from '../theme-config';
|
|
3
|
-
type Token = keyof typeof tokens;
|
|
4
2
|
type ThemeAttributeId = 'light' | 'dark';
|
|
5
3
|
export declare function findMissingCustomStyleElements(UNSAFE_themeOptions: ThemeOptionsSchema, mode: ThemeColorModes): ThemeAttributeId[];
|
|
6
|
-
export
|
|
7
|
-
[key in Token]?: number | string;
|
|
8
|
-
}, themeRamp: string[]): string;
|
|
9
|
-
export { limitSizeOfCustomStyleElements } from './limit-size-of-custom-style-elements';
|
|
4
|
+
export {};
|
|
@@ -8,13 +8,4 @@ interface AdditionalContrastCheck {
|
|
|
8
8
|
updatedTokens: Token[];
|
|
9
9
|
}
|
|
10
10
|
export declare const additionalChecks: AdditionalContrastCheck[];
|
|
11
|
-
export declare const additionalContrastChecker: ({ customThemeTokenMap, mode, themeRamp, }: {
|
|
12
|
-
customThemeTokenMap: {
|
|
13
|
-
[key: string]: number | string;
|
|
14
|
-
};
|
|
15
|
-
mode: "light" | "dark";
|
|
16
|
-
themeRamp: string[];
|
|
17
|
-
}) => {
|
|
18
|
-
[key: string]: number;
|
|
19
|
-
};
|
|
20
11
|
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function deltaE(rgbA: number[], rgbB: number[]): number;
|
|
@@ -5,10 +5,5 @@ type TokenMap = {
|
|
|
5
5
|
[key in Token]?: number | string;
|
|
6
6
|
};
|
|
7
7
|
type Mode = 'light' | 'dark';
|
|
8
|
-
export declare const generateColors: (brandColor: CSSColor) => {
|
|
9
|
-
ramp: CSSColor[];
|
|
10
|
-
replacedColor: CSSColor;
|
|
11
|
-
};
|
|
12
|
-
export declare const generateTokenMap: (brandColor: CSSColor, mode: ThemeColorModes, themeRamp?: CSSColor[]) => { [mode in Mode]?: TokenMap; };
|
|
13
8
|
export declare const generateTokenMapWithContrastCheck: (brandColor: CSSColor, mode: ThemeColorModes, themeRamp?: CSSColor[]) => { [mode in Mode]?: TokenMap; };
|
|
14
|
-
export {
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type tokens from '../artifacts/token-names';
|
|
2
|
+
import { type CSSColor, type ThemeColorModes } from '../theme-config';
|
|
3
|
+
type Token = keyof typeof tokens;
|
|
4
|
+
type TokenMap = {
|
|
5
|
+
[key in Token]?: number | string;
|
|
6
|
+
};
|
|
7
|
+
type Mode = 'light' | 'dark';
|
|
8
|
+
export declare const generateTokenMap: (brandColor: CSSColor, mode: ThemeColorModes, themeRamp?: CSSColor[]) => { [mode in Mode]?: TokenMap; };
|
|
9
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function getContrastRatio(foreground: string, background: string): number;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { Rgba } from './rgba';
|
|
2
|
+
/**
|
|
3
|
+
* Return int32 color from a given RGBA component
|
|
4
|
+
*
|
|
5
|
+
* @param rgba RGBA representation of a int32 color.
|
|
6
|
+
* @returns ARGB representation of a int32 color.
|
|
7
|
+
*/
|
|
8
|
+
export declare function argbFromRgba({ r, g, b, a }: Rgba): number;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function clampComponent(value: number): number;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function labF(t: number): number;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function labInvf(ft: number): number;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Converts a Y value to an L* value.
|
|
3
|
+
*
|
|
4
|
+
* L* in L*a*b* and Y in XYZ measure the same quantity, luminance.
|
|
5
|
+
*
|
|
6
|
+
* L* measures perceptual luminance, a linear scale. Y in XYZ
|
|
7
|
+
* measures relative luminance, a logarithmic scale.
|
|
8
|
+
*
|
|
9
|
+
* @param y Y in XYZ
|
|
10
|
+
* @return L* in L*a*b*
|
|
11
|
+
*/
|
|
12
|
+
export declare function lstarFromY(y: number): number;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* RGBA component
|
|
3
|
+
*
|
|
4
|
+
* @param r Red value should be between 0-255
|
|
5
|
+
* @param g Green value should be between 0-255
|
|
6
|
+
* @param b Blue value should be between 0-255
|
|
7
|
+
* @param a Alpha value should be between 0-255
|
|
8
|
+
*/
|
|
9
|
+
export interface Rgba {
|
|
10
|
+
r: number;
|
|
11
|
+
g: number;
|
|
12
|
+
b: number;
|
|
13
|
+
a: number;
|
|
14
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Converts an L* value to a Y value.
|
|
3
|
+
*
|
|
4
|
+
* L* in L*a*b* and Y in XYZ measure the same quantity, luminance.
|
|
5
|
+
*
|
|
6
|
+
* L* measures perceptual luminance, a linear scale. Y in XYZ
|
|
7
|
+
* measures relative luminance, a logarithmic scale.
|
|
8
|
+
*
|
|
9
|
+
* @param lstar L* in L*a*b*
|
|
10
|
+
* @return Y in XYZ
|
|
11
|
+
*/
|
|
12
|
+
export declare function yFromLstar(lstar: number): number;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function hexToHSL(hex: string): [number, number, number];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function hexToRgbA(hex: string): [number, number, number, number];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function hexToRgb(hex: string): [number, number, number];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const isValidHex: (hex: string) => boolean;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function rgbToLab(rgb: number[]): [number, number, number];
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
3
|
-
* @codegen <<SignedSource::
|
|
3
|
+
* @codegen <<SignedSource::53794f446833e9543b9fc09809fc6844>>
|
|
4
4
|
* @codegenCommand yarn build tokens
|
|
5
5
|
*/
|
|
6
6
|
type TokenValue = string | number;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export { themeStringToObject
|
|
1
|
+
export { themeStringToObject } from '../theme-string-to-object';
|
|
2
|
+
export { themeObjectToString } from '../theme-object-to-string';
|
|
@@ -9,7 +9,8 @@ export { default as getSSRAutoScript } from './get-ssr-auto-script';
|
|
|
9
9
|
export { default as useThemeObserver } from './use-theme-observer';
|
|
10
10
|
export { default as ThemeMutationObserver } from './theme-mutation-observer';
|
|
11
11
|
export { default as getGlobalTheme } from './get-global-theme';
|
|
12
|
-
export { themeStringToObject
|
|
12
|
+
export { themeStringToObject } from './theme-string-to-object';
|
|
13
|
+
export { themeObjectToString } from './theme-object-to-string';
|
|
13
14
|
export { default as themeImportMap } from './artifacts/theme-import-map';
|
|
14
15
|
export type { CSSToken } from './artifacts/token-names';
|
|
15
16
|
export type { ActiveTokens } from './artifacts/types';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
declare const themeKinds: readonly [
|
|
2
|
+
"light",
|
|
3
|
+
"dark",
|
|
4
|
+
"spacing",
|
|
5
|
+
"typography",
|
|
6
|
+
"shape",
|
|
7
|
+
"motion"
|
|
8
|
+
];
|
|
9
|
+
type ThemeKind = (typeof themeKinds)[number];
|
|
10
|
+
export declare const isThemeKind: (themeKind: string) => themeKind is ThemeKind;
|
|
11
|
+
export {};
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { type themeColorModes } from './theme-color-modes';
|
|
2
|
-
import { themeIds } from './theme-ids';
|
|
3
1
|
/**
|
|
4
2
|
* This file contains the source of truth for themes and all associated meta data.
|
|
5
3
|
*/
|
|
4
|
+
import type { ThemeColorModes } from './theme-color-modes';
|
|
5
|
+
import { type ThemeIds } from './theme-ids';
|
|
6
|
+
import type { ThemeState } from './theme-state';
|
|
6
7
|
/**
|
|
7
8
|
* Themes: The internal identifier of a theme.
|
|
8
9
|
* These ids are what the actual theme files/folders are called.
|
|
@@ -23,7 +24,6 @@ export type ThemeOverrides = Themes;
|
|
|
23
24
|
* In the future other types may be introduced such as typography.
|
|
24
25
|
*/
|
|
25
26
|
type ThemeKinds = 'color' | 'spacing' | 'typography' | 'shape' | 'motion';
|
|
26
|
-
export type ThemeColorModes = (typeof themeColorModes)[number];
|
|
27
27
|
export type DataColorModes = Exclude<ThemeColorModes, 'auto'>;
|
|
28
28
|
/**
|
|
29
29
|
* Contrast preferences: The system contrast preference
|
|
@@ -35,7 +35,6 @@ declare const themeContrastModes: readonly [
|
|
|
35
35
|
];
|
|
36
36
|
export type ThemeContrastModes = (typeof themeContrastModes)[number];
|
|
37
37
|
export type DataContrastModes = 'more' | 'no-preference' | 'auto';
|
|
38
|
-
export type ThemeIds = (typeof themeIds)[number];
|
|
39
38
|
/**
|
|
40
39
|
* Theme override ids: the equivalent of themeIds for theme overrides.
|
|
41
40
|
* Theme overrides are temporary and there may not be any defined at times.
|
|
@@ -107,40 +106,6 @@ interface ThemeConfig {
|
|
|
107
106
|
increasesContrastFor?: ThemeIds;
|
|
108
107
|
}
|
|
109
108
|
declare const themeConfig: Record<Themes | ThemeOverrides, ThemeConfig>;
|
|
110
|
-
type HEX = `#${string}`;
|
|
111
|
-
export type CSSColor = HEX;
|
|
112
|
-
/**
|
|
113
|
-
* ThemeOptionsSchema: additional configuration options used to customize Atlassian's themes
|
|
114
|
-
*/
|
|
115
|
-
export interface ThemeOptionsSchema {
|
|
116
|
-
brandColor: CSSColor;
|
|
117
|
-
}
|
|
118
|
-
/**
|
|
119
|
-
* ThemeState: the standard representation of an app's current theme and preferences
|
|
120
|
-
*/
|
|
121
|
-
export interface ThemeState {
|
|
122
|
-
light: Extract<ThemeIds, 'light' | 'light-future' | 'dark' | 'dark-future' | 'light-increased-contrast' | 'dark-increased-contrast'>;
|
|
123
|
-
dark: Extract<ThemeIds, 'light' | 'light-future' | 'dark' | 'dark-future' | 'light-increased-contrast' | 'dark-increased-contrast'>;
|
|
124
|
-
colorMode: ThemeColorModes;
|
|
125
|
-
contrastMode: ThemeContrastModes;
|
|
126
|
-
shape?: Extract<ThemeIds, 'shape'>;
|
|
127
|
-
spacing: Extract<ThemeIds, 'spacing'>;
|
|
128
|
-
typography: Extract<ThemeIds, 'typography'>;
|
|
129
|
-
motion?: Extract<ThemeIds, 'motion'>;
|
|
130
|
-
UNSAFE_themeOptions?: ThemeOptionsSchema;
|
|
131
|
-
}
|
|
132
|
-
/**
|
|
133
|
-
* Can't evaluate typography feature flags at the module level,
|
|
134
|
-
* it will always resolve to false when server side rendered or when flags are loaded async.
|
|
135
|
-
*/
|
|
136
|
-
interface ThemeStateDefaults extends Omit<ThemeState, 'shape' | 'motion'> {
|
|
137
|
-
shape: () => ThemeState['shape'];
|
|
138
|
-
motion: () => ThemeState['motion'];
|
|
139
|
-
}
|
|
140
|
-
/**
|
|
141
|
-
* themeStateDefaults: the default values for ThemeState used by theming utilities
|
|
142
|
-
*/
|
|
143
|
-
export declare const themeStateDefaults: ThemeStateDefaults;
|
|
144
109
|
/**
|
|
145
110
|
* Represents theme state once mounted to the page
|
|
146
111
|
* (the page doesn't have an "auto" color mode, it's either light or dark)
|
|
@@ -149,5 +114,8 @@ export interface ActiveThemeState extends ThemeState {
|
|
|
149
114
|
colorMode: DataColorModes;
|
|
150
115
|
}
|
|
151
116
|
export default themeConfig;
|
|
152
|
-
export { themeColorModes } from './theme-color-modes';
|
|
153
|
-
export { themeIds } from './theme-ids';
|
|
117
|
+
export { themeColorModes, type ThemeColorModes } from './theme-color-modes';
|
|
118
|
+
export { themeIds, type ThemeIds } from './theme-ids';
|
|
119
|
+
export { themeStateDefaults } from './theme-state-defaults';
|
|
120
|
+
export { type ThemeOptionsSchema, type CSSColor } from './theme-options-schema';
|
|
121
|
+
export { type ThemeState } from './theme-state';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { ThemeState } from './theme-state';
|
|
2
|
+
/**
|
|
3
|
+
* Converts a theme object to a string formatted for the `data-theme` HTML attribute.
|
|
4
|
+
*
|
|
5
|
+
* @param {object} themes The themes that should be applied.
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```
|
|
9
|
+
* themeObjectToString({ dark: 'dark', light: 'light', spacing: 'spacing' });
|
|
10
|
+
* // returns 'dark:dark light:light spacing:spacing'
|
|
11
|
+
* ```
|
|
12
|
+
*/
|
|
13
|
+
export declare const themeObjectToString: (themeState: Partial<ThemeState>) => string;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { ThemeState } from './theme-state';
|
|
2
|
+
/**
|
|
3
|
+
* Can't evaluate typography feature flags at the module level,
|
|
4
|
+
* it will always resolve to false when server side rendered or when flags are loaded async.
|
|
5
|
+
*/
|
|
6
|
+
interface ThemeStateDefaults extends Omit<ThemeState, 'shape' | 'motion'> {
|
|
7
|
+
shape: () => ThemeState['shape'];
|
|
8
|
+
motion: () => ThemeState['motion'];
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* themeStateDefaults: the default values for ThemeState used by theming utilities
|
|
12
|
+
*/
|
|
13
|
+
export declare const themeStateDefaults: ThemeStateDefaults;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { ThemeColorModes } from './theme-color-modes';
|
|
2
|
+
import type { ThemeContrastModes, ThemeOptionsSchema } from './theme-config';
|
|
3
|
+
import type { ThemeIds } from './theme-ids';
|
|
4
|
+
/**
|
|
5
|
+
* ThemeState: the standard representation of an app's current theme and preferences
|
|
6
|
+
*/
|
|
7
|
+
export interface ThemeState {
|
|
8
|
+
light: Extract<ThemeIds, 'light' | 'light-future' | 'dark' | 'dark-future' | 'light-increased-contrast' | 'dark-increased-contrast'>;
|
|
9
|
+
dark: Extract<ThemeIds, 'light' | 'light-future' | 'dark' | 'dark-future' | 'light-increased-contrast' | 'dark-increased-contrast'>;
|
|
10
|
+
colorMode: ThemeColorModes;
|
|
11
|
+
contrastMode: ThemeContrastModes;
|
|
12
|
+
shape?: Extract<ThemeIds, 'shape'>;
|
|
13
|
+
spacing: Extract<ThemeIds, 'spacing'>;
|
|
14
|
+
typography: Extract<ThemeIds, 'typography'>;
|
|
15
|
+
motion?: Extract<ThemeIds, 'motion'>;
|
|
16
|
+
UNSAFE_themeOptions?: ThemeOptionsSchema;
|
|
17
|
+
}
|
|
@@ -12,15 +12,3 @@ import type { ThemeState } from './theme-config';
|
|
|
12
12
|
* ```
|
|
13
13
|
*/
|
|
14
14
|
export declare const themeStringToObject: (themeState: string) => Partial<ThemeState>;
|
|
15
|
-
/**
|
|
16
|
-
* Converts a theme object to a string formatted for the `data-theme` HTML attribute.
|
|
17
|
-
*
|
|
18
|
-
* @param {object} themes The themes that should be applied.
|
|
19
|
-
*
|
|
20
|
-
* @example
|
|
21
|
-
* ```
|
|
22
|
-
* themeObjectToString({ dark: 'dark', light: 'light', spacing: 'spacing' });
|
|
23
|
-
* // returns 'dark:dark light:light spacing:spacing'
|
|
24
|
-
* ```
|
|
25
|
-
*/
|
|
26
|
-
export declare const themeObjectToString: (themeState: Partial<ThemeState>) => string;
|
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
import tokens from '../artifacts/token-names';
|
|
2
1
|
import { type ThemeColorModes, type ThemeOptionsSchema } from '../theme-config';
|
|
3
|
-
type Token = keyof typeof tokens;
|
|
4
2
|
type ThemeAttributeId = 'light' | 'dark';
|
|
5
3
|
export declare function findMissingCustomStyleElements(UNSAFE_themeOptions: ThemeOptionsSchema, mode: ThemeColorModes): ThemeAttributeId[];
|
|
6
|
-
export
|
|
7
|
-
[key in Token]?: number | string;
|
|
8
|
-
}, themeRamp: string[]): string;
|
|
9
|
-
export { limitSizeOfCustomStyleElements } from './limit-size-of-custom-style-elements';
|
|
4
|
+
export {};
|
|
@@ -8,13 +8,4 @@ interface AdditionalContrastCheck {
|
|
|
8
8
|
updatedTokens: Token[];
|
|
9
9
|
}
|
|
10
10
|
export declare const additionalChecks: AdditionalContrastCheck[];
|
|
11
|
-
export declare const additionalContrastChecker: ({ customThemeTokenMap, mode, themeRamp, }: {
|
|
12
|
-
customThemeTokenMap: {
|
|
13
|
-
[key: string]: number | string;
|
|
14
|
-
};
|
|
15
|
-
mode: "light" | "dark";
|
|
16
|
-
themeRamp: string[];
|
|
17
|
-
}) => {
|
|
18
|
-
[key: string]: number;
|
|
19
|
-
};
|
|
20
11
|
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function deltaE(rgbA: number[], rgbB: number[]): number;
|
|
@@ -5,14 +5,7 @@ type TokenMap = {
|
|
|
5
5
|
[key in Token]?: number | string;
|
|
6
6
|
};
|
|
7
7
|
type Mode = 'light' | 'dark';
|
|
8
|
-
export declare const generateColors: (brandColor: CSSColor) => {
|
|
9
|
-
ramp: CSSColor[];
|
|
10
|
-
replacedColor: CSSColor;
|
|
11
|
-
};
|
|
12
|
-
export declare const generateTokenMap: (brandColor: CSSColor, mode: ThemeColorModes, themeRamp?: CSSColor[]) => {
|
|
13
|
-
[mode in Mode]?: TokenMap;
|
|
14
|
-
};
|
|
15
8
|
export declare const generateTokenMapWithContrastCheck: (brandColor: CSSColor, mode: ThemeColorModes, themeRamp?: CSSColor[]) => {
|
|
16
9
|
[mode in Mode]?: TokenMap;
|
|
17
10
|
};
|
|
18
|
-
export {
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type tokens from '../artifacts/token-names';
|
|
2
|
+
import { type CSSColor, type ThemeColorModes } from '../theme-config';
|
|
3
|
+
type Token = keyof typeof tokens;
|
|
4
|
+
type TokenMap = {
|
|
5
|
+
[key in Token]?: number | string;
|
|
6
|
+
};
|
|
7
|
+
type Mode = 'light' | 'dark';
|
|
8
|
+
export declare const generateTokenMap: (brandColor: CSSColor, mode: ThemeColorModes, themeRamp?: CSSColor[]) => {
|
|
9
|
+
[mode in Mode]?: TokenMap;
|
|
10
|
+
};
|
|
11
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function getContrastRatio(foreground: string, background: string): number;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { Rgba } from './rgba';
|
|
2
|
+
/**
|
|
3
|
+
* Return int32 color from a given RGBA component
|
|
4
|
+
*
|
|
5
|
+
* @param rgba RGBA representation of a int32 color.
|
|
6
|
+
* @returns ARGB representation of a int32 color.
|
|
7
|
+
*/
|
|
8
|
+
export declare function argbFromRgba({ r, g, b, a }: Rgba): number;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function clampComponent(value: number): number;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function labF(t: number): number;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function labInvf(ft: number): number;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Converts a Y value to an L* value.
|
|
3
|
+
*
|
|
4
|
+
* L* in L*a*b* and Y in XYZ measure the same quantity, luminance.
|
|
5
|
+
*
|
|
6
|
+
* L* measures perceptual luminance, a linear scale. Y in XYZ
|
|
7
|
+
* measures relative luminance, a logarithmic scale.
|
|
8
|
+
*
|
|
9
|
+
* @param y Y in XYZ
|
|
10
|
+
* @return L* in L*a*b*
|
|
11
|
+
*/
|
|
12
|
+
export declare function lstarFromY(y: number): number;
|