Tokens
Typescript ❤️
Design tokens are the single source of truth to name and store design decisions.
Install
yarn add @atlaskit/tokensSource
Bundle
Changelog
Latest
This component is now documented on atlassian.design
Skip to:
Design tokens are the single source of truth to name and store design decisions.
yarn add @atlaskit/tokens90c226d24a7ac -
Expand dimension type in @atlaskit/css to include vw/vh and percentage values.4338e9dcf77a5 -
Updated font.code token to use Atlassian Mono in refreshed theme.54cb7c190dfd5 -
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
10a0f7f6c2027 -
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
e22fce04b0119 -
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.4660ec858a305 -
Update React from v16 to v18cf97e4ada8d52 -
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.bc9ed5e4ee94d -
Updated 'ak-postbuild' script to also build '@atlaskit/platform-feature-flags'62863ade36e82 -
Updates the box-shadow type to support the global "initial" CSS value.#102047
3cc4b295175a6 -
Removed deprecated tokens:
font.size.Xfont.lineHeight.Xfont.letterSpacing.Xfont.family.sansfont.family.monospaceTypography 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.
f387ab1f662e4 -
Updated the visual refresh color.chart token values. Reduced the required contrast for a chart
color token.4d46b49f15e36 -
Added Atlassian Mono font to typography refreshed theme.0384c8ac8996a -
Narrow down fontStyle type definition to only allow normal and italic.#169533
7cee6c17dfdaf -
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.
a447cb3da0845 -
Refreshed typography theme now references Atlassian Sans font.d0fdd33f28249 -
[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.487d22f32a93f -
In the DesignTokenStyles schema which controls @atlaskit/css type interfaces:
zIndex: -1|0|1 as a valid optionsbackground property from being used, use backgroundColor or another property
directly instead01676a379617b -
Modifies our bounded CSS type schema to allow both numeric and string 0 values for ease-of-use.b11b1e6b1ee65 -
Add FontWeight and FontFamily tokens to the @atlaskit/css API.a0a364753d2c7 -
Modifies our bounded CSS type schema to allow both numeric and string 0 values for ease-of-use.#145551
d477dc32ae480 -
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 }]
]
d477dc32ae480 -
Removes 'shouldUseAutoFallbacks' config on '@atlaskit/tokens/babel-plugin' as this is now the
default.b41f7cad2418e -
Migrated feature flag for increased contrast themes to new provider#138792
59c6812e1be91 -
Update the @atlaskit/css schema to include:
border and font shorthand token values-hovered and -pressed tokens are available in the non-psuedo-states for
patterns like <div css={[isHovered && hoveredStyles]} />dd80abd23af36 -
Added experimental typography-refreshed theme. This should not be used at this stage.#127511
db30e29344013 -
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.
b637fc4edb5b9 -
[ux] tokens-babel-plugin accepts shouldForceAutoFallback which overrides fallback values
regardless of provided fallback.f50390862bd7b -
Updated shadow tokens to use the new colours from visual refresh colour palettes. Changes are also
behind the visual refresh feature flag.44763b631bec5 -
Renamed typography-minor3 theme to typography-modernized. There are no visual changes, purely
just a rename.4217ca1a57749 -
Internal change only. Prefix unused argument of getThemeOverridePreferences with an underscore.11a0097de20b0 -
Added brand refresh color and token changes behind a feature flag.f66512151ee38 -
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.c9fbedbef614e -
The DesignTokenStyles type now allows transparent and currentcolor for backgrounds, and
transparent for text colors.a8a3ff480c6a1 -
Cleaned up feature flag
platform.design-system-team.mutation-observer-performance-improvement_8usdg.01c04f5a4e85a -
Add link tokens to the IconColor type, and add new IconColorPressed typed131599730792 -
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
is implicitly set to automatic.c3dc02298f8aa -
[ux] Change heading xsmall lineheight from 16 to 20 for minor third theme.ae9502319628 -
Export FontFamilyToken and FontWeightToken types. Added descriptions for typography tokens.
Internal changes to token ordering logic.#98149
45101e24202a -
Change the state of the following tokens from deprecated to active:
cefbd515c807 -
Add support for React 18 in non-strict mode.5c59b4fec679 -
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"fc7451742d3b -
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.5d9e1dccacca -
[ux] Update input border color token to meet 3:1 color contrast ratioLight theme:
color.border.input: #091E4224 → #8590A2Dark mode: color.border.input: #A6C5E229 → #738496e511f40c0989 -
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.9c81d48cda91 -
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.35fd5ed8e1d7 -
Upgrading internal dependency bind-event-listener to @^3.0.090edf674186c -
Gracefully handles falsy values passed in as theme properties.#80805
427c2dd9e0d6 -
[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
28b71d14576b -
Adds autofallback support for Spacing, Typography, and Shape themes to the babel plugin.
465924177c82 -
Moves dependency whitelist from hypermod.config to package.json66062ea65d5b -
Added font family tokens for our brand font for headings and body text.0c78c9c18cb7 -
Fix font family not preferencing apple system fonts on macOScaac5b953575 -
Fixed an issue where typography tokens referenced font family tokens that may not exist on a page,
causing fallbacks to break.e8835feffae9 -
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.668f6aa3ca86 -
Adds an entrypoint @atlaskit/tokens/css-type-schema containing a type definition for css values
contrained to tokens.df0bbb7c4cc1 -
Removed minor-second typography theme: typography. ADG3 and Minor third themes remain as the two
typography themes.f12e489f23b0 -
Re-build and deploy packages to NPM to resolve React/Compiled not found error (HOT-106483).b9bd80957181 -
Upgrade Emotion v10 (@emotion/core) to Emotion v11 (@emotion/react). No behaviour change expected.c10b408a053 -
Deprecate typography base tokens.8aebcad547a -
Deprecated tokens are now warned against even when a replacement token has not been specified202e2c9c2ff - Fix for
vuln VULN-1112073 by bumping
@babel/traverse to safest patch 7.23.2.fab3ce9e39a - 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
e6f589d4777 - [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.
1000 shades reduced for all saturated palettes to reduce eye strain when placed
against subtle UI in dark mode100 shades reduced100 shades reducedRed100 has changed from #FFEDEB to #ffecebRed200 has changed from #FFD2CC to #ffd5d2Red300 has changed from #FF9C8F to #fd9891Red400 has changed from #F87462 to #f87168Red500 has changed from #EF5C48 to #f15b50Red600 has changed from #E34935 to #e2483dRed700 has changed from #CA3521 to #c9372cRed800 has changed from #AE2A19 to #ae2e24Red900 has changed from #601E16 to #5d1f1aRed1000 has changed from #4F1C16 to #42221FOrange100 has changed from #FFF4E5 to #fff3ebOrange200 has changed from #FFE2BD to #fedec8Orange300 has changed from #FEC57B to #fec195Orange400 has changed from #FAA53D to #fea362Orange500 has changed from #F18D13 to #f38a3fOrange600 has changed from #D97008 to #e56910Orange700 has changed from #B65C02 to #c25100Orange800 has changed from #974F0C to #A54800Orange900 has changed from #5F3811 to #702e00Orange1000 has changed from #4A2B0F to #38291eYellow1000 has changed from #3F3102 to #332E1BLime100 has changed from #EEFBDA to #EFFFD6Lime1000 has changed from #2A3818 to #28311BGreen100 has changed from #DFFCF0 to #DCFFF1Green1000 has changed from #143C2B to #1C3329Teal100 has changed from #E3FAFC to #E7F9FFTeal200 has changed from #C1F0F5 to #C6EDFBTeal300 has changed from #8BDBE5 to #9DD9EETeal400 has changed from #60C6D2 to #6CC3E0Teal500 has changed from #37B4C3 to #42B2D7Teal600 has changed from #1D9AAA to #2898BDTeal700 has changed from #1D7F8C to #227D9BTeal800 has changed from #206B74 to #206A83Teal900 has changed from #1D474C to #164555Teal1000 has changed from #15373B to #1E3137Blue1000 has changed from #092957 to #1C2B41Purple1000 has changed from #2B2451 to #2B273FMagenta1000 has changed from #421F34 to #3D2232Mapped to lighter shades to create differentiation with orange, and increase vibrancy:
color.background.yellow.subtle: Yellow400 → Yellow300color.background.accent.yellow.subtle.hovered: Yellow300 → Yellow400color.background.accent.yellow.subtle.pressed: Yellow200 → Yellow500Mapped to lighter shades to increase vibrancy:
color.background.warning.bold: Yellow400 → Yellow300color.background.warning.bold: Yellow400 → Yellow300color.background.warning.bold.hovered: Yellow500 → Yellow400color.background.warning.bold.hovered: Yellow300 → Yellow400color.background.warning.bold.pressed: Yellow600 → Yellow500color.background.warning.bold.pressed: Yellow200 → Yellow500Mapped red/danger icons to darker shades to create distinction between orange and red icons:
color.icon.accent.red: Red600 → Red700color.icon.accent.red: Red500 → Red600color.icon.accent.yellow: Yellow500 → Yellow300color.icon.danger: Red600 → Red700color.icon.warning: Yellow500 → Yellow30067b68e00b3f - Removed
un-exported schema information from src and the package bundlef0f44726caa - 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.efb7932428f - Fix a
bug introduced in @atlaskit/tokens@1.25.1 that added an invalid peer dependency. The previous
version has been marked as deprecated.#40253
6125697f0b4 - 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.
#38420
5a967ac2397 - Adds two
new synchronous theme configuration utilities:
enableGlobalTheme is a synchronous version of setGlobalTheme that sets data attributes on
the page and takes a themeLoaderUNSAFE_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-themes7b6548e6ad0 -
Internally moves the logic which applies spacing as a defaulty enabled theme to be more inline
with other themes.3d5c5dbe08c - Adds
UNSAFE_textTransformUppercase token. This token should not be used directly unless to aid a
migration.12c0a5a6f2e - The
tokens Babel plugin will now add opacity to shadow token values if they don't already contain
them.9eee297c402 - Added
negative space tokens from -2px to -32px (space.negative.025 to space.negative.400).0a95595cd3e - Space
tokens are now enabled by default whenever setGlobalTheme is called.#39430
ff1a0d8dcfd -
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
11d00ba7be0 - Fixes
style-dictionary token references. allowing semantic tokens to be aliases of other semantic tokens#37789
031034da425 -
Introduces surface detection through the use of design tokens/CSS variables:
utility.elevation.surface.current design token allows UI to be styled with a color based
on a parent element's surface color.CURRENT_SURFACE_CSS_VAR constant is exported to enable the current surface CSS variable to
be set.3c114ea4257 - Update
type definitions to conform to inherited changes from @types/react@16.14.15.2b79cf3df13 - Patches
certain token values in the internal typography theme.8e1667c2c03 - 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.b423f118bb8 - Adjusted
color generation system for custom theming to improve accessibility.d9d7c284713 - Add
custom theming support to ThemeObjectToString and ThemeStringToObject functions.f29001ccc8c - Renamed
type "CustomBrandSchema" to "ThemeOptionsSchema" for experimental custom theming API74f7af9882b - [ux]
correct fallback color of token color.border.focused to meet contrast requirement#36967
bc512702bdc -
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
beba2779d31 - 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.
5f3a4279435 - Fixes
invalid default values assigned to shadow tokens in the token-default-values.tsx artifact694b79161b8 - Corrects
Lime chart tokens in the dark mode theme so they use the correct base tokens7053f18ecc5 - Added
suggest metadata to shape tokens to aid future migration suggestions.ba43427b3e8 - Internal
changes to account for introduction of shape/radius tokens.c96e003db64 -
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.7fb8fb4fbbb - - Fixed
an issue where getCSSCustomProperty would return the incorrect CSS variable names for space
tokens.
31426322355 - - Add a
new getAllThemeStyles() function that can be used for generating theme CSS files at build time.
06fb6792d1f - Subtle
adjustments to some color design tokens to improve the dark theme. These changes were previously
being tested behind a feature flag.#35526
e200f2340ed -
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.limecolor.chart.lime.bolder - For data visualisation only.color.chart.lime.bolder.hovered - Hovered state of color.chart.lime.boldercolor.chart.lime.boldest - For data visualisation only.color.chart.lime.boldest.hovered - Hovered state of color.chart.lime.boldest85b5f222844 - 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.191bbd4a3c2 - 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 - Patch
for tokens metadata and descriptions.e7ea6832ad2 - 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.43d186af89c - [ux]
Updates spacing, typography metadata to apply rems or pixels depending on the target platform.019af32072d - Add
shape token handling to the ensure-design-token-usage-spacing rule.32e364bed0b - We are
testing color tweaks to the dark theme behind a feature flag.bae41641c82 - Enable
the dark theme tweaks for Confluence behind a feature flag.e55ef3fcfac - 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.56507598609 - Skip
minor dependency bumpea8c1af425d - 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.6cf7fc4647d - 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 applied1ddf6dd6387 - 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.2e01c9c74b5 - DUMMY
remove before merging to master; dupe adf-schema via adf-utilse0460d5d989 - Usages
of process are now guarded by a typeof check.2efaed356e0 - Modified
color.text.accent.gray.bolder token value for the dark theme.a02eed2974e - Move
codegen into @atlassian scope to publish it to private registryec8f1ac379a - Tweaks
to dark theme tokens (background.selected and background.selected.pressed) behind a feature
flag.8ec4434b4c2 - 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.aef90f8953b - Tweaks
to a subset of dark theme tokens behind a feature flag.de4f079569a - 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.cfe48bb7ece - Internal
change only. Replace usages of Inline/Stack with stable version from @atlaskit/primitives.2717641f696 - The
getTokenValue helper now strips leading or trailing spaces if they exist.e2b8df300f2 - Pull
responsive helpers from @atlaskit/primitives/responsive instead of @atlaskit/grid as they've
been moved.64d30817221 -
Introduce experimental 'shape' tokens for use with border properties.#29387
4b9aea55b97 - Removed
various unused experimental spacing tokens in favor of the space.X token format.
Removed:
spacing.scalespacing.scaleLinearspacing.sizespacing.gapspacing.insetspacing.eclspacing.ccc512be9e1854 - 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.
CSS files depend on webpack/css-loading mechanisms (style-loader/css-loader) which aren't
available in all environments.
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, 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.
setGlobalTheme & ThemeObserver & useThemeObserverThemeState 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'.
data-theme & data-color-modeThe 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:
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 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.textcolor.text.link.pressed => color.link.pressedcolor.text.link.resting => color.linkcolor.text.lowEmphasis => color.text.subtlestcolor.text.mediumEmphasis => color.text.subtlecolor.text.onBold => color.text.inversecolor.text.onBoldWarning => color.text.warning.inversecolor.border.focus => color.border.focusedcolor.border.neutral => color.bordercolor.background.accent.blue => color.background.accent.blue.subtlercolor.background.accent.blue.bold => color.background.accent.blue.subtlecolor.background.accent.red => color.background.accent.red.subtlercolor.background.accent.red.bold => color.background.accent.red.subtlecolor.background.accent.orange => color.background.accent.orange.subtlercolor.background.accent.orange.bold => color.background.accent.orange.subtlecolor.background.accent.yellow => color.background.accent.yellow.subtlercolor.background.accent.yellow.bold => color.background.accent.yellow.subtlecolor.background.accent.green => color.background.accent.green.subtlercolor.background.accent.green.bold => color.background.accent.green.subtlecolor.background.accent.teal => color.background.accent.teal.subtlercolor.background.accent.teal.bold => color.background.accent.teal.subtlecolor.background.accent.purple => color.background.accent.purple.subtlercolor.background.accent.purple.bold => color.background.accent.purple.subtlecolor.background.accent.magenta => color.background.accent.magenta.subtlercolor.background.accent.magenta.bold => color.background.accent.magenta.subtlecolor.background.inverse => color.background.inverse.subtlecolor.background.brand => color.background.selectedcolor.background.brand.hovered => color.background.selected.hoveredcolor.background.brand.pressed => color.background.selected.pressedcolor.background.selected.resting => color.background.selectedcolor.background.selected.hover => color.background.selected.hoveredcolor.background.blanket => color.blanketcolor.background.boldBrand.hover => color.background.brand.bold.hoveredcolor.background.boldBrand.pressed => color.background.brand.bold.pressedcolor.background.boldBrand.resting => color.background.brand.boldcolor.background.boldDanger.hover => color.background.danger.bold.hoveredcolor.background.boldDanger.pressed => color.background.danger.bold.pressedcolor.background.boldDanger.resting => color.background.danger.boldcolor.background.boldDiscovery.hover => color.background.discovery.bold.hoveredcolor.background.boldDiscovery.pressed => color.background.discovery.bold.pressedcolor.background.boldDiscovery.resting => color.background.discovery.boldcolor.background.boldNeutral.hover => color.background.neutral.bold.hoveredcolor.background.boldNeutral.pressed => color.background.neutral.bold.pressedcolor.background.boldNeutral.resting => color.background.neutral.boldcolor.background.boldSuccess.hover => color.background.success.bold.hoveredcolor.background.boldSuccess.pressed => color.background.success.bold.pressedcolor.background.boldSuccess.resting => color.background.success.boldcolor.background.boldWarning.hover => color.background.warning.bold.hoveredcolor.background.boldWarning.pressed => color.background.warning.bold.pressedcolor.background.boldWarning.resting => color.background.warning.boldcolor.background.card => elevation.surface.raisedcolor.background.default => elevation.surfacecolor.background.overlay => elevation.surface.overlaycolor.background.subtleBorderedNeutral.pressed => color.background.input.pressedcolor.background.subtleBorderedNeutral.resting => color.background.inputcolor.background.subtleBrand.hover => color.background.selected.hoveredcolor.background.subtleBrand.pressed => color.background.selected.pressedcolor.background.subtleBrand.resting => color.background.selectedcolor.background.subtleDanger.hover => color.background.danger.hoveredcolor.background.subtleDanger.pressed => color.background.danger.pressedcolor.background.subtleDanger.resting => color.background.dangercolor.background.subtleDiscovery.hover => color.background.discovery.hoveredcolor.background.subtleDiscovery.pressed => color.background.discovery.pressedcolor.background.subtleDiscovery.resting => color.background.discoverycolor.background.subtleNeutral.hover => color.background.neutral.hoveredcolor.background.subtleNeutral.pressed => color.background.neutral.pressedcolor.background.subtleNeutral.resting => color.background.neutralcolor.background.subtleSuccess.hover => color.background.success.hoveredcolor.background.subtleSuccess.pressed => color.background.success.pressedcolor.background.subtleSuccess.resting => color.background.successcolor.background.subtleWarning.hover => color.background.warning.hoveredcolor.background.subtleWarning.pressed => color.background.warning.pressedcolor.background.subtleWarning.resting => color.background.warningcolor.background.sunken => elevation.surface.sunkencolor.background.transparentNeutral.hover => color.background.neutral.subtle.hoveredcolor.background.transparentNeutral.pressed => color.background.neutral.subtle.pressedcolor.interaction.inverse.hovered => color.background.inverse.subtle.hoveredcolor.interaction.inverse.pressed => color.background.inverse.subtle.pressedcolor.accent.boldBlue => color.background.accent.blue.boldercolor.accent.boldGreen => color.background.accent.green.boldercolor.accent.boldOrange => color.background.accent.orange.boldercolor.accent.boldPurple => color.background.accent.purple.boldercolor.accent.boldRed => color.background.accent.red.boldercolor.accent.boldTeal => color.background.accent.teal.boldercolor.accent.subtleBlue => color.background.accent.blue.subtlercolor.accent.subtleGreen => color.background.accent.green.subtlercolor.accent.subtleMagenta => color.background.accent.magenta.subtlercolor.accent.subtleOrange => color.background.accent.orange.subtlercolor.accent.subtlePurple => color.background.accent.purple.subtlercolor.accent.subtleRed => color.background.accent.red.subtlercolor.accent.subtleTeal => color.background.accent.teal.subtlercolor.iconBorder.brand => color.icon.brandcolor.iconBorder.danger => color.icon.dangercolor.iconBorder.discovery => color.icon.discoverycolor.iconBorder.success => color.icon.successcolor.iconBorder.warning => color.icon.warningcolor.overlay.hover => color.interaction.hoveredcolor.overlay.pressed => color.interaction.pressedshadow.card => elevation.shadow.raisedshadow.overlay => elevation.shadow.overlayutility.UNSAFE_util.transparent => utility.UNSAFE.transparentutility.UNSAFE_util.MISSING_TOKEN => No replacement48c9ecca2c4 - -
@atlaskit/tokens/figma-sync entrypoint added to sync design tokens to the ADS Figma library (not
intended for external use).
#27875
0438a9318a1 - Tweaked
the values of the Neutral500 and Neutral500 base tokens and updated text.accent.gray.bolder
to improve color contrast:
Neutral500 from #8993A5 to #8590A2 so that it passes 3:1 contrast against sunken
surfaces in light modeNeutral500A from #091E42 @ 48% to #091E42 @ 49% to match color of Neutral500 on
default surfacestext.accent.gray.bolder to use Neutral1100 so gray tags pass contrast requirements765c27c301e - Adds new
chart tokens for data visualisation and charts.
27 generic chart tokens and hovered state tokens:
color.chart.[color].boldcolor.chart.[color].boldercolor.chart.[color].boldest12 semantic chart tokens and hovered state tokens:
color.chart.brandcolor.chart.neutralcolor.chart.successcolor.chart.success.boldcolor.chart.dangercolor.chart.danger.boldcolor.chart.warningcolor.chart.warning.boldcolor.chart.informationcolor.chart.information.boldcolor.chart.discoverycolor.chart.discovery.bold8 categorical chart tokens and hovered state tokens:
color.chart.categorical.1color.chart.categorical.2color.chart.categorical.3color.chart.categorical.4color.chart.categorical.5color.chart.categorical.6color.chart.categorical.7color.chart.categorical.8716af1d3387 - Bump
@atlaskit/heading from 1.0.0 to 1.0.1 to avoid resolving to poison dependency versiona5eed85fe2e - 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.00c057bdd71 - Removes
spacing-raw & typography-raw entrypoints in favor of tokens-raw5892d12b125 -
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.3d46e550157 - 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.bcef9745338 -
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.f824dcfff6e - Internal
changes to satisfy various lint warnings & errors81e34736aa0 - [ux]
Introduces additional token set space.*. These tokens match the behavior of spacing.scale.*.
Also introduces two additional base tokens, Space800 and Space1000.9307ebb86d8 - Revert
addition of init entry point in favor of an upcoming solution.65222c75362 - - Adds
experimental typography tokens for font size, font weight, font family, and line height. These are
not intended for public consumption yet.
:root rather than requiring a data-theme
attribute.10f2fea8f3d - Updated
JSDoc descriptions for token() and setGlobalTheme()c8bd8ee1920 - 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.e35fc41dc33 - Internal
change to use updated primtive spacing prop values. No expected behaviour change.92ee7c98d1a - Fixes a
number of neutral palette colors which were being generated without their alphas in the legacy
palette.7e491389968 - 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.d9173fbdc13 - Added
some more experimental spacing tokens for internal testing and validation. These are not intended
for public consumption yet.#26128
41dad8915d7 - ✨
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',
},
},
...
};
52ee11d5b3c - Adds an
additional entrypoint for the @atlaskit/tokens package to support tooling.56b107f0989 - 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.2e2ac6d3091 - 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:wq264f928f021 - Fix
ignored entrypoint to allow correct access to babel-plugin8e324bc208f - Source
files for tokens chrome extension has been moved out and into its own pacakge#25211
9f6aa1d7cdc -
Introduces new interaction states to a number of existing elevation tokens:
efe09ca1159 - Adds new
opacity tokens, opacity.disabled and opacity.loading, that can be applied to elements to indicate
loading and disabled states.7101fb6a895 - Updates
@emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.e6dc2779c94 - Adds
support for two new themes "Atlassian-legacy-light" & "Atlassian-legacy-dark". These are
compatibility themes, utilising colors from the legacy color palette.#24188
50299267c2e -
Refactors style-dictionary to support multiple palettes.
@atlaskit/theme.#24077
e3377246ebc - 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:
If you have configured the design token eslint rules, running eslint --fix will resolve these
changes automatically.
#23579
39a56a3c4e7 - Update
disabled tokens to use alpha base tokens:
color.text.disabledcolor.icon.disabledcolor.background.disabled#22642
83c253f28bd - [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.
#23027
d9d18df130f - [ux]
Tweaked the values of the DN500 and DN500A base tokens to improve color contrast when paired with
text:
#5C6C7A to #596773#A9C5DF7A to #9BB4CA80This changes the values in dark mode for the following tokens:
(active):
color.text.disabledcolor.icon.disabledcolor.background.accent.gray.subtle(deprecated):
color.overlay.pressed#22107
cb8723a7974 -
Introduces a new set of neutral accent tokens:
color.background.accent.gray.boldercolor.background.accent.gray.subtlecolor.background.accent.gray.subtlercolor.background.accent.gray.subtlestcolor.border.accent.graycolor.icon.accent.graycolor.text.accent.graycolor.text.accent.gray.bolder04fc3d5c658 - Run
token transform earlier by hooking into Program visitor#22060
1124fa435ed - 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.hoveredcolor.background.brand.pressed => color.background.selected.pressedcolor.background.brand => color.background.selectedcolor.background.inverse => color.background.inverse.subtlecolor.background.selected.hover => color.background.selected.hoveredcolor.background.selected.resting => color.background.selectedcolor.background.subtleBrand.hover => color.background.selected.hoveredcolor.background.subtleBrand.pressed => color.background.selected.pressedcolor.background.subtleBrand.resting => color.background.selectedIf you have configured the design token eslint rules, running eslint --fix will resolve these
changes automatically.
acbd8d5576a - Added a
color-contrast test for our color pairs in the Tokens package.#21920
5b8212f08b0 - The
current theme can now be accessed and monitored for changes using new exports.
useThemeObserver React hookThemeMutationObserver Mutation Observer7267d0aad7c - Update
group name metadata for light and dark neutral palette tokensaa06bcc3c48 - 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 experience4942487a9f6 - Fixes
internal representation of CSS entrypoints for themes. This is an internal change only and does
not effect public APIs.1dad88929cd - 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.ae9eab2df7d - Fixing
blanket selected and danger tokens that were 80% instead of 8% opacityc1de986e861 - Added
new entrypoint @atlaskit/tokens/palettes-raw for raw palette token data (used in documentation)54180abbf55 - [ux] Add
a new color.border.inverse token. Use for borders on bold backgrounds530455156a8 -
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.b170565a618 - [ux]
Update to input token colors: color.background.input, color.background.input.hovered,
color.background.input.pressed.a66253fc6a5 - Export
token ID utility functions with new entrypoint @atlaskit/tokens/token-ids1fb52fef1a8 - [ux] New
Skeleton color tokens color.skeleton.subtle and color.skeleton.subtlest. Use for skeleton
loading statesac9343c3ed4 - Replaces
usage of deprecated design tokens. No visual or functional changes
308db322b04 - 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.blanketcolor.background.boldBrand.resting => color.background.brand.boldcolor.background.boldBrand.hover => color.background.brand.bold.hoveredcolor.background.boldBrand.pressed => color.background.brand.bold.pressedcolor.background.boldDanger.resting => color.background.danger.boldcolor.background.boldDanger.hover => color.background.danger.bold.hoveredcolor.background.boldDanger.pressed => color.background.danger.bold.pressedcolor.background.boldDiscovery.resting => color.background.discovery.boldcolor.background.boldDiscovery.hover => color.background.discovery.bold.hoveredcolor.background.boldDiscovery.pressed => color.background.discovery.bold.pressedcolor.background.boldNeutral.resting => color.background.neutral.boldcolor.background.boldNeutral.hover => color.background.neutral.bold.hoveredcolor.background.boldNeutral.pressed => color.background.neutral.bold.pressedcolor.background.boldSuccess.resting => color.background.success.boldcolor.background.boldSuccess.hover => color.background.success.bold.hoveredcolor.background.boldSuccess.pressed => color.background.success.bold.pressedcolor.background.boldWarning.resting => color.background.warning.boldcolor.background.boldWarning.hover => color.background.warning.bold.hoveredcolor.background.boldWarning.pressed => color.background.warning.bold.pressedcolor.background.default => elevation.surfacecolor.background.card => elevation.surface.raisedcolor.background.overlay => elevation.surface.overlaycolor.background.selected.resting => color.background.selectedcolor.background.selected.hover => color.background.selected.hoveredcolor.background.subtleBorderedNeutral.resting => color.background.inputcolor.background.subtleBorderedNeutral.pressed => color.background.input.pressedcolor.background.subtleBrand.resting => color.background.brandcolor.background.subtleBrand.hover => color.background.brand.hoveredcolor.background.subtleBrand.pressed => color.background.brand.pressedcolor.background.subtleDanger.resting => color.background.dangercolor.background.subtleDanger.hover => color.background.danger.hoveredcolor.background.subtleDanger.pressed => color.background.danger.pressedcolor.background.subtleDiscovery.resting => color.background.discoverycolor.background.subtleDiscovery.hover => color.background.discovery.hoveredcolor.background.subtleDiscovery.pressed => color.background.discovery.pressedcolor.background.subtleNeutral.resting => color.background.neutralcolor.background.subtleNeutral.hover => color.background.neutral.hoveredcolor.background.subtleNeutral.pressed => color.background.neutral.pressedcolor.background.subtleSuccess.resting => color.background.successcolor.background.subtleSuccess.hover => color.background.success.hoveredcolor.background.subtleSuccess.pressed => color.background.success.pressedcolor.background.subtleWarning.resting => color.background.warningcolor.background.subtleWarning.hover => color.background.warning.hoveredcolor.background.subtleWarning.pressed => color.background.warning.pressedcolor.background.sunken => elevation.surface.sunkencolor.background.transparentNeutral.hover => color.background.neutral.subtle.hoveredcolor.background.transparentNeutral.pressed => color.background.neutral.subtle.pressedcolor.text.highEmphasis => color.textcolor.text.mediumEmphasis => color.text.subtlecolor.text.lowEmphasis => color.text.subtlestcolor.text.link.resting => color.linkcolor.text.link.pressed => color.link.pressedcolor.text.onBold => color.text.inversecolor.text.onBoldWarning => color.text.inverse.warningcolor.border.focus => color.border.focusedcolor.border.neutral => color.bordercolor.iconBorder.brand => color.icon.brand or color.border.brandcolor.iconBorder.danger => color.icon.danger or color.border.dangercolor.iconBorder.warning => color.icon.warning or color.border.warningcolor.iconBorder.success => color.icon.success or color.border.successcolor.iconBorder.discovery => color.icon.discovery or color.border.discoverycolor.overlay.hover => color.interaction.hoveredcolor.overlay.pressed => color.interaction.pressedcolor.shadow.card => elevation.shadow.raisedcolor.shadow.overlay => elevation.shadow.overlay5d35c6b1c5f - Adding
new tokens for color.blanket.selected and color.blanket.danger220aa7f8aab - [ux]
Dark Mode token colours changed for the background of elements in a selected state
(color.background.brand)c2ec60d6a1b - [ux]
Updating existing 16 background accent colors
16 new accent background colors:
8 new text accent colors:
7b6b994bef5 - Correct
shorthand hex code conversion in Figma synchronisation script
91a3f179e8c - Prefix
warnings to deprecated tokens in the Figma synchronizer script
39f4b3b6b48 - Added
new base dark mode token DN-100 and modified elevation.surface.token to use it rather than the
alpha.#19072
899fd622557 -
Re-introduces the selected and selected.bold tokens:
color.text.selectedcolor.icon.selectedcolor.border.selectedcolor.background.selectedcolor.background.selected.hoveredcolor.background.selected.pressedcolor.background.selected.boldcolor.background.selected.bold.hoveredcolor.background.selected.bold.pressedThe following tokens are deprecated:
color.background.brandcolor.background.brand.hoveredcolor.background.brand.pressedIMPORTANT (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.selectedcolor.icon.brand => color.icon.selectedcolor.border.brand => color.border.selected3ed3071ee35 - Updates
elevation.surface.sunken base token in darkmode to DN-100A19d72473dfb - Various
improvements & changes to the tokens build scripts. These changes affect how various artifacts are
generated, particularly relating to Figma19d72473dfb - Adds new
tokens which represent the latest taxonomy changes.19d72473dfb -
Introduces the new accent token set from the latest version of the taxonomy19d72473dfb - 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.03a2ceaaabd - Rename
mapper entrypoint now outputs migration meta data in array format rather than object.#15998
b46c0681c29 - Adds
"MISSING_TOKEN" for instances where a suitable token does not exist
d5e751f7236 - Tweaks
new palette colors to reflect feedback from the pilot program
2c855cf3bf4 - 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 - Pulled
tokens babel plugin in and updated the entrypoint from @atlaskit/babel-plugin-tokens to
@atlaskit/tokens/babel-plugin
4ec42b57298 - 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 - Fixes
internal types being coerced to implicit any.286e1d43477 - Updated
internal token representation to include state/lifecycle metadataed086330194 - Internal
file restructure for style-dictionary to group it’s inputs /src/tokens and outputs /src/artifacts
in dedicated directories9b1703048e3 - Updates
build tooling in preparation for the new taxonomy.092e10c6184 - CSS
variables generated by the tokens package now have a prefix "ds-" to differentiate them from other
CSS variables in an application5c1cf4723e4 -
typescript-token-name formatter now outputs token names with an indexable Record type2f9faec5201 - Tokens
now provided with descriptions for when they should be used18b502b7083 - Added a
new export, token-default-values, which maps token names to their value in the default theme
(currently the "atlassian-light" theme).#13864
6f3632e65d4 - Updates
README with MVP instructions for usage.
c1498cb226e - Removes
previous rename map
0936217160c - Add bold
accent tokens:
color.accent.boldBluecolor.accent.boldRedcolor.accent.boldGreencolor.accent.boldOrangecolor.accent.boldTealcolor.accent.boldPurple6d72bea69a0 -
Descriptions and other token metadata is now stored in the "default" theme.
addf9436414 - [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.
642f26d0f0c - Adds
rename-mapping as an entry point for @atlaskit/tokens. rename-mapping is an object mapping old
token names to their new replacementsc784665d01d - Removes
color.border.overlay token and replaces it with a third shadow inside shadow.overlay.
76b718b72e1 - [ux]
Fixes incorrect values in the palette and token definitions.
855d6afb3d3 - Parsing
of alpha hex in the Figma synchronizer is fixed.
8d0cb37bfe0 - 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 - Adds
tokens:
color.overlay.hovercolor.overlay.pressede11b3e4e1ee -
Restructures tokens into the following format {group}{property}{variant}{state}#12528
1926dba3536 - Adds,
removes & renames tokens
Adds:
color.backgroundSelectRenames:
color.borderTextHighlighted to color.bordertextSelectedelevation.base to evelation.backgroundDefaultelevation.flatSecondary to elevation.backgroundSunkenelevation.backgroundCard to color.backgroundCardelevation.backgroundOverlay to color.backgroundOverlayelevation.borderOverlay to color.borderOverlayelevation.shadowCard to shadow.cardelevation.shadowOverlay to shadow.overlayRemoves:
elevation.boarderFlatPrimaryUpdates:
elevation.shadowOverlay value to DN100color.textWarning in light mode to O800color.iconBorderWarning in light mode to O600769ea83469c - Moves
tokens and eslint-plugin-design-system to the public namespace.6cde35b66d9 - Updates
the figma synchronizer with the ability to rename tokens76836669a4c - Global
theme CSS custom properties are now scoped to the html element.2106cf48ddb - Adds
token "getter" to allow users to fetch and use tokens in their components#11433
202cf0733de - Tokens
are now built using style dictionary with three outputs: