{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "materialcn", "homepage": "https://github.com/guillermo-rebolledo/materialcn", "items": [ { "name": "materialcn-theme", "title": "Material 3 Theme", "description": "The Material 3 Expressive token layer: color roles and four alternate palettes, type scale, shape, spacing, elevation, state layers, motion springs, and the responsive grid. Points shadcn's semantic variables at M3 roles, so stock shadcn components render as Material.", "categories": [ "theme" ], "type": "registry:theme", "dependencies": [ "@fontsource-variable/roboto-flex@^5.3.0" ], "devDependencies": [ "tw-animate-css@^1.4.0" ], "files": [], "cssVars": { "theme": { "color-m3-primary": "var(--m3-primary)", "color-m3-surface-tint": "var(--m3-surface-tint)", "color-m3-on-primary": "var(--m3-on-primary)", "color-m3-primary-container": "var(--m3-primary-container)", "color-m3-on-primary-container": "var(--m3-on-primary-container)", "color-m3-secondary": "var(--m3-secondary)", "color-m3-on-secondary": "var(--m3-on-secondary)", "color-m3-secondary-container": "var(--m3-secondary-container)", "color-m3-on-secondary-container": "var(--m3-on-secondary-container)", "color-m3-tertiary": "var(--m3-tertiary)", "color-m3-on-tertiary": "var(--m3-on-tertiary)", "color-m3-tertiary-container": "var(--m3-tertiary-container)", "color-m3-on-tertiary-container": "var(--m3-on-tertiary-container)", "color-m3-error": "var(--m3-error)", "color-m3-on-error": "var(--m3-on-error)", "color-m3-error-container": "var(--m3-error-container)", "color-m3-on-error-container": "var(--m3-on-error-container)", "color-m3-background": "var(--m3-background)", "color-m3-on-background": "var(--m3-on-background)", "color-m3-surface": "var(--m3-surface)", "color-m3-on-surface": "var(--m3-on-surface)", "color-m3-surface-variant": "var(--m3-surface-variant)", "color-m3-on-surface-variant": "var(--m3-on-surface-variant)", "color-m3-outline": "var(--m3-outline)", "color-m3-outline-variant": "var(--m3-outline-variant)", "color-m3-scrim": "var(--m3-scrim)", "color-m3-inverse-surface": "var(--m3-inverse-surface)", "color-m3-inverse-on-surface": "var(--m3-inverse-on-surface)", "color-m3-inverse-primary": "var(--m3-inverse-primary)", "color-m3-primary-fixed": "var(--m3-primary-fixed)", "color-m3-on-primary-fixed": "var(--m3-on-primary-fixed)", "color-m3-primary-fixed-dim": "var(--m3-primary-fixed-dim)", "color-m3-on-primary-fixed-variant": "var(--m3-on-primary-fixed-variant)", "color-m3-secondary-fixed": "var(--m3-secondary-fixed)", "color-m3-on-secondary-fixed": "var(--m3-on-secondary-fixed)", "color-m3-secondary-fixed-dim": "var(--m3-secondary-fixed-dim)", "color-m3-on-secondary-fixed-variant": "var(--m3-on-secondary-fixed-variant)", "color-m3-tertiary-fixed": "var(--m3-tertiary-fixed)", "color-m3-on-tertiary-fixed": "var(--m3-on-tertiary-fixed)", "color-m3-tertiary-fixed-dim": "var(--m3-tertiary-fixed-dim)", "color-m3-on-tertiary-fixed-variant": "var(--m3-on-tertiary-fixed-variant)", "color-m3-surface-dim": "var(--m3-surface-dim)", "color-m3-surface-bright": "var(--m3-surface-bright)", "color-m3-surface-container-lowest": "var(--m3-surface-container-lowest)", "color-m3-surface-container-low": "var(--m3-surface-container-low)", "color-m3-surface-container": "var(--m3-surface-container)", "color-m3-surface-container-high": "var(--m3-surface-container-high)", "color-m3-surface-container-highest": "var(--m3-surface-container-highest)", "breakpoint-m3-compact": "0px", "breakpoint-m3-medium": "600px", "breakpoint-m3-expanded": "840px", "breakpoint-m3-large": "1200px", "breakpoint-m3-extra-large": "1600px", "radius-m3-none": "var(--m3-shape-none)", "radius-m3-xs": "var(--m3-shape-xs)", "radius-m3-sm": "var(--m3-shape-sm)", "radius-m3-md": "var(--m3-shape-md)", "radius-m3-lg": "var(--m3-shape-lg)", "radius-m3-lg-increased": "var(--m3-shape-lg-increased)", "radius-m3-xl": "var(--m3-shape-xl)", "radius-m3-xl-increased": "var(--m3-shape-xl-increased)", "radius-m3-2xl": "var(--m3-shape-2xl)", "radius-m3-full": "var(--m3-shape-full)", "spacing-m3-none": "var(--m3-space-none)", "spacing-m3-xs": "var(--m3-space-xs)", "spacing-m3-sm": "var(--m3-space-sm)", "spacing-m3-md": "var(--m3-space-md)", "spacing-m3-lg": "var(--m3-space-lg)", "spacing-m3-xl": "var(--m3-space-xl)", "spacing-m3-2xl": "var(--m3-space-2xl)", "spacing-m3-3xl": "var(--m3-space-3xl)", "spacing-m3-4xl": "var(--m3-space-4xl)", "shadow-m3-0": "var(--m3-elevation-0)", "shadow-m3-1": "var(--m3-elevation-1)", "shadow-m3-2": "var(--m3-elevation-2)", "shadow-m3-3": "var(--m3-elevation-3)", "shadow-m3-4": "var(--m3-elevation-4)", "shadow-m3-5": "var(--m3-elevation-5)", "ease-m3-spatial-fast": "var(--m3-spring-spatial-fast)", "ease-m3-spatial": "var(--m3-spring-spatial-default)", "ease-m3-spatial-slow": "var(--m3-spring-spatial-slow)", "ease-m3-effects-fast": "var(--m3-spring-effects-fast)", "ease-m3-effects": "var(--m3-spring-effects-default)", "ease-m3-effects-slow": "var(--m3-spring-effects-slow)", "ease-m3-emphasized": "var(--m3-ease-emphasized)", "ease-m3-emphasized-decelerate": "var(--m3-ease-emphasized-decelerate)", "ease-m3-emphasized-accelerate": "var(--m3-ease-emphasized-accelerate)", "ease-m3-standard": "var(--m3-ease-standard)", "animate-duration-m3-spatial-fast": "var(--m3-spring-spatial-fast-duration)", "animate-duration-m3-spatial": "var(--m3-spring-spatial-default-duration)", "animate-duration-m3-spatial-slow": "var(--m3-spring-spatial-slow-duration)", "font-sans": "var(--m3-font-plain)", "font-m3-brand": "var(--m3-font-brand)", "font-m3-plain": "var(--m3-font-plain)", "text-m3-display-lg": "var(--m3-display-lg-size)", "text-m3-display-lg--line-height": "var(--m3-display-lg-line)", "text-m3-display-lg--letter-spacing": "var(--m3-display-lg-tracking)", "text-m3-display-md": "var(--m3-display-md-size)", "text-m3-display-md--line-height": "var(--m3-display-md-line)", "text-m3-display-md--letter-spacing": "var(--m3-display-md-tracking)", "text-m3-display-sm": "var(--m3-display-sm-size)", "text-m3-display-sm--line-height": "var(--m3-display-sm-line)", "text-m3-display-sm--letter-spacing": "var(--m3-display-sm-tracking)", "text-m3-headline-lg": "var(--m3-headline-lg-size)", "text-m3-headline-lg--line-height": "var(--m3-headline-lg-line)", "text-m3-headline-lg--letter-spacing": "var(--m3-headline-lg-tracking)", "text-m3-headline-md": "var(--m3-headline-md-size)", "text-m3-headline-md--line-height": "var(--m3-headline-md-line)", "text-m3-headline-md--letter-spacing": "var(--m3-headline-md-tracking)", "text-m3-headline-sm": "var(--m3-headline-sm-size)", "text-m3-headline-sm--line-height": "var(--m3-headline-sm-line)", "text-m3-headline-sm--letter-spacing": "var(--m3-headline-sm-tracking)", "text-m3-title-lg": "var(--m3-title-lg-size)", "text-m3-title-lg--line-height": "var(--m3-title-lg-line)", "text-m3-title-lg--letter-spacing": "var(--m3-title-lg-tracking)", "text-m3-title-md": "var(--m3-title-md-size)", "text-m3-title-md--line-height": "var(--m3-title-md-line)", "text-m3-title-md--letter-spacing": "var(--m3-title-md-tracking)", "text-m3-title-md--font-weight": "var(--m3-weight-medium)", "text-m3-title-sm": "var(--m3-title-sm-size)", "text-m3-title-sm--line-height": "var(--m3-title-sm-line)", "text-m3-title-sm--letter-spacing": "var(--m3-title-sm-tracking)", "text-m3-title-sm--font-weight": "var(--m3-weight-medium)", "text-m3-body-lg": "var(--m3-body-lg-size)", "text-m3-body-lg--line-height": "var(--m3-body-lg-line)", "text-m3-body-lg--letter-spacing": "var(--m3-body-lg-tracking)", "text-m3-body-md": "var(--m3-body-md-size)", "text-m3-body-md--line-height": "var(--m3-body-md-line)", "text-m3-body-md--letter-spacing": "var(--m3-body-md-tracking)", "text-m3-body-sm": "var(--m3-body-sm-size)", "text-m3-body-sm--line-height": "var(--m3-body-sm-line)", "text-m3-body-sm--letter-spacing": "var(--m3-body-sm-tracking)", "text-m3-label-lg": "var(--m3-label-lg-size)", "text-m3-label-lg--line-height": "var(--m3-label-lg-line)", "text-m3-label-lg--letter-spacing": "var(--m3-label-lg-tracking)", "text-m3-label-lg--font-weight": "var(--m3-weight-medium)", "text-m3-label-md": "var(--m3-label-md-size)", "text-m3-label-md--line-height": "var(--m3-label-md-line)", "text-m3-label-md--letter-spacing": "var(--m3-label-md-tracking)", "text-m3-label-md--font-weight": "var(--m3-weight-medium)", "text-m3-label-sm": "var(--m3-label-sm-size)", "text-m3-label-sm--line-height": "var(--m3-label-sm-line)", "text-m3-label-sm--letter-spacing": "var(--m3-label-sm-tracking)", "text-m3-label-sm--font-weight": "var(--m3-weight-medium)", "font-weight-m3-regular": "var(--m3-weight-regular)", "font-weight-m3-medium": "var(--m3-weight-medium)", "font-weight-m3-emphasized": "var(--m3-weight-emphasized)", "color-background": "var(--background)", "color-foreground": "var(--foreground)", "color-card": "var(--card)", "color-card-foreground": "var(--card-foreground)", "color-popover": "var(--popover)", "color-popover-foreground": "var(--popover-foreground)", "color-primary": "var(--primary)", "color-primary-foreground": "var(--primary-foreground)", "color-secondary": "var(--secondary)", "color-secondary-foreground": "var(--secondary-foreground)", "color-muted": "var(--muted)", "color-muted-foreground": "var(--muted-foreground)", "color-accent": "var(--accent)", "color-accent-foreground": "var(--accent-foreground)", "color-destructive": "var(--destructive)", "color-destructive-foreground": "var(--destructive-foreground)", "color-border": "var(--border)", "color-input": "var(--input)", "color-ring": "var(--ring)", "color-chart-1": "var(--chart-1)", "color-chart-2": "var(--chart-2)", "color-chart-3": "var(--chart-3)", "color-chart-4": "var(--chart-4)", "color-chart-5": "var(--chart-5)", "color-sidebar": "var(--sidebar)", "color-sidebar-foreground": "var(--sidebar-foreground)", "color-sidebar-primary": "var(--sidebar-primary)", "color-sidebar-primary-foreground": "var(--sidebar-primary-foreground)", "color-sidebar-accent": "var(--sidebar-accent)", "color-sidebar-accent-foreground": "var(--sidebar-accent-foreground)", "color-sidebar-border": "var(--sidebar-border)", "color-sidebar-ring": "var(--sidebar-ring)", "radius-sm": "calc(var(--radius) * 0.6)", "radius-md": "calc(var(--radius) * 0.8)", "radius-lg": "var(--radius)", "radius-xl": "calc(var(--radius) * 1.4)", "radius-2xl": "calc(var(--radius) * 1.8)", "radius-3xl": "calc(var(--radius) * 2.2)", "radius-4xl": "calc(var(--radius) * 2.6)", "font-heading": "var(--m3-font-brand)" } }, "css": { ":root": { "--m3-primary": "oklch(0.4955 0.1305 293.71)", "--m3-surface-tint": "oklch(0.4955 0.1305 293.71)", "--m3-on-primary": "oklch(1 0 0)", "--m3-primary-container": "oklch(0.9183 0.0477 302.83)", "--m3-on-primary-container": "oklch(0.4095 0.1323 292.96)", "--m3-secondary": "oklch(0.4859 0.0358 299.61)", "--m3-on-secondary": "oklch(1 0 0)", "--m3-secondary-container": "oklch(0.9163 0.0365 303.11)", "--m3-on-secondary-container": "oklch(0.401 0.0356 297.87)", "--m3-tertiary": "oklch(0.4904 0.0605 358.45)", "--m3-on-tertiary": "oklch(1 0 0)", "--m3-tertiary-container": "oklch(0.9184 0.046 357.58)", "--m3-on-tertiary-container": "oklch(0.4044 0.0591 359.11)", "--m3-error": "oklch(0.5013 0.1783 28.7)", "--m3-on-error": "oklch(1 0 0)", "--m3-error-container": "oklch(0.9221 0.0301 22.79)", "--m3-on-error-container": "oklch(0.4128 0.1344 25.78)", "--m3-background": "oklch(0.9838 0.0128 321.89)", "--m3-on-background": "oklch(0.2265 0.01 303.71)", "--m3-surface": "oklch(0.9838 0.0128 321.89)", "--m3-on-surface": "oklch(0.2265 0.01 303.71)", "--m3-surface-variant": "oklch(0.9157 0.0177 311.57)", "--m3-on-surface-variant": "oklch(0.3981 0.0174 303.72)", "--m3-outline": "oklch(0.5667 0.0163 308.14)", "--m3-outline-variant": "oklch(0.8287 0.0178 308.22)", "--m3-shadow": "oklch(0 0 0)", "--m3-scrim": "oklch(0 0 0)", "--m3-inverse-surface": "oklch(0.3107 0.0113 308.06)", "--m3-inverse-on-surface": "oklch(0.9591 0.0123 317.74)", "--m3-inverse-primary": "oklch(0.8349 0.0946 298.02)", "--m3-primary-fixed": "oklch(0.9183 0.0477 302.83)", "--m3-on-primary-fixed": "oklch(0.242 0.1404 286.09)", "--m3-primary-fixed-dim": "oklch(0.8349 0.0946 298.02)", "--m3-on-primary-fixed-variant": "oklch(0.4103 0.1337 292.71)", "--m3-secondary-fixed": "oklch(0.9163 0.0365 303.11)", "--m3-on-secondary-fixed": "oklch(0.2272 0.0347 293.65)", "--m3-secondary-fixed-dim": "oklch(0.8303 0.0374 303.03)", "--m3-on-secondary-fixed-variant": "oklch(0.4005 0.034 298.59)", "--m3-tertiary-fixed": "oklch(0.9184 0.046 357.58)", "--m3-on-tertiary-fixed": "oklch(0.2323 0.0543 358.61)", "--m3-tertiary-fixed-dim": "oklch(0.8367 0.0666 359.43)", "--m3-on-tertiary-fixed-variant": "oklch(0.4044 0.0591 359.11)", "--m3-surface-dim": "oklch(0.8896 0.0138 314.75)", "--m3-surface-bright": "oklch(0.9838 0.0128 321.89)", "--m3-surface-container-lowest": "oklch(1 0 0)", "--m3-surface-container-low": "oklch(0.9673 0.0118 313.22)", "--m3-surface-container": "oklch(0.9536 0.0147 312.24)", "--m3-surface-container-high": "oklch(0.9325 0.0148 312.24)", "--m3-surface-container-highest": "oklch(0.914 0.0137 314.75)", "--m3-shape-none": "0px", "--m3-shape-xs": "4px", "--m3-shape-sm": "8px", "--m3-shape-md": "12px", "--m3-shape-lg": "16px", "--m3-shape-lg-increased": "20px", "--m3-shape-xl": "28px", "--m3-shape-xl-increased": "32px", "--m3-shape-2xl": "48px", "--m3-shape-full": "9999px", "--radius": "var(--m3-shape-md)", "--m3-space-unit": "4px", "--m3-space-none": "0px", "--m3-space-xs": "calc(var(--m3-space-unit) * 1)", "--m3-space-sm": "calc(var(--m3-space-unit) * 2)", "--m3-space-md": "calc(var(--m3-space-unit) * 3)", "--m3-space-lg": "calc(var(--m3-space-unit) * 4)", "--m3-space-xl": "calc(var(--m3-space-unit) * 6)", "--m3-space-2xl": "calc(var(--m3-space-unit) * 8)", "--m3-space-3xl": "calc(var(--m3-space-unit) * 12)", "--m3-space-4xl": "calc(var(--m3-space-unit) * 16)", "--m3-font-brand": "\"Roboto Flex Variable\", \"Roboto\", ui-sans-serif, system-ui, sans-serif", "--m3-font-plain": "var(--m3-font-brand)", "--m3-display-lg-size": "3.5625rem", "--m3-display-lg-line": "4rem", "--m3-display-lg-tracking": "-0.015625rem", "--m3-display-md-size": "2.8125rem", "--m3-display-md-line": "3.25rem", "--m3-display-md-tracking": "0rem", "--m3-display-sm-size": "2.25rem", "--m3-display-sm-line": "2.75rem", "--m3-display-sm-tracking": "0rem", "--m3-headline-lg-size": "2rem", "--m3-headline-lg-line": "2.5rem", "--m3-headline-lg-tracking": "0rem", "--m3-headline-md-size": "1.75rem", "--m3-headline-md-line": "2.25rem", "--m3-headline-md-tracking": "0rem", "--m3-headline-sm-size": "1.5rem", "--m3-headline-sm-line": "2rem", "--m3-headline-sm-tracking": "0rem", "--m3-title-lg-size": "1.375rem", "--m3-title-lg-line": "1.75rem", "--m3-title-lg-tracking": "0rem", "--m3-title-md-size": "1rem", "--m3-title-md-line": "1.5rem", "--m3-title-md-tracking": "0.009375rem", "--m3-title-sm-size": "0.875rem", "--m3-title-sm-line": "1.25rem", "--m3-title-sm-tracking": "0.00625rem", "--m3-body-lg-size": "1rem", "--m3-body-lg-line": "1.5rem", "--m3-body-lg-tracking": "0.03125rem", "--m3-body-md-size": "0.875rem", "--m3-body-md-line": "1.25rem", "--m3-body-md-tracking": "0.015625rem", "--m3-body-sm-size": "0.75rem", "--m3-body-sm-line": "1rem", "--m3-body-sm-tracking": "0.025rem", "--m3-label-lg-size": "0.875rem", "--m3-label-lg-line": "1.25rem", "--m3-label-lg-tracking": "0.00625rem", "--m3-label-md-size": "0.75rem", "--m3-label-md-line": "1rem", "--m3-label-md-tracking": "0.03125rem", "--m3-label-sm-size": "0.6875rem", "--m3-label-sm-line": "1rem", "--m3-label-sm-tracking": "0.03125rem", "--m3-weight-regular": "400", "--m3-weight-medium": "500", "--m3-weight-emphasized": "700", "--m3-elevation-0": "none", "--m3-elevation-1": "0 1px 2px 0 color-mix(in oklab, var(--m3-shadow) 30%, transparent),\n 0 1px 3px 1px color-mix(in oklab, var(--m3-shadow) 15%, transparent)", "--m3-elevation-2": "0 1px 2px 0 color-mix(in oklab, var(--m3-shadow) 30%, transparent),\n 0 2px 6px 2px color-mix(in oklab, var(--m3-shadow) 15%, transparent)", "--m3-elevation-3": "0 1px 3px 0 color-mix(in oklab, var(--m3-shadow) 30%, transparent),\n 0 4px 8px 3px color-mix(in oklab, var(--m3-shadow) 15%, transparent)", "--m3-elevation-4": "0 2px 3px 0 color-mix(in oklab, var(--m3-shadow) 30%, transparent),\n 0 6px 10px 4px color-mix(in oklab, var(--m3-shadow) 15%, transparent)", "--m3-elevation-5": "0 4px 4px 0 color-mix(in oklab, var(--m3-shadow) 30%, transparent),\n 0 8px 12px 6px color-mix(in oklab, var(--m3-shadow) 15%, transparent)", "--m3-state-hover": "0.08", "--m3-state-focus": "0.1", "--m3-state-pressed": "0.1", "--m3-state-dragged": "0.16", "--m3-state-disabled-content": "0.38", "--m3-state-disabled-container": "0.12", "--m3-z-raised": "1", "--m3-z-sticky": "100", "--m3-z-scrim": "200", "--m3-z-modal": "300", "--m3-z-menu": "400", "--m3-z-snackbar": "500", "--m3-z-tooltip": "600", "--m3-spring-expressive-spatial-fast": "linear(0, 0.012, 0.0448, 0.0941, 0.1558, 0.2264, 0.3026, 0.3817, 0.4613, 0.5396, 0.6148, 0.6859, 0.7519, 0.8121, 0.8661, 0.9138, 0.9552, 0.9904, 1.0197, 1.0434, 1.062, 1.0759, 1.0855, 1.0916, 1.0944, 1.0945, 1.0925, 1.0886, 1.0834, 1.0771, 1.0701, 1.0628, 1.0552, 1.0477, 1.0404, 1.0334, 1.0269, 1.0209, 1.0154, 1.0106, 1.0063, 1.0027, 1)", "--m3-spring-expressive-spatial-fast-duration": "238ms", "--m3-spring-expressive-spatial-default": "linear(0, 0.0046, 0.0175, 0.0373, 0.0629, 0.0932, 0.1273, 0.1642, 0.2032, 0.2437, 0.2851, 0.3268, 0.3686, 0.4099, 0.4505, 0.4901, 0.5285, 0.5655, 0.6011, 0.635, 0.6673, 0.6978, 0.7266, 0.7537, 0.779, 0.8026, 0.8246, 0.8449, 0.8636, 0.8809, 0.8966, 0.9111, 0.9242, 0.936, 0.9468, 0.9564, 0.965, 0.9727, 0.9795, 0.9855, 0.9907, 0.9953, 1)", "--m3-spring-expressive-spatial-default-duration": "213ms", "--m3-spring-expressive-spatial-slow": "linear(0, 0.0047, 0.0178, 0.038, 0.0641, 0.0949, 0.1294, 0.1668, 0.2064, 0.2474, 0.2892, 0.3314, 0.3735, 0.4152, 0.4561, 0.4959, 0.5345, 0.5717, 0.6073, 0.6413, 0.6735, 0.704, 0.7327, 0.7596, 0.7848, 0.8082, 0.83, 0.8501, 0.8686, 0.8856, 0.9011, 0.9152, 0.9281, 0.9397, 0.9501, 0.9595, 0.9679, 0.9753, 0.9819, 0.9876, 0.9926, 0.997, 1)", "--m3-spring-expressive-spatial-slow-duration": "296ms", "--m3-spring-expressive-effects-fast": "linear(0, 0.021, 0.0727, 0.1422, 0.2204, 0.3013, 0.3806, 0.4558, 0.5255, 0.5889, 0.6458, 0.6963, 0.7406, 0.7793, 0.8128, 0.8417, 0.8665, 0.8876, 0.9057, 0.9209, 0.9339, 0.9448, 0.954, 0.9617, 0.9681, 0.9735, 0.978, 0.9818, 0.9849, 0.9875, 0.9897, 0.9915, 0.993, 0.9942, 0.9952, 0.9961, 0.9968, 0.9973, 0.9978, 0.9982, 0.9985, 0.9988, 1)", "--m3-spring-expressive-effects-fast-duration": "150ms", "--m3-spring-expressive-effects-default": "linear(0, 0.0213, 0.0739, 0.1443, 0.2235, 0.305, 0.3849, 0.4606, 0.5305, 0.594, 0.6508, 0.7011, 0.7452, 0.7836, 0.8168, 0.8454, 0.8699, 0.8907, 0.9084, 0.9234, 0.9361, 0.9467, 0.9557, 0.9632, 0.9694, 0.9747, 0.979, 0.9826, 0.9857, 0.9882, 0.9902, 0.992, 0.9934, 0.9946, 0.9955, 0.9963, 0.997, 0.9975, 0.998, 0.9983, 0.9986, 0.9989, 1)", "--m3-spring-expressive-effects-default-duration": "233ms", "--m3-spring-expressive-effects-slow": "linear(0, 0.0212, 0.0735, 0.1437, 0.2227, 0.304, 0.3838, 0.4593, 0.5292, 0.5927, 0.6495, 0.6998, 0.744, 0.7825, 0.8158, 0.8444, 0.869, 0.8899, 0.9077, 0.9228, 0.9355, 0.9462, 0.9552, 0.9628, 0.9691, 0.9744, 0.9788, 0.9824, 0.9855, 0.988, 0.9901, 0.9918, 0.9933, 0.9945, 0.9954, 0.9963, 0.9969, 0.9975, 0.9979, 0.9983, 0.9986, 0.9989, 1)", "--m3-spring-expressive-effects-slow-duration": "329ms", "--m3-spring-standard-spatial-fast": "linear(0, 0.0096, 0.0353, 0.0728, 0.1188, 0.1705, 0.2256, 0.2823, 0.3392, 0.3952, 0.4496, 0.5016, 0.5508, 0.597, 0.6401, 0.6799, 0.7164, 0.7498, 0.7802, 0.8076, 0.8323, 0.8544, 0.8741, 0.8916, 0.9071, 0.9208, 0.9328, 0.9432, 0.9523, 0.9602, 0.9671, 0.9729, 0.9779, 0.9822, 0.9858, 0.9889, 0.9914, 0.9936, 0.9953, 0.9968, 0.9979, 0.9989, 1)", "--m3-spring-standard-spatial-fast-duration": "163ms", "--m3-spring-standard-spatial-default": "linear(0, 0.0096, 0.0351, 0.0724, 0.1182, 0.1697, 0.2246, 0.2812, 0.3379, 0.3939, 0.4481, 0.5, 0.5492, 0.5954, 0.6385, 0.6783, 0.7149, 0.7483, 0.7787, 0.8062, 0.831, 0.8532, 0.873, 0.8906, 0.9062, 0.9199, 0.9319, 0.9425, 0.9517, 0.9596, 0.9665, 0.9724, 0.9775, 0.9818, 0.9855, 0.9886, 0.9912, 0.9934, 0.9951, 0.9966, 0.9978, 0.9988, 1)", "--m3-spring-standard-spatial-default-duration": "229ms", "--m3-spring-standard-spatial-slow": "linear(0, 0.0093, 0.0343, 0.0709, 0.1159, 0.1665, 0.2206, 0.2764, 0.3325, 0.3878, 0.4416, 0.4933, 0.5423, 0.5884, 0.6314, 0.6713, 0.7081, 0.7417, 0.7724, 0.8002, 0.8253, 0.8478, 0.8679, 0.8859, 0.9018, 0.9159, 0.9283, 0.9392, 0.9487, 0.957, 0.9641, 0.9703, 0.9757, 0.9802, 0.9841, 0.9874, 0.9901, 0.9924, 0.9944, 0.996, 0.9973, 0.9983, 1)", "--m3-spring-standard-spatial-slow-duration": "346ms", "--m3-spring-standard-effects-fast": "linear(0, 0.021, 0.0727, 0.1422, 0.2204, 0.3013, 0.3806, 0.4558, 0.5255, 0.5889, 0.6458, 0.6963, 0.7406, 0.7793, 0.8128, 0.8417, 0.8665, 0.8876, 0.9057, 0.9209, 0.9339, 0.9448, 0.954, 0.9617, 0.9681, 0.9735, 0.978, 0.9818, 0.9849, 0.9875, 0.9897, 0.9915, 0.993, 0.9942, 0.9952, 0.9961, 0.9968, 0.9973, 0.9978, 0.9982, 0.9985, 0.9988, 1)", "--m3-spring-standard-effects-fast-duration": "150ms", "--m3-spring-standard-effects-default": "linear(0, 0.0213, 0.0739, 0.1443, 0.2235, 0.305, 0.3849, 0.4606, 0.5305, 0.594, 0.6508, 0.7011, 0.7452, 0.7836, 0.8168, 0.8454, 0.8699, 0.8907, 0.9084, 0.9234, 0.9361, 0.9467, 0.9557, 0.9632, 0.9694, 0.9747, 0.979, 0.9826, 0.9857, 0.9882, 0.9902, 0.992, 0.9934, 0.9946, 0.9955, 0.9963, 0.997, 0.9975, 0.998, 0.9983, 0.9986, 0.9989, 1)", "--m3-spring-standard-effects-default-duration": "233ms", "--m3-spring-standard-effects-slow": "linear(0, 0.0212, 0.0735, 0.1437, 0.2227, 0.304, 0.3838, 0.4593, 0.5292, 0.5927, 0.6495, 0.6998, 0.744, 0.7825, 0.8158, 0.8444, 0.869, 0.8899, 0.9077, 0.9228, 0.9355, 0.9462, 0.9552, 0.9628, 0.9691, 0.9744, 0.9788, 0.9824, 0.9855, 0.988, 0.9901, 0.9918, 0.9933, 0.9945, 0.9954, 0.9963, 0.9969, 0.9975, 0.9979, 0.9983, 0.9986, 0.9989, 1)", "--m3-spring-standard-effects-slow-duration": "329ms", "--m3-spring-spatial-fast": "var(--m3-spring-expressive-spatial-fast)", "--m3-spring-spatial-fast-duration": "var(--m3-spring-expressive-spatial-fast-duration)", "--m3-spring-spatial-default": "var(--m3-spring-expressive-spatial-default)", "--m3-spring-spatial-default-duration": "var(--m3-spring-expressive-spatial-default-duration)", "--m3-spring-spatial-slow": "var(--m3-spring-expressive-spatial-slow)", "--m3-spring-spatial-slow-duration": "var(--m3-spring-expressive-spatial-slow-duration)", "--m3-spring-effects-fast": "var(--m3-spring-expressive-effects-fast)", "--m3-spring-effects-fast-duration": "var(--m3-spring-expressive-effects-fast-duration)", "--m3-spring-effects-default": "var(--m3-spring-expressive-effects-default)", "--m3-spring-effects-default-duration": "var(--m3-spring-expressive-effects-default-duration)", "--m3-spring-effects-slow": "var(--m3-spring-expressive-effects-slow)", "--m3-spring-effects-slow-duration": "var(--m3-spring-expressive-effects-slow-duration)", "--m3-ease-emphasized": "cubic-bezier(0.2, 0, 0, 1)", "--m3-ease-emphasized-decelerate": "cubic-bezier(0.05, 0.7, 0.1, 1)", "--m3-ease-emphasized-accelerate": "cubic-bezier(0.3, 0, 0.8, 0.15)", "--m3-ease-standard": "cubic-bezier(0.2, 0, 0, 1)", "--m3-ease-standard-decelerate": "cubic-bezier(0, 0, 0, 1)", "--m3-ease-standard-accelerate": "cubic-bezier(0.3, 0, 1, 1)", "--m3-ease-linear": "cubic-bezier(0, 0, 1, 1)", "--m3-duration-short-1": "50ms", "--m3-duration-short-2": "100ms", "--m3-duration-short-3": "150ms", "--m3-duration-short-4": "200ms", "--m3-duration-medium-1": "250ms", "--m3-duration-medium-2": "300ms", "--m3-duration-medium-3": "350ms", "--m3-duration-medium-4": "400ms", "--m3-duration-long-1": "450ms", "--m3-duration-long-2": "500ms", "--m3-duration-long-3": "550ms", "--m3-duration-long-4": "600ms", "--m3-duration-extra-long-1": "700ms", "--m3-duration-extra-long-2": "800ms", "--m3-duration-extra-long-3": "900ms", "--m3-duration-extra-long-4": "1000ms", "--m3-breakpoint-compact": "0px", "--m3-breakpoint-medium": "600px", "--m3-breakpoint-expanded": "840px", "--m3-breakpoint-large": "1200px", "--m3-breakpoint-extra-large": "1600px", "--m3-grid-columns": "4", "--m3-grid-gutter": "16px", "--m3-grid-margin": "16px", "--m3-grid-max-width": "none" }, ".dark": { "--m3-primary": "oklch(0.8349 0.0946 298.02)", "--m3-surface-tint": "oklch(0.8349 0.0946 298.02)", "--m3-on-primary": "oklch(0.3251 0.1353 291.15)", "--m3-primary-container": "oklch(0.4103 0.1337 292.71)", "--m3-on-primary-container": "oklch(0.9183 0.0477 302.83)", "--m3-secondary": "oklch(0.8303 0.0374 303.03)", "--m3-on-secondary": "oklch(0.3124 0.0361 298.05)", "--m3-secondary-container": "oklch(0.4005 0.034 298.59)", "--m3-on-secondary-container": "oklch(0.9163 0.0365 303.11)", "--m3-tertiary": "oklch(0.8367 0.0666 359.43)", "--m3-on-tertiary": "oklch(0.3171 0.0571 357.82)", "--m3-tertiary-container": "oklch(0.4044 0.0591 359.11)", "--m3-on-tertiary-container": "oklch(0.9184 0.046 357.58)", "--m3-error": "oklch(0.8345 0.0677 22.01)", "--m3-on-error": "oklch(0.3245 0.1092 28.01)", "--m3-error-container": "oklch(0.42 0.1473 28.14)", "--m3-on-error-container": "oklch(0.9221 0.0301 22.79)", "--m3-background": "oklch(0.1874 0.0124 300.42)", "--m3-on-background": "oklch(0.914 0.0137 314.75)", "--m3-surface": "oklch(0.1874 0.0124 300.42)", "--m3-on-surface": "oklch(0.914 0.0137 314.75)", "--m3-surface-variant": "oklch(0.3981 0.0174 303.72)", "--m3-on-surface-variant": "oklch(0.8287 0.0178 308.22)", "--m3-outline": "oklch(0.6566 0.0153 304.01)", "--m3-outline-variant": "oklch(0.3981 0.0174 303.72)", "--m3-shadow": "oklch(0 0 0)", "--m3-scrim": "oklch(0 0 0)", "--m3-inverse-surface": "oklch(0.914 0.0137 314.75)", "--m3-inverse-on-surface": "oklch(0.3107 0.0113 308.06)", "--m3-inverse-primary": "oklch(0.4955 0.1305 293.71)", "--m3-primary-fixed": "oklch(0.9183 0.0477 302.83)", "--m3-on-primary-fixed": "oklch(0.242 0.1404 286.09)", "--m3-primary-fixed-dim": "oklch(0.8349 0.0946 298.02)", "--m3-on-primary-fixed-variant": "oklch(0.4103 0.1337 292.71)", "--m3-secondary-fixed": "oklch(0.9163 0.0365 303.11)", "--m3-on-secondary-fixed": "oklch(0.2272 0.0347 293.65)", "--m3-secondary-fixed-dim": "oklch(0.8303 0.0374 303.03)", "--m3-on-secondary-fixed-variant": "oklch(0.4005 0.034 298.59)", "--m3-tertiary-fixed": "oklch(0.9184 0.046 357.58)", "--m3-on-tertiary-fixed": "oklch(0.2323 0.0543 358.61)", "--m3-tertiary-fixed-dim": "oklch(0.8367 0.0666 359.43)", "--m3-on-tertiary-fixed-variant": "oklch(0.4044 0.0591 359.11)", "--m3-surface-dim": "oklch(0.1874 0.0124 300.42)", "--m3-surface-bright": "oklch(0.346 0.011 308.11)", "--m3-surface-container-lowest": "oklch(0.1645 0.0128 300.23)", "--m3-surface-container-low": "oklch(0.2265 0.01 303.71)", "--m3-surface-container": "oklch(0.2445 0.0134 298.46)", "--m3-surface-container-high": "oklch(0.2859 0.0129 298.63)", "--m3-surface-container-highest": "oklch(0.3298 0.0125 298.76)" }, "[data-palette=\"ocean\"]": { "--m3-primary": "oklch(0.4955 0.1305 250)", "--m3-surface-tint": "oklch(0.4955 0.1305 250)", "--m3-on-primary": "oklch(1 0 0)", "--m3-primary-container": "oklch(0.9183 0.0395 259.12)", "--m3-on-primary-container": "oklch(0.4095 0.1139 249.25)", "--m3-secondary": "oklch(0.4859 0.0358 255.91)", "--m3-on-secondary": "oklch(1 0 0)", "--m3-secondary-container": "oklch(0.9163 0.0365 259.4)", "--m3-on-secondary-container": "oklch(0.401 0.0356 254.16)", "--m3-tertiary": "oklch(0.4904 0.0605 314.74)", "--m3-on-tertiary": "oklch(1 0 0)", "--m3-tertiary-container": "oklch(0.9184 0.046 313.87)", "--m3-on-tertiary-container": "oklch(0.4044 0.0591 315.4)", "--m3-error": "oklch(0.5013 0.1783 28.7)", "--m3-on-error": "oklch(1 0 0)", "--m3-error-container": "oklch(0.9221 0.0301 22.79)", "--m3-on-error-container": "oklch(0.4128 0.1344 25.78)", "--m3-background": "oklch(0.9838 0.0077 278.18)", "--m3-on-background": "oklch(0.2265 0.01 260)", "--m3-surface": "oklch(0.9838 0.0077 278.18)", "--m3-on-surface": "oklch(0.2265 0.01 260)", "--m3-surface-variant": "oklch(0.9157 0.0177 267.86)", "--m3-on-surface-variant": "oklch(0.3981 0.0174 260.01)", "--m3-outline": "oklch(0.5667 0.0163 264.43)", "--m3-outline-variant": "oklch(0.8287 0.0178 264.51)", "--m3-shadow": "oklch(0 0 0)", "--m3-scrim": "oklch(0 0 0)", "--m3-inverse-surface": "oklch(0.3107 0.0113 264.35)", "--m3-inverse-on-surface": "oklch(0.9591 0.0123 274.03)", "--m3-inverse-primary": "oklch(0.8349 0.0837 254.31)", "--m3-primary-fixed": "oklch(0.9183 0.0395 259.12)", "--m3-on-primary-fixed": "oklch(0.242 0.0583 242.38)", "--m3-primary-fixed-dim": "oklch(0.8349 0.0837 254.31)", "--m3-on-primary-fixed-variant": "oklch(0.4103 0.1134 249)", "--m3-secondary-fixed": "oklch(0.9163 0.0365 259.4)", "--m3-on-secondary-fixed": "oklch(0.2272 0.0347 249.94)", "--m3-secondary-fixed-dim": "oklch(0.8303 0.0374 259.32)", "--m3-on-secondary-fixed-variant": "oklch(0.4005 0.034 254.88)", "--m3-tertiary-fixed": "oklch(0.9184 0.046 313.87)", "--m3-on-tertiary-fixed": "oklch(0.2323 0.0543 314.9)", "--m3-tertiary-fixed-dim": "oklch(0.8367 0.0666 315.72)", "--m3-on-tertiary-fixed-variant": "oklch(0.4044 0.0591 315.4)", "--m3-surface-dim": "oklch(0.8896 0.0138 271.04)", "--m3-surface-bright": "oklch(0.9838 0.0077 278.18)", "--m3-surface-container-lowest": "oklch(1 0 0)", "--m3-surface-container-low": "oklch(0.9673 0.0118 269.51)", "--m3-surface-container": "oklch(0.9536 0.0147 268.53)", "--m3-surface-container-high": "oklch(0.9325 0.0148 268.53)", "--m3-surface-container-highest": "oklch(0.914 0.0137 271.05)" }, "[data-palette=\"ocean\"].dark, [data-palette=\"ocean\"] .dark, .dark [data-palette=\"ocean\"]": { "--m3-primary": "oklch(0.8349 0.0837 254.31)", "--m3-surface-tint": "oklch(0.8349 0.0837 254.31)", "--m3-on-primary": "oklch(0.3251 0.0867 247.44)", "--m3-primary-container": "oklch(0.4103 0.1134 249)", "--m3-on-primary-container": "oklch(0.9183 0.0395 259.12)", "--m3-secondary": "oklch(0.8303 0.0374 259.32)", "--m3-on-secondary": "oklch(0.3124 0.0361 254.34)", "--m3-secondary-container": "oklch(0.4005 0.034 254.88)", "--m3-on-secondary-container": "oklch(0.9163 0.0365 259.4)", "--m3-tertiary": "oklch(0.8367 0.0666 315.72)", "--m3-on-tertiary": "oklch(0.3171 0.0571 314.11)", "--m3-tertiary-container": "oklch(0.4044 0.0591 315.4)", "--m3-on-tertiary-container": "oklch(0.9184 0.046 313.87)", "--m3-error": "oklch(0.8345 0.0677 22.01)", "--m3-on-error": "oklch(0.3245 0.1092 28.01)", "--m3-error-container": "oklch(0.42 0.1473 28.14)", "--m3-on-error-container": "oklch(0.9221 0.0301 22.79)", "--m3-background": "oklch(0.1874 0.0124 256.71)", "--m3-on-background": "oklch(0.914 0.0137 271.05)", "--m3-surface": "oklch(0.1874 0.0124 256.71)", "--m3-on-surface": "oklch(0.914 0.0137 271.05)", "--m3-surface-variant": "oklch(0.3981 0.0174 260.01)", "--m3-on-surface-variant": "oklch(0.8287 0.0178 264.51)", "--m3-outline": "oklch(0.6566 0.0153 260.3)", "--m3-outline-variant": "oklch(0.3981 0.0174 260.01)", "--m3-shadow": "oklch(0 0 0)", "--m3-scrim": "oklch(0 0 0)", "--m3-inverse-surface": "oklch(0.914 0.0137 271.05)", "--m3-inverse-on-surface": "oklch(0.3107 0.0113 264.35)", "--m3-inverse-primary": "oklch(0.4955 0.1305 250)", "--m3-primary-fixed": "oklch(0.9183 0.0395 259.12)", "--m3-on-primary-fixed": "oklch(0.242 0.0583 242.38)", "--m3-primary-fixed-dim": "oklch(0.8349 0.0837 254.31)", "--m3-on-primary-fixed-variant": "oklch(0.4103 0.1134 249)", "--m3-secondary-fixed": "oklch(0.9163 0.0365 259.4)", "--m3-on-secondary-fixed": "oklch(0.2272 0.0347 249.94)", "--m3-secondary-fixed-dim": "oklch(0.8303 0.0374 259.32)", "--m3-on-secondary-fixed-variant": "oklch(0.4005 0.034 254.88)", "--m3-tertiary-fixed": "oklch(0.9184 0.046 313.87)", "--m3-on-tertiary-fixed": "oklch(0.2323 0.0543 314.9)", "--m3-tertiary-fixed-dim": "oklch(0.8367 0.0666 315.72)", "--m3-on-tertiary-fixed-variant": "oklch(0.4044 0.0591 315.4)", "--m3-surface-dim": "oklch(0.1874 0.0124 256.71)", "--m3-surface-bright": "oklch(0.346 0.011 264.4)", "--m3-surface-container-lowest": "oklch(0.1645 0.0128 256.52)", "--m3-surface-container-low": "oklch(0.2265 0.01 260)", "--m3-surface-container": "oklch(0.2445 0.0134 254.75)", "--m3-surface-container-high": "oklch(0.2859 0.0129 254.92)", "--m3-surface-container-highest": "oklch(0.3298 0.0125 255.05)" }, "[data-palette=\"forest\"]": { "--m3-primary": "oklch(0.4955 0.1305 150)", "--m3-surface-tint": "oklch(0.4955 0.1305 150)", "--m3-on-primary": "oklch(1 0 0)", "--m3-primary-container": "oklch(0.9183 0.0477 159.12)", "--m3-on-primary-container": "oklch(0.4095 0.115 149.25)", "--m3-secondary": "oklch(0.4859 0.0358 155.91)", "--m3-on-secondary": "oklch(1 0 0)", "--m3-secondary-container": "oklch(0.9163 0.0365 159.4)", "--m3-on-secondary-container": "oklch(0.401 0.0356 154.16)", "--m3-tertiary": "oklch(0.4904 0.0605 214.74)", "--m3-on-tertiary": "oklch(1 0 0)", "--m3-tertiary-container": "oklch(0.9184 0.046 213.87)", "--m3-on-tertiary-container": "oklch(0.4044 0.0591 215.4)", "--m3-error": "oklch(0.5013 0.1783 28.7)", "--m3-on-error": "oklch(1 0 0)", "--m3-error-container": "oklch(0.9221 0.0301 22.79)", "--m3-on-error-container": "oklch(0.4128 0.1344 25.78)", "--m3-background": "oklch(0.9838 0.0128 178.18)", "--m3-on-background": "oklch(0.2265 0.01 160)", "--m3-surface": "oklch(0.9838 0.0128 178.18)", "--m3-on-surface": "oklch(0.2265 0.01 160)", "--m3-surface-variant": "oklch(0.9157 0.0177 167.86)", "--m3-on-surface-variant": "oklch(0.3981 0.0174 160.01)", "--m3-outline": "oklch(0.5667 0.0163 164.43)", "--m3-outline-variant": "oklch(0.8287 0.0178 164.51)", "--m3-shadow": "oklch(0 0 0)", "--m3-scrim": "oklch(0 0 0)", "--m3-inverse-surface": "oklch(0.3107 0.0113 164.35)", "--m3-inverse-on-surface": "oklch(0.9591 0.0123 174.03)", "--m3-inverse-primary": "oklch(0.8349 0.0946 154.31)", "--m3-primary-fixed": "oklch(0.9183 0.0477 159.12)", "--m3-on-primary-fixed": "oklch(0.242 0.0829 142.38)", "--m3-primary-fixed-dim": "oklch(0.8349 0.0946 154.31)", "--m3-on-primary-fixed-variant": "oklch(0.4103 0.116 149)", "--m3-secondary-fixed": "oklch(0.9163 0.0365 159.4)", "--m3-on-secondary-fixed": "oklch(0.2272 0.0347 149.94)", "--m3-secondary-fixed-dim": "oklch(0.8303 0.0374 159.32)", "--m3-on-secondary-fixed-variant": "oklch(0.4005 0.034 154.88)", "--m3-tertiary-fixed": "oklch(0.9184 0.046 213.87)", "--m3-on-tertiary-fixed": "oklch(0.2323 0.0414 214.9)", "--m3-tertiary-fixed-dim": "oklch(0.8367 0.0666 215.72)", "--m3-on-tertiary-fixed-variant": "oklch(0.4044 0.0591 215.4)", "--m3-surface-dim": "oklch(0.8896 0.0138 171.04)", "--m3-surface-bright": "oklch(0.9838 0.0128 178.18)", "--m3-surface-container-lowest": "oklch(1 0 0)", "--m3-surface-container-low": "oklch(0.9673 0.0118 169.51)", "--m3-surface-container": "oklch(0.9536 0.0147 168.53)", "--m3-surface-container-high": "oklch(0.9325 0.0148 168.53)", "--m3-surface-container-highest": "oklch(0.914 0.0137 171.05)" }, "[data-palette=\"forest\"].dark, [data-palette=\"forest\"] .dark, .dark [data-palette=\"forest\"]": { "--m3-primary": "oklch(0.8349 0.0946 154.31)", "--m3-surface-tint": "oklch(0.8349 0.0946 154.31)", "--m3-on-primary": "oklch(0.3251 0.0958 147.44)", "--m3-primary-container": "oklch(0.4103 0.116 149)", "--m3-on-primary-container": "oklch(0.9183 0.0477 159.12)", "--m3-secondary": "oklch(0.8303 0.0374 159.32)", "--m3-on-secondary": "oklch(0.3124 0.0361 154.34)", "--m3-secondary-container": "oklch(0.4005 0.034 154.88)", "--m3-on-secondary-container": "oklch(0.9163 0.0365 159.4)", "--m3-tertiary": "oklch(0.8367 0.0666 215.72)", "--m3-on-tertiary": "oklch(0.3171 0.056 214.11)", "--m3-tertiary-container": "oklch(0.4044 0.0591 215.4)", "--m3-on-tertiary-container": "oklch(0.9184 0.046 213.87)", "--m3-error": "oklch(0.8345 0.0677 22.01)", "--m3-on-error": "oklch(0.3245 0.1092 28.01)", "--m3-error-container": "oklch(0.42 0.1473 28.14)", "--m3-on-error-container": "oklch(0.9221 0.0301 22.79)", "--m3-background": "oklch(0.1874 0.0124 156.71)", "--m3-on-background": "oklch(0.914 0.0137 171.05)", "--m3-surface": "oklch(0.1874 0.0124 156.71)", "--m3-on-surface": "oklch(0.914 0.0137 171.05)", "--m3-surface-variant": "oklch(0.3981 0.0174 160.01)", "--m3-on-surface-variant": "oklch(0.8287 0.0178 164.51)", "--m3-outline": "oklch(0.6566 0.0153 160.3)", "--m3-outline-variant": "oklch(0.3981 0.0174 160.01)", "--m3-shadow": "oklch(0 0 0)", "--m3-scrim": "oklch(0 0 0)", "--m3-inverse-surface": "oklch(0.914 0.0137 171.05)", "--m3-inverse-on-surface": "oklch(0.3107 0.0113 164.35)", "--m3-inverse-primary": "oklch(0.4935 0.1305 150)", "--m3-primary-fixed": "oklch(0.9183 0.0477 159.12)", "--m3-on-primary-fixed": "oklch(0.242 0.0829 142.38)", "--m3-primary-fixed-dim": "oklch(0.8349 0.0946 154.31)", "--m3-on-primary-fixed-variant": "oklch(0.4103 0.116 149)", "--m3-secondary-fixed": "oklch(0.9163 0.0365 159.4)", "--m3-on-secondary-fixed": "oklch(0.2272 0.0347 149.94)", "--m3-secondary-fixed-dim": "oklch(0.8303 0.0374 159.32)", "--m3-on-secondary-fixed-variant": "oklch(0.4005 0.034 154.88)", "--m3-tertiary-fixed": "oklch(0.9184 0.046 213.87)", "--m3-on-tertiary-fixed": "oklch(0.2323 0.0414 214.9)", "--m3-tertiary-fixed-dim": "oklch(0.8367 0.0666 215.72)", "--m3-on-tertiary-fixed-variant": "oklch(0.4044 0.0591 215.4)", "--m3-surface-dim": "oklch(0.1874 0.0124 156.71)", "--m3-surface-bright": "oklch(0.346 0.011 164.4)", "--m3-surface-container-lowest": "oklch(0.1645 0.0128 156.52)", "--m3-surface-container-low": "oklch(0.2265 0.01 160)", "--m3-surface-container": "oklch(0.2445 0.0134 154.75)", "--m3-surface-container-high": "oklch(0.2859 0.0129 154.92)", "--m3-surface-container-highest": "oklch(0.3298 0.0125 155.05)" }, "[data-palette=\"ember\"]": { "--m3-primary": "oklch(0.4955 0.1228 55)", "--m3-surface-tint": "oklch(0.4955 0.1228 55)", "--m3-on-primary": "oklch(1 0 0)", "--m3-primary-container": "oklch(0.9183 0.0477 64.12)", "--m3-on-primary-container": "oklch(0.4095 0.1025 54.25)", "--m3-secondary": "oklch(0.4859 0.0358 60.91)", "--m3-on-secondary": "oklch(1 0 0)", "--m3-secondary-container": "oklch(0.9163 0.0365 64.4)", "--m3-on-secondary-container": "oklch(0.401 0.0356 59.16)", "--m3-tertiary": "oklch(0.4904 0.0605 119.74)", "--m3-on-tertiary": "oklch(1 0 0)", "--m3-tertiary-container": "oklch(0.9184 0.046 118.87)", "--m3-on-tertiary-container": "oklch(0.4044 0.0591 120.4)", "--m3-error": "oklch(0.5013 0.1783 28.7)", "--m3-on-error": "oklch(1 0 0)", "--m3-error-container": "oklch(0.9221 0.0301 22.79)", "--m3-on-error-container": "oklch(0.4128 0.1344 25.78)", "--m3-background": "oklch(0.9838 0.0128 83.18)", "--m3-on-background": "oklch(0.2265 0.01 65)", "--m3-surface": "oklch(0.9838 0.0128 83.18)", "--m3-on-surface": "oklch(0.2265 0.01 65)", "--m3-surface-variant": "oklch(0.9157 0.0177 72.86)", "--m3-on-surface-variant": "oklch(0.3981 0.0174 65.01)", "--m3-outline": "oklch(0.5667 0.0163 69.43)", "--m3-outline-variant": "oklch(0.8287 0.0178 69.51)", "--m3-shadow": "oklch(0 0 0)", "--m3-scrim": "oklch(0 0 0)", "--m3-inverse-surface": "oklch(0.3107 0.0113 69.35)", "--m3-inverse-on-surface": "oklch(0.9591 0.0123 79.03)", "--m3-inverse-primary": "oklch(0.8349 0.0946 59.31)", "--m3-primary-fixed": "oklch(0.9183 0.0477 64.12)", "--m3-on-primary-fixed": "oklch(0.242 0.0672 47.38)", "--m3-primary-fixed-dim": "oklch(0.8349 0.0946 59.31)", "--m3-on-primary-fixed-variant": "oklch(0.4103 0.1031 54)", "--m3-secondary-fixed": "oklch(0.9163 0.0365 64.4)", "--m3-on-secondary-fixed": "oklch(0.2272 0.0347 54.94)", "--m3-secondary-fixed-dim": "oklch(0.8303 0.0374 64.32)", "--m3-on-secondary-fixed-variant": "oklch(0.4005 0.034 59.88)", "--m3-tertiary-fixed": "oklch(0.9184 0.046 118.87)", "--m3-on-tertiary-fixed": "oklch(0.2323 0.0543 119.9)", "--m3-tertiary-fixed-dim": "oklch(0.8367 0.0666 120.72)", "--m3-on-tertiary-fixed-variant": "oklch(0.4044 0.0591 120.4)", "--m3-surface-dim": "oklch(0.8896 0.0138 76.04)", "--m3-surface-bright": "oklch(0.9838 0.0128 83.18)", "--m3-surface-container-lowest": "oklch(1 0 0)", "--m3-surface-container-low": "oklch(0.9673 0.0118 74.51)", "--m3-surface-container": "oklch(0.9536 0.0147 73.53)", "--m3-surface-container-high": "oklch(0.9325 0.0148 73.53)", "--m3-surface-container-highest": "oklch(0.914 0.0137 76.05)" }, "[data-palette=\"ember\"].dark, [data-palette=\"ember\"] .dark, .dark [data-palette=\"ember\"]": { "--m3-primary": "oklch(0.8349 0.0946 59.31)", "--m3-surface-tint": "oklch(0.8349 0.0946 59.31)", "--m3-on-primary": "oklch(0.3251 0.0835 52.44)", "--m3-primary-container": "oklch(0.4103 0.1031 54)", "--m3-on-primary-container": "oklch(0.9183 0.0477 64.12)", "--m3-secondary": "oklch(0.8303 0.0374 64.32)", "--m3-on-secondary": "oklch(0.3124 0.0361 59.34)", "--m3-secondary-container": "oklch(0.4005 0.034 59.88)", "--m3-on-secondary-container": "oklch(0.9163 0.0365 64.4)", "--m3-tertiary": "oklch(0.8367 0.0666 120.72)", "--m3-on-tertiary": "oklch(0.3171 0.0571 119.11)", "--m3-tertiary-container": "oklch(0.4044 0.0591 120.4)", "--m3-on-tertiary-container": "oklch(0.9184 0.046 118.87)", "--m3-error": "oklch(0.8345 0.0677 22.01)", "--m3-on-error": "oklch(0.3245 0.1092 28.01)", "--m3-error-container": "oklch(0.42 0.1473 28.14)", "--m3-on-error-container": "oklch(0.9221 0.0301 22.79)", "--m3-background": "oklch(0.1874 0.0124 61.71)", "--m3-on-background": "oklch(0.914 0.0137 76.05)", "--m3-surface": "oklch(0.1874 0.0124 61.71)", "--m3-on-surface": "oklch(0.914 0.0137 76.05)", "--m3-surface-variant": "oklch(0.3981 0.0174 65.01)", "--m3-on-surface-variant": "oklch(0.8287 0.0178 69.51)", "--m3-outline": "oklch(0.6566 0.0153 65.3)", "--m3-outline-variant": "oklch(0.3981 0.0174 65.01)", "--m3-shadow": "oklch(0 0 0)", "--m3-scrim": "oklch(0 0 0)", "--m3-inverse-surface": "oklch(0.914 0.0137 76.05)", "--m3-inverse-on-surface": "oklch(0.3107 0.0113 69.35)", "--m3-inverse-primary": "oklch(0.4955 0.1228 55)", "--m3-primary-fixed": "oklch(0.9183 0.0477 64.12)", "--m3-on-primary-fixed": "oklch(0.242 0.0672 47.38)", "--m3-primary-fixed-dim": "oklch(0.8349 0.0946 59.31)", "--m3-on-primary-fixed-variant": "oklch(0.4103 0.1031 54)", "--m3-secondary-fixed": "oklch(0.9163 0.0365 64.4)", "--m3-on-secondary-fixed": "oklch(0.2272 0.0347 54.94)", "--m3-secondary-fixed-dim": "oklch(0.8303 0.0374 64.32)", "--m3-on-secondary-fixed-variant": "oklch(0.4005 0.034 59.88)", "--m3-tertiary-fixed": "oklch(0.9184 0.046 118.87)", "--m3-on-tertiary-fixed": "oklch(0.2323 0.0543 119.9)", "--m3-tertiary-fixed-dim": "oklch(0.8367 0.0666 120.72)", "--m3-on-tertiary-fixed-variant": "oklch(0.4044 0.0591 120.4)", "--m3-surface-dim": "oklch(0.1874 0.0124 61.71)", "--m3-surface-bright": "oklch(0.346 0.011 69.4)", "--m3-surface-container-lowest": "oklch(0.1645 0.0128 61.52)", "--m3-surface-container-low": "oklch(0.2265 0.01 65)", "--m3-surface-container": "oklch(0.2445 0.0134 59.75)", "--m3-surface-container-high": "oklch(0.2859 0.0129 59.92)", "--m3-surface-container-highest": "oklch(0.3298 0.0125 60.05)" }, "[data-palette=\"rose\"]": { "--m3-primary": "oklch(0.4955 0.1305 15)", "--m3-surface-tint": "oklch(0.4955 0.1305 15)", "--m3-on-primary": "oklch(1 0 0)", "--m3-primary-container": "oklch(0.9183 0.0417 24.12)", "--m3-on-primary-container": "oklch(0.4095 0.1323 14.25)", "--m3-secondary": "oklch(0.4859 0.0358 20.91)", "--m3-on-secondary": "oklch(1 0 0)", "--m3-secondary-container": "oklch(0.9163 0.0365 24.4)", "--m3-on-secondary-container": "oklch(0.401 0.0356 19.16)", "--m3-tertiary": "oklch(0.4904 0.0605 79.74)", "--m3-on-tertiary": "oklch(1 0 0)", "--m3-tertiary-container": "oklch(0.9184 0.046 78.87)", "--m3-on-tertiary-container": "oklch(0.4044 0.0591 80.4)", "--m3-error": "oklch(0.5013 0.1783 28.7)", "--m3-on-error": "oklch(1 0 0)", "--m3-error-container": "oklch(0.9221 0.0301 22.79)", "--m3-on-error-container": "oklch(0.4128 0.1344 25.78)", "--m3-background": "oklch(0.9838 0.0084 43.18)", "--m3-on-background": "oklch(0.2265 0.01 25)", "--m3-surface": "oklch(0.9838 0.0084 43.18)", "--m3-on-surface": "oklch(0.2265 0.01 25)", "--m3-surface-variant": "oklch(0.9157 0.0177 32.86)", "--m3-on-surface-variant": "oklch(0.3981 0.0174 25.01)", "--m3-outline": "oklch(0.5667 0.0163 29.43)", "--m3-outline-variant": "oklch(0.8287 0.0178 29.51)", "--m3-shadow": "oklch(0 0 0)", "--m3-scrim": "oklch(0 0 0)", "--m3-inverse-surface": "oklch(0.3107 0.0113 29.35)", "--m3-inverse-on-surface": "oklch(0.9591 0.0123 39.03)", "--m3-inverse-primary": "oklch(0.8349 0.0914 19.31)", "--m3-primary-fixed": "oklch(0.9183 0.0417 24.12)", "--m3-on-primary-fixed": "oklch(0.242 0.0976 7.38)", "--m3-primary-fixed-dim": "oklch(0.8349 0.0914 19.31)", "--m3-on-primary-fixed-variant": "oklch(0.4103 0.1337 14)", "--m3-secondary-fixed": "oklch(0.9163 0.0365 24.4)", "--m3-on-secondary-fixed": "oklch(0.2272 0.0347 14.94)", "--m3-secondary-fixed-dim": "oklch(0.8303 0.0374 24.32)", "--m3-on-secondary-fixed-variant": "oklch(0.4005 0.034 19.88)", "--m3-tertiary-fixed": "oklch(0.9184 0.046 78.87)", "--m3-on-tertiary-fixed": "oklch(0.2323 0.0487 79.9)", "--m3-tertiary-fixed-dim": "oklch(0.8367 0.0666 80.72)", "--m3-on-tertiary-fixed-variant": "oklch(0.4044 0.0591 80.4)", "--m3-surface-dim": "oklch(0.8896 0.0138 36.04)", "--m3-surface-bright": "oklch(0.9838 0.0084 43.18)", "--m3-surface-container-lowest": "oklch(1 0 0)", "--m3-surface-container-low": "oklch(0.9673 0.0118 34.51)", "--m3-surface-container": "oklch(0.9536 0.0147 33.53)", "--m3-surface-container-high": "oklch(0.9325 0.0148 33.53)", "--m3-surface-container-highest": "oklch(0.914 0.0137 36.05)" }, "[data-palette=\"rose\"].dark, [data-palette=\"rose\"] .dark, .dark [data-palette=\"rose\"]": { "--m3-primary": "oklch(0.8349 0.0914 19.31)", "--m3-surface-tint": "oklch(0.8349 0.0914 19.31)", "--m3-on-primary": "oklch(0.3251 0.1303 12.44)", "--m3-primary-container": "oklch(0.4103 0.1337 14)", "--m3-on-primary-container": "oklch(0.9183 0.0417 24.12)", "--m3-secondary": "oklch(0.8303 0.0374 24.32)", "--m3-on-secondary": "oklch(0.3124 0.0361 19.34)", "--m3-secondary-container": "oklch(0.4005 0.034 19.88)", "--m3-on-secondary-container": "oklch(0.9163 0.0365 24.4)", "--m3-tertiary": "oklch(0.8367 0.0666 80.72)", "--m3-on-tertiary": "oklch(0.3171 0.0571 79.11)", "--m3-tertiary-container": "oklch(0.4044 0.0591 80.4)", "--m3-on-tertiary-container": "oklch(0.9184 0.046 78.87)", "--m3-error": "oklch(0.8345 0.0677 22.01)", "--m3-on-error": "oklch(0.3245 0.1092 28.01)", "--m3-error-container": "oklch(0.42 0.1473 28.14)", "--m3-on-error-container": "oklch(0.9221 0.0301 22.79)", "--m3-background": "oklch(0.1874 0.0124 21.71)", "--m3-on-background": "oklch(0.914 0.0137 36.05)", "--m3-surface": "oklch(0.1874 0.0124 21.71)", "--m3-on-surface": "oklch(0.914 0.0137 36.05)", "--m3-surface-variant": "oklch(0.3981 0.0174 25.01)", "--m3-on-surface-variant": "oklch(0.8287 0.0178 29.51)", "--m3-outline": "oklch(0.6566 0.0153 25.3)", "--m3-outline-variant": "oklch(0.3981 0.0174 25.01)", "--m3-shadow": "oklch(0 0 0)", "--m3-scrim": "oklch(0 0 0)", "--m3-inverse-surface": "oklch(0.914 0.0137 36.05)", "--m3-inverse-on-surface": "oklch(0.3107 0.0113 29.35)", "--m3-inverse-primary": "oklch(0.4955 0.1305 15)", "--m3-primary-fixed": "oklch(0.9183 0.0417 24.12)", "--m3-on-primary-fixed": "oklch(0.242 0.0976 7.38)", "--m3-primary-fixed-dim": "oklch(0.8349 0.0914 19.31)", "--m3-on-primary-fixed-variant": "oklch(0.4103 0.1337 14)", "--m3-secondary-fixed": "oklch(0.9163 0.0365 24.4)", "--m3-on-secondary-fixed": "oklch(0.2272 0.0347 14.94)", "--m3-secondary-fixed-dim": "oklch(0.8303 0.0374 24.32)", "--m3-on-secondary-fixed-variant": "oklch(0.4005 0.034 19.88)", "--m3-tertiary-fixed": "oklch(0.9184 0.046 78.87)", "--m3-on-tertiary-fixed": "oklch(0.2323 0.0487 79.9)", "--m3-tertiary-fixed-dim": "oklch(0.8367 0.0666 80.72)", "--m3-on-tertiary-fixed-variant": "oklch(0.4044 0.0591 80.4)", "--m3-surface-dim": "oklch(0.1874 0.0124 21.71)", "--m3-surface-bright": "oklch(0.346 0.011 29.4)", "--m3-surface-container-lowest": "oklch(0.1645 0.0128 21.52)", "--m3-surface-container-low": "oklch(0.2265 0.01 25)", "--m3-surface-container": "oklch(0.2445 0.0134 19.75)", "--m3-surface-container-high": "oklch(0.2859 0.0129 19.92)", "--m3-surface-container-highest": "oklch(0.3298 0.0125 20.05)" }, ":root, .dark, [data-palette=\"ocean\"], [data-palette=\"ocean\"].dark, [data-palette=\"ocean\"] .dark, .dark [data-palette=\"ocean\"], [data-palette=\"forest\"], [data-palette=\"forest\"].dark, [data-palette=\"forest\"] .dark, .dark [data-palette=\"forest\"], [data-palette=\"ember\"], [data-palette=\"ember\"].dark, [data-palette=\"ember\"] .dark, .dark [data-palette=\"ember\"], [data-palette=\"rose\"], [data-palette=\"rose\"].dark, [data-palette=\"rose\"] .dark, .dark [data-palette=\"rose\"]": { "--background": "var(--m3-surface)", "--foreground": "var(--m3-on-surface)", "--card": "var(--m3-surface-container-low)", "--card-foreground": "var(--m3-on-surface)", "--popover": "var(--m3-surface-container)", "--popover-foreground": "var(--m3-on-surface)", "--primary": "var(--m3-primary)", "--primary-foreground": "var(--m3-on-primary)", "--secondary": "var(--m3-secondary-container)", "--secondary-foreground": "var(--m3-on-secondary-container)", "--muted": "var(--m3-surface-container-highest)", "--muted-foreground": "var(--m3-on-surface-variant)", "--accent": "var(--m3-tertiary-container)", "--accent-foreground": "var(--m3-on-tertiary-container)", "--destructive": "var(--m3-error)", "--destructive-foreground": "var(--m3-on-error)", "--border": "var(--m3-outline-variant)", "--input": "var(--m3-outline)", "--ring": "var(--m3-primary)", "--sidebar": "var(--m3-surface-container-low)", "--sidebar-foreground": "var(--m3-on-surface)", "--sidebar-primary": "var(--m3-primary)", "--sidebar-primary-foreground": "var(--m3-on-primary)", "--sidebar-accent": "var(--m3-secondary-container)", "--sidebar-accent-foreground": "var(--m3-on-secondary-container)", "--sidebar-border": "var(--m3-outline-variant)", "--sidebar-ring": "var(--m3-primary)", "--chart-1": "var(--m3-primary)", "--chart-2": "var(--m3-tertiary)", "--chart-3": "var(--m3-secondary)", "--chart-4": "var(--m3-primary-container)", "--chart-5": "var(--m3-tertiary-container)" }, "@media (prefers-color-scheme: dark)": { ":root:not(.light):not(.dark)": { "--m3-primary": "oklch(0.8349 0.0946 298.02)", "--m3-surface-tint": "oklch(0.8349 0.0946 298.02)", "--m3-on-primary": "oklch(0.3251 0.1353 291.15)", "--m3-primary-container": "oklch(0.4103 0.1337 292.71)", "--m3-on-primary-container": "oklch(0.9183 0.0477 302.83)", "--m3-secondary": "oklch(0.8303 0.0374 303.03)", "--m3-on-secondary": "oklch(0.3124 0.0361 298.05)", "--m3-secondary-container": "oklch(0.4005 0.034 298.59)", "--m3-on-secondary-container": "oklch(0.9163 0.0365 303.11)", "--m3-tertiary": "oklch(0.8367 0.0666 359.43)", "--m3-on-tertiary": "oklch(0.3171 0.0571 357.82)", "--m3-tertiary-container": "oklch(0.4044 0.0591 359.11)", "--m3-on-tertiary-container": "oklch(0.9184 0.046 357.58)", "--m3-error": "oklch(0.8345 0.0677 22.01)", "--m3-on-error": "oklch(0.3245 0.1092 28.01)", "--m3-error-container": "oklch(0.42 0.1473 28.14)", "--m3-on-error-container": "oklch(0.9221 0.0301 22.79)", "--m3-background": "oklch(0.1874 0.0124 300.42)", "--m3-on-background": "oklch(0.914 0.0137 314.75)", "--m3-surface": "oklch(0.1874 0.0124 300.42)", "--m3-on-surface": "oklch(0.914 0.0137 314.75)", "--m3-surface-variant": "oklch(0.3981 0.0174 303.72)", "--m3-on-surface-variant": "oklch(0.8287 0.0178 308.22)", "--m3-outline": "oklch(0.6566 0.0153 304.01)", "--m3-outline-variant": "oklch(0.3981 0.0174 303.72)", "--m3-shadow": "oklch(0 0 0)", "--m3-scrim": "oklch(0 0 0)", "--m3-inverse-surface": "oklch(0.914 0.0137 314.75)", "--m3-inverse-on-surface": "oklch(0.3107 0.0113 308.06)", "--m3-inverse-primary": "oklch(0.4955 0.1305 293.71)", "--m3-primary-fixed": "oklch(0.9183 0.0477 302.83)", "--m3-on-primary-fixed": "oklch(0.242 0.1404 286.09)", "--m3-primary-fixed-dim": "oklch(0.8349 0.0946 298.02)", "--m3-on-primary-fixed-variant": "oklch(0.4103 0.1337 292.71)", "--m3-secondary-fixed": "oklch(0.9163 0.0365 303.11)", "--m3-on-secondary-fixed": "oklch(0.2272 0.0347 293.65)", "--m3-secondary-fixed-dim": "oklch(0.8303 0.0374 303.03)", "--m3-on-secondary-fixed-variant": "oklch(0.4005 0.034 298.59)", "--m3-tertiary-fixed": "oklch(0.9184 0.046 357.58)", "--m3-on-tertiary-fixed": "oklch(0.2323 0.0543 358.61)", "--m3-tertiary-fixed-dim": "oklch(0.8367 0.0666 359.43)", "--m3-on-tertiary-fixed-variant": "oklch(0.4044 0.0591 359.11)", "--m3-surface-dim": "oklch(0.1874 0.0124 300.42)", "--m3-surface-bright": "oklch(0.346 0.011 308.11)", "--m3-surface-container-lowest": "oklch(0.1645 0.0128 300.23)", "--m3-surface-container-low": "oklch(0.2265 0.01 303.71)", "--m3-surface-container": "oklch(0.2445 0.0134 298.46)", "--m3-surface-container-high": "oklch(0.2859 0.0129 298.63)", "--m3-surface-container-highest": "oklch(0.3298 0.0125 298.76)" }, "[data-palette=\"ocean\"]:not(.light):not(.dark)": { "--m3-primary": "oklch(0.8349 0.0837 254.31)", "--m3-surface-tint": "oklch(0.8349 0.0837 254.31)", "--m3-on-primary": "oklch(0.3251 0.0867 247.44)", "--m3-primary-container": "oklch(0.4103 0.1134 249)", "--m3-on-primary-container": "oklch(0.9183 0.0395 259.12)", "--m3-secondary": "oklch(0.8303 0.0374 259.32)", "--m3-on-secondary": "oklch(0.3124 0.0361 254.34)", "--m3-secondary-container": "oklch(0.4005 0.034 254.88)", "--m3-on-secondary-container": "oklch(0.9163 0.0365 259.4)", "--m3-tertiary": "oklch(0.8367 0.0666 315.72)", "--m3-on-tertiary": "oklch(0.3171 0.0571 314.11)", "--m3-tertiary-container": "oklch(0.4044 0.0591 315.4)", "--m3-on-tertiary-container": "oklch(0.9184 0.046 313.87)", "--m3-error": "oklch(0.8345 0.0677 22.01)", "--m3-on-error": "oklch(0.3245 0.1092 28.01)", "--m3-error-container": "oklch(0.42 0.1473 28.14)", "--m3-on-error-container": "oklch(0.9221 0.0301 22.79)", "--m3-background": "oklch(0.1874 0.0124 256.71)", "--m3-on-background": "oklch(0.914 0.0137 271.05)", "--m3-surface": "oklch(0.1874 0.0124 256.71)", "--m3-on-surface": "oklch(0.914 0.0137 271.05)", "--m3-surface-variant": "oklch(0.3981 0.0174 260.01)", "--m3-on-surface-variant": "oklch(0.8287 0.0178 264.51)", "--m3-outline": "oklch(0.6566 0.0153 260.3)", "--m3-outline-variant": "oklch(0.3981 0.0174 260.01)", "--m3-shadow": "oklch(0 0 0)", "--m3-scrim": "oklch(0 0 0)", "--m3-inverse-surface": "oklch(0.914 0.0137 271.05)", "--m3-inverse-on-surface": "oklch(0.3107 0.0113 264.35)", "--m3-inverse-primary": "oklch(0.4955 0.1305 250)", "--m3-primary-fixed": "oklch(0.9183 0.0395 259.12)", "--m3-on-primary-fixed": "oklch(0.242 0.0583 242.38)", "--m3-primary-fixed-dim": "oklch(0.8349 0.0837 254.31)", "--m3-on-primary-fixed-variant": "oklch(0.4103 0.1134 249)", "--m3-secondary-fixed": "oklch(0.9163 0.0365 259.4)", "--m3-on-secondary-fixed": "oklch(0.2272 0.0347 249.94)", "--m3-secondary-fixed-dim": "oklch(0.8303 0.0374 259.32)", "--m3-on-secondary-fixed-variant": "oklch(0.4005 0.034 254.88)", "--m3-tertiary-fixed": "oklch(0.9184 0.046 313.87)", "--m3-on-tertiary-fixed": "oklch(0.2323 0.0543 314.9)", "--m3-tertiary-fixed-dim": "oklch(0.8367 0.0666 315.72)", "--m3-on-tertiary-fixed-variant": "oklch(0.4044 0.0591 315.4)", "--m3-surface-dim": "oklch(0.1874 0.0124 256.71)", "--m3-surface-bright": "oklch(0.346 0.011 264.4)", "--m3-surface-container-lowest": "oklch(0.1645 0.0128 256.52)", "--m3-surface-container-low": "oklch(0.2265 0.01 260)", "--m3-surface-container": "oklch(0.2445 0.0134 254.75)", "--m3-surface-container-high": "oklch(0.2859 0.0129 254.92)", "--m3-surface-container-highest": "oklch(0.3298 0.0125 255.05)" }, "[data-palette=\"forest\"]:not(.light):not(.dark)": { "--m3-primary": "oklch(0.8349 0.0946 154.31)", "--m3-surface-tint": "oklch(0.8349 0.0946 154.31)", "--m3-on-primary": "oklch(0.3251 0.0958 147.44)", "--m3-primary-container": "oklch(0.4103 0.116 149)", "--m3-on-primary-container": "oklch(0.9183 0.0477 159.12)", "--m3-secondary": "oklch(0.8303 0.0374 159.32)", "--m3-on-secondary": "oklch(0.3124 0.0361 154.34)", "--m3-secondary-container": "oklch(0.4005 0.034 154.88)", "--m3-on-secondary-container": "oklch(0.9163 0.0365 159.4)", "--m3-tertiary": "oklch(0.8367 0.0666 215.72)", "--m3-on-tertiary": "oklch(0.3171 0.056 214.11)", "--m3-tertiary-container": "oklch(0.4044 0.0591 215.4)", "--m3-on-tertiary-container": "oklch(0.9184 0.046 213.87)", "--m3-error": "oklch(0.8345 0.0677 22.01)", "--m3-on-error": "oklch(0.3245 0.1092 28.01)", "--m3-error-container": "oklch(0.42 0.1473 28.14)", "--m3-on-error-container": "oklch(0.9221 0.0301 22.79)", "--m3-background": "oklch(0.1874 0.0124 156.71)", "--m3-on-background": "oklch(0.914 0.0137 171.05)", "--m3-surface": "oklch(0.1874 0.0124 156.71)", "--m3-on-surface": "oklch(0.914 0.0137 171.05)", "--m3-surface-variant": "oklch(0.3981 0.0174 160.01)", "--m3-on-surface-variant": "oklch(0.8287 0.0178 164.51)", "--m3-outline": "oklch(0.6566 0.0153 160.3)", "--m3-outline-variant": "oklch(0.3981 0.0174 160.01)", "--m3-shadow": "oklch(0 0 0)", "--m3-scrim": "oklch(0 0 0)", "--m3-inverse-surface": "oklch(0.914 0.0137 171.05)", "--m3-inverse-on-surface": "oklch(0.3107 0.0113 164.35)", "--m3-inverse-primary": "oklch(0.4935 0.1305 150)", "--m3-primary-fixed": "oklch(0.9183 0.0477 159.12)", "--m3-on-primary-fixed": "oklch(0.242 0.0829 142.38)", "--m3-primary-fixed-dim": "oklch(0.8349 0.0946 154.31)", "--m3-on-primary-fixed-variant": "oklch(0.4103 0.116 149)", "--m3-secondary-fixed": "oklch(0.9163 0.0365 159.4)", "--m3-on-secondary-fixed": "oklch(0.2272 0.0347 149.94)", "--m3-secondary-fixed-dim": "oklch(0.8303 0.0374 159.32)", "--m3-on-secondary-fixed-variant": "oklch(0.4005 0.034 154.88)", "--m3-tertiary-fixed": "oklch(0.9184 0.046 213.87)", "--m3-on-tertiary-fixed": "oklch(0.2323 0.0414 214.9)", "--m3-tertiary-fixed-dim": "oklch(0.8367 0.0666 215.72)", "--m3-on-tertiary-fixed-variant": "oklch(0.4044 0.0591 215.4)", "--m3-surface-dim": "oklch(0.1874 0.0124 156.71)", "--m3-surface-bright": "oklch(0.346 0.011 164.4)", "--m3-surface-container-lowest": "oklch(0.1645 0.0128 156.52)", "--m3-surface-container-low": "oklch(0.2265 0.01 160)", "--m3-surface-container": "oklch(0.2445 0.0134 154.75)", "--m3-surface-container-high": "oklch(0.2859 0.0129 154.92)", "--m3-surface-container-highest": "oklch(0.3298 0.0125 155.05)" }, "[data-palette=\"ember\"]:not(.light):not(.dark)": { "--m3-primary": "oklch(0.8349 0.0946 59.31)", "--m3-surface-tint": "oklch(0.8349 0.0946 59.31)", "--m3-on-primary": "oklch(0.3251 0.0835 52.44)", "--m3-primary-container": "oklch(0.4103 0.1031 54)", "--m3-on-primary-container": "oklch(0.9183 0.0477 64.12)", "--m3-secondary": "oklch(0.8303 0.0374 64.32)", "--m3-on-secondary": "oklch(0.3124 0.0361 59.34)", "--m3-secondary-container": "oklch(0.4005 0.034 59.88)", "--m3-on-secondary-container": "oklch(0.9163 0.0365 64.4)", "--m3-tertiary": "oklch(0.8367 0.0666 120.72)", "--m3-on-tertiary": "oklch(0.3171 0.0571 119.11)", "--m3-tertiary-container": "oklch(0.4044 0.0591 120.4)", "--m3-on-tertiary-container": "oklch(0.9184 0.046 118.87)", "--m3-error": "oklch(0.8345 0.0677 22.01)", "--m3-on-error": "oklch(0.3245 0.1092 28.01)", "--m3-error-container": "oklch(0.42 0.1473 28.14)", "--m3-on-error-container": "oklch(0.9221 0.0301 22.79)", "--m3-background": "oklch(0.1874 0.0124 61.71)", "--m3-on-background": "oklch(0.914 0.0137 76.05)", "--m3-surface": "oklch(0.1874 0.0124 61.71)", "--m3-on-surface": "oklch(0.914 0.0137 76.05)", "--m3-surface-variant": "oklch(0.3981 0.0174 65.01)", "--m3-on-surface-variant": "oklch(0.8287 0.0178 69.51)", "--m3-outline": "oklch(0.6566 0.0153 65.3)", "--m3-outline-variant": "oklch(0.3981 0.0174 65.01)", "--m3-shadow": "oklch(0 0 0)", "--m3-scrim": "oklch(0 0 0)", "--m3-inverse-surface": "oklch(0.914 0.0137 76.05)", "--m3-inverse-on-surface": "oklch(0.3107 0.0113 69.35)", "--m3-inverse-primary": "oklch(0.4955 0.1228 55)", "--m3-primary-fixed": "oklch(0.9183 0.0477 64.12)", "--m3-on-primary-fixed": "oklch(0.242 0.0672 47.38)", "--m3-primary-fixed-dim": "oklch(0.8349 0.0946 59.31)", "--m3-on-primary-fixed-variant": "oklch(0.4103 0.1031 54)", "--m3-secondary-fixed": "oklch(0.9163 0.0365 64.4)", "--m3-on-secondary-fixed": "oklch(0.2272 0.0347 54.94)", "--m3-secondary-fixed-dim": "oklch(0.8303 0.0374 64.32)", "--m3-on-secondary-fixed-variant": "oklch(0.4005 0.034 59.88)", "--m3-tertiary-fixed": "oklch(0.9184 0.046 118.87)", "--m3-on-tertiary-fixed": "oklch(0.2323 0.0543 119.9)", "--m3-tertiary-fixed-dim": "oklch(0.8367 0.0666 120.72)", "--m3-on-tertiary-fixed-variant": "oklch(0.4044 0.0591 120.4)", "--m3-surface-dim": "oklch(0.1874 0.0124 61.71)", "--m3-surface-bright": "oklch(0.346 0.011 69.4)", "--m3-surface-container-lowest": "oklch(0.1645 0.0128 61.52)", "--m3-surface-container-low": "oklch(0.2265 0.01 65)", "--m3-surface-container": "oklch(0.2445 0.0134 59.75)", "--m3-surface-container-high": "oklch(0.2859 0.0129 59.92)", "--m3-surface-container-highest": "oklch(0.3298 0.0125 60.05)" }, "[data-palette=\"rose\"]:not(.light):not(.dark)": { "--m3-primary": "oklch(0.8349 0.0914 19.31)", "--m3-surface-tint": "oklch(0.8349 0.0914 19.31)", "--m3-on-primary": "oklch(0.3251 0.1303 12.44)", "--m3-primary-container": "oklch(0.4103 0.1337 14)", "--m3-on-primary-container": "oklch(0.9183 0.0417 24.12)", "--m3-secondary": "oklch(0.8303 0.0374 24.32)", "--m3-on-secondary": "oklch(0.3124 0.0361 19.34)", "--m3-secondary-container": "oklch(0.4005 0.034 19.88)", "--m3-on-secondary-container": "oklch(0.9163 0.0365 24.4)", "--m3-tertiary": "oklch(0.8367 0.0666 80.72)", "--m3-on-tertiary": "oklch(0.3171 0.0571 79.11)", "--m3-tertiary-container": "oklch(0.4044 0.0591 80.4)", "--m3-on-tertiary-container": "oklch(0.9184 0.046 78.87)", "--m3-error": "oklch(0.8345 0.0677 22.01)", "--m3-on-error": "oklch(0.3245 0.1092 28.01)", "--m3-error-container": "oklch(0.42 0.1473 28.14)", "--m3-on-error-container": "oklch(0.9221 0.0301 22.79)", "--m3-background": "oklch(0.1874 0.0124 21.71)", "--m3-on-background": "oklch(0.914 0.0137 36.05)", "--m3-surface": "oklch(0.1874 0.0124 21.71)", "--m3-on-surface": "oklch(0.914 0.0137 36.05)", "--m3-surface-variant": "oklch(0.3981 0.0174 25.01)", "--m3-on-surface-variant": "oklch(0.8287 0.0178 29.51)", "--m3-outline": "oklch(0.6566 0.0153 25.3)", "--m3-outline-variant": "oklch(0.3981 0.0174 25.01)", "--m3-shadow": "oklch(0 0 0)", "--m3-scrim": "oklch(0 0 0)", "--m3-inverse-surface": "oklch(0.914 0.0137 36.05)", "--m3-inverse-on-surface": "oklch(0.3107 0.0113 29.35)", "--m3-inverse-primary": "oklch(0.4955 0.1305 15)", "--m3-primary-fixed": "oklch(0.9183 0.0417 24.12)", "--m3-on-primary-fixed": "oklch(0.242 0.0976 7.38)", "--m3-primary-fixed-dim": "oklch(0.8349 0.0914 19.31)", "--m3-on-primary-fixed-variant": "oklch(0.4103 0.1337 14)", "--m3-secondary-fixed": "oklch(0.9163 0.0365 24.4)", "--m3-on-secondary-fixed": "oklch(0.2272 0.0347 14.94)", "--m3-secondary-fixed-dim": "oklch(0.8303 0.0374 24.32)", "--m3-on-secondary-fixed-variant": "oklch(0.4005 0.034 19.88)", "--m3-tertiary-fixed": "oklch(0.9184 0.046 78.87)", "--m3-on-tertiary-fixed": "oklch(0.2323 0.0487 79.9)", "--m3-tertiary-fixed-dim": "oklch(0.8367 0.0666 80.72)", "--m3-on-tertiary-fixed-variant": "oklch(0.4044 0.0591 80.4)", "--m3-surface-dim": "oklch(0.1874 0.0124 21.71)", "--m3-surface-bright": "oklch(0.346 0.011 29.4)", "--m3-surface-container-lowest": "oklch(0.1645 0.0128 21.52)", "--m3-surface-container-low": "oklch(0.2265 0.01 25)", "--m3-surface-container": "oklch(0.2445 0.0134 19.75)", "--m3-surface-container-high": "oklch(0.2859 0.0129 19.92)", "--m3-surface-container-highest": "oklch(0.3298 0.0125 20.05)" } }, "@media (width < 840px)": { ":root": { "--m3-display-lg-size": "2.8125rem", "--m3-display-lg-line": "3.25rem", "--m3-display-lg-tracking": "0rem", "--m3-display-md-size": "2.25rem", "--m3-display-md-line": "2.75rem", "--m3-display-md-tracking": "0rem", "--m3-display-sm-size": "2rem", "--m3-display-sm-line": "2.5rem", "--m3-display-sm-tracking": "0rem", "--m3-headline-lg-size": "1.75rem", "--m3-headline-lg-line": "2.25rem", "--m3-headline-lg-tracking": "0rem", "--m3-headline-md-size": "1.5rem", "--m3-headline-md-line": "2rem", "--m3-headline-md-tracking": "0rem", "--m3-headline-sm-size": "1.375rem", "--m3-headline-sm-line": "1.75rem", "--m3-headline-sm-tracking": "0rem" } }, "@media (prefers-reduced-motion: reduce)": { ":root": { "--m3-spring-spatial-fast": "var(--m3-ease-linear)", "--m3-spring-spatial-fast-duration": "1ms", "--m3-spring-spatial-default": "var(--m3-ease-linear)", "--m3-spring-spatial-default-duration": "1ms", "--m3-spring-spatial-slow": "var(--m3-ease-linear)", "--m3-spring-spatial-slow-duration": "1ms", "--m3-spring-effects-fast": "var(--m3-ease-linear)", "--m3-spring-effects-fast-duration": "1ms", "--m3-spring-effects-default": "var(--m3-ease-linear)", "--m3-spring-effects-default-duration": "1ms", "--m3-spring-effects-slow": "var(--m3-ease-linear)", "--m3-spring-effects-slow-duration": "1ms" }, ".m3-wave, .m3-wave-thick": { "animation": "none" }, ".m3-circular-progress-indeterminate": { "animation": "none", "stroke-dasharray": "25 75", "stroke-dashoffset": "0" }, ".m3-loading-indicator-shape": { "animation": "none", "clip-path": "var(--m3-loading-shape-1)" }, ".m3-carousel [data-slot=\"carousel-item\"]": { "transition": "none" } }, "@media (width >= 600px)": { ":root": { "--m3-grid-columns": "8", "--m3-grid-gutter": "16px", "--m3-grid-margin": "32px", "--m3-grid-max-width": "none" } }, "@media (width >= 840px)": { ":root": { "--m3-grid-columns": "12", "--m3-grid-gutter": "24px", "--m3-grid-margin": "24px", "--m3-grid-max-width": "none" } }, "@media (width >= 1200px)": { ":root": { "--m3-grid-columns": "12", "--m3-grid-gutter": "24px", "--m3-grid-margin": "200px", "--m3-grid-max-width": "none" } }, "@media (width >= 1600px)": { ":root": { "--m3-grid-columns": "12", "--m3-grid-gutter": "24px", "--m3-grid-margin": "24px", "--m3-grid-max-width": "1176px" } }, "@import \"tw-animate-css\"": {}, "@custom-variant dark": { "&:where(.dark, .dark *)": { "@slot": {} }, "@media (prefers-color-scheme: dark)": { "&:where(:root:not(.light):not(.dark), :root:not(.light):not(.dark) *)": { "@slot": {} } } }, "@utility m3-grid": { "display": "grid", "grid-template-columns": "repeat(var(--m3-grid-columns), minmax(0, 1fr))", "gap": "var(--m3-grid-gutter)", "padding-inline": "var(--m3-grid-margin)", "max-width": "var(--m3-grid-max-width)", "margin-inline": "auto" }, "@utility m3-state-layer": { "position": "relative", "&::after": { "content": "\"\"", "position": "absolute", "inset": "0", "border-radius": "inherit", "background-color": "currentColor", "opacity": "0", "pointer-events": "none", "transition": "opacity var(--m3-spring-effects-fast-duration)\n var(--m3-spring-effects-fast)" }, "&:hover:not(:disabled)::after": { "opacity": "var(--m3-state-hover)" }, "&:focus-visible::after": { "opacity": "var(--m3-state-focus)" }, "&:active:not(:disabled)::after": { "opacity": "var(--m3-state-pressed)" } }, "@utility m3-wave": { "mask-image": "url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2212%22%20viewBox%3D%220%200%2040%2012%22%3E%3Cpath%20d%3D%22M0%2C3%20C3.333%2C3%206.667%2C4.429%2010%2C6%20C13.333%2C7.571%2016.667%2C9%2020%2C9%20C23.333%2C9%2026.667%2C7.571%2030%2C6%20C33.333%2C4.429%2036.667%2C3%2040%2C3%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22butt%22%2F%3E%3C%2Fsvg%3E\")", "mask-size": "40px 12px", "mask-repeat": "repeat-x", "mask-position": "0 center", "animation": "m3-wave-travel 1.2s linear infinite" }, "@utility m3-wave-thick": { "mask-image": "url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2212%22%20viewBox%3D%220%200%2040%2012%22%3E%3Cpath%20d%3D%22M0%2C3%20C3.333%2C3%206.667%2C4.429%2010%2C6%20C13.333%2C7.571%2016.667%2C9%2020%2C9%20C23.333%2C9%2026.667%2C7.571%2030%2C6%20C33.333%2C4.429%2036.667%2C3%2040%2C3%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%228%22%20stroke-linecap%3D%22butt%22%2F%3E%3C%2Fsvg%3E\")", "mask-size": "40px 12px", "mask-repeat": "repeat-x", "mask-position": "0 center", "animation": "m3-wave-travel 1.2s linear infinite" }, "@keyframes m3-wave-travel": { "to": { "mask-position": "-40px center" } }, "@utility m3-circular-progress-indeterminate": { "transform-origin": "center", "animation": "m3-circular-progress-rotate 1.4s linear infinite,\n m3-circular-progress-dash 1.4s var(--m3-ease-standard) infinite" }, "@utility m3-circular-progress-track-transition": { "transition-property": "stroke-dasharray, stroke-dashoffset", "transition-duration": "var(--m3-spring-effects-default-duration),\n var(--m3-spring-spatial-default-duration)", "transition-timing-function": "var(--m3-spring-effects-default),\n var(--m3-spring-spatial-default)" }, "@keyframes m3-circular-progress-rotate": { "to": { "transform": "rotate(360deg)" } }, "@keyframes m3-circular-progress-dash": { "0%": { "stroke-dasharray": "8 92", "stroke-dashoffset": "0" }, "50%": { "stroke-dasharray": "60 40", "stroke-dashoffset": "-20" }, "100%": { "stroke-dasharray": "8 92", "stroke-dashoffset": "-100" } }, "@utility m3-loading-indicator-shape": { "--m3-loading-shape-1": "polygon(46% 7.5%, 50.7% 5.3%, 54.8% 8.6%, 57.7% 13.3%, 61.7% 16.7%, 66.9% 15.3%, 72% 13.3%, 77.2% 14.2%, 78.5% 19.2%, 78.1% 24.7%, 79.4% 29.8%, 84.4% 31.8%, 89.7% 33.1%, 93.3% 36.8%, 91.4% 41.7%, 87.8% 45.8%, 85.8% 50.7%, 88.7% 55.2%, 92.3% 59.4%, 92.9% 64.5%, 88.4% 67.3%, 83.1% 68.5%, 78.6% 71.3%, 78.2% 76.7%, 78.6% 82.1%, 76% 86.6%, 70.8% 86.2%, 65.7% 84.2%, 60.4% 83.7%, 57% 87.9%, 54% 92.5%, 49.3% 94.7%, 45.2% 91.4%, 42.3% 86.7%, 38.3% 83.3%, 33.1% 84.7%, 28% 86.7%, 22.8% 85.8%, 21.5% 80.8%, 21.9% 75.3%, 20.6% 70.2%, 15.6% 68.2%, 10.3% 66.9%, 6.7% 63.2%, 8.6% 58.3%, 12.2% 54.2%, 14.2% 49.3%, 11.3% 44.8%, 7.7% 40.6%, 7.1% 35.5%, 11.6% 32.7%, 16.9% 31.5%, 21.4% 28.7%, 21.8% 23.3%, 21.4% 17.9%, 24% 13.4%, 29.2% 13.8%, 34.3% 15.8%, 39.6% 16.3%, 43% 12.1%)", "--m3-loading-shape-2": "polygon(44.3% 7%, 48.8% 5.8%, 53.5% 6.2%, 57.9% 8.1%, 61.7% 10.9%, 66.1% 12.6%, 70.8% 13%, 75.4% 14.1%, 79.4% 16.6%, 82.3% 20.3%, 84% 24.7%, 85.3% 29.2%, 88% 33.1%, 91.4% 36.4%, 93.8% 40.4%, 94.7% 45%, 94.1% 49.7%, 92.1% 54%, 90.7% 58.5%, 90.8% 63.2%, 91% 67.9%, 89.7% 72.4%, 87% 76.3%, 83.2% 79.1%, 78.8% 81%, 75.2% 83.9%, 72.5% 87.8%, 69.2% 91.2%, 65% 93.4%, 60.4% 94.1%, 55.7% 93.3%, 51.2% 92.3%, 46.5% 92.6%, 41.9% 93.9%, 37.2% 93.9%, 32.7% 92.5%, 29% 89.6%, 26.2% 85.8%, 23.1% 82.3%, 18.9% 80%, 14.8% 77.8%, 11.5% 74.4%, 9.5% 70.2%, 8.9% 65.5%, 9.4% 60.8%, 8.7% 56.1%, 6.7% 51.9%, 5.4% 47.3%, 5.6% 42.6%, 7.3% 38.2%, 10.3% 34.6%, 13.5% 31.2%, 15.5% 26.9%, 16.7% 22.3%, 19.1% 18.3%, 22.6% 15.2%, 26.9% 13.3%, 31.6% 12.9%, 36.2% 11.9%, 40.3% 9.5%)", "--m3-loading-shape-3": "polygon(43.5% 7.9%, 47.9% 6.7%, 52.5% 6.8%, 56.8% 8.1%, 60.7% 10.5%, 64.4% 13.2%, 68.1% 15.9%, 71.8% 18.6%, 75.5% 21.2%, 79.3% 23.8%, 83.1% 26.4%, 86.8% 29%, 90.4% 31.8%, 93% 35.5%, 94.5% 39.8%, 94.6% 44.4%, 93.4% 48.8%, 91.9% 53.1%, 90.4% 57.4%, 88.9% 61.7%, 87.4% 66.1%, 86.1% 70.4%, 84.7% 74.8%, 83.3% 79.1%, 81.5% 83.3%, 78.5% 86.8%, 74.7% 89.3%, 70.4% 90.6%, 65.8% 90.8%, 61.2% 90.7%, 56.7% 90.7%, 52.1% 90.6%, 47.5% 90.6%, 43% 90.7%, 38.4% 90.7%, 33.8% 90.8%, 29.3% 90.5%, 24.9% 89.1%, 21.2% 86.6%, 18.3% 83%, 16.6% 78.8%, 15.2% 74.4%, 13.8% 70.1%, 12.4% 65.7%, 11% 61.4%, 9.5% 57.1%, 8% 52.8%, 6.5% 48.4%, 5.4% 44%, 5.6% 39.5%, 7.1% 35.2%, 9.9% 31.6%, 13.5% 28.8%, 17.3% 26.2%, 21% 23.6%, 24.8% 21%, 28.5% 18.4%, 32.2% 15.7%, 35.9% 13%, 39.6% 10.3%)", "--m3-loading-shape-4": "polygon(45.4% 12.1%, 49.3% 11.1%, 53.3% 10.6%, 57.4% 10.6%, 61.5% 11.1%, 65.4% 12%, 69.2% 13.4%, 72.8% 15.3%, 76.2% 17.6%, 79.3% 20.3%, 82% 23.3%, 84.4% 26.6%, 86.3% 30.2%, 87.8% 34%, 88.8% 37.9%, 89.4% 42%, 89.4% 46%, 89% 50.1%, 88.1% 54%, 86.7% 57.9%, 84.9% 61.5%, 82.6% 64.9%, 80% 68%, 77.1% 70.9%, 74.2% 73.8%, 71.3% 76.7%, 68.5% 79.5%, 65.4% 82.2%, 62% 84.5%, 58.4% 86.4%, 54.6% 87.9%, 50.7% 88.9%, 46.7% 89.4%, 42.6% 89.4%, 38.5% 88.9%, 34.6% 88%, 30.8% 86.6%, 27.2% 84.7%, 23.8% 82.4%, 20.7% 79.7%, 18% 76.7%, 15.6% 73.4%, 13.7% 69.8%, 12.2% 66%, 11.2% 62.1%, 10.6% 58%, 10.6% 54%, 11% 49.9%, 11.9% 46%, 13.3% 42.1%, 15.1% 38.5%, 17.4% 35.1%, 20% 32%, 22.9% 29.1%, 25.8% 26.2%, 28.7% 23.3%, 31.5% 20.5%, 34.6% 17.8%, 38% 15.5%, 41.6% 13.6%)", "--m3-loading-shape-5": "polygon(44.9% 7.4%, 49.1% 5.3%, 53.7% 6.3%, 57.3% 9.3%, 60.9% 12.5%, 64.7% 15.2%, 69.4% 15.8%, 74.2% 16.1%, 78.9% 16.7%, 82.6% 19.5%, 83.8% 24.1%, 84.1% 28.8%, 84.4% 33.5%, 86.4% 37.8%, 89.5% 41.3%, 92.6% 44.9%, 94.7% 49.1%, 93.7% 53.7%, 90.7% 57.3%, 87.5% 60.9%, 84.8% 64.7%, 84.2% 69.4%, 83.9% 74.2%, 83.3% 78.9%, 80.5% 82.6%, 75.9% 83.8%, 71.2% 84.1%, 66.5% 84.4%, 62.2% 86.4%, 58.7% 89.5%, 55.1% 92.6%, 50.9% 94.7%, 46.3% 93.7%, 42.7% 90.7%, 39.1% 87.5%, 35.3% 84.8%, 30.6% 84.2%, 25.8% 83.9%, 21.1% 83.3%, 17.4% 80.5%, 16.2% 75.9%, 15.9% 71.2%, 15.6% 66.5%, 13.6% 62.2%, 10.5% 58.7%, 7.4% 55.1%, 5.3% 50.9%, 6.3% 46.3%, 9.3% 42.7%, 12.5% 39.1%, 15.2% 35.3%, 15.8% 30.6%, 16.1% 25.8%, 16.7% 21.1%, 19.5% 17.4%, 24.1% 16.2%, 28.8% 15.9%, 33.5% 15.6%, 37.8% 13.6%, 41.3% 10.5%)", "--m3-loading-shape-6": "polygon(47.3% 17.3%, 51.7% 17.4%, 56.1% 16.5%, 60.2% 14.8%, 64.5% 13.5%, 68.9% 13.2%, 73.2% 14%, 77.3% 15.8%, 80.8% 18.5%, 83.7% 21.9%, 85.7% 25.8%, 86.7% 30.2%, 86.6% 34.6%, 85.5% 38.9%, 83.8% 43%, 82.7% 47.3%, 82.6% 51.7%, 83.5% 56.1%, 85.2% 60.2%, 86.5% 64.5%, 86.8% 68.9%, 86% 73.2%, 84.2% 77.3%, 81.5% 80.8%, 78.1% 83.7%, 74.2% 85.7%, 69.8% 86.7%, 65.4% 86.6%, 61.1% 85.5%, 57% 83.8%, 52.7% 82.7%, 48.3% 82.6%, 43.9% 83.5%, 39.8% 85.2%, 35.5% 86.5%, 31.1% 86.8%, 26.8% 86%, 22.7% 84.2%, 19.2% 81.5%, 16.3% 78.1%, 14.3% 74.2%, 13.3% 69.8%, 13.4% 65.4%, 14.5% 61.1%, 16.2% 57%, 17.3% 52.7%, 17.4% 48.3%, 16.5% 43.9%, 14.8% 39.8%, 13.5% 35.5%, 13.2% 31.1%, 14% 26.8%, 15.8% 22.7%, 18.5% 19.2%, 21.9% 16.3%, 25.8% 14.3%, 30.2% 13.3%, 34.6% 13.4%, 38.9% 14.5%, 43% 16.2%)", "--m3-loading-shape-7": "polygon(52.4% 13.2%, 56.3% 11.9%, 60.3% 11.1%, 64.3% 10.6%, 68.4% 10.6%, 72.5% 11.2%, 76.4% 12.4%, 80% 14.3%, 83.2% 16.8%, 85.7% 20%, 87.6% 23.6%, 88.8% 27.5%, 89.4% 31.6%, 89.4% 35.7%, 88.9% 39.7%, 88.1% 43.7%, 86.8% 47.6%, 85.3% 51.4%, 83.5% 55.1%, 81.5% 58.6%, 79.3% 62%, 76.8% 65.3%, 74.2% 68.4%, 71.4% 71.4%, 68.4% 74.2%, 65.3% 76.8%, 62% 79.3%, 58.6% 81.5%, 55.1% 83.5%, 51.4% 85.3%, 47.6% 86.8%, 43.7% 88.1%, 39.7% 88.9%, 35.7% 89.4%, 31.6% 89.4%, 27.5% 88.8%, 23.6% 87.6%, 20% 85.7%, 16.8% 83.2%, 14.3% 80%, 12.4% 76.4%, 11.2% 72.5%, 10.6% 68.4%, 10.6% 64.3%, 11.1% 60.3%, 11.9% 56.3%, 13.2% 52.4%, 14.7% 48.6%, 16.5% 44.9%, 18.5% 41.4%, 20.7% 38%, 23.2% 34.7%, 25.8% 31.6%, 28.6% 28.6%, 31.6% 25.8%, 34.7% 23.2%, 38% 20.7%, 41.4% 18.5%, 44.9% 16.5%, 48.6% 14.7%)", "clip-path": "var(--m3-loading-shape-1)", "animation": "m3-loading-indicator-morph 2.8s infinite" }, "@keyframes m3-loading-indicator-morph": { "0%, 100%": { "clip-path": "var(--m3-loading-shape-1)", "animation-timing-function": "cubic-bezier(0.2, 0, 0, 1)" }, "14.2857%": { "clip-path": "var(--m3-loading-shape-2)", "animation-timing-function": "cubic-bezier(0.2, 0, 0, 1)" }, "28.5714%": { "clip-path": "var(--m3-loading-shape-3)", "animation-timing-function": "cubic-bezier(0.2, 0, 0, 1)" }, "42.8571%": { "clip-path": "var(--m3-loading-shape-4)", "animation-timing-function": "cubic-bezier(0.2, 0, 0, 1)" }, "57.1429%": { "clip-path": "var(--m3-loading-shape-5)", "animation-timing-function": "cubic-bezier(0.2, 0, 0, 1)" }, "71.4286%": { "clip-path": "var(--m3-loading-shape-7)", "animation-timing-function": "cubic-bezier(0.2, 0, 0, 1)" }, "85.7143%": { "clip-path": "var(--m3-loading-shape-6)", "animation-timing-function": "cubic-bezier(0.2, 0, 0, 1)" } }, "@utility m3-connected-button-group": { "&[data-size=\"xs\"]": { "--m3-button-group-inner-radius": "4px", "--m3-button-group-state-radius": "12px", "--m3-button-group-outer-radius": "16px" }, "&[data-size=\"sm\"], &[data-size=\"default\"]": { "--m3-button-group-inner-radius": "8px", "--m3-button-group-state-radius": "12px", "--m3-button-group-outer-radius": "20px" }, "&[data-size=\"lg\"]": { "--m3-button-group-inner-radius": "8px", "--m3-button-group-state-radius": "16px", "--m3-button-group-outer-radius": "28px" }, "&[data-size=\"xl\"]": { "--m3-button-group-inner-radius": "16px", "--m3-button-group-state-radius": "28px", "--m3-button-group-outer-radius": "48px" }, "&[data-size=\"2xl\"]": { "--m3-button-group-inner-radius": "20px", "--m3-button-group-state-radius": "32px", "--m3-button-group-outer-radius": "68px" }, "& > [data-slot=\"button\"]": { "border-radius": "var(--m3-button-group-inner-radius)" }, "& > [data-slot=\"button\"]:is(:hover, :focus-visible, :active):not(:disabled)": { "border-radius": "var(--m3-button-group-state-radius)" }, "&[data-shape=\"round\"][data-orientation=\"horizontal\"] > [data-slot=\"button\"]:first-child": { "border-top-left-radius": "var(--m3-button-group-outer-radius)", "border-bottom-left-radius": "var(--m3-button-group-outer-radius)" }, "&[data-shape=\"round\"][data-orientation=\"horizontal\"] > [data-slot=\"button\"]:last-child": { "border-top-right-radius": "var(--m3-button-group-outer-radius)", "border-bottom-right-radius": "var(--m3-button-group-outer-radius)" }, "&[data-shape=\"round\"][data-orientation=\"vertical\"] > [data-slot=\"button\"]:first-child": { "border-top-left-radius": "var(--m3-button-group-outer-radius)", "border-top-right-radius": "var(--m3-button-group-outer-radius)" }, "&[data-shape=\"round\"][data-orientation=\"vertical\"] > [data-slot=\"button\"]:last-child": { "border-bottom-left-radius": "var(--m3-button-group-outer-radius)", "border-bottom-right-radius": "var(--m3-button-group-outer-radius)" } }, "@utility m3-split-button": { "&[data-slot=\"button-group\"]": { "display": "flex", "align-items": "center", "gap": "2px" }, "&[data-size=\"xs\"]": { "--m3-split-button-outer-radius": "16px", "--m3-split-button-inner-radius": "4px", "--m3-split-button-state-radius": "8px", "--m3-split-button-trigger-width": "48px", "--m3-split-button-action-gap": "4px", "--m3-split-button-action-padding": "12px", "--m3-split-button-action-icon-size": "20px", "--m3-split-button-trigger-icon-size": "22px" }, "&[data-size=\"sm\"], &[data-size=\"default\"]": { "--m3-split-button-outer-radius": "20px", "--m3-split-button-inner-radius": "4px", "--m3-split-button-state-radius": "12px", "--m3-split-button-trigger-width": "48px", "--m3-split-button-action-gap": "8px", "--m3-split-button-action-padding": "16px", "--m3-split-button-action-icon-size": "20px", "--m3-split-button-trigger-icon-size": "22px" }, "&[data-size=\"lg\"]": { "--m3-split-button-outer-radius": "28px", "--m3-split-button-inner-radius": "4px", "--m3-split-button-state-radius": "12px", "--m3-split-button-trigger-width": "56px", "--m3-split-button-action-gap": "8px", "--m3-split-button-action-padding": "24px", "--m3-split-button-action-icon-size": "24px", "--m3-split-button-trigger-icon-size": "26px" }, "&[data-size=\"xl\"]": { "--m3-split-button-outer-radius": "48px", "--m3-split-button-inner-radius": "8px", "--m3-split-button-state-radius": "20px", "--m3-split-button-trigger-width": "96px", "--m3-split-button-action-gap": "12px", "--m3-split-button-action-padding": "48px", "--m3-split-button-action-icon-size": "32px", "--m3-split-button-trigger-icon-size": "38px" }, "&[data-size=\"2xl\"]": { "--m3-split-button-outer-radius": "68px", "--m3-split-button-inner-radius": "12px", "--m3-split-button-state-radius": "20px", "--m3-split-button-trigger-width": "136px", "--m3-split-button-action-gap": "16px", "--m3-split-button-action-padding": "64px", "--m3-split-button-action-icon-size": "40px", "--m3-split-button-trigger-icon-size": "50px" }, "&[data-slot=\"button-group\"] > [data-split-button-segment=\"action\"]": { "gap": "var(--m3-split-button-action-gap)", "padding-inline": "var(--m3-split-button-action-padding)", "border-radius": "var(--m3-split-button-outer-radius)\n var(--m3-split-button-inner-radius)\n var(--m3-split-button-inner-radius)\n var(--m3-split-button-outer-radius)" }, "&[data-slot=\"button-group\"] > [data-split-button-segment=\"trigger\"]": { "width": "var(--m3-split-button-trigger-width)", "min-width": "var(--m3-split-button-trigger-width)", "padding-inline": "0", "border-radius": "var(--m3-split-button-inner-radius)\n var(--m3-split-button-outer-radius)\n var(--m3-split-button-outer-radius)\n var(--m3-split-button-inner-radius)" }, "&[data-slot=\"button-group\"] > [data-split-button-segment=\"action\"]:is(:hover, :active):not(:disabled)": { "border-radius": "var(--m3-split-button-outer-radius)\n var(--m3-split-button-state-radius)\n var(--m3-split-button-state-radius)\n var(--m3-split-button-outer-radius)" }, "&[data-slot=\"button-group\"] > [data-split-button-segment=\"trigger\"]:is( :hover, :active, [data-split-button-pressing] ):not(:disabled)": { "border-radius": "var(--m3-split-button-state-radius)\n var(--m3-split-button-outer-radius)\n var(--m3-split-button-outer-radius)\n var(--m3-split-button-state-radius)" }, "&[data-slot=\"button-group\"][data-variant=\"connected\"] > [data-split-button-segment=\"action\"]:focus-visible": { "border-radius": "var(--m3-split-button-outer-radius)\n var(--m3-split-button-inner-radius)\n var(--m3-split-button-inner-radius)\n var(--m3-split-button-outer-radius)" }, "&[data-slot=\"button-group\"][data-variant=\"connected\"] > [data-split-button-segment=\"trigger\"]:focus-visible": { "border-radius": "var(--m3-split-button-inner-radius)\n var(--m3-split-button-outer-radius)\n var(--m3-split-button-outer-radius)\n var(--m3-split-button-inner-radius)" }, "&[data-slot=\"button-group\"][data-variant=\"connected\"] > [data-split-button-segment=\"trigger\"][data-popup-open]:not( :active, [data-split-button-pressing] )": { "border-radius": "var(--m3-split-button-outer-radius)" }, "&[data-slot=\"button-group\"] > [data-split-button-segment]:focus-visible": { "z-index": "10" }, "&[data-slot=\"button-group\"] > [data-split-button-segment=\"action\"] > svg:not([class*=\"size-\"])": { "width": "var(--m3-split-button-action-icon-size)", "height": "var(--m3-split-button-action-icon-size)" }, "&[data-slot=\"button-group\"] > [data-split-button-segment=\"trigger\"] > svg:not([class*=\"size-\"])": { "width": "var(--m3-split-button-trigger-icon-size)", "height": "var(--m3-split-button-trigger-icon-size)" } }, "@utility m3-carousel": { "container-type": "inline-size", "& [data-slot=\"carousel-content\"]": { "height": "221px", "gap": "8px", "padding": "8px 16px" }, "& [data-slot=\"carousel-item\"]": { "height": "205px", "flex-basis": "56px", "border-radius": "28px", "transition-property": "flex-basis", "transition-duration": "var(--m3-spring-effects-default-duration)", "transition-timing-function": "var(--m3-spring-effects-default)" }, "&[data-layout=\"standard\"] [data-slot=\"carousel-content\"]": { "height": "220px" }, "&[data-layout=\"standard\"] [data-slot=\"carousel-item\"]": { "height": "204px" }, "&[data-layout=\"standard\"] [data-slot=\"carousel-item\"]:nth-child(5n + 1)": { "flex-basis": "362.224px" }, "&[data-layout=\"standard\"] [data-slot=\"carousel-item\"]:nth-child(5n + 2)": { "flex-basis": "270.674px" }, "&[data-layout=\"standard\"] [data-slot=\"carousel-item\"]:nth-child(5n + 3)": { "flex-basis": "204px" }, "&[data-layout=\"standard\"] [data-slot=\"carousel-item\"]:nth-child(5n + 4)": { "flex-basis": "153.249px" }, "&[data-layout=\"standard\"] [data-slot=\"carousel-item\"]:nth-child(5n)": { "flex-basis": "116px" }, "&[data-layout=\"multi-browse\"] [data-slot=\"carousel-item\"][data-selected]": { "flex-basis": "188px" }, "&[data-layout=\"multi-browse\"] [data-slot=\"carousel-item\"][data-selected] + [data-slot=\"carousel-item\"]": { "flex-basis": "120px" }, "&[data-layout=\"hero\"] [data-slot=\"carousel-item\"][data-selected]": { "flex-basis": "316px" }, "&[data-layout=\"hero\"][data-align=\"center\"] [data-slot=\"carousel-item\"][data-selected]": { "flex-basis": "252px" }, "&[data-layout=\"uncontained\"] [data-slot=\"carousel-item\"]": { "flex-basis": "154px" }, "&[data-layout=\"full-screen\"] [data-slot=\"carousel-viewport\"], &[data-layout=\"full-screen\"] [data-slot=\"carousel-content\"]": { "height": "100%" }, "&[data-layout=\"full-screen\"] [data-slot=\"carousel-content\"]": { "padding": "0" }, "&[data-layout=\"full-screen\"] [data-slot=\"carousel-item\"]": { "height": "100%", "flex-basis": "100%" } }, "@container (min-width: 560px)": { ".m3-carousel [data-slot=\"carousel-content\"]": { "height": "220px" }, ".m3-carousel [data-slot=\"carousel-item\"]": { "height": "204px" }, ".m3-carousel[data-layout=\"multi-browse\"] [data-slot=\"carousel-item\"][data-selected], .m3-carousel[data-layout=\"multi-browse\"] [data-slot=\"carousel-item\"][data-selected] + [data-slot=\"carousel-item\"]": { "flex-basis": "184px" }, ".m3-carousel[data-layout=\"multi-browse\"] [data-slot=\"carousel-item\"][data-selected] + [data-slot=\"carousel-item\"] + [data-slot=\"carousel-item\"]": { "flex-basis": "120px" }, ".m3-carousel[data-layout=\"hero\"] [data-slot=\"carousel-item\"][data-selected], .m3-carousel[data-layout=\"hero\"] [data-slot=\"carousel-item\"][data-selected] + [data-slot=\"carousel-item\"]": { "flex-basis": "184px" }, ".m3-carousel[data-layout=\"hero\"] [data-slot=\"carousel-item\"][data-selected] + [data-slot=\"carousel-item\"] + [data-slot=\"carousel-item\"]": { "flex-basis": "120px" }, ".m3-carousel[data-layout=\"uncontained\"] [data-slot=\"carousel-item\"]": { "flex-basis": "162.667px" } }, "@layer base": { "*": { "@apply border-border outline-ring/50": {} }, "html": { "@apply font-sans": {}, "font-variation-settings": "\"GRAD\" 0", "color-scheme": "light dark" }, "body": { "@apply bg-background text-foreground text-m3-body-lg": {} } } }, "docs": "materialcn's tokens are now in your stylesheet. Roboto Flex is installed but not loaded: add `import \"@fontsource-variable/roboto-flex\"` to your entry point, or point `--m3-font-plain` and `--m3-font-brand` at a font of your own." }, { "name": "accordion", "type": "registry:ui", "title": "Accordion", "description": "Expandable sections on the M3 motion springs.", "categories": [ "disclosure" ], "dependencies": [ "@base-ui/react@^1.7.0", "lucide-react@^1.33.0" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/accordion.tsx", "type": "registry:ui" } ] }, { "name": "alert", "type": "registry:ui", "title": "Alert", "description": "An inline message in four severities, mapped onto the closest M3 container roles.", "categories": [ "feedback" ], "dependencies": [ "class-variance-authority@^0.7.1", "lucide-react@^1.33.0" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/icon.json", "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/alert.tsx", "type": "registry:ui" }, { "path": "src/components/ui/alert-variants.ts", "type": "registry:ui" }, { "path": "src/components/ui/alert.types.ts", "type": "registry:ui" } ] }, { "name": "avatar", "type": "registry:ui", "title": "Avatar", "description": "A circular image with an initials fallback.", "categories": [ "media" ], "dependencies": [ "@base-ui/react@^1.7.0" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/avatar.tsx", "type": "registry:ui" } ] }, { "name": "badge", "type": "registry:ui", "title": "Badge", "description": "Material chip geometry as a static label.", "categories": [ "display" ], "dependencies": [ "@base-ui/react@^1.7.0", "class-variance-authority@^0.7.1" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/badge.tsx", "type": "registry:ui" }, { "path": "src/components/ui/badge-variants.ts", "type": "registry:ui" } ] }, { "name": "bottom-app-bar", "type": "registry:ui", "title": "Bottom App Bar", "description": "The bottom app bar, with actions and an optional docked FAB.", "categories": [ "navigation" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/bottom-app-bar.tsx", "type": "registry:ui" } ] }, { "name": "breadcrumb", "type": "registry:ui", "title": "Breadcrumb", "description": "The shadcn breadcrumb primitives on the M3 type and color roles.", "categories": [ "navigation" ], "dependencies": [ "@base-ui/react@^1.7.0", "lucide-react@^1.33.0" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/breadcrumb.tsx", "type": "registry:ui" } ] }, { "name": "breadcrumbs", "type": "registry:ui", "title": "Breadcrumbs", "description": "A breadcrumb trail from a list of entries, collapsing the middle when it overflows.", "categories": [ "navigation" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/breadcrumb.json", "https://guillermo-rebolledo.github.io/materialcn/r/dropdown-menu.json", "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/breadcrumbs.tsx", "type": "registry:ui" }, { "path": "src/components/ui/breadcrumbs.types.ts", "type": "registry:ui" } ] }, { "name": "button", "type": "registry:ui", "title": "Button", "description": "The five Material button variants across five sizes, in round and square shapes, with the press morph and the loading state that keeps the button's size.", "categories": [ "actions" ], "dependencies": [ "@base-ui/react@^1.7.0", "class-variance-authority@^0.7.1" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/button-group-context.json", "https://guillermo-rebolledo.github.io/materialcn/r/button-variants.json", "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/button.tsx", "type": "registry:ui" } ] }, { "name": "button-group", "type": "registry:ui", "title": "Button Group", "description": "Connected and standard groups of buttons, with the kit's 2dp separation and first/middle/last corner geometry.", "categories": [ "actions" ], "dependencies": [ "class-variance-authority@^0.7.1" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/button-group-context.json", "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/button-group.tsx", "type": "registry:ui" }, { "path": "src/components/ui/button-group-variants.ts", "type": "registry:ui" } ] }, { "name": "button-group-context", "type": "registry:ui", "title": "Button Group Context", "description": "Carries a group's shape, size, and variant down to the buttons inside it.", "categories": [ "actions" ], "dependencies": [ "class-variance-authority@^0.7.1" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/button-variants.json" ], "files": [ { "path": "src/components/ui/button-group-context.ts", "type": "registry:ui" } ] }, { "name": "button-variants", "type": "registry:ui", "title": "Button Variants", "description": "The `cva` definition behind Button's variant, size, and shape props.", "categories": [ "actions" ], "dependencies": [ "class-variance-authority@^0.7.1" ], "files": [ { "path": "src/components/ui/button-variants.ts", "type": "registry:ui" } ] }, { "name": "calendar", "type": "registry:ui", "title": "Calendar", "description": "The Material date grid, for single dates and ranges.", "categories": [ "forms" ], "dependencies": [ "lucide-react@^1.33.0" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/button.json", "https://guillermo-rebolledo.github.io/materialcn/r/calendar-utils.json", "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/calendar.tsx", "type": "registry:ui" } ] }, { "name": "calendar-utils", "type": "registry:ui", "title": "Calendar Utilities", "description": "Date maths for the calendar and the date pickers, free of any date library.", "categories": [ "forms" ], "files": [ { "path": "src/components/ui/calendar-utils.ts", "type": "registry:ui" } ] }, { "name": "card", "type": "registry:ui", "title": "Card", "description": "Elevated, filled, and outlined cards on the M3 surface ramp.", "categories": [ "layout" ], "dependencies": [ "class-variance-authority@^0.7.1" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/card.tsx", "type": "registry:ui" }, { "path": "src/components/ui/card-variants.ts", "type": "registry:ui" } ] }, { "name": "carousel", "type": "registry:ui", "title": "Carousel", "description": "The Material carousel layouts — multi-browse, hero, uncontained, full-screen — sized by container query.", "categories": [ "display" ], "dependencies": [ "embla-carousel-react@^8.6.0", "lucide-react@^1.33.0" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/button.json", "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/carousel.tsx", "type": "registry:ui" }, { "path": "src/components/ui/carousel-context.ts", "type": "registry:ui" } ] }, { "name": "checkbox", "type": "registry:ui", "title": "Checkbox", "description": "The Material checkbox, including the indeterminate state.", "categories": [ "forms" ], "dependencies": [ "@base-ui/react@^1.7.0", "lucide-react@^1.33.0" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/checkbox.tsx", "type": "registry:ui" } ] }, { "name": "chip", "type": "registry:ui", "title": "Chip", "description": "Assist, filter, input, and suggestion chips, with selected, removable, and icon states.", "categories": [ "display" ], "dependencies": [ "@base-ui/react@^1.7.0", "lucide-react@^1.33.0" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/badge.json", "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/chip.tsx", "type": "registry:ui" } ] }, { "name": "circular-progress", "type": "registry:ui", "title": "Circular Progress", "description": "The circular progress indicator, determinate and indeterminate.", "categories": [ "feedback" ], "dependencies": [ "@base-ui/react@^1.7.0" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/circular-progress.tsx", "type": "registry:ui" } ] }, { "name": "date-picker", "type": "registry:ui", "title": "Date Picker", "description": "A text field with a docked date picker.", "categories": [ "forms" ], "dependencies": [ "@base-ui/react@^1.7.0", "lucide-react@^1.33.0" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/button.json", "https://guillermo-rebolledo.github.io/materialcn/r/calendar.json", "https://guillermo-rebolledo.github.io/materialcn/r/calendar-utils.json", "https://guillermo-rebolledo.github.io/materialcn/r/field.json", "https://guillermo-rebolledo.github.io/materialcn/r/input.json", "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/date-picker.tsx", "type": "registry:ui" } ] }, { "name": "date-picker-dialog", "type": "registry:ui", "title": "Date Picker Dialog", "description": "The modal date picker, with the calendar and text-entry modes.", "categories": [ "forms" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/button.json", "https://guillermo-rebolledo.github.io/materialcn/r/calendar.json", "https://guillermo-rebolledo.github.io/materialcn/r/calendar-utils.json", "https://guillermo-rebolledo.github.io/materialcn/r/dialog.json", "https://guillermo-rebolledo.github.io/materialcn/r/field.json", "https://guillermo-rebolledo.github.io/materialcn/r/input.json", "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/date-picker-dialog.tsx", "type": "registry:ui" } ] }, { "name": "dialog", "type": "registry:ui", "title": "Dialog", "description": "The Material dialog, basic and full-screen.", "categories": [ "overlays" ], "dependencies": [ "@base-ui/react@^1.7.0", "lucide-react@^1.33.0" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/button.json", "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/dialog.tsx", "type": "registry:ui" } ] }, { "name": "dropdown-menu", "type": "registry:ui", "title": "Menu", "description": "The Material menu: standard and vibrant items, leading icons, trailing text, submenus, and destructive actions.", "categories": [ "overlays" ], "dependencies": [ "@base-ui/react@^1.7.0", "class-variance-authority@^0.7.1", "lucide-react@^1.33.0" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/theme-context.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/dropdown-menu.tsx", "type": "registry:ui" }, { "path": "src/components/ui/dropdown-menu-variants.ts", "type": "registry:ui" } ] }, { "name": "fab", "type": "registry:ui", "title": "FAB", "description": "The floating action button in three sizes, plus the extended FAB, which requires a readable label.", "categories": [ "actions" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/button.json", "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/fab.tsx", "type": "registry:ui" } ] }, { "name": "fab-menu", "type": "registry:ui", "title": "FAB Menu", "description": "A FAB that expands into a column of labelled actions.", "categories": [ "actions" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/button.json", "https://guillermo-rebolledo.github.io/materialcn/r/fab.json", "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/fab-menu.tsx", "type": "registry:ui" }, { "path": "src/components/ui/fab-menu-context.ts", "type": "registry:ui" } ] }, { "name": "field", "type": "registry:ui", "title": "Field", "description": "The label, description, and error scaffolding shared by every form control.", "categories": [ "forms" ], "dependencies": [ "class-variance-authority@^0.7.1" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/label.json", "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/separator.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/field.tsx", "type": "registry:ui" } ] }, { "name": "icon", "type": "registry:ui", "title": "Icon", "description": "Sizes and optically aligns a lucide icon against the M3 type scale.", "categories": [ "media" ], "dependencies": [ "class-variance-authority@^0.7.1" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/icon.tsx", "type": "registry:ui" }, { "path": "src/components/ui/icon-variants.ts", "type": "registry:ui" } ] }, { "name": "image", "type": "registry:ui", "title": "Image", "description": "An image on the M3 shape scale, with aspect ratio, fallback, and loading states.", "categories": [ "media" ], "dependencies": [ "class-variance-authority@^0.7.1", "lucide-react@^1.33.0" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/icon.json", "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/image.tsx", "type": "registry:ui" }, { "path": "src/components/ui/image-variants.ts", "type": "registry:ui" }, { "path": "src/components/ui/image.types.ts", "type": "registry:ui" } ] }, { "name": "input", "type": "registry:ui", "title": "Input", "description": "The bare text input Field and TextField build on.", "categories": [ "forms" ], "dependencies": [ "@base-ui/react@^1.7.0" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/input.tsx", "type": "registry:ui" } ] }, { "name": "input-group", "type": "registry:ui", "title": "Input Group", "description": "An input with leading and trailing affixes inside one container.", "categories": [ "forms" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/input.json", "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/input-group.tsx", "type": "registry:ui" } ] }, { "name": "label", "type": "registry:ui", "title": "Label", "description": "A form label bound to its control.", "categories": [ "forms" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/label.tsx", "type": "registry:ui" } ] }, { "name": "link", "type": "registry:ui", "title": "Link", "description": "An inline link on the M3 type and color roles.", "categories": [ "navigation" ], "dependencies": [ "@base-ui/react@^1.7.0", "class-variance-authority@^0.7.1" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/link.tsx", "type": "registry:ui" }, { "path": "src/components/ui/link-variants.ts", "type": "registry:ui" } ] }, { "name": "list", "type": "registry:ui", "title": "List", "description": "Material list rows in three densities, with leading and trailing slots.", "categories": [ "display" ], "dependencies": [ "@base-ui/react@^1.7.0" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/list.tsx", "type": "registry:ui" } ] }, { "name": "loading-indicator", "type": "registry:ui", "title": "Loading Indicator", "description": "The M3 Expressive loading indicator, morphing through the kit's seven shapes.", "categories": [ "feedback" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/loading-indicator.tsx", "type": "registry:ui" } ] }, { "name": "navigation-bar", "type": "registry:ui", "title": "Navigation Bar", "description": "The bottom navigation bar, with the M3 Expressive active indicator.", "categories": [ "navigation" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/navigation-context.json", "https://guillermo-rebolledo.github.io/materialcn/r/tooltip.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/navigation-bar.tsx", "type": "registry:ui" } ] }, { "name": "navigation-context", "type": "registry:ui", "title": "Navigation Context", "description": "The selected destination, shared by the navigation bar and the rail.", "categories": [ "navigation" ], "files": [ { "path": "src/components/ui/navigation-context.ts", "type": "registry:ui" } ] }, { "name": "navigation-rail", "type": "registry:ui", "title": "Navigation Rail", "description": "The navigation rail, collapsed or expanded, for medium and larger windows.", "categories": [ "navigation" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/button.json", "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/navigation-bar.json", "https://guillermo-rebolledo.github.io/materialcn/r/navigation-context.json", "https://guillermo-rebolledo.github.io/materialcn/r/tooltip.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/navigation-rail.tsx", "type": "registry:ui" }, { "path": "src/components/ui/navigation-rail-context.ts", "type": "registry:ui" } ] }, { "name": "notification-badge", "type": "registry:ui", "title": "Notification Badge", "description": "The dot and numeric badges that sit over an icon, with `99+` overflow.", "categories": [ "display" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/notification-badge.tsx", "type": "registry:ui" } ] }, { "name": "pagination", "type": "registry:ui", "title": "Pagination", "description": "The shadcn pagination primitives on the M3 roles.", "categories": [ "navigation" ], "dependencies": [ "lucide-react@^1.33.0" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/button.json", "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/pagination.tsx", "type": "registry:ui" } ] }, { "name": "paginator", "type": "registry:ui", "title": "Paginator", "description": "A page control from a total and a current page, with the page-window logic.", "categories": [ "navigation" ], "dependencies": [ "lucide-react@^1.33.0" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/button.json", "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/pagination.json", "https://guillermo-rebolledo.github.io/materialcn/r/select.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/paginator.tsx", "type": "registry:ui" }, { "path": "src/components/ui/paginator-utils.ts", "type": "registry:ui" }, { "path": "src/components/ui/paginator.types.ts", "type": "registry:ui" } ] }, { "name": "palettes", "type": "registry:lib", "title": "Palettes", "description": "The alternate palettes shipped by the theme, as data for a palette picker.", "categories": [ "theme" ], "files": [ { "path": "src/lib/palettes.ts", "type": "registry:lib" } ] }, { "name": "progress", "type": "registry:ui", "title": "Progress", "description": "The linear progress indicator, determinate and indeterminate, with the M3 Expressive wave.", "categories": [ "feedback" ], "dependencies": [ "@base-ui/react@^1.7.0" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/progress.tsx", "type": "registry:ui" } ] }, { "name": "radio-group", "type": "registry:ui", "title": "Radio Group", "description": "Material radio buttons.", "categories": [ "forms" ], "dependencies": [ "@base-ui/react@^1.7.0" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/radio-group.tsx", "type": "registry:ui" } ] }, { "name": "rich-tooltip", "type": "registry:ui", "title": "Rich Tooltip", "description": "The rich tooltip: a title, body text, and optional actions.", "categories": [ "feedback" ], "dependencies": [ "@base-ui/react@^1.7.0" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/rich-tooltip.tsx", "type": "registry:ui" }, { "path": "src/components/ui/rich-tooltip-context.ts", "type": "registry:ui" } ] }, { "name": "search-bar", "type": "registry:ui", "title": "Search Bar", "description": "The Material search bar, with leading and trailing actions.", "categories": [ "forms" ], "dependencies": [ "lucide-react@^1.33.0" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/button.json", "https://guillermo-rebolledo.github.io/materialcn/r/input-group.json", "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/search-bar.tsx", "type": "registry:ui" }, { "path": "src/components/ui/search-bar-context.ts", "type": "registry:ui" } ] }, { "name": "search-view", "type": "registry:ui", "title": "Search View", "description": "The full-screen search surface a search bar expands into.", "categories": [ "forms" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/button.json", "https://guillermo-rebolledo.github.io/materialcn/r/list.json", "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/search-bar.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/search-view.tsx", "type": "registry:ui" }, { "path": "src/components/ui/search-view-context.ts", "type": "registry:ui" } ] }, { "name": "select", "type": "registry:ui", "title": "Select", "description": "A select styled to the Material menu.", "categories": [ "forms" ], "dependencies": [ "@base-ui/react@^1.7.0", "lucide-react@^1.33.0" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/select.tsx", "type": "registry:ui" } ] }, { "name": "separator", "type": "registry:ui", "title": "Separator", "description": "The Material divider, horizontal or vertical, full-width or inset.", "categories": [ "layout" ], "dependencies": [ "@base-ui/react@^1.7.0" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/separator.tsx", "type": "registry:ui" } ] }, { "name": "sheet", "type": "registry:ui", "title": "Sheet", "description": "Side and bottom sheets, modal or standard.", "categories": [ "overlays" ], "dependencies": [ "@base-ui/react@^1.7.0", "lucide-react@^1.33.0" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/button.json", "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/sheet.tsx", "type": "registry:ui" } ] }, { "name": "skeleton", "type": "registry:ui", "title": "Skeleton", "description": "Loading placeholders sized to the type scale role they stand in for.", "categories": [ "feedback" ], "dependencies": [ "class-variance-authority@^0.7.1" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/skeleton.tsx", "type": "registry:ui" }, { "path": "src/components/ui/skeleton-variants.ts", "type": "registry:ui" }, { "path": "src/components/ui/skeleton.types.ts", "type": "registry:ui" } ] }, { "name": "slider", "type": "registry:ui", "title": "Slider", "description": "The M3 Expressive slider, continuous or stepped, with the value label.", "categories": [ "forms" ], "dependencies": [ "@base-ui/react@^1.7.0" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/slider.tsx", "type": "registry:ui" } ] }, { "name": "split-button", "type": "registry:ui", "title": "Split Button", "description": "A primary action joined to a menu trigger, with the kit's asymmetric segment geometry.", "categories": [ "actions" ], "dependencies": [ "lucide-react@^1.33.0" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/button.json", "https://guillermo-rebolledo.github.io/materialcn/r/button-group.json", "https://guillermo-rebolledo.github.io/materialcn/r/dropdown-menu.json", "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/split-button.tsx", "type": "registry:ui" } ] }, { "name": "switch", "type": "registry:ui", "title": "Switch", "description": "The Material 3 switch, with the icon-in-thumb variants.", "categories": [ "forms" ], "dependencies": [ "@base-ui/react@^1.7.0" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/switch.tsx", "type": "registry:ui" } ] }, { "name": "tabs", "type": "registry:ui", "title": "Tabs", "description": "Primary and secondary tabs with the sliding active indicator.", "categories": [ "navigation" ], "dependencies": [ "@base-ui/react@^1.7.0", "class-variance-authority@^0.7.1" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/tabs.tsx", "type": "registry:ui" }, { "path": "src/components/ui/tabs-variants.ts", "type": "registry:ui" } ] }, { "name": "text-field", "type": "registry:ui", "title": "Text Field", "description": "The Material text field, filled and outlined, with the floating label, supporting text, and character counter.", "categories": [ "forms" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/field.json", "https://guillermo-rebolledo.github.io/materialcn/r/input-group.json", "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/text-field.tsx", "type": "registry:ui" } ] }, { "name": "theme-context", "type": "registry:component", "title": "Theme Context", "description": "The context behind `useTheme`: the current color scheme and palette.", "categories": [ "theme" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/palettes.json" ], "files": [ { "path": "src/components/theme-context.ts", "type": "registry:component" } ] }, { "name": "theme-provider", "type": "registry:component", "title": "Theme Provider", "description": "Puts the page in light, dark, or system mode and selects a palette, persisting the choice and exposing it through `useTheme`.", "categories": [ "theme" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/palettes.json", "https://guillermo-rebolledo.github.io/materialcn/r/theme-context.json" ], "files": [ { "path": "src/components/theme-provider.tsx", "type": "registry:component" } ] }, { "name": "time-dial", "type": "registry:ui", "title": "Time Dial", "description": "The Material clock dial, and the dialog that pairs it with text entry.", "categories": [ "forms" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/button.json", "https://guillermo-rebolledo.github.io/materialcn/r/dialog.json", "https://guillermo-rebolledo.github.io/materialcn/r/field.json", "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/time-picker.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/time-dial.tsx", "type": "registry:ui" } ] }, { "name": "time-picker", "type": "registry:ui", "title": "Time Picker", "description": "Text entry for a time, in 12- or 24-hour mode.", "categories": [ "forms" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/field.json", "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/time-picker.tsx", "type": "registry:ui" }, { "path": "src/components/ui/time-picker-utils.ts", "type": "registry:ui" } ] }, { "name": "toast", "type": "registry:ui", "title": "Snackbar", "description": "The Material snackbar and its imperative `toast` API, with stacking and actions.", "categories": [ "feedback" ], "dependencies": [ "@base-ui/react@^1.7.0", "lucide-react@^1.33.0" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/button.json", "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/theme-context.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/toast.tsx", "type": "registry:ui" }, { "path": "src/components/ui/toast-manager.ts", "type": "registry:ui" } ] }, { "name": "toggle", "type": "registry:ui", "title": "Toggle", "description": "A button that stays pressed, with the Material selected state.", "categories": [ "actions" ], "dependencies": [ "@base-ui/react@^1.7.0", "class-variance-authority@^0.7.1" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/toggle.tsx", "type": "registry:ui" }, { "path": "src/components/ui/toggle-variants.ts", "type": "registry:ui" } ] }, { "name": "toggle-group", "type": "registry:ui", "title": "Toggle Group", "description": "Single- or multi-select groups of toggles.", "categories": [ "actions" ], "dependencies": [ "@base-ui/react@^1.7.0", "class-variance-authority@^0.7.1", "lucide-react@^1.33.0" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/toggle.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/toggle-group.tsx", "type": "registry:ui" } ] }, { "name": "toolbar", "type": "registry:ui", "title": "Toolbar", "description": "The floating and docked toolbars, in standard and vibrant color.", "categories": [ "navigation" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/separator.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/toolbar.tsx", "type": "registry:ui" } ] }, { "name": "tooltip", "type": "registry:ui", "title": "Tooltip", "description": "The plain Material tooltip.", "categories": [ "feedback" ], "dependencies": [ "@base-ui/react@^1.7.0" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/tooltip.tsx", "type": "registry:ui" } ] }, { "name": "top-app-bar", "type": "registry:ui", "title": "Top App Bar", "description": "Small, medium, and large top app bars, with the scroll-collapse behavior.", "categories": [ "navigation" ], "registryDependencies": [ "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json", "https://guillermo-rebolledo.github.io/materialcn/r/utils.json" ], "files": [ { "path": "src/components/ui/top-app-bar.tsx", "type": "registry:ui" } ] }, { "name": "utils", "type": "registry:lib", "title": "cn", "description": "The `cn` class merger, configured for the M3 utility namespaces. Without it tailwind-merge treats `text-m3-label-lg` and `text-m3-on-primary` as one group and drops one of them.", "categories": [ "utilities" ], "dependencies": [ "clsx@^2.1.1", "tailwind-merge@^3.6.0" ], "files": [ { "path": "src/lib/utils.ts", "type": "registry:lib" } ] } ] }