Skip to content

Commit eb99902

Browse files
moyusmoyus
committed
Change color pallet
1 parent 5d3ff5c commit eb99902

8 files changed

Lines changed: 101 additions & 57 deletions

File tree

‎scss/_components.box.scss‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,6 @@ $box-title-size: $text-size-base !default;
77
$box-header-padding: $spacing-squish-md !default;
88
$box-inner-padding: $spacing-square-md !default;
99
$box-bg: $component-bg !default;
10-
$box-colors: (
11-
"danger": (bg: #f2dede, border: #ebccd1, color: #a94442),
12-
"info": (bg: #d9edf7, border: #bde2fb, color: #31708f),
13-
"success": (bg: #dff0d8, border: #d6e9c6, color: #3c763d),
14-
"warning": (bg: #fcf8e3, border: #faebcc, color: #8a6d3b)
15-
) !default;
1610

1711
.box {
1812
margin-bottom: $box-margin-bottom;
@@ -58,9 +52,13 @@ $box-colors: (
5852

5953
}
6054

61-
@each $name, $value in $box-colors {
62-
.box--#{$name} {
63-
@include box-variant(map-get($value, 'color'), map-get($value, 'border'), map-get($value, 'bg'))
55+
@each $name, $color in $theme-colors {
56+
.box.box--#{$name} {
57+
@include box-variant(
58+
$background: tint-color($color, 11),
59+
$border: tint-color($color, 9),
60+
$color: shade-color($color, 6)
61+
);
6462
}
6563
}
6664

‎scss/_components.button.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,8 @@ $btn-height-computed: $btn-font-size-md * $btn-line-height + 2 * nth($btn-paddin
5959
$hover-background: $grey-light,
6060
$hover-border: $grey-thin,
6161
$hover-color: $grey-dark,
62-
$active-background: shade-color($grey-light, 1),
63-
$active-border: shade-color($grey-thin, 1),
62+
$active-background: darken($grey-light, 5%),
63+
$active-border: darken($grey-thin, 5%),
6464
$active-color: $grey-dark
6565
);
6666

@@ -72,7 +72,7 @@ $btn-height-computed: $btn-font-size-md * $btn-line-height + 2 * nth($btn-paddin
7272

7373
}
7474

75-
.btn.btn--text {
75+
.btn.btn--link {
7676
text-decoration: underline;
7777
@include btn-variant(
7878
$background: transparent,
@@ -81,8 +81,8 @@ $btn-height-computed: $btn-font-size-md * $btn-line-height + 2 * nth($btn-paddin
8181
$hover-background: $grey-light,
8282
$hover-border: $grey-light,
8383
$hover-color: $grey-dark,
84-
$active-background: shade-color($grey-light, 1),
85-
$active-border: shade-color($grey-light, 1),
84+
$active-background: darken($grey-light, 5%),
85+
$active-border: darken($grey-light, 5%),
8686
$active-color: $grey-dark
8787
);
8888
}

‎scss/_components.form.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ $icon-check: "data:image/svg+xml,%3csvg viewBox='0 0
4747
// states
4848
&:hover,
4949
&.is-hovered {
50-
border-color: shade-color($form-control-border-color, 1);
50+
border-color: darken($form-control-border-color, 2.5%);
5151
}
5252

5353
&:focus,
@@ -245,7 +245,7 @@ $icon-check: "data:image/svg+xml,%3csvg viewBox='0 0
245245

246246
&:hover,
247247
&.is-hovered {
248-
border-color: shade-color($form-control-border-color, 1);
248+
border-color: darken($form-control-border-color, 2.5%);
249249
}
250250

251251
&:focus,
@@ -290,7 +290,7 @@ $icon-check: "data:image/svg+xml,%3csvg viewBox='0 0
290290

291291
&:hover,
292292
&.is-hovered {
293-
border-color: shade-color($form-control-border-color, 1);
293+
border-color: darken($form-control-border-color, 2.5%);
294294
}
295295

296296
&:focus,

‎scss/_components.note.scss‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,18 @@
33
$note-border-radius: $component-border-radius-md !default;
44
$note-padding: $spacing-square-md !default;
55
$note-margin-bottom: $spacing-stack-md !default;
6-
$note-colors: (
7-
"danger": (bg: #f2dede, color: #a94442),
8-
"info": (bg: #d9edf7, color: #31708f),
9-
"success": (bg: #dff0d8, color: #3c763d),
10-
"warning": (bg: #fcf8e3, color: #8a6d3b)
11-
) !default;
126

137
// block
148
.note {
159
position: relative;
1610
border-radius: $note-border-radius;
1711
padding: $note-padding;
1812
margin-bottom: $note-margin-bottom;
19-
@include note-variant($grey-light, $grey-dark);
13+
14+
@include note-variant(
15+
$background: $grey-light,
16+
$color: $grey-dark
17+
);
2018

2119
> *:first-child {
2220
margin-top: 0;
@@ -28,8 +26,11 @@ $note-colors: (
2826
}
2927

3028
// modifiers
31-
@each $name, $value in $note-colors {
32-
.note--#{$name} {
33-
@include note-variant(map-get($value, 'bg'), map-get($value, 'color'))
29+
@each $name, $color in $theme-colors {
30+
.note.note--#{$name} {
31+
@include note-variant(
32+
$background: tint-color($color, 11),
33+
$color: shade-color($color, 6)
34+
);
3435
}
3536
}

‎scss/_functions.scss‎

Lines changed: 53 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,62 @@
1+
@function math-pow($number, $exp) {
2+
$value: 1;
3+
4+
@if ($exp > 0) {
5+
@for $i from 1 through $exp {
6+
$value: $value * $number;
7+
}
8+
} @else if ($exp < 0) {
9+
@for $i from 1 through -$exp {
10+
$value: $value / $number;
11+
}
12+
}
13+
14+
@return $value;
15+
}
16+
17+
18+
@function luminance($color) {
19+
$rgb: (
20+
"red": red($color),
21+
"green": green($color),
22+
"blue": blue($color)
23+
);
24+
25+
@each $name, $value in $rgb {
26+
$value: $value / 255;
27+
$value: if($value < .03928, $value / 12.92, math-pow(($value + .055) / 1.055, 2));
28+
$rgb: map-merge($rgb, ($name: $value));
29+
}
30+
31+
@return (map-get($rgb, "red") * .2126) + (map-get($rgb, "green") * .7152) + (map-get($rgb, "blue") * .0722);
32+
}
33+
134
@function tint-color($color, $level) {
2-
@return mix(white, $color, $level * 8%);
35+
@return mix($white, $color, $level * 8%);
336
}
437

538
@function shade-color($color, $level) {
6-
@return mix(black, $color, $level * 8%);
39+
@return mix($black, $color, $level * 8%);
40+
}
41+
42+
@function invert-color($color, $dark: rgba($black, 0.75), $light: $white) {
43+
$luminance: luminance($color);
44+
45+
@return if($luminance > 0.55, $dark, $light);
746
}
847

9-
@function invert-color($color, $dark: $grey-dark, $light: $white) {
10-
$r: red($color);
11-
$g: green($color);
12-
$b: blue($color);
48+
@function light-color($color) {
49+
$target: 96%;
50+
$lightness: lightness($color);
51+
52+
@return change-color($color, $lightness: max($target, $lightness));
53+
}
1354

14-
$value: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
55+
@function dark-color($color) {
56+
$base: 29%;
57+
$luminance: luminance($color);
58+
$delta: (0.53 - $luminance);
59+
$target: round($base + $delta * 53);
1560

16-
@return if($value >= 150, $dark, $light);
61+
@return change-color($color, $lightness: max($base, $target));
1762
}

‎scss/mixins/_badge.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,12 @@
1212
&.badge--link {
1313
cursor: pointer;
1414
&:hover {
15-
border-color: shade-color($background, 1);
16-
background-color: shade-color($background, 1);
15+
border-color: darken($background, 2.5%);
16+
background-color: darken($background, 2.5%);
1717
}
1818
&:active {
19-
border-color: shade-color($background, 2);
20-
background-color: shade-color($background, 2);
19+
border-color: darken($background, 5%);
20+
background-color: darken($background, 5%);
2121
}
2222
}
2323
}

‎scss/mixins/_button.scss‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@
44
$background,
55
$border: $background,
66
$color: invert-color($background),
7-
$hover-background: shade-color($background, 1),
8-
$hover-border: shade-color($border, 1),
9-
$hover-color: invert-color($hover-background),
10-
$active-background: shade-color($background, 2),
11-
$active-border: shade-color($border, 2),
12-
$active-color: invert-color($active-background)
7+
$hover-background: darken($background, 2.5%),
8+
$hover-border: darken($border, 2.5%),
9+
$hover-color: invert-color($background),
10+
$active-background: darken($background, 5%),
11+
$active-border: darken($border, 5%),
12+
$active-color: invert-color($background)
1313
) {
1414
& {
1515
color: $color;
@@ -54,14 +54,14 @@
5454

5555
@mixin btn-light-variant(
5656
$color,
57-
$border: tint-color($color, 11),
58-
$background: tint-color($color, 11),
57+
$border: light-color($color),
58+
$background: light-color($color),
5959
$hover-color: $color,
60-
$hover-border: tint-color($color, 10),
61-
$hover-background: tint-color($color, 10),
60+
$hover-border: darken(light-color($color), 2.5%),
61+
$hover-background: darken(light-color($color), 2.5%),
6262
$active-color: $color,
63-
$active-border: tint-color($color, 9),
64-
$active-background: tint-color($color, 9),
63+
$active-border: darken(light-color($color), 5%),
64+
$active-background: darken(light-color($color), 5%),
6565
) {
6666
& {
6767
color: $color;
@@ -78,7 +78,7 @@
7878

7979
&:focus,
8080
&.is-focused {
81-
box-shadow: 0 0 0 2px tint-color($color, 6);
81+
box-shadow: 0 0 0 2px rgba($active-color, 0.25);
8282
}
8383

8484
&:active,
@@ -112,8 +112,8 @@
112112
$hover-border: $color,
113113
$hover-background: $color,
114114
$active-color: invert-color($color),
115-
$active-border: shade-color($color, 2),
116-
$active-background: shade-color($color, 2),
115+
$active-border: darken($color, 5%),
116+
$active-background: darken($color, 5%),
117117
) {
118118
& {
119119
color: $color;

‎scss/mixins/_note.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
// -----------------------------------------------------------------------------
33
@mixin note-variant($background, $color: invert-color($background)) {
44
color: $color;
5-
background-color: $background,;
5+
background-color: $background;
66

77
a {
8-
color: shade-color($color, 2);
8+
color: inherit;
99
&:hover {
10-
color: shade-color($color, 3);
10+
color: inherit;
1111
}
1212
}
1313
}

0 commit comments

Comments
 (0)