Skip to content

Commit 6ba7913

Browse files
EranNLEranNL
authored
Merge pull request #18 from coderan-io/feature/more-colors
Added colors in a logic way
2 parents d2bd7a8 + 02e3c54 commit 6ba7913

File tree

10 files changed

+264
-67
lines changed

10 files changed

+264
-67
lines changed

‎src/components/utils/Variant.ts

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,22 @@ export enum Variant {
33
PRIMARY_GHOST = 'primary-ghost',
44
SECONDARY = 'secondary',
55
DANGER = 'danger',
6-
DANGER_GHOST = 'danger-ghost'
6+
DANGER_GHOST = 'danger-ghost',
7+
RED = 'red',
8+
PINK = 'pink',
9+
PURPLE = 'purple',
10+
DEEP_PURPLE = 'deep-purple',
11+
INDIGO = 'indigo',
12+
BLUE = 'blue',
13+
LIGHT_BLUE = 'light-blue',
14+
TEAL = 'teal',
15+
GREEN = 'green',
16+
LIGHT_GREEN = 'light-green',
17+
LIME = 'lime',
18+
YELLOW = 'yellow',
19+
AMBER = 'amber',
20+
ORANGE = 'orange',
21+
BROWN = 'brown',
22+
GRAY = 'gray',
23+
BLUE_GRAY = 'blue-gray'
724
}
8-
9-
export const variantList: string[] = [
10-
'primary',
11-
'primary-ghost',
12-
'secondary',
13-
'danger',
14-
'danger-ghost'
15-
];

‎src/style/base/_mixins.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
@use "colors";
1+
@use "variables";
22

3-
@function color($color, $variant: 500) {
4-
@return map-get(map-get(colors.$colors, $color), $variant);
3+
@function color($color, $variant: 'default') {
4+
@return map-get(map-get(variables.$colors, $color), $variant);
55
}

‎src/style/base/_typography.scss

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use "mixins";
2+
@use "variables";
23

34
/* inter-100 - latin */
45
@font-face {
@@ -97,46 +98,47 @@
9798

9899
h1 {
99100
font-size: 2rem;
100-
color: mixins.color('gray', 900);
101+
color: variables.$base-font-color;
101102
font-weight: normal;
102103
margin: 0;
103104
}
104105

105106
h2 {
106107
font-size: 1.8rem;
107108
margin: 0 0 1rem;
108-
color: mixins.color('gray', 900);
109+
color: variables.$base-font-color;
109110
}
110111

111112
h3 {
112113
font-size: 1.6rem;
113114
margin: 0 0 1rem;
114-
color: mixins.color('gray', 900);
115+
color: variables.$base-font-color;
115116
}
116117

117118
h4 {
118119
font-size: 1.4rem;
119120
margin: 0 0 1rem;
120-
color: mixins.color('gray', 900);
121+
color: variables.$base-font-color;
122+
font-weight: normal;
121123
}
122124

123125
h5 {
124126
font-size: 1.2rem;
125127
margin: 0 0 1rem;
126-
color: mixins.color('gray', 900);
128+
color: variables.$base-font-color;
127129
font-weight: 600;
128130
}
129131

130132
h6 {
131133
font-size: 1.1rem;
132134
margin: 0 0 1rem;
133-
color: mixins.color('gray', 900);
135+
color: variables.$base-font-color;
134136
}
135137

136138
.text-danger {
137-
color: mixins.color('red', 700);
139+
color: variables.color('red', 'default');
138140
}
139141

140142
.text-secondary {
141-
color: mixins.color('gray', 600);
143+
color: variables.color('gray', 'default');
142144
}

‎src/style/base/_variables.scss

Lines changed: 153 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,143 @@
1-
@use "mixins";
2-
@use "colors";
1+
/**
2+
* 1. Colors
3+
*/
4+
$colors: (
5+
'red': (
6+
'background': hsl(351, 100%, 96%),
7+
'background-hover': hsl(354, 100%, 94%),
8+
'default': hsl(0, 65%, 51%),
9+
'hover': hsl(0, 66%, 47%),
10+
'active': hsl(0, 73%, 41%),
11+
'default-font-color': #fff, //AA
12+
),
13+
'pink': (
14+
'background': hsl(340, 80%, 94%),
15+
'default': hsl(338, 78%, 48%),
16+
'hover': hsl(336, 78%, 43%),
17+
'active': hsl(334, 79%, 38%),
18+
'default-font-color': #fff, //AA
19+
),
20+
'purple': (
21+
'background': hsl(292, 44%, 93%),
22+
'default': hsl(287, 65%, 40%),
23+
'hover': hsl(282, 68%, 38%),
24+
'active': hsl(277, 70%, 35%),
25+
'default-font-color': #fff, //AAAA
26+
),
27+
'deep-purple': (
28+
'background': hsl(264, 45%, 94%),
29+
'background-hover': hsl(263, 45%, 90%),
30+
'default': hsl(260, 54%, 45%),
31+
'hover': hsl(258, 58%, 42%),
32+
'active': hsl(251, 69%, 34%),
33+
'default-font-color': #fff,
34+
),
35+
'indigo': (
36+
'background': hsl(231, 44%, 94%),
37+
'default': hsl(232, 50%, 45%),
38+
'hover': hsl(232, 54%, 41%),
39+
'active': hsl(233, 57%, 37%),
40+
'default-font-color': #fff, //AAA
41+
),
42+
'blue': (
43+
'background': hsl(205, 87%, 94%),
44+
'default': hsl(210, 79%, 46%),
45+
'hover': hsl(212, 80%, 42%),
46+
'active': hsl(216, 85%, 34%),
47+
'default-font-color': #fff, //AA
48+
),
49+
'light-blue': (
50+
'background': hsl(199, 94%, 94%),
51+
'default': hsl(199, 91%, 64%),
52+
'hover': hsl(199, 92%, 56%),
53+
'active': hsl(199, 98%, 48%),
54+
'default-font-color': #000, //AAA
55+
),
56+
'teal': (
57+
'background': hsl(177, 72%, 93%),
58+
'default': hsl(187, 100%, 38%),
59+
'hover': hsl(186, 100%, 33%),
60+
'active': hsl(185, 100%, 28%),
61+
'default-font-color': #000, //AAA
62+
),
63+
'green': (
64+
'background': hsl(125, 39%, 94%),
65+
'default': hsl(123, 41%, 45%),
66+
'hover': hsl(123, 43%, 39%),
67+
'active': hsl(123, 46%, 34%),
68+
'default-font-color': #000, //AA
69+
),
70+
'light-green': (
71+
'background': hsl(88, 52%, 94%),
72+
'default': hsl(89, 46%, 48%),
73+
'hover': hsl(92, 48%, 42%),
74+
'active': hsl(95, 49%, 36%),
75+
'default-font-color': #000, //AAA
76+
),
77+
'lime': (
78+
'background': hsl(66, 71%, 95%),
79+
'default': hsl(64, 60%, 50%),
80+
'hover': hsl(62, 61%, 44%),
81+
'active': hsl(60, 63%, 38%),
82+
'default-font-color': #000, //AAA
83+
),
84+
'yellow': (
85+
'background': hsl(55, 100%, 95%),
86+
'default': hsl(49, 98%, 60%),
87+
'hover': hsl(43, 96%, 58%),
88+
'active': hsl(37, 95%, 56%),
89+
'default-font-color': #000, //AAA
90+
),
91+
'amber': (
92+
'background': hsl(46, 100%, 94%),
93+
'default': hsl(42, 100%, 50%),
94+
'hover': hsl(38, 100%, 50%),
95+
'active': hsl(34, 100%, 50%),
96+
'default-font-color': #000, //AAA
97+
),
98+
'orange': (
99+
'background': hsl(37, 100%, 94%),
100+
'default': hsl(33, 100%, 49%),
101+
'hover': hsl(30, 100%, 48%),
102+
'active': hsl(27, 100%, 47%),
103+
'default-font-color': #000, //AAA
104+
),
105+
'brown': (
106+
'background': hsl(20, 16%, 93%),
107+
'default': hsl(15, 25%, 34%),
108+
'hover': hsl(14, 26%, 29%),
109+
'active': hsl(11, 26%, 24%),
110+
'default-font-color': #fff, //AAA
111+
),
112+
'gray': (
113+
'background': hsl(0, 0%, 98%),
114+
'default': hsl(0, 0%, 46%),
115+
'hover': hsl(0, 0%, 38%),
116+
'active': hsl(0, 0%, 26%),
117+
'default-font-color': #fff, //AA
118+
),
119+
'blue-gray': (
120+
'background': hsl(204, 15%, 94%),
121+
'default': hsl(199, 18%, 33%),
122+
'hover': hsl(200, 18%, 26%),
123+
'active': hsl(200, 19%, 18%),
124+
'default-font-color': #fff, //AAA
125+
)
126+
);
127+
128+
@function color($color, $variant: 'default') {
129+
@return map-get(map-get($colors, $color), $variant);
130+
}
3131

4132
/**
5-
* 1. Base
133+
* 2. Base
6134
*/
7-
$base-background-color: mixins.color('gray', 50);
135+
$base-background-color: color('gray', 'background');
8136
$base-body-gutter: 0;
9-
$base-font-color: mixins.color('blueGray', 900);
137+
$base-font-color: hsl(200, 19%, 18%);
10138
$base-font-family: 'Inter, apple-sf-pro-text, Helvetica, Arial, sans-serif';
11-
$base-border-color: mixins.color('gray', 300);
12-
$bse-border-hover-color: mixins.color('gray', 400);
139+
$base-border-color: hsl(0, 0%, 88%);
140+
$base-border-hover-color: hsl(0, 0%, 74%);
13141
$base-border-radius: 4px;
14142
$base-gutter: 1rem;
15143
$base-gutter-steps: 0.25;
@@ -27,42 +155,31 @@ $breakpoints: (
27155
--base-font-color: #{$base-font-color};
28156
--base-font-family: #{$base-font-family};
29157
--base-border-color: #{$base-border-color};
30-
--base-border-hover-color: #{$bse-border-hover-color};
158+
--base-border-hover-color: #{$base-border-hover-color};
31159
--base-border-radius: #{$base-border-radius};
32160
--base-gutter: #{$base-gutter};
33161
}
34162

35-
/**
36-
* 2. Colors
37-
*/
38-
$primary-color: mixins.color('deepPurple', 600);
39-
$primary-color-hover: mixins.color('deepPurple', 700);
40-
$primary-color-active: mixins.color('deepPurple', 800);
41-
$primary-color-light-background: mixins.color('deepPurple', 50);
42-
43-
$secondary-color: mixins.color('red', 600);
44-
$secondary-color-hover: mixins.color('red', 700);
45-
$secondary-color-active: mixins.color('red', 800);
163+
$primary-color: color('deep-purple', 'default');
164+
$primary-color-hover: color('deep-purple', 'hover');
165+
$primary-color-active: color('deep-purple', 'active');
166+
$primary-color-light-background: color('deep-purple', 'background');
46167

47-
$danger-color: mixins.color('red', 700);
48-
$danger-color-hover: mixins.color('red', 800);
49-
$danger-color-active: mixins.color('red', 900);
50-
$danger-color-light-background: mixins.color('red', 50);
168+
$danger-color: color('red', 'default');
169+
$danger-color-hover: color('red', 'hover');
170+
$danger-color-active: color('red', 'active');
171+
$danger-color-light-background: color('red', 'default');
51172

52-
$success-color: mixins.color('green', 700);
53-
$success-color-hover: mixins.color('green', 800);
54-
$success-color-active: mixins.color('green', 900);
173+
$success-color: color('green', 'default');
174+
$success-color-hover: color('green', 'hover');
175+
$success-color-active: color('green', 'active');
55176

56177
:root {
57178
--primary-color: #{$primary-color};
58179
--primary-color-hover: #{$primary-color-hover};
59180
--primary-color-active: #{$primary-color-active};
60181
--primary-color-light-background: #{$primary-color-light-background};
61182

62-
--secondary-color: #{$secondary-color};
63-
--secondary-color-hover: #{$secondary-color-hover};
64-
--secondary-color-active: #{$secondary-color-active};
65-
66183
--danger-color: #{$danger-color};
67184
--danger-color-hover: #{$danger-color-hover};
68185
--danger-color-active: #{$danger-color-active};
@@ -100,15 +217,15 @@ $button-padding: 1rem;
100217
$button-font-weight: 600;
101218
$button-font-size: 1rem;
102219

103-
$primary-button-ghost-hover-background: mixins.color('deepPurple', 50);
104-
$primary-button-ghost-active-background: mixins.color('deepPurple', 75);
220+
$primary-button-ghost-hover-background: color('deep-purple', 'background');
221+
$primary-button-ghost-active-background: color('deep-purple', 'background-hover');
105222

106223
$secondary-button-background: transparent;
107-
$secondary-button-hover-background: mixins.color('deepPurple', 50);
108-
$secondary-button-active-background: mixins.color('deepPurple', 75);
224+
$secondary-button-hover-background: color('deep-purple', 'background');
225+
$secondary-button-active-background: color('deep-purple', 'background-hover');
109226

110-
$danger-button-ghost-hover-background: mixins.color('red', 50);
111-
$danger-button-ghost-active-background: mixins.color('red', 75);
227+
$danger-button-ghost-hover-background: color('red', 'background');
228+
$danger-button-ghost-active-background: color('red', 'background-hover');
112229

113230
:root {
114231
--button-padding: #{$button-padding};
@@ -418,7 +535,6 @@ $icons: (
418535
'wifi': '\e9f3',
419536
);
420537

421-
422538
@function icon($name) {
423539
@return map-get($icons, $name);
424540
}

‎src/style/components/_button.scss

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "../base/variables";
2+
13
.btn {
24
background: transparent;
35
border: solid 1px transparent;
@@ -93,6 +95,24 @@
9395
}
9496
}
9597

98+
@each $color, $_ in variables.$colors {
99+
&.btn-#{$color} {
100+
border-color: variables.color($color, 'default');
101+
background: variables.color($color, 'default');
102+
color: variables.color($color, 'default-font-color');
103+
104+
&:hover {
105+
border-color: variables.color($color, 'hover');
106+
background: variables.color($color, 'hover');
107+
}
108+
109+
&:active {
110+
border-color: variables.color($color, 'active');
111+
background: variables.color($color, 'active');
112+
}
113+
}
114+
}
115+
96116
.icon-container {
97117
display: flex;
98118
align-items: center;

‎src/style/components/_elevation.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
@use "../base/mixins";
1+
@use "../base/variables";
22

33
@for $i from 1 through 5 {
44
.elevated-#{$i} {
5-
box-shadow: 0 2px #{$i * 2 + 3}px 0px hsla(hue(mixins.color('gray', 500)), saturation(mixins.color('gray', 500)), lightness(mixins.color('gray', 500)), 0.2);
5+
box-shadow: 0 2px #{$i * 2 + 3}px 0px hsla(hue(variables.color('gray', 'default')), saturation(variables.color('gray', 'default')), lightness(variables.color('gray', 'default')), 0.2);
66
}
77
}

‎src/style/components/_form-fields.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@use "../base/mixins";
21
@use "../base/variables";
32
@use "icons";
43

@@ -66,7 +65,7 @@
6665
font: {
6766
size: var(--form-field-font-size);
6867
}
69-
color: mixins.color('gray', 700);
68+
color: variables.color('gray', 'default');
7069
position: absolute;
7170
top: 50%;
7271
left: var(--form-field-padding);

0 commit comments

Comments
 (0)