@c2n/theme 0.0.7 → 0.0.9

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 (5) hide show
  1. package/dist/base.css +236 -1
  2. package/dist/report.json +1094 -73
  3. package/dist/theme.css +236 -1
  4. package/dist/tokens.json +182 -1
  5. package/package.json +12 -2
package/dist/theme.css CHANGED
@@ -171,7 +171,6 @@
171
171
  --c2-autocomplete--border-radius: var(--c2-theme--radius-lg, 8px);
172
172
  --c2-autocomplete__hover--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-strong, #a1a1aa);
173
173
  --c2-autocomplete__focus--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-primary, rgb(2, 101, 220));
174
- --c2-autocomplete__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
175
174
  --c2-autocomplete__placeholder--color: var(--c2-theme--color-on-surface-variant, #71717a);
176
175
  --c2-autocomplete__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
177
176
  --c2-autocomplete__icon--color: var(--c2-theme--color-on-surface-variant, #71717a);
@@ -201,6 +200,13 @@
201
200
  --c2-avatar--border-bottom-left-radius: var(--c2-theme--radius-full, 999px);
202
201
  --c2-avatar--border-bottom-right-radius: var(--c2-theme--radius-full, 999px);
203
202
  --c2-avatar--font-weight: var(--c2-theme--font-weight-semibold, 600);
203
+ --c2-avatar__editor--background: var(--c2-theme--color-scrim, rgba(0, 0, 0, 0.5));
204
+ --c2-avatar__editor--color: var(--c2-theme--color-on-inverse-surface, #ffffff);
205
+ --c2-avatar__editor__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.45));
206
+ --c2-avatar__remove--background: var(--c2-theme--color-surface, #ffffff);
207
+ --c2-avatar__remove--color: var(--c2-theme--color-on-surface-variant, #52525b);
208
+ --c2-avatar__remove--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
209
+ --c2-avatar__remove--box-shadow: var(--c2-theme--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.18));
204
210
  --c2-avatar__badge--border: 2px solid var(--c2-theme--color-surface, #ffffff);
205
211
  }
206
212
 
@@ -251,6 +257,12 @@
251
257
  :root,
252
258
  :host {
253
259
  --c2-button-group--border-radius: var(--c2-theme--radius-md, 6px);
260
+ --c2-button-group__segmented--background-color: var(--c2-theme--color-surface-container, #f4f4f5);
261
+ --c2-button-group__segmented-item--color: var(--c2-theme--color-on-surface-variant, #52525b);
262
+ --c2-button-group__segmented-item__selected--color: var(--c2-theme--color-on-surface, #18181b);
263
+ --c2-button-group__indicator--background-color: var(--c2-theme--color-surface, #ffffff);
264
+ --c2-button-group__indicator--border-radius: var(--c2-theme--radius-md, 6px);
265
+ --c2-button-group__indicator--transition-duration: calc(200ms * var(--c2-theme--motion-scale, 1));
254
266
  }
255
267
 
256
268
  /* @c2n/card */
@@ -269,6 +281,37 @@
269
281
  --c2-card__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
270
282
  }
271
283
 
284
+ /* @c2n/cascader */
285
+ :root,
286
+ :host {
287
+ --c2-cascader__trigger--background: var(--c2-theme--color-surface, #ffffff);
288
+ --c2-cascader__trigger--color: var(--c2-theme--color-on-surface, #18181b);
289
+ --c2-cascader__trigger--font-size: var(--c2-theme--font-size-md, 14px);
290
+ --c2-cascader__trigger--border: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6));
291
+ --c2-cascader__trigger--border-radius: var(--c2-theme--radius-md, 6px);
292
+ --c2-cascader__trigger__hover--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-strong, #a1a1aa);
293
+ --c2-cascader__trigger__hover--background: var(--c2-theme--color-surface-container-low, #fafafa);
294
+ --c2-cascader__trigger__open--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-primary, rgb(2, 101, 220));
295
+ --c2-cascader__trigger__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
296
+ --c2-cascader__trigger__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
297
+ --c2-cascader__placeholder--color: var(--c2-theme--color-on-surface-variant, #71717a);
298
+ --c2-cascader__icon--color: var(--c2-theme--color-on-surface-variant, #71717a);
299
+ --c2-cascader__panel--background: var(--c2-theme--color-surface, #ffffff);
300
+ --c2-cascader__panel--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
301
+ --c2-cascader__panel--border-radius: var(--c2-theme--radius-lg, 8px);
302
+ --c2-cascader__panel--box-shadow: var(--c2-theme--shadow-md, 0 12px 32px rgba(24, 24, 27, 0.14));
303
+ --c2-cascader__column--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
304
+ --c2-cascader__option--border-radius: var(--c2-theme--radius-md, 6px);
305
+ --c2-cascader__option--color: var(--c2-theme--color-on-surface, #18181b);
306
+ --c2-cascader__option--font-size: var(--c2-theme--font-size-md, 14px);
307
+ --c2-cascader__option__hover--background: var(--c2-theme--color-surface-container, #f4f4f5);
308
+ --c2-cascader__option__active--background: var(--c2-theme--color-primary-container, #e8f2ff);
309
+ --c2-cascader__option__active--color: var(--c2-theme--color-on-surface, #18181b);
310
+ --c2-cascader__option__selected--color: var(--c2-theme--color-primary, rgb(2, 101, 220));
311
+ --c2-cascader__option__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
312
+ --c2-cascader__empty--color: var(--c2-theme--color-on-surface-variant, #71717a);
313
+ }
314
+
272
315
  /* @c2n/chart */
273
316
  :root,
274
317
  :host {
@@ -457,6 +500,53 @@
457
500
  --c2-copy-button--transition-duration: calc(150ms * var(--c2-theme--motion-scale, 1));
458
501
  }
459
502
 
503
+ /* @c2n/date-input */
504
+ :root,
505
+ :host {
506
+ --c2-date-input--border: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6));
507
+ --c2-date-input--border-radius: var(--c2-theme--radius-md, 6px);
508
+ --c2-date-input--color: var(--c2-theme--color-on-surface, #18181b);
509
+ --c2-date-input--background: var(--c2-theme--color-surface, #ffffff);
510
+ --c2-date-input--font-size: var(--c2-theme--font-size-md, 14px);
511
+ --c2-date-input__hover--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-strong, #a1a1aa);
512
+ --c2-date-input__focus--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-primary, #0265dc);
513
+ --c2-date-input__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
514
+ --c2-date-input__error--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-error, #dc2626);
515
+ --c2-date-input__read-only--background: var(--c2-theme--color-surface-container-low, #fafafa);
516
+ --c2-date-input__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
517
+ --c2-date-input__calendar-icon--color: var(--c2-theme--color-on-surface-variant, #71717a);
518
+ --c2-date-input__calendar-icon__hover--color: var(--c2-theme--color-on-surface, #18181b);
519
+ --c2-date-input__supporting-text--font-size: var(--c2-theme--font-size-sm, 12px);
520
+ --c2-date-input__supporting-text--color: var(--c2-theme--color-on-surface-variant, #71717a);
521
+ --c2-date-input__supporting-text__error--color: var(--c2-theme--color-error, #dc2626);
522
+ }
523
+
524
+ /* @c2n/date-selector */
525
+ :root,
526
+ :host {
527
+ --c2-date-selector--background: var(--c2-theme--color-surface, #ffffff);
528
+ --c2-date-selector--color: var(--c2-theme--color-on-surface, #18181b);
529
+ --c2-date-selector--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
530
+ --c2-date-selector--border-radius: var(--c2-theme--radius-xl, 14px);
531
+ --c2-date-selector--box-shadow: var(--c2-theme--shadow-md, 0 12px 32px rgba(24, 24, 27, 0.08));
532
+ --c2-date-selector--font-size: var(--c2-theme--font-size-md, 14px);
533
+ --c2-date-selector__day--border-radius: var(--c2-theme--radius-full, 999px);
534
+ --c2-date-selector__day__hover--background: var(--c2-theme--color-surface-container, #f4f4f5);
535
+ --c2-date-selector__day__today--color: var(--c2-theme--color-primary, #0265dc);
536
+ --c2-date-selector__day__today--font-weight: var(--c2-theme--font-weight-semibold, 600);
537
+ --c2-date-selector__day__selected--background: var(--c2-theme--color-primary, #0265dc);
538
+ --c2-date-selector__day__selected--color: var(--c2-theme--color-on-primary, #ffffff);
539
+ --c2-date-selector__range--background: var(--c2-theme--color-primary-container, #edf1fe);
540
+ --c2-date-selector__range--color: var(--c2-theme--color-on-surface, #18181b);
541
+ --c2-date-selector__day__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
542
+ --c2-date-selector__weekday--color: var(--c2-theme--color-on-surface-variant, #71717a);
543
+ --c2-date-selector__weekday--font-size: var(--c2-theme--font-size-sm, 12px);
544
+ --c2-date-selector__month-title--font-weight: var(--c2-theme--font-weight-semibold, 600);
545
+ --c2-date-selector__navigation__hover--background: var(--c2-theme--color-surface-container, #f4f4f5);
546
+ --c2-date-selector__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
547
+ --c2-date-selector__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
548
+ }
549
+
460
550
  /* @c2n/details */
461
551
  :root,
462
552
  :host {
@@ -677,6 +767,32 @@
677
767
  --c2-navigation-menu-link__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
678
768
  }
679
769
 
770
+ /* @c2n/number-input */
771
+ :root,
772
+ :host {
773
+ --c2-number-input--border: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6));
774
+ --c2-number-input--border-radius: var(--c2-theme--radius-md, 6px);
775
+ --c2-number-input--color: var(--c2-theme--color-on-surface, #18181b);
776
+ --c2-number-input--background: var(--c2-theme--color-surface, #ffffff);
777
+ --c2-number-input--font-size: var(--c2-theme--font-size-md, 14px);
778
+ --c2-number-input__placeholder--color: var(--c2-theme--color-on-surface-variant, #71717a);
779
+ --c2-number-input__hover--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-strong, #a1a1aa);
780
+ --c2-number-input__focus--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-primary, #0265dc);
781
+ --c2-number-input__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
782
+ --c2-number-input__error--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-error, #dc2626);
783
+ --c2-number-input__read-only--background: var(--c2-theme--color-surface-container-low, #fafafa);
784
+ --c2-number-input__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
785
+ --c2-number-input__stepper--border-left: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
786
+ --c2-number-input__stepper--color: var(--c2-theme--color-on-surface-variant, #71717a);
787
+ --c2-number-input__stepper__hover--color: var(--c2-theme--color-on-surface, #18181b);
788
+ --c2-number-input__stepper__hover--background: var(--c2-theme--color-surface-container, #f4f4f5);
789
+ --c2-number-input__adornment--color: var(--c2-theme--color-on-surface-variant, #71717a);
790
+ --c2-number-input__adornment--font-size: var(--c2-theme--font-size-md, 14px);
791
+ --c2-number-input__supporting-text--font-size: var(--c2-theme--font-size-sm, 12px);
792
+ --c2-number-input__supporting-text--color: var(--c2-theme--color-on-surface-variant, #71717a);
793
+ --c2-number-input__supporting-text__error--color: var(--c2-theme--color-error, #dc2626);
794
+ }
795
+
680
796
  /* @c2n/overlay */
681
797
  :root,
682
798
  :host {
@@ -724,6 +840,46 @@
724
840
  --c2-progress__value--font-weight: var(--c2-theme--font-weight-medium, 500);
725
841
  }
726
842
 
843
+ /* @c2n/qr-code */
844
+ :root,
845
+ :host {
846
+ --c2-qr-code__module--color: var(--c2-theme--color-on-surface, #18181b);
847
+ --c2-qr-code__background--color: var(--c2-theme--color-surface, #ffffff);
848
+ --c2-qr-code__container--border-radius: var(--c2-theme--radius-lg, 8px);
849
+ --c2-qr-code__placeholder--color: var(--c2-theme--color-on-surface-variant, #71717a);
850
+ --c2-qr-code__placeholder--font-size: var(--c2-theme--font-size-sm, 12px);
851
+ --c2-qr-code__center--background-color: var(--c2-theme--color-surface, #ffffff);
852
+ --c2-qr-code__center--border-radius: var(--c2-theme--radius-md, 6px);
853
+ }
854
+
855
+ /* @c2n/questionnaire */
856
+ :root,
857
+ :host {
858
+ --c2-questionnaire--color: var(--c2-theme--color-on-surface, #18181b);
859
+ --c2-questionnaire__progress--font-size: var(--c2-theme--font-size-sm, 12px);
860
+ --c2-questionnaire__progress--color: var(--c2-theme--color-on-surface-variant, #71717a);
861
+ --c2-questionnaire__title--font-weight: var(--c2-theme--font-weight-semibold, 600);
862
+ --c2-questionnaire__description--color: var(--c2-theme--color-on-surface-variant, #71717a);
863
+ --c2-questionnaire__description--font-size: var(--c2-theme--font-size-md, 14px);
864
+ --c2-questionnaire__option--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
865
+ --c2-questionnaire__option--border-radius: var(--c2-theme--radius-lg, 8px);
866
+ --c2-questionnaire__option--background-color: var(--c2-theme--color-surface, #ffffff);
867
+ --c2-questionnaire__option__hover--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6);
868
+ --c2-questionnaire__option__selected--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-strong, #a1a1aa);
869
+ --c2-questionnaire__option__selected--background-color: var(--c2-theme--color-surface-container-low, #fafafa);
870
+ --c2-questionnaire__option__error--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-error, #dc2626);
871
+ --c2-questionnaire__option__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
872
+ --c2-questionnaire__control__selected--background-color: var(--c2-theme--color-inverse-surface, #18181b);
873
+ --c2-questionnaire__option-description--color: var(--c2-theme--color-on-surface-variant, #71717a);
874
+ --c2-questionnaire__shortcut--color: var(--c2-theme--color-on-surface-variant, #71717a);
875
+ --c2-questionnaire__error--color: var(--c2-theme--color-error, #dc2626);
876
+ --c2-questionnaire__action--border-radius: var(--c2-theme--radius-lg, 8px);
877
+ --c2-questionnaire__primary-action--background-color: var(--c2-theme--color-inverse-surface, #18181b);
878
+ --c2-questionnaire__primary-action--color: var(--c2-theme--color-on-primary, #ffffff);
879
+ --c2-questionnaire__secondary-action--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
880
+ --c2-questionnaire__secondary-action--background-color: var(--c2-theme--color-surface, #ffffff);
881
+ }
882
+
727
883
  /* @c2n/radio */
728
884
  :root,
729
885
  :host {
@@ -750,6 +906,16 @@
750
906
  --c2-radio-group__header__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
751
907
  }
752
908
 
909
+ /* @c2n/rate */
910
+ :root,
911
+ :host {
912
+ --c2-rate__icon--color: var(--c2-theme--color-outline-variant, #e4e4e7);
913
+ --c2-rate__icon--transition-duration: calc(150ms * var(--c2-theme--motion-scale, 1));
914
+ --c2-rate__container__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
915
+ --c2-rate__container--border-radius: var(--c2-theme--radius-sm, 4px);
916
+ --c2-rate__container__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
917
+ }
918
+
753
919
  /* @c2n/select */
754
920
  :root,
755
921
  :host {
@@ -881,6 +1047,23 @@
881
1047
  --c2-stat__description--color: var(--c2-theme--color-on-surface-variant, #71717a);
882
1048
  }
883
1049
 
1050
+ /* @c2n/status-panel */
1051
+ :root,
1052
+ :host {
1053
+ --c2-status-panel__container--border-radius: var(--c2-theme--radius-xl, 14px);
1054
+ --c2-status-panel__media--border-radius: var(--c2-theme--radius-full, 999px);
1055
+ --c2-status-panel__media--background-color: var(--c2-theme--color-surface-container, #f4f4f5);
1056
+ --c2-status-panel__media--color: var(--c2-theme--color-on-surface-variant, #71717a);
1057
+ --c2-status-panel__media__info--background-color: var(--c2-theme--color-primary-container, #edf1fe);
1058
+ --c2-status-panel__media__info--color: var(--c2-theme--color-primary, rgb(2, 101, 220));
1059
+ --c2-status-panel__title--color: var(--c2-theme--color-on-surface, #18181b);
1060
+ --c2-status-panel__title--font-weight: var(--c2-theme--font-weight-semibold, 600);
1061
+ --c2-status-panel__description--color: var(--c2-theme--color-on-surface-variant, #71717a);
1062
+ --c2-status-panel__description--font-size: var(--c2-theme--font-size-md, 14px);
1063
+ --c2-status-panel__content--border-radius: var(--c2-theme--radius-lg, 8px);
1064
+ --c2-status-panel__content--background-color: var(--c2-theme--color-surface-container, #f4f4f5);
1065
+ }
1066
+
884
1067
  /* @c2n/switch */
885
1068
  :root,
886
1069
  :host {
@@ -1045,6 +1228,58 @@
1045
1228
  --c2-tooltip--transition-duration: calc(120ms * var(--c2-theme--motion-scale, 1));
1046
1229
  }
1047
1230
 
1231
+ /* @c2n/tree */
1232
+ :root,
1233
+ :host {
1234
+ --c2-tree--background: var(--c2-theme--color-surface, #ffffff);
1235
+ --c2-tree--border-top-left-radius: var(--c2-theme--radius-lg, 8px);
1236
+ --c2-tree--border-top-right-radius: var(--c2-theme--radius-lg, 8px);
1237
+ --c2-tree--border-bottom-left-radius: var(--c2-theme--radius-lg, 8px);
1238
+ --c2-tree--border-bottom-right-radius: var(--c2-theme--radius-lg, 8px);
1239
+ --c2-tree--font-size: var(--c2-theme--font-size-md, 14px);
1240
+ --c2-tree__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
1241
+ --c2-tree__empty--color: var(--c2-theme--color-on-surface-variant, #71717a);
1242
+ --c2-tree-item__row--border-radius: var(--c2-theme--radius-sm, 4px);
1243
+ --c2-tree-item--color: var(--c2-theme--color-on-surface, #18181b);
1244
+ --c2-tree-item--font-size: var(--c2-theme--font-size-md, 14px);
1245
+ --c2-tree-item__hover--background: var(--c2-theme--color-surface-container, #f4f4f5);
1246
+ --c2-tree-item__selected--color: var(--c2-theme--color-primary, rgb(2, 101, 220));
1247
+ --c2-tree-item__selected--background: var(--c2-theme--color-primary-container, #edf1fe);
1248
+ --c2-tree-item__selected__hover--background: color-mix(
1249
+ in srgb,
1250
+ var(--c2-theme--color-primary-container, #edf1fe),
1251
+ var(--c2-theme--color-primary, #0265dc) 8%
1252
+ );
1253
+ --c2-tree-item__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
1254
+ --c2-tree-item__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
1255
+ --c2-tree-item__toggle--color: var(--c2-theme--color-on-surface-variant, #71717a);
1256
+ --c2-tree-item__toggle--transition-duration: calc(150ms * var(--c2-theme--motion-scale, 1));
1257
+ --c2-tree-item__guide--color: var(--c2-theme--color-outline-variant, #e4e4e7);
1258
+ }
1259
+
1260
+ /* @c2n/upload */
1261
+ :root,
1262
+ :host {
1263
+ --c2-upload__dropzone--background: var(--c2-theme--color-surface, #ffffff);
1264
+ --c2-upload__dropzone--border: var(--c2-theme--border-width, 1px) dashed var(--c2-theme--color-outline, #bcbcc6);
1265
+ --c2-upload__dropzone--border-radius: var(--c2-theme--radius-xl, 14px);
1266
+ --c2-upload__dropzone__hover--background: var(--c2-theme--color-surface-container-low, #fafafa);
1267
+ --c2-upload__dropzone__hover--border: var(--c2-theme--border-width, 1px) dashed var(--c2-theme--color-outline, #a1a1aa);
1268
+ --c2-upload__dropzone__drag--background: var(--c2-theme--color-primary-container, #e8f2ff);
1269
+ --c2-upload__dropzone__drag--border: var(--c2-theme--border-width, 1px) dashed var(--c2-theme--color-primary, rgb(2, 101, 220));
1270
+ --c2-upload__dropzone__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
1271
+ --c2-upload__dropzone__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
1272
+ --c2-upload__icon--color: var(--c2-theme--color-primary, rgb(2, 101, 220));
1273
+ --c2-upload__prompt--color: var(--c2-theme--color-on-surface, #18181b);
1274
+ --c2-upload__prompt--font-size: var(--c2-theme--font-size-md, 14px);
1275
+ --c2-upload__prompt--font-weight: var(--c2-theme--font-weight-semibold, 600);
1276
+ --c2-upload__action--color: var(--c2-theme--color-primary, rgb(2, 101, 220));
1277
+ --c2-upload__hint--color: var(--c2-theme--color-on-surface-variant, #71717a);
1278
+ --c2-upload__hint--font-size: var(--c2-theme--font-size-sm, 12px);
1279
+ --c2-upload__error--color: var(--c2-theme--color-error, #dc2626);
1280
+ --c2-upload__error--font-size: var(--c2-theme--font-size-sm, 12px);
1281
+ }
1282
+
1048
1283
  /* @c2n/virtual-list */
1049
1284
  :root,
1050
1285
  :host {
package/dist/tokens.json CHANGED
@@ -330,7 +330,6 @@
330
330
  "--c2-autocomplete--border-radius": "--c2-theme--radius-lg",
331
331
  "--c2-autocomplete__hover--border": "--c2-theme--color-outline-strong",
332
332
  "--c2-autocomplete__focus--border": "--c2-theme--color-primary",
333
- "--c2-autocomplete__focus--outline": "--c2-theme--focus-ring",
334
333
  "--c2-autocomplete__placeholder--color": "--c2-theme--color-on-surface-variant",
335
334
  "--c2-autocomplete__disabled--opacity": "--c2-theme--disabled-opacity",
336
335
  "--c2-autocomplete__icon--color": "--c2-theme--color-on-surface-variant",
@@ -355,6 +354,13 @@
355
354
  "--c2-avatar--border-bottom-left-radius": "--c2-theme--radius-full",
356
355
  "--c2-avatar--border-bottom-right-radius": "--c2-theme--radius-full",
357
356
  "--c2-avatar--font-weight": "--c2-theme--font-weight-semibold",
357
+ "--c2-avatar__editor--background": "--c2-theme--color-scrim",
358
+ "--c2-avatar__editor--color": "--c2-theme--color-on-inverse-surface",
359
+ "--c2-avatar__editor__focus--outline": "--c2-theme--focus-ring",
360
+ "--c2-avatar__remove--background": "--c2-theme--color-surface",
361
+ "--c2-avatar__remove--color": "--c2-theme--color-on-surface-variant",
362
+ "--c2-avatar__remove--border": "--c2-theme--color-outline-variant",
363
+ "--c2-avatar__remove--box-shadow": "--c2-theme--shadow-sm",
358
364
  "--c2-avatar__badge--border": "--c2-theme--color-surface",
359
365
  "--c2-badge--border-radius": "--c2-theme--radius-full",
360
366
  "--c2-badge--font-size": "--c2-theme--font-size-sm",
@@ -385,6 +391,12 @@
385
391
  "--c2-button__container__disabled--opacity": "--c2-theme--disabled-opacity",
386
392
  "--c2-button__running-icon--animation-duration": "--c2-theme--motion-scale",
387
393
  "--c2-button-group--border-radius": "--c2-theme--radius-md",
394
+ "--c2-button-group__segmented--background-color": "--c2-theme--color-surface-container",
395
+ "--c2-button-group__segmented-item--color": "--c2-theme--color-on-surface-variant",
396
+ "--c2-button-group__segmented-item__selected--color": "--c2-theme--color-on-surface",
397
+ "--c2-button-group__indicator--background-color": "--c2-theme--color-surface",
398
+ "--c2-button-group__indicator--border-radius": "--c2-theme--radius-md",
399
+ "--c2-button-group__indicator--transition-duration": "--c2-theme--motion-scale",
388
400
  "--c2-card--border-top-left-radius": "--c2-theme--radius-lg",
389
401
  "--c2-card--border-top-right-radius": "--c2-theme--radius-lg",
390
402
  "--c2-card--border-bottom-left-radius": "--c2-theme--radius-lg",
@@ -396,6 +408,32 @@
396
408
  "--c2-card--background": "--c2-theme--color-surface",
397
409
  "--c2-card__focus--outline": "--c2-theme--focus-ring",
398
410
  "--c2-card__disabled--opacity": "--c2-theme--disabled-opacity",
411
+ "--c2-cascader__trigger--background": "--c2-theme--color-surface",
412
+ "--c2-cascader__trigger--color": "--c2-theme--color-on-surface",
413
+ "--c2-cascader__trigger--font-size": "--c2-theme--font-size-md",
414
+ "--c2-cascader__trigger--border": "--c2-theme--border",
415
+ "--c2-cascader__trigger--border-radius": "--c2-theme--radius-md",
416
+ "--c2-cascader__trigger__hover--border": "--c2-theme--color-outline-strong",
417
+ "--c2-cascader__trigger__hover--background": "--c2-theme--color-surface-container-low",
418
+ "--c2-cascader__trigger__open--border": "--c2-theme--color-primary",
419
+ "--c2-cascader__trigger__focus--outline": "--c2-theme--focus-ring",
420
+ "--c2-cascader__trigger__disabled--opacity": "--c2-theme--disabled-opacity",
421
+ "--c2-cascader__placeholder--color": "--c2-theme--color-on-surface-variant",
422
+ "--c2-cascader__icon--color": "--c2-theme--color-on-surface-variant",
423
+ "--c2-cascader__panel--background": "--c2-theme--color-surface",
424
+ "--c2-cascader__panel--border": "--c2-theme--color-outline-variant",
425
+ "--c2-cascader__panel--border-radius": "--c2-theme--radius-lg",
426
+ "--c2-cascader__panel--box-shadow": "--c2-theme--shadow-md",
427
+ "--c2-cascader__column--border": "--c2-theme--color-outline-variant",
428
+ "--c2-cascader__option--border-radius": "--c2-theme--radius-md",
429
+ "--c2-cascader__option--color": "--c2-theme--color-on-surface",
430
+ "--c2-cascader__option--font-size": "--c2-theme--font-size-md",
431
+ "--c2-cascader__option__hover--background": "--c2-theme--color-surface-container",
432
+ "--c2-cascader__option__active--background": "--c2-theme--color-primary-container",
433
+ "--c2-cascader__option__active--color": "--c2-theme--color-on-surface",
434
+ "--c2-cascader__option__selected--color": "--c2-theme--color-primary",
435
+ "--c2-cascader__option__disabled--opacity": "--c2-theme--disabled-opacity",
436
+ "--c2-cascader__empty--color": "--c2-theme--color-on-surface-variant",
399
437
  "--c2-chart__axis-line--color": "--c2-theme--color-outline-variant",
400
438
  "--c2-chart--background": "--c2-theme--color-surface",
401
439
  "--c2-chart--color": "--c2-theme--color-on-surface",
@@ -522,6 +560,43 @@
522
560
  "--c2-copy-button__container__focus--outline": "--c2-theme--focus-ring",
523
561
  "--c2-copy-button__container__disabled--opacity": "--c2-theme--disabled-opacity",
524
562
  "--c2-copy-button--transition-duration": "--c2-theme--motion-scale",
563
+ "--c2-date-input--border": "--c2-theme--border",
564
+ "--c2-date-input--border-radius": "--c2-theme--radius-md",
565
+ "--c2-date-input--color": "--c2-theme--color-on-surface",
566
+ "--c2-date-input--background": "--c2-theme--color-surface",
567
+ "--c2-date-input--font-size": "--c2-theme--font-size-md",
568
+ "--c2-date-input__hover--border": "--c2-theme--color-outline-strong",
569
+ "--c2-date-input__focus--border": "--c2-theme--color-primary",
570
+ "--c2-date-input__focus--outline": "--c2-theme--focus-ring",
571
+ "--c2-date-input__error--border": "--c2-theme--color-error",
572
+ "--c2-date-input__read-only--background": "--c2-theme--color-surface-container-low",
573
+ "--c2-date-input__disabled--opacity": "--c2-theme--disabled-opacity",
574
+ "--c2-date-input__calendar-icon--color": "--c2-theme--color-on-surface-variant",
575
+ "--c2-date-input__calendar-icon__hover--color": "--c2-theme--color-on-surface",
576
+ "--c2-date-input__supporting-text--font-size": "--c2-theme--font-size-sm",
577
+ "--c2-date-input__supporting-text--color": "--c2-theme--color-on-surface-variant",
578
+ "--c2-date-input__supporting-text__error--color": "--c2-theme--color-error",
579
+ "--c2-date-selector--background": "--c2-theme--color-surface",
580
+ "--c2-date-selector--color": "--c2-theme--color-on-surface",
581
+ "--c2-date-selector--border": "--c2-theme--color-outline-variant",
582
+ "--c2-date-selector--border-radius": "--c2-theme--radius-xl",
583
+ "--c2-date-selector--box-shadow": "--c2-theme--shadow-md",
584
+ "--c2-date-selector--font-size": "--c2-theme--font-size-md",
585
+ "--c2-date-selector__day--border-radius": "--c2-theme--radius-full",
586
+ "--c2-date-selector__day__hover--background": "--c2-theme--color-surface-container",
587
+ "--c2-date-selector__day__today--color": "--c2-theme--color-primary",
588
+ "--c2-date-selector__day__today--font-weight": "--c2-theme--font-weight-semibold",
589
+ "--c2-date-selector__day__selected--background": "--c2-theme--color-primary",
590
+ "--c2-date-selector__day__selected--color": "--c2-theme--color-on-primary",
591
+ "--c2-date-selector__range--background": "--c2-theme--color-primary-container",
592
+ "--c2-date-selector__range--color": "--c2-theme--color-on-surface",
593
+ "--c2-date-selector__day__disabled--opacity": "--c2-theme--disabled-opacity",
594
+ "--c2-date-selector__weekday--color": "--c2-theme--color-on-surface-variant",
595
+ "--c2-date-selector__weekday--font-size": "--c2-theme--font-size-sm",
596
+ "--c2-date-selector__month-title--font-weight": "--c2-theme--font-weight-semibold",
597
+ "--c2-date-selector__navigation__hover--background": "--c2-theme--color-surface-container",
598
+ "--c2-date-selector__focus--outline": "--c2-theme--focus-ring",
599
+ "--c2-date-selector__disabled--opacity": "--c2-theme--disabled-opacity",
525
600
  "--c2-details--border-top": "--c2-theme--border",
526
601
  "--c2-details--border-right": "--c2-theme--border",
527
602
  "--c2-details--border-bottom": "--c2-theme--border",
@@ -683,6 +758,27 @@
683
758
  "--c2-navigation-menu-link__icon--color": "--c2-theme--color-on-surface-variant",
684
759
  "--c2-navigation-menu-link__focus--outline": "--c2-theme--focus-ring",
685
760
  "--c2-navigation-menu-link__disabled--opacity": "--c2-theme--disabled-opacity",
761
+ "--c2-number-input--border": "--c2-theme--border",
762
+ "--c2-number-input--border-radius": "--c2-theme--radius-md",
763
+ "--c2-number-input--color": "--c2-theme--color-on-surface",
764
+ "--c2-number-input--background": "--c2-theme--color-surface",
765
+ "--c2-number-input--font-size": "--c2-theme--font-size-md",
766
+ "--c2-number-input__placeholder--color": "--c2-theme--color-on-surface-variant",
767
+ "--c2-number-input__hover--border": "--c2-theme--color-outline-strong",
768
+ "--c2-number-input__focus--border": "--c2-theme--color-primary",
769
+ "--c2-number-input__focus--outline": "--c2-theme--focus-ring",
770
+ "--c2-number-input__error--border": "--c2-theme--color-error",
771
+ "--c2-number-input__read-only--background": "--c2-theme--color-surface-container-low",
772
+ "--c2-number-input__disabled--opacity": "--c2-theme--disabled-opacity",
773
+ "--c2-number-input__stepper--border-left": "--c2-theme--color-outline-variant",
774
+ "--c2-number-input__stepper--color": "--c2-theme--color-on-surface-variant",
775
+ "--c2-number-input__stepper__hover--color": "--c2-theme--color-on-surface",
776
+ "--c2-number-input__stepper__hover--background": "--c2-theme--color-surface-container",
777
+ "--c2-number-input__adornment--color": "--c2-theme--color-on-surface-variant",
778
+ "--c2-number-input__adornment--font-size": "--c2-theme--font-size-md",
779
+ "--c2-number-input__supporting-text--font-size": "--c2-theme--font-size-sm",
780
+ "--c2-number-input__supporting-text--color": "--c2-theme--color-on-surface-variant",
781
+ "--c2-number-input__supporting-text__error--color": "--c2-theme--color-error",
686
782
  "--c2-overlay--transition-duration": "--c2-theme--motion-scale",
687
783
  "--c2-pagination__item--color": "--c2-theme--color-on-surface",
688
784
  "--c2-pagination__item--border-radius": "--c2-theme--radius-lg",
@@ -715,6 +811,36 @@
715
811
  "--c2-progress__value--color": "--c2-theme--color-on-surface",
716
812
  "--c2-progress__value--font-size": "--c2-theme--font-size-md",
717
813
  "--c2-progress__value--font-weight": "--c2-theme--font-weight-medium",
814
+ "--c2-qr-code__module--color": "--c2-theme--color-on-surface",
815
+ "--c2-qr-code__background--color": "--c2-theme--color-surface",
816
+ "--c2-qr-code__container--border-radius": "--c2-theme--radius-lg",
817
+ "--c2-qr-code__placeholder--color": "--c2-theme--color-on-surface-variant",
818
+ "--c2-qr-code__placeholder--font-size": "--c2-theme--font-size-sm",
819
+ "--c2-qr-code__center--background-color": "--c2-theme--color-surface",
820
+ "--c2-qr-code__center--border-radius": "--c2-theme--radius-md",
821
+ "--c2-questionnaire--color": "--c2-theme--color-on-surface",
822
+ "--c2-questionnaire__progress--font-size": "--c2-theme--font-size-sm",
823
+ "--c2-questionnaire__progress--color": "--c2-theme--color-on-surface-variant",
824
+ "--c2-questionnaire__title--font-weight": "--c2-theme--font-weight-semibold",
825
+ "--c2-questionnaire__description--color": "--c2-theme--color-on-surface-variant",
826
+ "--c2-questionnaire__description--font-size": "--c2-theme--font-size-md",
827
+ "--c2-questionnaire__option--border": "--c2-theme--color-outline-variant",
828
+ "--c2-questionnaire__option--border-radius": "--c2-theme--radius-lg",
829
+ "--c2-questionnaire__option--background-color": "--c2-theme--color-surface",
830
+ "--c2-questionnaire__option__hover--border": "--c2-theme--color-outline",
831
+ "--c2-questionnaire__option__selected--border": "--c2-theme--color-outline-strong",
832
+ "--c2-questionnaire__option__selected--background-color": "--c2-theme--color-surface-container-low",
833
+ "--c2-questionnaire__option__error--border": "--c2-theme--color-error",
834
+ "--c2-questionnaire__option__focus--outline": "--c2-theme--focus-ring",
835
+ "--c2-questionnaire__control__selected--background-color": "--c2-theme--color-inverse-surface",
836
+ "--c2-questionnaire__option-description--color": "--c2-theme--color-on-surface-variant",
837
+ "--c2-questionnaire__shortcut--color": "--c2-theme--color-on-surface-variant",
838
+ "--c2-questionnaire__error--color": "--c2-theme--color-error",
839
+ "--c2-questionnaire__action--border-radius": "--c2-theme--radius-lg",
840
+ "--c2-questionnaire__primary-action--background-color": "--c2-theme--color-inverse-surface",
841
+ "--c2-questionnaire__primary-action--color": "--c2-theme--color-on-primary",
842
+ "--c2-questionnaire__secondary-action--border": "--c2-theme--color-outline-variant",
843
+ "--c2-questionnaire__secondary-action--background-color": "--c2-theme--color-surface",
718
844
  "--c2-radio__container--border-radius": "--c2-theme--radius-lg",
719
845
  "--c2-radio__control--border-radius": "--c2-theme--radius-full",
720
846
  "--c2-radio__control--border": "--c2-theme--border",
@@ -736,6 +862,11 @@
736
862
  "--c2-radio-group__description--color": "--c2-theme--color-on-surface-variant",
737
863
  "--c2-radio-group__description--font-size": "--c2-theme--font-size-sm",
738
864
  "--c2-radio-group__header__disabled--opacity": "--c2-theme--disabled-opacity",
865
+ "--c2-rate__icon--color": "--c2-theme--color-outline-variant",
866
+ "--c2-rate__icon--transition-duration": "--c2-theme--motion-scale",
867
+ "--c2-rate__container__focus--outline": "--c2-theme--focus-ring",
868
+ "--c2-rate__container--border-radius": "--c2-theme--radius-sm",
869
+ "--c2-rate__container__disabled--opacity": "--c2-theme--disabled-opacity",
739
870
  "--c2-select__button--background": "--c2-theme--color-surface",
740
871
  "--c2-select__button--color": "--c2-theme--color-on-surface",
741
872
  "--c2-select__button--font-size": "--c2-theme--font-size-md",
@@ -827,6 +958,18 @@
827
958
  "--c2-stat__label--color": "--c2-theme--color-on-surface-variant",
828
959
  "--c2-stat__description--font-size": "--c2-theme--font-size-sm",
829
960
  "--c2-stat__description--color": "--c2-theme--color-on-surface-variant",
961
+ "--c2-status-panel__container--border-radius": "--c2-theme--radius-xl",
962
+ "--c2-status-panel__media--border-radius": "--c2-theme--radius-full",
963
+ "--c2-status-panel__media--background-color": "--c2-theme--color-surface-container",
964
+ "--c2-status-panel__media--color": "--c2-theme--color-on-surface-variant",
965
+ "--c2-status-panel__media__info--background-color": "--c2-theme--color-primary-container",
966
+ "--c2-status-panel__media__info--color": "--c2-theme--color-primary",
967
+ "--c2-status-panel__title--color": "--c2-theme--color-on-surface",
968
+ "--c2-status-panel__title--font-weight": "--c2-theme--font-weight-semibold",
969
+ "--c2-status-panel__description--color": "--c2-theme--color-on-surface-variant",
970
+ "--c2-status-panel__description--font-size": "--c2-theme--font-size-md",
971
+ "--c2-status-panel__content--border-radius": "--c2-theme--radius-lg",
972
+ "--c2-status-panel__content--background-color": "--c2-theme--color-surface-container",
830
973
  "--c2-switch__container__disabled--opacity": "--c2-theme--disabled-opacity",
831
974
  "--c2-switch__track--border-radius": "--c2-theme--radius-full",
832
975
  "--c2-switch__track--color": "--c2-theme--color-outline-variant",
@@ -956,6 +1099,44 @@
956
1099
  "--c2-tooltip--font-size": "--c2-theme--font-size-sm",
957
1100
  "--c2-tooltip--font-weight": "--c2-theme--font-weight-medium",
958
1101
  "--c2-tooltip--transition-duration": "--c2-theme--motion-scale",
1102
+ "--c2-tree--background": "--c2-theme--color-surface",
1103
+ "--c2-tree--border-top-left-radius": "--c2-theme--radius-lg",
1104
+ "--c2-tree--border-top-right-radius": "--c2-theme--radius-lg",
1105
+ "--c2-tree--border-bottom-left-radius": "--c2-theme--radius-lg",
1106
+ "--c2-tree--border-bottom-right-radius": "--c2-theme--radius-lg",
1107
+ "--c2-tree--font-size": "--c2-theme--font-size-md",
1108
+ "--c2-tree__disabled--opacity": "--c2-theme--disabled-opacity",
1109
+ "--c2-tree__empty--color": "--c2-theme--color-on-surface-variant",
1110
+ "--c2-tree-item__row--border-radius": "--c2-theme--radius-sm",
1111
+ "--c2-tree-item--color": "--c2-theme--color-on-surface",
1112
+ "--c2-tree-item--font-size": "--c2-theme--font-size-md",
1113
+ "--c2-tree-item__hover--background": "--c2-theme--color-surface-container",
1114
+ "--c2-tree-item__selected--color": "--c2-theme--color-primary",
1115
+ "--c2-tree-item__selected--background": "--c2-theme--color-primary-container",
1116
+ "--c2-tree-item__selected__hover--background": "--c2-theme--color-primary-container",
1117
+ "--c2-tree-item__focus--outline": "--c2-theme--focus-ring",
1118
+ "--c2-tree-item__disabled--opacity": "--c2-theme--disabled-opacity",
1119
+ "--c2-tree-item__toggle--color": "--c2-theme--color-on-surface-variant",
1120
+ "--c2-tree-item__toggle--transition-duration": "--c2-theme--motion-scale",
1121
+ "--c2-tree-item__guide--color": "--c2-theme--color-outline-variant",
1122
+ "--c2-upload__dropzone--background": "--c2-theme--color-surface",
1123
+ "--c2-upload__dropzone--border": "--c2-theme--border",
1124
+ "--c2-upload__dropzone--border-radius": "--c2-theme--radius-xl",
1125
+ "--c2-upload__dropzone__hover--background": "--c2-theme--color-surface-container-low",
1126
+ "--c2-upload__dropzone__hover--border": "--c2-theme--border",
1127
+ "--c2-upload__dropzone__drag--background": "--c2-theme--color-primary-container",
1128
+ "--c2-upload__dropzone__drag--border": "--c2-theme--color-primary",
1129
+ "--c2-upload__dropzone__focus--outline": "--c2-theme--focus-ring",
1130
+ "--c2-upload__dropzone__disabled--opacity": "--c2-theme--disabled-opacity",
1131
+ "--c2-upload__icon--color": "--c2-theme--color-primary",
1132
+ "--c2-upload__prompt--color": "--c2-theme--color-on-surface",
1133
+ "--c2-upload__prompt--font-size": "--c2-theme--font-size-md",
1134
+ "--c2-upload__prompt--font-weight": "--c2-theme--font-weight-semibold",
1135
+ "--c2-upload__action--color": "--c2-theme--color-primary",
1136
+ "--c2-upload__hint--color": "--c2-theme--color-on-surface-variant",
1137
+ "--c2-upload__hint--font-size": "--c2-theme--font-size-sm",
1138
+ "--c2-upload__error--color": "--c2-theme--color-error",
1139
+ "--c2-upload__error--font-size": "--c2-theme--font-size-sm",
959
1140
  "--c2-virtual-list--background": "--c2-theme--color-surface",
960
1141
  "--c2-virtual-list--color": "--c2-theme--color-on-surface",
961
1142
  "--c2-virtual-list--font-size": "--c2-theme--font-size-md",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@c2n/theme",
3
- "version": "0.0.7",
3
+ "version": "0.0.9",
4
4
  "description": "Design tokens (--c2-theme--*) and a generated base theme that maps every @c2n component CSS variable onto them",
5
5
  "type": "module",
6
6
  "main": "dist/tokens.js",
@@ -54,6 +54,16 @@
54
54
  "build": {
55
55
  "dependencies": [
56
56
  "type-check",
57
+ "../../components/tree:build",
58
+ "../../components/status-panel:build",
59
+ "../../components/qr-code:build",
60
+ "../../components/upload:build",
61
+ "../../components/rate:build",
62
+ "../../components/cascader:build",
63
+ "../../components/questionnaire:build",
64
+ "../../components/number-input:build",
65
+ "../../components/date-input:build",
66
+ "../../components/date-selector:build",
57
67
  "../../components/chart:build",
58
68
  "../../components/autocomplete:build",
59
69
  "../../components/header:build",
@@ -117,5 +127,5 @@
117
127
  "@c2n/config": "*",
118
128
  "prettier": "3.9.6"
119
129
  },
120
- "gitHead": "c8db398a27f7cd417d665fdf5da455fee2d4e910"
130
+ "gitHead": "e4768cce5e0fbd5bc3165cd493a1e8d57cf0fff4"
121
131
  }