@navikt/ds-tokens 0.6.2 → 0.8.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 (8) hide show
  1. package/dist/tokens-cjs.js +178 -6672
  2. package/dist/tokens.css +65 -186
  3. package/dist/tokens.js +68 -189
  4. package/dist/tokens.less +68 -189
  5. package/dist/tokens.scss +68 -189
  6. package/package.json +3 -3
  7. package/src/colors.json +49 -26
  8. package/src/index.js +8 -180
package/dist/tokens.css CHANGED
@@ -1,121 +1,27 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 12 Nov 2021 13:39:25 GMT
3
+ * Generated on Thu, 27 Jan 2022 09:52:32 GMT
4
4
  */
5
5
 
6
6
  :root {
7
- --navds-checkmark-image-blue: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjMDA2N0M1IiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
8
- --navds-checkmark-image-white: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
9
- --navds-sidebar-sticky-offset: 0;
10
- --navds-z-index-focus: 10;
11
- --navds-z-index-popover: 1000;
12
- --navds-z-index-modal: 2000;
13
- --navds-layout-background-white: #ffffff;
14
- --navds-content-container-max-width: 79.5rem;
15
- --navds-font-weight-regular: 400;
16
- --navds-font-weight-bold: 600;
17
- --navds-font-size-small: 0.875rem;
18
- --navds-font-size-medium: 1rem;
19
- --navds-font-size-large: 1.125rem;
20
- --navds-font-size-xlarge: 1.25rem;
21
- --navds-font-size-heading-xsmall: 1.125rem;
22
- --navds-font-size-heading-small: 1.25rem;
23
- --navds-font-size-heading-medium: 1.5rem;
24
- --navds-font-size-heading-large: 1.75rem;
25
- --navds-font-size-heading-xlarge: 2rem;
26
- --navds-font-size-heading-2xlarge: 2.5rem;
27
- --navds-font-line-height-medium: 1.25rem;
28
- --navds-font-line-height-large: 1.5rem;
29
- --navds-font-line-height-xlarge: 1.75rem;
30
- --navds-font-line-height-heading-xsmall: 1.5rem;
31
- --navds-font-line-height-heading-small: 1.75rem;
32
- --navds-font-line-height-heading-medium: 2rem;
33
- --navds-font-line-height-heading-large: 2.25rem;
34
- --navds-font-line-height-heading-xlarge: 2.5rem;
35
- --navds-font-line-height-heading-2xlarge: 3.25rem;
36
- --navds-font-family: "Source Sans Pro", Arial, sans-serif;
37
- --navds-border-radius: 4px;
38
- --navds-color-modal-overlay: rgba(38, 38, 38, 0.7);
39
- --navds-color-limegreen-90: #474E00;
40
- --navds-color-limegreen-80: #666E00;
41
- --navds-color-limegreen-70: #7F8900;
42
- --navds-color-limegreen-60: #939E00;
43
- --navds-color-limegreen-50: #a2ad00;
44
- --navds-color-limegreen-40: #C1CB33;
45
- --navds-color-limegreen-30: #D9E366;
46
- --navds-color-limegreen-20: #ECF399;
47
- --navds-color-limegreen-10: #F9FCCC;
48
- --navds-color-purple-90: #1F142F;
49
- --navds-color-purple-80: #301F46;
50
- --navds-color-purple-70: #412B5D;
51
- --navds-color-purple-60: #523874;
52
- --navds-color-purple-50: #634689;
53
- --navds-color-purple-40: #8269A2;
54
- --navds-color-purple-30: #A18DBB;
55
- --navds-color-purple-20: #C0B2D2;
56
- --navds-color-purple-10: #E0D8E9;
57
- --navds-color-red-90: #480900;
58
- --navds-color-red-80: #6A1204;
59
- --navds-color-red-70: #881D0C;
60
- --navds-color-red-60: #A32A17;
61
- --navds-color-red-50: #BA3A26;
62
- --navds-color-red-40: #D05C4A;
63
- --navds-color-red-30: #E18071;
64
- --navds-color-red-20: #EFA89D;
65
- --navds-color-red-10: #F9D2CC;
66
- --navds-color-green-90: #003B0F;
67
- --navds-color-green-80: #005519;
68
- --navds-color-green-70: #006A23;
69
- --navds-color-green-60: #007C2E;
70
- --navds-color-green-50: #06893A;
71
- --navds-color-green-40: #33AA5F;
72
- --navds-color-green-30: #66C786;
73
- --navds-color-green-20: #99DEAD;
74
- --navds-color-green-10: #CCF1D6;
75
- --navds-color-orange-90: #523300;
76
- --navds-color-orange-80: #7D4C00;
77
- --navds-color-orange-70: #A86400;
78
- --navds-color-orange-60: #D47B00;
79
- --navds-color-orange-50: #FF9100;
80
- --navds-color-orange-40: #FFAA33;
81
- --navds-color-orange-30: #FFC166;
82
- --navds-color-orange-20: #FFD799;
83
- --navds-color-orange-10: #FFECCC;
84
- --navds-color-lightblue-90: #134852;
85
- --navds-color-lightblue-80: #236B7D;
86
- --navds-color-lightblue-70: #368DA8;
87
- --navds-color-lightblue-60: #4CADCD;
88
- --navds-color-lightblue-50: #66CBEC;
89
- --navds-color-lightblue-40: #7CDAF8;
90
- --navds-color-lightblue-30: #97E6FF;
91
- --navds-color-lightblue-20: #B5F1FF;
92
- --navds-color-lightblue-10: #D8F9FF;
93
- --navds-color-deepblue-90: #00243A;
94
- --navds-color-deepblue-80: #003453;
95
- --navds-color-deepblue-70: #004367;
96
- --navds-color-deepblue-60: #005077;
97
- --navds-color-deepblue-50: #005B82;
98
- --navds-color-deepblue-40: #3380A5;
99
- --navds-color-deepblue-30: #66A3C4;
100
- --navds-color-deepblue-20: #99C4DD;
101
- --navds-color-deepblue-10: #CCE2F0;
102
- --navds-color-blue-90: #002252;
103
- --navds-color-blue-80: #00347D;
104
- --navds-color-blue-70: #00459C;
105
- --navds-color-blue-60: #0056B4;
106
- --navds-color-blue-50: #0067c5;
107
- --navds-color-blue-40: #3386E0;
108
- --navds-color-blue-30: #66A5F4;
109
- --navds-color-blue-20: #99C3FF;
110
- --navds-color-blue-10: #CCE1FF;
111
- --navds-color-gray-90: #262626;
112
- --navds-color-gray-80: #4F4F4F;
113
- --navds-color-gray-60: #6A6A6A;
114
- --navds-color-gray-40: #A0A0A0;
115
- --navds-color-gray-20: #C9C9C9;
116
- --navds-color-gray-10: #F1F1F1;
117
- --navds-color-darkgray: #262626;
118
- --navds-color-white: #ffffff;
7
+ --navds-spacing-32: 8rem;
8
+ --navds-spacing-24: 6rem;
9
+ --navds-spacing-20: 5rem;
10
+ --navds-spacing-18: 4.5rem;
11
+ --navds-spacing-16: 4rem;
12
+ --navds-spacing-14: 3.5rem;
13
+ --navds-spacing-12: 3rem;
14
+ --navds-spacing-11: 2.75rem;
15
+ --navds-spacing-10: 2.5rem;
16
+ --navds-spacing-9: 2.25rem;
17
+ --navds-spacing-8: 2rem;
18
+ --navds-spacing-7: 1.75rem;
19
+ --navds-spacing-6: 1.5rem;
20
+ --navds-spacing-5: 1.25rem;
21
+ --navds-spacing-4: 1rem;
22
+ --navds-spacing-3: 0.75rem;
23
+ --navds-spacing-2: 0.5rem;
24
+ --navds-spacing-1: 0.25rem;
119
25
  --navds-global-color-white: rgba(255, 255, 255, 1);
120
26
  --navds-global-color-transparent: rgba(255, 255, 255, 0);
121
27
  --navds-global-color-red-900: rgba(72, 9, 0, 1);
@@ -180,10 +86,13 @@
180
86
  --navds-global-color-green-100: rgba(204, 241, 214, 1);
181
87
  --navds-global-color-green-50: rgba(243, 252, 245, 1);
182
88
  --navds-global-color-gray-900: rgba(38, 38, 38, 1);
183
- --navds-global-color-gray-800: rgba(79, 79, 79, 1);
184
- --navds-global-color-gray-600: rgba(106, 106, 106, 1);
185
- --navds-global-color-gray-400: rgba(160, 160, 160, 1);
186
- --navds-global-color-gray-200: rgba(201, 201, 201, 1);
89
+ --navds-global-color-gray-800: rgba(64, 64, 64, 1);
90
+ --navds-global-color-gray-700: rgba(89, 89, 89, 1);
91
+ --navds-global-color-gray-600: rgba(112, 112, 112, 1);
92
+ --navds-global-color-gray-500: rgba(143, 143, 143, 1);
93
+ --navds-global-color-gray-400: rgba(176, 176, 176, 1);
94
+ --navds-global-color-gray-300: rgba(207, 207, 207, 1);
95
+ --navds-global-color-gray-200: rgba(229, 229, 229, 1);
187
96
  --navds-global-color-gray-100: rgba(241, 241, 241, 1);
188
97
  --navds-global-color-gray-50: rgba(247, 247, 247, 1);
189
98
  --navds-global-color-deepblue-900: rgba(0, 36, 58, 1);
@@ -206,78 +115,46 @@
206
115
  --navds-global-color-blue-200: rgba(153, 195, 255, 1);
207
116
  --navds-global-color-blue-100: rgba(204, 225, 255, 1);
208
117
  --navds-global-color-blue-50: rgba(230, 240, 255, 1);
209
- --navds-spacing-32: 8rem;
210
- --navds-spacing-24: 6rem;
211
- --navds-spacing-20: 5rem;
212
- --navds-spacing-18: 4.5rem;
213
- --navds-spacing-16: 4rem;
214
- --navds-spacing-14: 3.5rem;
215
- --navds-spacing-12: 3rem;
216
- --navds-spacing-11: 2.75rem;
217
- --navds-spacing-10: 2.5rem;
218
- --navds-spacing-9: 2.25rem;
219
- --navds-spacing-8: 2rem;
220
- --navds-spacing-7: 1.75rem;
221
- --navds-spacing-6: 1.5rem;
222
- --navds-spacing-5: 1.25rem;
223
- --navds-spacing-4: 1rem;
224
- --navds-spacing-3: 0.75rem;
225
- --navds-spacing-2: 0.5rem;
226
- --navds-spacing-1: 0.25rem;
227
- --navds-layout-padding-medium-and-larger: var(--navds-spacing-10);
228
- --navds-layout-padding-small: var(--navds-spacing-4);
229
- --navds-layout-background-gray: var(--navds-color-gray-10);
230
- --navds-grid-gutter-medium-and-larger: var(--navds-spacing-6);
231
- --navds-grid-gutter-small: var(--navds-spacing-4);
232
- --navds-content-container-padding-medium-and-larger: var(--navds-spacing-6);
233
- --navds-content-container-padding-small: var(--navds-spacing-4);
234
- --navds-text-shadow: 0 0 0 2px var(--navds-color-blue-80);
235
- --navds-text-focus: var(--navds-color-blue-80);
236
- --navds-shadow-focus-on-dark: 0 0 0 3px var(--navds-color-orange-40);
237
- --navds-shadow-focus: 0 0 0 3px var(--navds-color-blue-80);
238
- --navds-panel-hover: 1px solid var(--navds-color-blue-50);
239
- --navds-color-tag-success-background: var(--navds-color-green-10);
240
- --navds-color-tag-success-border: var(--navds-color-green-50);
241
- --navds-color-tag-info-background: var(--navds-color-lightblue-10);
242
- --navds-color-tag-info-border: var(--navds-color-lightblue-70);
243
- --navds-color-tag-warning-background: var(--navds-color-orange-10);
244
- --navds-color-tag-warning-border: var(--navds-color-orange-60);
245
- --navds-color-tag-error-background: var(--navds-color-red-10);
246
- --navds-color-tag-error-border: var(--navds-color-red-50);
247
- --navds-color-hover: var(--navds-color-gray-40);
248
- --navds-color-text-error: var(--navds-color-red-50);
249
- --navds-color-text-link: var(--navds-color-blue-50);
250
- --navds-color-text-disabled: var(--navds-color-gray-60);
251
- --navds-color-text-inverse: var(--navds-color-white);
252
- --navds-color-text-primary: var(--navds-color-gray-90);
253
- --navds-color-background: var(--navds-color-white);
254
- --navds-color-border: var(--navds-color-gray-40);
255
- --navds-color-success-background: var(--navds-color-green-10);
256
- --navds-color-success-border: var(--navds-color-green-50);
257
- --navds-color-info-background: var(--navds-color-lightblue-10);
258
- --navds-color-info-border: var(--navds-color-lightblue-70);
259
- --navds-color-warning-background: var(--navds-color-orange-10);
260
- --navds-color-warning-border: var(--navds-color-orange-60);
261
- --navds-color-error-background: var(--navds-color-red-10);
262
- --navds-color-error-border: var(--navds-color-red-50);
263
- --navds-color-danger-active: var(--navds-color-red-70);
264
- --navds-color-danger-hover: var(--navds-color-red-60);
265
- --navds-color-danger-default: var(--navds-color-red-50);
266
- --navds-color-action-active: var(--navds-color-deepblue-50);
267
- --navds-color-action-hover: var(--navds-color-blue-60);
268
- --navds-color-action-default: var(--navds-color-blue-50);
269
- --navds-color-disabled: var(--navds-color-gray-40);
118
+ --navds-z-index-focus: 10;
119
+ --navds-z-index-popover: 1000;
120
+ --navds-z-index-modal: 2000;
121
+ --navds-shadow-card: 0 1px 3px 0 rgba(38,38,38,0.2),0 2px 1px 0 rgba(38,38,38,0.12),0 1px 1px 0 rgba(38,38,38,0.14);
122
+ --navds-font-weight-regular: 400;
123
+ --navds-font-weight-bold: 600;
124
+ --navds-font-size-small: 0.875rem;
125
+ --navds-font-size-medium: 1rem;
126
+ --navds-font-size-large: 1.125rem;
127
+ --navds-font-size-xlarge: 1.25rem;
128
+ --navds-font-size-heading-xsmall: 1.125rem;
129
+ --navds-font-size-heading-small: 1.25rem;
130
+ --navds-font-size-heading-medium: 1.5rem;
131
+ --navds-font-size-heading-large: 1.75rem;
132
+ --navds-font-size-heading-xlarge: 2rem;
133
+ --navds-font-size-heading-2xlarge: 2.5rem;
134
+ --navds-font-line-height-medium: 1.25rem;
135
+ --navds-font-line-height-large: 1.5rem;
136
+ --navds-font-line-height-xlarge: 1.75rem;
137
+ --navds-font-line-height-heading-xsmall: 1.5rem;
138
+ --navds-font-line-height-heading-small: 1.75rem;
139
+ --navds-font-line-height-heading-medium: 2rem;
140
+ --navds-font-line-height-heading-large: 2.25rem;
141
+ --navds-font-line-height-heading-xlarge: 2.5rem;
142
+ --navds-font-line-height-heading-2xlarge: 3.25rem;
143
+ --navds-font-family: "Source Sans Pro", Arial, sans-serif;
144
+ --navds-semantic-color-text: var(--navds-global-color-gray-900);
270
145
  --navds-semantic-color-text-muted: var(--navds-global-color-gray-600);
271
- --navds-semantic-color-text-link: var(--navds-global-color-blue-500);
272
146
  --navds-semantic-color-text-inverted: var(--navds-global-color-white);
273
- --navds-semantic-color-text-default: var(--navds-global-color-gray-900);
147
+ --navds-semantic-color-link: var(--navds-global-color-blue-500);
148
+ --navds-semantic-color-link-visited: var(--navds-global-color-purple-500);
149
+ --navds-semantic-color-interaction-primary: var(--navds-global-color-blue-500);
274
150
  --navds-semantic-color-interaction-primary-selected: var(--navds-global-color-deepblue-500);
275
151
  --navds-semantic-color-interaction-primary-hover: var(--navds-global-color-blue-600);
276
- --navds-semantic-color-interaction-primary-default: var(--navds-global-color-blue-500);
152
+ --navds-semantic-color-interaction-primary-hover-subtle: var(--navds-global-color-blue-50);
153
+ --navds-semantic-color-interaction-danger: var(--navds-global-color-red-500);
277
154
  --navds-semantic-color-interaction-danger-selected: var(--navds-global-color-red-700);
278
155
  --navds-semantic-color-interaction-danger-hover: var(--navds-global-color-red-600);
279
- --navds-semantic-color-interaction-danger-default: var(--navds-global-color-red-500);
280
156
  --navds-semantic-color-focus: var(--navds-global-color-blue-800);
157
+ --navds-semantic-color-focus-inverted: var(--navds-global-color-blue-200);
281
158
  --navds-semantic-color-feedback-warning-icon: var(--navds-global-color-orange-500);
282
159
  --navds-semantic-color-feedback-warning-border: var(--navds-global-color-orange-600);
283
160
  --navds-semantic-color-feedback-warning-background: var(--navds-global-color-orange-100);
@@ -295,11 +172,13 @@
295
172
  --navds-semantic-color-component-background-light: var(--navds-global-color-white);
296
173
  --navds-semantic-color-component-background-inverted: var(--navds-global-color-gray-900);
297
174
  --navds-semantic-color-component-background-alternate: var(--navds-global-color-gray-50);
175
+ --navds-semantic-color-canvas-background: var(--navds-global-color-gray-100);
298
176
  --navds-semantic-color-canvas-background-light: var(--navds-global-color-white);
299
177
  --navds-semantic-color-canvas-background-inverted: var(--navds-global-color-gray-900);
300
- --navds-semantic-color-canvas-background-default: var(--navds-global-color-gray-100);
178
+ --navds-semantic-color-border: var(--navds-global-color-gray-600);
301
179
  --navds-semantic-color-border-muted: var(--navds-global-color-gray-400);
302
- --navds-semantic-color-border-default: var(--navds-global-color-gray-600);
303
- --navds-shadow-hover: var(--navds-color-hover) 0 2px 1px 0;
304
- --navds-border-default: 1px solid var(--navds-color-border);
180
+ --navds-semantic-color-border-inverted: var(--navds-global-color-gray-200);
181
+ --navds-shadow-popover: 0 2px 4px 0 var(--navds-global-color-gray-200);
182
+ --navds-shadow-focus-inverted: 0 0 0 3px var(--navds-semantic-color-focus-inverted);
183
+ --navds-shadow-focus: 0 0 0 3px var(--navds-semantic-color-focus);
305
184
  }
package/dist/tokens.js CHANGED
@@ -1,26 +1,37 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 12 Nov 2021 13:39:25 GMT
3
+ * Generated on Thu, 27 Jan 2022 09:52:32 GMT
4
4
  */
5
5
 
6
- export const NavdsSpacing1 = "0.25rem";
7
- export const NavdsSpacing2 = "0.5rem";
8
- export const NavdsSpacing3 = "0.75rem";
9
- export const NavdsSpacing4 = "1rem";
10
- export const NavdsSpacing5 = "1.25rem";
11
- export const NavdsSpacing6 = "1.5rem";
12
- export const NavdsSpacing7 = "1.75rem";
13
- export const NavdsSpacing8 = "2rem";
14
- export const NavdsSpacing9 = "2.25rem";
15
- export const NavdsSpacing10 = "2.5rem";
16
- export const NavdsSpacing11 = "2.75rem";
17
- export const NavdsSpacing12 = "3rem";
18
- export const NavdsSpacing14 = "3.5rem";
19
- export const NavdsSpacing16 = "4rem";
20
- export const NavdsSpacing18 = "4.5rem";
21
- export const NavdsSpacing20 = "5rem";
22
- export const NavdsSpacing24 = "6rem";
23
- export const NavdsSpacing32 = "8rem";
6
+ export const NavdsFontFamily = "\"Source Sans Pro\", Arial, sans-serif";
7
+ export const NavdsFontLineHeightHeading2xlarge = "3.25rem";
8
+ export const NavdsFontLineHeightHeadingXlarge = "2.5rem";
9
+ export const NavdsFontLineHeightHeadingLarge = "2.25rem";
10
+ export const NavdsFontLineHeightHeadingMedium = "2rem";
11
+ export const NavdsFontLineHeightHeadingSmall = "1.75rem";
12
+ export const NavdsFontLineHeightHeadingXsmall = "1.5rem";
13
+ export const NavdsFontLineHeightXlarge = "1.75rem";
14
+ export const NavdsFontLineHeightLarge = "1.5rem";
15
+ export const NavdsFontLineHeightMedium = "1.25rem";
16
+ export const NavdsFontSizeHeading2xlarge = "2.5rem";
17
+ export const NavdsFontSizeHeadingXlarge = "2rem";
18
+ export const NavdsFontSizeHeadingLarge = "1.75rem";
19
+ export const NavdsFontSizeHeadingMedium = "1.5rem";
20
+ export const NavdsFontSizeHeadingSmall = "1.25rem";
21
+ export const NavdsFontSizeHeadingXsmall = "1.125rem";
22
+ export const NavdsFontSizeXlarge = "1.25rem";
23
+ export const NavdsFontSizeLarge = "1.125rem";
24
+ export const NavdsFontSizeMedium = "1rem";
25
+ export const NavdsFontSizeSmall = "0.875rem";
26
+ export const NavdsFontWeightBold = "600";
27
+ export const NavdsFontWeightRegular = "400";
28
+ export const NavdsShadowFocus = "0 0 0 3px rgba(0, 52, 125, 1)";
29
+ export const NavdsShadowFocusInverted = "0 0 0 3px rgba(153, 195, 255, 1)";
30
+ export const NavdsShadowPopover = "0 2px 4px 0 rgba(229, 229, 229, 1)";
31
+ export const NavdsShadowCard = "0 1px 3px 0 rgba(38,38,38,0.2),0 2px 1px 0 rgba(38,38,38,0.12),0 1px 1px 0 rgba(38,38,38,0.14)";
32
+ export const NavdsZIndexModal = 2000;
33
+ export const NavdsZIndexPopover = 1000;
34
+ export const NavdsZIndexFocus = 10;
24
35
  export const NavdsGlobalColorBlue50 = "rgba(230, 240, 255, 1)";
25
36
  export const NavdsGlobalColorBlue100 = "rgba(204, 225, 255, 1)";
26
37
  export const NavdsGlobalColorBlue200 = "rgba(153, 195, 255, 1)";
@@ -43,10 +54,13 @@ export const NavdsGlobalColorDeepblue800 = "rgba(0, 52, 83, 1)";
43
54
  export const NavdsGlobalColorDeepblue900 = "rgba(0, 36, 58, 1)";
44
55
  export const NavdsGlobalColorGray50 = "rgba(247, 247, 247, 1)";
45
56
  export const NavdsGlobalColorGray100 = "rgba(241, 241, 241, 1)";
46
- export const NavdsGlobalColorGray200 = "rgba(201, 201, 201, 1)";
47
- export const NavdsGlobalColorGray400 = "rgba(160, 160, 160, 1)";
48
- export const NavdsGlobalColorGray600 = "rgba(106, 106, 106, 1)";
49
- export const NavdsGlobalColorGray800 = "rgba(79, 79, 79, 1)";
57
+ export const NavdsGlobalColorGray200 = "rgba(229, 229, 229, 1)";
58
+ export const NavdsGlobalColorGray300 = "rgba(207, 207, 207, 1)";
59
+ export const NavdsGlobalColorGray400 = "rgba(176, 176, 176, 1)";
60
+ export const NavdsGlobalColorGray500 = "rgba(143, 143, 143, 1)";
61
+ export const NavdsGlobalColorGray600 = "rgba(112, 112, 112, 1)";
62
+ export const NavdsGlobalColorGray700 = "rgba(89, 89, 89, 1)";
63
+ export const NavdsGlobalColorGray800 = "rgba(64, 64, 64, 1)";
50
64
  export const NavdsGlobalColorGray900 = "rgba(38, 38, 38, 1)";
51
65
  export const NavdsGlobalColorGreen50 = "rgba(243, 252, 245, 1)";
52
66
  export const NavdsGlobalColorGreen100 = "rgba(204, 241, 214, 1)";
@@ -111,15 +125,16 @@ export const NavdsGlobalColorRed800 = "rgba(106, 18, 4, 1)";
111
125
  export const NavdsGlobalColorRed900 = "rgba(72, 9, 0, 1)";
112
126
  export const NavdsGlobalColorTransparent = "rgba(255, 255, 255, 0)";
113
127
  export const NavdsGlobalColorWhite = "rgba(255, 255, 255, 1)";
114
- export const NavdsSemanticColorBorderDefault = "rgba(106, 106, 106, 1)";
115
- export const NavdsSemanticColorBorderMuted = "rgba(160, 160, 160, 1)";
116
- export const NavdsSemanticColorCanvasBackgroundDefault = "rgba(241, 241, 241, 1)";
128
+ export const NavdsSemanticColorBorderInverted = "rgba(229, 229, 229, 1)";
129
+ export const NavdsSemanticColorBorderMuted = "rgba(176, 176, 176, 1)";
130
+ export const NavdsSemanticColorBorder = "rgba(112, 112, 112, 1)";
117
131
  export const NavdsSemanticColorCanvasBackgroundInverted = "rgba(38, 38, 38, 1)";
118
132
  export const NavdsSemanticColorCanvasBackgroundLight = "rgba(255, 255, 255, 1)";
133
+ export const NavdsSemanticColorCanvasBackground = "rgba(241, 241, 241, 1)";
119
134
  export const NavdsSemanticColorComponentBackgroundAlternate = "rgba(247, 247, 247, 1)";
120
135
  export const NavdsSemanticColorComponentBackgroundInverted = "rgba(38, 38, 38, 1)";
121
136
  export const NavdsSemanticColorComponentBackgroundLight = "rgba(255, 255, 255, 1)";
122
- export const NavdsSemanticColorDivider = "rgba(201, 201, 201, 1)";
137
+ export const NavdsSemanticColorDivider = "rgba(229, 229, 229, 1)";
123
138
  export const NavdsSemanticColorFeedbackDangerBackground = "rgba(249, 210, 204, 1)";
124
139
  export const NavdsSemanticColorFeedbackDangerBorder = "rgba(186, 58, 38, 1)";
125
140
  export const NavdsSemanticColorFeedbackDangerIcon = "rgba(186, 58, 38, 1)";
@@ -133,171 +148,35 @@ export const NavdsSemanticColorFeedbackSuccessIcon = "rgba(0, 124, 46, 1)";
133
148
  export const NavdsSemanticColorFeedbackWarningBackground = "rgba(255, 236, 204, 1)";
134
149
  export const NavdsSemanticColorFeedbackWarningBorder = "rgba(212, 123, 0, 1)";
135
150
  export const NavdsSemanticColorFeedbackWarningIcon = "rgba(255, 145, 0, 1)";
151
+ export const NavdsSemanticColorFocusInverted = "rgba(153, 195, 255, 1)";
136
152
  export const NavdsSemanticColorFocus = "rgba(0, 52, 125, 1)";
137
- export const NavdsSemanticColorInteractionDangerDefault = "rgba(186, 58, 38, 1)";
138
153
  export const NavdsSemanticColorInteractionDangerHover = "rgba(163, 42, 23, 1)";
139
154
  export const NavdsSemanticColorInteractionDangerSelected = "rgba(136, 29, 12, 1)";
140
- export const NavdsSemanticColorInteractionPrimaryDefault = "rgba(0, 103, 197, 1)";
155
+ export const NavdsSemanticColorInteractionDanger = "rgba(186, 58, 38, 1)";
156
+ export const NavdsSemanticColorInteractionPrimaryHoverSubtle = "rgba(230, 240, 255, 1)";
141
157
  export const NavdsSemanticColorInteractionPrimaryHover = "rgba(0, 86, 180, 1)";
142
158
  export const NavdsSemanticColorInteractionPrimarySelected = "rgba(0, 91, 130, 1)";
143
- export const NavdsSemanticColorTextDefault = "rgba(38, 38, 38, 1)";
159
+ export const NavdsSemanticColorInteractionPrimary = "rgba(0, 103, 197, 1)";
160
+ export const NavdsSemanticColorLinkVisited = "rgba(99, 70, 137, 1)";
161
+ export const NavdsSemanticColorLink = "rgba(0, 103, 197, 1)";
144
162
  export const NavdsSemanticColorTextInverted = "rgba(255, 255, 255, 1)";
145
- export const NavdsSemanticColorTextLink = "rgba(0, 103, 197, 1)";
146
- export const NavdsSemanticColorTextMuted = "rgba(106, 106, 106, 1)";
147
- export const NavdsColorWhite = "#ffffff";
148
- export const NavdsColorDarkgray = "#262626";
149
- export const NavdsColorGray10 = "#F1F1F1";
150
- export const NavdsColorGray20 = "#C9C9C9";
151
- export const NavdsColorGray40 = "#A0A0A0";
152
- export const NavdsColorGray60 = "#6A6A6A";
153
- export const NavdsColorGray80 = "#4F4F4F";
154
- export const NavdsColorGray90 = "#262626";
155
- export const NavdsColorBlue10 = "#CCE1FF";
156
- export const NavdsColorBlue20 = "#99C3FF";
157
- export const NavdsColorBlue30 = "#66A5F4";
158
- export const NavdsColorBlue40 = "#3386E0";
159
- export const NavdsColorBlue50 = "#0067c5";
160
- export const NavdsColorBlue60 = "#0056B4";
161
- export const NavdsColorBlue70 = "#00459C";
162
- export const NavdsColorBlue80 = "#00347D";
163
- export const NavdsColorBlue90 = "#002252";
164
- export const NavdsColorDeepblue10 = "#CCE2F0";
165
- export const NavdsColorDeepblue20 = "#99C4DD";
166
- export const NavdsColorDeepblue30 = "#66A3C4";
167
- export const NavdsColorDeepblue40 = "#3380A5";
168
- export const NavdsColorDeepblue50 = "#005B82";
169
- export const NavdsColorDeepblue60 = "#005077";
170
- export const NavdsColorDeepblue70 = "#004367";
171
- export const NavdsColorDeepblue80 = "#003453";
172
- export const NavdsColorDeepblue90 = "#00243A";
173
- export const NavdsColorLightblue10 = "#D8F9FF";
174
- export const NavdsColorLightblue20 = "#B5F1FF";
175
- export const NavdsColorLightblue30 = "#97E6FF";
176
- export const NavdsColorLightblue40 = "#7CDAF8";
177
- export const NavdsColorLightblue50 = "#66CBEC";
178
- export const NavdsColorLightblue60 = "#4CADCD";
179
- export const NavdsColorLightblue70 = "#368DA8";
180
- export const NavdsColorLightblue80 = "#236B7D";
181
- export const NavdsColorLightblue90 = "#134852";
182
- export const NavdsColorOrange10 = "#FFECCC";
183
- export const NavdsColorOrange20 = "#FFD799";
184
- export const NavdsColorOrange30 = "#FFC166";
185
- export const NavdsColorOrange40 = "#FFAA33";
186
- export const NavdsColorOrange50 = "#FF9100";
187
- export const NavdsColorOrange60 = "#D47B00";
188
- export const NavdsColorOrange70 = "#A86400";
189
- export const NavdsColorOrange80 = "#7D4C00";
190
- export const NavdsColorOrange90 = "#523300";
191
- export const NavdsColorGreen10 = "#CCF1D6";
192
- export const NavdsColorGreen20 = "#99DEAD";
193
- export const NavdsColorGreen30 = "#66C786";
194
- export const NavdsColorGreen40 = "#33AA5F";
195
- export const NavdsColorGreen50 = "#06893A";
196
- export const NavdsColorGreen60 = "#007C2E";
197
- export const NavdsColorGreen70 = "#006A23";
198
- export const NavdsColorGreen80 = "#005519";
199
- export const NavdsColorGreen90 = "#003B0F";
200
- export const NavdsColorRed10 = "#F9D2CC";
201
- export const NavdsColorRed20 = "#EFA89D";
202
- export const NavdsColorRed30 = "#E18071";
203
- export const NavdsColorRed40 = "#D05C4A";
204
- export const NavdsColorRed50 = "#BA3A26";
205
- export const NavdsColorRed60 = "#A32A17";
206
- export const NavdsColorRed70 = "#881D0C";
207
- export const NavdsColorRed80 = "#6A1204";
208
- export const NavdsColorRed90 = "#480900";
209
- export const NavdsColorPurple10 = "#E0D8E9";
210
- export const NavdsColorPurple20 = "#C0B2D2";
211
- export const NavdsColorPurple30 = "#A18DBB";
212
- export const NavdsColorPurple40 = "#8269A2";
213
- export const NavdsColorPurple50 = "#634689";
214
- export const NavdsColorPurple60 = "#523874";
215
- export const NavdsColorPurple70 = "#412B5D";
216
- export const NavdsColorPurple80 = "#301F46";
217
- export const NavdsColorPurple90 = "#1F142F";
218
- export const NavdsColorLimegreen10 = "#F9FCCC";
219
- export const NavdsColorLimegreen20 = "#ECF399";
220
- export const NavdsColorLimegreen30 = "#D9E366";
221
- export const NavdsColorLimegreen40 = "#C1CB33";
222
- export const NavdsColorLimegreen50 = "#a2ad00";
223
- export const NavdsColorLimegreen60 = "#939E00";
224
- export const NavdsColorLimegreen70 = "#7F8900";
225
- export const NavdsColorLimegreen80 = "#666E00";
226
- export const NavdsColorLimegreen90 = "#474E00";
227
- export const NavdsColorDisabled = "#A0A0A0";
228
- export const NavdsColorActionDefault = "#0067c5";
229
- export const NavdsColorActionHover = "#0056B4";
230
- export const NavdsColorActionActive = "#005B82";
231
- export const NavdsColorDangerDefault = "#BA3A26";
232
- export const NavdsColorDangerHover = "#A32A17";
233
- export const NavdsColorDangerActive = "#881D0C";
234
- export const NavdsColorErrorBorder = "#BA3A26";
235
- export const NavdsColorErrorBackground = "#F9D2CC";
236
- export const NavdsColorWarningBorder = "#D47B00";
237
- export const NavdsColorWarningBackground = "#FFECCC";
238
- export const NavdsColorInfoBorder = "#368DA8";
239
- export const NavdsColorInfoBackground = "#D8F9FF";
240
- export const NavdsColorSuccessBorder = "#06893A";
241
- export const NavdsColorSuccessBackground = "#CCF1D6";
242
- export const NavdsColorBorder = "#A0A0A0";
243
- export const NavdsColorBackground = "#ffffff";
244
- export const NavdsColorTextPrimary = "#262626";
245
- export const NavdsColorTextInverse = "#ffffff";
246
- export const NavdsColorTextDisabled = "#6A6A6A";
247
- export const NavdsColorTextLink = "#0067c5";
248
- export const NavdsColorTextError = "#BA3A26";
249
- export const NavdsColorHover = "#A0A0A0";
250
- export const NavdsColorTagErrorBorder = "#BA3A26";
251
- export const NavdsColorTagErrorBackground = "#F9D2CC";
252
- export const NavdsColorTagWarningBorder = "#D47B00";
253
- export const NavdsColorTagWarningBackground = "#FFECCC";
254
- export const NavdsColorTagInfoBorder = "#368DA8";
255
- export const NavdsColorTagInfoBackground = "#D8F9FF";
256
- export const NavdsColorTagSuccessBorder = "#06893A";
257
- export const NavdsColorTagSuccessBackground = "#CCF1D6";
258
- export const NavdsColorModalOverlay = "rgba(38, 38, 38, 0.7)";
259
- export const NavdsBorderDefault = "1px solid #A0A0A0";
260
- export const NavdsBorderRadius = "4px";
261
- export const NavdsPanelHover = "1px solid #0067c5";
262
- export const NavdsFontFamily = "\"Source Sans Pro\", Arial, sans-serif";
263
- export const NavdsFontLineHeightHeading2xlarge = "3.25rem";
264
- export const NavdsFontLineHeightHeadingXlarge = "2.5rem";
265
- export const NavdsFontLineHeightHeadingLarge = "2.25rem";
266
- export const NavdsFontLineHeightHeadingMedium = "2rem";
267
- export const NavdsFontLineHeightHeadingSmall = "1.75rem";
268
- export const NavdsFontLineHeightHeadingXsmall = "1.5rem";
269
- export const NavdsFontLineHeightXlarge = "1.75rem";
270
- export const NavdsFontLineHeightLarge = "1.5rem";
271
- export const NavdsFontLineHeightMedium = "1.25rem";
272
- export const NavdsFontSizeHeading2xlarge = "2.5rem";
273
- export const NavdsFontSizeHeadingXlarge = "2rem";
274
- export const NavdsFontSizeHeadingLarge = "1.75rem";
275
- export const NavdsFontSizeHeadingMedium = "1.5rem";
276
- export const NavdsFontSizeHeadingSmall = "1.25rem";
277
- export const NavdsFontSizeHeadingXsmall = "1.125rem";
278
- export const NavdsFontSizeXlarge = "1.25rem";
279
- export const NavdsFontSizeLarge = "1.125rem";
280
- export const NavdsFontSizeMedium = "1rem";
281
- export const NavdsFontSizeSmall = "0.875rem";
282
- export const NavdsFontWeightBold = "600";
283
- export const NavdsFontWeightRegular = "400";
284
- export const NavdsShadowFocus = "0 0 0 3px #00347D";
285
- export const NavdsShadowFocusOnDark = "0 0 0 3px #FFAA33";
286
- export const NavdsShadowHover = "#A0A0A0 0 2px 1px 0";
287
- export const NavdsTextFocus = "#00347D";
288
- export const NavdsTextShadow = "0 0 0 2px #00347D";
289
- export const NavdsContentContainerMaxWidth = "79.5rem";
290
- export const NavdsContentContainerPaddingSmall = "1rem";
291
- export const NavdsContentContainerPaddingMediumAndLarger = "1.5rem";
292
- export const NavdsGridGutterSmall = "1rem";
293
- export const NavdsGridGutterMediumAndLarger = "1.5rem";
294
- export const NavdsLayoutBackgroundWhite = "#ffffff";
295
- export const NavdsLayoutBackgroundGray = "#F1F1F1";
296
- export const NavdsLayoutPaddingSmall = "1rem";
297
- export const NavdsLayoutPaddingMediumAndLarger = "2.5rem";
298
- export const NavdsZIndexModal = 2000;
299
- export const NavdsZIndexPopover = 1000;
300
- export const NavdsZIndexFocus = 10;
301
- export const NavdsSidebarStickyOffset = "0";
302
- export const NavdsCheckmarkImageWhite = "url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==)";
303
- export const NavdsCheckmarkImageBlue = "url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjMDA2N0M1IiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==)";
163
+ export const NavdsSemanticColorTextMuted = "rgba(112, 112, 112, 1)";
164
+ export const NavdsSemanticColorText = "rgba(38, 38, 38, 1)";
165
+ export const NavdsSpacing1 = "0.25rem";
166
+ export const NavdsSpacing2 = "0.5rem";
167
+ export const NavdsSpacing3 = "0.75rem";
168
+ export const NavdsSpacing4 = "1rem";
169
+ export const NavdsSpacing5 = "1.25rem";
170
+ export const NavdsSpacing6 = "1.5rem";
171
+ export const NavdsSpacing7 = "1.75rem";
172
+ export const NavdsSpacing8 = "2rem";
173
+ export const NavdsSpacing9 = "2.25rem";
174
+ export const NavdsSpacing10 = "2.5rem";
175
+ export const NavdsSpacing11 = "2.75rem";
176
+ export const NavdsSpacing12 = "3rem";
177
+ export const NavdsSpacing14 = "3.5rem";
178
+ export const NavdsSpacing16 = "4rem";
179
+ export const NavdsSpacing18 = "4.5rem";
180
+ export const NavdsSpacing20 = "5rem";
181
+ export const NavdsSpacing24 = "6rem";
182
+ export const NavdsSpacing32 = "8rem";