@c2n/theme 0.0.8 → 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 +163 -0
  2. package/dist/report.json +772 -29
  3. package/dist/theme.css +163 -0
  4. package/dist/tokens.json +124 -0
  5. package/package.json +9 -2
package/dist/base.css CHANGED
@@ -72,6 +72,13 @@
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);
76
83
  }
77
84
 
@@ -122,6 +129,12 @@
122
129
  :root,
123
130
  :host {
124
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));
125
138
  }
126
139
 
127
140
  /* @c2n/card */
@@ -140,6 +153,37 @@
140
153
  --c2-card__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
141
154
  }
142
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
+
143
187
  /* @c2n/chart */
144
188
  :root,
145
189
  :host {
@@ -668,6 +712,46 @@
668
712
  --c2-progress__value--font-weight: var(--c2-theme--font-weight-medium, 500);
669
713
  }
670
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
+
671
755
  /* @c2n/radio */
672
756
  :root,
673
757
  :host {
@@ -694,6 +778,16 @@
694
778
  --c2-radio-group__header__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
695
779
  }
696
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
+
697
791
  /* @c2n/select */
698
792
  :root,
699
793
  :host {
@@ -825,6 +919,23 @@
825
919
  --c2-stat__description--color: var(--c2-theme--color-on-surface-variant, #71717a);
826
920
  }
827
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
+
828
939
  /* @c2n/switch */
829
940
  :root,
830
941
  :host {
@@ -989,6 +1100,58 @@
989
1100
  --c2-tooltip--transition-duration: calc(120ms * var(--c2-theme--motion-scale, 1));
990
1101
  }
991
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
+
992
1155
  /* @c2n/virtual-list */
993
1156
  :root,
994
1157
  :host {