@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.less CHANGED
@@ -1,25 +1,36 @@
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
- @navds-spacing-1: 0.25rem;
6
- @navds-spacing-2: 0.5rem;
7
- @navds-spacing-3: 0.75rem;
8
- @navds-spacing-4: 1rem;
9
- @navds-spacing-5: 1.25rem;
10
- @navds-spacing-6: 1.5rem;
11
- @navds-spacing-7: 1.75rem;
12
- @navds-spacing-8: 2rem;
13
- @navds-spacing-9: 2.25rem;
14
- @navds-spacing-10: 2.5rem;
15
- @navds-spacing-11: 2.75rem;
16
- @navds-spacing-12: 3rem;
17
- @navds-spacing-14: 3.5rem;
18
- @navds-spacing-16: 4rem;
19
- @navds-spacing-18: 4.5rem;
20
- @navds-spacing-20: 5rem;
21
- @navds-spacing-24: 6rem;
22
- @navds-spacing-32: 8rem;
5
+ @navds-font-family: "Source Sans Pro", Arial, sans-serif;
6
+ @navds-font-line-height-heading-2xlarge: 3.25rem;
7
+ @navds-font-line-height-heading-xlarge: 2.5rem;
8
+ @navds-font-line-height-heading-large: 2.25rem;
9
+ @navds-font-line-height-heading-medium: 2rem;
10
+ @navds-font-line-height-heading-small: 1.75rem;
11
+ @navds-font-line-height-heading-xsmall: 1.5rem;
12
+ @navds-font-line-height-xlarge: 1.75rem;
13
+ @navds-font-line-height-large: 1.5rem;
14
+ @navds-font-line-height-medium: 1.25rem;
15
+ @navds-font-size-heading-2xlarge: 2.5rem;
16
+ @navds-font-size-heading-xlarge: 2rem;
17
+ @navds-font-size-heading-large: 1.75rem;
18
+ @navds-font-size-heading-medium: 1.5rem;
19
+ @navds-font-size-heading-small: 1.25rem;
20
+ @navds-font-size-heading-xsmall: 1.125rem;
21
+ @navds-font-size-xlarge: 1.25rem;
22
+ @navds-font-size-large: 1.125rem;
23
+ @navds-font-size-medium: 1rem;
24
+ @navds-font-size-small: 0.875rem;
25
+ @navds-font-weight-bold: 600;
26
+ @navds-font-weight-regular: 400;
27
+ @navds-shadow-focus: 0 0 0 3px rgba(0, 52, 125, 1);
28
+ @navds-shadow-focus-inverted: 0 0 0 3px rgba(153, 195, 255, 1);
29
+ @navds-shadow-popover: 0 2px 4px 0 rgba(229, 229, 229, 1);
30
+ @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);
31
+ @navds-z-index-modal: 2000;
32
+ @navds-z-index-popover: 1000;
33
+ @navds-z-index-focus: 10;
23
34
  @navds-global-color-blue-50: rgba(230, 240, 255, 1);
24
35
  @navds-global-color-blue-100: rgba(204, 225, 255, 1);
25
36
  @navds-global-color-blue-200: rgba(153, 195, 255, 1);
@@ -42,10 +53,13 @@
42
53
  @navds-global-color-deepblue-900: rgba(0, 36, 58, 1);
43
54
  @navds-global-color-gray-50: rgba(247, 247, 247, 1);
44
55
  @navds-global-color-gray-100: rgba(241, 241, 241, 1);
45
- @navds-global-color-gray-200: rgba(201, 201, 201, 1);
46
- @navds-global-color-gray-400: rgba(160, 160, 160, 1);
47
- @navds-global-color-gray-600: rgba(106, 106, 106, 1);
48
- @navds-global-color-gray-800: rgba(79, 79, 79, 1);
56
+ @navds-global-color-gray-200: rgba(229, 229, 229, 1);
57
+ @navds-global-color-gray-300: rgba(207, 207, 207, 1);
58
+ @navds-global-color-gray-400: rgba(176, 176, 176, 1);
59
+ @navds-global-color-gray-500: rgba(143, 143, 143, 1);
60
+ @navds-global-color-gray-600: rgba(112, 112, 112, 1);
61
+ @navds-global-color-gray-700: rgba(89, 89, 89, 1);
62
+ @navds-global-color-gray-800: rgba(64, 64, 64, 1);
49
63
  @navds-global-color-gray-900: rgba(38, 38, 38, 1);
50
64
  @navds-global-color-green-50: rgba(243, 252, 245, 1);
51
65
  @navds-global-color-green-100: rgba(204, 241, 214, 1);
@@ -110,15 +124,16 @@
110
124
  @navds-global-color-red-900: rgba(72, 9, 0, 1);
111
125
  @navds-global-color-transparent: rgba(255, 255, 255, 0);
112
126
  @navds-global-color-white: rgba(255, 255, 255, 1);
113
- @navds-semantic-color-border-default: rgba(106, 106, 106, 1);
114
- @navds-semantic-color-border-muted: rgba(160, 160, 160, 1);
115
- @navds-semantic-color-canvas-background-default: rgba(241, 241, 241, 1);
127
+ @navds-semantic-color-border-inverted: rgba(229, 229, 229, 1);
128
+ @navds-semantic-color-border-muted: rgba(176, 176, 176, 1);
129
+ @navds-semantic-color-border: rgba(112, 112, 112, 1);
116
130
  @navds-semantic-color-canvas-background-inverted: rgba(38, 38, 38, 1);
117
131
  @navds-semantic-color-canvas-background-light: rgba(255, 255, 255, 1);
132
+ @navds-semantic-color-canvas-background: rgba(241, 241, 241, 1);
118
133
  @navds-semantic-color-component-background-alternate: rgba(247, 247, 247, 1);
119
134
  @navds-semantic-color-component-background-inverted: rgba(38, 38, 38, 1);
120
135
  @navds-semantic-color-component-background-light: rgba(255, 255, 255, 1);
121
- @navds-semantic-color-divider: rgba(201, 201, 201, 1);
136
+ @navds-semantic-color-divider: rgba(229, 229, 229, 1);
122
137
  @navds-semantic-color-feedback-danger-background: rgba(249, 210, 204, 1);
123
138
  @navds-semantic-color-feedback-danger-border: rgba(186, 58, 38, 1);
124
139
  @navds-semantic-color-feedback-danger-icon: rgba(186, 58, 38, 1);
@@ -132,171 +147,35 @@
132
147
  @navds-semantic-color-feedback-warning-background: rgba(255, 236, 204, 1);
133
148
  @navds-semantic-color-feedback-warning-border: rgba(212, 123, 0, 1);
134
149
  @navds-semantic-color-feedback-warning-icon: rgba(255, 145, 0, 1);
150
+ @navds-semantic-color-focus-inverted: rgba(153, 195, 255, 1);
135
151
  @navds-semantic-color-focus: rgba(0, 52, 125, 1);
136
- @navds-semantic-color-interaction-danger-default: rgba(186, 58, 38, 1);
137
152
  @navds-semantic-color-interaction-danger-hover: rgba(163, 42, 23, 1);
138
153
  @navds-semantic-color-interaction-danger-selected: rgba(136, 29, 12, 1);
139
- @navds-semantic-color-interaction-primary-default: rgba(0, 103, 197, 1);
154
+ @navds-semantic-color-interaction-danger: rgba(186, 58, 38, 1);
155
+ @navds-semantic-color-interaction-primary-hover-subtle: rgba(230, 240, 255, 1);
140
156
  @navds-semantic-color-interaction-primary-hover: rgba(0, 86, 180, 1);
141
157
  @navds-semantic-color-interaction-primary-selected: rgba(0, 91, 130, 1);
142
- @navds-semantic-color-text-default: rgba(38, 38, 38, 1);
158
+ @navds-semantic-color-interaction-primary: rgba(0, 103, 197, 1);
159
+ @navds-semantic-color-link-visited: rgba(99, 70, 137, 1);
160
+ @navds-semantic-color-link: rgba(0, 103, 197, 1);
143
161
  @navds-semantic-color-text-inverted: rgba(255, 255, 255, 1);
144
- @navds-semantic-color-text-link: rgba(0, 103, 197, 1);
145
- @navds-semantic-color-text-muted: rgba(106, 106, 106, 1);
146
- @navds-color-white: #ffffff;
147
- @navds-color-darkgray: #262626;
148
- @navds-color-gray-10: #F1F1F1;
149
- @navds-color-gray-20: #C9C9C9;
150
- @navds-color-gray-40: #A0A0A0;
151
- @navds-color-gray-60: #6A6A6A;
152
- @navds-color-gray-80: #4F4F4F;
153
- @navds-color-gray-90: #262626;
154
- @navds-color-blue-10: #CCE1FF;
155
- @navds-color-blue-20: #99C3FF;
156
- @navds-color-blue-30: #66A5F4;
157
- @navds-color-blue-40: #3386E0;
158
- @navds-color-blue-50: #0067c5;
159
- @navds-color-blue-60: #0056B4;
160
- @navds-color-blue-70: #00459C;
161
- @navds-color-blue-80: #00347D;
162
- @navds-color-blue-90: #002252;
163
- @navds-color-deepblue-10: #CCE2F0;
164
- @navds-color-deepblue-20: #99C4DD;
165
- @navds-color-deepblue-30: #66A3C4;
166
- @navds-color-deepblue-40: #3380A5;
167
- @navds-color-deepblue-50: #005B82;
168
- @navds-color-deepblue-60: #005077;
169
- @navds-color-deepblue-70: #004367;
170
- @navds-color-deepblue-80: #003453;
171
- @navds-color-deepblue-90: #00243A;
172
- @navds-color-lightblue-10: #D8F9FF;
173
- @navds-color-lightblue-20: #B5F1FF;
174
- @navds-color-lightblue-30: #97E6FF;
175
- @navds-color-lightblue-40: #7CDAF8;
176
- @navds-color-lightblue-50: #66CBEC;
177
- @navds-color-lightblue-60: #4CADCD;
178
- @navds-color-lightblue-70: #368DA8;
179
- @navds-color-lightblue-80: #236B7D;
180
- @navds-color-lightblue-90: #134852;
181
- @navds-color-orange-10: #FFECCC;
182
- @navds-color-orange-20: #FFD799;
183
- @navds-color-orange-30: #FFC166;
184
- @navds-color-orange-40: #FFAA33;
185
- @navds-color-orange-50: #FF9100;
186
- @navds-color-orange-60: #D47B00;
187
- @navds-color-orange-70: #A86400;
188
- @navds-color-orange-80: #7D4C00;
189
- @navds-color-orange-90: #523300;
190
- @navds-color-green-10: #CCF1D6;
191
- @navds-color-green-20: #99DEAD;
192
- @navds-color-green-30: #66C786;
193
- @navds-color-green-40: #33AA5F;
194
- @navds-color-green-50: #06893A;
195
- @navds-color-green-60: #007C2E;
196
- @navds-color-green-70: #006A23;
197
- @navds-color-green-80: #005519;
198
- @navds-color-green-90: #003B0F;
199
- @navds-color-red-10: #F9D2CC;
200
- @navds-color-red-20: #EFA89D;
201
- @navds-color-red-30: #E18071;
202
- @navds-color-red-40: #D05C4A;
203
- @navds-color-red-50: #BA3A26;
204
- @navds-color-red-60: #A32A17;
205
- @navds-color-red-70: #881D0C;
206
- @navds-color-red-80: #6A1204;
207
- @navds-color-red-90: #480900;
208
- @navds-color-purple-10: #E0D8E9;
209
- @navds-color-purple-20: #C0B2D2;
210
- @navds-color-purple-30: #A18DBB;
211
- @navds-color-purple-40: #8269A2;
212
- @navds-color-purple-50: #634689;
213
- @navds-color-purple-60: #523874;
214
- @navds-color-purple-70: #412B5D;
215
- @navds-color-purple-80: #301F46;
216
- @navds-color-purple-90: #1F142F;
217
- @navds-color-limegreen-10: #F9FCCC;
218
- @navds-color-limegreen-20: #ECF399;
219
- @navds-color-limegreen-30: #D9E366;
220
- @navds-color-limegreen-40: #C1CB33;
221
- @navds-color-limegreen-50: #a2ad00;
222
- @navds-color-limegreen-60: #939E00;
223
- @navds-color-limegreen-70: #7F8900;
224
- @navds-color-limegreen-80: #666E00;
225
- @navds-color-limegreen-90: #474E00;
226
- @navds-color-disabled: #A0A0A0;
227
- @navds-color-action-default: #0067c5;
228
- @navds-color-action-hover: #0056B4;
229
- @navds-color-action-active: #005B82;
230
- @navds-color-danger-default: #BA3A26;
231
- @navds-color-danger-hover: #A32A17;
232
- @navds-color-danger-active: #881D0C;
233
- @navds-color-error-border: #BA3A26;
234
- @navds-color-error-background: #F9D2CC;
235
- @navds-color-warning-border: #D47B00;
236
- @navds-color-warning-background: #FFECCC;
237
- @navds-color-info-border: #368DA8;
238
- @navds-color-info-background: #D8F9FF;
239
- @navds-color-success-border: #06893A;
240
- @navds-color-success-background: #CCF1D6;
241
- @navds-color-border: #A0A0A0;
242
- @navds-color-background: #ffffff;
243
- @navds-color-text-primary: #262626;
244
- @navds-color-text-inverse: #ffffff;
245
- @navds-color-text-disabled: #6A6A6A;
246
- @navds-color-text-link: #0067c5;
247
- @navds-color-text-error: #BA3A26;
248
- @navds-color-hover: #A0A0A0;
249
- @navds-color-tag-error-border: #BA3A26;
250
- @navds-color-tag-error-background: #F9D2CC;
251
- @navds-color-tag-warning-border: #D47B00;
252
- @navds-color-tag-warning-background: #FFECCC;
253
- @navds-color-tag-info-border: #368DA8;
254
- @navds-color-tag-info-background: #D8F9FF;
255
- @navds-color-tag-success-border: #06893A;
256
- @navds-color-tag-success-background: #CCF1D6;
257
- @navds-color-modal-overlay: rgba(38, 38, 38, 0.7);
258
- @navds-border-default: 1px solid #A0A0A0;
259
- @navds-border-radius: 4px;
260
- @navds-panel-hover: 1px solid #0067c5;
261
- @navds-font-family: "Source Sans Pro", Arial, sans-serif;
262
- @navds-font-line-height-heading-2xlarge: 3.25rem;
263
- @navds-font-line-height-heading-xlarge: 2.5rem;
264
- @navds-font-line-height-heading-large: 2.25rem;
265
- @navds-font-line-height-heading-medium: 2rem;
266
- @navds-font-line-height-heading-small: 1.75rem;
267
- @navds-font-line-height-heading-xsmall: 1.5rem;
268
- @navds-font-line-height-xlarge: 1.75rem;
269
- @navds-font-line-height-large: 1.5rem;
270
- @navds-font-line-height-medium: 1.25rem;
271
- @navds-font-size-heading-2xlarge: 2.5rem;
272
- @navds-font-size-heading-xlarge: 2rem;
273
- @navds-font-size-heading-large: 1.75rem;
274
- @navds-font-size-heading-medium: 1.5rem;
275
- @navds-font-size-heading-small: 1.25rem;
276
- @navds-font-size-heading-xsmall: 1.125rem;
277
- @navds-font-size-xlarge: 1.25rem;
278
- @navds-font-size-large: 1.125rem;
279
- @navds-font-size-medium: 1rem;
280
- @navds-font-size-small: 0.875rem;
281
- @navds-font-weight-bold: 600;
282
- @navds-font-weight-regular: 400;
283
- @navds-shadow-focus: 0 0 0 3px #00347D;
284
- @navds-shadow-focus-on-dark: 0 0 0 3px #FFAA33;
285
- @navds-shadow-hover: #A0A0A0 0 2px 1px 0;
286
- @navds-text-focus: #00347D;
287
- @navds-text-shadow: 0 0 0 2px #00347D;
288
- @navds-content-container-max-width: 79.5rem;
289
- @navds-content-container-padding-small: 1rem;
290
- @navds-content-container-padding-medium-and-larger: 1.5rem;
291
- @navds-grid-gutter-small: 1rem;
292
- @navds-grid-gutter-medium-and-larger: 1.5rem;
293
- @navds-layout-background-white: #ffffff;
294
- @navds-layout-background-gray: #F1F1F1;
295
- @navds-layout-padding-small: 1rem;
296
- @navds-layout-padding-medium-and-larger: 2.5rem;
297
- @navds-z-index-modal: 2000;
298
- @navds-z-index-popover: 1000;
299
- @navds-z-index-focus: 10;
300
- @navds-sidebar-sticky-offset: 0;
301
- @navds-checkmark-image-white: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
302
- @navds-checkmark-image-blue: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjMDA2N0M1IiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
162
+ @navds-semantic-color-text-muted: rgba(112, 112, 112, 1);
163
+ @navds-semantic-color-text: rgba(38, 38, 38, 1);
164
+ @navds-spacing-1: 0.25rem;
165
+ @navds-spacing-2: 0.5rem;
166
+ @navds-spacing-3: 0.75rem;
167
+ @navds-spacing-4: 1rem;
168
+ @navds-spacing-5: 1.25rem;
169
+ @navds-spacing-6: 1.5rem;
170
+ @navds-spacing-7: 1.75rem;
171
+ @navds-spacing-8: 2rem;
172
+ @navds-spacing-9: 2.25rem;
173
+ @navds-spacing-10: 2.5rem;
174
+ @navds-spacing-11: 2.75rem;
175
+ @navds-spacing-12: 3rem;
176
+ @navds-spacing-14: 3.5rem;
177
+ @navds-spacing-16: 4rem;
178
+ @navds-spacing-18: 4.5rem;
179
+ @navds-spacing-20: 5rem;
180
+ @navds-spacing-24: 6rem;
181
+ @navds-spacing-32: 8rem;
package/dist/tokens.scss CHANGED
@@ -1,25 +1,36 @@
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
- $navds-spacing-1: 0.25rem;
6
- $navds-spacing-2: 0.5rem;
7
- $navds-spacing-3: 0.75rem;
8
- $navds-spacing-4: 1rem;
9
- $navds-spacing-5: 1.25rem;
10
- $navds-spacing-6: 1.5rem;
11
- $navds-spacing-7: 1.75rem;
12
- $navds-spacing-8: 2rem;
13
- $navds-spacing-9: 2.25rem;
14
- $navds-spacing-10: 2.5rem;
15
- $navds-spacing-11: 2.75rem;
16
- $navds-spacing-12: 3rem;
17
- $navds-spacing-14: 3.5rem;
18
- $navds-spacing-16: 4rem;
19
- $navds-spacing-18: 4.5rem;
20
- $navds-spacing-20: 5rem;
21
- $navds-spacing-24: 6rem;
22
- $navds-spacing-32: 8rem;
5
+ $navds-font-family: "Source Sans Pro", Arial, sans-serif;
6
+ $navds-font-line-height-heading-2xlarge: 3.25rem;
7
+ $navds-font-line-height-heading-xlarge: 2.5rem;
8
+ $navds-font-line-height-heading-large: 2.25rem;
9
+ $navds-font-line-height-heading-medium: 2rem;
10
+ $navds-font-line-height-heading-small: 1.75rem;
11
+ $navds-font-line-height-heading-xsmall: 1.5rem;
12
+ $navds-font-line-height-xlarge: 1.75rem;
13
+ $navds-font-line-height-large: 1.5rem;
14
+ $navds-font-line-height-medium: 1.25rem;
15
+ $navds-font-size-heading-2xlarge: 2.5rem;
16
+ $navds-font-size-heading-xlarge: 2rem;
17
+ $navds-font-size-heading-large: 1.75rem;
18
+ $navds-font-size-heading-medium: 1.5rem;
19
+ $navds-font-size-heading-small: 1.25rem;
20
+ $navds-font-size-heading-xsmall: 1.125rem;
21
+ $navds-font-size-xlarge: 1.25rem;
22
+ $navds-font-size-large: 1.125rem;
23
+ $navds-font-size-medium: 1rem;
24
+ $navds-font-size-small: 0.875rem;
25
+ $navds-font-weight-bold: 600;
26
+ $navds-font-weight-regular: 400;
27
+ $navds-shadow-focus: 0 0 0 3px rgba(0, 52, 125, 1);
28
+ $navds-shadow-focus-inverted: 0 0 0 3px rgba(153, 195, 255, 1);
29
+ $navds-shadow-popover: 0 2px 4px 0 rgba(229, 229, 229, 1);
30
+ $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);
31
+ $navds-z-index-modal: 2000;
32
+ $navds-z-index-popover: 1000;
33
+ $navds-z-index-focus: 10;
23
34
  $navds-global-color-blue-50: rgba(230, 240, 255, 1);
24
35
  $navds-global-color-blue-100: rgba(204, 225, 255, 1);
25
36
  $navds-global-color-blue-200: rgba(153, 195, 255, 1);
@@ -42,10 +53,13 @@ $navds-global-color-deepblue-800: rgba(0, 52, 83, 1);
42
53
  $navds-global-color-deepblue-900: rgba(0, 36, 58, 1);
43
54
  $navds-global-color-gray-50: rgba(247, 247, 247, 1);
44
55
  $navds-global-color-gray-100: rgba(241, 241, 241, 1);
45
- $navds-global-color-gray-200: rgba(201, 201, 201, 1);
46
- $navds-global-color-gray-400: rgba(160, 160, 160, 1);
47
- $navds-global-color-gray-600: rgba(106, 106, 106, 1);
48
- $navds-global-color-gray-800: rgba(79, 79, 79, 1);
56
+ $navds-global-color-gray-200: rgba(229, 229, 229, 1);
57
+ $navds-global-color-gray-300: rgba(207, 207, 207, 1);
58
+ $navds-global-color-gray-400: rgba(176, 176, 176, 1);
59
+ $navds-global-color-gray-500: rgba(143, 143, 143, 1);
60
+ $navds-global-color-gray-600: rgba(112, 112, 112, 1);
61
+ $navds-global-color-gray-700: rgba(89, 89, 89, 1);
62
+ $navds-global-color-gray-800: rgba(64, 64, 64, 1);
49
63
  $navds-global-color-gray-900: rgba(38, 38, 38, 1);
50
64
  $navds-global-color-green-50: rgba(243, 252, 245, 1);
51
65
  $navds-global-color-green-100: rgba(204, 241, 214, 1);
@@ -110,15 +124,16 @@ $navds-global-color-red-800: rgba(106, 18, 4, 1);
110
124
  $navds-global-color-red-900: rgba(72, 9, 0, 1);
111
125
  $navds-global-color-transparent: rgba(255, 255, 255, 0);
112
126
  $navds-global-color-white: rgba(255, 255, 255, 1);
113
- $navds-semantic-color-border-default: rgba(106, 106, 106, 1);
114
- $navds-semantic-color-border-muted: rgba(160, 160, 160, 1);
115
- $navds-semantic-color-canvas-background-default: rgba(241, 241, 241, 1);
127
+ $navds-semantic-color-border-inverted: rgba(229, 229, 229, 1);
128
+ $navds-semantic-color-border-muted: rgba(176, 176, 176, 1);
129
+ $navds-semantic-color-border: rgba(112, 112, 112, 1);
116
130
  $navds-semantic-color-canvas-background-inverted: rgba(38, 38, 38, 1);
117
131
  $navds-semantic-color-canvas-background-light: rgba(255, 255, 255, 1);
132
+ $navds-semantic-color-canvas-background: rgba(241, 241, 241, 1);
118
133
  $navds-semantic-color-component-background-alternate: rgba(247, 247, 247, 1);
119
134
  $navds-semantic-color-component-background-inverted: rgba(38, 38, 38, 1);
120
135
  $navds-semantic-color-component-background-light: rgba(255, 255, 255, 1);
121
- $navds-semantic-color-divider: rgba(201, 201, 201, 1);
136
+ $navds-semantic-color-divider: rgba(229, 229, 229, 1);
122
137
  $navds-semantic-color-feedback-danger-background: rgba(249, 210, 204, 1);
123
138
  $navds-semantic-color-feedback-danger-border: rgba(186, 58, 38, 1);
124
139
  $navds-semantic-color-feedback-danger-icon: rgba(186, 58, 38, 1);
@@ -132,171 +147,35 @@ $navds-semantic-color-feedback-success-icon: rgba(0, 124, 46, 1);
132
147
  $navds-semantic-color-feedback-warning-background: rgba(255, 236, 204, 1);
133
148
  $navds-semantic-color-feedback-warning-border: rgba(212, 123, 0, 1);
134
149
  $navds-semantic-color-feedback-warning-icon: rgba(255, 145, 0, 1);
150
+ $navds-semantic-color-focus-inverted: rgba(153, 195, 255, 1);
135
151
  $navds-semantic-color-focus: rgba(0, 52, 125, 1);
136
- $navds-semantic-color-interaction-danger-default: rgba(186, 58, 38, 1);
137
152
  $navds-semantic-color-interaction-danger-hover: rgba(163, 42, 23, 1);
138
153
  $navds-semantic-color-interaction-danger-selected: rgba(136, 29, 12, 1);
139
- $navds-semantic-color-interaction-primary-default: rgba(0, 103, 197, 1);
154
+ $navds-semantic-color-interaction-danger: rgba(186, 58, 38, 1);
155
+ $navds-semantic-color-interaction-primary-hover-subtle: rgba(230, 240, 255, 1);
140
156
  $navds-semantic-color-interaction-primary-hover: rgba(0, 86, 180, 1);
141
157
  $navds-semantic-color-interaction-primary-selected: rgba(0, 91, 130, 1);
142
- $navds-semantic-color-text-default: rgba(38, 38, 38, 1);
158
+ $navds-semantic-color-interaction-primary: rgba(0, 103, 197, 1);
159
+ $navds-semantic-color-link-visited: rgba(99, 70, 137, 1);
160
+ $navds-semantic-color-link: rgba(0, 103, 197, 1);
143
161
  $navds-semantic-color-text-inverted: rgba(255, 255, 255, 1);
144
- $navds-semantic-color-text-link: rgba(0, 103, 197, 1);
145
- $navds-semantic-color-text-muted: rgba(106, 106, 106, 1);
146
- $navds-color-white: #ffffff;
147
- $navds-color-darkgray: #262626;
148
- $navds-color-gray-10: #F1F1F1;
149
- $navds-color-gray-20: #C9C9C9;
150
- $navds-color-gray-40: #A0A0A0;
151
- $navds-color-gray-60: #6A6A6A;
152
- $navds-color-gray-80: #4F4F4F;
153
- $navds-color-gray-90: #262626;
154
- $navds-color-blue-10: #CCE1FF;
155
- $navds-color-blue-20: #99C3FF;
156
- $navds-color-blue-30: #66A5F4;
157
- $navds-color-blue-40: #3386E0;
158
- $navds-color-blue-50: #0067c5;
159
- $navds-color-blue-60: #0056B4;
160
- $navds-color-blue-70: #00459C;
161
- $navds-color-blue-80: #00347D;
162
- $navds-color-blue-90: #002252;
163
- $navds-color-deepblue-10: #CCE2F0;
164
- $navds-color-deepblue-20: #99C4DD;
165
- $navds-color-deepblue-30: #66A3C4;
166
- $navds-color-deepblue-40: #3380A5;
167
- $navds-color-deepblue-50: #005B82;
168
- $navds-color-deepblue-60: #005077;
169
- $navds-color-deepblue-70: #004367;
170
- $navds-color-deepblue-80: #003453;
171
- $navds-color-deepblue-90: #00243A;
172
- $navds-color-lightblue-10: #D8F9FF;
173
- $navds-color-lightblue-20: #B5F1FF;
174
- $navds-color-lightblue-30: #97E6FF;
175
- $navds-color-lightblue-40: #7CDAF8;
176
- $navds-color-lightblue-50: #66CBEC;
177
- $navds-color-lightblue-60: #4CADCD;
178
- $navds-color-lightblue-70: #368DA8;
179
- $navds-color-lightblue-80: #236B7D;
180
- $navds-color-lightblue-90: #134852;
181
- $navds-color-orange-10: #FFECCC;
182
- $navds-color-orange-20: #FFD799;
183
- $navds-color-orange-30: #FFC166;
184
- $navds-color-orange-40: #FFAA33;
185
- $navds-color-orange-50: #FF9100;
186
- $navds-color-orange-60: #D47B00;
187
- $navds-color-orange-70: #A86400;
188
- $navds-color-orange-80: #7D4C00;
189
- $navds-color-orange-90: #523300;
190
- $navds-color-green-10: #CCF1D6;
191
- $navds-color-green-20: #99DEAD;
192
- $navds-color-green-30: #66C786;
193
- $navds-color-green-40: #33AA5F;
194
- $navds-color-green-50: #06893A;
195
- $navds-color-green-60: #007C2E;
196
- $navds-color-green-70: #006A23;
197
- $navds-color-green-80: #005519;
198
- $navds-color-green-90: #003B0F;
199
- $navds-color-red-10: #F9D2CC;
200
- $navds-color-red-20: #EFA89D;
201
- $navds-color-red-30: #E18071;
202
- $navds-color-red-40: #D05C4A;
203
- $navds-color-red-50: #BA3A26;
204
- $navds-color-red-60: #A32A17;
205
- $navds-color-red-70: #881D0C;
206
- $navds-color-red-80: #6A1204;
207
- $navds-color-red-90: #480900;
208
- $navds-color-purple-10: #E0D8E9;
209
- $navds-color-purple-20: #C0B2D2;
210
- $navds-color-purple-30: #A18DBB;
211
- $navds-color-purple-40: #8269A2;
212
- $navds-color-purple-50: #634689;
213
- $navds-color-purple-60: #523874;
214
- $navds-color-purple-70: #412B5D;
215
- $navds-color-purple-80: #301F46;
216
- $navds-color-purple-90: #1F142F;
217
- $navds-color-limegreen-10: #F9FCCC;
218
- $navds-color-limegreen-20: #ECF399;
219
- $navds-color-limegreen-30: #D9E366;
220
- $navds-color-limegreen-40: #C1CB33;
221
- $navds-color-limegreen-50: #a2ad00;
222
- $navds-color-limegreen-60: #939E00;
223
- $navds-color-limegreen-70: #7F8900;
224
- $navds-color-limegreen-80: #666E00;
225
- $navds-color-limegreen-90: #474E00;
226
- $navds-color-disabled: #A0A0A0;
227
- $navds-color-action-default: #0067c5;
228
- $navds-color-action-hover: #0056B4;
229
- $navds-color-action-active: #005B82;
230
- $navds-color-danger-default: #BA3A26;
231
- $navds-color-danger-hover: #A32A17;
232
- $navds-color-danger-active: #881D0C;
233
- $navds-color-error-border: #BA3A26;
234
- $navds-color-error-background: #F9D2CC;
235
- $navds-color-warning-border: #D47B00;
236
- $navds-color-warning-background: #FFECCC;
237
- $navds-color-info-border: #368DA8;
238
- $navds-color-info-background: #D8F9FF;
239
- $navds-color-success-border: #06893A;
240
- $navds-color-success-background: #CCF1D6;
241
- $navds-color-border: #A0A0A0;
242
- $navds-color-background: #ffffff;
243
- $navds-color-text-primary: #262626;
244
- $navds-color-text-inverse: #ffffff;
245
- $navds-color-text-disabled: #6A6A6A;
246
- $navds-color-text-link: #0067c5;
247
- $navds-color-text-error: #BA3A26;
248
- $navds-color-hover: #A0A0A0;
249
- $navds-color-tag-error-border: #BA3A26;
250
- $navds-color-tag-error-background: #F9D2CC;
251
- $navds-color-tag-warning-border: #D47B00;
252
- $navds-color-tag-warning-background: #FFECCC;
253
- $navds-color-tag-info-border: #368DA8;
254
- $navds-color-tag-info-background: #D8F9FF;
255
- $navds-color-tag-success-border: #06893A;
256
- $navds-color-tag-success-background: #CCF1D6;
257
- $navds-color-modal-overlay: rgba(38, 38, 38, 0.7);
258
- $navds-border-default: 1px solid #A0A0A0;
259
- $navds-border-radius: 4px;
260
- $navds-panel-hover: 1px solid #0067c5;
261
- $navds-font-family: "Source Sans Pro", Arial, sans-serif;
262
- $navds-font-line-height-heading-2xlarge: 3.25rem;
263
- $navds-font-line-height-heading-xlarge: 2.5rem;
264
- $navds-font-line-height-heading-large: 2.25rem;
265
- $navds-font-line-height-heading-medium: 2rem;
266
- $navds-font-line-height-heading-small: 1.75rem;
267
- $navds-font-line-height-heading-xsmall: 1.5rem;
268
- $navds-font-line-height-xlarge: 1.75rem;
269
- $navds-font-line-height-large: 1.5rem;
270
- $navds-font-line-height-medium: 1.25rem;
271
- $navds-font-size-heading-2xlarge: 2.5rem;
272
- $navds-font-size-heading-xlarge: 2rem;
273
- $navds-font-size-heading-large: 1.75rem;
274
- $navds-font-size-heading-medium: 1.5rem;
275
- $navds-font-size-heading-small: 1.25rem;
276
- $navds-font-size-heading-xsmall: 1.125rem;
277
- $navds-font-size-xlarge: 1.25rem;
278
- $navds-font-size-large: 1.125rem;
279
- $navds-font-size-medium: 1rem;
280
- $navds-font-size-small: 0.875rem;
281
- $navds-font-weight-bold: 600;
282
- $navds-font-weight-regular: 400;
283
- $navds-shadow-focus: 0 0 0 3px #00347D;
284
- $navds-shadow-focus-on-dark: 0 0 0 3px #FFAA33;
285
- $navds-shadow-hover: #A0A0A0 0 2px 1px 0;
286
- $navds-text-focus: #00347D;
287
- $navds-text-shadow: 0 0 0 2px #00347D;
288
- $navds-content-container-max-width: 79.5rem;
289
- $navds-content-container-padding-small: 1rem;
290
- $navds-content-container-padding-medium-and-larger: 1.5rem;
291
- $navds-grid-gutter-small: 1rem;
292
- $navds-grid-gutter-medium-and-larger: 1.5rem;
293
- $navds-layout-background-white: #ffffff;
294
- $navds-layout-background-gray: #F1F1F1;
295
- $navds-layout-padding-small: 1rem;
296
- $navds-layout-padding-medium-and-larger: 2.5rem;
297
- $navds-z-index-modal: 2000;
298
- $navds-z-index-popover: 1000;
299
- $navds-z-index-focus: 10;
300
- $navds-sidebar-sticky-offset: 0;
301
- $navds-checkmark-image-white: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
302
- $navds-checkmark-image-blue: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjMDA2N0M1IiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
162
+ $navds-semantic-color-text-muted: rgba(112, 112, 112, 1);
163
+ $navds-semantic-color-text: rgba(38, 38, 38, 1);
164
+ $navds-spacing-1: 0.25rem;
165
+ $navds-spacing-2: 0.5rem;
166
+ $navds-spacing-3: 0.75rem;
167
+ $navds-spacing-4: 1rem;
168
+ $navds-spacing-5: 1.25rem;
169
+ $navds-spacing-6: 1.5rem;
170
+ $navds-spacing-7: 1.75rem;
171
+ $navds-spacing-8: 2rem;
172
+ $navds-spacing-9: 2.25rem;
173
+ $navds-spacing-10: 2.5rem;
174
+ $navds-spacing-11: 2.75rem;
175
+ $navds-spacing-12: 3rem;
176
+ $navds-spacing-14: 3.5rem;
177
+ $navds-spacing-16: 4rem;
178
+ $navds-spacing-18: 4.5rem;
179
+ $navds-spacing-20: 5rem;
180
+ $navds-spacing-24: 6rem;
181
+ $navds-spacing-32: 8rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-tokens",
3
- "version": "0.6.2",
3
+ "version": "0.8.0",
4
4
  "private": false,
5
5
  "description": "Auto-generated design-tokens for NAV design-systems framework",
6
6
  "author": "NAV Designsystem team",
@@ -30,7 +30,7 @@
30
30
  },
31
31
  "devDependencies": {
32
32
  "@types/jest": "^27.0.1",
33
- "color": "^4.0.1",
33
+ "axios": "^0.21.3",
34
34
  "dotenv": "^10.0.0",
35
35
  "figma-api": "^1.7.0",
36
36
  "jest": "^27.2.0",
@@ -40,5 +40,5 @@
40
40
  "ts-jest": "^27.0.5",
41
41
  "ts-node": "^10.3.0"
42
42
  },
43
- "gitHead": "c291a6106f1b753b6a5fd3c75c5ecf0ebf3d45f5"
43
+ "gitHead": "f464347f6e6cb8945c74fe1d95d459c731ee3629"
44
44
  }