@atlaskit/tokens 1.11.3 → 1.13.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 +30 -0
- package/dist/cjs/artifacts/atlassian-dark-token-value-for-contrast-check.js +25 -0
- package/dist/cjs/artifacts/atlassian-light-token-value-for-contrast-check.js +25 -0
- package/dist/cjs/artifacts/generated-pairs.js +2 -2
- package/dist/cjs/artifacts/themes/atlassian-dark.js +2 -2
- package/dist/cjs/artifacts/themes/atlassian-legacy-dark.js +2 -2
- package/dist/cjs/artifacts/themes/atlassian-legacy-light.js +2 -2
- package/dist/cjs/artifacts/themes/atlassian-light.js +2 -2
- package/dist/cjs/artifacts/token-default-values.js +7 -1
- package/dist/cjs/artifacts/token-names.js +7 -1
- package/dist/cjs/artifacts/tokens-raw/atlassian-dark.js +137 -5
- package/dist/cjs/artifacts/tokens-raw/atlassian-legacy-dark.js +137 -5
- package/dist/cjs/artifacts/tokens-raw/atlassian-legacy-light.js +137 -5
- package/dist/cjs/artifacts/tokens-raw/atlassian-light.js +137 -5
- package/dist/cjs/constants.js +3 -1
- package/dist/cjs/custom-theme.js +108 -0
- package/dist/cjs/get-token-value.js +1 -1
- package/dist/cjs/get-token.js +1 -1
- package/dist/cjs/set-global-theme.js +156 -59
- package/dist/cjs/tokens/atlassian-dark/color/background.js +22 -0
- package/dist/cjs/tokens/atlassian-legacy-dark/color/background.js +22 -0
- package/dist/cjs/tokens/atlassian-legacy-light/color/background.js +22 -0
- package/dist/cjs/tokens/atlassian-light/color/background.js +22 -0
- package/dist/cjs/tokens/default/color/background.js +54 -2
- package/dist/cjs/utils/color-utils.js +178 -0
- package/dist/cjs/utils/custom-theme-loading-utils.js +47 -0
- package/dist/cjs/utils/custom-theme-token-contrast-check.js +74 -0
- package/dist/cjs/utils/generate-custom-color-ramp.js +222 -0
- package/dist/cjs/utils/hash.js +17 -0
- package/dist/cjs/utils/hct-color-utils/color-utils.js +310 -0
- package/dist/cjs/utils/hct-color-utils/contrast.js +188 -0
- package/dist/cjs/utils/hct-color-utils/hct.js +1036 -0
- package/dist/cjs/utils/hct-color-utils/index.js +32 -0
- package/dist/cjs/utils/hct-color-utils/math-utils.js +159 -0
- package/dist/cjs/utils/theme-loading.js +1 -1
- package/dist/cjs/utils/theme-state-transformer.js +1 -1
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/artifacts/atlassian-dark-token-value-for-contrast-check.js +18 -0
- package/dist/es2019/artifacts/atlassian-light-token-value-for-contrast-check.js +18 -0
- package/dist/es2019/artifacts/generated-pairs.js +2 -2
- package/dist/es2019/artifacts/themes/atlassian-dark.js +7 -1
- package/dist/es2019/artifacts/themes/atlassian-legacy-dark.js +7 -1
- package/dist/es2019/artifacts/themes/atlassian-legacy-light.js +7 -1
- package/dist/es2019/artifacts/themes/atlassian-light.js +7 -1
- package/dist/es2019/artifacts/token-default-values.js +7 -1
- package/dist/es2019/artifacts/token-names.js +7 -1
- package/dist/es2019/artifacts/tokens-raw/atlassian-dark.js +137 -5
- package/dist/es2019/artifacts/tokens-raw/atlassian-legacy-dark.js +137 -5
- package/dist/es2019/artifacts/tokens-raw/atlassian-legacy-light.js +137 -5
- package/dist/es2019/artifacts/tokens-raw/atlassian-light.js +137 -5
- package/dist/es2019/constants.js +1 -0
- package/dist/es2019/custom-theme.js +77 -0
- package/dist/es2019/get-token-value.js +1 -1
- package/dist/es2019/get-token.js +1 -1
- package/dist/es2019/set-global-theme.js +67 -13
- package/dist/es2019/tokens/atlassian-dark/color/background.js +22 -0
- package/dist/es2019/tokens/atlassian-legacy-dark/color/background.js +22 -0
- package/dist/es2019/tokens/atlassian-legacy-light/color/background.js +22 -0
- package/dist/es2019/tokens/atlassian-light/color/background.js +22 -0
- package/dist/es2019/tokens/default/color/background.js +54 -2
- package/dist/es2019/utils/color-utils.js +154 -0
- package/dist/es2019/utils/custom-theme-loading-utils.js +31 -0
- package/dist/es2019/utils/custom-theme-token-contrast-check.js +68 -0
- package/dist/es2019/utils/generate-custom-color-ramp.js +198 -0
- package/dist/es2019/utils/hash.js +10 -0
- package/dist/es2019/utils/hct-color-utils/color-utils.js +286 -0
- package/dist/es2019/utils/hct-color-utils/contrast.js +161 -0
- package/dist/es2019/utils/hct-color-utils/hct.js +931 -0
- package/dist/es2019/utils/hct-color-utils/index.js +3 -0
- package/dist/es2019/utils/hct-color-utils/math-utils.js +145 -0
- package/dist/es2019/utils/theme-loading.js +2 -2
- package/dist/es2019/utils/theme-state-transformer.js +3 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/artifacts/atlassian-dark-token-value-for-contrast-check.js +18 -0
- package/dist/esm/artifacts/atlassian-light-token-value-for-contrast-check.js +18 -0
- package/dist/esm/artifacts/generated-pairs.js +2 -2
- package/dist/esm/artifacts/themes/atlassian-dark.js +2 -2
- package/dist/esm/artifacts/themes/atlassian-legacy-dark.js +2 -2
- package/dist/esm/artifacts/themes/atlassian-legacy-light.js +2 -2
- package/dist/esm/artifacts/themes/atlassian-light.js +2 -2
- package/dist/esm/artifacts/token-default-values.js +7 -1
- package/dist/esm/artifacts/token-names.js +7 -1
- package/dist/esm/artifacts/tokens-raw/atlassian-dark.js +137 -5
- package/dist/esm/artifacts/tokens-raw/atlassian-legacy-dark.js +137 -5
- package/dist/esm/artifacts/tokens-raw/atlassian-legacy-light.js +137 -5
- package/dist/esm/artifacts/tokens-raw/atlassian-light.js +137 -5
- package/dist/esm/constants.js +1 -0
- package/dist/esm/custom-theme.js +98 -0
- package/dist/esm/get-token-value.js +1 -1
- package/dist/esm/get-token.js +1 -1
- package/dist/esm/set-global-theme.js +149 -60
- package/dist/esm/tokens/atlassian-dark/color/background.js +22 -0
- package/dist/esm/tokens/atlassian-legacy-dark/color/background.js +22 -0
- package/dist/esm/tokens/atlassian-legacy-light/color/background.js +22 -0
- package/dist/esm/tokens/atlassian-light/color/background.js +22 -0
- package/dist/esm/tokens/default/color/background.js +54 -2
- package/dist/esm/utils/color-utils.js +162 -0
- package/dist/esm/utils/custom-theme-loading-utils.js +38 -0
- package/dist/esm/utils/custom-theme-token-contrast-check.js +65 -0
- package/dist/esm/utils/generate-custom-color-ramp.js +211 -0
- package/dist/esm/utils/hash.js +10 -0
- package/dist/esm/utils/hct-color-utils/color-utils.js +285 -0
- package/dist/esm/utils/hct-color-utils/contrast.js +181 -0
- package/dist/esm/utils/hct-color-utils/hct.js +1029 -0
- package/dist/esm/utils/hct-color-utils/index.js +3 -0
- package/dist/esm/utils/hct-color-utils/math-utils.js +145 -0
- package/dist/esm/utils/theme-loading.js +2 -2
- package/dist/esm/utils/theme-state-transformer.js +1 -1
- package/dist/esm/version.json +1 -1
- package/dist/types/artifacts/atlassian-dark-token-value-for-contrast-check.d.ts +18 -0
- package/dist/types/artifacts/atlassian-light-token-value-for-contrast-check.d.ts +18 -0
- package/dist/types/artifacts/generated-pairs.d.ts +1 -1
- package/dist/types/artifacts/themes/atlassian-dark.d.ts +2 -2
- package/dist/types/artifacts/themes/atlassian-legacy-dark.d.ts +2 -2
- package/dist/types/artifacts/themes/atlassian-legacy-light.d.ts +2 -2
- package/dist/types/artifacts/themes/atlassian-light.d.ts +2 -2
- package/dist/types/artifacts/token-default-values.d.ts +7 -1
- package/dist/types/artifacts/token-names.d.ts +13 -1
- package/dist/types/artifacts/tokens-raw/atlassian-dark.d.ts +1 -1
- package/dist/types/artifacts/tokens-raw/atlassian-legacy-dark.d.ts +1 -1
- package/dist/types/artifacts/tokens-raw/atlassian-legacy-light.d.ts +1 -1
- package/dist/types/artifacts/tokens-raw/atlassian-light.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/constants.d.ts +1 -0
- package/dist/types/custom-theme.d.ts +30 -0
- package/dist/types/index.d.ts +1 -0
- package/dist/types/set-global-theme.d.ts +9 -3
- package/dist/types/types.d.ts +10 -0
- package/dist/types/utils/color-utils.d.ts +10 -0
- package/dist/types/utils/custom-theme-loading-utils.d.ts +11 -0
- package/dist/types/utils/custom-theme-token-contrast-check.d.ts +20 -0
- package/dist/types/utils/generate-custom-color-ramp.d.ts +19 -0
- package/dist/types/utils/hash.d.ts +1 -0
- package/dist/types/utils/hct-color-utils/color-utils.d.ts +131 -0
- package/dist/types/utils/hct-color-utils/contrast.d.ts +78 -0
- package/dist/types/utils/hct-color-utils/hct.d.ts +137 -0
- package/dist/types/utils/hct-color-utils/index.d.ts +3 -0
- package/dist/types/utils/hct-color-utils/math-utils.d.ts +86 -0
- package/dist/types-ts4.5/artifacts/atlassian-dark-token-value-for-contrast-check.d.ts +18 -0
- package/dist/types-ts4.5/artifacts/atlassian-light-token-value-for-contrast-check.d.ts +18 -0
- package/dist/types-ts4.5/artifacts/generated-pairs.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/themes/atlassian-dark.d.ts +2 -2
- package/dist/types-ts4.5/artifacts/themes/atlassian-legacy-dark.d.ts +2 -2
- package/dist/types-ts4.5/artifacts/themes/atlassian-legacy-light.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 +7 -1
- package/dist/types-ts4.5/artifacts/token-names.d.ts +13 -1
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-dark.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-legacy-dark.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-legacy-light.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-light.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/constants.d.ts +1 -0
- package/dist/types-ts4.5/custom-theme.d.ts +30 -0
- package/dist/types-ts4.5/index.d.ts +1 -0
- package/dist/types-ts4.5/set-global-theme.d.ts +9 -3
- package/dist/types-ts4.5/types.d.ts +10 -0
- package/dist/types-ts4.5/utils/color-utils.d.ts +27 -0
- package/dist/types-ts4.5/utils/custom-theme-loading-utils.d.ts +11 -0
- package/dist/types-ts4.5/utils/custom-theme-token-contrast-check.d.ts +20 -0
- package/dist/types-ts4.5/utils/generate-custom-color-ramp.d.ts +19 -0
- package/dist/types-ts4.5/utils/hash.d.ts +1 -0
- package/dist/types-ts4.5/utils/hct-color-utils/color-utils.d.ts +131 -0
- package/dist/types-ts4.5/utils/hct-color-utils/contrast.d.ts +78 -0
- package/dist/types-ts4.5/utils/hct-color-utils/hct.d.ts +137 -0
- package/dist/types-ts4.5/utils/hct-color-utils/index.d.ts +3 -0
- package/dist/types-ts4.5/utils/hct-color-utils/math-utils.d.ts +86 -0
- package/figma/atlassian-dark.json +56 -2
- package/figma/atlassian-legacy-dark.json +56 -2
- package/figma/atlassian-legacy-light.json +56 -2
- package/figma/atlassian-light.json +56 -2
- package/package.json +36 -37
- package/report.api.md +48 -1
- package/dist/cjs/artifacts/tokens-raw/atlassian-dark-iteration.js +0 -902
- package/dist/es2019/artifacts/tokens-raw/atlassian-dark-iteration.js +0 -895
- package/dist/esm/artifacts/tokens-raw/atlassian-dark-iteration.js +0 -895
- package/dist/types/artifacts/tokens-raw/atlassian-dark-iteration.d.ts +0 -91
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-dark-iteration.d.ts +0 -91
- package/tmp/api-report-tmp.d.ts +0 -1132
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
3
|
-
* @codegen <<SignedSource::
|
|
3
|
+
* @codegen <<SignedSource::d3c62439b01fe176b56a1bf1807fc068>>
|
|
4
4
|
* @codegenCommand yarn build tokens
|
|
5
5
|
*/
|
|
6
|
-
export type InternalTokenIds = 'color.text.[default]' | 'color.text.accent.lime.[default]' | 'color.text.accent.lime.bolder' | 'color.text.accent.red.[default]' | 'color.text.accent.red.bolder' | 'color.text.accent.orange.[default]' | 'color.text.accent.orange.bolder' | 'color.text.accent.yellow.[default]' | 'color.text.accent.yellow.bolder' | 'color.text.accent.green.[default]' | 'color.text.accent.green.bolder' | 'color.text.accent.teal.[default]' | 'color.text.accent.teal.bolder' | 'color.text.accent.blue.[default]' | 'color.text.accent.blue.bolder' | 'color.text.accent.purple.[default]' | 'color.text.accent.purple.bolder' | 'color.text.accent.magenta.[default]' | 'color.text.accent.magenta.bolder' | 'color.text.accent.gray.[default]' | 'color.text.accent.gray.bolder' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.selected' | 'color.text.brand' | 'color.text.danger' | 'color.text.warning.[default]' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.text.subtlest' | 'color.text.subtle' | 'color.link.[default]' | 'color.link.pressed' | 'color.icon.[default]' | 'color.icon.accent.lime' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.teal' | 'color.icon.accent.blue' | 'color.icon.accent.purple' | 'color.icon.accent.magenta' | 'color.icon.accent.gray' | 'color.icon.disabled' | 'color.icon.inverse' | 'color.icon.selected' | 'color.icon.brand' | 'color.icon.danger' | 'color.icon.warning.[default]' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.icon.subtle' | 'color.border.[default]' | 'color.border.accent.lime' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.teal' | 'color.border.accent.blue' | 'color.border.accent.purple' | 'color.border.accent.magenta' | 'color.border.accent.gray' | 'color.border.disabled' | 'color.border.focused' | 'color.border.input' | 'color.border.inverse' | 'color.border.selected' | 'color.border.brand' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.border.bold' | 'color.background.accent.lime.subtlest' | 'color.background.accent.lime.subtler' | 'color.background.accent.lime.subtle' | 'color.background.accent.lime.bolder' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.accent.gray.subtlest' | 'color.background.accent.gray.subtler' | 'color.background.accent.gray.subtle' | 'color.background.accent.gray.bolder' | 'color.background.disabled' | 'color.background.input.[default]' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.inverse.subtle.[default]' | 'color.background.inverse.subtle.hovered' | 'color.background.inverse.subtle.pressed' | 'color.background.neutral.[default].[default]' | 'color.background.neutral.[default].hovered' | 'color.background.neutral.[default].pressed' | 'color.background.neutral.subtle.[default]' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold.[default]' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.selected.[default].[default]' | 'color.background.selected.[default].hovered' | 'color.background.selected.[default].pressed' | 'color.background.selected.bold.[default]' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.brand.bold.[default]' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.danger.[default].[default]' | 'color.background.danger.[default].hovered' | 'color.background.danger.[default].pressed' | 'color.background.danger.bold.[default]' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning.[default].[default]' | 'color.background.warning.[default].hovered' | 'color.background.warning.[default].pressed' | 'color.background.warning.bold.[default]' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success.[default].[default]' | 'color.background.success.[default].hovered' | 'color.background.success.[default].pressed' | 'color.background.success.bold.[default]' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery.[default].[default]' | 'color.background.discovery.[default].hovered' | 'color.background.discovery.[default].pressed' | 'color.background.discovery.bold.[default]' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information.[default].[default]' | 'color.background.information.[default].hovered' | 'color.background.information.[default].pressed' | 'color.background.information.bold.[default]' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket.[default]' | 'color.blanket.selected' | 'color.blanket.danger' | 'color.interaction.hovered' | 'color.interaction.pressed' | 'color.skeleton.[default]' | 'color.skeleton.subtle' | 'color.chart.categorical.1.[default]' | 'color.chart.categorical.1.hovered' | 'color.chart.categorical.2.[default]' | 'color.chart.categorical.2.hovered' | 'color.chart.categorical.3.[default]' | 'color.chart.categorical.3.hovered' | 'color.chart.categorical.4.[default]' | 'color.chart.categorical.4.hovered' | 'color.chart.categorical.5.[default]' | 'color.chart.categorical.5.hovered' | 'color.chart.categorical.6.[default]' | 'color.chart.categorical.6.hovered' | 'color.chart.categorical.7.[default]' | 'color.chart.categorical.7.hovered' | 'color.chart.categorical.8.[default]' | 'color.chart.categorical.8.hovered' | 'color.chart.lime.bold.[default]' | 'color.chart.lime.bold.hovered' | 'color.chart.lime.bolder.[default]' | 'color.chart.lime.bolder.hovered' | 'color.chart.lime.boldest.[default]' | 'color.chart.lime.boldest.hovered' | 'color.chart.neutral.[default]' | 'color.chart.neutral.hovered' | 'color.chart.red.bold.[default]' | 'color.chart.red.bold.hovered' | 'color.chart.red.bolder.[default]' | 'color.chart.red.bolder.hovered' | 'color.chart.red.boldest.[default]' | 'color.chart.red.boldest.hovered' | 'color.chart.orange.bold.[default]' | 'color.chart.orange.bold.hovered' | 'color.chart.orange.bolder.[default]' | 'color.chart.orange.bolder.hovered' | 'color.chart.orange.boldest.[default]' | 'color.chart.orange.boldest.hovered' | 'color.chart.yellow.bold.[default]' | 'color.chart.yellow.bold.hovered' | 'color.chart.yellow.bolder.[default]' | 'color.chart.yellow.bolder.hovered' | 'color.chart.yellow.boldest.[default]' | 'color.chart.yellow.boldest.hovered' | 'color.chart.green.bold.[default]' | 'color.chart.green.bold.hovered' | 'color.chart.green.bolder.[default]' | 'color.chart.green.bolder.hovered' | 'color.chart.green.boldest.[default]' | 'color.chart.green.boldest.hovered' | 'color.chart.teal.bold.[default]' | 'color.chart.teal.bold.hovered' | 'color.chart.teal.bolder.[default]' | 'color.chart.teal.bolder.hovered' | 'color.chart.teal.boldest.[default]' | 'color.chart.teal.boldest.hovered' | 'color.chart.blue.bold.[default]' | 'color.chart.blue.bold.hovered' | 'color.chart.blue.bolder.[default]' | 'color.chart.blue.bolder.hovered' | 'color.chart.blue.boldest.[default]' | 'color.chart.blue.boldest.hovered' | 'color.chart.purple.bold.[default]' | 'color.chart.purple.bold.hovered' | 'color.chart.purple.bolder.[default]' | 'color.chart.purple.bolder.hovered' | 'color.chart.purple.boldest.[default]' | 'color.chart.purple.boldest.hovered' | 'color.chart.magenta.bold.[default]' | 'color.chart.magenta.bold.hovered' | 'color.chart.magenta.bolder.[default]' | 'color.chart.magenta.bolder.hovered' | 'color.chart.magenta.boldest.[default]' | 'color.chart.magenta.boldest.hovered' | 'color.chart.gray.bold.[default]' | 'color.chart.gray.bold.hovered' | 'color.chart.gray.bolder.[default]' | 'color.chart.gray.bolder.hovered' | 'color.chart.gray.boldest.[default]' | 'color.chart.gray.boldest.hovered' | 'color.chart.brand.[default]' | 'color.chart.brand.hovered' | 'color.chart.danger.[default].[default]' | 'color.chart.danger.[default].hovered' | 'color.chart.danger.bold.[default]' | 'color.chart.danger.bold.hovered' | 'color.chart.warning.[default].[default]' | 'color.chart.warning.[default].hovered' | 'color.chart.warning.bold.[default]' | 'color.chart.warning.bold.hovered' | 'color.chart.success.[default].[default]' | 'color.chart.success.[default].hovered' | 'color.chart.success.bold.[default]' | 'color.chart.success.bold.hovered' | 'color.chart.discovery.[default].[default]' | 'color.chart.discovery.[default].hovered' | 'color.chart.discovery.bold.[default]' | 'color.chart.discovery.bold.hovered' | 'color.chart.information.[default].[default]' | 'color.chart.information.[default].hovered' | 'color.chart.information.bold.[default]' | 'color.chart.information.bold.hovered' | 'elevation.surface.[default].[default]' | 'elevation.surface.[default].hovered' | 'elevation.surface.[default].pressed' | 'elevation.surface.overlay.[default]' | 'elevation.surface.overlay.hovered' | 'elevation.surface.overlay.pressed' | 'elevation.surface.raised.[default]' | 'elevation.surface.raised.hovered' | 'elevation.surface.raised.pressed' | 'elevation.surface.sunken' | 'elevation.shadow.overflow.[default]' | 'elevation.shadow.overflow.perimeter' | 'elevation.shadow.overflow.spread' | 'elevation.shadow.overlay' | 'elevation.shadow.raised' | 'opacity.disabled' | 'opacity.loading' | 'utility.UNSAFE.transparent' | 'border.radius.050' | 'border.radius.[default]' | 'border.radius.100' | 'border.radius.200' | 'border.radius.300' | 'border.radius.400' | 'border.radius.circle' | 'border.width.[default]' | 'border.width.indicator' | 'border.width.outline' | 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000' | 'font.family.monospace' | 'font.family.sans' | 'font.size.050' | 'font.size.075' | 'font.size.100' | 'font.size.200' | 'font.size.300' | 'font.size.400' | 'font.size.500' | 'font.size.600' | 'font.weight.bold' | 'font.weight.medium' | 'font.weight.regular' | 'font.weight.semibold' | 'font.lineHeight.100' | 'font.lineHeight.200' | 'font.lineHeight.300' | 'font.lineHeight.400' | 'font.lineHeight.500' | 'font.lineHeight.600';
|
|
6
|
+
export type InternalTokenIds = 'color.text.[default]' | 'color.text.accent.lime.[default]' | 'color.text.accent.lime.bolder' | 'color.text.accent.red.[default]' | 'color.text.accent.red.bolder' | 'color.text.accent.orange.[default]' | 'color.text.accent.orange.bolder' | 'color.text.accent.yellow.[default]' | 'color.text.accent.yellow.bolder' | 'color.text.accent.green.[default]' | 'color.text.accent.green.bolder' | 'color.text.accent.teal.[default]' | 'color.text.accent.teal.bolder' | 'color.text.accent.blue.[default]' | 'color.text.accent.blue.bolder' | 'color.text.accent.purple.[default]' | 'color.text.accent.purple.bolder' | 'color.text.accent.magenta.[default]' | 'color.text.accent.magenta.bolder' | 'color.text.accent.gray.[default]' | 'color.text.accent.gray.bolder' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.selected' | 'color.text.brand' | 'color.text.danger' | 'color.text.warning.[default]' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.text.subtlest' | 'color.text.subtle' | 'color.link.[default]' | 'color.link.pressed' | 'color.icon.[default]' | 'color.icon.accent.lime' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.teal' | 'color.icon.accent.blue' | 'color.icon.accent.purple' | 'color.icon.accent.magenta' | 'color.icon.accent.gray' | 'color.icon.disabled' | 'color.icon.inverse' | 'color.icon.selected' | 'color.icon.brand' | 'color.icon.danger' | 'color.icon.warning.[default]' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.icon.subtle' | 'color.border.[default]' | 'color.border.accent.lime' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.teal' | 'color.border.accent.blue' | 'color.border.accent.purple' | 'color.border.accent.magenta' | 'color.border.accent.gray' | 'color.border.disabled' | 'color.border.focused' | 'color.border.input' | 'color.border.inverse' | 'color.border.selected' | 'color.border.brand' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.border.bold' | 'color.background.accent.lime.subtlest' | 'color.background.accent.lime.subtler' | 'color.background.accent.lime.subtle' | 'color.background.accent.lime.bolder' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.accent.gray.subtlest' | 'color.background.accent.gray.subtler' | 'color.background.accent.gray.subtle' | 'color.background.accent.gray.bolder' | 'color.background.disabled' | 'color.background.input.[default]' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.inverse.subtle.[default]' | 'color.background.inverse.subtle.hovered' | 'color.background.inverse.subtle.pressed' | 'color.background.neutral.[default].[default]' | 'color.background.neutral.[default].hovered' | 'color.background.neutral.[default].pressed' | 'color.background.neutral.subtle.[default]' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold.[default]' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.selected.[default].[default]' | 'color.background.selected.[default].hovered' | 'color.background.selected.[default].pressed' | 'color.background.selected.bold.[default]' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.brand.subtlest.[default]' | 'color.background.brand.subtlest.hovered' | 'color.background.brand.subtlest.pressed' | 'color.background.brand.bold.[default]' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.brand.boldest.[default]' | 'color.background.brand.boldest.hovered' | 'color.background.brand.boldest.pressed' | 'color.background.danger.[default].[default]' | 'color.background.danger.[default].hovered' | 'color.background.danger.[default].pressed' | 'color.background.danger.bold.[default]' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning.[default].[default]' | 'color.background.warning.[default].hovered' | 'color.background.warning.[default].pressed' | 'color.background.warning.bold.[default]' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success.[default].[default]' | 'color.background.success.[default].hovered' | 'color.background.success.[default].pressed' | 'color.background.success.bold.[default]' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery.[default].[default]' | 'color.background.discovery.[default].hovered' | 'color.background.discovery.[default].pressed' | 'color.background.discovery.bold.[default]' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information.[default].[default]' | 'color.background.information.[default].hovered' | 'color.background.information.[default].pressed' | 'color.background.information.bold.[default]' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket.[default]' | 'color.blanket.selected' | 'color.blanket.danger' | 'color.interaction.hovered' | 'color.interaction.pressed' | 'color.skeleton.[default]' | 'color.skeleton.subtle' | 'color.chart.categorical.1.[default]' | 'color.chart.categorical.1.hovered' | 'color.chart.categorical.2.[default]' | 'color.chart.categorical.2.hovered' | 'color.chart.categorical.3.[default]' | 'color.chart.categorical.3.hovered' | 'color.chart.categorical.4.[default]' | 'color.chart.categorical.4.hovered' | 'color.chart.categorical.5.[default]' | 'color.chart.categorical.5.hovered' | 'color.chart.categorical.6.[default]' | 'color.chart.categorical.6.hovered' | 'color.chart.categorical.7.[default]' | 'color.chart.categorical.7.hovered' | 'color.chart.categorical.8.[default]' | 'color.chart.categorical.8.hovered' | 'color.chart.lime.bold.[default]' | 'color.chart.lime.bold.hovered' | 'color.chart.lime.bolder.[default]' | 'color.chart.lime.bolder.hovered' | 'color.chart.lime.boldest.[default]' | 'color.chart.lime.boldest.hovered' | 'color.chart.neutral.[default]' | 'color.chart.neutral.hovered' | 'color.chart.red.bold.[default]' | 'color.chart.red.bold.hovered' | 'color.chart.red.bolder.[default]' | 'color.chart.red.bolder.hovered' | 'color.chart.red.boldest.[default]' | 'color.chart.red.boldest.hovered' | 'color.chart.orange.bold.[default]' | 'color.chart.orange.bold.hovered' | 'color.chart.orange.bolder.[default]' | 'color.chart.orange.bolder.hovered' | 'color.chart.orange.boldest.[default]' | 'color.chart.orange.boldest.hovered' | 'color.chart.yellow.bold.[default]' | 'color.chart.yellow.bold.hovered' | 'color.chart.yellow.bolder.[default]' | 'color.chart.yellow.bolder.hovered' | 'color.chart.yellow.boldest.[default]' | 'color.chart.yellow.boldest.hovered' | 'color.chart.green.bold.[default]' | 'color.chart.green.bold.hovered' | 'color.chart.green.bolder.[default]' | 'color.chart.green.bolder.hovered' | 'color.chart.green.boldest.[default]' | 'color.chart.green.boldest.hovered' | 'color.chart.teal.bold.[default]' | 'color.chart.teal.bold.hovered' | 'color.chart.teal.bolder.[default]' | 'color.chart.teal.bolder.hovered' | 'color.chart.teal.boldest.[default]' | 'color.chart.teal.boldest.hovered' | 'color.chart.blue.bold.[default]' | 'color.chart.blue.bold.hovered' | 'color.chart.blue.bolder.[default]' | 'color.chart.blue.bolder.hovered' | 'color.chart.blue.boldest.[default]' | 'color.chart.blue.boldest.hovered' | 'color.chart.purple.bold.[default]' | 'color.chart.purple.bold.hovered' | 'color.chart.purple.bolder.[default]' | 'color.chart.purple.bolder.hovered' | 'color.chart.purple.boldest.[default]' | 'color.chart.purple.boldest.hovered' | 'color.chart.magenta.bold.[default]' | 'color.chart.magenta.bold.hovered' | 'color.chart.magenta.bolder.[default]' | 'color.chart.magenta.bolder.hovered' | 'color.chart.magenta.boldest.[default]' | 'color.chart.magenta.boldest.hovered' | 'color.chart.gray.bold.[default]' | 'color.chart.gray.bold.hovered' | 'color.chart.gray.bolder.[default]' | 'color.chart.gray.bolder.hovered' | 'color.chart.gray.boldest.[default]' | 'color.chart.gray.boldest.hovered' | 'color.chart.brand.[default]' | 'color.chart.brand.hovered' | 'color.chart.danger.[default].[default]' | 'color.chart.danger.[default].hovered' | 'color.chart.danger.bold.[default]' | 'color.chart.danger.bold.hovered' | 'color.chart.warning.[default].[default]' | 'color.chart.warning.[default].hovered' | 'color.chart.warning.bold.[default]' | 'color.chart.warning.bold.hovered' | 'color.chart.success.[default].[default]' | 'color.chart.success.[default].hovered' | 'color.chart.success.bold.[default]' | 'color.chart.success.bold.hovered' | 'color.chart.discovery.[default].[default]' | 'color.chart.discovery.[default].hovered' | 'color.chart.discovery.bold.[default]' | 'color.chart.discovery.bold.hovered' | 'color.chart.information.[default].[default]' | 'color.chart.information.[default].hovered' | 'color.chart.information.bold.[default]' | 'color.chart.information.bold.hovered' | 'elevation.surface.[default].[default]' | 'elevation.surface.[default].hovered' | 'elevation.surface.[default].pressed' | 'elevation.surface.overlay.[default]' | 'elevation.surface.overlay.hovered' | 'elevation.surface.overlay.pressed' | 'elevation.surface.raised.[default]' | 'elevation.surface.raised.hovered' | 'elevation.surface.raised.pressed' | 'elevation.surface.sunken' | 'elevation.shadow.overflow.[default]' | 'elevation.shadow.overflow.perimeter' | 'elevation.shadow.overflow.spread' | 'elevation.shadow.overlay' | 'elevation.shadow.raised' | 'opacity.disabled' | 'opacity.loading' | 'utility.UNSAFE.transparent' | 'border.radius.050' | 'border.radius.[default]' | 'border.radius.100' | 'border.radius.200' | 'border.radius.300' | 'border.radius.400' | 'border.radius.circle' | 'border.width.[default]' | 'border.width.indicator' | 'border.width.outline' | 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000' | 'font.family.monospace' | 'font.family.sans' | 'font.size.050' | 'font.size.075' | 'font.size.100' | 'font.size.200' | 'font.size.300' | 'font.size.400' | 'font.size.500' | 'font.size.600' | 'font.weight.bold' | 'font.weight.medium' | 'font.weight.regular' | 'font.weight.semibold' | 'font.lineHeight.100' | 'font.lineHeight.200' | 'font.lineHeight.300' | 'font.lineHeight.400' | 'font.lineHeight.500' | 'font.lineHeight.600';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
3
|
-
* @codegen <<SignedSource::
|
|
3
|
+
* @codegen <<SignedSource::428d20219eed5e70775656c5e02efe21>>
|
|
4
4
|
* @codegenCommand yarn build tokens
|
|
5
5
|
*/
|
|
6
|
-
export type ActiveTokens = 'color.text' | 'color.text.accent.lime' | 'color.text.accent.lime.bolder' | 'color.text.accent.red' | 'color.text.accent.red.bolder' | 'color.text.accent.orange' | 'color.text.accent.orange.bolder' | 'color.text.accent.yellow' | 'color.text.accent.yellow.bolder' | 'color.text.accent.green' | 'color.text.accent.green.bolder' | 'color.text.accent.teal' | 'color.text.accent.teal.bolder' | 'color.text.accent.blue' | 'color.text.accent.blue.bolder' | 'color.text.accent.purple' | 'color.text.accent.purple.bolder' | 'color.text.accent.magenta' | 'color.text.accent.magenta.bolder' | 'color.text.accent.gray' | 'color.text.accent.gray.bolder' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.selected' | 'color.text.brand' | 'color.text.danger' | 'color.text.warning' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.text.subtlest' | 'color.text.subtle' | 'color.link' | 'color.link.pressed' | 'color.icon' | 'color.icon.accent.lime' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.teal' | 'color.icon.accent.blue' | 'color.icon.accent.purple' | 'color.icon.accent.magenta' | 'color.icon.accent.gray' | 'color.icon.disabled' | 'color.icon.inverse' | 'color.icon.selected' | 'color.icon.brand' | 'color.icon.danger' | 'color.icon.warning' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.icon.subtle' | 'color.border' | 'color.border.accent.lime' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.teal' | 'color.border.accent.blue' | 'color.border.accent.purple' | 'color.border.accent.magenta' | 'color.border.accent.gray' | 'color.border.disabled' | 'color.border.focused' | 'color.border.input' | 'color.border.inverse' | 'color.border.selected' | 'color.border.brand' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.border.bold' | 'color.background.accent.lime.subtlest' | 'color.background.accent.lime.subtler' | 'color.background.accent.lime.subtle' | 'color.background.accent.lime.bolder' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.accent.gray.subtlest' | 'color.background.accent.gray.subtler' | 'color.background.accent.gray.subtle' | 'color.background.accent.gray.bolder' | 'color.background.disabled' | 'color.background.input' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.inverse.subtle' | 'color.background.inverse.subtle.hovered' | 'color.background.inverse.subtle.pressed' | 'color.background.neutral' | 'color.background.neutral.hovered' | 'color.background.neutral.pressed' | 'color.background.neutral.subtle' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.selected' | 'color.background.selected.hovered' | 'color.background.selected.pressed' | 'color.background.selected.bold' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.brand.bold' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.danger' | 'color.background.danger.hovered' | 'color.background.danger.pressed' | 'color.background.danger.bold' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning' | 'color.background.warning.hovered' | 'color.background.warning.pressed' | 'color.background.warning.bold' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success' | 'color.background.success.hovered' | 'color.background.success.pressed' | 'color.background.success.bold' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery' | 'color.background.discovery.hovered' | 'color.background.discovery.pressed' | 'color.background.discovery.bold' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information' | 'color.background.information.hovered' | 'color.background.information.pressed' | 'color.background.information.bold' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket' | 'color.blanket.selected' | 'color.blanket.danger' | 'color.interaction.hovered' | 'color.interaction.pressed' | 'color.skeleton' | 'color.skeleton.subtle' | 'color.chart.categorical.1' | 'color.chart.categorical.1.hovered' | 'color.chart.categorical.2' | 'color.chart.categorical.2.hovered' | 'color.chart.categorical.3' | 'color.chart.categorical.3.hovered' | 'color.chart.categorical.4' | 'color.chart.categorical.4.hovered' | 'color.chart.categorical.5' | 'color.chart.categorical.5.hovered' | 'color.chart.categorical.6' | 'color.chart.categorical.6.hovered' | 'color.chart.categorical.7' | 'color.chart.categorical.7.hovered' | 'color.chart.categorical.8' | 'color.chart.categorical.8.hovered' | 'color.chart.lime.bold' | 'color.chart.lime.bold.hovered' | 'color.chart.lime.bolder' | 'color.chart.lime.bolder.hovered' | 'color.chart.lime.boldest' | 'color.chart.lime.boldest.hovered' | 'color.chart.neutral' | 'color.chart.neutral.hovered' | 'color.chart.red.bold' | 'color.chart.red.bold.hovered' | 'color.chart.red.bolder' | 'color.chart.red.bolder.hovered' | 'color.chart.red.boldest' | 'color.chart.red.boldest.hovered' | 'color.chart.orange.bold' | 'color.chart.orange.bold.hovered' | 'color.chart.orange.bolder' | 'color.chart.orange.bolder.hovered' | 'color.chart.orange.boldest' | 'color.chart.orange.boldest.hovered' | 'color.chart.yellow.bold' | 'color.chart.yellow.bold.hovered' | 'color.chart.yellow.bolder' | 'color.chart.yellow.bolder.hovered' | 'color.chart.yellow.boldest' | 'color.chart.yellow.boldest.hovered' | 'color.chart.green.bold' | 'color.chart.green.bold.hovered' | 'color.chart.green.bolder' | 'color.chart.green.bolder.hovered' | 'color.chart.green.boldest' | 'color.chart.green.boldest.hovered' | 'color.chart.teal.bold' | 'color.chart.teal.bold.hovered' | 'color.chart.teal.bolder' | 'color.chart.teal.bolder.hovered' | 'color.chart.teal.boldest' | 'color.chart.teal.boldest.hovered' | 'color.chart.blue.bold' | 'color.chart.blue.bold.hovered' | 'color.chart.blue.bolder' | 'color.chart.blue.bolder.hovered' | 'color.chart.blue.boldest' | 'color.chart.blue.boldest.hovered' | 'color.chart.purple.bold' | 'color.chart.purple.bold.hovered' | 'color.chart.purple.bolder' | 'color.chart.purple.bolder.hovered' | 'color.chart.purple.boldest' | 'color.chart.purple.boldest.hovered' | 'color.chart.magenta.bold' | 'color.chart.magenta.bold.hovered' | 'color.chart.magenta.bolder' | 'color.chart.magenta.bolder.hovered' | 'color.chart.magenta.boldest' | 'color.chart.magenta.boldest.hovered' | 'color.chart.gray.bold' | 'color.chart.gray.bold.hovered' | 'color.chart.gray.bolder' | 'color.chart.gray.bolder.hovered' | 'color.chart.gray.boldest' | 'color.chart.gray.boldest.hovered' | 'color.chart.brand' | 'color.chart.brand.hovered' | 'color.chart.danger' | 'color.chart.danger.hovered' | 'color.chart.danger.bold' | 'color.chart.danger.bold.hovered' | 'color.chart.warning' | 'color.chart.warning.hovered' | 'color.chart.warning.bold' | 'color.chart.warning.bold.hovered' | 'color.chart.success' | 'color.chart.success.hovered' | 'color.chart.success.bold' | 'color.chart.success.bold.hovered' | 'color.chart.discovery' | 'color.chart.discovery.hovered' | 'color.chart.discovery.bold' | 'color.chart.discovery.bold.hovered' | 'color.chart.information' | 'color.chart.information.hovered' | 'color.chart.information.bold' | 'color.chart.information.bold.hovered' | 'elevation.surface' | 'elevation.surface.hovered' | 'elevation.surface.pressed' | 'elevation.surface.overlay' | 'elevation.surface.overlay.hovered' | 'elevation.surface.overlay.pressed' | 'elevation.surface.raised' | 'elevation.surface.raised.hovered' | 'elevation.surface.raised.pressed' | 'elevation.surface.sunken' | 'elevation.shadow.overflow' | 'elevation.shadow.overflow.perimeter' | 'elevation.shadow.overflow.spread' | 'elevation.shadow.overlay' | 'elevation.shadow.raised' | 'opacity.disabled' | 'opacity.loading' | 'utility.UNSAFE.transparent' | 'border.radius.050' | 'border.radius' | 'border.radius.100' | 'border.radius.200' | 'border.radius.300' | 'border.radius.400' | 'border.radius.circle' | 'border.width' | 'border.width.indicator' | 'border.width.outline' | 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000' | 'font.family.monospace' | 'font.family.sans' | 'font.size.050' | 'font.size.075' | 'font.size.100' | 'font.size.200' | 'font.size.300' | 'font.size.400' | 'font.size.500' | 'font.size.600' | 'font.weight.bold' | 'font.weight.medium' | 'font.weight.regular' | 'font.weight.semibold' | 'font.lineHeight.100' | 'font.lineHeight.200' | 'font.lineHeight.300' | 'font.lineHeight.400' | 'font.lineHeight.500' | 'font.lineHeight.600';
|
|
6
|
+
export type ActiveTokens = 'color.text' | 'color.text.accent.lime' | 'color.text.accent.lime.bolder' | 'color.text.accent.red' | 'color.text.accent.red.bolder' | 'color.text.accent.orange' | 'color.text.accent.orange.bolder' | 'color.text.accent.yellow' | 'color.text.accent.yellow.bolder' | 'color.text.accent.green' | 'color.text.accent.green.bolder' | 'color.text.accent.teal' | 'color.text.accent.teal.bolder' | 'color.text.accent.blue' | 'color.text.accent.blue.bolder' | 'color.text.accent.purple' | 'color.text.accent.purple.bolder' | 'color.text.accent.magenta' | 'color.text.accent.magenta.bolder' | 'color.text.accent.gray' | 'color.text.accent.gray.bolder' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.selected' | 'color.text.brand' | 'color.text.danger' | 'color.text.warning' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.text.subtlest' | 'color.text.subtle' | 'color.link' | 'color.link.pressed' | 'color.icon' | 'color.icon.accent.lime' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.teal' | 'color.icon.accent.blue' | 'color.icon.accent.purple' | 'color.icon.accent.magenta' | 'color.icon.accent.gray' | 'color.icon.disabled' | 'color.icon.inverse' | 'color.icon.selected' | 'color.icon.brand' | 'color.icon.danger' | 'color.icon.warning' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.icon.subtle' | 'color.border' | 'color.border.accent.lime' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.teal' | 'color.border.accent.blue' | 'color.border.accent.purple' | 'color.border.accent.magenta' | 'color.border.accent.gray' | 'color.border.disabled' | 'color.border.focused' | 'color.border.input' | 'color.border.inverse' | 'color.border.selected' | 'color.border.brand' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.border.bold' | 'color.background.accent.lime.subtlest' | 'color.background.accent.lime.subtler' | 'color.background.accent.lime.subtle' | 'color.background.accent.lime.bolder' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.accent.gray.subtlest' | 'color.background.accent.gray.subtler' | 'color.background.accent.gray.subtle' | 'color.background.accent.gray.bolder' | 'color.background.disabled' | 'color.background.input' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.inverse.subtle' | 'color.background.inverse.subtle.hovered' | 'color.background.inverse.subtle.pressed' | 'color.background.neutral' | 'color.background.neutral.hovered' | 'color.background.neutral.pressed' | 'color.background.neutral.subtle' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.selected' | 'color.background.selected.hovered' | 'color.background.selected.pressed' | 'color.background.selected.bold' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.brand.subtlest' | 'color.background.brand.subtlest.hovered' | 'color.background.brand.subtlest.pressed' | 'color.background.brand.bold' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.brand.boldest' | 'color.background.brand.boldest.hovered' | 'color.background.brand.boldest.pressed' | 'color.background.danger' | 'color.background.danger.hovered' | 'color.background.danger.pressed' | 'color.background.danger.bold' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning' | 'color.background.warning.hovered' | 'color.background.warning.pressed' | 'color.background.warning.bold' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success' | 'color.background.success.hovered' | 'color.background.success.pressed' | 'color.background.success.bold' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery' | 'color.background.discovery.hovered' | 'color.background.discovery.pressed' | 'color.background.discovery.bold' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information' | 'color.background.information.hovered' | 'color.background.information.pressed' | 'color.background.information.bold' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket' | 'color.blanket.selected' | 'color.blanket.danger' | 'color.interaction.hovered' | 'color.interaction.pressed' | 'color.skeleton' | 'color.skeleton.subtle' | 'color.chart.categorical.1' | 'color.chart.categorical.1.hovered' | 'color.chart.categorical.2' | 'color.chart.categorical.2.hovered' | 'color.chart.categorical.3' | 'color.chart.categorical.3.hovered' | 'color.chart.categorical.4' | 'color.chart.categorical.4.hovered' | 'color.chart.categorical.5' | 'color.chart.categorical.5.hovered' | 'color.chart.categorical.6' | 'color.chart.categorical.6.hovered' | 'color.chart.categorical.7' | 'color.chart.categorical.7.hovered' | 'color.chart.categorical.8' | 'color.chart.categorical.8.hovered' | 'color.chart.lime.bold' | 'color.chart.lime.bold.hovered' | 'color.chart.lime.bolder' | 'color.chart.lime.bolder.hovered' | 'color.chart.lime.boldest' | 'color.chart.lime.boldest.hovered' | 'color.chart.neutral' | 'color.chart.neutral.hovered' | 'color.chart.red.bold' | 'color.chart.red.bold.hovered' | 'color.chart.red.bolder' | 'color.chart.red.bolder.hovered' | 'color.chart.red.boldest' | 'color.chart.red.boldest.hovered' | 'color.chart.orange.bold' | 'color.chart.orange.bold.hovered' | 'color.chart.orange.bolder' | 'color.chart.orange.bolder.hovered' | 'color.chart.orange.boldest' | 'color.chart.orange.boldest.hovered' | 'color.chart.yellow.bold' | 'color.chart.yellow.bold.hovered' | 'color.chart.yellow.bolder' | 'color.chart.yellow.bolder.hovered' | 'color.chart.yellow.boldest' | 'color.chart.yellow.boldest.hovered' | 'color.chart.green.bold' | 'color.chart.green.bold.hovered' | 'color.chart.green.bolder' | 'color.chart.green.bolder.hovered' | 'color.chart.green.boldest' | 'color.chart.green.boldest.hovered' | 'color.chart.teal.bold' | 'color.chart.teal.bold.hovered' | 'color.chart.teal.bolder' | 'color.chart.teal.bolder.hovered' | 'color.chart.teal.boldest' | 'color.chart.teal.boldest.hovered' | 'color.chart.blue.bold' | 'color.chart.blue.bold.hovered' | 'color.chart.blue.bolder' | 'color.chart.blue.bolder.hovered' | 'color.chart.blue.boldest' | 'color.chart.blue.boldest.hovered' | 'color.chart.purple.bold' | 'color.chart.purple.bold.hovered' | 'color.chart.purple.bolder' | 'color.chart.purple.bolder.hovered' | 'color.chart.purple.boldest' | 'color.chart.purple.boldest.hovered' | 'color.chart.magenta.bold' | 'color.chart.magenta.bold.hovered' | 'color.chart.magenta.bolder' | 'color.chart.magenta.bolder.hovered' | 'color.chart.magenta.boldest' | 'color.chart.magenta.boldest.hovered' | 'color.chart.gray.bold' | 'color.chart.gray.bold.hovered' | 'color.chart.gray.bolder' | 'color.chart.gray.bolder.hovered' | 'color.chart.gray.boldest' | 'color.chart.gray.boldest.hovered' | 'color.chart.brand' | 'color.chart.brand.hovered' | 'color.chart.danger' | 'color.chart.danger.hovered' | 'color.chart.danger.bold' | 'color.chart.danger.bold.hovered' | 'color.chart.warning' | 'color.chart.warning.hovered' | 'color.chart.warning.bold' | 'color.chart.warning.bold.hovered' | 'color.chart.success' | 'color.chart.success.hovered' | 'color.chart.success.bold' | 'color.chart.success.bold.hovered' | 'color.chart.discovery' | 'color.chart.discovery.hovered' | 'color.chart.discovery.bold' | 'color.chart.discovery.bold.hovered' | 'color.chart.information' | 'color.chart.information.hovered' | 'color.chart.information.bold' | 'color.chart.information.bold.hovered' | 'elevation.surface' | 'elevation.surface.hovered' | 'elevation.surface.pressed' | 'elevation.surface.overlay' | 'elevation.surface.overlay.hovered' | 'elevation.surface.overlay.pressed' | 'elevation.surface.raised' | 'elevation.surface.raised.hovered' | 'elevation.surface.raised.pressed' | 'elevation.surface.sunken' | 'elevation.shadow.overflow' | 'elevation.shadow.overflow.perimeter' | 'elevation.shadow.overflow.spread' | 'elevation.shadow.overlay' | 'elevation.shadow.raised' | 'opacity.disabled' | 'opacity.loading' | 'utility.UNSAFE.transparent' | 'border.radius.050' | 'border.radius' | 'border.radius.100' | 'border.radius.200' | 'border.radius.300' | 'border.radius.400' | 'border.radius.circle' | 'border.width' | 'border.width.indicator' | 'border.width.outline' | 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000' | 'font.family.monospace' | 'font.family.sans' | 'font.size.050' | 'font.size.075' | 'font.size.100' | 'font.size.200' | 'font.size.300' | 'font.size.400' | 'font.size.500' | 'font.size.600' | 'font.weight.bold' | 'font.weight.medium' | 'font.weight.regular' | 'font.weight.semibold' | 'font.lineHeight.100' | 'font.lineHeight.200' | 'font.lineHeight.300' | 'font.lineHeight.400' | 'font.lineHeight.500' | 'font.lineHeight.600';
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export declare const THEME_DATA_ATTRIBUTE = "data-theme";
|
|
2
2
|
export declare const COLOR_MODE_ATTRIBUTE = "data-color-mode";
|
|
3
|
+
export declare const CUSTOM_THEME_ATTRIBUTE = "data-custom-theme";
|
|
3
4
|
export declare const DEFAULT_THEME = "light";
|
|
4
5
|
export declare const CSS_PREFIX = "ds";
|
|
5
6
|
export declare const CSS_VAR_FULL: string[];
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { ThemeState, ThemeStyles } from './set-global-theme';
|
|
2
|
+
export declare const CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD = 10;
|
|
3
|
+
type HEX = `#${string}`;
|
|
4
|
+
export type CSSColor = HEX;
|
|
5
|
+
export interface CustomBrandSchema {
|
|
6
|
+
brandColor: CSSColor;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
*
|
|
10
|
+
* @param themeSchema The schema of available themes
|
|
11
|
+
* @returns a string with the CSS for the custom theme
|
|
12
|
+
*/
|
|
13
|
+
/**
|
|
14
|
+
* Takes a color mode and custom branding options, and returns an array of objects for use in applying custom styles to the document head.
|
|
15
|
+
* Only supplies the color themes necessary for initial render, based on the current themeState. I.e. if in light mode, dark mode themes are not returned.
|
|
16
|
+
*
|
|
17
|
+
* @param {Object<string, string>} themeState The themes and color mode that should be applied.
|
|
18
|
+
* @param {string} themeState.colorMode Determines which color theme is applied
|
|
19
|
+
* @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
|
|
20
|
+
*
|
|
21
|
+
* @returns A Promise of an object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
|
|
22
|
+
* If an error is encountered while loading themes, the themes array will be empty.
|
|
23
|
+
*/
|
|
24
|
+
export declare function getCustomThemeStyles(themeState: Partial<ThemeState> & {
|
|
25
|
+
UNSAFE_themeOptions: CustomBrandSchema;
|
|
26
|
+
}): Promise<ThemeStyles[]>;
|
|
27
|
+
export declare function loadAndAppendCustomThemeCss(themeState: Partial<ThemeState> & {
|
|
28
|
+
UNSAFE_themeOptions: CustomBrandSchema;
|
|
29
|
+
}): Promise<void>;
|
|
30
|
+
export {};
|
package/dist/types/index.d.ts
CHANGED
|
@@ -6,6 +6,7 @@ export type { CSSToken } from './artifacts/token-names';
|
|
|
6
6
|
export type { ActiveTokens } from './artifacts/types';
|
|
7
7
|
export type { ThemeColorModes, Themes, ThemeIds } from './theme-config';
|
|
8
8
|
export type { Groups, OpacityToken, PaintToken, RawToken, ShadowToken, SpacingToken, ShapeToken, } from './types';
|
|
9
|
+
export type { CustomBrandSchema } from './custom-theme';
|
|
9
10
|
export { default as themeConfig } from './theme-config';
|
|
10
11
|
export { useThemeObserver } from './use-theme-observer';
|
|
11
12
|
export { ThemeMutationObserver } from './theme-mutation-observer';
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { UnbindFn } from 'bind-event-listener';
|
|
2
|
+
import { CustomBrandSchema } from './custom-theme';
|
|
2
3
|
import { ThemeColorModes, ThemeIds, ThemeIdsWithOverrides } from './theme-config';
|
|
3
4
|
export interface ThemeState {
|
|
4
5
|
light: Extract<ThemeIds, 'light' | 'dark' | 'legacy-dark' | 'legacy-light'>;
|
|
@@ -7,10 +8,12 @@ export interface ThemeState {
|
|
|
7
8
|
shape?: Extract<ThemeIds, 'shape'>;
|
|
8
9
|
spacing?: Extract<ThemeIds, 'spacing'>;
|
|
9
10
|
typography?: Extract<ThemeIds, 'typography'>;
|
|
11
|
+
UNSAFE_themeOptions?: CustomBrandSchema;
|
|
10
12
|
}
|
|
11
13
|
export interface ActiveThemeState extends ThemeState {
|
|
12
14
|
colorMode: Exclude<ThemeColorModes, 'auto'>;
|
|
13
15
|
}
|
|
16
|
+
export declare const themeStateDefaults: ThemeState;
|
|
14
17
|
/**
|
|
15
18
|
* Sets the theme globally at runtime. This updates the `data-theme` and `data-color-mode` attributes on your page's <html> tag.
|
|
16
19
|
*
|
|
@@ -21,6 +24,7 @@ export interface ActiveThemeState extends ThemeState {
|
|
|
21
24
|
* @param {string} themeState.shape The shape theme to be applied.
|
|
22
25
|
* @param {string} themeState.spacing The spacing theme to be applied.
|
|
23
26
|
* @param {string} themeState.typography The typography theme to be applied.
|
|
27
|
+
* @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
|
|
24
28
|
* @param {function} themeLoader Callback function used to override the default theme loading functionality.
|
|
25
29
|
*
|
|
26
30
|
* @returns A Promise of an unbind function, that can be used to stop listening for changes to system theme.
|
|
@@ -30,7 +34,7 @@ export interface ActiveThemeState extends ThemeState {
|
|
|
30
34
|
* setGlobalTheme({colorMode: 'auto', light: 'light', dark: 'dark', spacing: 'spacing'});
|
|
31
35
|
* ```
|
|
32
36
|
*/
|
|
33
|
-
declare const setGlobalTheme: ({ colorMode, dark, light, shape, spacing, typography, }?: Partial<ThemeState>, themeLoader?: ((id: ThemeIdsWithOverrides) => void | Promise<void>) | undefined) => Promise<UnbindFn>;
|
|
37
|
+
declare const setGlobalTheme: ({ colorMode, dark, light, shape, spacing, typography, UNSAFE_themeOptions, }?: Partial<ThemeState>, themeLoader?: ((id: ThemeIdsWithOverrides) => void | Promise<void>) | undefined) => Promise<UnbindFn>;
|
|
34
38
|
export interface ThemeStyles {
|
|
35
39
|
id: ThemeIdsWithOverrides;
|
|
36
40
|
attrs: Record<string, string>;
|
|
@@ -47,9 +51,10 @@ export interface ThemeStyles {
|
|
|
47
51
|
* @param {string} themeState.shape The shape theme to be applied.
|
|
48
52
|
* @param {string} themeState.spacing The spacing theme to be applied.
|
|
49
53
|
* @param {string} themeState.typography The typography theme to be applied.
|
|
54
|
+
* @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
|
|
50
55
|
*
|
|
51
56
|
* @returns A Promise of an object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
|
|
52
|
-
* If an error is encountered while loading themes, the themes
|
|
57
|
+
* If an error is encountered while loading themes, the themes array will be empty.
|
|
53
58
|
*/
|
|
54
59
|
export declare const getThemeStyles: (preferences?: Partial<ThemeState> | 'all') => Promise<ThemeStyles[]>;
|
|
55
60
|
/**
|
|
@@ -62,10 +67,11 @@ export declare const getThemeStyles: (preferences?: Partial<ThemeState> | 'all')
|
|
|
62
67
|
* @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
|
|
63
68
|
* @param {string} themeState.spacing The spacing theme to be applied.
|
|
64
69
|
* @param {string} themeState.typography The typography theme to be applied.
|
|
70
|
+
* @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
|
|
65
71
|
*
|
|
66
72
|
* @returns {Object} Object of HTML attributes to be applied to the document root
|
|
67
73
|
*/
|
|
68
|
-
export declare const getThemeHtmlAttrs: ({ colorMode, dark, light, shape, spacing, typography, }?: Partial<ThemeState>) => Record<string, string>;
|
|
74
|
+
export declare const getThemeHtmlAttrs: ({ colorMode, dark, light, shape, spacing, typography, UNSAFE_themeOptions, }?: Partial<ThemeState>) => Record<string, string>;
|
|
69
75
|
/**
|
|
70
76
|
* Provides a script that, when executed before paint, sets the `data-color-mode` attribute based on the current system theme,
|
|
71
77
|
* to enable SSR support for automatic theme switching, avoid a flash of un-themed content on first paint.
|
package/dist/types/types.d.ts
CHANGED
|
@@ -184,11 +184,21 @@ export interface BackgroundColorTokenSchema<BaseToken> {
|
|
|
184
184
|
};
|
|
185
185
|
};
|
|
186
186
|
brand: {
|
|
187
|
+
subtlest: {
|
|
188
|
+
'[default]': PaintToken<BaseToken>;
|
|
189
|
+
hovered: PaintToken<BaseToken>;
|
|
190
|
+
pressed: PaintToken<BaseToken>;
|
|
191
|
+
};
|
|
187
192
|
bold: {
|
|
188
193
|
'[default]': PaintToken<BaseToken>;
|
|
189
194
|
hovered: PaintToken<BaseToken>;
|
|
190
195
|
pressed: PaintToken<BaseToken>;
|
|
191
196
|
};
|
|
197
|
+
boldest: {
|
|
198
|
+
'[default]': PaintToken<BaseToken>;
|
|
199
|
+
hovered: PaintToken<BaseToken>;
|
|
200
|
+
pressed: PaintToken<BaseToken>;
|
|
201
|
+
};
|
|
192
202
|
};
|
|
193
203
|
selected: {
|
|
194
204
|
'[default]': {
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export declare const isValidBrandHex: (hex: string) => boolean;
|
|
2
|
+
export declare function rgbToHex(r: number, g: number, b: number): string;
|
|
3
|
+
export declare function getAlpha(hex: string): number;
|
|
4
|
+
export declare function hexToRgbA(hex: string): [number, number, number, number];
|
|
5
|
+
export declare function hexToRgb(hex: string): [number, number, number];
|
|
6
|
+
export declare function hexToHSL(hex: string): [number, number, number];
|
|
7
|
+
export declare function HSLToRGB(h: number, s: number, l: number): [number, number, number];
|
|
8
|
+
export declare function relativeLuminanceW3C(r: number, g: number, b: number): number;
|
|
9
|
+
export declare function getContrastRatio(foreground: string, background: string): number;
|
|
10
|
+
export declare function deltaE(rgbA: number[], rgbB: number[]): number;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import tokens from '../artifacts/token-names';
|
|
2
|
+
import { CustomBrandSchema } from '../custom-theme';
|
|
3
|
+
import { ThemeColorModes } from '../theme-config';
|
|
4
|
+
type Token = keyof typeof tokens;
|
|
5
|
+
type ThemeAttributeId = 'light' | 'dark';
|
|
6
|
+
export declare function findMissingCustomStyleElements(UNSAFE_themeOptions: CustomBrandSchema, mode: ThemeColorModes): ThemeAttributeId[];
|
|
7
|
+
export declare function limitSizeOfCustomStyleElements(sizeThreshold: number): void;
|
|
8
|
+
export declare function reduceTokenMap(tokenMap: {
|
|
9
|
+
[key in Token]?: number;
|
|
10
|
+
}, themeRamp: string[]): string;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import tokens from '../artifacts/token-names';
|
|
2
|
+
type Token = keyof typeof tokens;
|
|
3
|
+
interface AdditionalContrastCheck {
|
|
4
|
+
foreground: Token;
|
|
5
|
+
backgroundLight: Token;
|
|
6
|
+
backgroundDark: Token;
|
|
7
|
+
desiredContrast: number;
|
|
8
|
+
updatedTokens: Token[];
|
|
9
|
+
}
|
|
10
|
+
export declare const additionalChecks: AdditionalContrastCheck[];
|
|
11
|
+
export declare const additionalContrastChecker: ({ customThemeTokenMap, mode, themeRamp, }: {
|
|
12
|
+
customThemeTokenMap: {
|
|
13
|
+
[key: string]: number;
|
|
14
|
+
};
|
|
15
|
+
mode: 'light' | 'dark';
|
|
16
|
+
themeRamp: string[];
|
|
17
|
+
}) => {
|
|
18
|
+
[key: string]: number;
|
|
19
|
+
};
|
|
20
|
+
export {};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import tokens from '../artifacts/token-names';
|
|
2
|
+
import { CSSColor } from '../custom-theme';
|
|
3
|
+
import { ThemeColorModes } from '../theme-config';
|
|
4
|
+
type Token = keyof typeof tokens;
|
|
5
|
+
type TokenMap = {
|
|
6
|
+
[key in Token]?: number;
|
|
7
|
+
};
|
|
8
|
+
type Mode = 'light' | 'dark';
|
|
9
|
+
export declare const getClosestColorIndex: (themeRamp: CSSColor[], brandColor: CSSColor) => number;
|
|
10
|
+
export declare const generateColors: (brandColor: CSSColor) => CSSColor[];
|
|
11
|
+
export declare const generateTokenMap: (brandColor: CSSColor, mode: ThemeColorModes, themeRamp?: CSSColor[]) => {
|
|
12
|
+
light?: TokenMap | undefined;
|
|
13
|
+
dark?: TokenMap | undefined;
|
|
14
|
+
};
|
|
15
|
+
export declare const generateTokenMapWithContrastCheck: (brandColor: CSSColor, mode: ThemeColorModes, themeRamp?: CSSColor[]) => {
|
|
16
|
+
light?: TokenMap | undefined;
|
|
17
|
+
dark?: TokenMap | undefined;
|
|
18
|
+
};
|
|
19
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const hash: (str: string) => string;
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Below lines are copied from @material/material-color-utilities.
|
|
3
|
+
* Do not modify it.
|
|
4
|
+
*/
|
|
5
|
+
/**
|
|
6
|
+
* Converts a color from RGB components to ARGB format.
|
|
7
|
+
*/
|
|
8
|
+
export declare function argbFromRgb(red: number, green: number, blue: number): number;
|
|
9
|
+
/**
|
|
10
|
+
* Converts a color from linear RGB components to ARGB format.
|
|
11
|
+
*/
|
|
12
|
+
export declare function argbFromLinrgb(linrgb: number[]): number;
|
|
13
|
+
/**
|
|
14
|
+
* Returns the alpha component of a color in ARGB format.
|
|
15
|
+
*/
|
|
16
|
+
export declare function alphaFromArgb(argb: number): number;
|
|
17
|
+
/**
|
|
18
|
+
* Returns the red component of a color in ARGB format.
|
|
19
|
+
*/
|
|
20
|
+
export declare function redFromArgb(argb: number): number;
|
|
21
|
+
/**
|
|
22
|
+
* Returns the green component of a color in ARGB format.
|
|
23
|
+
*/
|
|
24
|
+
export declare function greenFromArgb(argb: number): number;
|
|
25
|
+
/**
|
|
26
|
+
* Returns the blue component of a color in ARGB format.
|
|
27
|
+
*/
|
|
28
|
+
export declare function blueFromArgb(argb: number): number;
|
|
29
|
+
/**
|
|
30
|
+
* Returns whether a color in ARGB format is opaque.
|
|
31
|
+
*/
|
|
32
|
+
export declare function isOpaque(argb: number): boolean;
|
|
33
|
+
/**
|
|
34
|
+
* Converts a color from ARGB to XYZ.
|
|
35
|
+
*/
|
|
36
|
+
export declare function argbFromXyz(x: number, y: number, z: number): number;
|
|
37
|
+
/**
|
|
38
|
+
* Converts a color from XYZ to ARGB.
|
|
39
|
+
*/
|
|
40
|
+
export declare function xyzFromArgb(argb: number): number[];
|
|
41
|
+
/**
|
|
42
|
+
* Converts an L* value to an ARGB representation.
|
|
43
|
+
*
|
|
44
|
+
* @param lstar L* in L*a*b*
|
|
45
|
+
* @return ARGB representation of grayscale color with lightness
|
|
46
|
+
* matching L*
|
|
47
|
+
*/
|
|
48
|
+
export declare function argbFromLstar(lstar: number): number;
|
|
49
|
+
/**
|
|
50
|
+
* Computes the L* value of a color in ARGB representation.
|
|
51
|
+
*
|
|
52
|
+
* @param argb ARGB representation of a color
|
|
53
|
+
* @return L*, from L*a*b*, coordinate of the color
|
|
54
|
+
*/
|
|
55
|
+
export declare function lstarFromArgb(argb: number): number;
|
|
56
|
+
/**
|
|
57
|
+
* Converts an L* value to a Y value.
|
|
58
|
+
*
|
|
59
|
+
* L* in L*a*b* and Y in XYZ measure the same quantity, luminance.
|
|
60
|
+
*
|
|
61
|
+
* L* measures perceptual luminance, a linear scale. Y in XYZ
|
|
62
|
+
* measures relative luminance, a logarithmic scale.
|
|
63
|
+
*
|
|
64
|
+
* @param lstar L* in L*a*b*
|
|
65
|
+
* @return Y in XYZ
|
|
66
|
+
*/
|
|
67
|
+
export declare function yFromLstar(lstar: number): number;
|
|
68
|
+
/**
|
|
69
|
+
* Converts a Y value to an L* value.
|
|
70
|
+
*
|
|
71
|
+
* L* in L*a*b* and Y in XYZ measure the same quantity, luminance.
|
|
72
|
+
*
|
|
73
|
+
* L* measures perceptual luminance, a linear scale. Y in XYZ
|
|
74
|
+
* measures relative luminance, a logarithmic scale.
|
|
75
|
+
*
|
|
76
|
+
* @param y Y in XYZ
|
|
77
|
+
* @return L* in L*a*b*
|
|
78
|
+
*/
|
|
79
|
+
export declare function lstarFromY(y: number): number;
|
|
80
|
+
/**
|
|
81
|
+
* Linearizes an RGB component.
|
|
82
|
+
*
|
|
83
|
+
* @param rgbComponent 0 <= rgb_component <= 255, represents R/G/B
|
|
84
|
+
* channel
|
|
85
|
+
* @return 0.0 <= output <= 100.0, color channel converted to
|
|
86
|
+
* linear RGB space
|
|
87
|
+
*/
|
|
88
|
+
export declare function linearized(rgbComponent: number): number;
|
|
89
|
+
/**
|
|
90
|
+
* Delinearizes an RGB component.
|
|
91
|
+
*
|
|
92
|
+
* @param rgbComponent 0.0 <= rgb_component <= 100.0, represents
|
|
93
|
+
* linear R/G/B channel
|
|
94
|
+
* @return 0 <= output <= 255, color channel converted to regular
|
|
95
|
+
* RGB space
|
|
96
|
+
*/
|
|
97
|
+
export declare function delinearized(rgbComponent: number): number;
|
|
98
|
+
/**
|
|
99
|
+
* Returns the standard white point; white on a sunny day.
|
|
100
|
+
*
|
|
101
|
+
* @return The white point
|
|
102
|
+
*/
|
|
103
|
+
export declare function whitePointD65(): number[];
|
|
104
|
+
/**
|
|
105
|
+
* RGBA component
|
|
106
|
+
*
|
|
107
|
+
* @param r Red value should be between 0-255
|
|
108
|
+
* @param g Green value should be between 0-255
|
|
109
|
+
* @param b Blue value should be between 0-255
|
|
110
|
+
* @param a Alpha value should be between 0-255
|
|
111
|
+
*/
|
|
112
|
+
export interface Rgba {
|
|
113
|
+
r: number;
|
|
114
|
+
g: number;
|
|
115
|
+
b: number;
|
|
116
|
+
a: number;
|
|
117
|
+
}
|
|
118
|
+
/**
|
|
119
|
+
* Return RGBA from a given int32 color
|
|
120
|
+
*
|
|
121
|
+
* @param argb ARGB representation of a int32 color.
|
|
122
|
+
* @return RGBA representation of a int32 color.
|
|
123
|
+
*/
|
|
124
|
+
export declare function rgbaFromArgb(argb: number): Rgba;
|
|
125
|
+
/**
|
|
126
|
+
* Return int32 color from a given RGBA component
|
|
127
|
+
*
|
|
128
|
+
* @param rgba RGBA representation of a int32 color.
|
|
129
|
+
* @returns ARGB representation of a int32 color.
|
|
130
|
+
*/
|
|
131
|
+
export declare function argbFromRgba({ r, g, b, a }: Rgba): number;
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Below lines are copied from @material/material-color-utilities.
|
|
3
|
+
* Do not modify it.
|
|
4
|
+
*/
|
|
5
|
+
/**
|
|
6
|
+
* Utility methods for calculating contrast given two colors, or calculating a
|
|
7
|
+
* color given one color and a contrast ratio.
|
|
8
|
+
*
|
|
9
|
+
* Contrast ratio is calculated using XYZ's Y. When linearized to match human
|
|
10
|
+
* perception, Y becomes HCT's tone and L*a*b*'s' L*. Informally, this is the
|
|
11
|
+
* lightness of a color.
|
|
12
|
+
*
|
|
13
|
+
* Methods refer to tone, T in the the HCT color space.
|
|
14
|
+
* Tone is equivalent to L* in the L*a*b* color space, or L in the LCH color
|
|
15
|
+
* space.
|
|
16
|
+
*/
|
|
17
|
+
export declare class Contrast {
|
|
18
|
+
/**
|
|
19
|
+
* Returns a contrast ratio, which ranges from 1 to 21.
|
|
20
|
+
*
|
|
21
|
+
* @param toneA Tone between 0 and 100. Values outside will be clamped.
|
|
22
|
+
* @param toneB Tone between 0 and 100. Values outside will be clamped.
|
|
23
|
+
*/
|
|
24
|
+
static ratioOfTones(toneA: number, toneB: number): number;
|
|
25
|
+
static ratioOfYs(y1: number, y2: number): number;
|
|
26
|
+
/**
|
|
27
|
+
* Returns a tone >= tone parameter that ensures ratio parameter.
|
|
28
|
+
* Return value is between 0 and 100.
|
|
29
|
+
* Returns -1 if ratio cannot be achieved with tone parameter.
|
|
30
|
+
*
|
|
31
|
+
* @param tone Tone return value must contrast with.
|
|
32
|
+
* Range is 0 to 100. Invalid values will result in -1 being returned.
|
|
33
|
+
* @param ratio Contrast ratio of return value and tone.
|
|
34
|
+
* Range is 1 to 21, invalid values have undefined behavior.
|
|
35
|
+
*/
|
|
36
|
+
static lighter(tone: number, ratio: number): number;
|
|
37
|
+
/**
|
|
38
|
+
* Returns a tone <= tone parameter that ensures ratio parameter.
|
|
39
|
+
* Return value is between 0 and 100.
|
|
40
|
+
* Returns -1 if ratio cannot be achieved with tone parameter.
|
|
41
|
+
*
|
|
42
|
+
* @param tone Tone return value must contrast with.
|
|
43
|
+
* Range is 0 to 100. Invalid values will result in -1 being returned.
|
|
44
|
+
* @param ratio Contrast ratio of return value and tone.
|
|
45
|
+
* Range is 1 to 21, invalid values have undefined behavior.
|
|
46
|
+
*/
|
|
47
|
+
static darker(tone: number, ratio: number): number;
|
|
48
|
+
/**
|
|
49
|
+
* Returns a tone >= tone parameter that ensures ratio parameter.
|
|
50
|
+
* Return value is between 0 and 100.
|
|
51
|
+
* Returns 100 if ratio cannot be achieved with tone parameter.
|
|
52
|
+
*
|
|
53
|
+
* This method is unsafe because the returned value is guaranteed to be in
|
|
54
|
+
* bounds for tone, i.e. between 0 and 100. However, that value may not reach
|
|
55
|
+
* the ratio with tone. For example, there is no color lighter than T100.
|
|
56
|
+
*
|
|
57
|
+
* @param tone Tone return value must contrast with.
|
|
58
|
+
* Range is 0 to 100. Invalid values will result in 100 being returned.
|
|
59
|
+
* @param ratio Desired contrast ratio of return value and tone parameter.
|
|
60
|
+
* Range is 1 to 21, invalid values have undefined behavior.
|
|
61
|
+
*/
|
|
62
|
+
static lighterUnsafe(tone: number, ratio: number): number;
|
|
63
|
+
/**
|
|
64
|
+
* Returns a tone >= tone parameter that ensures ratio parameter.
|
|
65
|
+
* Return value is between 0 and 100.
|
|
66
|
+
* Returns 100 if ratio cannot be achieved with tone parameter.
|
|
67
|
+
*
|
|
68
|
+
* This method is unsafe because the returned value is guaranteed to be in
|
|
69
|
+
* bounds for tone, i.e. between 0 and 100. However, that value may not reach
|
|
70
|
+
* the [ratio with [tone]. For example, there is no color darker than T0.
|
|
71
|
+
*
|
|
72
|
+
* @param tone Tone return value must contrast with.
|
|
73
|
+
* Range is 0 to 100. Invalid values will result in 0 being returned.
|
|
74
|
+
* @param ratio Desired contrast ratio of return value and tone parameter.
|
|
75
|
+
* Range is 1 to 21, invalid values have undefined behavior.
|
|
76
|
+
*/
|
|
77
|
+
static darkerUnsafe(tone: number, ratio: number): number;
|
|
78
|
+
}
|