:root { /* ========================= PRIMARY COLOURS ========================= */ /* ---------- primary ------------ */ --p900:#125B93; /* var(--p900); */ --p800:#1B7BB5; /* var(--p800); */ --p700:#1D8CC8; /* var(--p700); */ --p600:#249FDC; /* var(--p600); */ --p500:#29AEDB; /* var(--p500); */ --p400:#3DB9DB; /* var(--p400); */ --p300:#5AC5EF; /* var(--p300); Primary */ --p200:#86D6F4; /* var(--p200); */ --p100:#B5E6F8; /* var(--p100); */ --p50: #E2F5FC; /* var(--p50); */ /* ---------- secondary ------------ */ --s900:#276D00; /* var(--s900); */ --s800:#508F11; /* var(--s800); */ --s700:#65A31C; /* var(--s700); */ --s600:#7AB727; /* var(--s600); */ --s500:#8AC72F; /* var(--s500); Primary */ --s400:#9CD052; /* var(--s400); */ --s300:#AFD874; /* var(--s300); */ --s200:#C6E39D; /* var(--s200); */ --s100:#DDEEC3; /* var(--s100); */ --s50: #F1F9E7; /* var(--s50); */ /* ---------- greys ------------ */ --gray900:#212121; /* var(--gray900,#212121); */ --gray800:#424242; /* var(--gray800,#424242); */ --gray700:#616161; /* var(--gray700,#616161); */ --gray600:#757575; /* var(--gray600,#757575); */ --gray500:#9e9e9e; /* var(--gray500,#9e9e9e); */ --gray400:#BDBDBD; /* var(--gray400,#BDBDBD); */ --gray300:#E0E0E0; /* var(--gray300,#E0E0E0); */ --gray200:#EEEEEE; /* var(--gray200,#EEEEEE); */ --gray100:#F5F5F5; /* var(--gray100,#F5F5F5); */ --gray50: #FAFAFA; /* var(--gray50, #FAFAFA); */ --shadow: var(--gray500,#9e9e9e); /* var(--shadow); */ --boxShadow: 0.1rem 0.3rem 0.3rem #9e9e9e;/* var(--boxShadow); */ /* complementary colours */ --c900:#D21200;/* var(--c900); */ --c800:#EA2A0C;/* var(--c800); */ --c700:#F83312;/* var(--c700); */ --c600:#FF350E;/* var(--c600); */ --c500:#FF3D12;/* var(--c500); */ --c400:#FF6039;/* var(--c400); */ --c300:#FF7F5D;/* var(--c300); */ --c200:#FFA58C;/* var(--c200); */ --c100:#FFC9B9;/* var(--c100); */ --c50: #FEE8E6;/* var(--c50); */ /* ========================= SECONDARY COLOURS ========================= */ --yellow900:#6B5810; /* var(--yellow900) Dark background accent */ --yellow800:#897114; /* var(--yellow800) Dark accents */ --yellow700:#A68818; /* var(--yellow700) */ --yellow600:#C2A01D; /* var(--yellow600) Strong emphasis */ --yellow500:#EDC323; /* var(--yellow500) Button hover */ --yellow400:#EFCA3D; /* var(--yellow400) Primary */ --yellow300:#F1D158; /* var(--yellow300) */ --yellow200:#F4DB7B; /* var(--yellow200) Hover states */ --yellow100:#F7E6A3; /* var(--yellow100) Panels */ --yellow50: #FBF2CF; /* var(--yellow50) Background tint */ --orange900:#D46A3E; /* var(--orange900) Dark background accent */ --orange800:#E27E42; /* var(--orange800) Dark accents */ --orange700:#EA8A45; /* var(--orange700) */ --orange600:#F2984A; /* var(--orange600) Strong emphasis */ --orange500:#F7A34E; /* var(--orange500) Button hover */ --orange400:#FAAF59; /* var(--orange400) Primary */ --orange300:#FBBD71; /* var(--orange300) */ --orange200:#FCD097; /* var(--orange200) Hover states */ --orange100:#FDE2BF; /* var(--orange100) Panels */ --orange50: #FEF4E5; /* var(--orange50) Background tint */ --brown900:#401800; /* var(--brown900) Dark background accent */ --brown800:#4F2607; /* var(--brown800) Dark accents */ --brown700:#5C330F; /* var(--brown700) */ --brown600:#6B3F17; /* var(--brown600) Strong emphasis */ --brown500:#76481C; /* var(--brown500) Button hover */ --brown400:#8E6139; /* var(--brown400) Primary */ --brown300:#A77C57; /* var(--brown300) */ --brown200:#C99F7C; /* var(--brown200) Hover states */ --brown100:#E9C3A4; /* var(--brown100) Panels */ --brown50: #FEF4E5; /* var(--brown50) Background tint */ --purple900:#490E63;/* var(--purple900); dark background */ --purple800:#5F117F;/* var(--purple800); deep accent */ --purple700:#721599;/* var(--purple700); */ --purple600:#8619B4;/* var(--purple600); Strong emphasis */ --purple500:#A31EDB;/* var(--purple500); Button hover */ --purple400:#AE39DF;/* var(--purple400); Primary */ --purple300:#B954E4;/* var(--purple300); */ --purple200:#C878E9;/* var(--purple200); Hover states */ --purple100:#D8A0F0;/* var(--purple100); dark background */ --purple50: #EBCEF7; /* var(--purple50); Panels */ --purple25: #F3E8FD; /* var(--purple25); backgrounds */ --rose900: #6a0b46;/* var(--rose900); dark background */ --rose800: #8e0f51;/* var(--rose800); */ --rose700: #a31157;/* var(--rose700); */ --rose600: #b8115e;/* var(--rose600); Strong emphasis */ --rose500: #c81062;/* var(--rose500); Button hover */ --rose400: #cd3a78;/* var(--rose400); Primary */ --rose300: #d45b8f;/* var(--rose300); */ --rose200: #df89af;/* var(--rose200); Hover states */ --rose100: #ebb7ce;/* var(--rose100); Panels */ --rose50: #f6e2eb;/* var(--rose50); backgrounds */ /* ========================= TEXT NEUTRALS ========================= */ --charcoal: #222222;/* var(--charcoal); */ --charcoal-dark: #111111;/* var(--charcoal-dark); */ /* ========================== TERTIARY (SERIOUS / DARK) ========================== /*. -- text colors --- */ --blueTxt900: #00374b; /* var(--blueTxt900); */ --blueTxt800: #0f4d63; /* var(--blueTxt800); */ --blueTxt700: #1f6079; /* var(--blueTxt700); */ --blueTxt600: #2f748f; /* var(--blueTxt600); */ --blueTxt500: #3d83a1; /* var(--blueTxt500); */ --blueTxt400: #5a96b2; /* var(--blueTxt400); */ --blueTxt300: #74aac4; /* var(--blueTxt300); */ --blueTxt200: #95c4db; /* var(--blueTxt200); */ --blueTxt100: #b3def1; /* var(--blueTxt100); */ --blueTxt50: #d4f3ff; /* var(--blueTxt50); */ --greenTxt900: #2f4a10; /* var(--greenTxt900); */ --greenTxt800: #44671d; /* var(--greenTxt800); */ --greenTxt700: #507825; /* var(--greenTxt700); */ --greenTxt600: #5d892d; /* var(--greenTxt600); */ --greenTxt500: #689634; /* var(--greenTxt500); */ --greenTxt400: #7ba552; /* var(--greenTxt400); */ --greenTxt300: #90b46f; /* var(--greenTxt300); */ --greenTxt200: #aec897; /* var(--greenTxt200); */ --greenTxt100: #cdddbf; /* var(--greenTxt100); */ --greenTxt50: #eaf1e5; /* var(--greenTxt50); */ --plum900: #2e1a47; /* var(--plum900); */ --plum800: #3d295e; /* var(--plum800); */ --plum700: #45326a; /* var(--plum700); */ --plum600: #4e3b75; /* var(--plum600); */ --plum500: #54437e; /* var(--plum500); */ --plum400: #695e8f; /* var(--plum400); */ --plum300: #817aa2; /* var(--plum300); */ --plum200: #a39fbd; /* var(--plum200); */ --plum100: #c7c4d8; /* var(--plum100); */ --plum50: #e8e8ef; /* var(--plum50); */ --slate900: #24323d; /* var(--slate900); */ --slate800: #364755; /* var(--slate800); */ --slate700: #445a6a; /* var(--slate700); */ --slate600: #536e81; /* var(--slate600); */ --slate500: #607d92; /* var(--slate500); */ --slate400: #7890a3; /* var(--slate400); */ --slate300: #8fa4b5; /* var(--slate300); */ --slate200: #aebecb; /* var(--slate200); */ --slate100: #ccd8e2; /* var(--slate100); */ --slate50: #e9eff6; /* var(--slate50); */ /* ================================== SEMANTIC ================================== */ --success: var(--s300); /* var(--success); */ --info: var(--p300); /* var(--info); */ --warning: var(--yellow300); /* var(--warning); */ --error: var(--rose300); /* var(--error); */ /* ========================= UI TOKENS ========================= */ --text-primary: var(--charcoal);/* var(--text-primary); */ --text-secondary: var(--gray800);/* var(--text-secondary); */ --border: var(--gray200);/* var(--border); */ --button-primary: var(--p300);/* var(--button-primary); */ --button-primary-hover: var(--p400);/* var(--button-primary-hover); */ --button-secondary: var(--s300);/* var(--button-secondary); */ --button-secondary-hover: var(--s400);/* var(--button-secondary-hover); */ --focus-ring: var(--blue-50);/* var(--); */ /* --- languages ------ */ --col-fr: #1F3A93; /* var(--col-fr); */ --col-frH: #172e7a; /* var(--col-frH); */ /* --- Spanish ------ */ --col-sp: #E67E22; /* var(--col-sp); */ --col-spH: #ca6e1e; /* var(--col-spH); */ /* --- German ------ */ --col-ge: #C9A227; /* var(--col-ge); */ --col-geH: #af8e21; /* var(--col-ge); */ /* --- Medals ------ */ --gold: var(--yellow500); --silver: var(--gray600); --bronze: var(--brown600); /* --- Results ------------ ------ */ --distinctionBkg:var(--p300); /* var(--distinctionBkg); */ --meritBkg: var(--s300); /* var(--meritBkg); */ --passBkg: var(--yellow300);/* var(--passBkg); */ --failBkg: var(--c300); /* var(--failBkg); */ --distinctionTxt:var(--p900); /* var(--distinctionTxt); */ --meritTxt: var(--s900); /* var(--meritTxt); */ --passTxt: var(--yellow900); /* var(--passTxt); */ --failTxt: var(--c900); /* var(--failTxt); */ --yr7Color: var(--rose200); /* var(--yr7Color); */ --yr8Color: var(--brown200); /* var(--yr8Color); */ --yr9Color: var(--plum200); /* var(--yr9Color); */ --yr10Color: var(--s300); /* var(--yr10Color); */ --yr11Color: var(--p500); /* var(--yr11Color); */ --yr12Color: var(--brown200); /* var(--yr12Color);*/ --yr13Color: var(--plum200); /* var(--yr13Color); */ --yr14Color: var(--s300); /* var(--yr14Color); */ /* --------- Genders ------------ ------ */ --gender-m-col:#8F9EDA; /* var(--gender-m-col); */ --gender-f-col:#A3D47B; /* var(--gender-f-col); */ --gender-o-col:#B1B0B0; /* var(--gender-o-col); */ /* --------- Subjects ------------ ------ */ --linkcol: #0100FF; /* var(--linkcol);*/ --brand-color: var(--p300); /* var(--brand-color); */ /* --- units ------- */ --unit-r : var(--s50); /* var(--unit-r); */ --unit-w : var(--s100); /* var(--unit-w); */ --unit-rw : var(--s200); /* var(--unit-rw); */ --unit-s :var(--p50); /* var(--unit-s); */ --unit-l :var(--p100); /* var(--unit-l); */ --unit-sl:var(--p200); /* var(--unit-sl); */ } /* ========================= use with: css: var(--c600); js: // get variable from inline style element.style.getPropertyValue("--my-var"); // get variable from wherever getComputedStyle(element).getPropertyValue("--my-var"); // set variable on inline style element.style.setProperty("--my-var", jsVar + 4); ========================= */