Design tokens

• 5ba2e4b714c03, (opens new window) - Adds tab text color and neutral underline opacity transitions, plus directional selected-indicator motion behind the platform-dst-motion-uplift-tab feature gate.

• 0c7c7be927bde, (opens new window) - Remove deprecated Volt re-export shims from public package entry points. Consumers should import from the replacement subpaths or implementation entry points instead.

• Updated dependencies

• 7470fe5b0b5e7, (opens new window) - Remove motion.input.hovered and motion.input.focused in favor of motion.input. Consumers using token('motion.input.hovered') or token('motion.input.focused') must update to token('motion.input'). Use motion.input for input hover, focus, and error state transitions.

• 7356d483a3b72, (opens new window) - Add a shared text color transition and directional indicator motion tokens for Tabs, and correct slide-out keyframe names to match their distances.

• e9115c37cd99c, (opens new window) - Improve static theme loading for server-rendered applications. When platform-static-theme-loading is enabled with React 19 streaming SSR, ThemeProvider streams the CSS required by the active standard themes and finesse overrides before the themed subtree. During hydration, it reuses the server-rendered CSS before hoisting styles to the document head, avoiding a flash of unthemed content and hydration mismatches. React 18 continues to use the existing no-inline-CSS fallback.

  Expose the Tokens theme preference resolvers used to select the standard and finesse override theme styles.

• 78264aeafd321, (opens new window) - Add reusable grid-column enter and exit keyframe tokens and update the motion.label animations. Updated consumers apply the new motion behind platform-dst-motion-uplift-labels.

• 7f37ec7cc8629, (opens new window) - Add UNSAFE_test-light and UNSAFE_test-dark color themes for visual and unit testing.

• 20b3e525959eb, (opens new window) - The shape theme is now enabled by default and is no longer behind a feature gate. The ThemeState type now requires a value for the shape property to be provided.

• b6effa4972e52, (opens new window) - Add motion.input.hovered and motion.input.focused tokens for input background-color, border-color, and box-shadow transitions.

• c7333edc6dfa2, (opens new window) - Align panel content motion token timing and easing with the design specification by removing the built-in enter delay. Panel open applies its 100ms content-enter delay separately, while panel content replacement starts the enter motion after the preceding 50ms exit motion completes.

• 98fa516d85430, (opens new window) - The shape theme is now enabled by default and is no longer behind a feature gate. The ThemeState type now requires a value for the shape property to be provided.

• 73b74955b8418, (opens new window) - Added color.border.input.search for search input borders. Navigation System Search uses the new token when platform-dst-tokens-finesse is enabled; the existing border is unchanged when the gate is disabled.

• 9704cd5f7c190, (opens new window) - Maps color.blanket.selected to lighter neutral colors in Finesse themes behind platform-dst-tokens-finesse.

• 7d49f4cfcd044, (opens new window) - Adds dedicated color and smaller-heading typography override themes behind platform-dst-tokens-finesse, including softer neutral subtle interaction states, while preserving the existing future themes.

• f096d43c97bbd, (opens new window) - De-barrelling cleanup.

• 1646c59e857d9, (opens new window) - Add granular subpath exports ./utils/get-css-custom-property, ./utils/get-fully-qualified-token-id, and ./utils/get-token-id, giving Volt Stage-1 clean, non-deprecated homes for the getCSSCustomProperty, getFullyQualifiedTokenId, and getTokenId values previously reachable only via the @deprecated @atlaskit/tokens/token-ids re-export shim. The shim's @deprecated messages are updated to point at the new clean subpaths (they previously pointed back at the deprecated token-ids surface). Removal of the shim is tracked by VOLTC-139.

• bd2c5b0112185, (opens new window) - Remove stale API report artifacts from published Platform packages.

• Updated dependencies

• e3de502bac0ff, (opens new window) - The following legacy exports are deprecated and will be removed in a future release. Replace each import with its dedicated entry point.

  Old import	Replacement
  import { token } from '@atlaskit/tokens';	import { token } from '@atlaskit/tokens/token';
  import { token } from '@atlaskit/tokens/get-token';	import { token } from '@atlaskit/tokens/token';
  import { light } from '@atlaskit/tokens/tokens-raw';	import light from '@atlaskit/tokens/atlassian-light';
  import { dark } from '@atlaskit/tokens/tokens-raw';	import dark from '@atlaskit/tokens/atlassian-dark';
  import { spacing } from '@atlaskit/tokens/tokens-raw';	import spacing from '@atlaskit/tokens/atlassian-spacing';
  import { typography } from '@atlaskit/tokens/tokens-raw';	import typography from '@atlaskit/tokens/atlassian-typography';
  import { shape } from '@atlaskit/tokens/tokens-raw';	import shape from '@atlaskit/tokens/atlassian-shape';
  import { motion } from '@atlaskit/tokens/tokens-raw';	import motion from '@atlaskit/tokens/atlassian-motion';
  import tokens from '@atlaskit/tokens/palettes-raw';	import tokens from '@atlaskit/tokens/palette';
  import { typographyPalette } from '@atlaskit/tokens/palettes-raw';	import typographyPalette from '@atlaskit/tokens/typography-palette';
  import { themeStringToObject } from '@atlaskit/tokens/theme-state-transformer';	import { themeStringToObject } from '@atlaskit/tokens/theme-string-to-object';
  import { themeObjectToString } from '@atlaskit/tokens/theme-state-transformer';	import { themeObjectToString } from '@atlaskit/tokens/theme-object-to-string';
  import { themeColorModes, type ThemeColorModes } from '@atlaskit/tokens/theme-config';	import { themeColorModes, type ThemeColorModes } from '@atlaskit/tokens/theme-color-modes';
  import { themeIds, type ThemeIds } from '@atlaskit/tokens/theme-config';	import { themeIds, type ThemeIds } from '@atlaskit/tokens/theme-ids';
  import { themeStateDefaults } from '@atlaskit/tokens/theme-config';	import { themeStateDefaults } from '@atlaskit/tokens/theme-state-defaults';
  import { UNSAFE_loadCustomThemeStyles } from '@atlaskit/tokens/custom-themes';	import { UNSAFE_loadCustomThemeStyles } from '@atlaskit/tokens/unsafe-load-custom-theme-styles';

• 906386bf1d4fa, (opens new window) - [ux] Update motion token curves for sidenav exit and panel content exit. motion.sidenav.exit.left and motion.sidenav.exit.right now use EaseBoldOut (cubic-bezier(0, 0.4, 0, 1)) to match their enter counterparts, and motion.panel.content.exit now uses EasePracticalIn (cubic-bezier(0.6, 0, 0.8, 0.6)).

• d82e6f76528ab, (opens new window) - Add direct subpath package exports as part of the linking-platform, search, media, and design-system barrel-removal (de-barrel) migration.

  These packages now expose their individual modules via explicit package.json exports subpaths so that consumers can import directly from the leaf module (e.g. @atlaskit/pkg/thing) instead of the package barrel/index. This adds new public entry points without changing or removing any existing exports, so it is a backwards-compatible additive change.

  No runtime behaviour changes; this is an API-surface (entry-point) addition to support tree-shaking and to unblock removal of the barrel index files.

• 0195cea826a48, (opens new window) - Use directional motion tokens for RTL-aware panel slide animations. Adds new motion.panel.content.enter and motion.panel.content.exit motion tokens, applied to the Panel to soften the content when opening and closing.

• ed721ba4263f4, (opens new window) - Added motion.panel.enter.left, motion.panel.enter.right, motion.panel.exit.left and motion.panel.exit.right tokens for direction-aware Panel slide transitions. These replace motion.panel.enter and motion.panel.exit, which remain available.

• 160059b7df6cc, (opens new window) - Add motion tokens for label elements: motion.label.enter and motion.label.exit (used by the tag component). Also adds two new motion keyframes to the palette: ScaleXIn80to100 and ScaleXOut100to0 for horizontal collapse/expand animations.

• 77c80a1010e70, (opens new window) - Include border-color in button motion transitions and apply the motion to interactive lozenge dropdown triggers behind the button motion feature flag.

• ae67b39dceca0, (opens new window) - Added motion.sidenav.enter.left, motion.sidenav.enter.right, motion.sidenav.exit.left and motion.sidenav.exit.right tokens for Side Nav slide transitions.

• 2a6fe72f2d5f2, (opens new window) - Add alpha-aware color palette tokens for added and removed code diff lines.

  The existing color.background.code.added.line and color.background.code.removed.line semantic tokens now resolve to alpha-channel values in light, dark, and increased-contrast themes so code diff lines retain their intended transparency.

• b1453699ad8be, (opens new window) - Add semantic code syntax tokens:

  • color.background.code.default
  • color.background.code.gutter
  • color.background.code.highlight
  • color.background.code.added.line
  • color.background.code.added.highlight
  • color.background.code.removed.line
  • color.background.code.removed.highlight
  • color.border.code
  • color.text.code.default
  • color.text.code.comments
  • color.text.code.operators
  • color.text.code.keywords
  • color.text.code.strings
  • color.text.code.numbers
  • color.text.code.functions
  • color.text.code.tags
  • color.text.code.accent.1
  • color.text.code.accent.2
  • color.text.code.gutter
  import { token } from '@atlaskit/tokens'; const keywordColor = token('color.text.code.keywords', '#AE2E24'); // Or via CSS variable: var(--ds-text-code-keywords)

  Update BackgroundColorToken to support the new code background tokens.

• Add alpha-aware code diff line palette tokens: color.palette.Green200A40, color.palette.Green900A70, color.palette.Red200A40, and color.palette.Red900A70.

• Update color.background.code.added.line and color.background.code.removed.line to use transparent values across light, dark, and increased-contrast themes.

• Add semantic code syntax tokens:

  • color.background.code.default
  • color.background.code.gutter
  • color.background.code.highlight
  • color.background.code.added.line
  • color.background.code.added.highlight
  • color.background.code.removed.line
  • color.background.code.removed.highlight
  • color.border.code
  • color.text.code.default
  • color.text.code.comments
  • color.text.code.operators
  • color.text.code.keywords
  • color.text.code.strings
  • color.text.code.numbers
  • color.text.code.functions
  • color.text.code.tags
  • color.text.code.accent.1
  • color.text.code.accent.2
  • color.text.code.gutter

• cad86b0c0e613, (opens new window) - Add optional fill property to motion tokens supporting 'forwards' and 'backwards' animation fill modes. Adds AnimationFillModeForwards and AnimationFillModeBackwards base palette tokens, extends MotionPaletteToken and MotionScaleTokenSchema, and updates the animation builder to include fill-mode in generated CSS animation shorthands.

• ecc5823dc898c, (opens new window) - ## Breaking change: barrel file exports removed from @atlaskit/tokens

  The main entry point (@atlaskit/tokens) now only exports the token function. All other named exports have been moved to dedicated sub-path entry-points to reduce bundle size, improve build times, and minimise the package's overall footprint.

  Why we're doing this

  Large barrel files (a single index that re-exports everything) force bundlers to load the entire package even when only a small subset is used. By splitting exports into individual entry-points, consumers can import only what they need, leading to:

  • Faster build and typecheck times
  • Smaller production bundles
  • Clearer dependency boundaries

  What's changed

  Previously you could import anything from the root:

  import { token, getTokenValue, setGlobalTheme, useThemeObserver, ThemeState, COLOR_MODE_ATTRIBUTE, } from '@atlaskit/tokens';

  Now only token remains in the root. Everything else must be imported from its own entry-point:

  import { token } from '@atlaskit/tokens'; import { getTokenValue } from '@atlaskit/tokens/get-token-value'; import { setGlobalTheme } from '@atlaskit/tokens/set-global-theme'; import { useThemeObserver } from '@atlaskit/tokens/use-theme-observer'; import type { ThemeState } from '@atlaskit/tokens/theme-config'; import { COLOR_MODE_ATTRIBUTE } from '@atlaskit/tokens/constants';

  Full entry-point reference

  Export(s)	New import path
  token	@atlaskit/tokens (unchanged)
  getTokenValue	@atlaskit/tokens/get-token-value
  setGlobalTheme	@atlaskit/tokens/set-global-theme
  enableGlobalTheme	@atlaskit/tokens/enable-global-theme
  getThemeStyles	@atlaskit/tokens/get-theme-styles
  getThemeHtmlAttrs	@atlaskit/tokens/get-theme-html-attrs
  getSSRAutoScript	@atlaskit/tokens/get-ssr-auto-script
  useThemeObserver	@atlaskit/tokens/use-theme-observer
  ThemeMutationObserver	@atlaskit/tokens/theme-mutation-observer
  getGlobalTheme	@atlaskit/tokens/get-global-theme
  themeStringToObject, themeObjectToString	@atlaskit/tokens/theme-state-transformer
  themeConfig, ThemeColorModes, ThemeContrastModes, Themes, ThemeFileNames, ThemeIds, ThemeOptionsSchema, ThemeState, ActiveThemeState	@atlaskit/tokens/theme-config
  themeImportMap	@atlaskit/tokens/artifacts/theme-import-map
  CSSToken, CSSTokenMap	@atlaskit/tokens/token-names
  ActiveTokens	@atlaskit/tokens/artifacts/types
  FontFamilyToken, FontWeightToken, Groups, OpacityToken, PaintToken, RawToken, ShadowToken, SpacingToken, ShapeToken, TypographyToken, MotionToken	@atlaskit/tokens/types
  COLOR_MODE_ATTRIBUTE, CURRENT_SURFACE_CSS_VAR, SUBTREE_THEME_ATTRIBUTE, THEME_DATA_ATTRIBUTE	@atlaskit/tokens/constants

  Automated migration with codemod

  A codemod is available to automatically update your imports. Run it with:

  npx @hypermod/cli --packages @atlaskit/tokens@<version> --preset migrate-to-entry-points <path-to-your-source>

  For example, to migrate all files in your src/ directory:

  npx @hypermod/cli --packages @atlaskit/tokens@<version> --preset migrate-to-entry-points ./src

  The codemod will:

  • Leave import { token } from '@atlaskit/tokens' untouched
  • Split all other imports out to their appropriate entry-points
  • Preserve type-only imports (import type) and per-specifier type modifiers
  • Preserve import aliases (e.g. import { getTokenValue as getValue })
  • Group multiple imports that share the same entry-point into a single declaration

• b5b9917f875a8, (opens new window) - [ux] Add text-decoration-color to the motion.listitem.* transition tokens and consume them in Breadcrumbs.

• 0a1e6f2be05e3, (opens new window) - Add motion.panel.enter and motion.panel.exit tokens for panel slide transitions.

• fa40c22b98aee, (opens new window) - Ensure ADS codegen verification covers all generated token consumers without prebuilding the codegen utility.

• b00a6d183e0c4, (opens new window) - [ux] Add text-decoration-color to the motion.listitem.* transition tokens (hovered, pressed, selected) so list-item motion can animate underlines, and consume motion.listitem.* in Breadcrumbs behind the platform-dst-motion-uplift-list-item feature gate: interactive breadcrumb items (steps, ellipsis, and the current-item link) now animate their underline from transparent to coloured on hover/press. Rendering is unchanged when the gate is off.

• 2f56c78f969b8, (opens new window) - Update i18n NPM package versions for teamwork-graph (Group 16)

• ff40331e58db6, (opens new window) - Add motion.listitem.hovered (50ms), motion.listitem.pressed (100ms), and motion.listitem.selected (100ms) motion tokens for list-item interaction states. All use the ease practical out curve and transition background-color, border-color, and color.

• 48454686cbc98, (opens new window) - Updated the elevation.surface.container token value to use an alpha neutral so it blends with the surface beneath it. It now maps to Neutral100A in the light theme and DarkNeutral100A in the dark theme.

• 8f588905041f4, (opens new window) - Add two new interaction-state tokens for the neutral container surface: elevation.surface.container.hovered and elevation.surface.container.pressed. Use these for hovered and pressed states of elements built on elevation.surface.container.

• 65bef1e41e5fd, (opens new window) - Add motion.button.hovered and motion.button.pressed motion tokens, and apply button background motion uplift behind the platform-dst-motion-uplift-button feature gate.

• cd097a2111788, (opens new window) - Republish packages depending on @atlaskit/react-compiler-gating so their published dependency reference is updated to the renamed @atlaskit/react-compiler-gating scope.

  The earlier rename of @atlassian/react-compiler-gating to @atlaskit/react-compiler-gating only bumped the renamed package itself, so dependent packages were never republished and their published versions still referenced the old @atlassian/react-compiler-gating name, which is not available in the public npm registry. This minor bump republishes all affected packages with the corrected dependency.

• 26bb3944a5ea4, (opens new window) - Removed unused shape-rounder and shape-roundest themes. Removed legacy typography themes from prebuilt.

• d223db963e46d, (opens new window) - Cleanup feature gate platform-dst-motion-theme-default. Motion theme is now permanently enabled by default in setGlobalTheme calls.
• ee28cf33718b0, (opens new window) - Add @atlaskit/react-compiler-gating as a runtime dependency to enable React Compiler platform gating.
• Updated dependencies

• f2dc9097319f0, (opens new window) - ### Dropped support for legacy Typescript 4 types. Typescript 5 is now the new minimum.

  Removes the typesVersions property and dist/types-ts4.5 directory from the dist.

  Types are now exclusively via the "types": "dist/types/index.d.ts" property.

  - "typesVersions": { - ">=4.5 <4.9": { - "*": [ - "dist/types-ts4.5/*", - "dist/types-ts4.5/index.d.ts" - ] - } - },

• Updated dependencies

• 28d6bdf2c3456, (opens new window) - Add Rovo elevation surface overlay tokens for default, hovered, and pressed states. These tokens provide dedicated Rovo overlay surface backgrounds across light, dark, and increased-contrast themes.

• e5eeed279b893, (opens new window) - Changed color.border.accent.gray.subtle in the light theme to map to Neutral400 (#B7B9BE) instead of Neutral300 (#DDDEE1). The previous value was too light to read as a distinct border — Neutral400 provides the visual prominence expected from a decorative-border token while staying noticeably softer than the default color.border.accent.gray (Neutral600). Dark theme remains unchanged (DarkNeutral400).

• 93eb21bd8fb25, (opens new window) - Add Rovo color tokens for brand surfaces and supporting border/icon accents, including generated token artifacts, CSS/token type metadata, and category-aware usage guidelines for downstream docs and AI tooling.

• 71fee8de88abc, (opens new window) - Added new design tokens to support the Lozenge / Tag / Badge visual uplift:

  15 new color.border.*.subtle tokens for decorative borders that do not need to meet 3:1 contrast requirements:

  • 5 semantic: danger, warning, success, discovery, information (no neutral.subtle — the default color.border already serves this case)
  • 10 accent: red, orange, yellow, lime, green, teal, blue, purple, magenta, gray
  • Light theme maps to Color300; dark theme maps to Color800 (DarkNeutral400 for accent.gray)

  5 new color.background.*.subtle tokens for non-interactive elements (e.g. semantic badges, status pills, callout chips):

  • danger, success, discovery, information — light theme maps to Color300, dark theme maps to Color800
  • warning — light theme maps to Orange250, dark theme maps to Orange850 (different stops because Orange300 is already used by warning.bold)

  Note: color.background.*.subtle is intentionally non-interactive only — no .hovered or .pressed variants are provided. For interactive surfaces, use color.background.<semantic>.bold or color.background.<semantic>.subtler instead.

• e92deb020eae0, (opens new window) - Add Neutral1200 and DarkNeutral1200 base palette tokens and update generated raw palette artifacts.

• 6ae1bed1867c5, (opens new window) - [ux] Updated color.background.disabled to use a stronger neutral palette value (Neutral200A in light themes, DarkNeutral300A in dark themes).

• 591568c487e99, (opens new window) - Moved "motion.easing.spring" token into experimental state

• f63b64df22780, (opens new window) - Allow 0 and '0' as valid values for the SizeIntrinsic type. This means width, height, minWidth, minHeight, maxWidth, maxHeight, and related block/inline size properties now accept bare 0 without requiring '0px'. This is consistent with how CSS works (bare 0 is valid without a unit) and matches the existing behaviour of Space, BorderWidth, BorderRadius, and Opacity types.

• 125ae08eb4dbf, (opens new window) - Updated tokens structured content to mention motion tokens

• b5f57321dd863, (opens new window) - Transitioned motion design tokens from experimental to active and added usage guidance

• 72017386a0120, (opens new window) - Remove the deprecated font.body.UNSAFE_small token. This token was deprecated in 10.1.0 and has been replaced by font.body.small. Please migrate any remaining usages to font.body.small.

• de60749da093b, (opens new window) - This releases introduces a new set of experimental semantic base tokens for Motion.

  Added

  • motion.duration.instant

  • motion.duration.xxshort

  • motion.duration.xshort

  • motion.duration.short

  • motion.duration.medium

  • motion.duration.long

  • motion.duration.xlong

  • motion.duration.xxlong

  • motion.easing.in.practical

  • motion.easing.inout.bold

  • motion.easing.out.practical

  • motion.easing.out.bold

  • motion.easing.spring

  • motion.keyframe.fade.in

  • motion.keyframe.fade.out

  • motion.keyframe.scale.in.medium

  • motion.keyframe.scale.in.small

  • motion.keyframe.scale.out.medium

  • motion.keyframe.scale.out.small

  • motion.keyframe.slide.in.bottom.short

  • motion.keyframe.slide.in.left.half

  • motion.keyframe.slide.in.left.short

  • motion.keyframe.slide.in.right.short

  • motion.keyframe.slide.in.top.short

  • motion.keyframe.slide.out.bottom.short

  • motion.keyframe.slide.out.left.half

  • motion.keyframe.slide.out.left.short

  • motion.keyframe.slide.out.right.short

  • motion.keyframe.slide.out.top.short

  Added and removed experimental semantic tokens for Motion.

  Added

  • motion.blanket.enter
  • motion.blanket.exit

  Removed

  • motion.content.enter.short
  • motion.content.enter.medium
  • motion.content.enter.long
  • motion.content.exit.short
  • motion.content.exit.medium
  • motion.content.exit.long

• Updated dependencies

• 02483200273ec, (opens new window) - Enrol all Design System UI packages into the React Compiler with platform gating via isReactCompilerActivePlatform.

• 08170da1fbf62, (opens new window) - Migrate spacing prop usages on icons to Flex wrapper

• 6bce18279cb35, (opens new window) - Prevents a bundling/runtime failure for themeStateDefaults shape and motion defaults by defining them as module-scope functions instead of inline object methods, so react-magnetic-di’s fg() rewrite uses a valid di(host, fg) host and no longer references undefined motion / shape identifiers.

• 6d76a7647c5da, (opens new window) - Autofix: add explicit package exports (barrel removal)

• 9f858e9b1f9e8, (opens new window) - Fixed default fallback resolution for motion design tokens

• 6df6d2b1f286b, (opens new window) - Added motion values to tokens babel plugin

• 4927c4a64f704, (opens new window) - Added new set of experimental motion design tokens

• Updated dependencies

• 07b8035be9593, (opens new window) - Added an experimental set of motion design tokens.

• 18a6ca6a0c98c, (opens new window) - Widen React peer dependency from ^18.2.0 to ^18.2.0 || ^19.0.0 to support React 19
• Updated dependencies

• 5db9e3f21a52f, (opens new window) - Internal refactoring

• 2abd451d54eb2, (opens new window) - Removes atlassian-legacy-light/dark color themes from the tokens package. These themes are unused and non-functional in terms of color contrast. As a result some primitive components may recieve modern fallback color values in some scenarios, however these are inline with the latest token themes.

• 2fdb6040218a1, (opens new window) - Deprecating font.body.UNSAFE_small typography token, replace with font.body.small token.

• a48fdadce2137, (opens new window) - Minor internal typography changes.

• f111803c4e253, (opens new window) - Removed the deprecated typography theme ids (typography-adg3, typography-modernized and typography-refreshed) leaving only the typography theme id that is enabled by default. Automatic fallbacks now use refreshed typography values.

• d9d9cbc1507f6, (opens new window) - Internal change how default theme settings are shared between @atlaskit/tokens and @atlaskit/app-provider.
• 9832107cabf9f, (opens new window) - Removing experimental feature flag to disable the typography theme.

• 22a828a976edc, (opens new window) - Removing experimental feature flag to disable the typography theme.

• 018bda95d97eb, (opens new window) - Added new export for ThemeContrastModes

• 55546332d4ef4, (opens new window) - Restricted borderRadius xcss and cssMap types to only accept tokens, 0, and "inherit". Restricted borderWidth types to only accept tokens and 0. Previously any string was allowed, this is no longer the case and will throw a type error.

• 8f904ca860b20, (opens new window) - Updated radius token descriptions to provide more guidance.

• 762b79e21f96a, (opens new window) - Migrated and cleaned up legacy iconography usage.

• ea92d81a4f951, (opens new window) - Fixed the dark theme values for tokens bellow due to wrong base token mapping:
  • color.background.accent.green.subtlest.hovered
  • color.background.accent.lime.subtlest.hovered
  • color.background.accent.purple.subtlest.hovered
  • color.background.accent.teal.subtlest.hovered
  • color.background.accent.magenta.subtlest.hovered
  • color.background.accent.orange.subtlest.hovered
  • color.background.accent.yellow.subtlest.hovered

• a60a82196851a, (opens new window) - Internal refactors to remove unused variables. No functional or public changes.

• 02aeea2e65ec2, (opens new window) - Enabled shape theme by default behind a feature gate. The shape theme remains undefined when the gate is off.

• 644c0f593ae62, (opens new window) - Adds new semantic background and text tokens.

  Background Tokens (background.[semantics].subtler.*):

  Added subtler variants for semantic background colors with default, hovered, and pressed states:

  • background.success.subtler.[default|hovered|pressed]
  • background.warning.subtler.[default|hovered|pressed]
  • background.danger.subtler.[default|hovered|pressed]
  • background.information.subtler.[default|hovered|pressed]
  • background.discovery.subtler.[default|hovered|pressed]

  Text Tokens (text.[semantics].bolder):

  Added bolder variants for semantic text colors to ensure proper contrast on colored backgrounds:

  • text.success.bolder
  • text.warning.bolder
  • text.danger.bolder
  • text.information.bolder
  • text.discovery.bolder

• 5f77efb81d0d6, (opens new window) - Fixed the dark theme values for tokens above due to wrong base token mapping:
  • color.background.accent.green.subtlest
  • color.background.accent.lime.subtlest
  • color.background.accent.purple.subtlest
  • color.background.accent.teal.subtlest
  • color.background.accent.magenta.subtlest
  • color.background.accent.orange.subtlest
  • color.background.accent.yellow.subtlest

• Updated dependencies

• d50ecf8e02d28, (opens new window) - Added radius.xxlarge token which resolves to 1rem/16px. Fully removed shape-rounder and shape-roundest experimental themes.

• 1e31925550257, (opens new window) - [ux] We have removed the platform-component-visual-refresh feature flag. As a result:

  • Default Themes Changed light-brand-refresh and dark-brand-refresh are now the default themes for light and dark. If you were using on the light-brand-refresh or dark-brand-refresh themes in setGlobalTheme, you'll need to update to the default themes.
  - setGlobalTheme('light-brand-refresh'); + setGlobalTheme('light'); - setGlobalTheme('dark-brand-refresh'); + setGlobalTheme('dark');

  • Accent Tokens Updated Pressed/hovered background tokens for accent colors (e.g., background.accent.blue.subtle.pressed) now use new 250/850 base tokens to improve accessibility. This will cause visible color changes in light and dark themes. Checkout the new color palette here, (opens new window).

  • Visual Regression (VR) Impact If you're using these tokens in your components, expect widespread snapshot updates. This change may affect VR snapshots across apps and packages.

• df9a060fe8b7f, (opens new window) - Adds the native @atlaspack/transformer-tokens plugin for Atlassian Studio builds.

• c4860e82c9f41, (opens new window) - Introduced new color stops across our base color ramps, namely 250 and 850, to support better hover/pressed state contrast. New 250/850 base tokens are:
  • Blue250
  • Blue850
  • Magenta250
  • Magenta850
  • Yellow250
  • Yellow850
  • Orange250
  • Orange850
  • Lime250
  • Lime850
  • Green250
  • Green850
  • Teal250
  • Teal850
  • Red250
  • Red850
  • Purple250
  • Purple850

• 75ba0401c1743, (opens new window) - Deleted deprecated shape tokens. Migration guide:

  Old token	New token/value
  border.radius.050	radius.xsmall
  border.radius	radius.small
  border.radius.100	radius.small
  border.radius.200	radius.large
  border.radius.300	radius.xlarge
  border.radius.400	16px
  border.radius.circle	radius.full
  border.width.0	0
  border.width.outline	border.width.selected or border.width.focused
  border.width.indicator	3px

  The babel plugin has also been updated to skip new radius tokens in shouldForceAutoFallback mode (previously only the deprecated border.radius.x tokens were skipped).

• d65b31774de31, (opens new window) - Removed deprecated border radius and border width tokens from CSS type.

• b662d123e3b3b, (opens new window) - Support external token data for SWC transforms

• 9d6e4b66e81f9, (opens new window) - Updated border width token descriptions.

• 437668dfbdec9, (opens new window) - Add explicit types to a number of DST components

• 25ac893657f27, (opens new window) - Extending setGlobalTheme to accept a function as an argument to update theme properties without reinitializing defaults. For example this can be used when switching color mode:

  setGlobalTheme((themeState) => ({ ...themeState, colorMode: themeState.colorMode === 'light' ? 'dark' : 'light', }));

• c72a8190e4e4f, (opens new window) - add types to generated code for tokens

• de24410d10d9d, (opens new window) - Raw typography tokens export fix.

• d964bc22377d5, (opens new window) - Internal change to documentation

• d4a45d8562c6d, (opens new window) - Added radius.tile token to be used exclusively for creating tiles.

• b2cbc15f17d6a, (opens new window) - Added radius.tile token to be used exclusively for creating tiles.

• 255837cfba315, (opens new window) - Internal changes to how border radius is applied.

• 23bcc5bbc9cee, (opens new window) - Internal changes to how border radius is applied.

• 3b5b4a919aaaf, (opens new window) - Internal changes to how border radius is applied.

• 4c58e9d3cd0b5, (opens new window) - Add radius tokens to CSS type.

• fcd8f46058cd2, (opens new window) - Added new radius and border width tokens. Added new shape themes: shape-rounder and shape-roundest. Note these new themes are experimental and may be deleted without notice. Deprecated old border radius and border width tokens.

• #195371, (opens new window) 44ae158e84619, (opens new window) - [ux] Refreshed typography theme enabled by default.

• #193214, (opens new window) c661806a65543, (opens new window) - Internal changes to how border radius and border width values are applied. No visual change.

• #191847, (opens new window) b3cf5dce34f70, (opens new window) - Internal change to default typography theme configuration.

• Updated dependencies

• #188275, (opens new window) 3be70f03be763, (opens new window) - Deprecating existing typography theme ids (typography-adg3, typography-modernized and typography-refreshed) in favour of a new typography theme id. Using the new typography theme id enables the latest refreshed typography resulting in no functional change. This new typography theme id is enabled by default behind a feature flag. If testing successful, this change will be made available in a later release.

• #184245, (opens new window) f8d9018702c99, (opens new window) - Update DesignTokenStyles type to support using '50%' value for inset properties in @atlaskit/css.

• #176175, (opens new window) 38c08dd349bb7, (opens new window) - Updated examples to use Compiled. Removed Emotion from dev dependencies.

• #174665, (opens new window) 25634b5ccc4d9, (opens new window) - Added metric typography tokens to the CSS type schema.

• #172429, (opens new window) efcc283cecdfe, (opens new window) - Added metric typography tokens which can be used via the CSS font shorthand.

• #171759, (opens new window) 7c69b991b4311, (opens new window) - Updated metric token descriptions.

• #165589, (opens new window) 6cfd5bcd946b6, (opens new window) - Introduction of metric text tokens for typography to be used in charts,dashboards and various neumerical information copies.

• #166633, (opens new window) c146842d9f44f, (opens new window) - Adds an @atlaskit/tokens/token-metadata entrypoint to better share raw metadata across packages for MCP server and similar code generation.

• #164028, (opens new window) fe8647c2f54c6, (opens new window) - The shouldForceAutoFallback option is now set to true by default. Please be aware that upgrading to this major version will cause all explicitly set fallback values (the values in the second argument of token function) in your codebase to be ignored. Instead, these values will be automatically replaced with default values that correspond to the default theme during build time. As a result, the UI may change if certain themes are not yet enabled. If some themes are not ready for this change, you can use the forceAutoFallbackExemptions option to prevent automatic replacement for them during build time. Also, this update might lead to test failures if your tests are designed to verify explicit fallback values. You can explicitly set this value to false if you wish to keep all your current fallback values intact. Read more: https://atlassian.design/tokens/use-tokens-in-code#migration-to-tokens, (opens new window)

• #155802, (opens new window) 08019848e3eab, (opens new window) - Refreshed "issue" terminology.

• #156778, (opens new window) d137f762d8efc, (opens new window) - Expand @atlaskit/css borderRadius API to include {number}px and {number}rem values.

• #150642, (opens new window) 862ea073ae70a, (opens new window) - Fix bug where token-descriptions.csv had broken formatting

• #145286, (opens new window) 1da0ecb159341, (opens new window) - Tiny wording change on @atlaskit/tokens/babel-plugin to more clearly describe the error without string literal argument(s)

• #139915, (opens new window) bb8ff89963687, (opens new window) - Add lightBrandRefresh and darkBrandRefresh to @atlaskit/tokens/tokens-raw

• Updated dependencies

• #137774, (opens new window) 02ed87dfa643c, (opens new window) - Adds forceAutoFallbackExemptions that allows skipping certain tokens from fallback enforcement

• #135818, (opens new window) 0337728c792a2, (opens new window) - Update type for @atlaskit/css padding to include 0.

• #127093, (opens new window) 1378ea7a99ce1, (opens new window) - Upgrades jscodeshift to handle generics properly.

• #127074, (opens new window) 9bb9fc17a4eaa, (opens new window) - Update dependencies and remove unused internal exports.

• #126172, (opens new window) 38625fdee341d, (opens new window) - Exclude border.radius tokens from shouldForceAutoFallback mode

• #124329, (opens new window) b0d988fe689d9, (opens new window) - Consolidate ADS themes by adding the icon.color.subtlest with the value equal to icon.color.subtle to non-brand-refresh themes

• #123455, (opens new window) aa9cadfc7ae99, (opens new window) - Add min() and max() to @atlaskit/css size typing.

• #120305, (opens new window) 1f9d819229019, (opens new window) - Remove system-ui from theme font stacks

• #121762, (opens new window) a7fdeca193df1, (opens new window) - Remove analytics tracking from the token function

• #121081, (opens new window) 90c226d24a7ac, (opens new window) - Expand dimension type in @atlaskit/css to include vw/vh and percentage values.

• #118493, (opens new window) 4338e9dcf77a5, (opens new window) - Updated font.code token to use Atlassian Mono in refreshed theme.

• #118006, (opens new window) 54cb7c190dfd5, (opens new window) - Upgraded package recharts to version 2.15.1, please read changelogs here for major changehttps://github.com/recharts/recharts/blob/v2.0.0/CHANGELOG.md

• #117363, (opens new window) 10a0f7f6c2027, (opens new window) - This package's peerDependencies have been adjusted for react and/or react-dom to reflect the status of only supporting React 18 going forward. No explicit breaking change to React support has been made in this release, but this is to signify going forward, breaking changes for React 16 or React 17 may come via non-major semver releases.

  Please refer this community post for more details: https://community.developer.atlassian.com/t/rfc-78-dropping-support-for-react-16-and-rendering-in-a-react-18-concurrent-root-in-jira-and-confluence/87026, (opens new window)

• Updated dependencies

• #115124, (opens new window) e22fce04b0119, (opens new window) - Narrow type definition for overflowWrap and textDecorationLine properties. This change does not impact the @atlaskit/tokens API directly, but it does narrow types of css properties/tokens used via @atlaskit/css.

• Updated dependencies

• #109060, (opens new window) 4660ec858a305, (opens new window) - Update React from v16 to v18

• Updated dependencies

• #102495, (opens new window) cf97e4ada8d52, (opens new window) - Modernized typography theme now applies a font weight of 653 for bold instead of 700. This includes heading tokens and the individual font.weight.bold token.

• #105744, (opens new window) bc9ed5e4ee94d, (opens new window) - Updated 'ak-postbuild' script to also build '@atlaskit/platform-feature-flags'

• #103074, (opens new window) 62863ade36e82, (opens new window) - Updates the box-shadow type to support the global "initial" CSS value.

• #102047, (opens new window) 3cc4b295175a6, (opens new window) - Removed deprecated tokens:

  • font.size.X
  • font.lineHeight.X
  • font.letterSpacing.X
  • font.family.sans
  • font.family.monospace

  Typography should be applied via composite tokens, i.e. font.heading.X and font.body.X instead. Use font.family.heading or font.family.body instead of font.family.sans. Use font.family.code instead of font.family.monospace.

• #98010, (opens new window) 3f5da8c4a3240, (opens new window) - Adjusted bold weights for typography refreshed theme

• #177967, (opens new window) f387ab1f662e4, (opens new window) - Updated the visual refresh color.chart token values. Reduced the required contrast for a chart color token.

• #174905, (opens new window) 4d46b49f15e36, (opens new window) - Added Atlassian Mono font to typography refreshed theme.

• #178053, (opens new window) cb318c8c28c26, (opens new window) - Internal changes to typography.

• #175552, (opens new window) 0384c8ac8996a, (opens new window) - Narrow down fontStyle type definition to only allow normal and italic.

• #169533, (opens new window) 7cee6c17dfdaf, (opens new window) - Expands type coverage for the fontWeight property to include vendor defaults such as 'inherit' 'initial' 'unset'.

  This change does not impact the @atlaskit/tokens API directly, but it does expand type coverage of css properties/tokens used via @atlaskit/css.

• Updated dependencies

• #166391, (opens new window) a447cb3da0845, (opens new window) - Refreshed typography theme now references Atlassian Sans font.

• #160957, (opens new window) d0fdd33f28249, (opens new window) - [ux] Default typography theme changed to modernized behind feature flag platform-default-typography-modernized. If testing is successful the change will be available in a later release.

• #159268, (opens new window) 487d22f32a93f, (opens new window) - In the DesignTokenStyles schema which controls @atlaskit/css type interfaces:
  • Adds zIndex: -1|0|1 as a valid options
  • Blocks the background property from being used, use backgroundColor or another property directly instead

• #158114, (opens new window) 01676a379617b, (opens new window) - Modifies our bounded CSS type schema to allow both numeric and string 0 values for ease-of-use.

• #154745, (opens new window) b11b1e6b1ee65, (opens new window) - Add FontWeight and FontFamily tokens to the @atlaskit/css API.

• #151850, (opens new window) 1b8cbd71ce0c4, (opens new window) - Add 0 and 1 to @atlaskit/css opacity type.

• Updated dependencies

• #146966, (opens new window) a0a364753d2c7, (opens new window) - Modifies our bounded CSS type schema to allow both numeric and string 0 values for ease-of-use.

• #145551, (opens new window) d477dc32ae480, (opens new window) - Changes the @atlaskit/tokens/babel-plugin's 'shouldUseAutoFallback' configuration to be true by default as this is currently the expectation within a majority of Atlassian's frontend code.

  To opt-out (which likely means you must be using fallbacks manually or can guarantee theming is turned on), you would have config like this in Babel, Webpack, or similar:

  "plugins": [ ["@atlaskit/tokens/babel-plugin", { "shouldUseAutoFallback": false }] ]

• #145551, (opens new window) d477dc32ae480, (opens new window) - Removes 'shouldUseAutoFallbacks' config on '@atlaskit/tokens/babel-plugin' as this is now the default.

• #143310, (opens new window) b41f7cad2418e, (opens new window) - Migrated feature flag for increased contrast themes to new provider

• #138792, (opens new window) 59c6812e1be91, (opens new window) - Update the @atlaskit/css schema to include:
  • border and font shorthand token values
  • Background and color -hovered and -pressed tokens are available in the non-psuedo-states for patterns like <div css={[isHovered && hoveredStyles]} />
  • Adds more commonly used media queries

• #133730, (opens new window) 1e7250bf14d57, (opens new window) - Added experimental typography-refreshed theme

• #130373, (opens new window) dd80abd23af36, (opens new window) - Added experimental typography-refreshed theme. This should not be used at this stage.

• #127511, (opens new window) db30e29344013, (opens new window) - Widening range of react and react-dom peer dependencies from ^16.8.0 || ^17.0.0 || ~18.2.0 to the wider range of ``^16.8.0 || ^17.0.0 || ^18.0.0` (where applicable).

  This change has been done to enable usage of react@18.3 as well as to have a consistent peer dependency range for react and react-dom for /platform packages.

• Updated dependencies

• #126723, (opens new window) b637fc4edb5b9, (opens new window) - [ux] tokens-babel-plugin accepts shouldForceAutoFallback which overrides fallback values regardless of provided fallback.

• #125137, (opens new window) f50390862bd7b, (opens new window) - Updated shadow tokens to use the new colours from visual refresh colour palettes. Changes are also behind the visual refresh feature flag.

• #121959, (opens new window) 44763b631bec5, (opens new window) - Renamed typography-minor3 theme to typography-modernized. There are no visual changes, purely just a rename.

• #121520, (opens new window) 4217ca1a57749, (opens new window) - Internal change only. Prefix unused argument of getThemeOverridePreferences with an underscore.

• #120903, (opens new window) 11a0097de20b0, (opens new window) - Added brand refresh color and token changes behind a feature flag.

• #120811, (opens new window) f66512151ee38, (opens new window) - Removed responsive behaviour from heading tokens. Heading tokens will no longer scale down on smaller displays. This may be reintroduced in the future with different behaviour.

• #120049, (opens new window) 77504ff274f72, (opens new window) - DSP-19576: Assign names to anonymous default exports

• #119869, (opens new window) c9fbedbef614e, (opens new window) - The DesignTokenStyles type now allows transparent and currentcolor for backgrounds, and transparent for text colors.

• #116982, (opens new window) a8a3ff480c6a1, (opens new window) - Cleaned up feature flag platform.design-system-team.mutation-observer-performance-improvement_8usdg.

• Updated dependencies

• #114028, (opens new window) e4471e32707ff, (opens new window) - Export ActiveThemeState type from main entry point

• #113646, (opens new window) 01c04f5a4e85a, (opens new window) - Add link tokens to the IconColor type, and add new IconColorPressed type

• #111016, (opens new window) d131599730792, (opens new window) - Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime is implicitly set to automatic.

• #110191, (opens new window) c3dc02298f8aa, (opens new window) - [ux] Change heading xsmall lineheight from 16 to 20 for minor third theme.

• #101609, (opens new window) 4f0dff39fd37, (opens new window) - Change naming of base lineheight tokens.

• #95202, (opens new window) 6350f05328cc, (opens new window) - Adds new IconColor type to the CSS type schema

• #98637, (opens new window) ae9502319628, (opens new window) - Export FontFamilyToken and FontWeightToken types. Added descriptions for typography tokens. Internal changes to token ordering logic.

• #98149, (opens new window) 45101e24202a, (opens new window) - Change the state of the following tokens from deprecated to active:
  • font.family.body
  • font.family.code
  • font.family.heading

• #97306, (opens new window) cefbd515c807, (opens new window) - Add support for React 18 in non-strict mode.

• #98562, (opens new window) 5c59b4fec679, (opens new window) - ThemeMutationObserver only ever creates one instance of a mutation observer which reduces memory impacts at scale. This change is behind a platform feature flag - "platform.design-system-team.mutation-observer-performance-improvement_8usdg"

• #96516, (opens new window) fc7451742d3b, (opens new window) - Remove the version from non-production warns to avoid internal conflicts as debugging like this should not be necessary; this package should be a singleton.

• #94675, (opens new window) 5d9e1dccacca, (opens new window) - [ux] Update input border color token to meet 3:1 color contrast ratioLight theme: color.border.input: #091E4224 → #8590A2Dark mode: color.border.input: #A6C5E229 → #738496

• #96059, (opens new window) e511f40c0989, (opens new window) - Generate a local prebuilt version of this package (to use the babel plugin internally in local consumption more performantly)–should not interfere with distribution at all.

• #94487, (opens new window) 9c81d48cda91, (opens new window) - Removed deprecated experimental font.ui tokens. These experimental tokens were not documented and not intended for use. The font.body tokens should be used instead.

• #94316, (opens new window) 35fd5ed8e1d7, (opens new window) - Upgrading internal dependency bind-event-listener to @^3.0.0

• #91883, (opens new window) 90edf674186c, (opens new window) - Gracefully handles falsy values passed in as theme properties.

• #85745, (opens new window) 0e9c8c15ef86, (opens new window) - Added new color token color.link.visited.pressed.

• #83116, (opens new window) 8d4e99057fe0, (opens new window) - Upgrade Typescript from 4.9.5 to 5.4.2

• #78900, (opens new window) 6ea786dd8082, (opens new window) - Add UNSAFE_small fontsize token.

• #80571, (opens new window) fafdb1dcce96, (opens new window) - Fix bugs in strict CSS typedef.

• #81644, (opens new window) 8ab7a816dca7, (opens new window) - Revert input border change from the previous version

• #80805, (opens new window) 427c2dd9e0d6, (opens new window) - [ux] Update input border color token to meet 3:1 color contrast ratio

  Light theme: color.border.input: #091E4224 → #8590A2 Dark mode: color.border.input: #A6C5E229 → #738496

• #79670, (opens new window) 28b71d14576b, (opens new window) - Adds autofallback support for Spacing, Typography, and Shape themes to the babel plugin.

• #79770, (opens new window) 42fb3733fe8b, (opens new window) - Add exports and update entrypoint

• #79306, (opens new window) 465924177c82, (opens new window) - Moves dependency whitelist from hypermod.config to package.json

• #77148, (opens new window) 20decda98a72, (opens new window) - Deprecated font.ui tokens.

• #74836, (opens new window) 66062ea65d5b, (opens new window) - Added font family tokens for our brand font for headings and body text.

• #73844, (opens new window) c7683b370ae8, (opens new window) - Adds dependency whitelist to codemod configuration

• #72557, (opens new window) 0c78c9c18cb7, (opens new window) - Fix font family not preferencing apple system fonts on macOS

• #71146, (opens new window) 3e20d00d3d46, (opens new window) - Moves tokens codemods into the tokens package.

• #71486, (opens new window) a79fa3261943, (opens new window) - Undeprecate font weight tokens

• #68163, (opens new window) de75cc685652, (opens new window) - Font UI weight token value changed to medium weight

• #68792, (opens new window) 89564a857049, (opens new window) - Add light border as default option

• #67463, (opens new window) caac5b953575, (opens new window) - Fixed an issue where typography tokens referenced font family tokens that may not exist on a page, causing fallbacks to break.

• #63526, (opens new window) e8835feffae9, (opens new window) - Internal change to improve token sorting logic for typography tokens. Typography tokens are now marked as active though they are still in development and not recommend for use without prior approval from ADS.

• #63504, (opens new window) 668f6aa3ca86, (opens new window) - Adds an entrypoint @atlaskit/tokens/css-type-schema containing a type definition for css values contrained to tokens.

• #62155, (opens new window) d88ffee39278, (opens new window) - Added new themes for ads-vision-lab

• #59752, (opens new window) df0bbb7c4cc1, (opens new window) - Removed minor-second typography theme: typography. ADG3 and Minor third themes remain as the two typography themes.

• #59147, (opens new window) f12e489f23b0, (opens new window) - Re-build and deploy packages to NPM to resolve React/Compiled not found error (HOT-106483).

• #57118, (opens new window) b9bd80957181, (opens new window) - Upgrade Emotion v10 (@emotion/core) to Emotion v11 (@emotion/react). No behaviour change expected.

• #43538, (opens new window) c10b408a053, (opens new window) - Deprecate typography base tokens.

• #43718, (opens new window) 8aebcad547a, (opens new window) - Deprecated tokens are now warned against even when a replacement token has not been specified

• #43455, (opens new window) 16586bd07a0, (opens new window) - Updated font.body.small line height to 16px (1rem).

• #42413, (opens new window) 202e2c9c2ff, (opens new window) - Fix for vuln VULN-1112073, (opens new window) by bumping @babel/traverse to safest patch 7.23.2.

• #41365, (opens new window) fab3ce9e39a, (opens new window) - Added smaller variants of heading tokens that get used for screen widths 1023px and below (Minor Third scale only). For example font.heading.xlarge will switch to the styles defined by font.heading.large on smaller screens.

• #41516, (opens new window) e6f589d4777, (opens new window) - [ux] This version releases changes that were feature flagged in version 1.25.0; they include minor adjustments to our color palette and design tokens.

  These changes make certain colors more distinguishable, improves the visual appearance of warning and yellow accent backgrounds, and reduces saturation for subtle backgrounds in dark mode.

All saturated palettes

• Saturation for 1000 shades reduced for all saturated palettes to reduce eye strain when placed against subtle UI in dark mode

Red

• Saturation reduced on entire scale
• Hue adjusted to create more separation from orange

Orange

• Saturation reduced on entire scale
• Hue adjusted to create more separation from yellow

Lime

• Saturation for 100 shades reduced

Green

• Saturation for 100 shades reduced

Teal

• Hue adjusted to create more separation from green

All palette changes

• Red100 has changed from #FFEDEB to #ffeceb
• Red200 has changed from #FFD2CC to #ffd5d2
• Red300 has changed from #FF9C8F to #fd9891
• Red400 has changed from #F87462 to #f87168
• Red500 has changed from #EF5C48 to #f15b50
• Red600 has changed from #E34935 to #e2483d
• Red700 has changed from #CA3521 to #c9372c
• Red800 has changed from #AE2A19 to #ae2e24
• Red900 has changed from #601E16 to #5d1f1a
• Red1000 has changed from #4F1C16 to #42221F
• Orange100 has changed from #FFF4E5 to #fff3eb
• Orange200 has changed from #FFE2BD to #fedec8
• Orange300 has changed from #FEC57B to #fec195
• Orange400 has changed from #FAA53D to #fea362
• Orange500 has changed from #F18D13 to #f38a3f
• Orange600 has changed from #D97008 to #e56910
• Orange700 has changed from #B65C02 to #c25100
• Orange800 has changed from #974F0C to #A54800
• Orange900 has changed from #5F3811 to #702e00
• Orange1000 has changed from #4A2B0F to #38291e
• Yellow1000 has changed from #3F3102 to #332E1B
• Lime100 has changed from #EEFBDA to #EFFFD6
• Lime1000 has changed from #2A3818 to #28311B
• Green100 has changed from #DFFCF0 to #DCFFF1
• Green1000 has changed from #143C2B to #1C3329
• Teal100 has changed from #E3FAFC to #E7F9FF
• Teal200 has changed from #C1F0F5 to #C6EDFB
• Teal300 has changed from #8BDBE5 to #9DD9EE
• Teal400 has changed from #60C6D2 to #6CC3E0
• Teal500 has changed from #37B4C3 to #42B2D7
• Teal600 has changed from #1D9AAA to #2898BD
• Teal700 has changed from #1D7F8C to #227D9B
• Teal800 has changed from #206B74 to #206A83
• Teal900 has changed from #1D474C to #164555
• Teal1000 has changed from #15373B to #1E3137
• Blue1000 has changed from #092957 to #1C2B41
• Purple1000 has changed from #2B2451 to #2B273F
• Magenta1000 has changed from #421F34 to #3D2232

Yellow accent backgrounds

Mapped to lighter shades to create differentiation with orange, and increase vibrancy:

• [Light theme] color.background.yellow.subtle: Yellow400 → Yellow300
• [Light theme] color.background.accent.yellow.subtle.hovered: Yellow300 → Yellow400
• [Light theme] color.background.accent.yellow.subtle.pressed: Yellow200 → Yellow500

Bold warning backgrounds

Mapped to lighter shades to increase vibrancy:

• [Light theme] color.background.warning.bold: Yellow400 → Yellow300
• [Dark mode]: color.background.warning.bold: Yellow400 → Yellow300
• [Light theme] color.background.warning.bold.hovered: Yellow500 → Yellow400
• [Dark mode]: color.background.warning.bold.hovered: Yellow300 → Yellow400
• [Light theme] color.background.warning.bold.pressed: Yellow600 → Yellow500
• [Dark mode]: color.background.warning.bold.pressed: Yellow200 → Yellow500

Icon

Mapped red/danger icons to darker shades to create distinction between orange and red icons:

• [Light theme]: color.icon.accent.red: Red600 → Red700
• [Dark theme]: color.icon.accent.red: Red500 → Red600
• [Dark theme]: color.icon.accent.yellow: Yellow500 → Yellow300
• [Light theme]: color.icon.danger: Red600 → Red700
• [Dark theme]: color.icon.warning: Yellow500 → Yellow300

• #40324, (opens new window) 67b68e00b3f, (opens new window) - Removed un-exported schema information from src and the package bundle

• #40801, (opens new window) f0f44726caa, (opens new window) - We are testing increased contrast themes behind a feature flag. These are alternative themes that enable according to user contrast system preferences. If testing is successful they will be available in a later release.

• #41083, (opens new window) efb7932428f, (opens new window) - Fix a bug introduced in @atlaskit/tokens@1.25.1 that added an invalid peer dependency. The previous version has been marked as deprecated.

• #40299, (opens new window) b1882fdd842, (opens new window) - Change typography token naming to be more verbose.

• #40253, (opens new window) 6125697f0b4, (opens new window) - We are testing adjustments to our color palette and design tokens behind a feature flag. These changes make certain colors more distinguishable, improves the visual appearance of warning and yellow accent backgrounds, and reduces saturation for subtle backgrounds in dark mode.

  These changes are available behind a feature flag; if this test is successful it will be available in an upcoming minor release.

• #40041, (opens new window) 0c2e2baec38, (opens new window) - Added new color.link.visited token.

• #38420, (opens new window) 5a967ac2397, (opens new window) - Adds two new synchronous theme configuration utilities:
  • enableGlobalTheme is a synchronous version of setGlobalTheme that sets data attributes on the page and takes a themeLoader
  • UNSAFE_loadCustomThemeStyles provides a synchronous way to generate and apply custom theme styles to the page. It can be accessed from a new entrypoint, @atlaskit/tokens/custom-themes

• #40072, (opens new window) 7b6548e6ad0, (opens new window) - Internally moves the logic which applies spacing as a defaulty enabled theme to be more inline with other themes.

• #39854, (opens new window) 3d5c5dbe08c, (opens new window) - Adds UNSAFE_textTransformUppercase token. This token should not be used directly unless to aid a migration.

• #39653, (opens new window) 12c0a5a6f2e, (opens new window) - The tokens Babel plugin will now add opacity to shadow token values if they don't already contain them.

• #39578, (opens new window) 9eee297c402, (opens new window) - Added negative space tokens from -2px to -32px (space.negative.025 to space.negative.400).

• #39641, (opens new window) 4be033a9cb5, (opens new window) - Update types

• #38118, (opens new window) 0a95595cd3e, (opens new window) - Space tokens are now enabled by default whenever setGlobalTheme is called.

• #39430, (opens new window) ff1a0d8dcfd, (opens new window) - Introduces 80 new accent interaction tokens:

  • color.background.accent.blue.subtlest.hovered

  • color.background.accent.blue.subtlest.pressed

  • color.background.accent.blue.subtler.hovered

  • color.background.accent.blue.subtler.pressed

  • color.background.accent.blue.subtle.hovered

  • color.background.accent.blue.subtle.pressed

  • color.background.accent.blue.bolder.hovered

  • color.background.accent.blue.bolder.pressed

  • color.background.accent.lime.subtlest.hovered

  • color.background.accent.lime.subtlest.pressed

  • color.background.accent.lime.subtler.hovered

  • color.background.accent.lime.subtler.pressed

  • color.background.accent.lime.subtle.hovered

  • color.background.accent.lime.subtle.pressed

  • color.background.accent.lime.bolder.hovered

  • color.background.accent.lime.bolder.pressed

  • color.background.accent.red.subtlest.hovered

  • color.background.accent.red.subtlest.pressed

  • color.background.accent.red.subtler.hovered

  • color.background.accent.red.subtler.pressed

  • color.background.accent.red.subtle.hovered

  • color.background.accent.red.subtle.pressed

  • color.background.accent.red.bolder.hovered

  • color.background.accent.red.bolder.pressed

  • color.background.accent.orange.subtlest.hovered

  • color.background.accent.orange.subtlest.pressed

  • color.background.accent.orange.subtler.hovered

  • color.background.accent.orange.subtler.pressed

  • color.background.accent.orange.subtle.hovered

  • color.background.accent.orange.subtle.pressed

  • color.background.accent.orange.bolder.hovered

  • color.background.accent.orange.bolder.pressed

  • color.background.accent.yellow.subtlest.hovered

  • color.background.accent.yellow.subtlest.pressed

  • color.background.accent.yellow.subtler.hovered

  • color.background.accent.yellow.subtler.pressed

  • color.background.accent.yellow.subtle.hovered

  • color.background.accent.yellow.subtle.pressed

  • color.background.accent.yellow.bolder.hovered

  • color.background.accent.yellow.bolder.pressed

  • color.background.accent.green.subtlest.hovered

  • color.background.accent.green.subtlest.pressed

  • color.background.accent.green.subtler.hovered

  • color.background.accent.green.subtler.pressed

  • color.background.accent.green.subtle.hovered

  • color.background.accent.green.subtle.pressed

  • color.background.accent.green.bolder.hovered

  • color.background.accent.green.bolder.pressed

  • color.background.accent.teal.subtlest.hovered

  • color.background.accent.teal.subtlest.pressed

  • color.background.accent.teal.subtler.hovered

  • color.background.accent.teal.subtler.pressed

  • color.background.accent.teal.subtle.hovered

  • color.background.accent.teal.subtle.pressed

  • color.background.accent.teal.bolder.hovered

  • color.background.accent.teal.bolder.pressed

  • color.background.accent.purple.subtlest.hovered

  • color.background.accent.purple.subtlest.pressed

  • color.background.accent.purple.subtler.hovered

  • color.background.accent.purple.subtler.pressed

  • color.background.accent.purple.subtle.hovered

  • color.background.accent.purple.subtle.pressed

  • color.background.accent.purple.bolder.hovered

  • color.background.accent.purple.bolder.pressed

  • color.background.accent.magenta.subtlest.hovered

  • color.background.accent.magenta.subtlest.pressed

  • color.background.accent.magenta.subtler.hovered

  • color.background.accent.magenta.subtler.pressed

  • color.background.accent.magenta.subtle.hovered

  • color.background.accent.magenta.subtle.pressed

  • color.background.accent.magenta.bolder.hovered

  • color.background.accent.magenta.bolder.pressed

  • color.background.accent.gray.subtlest.hovered

  • color.background.accent.gray.subtlest.pressed

  • color.background.accent.gray.subtler.hovered

  • color.background.accent.gray.subtler.pressed

  • color.background.accent.gray.subtle.hovered

  • color.background.accent.gray.subtle.pressed

  • color.background.accent.gray.bolder.hovered

  • color.background.accent.gray.bolder.pressed

• #39135, (opens new window) c27587454bb, (opens new window) - Update to include additional body token.

• #38368, (opens new window) 11d00ba7be0, (opens new window) - Fixes style-dictionary token references. allowing semantic tokens to be aliases of other semantic tokens

• #38226, (opens new window) e6d73d0e019, (opens new window) - Removes inset from elevation shadow borders.

• #37789, (opens new window) 031034da425, (opens new window) - Introduces surface detection through the use of design tokens/CSS variables:
  • The utility.elevation.surface.current design token allows UI to be styled with a color based on a parent element's surface color.
  • The CURRENT_SURFACE_CSS_VAR constant is exported to enable the current surface CSS variable to be set.

• #39128, (opens new window) 3c114ea4257, (opens new window) - Update type definitions to conform to inherited changes from @types/react@16.14.15.

• #38620, (opens new window) 2b79cf3df13, (opens new window) - Patches certain token values in the internal typography theme.

• #38433, (opens new window) 6b31bb82f08, (opens new window) - Introduces experimental typography theme (v2).

• #37003, (opens new window) 8e1667c2c03, (opens new window) - Adds the ability to specify a fallback theme in the tokens Babel plugin via the defaultTheme option. Also adds 'legacy-light' as one of the available themes, while keeping 'light' as the default if nothing is provided.

• #37532, (opens new window) b423f118bb8, (opens new window) - Adjusted color generation system for custom theming to improve accessibility.

• #37768, (opens new window) d9d7c284713, (opens new window) - Add custom theming support to ThemeObjectToString and ThemeStringToObject functions.

• #37534, (opens new window) f29001ccc8c, (opens new window) - Renamed type "CustomBrandSchema" to "ThemeOptionsSchema" for experimental custom theming API

• #37182, (opens new window) 74f7af9882b, (opens new window) - [ux] correct fallback color of token color.border.focused to meet contrast requirement

• #36967, (opens new window) bc512702bdc, (opens new window) - Introduces new brand background tokens.

  • color.background.brand.subtlest - Use for the background of elements used to reinforce our brand, but with less emphasis.

  • color.background.brand.subtlest.hovered - Hovered state of color.background.brand.subtlest.

  • color.background.brand.subtlest.pressed - Pressed state of color.background.brand.subtlest.

  • color.background.brand.boldest - Use for the background of elements used to reinforce our brand, that need to stand out a lot.

  • color.background.brand.boldest.hovered - Hovered state of color.background.brand.boldest.

  • color.background.brand.boldest.pressed - Pressed state of color.background.brand.boldest.

  Updates custom color generation system with new brand background tokens.

• #36501, (opens new window) beba2779d31, (opens new window) - Add experimental support for custom theming via the UNSAFE_themeOptions field in themeState.

  This option is supported in the following functions:

  • setGlobalTheme(): optionally generates and loads customized themes based on the options provided, and sets the data-custom-theme attribute on page's HTML tag.
  • getThemeStyles(): returns additional style objects for constructing custom theme <style> tags.
  • getThemeHtmlAttrs(): now supports the data-custom-theme attribute.

  Custom themes are generated at runtime based on the options provided. The theme generation logic is lazy-loaded only when UNSAFE_themeOptions is set.

• #36457, (opens new window) 1b40a9ff426, (opens new window) - update border.input.color to DarkNeutral600

• #36334, (opens new window) 5f3a4279435, (opens new window) - Fixes invalid default values assigned to shadow tokens in the token-default-values.tsx artifact
• #36279, (opens new window) 694b79161b8, (opens new window) - Corrects Lime chart tokens in the dark mode theme so they use the correct base tokens

• #35441, (opens new window) 7053f18ecc5, (opens new window) - Added suggest metadata to shape tokens to aid future migration suggestions.
• ba43427b3e8, (opens new window) - Internal changes to account for introduction of shape/radius tokens.

• #36265, (opens new window) c96e003db64, (opens new window) - Following on from 1.7.0, shape tokens are no longer being enabled behind a feature flag. Only space tokens will be enabled by default when the feature flag is active.

• #36218, (opens new window) 7c1c449eb96, (opens new window) - Updated space token descriptions.

• #36072, (opens new window) 7fb8fb4fbbb, (opens new window) - - Fixed an issue where getCSSCustomProperty would return the incorrect CSS variable names for space tokens.
  • Updated space token descriptions.

• #33680, (opens new window) 31426322355, (opens new window) - - Add a new getAllThemeStyles() function that can be used for generating theme CSS files at build time.
  • Add an optional callback parameter to setGlobalTheme() that overrides the default theme loading functionality with the callback.

• #35762, (opens new window) 7ab8146e433, (opens new window) - Re-introduce entry point for token-default-values

• #34744, (opens new window) 06fb6792d1f, (opens new window) - Subtle adjustments to some color design tokens to improve the dark theme. These changes were previously being tested behind a feature flag.

• #35111, (opens new window) 8f436f0c301, (opens new window) - extend border contrast feature flag to support confluence

• #35526, (opens new window) e200f2340ed, (opens new window) - Introduces new lime token set.
  • color.text.accent.lime - Use for lime text on subtlest and subtler lime accent backgrounds when there is no meaning tied to the color.
  • color.text.accent.lime.bolder - Use for lime text on subtle lime accent backgrounds when there is no meaning tied to the color.
  • color.background.accent.lime.subtlest - Use for lime backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.
  • color.background.accent.lime.subtler - Use for lime backgrounds when there is no meaning tied to the color, such as colored tags.
  • color.background.accent.lime.subtle - Use for vibrant lime backgrounds when there is no meaning tied to the color, such as colored tags.
  • color.background.accent.lime.bolder - Use for lime backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.
  • color.icon.accent.lime - Use for lime icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.
  • color.border.accent.lime - Use for lime borders on non-bold backgrounds when there is no meaning tied to the color.
  • color.chart.lime - For data visualisation only.
  • color.chart.lime.hovered - Hovered state of color.chart.lime
  • color.chart.lime.bolder - For data visualisation only.
  • color.chart.lime.bolder.hovered - Hovered state of color.chart.lime.bolder
  • color.chart.lime.boldest - For data visualisation only.
  • color.chart.lime.boldest.hovered - Hovered state of color.chart.lime.boldest

• #35590, (opens new window) 85b5f222844, (opens new window) - We are testing shape and space tokens behind a feature flag. These tokens will be enabled by default whenever setGlobalTheme is called. If this test is successful it will be available in a later release.

• #35385, (opens new window) 191bbd4a3c2, (opens new window) - Public changes to types for setGlobalTheme to match API - previously themes could be incorrectly applied ie the light theme could theoretically take the space theme as a valid value. No behavior changes. Internally the shape theme has been moved from experimental status. These tokens are now active however they remain disabled by default.

• 98edc7e8b62, (opens new window) - Patch for tokens metadata and descriptions.

• #34800, (opens new window) 8be4cc2372f, (opens new window) - update border color to Neutral500

• #33652, (opens new window) e7ea6832ad2, (opens new window) - Bans the use of React.FC/React.FunctionComponent type in ADS components as part of the React 18 migration work. The change is internal only and should not introduce any changes for the component consumers.

• #34217, (opens new window) 43d186af89c, (opens new window) - [ux] Updates spacing, typography metadata to apply rems or pixels depending on the target platform.

• 019af32072d, (opens new window) - Add shape token handling to the ensure-design-token-usage-spacing rule.

• #34445, (opens new window) 33f10b7eb36, (opens new window) - Removing unused dependencies and dev dependencies

• #33905, (opens new window) 32e364bed0b, (opens new window) - We are testing color tweaks to the dark theme behind a feature flag.

• #33793, (opens new window) 9d00501a414, (opens new window) - Ensure legacy types are published for TS 4.5-4.8

• #33649, (opens new window) 41fae2c6f68, (opens new window) - Upgrade Typescript from 4.5.5 to 4.9.5

• #33329, (opens new window) 36158b8bcb9, (opens new window) - [ux] update color.border.input to meet 3:1 contrast

• #33299, (opens new window) bae41641c82, (opens new window) - Enable the dark theme tweaks for Confluence behind a feature flag.

• #32858, (opens new window) e55ef3fcfac, (opens new window) - Fixes an issue where the dark theme tweaks (currently behind a feature flag) were not being displayed in some cases due to a race condition.

• #33258, (opens new window) 56507598609, (opens new window) - Skip minor dependency bump

• Updated dependencies

• #33005, (opens new window) 1a1dc6a0370, (opens new window) - Upgrade @babel scoped packages to ^7.20.0

• #32533, (opens new window) ea8c1af425d, (opens new window) - Fixes a bug in setGlobalTheme() that caused both the light and dark themes to load when auto theme switching was disabled — only one of the themes should be loaded in this case. It also fixes a bug in getThemeStyles(), where the default color themes were loaded instead of the specified theme.

• #32434, (opens new window) 6cf7fc4647d, (opens new window) - Adds color-scheme css property to color themes to ensure the correct scheme is used at all times. Previously this was only part of the css-reset however in instances where that is not used this property will always be applied

• #32333, (opens new window) 1ddf6dd6387, (opens new window) - Adds a beta contrast checking tool to token examples utilising a new "token pairing" algorithm to find recommended pairs of foreground and background tokens. There is no change to API or bundle size.

• #32424, (opens new window) 2e01c9c74b5, (opens new window) - DUMMY remove before merging to master; dupe adf-schema via adf-utils

• #32294, (opens new window) e0460d5d989, (opens new window) - Usages of process are now guarded by a typeof check.
• #32308, (opens new window) 2efaed356e0, (opens new window) - Modified color.text.accent.gray.bolder token value for the dark theme.

• #32311, (opens new window) a02eed2974e, (opens new window) - Move codegen into @atlassian scope to publish it to private registry

• #32209, (opens new window) ec8f1ac379a, (opens new window) - Tweaks to dark theme tokens (background.selected and background.selected.pressed) behind a feature flag.

• #32057, (opens new window) 8ec4434b4c2, (opens new window) - The return type for useThemeObserver now omits auto as a possible option for colorMode. From the perspective of observers auto does not exist because colorMode is precalculated at runtime.

• #32049, (opens new window) 80a0a472d01, (opens new window) - Onboard @atlaskit/tokens on push model consumption

• #31793, (opens new window) aef90f8953b, (opens new window) - Tweaks to a subset of dark theme tokens behind a feature flag.

• #31886, (opens new window) de4f079569a, (opens new window) - The tokens babel-plugin will no longer run on files in node_module directories. This is to avoid attempting to transform legacy tokens from older transitive dependencies.

• #31206, (opens new window) 23b381db41c, (opens new window) - Upgrades component types to support React 18.

• #31242, (opens new window) cfe48bb7ece, (opens new window) - Internal change only. Replace usages of Inline/Stack with stable version from @atlaskit/primitives.

• #31155, (opens new window) d1adc718599, (opens new window) - Added token-order entry-point, exported ActiveTokens type.

• #30998, (opens new window) 2717641f696, (opens new window) - The getTokenValue helper now strips leading or trailing spaces if they exist.

• #30894, (opens new window) e2b8df300f2, (opens new window) - Pull responsive helpers from @atlaskit/primitives/responsive instead of @atlaskit/grid as they've been moved.

• #30708, (opens new window) 67a01afe12b, (opens new window) - Add internal and experimental token for border.width.0

• #30125, (opens new window) 7f5f23dcb68, (opens new window) - Introduce shape tokens to some packages.

• #30055, (opens new window) 64d30817221, (opens new window) - Introduce experimental 'shape' tokens for use with border properties.

• #29387, (opens new window) 4b9aea55b97, (opens new window) - Removed various unused experimental spacing tokens in favor of the space.X token format.

  Removed:

  • spacing.scale
  • spacing.scaleLinear
  • spacing.size
  • spacing.gap
  • spacing.inset
  • spacing.ecl
  • spacing.ccc

• #27634, (opens new window) 512be9e1854, (opens new window) - This PR introduces the 1.0 stable version of @atlaskit/tokens. With the changes introduced here, the tokens package will be considered stable and feature-complete moving forward.

Previously, themes were exposed as static CSS files via custom entry-points. This worked quite well but had a couple of obvious drawbacks.

1. CSS files depend on webpack/css-loading mechanisms (style-loader/css-loader) which aren't available in all environments.

2. Configuration and ordering of themes happened entirely in products, which becomes increasingly harder to maintain as new themes & functionality are introduced

We have moved this to a lazy-loaded JS solution. Themes are now codegen'd into Javascript modules, wrapped in a template literal string, then lazy-loaded and mounted to the head of the document when required at runtime.

Benefits include:

• More control over the ordering and composition of themes

• Automatic lazy-loading of new themes when setGlobalTheme is called by the client

• Simplified bundler configuration

• Improved portability

• Integrates with a new SSR solution for theme loading

Changes:

If you set themes using setGlobalTheme in your app, you can now remove manual imports of theme CSS files from your app. The themes will be automatically added when setGlobalTheme is called.

-import("atlassian-light.css") from '@atlaskit/tokens/css' -import("atlassian-legacy-dark.css") from '@atlaskit/tokens/css' -setGlobalTheme("light", true) +setGlobalTheme({light: "light", dark: "legacy-dark", colorMode: 'auto'})

If your app supports server-side rendering, further work is required to ensure themes are loaded on the page before first paint. See below for details on the new SSR utilities.

As per our versioning strategy, (opens new window), MAJOR versions is when we remove all deprecated and sunset tokens. This provides significant bundle size improvements to token CSS files.

If you have been using our lint rules @atlaskit/design-system/no-unsafe-design-token-usage and @atlaskit/design-system/no-deprecated-design-token-usage, these tokens should already be triggering eslint errors from the version they were deprecated.

Please run yarn eslint --fix or similar to automate your migration before upgrading to 1.0.0.

Please see below for a full list of removed tokens and their replacements.

Note: MISSING_TOKEN is also being removed. This was a utility token to support early migration efforts; as tokens are now visible to end-users, please ensure all usages are removed from your app.

ThemeState configuration object

setGlobalTheme, ThemeMutationObserver & useThemeObserver now input and output theme preferences as a themeState object rather than a space-separated string. This enables:

• Stronger type safety

• Explicit definition of themes to render in light and dark mode.

• Improved extensibility options for new types of themes, such as spacing and typography.

themeState has the following default values, which set the standard Atlassian color themes, and enables automatic color mode switching based on the user's system preference:

{ colorMode: 'auto', dark: 'dark', light: 'light', spacing: undefined, typography: undefined, };

Any usages of setGlobalTheme need` to be updated to the new object syntax:

-setGlobalTheme('light'); +setGlobalTheme({ light: 'light', colorMode: 'light' ...});

Changes to colorMode

Previously, the current color mode (i.e. "light" or "dark" mode) was inferred from the color theme passed into setGlobalTheme. A second parameter, shouldMatchSystem, set data-color-mode to 'auto' and matched the current theme to operating system settings:

setGlobalTheme('legacy-dark'); // a "dark" theme, so color mode is set to 'dark' setGlobalTheme('light', true); // color mode is 'light' or 'dark' depending on system theme

Now, the current color mode, as well as which themes to render in each color mode, can be configured via the themeState object:

setGlobalTheme({ dark: 'dark' // in dark mode, use the 'dark' theme light: 'light' // in light mode, use the 'light' theme colorMode: 'auto', // Set the color mode automatically based on system preference });

If your app previously set the second parameter, shouldMatchSystem, this feature is now enabled by default.

// Automatic theme switching -setGlobalTheme('light', true) +setGlobalTheme({light: 'light', dark: 'dark', 'auto'}) // OR, since setGlobalTheme has default values +setGlobalTheme({}) // Light theme -setGlobalTheme('light') +setGlobalTheme({light: 'light', colorMode: 'light'}) // OR +setGlobalTheme({colorMode: 'light'}) // Dark theme -setGlobalTheme('dark') +setGlobalTheme({dark: 'dark', colorMode: 'dark'}) // OR +setGlobalTheme({colorMode: 'dark'})

Color mode switching is enabled by default

As noted above, automatic theme switching is now enabled by default. To disable automatic theme switching, set colorMode to either 'light' or 'dark'.

The way this state is reflected on the DOM has been updated to match the changes above:

-<html data-theme="light" data-color-mode="light"> +<html data-theme="light:light dark:dark spacing:compact" data-color-mode="light">

Theme state on the DOM is primarily to store data in a place that can be accessed from anywhere in the app, and secondly to activate CSS selectors.

Two new utilities, themeStringToObject and themeObjectToString, allow conversion from string to object syntax if necessary.

Token auto theme switching now uses a Javascript-based solution, rather than embedding media queries in theme CSS files. If colorMode is set to 'auto', media query event listeners will trigger when the system theme changes, and update data-color-mode to 'light' or 'dark' automatically.

This provides several benefits:

• Significant (~50%) improvements to bundle size for token CSS files compared to the pre-release version of @atlaskit/tokens.

• Simpler logic for switching an experience based on the current theme:

  • Previously, experiences using theme observers had to check a combination of the data-color-mode attribute use media queries to to correctly match the currently rendered color mode in light, dark and 'auto' color modes. Now, the data-color-mode attribute always matches the currently rendered color mode, and media queries are no longer required.

As a result of this change, the data-color-mode attribute no longer supports the value 'auto'. If your experience checked for this value, this logic can now be removed, as data-color-mode will always reflect the currently rendered theme.

Three new utility functions provide the logic required to load and display the correct themes in your server-rendered output, preventing a flash of incorrectly themed content on first paint. Each accepts the same themeState object representing the user's stored theme preference:

• getThemeStyles provides the contents of <style> tags to attach to the head of your server-side rendered document

• getThemeHtmlAttributes provides data-attributes to set on the root of your document.

• getSSRAutoScript provides a script to detect the system theme and configure the color mode before first paint.

For more information on these utilities, check the @atlaskit/tokens API documentation, (opens new window) on atlassian.design.

Observer fixes:

useThemeObserver & ThemeMutationObserver now listen to changes on data-theme instead of data-color-mode.

Previously changes between two themes that both have a light color mode would not trigger an event since data-color-mode would not be updated. With this fix, the event fires on every call to setGlobalTheme regardless if there is a change to the theme or not.

Automatic theme switching changes:

Previously, the order of themes determined which one rendered. If you had multiple 'light' themes in your app, the order of the CSS files in the DOM determined which one rendered in "auto" mode.

Now, the theme that renders when the system is in 'light' and 'dark' mode is deterministic, and explicitly configured via the themeState object.

The following tokens have been moved from the deprecated & deleted to removed state in their lifecycles. These tokens will no longer exist and will not be functional moving forward, tooling will begin to error wherever they're used.

• color.text.highEmphasis => color.text
• color.text.link.pressed => color.link.pressed
• color.text.link.resting => color.link
• color.text.lowEmphasis => color.text.subtlest
• color.text.mediumEmphasis => color.text.subtle
• color.text.onBold => color.text.inverse
• color.text.onBoldWarning => color.text.warning.inverse
• color.border.focus => color.border.focused
• color.border.neutral => color.border
• color.background.accent.blue => color.background.accent.blue.subtler
• color.background.accent.blue.bold => color.background.accent.blue.subtle
• color.background.accent.red => color.background.accent.red.subtler
• color.background.accent.red.bold => color.background.accent.red.subtle
• color.background.accent.orange => color.background.accent.orange.subtler
• color.background.accent.orange.bold => color.background.accent.orange.subtle
• color.background.accent.yellow => color.background.accent.yellow.subtler
• color.background.accent.yellow.bold => color.background.accent.yellow.subtle
• color.background.accent.green => color.background.accent.green.subtler
• color.background.accent.green.bold => color.background.accent.green.subtle
• color.background.accent.teal => color.background.accent.teal.subtler
• color.background.accent.teal.bold => color.background.accent.teal.subtle
• color.background.accent.purple => color.background.accent.purple.subtler
• color.background.accent.purple.bold => color.background.accent.purple.subtle
• color.background.accent.magenta => color.background.accent.magenta.subtler
• color.background.accent.magenta.bold => color.background.accent.magenta.subtle
• color.background.inverse => color.background.inverse.subtle
• color.background.brand => color.background.selected
• color.background.brand.hovered => color.background.selected.hovered
• color.background.brand.pressed => color.background.selected.pressed
• color.background.selected.resting => color.background.selected
• color.background.selected.hover => color.background.selected.hovered
• color.background.blanket => color.blanket
• color.background.boldBrand.hover => color.background.brand.bold.hovered
• color.background.boldBrand.pressed => color.background.brand.bold.pressed
• color.background.boldBrand.resting => color.background.brand.bold
• color.background.boldDanger.hover => color.background.danger.bold.hovered
• color.background.boldDanger.pressed => color.background.danger.bold.pressed
• color.background.boldDanger.resting => color.background.danger.bold
• color.background.boldDiscovery.hover => color.background.discovery.bold.hovered
• color.background.boldDiscovery.pressed => color.background.discovery.bold.pressed
• color.background.boldDiscovery.resting => color.background.discovery.bold
• color.background.boldNeutral.hover => color.background.neutral.bold.hovered
• color.background.boldNeutral.pressed => color.background.neutral.bold.pressed
• color.background.boldNeutral.resting => color.background.neutral.bold
• color.background.boldSuccess.hover => color.background.success.bold.hovered
• color.background.boldSuccess.pressed => color.background.success.bold.pressed
• color.background.boldSuccess.resting => color.background.success.bold
• color.background.boldWarning.hover => color.background.warning.bold.hovered
• color.background.boldWarning.pressed => color.background.warning.bold.pressed
• color.background.boldWarning.resting => color.background.warning.bold
• color.background.card => elevation.surface.raised
• color.background.default => elevation.surface
• color.background.overlay => elevation.surface.overlay
• color.background.subtleBorderedNeutral.pressed => color.background.input.pressed
• color.background.subtleBorderedNeutral.resting => color.background.input
• color.background.subtleBrand.hover => color.background.selected.hovered
• color.background.subtleBrand.pressed => color.background.selected.pressed
• color.background.subtleBrand.resting => color.background.selected
• color.background.subtleDanger.hover => color.background.danger.hovered
• color.background.subtleDanger.pressed => color.background.danger.pressed
• color.background.subtleDanger.resting => color.background.danger
• color.background.subtleDiscovery.hover => color.background.discovery.hovered
• color.background.subtleDiscovery.pressed => color.background.discovery.pressed
• color.background.subtleDiscovery.resting => color.background.discovery
• color.background.subtleNeutral.hover => color.background.neutral.hovered
• color.background.subtleNeutral.pressed => color.background.neutral.pressed
• color.background.subtleNeutral.resting => color.background.neutral
• color.background.subtleSuccess.hover => color.background.success.hovered
• color.background.subtleSuccess.pressed => color.background.success.pressed
• color.background.subtleSuccess.resting => color.background.success
• color.background.subtleWarning.hover => color.background.warning.hovered
• color.background.subtleWarning.pressed => color.background.warning.pressed
• color.background.subtleWarning.resting => color.background.warning
• color.background.sunken => elevation.surface.sunken
• color.background.transparentNeutral.hover => color.background.neutral.subtle.hovered
• color.background.transparentNeutral.pressed => color.background.neutral.subtle.pressed
• color.interaction.inverse.hovered => color.background.inverse.subtle.hovered
• color.interaction.inverse.pressed => color.background.inverse.subtle.pressed
• color.accent.boldBlue => color.background.accent.blue.bolder
• color.accent.boldGreen => color.background.accent.green.bolder
• color.accent.boldOrange => color.background.accent.orange.bolder
• color.accent.boldPurple => color.background.accent.purple.bolder
• color.accent.boldRed => color.background.accent.red.bolder
• color.accent.boldTeal => color.background.accent.teal.bolder
• color.accent.subtleBlue => color.background.accent.blue.subtler
• color.accent.subtleGreen => color.background.accent.green.subtler
• color.accent.subtleMagenta => color.background.accent.magenta.subtler
• color.accent.subtleOrange => color.background.accent.orange.subtler
• color.accent.subtlePurple => color.background.accent.purple.subtler
• color.accent.subtleRed => color.background.accent.red.subtler
• color.accent.subtleTeal => color.background.accent.teal.subtler
• color.iconBorder.brand => color.icon.brand
• color.iconBorder.danger => color.icon.danger
• color.iconBorder.discovery => color.icon.discovery
• color.iconBorder.success => color.icon.success
• color.iconBorder.warning => color.icon.warning
• color.overlay.hover => color.interaction.hovered
• color.overlay.pressed => color.interaction.pressed
• shadow.card => elevation.shadow.raised
• shadow.overlay => elevation.shadow.overlay
• utility.UNSAFE_util.transparent => utility.UNSAFE.transparent
• utility.UNSAFE_util.MISSING_TOKEN => No replacement

• #29360, (opens new window) 1f558943507, (opens new window) - Correct Figma entrypoints to use raw json

• #28784, (opens new window) 48c9ecca2c4, (opens new window) - - @atlaskit/tokens/figma-sync entrypoint added to sync design tokens to the ADS Figma library (not intended for external use).
  • Tokens are now sorted by a predefined order across artifact output, ensuring consistency across experiences.

• #27875, (opens new window) 0438a9318a1, (opens new window) - Tweaked the values of the Neutral500 and Neutral500 base tokens and updated text.accent.gray.bolder to improve color contrast:

  • Adjust Neutral500 from #8993A5 to #8590A2 so that it passes 3:1 contrast against sunken surfaces in light mode
  • Adjust Neutral500A from #091E42 @ 48% to #091E42 @ 49% to match color of Neutral500 on default surfaces
  • Update text.accent.gray.bolder to use Neutral1100 so gray tags pass contrast requirements

• 765c27c301e, (opens new window) - Adds new chart tokens for data visualisation and charts.

  27 generic chart tokens and hovered state tokens:

  • color.chart.[color].bold
  • color.chart.[color].bolder
  • color.chart.[color].boldest

  12 semantic chart tokens and hovered state tokens:

  • color.chart.brand
  • color.chart.neutral
  • color.chart.success
  • color.chart.success.bold
  • color.chart.danger
  • color.chart.danger.bold
  • color.chart.warning
  • color.chart.warning.bold
  • color.chart.information
  • color.chart.information.bold
  • color.chart.discovery
  • color.chart.discovery.bold

  8 categorical chart tokens and hovered state tokens:

  • color.chart.categorical.1
  • color.chart.categorical.2
  • color.chart.categorical.3
  • color.chart.categorical.4
  • color.chart.categorical.5
  • color.chart.categorical.6
  • color.chart.categorical.7
  • color.chart.categorical.8

• #28159, (opens new window) 716af1d3387, (opens new window) - Bump @atlaskit/heading from 1.0.0 to 1.0.1 to avoid resolving to poison dependency version

• #27730, (opens new window) a5eed85fe2e, (opens new window) - Added a new getTokenValue() API - it accepts a dot-separated token name and a fallback value, and returns the current computed CSS value for the resulting CSS Custom Property. This should be used when the CSS cascade isn't available, eg. <canvas> elements, JS charting libraries, etc.

• #28011, (opens new window) 00c057bdd71, (opens new window) - Removes spacing-raw & typography-raw entrypoints in favor of tokens-raw

• #28041, (opens new window) 5892d12b125, (opens new window) - Refactors token artifact generation via style-dictionary. The tokens package no longer outputs redundant files on a per theme basis and instead consolidates schema-focused outputs into individual files where possible.

• #27880, (opens new window) 3d46e550157, (opens new window) - Fixes a bug with the tokens-babel-plugin where it was transforming token functions which were imported from modules other than the @atlaskit/tokens package.

• #27885, (opens new window) bcef9745338, (opens new window) - useThemeObserver now exclusively watches data-theme instead of data-color-mode to ensure all changes to the theme attr trigger an event. Previously, if a theme moved from light theme, which had a mode="light", to another theme such as legacy-light with the same mode, no event will be triggered.

• #27592, (opens new window) 39c4b520ef3, (opens new window) - - Adds typography-raw entry point for easy access.

• #27629, (opens new window) f824dcfff6e, (opens new window) - Internal changes to satisfy various lint warnings & errors

• #27482, (opens new window) 81e34736aa0, (opens new window) - [ux] Introduces additional token set space.*. These tokens match the behavior of spacing.scale.*. Also introduces two additional base tokens, Space800 and Space1000.

• #27449, (opens new window) 9307ebb86d8, (opens new window) - Revert addition of init entry point in favor of an upcoming solution.

• #26991, (opens new window) 65222c75362, (opens new window) - - Adds experimental typography tokens for font size, font weight, font family, and line height. These are not intended for public consumption yet.
  • Adds a new init entry point for easily importing all theme CSS files (currently light, dark, spacing, and typography).
  • Spacing and typography tokens are now added to the :root rather than requiring a data-theme attribute.
  • Removes 'spacing' from the default theme.

• #26560, (opens new window) 44c1c98c87a, (opens new window) - Export CSSTokenMap

• #26764, (opens new window) 10f2fea8f3d, (opens new window) - Updated JSDoc descriptions for token() and setGlobalTheme()

• #26623, (opens new window) 7a7d1aedac0, (opens new window) - Change pixels to rems for spacing tokens.

• #26624, (opens new window) c8bd8ee1920, (opens new window) - Adds new shadow tokens, elevation.shadow.overflow.spread and elevation.shadow.overflow.perimeter, that can be applied in combination to replicate the overflow shadow when elevation.shadow.overflow is not technically feasible to implement.

• #25860, (opens new window) e35fc41dc33, (opens new window) - Internal change to use updated primtive spacing prop values. No expected behaviour change.
• 92ee7c98d1a, (opens new window) - Fixes a number of neutral palette colors which were being generated without their alphas in the legacy palette.
• 7e491389968, (opens new window) - Adds experimental spacing tokens, currently for internal use only. These are not ready for widespread consumption yet and a lint rule will raise issues if you try to use them.

• #26186, (opens new window) d9173fbdc13, (opens new window) - Added some more experimental spacing tokens for internal testing and validation. These are not intended for public consumption yet.

• #26128, (opens new window) 41dad8915d7, (opens new window) - ✨ Color modes

  Color modes are now attached to the DOM with the data-theme attr:

  <html data-theme="dark" data-color-mode="auto"></html>

  ✨ Multi-theme

  We now allow multiple active themes:

  <html data-theme="dark spacing"></html>

  ✨ System preferences

  We also output @media (prefers-color-scheme: dark) media selectors for color themes

  @media (prefers-color-scheme: dark) { html[data-color-mode='auto'] { ...; } }

  This allows Product themes to be toggled by the OS-level setting.

  ✨ Setting theme state

  setGlobalTheme now allows you to set auto color scheme via an additional boolean arg

  setGlobalTheme(themeState, true); // data-color-mode="auto"

  ✨ Source of truth for themes

  All theme configuration now exists in a single object as a source of truth

  const themeConfig: Record<Themes, ThemeConfig> = { 'atlassian-light': { id: 'light', displayName: 'Light Theme', palette: 'defaultPalette', attributes: { type: 'color', mode: 'light', }, }, ... };

• #26165, (opens new window) 52ee11d5b3c, (opens new window) - Adds an additional entrypoint for the @atlaskit/tokens package to support tooling.

• #26111, (opens new window) 56b107f0989, (opens new window) - Adds experimental spacing tokens, currently for internal use only. These are not ready for widespread consumption yet and a lint rule will raise issues if you try to use them.

• #25755, (opens new window) 92faa09c2d4, (opens new window) - Rename base tokens to pascal case

• #25841, (opens new window) 2e2ac6d3091, (opens new window) - Add new entrypoint @atlaskit/tokens/tokens-raw which provides access to raw token data. This enables the Atlassian Design Tokens Figma plugin to import required token information:wq

• #24710, (opens new window) 619d2c2eaed, (opens new window) - Fixed typo in elevation.surface.overlay description

• #25673, (opens new window) 264f928f021, (opens new window) - Fix ignored entrypoint to allow correct access to babel-plugin

• #22827, (opens new window) 8e324bc208f, (opens new window) - Source files for tokens chrome extension has been moved out and into its own pacakge

• #24874, (opens new window) 8cc2f888c83, (opens new window) - Upgrade Typescript from 4.3.5 to 4.5.5

• #25211, (opens new window) 9f6aa1d7cdc, (opens new window) - Introduces new interaction states to a number of existing elevation tokens:
  • elevation.surface.hovered
  • elevation.surface.pressed
  • elevation.surface.raised.hovered
  • elevation.surface.raised.pressed
  • elevation.surface.overlay.hovered
  • elevation.surface.overlay.pressed

• #24502, (opens new window) efe09ca1159, (opens new window) - Adds new opacity tokens, opacity.disabled and opacity.loading, that can be applied to elements to indicate loading and disabled states.

• #24004, (opens new window) 7101fb6a895, (opens new window) - Updates @emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.

• #24390, (opens new window) e6dc2779c94, (opens new window) - Adds support for two new themes "Atlassian-legacy-light" & "Atlassian-legacy-dark". These are compatibility themes, utilising colors from the legacy color palette.

• #24492, (opens new window) 8d4228767b0, (opens new window) - Upgrade Typescript from 4.2.4 to 4.3.5.

• #24188, (opens new window) 50299267c2e, (opens new window) - Refactors style-dictionary to support multiple palettes.
  • Adds legacy-palette containing colours from @atlaskit/theme.
  • Palettes are processed as their own 'themes' (functionally) and now have their own configuration via style-dictionary.
  • formatters + transformers were renamed and moved to match best practices
  • Types were updated to allow multi-palette values (base tokens)

• #24077, (opens new window) e3377246ebc, (opens new window) - Moves the following deprecated tokens to the sunset phase. Please ensure that all sunset tokens are removed from your application, they will be completely removed in the next major version:

  • 'color.interaction.inverse.hovered' => 'color.background.inverse.subtle.hovered'
  • 'color.interaction.inverse.pressed' => 'color.background.inverse.subtle.pressed'

  If you have configured the design token eslint rules, running eslint --fix will resolve these changes automatically.

• #23579, (opens new window) 39a56a3c4e7, (opens new window) - Update disabled tokens to use alpha base tokens:
  • color.text.disabled
  • color.icon.disabled
  • color.background.disabled

• #22642, (opens new window) 83c253f28bd, (opens new window) - [ux] - Correct 'color.interaction.hovered' and 'color.interaction.pressed' token values, which were mistakenly mapped inversely in light and dark mode. The token values have now been swapped.
  • Deprecate 'color.interaction.inverse.hovered' which has been replaced with 'color.background.inverse.subtle.hovered'.
  • Deprecate 'color.interaction.inverse.pressed' which has been replaced with 'color.background.inverse.subtle.pressed'.

• #23027, (opens new window) d9d18df130f, (opens new window) - [ux] Tweaked the values of the DN500 and DN500A base tokens to improve color contrast when paired with text:

  • DN500 has changed from #5C6C7A to #596773
  • DN500A has changed from #A9C5DF7A to #9BB4CA80

  This changes the values in dark mode for the following tokens:

  (active):

  • color.text.disabled
  • color.icon.disabled
  • color.background.accent.gray.subtle

  (deprecated):

  • color.overlay.pressed

• #22892, (opens new window) dc05530d2a0, (opens new window) - Internal refactor to the way the documentation is built.

• Updated dependencies

• #22551, (opens new window) 3c1eda5c3d0, (opens new window) - [Tokens] added new color.border.bold token

• #22107, (opens new window) cb8723a7974, (opens new window) - Introduces a new set of neutral accent tokens:
  • color.background.accent.gray.bolder
  • color.background.accent.gray.subtle
  • color.background.accent.gray.subtler
  • color.background.accent.gray.subtlest
  • color.border.accent.gray
  • color.icon.accent.gray
  • color.text.accent.gray
  • color.text.accent.gray.bolder

• #22364, (opens new window) 04fc3d5c658, (opens new window) - Run token transform earlier by hooking into Program visitor

• #22060, (opens new window) 1124fa435ed, (opens new window) - Moves the following deprecated tokens to the sunset phase. Please ensure that all sunset tokens are removed from your application, they will be completely removed in the next major version:

  • color.background.brand.hovered => color.background.selected.hovered
  • color.background.brand.pressed => color.background.selected.pressed
  • color.background.brand => color.background.selected
  • color.background.inverse => color.background.inverse.subtle
  • color.background.selected.hover => color.background.selected.hovered
  • color.background.selected.resting => color.background.selected
  • color.background.subtleBrand.hover => color.background.selected.hovered
  • color.background.subtleBrand.pressed => color.background.selected.pressed
  • color.background.subtleBrand.resting => color.background.selected

  If you have configured the design token eslint rules, running eslint --fix will resolve these changes automatically.

• #21570, (opens new window) 7b9be57869b, (opens new window) - ED-14905 made fallback token name work for production

• #21650, (opens new window) acbd8d5576a, (opens new window) - Added a color-contrast test for our color pairs in the Tokens package.

• #21920, (opens new window) 5b8212f08b0, (opens new window) - The current theme can now be accessed and monitored for changes using new exports.
  • useThemeObserver React hook
  • ThemeMutationObserver Mutation Observer

• #21813, (opens new window) 7267d0aad7c, (opens new window) - Update group name metadata for light and dark neutral palette tokens

• #21484, (opens new window) aa06bcc3c48, (opens new window) - Removes the :root selector from the light theme, which allows the light theme to be turned off once the css is mounted. This is to support our migration efforts, but we will ultimately reintroduce this behaviour once tokens are the default experience

• #21487, (opens new window) 4942487a9f6, (opens new window) - Fixes internal representation of CSS entrypoints for themes. This is an internal change only and does not effect public APIs.

• #21543, (opens new window) 1dad88929cd, (opens new window) - Adds the @atlassian/codegen package that is designed to be used in concert with packages that utilise built assets in their source. Initial release adds an integrity header to assets from @atlaskit/tokens.

• #20579, (opens new window) ae9eab2df7d, (opens new window) - Fixing blanket selected and danger tokens that were 80% instead of 8% opacity

• #20895, (opens new window) c1de986e861, (opens new window) - Added new entrypoint @atlaskit/tokens/palettes-raw for raw palette token data (used in documentation)

• #20650, (opens new window) cb2392f6d33, (opens new window) - Upgrade to TypeScript 4.2.4

• #20033, (opens new window) 54180abbf55, (opens new window) - [ux] Add a new color.border.inverse token. Use for borders on bold backgrounds

• #20065, (opens new window) 530455156a8, (opens new window) - Deprecating color.background.inverse in favour of the new color.background.inverse.subtle token instead. Also introduced color.background.inverse.subtle.hovered and color.background.inverse.subtle.pressed tokens to supplement it.

• #20082, (opens new window) b170565a618, (opens new window) - [ux] Update to input token colors: color.background.input, color.background.input.hovered, color.background.input.pressed.

• #19900, (opens new window) a66253fc6a5, (opens new window) - Export token ID utility functions with new entrypoint @atlaskit/tokens/token-ids

• #19618, (opens new window) 1fb52fef1a8, (opens new window) - [ux] New Skeleton color tokens color.skeleton.subtle and color.skeleton.subtlest. Use for skeleton loading states

• ac9343c3ed4, (opens new window) - Replaces usage of deprecated design tokens. No visual or functional changes
• 308db322b04, (opens new window) - The following tokens have been moved from the deprecated to deleted state in their lifecycles. These tokens will continue to exist, however tooling will begin to error wherever they're used. If you haven't already, please run yarn eslint --fix or similar to automate your migration.
  • color.background.blanket => color.blanket
  • color.background.boldBrand.resting => color.background.brand.bold
  • color.background.boldBrand.hover => color.background.brand.bold.hovered
  • color.background.boldBrand.pressed => color.background.brand.bold.pressed
  • color.background.boldDanger.resting => color.background.danger.bold
  • color.background.boldDanger.hover => color.background.danger.bold.hovered
  • color.background.boldDanger.pressed => color.background.danger.bold.pressed
  • color.background.boldDiscovery.resting => color.background.discovery.bold
  • color.background.boldDiscovery.hover => color.background.discovery.bold.hovered
  • color.background.boldDiscovery.pressed => color.background.discovery.bold.pressed
  • color.background.boldNeutral.resting => color.background.neutral.bold
  • color.background.boldNeutral.hover => color.background.neutral.bold.hovered
  • color.background.boldNeutral.pressed => color.background.neutral.bold.pressed
  • color.background.boldSuccess.resting => color.background.success.bold
  • color.background.boldSuccess.hover => color.background.success.bold.hovered
  • color.background.boldSuccess.pressed => color.background.success.bold.pressed
  • color.background.boldWarning.resting => color.background.warning.bold
  • color.background.boldWarning.hover => color.background.warning.bold.hovered
  • color.background.boldWarning.pressed => color.background.warning.bold.pressed
  • color.background.default => elevation.surface
  • color.background.card => elevation.surface.raised
  • color.background.overlay => elevation.surface.overlay
  • color.background.selected.resting => color.background.selected
  • color.background.selected.hover => color.background.selected.hovered
  • color.background.subtleBorderedNeutral.resting => color.background.input
  • color.background.subtleBorderedNeutral.pressed => color.background.input.pressed
  • color.background.subtleBrand.resting => color.background.brand
  • color.background.subtleBrand.hover => color.background.brand.hovered
  • color.background.subtleBrand.pressed => color.background.brand.pressed
  • color.background.subtleDanger.resting => color.background.danger
  • color.background.subtleDanger.hover => color.background.danger.hovered
  • color.background.subtleDanger.pressed => color.background.danger.pressed
  • color.background.subtleDiscovery.resting => color.background.discovery
  • color.background.subtleDiscovery.hover => color.background.discovery.hovered
  • color.background.subtleDiscovery.pressed => color.background.discovery.pressed
  • color.background.subtleNeutral.resting => color.background.neutral
  • color.background.subtleNeutral.hover => color.background.neutral.hovered
  • color.background.subtleNeutral.pressed => color.background.neutral.pressed
  • color.background.subtleSuccess.resting => color.background.success
  • color.background.subtleSuccess.hover => color.background.success.hovered
  • color.background.subtleSuccess.pressed => color.background.success.pressed
  • color.background.subtleWarning.resting => color.background.warning
  • color.background.subtleWarning.hover => color.background.warning.hovered
  • color.background.subtleWarning.pressed => color.background.warning.pressed
  • color.background.sunken => elevation.surface.sunken
  • color.background.transparentNeutral.hover => color.background.neutral.subtle.hovered
  • color.background.transparentNeutral.pressed => color.background.neutral.subtle.pressed
  • color.text.highEmphasis => color.text
  • color.text.mediumEmphasis => color.text.subtle
  • color.text.lowEmphasis => color.text.subtlest
  • color.text.link.resting => color.link
  • color.text.link.pressed => color.link.pressed
  • color.text.onBold => color.text.inverse
  • color.text.onBoldWarning => color.text.inverse.warning
  • color.border.focus => color.border.focused
  • color.border.neutral => color.border
  • color.iconBorder.brand => color.icon.brand or color.border.brand
  • color.iconBorder.danger => color.icon.danger or color.border.danger
  • color.iconBorder.warning => color.icon.warning or color.border.warning
  • color.iconBorder.success => color.icon.success or color.border.success
  • color.iconBorder.discovery => color.icon.discovery or color.border.discovery
  • color.overlay.hover => color.interaction.hovered
  • color.overlay.pressed => color.interaction.pressed
  • color.shadow.card => elevation.shadow.raised
  • color.shadow.overlay => elevation.shadow.overlay

• #19805, (opens new window) ba0ddcf976e, (opens new window) - Adding new token for elevation.shadow.overflow

• #19817, (opens new window) 2229ec7c745, (opens new window) - elevation.sunken no longer uses a transparent color

• #19458, (opens new window) 5d35c6b1c5f, (opens new window) - Adding new tokens for color.blanket.selected and color.blanket.danger

• #19019, (opens new window) 220aa7f8aab, (opens new window) - [ux] Dark Mode token colours changed for the background of elements in a selected state (color.background.brand)

• c2ec60d6a1b, (opens new window) - [ux] Updating existing 16 background accent colors

  • Rename default to subtler (Light:200 / Dark:900)
  • Rename bold renamed to subtle (Light:400 / Dark:700)
  • Update this ⤴ base token for dark mode from 700 to 800 (so it is now Light:400 / Dark:800)

  16 new accent background colors:

  • color.background.accent.[color].subtlest (Light: 100 / Dark:1000)
  • color.background.accent.[color].bolder (Light: 700 / Dark: 400)

  8 new text accent colors:

  • color.text.accent.[color].bolder (Light:900 / Dark:200)

• 7b6b994bef5, (opens new window) - Correct shorthand hex code conversion in Figma synchronisation script

• 91a3f179e8c, (opens new window) - Prefix warnings to deprecated tokens in the Figma synchronizer script

• #19313, (opens new window) 39f4b3b6b48, (opens new window) - Added new base dark mode token DN-100 and modified elevation.surface.token to use it rather than the alpha.

• #19072, (opens new window) 899fd622557, (opens new window) - Re-introduces the selected and selected.bold tokens:

  • color.text.selected
  • color.icon.selected
  • color.border.selected
  • color.background.selected
  • color.background.selected.hovered
  • color.background.selected.pressed
  • color.background.selected.bold
  • color.background.selected.bold.hovered
  • color.background.selected.bold.pressed

  The following tokens are deprecated:

  • color.background.brand
  • color.background.brand.hovered
  • color.background.brand.pressed

  IMPORTANT (Manual verification required):

  Please ensure all usages of the following tokens are replaced with their selected counterpart, wherever a brand token is used to represent a selected state.

  • color.background.brand.[default|hovered|pressed] => color.background.selected.[default|hovered|pressed]
  • color.background.brand.bold.[default|hovered|pressed] => color.background.selected.bold.[default|hovered|pressed]
  • color.text.brand => color.text.selected
  • color.icon.brand => color.icon.selected
  • color.border.brand => color.border.selected

• #16752, (opens new window) 3ed3071ee35, (opens new window) - Updates elevation.surface.sunken base token in darkmode to DN-100A
• Updated dependencies

• 19d72473dfb, (opens new window) - Various improvements & changes to the tokens build scripts. These changes affect how various artifacts are generated, particularly relating to Figma
• 19d72473dfb, (opens new window) - Adds new tokens which represent the latest taxonomy changes.
• 19d72473dfb, (opens new window) - Introduces the new accent token set from the latest version of the taxonomy

• 19d72473dfb, (opens new window) - The token() function no longer throws and instead omits an error in the case where the provided token doesn't exist or is not found.

• #18168, (opens new window) 03a2ceaaabd, (opens new window) - Rename mapper entrypoint now outputs migration meta data in array format rather than object.

• #18080, (opens new window) 068c9a0b770, (opens new window) - Adds official entrypoint for theme css files

• #17475, (opens new window) c55c736ecea, (opens new window) - Patch VULN AFP-3486 AFP-3487 AFP-3488 AFP-3489

• #15998, (opens new window) b46c0681c29, (opens new window) - Adds "MISSING_TOKEN" for instances where a suitable token does not exist

• d5e751f7236, (opens new window) - Tweaks new palette colors to reflect feedback from the pilot program

• 2c855cf3bf4, (opens new window) - New internal config change allows this package to be run pre-build by ts-node, allowing access to the babel plugin by repo build tooling

  Removes token-default-values entrypoint

• 81a0d9b5692, (opens new window) - Pulled tokens babel plugin in and updated the entrypoint from @atlaskit/babel-plugin-tokens to @atlaskit/tokens/babel-plugin

• 4ec42b57298, (opens new window) - Updates the figma synchroniser to remove theme prefixes from tokens names, incorperate the isPalette flag into the group attribute and space separate interaction states. These changes improve the findability of tokens in figma

• a1ad2de440a, (opens new window) - Fixes internal types being coerced to implicit any.
• 286e1d43477, (opens new window) - Updated internal token representation to include state/lifecycle metadata
• ed086330194, (opens new window) - Internal file restructure for style-dictionary to group it’s inputs /src/tokens and outputs /src/artifacts in dedicated directories
• 9b1703048e3, (opens new window) - Updates build tooling in preparation for the new taxonomy.

• #14777, (opens new window) 092e10c6184, (opens new window) - CSS variables generated by the tokens package now have a prefix "ds-" to differentiate them from other CSS variables in an application

• #14319, (opens new window) 5c1cf4723e4, (opens new window) - typescript-token-name formatter now outputs token names with an indexable Record type
• 2f9faec5201, (opens new window) - Tokens now provided with descriptions for when they should be used

• #13665, (opens new window) 18b502b7083, (opens new window) - Added a new export, token-default-values, which maps token names to their value in the default theme (currently the "atlassian-light" theme).

• #13864, (opens new window) 6f3632e65d4, (opens new window) - Updates README with MVP instructions for usage.

• c1498cb226e, (opens new window) - Removes previous rename map

• 0936217160c, (opens new window) - Add bold accent tokens:

  • color.accent.boldBlue
  • color.accent.boldRed
  • color.accent.boldGreen
  • color.accent.boldOrange
  • color.accent.boldTeal
  • color.accent.boldPurple

• 6d72bea69a0, (opens new window) - Descriptions and other token metadata is now stored in the "default" theme.

• addf9436414, (opens new window) - [ux] Introduced a restricted util token for use during the initial token migration. This token is for internal use only and will be removed in a future version of @atlaskit/tokens.

• #13302, (opens new window) 642f26d0f0c, (opens new window) - Adds rename-mapping as an entry point for @atlaskit/tokens. rename-mapping is an object mapping old token names to their new replacements

• c784665d01d, (opens new window) - Removes color.border.overlay token and replaces it with a third shadow inside shadow.overlay.
• 76b718b72e1, (opens new window) - [ux] Fixes incorrect values in the palette and token definitions.
• 855d6afb3d3, (opens new window) - Parsing of alpha hex in the Figma synchronizer is fixed.
• 8d0cb37bfe0, (opens new window) - Updates: text.link.pressed values to B800/B300 Removes: text.link.hover Combines: border.disabled and background.disabled → background.disabled Updates: background.disabled token value to N/DN200A Renames: All accents from color.accent.blueSubtle → color.accent.subtleBlue Renames: background.selected to background.selected.resting Adds: background.selected.hover, background.selected.pressed
• 53749f08286, (opens new window) - Adds tokens:
  • color.overlay.hover
  • color.overlay.pressed

• #13518, (opens new window) 2bda3783615, (opens new window) - License information added to package.json

• #12837, (opens new window) 0d0ecc6e790, (opens new window) - Corrects eslint supressions.

• #12619, (opens new window) 8418348bf66, (opens new window) - Revert focus ring token from a shadow to border

• #12592, (opens new window) e11b3e4e1ee, (opens new window) - Restructures tokens into the following format {group}{property}{variant}{state}

• #12528, (opens new window) 1926dba3536, (opens new window) - Adds, removes & renames tokens

  Adds:

  • color.backgroundSelect

  Renames:

  • color.borderTextHighlighted to color.bordertextSelected
  • elevation.base to evelation.backgroundDefault
  • elevation.flatSecondary to elevation.backgroundSunken
  • elevation.backgroundCard to color.backgroundCard
  • elevation.backgroundOverlay to color.backgroundOverlay
  • elevation.borderOverlay to color.borderOverlay
  • elevation.shadowCard to shadow.card
  • elevation.shadowOverlay to shadow.overlay

  Removes:

  • elevation.boarderFlatPrimary

  Updates:

  • elevation.shadowOverlay value to DN100
  • color.textWarning in light mode to O800
  • color.iconBorderWarning in light mode to O600

• #12444, (opens new window) 769ea83469c, (opens new window) - Moves tokens and eslint-plugin-design-system to the public namespace.

• #12123, (opens new window) 6cde35b66d9, (opens new window) - Updates the figma synchronizer with the ability to rename tokens

• #11993, (opens new window) 170b971ce50, (opens new window) - Exposes token names as an entrypoint.

• #11992, (opens new window) eb05da78cd0, (opens new window) - Figma sync now can set spread property for effect styles.

• #11920, (opens new window) 76836669a4c, (opens new window) - Global theme CSS custom properties are now scoped to the html element.

• #11906, (opens new window) be2a49c8e04, (opens new window) - Focus ring token is now a shadow.

• #11789, (opens new window) f06c9466af2, (opens new window) - Color palette has been updated with new values.

• #11680, (opens new window) 5fccc343a1b, (opens new window) - Subtle accent colors added to token set.

• #11380, (opens new window) 2106cf48ddb, (opens new window) - Adds token "getter" to allow users to fetch and use tokens in their components

• #11433, (opens new window) 202cf0733de, (opens new window) - Tokens are now built using style dictionary with three outputs:
  1. CSS
  2. Figma synchronizers
  3. Token name map

• #11333, (opens new window) 931f6fc633a, (opens new window) - Updates token schema shape.

• #11275, (opens new window) 9eaba799050, (opens new window) - Adds theme tokens and script to add tokens to figma.

• #11179, (opens new window) 73aaa81802a, (opens new window) - Initial setup & release