Skip to content

Commit 7622c1a

Browse files
BipinKalraBipinKalra
committed
color classes
1 parent 0e9ea07 commit 7622c1a

File tree

3 files changed

+115
-38
lines changed

3 files changed

+115
-38
lines changed

‎sass/styles/applications/coding-blocks/_application.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@
22
@import "buttons.scss";
33
@import "heading.scss";
44
@import "font.scss";
5+
@import "color.scss";
56
}

‎sass/styles/applications/coding-blocks/color.scss

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
// TEXT SOLIDS
2+
3+
@each $abbrev, $color in $solid-color-list {
4+
.text-#{$abbrev} {
5+
color: $color !important;
6+
}
7+
}
8+
9+
// TEXT GRADIENTS
10+
11+
@each $abbrev, $color in $gradient-color-list {
12+
.text-gradient-#{$abbrev} {
13+
-webkit-text-fill-color: transparent;
14+
-webkit-background-clip: text;
15+
background-clip: text;
16+
background-image: $color;
17+
}
18+
}
19+
20+
// BACKGROUND SOLIDS
21+
22+
@each $abbrev, $color in $solid-color-list {
23+
.bg-#{$abbrev} {
24+
background-color: $color !important;
25+
}
26+
}
27+
28+
// BACKGROUND GRADIENTS
29+
30+
@each $abbrev, $color in $gradient-color-list {
31+
.bg-gradient-#{$abbrev} {
32+
background: $color;
33+
}
34+
}

‎sass/styles/applications/coding-blocks/settings/colors.scss

Lines changed: 80 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,103 @@
11
// PALETTE SOLIDS
22

33
// Neutral colors
4-
$black: #08090C;
5-
$grey-dark-2: #191D24;
6-
$grey-dark-1: #2A2F3C;
7-
$grey: #3B4254;
8-
$grey-light-1: #CCCCCC;
9-
$grey-light-2: #E0E0E0;
10-
$grey-light-3: #F5F5F5;
4+
$black: #08090c;
5+
$grey-dark-2: #191d24;
6+
$grey-dark-1: #2a2f3c;
7+
$grey: #3b4254;
8+
$grey-light-1: #cccccc;
9+
$grey-light-2: #e0e0e0;
10+
$grey-light-3: #f5f5f5;
1111

1212
// Greens
13-
$green-dark-2: #26A87C;
14-
$green-dark-1: #55C25C;
15-
$green: #6CCE4B;
16-
$green-light-1: #83DB3B;
13+
$green-dark-2: #26a87c;
14+
$green-dark-1: #55c25c;
15+
$green: #6cce4b;
16+
$green-light-1: #83db3b;
1717

1818
// Blues
19-
$blue-dark-2: #1C40DE;
20-
$blue-dark-1: #2167E3;
21-
$blue: #258EE8;
22-
$blue-light-1: #2AB5ED;
19+
$blue-dark-2: #1c40de;
20+
$blue-dark-1: #2167e3;
21+
$blue: #258ee8;
22+
$blue-light-1: #2ab5ed;
2323

2424
// Reds
25-
$red: #E74E4B;
26-
$orange-dark-1: #F26A3E;
27-
$orange: #FB8133;
28-
$yellow: #FFBA08;
25+
$red: #e74e4b;
26+
$orange-dark-1: #f26a3e;
27+
$orange: #fb8133;
28+
$yellow: #ffba08;
2929

3030
// Purples
31-
$purple-dark-2: #3A30D6;
32-
$purple-dark-1: #4F33DA;
33-
$purple: #6536DE;
34-
$purple-light-1: #8F3CE5;
31+
$purple-dark-2: #3a30d6;
32+
$purple-dark-1: #4f33da;
33+
$purple: #6536de;
34+
$purple-light-1: #8f3ce5;
3535

3636
// Pinks
37-
$pink-dark-2: #A6076C;
38-
$pink-dark-1: #BF1F68;
39-
$pink: #D93764;
40-
$pink-light-1: #F24F60;
37+
$pink-dark-2: #a6076c;
38+
$pink-dark-1: #bf1f68;
39+
$pink: #d93764;
40+
$pink-light-1: #f24f60;
4141

4242

4343
// PALETTE GRADIENTS
4444

45-
$gradient-orange-dark: linear-gradient(90deg, #E74E4B, #F26A3E);
46-
$gradient-orange: linear-gradient(90deg, #F26A3E, #FB8133);
47-
$gradient-orange-light: linear-gradient(90deg, #FB8133, #FFBA08);
45+
$gradient-orange-dark: linear-gradient(90deg, #e74e4b, #f26a3e);
46+
$gradient-orange: linear-gradient(90deg, #f26a3e, #fb8133);
47+
$gradient-orange-light: linear-gradient(90deg, #fb8133, #ffba08);
4848

49-
$gradient-green-dark: linear-gradient(90deg, #26A87C, #55C25C);
50-
$gradient-green: linear-gradient(90deg, #55C25C, #6CCE4B);
51-
$gradient-green-light: linear-gradient(90deg, #6CCE4B, #83DB3B);
52-
53-
$gradient-blue-dark: linear-gradient(90deg, #1C40DE, #2167E3);
54-
$gradient-blue: linear-gradient(90deg, #2167E3, #258EE8);
55-
$gradient-blue-light: linear-gradient(90deg, #258EE8, #2AB5ED);
49+
$gradient-green-dark: linear-gradient(90deg, #26a87c, #55c25c);
50+
$gradient-green: linear-gradient(90deg, #55c25c, #6cce4b);
51+
$gradient-green-light: linear-gradient(90deg, #6cce4b, #83db3b);
5652

53+
$gradient-blue-dark: linear-gradient(90deg, #1c40de, #2167e3);
54+
$gradient-blue: linear-gradient(90deg, #2167e3, #258ee8);
55+
$gradient-blue-light: linear-gradient(90deg, #258ee8, #2ab5ed);
5756

5857

5958
// BUTTON GRADIENTS
6059

61-
$button-gradient-orange: linear-gradient(90deg, #FB8133, #FFBA08, #FB8133)
60+
$button-gradient-orange: linear-gradient(90deg, #fb8133, #ffba08, #fb8133);
61+
62+
63+
$solid-color-list: (
64+
"black": $black,
65+
"grey-dark-2": $grey-dark-2,
66+
"grey-dark-1": $grey-dark-1,
67+
"grey": $grey,
68+
"grey-light-1": $grey-light-1,
69+
"grey-light-2": $grey-light-2,
70+
"grey-light-3": $grey-light-3,
71+
"green-dark-2": $green-dark-2,
72+
"green-dark-1": $green-dark-1,
73+
"green": $green,
74+
"green-light-1": $green-light-1,
75+
"blue-dark-2": $blue-dark-2,
76+
"blue-dark-1": $blue-dark-1,
77+
"blue": $blue,
78+
"blue-light-1": $blue-light-1,
79+
"red": $red,
80+
"orange-dark-1": $orange-dark-1,
81+
"orange": $orange,
82+
"yellow": $yellow,
83+
"purple-dark-2": $purple-dark-2,
84+
"purple-dark-1": $purple-dark-1,
85+
"purple": $purple,
86+
"purple-light-1": $purple-light-1,
87+
"pink-dark-2": $pink-dark-2,
88+
"pink-dark-1": $pink-dark-1,
89+
"pink": $pink,
90+
"pink-light-1": $pink-light-1,
91+
);
92+
93+
$gradient-color-list: (
94+
"orange-dark": $gradient-orange-dark,
95+
"orange": $gradient-orange,
96+
"orange-light": $gradient-orange-light,
97+
"green-dark": $gradient-green-dark,
98+
"green": $gradient-green,
99+
"green-light": $gradient-green-light,
100+
"blue-dark": $gradient-blue-dark,
101+
"blue": $gradient-blue,
102+
"blue-light": $gradient-blue-light,
103+
);

0 commit comments

Comments
 (0)