@c2n/theme 0.0.9 → 0.0.11

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
@@ -80,6 +80,12 @@
80
80
  --c2-avatar__remove--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
81
81
  --c2-avatar__remove--box-shadow: var(--c2-theme--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.18));
82
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);
83
89
  }
84
90
 
85
91
  /* @c2n/badge */
@@ -97,6 +103,13 @@
97
103
  --c2-badge__anchor--border: 2px solid var(--c2-theme--color-surface, #ffffff);
98
104
  }
99
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
+
100
113
  /* @c2n/breadcrumb */
101
114
  :root,
102
115
  :host {
@@ -284,6 +297,33 @@
284
297
  --c2-checkbox__state-layer--border-bottom-right-radius: var(--c2-theme--radius-md, 6px);
285
298
  }
286
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
+
287
327
  /* @c2n/code-viewer */
288
328
  :root,
289
329
  :host {
@@ -372,6 +412,27 @@
372
412
  --c2-copy-button--transition-duration: calc(150ms * var(--c2-theme--motion-scale, 1));
373
413
  }
374
414
 
415
+ /* @c2n/dashboard */
416
+ :root,
417
+ :host {
418
+ --c2-dash-card__expanded--animation-duration: calc(200ms * var(--c2-theme--motion-scale, 1));
419
+ --c2-dash-card__header--color: var(--c2-theme--color-on-surface, #18181b);
420
+ --c2-dash-card__header--font-size: var(--c2-theme--font-size-md, 14px);
421
+ --c2-dash-card__header--font-weight: var(--c2-theme--font-weight-semibold, 600);
422
+ --c2-dash-card__footer--color: var(--c2-theme--color-on-surface-variant, #71717a);
423
+ --c2-dash-card__footer--font-size: var(--c2-theme--font-size-sm, 12px);
424
+ --c2-dash-card__control--border-radius: var(--c2-theme--radius-md, 6px);
425
+ --c2-dash-card__control--color: var(--c2-theme--color-on-surface-variant, #71717a);
426
+ --c2-dash-card__control__hover--background: var(--c2-theme--color-surface-container, #f4f4f5);
427
+ --c2-dash-card__control__hover--color: var(--c2-theme--color-on-surface, #18181b);
428
+ --c2-dash-card__control__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
429
+ --c2-dash-card__handle__hover--background: var(--c2-theme--color-primary-glow, rgba(2, 101, 220, 0.2));
430
+ --c2-dash-card__handle__active--background: var(--c2-theme--color-primary, rgb(2, 101, 220));
431
+ --c2-dash-card__handle--border-radius: var(--c2-theme--radius-full, 999px);
432
+ --c2-dash-card__handle--transition-duration: calc(150ms * var(--c2-theme--motion-scale, 1));
433
+ --c2-dash-card__handle__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
434
+ }
435
+
375
436
  /* @c2n/date-input */
376
437
  :root,
377
438
  :host {
@@ -936,6 +997,29 @@
936
997
  --c2-status-panel__content--background-color: var(--c2-theme--color-surface-container, #f4f4f5);
937
998
  }
938
999
 
1000
+ /* @c2n/steps */
1001
+ :root,
1002
+ :host {
1003
+ --c2-step__row--border-bottom: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
1004
+ --c2-step__toggle--color: var(--c2-theme--color-on-surface-variant, #a1a1aa);
1005
+ --c2-step__guide--color: var(--c2-theme--color-outline-variant, #e4e4e7);
1006
+ --c2-step__marker--font-weight: var(--c2-theme--font-weight-semibold, 600);
1007
+ --c2-step__marker--border-radius: var(--c2-theme--radius-full, 999px);
1008
+ --c2-step__marker--border: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6));
1009
+ --c2-step__marker--color: var(--c2-theme--color-on-surface-variant, #71717a);
1010
+ --c2-step__rail--color: var(--c2-theme--color-outline-variant, #e4e4e7);
1011
+ --c2-step__label--color: var(--c2-theme--color-on-surface, #18181b);
1012
+ --c2-step__label--font-weight: var(--c2-theme--font-weight-medium, 500);
1013
+ --c2-step__label--font-family: var(--c2-theme--font-family, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
1014
+ --c2-step__detail--color: var(--c2-theme--color-on-surface-variant, #71717a);
1015
+ --c2-step__trailing--color: var(--c2-theme--color-on-surface-variant, #71717a);
1016
+ --c2-step__error--color: var(--c2-theme--color-error, #dc2626);
1017
+ --c2-step__running--color: var(--c2-theme--color-primary, rgb(2, 101, 220));
1018
+ --c2-step__current--color: var(--c2-theme--color-primary, rgb(2, 101, 220));
1019
+ --c2-step__skipped--color: var(--c2-theme--color-on-surface-variant, #71717a);
1020
+ --c2-step--transition-duration: calc(150ms * var(--c2-theme--motion-scale, 1));
1021
+ }
1022
+
939
1023
  /* @c2n/switch */
940
1024
  :root,
941
1025
  :host {
@@ -1073,6 +1157,29 @@
1073
1157
  --c2-textarea__supporting-text__error--color: var(--c2-theme--color-error, #dc2626);
1074
1158
  }
1075
1159
 
1160
+ /* @c2n/theme-select */
1161
+ :root,
1162
+ :host {
1163
+ --c2-theme-select__trigger--border-radius: var(--c2-theme--radius-lg, 8px);
1164
+ --c2-theme-select__trigger--color: var(--c2-theme--color-on-surface, #18181b);
1165
+ --c2-theme-select__trigger__hover--background: var(--c2-theme--color-surface-container, #f4f4f5);
1166
+ --c2-theme-select__trigger__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
1167
+ --c2-theme-select__trigger__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
1168
+ --c2-theme-select__label--font-size: var(--c2-theme--font-size-md, 14px);
1169
+ --c2-theme-select__label--font-weight: var(--c2-theme--font-weight-medium, 500);
1170
+ --c2-theme-select__menu--background: var(--c2-theme--color-surface, #ffffff);
1171
+ --c2-theme-select__menu--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
1172
+ --c2-theme-select__menu--border-radius: var(--c2-theme--radius-lg, 8px);
1173
+ --c2-theme-select__menu--box-shadow: var(--c2-theme--shadow-md, 0 8px 24px rgba(24, 24, 27, 0.08));
1174
+ --c2-theme-select__menu-item--border-radius: var(--c2-theme--radius-md, 6px);
1175
+ --c2-theme-select__menu-item--color: var(--c2-theme--color-on-surface, #18181b);
1176
+ --c2-theme-select__menu-item--font-size: var(--c2-theme--font-size-md, 14px);
1177
+ --c2-theme-select__menu-item--font-weight: var(--c2-theme--font-weight-medium, 500);
1178
+ --c2-theme-select__menu-item__hover--background: var(--c2-theme--color-surface-container, #f4f4f5);
1179
+ --c2-theme-select__menu-item__selected--color: var(--c2-theme--color-primary, rgb(2, 101, 220));
1180
+ --c2-theme-select--transition-duration: calc(150ms * var(--c2-theme--motion-scale, 1));
1181
+ }
1182
+
1076
1183
  /* @c2n/toast */
1077
1184
  :root,
1078
1185
  :host {