@cfx-dev/ui-components 4.3.18 → 4.5.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/assets/css/Select.css +1 -1
- package/dist/assets/css/TextShowcase.css +1 -1
- package/dist/assets/general/global.css +1 -1
- package/dist/assets/general/themes.css +1 -1
- package/dist/components/Text/Text.d.ts +2 -2
- package/dist/components/Text/Text.js +69 -72
- package/dist/components/Text/Text.types.d.ts +4 -1
- package/dist/components/Text/index.d.ts +1 -1
- package/dist/components/Text/index.js +8 -7
- package/dist/main.d.ts +2 -2
- package/dist/main.js +154 -153
- package/dist/styles-scss/_colors.scss +31 -20
- package/dist/styles-scss/_ui.scss +30 -30
- package/dist/styles-scss/tokens.scss +61 -11
- package/dist/utils/ui/index.d.ts +1 -1
- package/dist/utils/ui/ui.types.d.ts +1 -0
- package/package.json +1 -1
|
@@ -40,18 +40,58 @@
|
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
+
// font size is responsive, and one size in different media queries can have different values
|
|
43
44
|
@mixin text-tokens() {
|
|
44
|
-
@include ui.define-font-size('
|
|
45
|
-
@include ui.define-font-size('
|
|
46
|
-
@include ui.define-font-size('
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
@include ui.define-font-size('
|
|
50
|
-
@include ui.define-font-size('
|
|
51
|
-
@include ui.define-font-size('
|
|
52
|
-
@include ui.define-font-size('
|
|
53
|
-
@include ui.define-font-size('
|
|
54
|
-
|
|
45
|
+
@include ui.define-font-size('xxxsmall', ui.q(1.5), 1.5);
|
|
46
|
+
@include ui.define-font-size('xxsmall', ui.q(1.5), 1.5);
|
|
47
|
+
@include ui.define-font-size('xsmall', ui.q(1.75), 1.5);
|
|
48
|
+
@include ui.define-font-size('small', ui.q(2), 1.5);
|
|
49
|
+
@include ui.define-font-size('normal', ui.q(2), 1.5);
|
|
50
|
+
@include ui.define-font-size('medium', ui.q(2.5), 1.2);
|
|
51
|
+
@include ui.define-font-size('large', ui.q(3), 1.2);
|
|
52
|
+
@include ui.define-font-size('xlarge', ui.q(4), 1.2);
|
|
53
|
+
@include ui.define-font-size('xxlarge', ui.q(5), 1.2);
|
|
54
|
+
@include ui.define-font-size('xxxlarge', ui.q(7), 1.2);
|
|
55
|
+
|
|
56
|
+
@include ui.media-min('medium') {
|
|
57
|
+
@include ui.define-font-size('xxxsmall', ui.q(1.5), 1.5);
|
|
58
|
+
@include ui.define-font-size('xxsmall', ui.q(1.5), 1.5);
|
|
59
|
+
@include ui.define-font-size('xsmall', ui.q(1.75), 1.5);
|
|
60
|
+
@include ui.define-font-size('small', ui.q(2), 1.5);
|
|
61
|
+
@include ui.define-font-size('normal', ui.q(2), 1.5);
|
|
62
|
+
@include ui.define-font-size('medium', ui.q(2.5), 1.3);
|
|
63
|
+
@include ui.define-font-size('large', ui.q(3), 1.3);
|
|
64
|
+
@include ui.define-font-size('xlarge', ui.q(4), 1.3);
|
|
65
|
+
@include ui.define-font-size('xxlarge', ui.q(5), 1.3);
|
|
66
|
+
@include ui.define-font-size('xxxlarge', ui.q(7), 1.2);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
@include ui.media-min('large') {
|
|
70
|
+
@include ui.define-font-size('xxxsmall', ui.q(1.5), 1.5);
|
|
71
|
+
@include ui.define-font-size('xxsmall', ui.q(1.75), 1.5);
|
|
72
|
+
@include ui.define-font-size('xsmall', ui.q(2), 1.5);
|
|
73
|
+
@include ui.define-font-size('small', ui.q(2.25), 1.5);
|
|
74
|
+
@include ui.define-font-size('normal', ui.q(2.25), 1.5);
|
|
75
|
+
@include ui.define-font-size('medium', ui.q(2.5), 1.3);
|
|
76
|
+
@include ui.define-font-size('large', ui.q(3.75), 1.3);
|
|
77
|
+
@include ui.define-font-size('xlarge', ui.q(5), 1.3);
|
|
78
|
+
@include ui.define-font-size('xxlarge', ui.q(6.25), 1.3);
|
|
79
|
+
@include ui.define-font-size('xxxlarge', ui.q(7.5), 1.2);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
@include ui.media-min('xlg') {
|
|
83
|
+
@include ui.define-font-size('xxxsmall', ui.q(1.5), 1.5);
|
|
84
|
+
@include ui.define-font-size('xxsmall', ui.q(1.75), 1.5);
|
|
85
|
+
@include ui.define-font-size('xsmall', ui.q(2), 1.5);
|
|
86
|
+
@include ui.define-font-size('small', ui.q(2.25), 1.5);
|
|
87
|
+
@include ui.define-font-size('normal', ui.q(2.25), 1.5);
|
|
88
|
+
@include ui.define-font-size('medium', ui.q(2.5), 1.3);
|
|
89
|
+
@include ui.define-font-size('large', ui.q(3.75), 1.3);
|
|
90
|
+
@include ui.define-font-size('xlarge', ui.q(5), 1.3);
|
|
91
|
+
@include ui.define-font-size('xxlarge', ui.q(6.25), 1.3);
|
|
92
|
+
@include ui.define-font-size('xxxlarge', ui.q(7.5), 1.2);
|
|
93
|
+
}
|
|
94
|
+
|
|
55
95
|
@include ui.def('font-weight-thin', 100);
|
|
56
96
|
@include ui.def('font-weight-small', 300);
|
|
57
97
|
@include ui.def('font-weight-normal', 400);
|
|
@@ -205,6 +245,8 @@
|
|
|
205
245
|
@include ui.define-color-token('button-hover-background', ui.color('primary', $alpha: 0.1));
|
|
206
246
|
@include ui.define-color-token('button-active-border', ui.color('primary', $alpha: 0.15));
|
|
207
247
|
@include ui.define-color-token('button-active-background', transparent);
|
|
248
|
+
|
|
249
|
+
// primary
|
|
208
250
|
@include ui.define-color-token('button-primary-text', ui.color('primary'));
|
|
209
251
|
@include ui.define-color-token('button-primary-border', ui.color('accent'));
|
|
210
252
|
@include ui.define-color-token('button-primary-background', ui.color('accent', $alpha: 0.4));
|
|
@@ -217,6 +259,8 @@
|
|
|
217
259
|
@include ui.define-color-token('button-primary-disabled-text', ui.color('accent', $alpha: 0.4));
|
|
218
260
|
@include ui.define-color-token('button-primary-disabled-border', ui.color('accent', $alpha: 0.4));
|
|
219
261
|
@include ui.define-color-token('button-primary-disabled-background', transparent);
|
|
262
|
+
|
|
263
|
+
// secondary
|
|
220
264
|
@include ui.define-color-token('button-secondary-text', ui.color('primary'));
|
|
221
265
|
@include ui.define-color-token('button-secondary-border', ui.color('primary'));
|
|
222
266
|
@include ui.define-color-token('button-secondary-background', ui.color('primary', 'pure', 0));
|
|
@@ -229,6 +273,8 @@
|
|
|
229
273
|
@include ui.define-color-token('button-secondary-disabled-text', ui.color('primary', $alpha: 0.4));
|
|
230
274
|
@include ui.define-color-token('button-secondary-disabled-border', ui.color('primary', $alpha: 0.4));
|
|
231
275
|
@include ui.define-color-token('button-secondary-disabled-background', transparent);
|
|
276
|
+
|
|
277
|
+
// onlight
|
|
232
278
|
@include ui.define-color-token('button-onlight-text', ui.color('primary'));
|
|
233
279
|
@include ui.define-color-token('button-onlight-border', ui.color('bg-dark'));
|
|
234
280
|
@include ui.define-color-token('button-onlight-background', ui.color('bg-dark'));
|
|
@@ -241,6 +287,8 @@
|
|
|
241
287
|
@include ui.define-color-token('button-onlight-disabled-text', ui.color('bg-dark', $alpha: 0.4));
|
|
242
288
|
@include ui.define-color-token('button-onlight-disabled-border', ui.color('bg-dark', $alpha: 0.4));
|
|
243
289
|
@include ui.define-color-token('button-onlight-disabled-background', transparent);
|
|
290
|
+
|
|
291
|
+
// linked
|
|
244
292
|
@include ui.define-color-token('button-linked-text', ui.color('tertiary'));
|
|
245
293
|
@include ui.define-color-token('button-linked-border', transparent);
|
|
246
294
|
@include ui.define-color-token('button-linked-background', transparent);
|
|
@@ -253,6 +301,8 @@
|
|
|
253
301
|
@include ui.define-color-token('button-linked-disabled-text', ui.color('primary', $alpha: 0.4));
|
|
254
302
|
@include ui.define-color-token('button-linked-disabled-border', transparent);
|
|
255
303
|
@include ui.define-color-token('button-linked-disabled-background', transparent);
|
|
304
|
+
|
|
305
|
+
// quicklink
|
|
256
306
|
@include ui.define-color-token('button-quicklink-text', ui.color('primary'));
|
|
257
307
|
@include ui.define-color-token('button-quicklink-border', transparent);
|
|
258
308
|
@include ui.define-color-token('button-quicklink-background', ui.color('bg-light'));
|
package/dist/utils/ui/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export { ui } from './ui';
|
|
2
2
|
export { OffsetEnum, MediaQueryEnum, BorderRadiusEnum, ZIndexEnum, ColorEnum, TextSizeEnum, } from './ui.types';
|
|
3
|
-
export type { OffsetType, MediaQueryType, ResponsiveOffsetType, ResponsiveValueType, MPProps, BorderRadiusType, ZIndexType, ColorType, TextSize, } from './ui.types';
|
|
3
|
+
export type { OffsetType, MediaQueryType, ResponsiveOffsetType, ResponsiveValueType, MPProps, BorderRadiusType, ZIndexType, ColorType, TextSize, OpacityRange, } from './ui.types';
|