@atlaskit/tokens 0.10.28 → 0.10.29

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

@@ -0,0 +1,53 @@
+/**
+ * This file contains the source of truth for themes and all associated meta data.
+ */
+/**
+ * Themes: The internal identifier of a theme.
+ * These ids are what the actual theme files/folders are called.
+ * style-dictionary will attempt to locate these in the file-system.
+ */
+export declare type Themes = 'atlassian-light' | 'atlassian-dark' | 'atlassian-legacy-light' | 'atlassian-legacy-dark' | 'atlassian-spacing';
+export declare type ThemeFileNames = Themes;
+/**
+ * Theme kinds: The type of theme.
+ * Some themes are entirely focused on Color, whilst others are purely focused on spacing.
+ * In the future other types may be introduced such as typography.
+ */
+export declare type ThemeKinds = 'color' | 'spacing';
+/**
+ * Theme modes: The general purpose of a theme.
+ * This attr is used to apply the appropriate system-preference media selector
+ * It may also be used as a selector for mode-specific overrides such as light/dark images.
+ * The idea is there may exist many color themes, but every theme must either fit into light or dark.
+ */
+export declare type ThemeColorModes = 'light' | 'dark';
+/**
+ * Theme ids: The value that will mounted to the DOM as a data attr
+ * For example: `data-theme="light"
+ *
+ * These ids must be kebab case
+ */
+export declare type ThemeIds = 'light' | 'dark' | 'legacy-light' | 'legacy-dark' | 'spacing';
+/**
+ * Palettes: The set of base tokens a given theme may be populated with.
+ * For example: legacy light & dark themes use the "legacyPalette" containing colors from our
+ * previous color set.
+ */
+export declare type Palettes = 'defaultPalette' | 'legacyPalette' | 'spacingScale';
+/**
+ * ThemeConfig: the source of truth for all theme meta-data.
+ * This object should be used whenever interfacing with themes.
+ */
+interface ThemeConfig {
+    id: ThemeIds;
+    displayName: string;
+    palette: Palettes;
+    attributes: {
+        type: 'color';
+        mode: ThemeColorModes;
+    } | {
+        type: 'spacing';
+    };
+}
+declare const themeConfig: Record<Themes, ThemeConfig>;
+export default themeConfig;

package/dist/types/types.d.ts

@@ -1,5 +1,4 @@
 import { InternalTokenIds } from './artifacts/types-internal';
-import { THEME_NAME_MAP, THEMES } from './constants';
 export declare type Groups = 'raw' | 'paint' | 'shadow' | 'palette' | 'opacity' | 'spacing' | 'scale';
 export declare type ActiveTokenState = 'active';
 export declare type DeprecatedTokenState = 'deprecated';
@@ -10,8 +9,6 @@ export declare type Replacement = InternalTokenIds | InternalTokenIds[];
 export declare type ExperimentalReplacement = InternalTokenIds | InternalTokenIds[] | string;
 export declare type PaletteCategory = 'blue' | 'purple' | 'red' | 'magenta' | 'orange' | 'yellow' | 'green' | 'teal' | 'light mode neutral' | 'dark mode neutral';
 export declare type ValueCategory = 'opacity';
-export declare type Themes = typeof THEMES[number];
-export declare type ThemesLongName = keyof typeof THEME_NAME_MAP;
 export interface Token<TValue, Group extends Groups> {
     value: TValue;
     attributes: {

package/dist/types-ts4.0/constants.d.ts

@@ -1,19 +1,6 @@
-export declare const THEMES: readonly [
-    "light",
-    "dark",
-    "legacy-light",
-    "legacy-dark",
-    "spacing"
-];
 export declare const THEME_DATA_ATTRIBUTE = "data-theme";
+export declare const COLOR_MODE_ATTRIBUTE = "data-color-mode";
 export declare const DEFAULT_THEME = "light spacing";
 export declare const CSS_PREFIX = "ds";
 export declare const CSS_VAR_FULL: string[];
-export declare const THEME_NAME_MAP: {
-    'atlassian-light': string;
-    'atlassian-dark': string;
-    'atlassian-legacy-light': string;
-    'atlassian-legacy-dark': string;
-    'atlassian-spacing': string;
-};
 export declare const TOKEN_NOT_FOUND_CSS_VAR: string;

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

@@ -1,5 +1,6 @@
 export { default as token } from './get-token';
 export { default as setGlobalTheme } from './set-global-theme';
 export type { CSSToken } from './artifacts/token-names';
-export type { Themes } from './types';
+export type { Themes, ThemeIds } from './theme-config';
+export { default as themeConfig } from './theme-config';
 export { useThemeObserver, ThemeMutationObserver, } from './theme-change-observer';

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

@@ -1,3 +1,3 @@
-import type { Themes } from './types';
-declare const setGlobalTheme: (theme: Themes) => void;
+import { ThemeIds } from './theme-config';
+declare const setGlobalTheme: (themeId: ThemeIds, shouldMatchSystem?: boolean) => void;
 export default setGlobalTheme;

package/dist/types-ts4.0/theme-change-observer.d.ts

@@ -1,4 +1,4 @@
-import { Themes } from './types';
+import { ThemeIds } from './theme-config';
 /**
  * A MutationObserver which watches the `<html>` element for changes to the theme.
  *
@@ -15,7 +15,8 @@ import { Themes } from './types';
 export declare class ThemeMutationObserver {
     private callback;
     observer: MutationObserver | null;
-    constructor(callback: (theme: Themes | null) => unknown);
+    mediaObserver: any;
+    constructor(callback: (theme: ThemeIds | null) => unknown);
     observe(): void;
     disconnect(): void;
 }
@@ -32,4 +33,4 @@ export declare class ThemeMutationObserver {
  * }, [theme]);
  * ```
  */
-export declare const useThemeObserver: () => Themes | null;
+export declare const useThemeObserver: () => ThemeIds | null;

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

@@ -0,0 +1,53 @@
+/**
+ * This file contains the source of truth for themes and all associated meta data.
+ */
+/**
+ * Themes: The internal identifier of a theme.
+ * These ids are what the actual theme files/folders are called.
+ * style-dictionary will attempt to locate these in the file-system.
+ */
+export declare type Themes = 'atlassian-light' | 'atlassian-dark' | 'atlassian-legacy-light' | 'atlassian-legacy-dark' | 'atlassian-spacing';
+export declare type ThemeFileNames = Themes;
+/**
+ * Theme kinds: The type of theme.
+ * Some themes are entirely focused on Color, whilst others are purely focused on spacing.
+ * In the future other types may be introduced such as typography.
+ */
+export declare type ThemeKinds = 'color' | 'spacing';
+/**
+ * Theme modes: The general purpose of a theme.
+ * This attr is used to apply the appropriate system-preference media selector
+ * It may also be used as a selector for mode-specific overrides such as light/dark images.
+ * The idea is there may exist many color themes, but every theme must either fit into light or dark.
+ */
+export declare type ThemeColorModes = 'light' | 'dark';
+/**
+ * Theme ids: The value that will mounted to the DOM as a data attr
+ * For example: `data-theme="light"
+ *
+ * These ids must be kebab case
+ */
+export declare type ThemeIds = 'light' | 'dark' | 'legacy-light' | 'legacy-dark' | 'spacing';
+/**
+ * Palettes: The set of base tokens a given theme may be populated with.
+ * For example: legacy light & dark themes use the "legacyPalette" containing colors from our
+ * previous color set.
+ */
+export declare type Palettes = 'defaultPalette' | 'legacyPalette' | 'spacingScale';
+/**
+ * ThemeConfig: the source of truth for all theme meta-data.
+ * This object should be used whenever interfacing with themes.
+ */
+interface ThemeConfig {
+    id: ThemeIds;
+    displayName: string;
+    palette: Palettes;
+    attributes: {
+        type: 'color';
+        mode: ThemeColorModes;
+    } | {
+        type: 'spacing';
+    };
+}
+declare const themeConfig: Record<Themes, ThemeConfig>;
+export default themeConfig;

package/dist/types-ts4.0/types.d.ts

@@ -1,5 +1,4 @@
 import { InternalTokenIds } from './artifacts/types-internal';
-import { THEME_NAME_MAP, THEMES } from './constants';
 export declare type Groups = 'raw' | 'paint' | 'shadow' | 'palette' | 'opacity' | 'spacing' | 'scale';
 export declare type ActiveTokenState = 'active';
 export declare type DeprecatedTokenState = 'deprecated';
@@ -10,8 +9,6 @@ export declare type Replacement = InternalTokenIds | InternalTokenIds[];
 export declare type ExperimentalReplacement = InternalTokenIds | InternalTokenIds[] | string;
 export declare type PaletteCategory = 'blue' | 'purple' | 'red' | 'magenta' | 'orange' | 'yellow' | 'green' | 'teal' | 'light mode neutral' | 'dark mode neutral';
 export declare type ValueCategory = 'opacity';
-export declare type Themes = typeof THEMES[number];
-export declare type ThemesLongName = keyof typeof THEME_NAME_MAP;
 export interface Token<TValue, Group extends Groups> {
     value: TValue;
     attributes: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tokens",
-  "version": "0.10.28",
+  "version": "0.10.29",
   "author": "Atlassian Pty Ltd",
   "description": "Design tokens are the single source of truth to name and store design decisions.",
   "license": "Apache-2.0",
@@ -8,6 +8,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "atlassian": {
+    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "continuous",
     "website": {

package/report.api.md

@@ -332,31 +332,68 @@ type CSSTokenMap_3 = {
   'spacing.scale.075': 'var(--ds-scale-075)';
 };
 
+// @public
+type Palettes = 'defaultPalette' | 'legacyPalette' | 'spacingScale';
+
+// @public (undocumented)
+export const setGlobalTheme: (
+  themeId: ThemeIds,
+  shouldMatchSystem?: boolean,
+) => void;
+
+// @public
+type ThemeColorModes = 'dark' | 'light';
+
+// @public
+interface ThemeConfig {
+  // (undocumented)
+  attributes:
+    | {
+        type: 'color';
+        mode: ThemeColorModes;
+      }
+    | {
+        type: 'spacing';
+      };
+  // (undocumented)
+  displayName: string;
+  // (undocumented)
+  id: ThemeIds;
+  // (undocumented)
+  palette: Palettes;
+}
+
 // @public (undocumented)
-export const setGlobalTheme: (theme: Themes) => void;
+export const themeConfig: Record<Themes, ThemeConfig>;
+
+// @public
+export type ThemeIds =
+  | 'dark'
+  | 'legacy-dark'
+  | 'legacy-light'
+  | 'light'
+  | 'spacing';
 
 // @public
 export class ThemeMutationObserver {
-  constructor(callback: (theme: Themes | null) => unknown);
+  constructor(callback: (theme: ThemeIds | null) => unknown);
   // (undocumented)
   disconnect(): void;
   // (undocumented)
+  mediaObserver: any;
+  // (undocumented)
   observe(): void;
   // (undocumented)
   observer: MutationObserver | null;
 }
 
-// @public (undocumented)
-const THEMES: readonly [
-  'light',
-  'dark',
-  'legacy-light',
-  'legacy-dark',
-  'spacing',
-];
-
-// @public (undocumented)
-export type Themes = typeof THEMES[number];
+// @public
+export type Themes =
+  | 'atlassian-dark'
+  | 'atlassian-legacy-dark'
+  | 'atlassian-legacy-light'
+  | 'atlassian-light'
+  | 'atlassian-spacing';
 
 // @public (undocumented)
 export function token<T extends keyof Tokens>(
@@ -676,7 +713,7 @@ const tokens: {
 };
 
 // @public
-export const useThemeObserver: () => Themes | null;
+export const useThemeObserver: () => ThemeIds | null;
 
 // (No @packageDocumentation comment for this package)
 ```

package/tmp/api-report-tmp.d.ts

@@ -322,25 +322,53 @@ type CSSTokenMap_3 = {
     'spacing.scale.075': 'var(--ds-scale-075)';
 };
 
+// @public
+type Palettes = 'defaultPalette' | 'legacyPalette' | 'spacingScale';
+
+// @public (undocumented)
+export const setGlobalTheme: (themeId: ThemeIds, shouldMatchSystem?: boolean) => void;
+
+// @public
+type ThemeColorModes = 'dark' | 'light';
+
+// @public
+interface ThemeConfig {
+    // (undocumented)
+    attributes: {
+        type: 'color';
+        mode: ThemeColorModes;
+    } | {
+        type: 'spacing';
+    };
+    // (undocumented)
+    displayName: string;
+    // (undocumented)
+    id: ThemeIds;
+    // (undocumented)
+    palette: Palettes;
+}
+
 // @public (undocumented)
-export const setGlobalTheme: (theme: Themes) => void;
+export const themeConfig: Record<Themes, ThemeConfig>;
+
+// @public
+export type ThemeIds = 'dark' | 'legacy-dark' | 'legacy-light' | 'light' | 'spacing';
 
 // @public
 export class ThemeMutationObserver {
-    constructor(callback: (theme: Themes | null) => unknown);
+    constructor(callback: (theme: ThemeIds | null) => unknown);
     // (undocumented)
     disconnect(): void;
     // (undocumented)
+    mediaObserver: any;
+    // (undocumented)
     observe(): void;
     // (undocumented)
     observer: MutationObserver | null;
 }
 
-// @public (undocumented)
-const THEMES: readonly ["light", "dark", "legacy-light", "legacy-dark", "spacing"];
-
-// @public (undocumented)
-export type Themes = typeof THEMES[number];
+// @public
+export type Themes = 'atlassian-dark' | 'atlassian-legacy-dark' | 'atlassian-legacy-light' | 'atlassian-light' | 'atlassian-spacing';
 
 // @public (undocumented)
 export function token<T extends keyof Tokens>(path: T, fallback?: string): CSSTokenMap[T];
@@ -657,7 +685,7 @@ const tokens: {
 };
 
 // @public
-export const useThemeObserver: () => Themes | null;
+export const useThemeObserver: () => ThemeIds | null;
 
 // (No @packageDocumentation comment for this package)