@nightshadeui/stylesheets 2.10.0 → 2.11.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.
Files changed (7) hide show
  1. package/features/text-shadow.css +15 -0
  2. package/index.css +2 -1
  3. package/package.json +1 -1
  4. package/variables/base.css +0 -7
  5. package/variables/inputs.css +100 -0
  6. package/variables/ui.css +34 -48
  7. package/variables/input-sizes.css +0 -84
package/features/text-shadow.css ADDED
@@ -0,0 +1,15 @@
1
+ :root {
2
+ --ui-auto-text-shadow-color: transparent;
3
+ }
4
+
5
+ @supports (color: rgb(from white r g b)) {
6
+ :root {
7
+ --ui-auto-text-shadow-color: rgb(
8
+ from currentColor
9
+ calc(255 - r)
10
+ calc(255 - g)
11
+ calc(255 - b)
12
+ / 25%
13
+ );
14
+ }
15
+ }
package/index.css CHANGED
@@ -4,7 +4,8 @@
4
4
  @import './variables/font.css' layer(nightshade);
5
5
  @import './variables/ui.css' layer(nightshade);
6
6
  @import './variables/colors.css' layer(nightshade);
7
- @import './variables/input-sizes.css' layer(nightshade);
7
+ @import './variables/inputs.css' layer(nightshade);
8
+ @import './features/text-shadow.css' layer(nightshade);
8
9
 
9
10
  @import './commons.css' layer(nightshade);
10
11
  @import './util.css' layer(nightshade);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nightshadeui/stylesheets",
3
- "version": "2.10.0",
3
+ "version": "2.11.0",
4
4
  "description": "Nightshade UI CSS",
5
5
  "author": "Boris Okunskiy",
6
6
  "license": "ISC",
package/variables/base.css CHANGED
@@ -18,11 +18,4 @@
18
18
 
19
19
  --border-radius: 4px;
20
20
 
21
- /* Inputs */
22
-
23
- --input-radius: var(--border-radius);
24
- --input-border-size: 1px;
25
- --input-outline-size: 2px;
26
- --input-outline-offset: 0;
27
-
28
21
  }
package/variables/inputs.css ADDED
@@ -0,0 +1,100 @@
1
+ :root {
2
+
3
+ /* Global defaults */
4
+
5
+ --input-border-size: 1px;
6
+ --input-outline-size: 2px;
7
+ --input-outline-offset: 0;
8
+
9
+ /* Default size variables, customized per size */
10
+
11
+ --input-major-height: var(--input-size-m-major-height);
12
+ --input-minor-height: var(--input-size-m-minor-height);
13
+ --input-font-size: var(--input-size-m-font-size);
14
+ --input-major-padding: var(--input-size-m-major-padding);
15
+ --input-minor-padding: var(--input-size-m-minor-padding);
16
+ --input-gap: var(--input-size-m-gap);
17
+
18
+ /* Sizes */
19
+
20
+ --input-size-xs-major-height: var(--sp2-5);
21
+ --input-size-xs-minor-height: var(--sp1-5);
22
+ --input-size-xs-font-size: var(--font-size-xs);
23
+ --input-size-xs-major-padding: var(--sp1);
24
+ --input-size-xs-minor-padding: var(--sp0-25);
25
+ --input-size-xs-gap: var(--sp0-25);
26
+
27
+ --input-size-s-major-height: var(--sp3);
28
+ --input-size-s-minor-height: var(--sp2);
29
+ --input-size-s-font-size: var(--font-size-s);
30
+ --input-size-s-major-padding: var(--sp1);
31
+ --input-size-s-minor-padding: var(--sp0-5);
32
+ --input-size-s-gap: var(--sp0-5);
33
+
34
+ --input-size-m-major-height: var(--sp4);
35
+ --input-size-m-minor-height: var(--sp2-5);
36
+ --input-size-m-font-size: var(--font-size-m);
37
+ --input-size-m-major-padding: var(--sp1-5);
38
+ --input-size-m-minor-padding: var(--sp1);
39
+ --input-size-m-gap: var(--sp1);
40
+
41
+ --input-size-l-major-height: var(--sp5);
42
+ --input-size-l-minor-height: var(--sp3);
43
+ --input-size-l-font-size: var(--font-size-m);
44
+ --input-size-l-major-padding: var(--sp2);
45
+ --input-size-l-minor-padding: var(--sp1);
46
+ --input-size-l-gap: var(--sp1);
47
+
48
+ --input-size-xl-major-height: var(--sp6);
49
+ --input-size-xl-minor-height: var(--sp4);
50
+ --input-size-xl-font-size: var(--font-size-l);
51
+ --input-size-xl-major-padding: var(--sp2-5);
52
+ --input-size-xl-minor-padding: var(--sp1-5);
53
+ --input-size-xl-gap: var(--sp1-5);
54
+
55
+ }
56
+
57
+ .input-size-xs, .input-size-extra-small {
58
+ --input-major-height: var(--input-size-xs-major-height);
59
+ --input-minor-height: var(--input-size-xs-minor-height);
60
+ --input-font-size: var(--input-size-xs-font-size);
61
+ --input-major-padding: var(--input-size-xs-major-padding);
62
+ --input-minor-padding: var(--input-size-xs-minor-padding);
63
+ --input-gap: var(--input-size-xs-gap);
64
+ }
65
+
66
+ .input-size-s, .input-size-small {
67
+ --input-major-height: var(--input-size-s-major-height);
68
+ --input-minor-height: var(--input-size-s-minor-height);
69
+ --input-font-size: var(--input-size-s-font-size);
70
+ --input-major-padding: var(--input-size-s-major-padding);
71
+ --input-minor-padding: var(--input-size-s-minor-padding);
72
+ --input-gap: var(--input-size-s-gap);
73
+ }
74
+
75
+ .input-size-m, .input-size-medium, .input-size-normal {
76
+ --input-major-height: var(--input-size-m-major-height);
77
+ --input-minor-height: var(--input-size-m-minor-height);
78
+ --input-font-size: var(--input-size-m-font-size);
79
+ --input-major-padding: var(--input-size-m-major-padding);
80
+ --input-minor-padding: var(--input-size-m-minor-padding);
81
+ --input-gap: var(--input-size-m-gap);
82
+ }
83
+
84
+ .input-size-l, .input-size-large {
85
+ --input-major-height: var(--input-size-l-major-height);
86
+ --input-minor-height: var(--input-size-l-minor-height);
87
+ --input-font-size: var(--input-size-l-font-size);
88
+ --input-major-padding: var(--input-size-l-major-padding);
89
+ --input-minor-padding: var(--input-size-l-minor-padding);
90
+ --input-gap: var(--input-size-l-gap);
91
+ }
92
+
93
+ .input-size-xl {
94
+ --input-major-height: var(--input-size-xl-major-height);
95
+ --input-minor-height: var(--input-size-xl-minor-height);
96
+ --input-font-size: var(--input-size-xl-font-size);
97
+ --input-major-padding: var(--input-size-xl-major-padding);
98
+ --input-minor-padding: var(--input-size-xl-minor-padding);
99
+ --input-gap: var(--input-size-xl-gap);
100
+ }
package/variables/ui.css CHANGED
@@ -1,15 +1,16 @@
1
1
  :root {
2
+ --ui-text-shadow-color: transparent;
3
+
2
4
  --ui-base-z: 0;
3
5
  --ui-base-text-color: var(--color-base-900);
4
6
  --ui-base-surface-color: var(--color-base-0);
5
7
  --ui-base-surface-top-color: light-dark(var(--color-base-0), var(--color-base-200));
6
8
  --ui-base-surface-bottom-color: light-dark(var(--color-base-200), var(--color-base-0));
7
9
  --ui-base-surface-text-color: var(--color-base-text);
8
- --ui-base-surface-text-shadow-color: var(--color-base-50);
9
10
  --ui-base-border-color: var(--color-base-400);
10
11
  --ui-base-shadow-color: var(--shadow-color-medium);
11
- --ui-base-focus-light-color: light-dark(var(--color-secondary-300), var(--color-secondary-700));
12
- --ui-base-focus-medium-color: light-dark(var(--color-secondary-600), var(--color-secondary-400));
12
+ --ui-base-focus-outline-color: light-dark(var(--color-secondary-300), var(--color-secondary-700));
13
+ --ui-base-focus-border-color: light-dark(var(--color-secondary-600), var(--color-secondary-400));
13
14
 
14
15
  --ui-inverse-z: 1;
15
16
  --ui-inverse-text-color: var(--color-inverse-0);
@@ -17,11 +18,10 @@
17
18
  --ui-inverse-surface-top-color: light-dark(var(--color-inverse-200), var(--color-inverse-0));
18
19
  --ui-inverse-surface-bottom-color: light-dark(var(--color-inverse-0), var(--color-inverse-200));
19
20
  --ui-inverse-surface-text-color: var(--color-inverse-text);
20
- --ui-inverse-surface-text-shadow-color: var(--color-inverse-200);
21
21
  --ui-inverse-border-color: var(--color-inverse-0);
22
22
  --ui-inverse-shadow-color: light-dark(var(--color-inverse-700), var(--color-inverse-500));
23
- --ui-inverse-focus-light-color: light-dark(var(--color-secondary-300), var(--color-secondary-700));
24
- --ui-inverse-focus-medium-color: light-dark(var(--color-secondary-600), var(--color-secondary-400));
23
+ --ui-inverse-focus-outline-color: light-dark(var(--color-secondary-300), var(--color-secondary-700));
24
+ --ui-inverse-focus-border-color: light-dark(var(--color-secondary-600), var(--color-secondary-400));
25
25
 
26
26
  --ui-primary-z: 5;
27
27
  --ui-primary-text-color: light-dark(var(--color-primary-500), var(--color-primary-400));
@@ -29,11 +29,10 @@
29
29
  --ui-primary-surface-top-color: var(--color-primary-400);
30
30
  --ui-primary-surface-bottom-color: var(--color-primary-600);
31
31
  --ui-primary-surface-text-color: var(--color-primary-text);
32
- --ui-primary-surface-text-shadow-color: var(--color-primary-600);
33
32
  --ui-primary-border-color: light-dark(var(--color-primary-600), var(--color-primary-400));
34
33
  --ui-primary-shadow-color: var(--color-primary-800);
35
- --ui-primary-focus-light-color: light-dark(var(--color-primary-300), var(--color-primary-700));
36
- --ui-primary-focus-medium-color: light-dark(var(--color-primary-600), var(--color-primary-400));
34
+ --ui-primary-focus-outline-color: light-dark(var(--color-primary-300), var(--color-primary-700));
35
+ --ui-primary-focus-border-color: light-dark(var(--color-primary-600), var(--color-primary-400));
37
36
 
38
37
  --ui-secondary-z: 4;
39
38
  --ui-secondary-text-color: light-dark(var(--color-secondary-500), var(--color-secondary-400));
@@ -41,11 +40,10 @@
41
40
  --ui-secondary-surface-top-color: var(--color-secondary-400);
42
41
  --ui-secondary-surface-bottom-color: var(--color-secondary-600);
43
42
  --ui-secondary-surface-text-color: var(--color-secondary-text);
44
- --ui-secondary-surface-text-shadow-color: var(--color-secondary-600);
45
43
  --ui-secondary-border-color: light-dark(var(--color-secondary-600), var(--color-secondary-400));
46
44
  --ui-secondary-shadow-color: var(--color-secondary-800);
47
- --ui-secondary-focus-light-color: light-dark(var(--color-secondary-300), var(--color-secondary-700));
48
- --ui-secondary-focus-medium-color: light-dark(var(--color-secondary-600), var(--color-secondary-400));
45
+ --ui-secondary-focus-outline-color: light-dark(var(--color-secondary-300), var(--color-secondary-700));
46
+ --ui-secondary-focus-border-color: light-dark(var(--color-secondary-600), var(--color-secondary-400));
49
47
 
50
48
  --ui-tertiary-z: 3;
51
49
  --ui-tertiary-text-color: light-dark(var(--color-tertiary-500), var(--color-tertiary-400));
@@ -53,11 +51,10 @@
53
51
  --ui-tertiary-surface-top-color: var(--color-tertiary-400);
54
52
  --ui-tertiary-surface-bottom-color: var(--color-tertiary-600);
55
53
  --ui-tertiary-surface-text-color: var(--color-tertiary-text);
56
- --ui-tertiary-surface-text-shadow-color: var(--color-tertiary-600);
57
54
  --ui-tertiary-border-color: light-dark(var(--color-tertiary-600), var(--color-tertiary-400));
58
55
  --ui-tertiary-shadow-color: var(--color-tertiary-800);
59
- --ui-tertiary-focus-light-color: light-dark(var(--color-tertiary-300), var(--color-tertiary-700));
60
- --ui-tertiary-focus-medium-color: light-dark(var(--color-tertiary-600), var(--color-tertiary-400));
56
+ --ui-tertiary-focus-outline-color: light-dark(var(--color-tertiary-300), var(--color-tertiary-700));
57
+ --ui-tertiary-focus-border-color: light-dark(var(--color-tertiary-600), var(--color-tertiary-400));
61
58
 
62
59
  --ui-success-z: 3;
63
60
  --ui-success-text-color: light-dark(var(--color-success-500), var(--color-success-400));
@@ -65,11 +62,10 @@
65
62
  --ui-success-surface-top-color: var(--color-success-400);
66
63
  --ui-success-surface-bottom-color: var(--color-success-600);
67
64
  --ui-success-surface-text-color: var(--color-success-text);
68
- --ui-success-surface-text-shadow-color: var(--color-success-600);
69
65
  --ui-success-border-color: light-dark(var(--color-success-600), var(--color-success-400));
70
66
  --ui-success-shadow-color: var(--color-success-800);
71
- --ui-success-focus-light-color: light-dark(var(--color-success-300), var(--color-success-700));
72
- --ui-success-focus-medium-color: light-dark(var(--color-success-600), var(--color-success-400));
67
+ --ui-success-focus-outline-color: light-dark(var(--color-success-300), var(--color-success-700));
68
+ --ui-success-focus-border-color: light-dark(var(--color-success-600), var(--color-success-400));
73
69
 
74
70
  --ui-warning-z: 3;
75
71
  --ui-warning-text-color: light-dark(var(--color-warning-500), var(--color-warning-400));
@@ -77,11 +73,10 @@
77
73
  --ui-warning-surface-top-color: var(--color-warning-400);
78
74
  --ui-warning-surface-bottom-color: var(--color-warning-600);
79
75
  --ui-warning-surface-text-color: var(--color-warning-text);
80
- --ui-warning-surface-text-shadow-color: var(--color-warning-600);
81
76
  --ui-warning-border-color: light-dark(var(--color-warning-600), var(--color-warning-400));
82
77
  --ui-warning-shadow-color: var(--color-warning-800);
83
- --ui-warning-focus-light-color: light-dark(var(--color-warning-300), var(--color-warning-700));
84
- --ui-warning-focus-medium-color: light-dark(var(--color-warning-600), var(--color-warning-400));
78
+ --ui-warning-focus-outline-color: light-dark(var(--color-warning-300), var(--color-warning-700));
79
+ --ui-warning-focus-border-color: light-dark(var(--color-warning-600), var(--color-warning-400));
85
80
 
86
81
  --ui-danger-z: 3;
87
82
  --ui-danger-text-color: light-dark(var(--color-danger-500), var(--color-danger-400));
@@ -89,11 +84,10 @@
89
84
  --ui-danger-surface-top-color: var(--color-danger-400);
90
85
  --ui-danger-surface-bottom-color: var(--color-danger-600);
91
86
  --ui-danger-surface-text-color: var(--color-danger-text);
92
- --ui-danger-surface-text-shadow-color: var(--color-danger-600);
93
87
  --ui-danger-border-color: light-dark(var(--color-danger-600), var(--color-danger-400));;
94
88
  --ui-danger-shadow-color: var(--color-danger-800);
95
- --ui-danger-focus-light-color: light-dark(var(--color-danger-300), var(--color-danger-700));
96
- --ui-danger-focus-medium-color: light-dark(var(--color-danger-600), var(--color-danger-400));
89
+ --ui-danger-focus-outline-color: light-dark(var(--color-danger-300), var(--color-danger-700));
90
+ --ui-danger-focus-border-color: light-dark(var(--color-danger-600), var(--color-danger-400));
97
91
  }
98
92
 
99
93
  .ui-base {
@@ -103,11 +97,10 @@
103
97
  --ui-surface-top-color: var(--ui-base-surface-top-color);
104
98
  --ui-surface-bottom-color: var(--ui-base-surface-bottom-color);
105
99
  --ui-surface-text-color: var(--ui-base-surface-text-color);
106
- --ui-surface-text-shadow-color: var(--ui-base-surface-text-shadow-color);
107
100
  --ui-border-color: var(--ui-base-border-color);
108
101
  --ui-shadow-color: var(--ui-base-shadow-color);
109
- --ui-focus-light-color: var(--ui-base-focus-light-color);
110
- --ui-focus-medium-color: var(--ui-base-focus-medium-color);
102
+ --ui-focus-outline-color: var(--ui-base-focus-outline-color);
103
+ --ui-focus-border-color: var(--ui-base-focus-border-color);
111
104
  }
112
105
 
113
106
  .ui-inverse {
@@ -117,11 +110,10 @@
117
110
  --ui-surface-top-color: var(--ui-inverse-surface-top-color);
118
111
  --ui-surface-bottom-color: var(--ui-inverse-surface-bottom-color);
119
112
  --ui-surface-text-color: var(--ui-inverse-surface-text-color);
120
- --ui-surface-text-shadow-color: var(--ui-inverse-surface-text-shadow-color);
121
113
  --ui-border-color: var(--ui-inverse-border-color);
122
114
  --ui-shadow-color: var(--ui-inverse-shadow-color);
123
- --ui-focus-light-color: var(--ui-inverse-focus-light-color);
124
- --ui-focus-medium-color: var(--ui-inverse-focus-medium-color);
115
+ --ui-focus-outline-color: var(--ui-inverse-focus-outline-color);
116
+ --ui-focus-border-color: var(--ui-inverse-focus-border-color);
125
117
  }
126
118
 
127
119
  .ui-primary {
@@ -131,11 +123,10 @@
131
123
  --ui-surface-top-color: var(--ui-primary-surface-top-color);
132
124
  --ui-surface-bottom-color: var(--ui-primary-surface-bottom-color);
133
125
  --ui-surface-text-color: var(--ui-primary-surface-text-color);
134
- --ui-surface-text-shadow-color: var(--ui-primary-surface-text-shadow-color);
135
126
  --ui-border-color: var(--ui-primary-border-color);
136
127
  --ui-shadow-color: var(--ui-primary-shadow-color);
137
- --ui-focus-light-color: var(--ui-primary-focus-light-color);
138
- --ui-focus-medium-color: var(--ui-primary-focus-medium-color);
128
+ --ui-focus-outline-color: var(--ui-primary-focus-outline-color);
129
+ --ui-focus-border-color: var(--ui-primary-focus-border-color);
139
130
  }
140
131
 
141
132
  .ui-secondary {
@@ -145,11 +136,10 @@
145
136
  --ui-surface-top-color: var(--ui-secondary-surface-top-color);
146
137
  --ui-surface-bottom-color: var(--ui-secondary-surface-bottom-color);
147
138
  --ui-surface-text-color: var(--ui-secondary-surface-text-color);
148
- --ui-surface-text-shadow-color: var(--ui-secondary-surface-text-shadow-color);
149
139
  --ui-border-color: var(--ui-secondary-border-color);
150
140
  --ui-shadow-color: var(--ui-secondary-shadow-color);
151
- --ui-focus-light-color: var(--ui-secondary-focus-light-color);
152
- --ui-focus-medium-color: var(--ui-secondary-focus-medium-color);
141
+ --ui-focus-outline-color: var(--ui-secondary-focus-outline-color);
142
+ --ui-focus-border-color: var(--ui-secondary-focus-border-color);
153
143
  }
154
144
 
155
145
  .ui-tertiary {
@@ -159,11 +149,10 @@
159
149
  --ui-surface-top-color: var(--ui-tertiary-surface-top-color);
160
150
  --ui-surface-bottom-color: var(--ui-tertiary-surface-bottom-color);
161
151
  --ui-surface-text-color: var(--ui-tertiary-surface-text-color);
162
- --ui-surface-text-shadow-color: var(--ui-tertiary-surface-text-shadow-color);
163
152
  --ui-border-color: var(--ui-tertiary-border-color);
164
153
  --ui-shadow-color: var(--ui-tertiary-shadow-color);
165
- --ui-focus-light-color: var(--ui-tertiary-focus-light-color);
166
- --ui-focus-medium-color: var(--ui-tertiary-focus-medium-color);
154
+ --ui-focus-outline-color: var(--ui-tertiary-focus-outline-color);
155
+ --ui-focus-border-color: var(--ui-tertiary-focus-border-color);
167
156
  }
168
157
 
169
158
  .ui-success {
@@ -173,11 +162,10 @@
173
162
  --ui-surface-top-color: var(--ui-success-surface-top-color);
174
163
  --ui-surface-bottom-color: var(--ui-success-surface-bottom-color);
175
164
  --ui-surface-text-color: var(--ui-success-surface-text-color);
176
- --ui-surface-text-shadow-color: var(--ui-success-surface-text-shadow-color);
177
165
  --ui-border-color: var(--ui-success-border-color);
178
166
  --ui-shadow-color: var(--ui-success-shadow-color);
179
- --ui-focus-light-color: var(--ui-success-focus-light-color);
180
- --ui-focus-medium-color: var(--ui-success-focus-medium-color);
167
+ --ui-focus-outline-color: var(--ui-success-focus-outline-color);
168
+ --ui-focus-border-color: var(--ui-success-focus-border-color);
181
169
  }
182
170
 
183
171
  .ui-warning {
@@ -187,11 +175,10 @@
187
175
  --ui-surface-top-color: var(--ui-warning-surface-top-color);
188
176
  --ui-surface-bottom-color: var(--ui-warning-surface-bottom-color);
189
177
  --ui-surface-text-color: var(--ui-warning-surface-text-color);
190
- --ui-surface-text-shadow-color: var(--ui-warning-surface-text-shadow-color);
191
178
  --ui-border-color: var(--ui-warning-border-color);
192
179
  --ui-shadow-color: var(--ui-warning-shadow-color);
193
- --ui-focus-light-color: var(--ui-warning-focus-light-color);
194
- --ui-focus-medium-color: var(--ui-warning-focus-medium-color);
180
+ --ui-focus-outline-color: var(--ui-warning-focus-outline-color);
181
+ --ui-focus-border-color: var(--ui-warning-focus-border-color);
195
182
  }
196
183
 
197
184
  .ui-danger {
@@ -201,9 +188,8 @@
201
188
  --ui-surface-top-color: var(--ui-danger-surface-top-color);
202
189
  --ui-surface-bottom-color: var(--ui-danger-surface-bottom-color);
203
190
  --ui-surface-text-color: var(--ui-danger-surface-text-color);
204
- --ui-surface-text-shadow-color: var(--ui-danger-surface-text-shadow-color);
205
191
  --ui-border-color: var(--ui-danger-border-color);
206
192
  --ui-shadow-color: var(--ui-danger-shadow-color);
207
- --ui-focus-light-color: var(--ui-danger-focus-light-color);
208
- --ui-focus-medium-color: var(--ui-danger-focus-medium-color);
193
+ --ui-focus-outline-color: var(--ui-danger-focus-outline-color);
194
+ --ui-focus-border-color: var(--ui-danger-focus-border-color);
209
195
  }
package/variables/input-sizes.css DELETED
@@ -1,84 +0,0 @@
1
- :root {
2
-
3
- /* Default size */
4
-
5
- --input-height: var(--input-size-m-height);
6
- --input-font-size: var(--font-size-m);
7
- --input-padding-md: var(--sp1-5);
8
- --input-padding-sm: var(--sp1);
9
- --input-gap: var(--sp1);
10
- --input-radius-round: calc(.5 * var(--input-height));
11
-
12
- /* Sizes */
13
-
14
- --input-size-xs-height: var(--sp2-5);
15
- --input-size-xs-font-size: var(--font-size-xs);
16
- --input-size-xs-padding-md: var(--sp1);
17
- --input-size-xs-padding-sm: var(--sp0-25);
18
- --input-size-xs-gap: var(--sp0-25);
19
-
20
- --input-size-s-height: var(--sp3);
21
- --input-size-s-font-size: var(--font-size-s);
22
- --input-size-s-padding-md: var(--sp1);
23
- --input-size-s-padding-sm: var(--sp0-5);
24
- --input-size-s-gap: var(--sp0-5);
25
-
26
- --input-size-m-height: var(--sp4);
27
- --input-size-m-font-size: var(--font-size-m);
28
- --input-size-m-padding-md: var(--sp1-5);
29
- --input-size-m-padding-sm: var(--sp1);
30
- --input-size-m-gap: var(--sp1);
31
-
32
- --input-size-l-height: var(--sp5);
33
- --input-size-l-font-size: var(--font-size-m);
34
- --input-size-l-padding-md: var(--sp2);
35
- --input-size-l-padding-sm: var(--sp1);
36
- --input-size-l-gap: var(--sp1);
37
-
38
- --input-size-xl-height: var(--sp6);
39
- --input-size-xl-font-size: var(--font-size-l);
40
- --input-size-xl-padding-md: var(--sp2-5);
41
- --input-size-xl-padding-sm: var(--sp1-5);
42
- --input-size-xl-gap: var(--sp1-5);
43
-
44
- }
45
-
46
- .input-size-xs {
47
- --input-height: var(--input-size-xs-height);
48
- --input-font-size: var(--input-size-xs-font-size);
49
- --input-padding-md: var(--input-size-xs-padding-md);
50
- --input-padding-sm: var(--input-size-xs-padding-sm);
51
- --input-gap: var(--input-size-xs-gap);
52
- }
53
-
54
- .input-size-s, .input-size-small {
55
- --input-height: var(--input-size-s-height);
56
- --input-font-size: var(--input-size-s-font-size);
57
- --input-padding-md: var(--input-size-s-padding-md);
58
- --input-padding-sm: var(--input-size-s-padding-sm);
59
- --input-gap: var(--input-size-s-gap);
60
- }
61
-
62
- .input-size-m, .input-size-medium, .input-size-normal {
63
- --input-height: var(--input-size-m-height);
64
- --input-font-size: var(--input-size-m-font-size);
65
- --input-padding-md: var(--input-size-m-padding-md);
66
- --input-padding-sm: var(--input-size-m-padding-sm);
67
- --input-gap: var(--input-size-m-gap);
68
- }
69
-
70
- .input-size-l, .input-size-large {
71
- --input-height: var(--input-size-l-height);
72
- --input-font-size: var(--input-size-l-font-size);
73
- --input-padding-md: var(--input-size-l-padding-md);
74
- --input-padding-sm: var(--input-size-l-padding-sm);
75
- --input-gap: var(--input-size-l-gap);
76
- }
77
-
78
- .input-size-xl {
79
- --input-height: var(--input-size-xl-height);
80
- --input-font-size: var(--input-size-xl-font-size);
81
- --input-padding-md: var(--input-size-xl-padding-md);
82
- --input-padding-sm: var(--input-size-xl-padding-sm);
83
- --input-gap: var(--input-size-xl-gap);
84
- }