@navikt/ds-tokens 5.4.0 → 5.5.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/dist/tokens-cjs.js +95 -95
- package/dist/tokens.css +76 -76
- package/dist/tokens.d.ts +95 -95
- package/dist/tokens.js +95 -95
- package/dist/tokens.less +95 -95
- package/dist/tokens.scss +95 -95
- package/package.json +3 -3
- package/src/border.json +6 -8
- package/src/colors-bg.json +10 -0
- package/src/colors-border-stateful.json +7 -0
- package/src/colors-border.json +58 -0
- package/src/colors-icon.json +61 -0
- package/src/colors-surface-stateful.json +58 -0
- package/src/colors-surface.json +109 -0
- package/src/colors-text.json +55 -0
- package/src/shadow-stateful.json +12 -0
- package/src/shadow.json +0 -6
- package/src/semantic-colors.json +0 -346
package/dist/tokens.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Wed, 13 Sep 2023 13:01:01 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
export const ABreakpointXs = "0";
|
|
@@ -43,10 +43,12 @@ export const ABorderRadiusMedium = "4px";
|
|
|
43
43
|
export const ABorderRadiusLarge = "8px";
|
|
44
44
|
export const ABorderRadiusXlarge = "12px";
|
|
45
45
|
export const ABorderRadiusFull = "9999px";
|
|
46
|
+
export const ABgDefault = "rgba(255, 255, 255, 1)";
|
|
47
|
+
export const ABgSubtle = "rgba(236, 238, 240, 1)";
|
|
48
|
+
export const ABorderSubtleHover = "rgba(5, 23, 51, 0.34)";
|
|
46
49
|
export const ABorderDefault = "rgba(2, 20, 49, 0.49)";
|
|
47
50
|
export const ABorderStrong = "rgba(1, 11, 24, 0.68)";
|
|
48
51
|
export const ABorderDivider = "rgba(7, 26, 54, 0.21)";
|
|
49
|
-
export const ABorderSubtleHover = "rgba(5, 23, 51, 0.34)";
|
|
50
52
|
export const ABorderSubtle = "rgba(7, 26, 54, 0.21)";
|
|
51
53
|
export const ABorderActionSelected = "rgba(0, 69, 156, 1)";
|
|
52
54
|
export const ABorderAction = "rgba(0, 103, 197, 1)";
|
|
@@ -62,6 +64,95 @@ export const ABorderOnInvertedSubtle = "rgba(82, 89, 98, 1)";
|
|
|
62
64
|
export const ABorderAlt1 = "rgba(130, 105, 162, 1)";
|
|
63
65
|
export const ABorderAlt2 = "rgba(127, 137, 0, 1)";
|
|
64
66
|
export const ABorderAlt3 = "rgba(0, 91, 130, 1)";
|
|
67
|
+
export const AIconDefault = "rgba(35, 38, 42, 1)";
|
|
68
|
+
export const AIconSubtle = "rgba(1, 11, 24, 0.68)";
|
|
69
|
+
export const AIconActionSelected = "rgba(0, 69, 156, 1)";
|
|
70
|
+
export const AIconActionOnActionSubtle = "rgba(0, 86, 180, 1)";
|
|
71
|
+
export const AIconAction = "rgba(0, 103, 197, 1)";
|
|
72
|
+
export const AIconSuccess = "rgba(6, 137, 58, 1)";
|
|
73
|
+
export const AIconDanger = "rgba(195, 0, 0, 1)";
|
|
74
|
+
export const AIconWarning = "rgba(199, 115, 0, 1)";
|
|
75
|
+
export const AIconInfo = "rgba(35, 107, 125, 1)";
|
|
76
|
+
export const AIconAlt1 = "rgba(99, 70, 137, 1)";
|
|
77
|
+
export const AIconAlt2 = "rgba(127, 137, 0, 1)";
|
|
78
|
+
export const AIconAlt3 = "rgba(0, 91, 130, 1)";
|
|
79
|
+
export const AIconOnNeutral = "rgba(255, 255, 255, 1)";
|
|
80
|
+
export const AIconOnInverted = "rgba(255, 255, 255, 1)";
|
|
81
|
+
export const AIconOnAction = "rgba(255, 255, 255, 1)";
|
|
82
|
+
export const AIconOnSuccess = "rgba(255, 255, 255, 1)";
|
|
83
|
+
export const AIconOnDanger = "rgba(255, 255, 255, 1)";
|
|
84
|
+
export const AIconOnWarning = "rgba(35, 38, 42, 1)";
|
|
85
|
+
export const AIconOnInfo = "rgba(35, 38, 42, 1)";
|
|
86
|
+
export const ASurfaceHover = "rgba(18, 43, 68, 0.08)";
|
|
87
|
+
export const ASurfaceActive = "rgba(17, 41, 64, 0.13)";
|
|
88
|
+
export const ASurfaceInvertedHover = "rgba(66, 71, 79, 1)";
|
|
89
|
+
export const ASurfaceInvertedActive = "rgba(82, 89, 98, 1)";
|
|
90
|
+
export const ASurfaceActionSubtleHover = "rgba(204, 225, 255, 1)";
|
|
91
|
+
export const ASurfaceActionHover = "rgba(0, 86, 180, 1)";
|
|
92
|
+
export const ASurfaceActionActive = "rgba(0, 69, 156, 1)";
|
|
93
|
+
export const ASurfaceActionSelectedHover = "rgba(0, 52, 125, 1)";
|
|
94
|
+
export const ASurfaceNeutralSubtleHover = "rgba(17, 41, 64, 0.13)";
|
|
95
|
+
export const ASurfaceNeutralActive = "rgba(35, 38, 42, 1)";
|
|
96
|
+
export const ASurfaceNeutralHover = "rgba(66, 71, 79, 1)";
|
|
97
|
+
export const ASurfaceSuccessSubtleHover = "rgba(153, 222, 173, 1)";
|
|
98
|
+
export const ASurfaceSuccessHover = "rgba(0, 124, 46, 1)";
|
|
99
|
+
export const ASurfaceDangerSubtleHover = "rgba(246, 130, 130, 1)";
|
|
100
|
+
export const ASurfaceDangerHover = "rgba(173, 0, 0, 1)";
|
|
101
|
+
export const ASurfaceDangerActive = "rgba(140, 0, 0, 1)";
|
|
102
|
+
export const ASurfaceWarningSubtleHover = "rgba(255, 215, 153, 1)";
|
|
103
|
+
export const ASurfaceInfoSubtleHover = "rgba(181, 241, 255, 1)";
|
|
104
|
+
export const ASurfaceDefault = "rgba(255, 255, 255, 1)";
|
|
105
|
+
export const ASurfaceSelected = "rgba(230, 240, 255, 1)";
|
|
106
|
+
export const ASurfaceSubtle = "rgba(242, 243, 245, 1)";
|
|
107
|
+
export const ASurfaceTransparent = "rgba(255, 255, 255, 0)";
|
|
108
|
+
export const ASurfaceBackdrop = "rgba(2, 20, 49, 0.49)";
|
|
109
|
+
export const ASurfaceInverted = "rgba(35, 38, 42, 1)";
|
|
110
|
+
export const ASurfaceActionSubtle = "rgba(230, 240, 255, 1)";
|
|
111
|
+
export const ASurfaceActionSelected = "rgba(0, 69, 156, 1)";
|
|
112
|
+
export const ASurfaceAction = "rgba(0, 103, 197, 1)";
|
|
113
|
+
export const ASurfaceNeutralSubtle = "rgba(18, 43, 68, 0.08)";
|
|
114
|
+
export const ASurfaceNeutralModerate = "rgba(17, 41, 64, 0.13)";
|
|
115
|
+
export const ASurfaceNeutralSelected = "rgba(35, 38, 42, 1)";
|
|
116
|
+
export const ASurfaceNeutral = "rgba(82, 89, 98, 1)";
|
|
117
|
+
export const ASurfaceSuccessSubtle = "rgba(204, 241, 214, 1)";
|
|
118
|
+
export const ASurfaceSuccessModerate = "rgba(153, 222, 173, 1)";
|
|
119
|
+
export const ASurfaceSuccess = "rgba(6, 137, 58, 1)";
|
|
120
|
+
export const ASurfaceDangerSubtle = "rgba(255, 194, 194, 1)";
|
|
121
|
+
export const ASurfaceDangerModerate = "rgba(246, 130, 130, 1)";
|
|
122
|
+
export const ASurfaceDanger = "rgba(195, 0, 0, 1)";
|
|
123
|
+
export const ASurfaceWarningSubtle = "rgba(255, 236, 204, 1)";
|
|
124
|
+
export const ASurfaceWarningModerate = "rgba(255, 215, 153, 1)";
|
|
125
|
+
export const ASurfaceWarning = "rgba(255, 145, 0, 1)";
|
|
126
|
+
export const ASurfaceInfoSubtle = "rgba(216, 249, 255, 1)";
|
|
127
|
+
export const ASurfaceInfoModerate = "rgba(181, 241, 255, 1)";
|
|
128
|
+
export const ASurfaceInfo = "rgba(102, 203, 236, 1)";
|
|
129
|
+
export const ASurfaceAlt1Subtle = "rgba(224, 216, 233, 1)";
|
|
130
|
+
export const ASurfaceAlt1Moderate = "rgba(192, 178, 210, 1)";
|
|
131
|
+
export const ASurfaceAlt1 = "rgba(130, 105, 162, 1)";
|
|
132
|
+
export const ASurfaceAlt2Subtle = "rgba(249, 252, 204, 1)";
|
|
133
|
+
export const ASurfaceAlt2Moderate = "rgba(236, 243, 153, 1)";
|
|
134
|
+
export const ASurfaceAlt2 = "rgba(193, 203, 51, 1)";
|
|
135
|
+
export const ASurfaceAlt3Subtle = "rgba(204, 226, 240, 1)";
|
|
136
|
+
export const ASurfaceAlt3Moderate = "rgba(153, 196, 221, 1)";
|
|
137
|
+
export const ASurfaceAlt3Strong = "rgba(0, 52, 83, 1)";
|
|
138
|
+
export const ASurfaceAlt3 = "rgba(0, 91, 130, 1)";
|
|
139
|
+
export const ATextDefault = "rgba(35, 38, 42, 1)";
|
|
140
|
+
export const ATextSubtle = "rgba(1, 11, 24, 0.68)";
|
|
141
|
+
export const ATextVisited = "rgba(99, 70, 137, 1)";
|
|
142
|
+
export const ATextDanger = "rgba(195, 0, 0, 1)";
|
|
143
|
+
export const ATextActionSelected = "rgba(0, 69, 156, 1)";
|
|
144
|
+
export const ATextActionOnActionSubtle = "rgba(0, 86, 180, 1)";
|
|
145
|
+
export const ATextAction = "rgba(0, 103, 197, 1)";
|
|
146
|
+
export const ATextOnInverted = "rgba(255, 255, 255, 1)";
|
|
147
|
+
export const ATextOnNeutral = "rgba(255, 255, 255, 1)";
|
|
148
|
+
export const ATextOnAction = "rgba(255, 255, 255, 1)";
|
|
149
|
+
export const ATextOnSuccess = "rgba(255, 255, 255, 1)";
|
|
150
|
+
export const ATextOnDanger = "rgba(255, 255, 255, 1)";
|
|
151
|
+
export const ATextOnWarning = "rgba(35, 38, 42, 1)";
|
|
152
|
+
export const ATextOnInfo = "rgba(35, 38, 42, 1)";
|
|
153
|
+
export const ATextOnAlt1 = "rgba(255, 255, 255, 1)";
|
|
154
|
+
export const ATextOnAlt2 = "rgba(35, 38, 42, 1)";
|
|
155
|
+
export const ATextOnAlt3 = "rgba(255, 255, 255, 1)";
|
|
65
156
|
export const ADataSurface1 = "rgba(51, 134, 224, 1)";
|
|
66
157
|
export const ADataSurface1Subtle = "rgba(204, 225, 255, 1)";
|
|
67
158
|
export const ADataSurface2 = "rgba(0, 91, 130, 1)";
|
|
@@ -183,104 +274,13 @@ export const APurple600 = "rgba(82, 56, 116, 1)";
|
|
|
183
274
|
export const APurple700 = "rgba(65, 43, 93, 1)";
|
|
184
275
|
export const APurple800 = "rgba(48, 31, 70, 1)";
|
|
185
276
|
export const APurple900 = "rgba(31, 20, 47, 1)";
|
|
186
|
-
export const
|
|
187
|
-
export const
|
|
188
|
-
export const ATextVisited = "rgba(99, 70, 137, 1)";
|
|
189
|
-
export const ATextDanger = "rgba(195, 0, 0, 1)";
|
|
190
|
-
export const ATextActionSelected = "rgba(0, 69, 156, 1)";
|
|
191
|
-
export const ATextActionOnActionSubtle = "rgba(0, 86, 180, 1)";
|
|
192
|
-
export const ATextAction = "rgba(0, 103, 197, 1)";
|
|
193
|
-
export const ATextOnInverted = "rgba(255, 255, 255, 1)";
|
|
194
|
-
export const ATextOnNeutral = "rgba(255, 255, 255, 1)";
|
|
195
|
-
export const ATextOnAction = "rgba(255, 255, 255, 1)";
|
|
196
|
-
export const ATextOnSuccess = "rgba(255, 255, 255, 1)";
|
|
197
|
-
export const ATextOnDanger = "rgba(255, 255, 255, 1)";
|
|
198
|
-
export const ATextOnWarning = "rgba(35, 38, 42, 1)";
|
|
199
|
-
export const ATextOnInfo = "rgba(35, 38, 42, 1)";
|
|
200
|
-
export const ATextOnAlt1 = "rgba(255, 255, 255, 1)";
|
|
201
|
-
export const ATextOnAlt2 = "rgba(35, 38, 42, 1)";
|
|
202
|
-
export const ATextOnAlt3 = "rgba(255, 255, 255, 1)";
|
|
203
|
-
export const ABgDefault = "rgba(255, 255, 255, 1)";
|
|
204
|
-
export const ABgSubtle = "rgba(236, 238, 240, 1)";
|
|
205
|
-
export const ASurfaceDefault = "rgba(255, 255, 255, 1)";
|
|
206
|
-
export const ASurfaceHover = "rgba(18, 43, 68, 0.08)";
|
|
207
|
-
export const ASurfaceActive = "rgba(17, 41, 64, 0.13)";
|
|
208
|
-
export const ASurfaceSelected = "rgba(230, 240, 255, 1)";
|
|
209
|
-
export const ASurfaceSubtle = "rgba(242, 243, 245, 1)";
|
|
210
|
-
export const ASurfaceTransparent = "rgba(255, 255, 255, 0)";
|
|
211
|
-
export const ASurfaceBackdrop = "rgba(2, 20, 49, 0.49)";
|
|
212
|
-
export const ASurfaceInvertedHover = "rgba(66, 71, 79, 1)";
|
|
213
|
-
export const ASurfaceInvertedActive = "rgba(82, 89, 98, 1)";
|
|
214
|
-
export const ASurfaceInverted = "rgba(35, 38, 42, 1)";
|
|
215
|
-
export const ASurfaceActionSubtleHover = "rgba(204, 225, 255, 1)";
|
|
216
|
-
export const ASurfaceActionSubtle = "rgba(230, 240, 255, 1)";
|
|
217
|
-
export const ASurfaceActionHover = "rgba(0, 86, 180, 1)";
|
|
218
|
-
export const ASurfaceActionActive = "rgba(0, 69, 156, 1)";
|
|
219
|
-
export const ASurfaceActionSelectedHover = "rgba(0, 52, 125, 1)";
|
|
220
|
-
export const ASurfaceActionSelected = "rgba(0, 69, 156, 1)";
|
|
221
|
-
export const ASurfaceAction = "rgba(0, 103, 197, 1)";
|
|
222
|
-
export const ASurfaceNeutralSubtleHover = "rgba(17, 41, 64, 0.13)";
|
|
223
|
-
export const ASurfaceNeutralSubtle = "rgba(18, 43, 68, 0.08)";
|
|
224
|
-
export const ASurfaceNeutralModerate = "rgba(17, 41, 64, 0.13)";
|
|
225
|
-
export const ASurfaceNeutralHover = "rgba(66, 71, 79, 1)";
|
|
226
|
-
export const ASurfaceNeutralSelected = "rgba(35, 38, 42, 1)";
|
|
227
|
-
export const ASurfaceNeutralActive = "rgba(35, 38, 42, 1)";
|
|
228
|
-
export const ASurfaceNeutral = "rgba(82, 89, 98, 1)";
|
|
229
|
-
export const ASurfaceSuccessSubtleHover = "rgba(153, 222, 173, 1)";
|
|
230
|
-
export const ASurfaceSuccessSubtle = "rgba(204, 241, 214, 1)";
|
|
231
|
-
export const ASurfaceSuccessModerate = "rgba(153, 222, 173, 1)";
|
|
232
|
-
export const ASurfaceSuccess = "rgba(6, 137, 58, 1)";
|
|
233
|
-
export const ASurfaceSuccessHover = "rgba(0, 124, 46, 1)";
|
|
234
|
-
export const ASurfaceDangerSubtleHover = "rgba(246, 130, 130, 1)";
|
|
235
|
-
export const ASurfaceDangerSubtle = "rgba(255, 194, 194, 1)";
|
|
236
|
-
export const ASurfaceDangerModerate = "rgba(246, 130, 130, 1)";
|
|
237
|
-
export const ASurfaceDangerHover = "rgba(173, 0, 0, 1)";
|
|
238
|
-
export const ASurfaceDangerActive = "rgba(140, 0, 0, 1)";
|
|
239
|
-
export const ASurfaceDanger = "rgba(195, 0, 0, 1)";
|
|
240
|
-
export const ASurfaceWarningSubtleHover = "rgba(255, 215, 153, 1)";
|
|
241
|
-
export const ASurfaceWarningSubtle = "rgba(255, 236, 204, 1)";
|
|
242
|
-
export const ASurfaceWarningModerate = "rgba(255, 215, 153, 1)";
|
|
243
|
-
export const ASurfaceWarning = "rgba(255, 145, 0, 1)";
|
|
244
|
-
export const ASurfaceInfoSubtleHover = "rgba(181, 241, 255, 1)";
|
|
245
|
-
export const ASurfaceInfoSubtle = "rgba(216, 249, 255, 1)";
|
|
246
|
-
export const ASurfaceInfoModerate = "rgba(181, 241, 255, 1)";
|
|
247
|
-
export const ASurfaceInfo = "rgba(102, 203, 236, 1)";
|
|
248
|
-
export const ASurfaceAlt1Subtle = "rgba(224, 216, 233, 1)";
|
|
249
|
-
export const ASurfaceAlt1Moderate = "rgba(192, 178, 210, 1)";
|
|
250
|
-
export const ASurfaceAlt1 = "rgba(130, 105, 162, 1)";
|
|
251
|
-
export const ASurfaceAlt2Subtle = "rgba(249, 252, 204, 1)";
|
|
252
|
-
export const ASurfaceAlt2Moderate = "rgba(236, 243, 153, 1)";
|
|
253
|
-
export const ASurfaceAlt2 = "rgba(193, 203, 51, 1)";
|
|
254
|
-
export const ASurfaceAlt3Subtle = "rgba(204, 226, 240, 1)";
|
|
255
|
-
export const ASurfaceAlt3Moderate = "rgba(153, 196, 221, 1)";
|
|
256
|
-
export const ASurfaceAlt3Strong = "rgba(0, 52, 83, 1)";
|
|
257
|
-
export const ASurfaceAlt3 = "rgba(0, 91, 130, 1)";
|
|
258
|
-
export const AIconDefault = "rgba(35, 38, 42, 1)";
|
|
259
|
-
export const AIconSubtle = "rgba(1, 11, 24, 0.68)";
|
|
260
|
-
export const AIconActionSelected = "rgba(0, 69, 156, 1)";
|
|
261
|
-
export const AIconActionOnActionSubtle = "rgba(0, 86, 180, 1)";
|
|
262
|
-
export const AIconAction = "rgba(0, 103, 197, 1)";
|
|
263
|
-
export const AIconSuccess = "rgba(6, 137, 58, 1)";
|
|
264
|
-
export const AIconDanger = "rgba(195, 0, 0, 1)";
|
|
265
|
-
export const AIconWarning = "rgba(199, 115, 0, 1)";
|
|
266
|
-
export const AIconInfo = "rgba(35, 107, 125, 1)";
|
|
267
|
-
export const AIconAlt1 = "rgba(99, 70, 137, 1)";
|
|
268
|
-
export const AIconAlt2 = "rgba(127, 137, 0, 1)";
|
|
269
|
-
export const AIconAlt3 = "rgba(0, 91, 130, 1)";
|
|
270
|
-
export const AIconOnNeutral = "rgba(255, 255, 255, 1)";
|
|
271
|
-
export const AIconOnInverted = "rgba(255, 255, 255, 1)";
|
|
272
|
-
export const AIconOnAction = "rgba(255, 255, 255, 1)";
|
|
273
|
-
export const AIconOnSuccess = "rgba(255, 255, 255, 1)";
|
|
274
|
-
export const AIconOnDanger = "rgba(255, 255, 255, 1)";
|
|
275
|
-
export const AIconOnWarning = "rgba(35, 38, 42, 1)";
|
|
276
|
-
export const AIconOnInfo = "rgba(35, 38, 42, 1)";
|
|
277
|
+
export const AShadowFocus = "0 0 0 3px rgba(0, 52, 125, 1)";
|
|
278
|
+
export const AShadowFocusInverted = "0 0 0 3px rgba(153, 195, 255, 1)";
|
|
277
279
|
export const AShadowXsmall = "0px 1px 3px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.20)";
|
|
278
280
|
export const AShadowSmall = "0px 3px 8px 0px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 0px 1px 0px rgba(0, 0, 0, 0.18)";
|
|
279
281
|
export const AShadowMedium = "0px 5px 12px 0px rgba(0, 0, 0, 0.13), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 0px 1px 0px rgba(0, 0, 0, 0.15)";
|
|
280
282
|
export const AShadowLarge = "0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 10px 16px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.12)";
|
|
281
283
|
export const AShadowXlarge = "0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 10px 24px 0px rgba(0, 0, 0, 0.18), 0px 0px 1px 0px rgba(0, 0, 0, 0.08)";
|
|
282
|
-
export const AShadowFocusInverted = "0 0 0 3px rgba(153, 195, 255, 1)";
|
|
283
|
-
export const AShadowFocus = "0 0 0 3px rgba(0, 52, 125, 1)";
|
|
284
284
|
export const ASpacing0 = "0";
|
|
285
285
|
export const ASpacing1 = "0.25rem";
|
|
286
286
|
export const ASpacing2 = "0.5rem";
|
package/dist/tokens.less
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Wed, 13 Sep 2023 13:01:01 GMT
|
|
4
4
|
|
|
5
5
|
@a-breakpoint-xs: 0;
|
|
6
6
|
@a-breakpoint-sm: 480px;
|
|
@@ -42,10 +42,12 @@
|
|
|
42
42
|
@a-border-radius-large: 8px;
|
|
43
43
|
@a-border-radius-xlarge: 12px;
|
|
44
44
|
@a-border-radius-full: 9999px;
|
|
45
|
+
@a-bg-default: rgba(255, 255, 255, 1);
|
|
46
|
+
@a-bg-subtle: rgba(236, 238, 240, 1);
|
|
47
|
+
@a-border-subtle-hover: rgba(5, 23, 51, 0.34);
|
|
45
48
|
@a-border-default: rgba(2, 20, 49, 0.49);
|
|
46
49
|
@a-border-strong: rgba(1, 11, 24, 0.68);
|
|
47
50
|
@a-border-divider: rgba(7, 26, 54, 0.21);
|
|
48
|
-
@a-border-subtle-hover: rgba(5, 23, 51, 0.34);
|
|
49
51
|
@a-border-subtle: rgba(7, 26, 54, 0.21);
|
|
50
52
|
@a-border-action-selected: rgba(0, 69, 156, 1);
|
|
51
53
|
@a-border-action: rgba(0, 103, 197, 1);
|
|
@@ -61,6 +63,95 @@
|
|
|
61
63
|
@a-border-alt-1: rgba(130, 105, 162, 1);
|
|
62
64
|
@a-border-alt-2: rgba(127, 137, 0, 1);
|
|
63
65
|
@a-border-alt-3: rgba(0, 91, 130, 1);
|
|
66
|
+
@a-icon-default: rgba(35, 38, 42, 1);
|
|
67
|
+
@a-icon-subtle: rgba(1, 11, 24, 0.68);
|
|
68
|
+
@a-icon-action-selected: rgba(0, 69, 156, 1);
|
|
69
|
+
@a-icon-action-on-action-subtle: rgba(0, 86, 180, 1);
|
|
70
|
+
@a-icon-action: rgba(0, 103, 197, 1);
|
|
71
|
+
@a-icon-success: rgba(6, 137, 58, 1);
|
|
72
|
+
@a-icon-danger: rgba(195, 0, 0, 1);
|
|
73
|
+
@a-icon-warning: rgba(199, 115, 0, 1);
|
|
74
|
+
@a-icon-info: rgba(35, 107, 125, 1);
|
|
75
|
+
@a-icon-alt-1: rgba(99, 70, 137, 1);
|
|
76
|
+
@a-icon-alt-2: rgba(127, 137, 0, 1);
|
|
77
|
+
@a-icon-alt-3: rgba(0, 91, 130, 1);
|
|
78
|
+
@a-icon-on-neutral: rgba(255, 255, 255, 1);
|
|
79
|
+
@a-icon-on-inverted: rgba(255, 255, 255, 1);
|
|
80
|
+
@a-icon-on-action: rgba(255, 255, 255, 1);
|
|
81
|
+
@a-icon-on-success: rgba(255, 255, 255, 1);
|
|
82
|
+
@a-icon-on-danger: rgba(255, 255, 255, 1);
|
|
83
|
+
@a-icon-on-warning: rgba(35, 38, 42, 1);
|
|
84
|
+
@a-icon-on-info: rgba(35, 38, 42, 1);
|
|
85
|
+
@a-surface-hover: rgba(18, 43, 68, 0.08);
|
|
86
|
+
@a-surface-active: rgba(17, 41, 64, 0.13);
|
|
87
|
+
@a-surface-inverted-hover: rgba(66, 71, 79, 1);
|
|
88
|
+
@a-surface-inverted-active: rgba(82, 89, 98, 1);
|
|
89
|
+
@a-surface-action-subtle-hover: rgba(204, 225, 255, 1);
|
|
90
|
+
@a-surface-action-hover: rgba(0, 86, 180, 1);
|
|
91
|
+
@a-surface-action-active: rgba(0, 69, 156, 1);
|
|
92
|
+
@a-surface-action-selected-hover: rgba(0, 52, 125, 1);
|
|
93
|
+
@a-surface-neutral-subtle-hover: rgba(17, 41, 64, 0.13);
|
|
94
|
+
@a-surface-neutral-active: rgba(35, 38, 42, 1);
|
|
95
|
+
@a-surface-neutral-hover: rgba(66, 71, 79, 1);
|
|
96
|
+
@a-surface-success-subtle-hover: rgba(153, 222, 173, 1);
|
|
97
|
+
@a-surface-success-hover: rgba(0, 124, 46, 1);
|
|
98
|
+
@a-surface-danger-subtle-hover: rgba(246, 130, 130, 1);
|
|
99
|
+
@a-surface-danger-hover: rgba(173, 0, 0, 1);
|
|
100
|
+
@a-surface-danger-active: rgba(140, 0, 0, 1);
|
|
101
|
+
@a-surface-warning-subtle-hover: rgba(255, 215, 153, 1);
|
|
102
|
+
@a-surface-info-subtle-hover: rgba(181, 241, 255, 1);
|
|
103
|
+
@a-surface-default: rgba(255, 255, 255, 1);
|
|
104
|
+
@a-surface-selected: rgba(230, 240, 255, 1);
|
|
105
|
+
@a-surface-subtle: rgba(242, 243, 245, 1);
|
|
106
|
+
@a-surface-transparent: rgba(255, 255, 255, 0);
|
|
107
|
+
@a-surface-backdrop: rgba(2, 20, 49, 0.49);
|
|
108
|
+
@a-surface-inverted: rgba(35, 38, 42, 1);
|
|
109
|
+
@a-surface-action-subtle: rgba(230, 240, 255, 1);
|
|
110
|
+
@a-surface-action-selected: rgba(0, 69, 156, 1);
|
|
111
|
+
@a-surface-action: rgba(0, 103, 197, 1);
|
|
112
|
+
@a-surface-neutral-subtle: rgba(18, 43, 68, 0.08);
|
|
113
|
+
@a-surface-neutral-moderate: rgba(17, 41, 64, 0.13);
|
|
114
|
+
@a-surface-neutral-selected: rgba(35, 38, 42, 1);
|
|
115
|
+
@a-surface-neutral: rgba(82, 89, 98, 1);
|
|
116
|
+
@a-surface-success-subtle: rgba(204, 241, 214, 1);
|
|
117
|
+
@a-surface-success-moderate: rgba(153, 222, 173, 1);
|
|
118
|
+
@a-surface-success: rgba(6, 137, 58, 1);
|
|
119
|
+
@a-surface-danger-subtle: rgba(255, 194, 194, 1);
|
|
120
|
+
@a-surface-danger-moderate: rgba(246, 130, 130, 1);
|
|
121
|
+
@a-surface-danger: rgba(195, 0, 0, 1);
|
|
122
|
+
@a-surface-warning-subtle: rgba(255, 236, 204, 1);
|
|
123
|
+
@a-surface-warning-moderate: rgba(255, 215, 153, 1);
|
|
124
|
+
@a-surface-warning: rgba(255, 145, 0, 1);
|
|
125
|
+
@a-surface-info-subtle: rgba(216, 249, 255, 1);
|
|
126
|
+
@a-surface-info-moderate: rgba(181, 241, 255, 1);
|
|
127
|
+
@a-surface-info: rgba(102, 203, 236, 1);
|
|
128
|
+
@a-surface-alt-1-subtle: rgba(224, 216, 233, 1);
|
|
129
|
+
@a-surface-alt-1-moderate: rgba(192, 178, 210, 1);
|
|
130
|
+
@a-surface-alt-1: rgba(130, 105, 162, 1);
|
|
131
|
+
@a-surface-alt-2-subtle: rgba(249, 252, 204, 1);
|
|
132
|
+
@a-surface-alt-2-moderate: rgba(236, 243, 153, 1);
|
|
133
|
+
@a-surface-alt-2: rgba(193, 203, 51, 1);
|
|
134
|
+
@a-surface-alt-3-subtle: rgba(204, 226, 240, 1);
|
|
135
|
+
@a-surface-alt-3-moderate: rgba(153, 196, 221, 1);
|
|
136
|
+
@a-surface-alt-3-strong: rgba(0, 52, 83, 1);
|
|
137
|
+
@a-surface-alt-3: rgba(0, 91, 130, 1);
|
|
138
|
+
@a-text-default: rgba(35, 38, 42, 1);
|
|
139
|
+
@a-text-subtle: rgba(1, 11, 24, 0.68);
|
|
140
|
+
@a-text-visited: rgba(99, 70, 137, 1);
|
|
141
|
+
@a-text-danger: rgba(195, 0, 0, 1);
|
|
142
|
+
@a-text-action-selected: rgba(0, 69, 156, 1);
|
|
143
|
+
@a-text-action-on-action-subtle: rgba(0, 86, 180, 1);
|
|
144
|
+
@a-text-action: rgba(0, 103, 197, 1);
|
|
145
|
+
@a-text-on-inverted: rgba(255, 255, 255, 1);
|
|
146
|
+
@a-text-on-neutral: rgba(255, 255, 255, 1);
|
|
147
|
+
@a-text-on-action: rgba(255, 255, 255, 1);
|
|
148
|
+
@a-text-on-success: rgba(255, 255, 255, 1);
|
|
149
|
+
@a-text-on-danger: rgba(255, 255, 255, 1);
|
|
150
|
+
@a-text-on-warning: rgba(35, 38, 42, 1);
|
|
151
|
+
@a-text-on-info: rgba(35, 38, 42, 1);
|
|
152
|
+
@a-text-on-alt-1: rgba(255, 255, 255, 1);
|
|
153
|
+
@a-text-on-alt-2: rgba(35, 38, 42, 1);
|
|
154
|
+
@a-text-on-alt-3: rgba(255, 255, 255, 1);
|
|
64
155
|
@a-data-surface-1: rgba(51, 134, 224, 1);
|
|
65
156
|
@a-data-surface-1-subtle: rgba(204, 225, 255, 1);
|
|
66
157
|
@a-data-surface-2: rgba(0, 91, 130, 1);
|
|
@@ -182,104 +273,13 @@
|
|
|
182
273
|
@a-purple-700: rgba(65, 43, 93, 1);
|
|
183
274
|
@a-purple-800: rgba(48, 31, 70, 1);
|
|
184
275
|
@a-purple-900: rgba(31, 20, 47, 1);
|
|
185
|
-
@a-
|
|
186
|
-
@a-
|
|
187
|
-
@a-text-visited: rgba(99, 70, 137, 1);
|
|
188
|
-
@a-text-danger: rgba(195, 0, 0, 1);
|
|
189
|
-
@a-text-action-selected: rgba(0, 69, 156, 1);
|
|
190
|
-
@a-text-action-on-action-subtle: rgba(0, 86, 180, 1);
|
|
191
|
-
@a-text-action: rgba(0, 103, 197, 1);
|
|
192
|
-
@a-text-on-inverted: rgba(255, 255, 255, 1);
|
|
193
|
-
@a-text-on-neutral: rgba(255, 255, 255, 1);
|
|
194
|
-
@a-text-on-action: rgba(255, 255, 255, 1);
|
|
195
|
-
@a-text-on-success: rgba(255, 255, 255, 1);
|
|
196
|
-
@a-text-on-danger: rgba(255, 255, 255, 1);
|
|
197
|
-
@a-text-on-warning: rgba(35, 38, 42, 1);
|
|
198
|
-
@a-text-on-info: rgba(35, 38, 42, 1);
|
|
199
|
-
@a-text-on-alt-1: rgba(255, 255, 255, 1);
|
|
200
|
-
@a-text-on-alt-2: rgba(35, 38, 42, 1);
|
|
201
|
-
@a-text-on-alt-3: rgba(255, 255, 255, 1);
|
|
202
|
-
@a-bg-default: rgba(255, 255, 255, 1);
|
|
203
|
-
@a-bg-subtle: rgba(236, 238, 240, 1);
|
|
204
|
-
@a-surface-default: rgba(255, 255, 255, 1);
|
|
205
|
-
@a-surface-hover: rgba(18, 43, 68, 0.08);
|
|
206
|
-
@a-surface-active: rgba(17, 41, 64, 0.13);
|
|
207
|
-
@a-surface-selected: rgba(230, 240, 255, 1);
|
|
208
|
-
@a-surface-subtle: rgba(242, 243, 245, 1);
|
|
209
|
-
@a-surface-transparent: rgba(255, 255, 255, 0);
|
|
210
|
-
@a-surface-backdrop: rgba(2, 20, 49, 0.49);
|
|
211
|
-
@a-surface-inverted-hover: rgba(66, 71, 79, 1);
|
|
212
|
-
@a-surface-inverted-active: rgba(82, 89, 98, 1);
|
|
213
|
-
@a-surface-inverted: rgba(35, 38, 42, 1);
|
|
214
|
-
@a-surface-action-subtle-hover: rgba(204, 225, 255, 1);
|
|
215
|
-
@a-surface-action-subtle: rgba(230, 240, 255, 1);
|
|
216
|
-
@a-surface-action-hover: rgba(0, 86, 180, 1);
|
|
217
|
-
@a-surface-action-active: rgba(0, 69, 156, 1);
|
|
218
|
-
@a-surface-action-selected-hover: rgba(0, 52, 125, 1);
|
|
219
|
-
@a-surface-action-selected: rgba(0, 69, 156, 1);
|
|
220
|
-
@a-surface-action: rgba(0, 103, 197, 1);
|
|
221
|
-
@a-surface-neutral-subtle-hover: rgba(17, 41, 64, 0.13);
|
|
222
|
-
@a-surface-neutral-subtle: rgba(18, 43, 68, 0.08);
|
|
223
|
-
@a-surface-neutral-moderate: rgba(17, 41, 64, 0.13);
|
|
224
|
-
@a-surface-neutral-hover: rgba(66, 71, 79, 1);
|
|
225
|
-
@a-surface-neutral-selected: rgba(35, 38, 42, 1);
|
|
226
|
-
@a-surface-neutral-active: rgba(35, 38, 42, 1);
|
|
227
|
-
@a-surface-neutral: rgba(82, 89, 98, 1);
|
|
228
|
-
@a-surface-success-subtle-hover: rgba(153, 222, 173, 1);
|
|
229
|
-
@a-surface-success-subtle: rgba(204, 241, 214, 1);
|
|
230
|
-
@a-surface-success-moderate: rgba(153, 222, 173, 1);
|
|
231
|
-
@a-surface-success: rgba(6, 137, 58, 1);
|
|
232
|
-
@a-surface-success-hover: rgba(0, 124, 46, 1);
|
|
233
|
-
@a-surface-danger-subtle-hover: rgba(246, 130, 130, 1);
|
|
234
|
-
@a-surface-danger-subtle: rgba(255, 194, 194, 1);
|
|
235
|
-
@a-surface-danger-moderate: rgba(246, 130, 130, 1);
|
|
236
|
-
@a-surface-danger-hover: rgba(173, 0, 0, 1);
|
|
237
|
-
@a-surface-danger-active: rgba(140, 0, 0, 1);
|
|
238
|
-
@a-surface-danger: rgba(195, 0, 0, 1);
|
|
239
|
-
@a-surface-warning-subtle-hover: rgba(255, 215, 153, 1);
|
|
240
|
-
@a-surface-warning-subtle: rgba(255, 236, 204, 1);
|
|
241
|
-
@a-surface-warning-moderate: rgba(255, 215, 153, 1);
|
|
242
|
-
@a-surface-warning: rgba(255, 145, 0, 1);
|
|
243
|
-
@a-surface-info-subtle-hover: rgba(181, 241, 255, 1);
|
|
244
|
-
@a-surface-info-subtle: rgba(216, 249, 255, 1);
|
|
245
|
-
@a-surface-info-moderate: rgba(181, 241, 255, 1);
|
|
246
|
-
@a-surface-info: rgba(102, 203, 236, 1);
|
|
247
|
-
@a-surface-alt-1-subtle: rgba(224, 216, 233, 1);
|
|
248
|
-
@a-surface-alt-1-moderate: rgba(192, 178, 210, 1);
|
|
249
|
-
@a-surface-alt-1: rgba(130, 105, 162, 1);
|
|
250
|
-
@a-surface-alt-2-subtle: rgba(249, 252, 204, 1);
|
|
251
|
-
@a-surface-alt-2-moderate: rgba(236, 243, 153, 1);
|
|
252
|
-
@a-surface-alt-2: rgba(193, 203, 51, 1);
|
|
253
|
-
@a-surface-alt-3-subtle: rgba(204, 226, 240, 1);
|
|
254
|
-
@a-surface-alt-3-moderate: rgba(153, 196, 221, 1);
|
|
255
|
-
@a-surface-alt-3-strong: rgba(0, 52, 83, 1);
|
|
256
|
-
@a-surface-alt-3: rgba(0, 91, 130, 1);
|
|
257
|
-
@a-icon-default: rgba(35, 38, 42, 1);
|
|
258
|
-
@a-icon-subtle: rgba(1, 11, 24, 0.68);
|
|
259
|
-
@a-icon-action-selected: rgba(0, 69, 156, 1);
|
|
260
|
-
@a-icon-action-on-action-subtle: rgba(0, 86, 180, 1);
|
|
261
|
-
@a-icon-action: rgba(0, 103, 197, 1);
|
|
262
|
-
@a-icon-success: rgba(6, 137, 58, 1);
|
|
263
|
-
@a-icon-danger: rgba(195, 0, 0, 1);
|
|
264
|
-
@a-icon-warning: rgba(199, 115, 0, 1);
|
|
265
|
-
@a-icon-info: rgba(35, 107, 125, 1);
|
|
266
|
-
@a-icon-alt-1: rgba(99, 70, 137, 1);
|
|
267
|
-
@a-icon-alt-2: rgba(127, 137, 0, 1);
|
|
268
|
-
@a-icon-alt-3: rgba(0, 91, 130, 1);
|
|
269
|
-
@a-icon-on-neutral: rgba(255, 255, 255, 1);
|
|
270
|
-
@a-icon-on-inverted: rgba(255, 255, 255, 1);
|
|
271
|
-
@a-icon-on-action: rgba(255, 255, 255, 1);
|
|
272
|
-
@a-icon-on-success: rgba(255, 255, 255, 1);
|
|
273
|
-
@a-icon-on-danger: rgba(255, 255, 255, 1);
|
|
274
|
-
@a-icon-on-warning: rgba(35, 38, 42, 1);
|
|
275
|
-
@a-icon-on-info: rgba(35, 38, 42, 1);
|
|
276
|
+
@a-shadow-focus: 0 0 0 3px rgba(0, 52, 125, 1);
|
|
277
|
+
@a-shadow-focus-inverted: 0 0 0 3px rgba(153, 195, 255, 1);
|
|
276
278
|
@a-shadow-xsmall: 0px 1px 3px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.20);
|
|
277
279
|
@a-shadow-small: 0px 3px 8px 0px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 0px 1px 0px rgba(0, 0, 0, 0.18);
|
|
278
280
|
@a-shadow-medium: 0px 5px 12px 0px rgba(0, 0, 0, 0.13), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 0px 1px 0px rgba(0, 0, 0, 0.15);
|
|
279
281
|
@a-shadow-large: 0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 10px 16px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.12);
|
|
280
282
|
@a-shadow-xlarge: 0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 10px 24px 0px rgba(0, 0, 0, 0.18), 0px 0px 1px 0px rgba(0, 0, 0, 0.08);
|
|
281
|
-
@a-shadow-focus-inverted: 0 0 0 3px rgba(153, 195, 255, 1);
|
|
282
|
-
@a-shadow-focus: 0 0 0 3px rgba(0, 52, 125, 1);
|
|
283
283
|
@a-spacing-0: 0;
|
|
284
284
|
@a-spacing-1: 0.25rem;
|
|
285
285
|
@a-spacing-2: 0.5rem;
|
package/dist/tokens.scss
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Wed, 13 Sep 2023 13:01:01 GMT
|
|
4
4
|
|
|
5
5
|
$a-breakpoint-xs: 0;
|
|
6
6
|
$a-breakpoint-sm: 480px;
|
|
@@ -42,10 +42,12 @@ $a-border-radius-medium: 4px;
|
|
|
42
42
|
$a-border-radius-large: 8px;
|
|
43
43
|
$a-border-radius-xlarge: 12px;
|
|
44
44
|
$a-border-radius-full: 9999px;
|
|
45
|
+
$a-bg-default: rgba(255, 255, 255, 1);
|
|
46
|
+
$a-bg-subtle: rgba(236, 238, 240, 1);
|
|
47
|
+
$a-border-subtle-hover: rgba(5, 23, 51, 0.34);
|
|
45
48
|
$a-border-default: rgba(2, 20, 49, 0.49);
|
|
46
49
|
$a-border-strong: rgba(1, 11, 24, 0.68);
|
|
47
50
|
$a-border-divider: rgba(7, 26, 54, 0.21);
|
|
48
|
-
$a-border-subtle-hover: rgba(5, 23, 51, 0.34);
|
|
49
51
|
$a-border-subtle: rgba(7, 26, 54, 0.21);
|
|
50
52
|
$a-border-action-selected: rgba(0, 69, 156, 1);
|
|
51
53
|
$a-border-action: rgba(0, 103, 197, 1);
|
|
@@ -61,6 +63,95 @@ $a-border-on-inverted-subtle: rgba(82, 89, 98, 1);
|
|
|
61
63
|
$a-border-alt-1: rgba(130, 105, 162, 1);
|
|
62
64
|
$a-border-alt-2: rgba(127, 137, 0, 1);
|
|
63
65
|
$a-border-alt-3: rgba(0, 91, 130, 1);
|
|
66
|
+
$a-icon-default: rgba(35, 38, 42, 1);
|
|
67
|
+
$a-icon-subtle: rgba(1, 11, 24, 0.68);
|
|
68
|
+
$a-icon-action-selected: rgba(0, 69, 156, 1);
|
|
69
|
+
$a-icon-action-on-action-subtle: rgba(0, 86, 180, 1);
|
|
70
|
+
$a-icon-action: rgba(0, 103, 197, 1);
|
|
71
|
+
$a-icon-success: rgba(6, 137, 58, 1);
|
|
72
|
+
$a-icon-danger: rgba(195, 0, 0, 1);
|
|
73
|
+
$a-icon-warning: rgba(199, 115, 0, 1);
|
|
74
|
+
$a-icon-info: rgba(35, 107, 125, 1);
|
|
75
|
+
$a-icon-alt-1: rgba(99, 70, 137, 1);
|
|
76
|
+
$a-icon-alt-2: rgba(127, 137, 0, 1);
|
|
77
|
+
$a-icon-alt-3: rgba(0, 91, 130, 1);
|
|
78
|
+
$a-icon-on-neutral: rgba(255, 255, 255, 1);
|
|
79
|
+
$a-icon-on-inverted: rgba(255, 255, 255, 1);
|
|
80
|
+
$a-icon-on-action: rgba(255, 255, 255, 1);
|
|
81
|
+
$a-icon-on-success: rgba(255, 255, 255, 1);
|
|
82
|
+
$a-icon-on-danger: rgba(255, 255, 255, 1);
|
|
83
|
+
$a-icon-on-warning: rgba(35, 38, 42, 1);
|
|
84
|
+
$a-icon-on-info: rgba(35, 38, 42, 1);
|
|
85
|
+
$a-surface-hover: rgba(18, 43, 68, 0.08);
|
|
86
|
+
$a-surface-active: rgba(17, 41, 64, 0.13);
|
|
87
|
+
$a-surface-inverted-hover: rgba(66, 71, 79, 1);
|
|
88
|
+
$a-surface-inverted-active: rgba(82, 89, 98, 1);
|
|
89
|
+
$a-surface-action-subtle-hover: rgba(204, 225, 255, 1);
|
|
90
|
+
$a-surface-action-hover: rgba(0, 86, 180, 1);
|
|
91
|
+
$a-surface-action-active: rgba(0, 69, 156, 1);
|
|
92
|
+
$a-surface-action-selected-hover: rgba(0, 52, 125, 1);
|
|
93
|
+
$a-surface-neutral-subtle-hover: rgba(17, 41, 64, 0.13);
|
|
94
|
+
$a-surface-neutral-active: rgba(35, 38, 42, 1);
|
|
95
|
+
$a-surface-neutral-hover: rgba(66, 71, 79, 1);
|
|
96
|
+
$a-surface-success-subtle-hover: rgba(153, 222, 173, 1);
|
|
97
|
+
$a-surface-success-hover: rgba(0, 124, 46, 1);
|
|
98
|
+
$a-surface-danger-subtle-hover: rgba(246, 130, 130, 1);
|
|
99
|
+
$a-surface-danger-hover: rgba(173, 0, 0, 1);
|
|
100
|
+
$a-surface-danger-active: rgba(140, 0, 0, 1);
|
|
101
|
+
$a-surface-warning-subtle-hover: rgba(255, 215, 153, 1);
|
|
102
|
+
$a-surface-info-subtle-hover: rgba(181, 241, 255, 1);
|
|
103
|
+
$a-surface-default: rgba(255, 255, 255, 1);
|
|
104
|
+
$a-surface-selected: rgba(230, 240, 255, 1);
|
|
105
|
+
$a-surface-subtle: rgba(242, 243, 245, 1);
|
|
106
|
+
$a-surface-transparent: rgba(255, 255, 255, 0);
|
|
107
|
+
$a-surface-backdrop: rgba(2, 20, 49, 0.49);
|
|
108
|
+
$a-surface-inverted: rgba(35, 38, 42, 1);
|
|
109
|
+
$a-surface-action-subtle: rgba(230, 240, 255, 1);
|
|
110
|
+
$a-surface-action-selected: rgba(0, 69, 156, 1);
|
|
111
|
+
$a-surface-action: rgba(0, 103, 197, 1);
|
|
112
|
+
$a-surface-neutral-subtle: rgba(18, 43, 68, 0.08);
|
|
113
|
+
$a-surface-neutral-moderate: rgba(17, 41, 64, 0.13);
|
|
114
|
+
$a-surface-neutral-selected: rgba(35, 38, 42, 1);
|
|
115
|
+
$a-surface-neutral: rgba(82, 89, 98, 1);
|
|
116
|
+
$a-surface-success-subtle: rgba(204, 241, 214, 1);
|
|
117
|
+
$a-surface-success-moderate: rgba(153, 222, 173, 1);
|
|
118
|
+
$a-surface-success: rgba(6, 137, 58, 1);
|
|
119
|
+
$a-surface-danger-subtle: rgba(255, 194, 194, 1);
|
|
120
|
+
$a-surface-danger-moderate: rgba(246, 130, 130, 1);
|
|
121
|
+
$a-surface-danger: rgba(195, 0, 0, 1);
|
|
122
|
+
$a-surface-warning-subtle: rgba(255, 236, 204, 1);
|
|
123
|
+
$a-surface-warning-moderate: rgba(255, 215, 153, 1);
|
|
124
|
+
$a-surface-warning: rgba(255, 145, 0, 1);
|
|
125
|
+
$a-surface-info-subtle: rgba(216, 249, 255, 1);
|
|
126
|
+
$a-surface-info-moderate: rgba(181, 241, 255, 1);
|
|
127
|
+
$a-surface-info: rgba(102, 203, 236, 1);
|
|
128
|
+
$a-surface-alt-1-subtle: rgba(224, 216, 233, 1);
|
|
129
|
+
$a-surface-alt-1-moderate: rgba(192, 178, 210, 1);
|
|
130
|
+
$a-surface-alt-1: rgba(130, 105, 162, 1);
|
|
131
|
+
$a-surface-alt-2-subtle: rgba(249, 252, 204, 1);
|
|
132
|
+
$a-surface-alt-2-moderate: rgba(236, 243, 153, 1);
|
|
133
|
+
$a-surface-alt-2: rgba(193, 203, 51, 1);
|
|
134
|
+
$a-surface-alt-3-subtle: rgba(204, 226, 240, 1);
|
|
135
|
+
$a-surface-alt-3-moderate: rgba(153, 196, 221, 1);
|
|
136
|
+
$a-surface-alt-3-strong: rgba(0, 52, 83, 1);
|
|
137
|
+
$a-surface-alt-3: rgba(0, 91, 130, 1);
|
|
138
|
+
$a-text-default: rgba(35, 38, 42, 1);
|
|
139
|
+
$a-text-subtle: rgba(1, 11, 24, 0.68);
|
|
140
|
+
$a-text-visited: rgba(99, 70, 137, 1);
|
|
141
|
+
$a-text-danger: rgba(195, 0, 0, 1);
|
|
142
|
+
$a-text-action-selected: rgba(0, 69, 156, 1);
|
|
143
|
+
$a-text-action-on-action-subtle: rgba(0, 86, 180, 1);
|
|
144
|
+
$a-text-action: rgba(0, 103, 197, 1);
|
|
145
|
+
$a-text-on-inverted: rgba(255, 255, 255, 1);
|
|
146
|
+
$a-text-on-neutral: rgba(255, 255, 255, 1);
|
|
147
|
+
$a-text-on-action: rgba(255, 255, 255, 1);
|
|
148
|
+
$a-text-on-success: rgba(255, 255, 255, 1);
|
|
149
|
+
$a-text-on-danger: rgba(255, 255, 255, 1);
|
|
150
|
+
$a-text-on-warning: rgba(35, 38, 42, 1);
|
|
151
|
+
$a-text-on-info: rgba(35, 38, 42, 1);
|
|
152
|
+
$a-text-on-alt-1: rgba(255, 255, 255, 1);
|
|
153
|
+
$a-text-on-alt-2: rgba(35, 38, 42, 1);
|
|
154
|
+
$a-text-on-alt-3: rgba(255, 255, 255, 1);
|
|
64
155
|
$a-data-surface-1: rgba(51, 134, 224, 1);
|
|
65
156
|
$a-data-surface-1-subtle: rgba(204, 225, 255, 1);
|
|
66
157
|
$a-data-surface-2: rgba(0, 91, 130, 1);
|
|
@@ -182,104 +273,13 @@ $a-purple-600: rgba(82, 56, 116, 1);
|
|
|
182
273
|
$a-purple-700: rgba(65, 43, 93, 1);
|
|
183
274
|
$a-purple-800: rgba(48, 31, 70, 1);
|
|
184
275
|
$a-purple-900: rgba(31, 20, 47, 1);
|
|
185
|
-
$a-
|
|
186
|
-
$a-
|
|
187
|
-
$a-text-visited: rgba(99, 70, 137, 1);
|
|
188
|
-
$a-text-danger: rgba(195, 0, 0, 1);
|
|
189
|
-
$a-text-action-selected: rgba(0, 69, 156, 1);
|
|
190
|
-
$a-text-action-on-action-subtle: rgba(0, 86, 180, 1);
|
|
191
|
-
$a-text-action: rgba(0, 103, 197, 1);
|
|
192
|
-
$a-text-on-inverted: rgba(255, 255, 255, 1);
|
|
193
|
-
$a-text-on-neutral: rgba(255, 255, 255, 1);
|
|
194
|
-
$a-text-on-action: rgba(255, 255, 255, 1);
|
|
195
|
-
$a-text-on-success: rgba(255, 255, 255, 1);
|
|
196
|
-
$a-text-on-danger: rgba(255, 255, 255, 1);
|
|
197
|
-
$a-text-on-warning: rgba(35, 38, 42, 1);
|
|
198
|
-
$a-text-on-info: rgba(35, 38, 42, 1);
|
|
199
|
-
$a-text-on-alt-1: rgba(255, 255, 255, 1);
|
|
200
|
-
$a-text-on-alt-2: rgba(35, 38, 42, 1);
|
|
201
|
-
$a-text-on-alt-3: rgba(255, 255, 255, 1);
|
|
202
|
-
$a-bg-default: rgba(255, 255, 255, 1);
|
|
203
|
-
$a-bg-subtle: rgba(236, 238, 240, 1);
|
|
204
|
-
$a-surface-default: rgba(255, 255, 255, 1);
|
|
205
|
-
$a-surface-hover: rgba(18, 43, 68, 0.08);
|
|
206
|
-
$a-surface-active: rgba(17, 41, 64, 0.13);
|
|
207
|
-
$a-surface-selected: rgba(230, 240, 255, 1);
|
|
208
|
-
$a-surface-subtle: rgba(242, 243, 245, 1);
|
|
209
|
-
$a-surface-transparent: rgba(255, 255, 255, 0);
|
|
210
|
-
$a-surface-backdrop: rgba(2, 20, 49, 0.49);
|
|
211
|
-
$a-surface-inverted-hover: rgba(66, 71, 79, 1);
|
|
212
|
-
$a-surface-inverted-active: rgba(82, 89, 98, 1);
|
|
213
|
-
$a-surface-inverted: rgba(35, 38, 42, 1);
|
|
214
|
-
$a-surface-action-subtle-hover: rgba(204, 225, 255, 1);
|
|
215
|
-
$a-surface-action-subtle: rgba(230, 240, 255, 1);
|
|
216
|
-
$a-surface-action-hover: rgba(0, 86, 180, 1);
|
|
217
|
-
$a-surface-action-active: rgba(0, 69, 156, 1);
|
|
218
|
-
$a-surface-action-selected-hover: rgba(0, 52, 125, 1);
|
|
219
|
-
$a-surface-action-selected: rgba(0, 69, 156, 1);
|
|
220
|
-
$a-surface-action: rgba(0, 103, 197, 1);
|
|
221
|
-
$a-surface-neutral-subtle-hover: rgba(17, 41, 64, 0.13);
|
|
222
|
-
$a-surface-neutral-subtle: rgba(18, 43, 68, 0.08);
|
|
223
|
-
$a-surface-neutral-moderate: rgba(17, 41, 64, 0.13);
|
|
224
|
-
$a-surface-neutral-hover: rgba(66, 71, 79, 1);
|
|
225
|
-
$a-surface-neutral-selected: rgba(35, 38, 42, 1);
|
|
226
|
-
$a-surface-neutral-active: rgba(35, 38, 42, 1);
|
|
227
|
-
$a-surface-neutral: rgba(82, 89, 98, 1);
|
|
228
|
-
$a-surface-success-subtle-hover: rgba(153, 222, 173, 1);
|
|
229
|
-
$a-surface-success-subtle: rgba(204, 241, 214, 1);
|
|
230
|
-
$a-surface-success-moderate: rgba(153, 222, 173, 1);
|
|
231
|
-
$a-surface-success: rgba(6, 137, 58, 1);
|
|
232
|
-
$a-surface-success-hover: rgba(0, 124, 46, 1);
|
|
233
|
-
$a-surface-danger-subtle-hover: rgba(246, 130, 130, 1);
|
|
234
|
-
$a-surface-danger-subtle: rgba(255, 194, 194, 1);
|
|
235
|
-
$a-surface-danger-moderate: rgba(246, 130, 130, 1);
|
|
236
|
-
$a-surface-danger-hover: rgba(173, 0, 0, 1);
|
|
237
|
-
$a-surface-danger-active: rgba(140, 0, 0, 1);
|
|
238
|
-
$a-surface-danger: rgba(195, 0, 0, 1);
|
|
239
|
-
$a-surface-warning-subtle-hover: rgba(255, 215, 153, 1);
|
|
240
|
-
$a-surface-warning-subtle: rgba(255, 236, 204, 1);
|
|
241
|
-
$a-surface-warning-moderate: rgba(255, 215, 153, 1);
|
|
242
|
-
$a-surface-warning: rgba(255, 145, 0, 1);
|
|
243
|
-
$a-surface-info-subtle-hover: rgba(181, 241, 255, 1);
|
|
244
|
-
$a-surface-info-subtle: rgba(216, 249, 255, 1);
|
|
245
|
-
$a-surface-info-moderate: rgba(181, 241, 255, 1);
|
|
246
|
-
$a-surface-info: rgba(102, 203, 236, 1);
|
|
247
|
-
$a-surface-alt-1-subtle: rgba(224, 216, 233, 1);
|
|
248
|
-
$a-surface-alt-1-moderate: rgba(192, 178, 210, 1);
|
|
249
|
-
$a-surface-alt-1: rgba(130, 105, 162, 1);
|
|
250
|
-
$a-surface-alt-2-subtle: rgba(249, 252, 204, 1);
|
|
251
|
-
$a-surface-alt-2-moderate: rgba(236, 243, 153, 1);
|
|
252
|
-
$a-surface-alt-2: rgba(193, 203, 51, 1);
|
|
253
|
-
$a-surface-alt-3-subtle: rgba(204, 226, 240, 1);
|
|
254
|
-
$a-surface-alt-3-moderate: rgba(153, 196, 221, 1);
|
|
255
|
-
$a-surface-alt-3-strong: rgba(0, 52, 83, 1);
|
|
256
|
-
$a-surface-alt-3: rgba(0, 91, 130, 1);
|
|
257
|
-
$a-icon-default: rgba(35, 38, 42, 1);
|
|
258
|
-
$a-icon-subtle: rgba(1, 11, 24, 0.68);
|
|
259
|
-
$a-icon-action-selected: rgba(0, 69, 156, 1);
|
|
260
|
-
$a-icon-action-on-action-subtle: rgba(0, 86, 180, 1);
|
|
261
|
-
$a-icon-action: rgba(0, 103, 197, 1);
|
|
262
|
-
$a-icon-success: rgba(6, 137, 58, 1);
|
|
263
|
-
$a-icon-danger: rgba(195, 0, 0, 1);
|
|
264
|
-
$a-icon-warning: rgba(199, 115, 0, 1);
|
|
265
|
-
$a-icon-info: rgba(35, 107, 125, 1);
|
|
266
|
-
$a-icon-alt-1: rgba(99, 70, 137, 1);
|
|
267
|
-
$a-icon-alt-2: rgba(127, 137, 0, 1);
|
|
268
|
-
$a-icon-alt-3: rgba(0, 91, 130, 1);
|
|
269
|
-
$a-icon-on-neutral: rgba(255, 255, 255, 1);
|
|
270
|
-
$a-icon-on-inverted: rgba(255, 255, 255, 1);
|
|
271
|
-
$a-icon-on-action: rgba(255, 255, 255, 1);
|
|
272
|
-
$a-icon-on-success: rgba(255, 255, 255, 1);
|
|
273
|
-
$a-icon-on-danger: rgba(255, 255, 255, 1);
|
|
274
|
-
$a-icon-on-warning: rgba(35, 38, 42, 1);
|
|
275
|
-
$a-icon-on-info: rgba(35, 38, 42, 1);
|
|
276
|
+
$a-shadow-focus: 0 0 0 3px rgba(0, 52, 125, 1);
|
|
277
|
+
$a-shadow-focus-inverted: 0 0 0 3px rgba(153, 195, 255, 1);
|
|
276
278
|
$a-shadow-xsmall: 0px 1px 3px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.20);
|
|
277
279
|
$a-shadow-small: 0px 3px 8px 0px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 0px 1px 0px rgba(0, 0, 0, 0.18);
|
|
278
280
|
$a-shadow-medium: 0px 5px 12px 0px rgba(0, 0, 0, 0.13), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 0px 1px 0px rgba(0, 0, 0, 0.15);
|
|
279
281
|
$a-shadow-large: 0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 10px 16px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.12);
|
|
280
282
|
$a-shadow-xlarge: 0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 10px 24px 0px rgba(0, 0, 0, 0.18), 0px 0px 1px 0px rgba(0, 0, 0, 0.08);
|
|
281
|
-
$a-shadow-focus-inverted: 0 0 0 3px rgba(153, 195, 255, 1);
|
|
282
|
-
$a-shadow-focus: 0 0 0 3px rgba(0, 52, 125, 1);
|
|
283
283
|
$a-spacing-0: 0;
|
|
284
284
|
$a-spacing-1: 0.25rem;
|
|
285
285
|
$a-spacing-2: 0.5rem;
|