@atlaskit/tokens 1.13.1 → 1.14.0

package/dist/esm/utils/theme-loading.js

@@ -53,4 +53,5 @@ export var loadThemeCss = /*#__PURE__*/function () {
   return function loadThemeCss(_x2) {
     return _ref2.apply(this, arguments);
   };
-}();
+}();
+export var darkModeMediaQuery = '(prefers-color-scheme: dark)';

package/dist/esm/version.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "1.13.1",
+	"version": "1.14.0",
 	"sideEffects": [
 		"**/*.css"
 	]

package/dist/types/custom-theme.d.ts

@@ -1,10 +1,6 @@
-import { ThemeState, ThemeStyles } from './set-global-theme';
+import { ThemeStyles } from './get-theme-styles';
+import { ThemeOptionsSchema, ThemeState } from './theme-config';
 export declare const CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD = 10;
-type HEX = `#${string}`;
-export type CSSColor = HEX;
-export interface CustomBrandSchema {
-    brandColor: CSSColor;
-}
 /**
  *
  * @param themeSchema The schema of available themes
@@ -22,9 +18,8 @@ export interface CustomBrandSchema {
  * If an error is encountered while loading themes, the themes array will be empty.
  */
 export declare function getCustomThemeStyles(themeState: Partial<ThemeState> & {
-    UNSAFE_themeOptions: CustomBrandSchema;
+    UNSAFE_themeOptions: ThemeOptionsSchema;
 }): Promise<ThemeStyles[]>;
 export declare function loadAndAppendCustomThemeCss(themeState: Partial<ThemeState> & {
-    UNSAFE_themeOptions: CustomBrandSchema;
+    UNSAFE_themeOptions: ThemeOptionsSchema;
 }): Promise<void>;
-export {};

package/dist/types/get-global-theme.d.ts

@@ -1,2 +1,3 @@
 import { ActiveThemeState } from './set-global-theme';
-export declare const getGlobalTheme: () => Partial<ActiveThemeState>;
+declare const getGlobalTheme: () => Partial<ActiveThemeState>;
+export default getGlobalTheme;

package/dist/types/get-ssr-auto-script.d.ts

@@ -0,0 +1,11 @@
+import { ThemeState } from './theme-config';
+/**
+ * Provides a script that, when executed before paint, sets the `data-color-mode` attribute based on the current system theme,
+ * to enable SSR support for automatic theme switching, avoid a flash of un-themed content on first paint.
+ *
+ * @param {string} colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
+ *
+ * @returns {string} A string to be added to the innerHTML of a script tag in the document head
+ */
+declare const getSSRAutoScript: (colorMode: ThemeState['colorMode']) => string | undefined;
+export default getSSRAutoScript;

package/dist/types/get-theme-html-attrs.d.ts

@@ -0,0 +1,17 @@
+import { ThemeState } from './theme-config';
+/**
+ * Server-side rendering utility. Generates the valid HTML attributes for a given theme.
+ * Note: this utility does not handle automatic theme switching.
+ *
+ * @param {Object<string, string>} themeOptions - Theme options object
+ * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
+ * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
+ * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
+ * @param {string} themeState.spacing The spacing theme to be applied.
+ * @param {string} themeState.typography The typography theme to be applied.
+ * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
+ *
+ * @returns {Object} Object of HTML attributes to be applied to the document root
+ */
+declare const getThemeHtmlAttrs: ({ colorMode, dark, light, shape, spacing, typography, UNSAFE_themeOptions, }?: Partial<ThemeState>) => Record<string, string>;
+export default getThemeHtmlAttrs;

package/dist/types/get-theme-styles.d.ts

@@ -0,0 +1,24 @@
+import { ThemeIdsWithOverrides, ThemeState } from './theme-config';
+export interface ThemeStyles {
+    id: ThemeIdsWithOverrides;
+    attrs: Record<string, string>;
+    css: string;
+}
+/**
+ * Takes an object containing theme preferences, and returns an array of objects for use in applying styles to the document head.
+ * 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.
+ *
+ * @param {Object<string, string>} themeState The themes and color mode that should be applied.
+ * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
+ * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
+ * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
+ * @param {string} themeState.shape The shape theme to be applied.
+ * @param {string} themeState.spacing The spacing theme to be applied.
+ * @param {string} themeState.typography The typography theme to be applied.
+ * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
+ *
+ * @returns A Promise of an object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
+ * If an error is encountered while loading themes, the themes array will be empty.
+ */
+declare const getThemeStyles: (preferences?: Partial<ThemeState> | 'all') => Promise<ThemeStyles[]>;
+export default getThemeStyles;

package/dist/types/index.d.ts

@@ -1,14 +1,15 @@
+export { default as themeConfig } from './theme-config';
 export { default as token } from './get-token';
 export { default as getTokenValue } from './get-token-value';
-export { default as setGlobalTheme, getThemeStyles, getThemeHtmlAttrs, getSSRAutoScript, } from './set-global-theme';
-export type { ThemeState } from './set-global-theme';
+export { default as setGlobalTheme } from './set-global-theme';
+export { default as getThemeStyles } from './get-theme-styles';
+export { default as getThemeHtmlAttrs } from './get-theme-html-attrs';
+export { default as getSSRAutoScript } from './get-ssr-auto-script';
+export { default as useThemeObserver } from './use-theme-observer';
+export { default as ThemeMutationObserver } from './theme-mutation-observer';
+export { default as getGlobalTheme } from './get-global-theme';
+export { themeStringToObject, themeObjectToString, } from './theme-state-transformer';
 export type { CSSToken } from './artifacts/token-names';
 export type { ActiveTokens } from './artifacts/types';
-export type { ThemeColorModes, Themes, ThemeIds } from './theme-config';
+export type { ThemeColorModes, Themes, ThemeIds, ThemeOptionsSchema, ThemeState, } from './theme-config';
 export type { Groups, OpacityToken, PaintToken, RawToken, ShadowToken, SpacingToken, ShapeToken, } from './types';
-export type { CustomBrandSchema } from './custom-theme';
-export { default as themeConfig } from './theme-config';
-export { useThemeObserver } from './use-theme-observer';
-export { ThemeMutationObserver } from './theme-mutation-observer';
-export { getGlobalTheme } from './get-global-theme';
-export { themeStringToObject, themeObjectToString, } from './utils/theme-state-transformer';

package/dist/types/set-global-theme.d.ts

@@ -1,19 +1,8 @@
 import { UnbindFn } from 'bind-event-listener';
-import { CustomBrandSchema } from './custom-theme';
-import { ThemeColorModes, ThemeIds, ThemeIdsWithOverrides } from './theme-config';
-export interface ThemeState {
-    light: Extract<ThemeIds, 'light' | 'dark' | 'legacy-dark' | 'legacy-light'>;
-    dark: Extract<ThemeIds, 'light' | 'dark' | 'legacy-dark' | 'legacy-light'>;
-    colorMode: ThemeColorModes;
-    shape?: Extract<ThemeIds, 'shape'>;
-    spacing?: Extract<ThemeIds, 'spacing'>;
-    typography?: Extract<ThemeIds, 'typography'>;
-    UNSAFE_themeOptions?: CustomBrandSchema;
-}
+import { ThemeColorModes, ThemeIdsWithOverrides, ThemeState } from './theme-config';
 export interface ActiveThemeState extends ThemeState {
     colorMode: Exclude<ThemeColorModes, 'auto'>;
 }
-export declare const themeStateDefaults: ThemeState;
 /**
  * Sets the theme globally at runtime. This updates the `data-theme` and `data-color-mode` attributes on your page's <html> tag.
  *
@@ -35,50 +24,4 @@ export declare const themeStateDefaults: ThemeState;
  * ```
  */
 declare const setGlobalTheme: ({ colorMode, dark, light, shape, spacing, typography, UNSAFE_themeOptions, }?: Partial<ThemeState>, themeLoader?: ((id: ThemeIdsWithOverrides) => void | Promise<void>) | undefined) => Promise<UnbindFn>;
-export interface ThemeStyles {
-    id: ThemeIdsWithOverrides;
-    attrs: Record<string, string>;
-    css: string;
-}
-/**
- * Takes an object containing theme preferences, and returns an array of objects for use in applying styles to the document head.
- * 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.
- *
- * @param {Object<string, string>} themeState The themes and color mode that should be applied.
- * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
- * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
- * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
- * @param {string} themeState.shape The shape theme to be applied.
- * @param {string} themeState.spacing The spacing theme to be applied.
- * @param {string} themeState.typography The typography theme to be applied.
- * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
- *
- * @returns A Promise of an object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
- * If an error is encountered while loading themes, the themes array will be empty.
- */
-export declare const getThemeStyles: (preferences?: Partial<ThemeState> | 'all') => Promise<ThemeStyles[]>;
-/**
- * Server-side rendering utility. Generates the valid HTML attributes for a given theme.
- * Note: this utility does not handle automatic theme switching.
- *
- * @param {Object<string, string>} themeOptions - Theme options object
- * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
- * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
- * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
- * @param {string} themeState.spacing The spacing theme to be applied.
- * @param {string} themeState.typography The typography theme to be applied.
- * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
- *
- * @returns {Object} Object of HTML attributes to be applied to the document root
- */
-export declare const getThemeHtmlAttrs: ({ colorMode, dark, light, shape, spacing, typography, UNSAFE_themeOptions, }?: Partial<ThemeState>) => Record<string, string>;
-/**
- * Provides a script that, when executed before paint, sets the `data-color-mode` attribute based on the current system theme,
- * to enable SSR support for automatic theme switching, avoid a flash of un-themed content on first paint.
- *
- * @param {string} colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
- *
- * @returns {string} A string to be added to the innerHTML of a script tag in the document head
- */
-export declare const getSSRAutoScript: (colorMode: ThemeState['colorMode']) => string | undefined;
 export default setGlobalTheme;

package/dist/types/theme-config.d.ts

@@ -77,4 +77,28 @@ interface ThemeConfig {
     override?: ThemeIds;
 }
 declare const themeConfig: Record<Themes | ThemeOverrides, ThemeConfig>;
+type HEX = `#${string}`;
+export type CSSColor = HEX;
+/**
+ * ThemeOptionsSchema: additional configuration options used to customize Atlassian's themes
+ */
+export interface ThemeOptionsSchema {
+    brandColor: CSSColor;
+}
+/**
+ * ThemeState: the standard representation of an app's current theme and preferences
+ */
+export interface ThemeState {
+    light: Extract<ThemeIds, 'light' | 'dark' | 'legacy-dark' | 'legacy-light'>;
+    dark: Extract<ThemeIds, 'light' | 'dark' | 'legacy-dark' | 'legacy-light'>;
+    colorMode: ThemeColorModes;
+    shape?: Extract<ThemeIds, 'shape'>;
+    spacing?: Extract<ThemeIds, 'spacing'>;
+    typography?: Extract<ThemeIds, 'typography'>;
+    UNSAFE_themeOptions?: ThemeOptionsSchema;
+}
+/**
+ * themeStateDefaults: the default values for ThemeState used by theming utilities
+ */
+export declare const themeStateDefaults: ThemeState;
 export default themeConfig;

package/dist/types/theme-mutation-observer.d.ts

@@ -12,7 +12,7 @@ import { ActiveThemeState } from './set-global-theme';
  * observer.observe();
  * ```
  */
-export declare class ThemeMutationObserver {
+export default class ThemeMutationObserver {
     private callback;
     observer: MutationObserver | null;
     mediaObserver: any;

package/dist/{types-ts4.5/utils → types}/theme-state-transformer.d.ts

@@ -1,4 +1,4 @@
-import type { ThemeState } from '../set-global-theme';
+import { ThemeState } from './theme-config';
 /**
  * Converts a string that is formatted for the `data-theme` HTML attribute
  * to an object that can be passed to `setGlobalTheme`.

package/dist/types/use-theme-observer.d.ts

@@ -12,4 +12,5 @@ import { ActiveThemeState } from './set-global-theme';
  * }, [theme.colorMode]);
  * ```
  */
-export declare const useThemeObserver: () => Partial<ActiveThemeState>;
+declare const useThemeObserver: () => Partial<ActiveThemeState>;
+export default useThemeObserver;

package/dist/types/utils/custom-theme-loading-utils.d.ts

@@ -1,9 +1,8 @@
 import tokens from '../artifacts/token-names';
-import { CustomBrandSchema } from '../custom-theme';
-import { ThemeColorModes } from '../theme-config';
+import { ThemeColorModes, ThemeOptionsSchema } from '../theme-config';
 type Token = keyof typeof tokens;
 type ThemeAttributeId = 'light' | 'dark';
-export declare function findMissingCustomStyleElements(UNSAFE_themeOptions: CustomBrandSchema, mode: ThemeColorModes): ThemeAttributeId[];
+export declare function findMissingCustomStyleElements(UNSAFE_themeOptions: ThemeOptionsSchema, mode: ThemeColorModes): ThemeAttributeId[];
 export declare function limitSizeOfCustomStyleElements(sizeThreshold: number): void;
 export declare function reduceTokenMap(tokenMap: {
     [key in Token]?: number;

package/dist/types/utils/generate-custom-color-ramp.d.ts

@@ -1,6 +1,5 @@
 import tokens from '../artifacts/token-names';
-import { CSSColor } from '../custom-theme';
-import { ThemeColorModes } from '../theme-config';
+import { CSSColor, ThemeColorModes } from '../theme-config';
 type Token = keyof typeof tokens;
 type TokenMap = {
     [key in Token]?: number;

package/dist/types/utils/get-theme-preferences.d.ts

@@ -0,0 +1,2 @@
+import { ThemeIdsWithOverrides, ThemeState } from '../theme-config';
+export declare const getThemePreferences: (themeState: ThemeState) => ThemeIdsWithOverrides[];

package/dist/types/utils/theme-loading.d.ts

@@ -1,3 +1,4 @@
 import { ThemeIdsWithOverrides } from '../theme-config';
 export declare const loadAndAppendThemeCss: (themeId: ThemeIdsWithOverrides) => Promise<void>;
 export declare const loadThemeCss: (themeId: ThemeIdsWithOverrides) => Promise<string>;
+export declare const darkModeMediaQuery = "(prefers-color-scheme: dark)";

package/dist/types-ts4.5/custom-theme.d.ts

@@ -1,10 +1,6 @@
-import { ThemeState, ThemeStyles } from './set-global-theme';
+import { ThemeStyles } from './get-theme-styles';
+import { ThemeOptionsSchema, ThemeState } from './theme-config';
 export declare const CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD = 10;
-type HEX = `#${string}`;
-export type CSSColor = HEX;
-export interface CustomBrandSchema {
-    brandColor: CSSColor;
-}
 /**
  *
  * @param themeSchema The schema of available themes
@@ -22,9 +18,8 @@ export interface CustomBrandSchema {
  * If an error is encountered while loading themes, the themes array will be empty.
  */
 export declare function getCustomThemeStyles(themeState: Partial<ThemeState> & {
-    UNSAFE_themeOptions: CustomBrandSchema;
+    UNSAFE_themeOptions: ThemeOptionsSchema;
 }): Promise<ThemeStyles[]>;
 export declare function loadAndAppendCustomThemeCss(themeState: Partial<ThemeState> & {
-    UNSAFE_themeOptions: CustomBrandSchema;
+    UNSAFE_themeOptions: ThemeOptionsSchema;
 }): Promise<void>;
-export {};

package/dist/types-ts4.5/get-global-theme.d.ts

@@ -1,2 +1,3 @@
 import { ActiveThemeState } from './set-global-theme';
-export declare const getGlobalTheme: () => Partial<ActiveThemeState>;
+declare const getGlobalTheme: () => Partial<ActiveThemeState>;
+export default getGlobalTheme;

package/dist/types-ts4.5/get-ssr-auto-script.d.ts

@@ -0,0 +1,11 @@
+import { ThemeState } from './theme-config';
+/**
+ * Provides a script that, when executed before paint, sets the `data-color-mode` attribute based on the current system theme,
+ * to enable SSR support for automatic theme switching, avoid a flash of un-themed content on first paint.
+ *
+ * @param {string} colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
+ *
+ * @returns {string} A string to be added to the innerHTML of a script tag in the document head
+ */
+declare const getSSRAutoScript: (colorMode: ThemeState['colorMode']) => string | undefined;
+export default getSSRAutoScript;

package/dist/types-ts4.5/get-theme-html-attrs.d.ts

@@ -0,0 +1,17 @@
+import { ThemeState } from './theme-config';
+/**
+ * Server-side rendering utility. Generates the valid HTML attributes for a given theme.
+ * Note: this utility does not handle automatic theme switching.
+ *
+ * @param {Object<string, string>} themeOptions - Theme options object
+ * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
+ * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
+ * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
+ * @param {string} themeState.spacing The spacing theme to be applied.
+ * @param {string} themeState.typography The typography theme to be applied.
+ * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
+ *
+ * @returns {Object} Object of HTML attributes to be applied to the document root
+ */
+declare const getThemeHtmlAttrs: ({ colorMode, dark, light, shape, spacing, typography, UNSAFE_themeOptions, }?: Partial<ThemeState>) => Record<string, string>;
+export default getThemeHtmlAttrs;

package/dist/types-ts4.5/get-theme-styles.d.ts

@@ -0,0 +1,24 @@
+import { ThemeIdsWithOverrides, ThemeState } from './theme-config';
+export interface ThemeStyles {
+    id: ThemeIdsWithOverrides;
+    attrs: Record<string, string>;
+    css: string;
+}
+/**
+ * Takes an object containing theme preferences, and returns an array of objects for use in applying styles to the document head.
+ * 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.
+ *
+ * @param {Object<string, string>} themeState The themes and color mode that should be applied.
+ * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
+ * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
+ * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
+ * @param {string} themeState.shape The shape theme to be applied.
+ * @param {string} themeState.spacing The spacing theme to be applied.
+ * @param {string} themeState.typography The typography theme to be applied.
+ * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
+ *
+ * @returns A Promise of an object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
+ * If an error is encountered while loading themes, the themes array will be empty.
+ */
+declare const getThemeStyles: (preferences?: Partial<ThemeState> | 'all') => Promise<ThemeStyles[]>;
+export default getThemeStyles;

package/dist/types-ts4.5/index.d.ts

@@ -1,14 +1,15 @@
+export { default as themeConfig } from './theme-config';
 export { default as token } from './get-token';
 export { default as getTokenValue } from './get-token-value';
-export { default as setGlobalTheme, getThemeStyles, getThemeHtmlAttrs, getSSRAutoScript, } from './set-global-theme';
-export type { ThemeState } from './set-global-theme';
+export { default as setGlobalTheme } from './set-global-theme';
+export { default as getThemeStyles } from './get-theme-styles';
+export { default as getThemeHtmlAttrs } from './get-theme-html-attrs';
+export { default as getSSRAutoScript } from './get-ssr-auto-script';
+export { default as useThemeObserver } from './use-theme-observer';
+export { default as ThemeMutationObserver } from './theme-mutation-observer';
+export { default as getGlobalTheme } from './get-global-theme';
+export { themeStringToObject, themeObjectToString, } from './theme-state-transformer';
 export type { CSSToken } from './artifacts/token-names';
 export type { ActiveTokens } from './artifacts/types';
-export type { ThemeColorModes, Themes, ThemeIds } from './theme-config';
+export type { ThemeColorModes, Themes, ThemeIds, ThemeOptionsSchema, ThemeState, } from './theme-config';
 export type { Groups, OpacityToken, PaintToken, RawToken, ShadowToken, SpacingToken, ShapeToken, } from './types';
-export type { CustomBrandSchema } from './custom-theme';
-export { default as themeConfig } from './theme-config';
-export { useThemeObserver } from './use-theme-observer';
-export { ThemeMutationObserver } from './theme-mutation-observer';
-export { getGlobalTheme } from './get-global-theme';
-export { themeStringToObject, themeObjectToString, } from './utils/theme-state-transformer';

package/dist/types-ts4.5/set-global-theme.d.ts

@@ -1,19 +1,8 @@
 import { UnbindFn } from 'bind-event-listener';
-import { CustomBrandSchema } from './custom-theme';
-import { ThemeColorModes, ThemeIds, ThemeIdsWithOverrides } from './theme-config';
-export interface ThemeState {
-    light: Extract<ThemeIds, 'light' | 'dark' | 'legacy-dark' | 'legacy-light'>;
-    dark: Extract<ThemeIds, 'light' | 'dark' | 'legacy-dark' | 'legacy-light'>;
-    colorMode: ThemeColorModes;
-    shape?: Extract<ThemeIds, 'shape'>;
-    spacing?: Extract<ThemeIds, 'spacing'>;
-    typography?: Extract<ThemeIds, 'typography'>;
-    UNSAFE_themeOptions?: CustomBrandSchema;
-}
+import { ThemeColorModes, ThemeIdsWithOverrides, ThemeState } from './theme-config';
 export interface ActiveThemeState extends ThemeState {
     colorMode: Exclude<ThemeColorModes, 'auto'>;
 }
-export declare const themeStateDefaults: ThemeState;
 /**
  * Sets the theme globally at runtime. This updates the `data-theme` and `data-color-mode` attributes on your page's <html> tag.
  *
@@ -35,50 +24,4 @@ export declare const themeStateDefaults: ThemeState;
  * ```
  */
 declare const setGlobalTheme: ({ colorMode, dark, light, shape, spacing, typography, UNSAFE_themeOptions, }?: Partial<ThemeState>, themeLoader?: ((id: ThemeIdsWithOverrides) => void | Promise<void>) | undefined) => Promise<UnbindFn>;
-export interface ThemeStyles {
-    id: ThemeIdsWithOverrides;
-    attrs: Record<string, string>;
-    css: string;
-}
-/**
- * Takes an object containing theme preferences, and returns an array of objects for use in applying styles to the document head.
- * 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.
- *
- * @param {Object<string, string>} themeState The themes and color mode that should be applied.
- * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
- * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
- * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
- * @param {string} themeState.shape The shape theme to be applied.
- * @param {string} themeState.spacing The spacing theme to be applied.
- * @param {string} themeState.typography The typography theme to be applied.
- * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
- *
- * @returns A Promise of an object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
- * If an error is encountered while loading themes, the themes array will be empty.
- */
-export declare const getThemeStyles: (preferences?: Partial<ThemeState> | 'all') => Promise<ThemeStyles[]>;
-/**
- * Server-side rendering utility. Generates the valid HTML attributes for a given theme.
- * Note: this utility does not handle automatic theme switching.
- *
- * @param {Object<string, string>} themeOptions - Theme options object
- * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
- * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
- * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
- * @param {string} themeState.spacing The spacing theme to be applied.
- * @param {string} themeState.typography The typography theme to be applied.
- * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
- *
- * @returns {Object} Object of HTML attributes to be applied to the document root
- */
-export declare const getThemeHtmlAttrs: ({ colorMode, dark, light, shape, spacing, typography, UNSAFE_themeOptions, }?: Partial<ThemeState>) => Record<string, string>;
-/**
- * Provides a script that, when executed before paint, sets the `data-color-mode` attribute based on the current system theme,
- * to enable SSR support for automatic theme switching, avoid a flash of un-themed content on first paint.
- *
- * @param {string} colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
- *
- * @returns {string} A string to be added to the innerHTML of a script tag in the document head
- */
-export declare const getSSRAutoScript: (colorMode: ThemeState['colorMode']) => string | undefined;
 export default setGlobalTheme;

package/dist/types-ts4.5/theme-config.d.ts

@@ -102,4 +102,28 @@ interface ThemeConfig {
     override?: ThemeIds;
 }
 declare const themeConfig: Record<Themes | ThemeOverrides, ThemeConfig>;
+type HEX = `#${string}`;
+export type CSSColor = HEX;
+/**
+ * ThemeOptionsSchema: additional configuration options used to customize Atlassian's themes
+ */
+export interface ThemeOptionsSchema {
+    brandColor: CSSColor;
+}
+/**
+ * ThemeState: the standard representation of an app's current theme and preferences
+ */
+export interface ThemeState {
+    light: Extract<ThemeIds, 'light' | 'dark' | 'legacy-dark' | 'legacy-light'>;
+    dark: Extract<ThemeIds, 'light' | 'dark' | 'legacy-dark' | 'legacy-light'>;
+    colorMode: ThemeColorModes;
+    shape?: Extract<ThemeIds, 'shape'>;
+    spacing?: Extract<ThemeIds, 'spacing'>;
+    typography?: Extract<ThemeIds, 'typography'>;
+    UNSAFE_themeOptions?: ThemeOptionsSchema;
+}
+/**
+ * themeStateDefaults: the default values for ThemeState used by theming utilities
+ */
+export declare const themeStateDefaults: ThemeState;
 export default themeConfig;

package/dist/types-ts4.5/theme-mutation-observer.d.ts

@@ -12,7 +12,7 @@ import { ActiveThemeState } from './set-global-theme';
  * observer.observe();
  * ```
  */
-export declare class ThemeMutationObserver {
+export default class ThemeMutationObserver {
     private callback;
     observer: MutationObserver | null;
     mediaObserver: any;

package/dist/{types/utils → types-ts4.5}/theme-state-transformer.d.ts

@@ -1,4 +1,4 @@
-import type { ThemeState } from '../set-global-theme';
+import { ThemeState } from './theme-config';
 /**
  * Converts a string that is formatted for the `data-theme` HTML attribute
  * to an object that can be passed to `setGlobalTheme`.

package/dist/types-ts4.5/use-theme-observer.d.ts

@@ -12,4 +12,5 @@ import { ActiveThemeState } from './set-global-theme';
  * }, [theme.colorMode]);
  * ```
  */
-export declare const useThemeObserver: () => Partial<ActiveThemeState>;
+declare const useThemeObserver: () => Partial<ActiveThemeState>;
+export default useThemeObserver;

package/dist/types-ts4.5/utils/custom-theme-loading-utils.d.ts

@@ -1,9 +1,8 @@
 import tokens from '../artifacts/token-names';
-import { CustomBrandSchema } from '../custom-theme';
-import { ThemeColorModes } from '../theme-config';
+import { ThemeColorModes, ThemeOptionsSchema } from '../theme-config';
 type Token = keyof typeof tokens;
 type ThemeAttributeId = 'light' | 'dark';
-export declare function findMissingCustomStyleElements(UNSAFE_themeOptions: CustomBrandSchema, mode: ThemeColorModes): ThemeAttributeId[];
+export declare function findMissingCustomStyleElements(UNSAFE_themeOptions: ThemeOptionsSchema, mode: ThemeColorModes): ThemeAttributeId[];
 export declare function limitSizeOfCustomStyleElements(sizeThreshold: number): void;
 export declare function reduceTokenMap(tokenMap: {
     [key in Token]?: number;

package/dist/types-ts4.5/utils/generate-custom-color-ramp.d.ts

@@ -1,6 +1,5 @@
 import tokens from '../artifacts/token-names';
-import { CSSColor } from '../custom-theme';
-import { ThemeColorModes } from '../theme-config';
+import { CSSColor, ThemeColorModes } from '../theme-config';
 type Token = keyof typeof tokens;
 type TokenMap = {
     [key in Token]?: number;

package/dist/types-ts4.5/utils/get-theme-preferences.d.ts

@@ -0,0 +1,2 @@
+import { ThemeIdsWithOverrides, ThemeState } from '../theme-config';
+export declare const getThemePreferences: (themeState: ThemeState) => ThemeIdsWithOverrides[];

package/dist/types-ts4.5/utils/theme-loading.d.ts

@@ -1,3 +1,4 @@
 import { ThemeIdsWithOverrides } from '../theme-config';
 export declare const loadAndAppendThemeCss: (themeId: ThemeIdsWithOverrides) => Promise<void>;
 export declare const loadThemeCss: (themeId: ThemeIdsWithOverrides) => Promise<string>;
+export declare const darkModeMediaQuery = "(prefers-color-scheme: dark)";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tokens",
-  "version": "1.13.1",
+  "version": "1.14.0",
   "description": "Design tokens are the single source of truth to name and store design decisions.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/report.api.md

@@ -902,12 +902,6 @@ type CSSTokenMap = {
   'font.lineHeight.600': 'var(--ds-font-lineHeight-600)';
 };
 
-// @public (undocumented)
-export interface CustomBrandSchema {
-  // (undocumented)
-  brandColor: CSSColor;
-}
-
 // @public (undocumented)
 type DataColorModes = Exclude<ThemeColorModes, 'auto'>;
 
@@ -1512,6 +1506,12 @@ export class ThemeMutationObserver {
 // @public
 export const themeObjectToString: (themeState: Partial<ThemeState>) => string;
 
+// @public
+export interface ThemeOptionsSchema {
+  // (undocumented)
+  brandColor: CSSColor;
+}
+
 // @public (undocumented)
 type ThemeOverrideIds = (typeof themeOverrideIds)[number];
 
@@ -1536,7 +1536,7 @@ export type Themes =
   | 'atlassian-spacing'
   | 'atlassian-typography';
 
-// @public (undocumented)
+// @public
 export interface ThemeState {
   // (undocumented)
   colorMode: ThemeColorModes;
@@ -1551,7 +1551,7 @@ export interface ThemeState {
   // (undocumented)
   typography?: Extract<ThemeIds, 'typography'>;
   // (undocumented)
-  UNSAFE_themeOptions?: CustomBrandSchema;
+  UNSAFE_themeOptions?: ThemeOptionsSchema;
 }
 
 // @public