@navikt/ds-tokens 0.6.0 → 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 +175 -3750
  2. package/dist/tokens.css +150 -151
  3. package/dist/tokens.js +150 -151
  4. package/dist/tokens.less +150 -151
  5. package/dist/tokens.scss +150 -151
  6. package/package.json +2 -3
  7. package/src/colors.json +449 -1
  8. package/src/index.js +8 -183
package/dist/tokens.less CHANGED
@@ -1,140 +1,7 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 11 Nov 2021 17:26:34 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;
23
- @navds-color-white: #ffffff;
24
- @navds-color-darkgray: #262626;
25
- @navds-color-gray-10: #F1F1F1;
26
- @navds-color-gray-20: #C9C9C9;
27
- @navds-color-gray-40: #A0A0A0;
28
- @navds-color-gray-60: #6A6A6A;
29
- @navds-color-gray-80: #4F4F4F;
30
- @navds-color-gray-90: #262626;
31
- @navds-color-blue-10: #CCE1FF;
32
- @navds-color-blue-20: #99C3FF;
33
- @navds-color-blue-30: #66A5F4;
34
- @navds-color-blue-40: #3386E0;
35
- @navds-color-blue-50: #0067c5;
36
- @navds-color-blue-60: #0056B4;
37
- @navds-color-blue-70: #00459C;
38
- @navds-color-blue-80: #00347D;
39
- @navds-color-blue-90: #002252;
40
- @navds-color-deepblue-10: #CCE2F0;
41
- @navds-color-deepblue-20: #99C4DD;
42
- @navds-color-deepblue-30: #66A3C4;
43
- @navds-color-deepblue-40: #3380A5;
44
- @navds-color-deepblue-50: #005B82;
45
- @navds-color-deepblue-60: #005077;
46
- @navds-color-deepblue-70: #004367;
47
- @navds-color-deepblue-80: #003453;
48
- @navds-color-deepblue-90: #00243A;
49
- @navds-color-lightblue-10: #D8F9FF;
50
- @navds-color-lightblue-20: #B5F1FF;
51
- @navds-color-lightblue-30: #97E6FF;
52
- @navds-color-lightblue-40: #7CDAF8;
53
- @navds-color-lightblue-50: #66CBEC;
54
- @navds-color-lightblue-60: #4CADCD;
55
- @navds-color-lightblue-70: #368DA8;
56
- @navds-color-lightblue-80: #236B7D;
57
- @navds-color-lightblue-90: #134852;
58
- @navds-color-orange-10: #FFECCC;
59
- @navds-color-orange-20: #FFD799;
60
- @navds-color-orange-30: #FFC166;
61
- @navds-color-orange-40: #FFAA33;
62
- @navds-color-orange-50: #FF9100;
63
- @navds-color-orange-60: #D47B00;
64
- @navds-color-orange-70: #A86400;
65
- @navds-color-orange-80: #7D4C00;
66
- @navds-color-orange-90: #523300;
67
- @navds-color-green-10: #CCF1D6;
68
- @navds-color-green-20: #99DEAD;
69
- @navds-color-green-30: #66C786;
70
- @navds-color-green-40: #33AA5F;
71
- @navds-color-green-50: #06893A;
72
- @navds-color-green-60: #007C2E;
73
- @navds-color-green-70: #006A23;
74
- @navds-color-green-80: #005519;
75
- @navds-color-green-90: #003B0F;
76
- @navds-color-red-10: #F9D2CC;
77
- @navds-color-red-20: #EFA89D;
78
- @navds-color-red-30: #E18071;
79
- @navds-color-red-40: #D05C4A;
80
- @navds-color-red-50: #BA3A26;
81
- @navds-color-red-60: #A32A17;
82
- @navds-color-red-70: #881D0C;
83
- @navds-color-red-80: #6A1204;
84
- @navds-color-red-90: #480900;
85
- @navds-color-purple-10: #E0D8E9;
86
- @navds-color-purple-20: #C0B2D2;
87
- @navds-color-purple-30: #A18DBB;
88
- @navds-color-purple-40: #8269A2;
89
- @navds-color-purple-50: #634689;
90
- @navds-color-purple-60: #523874;
91
- @navds-color-purple-70: #412B5D;
92
- @navds-color-purple-80: #301F46;
93
- @navds-color-purple-90: #1F142F;
94
- @navds-color-limegreen-10: #F9FCCC;
95
- @navds-color-limegreen-20: #ECF399;
96
- @navds-color-limegreen-30: #D9E366;
97
- @navds-color-limegreen-40: #C1CB33;
98
- @navds-color-limegreen-50: #a2ad00;
99
- @navds-color-limegreen-60: #939E00;
100
- @navds-color-limegreen-70: #7F8900;
101
- @navds-color-limegreen-80: #666E00;
102
- @navds-color-limegreen-90: #474E00;
103
- @navds-color-disabled: #A0A0A0;
104
- @navds-color-action-default: #0067c5;
105
- @navds-color-action-hover: #0056B4;
106
- @navds-color-action-active: #005B82;
107
- @navds-color-danger-default: #BA3A26;
108
- @navds-color-danger-hover: #A32A17;
109
- @navds-color-danger-active: #881D0C;
110
- @navds-color-error-border: #BA3A26;
111
- @navds-color-error-background: #F9D2CC;
112
- @navds-color-warning-border: #D47B00;
113
- @navds-color-warning-background: #FFECCC;
114
- @navds-color-info-border: #368DA8;
115
- @navds-color-info-background: #D8F9FF;
116
- @navds-color-success-border: #06893A;
117
- @navds-color-success-background: #CCF1D6;
118
- @navds-color-border: #A0A0A0;
119
- @navds-color-background: #ffffff;
120
- @navds-color-text-primary: #262626;
121
- @navds-color-text-inverse: #ffffff;
122
- @navds-color-text-disabled: #6A6A6A;
123
- @navds-color-text-link: #0067c5;
124
- @navds-color-text-error: #BA3A26;
125
- @navds-color-hover: #A0A0A0;
126
- @navds-color-tag-error-border: #BA3A26;
127
- @navds-color-tag-error-background: #F9D2CC;
128
- @navds-color-tag-warning-border: #D47B00;
129
- @navds-color-tag-warning-background: #FFECCC;
130
- @navds-color-tag-info-border: #368DA8;
131
- @navds-color-tag-info-background: #D8F9FF;
132
- @navds-color-tag-success-border: #06893A;
133
- @navds-color-tag-success-background: #CCF1D6;
134
- @navds-color-modal-overlay: rgba(38, 38, 38, 0.7);
135
- @navds-border-default: 1px solid #A0A0A0;
136
- @navds-border-radius: 4px;
137
- @navds-panel-hover: 1px solid #0067c5;
138
5
  @navds-font-family: "Source Sans Pro", Arial, sans-serif;
139
6
  @navds-font-line-height-heading-2xlarge: 3.25rem;
140
7
  @navds-font-line-height-heading-xlarge: 2.5rem;
@@ -157,23 +24,155 @@
157
24
  @navds-font-size-small: 0.875rem;
158
25
  @navds-font-weight-bold: 600;
159
26
  @navds-font-weight-regular: 400;
160
- @navds-shadow-focus: 0 0 0 3px #00347D;
161
- @navds-shadow-focus-on-dark: 0 0 0 3px #FFAA33;
162
- @navds-shadow-hover: #A0A0A0 0 2px 1px 0;
163
- @navds-text-focus: #00347D;
164
- @navds-text-shadow: 0 0 0 2px #00347D;
165
- @navds-content-container-max-width: 79.5rem;
166
- @navds-content-container-padding-small: 1rem;
167
- @navds-content-container-padding-medium-and-larger: 1.5rem;
168
- @navds-grid-gutter-small: 1rem;
169
- @navds-grid-gutter-medium-and-larger: 1.5rem;
170
- @navds-layout-background-white: #ffffff;
171
- @navds-layout-background-gray: #F1F1F1;
172
- @navds-layout-padding-small: 1rem;
173
- @navds-layout-padding-medium-and-larger: 2.5rem;
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);
174
31
  @navds-z-index-modal: 2000;
175
32
  @navds-z-index-popover: 1000;
176
33
  @navds-z-index-focus: 10;
177
- @navds-sidebar-sticky-offset: 0;
178
- @navds-checkmark-image-white: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
179
- @navds-checkmark-image-blue: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjMDA2N0M1IiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
34
+ @navds-global-color-blue-50: rgba(230, 240, 255, 1);
35
+ @navds-global-color-blue-100: rgba(204, 225, 255, 1);
36
+ @navds-global-color-blue-200: rgba(153, 195, 255, 1);
37
+ @navds-global-color-blue-300: rgba(102, 165, 244, 1);
38
+ @navds-global-color-blue-400: rgba(51, 134, 224, 1);
39
+ @navds-global-color-blue-500: rgba(0, 103, 197, 1);
40
+ @navds-global-color-blue-600: rgba(0, 86, 180, 1);
41
+ @navds-global-color-blue-700: rgba(0, 69, 156, 1);
42
+ @navds-global-color-blue-800: rgba(0, 52, 125, 1);
43
+ @navds-global-color-blue-900: rgba(0, 34, 82, 1);
44
+ @navds-global-color-deepblue-50: rgba(230, 241, 248, 1);
45
+ @navds-global-color-deepblue-100: rgba(204, 226, 240, 1);
46
+ @navds-global-color-deepblue-200: rgba(153, 196, 221, 1);
47
+ @navds-global-color-deepblue-300: rgba(102, 163, 196, 1);
48
+ @navds-global-color-deepblue-400: rgba(51, 128, 165, 1);
49
+ @navds-global-color-deepblue-500: rgba(0, 91, 130, 1);
50
+ @navds-global-color-deepblue-600: rgba(0, 80, 119, 1);
51
+ @navds-global-color-deepblue-700: rgba(0, 67, 103, 1);
52
+ @navds-global-color-deepblue-800: rgba(0, 52, 83, 1);
53
+ @navds-global-color-deepblue-900: rgba(0, 36, 58, 1);
54
+ @navds-global-color-gray-50: rgba(247, 247, 247, 1);
55
+ @navds-global-color-gray-100: rgba(241, 241, 241, 1);
56
+ @navds-global-color-gray-200: rgba(201, 201, 201, 1);
57
+ @navds-global-color-gray-400: rgba(160, 160, 160, 1);
58
+ @navds-global-color-gray-600: rgba(106, 106, 106, 1);
59
+ @navds-global-color-gray-800: rgba(79, 79, 79, 1);
60
+ @navds-global-color-gray-900: rgba(38, 38, 38, 1);
61
+ @navds-global-color-green-50: rgba(243, 252, 245, 1);
62
+ @navds-global-color-green-100: rgba(204, 241, 214, 1);
63
+ @navds-global-color-green-200: rgba(153, 222, 173, 1);
64
+ @navds-global-color-green-300: rgba(102, 199, 134, 1);
65
+ @navds-global-color-green-400: rgba(51, 170, 95, 1);
66
+ @navds-global-color-green-500: rgba(6, 137, 58, 1);
67
+ @navds-global-color-green-600: rgba(0, 124, 46, 1);
68
+ @navds-global-color-green-700: rgba(0, 106, 35, 1);
69
+ @navds-global-color-green-800: rgba(0, 85, 25, 1);
70
+ @navds-global-color-green-900: rgba(0, 59, 15, 1);
71
+ @navds-global-color-lightblue-50: rgba(235, 252, 255, 1);
72
+ @navds-global-color-lightblue-100: rgba(216, 249, 255, 1);
73
+ @navds-global-color-lightblue-200: rgba(181, 241, 255, 1);
74
+ @navds-global-color-lightblue-300: rgba(151, 230, 255, 1);
75
+ @navds-global-color-lightblue-400: rgba(124, 218, 248, 1);
76
+ @navds-global-color-lightblue-500: rgba(102, 203, 236, 1);
77
+ @navds-global-color-lightblue-600: rgba(76, 173, 205, 1);
78
+ @navds-global-color-lightblue-700: rgba(54, 141, 168, 1);
79
+ @navds-global-color-lightblue-800: rgba(35, 107, 125, 1);
80
+ @navds-global-color-lightblue-900: rgba(19, 72, 82, 1);
81
+ @navds-global-color-limegreen-50: rgba(253, 255, 230, 1);
82
+ @navds-global-color-limegreen-100: rgba(249, 252, 204, 1);
83
+ @navds-global-color-limegreen-200: rgba(236, 243, 153, 1);
84
+ @navds-global-color-limegreen-300: rgba(217, 227, 102, 1);
85
+ @navds-global-color-limegreen-400: rgba(193, 203, 51, 1);
86
+ @navds-global-color-limegreen-500: rgba(162, 173, 0, 1);
87
+ @navds-global-color-limegreen-600: rgba(147, 158, 0, 1);
88
+ @navds-global-color-limegreen-700: rgba(127, 137, 0, 1);
89
+ @navds-global-color-limegreen-800: rgba(102, 110, 0, 1);
90
+ @navds-global-color-limegreen-900: rgba(71, 78, 0, 1);
91
+ @navds-global-color-nav-red: rgba(195, 0, 0, 1);
92
+ @navds-global-color-orange-50: rgba(255, 249, 240, 1);
93
+ @navds-global-color-orange-100: rgba(255, 236, 204, 1);
94
+ @navds-global-color-orange-200: rgba(255, 215, 153, 1);
95
+ @navds-global-color-orange-300: rgba(255, 193, 102, 1);
96
+ @navds-global-color-orange-400: rgba(255, 170, 51, 1);
97
+ @navds-global-color-orange-500: rgba(255, 145, 0, 1);
98
+ @navds-global-color-orange-600: rgba(212, 123, 0, 1);
99
+ @navds-global-color-orange-700: rgba(168, 100, 0, 1);
100
+ @navds-global-color-orange-800: rgba(125, 76, 0, 1);
101
+ @navds-global-color-orange-900: rgba(82, 51, 0, 1);
102
+ @navds-global-color-purple-50: rgba(239, 236, 244, 1);
103
+ @navds-global-color-purple-100: rgba(224, 216, 233, 1);
104
+ @navds-global-color-purple-200: rgba(192, 178, 210, 1);
105
+ @navds-global-color-purple-300: rgba(161, 141, 187, 1);
106
+ @navds-global-color-purple-400: rgba(130, 105, 162, 1);
107
+ @navds-global-color-purple-500: rgba(99, 70, 137, 1);
108
+ @navds-global-color-purple-600: rgba(82, 56, 116, 1);
109
+ @navds-global-color-purple-700: rgba(65, 43, 93, 1);
110
+ @navds-global-color-purple-800: rgba(48, 31, 70, 1);
111
+ @navds-global-color-purple-900: rgba(31, 20, 47, 1);
112
+ @navds-global-color-red-50: rgba(253, 232, 230, 1);
113
+ @navds-global-color-red-100: rgba(249, 210, 204, 1);
114
+ @navds-global-color-red-200: rgba(239, 168, 157, 1);
115
+ @navds-global-color-red-300: rgba(225, 128, 113, 1);
116
+ @navds-global-color-red-400: rgba(208, 92, 74, 1);
117
+ @navds-global-color-red-500: rgba(186, 58, 38, 1);
118
+ @navds-global-color-red-600: rgba(163, 42, 23, 1);
119
+ @navds-global-color-red-700: rgba(136, 29, 12, 1);
120
+ @navds-global-color-red-800: rgba(106, 18, 4, 1);
121
+ @navds-global-color-red-900: rgba(72, 9, 0, 1);
122
+ @navds-global-color-transparent: rgba(255, 255, 255, 0);
123
+ @navds-global-color-white: rgba(255, 255, 255, 1);
124
+ @navds-semantic-color-border-inverted: rgba(201, 201, 201, 1);
125
+ @navds-semantic-color-border-muted: rgba(160, 160, 160, 1);
126
+ @navds-semantic-color-border: rgba(106, 106, 106, 1);
127
+ @navds-semantic-color-canvas-background-inverted: rgba(38, 38, 38, 1);
128
+ @navds-semantic-color-canvas-background-light: rgba(255, 255, 255, 1);
129
+ @navds-semantic-color-canvas-background: rgba(241, 241, 241, 1);
130
+ @navds-semantic-color-component-background-alternate: rgba(247, 247, 247, 1);
131
+ @navds-semantic-color-component-background-inverted: rgba(38, 38, 38, 1);
132
+ @navds-semantic-color-component-background-light: rgba(255, 255, 255, 1);
133
+ @navds-semantic-color-divider: rgba(201, 201, 201, 1);
134
+ @navds-semantic-color-feedback-danger-background: rgba(249, 210, 204, 1);
135
+ @navds-semantic-color-feedback-danger-border: rgba(186, 58, 38, 1);
136
+ @navds-semantic-color-feedback-danger-icon: rgba(186, 58, 38, 1);
137
+ @navds-semantic-color-feedback-danger-text: rgba(186, 58, 38, 1);
138
+ @navds-semantic-color-feedback-info-background: rgba(216, 249, 255, 1);
139
+ @navds-semantic-color-feedback-info-border: rgba(54, 141, 168, 1);
140
+ @navds-semantic-color-feedback-info-icon: rgba(54, 141, 168, 1);
141
+ @navds-semantic-color-feedback-success-background: rgba(204, 241, 214, 1);
142
+ @navds-semantic-color-feedback-success-border: rgba(6, 137, 58, 1);
143
+ @navds-semantic-color-feedback-success-icon: rgba(0, 124, 46, 1);
144
+ @navds-semantic-color-feedback-warning-background: rgba(255, 236, 204, 1);
145
+ @navds-semantic-color-feedback-warning-border: rgba(212, 123, 0, 1);
146
+ @navds-semantic-color-feedback-warning-icon: rgba(255, 145, 0, 1);
147
+ @navds-semantic-color-focus-inverted: rgba(153, 195, 255, 1);
148
+ @navds-semantic-color-focus: rgba(0, 52, 125, 1);
149
+ @navds-semantic-color-interaction-danger-hover: rgba(163, 42, 23, 1);
150
+ @navds-semantic-color-interaction-danger-selected: rgba(136, 29, 12, 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);
153
+ @navds-semantic-color-interaction-primary-hover: rgba(0, 86, 180, 1);
154
+ @navds-semantic-color-interaction-primary-selected: rgba(0, 91, 130, 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);
158
+ @navds-semantic-color-text-inverted: rgba(255, 255, 255, 1);
159
+ @navds-semantic-color-text-muted: rgba(106, 106, 106, 1);
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/dist/tokens.scss CHANGED
@@ -1,140 +1,7 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 11 Nov 2021 17:26:34 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;
23
- $navds-color-white: #ffffff;
24
- $navds-color-darkgray: #262626;
25
- $navds-color-gray-10: #F1F1F1;
26
- $navds-color-gray-20: #C9C9C9;
27
- $navds-color-gray-40: #A0A0A0;
28
- $navds-color-gray-60: #6A6A6A;
29
- $navds-color-gray-80: #4F4F4F;
30
- $navds-color-gray-90: #262626;
31
- $navds-color-blue-10: #CCE1FF;
32
- $navds-color-blue-20: #99C3FF;
33
- $navds-color-blue-30: #66A5F4;
34
- $navds-color-blue-40: #3386E0;
35
- $navds-color-blue-50: #0067c5;
36
- $navds-color-blue-60: #0056B4;
37
- $navds-color-blue-70: #00459C;
38
- $navds-color-blue-80: #00347D;
39
- $navds-color-blue-90: #002252;
40
- $navds-color-deepblue-10: #CCE2F0;
41
- $navds-color-deepblue-20: #99C4DD;
42
- $navds-color-deepblue-30: #66A3C4;
43
- $navds-color-deepblue-40: #3380A5;
44
- $navds-color-deepblue-50: #005B82;
45
- $navds-color-deepblue-60: #005077;
46
- $navds-color-deepblue-70: #004367;
47
- $navds-color-deepblue-80: #003453;
48
- $navds-color-deepblue-90: #00243A;
49
- $navds-color-lightblue-10: #D8F9FF;
50
- $navds-color-lightblue-20: #B5F1FF;
51
- $navds-color-lightblue-30: #97E6FF;
52
- $navds-color-lightblue-40: #7CDAF8;
53
- $navds-color-lightblue-50: #66CBEC;
54
- $navds-color-lightblue-60: #4CADCD;
55
- $navds-color-lightblue-70: #368DA8;
56
- $navds-color-lightblue-80: #236B7D;
57
- $navds-color-lightblue-90: #134852;
58
- $navds-color-orange-10: #FFECCC;
59
- $navds-color-orange-20: #FFD799;
60
- $navds-color-orange-30: #FFC166;
61
- $navds-color-orange-40: #FFAA33;
62
- $navds-color-orange-50: #FF9100;
63
- $navds-color-orange-60: #D47B00;
64
- $navds-color-orange-70: #A86400;
65
- $navds-color-orange-80: #7D4C00;
66
- $navds-color-orange-90: #523300;
67
- $navds-color-green-10: #CCF1D6;
68
- $navds-color-green-20: #99DEAD;
69
- $navds-color-green-30: #66C786;
70
- $navds-color-green-40: #33AA5F;
71
- $navds-color-green-50: #06893A;
72
- $navds-color-green-60: #007C2E;
73
- $navds-color-green-70: #006A23;
74
- $navds-color-green-80: #005519;
75
- $navds-color-green-90: #003B0F;
76
- $navds-color-red-10: #F9D2CC;
77
- $navds-color-red-20: #EFA89D;
78
- $navds-color-red-30: #E18071;
79
- $navds-color-red-40: #D05C4A;
80
- $navds-color-red-50: #BA3A26;
81
- $navds-color-red-60: #A32A17;
82
- $navds-color-red-70: #881D0C;
83
- $navds-color-red-80: #6A1204;
84
- $navds-color-red-90: #480900;
85
- $navds-color-purple-10: #E0D8E9;
86
- $navds-color-purple-20: #C0B2D2;
87
- $navds-color-purple-30: #A18DBB;
88
- $navds-color-purple-40: #8269A2;
89
- $navds-color-purple-50: #634689;
90
- $navds-color-purple-60: #523874;
91
- $navds-color-purple-70: #412B5D;
92
- $navds-color-purple-80: #301F46;
93
- $navds-color-purple-90: #1F142F;
94
- $navds-color-limegreen-10: #F9FCCC;
95
- $navds-color-limegreen-20: #ECF399;
96
- $navds-color-limegreen-30: #D9E366;
97
- $navds-color-limegreen-40: #C1CB33;
98
- $navds-color-limegreen-50: #a2ad00;
99
- $navds-color-limegreen-60: #939E00;
100
- $navds-color-limegreen-70: #7F8900;
101
- $navds-color-limegreen-80: #666E00;
102
- $navds-color-limegreen-90: #474E00;
103
- $navds-color-disabled: #A0A0A0;
104
- $navds-color-action-default: #0067c5;
105
- $navds-color-action-hover: #0056B4;
106
- $navds-color-action-active: #005B82;
107
- $navds-color-danger-default: #BA3A26;
108
- $navds-color-danger-hover: #A32A17;
109
- $navds-color-danger-active: #881D0C;
110
- $navds-color-error-border: #BA3A26;
111
- $navds-color-error-background: #F9D2CC;
112
- $navds-color-warning-border: #D47B00;
113
- $navds-color-warning-background: #FFECCC;
114
- $navds-color-info-border: #368DA8;
115
- $navds-color-info-background: #D8F9FF;
116
- $navds-color-success-border: #06893A;
117
- $navds-color-success-background: #CCF1D6;
118
- $navds-color-border: #A0A0A0;
119
- $navds-color-background: #ffffff;
120
- $navds-color-text-primary: #262626;
121
- $navds-color-text-inverse: #ffffff;
122
- $navds-color-text-disabled: #6A6A6A;
123
- $navds-color-text-link: #0067c5;
124
- $navds-color-text-error: #BA3A26;
125
- $navds-color-hover: #A0A0A0;
126
- $navds-color-tag-error-border: #BA3A26;
127
- $navds-color-tag-error-background: #F9D2CC;
128
- $navds-color-tag-warning-border: #D47B00;
129
- $navds-color-tag-warning-background: #FFECCC;
130
- $navds-color-tag-info-border: #368DA8;
131
- $navds-color-tag-info-background: #D8F9FF;
132
- $navds-color-tag-success-border: #06893A;
133
- $navds-color-tag-success-background: #CCF1D6;
134
- $navds-color-modal-overlay: rgba(38, 38, 38, 0.7);
135
- $navds-border-default: 1px solid #A0A0A0;
136
- $navds-border-radius: 4px;
137
- $navds-panel-hover: 1px solid #0067c5;
138
5
  $navds-font-family: "Source Sans Pro", Arial, sans-serif;
139
6
  $navds-font-line-height-heading-2xlarge: 3.25rem;
140
7
  $navds-font-line-height-heading-xlarge: 2.5rem;
@@ -157,23 +24,155 @@ $navds-font-size-medium: 1rem;
157
24
  $navds-font-size-small: 0.875rem;
158
25
  $navds-font-weight-bold: 600;
159
26
  $navds-font-weight-regular: 400;
160
- $navds-shadow-focus: 0 0 0 3px #00347D;
161
- $navds-shadow-focus-on-dark: 0 0 0 3px #FFAA33;
162
- $navds-shadow-hover: #A0A0A0 0 2px 1px 0;
163
- $navds-text-focus: #00347D;
164
- $navds-text-shadow: 0 0 0 2px #00347D;
165
- $navds-content-container-max-width: 79.5rem;
166
- $navds-content-container-padding-small: 1rem;
167
- $navds-content-container-padding-medium-and-larger: 1.5rem;
168
- $navds-grid-gutter-small: 1rem;
169
- $navds-grid-gutter-medium-and-larger: 1.5rem;
170
- $navds-layout-background-white: #ffffff;
171
- $navds-layout-background-gray: #F1F1F1;
172
- $navds-layout-padding-small: 1rem;
173
- $navds-layout-padding-medium-and-larger: 2.5rem;
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);
174
31
  $navds-z-index-modal: 2000;
175
32
  $navds-z-index-popover: 1000;
176
33
  $navds-z-index-focus: 10;
177
- $navds-sidebar-sticky-offset: 0;
178
- $navds-checkmark-image-white: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
179
- $navds-checkmark-image-blue: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjMDA2N0M1IiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
34
+ $navds-global-color-blue-50: rgba(230, 240, 255, 1);
35
+ $navds-global-color-blue-100: rgba(204, 225, 255, 1);
36
+ $navds-global-color-blue-200: rgba(153, 195, 255, 1);
37
+ $navds-global-color-blue-300: rgba(102, 165, 244, 1);
38
+ $navds-global-color-blue-400: rgba(51, 134, 224, 1);
39
+ $navds-global-color-blue-500: rgba(0, 103, 197, 1);
40
+ $navds-global-color-blue-600: rgba(0, 86, 180, 1);
41
+ $navds-global-color-blue-700: rgba(0, 69, 156, 1);
42
+ $navds-global-color-blue-800: rgba(0, 52, 125, 1);
43
+ $navds-global-color-blue-900: rgba(0, 34, 82, 1);
44
+ $navds-global-color-deepblue-50: rgba(230, 241, 248, 1);
45
+ $navds-global-color-deepblue-100: rgba(204, 226, 240, 1);
46
+ $navds-global-color-deepblue-200: rgba(153, 196, 221, 1);
47
+ $navds-global-color-deepblue-300: rgba(102, 163, 196, 1);
48
+ $navds-global-color-deepblue-400: rgba(51, 128, 165, 1);
49
+ $navds-global-color-deepblue-500: rgba(0, 91, 130, 1);
50
+ $navds-global-color-deepblue-600: rgba(0, 80, 119, 1);
51
+ $navds-global-color-deepblue-700: rgba(0, 67, 103, 1);
52
+ $navds-global-color-deepblue-800: rgba(0, 52, 83, 1);
53
+ $navds-global-color-deepblue-900: rgba(0, 36, 58, 1);
54
+ $navds-global-color-gray-50: rgba(247, 247, 247, 1);
55
+ $navds-global-color-gray-100: rgba(241, 241, 241, 1);
56
+ $navds-global-color-gray-200: rgba(201, 201, 201, 1);
57
+ $navds-global-color-gray-400: rgba(160, 160, 160, 1);
58
+ $navds-global-color-gray-600: rgba(106, 106, 106, 1);
59
+ $navds-global-color-gray-800: rgba(79, 79, 79, 1);
60
+ $navds-global-color-gray-900: rgba(38, 38, 38, 1);
61
+ $navds-global-color-green-50: rgba(243, 252, 245, 1);
62
+ $navds-global-color-green-100: rgba(204, 241, 214, 1);
63
+ $navds-global-color-green-200: rgba(153, 222, 173, 1);
64
+ $navds-global-color-green-300: rgba(102, 199, 134, 1);
65
+ $navds-global-color-green-400: rgba(51, 170, 95, 1);
66
+ $navds-global-color-green-500: rgba(6, 137, 58, 1);
67
+ $navds-global-color-green-600: rgba(0, 124, 46, 1);
68
+ $navds-global-color-green-700: rgba(0, 106, 35, 1);
69
+ $navds-global-color-green-800: rgba(0, 85, 25, 1);
70
+ $navds-global-color-green-900: rgba(0, 59, 15, 1);
71
+ $navds-global-color-lightblue-50: rgba(235, 252, 255, 1);
72
+ $navds-global-color-lightblue-100: rgba(216, 249, 255, 1);
73
+ $navds-global-color-lightblue-200: rgba(181, 241, 255, 1);
74
+ $navds-global-color-lightblue-300: rgba(151, 230, 255, 1);
75
+ $navds-global-color-lightblue-400: rgba(124, 218, 248, 1);
76
+ $navds-global-color-lightblue-500: rgba(102, 203, 236, 1);
77
+ $navds-global-color-lightblue-600: rgba(76, 173, 205, 1);
78
+ $navds-global-color-lightblue-700: rgba(54, 141, 168, 1);
79
+ $navds-global-color-lightblue-800: rgba(35, 107, 125, 1);
80
+ $navds-global-color-lightblue-900: rgba(19, 72, 82, 1);
81
+ $navds-global-color-limegreen-50: rgba(253, 255, 230, 1);
82
+ $navds-global-color-limegreen-100: rgba(249, 252, 204, 1);
83
+ $navds-global-color-limegreen-200: rgba(236, 243, 153, 1);
84
+ $navds-global-color-limegreen-300: rgba(217, 227, 102, 1);
85
+ $navds-global-color-limegreen-400: rgba(193, 203, 51, 1);
86
+ $navds-global-color-limegreen-500: rgba(162, 173, 0, 1);
87
+ $navds-global-color-limegreen-600: rgba(147, 158, 0, 1);
88
+ $navds-global-color-limegreen-700: rgba(127, 137, 0, 1);
89
+ $navds-global-color-limegreen-800: rgba(102, 110, 0, 1);
90
+ $navds-global-color-limegreen-900: rgba(71, 78, 0, 1);
91
+ $navds-global-color-nav-red: rgba(195, 0, 0, 1);
92
+ $navds-global-color-orange-50: rgba(255, 249, 240, 1);
93
+ $navds-global-color-orange-100: rgba(255, 236, 204, 1);
94
+ $navds-global-color-orange-200: rgba(255, 215, 153, 1);
95
+ $navds-global-color-orange-300: rgba(255, 193, 102, 1);
96
+ $navds-global-color-orange-400: rgba(255, 170, 51, 1);
97
+ $navds-global-color-orange-500: rgba(255, 145, 0, 1);
98
+ $navds-global-color-orange-600: rgba(212, 123, 0, 1);
99
+ $navds-global-color-orange-700: rgba(168, 100, 0, 1);
100
+ $navds-global-color-orange-800: rgba(125, 76, 0, 1);
101
+ $navds-global-color-orange-900: rgba(82, 51, 0, 1);
102
+ $navds-global-color-purple-50: rgba(239, 236, 244, 1);
103
+ $navds-global-color-purple-100: rgba(224, 216, 233, 1);
104
+ $navds-global-color-purple-200: rgba(192, 178, 210, 1);
105
+ $navds-global-color-purple-300: rgba(161, 141, 187, 1);
106
+ $navds-global-color-purple-400: rgba(130, 105, 162, 1);
107
+ $navds-global-color-purple-500: rgba(99, 70, 137, 1);
108
+ $navds-global-color-purple-600: rgba(82, 56, 116, 1);
109
+ $navds-global-color-purple-700: rgba(65, 43, 93, 1);
110
+ $navds-global-color-purple-800: rgba(48, 31, 70, 1);
111
+ $navds-global-color-purple-900: rgba(31, 20, 47, 1);
112
+ $navds-global-color-red-50: rgba(253, 232, 230, 1);
113
+ $navds-global-color-red-100: rgba(249, 210, 204, 1);
114
+ $navds-global-color-red-200: rgba(239, 168, 157, 1);
115
+ $navds-global-color-red-300: rgba(225, 128, 113, 1);
116
+ $navds-global-color-red-400: rgba(208, 92, 74, 1);
117
+ $navds-global-color-red-500: rgba(186, 58, 38, 1);
118
+ $navds-global-color-red-600: rgba(163, 42, 23, 1);
119
+ $navds-global-color-red-700: rgba(136, 29, 12, 1);
120
+ $navds-global-color-red-800: rgba(106, 18, 4, 1);
121
+ $navds-global-color-red-900: rgba(72, 9, 0, 1);
122
+ $navds-global-color-transparent: rgba(255, 255, 255, 0);
123
+ $navds-global-color-white: rgba(255, 255, 255, 1);
124
+ $navds-semantic-color-border-inverted: rgba(201, 201, 201, 1);
125
+ $navds-semantic-color-border-muted: rgba(160, 160, 160, 1);
126
+ $navds-semantic-color-border: rgba(106, 106, 106, 1);
127
+ $navds-semantic-color-canvas-background-inverted: rgba(38, 38, 38, 1);
128
+ $navds-semantic-color-canvas-background-light: rgba(255, 255, 255, 1);
129
+ $navds-semantic-color-canvas-background: rgba(241, 241, 241, 1);
130
+ $navds-semantic-color-component-background-alternate: rgba(247, 247, 247, 1);
131
+ $navds-semantic-color-component-background-inverted: rgba(38, 38, 38, 1);
132
+ $navds-semantic-color-component-background-light: rgba(255, 255, 255, 1);
133
+ $navds-semantic-color-divider: rgba(201, 201, 201, 1);
134
+ $navds-semantic-color-feedback-danger-background: rgba(249, 210, 204, 1);
135
+ $navds-semantic-color-feedback-danger-border: rgba(186, 58, 38, 1);
136
+ $navds-semantic-color-feedback-danger-icon: rgba(186, 58, 38, 1);
137
+ $navds-semantic-color-feedback-danger-text: rgba(186, 58, 38, 1);
138
+ $navds-semantic-color-feedback-info-background: rgba(216, 249, 255, 1);
139
+ $navds-semantic-color-feedback-info-border: rgba(54, 141, 168, 1);
140
+ $navds-semantic-color-feedback-info-icon: rgba(54, 141, 168, 1);
141
+ $navds-semantic-color-feedback-success-background: rgba(204, 241, 214, 1);
142
+ $navds-semantic-color-feedback-success-border: rgba(6, 137, 58, 1);
143
+ $navds-semantic-color-feedback-success-icon: rgba(0, 124, 46, 1);
144
+ $navds-semantic-color-feedback-warning-background: rgba(255, 236, 204, 1);
145
+ $navds-semantic-color-feedback-warning-border: rgba(212, 123, 0, 1);
146
+ $navds-semantic-color-feedback-warning-icon: rgba(255, 145, 0, 1);
147
+ $navds-semantic-color-focus-inverted: rgba(153, 195, 255, 1);
148
+ $navds-semantic-color-focus: rgba(0, 52, 125, 1);
149
+ $navds-semantic-color-interaction-danger-hover: rgba(163, 42, 23, 1);
150
+ $navds-semantic-color-interaction-danger-selected: rgba(136, 29, 12, 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);
153
+ $navds-semantic-color-interaction-primary-hover: rgba(0, 86, 180, 1);
154
+ $navds-semantic-color-interaction-primary-selected: rgba(0, 91, 130, 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);
158
+ $navds-semantic-color-text-inverted: rgba(255, 255, 255, 1);
159
+ $navds-semantic-color-text-muted: rgba(106, 106, 106, 1);
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.0",
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": "a06b27a218f9fdbfed2385eb90a602fae16d3a86"
42
+ "gitHead": "36d98e1d190652c21d78a259cf3d8942d271c167"
44
43
  }