Skip to content

Commit 306fc51

Browse files
planktonicplanktonic
authored
Fix color overrides (#543)
- Fixes color overrides, and adds that variable to the tests - removes color-base in favour of a simplified single color-settings file
1 parent 34bb163 commit 306fc51

10 files changed

Lines changed: 595 additions & 360 deletions

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@
66

77
- All of the variables can now be overridden by users
88

9+
### Breaking
10+
11+
- Removes `settings/color-base`, and merges its variables into `settings/color-palette`. If you’re already using the Sass module system, you’ll need to rename all variables containing `color-base` to `color-palette`
12+
913
## [[3.0.0-rc.1]](https://github.com/bitcrowd/bitstyles/releases/tag/v3.0.0-rc.1) - 2021-08-13
1014

1115
### Added

‎scss/bitstyles.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33

44
@forward 'bitstyles/settings/animation' as animation-*;
55
@forward 'bitstyles/settings/breakpoints' as breakpoints-*;
6-
@forward 'bitstyles/settings/color-base' as color-base-*;
76
@forward 'bitstyles/settings/color-palette' as color-palette-*;
87
@forward 'bitstyles/settings/layout' as layout-*;
98
@forward 'bitstyles/settings/setup' as setup-*;

‎scss/bitstyles/settings/_color-base.import.scss‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎scss/bitstyles/settings/_color-base.scss‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎scss/bitstyles/settings/_color-palette.scss‎

Lines changed: 57 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,111 @@
1-
@use 'color-base';
21
@use 'sass:color';
32
@use '../tools/color' as bs-color;
43

54
// Use Sass map functions to merge in extra color maps in your project, or re-define the whole map.
65

7-
$grays-hint-color: color-base.$brand-1 !default;
6+
$black: #000 !default;
7+
$white: #fff !default;
8+
$brand-1: #000dff !default;
9+
$brand-2: #fa0 !default;
10+
$text: #333 !default;
11+
$background: color.mix($white, $brand-1, 97%) !default;
12+
$positive: #50a802 !default;
13+
$danger: #e82915 !default;
14+
$warning: #fe881e !default;
15+
16+
$grays-hint-color: $brand-1 !default;
817
$grays-hint-color-mix: 10% !default;
918
$color-mix-percentages: (1, 2, 3, 5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 97, 98, 99, 100) !default;
1019

1120
$color-palette: (
1221
'black': bs-color.generate-palette(
13-
$base-color: color-base.$black,
14-
$mix-color: color-base.$white,
22+
$base-color: $black,
23+
$mix-color: $white,
1524
$percentages: $color-mix-percentages
1625
),
1726
'white': bs-color.generate-palette(
18-
$base-color: color-base.$white,
19-
$mix-color: color-base.$black,
27+
$base-color: $white,
28+
$mix-color: $black,
2029
$percentages: $color-mix-percentages
2130
),
2231
'gray': (
23-
'100': color.mix($grays-hint-color, color.mix(color-base.$white, color-base.$black, 0%), $grays-hint-color-mix),
24-
'99': color.mix($grays-hint-color, color.mix(color-base.$white, color-base.$black, 1%), $grays-hint-color-mix),
25-
'98': color.mix($grays-hint-color, color.mix(color-base.$white, color-base.$black, 2%), $grays-hint-color-mix),
26-
'97': color.mix($grays-hint-color, color.mix(color-base.$white, color-base.$black, 3%), $grays-hint-color-mix),
27-
'95': color.mix($grays-hint-color, color.mix(color-base.$white, color-base.$black, 5%), $grays-hint-color-mix),
28-
'90': color.mix($grays-hint-color, color.mix(color-base.$white, color-base.$black, 10%), $grays-hint-color-mix),
29-
'80': color.mix($grays-hint-color, color.mix(color-base.$white, color-base.$black, 20%), $grays-hint-color-mix),
30-
'70': color.mix($grays-hint-color, color.mix(color-base.$white, color-base.$black, 30%), $grays-hint-color-mix),
31-
'60': color.mix($grays-hint-color, color.mix(color-base.$white, color-base.$black, 40%), $grays-hint-color-mix),
32-
'50': color.mix($grays-hint-color, color.mix(color-base.$white, color-base.$black, 50%), $grays-hint-color-mix),
33-
'40': color.mix($grays-hint-color, color.mix(color-base.$white, color-base.$black, 60%), $grays-hint-color-mix),
34-
'30': color.mix($grays-hint-color, color.mix(color-base.$white, color-base.$black, 70%), $grays-hint-color-mix),
35-
'20': color.mix($grays-hint-color, color.mix(color-base.$white, color-base.$black, 80%), $grays-hint-color-mix),
36-
'10': color.mix($grays-hint-color, color.mix(color-base.$white, color-base.$black, 90%), $grays-hint-color-mix),
37-
'5': color.mix($grays-hint-color, color.mix(color-base.$white, color-base.$black, 95%), $grays-hint-color-mix),
38-
'3': color.mix($grays-hint-color, color.mix(color-base.$white, color-base.$black, 97%), $grays-hint-color-mix),
39-
'2': color.mix($grays-hint-color, color.mix(color-base.$white, color-base.$black, 98%), $grays-hint-color-mix),
40-
'1': color.mix($grays-hint-color, color.mix(color-base.$white, color-base.$black, 99%), $grays-hint-color-mix),
32+
'100': color.mix($grays-hint-color, color.mix($white, $black, 0%), $grays-hint-color-mix),
33+
'99': color.mix($grays-hint-color, color.mix($white, $black, 1%), $grays-hint-color-mix),
34+
'98': color.mix($grays-hint-color, color.mix($white, $black, 2%), $grays-hint-color-mix),
35+
'97': color.mix($grays-hint-color, color.mix($white, $black, 3%), $grays-hint-color-mix),
36+
'95': color.mix($grays-hint-color, color.mix($white, $black, 5%), $grays-hint-color-mix),
37+
'90': color.mix($grays-hint-color, color.mix($white, $black, 10%), $grays-hint-color-mix),
38+
'80': color.mix($grays-hint-color, color.mix($white, $black, 20%), $grays-hint-color-mix),
39+
'70': color.mix($grays-hint-color, color.mix($white, $black, 30%), $grays-hint-color-mix),
40+
'60': color.mix($grays-hint-color, color.mix($white, $black, 40%), $grays-hint-color-mix),
41+
'50': color.mix($grays-hint-color, color.mix($white, $black, 50%), $grays-hint-color-mix),
42+
'40': color.mix($grays-hint-color, color.mix($white, $black, 60%), $grays-hint-color-mix),
43+
'30': color.mix($grays-hint-color, color.mix($white, $black, 70%), $grays-hint-color-mix),
44+
'20': color.mix($grays-hint-color, color.mix($white, $black, 80%), $grays-hint-color-mix),
45+
'10': color.mix($grays-hint-color, color.mix($white, $black, 90%), $grays-hint-color-mix),
46+
'5': color.mix($grays-hint-color, color.mix($white, $black, 95%), $grays-hint-color-mix),
47+
'3': color.mix($grays-hint-color, color.mix($white, $black, 97%), $grays-hint-color-mix),
48+
'2': color.mix($grays-hint-color, color.mix($white, $black, 98%), $grays-hint-color-mix),
49+
'1': color.mix($grays-hint-color, color.mix($white, $black, 99%), $grays-hint-color-mix),
4150
),
4251
'text': bs-color.generate-palette(
43-
$base-color: color-base.$text,
44-
$mix-color: color-base.$white,
52+
$base-color: $text,
53+
$mix-color: $white,
4554
$percentages: $color-mix-percentages
4655
),
4756
'background': bs-color.generate-palette(
48-
$base-color: color-base.$background,
49-
$mix-color: color-base.$brand-1,
57+
$base-color: $background,
58+
$mix-color: $brand-1,
5059
$percentages: $color-mix-percentages
5160
),
5261
'brand-1': bs-color.generate-palette(
53-
$base-color: color-base.$brand-1,
54-
$mix-color: color-base.$white,
62+
$base-color: $brand-1,
63+
$mix-color: $white,
5564
$percentages: $color-mix-percentages
5665
),
5766
'brand-1-shades': bs-color.generate-palette(
58-
$base-color: color-base.$brand-1,
59-
$mix-color: color-base.$black,
67+
$base-color: $brand-1,
68+
$mix-color: $black,
6069
$percentages: $color-mix-percentages
6170
),
6271
'brand-2': bs-color.generate-palette(
63-
$base-color: color-base.$brand-2,
64-
$mix-color: color-base.$white,
72+
$base-color: $brand-2,
73+
$mix-color: $white,
6574
$percentages: $color-mix-percentages
6675
),
6776
'brand-2-shades': bs-color.generate-palette(
68-
$base-color: color-base.$brand-2,
69-
$mix-color: color-base.$black,
77+
$base-color: $brand-2,
78+
$mix-color: $black,
7079
$percentages: $color-mix-percentages
7180
),
7281
'danger': bs-color.generate-palette(
73-
$base-color: color-base.$danger,
74-
$mix-color: color-base.$white,
82+
$base-color: $danger,
83+
$mix-color: $white,
7584
$percentages: $color-mix-percentages
7685
),
7786
'danger-shades': bs-color.generate-palette(
78-
$base-color: color-base.$danger,
79-
$mix-color: color-base.$black,
87+
$base-color: $danger,
88+
$mix-color: $black,
8089
$percentages: $color-mix-percentages
8190
),
8291
'warning': bs-color.generate-palette(
83-
$base-color: color-base.$warning,
84-
$mix-color: color-base.$white,
92+
$base-color: $warning,
93+
$mix-color: $white,
8594
$percentages: $color-mix-percentages
8695
),
8796
'warning-shades': bs-color.generate-palette(
88-
$base-color: color-base.$warning,
89-
$mix-color: color-base.$black,
97+
$base-color: $warning,
98+
$mix-color: $black,
9099
$percentages: $color-mix-percentages
91100
),
92101
'positive': bs-color.generate-palette(
93-
$base-color: color-base.$positive,
94-
$mix-color: color-base.$white,
102+
$base-color: $positive,
103+
$mix-color: $white,
95104
$percentages: $color-mix-percentages
96105
),
97106
'positive-shades': bs-color.generate-palette(
98-
$base-color: color-base.$positive,
99-
$mix-color: color-base.$black,
107+
$base-color: $positive,
108+
$mix-color: $black,
100109
$percentages: $color-mix-percentages
101110
),
102111
) !default;

0 commit comments

Comments
 (0)