@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
|
@@ -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 @@ const SRGB_TO_XYZ = [[0.41233895, 0.35762064, 0.18051042], [0.2126, 0.7152, 0.07
|
|
|
35
37
|
const XYZ_TO_SRGB = [[3.2413774792388685, -1.5376652402851851, -0.49885366846268053], [-0.9691452513005321, 1.8758853451067872, 0.04156585616912061], [0.05562093689691305, -0.20395524564742123, 1.0571799111220335]];
|
|
36
38
|
const 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
|
const matrix = XYZ_TO_SRGB;
|
|
88
84
|
const 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
|
const y = yFromLstar(lstar);
|
|
116
113
|
const 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
|
const 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
|
-
const 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
|
-
const normalized = rgbComponent / 100.0;
|
|
188
|
-
let 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
|
const r = redFromArgb(argb);
|
|
223
189
|
const 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({
|
|
241
208
|
r,
|
|
242
209
|
g,
|
|
@@ -276,4 +243,7 @@ function labInvf(ft) {
|
|
|
276
243
|
} else {
|
|
277
244
|
return (116 * ft - 16) / kappa;
|
|
278
245
|
}
|
|
279
|
-
}
|
|
246
|
+
}
|
|
247
|
+
export { argbFromRgb } from './argb-from-rgb';
|
|
248
|
+
export { linearized } from './linearized';
|
|
249
|
+
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
|
+
const normalized = rgbComponent / 100.0;
|
|
13
|
+
let 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,5 +1,4 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
-
var _ViewingConditions;
|
|
3
2
|
/**
|
|
4
3
|
* Below lines are copied from @material/material-color-utilities.
|
|
5
4
|
* Do not modify it.
|
|
@@ -24,7 +23,7 @@ var _ViewingConditions;
|
|
|
24
23
|
|
|
25
24
|
import * as utils from './color-utils';
|
|
26
25
|
import * as math from './math-utils';
|
|
27
|
-
|
|
26
|
+
import { ViewingConditions } from './viewing-conditions';
|
|
28
27
|
/**
|
|
29
28
|
* A color system built using CAM16 hue and chroma, and L* from
|
|
30
29
|
* L*a*b*.
|
|
@@ -121,7 +120,6 @@ export class Hct {
|
|
|
121
120
|
this.internalHue = cam.hue;
|
|
122
121
|
this.internalChroma = cam.chroma;
|
|
123
122
|
this.internalTone = utils.lstarFromArgb(argb);
|
|
124
|
-
this.argb = argb;
|
|
125
123
|
}
|
|
126
124
|
setInternalState(argb) {
|
|
127
125
|
const cam = Cam16.fromInt(argb);
|
|
@@ -199,6 +197,7 @@ class Cam16 {
|
|
|
199
197
|
* @param astar CAM16-UCS a coordinate
|
|
200
198
|
* @param bstar CAM16-UCS b coordinate
|
|
201
199
|
*/
|
|
200
|
+
|
|
202
201
|
constructor(hue, chroma, j, q, m, s, jstar, astar, bstar) {
|
|
203
202
|
this.hue = hue;
|
|
204
203
|
this.chroma = chroma;
|
|
@@ -858,76 +857,4 @@ _defineProperty(HctSolver, "SCALED_DISCOUNT_FROM_LINRGB", [[0.001200833568784504
|
|
|
858
857
|
_defineProperty(HctSolver, "LINRGB_FROM_SCALED_DISCOUNT", [[1373.2198709594231, -1100.4251190754821, -7.278681089101213], [-271.815969077903, 559.6580465940733, -32.46047482791194], [1.9622899599665666, -57.173814538844006, 308.7233197812385]]);
|
|
859
858
|
_defineProperty(HctSolver, "Y_FROM_LINRGB", [0.2126, 0.7152, 0.0722]);
|
|
860
859
|
_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]);
|
|
861
|
-
export
|
|
862
|
-
/**
|
|
863
|
-
* Create ViewingConditions from a simple, physically relevant, set of
|
|
864
|
-
* parameters.
|
|
865
|
-
*
|
|
866
|
-
* @param whitePoint White point, measured in the XYZ color space.
|
|
867
|
-
* default = D65, or sunny day afternoon
|
|
868
|
-
* @param adaptingLuminance The luminance of the adapting field. Informally,
|
|
869
|
-
* how bright it is in the room where the color is viewed. Can be
|
|
870
|
-
* calculated from lux by multiplying lux by 0.0586. default = 11.72,
|
|
871
|
-
* or 200 lux.
|
|
872
|
-
* @param backgroundLstar The lightness of the area surrounding the color.
|
|
873
|
-
* measured by L* in L*a*b*. default = 50.0
|
|
874
|
-
* @param surround A general description of the lighting surrounding the
|
|
875
|
-
* color. 0 is pitch dark, like watching a movie in a theater. 1.0 is a
|
|
876
|
-
* dimly light room, like watching TV at home at night. 2.0 means there
|
|
877
|
-
* is no difference between the lighting on the color and around it.
|
|
878
|
-
* default = 2.0
|
|
879
|
-
* @param discountingIlluminant Whether the eye accounts for the tint of the
|
|
880
|
-
* ambient lighting, such as knowing an apple is still red in green light.
|
|
881
|
-
* default = false, the eye does not perform this process on
|
|
882
|
-
* self-luminous objects like displays.
|
|
883
|
-
*/
|
|
884
|
-
static make(whitePoint = utils.whitePointD65(), adaptingLuminance = 200.0 / Math.PI * utils.yFromLstar(50.0) / 100.0, backgroundLstar = 50.0, surround = 2.0, discountingIlluminant = false) {
|
|
885
|
-
const xyz = whitePoint;
|
|
886
|
-
const rW = xyz[0] * 0.401288 + xyz[1] * 0.650173 + xyz[2] * -0.051461;
|
|
887
|
-
const gW = xyz[0] * -0.250268 + xyz[1] * 1.204414 + xyz[2] * 0.045854;
|
|
888
|
-
const bW = xyz[0] * -0.002079 + xyz[1] * 0.048952 + xyz[2] * 0.953127;
|
|
889
|
-
const f = 0.8 + surround / 10.0;
|
|
890
|
-
const 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);
|
|
891
|
-
let d = discountingIlluminant ? 1.0 : f * (1.0 - 1.0 / 3.6 * Math.exp((-adaptingLuminance - 42.0) / 92.0));
|
|
892
|
-
d = d > 1.0 ? 1.0 : d < 0.0 ? 0.0 : d;
|
|
893
|
-
const nc = f;
|
|
894
|
-
const rgbD = [d * (100.0 / rW) + 1.0 - d, d * (100.0 / gW) + 1.0 - d, d * (100.0 / bW) + 1.0 - d];
|
|
895
|
-
const k = 1.0 / (5.0 * adaptingLuminance + 1.0);
|
|
896
|
-
const k4 = k * k * k * k;
|
|
897
|
-
const k4F = 1.0 - k4;
|
|
898
|
-
const fl = k4 * adaptingLuminance + 0.1 * k4F * k4F * Math.cbrt(5.0 * adaptingLuminance);
|
|
899
|
-
const n = utils.yFromLstar(backgroundLstar) / whitePoint[1];
|
|
900
|
-
const z = 1.48 + Math.sqrt(n);
|
|
901
|
-
const nbb = 0.725 / Math.pow(n, 0.2);
|
|
902
|
-
const ncb = nbb;
|
|
903
|
-
const 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)];
|
|
904
|
-
const 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)];
|
|
905
|
-
const aw = (2.0 * rgbA[0] + rgbA[1] + 0.05 * rgbA[2]) * nbb;
|
|
906
|
-
return new ViewingConditions(n, aw, nbb, ncb, c, nc, rgbD, fl, Math.pow(fl, 0.25), z);
|
|
907
|
-
}
|
|
908
|
-
|
|
909
|
-
/**
|
|
910
|
-
* Parameters are intermediate values of the CAM16 conversion process. Their
|
|
911
|
-
* names are shorthand for technical color science terminology, this class
|
|
912
|
-
* would not benefit from documenting them individually. A brief overview
|
|
913
|
-
* is available in the CAM16 specification, and a complete overview requires
|
|
914
|
-
* a color science textbook, such as Fairchild's Color Appearance Models.
|
|
915
|
-
*/
|
|
916
|
-
constructor(n, aw, nbb, ncb, c, nc, rgbD, fl, fLRoot, z) {
|
|
917
|
-
this.n = n;
|
|
918
|
-
this.aw = aw;
|
|
919
|
-
this.nbb = nbb;
|
|
920
|
-
this.ncb = ncb;
|
|
921
|
-
this.c = c;
|
|
922
|
-
this.nc = nc;
|
|
923
|
-
this.rgbD = rgbD;
|
|
924
|
-
this.fl = fl;
|
|
925
|
-
this.fLRoot = fLRoot;
|
|
926
|
-
this.z = z;
|
|
927
|
-
}
|
|
928
|
-
}
|
|
929
|
-
_ViewingConditions = ViewingConditions;
|
|
930
|
-
/**
|
|
931
|
-
* sRGB-like viewing conditions.
|
|
932
|
-
*/
|
|
933
|
-
_defineProperty(ViewingConditions, "DEFAULT", _ViewingConditions.make());
|
|
860
|
+
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
|
+
const 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
|
+
}
|
|
@@ -1,105 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
* @license
|
|
8
|
-
* Copyright 2021 Google LLC
|
|
9
|
-
*
|
|
10
|
-
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
11
|
-
* you may not use this file except in compliance with the License.
|
|
12
|
-
* You may obtain a copy of the License at
|
|
13
|
-
*
|
|
14
|
-
* http://www.apache.org/licenses/LICENSE-2.0
|
|
15
|
-
*
|
|
16
|
-
* Unless required by applicable law or agreed to in writing, software
|
|
17
|
-
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
18
|
-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
19
|
-
* See the License for the specific language governing permissions and
|
|
20
|
-
* limitations under the License.
|
|
21
|
-
*/
|
|
22
|
-
|
|
23
|
-
// This file is automatically generated. Do not modify it.
|
|
24
|
-
|
|
25
|
-
/**
|
|
26
|
-
* Utility methods for mathematical operations.
|
|
27
|
-
*/
|
|
28
|
-
|
|
29
|
-
/**
|
|
30
|
-
* The signum function.
|
|
31
|
-
*
|
|
32
|
-
* @return 1 if num > 0, -1 if num < 0, and 0 if num = 0
|
|
33
|
-
*/
|
|
34
|
-
export function signum(num) {
|
|
35
|
-
if (num < 0) {
|
|
36
|
-
return -1;
|
|
37
|
-
} else if (num === 0) {
|
|
38
|
-
return 0;
|
|
39
|
-
} else {
|
|
40
|
-
return 1;
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
/**
|
|
45
|
-
* The linear interpolation function.
|
|
46
|
-
*
|
|
47
|
-
* @return start if amount = 0 and stop if amount = 1
|
|
48
|
-
*/
|
|
49
|
-
export function lerp(start, stop, amount) {
|
|
50
|
-
return (1.0 - amount) * start + amount * stop;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
/**
|
|
54
|
-
* Clamps an integer between two integers.
|
|
55
|
-
*
|
|
56
|
-
* @return input when min <= input <= max, and either min or max
|
|
57
|
-
* otherwise.
|
|
58
|
-
*/
|
|
59
|
-
export function clampInt(min, max, input) {
|
|
60
|
-
if (input < min) {
|
|
61
|
-
return min;
|
|
62
|
-
} else if (input > max) {
|
|
63
|
-
return max;
|
|
64
|
-
}
|
|
65
|
-
return input;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
/**
|
|
69
|
-
* Clamps an integer between two floating-point numbers.
|
|
70
|
-
*
|
|
71
|
-
* @return input when min <= input <= max, and either min or max
|
|
72
|
-
* otherwise.
|
|
73
|
-
*/
|
|
74
|
-
export function clampDouble(min, max, input) {
|
|
75
|
-
if (input < min) {
|
|
76
|
-
return min;
|
|
77
|
-
} else if (input > max) {
|
|
78
|
-
return max;
|
|
79
|
-
}
|
|
80
|
-
return input;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
/**
|
|
84
|
-
* Sanitizes a degree measure as a floating-point number.
|
|
85
|
-
*
|
|
86
|
-
* @return a degree measure between 0.0 (inclusive) and 360.0
|
|
87
|
-
* (exclusive).
|
|
88
|
-
*/
|
|
89
|
-
export function sanitizeDegreesDouble(degrees) {
|
|
90
|
-
degrees = degrees % 360.0;
|
|
91
|
-
if (degrees < 0) {
|
|
92
|
-
degrees = degrees + 360.0;
|
|
93
|
-
}
|
|
94
|
-
return degrees;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
/**
|
|
98
|
-
* Multiplies a 1x3 row vector with a 3x3 matrix.
|
|
99
|
-
*/
|
|
100
|
-
export function matrixMultiply(row, matrix) {
|
|
101
|
-
const a = row[0] * matrix[0][0] + row[1] * matrix[0][1] + row[2] * matrix[0][2];
|
|
102
|
-
const b = row[0] * matrix[1][0] + row[1] * matrix[1][1] + row[2] * matrix[1][2];
|
|
103
|
-
const c = row[0] * matrix[2][0] + row[1] * matrix[2][1] + row[2] * matrix[2][2];
|
|
104
|
-
return [a, b, c];
|
|
105
|
-
}
|
|
1
|
+
export { signum } from './signum';
|
|
2
|
+
export { lerp } from './lerp';
|
|
3
|
+
export { clampInt } from './clamp-int';
|
|
4
|
+
export { clampDouble } from './clamp-double';
|
|
5
|
+
export { sanitizeDegreesDouble } from './sanitize-degrees-double';
|
|
6
|
+
export { matrixMultiply } from './matrix-multiply';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Multiplies a 1x3 row vector with a 3x3 matrix.
|
|
3
|
+
*/
|
|
4
|
+
export function matrixMultiply(row, matrix) {
|
|
5
|
+
const a = row[0] * matrix[0][0] + row[1] * matrix[0][1] + row[2] * matrix[0][2];
|
|
6
|
+
const b = row[0] * matrix[1][0] + row[1] * matrix[1][1] + row[2] * matrix[1][2];
|
|
7
|
+
const c = row[0] * matrix[2][0] + row[1] * matrix[2][1] + row[2] * matrix[2][2];
|
|
8
|
+
return [a, b, c];
|
|
9
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Sanitizes a degree measure as a floating-point number.
|
|
3
|
+
*
|
|
4
|
+
* @return a degree measure between 0.0 (inclusive) and 360.0
|
|
5
|
+
* (exclusive).
|
|
6
|
+
*/
|
|
7
|
+
export function sanitizeDegreesDouble(degrees) {
|
|
8
|
+
degrees = degrees % 360.0;
|
|
9
|
+
if (degrees < 0) {
|
|
10
|
+
degrees = degrees + 360.0;
|
|
11
|
+
}
|
|
12
|
+
return degrees;
|
|
13
|
+
}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
var _ViewingConditions;
|
|
3
|
+
import * as utils from './color-utils';
|
|
4
|
+
import * as math from './math-utils';
|
|
5
|
+
export class ViewingConditions {
|
|
6
|
+
/**
|
|
7
|
+
* Create ViewingConditions from a simple, physically relevant, set of
|
|
8
|
+
* parameters.
|
|
9
|
+
*
|
|
10
|
+
* @param whitePoint White point, measured in the XYZ color space.
|
|
11
|
+
* default = D65, or sunny day afternoon
|
|
12
|
+
* @param adaptingLuminance The luminance of the adapting field. Informally,
|
|
13
|
+
* how bright it is in the room where the color is viewed. Can be
|
|
14
|
+
* calculated from lux by multiplying lux by 0.0586. default = 11.72,
|
|
15
|
+
* or 200 lux.
|
|
16
|
+
* @param backgroundLstar The lightness of the area surrounding the color.
|
|
17
|
+
* measured by L* in L*a*b*. default = 50.0
|
|
18
|
+
* @param surround A general description of the lighting surrounding the
|
|
19
|
+
* color. 0 is pitch dark, like watching a movie in a theater. 1.0 is a
|
|
20
|
+
* dimly light room, like watching TV at home at night. 2.0 means there
|
|
21
|
+
* is no difference between the lighting on the color and around it.
|
|
22
|
+
* default = 2.0
|
|
23
|
+
* @param discountingIlluminant Whether the eye accounts for the tint of the
|
|
24
|
+
* ambient lighting, such as knowing an apple is still red in green light.
|
|
25
|
+
* default = false, the eye does not perform this process on
|
|
26
|
+
* self-luminous objects like displays.
|
|
27
|
+
*/
|
|
28
|
+
static make(whitePoint = utils.whitePointD65(), adaptingLuminance = 200.0 / Math.PI * utils.yFromLstar(50.0) / 100.0, backgroundLstar = 50.0, surround = 2.0, discountingIlluminant = false) {
|
|
29
|
+
const xyz = whitePoint;
|
|
30
|
+
const rW = xyz[0] * 0.401288 + xyz[1] * 0.650173 + xyz[2] * -0.051461;
|
|
31
|
+
const gW = xyz[0] * -0.250268 + xyz[1] * 1.204414 + xyz[2] * 0.045854;
|
|
32
|
+
const bW = xyz[0] * -0.002079 + xyz[1] * 0.048952 + xyz[2] * 0.953127;
|
|
33
|
+
const f = 0.8 + surround / 10.0;
|
|
34
|
+
const 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);
|
|
35
|
+
let d = discountingIlluminant ? 1.0 : f * (1.0 - 1.0 / 3.6 * Math.exp((-adaptingLuminance - 42.0) / 92.0));
|
|
36
|
+
d = d > 1.0 ? 1.0 : d < 0.0 ? 0.0 : d;
|
|
37
|
+
const nc = f;
|
|
38
|
+
const rgbD = [d * (100.0 / rW) + 1.0 - d, d * (100.0 / gW) + 1.0 - d, d * (100.0 / bW) + 1.0 - d];
|
|
39
|
+
const k = 1.0 / (5.0 * adaptingLuminance + 1.0);
|
|
40
|
+
const k4 = k * k * k * k;
|
|
41
|
+
const k4F = 1.0 - k4;
|
|
42
|
+
const fl = k4 * adaptingLuminance + 0.1 * k4F * k4F * Math.cbrt(5.0 * adaptingLuminance);
|
|
43
|
+
const n = utils.yFromLstar(backgroundLstar) / whitePoint[1];
|
|
44
|
+
const z = 1.48 + Math.sqrt(n);
|
|
45
|
+
const nbb = 0.725 / Math.pow(n, 0.2);
|
|
46
|
+
const ncb = nbb;
|
|
47
|
+
const 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)];
|
|
48
|
+
const 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)];
|
|
49
|
+
const aw = (2.0 * rgbA[0] + rgbA[1] + 0.05 * rgbA[2]) * nbb;
|
|
50
|
+
return new ViewingConditions(n, aw, nbb, ncb, c, nc, rgbD, fl, Math.pow(fl, 0.25), z);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/**
|
|
54
|
+
* Parameters are intermediate values of the CAM16 conversion process. Their
|
|
55
|
+
* names are shorthand for technical color science terminology, this class
|
|
56
|
+
* would not benefit from documenting them individually. A brief overview
|
|
57
|
+
* is available in the CAM16 specification, and a complete overview requires
|
|
58
|
+
* a color science textbook, such as Fairchild's Color Appearance Models.
|
|
59
|
+
*/
|
|
60
|
+
|
|
61
|
+
constructor(n, aw, nbb, ncb, c, nc, rgbD, fl, fLRoot, z) {
|
|
62
|
+
this.n = n;
|
|
63
|
+
this.aw = aw;
|
|
64
|
+
this.nbb = nbb;
|
|
65
|
+
this.ncb = ncb;
|
|
66
|
+
this.c = c;
|
|
67
|
+
this.nc = nc;
|
|
68
|
+
this.rgbD = rgbD;
|
|
69
|
+
this.fl = fl;
|
|
70
|
+
this.fLRoot = fLRoot;
|
|
71
|
+
this.z = z;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
_ViewingConditions = ViewingConditions;
|
|
75
|
+
/**
|
|
76
|
+
* sRGB-like viewing conditions.
|
|
77
|
+
*/
|
|
78
|
+
_defineProperty(ViewingConditions, "DEFAULT", _ViewingConditions.make());
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export const hexToRGBAValues = hex => {
|
|
2
|
+
const hexColor = hex.replace('#', '');
|
|
3
|
+
return {
|
|
4
|
+
r: parseInt(hexColor.slice(0, 2), 16),
|
|
5
|
+
g: parseInt(hexColor.slice(2, 4), 16),
|
|
6
|
+
b: parseInt(hexColor.slice(4, 6), 16),
|
|
7
|
+
a: parseFloat((parseInt(hexColor.slice(6, 8), 16) / 255).toFixed(2))
|
|
8
|
+
};
|
|
9
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export const isValidBrandHex = hex => /^#[0-9A-F]{6}$/i.test(hex);
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { CUSTOM_THEME_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from '../constants';
|
|
2
|
+
export function limitSizeOfCustomStyleElements(sizeThreshold) {
|
|
3
|
+
const styleTags = Array.from(document.head.querySelectorAll(`style[${CUSTOM_THEME_ATTRIBUTE}][${THEME_DATA_ATTRIBUTE}]`));
|
|
4
|
+
if (styleTags.length < sizeThreshold) {
|
|
5
|
+
return;
|
|
6
|
+
}
|
|
7
|
+
styleTags.slice(0, styleTags.length - (sizeThreshold - 1)).forEach(element => element.remove());
|
|
8
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export function relativeLuminanceW3C(r, g, b) {
|
|
2
|
+
const RsRGB = r / 255;
|
|
3
|
+
const GsRGB = g / 255;
|
|
4
|
+
const BsRGB = b / 255;
|
|
5
|
+
const R = RsRGB <= 0.03928 ? RsRGB / 12.92 : Math.pow((RsRGB + 0.055) / 1.055, 2.4);
|
|
6
|
+
const G = GsRGB <= 0.03928 ? GsRGB / 12.92 : Math.pow((GsRGB + 0.055) / 1.055, 2.4);
|
|
7
|
+
const B = BsRGB <= 0.03928 ? BsRGB / 12.92 : Math.pow((BsRGB + 0.055) / 1.055, 2.4);
|
|
8
|
+
|
|
9
|
+
// For the sRGB colorspace, the relative luminance of a color is defined as:
|
|
10
|
+
const L = 0.2126 * R + 0.7152 * G + 0.0722 * B;
|
|
11
|
+
return L;
|
|
12
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import themeImportMap from '../artifacts/theme-import-map';
|
|
2
1
|
import { CUSTOM_THEME_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from '../constants';
|
|
2
|
+
import { loadThemeCss } from './load-theme-css';
|
|
3
3
|
export const loadAndAppendThemeCss = async themeId => {
|
|
4
4
|
if (document.head.querySelector(`style[${THEME_DATA_ATTRIBUTE}="${themeId}"]:not([${CUSTOM_THEME_ATTRIBUTE}])`)) {
|
|
5
5
|
return;
|
|
@@ -16,11 +16,6 @@ export const loadAndAppendThemeCss = async themeId => {
|
|
|
16
16
|
style.dataset.theme = themeId;
|
|
17
17
|
document.head.appendChild(style);
|
|
18
18
|
};
|
|
19
|
-
export const loadThemeCss = async themeId => {
|
|
20
|
-
const {
|
|
21
|
-
default: themeCss
|
|
22
|
-
} = await themeImportMap[themeId]();
|
|
23
|
-
return themeCss;
|
|
24
|
-
};
|
|
25
19
|
export const darkModeMediaQuery = '(prefers-color-scheme: dark)';
|
|
26
|
-
export const moreContrastMediaQuery = '(prefers-contrast: more)';
|
|
20
|
+
export const moreContrastMediaQuery = '(prefers-contrast: more)';
|
|
21
|
+
export { loadThemeCss } from './load-theme-css';
|