/* ───────────────────────────────────────────────────────────────────────── Mitt KOSA — "Mjuk" theme ───────────────────────────────────────────────────────────────────────── Drop into your theme switcher. All tokens are scoped to [data-theme="mjuk"] on a parent (usually or ). Components read CSS variables, so nothing else needs to change when the theme is active. Variants of the same theme (turn on/off independently): [data-theme="mjuk"] → defaults (vit bakgrund) [data-theme="mjuk"][data-pills="vivid"] → fyllda Monday-stil piller [data-theme="mjuk"][data-pills="muted"] → dämpade pastellpiller (default) [data-theme="mjuk"][data-bg="cream"] → varmare krämbakgrund [data-theme="mjuk"][data-radius="more"] → mer rundade hörn [data-theme="mjuk"][data-radius="less"] → vassare hörn [data-theme="mjuk"][data-density="tight"] → tätare rader [data-theme="mjuk"][data-density="loose"] → luftigare rader The "vivid" pill palette is what we landed on after the latest iteration. ───────────────────────────────────────────────────────────────────────── */ /* ── Font ──────────────────────────────────────────────────────────────── Plus Jakarta Sans 400/500/600/700. If your app already loads fonts via next/font or similar, drop this @import and set --kosa-font instead. */ @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap"); /* ── Base theme tokens ─────────────────────────────────────────────────── */ [data-theme="mjuk"] { /* Typography */ --kosa-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --kosa-text-xs: 11px; --kosa-text-sm: 12.5px; --kosa-text-md: 13.5px; --kosa-text-lg: 15px; --kosa-text-xl: 18px; --kosa-text-2xl: 22px; --kosa-text-3xl: 26px; --kosa-tracking-tight: -0.6px; --kosa-tracking-snug: -0.3px; --kosa-tracking-soft: -0.1px; --kosa-tracking-wide: 0.4px; /* Surfaces */ --kosa-bg: #FFFFFF; --kosa-bg-deep: #FFFFFF; --kosa-surface: #FFFFFF; --kosa-surface-2: #FBF7EF; --kosa-col-bg: #F7F5EF; --kosa-active-bg: #F5F2EC; /* Ink (text) */ --kosa-ink: #2A2722; --kosa-ink-soft: #6B655B; --kosa-ink-faint: #A39C8E; /* Lines */ --kosa-line: #EAE3D3; --kosa-line-soft: #EDE5D2; /* Accent — warm terracotta */ --kosa-accent: #C97B5C; --kosa-accent-soft: #F4E2D6; --kosa-accent-ink: #5B3A28; --kosa-accent-glow: rgba(201,123,92,0.30); --kosa-accent-grad: linear-gradient(180deg, #F4E2D6 0%, #FBEFE5 100%); /* Status palette — muted */ --kosa-amber-bg: #F4EBD0; --kosa-amber-fg: #7A5C1F; --kosa-green-bg: #E3EFE2; --kosa-green-fg: #3F6A4B; --kosa-blue-bg: #E2E8F2; --kosa-blue-fg: #3D5680; --kosa-rose-bg: #F2DDE0; --kosa-rose-fg: #7E3B49; --kosa-lilac-bg: #E8E2F0; --kosa-lilac-fg: #5B4A7A; --kosa-ink-bg: #EEE7DA; /* Status palette — vivid */ --kosa-vivid-amber: #E89B3C; --kosa-vivid-green: #5BAB7A; --kosa-vivid-blue: #5B85C8; --kosa-vivid-rose: #D4708A; --kosa-vivid-lilac: #9C8AB8; /* Radius scale */ --kosa-radius-item: 9px; --kosa-radius-btn: 10px; --kosa-radius-card: 14px; --kosa-radius-pill: 999px; /* Spacing */ --kosa-row-py: 11px; /* Shadows */ --kosa-shadow-card: 0 1px 2px rgba(42,39,34,0.04), 0 0 0 1px var(--kosa-line-soft); --kosa-shadow-pop: 0 8px 24px -6px rgba(201,123,92,0.5), 0 2px 4px rgba(0,0,0,0.06); /* Defaults */ color-scheme: light; background: var(--kosa-bg); color: var(--kosa-ink); font-family: var(--kosa-font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ── Variant: cream background (warmer) ─────────────────────────────── */ [data-theme="mjuk"][data-bg="cream"] { --kosa-bg: #F6F1E8; --kosa-bg-deep: #EEE7DA; --kosa-col-bg: #EEE7DA; --kosa-active-bg: #FFFFFF; --kosa-line-soft: #F1EBDB; } /* ── Variant: soft off-white ────────────────────────────────────────── */ [data-theme="mjuk"][data-bg="soft"] { --kosa-bg: #FAFAF7; --kosa-bg-deep: #FAFAF7; --kosa-col-bg: #F2EEE5; --kosa-active-bg: #FFFFFF; --kosa-line-soft: #ECE5D2; } /* ── Density variants ──────────────────────────────────────────────── */ [data-theme="mjuk"][data-density="tight"] { --kosa-row-py: 7px; } [data-theme="mjuk"][data-density="loose"] { --kosa-row-py: 16px; } /* ── Radius variants ───────────────────────────────────────────────── */ [data-theme="mjuk"][data-radius="less"] { --kosa-radius-item: 5px; --kosa-radius-btn: 6px; --kosa-radius-card: 8px; } [data-theme="mjuk"][data-radius="more"] { --kosa-radius-item: 14px; --kosa-radius-btn: 16px; --kosa-radius-card: 22px; } /* ═════════════════════════════════════════════════════════════════════ LEGACY BRIDGE Mappar Mjuks tokens till befintliga KOSA-vars som mitt-kosa.css läser. Detta är det som faktiskt får hela Mitt KOSA att rendera i Mjuks look utan att vi rör en enda annan CSS-rad. ═════════════════════════════════════════════════════════════════════ */ html[data-theme="mjuk"] { /* Guld — terracotta-accenten ersätter guld i Mjuk */ --gold: #C97B5C; --gold-light: #E2A285; --gold-dim: rgba(201,123,92,.15); --gold-bg: #F4E2D6; --gold-border: #E5BFA8; /* Bakgrunder */ --bg: #FFFFFF; --card: #FFFFFF; --white: #FFFFFF; --card2: #FBF7EF; --surface: #FFFFFF; /* Ramar */ --border: #EAE3D3; --border2: #EDE5D2; --border-strong: #D6CDB7; /* Text */ --text: #2A2722; --text2: #4A453E; --text-muted: #6B655B; --muted: #6B655B; --muted2: #A39C8E; /* Semantiska — vivid Mjuk-toner */ --pos: #3F6A4B; --pos-bg: #E3EFE2; --neg: #B83232; --neg-bg: #F2DDE0; --blue: #3D5680; --blue-bg: #E2E8F2; --amber: #7A5C1F; --amber-bg: #F4EBD0; /* Accent (används i en del verktyg) */ --accent: #C97B5C; /* Skuggor */ --shadow: 0 1px 2px rgba(42,39,34,0.04); --shadow-md: 0 4px 12px rgba(42,39,34,0.08), 0 2px 4px rgba(42,39,34,0.04); /* Prognosverktyget-specifika (om någon Mitt KOSA-vy mot förmodan läser dessa) */ --green-bg: rgba(91,171,122,.10); --green-border: rgba(91,171,122,.25); --yr-bg: rgba(91,133,200,.06); --yr-border: rgba(91,133,200,.18); /* Typsnitt — Mjuk byter ut Inter mot Plus Jakarta Sans */ font-family: var(--kosa-font); } /* Body-font-arv: mitt-kosa.css sätter font-family på , så vi måste explicit övertrampa där också. */ html[data-theme="mjuk"] body { font-family: var(--kosa-font); } /* ═════════════════════════════════════════════════════════════════════ Component classes Opt-in utility-klasser. Behövs inte för att Mitt KOSA ska se mjuk ut (bridge:n ovan tar hand om det), men finns här för nya komponenter. ═════════════════════════════════════════════════════════════════════ */ /* ── Pill (status / type / agent) ──────────────────────────────────── */ .kosa-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--kosa-radius-pill); font-size: var(--kosa-text-sm); font-weight: 500; letter-spacing: var(--kosa-tracking-soft); white-space: nowrap; } .kosa-pill[data-bold="true"] { font-weight: 600; } /* Muted tones (default) */ .kosa-pill[data-tone="amber"] { background: var(--kosa-amber-bg); color: var(--kosa-amber-fg); } .kosa-pill[data-tone="green"] { background: var(--kosa-green-bg); color: var(--kosa-green-fg); } .kosa-pill[data-tone="blue"] { background: var(--kosa-blue-bg); color: var(--kosa-blue-fg); } .kosa-pill[data-tone="rose"] { background: var(--kosa-rose-bg); color: var(--kosa-rose-fg); } .kosa-pill[data-tone="lilac"] { background: var(--kosa-lilac-bg); color: var(--kosa-lilac-fg); } .kosa-pill[data-tone="ink"] { background: var(--kosa-ink-bg); color: var(--kosa-ink); } .kosa-pill[data-tone="faint"] { background: transparent; color: var(--kosa-ink-faint); } /* Vivid override — filled, white text. Activate on any pill by wrapping the surface in [data-pills="vivid"] OR by passing data-vivid="true" on the pill. */ [data-pills="vivid"] .kosa-pill:not([data-tone="faint"]), .kosa-pill[data-vivid="true"]:not([data-tone="faint"]) { color: #fff; font-weight: 600; padding: 4px 12px; } [data-pills="vivid"] .kosa-pill[data-tone="amber"], .kosa-pill[data-vivid="true"][data-tone="amber"] { background: var(--kosa-vivid-amber); } [data-pills="vivid"] .kosa-pill[data-tone="green"], .kosa-pill[data-vivid="true"][data-tone="green"] { background: var(--kosa-vivid-green); } [data-pills="vivid"] .kosa-pill[data-tone="blue"], .kosa-pill[data-vivid="true"][data-tone="blue"] { background: var(--kosa-vivid-blue); } [data-pills="vivid"] .kosa-pill[data-tone="rose"], .kosa-pill[data-vivid="true"][data-tone="rose"] { background: var(--kosa-vivid-rose); } [data-pills="vivid"] .kosa-pill[data-tone="lilac"], .kosa-pill[data-vivid="true"][data-tone="lilac"] { background: var(--kosa-vivid-lilac); } [data-pills="vivid"] .kosa-pill[data-tone="ink"], .kosa-pill[data-vivid="true"][data-tone="ink"] { background: var(--kosa-ink); } /* Dot accent (only on muted pills) */ .kosa-pill__dot { width: 6px; height: 6px; border-radius: 99px; background: currentColor; opacity: 0.7; flex: 0 0 auto; } [data-pills="vivid"] .kosa-pill__dot, .kosa-pill[data-vivid="true"] .kosa-pill__dot { display: none; } /* ── Card ──────────────────────────────────────────────────────────── */ .kosa-card { background: var(--kosa-surface); border-radius: var(--kosa-radius-card); box-shadow: var(--kosa-shadow-card); } /* ── Button ────────────────────────────────────────────────────────── */ .kosa-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--kosa-radius-btn); font-family: inherit; font-size: var(--kosa-text-md); font-weight: 500; letter-spacing: var(--kosa-tracking-soft); background: var(--kosa-surface); color: var(--kosa-ink); border: 1px solid var(--kosa-line); cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; } .kosa-btn:hover { background: var(--kosa-surface-2); } .kosa-btn--primary { background: var(--kosa-accent); color: #fff; border: none; font-weight: 600; padding: 9px 16px; box-shadow: 0 1px 2px var(--kosa-accent-glow); } .kosa-btn--primary:hover { filter: brightness(0.96); } .kosa-btn--icon { width: 28px; height: 28px; padding: 0; justify-content: center; border-radius: var(--kosa-radius-item); color: var(--kosa-ink-soft); } /* ── Input ─────────────────────────────────────────────────────────── */ .kosa-input { background: var(--kosa-surface); border: 1px solid var(--kosa-line); border-radius: var(--kosa-radius-btn); padding: 7px 12px; font-family: inherit; font-size: var(--kosa-text-md); color: var(--kosa-ink); outline: none; transition: border-color 0.12s ease, box-shadow 0.12s ease; } .kosa-input:focus { border-color: var(--kosa-accent); box-shadow: 0 0 0 3px var(--kosa-accent-glow); } .kosa-input::placeholder { color: var(--kosa-ink-faint); } /* ── Table row ─────────────────────────────────────────────────────── */ .kosa-row { padding: var(--kosa-row-py) 18px; border-radius: var(--kosa-radius-btn); font-size: var(--kosa-text-md); color: var(--kosa-ink); cursor: pointer; transition: background 0.1s ease; } .kosa-row:hover { background: var(--kosa-surface-2); } .kosa-row[data-open="true"]{ background: var(--kosa-accent-soft); } /* ── Sidebar item ──────────────────────────────────────────────────── */ .kosa-nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--kosa-radius-item); font-size: var(--kosa-text-md); color: var(--kosa-ink); font-weight: 500; cursor: pointer; transition: background 0.1s ease; } .kosa-nav-item:hover { background: var(--kosa-surface-2); } .kosa-nav-item[data-active="true"] { background: var(--kosa-active-bg); box-shadow: 0 1px 2px rgba(42,39,34,0.04); font-weight: 600; } /* ── Avatar ────────────────────────────────────────────────────────── */ .kosa-avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 99px; background: var(--kosa-accent); color: #fff; font-size: 11px; font-weight: 600; } .kosa-avatar--sm { width: 20px; height: 20px; font-size: 10px; } .kosa-avatar--lg { width: 36px; height: 36px; font-size: 13px; } /* ── Eyebrow label (uppercase mini-heading) ────────────────────────── */ .kosa-label { font-size: var(--kosa-text-xs); font-weight: 600; color: var(--kosa-ink-faint); letter-spacing: var(--kosa-tracking-wide); text-transform: uppercase; }