@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.js CHANGED
@@ -1,26 +1,37 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 17 Nov 2021 14:24:59 GMT
3
+ * Generated on Tue, 07 Dec 2021 15:09:16 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(201, 201, 201, 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)";
@@ -111,11 +122,12 @@ export const NavdsGlobalColorRed800 = "rgba(106, 18, 4, 1)";
111
122
  export const NavdsGlobalColorRed900 = "rgba(72, 9, 0, 1)";
112
123
  export const NavdsGlobalColorTransparent = "rgba(255, 255, 255, 0)";
113
124
  export const NavdsGlobalColorWhite = "rgba(255, 255, 255, 1)";
114
- export const NavdsSemanticColorBorderDefault = "rgba(106, 106, 106, 1)";
125
+ export const NavdsSemanticColorBorderInverted = "rgba(201, 201, 201, 1)";
115
126
  export const NavdsSemanticColorBorderMuted = "rgba(160, 160, 160, 1)";
116
- export const NavdsSemanticColorCanvasBackgroundDefault = "rgba(241, 241, 241, 1)";
127
+ export const NavdsSemanticColorBorder = "rgba(106, 106, 106, 1)";
117
128
  export const NavdsSemanticColorCanvasBackgroundInverted = "rgba(38, 38, 38, 1)";
118
129
  export const NavdsSemanticColorCanvasBackgroundLight = "rgba(255, 255, 255, 1)";
130
+ export const NavdsSemanticColorCanvasBackground = "rgba(241, 241, 241, 1)";
119
131
  export const NavdsSemanticColorComponentBackgroundAlternate = "rgba(247, 247, 247, 1)";
120
132
  export const NavdsSemanticColorComponentBackgroundInverted = "rgba(38, 38, 38, 1)";
121
133
  export const NavdsSemanticColorComponentBackgroundLight = "rgba(255, 255, 255, 1)";
@@ -133,171 +145,35 @@ export const NavdsSemanticColorFeedbackSuccessIcon = "rgba(0, 124, 46, 1)";
133
145
  export const NavdsSemanticColorFeedbackWarningBackground = "rgba(255, 236, 204, 1)";
134
146
  export const NavdsSemanticColorFeedbackWarningBorder = "rgba(212, 123, 0, 1)";
135
147
  export const NavdsSemanticColorFeedbackWarningIcon = "rgba(255, 145, 0, 1)";
148
+ export const NavdsSemanticColorFocusInverted = "rgba(153, 195, 255, 1)";
136
149
  export const NavdsSemanticColorFocus = "rgba(0, 52, 125, 1)";
137
- export const NavdsSemanticColorInteractionDangerDefault = "rgba(186, 58, 38, 1)";
138
150
  export const NavdsSemanticColorInteractionDangerHover = "rgba(163, 42, 23, 1)";
139
151
  export const NavdsSemanticColorInteractionDangerSelected = "rgba(136, 29, 12, 1)";
140
- export const NavdsSemanticColorInteractionPrimaryDefault = "rgba(0, 103, 197, 1)";
152
+ export const NavdsSemanticColorInteractionDanger = "rgba(186, 58, 38, 1)";
153
+ export const NavdsSemanticColorInteractionPrimaryHoverSubtle = "rgba(230, 240, 255, 1)";
141
154
  export const NavdsSemanticColorInteractionPrimaryHover = "rgba(0, 86, 180, 1)";
142
155
  export const NavdsSemanticColorInteractionPrimarySelected = "rgba(0, 91, 130, 1)";
143
- export const NavdsSemanticColorTextDefault = "rgba(38, 38, 38, 1)";
156
+ export const NavdsSemanticColorInteractionPrimary = "rgba(0, 103, 197, 1)";
157
+ export const NavdsSemanticColorLinkVisited = "rgba(99, 70, 137, 1)";
158
+ export const NavdsSemanticColorLink = "rgba(0, 103, 197, 1)";
144
159
  export const NavdsSemanticColorTextInverted = "rgba(255, 255, 255, 1)";
145
- export const NavdsSemanticColorTextLink = "rgba(0, 103, 197, 1)";
146
160
  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==)";
161
+ export const NavdsSemanticColorText = "rgba(38, 38, 38, 1)";
162
+ export const NavdsSpacing1 = "0.25rem";
163
+ export const NavdsSpacing2 = "0.5rem";
164
+ export const NavdsSpacing3 = "0.75rem";
165
+ export const NavdsSpacing4 = "1rem";
166
+ export const NavdsSpacing5 = "1.25rem";
167
+ export const NavdsSpacing6 = "1.5rem";
168
+ export const NavdsSpacing7 = "1.75rem";
169
+ export const NavdsSpacing8 = "2rem";
170
+ export const NavdsSpacing9 = "2.25rem";
171
+ export const NavdsSpacing10 = "2.5rem";
172
+ export const NavdsSpacing11 = "2.75rem";
173
+ export const NavdsSpacing12 = "3rem";
174
+ export const NavdsSpacing14 = "3.5rem";
175
+ export const NavdsSpacing16 = "4rem";
176
+ export const NavdsSpacing18 = "4.5rem";
177
+ export const NavdsSpacing20 = "5rem";
178
+ export const NavdsSpacing24 = "6rem";
179
+ export const NavdsSpacing32 = "8rem";
package/dist/tokens.less 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 @@
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 @@
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;