@atlaskit/tokens 0.10.27 → 0.10.29

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.27",
+  "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": {
@@ -38,6 +39,7 @@
     "./tokens-raw": "./src/entry-points/tokens-raw.tsx",
     "./token-ids": "./src/entry-points/token-ids.tsx",
     "./token-names": "./src/entry-points/token-names.tsx",
+    "./spacing-raw": "./src/entry-points/spacing-raw.tsx",
     "./rename-mapping": "./src/entry-points/rename-mapping.tsx",
     "./babel-plugin": "./src/entry-points/babel-plugin.tsx",
     "./css/atlassian-light.css": "./css/atlassian-light.css",

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/spacing-raw/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/tokens/spacing-raw",
+  "main": "../dist/cjs/entry-points/spacing-raw.js",
+  "module": "../dist/esm/entry-points/spacing-raw.js",
+  "module:es2019": "../dist/es2019/entry-points/spacing-raw.js",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "types": "../dist/types/entry-points/spacing-raw.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/spacing-raw.d.ts"
+      ]
+    }
+  }
+}

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)