Skip to content

Commit 06a8efe

Browse files
extrabrightextrabright
committed
extracted colors in a separate module
1 parent afb4940 commit 06a8efe

File tree

2 files changed

+165
-156
lines changed

2 files changed

+165
-156
lines changed

‎scss/core/_colors.scss‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
// Color system
2+
3+
// White/Grays/Black colors
4+
$white: #FFF !default;
5+
$gray-50: #FAFAFA !default; // Alternate background
6+
$gray-100: #F5F9FC !default; // Base background
7+
$gray-200: #E7EAF0 !default;
8+
$gray-300: #CFD6DF !default;
9+
$gray-400: #ABB6C5 !default;
10+
$gray-500: #8898A9 !default; // Disabled text
11+
$gray-600: #6B7B93 !default; // Placeholder text
12+
$gray-700: #525F7F !default; // Text content
13+
$gray-800: #2D3748 !default; // Text content old(44444e)
14+
$gray-900: #16192C !default; // Text content
15+
$black: #000 !default;
16+
17+
// Base colors
18+
$blue: #0099FF !default;
19+
$indigo: #5C60F5 !default;
20+
$purple: #8957FF !default;
21+
$pink: #FF579A !default;
22+
$magenta: #EE33FF !default;
23+
$red: #FF3366 !default;
24+
$orange: #FF8C00 !default;
25+
$yellow: #FFBB00 !default;
26+
$lime: #84cc16 !default;
27+
$green: #00CC88 !default;
28+
$teal: #22DDDD !default;
29+
$cyan: #00D4FF !default;
30+
31+
// fusv-disable
32+
$blue-100: tint-color($blue, 80%) !default;
33+
$blue-200: tint-color($blue, 60%) !default;
34+
$blue-300: tint-color($blue, 40%) !default;
35+
$blue-400: tint-color($blue, 20%) !default;
36+
$blue-500: $blue !default;
37+
$blue-600: shade-color($blue, 20%) !default;
38+
$blue-700: shade-color($blue, 40%) !default;
39+
$blue-800: shade-color($blue, 60%) !default;
40+
$blue-900: shade-color($blue, 80%) !default;
41+
42+
$indigo-100: tint-color($indigo, 80%) !default;
43+
$indigo-200: tint-color($indigo, 60%) !default;
44+
$indigo-300: tint-color($indigo, 40%) !default;
45+
$indigo-400: tint-color($indigo, 20%) !default;
46+
$indigo-500: $indigo !default;
47+
$indigo-600: shade-color($indigo, 20%) !default;
48+
$indigo-700: shade-color($indigo, 40%) !default;
49+
$indigo-800: shade-color($indigo, 60%) !default;
50+
$indigo-900: shade-color($indigo, 80%) !default;
51+
52+
$purple-100: tint-color($purple, 80%) !default;
53+
$purple-200: tint-color($purple, 60%) !default;
54+
$purple-300: tint-color($purple, 40%) !default;
55+
$purple-400: tint-color($purple, 20%) !default;
56+
$purple-500: $purple !default;
57+
$purple-600: shade-color($purple, 20%) !default;
58+
$purple-700: shade-color($purple, 40%) !default;
59+
$purple-800: shade-color($purple, 60%) !default;
60+
$purple-900: shade-color($purple, 80%) !default;
61+
62+
$pink-100: tint-color($pink, 80%) !default;
63+
$pink-200: tint-color($pink, 60%) !default;
64+
$pink-300: tint-color($pink, 40%) !default;
65+
$pink-400: tint-color($pink, 20%) !default;
66+
$pink-500: $pink !default;
67+
$pink-600: shade-color($pink, 20%) !default;
68+
$pink-700: shade-color($pink, 40%) !default;
69+
$pink-800: shade-color($pink, 60%) !default;
70+
$pink-900: shade-color($pink, 80%) !default;
71+
72+
$magenta-100: tint-color($magenta, 80%) !default;
73+
$magenta-200: tint-color($magenta, 60%) !default;
74+
$magenta-300: tint-color($magenta, 40%) !default;
75+
$magenta-400: tint-color($magenta, 20%) !default;
76+
$magenta-500: $magenta !default;
77+
$magenta-600: shade-color($magenta, 20%) !default;
78+
$magenta-700: shade-color($magenta, 40%) !default;
79+
$magenta-800: shade-color($magenta, 60%) !default;
80+
$magenta-900: shade-color($magenta, 80%) !default;
81+
82+
$red-100: tint-color($red, 80%) !default;
83+
$red-200: tint-color($red, 60%) !default;
84+
$red-300: tint-color($red, 40%) !default;
85+
$red-400: tint-color($red, 20%) !default;
86+
$red-500: $red !default;
87+
$red-600: shade-color($red, 20%) !default;
88+
$red-700: shade-color($red, 40%) !default;
89+
$red-800: shade-color($red, 60%) !default;
90+
$red-900: shade-color($red, 80%) !default;
91+
92+
$orange-100: tint-color($orange, 80%) !default;
93+
$orange-200: tint-color($orange, 60%) !default;
94+
$orange-300: tint-color($orange, 40%) !default;
95+
$orange-400: tint-color($orange, 20%) !default;
96+
$orange-500: $orange !default;
97+
$orange-600: shade-color($orange, 20%) !default;
98+
$orange-700: shade-color($orange, 40%) !default;
99+
$orange-800: shade-color($orange, 60%) !default;
100+
$orange-900: shade-color($orange, 80%) !default;
101+
102+
$yellow-100: tint-color($yellow, 80%) !default;
103+
$yellow-200: tint-color($yellow, 60%) !default;
104+
$yellow-300: tint-color($yellow, 40%) !default;
105+
$yellow-400: tint-color($yellow, 20%) !default;
106+
$yellow-500: $yellow !default;
107+
$yellow-600: shade-color($yellow, 20%) !default;
108+
$yellow-700: shade-color($yellow, 40%) !default;
109+
$yellow-800: shade-color($yellow, 60%) !default;
110+
$yellow-900: shade-color($yellow, 80%) !default;
111+
112+
$lime-100: tint-color($lime, 80%) !default;
113+
$lime-200: tint-color($lime, 60%) !default;
114+
$lime-300: tint-color($lime, 40%) !default;
115+
$lime-400: tint-color($lime, 20%) !default;
116+
$lime-500: $lime !default;
117+
$lime-600: shade-color($lime, 20%) !default;
118+
$lime-700: shade-color($lime, 40%) !default;
119+
$lime-800: shade-color($lime, 60%) !default;
120+
$lime-900: shade-color($lime, 80%) !default;
121+
122+
$green-100: tint-color($green, 80%) !default;
123+
$green-200: tint-color($green, 60%) !default;
124+
$green-300: tint-color($green, 40%) !default;
125+
$green-400: tint-color($green, 20%) !default;
126+
$green-500: $green !default;
127+
$green-600: shade-color($green, 20%) !default;
128+
$green-700: shade-color($green, 40%) !default;
129+
$green-800: shade-color($green, 60%) !default;
130+
$green-900: shade-color($green, 80%) !default;
131+
132+
$teal-100: tint-color($teal, 80%) !default;
133+
$teal-200: tint-color($teal, 60%) !default;
134+
$teal-300: tint-color($teal, 40%) !default;
135+
$teal-400: tint-color($teal, 20%) !default;
136+
$teal-500: $teal !default;
137+
$teal-600: shade-color($teal, 20%) !default;
138+
$teal-700: shade-color($teal, 40%) !default;
139+
$teal-800: shade-color($teal, 60%) !default;
140+
$teal-900: shade-color($teal, 80%) !default;
141+
142+
$cyan-100: tint-color($cyan, 80%) !default;
143+
$cyan-200: tint-color($cyan, 60%) !default;
144+
$cyan-300: tint-color($cyan, 40%) !default;
145+
$cyan-400: tint-color($cyan, 20%) !default;
146+
$cyan-500: $cyan !default;
147+
$cyan-600: shade-color($cyan, 20%) !default;
148+
$cyan-700: shade-color($cyan, 40%) !default;
149+
$cyan-800: shade-color($cyan, 60%) !default;
150+
$cyan-900: shade-color($cyan, 80%) !default;
151+
// fusv-enable
152+
153+
// Brand colors
154+
$bootstrap: #7952b3 !default;
155+
$laravel: #ff2d20 !default;
156+
$react: #61dafb !default;
157+
$facebook: #3b5999 !default;
158+
$twitter: #1da1f2 !default;
159+
$instagram: #e4405f !default;
160+
$pinterest: #bd081c !default;
161+
$youtube: #cd201f !default;
162+
$dribbble: #ea4c89 !default;
163+
$github: #222222 !default;
164+
$reddit: #FF4301 !default;

‎scss/core/variables/_colors.scss‎

Lines changed: 1 addition & 156 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,4 @@
1-
// Color system
2-
3-
// White/Grays/Black colors
4-
$white: #FFF !default;
5-
$gray-50: #FAFAFA !default; // Alternate background
6-
$gray-100: #F5F9FC !default; // Base background
7-
$gray-200: #E7EAF0 !default;
8-
$gray-300: #CFD6DF !default;
9-
$gray-400: #ABB6C5 !default;
10-
$gray-500: #8898A9 !default; // Disabled text
11-
$gray-600: #6B7B93 !default; // Placeholder text
12-
$gray-700: #525F7F !default; // Text content
13-
$gray-800: #2D3748 !default; // Text content old(44444e)
14-
$gray-900: #16192C !default; // Text content
15-
$black: #000 !default;
16-
1+
@import '../colors';
172

183
// 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.
194
// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
@@ -23,7 +8,6 @@ $min-contrast-ratio: 2 !default;
238
$color-contrast-dark: $black !default;
249
$color-contrast-light: $white !default;
2510

26-
2711
// fusv-disable
2812
$grays: (
2913
"50": $gray-50,
@@ -39,132 +23,6 @@ $grays: (
3923
) !default;
4024
// fusv-enable
4125

42-
43-
// Base colors
44-
$blue: #0099FF !default;
45-
$indigo: #5C60F5 !default;
46-
$purple: #8957FF !default;
47-
$pink: #FF579A !default;
48-
$magenta: #EE33FF !default;
49-
$red: #FF3366 !default;
50-
$orange: #FF8C00 !default;
51-
$yellow: #FFBB00 !default;
52-
$green: #00CC88 !default;
53-
$teal: #22DDDD !default;
54-
$cyan: #00D4FF !default;
55-
56-
// fusv-disable
57-
$blue-100: tint-color($blue, 80%) !default;
58-
$blue-200: tint-color($blue, 60%) !default;
59-
$blue-300: tint-color($blue, 40%) !default;
60-
$blue-400: tint-color($blue, 20%) !default;
61-
$blue-500: $blue !default;
62-
$blue-600: shade-color($blue, 20%) !default;
63-
$blue-700: shade-color($blue, 40%) !default;
64-
$blue-800: shade-color($blue, 60%) !default;
65-
$blue-900: shade-color($blue, 80%) !default;
66-
67-
$indigo-100: tint-color($indigo, 80%) !default;
68-
$indigo-200: tint-color($indigo, 60%) !default;
69-
$indigo-300: tint-color($indigo, 40%) !default;
70-
$indigo-400: tint-color($indigo, 20%) !default;
71-
$indigo-500: $indigo !default;
72-
$indigo-600: shade-color($indigo, 20%) !default;
73-
$indigo-700: shade-color($indigo, 40%) !default;
74-
$indigo-800: shade-color($indigo, 60%) !default;
75-
$indigo-900: shade-color($indigo, 80%) !default;
76-
77-
$purple-100: tint-color($purple, 80%) !default;
78-
$purple-200: tint-color($purple, 60%) !default;
79-
$purple-300: tint-color($purple, 40%) !default;
80-
$purple-400: tint-color($purple, 20%) !default;
81-
$purple-500: $purple !default;
82-
$purple-600: shade-color($purple, 20%) !default;
83-
$purple-700: shade-color($purple, 40%) !default;
84-
$purple-800: shade-color($purple, 60%) !default;
85-
$purple-900: shade-color($purple, 80%) !default;
86-
87-
$pink-100: tint-color($pink, 80%) !default;
88-
$pink-200: tint-color($pink, 60%) !default;
89-
$pink-300: tint-color($pink, 40%) !default;
90-
$pink-400: tint-color($pink, 20%) !default;
91-
$pink-500: $pink !default;
92-
$pink-600: shade-color($pink, 20%) !default;
93-
$pink-700: shade-color($pink, 40%) !default;
94-
$pink-800: shade-color($pink, 60%) !default;
95-
$pink-900: shade-color($pink, 80%) !default;
96-
97-
$magenta-100: tint-color($magenta, 80%) !default;
98-
$magenta-200: tint-color($magenta, 60%) !default;
99-
$magenta-300: tint-color($magenta, 40%) !default;
100-
$magenta-400: tint-color($magenta, 20%) !default;
101-
$magenta-500: $magenta !default;
102-
$magenta-600: shade-color($magenta, 20%) !default;
103-
$magenta-700: shade-color($magenta, 40%) !default;
104-
$magenta-800: shade-color($magenta, 60%) !default;
105-
$magenta-900: shade-color($magenta, 80%) !default;
106-
107-
$red-100: tint-color($red, 80%) !default;
108-
$red-200: tint-color($red, 60%) !default;
109-
$red-300: tint-color($red, 40%) !default;
110-
$red-400: tint-color($red, 20%) !default;
111-
$red-500: $red !default;
112-
$red-600: shade-color($red, 20%) !default;
113-
$red-700: shade-color($red, 40%) !default;
114-
$red-800: shade-color($red, 60%) !default;
115-
$red-900: shade-color($red, 80%) !default;
116-
117-
$orange-100: tint-color($orange, 80%) !default;
118-
$orange-200: tint-color($orange, 60%) !default;
119-
$orange-300: tint-color($orange, 40%) !default;
120-
$orange-400: tint-color($orange, 20%) !default;
121-
$orange-500: $orange !default;
122-
$orange-600: shade-color($orange, 20%) !default;
123-
$orange-700: shade-color($orange, 40%) !default;
124-
$orange-800: shade-color($orange, 60%) !default;
125-
$orange-900: shade-color($orange, 80%) !default;
126-
127-
$yellow-100: tint-color($yellow, 80%) !default;
128-
$yellow-200: tint-color($yellow, 60%) !default;
129-
$yellow-300: tint-color($yellow, 40%) !default;
130-
$yellow-400: tint-color($yellow, 20%) !default;
131-
$yellow-500: $yellow !default;
132-
$yellow-600: shade-color($yellow, 20%) !default;
133-
$yellow-700: shade-color($yellow, 40%) !default;
134-
$yellow-800: shade-color($yellow, 60%) !default;
135-
$yellow-900: shade-color($yellow, 80%) !default;
136-
137-
$green-100: tint-color($green, 80%) !default;
138-
$green-200: tint-color($green, 60%) !default;
139-
$green-300: tint-color($green, 40%) !default;
140-
$green-400: tint-color($green, 20%) !default;
141-
$green-500: $green !default;
142-
$green-600: shade-color($green, 20%) !default;
143-
$green-700: shade-color($green, 40%) !default;
144-
$green-800: shade-color($green, 60%) !default;
145-
$green-900: shade-color($green, 80%) !default;
146-
147-
$teal-100: tint-color($teal, 80%) !default;
148-
$teal-200: tint-color($teal, 60%) !default;
149-
$teal-300: tint-color($teal, 40%) !default;
150-
$teal-400: tint-color($teal, 20%) !default;
151-
$teal-500: $teal !default;
152-
$teal-600: shade-color($teal, 20%) !default;
153-
$teal-700: shade-color($teal, 40%) !default;
154-
$teal-800: shade-color($teal, 60%) !default;
155-
$teal-900: shade-color($teal, 80%) !default;
156-
157-
$cyan-100: tint-color($cyan, 80%) !default;
158-
$cyan-200: tint-color($cyan, 60%) !default;
159-
$cyan-300: tint-color($cyan, 40%) !default;
160-
$cyan-400: tint-color($cyan, 20%) !default;
161-
$cyan-500: $cyan !default;
162-
$cyan-600: shade-color($cyan, 20%) !default;
163-
$cyan-700: shade-color($cyan, 40%) !default;
164-
$cyan-800: shade-color($cyan, 60%) !default;
165-
$cyan-900: shade-color($cyan, 80%) !default;
166-
// fusv-enable
167-
16826
// scss-docs-start colors-map
16927
$colors: (
17028
"white": $white,
@@ -319,18 +177,6 @@ $theme-colors: (
319177
) !default;
320178
// scss-docs-end theme-colors-map
321179

322-
$bootstrap: #7952b3 !default;
323-
$laravel: #ff2d20 !default;
324-
$react: #61dafb !default;
325-
$facebook: #3b5999 !default;
326-
$twitter: #1da1f2 !default;
327-
$instagram: #e4405f !default;
328-
$pinterest: #bd081c !default;
329-
$youtube: #cd201f !default;
330-
$dribbble: #ea4c89 !default;
331-
$github: #222222 !default;
332-
$reddit: #FF4301 !default;
333-
334180
// scss-docs-start theme-colors-map
335181
$brand-colors: (
336182
"bootstrap": $bootstrap,
@@ -374,7 +220,6 @@ $body-text-align: null !default;
374220

375221

376222
// Surfaces
377-
//
378223
// Colors used for content area background colors
379224

380225
$surface-primary: $body-bg !default;

0 commit comments

Comments
 (0)