@atlaskit/tokens 1.25.2 → 1.26.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tokens",
-  "version": "1.25.2",
+  "version": "1.26.1",
   "description": "Design tokens are the single source of truth to name and store design decisions.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -115,6 +115,9 @@
     },
     "platform.design-system-team.saturated-palette-changes_asoro": {
       "type": "boolean"
+    },
+    "platform.design-system-team.increased-contrast-themes": {
+      "type": "boolean"
     }
   },
   "homepage": "https://atlassian.design/components/tokens",

package/report.api.md

@@ -477,222 +477,6 @@ export type ActiveTokens =
 // @public (undocumented)
 type ActiveTokenState = 'active';
 
-// @public (undocumented)
-type BaseRadiusToken = keyof typeof baseRadiusTokens;
-
-// @public (undocumented)
-const baseRadiusTokens: {
-  readonly Radius050: {
-    readonly value: 2;
-    readonly attributes: {
-      readonly group: 'shape';
-    };
-  };
-  readonly Radius100: {
-    readonly value: 4;
-    readonly attributes: {
-      readonly group: 'shape';
-    };
-  };
-  readonly Radius200: {
-    readonly value: 8;
-    readonly attributes: {
-      readonly group: 'shape';
-    };
-  };
-  readonly Radius300: {
-    readonly value: 12;
-    readonly attributes: {
-      readonly group: 'shape';
-    };
-  };
-  readonly Radius400: {
-    readonly value: 16;
-    readonly attributes: {
-      readonly group: 'shape';
-    };
-  };
-  readonly RadiusCircle: {
-    readonly value: 32032;
-    readonly attributes: {
-      readonly group: 'shape';
-    };
-  };
-};
-
-// @public (undocumented)
-type BaseSizeToken = keyof typeof baseSizeTokens;
-
-// @public (undocumented)
-const baseSizeTokens: {
-  readonly Size0: {
-    readonly value: 0;
-    readonly attributes: {
-      readonly group: 'shape';
-    };
-  };
-  readonly Size050: {
-    readonly value: 1;
-    readonly attributes: {
-      readonly group: 'shape';
-    };
-  };
-  readonly Size100: {
-    readonly value: 2;
-    readonly attributes: {
-      readonly group: 'shape';
-    };
-  };
-  readonly Size200: {
-    readonly value: 3;
-    readonly attributes: {
-      readonly group: 'shape';
-    };
-  };
-};
-
-// @public (undocumented)
-const baseSpacingTokens: {
-  readonly Space0: {
-    readonly value: 0;
-    readonly attributes: {
-      readonly group: 'spacing';
-    };
-  };
-  readonly Space025: {
-    readonly value: 2;
-    readonly attributes: {
-      readonly group: 'spacing';
-    };
-  };
-  readonly Space050: {
-    readonly value: 4;
-    readonly attributes: {
-      readonly group: 'spacing';
-    };
-  };
-  readonly Space075: {
-    readonly value: 6;
-    readonly attributes: {
-      readonly group: 'spacing';
-    };
-  };
-  readonly Space100: {
-    readonly value: 8;
-    readonly attributes: {
-      readonly group: 'spacing';
-    };
-  };
-  readonly Space150: {
-    readonly value: 12;
-    readonly attributes: {
-      readonly group: 'spacing';
-    };
-  };
-  readonly Space200: {
-    readonly value: 16;
-    readonly attributes: {
-      readonly group: 'spacing';
-    };
-  };
-  readonly Space250: {
-    readonly value: 20;
-    readonly attributes: {
-      readonly group: 'spacing';
-    };
-  };
-  readonly Space300: {
-    readonly value: 24;
-    readonly attributes: {
-      readonly group: 'spacing';
-    };
-  };
-  readonly Space400: {
-    readonly value: 32;
-    readonly attributes: {
-      readonly group: 'spacing';
-    };
-  };
-  readonly Space500: {
-    readonly value: 40;
-    readonly attributes: {
-      readonly group: 'spacing';
-    };
-  };
-  readonly Space600: {
-    readonly value: 48;
-    readonly attributes: {
-      readonly group: 'spacing';
-    };
-  };
-  readonly Space800: {
-    readonly value: 64;
-    readonly attributes: {
-      readonly group: 'spacing';
-    };
-  };
-  readonly Space1000: {
-    readonly value: 80;
-    readonly attributes: {
-      readonly group: 'spacing';
-    };
-  };
-  readonly SpaceNegative025: {
-    readonly value: -2;
-    readonly attributes: {
-      readonly group: 'spacing';
-    };
-  };
-  readonly SpaceNegative050: {
-    readonly value: -4;
-    readonly attributes: {
-      readonly group: 'spacing';
-    };
-  };
-  readonly SpaceNegative075: {
-    readonly value: -6;
-    readonly attributes: {
-      readonly group: 'spacing';
-    };
-  };
-  readonly SpaceNegative100: {
-    readonly value: -8;
-    readonly attributes: {
-      readonly group: 'spacing';
-    };
-  };
-  readonly SpaceNegative150: {
-    readonly value: -12;
-    readonly attributes: {
-      readonly group: 'spacing';
-    };
-  };
-  readonly SpaceNegative200: {
-    readonly value: -16;
-    readonly attributes: {
-      readonly group: 'spacing';
-    };
-  };
-  readonly SpaceNegative250: {
-    readonly value: -20;
-    readonly attributes: {
-      readonly group: 'spacing';
-    };
-  };
-  readonly SpaceNegative300: {
-    readonly value: -24;
-    readonly attributes: {
-      readonly group: 'spacing';
-    };
-  };
-  readonly SpaceNegative400: {
-    readonly value: -32;
-    readonly attributes: {
-      readonly group: 'spacing';
-    };
-  };
-};
-
 // @public (undocumented)
 type CSSColor = HEX;
 
@@ -1230,6 +1014,7 @@ interface DesignToken<TValue, Group extends Groups>
 export const enableGlobalTheme: (
   {
     colorMode,
+    contrastMode,
     dark,
     light,
     shape,
@@ -1281,6 +1066,7 @@ export const getGlobalTheme: () => Partial<ActiveThemeState>;
 // @public
 export const getSSRAutoScript: (
   colorMode: ThemeState['colorMode'],
+  contrastMode?: ThemeState['contrastMode'],
 ) => string | undefined;
 
 // @public
@@ -1288,6 +1074,7 @@ export const getThemeHtmlAttrs: ({
   colorMode,
   dark,
   light,
+  contrastMode,
   shape,
   spacing,
   typography,
@@ -1800,6 +1587,7 @@ type Replacement = InternalTokenIds | InternalTokenIds[];
 export const setGlobalTheme: (
   {
     colorMode,
+    contrastMode,
     dark,
     light,
     shape,
@@ -1828,17 +1616,11 @@ export type ShadowToken<BaseToken> = DesignToken<
   'shadow'
 >;
 
-// @public
-type ShapePaletteToken = BaseRadiusToken | BaseSizeToken;
-
 // @public (undocumented)
-export type ShapeToken = DesignToken<ShapePaletteToken, 'shape'>;
-
-// @public
-type SpacingPaletteToken = keyof typeof baseSpacingTokens;
+export type ShapeToken<BaseToken> = DesignToken<BaseToken, 'shape'>;
 
 // @public (undocumented)
-export type SpacingToken = DesignToken<SpacingPaletteToken, 'spacing'>;
+export type SpacingToken<BaseToken> = DesignToken<BaseToken, 'spacing'>;
 
 // @public (undocumented)
 export type ThemeColorModes = (typeof themeColorModes)[number];
@@ -1862,11 +1644,10 @@ interface ThemeConfig {
   };
   // (undocumented)
   displayName: string;
-  // (undocumented)
-  extends?: ExtensionThemeId;
+  extends?: ThemeIds;
   // (undocumented)
   id: ThemeIds | ThemeOverrideIds;
-  // (undocumented)
+  increasesContrastFor?: ThemeIds;
   override?: ThemeIds;
   // (undocumented)
   palette: Palettes;
@@ -1875,13 +1656,21 @@ interface ThemeConfig {
 // @public (undocumented)
 export const themeConfig: Record<ThemeOverrides | Themes, ThemeConfig>;
 
+// @public (undocumented)
+type ThemeContrastModes = (typeof themeContrastModes)[number];
+
+// @public
+const themeContrastModes: readonly ['more', 'no-preference', 'auto'];
+
 // @public (undocumented)
 export type ThemeIds = (typeof themeIds)[number];
 
 // @public
 const themeIds: readonly [
+  'light-increased-contrast',
   'light',
   'dark',
+  'dark-increased-contrast',
   'legacy-light',
   'legacy-dark',
   'spacing',
@@ -1896,8 +1685,10 @@ type ThemeIdsWithOverrides = (typeof themeIdsWithOverrides)[number];
 
 // @public (undocumented)
 const themeIdsWithOverrides: readonly [
+  'light-increased-contrast',
   'light',
   'dark',
+  'dark-increased-contrast',
   'legacy-light',
   'legacy-dark',
   'spacing',
@@ -1957,9 +1748,11 @@ type ThemeOverrides =
 // @public
 export type Themes =
   | 'atlassian-dark'
+  | 'atlassian-dark-increased-contrast'
   | 'atlassian-legacy-dark'
   | 'atlassian-legacy-light'
   | 'atlassian-light'
+  | 'atlassian-light-increased-contrast'
   | 'atlassian-shape'
   | 'atlassian-spacing'
   | 'atlassian-typography'
@@ -1971,9 +1764,27 @@ export interface ThemeState {
   // (undocumented)
   colorMode: ThemeColorModes;
   // (undocumented)
-  dark: Extract<ThemeIds, 'dark' | 'legacy-dark' | 'legacy-light' | 'light'>;
+  contrastMode: ThemeContrastModes;
   // (undocumented)
-  light: Extract<ThemeIds, 'dark' | 'legacy-dark' | 'legacy-light' | 'light'>;
+  dark: Extract<
+    ThemeIds,
+    | 'dark'
+    | 'dark-increased-contrast'
+    | 'legacy-dark'
+    | 'legacy-light'
+    | 'light'
+    | 'light-increased-contrast'
+  >;
+  // (undocumented)
+  light: Extract<
+    ThemeIds,
+    | 'dark'
+    | 'dark-increased-contrast'
+    | 'legacy-dark'
+    | 'legacy-light'
+    | 'light'
+    | 'light-increased-contrast'
+  >;
   // (undocumented)
   shape?: Extract<ThemeIds, 'shape'>;
   // (undocumented)

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

@@ -18,222 +18,6 @@ export type ActiveTokens = 'border.radius' | 'border.radius.050' | 'border.radiu
 // @public (undocumented)
 type ActiveTokenState = 'active';
 
-// @public (undocumented)
-type BaseRadiusToken = keyof typeof baseRadiusTokens;
-
-// @public (undocumented)
-const baseRadiusTokens: {
-    readonly Radius050: {
-        readonly value: 2;
-        readonly attributes: {
-            readonly group: "shape";
-        };
-    };
-    readonly Radius100: {
-        readonly value: 4;
-        readonly attributes: {
-            readonly group: "shape";
-        };
-    };
-    readonly Radius200: {
-        readonly value: 8;
-        readonly attributes: {
-            readonly group: "shape";
-        };
-    };
-    readonly Radius300: {
-        readonly value: 12;
-        readonly attributes: {
-            readonly group: "shape";
-        };
-    };
-    readonly Radius400: {
-        readonly value: 16;
-        readonly attributes: {
-            readonly group: "shape";
-        };
-    };
-    readonly RadiusCircle: {
-        readonly value: 32032;
-        readonly attributes: {
-            readonly group: "shape";
-        };
-    };
-};
-
-// @public (undocumented)
-type BaseSizeToken = keyof typeof baseSizeTokens;
-
-// @public (undocumented)
-const baseSizeTokens: {
-    readonly Size0: {
-        readonly value: 0;
-        readonly attributes: {
-            readonly group: "shape";
-        };
-    };
-    readonly Size050: {
-        readonly value: 1;
-        readonly attributes: {
-            readonly group: "shape";
-        };
-    };
-    readonly Size100: {
-        readonly value: 2;
-        readonly attributes: {
-            readonly group: "shape";
-        };
-    };
-    readonly Size200: {
-        readonly value: 3;
-        readonly attributes: {
-            readonly group: "shape";
-        };
-    };
-};
-
-// @public (undocumented)
-const baseSpacingTokens: {
-    readonly Space0: {
-        readonly value: 0;
-        readonly attributes: {
-            readonly group: "spacing";
-        };
-    };
-    readonly Space025: {
-        readonly value: 2;
-        readonly attributes: {
-            readonly group: "spacing";
-        };
-    };
-    readonly Space050: {
-        readonly value: 4;
-        readonly attributes: {
-            readonly group: "spacing";
-        };
-    };
-    readonly Space075: {
-        readonly value: 6;
-        readonly attributes: {
-            readonly group: "spacing";
-        };
-    };
-    readonly Space100: {
-        readonly value: 8;
-        readonly attributes: {
-            readonly group: "spacing";
-        };
-    };
-    readonly Space150: {
-        readonly value: 12;
-        readonly attributes: {
-            readonly group: "spacing";
-        };
-    };
-    readonly Space200: {
-        readonly value: 16;
-        readonly attributes: {
-            readonly group: "spacing";
-        };
-    };
-    readonly Space250: {
-        readonly value: 20;
-        readonly attributes: {
-            readonly group: "spacing";
-        };
-    };
-    readonly Space300: {
-        readonly value: 24;
-        readonly attributes: {
-            readonly group: "spacing";
-        };
-    };
-    readonly Space400: {
-        readonly value: 32;
-        readonly attributes: {
-            readonly group: "spacing";
-        };
-    };
-    readonly Space500: {
-        readonly value: 40;
-        readonly attributes: {
-            readonly group: "spacing";
-        };
-    };
-    readonly Space600: {
-        readonly value: 48;
-        readonly attributes: {
-            readonly group: "spacing";
-        };
-    };
-    readonly Space800: {
-        readonly value: 64;
-        readonly attributes: {
-            readonly group: "spacing";
-        };
-    };
-    readonly Space1000: {
-        readonly value: 80;
-        readonly attributes: {
-            readonly group: "spacing";
-        };
-    };
-    readonly SpaceNegative025: {
-        readonly value: -2;
-        readonly attributes: {
-            readonly group: "spacing";
-        };
-    };
-    readonly SpaceNegative050: {
-        readonly value: -4;
-        readonly attributes: {
-            readonly group: "spacing";
-        };
-    };
-    readonly SpaceNegative075: {
-        readonly value: -6;
-        readonly attributes: {
-            readonly group: "spacing";
-        };
-    };
-    readonly SpaceNegative100: {
-        readonly value: -8;
-        readonly attributes: {
-            readonly group: "spacing";
-        };
-    };
-    readonly SpaceNegative150: {
-        readonly value: -12;
-        readonly attributes: {
-            readonly group: "spacing";
-        };
-    };
-    readonly SpaceNegative200: {
-        readonly value: -16;
-        readonly attributes: {
-            readonly group: "spacing";
-        };
-    };
-    readonly SpaceNegative250: {
-        readonly value: -20;
-        readonly attributes: {
-            readonly group: "spacing";
-        };
-    };
-    readonly SpaceNegative300: {
-        readonly value: -24;
-        readonly attributes: {
-            readonly group: "spacing";
-        };
-    };
-    readonly SpaceNegative400: {
-        readonly value: -32;
-        readonly attributes: {
-            readonly group: "spacing";
-        };
-    };
-};
-
 // @public (undocumented)
 type CSSColor = HEX;
 
@@ -760,7 +544,7 @@ interface DesignToken<TValue, Group extends Groups> extends Token<TValue, Group>
 }
 
 // @public
-export const enableGlobalTheme: ({ colorMode, dark, light, shape, spacing, typography, UNSAFE_themeOptions, }?: Partial<ThemeState>, themeLoader?: ((id: ThemeIdsWithOverrides) => void) | undefined) => UnbindFn;
+export const enableGlobalTheme: ({ colorMode, contrastMode, dark, light, shape, spacing, typography, UNSAFE_themeOptions, }?: Partial<ThemeState>, themeLoader?: ((id: ThemeIdsWithOverrides) => void) | undefined) => UnbindFn;
 
 // @public (undocumented)
 type ExperimentalReplacement = InternalTokenIds | InternalTokenIds[] | string;
@@ -797,10 +581,10 @@ interface FontFamilyTokenSchema<BaseToken> {
 export const getGlobalTheme: () => Partial<ActiveThemeState>;
 
 // @public
-export const getSSRAutoScript: (colorMode: ThemeState['colorMode']) => string | undefined;
+export const getSSRAutoScript: (colorMode: ThemeState['colorMode'], contrastMode?: ThemeState['contrastMode']) => string | undefined;
 
 // @public
-export const getThemeHtmlAttrs: ({ colorMode, dark, light, shape, spacing, typography, UNSAFE_themeOptions, }?: Partial<ThemeState>) => Record<string, string>;
+export const getThemeHtmlAttrs: ({ colorMode, dark, light, contrastMode, shape, spacing, typography, UNSAFE_themeOptions, }?: Partial<ThemeState>) => Record<string, string>;
 
 // @public
 export const getThemeStyles: (preferences?: 'all' | Partial<ThemeState>) => Promise<ThemeStyles[]>;
@@ -833,7 +617,7 @@ export type RawToken = DesignToken<string, 'raw'>;
 type Replacement = InternalTokenIds | InternalTokenIds[];
 
 // @public
-export const setGlobalTheme: ({ colorMode, dark, light, shape, spacing, typography, UNSAFE_themeOptions, }?: Partial<ThemeState>, themeLoader?: ((id: ThemeIdsWithOverrides) => Promise<void> | void) | undefined) => Promise<UnbindFn>;
+export const setGlobalTheme: ({ colorMode, contrastMode, dark, light, shape, spacing, typography, UNSAFE_themeOptions, }?: Partial<ThemeState>, themeLoader?: ((id: ThemeIdsWithOverrides) => Promise<void> | void) | undefined) => Promise<UnbindFn>;
 
 // @public (undocumented)
 export type ShadowToken<BaseToken> = DesignToken<Array<{
@@ -848,17 +632,11 @@ export type ShadowToken<BaseToken> = DesignToken<Array<{
     inset?: boolean;
 }>, 'shadow'>;
 
-// @public
-type ShapePaletteToken = BaseRadiusToken | BaseSizeToken;
-
 // @public (undocumented)
-export type ShapeToken = DesignToken<ShapePaletteToken, 'shape'>;
-
-// @public
-type SpacingPaletteToken = keyof typeof baseSpacingTokens;
+export type ShapeToken<BaseToken> = DesignToken<BaseToken, 'shape'>;
 
 // @public (undocumented)
-export type SpacingToken = DesignToken<SpacingPaletteToken, 'spacing'>;
+export type SpacingToken<BaseToken> = DesignToken<BaseToken, 'spacing'>;
 
 // @public (undocumented)
 export type ThemeColorModes = (typeof themeColorModes)[number];
@@ -879,11 +657,10 @@ interface ThemeConfig {
     };
     // (undocumented)
     displayName: string;
-    // (undocumented)
-    extends?: ExtensionThemeId;
+    extends?: ThemeIds;
     // (undocumented)
     id: ThemeIds | ThemeOverrideIds;
-    // (undocumented)
+    increasesContrastFor?: ThemeIds;
     override?: ThemeIds;
     // (undocumented)
     palette: Palettes;
@@ -892,17 +669,23 @@ interface ThemeConfig {
 // @public (undocumented)
 export const themeConfig: Record<ThemeOverrides | Themes, ThemeConfig>;
 
+// @public (undocumented)
+type ThemeContrastModes = (typeof themeContrastModes)[number];
+
+// @public
+const themeContrastModes: readonly ["more", "no-preference", "auto"];
+
 // @public (undocumented)
 export type ThemeIds = (typeof themeIds)[number];
 
 // @public
-const themeIds: readonly ["light", "dark", "legacy-light", "legacy-dark", "spacing", "typography", "shape", "typography-adg3", "typography-minor3"];
+const themeIds: readonly ["light-increased-contrast", "light", "dark", "dark-increased-contrast", "legacy-light", "legacy-dark", "spacing", "typography", "shape", "typography-adg3", "typography-minor3"];
 
 // @public (undocumented)
 type ThemeIdsWithOverrides = (typeof themeIdsWithOverrides)[number];
 
 // @public (undocumented)
-const themeIdsWithOverrides: readonly ["light", "dark", "legacy-light", "legacy-dark", "spacing", "typography", "shape", "typography-adg3", "typography-minor3", "light-new-input-border", "dark-new-input-border", "light-saturated-palette-changes", "dark-saturated-palette-changes"];
+const themeIdsWithOverrides: readonly ["light-increased-contrast", "light", "dark", "dark-increased-contrast", "legacy-light", "legacy-dark", "spacing", "typography", "shape", "typography-adg3", "typography-minor3", "light-new-input-border", "dark-new-input-border", "light-saturated-palette-changes", "dark-saturated-palette-changes"];
 
 // @public
 type ThemeKinds = 'color' | 'shape' | 'spacing' | 'typography';
@@ -939,16 +722,18 @@ const themeOverrideIds: readonly ["light-new-input-border", "dark-new-input-bord
 type ThemeOverrides = 'atlassian-dark-new-input-border' | 'atlassian-dark-saturated-palette-changes' | 'atlassian-light-new-input-border' | 'atlassian-light-saturated-palette-changes';
 
 // @public
-export type Themes = 'atlassian-dark' | 'atlassian-legacy-dark' | 'atlassian-legacy-light' | 'atlassian-light' | 'atlassian-shape' | 'atlassian-spacing' | 'atlassian-typography' | 'atlassian-typography-adg3' | 'atlassian-typography-minor3';
+export type Themes = 'atlassian-dark' | 'atlassian-dark-increased-contrast' | 'atlassian-legacy-dark' | 'atlassian-legacy-light' | 'atlassian-light' | 'atlassian-light-increased-contrast' | 'atlassian-shape' | 'atlassian-spacing' | 'atlassian-typography' | 'atlassian-typography-adg3' | 'atlassian-typography-minor3';
 
 // @public
 export interface ThemeState {
     // (undocumented)
     colorMode: ThemeColorModes;
     // (undocumented)
-    dark: Extract<ThemeIds, 'dark' | 'legacy-dark' | 'legacy-light' | 'light'>;
+    contrastMode: ThemeContrastModes;
+    // (undocumented)
+    dark: Extract<ThemeIds, 'dark' | 'dark-increased-contrast' | 'legacy-dark' | 'legacy-light' | 'light' | 'light-increased-contrast'>;
     // (undocumented)
-    light: Extract<ThemeIds, 'dark' | 'legacy-dark' | 'legacy-light' | 'light'>;
+    light: Extract<ThemeIds, 'dark' | 'dark-increased-contrast' | 'legacy-dark' | 'legacy-light' | 'light' | 'light-increased-contrast'>;
     // (undocumented)
     shape?: Extract<ThemeIds, 'shape'>;
     // (undocumented)