vanilla-jui 1.3.10 → 1.3.11

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 (32) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/index.umd.js +1 -1
  3. package/dist/style.css +1 -1
  4. package/package.json +1 -1
  5. package/src/components/modal.js +9 -9
  6. package/src/css/accordion.css +2 -2
  7. package/src/css/breadcrumb.css +1 -1
  8. package/src/css/button.css +5 -5
  9. package/src/css/card.css +6 -6
  10. package/src/css/color.css +51 -64
  11. package/src/css/color_p3.css +52 -64
  12. package/src/css/drop.css +1 -1
  13. package/src/css/flow.css +1 -1
  14. package/src/css/form.css +20 -20
  15. package/src/css/gradient.css +17 -4
  16. package/src/css/index.css +1 -1
  17. package/src/css/layout.css +1 -1
  18. package/src/css/menu.css +26 -26
  19. package/src/css/modal.css +10 -27
  20. package/src/css/offcanvas.css +2 -2
  21. package/src/css/pagination.css +1 -1
  22. package/src/css/popup.css +2 -2
  23. package/src/css/swiper.css +12 -12
  24. package/src/css/tabs.css +2 -2
  25. package/src/css/tag.css +3 -4
  26. package/src/css/theme-palette.css +6 -6
  27. package/src/css/tip.css +1 -1
  28. package/src/css/toast.css +8 -8
  29. package/src/css/tokens.css +197 -226
  30. package/src/css/toolbar.css +3 -3
  31. package/src/css/tooltip.css +1 -1
  32. package/src/css/toast.min.css +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vanilla-jui",
3
- "version": "1.3.10",
3
+ "version": "1.3.11",
4
4
  "private": false,
5
5
  "description": "A lightweight vanilla JavaScript UI plugin library.",
6
6
  "keywords": [
package/src/components/modal.js CHANGED
@@ -336,7 +336,7 @@ export class Modal extends Component {
336
336
  this.state.showClose
337
337
  ? jsx('button', {
338
338
  type: 'button',
339
- className: 'is-reset modal-close',
339
+ className: 'modal-close j-button is-icon is-ghost is-sm',
340
340
  'data-action': 'close',
341
341
  'aria-label': 'close',
342
342
  children: icon('close'),
@@ -570,13 +570,13 @@ export class Modal extends Component {
570
570
  this.cache.baseStyle = element.getAttribute('style') || '';
571
571
  }
572
572
 
573
- normalizeIcon(element) {
574
- if (!(element instanceof Element)) return;
575
- const iconElement = q('.modal-close', element);
576
- if (iconElement) {
577
- iconElement.style.transform = `translateX(${iconElement.clientHeight / 3}px)`;
578
- }
579
- }
573
+ // normalizeIcon(element) {
574
+ // if (!(element instanceof Element)) return;
575
+ // const iconElement = q('.modal-close', element);
576
+ // if (iconElement) {
577
+ // iconElement.style.transform = `translateX(${iconElement.clientHeight / 3}px)`;
578
+ // }
579
+ // }
580
580
 
581
581
  bindReactiveVisibility() {
582
582
  this.cleanup.visibility = createRoot((dispose) => {
@@ -617,7 +617,7 @@ export class Modal extends Component {
617
617
  this.lockScroll();
618
618
  this.runtime.visibleApplied = true;
619
619
 
620
- this.normalizeIcon(this.dom.modal);
620
+ // this.normalizeIcon(this.dom.modal);
621
621
  this.bindEvents(this.root);
622
622
  this.focusFirst();
623
623
 
package/src/css/accordion.css CHANGED
@@ -9,7 +9,7 @@
9
9
  align-items: center;
10
10
  cursor: pointer;
11
11
  padding: var(--accordion-header-padding,
12
- calc(var(--space) * 2) calc(var(--space) * 3));
12
+ var(--s2) var(--s3));
13
13
  margin: var(--accordion-header-margin, 0);
14
14
  border-bottom: var(--accordion-border);
15
15
  font-size: var(--accordion-header-font-size, var(--font-size-md));
@@ -61,7 +61,7 @@
61
61
  .j-accordion .accordion-panel .panel-content {
62
62
  margin: var(--accordion-panel-content-margin, 0);
63
63
  padding: var(--accordion-panel-content-padding,
64
- 0 calc(var(--space) * 3) calc(var(--space) * 2));
64
+ 0 var(--s3) var(--s2));
65
65
  border-bottom: var(--accordion-border);
66
66
  font-size: var(--accordion-font-size, var(--font-size-md));
67
67
  }
package/src/css/breadcrumb.css CHANGED
@@ -74,7 +74,7 @@
74
74
  justify-content: center;
75
75
  gap: var(--space);
76
76
  color: var(--breadcrumb-link-color, var(--tone-text));
77
- padding: var(--breadcrumb-item-padding-vertical, 0) var(--breadcrumb-item-padding-horizontal, calc(var(--space) * 2));
77
+ padding: var(--breadcrumb-item-padding-vertical, 0) var(--breadcrumb-item-padding-horizontal, var(--s2));
78
78
  text-decoration: none;
79
79
  }
80
80
 
package/src/css/button.css CHANGED
@@ -4,7 +4,7 @@
4
4
  justify-content: center;
5
5
  align-items: center;
6
6
  flex-wrap: nowrap;
7
- gap: var(--button-gap, calc(var(--space) * 1) calc(var(--space) * 1.5));
7
+ gap: var(--button-gap, var(--space) calc(var(--space) * 1.5));
8
8
  position: relative;
9
9
  white-space: nowrap;
10
10
  font-weight: var(--button-font-weight, var(--font-medium));
@@ -12,7 +12,7 @@
12
12
  height: var(--button-height, var(--el-height-md));
13
13
  line-height: var(--button-line-height, var(--line-height-self));
14
14
  background-color: var(--button-background, transparent);
15
- padding: var(--button-padding, 0 calc(var(--space) * 3));
15
+ padding: var(--button-padding, 0 var(--s3));
16
16
  border-width: var(--button-border-width, 1px);
17
17
  border-style: var(--button-border-style, solid);
18
18
  border-color: var(--button-border-color, transparent);
@@ -42,13 +42,13 @@
42
42
  .j-button.is-sm {
43
43
  font-size: var(--font-size-sm);
44
44
  height: var(--button-height-sm, var(--el-height-sm));
45
- padding: var(--button-padding-sm, calc(var(--space) * 1) calc(var(--space) * 2));
45
+ padding: var(--button-padding-sm, var(--space) var(--s2));
46
46
  }
47
47
 
48
48
  .j-button.is-lg {
49
49
  font-size: var(--font-size-lg);
50
50
  height: var(--button-height-lg, var(--el-height-lg));
51
- padding: var(--button-padding-lg, calc(var(--space) * 3) calc(var(--space) * 4));
51
+ padding: var(--button-padding-lg, var(--s3) var(--s4));
52
52
  }
53
53
 
54
54
  /* variant */
@@ -136,7 +136,7 @@
136
136
 
137
137
  /* group */
138
138
  .j-button-group {
139
- --button-padding: 0 calc(var(--space) * 2);
139
+ --button-padding: 0 var(--s2);
140
140
  display: flex;
141
141
  margin: 0;
142
142
  }
package/src/css/card.css CHANGED
@@ -29,7 +29,7 @@
29
29
  color: var(--card-header-color, var(--ui-fg));
30
30
  font-size: var(--font-size-md);
31
31
  font-weight: var(--card-header-weight, var(--font-medium));
32
- padding: var(--card-header-padding, calc(var(--space) * 3) calc(var(--space) * 4));
32
+ padding: var(--card-header-padding, var(--s3) var(--s4));
33
33
  margin: 0;
34
34
  }
35
35
 
@@ -43,7 +43,7 @@
43
43
  border: none;
44
44
  margin: 0;
45
45
  padding: 0;
46
- padding: var(--card-header-padding, calc(var(--space) * 1) calc(var(--space) * 2));
46
+ padding: var(--card-header-padding, var(--space) var(--s2));
47
47
  appearance: none;
48
48
  cursor: pointer;
49
49
  }
@@ -84,7 +84,7 @@
84
84
 
85
85
  .j-card .card-content {
86
86
  background-color: var(--card-content-background);
87
- padding: var(--card-content-padding, calc(var(--space) * 4));
87
+ padding: var(--card-content-padding, var(--s4));
88
88
  line-height: var(--line-height-paragraph);
89
89
  }
90
90
 
@@ -118,8 +118,8 @@
118
118
  .j-card.is-vertical .card-header {
119
119
  flex-direction: column;
120
120
  align-items: flex-start;
121
- gap: calc(var(--space) * 2);
122
- padding: var(--card-header-padding, calc(var(--space) * 4) calc(var(--space) * 4) 0);
121
+ gap: var(--s2);
122
+ padding: var(--card-header-padding, var(--s4) var(--s4) 0);
123
123
  }
124
124
 
125
125
  .j-card.is-vertical .card-header .header-title {
@@ -138,7 +138,7 @@
138
138
 
139
139
  .j-card .card-footer {
140
140
  border-top: none;
141
- padding: var(--vertical-card-footer-padding, calc(var(--space) * 4));
141
+ padding: var(--vertical-card-footer-padding, var(--s4));
142
142
  }
143
143
 
144
144
  .j-card .card-content+.card-footer {
package/src/css/color.css CHANGED
@@ -43,10 +43,6 @@
43
43
  --gray-a11: #0002119d;
44
44
  --gray-a12: #000107e1;
45
45
 
46
- --gray-contrast: #ffffff;
47
- --gray-surface: #ffffffcc;
48
- --gray-indicator: #8b8d98;
49
- --gray-track: #8b8d98;
50
46
 
51
47
  /* olive */
52
48
  --olive-1: #fcfdfc;
@@ -209,36 +205,31 @@
209
205
  --violet-track: #6e56cf;
210
206
 
211
207
  /* indigo */
212
- --indigo-1: #fdfdfe;
213
- --indigo-2: #f7f9ff;
214
- --indigo-3: #edf2fe;
215
- --indigo-4: #dfeaff;
216
- --indigo-5: #d0dfff;
217
- --indigo-6: #bdd1ff;
218
- --indigo-7: #a7bff9;
219
- --indigo-8: #88a5ef;
220
- --indigo-9: #3e63dd;
221
- --indigo-10: #3657c3;
222
- --indigo-11: #3a5bc7;
223
- --indigo-12: #1d2d5c;
224
-
225
- --indigo-a1: #00008002;
226
- --indigo-a2: #0040ff08;
227
- --indigo-a3: #0047f112;
228
- --indigo-a4: #0058ff20;
229
- --indigo-a5: #0052ff2f;
230
- --indigo-a6: #004eff42;
231
- --indigo-a7: #0046ee58;
232
- --indigo-a8: #003fdd77;
233
- --indigo-a9: #0031d2c1;
234
- --indigo-a10: #002ab3c9;
235
- --indigo-a11: #002bb7c5;
236
- --indigo-a12: #001247e2;
237
-
238
- --indigo-contrast: #fff;
239
- --indigo-surface: #f5f8ffcc;
240
- --indigo-indicator: #3e63dd;
241
- --indigo-track: #3e63dd;
208
+ --indigo-1: #FDFDFF;
209
+ --indigo-2: #F7F8FF;
210
+ --indigo-3: #EFF1FF;
211
+ --indigo-4: #E3E8FF;
212
+ --indigo-5: #D5DDFF;
213
+ --indigo-6: #C5CEFF;
214
+ --indigo-7: #B0BBFF;
215
+ --indigo-8: #939FF8;
216
+ --indigo-9: #6366F1;
217
+ --indigo-10: #585BDA;
218
+ --indigo-11: #5051D0;
219
+ --indigo-12: #262866;
220
+
221
+ --indigo-a1: #0000FF02;
222
+ --indigo-a2: #0020FF08;
223
+ --indigo-a3: #0020FF10;
224
+ --indigo-a4: #002EFF1C;
225
+ --indigo-a5: #0031FF2A;
226
+ --indigo-a6: #0028FF3A;
227
+ --indigo-a7: #0024FF4F;
228
+ --indigo-a8: #001DEF6C;
229
+ --indigo-a9: #0005E89C;
230
+ --indigo-a10: #0005C7A7;
231
+ --indigo-a11: #0002BBAF;
232
+ --indigo-a12: #00024BD9;
242
233
 
243
234
  /* blue */
244
235
  --blue-1: #fbfdff;
@@ -790,36 +781,32 @@
790
781
  --violet-track: #6e56cf;
791
782
 
792
783
  /* indigo */
793
- --indigo-1: #0c111c;
794
- --indigo-2: #111725;
795
- --indigo-3: #172448;
796
- --indigo-4: #1d2e61;
797
- --indigo-5: #253974;
798
- --indigo-6: #2e4484;
799
- --indigo-7: #375097;
800
- --indigo-8: #415eb1;
801
- --indigo-9: #3e63dd;
802
- --indigo-10: #3f5cb0;
803
- --indigo-11: #93b4ff;
804
- --indigo-12: #d5e2ff;
805
-
806
- --indigo-a1: #0012fb0c;
807
- --indigo-a2: #1156f916;
808
- --indigo-a3: #2b64ff3b;
809
- --indigo-a4: #3567ff56;
810
- --indigo-a5: #4171fd6b;
811
- --indigo-a6: #4d7afd7c;
812
- --indigo-a7: #5581ff90;
813
- --indigo-a8: #5883feac;
814
- --indigo-a9: #4671ffdb;
815
- --indigo-a10: #5580feab;
816
- --indigo-a11: #93b4ff;
817
- --indigo-a12: #d5e2ff;
818
-
819
- --indigo-contrast: #fff;
820
- --indigo-surface: #111d3980;
821
- --indigo-indicator: #3e63dd;
822
- --indigo-track: #3e63dd;
784
+ --indigo-1: #0E101A;
785
+ --indigo-2: #141723;
786
+ --indigo-3: #1E2443;
787
+ --indigo-4: #272E5A;
788
+ --indigo-5: #30386B;
789
+ --indigo-6: #3A437A;
790
+ --indigo-7: #454F8D;
791
+ --indigo-8: #515DA5;
792
+ --indigo-9: #A5B4FC;
793
+ --indigo-10: #9BA9F0;
794
+ --indigo-11: #A3B1F9;
795
+ --indigo-12: #DAE0FA;
796
+
797
+ --indigo-a1: #0000F70A;
798
+ --indigo-a2: #385EF714;
799
+ --indigo-a3: #4F6BFE36;
800
+ --indigo-a4: #586FFD4F;
801
+ --indigo-a5: #6277FD61;
802
+ --indigo-a6: #6E82FE71;
803
+ --indigo-a7: #7588FF85;
804
+ --indigo-a8: #788BFF9F;
805
+ --indigo-a9: #A7B6FFFC;
806
+ --indigo-a10: #A4B3FFEF;
807
+ --indigo-a11: #A7B5FFF9;
808
+ --indigo-a12: #DEE4FFFA;
809
+
823
810
 
824
811
  /* blue */
825
812
  --blue-1: #08121c;
package/src/css/color_p3.css CHANGED
@@ -46,10 +46,6 @@
46
46
  --gray-a11: color(display-p3 0 0.0078 0.0588 / 0.616);
47
47
  --gray-a12: color(display-p3 0 0.0039 0.0275 / 0.883);
48
48
 
49
- --gray-contrast: #ffffff;
50
- --gray-surface: color(display-p3 1 1 1 / 80%);
51
- --gray-indicator: oklch(64.6% 0.0165 277.7);
52
- --gray-track: oklch(64.6% 0.0165 277.7);
53
49
 
54
50
  /* olive */
55
51
  --olive-1: oklch(99.3% 0.0016 136.6);
@@ -212,36 +208,32 @@
212
208
  --violet-track: oklch(54.2% 0.179 288);
213
209
 
214
210
  /* indigo */
215
- --indigo-1: oklch(99.4% 0.0015 267);
216
- --indigo-2: oklch(98.3% 0.008 267);
217
- --indigo-3: oklch(96.1% 0.0172 267);
218
- --indigo-4: oklch(93.5% 0.0338 267);
219
- --indigo-5: oklch(90.3% 0.0511 267);
220
- --indigo-6: oklch(86.3% 0.0713 267);
221
- --indigo-7: oklch(80.7% 0.0868 267);
222
- --indigo-8: oklch(73% 0.1132 267);
223
- --indigo-9: oklch(54.4% 0.191 267);
224
- --indigo-10: oklch(49.7% 0.1727 267);
225
- --indigo-11: oklch(51% 0.1727 267);
226
- --indigo-12: oklch(31.3% 0.0855 267);
227
-
228
- --indigo-a1: color(display-p3 0.0196 0.0196 0.5098 / 0.008);
229
- --indigo-a2: color(display-p3 0.0196 0.2667 0.8784 / 0.032);
230
- --indigo-a3: color(display-p3 0.0078 0.2392 0.8863 / 0.067);
231
- --indigo-a4: color(display-p3 0.0039 0.3059 0.9373 / 0.118);
232
- --indigo-a5: color(display-p3 0.0039 0.2784 0.9333 / 0.173);
233
- --indigo-a6: color(display-p3 0.0039 0.2471 0.9373 / 0.244);
234
- --indigo-a7: color(display-p3 0.0039 0.2196 0.8706 / 0.326);
235
- --indigo-a8: color(display-p3 0.0039 0.1961 0.8078 / 0.444);
236
- --indigo-a9: color(display-p3 0 0.1529 0.7725 / 0.726);
237
- --indigo-a10: color(display-p3 0 0.1294 0.6549 / 0.761);
238
- --indigo-a11: color(display-p3 0 0.1333 0.6667 / 0.746);
239
- --indigo-a12: color(display-p3 0 0.0588 0.2549 / 0.875);
240
-
241
- --indigo-contrast: #fff;
242
- --indigo-surface: color(display-p3 0.9608 0.9725 1 / 0.8);
243
- --indigo-indicator: oklch(54.4% 0.191 267);
244
- --indigo-track: oklch(54.4% 0.191 267);
211
+ --indigo-1: oklch(99.4% 0.0026 277.1);
212
+ --indigo-2: oklch(98.2% 0.0099 277.1);
213
+ --indigo-3: oklch(96.1% 0.0192 277.1);
214
+ --indigo-4: oklch(93.5% 0.0385 277.1);
215
+ --indigo-5: oklch(90.4% 0.0576 277.1);
216
+ --indigo-6: oklch(86.4% 0.077 277.1);
217
+ --indigo-7: oklch(80.8% 0.0971 277.1);
218
+ --indigo-8: oklch(72.9% 0.1293 277.1);
219
+ --indigo-9: oklch(58.5% 0.2041 277.1);
220
+ --indigo-10: oklch(54.2% 0.1907 277.1);
221
+ --indigo-11: oklch(51% 0.1907 277.1);
222
+ --indigo-12: oklch(31.4% 0.1064 277.1);
223
+
224
+ --indigo-a1: color(display-p3 0.0196 0.0196 1 / 0.008);
225
+ --indigo-a2: color(display-p3 0.0196 0.1451 0.8784 / 0.032);
226
+ --indigo-a3: color(display-p3 0.0078 0.1294 0.9412 / 0.063);
227
+ --indigo-a4: color(display-p3 0.0039 0.1529 0.9294 / 0.106);
228
+ --indigo-a5: color(display-p3 0.0039 0.1725 0.9294 / 0.161);
229
+ --indigo-a6: color(display-p3 0.0039 0.1294 0.9294 / 0.22);
230
+ --indigo-a7: color(display-p3 0.0039 0.1176 0.9373 / 0.302);
231
+ --indigo-a8: color(display-p3 0.0039 0.098 0.8784 / 0.416);
232
+ --indigo-a9: color(display-p3 0 0.0157 0.8588 / 0.608);
233
+ --indigo-a10: color(display-p3 0 0.0118 0.7294 / 0.651);
234
+ --indigo-a11: color(display-p3 0 0.0078 0.6902 / 0.687);
235
+ --indigo-a12: color(display-p3 0 0.0078 0.2784 / 0.851);
236
+
245
237
 
246
238
  /* blue */
247
239
  --blue-1: oklch(99.3% 0.0033 251.8);
@@ -796,36 +788,32 @@
796
788
  --violet-track: oklch(54.2% 0.179 288);
797
789
 
798
790
  /* indigo */
799
- --indigo-1: oklch(17.8% 0.0247 267);
800
- --indigo-2: oklch(20.7% 0.0302 267);
801
- --indigo-3: oklch(27.1% 0.0693 267);
802
- --indigo-4: oklch(31.8% 0.0931 267);
803
- --indigo-5: oklch(36.1% 0.1044 267);
804
- --indigo-6: oklch(40.4% 0.1105 267);
805
- --indigo-7: oklch(45% 0.1201 267);
806
- --indigo-8: oklch(50.3% 0.1371 267);
807
- --indigo-9: oklch(54.4% 0.191 267);
808
- --indigo-10: oklch(49.7% 0.1371 267);
809
- --indigo-11: oklch(77.7% 0.1232 267);
810
- --indigo-12: oklch(91.1% 0.0428 267);
811
-
812
- --indigo-a1: color(display-p3 0 0.0706 0.9804 / 0.043);
813
- --indigo-a2: color(display-p3 0.1176 0.3608 1 / 0.08);
814
- --indigo-a3: color(display-p3 0.2275 0.4039 1 / 0.223);
815
- --indigo-a4: color(display-p3 0.2627 0.4196 1 / 0.324);
816
- --indigo-a5: color(display-p3 0.302 0.451 1 / 0.4);
817
- --indigo-a6: color(display-p3 0.3529 0.4902 1 / 0.467);
818
- --indigo-a7: color(display-p3 0.3765 0.5137 1 / 0.543);
819
- --indigo-a8: color(display-p3 0.3961 0.5294 1 / 0.648);
820
- --indigo-a9: color(display-p3 0.3176 0.451 1 / 0.824);
821
- --indigo-a10: color(display-p3 0.3843 0.5176 1 / 0.643);
822
- --indigo-a11: color(display-p3 0.6196 0.7216 1 / 0.975);
823
- --indigo-a12: color(display-p3 0.8549 0.898 1 / 0.988);
824
-
825
- --indigo-contrast: #fff;
826
- --indigo-surface: color(display-p3 0.0706 0.1098 0.2118 / 0.5);
827
- --indigo-indicator: oklch(54.4% 0.191 267);
828
- --indigo-track: oklch(54.4% 0.191 267);
791
+ --indigo-1: oklch(17.8% 0.0209 274.7);
792
+ --indigo-2: oklch(20.7% 0.0255 274.7);
793
+ --indigo-3: oklch(27.1% 0.0585 274.7);
794
+ --indigo-4: oklch(31.8% 0.0787 274.7);
795
+ --indigo-5: oklch(36.1% 0.0883 274.7);
796
+ --indigo-6: oklch(40.4% 0.0934 274.7);
797
+ --indigo-7: oklch(45% 0.1015 274.7);
798
+ --indigo-8: oklch(50.3% 0.1159 274.7);
799
+ --indigo-9: oklch(78.5% 0.1041 274.7);
800
+ --indigo-10: oklch(75.1% 0.1041 274.7);
801
+ --indigo-11: oklch(77.7% 0.1041 274.7);
802
+ --indigo-12: oklch(91.1% 0.0361 274.7);
803
+
804
+ --indigo-a1: color(display-p3 0 0 0.9922 / 0.034);
805
+ --indigo-a2: color(display-p3 0.2863 0.3961 0.9961 / 0.072);
806
+ --indigo-a3: color(display-p3 0.3373 0.4353 0.9961 / 0.202);
807
+ --indigo-a4: color(display-p3 0.3725 0.4549 1 / 0.295);
808
+ --indigo-a5: color(display-p3 0.4196 0.4863 1 / 0.366);
809
+ --indigo-a6: color(display-p3 0.4627 0.5294 1 / 0.425);
810
+ --indigo-a7: color(display-p3 0.4863 0.549 1 / 0.505);
811
+ --indigo-a8: color(display-p3 0.498 0.5608 1 / 0.601);
812
+ --indigo-a9: color(display-p3 0.6784 0.7294 0.9961 / 0.963);
813
+ --indigo-a10: color(display-p3 0.6706 0.7176 1 / 0.916);
814
+ --indigo-a11: color(display-p3 0.6784 0.7255 1 / 0.954);
815
+ --indigo-a12: color(display-p3 0.8863 0.9059 1 / 0.971);
816
+
829
817
 
830
818
  /* blue */
831
819
  --blue-1: oklch(17.8% 0.0258 251.8);
package/src/css/drop.css CHANGED
@@ -7,7 +7,7 @@
7
7
  opacity: 0;
8
8
  pointer-events: none;
9
9
  transition: opacity 0.2s ease;
10
- z-index: var(--z-index-drop);
10
+ z-index: var(--z-drop);
11
11
  }
12
12
 
13
13
  .j-drop.is-active {
package/src/css/flow.css CHANGED
@@ -1,6 +1,6 @@
1
1
  @layer components {
2
2
  .j-flow {
3
- --flow-gap: calc(var(--space) * 2);
3
+ --flow-gap: var(--s2);
4
4
  --flow-step-size: 28px;
5
5
  --flow-border: 1px solid var(--ui-border-subtle);
6
6
 
package/src/css/form.css CHANGED
@@ -8,16 +8,16 @@
8
8
 
9
9
  .j-form.is-vertical {
10
10
  flex-direction: column;
11
- gap: var(--form-gap-vertical, calc(var(--space) * 2));
11
+ gap: var(--form-gap-vertical, var(--s2));
12
12
  }
13
13
 
14
14
  .j-form.is-horizontal {
15
15
  flex-direction: row;
16
- gap: var(--form-gap-horizontal, calc(var(--space) * 2));
16
+ gap: var(--form-gap-horizontal, var(--s2));
17
17
  }
18
18
 
19
19
  .j-form .form-item {
20
- gap: var(--form-label-gap, calc(var(--space) * 1));
20
+ gap: var(--form-label-gap, var(--space));
21
21
  margin: 0;
22
22
  }
23
23
 
@@ -36,7 +36,7 @@
36
36
 
37
37
  .j-form .form-item .item-label,
38
38
  .j-form .form-item .form-control {
39
- gap: var(--form-label-gap, calc(var(--space) * 1));
39
+ gap: var(--form-label-gap, var(--space));
40
40
  }
41
41
 
42
42
  .j-form.is-horizontal .form-item .item-label {
@@ -67,14 +67,14 @@
67
67
 
68
68
  .j-form .form-buttons {
69
69
  display: flex;
70
- gap: var(--form-buttons-gap, calc(var(--space) * 2));
70
+ gap: var(--form-buttons-gap, var(--s2));
71
71
  margin: 0;
72
72
  }
73
73
 
74
74
  /* input */
75
75
  .j-input:not([type='checkbox']) {
76
76
  display: block;
77
- padding: var(--input-padding, calc(var(--space) * 1.5) calc(var(--space) * 2));
77
+ padding: var(--input-padding, calc(var(--space) * 1.5) var(--s2));
78
78
  border-width: var(--input-border-width, 1px);
79
79
  border-style: var(--input-border-style, solid);
80
80
  border-color: var(--input-border-color, var(--ui-input-border));
@@ -121,8 +121,8 @@
121
121
  border-inline-end-width: 1px;
122
122
  border-radius: 0;
123
123
  margin: calc(var(--space) * -2);
124
- margin-inline-end: calc(var(--space) * 2);
125
- padding: calc(var(--space) * 2);
124
+ margin-inline-end: var(--s2);
125
+ padding: var(--s2);
126
126
  border-color: var(--input-border-color, var(--ui-input-border));
127
127
  background-color: var(--ui-surface-subtle);
128
128
  font-size: var(--font-size-sm, 0.75rem);
@@ -194,19 +194,19 @@
194
194
 
195
195
  .j-radio.is-vertical {
196
196
  flex-direction: column;
197
- /* --radio-gap: calc(var(--space) * 3); */
197
+ /* --radio-gap: var(--s3); */
198
198
  }
199
199
 
200
200
  .j-radio,
201
201
  .j-radio.is-horizontal {
202
202
  flex-direction: row;
203
- /* --radio-gap: calc(var(--space) * 4); */
203
+ /* --radio-gap: var(--s4); */
204
204
  }
205
205
 
206
206
  .j-radio label {
207
207
  display: flex;
208
208
  align-items: center;
209
- gap: var(--radio-label-gap, calc(var(--space) * 2));
209
+ gap: var(--radio-label-gap, var(--s2));
210
210
  font-size: var(--font-size-md);
211
211
  padding: calc(var(--space)*2);
212
212
  border-radius: var(--radius-md);
@@ -287,7 +287,7 @@
287
287
  .j-radio.is-group label span.radio-text {
288
288
  cursor: pointer;
289
289
  background-color: var(--ui-bg);
290
- padding: var(--radio-group-padding, calc(var(--space) * 1.5) calc(var(--space) * 3));
290
+ padding: var(--radio-group-padding, calc(var(--space) * 1.5) var(--s3));
291
291
  height: var(--el-height-md);
292
292
  line-height: var(--line-height);
293
293
  position: relative;
@@ -323,7 +323,7 @@
323
323
  }
324
324
 
325
325
  .j-radio.is-group.is-sm label span.radio-text {
326
- --radio-group-padding: calc(var(--space) * 1) calc(var(--space) * 2);
326
+ --radio-group-padding: var(--space) var(--s2);
327
327
  height: var(--el-height-sm);
328
328
  }
329
329
 
@@ -337,7 +337,7 @@
337
337
  }
338
338
 
339
339
  .j-radio.is-group.is-lg label span.radio-text {
340
- --radio-group-padding: calc(var(--space) * 3) calc(var(--space) * 4);
340
+ --radio-group-padding: var(--s3) var(--s4);
341
341
  height: var(--el-height-lg);
342
342
  }
343
343
 
@@ -351,19 +351,19 @@
351
351
 
352
352
  .j-checkbox.is-vertical {
353
353
  flex-direction: column;
354
- /* --checkbox-gap: calc(var(--space) * 3); */
354
+ /* --checkbox-gap: var(--s3); */
355
355
  }
356
356
 
357
357
  .j-checkbox,
358
358
  .j-checkbox.is-horizontal {
359
359
  flex-direction: row;
360
- /* --checkbox-gap: calc(var(--space) * 4); */
360
+ /* --checkbox-gap: var(--s4); */
361
361
  }
362
362
 
363
363
  .j-checkbox label {
364
364
  display: flex;
365
365
  align-items: center;
366
- gap: var(--checkbox-label-gap, calc(var(--space) * 2));
366
+ gap: var(--checkbox-label-gap, var(--s2));
367
367
  font-size: var(--checkbox-label-font-size, var(--font-size-md));
368
368
  height: var(--el-height-md);
369
369
  padding: calc(var(--space)*2);
@@ -611,13 +611,13 @@
611
611
 
612
612
  select.j-select.is-sm {
613
613
  --input-height: var(--el-height-sm);
614
- --input-padding: calc(var(--space) * 1) calc(var(--space) * 1);
614
+ --input-padding: var(--space) var(--space);
615
615
  --input-font-size: var(--font-size-sm);
616
616
  }
617
617
 
618
618
  select.j-select.is-lg {
619
619
  --input-height: var(--el-height-lg);
620
- --input-padding: calc(var(--space) * 2) calc(var(--space) * 2);
620
+ --input-padding: var(--s2) var(--s2);
621
621
  --input-font-size: var(--font-size-lg);
622
622
  }
623
623
 
@@ -633,7 +633,7 @@
633
633
  background-color: var(--input-background-color, var(--ui-bg));
634
634
  color: var(--input-color, var(--ui-input-color));
635
635
  resize: vertical;
636
- padding: var(--textarea-padding, calc(var(--space) * 2));
636
+ padding: var(--textarea-padding, var(--s2));
637
637
  font-family: inherit;
638
638
  font-size: var(--textarea-font-size, var(--font-size-md));
639
639
  line-height: var(--textarea-line-height, var(--line-height));
package/src/css/gradient.css CHANGED
@@ -21,6 +21,19 @@
21
21
  background-color: var(--ui-bg);
22
22
  }
23
23
 
24
+ .bg-gradient-auto {
25
+ background:
26
+ radial-gradient(circle at 16% 16%,
27
+ color-mix(in srgb, var(--tone-solid) 30%, transparent),
28
+ transparent 34%),
29
+ radial-gradient(circle at 84% 0%,
30
+ color-mix(in srgb, var(--tone-tint) 24%, transparent),
31
+ transparent 30%),
32
+ linear-gradient(135deg,
33
+ color-mix(in srgb, var(--ui-bg) 78%, var(--ui-surface-raised)),
34
+ color-mix(in srgb, var(--ui-surface-raised) 86%, var(--tone-subtle)));
35
+ }
36
+
24
37
  .bg-gradient-sunrise {
25
38
  background:
26
39
  radial-gradient(circle at 16% 16%,
@@ -56,7 +69,7 @@
56
69
  color-mix(in srgb, var(--ui-blue) 22%, transparent),
57
70
  transparent 28%),
58
71
  linear-gradient(135deg,
59
- color-mix(in srgb, var(--ui-bg) 76%, var(--ui-blue-light)),
72
+ color-mix(in srgb, var(--ui-bg) 76%, var(--ui-blue-tint)),
60
73
  color-mix(in srgb, var(--ui-surface-raised) 84%, var(--ui-teal-subtle, var(--state-info-subtle))));
61
74
  }
62
75
 
@@ -70,7 +83,7 @@
70
83
  transparent 30%),
71
84
  linear-gradient(135deg,
72
85
  color-mix(in srgb, var(--ui-bg) 80%, var(--state-success-subtle)),
73
- color-mix(in srgb, var(--ui-surface-raised) 84%, var(--ui-mint-light)));
86
+ color-mix(in srgb, var(--ui-surface-raised) 84%, var(--ui-mint-tint)));
74
87
  }
75
88
 
76
89
  .bg-gradient-ember {
@@ -109,7 +122,7 @@
109
122
  transparent 28%),
110
123
  linear-gradient(135deg,
111
124
  color-mix(in srgb, var(--ui-bg) 80%, var(--ui-gold-surface, var(--state-warning-subtle))),
112
- color-mix(in srgb, var(--ui-surface-raised) 86%, var(--ui-gold-light)));
125
+ color-mix(in srgb, var(--ui-surface-raised) 86%, var(--ui-gold-tint)));
113
126
  }
114
127
 
115
128
  .bg-gradient-forest {
@@ -121,7 +134,7 @@
121
134
  color-mix(in srgb, var(--state-success) 18%, transparent),
122
135
  transparent 30%),
123
136
  linear-gradient(135deg,
124
- color-mix(in srgb, var(--ui-bg) 80%, var(--ui-olive-light)),
137
+ color-mix(in srgb, var(--ui-bg) 80%, var(--ui-olive-tint)),
125
138
  color-mix(in srgb, var(--ui-surface-raised) 86%, var(--state-success-subtle)));
126
139
  }
127
140