@vsn-ux/gaia-styles 0.3.2 → 0.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +25 -7
- package/dist/all-no-reset-10pt.css +116 -1
- package/dist/all-no-reset.css +116 -1
- package/dist/all.css +127 -12
- package/dist/base.css +1 -1
- package/dist/components/avatar.css +1 -1
- package/dist/components/badge.css +1 -1
- package/dist/components/button.css +1 -1
- package/dist/components/card.css +1 -1
- package/dist/components/checkbox.css +1 -1
- package/dist/components/dropdown.css +1 -1
- package/dist/components/form-field.css +1 -1
- package/dist/components/input.css +1 -1
- package/dist/components/menu.css +1 -1
- package/dist/components/notification.css +1 -1
- package/dist/components/radio.css +1 -1
- package/dist/components/segmented-control.css +1 -1
- package/dist/components/select.css +1 -1
- package/dist/components/switch.css +141 -0
- package/dist/components/tag.css +1 -1
- package/dist/components/text-area.css +1 -1
- package/dist/components/tooltip.css +1 -1
- package/dist/components.css +116 -1
- package/package.json +26 -26
- package/src/styles/components/switch.css +76 -0
- package/src/styles/components.css +1 -0
package/README.md
CHANGED
|
@@ -52,7 +52,7 @@ Ideal for migrating existing projects. Based on default 16px root font size.
|
|
|
52
52
|
|
|
53
53
|
> Note: This does not include the Inter font faces. Read [Inter font](#inter-font) section for more information.
|
|
54
54
|
|
|
55
|
-
### Design Tokens +
|
|
55
|
+
### Design Tokens + Base Styles + Components (based on 10px font size)
|
|
56
56
|
|
|
57
57
|
Based on default 10px root font size, handy if coming from [VUD](https://vud.visma.com).
|
|
58
58
|
|
|
@@ -80,7 +80,7 @@ Want to import just the components without reset and base styles?
|
|
|
80
80
|
|
|
81
81
|
### Base styles
|
|
82
82
|
|
|
83
|
-
Want to import just the
|
|
83
|
+
Want to import just the base styles?
|
|
84
84
|
|
|
85
85
|
```css
|
|
86
86
|
/* design tokens are required for base styles to work */
|
|
@@ -92,7 +92,23 @@ Want to import just the components without reset and base styles?
|
|
|
92
92
|
|
|
93
93
|
### Inter font
|
|
94
94
|
|
|
95
|
-
|
|
95
|
+
It is highly recommended to preload the font files in your HTML to avoid FOUC (Flash of Unstyled Content).\
|
|
96
|
+
This should be implemented according to your framework specifics, typically in the `<head>` section of your `index.html`.
|
|
97
|
+
|
|
98
|
+
Available font files in the package:
|
|
99
|
+
|
|
100
|
+
```
|
|
101
|
+
@vsn-ux/gaia-styles/font/Inter-Bold.woff2
|
|
102
|
+
@vsn-ux/gaia-styles/font/Inter-BoldItalic.woff2
|
|
103
|
+
@vsn-ux/gaia-styles/font/Inter-Italic.woff2
|
|
104
|
+
@vsn-ux/gaia-styles/font/Inter-Medium.woff2
|
|
105
|
+
@vsn-ux/gaia-styles/font/Inter-MediumItalic.woff2
|
|
106
|
+
@vsn-ux/gaia-styles/font/Inter-Regular.woff2
|
|
107
|
+
@vsn-ux/gaia-styles/font/Inter-SemiBold.woff2
|
|
108
|
+
@vsn-ux/gaia-styles/font/Inter-SemiBoldItalic.woff2
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
The package also provides definitions for the font faces in CSS format.
|
|
96
112
|
|
|
97
113
|
```css
|
|
98
114
|
@import '@vsn-ux/gaia-styles/font/inter.css';
|
|
@@ -100,15 +116,17 @@ The package includes the Inter font faces. In case you want to load them by othe
|
|
|
100
116
|
|
|
101
117
|
## Tailwindcss
|
|
102
118
|
|
|
103
|
-
|
|
119
|
+
> Note: This is for the latest version **v4** and above.
|
|
104
120
|
|
|
105
|
-
|
|
121
|
+
### Importing everything: theme, base and component styles
|
|
106
122
|
|
|
107
123
|
```css
|
|
108
124
|
@import '@vsn-ux/gaia-styles/tailwindcss';
|
|
109
125
|
```
|
|
110
126
|
|
|
111
|
-
|
|
127
|
+
### Importing selectively
|
|
128
|
+
|
|
129
|
+
Pick what you need in case you want to override some of the styles.
|
|
112
130
|
|
|
113
131
|
```css
|
|
114
132
|
@import '@vsn-ux/gaia-styles/design-tokens.css';
|
|
@@ -122,4 +140,4 @@ In case you want to customize something, use this:
|
|
|
122
140
|
@import '@vsn-ux/gaia-styles/tailwindcss/components.css' layer(components);
|
|
123
141
|
```
|
|
124
142
|
|
|
125
|
-
> The following example is the exact content of `@vsn-ux/gaia-styles/tailwindcss`.
|
|
143
|
+
> Note: The following example is the exact content of `@vsn-ux/gaia-styles/tailwindcss`.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! tailwindcss v4.0.
|
|
1
|
+
/*! tailwindcss v4.0.17 | MIT License | https://tailwindcss.com */
|
|
2
2
|
:root {
|
|
3
3
|
--ga-color-blue-10: #edf4fe;
|
|
4
4
|
--ga-color-blue-40: #93bbf9;
|
|
@@ -1242,6 +1242,117 @@
|
|
|
1242
1242
|
}
|
|
1243
1243
|
}
|
|
1244
1244
|
}
|
|
1245
|
+
.ga-switch {
|
|
1246
|
+
position: relative;
|
|
1247
|
+
display: inline-flex;
|
|
1248
|
+
align-items: center;
|
|
1249
|
+
gap: calc(0.4rem * 3);
|
|
1250
|
+
.ga-switch__marker {
|
|
1251
|
+
pointer-events: none;
|
|
1252
|
+
position: absolute;
|
|
1253
|
+
top: calc(0.4rem * 0);
|
|
1254
|
+
left: calc(0.4rem * 0);
|
|
1255
|
+
display: inline-block;
|
|
1256
|
+
height: calc(0.4rem * 6);
|
|
1257
|
+
width: calc(0.4rem * 12);
|
|
1258
|
+
border-radius: calc(infinity * 1px);
|
|
1259
|
+
border-style: var(--tw-border-style);
|
|
1260
|
+
border-width: 1px;
|
|
1261
|
+
border-color: var(--ga-color-border-action);
|
|
1262
|
+
background-color: var(--ga-color-surface-primary);
|
|
1263
|
+
}
|
|
1264
|
+
.ga-switch__check-icon {
|
|
1265
|
+
position: absolute;
|
|
1266
|
+
top: calc(0.4rem * 0.75);
|
|
1267
|
+
left: calc(0.4rem * 1.5);
|
|
1268
|
+
color: var(--ga-color-icon-on-primary);
|
|
1269
|
+
opacity: 0%;
|
|
1270
|
+
transition-property: opacity;
|
|
1271
|
+
transition-timing-function: var(--tw-ease, ease);
|
|
1272
|
+
transition-duration: var(--tw-duration, 0s);
|
|
1273
|
+
--tw-duration: 300ms;
|
|
1274
|
+
transition-duration: 300ms;
|
|
1275
|
+
}
|
|
1276
|
+
.ga-switch__slider {
|
|
1277
|
+
pointer-events: none;
|
|
1278
|
+
position: absolute;
|
|
1279
|
+
top: calc(0.4rem * 0.75);
|
|
1280
|
+
left: calc(0.4rem * 0.75);
|
|
1281
|
+
display: inline-block;
|
|
1282
|
+
height: calc(0.4rem * 4);
|
|
1283
|
+
width: calc(0.4rem * 4);
|
|
1284
|
+
border-radius: calc(infinity * 1px);
|
|
1285
|
+
background-color: var(--ga-color-surface-action);
|
|
1286
|
+
transition-property: transform, translate, scale, rotate;
|
|
1287
|
+
transition-timing-function: var(--tw-ease, ease);
|
|
1288
|
+
transition-duration: var(--tw-duration, 0s);
|
|
1289
|
+
--tw-duration: 300ms;
|
|
1290
|
+
transition-duration: 300ms;
|
|
1291
|
+
}
|
|
1292
|
+
.ga-switch__label {
|
|
1293
|
+
-webkit-user-select: none;
|
|
1294
|
+
user-select: none;
|
|
1295
|
+
}
|
|
1296
|
+
input {
|
|
1297
|
+
display: inline-block;
|
|
1298
|
+
height: calc(0.4rem * 6);
|
|
1299
|
+
width: calc(0.4rem * 12);
|
|
1300
|
+
cursor: pointer;
|
|
1301
|
+
border-radius: calc(infinity * 1px);
|
|
1302
|
+
opacity: 0%;
|
|
1303
|
+
&:hover ~ .ga-switch__marker {
|
|
1304
|
+
background-color: var(--ga-color-surface-action-hover-2);
|
|
1305
|
+
.ga-switch__slider {
|
|
1306
|
+
background-color: var(--ga-color-surface-action-hover);
|
|
1307
|
+
}
|
|
1308
|
+
}
|
|
1309
|
+
&:checked {
|
|
1310
|
+
~ .ga-switch__marker {
|
|
1311
|
+
border-color: var(--ga-color-border-action);
|
|
1312
|
+
background-color: var(--ga-color-surface-action);
|
|
1313
|
+
.ga-switch__slider {
|
|
1314
|
+
--tw-translate-x: calc(0.4rem * 6);
|
|
1315
|
+
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
1316
|
+
background-color: var(--ga-color-surface-primary);
|
|
1317
|
+
}
|
|
1318
|
+
.ga-switch__check-icon {
|
|
1319
|
+
opacity: 100%;
|
|
1320
|
+
}
|
|
1321
|
+
}
|
|
1322
|
+
&:hover:not(:disabled) ~ .ga-switch__marker {
|
|
1323
|
+
background-color: var(--ga-color-surface-action-hover);
|
|
1324
|
+
.ga-switch__slider {
|
|
1325
|
+
background-color: var(--ga-color-surface-action-hover-2);
|
|
1326
|
+
}
|
|
1327
|
+
}
|
|
1328
|
+
}
|
|
1329
|
+
&:focus-visible ~ .ga-switch__marker {
|
|
1330
|
+
outline-style: var(--tw-outline-style);
|
|
1331
|
+
outline-width: 2px;
|
|
1332
|
+
outline-offset: 2px;
|
|
1333
|
+
outline-color: var(--ga-color-border-focus);
|
|
1334
|
+
}
|
|
1335
|
+
&:disabled {
|
|
1336
|
+
cursor: not-allowed;
|
|
1337
|
+
~ .ga-switch__marker {
|
|
1338
|
+
border-color: var(--ga-color-border-disabled);
|
|
1339
|
+
background-color: var(--ga-color-surface-disabled);
|
|
1340
|
+
.ga-switch__check-icon {
|
|
1341
|
+
color: var(--ga-color-icon-on-disabled);
|
|
1342
|
+
}
|
|
1343
|
+
.ga-switch__slider {
|
|
1344
|
+
background-color: var(--ga-color-icon-on-disabled);
|
|
1345
|
+
}
|
|
1346
|
+
}
|
|
1347
|
+
}
|
|
1348
|
+
}
|
|
1349
|
+
&.ga-switch--invalid input ~ .ga-switch__marker {
|
|
1350
|
+
outline-style: var(--tw-outline-style);
|
|
1351
|
+
outline-width: 2px;
|
|
1352
|
+
outline-offset: 2px;
|
|
1353
|
+
outline-color: var(--ga-color-border-error);
|
|
1354
|
+
}
|
|
1355
|
+
}
|
|
1245
1356
|
.ga-tag {
|
|
1246
1357
|
box-sizing: content-box;
|
|
1247
1358
|
display: inline-flex;
|
|
@@ -1654,3 +1765,7 @@
|
|
|
1654
1765
|
inherits: false;
|
|
1655
1766
|
initial-value: 0;
|
|
1656
1767
|
}
|
|
1768
|
+
@property --tw-duration {
|
|
1769
|
+
syntax: "*";
|
|
1770
|
+
inherits: false;
|
|
1771
|
+
}
|
package/dist/all-no-reset.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! tailwindcss v4.0.
|
|
1
|
+
/*! tailwindcss v4.0.17 | MIT License | https://tailwindcss.com */
|
|
2
2
|
:root {
|
|
3
3
|
--ga-color-blue-10: #edf4fe;
|
|
4
4
|
--ga-color-blue-40: #93bbf9;
|
|
@@ -1242,6 +1242,117 @@
|
|
|
1242
1242
|
}
|
|
1243
1243
|
}
|
|
1244
1244
|
}
|
|
1245
|
+
.ga-switch {
|
|
1246
|
+
position: relative;
|
|
1247
|
+
display: inline-flex;
|
|
1248
|
+
align-items: center;
|
|
1249
|
+
gap: calc(0.25rem * 3);
|
|
1250
|
+
.ga-switch__marker {
|
|
1251
|
+
pointer-events: none;
|
|
1252
|
+
position: absolute;
|
|
1253
|
+
top: calc(0.25rem * 0);
|
|
1254
|
+
left: calc(0.25rem * 0);
|
|
1255
|
+
display: inline-block;
|
|
1256
|
+
height: calc(0.25rem * 6);
|
|
1257
|
+
width: calc(0.25rem * 12);
|
|
1258
|
+
border-radius: calc(infinity * 1px);
|
|
1259
|
+
border-style: var(--tw-border-style);
|
|
1260
|
+
border-width: 1px;
|
|
1261
|
+
border-color: var(--ga-color-border-action);
|
|
1262
|
+
background-color: var(--ga-color-surface-primary);
|
|
1263
|
+
}
|
|
1264
|
+
.ga-switch__check-icon {
|
|
1265
|
+
position: absolute;
|
|
1266
|
+
top: calc(0.25rem * 0.75);
|
|
1267
|
+
left: calc(0.25rem * 1.5);
|
|
1268
|
+
color: var(--ga-color-icon-on-primary);
|
|
1269
|
+
opacity: 0%;
|
|
1270
|
+
transition-property: opacity;
|
|
1271
|
+
transition-timing-function: var(--tw-ease, ease);
|
|
1272
|
+
transition-duration: var(--tw-duration, 0s);
|
|
1273
|
+
--tw-duration: 300ms;
|
|
1274
|
+
transition-duration: 300ms;
|
|
1275
|
+
}
|
|
1276
|
+
.ga-switch__slider {
|
|
1277
|
+
pointer-events: none;
|
|
1278
|
+
position: absolute;
|
|
1279
|
+
top: calc(0.25rem * 0.75);
|
|
1280
|
+
left: calc(0.25rem * 0.75);
|
|
1281
|
+
display: inline-block;
|
|
1282
|
+
height: calc(0.25rem * 4);
|
|
1283
|
+
width: calc(0.25rem * 4);
|
|
1284
|
+
border-radius: calc(infinity * 1px);
|
|
1285
|
+
background-color: var(--ga-color-surface-action);
|
|
1286
|
+
transition-property: transform, translate, scale, rotate;
|
|
1287
|
+
transition-timing-function: var(--tw-ease, ease);
|
|
1288
|
+
transition-duration: var(--tw-duration, 0s);
|
|
1289
|
+
--tw-duration: 300ms;
|
|
1290
|
+
transition-duration: 300ms;
|
|
1291
|
+
}
|
|
1292
|
+
.ga-switch__label {
|
|
1293
|
+
-webkit-user-select: none;
|
|
1294
|
+
user-select: none;
|
|
1295
|
+
}
|
|
1296
|
+
input {
|
|
1297
|
+
display: inline-block;
|
|
1298
|
+
height: calc(0.25rem * 6);
|
|
1299
|
+
width: calc(0.25rem * 12);
|
|
1300
|
+
cursor: pointer;
|
|
1301
|
+
border-radius: calc(infinity * 1px);
|
|
1302
|
+
opacity: 0%;
|
|
1303
|
+
&:hover ~ .ga-switch__marker {
|
|
1304
|
+
background-color: var(--ga-color-surface-action-hover-2);
|
|
1305
|
+
.ga-switch__slider {
|
|
1306
|
+
background-color: var(--ga-color-surface-action-hover);
|
|
1307
|
+
}
|
|
1308
|
+
}
|
|
1309
|
+
&:checked {
|
|
1310
|
+
~ .ga-switch__marker {
|
|
1311
|
+
border-color: var(--ga-color-border-action);
|
|
1312
|
+
background-color: var(--ga-color-surface-action);
|
|
1313
|
+
.ga-switch__slider {
|
|
1314
|
+
--tw-translate-x: calc(0.25rem * 6);
|
|
1315
|
+
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
1316
|
+
background-color: var(--ga-color-surface-primary);
|
|
1317
|
+
}
|
|
1318
|
+
.ga-switch__check-icon {
|
|
1319
|
+
opacity: 100%;
|
|
1320
|
+
}
|
|
1321
|
+
}
|
|
1322
|
+
&:hover:not(:disabled) ~ .ga-switch__marker {
|
|
1323
|
+
background-color: var(--ga-color-surface-action-hover);
|
|
1324
|
+
.ga-switch__slider {
|
|
1325
|
+
background-color: var(--ga-color-surface-action-hover-2);
|
|
1326
|
+
}
|
|
1327
|
+
}
|
|
1328
|
+
}
|
|
1329
|
+
&:focus-visible ~ .ga-switch__marker {
|
|
1330
|
+
outline-style: var(--tw-outline-style);
|
|
1331
|
+
outline-width: 2px;
|
|
1332
|
+
outline-offset: 2px;
|
|
1333
|
+
outline-color: var(--ga-color-border-focus);
|
|
1334
|
+
}
|
|
1335
|
+
&:disabled {
|
|
1336
|
+
cursor: not-allowed;
|
|
1337
|
+
~ .ga-switch__marker {
|
|
1338
|
+
border-color: var(--ga-color-border-disabled);
|
|
1339
|
+
background-color: var(--ga-color-surface-disabled);
|
|
1340
|
+
.ga-switch__check-icon {
|
|
1341
|
+
color: var(--ga-color-icon-on-disabled);
|
|
1342
|
+
}
|
|
1343
|
+
.ga-switch__slider {
|
|
1344
|
+
background-color: var(--ga-color-icon-on-disabled);
|
|
1345
|
+
}
|
|
1346
|
+
}
|
|
1347
|
+
}
|
|
1348
|
+
}
|
|
1349
|
+
&.ga-switch--invalid input ~ .ga-switch__marker {
|
|
1350
|
+
outline-style: var(--tw-outline-style);
|
|
1351
|
+
outline-width: 2px;
|
|
1352
|
+
outline-offset: 2px;
|
|
1353
|
+
outline-color: var(--ga-color-border-error);
|
|
1354
|
+
}
|
|
1355
|
+
}
|
|
1245
1356
|
.ga-tag {
|
|
1246
1357
|
box-sizing: content-box;
|
|
1247
1358
|
display: inline-flex;
|
|
@@ -1654,3 +1765,7 @@
|
|
|
1654
1765
|
inherits: false;
|
|
1655
1766
|
initial-value: 0;
|
|
1656
1767
|
}
|
|
1768
|
+
@property --tw-duration {
|
|
1769
|
+
syntax: "*";
|
|
1770
|
+
inherits: false;
|
|
1771
|
+
}
|
package/dist/all.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! tailwindcss v4.0.
|
|
1
|
+
/*! tailwindcss v4.0.17 | MIT License | https://tailwindcss.com */
|
|
2
2
|
:root {
|
|
3
3
|
--ga-color-blue-10: #edf4fe;
|
|
4
4
|
--ga-color-blue-40: #93bbf9;
|
|
@@ -171,7 +171,6 @@
|
|
|
171
171
|
@layer theme {
|
|
172
172
|
:root, :host {
|
|
173
173
|
--font-inter: Inter, ui-sans-serif, system-ui, sans-serif;
|
|
174
|
-
--default-font-family: var(--font-inter);
|
|
175
174
|
--spacing: 0.25rem;
|
|
176
175
|
}
|
|
177
176
|
}
|
|
@@ -186,14 +185,11 @@
|
|
|
186
185
|
line-height: 1.5;
|
|
187
186
|
-webkit-text-size-adjust: 100%;
|
|
188
187
|
tab-size: 4;
|
|
189
|
-
font-family: var(
|
|
190
|
-
font-feature-settings:
|
|
191
|
-
font-variation-settings:
|
|
188
|
+
font-family: var(--font-inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
|
|
189
|
+
font-feature-settings: normal;
|
|
190
|
+
font-variation-settings: normal;
|
|
192
191
|
-webkit-tap-highlight-color: transparent;
|
|
193
192
|
}
|
|
194
|
-
body {
|
|
195
|
-
line-height: inherit;
|
|
196
|
-
}
|
|
197
193
|
hr {
|
|
198
194
|
height: 0;
|
|
199
195
|
color: inherit;
|
|
@@ -216,9 +212,9 @@
|
|
|
216
212
|
font-weight: bolder;
|
|
217
213
|
}
|
|
218
214
|
code, kbd, samp, pre {
|
|
219
|
-
font-family:
|
|
220
|
-
font-feature-settings:
|
|
221
|
-
font-variation-settings:
|
|
215
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
|
216
|
+
font-feature-settings: normal;
|
|
217
|
+
font-variation-settings: normal;
|
|
222
218
|
font-size: 1em;
|
|
223
219
|
}
|
|
224
220
|
small {
|
|
@@ -282,7 +278,11 @@
|
|
|
282
278
|
}
|
|
283
279
|
::placeholder {
|
|
284
280
|
opacity: 1;
|
|
285
|
-
|
|
281
|
+
}
|
|
282
|
+
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
|
|
283
|
+
::placeholder {
|
|
284
|
+
color: color-mix(in oklab, currentColor 50%, transparent);
|
|
285
|
+
}
|
|
286
286
|
}
|
|
287
287
|
textarea {
|
|
288
288
|
resize: vertical;
|
|
@@ -1385,6 +1385,117 @@
|
|
|
1385
1385
|
}
|
|
1386
1386
|
}
|
|
1387
1387
|
}
|
|
1388
|
+
.ga-switch {
|
|
1389
|
+
position: relative;
|
|
1390
|
+
display: inline-flex;
|
|
1391
|
+
align-items: center;
|
|
1392
|
+
gap: calc(0.25rem * 3);
|
|
1393
|
+
.ga-switch__marker {
|
|
1394
|
+
pointer-events: none;
|
|
1395
|
+
position: absolute;
|
|
1396
|
+
top: calc(0.25rem * 0);
|
|
1397
|
+
left: calc(0.25rem * 0);
|
|
1398
|
+
display: inline-block;
|
|
1399
|
+
height: calc(0.25rem * 6);
|
|
1400
|
+
width: calc(0.25rem * 12);
|
|
1401
|
+
border-radius: calc(infinity * 1px);
|
|
1402
|
+
border-style: var(--tw-border-style);
|
|
1403
|
+
border-width: 1px;
|
|
1404
|
+
border-color: var(--ga-color-border-action);
|
|
1405
|
+
background-color: var(--ga-color-surface-primary);
|
|
1406
|
+
}
|
|
1407
|
+
.ga-switch__check-icon {
|
|
1408
|
+
position: absolute;
|
|
1409
|
+
top: calc(0.25rem * 0.75);
|
|
1410
|
+
left: calc(0.25rem * 1.5);
|
|
1411
|
+
color: var(--ga-color-icon-on-primary);
|
|
1412
|
+
opacity: 0%;
|
|
1413
|
+
transition-property: opacity;
|
|
1414
|
+
transition-timing-function: var(--tw-ease, ease);
|
|
1415
|
+
transition-duration: var(--tw-duration, 0s);
|
|
1416
|
+
--tw-duration: 300ms;
|
|
1417
|
+
transition-duration: 300ms;
|
|
1418
|
+
}
|
|
1419
|
+
.ga-switch__slider {
|
|
1420
|
+
pointer-events: none;
|
|
1421
|
+
position: absolute;
|
|
1422
|
+
top: calc(0.25rem * 0.75);
|
|
1423
|
+
left: calc(0.25rem * 0.75);
|
|
1424
|
+
display: inline-block;
|
|
1425
|
+
height: calc(0.25rem * 4);
|
|
1426
|
+
width: calc(0.25rem * 4);
|
|
1427
|
+
border-radius: calc(infinity * 1px);
|
|
1428
|
+
background-color: var(--ga-color-surface-action);
|
|
1429
|
+
transition-property: transform, translate, scale, rotate;
|
|
1430
|
+
transition-timing-function: var(--tw-ease, ease);
|
|
1431
|
+
transition-duration: var(--tw-duration, 0s);
|
|
1432
|
+
--tw-duration: 300ms;
|
|
1433
|
+
transition-duration: 300ms;
|
|
1434
|
+
}
|
|
1435
|
+
.ga-switch__label {
|
|
1436
|
+
-webkit-user-select: none;
|
|
1437
|
+
user-select: none;
|
|
1438
|
+
}
|
|
1439
|
+
input {
|
|
1440
|
+
display: inline-block;
|
|
1441
|
+
height: calc(0.25rem * 6);
|
|
1442
|
+
width: calc(0.25rem * 12);
|
|
1443
|
+
cursor: pointer;
|
|
1444
|
+
border-radius: calc(infinity * 1px);
|
|
1445
|
+
opacity: 0%;
|
|
1446
|
+
&:hover ~ .ga-switch__marker {
|
|
1447
|
+
background-color: var(--ga-color-surface-action-hover-2);
|
|
1448
|
+
.ga-switch__slider {
|
|
1449
|
+
background-color: var(--ga-color-surface-action-hover);
|
|
1450
|
+
}
|
|
1451
|
+
}
|
|
1452
|
+
&:checked {
|
|
1453
|
+
~ .ga-switch__marker {
|
|
1454
|
+
border-color: var(--ga-color-border-action);
|
|
1455
|
+
background-color: var(--ga-color-surface-action);
|
|
1456
|
+
.ga-switch__slider {
|
|
1457
|
+
--tw-translate-x: calc(0.25rem * 6);
|
|
1458
|
+
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
1459
|
+
background-color: var(--ga-color-surface-primary);
|
|
1460
|
+
}
|
|
1461
|
+
.ga-switch__check-icon {
|
|
1462
|
+
opacity: 100%;
|
|
1463
|
+
}
|
|
1464
|
+
}
|
|
1465
|
+
&:hover:not(:disabled) ~ .ga-switch__marker {
|
|
1466
|
+
background-color: var(--ga-color-surface-action-hover);
|
|
1467
|
+
.ga-switch__slider {
|
|
1468
|
+
background-color: var(--ga-color-surface-action-hover-2);
|
|
1469
|
+
}
|
|
1470
|
+
}
|
|
1471
|
+
}
|
|
1472
|
+
&:focus-visible ~ .ga-switch__marker {
|
|
1473
|
+
outline-style: var(--tw-outline-style);
|
|
1474
|
+
outline-width: 2px;
|
|
1475
|
+
outline-offset: 2px;
|
|
1476
|
+
outline-color: var(--ga-color-border-focus);
|
|
1477
|
+
}
|
|
1478
|
+
&:disabled {
|
|
1479
|
+
cursor: not-allowed;
|
|
1480
|
+
~ .ga-switch__marker {
|
|
1481
|
+
border-color: var(--ga-color-border-disabled);
|
|
1482
|
+
background-color: var(--ga-color-surface-disabled);
|
|
1483
|
+
.ga-switch__check-icon {
|
|
1484
|
+
color: var(--ga-color-icon-on-disabled);
|
|
1485
|
+
}
|
|
1486
|
+
.ga-switch__slider {
|
|
1487
|
+
background-color: var(--ga-color-icon-on-disabled);
|
|
1488
|
+
}
|
|
1489
|
+
}
|
|
1490
|
+
}
|
|
1491
|
+
}
|
|
1492
|
+
&.ga-switch--invalid input ~ .ga-switch__marker {
|
|
1493
|
+
outline-style: var(--tw-outline-style);
|
|
1494
|
+
outline-width: 2px;
|
|
1495
|
+
outline-offset: 2px;
|
|
1496
|
+
outline-color: var(--ga-color-border-error);
|
|
1497
|
+
}
|
|
1498
|
+
}
|
|
1388
1499
|
.ga-tag {
|
|
1389
1500
|
box-sizing: content-box;
|
|
1390
1501
|
display: inline-flex;
|
|
@@ -1797,3 +1908,7 @@
|
|
|
1797
1908
|
inherits: false;
|
|
1798
1909
|
initial-value: 0;
|
|
1799
1910
|
}
|
|
1911
|
+
@property --tw-duration {
|
|
1912
|
+
syntax: "*";
|
|
1913
|
+
inherits: false;
|
|
1914
|
+
}
|
package/dist/base.css
CHANGED
package/dist/components/card.css
CHANGED
package/dist/components/menu.css
CHANGED
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
/*! tailwindcss v4.0.17 | MIT License | https://tailwindcss.com */
|
|
2
|
+
.ga-switch {
|
|
3
|
+
position: relative;
|
|
4
|
+
display: inline-flex;
|
|
5
|
+
align-items: center;
|
|
6
|
+
gap: calc(0.25rem * 3);
|
|
7
|
+
.ga-switch__marker {
|
|
8
|
+
pointer-events: none;
|
|
9
|
+
position: absolute;
|
|
10
|
+
top: calc(0.25rem * 0);
|
|
11
|
+
left: calc(0.25rem * 0);
|
|
12
|
+
display: inline-block;
|
|
13
|
+
height: calc(0.25rem * 6);
|
|
14
|
+
width: calc(0.25rem * 12);
|
|
15
|
+
border-radius: calc(infinity * 1px);
|
|
16
|
+
border-style: var(--tw-border-style);
|
|
17
|
+
border-width: 1px;
|
|
18
|
+
border-color: var(--ga-color-border-action);
|
|
19
|
+
background-color: var(--ga-color-surface-primary);
|
|
20
|
+
}
|
|
21
|
+
.ga-switch__check-icon {
|
|
22
|
+
position: absolute;
|
|
23
|
+
top: calc(0.25rem * 0.75);
|
|
24
|
+
left: calc(0.25rem * 1.5);
|
|
25
|
+
color: var(--ga-color-icon-on-primary);
|
|
26
|
+
opacity: 0%;
|
|
27
|
+
transition-property: opacity;
|
|
28
|
+
transition-timing-function: var(--tw-ease, ease);
|
|
29
|
+
transition-duration: var(--tw-duration, 0s);
|
|
30
|
+
--tw-duration: 300ms;
|
|
31
|
+
transition-duration: 300ms;
|
|
32
|
+
}
|
|
33
|
+
.ga-switch__slider {
|
|
34
|
+
pointer-events: none;
|
|
35
|
+
position: absolute;
|
|
36
|
+
top: calc(0.25rem * 0.75);
|
|
37
|
+
left: calc(0.25rem * 0.75);
|
|
38
|
+
display: inline-block;
|
|
39
|
+
height: calc(0.25rem * 4);
|
|
40
|
+
width: calc(0.25rem * 4);
|
|
41
|
+
border-radius: calc(infinity * 1px);
|
|
42
|
+
background-color: var(--ga-color-surface-action);
|
|
43
|
+
transition-property: transform, translate, scale, rotate;
|
|
44
|
+
transition-timing-function: var(--tw-ease, ease);
|
|
45
|
+
transition-duration: var(--tw-duration, 0s);
|
|
46
|
+
--tw-duration: 300ms;
|
|
47
|
+
transition-duration: 300ms;
|
|
48
|
+
}
|
|
49
|
+
.ga-switch__label {
|
|
50
|
+
-webkit-user-select: none;
|
|
51
|
+
user-select: none;
|
|
52
|
+
}
|
|
53
|
+
input {
|
|
54
|
+
display: inline-block;
|
|
55
|
+
height: calc(0.25rem * 6);
|
|
56
|
+
width: calc(0.25rem * 12);
|
|
57
|
+
cursor: pointer;
|
|
58
|
+
border-radius: calc(infinity * 1px);
|
|
59
|
+
opacity: 0%;
|
|
60
|
+
&:hover ~ .ga-switch__marker {
|
|
61
|
+
background-color: var(--ga-color-surface-action-hover-2);
|
|
62
|
+
.ga-switch__slider {
|
|
63
|
+
background-color: var(--ga-color-surface-action-hover);
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
&:checked {
|
|
67
|
+
~ .ga-switch__marker {
|
|
68
|
+
border-color: var(--ga-color-border-action);
|
|
69
|
+
background-color: var(--ga-color-surface-action);
|
|
70
|
+
.ga-switch__slider {
|
|
71
|
+
--tw-translate-x: calc(0.25rem * 6);
|
|
72
|
+
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
73
|
+
background-color: var(--ga-color-surface-primary);
|
|
74
|
+
}
|
|
75
|
+
.ga-switch__check-icon {
|
|
76
|
+
opacity: 100%;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
&:hover:not(:disabled) ~ .ga-switch__marker {
|
|
80
|
+
background-color: var(--ga-color-surface-action-hover);
|
|
81
|
+
.ga-switch__slider {
|
|
82
|
+
background-color: var(--ga-color-surface-action-hover-2);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
&:focus-visible ~ .ga-switch__marker {
|
|
87
|
+
outline-style: var(--tw-outline-style);
|
|
88
|
+
outline-width: 2px;
|
|
89
|
+
outline-offset: 2px;
|
|
90
|
+
outline-color: var(--ga-color-border-focus);
|
|
91
|
+
}
|
|
92
|
+
&:disabled {
|
|
93
|
+
cursor: not-allowed;
|
|
94
|
+
~ .ga-switch__marker {
|
|
95
|
+
border-color: var(--ga-color-border-disabled);
|
|
96
|
+
background-color: var(--ga-color-surface-disabled);
|
|
97
|
+
.ga-switch__check-icon {
|
|
98
|
+
color: var(--ga-color-icon-on-disabled);
|
|
99
|
+
}
|
|
100
|
+
.ga-switch__slider {
|
|
101
|
+
background-color: var(--ga-color-icon-on-disabled);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
&.ga-switch--invalid input ~ .ga-switch__marker {
|
|
107
|
+
outline-style: var(--tw-outline-style);
|
|
108
|
+
outline-width: 2px;
|
|
109
|
+
outline-offset: 2px;
|
|
110
|
+
outline-color: var(--ga-color-border-error);
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
@property --tw-border-style {
|
|
114
|
+
syntax: "*";
|
|
115
|
+
inherits: false;
|
|
116
|
+
initial-value: solid;
|
|
117
|
+
}
|
|
118
|
+
@property --tw-duration {
|
|
119
|
+
syntax: "*";
|
|
120
|
+
inherits: false;
|
|
121
|
+
}
|
|
122
|
+
@property --tw-translate-x {
|
|
123
|
+
syntax: "*";
|
|
124
|
+
inherits: false;
|
|
125
|
+
initial-value: 0;
|
|
126
|
+
}
|
|
127
|
+
@property --tw-translate-y {
|
|
128
|
+
syntax: "*";
|
|
129
|
+
inherits: false;
|
|
130
|
+
initial-value: 0;
|
|
131
|
+
}
|
|
132
|
+
@property --tw-translate-z {
|
|
133
|
+
syntax: "*";
|
|
134
|
+
inherits: false;
|
|
135
|
+
initial-value: 0;
|
|
136
|
+
}
|
|
137
|
+
@property --tw-outline-style {
|
|
138
|
+
syntax: "*";
|
|
139
|
+
inherits: false;
|
|
140
|
+
initial-value: solid;
|
|
141
|
+
}
|
package/dist/components/tag.css
CHANGED
package/dist/components.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! tailwindcss v4.0.
|
|
1
|
+
/*! tailwindcss v4.0.17 | MIT License | https://tailwindcss.com */
|
|
2
2
|
.ga-avatar {
|
|
3
3
|
display: inline-flex;
|
|
4
4
|
height: calc(0.25rem * 10);
|
|
@@ -1060,6 +1060,117 @@
|
|
|
1060
1060
|
}
|
|
1061
1061
|
}
|
|
1062
1062
|
}
|
|
1063
|
+
.ga-switch {
|
|
1064
|
+
position: relative;
|
|
1065
|
+
display: inline-flex;
|
|
1066
|
+
align-items: center;
|
|
1067
|
+
gap: calc(0.25rem * 3);
|
|
1068
|
+
.ga-switch__marker {
|
|
1069
|
+
pointer-events: none;
|
|
1070
|
+
position: absolute;
|
|
1071
|
+
top: calc(0.25rem * 0);
|
|
1072
|
+
left: calc(0.25rem * 0);
|
|
1073
|
+
display: inline-block;
|
|
1074
|
+
height: calc(0.25rem * 6);
|
|
1075
|
+
width: calc(0.25rem * 12);
|
|
1076
|
+
border-radius: calc(infinity * 1px);
|
|
1077
|
+
border-style: var(--tw-border-style);
|
|
1078
|
+
border-width: 1px;
|
|
1079
|
+
border-color: var(--ga-color-border-action);
|
|
1080
|
+
background-color: var(--ga-color-surface-primary);
|
|
1081
|
+
}
|
|
1082
|
+
.ga-switch__check-icon {
|
|
1083
|
+
position: absolute;
|
|
1084
|
+
top: calc(0.25rem * 0.75);
|
|
1085
|
+
left: calc(0.25rem * 1.5);
|
|
1086
|
+
color: var(--ga-color-icon-on-primary);
|
|
1087
|
+
opacity: 0%;
|
|
1088
|
+
transition-property: opacity;
|
|
1089
|
+
transition-timing-function: var(--tw-ease, ease);
|
|
1090
|
+
transition-duration: var(--tw-duration, 0s);
|
|
1091
|
+
--tw-duration: 300ms;
|
|
1092
|
+
transition-duration: 300ms;
|
|
1093
|
+
}
|
|
1094
|
+
.ga-switch__slider {
|
|
1095
|
+
pointer-events: none;
|
|
1096
|
+
position: absolute;
|
|
1097
|
+
top: calc(0.25rem * 0.75);
|
|
1098
|
+
left: calc(0.25rem * 0.75);
|
|
1099
|
+
display: inline-block;
|
|
1100
|
+
height: calc(0.25rem * 4);
|
|
1101
|
+
width: calc(0.25rem * 4);
|
|
1102
|
+
border-radius: calc(infinity * 1px);
|
|
1103
|
+
background-color: var(--ga-color-surface-action);
|
|
1104
|
+
transition-property: transform, translate, scale, rotate;
|
|
1105
|
+
transition-timing-function: var(--tw-ease, ease);
|
|
1106
|
+
transition-duration: var(--tw-duration, 0s);
|
|
1107
|
+
--tw-duration: 300ms;
|
|
1108
|
+
transition-duration: 300ms;
|
|
1109
|
+
}
|
|
1110
|
+
.ga-switch__label {
|
|
1111
|
+
-webkit-user-select: none;
|
|
1112
|
+
user-select: none;
|
|
1113
|
+
}
|
|
1114
|
+
input {
|
|
1115
|
+
display: inline-block;
|
|
1116
|
+
height: calc(0.25rem * 6);
|
|
1117
|
+
width: calc(0.25rem * 12);
|
|
1118
|
+
cursor: pointer;
|
|
1119
|
+
border-radius: calc(infinity * 1px);
|
|
1120
|
+
opacity: 0%;
|
|
1121
|
+
&:hover ~ .ga-switch__marker {
|
|
1122
|
+
background-color: var(--ga-color-surface-action-hover-2);
|
|
1123
|
+
.ga-switch__slider {
|
|
1124
|
+
background-color: var(--ga-color-surface-action-hover);
|
|
1125
|
+
}
|
|
1126
|
+
}
|
|
1127
|
+
&:checked {
|
|
1128
|
+
~ .ga-switch__marker {
|
|
1129
|
+
border-color: var(--ga-color-border-action);
|
|
1130
|
+
background-color: var(--ga-color-surface-action);
|
|
1131
|
+
.ga-switch__slider {
|
|
1132
|
+
--tw-translate-x: calc(0.25rem * 6);
|
|
1133
|
+
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
1134
|
+
background-color: var(--ga-color-surface-primary);
|
|
1135
|
+
}
|
|
1136
|
+
.ga-switch__check-icon {
|
|
1137
|
+
opacity: 100%;
|
|
1138
|
+
}
|
|
1139
|
+
}
|
|
1140
|
+
&:hover:not(:disabled) ~ .ga-switch__marker {
|
|
1141
|
+
background-color: var(--ga-color-surface-action-hover);
|
|
1142
|
+
.ga-switch__slider {
|
|
1143
|
+
background-color: var(--ga-color-surface-action-hover-2);
|
|
1144
|
+
}
|
|
1145
|
+
}
|
|
1146
|
+
}
|
|
1147
|
+
&:focus-visible ~ .ga-switch__marker {
|
|
1148
|
+
outline-style: var(--tw-outline-style);
|
|
1149
|
+
outline-width: 2px;
|
|
1150
|
+
outline-offset: 2px;
|
|
1151
|
+
outline-color: var(--ga-color-border-focus);
|
|
1152
|
+
}
|
|
1153
|
+
&:disabled {
|
|
1154
|
+
cursor: not-allowed;
|
|
1155
|
+
~ .ga-switch__marker {
|
|
1156
|
+
border-color: var(--ga-color-border-disabled);
|
|
1157
|
+
background-color: var(--ga-color-surface-disabled);
|
|
1158
|
+
.ga-switch__check-icon {
|
|
1159
|
+
color: var(--ga-color-icon-on-disabled);
|
|
1160
|
+
}
|
|
1161
|
+
.ga-switch__slider {
|
|
1162
|
+
background-color: var(--ga-color-icon-on-disabled);
|
|
1163
|
+
}
|
|
1164
|
+
}
|
|
1165
|
+
}
|
|
1166
|
+
}
|
|
1167
|
+
&.ga-switch--invalid input ~ .ga-switch__marker {
|
|
1168
|
+
outline-style: var(--tw-outline-style);
|
|
1169
|
+
outline-width: 2px;
|
|
1170
|
+
outline-offset: 2px;
|
|
1171
|
+
outline-color: var(--ga-color-border-error);
|
|
1172
|
+
}
|
|
1173
|
+
}
|
|
1063
1174
|
.ga-tag {
|
|
1064
1175
|
box-sizing: content-box;
|
|
1065
1176
|
display: inline-flex;
|
|
@@ -1471,3 +1582,7 @@
|
|
|
1471
1582
|
inherits: false;
|
|
1472
1583
|
initial-value: 0;
|
|
1473
1584
|
}
|
|
1585
|
+
@property --tw-duration {
|
|
1586
|
+
syntax: "*";
|
|
1587
|
+
inherits: false;
|
|
1588
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vsn-ux/gaia-styles",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"dev": "storybook dev -p 6006",
|
|
@@ -21,40 +21,40 @@
|
|
|
21
21
|
"./*": "./dist/*"
|
|
22
22
|
},
|
|
23
23
|
"devDependencies": {
|
|
24
|
-
"@commitlint/cli": "^19.
|
|
25
|
-
"@commitlint/config-conventional": "^19.
|
|
26
|
-
"@storybook/addon-essentials": "^8.
|
|
27
|
-
"@storybook/addon-interactions": "^8.
|
|
28
|
-
"@storybook/addon-onboarding": "^8.
|
|
29
|
-
"@storybook/blocks": "^8.
|
|
30
|
-
"@storybook/react": "^8.
|
|
31
|
-
"@storybook/react-vite": "^8.
|
|
32
|
-
"@storybook/test": "^8.
|
|
33
|
-
"@tailwindcss/cli": "^4.0.
|
|
34
|
-
"@tailwindcss/postcss": "^4.0.
|
|
35
|
-
"@tailwindcss/vite": "^4.0.
|
|
36
|
-
"@terrazzo/cli": "^0.
|
|
37
|
-
"@terrazzo/plugin-css": "^0.
|
|
38
|
-
"@terrazzo/plugin-js": "^0.
|
|
39
|
-
"@types/react": "^18.3.
|
|
24
|
+
"@commitlint/cli": "^19.8.0",
|
|
25
|
+
"@commitlint/config-conventional": "^19.8.0",
|
|
26
|
+
"@storybook/addon-essentials": "^8.6.9",
|
|
27
|
+
"@storybook/addon-interactions": "^8.6.9",
|
|
28
|
+
"@storybook/addon-onboarding": "^8.6.9",
|
|
29
|
+
"@storybook/blocks": "^8.6.9",
|
|
30
|
+
"@storybook/react": "^8.6.9",
|
|
31
|
+
"@storybook/react-vite": "^8.6.9",
|
|
32
|
+
"@storybook/test": "^8.6.9",
|
|
33
|
+
"@tailwindcss/cli": "^4.0.17",
|
|
34
|
+
"@tailwindcss/postcss": "^4.0.17",
|
|
35
|
+
"@tailwindcss/vite": "^4.0.17",
|
|
36
|
+
"@terrazzo/cli": "^0.6.3",
|
|
37
|
+
"@terrazzo/plugin-css": "^0.6.0",
|
|
38
|
+
"@terrazzo/plugin-js": "^0.6.0",
|
|
39
|
+
"@types/react": "^18.3.20",
|
|
40
40
|
"@types/react-dom": "^18.3.5",
|
|
41
41
|
"@vitejs/plugin-react": "^4.3.4",
|
|
42
42
|
"chokidar": "^4.0.3",
|
|
43
43
|
"glob": "^11.0.1",
|
|
44
|
-
"globals": "^15.
|
|
44
|
+
"globals": "^15.15.0",
|
|
45
45
|
"husky": "^9.1.7",
|
|
46
46
|
"lucide-react": "^0.473.0",
|
|
47
|
-
"postcss": "^8.
|
|
48
|
-
"prettier": "^3.
|
|
47
|
+
"postcss": "^8.5.3",
|
|
48
|
+
"prettier": "^3.5.3",
|
|
49
49
|
"prettier-plugin-tailwindcss": "^0.6.11",
|
|
50
50
|
"react": "^18.3.1",
|
|
51
51
|
"react-dom": "^18.3.1",
|
|
52
|
-
"semantic-release": "^24.2.
|
|
53
|
-
"storybook": "^8.
|
|
54
|
-
"tailwindcss": "^4.0.
|
|
55
|
-
"typescript": "~5.6.
|
|
56
|
-
"typescript-eslint": "^8.
|
|
57
|
-
"vite": "^6.
|
|
52
|
+
"semantic-release": "^24.2.3",
|
|
53
|
+
"storybook": "^8.6.9",
|
|
54
|
+
"tailwindcss": "^4.0.17",
|
|
55
|
+
"typescript": "~5.6.3",
|
|
56
|
+
"typescript-eslint": "^8.28.0",
|
|
57
|
+
"vite": "^6.2.3"
|
|
58
58
|
},
|
|
59
59
|
"files": [
|
|
60
60
|
"dist/",
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
.ga-switch {
|
|
2
|
+
@apply relative inline-flex items-center gap-3;
|
|
3
|
+
|
|
4
|
+
.ga-switch__marker {
|
|
5
|
+
@apply pointer-events-none absolute top-0 left-0 inline-block h-6 w-12 rounded-full border border-(--ga-color-border-action) bg-(--ga-color-surface-primary);
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.ga-switch__check-icon {
|
|
9
|
+
@apply absolute top-0.75 left-1.5 text-(--ga-color-icon-on-primary) opacity-0 transition-opacity duration-300;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.ga-switch__slider {
|
|
13
|
+
@apply pointer-events-none absolute top-0.75 left-0.75 inline-block h-4 w-4 rounded-full bg-(--ga-color-surface-action) transition-transform duration-300;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.ga-switch__label {
|
|
17
|
+
@apply select-none;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
input {
|
|
21
|
+
@apply inline-block h-6 w-12 cursor-pointer rounded-full opacity-0;
|
|
22
|
+
|
|
23
|
+
&:hover ~ .ga-switch__marker {
|
|
24
|
+
@apply bg-(--ga-color-surface-action-hover-2);
|
|
25
|
+
|
|
26
|
+
.ga-switch__slider {
|
|
27
|
+
@apply bg-(--ga-color-surface-action-hover);
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&:checked {
|
|
32
|
+
~ .ga-switch__marker {
|
|
33
|
+
@apply border-(--ga-color-border-action) bg-(--ga-color-surface-action);
|
|
34
|
+
|
|
35
|
+
.ga-switch__slider {
|
|
36
|
+
@apply translate-x-6 bg-(--ga-color-surface-primary);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.ga-switch__check-icon {
|
|
40
|
+
@apply opacity-100;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&:hover:not(:disabled) ~ .ga-switch__marker {
|
|
45
|
+
@apply bg-(--ga-color-surface-action-hover);
|
|
46
|
+
|
|
47
|
+
.ga-switch__slider {
|
|
48
|
+
@apply bg-(--ga-color-surface-action-hover-2);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
&:focus-visible ~ .ga-switch__marker {
|
|
54
|
+
@apply outline-2 outline-offset-2 outline-(--ga-color-border-focus);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
&:disabled {
|
|
58
|
+
@apply cursor-not-allowed;
|
|
59
|
+
|
|
60
|
+
~ .ga-switch__marker {
|
|
61
|
+
@apply border-(--ga-color-border-disabled) bg-(--ga-color-surface-disabled);
|
|
62
|
+
|
|
63
|
+
.ga-switch__check-icon {
|
|
64
|
+
@apply text-(--ga-color-icon-on-disabled);
|
|
65
|
+
}
|
|
66
|
+
.ga-switch__slider {
|
|
67
|
+
@apply bg-(--ga-color-icon-on-disabled);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
&.ga-switch--invalid input ~ .ga-switch__marker {
|
|
74
|
+
@apply outline-2 outline-offset-2 outline-(--ga-color-border-error);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
@import './components/radio.css';
|
|
12
12
|
@import './components/segmented-control.css';
|
|
13
13
|
@import './components/select.css';
|
|
14
|
+
@import './components/switch.css';
|
|
14
15
|
@import './components/tag.css';
|
|
15
16
|
@import './components/text-area.css';
|
|
16
17
|
@import './components/tooltip.css';
|