@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
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { clampComponent } from './clamp-component';
|
|
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 function argbFromRgba(_ref) {
|
|
9
|
+
var r = _ref.r,
|
|
10
|
+
g = _ref.g,
|
|
11
|
+
b = _ref.b,
|
|
12
|
+
a = _ref.a;
|
|
13
|
+
var rValue = clampComponent(r);
|
|
14
|
+
var gValue = clampComponent(g);
|
|
15
|
+
var bValue = clampComponent(b);
|
|
16
|
+
var aValue = clampComponent(a);
|
|
17
|
+
return aValue << 24 | rValue << 16 | gValue << 8 | bValue;
|
|
18
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { argbFromRgb } from './argb-from-rgb';
|
|
2
|
+
import { delinearized } from './delinearized';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Color science utilities.
|
|
6
|
+
*
|
|
7
|
+
* Utility methods for color science constants and color space
|
|
8
|
+
* conversions that aren't HCT or CAM16.
|
|
9
|
+
*/
|
|
10
|
+
var XYZ_TO_SRGB = [[3.2413774792388685, -1.5376652402851851, -0.49885366846268053], [-0.9691452513005321, 1.8758853451067872, 0.04156585616912061], [0.05562093689691305, -0.20395524564742123, 1.0571799111220335]];
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Converts a color from ARGB to XYZ.
|
|
14
|
+
*/
|
|
15
|
+
export function argbFromXyz(x, y, z) {
|
|
16
|
+
var matrix = XYZ_TO_SRGB;
|
|
17
|
+
var linearR = matrix[0][0] * x + matrix[0][1] * y + matrix[0][2] * z;
|
|
18
|
+
var linearG = matrix[1][0] * x + matrix[1][1] * y + matrix[1][2] * z;
|
|
19
|
+
var linearB = matrix[2][0] * x + matrix[2][1] * y + matrix[2][2] * z;
|
|
20
|
+
var r = delinearized(linearR);
|
|
21
|
+
var g = delinearized(linearG);
|
|
22
|
+
var b = delinearized(linearB);
|
|
23
|
+
return argbFromRgb(r, g, b);
|
|
24
|
+
}
|
|
@@ -28,9 +28,9 @@ import _createClass from "@babel/runtime/helpers/createClass";
|
|
|
28
28
|
//
|
|
29
29
|
// tslint:disable:class-as-namespace
|
|
30
30
|
|
|
31
|
-
import
|
|
32
|
-
import
|
|
33
|
-
|
|
31
|
+
import { clampDouble } from './clamp-double';
|
|
32
|
+
import { lstarFromY } from './lstar-from-y';
|
|
33
|
+
import { yFromLstar } from './y-from-lstar';
|
|
34
34
|
/**
|
|
35
35
|
* Utility methods for calculating contrast given two colors, or calculating a
|
|
36
36
|
* color given one color and a contrast ratio.
|
|
@@ -57,9 +57,9 @@ export var Contrast = /*#__PURE__*/function () {
|
|
|
57
57
|
* @param toneB Tone between 0 and 100. Values outside will be clamped.
|
|
58
58
|
*/
|
|
59
59
|
function ratioOfTones(toneA, toneB) {
|
|
60
|
-
toneA =
|
|
61
|
-
toneB =
|
|
62
|
-
return Contrast.ratioOfYs(
|
|
60
|
+
toneA = clampDouble(0.0, 100.0, toneA);
|
|
61
|
+
toneB = clampDouble(0.0, 100.0, toneB);
|
|
62
|
+
return Contrast.ratioOfYs(yFromLstar(toneA), yFromLstar(toneB));
|
|
63
63
|
}
|
|
64
64
|
}, {
|
|
65
65
|
key: "ratioOfYs",
|
|
@@ -85,7 +85,7 @@ export var Contrast = /*#__PURE__*/function () {
|
|
|
85
85
|
if (tone < 0.0 || tone > 100.0) {
|
|
86
86
|
return -1.0;
|
|
87
87
|
}
|
|
88
|
-
var darkY =
|
|
88
|
+
var darkY = yFromLstar(tone);
|
|
89
89
|
var lightY = ratio * (darkY + 5.0) - 5.0;
|
|
90
90
|
var realContrast = Contrast.ratioOfYs(lightY, darkY);
|
|
91
91
|
var delta = Math.abs(realContrast - ratio);
|
|
@@ -95,7 +95,7 @@ export var Contrast = /*#__PURE__*/function () {
|
|
|
95
95
|
|
|
96
96
|
// Ensure gamut mapping, which requires a 'range' on tone, will still result
|
|
97
97
|
// the correct ratio by darkening slightly.
|
|
98
|
-
var returnValue =
|
|
98
|
+
var returnValue = lstarFromY(lightY) + 0.4;
|
|
99
99
|
if (returnValue < 0 || returnValue > 100) {
|
|
100
100
|
return -1;
|
|
101
101
|
}
|
|
@@ -118,7 +118,7 @@ export var Contrast = /*#__PURE__*/function () {
|
|
|
118
118
|
if (tone < 0.0 || tone > 100.0) {
|
|
119
119
|
return -1.0;
|
|
120
120
|
}
|
|
121
|
-
var lightY =
|
|
121
|
+
var lightY = yFromLstar(tone);
|
|
122
122
|
var darkY = (lightY + 5.0) / ratio - 5.0;
|
|
123
123
|
var realContrast = Contrast.ratioOfYs(lightY, darkY);
|
|
124
124
|
var delta = Math.abs(realContrast - ratio);
|
|
@@ -128,7 +128,7 @@ export var Contrast = /*#__PURE__*/function () {
|
|
|
128
128
|
|
|
129
129
|
// Ensure gamut mapping, which requires a 'range' on tone, will still result
|
|
130
130
|
// the correct ratio by darkening slightly.
|
|
131
|
-
var returnValue =
|
|
131
|
+
var returnValue = lstarFromY(darkY) - 0.4;
|
|
132
132
|
if (returnValue < 0 || returnValue > 100) {
|
|
133
133
|
return -1;
|
|
134
134
|
}
|
|
@@ -23,9 +23,16 @@ import _createClass from "@babel/runtime/helpers/createClass";
|
|
|
23
23
|
* limitations under the License.
|
|
24
24
|
*/
|
|
25
25
|
|
|
26
|
-
import
|
|
26
|
+
import { argbFromLinrgb } from './argb-from-linrgb';
|
|
27
|
+
import { argbFromLstar } from './argb-from-lstar';
|
|
28
|
+
import { argbFromXyz } from './argb-from-xyz';
|
|
29
|
+
import { linearized } from './linearized';
|
|
30
|
+
import { lstarFromArgb } from './lstar-from-argb';
|
|
31
|
+
import { lstarFromY } from './lstar-from-y';
|
|
27
32
|
import * as math from './math-utils';
|
|
28
33
|
import { ViewingConditions } from './viewing-conditions';
|
|
34
|
+
import { yFromLstar } from './y-from-lstar';
|
|
35
|
+
|
|
29
36
|
/**
|
|
30
37
|
* A color system built using CAM16 hue and chroma, and L* from
|
|
31
38
|
* L*a*b*.
|
|
@@ -54,7 +61,7 @@ export var Hct = /*#__PURE__*/function () {
|
|
|
54
61
|
var cam = Cam16.fromInt(argb);
|
|
55
62
|
this.internalHue = cam.hue;
|
|
56
63
|
this.internalChroma = cam.chroma;
|
|
57
|
-
this.internalTone =
|
|
64
|
+
this.internalTone = lstarFromArgb(argb);
|
|
58
65
|
}
|
|
59
66
|
return _createClass(Hct, [{
|
|
60
67
|
key: "toInt",
|
|
@@ -118,7 +125,7 @@ export var Hct = /*#__PURE__*/function () {
|
|
|
118
125
|
var cam = Cam16.fromInt(argb);
|
|
119
126
|
this.internalHue = cam.hue;
|
|
120
127
|
this.internalChroma = cam.chroma;
|
|
121
|
-
this.internalTone =
|
|
128
|
+
this.internalTone = lstarFromArgb(argb);
|
|
122
129
|
this.argb = argb;
|
|
123
130
|
}
|
|
124
131
|
|
|
@@ -149,7 +156,7 @@ export var Hct = /*#__PURE__*/function () {
|
|
|
149
156
|
// 3. Create HCT from:
|
|
150
157
|
// - CAM16 using default VC with XYZ coordinates in specified VC.
|
|
151
158
|
// - L* converted from Y in XYZ coordinates in specified VC.
|
|
152
|
-
var recastHct = Hct.from(recastInVc.hue, recastInVc.chroma,
|
|
159
|
+
var recastHct = Hct.from(recastInVc.hue, recastInVc.chroma, lstarFromY(viewedInVc[1]));
|
|
153
160
|
return recastHct;
|
|
154
161
|
}
|
|
155
162
|
}], [{
|
|
@@ -300,7 +307,7 @@ var Cam16 = /*#__PURE__*/function () {
|
|
|
300
307
|
var x = 1.86206786 * rF - 1.01125463 * gF + 0.14918677 * bF;
|
|
301
308
|
var y = 0.38752654 * rF + 0.62144744 * gF - 0.00897398 * bF;
|
|
302
309
|
var z = -0.0158415 * rF - 0.03412294 * gF + 1.04996444 * bF;
|
|
303
|
-
var argb =
|
|
310
|
+
var argb = argbFromXyz(x, y, z);
|
|
304
311
|
return argb;
|
|
305
312
|
}
|
|
306
313
|
|
|
@@ -358,9 +365,9 @@ var Cam16 = /*#__PURE__*/function () {
|
|
|
358
365
|
var red = (argb & 0x00ff0000) >> 16;
|
|
359
366
|
var green = (argb & 0x0000ff00) >> 8;
|
|
360
367
|
var blue = argb & 0x000000ff;
|
|
361
|
-
var redL =
|
|
362
|
-
var greenL =
|
|
363
|
-
var blueL =
|
|
368
|
+
var redL = linearized(red);
|
|
369
|
+
var greenL = linearized(green);
|
|
370
|
+
var blueL = linearized(blue);
|
|
364
371
|
var x = 0.41233895 * redL + 0.35762064 * greenL + 0.18051042 * blueL;
|
|
365
372
|
var y = 0.2126 * redL + 0.7152 * greenL + 0.0722 * blueL;
|
|
366
373
|
var z = 0.01932141 * redL + 0.11916382 * greenL + 0.95034478 * blueL;
|
|
@@ -881,7 +888,7 @@ var HctSolver = /*#__PURE__*/function () {
|
|
|
881
888
|
if (linrgb[0] > 100.01 || linrgb[1] > 100.01 || linrgb[2] > 100.01) {
|
|
882
889
|
return 0;
|
|
883
890
|
}
|
|
884
|
-
return
|
|
891
|
+
return argbFromLinrgb(linrgb);
|
|
885
892
|
}
|
|
886
893
|
// Iterates with Newton method,
|
|
887
894
|
// Using 2 * fn(j) / j as the approximation of fn'(j)
|
|
@@ -906,17 +913,17 @@ var HctSolver = /*#__PURE__*/function () {
|
|
|
906
913
|
key: "solveToInt",
|
|
907
914
|
value: function solveToInt(hueDegrees, chroma, lstar) {
|
|
908
915
|
if (chroma < 0.0001 || lstar < 0.0001 || lstar > 99.9999) {
|
|
909
|
-
return
|
|
916
|
+
return argbFromLstar(lstar);
|
|
910
917
|
}
|
|
911
918
|
hueDegrees = math.sanitizeDegreesDouble(hueDegrees);
|
|
912
919
|
var hueRadians = hueDegrees / 180 * Math.PI;
|
|
913
|
-
var y =
|
|
920
|
+
var y = yFromLstar(lstar);
|
|
914
921
|
var exactAnswer = HctSolver.findResultByJ(hueRadians, chroma, y);
|
|
915
922
|
if (exactAnswer !== 0) {
|
|
916
923
|
return exactAnswer;
|
|
917
924
|
}
|
|
918
925
|
var linrgb = HctSolver.bisectToLimit(y, hueRadians);
|
|
919
|
-
return
|
|
926
|
+
return argbFromLinrgb(linrgb);
|
|
920
927
|
}
|
|
921
928
|
|
|
922
929
|
/**
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { blueFromArgb } from './blue-from-argb';
|
|
2
|
+
import { greenFromArgb } from './green-from-argb';
|
|
3
|
+
import { labF } from './lab-f';
|
|
4
|
+
import { linearized } from './linearized';
|
|
5
|
+
import { matrixMultiply } from './matrix-multiply';
|
|
6
|
+
import { redFromArgb } from './red-from-argb';
|
|
7
|
+
var SRGB_TO_XYZ = [[0.41233895, 0.35762064, 0.18051042], [0.2126, 0.7152, 0.0722], [0.01932141, 0.11916382, 0.95034478]];
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Converts a color from XYZ to ARGB.
|
|
11
|
+
*/
|
|
12
|
+
function xyzFromArgb(argb) {
|
|
13
|
+
var r = linearized(redFromArgb(argb));
|
|
14
|
+
var g = linearized(greenFromArgb(argb));
|
|
15
|
+
var b = linearized(blueFromArgb(argb));
|
|
16
|
+
return matrixMultiply([r, g, b], SRGB_TO_XYZ);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* Computes the L* value of a color in ARGB representation.
|
|
21
|
+
*
|
|
22
|
+
* @param argb ARGB representation of a color
|
|
23
|
+
* @return L*, from L*a*b*, coordinate of the color
|
|
24
|
+
*/
|
|
25
|
+
export function lstarFromArgb(argb) {
|
|
26
|
+
var y = xyzFromArgb(argb)[1];
|
|
27
|
+
return 116.0 * labF(y / 100.0) - 16.0;
|
|
28
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { labF } from './lab-f';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Converts a Y value to an L* value.
|
|
5
|
+
*
|
|
6
|
+
* L* in L*a*b* and Y in XYZ measure the same quantity, luminance.
|
|
7
|
+
*
|
|
8
|
+
* L* measures perceptual luminance, a linear scale. Y in XYZ
|
|
9
|
+
* measures relative luminance, a logarithmic scale.
|
|
10
|
+
*
|
|
11
|
+
* @param y Y in XYZ
|
|
12
|
+
* @return L* in L*a*b*
|
|
13
|
+
*/
|
|
14
|
+
export function lstarFromY(y) {
|
|
15
|
+
return labF(y / 100.0) * 116.0 - 16.0;
|
|
16
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { alphaFromArgb } from './alpha-from-argb';
|
|
2
|
+
import { blueFromArgb } from './blue-from-argb';
|
|
3
|
+
import { greenFromArgb } from './green-from-argb';
|
|
4
|
+
import { redFromArgb } from './red-from-argb';
|
|
5
|
+
/**
|
|
6
|
+
* Return RGBA from a given int32 color
|
|
7
|
+
*
|
|
8
|
+
* @param argb ARGB representation of a int32 color.
|
|
9
|
+
* @return RGBA representation of a int32 color.
|
|
10
|
+
*/
|
|
11
|
+
export function rgbaFromArgb(argb) {
|
|
12
|
+
var r = redFromArgb(argb);
|
|
13
|
+
var g = greenFromArgb(argb);
|
|
14
|
+
var b = blueFromArgb(argb);
|
|
15
|
+
var a = alphaFromArgb(argb);
|
|
16
|
+
return {
|
|
17
|
+
r: r,
|
|
18
|
+
g: g,
|
|
19
|
+
b: b,
|
|
20
|
+
a: a
|
|
21
|
+
};
|
|
22
|
+
}
|
|
File without changes
|
|
@@ -2,8 +2,9 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
|
2
2
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
3
3
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
4
4
|
var _ViewingConditions;
|
|
5
|
-
import * as utils from './color-utils';
|
|
6
5
|
import * as math from './math-utils';
|
|
6
|
+
import { whitePointD65 } from './white-point-d65';
|
|
7
|
+
import { yFromLstar } from './y-from-lstar';
|
|
7
8
|
export var ViewingConditions = /*#__PURE__*/function () {
|
|
8
9
|
function ViewingConditions(n, aw, nbb, ncb, c, nc, rgbD, fl, fLRoot, z) {
|
|
9
10
|
_classCallCheck(this, ViewingConditions);
|
|
@@ -44,8 +45,8 @@ export var ViewingConditions = /*#__PURE__*/function () {
|
|
|
44
45
|
* self-luminous objects like displays.
|
|
45
46
|
*/
|
|
46
47
|
function make() {
|
|
47
|
-
var whitePoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] :
|
|
48
|
-
var adaptingLuminance = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 200.0 / Math.PI *
|
|
48
|
+
var whitePoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : whitePointD65();
|
|
49
|
+
var adaptingLuminance = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 200.0 / Math.PI * yFromLstar(50.0) / 100.0;
|
|
49
50
|
var backgroundLstar = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 50.0;
|
|
50
51
|
var surround = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 2.0;
|
|
51
52
|
var discountingIlluminant = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
|
|
@@ -63,7 +64,7 @@ export var ViewingConditions = /*#__PURE__*/function () {
|
|
|
63
64
|
var k4 = k * k * k * k;
|
|
64
65
|
var k4F = 1.0 - k4;
|
|
65
66
|
var fl = k4 * adaptingLuminance + 0.1 * k4F * k4F * Math.cbrt(5.0 * adaptingLuminance);
|
|
66
|
-
var n =
|
|
67
|
+
var n = yFromLstar(backgroundLstar) / whitePoint[1];
|
|
67
68
|
var z = 1.48 + Math.sqrt(n);
|
|
68
69
|
var nbb = 0.725 / Math.pow(n, 0.2);
|
|
69
70
|
var ncb = nbb;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { labInvf } from './lab-invf';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Converts an L* value to a Y value.
|
|
5
|
+
*
|
|
6
|
+
* L* in L*a*b* and Y in XYZ measure the same quantity, luminance.
|
|
7
|
+
*
|
|
8
|
+
* L* measures perceptual luminance, a linear scale. Y in XYZ
|
|
9
|
+
* measures relative luminance, a logarithmic scale.
|
|
10
|
+
*
|
|
11
|
+
* @param lstar L* in L*a*b*
|
|
12
|
+
* @return Y in XYZ
|
|
13
|
+
*/
|
|
14
|
+
export function yFromLstar(lstar) {
|
|
15
|
+
return 100.0 * labInvf((lstar + 16.0) / 116.0);
|
|
16
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { isValidHex } from './is-valid-hex';
|
|
2
|
+
export function hexToHSL(hex) {
|
|
3
|
+
if (!isValidHex(hex)) {
|
|
4
|
+
throw new Error('Invalid HEX');
|
|
5
|
+
}
|
|
6
|
+
var r = 0,
|
|
7
|
+
g = 0,
|
|
8
|
+
b = 0;
|
|
9
|
+
if (hex.length === 4) {
|
|
10
|
+
r = '0x' + hex[1] + hex[1];
|
|
11
|
+
g = '0x' + hex[2] + hex[2];
|
|
12
|
+
b = '0x' + hex[3] + hex[3];
|
|
13
|
+
} else if (hex.length === 7) {
|
|
14
|
+
r = '0x' + hex[1] + hex[2];
|
|
15
|
+
g = '0x' + hex[3] + hex[4];
|
|
16
|
+
b = '0x' + hex[5] + hex[6];
|
|
17
|
+
}
|
|
18
|
+
// Then to HSL
|
|
19
|
+
r /= 255;
|
|
20
|
+
g /= 255;
|
|
21
|
+
b /= 255;
|
|
22
|
+
var cmin = Math.min(r, g, b),
|
|
23
|
+
cmax = Math.max(r, g, b),
|
|
24
|
+
delta = cmax - cmin,
|
|
25
|
+
h = 0,
|
|
26
|
+
s = 0,
|
|
27
|
+
l = 0;
|
|
28
|
+
if (delta === 0) {
|
|
29
|
+
h = 0;
|
|
30
|
+
} else if (cmax === r) {
|
|
31
|
+
h = (g - b) / delta % 6;
|
|
32
|
+
} else if (cmax === g) {
|
|
33
|
+
h = (b - r) / delta + 2;
|
|
34
|
+
} else {
|
|
35
|
+
h = (r - g) / delta + 4;
|
|
36
|
+
}
|
|
37
|
+
h = Math.round(h * 60);
|
|
38
|
+
if (h < 0) {
|
|
39
|
+
h += 360;
|
|
40
|
+
}
|
|
41
|
+
l = (cmax + cmin) / 2;
|
|
42
|
+
s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
|
|
43
|
+
s = +(s * 100).toFixed(1);
|
|
44
|
+
l = +(l * 100).toFixed(1);
|
|
45
|
+
return [h, s, l];
|
|
46
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { getAlpha } from './get-alpha';
|
|
2
|
+
import { isValidHex } from './is-valid-hex';
|
|
3
|
+
export function hexToRgbA(hex) {
|
|
4
|
+
if (!isValidHex(hex)) {
|
|
5
|
+
throw new Error('Invalid HEX');
|
|
6
|
+
}
|
|
7
|
+
var c;
|
|
8
|
+
c = hex.substring(1).split('');
|
|
9
|
+
if (c.length === 3) {
|
|
10
|
+
c = [c[0], c[0], c[1], c[1], c[2], c[2]];
|
|
11
|
+
}
|
|
12
|
+
c = '0x' + c.join('');
|
|
13
|
+
return [c >> 16 & 255, c >> 8 & 255, c & 255, getAlpha(hex)];
|
|
14
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { isValidHex } from './is-valid-hex';
|
|
2
|
+
export function hexToRgb(hex) {
|
|
3
|
+
if (!isValidHex(hex)) {
|
|
4
|
+
throw new Error('Invalid HEX');
|
|
5
|
+
}
|
|
6
|
+
var c;
|
|
7
|
+
c = hex.substring(1).split('');
|
|
8
|
+
if (c.length === 3) {
|
|
9
|
+
c = [c[0], c[0], c[1], c[1], c[2], c[2]];
|
|
10
|
+
}
|
|
11
|
+
c = '0x' + c.join('');
|
|
12
|
+
return [c >> 16 & 255, c >> 8 & 255, c & 255];
|
|
13
|
+
}
|
|
@@ -4,16 +4,16 @@ import themeImportMap from '../artifacts/theme-import-map';
|
|
|
4
4
|
export var loadThemeCss = /*#__PURE__*/function () {
|
|
5
5
|
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(themeId) {
|
|
6
6
|
var _yield$themeImportMap, themeCss;
|
|
7
|
-
return _regeneratorRuntime.wrap(function
|
|
7
|
+
return _regeneratorRuntime.wrap(function (_context) {
|
|
8
8
|
while (1) switch (_context.prev = _context.next) {
|
|
9
9
|
case 0:
|
|
10
|
-
_context.next =
|
|
10
|
+
_context.next = 1;
|
|
11
11
|
return themeImportMap[themeId]();
|
|
12
|
-
case
|
|
12
|
+
case 1:
|
|
13
13
|
_yield$themeImportMap = _context.sent;
|
|
14
14
|
themeCss = _yield$themeImportMap.default;
|
|
15
15
|
return _context.abrupt("return", themeCss);
|
|
16
|
-
case
|
|
16
|
+
case 2:
|
|
17
17
|
case "end":
|
|
18
18
|
return _context.stop();
|
|
19
19
|
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
|
+
import tokens from '../artifacts/token-names';
|
|
3
|
+
export function reduceTokenMap(tokenMap, themeRamp) {
|
|
4
|
+
return Object.entries(tokenMap).reduce(function (acc, _ref) {
|
|
5
|
+
var _ref2 = _slicedToArray(_ref, 2),
|
|
6
|
+
key = _ref2[0],
|
|
7
|
+
value = _ref2[1];
|
|
8
|
+
var cssVar = tokens[key];
|
|
9
|
+
return cssVar ? "".concat(acc, "\n ").concat(cssVar, ": ").concat(typeof value === 'string' ? value : themeRamp[value], ";") : acc;
|
|
10
|
+
}, '');
|
|
11
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export function rgbToLab(rgb) {
|
|
2
|
+
var r = rgb[0] / 255,
|
|
3
|
+
g = rgb[1] / 255,
|
|
4
|
+
b = rgb[2] / 255,
|
|
5
|
+
x,
|
|
6
|
+
y,
|
|
7
|
+
z;
|
|
8
|
+
r = r > 0.04045 ? Math.pow((r + 0.055) / 1.055, 2.4) : r / 12.92;
|
|
9
|
+
g = g > 0.04045 ? Math.pow((g + 0.055) / 1.055, 2.4) : g / 12.92;
|
|
10
|
+
b = b > 0.04045 ? Math.pow((b + 0.055) / 1.055, 2.4) : b / 12.92;
|
|
11
|
+
x = (r * 0.4124 + g * 0.3576 + b * 0.1805) / 0.95047;
|
|
12
|
+
y = (r * 0.2126 + g * 0.7152 + b * 0.0722) / 1.0;
|
|
13
|
+
z = (r * 0.0193 + g * 0.1192 + b * 0.9505) / 1.08883;
|
|
14
|
+
x = x > 0.008856 ? Math.pow(x, 1 / 3) : 7.787 * x + 16 / 116;
|
|
15
|
+
y = y > 0.008856 ? Math.pow(y, 1 / 3) : 7.787 * y + 16 / 116;
|
|
16
|
+
z = z > 0.008856 ? Math.pow(z, 1 / 3) : 7.787 * z + 16 / 116;
|
|
17
|
+
return [116 * y - 16, 500 * (x - y), 200 * (y - z)];
|
|
18
|
+
}
|
|
@@ -5,30 +5,30 @@ import { loadThemeCss } from './load-theme-css';
|
|
|
5
5
|
export var loadAndAppendThemeCss = /*#__PURE__*/function () {
|
|
6
6
|
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(themeId) {
|
|
7
7
|
var themeCss, style;
|
|
8
|
-
return _regeneratorRuntime.wrap(function
|
|
8
|
+
return _regeneratorRuntime.wrap(function (_context) {
|
|
9
9
|
while (1) switch (_context.prev = _context.next) {
|
|
10
10
|
case 0:
|
|
11
11
|
if (!document.head.querySelector("style[".concat(THEME_DATA_ATTRIBUTE, "=\"").concat(themeId, "\"]:not([").concat(CUSTOM_THEME_ATTRIBUTE, "])"))) {
|
|
12
|
-
_context.next =
|
|
12
|
+
_context.next = 1;
|
|
13
13
|
break;
|
|
14
14
|
}
|
|
15
15
|
return _context.abrupt("return");
|
|
16
|
-
case
|
|
16
|
+
case 1:
|
|
17
17
|
if (themeId) {
|
|
18
|
-
_context.next =
|
|
18
|
+
_context.next = 2;
|
|
19
19
|
break;
|
|
20
20
|
}
|
|
21
21
|
return _context.abrupt("return");
|
|
22
|
-
case
|
|
23
|
-
_context.next =
|
|
22
|
+
case 2:
|
|
23
|
+
_context.next = 3;
|
|
24
24
|
return loadThemeCss(themeId);
|
|
25
|
-
case
|
|
25
|
+
case 3:
|
|
26
26
|
themeCss = _context.sent;
|
|
27
27
|
style = document.createElement('style');
|
|
28
28
|
style.textContent = themeCss;
|
|
29
29
|
style.dataset.theme = themeId;
|
|
30
30
|
document.head.appendChild(style);
|
|
31
|
-
case
|
|
31
|
+
case 4:
|
|
32
32
|
case "end":
|
|
33
33
|
return _context.stop();
|
|
34
34
|
}
|
|
@@ -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;
|