/*================================================================== // // c2/light.css // // C2 – Fordonsappens utseende på webben, ljust tema. ENBART FÄRGER. // // Laddas av layout/head.php EFTER mallens theme/light.css och // skriver över varje variabel där. Mallens fil lämnas orörd, så att // en uppdatering från Webling (`git merge upstream`) aldrig kan // skriva över C2 - och får mallen en ny variabel finns den ändå, // med mallens värde, tills den läggs till här. // // ALLA VARIABLER HÄR MÅSTE FINNAS I c2/dark.css OCKSÅ, och varje // var(--namn) i c2/c2.css måste finnas i båda. _dev/tests/va_c2_test.php // kontrollerar det. // // // OM UPPSÄTTNINGEN // // Appens palett ur Color.kt i VehicleApp, "sand och kol": varm // botten, varmvita kort, kol som grundton, varm text- och // linjeskala. Syftet är igenkänning - den som laddat ner appen ska // se att det är samma produkt, inte en sajt om den. // // Vridningen går hela vägen igenom eller inte alls. En varm botten // under svala grå linjer och sval grå text ser inte varm ut, den // ser smutsig ut - samma lärdom som i appen. // // ORANGE ÄR RANSONERAD, precis som i appen: plusknappen, den valda // fliken i bottenmenyn, länkarna och statusen "snart". Tolv orange // ytor blir en färgkarusell och gör grundtonen till bakgrundsbrus. // // EN MEDVETEN AVVIKELSE FRÅN APPEN: "snart" har två toner här. // Se --color-status-soon-ink längre ner. // ==================================================================*/ :root { /*-------------------------------------------------------------- // Bakgrund och ytor // // Tre nivåer: sidans botten, en panel ovanpå den, och något // som ligger ovanpå panelen (en tabellrubrik, ett märke). // // Bottnen är appens AppBackground (varm sand #F2EDE1) och // panelen appens Surface (varmvit #FFFDF9). Rent vitt mot sand // läses som en blåaktig fläck - därför varmvitt, som i appen. // --surface-strong och --surface-hover är appens NeutralHighest // och NeutralDim ur samma varma trappa. --------------------------------------------------------------*/ --color-bg: #f2ede1; --color-surface: #fffdf9; --color-surface-strong: #e7e3d8; --color-surface-hover: #e1dcd1; /* Bakom en ruta som fällts ut (.modal::backdrop). Mörkläggningen hör till TEMAT och inte till formen: samma genomskinliga svarta yta ger olika resultat på en ljus och en mörk botten, och i ett ljust tema räcker det med mindre. Tonad mot appens Ink, så att skuggan inte blir blågrå. */ --color-backdrop: rgba(31, 28, 24, 0.45); /*-------------------------------------------------------------- // Text // // Fyra styrkor. --text är brödtext, --heading det som ska // sticka fram, --muted det som får träda tillbaka och // --faint det som knappt behöver läsas. // // --heading = appens Ink, --muted = appens Subtext. // // --text har ingen motsvarighet i appen, som bara har rubrik // och bildtext. Webben har långa stycken, och brödtext i // rubrikens nästan-svart blir tung över tio rader. // // --faint ligger på 3,5:1 mot kortytan och klarar alltså INTE // kravet för brödtext. Den ska bara bära sådant som står i // klartext någon annanstans också. --------------------------------------------------------------*/ --color-text: #3a352e; --color-heading: #1f1c18; --color-text-muted: #6a645b; --color-text-faint: #8e877c; /*-------------------------------------------------------------- // Linjer // // --border är appens OutlineBorder: knappramar, avdelare och // fältramar. Korten har samma ton men en egen roll, se // --color-card-border längre ner. --------------------------------------------------------------*/ --color-border: #dcd7cc; --color-border-soft: #e7e3d8; --color-border-strong: #bdb6a9; /*-------------------------------------------------------------- // Formulärfält // // Rutan man skriver i ska skilja sig från panelen bakom, så // att det syns var man kan skriva. Fälten är fyllda med // kortytan, som appens vita ifyllningsfält sedan C2. // // Ramen är ett steg MÖRKARE än appens. På webben står fälten // oftare direkt på sanden, och med appens ram (1,2:1 mot // bottnen) syns fältets kant knappt på en ljusstark skärm. --------------------------------------------------------------*/ --color-input: #fffdf9; --color-input-border: #cac3b6; /*-------------------------------------------------------------- // Accent // // DET HÄR ÄR RADEN DU BYTER FÖRST i ett nytt projekt. // Huvudknappen, logotypmärket och fokusmarkeringen hämtar // alla härifrån. // // Appens BrandGraphite: kol med brun ton, inte svart. Orange // är inte huvudknappens färg här heller - den är till för det // ENDA som ska dra blicken på en sida. --------------------------------------------------------------*/ --color-accent: #2e2a24; --color-accent-hover: #1f1c18; --color-on-accent: #fffdf9; /*-------------------------------------------------------------- // Länkar och fokus // // Länkfärgen är appens BrandOrangeInk och inte blå - mörkad // ETT STEG för webben. Appens ton (#B34F06) ligger på 5,1:1 mot // kortytan men 4,45:1 mot sanden, en hårsmån under 4,5:1. I // appen står orange text aldrig direkt på bottnen; på webben gör // länkar det hela tiden, och base.css stryker inte under dem - // färgen är alltså det enda som skiljer en länk från texten runt // den. #A84A05 är samma kulör och ger 4,9:1 mot sanden och 4,6:1 // mot det ljusa bandet. Skillnaden syns inte sida vid sida. // // --brand-ink längre ner är kvar på appens exakta värde; den // används på kortytor, där appens ton räcker. --------------------------------------------------------------*/ --color-link: #a84a05; --color-link-hover: #8c3d04; --color-focus: #a84a05; /*-------------------------------------------------------------- // Signalfärger // // De fyra typerna i meddelanderutorna, plus knappen som tar // bort något. Varningen är "snart"-tonens läsbara variant, så // att en varning på sajten och "åtgärdas snart" i appen är // samma orange. --------------------------------------------------------------*/ --color-info: #5a5349; --color-success: #26794a; --color-warning: #a85a00; --color-danger: #b5372a; /* Ramen runt en farlig knapp innan man pekat på den, och texten på den när man gjort det */ --color-danger-border: #e3aca4; --color-on-danger: #fffdf9; /*-------------------------------------------------------------- // APPENS EGNA FÄRGER // // Allt nedanför den här raden finns inte i mallen. Det är // färger som betyder något BESTÄMT i VehicleApp, och som // startsidan lånar för att visa samma sak på samma sätt. // // Ändrar du en av dem: ändra motsvarande i appens Color.kt // också, annars börjar de två glida isär. Det är den enda // anledningen till att de står uppräknade med sina app-namn. --------------------------------------------------------------*/ /* Märkesorange. --brand är YTA (ljus text ovanpå), --brand-ink är TEXT på ljus botten. De är två färger för att den ljusa inte klarar kontrastkravet som text. */ --color-brand: #e96908; /* Color.kt BrandOrange */ --color-brand-ink: #b34f06; /* Color.kt BrandOrangeInk */ /* Plattan bakom bottenmenyns valda flik. Appens NavSelectedIndicator: märkesorangen på 14 %, så att ikonen och etiketten i --brand-ink står på en platta i samma kulör. */ --color-nav-indicator: rgba(233, 105, 8, 0.14); /* KORTENS KANT - egen roll, skild från --border. Knappramens ton, som appens CardBorder sedan Calles val i TODO_LAYOUT punkt 104: kort, kort i kort, knappar och fält har samma tunna kant i samma färg. Utan kant hade knapparna ram men inte korten bredvid, och sidan såg inte enhetlig ut. Ett kort som ligger INUTI ett annat kort har ingen mörkare botten under sig - ljust ligger mot ljust - och behöver kanten även om den här släcks igen: --card-border-nested = appens NestedCardBorder. Just nu har de två samma värde; rollerna hålls isär så att det räcker att ändra en rad för att gå tillbaka (transparent, i båda temana). */ --color-card-border: #dcd7cc; /* Color.kt CardBorder */ --color-card-border-nested: #dcd7cc; /* Color.kt NestedCardBorder */ /* De fyra statusarna för en servicepunkt, i samma ordning som brådskeskalan i appen: klar, snart, brådskar, försenad. --status-late-bg är den bleka plattan bakom varningen om uppsättningsguiden på startsidan (.lp-install). */ --color-status-ok: #26794a; --color-status-soon: #f29423; --color-status-urgent: #b5372a; --color-status-late: #7e241b; --color-status-late-bg: #f6dad5; /* ⚠ "SNART" HAR TVÅ TONER PÅ WEBBEN, MEN EN I APPEN. --status-soon är appens StatusSoon (#F29423) och ritar ringen, prickarna och allt annat som är GRAFIK. I appen bär samma ton även texten - ett medvetet val i C2: en sammanhållen orange framför en läsbar, eftersom den dämpade lästes som brun. På webben går det valet inte att göra om. #F29423 ligger på 2,3:1 mot kortytan, och en publik webbsida ska klara WCAG AA för text - det är dessutom ett lagkrav för många sajter i EU sedan tillgänglighetsdirektivet. --status-soon-ink är samma kulör (32° mot ringens 33°) mörkad tills den bär text: 5,0:1 mot kortytan. Den är mättad och inte brun, till skillnad från C1:s dämpade #9E590E som appen förkastade. Det här är också den fix appens Color.kt själv pekar ut, om läsbarheten någon gång ska tillbaka där. */ --color-status-soon-ink: #a85a00; /* OKÄNT ritas UTANFÖR skalan och är medvetet färglöst - en punkt utan historik är inte en femte allvarlighetsgrad. Detsamma gäller BEHOVSSTYRT (”byt när den är sliten”). */ --color-status-unknown: #756e64; /* Color.kt StatusUnknown */ /* Registreringsskylten: vit platta, blått EU-band. Rent vitt och inte kortytans varmvita - skylten är ett föremål, inte en yta i gränssnittet, och ska se ut som den gör på bilen. */ --color-plate: #ffffff; --color-plate-ink: #1a1c1e; --color-plate-band: #0d3a91; --color-plate-band-ink: #ffd83d; /* YTOR SOM ÄR FÖREMÅL ELLER FÄLT, inte handlingar. Skilda från --color-accent med flit. Accenten betyder ”tryck här” och vänds till ljus sand i mörkt läge; de här två är en mörk YTA och ska vara mörk i båda temana. Delade de variabel blev integritetsbandet ett lysande ljust fält så fort temat slogs om. */ --color-band: #2e2a24; /* det mörka bandet */ --color-on-band: #fffdf9; /* text ovanpå det */ --color-device: #2e2a24; /* telefonramen */ /* Hjältebildens sken bakom kolven på startsidan, och det ljusa bandet. Bandet är ett steg MÖRKARE än sanden, så att det syns som ett eget fält och korten på det fortfarande lyser upp. */ --color-hero-glow: rgba(233, 105, 8, 0.14); --color-hero-bg: #ebe4d4; }