@abgov/design-tokens 1.3.0 → 1.4.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.
- package/data/component-design-tokens/accordion-design-tokens.json +74 -0
- package/data/component-design-tokens/button-design-tokens.json +26 -0
- package/data/component-design-tokens/callout-design-tokens.json +134 -0
- package/data/component-design-tokens/container-design-tokens.json +18 -0
- package/data/component-design-tokens/drawer-design-tokens.json +48 -0
- package/data/component-design-tokens/side-menu-design-tokens.json +50 -0
- package/data/component-design-tokens/table-design-tokens.json +10 -0
- package/data/goa-global-design-tokens.json +756 -0
- package/dist/tokens.css +123 -62
- package/dist/tokens.scss +124 -63
- package/lib/design-tokens.js +16 -0
- package/package.json +1 -1
- package/data/global-ddi.json +0 -851
package/dist/tokens.css
CHANGED
|
@@ -1,25 +1,23 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 22 Oct 2024 19:18:06 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
7
|
-
--goa-callout-emergency-border-color: none;
|
|
8
|
-
--goa-callout-success-border-color: none;
|
|
9
|
-
--goa-callout-warning-border-color: none;
|
|
10
|
-
--goa-callout-info-border-color: none;
|
|
11
|
-
--goa-button-height-start: 3.25rem;
|
|
12
|
-
--goa-button-height-compact: 2rem;
|
|
13
|
-
--goa-button-height: 2.625rem;
|
|
14
|
-
--goa-shadow-modal: 6px 6px 6px 0px rgba(0,0,0,0.16);
|
|
15
|
-
--goa-icon-size-l: 1.5rem;
|
|
16
|
-
--goa-icon-size-m: 1.25rem;
|
|
17
|
-
--goa-icon-size-s: 1rem;
|
|
18
7
|
--goa-letter-spacing-button: 0.0125rem;
|
|
19
|
-
--goa-
|
|
20
|
-
--goa-
|
|
21
|
-
--goa-
|
|
22
|
-
--goa-
|
|
8
|
+
--goa-font-weight-bold: 700;
|
|
9
|
+
--goa-font-weight-medium: 500;
|
|
10
|
+
--goa-font-weight-regular: 400;
|
|
11
|
+
--goa-font-size-10: 3rem;
|
|
12
|
+
--goa-font-size-9: 2.25rem;
|
|
13
|
+
--goa-font-size-8: 2rem;
|
|
14
|
+
--goa-font-size-7: 1.5rem;
|
|
15
|
+
--goa-font-size-6: 1.375rem;
|
|
16
|
+
--goa-font-size-5: 1.25rem;
|
|
17
|
+
--goa-font-size-4: 1.125rem;
|
|
18
|
+
--goa-font-size-3: 1rem;
|
|
19
|
+
--goa-font-size-2: 0.875rem;
|
|
20
|
+
--goa-font-size-1: 0.75rem;
|
|
23
21
|
--goa-font-family-number: roboto-mono, monospace;
|
|
24
22
|
--goa-font-family-sans: acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
|
|
25
23
|
--goa-line-height-05: 1.125rem;
|
|
@@ -30,10 +28,17 @@
|
|
|
30
28
|
--goa-line-height-3: 1.75rem;
|
|
31
29
|
--goa-line-height-2: 1.5rem;
|
|
32
30
|
--goa-line-height-1: 1.25rem;
|
|
33
|
-
--goa-
|
|
34
|
-
--goa-
|
|
35
|
-
--goa-
|
|
36
|
-
--goa-
|
|
31
|
+
--goa-shadow-modal: 6px 6px 6px 0px rgba(0,0,0,0.16);
|
|
32
|
+
--goa-shadow-600: 0px 20px 20px -8px #1a1a1a47;
|
|
33
|
+
--goa-shadow-500: 0px 12px 20px -8px #1a1a1a3D;
|
|
34
|
+
--goa-shadow-400: 0px 8px 16px -4px #1a1a1a38;
|
|
35
|
+
--goa-shadow-300: 0px 4px 6px -2px #1a1a1a33;
|
|
36
|
+
--goa-shadow-200: 0px 3px 1px -1px #1a1a1a12;
|
|
37
|
+
--goa-shadow-150: 0px 1px 0px 0px #1a1a1a40;
|
|
38
|
+
--goa-shadow-100: 0px 1px 0px 0px #1A1A1A12;
|
|
39
|
+
--goa-icon-size-l: 1.5rem;
|
|
40
|
+
--goa-icon-size-m: 1.25rem;
|
|
41
|
+
--goa-icon-size-s: 1rem;
|
|
37
42
|
--goa-space-4xl: 8rem;
|
|
38
43
|
--goa-space-3xl: 4rem;
|
|
39
44
|
--goa-space-2xl: 3rem;
|
|
@@ -45,28 +50,49 @@
|
|
|
45
50
|
--goa-space-2xs: 0.25rem;
|
|
46
51
|
--goa-space-3xs: 0.125rem;
|
|
47
52
|
--goa-space-none: 0rem;
|
|
48
|
-
--goa-
|
|
49
|
-
--goa-
|
|
50
|
-
--goa-
|
|
51
|
-
--goa-
|
|
52
|
-
--goa-
|
|
53
|
-
--goa-
|
|
54
|
-
--goa-
|
|
55
|
-
--goa-
|
|
56
|
-
--goa-
|
|
57
|
-
--goa-
|
|
58
|
-
--goa-
|
|
59
|
-
--goa-
|
|
60
|
-
--goa-
|
|
53
|
+
--goa-border-width-l: 3px;
|
|
54
|
+
--goa-border-width-m: 2px;
|
|
55
|
+
--goa-border-width-s: 1px;
|
|
56
|
+
--goa-border-width-xs: 0.7px;
|
|
57
|
+
--goa-border-width-2xs: 0.5px;
|
|
58
|
+
--goa-border-radius-3xl: 0.75rem;
|
|
59
|
+
--goa-border-radius-2xl: 0.625rem;
|
|
60
|
+
--goa-border-radius-xl: 0.5rem;
|
|
61
|
+
--goa-border-radius-l: 0.375rem;
|
|
62
|
+
--goa-border-radius-m: 0.25rem;
|
|
63
|
+
--goa-border-radius-none: 0;
|
|
64
|
+
--goa-opacity-background-loading: 90%;
|
|
65
|
+
--goa-opacity-background-modal: 50%;
|
|
66
|
+
--goa-color-extended-yellow: #fce796;
|
|
67
|
+
--goa-color-extended-violet: #d4c2ff;
|
|
68
|
+
--goa-color-extended-red: #ed948d;
|
|
69
|
+
--goa-color-extended-pink: #ff8fc5;
|
|
70
|
+
--goa-color-extended-orange: #ffc76d;
|
|
71
|
+
--goa-color-extended-green: #bbfcb4;
|
|
72
|
+
--goa-color-extended-blue: #aac9e7;
|
|
73
|
+
--goa-color-extended-aqua: #7febe6;
|
|
74
|
+
--goa-color-extended-light-yellow: #fff7bf;
|
|
75
|
+
--goa-color-extended-light-violet: #efe2fb;
|
|
76
|
+
--goa-color-extended-light-red: #f4cdc6;
|
|
77
|
+
--goa-color-extended-light-pink: #f9e1eb;
|
|
78
|
+
--goa-color-extended-light-orange: #fcd6c3;
|
|
79
|
+
--goa-color-extended-light-green: #cce2d9;
|
|
80
|
+
--goa-color-extended-light-blue: #ddefff;
|
|
81
|
+
--goa-color-extended-light-aqua: #dcfbf8;
|
|
61
82
|
--goa-color-greyscale-white: #ffffff;
|
|
62
83
|
--goa-color-greyscale-black: #333333;
|
|
84
|
+
--goa-color-greyscale-900: #474747;
|
|
85
|
+
--goa-color-greyscale-800: #5c5c5c;
|
|
63
86
|
--goa-color-greyscale-700: #666666;
|
|
64
87
|
--goa-color-greyscale-600: #858585;
|
|
65
88
|
--goa-color-greyscale-500: #949494;
|
|
66
89
|
--goa-color-greyscale-400: #adadad;
|
|
90
|
+
--goa-color-greyscale-300: #c2c2c2;
|
|
67
91
|
--goa-color-greyscale-200: #dcdcdc;
|
|
92
|
+
--goa-color-greyscale-150: #e7e7e7;
|
|
68
93
|
--goa-color-greyscale-100: #f1f1f1;
|
|
69
94
|
--goa-color-greyscale-50: #f8f8f8;
|
|
95
|
+
--goa-color-critical-default: #171d23;
|
|
70
96
|
--goa-color-success-background: #eef9f3;
|
|
71
97
|
--goa-color-success-dark: #00563a;
|
|
72
98
|
--goa-color-success-light: #cce4dc;
|
|
@@ -83,15 +109,60 @@
|
|
|
83
109
|
--goa-color-info-dark: #003b70;
|
|
84
110
|
--goa-color-info-light: #aac9e7;
|
|
85
111
|
--goa-color-info-default: #004a8f;
|
|
86
|
-
--goa-color-
|
|
112
|
+
--goa-color-brand-light: #c8eefa;
|
|
113
|
+
--goa-color-brand-dark: #005072;
|
|
114
|
+
--goa-color-brand-default: #0081a2;
|
|
115
|
+
--goa-color-interactive-visited: #756693;
|
|
116
|
+
--goa-color-interactive-focus-black: #000000;
|
|
87
117
|
--goa-color-interactive-focus: #feba35;
|
|
118
|
+
--goa-color-interactive-error-disabled: #f58185;
|
|
119
|
+
--goa-color-interactive-error-hover: #ba0000;
|
|
88
120
|
--goa-color-interactive-error: #ec040b;
|
|
121
|
+
--goa-color-interactive-disabled: #80b7e1;
|
|
89
122
|
--goa-color-interactive-hover: #004f84;
|
|
90
123
|
--goa-color-interactive-default: #0070c4;
|
|
91
|
-
--goa-color-
|
|
92
|
-
--goa-
|
|
93
|
-
--goa-
|
|
124
|
+
--goa-side-menu-parent-color-bg-hover: #CEDFEE;
|
|
125
|
+
--goa-side-menu-child-border-width: 4px;
|
|
126
|
+
--goa-drawer-transition-time: 200ms;
|
|
127
|
+
--goa-drawer-right-shadow: -4px 0px 12px 0px rgba(0,0,0,0.2);
|
|
128
|
+
--goa-drawer-left-shadow: 4px 0px 12px 0px rgba(0,0,0,0.2);
|
|
129
|
+
--goa-drawer-bottom-shadow: 0px -4px 12px 0px rgba(0,0,0,0.2);
|
|
130
|
+
--goa-drawer-overlay-color: rgba(0,0,0,0.3);
|
|
131
|
+
--goa-callout-emergency-border-color: none;
|
|
132
|
+
--goa-callout-success-border-color: none;
|
|
133
|
+
--goa-callout-warning-border-color: none;
|
|
134
|
+
--goa-callout-info-border-color: none;
|
|
135
|
+
--goa-callout-l-border-width: 0px;
|
|
136
|
+
--goa-callout-m-border-width: 0px;
|
|
137
|
+
--goa-button-height-compact: 32px;
|
|
138
|
+
--goa-button-height: 42px;
|
|
139
|
+
--goa-accordion-shadow: 0px 0px 0px 0px #000000;
|
|
140
|
+
--goa-typography-number-l: var(--goa-font-weight-medium) var(--goa-font-size-7)/var(--goa-line-height-4) var(--goa-font-family-number);
|
|
141
|
+
--goa-typography-number-m: var(--goa-font-weight-medium) var(--goa-font-size-4)/var(--goa-line-height-3) var(--goa-font-family-number);
|
|
142
|
+
--goa-typography-number-s: var(--goa-font-weight-medium) var(--goa-font-size-3)/var(--goa-line-height-2) var(--goa-font-family-number);
|
|
143
|
+
--goa-typography-button-default: var(--goa-font-weight-regular) var(--goa-font-size-4)/var(--goa-line-height-1) var(--goa-font-family-sans);
|
|
144
|
+
--goa-typography-body-l: var(--goa-font-weight-regular) var(--goa-font-size-7)/var(--goa-line-height-4) var(--goa-font-family-sans);
|
|
145
|
+
--goa-typography-body-m: var(--goa-font-weight-regular) var(--goa-font-size-4)/var(--goa-line-height-3) var(--goa-font-family-sans);
|
|
146
|
+
--goa-typography-body-s: var(--goa-font-weight-regular) var(--goa-font-size-3)/var(--goa-line-height-2) var(--goa-font-family-sans);
|
|
147
|
+
--goa-typography-body-xs: var(--goa-font-weight-regular) var(--goa-font-size-2)/var(--goa-line-height-1) var(--goa-font-family-sans);
|
|
148
|
+
--goa-typography-heading-xl: var(--goa-font-weight-bold) var(--goa-font-size-10)/var(--goa-line-height-7) var(--goa-font-family-sans);
|
|
149
|
+
--goa-typography-heading-l: var(--goa-font-weight-regular) var(--goa-font-size-9)/var(--goa-line-height-6) var(--goa-font-family-sans);
|
|
150
|
+
--goa-typography-heading-m: var(--goa-font-weight-regular) var(--goa-font-size-7)/var(--goa-line-height-4) var(--goa-font-family-sans);
|
|
151
|
+
--goa-typography-heading-s: var(--goa-font-weight-bold) var(--goa-font-size-4)/var(--goa-line-height-3) var(--goa-font-family-sans);
|
|
152
|
+
--goa-typography-heading-xs: var(--goa-font-weight-bold) var(--goa-font-size-3)/var(--goa-line-height-2) var(--goa-font-family-sans);
|
|
153
|
+
--goa-color-text-disabled: var(--goa-color-greyscale-700);
|
|
154
|
+
--goa-color-text-light: var(--goa-color-greyscale-white);
|
|
155
|
+
--goa-color-text-secondary: var(--goa-color-greyscale-700);
|
|
156
|
+
--goa-color-text-default: var(--goa-color-greyscale-black);
|
|
94
157
|
--goa-table-color-border-heading: var(--goa-color-greyscale-600);
|
|
158
|
+
--goa-side-menu-child-color-bg-selected: var(--goa-color-info-background);
|
|
159
|
+
--goa-side-menu-child-color-bg-hover: var(--goa-color-info-background);
|
|
160
|
+
--goa-side-menu-group-border-radius: var(--goa-border-radius-none);
|
|
161
|
+
--goa-side-menu-parent-padding: var(--goa-space-none);
|
|
162
|
+
--goa-side-menu-sub-group-padding: var(--goa-space-none) var(--goa-space-none) var(--goa-space-none) var(--goa-space-none);
|
|
163
|
+
--goa-side-menu-group-padding: var(--goa-space-m) var(--goa-space-none) var(--goa-space-l) var(--goa-space-none);
|
|
164
|
+
--goa-side-menu-group-color-bg: var(--goa-color-greyscale-white);
|
|
165
|
+
--goa-drawer-padding: var(--goa-space-m);
|
|
95
166
|
--goa-container-padding: var(--goa-space-l);
|
|
96
167
|
--goa-container-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
|
|
97
168
|
--goa-container-border-radius: var(--goa-border-radius-m);
|
|
@@ -105,52 +176,42 @@
|
|
|
105
176
|
--goa-callout-warning-icon-color: var(--goa-color-greyscale-black);
|
|
106
177
|
--goa-callout-warning-color-bg-statusbar: var(--goa-color-warning-default);
|
|
107
178
|
--goa-callout-warning-color-bg-content: var(--goa-color-greyscale-100);
|
|
108
|
-
--goa-callout-info-color-bg-statusbar: var(--goa-color-info-default);
|
|
109
179
|
--goa-callout-info-icon-color: var(--goa-color-greyscale-white);
|
|
180
|
+
--goa-callout-info-color-bg-statusbar: var(--goa-color-info-default);
|
|
110
181
|
--goa-callout-info-color-bg-content: var(--goa-color-greyscale-100);
|
|
111
182
|
--goa-callout-m-statusbar-padding: var(--goa-space-s) var(--goa-space-2xs);
|
|
112
183
|
--goa-callout-m-content-gap: var(--goa-space-2xs);
|
|
113
184
|
--goa-callout-m-content-padding: var(--goa-space-s);
|
|
114
|
-
--goa-callout-m-
|
|
185
|
+
--goa-callout-m-icon-size: var(--goa-icon-size-s);
|
|
115
186
|
--goa-callout-l-statusbar-padding: var(--goa-space-l) var(--goa-space-s);
|
|
116
187
|
--goa-callout-l-content-gap: var(--goa-space-m);
|
|
117
188
|
--goa-callout-l-content-padding: var(--goa-space-l);
|
|
118
|
-
--goa-callout-l-
|
|
189
|
+
--goa-callout-l-icon-size: var(--goa-icon-size-m);
|
|
119
190
|
--goa-callout-border-radius: var(--goa-border-radius-none);
|
|
191
|
+
--goa-button-padding-lr-compact: var(--goa-space-xs);
|
|
192
|
+
--goa-button-padding-lr: var(--goa-space-s);
|
|
193
|
+
--goa-button-border-radius: var(--goa-border-radius-m);
|
|
120
194
|
--goa-accordion-color-bg-heading-hover: var(--goa-color-greyscale-200);
|
|
121
195
|
--goa-accordion-padding-content-narrow: var(--goa-space-l);
|
|
122
196
|
--goa-accordion-padding-content-wide: var(--goa-space-l) var(--goa-space-l) var(--goa-space-xl) 56px;
|
|
123
|
-
--goa-accordion-padding-heading: var(--goa-space-s) var(--goa-space-m)
|
|
197
|
+
--goa-accordion-padding-heading: var(--goa-space-s) var(--goa-space-m);
|
|
124
198
|
--goa-accordion-border-radius: var(--goa-border-radius-m);
|
|
199
|
+
--goa-accordion-divider: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
|
|
125
200
|
--goa-accordion-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
|
|
126
201
|
--goa-accordion-color-bg-content: var(--goa-color-greyscale-white);
|
|
127
202
|
--goa-accordion-color-bg-heading: var(--goa-color-greyscale-100);
|
|
128
|
-
--goa-button-padding-lr-compact: var(--goa-space-xs);
|
|
129
|
-
--goa-button-padding-lr: var(--goa-space-s);
|
|
130
|
-
--goa-button-border-radius: var(--goa-border-radius-m);
|
|
131
|
-
--goa-typography-number-m: var(--goa-font-weight-medium) var(--goa-font-size-4)/var(--goa-line-height-3) var(--goa-font-family-number);
|
|
132
|
-
--goa-typography-button-default: var(--goa-font-weight-regular) var(--goa-font-size-4)/var(--goa-line-height-1) var(--goa-font-family-sans);
|
|
133
|
-
--goa-typography-body-l: var(--goa-font-weight-regular) var(--goa-font-size-7)/var(--goa-line-height-4) var(--goa-font-family-sans);
|
|
134
|
-
--goa-typography-body-m: var(--goa-font-weight-regular) var(--goa-font-size-4)/var(--goa-line-height-3) var(--goa-font-family-sans);
|
|
135
|
-
--goa-typography-body-s: var(--goa-font-weight-regular) var(--goa-font-size-3)/var(--goa-line-height-2) var(--goa-font-family-sans);
|
|
136
|
-
--goa-typography-body-xs: var(--goa-font-weight-regular) var(--goa-font-size-2)/var(--goa-line-height-1) var(--goa-font-family-sans);
|
|
137
|
-
--goa-typography-heading-xl: var(--goa-font-weight-bold) var(--goa-font-size-10)/var(--goa-line-height-7) var(--goa-font-family-sans);
|
|
138
|
-
--goa-typography-heading-l: var(--goa-font-weight-regular) var(--goa-font-size-9)/var(--goa-line-height-6) var(--goa-font-family-sans);
|
|
139
|
-
--goa-typography-heading-m: var(--goa-font-weight-regular) var(--goa-font-size-7)/var(--goa-line-height-4) var(--goa-font-family-sans);
|
|
140
|
-
--goa-typography-heading-s: var(--goa-font-weight-bold) var(--goa-font-size-4)/var(--goa-line-height-3) var(--goa-font-family-sans);
|
|
141
|
-
--goa-typography-heading-xs: var(--goa-font-weight-bold) var(--goa-font-size-3)/var(--goa-line-height-2) var(--goa-font-family-sans);
|
|
142
|
-
--goa-color-text-disabled: var(--goa-color-greyscale-700);
|
|
143
|
-
--goa-color-text-light: var(--goa-color-greyscale-white);
|
|
144
|
-
--goa-color-text-secondary: var(--goa-color-greyscale-700);
|
|
145
|
-
--goa-color-text-default: var(--goa-color-greyscale-black);
|
|
146
203
|
--goa-table-color-heading: var(--goa-color-text-secondary);
|
|
204
|
+
--goa-side-menu-parent-text-active: var(--goa-typography-body-m);
|
|
205
|
+
--goa-side-menu-parent-text: var(--goa-typography-body-m);
|
|
206
|
+
--goa-side-menu-child-color-text-selected: var(--goa-color-text-default);
|
|
147
207
|
--goa-callout-m-text-size: var(--goa-typography-body-s);
|
|
208
|
+
--goa-callout-l-heading-size: var(--goa-typography-heading-m);
|
|
148
209
|
--goa-callout-m-heading-size: var(--goa-typography-heading-xs);
|
|
149
210
|
--goa-callout-l-text-size: var(--goa-typography-body-m);
|
|
150
|
-
--goa-callout-l-heading
|
|
151
|
-
--goa-
|
|
211
|
+
--goa-callout-l-heading: var(--goa-typography-heading-m);
|
|
212
|
+
--goa-button-text: var(--goa-typography-button-default);
|
|
152
213
|
--goa-accordion-heading-m: var(--goa-typography-heading-m);
|
|
153
214
|
--goa-accordion-heading-s: var(--goa-typography-heading-s);
|
|
215
|
+
--goa-accordion-color-heading-hover: var(--goa-color-text-default);
|
|
154
216
|
--goa-accordion-color-heading: var(--goa-color-text-default);
|
|
155
|
-
--goa-button-text: var(--goa-typography-button-default);
|
|
156
217
|
}
|
package/dist/tokens.scss
CHANGED
|
@@ -1,23 +1,21 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Tue, 22 Oct 2024 19:18:06 GMT
|
|
4
4
|
|
|
5
|
-
$goa-callout-emergency-border-color: none;
|
|
6
|
-
$goa-callout-success-border-color: none;
|
|
7
|
-
$goa-callout-warning-border-color: none;
|
|
8
|
-
$goa-callout-info-border-color: none;
|
|
9
|
-
$goa-button-height-start: 3.25rem;
|
|
10
|
-
$goa-button-height-compact: 2rem;
|
|
11
|
-
$goa-button-height: 2.625rem;
|
|
12
|
-
$goa-shadow-modal: 6px 6px 6px 0px rgba(0,0,0,0.16);
|
|
13
|
-
$goa-icon-size-l: 1.5rem;
|
|
14
|
-
$goa-icon-size-m: 1.25rem;
|
|
15
|
-
$goa-icon-size-s: 1rem;
|
|
16
5
|
$goa-letter-spacing-button: 0.0125rem;
|
|
17
|
-
$goa-
|
|
18
|
-
$goa-
|
|
19
|
-
$goa-
|
|
20
|
-
$goa-
|
|
6
|
+
$goa-font-weight-bold: 700;
|
|
7
|
+
$goa-font-weight-medium: 500;
|
|
8
|
+
$goa-font-weight-regular: 400;
|
|
9
|
+
$goa-font-size-10: 3rem;
|
|
10
|
+
$goa-font-size-9: 2.25rem;
|
|
11
|
+
$goa-font-size-8: 2rem;
|
|
12
|
+
$goa-font-size-7: 1.5rem;
|
|
13
|
+
$goa-font-size-6: 1.375rem;
|
|
14
|
+
$goa-font-size-5: 1.25rem;
|
|
15
|
+
$goa-font-size-4: 1.125rem;
|
|
16
|
+
$goa-font-size-3: 1rem;
|
|
17
|
+
$goa-font-size-2: 0.875rem;
|
|
18
|
+
$goa-font-size-1: 0.75rem;
|
|
21
19
|
$goa-font-family-number: roboto-mono, monospace;
|
|
22
20
|
$goa-font-family-sans: acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
|
|
23
21
|
$goa-line-height-05: 1.125rem;
|
|
@@ -28,10 +26,17 @@ $goa-line-height-4: 2rem;
|
|
|
28
26
|
$goa-line-height-3: 1.75rem;
|
|
29
27
|
$goa-line-height-2: 1.5rem;
|
|
30
28
|
$goa-line-height-1: 1.25rem;
|
|
31
|
-
$goa-
|
|
32
|
-
$goa-
|
|
33
|
-
$goa-
|
|
34
|
-
$goa-
|
|
29
|
+
$goa-shadow-modal: 6px 6px 6px 0px rgba(0,0,0,0.16);
|
|
30
|
+
$goa-shadow-600: 0px 20px 20px -8px #1a1a1a47;
|
|
31
|
+
$goa-shadow-500: 0px 12px 20px -8px #1a1a1a3D;
|
|
32
|
+
$goa-shadow-400: 0px 8px 16px -4px #1a1a1a38;
|
|
33
|
+
$goa-shadow-300: 0px 4px 6px -2px #1a1a1a33;
|
|
34
|
+
$goa-shadow-200: 0px 3px 1px -1px #1a1a1a12;
|
|
35
|
+
$goa-shadow-150: 0px 1px 0px 0px #1a1a1a40;
|
|
36
|
+
$goa-shadow-100: 0px 1px 0px 0px #1A1A1A12;
|
|
37
|
+
$goa-icon-size-l: 1.5rem;
|
|
38
|
+
$goa-icon-size-m: 1.25rem;
|
|
39
|
+
$goa-icon-size-s: 1rem;
|
|
35
40
|
$goa-space-4xl: 8rem;
|
|
36
41
|
$goa-space-3xl: 4rem;
|
|
37
42
|
$goa-space-2xl: 3rem;
|
|
@@ -43,28 +48,49 @@ $goa-space-xs: 0.5rem;
|
|
|
43
48
|
$goa-space-2xs: 0.25rem;
|
|
44
49
|
$goa-space-3xs: 0.125rem;
|
|
45
50
|
$goa-space-none: 0rem;
|
|
46
|
-
$goa-
|
|
47
|
-
$goa-
|
|
48
|
-
$goa-
|
|
49
|
-
$goa-
|
|
50
|
-
$goa-
|
|
51
|
-
$goa-
|
|
52
|
-
$goa-
|
|
53
|
-
$goa-
|
|
54
|
-
$goa-
|
|
55
|
-
$goa-
|
|
56
|
-
$goa-
|
|
57
|
-
$goa-
|
|
58
|
-
$goa-
|
|
51
|
+
$goa-border-width-l: 3px;
|
|
52
|
+
$goa-border-width-m: 2px;
|
|
53
|
+
$goa-border-width-s: 1px;
|
|
54
|
+
$goa-border-width-xs: 0.7px;
|
|
55
|
+
$goa-border-width-2xs: 0.5px;
|
|
56
|
+
$goa-border-radius-3xl: 0.75rem;
|
|
57
|
+
$goa-border-radius-2xl: 0.625rem;
|
|
58
|
+
$goa-border-radius-xl: 0.5rem;
|
|
59
|
+
$goa-border-radius-l: 0.375rem;
|
|
60
|
+
$goa-border-radius-m: 0.25rem;
|
|
61
|
+
$goa-border-radius-none: 0;
|
|
62
|
+
$goa-opacity-background-loading: 90%;
|
|
63
|
+
$goa-opacity-background-modal: 50%;
|
|
64
|
+
$goa-color-extended-yellow: #fce796;
|
|
65
|
+
$goa-color-extended-violet: #d4c2ff;
|
|
66
|
+
$goa-color-extended-red: #ed948d;
|
|
67
|
+
$goa-color-extended-pink: #ff8fc5;
|
|
68
|
+
$goa-color-extended-orange: #ffc76d;
|
|
69
|
+
$goa-color-extended-green: #bbfcb4;
|
|
70
|
+
$goa-color-extended-blue: #aac9e7;
|
|
71
|
+
$goa-color-extended-aqua: #7febe6;
|
|
72
|
+
$goa-color-extended-light-yellow: #fff7bf;
|
|
73
|
+
$goa-color-extended-light-violet: #efe2fb;
|
|
74
|
+
$goa-color-extended-light-red: #f4cdc6;
|
|
75
|
+
$goa-color-extended-light-pink: #f9e1eb;
|
|
76
|
+
$goa-color-extended-light-orange: #fcd6c3;
|
|
77
|
+
$goa-color-extended-light-green: #cce2d9;
|
|
78
|
+
$goa-color-extended-light-blue: #ddefff;
|
|
79
|
+
$goa-color-extended-light-aqua: #dcfbf8;
|
|
59
80
|
$goa-color-greyscale-white: #ffffff;
|
|
60
81
|
$goa-color-greyscale-black: #333333;
|
|
82
|
+
$goa-color-greyscale-900: #474747;
|
|
83
|
+
$goa-color-greyscale-800: #5c5c5c;
|
|
61
84
|
$goa-color-greyscale-700: #666666;
|
|
62
85
|
$goa-color-greyscale-600: #858585;
|
|
63
86
|
$goa-color-greyscale-500: #949494;
|
|
64
87
|
$goa-color-greyscale-400: #adadad;
|
|
88
|
+
$goa-color-greyscale-300: #c2c2c2;
|
|
65
89
|
$goa-color-greyscale-200: #dcdcdc;
|
|
90
|
+
$goa-color-greyscale-150: #e7e7e7;
|
|
66
91
|
$goa-color-greyscale-100: #f1f1f1;
|
|
67
92
|
$goa-color-greyscale-50: #f8f8f8;
|
|
93
|
+
$goa-color-critical-default: #171d23;
|
|
68
94
|
$goa-color-success-background: #eef9f3;
|
|
69
95
|
$goa-color-success-dark: #00563a;
|
|
70
96
|
$goa-color-success-light: #cce4dc;
|
|
@@ -81,15 +107,60 @@ $goa-color-info-background: #eff8ff;
|
|
|
81
107
|
$goa-color-info-dark: #003b70;
|
|
82
108
|
$goa-color-info-light: #aac9e7;
|
|
83
109
|
$goa-color-info-default: #004a8f;
|
|
84
|
-
$goa-color-
|
|
110
|
+
$goa-color-brand-light: #c8eefa;
|
|
111
|
+
$goa-color-brand-dark: #005072;
|
|
112
|
+
$goa-color-brand-default: #0081a2;
|
|
113
|
+
$goa-color-interactive-visited: #756693;
|
|
114
|
+
$goa-color-interactive-focus-black: #000000;
|
|
85
115
|
$goa-color-interactive-focus: #feba35;
|
|
116
|
+
$goa-color-interactive-error-disabled: #f58185;
|
|
117
|
+
$goa-color-interactive-error-hover: #ba0000;
|
|
86
118
|
$goa-color-interactive-error: #ec040b;
|
|
119
|
+
$goa-color-interactive-disabled: #80b7e1;
|
|
87
120
|
$goa-color-interactive-hover: #004f84;
|
|
88
121
|
$goa-color-interactive-default: #0070c4;
|
|
89
|
-
$goa-color-
|
|
90
|
-
$goa-
|
|
91
|
-
$goa-
|
|
122
|
+
$goa-side-menu-parent-color-bg-hover: #CEDFEE;
|
|
123
|
+
$goa-side-menu-child-border-width: 4px;
|
|
124
|
+
$goa-drawer-transition-time: 200ms;
|
|
125
|
+
$goa-drawer-right-shadow: -4px 0px 12px 0px rgba(0,0,0,0.2);
|
|
126
|
+
$goa-drawer-left-shadow: 4px 0px 12px 0px rgba(0,0,0,0.2);
|
|
127
|
+
$goa-drawer-bottom-shadow: 0px -4px 12px 0px rgba(0,0,0,0.2);
|
|
128
|
+
$goa-drawer-overlay-color: rgba(0,0,0,0.3);
|
|
129
|
+
$goa-callout-emergency-border-color: none;
|
|
130
|
+
$goa-callout-success-border-color: none;
|
|
131
|
+
$goa-callout-warning-border-color: none;
|
|
132
|
+
$goa-callout-info-border-color: none;
|
|
133
|
+
$goa-callout-l-border-width: 0px;
|
|
134
|
+
$goa-callout-m-border-width: 0px;
|
|
135
|
+
$goa-button-height-compact: 32px;
|
|
136
|
+
$goa-button-height: 42px;
|
|
137
|
+
$goa-accordion-shadow: 0px 0px 0px 0px #000000;
|
|
138
|
+
$goa-typography-number-l: $goa-font-weight-medium $goa-font-size-7/$goa-line-height-4 $goa-font-family-number;
|
|
139
|
+
$goa-typography-number-m: $goa-font-weight-medium $goa-font-size-4/$goa-line-height-3 $goa-font-family-number;
|
|
140
|
+
$goa-typography-number-s: $goa-font-weight-medium $goa-font-size-3/$goa-line-height-2 $goa-font-family-number;
|
|
141
|
+
$goa-typography-button-default: $goa-font-weight-regular $goa-font-size-4/$goa-line-height-1 $goa-font-family-sans;
|
|
142
|
+
$goa-typography-body-l: $goa-font-weight-regular $goa-font-size-7/$goa-line-height-4 $goa-font-family-sans;
|
|
143
|
+
$goa-typography-body-m: $goa-font-weight-regular $goa-font-size-4/$goa-line-height-3 $goa-font-family-sans;
|
|
144
|
+
$goa-typography-body-s: $goa-font-weight-regular $goa-font-size-3/$goa-line-height-2 $goa-font-family-sans;
|
|
145
|
+
$goa-typography-body-xs: $goa-font-weight-regular $goa-font-size-2/$goa-line-height-1 $goa-font-family-sans;
|
|
146
|
+
$goa-typography-heading-xl: $goa-font-weight-bold $goa-font-size-10/$goa-line-height-7 $goa-font-family-sans;
|
|
147
|
+
$goa-typography-heading-l: $goa-font-weight-regular $goa-font-size-9/$goa-line-height-6 $goa-font-family-sans;
|
|
148
|
+
$goa-typography-heading-m: $goa-font-weight-regular $goa-font-size-7/$goa-line-height-4 $goa-font-family-sans;
|
|
149
|
+
$goa-typography-heading-s: $goa-font-weight-bold $goa-font-size-4/$goa-line-height-3 $goa-font-family-sans;
|
|
150
|
+
$goa-typography-heading-xs: $goa-font-weight-bold $goa-font-size-3/$goa-line-height-2 $goa-font-family-sans;
|
|
151
|
+
$goa-color-text-disabled: $goa-color-greyscale-700;
|
|
152
|
+
$goa-color-text-light: $goa-color-greyscale-white;
|
|
153
|
+
$goa-color-text-secondary: $goa-color-greyscale-700;
|
|
154
|
+
$goa-color-text-default: $goa-color-greyscale-black;
|
|
92
155
|
$goa-table-color-border-heading: $goa-color-greyscale-600;
|
|
156
|
+
$goa-side-menu-child-color-bg-selected: $goa-color-info-background;
|
|
157
|
+
$goa-side-menu-child-color-bg-hover: $goa-color-info-background;
|
|
158
|
+
$goa-side-menu-group-border-radius: $goa-border-radius-none;
|
|
159
|
+
$goa-side-menu-parent-padding: $goa-space-none;
|
|
160
|
+
$goa-side-menu-sub-group-padding: $goa-space-none $goa-space-none $goa-space-none $goa-space-none;
|
|
161
|
+
$goa-side-menu-group-padding: $goa-space-m $goa-space-none $goa-space-l $goa-space-none;
|
|
162
|
+
$goa-side-menu-group-color-bg: $goa-color-greyscale-white;
|
|
163
|
+
$goa-drawer-padding: $goa-space-m;
|
|
93
164
|
$goa-container-padding: $goa-space-l;
|
|
94
165
|
$goa-container-border: $goa-border-width-s solid $goa-color-greyscale-200;
|
|
95
166
|
$goa-container-border-radius: $goa-border-radius-m;
|
|
@@ -103,51 +174,41 @@ $goa-callout-success-color-bg-content: $goa-color-greyscale-100;
|
|
|
103
174
|
$goa-callout-warning-icon-color: $goa-color-greyscale-black;
|
|
104
175
|
$goa-callout-warning-color-bg-statusbar: $goa-color-warning-default;
|
|
105
176
|
$goa-callout-warning-color-bg-content: $goa-color-greyscale-100;
|
|
106
|
-
$goa-callout-info-color-bg-statusbar: $goa-color-info-default;
|
|
107
177
|
$goa-callout-info-icon-color: $goa-color-greyscale-white;
|
|
178
|
+
$goa-callout-info-color-bg-statusbar: $goa-color-info-default;
|
|
108
179
|
$goa-callout-info-color-bg-content: $goa-color-greyscale-100;
|
|
109
180
|
$goa-callout-m-statusbar-padding: $goa-space-s $goa-space-2xs;
|
|
110
181
|
$goa-callout-m-content-gap: $goa-space-2xs;
|
|
111
182
|
$goa-callout-m-content-padding: $goa-space-s;
|
|
112
|
-
$goa-callout-m-
|
|
183
|
+
$goa-callout-m-icon-size: $goa-icon-size-s;
|
|
113
184
|
$goa-callout-l-statusbar-padding: $goa-space-l $goa-space-s;
|
|
114
185
|
$goa-callout-l-content-gap: $goa-space-m;
|
|
115
186
|
$goa-callout-l-content-padding: $goa-space-l;
|
|
116
|
-
$goa-callout-l-
|
|
187
|
+
$goa-callout-l-icon-size: $goa-icon-size-m;
|
|
117
188
|
$goa-callout-border-radius: $goa-border-radius-none;
|
|
189
|
+
$goa-button-padding-lr-compact: $goa-space-xs;
|
|
190
|
+
$goa-button-padding-lr: $goa-space-s;
|
|
191
|
+
$goa-button-border-radius: $goa-border-radius-m;
|
|
118
192
|
$goa-accordion-color-bg-heading-hover: $goa-color-greyscale-200;
|
|
119
193
|
$goa-accordion-padding-content-narrow: $goa-space-l;
|
|
120
194
|
$goa-accordion-padding-content-wide: $goa-space-l $goa-space-l $goa-space-xl 56px;
|
|
121
|
-
$goa-accordion-padding-heading: $goa-space-s $goa-space-m
|
|
195
|
+
$goa-accordion-padding-heading: $goa-space-s $goa-space-m;
|
|
122
196
|
$goa-accordion-border-radius: $goa-border-radius-m;
|
|
197
|
+
$goa-accordion-divider: $goa-border-width-s solid $goa-color-greyscale-200;
|
|
123
198
|
$goa-accordion-border: $goa-border-width-s solid $goa-color-greyscale-200;
|
|
124
199
|
$goa-accordion-color-bg-content: $goa-color-greyscale-white;
|
|
125
200
|
$goa-accordion-color-bg-heading: $goa-color-greyscale-100;
|
|
126
|
-
$goa-button-padding-lr-compact: $goa-space-xs;
|
|
127
|
-
$goa-button-padding-lr: $goa-space-s;
|
|
128
|
-
$goa-button-border-radius: $goa-border-radius-m;
|
|
129
|
-
$goa-typography-number-m: $goa-font-weight-medium $goa-font-size-4/$goa-line-height-3 $goa-font-family-number;
|
|
130
|
-
$goa-typography-button-default: $goa-font-weight-regular $goa-font-size-4/$goa-line-height-1 $goa-font-family-sans;
|
|
131
|
-
$goa-typography-body-l: $goa-font-weight-regular $goa-font-size-7/$goa-line-height-4 $goa-font-family-sans;
|
|
132
|
-
$goa-typography-body-m: $goa-font-weight-regular $goa-font-size-4/$goa-line-height-3 $goa-font-family-sans;
|
|
133
|
-
$goa-typography-body-s: $goa-font-weight-regular $goa-font-size-3/$goa-line-height-2 $goa-font-family-sans;
|
|
134
|
-
$goa-typography-body-xs: $goa-font-weight-regular $goa-font-size-2/$goa-line-height-1 $goa-font-family-sans;
|
|
135
|
-
$goa-typography-heading-xl: $goa-font-weight-bold $goa-font-size-10/$goa-line-height-7 $goa-font-family-sans;
|
|
136
|
-
$goa-typography-heading-l: $goa-font-weight-regular $goa-font-size-9/$goa-line-height-6 $goa-font-family-sans;
|
|
137
|
-
$goa-typography-heading-m: $goa-font-weight-regular $goa-font-size-7/$goa-line-height-4 $goa-font-family-sans;
|
|
138
|
-
$goa-typography-heading-s: $goa-font-weight-bold $goa-font-size-4/$goa-line-height-3 $goa-font-family-sans;
|
|
139
|
-
$goa-typography-heading-xs: $goa-font-weight-bold $goa-font-size-3/$goa-line-height-2 $goa-font-family-sans;
|
|
140
|
-
$goa-color-text-disabled: $goa-color-greyscale-700;
|
|
141
|
-
$goa-color-text-light: $goa-color-greyscale-white;
|
|
142
|
-
$goa-color-text-secondary: $goa-color-greyscale-700;
|
|
143
|
-
$goa-color-text-default: $goa-color-greyscale-black;
|
|
144
201
|
$goa-table-color-heading: $goa-color-text-secondary;
|
|
202
|
+
$goa-side-menu-parent-text-active: $goa-typography-body-m;
|
|
203
|
+
$goa-side-menu-parent-text: $goa-typography-body-m;
|
|
204
|
+
$goa-side-menu-child-color-text-selected: $goa-color-text-default;
|
|
145
205
|
$goa-callout-m-text-size: $goa-typography-body-s;
|
|
206
|
+
$goa-callout-l-heading-size: $goa-typography-heading-m;
|
|
146
207
|
$goa-callout-m-heading-size: $goa-typography-heading-xs;
|
|
147
208
|
$goa-callout-l-text-size: $goa-typography-body-m;
|
|
148
|
-
$goa-callout-l-heading
|
|
149
|
-
$goa-
|
|
209
|
+
$goa-callout-l-heading: $goa-typography-heading-m;
|
|
210
|
+
$goa-button-text: $goa-typography-button-default;
|
|
150
211
|
$goa-accordion-heading-m: $goa-typography-heading-m;
|
|
151
212
|
$goa-accordion-heading-s: $goa-typography-heading-s;
|
|
152
|
-
$goa-accordion-color-heading: $goa-color-text-default;
|
|
153
|
-
$goa-
|
|
213
|
+
$goa-accordion-color-heading-hover: $goa-color-text-default;
|
|
214
|
+
$goa-accordion-color-heading: $goa-color-text-default;
|
package/lib/design-tokens.js
CHANGED
|
@@ -31,6 +31,20 @@ function generate(outputPath) {
|
|
|
31
31
|
},
|
|
32
32
|
});
|
|
33
33
|
|
|
34
|
+
// Border
|
|
35
|
+
StyleDictionary.registerTransform({
|
|
36
|
+
name: "border",
|
|
37
|
+
type: "value",
|
|
38
|
+
transitive: true,
|
|
39
|
+
matcher: function(token) {
|
|
40
|
+
return token.type === "border";
|
|
41
|
+
},
|
|
42
|
+
transformer: function(token) {
|
|
43
|
+
const { color, width, style } = token.original.value;
|
|
44
|
+
return `${width} ${style} ${color}`;
|
|
45
|
+
},
|
|
46
|
+
});
|
|
47
|
+
|
|
34
48
|
try {
|
|
35
49
|
StyleDictionary.extend({
|
|
36
50
|
source: [`./data/**/*.json`],
|
|
@@ -41,6 +55,7 @@ function generate(outputPath) {
|
|
|
41
55
|
...StyleDictionary.transformGroup.scss,
|
|
42
56
|
"typography/shorthand",
|
|
43
57
|
"box-shadow",
|
|
58
|
+
"border",
|
|
44
59
|
],
|
|
45
60
|
buildPath: `${outputPath}/dist/`,
|
|
46
61
|
files: [
|
|
@@ -59,6 +74,7 @@ function generate(outputPath) {
|
|
|
59
74
|
...StyleDictionary.transformGroup.css,
|
|
60
75
|
"typography/shorthand",
|
|
61
76
|
"box-shadow",
|
|
77
|
+
"border",
|
|
62
78
|
],
|
|
63
79
|
buildPath: `${outputPath}/dist/`,
|
|
64
80
|
files: [
|