svelora 2.1.0

package/dist/theme.css

@@ -0,0 +1,680 @@
+/**
+ * Svelora Theme - Material Design 3 Inspired
+ *
+ * Import this in your app:
+ * @import 'svelora/theme.css';
+ *
+ * To customize colors, override CSS variables in your own CSS file.
+ */
+
+@import 'tailwindcss';
+@source '.';
+
+/* ============================================
+ * DARK MODE CONFIGURATION
+ * Supports both class="dark" and prefers-color-scheme
+ * ============================================ */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* ============================================
+ * LIGHT THEME (Default)
+ * ============================================ */
+:root {
+    /* ========== PRIMARY ========== */
+    --color-primary: oklch(0.546 0.245 262.88);
+    --color-on-primary: oklch(1 0 0);
+    --color-primary-container: oklch(0.91 0.07 263);
+    --color-on-primary-container: oklch(0.283 0.09 263);
+
+    /* ========== SECONDARY ========== */
+    --color-secondary: oklch(0.446 0.043 257.28);
+    --color-on-secondary: oklch(1 0 0);
+    --color-secondary-container: oklch(0.92 0.04 257);
+    --color-on-secondary-container: oklch(0.21 0.045 257);
+
+    /* ========== TERTIARY ========== */
+    --color-tertiary: oklch(0.541 0.281 293.54);
+    --color-on-tertiary: oklch(1 0 0);
+    --color-tertiary-container: oklch(0.93 0.055 294);
+    --color-on-tertiary-container: oklch(0.283 0.105 294);
+
+    /* ========== ERROR ========== */
+    --color-error: oklch(0.577 0.245 27.33);
+    --color-on-error: oklch(1 0 0);
+    --color-error-container: oklch(0.93 0.05 27);
+    --color-on-error-container: oklch(0.258 0.09 27);
+
+    /* ========== SUCCESS ========== */
+    --color-success: oklch(0.627 0.194 149.21);
+    --color-on-success: oklch(1 0 0);
+    --color-success-container: oklch(0.935 0.06 149);
+    --color-on-success-container: oklch(0.266 0.065 149);
+
+    /* ========== WARNING ========== */
+    --color-warning: oklch(0.666 0.179 58.32);
+    --color-on-warning: oklch(0.279 0.077 45.64);
+    --color-warning-container: oklch(0.94 0.07 58);
+    --color-on-warning-container: oklch(0.279 0.077 58);
+
+    /* ========== INFO ========== */
+    --color-info: oklch(0.598 0.158 241.97);
+    --color-on-info: oklch(1 0 0);
+    --color-info-container: oklch(0.92 0.055 242);
+    --color-on-info-container: oklch(0.257 0.09 242);
+
+    /* ========== SURFACE ========== */
+    --color-surface: oklch(0.985 0.002 247.84);
+    --color-on-surface: oklch(0.145 0.014 247.09);
+    --color-on-surface-variant: oklch(0.446 0.043 257.28);
+
+    /* ========== SURFACE CONTAINERS (M3) ========== */
+    --color-surface-container-lowest: oklch(1 0 0);
+    --color-surface-container-low: oklch(0.976 0.004 247.84);
+    --color-surface-container: oklch(0.968 0.007 247.9);
+    --color-surface-container-high: oklch(0.956 0.008 247.86);
+    --color-surface-container-highest: oklch(0.929 0.013 255.51);
+
+    /* ========== SURFACE DIM & BRIGHT ========== */
+    --color-surface-dim: oklch(0.869 0.022 252.89);
+    --color-surface-bright: oklch(0.985 0.002 247.84);
+
+    /* ========== OUTLINE ========== */
+    --color-outline: oklch(0.554 0.046 257.42);
+    --color-outline-variant: oklch(0.789 0.029 256.79);
+
+    /* ========== INVERSE ========== */
+    --color-inverse-surface: oklch(0.208 0.042 265.75);
+    --color-inverse-on-surface: oklch(0.929 0.013 255.51);
+    --color-inverse-primary: oklch(0.707 0.165 254.62);
+}
+
+/* ============================================
+ * DARK THEME
+ * ============================================ */
+.dark {
+    /* ========== PRIMARY ========== */
+    --color-primary: oklch(0.707 0.165 254.62);
+    --color-on-primary: oklch(0.379 0.146 265.52);
+    --color-primary-container: oklch(0.38 0.13 263);
+    --color-on-primary-container: oklch(0.89 0.065 255);
+
+    /* ========== SECONDARY ========== */
+    --color-secondary: oklch(0.704 0.04 256.79);
+    --color-on-secondary: oklch(0.279 0.041 260.03);
+    --color-secondary-container: oklch(0.372 0.044 257);
+    --color-on-secondary-container: oklch(0.88 0.025 255);
+
+    /* ========== TERTIARY ========== */
+    --color-tertiary: oklch(0.702 0.183 293.54);
+    --color-on-tertiary: oklch(0.368 0.174 292.52);
+    --color-tertiary-container: oklch(0.37 0.14 293);
+    --color-on-tertiary-container: oklch(0.89 0.06 293);
+
+    /* ========== ERROR ========== */
+    --color-error: oklch(0.704 0.191 22.22);
+    --color-on-error: oklch(0.396 0.141 25.72);
+    --color-error-container: oklch(0.4 0.12 25);
+    --color-on-error-container: oklch(0.89 0.06 22);
+
+    /* ========== SUCCESS ========== */
+    --color-success: oklch(0.792 0.209 151.71);
+    --color-on-success: oklch(0.393 0.095 152.54);
+    --color-success-container: oklch(0.39 0.1 151);
+    --color-on-success-container: oklch(0.88 0.075 152);
+
+    /* ========== WARNING ========== */
+    --color-warning: oklch(0.828 0.189 84.43);
+    --color-on-warning: oklch(0.414 0.112 45.9);
+    --color-warning-container: oklch(0.4 0.11 70);
+    --color-on-warning-container: oklch(0.89 0.08 75);
+
+    /* ========== INFO ========== */
+    --color-info: oklch(0.697 0.127 241.97);
+    --color-on-info: oklch(0.32 0.103 243.43);
+    --color-info-container: oklch(0.37 0.105 242);
+    --color-on-info-container: oklch(0.88 0.065 242);
+
+    /* ========== SURFACE ========== */
+    --color-surface: oklch(0.145 0.014 247.09);
+    --color-on-surface: oklch(0.929 0.013 255.51);
+    --color-on-surface-variant: oklch(0.704 0.04 256.79);
+
+    /* ========== SURFACE CONTAINERS (M3) ========== */
+    --color-surface-container-lowest: oklch(0.105 0.014 249.09);
+    --color-surface-container-low: oklch(0.168 0.018 251.09);
+    --color-surface-container: oklch(0.208 0.024 253.09);
+    --color-surface-container-high: oklch(0.248 0.029 255.09);
+    --color-surface-container-highest: oklch(0.279 0.033 256.09);
+
+    /* ========== SURFACE DIM & BRIGHT ========== */
+    --color-surface-dim: oklch(0.145 0.014 247.09);
+    --color-surface-bright: oklch(0.372 0.044 257.29);
+
+    /* ========== OUTLINE ========== */
+    --color-outline: oklch(0.554 0.046 257.42);
+    --color-outline-variant: oklch(0.372 0.044 257.29);
+
+    /* ========== INVERSE ========== */
+    --color-inverse-surface: oklch(0.929 0.013 255.51);
+    --color-inverse-on-surface: oklch(0.279 0.041 260.03);
+    --color-inverse-primary: oklch(0.546 0.245 262.88);
+}
+
+/* ============================================
+ * REGISTER WITH TAILWIND
+ * ============================================ */
+@theme inline {
+    /* Primary */
+    --color-primary: var(--color-primary);
+    --color-on-primary: var(--color-on-primary);
+    --color-primary-container: var(--color-primary-container);
+    --color-on-primary-container: var(--color-on-primary-container);
+
+    /* Secondary */
+    --color-secondary: var(--color-secondary);
+    --color-on-secondary: var(--color-on-secondary);
+    --color-secondary-container: var(--color-secondary-container);
+    --color-on-secondary-container: var(--color-on-secondary-container);
+
+    /* Tertiary */
+    --color-tertiary: var(--color-tertiary);
+    --color-on-tertiary: var(--color-on-tertiary);
+    --color-tertiary-container: var(--color-tertiary-container);
+    --color-on-tertiary-container: var(--color-on-tertiary-container);
+
+    /* Error */
+    --color-error: var(--color-error);
+    --color-on-error: var(--color-on-error);
+    --color-error-container: var(--color-error-container);
+    --color-on-error-container: var(--color-on-error-container);
+
+    /* Success */
+    --color-success: var(--color-success);
+    --color-on-success: var(--color-on-success);
+    --color-success-container: var(--color-success-container);
+    --color-on-success-container: var(--color-on-success-container);
+
+    /* Warning */
+    --color-warning: var(--color-warning);
+    --color-on-warning: var(--color-on-warning);
+    --color-warning-container: var(--color-warning-container);
+    --color-on-warning-container: var(--color-on-warning-container);
+
+    /* Info */
+    --color-info: var(--color-info);
+    --color-on-info: var(--color-on-info);
+    --color-info-container: var(--color-info-container);
+    --color-on-info-container: var(--color-on-info-container);
+
+    /* Surface */
+    --color-surface: var(--color-surface);
+    --color-on-surface: var(--color-on-surface);
+    --color-on-surface-variant: var(--color-on-surface-variant);
+
+    /* Surface Containers */
+    --color-surface-container-lowest: var(--color-surface-container-lowest);
+    --color-surface-container-low: var(--color-surface-container-low);
+    --color-surface-container: var(--color-surface-container);
+    --color-surface-container-high: var(--color-surface-container-high);
+    --color-surface-container-highest: var(--color-surface-container-highest);
+
+    /* Surface Dim & Bright */
+    --color-surface-dim: var(--color-surface-dim);
+    --color-surface-bright: var(--color-surface-bright);
+
+    /* Outline */
+    --color-outline: var(--color-outline);
+    --color-outline-variant: var(--color-outline-variant);
+
+    /* Inverse */
+    --color-inverse-surface: var(--color-inverse-surface);
+    --color-inverse-on-surface: var(--color-inverse-on-surface);
+    --color-inverse-primary: var(--color-inverse-primary);
+
+    /* ========== RADIUS ========== */
+    --radius-xs: 0.125rem;
+    --radius-sm: 0.25rem;
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
+    --radius-2xl: 1rem;
+    --radius-3xl: 1.5rem;
+    --radius-full: 9999px;
+
+    /* ============================================
+     * SCRIM (overlay) — used by Drawer, Modal, Slideover
+     * Default: soft black at 30% (works with backdrop-blur).
+     * When prefers-reduced-transparency is on, the @media rule
+     * below bumps opacity to 70% so the scrim is accessible
+     * without relying on blur.
+     * ============================================ */
+    --scrim-color: 0 0 0;
+    --scrim-opacity: 0.3;
+    --scrim-bg: rgb(var(--scrim-color) / var(--scrim-opacity));
+}
+
+/* ============================================
+ * BASE STYLES
+ * ============================================ */
+@layer base {
+    html {
+        color-scheme: light;
+    }
+
+    html.dark {
+        color-scheme: dark;
+    }
+
+    body {
+        @apply bg-surface text-on-surface;
+    }
+}
+
+/* ============================================
+ * OVERLAY ACCESSIBILITY
+ * ============================================
+ * Performance hint for any element with backdrop-filter.
+ * Reduced-transparency fallback for users who request it
+ * (OS-level setting: Settings > Accessibility > Display > Reduce transparency).
+ * Replaces the soft scrim with a solid, accessible scrim that meets
+ * WCAG contrast requirements (>= 4.5:1 against typical surfaces).
+ */
+.backdrop-blur-xs,
+.backdrop-blur-sm,
+.backdrop-blur-md,
+.backdrop-blur-lg,
+.backdrop-blur-xl,
+.backdrop-blur-2xl,
+.backdrop-blur-3xl {
+    will-change: backdrop-filter;
+}
+
+@media (prefers-reduced-transparency: reduce) {
+    :root {
+        --scrim-opacity: 0.7;
+    }
+    .backdrop-blur-xs,
+    .backdrop-blur-sm,
+    .backdrop-blur-md,
+    .backdrop-blur-lg,
+    .backdrop-blur-xl,
+    .backdrop-blur-2xl,
+    .backdrop-blur-3xl {
+        backdrop-filter: none !important;
+    }
+}
+
+/* ============================================
+ * PROGRESS ANIMATIONS
+ * ============================================ */
+@keyframes carousel {
+    0%,
+    100% {
+        width: 50%;
+    }
+
+    0% {
+        transform: translateX(-100%);
+    }
+
+    100% {
+        transform: translateX(200%);
+    }
+}
+
+@keyframes carousel-rtl {
+    0%,
+    100% {
+        width: 50%;
+    }
+
+    0% {
+        transform: translateX(100%);
+    }
+
+    100% {
+        transform: translateX(-200%);
+    }
+}
+
+@keyframes carousel-vertical {
+    0%,
+    100% {
+        height: 50%;
+    }
+
+    0% {
+        transform: translateY(-100%);
+    }
+
+    100% {
+        transform: translateY(200%);
+    }
+}
+
+@keyframes carousel-inverse {
+    0%,
+    100% {
+        width: 50%;
+    }
+
+    0% {
+        transform: translateX(200%);
+    }
+
+    100% {
+        transform: translateX(-100%);
+    }
+}
+
+@keyframes carousel-inverse-rtl {
+    0%,
+    100% {
+        width: 50%;
+    }
+
+    0% {
+        transform: translateX(-200%);
+    }
+
+    100% {
+        transform: translateX(100%);
+    }
+}
+
+@keyframes carousel-inverse-vertical {
+    0%,
+    100% {
+        height: 50%;
+    }
+
+    0% {
+        transform: translateY(200%);
+    }
+
+    100% {
+        transform: translateY(-100%);
+    }
+}
+
+@keyframes swing {
+    0%,
+    100% {
+        width: 50%;
+    }
+
+    0%,
+    100% {
+        transform: translateX(-25%);
+    }
+
+    50% {
+        transform: translateX(125%);
+    }
+}
+
+@keyframes swing-vertical {
+    0%,
+    100% {
+        height: 50%;
+    }
+
+    0%,
+    100% {
+        transform: translateY(-25%);
+    }
+
+    50% {
+        transform: translateY(125%);
+    }
+}
+
+@keyframes elastic {
+    0%,
+    100% {
+        width: 50%;
+        margin-left: 25%;
+    }
+
+    50% {
+        width: 90%;
+        margin-left: 5%;
+    }
+}
+
+@keyframes elastic-vertical {
+    0%,
+    100% {
+        height: 50%;
+        margin-top: 25%;
+    }
+
+    50% {
+        height: 90%;
+        margin-top: 5%;
+    }
+}
+
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes fade-out {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes scale-in {
+    from {
+        opacity: 0;
+        scale: 0.95;
+    }
+    to {
+        opacity: 1;
+        scale: 1;
+    }
+}
+
+@keyframes scale-out {
+    from {
+        opacity: 1;
+        scale: 1;
+    }
+    to {
+        opacity: 0;
+        scale: 0.95;
+    }
+}
+
+@keyframes accordion-down {
+    from {
+        height: 0;
+    }
+    to {
+        height: var(--bits-accordion-content-height);
+    }
+}
+
+@keyframes accordion-up {
+    from {
+        height: var(--bits-accordion-content-height);
+    }
+    to {
+        height: 0;
+    }
+}
+
+@keyframes slide-in-from-top {
+    from {
+        transform: translateY(-0.5rem);
+    }
+    to {
+        transform: translateY(0);
+    }
+}
+
+@keyframes slide-in-from-bottom {
+    from {
+        transform: translateY(0.5rem);
+    }
+    to {
+        transform: translateY(0);
+    }
+}
+
+@keyframes slide-in-from-left {
+    from {
+        transform: translateX(-0.5rem);
+    }
+    to {
+        transform: translateX(0);
+    }
+}
+
+@keyframes slide-in-from-right {
+    from {
+        transform: translateX(0.5rem);
+    }
+    to {
+        transform: translateX(0);
+    }
+}
+
+@keyframes slide-in-full-top {
+    from {
+        transform: translateY(-100%);
+    }
+    to {
+        transform: translateY(0);
+    }
+}
+
+@keyframes slide-in-full-bottom {
+    from {
+        transform: translateY(100%);
+    }
+    to {
+        transform: translateY(0);
+    }
+}
+
+@keyframes slide-in-full-left {
+    from {
+        transform: translateX(-100%);
+    }
+    to {
+        transform: translateX(0);
+    }
+}
+
+@keyframes slide-in-full-right {
+    from {
+        transform: translateX(100%);
+    }
+    to {
+        transform: translateX(0);
+    }
+}
+
+@keyframes slide-out-full-top {
+    from {
+        transform: translateY(0);
+    }
+    to {
+        transform: translateY(-100%);
+    }
+}
+
+@keyframes slide-out-full-bottom {
+    from {
+        transform: translateY(0);
+    }
+    to {
+        transform: translateY(100%);
+    }
+}
+
+@keyframes slide-out-full-left {
+    from {
+        transform: translateX(0);
+    }
+    to {
+        transform: translateX(-100%);
+    }
+}
+
+@keyframes slide-out-full-right {
+    from {
+        transform: translateX(0);
+    }
+    to {
+        transform: translateX(100%);
+    }
+}
+
+@keyframes zoom-in {
+    from {
+        opacity: 0;
+        scale: 0.95;
+    }
+    to {
+        opacity: 1;
+        scale: 1;
+    }
+}
+
+@keyframes zoom-out {
+    from {
+        opacity: 1;
+        scale: 1;
+    }
+    to {
+        opacity: 0;
+        scale: 0.95;
+    }
+}
+
+/* ==================== Scrollbar ==================== */
+
+@utility scrollbar-thin {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-outline-variant) transparent;
+
+    &::-webkit-scrollbar {
+        width: 6px;
+    }
+    &::-webkit-scrollbar-track {
+        background: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: var(--color-outline-variant);
+        border-radius: 3px;
+    }
+}
+
+@keyframes collapsible-down {
+    0% {
+        height: 0;
+    }
+    to {
+        height: var(--bits-collapsible-content-height);
+    }
+}
+
+@keyframes collapsible-up {
+    0% {
+        height: var(--bits-collapsible-content-height);
+    }
+    to {
+        height: 0;
+    }
+}