Skip to content

Commit

Permalink
♻️ Unify colors variables (#4901)
Browse files Browse the repository at this point in the history 
* ♻️ Unify shades of gray

* ♻️ Unify greenish colors

* ♻️ Unify yellow ff colors

* ♻️ Adapt roadmap colors

* ♻️ Refactor gradient usage

* 🐛 Fix wg name

* ♻️ Fix indention
  • Loading branch information
@robinvanopstal
robinvanopstal authored Oct 28, 2020
1 parent 968cbf1 commit 85aca27
Show file tree
Hide file tree
Showing 87 changed files with 196 additions and 250 deletions.
12 changes: 0 additions & 12 deletions frontend/scss/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,18 +82,6 @@ box-shadow: 0 25px 50px 0 rgba(0,0,0,0.21);
box-shadow: 0 10px 25px 0 rgba(0,0,0,0.2);
}

@mixin turbo-pizazz {
background: linear-gradient(45deg, color('pizazz'), color('turbo'));
}

@mixin emerald-doger {
background: linear-gradient(45deg, color('emerald'), color('doger-blue'));
}

@mixin river-ebony {
background: linear-gradient(45deg, color('river-bed'), color('ebony-clay'));
}

@mixin heroEnterAnimation {
@keyframes growDown {
from {
Expand Down
49 changes: 7 additions & 42 deletions frontend/scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,60 +40,25 @@ names are identified by using the http://chir.ag/projects/name-that-color to
prevent double colors and/or hirarchy dicussions */
$colors: (
'black': #000000,
'mirage': #1A2129,
'charade': #20202A,
'ebony-clay': #29323C,
'bright-gray': #3D444D,
'mine-shaft': #3E3E3E,
'river-bed': #48525C,
'limed-spruce': #333D47,
'oslo-gray': #91979D,
'gray-chateau': #A3A8AD,
'silver': #CCCCCC,
'alto': #DFDFDF,
'gallery': #EAEAEA,
'mercury': #E8E8E8,
'iron': #E2E5E6,
'athens-gray': #EBEBF0,
'concrete': #F3F3F3,
'wild-sand': #F4F4F4,
'whisper': #FAFAFC,
'white': #FFFFFF,
'link-water': #DDE6F7,
'blue-ribbon': #005AF0,
'doger-blue': #21C1FA,
'mariner': #2980B9,
'bondi-blue': #00A7B1,
'robins-egg': #00DCC0,
'emerald': #38CA71,
'malachite': #00CD3C,
'forest-green': #2DB932,
'fruit-salad': #4D9F66,
'shamrock': #2ECC71,
'mountain-meadow': #1DB395,
'hawkes-blue': #CEE8FC,
'japan-laurel': #09A600,
'pear': #A6E22E,
'confetti': #E1EB64,
'apple': #64BF46,
'yellow': #FFF300,
'turbo': #FFE100,
'school-bus': #FFDC00,
'manz': #F1F068,
'pizazz': #FF8F00,
'zest': #E67E22,
'buttercup': #F39C12,
'carnation': #F56C64,
'persimmon': #FF5757,
'cinnabar': #E74C3C,
'red': #EF0000,
'crimson': #C8114D,
'clementine': #EC6600,
'bittersweet': #F56C64,
'guardsman-red': #C80000,
'slack': #45184B,
'pink-flamingo': #FF52E1,
'lavender-magenta':#EB49E1,
'studio': #943FB5,
'lavender': #B75DDE,
'pigment-indigo': #4C038C,
'lav-magenta': #EB49E1,
'electric-violet': #5500D7,
'ultramarine': #180CA4,
'pickled-bluewood':#2C3E50,
);

$safeColors: (
Expand Down
24 changes: 12 additions & 12 deletions frontend/scss/components/atoms/_color.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,24 +19,24 @@ It has multiple size modifiers (more could be added below).

@mixin color-black { color: color('black'); }
@mixin color-blue-ribbon { color: color('blue-ribbon'); }
@mixin color-silver { color: color('silver'); }
@mixin color-gray-chateau { color: color('gray-chateau'); }
@mixin color-silver { color: color('iron'); }
@mixin color-gray-chateau { color: color('oslo-gray'); }
@mixin color-white { color: color('white'); }

@mixin color-websites { color: color('white'); }
@mixin color-stories { color: color('ultramarine'); }
@mixin color-stories { color: color('electric-violet'); }
@mixin color-ads { color: color('white'); }
@mixin color-e-mails { color: color('ultramarine'); }
@mixin color-overview { color: color('mine-shaft'); }
@mixin color-e-mails { color: color('electric-violet'); }
@mixin color-overview { color: color('charade'); }

@mixin fill-websites { fill: color('white'); }
@mixin fill-stories { fill: color('ultramarine'); }
@mixin fill-stories { fill: color('electric-violet'); }
@mixin fill-ads { fill: color('white'); }
@mixin fill-e-mails { fill: color('ultramarine'); }
@mixin fill-overview { fill: color('mine-shaft'); }
@mixin fill-e-mails { fill: color('electric-violet'); }
@mixin fill-overview { fill: color('charade'); }

@mixin gradient-default { background: linear-gradient(45deg, color('blue-ribbon'), color('robins-egg')); }
@mixin gradient-dark { background: linear-gradient(45deg, color('river-bed'), color('charade')); }
@mixin gradient-websites { background: linear-gradient(225deg, color('robins-egg') 0%, color('blue-ribbon') 75%); }
@mixin gradient-stories { background: linear-gradient(225deg, color('pizazz') 0%, color('school-bus') 75%); }
@mixin gradient-ads { background: linear-gradient(225deg, color('lavender-magenta') 0%, color('electric-violet') 75%); }
@mixin gradient-e-mails { background: linear-gradient(225deg, color('apple') 0%, color('confetti') 75%); }
@mixin gradient-stories { background: linear-gradient(225deg, color('clementine') 0%, color('school-bus') 75%); }
@mixin gradient-ads { background: linear-gradient(225deg, color('lav-magenta') 0%, color('electric-violet') 75%); }
@mixin gradient-e-mails { background: linear-gradient(225deg, color('japan-laurel') 0%, color('confetti') 75%); }
2 changes: 1 addition & 1 deletion frontend/scss/components/atoms/_divider.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ desktop

@mixin divider-header-mobile {
display: block;
background-color: color('wild-sand');
background-color: color('athens-gray');
height: 1px;
margin: 30px 20px 30px 0px;
}
4 changes: 2 additions & 2 deletions frontend/scss/components/atoms/_icon.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,11 +74,11 @@ square
}

@mixin ico-e-mails {
fill: color('forest-green');
fill: color('japan-laurel');
}

@mixin ico-ads {
fill: color('ultramarine');
fill: color('electric-violet');
}

@mixin ico-river-bed {
Expand Down
2 changes: 1 addition & 1 deletion frontend/scss/components/atoms/_text.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ TODO: mono (inline, block)
@include txt-mono;
word-break: normal;
color: color('black');
background-color: color('gallery');
background-color: color('iron');
font-size: 0.9em;
}

Expand Down
8 changes: 4 additions & 4 deletions frontend/scss/components/atoms/component-frame.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ format modifiers for differen color rendering (e.g. websites -> blue border, ads
position: absolute;
left: -3px;
top: -3px;
border: 3px solid color('doger-blue');
border: 3px solid color('robins-egg');

@media (min-width: 768px) {
left: -4px;
Expand All @@ -55,7 +55,7 @@ format modifiers for differen color rendering (e.g. websites -> blue border, ads
bottom: 100%;
padding: 3px 6px;
font-size: 8px;
background-color: color('doger-blue');
background-color: color('robins-egg');

@media (min-width: 768px) {
left: -4px;
Expand All @@ -74,7 +74,7 @@ format modifiers for differen color rendering (e.g. websites -> blue border, ads
}

@mixin component-frame-websites {
&:before { border-color: color('doger-blue'); }
&:before { border-color: color('robins-egg'); }
&:after { @include gradient-websites; }
}

Expand All @@ -84,7 +84,7 @@ format modifiers for differen color rendering (e.g. websites -> blue border, ads
}

@mixin component-frame-ads {
&:before { border-color: color('lavender-magenta'); }
&:before { border-color: color('lav-magenta'); }
&:after { @include gradient-ads; }
}

Expand Down
2 changes: 1 addition & 1 deletion frontend/scss/components/atoms/copy-script.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
margin: 6px 8px 6px 0;
padding: 4px 6px;
white-space: nowrap;
background: color('gallery');
background: color('iron');
font-size: 12.6px;

@include scrollbar;
Expand Down
4 changes: 2 additions & 2 deletions frontend/scss/components/atoms/format-tags.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@

&-stories {
@include gradient-stories;
color: color('ultramarine');
color: color('electric-violet');
}

&-ads {
Expand All @@ -28,6 +28,6 @@

&-email {
@include gradient-e-mails;
color: color('ultramarine');
color: color('electric-violet');
}
}
4 changes: 2 additions & 2 deletions frontend/scss/components/atoms/pill.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,12 @@

&-flat {
box-shadow: none;
background-color: color('wild-sand');
background-color: color('athens-gray');
}

&-meta {
box-shadow: none;
background-color: color('bright-gray');
background-color: color('river-bed');
color: safeColor('white');
pointer-events: none;
}
Expand Down
8 changes: 0 additions & 8 deletions frontend/scss/components/molecules/_kpi.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,6 @@
The KPI molecule is a combination of icon, headline and text atoms.
The size of the icon should be 2 (small), the headline should be h1 (xxlarge) and text should be 4 (large).
### MODIFIERS:
he current modifiers change the background gradient color for the KPI. Modifiers are labeled by the fist word in each color name inside the gradient.
Please refer to mixins.scss to see gradients.
-emerald-doger
-tubo-pizazz
-river-ebony
*/

@import '../atoms/_text.scss';
Expand Down
2 changes: 1 addition & 1 deletion frontend/scss/components/molecules/_teaser.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ teaser types. (Success Stories, Templates, Guides and Tutorials, Examples, ...)
align-items: center;
height: 50px;
padding: 0 1.25em;
@include river-ebony;
@include gradient-dark;
}

@mixin teaser-header-title {
Expand Down
4 changes: 2 additions & 2 deletions frontend/scss/components/molecules/agenda-item.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
}

&-dory {
background: color('carnation');
background: color('bittersweet');
padding: 0.4em;
border-radius: 0.2em;
color: color('white');
Expand Down Expand Up @@ -115,7 +115,7 @@

&-speaker {
@include txt;
color: color('carnation');
color: color('bittersweet');
}
}
}
2 changes: 1 addition & 1 deletion frontend/scss/components/molecules/banner.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
z-index: 999;
width: 100%;
color: color('black');
background: color('turbo');
background: color('school-bus');
}

&-dismiss {
Expand Down
2 changes: 1 addition & 1 deletion frontend/scss/components/molecules/code-snippet.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ Styles taken and combined from: https://raw.githubusercontent.com/richleland/pyg
padding: 0 1em;
color: color('white');
line-height: 1.3em;
background: color('ebony-clay');
background: color('charade');
font-size: 0.9em;

&::after {
Expand Down
2 changes: 1 addition & 1 deletion frontend/scss/components/molecules/conf-location.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@

.#{molecule('conf-location')} {
grid-column: 1 / -1;
background: color('carnation');
background: color('bittersweet');
display: flex;
align-items: center;

Expand Down
4 changes: 2 additions & 2 deletions frontend/scss/components/molecules/experiments.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
flex: 1 0 auto;
padding: 15px 10px;
margin: 0 15px;
background-color: color('wild-sand');
background-color: color('athens-gray');

#{$self}-iframe & {
flex-grow: 0;
Expand All @@ -80,7 +80,7 @@
@include txt-font-accent;

&-name {
color: color('alto');
color: color('iron');

&.active {
color: color('blue-ribbon');
Expand Down
2 changes: 1 addition & 1 deletion frontend/scss/components/molecules/fest-agenda-item.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
}

&-dory {
background: color('carnation');
background: color('bittersweet');
padding: 0.4em;
border-radius: 0.2em;
color: color('white');
Expand Down
2 changes: 1 addition & 1 deletion frontend/scss/components/molecules/format-filter-hint.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ $height: 60px;
max-width: 2020px;
margin: 0 auto;
color: color('white');
background-color: color('ebony-clay');
background-color: color('charade');
@include txt-2;
z-index: 100;

Expand Down
8 changes: 4 additions & 4 deletions frontend/scss/components/molecules/format-toggle.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,8 +86,8 @@

&-link-stories {
&:hover, &.#{molecule('format-toggle')}-selected {
@include gradient-stories; color: color('ultramarine');
.#{atom('ico')} { fill: color('ultramarine'); }
@include gradient-stories; color: color('electric-violet');
.#{atom('ico')} { fill: color('electric-violet'); }
}
}

Expand All @@ -101,8 +101,8 @@
&-link-email {

&:hover, &.#{molecule('format-toggle')}-selected {
@include gradient-e-mails; color: color('ultramarine');
.#{atom('ico')} { fill: color('ultramarine'); }
@include gradient-e-mails; color: color('electric-violet');
.#{atom('ico')} { fill: color('electric-violet'); }
}
}

Expand Down
2 changes: 1 addition & 1 deletion frontend/scss/components/molecules/format-visual-websites.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@
top: -1px;
left: 8px;
z-index: -1;
background-color: color('pink-flamingo');
background-color: color('lav-magenta');
animation: 10s ease-in-out 3.5s infinite both handleCodeMarker;
}

Expand Down
2 changes: 1 addition & 1 deletion frontend/scss/components/molecules/ghost-frame-desktop.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ The ghost frame desktop wraps an element with a desktop-like frame.

// ui
&:before {
background-image: radial-gradient(circle at center, color('silver') 25%, transparent 25%), radial-gradient(circle at center, color('silver') 25%, transparent 25%), radial-gradient(circle at center, color('silver') 25%, transparent 25%);
background-image: radial-gradient(circle at center, color('iron') 25%, transparent 25%), radial-gradient(circle at center, color('iron') 25%, transparent 25%), radial-gradient(circle at center, color('iron') 25%, transparent 25%);
background-position: 0%, 2%, 3.9%;
background-repeat: no-repeat;
background-size: 4% 100%, 4% 100%, 4% 100%;
Expand Down
2 changes: 1 addition & 1 deletion frontend/scss/components/molecules/ghost-frame-mobile.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ The ghost frame mobile wraps an element with a mobile-like frame.
// ui
&:before {
background-repeat: no-repeat;
background: color('silver');
background: color('iron');
border-radius: 50px;
content: '';
height: 1%;
Expand Down
2 changes: 1 addition & 1 deletion frontend/scss/components/molecules/ghost-frame-tablet.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ The ghost frame tablet wraps an element with a tablet-like frame.
// ui
&:before {
background-repeat: no-repeat;
background: color('silver');
background: color('iron');
border-radius: 50px;
content: '';
height: 1%;
Expand Down
Loading

0 comments on commit 85aca27

Please sign in to comment.