/* Sundsvalls kommun – designsystem för digitala tjänster globals.css – genererad från tokens.json. Redigera aldrig hex-värden här; ändra i tokens.json. Kompatibel med shadcn/ui (Tailwind v4 @theme inline nedan). v0.2: höjd grundkontrast för TV/projektor + högkontrastläge (data-contrast="high" / prefers-contrast). */ /* ---------- Primitiva skalor (härledda i OKLCH från profilfärgerna) ---------- */ :root { --gronsta-50: #f3fef3; --gronsta-100: #e0f6de; --gronsta-200: #bfefcc; --gronsta-300: #9ddeaf; --gronsta-400: #74c48d; --gronsta-500: #48a76a; --gronsta-600: #278e52; --gronsta-700: #00733b; --gronsta-800: #045d2f; --gronsta-900: #004621; --gronsta-950: #003015; --vattjom-50: #f3fcfe; --vattjom-100: #daeff1; --vattjom-200: #cce4ff; --vattjom-300: #a6d1fe; --vattjom-400: #7eb4ed; --vattjom-500: #5595d5; --vattjom-600: #327cc2; --vattjom-700: #1264a9; --vattjom-800: #005595; --vattjom-900: #003a69; --vattjom-950: #00274a; --bjornstigen-50: #f9f9ff; --bjornstigen-100: #f0eef9; --bjornstigen-200: #d7dbf2; --bjornstigen-300: #dbc0ec; --bjornstigen-400: #c49edb; --bjornstigen-500: #a97ac5; --bjornstigen-600: #945db3; --bjornstigen-700: #7f419f; --bjornstigen-800: #692a88; --bjornstigen-900: #5b1f78; --bjornstigen-950: #3c0054; --juniskar-50: #fff8f9; --juniskar-100: #faecf0; --juniskar-200: #fedfe2; --juniskar-300: #feb1d8; --juniskar-400: #f583c1; --juniskar-500: #e153a6; --juniskar-600: #cb298f; --juniskar-700: #a90074; --juniskar-800: #89055e; --juniskar-900: #690047; --juniskar-950: #4a0030; --neutral-0: #ffffff; --neutral-50: #f8fafd; --neutral-100: #f1f4f6; --neutral-200: #ececec; --neutral-300: #d2d6da; --neutral-400: #b4b8bc; --neutral-500: #919498; --neutral-600: #707377; --neutral-700: #4b4b4b; --neutral-800: #3c3d3f; --neutral-900: #252728; --neutral-950: #151618; --neutral-1000: #000000; --warning-50: #fff9f2; --warning-100: #ffedda; --warning-200: #ffd8ad; --warning-300: #fdbc6f; --warning-400: #e9a03e; --warning-500: #d0860f; --warning-600: #b07004; --warning-700: #915c06; --warning-800: #734804; --warning-900: #563502; --warning-950: #3c2200;} /* ---------- Verksamhetstema: sätt data-brand på . Standard: vattjom ---------- */ [data-brand="vattjom"] { --brand-50: var(--vattjom-50); --brand-100: var(--vattjom-100); --brand-200: var(--vattjom-200); --brand-300: var(--vattjom-300); --brand-400: var(--vattjom-400); --brand-500: var(--vattjom-500); --brand-600: var(--vattjom-600); --brand-700: var(--vattjom-700); --brand-800: var(--vattjom-800); --brand-900: var(--vattjom-900); --brand-950: var(--vattjom-950); --brand-primary: var(--vattjom-800); --brand-primary-hover: var(--vattjom-900); --brand-primary-active: var(--vattjom-950); } [data-brand="gronsta"] { --brand-50: var(--gronsta-50); --brand-100: var(--gronsta-100); --brand-200: var(--gronsta-200); --brand-300: var(--gronsta-300); --brand-400: var(--gronsta-400); --brand-500: var(--gronsta-500); --brand-600: var(--gronsta-600); --brand-700: var(--gronsta-700); --brand-800: var(--gronsta-800); --brand-900: var(--gronsta-900); --brand-950: var(--gronsta-950); --brand-primary: var(--gronsta-700); --brand-primary-hover: var(--gronsta-800); --brand-primary-active: var(--gronsta-900); } [data-brand="bjornstigen"] { --brand-50: var(--bjornstigen-50); --brand-100: var(--bjornstigen-100); --brand-200: var(--bjornstigen-200); --brand-300: var(--bjornstigen-300); --brand-400: var(--bjornstigen-400); --brand-500: var(--bjornstigen-500); --brand-600: var(--bjornstigen-600); --brand-700: var(--bjornstigen-700); --brand-800: var(--bjornstigen-800); --brand-900: var(--bjornstigen-900); --brand-950: var(--bjornstigen-950); --brand-primary: var(--bjornstigen-900); --brand-primary-hover: var(--bjornstigen-950); --brand-primary-active: var(--bjornstigen-950); } [data-brand="juniskar"] { --brand-50: var(--juniskar-50); --brand-100: var(--juniskar-100); --brand-200: var(--juniskar-200); --brand-300: var(--juniskar-300); --brand-400: var(--juniskar-400); --brand-500: var(--juniskar-500); --brand-600: var(--juniskar-600); --brand-700: var(--juniskar-700); --brand-800: var(--juniskar-800); --brand-900: var(--juniskar-900); --brand-950: var(--juniskar-950); --brand-primary: var(--juniskar-700); --brand-primary-hover: var(--juniskar-800); --brand-primary-active: var(--juniskar-900); } /* ---------- Semantiska tokens (ljust läge) ---------- Regel: intilliggande ytor skiljer minst 1.18:1 OCH separeras av en kant ≥ 2:1. Mjuka statusytor: bakgrund steg 200 + kant steg 500 (≥ 3:1) + ikon. Färgen får försvinna, kanten och ikonen finns kvar. */ :root { --background: var(--neutral-200); /* profilgrå #ececec, 1.18:1 mot vit yta */ --surface: var(--neutral-0); --surface-raised: var(--neutral-0); --surface-sunken: var(--neutral-200); --foreground: var(--neutral-900); --foreground-muted: var(--neutral-700); /* profilgrå #4b4b4b, 9.7:1 */ --border: var(--neutral-400); /* 2.0:1 mot vit */ --border-strong: var(--neutral-500); /* 3.05:1, uppfyller 1.4.11 */ --primary: var(--brand-primary); --primary-hover: var(--brand-primary-hover); --primary-active: var(--brand-primary-active); --primary-foreground: var(--neutral-0); --primary-soft: var(--brand-200); --primary-soft-foreground: var(--brand-900); --primary-soft-border: var(--brand-500); --ring: var(--brand-600); --success: var(--gronsta-700); --success-soft: var(--gronsta-200); --success-soft-foreground: var(--gronsta-900); --success-soft-border: var(--gronsta-500); --info: var(--vattjom-800); --info-soft: var(--vattjom-200); --info-soft-foreground: var(--vattjom-900); --info-soft-border: var(--vattjom-500); --destructive: var(--juniskar-700); --destructive-soft: var(--juniskar-200); --destructive-soft-foreground: var(--juniskar-900); --destructive-soft-border: var(--juniskar-500); --warning: var(--warning-700); --warning-soft: var(--warning-200); --warning-soft-foreground: var(--warning-900); --warning-soft-border: var(--warning-600); --shadow-color: 0 37 74; /* Elevation bär alltid en verklig kant: skuggan får försvinna, kanten får inte. */ --elevation-1: 0 1px 2px rgb(var(--shadow-color) / .06), 0 0 0 1px var(--border); --elevation-2: 0 4px 12px rgb(var(--shadow-color) / .10), 0 0 0 1px var(--border); --elevation-3: 0 16px 40px rgb(var(--shadow-color) / .18), 0 0 0 1px var(--border-strong); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius: var(--radius-md); /* shadcn */ --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Raleway", var(--font-ui); --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* ---------- shadcn/ui-kontrakt (alias) ---------- */ --card: var(--surface); --card-foreground: var(--foreground); --popover: var(--surface-raised); --popover-foreground: var(--foreground); --secondary: var(--neutral-200); --secondary-foreground: var(--neutral-900); --muted: var(--neutral-200); --muted-foreground: var(--foreground-muted); --accent: var(--primary-soft); --accent-foreground: var(--primary-soft-foreground); --destructive-foreground: var(--neutral-0); --input: var(--border-strong); --chart-1: var(--vattjom-700); --chart-2: var(--gronsta-600); --chart-3: var(--bjornstigen-600); --chart-4: var(--juniskar-600); --chart-5: var(--warning-500); --sidebar: var(--surface); --sidebar-foreground: var(--foreground); --sidebar-primary: var(--primary); --sidebar-primary-foreground: var(--primary-foreground); --sidebar-accent: var(--primary-soft); --sidebar-accent-foreground: var(--primary-soft-foreground); --sidebar-border: var(--border); --sidebar-ring: var(--ring); } /* ---------- Mörkt läge ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --background: var(--neutral-950); --surface: var(--neutral-900); --surface-raised: var(--neutral-800); --surface-sunken: var(--neutral-950); --foreground: var(--neutral-100); --foreground-muted: var(--neutral-400); --border: var(--neutral-700); --border-strong: var(--neutral-600); --primary: var(--brand-300); --primary-hover: var(--brand-200); --primary-active: var(--brand-100); --primary-foreground: var(--brand-950); --primary-soft: var(--brand-950); --primary-soft-foreground: var(--brand-200); --primary-soft-border: var(--brand-600); --ring: var(--brand-400); --success: var(--gronsta-400); --success-soft: var(--gronsta-950); --success-soft-foreground: var(--gronsta-200); --success-soft-border: var(--gronsta-600); --info: var(--vattjom-400); --info-soft: var(--vattjom-950); --info-soft-foreground: var(--vattjom-200); --info-soft-border: var(--vattjom-600); --destructive: var(--juniskar-400); --destructive-soft: var(--juniskar-950); --destructive-soft-foreground: var(--juniskar-200); --destructive-soft-border: var(--juniskar-600); --warning: var(--warning-400); --warning-soft: var(--warning-950); --warning-soft-foreground: var(--warning-200); --warning-soft-border: var(--warning-600); --secondary: var(--neutral-800); --secondary-foreground: var(--neutral-100); --muted: var(--neutral-800); --destructive-foreground: var(--juniskar-950); --elevation-1: 0 0 0 1px var(--border); --elevation-2: 0 4px 12px rgb(0 0 0 / .4), 0 0 0 1px var(--border); --elevation-3: 0 16px 40px rgb(0 0 0 / .6), 0 0 0 1px var(--border-strong); } } :root[data-theme="dark"] { --background: var(--neutral-950); --surface: var(--neutral-900); --surface-raised: var(--neutral-800); --surface-sunken: var(--neutral-950); --foreground: var(--neutral-100); --foreground-muted: var(--neutral-400); --border: var(--neutral-700); --border-strong: var(--neutral-600); --primary: var(--brand-300); --primary-hover: var(--brand-200); --primary-active: var(--brand-100); --primary-foreground: var(--brand-950); --primary-soft: var(--brand-950); --primary-soft-foreground: var(--brand-200); --primary-soft-border: var(--brand-600); --ring: var(--brand-400); --success: var(--gronsta-400); --success-soft: var(--gronsta-950); --success-soft-foreground: var(--gronsta-200); --success-soft-border: var(--gronsta-600); --info: var(--vattjom-400); --info-soft: var(--vattjom-950); --info-soft-foreground: var(--vattjom-200); --info-soft-border: var(--vattjom-600); --destructive: var(--juniskar-400); --destructive-soft: var(--juniskar-950); --destructive-soft-foreground: var(--juniskar-200); --destructive-soft-border: var(--juniskar-600); --warning: var(--warning-400); --warning-soft: var(--warning-950); --warning-soft-foreground: var(--warning-200); --warning-soft-border: var(--warning-600); --secondary: var(--neutral-800); --secondary-foreground: var(--neutral-100); --muted: var(--neutral-800); --destructive-foreground: var(--juniskar-950); --elevation-1: 0 0 0 1px var(--border); --elevation-2: 0 4px 12px rgb(0 0 0 / .4), 0 0 0 1px var(--border); --elevation-3: 0 16px 40px rgb(0 0 0 / .6), 0 0 0 1px var(--border-strong); } /* ---------- Hög kontrast: TV, projektor, dagsljus. Aktiveras med data-contrast="high" på eller automatiskt av prefers-contrast: more. Ytor ≥ 1.45:1, kanter ≥ 4.5:1, mjuka statusytor steg 300 + kant steg 700, skuggor ersätts av kanter. ---------- */ :root[data-contrast="high"]:not([data-theme="dark"]) { --background: var(--neutral-300); --surface: var(--neutral-0); --surface-raised: var(--neutral-0); --surface-sunken: var(--neutral-300); --foreground: var(--neutral-1000); --foreground-muted: var(--neutral-800); --border: var(--neutral-600); --border-strong: var(--neutral-700); --primary-soft: var(--brand-300); --primary-soft-foreground: var(--brand-950); --primary-soft-border: var(--brand-700); --ring: var(--brand-800); --success-soft: var(--gronsta-300); --success-soft-foreground: var(--gronsta-950); --success-soft-border: var(--gronsta-700); --info-soft: var(--vattjom-300); --info-soft-foreground: var(--vattjom-950); --info-soft-border: var(--vattjom-800); --destructive-soft: var(--juniskar-300); --destructive-soft-foreground: var(--juniskar-950); --destructive-soft-border: var(--juniskar-700); --warning-soft: var(--warning-300); --warning-soft-foreground: var(--warning-950); --warning-soft-border: var(--warning-700); --secondary: var(--neutral-300); --muted: var(--neutral-300); --elevation-1: 0 0 0 1px var(--border); --elevation-2: 0 0 0 2px var(--border); --elevation-3: 0 0 0 2px var(--border-strong); } :root[data-contrast="high"][data-theme="dark"] { --background: var(--neutral-1000); --surface: var(--neutral-900); --surface-raised: var(--neutral-800); --surface-sunken: var(--neutral-1000); --foreground: var(--neutral-0); --foreground-muted: var(--neutral-300); --border: var(--neutral-500); --border-strong: var(--neutral-400); --primary-soft-border: var(--brand-400); --success-soft-border: var(--gronsta-400); --info-soft-border: var(--vattjom-400); --destructive-soft-border: var(--juniskar-400); --warning-soft-border: var(--warning-400); --elevation-1: 0 0 0 1px var(--border); --elevation-2: 0 0 0 2px var(--border); --elevation-3: 0 0 0 2px var(--border-strong); } @media (prefers-contrast: more) { :root:not([data-contrast="normal"]):not([data-theme="dark"]) { --background: var(--neutral-300); --surface: var(--neutral-0); --surface-raised: var(--neutral-0); --surface-sunken: var(--neutral-300); --foreground: var(--neutral-1000); --foreground-muted: var(--neutral-800); --border: var(--neutral-600); --border-strong: var(--neutral-700); --primary-soft: var(--brand-300); --primary-soft-foreground: var(--brand-950); --primary-soft-border: var(--brand-700); --ring: var(--brand-800); --success-soft: var(--gronsta-300); --success-soft-foreground: var(--gronsta-950); --success-soft-border: var(--gronsta-700); --info-soft: var(--vattjom-300); --info-soft-foreground: var(--vattjom-950); --info-soft-border: var(--vattjom-800); --destructive-soft: var(--juniskar-300); --destructive-soft-foreground: var(--juniskar-950); --destructive-soft-border: var(--juniskar-700); --warning-soft: var(--warning-300); --warning-soft-foreground: var(--warning-950); --warning-soft-border: var(--warning-700); --secondary: var(--neutral-300); --muted: var(--neutral-300); --elevation-1: 0 0 0 1px var(--border); --elevation-2: 0 0 0 2px var(--border); --elevation-3: 0 0 0 2px var(--border-strong); } :root:not([data-contrast="normal"])[data-theme="dark"] { --background: var(--neutral-1000); --surface: var(--neutral-900); --surface-raised: var(--neutral-800); --surface-sunken: var(--neutral-1000); --foreground: var(--neutral-0); --foreground-muted: var(--neutral-300); --border: var(--neutral-500); --border-strong: var(--neutral-400); --primary-soft-border: var(--brand-400); --success-soft-border: var(--gronsta-400); --info-soft-border: var(--vattjom-400); --destructive-soft-border: var(--juniskar-400); --warning-soft-border: var(--warning-400); --elevation-1: 0 0 0 1px var(--border); --elevation-2: 0 0 0 2px var(--border); --elevation-3: 0 0 0 2px var(--border-strong); } } @media (prefers-contrast: more) and (prefers-color-scheme: dark) { :root:not([data-contrast="normal"]):not([data-theme="light"]) { --background: var(--neutral-1000); --surface: var(--neutral-900); --surface-raised: var(--neutral-800); --surface-sunken: var(--neutral-1000); --foreground: var(--neutral-0); --foreground-muted: var(--neutral-300); --border: var(--neutral-500); --border-strong: var(--neutral-400); --primary-soft-border: var(--brand-400); --success-soft-border: var(--gronsta-400); --info-soft-border: var(--vattjom-400); --destructive-soft-border: var(--juniskar-400); --warning-soft-border: var(--warning-400); --elevation-1: 0 0 0 1px var(--border); --elevation-2: 0 0 0 2px var(--border); --elevation-3: 0 0 0 2px var(--border-strong); } } /* ---------- Tailwind v4 / shadcn ---------- */ @theme inline { --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-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-success: var(--success); --color-success-soft: var(--success-soft); --color-success-soft-foreground: var(--success-soft-foreground); --color-success-soft-border: var(--success-soft-border); --color-info: var(--info); --color-info-soft: var(--info-soft); --color-info-soft-foreground: var(--info-soft-foreground); --color-info-soft-border: var(--info-soft-border); --color-warning: var(--warning); --color-warning-soft: var(--warning-soft); --color-warning-soft-foreground: var(--warning-soft-foreground); --color-warning-soft-border: var(--warning-soft-border); --color-destructive-soft: var(--destructive-soft); --color-destructive-soft-foreground: var(--destructive-soft-foreground); --color-destructive-soft-border: var(--destructive-soft-border); --color-primary-soft: var(--primary-soft); --color-primary-soft-foreground: var(--primary-soft-foreground); --color-primary-soft-border: var(--primary-soft-border); --color-surface: var(--surface); --color-surface-raised: var(--surface-raised); --color-surface-sunken: var(--surface-sunken); --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); --radius-sm: var(--radius-sm); --radius-md: var(--radius-md); --radius-lg: var(--radius-lg); --radius-xl: var(--radius-xl); --shadow-elevation-1: var(--elevation-1); --shadow-elevation-2: var(--elevation-2); --shadow-elevation-3: var(--elevation-3); --font-sans: var(--font-ui); --font-display: var(--font-display); --font-mono: var(--font-mono); } :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }