@navikt/ds-tokens 0.6.3 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/tokens-cjs.js +58 -182
  2. package/dist/tokens.css +58 -182
  3. package/dist/tokens.js +58 -182
  4. package/dist/tokens.less +58 -182
  5. package/dist/tokens.scss +58 -182
  6. package/package.json +2 -3
  7. package/src/colors.json +36 -22
  8. package/src/index.js +8 -180
package/dist/tokens.scss CHANGED
@@ -1,25 +1,36 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 17 Nov 2021 14:24:58 GMT
3
+ // Generated on Tue, 07 Dec 2021 15:09:16 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(201, 201, 201, 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);
@@ -110,11 +121,12 @@ $navds-global-color-red-800: rgba(106, 18, 4, 1);
110
121
  $navds-global-color-red-900: rgba(72, 9, 0, 1);
111
122
  $navds-global-color-transparent: rgba(255, 255, 255, 0);
112
123
  $navds-global-color-white: rgba(255, 255, 255, 1);
113
- $navds-semantic-color-border-default: rgba(106, 106, 106, 1);
124
+ $navds-semantic-color-border-inverted: rgba(201, 201, 201, 1);
114
125
  $navds-semantic-color-border-muted: rgba(160, 160, 160, 1);
115
- $navds-semantic-color-canvas-background-default: rgba(241, 241, 241, 1);
126
+ $navds-semantic-color-border: rgba(106, 106, 106, 1);
116
127
  $navds-semantic-color-canvas-background-inverted: rgba(38, 38, 38, 1);
117
128
  $navds-semantic-color-canvas-background-light: rgba(255, 255, 255, 1);
129
+ $navds-semantic-color-canvas-background: rgba(241, 241, 241, 1);
118
130
  $navds-semantic-color-component-background-alternate: rgba(247, 247, 247, 1);
119
131
  $navds-semantic-color-component-background-inverted: rgba(38, 38, 38, 1);
120
132
  $navds-semantic-color-component-background-light: rgba(255, 255, 255, 1);
@@ -132,171 +144,35 @@ $navds-semantic-color-feedback-success-icon: rgba(0, 124, 46, 1);
132
144
  $navds-semantic-color-feedback-warning-background: rgba(255, 236, 204, 1);
133
145
  $navds-semantic-color-feedback-warning-border: rgba(212, 123, 0, 1);
134
146
  $navds-semantic-color-feedback-warning-icon: rgba(255, 145, 0, 1);
147
+ $navds-semantic-color-focus-inverted: rgba(153, 195, 255, 1);
135
148
  $navds-semantic-color-focus: rgba(0, 52, 125, 1);
136
- $navds-semantic-color-interaction-danger-default: rgba(186, 58, 38, 1);
137
149
  $navds-semantic-color-interaction-danger-hover: rgba(163, 42, 23, 1);
138
150
  $navds-semantic-color-interaction-danger-selected: rgba(136, 29, 12, 1);
139
- $navds-semantic-color-interaction-primary-default: rgba(0, 103, 197, 1);
151
+ $navds-semantic-color-interaction-danger: rgba(186, 58, 38, 1);
152
+ $navds-semantic-color-interaction-primary-hover-subtle: rgba(230, 240, 255, 1);
140
153
  $navds-semantic-color-interaction-primary-hover: rgba(0, 86, 180, 1);
141
154
  $navds-semantic-color-interaction-primary-selected: rgba(0, 91, 130, 1);
142
- $navds-semantic-color-text-default: rgba(38, 38, 38, 1);
155
+ $navds-semantic-color-interaction-primary: rgba(0, 103, 197, 1);
156
+ $navds-semantic-color-link-visited: rgba(99, 70, 137, 1);
157
+ $navds-semantic-color-link: rgba(0, 103, 197, 1);
143
158
  $navds-semantic-color-text-inverted: rgba(255, 255, 255, 1);
144
- $navds-semantic-color-text-link: rgba(0, 103, 197, 1);
145
159
  $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==);
160
+ $navds-semantic-color-text: rgba(38, 38, 38, 1);
161
+ $navds-spacing-1: 0.25rem;
162
+ $navds-spacing-2: 0.5rem;
163
+ $navds-spacing-3: 0.75rem;
164
+ $navds-spacing-4: 1rem;
165
+ $navds-spacing-5: 1.25rem;
166
+ $navds-spacing-6: 1.5rem;
167
+ $navds-spacing-7: 1.75rem;
168
+ $navds-spacing-8: 2rem;
169
+ $navds-spacing-9: 2.25rem;
170
+ $navds-spacing-10: 2.5rem;
171
+ $navds-spacing-11: 2.75rem;
172
+ $navds-spacing-12: 3rem;
173
+ $navds-spacing-14: 3.5rem;
174
+ $navds-spacing-16: 4rem;
175
+ $navds-spacing-18: 4.5rem;
176
+ $navds-spacing-20: 5rem;
177
+ $navds-spacing-24: 6rem;
178
+ $navds-spacing-32: 8rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-tokens",
3
- "version": "0.6.3",
3
+ "version": "0.7.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,6 @@
30
30
  },
31
31
  "devDependencies": {
32
32
  "@types/jest": "^27.0.1",
33
- "color": "^4.0.1",
34
33
  "dotenv": "^10.0.0",
35
34
  "figma-api": "^1.7.0",
36
35
  "jest": "^27.2.0",
@@ -40,5 +39,5 @@
40
39
  "ts-jest": "^27.0.5",
41
40
  "ts-node": "^10.3.0"
42
41
  },
43
- "gitHead": "46f97b006f1ebd015a502a859d5d775cc4def74e"
42
+ "gitHead": "36d98e1d190652c21d78a259cf3d8942d271c167"
44
43
  }
package/src/colors.json CHANGED
@@ -297,23 +297,26 @@
297
297
  "semantic": {
298
298
  "color": {
299
299
  "border": {
300
- "default": {
301
- "value": "{navds.global.color.gray.600.value}"
300
+ "inverted": {
301
+ "value": "{navds.global.color.gray.200.value}"
302
302
  },
303
303
  "muted": {
304
304
  "value": "{navds.global.color.gray.400.value}"
305
+ },
306
+ "@": {
307
+ "value": "{navds.global.color.gray.600.value}"
305
308
  }
306
309
  },
307
310
  "canvas": {
308
311
  "background": {
309
- "default": {
310
- "value": "{navds.global.color.gray.100.value}"
311
- },
312
312
  "inverted": {
313
313
  "value": "{navds.global.color.gray.900.value}"
314
314
  },
315
315
  "light": {
316
316
  "value": "{navds.global.color.white.value}"
317
+ },
318
+ "@": {
319
+ "value": "{navds.global.color.gray.100.value}"
317
320
  }
318
321
  }
319
322
  },
@@ -383,50 +386,61 @@
383
386
  }
384
387
  },
385
388
  "focus": {
386
- "value": "{navds.global.color.blue.800.value}",
387
389
  "inverted": {
388
390
  "value": "{navds.global.color.blue.200.value}"
391
+ },
392
+ "@": {
393
+ "value": "{navds.global.color.blue.800.value}"
389
394
  }
390
395
  },
391
396
  "interaction": {
392
397
  "danger": {
393
- "default": {
394
- "value": "{navds.global.color.red.500.value}"
395
- },
396
398
  "hover": {
397
399
  "value": "{navds.global.color.red.600.value}"
398
400
  },
399
401
  "selected": {
400
402
  "value": "{navds.global.color.red.700.value}"
403
+ },
404
+ "@": {
405
+ "value": "{navds.global.color.red.500.value}"
401
406
  }
402
407
  },
403
408
  "primary": {
404
- "default": {
405
- "value": "{navds.global.color.blue.500.value}"
406
- },
407
409
  "hover": {
408
- "value": "{navds.global.color.blue.600.value}"
410
+ "subtle": {
411
+ "value": "{navds.global.color.blue.50.value}"
412
+ },
413
+ "@": {
414
+ "value": "{navds.global.color.blue.600.value}"
415
+ }
409
416
  },
410
417
  "selected": {
411
418
  "value": "{navds.global.color.deepblue.500.value}"
419
+ },
420
+ "@": {
421
+ "@": {
422
+ "value": "{navds.global.color.blue.500.value}"
423
+ }
412
424
  }
413
425
  }
414
426
  },
415
- "text": {
416
- "default": {
417
- "value": "{navds.global.color.gray.900.value}"
427
+ "link": {
428
+ "visited": {
429
+ "value": "{navds.global.color.purple.500.value}"
418
430
  },
431
+ "@": {
432
+ "value": "{navds.global.color.blue.500.value}"
433
+ }
434
+ },
435
+ "text": {
419
436
  "inverted": {
420
437
  "value": "{navds.global.color.white.value}"
421
438
  },
422
- "link": {
423
- "value": "{navds.global.color.blue.500.value}",
424
- "visited": {
425
- "value": "{navds.global.color.purple.500.value}"
426
- }
427
- },
428
439
  "muted": {
429
440
  "value": "{navds.global.color.gray.600.value}"
441
+ },
442
+ "@": {
443
+ "value": "{navds.global.color.gray.900.value}"
430
444
  }
431
445
  }
432
446
  }
package/src/index.js CHANGED
@@ -1,144 +1,8 @@
1
- const Color = require("color");
2
- const newColors = require("./colors.json");
3
- const newSpacing = require("./spacing.json");
4
-
5
1
  const baseFontSize = 16;
6
-
7
2
  const getFontSize = (size) => `${size / baseFontSize}rem`;
8
- // https://github.com/hihayk/scale/blob/69b766bba2db046d3e8cb4026ae32a32c897f9ff/src/utils.js#L44
9
- const mixColors = (color, step, amount, mixColor) => {
10
- const saturation = Math.round(Color(color).hsl().color[1]);
11
- // Setting directly to hex returns different result...
12
- return Color(
13
- Color(color)
14
- .saturate(((step + 1) / 5) * (saturation / 100))
15
- .mix(Color(mixColor), ((amount / 100) * (step + 1)) / 5)
16
- .string()
17
- ).hex();
18
- };
19
-
20
- const lightColor = (color, step) => mixColors(color, step, 100, "white");
21
- const darkColor = (color, step) => mixColors(color, step, 85, "black");
22
-
23
- const baseColors = {
24
- blue: "#0067c5",
25
- deepblue: "#005B82",
26
- lightblue: "#66CBEC",
27
- orange: "#FF9100",
28
- green: "#06893A",
29
- red: "#BA3A26",
30
- purple: "#634689",
31
- limegreen: "#a2ad00",
32
- };
33
-
34
- const white = "#ffffff";
35
- const darkgray = "#262626";
36
- const lightgray = "#F1F1F1";
37
-
38
- const gray = (n) => Color(lightgray).mix(Color(darkgray), n).hex();
39
3
 
40
4
  module.exports = {
41
5
  navds: {
42
- ...(newSpacing?.navds ?? {}),
43
- ...(newColors?.navds ?? {}),
44
- color: {
45
- white: { value: white },
46
- darkgray: { value: darkgray },
47
- gray: {
48
- 90: { value: gray(1) },
49
- 80: { value: gray(0.8) },
50
- 60: { value: gray(0.6667) },
51
- 40: { value: gray(0.4) },
52
- 20: { value: gray(0.196) },
53
- 10: { value: gray(0) },
54
- },
55
- ...Object.entries(baseColors).reduce(
56
- (colors, [name, color]) => ({
57
- ...colors,
58
- [name]: {
59
- 90: { value: darkColor(color, 3) },
60
- 80: { value: darkColor(color, 2) },
61
- 70: { value: darkColor(color, 1) },
62
- 60: { value: darkColor(color, 0) },
63
- 50: { value: color },
64
- 40: { value: lightColor(color, 0) },
65
- 30: { value: lightColor(color, 1) },
66
- 20: { value: lightColor(color, 2) },
67
- 10: { value: lightColor(color, 3) },
68
- },
69
- }),
70
- {}
71
- ),
72
- disabled: { value: "{navds.color.gray.40.value}" },
73
- action: {
74
- default: { value: "{navds.color.blue.50.value}" },
75
- hover: { value: "{navds.color.blue.60.value}" },
76
- active: { value: "{navds.color.deepblue.50.value}" },
77
- },
78
- danger: {
79
- default: { value: "{navds.color.red.50.value}" },
80
- hover: { value: "{navds.color.red.60.value}" },
81
- active: { value: "{navds.color.red.70.value}" },
82
- },
83
- error: {
84
- border: { value: "{navds.color.red.50.value}" },
85
- background: { value: "{navds.color.red.10.value}" },
86
- },
87
- warning: {
88
- border: { value: "{navds.color.orange.60.value}" },
89
- background: { value: "{navds.color.orange.10.value}" },
90
- },
91
- info: {
92
- border: { value: "{navds.color.lightblue.70.value}" },
93
- background: { value: "{navds.color.lightblue.10.value}" },
94
- },
95
- success: {
96
- border: { value: "{navds.color.green.50.value}" },
97
- background: { value: "{navds.color.green.10.value}" },
98
- },
99
- border: { value: "{navds.color.gray.40.value}" },
100
- background: { value: "{navds.color.white.value}" },
101
- text: {
102
- primary: { value: "{navds.color.gray.90.value}" },
103
- inverse: { value: "{navds.color.white.value}" },
104
- disabled: { value: "{navds.color.gray.60.value}" },
105
- link: { value: "{navds.color.blue.50.value}" },
106
- error: { value: "{navds.color.red.50.value}" },
107
- },
108
- hover: { value: "{navds.color.gray.40.value}" },
109
- tag: {
110
- error: {
111
- border: { value: "{navds.color.red.50.value}" },
112
- background: { value: "{navds.color.red.10.value}" },
113
- },
114
- warning: {
115
- border: { value: "{navds.color.orange.60.value}" },
116
- background: { value: "{navds.color.orange.10.value}" },
117
- },
118
- info: {
119
- border: { value: "{navds.color.lightblue.70.value}" },
120
- background: { value: "{navds.color.lightblue.10.value}" },
121
- },
122
- success: {
123
- border: { value: "{navds.color.green.50.value}" },
124
- background: { value: "{navds.color.green.10.value}" },
125
- },
126
- },
127
- modal: {
128
- overlay: {
129
- value: "rgba(38, 38, 38, 0.7)",
130
- },
131
- },
132
- },
133
- border: {
134
- default: {
135
- value: "1px solid {navds.color.border.value}",
136
- },
137
- radius: { value: "4px" },
138
- },
139
- panel: {
140
- hover: { value: "1px solid {navds.color.blue.50.value}" },
141
- },
142
6
  font: {
143
7
  family: { value: '"Source Sans Pro", Arial, sans-serif' },
144
8
  line: {
@@ -176,35 +40,16 @@ module.exports = {
176
40
  },
177
41
  },
178
42
  shadow: {
179
- focus: { value: "0 0 0 3px {navds.color.blue.80.value}" },
180
- "focus-on-dark": { value: "0 0 0 3px {navds.color.orange.40.value}" },
181
- hover: { value: "{navds.color.hover.value} 0 2px 1px 0" },
182
- },
183
- text: {
184
- focus: { value: "{navds.color.blue.80.value}" },
185
- shadow: { value: "0 0 0 2px {navds.color.blue.80.value}" },
186
- },
187
- contentContainer: {
188
- maxWidth: { value: "79.5rem" },
189
- padding: {
190
- small: { value: "{navds.spacing.4.value}" },
191
- mediumAndLarger: { value: "{navds.spacing.6.value}" },
43
+ focus: { value: "0 0 0 3px {navds.semantic.color.focus.@.value}" },
44
+ "focus-inverted": {
45
+ value: "0 0 0 3px {navds.semantic.color.focus.inverted.value}",
192
46
  },
193
- },
194
- grid: {
195
- gutter: {
196
- small: { value: "{navds.spacing.4.value}" },
197
- mediumAndLarger: { value: "{navds.spacing.6.value}" },
198
- },
199
- },
200
- layout: {
201
- background: {
202
- white: { value: white },
203
- gray: { value: "{navds.color.gray.10.value}" },
47
+ popover: {
48
+ value: "0 2px 4px 0 {navds.global.color.gray.200.value}",
204
49
  },
205
- padding: {
206
- small: { value: "{navds.spacing.4.value}" },
207
- mediumAndLarger: { value: "{navds.spacing.10.value}" },
50
+ card: {
51
+ value:
52
+ "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)",
208
53
  },
209
54
  },
210
55
  "z-index": {
@@ -212,22 +57,5 @@ module.exports = {
212
57
  popover: { value: 1000 },
213
58
  focus: { value: 10 },
214
59
  },
215
- sidebar: {
216
- sticky: {
217
- offset: { value: "0" },
218
- },
219
- },
220
- checkmark: {
221
- image: {
222
- white: {
223
- value:
224
- "url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==)",
225
- },
226
- blue: {
227
- value:
228
- "url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjMDA2N0M1IiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==)",
229
- },
230
- },
231
- },
232
60
  },
233
61
  };