@atlaskit/tokens 0.6.1 → 0.7.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.
Files changed (95) hide show
  1. package/CHANGELOG.md +64 -0
  2. package/css/atlassian-dark.css +55 -8
  3. package/css/atlassian-light.css +54 -7
  4. package/dist/cjs/artifacts/rename-mapping.js +100 -32
  5. package/dist/cjs/artifacts/token-default-values.js +54 -7
  6. package/dist/cjs/artifacts/token-names.js +54 -7
  7. package/dist/cjs/artifacts/tokens-raw/atlassian-dark.js +1173 -246
  8. package/dist/cjs/artifacts/tokens-raw/atlassian-light.js +1151 -224
  9. package/dist/cjs/figma/synchronize-figma-tokens.js +34 -9
  10. package/dist/cjs/get-token.js +1 -1
  11. package/dist/cjs/tokens/atlassian-dark/color/accent.js +120 -32
  12. package/dist/cjs/tokens/atlassian-dark/color/background.js +16 -3
  13. package/dist/cjs/tokens/atlassian-dark/color/border.js +3 -0
  14. package/dist/cjs/tokens/atlassian-dark/color/icon.js +3 -0
  15. package/dist/cjs/tokens/atlassian-dark/color/text.js +3 -0
  16. package/dist/cjs/tokens/atlassian-dark/deprecated/deprecated.js +79 -6
  17. package/dist/cjs/tokens/atlassian-dark/elevation/surface.js +1 -1
  18. package/dist/cjs/tokens/atlassian-light/color/accent.js +112 -24
  19. package/dist/cjs/tokens/atlassian-light/color/background.js +13 -0
  20. package/dist/cjs/tokens/atlassian-light/color/border.js +3 -0
  21. package/dist/cjs/tokens/atlassian-light/color/icon.js +3 -0
  22. package/dist/cjs/tokens/atlassian-light/color/text.js +3 -0
  23. package/dist/cjs/tokens/atlassian-light/deprecated/deprecated.js +79 -6
  24. package/dist/cjs/tokens/default/color/accent.js +234 -50
  25. package/dist/cjs/tokens/default/color/background.js +30 -5
  26. package/dist/cjs/tokens/default/color/border.js +7 -0
  27. package/dist/cjs/tokens/default/color/icon.js +7 -0
  28. package/dist/cjs/tokens/default/color/text.js +7 -0
  29. package/dist/cjs/tokens/default/deprecated/deprecated.js +192 -34
  30. package/dist/cjs/tokens/palette.js +6 -0
  31. package/dist/cjs/version.json +1 -1
  32. package/dist/es2019/artifacts/rename-mapping.js +100 -32
  33. package/dist/es2019/artifacts/token-default-values.js +54 -7
  34. package/dist/es2019/artifacts/token-names.js +54 -7
  35. package/dist/es2019/artifacts/tokens-raw/atlassian-dark.js +1173 -246
  36. package/dist/es2019/artifacts/tokens-raw/atlassian-light.js +1151 -224
  37. package/dist/es2019/figma/synchronize-figma-tokens.js +32 -9
  38. package/dist/es2019/get-token.js +1 -1
  39. package/dist/es2019/tokens/atlassian-dark/color/accent.js +120 -32
  40. package/dist/es2019/tokens/atlassian-dark/color/background.js +16 -3
  41. package/dist/es2019/tokens/atlassian-dark/color/border.js +3 -0
  42. package/dist/es2019/tokens/atlassian-dark/color/icon.js +3 -0
  43. package/dist/es2019/tokens/atlassian-dark/color/text.js +3 -0
  44. package/dist/es2019/tokens/atlassian-dark/deprecated/deprecated.js +79 -6
  45. package/dist/es2019/tokens/atlassian-dark/elevation/surface.js +1 -1
  46. package/dist/es2019/tokens/atlassian-light/color/accent.js +112 -24
  47. package/dist/es2019/tokens/atlassian-light/color/background.js +13 -0
  48. package/dist/es2019/tokens/atlassian-light/color/border.js +3 -0
  49. package/dist/es2019/tokens/atlassian-light/color/icon.js +3 -0
  50. package/dist/es2019/tokens/atlassian-light/color/text.js +3 -0
  51. package/dist/es2019/tokens/atlassian-light/deprecated/deprecated.js +79 -6
  52. package/dist/es2019/tokens/default/color/accent.js +234 -50
  53. package/dist/es2019/tokens/default/color/background.js +30 -5
  54. package/dist/es2019/tokens/default/color/border.js +7 -0
  55. package/dist/es2019/tokens/default/color/icon.js +7 -0
  56. package/dist/es2019/tokens/default/color/text.js +7 -0
  57. package/dist/es2019/tokens/default/deprecated/deprecated.js +192 -34
  58. package/dist/es2019/tokens/palette.js +6 -0
  59. package/dist/es2019/version.json +1 -1
  60. package/dist/esm/artifacts/rename-mapping.js +100 -32
  61. package/dist/esm/artifacts/token-default-values.js +54 -7
  62. package/dist/esm/artifacts/token-names.js +54 -7
  63. package/dist/esm/artifacts/tokens-raw/atlassian-dark.js +1173 -246
  64. package/dist/esm/artifacts/tokens-raw/atlassian-light.js +1151 -224
  65. package/dist/esm/figma/synchronize-figma-tokens.js +34 -9
  66. package/dist/esm/get-token.js +1 -1
  67. package/dist/esm/tokens/atlassian-dark/color/accent.js +120 -32
  68. package/dist/esm/tokens/atlassian-dark/color/background.js +16 -3
  69. package/dist/esm/tokens/atlassian-dark/color/border.js +3 -0
  70. package/dist/esm/tokens/atlassian-dark/color/icon.js +3 -0
  71. package/dist/esm/tokens/atlassian-dark/color/text.js +3 -0
  72. package/dist/esm/tokens/atlassian-dark/deprecated/deprecated.js +79 -6
  73. package/dist/esm/tokens/atlassian-dark/elevation/surface.js +1 -1
  74. package/dist/esm/tokens/atlassian-light/color/accent.js +112 -24
  75. package/dist/esm/tokens/atlassian-light/color/background.js +13 -0
  76. package/dist/esm/tokens/atlassian-light/color/border.js +3 -0
  77. package/dist/esm/tokens/atlassian-light/color/icon.js +3 -0
  78. package/dist/esm/tokens/atlassian-light/color/text.js +3 -0
  79. package/dist/esm/tokens/atlassian-light/deprecated/deprecated.js +79 -6
  80. package/dist/esm/tokens/default/color/accent.js +234 -50
  81. package/dist/esm/tokens/default/color/background.js +30 -5
  82. package/dist/esm/tokens/default/color/border.js +7 -0
  83. package/dist/esm/tokens/default/color/icon.js +7 -0
  84. package/dist/esm/tokens/default/color/text.js +7 -0
  85. package/dist/esm/tokens/default/deprecated/deprecated.js +192 -34
  86. package/dist/esm/tokens/palette.js +6 -0
  87. package/dist/esm/version.json +1 -1
  88. package/dist/types/artifacts/token-default-values.d.ts +54 -7
  89. package/dist/types/artifacts/token-names.d.ts +108 -14
  90. package/dist/types/artifacts/types-internal.d.ts +1 -1
  91. package/dist/types/artifacts/types.d.ts +1 -1
  92. package/dist/types/figma/synchronize-figma-tokens.d.ts +9 -1
  93. package/dist/types/tokens/default/utility/utility.d.ts +10 -10
  94. package/dist/types/types.d.ts +116 -26
  95. package/package.json +2 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,69 @@
1
1
  # @atlaskit/tokens
2
2
 
3
+ ## 0.7.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`220aa7f8aab`](https://bitbucket.org/atlassian/atlassian-frontend/commits/220aa7f8aab) - [ux] Dark Mode token colours changed for the background of elements in a selected state (color.background.brand)
8
+
9
+ ### Patch Changes
10
+
11
+ - [`c2ec60d6a1b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2ec60d6a1b) - [ux] Updating existing 16 background accent colors
12
+
13
+ - Rename default to subtler (Light:200 / Dark:900)
14
+ - Rename bold renamed to subtle (Light:400 / Dark:700)
15
+ - Update this ⤴ base token for dark mode from 700 to 800 (so it is now Light:400 / Dark:800)
16
+
17
+ 16 new accent background colors:
18
+
19
+ - color.background.accent.[color].subtlest (Light: 100 / Dark:1000)
20
+ - color.background.accent.[color].bolder (Light: 700 / Dark: 400)
21
+
22
+ 8 new text accent colors:
23
+
24
+ - color.text.accent.[color].bolder (Light:900 / Dark:200)
25
+
26
+ - [`7b6b994bef5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7b6b994bef5) - Correct shorthand hex code conversion in Figma synchronisation script
27
+ - [`91a3f179e8c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/91a3f179e8c) - Prefix warnings to deprecated tokens in the Figma synchronizer script
28
+
29
+ ## 0.6.3
30
+
31
+ ### Patch Changes
32
+
33
+ - [`39f4b3b6b48`](https://bitbucket.org/atlassian/atlassian-frontend/commits/39f4b3b6b48) - Added new base dark mode token DN-100 and modified elevation.surface.token to use it rather than the alpha.
34
+
35
+ ## 0.6.2
36
+
37
+ ### Patch Changes
38
+
39
+ - [`899fd622557`](https://bitbucket.org/atlassian/atlassian-frontend/commits/899fd622557) - Re-introduces the selected and selected.bold tokens:
40
+
41
+ - `color.text.selected`
42
+ - `color.icon.selected`
43
+ - `color.border.selected`
44
+ - `color.background.selected`
45
+ - `color.background.selected.hovered`
46
+ - `color.background.selected.pressed`
47
+ - `color.background.selected.bold`
48
+ - `color.background.selected.bold.hovered`
49
+ - `color.background.selected.bold.pressed`
50
+
51
+ The following tokens are _deprecated_:
52
+
53
+ - `color.background.brand`
54
+ - `color.background.brand.hovered`
55
+ - `color.background.brand.pressed`
56
+
57
+ **IMPORTANT (Manual verification required):**
58
+
59
+ 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.
60
+
61
+ - `color.background.brand.[default|hovered|pressed]` => `color.background.selected.[default|hovered|pressed]`
62
+ - `color.background.brand.bold.[default|hovered|pressed]` => `color.background.selected.bold.[default|hovered|pressed]`
63
+ - `color.text.brand` => `color.text.selected`
64
+ - `color.icon.brand` => `color.icon.selected`
65
+ - `color.border.brand` => `color.border.selected`
66
+
3
67
  ## 0.6.1
4
68
 
5
69
  ### Patch Changes
@@ -2,19 +2,28 @@
2
2
  /* Re-generate by running `yarn build tokens`. */
3
3
  html[data-theme="dark"] {
4
4
  --ds-text-accent-blue: #85B8FF;
5
+ --ds-text-accent-blue-bolder: #CCE0FF;
5
6
  --ds-text-accent-red: #FF9C8F;
7
+ --ds-text-accent-red-bolder: #FFD2CC;
6
8
  --ds-text-accent-orange: #FEC57B;
9
+ --ds-text-accent-orange-bolder: #FFE2BD;
7
10
  --ds-text-accent-yellow: #F5CD47;
11
+ --ds-text-accent-yellow-bolder: #F8E6A0;
8
12
  --ds-text-accent-green: #7EE2B8;
13
+ --ds-text-accent-green-bolder: #BAF3DB;
9
14
  --ds-text-accent-purple: #B8ACF6;
15
+ --ds-text-accent-purple-bolder: #DFD8FD;
10
16
  --ds-text-accent-teal: #8BDBE5;
17
+ --ds-text-accent-teal-bolder: #C1F0F5;
11
18
  --ds-text-accent-magenta: #F797D2;
19
+ --ds-text-accent-magenta-bolder: #FDD0EC;
12
20
  --ds-text: #C7D1DB;
13
21
  --ds-text-subtle: #9FADBC;
14
22
  --ds-text-subtlest: #8696A7;
15
23
  --ds-text-disabled: #5C6C7A;
16
24
  --ds-text-inverse: #161A1D;
17
25
  --ds-text-brand: #579DFF;
26
+ --ds-text-selected: #579DFF;
18
27
  --ds-text-danger: #FF9C8F;
19
28
  --ds-text-warning: #F5CD47;
20
29
  --ds-text-warning-inverse: #161A1D;
@@ -28,7 +37,6 @@ html[data-theme="dark"] {
28
37
  --ds-text-mediumEmphasis: #9FADBC;
29
38
  --ds-text-onBold: #161A1D;
30
39
  --ds-text-onBoldWarning: #161A1D;
31
- --ds-text-selected: #579DFF;
32
40
  --ds-icon-accent-blue: #388BFF;
33
41
  --ds-icon-accent-red: #EF5C48;
34
42
  --ds-icon-accent-orange: #F18D13;
@@ -42,6 +50,7 @@ html[data-theme="dark"] {
42
50
  --ds-icon-inverse: #161A1D;
43
51
  --ds-icon-disabled: #5C6C7A;
44
52
  --ds-icon-brand: #579DFF;
53
+ --ds-icon-selected: #579DFF;
45
54
  --ds-icon-danger: #EF5C48;
46
55
  --ds-icon-warning: #CF9F02;
47
56
  --ds-icon-warning-inverse: #161A1D;
@@ -61,6 +70,7 @@ html[data-theme="dark"] {
61
70
  --ds-border-input: #A6C5E229;
62
71
  --ds-border-disabled: #A1BDD914;
63
72
  --ds-border-brand: #579DFF;
73
+ --ds-border-selected: #579DFF;
64
74
  --ds-border-danger: #EF5C48;
65
75
  --ds-border-warning: #CF9F02;
66
76
  --ds-border-success: #2ABB7F;
@@ -68,20 +78,52 @@ html[data-theme="dark"] {
68
78
  --ds-border-information: #388BFF;
69
79
  --ds-border-focus: #85B8FF;
70
80
  --ds-border-neutral: #A6C5E229;
81
+ --ds-background-accent-blue-subtlest: #082145;
82
+ --ds-background-accent-blue-subtler: #09326C;
83
+ --ds-background-accent-blue-subtle: #0055CC;
84
+ --ds-background-accent-blue-bolder: #579DFF;
71
85
  --ds-background-accent-blue: #09326C;
72
86
  --ds-background-accent-blue-bold: #0C66E4;
87
+ --ds-background-accent-red-subtlest: #391813;
88
+ --ds-background-accent-red-subtler: #601E16;
89
+ --ds-background-accent-red-subtle: #AE2A19;
90
+ --ds-background-accent-red-bolder: #F87462;
73
91
  --ds-background-accent-red: #601E16;
74
92
  --ds-background-accent-red-bold: #CA3521;
93
+ --ds-background-accent-orange-subtlest: #43290F;
94
+ --ds-background-accent-orange-subtler: #5F3811;
95
+ --ds-background-accent-orange-subtle: #974F0C;
96
+ --ds-background-accent-orange-bolder: #FAA53D;
75
97
  --ds-background-accent-orange: #5F3811;
76
98
  --ds-background-accent-orange-bold: #B65C02;
99
+ --ds-background-accent-yellow-subtlest: #3D2E00;
100
+ --ds-background-accent-yellow-subtler: #533F04;
101
+ --ds-background-accent-yellow-subtle: #7F5F01;
102
+ --ds-background-accent-yellow-bolder: #E2B203;
77
103
  --ds-background-accent-yellow: #533F04;
78
104
  --ds-background-accent-yellow-bold: #946F00;
105
+ --ds-background-accent-green-subtlest: #133527;
106
+ --ds-background-accent-green-subtler: #164B35;
107
+ --ds-background-accent-green-subtle: #216E4E;
108
+ --ds-background-accent-green-bolder: #4BCE97;
79
109
  --ds-background-accent-green: #164B35;
80
110
  --ds-background-accent-green-bold: #1F845A;
111
+ --ds-background-accent-teal-subtlest: #153337;
112
+ --ds-background-accent-teal-subtler: #1D474C;
113
+ --ds-background-accent-teal-subtle: #206B74;
114
+ --ds-background-accent-teal-bolder: #60C6D2;
81
115
  --ds-background-accent-teal: #1D474C;
82
116
  --ds-background-accent-teal-bold: #1D7F8C;
117
+ --ds-background-accent-purple-subtlest: #231C3F;
118
+ --ds-background-accent-purple-subtler: #352C63;
119
+ --ds-background-accent-purple-subtle: #5E4DB2;
120
+ --ds-background-accent-purple-bolder: #9F8FEF;
83
121
  --ds-background-accent-purple: #352C63;
84
122
  --ds-background-accent-purple-bold: #6E5DC6;
123
+ --ds-background-accent-magenta-subtlest: #341829;
124
+ --ds-background-accent-magenta-subtler: #50253F;
125
+ --ds-background-accent-magenta-subtle: #943D73;
126
+ --ds-background-accent-magenta-bolder: #E774BB;
85
127
  --ds-background-accent-magenta: #50253F;
86
128
  --ds-background-accent-magenta-bold: #AE4787;
87
129
  --ds-background-disabled: #A1BDD914;
@@ -98,12 +140,20 @@ html[data-theme="dark"] {
98
140
  --ds-background-neutral-bold: #9FADBC;
99
141
  --ds-background-neutral-bold-hovered: #B6C2CF;
100
142
  --ds-background-neutral-bold-pressed: #C7D1DB;
101
- --ds-background-brand: #A1BDD914;
102
- --ds-background-brand-hovered: #A6C5E229;
103
- --ds-background-brand-pressed: #BFDBF847;
104
143
  --ds-background-brand-bold: #579DFF;
105
144
  --ds-background-brand-bold-hovered: #85B8FF;
106
145
  --ds-background-brand-bold-pressed: #CCE0FF;
146
+ --ds-background-brand: #082145;
147
+ --ds-background-brand-hovered: #09326C;
148
+ --ds-background-brand-pressed: #0055CC;
149
+ --ds-background-selected: #082145;
150
+ --ds-background-selected-hovered: #09326C;
151
+ --ds-background-selected-pressed: #0055CC;
152
+ --ds-background-selected-bold: #579DFF;
153
+ --ds-background-selected-bold-hovered: #85B8FF;
154
+ --ds-background-selected-bold-pressed: #CCE0FF;
155
+ --ds-background-selected-resting: #A1BDD914;
156
+ --ds-background-selected-hover: #A6C5E229;
107
157
  --ds-background-danger: #391813;
108
158
  --ds-background-danger-hovered: #601E16;
109
159
  --ds-background-danger-pressed: #AE2A19;
@@ -156,9 +206,6 @@ html[data-theme="dark"] {
156
206
  --ds-background-card: #1D2125;
157
207
  --ds-background-default: #161A1D;
158
208
  --ds-background-overlay: #22272B;
159
- --ds-background-selected-resting: #A1BDD914;
160
- --ds-background-selected-hover: #A6C5E229;
161
- --ds-background-selected-pressed: #BFDBF847;
162
209
  --ds-background-subtleBorderedNeutral-pressed: #A1BDD914;
163
210
  --ds-background-subtleBorderedNeutral-resting: #BCD6F00A;
164
211
  --ds-background-subtleBrand-hover: #09326C;
@@ -214,7 +261,7 @@ html[data-theme="dark"] {
214
261
  --ds-shadow-raised: 0px 1px 1px #03040480, 0px 0px 1px #03040480;
215
262
  --ds-shadow-overlay: inset 0px 0px 0px 1px #BCD6F00A, 0px 8px 12px #0304045C, 0px 0px 1px #03040480;
216
263
  --ds-surface: #161A1D;
217
- --ds-surface-sunken: #03040442;
264
+ --ds-surface-sunken: #101214;
218
265
  --ds-surface-raised: #1D2125;
219
266
  --ds-surface-overlay: #22272B;
220
267
  --ds-UNSAFE_util-transparent: transparent;
@@ -2,19 +2,28 @@
2
2
  /* Re-generate by running `yarn build tokens`. */
3
3
  :root, html[data-theme="light"] {
4
4
  --ds-text-accent-blue: #0055CC;
5
+ --ds-text-accent-blue-bolder: #09326C;
5
6
  --ds-text-accent-red: #AE2A19;
7
+ --ds-text-accent-red-bolder: #601E16;
6
8
  --ds-text-accent-orange: #974F0C;
9
+ --ds-text-accent-orange-bolder: #5F3811;
7
10
  --ds-text-accent-yellow: #7F5F01;
11
+ --ds-text-accent-yellow-bolder: #533F04;
8
12
  --ds-text-accent-green: #216E4E;
13
+ --ds-text-accent-green-bolder: #164B35;
9
14
  --ds-text-accent-purple: #5E4DB2;
15
+ --ds-text-accent-purple-bolder: #352C63;
10
16
  --ds-text-accent-teal: #206B74;
17
+ --ds-text-accent-teal-bolder: #1D474C;
11
18
  --ds-text-accent-magenta: #943D73;
19
+ --ds-text-accent-magenta-bolder: #50253F;
12
20
  --ds-text: #172B4D;
13
21
  --ds-text-subtle: #44546F;
14
22
  --ds-text-subtlest: #626F86;
15
23
  --ds-text-disabled: #8993A5;
16
24
  --ds-text-inverse: #FFFFFF;
17
25
  --ds-text-brand: #0C66E4;
26
+ --ds-text-selected: #0C66E4;
18
27
  --ds-text-danger: #AE2A19;
19
28
  --ds-text-warning: #974F0C;
20
29
  --ds-text-warning-inverse: #172B4D;
@@ -28,7 +37,6 @@
28
37
  --ds-text-mediumEmphasis: #44546F;
29
38
  --ds-text-onBold: #FFFFFF;
30
39
  --ds-text-onBoldWarning: #172B4D;
31
- --ds-text-selected: #0C66E4;
32
40
  --ds-icon-accent-blue: #1D7AFC;
33
41
  --ds-icon-accent-red: #E34935;
34
42
  --ds-icon-accent-orange: #D97008;
@@ -42,6 +50,7 @@
42
50
  --ds-icon-inverse: #FFFFFF;
43
51
  --ds-icon-disabled: #8993A5;
44
52
  --ds-icon-brand: #0C66E4;
53
+ --ds-icon-selected: #0C66E4;
45
54
  --ds-icon-danger: #E34935;
46
55
  --ds-icon-warning: #D97008;
47
56
  --ds-icon-warning-inverse: #172B4D;
@@ -61,6 +70,7 @@
61
70
  --ds-border-input: #091E4224;
62
71
  --ds-border-disabled: #091E420F;
63
72
  --ds-border-brand: #0C66E4;
73
+ --ds-border-selected: #0C66E4;
64
74
  --ds-border-danger: #E34935;
65
75
  --ds-border-warning: #D97008;
66
76
  --ds-border-success: #22A06B;
@@ -68,20 +78,52 @@
68
78
  --ds-border-information: #1D7AFC;
69
79
  --ds-border-focus: #388BFF;
70
80
  --ds-border-neutral: #091E4224;
81
+ --ds-background-accent-blue-subtlest: #E9F2FF;
82
+ --ds-background-accent-blue-subtler: #CCE0FF;
83
+ --ds-background-accent-blue-subtle: #579DFF;
84
+ --ds-background-accent-blue-bolder: #0C66E4;
71
85
  --ds-background-accent-blue: #CCE0FF;
72
86
  --ds-background-accent-blue-bold: #579DFF;
87
+ --ds-background-accent-red-subtlest: #FFEDEB;
88
+ --ds-background-accent-red-subtler: #FFD2CC;
89
+ --ds-background-accent-red-subtle: #F87462;
90
+ --ds-background-accent-red-bolder: #CA3521;
73
91
  --ds-background-accent-red: #FFD2CC;
74
92
  --ds-background-accent-red-bold: #F87462;
93
+ --ds-background-accent-orange-subtlest: #FFF4E5;
94
+ --ds-background-accent-orange-subtler: #FFE2BD;
95
+ --ds-background-accent-orange-subtle: #FAA53D;
96
+ --ds-background-accent-orange-bolder: #B65C02;
75
97
  --ds-background-accent-orange: #FFE2BD;
76
98
  --ds-background-accent-orange-bold: #FAA53D;
99
+ --ds-background-accent-yellow-subtlest: #FFF7D6;
100
+ --ds-background-accent-yellow-subtler: #F8E6A0;
101
+ --ds-background-accent-yellow-subtle: #E2B203;
102
+ --ds-background-accent-yellow-bolder: #946F00;
77
103
  --ds-background-accent-yellow: #F8E6A0;
78
104
  --ds-background-accent-yellow-bold: #E2B203;
105
+ --ds-background-accent-green-subtlest: #DFFCF0;
106
+ --ds-background-accent-green-subtler: #BAF3DB;
107
+ --ds-background-accent-green-subtle: #4BCE97;
108
+ --ds-background-accent-green-bolder: #1F845A;
79
109
  --ds-background-accent-green: #BAF3DB;
80
110
  --ds-background-accent-green-bold: #4BCE97;
111
+ --ds-background-accent-teal-subtlest: #E3FAFC;
112
+ --ds-background-accent-teal-subtler: #C1F0F5;
113
+ --ds-background-accent-teal-subtle: #60C6D2;
114
+ --ds-background-accent-teal-bolder: #1D7F8C;
81
115
  --ds-background-accent-teal: #C1F0F5;
82
116
  --ds-background-accent-teal-bold: #60C6D2;
117
+ --ds-background-accent-purple-subtlest: #F3F0FF;
118
+ --ds-background-accent-purple-subtler: #DFD8FD;
119
+ --ds-background-accent-purple-subtle: #9F8FEF;
120
+ --ds-background-accent-purple-bolder: #6E5DC6;
83
121
  --ds-background-accent-purple: #DFD8FD;
84
122
  --ds-background-accent-purple-bold: #9F8FEF;
123
+ --ds-background-accent-magenta-subtlest: #FFECF8;
124
+ --ds-background-accent-magenta-subtler: #FDD0EC;
125
+ --ds-background-accent-magenta-subtle: #E774BB;
126
+ --ds-background-accent-magenta-bolder: #AE4787;
85
127
  --ds-background-accent-magenta: #FDD0EC;
86
128
  --ds-background-accent-magenta-bold: #E774BB;
87
129
  --ds-background-disabled: #091E420F;
@@ -98,12 +140,20 @@
98
140
  --ds-background-neutral-bold: #44546F;
99
141
  --ds-background-neutral-bold-hovered: #2C3E5D;
100
142
  --ds-background-neutral-bold-pressed: #172B4D;
101
- --ds-background-brand: #E9F2FF;
102
- --ds-background-brand-hovered: #CCE0FF;
103
- --ds-background-brand-pressed: #85B8FF;
104
143
  --ds-background-brand-bold: #0C66E4;
105
144
  --ds-background-brand-bold-hovered: #0055CC;
106
145
  --ds-background-brand-bold-pressed: #09326C;
146
+ --ds-background-brand: #E9F2FF;
147
+ --ds-background-brand-hovered: #CCE0FF;
148
+ --ds-background-brand-pressed: #85B8FF;
149
+ --ds-background-selected: #E9F2FF;
150
+ --ds-background-selected-hovered: #CCE0FF;
151
+ --ds-background-selected-pressed: #85B8FF;
152
+ --ds-background-selected-bold: #0C66E4;
153
+ --ds-background-selected-bold-hovered: #0055CC;
154
+ --ds-background-selected-bold-pressed: #09326C;
155
+ --ds-background-selected-resting: #E9F2FF;
156
+ --ds-background-selected-hover: #CCE0FF;
107
157
  --ds-background-danger: #FFEDEB;
108
158
  --ds-background-danger-hovered: #FFD2CC;
109
159
  --ds-background-danger-pressed: #FF9C8F;
@@ -156,9 +206,6 @@
156
206
  --ds-background-card: #FFFFFF;
157
207
  --ds-background-default: #FFFFFF;
158
208
  --ds-background-overlay: #FFFFFF;
159
- --ds-background-selected-resting: #E9F2FF;
160
- --ds-background-selected-hover: #CCE0FF;
161
- --ds-background-selected-pressed: #85B8FF;
162
209
  --ds-background-subtleBorderedNeutral-pressed: #091E420F;
163
210
  --ds-background-subtleBorderedNeutral-resting: #091E4208;
164
211
  --ds-background-subtleBrand-hover: #CCE0FF;
@@ -46,10 +46,6 @@ var renameMapper = [{
46
46
  "path": "color.text.onBoldWarning",
47
47
  "state": "deprecated",
48
48
  "replacement": "color.text.warning.inverse"
49
- }, {
50
- "path": "color.text.selected",
51
- "state": "deprecated",
52
- "replacement": "color.text.brand"
53
49
  }, {
54
50
  "path": "color.border.focus",
55
51
  "state": "deprecated",
@@ -58,6 +54,90 @@ var renameMapper = [{
58
54
  "path": "color.border.neutral",
59
55
  "state": "deprecated",
60
56
  "replacement": "color.border.[default]"
57
+ }, {
58
+ "path": "color.background.accent.blue.[default]",
59
+ "state": "deprecated",
60
+ "replacement": "color.background.accent.blue.subtler"
61
+ }, {
62
+ "path": "color.background.accent.blue.bold",
63
+ "state": "deprecated",
64
+ "replacement": "color.background.accent.blue.subtle"
65
+ }, {
66
+ "path": "color.background.accent.red.[default]",
67
+ "state": "deprecated",
68
+ "replacement": "color.background.accent.red.subtler"
69
+ }, {
70
+ "path": "color.background.accent.red.bold",
71
+ "state": "deprecated",
72
+ "replacement": "color.background.accent.red.subtle"
73
+ }, {
74
+ "path": "color.background.accent.orange.[default]",
75
+ "state": "deprecated",
76
+ "replacement": "color.background.accent.orange.subtler"
77
+ }, {
78
+ "path": "color.background.accent.orange.bold",
79
+ "state": "deprecated",
80
+ "replacement": "color.background.accent.orange.subtle"
81
+ }, {
82
+ "path": "color.background.accent.yellow.[default]",
83
+ "state": "deprecated",
84
+ "replacement": "color.background.accent.yellow.subtler"
85
+ }, {
86
+ "path": "color.background.accent.yellow.bold",
87
+ "state": "deprecated",
88
+ "replacement": "color.background.accent.yellow.subtle"
89
+ }, {
90
+ "path": "color.background.accent.green.[default]",
91
+ "state": "deprecated",
92
+ "replacement": "color.background.accent.green.subtler"
93
+ }, {
94
+ "path": "color.background.accent.green.bold",
95
+ "state": "deprecated",
96
+ "replacement": "color.background.accent.green.subtle"
97
+ }, {
98
+ "path": "color.background.accent.teal.[default]",
99
+ "state": "deprecated",
100
+ "replacement": "color.background.accent.teal.subtler"
101
+ }, {
102
+ "path": "color.background.accent.teal.bold",
103
+ "state": "deprecated",
104
+ "replacement": "color.background.accent.teal.subtle"
105
+ }, {
106
+ "path": "color.background.accent.purple.[default]",
107
+ "state": "deprecated",
108
+ "replacement": "color.background.accent.purple.subtler"
109
+ }, {
110
+ "path": "color.background.accent.purple.bold",
111
+ "state": "deprecated",
112
+ "replacement": "color.background.accent.purple.subtle"
113
+ }, {
114
+ "path": "color.background.accent.magenta.[default]",
115
+ "state": "deprecated",
116
+ "replacement": "color.background.accent.magenta.subtler"
117
+ }, {
118
+ "path": "color.background.accent.magenta.bold",
119
+ "state": "deprecated",
120
+ "replacement": "color.background.accent.magenta.subtle"
121
+ }, {
122
+ "path": "color.background.brand.[default].[default]",
123
+ "state": "deprecated",
124
+ "replacement": "color.background.selected.[default].[default]"
125
+ }, {
126
+ "path": "color.background.brand.[default].hovered",
127
+ "state": "deprecated",
128
+ "replacement": "color.background.selected.[default].hovered"
129
+ }, {
130
+ "path": "color.background.brand.[default].pressed",
131
+ "state": "deprecated",
132
+ "replacement": "color.background.selected.[default].pressed"
133
+ }, {
134
+ "path": "color.background.selected.resting",
135
+ "state": "deprecated",
136
+ "replacement": "color.background.selected.[default].[default]"
137
+ }, {
138
+ "path": "color.background.selected.hover",
139
+ "state": "deprecated",
140
+ "replacement": "color.background.selected.[default].hovered"
61
141
  }, {
62
142
  "path": "color.background.blanket",
63
143
  "state": "deprecated",
@@ -146,18 +226,6 @@ var renameMapper = [{
146
226
  "path": "color.background.overlay",
147
227
  "state": "deprecated",
148
228
  "replacement": "elevation.surface.overlay"
149
- }, {
150
- "path": "color.background.selected.resting",
151
- "state": "deprecated",
152
- "replacement": "color.background.brand.[default].[default]"
153
- }, {
154
- "path": "color.background.selected.hover",
155
- "state": "deprecated",
156
- "replacement": "color.background.brand.[default].hovered"
157
- }, {
158
- "path": "color.background.selected.pressed",
159
- "state": "deprecated",
160
- "replacement": "color.background.brand.[default].pressed"
161
229
  }, {
162
230
  "path": "color.background.subtleBorderedNeutral.pressed",
163
231
  "state": "deprecated",
@@ -169,15 +237,15 @@ var renameMapper = [{
169
237
  }, {
170
238
  "path": "color.background.subtleBrand.hover",
171
239
  "state": "deprecated",
172
- "replacement": "color.background.brand.[default].hovered"
240
+ "replacement": "color.background.selected.[default].hovered"
173
241
  }, {
174
242
  "path": "color.background.subtleBrand.pressed",
175
243
  "state": "deprecated",
176
- "replacement": "color.background.brand.[default].pressed"
244
+ "replacement": "color.background.selected.[default].pressed"
177
245
  }, {
178
246
  "path": "color.background.subtleBrand.resting",
179
247
  "state": "deprecated",
180
- "replacement": "color.background.brand.[default].[default]"
248
+ "replacement": "color.background.selected.[default].[default]"
181
249
  }, {
182
250
  "path": "color.background.subtleDanger.hover",
183
251
  "state": "deprecated",
@@ -253,55 +321,55 @@ var renameMapper = [{
253
321
  }, {
254
322
  "path": "color.accent.boldBlue",
255
323
  "state": "deprecated",
256
- "replacement": "color.background.accent.blue.bold"
324
+ "replacement": "color.background.accent.blue.bolder"
257
325
  }, {
258
326
  "path": "color.accent.boldGreen",
259
327
  "state": "deprecated",
260
- "replacement": "color.background.accent.green.bold"
328
+ "replacement": "color.background.accent.green.bolder"
261
329
  }, {
262
330
  "path": "color.accent.boldOrange",
263
331
  "state": "deprecated",
264
- "replacement": "color.background.accent.orange.bold"
332
+ "replacement": "color.background.accent.orange.bolder"
265
333
  }, {
266
334
  "path": "color.accent.boldPurple",
267
335
  "state": "deprecated",
268
- "replacement": "color.background.accent.purple.bold"
336
+ "replacement": "color.background.accent.purple.bolder"
269
337
  }, {
270
338
  "path": "color.accent.boldRed",
271
339
  "state": "deprecated",
272
- "replacement": "color.background.accent.red.bold"
340
+ "replacement": "color.background.accent.red.bolder"
273
341
  }, {
274
342
  "path": "color.accent.boldTeal",
275
343
  "state": "deprecated",
276
- "replacement": "color.background.accent.teal.bold"
344
+ "replacement": "color.background.accent.teal.bolder"
277
345
  }, {
278
346
  "path": "color.accent.subtleBlue",
279
347
  "state": "deprecated",
280
- "replacement": "color.background.accent.blue.[default]"
348
+ "replacement": "color.background.accent.blue.subtler"
281
349
  }, {
282
350
  "path": "color.accent.subtleGreen",
283
351
  "state": "deprecated",
284
- "replacement": "color.background.accent.green.[default]"
352
+ "replacement": "color.background.accent.green.subtler"
285
353
  }, {
286
354
  "path": "color.accent.subtleMagenta",
287
355
  "state": "deprecated",
288
- "replacement": "color.background.accent.magenta.[default]"
356
+ "replacement": "color.background.accent.magenta.subtler"
289
357
  }, {
290
358
  "path": "color.accent.subtleOrange",
291
359
  "state": "deprecated",
292
- "replacement": "color.background.accent.orange.[default]"
360
+ "replacement": "color.background.accent.orange.subtler"
293
361
  }, {
294
362
  "path": "color.accent.subtlePurple",
295
363
  "state": "deprecated",
296
- "replacement": "color.background.accent.purple.[default]"
364
+ "replacement": "color.background.accent.purple.subtler"
297
365
  }, {
298
366
  "path": "color.accent.subtleRed",
299
367
  "state": "deprecated",
300
- "replacement": "color.background.accent.red.[default]"
368
+ "replacement": "color.background.accent.red.subtler"
301
369
  }, {
302
370
  "path": "color.accent.subtleTeal",
303
371
  "state": "deprecated",
304
- "replacement": "color.background.accent.teal.[default]"
372
+ "replacement": "color.background.accent.teal.subtler"
305
373
  }, {
306
374
  "path": "color.iconBorder.brand",
307
375
  "state": "deprecated",