@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.
- package/CHANGELOG.md +64 -0
- package/css/atlassian-dark.css +55 -8
- package/css/atlassian-light.css +54 -7
- package/dist/cjs/artifacts/rename-mapping.js +100 -32
- package/dist/cjs/artifacts/token-default-values.js +54 -7
- package/dist/cjs/artifacts/token-names.js +54 -7
- package/dist/cjs/artifacts/tokens-raw/atlassian-dark.js +1173 -246
- package/dist/cjs/artifacts/tokens-raw/atlassian-light.js +1151 -224
- package/dist/cjs/figma/synchronize-figma-tokens.js +34 -9
- package/dist/cjs/get-token.js +1 -1
- package/dist/cjs/tokens/atlassian-dark/color/accent.js +120 -32
- package/dist/cjs/tokens/atlassian-dark/color/background.js +16 -3
- package/dist/cjs/tokens/atlassian-dark/color/border.js +3 -0
- package/dist/cjs/tokens/atlassian-dark/color/icon.js +3 -0
- package/dist/cjs/tokens/atlassian-dark/color/text.js +3 -0
- package/dist/cjs/tokens/atlassian-dark/deprecated/deprecated.js +79 -6
- package/dist/cjs/tokens/atlassian-dark/elevation/surface.js +1 -1
- package/dist/cjs/tokens/atlassian-light/color/accent.js +112 -24
- package/dist/cjs/tokens/atlassian-light/color/background.js +13 -0
- package/dist/cjs/tokens/atlassian-light/color/border.js +3 -0
- package/dist/cjs/tokens/atlassian-light/color/icon.js +3 -0
- package/dist/cjs/tokens/atlassian-light/color/text.js +3 -0
- package/dist/cjs/tokens/atlassian-light/deprecated/deprecated.js +79 -6
- package/dist/cjs/tokens/default/color/accent.js +234 -50
- package/dist/cjs/tokens/default/color/background.js +30 -5
- package/dist/cjs/tokens/default/color/border.js +7 -0
- package/dist/cjs/tokens/default/color/icon.js +7 -0
- package/dist/cjs/tokens/default/color/text.js +7 -0
- package/dist/cjs/tokens/default/deprecated/deprecated.js +192 -34
- package/dist/cjs/tokens/palette.js +6 -0
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/artifacts/rename-mapping.js +100 -32
- package/dist/es2019/artifacts/token-default-values.js +54 -7
- package/dist/es2019/artifacts/token-names.js +54 -7
- package/dist/es2019/artifacts/tokens-raw/atlassian-dark.js +1173 -246
- package/dist/es2019/artifacts/tokens-raw/atlassian-light.js +1151 -224
- package/dist/es2019/figma/synchronize-figma-tokens.js +32 -9
- package/dist/es2019/get-token.js +1 -1
- package/dist/es2019/tokens/atlassian-dark/color/accent.js +120 -32
- package/dist/es2019/tokens/atlassian-dark/color/background.js +16 -3
- package/dist/es2019/tokens/atlassian-dark/color/border.js +3 -0
- package/dist/es2019/tokens/atlassian-dark/color/icon.js +3 -0
- package/dist/es2019/tokens/atlassian-dark/color/text.js +3 -0
- package/dist/es2019/tokens/atlassian-dark/deprecated/deprecated.js +79 -6
- package/dist/es2019/tokens/atlassian-dark/elevation/surface.js +1 -1
- package/dist/es2019/tokens/atlassian-light/color/accent.js +112 -24
- package/dist/es2019/tokens/atlassian-light/color/background.js +13 -0
- package/dist/es2019/tokens/atlassian-light/color/border.js +3 -0
- package/dist/es2019/tokens/atlassian-light/color/icon.js +3 -0
- package/dist/es2019/tokens/atlassian-light/color/text.js +3 -0
- package/dist/es2019/tokens/atlassian-light/deprecated/deprecated.js +79 -6
- package/dist/es2019/tokens/default/color/accent.js +234 -50
- package/dist/es2019/tokens/default/color/background.js +30 -5
- package/dist/es2019/tokens/default/color/border.js +7 -0
- package/dist/es2019/tokens/default/color/icon.js +7 -0
- package/dist/es2019/tokens/default/color/text.js +7 -0
- package/dist/es2019/tokens/default/deprecated/deprecated.js +192 -34
- package/dist/es2019/tokens/palette.js +6 -0
- package/dist/es2019/version.json +1 -1
- package/dist/esm/artifacts/rename-mapping.js +100 -32
- package/dist/esm/artifacts/token-default-values.js +54 -7
- package/dist/esm/artifacts/token-names.js +54 -7
- package/dist/esm/artifacts/tokens-raw/atlassian-dark.js +1173 -246
- package/dist/esm/artifacts/tokens-raw/atlassian-light.js +1151 -224
- package/dist/esm/figma/synchronize-figma-tokens.js +34 -9
- package/dist/esm/get-token.js +1 -1
- package/dist/esm/tokens/atlassian-dark/color/accent.js +120 -32
- package/dist/esm/tokens/atlassian-dark/color/background.js +16 -3
- package/dist/esm/tokens/atlassian-dark/color/border.js +3 -0
- package/dist/esm/tokens/atlassian-dark/color/icon.js +3 -0
- package/dist/esm/tokens/atlassian-dark/color/text.js +3 -0
- package/dist/esm/tokens/atlassian-dark/deprecated/deprecated.js +79 -6
- package/dist/esm/tokens/atlassian-dark/elevation/surface.js +1 -1
- package/dist/esm/tokens/atlassian-light/color/accent.js +112 -24
- package/dist/esm/tokens/atlassian-light/color/background.js +13 -0
- package/dist/esm/tokens/atlassian-light/color/border.js +3 -0
- package/dist/esm/tokens/atlassian-light/color/icon.js +3 -0
- package/dist/esm/tokens/atlassian-light/color/text.js +3 -0
- package/dist/esm/tokens/atlassian-light/deprecated/deprecated.js +79 -6
- package/dist/esm/tokens/default/color/accent.js +234 -50
- package/dist/esm/tokens/default/color/background.js +30 -5
- package/dist/esm/tokens/default/color/border.js +7 -0
- package/dist/esm/tokens/default/color/icon.js +7 -0
- package/dist/esm/tokens/default/color/text.js +7 -0
- package/dist/esm/tokens/default/deprecated/deprecated.js +192 -34
- package/dist/esm/tokens/palette.js +6 -0
- package/dist/esm/version.json +1 -1
- package/dist/types/artifacts/token-default-values.d.ts +54 -7
- package/dist/types/artifacts/token-names.d.ts +108 -14
- package/dist/types/artifacts/types-internal.d.ts +1 -1
- package/dist/types/artifacts/types.d.ts +1 -1
- package/dist/types/figma/synchronize-figma-tokens.d.ts +9 -1
- package/dist/types/tokens/default/utility/utility.d.ts +10 -10
- package/dist/types/types.d.ts +116 -26
- 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
|
package/css/atlassian-dark.css
CHANGED
|
@@ -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: #
|
|
264
|
+
--ds-surface-sunken: #101214;
|
|
218
265
|
--ds-surface-raised: #1D2125;
|
|
219
266
|
--ds-surface-overlay: #22272B;
|
|
220
267
|
--ds-UNSAFE_util-transparent: transparent;
|
package/css/atlassian-light.css
CHANGED
|
@@ -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.
|
|
240
|
+
"replacement": "color.background.selected.[default].hovered"
|
|
173
241
|
}, {
|
|
174
242
|
"path": "color.background.subtleBrand.pressed",
|
|
175
243
|
"state": "deprecated",
|
|
176
|
-
"replacement": "color.background.
|
|
244
|
+
"replacement": "color.background.selected.[default].pressed"
|
|
177
245
|
}, {
|
|
178
246
|
"path": "color.background.subtleBrand.resting",
|
|
179
247
|
"state": "deprecated",
|
|
180
|
-
"replacement": "color.background.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
372
|
+
"replacement": "color.background.accent.teal.subtler"
|
|
305
373
|
}, {
|
|
306
374
|
"path": "color.iconBorder.brand",
|
|
307
375
|
"state": "deprecated",
|