@itcase/ui 1.4.7 → 1.4.9
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/{DropdownItem-mr__S8vt.js → DropdownItem-B3E-_Cwp.js} +5 -5
- package/dist/{DropdownItem-NllzSt5M.js → DropdownItem-Qg-_2YWD.js} +5 -5
- package/dist/cjs/components/Accordion.js +6 -7
- package/dist/cjs/components/Avatar.js +2 -2
- package/dist/cjs/components/Chips.js +6 -6
- package/dist/cjs/components/Choice.js +10 -8
- package/dist/cjs/components/Dot.js +2 -2
- package/dist/cjs/components/Dropdown.js +1 -1
- package/dist/cjs/components/Pagination.js +1 -1
- package/dist/components/Accordion.js +6 -7
- package/dist/components/Avatar.js +2 -2
- package/dist/components/Chips.js +6 -6
- package/dist/components/Choice.js +11 -9
- package/dist/components/Dot.js +2 -2
- package/dist/components/Dropdown.js +1 -1
- package/dist/components/Pagination.js +1 -1
- package/dist/css/components/Avatar/Avatar.css +3 -2
- package/dist/css/mixins/mixin_fill-gradient.css +30 -6
- package/dist/css/mixins/mixin_typography.css +105 -71
- package/dist/css/mixins/mixin_utils.css +3 -4
- package/dist/css/styles/fill/fill_active_hover.css +17 -13
- package/dist/stories/{Typography.mdx → TypographyAM.mdx} +4 -4
- package/dist/stories/TypographyBaikal.mdx +82 -0
- package/dist/types/components/Dropdown/Dropdown.interface.d.ts +2 -1
- package/dist/types/types/componentProps/align.d.ts +0 -1
- package/package.json +8 -8
- package/dist/types/components/Grid/stories/args.d.ts +0 -90
- package/dist/types/components/Group/stories/args.d.ts +0 -78
- package/dist/types/components/Tab/stories/args.d.ts +0 -171
|
@@ -1,141 +1,171 @@
|
|
|
1
1
|
@define-mixin h1 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
|
|
2
|
-
@mixin font $weight, var(--typography-h1-min, 32px),
|
|
3
|
-
|
|
2
|
+
@mixin font $weight, var(--typography-h1-min, 32px),
|
|
3
|
+
var(--typography-h1-max, 38px), $minLetterSpacing,
|
|
4
|
+
var(--typography-h1-min-line-height, 64px),
|
|
4
5
|
var(--typography-h1-max-line-height, 80px), $maxLetterSpacing,
|
|
5
|
-
var(--typography-h1-font
|
|
6
|
+
var(--typography-h1-font);
|
|
6
7
|
}
|
|
7
8
|
|
|
8
9
|
@define-mixin h2 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
|
|
9
|
-
@mixin font $weight, var(--typography-h2-min, 26px),
|
|
10
|
-
|
|
10
|
+
@mixin font $weight, var(--typography-h2-min, 26px),
|
|
11
|
+
var(--typography-h2-max, 32px), $minLetterSpacing,
|
|
12
|
+
var(--typography-h2-min-line-height, 46px),
|
|
11
13
|
var(--typography-h2-max-line-height, 58px), $maxLetterSpacing,
|
|
12
|
-
var(--typography-h2-font
|
|
14
|
+
var(--typography-h2-font);
|
|
13
15
|
}
|
|
14
16
|
|
|
15
17
|
@define-mixin h3 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
|
|
16
|
-
@mixin font $weight, var(--typography-h3-min, 18px),
|
|
17
|
-
|
|
18
|
+
@mixin font $weight, var(--typography-h3-min, 18px),
|
|
19
|
+
var(--typography-h3-max, 24px), $minLetterSpacing,
|
|
20
|
+
var(--typography-h3-min-line-height, 32px),
|
|
18
21
|
var(--typography-h3-max-line-height, 40px), $maxLetterSpacing,
|
|
19
|
-
var(--typography-h3-font
|
|
22
|
+
var(--typography-h3-font);
|
|
20
23
|
}
|
|
21
24
|
|
|
22
25
|
@define-mixin h4 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
|
|
23
|
-
@mixin font $weight, var(--typography-h4-min, 16px),
|
|
24
|
-
|
|
26
|
+
@mixin font $weight, var(--typography-h4-min, 16px),
|
|
27
|
+
var(--typography-h4-max, 18px), $minLetterSpacing,
|
|
28
|
+
var(--typography-h4-min-line-height, 24px),
|
|
25
29
|
var(--typography-h4-max-line-height, 30px), $maxLetterSpacing,
|
|
26
|
-
var(--typography-h4-font
|
|
30
|
+
var(--typography-h4-font);
|
|
27
31
|
}
|
|
28
32
|
|
|
29
33
|
@define-mixin h5 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
|
|
30
|
-
@mixin font $weight, var(--typography-h5-min, 14px),
|
|
31
|
-
|
|
34
|
+
@mixin font $weight, var(--typography-h5-min, 14px),
|
|
35
|
+
var(--typography-h5-max, 16px), $minLetterSpacing,
|
|
36
|
+
var(--typography-h5-min-line-height, 18px),
|
|
32
37
|
var(--typography-h5-max-line-height, 26px), $maxLetterSpacing,
|
|
33
|
-
var(--typography-h5-font
|
|
38
|
+
var(--typography-h5-font);
|
|
34
39
|
}
|
|
35
40
|
|
|
36
41
|
@define-mixin h6 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
|
|
37
|
-
@mixin font $weight, var(--typography-h6-min, 12px),
|
|
38
|
-
|
|
42
|
+
@mixin font $weight, var(--typography-h6-min, 12px),
|
|
43
|
+
var(--typography-h6-max, 18px), $minLetterSpacing,
|
|
44
|
+
var(--typography-h6-min-line-height, 16px),
|
|
39
45
|
var(--typography-h6-max-line-height, 24px), $maxLetterSpacing,
|
|
40
|
-
var(--typography-h6-font
|
|
46
|
+
var(--typography-h6-font);
|
|
41
47
|
}
|
|
42
48
|
|
|
43
|
-
@define-mixin hero_h1 $weight: normal, $minLetterSpacing: 0,
|
|
44
|
-
|
|
45
|
-
|
|
49
|
+
@define-mixin hero_h1 $weight: normal, $minLetterSpacing: 0,
|
|
50
|
+
$maxLetterSpacing: 0 {
|
|
51
|
+
@mixin font $weight, var(--typography-hero1-min, 32px),
|
|
52
|
+
var(--typography-hero1-max, 38px), $minLetterSpacing,
|
|
53
|
+
var(--typography-hero1-min-line-height, 64px),
|
|
46
54
|
var(--typography-hero1-max-line-height, 80px), $maxLetterSpacing,
|
|
47
|
-
var(--typography-hero1-font
|
|
55
|
+
var(--typography-hero1-font);
|
|
48
56
|
}
|
|
49
57
|
|
|
50
|
-
@define-mixin hero_h2 $weight: normal, $minLetterSpacing: 0,
|
|
51
|
-
|
|
52
|
-
|
|
58
|
+
@define-mixin hero_h2 $weight: normal, $minLetterSpacing: 0,
|
|
59
|
+
$maxLetterSpacing: 0 {
|
|
60
|
+
@mixin font $weight, var(--typography-hero2-min, 26px),
|
|
61
|
+
var(--typography-hero2-max, 32px), $minLetterSpacing,
|
|
62
|
+
var(--typography-hero2-min-line-height, 46px),
|
|
53
63
|
var(--typography-hero2-max-line-height, 58px), $maxLetterSpacing,
|
|
54
|
-
var(--typography-hero2-font
|
|
64
|
+
var(--typography-hero2-font);
|
|
55
65
|
}
|
|
56
66
|
|
|
57
|
-
@define-mixin hero_h3 $weight: normal, $minLetterSpacing: 0,
|
|
58
|
-
|
|
59
|
-
|
|
67
|
+
@define-mixin hero_h3 $weight: normal, $minLetterSpacing: 0,
|
|
68
|
+
$maxLetterSpacing: 0 {
|
|
69
|
+
@mixin font $weight, var(--typography-hero3-min, 18px),
|
|
70
|
+
var(--typography-hero3-max, 24px), $minLetterSpacing,
|
|
71
|
+
var(--typography-hero3-min-line-height, 32px),
|
|
60
72
|
var(--typography-hero3-max-line-height, 40px), $maxLetterSpacing,
|
|
61
|
-
var(--typography-hero3-font
|
|
73
|
+
var(--typography-hero3-font);
|
|
62
74
|
}
|
|
63
75
|
|
|
64
|
-
@define-mixin hero_h4 $weight: normal, $minLetterSpacing: 0,
|
|
65
|
-
|
|
66
|
-
|
|
76
|
+
@define-mixin hero_h4 $weight: normal, $minLetterSpacing: 0,
|
|
77
|
+
$maxLetterSpacing: 0 {
|
|
78
|
+
@mixin font $weight, var(--typography-hero4-min, 16px),
|
|
79
|
+
var(--typography-hero4-max, 18px), $minLetterSpacing,
|
|
80
|
+
var(--typography-hero4-min-line-height, 24px),
|
|
67
81
|
var(--typography-hero4-max-line-height, 30px), $maxLetterSpacing,
|
|
68
|
-
var(--typography-hero4-font
|
|
82
|
+
var(--typography-hero4-font);
|
|
69
83
|
}
|
|
70
84
|
|
|
71
|
-
@define-mixin hero_h5 $weight: normal, $minLetterSpacing: 0,
|
|
72
|
-
|
|
73
|
-
|
|
85
|
+
@define-mixin hero_h5 $weight: normal, $minLetterSpacing: 0,
|
|
86
|
+
$maxLetterSpacing: 0 {
|
|
87
|
+
@mixin font $weight, var(--typography-hero5-min, 14px),
|
|
88
|
+
var(--typography-hero5-max, 16px), $minLetterSpacing,
|
|
89
|
+
var(--typography-hero5-min-line-height, 18px),
|
|
74
90
|
var(--typography-hero5-max-line-height, 26px), $maxLetterSpacing,
|
|
75
|
-
var(--typography-hero5-font
|
|
91
|
+
var(--typography-hero5-font);
|
|
76
92
|
}
|
|
77
93
|
|
|
78
|
-
@define-mixin hero_h6 $weight: normal, $minLetterSpacing: 0,
|
|
79
|
-
|
|
80
|
-
|
|
94
|
+
@define-mixin hero_h6 $weight: normal, $minLetterSpacing: 0,
|
|
95
|
+
$maxLetterSpacing: 0 {
|
|
96
|
+
@mixin font $weight, var(--typography-hero6-min, 12px),
|
|
97
|
+
var(--typography-hero6-max, 18px), $minLetterSpacing,
|
|
98
|
+
var(--typography-hero6-min-line-height, 16px),
|
|
81
99
|
var(--typography-hero6-max-line-height, 24px), $maxLetterSpacing,
|
|
82
|
-
var(--typography-hero6-font
|
|
100
|
+
var(--typography-hero6-font);
|
|
83
101
|
}
|
|
84
102
|
|
|
85
103
|
@define-mixin p $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
|
|
86
|
-
@mixin font $weight, var(--typography-p-min, 16px),
|
|
87
|
-
|
|
104
|
+
@mixin font $weight, var(--typography-p-min, 16px),
|
|
105
|
+
var(--typography-p-max, 24px), $minLetterSpacing,
|
|
106
|
+
var(--typography-p-min-line-height, 24px),
|
|
88
107
|
var(--typography-p-max-line-height, 36px), $maxLetterSpacing,
|
|
89
|
-
var(--typography-p-font
|
|
108
|
+
var(--typography-p-font);
|
|
90
109
|
}
|
|
91
110
|
|
|
92
|
-
@define-mixin text-xxl $weight: normal, $minLetterSpacing: 0,
|
|
93
|
-
|
|
94
|
-
|
|
111
|
+
@define-mixin text-xxl $weight: normal, $minLetterSpacing: 0,
|
|
112
|
+
$maxLetterSpacing: 0 {
|
|
113
|
+
@mixin font $weight, var(--typography-text-xxl-min, 24px),
|
|
114
|
+
var(--typography-text-xxl-max, 28px), $minLetterSpacing,
|
|
115
|
+
var(--typography-text-xxl-min-line-height, 24px),
|
|
95
116
|
var(--typography-text-xxl-max-line-height, 28px), $maxLetterSpacing,
|
|
96
|
-
var(--typography-text-xxl-font
|
|
117
|
+
var(--typography-text-xxl-font);
|
|
97
118
|
}
|
|
98
119
|
|
|
99
|
-
@define-mixin text-xl $weight: normal, $minLetterSpacing: 0,
|
|
100
|
-
|
|
101
|
-
|
|
120
|
+
@define-mixin text-xl $weight: normal, $minLetterSpacing: 0,
|
|
121
|
+
$maxLetterSpacing: 0 {
|
|
122
|
+
@mixin font $weight, var(--typography-text-xl-min, 20px),
|
|
123
|
+
var(--typography-text-xl-max, 24px), $minLetterSpacing,
|
|
124
|
+
var(--typography-text-xl-min-line-height, 20px),
|
|
102
125
|
var(--typography-text-xl-max-line-height, 24px), $maxLetterSpacing,
|
|
103
|
-
var(--typography-text-xl-font
|
|
126
|
+
var(--typography-text-xl-font);
|
|
104
127
|
}
|
|
105
128
|
|
|
106
129
|
@define-mixin text-l $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
|
|
107
|
-
@mixin font $weight, var(--typography-text-l-min, 18px),
|
|
108
|
-
|
|
130
|
+
@mixin font $weight, var(--typography-text-l-min, 18px),
|
|
131
|
+
var(--typography-text-l-max, 24px), $minLetterSpacing,
|
|
132
|
+
var(--typography-text-l-min-line-height, 18px),
|
|
109
133
|
var(--typography-text-l-max-line-height, 24px), $maxLetterSpacing,
|
|
110
|
-
var(--typography-text-l-font
|
|
134
|
+
var(--typography-text-l-font);
|
|
111
135
|
}
|
|
112
136
|
|
|
113
137
|
@define-mixin text-m $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
|
|
114
|
-
@mixin font $weight, var(--typography-text-m-min, 16px),
|
|
115
|
-
|
|
138
|
+
@mixin font $weight, var(--typography-text-m-min, 16px),
|
|
139
|
+
var(--typography-text-m-max, 18px), $minLetterSpacing,
|
|
140
|
+
var(--typography-text-m-min-line-height, 16px),
|
|
116
141
|
var(--typography-text-m-max-line-height, 20px), $maxLetterSpacing,
|
|
117
|
-
var(--typography-text-m-font
|
|
142
|
+
var(--typography-text-m-font);
|
|
118
143
|
}
|
|
119
144
|
|
|
120
145
|
@define-mixin text-s $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
|
|
121
|
-
@mixin font $weight, var(--typography-text-s-min, 14px),
|
|
122
|
-
|
|
146
|
+
@mixin font $weight, var(--typography-text-s-min, 14px),
|
|
147
|
+
var(--typography-text-s-max, 18px), $minLetterSpacing,
|
|
148
|
+
var(--typography-text-s-min-line-height, 14px),
|
|
123
149
|
var(--typography-text-s-max-line-height, 18px), $maxLetterSpacing,
|
|
124
|
-
var(--typography-text-s-font
|
|
150
|
+
var(--typography-text-s-font);
|
|
125
151
|
}
|
|
126
152
|
|
|
127
|
-
@define-mixin text-xs $weight: normal, $minLetterSpacing: 0,
|
|
128
|
-
|
|
129
|
-
|
|
153
|
+
@define-mixin text-xs $weight: normal, $minLetterSpacing: 0,
|
|
154
|
+
$maxLetterSpacing: 0 {
|
|
155
|
+
@mixin font $weight, var(--typography-text-xs-min, 12px),
|
|
156
|
+
var(--typography-text-xs-max, 16px), $minLetterSpacing,
|
|
157
|
+
var(--typography-text-xs-min-line-height, 12px),
|
|
130
158
|
var(--typography-text-xs-max-line-height, 16px), $maxLetterSpacing,
|
|
131
|
-
var(--typography-text-xs-font
|
|
159
|
+
var(--typography-text-xs-font);
|
|
132
160
|
}
|
|
133
161
|
|
|
134
|
-
@define-mixin text-xxs $weight: normal, $minLetterSpacing: 0,
|
|
135
|
-
|
|
136
|
-
|
|
162
|
+
@define-mixin text-xxs $weight: normal, $minLetterSpacing: 0,
|
|
163
|
+
$maxLetterSpacing: 0 {
|
|
164
|
+
@mixin font $weight, var(--typography-text-xxs-min, 10px),
|
|
165
|
+
var(--typography-text-xxs-max, 14px), $minLetterSpacing,
|
|
166
|
+
var(--typography-text-xxs-min-line-height, 10px),
|
|
137
167
|
var(--typography-text-xxs-max-line-height, 14px), $maxLetterSpacing,
|
|
138
|
-
var(--typography-text-xxs-font
|
|
168
|
+
var(--typography-text-xxs-font);
|
|
139
169
|
}
|
|
140
170
|
|
|
141
171
|
@define-mixin email-h1 $weight: normal {
|
|
@@ -210,7 +240,11 @@
|
|
|
210
240
|
|
|
211
241
|
@define-mixin text-gradient-primary {
|
|
212
242
|
color: transparent;
|
|
213
|
-
background: linear-gradient(
|
|
243
|
+
background: linear-gradient(
|
|
244
|
+
90deg,
|
|
245
|
+
hsl(266, 100%, 64%, 1) 0%,
|
|
246
|
+
hsl(213, 79%, 68%, 1) 50%
|
|
247
|
+
);
|
|
214
248
|
background-clip: text;
|
|
215
249
|
text-fill-color: transparent;
|
|
216
250
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
/* stylelint-disable declaration-property-value-keyword-no-deprecated */
|
|
2
|
+
@define-mixin font $fontWeight, $minFontSize, $maxFontSize, $minLetterSpacing,
|
|
3
|
+
$minLineHeight, $maxLineHeight, $maxLetterSpacing, $fontFamily {
|
|
3
4
|
font-size: fluid(
|
|
4
5
|
$minFontSize,
|
|
5
6
|
$maxFontSize,
|
|
@@ -21,14 +22,12 @@
|
|
|
21
22
|
);
|
|
22
23
|
font-family: $fontFamily;
|
|
23
24
|
}
|
|
24
|
-
|
|
25
25
|
@define-mixin font-fixed $weight, $size, $line, $family {
|
|
26
26
|
font-size: $size;
|
|
27
27
|
font-weight: $weight;
|
|
28
28
|
font-family: $family;
|
|
29
29
|
line-height: $line;
|
|
30
30
|
}
|
|
31
|
-
|
|
32
31
|
@define-mixin word-wrap {
|
|
33
32
|
overflow-wrap: break-word;
|
|
34
33
|
word-wrap: break-word;
|
|
@@ -2,28 +2,32 @@
|
|
|
2
2
|
&_active {
|
|
3
3
|
&_hover {
|
|
4
4
|
@each $type in accent, primary, secondary, tertiary, quaternary, quinary,
|
|
5
|
-
senary, surface, error, success, warning, info, danger,
|
|
6
|
-
gradient {
|
|
5
|
+
senary, surface, error, success, warning, info, danger, gradient {
|
|
7
6
|
&_$(type) {
|
|
8
|
-
@each $color in primary, secondary, tertiary, quaternary
|
|
9
|
-
senary, accent, disabled, hover, active {
|
|
7
|
+
@each $color in primary, secondary, tertiary, quaternary {
|
|
10
8
|
&-$(color) {
|
|
11
9
|
&:hover {
|
|
12
10
|
background: var(--color-$(type)-$(color));
|
|
13
11
|
}
|
|
12
|
+
&-hover {
|
|
13
|
+
&:hover {
|
|
14
|
+
background: var(--color-$(type)-$(color)-hover);
|
|
15
|
+
}
|
|
16
|
+
&-active {
|
|
17
|
+
&:hover {
|
|
18
|
+
background: var(--color-$(type)-$(color)-active-hover);
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
&-active {
|
|
23
|
+
&:hover {
|
|
24
|
+
background: var(--color-$(type)-$(color)-active);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
14
27
|
}
|
|
15
28
|
}
|
|
16
29
|
}
|
|
17
30
|
}
|
|
18
|
-
@each $type in accent, primary, secondary, tertiary, quaternary, quinary,
|
|
19
|
-
senary, surface, error, success, warning, info, danger, disabled,
|
|
20
|
-
gradient {
|
|
21
|
-
&_$(type) {
|
|
22
|
-
&-primary {
|
|
23
|
-
background: var(--color-$(type)-primary);
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
31
|
}
|
|
28
32
|
}
|
|
29
33
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { Meta, Typeset } from '@storybook/blocks'
|
|
2
2
|
|
|
3
|
-
<Meta title="Tokens / Typography" />
|
|
3
|
+
<Meta title="Tokens / Typography / AM" />
|
|
4
4
|
|
|
5
5
|
export const typography = {
|
|
6
6
|
type: {
|
|
7
|
-
primary: '
|
|
7
|
+
primary: 'Wix Madefor Display, sans-serif',
|
|
8
8
|
},
|
|
9
9
|
weight: {
|
|
10
10
|
regular: '400',
|
|
@@ -27,7 +27,7 @@ export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing el
|
|
|
27
27
|
# Typography
|
|
28
28
|
|
|
29
29
|
|
|
30
|
-
**Font:**
|
|
30
|
+
**Font:** Wix Madefor Display
|
|
31
31
|
|
|
32
32
|
**Title:** H1- H6
|
|
33
33
|
|
|
@@ -47,7 +47,7 @@ export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing el
|
|
|
47
47
|
|
|
48
48
|
export const textography = {
|
|
49
49
|
type: {
|
|
50
|
-
primary: '
|
|
50
|
+
primary: 'Wix Madefor Display, sans-serif',
|
|
51
51
|
},
|
|
52
52
|
weight: {
|
|
53
53
|
regular: '400',
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import { Meta, Typeset } from '@storybook/blocks'
|
|
2
|
+
|
|
3
|
+
<Meta title="Tokens / Typography / Baikal" />
|
|
4
|
+
|
|
5
|
+
export const typography = {
|
|
6
|
+
type: {
|
|
7
|
+
primary: 'PF-Din-Display-Pro, sans-serif',
|
|
8
|
+
},
|
|
9
|
+
weight: {
|
|
10
|
+
regular: '400',
|
|
11
|
+
bold: '700',
|
|
12
|
+
extrabold: '800',
|
|
13
|
+
black: '900',
|
|
14
|
+
},
|
|
15
|
+
size: {
|
|
16
|
+
h1: 64,
|
|
17
|
+
h2: 46,
|
|
18
|
+
h3: 32,
|
|
19
|
+
h4: 24,
|
|
20
|
+
h5: 18,
|
|
21
|
+
h6: 16,
|
|
22
|
+
},
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
|
|
26
|
+
|
|
27
|
+
# Typography
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
**Font:** PF-Din-Display-Pro
|
|
31
|
+
|
|
32
|
+
**Title:** H1- H6
|
|
33
|
+
|
|
34
|
+
<Typeset
|
|
35
|
+
fontSizes={[
|
|
36
|
+
Number(typography.size.h1),
|
|
37
|
+
Number(typography.size.h2),
|
|
38
|
+
Number(typography.size.h3),
|
|
39
|
+
Number(typography.size.h4),
|
|
40
|
+
Number(typography.size.h5),
|
|
41
|
+
Number(typography.size.h6),
|
|
42
|
+
]}
|
|
43
|
+
fontWeight={typography.weight.regular}
|
|
44
|
+
sampleText={SampleText}
|
|
45
|
+
fontFamily={typography.type.primary}
|
|
46
|
+
/>
|
|
47
|
+
|
|
48
|
+
export const textography = {
|
|
49
|
+
type: {
|
|
50
|
+
primary: 'PF-Din-Display-Pro, sans-serif',
|
|
51
|
+
},
|
|
52
|
+
weight: {
|
|
53
|
+
regular: '400',
|
|
54
|
+
semibold: '600',
|
|
55
|
+
},
|
|
56
|
+
size: {
|
|
57
|
+
xxl: 24,
|
|
58
|
+
xl: 22,
|
|
59
|
+
l: 20,
|
|
60
|
+
m: 16,
|
|
61
|
+
s: 14,
|
|
62
|
+
xs: 12,
|
|
63
|
+
xxs: 10,
|
|
64
|
+
},
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
**Text:** xxl- xxs
|
|
68
|
+
|
|
69
|
+
<Typeset
|
|
70
|
+
fontSizes={[
|
|
71
|
+
Number(textography.size.xxl),
|
|
72
|
+
Number(textography.size.xl),
|
|
73
|
+
Number(textography.size.l),
|
|
74
|
+
Number(textography.size.m),
|
|
75
|
+
Number(textography.size.s),
|
|
76
|
+
Number(textography.size.xs),
|
|
77
|
+
Number(textography.size.xxs),
|
|
78
|
+
]}
|
|
79
|
+
fontWeight={textography.weight.regular}
|
|
80
|
+
sampleText={SampleText}
|
|
81
|
+
fontFamily={textography.type.primary}
|
|
82
|
+
/>
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { CSSProperties, MouseEventHandler, ReactNode } from 'react';
|
|
2
|
-
import { tAlignDirectionProps, tAlignmentProps,
|
|
2
|
+
import { tAlignDirectionProps, tAlignmentProps, tDirectionProps, tFillHoverProps, tFillProps, tJustifyContentProps, tShapeProps, tSizeProps, tTextAlignProps, tTextColorActiveProps, tTextColorHoverProps, tTextColorProps, tTextGradientProps, tTextSizeProps, tTextStyleProps, tTextWeightProps, tTextWrapProps, tTypeProps, tUnderlineProps } from 'types';
|
|
3
3
|
import { tAppearanceKeysDefault } from 'types/componentProps/appearanceKeys';
|
|
4
|
+
import { tAlignProps, tElevationProps, tWidthProps } from '@itcase/types';
|
|
4
5
|
import { iStyleAttributes } from '../../hooks/useStyles/styleAttributes.interface';
|
|
5
6
|
export interface iDropdownProps extends iStyleAttributes {
|
|
6
7
|
[key: number | string | symbol]: any;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itcase/ui",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.9",
|
|
4
4
|
"description": "UI components (Modal, Loader, Popup, etc)",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Modal",
|
|
@@ -97,19 +97,19 @@
|
|
|
97
97
|
"dependencies": {
|
|
98
98
|
"@emotion/is-prop-valid": "^1.3.1",
|
|
99
99
|
"@itcase/common": "^1.2.22",
|
|
100
|
-
"@itcase/config": "^1.0.
|
|
100
|
+
"@itcase/config": "^1.0.35",
|
|
101
101
|
"@itcase/icons": "^1.0.29",
|
|
102
|
-
"@itcase/storybook-config": "^1.1.
|
|
103
|
-
"@itcase/tokens-am": "^1.0
|
|
104
|
-
"@itcase/tokens-baikal": "^1.0
|
|
102
|
+
"@itcase/storybook-config": "^1.1.9",
|
|
103
|
+
"@itcase/tokens-am": "^1.1.0",
|
|
104
|
+
"@itcase/tokens-baikal": "^1.1.0",
|
|
105
105
|
"clsx": "^2.1.1",
|
|
106
106
|
"date-fns": "^4.1.0",
|
|
107
107
|
"eslint-import-resolver-alias": "^1.1.2",
|
|
108
108
|
"eslint-plugin-import": "^2.31.0",
|
|
109
|
-
"framer-motion": "^12.7.
|
|
109
|
+
"framer-motion": "^12.7.4",
|
|
110
110
|
"js-cookie": "^3.0.5",
|
|
111
111
|
"lodash": "^4.17.21",
|
|
112
|
-
"motion": "^12.7.
|
|
112
|
+
"motion": "^12.7.4",
|
|
113
113
|
"rc-slider": "^11.1.8",
|
|
114
114
|
"react": "^18.3.1",
|
|
115
115
|
"react-dadata": "^2.27.4",
|
|
@@ -134,7 +134,7 @@
|
|
|
134
134
|
"@babel/preset-react": "^7.26.3",
|
|
135
135
|
"@commitlint/cli": "^19.8.0",
|
|
136
136
|
"@commitlint/config-conventional": "^19.8.0",
|
|
137
|
-
"@itcase/lint": "^1.1.
|
|
137
|
+
"@itcase/lint": "^1.1.7",
|
|
138
138
|
"@rollup/plugin-alias": "^5.1.1",
|
|
139
139
|
"@rollup/plugin-babel": "^6.0.4",
|
|
140
140
|
"@rollup/plugin-commonjs": "^28.0.3",
|
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
export declare const parameters: {
|
|
2
|
-
controls: {
|
|
3
|
-
exclude: string[];
|
|
4
|
-
};
|
|
5
|
-
};
|
|
6
|
-
export declare const argTypes: {
|
|
7
|
-
id: {
|
|
8
|
-
if: {
|
|
9
|
-
arg: string;
|
|
10
|
-
};
|
|
11
|
-
};
|
|
12
|
-
justifyContent: {
|
|
13
|
-
control: string;
|
|
14
|
-
options: (string | null)[];
|
|
15
|
-
};
|
|
16
|
-
alignItems: {
|
|
17
|
-
control: string;
|
|
18
|
-
options: readonly ["auto", "normal", "stretch", "center", "start", "end", "space-around", "space-between", "space-evenly", "safe center", "unsafe center", "self-start", "self-end", "first", "baseline", "first baseline", "last baseline"];
|
|
19
|
-
};
|
|
20
|
-
borderColor: {
|
|
21
|
-
control: string;
|
|
22
|
-
options: readonly ["accentBorderPrimary", "accentBorderSecondary", "accentBorderTertiary", "accentBorderQuaternary", "accentBorderDisabled", "primaryBorderPrimary", "primaryBorderSecondary", "primaryBorderTertiary", "primaryBorderQuaternary", "primaryBorderDisabled", "secondaryBorderPrimary", "secondaryBorderSecondary", "secondaryBorderTertiary", "secondaryBorderQuaternary", "secondaryBorderDisabled", "tertiaryBorderPrimary", "tertiaryBorderSecondary", "tertiaryBorderTertiary", "tertiaryBorderQuaternary", "tertiaryBorderDisabled", "surfaceBorderPrimary", "surfaceBorderSecondary", "surfaceBorderTertiary", "surfaceBorderQuaternary", "surfaceBorderDisabled", "surfaceBorderInverse", "errorBorderPrimary", "errorBorderSecondary", "errorBorderDisabled", "successBorderPrimary", "successBorderSecondary", "successBorderDisabled", "none"];
|
|
23
|
-
};
|
|
24
|
-
advancedProps: {
|
|
25
|
-
control: string;
|
|
26
|
-
};
|
|
27
|
-
after: {
|
|
28
|
-
if: {
|
|
29
|
-
arg: string;
|
|
30
|
-
};
|
|
31
|
-
};
|
|
32
|
-
alignContent: {
|
|
33
|
-
control: string;
|
|
34
|
-
options: readonly ["auto", "normal", "stretch", "center", "start", "end", "space-around", "space-between", "space-evenly", "safe center", "unsafe center", "self-start", "self-end", "first", "baseline", "first baseline", "last baseline"];
|
|
35
|
-
};
|
|
36
|
-
before: {
|
|
37
|
-
if: {
|
|
38
|
-
arg: string;
|
|
39
|
-
};
|
|
40
|
-
};
|
|
41
|
-
className: {
|
|
42
|
-
if: {
|
|
43
|
-
arg: string;
|
|
44
|
-
};
|
|
45
|
-
};
|
|
46
|
-
columns: {
|
|
47
|
-
control: {
|
|
48
|
-
max: number;
|
|
49
|
-
min: number;
|
|
50
|
-
step: number;
|
|
51
|
-
type: string;
|
|
52
|
-
};
|
|
53
|
-
};
|
|
54
|
-
fill: {
|
|
55
|
-
control: string;
|
|
56
|
-
options: readonly ["accentPrimary", "accentSecondary", "accentTertiary", "primaryPrimary", "primarySecondary", "primaryTertiary", "secondaryPrimary", "secondarySecondary", "secondaryTertiary", "tertiaryPrimary", "tertiarySecondary", "tertiaryTertiary", "surfaceAccent", "surfaceItemPrimary", "surfacePrimary", "surfaceQuaternary", "surfaceQuinary", "surfaceSecondary", "surfaceTertiary", "errorPrimary", "errorSecondary", "successPrimary", "successSecondary", "gradientPrimary", "none"];
|
|
57
|
-
};
|
|
58
|
-
justifyItems: {
|
|
59
|
-
control: string;
|
|
60
|
-
options: readonly ["legacy", "normal", "stretch", "center", "safe", "center", "unsafe", "center", "start", "end", "self-start", "self-end", "left", "right", "first", "baseline", "first baseline", "last baseline"];
|
|
61
|
-
};
|
|
62
|
-
rows: {
|
|
63
|
-
control: {
|
|
64
|
-
max: number;
|
|
65
|
-
min: number;
|
|
66
|
-
step: number;
|
|
67
|
-
type: string;
|
|
68
|
-
};
|
|
69
|
-
};
|
|
70
|
-
tag: {
|
|
71
|
-
if: {
|
|
72
|
-
arg: string;
|
|
73
|
-
};
|
|
74
|
-
};
|
|
75
|
-
type: {
|
|
76
|
-
if: {
|
|
77
|
-
arg: string;
|
|
78
|
-
};
|
|
79
|
-
};
|
|
80
|
-
useGridSystem: {
|
|
81
|
-
if: {
|
|
82
|
-
arg: string;
|
|
83
|
-
};
|
|
84
|
-
};
|
|
85
|
-
onClick: {
|
|
86
|
-
if: {
|
|
87
|
-
arg: string;
|
|
88
|
-
};
|
|
89
|
-
};
|
|
90
|
-
};
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
export declare const argTypes: {
|
|
2
|
-
id: {
|
|
3
|
-
if: {
|
|
4
|
-
arg: string;
|
|
5
|
-
};
|
|
6
|
-
};
|
|
7
|
-
borderColor: {
|
|
8
|
-
control: string;
|
|
9
|
-
options: readonly ["accentBorderPrimary", "accentBorderSecondary", "accentBorderTertiary", "accentBorderQuaternary", "accentBorderDisabled", "primaryBorderPrimary", "primaryBorderSecondary", "primaryBorderTertiary", "primaryBorderQuaternary", "primaryBorderDisabled", "secondaryBorderPrimary", "secondaryBorderSecondary", "secondaryBorderTertiary", "secondaryBorderQuaternary", "secondaryBorderDisabled", "tertiaryBorderPrimary", "tertiaryBorderSecondary", "tertiaryBorderTertiary", "tertiaryBorderQuaternary", "tertiaryBorderDisabled", "surfaceBorderPrimary", "surfaceBorderSecondary", "surfaceBorderTertiary", "surfaceBorderQuaternary", "surfaceBorderDisabled", "surfaceBorderInverse", "errorBorderPrimary", "errorBorderSecondary", "errorBorderDisabled", "successBorderPrimary", "successBorderSecondary", "successBorderDisabled", "none"];
|
|
10
|
-
};
|
|
11
|
-
direction: {
|
|
12
|
-
control: string;
|
|
13
|
-
options: readonly ["column", "column-reverse", "horizontal", "horizontal-reverse", "row", "row-reverse", "vertical", "vertical-reverse"];
|
|
14
|
-
};
|
|
15
|
-
advancedProps: {
|
|
16
|
-
control: string;
|
|
17
|
-
};
|
|
18
|
-
className: {
|
|
19
|
-
if: {
|
|
20
|
-
arg: string;
|
|
21
|
-
};
|
|
22
|
-
};
|
|
23
|
-
columns: {
|
|
24
|
-
control: {
|
|
25
|
-
max: number;
|
|
26
|
-
min: number;
|
|
27
|
-
step: number;
|
|
28
|
-
type: string;
|
|
29
|
-
};
|
|
30
|
-
};
|
|
31
|
-
contentAlign: {
|
|
32
|
-
if: {
|
|
33
|
-
arg: string;
|
|
34
|
-
};
|
|
35
|
-
};
|
|
36
|
-
fill: {
|
|
37
|
-
control: string;
|
|
38
|
-
options: readonly ["accentPrimary", "accentSecondary", "accentTertiary", "primaryPrimary", "primarySecondary", "primaryTertiary", "secondaryPrimary", "secondarySecondary", "secondaryTertiary", "tertiaryPrimary", "tertiarySecondary", "tertiaryTertiary", "surfaceAccent", "surfaceItemPrimary", "surfacePrimary", "surfaceQuaternary", "surfaceQuinary", "surfaceSecondary", "surfaceTertiary", "errorPrimary", "errorSecondary", "successPrimary", "successSecondary", "gradientPrimary", "none"];
|
|
39
|
-
};
|
|
40
|
-
htmlFor: {
|
|
41
|
-
if: {
|
|
42
|
-
arg: string;
|
|
43
|
-
};
|
|
44
|
-
};
|
|
45
|
-
set: {
|
|
46
|
-
if: {
|
|
47
|
-
arg: string;
|
|
48
|
-
};
|
|
49
|
-
};
|
|
50
|
-
shape: {
|
|
51
|
-
control: string;
|
|
52
|
-
options: readonly ["rectangle", "geometric", "rounded", "circular"];
|
|
53
|
-
};
|
|
54
|
-
spaceBetweenItems: {
|
|
55
|
-
if: {
|
|
56
|
-
arg: string;
|
|
57
|
-
};
|
|
58
|
-
};
|
|
59
|
-
stacking: {
|
|
60
|
-
if: {
|
|
61
|
-
arg: string;
|
|
62
|
-
};
|
|
63
|
-
};
|
|
64
|
-
tag: {
|
|
65
|
-
if: {
|
|
66
|
-
arg: string;
|
|
67
|
-
};
|
|
68
|
-
};
|
|
69
|
-
wrap: {
|
|
70
|
-
control: string;
|
|
71
|
-
options: readonly ["wrap", "no-wrap", "nowrap", "wrap-reverse"];
|
|
72
|
-
};
|
|
73
|
-
onClick: {
|
|
74
|
-
if: {
|
|
75
|
-
arg: string;
|
|
76
|
-
};
|
|
77
|
-
};
|
|
78
|
-
};
|