@atlaskit/tokens 1.25.2 → 1.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tokens",
-  "version": "1.25.2",
+  "version": "1.26.0",
   "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

@@ -1230,6 +1230,7 @@ interface DesignToken<TValue, Group extends Groups>
 export const enableGlobalTheme: (
   {
     colorMode,
+    contrastMode,
     dark,
     light,
     shape,
@@ -1281,6 +1282,7 @@ export const getGlobalTheme: () => Partial<ActiveThemeState>;
 // @public
 export const getSSRAutoScript: (
   colorMode: ThemeState['colorMode'],
+  contrastMode?: ThemeState['contrastMode'],
 ) => string | undefined;
 
 // @public
@@ -1288,6 +1290,7 @@ export const getThemeHtmlAttrs: ({
   colorMode,
   dark,
   light,
+  contrastMode,
   shape,
   spacing,
   typography,
@@ -1800,6 +1803,7 @@ type Replacement = InternalTokenIds | InternalTokenIds[];
 export const setGlobalTheme: (
   {
     colorMode,
+    contrastMode,
     dark,
     light,
     shape,
@@ -1862,11 +1866,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 +1878,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 +1907,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 +1970,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 +1986,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

@@ -760,7 +760,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 +797,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 +833,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<{
@@ -879,11 +879,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 +891,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 +944,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)