npm - @atlaskit/tokens - Versions diffs - 1.13.1 → 1.13.2 - Mend

@atlaskit/tokens 1.13.1 → 1.13.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.

Files changed (82) hide show

package/CHANGELOG.md +6 -0
package/dist/cjs/custom-theme.js +17 -13
package/dist/cjs/get-global-theme.js +4 -3
package/dist/cjs/get-ssr-auto-script.js +21 -0
package/dist/cjs/get-theme-html-attrs.js +76 -0
package/dist/cjs/get-theme-styles.js +139 -0
package/dist/cjs/get-token-value.js +1 -1
package/dist/cjs/get-token.js +1 -1
package/dist/cjs/index.js +15 -15
package/dist/cjs/set-global-theme.js +9 -242
package/dist/cjs/theme-config.js +23 -1
package/dist/cjs/theme-mutation-observer.js +4 -4
package/dist/cjs/{utils/theme-state-transformer.js → theme-state-transformer.js} +1 -1
package/dist/cjs/use-theme-observer.js +7 -6
package/dist/cjs/utils/get-theme-preferences.js +35 -0
package/dist/cjs/utils/theme-loading.js +4 -2
package/dist/cjs/version.json +1 -1
package/dist/es2019/custom-theme.js +10 -10
package/dist/es2019/get-global-theme.js +4 -3
package/dist/es2019/get-ssr-auto-script.js +23 -0
package/dist/es2019/get-theme-html-attrs.js +62 -0
package/dist/es2019/get-theme-styles.js +72 -0
package/dist/es2019/get-token-value.js +1 -1
package/dist/es2019/get-token.js +1 -1
package/dist/es2019/index.js +9 -6
package/dist/es2019/set-global-theme.js +5 -185
package/dist/es2019/theme-config.js +21 -0
package/dist/es2019/theme-mutation-observer.js +2 -2
package/dist/es2019/{utils/theme-state-transformer.js → theme-state-transformer.js} +1 -1
package/dist/es2019/use-theme-observer.js +5 -4
package/dist/es2019/utils/get-theme-preferences.js +28 -0
package/dist/es2019/utils/theme-loading.js +2 -1
package/dist/es2019/version.json +1 -1
package/dist/esm/custom-theme.js +15 -11
package/dist/esm/get-global-theme.js +4 -3
package/dist/esm/get-ssr-auto-script.js +15 -0
package/dist/esm/get-theme-html-attrs.js +68 -0
package/dist/esm/get-theme-styles.js +126 -0
package/dist/esm/get-token-value.js +1 -1
package/dist/esm/get-token.js +1 -1
package/dist/esm/index.js +9 -6
package/dist/esm/set-global-theme.js +6 -233
package/dist/esm/theme-config.js +21 -0
package/dist/esm/theme-mutation-observer.js +4 -3
package/dist/esm/{utils/theme-state-transformer.js → theme-state-transformer.js} +1 -1
package/dist/esm/use-theme-observer.js +5 -4
package/dist/esm/utils/get-theme-preferences.js +27 -0
package/dist/esm/utils/theme-loading.js +2 -1
package/dist/esm/version.json +1 -1
package/dist/types/custom-theme.d.ts +4 -9
package/dist/types/get-global-theme.d.ts +2 -1
package/dist/types/get-ssr-auto-script.d.ts +11 -0
package/dist/types/get-theme-html-attrs.d.ts +17 -0
package/dist/types/get-theme-styles.d.ts +24 -0
package/dist/types/index.d.ts +10 -9
package/dist/types/set-global-theme.d.ts +1 -58
package/dist/types/theme-config.d.ts +24 -0
package/dist/types/theme-mutation-observer.d.ts +1 -1
package/dist/{types-ts4.5/utils → types}/theme-state-transformer.d.ts +1 -1
package/dist/types/use-theme-observer.d.ts +2 -1
package/dist/types/utils/custom-theme-loading-utils.d.ts +2 -3
package/dist/types/utils/generate-custom-color-ramp.d.ts +1 -2
package/dist/types/utils/get-theme-preferences.d.ts +2 -0
package/dist/types/utils/theme-loading.d.ts +1 -0
package/dist/types-ts4.5/custom-theme.d.ts +4 -9
package/dist/types-ts4.5/get-global-theme.d.ts +2 -1
package/dist/types-ts4.5/get-ssr-auto-script.d.ts +11 -0
package/dist/types-ts4.5/get-theme-html-attrs.d.ts +17 -0
package/dist/types-ts4.5/get-theme-styles.d.ts +24 -0
package/dist/types-ts4.5/index.d.ts +10 -9
package/dist/types-ts4.5/set-global-theme.d.ts +1 -58
package/dist/types-ts4.5/theme-config.d.ts +24 -0
package/dist/types-ts4.5/theme-mutation-observer.d.ts +1 -1
package/dist/{types/utils → types-ts4.5}/theme-state-transformer.d.ts +1 -1
package/dist/types-ts4.5/use-theme-observer.d.ts +2 -1
package/dist/types-ts4.5/utils/custom-theme-loading-utils.d.ts +2 -3
package/dist/types-ts4.5/utils/generate-custom-color-ramp.d.ts +1 -2
package/dist/types-ts4.5/utils/get-theme-preferences.d.ts +2 -0
package/dist/types-ts4.5/utils/theme-loading.d.ts +1 -0
package/package.json +1 -1
package/report.api.md +8 -8
package/tmp/api-report-tmp.d.ts +1158 -0

package/dist/types/index.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 RENAMED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 RENAMED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tokens",
-  "version": "1.13.1",
+  "version": "1.13.2",
   "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 CHANGED Viewed

@@ -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