@bi-digital/tokens 0.4.2 → 0.6.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/dist/tokens.css +46 -6
- package/dist/tokens.d.ts +64 -4
- package/dist/tokens.js +1060 -75
- package/dist/tokens.scss +46 -6
- package/package.json +5 -3
package/dist/tokens.css
CHANGED
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
--bi-primary-95: #002341;
|
|
41
41
|
--bi-primary-100: #001932;
|
|
42
42
|
--bi-secondary-0: #fffbeb;
|
|
43
|
-
--bi-secondary-5: #
|
|
43
|
+
--bi-secondary-5: #fff7d5;
|
|
44
44
|
--bi-secondary-10: #fff2bf;
|
|
45
45
|
--bi-secondary-15: #ffea95;
|
|
46
46
|
--bi-secondary-20: #ffe680;
|
|
@@ -142,6 +142,7 @@
|
|
|
142
142
|
--bi-scale-12x: 3rem;
|
|
143
143
|
--bi-scale-14x: 3.5rem;
|
|
144
144
|
--bi-scale-16x: 4rem;
|
|
145
|
+
--bi-scale-18x: 4.5rem;
|
|
145
146
|
--bi-scale-20x: 5rem;
|
|
146
147
|
--bi-scale-24x: 6rem;
|
|
147
148
|
--bi-scale-32x: 8rem;
|
|
@@ -157,8 +158,14 @@
|
|
|
157
158
|
--bi-opacity-light-100: rgba(255, 255, 255, 0);
|
|
158
159
|
--bi-opacity-light-80: rgba(255, 255, 255, 0.2);
|
|
159
160
|
--bi-opacity-light-50: rgba(255, 255, 255, 0.5);
|
|
160
|
-
--bi-stroke-
|
|
161
|
+
--bi-stroke-medium: 0.09375rem;
|
|
161
162
|
--bi-elevation-25: rgba(38, 51, 63, 0.15);
|
|
163
|
+
--bi-font-family-plain: 'museo-sans', Arial, sans-serif;
|
|
164
|
+
--bi-font-family-brand: 'museo-slab', serif;
|
|
165
|
+
--bi-font-weight-bold: 700;
|
|
166
|
+
--bi-font-weight-regular: 500;
|
|
167
|
+
--bi-font-color-secondary-dark-background-2: rgba(255, 255, 255, 0.7);
|
|
168
|
+
--bi-font-color-disabled-dark-background: rgba(255, 255, 255, 0.7);
|
|
162
169
|
--bi-states-hover-dark: rgba(38, 51, 63, 0.1);
|
|
163
170
|
--bi-states-hover-light: rgba(255, 255, 255, 0.1);
|
|
164
171
|
--bi-states-press-dark: rgba(38, 51, 63, 0.15);
|
|
@@ -166,9 +173,6 @@
|
|
|
166
173
|
--bi-stroke-none: var(--bi-scale-0);
|
|
167
174
|
--bi-stroke-thin: var(--bi-scale-0-25x);
|
|
168
175
|
--bi-stroke-thick: var(--bi-scale-0-50x);
|
|
169
|
-
--bi-stroke-color-1: var(--bi-neutral-15);
|
|
170
|
-
--bi-stroke-color-2: var(--bi-neutral-25);
|
|
171
|
-
--bi-stroke-color-3: var(--bi-neutral-50);
|
|
172
176
|
--bi-radius-none: var(--bi-scale-0);
|
|
173
177
|
--bi-radius-small: var(--bi-scale-0-50x);
|
|
174
178
|
--bi-radius-medium: var(--bi-scale-1x);
|
|
@@ -181,9 +185,45 @@
|
|
|
181
185
|
--bi-icon-large: var(--bi-scale-8x);
|
|
182
186
|
--bi-icon-xl: var(--bi-scale-10x);
|
|
183
187
|
--bi-icon-2xl: var(--bi-scale-11x);
|
|
184
|
-
--bi-icon-primary: var(--bi-neutral-
|
|
188
|
+
--bi-icon-primary: var(--bi-neutral-95);
|
|
185
189
|
--bi-icon-secondary: var(--bi-neutral-60);
|
|
186
190
|
--bi-icon-disabled: var(--bi-neutral-50);
|
|
187
191
|
--bi-icon-link: var(--bi-primary-50);
|
|
192
|
+
--bi-font-color-primary: var(--bi-neutral-95);
|
|
193
|
+
--bi-font-color-secondary: var(--bi-neutral-60);
|
|
194
|
+
--bi-font-color-disabled: var(--bi-neutral-50);
|
|
195
|
+
--bi-font-color-accent: var(--bi-primary-60);
|
|
196
|
+
--bi-font-color-link: var(--bi-primary-50);
|
|
197
|
+
--bi-font-color-primary-dark-background: var(--bi-basic-white);
|
|
198
|
+
--bi-font-color-accent-dark-background: var(--bi-primary-20);
|
|
188
199
|
--bi-layout-navbar-height: var(--bi-scale-16x);
|
|
200
|
+
--bi-font-display-large: var(--bi-font-weight-regular) 4rem/4.5rem var(--bi-font-family-brand);
|
|
201
|
+
--bi-font-display-medium: var(--bi-font-weight-regular) 3rem/3.5rem var(--bi-font-family-brand);
|
|
202
|
+
--bi-font-headline-large: var(--bi-font-weight-regular) 2.5rem/2.875rem var(--bi-font-family-brand);
|
|
203
|
+
--bi-font-headline-medium: var(--bi-font-weight-regular) 2.25rem/2.5rem var(--bi-font-family-plain);
|
|
204
|
+
--bi-font-headline-small: var(--bi-font-weight-regular) 1.75rem/2rem var(--bi-font-family-brand);
|
|
205
|
+
--bi-font-title-bold-xxl: var(--bi-font-weight-bold) 2rem/2.25rem var(--bi-font-family-plain);
|
|
206
|
+
--bi-font-title-bold-xl: var(--bi-font-weight-bold) 1.75rem/2rem var(--bi-font-family-plain);
|
|
207
|
+
--bi-font-title-bold-large: var(--bi-font-weight-bold) 1.5rem/1.6875rem var(--bi-font-family-plain);
|
|
208
|
+
--bi-font-title-bold-medium: var(--bi-font-weight-bold) 1.25rem/1.4375rem var(--bi-font-family-plain);
|
|
209
|
+
--bi-font-title-bold-small: var(--bi-font-weight-bold) 1.125rem/1.25rem var(--bi-font-family-plain);
|
|
210
|
+
--bi-font-title-bold-xs: var(--bi-font-weight-bold) 1rem/1.125rem var(--bi-font-family-plain);
|
|
211
|
+
--bi-font-title-bold-xxs: var(--bi-font-weight-bold) 0.875rem/1rem var(--bi-font-family-plain);
|
|
212
|
+
--bi-font-title-regular-xxl: var(--bi-font-weight-regular) 2rem/2.25rem var(--bi-font-family-plain);
|
|
213
|
+
--bi-font-title-regular-xl: var(--bi-font-weight-regular) 1.75rem/2rem var(--bi-font-family-plain);
|
|
214
|
+
--bi-font-title-regular-large: var(--bi-font-weight-regular) 1.5rem/1.6875rem var(--bi-font-family-plain);
|
|
215
|
+
--bi-font-title-regular-medium: var(--bi-font-weight-regular) 1.25rem/1.4375rem var(--bi-font-family-plain);
|
|
216
|
+
--bi-font-title-regular-small: var(--bi-font-weight-regular) 1.125rem/1.25rem var(--bi-font-family-plain);
|
|
217
|
+
--bi-font-title-regular-xs: var(--bi-font-weight-regular) 1rem/1.125rem var(--bi-font-family-plain);
|
|
218
|
+
--bi-font-title-regular-xxs: var(--bi-font-weight-regular) 0.875rem/1rem var(--bi-font-family-plain);
|
|
219
|
+
--bi-font-body-xl: var(--bi-font-weight-regular) 1.125rem/1.6875rem var(--bi-font-family-plain);
|
|
220
|
+
--bi-font-body-large: var(--bi-font-weight-regular) 1rem/1.5rem var(--bi-font-family-plain);
|
|
221
|
+
--bi-font-body-medium: var(--bi-font-weight-regular) 0.875rem/1.3125rem var(--bi-font-family-plain);
|
|
222
|
+
--bi-font-body-small: var(--bi-font-weight-regular) 0.8125rem/1.25rem var(--bi-font-family-plain);
|
|
223
|
+
--bi-font-body-xs: var(--bi-font-weight-regular) 0.75rem/1.125rem var(--bi-font-family-plain);
|
|
224
|
+
--bi-font-label-xl: var(--bi-font-weight-bold) 1.125rem/1.6875rem var(--bi-font-family-plain);
|
|
225
|
+
--bi-font-label-large: var(--bi-font-weight-bold) 1rem/1.5rem var(--bi-font-family-plain);
|
|
226
|
+
--bi-font-label-medium: var(--bi-font-weight-bold) 0.875rem/1.25rem var(--bi-font-family-plain);
|
|
227
|
+
--bi-font-label-small: var(--bi-font-weight-bold) 0.8125rem/1.25rem var(--bi-font-family-plain);
|
|
228
|
+
--bi-font-label-xs: var(--bi-font-weight-bold) 0.75rem/1.125rem var(--bi-font-family-plain);
|
|
189
229
|
}
|
package/dist/tokens.d.ts
CHANGED
|
@@ -171,6 +171,7 @@ declare const tokens: {
|
|
|
171
171
|
"12x": DesignToken;
|
|
172
172
|
"14x": DesignToken;
|
|
173
173
|
"16x": DesignToken;
|
|
174
|
+
"18x": DesignToken;
|
|
174
175
|
"20x": DesignToken;
|
|
175
176
|
"24x": DesignToken;
|
|
176
177
|
"32x": DesignToken;
|
|
@@ -192,11 +193,8 @@ declare const tokens: {
|
|
|
192
193
|
stroke: {
|
|
193
194
|
none: DesignToken;
|
|
194
195
|
thin: DesignToken;
|
|
195
|
-
|
|
196
|
+
medium: DesignToken;
|
|
196
197
|
thick: DesignToken;
|
|
197
|
-
"color-1": DesignToken;
|
|
198
|
-
"color-2": DesignToken;
|
|
199
|
-
"color-3": DesignToken;
|
|
200
198
|
};
|
|
201
199
|
radius: {
|
|
202
200
|
none: DesignToken;
|
|
@@ -221,6 +219,27 @@ declare const tokens: {
|
|
|
221
219
|
elevation: {
|
|
222
220
|
"25": DesignToken;
|
|
223
221
|
};
|
|
222
|
+
font: {
|
|
223
|
+
family: {
|
|
224
|
+
Plain: DesignToken;
|
|
225
|
+
Brand: DesignToken;
|
|
226
|
+
};
|
|
227
|
+
weight: {
|
|
228
|
+
Bold: DesignToken;
|
|
229
|
+
Regular: DesignToken;
|
|
230
|
+
};
|
|
231
|
+
color: {
|
|
232
|
+
Primary: DesignToken;
|
|
233
|
+
Secondary: DesignToken;
|
|
234
|
+
Disabled: DesignToken;
|
|
235
|
+
Accent: DesignToken;
|
|
236
|
+
Link: DesignToken;
|
|
237
|
+
Primary_dark_background: DesignToken;
|
|
238
|
+
Secondary_dark_background_2: DesignToken;
|
|
239
|
+
Disabled_dark_background: DesignToken;
|
|
240
|
+
Accent_dark_background: DesignToken;
|
|
241
|
+
};
|
|
242
|
+
};
|
|
224
243
|
states: {
|
|
225
244
|
"hover-dark": DesignToken;
|
|
226
245
|
"hover-light": DesignToken;
|
|
@@ -230,4 +249,45 @@ declare const tokens: {
|
|
|
230
249
|
layout: {
|
|
231
250
|
"navbar-height": DesignToken;
|
|
232
251
|
};
|
|
252
|
+
Display: {
|
|
253
|
+
Large: DesignToken;
|
|
254
|
+
Medium: DesignToken;
|
|
255
|
+
};
|
|
256
|
+
Headline: {
|
|
257
|
+
Large: DesignToken;
|
|
258
|
+
Medium: DesignToken;
|
|
259
|
+
Small: DesignToken;
|
|
260
|
+
};
|
|
261
|
+
"Title Bold": {
|
|
262
|
+
XXL: DesignToken;
|
|
263
|
+
XL: DesignToken;
|
|
264
|
+
Large: DesignToken;
|
|
265
|
+
Medium: DesignToken;
|
|
266
|
+
Small: DesignToken;
|
|
267
|
+
XS: DesignToken;
|
|
268
|
+
XXS: DesignToken;
|
|
269
|
+
};
|
|
270
|
+
"Title Regular": {
|
|
271
|
+
XXL: DesignToken;
|
|
272
|
+
XL: DesignToken;
|
|
273
|
+
Large: DesignToken;
|
|
274
|
+
Medium: DesignToken;
|
|
275
|
+
Small: DesignToken;
|
|
276
|
+
XS: DesignToken;
|
|
277
|
+
XXS: DesignToken;
|
|
278
|
+
};
|
|
279
|
+
Body: {
|
|
280
|
+
XL: DesignToken;
|
|
281
|
+
Large: DesignToken;
|
|
282
|
+
Medium: DesignToken;
|
|
283
|
+
Small: DesignToken;
|
|
284
|
+
XS: DesignToken;
|
|
285
|
+
};
|
|
286
|
+
Label: {
|
|
287
|
+
XL: DesignToken;
|
|
288
|
+
Large: DesignToken;
|
|
289
|
+
Medium: DesignToken;
|
|
290
|
+
Small: DesignToken;
|
|
291
|
+
XS: DesignToken;
|
|
292
|
+
};
|
|
233
293
|
};
|