@14ch/svelte-ui 0.0.57 → 0.0.58

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 (7) hide show
  1. package/dist/assets/styles/import.css +23 -22
  2. package/dist/assets/styles/variables.scss +23 -22
  3. package/dist/components/DatepickerCalendar.svelte +3 -3
  4. package/dist/components/MultiSelect.svelte +1 -1
  5. package/dist/components/PopupMenu.svelte +2 -2
  6. package/dist/components/Select.svelte +1 -1
  7. package/package.json +1 -1
package/dist/assets/styles/import.css CHANGED
@@ -139,11 +139,11 @@
139
139
  * ==================================== */
140
140
  /* 基本テキスト色の定義 */
141
141
  --svelte-ui-text-color: var(--base-800-transparent);
142
- --svelte-ui-text-subtle-color: var(--base-400-transparent);
142
+ --svelte-ui-text-subtle-color: var(--base-500-transparent);
143
143
  --svelte-ui-text-on-filled-color: #ffffff;
144
144
  --svelte-ui-text-inverse-color: var(--white-800-transparent);
145
- --svelte-ui-text-inverse-subtle-color: var(--white-400-transparent);
146
- --svelte-ui-text-placeholder-color: var(--base-400-transparent);
145
+ --svelte-ui-text-inverse-subtle-color: var(--white-500-transparent);
146
+ --svelte-ui-text-placeholder-color: var(--base-500-transparent);
147
147
  /* ボーダーカラー */
148
148
  --svelte-ui-border-color: var(--base-200-transparent);
149
149
  --svelte-ui-border-weak-color: var(--base-100-transparent);
@@ -179,11 +179,11 @@
179
179
  [data-theme=dark] {
180
180
  /* 基本テキスト色の定義 */
181
181
  --svelte-ui-text-color: var(--white-800-transparent);
182
- --svelte-ui-text-subtle-color: var(--white-400-transparent);
182
+ --svelte-ui-text-subtle-color: var(--white-500-transparent);
183
183
  --svelte-ui-text-on-filled-color: #ffffff;
184
184
  --svelte-ui-text-inverse-color: var(--base-800-transparent);
185
- --svelte-ui-text-inverse-subtle-color: var(--base-400-transparent);
186
- --svelte-ui-text-placeholder-color: var(--white-400-transparent);
185
+ --svelte-ui-text-inverse-subtle-color: var(--base-500-transparent);
186
+ --svelte-ui-text-placeholder-color: var(--white-500-transparent);
187
187
  /* ボーダーカラー */
188
188
  --svelte-ui-border-color: var(--white-400-transparent);
189
189
  --svelte-ui-border-weak-color: var(--white-200-transparent);
@@ -226,8 +226,9 @@
226
226
  --svelte-ui-font-size-xs: 0.75rem;
227
227
  --svelte-ui-font-size-sm: 0.875rem;
228
228
  --svelte-ui-font-size: 1rem;
229
- --svelte-ui-font-size-lg: 1.125rem;
230
- --svelte-ui-font-size-xl: 1.25rem;
229
+ --svelte-ui-font-size-lg: 1.25rem;
230
+ --svelte-ui-font-size-xl: 1.5rem;
231
+ --svelte-ui-font-size-xxl: 2rem;
231
232
  /* Mobile Touch Size */
232
233
  --svelte-ui-touch-target-sm: 36px;
233
234
  --svelte-ui-touch-target: 44px;
@@ -263,9 +264,9 @@
263
264
  --svelte-ui-button-padding-sm: 6px 8px;
264
265
  --svelte-ui-button-padding: 8px 12px;
265
266
  --svelte-ui-button-padding-lg: 12px 16px;
266
- --svelte-ui-button-font-size-sm: 14px;
267
+ --svelte-ui-button-font-size-sm: var(--svelte-ui-font-size-sm);
267
268
  --svelte-ui-button-font-size: inherit;
268
- --svelte-ui-button-font-size-lg: 16px;
269
+ --svelte-ui-button-font-size-lg: var(--svelte-ui-font-size);
269
270
  --svelte-ui-button-line-height: 1.2em;
270
271
  --svelte-ui-button-border-radius: var(--svelte-ui-border-radius);
271
272
  --svelte-ui-button-border-radius-rounded: var(--svelte-ui-border-radius-rounded);
@@ -313,9 +314,9 @@
313
314
  --svelte-ui-segmented-control-button-height-sm: 24px;
314
315
  --svelte-ui-segmented-control-button-height: 32px;
315
316
  --svelte-ui-segmented-control-button-height-lg: 40px;
316
- --svelte-ui-segmented-control-font-size-sm: 12px;
317
- --svelte-ui-segmented-control-font-size: 14px;
318
- --svelte-ui-segmented-control-font-size-lg: 16px;
317
+ --svelte-ui-segmented-control-font-size-sm: var(--svelte-ui-font-size-sm);
318
+ --svelte-ui-segmented-control-font-size: var(--svelte-ui-font-size);
319
+ --svelte-ui-segmented-control-font-size-lg: var(--svelte-ui-font-size-lg);
319
320
  --svelte-ui-segmented-control-button-padding-sm: 4px 8px;
320
321
  --svelte-ui-segmented-control-button-padding: 6px 12px;
321
322
  --svelte-ui-segmented-control-button-padding-lg: 8px 16px;
@@ -354,7 +355,7 @@
354
355
  --svelte-ui-nav-mobile-min-height: 56px;
355
356
  --svelte-ui-nav-mobile-item-padding: 8px;
356
357
  --svelte-ui-nav-mobile-item-icon-gap: 8px;
357
- --svelte-ui-nav-mobile-item-font-size: 0.75rem;
358
+ --svelte-ui-nav-mobile-item-font-size: var(--svelte-ui-font-size-xs);
358
359
  /* Nav: vertical */
359
360
  --svelte-ui-nav-vertical-item-gap: 8px;
360
361
  /* Nav: horizontal */
@@ -385,9 +386,9 @@
385
386
  /* ラベル・説明 */
386
387
  --svelte-ui-step-nav-label-color: var(--svelte-ui-text-color);
387
388
  --svelte-ui-step-nav-description-color: var(--svelte-ui-text-subtle-color);
388
- --svelte-ui-step-nav-font-size-sm: 12px;
389
- --svelte-ui-step-nav-font-size: 14px;
390
- --svelte-ui-step-nav-font-size-lg: 16px;
389
+ --svelte-ui-step-nav-font-size-sm: var(--svelte-ui-font-size-xs);
390
+ --svelte-ui-step-nav-font-size: var(--svelte-ui-font-size-sm);
391
+ --svelte-ui-step-nav-font-size-lg: var(--svelte-ui-font-size);
391
392
  --svelte-ui-step-nav-description-font-size: var(--svelte-ui-font-size-sm);
392
393
  --svelte-ui-step-nav-label-line-height: 1.3;
393
394
  /* コネクター（完了区間 / 未完了区間） */
@@ -635,8 +636,8 @@
635
636
  --svelte-ui-dialog-padding: 16px 24px;
636
637
  --svelte-ui-dialog-body-padding: 24px;
637
638
  --svelte-ui-dialog-header-height: 56px;
638
- --svelte-ui-dialog-title-font-size: 1.4rem;
639
- --svelte-ui-dialog-description-font-size: 0.875rem;
639
+ --svelte-ui-dialog-title-font-size: var(--svelte-ui-font-size-xl);
640
+ --svelte-ui-dialog-description-font-size: var(--svelte-ui-font-size-sm);
640
641
  --svelte-ui-dialog-description-padding: 0.5rem 1rem;
641
642
  --svelte-ui-dialog-footer-padding: 8px;
642
643
  --svelte-ui-dialog-border: solid 1px var(--svelte-ui-border-weak-color);
@@ -649,8 +650,8 @@
649
650
  --svelte-ui-drawer-header-padding: 16px 24px;
650
651
  --svelte-ui-drawer-body-padding: 24px;
651
652
  --svelte-ui-drawer-header-height: 56px;
652
- --svelte-ui-drawer-title-font-size: 1.4rem;
653
- --svelte-ui-drawer-description-font-size: 0.875rem;
653
+ --svelte-ui-drawer-title-font-size: var(--svelte-ui-font-size-xl);
654
+ --svelte-ui-drawer-description-font-size: var(--svelte-ui-font-size-sm);
654
655
  --svelte-ui-drawer-description-padding: 0.5rem 1rem;
655
656
  --svelte-ui-drawer-footer-padding: 8px;
656
657
  --svelte-ui-drawer-border: 1px solid var(--svelte-ui-border-weak-color);
@@ -762,7 +763,7 @@
762
763
  --svelte-ui-skeleton-media-gap: 16px;
763
764
  --svelte-ui-skeleton-media-vertical-gap: 8px;
764
765
  --svelte-ui-skeleton-heading-width: 50%;
765
- --svelte-ui-skeleton-heading-font-size: 2rem;
766
+ --svelte-ui-skeleton-heading-font-size: var(--svelte-ui-font-size-xxl);
766
767
  --svelte-ui-skeleton-pattern-gap: 16px;
767
768
  --svelte-ui-skeleton-repeat-gap: 24px;
768
769
  /* Badge */
package/dist/assets/styles/variables.scss CHANGED
@@ -141,11 +141,11 @@
141
141
 
142
142
  /* 基本テキスト色の定義 */
143
143
  --svelte-ui-text-color: var(--base-800-transparent);
144
- --svelte-ui-text-subtle-color: var(--base-400-transparent);
144
+ --svelte-ui-text-subtle-color: var(--base-500-transparent);
145
145
  --svelte-ui-text-on-filled-color: #ffffff;
146
146
  --svelte-ui-text-inverse-color: var(--white-800-transparent);
147
- --svelte-ui-text-inverse-subtle-color: var(--white-400-transparent);
148
- --svelte-ui-text-placeholder-color: var(--base-400-transparent);
147
+ --svelte-ui-text-inverse-subtle-color: var(--white-500-transparent);
148
+ --svelte-ui-text-placeholder-color: var(--base-500-transparent);
149
149
 
150
150
  /* ボーダーカラー */
151
151
  --svelte-ui-border-color: var(--base-200-transparent);
@@ -193,11 +193,11 @@
193
193
  [data-theme='dark'] {
194
194
  /* 基本テキスト色の定義 */
195
195
  --svelte-ui-text-color: var(--white-800-transparent);
196
- --svelte-ui-text-subtle-color: var(--white-400-transparent);
196
+ --svelte-ui-text-subtle-color: var(--white-500-transparent);
197
197
  --svelte-ui-text-on-filled-color: #ffffff;
198
198
  --svelte-ui-text-inverse-color: var(--base-800-transparent);
199
- --svelte-ui-text-inverse-subtle-color: var(--base-400-transparent);
200
- --svelte-ui-text-placeholder-color: var(--white-400-transparent);
199
+ --svelte-ui-text-inverse-subtle-color: var(--base-500-transparent);
200
+ --svelte-ui-text-placeholder-color: var(--white-500-transparent);
201
201
 
202
202
  /* ボーダーカラー */
203
203
  --svelte-ui-border-color: var(--white-400-transparent);
@@ -253,8 +253,9 @@
253
253
  --svelte-ui-font-size-xs: 0.75rem;
254
254
  --svelte-ui-font-size-sm: 0.875rem;
255
255
  --svelte-ui-font-size: 1rem;
256
- --svelte-ui-font-size-lg: 1.125rem;
257
- --svelte-ui-font-size-xl: 1.25rem;
256
+ --svelte-ui-font-size-lg: 1.25rem;
257
+ --svelte-ui-font-size-xl: 1.5rem;
258
+ --svelte-ui-font-size-xxl: 2rem;
258
259
 
259
260
  /* Mobile Touch Size */
260
261
  --svelte-ui-touch-target-sm: 36px;
@@ -296,9 +297,9 @@
296
297
  --svelte-ui-button-padding-sm: 6px 8px;
297
298
  --svelte-ui-button-padding: 8px 12px;
298
299
  --svelte-ui-button-padding-lg: 12px 16px;
299
- --svelte-ui-button-font-size-sm: 14px;
300
+ --svelte-ui-button-font-size-sm: var(--svelte-ui-font-size-sm);
300
301
  --svelte-ui-button-font-size: inherit;
301
- --svelte-ui-button-font-size-lg: 16px;
302
+ --svelte-ui-button-font-size-lg: var(--svelte-ui-font-size);
302
303
  --svelte-ui-button-line-height: 1.2em;
303
304
  --svelte-ui-button-border-radius: var(--svelte-ui-border-radius);
304
305
  --svelte-ui-button-border-radius-rounded: var(--svelte-ui-border-radius-rounded);
@@ -349,9 +350,9 @@
349
350
  --svelte-ui-segmented-control-button-height-sm: 24px;
350
351
  --svelte-ui-segmented-control-button-height: 32px;
351
352
  --svelte-ui-segmented-control-button-height-lg: 40px;
352
- --svelte-ui-segmented-control-font-size-sm: 12px;
353
- --svelte-ui-segmented-control-font-size: 14px;
354
- --svelte-ui-segmented-control-font-size-lg: 16px;
353
+ --svelte-ui-segmented-control-font-size-sm: var(--svelte-ui-font-size-sm);
354
+ --svelte-ui-segmented-control-font-size: var(--svelte-ui-font-size);
355
+ --svelte-ui-segmented-control-font-size-lg: var(--svelte-ui-font-size-lg);
355
356
  --svelte-ui-segmented-control-button-padding-sm: 4px 8px;
356
357
  --svelte-ui-segmented-control-button-padding: 6px 12px;
357
358
  --svelte-ui-segmented-control-button-padding-lg: 8px 16px;
@@ -392,7 +393,7 @@
392
393
  --svelte-ui-nav-mobile-min-height: 56px;
393
394
  --svelte-ui-nav-mobile-item-padding: 8px;
394
395
  --svelte-ui-nav-mobile-item-icon-gap: 8px;
395
- --svelte-ui-nav-mobile-item-font-size: 0.75rem;
396
+ --svelte-ui-nav-mobile-item-font-size: var(--svelte-ui-font-size-xs);
396
397
  /* Nav: vertical */
397
398
  --svelte-ui-nav-vertical-item-gap: 8px;
398
399
  /* Nav: horizontal */
@@ -424,9 +425,9 @@
424
425
  /* ラベル・説明 */
425
426
  --svelte-ui-step-nav-label-color: var(--svelte-ui-text-color);
426
427
  --svelte-ui-step-nav-description-color: var(--svelte-ui-text-subtle-color);
427
- --svelte-ui-step-nav-font-size-sm: 12px;
428
- --svelte-ui-step-nav-font-size: 14px;
429
- --svelte-ui-step-nav-font-size-lg: 16px;
428
+ --svelte-ui-step-nav-font-size-sm: var(--svelte-ui-font-size-xs);
429
+ --svelte-ui-step-nav-font-size: var(--svelte-ui-font-size-sm);
430
+ --svelte-ui-step-nav-font-size-lg: var(--svelte-ui-font-size);
430
431
  --svelte-ui-step-nav-description-font-size: var(--svelte-ui-font-size-sm);
431
432
  --svelte-ui-step-nav-label-line-height: 1.3;
432
433
  /* コネクター（完了区間 / 未完了区間） */
@@ -692,8 +693,8 @@
692
693
  --svelte-ui-dialog-padding: 16px 24px;
693
694
  --svelte-ui-dialog-body-padding: 24px;
694
695
  --svelte-ui-dialog-header-height: 56px;
695
- --svelte-ui-dialog-title-font-size: 1.4rem;
696
- --svelte-ui-dialog-description-font-size: 0.875rem;
696
+ --svelte-ui-dialog-title-font-size: var(--svelte-ui-font-size-xl);
697
+ --svelte-ui-dialog-description-font-size: var(--svelte-ui-font-size-sm);
697
698
  --svelte-ui-dialog-description-padding: 0.5rem 1rem;
698
699
  --svelte-ui-dialog-footer-padding: 8px;
699
700
  --svelte-ui-dialog-border: solid 1px var(--svelte-ui-border-weak-color);
@@ -707,8 +708,8 @@
707
708
  --svelte-ui-drawer-header-padding: 16px 24px;
708
709
  --svelte-ui-drawer-body-padding: 24px;
709
710
  --svelte-ui-drawer-header-height: 56px;
710
- --svelte-ui-drawer-title-font-size: 1.4rem;
711
- --svelte-ui-drawer-description-font-size: 0.875rem;
711
+ --svelte-ui-drawer-title-font-size: var(--svelte-ui-font-size-xl);
712
+ --svelte-ui-drawer-description-font-size: var(--svelte-ui-font-size-sm);
712
713
  --svelte-ui-drawer-description-padding: 0.5rem 1rem;
713
714
  --svelte-ui-drawer-footer-padding: 8px;
714
715
  --svelte-ui-drawer-border: 1px solid var(--svelte-ui-border-weak-color);
@@ -828,7 +829,7 @@
828
829
  --svelte-ui-skeleton-media-gap: 16px;
829
830
  --svelte-ui-skeleton-media-vertical-gap: 8px;
830
831
  --svelte-ui-skeleton-heading-width: 50%;
831
- --svelte-ui-skeleton-heading-font-size: 2rem;
832
+ --svelte-ui-skeleton-heading-font-size: var(--svelte-ui-font-size-xxl);
832
833
  --svelte-ui-skeleton-pattern-gap: 16px;
833
834
  --svelte-ui-skeleton-repeat-gap: 24px;
834
835
 
package/dist/components/DatepickerCalendar.svelte CHANGED
@@ -697,7 +697,7 @@
697
697
  }
698
698
 
699
699
  .datepicker-calendar__header__month-label-button {
700
- font-size: 1.4rem;
700
+ font-size: var(--svelte-ui-font-size-xl);
701
701
  font-weight: bold;
702
702
  color: var(--svelte-ui-datepicker-date-color);
703
703
  background: none;
@@ -728,7 +728,7 @@
728
728
  border-radius: var(--svelte-ui-border-radius);
729
729
  background-color: var(--svelte-ui-surface-color);
730
730
  color: var(--svelte-ui-datepicker-date-color);
731
- font-size: 1rem;
731
+ font-size: var(--svelte-ui-font-size);
732
732
  cursor: pointer;
733
733
  transition: background-color var(--svelte-ui-transition-duration);
734
734
  }
@@ -776,7 +776,7 @@
776
776
  display: flex;
777
777
  justify-content: center;
778
778
  padding: 2px 0;
779
- font-size: 1rem;
779
+ font-size: var(--svelte-ui-font-size);
780
780
  width: 14.2857142857%;
781
781
  }
782
782
 
package/dist/components/MultiSelect.svelte CHANGED
@@ -336,7 +336,7 @@
336
336
  box-shadow: 0 0 0 var(--svelte-ui-border-width) inset var(--svelte-ui-select-border-color);
337
337
  border: none;
338
338
  border-radius: var(--svelte-ui-select-border-radius);
339
- font-size: 1rem;
339
+ font-size: var(--svelte-ui-font-size);
340
340
  }
341
341
 
342
342
  /* =============================================
package/dist/components/PopupMenu.svelte CHANGED
@@ -355,7 +355,7 @@
355
355
  padding: 8px 16px;
356
356
  background: transparent;
357
357
  border: none;
358
- font-size: 1rem;
358
+ font-size: var(--svelte-ui-font-size);
359
359
  color: var(--svelte-ui-popupmenu-text-color);
360
360
  text-align: left;
361
361
  white-space: nowrap;
@@ -412,6 +412,6 @@
412
412
 
413
413
  :global(.popup--fullscreen) .popup-menu__button {
414
414
  padding: 16px 24px;
415
- font-size: 1.1rem;
415
+ font-size: var(--svelte-ui-font-size);
416
416
  min-height: var(--svelte-ui-touch-target-lg);
417
417
  }</style>
package/dist/components/Select.svelte CHANGED
@@ -486,7 +486,7 @@ select--focus-{focusStyle}"
486
486
  box-shadow: 0 0 0 var(--svelte-ui-border-width) inset var(--svelte-ui-select-border-color);
487
487
  border: none;
488
488
  border-radius: var(--svelte-ui-select-border-radius);
489
- font-size: 1rem;
489
+ font-size: var(--svelte-ui-font-size);
490
490
  line-height: var(--svelte-ui-select-height);
491
491
  }
492
492
  }
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.57",
5
+ "version": "0.0.58",
6
6
  "type": "module",
7
7
  "keywords": [
8
8
  "svelte",