@atlaskit/tokens
9.0.0
Major Changes
55546332d4ef4 -
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.
8.6.1
Patch Changes
8f904ca860b20 -
Updated radius token descriptions to provide more guidance.
8.6.0
Minor Changes
762b79e21f96a -
Migrated and cleaned up legacy iconography usage.
8.5.0
Minor Changes
ea92d81a4f951 -
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
8.4.1
Patch Changes
a60a82196851a -
Internal refactors to remove unused variables. No functional or public changes.
8.4.0
Minor Changes
02aeea2e65ec2 -
Enabled shape theme by default behind a feature gate. The shape theme remains undefined when the
gate is off.
8.3.0
Minor Changes
644c0f593ae62 -
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.boldertext.warning.boldertext.danger.boldertext.information.boldertext.discovery.bolder
8.2.0
Minor Changes
5f77efb81d0d6 -
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
Patch Changes
8.1.0
Minor Changes
d50ecf8e02d28 -
Added radius.xxlarge token which resolves to 1rem/16px. Fully removed shape-rounder and
shape-roundest experimental themes.
8.0.0
Major Changes
1e31925550257 -
[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.
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.
7.1.1
Patch Changes
df9a060fe8b7f -
Adds the native @atlaspack/transformer-tokens plugin for Atlassian Studio builds.
7.1.0
Minor Changes
c4860e82c9f41 -
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
7.0.0
Major Changes
75ba0401c1743 -
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).
6.5.0
Minor Changes
d65b31774de31 -
Removed deprecated border radius and border width tokens from CSS type.
6.4.3
Patch Changes
6.4.2
Patch Changes
6.4.1
Patch Changes
6.4.0
Minor Changes
25ac893657f27 -
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',
}));
6.3.3
Patch Changes
6.3.2
Patch Changes
6.3.1
Patch Changes
6.3.0
Minor Changes
d4a45d8562c6d -
Added radius.tile token to be used exclusively for creating tiles.
6.2.0
Minor Changes
b2cbc15f17d6a -
Added radius.tile token to be used exclusively for creating tiles.
6.1.4
Patch Changes
255837cfba315 -
Internal changes to how border radius is applied.
6.1.3
Patch Changes
23bcc5bbc9cee -
Internal changes to how border radius is applied.
6.1.2
Patch Changes
3b5b4a919aaaf -
Internal changes to how border radius is applied.
6.1.1
Patch Changes
6.1.0
Minor Changes
fcd8f46058cd2 -
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.
6.0.0
Major Changes
5.6.3
Patch Changes
- #193214
c661806a65543 -
Internal changes to how border radius and border width values are applied. No visual change.
5.6.2
Patch Changes
5.6.1
Patch Changes
5.6.0
Minor Changes
- #188275
3be70f03be763 -
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.
5.5.0
Minor Changes
- #184245
f8d9018702c99 -
Update DesignTokenStyles type to support using '50%' value for inset properties in
@atlaskit/css.
5.4.1
Patch Changes
5.4.0
Minor Changes
5.3.0
Minor Changes
- #172429
efcc283cecdfe -
Added metric typography tokens which can be used via the CSS font shorthand.
5.2.1
Patch Changes
5.2.0
Minor Changes
- #165589
6cfd5bcd946b6 -
Introduction of metric text tokens for typography to be used in charts,dashboards and various
neumerical information copies.
5.1.0
Minor Changes
- #166633
c146842d9f44f -
Adds an @atlaskit/tokens/token-metadata entrypoint to better share raw metadata across packages
for MCP server and similar code generation.
5.0.0
Major Changes
- #164028
fe8647c2f54c6 -
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
4.9.1
Patch Changes
4.9.0
Minor Changes
- #156778
d137f762d8efc -
Expand @atlaskit/css borderRadius API to include {number}px and {number}rem values.
4.8.2
Patch Changes
4.8.1
Patch Changes
- #145286
1da0ecb159341 -
Tiny wording change on @atlaskit/tokens/babel-plugin to more clearly describe the error without
string literal argument(s)
4.8.0
Minor Changes
Patch Changes
4.7.0
Minor Changes
- #137774
02ed87dfa643c -
Adds forceAutoFallbackExemptions that allows skipping certain tokens from fallback enforcement
4.6.0
Minor Changes
4.5.2
Patch Changes
4.5.1
Patch Changes
4.5.0
Minor Changes
4.4.1
Patch Changes
- #124329
b0d988fe689d9 -
Consolidate ADS themes by adding the icon.color.subtlest with the value equal to icon.color.subtle
to non-brand-refresh themes
4.4.0
Minor Changes
4.3.2
Patch Changes
4.3.1
Patch Changes
4.3.0
Minor Changes
- #121081
90c226d24a7ac -
Expand dimension type in @atlaskit/css to include vw/vh and percentage values.
4.2.0
Minor Changes
4.1.0
Minor Changes
4.0.0
Major Changes
Patch Changes
3.3.2
Patch Changes
- #115124
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.
3.3.1
Patch Changes
3.3.0
Minor Changes
Patch Changes
3.2.0
Minor Changes
- #102495
cf97e4ada8d52 -
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.
Patch Changes
- #105744
bc9ed5e4ee94d -
Updated 'ak-postbuild' script to also build '@atlaskit/platform-feature-flags'
3.1.0
Minor Changes
3.0.0
Major Changes
#102047
3cc4b295175a6 -
Removed deprecated tokens:
font.size.Xfont.lineHeight.Xfont.letterSpacing.Xfont.family.sansfont.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.
2.5.1
Patch Changes
2.5.0
Minor Changes
- #177967
f387ab1f662e4 -
Updated the visual refresh color.chart token values. Reduced the required contrast for a chart
color token.
2.4.3
Patch Changes
2.4.2
Patch Changes
2.4.1
Patch Changes
2.4.0
Minor Changes
#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.
Patch Changes
2.3.0
Minor Changes
2.2.0
Minor Changes
- #160957
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.
2.1.0
Minor Changes
- #159268
487d22f32a93f -
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
2.0.5
Patch Changes
- #158114
01676a379617b -
Modifies our bounded CSS type schema to allow both numeric and string 0 values for ease-of-use.
2.0.4
Patch Changes
2.0.3
Patch Changes
2.0.2
Patch Changes
2.0.1
Patch Changes
- #146966
a0a364753d2c7 -
Modifies our bounded CSS type schema to allow both numeric and string 0 values for ease-of-use.
2.0.0
Major Changes
#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 }]
]
Patch Changes
- #145551
d477dc32ae480 -
Removes 'shouldUseAutoFallbacks' config on '@atlaskit/tokens/babel-plugin' as this is now the
default.
1.61.0
Minor Changes
1.60.0
Minor Changes
- #138792
59c6812e1be91 -
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
1.59.1
Patch Changes
1.59.0
Minor Changes
- #130373
dd80abd23af36 -
Added experimental typography-refreshed theme. This should not be used at this stage.
1.58.0
Minor Changes
#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
This change has been done to enable usage of `react@18.3as well as to have a consistent peer
dependency range forreactandreact-domfor/platform` packages.
Patch Changes
1.57.0
Minor Changes
- #126723
b637fc4edb5b9 -
[ux] tokens-babel-plugin accepts shouldForceAutoFallback which overrides fallback values
regardless of provided fallback.
1.56.3
Patch Changes
- #125137
f50390862bd7b -
Updated shadow tokens to use the new colours from visual refresh colour palettes. Changes are also
behind the visual refresh feature flag.
1.56.2
Patch Changes
- #121959
44763b631bec5 -
Renamed typography-minor3 theme to typography-modernized. There are no visual changes, purely
just a rename.
1.56.1
Patch Changes
- #121520
4217ca1a57749 -
Internal change only. Prefix unused argument of getThemeOverridePreferences with an underscore.
1.56.0
Minor Changes
1.55.0
Minor Changes
- #120811
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.
1.54.1
Patch Changes
1.54.0
Minor Changes
- #119869
c9fbedbef614e -
The DesignTokenStyles type now allows transparent and currentcolor for backgrounds, and
transparent for text colors.
1.53.2
Patch Changes
- #116982
a8a3ff480c6a1 -
Cleaned up feature flag
platform.design-system-team.mutation-observer-performance-improvement_8usdg.
1.53.1
Patch Changes
1.53.0
Minor Changes
1.52.0
Minor Changes
1.51.0
Minor Changes
- #111016
d131599730792 -
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
is implicitly set to automatic.
1.50.0
Minor Changes
1.49.1
Patch Changes
1.49.0
Minor Changes
1.48.0
Minor Changes
- #98637
ae9502319628 -
Export FontFamilyToken and FontWeightToken types. Added descriptions for typography tokens.
Internal changes to token ordering logic.
1.47.0
Minor Changes
- #98149
45101e24202a -
Change the state of the following tokens from deprecated to active:
- font.family.body
- font.family.code
- font.family.heading
1.46.0
Minor Changes
Patch Changes
- #98562
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"
1.45.1
Patch Changes
- #96516
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.
1.45.0
Minor Changes
- #94675
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 → #738496
1.44.1
Patch Changes
- #96059
e511f40c0989 -
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.
1.44.0
Minor Changes
- #94487
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.
1.43.2
Patch Changes
1.43.1
Patch Changes
1.43.0
Minor Changes
1.42.1
Patch Changes
1.42.0
Minor Changes
1.41.2
Patch Changes
1.41.1
Patch Changes
1.41.0
Minor Changes
#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.
1.40.0
Minor Changes
1.39.1
Patch Changes
1.39.0
Minor Changes
1.38.0
Minor Changes
- #74836
66062ea65d5b -
Added font family tokens for our brand font for headings and body text.
1.37.2
Patch Changes
1.37.1
Patch Changes
1.37.0
Minor Changes
1.36.0
Minor Changes
1.35.0
Minor Changes
1.34.1
Patch Changes
1.34.0
Minor Changes
- #67463
caac5b953575 -
Fixed an issue where typography tokens referenced font family tokens that may not exist on a page,
causing fallbacks to break.
1.33.0
Minor Changes
- #63526
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.
1.32.0
Minor Changes
- #63504
668f6aa3ca86 -
Adds an entrypoint @atlaskit/tokens/css-type-schema containing a type definition for css values
contrained to tokens.
1.31.0
Minor Changes
1.30.0
Minor Changes
- #59752
df0bbb7c4cc1 -
Removed minor-second typography theme: typography. ADG3 and Minor third themes remain as the two
typography themes.
1.29.2
Patch Changes
- #59147
f12e489f23b0 -
Re-build and deploy packages to NPM to resolve React/Compiled not found error (HOT-106483).
1.29.1
Patch Changes
- #57118
b9bd80957181 -
Upgrade Emotion v10 (@emotion/core) to Emotion v11 (@emotion/react). No behaviour change expected.
1.29.0
Minor Changes
Patch Changes
- #43718
8aebcad547a -
Deprecated tokens are now warned against even when a replacement token has not been specified
1.28.2
Patch Changes
1.28.1
Patch Changes
1.28.0
Minor Changes
- #41365
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.
1.27.0
Minor Changes
#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.
Palette changes
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 #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 #3D2232
Token changes
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
1.26.1
Patch Changes
- #40324
67b68e00b3f - Removed
un-exported schema information from src and the package bundle
1.26.0
Minor Changes
- #40801
f0f44726caa - 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.
1.25.2
Patch Changes
1.25.1
Patch Changes
1.25.0
Minor Changes
#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.
1.24.0
Minor Changes
1.23.0
Minor Changes
- #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-themes
1.22.1
Patch Changes
- #40072
7b6548e6ad0 -
Internally moves the logic which applies spacing as a defaulty enabled theme to be more inline
with other themes.
1.22.0
Minor Changes
- #39854
3d5c5dbe08c - Adds
UNSAFE_textTransformUppercase token. This token should not be used directly unless to aid a
migration.
1.21.1
Patch Changes
- #39653
12c0a5a6f2e - The
tokens Babel plugin will now add opacity to shadow token values if they don't already contain
them.
1.21.0
Minor Changes
- #39578
9eee297c402 - Added
negative space tokens from -2px to -32px (space.negative.025 to space.negative.400).
1.20.1
Patch Changes
1.20.0
Minor Changes
- #38118
0a95595cd3e - Space
tokens are now enabled by default whenever setGlobalTheme is called.
1.19.0
Minor Changes
1.18.0
Minor Changes
1.17.1
Patch Changes
- #38368
11d00ba7be0 - Fixes
style-dictionary token references. allowing semantic tokens to be aliases of other semantic tokens
1.17.0
Minor Changes
1.16.0
Minor Changes
- #37789
031034da425 -
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.
1.15.2
Patch Changes
- #39128
3c114ea4257 - Update
type definitions to conform to inherited changes from @types/react@16.14.15.
1.15.1
Patch Changes
1.15.0
Minor Changes
1.14.2
Patch Changes
- #37003
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.
1.14.1
Patch Changes
- #37532
b423f118bb8 - Adjusted
color generation system for custom theming to improve accessibility.
1.14.0
Minor Changes
- #37768
d9d7c284713 - Add
custom theming support to ThemeObjectToString and ThemeStringToObject functions.
1.13.2
Patch Changes
- #37534
f29001ccc8c - Renamed
type "CustomBrandSchema" to "ThemeOptionsSchema" for experimental custom theming API
1.13.1
Patch Changes
- #37182
74f7af9882b - [ux]
correct fallback color of token color.border.focused to meet contrast requirement
1.13.0
Minor Changes
1.12.0
Minor Changes
#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.
1.11.3
Patch Changes
1.11.2
Patch Changes
- #36334
5f3a4279435 - Fixes
invalid default values assigned to shadow tokens in the token-default-values.tsx artifact
- #36279
694b79161b8 - Corrects
Lime chart tokens in the dark mode theme so they use the correct base tokens
1.11.1
Patch Changes
- #35441
7053f18ecc5 - Added
suggest metadata to shape tokens to aid future migration suggestions.
ba43427b3e8 - Internal
changes to account for introduction of shape/radius tokens.
1.11.0
Minor Changes
- #36265
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.
1.10.2
Patch Changes
1.10.1
Patch Changes
- #36072
7fb8fb4fbbb - - Fixed
an issue where getCSSCustomProperty would return the incorrect CSS variable names for space
tokens.
- Updated space token descriptions.
1.10.0
Minor Changes
- #33680
31426322355 - - 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.
1.9.1
Patch Changes
1.9.0
Minor Changes
- #34744
06fb6792d1f - Subtle
adjustments to some color design tokens to improve the dark theme. These changes were previously
being tested behind a feature flag.
1.8.1
Patch Changes
1.8.0
Minor Changes
- #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.boldest
1.7.0
Minor Changes
- #35590
85b5f222844 - 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.
1.6.0
Minor Changes
- #35385
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.
Patch Changes
98edc7e8b62 - Patch
for tokens metadata and descriptions.
1.5.2
Patch Changes
1.5.1
Patch Changes
- #33652
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.
1.5.0
Minor Changes
- #34217
43d186af89c - [ux]
Updates spacing, typography metadata to apply rems or pixels depending on the target platform.
Patch Changes
019af32072d - Add
shape token handling to the ensure-design-token-usage-spacing rule.
1.4.4
Patch Changes
1.4.3
Patch Changes
- #33905
32e364bed0b - We are
testing color tweaks to the dark theme behind a feature flag.
1.4.2
Patch Changes
1.4.1
Patch Changes
1.4.0
Minor Changes
1.3.2
Patch Changes
- #33299
bae41641c82 - Enable
the dark theme tweaks for Confluence behind a feature flag.
1.3.1
Patch Changes
- #32858
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.
1.3.0
Minor Changes
Patch Changes
1.2.19
Patch Changes
1.2.18
Patch Changes
- #32533
ea8c1af425d - 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.
1.2.17
Patch Changes
- #32434
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 applied
1.2.16
Patch Changes
- #32333
1ddf6dd6387 - 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.
1.2.15
Patch Changes
- #32424
2e01c9c74b5 - DUMMY
remove before merging to master; dupe adf-schema via adf-utils
1.2.14
Patch Changes
1.2.13
Patch Changes
- #32311
a02eed2974e - Move
codegen into @atlassian scope to publish it to private registry
1.2.12
Patch Changes
- #32209
ec8f1ac379a - Tweaks
to dark theme tokens (background.selected and background.selected.pressed) behind a feature
flag.
1.2.11
Patch Changes
- #32057
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.
1.2.10
Patch Changes
1.2.9
Patch Changes
1.2.8
Patch Changes
- #31886
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.
1.2.7
Patch Changes
1.2.6
Patch Changes
- #31242
cfe48bb7ece - Internal
change only. Replace usages of Inline/Stack with stable version from @atlaskit/primitives.
1.2.5
Patch Changes
1.2.4
Patch Changes
- #30998
2717641f696 - The
getTokenValue helper now strips leading or trailing spaces if they exist.
1.2.3
Patch Changes
- #30894
e2b8df300f2 - Pull
responsive helpers from @atlaskit/primitives/responsive instead of @atlaskit/grid as they've
been moved.
1.2.2
Patch Changes
1.2.1
Patch Changes
1.2.0
Minor Changes
- #30055
64d30817221 -
Introduce experimental 'shape' tokens for use with border properties.
1.1.0
Minor Changes
1.0.0
Major Changes
- #27634
512be9e1854 - 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.
💥 Breaking change: Theme lazy-loading
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.
💥 Breaking change: Removal of deprecated & deleted tokens
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.
💥 Breaking change: setGlobalTheme & ThemeObserver & useThemeObserver
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');
setGlobalTheme('light', true);
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'
light: 'light'
colorMode: 'auto',
});
If your app previously set the second parameter, shouldMatchSystem, this feature is now enabled by
default.
-setGlobalTheme('light', true)
+setGlobalTheme({light: 'light', dark: 'dark', 'auto'})
+setGlobalTheme({})
-setGlobalTheme('light')
+setGlobalTheme({light: 'light', colorMode: 'light'})
+setGlobalTheme({colorMode: 'light'})
-setGlobalTheme('dark')
+setGlobalTheme({dark: 'dark', colorMode: 'dark'})
+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'.
🔀 Breaking behavioural change: data-theme & data-color-mode
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.
🔀 Breaking change: System-level theme switching
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:
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.
✨ New: server-side rendering utility functions
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.
🐞 Fixes
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.
🚮 Removed tokens
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 replacement
0.13.5
Patch Changes
0.13.4
Patch Changes
- #28784
48c9ecca2c4 - -
@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.
0.13.3
Patch Changes
#27875
0438a9318a1 - 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 - 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].boldest
12 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.bold
8 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.8
0.13.2
Patch Changes
- #28159
716af1d3387 - Bump
@atlaskit/heading from 1.0.0 to 1.0.1 to avoid resolving to poison dependency version
0.13.1
Patch Changes
- #27730
a5eed85fe2e - 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.
0.13.0
Minor Changes
- #28011
00c057bdd71 - Removes
spacing-raw & typography-raw entrypoints in favor of tokens-raw
0.12.0
Minor Changes
- #28041
5892d12b125 -
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.
0.11.6
Patch Changes
- #27880
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.
0.11.5
Patch Changes
- #27885
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.
0.11.4
Patch Changes
0.11.3
Patch Changes
0.11.2
Patch Changes
- #27482
81e34736aa0 - [ux]
Introduces additional token set space.*. These tokens match the behavior of spacing.scale.*.
Also introduces two additional base tokens, Space800 and Space1000.
0.11.1
Patch Changes
- #27449
9307ebb86d8 - Revert
addition of init entry point in favor of an upcoming solution.
0.11.0
Minor Changes
- #26991
65222c75362 - - 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.
0.10.35
Patch Changes
0.10.34
Patch Changes
0.10.33
Patch Changes
0.10.32
Patch Changes
- #26624
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.
0.10.31
Patch Changes
- #25860
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.
0.10.30
Patch Changes
- #26186
d9173fbdc13 - Added
some more experimental spacing tokens for internal testing and validation. These are not intended
for public consumption yet.
0.10.29
Patch Changes
#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);
✨ 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',
},
},
...
};
0.10.28
Patch Changes
- #26165
52ee11d5b3c - Adds an
additional entrypoint for the @atlaskit/tokens package to support tooling.
0.10.27
Patch Changes
- #26111
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.
0.10.26
Patch Changes
0.10.25
Patch Changes
- #25841
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:wq
0.10.24
Patch Changes
0.10.23
Patch Changes
0.10.22
Patch Changes
- #22827
8e324bc208f - Source
files for tokens chrome extension has been moved out and into its own pacakge
0.10.21
Patch Changes
0.10.20
Patch Changes
- #25211
9f6aa1d7cdc -
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
0.10.19
Patch Changes
- #24502
efe09ca1159 - Adds new
opacity tokens, opacity.disabled and opacity.loading, that can be applied to elements to indicate
loading and disabled states.
0.10.18
Patch Changes
- #24004
7101fb6a895 - Updates
@emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.
0.10.17
Patch Changes
- #24390
e6dc2779c94 - Adds
support for two new themes "Atlassian-legacy-light" & "Atlassian-legacy-dark". These are
compatibility themes, utilising colors from the legacy color palette.
0.10.16
Patch Changes
0.10.15
Patch Changes
- #24188
50299267c2e -
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)
0.10.14
Patch Changes
#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:
- '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.
0.10.13
Patch Changes
- #23579
39a56a3c4e7 - Update
disabled tokens to use alpha base tokens:
color.text.disabledcolor.icon.disabledcolor.background.disabled
0.10.12
Patch Changes
- #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.
- 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'.
0.10.11
Patch Changes
0.10.10
Patch Changes
0.10.9
Patch Changes
0.10.8
Patch Changes
0.10.7
Patch Changes
- #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.bolder
0.10.6
Patch Changes
0.10.5
Patch Changes
#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.selected
If you have configured the design token eslint rules, running eslint --fix will resolve these
changes automatically.
0.10.4
Patch Changes
0.10.3
Patch Changes
- #21650
acbd8d5576a - Added a
color-contrast test for our color pairs in the Tokens package.
0.10.2
Patch Changes
- #21920
5b8212f08b0 - The
current theme can now be accessed and monitored for changes using new exports.
useThemeObserver React hookThemeMutationObserver Mutation Observer
0.10.1
Patch Changes
- #21813
7267d0aad7c - Update
group name metadata for light and dark neutral palette tokens
0.10.0
Minor Changes
- #21484
aa06bcc3c48 - 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
0.9.5
Patch Changes
- #21487
4942487a9f6 - Fixes
internal representation of CSS entrypoints for themes. This is an internal change only and does
not effect public APIs.
0.9.4
Patch Changes
- #21543
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.
0.9.3
Patch Changes
- #20579
ae9eab2df7d - Fixing
blanket selected and danger tokens that were 80% instead of 8% opacity
0.9.2
Patch Changes
- #20895
c1de986e861 - Added
new entrypoint @atlaskit/tokens/palettes-raw for raw palette token data (used in documentation)
0.9.1
Patch Changes
0.9.0
Minor Changes
- #20033
54180abbf55 - [ux] Add
a new color.border.inverse token. Use for borders on bold backgrounds
0.8.3
Patch Changes
- #20065
530455156a8 -
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.
0.8.2
Patch Changes
- #20082
b170565a618 - [ux]
Update to input token colors: color.background.input, color.background.input.hovered,
color.background.input.pressed.
0.8.1
Patch Changes
- #19900
a66253fc6a5 - Export
token ID utility functions with new entrypoint @atlaskit/tokens/token-ids
0.8.0
Minor Changes
- #19618
1fb52fef1a8 - [ux] New
Skeleton color tokens color.skeleton.subtle and color.skeleton.subtlest. Use for skeleton
loading states
Patch Changes
ac9343c3ed4 - Replaces
usage of deprecated design tokens. No visual or functional changes308db322b04 - 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.overlay
0.7.3
Patch Changes
0.7.2
Patch Changes
0.7.1
Patch Changes
- #19458
5d35c6b1c5f - Adding
new tokens for color.blanket.selected and color.blanket.danger
0.7.0
Minor Changes
- #19019
220aa7f8aab - [ux]
Dark Mode token colours changed for the background of elements in a selected state
(color.background.brand)
Patch Changes
c2ec60d6a1b - [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 - Correct
shorthand hex code conversion in Figma synchronisation script
91a3f179e8c - Prefix
warnings to deprecated tokens in the Figma synchronizer script
0.6.3
Patch Changes
- #19313
39f4b3b6b48 - Added
new base dark mode token DN-100 and modified elevation.surface.token to use it rather than the
alpha.
0.6.2
Patch Changes
#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.pressed
The following tokens are deprecated:
color.background.brandcolor.background.brand.hoveredcolor.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.selectedcolor.icon.brand => color.icon.selectedcolor.border.brand => color.border.selected
0.6.1
Patch Changes
- #16752
3ed3071ee35 - Updates
elevation.surface.sunken base token in darkmode to DN-100A
- Updated dependencies
0.6.0
Minor Changes
19d72473dfb - 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 taxonomy
Patch Changes
19d72473dfb - 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.
0.5.0
Minor Changes
- #18168
03a2ceaaabd - Rename
mapper entrypoint now outputs migration meta data in array format rather than object.
0.4.2
Patch Changes
0.4.1
Patch Changes
0.4.0
Minor Changes
- #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 program2c855cf3bf4 - 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
Patch Changes
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.
0.3.0
Minor Changes
- #14777
092e10c6184 - CSS
variables generated by the tokens package now have a prefix "ds-" to differentiate them from other
CSS variables in an application
0.2.1
Patch Changes
- #14319
5c1cf4723e4 -
typescript-token-name formatter now outputs token names with an indexable Record type
2f9faec5201 - Tokens
now provided with descriptions for when they should be used
0.2.0
Minor Changes
- #13665
18b502b7083 - Added a
new export, token-default-values, which maps token names to their value in the default theme
(currently the "atlassian-light" theme).
0.1.1
Patch Changes
0.1.0
Minor Changes
- #13302
642f26d0f0c - Adds
rename-mapping as an entry point for @atlaskit/tokens. rename-mapping is an object mapping old
token names to their new replacements
Patch Changes
c784665d01d - 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.pressed53749f08286 - Adds
tokens:
color.overlay.hovercolor.overlay.pressed
0.0.18
Patch Changes
0.0.17
Patch Changes
0.0.16
Patch Changes
0.0.15
Patch Changes
- #12592
e11b3e4e1ee -
Restructures tokens into the following format {group}{property}{variant}{state}
0.0.14
Patch Changes
0.0.13
Patch Changes
- #12444
769ea83469c - Moves
tokens and eslint-plugin-design-system to the public namespace.
0.0.12
Patch Changes
- #12123
6cde35b66d9 - Updates
the figma synchronizer with the ability to rename tokens
0.0.11
Patch Changes
0.0.10
Patch Changes
0.0.9
Patch Changes
- #11920
76836669a4c - Global
theme CSS custom properties are now scoped to the html element.
0.0.8
Patch Changes
0.0.7
Patch Changes
0.0.6
Patch Changes
0.0.5
Patch Changes
- #11380
2106cf48ddb - Adds
token "getter" to allow users to fetch and use tokens in their components
0.0.4
Patch Changes
- #11433
202cf0733de - Tokens
are now built using style dictionary with three outputs:
- CSS
- Figma synchronizers
- Token name map
0.0.3
Patch Changes
0.0.2
Patch Changes
0.0.1
Patch Changes
atlassian