@class-kit/react 0.1.0

package/dist/styles/themes/amber.css

@@ -0,0 +1,19 @@
+.cc-theme-amber,
+[data-cc-theme="amber"] {
+  --cc-color-text: #2d220f;
+  --cc-color-muted: #725f38;
+  --cc-color-border: #fde68a;
+  --cc-color-border-hover: #fcd34d;
+  --cc-color-border-focus: #d97706;
+  --cc-color-divider: #fef3c7;
+  --cc-color-surface: #ffffff;
+  --cc-color-surface-soft: #fffbeb;
+  --cc-color-danger: #be123c;
+  --cc-color-success: #047857;
+  --cc-color-warning: #b45309;
+  --cc-color-accent: #d97706;
+  --cc-color-accent-hover: #b45309;
+  --cc-color-accent-contrast: #ffffff;
+  --cc-tooltip-background: #4a320d;
+  --cc-tooltip-color: #ffffff;
+}

package/dist/styles/themes/emerald.css

@@ -0,0 +1,19 @@
+.cc-theme-emerald,
+[data-cc-theme="emerald"] {
+  --cc-color-text: #10231b;
+  --cc-color-muted: #4b635a;
+  --cc-color-border: #bbf7d0;
+  --cc-color-border-hover: #86efac;
+  --cc-color-border-focus: #059669;
+  --cc-color-divider: #d1fae5;
+  --cc-color-surface: #ffffff;
+  --cc-color-surface-soft: #ecfdf5;
+  --cc-color-danger: #b91c1c;
+  --cc-color-success: #047857;
+  --cc-color-warning: #b45309;
+  --cc-color-accent: #059669;
+  --cc-color-accent-hover: #047857;
+  --cc-color-accent-contrast: #ffffff;
+  --cc-tooltip-background: #063f2d;
+  --cc-tooltip-color: #ffffff;
+}

package/dist/styles/themes/liquid-glass.css

@@ -0,0 +1,55 @@
+.cc-theme-liquid-glass,
+[data-cc-theme="liquid-glass"] {
+  --cc-theme-backdrop-filter: saturate(1.65) blur(22px) contrast(1.03);
+  --cc-theme-glass-highlight: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.88),
+    rgba(255, 255, 255, 0.36) 48%,
+    rgba(255, 255, 255, 0.18)
+  );
+  --cc-color-surface: color-mix(in srgb, #ffffff 64%, transparent);
+  --cc-color-surface-soft: color-mix(in srgb, #ffffff 36%, transparent);
+  --cc-color-border: rgba(255, 255, 255, 0.58);
+  --cc-color-border-hover: rgba(255, 255, 255, 0.84);
+  --cc-color-divider: rgba(255, 255, 255, 0.34);
+  --cc-shadow-floating: 0 24px 70px
+    color-mix(in srgb, var(--cc-form-color-accent) 18%, transparent);
+  --cc-form-color-surface: var(--cc-color-surface);
+  --cc-form-color-surface-soft: var(--cc-color-surface-soft);
+  --cc-form-color-border: var(--cc-color-border);
+  --cc-form-color-border-hover: var(--cc-color-border-hover);
+  --cc-form-color-divider: var(--cc-color-divider);
+  --cc-form-shadow-floating: var(--cc-shadow-floating);
+  --cc-select-menu-background: var(--cc-color-surface);
+  --cc-select-menu-border-color: var(--cc-color-border);
+  --cc-button-secondary-background: var(--cc-color-surface-soft);
+  --cc-modal-background: var(--cc-color-surface);
+  --cc-modal-header-background: var(--cc-theme-glass-highlight);
+  --cc-popup-background: var(--cc-color-surface);
+  --cc-popup-header-background: var(--cc-theme-glass-highlight);
+  --cc-tooltip-background: rgba(15, 23, 42, 0.82);
+  --cc-toast-background: rgba(255, 255, 255, 0.68);
+  --cc-toast-border-color: var(--cc-color-border);
+  --cc-tilt-card-background: var(--cc-color-surface);
+  --cc-tilt-card-border-color: var(--cc-color-border);
+  --cc-canvas-editor-background: color-mix(
+    in srgb,
+    var(--cc-color-surface) 74%,
+    transparent
+  );
+  --cc-canvas-editor-card-background: var(--cc-color-surface);
+  isolation: isolate;
+}
+
+.cc-theme-liquid-glass .cc-modal__panel,
+.cc-theme-liquid-glass .cc-popup__panel,
+.cc-theme-liquid-glass .cc-toast,
+[data-cc-theme="liquid-glass"] .cc-modal__panel,
+[data-cc-theme="liquid-glass"] .cc-popup__panel,
+[data-cc-theme="liquid-glass"] .cc-toast {
+  border: 1px solid var(--cc-color-border);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.42),
+    inset 0 -18px 40px rgba(255, 255, 255, 0.12),
+    var(--cc-shadow-floating);
+}

package/dist/styles/themes/minimal.css

@@ -0,0 +1,19 @@
+.cc-theme-minimal,
+[data-cc-theme="minimal"] {
+  --cc-color-text: #111111;
+  --cc-color-muted: #626262;
+  --cc-color-border: #d8d8d8;
+  --cc-color-border-hover: #a3a3a3;
+  --cc-color-border-focus: #111111;
+  --cc-color-divider: #e9e9e9;
+  --cc-color-surface: #ffffff;
+  --cc-color-surface-soft: #f7f7f7;
+  --cc-color-danger: #b91c1c;
+  --cc-color-success: #166534;
+  --cc-color-warning: #92400e;
+  --cc-color-accent: #111111;
+  --cc-color-accent-hover: #000000;
+  --cc-color-accent-contrast: #ffffff;
+  --cc-tooltip-background: #111111;
+  --cc-tooltip-color: #ffffff;
+}

package/dist/styles/themes/rose.css

@@ -0,0 +1,19 @@
+.cc-theme-rose,
+[data-cc-theme="rose"] {
+  --cc-color-text: #2f171d;
+  --cc-color-muted: #75545d;
+  --cc-color-border: #fecdd3;
+  --cc-color-border-hover: #fda4af;
+  --cc-color-border-focus: #e11d48;
+  --cc-color-divider: #ffe4e6;
+  --cc-color-surface: #ffffff;
+  --cc-color-surface-soft: #fff1f2;
+  --cc-color-danger: #be123c;
+  --cc-color-success: #047857;
+  --cc-color-warning: #b45309;
+  --cc-color-accent: #e11d48;
+  --cc-color-accent-hover: #be123c;
+  --cc-color-accent-contrast: #ffffff;
+  --cc-tooltip-background: #4a1420;
+  --cc-tooltip-color: #ffffff;
+}

package/dist/styles/themes/sky.css

@@ -0,0 +1,19 @@
+.cc-theme-sky,
+[data-cc-theme="sky"] {
+  --cc-color-text: #122033;
+  --cc-color-muted: #53657a;
+  --cc-color-border: #bfdbfe;
+  --cc-color-border-hover: #93c5fd;
+  --cc-color-border-focus: #0284c7;
+  --cc-color-divider: #dbeafe;
+  --cc-color-surface: #ffffff;
+  --cc-color-surface-soft: #eff6ff;
+  --cc-color-danger: #be123c;
+  --cc-color-success: #047857;
+  --cc-color-warning: #b45309;
+  --cc-color-accent: #0284c7;
+  --cc-color-accent-hover: #0369a1;
+  --cc-color-accent-contrast: #ffffff;
+  --cc-tooltip-background: #123452;
+  --cc-tooltip-color: #ffffff;
+}

package/dist/styles/themes/violet.css

@@ -0,0 +1,19 @@
+.cc-theme-violet,
+[data-cc-theme="violet"] {
+  --cc-color-text: #201a31;
+  --cc-color-muted: #6e6582;
+  --cc-color-border: #d8d1e7;
+  --cc-color-border-hover: #b9abd4;
+  --cc-color-border-focus: #7c3aed;
+  --cc-color-divider: #ebe5f5;
+  --cc-color-surface: #ffffff;
+  --cc-color-surface-soft: #f7f3ff;
+  --cc-color-danger: #c0263a;
+  --cc-color-success: #16a34a;
+  --cc-color-warning: #d97706;
+  --cc-color-accent: #7c3aed;
+  --cc-color-accent-hover: #6d28d9;
+  --cc-color-accent-contrast: #ffffff;
+  --cc-tooltip-background: #2f2450;
+  --cc-tooltip-color: #ffffff;
+}