Skip to content

Commit c88e695

Browse files
author
Eran Machiels
authored
Merge pull request #2 from machielsdev/feature/setup-style
Added base style setup
2 parents bb116d4 + 84c27e0 commit c88e695

File tree

9 files changed

+274
-0
lines changed

9 files changed

+274
-0
lines changed

‎src/components/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './utils';

‎src/components/utils/Variant.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export enum Variant {
2+
}

‎src/components/utils/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { Variant } from './Variant';

‎src/style/base/_base.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
html {
2+
font-size: 14px;
3+
}

‎src/style/base/_colors.scss

Lines changed: 247 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,247 @@
1+
$colors: (
2+
'red': (
3+
50: hsl(351, 100%, 96%),
4+
75: hsl(354, 100%, 94%),
5+
100: hsl(354, 100%, 90%),
6+
200: hsl(0, 73%, 77%),
7+
300: hsl(0, 69%, 67%),
8+
400: hsl(1, 83%, 63%),
9+
500: hsl(4, 90%, 58%),
10+
600: hsl(1, 77%, 55%),
11+
700: hsl(0, 65%, 51%),
12+
800: hsl(0, 66%, 47%),
13+
900: hsl(0, 73%, 41%)
14+
),
15+
'pink': (
16+
50: hsl(340, 80%, 94%),
17+
75: hsl(340, 80%, 90%),
18+
100: hsl(339, 81%, 85%),
19+
200: hsl(340, 82%, 76%),
20+
300: hsl(340, 83%, 66%),
21+
400: hsl(340, 82%, 59%),
22+
500: hsl(340, 82%, 52%),
23+
600: hsl(338, 78%, 48%),
24+
700: hsl(336, 78%, 43%),
25+
800: hsl(334, 79%, 38%),
26+
900: hsl(328, 81%, 29%)
27+
),
28+
'purple': (
29+
50: hsl(292, 44%, 93%),
30+
100: hsl(292, 44%, 87%),
31+
200: hsl(291, 47%, 71%),
32+
300: hsl(291, 47%, 60%),
33+
400: hsl(291, 47%, 51%),
34+
500: hsl(291, 64%, 42%),
35+
600: hsl(287, 65%, 40%),
36+
700: hsl(282, 68%, 38%),
37+
800: hsl(277, 70%, 35%),
38+
900: hsl(267, 75%, 31%)
39+
),
40+
'deepPurple': (
41+
50: hsl(264, 45%, 94%),
42+
75: hsl(264, 45%, 90%),
43+
100: hsl(261, 46%, 84%),
44+
200: hsl(261, 46%, 74%),
45+
300: hsl(262, 47%, 63%),
46+
400: hsl(262, 47%, 55%),
47+
500: hsl(262, 52%, 47%),
48+
600: hsl(260, 54%, 45%),
49+
700: hsl(258, 58%, 42%),
50+
800: hsl(255, 61%, 39%),
51+
900: hsl(251, 69%, 34%)
52+
),
53+
'indigo': (
54+
50: hsl(231, 44%, 94%),
55+
75: hsl(231, 44%, 90%),
56+
100: hsl(232, 45%, 84%),
57+
200: hsl(231, 44%, 74%),
58+
300: hsl(230, 44%, 64%),
59+
400: hsl(231, 44%, 56%),
60+
500: hsl(231, 48%, 48%),
61+
600: hsl(232, 50%, 45%),
62+
700: hsl(232, 54%, 41%),
63+
800: hsl(233, 57%, 37%),
64+
900: hsl(235, 66%, 30%)
65+
),
66+
'blue': (
67+
50: hsl(205, 87%, 94%),
68+
100: hsl(205, 88%, 90%),
69+
200: hsl(207, 90%, 77%),
70+
300: hsl(207, 89%, 68%),
71+
400: hsl(207, 90%, 61%),
72+
500: hsl(207, 90%, 54%),
73+
600: hsl(208, 79%, 51%),
74+
700: hsl(210, 79%, 46%),
75+
800: hsl(212, 80%, 42%),
76+
900: hsl(216, 85%, 34%)
77+
),
78+
'lightBlue': (
79+
50: hsl(199, 94%, 94%),
80+
75: hsl(199, 92%, 90%),
81+
100: hsl(199, 92%, 85%),
82+
200: hsl(199, 92%, 74%),
83+
300: hsl(199, 91%, 64%),
84+
400: hsl(199, 92%, 56%),
85+
500: hsl(199, 98%, 48%),
86+
600: hsl(200, 97%, 45%),
87+
700: hsl(201, 98%, 41%),
88+
800: hsl(202, 98%, 37%),
89+
900: hsl(206, 99%, 31%)
90+
),
91+
'cyan': (
92+
50: hsl(187, 72%, 93%),
93+
75: hsl(187, 72%, 90%),
94+
100: hsl(187, 71%, 82%),
95+
200: hsl(187, 72%, 71%),
96+
300: hsl(187, 71%, 59%),
97+
400: hsl(187, 71%, 50%),
98+
500: hsl(187, 100%, 42%),
99+
600: hsl(187, 100%, 38%),
100+
700: hsl(186, 100%, 33%),
101+
800: hsl(185, 100%, 28%),
102+
900: hsl(182, 100%, 20%)
103+
),
104+
'teal': (
105+
50: hsl(177, 72%, 93%),
106+
75: hsl(175, 72%, 90%),
107+
100: hsl(174, 71%, 82%),
108+
200: hsl(174, 72%, 71%),
109+
300: hsl(174, 71%, 59%),
110+
400: hsl(174, 71%, 50%),
111+
500: hsl(187, 100%, 42%),
112+
600: hsl(187, 100%, 38%),
113+
700: hsl(186, 100%, 33%),
114+
800: hsl(185, 100%, 28%),
115+
900: hsl(182, 100%, 20%)
116+
),
117+
'green': (
118+
50: hsl(125, 39%, 94%),
119+
75: hsl(122, 37%, 90%),
120+
100: hsl(122, 37%, 84%),
121+
200: hsl(122, 37%, 74%),
122+
300: hsl(123, 38%, 64%),
123+
400: hsl(123, 38%, 57%),
124+
500: hsl(122, 39%, 49%),
125+
600: hsl(123, 41%, 45%),
126+
700: hsl(123, 43%, 39%),
127+
800: hsl(123, 46%, 34%),
128+
900: hsl(124, 55%, 24%)
129+
),
130+
'lightGreen': (
131+
50: hsl(88, 52%, 94%),
132+
75: hsl(88, 51%, 89%),
133+
100: hsl(88, 51%, 86%),
134+
200: hsl(88, 50%, 76%),
135+
300: hsl(88, 50%, 67%),
136+
400: hsl(88, 50%, 60%),
137+
500: hsl(88, 50%, 53%),
138+
600: hsl(89, 46%, 48%),
139+
700: hsl(92, 48%, 42%),
140+
800: hsl(95, 49%, 36%),
141+
900: hsl(103, 56%, 26%)
142+
),
143+
'lime': (
144+
50: hsl(66, 71%, 95%),
145+
75: hsl(66, 70%, 90%),
146+
100: hsl(65, 69%, 86%),
147+
200: hsl(66, 71%, 77%),
148+
300: hsl(66, 70%, 68%),
149+
400: hsl(66, 70%, 61%),
150+
500: hsl(66, 70%, 54%),
151+
600: hsl(64, 60%, 50%),
152+
700: hsl(62, 61%, 44%),
153+
800: hsl(60, 63%, 38%),
154+
900: hsl(54, 70%, 30%)
155+
),
156+
'yellow': (
157+
50: hsl(55, 100%, 95%),
158+
75: hsl(54, 100%, 91%),
159+
100: hsl(54, 100%, 88%),
160+
200: hsl(54, 100%, 81%),
161+
300: hsl(54, 100%, 73%),
162+
400: hsl(54, 100%, 67%),
163+
500: hsl(54, 100%, 62%),
164+
600: hsl(49, 98%, 60%),
165+
700: hsl(43, 96%, 58%),
166+
800: hsl(37, 95%, 56%),
167+
900: hsl(28, 92%, 53%)
168+
),
169+
'amber': (
170+
50: hsl(46, 100%, 94%),
171+
75: hsl(45, 100%, 90%),
172+
100: hsl(45, 100%, 85%),
173+
200: hsl(45, 100%, 75%),
174+
300: hsl(46, 100%, 65%),
175+
400: hsl(45, 100%, 58%),
176+
500: hsl(45, 100%, 51%),
177+
600: hsl(42, 100%, 50%),
178+
700: hsl(38, 100%, 50%),
179+
800: hsl(34, 100%, 50%),
180+
900: hsl(26, 100%, 50%)
181+
),
182+
'orange': (
183+
50: hsl(37, 100%, 94%),
184+
75: hsl(37, 100%, 90%),
185+
100: hsl(36, 100%, 85%),
186+
200: hsl(36, 100%, 75%),
187+
300: hsl(36, 100%, 65%),
188+
400: hsl(36, 100%, 57%),
189+
500: hsl(36, 100%, 50%),
190+
600: hsl(33, 100%, 49%),
191+
700: hsl(30, 100%, 48%),
192+
800: hsl(27, 100%, 47%),
193+
900: hsl(21, 100%, 45%)
194+
),
195+
'deepOrange': (
196+
50: hsl(6, 71%, 95%),
197+
75: hsl(6, 71%, 91%),
198+
100: hsl(14, 100%, 87%),
199+
200: hsl(14, 100%, 78%),
200+
300: hsl(14, 100%, 70%),
201+
400: hsl(14, 100%, 63%),
202+
500: hsl(14, 100%, 57%),
203+
600: hsl(14, 91%, 54%),
204+
700: hsl(14, 80%, 50%),
205+
800: hsl(14, 82%, 46%),
206+
900: hsl(14, 88%, 40%)
207+
),
208+
'brown': (
209+
50: hsl(20, 16%, 93%),
210+
75: hsl(20, 16%, 87%),
211+
100: hsl(16, 16%, 81%),
212+
200: hsl(115, 15%, 69%),
213+
300: hsl(16, 15%, 56%),
214+
400: hsl(16, 18%, 47%),
215+
500: hsl(16, 25%, 38%),
216+
600: hsl(15, 25%, 34%),
217+
700: hsl(14, 26%, 29%),
218+
800: hsl(11, 26%, 24%),
219+
900: hsl(9, 28%, 19%)
220+
),
221+
'gray': (
222+
50: hsl(0, 0%, 98%),
223+
75: hsl(0, 0%, 97%),
224+
100: hsl(0, 0%, 96%),
225+
200: hsl(0, 0%, 93%),
226+
300: hsl(0, 0%, 88%),
227+
400: hsl(0, 0%, 74%),
228+
500: hsl(0, 0%, 62%),
229+
600: hsl(0, 0%, 46%),
230+
700: hsl(0, 0%, 38%),
231+
800: hsl(0, 0%, 26%),
232+
900: hsl(0, 0%, 13%)
233+
),
234+
'blueGray': (
235+
50: hsl(204, 15%, 94%),
236+
75: hsl(204, 15%, 88%),
237+
100: hsl(198, 16%, 84%),
238+
200: hsl(200, 15%, 73%),
239+
300: hsl(200, 16%, 62%),
240+
400: hsl(200, 15%, 54%),
241+
500: hsl(200, 18%, 46%),
242+
600: hsl(199, 18%, 40%),
243+
700: hsl(199, 18%, 33%),
244+
800: hsl(200, 18%, 26%),
245+
900: hsl(200, 19%, 18%)
246+
)
247+
);

‎src/style/base/_mixins.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@use "colors";
2+
3+
@function color($color, $variant: 500) {
4+
@return map-get(map-get(colors.$colors, $color), $variant);
5+
}

‎src/style/base/_variables.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@use "mixins";
2+
@use "colors";
3+
4+
$primary-radius: 4px;

‎src/style/components/.gitkeep

Whitespace-only changes.

‎src/style/index.scss

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/**
2+
* 1. Base style setup
3+
*/
4+
@use "base/colors";
5+
@use "base/mixins";
6+
@use "base/variables";
7+
@use "base/base";
8+
9+
/**
10+
* 2. Components
11+
*/

0 commit comments

Comments
 (0)