@atlaskit/tokens 13.0.4 → 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 +16 -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/artifacts/themes/atlassian-dark-increased-contrast.js +2 -2
- package/dist/cjs/artifacts/themes/atlassian-dark.js +2 -2
- package/dist/cjs/artifacts/themes/atlassian-light-increased-contrast.js +2 -2
- package/dist/cjs/artifacts/themes/atlassian-light.js +2 -2
- package/dist/cjs/artifacts/token-default-values.js +2 -2
- package/dist/cjs/artifacts/tokens-raw/atlassian-dark-increased-contrast.js +3 -3
- package/dist/cjs/artifacts/tokens-raw/atlassian-dark.js +3 -3
- package/dist/cjs/artifacts/tokens-raw/atlassian-light-increased-contrast.js +3 -3
- package/dist/cjs/artifacts/tokens-raw/atlassian-light.js +3 -3
- package/dist/cjs/constants.js +1 -0
- package/dist/cjs/entry-points/theme-state-transformer.js +4 -3
- package/dist/cjs/entry-points/token-metadata.codegen.js +2 -2
- 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/get-theme-styles.js +27 -27
- 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/set-global-theme.js +32 -31
- package/dist/cjs/theme-config.js +9 -43
- 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 -20
- package/dist/cjs/utils/custom-theme-token-contrast-check.js +2 -38
- 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 -71
- 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/load-theme-css.js +4 -4
- package/dist/cjs/utils/reduce-token-map.js +18 -0
- package/dist/cjs/utils/rgb-to-lab.js +24 -0
- package/dist/cjs/utils/theme-loading.js +8 -8
- package/dist/es2019/artifacts/palettes-raw/palette.js +35 -1
- package/dist/es2019/artifacts/themes/atlassian-dark-increased-contrast.js +2 -2
- package/dist/es2019/artifacts/themes/atlassian-dark.js +2 -2
- package/dist/es2019/artifacts/themes/atlassian-light-increased-contrast.js +2 -2
- package/dist/es2019/artifacts/themes/atlassian-light.js +2 -2
- package/dist/es2019/artifacts/token-default-values.js +2 -2
- package/dist/es2019/artifacts/tokens-raw/atlassian-dark-increased-contrast.js +3 -3
- package/dist/es2019/artifacts/tokens-raw/atlassian-dark.js +3 -3
- package/dist/es2019/artifacts/tokens-raw/atlassian-light-increased-contrast.js +3 -3
- package/dist/es2019/artifacts/tokens-raw/atlassian-light.js +3 -3
- package/dist/es2019/constants.js +1 -0
- package/dist/es2019/entry-points/theme-state-transformer.js +2 -1
- package/dist/es2019/entry-points/token-metadata.codegen.js +2 -2
- 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 +5 -44
- 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 -9
- package/dist/es2019/utils/custom-theme-token-contrast-check.js +1 -39
- 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 -59
- 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/artifacts/themes/atlassian-dark-increased-contrast.js +2 -2
- package/dist/esm/artifacts/themes/atlassian-dark.js +2 -2
- package/dist/esm/artifacts/themes/atlassian-light-increased-contrast.js +2 -2
- package/dist/esm/artifacts/themes/atlassian-light.js +2 -2
- package/dist/esm/artifacts/token-default-values.js +2 -2
- package/dist/esm/artifacts/tokens-raw/atlassian-dark-increased-contrast.js +3 -3
- package/dist/esm/artifacts/tokens-raw/atlassian-dark.js +3 -3
- package/dist/esm/artifacts/tokens-raw/atlassian-light-increased-contrast.js +3 -3
- package/dist/esm/artifacts/tokens-raw/atlassian-light.js +3 -3
- package/dist/esm/constants.js +1 -0
- package/dist/esm/entry-points/theme-state-transformer.js +2 -1
- package/dist/esm/entry-points/token-metadata.codegen.js +2 -2
- 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/get-theme-styles.js +26 -26
- 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/set-global-theme.js +31 -30
- package/dist/esm/theme-config.js +5 -44
- 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 -13
- package/dist/esm/utils/custom-theme-token-contrast-check.js +1 -36
- 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 -63
- 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/load-theme-css.js +4 -4
- package/dist/esm/utils/reduce-token-map.js +11 -0
- package/dist/esm/utils/rgb-to-lab.js +18 -0
- package/dist/esm/utils/theme-loading.js +8 -8
- package/dist/types/artifacts/palettes-raw/palette.d.ts +1 -1
- package/dist/types/artifacts/themes/atlassian-dark-increased-contrast.d.ts +2 -2
- package/dist/types/artifacts/themes/atlassian-dark.d.ts +2 -2
- package/dist/types/artifacts/themes/atlassian-light-increased-contrast.d.ts +2 -2
- package/dist/types/artifacts/themes/atlassian-light.d.ts +2 -2
- package/dist/types/artifacts/token-default-values.d.ts +2 -2
- package/dist/types/artifacts/tokens-raw/atlassian-dark-increased-contrast.d.ts +1 -1
- package/dist/types/artifacts/tokens-raw/atlassian-dark.d.ts +1 -1
- package/dist/types/artifacts/tokens-raw/atlassian-light-increased-contrast.d.ts +1 -1
- package/dist/types/artifacts/tokens-raw/atlassian-light.d.ts +1 -1
- package/dist/types/entry-points/theme-state-transformer.d.ts +2 -1
- package/dist/types/entry-points/token-metadata.codegen.d.ts +1 -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/artifacts/themes/atlassian-dark-increased-contrast.d.ts +2 -2
- package/dist/types-ts4.5/artifacts/themes/atlassian-dark.d.ts +2 -2
- package/dist/types-ts4.5/artifacts/themes/atlassian-light-increased-contrast.d.ts +2 -2
- package/dist/types-ts4.5/artifacts/themes/atlassian-light.d.ts +2 -2
- package/dist/types-ts4.5/artifacts/token-default-values.d.ts +2 -2
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-dark-increased-contrast.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-dark.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-light-increased-contrast.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-light.d.ts +1 -1
- package/dist/types-ts4.5/entry-points/theme-state-transformer.d.ts +2 -1
- package/dist/types-ts4.5/entry-points/token-metadata.codegen.d.ts +1 -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/figma/atlassian-dark-increased-contrast.json +1 -1
- package/figma/atlassian-dark.json +1 -1
- package/figma/atlassian-light-increased-contrast.json +1 -1
- package/figma/atlassian-light.json +1 -1
- package/package.json +12 -12
- package/tokens.docs.tsx +48 -46
- package/dist/cjs/theme-state-transformer.js +0 -92
- package/dist/cjs/utils/color-utils.js +0 -168
- package/dist/cjs/utils/hct-color-utils/color-utils.js +0 -271
- package/dist/es2019/theme-state-transformer.js +0 -69
- package/dist/es2019/utils/color-utils.js +0 -128
- package/dist/es2019/utils/hct-color-utils/color-utils.js +0 -241
- package/dist/esm/theme-state-transformer.js +0 -85
- package/dist/esm/utils/color-utils.js +0 -130
- package/dist/esm/utils/hct-color-utils/color-utils.js +0 -240
- 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
|
@@ -15,7 +15,7 @@ var _getThemeOverridePreferences = require("./utils/get-theme-override-preferenc
|
|
|
15
15
|
var _getThemePreferences = require("./utils/get-theme-preferences");
|
|
16
16
|
var _isValidBrandHex = require("./utils/is-valid-brand-hex");
|
|
17
17
|
var _loadThemeCss = require("./utils/load-theme-css");
|
|
18
|
-
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var
|
|
18
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t3 in e) "default" !== _t3 && {}.hasOwnProperty.call(e, _t3) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t3)) && (i.get || i.set) ? o(f, _t3, i) : f[_t3] = e[_t3]); return f; })(e, t); }
|
|
19
19
|
/**
|
|
20
20
|
* Takes an object containing theme preferences, and returns an array of objects for use in applying styles to the document head.
|
|
21
21
|
* Only supplies the color themes necessary for initial render, based on the current themeState. I.e. if in light mode, dark mode themes are not returned.
|
|
@@ -36,7 +36,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
|
|
|
36
36
|
var getThemeStyles = /*#__PURE__*/function () {
|
|
37
37
|
var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(preferences) {
|
|
38
38
|
var themePreferences, themeOverridePreferences, themeState, results;
|
|
39
|
-
return _regenerator.default.wrap(function
|
|
39
|
+
return _regenerator.default.wrap(function (_context3) {
|
|
40
40
|
while (1) switch (_context3.prev = _context3.next) {
|
|
41
41
|
case 0:
|
|
42
42
|
themeOverridePreferences = [];
|
|
@@ -63,17 +63,17 @@ var getThemeStyles = /*#__PURE__*/function () {
|
|
|
63
63
|
themePreferences = (0, _getThemePreferences.getThemePreferences)(themeState);
|
|
64
64
|
themeOverridePreferences = (0, _getThemeOverridePreferences.getThemeOverridePreferences)(themeState);
|
|
65
65
|
}
|
|
66
|
-
_context3.next =
|
|
66
|
+
_context3.next = 1;
|
|
67
67
|
return Promise.all([].concat((0, _toConsumableArray2.default)([].concat((0, _toConsumableArray2.default)(themePreferences), (0, _toConsumableArray2.default)(themeOverridePreferences)).map( /*#__PURE__*/function () {
|
|
68
68
|
var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(themeId) {
|
|
69
|
-
var css;
|
|
70
|
-
return _regenerator.default.wrap(function
|
|
69
|
+
var css, _t;
|
|
70
|
+
return _regenerator.default.wrap(function (_context) {
|
|
71
71
|
while (1) switch (_context.prev = _context.next) {
|
|
72
72
|
case 0:
|
|
73
73
|
_context.prev = 0;
|
|
74
|
-
_context.next =
|
|
74
|
+
_context.next = 1;
|
|
75
75
|
return (0, _loadThemeCss.loadThemeCss)(themeId);
|
|
76
|
-
case
|
|
76
|
+
case 1:
|
|
77
77
|
css = _context.sent;
|
|
78
78
|
return _context.abrupt("return", {
|
|
79
79
|
id: themeId,
|
|
@@ -82,15 +82,15 @@ var getThemeStyles = /*#__PURE__*/function () {
|
|
|
82
82
|
},
|
|
83
83
|
css: css
|
|
84
84
|
});
|
|
85
|
-
case
|
|
86
|
-
_context.prev =
|
|
87
|
-
|
|
85
|
+
case 2:
|
|
86
|
+
_context.prev = 2;
|
|
87
|
+
_t = _context["catch"](0);
|
|
88
88
|
return _context.abrupt("return", undefined);
|
|
89
|
-
case
|
|
89
|
+
case 3:
|
|
90
90
|
case "end":
|
|
91
91
|
return _context.stop();
|
|
92
92
|
}
|
|
93
|
-
}, _callee, null, [[0,
|
|
93
|
+
}, _callee, null, [[0, 2]]);
|
|
94
94
|
}));
|
|
95
95
|
return function (_x2) {
|
|
96
96
|
return _ref2.apply(this, arguments);
|
|
@@ -99,49 +99,49 @@ var getThemeStyles = /*#__PURE__*/function () {
|
|
|
99
99
|
// Add custom themes if they're present
|
|
100
100
|
(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
|
|
101
101
|
var _preferences$UNSAFE_t;
|
|
102
|
-
var _yield$import, getCustomThemeStyles, customThemeStyles;
|
|
103
|
-
return _regenerator.default.wrap(function
|
|
102
|
+
var _yield$import, getCustomThemeStyles, customThemeStyles, _t2;
|
|
103
|
+
return _regenerator.default.wrap(function (_context2) {
|
|
104
104
|
while (1) switch (_context2.prev = _context2.next) {
|
|
105
105
|
case 0:
|
|
106
106
|
if (!(preferences !== 'all' && preferences !== null && preferences !== void 0 && preferences.UNSAFE_themeOptions && (0, _isValidBrandHex.isValidBrandHex)(preferences === null || preferences === void 0 || (_preferences$UNSAFE_t = preferences.UNSAFE_themeOptions) === null || _preferences$UNSAFE_t === void 0 ? void 0 : _preferences$UNSAFE_t.brandColor))) {
|
|
107
|
-
_context2.next =
|
|
107
|
+
_context2.next = 5;
|
|
108
108
|
break;
|
|
109
109
|
}
|
|
110
110
|
_context2.prev = 1;
|
|
111
|
-
_context2.next =
|
|
111
|
+
_context2.next = 2;
|
|
112
112
|
return Promise.resolve().then(function () {
|
|
113
113
|
return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_atlassian-custom-theme" */
|
|
114
114
|
'./custom-theme'));
|
|
115
115
|
});
|
|
116
|
-
case
|
|
116
|
+
case 2:
|
|
117
117
|
_yield$import = _context2.sent;
|
|
118
118
|
getCustomThemeStyles = _yield$import.getCustomThemeStyles;
|
|
119
|
-
_context2.next =
|
|
119
|
+
_context2.next = 3;
|
|
120
120
|
return getCustomThemeStyles({
|
|
121
121
|
colorMode: (preferences === null || preferences === void 0 ? void 0 : preferences.colorMode) || _themeConfig.themeStateDefaults['colorMode'],
|
|
122
122
|
UNSAFE_themeOptions: preferences === null || preferences === void 0 ? void 0 : preferences.UNSAFE_themeOptions
|
|
123
123
|
});
|
|
124
|
-
case
|
|
124
|
+
case 3:
|
|
125
125
|
customThemeStyles = _context2.sent;
|
|
126
126
|
return _context2.abrupt("return", customThemeStyles);
|
|
127
|
-
case
|
|
128
|
-
_context2.prev =
|
|
129
|
-
|
|
127
|
+
case 4:
|
|
128
|
+
_context2.prev = 4;
|
|
129
|
+
_t2 = _context2["catch"](1);
|
|
130
130
|
return _context2.abrupt("return", undefined);
|
|
131
|
-
case
|
|
131
|
+
case 5:
|
|
132
132
|
return _context2.abrupt("return", undefined);
|
|
133
|
-
case
|
|
133
|
+
case 6:
|
|
134
134
|
case "end":
|
|
135
135
|
return _context2.stop();
|
|
136
136
|
}
|
|
137
|
-
}, _callee2, null, [[1,
|
|
137
|
+
}, _callee2, null, [[1, 4]]);
|
|
138
138
|
}))()]));
|
|
139
|
-
case
|
|
139
|
+
case 1:
|
|
140
140
|
results = _context3.sent;
|
|
141
141
|
return _context3.abrupt("return", results.flat().filter(function (theme) {
|
|
142
142
|
return theme !== undefined;
|
|
143
143
|
}));
|
|
144
|
-
case
|
|
144
|
+
case 2:
|
|
145
145
|
case "end":
|
|
146
146
|
return _context3.stop();
|
|
147
147
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -91,13 +91,13 @@ Object.defineProperty(exports, "themeImportMap", {
|
|
|
91
91
|
Object.defineProperty(exports, "themeObjectToString", {
|
|
92
92
|
enumerable: true,
|
|
93
93
|
get: function get() {
|
|
94
|
-
return
|
|
94
|
+
return _themeObjectToString.themeObjectToString;
|
|
95
95
|
}
|
|
96
96
|
});
|
|
97
97
|
Object.defineProperty(exports, "themeStringToObject", {
|
|
98
98
|
enumerable: true,
|
|
99
99
|
get: function get() {
|
|
100
|
-
return
|
|
100
|
+
return _themeStringToObject.themeStringToObject;
|
|
101
101
|
}
|
|
102
102
|
});
|
|
103
103
|
Object.defineProperty(exports, "token", {
|
|
@@ -123,6 +123,7 @@ var _getSsrAutoScript = _interopRequireDefault(require("./get-ssr-auto-script"))
|
|
|
123
123
|
var _useThemeObserver = _interopRequireDefault(require("./use-theme-observer"));
|
|
124
124
|
var _themeMutationObserver = _interopRequireDefault(require("./theme-mutation-observer"));
|
|
125
125
|
var _getGlobalTheme = _interopRequireDefault(require("./get-global-theme"));
|
|
126
|
-
var
|
|
126
|
+
var _themeStringToObject = require("./theme-string-to-object");
|
|
127
|
+
var _themeObjectToString = require("./theme-object-to-string");
|
|
127
128
|
var _themeImportMap = _interopRequireDefault(require("./artifacts/theme-import-map"));
|
|
128
129
|
var _constants = require("./constants");
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.isThemeIds = void 0;
|
|
7
|
+
var _themeIds = require("./theme-ids");
|
|
8
|
+
var isThemeIds = exports.isThemeIds = function isThemeIds(themeId) {
|
|
9
|
+
return _themeIds.themeIds.find(function (id) {
|
|
10
|
+
return id === themeId;
|
|
11
|
+
}) !== undefined;
|
|
12
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.isThemeKind = void 0;
|
|
7
|
+
var themeKinds = ['light', 'dark', 'spacing', 'typography', 'shape', 'motion'];
|
|
8
|
+
var isThemeKind = exports.isThemeKind = function isThemeKind(themeKind) {
|
|
9
|
+
return themeKinds.find(function (kind) {
|
|
10
|
+
return kind === themeKind;
|
|
11
|
+
}) !== undefined;
|
|
12
|
+
};
|
|
@@ -21,7 +21,7 @@ var _themeLoading = require("./utils/theme-loading");
|
|
|
21
21
|
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
|
|
22
22
|
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
23
23
|
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
24
|
-
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var
|
|
24
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
|
|
25
25
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
26
26
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
27
27
|
/**
|
|
@@ -80,8 +80,9 @@ var setGlobalTheme = /*#__PURE__*/function () {
|
|
|
80
80
|
_step,
|
|
81
81
|
themeId,
|
|
82
82
|
autoUnbind,
|
|
83
|
-
_args3 = arguments
|
|
84
|
-
|
|
83
|
+
_args3 = arguments,
|
|
84
|
+
_t;
|
|
85
|
+
return _regenerator.default.wrap(function (_context3) {
|
|
85
86
|
while (1) switch (_context3.prev = _context3.next) {
|
|
86
87
|
case 0:
|
|
87
88
|
nextThemeState = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : {};
|
|
@@ -115,14 +116,14 @@ var setGlobalTheme = /*#__PURE__*/function () {
|
|
|
115
116
|
loadingStrategy = themeLoader ? themeLoader : _themeLoading.loadAndAppendThemeCss; // Load standard themes
|
|
116
117
|
loadingTasks = themePreferences.map( /*#__PURE__*/function () {
|
|
117
118
|
var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(themeId) {
|
|
118
|
-
return _regenerator.default.wrap(function
|
|
119
|
+
return _regenerator.default.wrap(function (_context) {
|
|
119
120
|
while (1) switch (_context.prev = _context.next) {
|
|
120
121
|
case 0:
|
|
121
|
-
_context.next =
|
|
122
|
+
_context.next = 1;
|
|
122
123
|
return loadingStrategy(themeId);
|
|
123
|
-
case
|
|
124
|
+
case 1:
|
|
124
125
|
return _context.abrupt("return", _context.sent);
|
|
125
|
-
case
|
|
126
|
+
case 2:
|
|
126
127
|
case "end":
|
|
127
128
|
return _context.stop();
|
|
128
129
|
}
|
|
@@ -139,15 +140,15 @@ var setGlobalTheme = /*#__PURE__*/function () {
|
|
|
139
140
|
// Load custom theme styles
|
|
140
141
|
loadingTasks.push((0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
|
|
141
142
|
var _yield$import, loadAndAppendCustomThemeCss;
|
|
142
|
-
return _regenerator.default.wrap(function
|
|
143
|
+
return _regenerator.default.wrap(function (_context2) {
|
|
143
144
|
while (1) switch (_context2.prev = _context2.next) {
|
|
144
145
|
case 0:
|
|
145
|
-
_context2.next =
|
|
146
|
+
_context2.next = 1;
|
|
146
147
|
return Promise.resolve().then(function () {
|
|
147
148
|
return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_atlassian-custom-theme" */
|
|
148
149
|
'./custom-theme'));
|
|
149
150
|
});
|
|
150
|
-
case
|
|
151
|
+
case 1:
|
|
151
152
|
_yield$import = _context2.sent;
|
|
152
153
|
loadAndAppendCustomThemeCss = _yield$import.loadAndAppendCustomThemeCss;
|
|
153
154
|
loadAndAppendCustomThemeCss({
|
|
@@ -156,7 +157,7 @@ var setGlobalTheme = /*#__PURE__*/function () {
|
|
|
156
157
|
attrOfMissingCustomStyles[0],
|
|
157
158
|
UNSAFE_themeOptions: UNSAFE_themeOptions
|
|
158
159
|
});
|
|
159
|
-
case
|
|
160
|
+
case 2:
|
|
160
161
|
case "end":
|
|
161
162
|
return _context2.stop();
|
|
162
163
|
}
|
|
@@ -164,44 +165,44 @@ var setGlobalTheme = /*#__PURE__*/function () {
|
|
|
164
165
|
}))());
|
|
165
166
|
}
|
|
166
167
|
}
|
|
167
|
-
_context3.next =
|
|
168
|
+
_context3.next = 1;
|
|
168
169
|
return Promise.all(loadingTasks);
|
|
169
|
-
case
|
|
170
|
+
case 1:
|
|
170
171
|
// Load override themes after standard themes
|
|
171
172
|
themeOverridePreferences = (0, _getThemeOverridePreferences.getThemeOverridePreferences)(themeState);
|
|
172
173
|
_iterator = _createForOfIteratorHelper(themeOverridePreferences);
|
|
173
|
-
_context3.prev =
|
|
174
|
+
_context3.prev = 2;
|
|
174
175
|
_iterator.s();
|
|
175
|
-
case
|
|
176
|
+
case 3:
|
|
176
177
|
if ((_step = _iterator.n()).done) {
|
|
177
|
-
_context3.next =
|
|
178
|
+
_context3.next = 5;
|
|
178
179
|
break;
|
|
179
180
|
}
|
|
180
181
|
themeId = _step.value;
|
|
181
|
-
_context3.next =
|
|
182
|
+
_context3.next = 4;
|
|
182
183
|
return loadingStrategy(themeId);
|
|
183
|
-
case
|
|
184
|
-
_context3.next =
|
|
184
|
+
case 4:
|
|
185
|
+
_context3.next = 3;
|
|
185
186
|
break;
|
|
186
|
-
case
|
|
187
|
-
_context3.next =
|
|
187
|
+
case 5:
|
|
188
|
+
_context3.next = 7;
|
|
188
189
|
break;
|
|
189
|
-
case
|
|
190
|
-
_context3.prev =
|
|
191
|
-
|
|
192
|
-
_iterator.e(
|
|
193
|
-
case
|
|
194
|
-
_context3.prev =
|
|
190
|
+
case 6:
|
|
191
|
+
_context3.prev = 6;
|
|
192
|
+
_t = _context3["catch"](2);
|
|
193
|
+
_iterator.e(_t);
|
|
194
|
+
case 7:
|
|
195
|
+
_context3.prev = 7;
|
|
195
196
|
_iterator.f();
|
|
196
|
-
return _context3.finish(
|
|
197
|
-
case
|
|
197
|
+
return _context3.finish(7);
|
|
198
|
+
case 8:
|
|
198
199
|
autoUnbind = (0, _configurePage.default)(themeState);
|
|
199
200
|
return _context3.abrupt("return", autoUnbind);
|
|
200
|
-
case
|
|
201
|
+
case 9:
|
|
201
202
|
case "end":
|
|
202
203
|
return _context3.stop();
|
|
203
204
|
}
|
|
204
|
-
}, _callee3, null, [[
|
|
205
|
+
}, _callee3, null, [[2, 6, 7, 8]]);
|
|
205
206
|
}));
|
|
206
207
|
return function setGlobalTheme() {
|
|
207
208
|
return _ref.apply(this, arguments);
|
package/dist/cjs/theme-config.js
CHANGED
|
@@ -17,11 +17,17 @@ Object.defineProperty(exports, "themeIds", {
|
|
|
17
17
|
return _themeIds.themeIds;
|
|
18
18
|
}
|
|
19
19
|
});
|
|
20
|
-
exports.
|
|
20
|
+
exports.themeIdsWithOverrides = void 0;
|
|
21
|
+
Object.defineProperty(exports, "themeStateDefaults", {
|
|
22
|
+
enumerable: true,
|
|
23
|
+
get: function get() {
|
|
24
|
+
return _themeStateDefaults.themeStateDefaults;
|
|
25
|
+
}
|
|
26
|
+
});
|
|
21
27
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
22
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
23
28
|
var _themeIds = require("./theme-ids");
|
|
24
29
|
var _themeColorModes = require("./theme-color-modes");
|
|
30
|
+
var _themeStateDefaults = require("./theme-state-defaults");
|
|
25
31
|
/**
|
|
26
32
|
* This file contains the source of truth for themes and all associated meta data.
|
|
27
33
|
*/
|
|
@@ -168,49 +174,9 @@ var themeConfig = {
|
|
|
168
174
|
}
|
|
169
175
|
};
|
|
170
176
|
|
|
171
|
-
/**
|
|
172
|
-
* ThemeOptionsSchema: additional configuration options used to customize Atlassian's themes
|
|
173
|
-
*/
|
|
174
|
-
|
|
175
|
-
/**
|
|
176
|
-
* ThemeState: the standard representation of an app's current theme and preferences
|
|
177
|
-
*/
|
|
178
|
-
|
|
179
|
-
/**
|
|
180
|
-
* Can't evaluate typography feature flags at the module level,
|
|
181
|
-
* it will always resolve to false when server side rendered or when flags are loaded async.
|
|
182
|
-
*/
|
|
183
|
-
|
|
184
|
-
function getShapeDefault() {
|
|
185
|
-
if ((0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default')) {
|
|
186
|
-
return 'shape';
|
|
187
|
-
}
|
|
188
|
-
return undefined;
|
|
189
|
-
}
|
|
190
|
-
function getMotionDefault() {
|
|
191
|
-
if ((0, _platformFeatureFlags.fg)('platform-dst-motion-theme-default')) {
|
|
192
|
-
return 'motion';
|
|
193
|
-
}
|
|
194
|
-
return undefined;
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
/**
|
|
198
|
-
* themeStateDefaults: the default values for ThemeState used by theming utilities
|
|
199
|
-
*/
|
|
200
|
-
var themeStateDefaults = exports.themeStateDefaults = {
|
|
201
|
-
colorMode: 'auto',
|
|
202
|
-
contrastMode: 'auto',
|
|
203
|
-
dark: 'dark',
|
|
204
|
-
light: 'light',
|
|
205
|
-
shape: getShapeDefault,
|
|
206
|
-
spacing: 'spacing',
|
|
207
|
-
typography: 'typography',
|
|
208
|
-
motion: getMotionDefault,
|
|
209
|
-
UNSAFE_themeOptions: undefined
|
|
210
|
-
};
|
|
211
|
-
|
|
212
177
|
/**
|
|
213
178
|
* Represents theme state once mounted to the page
|
|
214
179
|
* (the page doesn't have an "auto" color mode, it's either light or dark)
|
|
215
180
|
*/
|
|
181
|
+
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
216
182
|
var _default = exports.default = themeConfig;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.themeObjectToString = void 0;
|
|
8
|
+
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
9
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
|
+
var _isColorMode = require("./is-color-mode");
|
|
11
|
+
var _isThemeIds = require("./is-theme-ids");
|
|
12
|
+
var _isThemeKind = require("./is-theme-kind");
|
|
13
|
+
var customThemeOptions = 'UNSAFE_themeOptions';
|
|
14
|
+
|
|
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
|
+
var themeObjectToString = exports.themeObjectToString = function themeObjectToString(themeState) {
|
|
27
|
+
return Object.entries(themeState).reduce(function (themeString, _ref) {
|
|
28
|
+
var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
|
|
29
|
+
kind = _ref2[0],
|
|
30
|
+
id = _ref2[1];
|
|
31
|
+
if (
|
|
32
|
+
// colorMode theme state
|
|
33
|
+
kind === 'colorMode' && typeof id === 'string' && (0, _isColorMode.isColorMode)(id) ||
|
|
34
|
+
// custom theme state
|
|
35
|
+
kind === customThemeOptions && (0, _typeof2.default)(id) === 'object' ||
|
|
36
|
+
// other theme states
|
|
37
|
+
(0, _isThemeKind.isThemeKind)(kind) && typeof id === 'string' && (0, _isThemeIds.isThemeIds)(id)) {
|
|
38
|
+
return themeString + "".concat(themeString ? ' ' : '') + "".concat(kind, ":").concat((0, _typeof2.default)(id) === 'object' ? JSON.stringify(id) : id);
|
|
39
|
+
}
|
|
40
|
+
return themeString;
|
|
41
|
+
}, '');
|
|
42
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.themeStateDefaults = void 0;
|
|
7
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
8
|
+
/**
|
|
9
|
+
* Can't evaluate typography feature flags at the module level,
|
|
10
|
+
* it will always resolve to false when server side rendered or when flags are loaded async.
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
function getShapeDefault() {
|
|
14
|
+
if ((0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default')) {
|
|
15
|
+
return 'shape';
|
|
16
|
+
}
|
|
17
|
+
return undefined;
|
|
18
|
+
}
|
|
19
|
+
function getMotionDefault() {
|
|
20
|
+
if ((0, _platformFeatureFlags.fg)('platform-dst-motion-theme-default')) {
|
|
21
|
+
return 'motion';
|
|
22
|
+
}
|
|
23
|
+
return undefined;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* themeStateDefaults: the default values for ThemeState used by theming utilities
|
|
28
|
+
*/
|
|
29
|
+
var themeStateDefaults = exports.themeStateDefaults = {
|
|
30
|
+
colorMode: 'auto',
|
|
31
|
+
contrastMode: 'auto',
|
|
32
|
+
dark: 'dark',
|
|
33
|
+
light: 'light',
|
|
34
|
+
shape: getShapeDefault,
|
|
35
|
+
spacing: 'spacing',
|
|
36
|
+
typography: 'typography',
|
|
37
|
+
motion: getMotionDefault,
|
|
38
|
+
UNSAFE_themeOptions: undefined
|
|
39
|
+
};
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.themeStringToObject = void 0;
|
|
8
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
9
|
+
var _isColorMode = require("./is-color-mode");
|
|
10
|
+
var _isThemeIds = require("./is-theme-ids");
|
|
11
|
+
var _isThemeKind = require("./is-theme-kind");
|
|
12
|
+
var customThemeOptions = 'UNSAFE_themeOptions';
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Converts a string that is formatted for the `data-theme` HTML attribute
|
|
16
|
+
* to an object that can be passed to `setGlobalTheme`.
|
|
17
|
+
*
|
|
18
|
+
* @param {string} themes The themes that should be applied.
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* ```
|
|
22
|
+
* themeStringToObject('dark:dark light:light spacing:spacing');
|
|
23
|
+
* // returns { dark: 'dark', light: 'light', spacing: 'spacing' }
|
|
24
|
+
* ```
|
|
25
|
+
*/
|
|
26
|
+
var themeStringToObject = exports.themeStringToObject = function themeStringToObject(themeState) {
|
|
27
|
+
return themeState.split(' ')
|
|
28
|
+
// @ts-ignore - TS1501 TypeScript 5.9.2 upgrade
|
|
29
|
+
.map(function (theme) {
|
|
30
|
+
return theme.split(/:([^]*)/);
|
|
31
|
+
}).reduce(function (themeObject, _ref) {
|
|
32
|
+
var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
|
|
33
|
+
kind = _ref2[0],
|
|
34
|
+
id = _ref2[1];
|
|
35
|
+
if (kind === 'colorMode' && (0, _isColorMode.isColorMode)(id)) {
|
|
36
|
+
themeObject[kind] = id;
|
|
37
|
+
}
|
|
38
|
+
if ((0, _isThemeKind.isThemeKind)(kind) && (0, _isThemeIds.isThemeIds)(id)) {
|
|
39
|
+
// @ts-expect-error FIXME - this is a valid ts error
|
|
40
|
+
themeObject[kind] = id;
|
|
41
|
+
}
|
|
42
|
+
if (kind === customThemeOptions) {
|
|
43
|
+
try {
|
|
44
|
+
themeObject[customThemeOptions] = JSON.parse(id);
|
|
45
|
+
} catch (_unused) {
|
|
46
|
+
new Error('Invalid custom theme string');
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
return themeObject;
|
|
50
|
+
}, {});
|
|
51
|
+
};
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.additionalContrastChecker = void 0;
|
|
8
|
+
var _atlassianDarkTokenValueForContrastCheck = _interopRequireDefault(require("../artifacts/atlassian-dark-token-value-for-contrast-check"));
|
|
9
|
+
var _atlassianLightTokenValueForContrastCheck = _interopRequireDefault(require("../artifacts/atlassian-light-token-value-for-contrast-check"));
|
|
10
|
+
var _customThemeTokenContrastCheck = require("./custom-theme-token-contrast-check");
|
|
11
|
+
var _getContrastRatio = require("./get-contrast-ratio");
|
|
12
|
+
var getColorFromTokenRaw = function getColorFromTokenRaw(tokenName, mode) {
|
|
13
|
+
return mode === 'light' ? _atlassianLightTokenValueForContrastCheck.default[tokenName] : _atlassianDarkTokenValueForContrastCheck.default[tokenName];
|
|
14
|
+
};
|
|
15
|
+
var additionalContrastChecker = exports.additionalContrastChecker = function additionalContrastChecker(_ref) {
|
|
16
|
+
var customThemeTokenMap = _ref.customThemeTokenMap,
|
|
17
|
+
mode = _ref.mode,
|
|
18
|
+
themeRamp = _ref.themeRamp;
|
|
19
|
+
var updatedCustomThemeTokenMap = {};
|
|
20
|
+
var brandTokens = Object.keys(customThemeTokenMap);
|
|
21
|
+
_customThemeTokenContrastCheck.additionalChecks.forEach(function (pairing) {
|
|
22
|
+
var backgroundLight = pairing.backgroundLight,
|
|
23
|
+
backgroundDark = pairing.backgroundDark,
|
|
24
|
+
foreground = pairing.foreground,
|
|
25
|
+
desiredContrast = pairing.desiredContrast,
|
|
26
|
+
updatedTokens = pairing.updatedTokens;
|
|
27
|
+
var background = mode === 'light' ? backgroundLight : backgroundDark;
|
|
28
|
+
var foregroundTokenValue = customThemeTokenMap[foreground];
|
|
29
|
+
var backgroundTokenValue = customThemeTokenMap[background];
|
|
30
|
+
var foregroundColor = brandTokens.includes(foreground) ? typeof foregroundTokenValue === 'string' ? foregroundTokenValue : themeRamp[foregroundTokenValue] : getColorFromTokenRaw(foreground, mode);
|
|
31
|
+
var backgroundColor = brandTokens.includes(background) ? typeof backgroundTokenValue === 'string' ? backgroundTokenValue : themeRamp[backgroundTokenValue] : getColorFromTokenRaw(background, mode);
|
|
32
|
+
var contrast = (0, _getContrastRatio.getContrastRatio)(foregroundColor, backgroundColor);
|
|
33
|
+
if (contrast <= desiredContrast) {
|
|
34
|
+
updatedTokens.forEach(function (token) {
|
|
35
|
+
var rampValue = customThemeTokenMap[token];
|
|
36
|
+
if (typeof rampValue === 'number') {
|
|
37
|
+
updatedCustomThemeTokenMap[token] = mode === 'light' ? rampValue + 1 : rampValue - 1;
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
return updatedCustomThemeTokenMap;
|
|
43
|
+
};
|
|
@@ -1,22 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
6
|
exports.findMissingCustomStyleElements = findMissingCustomStyleElements;
|
|
8
|
-
Object.defineProperty(exports, "limitSizeOfCustomStyleElements", {
|
|
9
|
-
enumerable: true,
|
|
10
|
-
get: function get() {
|
|
11
|
-
return _limitSizeOfCustomStyleElements.limitSizeOfCustomStyleElements;
|
|
12
|
-
}
|
|
13
|
-
});
|
|
14
|
-
exports.reduceTokenMap = reduceTokenMap;
|
|
15
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
16
|
-
var _tokenNames = _interopRequireDefault(require("../artifacts/token-names"));
|
|
17
7
|
var _constants = require("../constants");
|
|
18
8
|
var _hash = require("./hash");
|
|
19
|
-
var _limitSizeOfCustomStyleElements = require("./limit-size-of-custom-style-elements");
|
|
20
9
|
function findMissingCustomStyleElements(UNSAFE_themeOptions, mode) {
|
|
21
10
|
var optionString = JSON.stringify(UNSAFE_themeOptions);
|
|
22
11
|
var uniqueId = (0, _hash.hash)(optionString);
|
|
@@ -31,13 +20,4 @@ function findMissingCustomStyleElements(UNSAFE_themeOptions, mode) {
|
|
|
31
20
|
}
|
|
32
21
|
});
|
|
33
22
|
return attrOfMissingCustomStyles;
|
|
34
|
-
}
|
|
35
|
-
function reduceTokenMap(tokenMap, themeRamp) {
|
|
36
|
-
return Object.entries(tokenMap).reduce(function (acc, _ref) {
|
|
37
|
-
var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
|
|
38
|
-
key = _ref2[0],
|
|
39
|
-
value = _ref2[1];
|
|
40
|
-
var cssVar = _tokenNames.default[key];
|
|
41
|
-
return cssVar ? "".concat(acc, "\n ").concat(cssVar, ": ").concat(typeof value === 'string' ? value : themeRamp[value], ";") : acc;
|
|
42
|
-
}, '');
|
|
43
23
|
}
|