@sprinklrjs/spaceweb-themes 10.1.0

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 (41) hide show
  1. package/common-theme/theme.d.ts +343 -0
  2. package/common-theme/theme.js +309 -0
  3. package/common-theme/utilities.d.ts +5144 -0
  4. package/common-theme/utilities.js +1581 -0
  5. package/hyperspace/dark/index.d.ts +6304 -0
  6. package/hyperspace/dark/index.js +8 -0
  7. package/hyperspace/dark/theme.d.ts +798 -0
  8. package/hyperspace/dark/theme.js +297 -0
  9. package/hyperspace/dark/utilities.d.ts +5505 -0
  10. package/hyperspace/dark/utilities.js +137 -0
  11. package/hyperspace/light/index.d.ts +6304 -0
  12. package/hyperspace/light/index.js +8 -0
  13. package/hyperspace/light/theme.d.ts +798 -0
  14. package/hyperspace/light/theme.js +297 -0
  15. package/hyperspace/light/utilities.d.ts +5505 -0
  16. package/hyperspace/light/utilities.js +137 -0
  17. package/hyperspace/themeVars.css +253 -0
  18. package/hyperspace/themeVars.min.css +1 -0
  19. package/package.json +27 -0
  20. package/space/dark/index.d.ts +6283 -0
  21. package/space/dark/index.js +8 -0
  22. package/space/dark/theme.d.ts +780 -0
  23. package/space/dark/theme.js +275 -0
  24. package/space/dark/utilities.d.ts +5502 -0
  25. package/space/dark/utilities.js +134 -0
  26. package/space/light/index.d.ts +6283 -0
  27. package/space/light/index.js +8 -0
  28. package/space/light/theme.d.ts +780 -0
  29. package/space/light/theme.js +275 -0
  30. package/space/light/utilities.d.ts +5502 -0
  31. package/space/light/utilities.js +134 -0
  32. package/space/themeVars.css +251 -0
  33. package/space/themeVars.min.css +1 -0
  34. package/styles/globals.css +80 -0
  35. package/styles/globals.min.css +1 -0
  36. package/styles/normalize.css +362 -0
  37. package/styles/normalize.min.css +1 -0
  38. package/types.d.ts +66 -0
  39. package/types.js +2 -0
  40. package/utilities.css +239 -0
  41. package/utilities.min.css +1 -0
package/space/light/utilities.js ADDED
@@ -0,0 +1,134 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ exports.__esModule = true;
14
+ // THIS FILES IS GENERATED USING SCRIPT, DO NOT EDIT DIRECTLY
15
+ var utilities_1 = require("../../common-theme/utilities");
16
+ var _a = utilities_1["default"].longhandUtils, borderRadius = _a.borderRadius, borderWidth = _a.borderWidth, margin = _a.margin, padding = _a.padding;
17
+ var utilities = {
18
+ 'typography-h1': { fontSize: '3.2rem', lineHeight: '4rem', fontWeight: '600' },
19
+ 'typography-h2': { fontSize: '2.4rem', lineHeight: '3.2rem', fontWeight: '600' },
20
+ 'typography-h3': { fontSize: '2rem', lineHeight: '2.8rem', fontWeight: '600' },
21
+ 'typography-h4': { fontSize: '1.8rem', lineHeight: '2.4rem', fontWeight: '600' },
22
+ 'typography-h5': { fontSize: '1.6rem', lineHeight: '2.2rem', fontWeight: '600' },
23
+ 'typography-h6': { fontSize: '1.4rem', lineHeight: '2rem', fontWeight: '600' },
24
+ 'typography-h7': { fontSize: '1.3rem', lineHeight: '2.2rem', fontWeight: '600' },
25
+ 'typography-b1': { fontSize: '1.3rem', lineHeight: '1.8rem', fontWeight: '600' },
26
+ 'typography-b2': { fontSize: '1.2rem', lineHeight: '1.6rem', fontWeight: '600' },
27
+ 'typography-bl1': { fontSize: '1.4rem', lineHeight: '2.2rem', fontWeight: '400' },
28
+ 'typography-bl2': { fontSize: '1.3rem', lineHeight: '2rem', fontWeight: '400' },
29
+ 'typography-bl3': { fontSize: '1.2rem', lineHeight: '2rem', fontWeight: '400' },
30
+ 'typography-bs1': { fontSize: '1.4rem', lineHeight: '2rem', fontWeight: '400' },
31
+ 'typography-bs2': { fontSize: '1.3rem', lineHeight: '2rem', fontWeight: '400' },
32
+ 'typography-bs3': { fontSize: '1.2rem', lineHeight: '2rem', fontWeight: '400' },
33
+ 'typography-l1': { fontSize: '1.3rem', lineHeight: '1.8rem', fontWeight: '400' },
34
+ 'typography-l2': { fontSize: '1.2rem', lineHeight: '1.6rem', fontWeight: '400' },
35
+ 'typography-l3': { fontSize: '1.1rem', lineHeight: '1.6rem', fontWeight: '400' },
36
+ 'typography-l4': { fontSize: '1rem', lineHeight: '1.4rem', fontWeight: '400' },
37
+ 'spr-ui-01': { backgroundColor: 'var(--spr-ui-01, #FFFFFF)' },
38
+ 'spr-ui-02': { backgroundColor: 'var(--spr-ui-02, #F8F8FA)' },
39
+ 'spr-ui-03': { backgroundColor: 'var(--spr-ui-03, #F2F2F4)' },
40
+ 'spr-ui-04': { backgroundColor: 'var(--spr-ui-04, #0828CC)' },
41
+ 'spr-ui-05': { backgroundColor: 'var(--spr-ui-05, #F2F2F4)' },
42
+ 'spr-ui-06': { backgroundColor: 'var(--spr-ui-06, #E6E6E9)' },
43
+ 'spr-ui-focus': { backgroundColor: 'var(--spr-ui-focus, rgba(8, 40, 204, 0.07))' },
44
+ 'spr-ui-focus-reverse': { backgroundColor: 'var(--spr-ui-focus-reverse, rgba(255, 255, 255, 0.2))' },
45
+ 'spr-ui-hover': { backgroundColor: 'var(--spr-ui-hover, rgba(8, 40, 204, 0.05))' },
46
+ 'spr-ui-hover-reverse': { backgroundColor: 'var(--spr-ui-hover-reverse, rgba(255, 255, 255, 0.1))' },
47
+ 'spr-support-error': { backgroundColor: 'var(--spr-support-error, #E44045)' },
48
+ 'spr-support-error-highlight': { backgroundColor: 'var(--spr-support-error-highlight, rgba(255, 96, 96, 0.1))' },
49
+ 'spr-support-success': { backgroundColor: 'var(--spr-support-success, #3fbf41)' },
50
+ 'spr-support-success-highlight': { backgroundColor: 'var(--spr-support-success-highlight, rgba(63, 191, 65, 0.07))' },
51
+ 'spr-support-warning': { backgroundColor: 'var(--spr-support-warning, #EEC202)' },
52
+ 'spr-support-warning-highlight': { backgroundColor: 'var(--spr-support-warning-highlight, rgba(238, 194, 2, 0.1))' },
53
+ 'spr-clr-blue-highlight': { backgroundColor: 'var(--spr-clr-blue-highlight, #E8F0FE)' },
54
+ 'spr-tag': { backgroundColor: 'var(--spr-tag, #F2F2F4)' },
55
+ 'spr-tag-01': { backgroundColor: 'var(--spr-tag-01, #F2F2F4)' },
56
+ 'spr-tag-02': { backgroundColor: 'var(--spr-tag-02, rgba(8, 40, 204, 0.07))' },
57
+ 'spr-field': { backgroundColor: 'var(--spr-field, #DBDBDB)' },
58
+ 'spr-popup': { backgroundColor: 'var(--spr-popup, #FFFFFF)' },
59
+ 'spr-overlay': { backgroundColor: 'var(--spr-overlay, rgba(10, 10, 20, 0.9))' },
60
+ 'spr-tooltip-01': { backgroundColor: 'var(--spr-tooltip-01, #0A0A14)' },
61
+ 'spr-highlight': { backgroundColor: 'var(--spr-highlight, rgba(255, 231, 173, 0.7))' },
62
+ 'spr-favourite': { backgroundColor: 'var(--spr-favourite, #FF9F21)' },
63
+ 'spr-notification': { backgroundColor: 'var(--spr-notification, #C6202B)' },
64
+ 'spr-interactive-01': { backgroundColor: 'var(--spr-interactive-01, #0828CC)' },
65
+ 'spr-interactive-hover': { backgroundColor: 'var(--spr-interactive-hover, #0729a0)' },
66
+ 'spr-interactive-disable': { backgroundColor: 'var(--spr-interactive-disable, rgba(255, 255, 255, 0.8))' },
67
+ 'spr-interactive-02': { backgroundColor: 'var(--spr-interactive-02, #646470)' },
68
+ 'spr-clr-blue': { backgroundColor: 'var(--spr-clr-blue, #0AA2FF)' },
69
+ 'spr-clr-green': { backgroundColor: 'var(--spr-clr-green, #20963a)' },
70
+ 'spr-clr-lavender': { backgroundColor: 'var(--spr-clr-lavender, #7F36F6)' },
71
+ 'spr-clr-orange': { backgroundColor: 'var(--spr-clr-orange, #F08C1A)' },
72
+ 'spr-clr-pink': { backgroundColor: 'var(--spr-clr-pink, #DE456B)' },
73
+ 'spr-clr-red': { backgroundColor: 'var(--spr-clr-red, #E44045)' },
74
+ 'spr-clr-sea': { backgroundColor: 'var(--spr-clr-sea, #16AAD2)' },
75
+ 'spr-clr-teal': { backgroundColor: 'var(--spr-clr-teal, #13C18D)' },
76
+ 'spr-clr-yellow': { backgroundColor: 'var(--spr-clr-yellow, #DEAC09)' },
77
+ 'spr-clr-grey': { backgroundColor: 'var(--spr-clr-grey, #D7D7DC)' },
78
+ 'spr-clr-purple': { backgroundColor: 'var(--spr-clr-purple, #8C43FF)' },
79
+ 'spr-clr-lt-yellow': { backgroundColor: 'var(--spr-clr-lt-yellow, #FFD04F)' },
80
+ 'spr-clr-darker-blue': { backgroundColor: 'var(--spr-clr-darker-blue, #327AFD)' },
81
+ 'spr-secondary-yellow': { backgroundColor: 'var(--spr-secondary-yellow, #FFC312)' },
82
+ 'spr-secondary-green': { backgroundColor: 'var(--spr-secondary-green, #A3CB38)' },
83
+ 'spr-secondary-teal': { backgroundColor: 'var(--spr-secondary-teal, #12CBC4)' },
84
+ 'spr-secondary-lt-pink': { backgroundColor: 'var(--spr-secondary-lt-pink, #FDA7DF)' },
85
+ 'spr-secondary-pink': { backgroundColor: 'var(--spr-secondary-pink, #ED4C67)' },
86
+ 'spr-secondary-maroon': { backgroundColor: 'var(--spr-secondary-maroon, #B53471)' },
87
+ 'spr-secondary-orange': { backgroundColor: 'var(--spr-secondary-orange, #F48749)' },
88
+ 'spr-hover': { borderColor: 'var(--spr-hover, #0828CC)' },
89
+ 'spr-focus-01': { borderColor: 'var(--spr-focus-01, #0828CC)' },
90
+ 'spr-border-01': { borderColor: 'var(--spr-border-01, #F2F2F4)' },
91
+ 'spr-border-02': { borderColor: 'var(--spr-border-02, #ECECEF)' },
92
+ 'spr-border-03': { borderColor: 'var(--spr-border-03, #D7D7DC)' },
93
+ 'spr-border-04': { borderColor: 'var(--spr-border-04, #A0A0A8)' },
94
+ 'spr-border-05': { borderColor: 'var(--spr-border-05, #FFFFFF)' },
95
+ 'spr-border-06': { borderColor: 'var(--spr-border-06, #0A0A14)' },
96
+ 'spr-card-border': { borderColor: 'var(--spr-card-border, #ECECEF)' },
97
+ 'spr-popup-border': { borderColor: 'var(--spr-popup-border, #D7D7DC)' },
98
+ 'spr-tooltip-border': { borderColor: 'var(--spr-tooltip-border, #0A0A14)' },
99
+ 'spr-interactive-focus': { borderColor: 'var(--spr-interactive-focus, #132a86)' },
100
+ 'spr-shadow-01': { boxShadow: 'var(--spr-shadow-01, 0 1px 4px 0 rgba(10,10,20,0.15))' },
101
+ 'spr-shadow-02': { boxShadow: 'var(--spr-shadow-02, 0 2px 8px 0 rgba(10,10,20,0.20))' },
102
+ 'spr-shadow-03': { boxShadow: 'var(--spr-shadow-03, -2px 9px 12px 0 rgba(10,10,20,0.60))' },
103
+ 'spr-shadow-04': { boxShadow: 'var(--spr-shadow-04, 0px -2px 8px 0px rgba(10,10,20,0.2))' },
104
+ 'spr-shadow-05': { boxShadow: 'var(--spr-shadow-05, 0px 3px 4px 0 rgba(0,0,0,0.1))' },
105
+ 'spr-shadow-06': { boxShadow: 'var(--spr-shadow-06, 0px -3px 4px 0 rgba(0,0,0,0.1))' },
106
+ 'spr-icon-01': { fill: 'var(--spr-icon-01, #0A0A14)' },
107
+ 'spr-icon-02': { fill: 'var(--spr-icon-02, #646470)' },
108
+ 'spr-icon-03': { fill: 'var(--spr-icon-03, #646470)' },
109
+ 'spr-icon-04': { fill: 'var(--spr-icon-04, #0828CC)' },
110
+ 'spr-icon-05': { fill: 'var(--spr-icon-05, #FFFFFF)' },
111
+ 'spr-icon-06': { fill: 'var(--spr-icon-06, rgba(255, 255, 255, 0.6))' },
112
+ 'spr-icon-hover': { fill: 'var(--spr-icon-hover, #0A0A14)' },
113
+ 'spr-icon-disable': { fill: 'var(--spr-icon-disable, #D7D7DC)' },
114
+ 'spr-icon-hover-reverse': { fill: 'var(--spr-icon-hover-reverse, #FFFFFF)' },
115
+ 'spr-icon-error': { fill: 'var(--spr-icon-error, #FF6060)' },
116
+ 'spr-link': { color: 'var(--spr-link, #0828CC)' },
117
+ 'spr-text-01': { color: 'var(--spr-text-01, #0A0A14)' },
118
+ 'spr-text-02': { color: 'var(--spr-text-02, #646470)' },
119
+ 'spr-text-03': { color: 'var(--spr-text-03, #646470)' },
120
+ 'spr-text-04': { color: 'var(--spr-text-04, #0828CC)' },
121
+ 'spr-text-05': { color: 'var(--spr-text-05, #FFFFFF)' },
122
+ 'spr-text-06': { color: 'var(--spr-text-06, #FFFFFF)' },
123
+ 'spr-text-placeholder': { color: 'var(--spr-text-placeholder, #646470)' },
124
+ 'spr-support-error-text': { color: 'var(--spr-support-error-text, #C6202B)' },
125
+ 'spr-support-success-text': { color: 'var(--spr-support-success-text, #20963a)' },
126
+ 'spr-support-warning-text': { color: 'var(--spr-support-warning-text, #DEAC09)' },
127
+ 'nav-ui-01': { backgroundColor: 'var(--nav-ui-01, rgba(255, 255, 255, 0.2))' },
128
+ 'nav-ui-hover-01': { backgroundColor: 'var(--nav-ui-hover-01, rgba(255, 255, 255, 0.3))' },
129
+ 'nav-icon-01': { fill: 'var(--nav-icon-01, rgba(255, 255, 255, 0.9))' },
130
+ 'nav-icon-focus-01': { fill: 'var(--nav-icon-focus-01, #327AFD)' },
131
+ 'nav-text-01': { color: 'var(--nav-text-01, rgba(255, 255, 255, 0.9))' },
132
+ 'outline-01': { outlineStyle: 'solid', outlineWidth: '2px', outlineColor: '#0828CC', outlineOffset: '2px' }
133
+ };
134
+ exports["default"] = __assign(__assign({}, utilities_1["default"].utilities), utilities);
package/space/themeVars.css ADDED
@@ -0,0 +1,251 @@
1
+ /**
2
+ * SPACEWEB-GENERATED-CSS-FILE
3
+ * DO NOT EDIT THIS FILE DIRECTLY, CHECK spaceweb-themes/scripts/buildTheme/buildThemeVariables
4
+ */
5
+
6
+ .space-light {
7
+ color-scheme: light;
8
+ --spr-ui-01: #ffffff;
9
+ --spr-ui-02: #f8f8fa;
10
+ --spr-ui-03: #f2f2f4;
11
+ --spr-ui-04: #0828cc;
12
+ --spr-ui-05: #f2f2f4;
13
+ --spr-ui-06: #e6e6e9;
14
+ --spr-ui-focus: rgba(8, 40, 204, 0.07);
15
+ --spr-ui-focus-reverse: rgba(255, 255, 255, 0.2);
16
+ --spr-ui-hover: rgba(8, 40, 204, 0.05);
17
+ --spr-ui-hover-reverse: rgba(255, 255, 255, 0.1);
18
+ --spr-support-error: #e44045;
19
+ --spr-support-error-highlight: rgba(255, 96, 96, 0.1);
20
+ --spr-support-success: #3fbf41;
21
+ --spr-support-success-highlight: rgba(63, 191, 65, 0.07);
22
+ --spr-support-warning: #eec202;
23
+ --spr-support-warning-highlight: rgba(238, 194, 2, 0.1);
24
+ --spr-clr-blue-highlight: #e8f0fe;
25
+ --spr-tag: #f2f2f4;
26
+ --spr-tag-01: #f2f2f4;
27
+ --spr-tag-02: rgba(8, 40, 204, 0.07);
28
+ --spr-field: #dbdbdb;
29
+ --spr-popup: #ffffff;
30
+ --spr-overlay: rgba(10, 10, 20, 0.9);
31
+ --spr-tooltip-01: #0a0a14;
32
+ --spr-highlight: rgba(255, 231, 173, 0.7);
33
+ --spr-favourite: #ff9f21;
34
+ --spr-notification: #c6202b;
35
+ --spr-interactive-01: #0828cc;
36
+ --spr-interactive-hover: #0729a0;
37
+ --spr-interactive-disable: rgba(255, 255, 255, 0.8);
38
+ --spr-interactive-02: #646470;
39
+ --spr-clr-blue: #0aa2ff;
40
+ --spr-clr-green: #20963a;
41
+ --spr-clr-lavender: #7f36f6;
42
+ --spr-clr-orange: #f08c1a;
43
+ --spr-clr-pink: #de456b;
44
+ --spr-clr-red: #e44045;
45
+ --spr-clr-sea: #16aad2;
46
+ --spr-clr-teal: #13c18d;
47
+ --spr-clr-yellow: #deac09;
48
+ --spr-clr-grey: #d7d7dc;
49
+ --spr-clr-purple: #8c43ff;
50
+ --spr-clr-lt-yellow: #ffd04f;
51
+ --spr-clr-darker-blue: #327afd;
52
+ --spr-secondary-yellow: #ffc312;
53
+ --spr-secondary-green: #a3cb38;
54
+ --spr-secondary-teal: #12cbc4;
55
+ --spr-secondary-lt-pink: #fda7df;
56
+ --spr-secondary-pink: #ed4c67;
57
+ --spr-secondary-maroon: #b53471;
58
+ --spr-secondary-orange: #f48749;
59
+ --spr-hover: #0828cc;
60
+ --spr-focus-01: #0828cc;
61
+ --spr-border-01: #f2f2f4;
62
+ --spr-border-02: #ececef;
63
+ --spr-border-03: #d7d7dc;
64
+ --spr-border-04: #a0a0a8;
65
+ --spr-border-05: #ffffff;
66
+ --spr-border-06: #0a0a14;
67
+ --spr-card-border: #ececef;
68
+ --spr-popup-border: #d7d7dc;
69
+ --spr-tooltip-border: #0a0a14;
70
+ --spr-interactive-focus: #132a86;
71
+ --spr-shadow-01: 0 1px 4px 0 rgba(10, 10, 20, 0.15);
72
+ --spr-shadow-02: 0 2px 8px 0 rgba(10, 10, 20, 0.2);
73
+ --spr-shadow-03: -2px 9px 12px 0 rgba(10, 10, 20, 0.6);
74
+ --spr-shadow-04: 0px -2px 8px 0px rgba(10, 10, 20, 0.2);
75
+ --spr-shadow-05: 0px 3px 4px 0 rgba(0, 0, 0, 0.1);
76
+ --spr-shadow-06: 0px -3px 4px 0 rgba(0, 0, 0, 0.1);
77
+ --spr-icon-01: #0a0a14;
78
+ --spr-icon-02: #646470;
79
+ --spr-icon-03: #646470;
80
+ --spr-icon-04: #0828cc;
81
+ --spr-icon-05: #ffffff;
82
+ --spr-icon-06: rgba(255, 255, 255, 0.6);
83
+ --spr-icon-hover: #0a0a14;
84
+ --spr-icon-disable: #d7d7dc;
85
+ --spr-icon-hover-reverse: #ffffff;
86
+ --spr-icon-error: #ff6060;
87
+ --spr-link: #0828cc;
88
+ --spr-text-01: #0a0a14;
89
+ --spr-text-02: #646470;
90
+ --spr-text-03: #646470;
91
+ --spr-text-04: #0828cc;
92
+ --spr-text-05: #ffffff;
93
+ --spr-text-06: #ffffff;
94
+ --spr-text-placeholder: #646470;
95
+ --spr-support-error-text: #c6202b;
96
+ --spr-support-success-text: #20963a;
97
+ --spr-support-warning-text: #deac09;
98
+ --app-header: #0a0a14;
99
+ --app-header-tab: rgba(255, 255, 255, 0.1);
100
+ --app-header-tab-hover: rgba(255, 255, 255, 0.2);
101
+ --app-header-tab-active: #ffffff;
102
+ --app-header-text: rgba(255, 255, 255, 0.6);
103
+ --app-header-text-hover: #ffffff;
104
+ --cht-bg: #f3eae1;
105
+ --cht-border: #e6d4ca;
106
+ --cht-bubble-left: #ffffff;
107
+ --cht-bubble-right: #ebebff;
108
+ --cht-bubble-supporting-text: #646470;
109
+ --cht-bubble-text-left: #0a0a14;
110
+ --cht-bubble-text-right: #0a0a14;
111
+ --cht-bubble-border: #c7d3f7;
112
+ --cht-bubble-icon-1: #646470;
113
+ --cht-bubble-icon-2: #d7d7dc;
114
+ --cht-bubble-icon-3: #0828cc;
115
+ --cht-bubble-insert: #f8f8fa;
116
+ --cht-bubble-link: #0828cc;
117
+ --cht-bubble-text: #646470;
118
+ --cht-reply: #ffffff;
119
+ --cht-footer: #f3eae1;
120
+ --cht-hover: rgba(100, 100, 112, 0.07);
121
+ --cht-read: #006cd7;
122
+ --cht-unread: #a0a0a8;
123
+ --nav-ui-01: rgba(255, 255, 255, 0.2);
124
+ --nav-ui-hover-01: rgba(255, 255, 255, 0.3);
125
+ --nav-icon-01: rgba(255, 255, 255, 0.9);
126
+ --nav-icon-focus-01: #327afd;
127
+ --nav-text-01: rgba(255, 255, 255, 0.9);
128
+ }
129
+ .space-dark {
130
+ color-scheme: dark;
131
+ --spr-ui-01: #2c2c2f;
132
+ --spr-ui-02: #3a3a3e;
133
+ --spr-ui-03: #141416;
134
+ --spr-ui-04: #0aa2ff;
135
+ --spr-ui-05: #48484c;
136
+ --spr-ui-06: #212123;
137
+ --spr-ui-focus: rgba(255, 255, 255, 0.12);
138
+ --spr-ui-focus-reverse: rgba(255, 255, 255, 0.2);
139
+ --spr-ui-hover: rgba(255, 255, 255, 0.07);
140
+ --spr-ui-hover-reverse: rgba(255, 255, 255, 0.1);
141
+ --spr-support-error: #c6202b;
142
+ --spr-support-error-highlight: rgba(228, 64, 69, 0.15);
143
+ --spr-support-success: #20963a;
144
+ --spr-support-success-highlight: rgba(32, 150, 58, 0.15);
145
+ --spr-support-warning: #deac09;
146
+ --spr-support-warning-highlight: rgba(222, 172, 9, 0.12);
147
+ --spr-clr-blue-highlight: #2b3343;
148
+ --spr-tag: #48484c;
149
+ --spr-tag-01: #48484c;
150
+ --spr-tag-02: rgba(255, 255, 255, 0.1);
151
+ --spr-field: #48484c;
152
+ --spr-popup: #2c2c2f;
153
+ --spr-overlay: rgba(28, 28, 31, 0.8);
154
+ --spr-tooltip-01: rgba(255, 255, 255, 0.9);
155
+ --spr-highlight: rgba(184, 144, 0, 0.6);
156
+ --spr-favourite: #ff9f21;
157
+ --spr-notification: #c6202b;
158
+ --spr-interactive-01: #0aa2ff;
159
+ --spr-interactive-hover: #0a83d0;
160
+ --spr-interactive-disable: rgba(44, 44, 47, 0.6);
161
+ --spr-interactive-02: #aeaeb2;
162
+ --spr-clr-blue: #006cd7;
163
+ --spr-clr-green: #3fbf41;
164
+ --spr-clr-lavender: #9c60ff;
165
+ --spr-clr-orange: #ff9f21;
166
+ --spr-clr-pink: #ff668f;
167
+ --spr-clr-red: #ff6060;
168
+ --spr-clr-sea: #00c8ff;
169
+ --spr-clr-teal: #02d999;
170
+ --spr-clr-yellow: #eec202;
171
+ --spr-clr-grey: #646469;
172
+ --spr-clr-purple: #763bd2;
173
+ --spr-clr-lt-yellow: #846f35;
174
+ --spr-clr-darker-blue: #327afd;
175
+ --spr-secondary-yellow: #8d6f18;
176
+ --spr-secondary-green: #5f732c;
177
+ --spr-secondary-teal: #168380;
178
+ --spr-secondary-lt-pink: #956787;
179
+ --spr-secondary-pink: #b94055;
180
+ --spr-secondary-maroon: #962f61;
181
+ --spr-secondary-orange: #a8623a;
182
+ --spr-hover: #0aa2ff;
183
+ --spr-focus-01: #0aa2ff;
184
+ --spr-border-01: #3a3a3e;
185
+ --spr-border-02: #48484c;
186
+ --spr-border-03: #48484c;
187
+ --spr-border-04: #646469;
188
+ --spr-border-05: #2c2c2f;
189
+ --spr-border-06: #f1f1f1;
190
+ --spr-card-border: #3a3a3e;
191
+ --spr-popup-border: #1c1c1f;
192
+ --spr-tooltip-border: rgba(174, 174, 178, 0.2);
193
+ --spr-interactive-focus: #0a65a1;
194
+ --spr-shadow-01: 0 1px 4px 0 rgba(10, 10, 20, 0.3);
195
+ --spr-shadow-02: 0 4px 10px 0 rgb(20, 20, 22);
196
+ --spr-shadow-03: -2px 5px 12px 0 rgba(10, 10, 20, 0.8);
197
+ --spr-shadow-04: 0 -4px 10px 0px rgb(20, 20, 22);
198
+ --spr-shadow-05: 0px 3px 4px 0 rgba(0, 0, 0, 0.2);
199
+ --spr-shadow-06: 0px -3px 4px 0 rgba(0, 0, 0, 0.2);
200
+ --spr-icon-01: #ffffff;
201
+ --spr-icon-02: #aeaeb2;
202
+ --spr-icon-03: #aeaeb2;
203
+ --spr-icon-04: #0aa2ff;
204
+ --spr-icon-05: #ffffff;
205
+ --spr-icon-06: rgba(255, 255, 255, 0.6);
206
+ --spr-icon-error: #ff6060;
207
+ --spr-icon-hover: #ffffff;
208
+ --spr-icon-disable: #646469;
209
+ --spr-icon-hover-reverse: #ffffff;
210
+ --spr-link: #0aa2ff;
211
+ --spr-text-01: #ffffff;
212
+ --spr-text-02: #aeaeb2;
213
+ --spr-text-03: #646469;
214
+ --spr-text-04: #0aa2ff;
215
+ --spr-text-05: #ffffff;
216
+ --spr-text-06: #2c2c2f;
217
+ --spr-text-placeholder: #646469;
218
+ --spr-support-error-text: #e44045;
219
+ --spr-support-success-text: #3fbf41;
220
+ --spr-support-warning-text: #eec202;
221
+ --app-header: #000;
222
+ --app-header-tab: rgba(44, 44, 47, 0.6);
223
+ --app-header-tab-hover: rgba(44, 44, 47, 0.8);
224
+ --app-header-tab-active: #2c2c2f;
225
+ --app-header-text: rgba(255, 255, 255, 0.6);
226
+ --app-header-text-hover: #ffffff;
227
+ --cht-bg: #141416;
228
+ --cht-border: #2c2c2f;
229
+ --cht-bubble-left: #f8f8fa;
230
+ --cht-bubble-right: #006cd7;
231
+ --cht-bubble-supporting-text: rgba(255, 255, 255, 0.7);
232
+ --cht-bubble-text-left: #0a0a14;
233
+ --cht-bubble-text-right: #ffffff;
234
+ --cht-bubble-border: #006cd7;
235
+ --cht-bubble-icon-1: rgba(255, 255, 255, 0.7);
236
+ --cht-bubble-icon-2: rgba(255, 255, 255, 0.3);
237
+ --cht-bubble-icon-3: #ffffff;
238
+ --cht-bubble-insert: rgba(0, 0, 0, 0.2);
239
+ --cht-bubble-link: #3df6bf;
240
+ --cht-bubble-text: rgba(255, 255, 255, 0.7);
241
+ --cht-reply: #141416;
242
+ --cht-footer: #2c2c2f;
243
+ --cht-hover: #1c1c1f;
244
+ --cht-read: #006cd7;
245
+ --cht-unread: #aeaeb2;
246
+ --nav-ui-01: rgba(44, 44, 47, 0.7);
247
+ --nav-ui-hover-01: rgba(44, 44, 47, 0.9);
248
+ --nav-icon-01: rgba(255, 255, 255, 0.6);
249
+ --nav-icon-focus-01: #2e6bd9;
250
+ --nav-text-01: rgba(255, 255, 255, 0.6);
251
+ }
package/space/themeVars.min.css ADDED
@@ -0,0 +1 @@
1
+ .space-light{color-scheme:light;--spr-ui-01:#FFFFFF;--spr-ui-02:#F8F8FA;--spr-ui-03:#F2F2F4;--spr-ui-04:#0828CC;--spr-ui-05:#F2F2F4;--spr-ui-06:#E6E6E9;--spr-ui-focus:rgba(8, 40, 204, 0.07);--spr-ui-focus-reverse:rgba(255, 255, 255, 0.2);--spr-ui-hover:rgba(8, 40, 204, 0.05);--spr-ui-hover-reverse:rgba(255, 255, 255, 0.1);--spr-support-error:#E44045;--spr-support-error-highlight:rgba(255, 96, 96, 0.1);--spr-support-success:#3fbf41;--spr-support-success-highlight:rgba(63, 191, 65, 0.07);--spr-support-warning:#EEC202;--spr-support-warning-highlight:rgba(238, 194, 2, 0.1);--spr-clr-blue-highlight:#E8F0FE;--spr-tag:#F2F2F4;--spr-tag-01:#F2F2F4;--spr-tag-02:rgba(8, 40, 204, 0.07);--spr-field:#DBDBDB;--spr-popup:#FFFFFF;--spr-overlay:rgba(10, 10, 20, 0.9);--spr-tooltip-01:#0A0A14;--spr-highlight:rgba(255, 231, 173, 0.7);--spr-favourite:#FF9F21;--spr-notification:#C6202B;--spr-interactive-01:#0828CC;--spr-interactive-hover:#0729a0;--spr-interactive-disable:rgba(255, 255, 255, 0.8);--spr-interactive-02:#646470;--spr-clr-blue:#0AA2FF;--spr-clr-green:#20963a;--spr-clr-lavender:#7F36F6;--spr-clr-orange:#F08C1A;--spr-clr-pink:#DE456B;--spr-clr-red:#E44045;--spr-clr-sea:#16AAD2;--spr-clr-teal:#13C18D;--spr-clr-yellow:#DEAC09;--spr-clr-grey:#D7D7DC;--spr-clr-purple:#8C43FF;--spr-clr-lt-yellow:#FFD04F;--spr-clr-darker-blue:#327AFD;--spr-secondary-yellow:#FFC312;--spr-secondary-green:#A3CB38;--spr-secondary-teal:#12CBC4;--spr-secondary-lt-pink:#FDA7DF;--spr-secondary-pink:#ED4C67;--spr-secondary-maroon:#B53471;--spr-secondary-orange:#F48749;--spr-hover:#0828CC;--spr-focus-01:#0828CC;--spr-border-01:#F2F2F4;--spr-border-02:#ECECEF;--spr-border-03:#D7D7DC;--spr-border-04:#A0A0A8;--spr-border-05:#FFFFFF;--spr-border-06:#0A0A14;--spr-card-border:#ECECEF;--spr-popup-border:#D7D7DC;--spr-tooltip-border:#0A0A14;--spr-interactive-focus:#132a86;--spr-shadow-01:0 1px 4px 0 rgba(10,10,20,0.15);--spr-shadow-02:0 2px 8px 0 rgba(10,10,20,0.20);--spr-shadow-03:-2px 9px 12px 0 rgba(10,10,20,0.60);--spr-shadow-04:0px -2px 8px 0px rgba(10,10,20,0.2);--spr-shadow-05:0px 3px 4px 0 rgba(0,0,0,0.1);--spr-shadow-06:0px -3px 4px 0 rgba(0,0,0,0.1);--spr-icon-01:#0A0A14;--spr-icon-02:#646470;--spr-icon-03:#646470;--spr-icon-04:#0828CC;--spr-icon-05:#FFFFFF;--spr-icon-06:rgba(255, 255, 255, 0.6);--spr-icon-hover:#0A0A14;--spr-icon-disable:#D7D7DC;--spr-icon-hover-reverse:#FFFFFF;--spr-icon-error:#FF6060;--spr-link:#0828CC;--spr-text-01:#0A0A14;--spr-text-02:#646470;--spr-text-03:#646470;--spr-text-04:#0828CC;--spr-text-05:#FFFFFF;--spr-text-06:#FFFFFF;--spr-text-placeholder:#646470;--spr-support-error-text:#C6202B;--spr-support-success-text:#20963a;--spr-support-warning-text:#DEAC09;--app-header:#0A0A14;--app-header-tab:rgba(255, 255, 255, 0.1);--app-header-tab-hover:rgba(255, 255, 255, 0.2);--app-header-tab-active:#FFFFFF;--app-header-text:rgba(255, 255, 255, 0.6);--app-header-text-hover:#FFFFFF;--cht-bg:#F3EAE1;--cht-border:#E6D4CA;--cht-bubble-left:#FFFFFF;--cht-bubble-right:#EBEBFF;--cht-bubble-supporting-text:#646470;--cht-bubble-text-left:#0A0A14;--cht-bubble-text-right:#0A0A14;--cht-bubble-border:#C7D3F7;--cht-bubble-icon-1:#646470;--cht-bubble-icon-2:#D7D7DC;--cht-bubble-icon-3:#0828CC;--cht-bubble-insert:#F8F8FA;--cht-bubble-link:#0828CC;--cht-bubble-text:#646470;--cht-reply:#FFFFFF;--cht-footer:#F3EAE1;--cht-hover:rgba(100, 100, 112, 0.07);--cht-read:#006CD7;--cht-unread:#A0A0A8;--nav-ui-01:rgba(255, 255, 255, 0.2);--nav-ui-hover-01:rgba(255, 255, 255, 0.3);--nav-icon-01:rgba(255, 255, 255, 0.9);--nav-icon-focus-01:#327AFD;--nav-text-01:rgba(255, 255, 255, 0.9)}.space-dark{color-scheme:dark;--spr-ui-01:#2C2C2F;--spr-ui-02:#3A3A3E;--spr-ui-03:#141416;--spr-ui-04:#0AA2FF;--spr-ui-05:#48484C;--spr-ui-06:#212123;--spr-ui-focus:rgba(255, 255, 255, 0.12);--spr-ui-focus-reverse:rgba(255, 255, 255, 0.2);--spr-ui-hover:rgba(255, 255, 255, 0.07);--spr-ui-hover-reverse:rgba(255, 255, 255, 0.1);--spr-support-error:#C6202B;--spr-support-error-highlight:rgba(228, 64, 69, 0.15);--spr-support-success:#20963a;--spr-support-success-highlight:rgba(32, 150, 58, 0.15);--spr-support-warning:#DEAC09;--spr-support-warning-highlight:rgba(222, 172, 9, 0.12);--spr-clr-blue-highlight:#2B3343;--spr-tag:#48484C;--spr-tag-01:#48484C;--spr-tag-02:rgba(255, 255, 255, 0.1);--spr-field:#48484C;--spr-popup:#2C2C2F;--spr-overlay:rgba(28, 28, 31, 0.8);--spr-tooltip-01:rgba(255, 255, 255, 0.9);--spr-highlight:rgba(184, 144, 0, 0.6);--spr-favourite:#FF9F21;--spr-notification:#C6202B;--spr-interactive-01:#0AA2FF;--spr-interactive-hover:#0A83D0;--spr-interactive-disable:rgba(44, 44, 47, 0.6);--spr-interactive-02:#AEAEB2;--spr-clr-blue:#006CD7;--spr-clr-green:#3fbf41;--spr-clr-lavender:#9C60FF;--spr-clr-orange:#FF9F21;--spr-clr-pink:#FF668F;--spr-clr-red:#ff6060;--spr-clr-sea:#00C8FF;--spr-clr-teal:#02D999;--spr-clr-yellow:#EEC202;--spr-clr-grey:#646469;--spr-clr-purple:#763BD2;--spr-clr-lt-yellow:#846F35;--spr-clr-darker-blue:#327AFD;--spr-secondary-yellow:#8D6F18;--spr-secondary-green:#5F732C;--spr-secondary-teal:#168380;--spr-secondary-lt-pink:#956787;--spr-secondary-pink:#B94055;--spr-secondary-maroon:#962F61;--spr-secondary-orange:#A8623A;--spr-hover:#0AA2FF;--spr-focus-01:#0AA2FF;--spr-border-01:#3A3A3E;--spr-border-02:#48484C;--spr-border-03:#48484C;--spr-border-04:#646469;--spr-border-05:#2C2C2F;--spr-border-06:#F1F1F1;--spr-card-border:#3A3A3E;--spr-popup-border:#1C1C1F;--spr-tooltip-border:rgba(174, 174, 178, 0.2);--spr-interactive-focus:#0A65A1;--spr-shadow-01:0 1px 4px 0 rgba(10,10,20,0.3);--spr-shadow-02:0 4px 10px 0 rgb(20,20,22);--spr-shadow-03:-2px 5px 12px 0 rgba(10,10,20,0.80);--spr-shadow-04:0 -4px 10px 0px rgb(20,20,22);--spr-shadow-05:0px 3px 4px 0 rgba(0,0,0,0.2);--spr-shadow-06:0px -3px 4px 0 rgba(0,0,0,0.2);--spr-icon-01:#FFFFFF;--spr-icon-02:#AEAEB2;--spr-icon-03:#AEAEB2;--spr-icon-04:#0AA2FF;--spr-icon-05:#FFFFFF;--spr-icon-06:rgba(255, 255, 255, 0.6);--spr-icon-error:#FF6060;--spr-icon-hover:#FFFFFF;--spr-icon-disable:#646469;--spr-icon-hover-reverse:#FFFFFF;--spr-link:#0AA2FF;--spr-text-01:#FFFFFF;--spr-text-02:#AEAEB2;--spr-text-03:#646469;--spr-text-04:#0AA2FF;--spr-text-05:#FFFFFF;--spr-text-06:#2C2C2F;--spr-text-placeholder:#646469;--spr-support-error-text:#E44045;--spr-support-success-text:#3fbf41;--spr-support-warning-text:#EEC202;--app-header:#000;--app-header-tab:rgba(44, 44, 47, 0.6);--app-header-tab-hover:rgba(44, 44, 47, 0.8);--app-header-tab-active:#2C2C2F;--app-header-text:rgba(255, 255, 255, 0.6);--app-header-text-hover:#FFFFFF;--cht-bg:#141416;--cht-border:#2C2C2F;--cht-bubble-left:#F8F8FA;--cht-bubble-right:#006CD7;--cht-bubble-supporting-text:rgba(255, 255, 255, 0.7);--cht-bubble-text-left:#0A0A14;--cht-bubble-text-right:#FFFFFF;--cht-bubble-border:#006CD7;--cht-bubble-icon-1:rgba(255, 255, 255, 0.7);--cht-bubble-icon-2:rgba(255, 255, 255, 0.3);--cht-bubble-icon-3:#FFFFFF;--cht-bubble-insert:rgba(0, 0, 0, 0.2);--cht-bubble-link:#3DF6BF;--cht-bubble-text:rgba(255, 255, 255, 0.7);--cht-reply:#141416;--cht-footer:#2C2C2F;--cht-hover:#1C1C1F;--cht-read:#006CD7;--cht-unread:#AEAEB2;--nav-ui-01:rgba(44, 44, 47, 0.7);--nav-ui-hover-01:rgba(44, 44, 47, 0.9);--nav-icon-01:rgba(255, 255, 255, 0.6);--nav-icon-focus-01:#2E6BD9;--nav-text-01:rgba(255, 255, 255, 0.6)}
package/styles/globals.css ADDED
@@ -0,0 +1,80 @@
1
+ html,
2
+ body {
3
+ padding: 0;
4
+ margin: 0;
5
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
6
+ Helvetica Neue, sans-serif;
7
+ font-size: 62.5%;
8
+ height: 100%;
9
+ }
10
+
11
+ body {
12
+ text-rendering: optimizeLegibility;
13
+ -webkit-font-smoothing: antialiased;
14
+ -moz-osx-font-smoothing: grayscale;
15
+ color: var(--spr-text-01);
16
+ font-size: 1rem;
17
+ }
18
+
19
+
20
+ a {
21
+ color: var(--spr-link);
22
+ text-decoration: none;
23
+ }
24
+
25
+ a:active,
26
+ a:hover {
27
+ text-decoration: underline;
28
+ }
29
+
30
+ * {
31
+ box-sizing: border-box;
32
+ }
33
+
34
+ *:focus {
35
+ outline: none;
36
+ }
37
+
38
+ h1 {
39
+ font-size: 4.2rem;
40
+ line-height: 4.8rem;
41
+ }
42
+
43
+ h2 {
44
+ font-size: 2.4rem;
45
+ line-height: 2.9rem;
46
+ }
47
+
48
+ h3 {
49
+ font-size: 2rem;
50
+ line-height: 2.6rem;
51
+ }
52
+
53
+ h4 {
54
+ font-size: 1.6rem;
55
+ line-height: 2.4rem;
56
+ }
57
+
58
+ h5 {
59
+ font-size: 1.6rem;
60
+ line-height: 2.2rem;
61
+ }
62
+
63
+ h6 {
64
+ font-size: 1.4rem;
65
+ line-height: 2rem;
66
+ }
67
+
68
+ @media (orientation: landscape) {
69
+ *::-webkit-scrollbar {
70
+ background-color: transparent;
71
+ width: 12px;
72
+ }
73
+
74
+ *::-webkit-scrollbar-thumb {
75
+ background-color: darkgrey;
76
+ border: 2px solid transparent;
77
+ border-radius: 8px;
78
+ background-clip: padding-box;
79
+ }
80
+ }
package/styles/globals.min.css ADDED
@@ -0,0 +1 @@
1
+ body,html{padding:0;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:62.5%;height:100%}body{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--spr-text-01);font-size:1rem}a{color:var(--spr-link);text-decoration:none}a:active,a:hover{text-decoration:underline}*{box-sizing:border-box}:focus{outline:0}h1{font-size:4.2rem;line-height:4.8rem}h2{font-size:2.4rem;line-height:2.9rem}h3{font-size:2rem;line-height:2.6rem}h4{font-size:1.6rem;line-height:2.4rem}h5{font-size:1.6rem;line-height:2.2rem}h6{font-size:1.4rem;line-height:2rem}@media (orientation:landscape){::-webkit-scrollbar{background-color:transparent;width:12px}::-webkit-scrollbar-thumb{background-color:#a9a9a9;border:2px solid transparent;border-radius:8px;background-clip:padding-box}}