Skip to content

Commit

Permalink
Colors rewrite
Browse files Browse the repository at this point in the history
  • Loading branch information
@MartijnCuppens
MartijnCuppens committed Sep 23, 2020
1 parent 5280771 commit 27dba2e
Show file tree
Hide file tree
Showing 11 changed files with 122 additions and 125 deletions.
4 changes: 3 additions & 1 deletion .stylelintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@
],
"rules": {
"function-blacklist": [
"calc"
"calc",
"lighten",
"darken"
],
"property-blacklist": [
"border-radius",
Expand Down
11 changes: 5 additions & 6 deletions scss/_functions.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,19 +153,18 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
// Request a color level
// scss-docs-start color-level
@function color-level($color: $primary, $level: 0) {
$color-base: if($level > 0, $black, $white);
$level: abs($level);

@return mix($color-base, $color, $level * $theme-color-interval);
// stylelint-disable-next-line color-named
$color-base: if($level > 0, black, white);
@return mix($color-base, $color, abs($level));
}
// scss-docs-end color-level

@function tint-color($color, $level) {
@return mix(white, $color, $level * $theme-color-interval);
@return mix(white, $color, $level);
}

@function shade-color($color, $level) {
@return mix(black, $color, $level * $theme-color-interval);
@return mix(black, $color, $level);
}

// Return valid calc
Expand Down
2 changes: 1 addition & 1 deletion scss/_popover.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@
@include font-size($font-size-base);
color: $popover-header-color;
background-color: $popover-header-bg;
border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
border-bottom: $popover-border-width solid shade-color($popover-header-bg, 10%);
@include border-top-radius($popover-inner-border-radius);

&:empty {
Expand Down
206 changes: 101 additions & 105 deletions scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,9 +82,6 @@ $theme-colors: (
) !default;
// scss-docs-end theme-colors-map

// Set a specific jump point for requesting color jumps
$theme-color-interval: 8% !default;

// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
$min-contrast-ratio: 4.5 !default;
Expand All @@ -94,105 +91,105 @@ $color-contrast-dark: $black !default;
$color-contrast-light: $white !default;

// fusv-disable
$blue-100: tint-color($blue, 8) !default;
$blue-200: tint-color($blue, 6) !default;
$blue-300: tint-color($blue, 4) !default;
$blue-400: tint-color($blue, 2) !default;
$blue-100: tint-color($blue, 80%) !default;
$blue-200: tint-color($blue, 60%) !default;
$blue-300: tint-color($blue, 40%) !default;
$blue-400: tint-color($blue, 20%) !default;
$blue-500: $blue !default;
$blue-600: shade-color($blue, 2) !default;
$blue-700: shade-color($blue, 4) !default;
$blue-800: shade-color($blue, 6) !default;
$blue-900: shade-color($blue, 8) !default;

$indigo-100: tint-color($indigo, 8) !default;
$indigo-200: tint-color($indigo, 6) !default;
$indigo-300: tint-color($indigo, 4) !default;
$indigo-400: tint-color($indigo, 2) !default;
$blue-600: shade-color($blue, 20%) !default;
$blue-700: shade-color($blue, 40%) !default;
$blue-800: shade-color($blue, 60%) !default;
$blue-900: shade-color($blue, 80%) !default;

$indigo-100: tint-color($indigo, 80%) !default;
$indigo-200: tint-color($indigo, 60%) !default;
$indigo-300: tint-color($indigo, 40%) !default;
$indigo-400: tint-color($indigo, 20%) !default;
$indigo-500: $indigo !default;
$indigo-600: shade-color($indigo, 2) !default;
$indigo-700: shade-color($indigo, 4) !default;
$indigo-800: shade-color($indigo, 6) !default;
$indigo-900: shade-color($indigo, 8) !default;

$purple-100: tint-color($purple, 8) !default;
$purple-200: tint-color($purple, 6) !default;
$purple-300: tint-color($purple, 4) !default;
$purple-400: tint-color($purple, 2) !default;
$indigo-600: shade-color($indigo, 20%) !default;
$indigo-700: shade-color($indigo, 40%) !default;
$indigo-800: shade-color($indigo, 60%) !default;
$indigo-900: shade-color($indigo, 80%) !default;

$purple-100: tint-color($purple, 80%) !default;
$purple-200: tint-color($purple, 60%) !default;
$purple-300: tint-color($purple, 40%) !default;
$purple-400: tint-color($purple, 20%) !default;
$purple-500: $purple !default;
$purple-600: shade-color($purple, 2) !default;
$purple-700: shade-color($purple, 4) !default;
$purple-800: shade-color($purple, 6) !default;
$purple-900: shade-color($purple, 8) !default;

$pink-100: tint-color($pink, 8) !default;
$pink-200: tint-color($pink, 6) !default;
$pink-300: tint-color($pink, 4) !default;
$pink-400: tint-color($pink, 2) !default;
$purple-600: shade-color($purple, 20%) !default;
$purple-700: shade-color($purple, 40%) !default;
$purple-800: shade-color($purple, 60%) !default;
$purple-900: shade-color($purple, 80%) !default;

$pink-100: tint-color($pink, 80%) !default;
$pink-200: tint-color($pink, 60%) !default;
$pink-300: tint-color($pink, 40%) !default;
$pink-400: tint-color($pink, 20%) !default;
$pink-500: $pink !default;
$pink-600: shade-color($pink, 2) !default;
$pink-700: shade-color($pink, 4) !default;
$pink-800: shade-color($pink, 6) !default;
$pink-900: shade-color($pink, 8) !default;

$red-100: tint-color($red, 8) !default;
$red-200: tint-color($red, 6) !default;
$red-300: tint-color($red, 4) !default;
$red-400: tint-color($red, 2) !default;
$pink-600: shade-color($pink, 20%) !default;
$pink-700: shade-color($pink, 40%) !default;
$pink-800: shade-color($pink, 60%) !default;
$pink-900: shade-color($pink, 80%) !default;

$red-100: tint-color($red, 80%) !default;
$red-200: tint-color($red, 60%) !default;
$red-300: tint-color($red, 40%) !default;
$red-400: tint-color($red, 20%) !default;
$red-500: $red !default;
$red-600: shade-color($red, 2) !default;
$red-700: shade-color($red, 4) !default;
$red-800: shade-color($red, 6) !default;
$red-900: shade-color($red, 8) !default;

$orange-100: tint-color($orange, 8) !default;
$orange-200: tint-color($orange, 6) !default;
$orange-300: tint-color($orange, 4) !default;
$orange-400: tint-color($orange, 2) !default;
$red-600: shade-color($red, 20%) !default;
$red-700: shade-color($red, 40%) !default;
$red-800: shade-color($red, 60%) !default;
$red-900: shade-color($red, 80%) !default;

$orange-100: tint-color($orange, 80%) !default;
$orange-200: tint-color($orange, 60%) !default;
$orange-300: tint-color($orange, 40%) !default;
$orange-400: tint-color($orange, 20%) !default;
$orange-500: $orange !default;
$orange-600: shade-color($orange, 2) !default;
$orange-700: shade-color($orange, 4) !default;
$orange-800: shade-color($orange, 6) !default;
$orange-900: shade-color($orange, 8) !default;

$yellow-100: tint-color($yellow, 8) !default;
$yellow-200: tint-color($yellow, 6) !default;
$yellow-300: tint-color($yellow, 4) !default;
$yellow-400: tint-color($yellow, 2) !default;
$orange-600: shade-color($orange, 20%) !default;
$orange-700: shade-color($orange, 40%) !default;
$orange-800: shade-color($orange, 60%) !default;
$orange-900: shade-color($orange, 80%) !default;

$yellow-100: tint-color($yellow, 80%) !default;
$yellow-200: tint-color($yellow, 60%) !default;
$yellow-300: tint-color($yellow, 40%) !default;
$yellow-400: tint-color($yellow, 20%) !default;
$yellow-500: $yellow !default;
$yellow-600: shade-color($yellow, 2) !default;
$yellow-700: shade-color($yellow, 4) !default;
$yellow-800: shade-color($yellow, 6) !default;
$yellow-900: shade-color($yellow, 8) !default;

$green-100: tint-color($green, 8) !default;
$green-200: tint-color($green, 6) !default;
$green-300: tint-color($green, 4) !default;
$green-400: tint-color($green, 2) !default;
$yellow-600: shade-color($yellow, 20%) !default;
$yellow-700: shade-color($yellow, 40%) !default;
$yellow-800: shade-color($yellow, 60%) !default;
$yellow-900: shade-color($yellow, 80%) !default;

$green-100: tint-color($green, 80%) !default;
$green-200: tint-color($green, 60%) !default;
$green-300: tint-color($green, 40%) !default;
$green-400: tint-color($green, 20%) !default;
$green-500: $green !default;
$green-600: shade-color($green, 2) !default;
$green-700: shade-color($green, 4) !default;
$green-800: shade-color($green, 6) !default;
$green-900: shade-color($green, 8) !default;

$teal-100: tint-color($teal, 8) !default;
$teal-200: tint-color($teal, 6) !default;
$teal-300: tint-color($teal, 4) !default;
$teal-400: tint-color($teal, 2) !default;
$green-600: shade-color($green, 20%) !default;
$green-700: shade-color($green, 40%) !default;
$green-800: shade-color($green, 60%) !default;
$green-900: shade-color($green, 80%) !default;

$teal-100: tint-color($teal, 80%) !default;
$teal-200: tint-color($teal, 60%) !default;
$teal-300: tint-color($teal, 40%) !default;
$teal-400: tint-color($teal, 20%) !default;
$teal-500: $teal !default;
$teal-600: shade-color($teal, 2) !default;
$teal-700: shade-color($teal, 4) !default;
$teal-800: shade-color($teal, 6) !default;
$teal-900: shade-color($teal, 8) !default;

$cyan-100: tint-color($cyan, 8) !default;
$cyan-200: tint-color($cyan, 6) !default;
$cyan-300: tint-color($cyan, 4) !default;
$cyan-400: tint-color($cyan, 2) !default;
$teal-600: shade-color($teal, 20%) !default;
$teal-700: shade-color($teal, 40%) !default;
$teal-800: shade-color($teal, 60%) !default;
$teal-900: shade-color($teal, 80%) !default;

$cyan-100: tint-color($cyan, 80%) !default;
$cyan-200: tint-color($cyan, 60%) !default;
$cyan-300: tint-color($cyan, 40%) !default;
$cyan-400: tint-color($cyan, 20%) !default;
$cyan-500: $cyan !default;
$cyan-600: shade-color($cyan, 2) !default;
$cyan-700: shade-color($cyan, 4) !default;
$cyan-800: shade-color($cyan, 6) !default;
$cyan-900: shade-color($cyan, 8) !default;
$cyan-600: shade-color($cyan, 20%) !default;
$cyan-700: shade-color($cyan, 40%) !default;
$cyan-800: shade-color($cyan, 60%) !default;
$cyan-900: shade-color($cyan, 80%) !default;
// fusv-enable

// Characters which are escaped by the escape-svg function
Expand Down Expand Up @@ -272,10 +269,9 @@ $body-text-align: null !default;

$link-color: $primary !default;
$link-decoration: underline !default;
$link-hover-color: darken($link-color, 15%) !default;
$link-shade-percentage: 20% !default;
$link-hover-color: shade-color($link-color, $link-shade-percentage) !default;
$link-hover-decoration: null !default;
// Darken percentage for links with `.text-*` class (e.g. `.text-success`)
$emphasized-link-hover-darken-percentage: 15% !default;

$stretched-link-pseudo-element: after !default;
$stretched-link-z-index: 1 !default;
Expand Down Expand Up @@ -530,7 +526,7 @@ $table-group-separator-color: currentColor !default;

$table-caption-color: $text-muted !default;

$table-bg-level: -9 !default;
$table-bg-level: -80% !default;

$table-variants: (
"primary": color-level($primary, $table-bg-level),
Expand Down Expand Up @@ -656,7 +652,7 @@ $input-border-radius-sm: $border-radius-sm !default;
$input-border-radius-lg: $border-radius-lg !default;

$input-focus-bg: $input-bg !default;
$input-focus-border-color: lighten($component-active-bg, 25%) !default;
$input-focus-border-color: tint-color($component-active-bg, 50%) !default;
$input-focus-color: $input-color !default;
$input-focus-width: $input-btn-focus-width !default;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
Expand Down Expand Up @@ -784,7 +780,7 @@ $form-range-thumb-border-radius: 1rem !default;
$form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default;
$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
$form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
$form-range-thumb-active-bg: lighten($component-active-bg, 35%) !default;
$form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
$form-range-thumb-disabled-bg: $gray-500 !default;
$form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;

Expand Down Expand Up @@ -946,7 +942,7 @@ $dropdown-divider-margin-y: $spacer / 2 !default;
$dropdown-box-shadow: $box-shadow !default;

$dropdown-link-color: $gray-900 !default;
$dropdown-link-hover-color: darken($gray-900, 5%) !default;
$dropdown-link-hover-color: shade-color($gray-900, 10%) !default;
$dropdown-link-hover-bg: $gray-100 !default;

$dropdown-link-active-color: $component-active-color !default;
Expand Down Expand Up @@ -1054,7 +1050,7 @@ $popover-border-radius: $border-radius-lg !default;
$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
$popover-box-shadow: $box-shadow !default;

$popover-header-bg: darken($popover-bg, 3%) !default;
$popover-header-bg: shade-color($popover-bg, 6%) !default;
$popover-header-color: $headings-color !default;
$popover-header-padding-y: .5rem !default;
$popover-header-padding-x: $spacer !default;
Expand Down Expand Up @@ -1152,9 +1148,9 @@ $alert-border-radius: $border-radius !default;
$alert-link-font-weight: $font-weight-bold !default;
$alert-border-width: $border-width !default;

$alert-bg-level: -10 !default;
$alert-border-level: -9 !default;
$alert-color-level: 6 !default;
$alert-bg-level: -80% !default;
$alert-border-level: -70% !default;
$alert-color-level: 50% !default;

$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side

Expand Down Expand Up @@ -1182,8 +1178,8 @@ $list-group-border-radius: $border-radius !default;

$list-group-item-padding-y: $spacer / 2 !default;
$list-group-item-padding-x: $spacer !default;
$list-group-item-bg-level: -9 !default;
$list-group-item-color-level: 6 !default;
$list-group-item-bg-level: -80% !default;
$list-group-item-color-level: 50% !default;

$list-group-hover-bg: $gray-100 !default;
$list-group-active-color: $component-active-color !default;
Expand Down
2 changes: 1 addition & 1 deletion scss/helpers/_colored-links.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
@if $emphasized-link-hover-darken-percentage != 0 {
&:hover,
&:focus {
color: if(color-contrast($value) == $color-contrast-light, darken($value, $emphasized-link-hover-darken-percentage), lighten($value, $emphasized-link-hover-darken-percentage));
color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $emphasized-link-hover-darken-percentage), tint-color($value, $emphasized-link-hover-darken-percentage));
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion scss/mixins/_alert.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@
border-color: $border;

.alert-link {
color: darken($color, 10%);
color: shade-color($color, 20%);
}
}
8 changes: 4 additions & 4 deletions scss/mixins/_buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@
$background,
$border,
$color: color-contrast($background),
$hover-background: if($color == $color-contrast-light, darken($background, 7.5%), lighten($background, 7.5%)),
$hover-border: if($color == $color-contrast-light, darken($border, 10%), lighten($border, 5%)),
$hover-background: if($color == $color-contrast-light, shade-color($background, 15%), tint-color($background, 15%)),
$hover-border: if($color == $color-contrast-light, shade-color($border, 20%), tint-color($border, 10%)),
$hover-color: color-contrast($hover-background),
$active-background: if($color == $color-contrast-light, darken($background, 10%), lighten($background, 10%)),
$active-border: if($color == $color-contrast-light, darken($border, 12.5%), lighten($border, 5%)),
$active-background: if($color == $color-contrast-light, shade-color($background, 20%), tint-color($background, 20%)),
$active-border: if($color == $color-contrast-light, shade-color($border, 25%), tint-color($border, 10%)),
$active-color: color-contrast($active-background),
$disabled-background: $background,
$disabled-border: $border,
Expand Down
2 changes: 1 addition & 1 deletion scss/mixins/_list-group.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
&:hover,
&:focus {
color: $color;
background-color: darken($background, 5%);
background-color: shade-color($background, 10%);
}

&.active {
Expand Down
4 changes: 2 additions & 2 deletions site/assets/scss/_buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@
&:hover,
&:active {
color: $white;
background-color: darken($bd-purple-bright, 10%);
border-color: darken($bd-purple-bright, 10%);
background-color: shade-color($bd-purple-bright, 20%);
border-color: shade-color($bd-purple-bright, 20%);
}

&:focus {
Expand Down
2 changes: 1 addition & 1 deletion site/assets/scss/_masthead.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.bd-masthead {
padding: 3rem 0;
background: linear-gradient(165deg, lighten($bd-purple-light, 16%) 50%, $white 50%);
background: linear-gradient(165deg, tint-color($bd-purple-light, 85%) 50%, $white 50%);

@include media-breakpoint-up(sm) {
padding: 5rem 0;
Expand Down
Loading

0 comments on commit 27dba2e

Please sign in to comment.