Skip to content

Commit 1d1316f

Browse files
jonesiscodingjonesiscoding
committed
Initial code commit
1 parent 4ab902c commit 1d1316f

5 files changed

Lines changed: 894 additions & 0 deletions

File tree

‎resources/scss/_functions.scss‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
/// Transforms a string into PascalCase
2+
///
3+
/// @credit Eduardo Boucas (@eduardoboucas)
4+
///
5+
/// @param {String} $input The string to transform
6+
///
7+
/// @return {String} The transformed string
8+
///
9+
@function to-pascal-case($input) {
10+
$str: '';
11+
$capital: true;
12+
$hyphen: false;
13+
14+
@for $i from 1 through str-length($input) {
15+
$char: str-slice($input, $i, $i);
16+
17+
@if $char != '-' {
18+
$str: $str + if($capital, to-upper-case($char), $char);
19+
20+
$capital: false;
21+
$hyphen: false;
22+
} @else {
23+
// Allowing double hyphen for BEM syntax
24+
@if $hyphen {
25+
$str: $str + '--';
26+
$hyphen: false;
27+
} @else {
28+
$hyphen: true;
29+
}
30+
31+
$capital: true;
32+
}
33+
}
34+
35+
@return $str;
36+
}
37+
38+
@function get-bg-class($color, $weight: '' ) {
39+
40+
$pascal: to-pascal-case($color);
41+
$m-class: ".-bg#{$pascal}#{$weight}";
42+
$bc-class: if($weight != '', ".bg-#{$color}-#{$weight}", ".bg-#{$color}");
43+
$class: '';
44+
45+
@if $enable-bootstrap-class and $enable-modifier-class {
46+
$class: #{unquote($m-class)}, #{unquote($bc-class)};
47+
} @else if $enable-bootstrap-class {
48+
$class: #{unquote($bc-class)};
49+
} @else if $enable-modifier-class {
50+
$class: #{unquote($m-class)};
51+
}
52+
53+
@return $class;
54+
}
55+
56+
@function get-text-class($color, $weight: '' ) {
57+
58+
$pascal: to-pascal-case($color);
59+
$m-class: ".-text#{$pascal}#{$weight}";
60+
$bc-class: if($weight != '', ".text-#{$color}-#{$weight}", ".text-#{$color}");
61+
$class: '';
62+
63+
@if $enable-bootstrap-class and $enable-modifier-class {
64+
$class: #{unquote($m-class)}, #{unquote($bc-class)};
65+
} @else if $enable-bootstrap-class {
66+
$class: #{unquote($bc-class)};
67+
} @else if $enable-modifier-class {
68+
$class: #{unquote($m-class)};
69+
}
70+
71+
@return $class;
72+
}
73+
74+
@function get-color($color,$weight) {
75+
$p: quote($color);
76+
$w: quote($weight);
77+
78+
@if(variable-exists(palettes)) {
79+
@if(map-has-key($palettes, $p)) {
80+
$palette: map-get($palettes, $p);
81+
@if(map-has-key($palette, $w )) {
82+
@return map-get($palette, $w);
83+
} @else {
84+
@error "The #{$p} key of the $palettes variable does not contain the weight #{$w}";
85+
}
86+
} @else {
87+
@error "The $palettes variable does not contain a #{$p} key.";
88+
}
89+
} @else {
90+
@error "The $palettes variable does not exist.";
91+
}
92+
93+
@return null;
94+
}
95+
96+
// region //////////////////////////////////////////////// Convenience Getter Functions
97+
98+
@function get-gray($weight: 0) {
99+
@return get-color("gray", $weight);
100+
}
101+
102+
@function get-blue-gray($weight: 0) {
103+
@return get-color("blue-gray", $weight);
104+
}
105+
106+
@function get-red($weight: 0) {
107+
@return get-color("red", $weight);
108+
}
109+
110+
@function get-pink($weight: 0) {
111+
@return get-color("pink", $weight);
112+
}
113+
114+
@function get-purple($weight: 0) {
115+
@return get-color("purple", $weight);
116+
}
117+
118+
@function get-deep-purple($weight: 0) {
119+
@return get-color("deep-purple", $weight);
120+
}
121+
122+
@function get-indigo($weight: 0) {
123+
@return get-color("indigo", $weight);
124+
}
125+
126+
@function get-blue($weight: 0) {
127+
@return get-color("blue", $weight);
128+
}
129+
130+
@function get-light-blue($weight: 0) {
131+
@return get-color("light-blue", $weight);
132+
}
133+
134+
@function get-cyan($weight: 0) {
135+
@return get-color("cyan", $weight);
136+
}
137+
138+
@function get-teal($weight: 0) {
139+
@return get-color("teal", $weight);
140+
}
141+
142+
@function get-green($weight: 0) {
143+
@return get-color("green", $weight);
144+
}
145+
146+
@function get-light-green($weight: 0) {
147+
@return get-color("light-green", $weight);
148+
}
149+
150+
@function get-lime($weight: 0) {
151+
@return get-color("lime", $weight);
152+
}
153+
154+
@function get-yellow($weight: 0) {
155+
@return get-color("yellow", $weight);
156+
}
157+
158+
@function get-amber($weight: 0) {
159+
@return get-color("amber", $weight);
160+
}
161+
162+
@function get-orange($weight: 0) {
163+
@return get-color("orange", $weight);
164+
}
165+
166+
@function get-deep-orange($weight: 0) {
167+
@return get-color("deep-orange", $weight);
168+
}
169+
170+
@function get-brown($weight: 0) {
171+
@return get-color("brown", $weight);
172+
}

‎resources/scss/_includes.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@import "functions";
2+
@import "variables";
3+
@import "mixins";

‎resources/scss/_mixins.scss‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
@import "variables";
2+
@import "functions";
3+
4+
@mixin palette-hover-focus {
5+
@if $enable-bootstrap-class and mixin-exists(hover-focus) {
6+
@include hover-focus {
7+
@content;
8+
}
9+
} @else {
10+
&:focus,
11+
&:hover {
12+
@content;
13+
}
14+
}
15+
}
16+
17+
// Generates the background utility classes for the given name and color value.
18+
//
19+
// @param {String} The selector to use.
20+
// @param {Color} The color value to assign to the background.
21+
@mixin bg-palette-variant($class, $color-value) {
22+
@if $enable-bootstrap-class and mixin-exists(bg-variant) {
23+
// Use the Bootstrap Mixin if Possible
24+
@include bg-variant($class,$color-value);
25+
} @else {
26+
// Otherwise we use our own output
27+
#{$class} {
28+
background-color: $color-value !important;
29+
}
30+
a#{$class} {
31+
@include palette-hover-focus {
32+
background-color: darken($color-value, 10%) !important;
33+
}
34+
}
35+
}
36+
}
37+
38+
// Generates the text color utility classes for the given name and color value.
39+
//
40+
// @param {String} The selector to use.
41+
// @param {Color} The color value to assign to the text.
42+
@mixin text-emphasis-palette-variant($class, $color-value) {
43+
@if $enable-bootstrap-class and mixin-exists(text-emphasis-variant) {
44+
// Use the Bootstrap Mixin if Possible
45+
@include text-emphasis-variant($class,$color-value);
46+
} @else {
47+
// Otherwise we use our own output
48+
#{$class} {
49+
color: $color-value !important;
50+
}
51+
a#{$class} {
52+
@include palette-hover-focus {
53+
color: darken($color-value, 10%) !important;
54+
}
55+
}
56+
}
57+
}
58+
59+
// Generates text color utility classes for all of color weights given in the export list.
60+
//
61+
// @param {Map} $export The list of palettes to export text colors for.
62+
@mixin text-color-utils($export: $palette-export) {
63+
@each $palette, $v in $export {
64+
@if type-of($v) == "list" {
65+
@each $weight in $v {
66+
$color-value: get-color($palette, $weight);
67+
$text-class: get-text-class($palette, $weight);
68+
69+
@include text-emphasis-palette-variant($text-class, $color-value);
70+
}
71+
} @else {
72+
$color-value: get-color($palette, $v);
73+
$text-class: get-text-class($palette);
74+
75+
@include text-emphasis-palette-variant($text-class, $color-value);
76+
}
77+
}
78+
}
79+
80+
// Generates background color utility classes for all color weights the given export list.
81+
//
82+
// @param {Map} $export The list of palettes to export text colors for.
83+
@mixin bg-color-utils($export: $palette-export) {
84+
@each $palette, $v in $export {
85+
@if type-of($v) == "list" {
86+
@each $weight in $v {
87+
$color-value: get-color($palette, $weight);
88+
$bg-class: get-bg-class($palette, $weight);
89+
90+
@include bg-palette-variant($bg-class, $color-value);
91+
}
92+
} @else {
93+
$color-value: get-color($palette, $v);
94+
$bg-class: get-bg-class($palette);
95+
96+
@include bg-palette-variant($bg-class, $color-value);
97+
}
98+
}
99+
}
100+
101+
// Generates css custom properties for all color weights the given export list.
102+
//
103+
// @param {Map} $export The list of palettes to export text colors for.
104+
@mixin root-color-utils($export: $palette-export) {
105+
@each $palette, $v in $export {
106+
@if type-of($v) == "list" {
107+
@each $weight in $v {
108+
$color-value: get-color($palette, $weight);
109+
$property: #{$palette}-#{$weight};
110+
111+
--#{$property}: #{$color-value};
112+
}
113+
} @else {
114+
$color-value: get-color($palette, $v);
115+
$property: #{$palette};
116+
117+
--#{$property}: #{$color-value};
118+
}
119+
}
120+
}

0 commit comments

Comments
 (0)