Use new colors tokens
This commit is contained in:
parent
11bad437dd
commit
70006c49ab
|
|
@ -1,47 +1,70 @@
|
|||
:root {
|
||||
/* BRAND */
|
||||
--sand-50: 249 248 243;
|
||||
--sand-100: 242 239 226;
|
||||
--sand-200: 227 221 197;
|
||||
--sand-300: 210 199 159;
|
||||
--sand-400: 194 176 128; // Main
|
||||
--sand-500: 177 151 94;
|
||||
--sand-600: 164 133 82;
|
||||
--sand-700: 136 107 70;
|
||||
--sand-800: 111 88 61;
|
||||
--sand-900: 90 72 52;
|
||||
--sand-950: 48 37 26;
|
||||
/* BRAND */
|
||||
$sand-50: 249 248 243;
|
||||
$sand-100: 242 239 226;
|
||||
$sand-200: 227 221 197;
|
||||
$sand-300: 210 199 159;
|
||||
$sand-400: 194 176 128; // Main
|
||||
$sand-500: 177 151 94;
|
||||
$sand-600: 164 133 82;
|
||||
$sand-700: 136 107 70;
|
||||
$sand-800: 111 88 61;
|
||||
$sand-900: 90 72 52;
|
||||
$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-200: 209 209 209;
|
||||
--shark-300: 176 176 176;
|
||||
--shark-400: 136 136 136;
|
||||
--shark-500: 109 109 109;
|
||||
--shark-600: 93 93 93;
|
||||
--shark-700: 79 79 79;
|
||||
--shark-800: 69 69 69;
|
||||
--shark-900: 61 61 61;
|
||||
--shark-950: 30 30 30; // Main
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
$shark-50: 246 246 246;
|
||||
$shark-100: 231 231 231;
|
||||
$shark-200: 209 209 209;
|
||||
$shark-300: 176 176 176;
|
||||
$shark-400: 136 136 136;
|
||||
$shark-500: 109 109 109;
|
||||
$shark-600: 93 93 93;
|
||||
$shark-700: 79 79 79;
|
||||
$shark-800: 69 69 69;
|
||||
$shark-900: 61 61 61;
|
||||
$shark-950: 30 30 30; // Main
|
||||
/* NEUTRAL */
|
||||
52
src/scss/components/_tokens.scss
Normal file
52
src/scss/components/_tokens.scss
Normal 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; */
|
||||
|
||||
}
|
||||
|
|
@ -1,16 +1,16 @@
|
|||
:root {
|
||||
--light-1: rgb(var(--shark-100));
|
||||
--dark-1: rgb(var(--shark-950));
|
||||
--dark-2: rgb(var(--shark-950) / .95);
|
||||
--light-1: rgb(var(--neutral-lower));
|
||||
--dark-1: rgb(var(--neutral-highest));
|
||||
--dark-2: rgba(var(--neutral-highest), .8);
|
||||
|
||||
--primary: rgb(var(--sand-400));
|
||||
--primary-light: rgb(var(--sand-300));
|
||||
--primary-dark: rgb(var(--sand-500));
|
||||
--secondary: rgb(var(--forest-300));
|
||||
--secondary-light: rgb(var(--forest-200));
|
||||
--secondary-dark: rgb(var(--forest-400));
|
||||
--primary: rgb(var(--brand-primary-medium));
|
||||
--primary-light: rgb(var(--brand-primary-low));
|
||||
--primary-dark: rgb(var(--brand-primary-medium));
|
||||
--secondary: rgb(var(--brand-secondary-low));
|
||||
--secondary-light: rgb(var(--brand-secondary-lower));
|
||||
--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);
|
||||
--text: var(--dark-1);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@use './components/colors';
|
||||
@use './components/tokens';
|
||||
@use './components/variables';
|
||||
@use './components/reset';
|
||||
@use './components/superminimal';
|
||||
|
|
@ -17,7 +17,7 @@ html {
|
|||
}
|
||||
}
|
||||
body {
|
||||
background: rgb(var(--sand-400));
|
||||
background: rgb(var(--brand-primary-medium));
|
||||
background: var(--bg-gradient);
|
||||
|
||||
header, footer {
|
||||
|
|
@ -49,7 +49,7 @@ main {
|
|||
}
|
||||
footer {
|
||||
/* background-color: var(--secondary); */
|
||||
background-color: rgb(var(--forest-400));
|
||||
background-color: rgb(var(--brand-secondary-medium));
|
||||
justify-items: center;
|
||||
margin-block-start: 1.5rem;
|
||||
|
||||
|
|
@ -275,7 +275,7 @@ i {
|
|||
aspect-ratio: 1;
|
||||
inline-size: var(--size);
|
||||
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); */
|
||||
inset-inline-start: 0;
|
||||
// inset-inline-start: .9rem;
|
||||
|
|
@ -290,7 +290,7 @@ i {
|
|||
|
||||
&:hover {
|
||||
&:before {
|
||||
border-color: rgb(var(--forest-600));
|
||||
border-color: rgb(var(--brand-secondary-high));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -315,7 +315,7 @@ i {
|
|||
}
|
||||
|
||||
.btn-download {
|
||||
color: rgb(var(--forest-200));
|
||||
color: rgb(var(--brand-secondary-lower));
|
||||
}
|
||||
|
||||
.competences-section {
|
||||
|
|
|
|||
Loading…
Reference in a new issue