Terms of Service Privacy Policy

Registry Health Inspect

Cuelark Theme – shadcn/ui Theme by cuelark | shadcnregistry

Registries
cuelark
Cuelark Theme

Cuelark Theme

theme

Design tokens and utilities every Cuelark component uses: colors, density, shadows, crop marks, dashed rules, labels and kbd.

pnpm dlx shadcn@latest add "https://ui.cuelark.com/r/theme.json"

Light Mode

--cl-highlight:

oklch(1 0 0 / 0.16)

--cl-shade:

rgb(0 0 0 / 0.07)

--background:

#f9f8f9

--foreground:

#282a30

--card:

#ffffff

--card-foreground:

#282a30

--popover:

#ffffff

--popover-foreground:

#282a30

--primary:

#5e6ad2

--primary-foreground:

#ffffff

--secondary:

#f1f0f2

--secondary-foreground:

#282a30

--muted:

#f1f0f2

--muted-foreground:

#6f6e77

--accent:

#eeedef

--accent-foreground:

#282a30

--border:

#e9e8ea

--input:

#dcdbdd

--ring:

#7170ff

--signal:

#5e6ad2

--signal-foreground:

#ffffff

--cl-mark:

#d4d4d6

--radius:

0.5rem

--cl-density:

1

--cl-marks:

0

--cl-motion:

1

--font-weight-medium:

510

--font-weight-semibold:

590

--destructive:

oklch(0.577 0.215 27)

--success:

oklch(0.56 0.14 150)

--success-foreground:

oklch(0.985 0.004 85)

--warning:

oklch(0.66 0.15 65)

--warning-foreground:

oklch(0.2 0.012 75)

Dark Mode

--cl-highlight:

oklch(1 0 0 / 0.1)

--cl-shade:

rgb(0 0 0 / 0.5)

--background:

#08090a

--foreground:

#f7f8f8

--card:

#0f1011

--card-foreground:

#f7f8f8

--popover:

#141516

--popover-foreground:

#f7f8f8

--primary:

#5e6ad2

--primary-foreground:

#ffffff

Theme

--color-success:

var(--success)

--color-success-foreground:

var(--success-foreground)

--color-warning:

var(--warning)

--color-warning-foreground:

var(--warning-foreground)

--color-mark:

var(--cl-mark)

--color-signal:

var(--signal)

--color-signal-foreground:

var(--signal-foreground)

--spacing-ctl-xs:

calc(var(--cl-density) * 1.5rem)

--spacing-ctl-sm:

calc(var(--cl-density) * 1.75rem)

--spacing-ctl-md:

calc(var(--cl-density) * 2rem)

CSS

--secondary:

#1c1c1f

--secondary-foreground:

#f7f8f8

--muted:

#1c1c1f

--muted-foreground:

#8a8f98

--accent:

#232326

--accent-foreground:

#f7f8f8

--border:

#23252a

--input:

#34343a

--ring:

#7170ff

--signal:

#7170ff

--signal-foreground:

#ffffff

--cl-mark:

#3e3e44

--destructive:

oklch(0.7 0.19 22)

--success:

oklch(0.74 0.15 150)

--success-foreground:

oklch(0.18 0.03 150)

--warning:

oklch(0.8 0.14 80)

--warning-foreground:

oklch(0.2 0.04 70)

--spacing-ctl-lg:

calc(var(--cl-density) * 2.5rem)

--spacing-card:

calc(var(--cl-density) * 1.5rem)

--shadow-control:

0 1px 2px var(--cl-shade)

--shadow-raised:

0 1px 2px var(--cl-shade), 0 8px 24px -12px var(--cl-shade)

--shadow-overlay:

0 1px 2px var(--cl-shade), 0 16px 40px -12px var(--cl-shade), 0 32px 64px -24px var(--cl-shade)

--shadow-pressed:

inset 0 1px 2px var(--cl-shade)

--shadow-well:

inset 0 1px 1px var(--cl-shade)

--ease-cue:

cubic-bezier(0.23, 1, 0.32, 1)