@entropix/react 0.2.0 → 0.3.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 (16) hide show
  1. package/dist/index.css +1015 -970
  2. package/dist/index.css.map +1 -1
  3. package/dist/styles/accordion.css +56 -54
  4. package/dist/styles/button.css +115 -113
  5. package/dist/styles/checkbox.css +101 -93
  6. package/dist/styles/dialog.css +88 -86
  7. package/dist/styles/index.css +3 -0
  8. package/dist/styles/input.css +144 -133
  9. package/dist/styles/layout.css +105 -103
  10. package/dist/styles/menu.css +51 -49
  11. package/dist/styles/radio.css +105 -98
  12. package/dist/styles/select.css +125 -120
  13. package/dist/styles/switch.css +44 -42
  14. package/dist/styles/tabs.css +70 -68
  15. package/dist/styles/toggle.css +40 -38
  16. package/package.json +2 -2
package/dist/index.css CHANGED
@@ -1,1051 +1,1096 @@
1
1
  /* src/styles/button.css */
2
- .entropix-button {
3
- display: inline-flex;
4
- align-items: center;
5
- justify-content: center;
6
- gap: var(--entropix-button-gap);
7
- border: 1px solid transparent;
8
- font-family: var(--entropix-font-family-sans);
9
- font-size: var(--entropix-button-font-size);
10
- font-weight: var(--entropix-button-font-weight);
11
- line-height: var(--entropix-button-line-height);
12
- border-radius: var(--entropix-button-border-radius);
13
- padding: var(--entropix-button-padding-y) var(--entropix-button-padding-x);
14
- cursor: pointer;
15
- text-decoration: none;
16
- user-select: none;
17
- transition:
18
- background var(--entropix-duration-fast) var(--entropix-easing-default),
19
- color var(--entropix-duration-fast) var(--entropix-easing-default),
20
- border-color var(--entropix-duration-fast) var(--entropix-easing-default),
21
- box-shadow var(--entropix-duration-fast) var(--entropix-easing-default);
22
- }
23
- .entropix-button--primary {
24
- background: var(--entropix-button-primary-bg);
25
- color: var(--entropix-button-primary-text);
26
- border-color: var(--entropix-button-primary-border);
27
- }
28
- .entropix-button--primary:hover:not(:disabled) {
29
- background: var(--entropix-button-primary-bg-hover);
30
- }
31
- .entropix-button--primary:active:not(:disabled) {
32
- background: var(--entropix-button-primary-bg-active);
33
- }
34
- .entropix-button--secondary {
35
- background: var(--entropix-button-secondary-bg);
36
- color: var(--entropix-button-secondary-text);
37
- border-color: var(--entropix-button-secondary-border);
38
- }
39
- .entropix-button--secondary:hover:not(:disabled) {
40
- background: var(--entropix-button-secondary-bg-hover);
41
- }
42
- .entropix-button--secondary:active:not(:disabled) {
43
- background: var(--entropix-button-secondary-bg-active);
44
- }
45
- .entropix-button--outline {
46
- background: transparent;
47
- color: var(--entropix-color-text-primary);
48
- border-color: var(--entropix-color-border-default);
49
- }
50
- .entropix-button--outline:hover:not(:disabled) {
51
- background: var(--entropix-color-action-secondary-hover);
52
- }
53
- .entropix-button--outline:active:not(:disabled) {
54
- background: var(--entropix-color-action-secondary-active);
55
- }
56
- .entropix-button--ghost {
57
- background: transparent;
58
- color: var(--entropix-color-text-primary);
59
- border-color: transparent;
60
- }
61
- .entropix-button--ghost:hover:not(:disabled) {
62
- background: var(--entropix-color-action-secondary-default);
63
- }
64
- .entropix-button--ghost:active:not(:disabled) {
65
- background: var(--entropix-color-action-secondary-hover);
66
- }
67
- .entropix-button--danger {
68
- background: var(--entropix-button-danger-bg);
69
- color: var(--entropix-button-danger-text);
70
- border-color: var(--entropix-button-danger-border);
71
- }
72
- .entropix-button--danger:hover:not(:disabled) {
73
- background: var(--entropix-button-danger-bg-hover);
74
- }
75
- .entropix-button--danger:active:not(:disabled) {
76
- background: var(--entropix-button-danger-bg-active);
77
- }
78
- .entropix-button--sm {
79
- padding: var(--entropix-spacing-1) var(--entropix-spacing-3);
80
- font-size: var(--entropix-font-size-xs);
81
- border-radius: var(--entropix-radius-sm);
82
- }
83
- .entropix-button--md {
84
- padding: var(--entropix-button-padding-y) var(--entropix-button-padding-x);
85
- font-size: var(--entropix-button-font-size);
86
- }
87
- .entropix-button--lg {
88
- padding: var(--entropix-spacing-3) var(--entropix-spacing-6);
89
- font-size: var(--entropix-font-size-base);
90
- border-radius: var(--entropix-radius-lg);
91
- }
92
- .entropix-button:disabled,
93
- .entropix-button[data-state=disabled],
94
- .entropix-button[data-state=loading] {
95
- opacity: 0.5;
96
- cursor: not-allowed;
97
- pointer-events: none;
98
- }
99
- .entropix-button:focus-visible {
100
- outline: 2px solid var(--entropix-color-border-focus);
101
- outline-offset: 2px;
102
- }
103
- @media (max-width: 767px) {
2
+ @layer entropix {
104
3
  .entropix-button {
105
- min-height: 44px;
4
+ display: inline-flex;
5
+ align-items: center;
6
+ justify-content: center;
7
+ gap: var(--entropix-button-gap);
8
+ border: 1px solid transparent;
9
+ font-family: var(--entropix-font-family-sans);
10
+ font-size: var(--entropix-button-font-size);
11
+ font-weight: var(--entropix-button-font-weight);
12
+ line-height: var(--entropix-button-line-height);
13
+ border-radius: var(--entropix-button-border-radius);
14
+ padding: var(--entropix-button-padding-y) var(--entropix-button-padding-x);
15
+ cursor: pointer;
16
+ text-decoration: none;
17
+ user-select: none;
18
+ transition:
19
+ background var(--entropix-duration-fast) var(--entropix-easing-default),
20
+ color var(--entropix-duration-fast) var(--entropix-easing-default),
21
+ border-color var(--entropix-duration-fast) var(--entropix-easing-default),
22
+ box-shadow var(--entropix-duration-fast) var(--entropix-easing-default);
23
+ }
24
+ .entropix-button--primary {
25
+ background: var(--entropix-button-primary-bg);
26
+ color: var(--entropix-button-primary-text);
27
+ border-color: var(--entropix-button-primary-border);
28
+ }
29
+ .entropix-button--primary:hover:not(:disabled) {
30
+ background: var(--entropix-button-primary-bg-hover);
31
+ }
32
+ .entropix-button--primary:active:not(:disabled) {
33
+ background: var(--entropix-button-primary-bg-active);
34
+ }
35
+ .entropix-button--secondary {
36
+ background: var(--entropix-button-secondary-bg);
37
+ color: var(--entropix-button-secondary-text);
38
+ border-color: var(--entropix-button-secondary-border);
39
+ }
40
+ .entropix-button--secondary:hover:not(:disabled) {
41
+ background: var(--entropix-button-secondary-bg-hover);
42
+ }
43
+ .entropix-button--secondary:active:not(:disabled) {
44
+ background: var(--entropix-button-secondary-bg-active);
45
+ }
46
+ .entropix-button--outline {
47
+ background: transparent;
48
+ color: var(--entropix-color-text-primary);
49
+ border-color: var(--entropix-color-border-default);
50
+ }
51
+ .entropix-button--outline:hover:not(:disabled) {
52
+ background: var(--entropix-color-action-secondary-hover);
53
+ }
54
+ .entropix-button--outline:active:not(:disabled) {
55
+ background: var(--entropix-color-action-secondary-active);
56
+ }
57
+ .entropix-button--ghost {
58
+ background: transparent;
59
+ color: var(--entropix-color-text-primary);
60
+ border-color: transparent;
61
+ }
62
+ .entropix-button--ghost:hover:not(:disabled) {
63
+ background: var(--entropix-color-action-secondary-default);
64
+ }
65
+ .entropix-button--ghost:active:not(:disabled) {
66
+ background: var(--entropix-color-action-secondary-hover);
67
+ }
68
+ .entropix-button--danger {
69
+ background: var(--entropix-button-danger-bg);
70
+ color: var(--entropix-button-danger-text);
71
+ border-color: var(--entropix-button-danger-border);
72
+ }
73
+ .entropix-button--danger:hover:not(:disabled) {
74
+ background: var(--entropix-button-danger-bg-hover);
75
+ }
76
+ .entropix-button--danger:active:not(:disabled) {
77
+ background: var(--entropix-button-danger-bg-active);
106
78
  }
107
79
  .entropix-button--sm {
108
- min-height: 36px;
109
- padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
110
- font-size: var(--entropix-font-size-sm);
80
+ padding: var(--entropix-spacing-1) var(--entropix-spacing-3);
81
+ font-size: var(--entropix-font-size-xs);
82
+ border-radius: var(--entropix-radius-sm);
83
+ }
84
+ .entropix-button--md {
85
+ padding: var(--entropix-button-padding-y) var(--entropix-button-padding-x);
86
+ font-size: var(--entropix-button-font-size);
87
+ }
88
+ .entropix-button--lg {
89
+ padding: var(--entropix-spacing-3) var(--entropix-spacing-6);
90
+ font-size: var(--entropix-font-size-base);
91
+ border-radius: var(--entropix-radius-lg);
92
+ }
93
+ .entropix-button:disabled,
94
+ .entropix-button[data-state=disabled],
95
+ .entropix-button[data-state=loading] {
96
+ opacity: 0.5;
97
+ cursor: not-allowed;
98
+ pointer-events: none;
99
+ }
100
+ .entropix-button:focus-visible {
101
+ outline: 2px solid var(--entropix-color-border-focus);
102
+ outline-offset: 2px;
103
+ }
104
+ @media (max-width: 767px) {
105
+ .entropix-button {
106
+ min-height: 44px;
107
+ }
108
+ .entropix-button--sm {
109
+ min-height: 36px;
110
+ padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
111
+ font-size: var(--entropix-font-size-sm);
112
+ }
111
113
  }
112
114
  }
113
115
 
114
116
  /* src/styles/toggle.css */
115
- .entropix-toggle {
116
- display: inline-flex;
117
- align-items: center;
118
- justify-content: center;
119
- padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
120
- border: 1px solid var(--entropix-color-border-default);
121
- border-radius: var(--entropix-radius-md);
122
- background: var(--entropix-color-bg-primary);
123
- color: var(--entropix-color-text-primary);
124
- font-family: var(--entropix-font-family-sans);
125
- font-size: var(--entropix-font-size-sm);
126
- font-weight: var(--entropix-font-weight-medium);
127
- cursor: pointer;
128
- user-select: none;
129
- transition:
130
- background var(--entropix-duration-fast) var(--entropix-easing-default),
131
- border-color var(--entropix-duration-fast) var(--entropix-easing-default),
132
- color var(--entropix-duration-fast) var(--entropix-easing-default);
133
- }
134
- .entropix-toggle:hover:not(:disabled) {
135
- background: var(--entropix-color-action-secondary-hover);
136
- }
137
- .entropix-toggle[data-state=checked] {
138
- background: var(--entropix-color-action-primary-default);
139
- color: var(--entropix-color-text-inverse);
140
- border-color: transparent;
141
- }
142
- .entropix-toggle[data-state=checked]:hover:not(:disabled) {
143
- background: var(--entropix-color-action-primary-hover);
144
- }
145
- .entropix-toggle:disabled {
146
- opacity: 0.5;
147
- cursor: not-allowed;
148
- pointer-events: none;
149
- }
150
- .entropix-toggle:focus-visible {
151
- outline: 2px solid var(--entropix-color-border-focus);
152
- outline-offset: 2px;
117
+ @layer entropix {
118
+ .entropix-toggle {
119
+ display: inline-flex;
120
+ align-items: center;
121
+ justify-content: center;
122
+ padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
123
+ border: 1px solid var(--entropix-color-border-default);
124
+ border-radius: var(--entropix-radius-md);
125
+ background: var(--entropix-color-bg-primary);
126
+ color: var(--entropix-color-text-primary);
127
+ font-family: var(--entropix-font-family-sans);
128
+ font-size: var(--entropix-font-size-sm);
129
+ font-weight: var(--entropix-font-weight-medium);
130
+ cursor: pointer;
131
+ user-select: none;
132
+ transition:
133
+ background var(--entropix-duration-fast) var(--entropix-easing-default),
134
+ border-color var(--entropix-duration-fast) var(--entropix-easing-default),
135
+ color var(--entropix-duration-fast) var(--entropix-easing-default);
136
+ }
137
+ .entropix-toggle:hover:not(:disabled) {
138
+ background: var(--entropix-color-action-secondary-hover);
139
+ }
140
+ .entropix-toggle[data-state=checked] {
141
+ background: var(--entropix-color-action-primary-default);
142
+ color: var(--entropix-color-text-inverse);
143
+ border-color: transparent;
144
+ }
145
+ .entropix-toggle[data-state=checked]:hover:not(:disabled) {
146
+ background: var(--entropix-color-action-primary-hover);
147
+ }
148
+ .entropix-toggle:disabled {
149
+ opacity: 0.5;
150
+ cursor: not-allowed;
151
+ pointer-events: none;
152
+ }
153
+ .entropix-toggle:focus-visible {
154
+ outline: 2px solid var(--entropix-color-border-focus);
155
+ outline-offset: 2px;
156
+ }
153
157
  }
154
158
 
155
159
  /* src/styles/switch.css */
156
- .entropix-switch {
157
- position: relative;
158
- display: inline-flex;
159
- align-items: center;
160
- width: 44px;
161
- height: 24px;
162
- padding: 2px;
163
- border: none;
164
- border-radius: var(--entropix-radius-full);
165
- background: var(--entropix-color-gray-300);
166
- cursor: pointer;
167
- transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
168
- }
169
- .entropix-switch::after {
170
- content: "";
171
- display: block;
172
- width: 20px;
173
- height: 20px;
174
- border-radius: var(--entropix-radius-full);
175
- background: var(--entropix-color-white);
176
- box-shadow: var(--entropix-shadow-sm);
177
- transition: transform var(--entropix-duration-fast) var(--entropix-easing-default);
178
- }
179
- .entropix-switch[data-state=checked] {
180
- background: var(--entropix-color-action-primary-default);
181
- }
182
- .entropix-switch[data-state=checked]::after {
183
- transform: translateX(20px);
184
- }
185
- .entropix-switch:hover:not(:disabled) {
186
- background: var(--entropix-color-gray-400);
187
- }
188
- .entropix-switch[data-state=checked]:hover:not(:disabled) {
189
- background: var(--entropix-color-action-primary-hover);
190
- }
191
- .entropix-switch:disabled {
192
- opacity: 0.5;
193
- cursor: not-allowed;
194
- }
195
- .entropix-switch:focus-visible {
196
- outline: 2px solid var(--entropix-color-border-focus);
197
- outline-offset: 2px;
160
+ @layer entropix {
161
+ .entropix-switch {
162
+ position: relative;
163
+ display: inline-flex;
164
+ align-items: center;
165
+ width: 44px;
166
+ height: 24px;
167
+ padding: 2px;
168
+ border: none;
169
+ border-radius: var(--entropix-radius-full);
170
+ background: var(--entropix-color-gray-300);
171
+ cursor: pointer;
172
+ transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
173
+ }
174
+ .entropix-switch::after {
175
+ content: "";
176
+ display: block;
177
+ width: 20px;
178
+ height: 20px;
179
+ border-radius: var(--entropix-radius-full);
180
+ background: var(--entropix-color-white);
181
+ box-shadow: var(--entropix-shadow-sm);
182
+ transition: transform var(--entropix-duration-fast) var(--entropix-easing-default);
183
+ }
184
+ .entropix-switch[data-state=checked] {
185
+ background: var(--entropix-color-action-primary-default);
186
+ }
187
+ .entropix-switch[data-state=checked]::after {
188
+ transform: translateX(20px);
189
+ }
190
+ .entropix-switch:hover:not(:disabled) {
191
+ background: var(--entropix-color-gray-400);
192
+ }
193
+ .entropix-switch[data-state=checked]:hover:not(:disabled) {
194
+ background: var(--entropix-color-action-primary-hover);
195
+ }
196
+ .entropix-switch:disabled {
197
+ opacity: 0.5;
198
+ cursor: not-allowed;
199
+ }
200
+ .entropix-switch:focus-visible {
201
+ outline: 2px solid var(--entropix-color-border-focus);
202
+ outline-offset: 2px;
203
+ }
198
204
  }
199
205
 
200
206
  /* src/styles/dialog.css */
201
- .entropix-dialog-overlay {
202
- position: fixed;
203
- inset: 0;
204
- background: rgba(0, 0, 0, 0.5);
205
- z-index: 50;
206
- }
207
- .entropix-dialog-content {
208
- position: fixed;
209
- top: 50%;
210
- left: 50%;
211
- transform: translate(-50%, -50%);
212
- background: var(--entropix-color-bg-primary);
213
- border-radius: var(--entropix-radius-lg);
214
- box-shadow: var(--entropix-shadow-xl);
215
- padding: var(--entropix-spacing-6);
216
- z-index: 51;
217
- max-width: 480px;
218
- width: 90vw;
219
- max-height: 85vh;
220
- overflow-y: auto;
221
- }
222
- .entropix-dialog-content:focus {
223
- outline: none;
224
- }
225
- .entropix-dialog-title {
226
- margin: 0;
227
- margin-bottom: var(--entropix-spacing-2);
228
- font-family: var(--entropix-text-heading-md-font-family);
229
- font-size: var(--entropix-text-heading-md-font-size);
230
- font-weight: var(--entropix-text-heading-md-font-weight);
231
- line-height: var(--entropix-text-heading-md-line-height);
232
- color: var(--entropix-color-text-primary);
233
- }
234
- .entropix-dialog-description {
235
- margin: 0;
236
- margin-bottom: var(--entropix-spacing-4);
237
- font-family: var(--entropix-text-body-md-font-family);
238
- font-size: var(--entropix-text-body-md-font-size);
239
- font-weight: var(--entropix-text-body-md-font-weight);
240
- line-height: var(--entropix-text-body-md-line-height);
241
- color: var(--entropix-color-text-secondary);
242
- }
243
- .entropix-dialog-close {
244
- position: absolute;
245
- top: var(--entropix-spacing-3);
246
- right: var(--entropix-spacing-3);
247
- display: inline-flex;
248
- align-items: center;
249
- justify-content: center;
250
- width: 32px;
251
- height: 32px;
252
- padding: 0;
253
- border: none;
254
- border-radius: var(--entropix-radius-sm);
255
- background: transparent;
256
- color: var(--entropix-color-text-secondary);
257
- cursor: pointer;
258
- transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
259
- }
260
- .entropix-dialog-close:hover {
261
- background: var(--entropix-color-action-secondary-default);
262
- }
263
- .entropix-dialog-close:focus-visible {
264
- outline: 2px solid var(--entropix-color-border-focus);
265
- outline-offset: 2px;
266
- }
267
- .entropix-dialog-trigger {
268
- }
269
- @media (max-width: 767px) {
270
- .entropix-dialog-content {
271
- top: auto;
272
- bottom: 0;
273
- left: 0;
274
- right: 0;
275
- transform: none;
276
- width: 100%;
277
- max-width: 100%;
278
- border-radius: var(--entropix-radius-lg) var(--entropix-radius-lg) 0 0;
279
- max-height: 90vh;
280
- padding: var(--entropix-spacing-5);
207
+ @layer entropix {
208
+ .entropix-dialog-overlay {
209
+ position: fixed;
210
+ inset: 0;
211
+ background: rgba(0, 0, 0, 0.5);
212
+ z-index: 50;
281
213
  }
282
- }
283
- @media (min-width: 768px) {
284
214
  .entropix-dialog-content {
285
- max-width: 560px;
215
+ position: fixed;
216
+ top: 50%;
217
+ left: 50%;
218
+ transform: translate(-50%, -50%);
219
+ background: var(--entropix-color-bg-primary);
220
+ border-radius: var(--entropix-radius-lg);
221
+ box-shadow: var(--entropix-shadow-xl);
222
+ padding: var(--entropix-spacing-6);
223
+ z-index: 51;
224
+ max-width: 480px;
225
+ width: 90vw;
226
+ max-height: 85vh;
227
+ overflow-y: auto;
228
+ }
229
+ .entropix-dialog-content:focus {
230
+ outline: none;
231
+ }
232
+ .entropix-dialog-title {
233
+ margin: 0;
234
+ margin-bottom: var(--entropix-spacing-2);
235
+ font-family: var(--entropix-text-heading-md-font-family);
236
+ font-size: var(--entropix-text-heading-md-font-size);
237
+ font-weight: var(--entropix-text-heading-md-font-weight);
238
+ line-height: var(--entropix-text-heading-md-line-height);
239
+ color: var(--entropix-color-text-primary);
240
+ }
241
+ .entropix-dialog-description {
242
+ margin: 0;
243
+ margin-bottom: var(--entropix-spacing-4);
244
+ font-family: var(--entropix-text-body-md-font-family);
245
+ font-size: var(--entropix-text-body-md-font-size);
246
+ font-weight: var(--entropix-text-body-md-font-weight);
247
+ line-height: var(--entropix-text-body-md-line-height);
248
+ color: var(--entropix-color-text-secondary);
249
+ }
250
+ .entropix-dialog-close {
251
+ position: absolute;
252
+ top: var(--entropix-spacing-3);
253
+ right: var(--entropix-spacing-3);
254
+ display: inline-flex;
255
+ align-items: center;
256
+ justify-content: center;
257
+ width: 32px;
258
+ height: 32px;
259
+ padding: 0;
260
+ border: none;
261
+ border-radius: var(--entropix-radius-sm);
262
+ background: transparent;
263
+ color: var(--entropix-color-text-secondary);
264
+ cursor: pointer;
265
+ transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
266
+ }
267
+ .entropix-dialog-close:hover {
268
+ background: var(--entropix-color-action-secondary-default);
269
+ }
270
+ .entropix-dialog-close:focus-visible {
271
+ outline: 2px solid var(--entropix-color-border-focus);
272
+ outline-offset: 2px;
273
+ }
274
+ .entropix-dialog-trigger {
275
+ }
276
+ @media (max-width: 767px) {
277
+ .entropix-dialog-content {
278
+ top: auto;
279
+ bottom: 0;
280
+ left: 0;
281
+ right: 0;
282
+ transform: none;
283
+ width: 100%;
284
+ max-width: 100%;
285
+ border-radius: var(--entropix-radius-lg) var(--entropix-radius-lg) 0 0;
286
+ max-height: 90vh;
287
+ padding: var(--entropix-spacing-5);
288
+ }
289
+ }
290
+ @media (min-width: 768px) {
291
+ .entropix-dialog-content {
292
+ max-width: 560px;
293
+ }
286
294
  }
287
295
  }
288
296
 
289
297
  /* src/styles/tabs.css */
290
- .entropix-tabs {
291
- display: flex;
292
- flex-direction: column;
293
- }
294
- .entropix-tablist {
295
- display: flex;
296
- gap: var(--entropix-spacing-1);
297
- border-bottom: 1px solid var(--entropix-color-border-default);
298
- }
299
- .entropix-tablist[data-orientation=vertical] {
300
- flex-direction: column;
301
- border-bottom: none;
302
- border-right: 1px solid var(--entropix-color-border-default);
303
- }
304
- .entropix-tab {
305
- display: inline-flex;
306
- align-items: center;
307
- justify-content: center;
308
- padding: var(--entropix-spacing-2) var(--entropix-spacing-4);
309
- border: none;
310
- border-bottom: 2px solid transparent;
311
- background: transparent;
312
- font-family: var(--entropix-font-family-sans);
313
- font-size: var(--entropix-font-size-sm);
314
- font-weight: var(--entropix-font-weight-medium);
315
- color: var(--entropix-color-text-secondary);
316
- cursor: pointer;
317
- transition: color var(--entropix-duration-fast) var(--entropix-easing-default), border-color var(--entropix-duration-fast) var(--entropix-easing-default);
318
- }
319
- .entropix-tab:hover:not(:disabled) {
320
- color: var(--entropix-color-text-primary);
321
- }
322
- .entropix-tab[data-state=active] {
323
- color: var(--entropix-color-action-primary-default);
324
- border-bottom-color: var(--entropix-color-action-primary-default);
325
- }
326
- .entropix-tab:disabled,
327
- .entropix-tab[aria-disabled=true] {
328
- opacity: 0.5;
329
- cursor: not-allowed;
330
- }
331
- .entropix-tab:focus-visible {
332
- outline: 2px solid var(--entropix-color-border-focus);
333
- outline-offset: -2px;
334
- border-radius: var(--entropix-radius-sm);
335
- }
336
- .entropix-tabpanel {
337
- padding: var(--entropix-spacing-4);
338
- }
339
- @media (max-width: 767px) {
298
+ @layer entropix {
299
+ .entropix-tabs {
300
+ display: flex;
301
+ flex-direction: column;
302
+ }
340
303
  .entropix-tablist {
341
- overflow-x: auto;
342
- -webkit-overflow-scrolling: touch;
343
- scrollbar-width: none;
344
- -ms-overflow-style: none;
304
+ display: flex;
305
+ gap: var(--entropix-spacing-1);
306
+ border-bottom: 1px solid var(--entropix-color-border-default);
345
307
  }
346
- .entropix-tablist::-webkit-scrollbar {
347
- display: none;
308
+ .entropix-tablist[data-orientation=vertical] {
309
+ flex-direction: column;
310
+ border-bottom: none;
311
+ border-right: 1px solid var(--entropix-color-border-default);
348
312
  }
349
313
  .entropix-tab {
350
- white-space: nowrap;
351
- flex-shrink: 0;
314
+ display: inline-flex;
315
+ align-items: center;
316
+ justify-content: center;
317
+ padding: var(--entropix-spacing-2) var(--entropix-spacing-4);
318
+ border: none;
319
+ border-bottom: 2px solid transparent;
320
+ background: transparent;
321
+ font-family: var(--entropix-font-family-sans);
322
+ font-size: var(--entropix-font-size-sm);
323
+ font-weight: var(--entropix-font-weight-medium);
324
+ color: var(--entropix-color-text-secondary);
325
+ cursor: pointer;
326
+ transition: color var(--entropix-duration-fast) var(--entropix-easing-default), border-color var(--entropix-duration-fast) var(--entropix-easing-default);
327
+ }
328
+ .entropix-tab:hover:not(:disabled) {
329
+ color: var(--entropix-color-text-primary);
330
+ }
331
+ .entropix-tab[data-state=active] {
332
+ color: var(--entropix-color-action-primary-default);
333
+ border-bottom-color: var(--entropix-color-action-primary-default);
334
+ }
335
+ .entropix-tab:disabled,
336
+ .entropix-tab[aria-disabled=true] {
337
+ opacity: 0.5;
338
+ cursor: not-allowed;
339
+ }
340
+ .entropix-tab:focus-visible {
341
+ outline: 2px solid var(--entropix-color-border-focus);
342
+ outline-offset: -2px;
343
+ border-radius: var(--entropix-radius-sm);
352
344
  }
353
345
  .entropix-tabpanel {
354
- padding: var(--entropix-spacing-3);
346
+ padding: var(--entropix-spacing-4);
347
+ }
348
+ @media (max-width: 767px) {
349
+ .entropix-tablist {
350
+ overflow-x: auto;
351
+ -webkit-overflow-scrolling: touch;
352
+ scrollbar-width: none;
353
+ -ms-overflow-style: none;
354
+ }
355
+ .entropix-tablist::-webkit-scrollbar {
356
+ display: none;
357
+ }
358
+ .entropix-tab {
359
+ white-space: nowrap;
360
+ flex-shrink: 0;
361
+ }
362
+ .entropix-tabpanel {
363
+ padding: var(--entropix-spacing-3);
364
+ }
355
365
  }
356
366
  }
357
367
 
358
368
  /* src/styles/accordion.css */
359
- .entropix-accordion {
360
- border: 1px solid var(--entropix-color-border-default);
361
- border-radius: var(--entropix-radius-lg);
362
- overflow: hidden;
363
- }
364
- .entropix-accordion-item {
365
- border-bottom: 1px solid var(--entropix-color-border-default);
366
- }
367
- .entropix-accordion-item:last-child {
368
- border-bottom: none;
369
- }
370
- .entropix-accordion-trigger {
371
- display: flex;
372
- align-items: center;
373
- justify-content: space-between;
374
- width: 100%;
375
- padding: var(--entropix-spacing-4);
376
- border: none;
377
- background: transparent;
378
- font-family: var(--entropix-font-family-sans);
379
- font-size: var(--entropix-font-size-sm);
380
- font-weight: var(--entropix-font-weight-medium);
381
- color: var(--entropix-color-text-primary);
382
- text-align: left;
383
- cursor: pointer;
384
- transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
385
- }
386
- .entropix-accordion-trigger:hover:not(:disabled) {
387
- background: var(--entropix-color-bg-secondary);
388
- }
389
- .entropix-accordion-trigger:disabled {
390
- opacity: 0.5;
391
- cursor: not-allowed;
392
- }
393
- .entropix-accordion-trigger:focus-visible {
394
- outline: 2px solid var(--entropix-color-border-focus);
395
- outline-offset: -2px;
396
- }
397
- .entropix-accordion-panel {
398
- padding: 0 var(--entropix-spacing-4) var(--entropix-spacing-4);
399
- font-family: var(--entropix-font-family-sans);
400
- font-size: var(--entropix-font-size-sm);
401
- color: var(--entropix-color-text-secondary);
402
- line-height: var(--entropix-line-height-normal);
403
- }
404
- @media (max-width: 767px) {
369
+ @layer entropix {
370
+ .entropix-accordion {
371
+ border: 1px solid var(--entropix-color-border-default);
372
+ border-radius: var(--entropix-radius-lg);
373
+ overflow: hidden;
374
+ }
375
+ .entropix-accordion-item {
376
+ border-bottom: 1px solid var(--entropix-color-border-default);
377
+ }
378
+ .entropix-accordion-item:last-child {
379
+ border-bottom: none;
380
+ }
405
381
  .entropix-accordion-trigger {
406
- padding: var(--entropix-spacing-4) var(--entropix-spacing-3);
407
- min-height: 48px;
408
- font-size: var(--entropix-font-size-base);
382
+ display: flex;
383
+ align-items: center;
384
+ justify-content: space-between;
385
+ width: 100%;
386
+ padding: var(--entropix-spacing-4);
387
+ border: none;
388
+ background: transparent;
389
+ font-family: var(--entropix-font-family-sans);
390
+ font-size: var(--entropix-font-size-sm);
391
+ font-weight: var(--entropix-font-weight-medium);
392
+ color: var(--entropix-color-text-primary);
393
+ text-align: left;
394
+ cursor: pointer;
395
+ transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
396
+ }
397
+ .entropix-accordion-trigger:hover:not(:disabled) {
398
+ background: var(--entropix-color-bg-secondary);
399
+ }
400
+ .entropix-accordion-trigger:disabled {
401
+ opacity: 0.5;
402
+ cursor: not-allowed;
403
+ }
404
+ .entropix-accordion-trigger:focus-visible {
405
+ outline: 2px solid var(--entropix-color-border-focus);
406
+ outline-offset: -2px;
409
407
  }
410
408
  .entropix-accordion-panel {
411
- padding: 0 var(--entropix-spacing-3) var(--entropix-spacing-3);
409
+ padding: 0 var(--entropix-spacing-4) var(--entropix-spacing-4);
410
+ font-family: var(--entropix-font-family-sans);
411
+ font-size: var(--entropix-font-size-sm);
412
+ color: var(--entropix-color-text-secondary);
413
+ line-height: var(--entropix-line-height-normal);
414
+ }
415
+ @media (max-width: 767px) {
416
+ .entropix-accordion-trigger {
417
+ padding: var(--entropix-spacing-4) var(--entropix-spacing-3);
418
+ min-height: 48px;
419
+ font-size: var(--entropix-font-size-base);
420
+ }
421
+ .entropix-accordion-panel {
422
+ padding: 0 var(--entropix-spacing-3) var(--entropix-spacing-3);
423
+ }
412
424
  }
413
425
  }
414
426
 
415
427
  /* src/styles/menu.css */
416
- .entropix-menu-trigger {
417
- }
418
- .entropix-menu-content {
419
- min-width: 160px;
420
- padding: var(--entropix-spacing-1);
421
- background: var(--entropix-color-bg-primary);
422
- border: 1px solid var(--entropix-color-border-default);
423
- border-radius: var(--entropix-radius-md);
424
- box-shadow: var(--entropix-shadow-lg);
425
- z-index: 50;
426
- }
427
- .entropix-menu-item {
428
- display: flex;
429
- align-items: center;
430
- padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
431
- border-radius: var(--entropix-radius-sm);
432
- font-family: var(--entropix-font-family-sans);
433
- font-size: var(--entropix-font-size-sm);
434
- color: var(--entropix-color-text-primary);
435
- cursor: pointer;
436
- user-select: none;
437
- transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
438
- }
439
- .entropix-menu-item:hover {
440
- background: var(--entropix-color-action-secondary-default);
441
- }
442
- .entropix-menu-item[data-state=active] {
443
- background: var(--entropix-color-action-secondary-default);
444
- }
445
- .entropix-menu-item[data-disabled=true],
446
- .entropix-menu-item[aria-disabled=true] {
447
- opacity: 0.5;
448
- cursor: not-allowed;
449
- pointer-events: none;
450
- }
451
- .entropix-menu-item:focus-visible {
452
- outline: 2px solid var(--entropix-color-border-focus);
453
- outline-offset: -2px;
454
- }
455
- @media (max-width: 767px) {
428
+ @layer entropix {
429
+ .entropix-menu-trigger {
430
+ }
456
431
  .entropix-menu-content {
457
- min-width: 200px;
432
+ min-width: 160px;
433
+ padding: var(--entropix-spacing-1);
434
+ background: var(--entropix-color-bg-primary);
435
+ border: 1px solid var(--entropix-color-border-default);
436
+ border-radius: var(--entropix-radius-md);
437
+ box-shadow: var(--entropix-shadow-lg);
438
+ z-index: 50;
458
439
  }
459
440
  .entropix-menu-item {
460
- padding: var(--entropix-spacing-3) var(--entropix-spacing-4);
461
- font-size: var(--entropix-font-size-base);
462
- min-height: 44px;
441
+ display: flex;
442
+ align-items: center;
443
+ padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
444
+ border-radius: var(--entropix-radius-sm);
445
+ font-family: var(--entropix-font-family-sans);
446
+ font-size: var(--entropix-font-size-sm);
447
+ color: var(--entropix-color-text-primary);
448
+ cursor: pointer;
449
+ user-select: none;
450
+ transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
451
+ }
452
+ .entropix-menu-item:hover {
453
+ background: var(--entropix-color-action-secondary-default);
454
+ }
455
+ .entropix-menu-item[data-state=active] {
456
+ background: var(--entropix-color-action-secondary-default);
457
+ }
458
+ .entropix-menu-item[data-disabled=true],
459
+ .entropix-menu-item[aria-disabled=true] {
460
+ opacity: 0.5;
461
+ cursor: not-allowed;
462
+ pointer-events: none;
463
+ }
464
+ .entropix-menu-item:focus-visible {
465
+ outline: 2px solid var(--entropix-color-border-focus);
466
+ outline-offset: -2px;
467
+ }
468
+ @media (max-width: 767px) {
469
+ .entropix-menu-content {
470
+ min-width: 200px;
471
+ }
472
+ .entropix-menu-item {
473
+ padding: var(--entropix-spacing-3) var(--entropix-spacing-4);
474
+ font-size: var(--entropix-font-size-base);
475
+ min-height: 44px;
476
+ }
463
477
  }
464
478
  }
465
479
 
466
480
  /* src/styles/input.css */
467
- .entropix-input-wrapper {
468
- display: flex;
469
- flex-direction: column;
470
- gap: var(--entropix-spacing-1);
471
- width: 100%;
472
- }
473
- .entropix-input-label {
474
- display: block;
475
- font-family: var(--entropix-font-family-sans);
476
- font-size: var(--entropix-font-size-sm);
477
- font-weight: var(--entropix-font-weight-medium);
478
- color: var(--entropix-color-text-primary);
479
- line-height: var(--entropix-line-height-normal);
480
- }
481
- .entropix-input-required {
482
- color: var(--entropix-color-text-danger);
483
- margin-left: var(--entropix-spacing-1);
484
- }
485
- .entropix-input,
486
- .entropix-textarea {
487
- display: block;
488
- width: 100%;
489
- border: 1px solid var(--entropix-color-border-default);
490
- border-radius: var(--entropix-radius-md);
491
- background: var(--entropix-color-bg-primary);
492
- color: var(--entropix-color-text-primary);
493
- font-family: var(--entropix-font-family-sans);
494
- font-size: var(--entropix-font-size-sm);
495
- line-height: var(--entropix-line-height-normal);
496
- padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
497
- transition:
498
- border-color var(--entropix-duration-fast) var(--entropix-easing-default),
499
- box-shadow var(--entropix-duration-fast) var(--entropix-easing-default),
500
- background var(--entropix-duration-fast) var(--entropix-easing-default);
501
- }
502
- .entropix-input::placeholder,
503
- .entropix-textarea::placeholder {
504
- color: var(--entropix-color-text-tertiary);
505
- }
506
- .entropix-input:focus,
507
- .entropix-textarea:focus {
508
- outline: none;
509
- border-color: var(--entropix-color-border-focus);
510
- box-shadow: 0 0 0 1px var(--entropix-color-border-focus);
511
- }
512
- .entropix-input:focus-visible,
513
- .entropix-textarea:focus-visible {
514
- outline: 2px solid var(--entropix-color-border-focus);
515
- outline-offset: 2px;
516
- }
517
- .entropix-input:hover:not(:disabled):not(:focus),
518
- .entropix-textarea:hover:not(:disabled):not(:focus) {
519
- border-color: var(--entropix-color-border-hover);
520
- }
521
- .entropix-input[data-variant=filled],
522
- .entropix-textarea[data-variant=filled] {
523
- background: var(--entropix-color-bg-secondary);
524
- border-color: transparent;
525
- }
526
- .entropix-input[data-variant=filled]:focus,
527
- .entropix-textarea[data-variant=filled]:focus {
528
- background: var(--entropix-color-bg-primary);
529
- border-color: var(--entropix-color-border-focus);
530
- }
531
- .entropix-input[data-size=sm],
532
- .entropix-textarea[data-size=sm] {
533
- padding: var(--entropix-spacing-1) var(--entropix-spacing-2);
534
- font-size: var(--entropix-font-size-xs);
535
- border-radius: var(--entropix-radius-sm);
536
- }
537
- .entropix-input[data-size=md],
538
- .entropix-textarea[data-size=md] {
539
- padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
540
- font-size: var(--entropix-font-size-sm);
541
- }
542
- .entropix-input[data-size=lg],
543
- .entropix-textarea[data-size=lg] {
544
- padding: var(--entropix-spacing-3) var(--entropix-spacing-4);
545
- font-size: var(--entropix-font-size-base);
546
- border-radius: var(--entropix-radius-lg);
547
- }
548
- .entropix-input[data-state=invalid],
549
- .entropix-textarea[data-state=invalid] {
550
- border-color: var(--entropix-color-border-danger);
551
- }
552
- .entropix-input[data-state=invalid]:focus,
553
- .entropix-textarea[data-state=invalid]:focus {
554
- border-color: var(--entropix-color-border-danger);
555
- box-shadow: 0 0 0 1px var(--entropix-color-border-danger);
556
- }
557
- .entropix-input:disabled,
558
- .entropix-textarea:disabled,
559
- .entropix-input[data-state=disabled],
560
- .entropix-textarea[data-state=disabled] {
561
- opacity: 0.5;
562
- cursor: not-allowed;
563
- pointer-events: none;
564
- }
565
- .entropix-input-helper {
566
- font-family: var(--entropix-font-family-sans);
567
- font-size: var(--entropix-font-size-xs);
568
- color: var(--entropix-color-text-secondary);
569
- line-height: var(--entropix-line-height-normal);
570
- }
571
- .entropix-input-error {
572
- font-family: var(--entropix-font-family-sans);
573
- font-size: var(--entropix-font-size-xs);
574
- color: var(--entropix-color-text-danger);
575
- line-height: var(--entropix-line-height-normal);
576
- }
577
- .entropix-textarea {
578
- min-height: 80px;
579
- }
580
- @media (max-width: 767px) {
481
+ @layer entropix {
482
+ .entropix-input-wrapper {
483
+ --input-border-color: var(--entropix-color-border-default);
484
+ --input-border-radius: var(--entropix-radius-md);
485
+ --input-bg: var(--entropix-color-bg-primary);
486
+ --input-font-size: var(--entropix-font-size-sm);
487
+ --input-padding-y: var(--entropix-spacing-2);
488
+ --input-padding-x: var(--entropix-spacing-3);
489
+ --input-focus-color: var(--entropix-color-border-focus);
490
+ --input-error-color: var(--entropix-color-border-danger);
491
+ display: flex;
492
+ flex-direction: column;
493
+ gap: var(--entropix-spacing-1);
494
+ width: 100%;
495
+ }
496
+ .entropix-input-label {
497
+ display: block;
498
+ font-family: var(--entropix-font-family-sans);
499
+ font-size: var(--entropix-font-size-sm);
500
+ font-weight: var(--entropix-font-weight-medium);
501
+ color: var(--entropix-color-text-primary);
502
+ line-height: var(--entropix-line-height-normal);
503
+ }
504
+ .entropix-input-required {
505
+ color: var(--entropix-color-text-danger);
506
+ margin-left: var(--entropix-spacing-1);
507
+ }
581
508
  .entropix-input,
582
509
  .entropix-textarea {
583
- min-height: 44px;
584
- font-size: var(--entropix-font-size-base);
510
+ display: block;
511
+ width: 100%;
512
+ border: 1px solid var(--input-border-color);
513
+ border-radius: var(--input-border-radius);
514
+ background: var(--input-bg);
515
+ color: var(--entropix-color-text-primary);
516
+ font-family: var(--entropix-font-family-sans);
517
+ font-size: var(--input-font-size);
518
+ line-height: var(--entropix-line-height-normal);
519
+ padding: var(--input-padding-y) var(--input-padding-x);
520
+ transition:
521
+ border-color var(--entropix-duration-fast) var(--entropix-easing-default),
522
+ box-shadow var(--entropix-duration-fast) var(--entropix-easing-default),
523
+ background var(--entropix-duration-fast) var(--entropix-easing-default);
524
+ }
525
+ .entropix-input::placeholder,
526
+ .entropix-textarea::placeholder {
527
+ color: var(--entropix-color-text-tertiary);
528
+ }
529
+ .entropix-input:focus,
530
+ .entropix-textarea:focus {
531
+ outline: none;
532
+ border-color: var(--input-focus-color);
533
+ box-shadow: 0 0 0 1px var(--input-focus-color);
534
+ }
535
+ .entropix-input:focus-visible,
536
+ .entropix-textarea:focus-visible {
537
+ outline: 2px solid var(--input-focus-color);
538
+ outline-offset: 2px;
539
+ }
540
+ .entropix-input:hover:not(:disabled):not(:focus),
541
+ .entropix-textarea:hover:not(:disabled):not(:focus) {
542
+ border-color: var(--entropix-color-border-hover);
543
+ }
544
+ .entropix-input[data-variant=filled],
545
+ .entropix-textarea[data-variant=filled] {
546
+ background: var(--entropix-color-bg-secondary);
547
+ border-color: transparent;
548
+ }
549
+ .entropix-input[data-variant=filled]:focus,
550
+ .entropix-textarea[data-variant=filled]:focus {
551
+ background: var(--input-bg);
552
+ border-color: var(--input-focus-color);
585
553
  }
586
554
  .entropix-input[data-size=sm],
587
555
  .entropix-textarea[data-size=sm] {
588
- min-height: 36px;
589
- font-size: var(--entropix-font-size-sm);
556
+ padding: var(--entropix-spacing-1) var(--entropix-spacing-2);
557
+ font-size: var(--entropix-font-size-xs);
558
+ border-radius: var(--entropix-radius-sm);
559
+ }
560
+ .entropix-input[data-size=md],
561
+ .entropix-textarea[data-size=md] {
562
+ padding: var(--input-padding-y) var(--input-padding-x);
563
+ font-size: var(--input-font-size);
564
+ }
565
+ .entropix-input[data-size=lg],
566
+ .entropix-textarea[data-size=lg] {
567
+ padding: var(--entropix-spacing-3) var(--entropix-spacing-4);
568
+ font-size: var(--entropix-font-size-base);
569
+ border-radius: var(--entropix-radius-lg);
570
+ }
571
+ .entropix-input[data-state=invalid],
572
+ .entropix-textarea[data-state=invalid] {
573
+ border-color: var(--input-error-color);
574
+ }
575
+ .entropix-input[data-state=invalid]:focus,
576
+ .entropix-textarea[data-state=invalid]:focus {
577
+ border-color: var(--input-error-color);
578
+ box-shadow: 0 0 0 1px var(--input-error-color);
579
+ }
580
+ .entropix-input:disabled,
581
+ .entropix-textarea:disabled,
582
+ .entropix-input[data-state=disabled],
583
+ .entropix-textarea[data-state=disabled] {
584
+ opacity: 0.5;
585
+ cursor: not-allowed;
586
+ pointer-events: none;
587
+ }
588
+ .entropix-input-helper {
589
+ font-family: var(--entropix-font-family-sans);
590
+ font-size: var(--entropix-font-size-xs);
591
+ color: var(--entropix-color-text-secondary);
592
+ line-height: var(--entropix-line-height-normal);
593
+ }
594
+ .entropix-input-error {
595
+ font-family: var(--entropix-font-family-sans);
596
+ font-size: var(--entropix-font-size-xs);
597
+ color: var(--entropix-color-text-danger);
598
+ line-height: var(--entropix-line-height-normal);
599
+ }
600
+ .entropix-textarea {
601
+ min-height: 80px;
602
+ }
603
+ @media (max-width: 767px) {
604
+ .entropix-input,
605
+ .entropix-textarea {
606
+ min-height: 44px;
607
+ font-size: var(--entropix-font-size-base);
608
+ }
609
+ .entropix-input[data-size=sm],
610
+ .entropix-textarea[data-size=sm] {
611
+ min-height: 36px;
612
+ font-size: var(--entropix-font-size-sm);
613
+ }
590
614
  }
591
615
  }
592
616
 
593
617
  /* src/styles/checkbox.css */
594
- .entropix-checkbox {
595
- display: inline-flex;
596
- align-items: center;
597
- gap: var(--entropix-spacing-2);
598
- padding: var(--entropix-spacing-1) 0;
599
- border: none;
600
- background: transparent;
601
- cursor: pointer;
602
- user-select: none;
603
- font-family: var(--entropix-font-family-sans);
604
- font-size: var(--entropix-font-size-sm);
605
- color: var(--entropix-color-text-primary);
606
- line-height: var(--entropix-line-height-normal);
607
- }
608
- .entropix-checkbox__indicator {
609
- display: inline-flex;
610
- align-items: center;
611
- justify-content: center;
612
- width: 18px;
613
- height: 18px;
614
- border: 2px solid var(--entropix-color-border-default);
615
- border-radius: var(--entropix-radius-sm);
616
- background: var(--entropix-color-bg-primary);
617
- flex-shrink: 0;
618
- transition: background var(--entropix-duration-fast) var(--entropix-easing-default), border-color var(--entropix-duration-fast) var(--entropix-easing-default);
619
- }
620
- .entropix-checkbox__indicator[data-state=checked],
621
- .entropix-checkbox__indicator[data-state=indeterminate] {
622
- background: var(--entropix-color-action-primary-default);
623
- border-color: var(--entropix-color-action-primary-default);
624
- }
625
- .entropix-checkbox__indicator[data-state=checked]::after {
626
- content: "";
627
- display: block;
628
- width: 5px;
629
- height: 9px;
630
- border: solid var(--entropix-color-text-inverse);
631
- border-width: 0 2px 2px 0;
632
- transform: rotate(45deg);
633
- margin-top: -1px;
634
- }
635
- .entropix-checkbox__indicator[data-state=indeterminate]::after {
636
- content: "";
637
- display: block;
638
- width: 8px;
639
- height: 2px;
640
- background: var(--entropix-color-text-inverse);
641
- border-radius: 1px;
642
- }
643
- .entropix-checkbox__label {
644
- font-family: var(--entropix-font-family-sans);
645
- font-size: var(--entropix-font-size-sm);
646
- color: var(--entropix-color-text-primary);
647
- line-height: var(--entropix-line-height-normal);
648
- }
649
- .entropix-checkbox:hover:not(:disabled) .entropix-checkbox__indicator {
650
- border-color: var(--entropix-color-border-hover);
651
- }
652
- .entropix-checkbox:hover:not(:disabled) .entropix-checkbox__indicator[data-state=checked],
653
- .entropix-checkbox:hover:not(:disabled) .entropix-checkbox__indicator[data-state=indeterminate] {
654
- background: var(--entropix-color-action-primary-hover);
655
- border-color: var(--entropix-color-action-primary-hover);
656
- }
657
- .entropix-checkbox:focus-visible {
658
- outline: 2px solid var(--entropix-color-border-focus);
659
- outline-offset: 2px;
660
- border-radius: var(--entropix-radius-sm);
661
- }
662
- .entropix-checkbox:disabled {
663
- opacity: 0.5;
664
- cursor: not-allowed;
665
- pointer-events: none;
666
- }
667
- @media (max-width: 767px) {
618
+ @layer entropix {
668
619
  .entropix-checkbox {
669
- min-height: 44px;
620
+ --checkbox-size: 18px;
621
+ --checkbox-border-color: var(--entropix-color-border-default);
622
+ --checkbox-checked-bg: var(--entropix-color-action-primary-default);
623
+ --checkbox-checked-border: var(--entropix-color-action-primary-default);
624
+ --checkbox-border-radius: var(--entropix-radius-sm);
625
+ display: inline-flex;
626
+ align-items: center;
627
+ gap: var(--entropix-spacing-2);
628
+ padding: var(--entropix-spacing-1) 0;
629
+ border: none;
630
+ background: transparent;
631
+ cursor: pointer;
632
+ user-select: none;
633
+ font-family: var(--entropix-font-family-sans);
634
+ font-size: var(--entropix-font-size-sm);
635
+ color: var(--entropix-color-text-primary);
636
+ line-height: var(--entropix-line-height-normal);
670
637
  }
671
638
  .entropix-checkbox__indicator {
672
- width: 22px;
673
- height: 22px;
639
+ display: inline-flex;
640
+ align-items: center;
641
+ justify-content: center;
642
+ width: var(--checkbox-size);
643
+ height: var(--checkbox-size);
644
+ border: 2px solid var(--checkbox-border-color);
645
+ border-radius: var(--checkbox-border-radius);
646
+ background: var(--entropix-color-bg-primary);
647
+ flex-shrink: 0;
648
+ transition: background var(--entropix-duration-fast) var(--entropix-easing-default), border-color var(--entropix-duration-fast) var(--entropix-easing-default);
649
+ }
650
+ .entropix-checkbox__indicator[data-state=checked],
651
+ .entropix-checkbox__indicator[data-state=indeterminate] {
652
+ background: var(--checkbox-checked-bg);
653
+ border-color: var(--checkbox-checked-border);
654
+ }
655
+ .entropix-checkbox__indicator[data-state=checked]::after {
656
+ content: "";
657
+ display: block;
658
+ width: 5px;
659
+ height: 9px;
660
+ border: solid var(--entropix-color-text-inverse);
661
+ border-width: 0 2px 2px 0;
662
+ transform: rotate(45deg);
663
+ margin-top: -1px;
664
+ }
665
+ .entropix-checkbox__indicator[data-state=indeterminate]::after {
666
+ content: "";
667
+ display: block;
668
+ width: 8px;
669
+ height: 2px;
670
+ background: var(--entropix-color-text-inverse);
671
+ border-radius: 1px;
672
+ }
673
+ .entropix-checkbox__label {
674
+ font-family: var(--entropix-font-family-sans);
675
+ font-size: var(--entropix-font-size-sm);
676
+ color: var(--entropix-color-text-primary);
677
+ line-height: var(--entropix-line-height-normal);
678
+ }
679
+ .entropix-checkbox:hover:not(:disabled) .entropix-checkbox__indicator {
680
+ border-color: var(--entropix-color-border-hover);
681
+ }
682
+ .entropix-checkbox:hover:not(:disabled) .entropix-checkbox__indicator[data-state=checked],
683
+ .entropix-checkbox:hover:not(:disabled) .entropix-checkbox__indicator[data-state=indeterminate] {
684
+ background: var(--entropix-color-action-primary-hover);
685
+ border-color: var(--entropix-color-action-primary-hover);
686
+ }
687
+ .entropix-checkbox:focus-visible {
688
+ outline: 2px solid var(--entropix-color-border-focus);
689
+ outline-offset: 2px;
690
+ border-radius: var(--checkbox-border-radius);
691
+ }
692
+ .entropix-checkbox:disabled {
693
+ opacity: 0.5;
694
+ cursor: not-allowed;
695
+ pointer-events: none;
696
+ }
697
+ @media (max-width: 767px) {
698
+ .entropix-checkbox {
699
+ min-height: 44px;
700
+ }
701
+ .entropix-checkbox__indicator {
702
+ width: 22px;
703
+ height: 22px;
704
+ }
674
705
  }
675
706
  }
676
707
 
677
708
  /* src/styles/radio.css */
678
- .entropix-radio-group {
679
- display: flex;
680
- gap: var(--entropix-spacing-2);
681
- }
682
- .entropix-radio-group[data-orientation=vertical] {
683
- flex-direction: column;
684
- }
685
- .entropix-radio-group[data-orientation=horizontal] {
686
- flex-direction: row;
687
- flex-wrap: wrap;
688
- }
689
- .entropix-radio-item {
690
- display: inline-flex;
691
- align-items: center;
692
- gap: var(--entropix-spacing-2);
693
- padding: var(--entropix-spacing-1) 0;
694
- border: none;
695
- background: transparent;
696
- cursor: pointer;
697
- user-select: none;
698
- font-family: var(--entropix-font-family-sans);
699
- font-size: var(--entropix-font-size-sm);
700
- color: var(--entropix-color-text-primary);
701
- line-height: var(--entropix-line-height-normal);
702
- }
703
- .entropix-radio-item__indicator {
704
- display: inline-flex;
705
- align-items: center;
706
- justify-content: center;
707
- width: 18px;
708
- height: 18px;
709
- border: 2px solid var(--entropix-color-border-default);
710
- border-radius: 50%;
711
- background: var(--entropix-color-bg-primary);
712
- flex-shrink: 0;
713
- transition: border-color var(--entropix-duration-fast) var(--entropix-easing-default), background var(--entropix-duration-fast) var(--entropix-easing-default);
714
- }
715
- .entropix-radio-item__indicator[data-state=checked] {
716
- border-color: var(--entropix-color-action-primary-default);
717
- }
718
- .entropix-radio-item__indicator[data-state=checked]::after {
719
- content: "";
720
- display: block;
721
- width: 8px;
722
- height: 8px;
723
- border-radius: 50%;
724
- background: var(--entropix-color-action-primary-default);
725
- }
726
- .entropix-radio-item__label {
727
- font-family: var(--entropix-font-family-sans);
728
- font-size: var(--entropix-font-size-sm);
729
- color: var(--entropix-color-text-primary);
730
- line-height: var(--entropix-line-height-normal);
731
- }
732
- .entropix-radio-item:hover:not(:disabled) .entropix-radio-item__indicator {
733
- border-color: var(--entropix-color-border-hover);
734
- }
735
- .entropix-radio-item:hover:not(:disabled) .entropix-radio-item__indicator[data-state=checked] {
736
- border-color: var(--entropix-color-action-primary-hover);
737
- }
738
- .entropix-radio-item:hover:not(:disabled) .entropix-radio-item__indicator[data-state=checked]::after {
739
- background: var(--entropix-color-action-primary-hover);
740
- }
741
- .entropix-radio-item:focus-visible {
742
- outline: 2px solid var(--entropix-color-border-focus);
743
- outline-offset: 2px;
744
- border-radius: var(--entropix-radius-sm);
745
- }
746
- .entropix-radio-item:disabled,
747
- .entropix-radio-item[data-disabled] {
748
- opacity: 0.5;
749
- cursor: not-allowed;
750
- pointer-events: none;
751
- }
752
- @media (max-width: 767px) {
709
+ @layer entropix {
710
+ .entropix-radio-group {
711
+ display: flex;
712
+ gap: var(--entropix-spacing-2);
713
+ }
714
+ .entropix-radio-group[data-orientation=vertical] {
715
+ flex-direction: column;
716
+ }
717
+ .entropix-radio-group[data-orientation=horizontal] {
718
+ flex-direction: row;
719
+ flex-wrap: wrap;
720
+ }
753
721
  .entropix-radio-item {
754
- min-height: 44px;
722
+ --radio-size: 20px;
723
+ --radio-border-color: var(--entropix-color-border-default);
724
+ --radio-checked-color: var(--entropix-color-action-primary-default);
725
+ --radio-dot-size: 10px;
726
+ display: inline-flex;
727
+ align-items: center;
728
+ gap: var(--entropix-spacing-2);
729
+ padding: var(--entropix-spacing-1) 0;
730
+ border: none;
731
+ background: transparent;
732
+ cursor: pointer;
733
+ user-select: none;
734
+ font-family: var(--entropix-font-family-sans);
735
+ font-size: var(--entropix-font-size-sm);
736
+ color: var(--entropix-color-text-primary);
737
+ line-height: var(--entropix-line-height-normal);
755
738
  }
756
739
  .entropix-radio-item__indicator {
757
- width: 22px;
758
- height: 22px;
740
+ display: inline-flex;
741
+ align-items: center;
742
+ justify-content: center;
743
+ width: var(--radio-size);
744
+ height: var(--radio-size);
745
+ border: 2px solid var(--radio-border-color);
746
+ border-radius: 50%;
747
+ background: var(--entropix-color-bg-primary);
748
+ flex-shrink: 0;
749
+ transition: border-color var(--entropix-duration-fast) var(--entropix-easing-default), background var(--entropix-duration-fast) var(--entropix-easing-default);
750
+ }
751
+ .entropix-radio-item__indicator[data-state=checked] {
752
+ border-color: var(--radio-checked-color);
759
753
  }
760
754
  .entropix-radio-item__indicator[data-state=checked]::after {
761
- width: 10px;
762
- height: 10px;
755
+ content: "";
756
+ display: block;
757
+ width: var(--radio-dot-size);
758
+ height: var(--radio-dot-size);
759
+ border-radius: 50%;
760
+ background: var(--radio-checked-color);
761
+ }
762
+ .entropix-radio-item__label {
763
+ font-family: var(--entropix-font-family-sans);
764
+ font-size: var(--entropix-font-size-sm);
765
+ color: var(--entropix-color-text-primary);
766
+ line-height: var(--entropix-line-height-normal);
767
+ }
768
+ .entropix-radio-item:hover:not(:disabled) .entropix-radio-item__indicator {
769
+ border-color: var(--entropix-color-border-hover);
770
+ }
771
+ .entropix-radio-item:hover:not(:disabled) .entropix-radio-item__indicator[data-state=checked] {
772
+ border-color: var(--entropix-color-action-primary-hover);
773
+ }
774
+ .entropix-radio-item:hover:not(:disabled) .entropix-radio-item__indicator[data-state=checked]::after {
775
+ background: var(--entropix-color-action-primary-hover);
776
+ }
777
+ .entropix-radio-item:focus-visible {
778
+ outline: 2px solid var(--entropix-color-border-focus);
779
+ outline-offset: 2px;
780
+ border-radius: var(--entropix-radius-sm);
781
+ }
782
+ .entropix-radio-item:disabled,
783
+ .entropix-radio-item[data-disabled] {
784
+ opacity: 0.5;
785
+ cursor: not-allowed;
786
+ pointer-events: none;
787
+ }
788
+ @media (max-width: 767px) {
789
+ .entropix-radio-item {
790
+ min-height: 44px;
791
+ }
792
+ .entropix-radio-item__indicator {
793
+ width: 22px;
794
+ height: 22px;
795
+ }
796
+ .entropix-radio-item__indicator[data-state=checked]::after {
797
+ width: 10px;
798
+ height: 10px;
799
+ }
763
800
  }
764
801
  }
765
802
 
766
803
  /* src/styles/select.css */
767
- .entropix-select {
768
- display: flex;
769
- flex-direction: column;
770
- gap: var(--entropix-spacing-1);
771
- position: relative;
772
- width: 100%;
773
- }
774
- .entropix-select-label {
775
- display: block;
776
- font-family: var(--entropix-font-family-sans);
777
- font-size: var(--entropix-font-size-sm);
778
- font-weight: var(--entropix-font-weight-medium);
779
- color: var(--entropix-color-text-primary);
780
- line-height: var(--entropix-line-height-normal);
781
- }
782
- .entropix-select-trigger {
783
- display: inline-flex;
784
- align-items: center;
785
- justify-content: space-between;
786
- gap: var(--entropix-spacing-2);
787
- width: 100%;
788
- border: 1px solid var(--entropix-color-border-default);
789
- border-radius: var(--entropix-radius-md);
790
- background: var(--entropix-color-bg-primary);
791
- color: var(--entropix-color-text-primary);
792
- font-family: var(--entropix-font-family-sans);
793
- font-size: var(--entropix-font-size-sm);
794
- line-height: var(--entropix-line-height-normal);
795
- padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
796
- cursor: pointer;
797
- user-select: none;
798
- text-align: left;
799
- transition: border-color var(--entropix-duration-fast) var(--entropix-easing-default), box-shadow var(--entropix-duration-fast) var(--entropix-easing-default);
800
- }
801
- .entropix-select-trigger__value {
802
- flex: 1;
803
- overflow: hidden;
804
- text-overflow: ellipsis;
805
- white-space: nowrap;
806
- }
807
- .entropix-select-trigger__chevron {
808
- flex-shrink: 0;
809
- font-size: var(--entropix-font-size-xs);
810
- color: var(--entropix-color-text-secondary);
811
- line-height: 1;
812
- }
813
- .entropix-select-trigger:hover:not(:disabled) {
814
- border-color: var(--entropix-color-border-hover);
815
- }
816
- .entropix-select-trigger:focus-visible {
817
- outline: 2px solid var(--entropix-color-border-focus);
818
- outline-offset: 2px;
819
- }
820
- .entropix-select-trigger:disabled {
821
- opacity: 0.5;
822
- cursor: not-allowed;
823
- pointer-events: none;
824
- }
825
- .entropix-select-content {
826
- position: absolute;
827
- top: 100%;
828
- left: 0;
829
- right: 0;
830
- z-index: 50;
831
- margin-top: var(--entropix-spacing-1);
832
- border: 1px solid var(--entropix-color-border-default);
833
- border-radius: var(--entropix-radius-md);
834
- background: var(--entropix-color-bg-primary);
835
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
836
- padding: var(--entropix-spacing-1) 0;
837
- max-height: 240px;
838
- overflow-y: auto;
839
- }
840
- .entropix-select-option {
841
- display: flex;
842
- align-items: center;
843
- padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
844
- font-family: var(--entropix-font-family-sans);
845
- font-size: var(--entropix-font-size-sm);
846
- color: var(--entropix-color-text-primary);
847
- line-height: var(--entropix-line-height-normal);
848
- cursor: pointer;
849
- user-select: none;
850
- transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
851
- }
852
- .entropix-select-option:hover:not([data-disabled]) {
853
- background: var(--entropix-color-action-secondary-hover);
854
- }
855
- .entropix-select-option[data-state=selected] {
856
- background: var(--entropix-color-action-secondary-default);
857
- font-weight: var(--entropix-font-weight-medium);
858
- }
859
- .entropix-select-option[data-state=selected]:hover {
860
- background: var(--entropix-color-action-secondary-hover);
861
- }
862
- .entropix-select-option[data-disabled] {
863
- opacity: 0.5;
864
- cursor: not-allowed;
865
- pointer-events: none;
866
- }
867
- @media (max-width: 767px) {
804
+ @layer entropix {
805
+ .entropix-select {
806
+ --select-border-color: var(--entropix-color-border-default);
807
+ --select-border-radius: var(--entropix-radius-md);
808
+ --select-bg: var(--entropix-color-bg-primary);
809
+ --select-dropdown-shadow: var(--entropix-shadow-lg);
810
+ display: flex;
811
+ flex-direction: column;
812
+ gap: var(--entropix-spacing-1);
813
+ position: relative;
814
+ width: 100%;
815
+ }
816
+ .entropix-select-label {
817
+ display: block;
818
+ font-family: var(--entropix-font-family-sans);
819
+ font-size: var(--entropix-font-size-sm);
820
+ font-weight: var(--entropix-font-weight-medium);
821
+ color: var(--entropix-color-text-primary);
822
+ line-height: var(--entropix-line-height-normal);
823
+ }
868
824
  .entropix-select-trigger {
869
- min-height: 44px;
825
+ display: inline-flex;
826
+ align-items: center;
827
+ justify-content: space-between;
828
+ gap: var(--entropix-spacing-2);
829
+ width: 100%;
830
+ border: 1px solid var(--select-border-color);
831
+ border-radius: var(--select-border-radius);
832
+ background: var(--select-bg);
833
+ color: var(--entropix-color-text-primary);
834
+ font-family: var(--entropix-font-family-sans);
835
+ font-size: var(--entropix-font-size-sm);
836
+ line-height: var(--entropix-line-height-normal);
837
+ padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
838
+ cursor: pointer;
839
+ user-select: none;
840
+ text-align: left;
841
+ transition: border-color var(--entropix-duration-fast) var(--entropix-easing-default), box-shadow var(--entropix-duration-fast) var(--entropix-easing-default);
842
+ }
843
+ .entropix-select-trigger__value {
844
+ flex: 1;
845
+ overflow: hidden;
846
+ text-overflow: ellipsis;
847
+ white-space: nowrap;
848
+ }
849
+ .entropix-select-trigger__chevron {
850
+ flex-shrink: 0;
851
+ font-size: var(--entropix-font-size-xs);
852
+ color: var(--entropix-color-text-secondary);
853
+ line-height: 1;
854
+ }
855
+ .entropix-select-trigger:hover:not(:disabled) {
856
+ border-color: var(--entropix-color-border-hover);
857
+ }
858
+ .entropix-select-trigger:focus-visible {
859
+ outline: 2px solid var(--entropix-color-border-focus);
860
+ outline-offset: 2px;
861
+ }
862
+ .entropix-select-trigger:disabled {
863
+ opacity: 0.5;
864
+ cursor: not-allowed;
865
+ pointer-events: none;
866
+ }
867
+ .entropix-select-content {
868
+ position: absolute;
869
+ top: 100%;
870
+ left: 0;
871
+ right: 0;
872
+ z-index: 50;
873
+ margin-top: var(--entropix-spacing-1);
874
+ border: 1px solid var(--select-border-color);
875
+ border-radius: var(--select-border-radius);
876
+ background: var(--select-bg);
877
+ box-shadow: var(--select-dropdown-shadow);
878
+ padding: var(--entropix-spacing-1) 0;
879
+ max-height: 240px;
880
+ overflow-y: auto;
870
881
  }
871
882
  .entropix-select-option {
872
- min-height: 44px;
883
+ display: flex;
884
+ align-items: center;
885
+ padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
886
+ font-family: var(--entropix-font-family-sans);
887
+ font-size: var(--entropix-font-size-sm);
888
+ color: var(--entropix-color-text-primary);
889
+ line-height: var(--entropix-line-height-normal);
890
+ cursor: pointer;
891
+ user-select: none;
892
+ transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
893
+ }
894
+ .entropix-select-option:hover:not([data-disabled]) {
895
+ background: var(--entropix-color-action-secondary-hover);
896
+ }
897
+ .entropix-select-option[data-state=selected] {
898
+ background: var(--entropix-color-action-secondary-default);
899
+ font-weight: var(--entropix-font-weight-medium);
900
+ }
901
+ .entropix-select-option[data-state=selected]:hover {
902
+ background: var(--entropix-color-action-secondary-hover);
903
+ }
904
+ .entropix-select-option[data-disabled] {
905
+ opacity: 0.5;
906
+ cursor: not-allowed;
907
+ pointer-events: none;
908
+ }
909
+ @media (max-width: 767px) {
910
+ .entropix-select-trigger {
911
+ min-height: 44px;
912
+ }
913
+ .entropix-select-option {
914
+ min-height: 44px;
915
+ }
873
916
  }
874
917
  }
875
918
 
876
919
  /* src/styles/layout.css */
877
- .entropix-stack {
878
- display: flex;
879
- flex-direction: column;
880
- gap: var(--entropix-space-layout-stack);
881
- }
882
- .entropix-stack--gap-none {
883
- gap: 0;
884
- }
885
- .entropix-stack--gap-xs {
886
- gap: var(--entropix-spacing-1);
887
- }
888
- .entropix-stack--gap-sm {
889
- gap: var(--entropix-spacing-2);
890
- }
891
- .entropix-stack--gap-md {
892
- gap: var(--entropix-spacing-4);
893
- }
894
- .entropix-stack--gap-lg {
895
- gap: var(--entropix-spacing-6);
896
- }
897
- .entropix-stack--gap-xl {
898
- gap: var(--entropix-spacing-8);
899
- }
900
- .entropix-stack--gap-2xl {
901
- gap: var(--entropix-spacing-12);
902
- }
903
- .entropix-stack--align-start {
904
- align-items: flex-start;
905
- }
906
- .entropix-stack--align-center {
907
- align-items: center;
908
- }
909
- .entropix-stack--align-end {
910
- align-items: flex-end;
911
- }
912
- .entropix-stack--align-stretch {
913
- align-items: stretch;
914
- }
915
- .entropix-stack--full-width {
916
- width: 100%;
917
- }
918
- .entropix-inline {
919
- display: flex;
920
- flex-direction: row;
921
- align-items: center;
922
- gap: var(--entropix-space-layout-inline);
923
- }
924
- .entropix-inline--gap-none {
925
- gap: 0;
926
- }
927
- .entropix-inline--gap-xs {
928
- gap: var(--entropix-spacing-1);
929
- }
930
- .entropix-inline--gap-sm {
931
- gap: var(--entropix-spacing-2);
932
- }
933
- .entropix-inline--gap-md {
934
- gap: var(--entropix-spacing-4);
935
- }
936
- .entropix-inline--gap-lg {
937
- gap: var(--entropix-spacing-6);
938
- }
939
- .entropix-inline--gap-xl {
940
- gap: var(--entropix-spacing-8);
941
- }
942
- .entropix-inline--gap-2xl {
943
- gap: var(--entropix-spacing-12);
944
- }
945
- .entropix-inline--align-start {
946
- align-items: flex-start;
947
- }
948
- .entropix-inline--align-center {
949
- align-items: center;
950
- }
951
- .entropix-inline--align-end {
952
- align-items: flex-end;
953
- }
954
- .entropix-inline--align-stretch {
955
- align-items: stretch;
956
- }
957
- .entropix-inline--align-baseline {
958
- align-items: baseline;
959
- }
960
- .entropix-inline--justify-start {
961
- justify-content: flex-start;
962
- }
963
- .entropix-inline--justify-center {
964
- justify-content: center;
965
- }
966
- .entropix-inline--justify-end {
967
- justify-content: flex-end;
968
- }
969
- .entropix-inline--justify-between {
970
- justify-content: space-between;
971
- }
972
- .entropix-inline--justify-around {
973
- justify-content: space-around;
974
- }
975
- .entropix-inline--wrap {
976
- flex-wrap: wrap;
977
- }
978
- .entropix-container {
979
- width: 100%;
980
- margin-left: auto;
981
- margin-right: auto;
982
- padding-left: var(--entropix-space-layout-page-margin);
983
- padding-right: var(--entropix-space-layout-page-margin);
984
- }
985
- .entropix-container--xs {
986
- max-width: 480px;
987
- }
988
- .entropix-container--sm {
989
- max-width: 640px;
990
- }
991
- .entropix-container--md {
992
- max-width: 768px;
993
- }
994
- .entropix-container--lg {
995
- max-width: 1024px;
996
- }
997
- .entropix-container--xl {
998
- max-width: 1280px;
999
- }
1000
- .entropix-container--full {
1001
- max-width: 100%;
1002
- }
1003
- .entropix-container--center {
1004
- display: flex;
1005
- flex-direction: column;
1006
- align-items: center;
1007
- }
1008
- .entropix-divider {
1009
- border: 0;
1010
- border-top: 1px solid var(--entropix-color-border-default);
1011
- margin: 0;
1012
- width: 100%;
1013
- }
1014
- .entropix-divider--vertical {
1015
- border-top: 0;
1016
- border-left: 1px solid var(--entropix-color-border-default);
1017
- width: auto;
1018
- height: auto;
1019
- align-self: stretch;
1020
- }
1021
- .entropix-divider--spacing-sm {
1022
- margin: var(--entropix-spacing-2) 0;
1023
- }
1024
- .entropix-divider--spacing-md {
1025
- margin: var(--entropix-spacing-4) 0;
1026
- }
1027
- .entropix-divider--spacing-lg {
1028
- margin: var(--entropix-spacing-6) 0;
1029
- }
1030
- .entropix-divider--vertical.entropix-divider--spacing-sm {
1031
- margin: 0 var(--entropix-spacing-2);
1032
- }
1033
- .entropix-divider--vertical.entropix-divider--spacing-md {
1034
- margin: 0 var(--entropix-spacing-4);
1035
- }
1036
- .entropix-divider--vertical.entropix-divider--spacing-lg {
1037
- margin: 0 var(--entropix-spacing-6);
1038
- }
1039
- @media (min-width: 768px) {
1040
- .entropix-container {
1041
- padding-left: var(--entropix-space-layout-page-margin-md);
1042
- padding-right: var(--entropix-space-layout-page-margin-md);
920
+ @layer entropix {
921
+ .entropix-stack {
922
+ display: flex;
923
+ flex-direction: column;
924
+ gap: var(--entropix-space-layout-stack);
925
+ }
926
+ .entropix-stack--gap-none {
927
+ gap: 0;
928
+ }
929
+ .entropix-stack--gap-xs {
930
+ gap: var(--entropix-spacing-1);
931
+ }
932
+ .entropix-stack--gap-sm {
933
+ gap: var(--entropix-spacing-2);
934
+ }
935
+ .entropix-stack--gap-md {
936
+ gap: var(--entropix-spacing-4);
937
+ }
938
+ .entropix-stack--gap-lg {
939
+ gap: var(--entropix-spacing-6);
940
+ }
941
+ .entropix-stack--gap-xl {
942
+ gap: var(--entropix-spacing-8);
943
+ }
944
+ .entropix-stack--gap-2xl {
945
+ gap: var(--entropix-spacing-12);
946
+ }
947
+ .entropix-stack--align-start {
948
+ align-items: flex-start;
949
+ }
950
+ .entropix-stack--align-center {
951
+ align-items: center;
952
+ }
953
+ .entropix-stack--align-end {
954
+ align-items: flex-end;
955
+ }
956
+ .entropix-stack--align-stretch {
957
+ align-items: stretch;
958
+ }
959
+ .entropix-stack--full-width {
960
+ width: 100%;
961
+ }
962
+ .entropix-inline {
963
+ display: flex;
964
+ flex-direction: row;
965
+ align-items: center;
966
+ gap: var(--entropix-space-layout-inline);
967
+ }
968
+ .entropix-inline--gap-none {
969
+ gap: 0;
970
+ }
971
+ .entropix-inline--gap-xs {
972
+ gap: var(--entropix-spacing-1);
973
+ }
974
+ .entropix-inline--gap-sm {
975
+ gap: var(--entropix-spacing-2);
976
+ }
977
+ .entropix-inline--gap-md {
978
+ gap: var(--entropix-spacing-4);
979
+ }
980
+ .entropix-inline--gap-lg {
981
+ gap: var(--entropix-spacing-6);
982
+ }
983
+ .entropix-inline--gap-xl {
984
+ gap: var(--entropix-spacing-8);
985
+ }
986
+ .entropix-inline--gap-2xl {
987
+ gap: var(--entropix-spacing-12);
988
+ }
989
+ .entropix-inline--align-start {
990
+ align-items: flex-start;
991
+ }
992
+ .entropix-inline--align-center {
993
+ align-items: center;
994
+ }
995
+ .entropix-inline--align-end {
996
+ align-items: flex-end;
997
+ }
998
+ .entropix-inline--align-stretch {
999
+ align-items: stretch;
1000
+ }
1001
+ .entropix-inline--align-baseline {
1002
+ align-items: baseline;
1003
+ }
1004
+ .entropix-inline--justify-start {
1005
+ justify-content: flex-start;
1006
+ }
1007
+ .entropix-inline--justify-center {
1008
+ justify-content: center;
1009
+ }
1010
+ .entropix-inline--justify-end {
1011
+ justify-content: flex-end;
1012
+ }
1013
+ .entropix-inline--justify-between {
1014
+ justify-content: space-between;
1015
+ }
1016
+ .entropix-inline--justify-around {
1017
+ justify-content: space-around;
1018
+ }
1019
+ .entropix-inline--wrap {
1020
+ flex-wrap: wrap;
1043
1021
  }
1044
- }
1045
- @media (min-width: 1024px) {
1046
1022
  .entropix-container {
1047
- padding-left: var(--entropix-space-layout-page-margin-lg);
1048
- padding-right: var(--entropix-space-layout-page-margin-lg);
1023
+ width: 100%;
1024
+ margin-left: auto;
1025
+ margin-right: auto;
1026
+ padding-left: var(--entropix-space-layout-page-margin);
1027
+ padding-right: var(--entropix-space-layout-page-margin);
1028
+ }
1029
+ .entropix-container--xs {
1030
+ max-width: 480px;
1031
+ }
1032
+ .entropix-container--sm {
1033
+ max-width: 640px;
1034
+ }
1035
+ .entropix-container--md {
1036
+ max-width: 768px;
1037
+ }
1038
+ .entropix-container--lg {
1039
+ max-width: 1024px;
1040
+ }
1041
+ .entropix-container--xl {
1042
+ max-width: 1280px;
1043
+ }
1044
+ .entropix-container--full {
1045
+ max-width: 100%;
1046
+ }
1047
+ .entropix-container--center {
1048
+ display: flex;
1049
+ flex-direction: column;
1050
+ align-items: center;
1051
+ }
1052
+ .entropix-divider {
1053
+ border: 0;
1054
+ border-top: 1px solid var(--entropix-color-border-default);
1055
+ margin: 0;
1056
+ width: 100%;
1057
+ }
1058
+ .entropix-divider--vertical {
1059
+ border-top: 0;
1060
+ border-left: 1px solid var(--entropix-color-border-default);
1061
+ width: auto;
1062
+ height: auto;
1063
+ align-self: stretch;
1064
+ }
1065
+ .entropix-divider--spacing-sm {
1066
+ margin: var(--entropix-spacing-2) 0;
1067
+ }
1068
+ .entropix-divider--spacing-md {
1069
+ margin: var(--entropix-spacing-4) 0;
1070
+ }
1071
+ .entropix-divider--spacing-lg {
1072
+ margin: var(--entropix-spacing-6) 0;
1073
+ }
1074
+ .entropix-divider--vertical.entropix-divider--spacing-sm {
1075
+ margin: 0 var(--entropix-spacing-2);
1076
+ }
1077
+ .entropix-divider--vertical.entropix-divider--spacing-md {
1078
+ margin: 0 var(--entropix-spacing-4);
1079
+ }
1080
+ .entropix-divider--vertical.entropix-divider--spacing-lg {
1081
+ margin: 0 var(--entropix-spacing-6);
1082
+ }
1083
+ @media (min-width: 768px) {
1084
+ .entropix-container {
1085
+ padding-left: var(--entropix-space-layout-page-margin-md);
1086
+ padding-right: var(--entropix-space-layout-page-margin-md);
1087
+ }
1088
+ }
1089
+ @media (min-width: 1024px) {
1090
+ .entropix-container {
1091
+ padding-left: var(--entropix-space-layout-page-margin-lg);
1092
+ padding-right: var(--entropix-space-layout-page-margin-lg);
1093
+ }
1049
1094
  }
1050
1095
  }
1051
1096
  /*# sourceMappingURL=index.css.map */