@atlaskit/tokens 6.5.0 → 7.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +23 -40
- package/dist/cjs/artifacts/palettes-raw/shape-palette.js +1 -31
- package/dist/cjs/artifacts/replacement-mapping.js +2 -32
- package/dist/cjs/artifacts/theme-import-map.js +1 -13
- package/dist/cjs/artifacts/themes/atlassian-shape-rounder.js +2 -2
- package/dist/cjs/artifacts/themes/atlassian-shape-roundest.js +2 -2
- package/dist/cjs/artifacts/themes/atlassian-shape.js +2 -2
- package/dist/cjs/artifacts/token-default-values.js +1 -11
- package/dist/cjs/artifacts/token-names.js +1 -11
- package/dist/cjs/artifacts/tokens-raw/atlassian-shape-rounder.js +1 -241
- package/dist/cjs/artifacts/tokens-raw/atlassian-shape-roundest.js +1 -241
- package/dist/cjs/artifacts/tokens-raw/atlassian-shape.js +1 -241
- package/dist/cjs/babel-plugin/plugin.js +2 -2
- package/dist/cjs/entry-points/token-metadata.codegen.js +1 -51
- package/dist/cjs/theme-config.js +1 -17
- package/dist/es2019/artifacts/palettes-raw/shape-palette.js +1 -31
- package/dist/es2019/artifacts/replacement-mapping.js +2 -32
- package/dist/es2019/artifacts/theme-import-map.js +1 -5
- package/dist/es2019/artifacts/themes/atlassian-shape-rounder.js +1 -11
- package/dist/es2019/artifacts/themes/atlassian-shape-roundest.js +1 -11
- package/dist/es2019/artifacts/themes/atlassian-shape.js +1 -11
- package/dist/es2019/artifacts/token-default-values.js +1 -11
- package/dist/es2019/artifacts/token-names.js +1 -11
- package/dist/es2019/artifacts/tokens-raw/atlassian-shape-rounder.js +1 -241
- package/dist/es2019/artifacts/tokens-raw/atlassian-shape-roundest.js +1 -241
- package/dist/es2019/artifacts/tokens-raw/atlassian-shape.js +1 -241
- package/dist/es2019/babel-plugin/plugin.js +2 -2
- package/dist/es2019/entry-points/token-metadata.codegen.js +1 -51
- package/dist/es2019/theme-config.js +1 -17
- package/dist/esm/artifacts/palettes-raw/shape-palette.js +1 -31
- package/dist/esm/artifacts/replacement-mapping.js +2 -32
- package/dist/esm/artifacts/theme-import-map.js +1 -9
- package/dist/esm/artifacts/themes/atlassian-shape-rounder.js +2 -2
- package/dist/esm/artifacts/themes/atlassian-shape-roundest.js +2 -2
- package/dist/esm/artifacts/themes/atlassian-shape.js +2 -2
- package/dist/esm/artifacts/token-default-values.js +1 -11
- package/dist/esm/artifacts/token-names.js +1 -11
- package/dist/esm/artifacts/tokens-raw/atlassian-shape-rounder.js +1 -241
- package/dist/esm/artifacts/tokens-raw/atlassian-shape-roundest.js +1 -241
- package/dist/esm/artifacts/tokens-raw/atlassian-shape.js +1 -241
- package/dist/esm/babel-plugin/plugin.js +2 -2
- package/dist/esm/entry-points/token-metadata.codegen.js +1 -51
- package/dist/esm/theme-config.js +1 -17
- package/dist/types/artifacts/palettes-raw/shape-palette.d.ts +1 -1
- package/dist/types/artifacts/replacement-mapping.d.ts +1 -1
- package/dist/types/artifacts/theme-import-map.d.ts +1 -1
- package/dist/types/artifacts/themes/atlassian-shape-rounder.d.ts +2 -2
- package/dist/types/artifacts/themes/atlassian-shape-roundest.d.ts +2 -2
- package/dist/types/artifacts/themes/atlassian-shape.d.ts +2 -2
- package/dist/types/artifacts/token-default-values.d.ts +1 -11
- package/dist/types/artifacts/token-names.d.ts +1 -21
- package/dist/types/artifacts/tokens-raw/atlassian-shape-rounder.d.ts +1 -1
- package/dist/types/artifacts/tokens-raw/atlassian-shape-roundest.d.ts +1 -1
- package/dist/types/artifacts/tokens-raw/atlassian-shape.d.ts +1 -1
- package/dist/types/entry-points/token-metadata.codegen.d.ts +1 -1
- package/dist/types/theme-config.d.ts +4 -4
- package/dist/types/types.d.ts +0 -12
- package/dist/types-ts4.5/artifacts/palettes-raw/shape-palette.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/replacement-mapping.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/theme-import-map.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/themes/atlassian-shape-rounder.d.ts +2 -2
- package/dist/types-ts4.5/artifacts/themes/atlassian-shape-roundest.d.ts +2 -2
- package/dist/types-ts4.5/artifacts/themes/atlassian-shape.d.ts +2 -2
- package/dist/types-ts4.5/artifacts/token-default-values.d.ts +1 -11
- package/dist/types-ts4.5/artifacts/token-names.d.ts +1 -21
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-shape-rounder.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-shape-roundest.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-shape.d.ts +1 -1
- package/dist/types-ts4.5/entry-points/token-metadata.codegen.d.ts +1 -1
- package/dist/types-ts4.5/theme-config.d.ts +2 -6
- package/dist/types-ts4.5/types.d.ts +0 -12
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,28 @@
|
|
|
1
1
|
# @atlaskit/tokens
|
|
2
2
|
|
|
3
|
+
## 7.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- [`75ba0401c1743`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/75ba0401c1743) -
|
|
8
|
+
Deleted deprecated shape tokens. Migration guide:
|
|
9
|
+
|
|
10
|
+
| Old token | New token/value |
|
|
11
|
+
| ------------------------ | ------------------------------------------------- |
|
|
12
|
+
| `border.radius.050` | `radius.xsmall` |
|
|
13
|
+
| `border.radius` | `radius.small` |
|
|
14
|
+
| `border.radius.100` | `radius.small` |
|
|
15
|
+
| `border.radius.200` | `radius.large` |
|
|
16
|
+
| `border.radius.300` | `radius.xlarge` |
|
|
17
|
+
| `border.radius.400` | `16px` |
|
|
18
|
+
| `border.radius.circle` | `radius.full` |
|
|
19
|
+
| `border.width.0` | `0` |
|
|
20
|
+
| `border.width.outline` | `border.width.selected` or `border.width.focused` |
|
|
21
|
+
| `border.width.indicator` | `3px` |
|
|
22
|
+
|
|
23
|
+
The babel plugin has also been updated to skip new radius tokens in shouldForceAutoFallback mode
|
|
24
|
+
(previously only the deprecated `border.radius.x` tokens were skipped).
|
|
25
|
+
|
|
3
26
|
## 6.5.0
|
|
4
27
|
|
|
5
28
|
### Minor Changes
|
|
@@ -452,7 +475,6 @@
|
|
|
452
475
|
- [#102047](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102047)
|
|
453
476
|
[`3cc4b295175a6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3cc4b295175a6) -
|
|
454
477
|
Removed deprecated tokens:
|
|
455
|
-
|
|
456
478
|
- `font.size.X`
|
|
457
479
|
- `font.lineHeight.X`
|
|
458
480
|
- `font.letterSpacing.X`
|
|
@@ -627,7 +649,6 @@
|
|
|
627
649
|
- [#138792](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/138792)
|
|
628
650
|
[`59c6812e1be91`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/59c6812e1be91) -
|
|
629
651
|
Update the @atlaskit/css schema to include:
|
|
630
|
-
|
|
631
652
|
- `border` and `font` shorthand token values
|
|
632
653
|
- Background and color `-hovered` and `-pressed` tokens are available in the non-psuedo-states for
|
|
633
654
|
patterns like `<div css={[isHovered && hoveredStyles]} />`
|
|
@@ -814,7 +835,6 @@
|
|
|
814
835
|
- [#98149](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98149)
|
|
815
836
|
[`45101e24202a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/45101e24202a) -
|
|
816
837
|
Change the state of the following tokens from deprecated to active:
|
|
817
|
-
|
|
818
838
|
- font.family.body
|
|
819
839
|
- font.family.code
|
|
820
840
|
- font.family.heading
|
|
@@ -1300,7 +1320,6 @@ Mapped red/danger icons to darker shades to create distinction between orange an
|
|
|
1300
1320
|
- [#38420](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38420)
|
|
1301
1321
|
[`5a967ac2397`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5a967ac2397) - Adds two
|
|
1302
1322
|
new synchronous theme configuration utilities:
|
|
1303
|
-
|
|
1304
1323
|
- `enableGlobalTheme` is a synchronous version of `setGlobalTheme` that sets data attributes on
|
|
1305
1324
|
the page and takes a themeLoader
|
|
1306
1325
|
- `UNSAFE_loadCustomThemeStyles` provides a synchronous way to generate and apply custom theme
|
|
@@ -1364,7 +1383,6 @@ Mapped red/danger icons to darker shades to create distinction between orange an
|
|
|
1364
1383
|
- [#39430](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/39430)
|
|
1365
1384
|
[`ff1a0d8dcfd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ff1a0d8dcfd) -
|
|
1366
1385
|
Introduces 80 new accent interaction tokens:
|
|
1367
|
-
|
|
1368
1386
|
- color.background.accent.blue.subtlest.hovered
|
|
1369
1387
|
- color.background.accent.blue.subtlest.pressed
|
|
1370
1388
|
- color.background.accent.blue.subtler.hovered
|
|
@@ -1486,7 +1504,6 @@ Mapped red/danger icons to darker shades to create distinction between orange an
|
|
|
1486
1504
|
- [#37789](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/37789)
|
|
1487
1505
|
[`031034da425`](https://bitbucket.org/atlassian/atlassian-frontend/commits/031034da425) -
|
|
1488
1506
|
Introduces surface detection through the use of design tokens/CSS variables:
|
|
1489
|
-
|
|
1490
1507
|
- The `utility.elevation.surface.current` design token allows UI to be styled with a color based
|
|
1491
1508
|
on a parent element's surface color.
|
|
1492
1509
|
- The `CURRENT_SURFACE_CSS_VAR` constant is exported to enable the current surface CSS variable to
|
|
@@ -1565,7 +1582,6 @@ Mapped red/danger icons to darker shades to create distinction between orange an
|
|
|
1565
1582
|
- [#36967](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/36967)
|
|
1566
1583
|
[`bc512702bdc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bc512702bdc) -
|
|
1567
1584
|
Introduces new brand background tokens.
|
|
1568
|
-
|
|
1569
1585
|
- `color.background.brand.subtlest` - Use for the background of elements used to reinforce our
|
|
1570
1586
|
brand, but with less emphasis.
|
|
1571
1587
|
- `color.background.brand.subtlest.hovered` - Hovered state of color.background.brand.subtlest.
|
|
@@ -1587,7 +1603,6 @@ Mapped red/danger icons to darker shades to create distinction between orange an
|
|
|
1587
1603
|
experimental support for custom theming via the `UNSAFE_themeOptions` field in `themeState`.
|
|
1588
1604
|
|
|
1589
1605
|
This option is supported in the following functions:
|
|
1590
|
-
|
|
1591
1606
|
- `setGlobalTheme()`: optionally generates and loads customized themes based on the options
|
|
1592
1607
|
provided, and sets the `data-custom-theme` attribute on page's HTML tag.
|
|
1593
1608
|
- `getThemeStyles()`: returns additional style objects for constructing custom theme `<style>`
|
|
@@ -1695,7 +1710,6 @@ Mapped red/danger icons to darker shades to create distinction between orange an
|
|
|
1695
1710
|
- [#35526](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/35526)
|
|
1696
1711
|
[`e200f2340ed`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e200f2340ed) -
|
|
1697
1712
|
Introduces new lime token set.
|
|
1698
|
-
|
|
1699
1713
|
- `color.text.accent.lime` - Use for lime text on subtlest and subtler lime accent backgrounds
|
|
1700
1714
|
when there is no meaning tied to the color.
|
|
1701
1715
|
- `color.text.accent.lime.bolder` - Use for lime text on subtle lime accent backgrounds when there
|
|
@@ -2026,7 +2040,6 @@ Mapped red/danger icons to darker shades to create distinction between orange an
|
|
|
2026
2040
|
various unused experimental spacing tokens in favor of the `space.X` token format.
|
|
2027
2041
|
|
|
2028
2042
|
Removed:
|
|
2029
|
-
|
|
2030
2043
|
- `spacing.scale`
|
|
2031
2044
|
- `spacing.scaleLinear`
|
|
2032
2045
|
- `spacing.size`
|
|
@@ -2213,7 +2226,6 @@ This provides several benefits:
|
|
|
2213
2226
|
version of `@atlaskit/tokens`.
|
|
2214
2227
|
|
|
2215
2228
|
- Simpler logic for switching an experience based on the current theme:
|
|
2216
|
-
|
|
2217
2229
|
- Previously, experiences using theme observers had to check a combination of the
|
|
2218
2230
|
`data-color-mode` attribute use media queries to to correctly match the currently rendered color
|
|
2219
2231
|
mode in light, dark and 'auto' color modes. Now, the `data-color-mode` attribute always matches
|
|
@@ -2396,7 +2408,6 @@ will begin to error wherever they're used.
|
|
|
2396
2408
|
[`0438a9318a1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0438a9318a1) - Tweaked
|
|
2397
2409
|
the values of the `Neutral500` and `Neutral500` base tokens and updated `text.accent.gray.bolder`
|
|
2398
2410
|
to improve color contrast:
|
|
2399
|
-
|
|
2400
2411
|
- Adjust `Neutral500` from `#8993A5` to `#8590A2` so that it passes 3:1 contrast against sunken
|
|
2401
2412
|
surfaces in light mode
|
|
2402
2413
|
- Adjust `Neutral500A` from `#091E42 @ 48%` to `#091E42 @ 49%` to match color of `Neutral500` on
|
|
@@ -2407,13 +2418,11 @@ will begin to error wherever they're used.
|
|
|
2407
2418
|
chart tokens for data visualisation and charts.
|
|
2408
2419
|
|
|
2409
2420
|
27 generic chart tokens and hovered state tokens:
|
|
2410
|
-
|
|
2411
2421
|
- `color.chart.[color].bold`
|
|
2412
2422
|
- `color.chart.[color].bolder`
|
|
2413
2423
|
- `color.chart.[color].boldest`
|
|
2414
2424
|
|
|
2415
2425
|
12 semantic chart tokens and hovered state tokens:
|
|
2416
|
-
|
|
2417
2426
|
- `color.chart.brand`
|
|
2418
2427
|
- `color.chart.neutral`
|
|
2419
2428
|
- `color.chart.success`
|
|
@@ -2428,7 +2437,6 @@ will begin to error wherever they're used.
|
|
|
2428
2437
|
- `color.chart.discovery.bold`
|
|
2429
2438
|
|
|
2430
2439
|
8 categorical chart tokens and hovered state tokens:
|
|
2431
|
-
|
|
2432
2440
|
- `color.chart.categorical.1`
|
|
2433
2441
|
- `color.chart.categorical.2`
|
|
2434
2442
|
- `color.chart.categorical.3`
|
|
@@ -2734,7 +2742,6 @@ will begin to error wherever they're used.
|
|
|
2734
2742
|
- [#25211](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/25211)
|
|
2735
2743
|
[`9f6aa1d7cdc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9f6aa1d7cdc) -
|
|
2736
2744
|
Introduces new interaction states to a number of existing elevation tokens:
|
|
2737
|
-
|
|
2738
2745
|
- elevation.surface.hovered
|
|
2739
2746
|
- elevation.surface.pressed
|
|
2740
2747
|
- elevation.surface.raised.hovered
|
|
@@ -2783,7 +2790,6 @@ will begin to error wherever they're used.
|
|
|
2783
2790
|
- [#24188](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24188)
|
|
2784
2791
|
[`50299267c2e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/50299267c2e) -
|
|
2785
2792
|
Refactors style-dictionary to support multiple palettes.
|
|
2786
|
-
|
|
2787
2793
|
- Adds legacy-palette containing colours from `@atlaskit/theme`.
|
|
2788
2794
|
- Palettes are processed as their own 'themes' (functionally) and now have their own configuration
|
|
2789
2795
|
via style-dictionary.
|
|
@@ -2798,7 +2804,6 @@ will begin to error wherever they're used.
|
|
|
2798
2804
|
[`e3377246ebc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e3377246ebc) - Moves
|
|
2799
2805
|
the following `deprecated` tokens to the `sunset` phase. Please ensure that all `sunset` tokens
|
|
2800
2806
|
are removed from your application, they will be completely removed in the next major version:
|
|
2801
|
-
|
|
2802
2807
|
- 'color.interaction.inverse.hovered' => 'color.background.inverse.subtle.hovered'
|
|
2803
2808
|
- 'color.interaction.inverse.pressed' => 'color.background.inverse.subtle.pressed'
|
|
2804
2809
|
|
|
@@ -2812,7 +2817,6 @@ will begin to error wherever they're used.
|
|
|
2812
2817
|
- [#23579](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/23579)
|
|
2813
2818
|
[`39a56a3c4e7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/39a56a3c4e7) - Update
|
|
2814
2819
|
disabled tokens to use alpha base tokens:
|
|
2815
|
-
|
|
2816
2820
|
- `color.text.disabled`
|
|
2817
2821
|
- `color.icon.disabled`
|
|
2818
2822
|
- `color.background.disabled`
|
|
@@ -2825,7 +2829,6 @@ will begin to error wherever they're used.
|
|
|
2825
2829
|
[`83c253f28bd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/83c253f28bd) - [ux] -
|
|
2826
2830
|
Correct 'color.interaction.hovered' and 'color.interaction.pressed' token values, which were
|
|
2827
2831
|
mistakenly mapped inversely in light and dark mode. The token values have now been swapped.
|
|
2828
|
-
|
|
2829
2832
|
- Deprecate 'color.interaction.inverse.hovered' which has been replaced with
|
|
2830
2833
|
'color.background.inverse.subtle.hovered'.
|
|
2831
2834
|
- Deprecate 'color.interaction.inverse.pressed' which has been replaced with
|
|
@@ -2839,20 +2842,17 @@ will begin to error wherever they're used.
|
|
|
2839
2842
|
[`d9d18df130f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d9d18df130f) - [ux]
|
|
2840
2843
|
Tweaked the values of the DN500 and DN500A base tokens to improve color contrast when paired with
|
|
2841
2844
|
text:
|
|
2842
|
-
|
|
2843
2845
|
- DN500 has changed from `#5C6C7A` to `#596773`
|
|
2844
2846
|
- DN500A has changed from `#A9C5DF7A` to `#9BB4CA80`
|
|
2845
2847
|
|
|
2846
2848
|
This changes the values in dark mode for the following tokens:
|
|
2847
2849
|
|
|
2848
2850
|
_(active)_:
|
|
2849
|
-
|
|
2850
2851
|
- `color.text.disabled`
|
|
2851
2852
|
- `color.icon.disabled`
|
|
2852
2853
|
- `color.background.accent.gray.subtle`
|
|
2853
2854
|
|
|
2854
2855
|
_(deprecated)_:
|
|
2855
|
-
|
|
2856
2856
|
- `color.overlay.pressed`
|
|
2857
2857
|
|
|
2858
2858
|
## 0.10.10
|
|
@@ -2884,7 +2884,6 @@ will begin to error wherever they're used.
|
|
|
2884
2884
|
- [#22107](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/22107)
|
|
2885
2885
|
[`cb8723a7974`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb8723a7974) -
|
|
2886
2886
|
Introduces a new set of neutral accent tokens:
|
|
2887
|
-
|
|
2888
2887
|
- `color.background.accent.gray.bolder`
|
|
2889
2888
|
- `color.background.accent.gray.subtle`
|
|
2890
2889
|
- `color.background.accent.gray.subtler`
|
|
@@ -2910,7 +2909,6 @@ will begin to error wherever they're used.
|
|
|
2910
2909
|
[`1124fa435ed`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1124fa435ed) - Moves
|
|
2911
2910
|
the following `deprecated` tokens to the `sunset` phase. Please ensure that all `sunset` tokens
|
|
2912
2911
|
are removed from your application, they will be completely removed in the next major version:
|
|
2913
|
-
|
|
2914
2912
|
- `color.background.brand.hovered` => `color.background.selected.hovered`
|
|
2915
2913
|
- `color.background.brand.pressed` => `color.background.selected.pressed`
|
|
2916
2914
|
- `color.background.brand` => `color.background.selected`
|
|
@@ -2947,7 +2945,6 @@ will begin to error wherever they're used.
|
|
|
2947
2945
|
- [#21920](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/21920)
|
|
2948
2946
|
[`5b8212f08b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5b8212f08b0) - The
|
|
2949
2947
|
current theme can now be accessed and monitored for changes using new exports.
|
|
2950
|
-
|
|
2951
2948
|
- `useThemeObserver` React hook
|
|
2952
2949
|
- `ThemeMutationObserver` Mutation Observer
|
|
2953
2950
|
|
|
@@ -3064,7 +3061,6 @@ will begin to error wherever they're used.
|
|
|
3064
3061
|
following tokens have been moved from the `deprecated` to `deleted` state in their lifecycles.
|
|
3065
3062
|
These tokens will continue to exist, however tooling will begin to error wherever they're used. If
|
|
3066
3063
|
you haven't already, please run `yarn eslint --fix` or similar to automate your migration.
|
|
3067
|
-
|
|
3068
3064
|
- `color.background.blanket` => `color.blanket`
|
|
3069
3065
|
- `color.background.boldBrand.resting` => `color.background.brand.bold`
|
|
3070
3066
|
- `color.background.boldBrand.hover` => `color.background.brand.bold.hovered`
|
|
@@ -3168,18 +3164,15 @@ will begin to error wherever they're used.
|
|
|
3168
3164
|
|
|
3169
3165
|
- [`c2ec60d6a1b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2ec60d6a1b) - [ux]
|
|
3170
3166
|
Updating existing 16 background accent colors
|
|
3171
|
-
|
|
3172
3167
|
- Rename default to subtler (Light:200 / Dark:900)
|
|
3173
3168
|
- Rename bold renamed to subtle (Light:400 / Dark:700)
|
|
3174
3169
|
- Update this ⤴ base token for dark mode from 700 to 800 (so it is now Light:400 / Dark:800)
|
|
3175
3170
|
|
|
3176
3171
|
16 new accent background colors:
|
|
3177
|
-
|
|
3178
3172
|
- color.background.accent.[color].subtlest (Light: 100 / Dark:1000)
|
|
3179
3173
|
- color.background.accent.[color].bolder (Light: 700 / Dark: 400)
|
|
3180
3174
|
|
|
3181
3175
|
8 new text accent colors:
|
|
3182
|
-
|
|
3183
3176
|
- color.text.accent.[color].bolder (Light:900 / Dark:200)
|
|
3184
3177
|
|
|
3185
3178
|
- [`7b6b994bef5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7b6b994bef5) - Correct
|
|
@@ -3203,7 +3196,6 @@ will begin to error wherever they're used.
|
|
|
3203
3196
|
- [#19072](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/19072)
|
|
3204
3197
|
[`899fd622557`](https://bitbucket.org/atlassian/atlassian-frontend/commits/899fd622557) -
|
|
3205
3198
|
Re-introduces the selected and selected.bold tokens:
|
|
3206
|
-
|
|
3207
3199
|
- `color.text.selected`
|
|
3208
3200
|
- `color.icon.selected`
|
|
3209
3201
|
- `color.border.selected`
|
|
@@ -3215,7 +3207,6 @@ will begin to error wherever they're used.
|
|
|
3215
3207
|
- `color.background.selected.bold.pressed`
|
|
3216
3208
|
|
|
3217
3209
|
The following tokens are _deprecated_:
|
|
3218
|
-
|
|
3219
3210
|
- `color.background.brand`
|
|
3220
3211
|
- `color.background.brand.hovered`
|
|
3221
3212
|
- `color.background.brand.pressed`
|
|
@@ -3224,7 +3215,6 @@ will begin to error wherever they're used.
|
|
|
3224
3215
|
|
|
3225
3216
|
Please ensure all usages of the following tokens are replaced with their `selected` counterpart,
|
|
3226
3217
|
wherever a brand token is used to represent a selected state.
|
|
3227
|
-
|
|
3228
3218
|
- `color.background.brand.[default|hovered|pressed]` =>
|
|
3229
3219
|
`color.background.selected.[default|hovered|pressed]`
|
|
3230
3220
|
- `color.background.brand.bold.[default|hovered|pressed]` =>
|
|
@@ -3358,7 +3348,6 @@ will begin to error wherever they're used.
|
|
|
3358
3348
|
previous rename map
|
|
3359
3349
|
- [`0936217160c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0936217160c) - Add bold
|
|
3360
3350
|
accent tokens:
|
|
3361
|
-
|
|
3362
3351
|
- `color.accent.boldBlue`
|
|
3363
3352
|
- `color.accent.boldRed`
|
|
3364
3353
|
- `color.accent.boldGreen`
|
|
@@ -3397,7 +3386,6 @@ will begin to error wherever they're used.
|
|
|
3397
3386
|
`background.selected.pressed`
|
|
3398
3387
|
- [`53749f08286`](https://bitbucket.org/atlassian/atlassian-frontend/commits/53749f08286) - Adds
|
|
3399
3388
|
tokens:
|
|
3400
|
-
|
|
3401
3389
|
- `color.overlay.hover`
|
|
3402
3390
|
- `color.overlay.pressed`
|
|
3403
3391
|
|
|
@@ -3442,11 +3430,9 @@ will begin to error wherever they're used.
|
|
|
3442
3430
|
removes & renames tokens
|
|
3443
3431
|
|
|
3444
3432
|
Adds:
|
|
3445
|
-
|
|
3446
3433
|
- `color.backgroundSelect`
|
|
3447
3434
|
|
|
3448
3435
|
Renames:
|
|
3449
|
-
|
|
3450
3436
|
- `color.borderTextHighlighted` to `color.bordertextSelected`
|
|
3451
3437
|
- `elevation.base` to `evelation.backgroundDefault`
|
|
3452
3438
|
- `elevation.flatSecondary` to `elevation.backgroundSunken`
|
|
@@ -3457,11 +3443,9 @@ will begin to error wherever they're used.
|
|
|
3457
3443
|
- `elevation.shadowOverlay` to `shadow.overlay`
|
|
3458
3444
|
|
|
3459
3445
|
Removes:
|
|
3460
|
-
|
|
3461
3446
|
- `elevation.boarderFlatPrimary`
|
|
3462
3447
|
|
|
3463
3448
|
Updates:
|
|
3464
|
-
|
|
3465
3449
|
- `elevation.shadowOverlay` value to `DN100`
|
|
3466
3450
|
- `color.textWarning` in light mode to `O800`
|
|
3467
3451
|
- `color.iconBorderWarning` in light mode to `O600`
|
|
@@ -3545,7 +3529,6 @@ will begin to error wherever they're used.
|
|
|
3545
3529
|
- [#11433](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/11433)
|
|
3546
3530
|
[`202cf0733de`](https://bitbucket.org/atlassian/atlassian-frontend/commits/202cf0733de) - Tokens
|
|
3547
3531
|
are now built using style dictionary with three outputs:
|
|
3548
|
-
|
|
3549
3532
|
1. CSS
|
|
3550
3533
|
1. Figma synchronizers
|
|
3551
3534
|
1. Token name map
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
/**
|
|
8
8
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
9
|
-
* @codegen <<SignedSource::
|
|
9
|
+
* @codegen <<SignedSource::0573206a0674f4e86073a4ec84cad3b9>>
|
|
10
10
|
* @codegenCommand yarn build tokens
|
|
11
11
|
*/
|
|
12
12
|
|
|
@@ -175,35 +175,5 @@ var tokens = [{
|
|
|
175
175
|
},
|
|
176
176
|
"name": "border.width.BorderWidth2",
|
|
177
177
|
"path": ["border", "width", "BorderWidth2"]
|
|
178
|
-
}, {
|
|
179
|
-
"value": "0px",
|
|
180
|
-
"attributes": {
|
|
181
|
-
"group": "shape"
|
|
182
|
-
},
|
|
183
|
-
"filePath": "schema/palettes/shape-palette.tsx",
|
|
184
|
-
"isSource": true,
|
|
185
|
-
"original": {
|
|
186
|
-
"value": 0,
|
|
187
|
-
"attributes": {
|
|
188
|
-
"group": "shape"
|
|
189
|
-
}
|
|
190
|
-
},
|
|
191
|
-
"name": "border.width.Size0",
|
|
192
|
-
"path": ["border", "width", "Size0"]
|
|
193
|
-
}, {
|
|
194
|
-
"value": "3px",
|
|
195
|
-
"attributes": {
|
|
196
|
-
"group": "shape"
|
|
197
|
-
},
|
|
198
|
-
"filePath": "schema/palettes/shape-palette.tsx",
|
|
199
|
-
"isSource": true,
|
|
200
|
-
"original": {
|
|
201
|
-
"value": 3,
|
|
202
|
-
"attributes": {
|
|
203
|
-
"group": "shape"
|
|
204
|
-
}
|
|
205
|
-
},
|
|
206
|
-
"name": "border.width.Size200",
|
|
207
|
-
"path": ["border", "width", "Size200"]
|
|
208
178
|
}];
|
|
209
179
|
var _default = exports.default = tokens;
|
|
@@ -18,39 +18,9 @@ exports.default = void 0;
|
|
|
18
18
|
* These changes will then be picked up by our tooling which will attempt to
|
|
19
19
|
* migrate as many of these renames as possible.
|
|
20
20
|
*
|
|
21
|
-
* @codegen <<SignedSource::
|
|
21
|
+
* @codegen <<SignedSource::c779b40628532228cae2ec34977f1f8e>>
|
|
22
22
|
* @codegenCommand yarn build tokens
|
|
23
23
|
*/
|
|
24
24
|
|
|
25
|
-
var replacementMapper = [
|
|
26
|
-
"path": "border.radius.[default]",
|
|
27
|
-
"state": "deprecated"
|
|
28
|
-
}, {
|
|
29
|
-
"path": "border.radius.050",
|
|
30
|
-
"state": "deprecated"
|
|
31
|
-
}, {
|
|
32
|
-
"path": "border.radius.100",
|
|
33
|
-
"state": "deprecated"
|
|
34
|
-
}, {
|
|
35
|
-
"path": "border.radius.200",
|
|
36
|
-
"state": "deprecated"
|
|
37
|
-
}, {
|
|
38
|
-
"path": "border.radius.300",
|
|
39
|
-
"state": "deprecated"
|
|
40
|
-
}, {
|
|
41
|
-
"path": "border.radius.400",
|
|
42
|
-
"state": "deprecated"
|
|
43
|
-
}, {
|
|
44
|
-
"path": "border.radius.circle",
|
|
45
|
-
"state": "deprecated"
|
|
46
|
-
}, {
|
|
47
|
-
"path": "border.width.0",
|
|
48
|
-
"state": "deprecated"
|
|
49
|
-
}, {
|
|
50
|
-
"path": "border.width.indicator",
|
|
51
|
-
"state": "deprecated"
|
|
52
|
-
}, {
|
|
53
|
-
"path": "border.width.outline",
|
|
54
|
-
"state": "deprecated"
|
|
55
|
-
}];
|
|
25
|
+
var replacementMapper = [];
|
|
56
26
|
var _default = exports.default = replacementMapper;
|
|
@@ -15,7 +15,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
|
|
|
15
15
|
* This allows users to compose their themes and only use the tokens that are requested.
|
|
16
16
|
* When a new theme is created, the import should automatically be added to the map
|
|
17
17
|
*
|
|
18
|
-
* @codegen <<SignedSource::
|
|
18
|
+
* @codegen <<SignedSource::4131829e60733a1a5e513dcc84af81de>>
|
|
19
19
|
* @codegenCommand yarn build tokens
|
|
20
20
|
*/
|
|
21
21
|
|
|
@@ -92,18 +92,6 @@ var themeImportsMap = {
|
|
|
92
92
|
'./themes/atlassian-shape'));
|
|
93
93
|
});
|
|
94
94
|
},
|
|
95
|
-
'shape-rounder': function shapeRounder() {
|
|
96
|
-
return Promise.resolve().then(function () {
|
|
97
|
-
return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_atlassian-shape-rounder" */
|
|
98
|
-
'./themes/atlassian-shape-rounder'));
|
|
99
|
-
});
|
|
100
|
-
},
|
|
101
|
-
'shape-roundest': function shapeRoundest() {
|
|
102
|
-
return Promise.resolve().then(function () {
|
|
103
|
-
return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_atlassian-shape-roundest" */
|
|
104
|
-
'./themes/atlassian-shape-roundest'));
|
|
105
|
-
});
|
|
106
|
-
},
|
|
107
95
|
'typography-modernized': function typographyModernized() {
|
|
108
96
|
return Promise.resolve().then(function () {
|
|
109
97
|
return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_atlassian-typography-modernized" */
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
/**
|
|
8
8
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
9
|
-
* @codegen <<SignedSource::
|
|
9
|
+
* @codegen <<SignedSource::f516cab37702e8e3d5152cb55d59256b>>
|
|
10
10
|
* @codegenCommand yarn build tokens
|
|
11
11
|
*/
|
|
12
|
-
var _default = exports.default = "\nhtml[data-theme~=\"shape:shape-rounder\"] {\n --ds-radius-xsmall: 0.125rem;\n --ds-radius-small: 0.25rem;\n --ds-radius-medium: 0.375rem;\n --ds-radius-large: 0.75rem;\n --ds-radius-xlarge: 1rem;\n --ds-radius-full: 624.9375rem;\n --ds-radius-tile: 25%;\n --ds-border-
|
|
12
|
+
var _default = exports.default = "\nhtml[data-theme~=\"shape:shape-rounder\"] {\n --ds-radius-xsmall: 0.125rem;\n --ds-radius-small: 0.25rem;\n --ds-radius-medium: 0.375rem;\n --ds-radius-large: 0.75rem;\n --ds-radius-xlarge: 1rem;\n --ds-radius-full: 624.9375rem;\n --ds-radius-tile: 25%;\n --ds-border-width: 0.0625rem;\n --ds-border-width-selected: 0.125rem;\n --ds-border-width-focused: 0.125rem;\n}\n";
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
/**
|
|
8
8
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
9
|
-
* @codegen <<SignedSource::
|
|
9
|
+
* @codegen <<SignedSource::46c9186a43917f0c2addc79cdca0c7e6>>
|
|
10
10
|
* @codegenCommand yarn build tokens
|
|
11
11
|
*/
|
|
12
|
-
var _default = exports.default = "\nhtml[data-theme~=\"shape:shape-roundest\"] {\n --ds-radius-xsmall: 0.125rem;\n --ds-radius-small: 0.25rem;\n --ds-radius-medium: 0.75rem;\n --ds-radius-large: 1rem;\n --ds-radius-xlarge: 1.25rem;\n --ds-radius-full: 624.9375rem;\n --ds-radius-tile: 25%;\n --ds-border-
|
|
12
|
+
var _default = exports.default = "\nhtml[data-theme~=\"shape:shape-roundest\"] {\n --ds-radius-xsmall: 0.125rem;\n --ds-radius-small: 0.25rem;\n --ds-radius-medium: 0.75rem;\n --ds-radius-large: 1rem;\n --ds-radius-xlarge: 1.25rem;\n --ds-radius-full: 624.9375rem;\n --ds-radius-tile: 25%;\n --ds-border-width: 0.0625rem;\n --ds-border-width-selected: 0.125rem;\n --ds-border-width-focused: 0.125rem;\n}\n";
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
/**
|
|
8
8
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
9
|
-
* @codegen <<SignedSource::
|
|
9
|
+
* @codegen <<SignedSource::a1c0e74bffea67b610c867ef86037e15>>
|
|
10
10
|
* @codegenCommand yarn build tokens
|
|
11
11
|
*/
|
|
12
|
-
var _default = exports.default = "\nhtml[data-theme~=\"shape:shape\"] {\n --ds-radius-xsmall: 0.125rem;\n --ds-radius-small: 0.25rem;\n --ds-radius-medium: 0.375rem;\n --ds-radius-large: 0.5rem;\n --ds-radius-xlarge: 0.75rem;\n --ds-radius-full: 624.9375rem;\n --ds-radius-tile: 25%;\n --ds-border-
|
|
12
|
+
var _default = exports.default = "\nhtml[data-theme~=\"shape:shape\"] {\n --ds-radius-xsmall: 0.125rem;\n --ds-radius-small: 0.25rem;\n --ds-radius-medium: 0.375rem;\n --ds-radius-large: 0.5rem;\n --ds-radius-xlarge: 0.75rem;\n --ds-radius-full: 624.9375rem;\n --ds-radius-tile: 25%;\n --ds-border-width: 0.0625rem;\n --ds-border-width-selected: 0.125rem;\n --ds-border-width-focused: 0.125rem;\n}\n";
|
|
@@ -13,7 +13,7 @@ exports.default = void 0;
|
|
|
13
13
|
* Token names mapped to their value in the default Atlassian themes ('light').
|
|
14
14
|
* These default values are used by the Babel plugin to optionally provide automatic fallbacks.
|
|
15
15
|
*
|
|
16
|
-
* @codegen <<SignedSource::
|
|
16
|
+
* @codegen <<SignedSource::e7abfe1ee39a9de14a95d8a23472f8e4>>
|
|
17
17
|
* @codegenCommand yarn build tokens
|
|
18
18
|
*/
|
|
19
19
|
var defaultTokenValues = {
|
|
@@ -462,17 +462,7 @@ var defaultTokenValues = {
|
|
|
462
462
|
'radius.xlarge': '0.75rem',
|
|
463
463
|
'radius.full': '624.9375rem',
|
|
464
464
|
'radius.tile': '25%',
|
|
465
|
-
'border.radius': '0.25rem',
|
|
466
|
-
'border.radius.050': '0.125rem',
|
|
467
|
-
'border.radius.100': '0.25rem',
|
|
468
|
-
'border.radius.200': '0.5rem',
|
|
469
|
-
'border.radius.300': '0.75rem',
|
|
470
|
-
'border.radius.400': '1rem',
|
|
471
|
-
'border.radius.circle': '624.9375rem',
|
|
472
465
|
'border.width': '0.0625rem',
|
|
473
|
-
'border.width.0': '0rem',
|
|
474
|
-
'border.width.indicator': '0.1875rem',
|
|
475
|
-
'border.width.outline': '0.125rem',
|
|
476
466
|
'border.width.selected': '0.125rem',
|
|
477
467
|
'border.width.focused': '0.125rem'
|
|
478
468
|
};
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
/**
|
|
8
8
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
9
|
-
* @codegen <<SignedSource::
|
|
9
|
+
* @codegen <<SignedSource::e7897709d50bd1f9582875a2a591b896>>
|
|
10
10
|
* @codegenCommand yarn build tokens
|
|
11
11
|
*/
|
|
12
12
|
var tokens = {
|
|
@@ -455,17 +455,7 @@ var tokens = {
|
|
|
455
455
|
'radius.xlarge': '--ds-radius-xlarge',
|
|
456
456
|
'radius.full': '--ds-radius-full',
|
|
457
457
|
'radius.tile': '--ds-radius-tile',
|
|
458
|
-
'border.radius': '--ds-border-radius',
|
|
459
|
-
'border.radius.050': '--ds-border-radius-050',
|
|
460
|
-
'border.radius.100': '--ds-border-radius-100',
|
|
461
|
-
'border.radius.200': '--ds-border-radius-200',
|
|
462
|
-
'border.radius.300': '--ds-border-radius-300',
|
|
463
|
-
'border.radius.400': '--ds-border-radius-400',
|
|
464
|
-
'border.radius.circle': '--ds-border-radius-circle',
|
|
465
458
|
'border.width': '--ds-border-width',
|
|
466
|
-
'border.width.0': '--ds-border-width-0',
|
|
467
|
-
'border.width.indicator': '--ds-border-width-indicator',
|
|
468
|
-
'border.width.outline': '--ds-border-width-outline',
|
|
469
459
|
'border.width.selected': '--ds-border-width-selected',
|
|
470
460
|
'border.width.focused': '--ds-border-width-focused'
|
|
471
461
|
};
|