@arbidocs/blocks 0.3.184 → 0.4.0

package/src/tokens.css

@@ -0,0 +1,226 @@
+/*
+ * @arbidocs/blocks/tokens.css: default values for the whole token contract the blocks read.
+ *
+ * Import it once (before blocks.css) and override any variable in your own stylesheet:
+ *
+ *   @import '@arbidocs/blocks/tokens.css';
+ *   @import '@arbidocs/blocks/blocks.css';
+ *   @import 'tailwindcss';
+ *
+ * Contract:
+ *  - HSL triplets ("228 50% 25%", no hsl()) in :root, redefined for dark under .dark or
+ *    [data-theme='dark']: --background, --foreground, --card, --popover, --primary, --secondary,
+ *    --muted, --accent, --destructive (each with -foreground where it applies), --border,
+ *    --input, --ring, --sidebar, --hero, --ai-ink, --ai-soft, --chart-1..5.
+ *  - Accent cyans: --theme-cyan (text/borders on the page background; darkened in light so it
+ *    reads at 4.5:1, bright in dark) and --theme-cyan-bright (always the bright cyan, for text on
+ *    the dark --hero panels). --theme-gray aliases --border.
+ *  - --ring-offset-width, --color-panel-chat/sources/viewer (the blue/green/yellow text hues) and
+ *    --color-ai-accent*, --color-ai-surface are derived in the @theme block, not set directly.
+ *  - Contrast is enforced by tokens.contrast.test.ts: text pairs 4.5:1, --ring and --input 3:1
+ *    against --background, in light and dark. --border is decorative and exempt, so never make it
+ *    the only boundary of a control.
+ *  - Status palette, one family per hue (green, yellow, red, blue, purple, gray):
+ *    --{hue}-bg, --{hue}-text, --{hue}-border; plus --{hue}-solid and --{hue}-text-strong
+ *    (gray is aliased to --muted, --muted-foreground and --border).
+ *  - Presence dots: --status-{online,connecting,away,busy,offline,empty} (full colour values).
+ *  - The @theme inline block maps every triplet to a Tailwind v4 --color-* utility
+ *    (bg-green-bg, text-ai-ink, border-red-border, ...).
+ */
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 233 45% 11.4%;
+  --card: 0 0% 100%;
+  --card-foreground: 233 45% 11.4%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 233 45% 11.4%;
+  --primary: 228 50% 25%;
+  --primary-foreground: 210 20% 98%;
+  --secondary: 195 100% 47%;
+  --secondary-foreground: 233 45% 11.4%;
+  --muted: 225 22% 96.5%;
+  --muted-foreground: 226 12% 42.2%;
+  --accent: 229 62% 94.9%;
+  --accent-foreground: 228 50% 25%;
+  --destructive: 0 53% 49.6%;
+  --destructive-foreground: 210 20% 98%;
+  --border: 227 19% 90.8%;
+  --input: 225 10% 54%;
+  --ring: 231 40% 53.7%;
+  --ring-offset-width: 0px;
+  --theme-cyan: 195 100% 30%;
+  --theme-cyan-bright: 195 100% 47%;
+  --theme-gray: var(--border);
+  --sidebar: 220 23% 97.5%;
+  --hero: 228 50% 25%;
+  --ai-ink: 198 100% 32%;
+  --ai-soft: 198 82% 93.5%;
+  --blue-bg: 214 100% 97%;
+  --blue-text: 226 71% 40%;
+  --blue-border: 214 95% 93%;
+  --green-bg: 152 81% 96%;
+  --green-text: 163 94% 24%;
+  --green-border: 149 80% 90%;
+  --yellow-bg: 48 100% 96%;
+  --yellow-text: 26 90% 37%;
+  --yellow-border: 48 96% 89%;
+  --red-bg: 0 86% 97%;
+  --red-text: 0 74% 42%;
+  --red-border: 0 93% 94%;
+  --purple-bg: 289 100% 98%;
+  --purple-text: 304 99% 29%;
+  --purple-border: 287 100% 95%;
+  --red-solid: 0 84% 60%;
+  --green-solid: 142 71% 45%;
+  --yellow-solid: 40 95% 50%;
+  --blue-solid: 217 91% 60%;
+  --purple-solid: 271 81% 56%;
+  --red-text-strong: 0 74% 32%;
+  --green-text-strong: 163 94% 18%;
+  --yellow-text-strong: 26 90% 28%;
+  --blue-text-strong: 226 71% 30%;
+  --purple-text-strong: 304 99% 22%;
+  --status-online: oklch(72.3% 0.219 149.579);
+  --status-connecting: oklch(62.3% 0.214 259.815);
+  --status-away: oklch(79.5% 0.184 86.047);
+  --status-busy: oklch(63.7% 0.237 25.331);
+  --status-offline: oklch(70.7% 0.022 261.325);
+  --status-empty: oklch(92.8% 0.006 264.531);
+  --gray-bg: var(--muted);
+  --gray-text: var(--muted-foreground);
+  --gray-border: var(--border);
+  --chart-1: 12 76% 61%;
+  --chart-2: 173 58% 39%;
+  --chart-3: 197 37% 24%;
+  --chart-4: 43 74% 66%;
+  --chart-5: 27 87% 67%;
+}
+
+.dark,
+:root[data-theme='dark'] {
+  --background: 230 20% 7%;
+  --foreground: 220 18% 93%;
+  --card: 230 18% 9%;
+  --card-foreground: 220 18% 93%;
+  --popover: 230 18% 10%;
+  --popover-foreground: 220 18% 93%;
+  --primary: 228 70% 70%;
+  --primary-foreground: 230 30% 8%;
+  --secondary: 230 14% 17%;
+  --secondary-foreground: 220 18% 93%;
+  --muted: 230 15% 14%;
+  --muted-foreground: 225 12% 68%;
+  --accent: 229 32% 21%;
+  --accent-foreground: 220 70% 92%;
+  --destructive: 0 55% 42%;
+  --destructive-foreground: 210 20% 98%;
+  --border: 230 14% 20%;
+  --input: 230 10% 45%;
+  --theme-cyan: 195 100% 47%;
+  --ring: 228 55% 65%;
+  --sidebar: 230 18% 10%;
+  --hero: 228 48% 17%;
+  --ai-ink: 195 90% 62%;
+  --ai-soft: 205 35% 17%;
+  --blue-bg: 214 45% 14%;
+  --blue-text: 214 90% 74%;
+  --blue-border: 214 40% 26%;
+  --blue-text-strong: 214 95% 82%;
+  --green-bg: 152 40% 11%;
+  --green-text: 152 60% 58%;
+  --green-border: 152 30% 22%;
+  --green-text-strong: 152 65% 68%;
+  --yellow-bg: 45 45% 12%;
+  --yellow-text: 45 90% 62%;
+  --yellow-border: 40 35% 24%;
+  --yellow-text-strong: 45 95% 72%;
+  --red-bg: 0 40% 13%;
+  --red-text: 0 85% 74%;
+  --red-border: 0 35% 25%;
+  --red-text-strong: 0 90% 82%;
+  --purple-bg: 289 40% 14%;
+  --purple-text: 289 80% 76%;
+  --purple-border: 289 35% 26%;
+  --purple-text-strong: 289 85% 84%;
+  --chart-1: 220 70% 50%;
+  --chart-2: 160 60% 45%;
+  --chart-3: 30 80% 55%;
+  --chart-4: 280 65% 60%;
+  --chart-5: 340 75% 55%;
+}
+
+@theme inline {
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-theme-cyan: hsl(var(--theme-cyan));
+  --color-theme-cyan-bright: hsl(var(--theme-cyan-bright));
+  --color-sidebar: hsl(var(--sidebar));
+  --color-hero: hsl(var(--hero));
+  --color-ai-ink: hsl(var(--ai-ink));
+  --color-ai-soft: hsl(var(--ai-soft));
+  --color-theme-gray: hsl(var(--theme-gray));
+  --color-blue-bg: hsl(var(--blue-bg));
+  --color-blue-text: hsl(var(--blue-text));
+  --color-blue-border: hsl(var(--blue-border));
+  --color-green-bg: hsl(var(--green-bg));
+  --color-green-text: hsl(var(--green-text));
+  --color-green-border: hsl(var(--green-border));
+  --color-yellow-bg: hsl(var(--yellow-bg));
+  --color-yellow-text: hsl(var(--yellow-text));
+  --color-yellow-border: hsl(var(--yellow-border));
+  --color-red-bg: hsl(var(--red-bg));
+  --color-red-text: hsl(var(--red-text));
+  --color-red-border: hsl(var(--red-border));
+  --color-purple-bg: hsl(var(--purple-bg));
+  --color-purple-text: hsl(var(--purple-text));
+  --color-purple-border: hsl(var(--purple-border));
+  --color-gray-bg: hsl(var(--gray-bg));
+  --color-gray-text: hsl(var(--gray-text));
+  --color-gray-border: hsl(var(--gray-border));
+  --color-red-solid: hsl(var(--red-solid));
+  --color-green-solid: hsl(var(--green-solid));
+  --color-yellow-solid: hsl(var(--yellow-solid));
+  --color-blue-solid: hsl(var(--blue-solid));
+  --color-purple-solid: hsl(var(--purple-solid));
+  --color-red-text-strong: hsl(var(--red-text-strong));
+  --color-green-text-strong: hsl(var(--green-text-strong));
+  --color-yellow-text-strong: hsl(var(--yellow-text-strong));
+  --color-blue-text-strong: hsl(var(--blue-text-strong));
+  --color-purple-text-strong: hsl(var(--purple-text-strong));
+  --color-status-online: var(--status-online);
+  --color-status-connecting: var(--status-connecting);
+  --color-status-away: var(--status-away);
+  --color-status-busy: var(--status-busy);
+  --color-status-offline: var(--status-offline);
+  --color-status-empty: var(--status-empty);
+  --color-chart-1: hsl(var(--chart-1));
+  --color-chart-2: hsl(var(--chart-2));
+  --color-chart-3: hsl(var(--chart-3));
+  --color-chart-4: hsl(var(--chart-4));
+  --color-chart-5: hsl(var(--chart-5));
+  --color-panel-chat: hsl(var(--blue-text));
+  --color-panel-sources: hsl(var(--green-text));
+  --color-panel-viewer: hsl(var(--yellow-text));
+  --color-ai-accent: hsl(var(--ai-ink));
+  --color-ai-accent-foreground: hsl(var(--primary-foreground));
+  --color-ai-accent-soft: hsl(var(--ai-soft));
+  --color-ai-surface: hsl(var(--card));
+}