diff options
author | Stefan Malzner <stefan@adlk.io> | 2018-11-24 20:15:39 +0100 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2018-11-24 20:15:39 +0100 |
commit | 4ea044ae6b2e27e48d45bc3be1c366f4882bbda5 (patch) | |
tree | d19064b7370cb66ef66407de082bedad4c3128d4 /src/styles | |
parent | disable import/prefer-default-export (diff) | |
download | ferdium-app-4ea044ae6b2e27e48d45bc3be1c366f4882bbda5.tar.gz ferdium-app-4ea044ae6b2e27e48d45bc3be1c366f4882bbda5.tar.zst ferdium-app-4ea044ae6b2e27e48d45bc3be1c366f4882bbda5.zip |
feat(App): Lay groundwork for general themeing support
Diffstat (limited to 'src/styles')
-rw-r--r-- | src/styles/colors.scss | 50 | ||||
-rw-r--r-- | src/styles/type-helper.scss | 100 |
2 files changed, 126 insertions, 24 deletions
diff --git a/src/styles/colors.scss b/src/styles/colors.scss index 4411a0e81..80c2fb633 100644 --- a/src/styles/colors.scss +++ b/src/styles/colors.scss | |||
@@ -1,38 +1,40 @@ | |||
1 | $theme-brand-primary: #3498db; | 1 | @import "./type-helper"; |
2 | $theme-brand-success: #5cb85c; | ||
3 | $theme-brand-info: #5bc0de; | ||
4 | $theme-brand-warning: #FF9F00; | ||
5 | $theme-brand-danger: #d9534f; | ||
6 | 2 | ||
7 | $theme-gray-dark: #373a3c; | 3 | $theme-brand-primary: convert-rgb-string-to-color($raw-theme-brand-primary); |
8 | $theme-gray: #55595c; | 4 | $theme-brand-success: convert-rgb-string-to-color($raw-theme-brand-success); |
9 | $theme-gray-light: #818a91; | 5 | $theme-brand-info: convert-rgb-string-to-color($raw-theme-brand-info); |
10 | $theme-gray-lighter: #eceeef; | 6 | $theme-brand-warning: convert-rgb-string-to-color($raw-theme-brand-warning); |
11 | $theme-gray-lightest: #f7f7f9; | 7 | $theme-brand-danger: convert-rgb-string-to-color($raw-theme-brand-danger); |
12 | 8 | ||
13 | $theme-border-radius: 6px; | 9 | $theme-gray-dark: convert-rgb-string-to-color($raw-theme-gray-dark); |
14 | $theme-border-radius-small: 3px; | 10 | $theme-gray: convert-rgb-string-to-color($raw-theme-gray); |
11 | $theme-gray-light: convert-rgb-string-to-color($raw-theme-gray-light); | ||
12 | $theme-gray-lighter: convert-rgb-string-to-color($raw-theme-gray-lighter); | ||
13 | $theme-gray-lightest: convert-rgb-string-to-color($raw-theme-gray-lightest); | ||
15 | 14 | ||
16 | $theme-sidebar-width: 68px; | 15 | $theme-border-radius: to-number($raw-theme-border-radius); |
16 | $theme-border-radius-small: to-number($raw-theme-border-radius-small); | ||
17 | 17 | ||
18 | $theme-text-color: $theme-gray-dark; | 18 | $theme-sidebar-width: to-number($raw-theme-sidebar-width); |
19 | |||
20 | $theme-text-color: convert-rgb-string-to-color($raw-theme-gray-dark); | ||
19 | 21 | ||
20 | $theme-transition-time: .5s; | 22 | $theme-transition-time: .5s; |
21 | 23 | ||
22 | $theme-inset-shadow: inset 0 2px 5px rgba(0, 0, 0, .03); | 24 | $theme-inset-shadow: inset 0 2px 5px rgba(0, 0, 0, .03); |
23 | 25 | ||
24 | // Dark Theme | 26 | // Dark Theme |
25 | $dark-theme-black: #1A1A1A; | 27 | $dark-theme-black: convert-rgb-string-to-color($raw-dark-theme-black); |
26 | 28 | ||
27 | $dark-theme-gray-darkest: #1E1E1E; | 29 | $dark-theme-gray-darkest: convert-rgb-string-to-color($raw-dark-theme-gray-darkest); |
28 | $dark-theme-gray-darker: #2D2F31; | 30 | $dark-theme-gray-darker: convert-rgb-string-to-color($raw-dark-theme-gray-darker); |
29 | $dark-theme-gray-dark: #383A3B; | 31 | $dark-theme-gray-dark: convert-rgb-string-to-color($raw-dark-theme-gray-dark); |
30 | 32 | ||
31 | $dark-theme-gray: #47494B; | 33 | $dark-theme-gray: convert-rgb-string-to-color($raw-dark-theme-gray); |
32 | 34 | ||
33 | $dark-theme-gray-light: #515355; | 35 | $dark-theme-gray-light: convert-rgb-string-to-color($raw-dark-theme-gray-light); |
34 | $dark-theme-gray-lighter: #8a8b8b; | 36 | $dark-theme-gray-lighter: convert-rgb-string-to-color($raw-dark-theme-gray-lighter); |
35 | $dark-theme-gray-lightest: #FFF; | 37 | $dark-theme-gray-lightest: convert-rgb-string-to-color($raw-dark-theme-gray-lightest); |
36 | 38 | ||
37 | $dark-theme-gray-smoke: #CED0D1; | 39 | $dark-theme-gray-smoke: convert-rgb-string-to-color($raw-dark-theme-gray-smoke); |
38 | $dark-theme-text-color: #FFF; | 40 | $dark-theme-text-color: convert-rgb-string-to-color($raw-dark-theme-text-color); |
diff --git a/src/styles/type-helper.scss b/src/styles/type-helper.scss new file mode 100644 index 000000000..b1da394b5 --- /dev/null +++ b/src/styles/type-helper.scss | |||
@@ -0,0 +1,100 @@ | |||
1 | @function str-split($string, $separator) { | ||
2 | // empty array/list | ||
3 | $split-arr: (); | ||
4 | // first index of separator in string | ||
5 | $index : str-index($string, $separator); | ||
6 | // loop through string | ||
7 | @while $index != null { | ||
8 | // get the substring from the first character to the separator | ||
9 | $item: str-slice($string, 1, $index - 1); | ||
10 | // push item to array | ||
11 | $split-arr: append($split-arr, $item); | ||
12 | // remove item and separator from string | ||
13 | $string: str-slice($string, $index + 1); | ||
14 | // find new index of separator | ||
15 | $index : str-index($string, $separator); | ||
16 | } | ||
17 | // add the remaining string to list (the last item) | ||
18 | $split-arr: append($split-arr, $string); | ||
19 | |||
20 | @return $split-arr; | ||
21 | } | ||
22 | |||
23 | // ---- | ||
24 | // Sass (v3.4.13) | ||
25 | // Compass (v1.0.3) | ||
26 | // ---- | ||
27 | |||
28 | /// String to number converter | ||
29 | /// @author Hugo Giraudel | ||
30 | /// @access private | ||
31 | |||
32 | |||
33 | /// Casts a string into a number | ||
34 | /// | ||
35 | /// @param {String | Number} $value - Value to be parsed | ||
36 | /// | ||
37 | /// @return {Number} | ||
38 | |||
39 | @function to-number($value) { | ||
40 | @if type-of($value) == 'number' { | ||
41 | @return $value; | ||
42 | } @else if type-of($value) != 'string' { | ||
43 | $_: log('Value for `to-number` should be a number or a string.'); | ||
44 | } | ||
45 | |||
46 | $result: 0; | ||
47 | $digits: 0; | ||
48 | $minus: str-slice($value, 1, 1) == '-'; | ||
49 | $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9); | ||
50 | |||
51 | @for $i from if($minus, 2, 1) through str-length($value) { | ||
52 | $character: str-slice($value, $i, $i); | ||
53 | |||
54 | @if not (index(map-keys($numbers), $character) or $character == '.') { | ||
55 | @return to-length(if($minus, -$result, $result), str-slice($value, $i)) | ||
56 | } | ||
57 | |||
58 | @if $character == '.' { | ||
59 | $digits: 1; | ||
60 | } @else if $digits == 0 { | ||
61 | $result: $result * 10 + map-get($numbers, $character); | ||
62 | } @else { | ||
63 | $digits: $digits * 10; | ||
64 | $result: $result + map-get($numbers, $character) / $digits; | ||
65 | } | ||
66 | } | ||
67 | |||
68 | @return if($minus, -$result, $result);; | ||
69 | } | ||
70 | |||
71 | |||
72 | /// Add `$unit` to `$value` | ||
73 | /// | ||
74 | /// @param {Number} $value - Value to add unit to | ||
75 | /// @param {String} $unit - String representation of the unit | ||
76 | /// | ||
77 | /// @return {Number} - `$value` expressed in `$unit` | ||
78 | @function to-length($value, $unit) { | ||
79 | $units: ('px': 1px, 'cm': 1cm, 'mm': 1mm, '%': 1%, 'ch': 1ch, 'pc': 1pc, 'in': 1in, 'em': 1em, 'rem': 1rem, 'pt': 1pt, 'ex': 1ex, 'vw': 1vw, 'vh': 1vh, 'vmin': 1vmin, 'vmax': 1vmax); | ||
80 | |||
81 | @if not index(map-keys($units), $unit) { | ||
82 | $_: log('Invalid unit `#{$unit}`.'); | ||
83 | } | ||
84 | |||
85 | @return $value * map-get($units, $unit); | ||
86 | } | ||
87 | |||
88 | |||
89 | |||
90 | /// converts injectes rgb strings to sass colors | ||
91 | @function convert-rgb-string-to-color($string) { | ||
92 | $values: str-split($string, ','); | ||
93 | $colorList: (); | ||
94 | @each $value in $values { | ||
95 | $colorList: append($colorList, to-number($value)); | ||
96 | } | ||
97 | |||
98 | $rgbaColor: rgb(nth($colorList, 1), nth($colorList, 2), nth($colorList, 3)); | ||
99 | @return $rgbaColor; | ||
100 | } \ No newline at end of file | ||