Material 3 Theme – shadcn/ui Theme by materialcn | shadcnregistry

Material 3 Theme – shadcn/ui Theme by materialcn | shadcnregistry

@fontsource-variable/roboto-flex@^5.3.0

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