@atlaskit/tokens 13.0.3 → 13.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +15 -0
- package/codemods/css-to-design-tokens/lib/meta.tsx +1 -1
- package/codemods/css-to-design-tokens/lib/tokens.tsx +1 -1
- package/codemods/theme-to-design-tokens/transform.tsx +16 -14
- package/codemods/theme-to-design-tokens/utils/ast-meta.tsx +2 -151
- package/codemods/theme-to-design-tokens/utils/ast.tsx +3 -35
- package/codemods/theme-to-design-tokens/utils/clean-meta.tsx +63 -0
- package/codemods/theme-to-design-tokens/utils/color.tsx +3 -11
- package/codemods/theme-to-design-tokens/utils/contains-replaceable-css-declarations.tsx +13 -0
- package/codemods/theme-to-design-tokens/utils/css-utils.tsx +2 -35
- package/codemods/theme-to-design-tokens/utils/find-end-index-of-css-expression.tsx +21 -0
- package/codemods/theme-to-design-tokens/utils/find-first-nonspace-index-after.tsx +9 -0
- package/codemods/theme-to-design-tokens/utils/get-closest-decendant-of-type.tsx +10 -0
- package/codemods/theme-to-design-tokens/utils/get-meta-from-ancestors.tsx +87 -0
- package/codemods/theme-to-design-tokens/utils/is-bold-color.tsx +4 -0
- package/codemods/theme-to-design-tokens/utils/is-decendant-of-token.tsx +14 -0
- package/codemods/theme-to-design-tokens/utils/is-legacy-color.tsx +4 -0
- package/codemods/theme-to-design-tokens/utils/is-legacy-named-color.tsx +4 -0
- package/codemods/theme-to-design-tokens/utils/is-parent-of-token.tsx +13 -0
- package/codemods/theme-to-design-tokens/utils/kebabize.tsx +2 -0
- package/codemods/theme-to-design-tokens/utils/legacy-color-meta-map.tsx +88 -0
- package/codemods/theme-to-design-tokens/utils/legacy-color-mixins.tsx +26 -0
- package/codemods/theme-to-design-tokens/utils/legacy-colors.tsx +2 -115
- package/codemods/theme-to-design-tokens/utils/split-at-index.tsx +3 -0
- package/codemods/theme-to-design-tokens/utils/string-utils.tsx +3 -16
- package/codemods/utils/active-tokens.tsx +284 -0
- package/codemods/utils/tokens.tsx +2 -376
- package/codemods/utils/unique-words-from-tokens.tsx +91 -0
- package/dist/cjs/artifacts/replacement-mapping.js +5 -2
- package/dist/cjs/artifacts/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/artifacts/tokens-raw/atlassian-motion.js +3 -3
- package/dist/cjs/constants.js +1 -0
- package/dist/cjs/custom-theme.js +10 -60
- package/dist/cjs/entry-points/token-metadata.codegen.js +2 -11
- package/dist/cjs/get-custom-theme-styles.js +57 -0
- package/dist/cjs/get-global-theme.js +2 -2
- package/dist/cjs/get-theme-html-attrs.js +2 -2
- package/dist/cjs/get-theme-styles.js +33 -32
- package/dist/cjs/load-custom-theme-styles.js +2 -2
- package/dist/cjs/set-global-theme.js +36 -34
- package/dist/cjs/theme-color-modes.js +13 -0
- package/dist/cjs/theme-config.js +21 -16
- package/dist/cjs/theme-ids.js +13 -0
- package/dist/cjs/theme-state-transformer.js +3 -2
- package/dist/cjs/utils/color-detection.js +9 -12
- package/dist/cjs/utils/color-utils.js +45 -46
- package/dist/cjs/utils/custom-theme-loading-utils.js +9 -11
- package/dist/cjs/utils/custom-theme-token-contrast-check.js +2 -0
- package/dist/cjs/utils/generate-custom-color-ramp.js +20 -19
- package/dist/cjs/utils/get-alpha.js +13 -0
- package/dist/cjs/utils/get-closest-color-index.js +20 -0
- package/dist/cjs/utils/get-css-custom-property.js +32 -0
- package/dist/cjs/utils/get-fully-qualified-token-id.js +19 -0
- package/dist/cjs/utils/get-theme-override-preferences.js +12 -0
- package/dist/cjs/utils/get-theme-preferences.js +8 -5
- package/dist/cjs/utils/get-token-id.js +26 -0
- package/dist/cjs/utils/hct-color-utils/argb-from-rgb.js +12 -0
- package/dist/cjs/utils/hct-color-utils/clamp-double.js +20 -0
- package/dist/cjs/utils/hct-color-utils/clamp-int.js +20 -0
- package/dist/cjs/utils/hct-color-utils/color-utils.js +42 -59
- package/dist/cjs/utils/hct-color-utils/delinearized.js +27 -0
- package/dist/cjs/utils/hct-color-utils/hct.js +19 -95
- package/dist/cjs/utils/hct-color-utils/lerp.js +14 -0
- package/dist/cjs/utils/hct-color-utils/linearized.js +22 -0
- package/dist/cjs/utils/hct-color-utils/math-utils.js +38 -107
- package/dist/cjs/utils/hct-color-utils/matrix-multiply.js +15 -0
- package/dist/cjs/utils/hct-color-utils/sanitize-degrees-double.js +19 -0
- package/dist/cjs/utils/hct-color-utils/signum.js +20 -0
- package/dist/cjs/utils/hct-color-utils/viewing-conditions.js +98 -0
- package/dist/cjs/utils/hex-to-rgba-values.js +15 -0
- package/dist/cjs/utils/hsl-to-rgb.js +18 -0
- package/dist/cjs/utils/is-valid-brand-hex.js +9 -0
- package/dist/cjs/utils/limit-size-of-custom-style-elements.js +16 -0
- package/dist/cjs/utils/load-theme-css.js +32 -0
- package/dist/cjs/utils/relative-luminance-w3-c.js +18 -0
- package/dist/cjs/utils/rgb-to-hex.js +9 -0
- package/dist/cjs/utils/theme-loading.js +18 -33
- package/dist/cjs/utils/token-ids.js +21 -62
- package/dist/es2019/artifacts/replacement-mapping.js +5 -2
- 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/artifacts/tokens-raw/atlassian-motion.js +3 -3
- package/dist/es2019/constants.js +1 -0
- package/dist/es2019/custom-theme.js +4 -66
- package/dist/es2019/entry-points/token-metadata.codegen.js +2 -11
- package/dist/es2019/get-custom-theme-styles.js +60 -0
- package/dist/es2019/get-global-theme.js +1 -1
- package/dist/es2019/get-theme-html-attrs.js +1 -1
- package/dist/es2019/get-theme-styles.js +4 -3
- package/dist/es2019/load-custom-theme-styles.js +1 -1
- package/dist/es2019/set-global-theme.js +3 -2
- package/dist/es2019/theme-color-modes.js +7 -0
- package/dist/es2019/theme-config.js +6 -16
- package/dist/es2019/theme-ids.js +7 -0
- package/dist/es2019/theme-state-transformer.js +2 -1
- package/dist/es2019/utils/color-detection.js +3 -11
- package/dist/es2019/utils/color-utils.js +15 -33
- package/dist/es2019/utils/custom-theme-loading-utils.js +4 -8
- package/dist/es2019/utils/custom-theme-token-contrast-check.js +2 -0
- package/dist/es2019/utils/generate-custom-color-ramp.js +11 -15
- package/dist/es2019/utils/get-alpha.js +7 -0
- package/dist/es2019/utils/get-closest-color-index.js +14 -0
- package/dist/es2019/utils/get-css-custom-property.js +23 -0
- package/dist/es2019/utils/get-fully-qualified-token-id.js +11 -0
- package/dist/es2019/utils/get-theme-override-preferences.js +4 -0
- package/dist/es2019/utils/get-theme-preferences.js +1 -4
- package/dist/es2019/utils/get-token-id.js +18 -0
- package/dist/es2019/utils/hct-color-utils/argb-from-rgb.js +6 -0
- package/dist/es2019/utils/hct-color-utils/clamp-double.js +14 -0
- package/dist/es2019/utils/hct-color-utils/clamp-int.js +14 -0
- package/dist/es2019/utils/hct-color-utils/color-utils.js +15 -45
- package/dist/es2019/utils/hct-color-utils/delinearized.js +20 -0
- package/dist/es2019/utils/hct-color-utils/hct.js +3 -76
- package/dist/es2019/utils/hct-color-utils/lerp.js +8 -0
- package/dist/es2019/utils/hct-color-utils/linearized.js +16 -0
- package/dist/es2019/utils/hct-color-utils/math-utils.js +6 -105
- package/dist/es2019/utils/hct-color-utils/matrix-multiply.js +9 -0
- package/dist/es2019/utils/hct-color-utils/sanitize-degrees-double.js +13 -0
- package/dist/es2019/utils/hct-color-utils/signum.js +14 -0
- package/dist/es2019/utils/hct-color-utils/viewing-conditions.js +78 -0
- package/dist/es2019/utils/hex-to-rgba-values.js +9 -0
- package/dist/es2019/utils/hsl-to-rgb.js +8 -0
- package/dist/es2019/utils/is-valid-brand-hex.js +1 -0
- package/dist/es2019/utils/limit-size-of-custom-style-elements.js +8 -0
- package/dist/es2019/utils/load-theme-css.js +7 -0
- package/dist/es2019/utils/relative-luminance-w3-c.js +12 -0
- package/dist/es2019/utils/rgb-to-hex.js +3 -0
- package/dist/es2019/utils/theme-loading.js +3 -8
- package/dist/es2019/utils/token-ids.js +3 -54
- package/dist/esm/artifacts/replacement-mapping.js +5 -2
- package/dist/esm/artifacts/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/artifacts/tokens-raw/atlassian-motion.js +3 -3
- package/dist/esm/constants.js +1 -0
- package/dist/esm/custom-theme.js +4 -58
- package/dist/esm/entry-points/token-metadata.codegen.js +2 -11
- package/dist/esm/get-custom-theme-styles.js +52 -0
- package/dist/esm/get-global-theme.js +1 -1
- package/dist/esm/get-theme-html-attrs.js +1 -1
- package/dist/esm/get-theme-styles.js +30 -29
- package/dist/esm/load-custom-theme-styles.js +1 -1
- package/dist/esm/set-global-theme.js +34 -32
- package/dist/esm/theme-color-modes.js +7 -0
- package/dist/esm/theme-config.js +8 -17
- package/dist/esm/theme-ids.js +7 -0
- package/dist/esm/theme-state-transformer.js +2 -1
- package/dist/esm/utils/color-detection.js +3 -11
- package/dist/esm/utils/color-utils.js +15 -39
- package/dist/esm/utils/custom-theme-loading-utils.js +4 -11
- package/dist/esm/utils/custom-theme-token-contrast-check.js +2 -0
- package/dist/esm/utils/generate-custom-color-ramp.js +11 -15
- package/dist/esm/utils/get-alpha.js +7 -0
- package/dist/esm/utils/get-closest-color-index.js +14 -0
- package/dist/esm/utils/get-css-custom-property.js +26 -0
- package/dist/esm/utils/get-fully-qualified-token-id.js +13 -0
- package/dist/esm/utils/get-theme-override-preferences.js +5 -0
- package/dist/esm/utils/get-theme-preferences.js +1 -4
- package/dist/esm/utils/get-token-id.js +20 -0
- package/dist/esm/utils/hct-color-utils/argb-from-rgb.js +6 -0
- package/dist/esm/utils/hct-color-utils/clamp-double.js +14 -0
- package/dist/esm/utils/hct-color-utils/clamp-int.js +14 -0
- package/dist/esm/utils/hct-color-utils/color-utils.js +15 -45
- package/dist/esm/utils/hct-color-utils/delinearized.js +20 -0
- package/dist/esm/utils/hct-color-utils/hct.js +5 -87
- package/dist/esm/utils/hct-color-utils/lerp.js +8 -0
- package/dist/esm/utils/hct-color-utils/linearized.js +16 -0
- package/dist/esm/utils/hct-color-utils/math-utils.js +6 -105
- package/dist/esm/utils/hct-color-utils/matrix-multiply.js +9 -0
- package/dist/esm/utils/hct-color-utils/sanitize-degrees-double.js +13 -0
- package/dist/esm/utils/hct-color-utils/signum.js +14 -0
- package/dist/esm/utils/hct-color-utils/viewing-conditions.js +89 -0
- package/dist/esm/utils/hex-to-rgba-values.js +9 -0
- package/dist/esm/utils/hsl-to-rgb.js +12 -0
- package/dist/esm/utils/is-valid-brand-hex.js +3 -0
- package/dist/esm/utils/limit-size-of-custom-style-elements.js +10 -0
- package/dist/esm/utils/load-theme-css.js +25 -0
- package/dist/esm/utils/relative-luminance-w3-c.js +12 -0
- package/dist/esm/utils/rgb-to-hex.js +3 -0
- package/dist/esm/utils/theme-loading.js +11 -32
- package/dist/esm/utils/token-ids.js +3 -61
- package/dist/types/artifacts/replacement-mapping.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/artifacts/tokens-raw/atlassian-motion.d.ts +1 -1
- package/dist/types/artifacts/types-internal.d.ts +2 -2
- package/dist/types/artifacts/types.d.ts +2 -2
- package/dist/types/custom-theme.d.ts +1 -20
- package/dist/types/entry-points/token-metadata.codegen.d.ts +1 -1
- package/dist/types/get-custom-theme-styles.d.ts +16 -0
- package/dist/types/get-global-theme.d.ts +1 -1
- package/dist/types/theme-color-modes.d.ts +7 -0
- package/dist/types/theme-config.d.ts +4 -14
- package/dist/types/theme-ids.d.ts +7 -0
- package/dist/types/theme-state-transformer.d.ts +1 -1
- package/dist/types/utils/color-detection.d.ts +1 -6
- package/dist/types/utils/color-utils.d.ts +5 -5
- package/dist/types/utils/custom-theme-loading-utils.d.ts +1 -2
- package/dist/types/utils/generate-custom-color-ramp.d.ts +1 -2
- package/dist/types/utils/get-alpha.d.ts +1 -0
- package/dist/types/utils/get-closest-color-index.d.ts +2 -0
- package/dist/types/utils/get-css-custom-property.d.ts +15 -0
- package/dist/types/utils/get-fully-qualified-token-id.d.ts +11 -0
- package/dist/types/utils/get-theme-override-preferences.d.ts +2 -0
- package/dist/types/utils/get-theme-preferences.d.ts +1 -1
- package/dist/types/utils/get-token-id.d.ts +15 -0
- package/dist/types/utils/hct-color-utils/argb-from-rgb.d.ts +4 -0
- package/dist/types/utils/hct-color-utils/clamp-double.d.ts +7 -0
- package/dist/types/utils/hct-color-utils/clamp-int.d.ts +7 -0
- package/dist/types/utils/hct-color-utils/color-utils.d.ts +3 -23
- package/dist/types/utils/hct-color-utils/delinearized.d.ts +9 -0
- package/dist/types/utils/hct-color-utils/hct.d.ts +3 -48
- package/dist/types/utils/hct-color-utils/lerp.d.ts +6 -0
- package/dist/types/utils/hct-color-utils/linearized.d.ts +9 -0
- package/dist/types/utils/hct-color-utils/math-utils.d.ts +6 -60
- package/dist/types/utils/hct-color-utils/matrix-multiply.d.ts +4 -0
- package/dist/types/utils/hct-color-utils/sanitize-degrees-double.d.ts +7 -0
- package/dist/types/utils/hct-color-utils/signum.d.ts +6 -0
- package/dist/types/utils/hct-color-utils/viewing-conditions.d.ts +47 -0
- package/dist/types/utils/hex-to-rgba-values.d.ts +6 -0
- package/dist/types/utils/hsl-to-rgb.d.ts +1 -0
- package/dist/types/utils/is-valid-brand-hex.d.ts +1 -0
- package/dist/types/utils/limit-size-of-custom-style-elements.d.ts +1 -0
- package/dist/types/utils/load-theme-css.d.ts +2 -0
- package/dist/types/utils/relative-luminance-w3-c.d.ts +1 -0
- package/dist/types/utils/rgb-to-hex.d.ts +1 -0
- package/dist/types/utils/theme-loading.d.ts +1 -1
- package/dist/types/utils/token-ids.d.ts +3 -41
- package/dist/types-ts4.5/artifacts/replacement-mapping.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/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/artifacts/tokens-raw/atlassian-motion.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/types-internal.d.ts +2 -2
- package/dist/types-ts4.5/artifacts/types.d.ts +2 -2
- package/dist/types-ts4.5/custom-theme.d.ts +1 -20
- package/dist/types-ts4.5/entry-points/token-metadata.codegen.d.ts +1 -1
- package/dist/types-ts4.5/get-custom-theme-styles.d.ts +16 -0
- package/dist/types-ts4.5/get-global-theme.d.ts +1 -1
- package/dist/types-ts4.5/theme-color-modes.d.ts +11 -0
- package/dist/types-ts4.5/theme-config.d.ts +4 -29
- package/dist/types-ts4.5/theme-ids.d.ts +18 -0
- package/dist/types-ts4.5/theme-state-transformer.d.ts +1 -1
- package/dist/types-ts4.5/utils/color-detection.d.ts +1 -6
- package/dist/types-ts4.5/utils/color-utils.d.ts +5 -9
- package/dist/types-ts4.5/utils/custom-theme-loading-utils.d.ts +1 -2
- package/dist/types-ts4.5/utils/generate-custom-color-ramp.d.ts +1 -2
- package/dist/types-ts4.5/utils/get-alpha.d.ts +1 -0
- package/dist/types-ts4.5/utils/get-closest-color-index.d.ts +2 -0
- package/dist/types-ts4.5/utils/get-css-custom-property.d.ts +15 -0
- package/dist/types-ts4.5/utils/get-fully-qualified-token-id.d.ts +11 -0
- package/dist/types-ts4.5/utils/get-theme-override-preferences.d.ts +2 -0
- package/dist/types-ts4.5/utils/get-theme-preferences.d.ts +1 -1
- package/dist/types-ts4.5/utils/get-token-id.d.ts +15 -0
- package/dist/types-ts4.5/utils/hct-color-utils/argb-from-rgb.d.ts +4 -0
- package/dist/types-ts4.5/utils/hct-color-utils/clamp-double.d.ts +7 -0
- package/dist/types-ts4.5/utils/hct-color-utils/clamp-int.d.ts +7 -0
- package/dist/types-ts4.5/utils/hct-color-utils/color-utils.d.ts +3 -23
- package/dist/types-ts4.5/utils/hct-color-utils/delinearized.d.ts +9 -0
- package/dist/types-ts4.5/utils/hct-color-utils/hct.d.ts +3 -48
- package/dist/types-ts4.5/utils/hct-color-utils/lerp.d.ts +6 -0
- package/dist/types-ts4.5/utils/hct-color-utils/linearized.d.ts +9 -0
- package/dist/types-ts4.5/utils/hct-color-utils/math-utils.d.ts +6 -60
- package/dist/types-ts4.5/utils/hct-color-utils/matrix-multiply.d.ts +4 -0
- package/dist/types-ts4.5/utils/hct-color-utils/sanitize-degrees-double.d.ts +7 -0
- package/dist/types-ts4.5/utils/hct-color-utils/signum.d.ts +6 -0
- package/dist/types-ts4.5/utils/hct-color-utils/viewing-conditions.d.ts +47 -0
- package/dist/types-ts4.5/utils/hex-to-rgba-values.d.ts +6 -0
- package/dist/types-ts4.5/utils/hsl-to-rgb.d.ts +5 -0
- package/dist/types-ts4.5/utils/is-valid-brand-hex.d.ts +1 -0
- package/dist/types-ts4.5/utils/limit-size-of-custom-style-elements.d.ts +1 -0
- package/dist/types-ts4.5/utils/load-theme-css.d.ts +2 -0
- package/dist/types-ts4.5/utils/relative-luminance-w3-c.d.ts +1 -0
- package/dist/types-ts4.5/utils/rgb-to-hex.d.ts +1 -0
- package/dist/types-ts4.5/utils/theme-loading.d.ts +1 -1
- package/dist/types-ts4.5/utils/token-ids.d.ts +3 -41
- package/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
|
@@ -1,22 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
return /^#[0-9A-F]{6}$/i.test(hex);
|
|
4
|
-
};
|
|
5
|
-
|
|
1
|
+
import { getAlpha } from './get-alpha';
|
|
2
|
+
import { relativeLuminanceW3C } from './relative-luminance-w3-c';
|
|
6
3
|
// valid hex color with 4, 6 or 8 digits
|
|
7
4
|
var isValidHex = function isValidHex(hex) {
|
|
8
5
|
return /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
|
|
9
6
|
};
|
|
10
|
-
export function rgbToHex(r, g, b) {
|
|
11
|
-
return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
|
|
12
|
-
}
|
|
13
|
-
export function getAlpha(hex) {
|
|
14
|
-
if (hex.length === 9) {
|
|
15
|
-
var int = parseInt(hex.slice(7, 9), 16) / 255;
|
|
16
|
-
return Number(parseFloat(int.toString()).toFixed(2));
|
|
17
|
-
}
|
|
18
|
-
return 1;
|
|
19
|
-
}
|
|
20
7
|
export function hexToRgbA(hex) {
|
|
21
8
|
if (!isValidHex(hex)) {
|
|
22
9
|
throw new Error('Invalid HEX');
|
|
@@ -29,6 +16,8 @@ export function hexToRgbA(hex) {
|
|
|
29
16
|
c = '0x' + c.join('');
|
|
30
17
|
return [c >> 16 & 255, c >> 8 & 255, c & 255, getAlpha(hex)];
|
|
31
18
|
}
|
|
19
|
+
|
|
20
|
+
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
32
21
|
export function hexToRgb(hex) {
|
|
33
22
|
if (!isValidHex(hex)) {
|
|
34
23
|
throw new Error('Invalid HEX');
|
|
@@ -41,6 +30,8 @@ export function hexToRgb(hex) {
|
|
|
41
30
|
c = '0x' + c.join('');
|
|
42
31
|
return [c >> 16 & 255, c >> 8 & 255, c & 255];
|
|
43
32
|
}
|
|
33
|
+
|
|
34
|
+
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
44
35
|
export function hexToHSL(hex) {
|
|
45
36
|
if (!isValidHex(hex)) {
|
|
46
37
|
throw new Error('Invalid HEX');
|
|
@@ -86,30 +77,8 @@ export function hexToHSL(hex) {
|
|
|
86
77
|
l = +(l * 100).toFixed(1);
|
|
87
78
|
return [h, s, l];
|
|
88
79
|
}
|
|
89
|
-
export function HSLToRGB(h, s, l) {
|
|
90
|
-
s /= 100;
|
|
91
|
-
l /= 100;
|
|
92
|
-
var k = function k(n) {
|
|
93
|
-
return (n + h / 30) % 12;
|
|
94
|
-
};
|
|
95
|
-
var a = s * Math.min(l, 1 - l);
|
|
96
|
-
var f = function f(n) {
|
|
97
|
-
return l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
|
|
98
|
-
};
|
|
99
|
-
return [255 * f(0), 255 * f(8), 255 * f(4)];
|
|
100
|
-
}
|
|
101
|
-
export function relativeLuminanceW3C(r, g, b) {
|
|
102
|
-
var RsRGB = r / 255;
|
|
103
|
-
var GsRGB = g / 255;
|
|
104
|
-
var BsRGB = b / 255;
|
|
105
|
-
var R = RsRGB <= 0.03928 ? RsRGB / 12.92 : Math.pow((RsRGB + 0.055) / 1.055, 2.4);
|
|
106
|
-
var G = GsRGB <= 0.03928 ? GsRGB / 12.92 : Math.pow((GsRGB + 0.055) / 1.055, 2.4);
|
|
107
|
-
var B = BsRGB <= 0.03928 ? BsRGB / 12.92 : Math.pow((BsRGB + 0.055) / 1.055, 2.4);
|
|
108
80
|
|
|
109
|
-
|
|
110
|
-
var L = 0.2126 * R + 0.7152 * G + 0.0722 * B;
|
|
111
|
-
return L;
|
|
112
|
-
}
|
|
81
|
+
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
113
82
|
export function getContrastRatio(foreground, background) {
|
|
114
83
|
if (!isValidHex(foreground) || !isValidHex(background)) {
|
|
115
84
|
throw new Error('Invalid HEX');
|
|
@@ -123,6 +92,8 @@ export function getContrastRatio(foreground, background) {
|
|
|
123
92
|
var darkest = Math.min(foregroundLuminance, backgroundLuminance);
|
|
124
93
|
return (brightest + 0.05) / (darkest + 0.05);
|
|
125
94
|
}
|
|
95
|
+
|
|
96
|
+
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
126
97
|
export function deltaE(rgbA, rgbB) {
|
|
127
98
|
var labA = rgbToLab(rgbA);
|
|
128
99
|
var labB = rgbToLab(rgbB);
|
|
@@ -159,4 +130,9 @@ function rgbToLab(rgb) {
|
|
|
159
130
|
y = y > 0.008856 ? Math.pow(y, 1 / 3) : 7.787 * y + 16 / 116;
|
|
160
131
|
z = z > 0.008856 ? Math.pow(z, 1 / 3) : 7.787 * z + 16 / 116;
|
|
161
132
|
return [116 * y - 16, 500 * (x - y), 200 * (y - z)];
|
|
162
|
-
}
|
|
133
|
+
}
|
|
134
|
+
export { isValidBrandHex } from './is-valid-brand-hex';
|
|
135
|
+
export { rgbToHex } from './rgb-to-hex';
|
|
136
|
+
export { getAlpha } from './get-alpha';
|
|
137
|
+
export { HSLToRGB } from './hsl-to-rgb';
|
|
138
|
+
export { relativeLuminanceW3C } from './relative-luminance-w3-c';
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
|
-
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
3
2
|
import tokens from '../artifacts/token-names';
|
|
4
3
|
import { CUSTOM_THEME_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from '../constants';
|
|
5
4
|
import { hash } from './hash';
|
|
@@ -18,15 +17,8 @@ export function findMissingCustomStyleElements(UNSAFE_themeOptions, mode) {
|
|
|
18
17
|
});
|
|
19
18
|
return attrOfMissingCustomStyles;
|
|
20
19
|
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
if (styleTags.length < sizeThreshold) {
|
|
24
|
-
return;
|
|
25
|
-
}
|
|
26
|
-
styleTags.slice(0, styleTags.length - (sizeThreshold - 1)).forEach(function (element) {
|
|
27
|
-
return element.remove();
|
|
28
|
-
});
|
|
29
|
-
}
|
|
20
|
+
|
|
21
|
+
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
30
22
|
export function reduceTokenMap(tokenMap, themeRamp) {
|
|
31
23
|
return Object.entries(tokenMap).reduce(function (acc, _ref) {
|
|
32
24
|
var _ref2 = _slicedToArray(_ref, 2),
|
|
@@ -35,4 +27,5 @@ export function reduceTokenMap(tokenMap, themeRamp) {
|
|
|
35
27
|
var cssVar = tokens[key];
|
|
36
28
|
return cssVar ? "".concat(acc, "\n ").concat(cssVar, ": ").concat(typeof value === 'string' ? value : themeRamp[value], ";") : acc;
|
|
37
29
|
}, '');
|
|
38
|
-
}
|
|
30
|
+
}
|
|
31
|
+
export { limitSizeOfCustomStyleElements } from './limit-size-of-custom-style-elements';
|
|
@@ -46,6 +46,8 @@ export var additionalChecks = [{
|
|
|
46
46
|
var getColorFromTokenRaw = function getColorFromTokenRaw(tokenName, mode) {
|
|
47
47
|
return mode === 'light' ? tokenValuesLight[tokenName] : tokenValuesDark[tokenName];
|
|
48
48
|
};
|
|
49
|
+
|
|
50
|
+
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
49
51
|
export var additionalContrastChecker = function additionalContrastChecker(_ref) {
|
|
50
52
|
var customThemeTokenMap = _ref.customThemeTokenMap,
|
|
51
53
|
mode = _ref.mode,
|
|
@@ -4,24 +4,15 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
|
4
4
|
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; }
|
|
5
5
|
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) { _defineProperty(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; }
|
|
6
6
|
import rawTokensDark from '../artifacts/atlassian-dark-token-value-for-contrast-check';
|
|
7
|
-
import {
|
|
7
|
+
import { getContrastRatio, hexToHSL, hexToRgbA } from './color-utils';
|
|
8
8
|
import { additionalContrastChecker } from './custom-theme-token-contrast-check';
|
|
9
|
+
import { getClosestColorIndex } from './get-closest-color-index';
|
|
9
10
|
import { argbFromRgba, Contrast, Hct, rgbaFromArgb } from './hct-color-utils';
|
|
11
|
+
import { HSLToRGB } from './hsl-to-rgb';
|
|
12
|
+
import { relativeLuminanceW3C } from './relative-luminance-w3-c';
|
|
13
|
+
import { rgbToHex } from './rgb-to-hex';
|
|
10
14
|
var lowLuminanceContrastRatios = [1.12, 1.33, 2.03, 2.73, 3.33, 4.27, 5.2, 6.62, 12.46, 14.25];
|
|
11
15
|
var highLuminanceContrastRatios = [1.08, 1.24, 1.55, 1.99, 2.45, 3.34, 4.64, 6.1, 10.19, 12.6];
|
|
12
|
-
export var getClosestColorIndex = function getClosestColorIndex(themeRamp, brandColor) {
|
|
13
|
-
// Iterate over themeRamp and find whichever color is closest to brandColor
|
|
14
|
-
var closestColorIndex = 0;
|
|
15
|
-
var closestColorDistance = null;
|
|
16
|
-
themeRamp.forEach(function (value, index) {
|
|
17
|
-
var distance = deltaE(hexToRgb(value), hexToRgb(brandColor));
|
|
18
|
-
if (closestColorDistance === null || distance < closestColorDistance) {
|
|
19
|
-
closestColorIndex = index;
|
|
20
|
-
closestColorDistance = distance;
|
|
21
|
-
}
|
|
22
|
-
});
|
|
23
|
-
return closestColorIndex;
|
|
24
|
-
};
|
|
25
16
|
export var generateColors = function generateColors(brandColor) {
|
|
26
17
|
// Determine luminance
|
|
27
18
|
var HSLBrandColorHue = hexToHSL(brandColor)[0];
|
|
@@ -72,6 +63,8 @@ function getInteractionStates(rampPosition, number, colors) {
|
|
|
72
63
|
}
|
|
73
64
|
return result;
|
|
74
65
|
}
|
|
66
|
+
|
|
67
|
+
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
75
68
|
export var generateTokenMap = function generateTokenMap(brandColor, mode, themeRamp) {
|
|
76
69
|
var _generateColors = generateColors(brandColor),
|
|
77
70
|
ramp = _generateColors.ramp,
|
|
@@ -211,6 +204,8 @@ export var generateTokenMap = function generateTokenMap(brandColor, mode, themeR
|
|
|
211
204
|
dark: customThemeTokenMapDark
|
|
212
205
|
};
|
|
213
206
|
};
|
|
207
|
+
|
|
208
|
+
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
214
209
|
export var generateTokenMapWithContrastCheck = function generateTokenMapWithContrastCheck(brandColor, mode, themeRamp) {
|
|
215
210
|
var colors = themeRamp || generateColors(brandColor).ramp;
|
|
216
211
|
var tokenMaps = generateTokenMap(brandColor, mode, colors);
|
|
@@ -228,4 +223,5 @@ export var generateTokenMapWithContrastCheck = function generateTokenMapWithCont
|
|
|
228
223
|
}
|
|
229
224
|
});
|
|
230
225
|
return result;
|
|
231
|
-
};
|
|
226
|
+
};
|
|
227
|
+
export { getClosestColorIndex } from './get-closest-color-index';
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { deltaE, hexToRgb } from './color-utils';
|
|
2
|
+
export var getClosestColorIndex = function getClosestColorIndex(themeRamp, brandColor) {
|
|
3
|
+
// Iterate over themeRamp and find whichever color is closest to brandColor
|
|
4
|
+
var closestColorIndex = 0;
|
|
5
|
+
var closestColorDistance = null;
|
|
6
|
+
themeRamp.forEach(function (value, index) {
|
|
7
|
+
var distance = deltaE(hexToRgb(value), hexToRgb(brandColor));
|
|
8
|
+
if (closestColorDistance === null || distance < closestColorDistance) {
|
|
9
|
+
closestColorIndex = index;
|
|
10
|
+
closestColorDistance = distance;
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
return closestColorIndex;
|
|
14
|
+
};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
|
+
import { CSS_PREFIX, CSS_VAR_FULL } from '../constants';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Transforms a style dictionary token path to a CSS custom property.
|
|
6
|
+
*
|
|
7
|
+
* A css prefix will be prepended and all [default] key words will be omitted
|
|
8
|
+
* from the path
|
|
9
|
+
*
|
|
10
|
+
* @example <caption>Passing a path as an array</caption>
|
|
11
|
+
* // Returns ds-background-bold
|
|
12
|
+
* getCSSCustomProperty(['color', 'background', 'bold', '[default]'])
|
|
13
|
+
*
|
|
14
|
+
* @example <caption>Passing a path as a string</caption>
|
|
15
|
+
* // Returns ds-background-bold
|
|
16
|
+
* getCSSCustomProperty('color.background.bold.[default]')
|
|
17
|
+
*/
|
|
18
|
+
export var getCSSCustomProperty = function getCSSCustomProperty(path) {
|
|
19
|
+
var normalizedPath = typeof path === 'string' ? path.split('.') : path;
|
|
20
|
+
|
|
21
|
+
// Opacity and other 'shallow' groups are more readable when not trimmed
|
|
22
|
+
var slice = CSS_VAR_FULL.includes(normalizedPath[0]) ? 0 : 1;
|
|
23
|
+
return "--".concat([CSS_PREFIX].concat(_toConsumableArray(normalizedPath.slice(slice))).filter(function (el) {
|
|
24
|
+
return el !== '[default]';
|
|
25
|
+
}).join('-'));
|
|
26
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Transforms a style dictionary token path to a fully qualified token id
|
|
3
|
+
* These Ids are intended to be used internal to this package by style-dictionary
|
|
4
|
+
*
|
|
5
|
+
* [default] key words will NOT be omitted from the path
|
|
6
|
+
*
|
|
7
|
+
* @example <caption>Passing a path as a string</caption>
|
|
8
|
+
* // Returns color.background.bold.[default]
|
|
9
|
+
* getFullyQualifiedTokenId(['color', 'background', 'bold', '[default]'])
|
|
10
|
+
*/
|
|
11
|
+
export var getFullyQualifiedTokenId = function getFullyQualifiedTokenId(path) {
|
|
12
|
+
return path.join('.');
|
|
13
|
+
};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
|
+
export var getThemeOverridePreferences = function getThemeOverridePreferences(_themeState) {
|
|
3
|
+
var themeOverridePreferences = [];
|
|
4
|
+
return _toConsumableArray(new Set(themeOverridePreferences));
|
|
5
|
+
};
|
|
@@ -38,7 +38,4 @@ export var getThemePreferences = function getThemePreferences(themeState) {
|
|
|
38
38
|
});
|
|
39
39
|
return _toConsumableArray(new Set(themePreferences));
|
|
40
40
|
};
|
|
41
|
-
export
|
|
42
|
-
var themeOverridePreferences = [];
|
|
43
|
-
return _toConsumableArray(new Set(themeOverridePreferences));
|
|
44
|
-
};
|
|
41
|
+
export { getThemeOverridePreferences } from './get-theme-override-preferences';
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Transforms a style dictionary token path to a shorthand token id
|
|
3
|
+
* These ids will be typically be how tokens are interacted with via typescript and css
|
|
4
|
+
*
|
|
5
|
+
* All [default] key words will be omitted from the path
|
|
6
|
+
*
|
|
7
|
+
* @example <caption>Passing a path as an array</caption>
|
|
8
|
+
* // Returns color.background.bold
|
|
9
|
+
* getTokenId(['color', 'background', 'bold', '[default]'])
|
|
10
|
+
*
|
|
11
|
+
* @example <caption>Passing a path as a string</caption>
|
|
12
|
+
* // Returns color.background.bold
|
|
13
|
+
* getTokenId('color.background.bold.[default]')
|
|
14
|
+
*/
|
|
15
|
+
export var getTokenId = function getTokenId(path) {
|
|
16
|
+
var normalizedPath = typeof path === 'string' ? path.split('.') : path;
|
|
17
|
+
return normalizedPath.filter(function (el) {
|
|
18
|
+
return el !== '[default]';
|
|
19
|
+
}).join('.');
|
|
20
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Clamps an integer between two floating-point numbers.
|
|
3
|
+
*
|
|
4
|
+
* @return input when min <= input <= max, and either min or max
|
|
5
|
+
* otherwise.
|
|
6
|
+
*/
|
|
7
|
+
export function clampDouble(min, max, input) {
|
|
8
|
+
if (input < min) {
|
|
9
|
+
return min;
|
|
10
|
+
} else if (input > max) {
|
|
11
|
+
return max;
|
|
12
|
+
}
|
|
13
|
+
return input;
|
|
14
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Clamps an integer between two integers.
|
|
3
|
+
*
|
|
4
|
+
* @return input when min <= input <= max, and either min or max
|
|
5
|
+
* otherwise.
|
|
6
|
+
*/
|
|
7
|
+
export function clampInt(min, max, input) {
|
|
8
|
+
if (input < min) {
|
|
9
|
+
return min;
|
|
10
|
+
} else if (input > max) {
|
|
11
|
+
return max;
|
|
12
|
+
}
|
|
13
|
+
return input;
|
|
14
|
+
}
|
|
@@ -22,8 +22,10 @@
|
|
|
22
22
|
|
|
23
23
|
// This file is automatically generated. Do not modify it.
|
|
24
24
|
|
|
25
|
+
import { argbFromRgb } from './argb-from-rgb';
|
|
26
|
+
import { delinearized } from './delinearized';
|
|
27
|
+
import { linearized } from './linearized';
|
|
25
28
|
import * as mathUtils from './math-utils';
|
|
26
|
-
|
|
27
29
|
/**
|
|
28
30
|
* Color science utilities.
|
|
29
31
|
*
|
|
@@ -35,13 +37,6 @@ var SRGB_TO_XYZ = [[0.41233895, 0.35762064, 0.18051042], [0.2126, 0.7152, 0.0722
|
|
|
35
37
|
var XYZ_TO_SRGB = [[3.2413774792388685, -1.5376652402851851, -0.49885366846268053], [-0.9691452513005321, 1.8758853451067872, 0.04156585616912061], [0.05562093689691305, -0.20395524564742123, 1.0571799111220335]];
|
|
36
38
|
var WHITE_POINT_D65 = [95.047, 100.0, 108.883];
|
|
37
39
|
|
|
38
|
-
/**
|
|
39
|
-
* Converts a color from RGB components to ARGB format.
|
|
40
|
-
*/
|
|
41
|
-
export function argbFromRgb(red, green, blue) {
|
|
42
|
-
return (255 << 24 | (red & 255) << 16 | (green & 255) << 8 | blue & 255) >>> 0;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
40
|
/**
|
|
46
41
|
* Converts a color from linear RGB components to ARGB format.
|
|
47
42
|
*/
|
|
@@ -83,6 +78,7 @@ function blueFromArgb(argb) {
|
|
|
83
78
|
/**
|
|
84
79
|
* Converts a color from ARGB to XYZ.
|
|
85
80
|
*/
|
|
81
|
+
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
86
82
|
export function argbFromXyz(x, y, z) {
|
|
87
83
|
var matrix = XYZ_TO_SRGB;
|
|
88
84
|
var linearR = matrix[0][0] * x + matrix[0][1] * y + matrix[0][2] * z;
|
|
@@ -111,6 +107,7 @@ function xyzFromArgb(argb) {
|
|
|
111
107
|
* @return ARGB representation of grayscale color with lightness
|
|
112
108
|
* matching L*
|
|
113
109
|
*/
|
|
110
|
+
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
114
111
|
export function argbFromLstar(lstar) {
|
|
115
112
|
var y = yFromLstar(lstar);
|
|
116
113
|
var component = delinearized(y);
|
|
@@ -123,6 +120,7 @@ export function argbFromLstar(lstar) {
|
|
|
123
120
|
* @param argb ARGB representation of a color
|
|
124
121
|
* @return L*, from L*a*b*, coordinate of the color
|
|
125
122
|
*/
|
|
123
|
+
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
126
124
|
export function lstarFromArgb(argb) {
|
|
127
125
|
var y = xyzFromArgb(argb)[1];
|
|
128
126
|
return 116.0 * labF(y / 100.0) - 16.0;
|
|
@@ -139,6 +137,7 @@ export function lstarFromArgb(argb) {
|
|
|
139
137
|
* @param lstar L* in L*a*b*
|
|
140
138
|
* @return Y in XYZ
|
|
141
139
|
*/
|
|
140
|
+
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
142
141
|
export function yFromLstar(lstar) {
|
|
143
142
|
return 100.0 * labInvf((lstar + 16.0) / 116.0);
|
|
144
143
|
}
|
|
@@ -154,51 +153,17 @@ export function yFromLstar(lstar) {
|
|
|
154
153
|
* @param y Y in XYZ
|
|
155
154
|
* @return L* in L*a*b*
|
|
156
155
|
*/
|
|
156
|
+
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
157
157
|
export function lstarFromY(y) {
|
|
158
158
|
return labF(y / 100.0) * 116.0 - 16.0;
|
|
159
159
|
}
|
|
160
160
|
|
|
161
|
-
/**
|
|
162
|
-
* Linearizes an RGB component.
|
|
163
|
-
*
|
|
164
|
-
* @param rgbComponent 0 <= rgb_component <= 255, represents R/G/B
|
|
165
|
-
* channel
|
|
166
|
-
* @return 0.0 <= output <= 100.0, color channel converted to
|
|
167
|
-
* linear RGB space
|
|
168
|
-
*/
|
|
169
|
-
export function linearized(rgbComponent) {
|
|
170
|
-
var normalized = rgbComponent / 255.0;
|
|
171
|
-
if (normalized <= 0.040449936) {
|
|
172
|
-
return normalized / 12.92 * 100.0;
|
|
173
|
-
} else {
|
|
174
|
-
return Math.pow((normalized + 0.055) / 1.055, 2.4) * 100.0;
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
/**
|
|
179
|
-
* Delinearizes an RGB component.
|
|
180
|
-
*
|
|
181
|
-
* @param rgbComponent 0.0 <= rgb_component <= 100.0, represents
|
|
182
|
-
* linear R/G/B channel
|
|
183
|
-
* @return 0 <= output <= 255, color channel converted to regular
|
|
184
|
-
* RGB space
|
|
185
|
-
*/
|
|
186
|
-
export function delinearized(rgbComponent) {
|
|
187
|
-
var normalized = rgbComponent / 100.0;
|
|
188
|
-
var delinearized = 0.0;
|
|
189
|
-
if (normalized <= 0.0031308) {
|
|
190
|
-
delinearized = normalized * 12.92;
|
|
191
|
-
} else {
|
|
192
|
-
delinearized = 1.055 * Math.pow(normalized, 1.0 / 2.4) - 0.055;
|
|
193
|
-
}
|
|
194
|
-
return mathUtils.clampInt(0, 255, Math.round(delinearized * 255.0));
|
|
195
|
-
}
|
|
196
|
-
|
|
197
161
|
/**
|
|
198
162
|
* Returns the standard white point; white on a sunny day.
|
|
199
163
|
*
|
|
200
164
|
* @return The white point
|
|
201
165
|
*/
|
|
166
|
+
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
202
167
|
export function whitePointD65() {
|
|
203
168
|
return WHITE_POINT_D65;
|
|
204
169
|
}
|
|
@@ -218,6 +183,7 @@ export function whitePointD65() {
|
|
|
218
183
|
* @param argb ARGB representation of a int32 color.
|
|
219
184
|
* @return RGBA representation of a int32 color.
|
|
220
185
|
*/
|
|
186
|
+
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
221
187
|
export function rgbaFromArgb(argb) {
|
|
222
188
|
var r = redFromArgb(argb);
|
|
223
189
|
var g = greenFromArgb(argb);
|
|
@@ -237,6 +203,7 @@ export function rgbaFromArgb(argb) {
|
|
|
237
203
|
* @param rgba RGBA representation of a int32 color.
|
|
238
204
|
* @returns ARGB representation of a int32 color.
|
|
239
205
|
*/
|
|
206
|
+
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
240
207
|
export function argbFromRgba(_ref) {
|
|
241
208
|
var r = _ref.r,
|
|
242
209
|
g = _ref.g,
|
|
@@ -275,4 +242,7 @@ function labInvf(ft) {
|
|
|
275
242
|
} else {
|
|
276
243
|
return (116 * ft - 16) / kappa;
|
|
277
244
|
}
|
|
278
|
-
}
|
|
245
|
+
}
|
|
246
|
+
export { argbFromRgb } from './argb-from-rgb';
|
|
247
|
+
export { linearized } from './linearized';
|
|
248
|
+
export { delinearized } from './delinearized';
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import * as mathUtils from './math-utils';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Delinearizes an RGB component.
|
|
5
|
+
*
|
|
6
|
+
* @param rgbComponent 0.0 <= rgb_component <= 100.0, represents
|
|
7
|
+
* linear R/G/B channel
|
|
8
|
+
* @return 0 <= output <= 255, color channel converted to regular
|
|
9
|
+
* RGB space
|
|
10
|
+
*/
|
|
11
|
+
export function delinearized(rgbComponent) {
|
|
12
|
+
var normalized = rgbComponent / 100.0;
|
|
13
|
+
var delinearized = 0.0;
|
|
14
|
+
if (normalized <= 0.0031308) {
|
|
15
|
+
delinearized = normalized * 12.92;
|
|
16
|
+
} else {
|
|
17
|
+
delinearized = 1.055 * Math.pow(normalized, 1.0 / 2.4) - 0.055;
|
|
18
|
+
}
|
|
19
|
+
return mathUtils.clampInt(0, 255, Math.round(delinearized * 255.0));
|
|
20
|
+
}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
3
3
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
4
|
-
var _ViewingConditions;
|
|
5
4
|
/**
|
|
6
5
|
* Below lines are copied from @material/material-color-utilities.
|
|
7
6
|
* Do not modify it.
|
|
@@ -26,7 +25,7 @@ var _ViewingConditions;
|
|
|
26
25
|
|
|
27
26
|
import * as utils from './color-utils';
|
|
28
27
|
import * as math from './math-utils';
|
|
29
|
-
|
|
28
|
+
import { ViewingConditions } from './viewing-conditions';
|
|
30
29
|
/**
|
|
31
30
|
* A color system built using CAM16 hue and chroma, and L* from
|
|
32
31
|
* L*a*b*.
|
|
@@ -56,7 +55,6 @@ export var Hct = /*#__PURE__*/function () {
|
|
|
56
55
|
this.internalHue = cam.hue;
|
|
57
56
|
this.internalChroma = cam.chroma;
|
|
58
57
|
this.internalTone = utils.lstarFromArgb(argb);
|
|
59
|
-
this.argb = argb;
|
|
60
58
|
}
|
|
61
59
|
return _createClass(Hct, [{
|
|
62
60
|
key: "toInt",
|
|
@@ -220,6 +218,7 @@ var Cam16 = /*#__PURE__*/function () {
|
|
|
220
218
|
* @param astar CAM16-UCS a coordinate
|
|
221
219
|
* @param bstar CAM16-UCS b coordinate
|
|
222
220
|
*/
|
|
221
|
+
|
|
223
222
|
function Cam16(hue, chroma, j, q, m, s, jstar, astar, bstar) {
|
|
224
223
|
_classCallCheck(this, Cam16);
|
|
225
224
|
this.hue = hue;
|
|
@@ -724,8 +723,8 @@ var HctSolver = /*#__PURE__*/function () {
|
|
|
724
723
|
var rightHue = 0.0;
|
|
725
724
|
var initialized = false;
|
|
726
725
|
var uncut = true;
|
|
727
|
-
for (var
|
|
728
|
-
var mid = HctSolver.nthVertex(y,
|
|
726
|
+
for (var n = 0; n < 12; n++) {
|
|
727
|
+
var mid = HctSolver.nthVertex(y, n);
|
|
729
728
|
if (mid[0] < 0) {
|
|
730
729
|
continue;
|
|
731
730
|
}
|
|
@@ -943,85 +942,4 @@ _defineProperty(HctSolver, "SCALED_DISCOUNT_FROM_LINRGB", [[0.001200833568784504
|
|
|
943
942
|
_defineProperty(HctSolver, "LINRGB_FROM_SCALED_DISCOUNT", [[1373.2198709594231, -1100.4251190754821, -7.278681089101213], [-271.815969077903, 559.6580465940733, -32.46047482791194], [1.9622899599665666, -57.173814538844006, 308.7233197812385]]);
|
|
944
943
|
_defineProperty(HctSolver, "Y_FROM_LINRGB", [0.2126, 0.7152, 0.0722]);
|
|
945
944
|
_defineProperty(HctSolver, "CRITICAL_PLANES", [0.015176349177441876, 0.045529047532325624, 0.07588174588720938, 0.10623444424209313, 0.13658714259697685, 0.16693984095186062, 0.19729253930674434, 0.2276452376616281, 0.2579979360165119, 0.28835063437139563, 0.3188300904430532, 0.350925934958123, 0.3848314933096426, 0.42057480301049466, 0.458183274052838, 0.4976837250274023, 0.5391024159806381, 0.5824650784040898, 0.6277969426914107, 0.6751227633498623, 0.7244668422128921, 0.775853049866786, 0.829304845476233, 0.8848452951698498, 0.942497089126609, 1.0022825574869039, 1.0642236851973577, 1.1283421258858297, 1.1946592148522128, 1.2631959812511864, 1.3339731595349034, 1.407011200216447, 1.4823302800086415, 1.5599503113873272, 1.6398909516233677, 1.7221716113234105, 1.8068114625156377, 1.8938294463134073, 1.9832442801866852, 2.075074464868551, 2.1693382909216234, 2.2660538449872063, 2.36523901573795, 2.4669114995532007, 2.5710888059345764, 2.6777882626779785, 2.7870270208169257, 2.898822059350997, 3.0131901897720907, 3.1301480604002863, 3.2497121605402226, 3.3718988244681087, 3.4967242352587946, 3.624204428461639, 3.754355295633311, 3.887192587735158, 4.022731918402185, 4.160988767090289, 4.301978482107941, 4.445716283538092, 4.592217266055746, 4.741496401646282, 4.893568542229298, 5.048448422192488, 5.20615066083972, 5.3666897647573375, 5.5300801301023865, 5.696336044816294, 5.865471690767354, 6.037501145825082, 6.212438385869475, 6.390297286737924, 6.571091626112461, 6.7548350853498045, 6.941541251256611, 7.131223617812143, 7.323895587840543, 7.5195704746346665, 7.7182615035334345, 7.919981813454504, 8.124744458384042, 8.332562408825165, 8.543448553206703, 8.757415699253682, 8.974476575321063, 9.194643831691977, 9.417930041841839, 9.644347703669503, 9.873909240696694, 10.106627003236781, 10.342513269534024, 10.58158024687427, 10.8238400726681, 11.069304815507364, 11.317986476196008, 11.569896988756009, 11.825048221409341, 12.083451977536606, 12.345119996613247, 12.610063955123938, 12.878295467455942, 13.149826086772048, 13.42466730586372, 13.702830557985108, 13.984327217668513, 14.269168601521828, 14.55736596900856, 14.848930523210871, 15.143873411576273, 15.44220572664832, 15.743938506781891, 16.04908273684337, 16.35764934889634, 16.66964922287304, 16.985093187232053, 17.30399201960269, 17.62635644741625, 17.95219714852476, 18.281524751807332, 18.614349837764564, 18.95068293910138, 19.290534541298456, 19.633915083172692, 19.98083495742689, 20.331304511189067, 20.685334046541502, 21.042933821039977, 21.404114048223256, 21.76888489811322, 22.137256497705877, 22.50923893145328, 22.884842241736916, 23.264076429332462, 23.6469514538663, 24.033477234264016, 24.42366364919083, 24.817520537484558, 25.21505769858089, 25.61628489293138, 26.021211842414342, 26.429848230738664, 26.842203703840827, 27.258287870275353, 27.678110301598522, 28.10168053274597, 28.529008062403893, 28.96010235337422, 29.39497283293396, 29.83362889318845, 30.276079891419332, 30.722335150426627, 31.172403958865512, 31.62629557157785, 32.08401920991837, 32.54558406207592, 33.010999283389665, 33.4802739966603, 33.953417292456834, 34.430438229418264, 34.911345834551085, 35.39614910352207, 35.88485700094671, 36.37747846067349, 36.87402238606382, 37.37449765026789, 37.87891309649659, 38.38727753828926, 38.89959975977785, 39.41588851594697, 39.93615253289054, 40.460400508064545, 40.98864111053629, 41.520882981230194, 42.05713473317016, 42.597404951718396, 43.141702194811224, 43.6900349931913, 44.24241185063697, 44.798841244188324, 45.35933162437017, 45.92389141541209, 46.49252901546552, 47.065252796817916, 47.64207110610409, 48.22299226451468, 48.808024568002054, 49.3971762874833, 49.9904556690408, 50.587870934119984, 51.189430279724725, 51.79514187861014, 52.40501387947288, 53.0190544071392, 53.637271562750364, 54.259673423945976, 54.88626804504493, 55.517063457223934, 56.15206766869424, 56.79128866487574, 57.43473440856916, 58.08241284012621, 58.734331877617365, 59.39049941699807, 60.05092333227251, 60.715611475655585, 61.38457167773311, 62.057811747619894, 62.7353394731159, 63.417162620860914, 64.10328893648692, 64.79372614476921, 65.48848194977529, 66.18756403501224, 66.89098006357258, 67.59873767827808, 68.31084450182222, 69.02730813691093, 69.74813616640164, 70.47333615344107, 71.20291564160104, 71.93688215501312, 72.67524319850172, 73.41800625771542, 74.16517879925733, 74.9167682708136, 75.67278210128072, 76.43322770089146, 77.1981124613393, 77.96744375590167, 78.74122893956174, 79.51947534912904, 80.30219030335869, 81.08938110306934, 81.88105503125999, 82.67721935322541, 83.4778813166706, 84.28304815182372, 85.09272707154808, 85.90692527145302, 86.72564993000343, 87.54890820862819, 88.3767072518277, 89.2090541872801, 90.04595612594655, 90.88742016217518, 91.73345337380438, 92.58406282226491, 93.43925555268066, 94.29903859396902, 95.16341895893969, 96.03240364439274, 96.9059996312159, 97.78421388448044, 98.6670533535366, 99.55452497210776]);
|
|
946
|
-
export
|
|
947
|
-
/**
|
|
948
|
-
* Parameters are intermediate values of the CAM16 conversion process. Their
|
|
949
|
-
* names are shorthand for technical color science terminology, this class
|
|
950
|
-
* would not benefit from documenting them individually. A brief overview
|
|
951
|
-
* is available in the CAM16 specification, and a complete overview requires
|
|
952
|
-
* a color science textbook, such as Fairchild's Color Appearance Models.
|
|
953
|
-
*/
|
|
954
|
-
function ViewingConditions(n, aw, nbb, ncb, c, nc, rgbD, fl, fLRoot, z) {
|
|
955
|
-
_classCallCheck(this, ViewingConditions);
|
|
956
|
-
this.n = n;
|
|
957
|
-
this.aw = aw;
|
|
958
|
-
this.nbb = nbb;
|
|
959
|
-
this.ncb = ncb;
|
|
960
|
-
this.c = c;
|
|
961
|
-
this.nc = nc;
|
|
962
|
-
this.rgbD = rgbD;
|
|
963
|
-
this.fl = fl;
|
|
964
|
-
this.fLRoot = fLRoot;
|
|
965
|
-
this.z = z;
|
|
966
|
-
}
|
|
967
|
-
return _createClass(ViewingConditions, null, [{
|
|
968
|
-
key: "make",
|
|
969
|
-
value:
|
|
970
|
-
/**
|
|
971
|
-
* Create ViewingConditions from a simple, physically relevant, set of
|
|
972
|
-
* parameters.
|
|
973
|
-
*
|
|
974
|
-
* @param whitePoint White point, measured in the XYZ color space.
|
|
975
|
-
* default = D65, or sunny day afternoon
|
|
976
|
-
* @param adaptingLuminance The luminance of the adapting field. Informally,
|
|
977
|
-
* how bright it is in the room where the color is viewed. Can be
|
|
978
|
-
* calculated from lux by multiplying lux by 0.0586. default = 11.72,
|
|
979
|
-
* or 200 lux.
|
|
980
|
-
* @param backgroundLstar The lightness of the area surrounding the color.
|
|
981
|
-
* measured by L* in L*a*b*. default = 50.0
|
|
982
|
-
* @param surround A general description of the lighting surrounding the
|
|
983
|
-
* color. 0 is pitch dark, like watching a movie in a theater. 1.0 is a
|
|
984
|
-
* dimly light room, like watching TV at home at night. 2.0 means there
|
|
985
|
-
* is no difference between the lighting on the color and around it.
|
|
986
|
-
* default = 2.0
|
|
987
|
-
* @param discountingIlluminant Whether the eye accounts for the tint of the
|
|
988
|
-
* ambient lighting, such as knowing an apple is still red in green light.
|
|
989
|
-
* default = false, the eye does not perform this process on
|
|
990
|
-
* self-luminous objects like displays.
|
|
991
|
-
*/
|
|
992
|
-
function make() {
|
|
993
|
-
var whitePoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : utils.whitePointD65();
|
|
994
|
-
var adaptingLuminance = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 200.0 / Math.PI * utils.yFromLstar(50.0) / 100.0;
|
|
995
|
-
var backgroundLstar = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 50.0;
|
|
996
|
-
var surround = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 2.0;
|
|
997
|
-
var discountingIlluminant = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
|
|
998
|
-
var xyz = whitePoint;
|
|
999
|
-
var rW = xyz[0] * 0.401288 + xyz[1] * 0.650173 + xyz[2] * -0.051461;
|
|
1000
|
-
var gW = xyz[0] * -0.250268 + xyz[1] * 1.204414 + xyz[2] * 0.045854;
|
|
1001
|
-
var bW = xyz[0] * -0.002079 + xyz[1] * 0.048952 + xyz[2] * 0.953127;
|
|
1002
|
-
var f = 0.8 + surround / 10.0;
|
|
1003
|
-
var c = f >= 0.9 ? math.lerp(0.59, 0.69, (f - 0.9) * 10.0) : math.lerp(0.525, 0.59, (f - 0.8) * 10.0);
|
|
1004
|
-
var d = discountingIlluminant ? 1.0 : f * (1.0 - 1.0 / 3.6 * Math.exp((-adaptingLuminance - 42.0) / 92.0));
|
|
1005
|
-
d = d > 1.0 ? 1.0 : d < 0.0 ? 0.0 : d;
|
|
1006
|
-
var nc = f;
|
|
1007
|
-
var rgbD = [d * (100.0 / rW) + 1.0 - d, d * (100.0 / gW) + 1.0 - d, d * (100.0 / bW) + 1.0 - d];
|
|
1008
|
-
var k = 1.0 / (5.0 * adaptingLuminance + 1.0);
|
|
1009
|
-
var k4 = k * k * k * k;
|
|
1010
|
-
var k4F = 1.0 - k4;
|
|
1011
|
-
var fl = k4 * adaptingLuminance + 0.1 * k4F * k4F * Math.cbrt(5.0 * adaptingLuminance);
|
|
1012
|
-
var n = utils.yFromLstar(backgroundLstar) / whitePoint[1];
|
|
1013
|
-
var z = 1.48 + Math.sqrt(n);
|
|
1014
|
-
var nbb = 0.725 / Math.pow(n, 0.2);
|
|
1015
|
-
var ncb = nbb;
|
|
1016
|
-
var rgbAFactors = [Math.pow(fl * rgbD[0] * rW / 100.0, 0.42), Math.pow(fl * rgbD[1] * gW / 100.0, 0.42), Math.pow(fl * rgbD[2] * bW / 100.0, 0.42)];
|
|
1017
|
-
var rgbA = [400.0 * rgbAFactors[0] / (rgbAFactors[0] + 27.13), 400.0 * rgbAFactors[1] / (rgbAFactors[1] + 27.13), 400.0 * rgbAFactors[2] / (rgbAFactors[2] + 27.13)];
|
|
1018
|
-
var aw = (2.0 * rgbA[0] + rgbA[1] + 0.05 * rgbA[2]) * nbb;
|
|
1019
|
-
return new ViewingConditions(n, aw, nbb, ncb, c, nc, rgbD, fl, Math.pow(fl, 0.25), z);
|
|
1020
|
-
}
|
|
1021
|
-
}]);
|
|
1022
|
-
}();
|
|
1023
|
-
_ViewingConditions = ViewingConditions;
|
|
1024
|
-
/**
|
|
1025
|
-
* sRGB-like viewing conditions.
|
|
1026
|
-
*/
|
|
1027
|
-
_defineProperty(ViewingConditions, "DEFAULT", _ViewingConditions.make());
|
|
945
|
+
export { ViewingConditions } from './viewing-conditions';
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Linearizes an RGB component.
|
|
3
|
+
*
|
|
4
|
+
* @param rgbComponent 0 <= rgb_component <= 255, represents R/G/B
|
|
5
|
+
* channel
|
|
6
|
+
* @return 0.0 <= output <= 100.0, color channel converted to
|
|
7
|
+
* linear RGB space
|
|
8
|
+
*/
|
|
9
|
+
export function linearized(rgbComponent) {
|
|
10
|
+
var normalized = rgbComponent / 255.0;
|
|
11
|
+
if (normalized <= 0.040449936) {
|
|
12
|
+
return normalized / 12.92 * 100.0;
|
|
13
|
+
} else {
|
|
14
|
+
return Math.pow((normalized + 0.055) / 1.055, 2.4) * 100.0;
|
|
15
|
+
}
|
|
16
|
+
}
|