Foundationtheme
Theme
Particular.Tech color tokens (light and dark), fonts, and radius as CSS variables.
Every token, in both modes, is on the colors page.
Installation
npx shadcn@latest add @particular/themeCSS variables
{
"theme": {
"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-border": "var(--border)",
"color-input": "var(--input)",
"color-ring": "var(--ring)",
"color-brand": "var(--brand)",
"color-brand-foreground": "var(--brand-foreground)",
"color-brand-subtle": "var(--brand-subtle)",
"color-destructive": "var(--destructive)",
"color-destructive-foreground": "var(--destructive-foreground)",
"color-destructive-subtle": "var(--destructive-subtle)",
"color-success": "var(--success)",
"color-success-foreground": "var(--success-foreground)",
"color-success-subtle": "var(--success-subtle)",
"color-warning": "var(--warning)",
"color-warning-foreground": "var(--warning-foreground)",
"color-warning-subtle": "var(--warning-subtle)",
"color-info": "var(--info)",
"color-info-foreground": "var(--info-foreground)",
"color-info-subtle": "var(--info-subtle)",
"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)",
"font-sans": "var(--font-geist-sans, ui-sans-serif), system-ui, sans-serif",
"font-mono": "var(--font-geist-mono, ui-monospace), SFMono-Regular, Menlo, monospace",
"font-heading": "var(--font-geist-sans, ui-sans-serif), system-ui, sans-serif",
"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)"
},
"light": {
"radius": "0.5rem",
"background": "oklch(0.995 0.002 264)",
"foreground": "oklch(0.18 0.014 264)",
"card": "oklch(1 0 0)",
"card-foreground": "oklch(0.18 0.014 264)",
"popover": "oklch(1 0 0)",
"popover-foreground": "oklch(0.18 0.014 264)",
"primary": "oklch(0.2 0.016 264)",
"primary-foreground": "oklch(0.985 0.002 264)",
"secondary": "oklch(0.962 0.005 264)",
"secondary-foreground": "oklch(0.2 0.016 264)",
"muted": "oklch(0.962 0.005 264)",
"muted-foreground": "oklch(0.49 0.016 264)",
"accent": "oklch(0.95 0.007 264)",
"accent-foreground": "oklch(0.2 0.016 264)",
"border": "oklch(0.912 0.007 264)",
"input": "oklch(0.885 0.009 264)",
"ring": "oklch(0.56 0.21 285)",
"brand": "oklch(0.52 0.23 285)",
"brand-foreground": "oklch(0.99 0.005 285)",
"brand-subtle": "oklch(0.96 0.025 285)",
"destructive": "oklch(0.53 0.2 25)",
"destructive-foreground": "oklch(0.99 0.005 25)",
"destructive-subtle": "oklch(0.965 0.02 25)",
"success": "oklch(0.5 0.13 155)",
"success-foreground": "oklch(0.99 0.01 155)",
"success-subtle": "oklch(0.965 0.03 155)",
"warning": "oklch(0.52 0.12 60)",
"warning-foreground": "oklch(0.99 0.01 75)",
"warning-subtle": "oklch(0.97 0.035 80)",
"info": "oklch(0.5 0.15 245)",
"info-foreground": "oklch(0.99 0.008 245)",
"info-subtle": "oklch(0.965 0.02 245)",
"chart-1": "oklch(0.56 0.21 285)",
"chart-2": "oklch(0.66 0.13 200)",
"chart-3": "oklch(0.64 0.15 155)",
"chart-4": "oklch(0.75 0.15 75)",
"chart-5": "oklch(0.62 0.2 350)",
"sidebar": "oklch(0.982 0.004 264)",
"sidebar-foreground": "oklch(0.18 0.014 264)",
"sidebar-primary": "oklch(0.2 0.016 264)",
"sidebar-primary-foreground": "oklch(0.985 0.002 264)",
"sidebar-accent": "oklch(0.945 0.008 264)",
"sidebar-accent-foreground": "oklch(0.2 0.016 264)",
"sidebar-border": "oklch(0.912 0.007 264)",
"sidebar-ring": "oklch(0.56 0.21 285)"
},
"dark": {
"background": "oklch(0.145 0.008 264)",
"foreground": "oklch(0.97 0.004 264)",
"card": "oklch(0.175 0.009 264)",
"card-foreground": "oklch(0.97 0.004 264)",
"popover": "oklch(0.19 0.01 264)",
"popover-foreground": "oklch(0.97 0.004 264)",
"primary": "oklch(0.96 0.004 264)",
"primary-foreground": "oklch(0.18 0.014 264)",
"secondary": "oklch(0.235 0.01 264)",
"secondary-foreground": "oklch(0.97 0.004 264)",
"muted": "oklch(0.235 0.01 264)",
"muted-foreground": "oklch(0.71 0.014 264)",
"accent": "oklch(0.255 0.012 264)",
"accent-foreground": "oklch(0.97 0.004 264)",
"border": "oklch(1 0 0 / 9%)",
"input": "oklch(1 0 0 / 14%)",
"ring": "oklch(0.68 0.18 285)",
"brand": "oklch(0.72 0.16 285)",
"brand-foreground": "oklch(0.16 0.03 285)",
"brand-subtle": "oklch(0.24 0.06 285)",
"destructive": "oklch(0.7 0.17 22)",
"destructive-foreground": "oklch(0.16 0.03 22)",
"destructive-subtle": "oklch(0.24 0.06 22)",
"success": "oklch(0.76 0.15 155)",
"success-foreground": "oklch(0.16 0.03 155)",
"success-subtle": "oklch(0.23 0.045 155)",
"warning": "oklch(0.8 0.14 75)",
"warning-foreground": "oklch(0.18 0.03 75)",
"warning-subtle": "oklch(0.24 0.045 75)",
"info": "oklch(0.74 0.13 245)",
"info-foreground": "oklch(0.16 0.03 245)",
"info-subtle": "oklch(0.24 0.05 245)",
"chart-1": "oklch(0.68 0.18 285)",
"chart-2": "oklch(0.74 0.12 200)",
"chart-3": "oklch(0.72 0.15 155)",
"chart-4": "oklch(0.8 0.14 75)",
"chart-5": "oklch(0.7 0.18 350)",
"sidebar": "oklch(0.16 0.009 264)",
"sidebar-foreground": "oklch(0.97 0.004 264)",
"sidebar-primary": "oklch(0.72 0.16 285)",
"sidebar-primary-foreground": "oklch(0.16 0.03 285)",
"sidebar-accent": "oklch(0.235 0.012 264)",
"sidebar-accent-foreground": "oklch(0.97 0.004 264)",
"sidebar-border": "oklch(1 0 0 / 9%)",
"sidebar-ring": "oklch(0.68 0.18 285)"
}
}