@c2n/theme 0.0.8 → 0.0.10

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.
package/dist/base.css CHANGED
@@ -72,7 +72,20 @@
72
72
  --c2-avatar--border-bottom-left-radius: var(--c2-theme--radius-full, 999px);
73
73
  --c2-avatar--border-bottom-right-radius: var(--c2-theme--radius-full, 999px);
74
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));
75
82
  --c2-avatar__badge--border: 2px solid var(--c2-theme--color-surface, #ffffff);
83
+ --c2-avatar-group__overflow--background: var(--c2-theme--color-inverse-surface, #52525b);
84
+ --c2-avatar-group__overflow--color: var(--c2-theme--color-on-inverse-surface, #ffffff);
85
+ --c2-avatar-group__overflow--border: 2px solid var(--c2-theme--color-surface, #ffffff);
86
+ --c2-avatar-group__overflow--border-radius: var(--c2-theme--radius-full, 999px);
87
+ --c2-avatar-group__overflow--font-size: var(--c2-theme--font-size-sm, 12px);
88
+ --c2-avatar-group__overflow--font-weight: var(--c2-theme--font-weight-semibold, 600);
76
89
  }
77
90
 
78
91
  /* @c2n/badge */
@@ -90,6 +103,13 @@
90
103
  --c2-badge__anchor--border: 2px solid var(--c2-theme--color-surface, #ffffff);
91
104
  }
92
105
 
106
+ /* @c2n/border-beam */
107
+ :root,
108
+ :host {
109
+ --c2-border-beam__beam--radius: var(--c2-theme--radius-lg, 12px);
110
+ --c2-border-beam__beam--color-from: var(--c2-theme--color-primary, #0265dc);
111
+ }
112
+
93
113
  /* @c2n/breadcrumb */
94
114
  :root,
95
115
  :host {
@@ -122,6 +142,12 @@
122
142
  :root,
123
143
  :host {
124
144
  --c2-button-group--border-radius: var(--c2-theme--radius-md, 6px);
145
+ --c2-button-group__segmented--background-color: var(--c2-theme--color-surface-container, #f4f4f5);
146
+ --c2-button-group__segmented-item--color: var(--c2-theme--color-on-surface-variant, #52525b);
147
+ --c2-button-group__segmented-item__selected--color: var(--c2-theme--color-on-surface, #18181b);
148
+ --c2-button-group__indicator--background-color: var(--c2-theme--color-surface, #ffffff);
149
+ --c2-button-group__indicator--border-radius: var(--c2-theme--radius-md, 6px);
150
+ --c2-button-group__indicator--transition-duration: calc(200ms * var(--c2-theme--motion-scale, 1));
125
151
  }
126
152
 
127
153
  /* @c2n/card */
@@ -140,6 +166,37 @@
140
166
  --c2-card__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
141
167
  }
142
168
 
169
+ /* @c2n/cascader */
170
+ :root,
171
+ :host {
172
+ --c2-cascader__trigger--background: var(--c2-theme--color-surface, #ffffff);
173
+ --c2-cascader__trigger--color: var(--c2-theme--color-on-surface, #18181b);
174
+ --c2-cascader__trigger--font-size: var(--c2-theme--font-size-md, 14px);
175
+ --c2-cascader__trigger--border: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6));
176
+ --c2-cascader__trigger--border-radius: var(--c2-theme--radius-md, 6px);
177
+ --c2-cascader__trigger__hover--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-strong, #a1a1aa);
178
+ --c2-cascader__trigger__hover--background: var(--c2-theme--color-surface-container-low, #fafafa);
179
+ --c2-cascader__trigger__open--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-primary, rgb(2, 101, 220));
180
+ --c2-cascader__trigger__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
181
+ --c2-cascader__trigger__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
182
+ --c2-cascader__placeholder--color: var(--c2-theme--color-on-surface-variant, #71717a);
183
+ --c2-cascader__icon--color: var(--c2-theme--color-on-surface-variant, #71717a);
184
+ --c2-cascader__panel--background: var(--c2-theme--color-surface, #ffffff);
185
+ --c2-cascader__panel--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
186
+ --c2-cascader__panel--border-radius: var(--c2-theme--radius-lg, 8px);
187
+ --c2-cascader__panel--box-shadow: var(--c2-theme--shadow-md, 0 12px 32px rgba(24, 24, 27, 0.14));
188
+ --c2-cascader__column--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
189
+ --c2-cascader__option--border-radius: var(--c2-theme--radius-md, 6px);
190
+ --c2-cascader__option--color: var(--c2-theme--color-on-surface, #18181b);
191
+ --c2-cascader__option--font-size: var(--c2-theme--font-size-md, 14px);
192
+ --c2-cascader__option__hover--background: var(--c2-theme--color-surface-container, #f4f4f5);
193
+ --c2-cascader__option__active--background: var(--c2-theme--color-primary-container, #e8f2ff);
194
+ --c2-cascader__option__active--color: var(--c2-theme--color-on-surface, #18181b);
195
+ --c2-cascader__option__selected--color: var(--c2-theme--color-primary, rgb(2, 101, 220));
196
+ --c2-cascader__option__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
197
+ --c2-cascader__empty--color: var(--c2-theme--color-on-surface-variant, #71717a);
198
+ }
199
+
143
200
  /* @c2n/chart */
144
201
  :root,
145
202
  :host {
@@ -240,6 +297,33 @@
240
297
  --c2-checkbox__state-layer--border-bottom-right-radius: var(--c2-theme--radius-md, 6px);
241
298
  }
242
299
 
300
+ /* @c2n/code-editor */
301
+ :root,
302
+ :host {
303
+ --c2-code-editor--background: var(--c2-theme--color-surface, #ffffff);
304
+ --c2-code-editor--border: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6));
305
+ --c2-code-editor__focus--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-primary, rgb(2, 101, 220));
306
+ --c2-code-editor__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
307
+ --c2-code-editor--border-radius: var(--c2-theme--radius-md, 6px);
308
+ --c2-code-editor__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
309
+ --c2-code-editor--font-family: var(--c2-theme--font-family, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
310
+ --c2-code-editor__gutter--color: var(--c2-theme--color-on-surface-variant, #71717a);
311
+ --c2-code-editor__gutter__active--color: var(--c2-theme--color-on-surface, #18181b);
312
+ --c2-code-editor__gutter--border-right: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
313
+ --c2-code-editor__active-line--background: color-mix(in srgb, var(--c2-theme--color-primary, #0265dc) 4%, transparent);
314
+ --c2-code-editor__selection--background: color-mix(in srgb, var(--c2-theme--color-primary, #0265dc) 18%, transparent);
315
+ --c2-code-editor__cursor--color: var(--c2-theme--color-on-surface, #18181b);
316
+ --c2-code-editor__matching-bracket--background: color-mix(in srgb, var(--c2-theme--color-primary, #0265dc) 16%, transparent);
317
+ --c2-code-editor__placeholder--color: var(--c2-theme--color-on-surface-variant, #71717a);
318
+ --c2-code-editor__label--color: var(--c2-theme--color-on-surface, #18181b);
319
+ --c2-code-editor__label--font-size: var(--c2-theme--font-size-sm, 12px);
320
+ --c2-code-editor__label--font-weight: var(--c2-theme--font-weight-medium, 500);
321
+ --c2-code-editor__supporting-text--color: var(--c2-theme--color-on-surface-variant, #71717a);
322
+ --c2-code-editor__supporting-text--font-size: var(--c2-theme--font-size-sm, 12px);
323
+ --c2-code-editor__error--color: var(--c2-theme--color-error, #dc2626);
324
+ --c2-code-editor__error--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-error, #dc2626);
325
+ }
326
+
243
327
  /* @c2n/code-viewer */
244
328
  :root,
245
329
  :host {
@@ -668,6 +752,46 @@
668
752
  --c2-progress__value--font-weight: var(--c2-theme--font-weight-medium, 500);
669
753
  }
670
754
 
755
+ /* @c2n/qr-code */
756
+ :root,
757
+ :host {
758
+ --c2-qr-code__module--color: var(--c2-theme--color-on-surface, #18181b);
759
+ --c2-qr-code__background--color: var(--c2-theme--color-surface, #ffffff);
760
+ --c2-qr-code__container--border-radius: var(--c2-theme--radius-lg, 8px);
761
+ --c2-qr-code__placeholder--color: var(--c2-theme--color-on-surface-variant, #71717a);
762
+ --c2-qr-code__placeholder--font-size: var(--c2-theme--font-size-sm, 12px);
763
+ --c2-qr-code__center--background-color: var(--c2-theme--color-surface, #ffffff);
764
+ --c2-qr-code__center--border-radius: var(--c2-theme--radius-md, 6px);
765
+ }
766
+
767
+ /* @c2n/questionnaire */
768
+ :root,
769
+ :host {
770
+ --c2-questionnaire--color: var(--c2-theme--color-on-surface, #18181b);
771
+ --c2-questionnaire__progress--font-size: var(--c2-theme--font-size-sm, 12px);
772
+ --c2-questionnaire__progress--color: var(--c2-theme--color-on-surface-variant, #71717a);
773
+ --c2-questionnaire__title--font-weight: var(--c2-theme--font-weight-semibold, 600);
774
+ --c2-questionnaire__description--color: var(--c2-theme--color-on-surface-variant, #71717a);
775
+ --c2-questionnaire__description--font-size: var(--c2-theme--font-size-md, 14px);
776
+ --c2-questionnaire__option--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
777
+ --c2-questionnaire__option--border-radius: var(--c2-theme--radius-lg, 8px);
778
+ --c2-questionnaire__option--background-color: var(--c2-theme--color-surface, #ffffff);
779
+ --c2-questionnaire__option__hover--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6);
780
+ --c2-questionnaire__option__selected--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-strong, #a1a1aa);
781
+ --c2-questionnaire__option__selected--background-color: var(--c2-theme--color-surface-container-low, #fafafa);
782
+ --c2-questionnaire__option__error--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-error, #dc2626);
783
+ --c2-questionnaire__option__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
784
+ --c2-questionnaire__control__selected--background-color: var(--c2-theme--color-inverse-surface, #18181b);
785
+ --c2-questionnaire__option-description--color: var(--c2-theme--color-on-surface-variant, #71717a);
786
+ --c2-questionnaire__shortcut--color: var(--c2-theme--color-on-surface-variant, #71717a);
787
+ --c2-questionnaire__error--color: var(--c2-theme--color-error, #dc2626);
788
+ --c2-questionnaire__action--border-radius: var(--c2-theme--radius-lg, 8px);
789
+ --c2-questionnaire__primary-action--background-color: var(--c2-theme--color-inverse-surface, #18181b);
790
+ --c2-questionnaire__primary-action--color: var(--c2-theme--color-on-primary, #ffffff);
791
+ --c2-questionnaire__secondary-action--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
792
+ --c2-questionnaire__secondary-action--background-color: var(--c2-theme--color-surface, #ffffff);
793
+ }
794
+
671
795
  /* @c2n/radio */
672
796
  :root,
673
797
  :host {
@@ -694,6 +818,16 @@
694
818
  --c2-radio-group__header__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
695
819
  }
696
820
 
821
+ /* @c2n/rate */
822
+ :root,
823
+ :host {
824
+ --c2-rate__icon--color: var(--c2-theme--color-outline-variant, #e4e4e7);
825
+ --c2-rate__icon--transition-duration: calc(150ms * var(--c2-theme--motion-scale, 1));
826
+ --c2-rate__container__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
827
+ --c2-rate__container--border-radius: var(--c2-theme--radius-sm, 4px);
828
+ --c2-rate__container__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
829
+ }
830
+
697
831
  /* @c2n/select */
698
832
  :root,
699
833
  :host {
@@ -825,6 +959,46 @@
825
959
  --c2-stat__description--color: var(--c2-theme--color-on-surface-variant, #71717a);
826
960
  }
827
961
 
962
+ /* @c2n/status-panel */
963
+ :root,
964
+ :host {
965
+ --c2-status-panel__container--border-radius: var(--c2-theme--radius-xl, 14px);
966
+ --c2-status-panel__media--border-radius: var(--c2-theme--radius-full, 999px);
967
+ --c2-status-panel__media--background-color: var(--c2-theme--color-surface-container, #f4f4f5);
968
+ --c2-status-panel__media--color: var(--c2-theme--color-on-surface-variant, #71717a);
969
+ --c2-status-panel__media__info--background-color: var(--c2-theme--color-primary-container, #edf1fe);
970
+ --c2-status-panel__media__info--color: var(--c2-theme--color-primary, rgb(2, 101, 220));
971
+ --c2-status-panel__title--color: var(--c2-theme--color-on-surface, #18181b);
972
+ --c2-status-panel__title--font-weight: var(--c2-theme--font-weight-semibold, 600);
973
+ --c2-status-panel__description--color: var(--c2-theme--color-on-surface-variant, #71717a);
974
+ --c2-status-panel__description--font-size: var(--c2-theme--font-size-md, 14px);
975
+ --c2-status-panel__content--border-radius: var(--c2-theme--radius-lg, 8px);
976
+ --c2-status-panel__content--background-color: var(--c2-theme--color-surface-container, #f4f4f5);
977
+ }
978
+
979
+ /* @c2n/steps */
980
+ :root,
981
+ :host {
982
+ --c2-step__row--border-bottom: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
983
+ --c2-step__toggle--color: var(--c2-theme--color-on-surface-variant, #a1a1aa);
984
+ --c2-step__guide--color: var(--c2-theme--color-outline-variant, #e4e4e7);
985
+ --c2-step__marker--font-weight: var(--c2-theme--font-weight-semibold, 600);
986
+ --c2-step__marker--border-radius: var(--c2-theme--radius-full, 999px);
987
+ --c2-step__marker--border: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6));
988
+ --c2-step__marker--color: var(--c2-theme--color-on-surface-variant, #71717a);
989
+ --c2-step__rail--color: var(--c2-theme--color-outline-variant, #e4e4e7);
990
+ --c2-step__label--color: var(--c2-theme--color-on-surface, #18181b);
991
+ --c2-step__label--font-weight: var(--c2-theme--font-weight-medium, 500);
992
+ --c2-step__label--font-family: var(--c2-theme--font-family, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
993
+ --c2-step__detail--color: var(--c2-theme--color-on-surface-variant, #71717a);
994
+ --c2-step__trailing--color: var(--c2-theme--color-on-surface-variant, #71717a);
995
+ --c2-step__error--color: var(--c2-theme--color-error, #dc2626);
996
+ --c2-step__running--color: var(--c2-theme--color-primary, rgb(2, 101, 220));
997
+ --c2-step__current--color: var(--c2-theme--color-primary, rgb(2, 101, 220));
998
+ --c2-step__skipped--color: var(--c2-theme--color-on-surface-variant, #71717a);
999
+ --c2-step--transition-duration: calc(150ms * var(--c2-theme--motion-scale, 1));
1000
+ }
1001
+
828
1002
  /* @c2n/switch */
829
1003
  :root,
830
1004
  :host {
@@ -962,6 +1136,29 @@
962
1136
  --c2-textarea__supporting-text__error--color: var(--c2-theme--color-error, #dc2626);
963
1137
  }
964
1138
 
1139
+ /* @c2n/theme-select */
1140
+ :root,
1141
+ :host {
1142
+ --c2-theme-select__trigger--border-radius: var(--c2-theme--radius-lg, 8px);
1143
+ --c2-theme-select__trigger--color: var(--c2-theme--color-on-surface, #18181b);
1144
+ --c2-theme-select__trigger__hover--background: var(--c2-theme--color-surface-container, #f4f4f5);
1145
+ --c2-theme-select__trigger__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
1146
+ --c2-theme-select__trigger__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
1147
+ --c2-theme-select__label--font-size: var(--c2-theme--font-size-md, 14px);
1148
+ --c2-theme-select__label--font-weight: var(--c2-theme--font-weight-medium, 500);
1149
+ --c2-theme-select__menu--background: var(--c2-theme--color-surface, #ffffff);
1150
+ --c2-theme-select__menu--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
1151
+ --c2-theme-select__menu--border-radius: var(--c2-theme--radius-lg, 8px);
1152
+ --c2-theme-select__menu--box-shadow: var(--c2-theme--shadow-md, 0 8px 24px rgba(24, 24, 27, 0.08));
1153
+ --c2-theme-select__menu-item--border-radius: var(--c2-theme--radius-md, 6px);
1154
+ --c2-theme-select__menu-item--color: var(--c2-theme--color-on-surface, #18181b);
1155
+ --c2-theme-select__menu-item--font-size: var(--c2-theme--font-size-md, 14px);
1156
+ --c2-theme-select__menu-item--font-weight: var(--c2-theme--font-weight-medium, 500);
1157
+ --c2-theme-select__menu-item__hover--background: var(--c2-theme--color-surface-container, #f4f4f5);
1158
+ --c2-theme-select__menu-item__selected--color: var(--c2-theme--color-primary, rgb(2, 101, 220));
1159
+ --c2-theme-select--transition-duration: calc(150ms * var(--c2-theme--motion-scale, 1));
1160
+ }
1161
+
965
1162
  /* @c2n/toast */
966
1163
  :root,
967
1164
  :host {
@@ -989,6 +1186,58 @@
989
1186
  --c2-tooltip--transition-duration: calc(120ms * var(--c2-theme--motion-scale, 1));
990
1187
  }
991
1188
 
1189
+ /* @c2n/tree */
1190
+ :root,
1191
+ :host {
1192
+ --c2-tree--background: var(--c2-theme--color-surface, #ffffff);
1193
+ --c2-tree--border-top-left-radius: var(--c2-theme--radius-lg, 8px);
1194
+ --c2-tree--border-top-right-radius: var(--c2-theme--radius-lg, 8px);
1195
+ --c2-tree--border-bottom-left-radius: var(--c2-theme--radius-lg, 8px);
1196
+ --c2-tree--border-bottom-right-radius: var(--c2-theme--radius-lg, 8px);
1197
+ --c2-tree--font-size: var(--c2-theme--font-size-md, 14px);
1198
+ --c2-tree__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
1199
+ --c2-tree__empty--color: var(--c2-theme--color-on-surface-variant, #71717a);
1200
+ --c2-tree-item__row--border-radius: var(--c2-theme--radius-sm, 4px);
1201
+ --c2-tree-item--color: var(--c2-theme--color-on-surface, #18181b);
1202
+ --c2-tree-item--font-size: var(--c2-theme--font-size-md, 14px);
1203
+ --c2-tree-item__hover--background: var(--c2-theme--color-surface-container, #f4f4f5);
1204
+ --c2-tree-item__selected--color: var(--c2-theme--color-primary, rgb(2, 101, 220));
1205
+ --c2-tree-item__selected--background: var(--c2-theme--color-primary-container, #edf1fe);
1206
+ --c2-tree-item__selected__hover--background: color-mix(
1207
+ in srgb,
1208
+ var(--c2-theme--color-primary-container, #edf1fe),
1209
+ var(--c2-theme--color-primary, #0265dc) 8%
1210
+ );
1211
+ --c2-tree-item__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
1212
+ --c2-tree-item__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
1213
+ --c2-tree-item__toggle--color: var(--c2-theme--color-on-surface-variant, #71717a);
1214
+ --c2-tree-item__toggle--transition-duration: calc(150ms * var(--c2-theme--motion-scale, 1));
1215
+ --c2-tree-item__guide--color: var(--c2-theme--color-outline-variant, #e4e4e7);
1216
+ }
1217
+
1218
+ /* @c2n/upload */
1219
+ :root,
1220
+ :host {
1221
+ --c2-upload__dropzone--background: var(--c2-theme--color-surface, #ffffff);
1222
+ --c2-upload__dropzone--border: var(--c2-theme--border-width, 1px) dashed var(--c2-theme--color-outline, #bcbcc6);
1223
+ --c2-upload__dropzone--border-radius: var(--c2-theme--radius-xl, 14px);
1224
+ --c2-upload__dropzone__hover--background: var(--c2-theme--color-surface-container-low, #fafafa);
1225
+ --c2-upload__dropzone__hover--border: var(--c2-theme--border-width, 1px) dashed var(--c2-theme--color-outline, #a1a1aa);
1226
+ --c2-upload__dropzone__drag--background: var(--c2-theme--color-primary-container, #e8f2ff);
1227
+ --c2-upload__dropzone__drag--border: var(--c2-theme--border-width, 1px) dashed var(--c2-theme--color-primary, rgb(2, 101, 220));
1228
+ --c2-upload__dropzone__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
1229
+ --c2-upload__dropzone__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
1230
+ --c2-upload__icon--color: var(--c2-theme--color-primary, rgb(2, 101, 220));
1231
+ --c2-upload__prompt--color: var(--c2-theme--color-on-surface, #18181b);
1232
+ --c2-upload__prompt--font-size: var(--c2-theme--font-size-md, 14px);
1233
+ --c2-upload__prompt--font-weight: var(--c2-theme--font-weight-semibold, 600);
1234
+ --c2-upload__action--color: var(--c2-theme--color-primary, rgb(2, 101, 220));
1235
+ --c2-upload__hint--color: var(--c2-theme--color-on-surface-variant, #71717a);
1236
+ --c2-upload__hint--font-size: var(--c2-theme--font-size-sm, 12px);
1237
+ --c2-upload__error--color: var(--c2-theme--color-error, #dc2626);
1238
+ --c2-upload__error--font-size: var(--c2-theme--font-size-sm, 12px);
1239
+ }
1240
+
992
1241
  /* @c2n/virtual-list */
993
1242
  :root,
994
1243
  :host {