/* ======================================================================== färgskalan Appens färgskala, översatt till Bootstraps egna tokens. Designexporten bar en varm gråskala — neutraler som drog åt brunt — och en enda avvikande färg, en ockra accent. Neutralerna är nu utbytta mot en dämpad blå skala; ockran är kvar, oförändrad, och är fortfarande den enda färg som sticker ut. Blått och ockra är varandras motfärger, så accenten bär mer mot den blå bottnen än den gjorde mot den grå. Bootstrap kommer med en kall gråskala och #0d6efd; det som står här är *bara* översättningen: varje rad sätter om en variabel Bootstrap redan definierar. Filen är egen och laddas efter bootstrap.min.css men före site.css, därför att det här är en avgränsad sak — vilka färger appen har — och inte layout. site.css rör inte färgskalan; den räknar fram sina toner ur --bs-body-bg och --bs-body-color och följer därför med hit av sig själv, liksom Bemannings --stf-* som redan bär exportens avdelningsfärger. Båda temana sätts fullständigt. Inget värde får stå i bara ett av blocken: ett token som saknas i mörkt tema faller tillbaka på Bootstraps original, och då hamnar en grå eller knallblå fläck mitt i den dämpade skalan. Skalan, ljus · mörk: botten #e8eef6 · #111a27 text #18212e · #dde5ef lyft yta #f5f8fc · #223047 nedsänkt #d9e3ef · #1a2537 linje #c0cddd · #34445e grå knapp #4c5a6e · #8d9cb2 Ockran (exportens): accent 100 #fff3e4 · 200 #ffe3bf · 300 #facb8d · 400 #e1ad66 · 500 #c28d41 600 #a06f24 · 700 #7d5411 · 800 #5a3b0a · 900 #3a270d Skriv aldrig en stjärna följd av ett snedstreck inne i en kommentar här, inte ens i en sökväg. Den avslutar kommentaren, resten av texten blir en trasig selektor, och den sväljer nästa regel. Just det hände en gång: nästa regel var hela det ljusa temat, som därför aldrig gällde — vit botten och Bootstraps blå — medan det mörka blocket längre ned klarade sig. */ /* --------------------------------------------------------------------- ljust tema En ljus, lätt blå botten — inte vit, som bländar en hel arbetsdag, och inte så mättad att den färgar texten. Texten är en mörk bläckblå i stället för svart: 13.9 mot bottnen. Accenten är två toner här, och det är skillnaden mot det mörka temat. Som *fylld yta* — primärknappen, den aktiva fliken, förloppsstapeln — är den samma ockra som i mörkt tema, 400 (#e1ad66), med mörk text på: 8.0 mot #18212e. Knapparna ska ha samma färg i båda temana; det är dem man känner igen appen på. Den tonen heter --skuld-accent. Som *text och linje* mot den ljusa bottnen duger 400 inte: under 2, en länk man inte ser. Där tas 700 (#7d5411), som ger 5.7 mot sidbotten och 5.1 mot den nedsänkta ytan, och det är den som står i --bs-primary — länkar, konturknappens text och ram, fokusramar, dagens markering, kryssrutans fyllning (vars vita bock kräver den mörka tonen). Samma kulör, en ton mörkare, av läsbarhetsskäl. */ :root, [data-bs-theme="light"] { --bs-body-bg: #e8eef6; --bs-body-bg-rgb: 232, 238, 246; --bs-body-color: #18212e; --bs-body-color-rgb: 24, 33, 46; /* Emphasis är den fullaste tonen av brödtexten och bär bland annat navigeringens länkar. Inte #000: skalans botten är en djup bläckblå, samma kulör som texten. */ --bs-emphasis-color: #0e1520; --bs-emphasis-color-rgb: 14, 21, 32; --bs-secondary-color: rgba(24, 33, 46, 0.75); --bs-secondary-color-rgb: 24, 33, 46; --bs-tertiary-color: rgba(24, 33, 46, 0.5); --bs-tertiary-color-rgb: 24, 33, 46; /* Två panelnivåer. Den tertiära ligger *ljusare* än sidan och inte mörkare — panelen lyfter ur bakgrunden i stället för att sjunka ned i den, nästan vit med ett stänk blått. Den sekundära är den nedsänkta ytan: randiga tabellrader, avstängda fält. */ --bs-tertiary-bg: #f5f8fc; --bs-tertiary-bg-rgb: 245, 248, 252; --bs-secondary-bg: #d9e3ef; --bs-secondary-bg-rgb: 217, 227, 239; --bs-border-color: #c0cddd; --bs-border-color-translucent: rgba(24, 33, 46, 0.175); --bs-primary: #7d5411; --bs-primary-rgb: 125, 84, 17; --bs-primary-text-emphasis: #5a3b0a; --bs-primary-bg-subtle: #fff3e4; --bs-primary-border-subtle: #ffe3bf; --bs-link-color: #7d5411; --bs-link-color-rgb: 125, 84, 17; --bs-link-hover-color: #5a3b0a; --bs-link-hover-color-rgb: 90, 59, 10; --bs-focus-ring-color: rgba(125, 84, 17, 0.25); /* Den grå knappen och .text-secondary är en skiffergrå ur samma blå skala. */ --bs-secondary: #4c5a6e; --bs-secondary-rgb: 76, 90, 110; /* Texten på den fyllda grå knappen, och knappen under pekaren. Samma tanke som accentens tre tokens nedan: 6.6 här, 6.3 i mörkt tema där både ytan och texten byter håll. */ --skuld-on-secondary: #f5f8fc; --skuld-secondary-hover: #36424f; /* Den fyllda accentytan, texten som står *på* den, och ytan under pekaren. Fyllningen är densamma i båda temana; hover går åt det håll som syns mot bottnen — mörkare här, ljusare i mörkt tema. Mörk text på 500 ger 5.5. */ --skuld-accent: #e1ad66; --skuld-on-accent: #18212e; --skuld-accent-hover: #c28d41; } /* --------------------------------------------------------------------- mörkt tema En dämpad marinblå botten — mättad nog att läsas som blå, mörk nog att inte lysa. Texten är en kall, aningen grå vit (13.8), inte ren vit: ren vit på mörk botten flimrar i långa tabeller. Här vänder allt utom den fyllda accenten. 400 (#e1ad66) ger 8.6 mot bottnen och duger därför både som text och som yta: --bs-primary och --skuld-accent är samma värde här. Som fylld yta bär den mörk text, precis som i ljust tema. */ [data-bs-theme="dark"] { --bs-body-bg: #111a27; --bs-body-bg-rgb: 17, 26, 39; --bs-body-color: #dde5ef; --bs-body-color-rgb: 221, 229, 239; --bs-emphasis-color: #f3f6fa; --bs-emphasis-color-rgb: 243, 246, 250; --bs-secondary-color: rgba(221, 229, 239, 0.75); --bs-secondary-color-rgb: 221, 229, 239; --bs-tertiary-color: rgba(221, 229, 239, 0.5); --bs-tertiary-color-rgb: 221, 229, 239; /* Den lyfta ytan och en blandning mot bottnen för den svagare. Ordningen är omvänd mot det ljusa temat, precis som där. */ --bs-secondary-bg: #223047; --bs-secondary-bg-rgb: 34, 48, 71; --bs-tertiary-bg: #1a2537; --bs-tertiary-bg-rgb: 26, 37, 55; --bs-border-color: #34445e; --bs-border-color-translucent: rgba(243, 246, 250, 0.15); --bs-primary: #e1ad66; --bs-primary-rgb: 225, 173, 102; --bs-primary-text-emphasis: #facb8d; --bs-primary-bg-subtle: #3a270d; --bs-primary-border-subtle: #7d5411; --bs-link-color: #e1ad66; --bs-link-color-rgb: 225, 173, 102; --bs-link-hover-color: #facb8d; --bs-link-hover-color-rgb: 250, 203, 141; --bs-focus-ring-color: rgba(225, 173, 102, 0.25); --bs-secondary: #8d9cb2; --bs-secondary-rgb: 141, 156, 178; --skuld-on-secondary: #111a27; --skuld-secondary-hover: #b4c0d0; --skuld-accent: #e1ad66; --skuld-on-accent: #18212e; --skuld-accent-hover: #facb8d; } /* ------------------------------------------------------- komponenter med inbränd blå Bootstrap 5.3 härleder det mesta ur tokens ovan, men ett fåtal komponenter bär #0d6efd som ett bokstavligt värde i den byggda CSS:en. De måste sättas om var för sig; de ärver ingenting. Ordningen i länkarna avgör: filen laddas efter bootstrap.min.css och vinner på lika specificitet. Bara de komponenter appen faktiskt använder står här. */ .btn-primary { --bs-btn-color: var(--skuld-on-accent); --bs-btn-bg: var(--skuld-accent); --bs-btn-border-color: var(--skuld-accent); --bs-btn-hover-color: var(--skuld-on-accent); --bs-btn-hover-bg: var(--skuld-accent-hover); --bs-btn-hover-border-color: var(--skuld-accent-hover); --bs-btn-active-color: var(--skuld-on-accent); --bs-btn-active-bg: var(--skuld-accent-hover); --bs-btn-active-border-color: var(--skuld-accent-hover); --bs-btn-disabled-color: var(--skuld-on-accent); --bs-btn-disabled-bg: var(--skuld-accent); --bs-btn-disabled-border-color: var(--skuld-accent); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); } .btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: var(--skuld-on-accent); --bs-btn-hover-bg: var(--skuld-accent); --bs-btn-hover-border-color: var(--skuld-accent); --bs-btn-active-color: var(--skuld-on-accent); --bs-btn-active-bg: var(--skuld-accent); --bs-btn-active-border-color: var(--skuld-accent); --bs-btn-disabled-color: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); } /* Den grå knappen bär #6c757d inbränt — en neutral grå som inte hör till den blå skalan — och vit text under pekaren, som i mörkt tema stod mot en ljus grå yta med kontrast under 3. Båda hämtas ur skalan i stället. Appens vanligaste knapp är konturvarianten, så det här syns överallt. */ .btn-secondary { --bs-btn-color: var(--skuld-on-secondary); --bs-btn-bg: var(--bs-secondary); --bs-btn-border-color: var(--bs-secondary); --bs-btn-hover-color: var(--skuld-on-secondary); --bs-btn-hover-bg: var(--skuld-secondary-hover); --bs-btn-hover-border-color: var(--skuld-secondary-hover); --bs-btn-active-color: var(--skuld-on-secondary); --bs-btn-active-bg: var(--skuld-secondary-hover); --bs-btn-active-border-color: var(--skuld-secondary-hover); --bs-btn-disabled-color: var(--skuld-on-secondary); --bs-btn-disabled-bg: var(--bs-secondary); --bs-btn-disabled-border-color: var(--bs-secondary); --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb); } .btn-outline-secondary { --bs-btn-color: var(--bs-secondary); --bs-btn-border-color: var(--bs-secondary); --bs-btn-hover-color: var(--skuld-on-secondary); --bs-btn-hover-bg: var(--bs-secondary); --bs-btn-hover-border-color: var(--bs-secondary); --bs-btn-active-color: var(--skuld-on-secondary); --bs-btn-active-bg: var(--bs-secondary); --bs-btn-active-border-color: var(--bs-secondary); --bs-btn-disabled-color: var(--bs-secondary); --bs-btn-disabled-border-color: var(--bs-secondary); --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb); } /* Kryssrutor och radioknappar. Bocken och pricken är vita svg:er inbakade som data-URI:er och lämnas som de är: i ljust tema står de mot mörk ockra (--bs-primary, inte den ljusa --skuld-accent, just för bockens skull), och i mörkt tema mot ljus ockra med kontrast 3.4 — under gränsen för text, men det här är en grafisk form och inte en bokstav, och rutans ram bär formen lika mycket som fyllningen. */ .form-check-input:checked, .form-check-input[type="checkbox"]:indeterminate { background-color: var(--bs-primary); border-color: var(--bs-primary); } /* Fältens fokusram. Bootstrap sätter #86b7fe rakt av; ringen utanför den kommer från --bs-focus-ring-color och är redan omsatt ovan. */ .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--bs-primary); } .nav-pills { --bs-nav-pills-link-active-color: var(--skuld-on-accent); --bs-nav-pills-link-active-bg: var(--skuld-accent); } /* Den valda raden i en lista — avdelningarna på Användare. */ .list-group { --bs-list-group-active-color: var(--skuld-on-accent); --bs-list-group-active-bg: var(--skuld-accent); --bs-list-group-active-border-color: var(--skuld-accent); } .dropdown-menu { --bs-dropdown-link-active-color: var(--skuld-on-accent); --bs-dropdown-link-active-bg: var(--skuld-accent); } .progress, .progress-stacked { --bs-progress-bar-bg: var(--skuld-accent); } /* Räknarbrickorna. Bootstrap låser texten till vit med !important, och i mörkt tema är den grå ytan ljus: vitt på #8d9cb2 ger under 3. Texten följer ytan, som på den grå knappen. */ .text-bg-secondary { color: var(--skuld-on-secondary) !important; }