@globalbrain/sefirot 4.38.1 → 4.40.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 (44) hide show
  1. package/config/vite.js +1 -0
  2. package/lib/blocks/lens/components/LensCatalog.vue +52 -38
  3. package/lib/blocks/lens/components/LensCatalogControl.vue +5 -9
  4. package/lib/blocks/lens/components/LensCatalogFooter.vue +14 -14
  5. package/lib/blocks/lens/components/LensCatalogStateFilter.vue +3 -3
  6. package/lib/blocks/lens/components/LensCatalogStateFilterCondition.vue +1 -1
  7. package/lib/blocks/lens/components/LensCatalogStateFilterGroup.vue +1 -1
  8. package/lib/blocks/lens/components/LensCatalogStateSort.vue +3 -3
  9. package/lib/blocks/lens/components/LensFormFilter.vue +21 -22
  10. package/lib/blocks/lens/components/LensFormFilterCondition.vue +1 -1
  11. package/lib/blocks/lens/components/LensFormFilterGroup.vue +1 -1
  12. package/lib/blocks/lens/components/LensFormOverrideBase.vue +22 -21
  13. package/lib/blocks/lens/components/LensFormView.vue +25 -26
  14. package/lib/blocks/lens/components/LensTable.vue +1 -3
  15. package/lib/components/SAvatar.vue +7 -2
  16. package/lib/components/SAvatarStack.vue +5 -4
  17. package/lib/components/SButton.vue +3 -1
  18. package/lib/components/SCard.vue +35 -64
  19. package/lib/components/SCardBlock.vue +5 -12
  20. package/lib/components/SCardClose.vue +20 -0
  21. package/lib/components/SCardFooter.vue +15 -0
  22. package/lib/components/SContent.vue +25 -13
  23. package/lib/components/SInputCheckbox.vue +1 -0
  24. package/lib/components/SInputDate.vue +3 -2
  25. package/lib/components/SInputDropdown.vue +2 -1
  26. package/lib/components/SInputFile.vue +5 -4
  27. package/lib/components/SInputFileUpload.vue +1 -1
  28. package/lib/components/SInputHMS.vue +2 -1
  29. package/lib/components/SInputRadio.vue +1 -0
  30. package/lib/components/SInputSelect.vue +2 -1
  31. package/lib/components/SInputText.vue +3 -2
  32. package/lib/components/SInputTextarea.vue +72 -79
  33. package/lib/components/SInputYMD.vue +2 -1
  34. package/lib/components/SModal.vue +60 -1
  35. package/lib/components/SPagination.vue +0 -4
  36. package/lib/components/STable.vue +5 -5
  37. package/lib/components/STableCell.vue +4 -4
  38. package/lib/components/STableColumn.vue +4 -4
  39. package/lib/components/STableFooter.vue +3 -3
  40. package/lib/components/STableHeader.vue +1 -1
  41. package/lib/components/STableItem.vue +2 -2
  42. package/lib/styles/utilities.css +10 -0
  43. package/lib/styles/variables.css +115 -95
  44. package/package.json +20 -19
package/lib/components/SInputYMD.vue CHANGED
@@ -307,8 +307,9 @@ function createRequiredTouched(): boolean[] {
307
307
  .container {
308
308
  display: inline-flex;
309
309
  border: 1px solid var(--input-border-color);
310
- border-radius: 6px;
310
+ border-radius: 8px;
311
311
  background-color: var(--input-bg-color);
312
+ box-shadow: var(--input-box-shadow);
312
313
  transition: border-color 0.25s, background-color 0.25s;
313
314
 
314
315
  &:hover { border-color: var(--input-hover-border-color); }
package/lib/components/SModal.vue CHANGED
@@ -37,7 +37,7 @@ function onClick(e: MouseEvent) {
37
37
  </Teleport>
38
38
  </template>
39
39
 
40
- <style scoped lang="postcss">
40
+ <style scoped>
41
41
  .SModal {
42
42
  position: fixed;
43
43
  top: 0;
@@ -55,4 +55,63 @@ function onClick(e: MouseEvent) {
55
55
  .SModal.fade-leave-to {
56
56
  opacity: 0;
57
57
  }
58
+
59
+ .SModal :deep(> .SCard) {
60
+ margin: 12px 12px 128px;
61
+ box-shadow: var(--shadow-depth-3);
62
+ transition: opacity 0.25s, transform 0.25s;
63
+
64
+ @media (min-width: 512px) {
65
+ margin: 24px 24px 128px;
66
+ }
67
+
68
+ @media (min-width: 768px) {
69
+ margin: 48px 48px 128px;
70
+ }
71
+
72
+ &.small {
73
+ @media (min-width: 560px) {
74
+ margin: 24px auto 128px;
75
+ max-width: 512px;
76
+ }
77
+
78
+ @media (min-width: 768px) {
79
+ margin: 48px auto 128px;
80
+ }
81
+ }
82
+
83
+ &.medium {
84
+ @media (min-width: 736px) {
85
+ margin: 48px auto 128px;
86
+ max-width: 640px;
87
+ }
88
+ }
89
+
90
+ &.large {
91
+ @media (min-width: 864px) {
92
+ margin: 48px auto 128px;
93
+ max-width: 768px;
94
+ }
95
+ }
96
+
97
+ &.xlarge {
98
+ @media (min-width: 1056px) {
99
+ margin: 48px auto 128px;
100
+ max-width: 960px;
101
+ }
102
+ }
103
+
104
+ &.xxlarge {
105
+ @media (min-width: 1248px) {
106
+ margin: 48px auto 128px;
107
+ max-width: 1152px;
108
+ }
109
+ }
110
+ }
111
+
112
+ .SModal.fade-enter-from :deep(> .SCard),
113
+ .SModal.fade-leave-to :deep(> .SCard) {
114
+ opacity: 0;
115
+ transform: translateY(8px);
116
+ }
58
117
  </style>
package/lib/components/SPagination.vue CHANGED
@@ -55,8 +55,6 @@ const hasNext = computed(() => {
55
55
  <div class="SPagination" :class="[size, align]">
56
56
  <div class="button prev">
57
57
  <SButton
58
- type="outline"
59
- mode="mute"
60
58
  :size
61
59
  :lead-icon="IconCaretLeft"
62
60
  :label="t.prev"
@@ -69,8 +67,6 @@ const hasNext = computed(() => {
69
67
  </div>
70
68
  <div class="button next">
71
69
  <SButton
72
- type="outline"
73
- mode="mute"
74
70
  :size
75
71
  :trail-icon="IconCaretRight"
76
72
  :label="t.next"
package/lib/components/STable.vue CHANGED
@@ -711,7 +711,7 @@ function onResizeEnd(data: { columnName: string; finalWidth: string }) {
711
711
  top: var(--table-head-top, auto);
712
712
  z-index: 100;
713
713
  border-radius: calc(var(--table-border-radius) - 1px) calc(var(--table-border-radius) - 1px) 0 0;
714
- background-color: var(--bg-elv-2);
714
+ background-color: var(--c-bg-1);
715
715
  scrollbar-width: none;
716
716
  line-height: 0;
717
717
 
@@ -764,7 +764,7 @@ function onResizeEnd(data: { columnName: string; finalWidth: string }) {
764
764
 
765
765
  :deep(.row) {
766
766
  display: flex;
767
- border-bottom: 1px solid var(--c-gutter);
767
+ border-bottom: 1px solid var(--c-divider);
768
768
  }
769
769
 
770
770
  :deep(.row.last),
@@ -783,7 +783,7 @@ function onResizeEnd(data: { columnName: string; finalWidth: string }) {
783
783
  border-radius: 0 0 calc(var(--table-border-radius) - 1px) calc(var(--table-border-radius) - 1px);
784
784
  padding: 48px 32px;
785
785
  text-align: center;
786
- background-color: var(--c-bg-elv-3);
786
+ background-color: var(--c-bg-1);
787
787
  line-height: 24px;
788
788
  font-size: 14px;
789
789
  font-weight: 500;
@@ -796,7 +796,7 @@ function onResizeEnd(data: { columnName: string; finalWidth: string }) {
796
796
 
797
797
  .loading {
798
798
  border-radius: 0 0 calc(var(--table-border-radius) - 1px) calc(var(--table-border-radius) - 1px);
799
- background-color: var(--c-bg-elv-3);
799
+ background-color: var(--c-bg-1);
800
800
  overflow: hidden;
801
801
 
802
802
  .has-footer & {
@@ -863,7 +863,7 @@ function onResizeEnd(data: { columnName: string; finalWidth: string }) {
863
863
 
864
864
  :deep(.input) {
865
865
  align-items: center;
866
- padding: 0 16px;
866
+ padding: 0 16px 0 15px;
867
867
  min-height: 40px;
868
868
  user-select: none;
869
869
  }
package/lib/components/STableCell.vue CHANGED
@@ -132,20 +132,20 @@ const valueIsImagePath = computed(() => {
132
132
 
133
133
  <style scoped lang="postcss">
134
134
  .STableCell {
135
- background-color: var(--c-bg-elv-3);
135
+ background-color: var(--c-bg-1);
136
136
  transition: background-color 0.1s;
137
137
  overflow: hidden;
138
138
 
139
139
  :where(.row:has(.input.on)) & {
140
- background-color: var(--c-bg-elv-4);
140
+ background-color: var(--c-bg-2);
141
141
  }
142
142
 
143
143
  .row:hover & {
144
- background-color: var(--c-bg-elv-4);
144
+ background-color: var(--c-bg-2);
145
145
  }
146
146
 
147
147
  .summary & {
148
- background-color: var(--c-bg-elv-4);
148
+ background-color: var(--c-bg-2);
149
149
  }
150
150
 
151
151
  .STableItem:first-child & {
package/lib/components/STableColumn.vue CHANGED
@@ -168,10 +168,10 @@ function stopDialogPositionListener() {
168
168
 
169
169
  <style scoped lang="postcss">
170
170
  .STableColumn {
171
- background-color: var(--c-bg-elv-3);
171
+ background-color: var(--c-bg-1);
172
172
 
173
173
  &.has-header {
174
- border-top: 1px solid var(--c-gutter);
174
+ border-top: 1px solid var(--c-divider);
175
175
  }
176
176
 
177
177
  .STableItem:first-child & {
@@ -197,7 +197,7 @@ function stopDialogPositionListener() {
197
197
  line-height: 40px;
198
198
  text-align: left;
199
199
  font-size: 12px;
200
- font-weight: 600;
200
+ font-weight: 500;
201
201
  color: var(--c-text-2);
202
202
  white-space: nowrap;
203
203
  overflow: hidden;
@@ -228,7 +228,7 @@ function stopDialogPositionListener() {
228
228
 
229
229
  &:hover {
230
230
  color: var(--c-text-1);
231
- background-color: var(--c-bg-mute-1);
231
+ background-color: var(--button-fill-default-hover-bg-color);
232
232
  }
233
233
 
234
234
  &.active {
package/lib/components/STableFooter.vue CHANGED
@@ -63,11 +63,11 @@ const hasNext = computed(() => {
63
63
 
64
64
  <style scoped lang="postcss">
65
65
  .STableFooter {
66
- border-top: 1px solid var(--c-gutter);
66
+ border-top: 1px solid var(--c-divider);
67
67
  border-radius: 0 0 calc(var(--table-border-radius) - 1px) calc(var(--table-border-radius) - 1px);
68
68
  padding-right: var(--table-padding-right);
69
69
  padding-left: var(--table-padding-left);
70
- background-color: var(--c-bg-elv-3);
70
+ background-color: var(--c-bg-1);
71
71
 
72
72
  &.borderless {
73
73
  border-radius: 0;
@@ -117,7 +117,7 @@ const hasNext = computed(() => {
117
117
  }
118
118
 
119
119
  &.active:hover {
120
- background-color: var(--c-bg-elv-1);
120
+ background-color: var(--c-bg-1);
121
121
  }
122
122
  }
123
123
 
package/lib/components/STableHeader.vue CHANGED
@@ -42,7 +42,7 @@ const stats = computed(() => {
42
42
  border-radius: calc(var(--table-border-radius) - 1px) calc(var(--table-border-radius) - 1px) 0 0;
43
43
  padding-right: var(--table-padding-right);
44
44
  padding-left: var(--table-padding-left);
45
- background-color: var(--c-bg-elv-4);
45
+ background-color: var(--c-bg-1);
46
46
 
47
47
  &.borderless {
48
48
  border-radius: 0;
package/lib/components/STableItem.vue CHANGED
@@ -30,8 +30,8 @@ const classes = computed(() => [
30
30
  z-index: var(--table-col-z-index, auto);
31
31
  flex-shrink: 0;
32
32
  flex-grow: 1;
33
- border-left: var(--table-col-border-left, 0px) solid var(--c-gutter);
34
- border-right: 1px solid var(--c-gutter);
33
+ border-left: var(--table-col-border-left, 0px) solid var(--c-divider);
34
+ border-right: 1px solid var(--c-divider);
35
35
  margin-left: calc(var(--table-col-border-left, 0px) * -1);
36
36
  min-width: var(--table-col-width);
37
37
  max-width: var(--table-col-width);
package/lib/styles/utilities.css CHANGED
@@ -85,6 +85,7 @@
85
85
  .s-py-8 { padding-top: 8px; padding-bottom: 8px; }
86
86
  .s-py-12 { padding-top: 12px; padding-bottom: 12px; }
87
87
  .s-py-16 { padding-top: 16px; padding-bottom: 16px; }
88
+ .s-py-20 { padding-top: 20px; padding-bottom: 20px; }
88
89
  .s-py-24 { padding-top: 24px; padding-bottom: 24px; }
89
90
  .s-py-32 { padding-top: 32px; padding-bottom: 32px; }
90
91
  .s-py-48 { padding-top: 48px; padding-bottom: 48px; }
@@ -94,6 +95,7 @@
94
95
  .s-px-8 { padding-right: 8px; padding-left: 8px; }
95
96
  .s-px-12 { padding-right: 12px; padding-left: 12px; }
96
97
  .s-px-16 { padding-right: 16px; padding-left: 16px; }
98
+ .s-px-20 { padding-right: 20px; padding-left: 20px; }
97
99
  .s-px-24 { padding-right: 24px; padding-left: 24px; }
98
100
  .s-px-32 { padding-right: 32px; padding-left: 32px; }
99
101
  .s-px-48 { padding-right: 48px; padding-left: 48px; }
@@ -103,6 +105,7 @@
103
105
  .s-pt-8 { padding-top: 8px; }
104
106
  .s-pt-12 { padding-top: 12px; }
105
107
  .s-pt-16 { padding-top: 16px; }
108
+ .s-pt-20 { padding-top: 20px; }
106
109
  .s-pt-24 { padding-top: 24px; }
107
110
  .s-pt-32 { padding-top: 32px; }
108
111
  .s-pt-48 { padding-top: 48px; }
@@ -112,6 +115,7 @@
112
115
  .s-pr-8 { padding-right: 8px; }
113
116
  .s-pr-12 { padding-right: 12px; }
114
117
  .s-pr-16 { padding-right: 16px; }
118
+ .s-pr-20 { padding-right: 20px; }
115
119
  .s-pr-24 { padding-right: 24px; }
116
120
  .s-pr-32 { padding-right: 32px; }
117
121
  .s-pr-48 { padding-right: 48px; }
@@ -121,6 +125,7 @@
121
125
  .s-pb-8 { padding-bottom: 8px; }
122
126
  .s-pb-12 { padding-bottom: 12px; }
123
127
  .s-pb-16 { padding-bottom: 16px; }
128
+ .s-pb-20 { padding-bottom: 20px; }
124
129
  .s-pb-24 { padding-bottom: 24px; }
125
130
  .s-pb-32 { padding-bottom: 32px; }
126
131
  .s-pb-48 { padding-bottom: 48px; }
@@ -130,6 +135,7 @@
130
135
  .s-pl-8 { padding-left: 8px; }
131
136
  .s-pl-12 { padding-left: 12px; }
132
137
  .s-pl-16 { padding-left: 16px; }
138
+ .s-pl-20 { padding-left: 20px; }
133
139
  .s-pl-24 { padding-left: 24px; }
134
140
  .s-pl-32 { padding-left: 32px; }
135
141
  .s-pl-48 { padding-left: 48px; }
@@ -210,6 +216,10 @@
210
216
  * Backgrounds
211
217
  * -------------------------------------------------------------------------- */
212
218
 
219
+ .s-bg-1 { background-color: var(--c-bg-1); }
220
+ .s-bg-2 { background-color: var(--c-bg-2); }
221
+ .s-bg-3 { background-color: var(--c-bg-3); }
222
+
213
223
  .s-bg-elv-1 { background-color: var(--c-bg-elv-1); }
214
224
  .s-bg-elv-2 { background-color: var(--c-bg-elv-2); }
215
225
  .s-bg-elv-3 { background-color: var(--c-bg-elv-3); }
package/lib/styles/variables.css CHANGED
@@ -51,14 +51,14 @@
51
51
  * -------------------------------------------------------------------------- */
52
52
 
53
53
  :root {
54
- --c-gray-1: #fcfcfd;
55
- --c-gray-2: #f9f9fb;
56
- --c-gray-3: #f2f2f5;
57
- --c-gray-4: #ebebef;
58
- --c-gray-5: #e4e4e9;
59
- --c-gray-6: #dddde3;
60
- --c-gray-7: #d3d4db;
61
- --c-gray-8: #b9bbc6;
54
+ --c-gray-1: #f9f9fb;
55
+ --c-gray-2: #f2f2f5;
56
+ --c-gray-3: #ebebef;
57
+ --c-gray-4: #e4e4e9;
58
+ --c-gray-5: #dddde3;
59
+ --c-gray-6: #d3d4db;
60
+ --c-gray-7: #b9bbc6;
61
+ --c-gray-8: #989ba6;
62
62
  --c-gray-9: #8b8d98;
63
63
  --c-gray-10: #7e808a;
64
64
  --c-gray-11: #60646c;
@@ -151,17 +151,19 @@
151
151
  }
152
152
 
153
153
  /**
154
- * Color: Divider and Gutter
154
+ * Color: Base Border, Divider, and Gutter
155
155
  * -------------------------------------------------------------------------- */
156
156
 
157
157
  :root {
158
- --c-divider: #e0e0e1;
159
- --c-gutter: #e2e2e3;
158
+ --c-border: #dddddd;
159
+ --c-divider: #dddddd;
160
+ --c-gutter: #dddddd;
160
161
  }
161
162
 
162
163
  .dark {
163
- --c-divider: #2e3035;
164
- --c-gutter: #000000;
164
+ --c-border: #262626;
165
+ --c-divider: #262626;
166
+ --c-gutter: #262626;
165
167
  }
166
168
 
167
169
  /**
@@ -230,8 +232,8 @@
230
232
 
231
233
  :root {
232
234
  --c-bg-1: var(--c-white);
233
- --c-bg-2: var(--c-gray-3);
234
- --c-bg-3: var(--c-gray-4);
235
+ --c-bg-2: oklch(0.98 0 0);
236
+ --c-bg-3: oklch(0.97 0 0);
235
237
 
236
238
  --c-bg-elv-1: #ffffff;
237
239
  --c-bg-elv-2: #f5f5f7;
@@ -268,9 +270,9 @@
268
270
  }
269
271
 
270
272
  .dark {
271
- --c-bg-1: var(--c-gray-1);
272
- --c-bg-2: var(--c-gray-3);
273
- --c-bg-3: var(--c-gray-4);
273
+ --c-bg-1: oklch(0.145 0 0);
274
+ --c-bg-2: oklch(0.205 0 0);
275
+ --c-bg-3: oklch(0.269 0 0);
274
276
 
275
277
  --c-bg-elv-1: #000000;
276
278
  --c-bg-elv-2: #151517;
@@ -419,45 +421,45 @@
419
421
 
420
422
  :root {
421
423
  --button-mini-font-size: 12px;
422
- --button-small-font-size: 12px;
424
+ --button-small-font-size: 14px;
423
425
  --button-medium-font-size: 14px;
424
426
  --button-large-font-size: 14px;
425
427
  --button-jumbo-font-size: 16px;
426
428
 
427
- --button-fill-default-border-color: var(--c-border-mute-1);
429
+ --button-fill-default-border-color: var(--input-border-color);
428
430
  --button-fill-default-text-color: var(--c-text-1);
429
431
  --button-fill-default-content-color: var(--c-text-1);
430
- --button-fill-default-bg-color: var(--c-bg-mute-1);
432
+ --button-fill-default-bg-color: var(--c-bg-1);
431
433
  --button-fill-default-count-bg-color: var(--c-gray-7);
432
434
  --button-fill-default-loader-color: var(--c-neutral-1);
433
- --button-fill-default-hover-border-color: var(--c-border-mute-2);
435
+ --button-fill-default-box-shadow: var(--shadow-depth-1);
436
+ --button-fill-default-hover-border-color: var(--button-fill-default-border-color);
434
437
  --button-fill-default-hover-text-color: var(--c-text-1);
435
- --button-fill-default-hover-bg-color: var(--c-bg-mute-2);
436
- --button-fill-default-active-border-color: var(--c-border-mute-3);
438
+ --button-fill-default-hover-bg-color: color-mix(in oklab, var(--button-fill-default-border-color) 40%, transparent);
439
+ --button-fill-default-active-border-color: var(--button-fill-default-border-color);
437
440
  --button-fill-default-active-text-color: var(--c-text-1);
438
- --button-fill-default-active-bg-color: var(--c-bg-mute-3);
439
- --button-fill-default-disabled-border-color: var(--c-border-mute-1);
441
+ --button-fill-default-active-bg-color: color-mix(in oklab, var(--button-fill-default-border-color) 60%, transparent);
442
+ --button-fill-default-disabled-border-color: var(--input-border-color);
440
443
  --button-fill-default-disabled-text-color: var(--c-text-3);
441
444
  --button-fill-default-disabled-content-color: var(--c-text-3);
442
- --button-fill-default-disabled-bg-color: var(--c-bg-mute-1);
445
+ --button-fill-default-disabled-bg-color: var(--button-fill-default-bg-color);
443
446
 
444
- --button-fill-mute-border-color: var(--c-border-mute-1);
447
+ --button-fill-mute-border-color: var(--input-border-color);
445
448
  --button-fill-mute-text-color: var(--c-text-2);
446
449
  --button-fill-mute-content-color: var(--c-text-2);
447
- --button-fill-mute-bg-color: var(--c-bg-mute-1);
450
+ --button-fill-mute-bg-color: var(--button-fill-default-bg-color);
448
451
  --button-fill-mute-count-bg-color: var(--c-gray-6);
449
- --button-fill-default-count-bg-color: var(--c-gray-7);
450
- --button-fill-mute-loader-color: var(--c-neutral);
451
- --button-fill-mute-hover-border-color: var(--c-border-mute-2);
452
+ --button-fill-mute-loader-color: var(--c-text-2);
453
+ --button-fill-mute-hover-border-color: var(--input-border-color);
452
454
  --button-fill-mute-hover-text-color: var(--c-text-2);
453
- --button-fill-mute-hover-bg-color: var(--c-bg-mute-2);
454
- --button-fill-mute-active-border-color: var(--c-border-mute-3);
455
+ --button-fill-mute-hover-bg-color: var(--button-fill-default-hover-bg-color);
456
+ --button-fill-mute-active-border-color: var(--input-border-color);
455
457
  --button-fill-mute-active-text-color: var(--c-text-2);
456
- --button-fill-mute-active-bg-color: var(--c-bg-mute-3);
457
- --button-fill-mute-disabled-border-color: var(--c-border-mute-1);
458
+ --button-fill-mute-active-bg-color: var(--button-fill-default-active-bg-color);
459
+ --button-fill-mute-disabled-border-color: var(--button-fill-default-disabled-border-color);
458
460
  --button-fill-mute-disabled-text-color: var(--c-text-3);
459
461
  --button-fill-mute-disabled-content-color: var(--c-text-3);
460
- --button-fill-mute-disabled-bg-color: var(--c-bg-mute-1);
462
+ --button-fill-mute-disabled-bg-color: var(--button-fill-default-disabled-bg-color);
461
463
 
462
464
  --button-fill-neutral-border-color: transparent;
463
465
  --button-fill-neutral-text-color: var(--c-text-inverse-1);
@@ -544,59 +546,59 @@
544
546
  --button-fill-success-disabled-content-color: var(--c-white-a2);
545
547
  --button-fill-success-disabled-bg-color: var(--c-green-8);
546
548
 
547
- --button-fill-warning-border-color: var(--c-border-mute-1);
548
- --button-fill-warning-text-color: var(--c-text-warning-1);
549
- --button-fill-warning-content-color: var(--c-text-warning-1);
550
- --button-fill-warning-bg-color: var(--c-bg-mute-1);
551
- --button-fill-warning-loader-color: var(--c-neutral);
552
- --button-fill-warning-count-bg-color: var(--c-bg-mute-3);
553
- --button-fill-warning-hover-border-color: var(--c-border-warning-1);
554
- --button-fill-warning-hover-text-color: var(--c-white);
555
- --button-fill-warning-hover-bg-color: var(--c-bg-warning-1);
556
- --button-fill-warning-active-border-color: var(--c-border-warning-2);
557
- --button-fill-warning-active-text-color: var(--c-white);
558
- --button-fill-warning-active-bg-color: var(--c-bg-warning-2);
559
- --button-fill-warning-disabled-border-color: var(--c-border-mute-1);
560
- --button-fill-warning-disabled-text-color: var(--c-text-warning-2);
561
- --button-fill-warning-disabled-content-color: var(--c-text-warning-2);
562
- --button-fill-warning-disabled-bg-color: var(--c-bg-mute-1);
563
-
564
- --button-fill-danger-border-color: var(--c-border-mute-1);
565
- --button-fill-danger-text-color: var(--c-text-danger-1);
566
- --button-fill-danger-content-color: var(--c-text-danger-1);
567
- --button-fill-danger-bg-color: var(--c-bg-mute-1);
568
- --button-fill-danger-loader-color: var(--c-neutral);
569
- --button-fill-danger-count-bg-color: var(--c-bg-mute-3);
570
- --button-fill-danger-hover-border-color: var(--c-border-danger-1);
571
- --button-fill-danger-hover-text-color: var(--c-white);
572
- --button-fill-danger-hover-bg-color: var(--c-bg-danger-1);
573
- --button-fill-danger-active-border-color: var(--c-border-danger-2);
574
- --button-fill-danger-active-text-color: var(--c-white);
575
- --button-fill-danger-active-bg-color: var(--c-bg-danger-2);
576
- --button-fill-danger-disabled-border-color: var(--c-border-mute-1);
577
- --button-fill-danger-disabled-text-color: var(--c-text-danger-2);
578
- --button-fill-danger-disabled-content-color: var(--c-text-danger-2);
579
- --button-fill-danger-disabled-bg-color: var(--c-bg-mute-1);
580
-
581
- --button-outline-default-border-color: var(--c-border-mute-1);
549
+ --button-fill-warning-border-color: var(--c-border-warning-1);
550
+ --button-fill-warning-text-color: var(--c-white-1);
551
+ --button-fill-warning-content-color: var(--c-white-1);
552
+ --button-fill-warning-bg-color: var(--c-bg-warning-1);
553
+ --button-fill-warning-loader-color: var(--c-white-1);
554
+ --button-fill-warning-count-bg-color: var(--c-yellow-8);
555
+ --button-fill-warning-hover-border-color: var(--c-border-warning-2);
556
+ --button-fill-warning-hover-text-color: var(--c-white-1);
557
+ --button-fill-warning-hover-bg-color: var(--c-bg-warning-2);
558
+ --button-fill-warning-active-border-color: var(--c-border-warning-3);
559
+ --button-fill-warning-active-text-color: var(--c-white-1);
560
+ --button-fill-warning-active-bg-color: var(--c-bg-warning-3);
561
+ --button-fill-warning-disabled-border-color: var(--c-yellow-9);
562
+ --button-fill-warning-disabled-text-color: var(--c-white-a2);
563
+ --button-fill-warning-disabled-content-color: var(--c-white-a2);
564
+ --button-fill-warning-disabled-bg-color: var(--c-yellow-8);
565
+
566
+ --button-fill-danger-border-color: var(--c-border-danger-1);
567
+ --button-fill-danger-text-color: var(--c-white-1);
568
+ --button-fill-danger-content-color: var(--c-white-1);
569
+ --button-fill-danger-bg-color: var(--c-bg-danger-1);
570
+ --button-fill-danger-loader-color: var(--c-white-1);
571
+ --button-fill-danger-count-bg-color: var(--c-red-8);
572
+ --button-fill-danger-hover-border-color: var(--c-border-danger-2);
573
+ --button-fill-danger-hover-text-color: var(--c-white-1);
574
+ --button-fill-danger-hover-bg-color: var(--c-bg-danger-2);
575
+ --button-fill-danger-active-border-color: var(--c-border-danger-3);
576
+ --button-fill-danger-active-text-color: var(--c-white-1);
577
+ --button-fill-danger-active-bg-color: var(--c-bg-danger-3);
578
+ --button-fill-danger-disabled-border-color: var(--c-red-9);
579
+ --button-fill-danger-disabled-text-color: var(--c-white-a2);
580
+ --button-fill-danger-disabled-content-color: var(--c-white-a2);
581
+ --button-fill-danger-disabled-bg-color: var(--c-red-8);
582
+
583
+ --button-outline-default-border-color: var(--input-border-color);
582
584
  --button-outline-default-text-color: var(--c-text-1);
583
585
  --button-outline-default-content-color: var(--c-text-1);
584
586
  --button-outline-default-loader-color: var(--c-neutral-1);
585
587
  --button-outline-default-count-bg-color: var(--c-bg-mute-1);
586
- --button-outline-default-hover-bg-color: var(--c-neutral-dimm-a1);
587
- --button-outline-default-active-bg-color: var(--c-neutral-dimm-a2);
588
- --button-outline-default-disabled-border-color: var(--c-border-mute-1);
588
+ --button-outline-default-hover-bg-color: var(--button-fill-default-hover-bg-color);
589
+ --button-outline-default-active-bg-color: var(--button-fill-default-active-bg-color);
590
+ --button-outline-default-disabled-border-color: var(--input-border-color);
589
591
  --button-outline-default-disabled-text-color: var(--c-text-3);
590
592
  --button-outline-default-disabled-content-color: var(--c-text-3);
591
593
 
592
- --button-outline-mute-border-color: var(--c-border-mute-1);
594
+ --button-outline-mute-border-color: var(--input-border-color);
593
595
  --button-outline-mute-text-color: var(--c-text-2);
594
596
  --button-outline-mute-content-color: var(--c-text-2);
595
597
  --button-outline-mute-loader-color: var(--c-neutral-1);
596
598
  --button-outline-mute-count-bg-color: var(--c-bg-mute-1);
597
- --button-outline-mute-hover-bg-color: var(--c-neutral-dimm-a1);
598
- --button-outline-mute-active-bg-color: var(--c-neutral-dimm-a2);
599
- --button-outline-mute-disabled-border-color: var(--c-border-mute-1);
599
+ --button-outline-mute-hover-bg-color: var(--button-fill-default-hover-bg-color);
600
+ --button-outline-mute-active-bg-color: var(--button-fill-default-active-bg-color);
601
+ --button-outline-mute-disabled-border-color: var(--input-border-color);
600
602
  --button-outline-mute-disabled-text-color: var(--c-text-3);
601
603
  --button-outline-mute-disabled-content-color: var(--c-text-3);
602
604
 
@@ -605,9 +607,9 @@
605
607
  --button-outline-neutral-content-color: var(--c-text-1);
606
608
  --button-outline-neutral-loader-color: var(--c-neutral-1);
607
609
  --button-outline-neutral-count-bg-color: var(--c-bg-mute-1);
608
- --button-outline-neutral-hover-bg-color: var(--c-neutral-dimm-a1);
609
- --button-outline-neutral-active-bg-color: var(--c-neutral-dimm-a2);
610
- --button-outline-neutral-disabled-border-color: var(--c-neutral-3);
610
+ --button-outline-neutral-hover-bg-color: var(--button-fill-default-hover-bg-color);
611
+ --button-outline-neutral-active-bg-color: var(--button-fill-default-active-bg-color);
612
+ --button-outline-neutral-disabled-border-color: var(--button-fill-default-disabled-border-color);
611
613
  --button-outline-neutral-disabled-text-color: var(--c-text-3);
612
614
  --button-outline-neutral-disabled-content-color: var(--c-text-3);
613
615
 
@@ -680,24 +682,24 @@
680
682
  --button-text-default-text-color: var(--c-text-1);
681
683
  --button-text-default-content-color: var(--c-text-1);
682
684
  --button-text-default-count-bg-color: var(--c-bg-mute-1);
683
- --button-text-default-hover-bg-color: var(--c-bg-mute-1);
684
- --button-text-default-active-bg-color: var(--c-bg-mute-2);
685
+ --button-text-default-hover-bg-color: var(--button-fill-default-hover-bg-color);
686
+ --button-text-default-active-bg-color: var(--button-fill-default-active-bg-color);
685
687
  --button-text-default-disabled-text-color: var(--c-text-3);
686
688
  --button-text-default-disabled-content-color: var(--c-text-3);
687
689
 
688
690
  --button-text-mute-text-color: var(--c-text-2);
689
691
  --button-text-mute-content-color: var(--c-text-2);
690
692
  --button-text-mute-count-bg-color: var(--c-bg-mute-1);
691
- --button-text-mute-hover-bg-color: var(--c-bg-mute-1);
692
- --button-text-mute-active-bg-color: var(--c-bg-mute-2);
693
+ --button-text-mute-hover-bg-color: var(--button-fill-default-hover-bg-color);
694
+ --button-text-mute-active-bg-color: var(--button-fill-default-active-bg-color);
693
695
  --button-text-mute-disabled-text-color: var(--c-text-3);
694
696
  --button-text-mute-disabled-content-color: var(--c-text-3);
695
697
 
696
698
  --button-text-neutral-text-color: var(--c-text-1);
697
699
  --button-text-neutral-content-color: var(--c-text-1);
698
700
  --button-text-neutral-count-bg-color: var(--c-bg-mute-1);
699
- --button-text-neutral-hover-bg-color: var(--c-neutral-dimm-a1);
700
- --button-text-neutral-active-bg-color: var(--c-neutral-dimm-a2);
701
+ --button-text-neutral-hover-bg-color: var(--button-fill-default-hover-bg-color);
702
+ --button-text-neutral-active-bg-color: var(--button-fill-default-active-bg-color);
701
703
  --button-text-neutral-disabled-text-color: var(--c-text-3);
702
704
  --button-text-neutral-disabled-content-color: var(--c-text-3);
703
705
 
@@ -750,18 +752,27 @@
750
752
  --button-text-danger-disabled-content-color: var(--c-text-danger-3);
751
753
  }
752
754
 
755
+ .dark {
756
+ --button-fill-default-bg-color: color-mix(in oklab, var(--button-fill-default-border-color) 30%, transparent);
757
+ --button-fill-default-box-shadow: none;
758
+ --button-fill-default-hover-bg-color: color-mix(in oklab, var(--button-fill-default-border-color) 50%, transparent);
759
+ --button-fill-default-active-bg-color: color-mix(in oklab, var(--button-fill-default-border-color) 70%, transparent);
760
+ --button-fill-default-disabled-border-color: var(--c-border);
761
+ --button-fill-default-disabled-bg-color: var(--button-fill-default-bg-color);
762
+ }
763
+
753
764
  /**
754
765
  * Component: Pill
755
766
  * -------------------------------------------------------------------------- */
756
767
 
757
768
  :root {
758
- --pill-dimm-default-border-color: var(--c-divider);
769
+ --pill-dimm-default-border-color: var(--c-border);
759
770
  --pill-dimm-default-text-color: var(--c-text-1);
760
771
  --pill-dimm-default-bg-color: transparent;
761
772
  --pill-dimm-default-hover-bg-color: var(--c-bg-2);
762
773
  --pill-dimm-default-active-bg-color: var(--c-bg-3);
763
774
 
764
- --pill-dimm-mute-border-color: var(--c-divider);
775
+ --pill-dimm-mute-border-color: var(--c-border);
765
776
  --pill-dimm-mute-text-color: var(--c-text-2);
766
777
  --pill-dimm-mute-bg-color: transparent;
767
778
  --pill-dimm-mute-hover-bg-color: var(--c-bg-2);
@@ -885,20 +896,21 @@
885
896
  * -------------------------------------------------------------------------- */
886
897
 
887
898
  :root {
899
+ --input-border-color: oklch(0.922 0 0);
888
900
  --input-label-color: var(--c-text-1);
889
- --input-border-color: var(--c-border-mute-1);
890
901
  --input-value-color: var(--c-text-1);
891
902
  --input-placeholder-color: var(--c-text-3);
892
- --input-bg-color: var(--c-bg-elv-2);
893
- --input-hover-border-color: var(--c-border-mute-3);
903
+ --input-bg-color: var(--c-bg-1);
904
+ --input-box-shadow: var(--shadow-depth-1);
905
+ --input-hover-border-color: oklch(0.708 0 0);
894
906
  --input-focus-border-color: var(--c-border-info-1);
895
907
  --input-error-text-color: var(--c-text-danger-1);
896
908
  --input-error-border-color: var(--c-border-danger-1);
897
909
  --input-warning-text-color: var(--c-text-warning-1);
898
910
  --input-warning-border-color: var(--c-border-warning-1);
899
- --input-disabled-border-color: var(--c-border-mute-1);
911
+ --input-disabled-border-color: var(--input-border-color);
900
912
  --input-disabled-value-color: var(--c-text-1);
901
- --input-disabled-bg-color: var(--c-bg-mute-1);
913
+ --input-disabled-bg-color: color-mix(in oklab, var(--input-disabled-border-color) 50%, transparent);
902
914
 
903
915
  --input-mini-font-size: 14px;
904
916
  --input-mini-label-font-size: 12px;
@@ -914,3 +926,11 @@
914
926
  --input-switch-disabled-toggle-color: var(--c-fg-gray-1);
915
927
  --input-switch-disabled-bg-color: var(--c-bg-mute-1);
916
928
  }
929
+
930
+ .dark {
931
+ --input-border-color: oklch(1 0 0 / 15%);
932
+ --input-bg-color: color-mix(in oklab, var(--input-border-color) 30%, transparent);
933
+ --input-hover-border-color: oklch(0.556 0 0);
934
+ --input-disabled-border-color: var(--c-border);
935
+ --input-disabled-bg-color: color-mix(in oklab, var(--input-disabled-border-color) 80%, transparent);
936
+ }