fbf26453f2
ConsentOS — a privacy-first cookie consent management platform. Self-hosted, source-available alternative to OneTrust, Cookiebot, and CookieYes. Full standards coverage (IAB TCF v2.2, GPP v1, Google Consent Mode v2, GPC, Shopify Customer Privacy API), multi-tenant architecture with role-based access, configuration cascade (system → org → group → site → region), dark-pattern detection in the scanner, and a tamper-evident consent record audit trail. This is the initial public release. Prior development history is retained internally. See README.md for the feature list, architecture overview, and quick-start instructions. Licensed under the Elastic Licence 2.0 — self-host freely; do not resell as a managed service.
125 lines
3.8 KiB
CSS
125 lines
3.8 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
@import "@fontsource/dm-sans/300.css";
|
|
@import "@fontsource/dm-sans/400.css";
|
|
@import "@fontsource/dm-sans/500.css";
|
|
@import "@fontsource/sora/400.css";
|
|
@import "@fontsource/sora/600.css";
|
|
@import "@fontsource/sora/700.css";
|
|
|
|
/*
|
|
ConsentOS palette (see assets/brand/README.md for the canonical
|
|
reference). Hex values are encoded as-is via Tailwind v4's @theme
|
|
directive — no oklch conversion needed since shadcn/ui consumes
|
|
the CSS variables directly.
|
|
*/
|
|
:root {
|
|
/* Surfaces & Backgrounds */
|
|
--background: #FFFFFF; /* page background */
|
|
--foreground: #0E1929; /* primary text — Ink */
|
|
--card: #FFFFFF;
|
|
--mist: #EEF3FF; /* Blue tint */
|
|
--surface: #F5F8FC; /* Surface */
|
|
|
|
/* Accent colours */
|
|
--primary: #1B3C7C; /* Navy — primary brand */
|
|
--primary-foreground: #FFFFFF;
|
|
--action: #2C6AE4; /* Blue — action / CTA */
|
|
--accent-mid: #4D8AFF; /* Blue mid — accent / highlight */
|
|
|
|
/* Borders */
|
|
--border: #DDE6F4;
|
|
--border-subtle: #EEF3FF;
|
|
--fog: #C4D5FA;
|
|
--input: #DDE6F4;
|
|
--ring: #2C6AE4;
|
|
|
|
/* Text hierarchy */
|
|
--text-secondary: #5A6E96; /* Slate */
|
|
--text-tertiary: #96AECE; /* Light slate */
|
|
--muted-foreground: #5A6E96;
|
|
|
|
/* Status colours */
|
|
--status-success-fg: #0DAA72; /* Consent green */
|
|
--status-success-bg: #E6F8F1;
|
|
--status-warning-fg: #B45309;
|
|
--status-warning-bg: #FEF3C7;
|
|
--status-error-fg: #B91C1C;
|
|
--status-error-bg: #FEE2E2;
|
|
--status-info-fg: #1B3C7C;
|
|
--status-info-bg: #EEF3FF;
|
|
|
|
/* Destructive */
|
|
--destructive: #DC2626;
|
|
--destructive-foreground: #FFFFFF;
|
|
|
|
/* Secondary */
|
|
--secondary: #EEF3FF; /* Blue tint */
|
|
--secondary-foreground: #1B3C7C;
|
|
|
|
/* Accent (for hover states) */
|
|
--accent: #EEF3FF;
|
|
--accent-foreground: #1B3C7C;
|
|
|
|
/* Radius */
|
|
--radius: 0.5rem;
|
|
}
|
|
|
|
@theme {
|
|
/* Pencil design tokens */
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-card: var(--card);
|
|
--color-mist: var(--mist);
|
|
--color-surface: var(--surface);
|
|
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-action: var(--action);
|
|
--color-accent-mid: var(--accent-mid);
|
|
/* Backwards-compat alias: legacy "copper" token now maps to the
|
|
ConsentOS action blue. New code should use ``--color-action``. */
|
|
--color-copper: var(--action);
|
|
|
|
--color-border: var(--border);
|
|
--color-border-subtle: var(--border-subtle);
|
|
--color-fog: var(--fog);
|
|
--color-input: var(--input);
|
|
--color-ring: var(--ring);
|
|
|
|
--color-text-secondary: var(--text-secondary);
|
|
--color-text-tertiary: var(--text-tertiary);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
|
|
--color-status-success-fg: var(--status-success-fg);
|
|
--color-status-success-bg: var(--status-success-bg);
|
|
--color-status-warning-fg: var(--status-warning-fg);
|
|
--color-status-warning-bg: var(--status-warning-bg);
|
|
--color-status-error-fg: var(--status-error-fg);
|
|
--color-status-error-bg: var(--status-error-bg);
|
|
--color-status-info-fg: var(--status-info-fg);
|
|
--color-status-info-bg: var(--status-info-bg);
|
|
|
|
--color-destructive: var(--destructive);
|
|
--color-destructive-foreground: var(--destructive-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
|
|
/* Typography */
|
|
--font-heading: "Sora", system-ui, sans-serif;
|
|
--font-sans: "DM Sans", system-ui, sans-serif;
|
|
|
|
/* Border radius */
|
|
--radius-lg: var(--radius);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground antialiased font-sans;
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
}
|