@atlaskit/tokens 1.24.0 → 1.25.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +178 -164
- package/dist/cjs/artifacts/atlassian-dark-token-value-for-contrast-check.js +1 -2
- package/dist/cjs/artifacts/atlassian-light-token-value-for-contrast-check.js +1 -2
- package/dist/cjs/artifacts/generated-pairs.js +1 -1
- package/dist/cjs/artifacts/palettes-raw/legacy-palette.js +1 -2
- package/dist/cjs/artifacts/palettes-raw/palette.js +1 -2
- package/dist/cjs/artifacts/palettes-raw/shape-palette.js +1 -2
- package/dist/cjs/artifacts/palettes-raw/spacing-scale.js +1 -2
- package/dist/cjs/artifacts/palettes-raw/typography-palette.js +4 -5
- package/dist/cjs/artifacts/palettes-raw/updated-saturated-palette.js +2257 -0
- package/dist/cjs/artifacts/replacement-mapping.js +1 -2
- package/dist/cjs/artifacts/theme-import-map.js +14 -3
- package/dist/cjs/artifacts/themes/atlassian-dark-new-input-border.js +1 -2
- package/dist/cjs/artifacts/themes/atlassian-dark-saturated-palette-changes.js +12 -0
- package/dist/cjs/artifacts/themes/atlassian-dark.js +1 -2
- package/dist/cjs/artifacts/themes/atlassian-legacy-dark.js +1 -2
- package/dist/cjs/artifacts/themes/atlassian-legacy-light.js +1 -2
- package/dist/cjs/artifacts/themes/atlassian-light-new-input-border.js +1 -2
- package/dist/cjs/artifacts/themes/atlassian-light-saturated-palette-changes.js +12 -0
- package/dist/cjs/artifacts/themes/atlassian-light.js +1 -2
- package/dist/cjs/artifacts/themes/atlassian-shape.js +1 -2
- package/dist/cjs/artifacts/themes/atlassian-spacing.js +1 -2
- package/dist/cjs/artifacts/themes/atlassian-typography-adg3.js +2 -3
- package/dist/cjs/artifacts/themes/atlassian-typography-minor3.js +2 -3
- package/dist/cjs/artifacts/themes/atlassian-typography.js +2 -3
- package/dist/cjs/artifacts/token-default-values.js +14 -15
- package/dist/cjs/artifacts/token-names.js +12 -13
- package/dist/cjs/artifacts/tokens-raw/atlassian-dark-new-input-border.js +1 -2
- package/dist/cjs/artifacts/tokens-raw/atlassian-dark-saturated-palette-changes.js +8683 -0
- package/dist/cjs/artifacts/tokens-raw/atlassian-dark.js +1 -2
- package/dist/cjs/artifacts/tokens-raw/atlassian-legacy-dark.js +1 -2
- package/dist/cjs/artifacts/tokens-raw/atlassian-legacy-light.js +1 -2
- package/dist/cjs/artifacts/tokens-raw/atlassian-light-new-input-border.js +1 -2
- package/dist/cjs/artifacts/tokens-raw/atlassian-light-saturated-palette-changes.js +8645 -0
- package/dist/cjs/artifacts/tokens-raw/atlassian-light.js +1 -2
- package/dist/cjs/artifacts/tokens-raw/atlassian-shape.js +1 -2
- package/dist/cjs/artifacts/tokens-raw/atlassian-spacing.js +1 -2
- package/dist/cjs/artifacts/tokens-raw/atlassian-typography-adg3.js +34 -35
- package/dist/cjs/artifacts/tokens-raw/atlassian-typography-minor3.js +35 -36
- package/dist/cjs/artifacts/tokens-raw/atlassian-typography.js +35 -36
- package/dist/cjs/artifacts/typescript/atlassian-dark-token-names.js +1 -2
- package/dist/cjs/artifacts/typescript/atlassian-light-token-names.js +1 -2
- package/dist/cjs/constants.js +8 -16
- package/dist/cjs/custom-theme.js +2 -3
- package/dist/cjs/enable-global-theme.js +1 -2
- package/dist/cjs/get-global-theme.js +1 -2
- package/dist/cjs/get-ssr-auto-script.js +1 -2
- package/dist/cjs/get-theme-html-attrs.js +1 -2
- package/dist/cjs/get-theme-styles.js +12 -10
- package/dist/cjs/get-token-value.js +2 -3
- package/dist/cjs/get-token.js +2 -3
- package/dist/cjs/load-custom-theme-styles.js +1 -2
- package/dist/cjs/palettes/legacy-palette.js +1 -2
- package/dist/cjs/palettes/palette.js +1 -2
- package/dist/cjs/palettes/shape-palette.js +1 -2
- package/dist/cjs/palettes/spacing-scale.js +1 -2
- package/dist/cjs/palettes/typography-palette.js +2 -3
- package/dist/cjs/palettes/updated-saturated-palette.js +320 -0
- package/dist/cjs/set-global-theme.js +38 -4
- package/dist/cjs/theme-config.js +31 -12
- package/dist/cjs/theme-mutation-observer.js +2 -3
- package/dist/cjs/theme-state-transformer.js +3 -5
- package/dist/cjs/tokens/atlassian-dark/color/accent.js +1 -2
- package/dist/cjs/tokens/atlassian-dark/color/background.js +1 -2
- package/dist/cjs/tokens/atlassian-dark/color/border.js +1 -2
- package/dist/cjs/tokens/atlassian-dark/color/chart.js +1 -2
- package/dist/cjs/tokens/atlassian-dark/color/icon.js +1 -2
- package/dist/cjs/tokens/atlassian-dark/color/interaction.js +1 -2
- package/dist/cjs/tokens/atlassian-dark/color/skeleton.js +1 -2
- package/dist/cjs/tokens/atlassian-dark/color/text.js +1 -2
- package/dist/cjs/tokens/atlassian-dark/elevation/shadow.js +1 -2
- package/dist/cjs/tokens/atlassian-dark/elevation/surface.js +1 -2
- package/dist/cjs/tokens/atlassian-dark/opacity/opacity.js +1 -2
- package/dist/cjs/tokens/atlassian-dark/utility/utility.js +2 -3
- package/dist/cjs/tokens/atlassian-dark-new-input-border/color/border.js +1 -2
- package/dist/cjs/tokens/atlassian-dark-saturated-palette-changes/color/accent.js +21 -0
- package/dist/cjs/tokens/atlassian-dark-saturated-palette-changes/color/background.js +26 -0
- package/dist/cjs/tokens/atlassian-dark-saturated-palette-changes/color/icon.js +18 -0
- package/dist/cjs/tokens/atlassian-legacy-dark/color/accent.js +1 -2
- package/dist/cjs/tokens/atlassian-legacy-dark/color/background.js +1 -2
- package/dist/cjs/tokens/atlassian-legacy-dark/color/border.js +1 -2
- package/dist/cjs/tokens/atlassian-legacy-dark/color/chart.js +1 -2
- package/dist/cjs/tokens/atlassian-legacy-dark/color/icon.js +1 -2
- package/dist/cjs/tokens/atlassian-legacy-dark/color/interaction.js +1 -2
- package/dist/cjs/tokens/atlassian-legacy-dark/color/skeleton.js +1 -2
- package/dist/cjs/tokens/atlassian-legacy-dark/color/text.js +1 -2
- package/dist/cjs/tokens/atlassian-legacy-dark/elevation/shadow.js +1 -2
- package/dist/cjs/tokens/atlassian-legacy-dark/elevation/surface.js +1 -2
- package/dist/cjs/tokens/atlassian-legacy-dark/opacity/opacity.js +1 -2
- package/dist/cjs/tokens/atlassian-legacy-dark/utility/utility.js +2 -3
- package/dist/cjs/tokens/atlassian-legacy-light/color/accent.js +1 -2
- package/dist/cjs/tokens/atlassian-legacy-light/color/background.js +1 -2
- package/dist/cjs/tokens/atlassian-legacy-light/color/border.js +1 -2
- package/dist/cjs/tokens/atlassian-legacy-light/color/chart.js +1 -2
- package/dist/cjs/tokens/atlassian-legacy-light/color/icon.js +1 -2
- package/dist/cjs/tokens/atlassian-legacy-light/color/interaction.js +1 -2
- package/dist/cjs/tokens/atlassian-legacy-light/color/skeleton.js +1 -2
- package/dist/cjs/tokens/atlassian-legacy-light/color/text.js +1 -2
- package/dist/cjs/tokens/atlassian-legacy-light/elevation/shadow.js +1 -2
- package/dist/cjs/tokens/atlassian-legacy-light/elevation/surface.js +1 -2
- package/dist/cjs/tokens/atlassian-legacy-light/opacity/opacity.js +1 -2
- package/dist/cjs/tokens/atlassian-legacy-light/utility/utility.js +2 -3
- package/dist/cjs/tokens/atlassian-light/color/accent.js +1 -2
- package/dist/cjs/tokens/atlassian-light/color/background.js +1 -2
- package/dist/cjs/tokens/atlassian-light/color/border.js +1 -2
- package/dist/cjs/tokens/atlassian-light/color/chart.js +1 -2
- package/dist/cjs/tokens/atlassian-light/color/icon.js +1 -2
- package/dist/cjs/tokens/atlassian-light/color/interaction.js +1 -2
- package/dist/cjs/tokens/atlassian-light/color/skeleton.js +1 -2
- package/dist/cjs/tokens/atlassian-light/color/text.js +1 -2
- package/dist/cjs/tokens/atlassian-light/elevation/shadow.js +1 -2
- package/dist/cjs/tokens/atlassian-light/elevation/surface.js +1 -2
- package/dist/cjs/tokens/atlassian-light/opacity/opacity.js +1 -2
- package/dist/cjs/tokens/atlassian-light/utility/utility.js +2 -3
- package/dist/cjs/tokens/atlassian-light-new-input-border/color/border.js +1 -2
- package/dist/cjs/tokens/atlassian-light-saturated-palette-changes/color/accent.js +35 -0
- package/dist/cjs/tokens/atlassian-light-saturated-palette-changes/color/background.js +26 -0
- package/dist/cjs/tokens/atlassian-light-saturated-palette-changes/color/icon.js +16 -0
- package/dist/cjs/tokens/atlassian-shape/shape.js +1 -2
- package/dist/cjs/tokens/atlassian-spacing/spacing.js +1 -2
- package/dist/cjs/tokens/atlassian-typography/font-family.js +1 -2
- package/dist/cjs/tokens/atlassian-typography/letter-spacing.js +1 -2
- package/dist/cjs/tokens/atlassian-typography/theme.js +11 -12
- package/dist/cjs/tokens/atlassian-typography-adg3/font-family.js +1 -2
- package/dist/cjs/tokens/atlassian-typography-adg3/font-size.js +1 -2
- package/dist/cjs/tokens/atlassian-typography-adg3/font-weight.js +1 -2
- package/dist/cjs/tokens/atlassian-typography-adg3/letter-spacing.js +1 -2
- package/dist/cjs/tokens/atlassian-typography-adg3/line-height.js +1 -2
- package/dist/cjs/tokens/atlassian-typography-adg3/theme.js +12 -13
- package/dist/cjs/tokens/atlassian-typography-minor3/font-family.js +1 -2
- package/dist/cjs/tokens/atlassian-typography-minor3/letter-spacing.js +1 -2
- package/dist/cjs/tokens/atlassian-typography-minor3/theme.js +12 -13
- package/dist/cjs/tokens/default/color/accent.js +1 -2
- package/dist/cjs/tokens/default/color/background.js +1 -2
- package/dist/cjs/tokens/default/color/border.js +1 -2
- package/dist/cjs/tokens/default/color/chart.js +1 -2
- package/dist/cjs/tokens/default/color/icon.js +1 -2
- package/dist/cjs/tokens/default/color/interaction.js +1 -2
- package/dist/cjs/tokens/default/color/skeleton.js +1 -2
- package/dist/cjs/tokens/default/color/text.js +1 -2
- package/dist/cjs/tokens/default/elevation/shadow.js +1 -2
- package/dist/cjs/tokens/default/elevation/surface.js +1 -2
- package/dist/cjs/tokens/default/opacity/opacity.js +1 -2
- package/dist/cjs/tokens/default/shape/shape.js +1 -2
- package/dist/cjs/tokens/default/spacing/spacing.js +1 -2
- package/dist/cjs/tokens/default/typography/font-family.js +1 -2
- package/dist/cjs/tokens/default/typography/font-size.js +1 -2
- package/dist/cjs/tokens/default/typography/font-weight.js +1 -2
- package/dist/cjs/tokens/default/typography/font.js +11 -12
- package/dist/cjs/tokens/default/typography/letter-spacing.js +1 -2
- package/dist/cjs/tokens/default/typography/line-height.js +1 -2
- package/dist/cjs/tokens/default/utility/utility.js +2 -3
- package/dist/cjs/use-theme-observer.js +1 -2
- package/dist/cjs/utils/color-detection.js +3 -5
- package/dist/cjs/utils/color-mode-listeners.js +1 -2
- package/dist/cjs/utils/color-utils.js +1 -2
- package/dist/cjs/utils/custom-theme-token-contrast-check.js +3 -5
- package/dist/cjs/utils/generate-custom-color-ramp.js +5 -9
- package/dist/cjs/utils/get-theme-preferences.js +27 -6
- package/dist/cjs/utils/hash.js +2 -3
- package/dist/cjs/utils/hct-color-utils/contrast.js +2 -3
- package/dist/cjs/utils/hct-color-utils/hct.js +7 -7
- package/dist/cjs/utils/theme-loading.js +3 -6
- package/dist/cjs/utils/token-ids.js +4 -7
- package/dist/cjs/utils/token-order.js +2 -3
- package/dist/es2019/artifacts/palettes-raw/typography-palette.js +3 -3
- package/dist/es2019/artifacts/palettes-raw/updated-saturated-palette.js +2251 -0
- package/dist/es2019/artifacts/theme-import-map.js +5 -1
- package/dist/es2019/artifacts/themes/atlassian-dark-saturated-palette-changes.js +399 -0
- package/dist/es2019/artifacts/themes/atlassian-light-saturated-palette-changes.js +399 -0
- package/dist/es2019/artifacts/themes/atlassian-typography-adg3.js +13 -13
- package/dist/es2019/artifacts/themes/atlassian-typography-minor3.js +14 -14
- package/dist/es2019/artifacts/themes/atlassian-typography.js +14 -14
- package/dist/es2019/artifacts/token-default-values.js +13 -13
- package/dist/es2019/artifacts/token-names.js +11 -11
- package/dist/es2019/artifacts/tokens-raw/atlassian-dark-saturated-palette-changes.js +8677 -0
- package/dist/es2019/artifacts/tokens-raw/atlassian-light-saturated-palette-changes.js +8639 -0
- package/dist/es2019/artifacts/tokens-raw/atlassian-typography-adg3.js +33 -33
- package/dist/es2019/artifacts/tokens-raw/atlassian-typography-minor3.js +34 -34
- package/dist/es2019/artifacts/tokens-raw/atlassian-typography.js +34 -34
- package/dist/es2019/get-theme-styles.js +7 -4
- package/dist/es2019/get-token-value.js +1 -1
- package/dist/es2019/get-token.js +1 -1
- package/dist/es2019/palettes/typography-palette.js +1 -1
- package/dist/es2019/palettes/updated-saturated-palette.js +312 -0
- package/dist/es2019/set-global-theme.js +8 -2
- package/dist/es2019/theme-config.js +25 -1
- package/dist/es2019/tokens/atlassian-dark-saturated-palette-changes/color/accent.js +15 -0
- package/dist/es2019/tokens/atlassian-dark-saturated-palette-changes/color/background.js +20 -0
- package/dist/es2019/tokens/atlassian-dark-saturated-palette-changes/color/icon.js +12 -0
- package/dist/es2019/tokens/atlassian-light-saturated-palette-changes/color/accent.js +29 -0
- package/dist/es2019/tokens/atlassian-light-saturated-palette-changes/color/background.js +20 -0
- package/dist/es2019/tokens/atlassian-light-saturated-palette-changes/color/icon.js +10 -0
- package/dist/es2019/tokens/atlassian-typography/theme.js +10 -10
- package/dist/es2019/tokens/atlassian-typography-adg3/theme.js +10 -10
- package/dist/es2019/tokens/atlassian-typography-minor3/theme.js +10 -10
- package/dist/es2019/tokens/default/typography/font.js +10 -10
- package/dist/es2019/utils/get-theme-preferences.js +26 -2
- package/dist/es2019/utils/hct-color-utils/hct.js +3 -1
- package/dist/esm/artifacts/palettes-raw/typography-palette.js +3 -3
- package/dist/esm/artifacts/palettes-raw/updated-saturated-palette.js +2251 -0
- package/dist/esm/artifacts/theme-import-map.js +9 -1
- package/dist/esm/artifacts/themes/atlassian-dark-saturated-palette-changes.js +6 -0
- package/dist/esm/artifacts/themes/atlassian-light-saturated-palette-changes.js +6 -0
- package/dist/esm/artifacts/themes/atlassian-typography-adg3.js +2 -2
- package/dist/esm/artifacts/themes/atlassian-typography-minor3.js +2 -2
- package/dist/esm/artifacts/themes/atlassian-typography.js +2 -2
- package/dist/esm/artifacts/token-default-values.js +13 -13
- package/dist/esm/artifacts/token-names.js +11 -11
- package/dist/esm/artifacts/tokens-raw/atlassian-dark-saturated-palette-changes.js +8677 -0
- package/dist/esm/artifacts/tokens-raw/atlassian-light-saturated-palette-changes.js +8639 -0
- package/dist/esm/artifacts/tokens-raw/atlassian-typography-adg3.js +33 -33
- package/dist/esm/artifacts/tokens-raw/atlassian-typography-minor3.js +34 -34
- package/dist/esm/artifacts/tokens-raw/atlassian-typography.js +34 -34
- package/dist/esm/custom-theme.js +1 -1
- package/dist/esm/get-theme-styles.js +12 -9
- package/dist/esm/get-token-value.js +1 -1
- package/dist/esm/get-token.js +1 -1
- package/dist/esm/palettes/typography-palette.js +1 -1
- package/dist/esm/palettes/updated-saturated-palette.js +313 -0
- package/dist/esm/set-global-theme.js +38 -3
- package/dist/esm/theme-config.js +25 -1
- package/dist/esm/tokens/atlassian-dark-saturated-palette-changes/color/accent.js +15 -0
- package/dist/esm/tokens/atlassian-dark-saturated-palette-changes/color/background.js +20 -0
- package/dist/esm/tokens/atlassian-dark-saturated-palette-changes/color/icon.js +12 -0
- package/dist/esm/tokens/atlassian-light-saturated-palette-changes/color/accent.js +29 -0
- package/dist/esm/tokens/atlassian-light-saturated-palette-changes/color/background.js +20 -0
- package/dist/esm/tokens/atlassian-light-saturated-palette-changes/color/icon.js +10 -0
- package/dist/esm/tokens/atlassian-typography/theme.js +10 -10
- package/dist/esm/tokens/atlassian-typography-adg3/theme.js +10 -10
- package/dist/esm/tokens/atlassian-typography-minor3/theme.js +10 -10
- package/dist/esm/tokens/default/typography/font.js +10 -10
- package/dist/esm/utils/get-theme-preferences.js +24 -2
- package/dist/esm/utils/hct-color-utils/hct.js +3 -1
- package/dist/types/artifacts/palettes-raw/typography-palette.d.ts +1 -1
- package/dist/types/artifacts/palettes-raw/updated-saturated-palette.d.ts +41 -0
- package/dist/types/artifacts/theme-import-map.d.ts +1 -1
- package/dist/types/artifacts/themes/atlassian-dark-saturated-palette-changes.d.ts +7 -0
- package/dist/types/artifacts/themes/atlassian-light-saturated-palette-changes.d.ts +7 -0
- package/dist/types/artifacts/themes/atlassian-typography-adg3.d.ts +2 -2
- package/dist/types/artifacts/themes/atlassian-typography-minor3.d.ts +2 -2
- package/dist/types/artifacts/themes/atlassian-typography.d.ts +2 -2
- package/dist/types/artifacts/token-default-values.d.ts +13 -13
- package/dist/types/artifacts/token-names.d.ts +21 -21
- package/dist/types/artifacts/tokens-raw/atlassian-dark-saturated-palette-changes.d.ts +109 -0
- package/dist/types/artifacts/tokens-raw/atlassian-light-saturated-palette-changes.d.ts +89 -0
- package/dist/types/artifacts/tokens-raw/atlassian-typography-adg3.d.ts +1 -1
- package/dist/types/artifacts/tokens-raw/atlassian-typography-minor3.d.ts +1 -1
- package/dist/types/artifacts/tokens-raw/atlassian-typography.d.ts +1 -1
- package/dist/types/palettes/palette.d.ts +1 -1
- package/dist/types/palettes/updated-saturated-palette.d.ts +10 -0
- package/dist/types/theme-config.d.ts +8 -4
- package/dist/types/tokens/atlassian-dark/utility/utility.d.ts +1 -1
- package/dist/types/tokens/atlassian-dark-saturated-palette-changes/color/accent.d.ts +4 -0
- package/dist/types/tokens/atlassian-dark-saturated-palette-changes/color/background.d.ts +4 -0
- package/dist/types/tokens/atlassian-dark-saturated-palette-changes/color/icon.d.ts +4 -0
- package/dist/types/tokens/atlassian-light/utility/utility.d.ts +1 -1
- package/dist/types/tokens/atlassian-light-saturated-palette-changes/color/accent.d.ts +4 -0
- package/dist/types/tokens/atlassian-light-saturated-palette-changes/color/background.d.ts +4 -0
- package/dist/types/tokens/atlassian-light-saturated-palette-changes/color/icon.d.ts +4 -0
- package/dist/types/tokens/atlassian-typography-adg3/theme.d.ts +13 -13
- package/dist/types/tokens/atlassian-typography-minor3/theme.d.ts +13 -13
- package/dist/types/tokens/default/utility/utility.d.ts +1 -1
- package/dist/types/types.d.ts +11 -11
- package/dist/types/utils/get-theme-preferences.d.ts +1 -0
- package/dist/types-ts4.5/artifacts/palettes-raw/typography-palette.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/palettes-raw/updated-saturated-palette.d.ts +41 -0
- package/dist/types-ts4.5/artifacts/theme-import-map.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/themes/atlassian-dark-saturated-palette-changes.d.ts +7 -0
- package/dist/types-ts4.5/artifacts/themes/atlassian-light-saturated-palette-changes.d.ts +7 -0
- package/dist/types-ts4.5/artifacts/themes/atlassian-typography-adg3.d.ts +2 -2
- package/dist/types-ts4.5/artifacts/themes/atlassian-typography-minor3.d.ts +2 -2
- package/dist/types-ts4.5/artifacts/themes/atlassian-typography.d.ts +2 -2
- package/dist/types-ts4.5/artifacts/token-default-values.d.ts +13 -13
- package/dist/types-ts4.5/artifacts/token-names.d.ts +21 -21
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-dark-saturated-palette-changes.d.ts +109 -0
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-light-saturated-palette-changes.d.ts +89 -0
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-typography-adg3.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-typography-minor3.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-typography.d.ts +1 -1
- package/dist/types-ts4.5/palettes/palette.d.ts +1 -1
- package/dist/types-ts4.5/palettes/updated-saturated-palette.d.ts +10 -0
- package/dist/types-ts4.5/theme-config.d.ts +12 -4
- package/dist/types-ts4.5/tokens/atlassian-dark/utility/utility.d.ts +1 -1
- package/dist/types-ts4.5/tokens/atlassian-dark-saturated-palette-changes/color/accent.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-dark-saturated-palette-changes/color/background.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-dark-saturated-palette-changes/color/icon.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-light/utility/utility.d.ts +1 -1
- package/dist/types-ts4.5/tokens/atlassian-light-saturated-palette-changes/color/accent.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-light-saturated-palette-changes/color/background.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-light-saturated-palette-changes/color/icon.d.ts +4 -0
- package/dist/types-ts4.5/tokens/atlassian-typography-adg3/theme.d.ts +13 -13
- package/dist/types-ts4.5/tokens/atlassian-typography-minor3/theme.d.ts +13 -13
- package/dist/types-ts4.5/tokens/default/utility/utility.d.ts +1 -1
- package/dist/types-ts4.5/types.d.ts +11 -11
- package/dist/types-ts4.5/utils/get-theme-preferences.d.ts +1 -0
- package/figma/atlassian-dark-saturated-palette-changes.json +3540 -0
- package/figma/atlassian-light-saturated-palette-changes.json +3519 -0
- package/figma/atlassian-typography-adg3.json +2 -2
- package/figma/atlassian-typography-minor3.json +3 -3
- package/figma/atlassian-typography.json +3 -3
- package/package.json +5 -1
- package/report.api.md +32 -22
- package/tmp/api-report-tmp.d.ts +26 -24
|
@@ -33,24 +33,27 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
33
33
|
*/
|
|
34
34
|
var getThemeStyles = /*#__PURE__*/function () {
|
|
35
35
|
var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(preferences) {
|
|
36
|
-
var themePreferences, results;
|
|
36
|
+
var themePreferences, themeOverridePreferences, themeState, results;
|
|
37
37
|
return _regenerator.default.wrap(function _callee3$(_context3) {
|
|
38
38
|
while (1) switch (_context3.prev = _context3.next) {
|
|
39
39
|
case 0:
|
|
40
|
+
themeOverridePreferences = [];
|
|
40
41
|
if (preferences === 'all') {
|
|
41
42
|
themePreferences = _themeConfig.themeIdsWithOverrides;
|
|
42
43
|
} else {
|
|
43
|
-
|
|
44
|
+
themeState = {
|
|
44
45
|
colorMode: (preferences === null || preferences === void 0 ? void 0 : preferences.colorMode) || _themeConfig.themeStateDefaults['colorMode'],
|
|
45
46
|
dark: (preferences === null || preferences === void 0 ? void 0 : preferences.dark) || _themeConfig.themeStateDefaults['dark'],
|
|
46
47
|
light: (preferences === null || preferences === void 0 ? void 0 : preferences.light) || _themeConfig.themeStateDefaults['light'],
|
|
47
48
|
shape: (preferences === null || preferences === void 0 ? void 0 : preferences.shape) || _themeConfig.themeStateDefaults['shape'],
|
|
48
49
|
spacing: (preferences === null || preferences === void 0 ? void 0 : preferences.spacing) || _themeConfig.themeStateDefaults['spacing'],
|
|
49
50
|
typography: (preferences === null || preferences === void 0 ? void 0 : preferences.typography) || _themeConfig.themeStateDefaults['typography']
|
|
50
|
-
}
|
|
51
|
+
};
|
|
52
|
+
themePreferences = (0, _getThemePreferences.getThemePreferences)(themeState);
|
|
53
|
+
themeOverridePreferences = (0, _getThemePreferences.getThemeOverridePreferences)(themeState);
|
|
51
54
|
}
|
|
52
|
-
_context3.next =
|
|
53
|
-
return Promise.all([].concat((0, _toConsumableArray2.default)(themePreferences.map( /*#__PURE__*/function () {
|
|
55
|
+
_context3.next = 4;
|
|
56
|
+
return Promise.all([].concat((0, _toConsumableArray2.default)([].concat((0, _toConsumableArray2.default)(themePreferences), (0, _toConsumableArray2.default)(themeOverridePreferences)).map( /*#__PURE__*/function () {
|
|
54
57
|
var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(themeId) {
|
|
55
58
|
var css;
|
|
56
59
|
return _regenerator.default.wrap(function _callee$(_context) {
|
|
@@ -89,7 +92,7 @@ var getThemeStyles = /*#__PURE__*/function () {
|
|
|
89
92
|
return _regenerator.default.wrap(function _callee2$(_context2) {
|
|
90
93
|
while (1) switch (_context2.prev = _context2.next) {
|
|
91
94
|
case 0:
|
|
92
|
-
if (!(preferences !== 'all' && preferences !== null && preferences !== void 0 && preferences.UNSAFE_themeOptions && (0, _colorUtils.isValidBrandHex)(preferences === null || preferences === void 0
|
|
95
|
+
if (!(preferences !== 'all' && preferences !== null && preferences !== void 0 && preferences.UNSAFE_themeOptions && (0, _colorUtils.isValidBrandHex)(preferences === null || preferences === void 0 || (_preferences$UNSAFE_t = preferences.UNSAFE_themeOptions) === null || _preferences$UNSAFE_t === void 0 ? void 0 : _preferences$UNSAFE_t.brandColor))) {
|
|
93
96
|
_context2.next = 15;
|
|
94
97
|
break;
|
|
95
98
|
}
|
|
@@ -120,12 +123,12 @@ var getThemeStyles = /*#__PURE__*/function () {
|
|
|
120
123
|
}
|
|
121
124
|
}, _callee2, null, [[1, 12]]);
|
|
122
125
|
}))()]));
|
|
123
|
-
case
|
|
126
|
+
case 4:
|
|
124
127
|
results = _context3.sent;
|
|
125
128
|
return _context3.abrupt("return", results.flat().filter(function (theme) {
|
|
126
129
|
return theme !== undefined;
|
|
127
130
|
}));
|
|
128
|
-
case
|
|
131
|
+
case 6:
|
|
129
132
|
case "end":
|
|
130
133
|
return _context3.stop();
|
|
131
134
|
}
|
|
@@ -135,5 +138,4 @@ var getThemeStyles = /*#__PURE__*/function () {
|
|
|
135
138
|
return _ref.apply(this, arguments);
|
|
136
139
|
};
|
|
137
140
|
}();
|
|
138
|
-
var _default = getThemeStyles;
|
|
139
|
-
exports.default = _default;
|
|
141
|
+
var _default = exports.default = getThemeStyles;
|
|
@@ -8,7 +8,7 @@ exports.default = void 0;
|
|
|
8
8
|
var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
|
|
9
9
|
var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
|
|
10
10
|
var name = "@atlaskit/tokens";
|
|
11
|
-
var version = "1.
|
|
11
|
+
var version = "1.25.1";
|
|
12
12
|
/**
|
|
13
13
|
* Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
|
|
14
14
|
* resulting CSS Custom Property.
|
|
@@ -44,5 +44,4 @@ function getTokenValue(tokenId) {
|
|
|
44
44
|
tokenValue = tokenValue || fallback;
|
|
45
45
|
return tokenValue;
|
|
46
46
|
}
|
|
47
|
-
var _default = getTokenValue;
|
|
48
|
-
exports.default = _default;
|
|
47
|
+
var _default = exports.default = getTokenValue;
|
package/dist/cjs/get-token.js
CHANGED
|
@@ -9,7 +9,7 @@ var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
|
|
|
9
9
|
var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
|
|
10
10
|
var _constants = require("./constants");
|
|
11
11
|
var name = "@atlaskit/tokens";
|
|
12
|
-
var version = "1.
|
|
12
|
+
var version = "1.25.1";
|
|
13
13
|
/**
|
|
14
14
|
* Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
|
|
15
15
|
* This should be used to implement design decisions throughout your application.
|
|
@@ -45,5 +45,4 @@ function token(path, fallback) {
|
|
|
45
45
|
var tokenCall = fallback ? "var(".concat(token, ", ").concat(fallback, ")") : "var(".concat(token, ")");
|
|
46
46
|
return tokenCall;
|
|
47
47
|
}
|
|
48
|
-
var _default = token;
|
|
49
|
-
exports.default = _default;
|
|
48
|
+
var _default = exports.default = token;
|
|
@@ -148,7 +148,7 @@ var fontFamilyPalette = {
|
|
|
148
148
|
* @see https://fonts.google.com/knowledge/glossary/system_font_web_safe_font
|
|
149
149
|
*/
|
|
150
150
|
FontFamilyWebSans: {
|
|
151
|
-
value: "ui-sans-serif, \"Segoe UI\", system-ui,
|
|
151
|
+
value: "ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif",
|
|
152
152
|
attributes: {
|
|
153
153
|
group: 'fontFamily'
|
|
154
154
|
}
|
|
@@ -270,5 +270,4 @@ var fontSizeScale = {
|
|
|
270
270
|
var typographyPalette = {
|
|
271
271
|
typography: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, fontSizeScale), fontWeightScale), fontFamilyPalette), lineHeightScale), letterSpacingScale)
|
|
272
272
|
};
|
|
273
|
-
var _default = typographyPalette;
|
|
274
|
-
exports.default = _default;
|
|
273
|
+
var _default = exports.default = typographyPalette;
|
|
@@ -0,0 +1,320 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
exports.isObject = isObject;
|
|
9
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
|
+
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
11
|
+
var _palette = _interopRequireDefault(require("./palette"));
|
|
12
|
+
/**
|
|
13
|
+
* Simple object check.
|
|
14
|
+
* @param item
|
|
15
|
+
* @returns {boolean}
|
|
16
|
+
*/
|
|
17
|
+
function isObject(item) {
|
|
18
|
+
return item && (0, _typeof2.default)(item) === 'object' && !Array.isArray(item);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* Deep merge two objects.
|
|
23
|
+
* @param target
|
|
24
|
+
* @param ...sources
|
|
25
|
+
*/
|
|
26
|
+
function mergeDeep(target) {
|
|
27
|
+
for (var _len = arguments.length, sources = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
28
|
+
sources[_key - 1] = arguments[_key];
|
|
29
|
+
}
|
|
30
|
+
if (!sources.length) {
|
|
31
|
+
return target;
|
|
32
|
+
}
|
|
33
|
+
var source = sources.shift();
|
|
34
|
+
if (isObject(target) && isObject(source)) {
|
|
35
|
+
for (var key in source) {
|
|
36
|
+
if (isObject(source[key])) {
|
|
37
|
+
if (!target[key]) {
|
|
38
|
+
Object.assign(target, (0, _defineProperty2.default)({}, key, {}));
|
|
39
|
+
}
|
|
40
|
+
mergeDeep(target[key], source[key]);
|
|
41
|
+
} else {
|
|
42
|
+
Object.assign(target, (0, _defineProperty2.default)({}, key, source[key]));
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
return mergeDeep.apply(void 0, [target].concat(sources));
|
|
47
|
+
}
|
|
48
|
+
var palette = mergeDeep(JSON.parse(JSON.stringify(_palette.default)), {
|
|
49
|
+
color: {
|
|
50
|
+
palette: {
|
|
51
|
+
Blue1000: {
|
|
52
|
+
value: '#1C2B41',
|
|
53
|
+
attributes: {
|
|
54
|
+
group: 'palette',
|
|
55
|
+
category: 'blue'
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
Red100: {
|
|
59
|
+
value: '#FFECEB',
|
|
60
|
+
attributes: {
|
|
61
|
+
group: 'palette',
|
|
62
|
+
category: 'red'
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
Red200: {
|
|
66
|
+
value: '#FFD5D2',
|
|
67
|
+
attributes: {
|
|
68
|
+
group: 'palette',
|
|
69
|
+
category: 'red'
|
|
70
|
+
}
|
|
71
|
+
},
|
|
72
|
+
Red300: {
|
|
73
|
+
value: '#FD9891',
|
|
74
|
+
attributes: {
|
|
75
|
+
group: 'palette',
|
|
76
|
+
category: 'red'
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
Red400: {
|
|
80
|
+
value: '#F87168',
|
|
81
|
+
attributes: {
|
|
82
|
+
group: 'palette',
|
|
83
|
+
category: 'red'
|
|
84
|
+
}
|
|
85
|
+
},
|
|
86
|
+
Red500: {
|
|
87
|
+
value: '#F15B50',
|
|
88
|
+
attributes: {
|
|
89
|
+
group: 'palette',
|
|
90
|
+
category: 'red'
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
Red600: {
|
|
94
|
+
value: '#E2483D',
|
|
95
|
+
attributes: {
|
|
96
|
+
group: 'palette',
|
|
97
|
+
category: 'red'
|
|
98
|
+
}
|
|
99
|
+
},
|
|
100
|
+
Red700: {
|
|
101
|
+
value: '#C9372C',
|
|
102
|
+
attributes: {
|
|
103
|
+
group: 'palette',
|
|
104
|
+
category: 'red'
|
|
105
|
+
}
|
|
106
|
+
},
|
|
107
|
+
Red800: {
|
|
108
|
+
value: '#AE2E24',
|
|
109
|
+
attributes: {
|
|
110
|
+
group: 'palette',
|
|
111
|
+
category: 'red'
|
|
112
|
+
}
|
|
113
|
+
},
|
|
114
|
+
Red900: {
|
|
115
|
+
value: '#5D1F1A',
|
|
116
|
+
attributes: {
|
|
117
|
+
group: 'palette',
|
|
118
|
+
category: 'red'
|
|
119
|
+
}
|
|
120
|
+
},
|
|
121
|
+
Red1000: {
|
|
122
|
+
value: '#42221F',
|
|
123
|
+
attributes: {
|
|
124
|
+
group: 'palette',
|
|
125
|
+
category: 'red'
|
|
126
|
+
}
|
|
127
|
+
},
|
|
128
|
+
Yellow1000: {
|
|
129
|
+
value: '#332E1B',
|
|
130
|
+
attributes: {
|
|
131
|
+
group: 'palette',
|
|
132
|
+
category: 'yellow'
|
|
133
|
+
}
|
|
134
|
+
},
|
|
135
|
+
Green100: {
|
|
136
|
+
value: '#DCFFF1',
|
|
137
|
+
attributes: {
|
|
138
|
+
group: 'palette',
|
|
139
|
+
category: 'green'
|
|
140
|
+
}
|
|
141
|
+
},
|
|
142
|
+
Green1000: {
|
|
143
|
+
value: '#1C3329',
|
|
144
|
+
attributes: {
|
|
145
|
+
group: 'palette',
|
|
146
|
+
category: 'green'
|
|
147
|
+
}
|
|
148
|
+
},
|
|
149
|
+
Purple1000: {
|
|
150
|
+
value: '#2B273F',
|
|
151
|
+
attributes: {
|
|
152
|
+
group: 'palette',
|
|
153
|
+
category: 'purple'
|
|
154
|
+
}
|
|
155
|
+
},
|
|
156
|
+
Teal100: {
|
|
157
|
+
value: '#E7F9FF',
|
|
158
|
+
attributes: {
|
|
159
|
+
group: 'palette',
|
|
160
|
+
category: 'teal'
|
|
161
|
+
}
|
|
162
|
+
},
|
|
163
|
+
Teal200: {
|
|
164
|
+
value: '#C6EDFB',
|
|
165
|
+
attributes: {
|
|
166
|
+
group: 'palette',
|
|
167
|
+
category: 'teal'
|
|
168
|
+
}
|
|
169
|
+
},
|
|
170
|
+
Teal300: {
|
|
171
|
+
value: '#9DD9EE',
|
|
172
|
+
attributes: {
|
|
173
|
+
group: 'palette',
|
|
174
|
+
category: 'teal'
|
|
175
|
+
}
|
|
176
|
+
},
|
|
177
|
+
Teal400: {
|
|
178
|
+
value: '#6CC3E0',
|
|
179
|
+
attributes: {
|
|
180
|
+
group: 'palette',
|
|
181
|
+
category: 'teal'
|
|
182
|
+
}
|
|
183
|
+
},
|
|
184
|
+
Teal500: {
|
|
185
|
+
value: '#42B2D7',
|
|
186
|
+
attributes: {
|
|
187
|
+
group: 'palette',
|
|
188
|
+
category: 'teal'
|
|
189
|
+
}
|
|
190
|
+
},
|
|
191
|
+
Teal600: {
|
|
192
|
+
value: '#2898BD',
|
|
193
|
+
attributes: {
|
|
194
|
+
group: 'palette',
|
|
195
|
+
category: 'teal'
|
|
196
|
+
}
|
|
197
|
+
},
|
|
198
|
+
Teal700: {
|
|
199
|
+
value: '#227D9B',
|
|
200
|
+
attributes: {
|
|
201
|
+
group: 'palette',
|
|
202
|
+
category: 'teal'
|
|
203
|
+
}
|
|
204
|
+
},
|
|
205
|
+
Teal800: {
|
|
206
|
+
value: '#206A83',
|
|
207
|
+
attributes: {
|
|
208
|
+
group: 'palette',
|
|
209
|
+
category: 'teal'
|
|
210
|
+
}
|
|
211
|
+
},
|
|
212
|
+
Teal900: {
|
|
213
|
+
value: '#164555',
|
|
214
|
+
attributes: {
|
|
215
|
+
group: 'palette',
|
|
216
|
+
category: 'teal'
|
|
217
|
+
}
|
|
218
|
+
},
|
|
219
|
+
Teal1000: {
|
|
220
|
+
value: '#1E3137',
|
|
221
|
+
attributes: {
|
|
222
|
+
group: 'palette',
|
|
223
|
+
category: 'teal'
|
|
224
|
+
}
|
|
225
|
+
},
|
|
226
|
+
Orange100: {
|
|
227
|
+
value: '#FFF3EB',
|
|
228
|
+
attributes: {
|
|
229
|
+
group: 'palette',
|
|
230
|
+
category: 'orange'
|
|
231
|
+
}
|
|
232
|
+
},
|
|
233
|
+
Orange200: {
|
|
234
|
+
value: '#FEDEC8',
|
|
235
|
+
attributes: {
|
|
236
|
+
group: 'palette',
|
|
237
|
+
category: 'orange'
|
|
238
|
+
}
|
|
239
|
+
},
|
|
240
|
+
Orange300: {
|
|
241
|
+
value: '#FEC195',
|
|
242
|
+
attributes: {
|
|
243
|
+
group: 'palette',
|
|
244
|
+
category: 'orange'
|
|
245
|
+
}
|
|
246
|
+
},
|
|
247
|
+
Orange400: {
|
|
248
|
+
value: '#FEA362',
|
|
249
|
+
attributes: {
|
|
250
|
+
group: 'palette',
|
|
251
|
+
category: 'orange'
|
|
252
|
+
}
|
|
253
|
+
},
|
|
254
|
+
Orange500: {
|
|
255
|
+
value: '#F38A3F',
|
|
256
|
+
attributes: {
|
|
257
|
+
group: 'palette',
|
|
258
|
+
category: 'orange'
|
|
259
|
+
}
|
|
260
|
+
},
|
|
261
|
+
Orange600: {
|
|
262
|
+
value: '#E56910',
|
|
263
|
+
attributes: {
|
|
264
|
+
group: 'palette',
|
|
265
|
+
category: 'orange'
|
|
266
|
+
}
|
|
267
|
+
},
|
|
268
|
+
Orange700: {
|
|
269
|
+
value: '#C25100',
|
|
270
|
+
attributes: {
|
|
271
|
+
group: 'palette',
|
|
272
|
+
category: 'orange'
|
|
273
|
+
}
|
|
274
|
+
},
|
|
275
|
+
Orange800: {
|
|
276
|
+
value: '#A54800',
|
|
277
|
+
attributes: {
|
|
278
|
+
group: 'palette',
|
|
279
|
+
category: 'orange'
|
|
280
|
+
}
|
|
281
|
+
},
|
|
282
|
+
Orange900: {
|
|
283
|
+
value: '#702E00',
|
|
284
|
+
attributes: {
|
|
285
|
+
group: 'palette',
|
|
286
|
+
category: 'orange'
|
|
287
|
+
}
|
|
288
|
+
},
|
|
289
|
+
Orange1000: {
|
|
290
|
+
value: '#38291E',
|
|
291
|
+
attributes: {
|
|
292
|
+
group: 'palette',
|
|
293
|
+
category: 'orange'
|
|
294
|
+
}
|
|
295
|
+
},
|
|
296
|
+
Magenta1000: {
|
|
297
|
+
value: '#3D2232',
|
|
298
|
+
attributes: {
|
|
299
|
+
group: 'palette',
|
|
300
|
+
category: 'magenta'
|
|
301
|
+
}
|
|
302
|
+
},
|
|
303
|
+
Lime100: {
|
|
304
|
+
value: '#EFFFD6',
|
|
305
|
+
attributes: {
|
|
306
|
+
group: 'palette',
|
|
307
|
+
category: 'lime'
|
|
308
|
+
}
|
|
309
|
+
},
|
|
310
|
+
Lime1000: {
|
|
311
|
+
value: '#28311B',
|
|
312
|
+
attributes: {
|
|
313
|
+
group: 'palette',
|
|
314
|
+
category: 'lime'
|
|
315
|
+
}
|
|
316
|
+
}
|
|
317
|
+
}
|
|
318
|
+
}
|
|
319
|
+
});
|
|
320
|
+
var _default = exports.default = palette;
|
|
@@ -14,6 +14,9 @@ var _configurePage = _interopRequireDefault(require("./utils/configure-page"));
|
|
|
14
14
|
var _customThemeLoadingUtils = require("./utils/custom-theme-loading-utils");
|
|
15
15
|
var _getThemePreferences = require("./utils/get-theme-preferences");
|
|
16
16
|
var _themeLoading = require("./utils/theme-loading");
|
|
17
|
+
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
|
|
18
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
19
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
17
20
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
18
21
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
19
22
|
/**
|
|
@@ -60,6 +63,10 @@ var setGlobalTheme = /*#__PURE__*/function () {
|
|
|
60
63
|
loadingTasks,
|
|
61
64
|
mode,
|
|
62
65
|
attrOfMissingCustomStyles,
|
|
66
|
+
themeOverridePreferences,
|
|
67
|
+
_iterator,
|
|
68
|
+
_step,
|
|
69
|
+
themeId,
|
|
63
70
|
autoUnbind,
|
|
64
71
|
_args3 = arguments;
|
|
65
72
|
return _regenerator.default.wrap(function _callee3$(_context3) {
|
|
@@ -132,17 +139,44 @@ var setGlobalTheme = /*#__PURE__*/function () {
|
|
|
132
139
|
_context3.next = 9;
|
|
133
140
|
return Promise.all(loadingTasks);
|
|
134
141
|
case 9:
|
|
142
|
+
// Load override themes after standard themes
|
|
143
|
+
themeOverridePreferences = (0, _getThemePreferences.getThemeOverridePreferences)(themeState);
|
|
144
|
+
_iterator = _createForOfIteratorHelper(themeOverridePreferences);
|
|
145
|
+
_context3.prev = 11;
|
|
146
|
+
_iterator.s();
|
|
147
|
+
case 13:
|
|
148
|
+
if ((_step = _iterator.n()).done) {
|
|
149
|
+
_context3.next = 19;
|
|
150
|
+
break;
|
|
151
|
+
}
|
|
152
|
+
themeId = _step.value;
|
|
153
|
+
_context3.next = 17;
|
|
154
|
+
return loadingStrategy(themeId);
|
|
155
|
+
case 17:
|
|
156
|
+
_context3.next = 13;
|
|
157
|
+
break;
|
|
158
|
+
case 19:
|
|
159
|
+
_context3.next = 24;
|
|
160
|
+
break;
|
|
161
|
+
case 21:
|
|
162
|
+
_context3.prev = 21;
|
|
163
|
+
_context3.t0 = _context3["catch"](11);
|
|
164
|
+
_iterator.e(_context3.t0);
|
|
165
|
+
case 24:
|
|
166
|
+
_context3.prev = 24;
|
|
167
|
+
_iterator.f();
|
|
168
|
+
return _context3.finish(24);
|
|
169
|
+
case 27:
|
|
135
170
|
autoUnbind = (0, _configurePage.default)(themeState);
|
|
136
171
|
return _context3.abrupt("return", autoUnbind);
|
|
137
|
-
case
|
|
172
|
+
case 29:
|
|
138
173
|
case "end":
|
|
139
174
|
return _context3.stop();
|
|
140
175
|
}
|
|
141
|
-
}, _callee3);
|
|
176
|
+
}, _callee3, null, [[11, 21, 24, 27]]);
|
|
142
177
|
}));
|
|
143
178
|
return function setGlobalTheme() {
|
|
144
179
|
return _ref.apply(this, arguments);
|
|
145
180
|
};
|
|
146
181
|
}();
|
|
147
|
-
var _default = setGlobalTheme;
|
|
148
|
-
exports.default = _default;
|
|
182
|
+
var _default = exports.default = setGlobalTheme;
|
package/dist/cjs/theme-config.js
CHANGED
|
@@ -33,23 +33,20 @@ exports.themeStateDefaults = exports.themeOverrideIds = exports.themeIdsWithOver
|
|
|
33
33
|
* It may also be used as a selector for mode-specific overrides such as light/dark images.
|
|
34
34
|
* The idea is there may exist many color themes, but every theme must either fit into light or dark.
|
|
35
35
|
*/
|
|
36
|
-
var themeColorModes = ['light', 'dark', 'auto'];
|
|
37
|
-
exports.themeColorModes = themeColorModes;
|
|
36
|
+
var themeColorModes = exports.themeColorModes = ['light', 'dark', 'auto'];
|
|
38
37
|
/**
|
|
39
38
|
* Theme ids: The value that will be mounted to the DOM as a data attr
|
|
40
39
|
* For example: `data-theme="light:light dark:dark spacing:spacing"
|
|
41
40
|
*
|
|
42
41
|
* These ids must be kebab case
|
|
43
42
|
*/
|
|
44
|
-
var themeIds = ['light', 'dark', 'legacy-light', 'legacy-dark', 'spacing', 'typography', 'shape', 'typography-adg3', 'typography-minor3'];
|
|
45
|
-
exports.themeIds = themeIds;
|
|
43
|
+
var themeIds = exports.themeIds = ['light', 'dark', 'legacy-light', 'legacy-dark', 'spacing', 'typography', 'shape', 'typography-adg3', 'typography-minor3'];
|
|
46
44
|
/**
|
|
47
45
|
* Theme override ids: the equivalent of themeIds for theme overrides.
|
|
48
46
|
* Theme overrides are temporary and there may not be any defined at times.
|
|
49
47
|
*/
|
|
50
|
-
var themeOverrideIds = ['light-new-input-border', 'dark-new-input-border'];
|
|
51
|
-
exports.
|
|
52
|
-
var themeIdsWithOverrides = [].concat(themeIds, themeOverrideIds);
|
|
48
|
+
var themeOverrideIds = exports.themeOverrideIds = ['light-new-input-border', 'dark-new-input-border', 'light-saturated-palette-changes', 'dark-saturated-palette-changes'];
|
|
49
|
+
var themeIdsWithOverrides = exports.themeIdsWithOverrides = [].concat(themeIds, themeOverrideIds);
|
|
53
50
|
|
|
54
51
|
/**
|
|
55
52
|
* Theme to use a base. This will create the theme as
|
|
@@ -67,7 +64,7 @@ var themeIdsWithOverrides = [].concat(themeIds, themeOverrideIds);
|
|
|
67
64
|
* ThemeConfig: the source of truth for all theme meta-data.
|
|
68
65
|
* This object should be used whenever interfacing with themes.
|
|
69
66
|
*/
|
|
70
|
-
|
|
67
|
+
|
|
71
68
|
var themeConfig = {
|
|
72
69
|
'atlassian-light': {
|
|
73
70
|
id: 'light',
|
|
@@ -149,6 +146,30 @@ var themeConfig = {
|
|
|
149
146
|
mode: 'dark'
|
|
150
147
|
}
|
|
151
148
|
},
|
|
149
|
+
'atlassian-light-saturated-palette-changes': {
|
|
150
|
+
id: 'light-saturated-palette-changes',
|
|
151
|
+
displayName: 'Light Theme Saturated Palette Change',
|
|
152
|
+
palette: 'updatedSaturatedPalette',
|
|
153
|
+
override: 'light',
|
|
154
|
+
extends: 'light',
|
|
155
|
+
attributes: {
|
|
156
|
+
type: 'color',
|
|
157
|
+
mode: 'light',
|
|
158
|
+
extends: 'light'
|
|
159
|
+
}
|
|
160
|
+
},
|
|
161
|
+
'atlassian-dark-saturated-palette-changes': {
|
|
162
|
+
id: 'dark-saturated-palette-changes',
|
|
163
|
+
displayName: 'Dark Theme Saturated Palette Change',
|
|
164
|
+
palette: 'updatedSaturatedPalette',
|
|
165
|
+
override: 'dark',
|
|
166
|
+
extends: 'dark',
|
|
167
|
+
attributes: {
|
|
168
|
+
type: 'color',
|
|
169
|
+
mode: 'dark',
|
|
170
|
+
extends: 'dark'
|
|
171
|
+
}
|
|
172
|
+
},
|
|
152
173
|
'atlassian-typography': {
|
|
153
174
|
id: 'typography',
|
|
154
175
|
displayName: 'Atlassian Typography (Minor Second)',
|
|
@@ -178,7 +199,7 @@ var themeConfig = {
|
|
|
178
199
|
/**
|
|
179
200
|
* themeStateDefaults: the default values for ThemeState used by theming utilities
|
|
180
201
|
*/
|
|
181
|
-
var themeStateDefaults = {
|
|
202
|
+
var themeStateDefaults = exports.themeStateDefaults = {
|
|
182
203
|
colorMode: 'auto',
|
|
183
204
|
dark: 'dark',
|
|
184
205
|
light: 'light',
|
|
@@ -192,6 +213,4 @@ var themeStateDefaults = {
|
|
|
192
213
|
* Represents theme state once mounted to the page
|
|
193
214
|
* (the page doesn't have an "auto" color mode, it's either light or dark)
|
|
194
215
|
*/
|
|
195
|
-
exports.
|
|
196
|
-
var _default = themeConfig;
|
|
197
|
-
exports.default = _default;
|
|
216
|
+
var _default = exports.default = themeConfig;
|
|
@@ -23,7 +23,7 @@ var _getGlobalTheme = _interopRequireDefault(require("./get-global-theme"));
|
|
|
23
23
|
* observer.observe();
|
|
24
24
|
* ```
|
|
25
25
|
*/
|
|
26
|
-
var ThemeMutationObserver = /*#__PURE__*/function () {
|
|
26
|
+
var ThemeMutationObserver = exports.default = /*#__PURE__*/function () {
|
|
27
27
|
function ThemeMutationObserver(callback) {
|
|
28
28
|
(0, _classCallCheck2.default)(this, ThemeMutationObserver);
|
|
29
29
|
(0, _defineProperty2.default)(this, "observer", null);
|
|
@@ -50,5 +50,4 @@ var ThemeMutationObserver = /*#__PURE__*/function () {
|
|
|
50
50
|
}
|
|
51
51
|
}]);
|
|
52
52
|
return ThemeMutationObserver;
|
|
53
|
-
}();
|
|
54
|
-
exports.default = ThemeMutationObserver;
|
|
53
|
+
}();
|
|
@@ -35,7 +35,7 @@ var isColorMode = function isColorMode(modeId) {
|
|
|
35
35
|
* // returns { dark: 'dark', light: 'legacy-light', spacing: 'spacing' }
|
|
36
36
|
* ```
|
|
37
37
|
*/
|
|
38
|
-
var themeStringToObject = function themeStringToObject(themeState) {
|
|
38
|
+
var themeStringToObject = exports.themeStringToObject = function themeStringToObject(themeState) {
|
|
39
39
|
return themeState.split(' ').map(function (theme) {
|
|
40
40
|
return theme.split(/:([\s\S]*)/);
|
|
41
41
|
}).reduce(function (themeObject, _ref) {
|
|
@@ -71,8 +71,7 @@ var themeStringToObject = function themeStringToObject(themeState) {
|
|
|
71
71
|
* // returns 'dark:dark light:legacy-light spacing:spacing'
|
|
72
72
|
* ```
|
|
73
73
|
*/
|
|
74
|
-
exports.
|
|
75
|
-
var themeObjectToString = function themeObjectToString(themeState) {
|
|
74
|
+
var themeObjectToString = exports.themeObjectToString = function themeObjectToString(themeState) {
|
|
76
75
|
return Object.entries(themeState).reduce(function (themeString, _ref3) {
|
|
77
76
|
var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
|
|
78
77
|
kind = _ref4[0],
|
|
@@ -88,5 +87,4 @@ var themeObjectToString = function themeObjectToString(themeState) {
|
|
|
88
87
|
}
|
|
89
88
|
return themeString;
|
|
90
89
|
}, '');
|
|
91
|
-
};
|
|
92
|
-
exports.themeObjectToString = themeObjectToString;
|
|
90
|
+
};
|