@atlaskit/tokens 13.1.0 → 13.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/codemods/css-to-design-tokens/lib/colors.tsx +3 -8
- package/codemods/css-to-design-tokens/lib/declaration.tsx +3 -13
- package/codemods/css-to-design-tokens/lib/extract-between-parentheses.tsx +4 -0
- package/codemods/css-to-design-tokens/lib/extract-less-var-name.tsx +3 -0
- package/codemods/css-to-design-tokens/lib/get-css-var-meta.tsx +13 -0
- package/codemods/css-to-design-tokens/lib/get-named-color-meta.tsx +5 -0
- package/codemods/css-to-design-tokens/lib/get-raw-color-meta.tsx +11 -0
- package/codemods/css-to-design-tokens/lib/is-css-declaration.tsx +3 -0
- package/codemods/css-to-design-tokens/lib/is-known-css-variable.tsx +5 -0
- package/codemods/css-to-design-tokens/lib/known-named-colors.tsx +150 -0
- package/codemods/css-to-design-tokens/lib/known-raw-colors.tsx +17 -0
- package/codemods/css-to-design-tokens/lib/known-variables.tsx +167 -0
- package/codemods/css-to-design-tokens/lib/legacy-colors.tsx +3 -335
- package/codemods/css-to-design-tokens/lib/meta.tsx +3 -28
- package/codemods/css-to-design-tokens/lib/split-css-value.tsx +4 -0
- package/codemods/css-to-design-tokens/lib/value.tsx +6 -9
- package/codemods/css-to-design-tokens/transform.tsx +3 -1
- package/dist/cjs/artifacts/palettes-raw/palette.js +35 -1
- package/dist/cjs/entry-points/theme-state-transformer.js +4 -3
- package/dist/cjs/get-custom-theme-styles.js +7 -6
- package/dist/cjs/get-global-theme.js +2 -2
- package/dist/cjs/get-theme-html-attrs.js +2 -2
- package/dist/cjs/index.js +4 -3
- package/dist/cjs/is-color-mode.js +9 -0
- package/dist/cjs/is-theme-ids.js +12 -0
- package/dist/cjs/is-theme-kind.js +12 -0
- package/dist/cjs/theme-config.js +8 -44
- package/dist/cjs/theme-object-to-string.js +42 -0
- package/dist/cjs/theme-options-schema.js +1 -0
- package/dist/cjs/theme-state-defaults.js +39 -0
- package/dist/cjs/theme-state.js +5 -0
- package/dist/cjs/theme-string-to-object.js +51 -0
- package/dist/cjs/utils/additional-contrast-checker.js +43 -0
- package/dist/cjs/utils/custom-theme-loading-utils.js +0 -22
- package/dist/cjs/utils/custom-theme-token-contrast-check.js +2 -40
- package/dist/cjs/utils/delta-e.js +26 -0
- package/dist/cjs/utils/generate-colors.js +47 -0
- package/dist/cjs/utils/generate-token-map-with-contrast-check.js +32 -0
- package/dist/cjs/utils/{generate-custom-color-ramp.js → generate-token-map.js} +6 -75
- package/dist/cjs/utils/get-closest-color-index.js +3 -2
- package/dist/cjs/utils/get-contrast-ratio.js +22 -0
- package/dist/cjs/utils/hct-color-utils/alpha-from-argb.js +12 -0
- package/dist/cjs/utils/hct-color-utils/argb-from-linrgb.js +17 -0
- package/dist/cjs/utils/hct-color-utils/argb-from-lstar.js +21 -0
- package/dist/cjs/utils/hct-color-utils/argb-from-rgba.js +24 -0
- package/dist/cjs/utils/hct-color-utils/argb-from-xyz.js +29 -0
- package/dist/cjs/utils/hct-color-utils/blue-from-argb.js +12 -0
- package/dist/cjs/utils/hct-color-utils/clamp-component.js +15 -0
- package/dist/cjs/utils/hct-color-utils/contrast.js +10 -11
- package/dist/cjs/utils/hct-color-utils/green-from-argb.js +12 -0
- package/dist/cjs/utils/hct-color-utils/hct.js +18 -12
- package/dist/cjs/utils/hct-color-utils/index.js +4 -3
- package/dist/cjs/utils/hct-color-utils/lab-f.js +15 -0
- package/dist/cjs/utils/hct-color-utils/lab-invf.js +16 -0
- package/dist/cjs/utils/hct-color-utils/lstar-from-argb.js +34 -0
- package/dist/cjs/utils/hct-color-utils/lstar-from-y.js +21 -0
- package/dist/cjs/utils/hct-color-utils/red-from-argb.js +12 -0
- package/dist/cjs/utils/hct-color-utils/rgba-from-argb.js +28 -0
- package/dist/cjs/utils/hct-color-utils/rgba.js +1 -0
- package/dist/cjs/utils/hct-color-utils/viewing-conditions.js +5 -4
- package/dist/cjs/utils/hct-color-utils/white-point-d65.js +14 -0
- package/dist/cjs/utils/hct-color-utils/y-from-lstar.js +21 -0
- package/dist/cjs/utils/hex-to-hsl.js +52 -0
- package/dist/cjs/utils/hex-to-rgb-a.js +20 -0
- package/dist/cjs/utils/hex-to-rgb.js +19 -0
- package/dist/cjs/utils/is-valid-hex.js +10 -0
- package/dist/cjs/utils/reduce-token-map.js +18 -0
- package/dist/cjs/utils/rgb-to-lab.js +24 -0
- package/dist/es2019/artifacts/palettes-raw/palette.js +35 -1
- package/dist/es2019/entry-points/theme-state-transformer.js +2 -1
- package/dist/es2019/get-custom-theme-styles.js +3 -2
- package/dist/es2019/get-global-theme.js +1 -1
- package/dist/es2019/get-theme-html-attrs.js +1 -1
- package/dist/es2019/index.js +2 -1
- package/dist/es2019/is-color-mode.js +3 -0
- package/dist/es2019/is-theme-ids.js +4 -0
- package/dist/es2019/is-theme-kind.js +4 -0
- package/dist/es2019/theme-config.js +4 -45
- package/dist/es2019/theme-object-to-string.js +28 -0
- package/dist/es2019/theme-options-schema.js +0 -0
- package/dist/es2019/theme-state-defaults.js +34 -0
- package/dist/es2019/theme-state.js +1 -0
- package/dist/es2019/theme-string-to-object.js +38 -0
- package/dist/es2019/utils/additional-contrast-checker.js +39 -0
- package/dist/es2019/utils/custom-theme-loading-utils.js +1 -11
- package/dist/es2019/utils/custom-theme-token-contrast-check.js +1 -41
- package/dist/es2019/utils/delta-e.js +20 -0
- package/dist/es2019/utils/generate-colors.js +39 -0
- package/dist/es2019/utils/generate-token-map-with-contrast-check.js +21 -0
- package/dist/es2019/utils/{generate-custom-color-ramp.js → generate-token-map.js} +3 -63
- package/dist/es2019/utils/get-closest-color-index.js +2 -1
- package/dist/es2019/utils/get-contrast-ratio.js +16 -0
- package/dist/es2019/utils/hct-color-utils/alpha-from-argb.js +6 -0
- package/dist/es2019/utils/hct-color-utils/argb-from-linrgb.js +12 -0
- package/dist/es2019/utils/hct-color-utils/argb-from-lstar.js +16 -0
- package/dist/es2019/utils/hct-color-utils/argb-from-rgba.js +19 -0
- package/dist/es2019/utils/hct-color-utils/argb-from-xyz.js +24 -0
- package/dist/es2019/utils/hct-color-utils/blue-from-argb.js +6 -0
- package/dist/es2019/utils/hct-color-utils/clamp-component.js +9 -0
- package/dist/es2019/utils/hct-color-utils/contrast.js +10 -10
- package/dist/es2019/utils/hct-color-utils/green-from-argb.js +6 -0
- package/dist/es2019/utils/hct-color-utils/hct.js +19 -12
- package/dist/es2019/utils/hct-color-utils/index.js +2 -1
- package/dist/es2019/utils/hct-color-utils/lab-f.js +9 -0
- package/dist/es2019/utils/hct-color-utils/lab-invf.js +10 -0
- package/dist/es2019/utils/hct-color-utils/lstar-from-argb.js +28 -0
- package/dist/es2019/utils/hct-color-utils/lstar-from-y.js +16 -0
- package/dist/es2019/utils/hct-color-utils/red-from-argb.js +6 -0
- package/dist/es2019/utils/hct-color-utils/rgba-from-argb.js +22 -0
- package/dist/es2019/utils/hct-color-utils/rgba.js +0 -0
- package/dist/es2019/utils/hct-color-utils/viewing-conditions.js +4 -3
- package/dist/es2019/utils/hct-color-utils/white-point-d65.js +8 -0
- package/dist/es2019/utils/hct-color-utils/y-from-lstar.js +16 -0
- package/dist/es2019/utils/hex-to-hsl.js +46 -0
- package/dist/es2019/utils/hex-to-rgb-a.js +14 -0
- package/dist/es2019/utils/hex-to-rgb.js +13 -0
- package/dist/es2019/utils/is-valid-hex.js +2 -0
- package/dist/es2019/utils/reduce-token-map.js +7 -0
- package/dist/es2019/utils/rgb-to-lab.js +18 -0
- package/dist/esm/artifacts/palettes-raw/palette.js +35 -1
- package/dist/esm/entry-points/theme-state-transformer.js +2 -1
- package/dist/esm/get-custom-theme-styles.js +3 -2
- package/dist/esm/get-global-theme.js +1 -1
- package/dist/esm/get-theme-html-attrs.js +1 -1
- package/dist/esm/index.js +2 -1
- package/dist/esm/is-color-mode.js +3 -0
- package/dist/esm/is-theme-ids.js +6 -0
- package/dist/esm/is-theme-kind.js +6 -0
- package/dist/esm/theme-config.js +4 -45
- package/dist/esm/theme-object-to-string.js +35 -0
- package/dist/esm/theme-options-schema.js +0 -0
- package/dist/esm/theme-state-defaults.js +34 -0
- package/dist/esm/theme-state.js +1 -0
- package/dist/esm/theme-string-to-object.js +44 -0
- package/dist/esm/utils/additional-contrast-checker.js +36 -0
- package/dist/esm/utils/custom-theme-loading-utils.js +1 -15
- package/dist/esm/utils/custom-theme-token-contrast-check.js +1 -38
- package/dist/esm/utils/delta-e.js +20 -0
- package/dist/esm/utils/generate-colors.js +40 -0
- package/dist/esm/utils/generate-token-map-with-contrast-check.js +25 -0
- package/dist/esm/utils/{generate-custom-color-ramp.js → generate-token-map.js} +3 -67
- package/dist/esm/utils/get-closest-color-index.js +2 -1
- package/dist/esm/utils/get-contrast-ratio.js +16 -0
- package/dist/esm/utils/hct-color-utils/alpha-from-argb.js +6 -0
- package/dist/esm/utils/hct-color-utils/argb-from-linrgb.js +12 -0
- package/dist/esm/utils/hct-color-utils/argb-from-lstar.js +16 -0
- package/dist/esm/utils/hct-color-utils/argb-from-rgba.js +18 -0
- package/dist/esm/utils/hct-color-utils/argb-from-xyz.js +24 -0
- package/dist/esm/utils/hct-color-utils/blue-from-argb.js +6 -0
- package/dist/esm/utils/hct-color-utils/clamp-component.js +9 -0
- package/dist/esm/utils/hct-color-utils/contrast.js +10 -10
- package/dist/esm/utils/hct-color-utils/green-from-argb.js +6 -0
- package/dist/esm/utils/hct-color-utils/hct.js +19 -12
- package/dist/esm/utils/hct-color-utils/index.js +2 -1
- package/dist/esm/utils/hct-color-utils/lab-f.js +9 -0
- package/dist/esm/utils/hct-color-utils/lab-invf.js +10 -0
- package/dist/esm/utils/hct-color-utils/lstar-from-argb.js +28 -0
- package/dist/esm/utils/hct-color-utils/lstar-from-y.js +16 -0
- package/dist/esm/utils/hct-color-utils/red-from-argb.js +6 -0
- package/dist/esm/utils/hct-color-utils/rgba-from-argb.js +22 -0
- package/dist/esm/utils/hct-color-utils/rgba.js +0 -0
- package/dist/esm/utils/hct-color-utils/viewing-conditions.js +5 -4
- package/dist/esm/utils/hct-color-utils/white-point-d65.js +8 -0
- package/dist/esm/utils/hct-color-utils/y-from-lstar.js +16 -0
- package/dist/esm/utils/hex-to-hsl.js +46 -0
- package/dist/esm/utils/hex-to-rgb-a.js +14 -0
- package/dist/esm/utils/hex-to-rgb.js +13 -0
- package/dist/esm/utils/is-valid-hex.js +4 -0
- package/dist/esm/utils/reduce-token-map.js +11 -0
- package/dist/esm/utils/rgb-to-lab.js +18 -0
- package/dist/types/artifacts/palettes-raw/palette.d.ts +1 -1
- package/dist/types/entry-points/theme-state-transformer.d.ts +2 -1
- package/dist/types/index.d.ts +2 -1
- package/dist/types/is-color-mode.d.ts +2 -0
- package/dist/types/is-theme-ids.d.ts +2 -0
- package/dist/types/is-theme-kind.d.ts +4 -0
- package/dist/types/theme-color-modes.d.ts +1 -0
- package/dist/types/theme-config.d.ts +8 -40
- package/dist/types/theme-ids.d.ts +1 -0
- package/dist/types/theme-object-to-string.d.ts +13 -0
- package/dist/types/theme-options-schema.d.ts +7 -0
- package/dist/types/theme-state-defaults.d.ts +14 -0
- package/dist/types/theme-state.d.ts +17 -0
- package/dist/types/{theme-state-transformer.d.ts → theme-string-to-object.d.ts} +0 -12
- package/dist/types/utils/additional-contrast-checker.d.ts +9 -0
- package/dist/types/utils/custom-theme-loading-utils.d.ts +1 -6
- package/dist/types/utils/custom-theme-token-contrast-check.d.ts +0 -9
- package/dist/types/utils/delta-e.d.ts +1 -0
- package/dist/types/utils/generate-colors.d.ts +5 -0
- package/dist/types/utils/{generate-custom-color-ramp.d.ts → generate-token-map-with-contrast-check.d.ts} +1 -6
- package/dist/types/utils/generate-token-map.d.ts +9 -0
- package/dist/types/utils/get-contrast-ratio.d.ts +1 -0
- package/dist/types/utils/hct-color-utils/alpha-from-argb.d.ts +4 -0
- package/dist/types/utils/hct-color-utils/argb-from-linrgb.d.ts +4 -0
- package/dist/types/utils/hct-color-utils/argb-from-lstar.d.ts +8 -0
- package/dist/types/utils/hct-color-utils/argb-from-rgba.d.ts +8 -0
- package/dist/types/utils/hct-color-utils/argb-from-xyz.d.ts +4 -0
- package/dist/types/utils/hct-color-utils/blue-from-argb.d.ts +4 -0
- package/dist/types/utils/hct-color-utils/clamp-component.d.ts +1 -0
- package/dist/types/utils/hct-color-utils/green-from-argb.d.ts +4 -0
- package/dist/types/utils/hct-color-utils/index.d.ts +2 -1
- package/dist/types/utils/hct-color-utils/lab-f.d.ts +1 -0
- package/dist/types/utils/hct-color-utils/lab-invf.d.ts +1 -0
- package/dist/types/utils/hct-color-utils/lstar-from-argb.d.ts +7 -0
- package/dist/types/utils/hct-color-utils/lstar-from-y.d.ts +12 -0
- package/dist/types/utils/hct-color-utils/red-from-argb.d.ts +4 -0
- package/dist/types/utils/hct-color-utils/rgba-from-argb.d.ts +8 -0
- package/dist/types/utils/hct-color-utils/rgba.d.ts +14 -0
- package/dist/types/utils/hct-color-utils/white-point-d65.d.ts +6 -0
- package/dist/types/utils/hct-color-utils/y-from-lstar.d.ts +12 -0
- package/dist/types/utils/hex-to-hsl.d.ts +1 -0
- package/dist/types/utils/hex-to-rgb-a.d.ts +1 -0
- package/dist/types/utils/hex-to-rgb.d.ts +1 -0
- package/dist/types/utils/is-valid-hex.d.ts +1 -0
- package/dist/types/utils/reduce-token-map.d.ts +6 -0
- package/dist/types/utils/rgb-to-lab.d.ts +1 -0
- package/dist/types-ts4.5/artifacts/palettes-raw/palette.d.ts +1 -1
- package/dist/types-ts4.5/entry-points/theme-state-transformer.d.ts +2 -1
- package/dist/types-ts4.5/index.d.ts +2 -1
- package/dist/types-ts4.5/is-color-mode.d.ts +2 -0
- package/dist/types-ts4.5/is-theme-ids.d.ts +2 -0
- package/dist/types-ts4.5/is-theme-kind.d.ts +11 -0
- package/dist/types-ts4.5/theme-color-modes.d.ts +1 -0
- package/dist/types-ts4.5/theme-config.d.ts +8 -40
- package/dist/types-ts4.5/theme-ids.d.ts +1 -0
- package/dist/types-ts4.5/theme-object-to-string.d.ts +13 -0
- package/dist/types-ts4.5/theme-options-schema.d.ts +7 -0
- package/dist/types-ts4.5/theme-state-defaults.d.ts +14 -0
- package/dist/types-ts4.5/theme-state.d.ts +17 -0
- package/dist/types-ts4.5/{theme-state-transformer.d.ts → theme-string-to-object.d.ts} +0 -12
- package/dist/types-ts4.5/utils/additional-contrast-checker.d.ts +9 -0
- package/dist/types-ts4.5/utils/custom-theme-loading-utils.d.ts +1 -6
- package/dist/types-ts4.5/utils/custom-theme-token-contrast-check.d.ts +0 -9
- package/dist/types-ts4.5/utils/delta-e.d.ts +1 -0
- package/dist/types-ts4.5/utils/generate-colors.d.ts +5 -0
- package/dist/types-ts4.5/utils/{generate-custom-color-ramp.d.ts → generate-token-map-with-contrast-check.d.ts} +1 -8
- package/dist/types-ts4.5/utils/generate-token-map.d.ts +11 -0
- package/dist/types-ts4.5/utils/get-contrast-ratio.d.ts +1 -0
- package/dist/types-ts4.5/utils/hct-color-utils/alpha-from-argb.d.ts +4 -0
- package/dist/types-ts4.5/utils/hct-color-utils/argb-from-linrgb.d.ts +4 -0
- package/dist/types-ts4.5/utils/hct-color-utils/argb-from-lstar.d.ts +8 -0
- package/dist/types-ts4.5/utils/hct-color-utils/argb-from-rgba.d.ts +8 -0
- package/dist/types-ts4.5/utils/hct-color-utils/argb-from-xyz.d.ts +4 -0
- package/dist/types-ts4.5/utils/hct-color-utils/blue-from-argb.d.ts +4 -0
- package/dist/types-ts4.5/utils/hct-color-utils/clamp-component.d.ts +1 -0
- package/dist/types-ts4.5/utils/hct-color-utils/green-from-argb.d.ts +4 -0
- package/dist/types-ts4.5/utils/hct-color-utils/index.d.ts +2 -1
- package/dist/types-ts4.5/utils/hct-color-utils/lab-f.d.ts +1 -0
- package/dist/types-ts4.5/utils/hct-color-utils/lab-invf.d.ts +1 -0
- package/dist/types-ts4.5/utils/hct-color-utils/lstar-from-argb.d.ts +7 -0
- package/dist/types-ts4.5/utils/hct-color-utils/lstar-from-y.d.ts +12 -0
- package/dist/types-ts4.5/utils/hct-color-utils/red-from-argb.d.ts +4 -0
- package/dist/types-ts4.5/utils/hct-color-utils/rgba-from-argb.d.ts +8 -0
- package/dist/types-ts4.5/utils/hct-color-utils/rgba.d.ts +14 -0
- package/dist/types-ts4.5/utils/hct-color-utils/white-point-d65.d.ts +6 -0
- package/dist/types-ts4.5/utils/hct-color-utils/y-from-lstar.d.ts +12 -0
- package/dist/types-ts4.5/utils/hex-to-hsl.d.ts +5 -0
- package/dist/types-ts4.5/utils/hex-to-rgb-a.d.ts +6 -0
- package/dist/types-ts4.5/utils/hex-to-rgb.d.ts +5 -0
- package/dist/types-ts4.5/utils/is-valid-hex.d.ts +1 -0
- package/dist/types-ts4.5/utils/reduce-token-map.d.ts +6 -0
- package/dist/types-ts4.5/utils/rgb-to-lab.d.ts +5 -0
- package/package.json +5 -5
- package/dist/cjs/theme-state-transformer.js +0 -93
- package/dist/cjs/utils/color-utils.js +0 -176
- package/dist/cjs/utils/hct-color-utils/color-utils.js +0 -279
- package/dist/es2019/theme-state-transformer.js +0 -70
- package/dist/es2019/utils/color-utils.js +0 -136
- package/dist/es2019/utils/hct-color-utils/color-utils.js +0 -249
- package/dist/esm/theme-state-transformer.js +0 -86
- package/dist/esm/utils/color-utils.js +0 -138
- package/dist/esm/utils/hct-color-utils/color-utils.js +0 -248
- package/dist/types/utils/color-utils.d.ts +0 -10
- package/dist/types/utils/hct-color-utils/color-utils.d.ts +0 -88
- package/dist/types-ts4.5/utils/color-utils.d.ts +0 -23
- package/dist/types-ts4.5/utils/hct-color-utils/color-utils.d.ts +0 -88
package/dist/cjs/theme-config.js
CHANGED
|
@@ -17,11 +17,17 @@ Object.defineProperty(exports, "themeIds", {
|
|
|
17
17
|
return _themeIds.themeIds;
|
|
18
18
|
}
|
|
19
19
|
});
|
|
20
|
-
exports.
|
|
20
|
+
exports.themeIdsWithOverrides = void 0;
|
|
21
|
+
Object.defineProperty(exports, "themeStateDefaults", {
|
|
22
|
+
enumerable: true,
|
|
23
|
+
get: function get() {
|
|
24
|
+
return _themeStateDefaults.themeStateDefaults;
|
|
25
|
+
}
|
|
26
|
+
});
|
|
21
27
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
22
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
23
28
|
var _themeIds = require("./theme-ids");
|
|
24
29
|
var _themeColorModes = require("./theme-color-modes");
|
|
30
|
+
var _themeStateDefaults = require("./theme-state-defaults");
|
|
25
31
|
/**
|
|
26
32
|
* This file contains the source of truth for themes and all associated meta data.
|
|
27
33
|
*/
|
|
@@ -168,48 +174,6 @@ var themeConfig = {
|
|
|
168
174
|
}
|
|
169
175
|
};
|
|
170
176
|
|
|
171
|
-
/**
|
|
172
|
-
* ThemeOptionsSchema: additional configuration options used to customize Atlassian's themes
|
|
173
|
-
*/
|
|
174
|
-
|
|
175
|
-
/**
|
|
176
|
-
* ThemeState: the standard representation of an app's current theme and preferences
|
|
177
|
-
*/
|
|
178
|
-
|
|
179
|
-
/**
|
|
180
|
-
* Can't evaluate typography feature flags at the module level,
|
|
181
|
-
* it will always resolve to false when server side rendered or when flags are loaded async.
|
|
182
|
-
*/
|
|
183
|
-
|
|
184
|
-
function getShapeDefault() {
|
|
185
|
-
if ((0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default')) {
|
|
186
|
-
return 'shape';
|
|
187
|
-
}
|
|
188
|
-
return undefined;
|
|
189
|
-
}
|
|
190
|
-
function getMotionDefault() {
|
|
191
|
-
if ((0, _platformFeatureFlags.fg)('platform-dst-motion-theme-default')) {
|
|
192
|
-
return 'motion';
|
|
193
|
-
}
|
|
194
|
-
return undefined;
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
/**
|
|
198
|
-
* themeStateDefaults: the default values for ThemeState used by theming utilities
|
|
199
|
-
*/
|
|
200
|
-
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
201
|
-
var themeStateDefaults = exports.themeStateDefaults = {
|
|
202
|
-
colorMode: 'auto',
|
|
203
|
-
contrastMode: 'auto',
|
|
204
|
-
dark: 'dark',
|
|
205
|
-
light: 'light',
|
|
206
|
-
shape: getShapeDefault,
|
|
207
|
-
spacing: 'spacing',
|
|
208
|
-
typography: 'typography',
|
|
209
|
-
motion: getMotionDefault,
|
|
210
|
-
UNSAFE_themeOptions: undefined
|
|
211
|
-
};
|
|
212
|
-
|
|
213
177
|
/**
|
|
214
178
|
* Represents theme state once mounted to the page
|
|
215
179
|
* (the page doesn't have an "auto" color mode, it's either light or dark)
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.themeObjectToString = void 0;
|
|
8
|
+
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
9
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
|
+
var _isColorMode = require("./is-color-mode");
|
|
11
|
+
var _isThemeIds = require("./is-theme-ids");
|
|
12
|
+
var _isThemeKind = require("./is-theme-kind");
|
|
13
|
+
var customThemeOptions = 'UNSAFE_themeOptions';
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* Converts a theme object to a string formatted for the `data-theme` HTML attribute.
|
|
17
|
+
*
|
|
18
|
+
* @param {object} themes The themes that should be applied.
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* ```
|
|
22
|
+
* themeObjectToString({ dark: 'dark', light: 'light', spacing: 'spacing' });
|
|
23
|
+
* // returns 'dark:dark light:light spacing:spacing'
|
|
24
|
+
* ```
|
|
25
|
+
*/
|
|
26
|
+
var themeObjectToString = exports.themeObjectToString = function themeObjectToString(themeState) {
|
|
27
|
+
return Object.entries(themeState).reduce(function (themeString, _ref) {
|
|
28
|
+
var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
|
|
29
|
+
kind = _ref2[0],
|
|
30
|
+
id = _ref2[1];
|
|
31
|
+
if (
|
|
32
|
+
// colorMode theme state
|
|
33
|
+
kind === 'colorMode' && typeof id === 'string' && (0, _isColorMode.isColorMode)(id) ||
|
|
34
|
+
// custom theme state
|
|
35
|
+
kind === customThemeOptions && (0, _typeof2.default)(id) === 'object' ||
|
|
36
|
+
// other theme states
|
|
37
|
+
(0, _isThemeKind.isThemeKind)(kind) && typeof id === 'string' && (0, _isThemeIds.isThemeIds)(id)) {
|
|
38
|
+
return themeString + "".concat(themeString ? ' ' : '') + "".concat(kind, ":").concat((0, _typeof2.default)(id) === 'object' ? JSON.stringify(id) : id);
|
|
39
|
+
}
|
|
40
|
+
return themeString;
|
|
41
|
+
}, '');
|
|
42
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.themeStateDefaults = void 0;
|
|
7
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
8
|
+
/**
|
|
9
|
+
* Can't evaluate typography feature flags at the module level,
|
|
10
|
+
* it will always resolve to false when server side rendered or when flags are loaded async.
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
function getShapeDefault() {
|
|
14
|
+
if ((0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default')) {
|
|
15
|
+
return 'shape';
|
|
16
|
+
}
|
|
17
|
+
return undefined;
|
|
18
|
+
}
|
|
19
|
+
function getMotionDefault() {
|
|
20
|
+
if ((0, _platformFeatureFlags.fg)('platform-dst-motion-theme-default')) {
|
|
21
|
+
return 'motion';
|
|
22
|
+
}
|
|
23
|
+
return undefined;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* themeStateDefaults: the default values for ThemeState used by theming utilities
|
|
28
|
+
*/
|
|
29
|
+
var themeStateDefaults = exports.themeStateDefaults = {
|
|
30
|
+
colorMode: 'auto',
|
|
31
|
+
contrastMode: 'auto',
|
|
32
|
+
dark: 'dark',
|
|
33
|
+
light: 'light',
|
|
34
|
+
shape: getShapeDefault,
|
|
35
|
+
spacing: 'spacing',
|
|
36
|
+
typography: 'typography',
|
|
37
|
+
motion: getMotionDefault,
|
|
38
|
+
UNSAFE_themeOptions: undefined
|
|
39
|
+
};
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.themeStringToObject = void 0;
|
|
8
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
9
|
+
var _isColorMode = require("./is-color-mode");
|
|
10
|
+
var _isThemeIds = require("./is-theme-ids");
|
|
11
|
+
var _isThemeKind = require("./is-theme-kind");
|
|
12
|
+
var customThemeOptions = 'UNSAFE_themeOptions';
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Converts a string that is formatted for the `data-theme` HTML attribute
|
|
16
|
+
* to an object that can be passed to `setGlobalTheme`.
|
|
17
|
+
*
|
|
18
|
+
* @param {string} themes The themes that should be applied.
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* ```
|
|
22
|
+
* themeStringToObject('dark:dark light:light spacing:spacing');
|
|
23
|
+
* // returns { dark: 'dark', light: 'light', spacing: 'spacing' }
|
|
24
|
+
* ```
|
|
25
|
+
*/
|
|
26
|
+
var themeStringToObject = exports.themeStringToObject = function themeStringToObject(themeState) {
|
|
27
|
+
return themeState.split(' ')
|
|
28
|
+
// @ts-ignore - TS1501 TypeScript 5.9.2 upgrade
|
|
29
|
+
.map(function (theme) {
|
|
30
|
+
return theme.split(/:([^]*)/);
|
|
31
|
+
}).reduce(function (themeObject, _ref) {
|
|
32
|
+
var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
|
|
33
|
+
kind = _ref2[0],
|
|
34
|
+
id = _ref2[1];
|
|
35
|
+
if (kind === 'colorMode' && (0, _isColorMode.isColorMode)(id)) {
|
|
36
|
+
themeObject[kind] = id;
|
|
37
|
+
}
|
|
38
|
+
if ((0, _isThemeKind.isThemeKind)(kind) && (0, _isThemeIds.isThemeIds)(id)) {
|
|
39
|
+
// @ts-expect-error FIXME - this is a valid ts error
|
|
40
|
+
themeObject[kind] = id;
|
|
41
|
+
}
|
|
42
|
+
if (kind === customThemeOptions) {
|
|
43
|
+
try {
|
|
44
|
+
themeObject[customThemeOptions] = JSON.parse(id);
|
|
45
|
+
} catch (_unused) {
|
|
46
|
+
new Error('Invalid custom theme string');
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
return themeObject;
|
|
50
|
+
}, {});
|
|
51
|
+
};
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.additionalContrastChecker = void 0;
|
|
8
|
+
var _atlassianDarkTokenValueForContrastCheck = _interopRequireDefault(require("../artifacts/atlassian-dark-token-value-for-contrast-check"));
|
|
9
|
+
var _atlassianLightTokenValueForContrastCheck = _interopRequireDefault(require("../artifacts/atlassian-light-token-value-for-contrast-check"));
|
|
10
|
+
var _customThemeTokenContrastCheck = require("./custom-theme-token-contrast-check");
|
|
11
|
+
var _getContrastRatio = require("./get-contrast-ratio");
|
|
12
|
+
var getColorFromTokenRaw = function getColorFromTokenRaw(tokenName, mode) {
|
|
13
|
+
return mode === 'light' ? _atlassianLightTokenValueForContrastCheck.default[tokenName] : _atlassianDarkTokenValueForContrastCheck.default[tokenName];
|
|
14
|
+
};
|
|
15
|
+
var additionalContrastChecker = exports.additionalContrastChecker = function additionalContrastChecker(_ref) {
|
|
16
|
+
var customThemeTokenMap = _ref.customThemeTokenMap,
|
|
17
|
+
mode = _ref.mode,
|
|
18
|
+
themeRamp = _ref.themeRamp;
|
|
19
|
+
var updatedCustomThemeTokenMap = {};
|
|
20
|
+
var brandTokens = Object.keys(customThemeTokenMap);
|
|
21
|
+
_customThemeTokenContrastCheck.additionalChecks.forEach(function (pairing) {
|
|
22
|
+
var backgroundLight = pairing.backgroundLight,
|
|
23
|
+
backgroundDark = pairing.backgroundDark,
|
|
24
|
+
foreground = pairing.foreground,
|
|
25
|
+
desiredContrast = pairing.desiredContrast,
|
|
26
|
+
updatedTokens = pairing.updatedTokens;
|
|
27
|
+
var background = mode === 'light' ? backgroundLight : backgroundDark;
|
|
28
|
+
var foregroundTokenValue = customThemeTokenMap[foreground];
|
|
29
|
+
var backgroundTokenValue = customThemeTokenMap[background];
|
|
30
|
+
var foregroundColor = brandTokens.includes(foreground) ? typeof foregroundTokenValue === 'string' ? foregroundTokenValue : themeRamp[foregroundTokenValue] : getColorFromTokenRaw(foreground, mode);
|
|
31
|
+
var backgroundColor = brandTokens.includes(background) ? typeof backgroundTokenValue === 'string' ? backgroundTokenValue : themeRamp[backgroundTokenValue] : getColorFromTokenRaw(background, mode);
|
|
32
|
+
var contrast = (0, _getContrastRatio.getContrastRatio)(foregroundColor, backgroundColor);
|
|
33
|
+
if (contrast <= desiredContrast) {
|
|
34
|
+
updatedTokens.forEach(function (token) {
|
|
35
|
+
var rampValue = customThemeTokenMap[token];
|
|
36
|
+
if (typeof rampValue === 'number') {
|
|
37
|
+
updatedCustomThemeTokenMap[token] = mode === 'light' ? rampValue + 1 : rampValue - 1;
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
return updatedCustomThemeTokenMap;
|
|
43
|
+
};
|
|
@@ -1,22 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
6
|
exports.findMissingCustomStyleElements = findMissingCustomStyleElements;
|
|
8
|
-
Object.defineProperty(exports, "limitSizeOfCustomStyleElements", {
|
|
9
|
-
enumerable: true,
|
|
10
|
-
get: function get() {
|
|
11
|
-
return _limitSizeOfCustomStyleElements.limitSizeOfCustomStyleElements;
|
|
12
|
-
}
|
|
13
|
-
});
|
|
14
|
-
exports.reduceTokenMap = reduceTokenMap;
|
|
15
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
16
|
-
var _tokenNames = _interopRequireDefault(require("../artifacts/token-names"));
|
|
17
7
|
var _constants = require("../constants");
|
|
18
8
|
var _hash = require("./hash");
|
|
19
|
-
var _limitSizeOfCustomStyleElements = require("./limit-size-of-custom-style-elements");
|
|
20
9
|
function findMissingCustomStyleElements(UNSAFE_themeOptions, mode) {
|
|
21
10
|
var optionString = JSON.stringify(UNSAFE_themeOptions);
|
|
22
11
|
var uniqueId = (0, _hash.hash)(optionString);
|
|
@@ -31,15 +20,4 @@ function findMissingCustomStyleElements(UNSAFE_themeOptions, mode) {
|
|
|
31
20
|
}
|
|
32
21
|
});
|
|
33
22
|
return attrOfMissingCustomStyles;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
37
|
-
function reduceTokenMap(tokenMap, themeRamp) {
|
|
38
|
-
return Object.entries(tokenMap).reduce(function (acc, _ref) {
|
|
39
|
-
var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
|
|
40
|
-
key = _ref2[0],
|
|
41
|
-
value = _ref2[1];
|
|
42
|
-
var cssVar = _tokenNames.default[key];
|
|
43
|
-
return cssVar ? "".concat(acc, "\n ").concat(cssVar, ": ").concat(typeof value === 'string' ? value : themeRamp[value], ";") : acc;
|
|
44
|
-
}, '');
|
|
45
23
|
}
|
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
|
-
exports.
|
|
8
|
-
var _atlassianDarkTokenValueForContrastCheck = _interopRequireDefault(require("../artifacts/atlassian-dark-token-value-for-contrast-check"));
|
|
9
|
-
var _atlassianLightTokenValueForContrastCheck = _interopRequireDefault(require("../artifacts/atlassian-light-token-value-for-contrast-check"));
|
|
10
|
-
var _colorUtils = require("./color-utils");
|
|
6
|
+
exports.additionalChecks = void 0;
|
|
11
7
|
var additionalChecks = exports.additionalChecks = [{
|
|
12
8
|
foreground: 'color.text.brand',
|
|
13
9
|
backgroundLight: 'elevation.surface.sunken',
|
|
@@ -49,38 +45,4 @@ var additionalChecks = exports.additionalChecks = [{
|
|
|
49
45
|
// In light mode: darken the following tokens by one base token
|
|
50
46
|
// In dark mode: lighten the following tokens by one base token
|
|
51
47
|
updatedTokens: ['color.chart.brand', 'color.chart.brand.hovered']
|
|
52
|
-
}];
|
|
53
|
-
var getColorFromTokenRaw = function getColorFromTokenRaw(tokenName, mode) {
|
|
54
|
-
return mode === 'light' ? _atlassianLightTokenValueForContrastCheck.default[tokenName] : _atlassianDarkTokenValueForContrastCheck.default[tokenName];
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
58
|
-
var additionalContrastChecker = exports.additionalContrastChecker = function additionalContrastChecker(_ref) {
|
|
59
|
-
var customThemeTokenMap = _ref.customThemeTokenMap,
|
|
60
|
-
mode = _ref.mode,
|
|
61
|
-
themeRamp = _ref.themeRamp;
|
|
62
|
-
var updatedCustomThemeTokenMap = {};
|
|
63
|
-
var brandTokens = Object.keys(customThemeTokenMap);
|
|
64
|
-
additionalChecks.forEach(function (pairing) {
|
|
65
|
-
var backgroundLight = pairing.backgroundLight,
|
|
66
|
-
backgroundDark = pairing.backgroundDark,
|
|
67
|
-
foreground = pairing.foreground,
|
|
68
|
-
desiredContrast = pairing.desiredContrast,
|
|
69
|
-
updatedTokens = pairing.updatedTokens;
|
|
70
|
-
var background = mode === 'light' ? backgroundLight : backgroundDark;
|
|
71
|
-
var foregroundTokenValue = customThemeTokenMap[foreground];
|
|
72
|
-
var backgroundTokenValue = customThemeTokenMap[background];
|
|
73
|
-
var foregroundColor = brandTokens.includes(foreground) ? typeof foregroundTokenValue === 'string' ? foregroundTokenValue : themeRamp[foregroundTokenValue] : getColorFromTokenRaw(foreground, mode);
|
|
74
|
-
var backgroundColor = brandTokens.includes(background) ? typeof backgroundTokenValue === 'string' ? backgroundTokenValue : themeRamp[backgroundTokenValue] : getColorFromTokenRaw(background, mode);
|
|
75
|
-
var contrast = (0, _colorUtils.getContrastRatio)(foregroundColor, backgroundColor);
|
|
76
|
-
if (contrast <= desiredContrast) {
|
|
77
|
-
updatedTokens.forEach(function (token) {
|
|
78
|
-
var rampValue = customThemeTokenMap[token];
|
|
79
|
-
if (typeof rampValue === 'number') {
|
|
80
|
-
updatedCustomThemeTokenMap[token] = mode === 'light' ? rampValue + 1 : rampValue - 1;
|
|
81
|
-
}
|
|
82
|
-
});
|
|
83
|
-
}
|
|
84
|
-
});
|
|
85
|
-
return updatedCustomThemeTokenMap;
|
|
86
|
-
};
|
|
48
|
+
}];
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.deltaE = deltaE;
|
|
7
|
+
var _rgbToLab = require("./rgb-to-lab");
|
|
8
|
+
function deltaE(rgbA, rgbB) {
|
|
9
|
+
var labA = (0, _rgbToLab.rgbToLab)(rgbA);
|
|
10
|
+
var labB = (0, _rgbToLab.rgbToLab)(rgbB);
|
|
11
|
+
var deltaL = labA[0] - labB[0];
|
|
12
|
+
var deltaA = labA[1] - labB[1];
|
|
13
|
+
var deltaB = labA[2] - labB[2];
|
|
14
|
+
var c1 = Math.sqrt(labA[1] * labA[1] + labA[2] * labA[2]);
|
|
15
|
+
var c2 = Math.sqrt(labB[1] * labB[1] + labB[2] * labB[2]);
|
|
16
|
+
var deltaC = c1 - c2;
|
|
17
|
+
var deltaH = deltaA * deltaA + deltaB * deltaB - deltaC * deltaC;
|
|
18
|
+
deltaH = deltaH < 0 ? 0 : Math.sqrt(deltaH);
|
|
19
|
+
var sc = 1.0 + 0.045 * c1;
|
|
20
|
+
var sh = 1.0 + 0.015 * c1;
|
|
21
|
+
var deltaLKlsl = deltaL / 1.0;
|
|
22
|
+
var deltaCkcsc = deltaC / sc;
|
|
23
|
+
var deltaHkhsh = deltaH / sh;
|
|
24
|
+
var i = deltaLKlsl * deltaLKlsl + deltaCkcsc * deltaCkcsc + deltaHkhsh * deltaHkhsh;
|
|
25
|
+
return i < 0 ? 0 : Math.sqrt(i);
|
|
26
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.generateColors = void 0;
|
|
8
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
9
|
+
var _getClosestColorIndex = require("./get-closest-color-index");
|
|
10
|
+
var _hctColorUtils = require("./hct-color-utils");
|
|
11
|
+
var _hexToHsl = require("./hex-to-hsl");
|
|
12
|
+
var _hexToRgbA = require("./hex-to-rgb-a");
|
|
13
|
+
var _hslToRgb = require("./hsl-to-rgb");
|
|
14
|
+
var _relativeLuminanceW3C = require("./relative-luminance-w3-c");
|
|
15
|
+
var _rgbToHex = require("./rgb-to-hex");
|
|
16
|
+
var lowLuminanceContrastRatios = [1.12, 1.33, 2.03, 2.73, 3.33, 4.27, 5.2, 6.62, 12.46, 14.25];
|
|
17
|
+
var highLuminanceContrastRatios = [1.08, 1.24, 1.55, 1.99, 2.45, 3.34, 4.64, 6.1, 10.19, 12.6];
|
|
18
|
+
var generateColors = exports.generateColors = function generateColors(brandColor) {
|
|
19
|
+
// Determine luminance
|
|
20
|
+
var HSLBrandColorHue = (0, _hexToHsl.hexToHSL)(brandColor)[0];
|
|
21
|
+
var baseRgb = (0, _hslToRgb.HSLToRGB)(HSLBrandColorHue, 100, 60);
|
|
22
|
+
var isLowLuminance = (0, _relativeLuminanceW3C.relativeLuminanceW3C)(baseRgb[0], baseRgb[1], baseRgb[2]) < 0.4;
|
|
23
|
+
// Choose right palette
|
|
24
|
+
var themeRatios = isLowLuminance ? lowLuminanceContrastRatios : highLuminanceContrastRatios;
|
|
25
|
+
var brandRgba = (0, _hexToRgbA.hexToRgbA)(brandColor);
|
|
26
|
+
var hctColor = _hctColorUtils.Hct.fromInt((0, _hctColorUtils.argbFromRgba)({
|
|
27
|
+
r: brandRgba[0],
|
|
28
|
+
g: brandRgba[1],
|
|
29
|
+
b: brandRgba[2],
|
|
30
|
+
a: brandRgba[3]
|
|
31
|
+
}));
|
|
32
|
+
var themeRamp = themeRatios.map(function (contrast) {
|
|
33
|
+
var rgbaColor = (0, _hctColorUtils.rgbaFromArgb)(_hctColorUtils.Hct.from(hctColor.hue, hctColor.chroma, _hctColorUtils.Contrast.darker(100, contrast) + 0.25 // Material's utils provide an offset
|
|
34
|
+
).toInt());
|
|
35
|
+
return (0, _rgbToHex.rgbToHex)(rgbaColor.r, rgbaColor.g, rgbaColor.b);
|
|
36
|
+
});
|
|
37
|
+
var closestColorIndex = (0, _getClosestColorIndex.getClosestColorIndex)(themeRamp, brandColor);
|
|
38
|
+
|
|
39
|
+
// Replace closet color with brandColor
|
|
40
|
+
var updatedThemeRamp = (0, _toConsumableArray2.default)(themeRamp);
|
|
41
|
+
updatedThemeRamp[closestColorIndex] = brandColor;
|
|
42
|
+
return {
|
|
43
|
+
ramp: updatedThemeRamp,
|
|
44
|
+
// add the replaced color into the result
|
|
45
|
+
replacedColor: themeRamp[closestColorIndex]
|
|
46
|
+
};
|
|
47
|
+
};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.generateTokenMapWithContrastCheck = void 0;
|
|
8
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
|
+
var _additionalContrastChecker = require("./additional-contrast-checker");
|
|
11
|
+
var _generateColors = require("./generate-colors");
|
|
12
|
+
var _generateTokenMap = require("./generate-token-map");
|
|
13
|
+
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; }
|
|
14
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
15
|
+
var generateTokenMapWithContrastCheck = exports.generateTokenMapWithContrastCheck = function generateTokenMapWithContrastCheck(brandColor, mode, themeRamp) {
|
|
16
|
+
var colors = themeRamp || (0, _generateColors.generateColors)(brandColor).ramp;
|
|
17
|
+
var tokenMaps = (0, _generateTokenMap.generateTokenMap)(brandColor, mode, colors);
|
|
18
|
+
var result = {};
|
|
19
|
+
Object.entries(tokenMaps).forEach(function (_ref) {
|
|
20
|
+
var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
|
|
21
|
+
mode = _ref2[0],
|
|
22
|
+
map = _ref2[1];
|
|
23
|
+
if (mode === 'light' || mode === 'dark') {
|
|
24
|
+
result[mode] = _objectSpread(_objectSpread({}, map), (0, _additionalContrastChecker.additionalContrastChecker)({
|
|
25
|
+
customThemeTokenMap: map,
|
|
26
|
+
mode: mode,
|
|
27
|
+
themeRamp: colors
|
|
28
|
+
}));
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
return result;
|
|
32
|
+
};
|
|
@@ -4,59 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.
|
|
8
|
-
Object.defineProperty(exports, "getClosestColorIndex", {
|
|
9
|
-
enumerable: true,
|
|
10
|
-
get: function get() {
|
|
11
|
-
return _getClosestColorIndex.getClosestColorIndex;
|
|
12
|
-
}
|
|
13
|
-
});
|
|
14
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
7
|
+
exports.generateTokenMap = void 0;
|
|
15
8
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
16
|
-
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
17
9
|
var _atlassianDarkTokenValueForContrastCheck = _interopRequireDefault(require("../artifacts/atlassian-dark-token-value-for-contrast-check"));
|
|
18
|
-
var
|
|
19
|
-
var _customThemeTokenContrastCheck = require("./custom-theme-token-contrast-check");
|
|
10
|
+
var _generateColors2 = require("./generate-colors");
|
|
20
11
|
var _getClosestColorIndex = require("./get-closest-color-index");
|
|
21
|
-
var
|
|
22
|
-
var _hslToRgb = require("./hsl-to-rgb");
|
|
23
|
-
var _relativeLuminanceW3C = require("./relative-luminance-w3-c");
|
|
24
|
-
var _rgbToHex = require("./rgb-to-hex");
|
|
25
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
26
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
27
|
-
var lowLuminanceContrastRatios = [1.12, 1.33, 2.03, 2.73, 3.33, 4.27, 5.2, 6.62, 12.46, 14.25];
|
|
28
|
-
var highLuminanceContrastRatios = [1.08, 1.24, 1.55, 1.99, 2.45, 3.34, 4.64, 6.1, 10.19, 12.6];
|
|
29
|
-
var generateColors = exports.generateColors = function generateColors(brandColor) {
|
|
30
|
-
// Determine luminance
|
|
31
|
-
var HSLBrandColorHue = (0, _colorUtils.hexToHSL)(brandColor)[0];
|
|
32
|
-
var baseRgb = (0, _hslToRgb.HSLToRGB)(HSLBrandColorHue, 100, 60);
|
|
33
|
-
var isLowLuminance = (0, _relativeLuminanceW3C.relativeLuminanceW3C)(baseRgb[0], baseRgb[1], baseRgb[2]) < 0.4;
|
|
34
|
-
// Choose right palette
|
|
35
|
-
var themeRatios = isLowLuminance ? lowLuminanceContrastRatios : highLuminanceContrastRatios;
|
|
36
|
-
var brandRgba = (0, _colorUtils.hexToRgbA)(brandColor);
|
|
37
|
-
var hctColor = _hctColorUtils.Hct.fromInt((0, _hctColorUtils.argbFromRgba)({
|
|
38
|
-
r: brandRgba[0],
|
|
39
|
-
g: brandRgba[1],
|
|
40
|
-
b: brandRgba[2],
|
|
41
|
-
a: brandRgba[3]
|
|
42
|
-
}));
|
|
43
|
-
var themeRamp = themeRatios.map(function (contrast) {
|
|
44
|
-
var rgbaColor = (0, _hctColorUtils.rgbaFromArgb)(_hctColorUtils.Hct.from(hctColor.hue, hctColor.chroma, _hctColorUtils.Contrast.darker(100, contrast) + 0.25 // Material's utils provide an offset
|
|
45
|
-
).toInt());
|
|
46
|
-
return (0, _rgbToHex.rgbToHex)(rgbaColor.r, rgbaColor.g, rgbaColor.b);
|
|
47
|
-
});
|
|
48
|
-
var closestColorIndex = (0, _getClosestColorIndex.getClosestColorIndex)(themeRamp, brandColor);
|
|
49
|
-
|
|
50
|
-
// Replace closet color with brandColor
|
|
51
|
-
var updatedThemeRamp = (0, _toConsumableArray2.default)(themeRamp);
|
|
52
|
-
updatedThemeRamp[closestColorIndex] = brandColor;
|
|
53
|
-
return {
|
|
54
|
-
ramp: updatedThemeRamp,
|
|
55
|
-
// add the replaced color into the result
|
|
56
|
-
replacedColor: themeRamp[closestColorIndex]
|
|
57
|
-
};
|
|
58
|
-
};
|
|
59
|
-
|
|
12
|
+
var _getContrastRatio = require("./get-contrast-ratio");
|
|
60
13
|
/**
|
|
61
14
|
* Return the interaction tokens for a color, given its ramp position and the number of
|
|
62
15
|
* needed interaction states. Use higher-indexed colors (i.e. darker colors) if possible;
|
|
@@ -76,17 +29,15 @@ function getInteractionStates(rampPosition, number, colors) {
|
|
|
76
29
|
}
|
|
77
30
|
return result;
|
|
78
31
|
}
|
|
79
|
-
|
|
80
|
-
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
81
32
|
var generateTokenMap = exports.generateTokenMap = function generateTokenMap(brandColor, mode, themeRamp) {
|
|
82
|
-
var _generateColors = generateColors(brandColor),
|
|
33
|
+
var _generateColors = (0, _generateColors2.generateColors)(brandColor),
|
|
83
34
|
ramp = _generateColors.ramp,
|
|
84
35
|
replacedColor = _generateColors.replacedColor;
|
|
85
36
|
var colors = themeRamp || ramp;
|
|
86
37
|
var closestColorIndex = (0, _getClosestColorIndex.getClosestColorIndex)(colors, brandColor);
|
|
87
38
|
var customThemeTokenMapLight = {};
|
|
88
39
|
var customThemeTokenMapDark = {};
|
|
89
|
-
var inputContrast = (0,
|
|
40
|
+
var inputContrast = (0, _getContrastRatio.getContrastRatio)(brandColor, '#FFFFFF');
|
|
90
41
|
// Branch based on brandColor's contrast against white
|
|
91
42
|
if (inputContrast >= 4.5) {
|
|
92
43
|
/**
|
|
@@ -201,7 +152,7 @@ var generateTokenMap = exports.generateTokenMap = function generateTokenMap(bran
|
|
|
201
152
|
*/
|
|
202
153
|
if (inputContrast < 4.5) {
|
|
203
154
|
var inverseTextColor = _atlassianDarkTokenValueForContrastCheck.default['color.text.inverse'];
|
|
204
|
-
if ((0,
|
|
155
|
+
if ((0, _getContrastRatio.getContrastRatio)(inverseTextColor, brandColor) >= 4.5 && closestColorIndex >= 2) {
|
|
205
156
|
customThemeTokenMapDark['color.background.brand.bold'] = closestColorIndex;
|
|
206
157
|
customThemeTokenMapDark['color.background.brand.bold.hovered'] = closestColorIndex - 1;
|
|
207
158
|
customThemeTokenMapDark['color.background.brand.bold.pressed'] = closestColorIndex - 2;
|
|
@@ -216,24 +167,4 @@ var generateTokenMap = exports.generateTokenMap = function generateTokenMap(bran
|
|
|
216
167
|
light: customThemeTokenMapLight,
|
|
217
168
|
dark: customThemeTokenMapDark
|
|
218
169
|
};
|
|
219
|
-
};
|
|
220
|
-
|
|
221
|
-
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
222
|
-
var generateTokenMapWithContrastCheck = exports.generateTokenMapWithContrastCheck = function generateTokenMapWithContrastCheck(brandColor, mode, themeRamp) {
|
|
223
|
-
var colors = themeRamp || generateColors(brandColor).ramp;
|
|
224
|
-
var tokenMaps = generateTokenMap(brandColor, mode, colors);
|
|
225
|
-
var result = {};
|
|
226
|
-
Object.entries(tokenMaps).forEach(function (_ref3) {
|
|
227
|
-
var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
|
|
228
|
-
mode = _ref4[0],
|
|
229
|
-
map = _ref4[1];
|
|
230
|
-
if (mode === 'light' || mode === 'dark') {
|
|
231
|
-
result[mode] = _objectSpread(_objectSpread({}, map), (0, _customThemeTokenContrastCheck.additionalContrastChecker)({
|
|
232
|
-
customThemeTokenMap: map,
|
|
233
|
-
mode: mode,
|
|
234
|
-
themeRamp: colors
|
|
235
|
-
}));
|
|
236
|
-
}
|
|
237
|
-
});
|
|
238
|
-
return result;
|
|
239
170
|
};
|
|
@@ -4,13 +4,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.getClosestColorIndex = void 0;
|
|
7
|
-
var
|
|
7
|
+
var _deltaE = require("./delta-e");
|
|
8
|
+
var _hexToRgb = require("./hex-to-rgb");
|
|
8
9
|
var getClosestColorIndex = exports.getClosestColorIndex = function getClosestColorIndex(themeRamp, brandColor) {
|
|
9
10
|
// Iterate over themeRamp and find whichever color is closest to brandColor
|
|
10
11
|
var closestColorIndex = 0;
|
|
11
12
|
var closestColorDistance = null;
|
|
12
13
|
themeRamp.forEach(function (value, index) {
|
|
13
|
-
var distance = (0,
|
|
14
|
+
var distance = (0, _deltaE.deltaE)((0, _hexToRgb.hexToRgb)(value), (0, _hexToRgb.hexToRgb)(brandColor));
|
|
14
15
|
if (closestColorDistance === null || distance < closestColorDistance) {
|
|
15
16
|
closestColorIndex = index;
|
|
16
17
|
closestColorDistance = distance;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.getContrastRatio = getContrastRatio;
|
|
7
|
+
var _hexToRgb = require("./hex-to-rgb");
|
|
8
|
+
var _isValidHex = require("./is-valid-hex");
|
|
9
|
+
var _relativeLuminanceW3C = require("./relative-luminance-w3-c");
|
|
10
|
+
function getContrastRatio(foreground, background) {
|
|
11
|
+
if (!(0, _isValidHex.isValidHex)(foreground) || !(0, _isValidHex.isValidHex)(background)) {
|
|
12
|
+
throw new Error('Invalid HEX');
|
|
13
|
+
}
|
|
14
|
+
var foregroundRgb = (0, _hexToRgb.hexToRgb)(foreground);
|
|
15
|
+
var backgroundRgb = (0, _hexToRgb.hexToRgb)(background);
|
|
16
|
+
var foregroundLuminance = (0, _relativeLuminanceW3C.relativeLuminanceW3C)(foregroundRgb[0], foregroundRgb[1], foregroundRgb[2]);
|
|
17
|
+
var backgroundLuminance = (0, _relativeLuminanceW3C.relativeLuminanceW3C)(backgroundRgb[0], backgroundRgb[1], backgroundRgb[2]);
|
|
18
|
+
// calculate the color contrast ratio
|
|
19
|
+
var brightest = Math.max(foregroundLuminance, backgroundLuminance);
|
|
20
|
+
var darkest = Math.min(foregroundLuminance, backgroundLuminance);
|
|
21
|
+
return (brightest + 0.05) / (darkest + 0.05);
|
|
22
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.alphaFromArgb = alphaFromArgb;
|
|
7
|
+
/**
|
|
8
|
+
* Returns the alpha component of a color in ARGB format.
|
|
9
|
+
*/
|
|
10
|
+
function alphaFromArgb(argb) {
|
|
11
|
+
return argb >> 24 & 255;
|
|
12
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.argbFromLinrgb = argbFromLinrgb;
|
|
7
|
+
var _argbFromRgb = require("./argb-from-rgb");
|
|
8
|
+
var _delinearized = require("./delinearized");
|
|
9
|
+
/**
|
|
10
|
+
* Converts a color from linear RGB components to ARGB format.
|
|
11
|
+
*/
|
|
12
|
+
function argbFromLinrgb(linrgb) {
|
|
13
|
+
var r = (0, _delinearized.delinearized)(linrgb[0]);
|
|
14
|
+
var g = (0, _delinearized.delinearized)(linrgb[1]);
|
|
15
|
+
var b = (0, _delinearized.delinearized)(linrgb[2]);
|
|
16
|
+
return (0, _argbFromRgb.argbFromRgb)(r, g, b);
|
|
17
|
+
}
|