@appscode/design-system 1.0.43-alpha.13 → 1.0.43-alpha.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/plugins/theme.js +126 -128
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appscode/design-system",
3
- "version": "1.0.43-alpha.13",
3
+ "version": "1.0.43-alpha.14",
4
4
  "description": "A design system for Appscode websites and dashboards made using Bulma",
5
5
  "main": "main.scss",
6
6
  "scripts": {
package/plugins/theme.js CHANGED
@@ -1,140 +1,138 @@
1
- export default {
2
- HSLToHex(h, s, l) {
3
- s /= 100;
4
- l /= 100;
1
+ export function HSLToHex(h, s, l) {
2
+ s /= 100;
3
+ l /= 100;
5
4
 
6
- const c = (1 - Math.abs(2 * l - 1)) * s,
7
- x = c * (1 - Math.abs(((h / 60) % 2) - 1)),
8
- m = l - c / 2;
5
+ const c = (1 - Math.abs(2 * l - 1)) * s,
6
+ x = c * (1 - Math.abs(((h / 60) % 2) - 1)),
7
+ m = l - c / 2;
9
8
 
10
- let r = 0,
11
- g = 0,
12
- b = 0;
9
+ let r = 0,
10
+ g = 0,
11
+ b = 0;
13
12
 
14
- if (0 <= h && h < 60) {
15
- r = c;
16
- g = x;
17
- b = 0;
18
- } else if (60 <= h && h < 120) {
19
- r = x;
20
- g = c;
21
- b = 0;
22
- } else if (120 <= h && h < 180) {
23
- r = 0;
24
- g = c;
25
- b = x;
26
- } else if (180 <= h && h < 240) {
27
- r = 0;
28
- g = x;
29
- b = c;
30
- } else if (240 <= h && h < 300) {
31
- r = x;
32
- g = 0;
33
- b = c;
34
- } else if (300 <= h && h < 360) {
35
- r = c;
36
- g = 0;
37
- b = x;
38
- }
39
- // Having obtained RGB, convert channels to hex
40
- r = Math.round((r + m) * 255).toString(16);
41
- g = Math.round((g + m) * 255).toString(16);
42
- b = Math.round((b + m) * 255).toString(16);
13
+ if (0 <= h && h < 60) {
14
+ r = c;
15
+ g = x;
16
+ b = 0;
17
+ } else if (60 <= h && h < 120) {
18
+ r = x;
19
+ g = c;
20
+ b = 0;
21
+ } else if (120 <= h && h < 180) {
22
+ r = 0;
23
+ g = c;
24
+ b = x;
25
+ } else if (180 <= h && h < 240) {
26
+ r = 0;
27
+ g = x;
28
+ b = c;
29
+ } else if (240 <= h && h < 300) {
30
+ r = x;
31
+ g = 0;
32
+ b = c;
33
+ } else if (300 <= h && h < 360) {
34
+ r = c;
35
+ g = 0;
36
+ b = x;
37
+ }
38
+ // Having obtained RGB, convert channels to hex
39
+ r = Math.round((r + m) * 255).toString(16);
40
+ g = Math.round((g + m) * 255).toString(16);
41
+ b = Math.round((b + m) * 255).toString(16);
43
42
 
44
- // Prepend 0s, if necessary
45
- if (r.length == 1) r = "0" + r;
46
- if (g.length == 1) g = "0" + g;
47
- if (b.length == 1) b = "0" + b;
43
+ // Prepend 0s, if necessary
44
+ if (r.length == 1) r = "0" + r;
45
+ if (g.length == 1) g = "0" + g;
46
+ if (b.length == 1) b = "0" + b;
48
47
 
49
- return "#" + r + g + b;
50
- },
51
- HexToHSL(H) {
52
- // Convert hex to RGB first
53
- let r = 0,
54
- g = 0,
55
- b = 0;
56
- if (H.length == 4) {
57
- r = parseInt("0x" + H[1] + H[1]);
58
- g = parseInt("0x" + H[2] + H[2]);
59
- b = parseInt("0x" + H[3] + H[3]);
60
- } else if (H.length == 7) {
61
- r = parseInt("0x" + H[1] + H[2]);
62
- g = parseInt("0x" + H[3] + H[4]);
63
- b = parseInt("0x" + H[5] + H[6]);
64
- }
65
- // Then to HSL
66
- r /= 255;
67
- g /= 255;
68
- b /= 255;
69
- const cmin = Math.min(r, g, b),
70
- cmax = Math.max(r, g, b),
71
- delta = cmax - cmin;
72
- let h = 0,
73
- s = 0,
74
- l = 0;
48
+ return "#" + r + g + b;
49
+ }
50
+ export function HexToHSL(H) {
51
+ // Convert hex to RGB first
52
+ let r = 0,
53
+ g = 0,
54
+ b = 0;
55
+ if (H.length == 4) {
56
+ r = parseInt("0x" + H[1] + H[1]);
57
+ g = parseInt("0x" + H[2] + H[2]);
58
+ b = parseInt("0x" + H[3] + H[3]);
59
+ } else if (H.length == 7) {
60
+ r = parseInt("0x" + H[1] + H[2]);
61
+ g = parseInt("0x" + H[3] + H[4]);
62
+ b = parseInt("0x" + H[5] + H[6]);
63
+ }
64
+ // Then to HSL
65
+ r /= 255;
66
+ g /= 255;
67
+ b /= 255;
68
+ const cmin = Math.min(r, g, b),
69
+ cmax = Math.max(r, g, b),
70
+ delta = cmax - cmin;
71
+ let h = 0,
72
+ s = 0,
73
+ l = 0;
75
74
 
76
- if (delta == 0) h = 0;
77
- else if (cmax == r) h = ((g - b) / delta) % 6;
78
- else if (cmax == g) h = (b - r) / delta + 2;
79
- else h = (r - g) / delta + 4;
75
+ if (delta == 0) h = 0;
76
+ else if (cmax == r) h = ((g - b) / delta) % 6;
77
+ else if (cmax == g) h = (b - r) / delta + 2;
78
+ else h = (r - g) / delta + 4;
80
79
 
81
- h = Math.round(h * 60);
80
+ h = Math.round(h * 60);
82
81
 
83
- if (h < 0) h += 360;
82
+ if (h < 0) h += 360;
84
83
 
85
- l = (cmax + cmin) / 2;
86
- s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
87
- s = +(s * 100).toFixed(1);
88
- l = +(l * 100).toFixed(1);
84
+ l = (cmax + cmin) / 2;
85
+ s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
86
+ s = +(s * 100).toFixed(1);
87
+ l = +(l * 100).toFixed(1);
89
88
 
90
- return {
91
- hue: `${h}`,
92
- saturation: `${s}%`,
93
- lightness: `${l}%`,
94
- };
95
- },
96
- getThemeHSL() {
97
- const hue = getComputedStyle(document.documentElement).getPropertyValue(
98
- "--hsl-hue"
99
- );
100
- const saturation = getComputedStyle(
101
- document.documentElement
102
- ).getPropertyValue("--hsl-saturation");
103
- const lightness = getComputedStyle(
104
- document.documentElement
105
- ).getPropertyValue("--hsl-lightness");
89
+ return {
90
+ hue: `${h}`,
91
+ saturation: `${s}%`,
92
+ lightness: `${l}%`,
93
+ };
94
+ }
95
+ export function getThemeHSL() {
96
+ const hue = getComputedStyle(document.documentElement).getPropertyValue(
97
+ "--hsl-hue"
98
+ );
99
+ const saturation = getComputedStyle(
100
+ document.documentElement
101
+ ).getPropertyValue("--hsl-saturation");
102
+ const lightness = getComputedStyle(
103
+ document.documentElement
104
+ ).getPropertyValue("--hsl-lightness");
106
105
 
107
- return {
108
- hue,
109
- saturation,
110
- lightness,
111
- };
112
- },
113
- setThemeHSL(h, s, l) {
114
- document.documentElement.style.setProperty("--hsl-hue", h);
115
- document.documentElement.style.setProperty("--hsl-saturation", s);
116
- document.documentElement.style.setProperty("--hsl-lightness", l);
117
- },
118
- setFontHSL(h, s, l) {
119
- document.documentElement.style.setProperty("--font-hsl-hue", h);
120
- document.documentElement.style.setProperty("--font-hsl-saturation", s);
121
- document.documentElement.style.setProperty("--font-hsl-lightness", l);
122
- },
123
- getFontHSL() {
124
- const hue = getComputedStyle(document.documentElement).getPropertyValue(
125
- "--font-hsl-hue"
126
- );
127
- const saturation = getComputedStyle(
128
- document.documentElement
129
- ).getPropertyValue("--font-hsl-saturation");
130
- const lightness = getComputedStyle(
131
- document.documentElement
132
- ).getPropertyValue("--font-hsl-lightness");
106
+ return {
107
+ hue,
108
+ saturation,
109
+ lightness,
110
+ };
111
+ }
112
+ export function setThemeHSL(h, s, l) {
113
+ document.documentElement.style.setProperty("--hsl-hue", h);
114
+ document.documentElement.style.setProperty("--hsl-saturation", s);
115
+ document.documentElement.style.setProperty("--hsl-lightness", l);
116
+ }
117
+ export function setFontHSL(h, s, l) {
118
+ document.documentElement.style.setProperty("--font-hsl-hue", h);
119
+ document.documentElement.style.setProperty("--font-hsl-saturation", s);
120
+ document.documentElement.style.setProperty("--font-hsl-lightness", l);
121
+ }
122
+ export function getFontHSL() {
123
+ const hue = getComputedStyle(document.documentElement).getPropertyValue(
124
+ "--font-hsl-hue"
125
+ );
126
+ const saturation = getComputedStyle(
127
+ document.documentElement
128
+ ).getPropertyValue("--font-hsl-saturation");
129
+ const lightness = getComputedStyle(
130
+ document.documentElement
131
+ ).getPropertyValue("--font-hsl-lightness");
133
132
 
134
- return {
135
- hue,
136
- saturation,
137
- lightness,
138
- };
139
- },
140
- };
133
+ return {
134
+ hue,
135
+ saturation,
136
+ lightness,
137
+ };
138
+ }