Design System Recipes – shadcn/ui Component by cortexcn | shadcnregistry

Design System Recipes – shadcn/ui Component by cortexcn | shadcnregistry

Theme

--color-primary-hover:

var(--ds-primary-hover, color-mix(in oklab, var(--primary) 80%, transparent))

--color-secondary-hover:

color-mix(in oklch, var(--secondary), var(--foreground) 5%)

--color-success:

var(--ds-success, oklch(0.696 0.17 162.48))

--color-warning:

var(--ds-warning, oklch(0.769 0.188 70.08))

--color-overlay:

var(--ds-overlay, oklch(0 0 0 / 0.1))

--color-control-thumb:

var(--ds-control-thumb, oklch(1 0 0))

--color-system-canvas:

Canvas

--color-system-canvas-text:

CanvasText

--radius-button:

var(--ds-button-radius, calc(var(--radius) * 0.8))

--radius-button-sm:

var(--ds-button-radius, min(calc(var(--radius) * 0.8), 10px))

--radius-button-xs:

var(--ds-button-radius, min(calc(var(--radius) * 0.8), 8px))

--spacing-button-xs:

var(--ds-button-h-xs, 1.5rem)

--spacing-button-sm:

var(--ds-button-h-sm, 2rem)

--spacing-button:

var(--ds-button-h-md, 2.25rem)

--spacing-button-lg:

var(--ds-button-h-lg, 2.5rem)

--spacing-button-x:

var(--ds-button-px, 0.625rem)

--spacing-button-x-xs:

calc(var(--ds-button-px, 0.625rem) * 0.8)

--font-weight-button:

var(--ds-button-weight, 500)

--shadow-button:

var(--ds-button-shadow, 0 0 #0000)

--radius-input:

var(--ds-input-radius, calc(var(--radius) * 0.8))

--spacing-input:

var(--ds-input-h, 2.25rem)

--spacing-input-x:

var(--ds-input-px, 0.625rem)

--radius-input-inner:

calc(var(--ds-input-radius, calc(var(--radius) * 0.8)) - 3px)

--color-input-fill:

var(--ds-input-bg, transparent)

--color-input-fill-dark:

var(--ds-input-bg, color-mix(in oklab, var(--input) 30%, transparent))

--radius-card:

var(--ds-card-radius, calc(var(--radius) * 1.4))

--color-card-fill:

var(--ds-card-bg, var(--card))

--shadow-card:

var(--ds-card-shadow, 0 0 #0000)

--radius-badge:

var(--ds-badge-radius, calc(var(--radius) * 2.6))

--spacing-badge-x:

var(--ds-badge-px, 0.5rem)

--font-weight-badge:

var(--ds-badge-weight, 500)

--radius-tabs:

var(--ds-tabs-radius, var(--radius))

--radius-tabs-trigger:

var(--ds-tabs-radius, calc(var(--radius) * 0.8))

--color-tabs-list:

var(--ds-tabs-list-bg, var(--muted))

--color-tabs-active:

var(--ds-tabs-active-bg, var(--background))

--color-tabs-active-dark:

var(--ds-tabs-active-bg, color-mix(in oklab, var(--input) 30%, transparent))

--color-tabs-active-border:

var(--ds-tabs-active-border, var(--input))

--spacing-accordion:

var(--ds-accordion-py, 0.625rem)

--font-weight-accordion:

var(--ds-accordion-weight, 500)

--radius-dialog:

var(--ds-dialog-radius, calc(var(--radius) * 1.4))

--spacing-dialog:

var(--ds-dialog-padding, 1.5rem)

--shadow-dialog:

var(--ds-dialog-shadow, 0 0 #0000)

--radius-menu:

var(--ds-menu-radius, calc(var(--radius) * 0.8))

--radius-menu-lg:

var(--ds-menu-radius, var(--radius))

--radius-menu-xl:

var(--ds-menu-radius, calc(var(--radius) * 1.4))

--radius-menu-item:

var(--ds-menu-item-radius, calc(var(--radius) * 0.6))

--radius-menu-item-md:

var(--ds-menu-item-radius, calc(var(--radius) * 0.8))

--radius-menu-item-lg:

var(--ds-menu-item-radius, var(--radius))

--shadow-input:

var(--ds-input-shadow, 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)))

--shadow-tabs:

var(--ds-tabs-active-shadow, 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)))

--shadow-menu:

var(--ds-menu-shadow, 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)))

--shadow-menu-lg:

var(--ds-menu-shadow, 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)))

--radius-inherit:

inherit

--radius-app-icon:

22%

--shadow-sidebar-border:

0 0 0 1px var(--sidebar-border)

--shadow-sidebar-accent:

0 0 0 1px var(--sidebar-accent)

--radius-command:

var(--ds-menu-radius, 14px)

--shadow-command:

var(--ds-menu-shadow, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 0 0 1px rgb(10 10 10 / 0.05))

--shadow-command-dark:

var(--ds-menu-shadow, 0 1px 3px 0 rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.12))

--drop-shadow-command:

0 4px 14.2px rgb(108 108 108 / 0.25)

--radius-faq:

var(--ds-card-radius, 26px)

--radius-faq-inner:

var(--ds-radius-lg, 18px)

--shadow-faq:

var(--ds-shadow-2, 0 0 0 1px rgb(10 10 10 / 0.05), 0 2px 4px 0 rgb(0 0 0 / 0.1))

--shadow-faq-dark:

var(--ds-shadow-2, 0 0 0 1px rgb(255 255 255 / 0.12), 0 2px 4px 0 rgb(0 0 0 / 0.5))

--radius-lanyard:

var(--ds-radius-xl, 20px)

--shadow-lanyard:

var(--ds-shadow-3, 0 24px 50px -20px rgb(0 0 0 / 0.45))

--shadow-lanyard-slot:

inset 0 1px 2px rgb(0 0 0 / 0.25)

--color-sheen:

oklch(1 0 0 / 0.28)

--color-live:

oklch(0.685 0.169 237.323)

--color-shadow-ink:

oklch(0.145 0 0)

--color-light-speed:

oklch(0.128 0.011 259.6)

--radius-control:

var(--ds-control-radius, 4px)

--radius-tooltip:

var(--ds-tooltip-radius, calc(var(--radius) * 0.8))

--radius-tooltip-arrow:

min(var(--ds-tooltip-radius, 2px), 2px)

--radius-alert:

var(--ds-alert-radius, var(--radius))

CSS