@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/hyperspace/light/utilities.js ADDED
@@ -0,0 +1,137 @@
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: '4.2rem', lineHeight: '4.8rem', fontWeight: '600' },
19
+ 'typography-h2': { fontSize: '2.4rem', lineHeight: '2.9rem', fontWeight: '600' },
20
+ 'typography-h3': { fontSize: '2rem', lineHeight: '2.6rem', fontWeight: '600' },
21
+ 'typography-h4': { fontSize: '1.6rem', 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: '2rem', fontWeight: '400' },
28
+ 'typography-bl2': { fontSize: '1.3rem', lineHeight: '2rem', fontWeight: '400' },
29
+ 'typography-bl3': { fontSize: '1.2rem', lineHeight: '1.8rem', fontWeight: '400' },
30
+ 'typography-bs1': { fontSize: '1.4rem', lineHeight: '2rem', fontWeight: '400' },
31
+ 'typography-bs2': { fontSize: '1.3rem', lineHeight: '1.8rem', fontWeight: '400' },
32
+ 'typography-bs3': { fontSize: '1.2rem', lineHeight: '1.6rem', 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, #DBDBDB)' },
40
+ 'spr-ui-04': { backgroundColor: 'var(--spr-ui-04, #0E61F6)' },
41
+ 'spr-ui-05': { backgroundColor: 'var(--spr-ui-05, #EEEFF1)' },
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, #F8F8FA)' },
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, #DE336A)' },
48
+ 'spr-support-error-highlight': { backgroundColor: 'var(--spr-support-error-highlight, rgba(255, 51, 106, 0.2))' },
49
+ 'spr-support-success': { backgroundColor: 'var(--spr-support-success, #6AC96E)' },
50
+ 'spr-support-success-highlight': {
51
+ backgroundColor: 'var(--spr-support-success-highlight, rgba(106, 201, 110, 0.2))'
52
+ },
53
+ 'spr-support-warning': { backgroundColor: 'var(--spr-support-warning, #F3BF24)' },
54
+ 'spr-support-warning-highlight': { backgroundColor: 'var(--spr-support-warning-highlight, rgba(243, 191, 36, 0.2))' },
55
+ 'spr-clr-blue-highlight': { backgroundColor: 'var(--spr-clr-blue-highlight, #E8F0FE)' },
56
+ 'spr-tag': { backgroundColor: 'var(--spr-tag, #F2F2F4)' },
57
+ 'spr-tag-01': { backgroundColor: 'var(--spr-tag-01, #E6E6E9)' },
58
+ 'spr-tag-02': { backgroundColor: 'var(--spr-tag-02, rgba(8, 40, 204, 0.07))' },
59
+ 'spr-field': { backgroundColor: 'var(--spr-field, #DBDBDB)' },
60
+ 'spr-popup': { backgroundColor: 'var(--spr-popup, #FFFFFF)' },
61
+ 'spr-overlay': { backgroundColor: 'var(--spr-overlay, rgba(10, 10, 20, 0.9))' },
62
+ 'spr-tooltip-01': { backgroundColor: 'var(--spr-tooltip-01, #0A0A14)' },
63
+ 'spr-highlight': { backgroundColor: 'var(--spr-highlight, rgba(255, 231, 173, 0.7))' },
64
+ 'spr-favourite': { backgroundColor: 'var(--spr-favourite, #FF9F21)' },
65
+ 'spr-notification': { backgroundColor: 'var(--spr-notification, #DE336A)' },
66
+ 'spr-interactive-01': { backgroundColor: 'var(--spr-interactive-01, #0E61F6)' },
67
+ 'spr-interactive-hover': { backgroundColor: 'var(--spr-interactive-hover, #1858CE)' },
68
+ 'spr-interactive-disable': { backgroundColor: 'var(--spr-interactive-disable, rgba(255, 255, 255, 0.6))' },
69
+ 'spr-interactive-02': { backgroundColor: 'var(--spr-interactive-02, #DBDBDB)' },
70
+ 'spr-clr-blue': { backgroundColor: 'var(--spr-clr-blue, #2EA2FB)' },
71
+ 'spr-clr-green': { backgroundColor: 'var(--spr-clr-green, #33CC99)' },
72
+ 'spr-clr-lavender': { backgroundColor: 'var(--spr-clr-lavender, #7F36F6)' },
73
+ 'spr-clr-orange': { backgroundColor: 'var(--spr-clr-orange, #F08C1A)' },
74
+ 'spr-clr-pink': { backgroundColor: 'var(--spr-clr-pink, #FFA1BE)' },
75
+ 'spr-clr-red': { backgroundColor: 'var(--spr-clr-red, #E1245E)' },
76
+ 'spr-clr-sea': { backgroundColor: 'var(--spr-clr-sea, #16AAD2)' },
77
+ 'spr-clr-teal': { backgroundColor: 'var(--spr-clr-teal, #13C18D)' },
78
+ 'spr-clr-yellow': { backgroundColor: 'var(--spr-clr-yellow, #ECAD00)' },
79
+ 'spr-clr-grey': { backgroundColor: 'var(--spr-clr-grey, #D7D7DC)' },
80
+ 'spr-interactive-focus': { borderColor: 'var(--spr-interactive-focus, #132a86)' },
81
+ 'spr-clr-purple': { backgroundColor: 'var(--spr-clr-purple, #8C43FF)' },
82
+ 'spr-clr-lt-yellow': { backgroundColor: 'var(--spr-clr-lt-yellow, #FFD04F)' },
83
+ 'spr-clr-darker-blue': { backgroundColor: 'var(--spr-clr-darker-blue, #327AFD)' },
84
+ 'spr-secondary-yellow': { backgroundColor: 'var(--spr-secondary-yellow, #FFC312)' },
85
+ 'spr-secondary-green': { backgroundColor: 'var(--spr-secondary-green, #A3CB38)' },
86
+ 'spr-secondary-teal': { backgroundColor: 'var(--spr-secondary-teal, #12CBC4)' },
87
+ 'spr-secondary-lt-pink': { backgroundColor: 'var(--spr-secondary-lt-pink, #FDA7DF)' },
88
+ 'spr-secondary-pink': { backgroundColor: 'var(--spr-secondary-pink, #ED4C67)' },
89
+ 'spr-secondary-maroon': { backgroundColor: 'var(--spr-secondary-maroon, #B53471)' },
90
+ 'spr-secondary-orange': { backgroundColor: 'var(--spr-secondary-orange, #F48749)' },
91
+ 'spr-icon-01': { fill: 'var(--spr-icon-01, #0A0A14)' },
92
+ 'spr-icon-02': { fill: 'var(--spr-icon-02, #646470)' },
93
+ 'spr-icon-03': { fill: 'var(--spr-icon-03, #646470)' },
94
+ 'spr-icon-04': { fill: 'var(--spr-icon-04, #0E61F6)' },
95
+ 'spr-icon-05': { fill: 'var(--spr-icon-05, #FFFFFF)' },
96
+ 'spr-icon-06': { fill: 'var(--spr-icon-06, rgba(255, 255, 255, 0.6))' },
97
+ 'spr-icon-hover': { fill: 'var(--spr-icon-hover, #0A0A14)' },
98
+ 'spr-icon-disable': { fill: 'var(--spr-icon-disable, #DBDBDB)' },
99
+ 'spr-icon-hover-reverse': { fill: 'var(--spr-icon-hover-reverse, #FFFFFF)' },
100
+ 'spr-icon-error': { fill: 'var(--spr-icon-error, #DE336A)' },
101
+ 'spr-link': { color: 'var(--spr-link, #0E61F6)' },
102
+ 'spr-text-01': { color: 'var(--spr-text-01, #0A0A14)' },
103
+ 'spr-text-02': { color: 'var(--spr-text-02, #646470)' },
104
+ 'spr-text-03': { color: 'var(--spr-text-03, #646470)' },
105
+ 'spr-text-04': { color: 'var(--spr-text-04, #0E61F6)' },
106
+ 'spr-text-05': { color: 'var(--spr-text-05, #FFFFFF)' },
107
+ 'spr-text-06': { color: 'var(--spr-text-06, #FFFFFF)' },
108
+ 'spr-text-placeholder': { color: 'var(--spr-text-placeholder, #646470)' },
109
+ 'spr-support-error-text': { color: 'var(--spr-support-error-text, #DE336A)' },
110
+ 'spr-support-success-text': { color: 'var(--spr-support-success-text, #6AC96E)' },
111
+ 'spr-support-warning-text': { color: 'var(--spr-support-warning-text, #F3BF24)' },
112
+ 'spr-hover': { borderColor: 'var(--spr-hover, #0729a0)' },
113
+ 'spr-focus-01': { borderColor: 'var(--spr-focus-01, #0E61F6)' },
114
+ 'spr-border-01': { borderColor: 'var(--spr-border-01, #EEEEEE)' },
115
+ 'spr-border-02': { borderColor: 'var(--spr-border-02, #E6E6E9)' },
116
+ 'spr-border-03': { borderColor: 'var(--spr-border-03, #DBDBDB)' },
117
+ 'spr-border-04': { borderColor: 'var(--spr-border-04, #A0A0A8)' },
118
+ 'spr-border-05': { borderColor: 'var(--spr-border-05, #FFFFFF)' },
119
+ 'spr-border-06': { borderColor: 'var(--spr-border-06, #0A0A14)' },
120
+ 'spr-card-border': { borderColor: 'var(--spr-card-border, #ECECEF)' },
121
+ 'spr-popup-border': { borderColor: 'var(--spr-popup-border, #D7D7DC)' },
122
+ 'spr-tooltip-border': { borderColor: 'var(--spr-tooltip-border, #0A0A14)' },
123
+ 'spr-focus-02': { outline: 'var(--spr-focus-02, 1px solid #0E61F6)' },
124
+ 'spr-shadow-01': { boxShadow: 'var(--spr-shadow-01, 0 1px 4px 0 rgba(10,10,20,0.15))' },
125
+ 'spr-shadow-02': { boxShadow: 'var(--spr-shadow-02, 0 2px 8px 0 rgba(10,10,20,0.20))' },
126
+ 'spr-shadow-03': { boxShadow: 'var(--spr-shadow-03, -2px 9px 12px 0 rgba(10,10,20,0.60))' },
127
+ 'spr-shadow-04': { boxShadow: 'var(--spr-shadow-04, -2px 5px 12px -4px rgba(10,10,20,.20))' },
128
+ 'spr-shadow-05': { boxShadow: 'var(--spr-shadow-05, 0px 3px 4px 0 rgba(0,0,0,0.1))' },
129
+ 'spr-shadow-06': { boxShadow: 'var(--spr-shadow-06, 0px -3px 4px 0 rgba(0,0,0,0.1))' },
130
+ 'nav-ui-01': { backgroundColor: 'var(--nav-ui-01, rgba(255, 255, 255, 0.2))' },
131
+ 'nav-ui-hover-01': { backgroundColor: 'var(--nav-ui-hover-01, rgba(255, 255, 255, 0.3))' },
132
+ 'nav-icon-01': { fill: 'var(--nav-icon-01, rgba(255, 255, 255, 0.9))' },
133
+ 'nav-icon-focus-01': { fill: 'var(--nav-icon-focus-01, #0E61F6)' },
134
+ 'nav-text-01': { color: 'var(--nav-text-01, rgba(255, 255, 255, 0.9))' },
135
+ 'outline-01': { outlineStyle: 'solid', outlineWidth: '2px', outlineColor: '#0E61F6', outlineOffset: '2px' }
136
+ };
137
+ exports["default"] = __assign(__assign({}, utilities_1["default"].utilities), utilities);
package/hyperspace/themeVars.css ADDED
@@ -0,0 +1,253 @@
1
+ /**
2
+ * SPACEWEB-GENERATED-CSS-FILE
3
+ * DO NOT EDIT THIS FILE DIRECTLY, CHECK spaceweb-themes/scripts/buildTheme/buildThemeVariables
4
+ */
5
+
6
+ .hyperspace-light {
7
+ color-scheme: light;
8
+ --spr-ui-01: #ffffff;
9
+ --spr-ui-02: #f8f8fa;
10
+ --spr-ui-03: #dbdbdb;
11
+ --spr-ui-04: #0e61f6;
12
+ --spr-ui-05: #eeeff1;
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: #f8f8fa;
17
+ --spr-ui-hover-reverse: rgba(255, 255, 255, 0.1);
18
+ --spr-support-error: #de336a;
19
+ --spr-support-error-highlight: rgba(255, 51, 106, 0.2);
20
+ --spr-support-success: #6ac96e;
21
+ --spr-support-success-highlight: rgba(106, 201, 110, 0.2);
22
+ --spr-support-warning: #f3bf24;
23
+ --spr-support-warning-highlight: rgba(243, 191, 36, 0.2);
24
+ --spr-clr-blue-highlight: #e8f0fe;
25
+ --spr-tag: #f2f2f4;
26
+ --spr-tag-01: #e6e6e9;
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: #de336a;
35
+ --spr-interactive-01: #0e61f6;
36
+ --spr-interactive-hover: #1858ce;
37
+ --spr-interactive-disable: rgba(255, 255, 255, 0.6);
38
+ --spr-interactive-02: #dbdbdb;
39
+ --spr-clr-blue: #2ea2fb;
40
+ --spr-clr-green: #33cc99;
41
+ --spr-clr-lavender: #7f36f6;
42
+ --spr-clr-orange: #f08c1a;
43
+ --spr-clr-pink: #ffa1be;
44
+ --spr-clr-red: #e1245e;
45
+ --spr-clr-sea: #16aad2;
46
+ --spr-clr-teal: #13c18d;
47
+ --spr-clr-yellow: #ecad00;
48
+ --spr-clr-grey: #d7d7dc;
49
+ --spr-interactive-focus: #132a86;
50
+ --spr-clr-purple: #8c43ff;
51
+ --spr-clr-lt-yellow: #ffd04f;
52
+ --spr-clr-darker-blue: #327afd;
53
+ --spr-secondary-yellow: #ffc312;
54
+ --spr-secondary-green: #a3cb38;
55
+ --spr-secondary-teal: #12cbc4;
56
+ --spr-secondary-lt-pink: #fda7df;
57
+ --spr-secondary-pink: #ed4c67;
58
+ --spr-secondary-maroon: #b53471;
59
+ --spr-secondary-orange: #f48749;
60
+ --spr-icon-01: #0a0a14;
61
+ --spr-icon-02: #646470;
62
+ --spr-icon-03: #646470;
63
+ --spr-icon-04: #0e61f6;
64
+ --spr-icon-05: #ffffff;
65
+ --spr-icon-06: rgba(255, 255, 255, 0.6);
66
+ --spr-icon-hover: #0a0a14;
67
+ --spr-icon-disable: #dbdbdb;
68
+ --spr-icon-hover-reverse: #ffffff;
69
+ --spr-icon-error: #de336a;
70
+ --spr-link: #0e61f6;
71
+ --spr-text-01: #0a0a14;
72
+ --spr-text-02: #646470;
73
+ --spr-text-03: #646470;
74
+ --spr-text-04: #0e61f6;
75
+ --spr-text-05: #ffffff;
76
+ --spr-text-06: #ffffff;
77
+ --spr-text-placeholder: #646470;
78
+ --spr-support-error-text: #de336a;
79
+ --spr-support-success-text: #6ac96e;
80
+ --spr-support-warning-text: #f3bf24;
81
+ --spr-hover: #0729a0;
82
+ --spr-focus-01: #0e61f6;
83
+ --spr-border-01: #eeeeee;
84
+ --spr-border-02: #e6e6e9;
85
+ --spr-border-03: #dbdbdb;
86
+ --spr-border-04: #a0a0a8;
87
+ --spr-border-05: #ffffff;
88
+ --spr-border-06: #0a0a14;
89
+ --spr-card-border: #ececef;
90
+ --spr-popup-border: #d7d7dc;
91
+ --spr-tooltip-border: #0a0a14;
92
+ --spr-focus-02: 1px solid #0e61f6;
93
+ --spr-shadow-01: 0 1px 4px 0 rgba(10, 10, 20, 0.15);
94
+ --spr-shadow-02: 0 2px 8px 0 rgba(10, 10, 20, 0.2);
95
+ --spr-shadow-03: -2px 9px 12px 0 rgba(10, 10, 20, 0.6);
96
+ --spr-shadow-04: -2px 5px 12px -4px rgba(10, 10, 20, 0.2);
97
+ --spr-shadow-05: 0px 3px 4px 0 rgba(0, 0, 0, 0.1);
98
+ --spr-shadow-06: 0px -3px 4px 0 rgba(0, 0, 0, 0.1);
99
+ --app-header: #0a0a14;
100
+ --app-header-tab: rgba(255, 255, 255, 0.1);
101
+ --app-header-tab-hover: rgba(255, 255, 255, 0.2);
102
+ --app-header-tab-active: #eeeeee;
103
+ --app-header-text: rgba(255, 255, 255, 0.6);
104
+ --app-header-text-hover: #ffffff;
105
+ --cht-bg: #f3eae1;
106
+ --cht-border: #e6d4ca;
107
+ --cht-bubble-left: #ffffff;
108
+ --cht-bubble-right: #ebebff;
109
+ --cht-bubble-supporting-text: #646470;
110
+ --cht-bubble-text-left: #0a0a14;
111
+ --cht-bubble-text-right: #0a0a14;
112
+ --cht-bubble-border: #c7d3f7;
113
+ --cht-bubble-icon-1: #646470;
114
+ --cht-bubble-icon-2: #d7d7dc;
115
+ --cht-bubble-icon-3: #0828cc;
116
+ --cht-bubble-insert: #f8f8fa;
117
+ --cht-bubble-link: #0828cc;
118
+ --cht-bubble-text: #646470;
119
+ --cht-reply: #ffffff;
120
+ --cht-footer: #f3eae1;
121
+ --cht-hover: rgba(100, 100, 112, 0.07);
122
+ --cht-read: #006cd7;
123
+ --cht-unread: #a0a0a8;
124
+ --nav-ui-01: rgba(255, 255, 255, 0.2);
125
+ --nav-ui-hover-01: rgba(255, 255, 255, 0.3);
126
+ --nav-icon-01: rgba(255, 255, 255, 0.9);
127
+ --nav-icon-focus-01: #0e61f6;
128
+ --nav-text-01: rgba(255, 255, 255, 0.9);
129
+ }
130
+ .hyperspace-dark {
131
+ color-scheme: dark;
132
+ --spr-ui-01: #1c1c1f;
133
+ --spr-ui-02: #212123;
134
+ --spr-ui-03: #48484c;
135
+ --spr-ui-04: #4b8afc;
136
+ --spr-ui-05: #3a3a3e;
137
+ --spr-ui-06: #2c2c2f;
138
+ --spr-ui-focus: rgba(255, 255, 255, 0.12);
139
+ --spr-ui-focus-reverse: rgba(255, 255, 255, 0.2);
140
+ --spr-ui-hover: #212123;
141
+ --spr-ui-hover-reverse: rgba(255, 255, 255, 0.1);
142
+ --spr-support-error: #fa6274;
143
+ --spr-support-error-highlight: rgba(250, 98, 116, 0.3);
144
+ --spr-support-success: #6ac96e;
145
+ --spr-support-success-highlight: rgba(106, 201, 110, 0.3);
146
+ --spr-support-warning: #f3bf24;
147
+ --spr-support-warning-highlight: rgba(243, 191, 36, 0.3);
148
+ --spr-clr-blue-highlight: #2b3343;
149
+ --spr-tag: #48484c;
150
+ --spr-tag-01: #48484c;
151
+ --spr-tag-02: rgba(255, 255, 255, 0.1);
152
+ --spr-field: #48484c;
153
+ --spr-popup: #1c1c1f;
154
+ --spr-overlay: rgba(28, 28, 31, 0.85);
155
+ --spr-tooltip-01: #ffffff;
156
+ --spr-highlight: rgba(184, 144, 0, 0.6);
157
+ --spr-favourite: #ff9f21;
158
+ --spr-notification: #fa6274;
159
+ --spr-interactive-01: #4b8afc;
160
+ --spr-interactive-hover: #1858ce;
161
+ --spr-interactive-disable: rgba(72, 72, 76, 0.8);
162
+ --spr-interactive-02: #48484c;
163
+ --spr-clr-blue: #297ab9;
164
+ --spr-clr-green: #097a4b;
165
+ --spr-clr-lavender: #9c60ff;
166
+ --spr-clr-orange: #ff9f21;
167
+ --spr-clr-pink: #ffa1be;
168
+ --spr-clr-red: #db334f;
169
+ --spr-clr-sea: #00c8ff;
170
+ --spr-clr-teal: #02d999;
171
+ --spr-clr-yellow: #95700d;
172
+ --spr-clr-grey: #646469;
173
+ --spr-interactive-focus: #0a65a1;
174
+ --spr-clr-purple: #763bd2;
175
+ --spr-clr-lt-yellow: #846f35;
176
+ --spr-clr-darker-blue: #327afd;
177
+ --spr-secondary-yellow: #8d6f18;
178
+ --spr-secondary-green: #5f732c;
179
+ --spr-secondary-teal: #168380;
180
+ --spr-secondary-lt-pink: #956787;
181
+ --spr-secondary-pink: #b94055;
182
+ --spr-secondary-maroon: #962f61;
183
+ --spr-secondary-orange: #a8623a;
184
+ --spr-hover: #0aa2ff;
185
+ --spr-focus-01: #4b8afc;
186
+ --spr-focus-02: 1px solid #1c62fd;
187
+ --spr-border-01: #3a3a3e;
188
+ --spr-border-02: #48484c;
189
+ --spr-border-03: #646469;
190
+ --spr-border-04: #a0a0a8;
191
+ --spr-border-05: #2c2c2f;
192
+ --spr-border-06: #f1f1f1;
193
+ --spr-card-border: #3a3a3e;
194
+ --spr-popup-border: #1c1c1f;
195
+ --spr-tooltip-border: rgba(174, 174, 178, 0.2);
196
+ --spr-shadow-01: 0 1px 4px 0 rgba(10, 10, 20, 0.3);
197
+ --spr-shadow-02: 1px 1px 7px rgba(255, 255, 255, 0.1);
198
+ --spr-shadow-03: -2px 5px 12px 0 rgba(10, 10, 20, 0.8);
199
+ --spr-shadow-04: -2px 5px 12px -4px rgba(0, 0, 0, 1);
200
+ --spr-shadow-05: 0px 3px 4px 0 rgba(0, 0, 0, 0.2);
201
+ --spr-shadow-06: 0px -3px 4px 0 rgba(0, 0, 0, 0.2);
202
+ --spr-icon-01: #f1f1f1;
203
+ --spr-icon-02: #aeaeb2;
204
+ --spr-icon-03: #aeaeb2;
205
+ --spr-icon-04: #4b8afc;
206
+ --spr-icon-05: #1c1c1f;
207
+ --spr-icon-06: rgba(255, 255, 255, 0.6);
208
+ --spr-icon-hover: #ffffff;
209
+ --spr-icon-disable: #dbdbdb;
210
+ --spr-icon-hover-reverse: #ffffff;
211
+ --spr-icon-error: #fa6274;
212
+ --spr-link: #4b8afc;
213
+ --spr-text-01: #f1f1f1;
214
+ --spr-text-02: #aeaeb2;
215
+ --spr-text-03: #646469;
216
+ --spr-text-04: #4b8afc;
217
+ --spr-text-05: #f1f1f1;
218
+ --spr-text-06: #2c2c2f;
219
+ --spr-text-placeholder: #646469;
220
+ --spr-support-error-text: #fa6274;
221
+ --spr-support-success-text: #6ac96e;
222
+ --spr-support-warning-text: #f3bf24;
223
+ --app-header: #000;
224
+ --app-header-tab: rgba(44, 44, 47, 0.6);
225
+ --app-header-tab-hover: rgba(44, 44, 47, 0.8);
226
+ --app-header-tab-active: #3a3a3e;
227
+ --app-header-text: rgba(255, 255, 255, 0.6);
228
+ --app-header-text-hover: #ffffff;
229
+ --cht-bg: #141416;
230
+ --cht-border: #2c2c2f;
231
+ --cht-bubble-left: #f8f8fa;
232
+ --cht-bubble-right: #006cd7;
233
+ --cht-bubble-supporting-text: rgba(255, 255, 255, 0.7);
234
+ --cht-bubble-text-left: #0a0a14;
235
+ --cht-bubble-text-right: #ffffff;
236
+ --cht-bubble-border: #006cd7;
237
+ --cht-bubble-icon-1: rgba(255, 255, 255, 0.7);
238
+ --cht-bubble-icon-2: rgba(255, 255, 255, 0.3);
239
+ --cht-bubble-icon-3: #ffffff;
240
+ --cht-bubble-insert: rgba(0, 0, 0, 0.2);
241
+ --cht-bubble-link: #3df6bf;
242
+ --cht-bubble-text: rgba(255, 255, 255, 0.7);
243
+ --cht-reply: #141416;
244
+ --cht-footer: #2c2c2f;
245
+ --cht-hover: #1c1c1f;
246
+ --cht-read: #006cd7;
247
+ --cht-unread: #aeaeb2;
248
+ --nav-ui-01: rgba(44, 44, 47, 0.7);
249
+ --nav-ui-hover-01: rgba(44, 44, 47, 0.9);
250
+ --nav-icon-01: rgba(255, 255, 255, 0.6);
251
+ --nav-icon-focus-01: #2e6bd9;
252
+ --nav-text-01: rgba(255, 255, 255, 0.6);
253
+ }
package/hyperspace/themeVars.min.css ADDED
@@ -0,0 +1 @@
1
+ .hyperspace-light{color-scheme:light;--spr-ui-01:#FFFFFF;--spr-ui-02:#F8F8FA;--spr-ui-03:#DBDBDB;--spr-ui-04:#0E61F6;--spr-ui-05:#EEEFF1;--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:#F8F8FA;--spr-ui-hover-reverse:rgba(255, 255, 255, 0.1);--spr-support-error:#DE336A;--spr-support-error-highlight:rgba(255, 51, 106, 0.2);--spr-support-success:#6AC96E;--spr-support-success-highlight:rgba(106, 201, 110, 0.2);--spr-support-warning:#F3BF24;--spr-support-warning-highlight:rgba(243, 191, 36, 0.2);--spr-clr-blue-highlight:#E8F0FE;--spr-tag:#F2F2F4;--spr-tag-01:#E6E6E9;--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:#DE336A;--spr-interactive-01:#0E61F6;--spr-interactive-hover:#1858CE;--spr-interactive-disable:rgba(255, 255, 255, 0.6);--spr-interactive-02:#DBDBDB;--spr-clr-blue:#2EA2FB;--spr-clr-green:#33CC99;--spr-clr-lavender:#7F36F6;--spr-clr-orange:#F08C1A;--spr-clr-pink:#FFA1BE;--spr-clr-red:#E1245E;--spr-clr-sea:#16AAD2;--spr-clr-teal:#13C18D;--spr-clr-yellow:#ECAD00;--spr-clr-grey:#D7D7DC;--spr-interactive-focus:#132a86;--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-icon-01:#0A0A14;--spr-icon-02:#646470;--spr-icon-03:#646470;--spr-icon-04:#0E61F6;--spr-icon-05:#FFFFFF;--spr-icon-06:rgba(255, 255, 255, 0.6);--spr-icon-hover:#0A0A14;--spr-icon-disable:#DBDBDB;--spr-icon-hover-reverse:#FFFFFF;--spr-icon-error:#DE336A;--spr-link:#0E61F6;--spr-text-01:#0A0A14;--spr-text-02:#646470;--spr-text-03:#646470;--spr-text-04:#0E61F6;--spr-text-05:#FFFFFF;--spr-text-06:#FFFFFF;--spr-text-placeholder:#646470;--spr-support-error-text:#DE336A;--spr-support-success-text:#6AC96E;--spr-support-warning-text:#F3BF24;--spr-hover:#0729a0;--spr-focus-01:#0E61F6;--spr-border-01:#EEEEEE;--spr-border-02:#E6E6E9;--spr-border-03:#DBDBDB;--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-focus-02:1px solid #0E61F6;--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:-2px 5px 12px -4px rgba(10,10,20,.20);--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);--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:#EEEEEE;--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:#0E61F6;--nav-text-01:rgba(255, 255, 255, 0.9)}.hyperspace-dark{color-scheme:dark;--spr-ui-01:#1C1C1F;--spr-ui-02:#212123;--spr-ui-03:#48484C;--spr-ui-04:#4B8AFC;--spr-ui-05:#3A3A3E;--spr-ui-06:#2C2C2F;--spr-ui-focus:rgba(255, 255, 255, 0.12);--spr-ui-focus-reverse:rgba(255, 255, 255, 0.2);--spr-ui-hover:#212123;--spr-ui-hover-reverse:rgba(255, 255, 255, 0.1);--spr-support-error:#FA6274;--spr-support-error-highlight:rgba(250, 98, 116, 0.3);--spr-support-success:#6AC96E;--spr-support-success-highlight:rgba(106, 201, 110, 0.3);--spr-support-warning:#F3BF24;--spr-support-warning-highlight:rgba(243, 191, 36, 0.3);--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:#1C1C1F;--spr-overlay:rgba(28, 28, 31, 0.85);--spr-tooltip-01:#FFFFFF;--spr-highlight:rgba(184, 144, 0, 0.6);--spr-favourite:#FF9F21;--spr-notification:#FA6274;--spr-interactive-01:#4B8AFC;--spr-interactive-hover:#1858CE;--spr-interactive-disable:rgba(72,72,76,0.8);--spr-interactive-02:#48484C;--spr-clr-blue:#297AB9;--spr-clr-green:#097A4B;--spr-clr-lavender:#9C60FF;--spr-clr-orange:#FF9F21;--spr-clr-pink:#FFA1BE;--spr-clr-red:#DB334F;--spr-clr-sea:#00C8FF;--spr-clr-teal:#02D999;--spr-clr-yellow:#95700D;--spr-clr-grey:#646469;--spr-interactive-focus:#0A65A1;--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:#4B8AFC;--spr-focus-02:1px solid #1c62fd;--spr-border-01:#3A3A3E;--spr-border-02:#48484C;--spr-border-03:#646469;--spr-border-04:#A0A0A8;--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-shadow-01:0 1px 4px 0 rgba(10,10,20,0.3);--spr-shadow-02:1px 1px 7px rgba(255, 255, 255, 0.1);--spr-shadow-03:-2px 5px 12px 0 rgba(10,10,20,0.80);--spr-shadow-04:-2px 5px 12px -4px rgba(0,0,0,1.0);--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:#F1F1F1;--spr-icon-02:#AEAEB2;--spr-icon-03:#AEAEB2;--spr-icon-04:#4B8AFC;--spr-icon-05:#1C1C1F;--spr-icon-06:rgba(255, 255, 255, 0.6);--spr-icon-hover:#FFFFFF;--spr-icon-disable:#DBDBDB;--spr-icon-hover-reverse:#FFFFFF;--spr-icon-error:#FA6274;--spr-link:#4B8AFC;--spr-text-01:#F1F1F1;--spr-text-02:#AEAEB2;--spr-text-03:#646469;--spr-text-04:#4B8AFC;--spr-text-05:#F1F1F1;--spr-text-06:#2C2C2F;--spr-text-placeholder:#646469;--spr-support-error-text:#FA6274;--spr-support-success-text:#6AC96E;--spr-support-warning-text:#F3BF24;--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:#3A3A3E;--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/package.json ADDED
@@ -0,0 +1,27 @@
1
+ {
2
+ "name": "@sprinklrjs/spaceweb-themes",
3
+ "version": "10.1.0",
4
+ "description": "Theme library containing design tokens for Sprinklr's Hyperspace design language",
5
+ "main": "./index.js",
6
+ "scripts": {
7
+ "build-cheatsheet": "ts-node scripts/buildCheatSheetConfig",
8
+ "build": "ts-node ./scripts/buildTheme && yarn build-cheatsheet && yarn copy-package.json",
9
+ "copy-package.json": "cp package.json dist/",
10
+ "test": "jest ./src",
11
+ "test:watch": "jest --watch ./src",
12
+ "test:coverage": "jest ./src --coverage",
13
+ "build:theme": "ts-node ./scripts/buildTheme --log-error"
14
+ },
15
+ "repository": "https://prod-gitlab.sprinklr.com/sprinklr/frontend/spaceweb",
16
+ "author": "Sprinklr, Inc.",
17
+ "license": "ISC",
18
+ "devDependencies": {
19
+ "@tailwindcss/line-clamp": "^0.2.2",
20
+ "clean-css": "^4.2.3",
21
+ "lodash": "^4.17.15",
22
+ "postcss": "^7.0.27",
23
+ "postcss-js": "^2.0.3",
24
+ "tailwindcss": "~1.9.0",
25
+ "ts-node": "^10.4.0"
26
+ }
27
+ }