@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/base.css CHANGED
@@ -43,7 +43,6 @@
43
43
  --c2-autocomplete--border-radius: var(--c2-theme--radius-lg, 8px);
44
44
  --c2-autocomplete__hover--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-strong, #a1a1aa);
45
45
  --c2-autocomplete__focus--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-primary, rgb(2, 101, 220));
46
- --c2-autocomplete__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
47
46
  --c2-autocomplete__placeholder--color: var(--c2-theme--color-on-surface-variant, #71717a);
48
47
  --c2-autocomplete__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
49
48
  --c2-autocomplete__icon--color: var(--c2-theme--color-on-surface-variant, #71717a);
@@ -73,6 +72,13 @@
73
72
  --c2-avatar--border-bottom-left-radius: var(--c2-theme--radius-full, 999px);
74
73
  --c2-avatar--border-bottom-right-radius: var(--c2-theme--radius-full, 999px);
75
74
  --c2-avatar--font-weight: var(--c2-theme--font-weight-semibold, 600);
75
+ --c2-avatar__editor--background: var(--c2-theme--color-scrim, rgba(0, 0, 0, 0.5));
76
+ --c2-avatar__editor--color: var(--c2-theme--color-on-inverse-surface, #ffffff);
77
+ --c2-avatar__editor__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.45));
78
+ --c2-avatar__remove--background: var(--c2-theme--color-surface, #ffffff);
79
+ --c2-avatar__remove--color: var(--c2-theme--color-on-surface-variant, #52525b);
80
+ --c2-avatar__remove--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
81
+ --c2-avatar__remove--box-shadow: var(--c2-theme--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.18));
76
82
  --c2-avatar__badge--border: 2px solid var(--c2-theme--color-surface, #ffffff);
77
83
  }
78
84
 
@@ -123,6 +129,12 @@
123
129
  :root,
124
130
  :host {
125
131
  --c2-button-group--border-radius: var(--c2-theme--radius-md, 6px);
132
+ --c2-button-group__segmented--background-color: var(--c2-theme--color-surface-container, #f4f4f5);
133
+ --c2-button-group__segmented-item--color: var(--c2-theme--color-on-surface-variant, #52525b);
134
+ --c2-button-group__segmented-item__selected--color: var(--c2-theme--color-on-surface, #18181b);
135
+ --c2-button-group__indicator--background-color: var(--c2-theme--color-surface, #ffffff);
136
+ --c2-button-group__indicator--border-radius: var(--c2-theme--radius-md, 6px);
137
+ --c2-button-group__indicator--transition-duration: calc(200ms * var(--c2-theme--motion-scale, 1));
126
138
  }
127
139
 
128
140
  /* @c2n/card */
@@ -141,6 +153,37 @@
141
153
  --c2-card__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
142
154
  }
143
155
 
156
+ /* @c2n/cascader */
157
+ :root,
158
+ :host {
159
+ --c2-cascader__trigger--background: var(--c2-theme--color-surface, #ffffff);
160
+ --c2-cascader__trigger--color: var(--c2-theme--color-on-surface, #18181b);
161
+ --c2-cascader__trigger--font-size: var(--c2-theme--font-size-md, 14px);
162
+ --c2-cascader__trigger--border: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6));
163
+ --c2-cascader__trigger--border-radius: var(--c2-theme--radius-md, 6px);
164
+ --c2-cascader__trigger__hover--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-strong, #a1a1aa);
165
+ --c2-cascader__trigger__hover--background: var(--c2-theme--color-surface-container-low, #fafafa);
166
+ --c2-cascader__trigger__open--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-primary, rgb(2, 101, 220));
167
+ --c2-cascader__trigger__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
168
+ --c2-cascader__trigger__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
169
+ --c2-cascader__placeholder--color: var(--c2-theme--color-on-surface-variant, #71717a);
170
+ --c2-cascader__icon--color: var(--c2-theme--color-on-surface-variant, #71717a);
171
+ --c2-cascader__panel--background: var(--c2-theme--color-surface, #ffffff);
172
+ --c2-cascader__panel--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
173
+ --c2-cascader__panel--border-radius: var(--c2-theme--radius-lg, 8px);
174
+ --c2-cascader__panel--box-shadow: var(--c2-theme--shadow-md, 0 12px 32px rgba(24, 24, 27, 0.14));
175
+ --c2-cascader__column--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
176
+ --c2-cascader__option--border-radius: var(--c2-theme--radius-md, 6px);
177
+ --c2-cascader__option--color: var(--c2-theme--color-on-surface, #18181b);
178
+ --c2-cascader__option--font-size: var(--c2-theme--font-size-md, 14px);
179
+ --c2-cascader__option__hover--background: var(--c2-theme--color-surface-container, #f4f4f5);
180
+ --c2-cascader__option__active--background: var(--c2-theme--color-primary-container, #e8f2ff);
181
+ --c2-cascader__option__active--color: var(--c2-theme--color-on-surface, #18181b);
182
+ --c2-cascader__option__selected--color: var(--c2-theme--color-primary, rgb(2, 101, 220));
183
+ --c2-cascader__option__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
184
+ --c2-cascader__empty--color: var(--c2-theme--color-on-surface-variant, #71717a);
185
+ }
186
+
144
187
  /* @c2n/chart */
145
188
  :root,
146
189
  :host {
@@ -329,6 +372,53 @@
329
372
  --c2-copy-button--transition-duration: calc(150ms * var(--c2-theme--motion-scale, 1));
330
373
  }
331
374
 
375
+ /* @c2n/date-input */
376
+ :root,
377
+ :host {
378
+ --c2-date-input--border: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6));
379
+ --c2-date-input--border-radius: var(--c2-theme--radius-md, 6px);
380
+ --c2-date-input--color: var(--c2-theme--color-on-surface, #18181b);
381
+ --c2-date-input--background: var(--c2-theme--color-surface, #ffffff);
382
+ --c2-date-input--font-size: var(--c2-theme--font-size-md, 14px);
383
+ --c2-date-input__hover--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-strong, #a1a1aa);
384
+ --c2-date-input__focus--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-primary, #0265dc);
385
+ --c2-date-input__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
386
+ --c2-date-input__error--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-error, #dc2626);
387
+ --c2-date-input__read-only--background: var(--c2-theme--color-surface-container-low, #fafafa);
388
+ --c2-date-input__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
389
+ --c2-date-input__calendar-icon--color: var(--c2-theme--color-on-surface-variant, #71717a);
390
+ --c2-date-input__calendar-icon__hover--color: var(--c2-theme--color-on-surface, #18181b);
391
+ --c2-date-input__supporting-text--font-size: var(--c2-theme--font-size-sm, 12px);
392
+ --c2-date-input__supporting-text--color: var(--c2-theme--color-on-surface-variant, #71717a);
393
+ --c2-date-input__supporting-text__error--color: var(--c2-theme--color-error, #dc2626);
394
+ }
395
+
396
+ /* @c2n/date-selector */
397
+ :root,
398
+ :host {
399
+ --c2-date-selector--background: var(--c2-theme--color-surface, #ffffff);
400
+ --c2-date-selector--color: var(--c2-theme--color-on-surface, #18181b);
401
+ --c2-date-selector--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
402
+ --c2-date-selector--border-radius: var(--c2-theme--radius-xl, 14px);
403
+ --c2-date-selector--box-shadow: var(--c2-theme--shadow-md, 0 12px 32px rgba(24, 24, 27, 0.08));
404
+ --c2-date-selector--font-size: var(--c2-theme--font-size-md, 14px);
405
+ --c2-date-selector__day--border-radius: var(--c2-theme--radius-full, 999px);
406
+ --c2-date-selector__day__hover--background: var(--c2-theme--color-surface-container, #f4f4f5);
407
+ --c2-date-selector__day__today--color: var(--c2-theme--color-primary, #0265dc);
408
+ --c2-date-selector__day__today--font-weight: var(--c2-theme--font-weight-semibold, 600);
409
+ --c2-date-selector__day__selected--background: var(--c2-theme--color-primary, #0265dc);
410
+ --c2-date-selector__day__selected--color: var(--c2-theme--color-on-primary, #ffffff);
411
+ --c2-date-selector__range--background: var(--c2-theme--color-primary-container, #edf1fe);
412
+ --c2-date-selector__range--color: var(--c2-theme--color-on-surface, #18181b);
413
+ --c2-date-selector__day__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
414
+ --c2-date-selector__weekday--color: var(--c2-theme--color-on-surface-variant, #71717a);
415
+ --c2-date-selector__weekday--font-size: var(--c2-theme--font-size-sm, 12px);
416
+ --c2-date-selector__month-title--font-weight: var(--c2-theme--font-weight-semibold, 600);
417
+ --c2-date-selector__navigation__hover--background: var(--c2-theme--color-surface-container, #f4f4f5);
418
+ --c2-date-selector__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
419
+ --c2-date-selector__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
420
+ }
421
+
332
422
  /* @c2n/details */
333
423
  :root,
334
424
  :host {
@@ -549,6 +639,32 @@
549
639
  --c2-navigation-menu-link__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
550
640
  }
551
641
 
642
+ /* @c2n/number-input */
643
+ :root,
644
+ :host {
645
+ --c2-number-input--border: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6));
646
+ --c2-number-input--border-radius: var(--c2-theme--radius-md, 6px);
647
+ --c2-number-input--color: var(--c2-theme--color-on-surface, #18181b);
648
+ --c2-number-input--background: var(--c2-theme--color-surface, #ffffff);
649
+ --c2-number-input--font-size: var(--c2-theme--font-size-md, 14px);
650
+ --c2-number-input__placeholder--color: var(--c2-theme--color-on-surface-variant, #71717a);
651
+ --c2-number-input__hover--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-strong, #a1a1aa);
652
+ --c2-number-input__focus--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-primary, #0265dc);
653
+ --c2-number-input__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
654
+ --c2-number-input__error--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-error, #dc2626);
655
+ --c2-number-input__read-only--background: var(--c2-theme--color-surface-container-low, #fafafa);
656
+ --c2-number-input__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
657
+ --c2-number-input__stepper--border-left: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
658
+ --c2-number-input__stepper--color: var(--c2-theme--color-on-surface-variant, #71717a);
659
+ --c2-number-input__stepper__hover--color: var(--c2-theme--color-on-surface, #18181b);
660
+ --c2-number-input__stepper__hover--background: var(--c2-theme--color-surface-container, #f4f4f5);
661
+ --c2-number-input__adornment--color: var(--c2-theme--color-on-surface-variant, #71717a);
662
+ --c2-number-input__adornment--font-size: var(--c2-theme--font-size-md, 14px);
663
+ --c2-number-input__supporting-text--font-size: var(--c2-theme--font-size-sm, 12px);
664
+ --c2-number-input__supporting-text--color: var(--c2-theme--color-on-surface-variant, #71717a);
665
+ --c2-number-input__supporting-text__error--color: var(--c2-theme--color-error, #dc2626);
666
+ }
667
+
552
668
  /* @c2n/overlay */
553
669
  :root,
554
670
  :host {
@@ -596,6 +712,46 @@
596
712
  --c2-progress__value--font-weight: var(--c2-theme--font-weight-medium, 500);
597
713
  }
598
714
 
715
+ /* @c2n/qr-code */
716
+ :root,
717
+ :host {
718
+ --c2-qr-code__module--color: var(--c2-theme--color-on-surface, #18181b);
719
+ --c2-qr-code__background--color: var(--c2-theme--color-surface, #ffffff);
720
+ --c2-qr-code__container--border-radius: var(--c2-theme--radius-lg, 8px);
721
+ --c2-qr-code__placeholder--color: var(--c2-theme--color-on-surface-variant, #71717a);
722
+ --c2-qr-code__placeholder--font-size: var(--c2-theme--font-size-sm, 12px);
723
+ --c2-qr-code__center--background-color: var(--c2-theme--color-surface, #ffffff);
724
+ --c2-qr-code__center--border-radius: var(--c2-theme--radius-md, 6px);
725
+ }
726
+
727
+ /* @c2n/questionnaire */
728
+ :root,
729
+ :host {
730
+ --c2-questionnaire--color: var(--c2-theme--color-on-surface, #18181b);
731
+ --c2-questionnaire__progress--font-size: var(--c2-theme--font-size-sm, 12px);
732
+ --c2-questionnaire__progress--color: var(--c2-theme--color-on-surface-variant, #71717a);
733
+ --c2-questionnaire__title--font-weight: var(--c2-theme--font-weight-semibold, 600);
734
+ --c2-questionnaire__description--color: var(--c2-theme--color-on-surface-variant, #71717a);
735
+ --c2-questionnaire__description--font-size: var(--c2-theme--font-size-md, 14px);
736
+ --c2-questionnaire__option--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
737
+ --c2-questionnaire__option--border-radius: var(--c2-theme--radius-lg, 8px);
738
+ --c2-questionnaire__option--background-color: var(--c2-theme--color-surface, #ffffff);
739
+ --c2-questionnaire__option__hover--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6);
740
+ --c2-questionnaire__option__selected--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-strong, #a1a1aa);
741
+ --c2-questionnaire__option__selected--background-color: var(--c2-theme--color-surface-container-low, #fafafa);
742
+ --c2-questionnaire__option__error--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-error, #dc2626);
743
+ --c2-questionnaire__option__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
744
+ --c2-questionnaire__control__selected--background-color: var(--c2-theme--color-inverse-surface, #18181b);
745
+ --c2-questionnaire__option-description--color: var(--c2-theme--color-on-surface-variant, #71717a);
746
+ --c2-questionnaire__shortcut--color: var(--c2-theme--color-on-surface-variant, #71717a);
747
+ --c2-questionnaire__error--color: var(--c2-theme--color-error, #dc2626);
748
+ --c2-questionnaire__action--border-radius: var(--c2-theme--radius-lg, 8px);
749
+ --c2-questionnaire__primary-action--background-color: var(--c2-theme--color-inverse-surface, #18181b);
750
+ --c2-questionnaire__primary-action--color: var(--c2-theme--color-on-primary, #ffffff);
751
+ --c2-questionnaire__secondary-action--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
752
+ --c2-questionnaire__secondary-action--background-color: var(--c2-theme--color-surface, #ffffff);
753
+ }
754
+
599
755
  /* @c2n/radio */
600
756
  :root,
601
757
  :host {
@@ -622,6 +778,16 @@
622
778
  --c2-radio-group__header__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
623
779
  }
624
780
 
781
+ /* @c2n/rate */
782
+ :root,
783
+ :host {
784
+ --c2-rate__icon--color: var(--c2-theme--color-outline-variant, #e4e4e7);
785
+ --c2-rate__icon--transition-duration: calc(150ms * var(--c2-theme--motion-scale, 1));
786
+ --c2-rate__container__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
787
+ --c2-rate__container--border-radius: var(--c2-theme--radius-sm, 4px);
788
+ --c2-rate__container__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
789
+ }
790
+
625
791
  /* @c2n/select */
626
792
  :root,
627
793
  :host {
@@ -753,6 +919,23 @@
753
919
  --c2-stat__description--color: var(--c2-theme--color-on-surface-variant, #71717a);
754
920
  }
755
921
 
922
+ /* @c2n/status-panel */
923
+ :root,
924
+ :host {
925
+ --c2-status-panel__container--border-radius: var(--c2-theme--radius-xl, 14px);
926
+ --c2-status-panel__media--border-radius: var(--c2-theme--radius-full, 999px);
927
+ --c2-status-panel__media--background-color: var(--c2-theme--color-surface-container, #f4f4f5);
928
+ --c2-status-panel__media--color: var(--c2-theme--color-on-surface-variant, #71717a);
929
+ --c2-status-panel__media__info--background-color: var(--c2-theme--color-primary-container, #edf1fe);
930
+ --c2-status-panel__media__info--color: var(--c2-theme--color-primary, rgb(2, 101, 220));
931
+ --c2-status-panel__title--color: var(--c2-theme--color-on-surface, #18181b);
932
+ --c2-status-panel__title--font-weight: var(--c2-theme--font-weight-semibold, 600);
933
+ --c2-status-panel__description--color: var(--c2-theme--color-on-surface-variant, #71717a);
934
+ --c2-status-panel__description--font-size: var(--c2-theme--font-size-md, 14px);
935
+ --c2-status-panel__content--border-radius: var(--c2-theme--radius-lg, 8px);
936
+ --c2-status-panel__content--background-color: var(--c2-theme--color-surface-container, #f4f4f5);
937
+ }
938
+
756
939
  /* @c2n/switch */
757
940
  :root,
758
941
  :host {
@@ -917,6 +1100,58 @@
917
1100
  --c2-tooltip--transition-duration: calc(120ms * var(--c2-theme--motion-scale, 1));
918
1101
  }
919
1102
 
1103
+ /* @c2n/tree */
1104
+ :root,
1105
+ :host {
1106
+ --c2-tree--background: var(--c2-theme--color-surface, #ffffff);
1107
+ --c2-tree--border-top-left-radius: var(--c2-theme--radius-lg, 8px);
1108
+ --c2-tree--border-top-right-radius: var(--c2-theme--radius-lg, 8px);
1109
+ --c2-tree--border-bottom-left-radius: var(--c2-theme--radius-lg, 8px);
1110
+ --c2-tree--border-bottom-right-radius: var(--c2-theme--radius-lg, 8px);
1111
+ --c2-tree--font-size: var(--c2-theme--font-size-md, 14px);
1112
+ --c2-tree__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
1113
+ --c2-tree__empty--color: var(--c2-theme--color-on-surface-variant, #71717a);
1114
+ --c2-tree-item__row--border-radius: var(--c2-theme--radius-sm, 4px);
1115
+ --c2-tree-item--color: var(--c2-theme--color-on-surface, #18181b);
1116
+ --c2-tree-item--font-size: var(--c2-theme--font-size-md, 14px);
1117
+ --c2-tree-item__hover--background: var(--c2-theme--color-surface-container, #f4f4f5);
1118
+ --c2-tree-item__selected--color: var(--c2-theme--color-primary, rgb(2, 101, 220));
1119
+ --c2-tree-item__selected--background: var(--c2-theme--color-primary-container, #edf1fe);
1120
+ --c2-tree-item__selected__hover--background: color-mix(
1121
+ in srgb,
1122
+ var(--c2-theme--color-primary-container, #edf1fe),
1123
+ var(--c2-theme--color-primary, #0265dc) 8%
1124
+ );
1125
+ --c2-tree-item__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
1126
+ --c2-tree-item__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
1127
+ --c2-tree-item__toggle--color: var(--c2-theme--color-on-surface-variant, #71717a);
1128
+ --c2-tree-item__toggle--transition-duration: calc(150ms * var(--c2-theme--motion-scale, 1));
1129
+ --c2-tree-item__guide--color: var(--c2-theme--color-outline-variant, #e4e4e7);
1130
+ }
1131
+
1132
+ /* @c2n/upload */
1133
+ :root,
1134
+ :host {
1135
+ --c2-upload__dropzone--background: var(--c2-theme--color-surface, #ffffff);
1136
+ --c2-upload__dropzone--border: var(--c2-theme--border-width, 1px) dashed var(--c2-theme--color-outline, #bcbcc6);
1137
+ --c2-upload__dropzone--border-radius: var(--c2-theme--radius-xl, 14px);
1138
+ --c2-upload__dropzone__hover--background: var(--c2-theme--color-surface-container-low, #fafafa);
1139
+ --c2-upload__dropzone__hover--border: var(--c2-theme--border-width, 1px) dashed var(--c2-theme--color-outline, #a1a1aa);
1140
+ --c2-upload__dropzone__drag--background: var(--c2-theme--color-primary-container, #e8f2ff);
1141
+ --c2-upload__dropzone__drag--border: var(--c2-theme--border-width, 1px) dashed var(--c2-theme--color-primary, rgb(2, 101, 220));
1142
+ --c2-upload__dropzone__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
1143
+ --c2-upload__dropzone__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
1144
+ --c2-upload__icon--color: var(--c2-theme--color-primary, rgb(2, 101, 220));
1145
+ --c2-upload__prompt--color: var(--c2-theme--color-on-surface, #18181b);
1146
+ --c2-upload__prompt--font-size: var(--c2-theme--font-size-md, 14px);
1147
+ --c2-upload__prompt--font-weight: var(--c2-theme--font-weight-semibold, 600);
1148
+ --c2-upload__action--color: var(--c2-theme--color-primary, rgb(2, 101, 220));
1149
+ --c2-upload__hint--color: var(--c2-theme--color-on-surface-variant, #71717a);
1150
+ --c2-upload__hint--font-size: var(--c2-theme--font-size-sm, 12px);
1151
+ --c2-upload__error--color: var(--c2-theme--color-error, #dc2626);
1152
+ --c2-upload__error--font-size: var(--c2-theme--font-size-sm, 12px);
1153
+ }
1154
+
920
1155
  /* @c2n/virtual-list */
921
1156
  :root,
922
1157
  :host {