Theme variables

flootlets uses shadcn/ui’s theme variables, plus --success and --warning in the same pattern. Each colour has a -foreground for text on top of it.

The values are shadcn/ui’s neutral theme, a placeholder until a shop brings its own. A few are adjusted just enough to meet WCAG AA, which shadcn’s defaults miss:

• --input has more contrast in both themes, so input borders reach 3:1 against the page (shadcn’s is 1.3:1 in light, 1.5:1 in dark);
• --ring is darker in light mode, so the focus ring reaches 3:1;
• --muted-foreground and --destructive are a touch darker in light mode, so they stay at 4.5:1 as text on --muted.

This page reads theme.css directly, so it always shows the current values.

Colours

The ratio is each colour's contrast against the page background (--background) in that theme. In Tailwind, each variable is a colour: --primary isbg-primary, text-primary, border-primary.

Variable	Light	Dark
--background	oklch(1 0 0) 1.0:1	oklch(0.145 0 0) 1.0:1
--foreground	oklch(0.145 0 0) 19.8:1	oklch(0.985 0 0) 19.0:1
--card	oklch(1 0 0) 1.0:1	oklch(0.205 0 0) 1.1:1
--card-foreground	oklch(0.145 0 0) 19.8:1	oklch(0.985 0 0) 19.0:1
--popover	oklch(1 0 0) 1.0:1	oklch(0.205 0 0) 1.1:1
--popover-foreground	oklch(0.145 0 0) 19.8:1	oklch(0.985 0 0) 19.0:1
--primary	oklch(0.205 0 0) 17.9:1	oklch(0.922 0 0) 15.7:1
--primary-foreground	oklch(0.985 0 0) 1.0:1	oklch(0.205 0 0) 1.1:1
--secondary	oklch(0.97 0 0) 1.1:1	oklch(0.269 0 0) 1.3:1
--secondary-foreground	oklch(0.205 0 0) 17.9:1	oklch(0.985 0 0) 19.0:1
--muted	oklch(0.97 0 0) 1.1:1	oklch(0.269 0 0) 1.3:1
--muted-foreground	oklch(0.54 0 0) 5.1:1	oklch(0.708 0 0) 7.6:1
--accent	oklch(0.97 0 0) 1.1:1	oklch(0.269 0 0) 1.3:1
--accent-foreground	oklch(0.205 0 0) 17.9:1	oklch(0.985 0 0) 19.0:1
--destructive	oklch(0.56 0.245 27.325) 5.0:1	oklch(0.704 0.191 22.216) 6.8:1
--destructive-foreground	oklch(0.985 0 0) 1.0:1	oklch(0.145 0 0) 1.0:1
--success	oklch(0.527 0.154 150.069) 4.9:1	oklch(0.792 0.209 151.711) 11.1:1
--success-foreground	oklch(0.985 0 0) 1.0:1	oklch(0.145 0 0) 1.0:1
--warning	oklch(0.555 0.163 48.998) 5.1:1	oklch(0.828 0.189 84.429) 11.5:1
--warning-foreground	oklch(0.985 0 0) 1.0:1	oklch(0.145 0 0) 1.0:1
--border	oklch(0.922 0 0) 1.3:1	oklch(1 0 0 / 10%) 1.3:1
--input	oklch(0.64 0 0) 3.4:1	oklch(0.55 0 0) 4.1:1
--ring	oklch(0.64 0 0) 3.4:1	oklch(0.556 0 0) 4.2:1

Radius

--radius is 0.625rem. As in shadcn, Tailwind’s radii are derived from it: rounded-lg is --radius, rounded-md and rounded-sm are 2px and 4px smaller, and rounded-xl is 4px larger.

Everything else

Spacing, type, shadows and motion use Tailwind’s own scales.