TheThomaas/11ty-resume
1
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

Use new colors tokens

Browse source
This commit is contained in:
TheThomaas 2024-02-08 21:13:53 +01:00
parent 11bad437dd
commit 70006c49ab
4 changed files with 135 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

111
src/scss/components/_colors.scss
View file

@ -1,47 +1,70 @@
:root { /* BRAND */
/* BRAND */ $sand-50: 249 248 243;
--sand-50: 249 248 243; $sand-100: 242 239 226;
--sand-100: 242 239 226; $sand-200: 227 221 197;
--sand-200: 227 221 197; $sand-300: 210 199 159;
--sand-300: 210 199 159; $sand-400: 194 176 128; // Main
--sand-400: 194 176 128; // Main $sand-500: 177 151 94;
--sand-500: 177 151 94; $sand-600: 164 133 82;
--sand-600: 164 133 82; $sand-700: 136 107 70;
--sand-700: 136 107 70; $sand-800: 111 88 61;
--sand-800: 111 88 61; $sand-900: 90 72 52;
--sand-900: 90 72 52; $sand-950: 48 37 26;
--sand-950: 48 37 26;
--forest-50: 244 247 238;
--forest-100: 231 238 217;
--forest-200: 208 223 183;
--forest-300: 187 208 154; // Main
--forest-400: 149 180 103;
--forest-500: 119 152 74;
--forest-600: 93 120 56;
--forest-700: 72 93 46;
--forest-800: 59 75 41;
--forest-900: 52 65 38;
--forest-950: 26 34 17;
/* BRAND */
$forest-50: 244 247 238;
$forest-100: 231 238 217;
$forest-200: 208 223 183;
$forest-300: 187 208 154; // Main
$forest-400: 149 180 103;
$forest-500: 119 152 74;
$forest-600: 93 120 56;
$forest-700: 72 93 46;
$forest-800: 59 75 41;
$forest-900: 52 65 38;
$forest-950: 26 34 17;
/* BRAND */
/* NEUTRAL */
$light-0: 255, 255, 255, 0;
$light-2: 255, 255, 255, 0.02;
$light-4: 255, 255, 255, 0.04;
$light-6: 255, 255, 255, 0.06;
$light-8: 255, 255, 255, 0.08;
$light-10: 255, 255, 255, 0.1;
$light-20: 255, 255, 255, 0.2;
$light-30: 255, 255, 255, 0.3;
$light-40: 255, 255, 255, 0.4;
$light-50: 255, 255, 255, 0.5;
$light-60: 255, 255, 255, 0.6;
$light-70: 255, 255, 255, 0.7;
$light-80: 255, 255, 255, 0.8;
$light-90: 255, 255, 255, 0.9;
$light-100: 255, 255, 255;
$dark-0: 9, 9, 11, 0;
$dark-2: 9, 9, 11, 0.02;
$dark-4: 9, 9, 11, 0.04;
$dark-6: 9, 9, 11, 0.06;
$dark-8: 9, 9, 11, 0.08;
$dark-10: 9, 9, 11, 0.1;
$dark-20: 9, 9, 11, 0.2;
$dark-30: 9, 9, 11, 0.3;
$dark-40: 9, 9, 11, 0.4;
$dark-50: 9, 9, 11, 0.5;
$dark-60: 9, 9, 11, 0.6;
$dark-70: 9, 9, 11, 0.7;
$dark-80: 9, 9, 11, 0.8;
$dark-90: 9, 9, 11, 0.9;
$dark-100: 9, 9, 11;
$shark-50: 246 246 246;
$shark-100: 231 231 231;
--shark-50: 246 246 246; $shark-200: 209 209 209;
--shark-100: 231 231 231; $shark-300: 176 176 176;
--shark-200: 209 209 209; $shark-400: 136 136 136;
--shark-300: 176 176 176; $shark-500: 109 109 109;
--shark-400: 136 136 136; $shark-600: 93 93 93;
--shark-500: 109 109 109; $shark-700: 79 79 79;
--shark-600: 93 93 93; $shark-800: 69 69 69;
--shark-700: 79 79 79; $shark-900: 61 61 61;
--shark-800: 69 69 69; $shark-950: 30 30 30; // Main
--shark-900: 61 61 61; /* NEUTRAL */
--shark-950: 30 30 30; // Main
}

52
src/scss/components/_tokens.scss Normal file
View file

@ -0,0 +1,52 @@
@import './components/colors';
:root {
--neutral-lowest: #{$light-100};
--neutral-lower: #{$shark-100};
--neutral-low: #{$shark-300};
--neutral-medium: #{$shark-400};
--neutral-high: #{$shark-600};
--neutral-higher: #{$shark-700};
--neutral-highest: #{$dark-100};
--brand-primary-lowest: #{$sand-50};
--brand-primary-lower: #{$sand-100};
--brand-primary-low: #{$sand-300};
--brand-primary-medium: #{$sand-500};
--brand-primary-high: #{$sand-700};
--brand-primary-higher: #{$sand-900};
--brand-primary-highest: #{$sand-950};
--brand-secondary-lowest: #{$forest-50};
--brand-secondary-lower: #{$forest-100};
--brand-secondary-low: #{$forest-300};
--brand-secondary-medium: #{$forest-500};
--brand-secondary-high: #{$forest-700};
--brand-secondary-higher: #{$forest-900};
--brand-secondary-highest: #{$forest-950};
/* --success-lowest: #000;
--success-lower: #000;
--success-low: #000;
--success-medium: #000;
--success-high: #000;
--success-higher: #000;
--success-highest: #000; */
/* --danger-lowest: #000;
--danger-lower: #000;
--danger-low: #000;
--danger-medium: #000;
--danger-high: #000;
--danger-higher: #000;
--danger-highest: #000; */
/* --warning-lowest: #000;
--warning-lower: #000;
--warning-low: #000;
--warning-medium: #000;
--warning-high: #000;
--warning-higher: #000;
--warning-highest: #000; */
}

20
src/scss/components/_variables.scss
View file

@ -1,16 +1,16 @@
:root { :root {
--light-1: rgb(var(--shark-100)); --light-1: rgb(var(--neutral-lower));
--dark-1: rgb(var(--shark-950)); --dark-1: rgb(var(--neutral-highest));
--dark-2: rgb(var(--shark-950) / .95); --dark-2: rgba(var(--neutral-highest), .8);
--primary: rgb(var(--sand-400)); --primary: rgb(var(--brand-primary-medium));
--primary-light: rgb(var(--sand-300)); --primary-light: rgb(var(--brand-primary-low));
--primary-dark: rgb(var(--sand-500)); --primary-dark: rgb(var(--brand-primary-medium));
--secondary: rgb(var(--forest-300)); --secondary: rgb(var(--brand-secondary-low));
--secondary-light: rgb(var(--forest-200)); --secondary-light: rgb(var(--brand-secondary-lower));
--secondary-dark: rgb(var(--forest-400)); --secondary-dark: rgb(var(--brand-secondary-medium));
--bg-gradient: linear-gradient(180deg, rgb(var(--sand-400)) 0%, rgb(var(--sand-400)) 3%, rgb(var(--sand-300)) 20%, rgb(var(--sand-200)) 35%, rgb(var(--forest-200)) 60%, rgb(var(--forest-300)) 75%, rgb(var(--forest-400)) 98%, rgb(var(--forest-400)) 100%); --bg-gradient: linear-gradient(180deg, rgb(var(--brand-primary-medium)) 0%, rgb(var(--brand-primary-medium)) 5%, rgb(var(--brand-primary-low)) 30%, rgb(var(--brand-primary-lower)) 50%, rgb(var(--brand-secondary-lower)) 51%, rgb(var(--brand-secondary-low)) 65%, rgb(var(--brand-secondary-medium)) 98%, rgb(var(--brand-secondary-medium)) 100%);
--background: var(--primary-light); --background: var(--primary-light);
--text: var(--dark-1); --text: var(--dark-1);

12
src/scss/critical.scss
View file

@ -1,4 +1,4 @@
@use './components/colors'; @use './components/tokens';
@use './components/variables'; @use './components/variables';
@use './components/reset'; @use './components/reset';
@use './components/superminimal'; @use './components/superminimal';
@ -17,7 +17,7 @@ html {
} }
} }
body { body {
background: rgb(var(--sand-400)); background: rgb(var(--brand-primary-medium));
background: var(--bg-gradient); background: var(--bg-gradient);
header, footer { header, footer {
@ -49,7 +49,7 @@ main {
} }
footer { footer {
/* background-color: var(--secondary); */ /* background-color: var(--secondary); */
background-color: rgb(var(--forest-400)); background-color: rgb(var(--brand-secondary-medium));
justify-items: center; justify-items: center;
margin-block-start: 1.5rem; margin-block-start: 1.5rem;
@ -275,7 +275,7 @@ i {
aspect-ratio: 1; aspect-ratio: 1;
inline-size: var(--size); inline-size: var(--size);
background-color: var(--light-1); background-color: var(--light-1);
border: 6px solid rgb(var(--forest-500)); border: 6px solid rgb(var(--brand-secondary-medium));
/* border: 6px solid var(--secondary-dark); */ /* border: 6px solid var(--secondary-dark); */
inset-inline-start: 0; inset-inline-start: 0;
// inset-inline-start: .9rem; // inset-inline-start: .9rem;
@ -290,7 +290,7 @@ i {
&:hover { &:hover {
&:before { &:before {
border-color: rgb(var(--forest-600)); border-color: rgb(var(--brand-secondary-high));
} }
} }
} }
@ -315,7 +315,7 @@ i {
} }
.btn-download { .btn-download {
color: rgb(var(--forest-200)); color: rgb(var(--brand-secondary-lower));
} }
.competences-section { .competences-section {