@atlaskit/tokens 1.4.0 → 1.4.2
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 +12 -0
- package/babel-plugin/package.json +2 -2
- package/dist/cjs/get-token-value.js +1 -1
- package/dist/cjs/get-token.js +1 -1
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/get-token-value.js +1 -1
- package/dist/es2019/get-token.js +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/get-token-value.js +1 -1
- package/dist/esm/get-token.js +1 -1
- package/dist/esm/version.json +1 -1
- package/dist/types/artifacts/replacement-mapping.d.ts +2 -2
- package/dist/types/artifacts/themes/atlassian-dark-iteration.d.ts +1 -1
- package/dist/types/artifacts/themes/atlassian-dark-new-input-border.d.ts +1 -1
- package/dist/types/artifacts/themes/atlassian-dark.d.ts +1 -1
- package/dist/types/artifacts/themes/atlassian-legacy-dark.d.ts +1 -1
- package/dist/types/artifacts/themes/atlassian-legacy-light.d.ts +1 -1
- package/dist/types/artifacts/themes/atlassian-light-new-input-border.d.ts +1 -1
- package/dist/types/artifacts/themes/atlassian-light.d.ts +1 -1
- package/dist/types/artifacts/themes/atlassian-shape.d.ts +1 -1
- package/dist/types/artifacts/themes/atlassian-spacing.d.ts +1 -1
- package/dist/types/artifacts/themes/atlassian-typography.d.ts +1 -1
- package/dist/types/artifacts/token-names.d.ts +2 -2
- package/dist/types/artifacts/types-internal.d.ts +1 -1
- package/dist/types/artifacts/types.d.ts +1 -1
- package/dist/types/artifacts/typescript/atlassian-dark-token-names.d.ts +1 -1
- package/dist/types/artifacts/typescript/atlassian-dark-types-internal.d.ts +1 -1
- package/dist/types/artifacts/typescript/atlassian-dark-types.d.ts +1 -1
- package/dist/types/artifacts/typescript/atlassian-light-token-names.d.ts +1 -1
- package/dist/types/artifacts/typescript/atlassian-light-types-internal.d.ts +1 -1
- package/dist/types/artifacts/typescript/atlassian-light-types.d.ts +1 -1
- package/dist/types/get-token-value.d.ts +1 -1
- package/dist/types/get-token.d.ts +1 -1
- package/dist/types/palettes/legacy-palette.d.ts +2 -2
- package/dist/types/palettes/palette.d.ts +2 -2
- package/dist/types/palettes/shape-palette.d.ts +3 -3
- package/dist/types/palettes/spacing-scale.d.ts +1 -1
- package/dist/types/palettes/typography-palette.d.ts +9 -9
- package/dist/types/theme-config.d.ts +10 -10
- package/dist/types/types.d.ts +34 -34
- package/dist/types-ts4.5/artifacts/generated-pairs.d.ts +15 -0
- package/dist/types-ts4.5/artifacts/palettes-raw/legacy-palette.d.ts +41 -0
- package/dist/types-ts4.5/artifacts/palettes-raw/palette.d.ts +41 -0
- package/dist/types-ts4.5/artifacts/palettes-raw/shape-palette.d.ts +22 -0
- package/dist/types-ts4.5/artifacts/palettes-raw/spacing-scale.d.ts +41 -0
- package/dist/types-ts4.5/artifacts/palettes-raw/typography-palette.d.ts +22 -0
- package/dist/types-ts4.5/artifacts/replacement-mapping.d.ts +26 -0
- package/dist/types-ts4.5/artifacts/theme-import-map.d.ts +16 -0
- package/dist/types-ts4.5/artifacts/themes/atlassian-dark-iteration.d.ts +7 -0
- package/dist/types-ts4.5/artifacts/themes/atlassian-dark-new-input-border.d.ts +7 -0
- package/dist/types-ts4.5/artifacts/themes/atlassian-dark.d.ts +7 -0
- package/dist/types-ts4.5/artifacts/themes/atlassian-legacy-dark.d.ts +7 -0
- package/dist/types-ts4.5/artifacts/themes/atlassian-legacy-light.d.ts +7 -0
- package/dist/types-ts4.5/artifacts/themes/atlassian-light-new-input-border.d.ts +7 -0
- package/dist/types-ts4.5/artifacts/themes/atlassian-light.d.ts +7 -0
- package/dist/types-ts4.5/artifacts/themes/atlassian-shape.d.ts +7 -0
- package/dist/types-ts4.5/artifacts/themes/atlassian-spacing.d.ts +7 -0
- package/dist/types-ts4.5/artifacts/themes/atlassian-typography.d.ts +7 -0
- package/dist/types-ts4.5/artifacts/token-default-values.d.ts +341 -0
- package/dist/types-ts4.5/artifacts/token-names.d.ts +669 -0
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-dark.d.ts +113 -0
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-legacy-dark.d.ts +113 -0
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-legacy-light.d.ts +89 -0
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-light.d.ts +89 -0
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-shape.d.ts +29 -0
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-spacing.d.ts +59 -0
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-typography.d.ts +29 -0
- package/dist/types-ts4.5/artifacts/types-internal.d.ts +6 -0
- package/dist/types-ts4.5/artifacts/types.d.ts +6 -0
- package/dist/types-ts4.5/artifacts/typescript/atlassian-dark-token-names.d.ts +784 -0
- package/dist/types-ts4.5/artifacts/typescript/atlassian-dark-types-internal.d.ts +6 -0
- package/dist/types-ts4.5/artifacts/typescript/atlassian-dark-types.d.ts +6 -0
- package/dist/types-ts4.5/artifacts/typescript/atlassian-light-token-names.d.ts +784 -0
- package/dist/types-ts4.5/artifacts/typescript/atlassian-light-types-internal.d.ts +6 -0
- package/dist/types-ts4.5/artifacts/typescript/atlassian-light-types.d.ts +6 -0
- package/dist/types-ts4.5/babel-plugin/index.d.ts +1 -0
- package/dist/types-ts4.5/babel-plugin/plugin.d.ts +14 -0
- package/dist/types-ts4.5/constants.d.ts +6 -0
- package/dist/types-ts4.5/entry-points/babel-plugin.d.ts +1 -0
- package/dist/types-ts4.5/entry-points/palettes-raw.d.ts +1 -0
- package/dist/types-ts4.5/entry-points/rename-mapping.d.ts +1 -0
- package/dist/types-ts4.5/entry-points/token-ids.d.ts +1 -0
- package/dist/types-ts4.5/entry-points/token-names.d.ts +2 -0
- package/dist/types-ts4.5/entry-points/token-order.d.ts +1 -0
- package/dist/types-ts4.5/entry-points/tokens-raw.d.ts +5 -0
- package/dist/types-ts4.5/get-global-theme.d.ts +2 -0
- package/dist/types-ts4.5/get-token-value.d.ts +25 -0
- package/dist/types-ts4.5/get-token.d.ts +26 -0
- package/dist/types-ts4.5/index.d.ts +13 -0
- package/dist/types-ts4.5/palettes/legacy-palette.d.ts +10 -0
- package/dist/types-ts4.5/palettes/palette.d.ts +5 -0
- package/dist/types-ts4.5/palettes/shape-palette.d.ts +67 -0
- package/dist/types-ts4.5/palettes/spacing-scale.d.ts +95 -0
- package/dist/types-ts4.5/palettes/typography-palette.d.ts +14 -0
- package/dist/types-ts4.5/set-global-theme.d.ts +74 -0
- package/dist/types-ts4.5/theme-config.d.ts +110 -0
- package/dist/types-ts4.5/theme-mutation-observer.d.ts +22 -0
- package/dist/types-ts4.5/tokens/atlassian-dark/color/accent.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-dark/color/background.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-dark/color/border.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-dark/color/chart.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-dark/color/icon.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-dark/color/interaction.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-dark/color/skeleton.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-dark/color/text.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-dark/elevation/shadow.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-dark/elevation/surface.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-dark/opacity/opacity.d.ts +3 -0
- package/dist/types-ts4.5/tokens/atlassian-dark/utility/utility.d.ts +5 -0
- package/dist/types-ts4.5/tokens/atlassian-dark-iteration/color/accent.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-dark-iteration/color/background.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-dark-iteration/color/chart.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-dark-iteration/color/icon.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-dark-iteration/color/text.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-dark-iteration/elevation/shadow.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-dark-iteration/elevation/surface.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-dark-new-input-border/color/border.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-legacy-dark/color/accent.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-legacy-dark/color/background.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-legacy-dark/color/border.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-legacy-dark/color/chart.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-legacy-dark/color/icon.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-legacy-dark/color/interaction.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-legacy-dark/color/skeleton.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-legacy-dark/color/text.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-legacy-dark/elevation/shadow.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-legacy-dark/elevation/surface.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-legacy-dark/opacity/opacity.d.ts +3 -0
- package/dist/types-ts4.5/tokens/atlassian-legacy-dark/utility/utility.d.ts +5 -0
- package/dist/types-ts4.5/tokens/atlassian-legacy-light/color/accent.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-legacy-light/color/background.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-legacy-light/color/border.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-legacy-light/color/chart.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-legacy-light/color/icon.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-legacy-light/color/interaction.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-legacy-light/color/skeleton.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-legacy-light/color/text.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-legacy-light/elevation/shadow.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-legacy-light/elevation/surface.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-legacy-light/opacity/opacity.d.ts +3 -0
- package/dist/types-ts4.5/tokens/atlassian-legacy-light/utility/utility.d.ts +5 -0
- package/dist/types-ts4.5/tokens/atlassian-light/color/accent.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-light/color/background.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-light/color/border.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-light/color/chart.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-light/color/icon.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-light/color/interaction.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-light/color/skeleton.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-light/color/text.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-light/elevation/shadow.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-light/elevation/surface.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-light/opacity/opacity.d.ts +3 -0
- package/dist/types-ts4.5/tokens/atlassian-light/utility/utility.d.ts +5 -0
- package/dist/types-ts4.5/tokens/atlassian-light-new-input-border/color/border.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-shape/shape.d.ts +7 -0
- package/dist/types-ts4.5/tokens/atlassian-spacing/spacing.d.ts +10 -0
- package/dist/types-ts4.5/tokens/atlassian-typography/font-family.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-typography/font-size.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-typography/font-weight.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-typography/line-height.d.ts +4 -0
- package/dist/types-ts4.5/tokens/default/color/accent.d.ts +4 -0
- package/dist/types-ts4.5/tokens/default/color/background.d.ts +4 -0
- package/dist/types-ts4.5/tokens/default/color/border.d.ts +4 -0
- package/dist/types-ts4.5/tokens/default/color/chart.d.ts +4 -0
- package/dist/types-ts4.5/tokens/default/color/icon.d.ts +4 -0
- package/dist/types-ts4.5/tokens/default/color/interaction.d.ts +4 -0
- package/dist/types-ts4.5/tokens/default/color/skeleton.d.ts +4 -0
- package/dist/types-ts4.5/tokens/default/color/text.d.ts +4 -0
- package/dist/types-ts4.5/tokens/default/elevation/shadow.d.ts +4 -0
- package/dist/types-ts4.5/tokens/default/elevation/surface.d.ts +4 -0
- package/dist/types-ts4.5/tokens/default/opacity/opacity.d.ts +3 -0
- package/dist/types-ts4.5/tokens/default/shape/shape.d.ts +3 -0
- package/dist/types-ts4.5/tokens/default/spacing/spacing.d.ts +8 -0
- package/dist/types-ts4.5/tokens/default/typography/font-family.d.ts +4 -0
- package/dist/types-ts4.5/tokens/default/typography/font-size.d.ts +4 -0
- package/dist/types-ts4.5/tokens/default/typography/font-weight.d.ts +4 -0
- package/dist/types-ts4.5/tokens/default/typography/line-height.d.ts +4 -0
- package/dist/types-ts4.5/tokens/default/utility/utility.d.ts +5 -0
- package/dist/types-ts4.5/types.d.ts +829 -0
- package/dist/types-ts4.5/use-theme-observer.d.ts +15 -0
- package/dist/types-ts4.5/utils/color-detection.d.ts +13 -0
- package/dist/types-ts4.5/utils/theme-loading.d.ts +3 -0
- package/dist/types-ts4.5/utils/theme-state-transformer.d.ts +26 -0
- package/dist/types-ts4.5/utils/token-ids.d.ts +41 -0
- package/dist/types-ts4.5/utils/token-order.d.ts +7 -0
- package/package.json +6 -5
- package/palettes-raw/package.json +2 -2
- package/rename-mapping/package.json +2 -2
- package/token-ids/package.json +2 -2
- package/token-names/package.json +2 -2
- package/token-order/package.json +2 -2
- package/tokens-raw/package.json +2 -2
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
3
|
+
* @codegen <<SignedSource::1dd64ddb2df151d9df21390717a58975>>
|
|
4
|
+
* @codegenCommand yarn build tokens
|
|
5
|
+
*/
|
|
6
|
+
export type InternalTokenIds = 'color.text.accent.blue.[default]' | 'color.text.accent.blue.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.purple.[default]' | 'color.text.accent.purple.bolder' | 'color.text.accent.teal.[default]' | 'color.text.accent.teal.bolder' | 'color.text.accent.magenta.[default]' | 'color.text.accent.magenta.bolder' | 'color.text.accent.gray.[default]' | 'color.text.accent.gray.bolder' | 'color.text.[default]' | 'color.text.subtle' | 'color.text.subtlest' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.brand' | 'color.text.selected' | 'color.text.danger' | 'color.text.warning.[default]' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.icon.accent.blue' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.purple' | 'color.icon.accent.teal' | 'color.icon.accent.magenta' | 'color.icon.accent.gray' | 'color.icon.[default]' | 'color.icon.subtle' | 'color.icon.inverse' | 'color.icon.disabled' | 'color.icon.brand' | 'color.icon.selected' | 'color.icon.danger' | 'color.icon.warning.[default]' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.border.accent.blue' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.purple' | 'color.border.accent.teal' | 'color.border.accent.magenta' | 'color.border.accent.gray' | 'color.border.[default]' | 'color.border.bold' | 'color.border.inverse' | 'color.border.focused' | 'color.border.input' | 'color.border.disabled' | 'color.border.brand' | 'color.border.selected' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.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.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.inverse.subtle.[default]' | 'color.background.inverse.subtle.hovered' | 'color.background.inverse.subtle.pressed' | 'color.background.input.[default]' | 'color.background.input.hovered' | 'color.background.input.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.brand.bold.[default]' | 'color.background.brand.bold.hovered' | 'color.background.brand.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.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.chart.brand.[default]' | 'color.chart.brand.hovered' | 'color.chart.neutral.[default]' | 'color.chart.neutral.hovered' | 'color.chart.success.[default].[default]' | 'color.chart.success.[default].hovered' | 'color.chart.success.bold.[default]' | 'color.chart.success.bold.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.information.[default].[default]' | 'color.chart.information.[default].hovered' | 'color.chart.information.bold.[default]' | 'color.chart.information.bold.hovered' | 'color.chart.discovery.[default].[default]' | 'color.chart.discovery.[default].hovered' | 'color.chart.discovery.bold.[default]' | 'color.chart.discovery.bold.hovered' | '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.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.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.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.interaction.hovered' | 'color.interaction.pressed' | 'color.skeleton.[default]' | 'color.skeleton.subtle' | 'color.link.[default]' | 'color.link.pressed' | 'elevation.shadow.raised' | 'elevation.shadow.overflow.[default]' | 'elevation.shadow.overflow.spread' | 'elevation.shadow.overflow.perimeter' | 'elevation.shadow.overlay' | 'elevation.surface.[default].[default]' | 'elevation.surface.[default].hovered' | 'elevation.surface.[default].pressed' | 'elevation.surface.sunken' | 'elevation.surface.raised.[default]' | 'elevation.surface.raised.hovered' | 'elevation.surface.raised.pressed' | 'elevation.surface.overlay.[default]' | 'elevation.surface.overlay.hovered' | 'elevation.surface.overlay.pressed' | 'opacity.disabled' | 'opacity.loading' | 'utility.UNSAFE_util.transparent' | 'utility.UNSAFE_util.MISSING_TOKEN';
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
3
|
+
* @codegen <<SignedSource::777e098e560f16035bf68a6da00217f2>>
|
|
4
|
+
* @codegenCommand yarn build tokens
|
|
5
|
+
*/
|
|
6
|
+
export type ActiveTokens = 'color.text.accent.blue' | 'color.text.accent.blue.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.purple' | 'color.text.accent.purple.bolder' | 'color.text.accent.teal' | 'color.text.accent.teal.bolder' | 'color.text.accent.magenta' | 'color.text.accent.magenta.bolder' | 'color.text.accent.gray' | 'color.text.accent.gray.bolder' | 'color.text' | 'color.text.subtle' | 'color.text.subtlest' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.brand' | 'color.text.selected' | 'color.text.danger' | 'color.text.warning' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.icon.accent.blue' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.purple' | 'color.icon.accent.teal' | 'color.icon.accent.magenta' | 'color.icon.accent.gray' | 'color.icon' | 'color.icon.subtle' | 'color.icon.inverse' | 'color.icon.disabled' | 'color.icon.brand' | 'color.icon.selected' | 'color.icon.danger' | 'color.icon.warning' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.border.accent.blue' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.purple' | 'color.border.accent.teal' | 'color.border.accent.magenta' | 'color.border.accent.gray' | 'color.border' | 'color.border.bold' | 'color.border.inverse' | 'color.border.focused' | 'color.border.input' | 'color.border.disabled' | 'color.border.brand' | 'color.border.selected' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.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.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.inverse.subtle' | 'color.background.inverse.subtle.hovered' | 'color.background.inverse.subtle.pressed' | 'color.background.input' | 'color.background.input.hovered' | 'color.background.input.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.brand.bold' | 'color.background.brand.bold.hovered' | 'color.background.brand.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.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.chart.brand' | 'color.chart.brand.hovered' | 'color.chart.neutral' | 'color.chart.neutral.hovered' | 'color.chart.success' | 'color.chart.success.hovered' | 'color.chart.success.bold' | 'color.chart.success.bold.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.information' | 'color.chart.information.hovered' | 'color.chart.information.bold' | 'color.chart.information.bold.hovered' | 'color.chart.discovery' | 'color.chart.discovery.hovered' | 'color.chart.discovery.bold' | 'color.chart.discovery.bold.hovered' | '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.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.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.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.interaction.hovered' | 'color.interaction.pressed' | 'color.skeleton' | 'color.skeleton.subtle' | 'color.link' | 'color.link.pressed' | 'elevation.shadow.raised' | 'elevation.shadow.overflow' | 'elevation.shadow.overflow.spread' | 'elevation.shadow.overflow.perimeter' | 'elevation.shadow.overlay' | 'elevation.surface' | 'elevation.surface.hovered' | 'elevation.surface.pressed' | 'elevation.surface.sunken' | 'elevation.surface.raised' | 'elevation.surface.raised.hovered' | 'elevation.surface.raised.pressed' | 'elevation.surface.overlay' | 'elevation.surface.overlay.hovered' | 'elevation.surface.overlay.pressed' | 'opacity.disabled' | 'opacity.loading' | 'utility.UNSAFE_util.transparent' | 'utility.UNSAFE_util.MISSING_TOKEN';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './plugin';
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { NodePath } from '@babel/traverse';
|
|
2
|
+
import * as t from '@babel/types';
|
|
3
|
+
export default function plugin(): {
|
|
4
|
+
visitor: {
|
|
5
|
+
Program: {
|
|
6
|
+
enter(path: NodePath<t.Program>, state: {
|
|
7
|
+
opts: {
|
|
8
|
+
shouldUseAutoFallback?: boolean;
|
|
9
|
+
};
|
|
10
|
+
}): void;
|
|
11
|
+
exit(path: NodePath<t.Program>): void;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export declare const THEME_DATA_ATTRIBUTE = "data-theme";
|
|
2
|
+
export declare const COLOR_MODE_ATTRIBUTE = "data-color-mode";
|
|
3
|
+
export declare const DEFAULT_THEME = "light";
|
|
4
|
+
export declare const CSS_PREFIX = "ds";
|
|
5
|
+
export declare const CSS_VAR_FULL: string[];
|
|
6
|
+
export declare const TOKEN_NOT_FOUND_CSS_VAR: string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from '../babel-plugin/plugin';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from '../artifacts/palettes-raw/palette';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from '../artifacts/replacement-mapping';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { getCSSCustomProperty, getTokenId, getFullyQualifiedTokenId, } from '../utils/token-ids';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { tokenOrder } from '../utils/token-order';
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { default as light } from '../artifacts/tokens-raw/atlassian-light';
|
|
2
|
+
export { default as dark } from '../artifacts/tokens-raw/atlassian-dark';
|
|
3
|
+
export { default as spacing } from '../artifacts/tokens-raw/atlassian-spacing';
|
|
4
|
+
export { default as typography } from '../artifacts/tokens-raw/atlassian-typography';
|
|
5
|
+
export { default as shape } from '../artifacts/tokens-raw/atlassian-shape';
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import tokens from './artifacts/token-names';
|
|
2
|
+
type Tokens = typeof tokens;
|
|
3
|
+
/**
|
|
4
|
+
* Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
|
|
5
|
+
* resulting CSS Custom Property.
|
|
6
|
+
* This should be used for when the CSS cascade isn't available, eg. `<canvas>` elements, JS charting libraries, etc.
|
|
7
|
+
*
|
|
8
|
+
* Note: these values change depending on the theme so consider pairing them with `useThemeObserver` in React, or the
|
|
9
|
+
* `ThemeMutationObserver` class elsewhere.
|
|
10
|
+
*
|
|
11
|
+
* @param {string} path - A dot-separated token name (example: `'color.background.brand'` or `'spacing.scale.100'`).
|
|
12
|
+
* @param {string} [fallback] - The fallback value that should render when token CSS is not present in your app.
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* ```
|
|
16
|
+
* const theme = useThemeObserver();
|
|
17
|
+
*
|
|
18
|
+
* useEffect(() => {
|
|
19
|
+
* const lineColor = getTokenValue('color.background.accent.blue.subtle', B400);
|
|
20
|
+
* }, [theme]);
|
|
21
|
+
* ```
|
|
22
|
+
*
|
|
23
|
+
*/
|
|
24
|
+
declare function getTokenValue<T extends keyof Tokens>(tokenId: T, fallback?: string): string;
|
|
25
|
+
export default getTokenValue;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import tokens, { CSSTokenMap } from './artifacts/token-names';
|
|
2
|
+
type Tokens = typeof tokens;
|
|
3
|
+
/**
|
|
4
|
+
* Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
|
|
5
|
+
* This should be used to implement design decisions throughout your application.
|
|
6
|
+
*
|
|
7
|
+
* Note: With `@atlaskit/babel-plugin-tokens`, this function can be pre-compiled and a fallback value automatically inserted.
|
|
8
|
+
*
|
|
9
|
+
* @param {string} path - A dot-separated token name (example: `'color.background.brand'` or `'spacing.scale.100'`).
|
|
10
|
+
* @param {string} [fallback] - The fallback value that should render when token CSS is not present in your app.
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```
|
|
14
|
+
* <div
|
|
15
|
+
* css={{
|
|
16
|
+
* backgroundColor: token('elevation.surface.raised', N0),
|
|
17
|
+
* boxShadow: token('elevation.shadow.raised', `0 20px 32px -8px ${N50A}, 0 0 1px ${N60A}`),
|
|
18
|
+
* padding: token('spacing.scale.100', '8px'),
|
|
19
|
+
* fontWeight: token('font.weight.regular', '400'),
|
|
20
|
+
* }}
|
|
21
|
+
* />
|
|
22
|
+
* ```
|
|
23
|
+
*
|
|
24
|
+
*/
|
|
25
|
+
declare function token<T extends keyof Tokens>(path: T, fallback?: string): CSSTokenMap[T];
|
|
26
|
+
export default token;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export { default as token } from './get-token';
|
|
2
|
+
export { default as getTokenValue } from './get-token-value';
|
|
3
|
+
export { default as setGlobalTheme, getThemeStyles, getThemeHtmlAttrs, getSSRAutoScript, } from './set-global-theme';
|
|
4
|
+
export type { ThemeState } from './set-global-theme';
|
|
5
|
+
export type { CSSToken } from './artifacts/token-names';
|
|
6
|
+
export type { ActiveTokens } from './artifacts/types';
|
|
7
|
+
export type { ThemeColorModes, Themes, ThemeIds } from './theme-config';
|
|
8
|
+
export type { Groups, OpacityToken, PaintToken, RawToken, ShadowToken, SpacingToken, } from './types';
|
|
9
|
+
export { default as themeConfig } from './theme-config';
|
|
10
|
+
export { useThemeObserver } from './use-theme-observer';
|
|
11
|
+
export { ThemeMutationObserver } from './theme-mutation-observer';
|
|
12
|
+
export { getGlobalTheme } from './get-global-theme';
|
|
13
|
+
export { themeStringToObject, themeObjectToString, } from './utils/theme-state-transformer';
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Legacy color palette sourced from: packages/design-system/theme/src/colors.tsx
|
|
3
|
+
*
|
|
4
|
+
* This palette should be exclusively used for backwards compatible themes
|
|
5
|
+
*/
|
|
6
|
+
import type { PaletteColorTokenSchema } from '../types';
|
|
7
|
+
type PaletteValues = 'transparent' | 'R50' | 'R75' | 'R100' | 'R200' | 'R300' | 'R400' | 'R500' | 'Y50' | 'Y75' | 'Y100' | 'Y200' | 'Y300' | 'Y400' | 'Y500' | 'O800' | 'G50' | 'G75' | 'G100' | 'G200' | 'G300' | 'G400' | 'G500' | 'B50' | 'B75' | 'B100' | 'B200' | 'B300' | 'B400' | 'B500' | 'P50' | 'P75' | 'P100' | 'P200' | 'P300' | 'P400' | 'P500' | 'T50' | 'T75' | 'T100' | 'T200' | 'T300' | 'T400' | 'T500' | 'N0' | 'N10' | 'N20' | 'N30' | 'N40' | 'N50' | 'N60' | 'N70' | 'N80' | 'N90' | 'N100' | 'N200' | 'N300' | 'N400' | 'N500' | 'N600' | 'N700' | 'N800' | 'N900' | 'N10A' | 'N20A' | 'N30A' | 'N40A' | 'N50A' | 'N60A' | 'N70A' | 'N80A' | 'N90A' | 'N100A' | 'N200A' | 'N300A' | 'N400A' | 'N500A' | 'N600A' | 'N700A' | 'N800A' | 'DN900' | 'DN800' | 'DN700' | 'DN600' | 'DN500' | 'DN400' | 'DN300' | 'DN200' | 'DN100' | 'DN90' | 'DN80' | 'DN70' | 'DN60' | 'DN50' | 'DN40' | 'DN30' | 'DN20' | 'DN10' | 'DN0' | 'DN800A' | 'DN700A' | 'DN600A' | 'DN500A' | 'DN400A' | 'DN300A' | 'DN200A' | 'DN100A' | 'DN90A' | 'DN80A' | 'DN70A' | 'DN60A' | 'DN50A' | 'DN40A' | 'DN30A' | 'DN20A' | 'DN10' | 'DN10A';
|
|
8
|
+
export type BaseToken = keyof PaletteColorTokenSchema<PaletteValues>['color']['palette'];
|
|
9
|
+
declare const palette: PaletteColorTokenSchema<PaletteValues>;
|
|
10
|
+
export default palette;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { PaletteColorTokenSchema } from '../types';
|
|
2
|
+
type PaletteValues = 'Blue100' | 'Blue200' | 'Blue300' | 'Blue400' | 'Blue500' | 'Blue600' | 'Blue700' | 'Blue800' | 'Blue900' | 'Blue1000' | 'Red100' | 'Red200' | 'Red300' | 'Red400' | 'Red500' | 'Red600' | 'Red700' | 'Red800' | 'Red900' | 'Red1000' | 'Yellow100' | 'Yellow200' | 'Yellow300' | 'Yellow400' | 'Yellow500' | 'Yellow600' | 'Yellow700' | 'Yellow800' | 'Yellow900' | 'Yellow1000' | 'Green100' | 'Green200' | 'Green300' | 'Green400' | 'Green500' | 'Green600' | 'Green700' | 'Green800' | 'Green900' | 'Green1000' | 'Purple100' | 'Purple200' | 'Purple300' | 'Purple400' | 'Purple500' | 'Purple600' | 'Purple700' | 'Purple800' | 'Purple900' | 'Purple1000' | 'Teal100' | 'Teal200' | 'Teal300' | 'Teal400' | 'Teal500' | 'Teal600' | 'Teal700' | 'Teal800' | 'Teal900' | 'Teal1000' | 'Orange100' | 'Orange200' | 'Orange300' | 'Orange400' | 'Orange500' | 'Orange600' | 'Orange700' | 'Orange800' | 'Orange900' | 'Orange1000' | 'Magenta100' | 'Magenta200' | 'Magenta300' | 'Magenta400' | 'Magenta500' | 'Magenta600' | 'Magenta700' | 'Magenta800' | 'Magenta900' | 'Magenta1000' | 'DarkNeutral-100' | 'DarkNeutral-100A' | 'DarkNeutral0' | 'DarkNeutral100' | 'DarkNeutral100A' | 'DarkNeutral200' | 'DarkNeutral200A' | 'DarkNeutral300' | 'DarkNeutral300A' | 'DarkNeutral400' | 'DarkNeutral400A' | 'DarkNeutral500' | 'DarkNeutral500A' | 'DarkNeutral600' | 'DarkNeutral700' | 'DarkNeutral800' | 'DarkNeutral900' | 'DarkNeutral1000' | 'DarkNeutral1100' | 'Neutral0' | 'Neutral100' | 'Neutral100A' | 'Neutral200' | 'Neutral200A' | 'Neutral300' | 'Neutral300A' | 'Neutral400' | 'Neutral400A' | 'Neutral500' | 'Neutral500A' | 'Neutral600' | 'Neutral700' | 'Neutral800' | 'Neutral900' | 'Neutral1000' | 'Neutral1100';
|
|
3
|
+
export type BaseToken = keyof PaletteColorTokenSchema<PaletteValues>['color']['palette'];
|
|
4
|
+
declare const palette: PaletteColorTokenSchema<PaletteValues>;
|
|
5
|
+
export default palette;
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import type { ShapeScaleTokenSchema } from '../types';
|
|
2
|
+
/**
|
|
3
|
+
* Types are inferred from the base tokens below
|
|
4
|
+
*/
|
|
5
|
+
export type ShapePaletteToken = BaseRadiusToken | BaseSizeToken;
|
|
6
|
+
export type BaseSizeToken = keyof typeof baseSizeTokens;
|
|
7
|
+
export type BaseRadiusToken = keyof typeof baseRadiusTokens;
|
|
8
|
+
declare const baseSizeTokens: {
|
|
9
|
+
readonly Size0: {
|
|
10
|
+
readonly value: "0";
|
|
11
|
+
readonly attributes: {
|
|
12
|
+
readonly group: "shape";
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
readonly Size050: {
|
|
16
|
+
readonly value: "0.0625rem";
|
|
17
|
+
readonly attributes: {
|
|
18
|
+
readonly group: "shape";
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
readonly Size100: {
|
|
22
|
+
readonly value: "0.125rem";
|
|
23
|
+
readonly attributes: {
|
|
24
|
+
readonly group: "shape";
|
|
25
|
+
};
|
|
26
|
+
};
|
|
27
|
+
};
|
|
28
|
+
declare const baseRadiusTokens: {
|
|
29
|
+
readonly Radius050: {
|
|
30
|
+
readonly value: "0.125rem";
|
|
31
|
+
readonly attributes: {
|
|
32
|
+
readonly group: "shape";
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
readonly Radius100: {
|
|
36
|
+
readonly value: "0.25rem";
|
|
37
|
+
readonly attributes: {
|
|
38
|
+
readonly group: "shape";
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
readonly Radius200: {
|
|
42
|
+
readonly value: "0.5rem";
|
|
43
|
+
readonly attributes: {
|
|
44
|
+
readonly group: "shape";
|
|
45
|
+
};
|
|
46
|
+
};
|
|
47
|
+
readonly Radius300: {
|
|
48
|
+
readonly value: "0.75rem";
|
|
49
|
+
readonly attributes: {
|
|
50
|
+
readonly group: "shape";
|
|
51
|
+
};
|
|
52
|
+
};
|
|
53
|
+
readonly Radius400: {
|
|
54
|
+
readonly value: "1rem";
|
|
55
|
+
readonly attributes: {
|
|
56
|
+
readonly group: "shape";
|
|
57
|
+
};
|
|
58
|
+
};
|
|
59
|
+
readonly RadiusCircle: {
|
|
60
|
+
readonly value: "50%";
|
|
61
|
+
readonly attributes: {
|
|
62
|
+
readonly group: "shape";
|
|
63
|
+
};
|
|
64
|
+
};
|
|
65
|
+
};
|
|
66
|
+
declare const shapePalette: ShapeScaleTokenSchema<BaseRadiusToken, BaseSizeToken>;
|
|
67
|
+
export default shapePalette;
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import type { SpacingScaleTokenSchema } from '../types';
|
|
2
|
+
/**
|
|
3
|
+
* Types are inferred from the base tokens below
|
|
4
|
+
*/
|
|
5
|
+
export type SpacingPaletteToken = keyof typeof baseSpacingTokens;
|
|
6
|
+
declare const baseSpacingTokens: {
|
|
7
|
+
readonly Space0: {
|
|
8
|
+
readonly value: "0";
|
|
9
|
+
readonly attributes: {
|
|
10
|
+
readonly group: "spacing";
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
readonly Space025: {
|
|
14
|
+
readonly value: "0.125rem";
|
|
15
|
+
readonly attributes: {
|
|
16
|
+
readonly group: "spacing";
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
readonly Space050: {
|
|
20
|
+
readonly value: "0.25rem";
|
|
21
|
+
readonly attributes: {
|
|
22
|
+
readonly group: "spacing";
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
readonly Space075: {
|
|
26
|
+
readonly value: "0.375rem";
|
|
27
|
+
readonly attributes: {
|
|
28
|
+
readonly group: "spacing";
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
readonly Space100: {
|
|
32
|
+
readonly value: "0.5rem";
|
|
33
|
+
readonly attributes: {
|
|
34
|
+
readonly group: "spacing";
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
readonly Space150: {
|
|
38
|
+
readonly value: "0.75rem";
|
|
39
|
+
readonly attributes: {
|
|
40
|
+
readonly group: "spacing";
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
readonly Space200: {
|
|
44
|
+
readonly value: "1rem";
|
|
45
|
+
readonly attributes: {
|
|
46
|
+
readonly group: "spacing";
|
|
47
|
+
};
|
|
48
|
+
};
|
|
49
|
+
readonly Space250: {
|
|
50
|
+
readonly value: "1.25rem";
|
|
51
|
+
readonly attributes: {
|
|
52
|
+
readonly group: "spacing";
|
|
53
|
+
};
|
|
54
|
+
};
|
|
55
|
+
readonly Space300: {
|
|
56
|
+
readonly value: "1.5rem";
|
|
57
|
+
readonly attributes: {
|
|
58
|
+
readonly group: "spacing";
|
|
59
|
+
};
|
|
60
|
+
};
|
|
61
|
+
readonly Space400: {
|
|
62
|
+
readonly value: "2rem";
|
|
63
|
+
readonly attributes: {
|
|
64
|
+
readonly group: "spacing";
|
|
65
|
+
};
|
|
66
|
+
};
|
|
67
|
+
readonly Space500: {
|
|
68
|
+
readonly value: "2.5rem";
|
|
69
|
+
readonly attributes: {
|
|
70
|
+
readonly group: "spacing";
|
|
71
|
+
};
|
|
72
|
+
};
|
|
73
|
+
readonly Space600: {
|
|
74
|
+
readonly value: "3rem";
|
|
75
|
+
readonly attributes: {
|
|
76
|
+
readonly group: "spacing";
|
|
77
|
+
};
|
|
78
|
+
};
|
|
79
|
+
readonly Space800: {
|
|
80
|
+
readonly value: "4rem";
|
|
81
|
+
readonly attributes: {
|
|
82
|
+
readonly group: "spacing";
|
|
83
|
+
};
|
|
84
|
+
readonly pixelValue: "64px";
|
|
85
|
+
};
|
|
86
|
+
readonly Space1000: {
|
|
87
|
+
readonly value: "5rem";
|
|
88
|
+
readonly attributes: {
|
|
89
|
+
readonly group: "spacing";
|
|
90
|
+
};
|
|
91
|
+
readonly pixelValue: "80px";
|
|
92
|
+
};
|
|
93
|
+
};
|
|
94
|
+
declare const spacingPalette: SpacingScaleTokenSchema<SpacingPaletteToken>;
|
|
95
|
+
export default spacingPalette;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { FontFamilyPaletteTokenSchema, FontSizeScaleTokenSchema, FontWeightScaleTokenSchema, LineHeightScaleTokenSchema } from '../types';
|
|
2
|
+
export type FontSizeScaleValues = 'FontSize050' | 'FontSize075' | 'FontSize100' | 'FontSize200' | 'FontSize300' | 'FontSize400' | 'FontSize500' | 'FontSize600';
|
|
3
|
+
export type LineHeightScaleValues = 'LineHeight100' | 'LineHeight200' | 'LineHeight300' | 'LineHeight400' | 'LineHeight500' | 'LineHeight600';
|
|
4
|
+
export type FontWeightScaleValues = 'FontWeightRegular' | 'FontWeightMedium' | 'FontWeightSemiBold' | 'FontWeightBold';
|
|
5
|
+
export type FontFamilyPaletteValues = 'FontFamilySans' | 'FontFamilyMonospace';
|
|
6
|
+
export type AtlassianTokenSchema = {
|
|
7
|
+
typography: FontSizeScaleTokenSchema<FontSizeScaleValues> | FontWeightScaleTokenSchema<FontWeightScaleValues> | FontFamilyPaletteTokenSchema<FontFamilyPaletteValues> | LineHeightScaleTokenSchema<LineHeightScaleValues>;
|
|
8
|
+
};
|
|
9
|
+
export type LineHeightBaseToken = keyof LineHeightScaleTokenSchema<LineHeightScaleValues>['lineHeight'];
|
|
10
|
+
export type FontWeightBaseToken = keyof FontWeightScaleTokenSchema<FontWeightScaleValues>['fontWeight'];
|
|
11
|
+
export type FontFamilyBaseToken = keyof FontFamilyPaletteTokenSchema<FontFamilyPaletteValues>['fontFamily'];
|
|
12
|
+
export type FontSizeBaseToken = keyof FontSizeScaleTokenSchema<FontSizeScaleValues>['fontSize'];
|
|
13
|
+
declare const typographyPalette: AtlassianTokenSchema;
|
|
14
|
+
export default typographyPalette;
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { UnbindFn } from 'bind-event-listener';
|
|
2
|
+
import { ThemeColorModes, ThemeIds } from './theme-config';
|
|
3
|
+
export interface ThemeState {
|
|
4
|
+
light: ThemeIds;
|
|
5
|
+
dark: ThemeIds;
|
|
6
|
+
colorMode: ThemeColorModes;
|
|
7
|
+
spacing?: ThemeIds;
|
|
8
|
+
typography?: ThemeIds;
|
|
9
|
+
}
|
|
10
|
+
export interface ActiveThemeState extends ThemeState {
|
|
11
|
+
colorMode: Exclude<ThemeColorModes, 'auto'>;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* Sets the theme globally at runtime. This updates the `data-theme` and `data-color-mode` attributes on your page's <html> tag.
|
|
15
|
+
*
|
|
16
|
+
* @param {Object<string, string>} themeState The themes and color mode that should be applied.
|
|
17
|
+
* @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
|
|
18
|
+
* @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
|
|
19
|
+
* @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
|
|
20
|
+
* @param {string} themeState.spacing The spacing theme to be applied.
|
|
21
|
+
* @param {string} themeState.typography The typography theme to be applied.
|
|
22
|
+
*
|
|
23
|
+
* @returns A Promise of an unbind function, that can be used to stop listening for changes to system theme.
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* ```
|
|
27
|
+
* setGlobalTheme({colorMode: 'auto', light: 'light', dark: 'dark', spacing: 'spacing'});
|
|
28
|
+
* ```
|
|
29
|
+
*/
|
|
30
|
+
declare const setGlobalTheme: ({ colorMode, dark, light, spacing, typography, }?: Partial<ThemeState>) => Promise<UnbindFn>;
|
|
31
|
+
export interface ThemeStyles {
|
|
32
|
+
id: ThemeIds;
|
|
33
|
+
attrs: Record<string, string>;
|
|
34
|
+
css: string;
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* Takes an object containing theme preferences, and returns an array of objects for use in applying styles to the document head.
|
|
38
|
+
* 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.
|
|
39
|
+
*
|
|
40
|
+
* @param {Object<string, string>} themeState The themes and color mode that should be applied.
|
|
41
|
+
* @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
|
|
42
|
+
* @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
|
|
43
|
+
* @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
|
|
44
|
+
* @param {string} themeState.spacing The spacing theme to be applied.
|
|
45
|
+
* @param {string} themeState.typography The typography theme to be applied.
|
|
46
|
+
*
|
|
47
|
+
* @returns A Promise of an object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
|
|
48
|
+
* If an error is encountered while loading themes, the themes arrav will be emptv.
|
|
49
|
+
*/
|
|
50
|
+
export declare const getThemeStyles: ({ colorMode, dark, light, spacing, typography, }?: Partial<ThemeState>) => Promise<ThemeStyles[]>;
|
|
51
|
+
/**
|
|
52
|
+
* Server-side rendering utility. Generates the valid HTML attributes for a given theme.
|
|
53
|
+
* Note: this utility does not handle automatic theme switching.
|
|
54
|
+
*
|
|
55
|
+
* @param {Object<string, string>} themeOptions - Theme options object
|
|
56
|
+
* @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
|
|
57
|
+
* @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
|
|
58
|
+
* @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
|
|
59
|
+
* @param {string} themeState.spacing The spacing theme to be applied.
|
|
60
|
+
* @param {string} themeState.typography The typography theme to be applied.
|
|
61
|
+
*
|
|
62
|
+
* @returns {Object} Object of HTML attributes to be applied to the document root
|
|
63
|
+
*/
|
|
64
|
+
export declare const getThemeHtmlAttrs: ({ colorMode, dark, light, spacing, typography, }?: Partial<ThemeState>) => Record<string, string>;
|
|
65
|
+
/**
|
|
66
|
+
* Provides a script that, when executed before paint, sets the `data-color-mode` attribute based on the current system theme,
|
|
67
|
+
* to enable SSR support for automatic theme switching, avoid a flash of un-themed content on first paint.
|
|
68
|
+
*
|
|
69
|
+
* @param {string} colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
|
|
70
|
+
*
|
|
71
|
+
* @returns {string} A string to be added to the innerHTML of a script tag in the document head
|
|
72
|
+
*/
|
|
73
|
+
export declare const getSSRAutoScript: (colorMode: ThemeState['colorMode']) => string | undefined;
|
|
74
|
+
export default setGlobalTheme;
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This file contains the source of truth for themes and all associated meta data.
|
|
3
|
+
*/
|
|
4
|
+
/**
|
|
5
|
+
* Themes: The internal identifier of a theme.
|
|
6
|
+
* These ids are what the actual theme files/folders are called.
|
|
7
|
+
* style-dictionary will attempt to locate these in the file-system.
|
|
8
|
+
*/
|
|
9
|
+
export type Themes = 'atlassian-light' | 'atlassian-dark' | 'atlassian-legacy-light' | 'atlassian-legacy-dark' | 'atlassian-shape' | 'atlassian-spacing' | 'atlassian-typography';
|
|
10
|
+
export type ThemeFileNames = Themes;
|
|
11
|
+
export type ThemeOverrides = 'atlassian-dark-iteration' | 'atlassian-light-new-input-border' | 'atlassian-dark-new-input-border';
|
|
12
|
+
/**
|
|
13
|
+
* Theme kinds: The type of theme.
|
|
14
|
+
* Some themes are entirely focused on Color, whilst others are purely focused on spacing.
|
|
15
|
+
* In the future other types may be introduced such as typography.
|
|
16
|
+
*/
|
|
17
|
+
export type ThemeKinds = 'color' | 'spacing' | 'typography' | 'shape';
|
|
18
|
+
/**
|
|
19
|
+
* Theme modes: The general purpose of a theme.
|
|
20
|
+
* This attr is used to apply the appropriate system-preference option
|
|
21
|
+
* It may also be used as a selector for mode-specific overrides such as light/dark images.
|
|
22
|
+
* The idea is there may exist many color themes, but every theme must either fit into light or dark.
|
|
23
|
+
*/
|
|
24
|
+
export declare const themeColorModes: readonly [
|
|
25
|
+
"light",
|
|
26
|
+
"dark",
|
|
27
|
+
"auto"
|
|
28
|
+
];
|
|
29
|
+
export type ThemeColorModes = (typeof themeColorModes)[number];
|
|
30
|
+
export type DataColorModes = Exclude<ThemeColorModes, 'auto'>;
|
|
31
|
+
/**
|
|
32
|
+
* Theme ids: The value that will be mounted to the DOM as a data attr
|
|
33
|
+
* For example: `data-theme="light:light dark:dark spacing:spacing"
|
|
34
|
+
*
|
|
35
|
+
* These ids must be kebab case
|
|
36
|
+
*/
|
|
37
|
+
export declare const themeIds: readonly [
|
|
38
|
+
"light",
|
|
39
|
+
"dark",
|
|
40
|
+
"legacy-light",
|
|
41
|
+
"legacy-dark",
|
|
42
|
+
"spacing",
|
|
43
|
+
"typography",
|
|
44
|
+
"shape"
|
|
45
|
+
];
|
|
46
|
+
export type ThemeIds = (typeof themeIds)[number];
|
|
47
|
+
export type ThemeOverrideIds = 'dark-iteration' | 'light-new-input-border' | 'dark-new-input-border';
|
|
48
|
+
/**
|
|
49
|
+
* Theme to use a base. This will create the theme as
|
|
50
|
+
* an extension with all token values marked as optional
|
|
51
|
+
* to allow tokens to be overridden as required.
|
|
52
|
+
*/
|
|
53
|
+
export type ExtensionThemeId = ThemeIds;
|
|
54
|
+
/**
|
|
55
|
+
* Palettes: The set of base tokens a given theme may be populated with.
|
|
56
|
+
* For example: legacy light & dark themes use the "legacyPalette" containing colors from our
|
|
57
|
+
* previous color set.
|
|
58
|
+
*/
|
|
59
|
+
export type Palettes = 'defaultPalette' | 'legacyPalette' | 'spacingScale' | 'shapePalette' | 'typographyPalette';
|
|
60
|
+
/**
|
|
61
|
+
* ThemeConfig: the source of truth for all theme meta-data.
|
|
62
|
+
* This object should be used whenever interfacing with themes.
|
|
63
|
+
*/
|
|
64
|
+
interface ThemeConfig {
|
|
65
|
+
id: ThemeIds;
|
|
66
|
+
displayName: string;
|
|
67
|
+
palette: Palettes;
|
|
68
|
+
attributes: ({
|
|
69
|
+
type: 'color';
|
|
70
|
+
mode: DataColorModes;
|
|
71
|
+
} | {
|
|
72
|
+
type: Extract<ThemeKinds, 'spacing' | 'typography' | 'shape'>;
|
|
73
|
+
}) & {
|
|
74
|
+
extends?: ExtensionThemeId;
|
|
75
|
+
};
|
|
76
|
+
}
|
|
77
|
+
declare const themeConfig: Record<Themes, ThemeConfig>;
|
|
78
|
+
export declare const themeOverrideConfig: {
|
|
79
|
+
'atlassian-dark-iteration': {
|
|
80
|
+
id: string;
|
|
81
|
+
displayName: string;
|
|
82
|
+
palette: string;
|
|
83
|
+
overrideTheme: string;
|
|
84
|
+
attributes: {
|
|
85
|
+
type: string;
|
|
86
|
+
mode: string;
|
|
87
|
+
};
|
|
88
|
+
};
|
|
89
|
+
'atlassian-light-new-input-border': {
|
|
90
|
+
id: string;
|
|
91
|
+
displayName: string;
|
|
92
|
+
palette: string;
|
|
93
|
+
overrideTheme: string;
|
|
94
|
+
attributes: {
|
|
95
|
+
type: string;
|
|
96
|
+
mode: string;
|
|
97
|
+
};
|
|
98
|
+
};
|
|
99
|
+
'atlassian-dark-new-input-border': {
|
|
100
|
+
id: string;
|
|
101
|
+
displayName: string;
|
|
102
|
+
palette: string;
|
|
103
|
+
overrideTheme: string;
|
|
104
|
+
attributes: {
|
|
105
|
+
type: string;
|
|
106
|
+
mode: string;
|
|
107
|
+
};
|
|
108
|
+
};
|
|
109
|
+
};
|
|
110
|
+
export default themeConfig;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { ActiveThemeState } from './set-global-theme';
|
|
2
|
+
/**
|
|
3
|
+
* A MutationObserver which watches the `<html>` element for changes to the theme.
|
|
4
|
+
*
|
|
5
|
+
* In React, use the {@link useThemeObserver `useThemeObserver`} hook instead.
|
|
6
|
+
*
|
|
7
|
+
* @param {function} callback - A callback function which fires when the theme changes.
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* ```
|
|
11
|
+
* const observer = new ThemeMutationObserver((theme) => {});
|
|
12
|
+
* observer.observe();
|
|
13
|
+
* ```
|
|
14
|
+
*/
|
|
15
|
+
export declare class ThemeMutationObserver {
|
|
16
|
+
private callback;
|
|
17
|
+
observer: MutationObserver | null;
|
|
18
|
+
mediaObserver: any;
|
|
19
|
+
constructor(callback: (theme: Partial<ActiveThemeState>) => unknown);
|
|
20
|
+
observe(): void;
|
|
21
|
+
disconnect(): void;
|
|
22
|
+
}
|