@14ch/svelte-ui 0.0.71 → 0.0.72

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 (10) hide show
  1. package/dist/assets/styles/core.scss +2 -0
  2. package/dist/assets/styles/import.css +22 -8
  3. package/dist/assets/styles/variables.scss +22 -8
  4. package/dist/components/DatepickerCalendar.svelte +2 -1
  5. package/dist/components/Fab.svelte +6 -6
  6. package/dist/components/Modal.svelte +2 -2
  7. package/dist/components/NavItem.svelte +18 -8
  8. package/dist/components/Popup.svelte +4 -4
  9. package/dist/components/PopupMenu.svelte +2 -2
  10. package/package.json +1 -1
package/dist/assets/styles/core.scss CHANGED
@@ -19,6 +19,8 @@
19
19
  button {
20
20
  background: transparent;
21
21
  border: none;
22
+ /* UA 既定の color: buttontext は継承より強く、ダークテーマでも黒のままになる */
23
+ color: inherit;
22
24
  font-size: inherit;
23
25
  font-weight: inherit;
24
26
  cursor: pointer;
package/dist/assets/styles/import.css CHANGED
@@ -157,6 +157,8 @@
157
157
  --svelte-ui-form-bg: var(--base-50-transparent);
158
158
  /* サーフェス背景色 */
159
159
  --svelte-ui-surface-color: var(--white);
160
+ /* 浮き上がる面（ポップアップ・ダイアログ等）。ライトは白より明るくできないため地の面と同じ */
161
+ --svelte-ui-surface-elevated-color: var(--svelte-ui-surface-color);
160
162
  --svelte-ui-surface-accent-color: var(--base-50-transparent);
161
163
  --svelte-ui-surface-inverse-color: var(--base-800-transparent);
162
164
  /* スケルトン色 */
@@ -174,6 +176,10 @@
174
176
  --svelte-ui-disabled-bg: var(--base-50-transparent);
175
177
  /* Glass色 */
176
178
  --svelte-ui-glass-bg: var(--base-50-transparent);
179
+ /* 影の色（浮き上がり表現） */
180
+ --svelte-ui-shadow-color-strong: rgba(0, 0, 0, 0.2);
181
+ --svelte-ui-shadow-color: rgba(0, 0, 0, 0.14);
182
+ --svelte-ui-shadow-color-weak: rgba(0, 0, 0, 0.12);
177
183
  }
178
184
 
179
185
  /* ====================================
@@ -199,6 +205,8 @@
199
205
  --svelte-ui-form-bg: var(--white-100-transparent);
200
206
  /* サーフェス背景色 */
201
207
  --svelte-ui-surface-color: var(--base-950);
208
+ /* 浮き上がる面。暗いテーマでは「明るい＝手前」で奥行きを示すため一段明るくする */
209
+ --svelte-ui-surface-elevated-color: var(--base-900);
202
210
  --svelte-ui-surface-accent-color: var(--white-50-transparent);
203
211
  --svelte-ui-surface-inverse-color: var(--white-800-transparent);
204
212
  /* スケルトン色 */
@@ -214,6 +222,10 @@
214
222
  --svelte-ui-disabled-bg: var(--white-100-transparent);
215
223
  /* Glass色 */
216
224
  --svelte-ui-glass-bg: var(--white-100-transparent);
225
+ /* 影の色（浮き上がり表現）。暗い背景では黒い影が沈んで見えないため濃くする */
226
+ --svelte-ui-shadow-color-strong: rgba(0, 0, 0, 0.6);
227
+ --svelte-ui-shadow-color: rgba(0, 0, 0, 0.45);
228
+ --svelte-ui-shadow-color-weak: rgba(0, 0, 0, 0.4);
217
229
  }
218
230
 
219
231
  :where(:root),
@@ -369,7 +381,7 @@
369
381
  --svelte-ui-nav-children-offset: 8px;
370
382
  /* Nav: sub-menu */
371
383
  --svelte-ui-nav-sub-popup-min-width: 160px;
372
- --svelte-ui-nav-sub-popup-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
384
+ --svelte-ui-nav-sub-popup-shadow: 0 4px 16px var(--svelte-ui-shadow-color-weak);
373
385
  --svelte-ui-nav-item-child-indent: 32px;
374
386
  --svelte-ui-nav-bottom-sheet-overlay-bg: rgba(0, 0, 0, 0.4);
375
387
  --svelte-ui-nav-bottom-sheet-border-radius: 16px 16px 0 0;
@@ -581,7 +593,7 @@
581
593
  --svelte-ui-combobox-border-radius: var(--svelte-ui-form-border-radius);
582
594
  --svelte-ui-combobox-border-radius-rounded: var(--svelte-ui-form-border-radius-rounded);
583
595
  --svelte-ui-combobox-border-color: var(--svelte-ui-border-weak-color);
584
- --svelte-ui-combobox-bg: var(--svelte-ui-surface-color);
596
+ --svelte-ui-combobox-bg: var(--svelte-ui-surface-elevated-color);
585
597
  --svelte-ui-combobox-dropdown-icon-color: var(--svelte-ui-dropdown-icon-color);
586
598
  --svelte-ui-combobox-option-hover-bg: var(--svelte-ui-hover-overlay);
587
599
  --svelte-ui-combobox-option-selected-bg: var(--svelte-ui-select-overlay);
@@ -684,7 +696,7 @@
684
696
  --svelte-ui-snackbar-z-index: 9999;
685
697
  --svelte-ui-snackbar-font-size: var(--svelte-ui-font-size);
686
698
  --svelte-ui-snackbar-line-height: 1.4;
687
- --svelte-ui-snackbar-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
699
+ --svelte-ui-snackbar-shadow: 0 4px 12px var(--svelte-ui-shadow-color);
688
700
  --svelte-ui-snackbar-action-font-size: var(--svelte-ui-font-size-xs);
689
701
  --svelte-ui-snackbar-action-font-weight: 600;
690
702
  --svelte-ui-snackbar-action-padding: 4px 8px;
@@ -700,7 +712,7 @@
700
712
  --svelte-ui-snackbar-default-filled-text-color: var(--svelte-ui-text-inverse-color);
701
713
  --svelte-ui-snackbar-default-outlined-bg: color-mix(
702
714
  in srgb,
703
- var(--svelte-ui-surface-color) 85%,
715
+ var(--svelte-ui-surface-elevated-color) 85%,
704
716
  transparent
705
717
  );
706
718
  --svelte-ui-snackbar-default-outlined-text-color: var(--svelte-ui-text-color);
@@ -714,7 +726,7 @@
714
726
  --svelte-ui-snackbar-info-filled-text-color: var(--svelte-ui-text-on-filled-color);
715
727
  --svelte-ui-snackbar-info-outlined-bg: color-mix(
716
728
  in srgb,
717
- var(--svelte-ui-surface-color) 85%,
729
+ var(--svelte-ui-surface-elevated-color) 85%,
718
730
  transparent
719
731
  );
720
732
  --svelte-ui-snackbar-info-outlined-text-color: var(--svelte-ui-info-color);
@@ -728,7 +740,7 @@
728
740
  --svelte-ui-snackbar-success-filled-text-color: var(--svelte-ui-text-on-filled-color);
729
741
  --svelte-ui-snackbar-success-outlined-bg: color-mix(
730
742
  in srgb,
731
- var(--svelte-ui-surface-color) 85%,
743
+ var(--svelte-ui-surface-elevated-color) 85%,
732
744
  transparent
733
745
  );
734
746
  --svelte-ui-snackbar-success-outlined-text-color: var(--svelte-ui-success-color);
@@ -742,7 +754,7 @@
742
754
  --svelte-ui-snackbar-warning-filled-text-color: var(--svelte-ui-text-on-filled-color);
743
755
  --svelte-ui-snackbar-warning-outlined-bg: color-mix(
744
756
  in srgb,
745
- var(--svelte-ui-surface-color) 85%,
757
+ var(--svelte-ui-surface-elevated-color) 85%,
746
758
  transparent
747
759
  );
748
760
  --svelte-ui-snackbar-warning-outlined-text-color: var(--svelte-ui-warning-color);
@@ -756,7 +768,7 @@
756
768
  --svelte-ui-snackbar-error-filled-text-color: var(--svelte-ui-text-on-filled-color);
757
769
  --svelte-ui-snackbar-error-outlined-bg: color-mix(
758
770
  in srgb,
759
- var(--svelte-ui-surface-color) 85%,
771
+ var(--svelte-ui-surface-elevated-color) 85%,
760
772
  transparent
761
773
  );
762
774
  --svelte-ui-snackbar-error-outlined-text-color: var(--svelte-ui-error-color);
@@ -927,6 +939,8 @@
927
939
  button {
928
940
  background: transparent;
929
941
  border: none;
942
+ /* UA 既定の color: buttontext は継承より強く、ダークテーマでも黒のままになる */
943
+ color: inherit;
930
944
  font-size: inherit;
931
945
  font-weight: inherit;
932
946
  cursor: pointer;
package/dist/assets/styles/variables.scss CHANGED
@@ -163,6 +163,8 @@
163
163
 
164
164
  /* サーフェス背景色 */
165
165
  --svelte-ui-surface-color: var(--white);
166
+ /* 浮き上がる面（ポップアップ・ダイアログ等）。ライトは白より明るくできないため地の面と同じ */
167
+ --svelte-ui-surface-elevated-color: var(--svelte-ui-surface-color);
166
168
  --svelte-ui-surface-accent-color: var(--base-50-transparent);
167
169
  --svelte-ui-surface-inverse-color: var(--base-800-transparent);
168
170
 
@@ -187,6 +189,11 @@
187
189
 
188
190
  /* Glass色 */
189
191
  --svelte-ui-glass-bg: var(--base-50-transparent);
192
+
193
+ /* 影の色（浮き上がり表現） */
194
+ --svelte-ui-shadow-color-strong: rgba(0, 0, 0, 0.2);
195
+ --svelte-ui-shadow-color: rgba(0, 0, 0, 0.14);
196
+ --svelte-ui-shadow-color-weak: rgba(0, 0, 0, 0.12);
190
197
  }
191
198
 
192
199
  /* ====================================
@@ -217,6 +224,8 @@
217
224
 
218
225
  /* サーフェス背景色 */
219
226
  --svelte-ui-surface-color: var(--base-950);
227
+ /* 浮き上がる面。暗いテーマでは「明るい＝手前」で奥行きを示すため一段明るくする */
228
+ --svelte-ui-surface-elevated-color: var(--base-900);
220
229
  --svelte-ui-surface-accent-color: var(--white-50-transparent);
221
230
  --svelte-ui-surface-inverse-color: var(--white-800-transparent);
222
231
 
@@ -238,6 +247,11 @@
238
247
 
239
248
  /* Glass色 */
240
249
  --svelte-ui-glass-bg: var(--white-100-transparent);
250
+
251
+ /* 影の色（浮き上がり表現）。暗い背景では黒い影が沈んで見えないため濃くする */
252
+ --svelte-ui-shadow-color-strong: rgba(0, 0, 0, 0.6);
253
+ --svelte-ui-shadow-color: rgba(0, 0, 0, 0.45);
254
+ --svelte-ui-shadow-color-weak: rgba(0, 0, 0, 0.4);
241
255
  }
242
256
 
243
257
  :where(:root),
@@ -407,7 +421,7 @@
407
421
  --svelte-ui-nav-children-offset: 8px;
408
422
  /* Nav: sub-menu */
409
423
  --svelte-ui-nav-sub-popup-min-width: 160px;
410
- --svelte-ui-nav-sub-popup-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
424
+ --svelte-ui-nav-sub-popup-shadow: 0 4px 16px var(--svelte-ui-shadow-color-weak);
411
425
  --svelte-ui-nav-item-child-indent: 32px;
412
426
  --svelte-ui-nav-bottom-sheet-overlay-bg: rgba(0, 0, 0, 0.4);
413
427
  --svelte-ui-nav-bottom-sheet-border-radius: 16px 16px 0 0;
@@ -631,7 +645,7 @@
631
645
  --svelte-ui-combobox-border-radius: var(--svelte-ui-form-border-radius);
632
646
  --svelte-ui-combobox-border-radius-rounded: var(--svelte-ui-form-border-radius-rounded);
633
647
  --svelte-ui-combobox-border-color: var(--svelte-ui-border-weak-color);
634
- --svelte-ui-combobox-bg: var(--svelte-ui-surface-color);
648
+ --svelte-ui-combobox-bg: var(--svelte-ui-surface-elevated-color);
635
649
  --svelte-ui-combobox-dropdown-icon-color: var(--svelte-ui-dropdown-icon-color);
636
650
  --svelte-ui-combobox-option-hover-bg: var(--svelte-ui-hover-overlay);
637
651
  --svelte-ui-combobox-option-selected-bg: var(--svelte-ui-select-overlay);
@@ -744,7 +758,7 @@
744
758
  --svelte-ui-snackbar-z-index: 9999;
745
759
  --svelte-ui-snackbar-font-size: var(--svelte-ui-font-size);
746
760
  --svelte-ui-snackbar-line-height: 1.4;
747
- --svelte-ui-snackbar-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
761
+ --svelte-ui-snackbar-shadow: 0 4px 12px var(--svelte-ui-shadow-color);
748
762
  --svelte-ui-snackbar-action-font-size: var(--svelte-ui-font-size-xs);
749
763
  --svelte-ui-snackbar-action-font-weight: 600;
750
764
  --svelte-ui-snackbar-action-padding: 4px 8px;
@@ -761,7 +775,7 @@
761
775
  --svelte-ui-snackbar-default-filled-text-color: var(--svelte-ui-text-inverse-color);
762
776
  --svelte-ui-snackbar-default-outlined-bg: color-mix(
763
777
  in srgb,
764
- var(--svelte-ui-surface-color) 85%,
778
+ var(--svelte-ui-surface-elevated-color) 85%,
765
779
  transparent
766
780
  );
767
781
  --svelte-ui-snackbar-default-outlined-text-color: var(--svelte-ui-text-color);
@@ -776,7 +790,7 @@
776
790
  --svelte-ui-snackbar-info-filled-text-color: var(--svelte-ui-text-on-filled-color);
777
791
  --svelte-ui-snackbar-info-outlined-bg: color-mix(
778
792
  in srgb,
779
- var(--svelte-ui-surface-color) 85%,
793
+ var(--svelte-ui-surface-elevated-color) 85%,
780
794
  transparent
781
795
  );
782
796
  --svelte-ui-snackbar-info-outlined-text-color: var(--svelte-ui-info-color);
@@ -791,7 +805,7 @@
791
805
  --svelte-ui-snackbar-success-filled-text-color: var(--svelte-ui-text-on-filled-color);
792
806
  --svelte-ui-snackbar-success-outlined-bg: color-mix(
793
807
  in srgb,
794
- var(--svelte-ui-surface-color) 85%,
808
+ var(--svelte-ui-surface-elevated-color) 85%,
795
809
  transparent
796
810
  );
797
811
  --svelte-ui-snackbar-success-outlined-text-color: var(--svelte-ui-success-color);
@@ -806,7 +820,7 @@
806
820
  --svelte-ui-snackbar-warning-filled-text-color: var(--svelte-ui-text-on-filled-color);
807
821
  --svelte-ui-snackbar-warning-outlined-bg: color-mix(
808
822
  in srgb,
809
- var(--svelte-ui-surface-color) 85%,
823
+ var(--svelte-ui-surface-elevated-color) 85%,
810
824
  transparent
811
825
  );
812
826
  --svelte-ui-snackbar-warning-outlined-text-color: var(--svelte-ui-warning-color);
@@ -821,7 +835,7 @@
821
835
  --svelte-ui-snackbar-error-filled-text-color: var(--svelte-ui-text-on-filled-color);
822
836
  --svelte-ui-snackbar-error-outlined-bg: color-mix(
823
837
  in srgb,
824
- var(--svelte-ui-surface-color) 85%,
838
+ var(--svelte-ui-surface-elevated-color) 85%,
825
839
  transparent
826
840
  );
827
841
  --svelte-ui-snackbar-error-outlined-text-color: var(--svelte-ui-error-color);
package/dist/components/DatepickerCalendar.svelte CHANGED
@@ -730,7 +730,8 @@
730
730
  .datepicker-calendar__month-button {
731
731
  padding: 8px;
732
732
  border-radius: var(--svelte-ui-border-radius);
733
- background-color: var(--svelte-ui-surface-color);
733
+ /* 器（ポップアップ）の色に追従させる */
734
+ background-color: transparent;
734
735
  color: var(--svelte-ui-datepicker-date-color);
735
736
  font-size: var(--svelte-ui-font-size);
736
737
  cursor: pointer;
package/dist/components/Fab.svelte CHANGED
@@ -488,24 +488,24 @@
488
488
  -webkit-backdrop-filter: var(--svelte-ui-glass-blur);
489
489
  }
490
490
  .fab.fab--shadow {
491
- box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
491
+ box-shadow: 0px 3px 5px -1px var(--svelte-ui-shadow-color-strong), 0px 6px 10px 0px var(--svelte-ui-shadow-color), 0px 1px 18px 0px var(--svelte-ui-shadow-color-weak);
492
492
  }
493
493
  .fab.fab--outlined.fab--shadow {
494
- box-shadow: inset 0 0 0 var(--svelte-ui-border-width) currentColor, 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
494
+ box-shadow: inset 0 0 0 var(--svelte-ui-border-width) currentColor, 0px 3px 5px -1px var(--svelte-ui-shadow-color-strong), 0px 6px 10px 0px var(--svelte-ui-shadow-color), 0px 1px 18px 0px var(--svelte-ui-shadow-color-weak);
495
495
  }
496
496
  @media (hover: hover) {
497
497
  .fab.fab--shadow:hover {
498
- box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
498
+ box-shadow: 0px 5px 5px -3px var(--svelte-ui-shadow-color-strong), 0px 8px 10px 1px var(--svelte-ui-shadow-color), 0px 3px 14px 2px var(--svelte-ui-shadow-color-weak);
499
499
  }
500
500
  .fab.fab--outlined.fab--shadow:hover {
501
- box-shadow: inset 0 0 0 var(--svelte-ui-border-width) currentColor, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
501
+ box-shadow: inset 0 0 0 var(--svelte-ui-border-width) currentColor, 0px 5px 5px -3px var(--svelte-ui-shadow-color-strong), 0px 8px 10px 1px var(--svelte-ui-shadow-color), 0px 3px 14px 2px var(--svelte-ui-shadow-color-weak);
502
502
  }
503
503
  }
504
504
  .fab.fab--shadow:active {
505
- box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
505
+ box-shadow: 0px 7px 8px -4px var(--svelte-ui-shadow-color-strong), 0px 12px 17px 2px var(--svelte-ui-shadow-color), 0px 5px 22px 4px var(--svelte-ui-shadow-color-weak);
506
506
  }
507
507
  .fab.fab--outlined.fab--shadow:active {
508
- box-shadow: inset 0 0 0 var(--svelte-ui-border-width) currentColor, 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
508
+ box-shadow: inset 0 0 0 var(--svelte-ui-border-width) currentColor, 0px 7px 8px -4px var(--svelte-ui-shadow-color-strong), 0px 12px 17px 2px var(--svelte-ui-shadow-color), 0px 5px 22px 4px var(--svelte-ui-shadow-color-weak);
509
509
  }
510
510
  .fab.fab--no-motion, .fab.fab--no-motion::before {
511
511
  transition-duration: 0.01s;
package/dist/components/Modal.svelte CHANGED
@@ -283,8 +283,8 @@
283
283
  .modal {
284
284
  padding: 0;
285
285
  border-width: 0;
286
- background-color: var(--svelte-ui-surface-color);
287
- box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
286
+ background-color: var(--svelte-ui-surface-elevated-color);
287
+ box-shadow: 0 11px 15px -7px var(--svelte-ui-shadow-color-strong), 0 24px 38px 3px var(--svelte-ui-shadow-color), 0 9px 46px 8px var(--svelte-ui-shadow-color-weak);
288
288
  }
289
289
 
290
290
  .modal::backdrop {
package/dist/components/NavItem.svelte CHANGED
@@ -60,7 +60,6 @@
60
60
  isChild?: boolean;
61
61
  /** Whether this item's children are currently visible. */
62
62
  isChildrenVisible?: boolean;
63
-
64
63
  };
65
64
 
66
65
  let {
@@ -84,7 +83,11 @@
84
83
  textColor,
85
84
  selectedTextColor,
86
85
  selectedBarColor,
87
- childrenVariant = variant === 'mobile' ? 'bottom-sheet' : variant === 'vertical' ? 'accordion' : 'bar',
86
+ childrenVariant = variant === 'mobile'
87
+ ? 'bottom-sheet'
88
+ : variant === 'vertical'
89
+ ? 'accordion'
90
+ : 'bar',
88
91
  customStyle,
89
92
  customChildrenStyle,
90
93
  customChildrenContainerStyle,
@@ -93,8 +96,7 @@
93
96
  isSelected = false,
94
97
  isDisabled = false,
95
98
  isChild = false,
96
- isChildrenVisible = $bindable(false),
97
-
99
+ isChildrenVisible = $bindable(false)
98
100
  }: NavItemProps = $props();
99
101
 
100
102
  // =========================================================================
@@ -139,14 +141,17 @@
139
141
  container?.querySelector<HTMLElement>('[data-nav-item-child]:not([tabindex="-1"])')?.focus();
140
142
 
141
143
  $effect(() => {
142
- if (isChildrenVisible && childrenVariant === 'bottom-sheet') tick().then(() => focusFirstChild(bottomSheetEl));
144
+ if (isChildrenVisible && childrenVariant === 'bottom-sheet')
145
+ tick().then(() => focusFirstChild(bottomSheetEl));
143
146
  });
144
147
 
145
148
  const popupPosition = $derived<PopupPosition>(
146
149
  variant === 'vertical' ? 'right-top' : variant === 'mobile' ? 'top-center' : 'bottom-left'
147
150
  );
148
151
 
149
- const showChevron = $derived(hasChildren && chevron && variant !== 'mobile' && childrenVariant !== 'expanded');
152
+ const showChevron = $derived(
153
+ hasChildren && chevron && variant !== 'mobile' && childrenVariant !== 'expanded'
154
+ );
150
155
 
151
156
  // popup の方向に合わせたアイコン。それ以外は expand_more
152
157
  const chevronIcon = $derived(
@@ -342,7 +347,12 @@
342
347
 
343
348
  <!-- accordion / expanded サブメニュー -->
344
349
  {#if childrenVariant === 'expanded' || (childrenVariant === 'accordion' && isChildrenVisible)}
345
- <div class="nav-item__children" role="presentation" style={customChildrenContainerStyle} transition:slide={{ duration: 200 }}>
350
+ <div
351
+ class="nav-item__children"
352
+ role="presentation"
353
+ style={customChildrenContainerStyle}
354
+ transition:slide={{ duration: 200 }}
355
+ >
346
356
  {#each item.children! as child}
347
357
  <NavItem
348
358
  item={child}
@@ -652,7 +662,7 @@
652
662
  left: 0;
653
663
  right: 0;
654
664
  z-index: 1001;
655
- background-color: var(--svelte-ui-surface-color);
665
+ background-color: var(--svelte-ui-surface-elevated-color);
656
666
  border-radius: var(--svelte-ui-nav-bottom-sheet-border-radius);
657
667
  padding: var(--svelte-ui-nav-bottom-sheet-padding);
658
668
  display: flex;
package/dist/components/Popup.svelte CHANGED
@@ -582,8 +582,8 @@
582
582
  :popover-open {
583
583
  border: solid 1px var(--svelte-ui-border-weak-color);
584
584
  border-radius: var(--svelte-ui-popup-border-radius);
585
- box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
586
- background: var(--svelte-ui-surface-color);
585
+ box-shadow: 0 11px 15px -7px var(--svelte-ui-shadow-color-strong), 0 24px 38px 3px var(--svelte-ui-shadow-color), 0 9px 46px 8px var(--svelte-ui-shadow-color-weak);
586
+ background: var(--svelte-ui-surface-elevated-color);
587
587
  color: var(--svelte-ui-text-color);
588
588
  z-index: 1000; /* Popupを最前面に表示 */
589
589
  }
@@ -640,8 +640,8 @@
640
640
  border-top-right-radius: var(--svelte-ui-popup-mobile-border-radius);
641
641
  border-bottom-left-radius: 0;
642
642
  border-bottom-right-radius: 0;
643
- box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
644
- background: var(--svelte-ui-surface-color);
643
+ box-shadow: 0 -4px 6px -1px var(--svelte-ui-shadow-color-weak), 0 -2px 4px -1px var(--svelte-ui-shadow-color-weak);
644
+ background: var(--svelte-ui-surface-elevated-color);
645
645
  z-index: var(--svelte-ui-z-modal);
646
646
  overflow-y: auto;
647
647
  overflow-x: hidden;
package/dist/components/PopupMenu.svelte CHANGED
@@ -318,9 +318,9 @@
318
318
 
319
319
  <style>@charset "UTF-8";
320
320
  .popup-menu {
321
- background-color: var(--svelte-ui-surface-color);
321
+ background-color: var(--svelte-ui-surface-elevated-color);
322
322
  border-radius: 4px;
323
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
323
+ box-shadow: 0 4px 12px var(--svelte-ui-shadow-color);
324
324
  outline: none;
325
325
  min-width: 160px;
326
326
  }
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@14ch/svelte-ui",
3
3
  "description": "Modern Svelte UI components library with TypeScript support",
4
4
  "private": false,
5
- "version": "0.0.71",
5
+ "version": "0.0.72",
6
6
  "type": "module",
7
7
  "keywords": [
8
8
  "svelte",