@navikt/ds-tokens 0.7.1 → 0.8.2
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.
- package/dist/tokens-cjs.js +22 -14
- package/dist/tokens.css +15 -7
- package/dist/tokens.js +22 -14
- package/dist/tokens.less +22 -14
- package/dist/tokens.scss +22 -14
- package/package.json +4 -3
- package/src/colors.json +13 -4
- package/src/index.js +0 -13
- package/src/shadow.json +33 -0
package/dist/tokens-cjs.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Wed, 23 Feb 2022 08:47:04 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
module.exports = {
|
|
@@ -26,10 +26,6 @@ module.exports = {
|
|
|
26
26
|
"NavdsFontSizeSmall": "0.875rem",
|
|
27
27
|
"NavdsFontWeightBold": "600",
|
|
28
28
|
"NavdsFontWeightRegular": "400",
|
|
29
|
-
"NavdsShadowFocus": "0 0 0 3px rgba(0, 52, 125, 1)",
|
|
30
|
-
"NavdsShadowFocusInverted": "0 0 0 3px rgba(153, 195, 255, 1)",
|
|
31
|
-
"NavdsShadowPopover": "0 2px 4px 0 rgba(201, 201, 201, 1)",
|
|
32
|
-
"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)",
|
|
33
29
|
"NavdsZIndexModal": 2000,
|
|
34
30
|
"NavdsZIndexPopover": 1000,
|
|
35
31
|
"NavdsZIndexFocus": 10,
|
|
@@ -55,10 +51,13 @@ module.exports = {
|
|
|
55
51
|
"NavdsGlobalColorDeepblue900": "rgba(0, 36, 58, 1)",
|
|
56
52
|
"NavdsGlobalColorGray50": "rgba(247, 247, 247, 1)",
|
|
57
53
|
"NavdsGlobalColorGray100": "rgba(241, 241, 241, 1)",
|
|
58
|
-
"NavdsGlobalColorGray200": "rgba(
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
"
|
|
54
|
+
"NavdsGlobalColorGray200": "rgba(229, 229, 229, 1)",
|
|
55
|
+
"NavdsGlobalColorGray300": "rgba(207, 207, 207, 1)",
|
|
56
|
+
"NavdsGlobalColorGray400": "rgba(176, 176, 176, 1)",
|
|
57
|
+
"NavdsGlobalColorGray500": "rgba(143, 143, 143, 1)",
|
|
58
|
+
"NavdsGlobalColorGray600": "rgba(112, 112, 112, 1)",
|
|
59
|
+
"NavdsGlobalColorGray700": "rgba(89, 89, 89, 1)",
|
|
60
|
+
"NavdsGlobalColorGray800": "rgba(64, 64, 64, 1)",
|
|
62
61
|
"NavdsGlobalColorGray900": "rgba(38, 38, 38, 1)",
|
|
63
62
|
"NavdsGlobalColorGreen50": "rgba(243, 252, 245, 1)",
|
|
64
63
|
"NavdsGlobalColorGreen100": "rgba(204, 241, 214, 1)",
|
|
@@ -123,16 +122,16 @@ module.exports = {
|
|
|
123
122
|
"NavdsGlobalColorRed900": "rgba(72, 9, 0, 1)",
|
|
124
123
|
"NavdsGlobalColorTransparent": "rgba(255, 255, 255, 0)",
|
|
125
124
|
"NavdsGlobalColorWhite": "rgba(255, 255, 255, 1)",
|
|
126
|
-
"NavdsSemanticColorBorderInverted": "rgba(
|
|
127
|
-
"NavdsSemanticColorBorderMuted": "rgba(
|
|
128
|
-
"NavdsSemanticColorBorder": "rgba(
|
|
125
|
+
"NavdsSemanticColorBorderInverted": "rgba(229, 229, 229, 1)",
|
|
126
|
+
"NavdsSemanticColorBorderMuted": "rgba(176, 176, 176, 1)",
|
|
127
|
+
"NavdsSemanticColorBorder": "rgba(112, 112, 112, 1)",
|
|
129
128
|
"NavdsSemanticColorCanvasBackgroundInverted": "rgba(38, 38, 38, 1)",
|
|
130
129
|
"NavdsSemanticColorCanvasBackgroundLight": "rgba(255, 255, 255, 1)",
|
|
131
130
|
"NavdsSemanticColorCanvasBackground": "rgba(241, 241, 241, 1)",
|
|
132
131
|
"NavdsSemanticColorComponentBackgroundAlternate": "rgba(247, 247, 247, 1)",
|
|
133
132
|
"NavdsSemanticColorComponentBackgroundInverted": "rgba(38, 38, 38, 1)",
|
|
134
133
|
"NavdsSemanticColorComponentBackgroundLight": "rgba(255, 255, 255, 1)",
|
|
135
|
-
"NavdsSemanticColorDivider": "rgba(
|
|
134
|
+
"NavdsSemanticColorDivider": "rgba(229, 229, 229, 1)",
|
|
136
135
|
"NavdsSemanticColorFeedbackDangerBackground": "rgba(249, 210, 204, 1)",
|
|
137
136
|
"NavdsSemanticColorFeedbackDangerBorder": "rgba(186, 58, 38, 1)",
|
|
138
137
|
"NavdsSemanticColorFeedbackDangerIcon": "rgba(186, 58, 38, 1)",
|
|
@@ -158,8 +157,17 @@ module.exports = {
|
|
|
158
157
|
"NavdsSemanticColorLinkVisited": "rgba(99, 70, 137, 1)",
|
|
159
158
|
"NavdsSemanticColorLink": "rgba(0, 103, 197, 1)",
|
|
160
159
|
"NavdsSemanticColorTextInverted": "rgba(255, 255, 255, 1)",
|
|
161
|
-
"NavdsSemanticColorTextMuted": "rgba(
|
|
160
|
+
"NavdsSemanticColorTextMuted": "rgba(112, 112, 112, 1)",
|
|
162
161
|
"NavdsSemanticColorText": "rgba(38, 38, 38, 1)",
|
|
162
|
+
"NavdsShadowXsmall": "0px 2px 1px -1px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.1)",
|
|
163
|
+
"NavdsShadowSmall": "0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1)",
|
|
164
|
+
"NavdsShadowMedium": "0px 4px 6px -4px rgba(0, 0, 0, 0.1) ,0px 10px 15px -3px rgba(0, 0, 0, 0.1)",
|
|
165
|
+
"NavdsShadowLarge": "0px 8px 10px -6px rgba(0, 0, 0, 0.1), 0px 20px 25px -5px rgba(0, 0, 0, 0.1)",
|
|
166
|
+
"NavdsShadowXlarge": "0px 8px 10px -6px rgba(0, 0, 0, 0.1), 0px 25px 50px -12px rgba(0, 0, 0, 0.25)",
|
|
167
|
+
"NavdsShadowFocus": "0 0 0 3px rgba(0, 52, 125, 1)",
|
|
168
|
+
"NavdsShadowFocusInverted": "0 0 0 3px rgba(153, 195, 255, 1)",
|
|
169
|
+
"NavdsShadowPopover": "0 2px 4px 0 rgba(229, 229, 229, 1)",
|
|
170
|
+
"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)",
|
|
163
171
|
"NavdsSpacing1": "0.25rem",
|
|
164
172
|
"NavdsSpacing2": "0.5rem",
|
|
165
173
|
"NavdsSpacing3": "0.75rem",
|
package/dist/tokens.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Wed, 23 Feb 2022 08:47:04 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
@@ -22,6 +22,12 @@
|
|
|
22
22
|
--navds-spacing-3: 0.75rem;
|
|
23
23
|
--navds-spacing-2: 0.5rem;
|
|
24
24
|
--navds-spacing-1: 0.25rem;
|
|
25
|
+
--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);
|
|
26
|
+
--navds-shadow-xlarge: 0px 8px 10px -6px rgba(0, 0, 0, 0.1), 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
27
|
+
--navds-shadow-large: 0px 8px 10px -6px rgba(0, 0, 0, 0.1), 0px 20px 25px -5px rgba(0, 0, 0, 0.1);
|
|
28
|
+
--navds-shadow-medium: 0px 4px 6px -4px rgba(0, 0, 0, 0.1) ,0px 10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
29
|
+
--navds-shadow-small: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
30
|
+
--navds-shadow-xsmall: 0px 2px 1px -1px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
|
|
25
31
|
--navds-global-color-white: rgba(255, 255, 255, 1);
|
|
26
32
|
--navds-global-color-transparent: rgba(255, 255, 255, 0);
|
|
27
33
|
--navds-global-color-red-900: rgba(72, 9, 0, 1);
|
|
@@ -86,10 +92,13 @@
|
|
|
86
92
|
--navds-global-color-green-100: rgba(204, 241, 214, 1);
|
|
87
93
|
--navds-global-color-green-50: rgba(243, 252, 245, 1);
|
|
88
94
|
--navds-global-color-gray-900: rgba(38, 38, 38, 1);
|
|
89
|
-
--navds-global-color-gray-800: rgba(
|
|
90
|
-
--navds-global-color-gray-
|
|
91
|
-
--navds-global-color-gray-
|
|
92
|
-
--navds-global-color-gray-
|
|
95
|
+
--navds-global-color-gray-800: rgba(64, 64, 64, 1);
|
|
96
|
+
--navds-global-color-gray-700: rgba(89, 89, 89, 1);
|
|
97
|
+
--navds-global-color-gray-600: rgba(112, 112, 112, 1);
|
|
98
|
+
--navds-global-color-gray-500: rgba(143, 143, 143, 1);
|
|
99
|
+
--navds-global-color-gray-400: rgba(176, 176, 176, 1);
|
|
100
|
+
--navds-global-color-gray-300: rgba(207, 207, 207, 1);
|
|
101
|
+
--navds-global-color-gray-200: rgba(229, 229, 229, 1);
|
|
93
102
|
--navds-global-color-gray-100: rgba(241, 241, 241, 1);
|
|
94
103
|
--navds-global-color-gray-50: rgba(247, 247, 247, 1);
|
|
95
104
|
--navds-global-color-deepblue-900: rgba(0, 36, 58, 1);
|
|
@@ -115,7 +124,6 @@
|
|
|
115
124
|
--navds-z-index-focus: 10;
|
|
116
125
|
--navds-z-index-popover: 1000;
|
|
117
126
|
--navds-z-index-modal: 2000;
|
|
118
|
-
--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);
|
|
119
127
|
--navds-font-weight-regular: 400;
|
|
120
128
|
--navds-font-weight-bold: 600;
|
|
121
129
|
--navds-font-size-small: 0.875rem;
|
|
@@ -138,6 +146,7 @@
|
|
|
138
146
|
--navds-font-line-height-heading-xlarge: 2.5rem;
|
|
139
147
|
--navds-font-line-height-heading-2xlarge: 3.25rem;
|
|
140
148
|
--navds-font-family: "Source Sans Pro", Arial, sans-serif;
|
|
149
|
+
--navds-shadow-popover: 0 2px 4px 0 var(--navds-global-color-gray-200);
|
|
141
150
|
--navds-semantic-color-text: var(--navds-global-color-gray-900);
|
|
142
151
|
--navds-semantic-color-text-muted: var(--navds-global-color-gray-600);
|
|
143
152
|
--navds-semantic-color-text-inverted: var(--navds-global-color-white);
|
|
@@ -175,7 +184,6 @@
|
|
|
175
184
|
--navds-semantic-color-border: var(--navds-global-color-gray-600);
|
|
176
185
|
--navds-semantic-color-border-muted: var(--navds-global-color-gray-400);
|
|
177
186
|
--navds-semantic-color-border-inverted: var(--navds-global-color-gray-200);
|
|
178
|
-
--navds-shadow-popover: 0 2px 4px 0 var(--navds-global-color-gray-200);
|
|
179
187
|
--navds-shadow-focus-inverted: 0 0 0 3px var(--navds-semantic-color-focus-inverted);
|
|
180
188
|
--navds-shadow-focus: 0 0 0 3px var(--navds-semantic-color-focus);
|
|
181
189
|
}
|
package/dist/tokens.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Wed, 23 Feb 2022 08:47:04 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
export const NavdsFontFamily = "\"Source Sans Pro\", Arial, sans-serif";
|
|
@@ -25,10 +25,6 @@ export const NavdsFontSizeMedium = "1rem";
|
|
|
25
25
|
export const NavdsFontSizeSmall = "0.875rem";
|
|
26
26
|
export const NavdsFontWeightBold = "600";
|
|
27
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
28
|
export const NavdsZIndexModal = 2000;
|
|
33
29
|
export const NavdsZIndexPopover = 1000;
|
|
34
30
|
export const NavdsZIndexFocus = 10;
|
|
@@ -54,10 +50,13 @@ export const NavdsGlobalColorDeepblue800 = "rgba(0, 52, 83, 1)";
|
|
|
54
50
|
export const NavdsGlobalColorDeepblue900 = "rgba(0, 36, 58, 1)";
|
|
55
51
|
export const NavdsGlobalColorGray50 = "rgba(247, 247, 247, 1)";
|
|
56
52
|
export const NavdsGlobalColorGray100 = "rgba(241, 241, 241, 1)";
|
|
57
|
-
export const NavdsGlobalColorGray200 = "rgba(
|
|
58
|
-
export const
|
|
59
|
-
export const
|
|
60
|
-
export const
|
|
53
|
+
export const NavdsGlobalColorGray200 = "rgba(229, 229, 229, 1)";
|
|
54
|
+
export const NavdsGlobalColorGray300 = "rgba(207, 207, 207, 1)";
|
|
55
|
+
export const NavdsGlobalColorGray400 = "rgba(176, 176, 176, 1)";
|
|
56
|
+
export const NavdsGlobalColorGray500 = "rgba(143, 143, 143, 1)";
|
|
57
|
+
export const NavdsGlobalColorGray600 = "rgba(112, 112, 112, 1)";
|
|
58
|
+
export const NavdsGlobalColorGray700 = "rgba(89, 89, 89, 1)";
|
|
59
|
+
export const NavdsGlobalColorGray800 = "rgba(64, 64, 64, 1)";
|
|
61
60
|
export const NavdsGlobalColorGray900 = "rgba(38, 38, 38, 1)";
|
|
62
61
|
export const NavdsGlobalColorGreen50 = "rgba(243, 252, 245, 1)";
|
|
63
62
|
export const NavdsGlobalColorGreen100 = "rgba(204, 241, 214, 1)";
|
|
@@ -122,16 +121,16 @@ export const NavdsGlobalColorRed800 = "rgba(106, 18, 4, 1)";
|
|
|
122
121
|
export const NavdsGlobalColorRed900 = "rgba(72, 9, 0, 1)";
|
|
123
122
|
export const NavdsGlobalColorTransparent = "rgba(255, 255, 255, 0)";
|
|
124
123
|
export const NavdsGlobalColorWhite = "rgba(255, 255, 255, 1)";
|
|
125
|
-
export const NavdsSemanticColorBorderInverted = "rgba(
|
|
126
|
-
export const NavdsSemanticColorBorderMuted = "rgba(
|
|
127
|
-
export const NavdsSemanticColorBorder = "rgba(
|
|
124
|
+
export const NavdsSemanticColorBorderInverted = "rgba(229, 229, 229, 1)";
|
|
125
|
+
export const NavdsSemanticColorBorderMuted = "rgba(176, 176, 176, 1)";
|
|
126
|
+
export const NavdsSemanticColorBorder = "rgba(112, 112, 112, 1)";
|
|
128
127
|
export const NavdsSemanticColorCanvasBackgroundInverted = "rgba(38, 38, 38, 1)";
|
|
129
128
|
export const NavdsSemanticColorCanvasBackgroundLight = "rgba(255, 255, 255, 1)";
|
|
130
129
|
export const NavdsSemanticColorCanvasBackground = "rgba(241, 241, 241, 1)";
|
|
131
130
|
export const NavdsSemanticColorComponentBackgroundAlternate = "rgba(247, 247, 247, 1)";
|
|
132
131
|
export const NavdsSemanticColorComponentBackgroundInverted = "rgba(38, 38, 38, 1)";
|
|
133
132
|
export const NavdsSemanticColorComponentBackgroundLight = "rgba(255, 255, 255, 1)";
|
|
134
|
-
export const NavdsSemanticColorDivider = "rgba(
|
|
133
|
+
export const NavdsSemanticColorDivider = "rgba(229, 229, 229, 1)";
|
|
135
134
|
export const NavdsSemanticColorFeedbackDangerBackground = "rgba(249, 210, 204, 1)";
|
|
136
135
|
export const NavdsSemanticColorFeedbackDangerBorder = "rgba(186, 58, 38, 1)";
|
|
137
136
|
export const NavdsSemanticColorFeedbackDangerIcon = "rgba(186, 58, 38, 1)";
|
|
@@ -157,8 +156,17 @@ export const NavdsSemanticColorInteractionPrimary = "rgba(0, 103, 197, 1)";
|
|
|
157
156
|
export const NavdsSemanticColorLinkVisited = "rgba(99, 70, 137, 1)";
|
|
158
157
|
export const NavdsSemanticColorLink = "rgba(0, 103, 197, 1)";
|
|
159
158
|
export const NavdsSemanticColorTextInverted = "rgba(255, 255, 255, 1)";
|
|
160
|
-
export const NavdsSemanticColorTextMuted = "rgba(
|
|
159
|
+
export const NavdsSemanticColorTextMuted = "rgba(112, 112, 112, 1)";
|
|
161
160
|
export const NavdsSemanticColorText = "rgba(38, 38, 38, 1)";
|
|
161
|
+
export const NavdsShadowXsmall = "0px 2px 1px -1px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.1)";
|
|
162
|
+
export const NavdsShadowSmall = "0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1)";
|
|
163
|
+
export const NavdsShadowMedium = "0px 4px 6px -4px rgba(0, 0, 0, 0.1) ,0px 10px 15px -3px rgba(0, 0, 0, 0.1)";
|
|
164
|
+
export const NavdsShadowLarge = "0px 8px 10px -6px rgba(0, 0, 0, 0.1), 0px 20px 25px -5px rgba(0, 0, 0, 0.1)";
|
|
165
|
+
export const NavdsShadowXlarge = "0px 8px 10px -6px rgba(0, 0, 0, 0.1), 0px 25px 50px -12px rgba(0, 0, 0, 0.25)";
|
|
166
|
+
export const NavdsShadowFocus = "0 0 0 3px rgba(0, 52, 125, 1)";
|
|
167
|
+
export const NavdsShadowFocusInverted = "0 0 0 3px rgba(153, 195, 255, 1)";
|
|
168
|
+
export const NavdsShadowPopover = "0 2px 4px 0 rgba(229, 229, 229, 1)";
|
|
169
|
+
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)";
|
|
162
170
|
export const NavdsSpacing1 = "0.25rem";
|
|
163
171
|
export const NavdsSpacing2 = "0.5rem";
|
|
164
172
|
export const NavdsSpacing3 = "0.75rem";
|
package/dist/tokens.less
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Wed, 23 Feb 2022 08:47:04 GMT
|
|
4
4
|
|
|
5
5
|
@navds-font-family: "Source Sans Pro", Arial, sans-serif;
|
|
6
6
|
@navds-font-line-height-heading-2xlarge: 3.25rem;
|
|
@@ -24,10 +24,6 @@
|
|
|
24
24
|
@navds-font-size-small: 0.875rem;
|
|
25
25
|
@navds-font-weight-bold: 600;
|
|
26
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
27
|
@navds-z-index-modal: 2000;
|
|
32
28
|
@navds-z-index-popover: 1000;
|
|
33
29
|
@navds-z-index-focus: 10;
|
|
@@ -53,10 +49,13 @@
|
|
|
53
49
|
@navds-global-color-deepblue-900: rgba(0, 36, 58, 1);
|
|
54
50
|
@navds-global-color-gray-50: rgba(247, 247, 247, 1);
|
|
55
51
|
@navds-global-color-gray-100: rgba(241, 241, 241, 1);
|
|
56
|
-
@navds-global-color-gray-200: rgba(
|
|
57
|
-
@navds-global-color-gray-
|
|
58
|
-
@navds-global-color-gray-
|
|
59
|
-
@navds-global-color-gray-
|
|
52
|
+
@navds-global-color-gray-200: rgba(229, 229, 229, 1);
|
|
53
|
+
@navds-global-color-gray-300: rgba(207, 207, 207, 1);
|
|
54
|
+
@navds-global-color-gray-400: rgba(176, 176, 176, 1);
|
|
55
|
+
@navds-global-color-gray-500: rgba(143, 143, 143, 1);
|
|
56
|
+
@navds-global-color-gray-600: rgba(112, 112, 112, 1);
|
|
57
|
+
@navds-global-color-gray-700: rgba(89, 89, 89, 1);
|
|
58
|
+
@navds-global-color-gray-800: rgba(64, 64, 64, 1);
|
|
60
59
|
@navds-global-color-gray-900: rgba(38, 38, 38, 1);
|
|
61
60
|
@navds-global-color-green-50: rgba(243, 252, 245, 1);
|
|
62
61
|
@navds-global-color-green-100: rgba(204, 241, 214, 1);
|
|
@@ -121,16 +120,16 @@
|
|
|
121
120
|
@navds-global-color-red-900: rgba(72, 9, 0, 1);
|
|
122
121
|
@navds-global-color-transparent: rgba(255, 255, 255, 0);
|
|
123
122
|
@navds-global-color-white: rgba(255, 255, 255, 1);
|
|
124
|
-
@navds-semantic-color-border-inverted: rgba(
|
|
125
|
-
@navds-semantic-color-border-muted: rgba(
|
|
126
|
-
@navds-semantic-color-border: rgba(
|
|
123
|
+
@navds-semantic-color-border-inverted: rgba(229, 229, 229, 1);
|
|
124
|
+
@navds-semantic-color-border-muted: rgba(176, 176, 176, 1);
|
|
125
|
+
@navds-semantic-color-border: rgba(112, 112, 112, 1);
|
|
127
126
|
@navds-semantic-color-canvas-background-inverted: rgba(38, 38, 38, 1);
|
|
128
127
|
@navds-semantic-color-canvas-background-light: rgba(255, 255, 255, 1);
|
|
129
128
|
@navds-semantic-color-canvas-background: rgba(241, 241, 241, 1);
|
|
130
129
|
@navds-semantic-color-component-background-alternate: rgba(247, 247, 247, 1);
|
|
131
130
|
@navds-semantic-color-component-background-inverted: rgba(38, 38, 38, 1);
|
|
132
131
|
@navds-semantic-color-component-background-light: rgba(255, 255, 255, 1);
|
|
133
|
-
@navds-semantic-color-divider: rgba(
|
|
132
|
+
@navds-semantic-color-divider: rgba(229, 229, 229, 1);
|
|
134
133
|
@navds-semantic-color-feedback-danger-background: rgba(249, 210, 204, 1);
|
|
135
134
|
@navds-semantic-color-feedback-danger-border: rgba(186, 58, 38, 1);
|
|
136
135
|
@navds-semantic-color-feedback-danger-icon: rgba(186, 58, 38, 1);
|
|
@@ -156,8 +155,17 @@
|
|
|
156
155
|
@navds-semantic-color-link-visited: rgba(99, 70, 137, 1);
|
|
157
156
|
@navds-semantic-color-link: rgba(0, 103, 197, 1);
|
|
158
157
|
@navds-semantic-color-text-inverted: rgba(255, 255, 255, 1);
|
|
159
|
-
@navds-semantic-color-text-muted: rgba(
|
|
158
|
+
@navds-semantic-color-text-muted: rgba(112, 112, 112, 1);
|
|
160
159
|
@navds-semantic-color-text: rgba(38, 38, 38, 1);
|
|
160
|
+
@navds-shadow-xsmall: 0px 2px 1px -1px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
|
|
161
|
+
@navds-shadow-small: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
162
|
+
@navds-shadow-medium: 0px 4px 6px -4px rgba(0, 0, 0, 0.1) ,0px 10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
163
|
+
@navds-shadow-large: 0px 8px 10px -6px rgba(0, 0, 0, 0.1), 0px 20px 25px -5px rgba(0, 0, 0, 0.1);
|
|
164
|
+
@navds-shadow-xlarge: 0px 8px 10px -6px rgba(0, 0, 0, 0.1), 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
165
|
+
@navds-shadow-focus: 0 0 0 3px rgba(0, 52, 125, 1);
|
|
166
|
+
@navds-shadow-focus-inverted: 0 0 0 3px rgba(153, 195, 255, 1);
|
|
167
|
+
@navds-shadow-popover: 0 2px 4px 0 rgba(229, 229, 229, 1);
|
|
168
|
+
@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);
|
|
161
169
|
@navds-spacing-1: 0.25rem;
|
|
162
170
|
@navds-spacing-2: 0.5rem;
|
|
163
171
|
@navds-spacing-3: 0.75rem;
|
package/dist/tokens.scss
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Wed, 23 Feb 2022 08:47:04 GMT
|
|
4
4
|
|
|
5
5
|
$navds-font-family: "Source Sans Pro", Arial, sans-serif;
|
|
6
6
|
$navds-font-line-height-heading-2xlarge: 3.25rem;
|
|
@@ -24,10 +24,6 @@ $navds-font-size-medium: 1rem;
|
|
|
24
24
|
$navds-font-size-small: 0.875rem;
|
|
25
25
|
$navds-font-weight-bold: 600;
|
|
26
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
27
|
$navds-z-index-modal: 2000;
|
|
32
28
|
$navds-z-index-popover: 1000;
|
|
33
29
|
$navds-z-index-focus: 10;
|
|
@@ -53,10 +49,13 @@ $navds-global-color-deepblue-800: rgba(0, 52, 83, 1);
|
|
|
53
49
|
$navds-global-color-deepblue-900: rgba(0, 36, 58, 1);
|
|
54
50
|
$navds-global-color-gray-50: rgba(247, 247, 247, 1);
|
|
55
51
|
$navds-global-color-gray-100: rgba(241, 241, 241, 1);
|
|
56
|
-
$navds-global-color-gray-200: rgba(
|
|
57
|
-
$navds-global-color-gray-
|
|
58
|
-
$navds-global-color-gray-
|
|
59
|
-
$navds-global-color-gray-
|
|
52
|
+
$navds-global-color-gray-200: rgba(229, 229, 229, 1);
|
|
53
|
+
$navds-global-color-gray-300: rgba(207, 207, 207, 1);
|
|
54
|
+
$navds-global-color-gray-400: rgba(176, 176, 176, 1);
|
|
55
|
+
$navds-global-color-gray-500: rgba(143, 143, 143, 1);
|
|
56
|
+
$navds-global-color-gray-600: rgba(112, 112, 112, 1);
|
|
57
|
+
$navds-global-color-gray-700: rgba(89, 89, 89, 1);
|
|
58
|
+
$navds-global-color-gray-800: rgba(64, 64, 64, 1);
|
|
60
59
|
$navds-global-color-gray-900: rgba(38, 38, 38, 1);
|
|
61
60
|
$navds-global-color-green-50: rgba(243, 252, 245, 1);
|
|
62
61
|
$navds-global-color-green-100: rgba(204, 241, 214, 1);
|
|
@@ -121,16 +120,16 @@ $navds-global-color-red-800: rgba(106, 18, 4, 1);
|
|
|
121
120
|
$navds-global-color-red-900: rgba(72, 9, 0, 1);
|
|
122
121
|
$navds-global-color-transparent: rgba(255, 255, 255, 0);
|
|
123
122
|
$navds-global-color-white: rgba(255, 255, 255, 1);
|
|
124
|
-
$navds-semantic-color-border-inverted: rgba(
|
|
125
|
-
$navds-semantic-color-border-muted: rgba(
|
|
126
|
-
$navds-semantic-color-border: rgba(
|
|
123
|
+
$navds-semantic-color-border-inverted: rgba(229, 229, 229, 1);
|
|
124
|
+
$navds-semantic-color-border-muted: rgba(176, 176, 176, 1);
|
|
125
|
+
$navds-semantic-color-border: rgba(112, 112, 112, 1);
|
|
127
126
|
$navds-semantic-color-canvas-background-inverted: rgba(38, 38, 38, 1);
|
|
128
127
|
$navds-semantic-color-canvas-background-light: rgba(255, 255, 255, 1);
|
|
129
128
|
$navds-semantic-color-canvas-background: rgba(241, 241, 241, 1);
|
|
130
129
|
$navds-semantic-color-component-background-alternate: rgba(247, 247, 247, 1);
|
|
131
130
|
$navds-semantic-color-component-background-inverted: rgba(38, 38, 38, 1);
|
|
132
131
|
$navds-semantic-color-component-background-light: rgba(255, 255, 255, 1);
|
|
133
|
-
$navds-semantic-color-divider: rgba(
|
|
132
|
+
$navds-semantic-color-divider: rgba(229, 229, 229, 1);
|
|
134
133
|
$navds-semantic-color-feedback-danger-background: rgba(249, 210, 204, 1);
|
|
135
134
|
$navds-semantic-color-feedback-danger-border: rgba(186, 58, 38, 1);
|
|
136
135
|
$navds-semantic-color-feedback-danger-icon: rgba(186, 58, 38, 1);
|
|
@@ -156,8 +155,17 @@ $navds-semantic-color-interaction-primary: rgba(0, 103, 197, 1);
|
|
|
156
155
|
$navds-semantic-color-link-visited: rgba(99, 70, 137, 1);
|
|
157
156
|
$navds-semantic-color-link: rgba(0, 103, 197, 1);
|
|
158
157
|
$navds-semantic-color-text-inverted: rgba(255, 255, 255, 1);
|
|
159
|
-
$navds-semantic-color-text-muted: rgba(
|
|
158
|
+
$navds-semantic-color-text-muted: rgba(112, 112, 112, 1);
|
|
160
159
|
$navds-semantic-color-text: rgba(38, 38, 38, 1);
|
|
160
|
+
$navds-shadow-xsmall: 0px 2px 1px -1px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
|
|
161
|
+
$navds-shadow-small: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
162
|
+
$navds-shadow-medium: 0px 4px 6px -4px rgba(0, 0, 0, 0.1) ,0px 10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
163
|
+
$navds-shadow-large: 0px 8px 10px -6px rgba(0, 0, 0, 0.1), 0px 20px 25px -5px rgba(0, 0, 0, 0.1);
|
|
164
|
+
$navds-shadow-xlarge: 0px 8px 10px -6px rgba(0, 0, 0, 0.1), 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
165
|
+
$navds-shadow-focus: 0 0 0 3px rgba(0, 52, 125, 1);
|
|
166
|
+
$navds-shadow-focus-inverted: 0 0 0 3px rgba(153, 195, 255, 1);
|
|
167
|
+
$navds-shadow-popover: 0 2px 4px 0 rgba(229, 229, 229, 1);
|
|
168
|
+
$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);
|
|
161
169
|
$navds-spacing-1: 0.25rem;
|
|
162
170
|
$navds-spacing-2: 0.5rem;
|
|
163
171
|
$navds-spacing-3: 0.75rem;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@navikt/ds-tokens",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.2",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Auto-generated design-tokens for NAV design-systems framework",
|
|
6
6
|
"author": "NAV Designsystem team",
|
|
@@ -14,7 +14,8 @@
|
|
|
14
14
|
"license": "MIT",
|
|
15
15
|
"files": [
|
|
16
16
|
"/dist",
|
|
17
|
-
"/src"
|
|
17
|
+
"/src",
|
|
18
|
+
"/tailwind"
|
|
18
19
|
],
|
|
19
20
|
"scripts": {
|
|
20
21
|
"build": "node ./build.js",
|
|
@@ -40,5 +41,5 @@
|
|
|
40
41
|
"ts-jest": "^27.0.5",
|
|
41
42
|
"ts-node": "^10.3.0"
|
|
42
43
|
},
|
|
43
|
-
"gitHead": "
|
|
44
|
+
"gitHead": "7c9b21495f14ddbbedf4dfa4396c9ef5b8e19b56"
|
|
44
45
|
}
|
package/src/colors.json
CHANGED
|
@@ -74,16 +74,25 @@
|
|
|
74
74
|
"value": "rgba(241, 241, 241, 1)"
|
|
75
75
|
},
|
|
76
76
|
"200": {
|
|
77
|
-
"value": "rgba(
|
|
77
|
+
"value": "rgba(229, 229, 229, 1)"
|
|
78
|
+
},
|
|
79
|
+
"300": {
|
|
80
|
+
"value": "rgba(207, 207, 207, 1)"
|
|
78
81
|
},
|
|
79
82
|
"400": {
|
|
80
|
-
"value": "rgba(
|
|
83
|
+
"value": "rgba(176, 176, 176, 1)"
|
|
84
|
+
},
|
|
85
|
+
"500": {
|
|
86
|
+
"value": "rgba(143, 143, 143, 1)"
|
|
81
87
|
},
|
|
82
88
|
"600": {
|
|
83
|
-
"value": "rgba(
|
|
89
|
+
"value": "rgba(112, 112, 112, 1)"
|
|
90
|
+
},
|
|
91
|
+
"700": {
|
|
92
|
+
"value": "rgba(89, 89, 89, 1)"
|
|
84
93
|
},
|
|
85
94
|
"800": {
|
|
86
|
-
"value": "rgba(
|
|
95
|
+
"value": "rgba(64, 64, 64, 1)"
|
|
87
96
|
},
|
|
88
97
|
"900": {
|
|
89
98
|
"value": "rgba(38, 38, 38, 1)"
|
package/src/index.js
CHANGED
|
@@ -39,19 +39,6 @@ module.exports = {
|
|
|
39
39
|
regular: { value: "400" },
|
|
40
40
|
},
|
|
41
41
|
},
|
|
42
|
-
shadow: {
|
|
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}",
|
|
46
|
-
},
|
|
47
|
-
popover: {
|
|
48
|
-
value: "0 2px 4px 0 {navds.global.color.gray.200.value}",
|
|
49
|
-
},
|
|
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)",
|
|
53
|
-
},
|
|
54
|
-
},
|
|
55
42
|
"z-index": {
|
|
56
43
|
modal: { value: 2000 },
|
|
57
44
|
popover: { value: 1000 },
|
package/src/shadow.json
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
{
|
|
2
|
+
"navds": {
|
|
3
|
+
"shadow": {
|
|
4
|
+
"xsmall": {
|
|
5
|
+
"value": "0px 2px 1px -1px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.1)"
|
|
6
|
+
},
|
|
7
|
+
"small": {
|
|
8
|
+
"value": "0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1)"
|
|
9
|
+
},
|
|
10
|
+
"medium": {
|
|
11
|
+
"value": "0px 4px 6px -4px rgba(0, 0, 0, 0.1) ,0px 10px 15px -3px rgba(0, 0, 0, 0.1)"
|
|
12
|
+
},
|
|
13
|
+
"large": {
|
|
14
|
+
"value": "0px 8px 10px -6px rgba(0, 0, 0, 0.1), 0px 20px 25px -5px rgba(0, 0, 0, 0.1)"
|
|
15
|
+
},
|
|
16
|
+
"xlarge": {
|
|
17
|
+
"value": "0px 8px 10px -6px rgba(0, 0, 0, 0.1), 0px 25px 50px -12px rgba(0, 0, 0, 0.25)"
|
|
18
|
+
},
|
|
19
|
+
"focus": {
|
|
20
|
+
"value": "0 0 0 3px {navds.semantic.color.focus.@.value}"
|
|
21
|
+
},
|
|
22
|
+
"focus-inverted": {
|
|
23
|
+
"value": "0 0 0 3px {navds.semantic.color.focus.inverted.value}"
|
|
24
|
+
},
|
|
25
|
+
"popover": {
|
|
26
|
+
"value": "0 2px 4px 0 {navds.global.color.gray.200.value}"
|
|
27
|
+
},
|
|
28
|
+
"card": {
|
|
29
|
+
"value": "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)"
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|