davejansen/snikket-web-portal
1
0
Fork 0
Code Issues Pull Requests Activity

Introduce layer of abstraction in colour definition

Browse Source 
The raw values now map to names describing their hue. Only when
mapping them to variable names, we assign semantic meaning. This
allows easy re-use of colour values between different semantic
meanings and changing e.g. accent vs. primary without affecting
the use as warning.
This commit is contained in:
Jonas Schäfer
2021-01-16 14:43:48 +01:00
parent 7f8b2644e7
commit a88c5b92dd
1 changed files with 40 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
snikket_web/scss/_theme.scss
View File

@@ -10,7 +10,7 @@ $colours: (
#e3e1df,
#f6f5f4
],
"primary": [
"blue": [
#062943,
#0f3d62,
#0e4c76,
@@ -21,7 +21,7 @@ $colours: (
#b5d8f3,
#e4f3fd
],
"alert": [
"red": [
#340e03,
#681f0b,
#883017,
@@ -32,7 +32,7 @@ $colours: (
#fbc2b3,
#fef1ed
],
"accent": [
"yellow": [
#302100,
#563600,
#795b00,
@@ -43,7 +43,7 @@ $colours: (
#fef6c1,
#fffbe8
],
"success": [
"green": [
#052f03,
#0c4608,
#197713,
@@ -66,45 +66,45 @@ $gray-700: nth(map-get($colours, "gray"), 7);
$gray-800: nth(map-get($colours, "gray"), 8);
$gray-900: nth(map-get($colours, "gray"), 9);
$primary-100: nth(map-get($colours, "primary"), 1);
$primary-200: nth(map-get($colours, "primary"), 2);
$primary-300: nth(map-get($colours, "primary"), 3);
$primary-400: nth(map-get($colours, "primary"), 4);
$primary-500: nth(map-get($colours, "primary"), 5);
$primary-600: nth(map-get($colours, "primary"), 6);
$primary-700: nth(map-get($colours, "primary"), 7);
$primary-800: nth(map-get($colours, "primary"), 8);
$primary-900: nth(map-get($colours, "primary"), 9);
$primary-100: nth(map-get($colours, "blue"), 1);
$primary-200: nth(map-get($colours, "blue"), 2);
$primary-300: nth(map-get($colours, "blue"), 3);
$primary-400: nth(map-get($colours, "blue"), 4);
$primary-500: nth(map-get($colours, "blue"), 5);
$primary-600: nth(map-get($colours, "blue"), 6);
$primary-700: nth(map-get($colours, "blue"), 7);
$primary-800: nth(map-get($colours, "blue"), 8);
$primary-900: nth(map-get($colours, "blue"), 9);
$alert-100: nth(map-get($colours, "alert"), 1);
$alert-200: nth(map-get($colours, "alert"), 2);
$alert-300: nth(map-get($colours, "alert"), 3);
$alert-400: nth(map-get($colours, "alert"), 4);
$alert-500: nth(map-get($colours, "alert"), 5);
$alert-600: nth(map-get($colours, "alert"), 6);
$alert-700: nth(map-get($colours, "alert"), 7);
$alert-800: nth(map-get($colours, "alert"), 8);
$alert-900: nth(map-get($colours, "alert"), 9);
$alert-100: nth(map-get($colours, "red"), 1);
$alert-200: nth(map-get($colours, "red"), 2);
$alert-300: nth(map-get($colours, "red"), 3);
$alert-400: nth(map-get($colours, "red"), 4);
$alert-500: nth(map-get($colours, "red"), 5);
$alert-600: nth(map-get($colours, "red"), 6);
$alert-700: nth(map-get($colours, "red"), 7);
$alert-800: nth(map-get($colours, "red"), 8);
$alert-900: nth(map-get($colours, "red"), 9);
$accent-100: nth(map-get($colours, "accent"), 1);
$accent-200: nth(map-get($colours, "accent"), 2);
$accent-300: nth(map-get($colours, "accent"), 3);
$accent-400: nth(map-get($colours, "accent"), 4);
$accent-500: nth(map-get($colours, "accent"), 5);
$accent-600: nth(map-get($colours, "accent"), 6);
$accent-700: nth(map-get($colours, "accent"), 7);
$accent-800: nth(map-get($colours, "accent"), 8);
$accent-900: nth(map-get($colours, "accent"), 9);
$accent-100: nth(map-get($colours, "yellow"), 1);
$accent-200: nth(map-get($colours, "yellow"), 2);
$accent-300: nth(map-get($colours, "yellow"), 3);
$accent-400: nth(map-get($colours, "yellow"), 4);
$accent-500: nth(map-get($colours, "yellow"), 5);
$accent-600: nth(map-get($colours, "yellow"), 6);
$accent-700: nth(map-get($colours, "yellow"), 7);
$accent-800: nth(map-get($colours, "yellow"), 8);
$accent-900: nth(map-get($colours, "yellow"), 9);
$success-100: nth(map-get($colours, "success"), 1);
$success-200: nth(map-get($colours, "success"), 2);
$success-300: nth(map-get($colours, "success"), 3);
$success-400: nth(map-get($colours, "success"), 4);
$success-500: nth(map-get($colours, "success"), 5);
$success-600: nth(map-get($colours, "success"), 6);
$success-700: nth(map-get($colours, "success"), 7);
$success-800: nth(map-get($colours, "success"), 8);
$success-900: nth(map-get($colours, "success"), 9);
$success-100: nth(map-get($colours, "green"), 1);
$success-200: nth(map-get($colours, "green"), 2);
$success-300: nth(map-get($colours, "green"), 3);
$success-400: nth(map-get($colours, "green"), 4);
$success-500: nth(map-get($colours, "green"), 5);
$success-600: nth(map-get($colours, "green"), 6);
$success-700: nth(map-get($colours, "green"), 7);
$success-800: nth(map-get($colours, "green"), 8);
$success-900: nth(map-get($colours, "green"), 9);
/*
$primary-100: $gray-100;