@codeleap/styles 4.2.9 → 4.2.10
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.
- package/package.json +4 -5
- package/package.json.bak +3 -4
- package/src/lib/borderCreator.ts +5 -3
- package/src/lib/constants.ts +3 -0
- package/src/lib/dynamicVariants.ts +28 -13
- package/dist/index.d.ts +0 -5
- package/dist/index.js +0 -26
- package/dist/lib/Cacher.d.ts +0 -37
- package/dist/lib/Cacher.js +0 -104
- package/dist/lib/StaleControl.d.ts +0 -21
- package/dist/lib/StaleControl.js +0 -78
- package/dist/lib/StyleCache.d.ts +0 -20
- package/dist/lib/StyleCache.js +0 -83
- package/dist/lib/StylePersistor.d.ts +0 -13
- package/dist/lib/StylePersistor.js +0 -22
- package/dist/lib/StyleRegistry.d.ts +0 -47
- package/dist/lib/StyleRegistry.js +0 -513
- package/dist/lib/borderCreator.d.ts +0 -11
- package/dist/lib/borderCreator.js +0 -44
- package/dist/lib/constants.d.ts +0 -5
- package/dist/lib/constants.js +0 -8
- package/dist/lib/createAppVariants.d.ts +0 -6
- package/dist/lib/createAppVariants.js +0 -9
- package/dist/lib/createStyles.d.ts +0 -4
- package/dist/lib/createStyles.js +0 -27
- package/dist/lib/createTheme.d.ts +0 -7
- package/dist/lib/createTheme.js +0 -74
- package/dist/lib/defaultVariants.d.ts +0 -178
- package/dist/lib/defaultVariants.js +0 -179
- package/dist/lib/dynamicVariants.d.ts +0 -12
- package/dist/lib/dynamicVariants.js +0 -88
- package/dist/lib/hashKey.d.ts +0 -1
- package/dist/lib/hashKey.js +0 -14
- package/dist/lib/hooks.d.ts +0 -8
- package/dist/lib/hooks.js +0 -76
- package/dist/lib/index.d.ts +0 -10
- package/dist/lib/index.js +0 -37
- package/dist/lib/mediaQuery.d.ts +0 -11
- package/dist/lib/mediaQuery.js +0 -65
- package/dist/lib/minifier.d.ts +0 -6
- package/dist/lib/minifier.js +0 -21
- package/dist/lib/multiplierProperty.d.ts +0 -3
- package/dist/lib/multiplierProperty.js +0 -13
- package/dist/lib/spacing.d.ts +0 -11
- package/dist/lib/spacing.js +0 -104
- package/dist/lib/themeStore.d.ts +0 -7
- package/dist/lib/themeStore.js +0 -9
- package/dist/lib/utils.d.ts +0 -8
- package/dist/lib/utils.js +0 -177
- package/dist/lib/validateTheme.d.ts +0 -2
- package/dist/lib/validateTheme.js +0 -68
- package/dist/types/cache.d.ts +0 -1
- package/dist/types/cache.js +0 -2
- package/dist/types/component.d.ts +0 -25
- package/dist/types/component.js +0 -2
- package/dist/types/core.d.ts +0 -20
- package/dist/types/core.js +0 -2
- package/dist/types/icon.d.ts +0 -4
- package/dist/types/icon.js +0 -3
- package/dist/types/index.d.ts +0 -5
- package/dist/types/index.js +0 -21
- package/dist/types/spacing.d.ts +0 -6
- package/dist/types/spacing.js +0 -21
- package/dist/types/style.d.ts +0 -14
- package/dist/types/style.js +0 -2
- package/dist/types/theme.d.ts +0 -67
- package/dist/types/theme.js +0 -2
package/dist/lib/createTheme.js
DELETED
|
@@ -1,74 +0,0 @@
|
|
|
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
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
-
var t = {};
|
|
15
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
-
t[p] = s[p];
|
|
17
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
-
t[p[i]] = s[p[i]];
|
|
21
|
-
}
|
|
22
|
-
return t;
|
|
23
|
-
};
|
|
24
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
|
-
exports.createTheme = void 0;
|
|
26
|
-
var borderCreator_1 = require("./borderCreator");
|
|
27
|
-
var mediaQuery_1 = require("./mediaQuery");
|
|
28
|
-
var multiplierProperty_1 = require("./multiplierProperty");
|
|
29
|
-
var defaultVariants_1 = require("./defaultVariants");
|
|
30
|
-
var spacing_1 = require("./spacing");
|
|
31
|
-
var themeStore_1 = require("./themeStore");
|
|
32
|
-
var createTheme = function (theme, colorSchemaPersistor) {
|
|
33
|
-
var _a;
|
|
34
|
-
var colors = theme.colors, breakpoints = theme.breakpoints, presets = theme.presets, borderRadius = theme.borderRadius, effects = theme.effects, typography = theme.typography, icons = theme.icons, values = theme.values, otherThemeValues = __rest(theme, ["colors", "breakpoints", "presets", "borderRadius", "effects", "typography", "icons", "values"]);
|
|
35
|
-
var themeObj = __assign(__assign({}, otherThemeValues), { get currentColorScheme() {
|
|
36
|
-
return themeStore_1.themeStore.getState().colorScheme;
|
|
37
|
-
}, breakpoints: breakpoints !== null && breakpoints !== void 0 ? breakpoints : {}, get colors() {
|
|
38
|
-
var _a;
|
|
39
|
-
var colorScheme = themeStore_1.themeStore.getState().colorScheme;
|
|
40
|
-
if (colorScheme === 'default')
|
|
41
|
-
return colors;
|
|
42
|
-
var scheme = (_a = theme.alternateColors) === null || _a === void 0 ? void 0 : _a[colorScheme];
|
|
43
|
-
if (!scheme) {
|
|
44
|
-
console.warn("Color scheme ".concat(colorScheme, " not found in theme"));
|
|
45
|
-
}
|
|
46
|
-
return scheme !== null && scheme !== void 0 ? scheme : colors;
|
|
47
|
-
}, setColorScheme: function (colorScheme) {
|
|
48
|
-
themeStore_1.themeStore.setState({ colorScheme: colorScheme });
|
|
49
|
-
colorSchemaPersistor.set(colorScheme);
|
|
50
|
-
}, baseSpacing: theme.baseSpacing, value: function (n) {
|
|
51
|
-
if (n === void 0) { n = 1; }
|
|
52
|
-
return theme.baseSpacing * n;
|
|
53
|
-
}, spacing: __assign(__assign(__assign(__assign({ value: function (n) {
|
|
54
|
-
if (n === void 0) { n = 1; }
|
|
55
|
-
return theme.baseSpacing * n;
|
|
56
|
-
}, gap: (0, multiplierProperty_1.multiplierProperty)(theme.baseSpacing, 'gap') }, (0, spacing_1.spacingFactory)(theme.baseSpacing, 'padding')), (0, spacing_1.spacingFactory)(theme.baseSpacing, 'margin')), (0, spacing_1.spacingFactory)(theme.baseSpacing, 'p', true)), (0, spacing_1.spacingFactory)(theme.baseSpacing, 'm', true)), inset: {
|
|
57
|
-
top: (0, multiplierProperty_1.multiplierProperty)(theme.baseSpacing, 'top'),
|
|
58
|
-
bottom: (0, multiplierProperty_1.multiplierProperty)(theme.baseSpacing, 'bottom'),
|
|
59
|
-
left: (0, multiplierProperty_1.multiplierProperty)(theme.baseSpacing, 'left'),
|
|
60
|
-
right: (0, multiplierProperty_1.multiplierProperty)(theme.baseSpacing, 'right'),
|
|
61
|
-
}, presets: __assign(__assign({}, defaultVariants_1.defaultVariants), presets), borderRadius: borderRadius !== null && borderRadius !== void 0 ? borderRadius : {}, effects: effects !== null && effects !== void 0 ? effects : {}, media: (0, mediaQuery_1.createMediaQueries)(breakpoints), border: borderCreator_1.borderCreator, typography: typography !== null && typography !== void 0 ? typography : {}, icons: icons, values: values !== null && values !== void 0 ? values : {}, sized: function (size) {
|
|
62
|
-
var value = typeof size == 'number' ? size * theme.baseSpacing : size;
|
|
63
|
-
return {
|
|
64
|
-
width: value,
|
|
65
|
-
height: value,
|
|
66
|
-
};
|
|
67
|
-
} });
|
|
68
|
-
themeStore_1.themeStore.setState({
|
|
69
|
-
current: themeObj,
|
|
70
|
-
colorScheme: (_a = colorSchemaPersistor.get()) !== null && _a !== void 0 ? _a : 'default',
|
|
71
|
-
});
|
|
72
|
-
return themeObj;
|
|
73
|
-
};
|
|
74
|
-
exports.createTheme = createTheme;
|
|
@@ -1,178 +0,0 @@
|
|
|
1
|
-
import { ICSS } from '../types';
|
|
2
|
-
export declare const defaultVariants: {
|
|
3
|
-
readonly inline: {
|
|
4
|
-
readonly display: "inline-block";
|
|
5
|
-
};
|
|
6
|
-
readonly block: {
|
|
7
|
-
readonly display: "block";
|
|
8
|
-
};
|
|
9
|
-
readonly flex: {
|
|
10
|
-
readonly display: "flex";
|
|
11
|
-
readonly flex: 1;
|
|
12
|
-
};
|
|
13
|
-
readonly inlineFlex: {
|
|
14
|
-
readonly display: "inline-flex";
|
|
15
|
-
};
|
|
16
|
-
readonly absolute: {
|
|
17
|
-
readonly position: "absolute";
|
|
18
|
-
};
|
|
19
|
-
readonly relative: {
|
|
20
|
-
readonly position: "relative";
|
|
21
|
-
};
|
|
22
|
-
readonly fixed: {
|
|
23
|
-
readonly position: "fixed";
|
|
24
|
-
};
|
|
25
|
-
readonly sticky: {
|
|
26
|
-
readonly position: "sticky";
|
|
27
|
-
};
|
|
28
|
-
readonly inset: {
|
|
29
|
-
readonly top: 0;
|
|
30
|
-
readonly right: 0;
|
|
31
|
-
readonly bottom: 0;
|
|
32
|
-
readonly left: 0;
|
|
33
|
-
};
|
|
34
|
-
readonly insetX: {
|
|
35
|
-
readonly left: 0;
|
|
36
|
-
readonly right: 0;
|
|
37
|
-
};
|
|
38
|
-
readonly insetY: {
|
|
39
|
-
readonly top: 0;
|
|
40
|
-
readonly bottom: 0;
|
|
41
|
-
};
|
|
42
|
-
readonly hidden: {
|
|
43
|
-
readonly display: "none";
|
|
44
|
-
};
|
|
45
|
-
readonly full: {
|
|
46
|
-
readonly width: "100%";
|
|
47
|
-
readonly height: "100%";
|
|
48
|
-
};
|
|
49
|
-
readonly noWrap: {
|
|
50
|
-
readonly whiteSpace: "nowrap";
|
|
51
|
-
};
|
|
52
|
-
readonly fullWidth: {
|
|
53
|
-
readonly width: "100%";
|
|
54
|
-
};
|
|
55
|
-
readonly fullHeight: {
|
|
56
|
-
readonly height: "100%";
|
|
57
|
-
};
|
|
58
|
-
readonly fullView: {
|
|
59
|
-
readonly width: "100vw";
|
|
60
|
-
readonly height: "calc(100vh - calc(100vh - 100%))";
|
|
61
|
-
};
|
|
62
|
-
readonly fullViewWidth: {
|
|
63
|
-
readonly width: "100vw";
|
|
64
|
-
};
|
|
65
|
-
readonly fullViewHeight: {
|
|
66
|
-
readonly height: "calc(100vh - calc(100vh - 100%))";
|
|
67
|
-
};
|
|
68
|
-
readonly whole: {
|
|
69
|
-
readonly top: 0;
|
|
70
|
-
readonly bottom: 0;
|
|
71
|
-
readonly left: 0;
|
|
72
|
-
readonly right: 0;
|
|
73
|
-
};
|
|
74
|
-
readonly centerRow: {
|
|
75
|
-
readonly display: "flex";
|
|
76
|
-
readonly flexDirection: "row";
|
|
77
|
-
readonly alignItems: "center";
|
|
78
|
-
};
|
|
79
|
-
readonly row: {
|
|
80
|
-
readonly display: "flex";
|
|
81
|
-
readonly flexDirection: "row";
|
|
82
|
-
};
|
|
83
|
-
readonly listStyles: {
|
|
84
|
-
readonly overflow: "auto";
|
|
85
|
-
};
|
|
86
|
-
readonly column: {
|
|
87
|
-
readonly flexDirection: "column";
|
|
88
|
-
};
|
|
89
|
-
readonly center: {
|
|
90
|
-
readonly alignItems: "center";
|
|
91
|
-
readonly justifyContent: "center";
|
|
92
|
-
};
|
|
93
|
-
readonly alignStart: {
|
|
94
|
-
readonly alignItems: "flex-start";
|
|
95
|
-
};
|
|
96
|
-
readonly alignEnd: {
|
|
97
|
-
readonly alignItems: "flex-end";
|
|
98
|
-
};
|
|
99
|
-
readonly alignCenter: {
|
|
100
|
-
readonly alignItems: "center";
|
|
101
|
-
};
|
|
102
|
-
readonly alignStretch: {
|
|
103
|
-
readonly alignItems: "stretch";
|
|
104
|
-
};
|
|
105
|
-
readonly alignSelfCenter: {
|
|
106
|
-
readonly alignSelf: "center";
|
|
107
|
-
};
|
|
108
|
-
readonly alignSelfStart: {
|
|
109
|
-
readonly alignSelf: "flex-start";
|
|
110
|
-
};
|
|
111
|
-
readonly alignSelfStretch: {
|
|
112
|
-
readonly alignSelf: "stretch";
|
|
113
|
-
};
|
|
114
|
-
readonly alignSelfEnd: {
|
|
115
|
-
readonly alignSelf: "flex-end";
|
|
116
|
-
};
|
|
117
|
-
readonly justifyStart: {
|
|
118
|
-
readonly justifyContent: "flex-start";
|
|
119
|
-
};
|
|
120
|
-
readonly justifyEnd: {
|
|
121
|
-
readonly justifyContent: "flex-end";
|
|
122
|
-
};
|
|
123
|
-
readonly justifyCenter: {
|
|
124
|
-
readonly justifyContent: "center";
|
|
125
|
-
};
|
|
126
|
-
readonly justifySpaceBetween: {
|
|
127
|
-
readonly justifyContent: "space-between";
|
|
128
|
-
};
|
|
129
|
-
readonly justifySpaceAround: {
|
|
130
|
-
readonly justifyContent: "space-around";
|
|
131
|
-
};
|
|
132
|
-
readonly textRight: {
|
|
133
|
-
readonly textAlign: "right";
|
|
134
|
-
};
|
|
135
|
-
readonly textLeft: {
|
|
136
|
-
readonly textAlign: "left";
|
|
137
|
-
};
|
|
138
|
-
readonly textCenter: {
|
|
139
|
-
readonly textAlign: "center";
|
|
140
|
-
};
|
|
141
|
-
readonly blur: {
|
|
142
|
-
readonly backdropFilter: "blur(4px)";
|
|
143
|
-
readonly '-webkit-backdrop-filter': "blur(4px)";
|
|
144
|
-
readonly transition: "500ms";
|
|
145
|
-
};
|
|
146
|
-
readonly elevated: {
|
|
147
|
-
readonly boxShadow: "0px 0px 16px 16px #aaaaaa1a";
|
|
148
|
-
};
|
|
149
|
-
readonly neumorphism: {
|
|
150
|
-
readonly boxShadow: "10px 10px 20px 0 #AEAEC077, -10px -10px 20px 0 #fff";
|
|
151
|
-
};
|
|
152
|
-
readonly scrollX: {
|
|
153
|
-
readonly overflowX: "auto";
|
|
154
|
-
};
|
|
155
|
-
readonly scrollY: {
|
|
156
|
-
readonly overflowY: "auto";
|
|
157
|
-
};
|
|
158
|
-
readonly scrollXY: {
|
|
159
|
-
readonly overflowX: "auto";
|
|
160
|
-
readonly overflowY: "auto";
|
|
161
|
-
};
|
|
162
|
-
readonly wrap: {
|
|
163
|
-
readonly flexWrap: "wrap";
|
|
164
|
-
};
|
|
165
|
-
readonly debRed: {
|
|
166
|
-
readonly backgroundColor: "#f00";
|
|
167
|
-
};
|
|
168
|
-
readonly debGreen: {
|
|
169
|
-
readonly backgroundColor: "#0f0";
|
|
170
|
-
};
|
|
171
|
-
readonly debBlue: {
|
|
172
|
-
readonly backgroundColor: "#00f";
|
|
173
|
-
};
|
|
174
|
-
readonly debYellow: {
|
|
175
|
-
readonly backgroundColor: "#f9e902";
|
|
176
|
-
};
|
|
177
|
-
};
|
|
178
|
-
export type DefaultVariants = Record<keyof typeof defaultVariants, ICSS>;
|
|
@@ -1,179 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.defaultVariants = void 0;
|
|
4
|
-
exports.defaultVariants = {
|
|
5
|
-
inline: {
|
|
6
|
-
display: 'inline-block',
|
|
7
|
-
},
|
|
8
|
-
block: {
|
|
9
|
-
display: 'block',
|
|
10
|
-
},
|
|
11
|
-
flex: {
|
|
12
|
-
display: 'flex',
|
|
13
|
-
flex: 1,
|
|
14
|
-
},
|
|
15
|
-
inlineFlex: {
|
|
16
|
-
display: 'inline-flex',
|
|
17
|
-
},
|
|
18
|
-
absolute: {
|
|
19
|
-
position: 'absolute',
|
|
20
|
-
},
|
|
21
|
-
relative: {
|
|
22
|
-
position: 'relative',
|
|
23
|
-
},
|
|
24
|
-
fixed: {
|
|
25
|
-
position: 'fixed',
|
|
26
|
-
},
|
|
27
|
-
sticky: {
|
|
28
|
-
position: 'sticky',
|
|
29
|
-
},
|
|
30
|
-
inset: {
|
|
31
|
-
top: 0,
|
|
32
|
-
right: 0,
|
|
33
|
-
bottom: 0,
|
|
34
|
-
left: 0,
|
|
35
|
-
},
|
|
36
|
-
insetX: {
|
|
37
|
-
left: 0,
|
|
38
|
-
right: 0,
|
|
39
|
-
},
|
|
40
|
-
insetY: {
|
|
41
|
-
top: 0,
|
|
42
|
-
bottom: 0,
|
|
43
|
-
},
|
|
44
|
-
hidden: {
|
|
45
|
-
display: 'none',
|
|
46
|
-
},
|
|
47
|
-
full: {
|
|
48
|
-
width: '100%',
|
|
49
|
-
height: '100%',
|
|
50
|
-
},
|
|
51
|
-
noWrap: {
|
|
52
|
-
whiteSpace: 'nowrap',
|
|
53
|
-
},
|
|
54
|
-
fullWidth: {
|
|
55
|
-
width: '100%',
|
|
56
|
-
},
|
|
57
|
-
fullHeight: {
|
|
58
|
-
height: '100%',
|
|
59
|
-
},
|
|
60
|
-
fullView: {
|
|
61
|
-
width: '100vw',
|
|
62
|
-
height: 'calc(100vh - calc(100vh - 100%))',
|
|
63
|
-
},
|
|
64
|
-
fullViewWidth: {
|
|
65
|
-
width: '100vw',
|
|
66
|
-
},
|
|
67
|
-
fullViewHeight: {
|
|
68
|
-
height: 'calc(100vh - calc(100vh - 100%))',
|
|
69
|
-
},
|
|
70
|
-
whole: {
|
|
71
|
-
top: 0,
|
|
72
|
-
bottom: 0,
|
|
73
|
-
left: 0,
|
|
74
|
-
right: 0,
|
|
75
|
-
},
|
|
76
|
-
centerRow: {
|
|
77
|
-
display: 'flex',
|
|
78
|
-
flexDirection: 'row',
|
|
79
|
-
alignItems: 'center',
|
|
80
|
-
},
|
|
81
|
-
row: {
|
|
82
|
-
display: 'flex',
|
|
83
|
-
flexDirection: 'row',
|
|
84
|
-
},
|
|
85
|
-
listStyles: {
|
|
86
|
-
overflow: 'auto',
|
|
87
|
-
},
|
|
88
|
-
column: {
|
|
89
|
-
flexDirection: 'column',
|
|
90
|
-
},
|
|
91
|
-
center: {
|
|
92
|
-
alignItems: 'center',
|
|
93
|
-
justifyContent: 'center',
|
|
94
|
-
},
|
|
95
|
-
alignStart: {
|
|
96
|
-
alignItems: 'flex-start',
|
|
97
|
-
},
|
|
98
|
-
alignEnd: {
|
|
99
|
-
alignItems: 'flex-end',
|
|
100
|
-
},
|
|
101
|
-
alignCenter: {
|
|
102
|
-
alignItems: 'center',
|
|
103
|
-
},
|
|
104
|
-
alignStretch: {
|
|
105
|
-
alignItems: 'stretch',
|
|
106
|
-
},
|
|
107
|
-
alignSelfCenter: {
|
|
108
|
-
alignSelf: 'center',
|
|
109
|
-
},
|
|
110
|
-
alignSelfStart: {
|
|
111
|
-
alignSelf: 'flex-start',
|
|
112
|
-
},
|
|
113
|
-
alignSelfStretch: {
|
|
114
|
-
alignSelf: 'stretch',
|
|
115
|
-
},
|
|
116
|
-
alignSelfEnd: {
|
|
117
|
-
alignSelf: 'flex-end',
|
|
118
|
-
},
|
|
119
|
-
justifyStart: {
|
|
120
|
-
justifyContent: 'flex-start',
|
|
121
|
-
},
|
|
122
|
-
justifyEnd: {
|
|
123
|
-
justifyContent: 'flex-end',
|
|
124
|
-
},
|
|
125
|
-
justifyCenter: {
|
|
126
|
-
justifyContent: 'center',
|
|
127
|
-
},
|
|
128
|
-
justifySpaceBetween: {
|
|
129
|
-
justifyContent: 'space-between',
|
|
130
|
-
},
|
|
131
|
-
justifySpaceAround: {
|
|
132
|
-
justifyContent: 'space-around',
|
|
133
|
-
},
|
|
134
|
-
textRight: {
|
|
135
|
-
textAlign: 'right',
|
|
136
|
-
},
|
|
137
|
-
textLeft: {
|
|
138
|
-
textAlign: 'left',
|
|
139
|
-
},
|
|
140
|
-
textCenter: {
|
|
141
|
-
textAlign: 'center',
|
|
142
|
-
},
|
|
143
|
-
blur: {
|
|
144
|
-
backdropFilter: 'blur(4px)',
|
|
145
|
-
'-webkit-backdrop-filter': 'blur(4px)',
|
|
146
|
-
transition: '500ms',
|
|
147
|
-
},
|
|
148
|
-
elevated: {
|
|
149
|
-
boxShadow: '0px 0px 16px 16px #aaaaaa1a',
|
|
150
|
-
},
|
|
151
|
-
neumorphism: {
|
|
152
|
-
boxShadow: '10px 10px 20px 0 #AEAEC077, -10px -10px 20px 0 #fff',
|
|
153
|
-
},
|
|
154
|
-
scrollX: {
|
|
155
|
-
overflowX: 'auto',
|
|
156
|
-
},
|
|
157
|
-
scrollY: {
|
|
158
|
-
overflowY: 'auto',
|
|
159
|
-
},
|
|
160
|
-
scrollXY: {
|
|
161
|
-
overflowX: 'auto',
|
|
162
|
-
overflowY: 'auto',
|
|
163
|
-
},
|
|
164
|
-
wrap: {
|
|
165
|
-
flexWrap: 'wrap',
|
|
166
|
-
},
|
|
167
|
-
debRed: {
|
|
168
|
-
backgroundColor: '#f00',
|
|
169
|
-
},
|
|
170
|
-
debGreen: {
|
|
171
|
-
backgroundColor: '#0f0',
|
|
172
|
-
},
|
|
173
|
-
debBlue: {
|
|
174
|
-
backgroundColor: '#00f',
|
|
175
|
-
},
|
|
176
|
-
debYellow: {
|
|
177
|
-
backgroundColor: '#f9e902',
|
|
178
|
-
},
|
|
179
|
-
};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { IBorderRadius, IColors } from '../types';
|
|
2
|
-
export type VariantFunction = (value: any) => any;
|
|
3
|
-
export declare const colorVariants: readonly ["backgroundColor", "color"];
|
|
4
|
-
export declare const borderXDirection: readonly ["left", "right"];
|
|
5
|
-
export declare const borderYDirection: readonly ["bottom", "top"];
|
|
6
|
-
export declare const borderDirection: readonly ["bottom", "top", "left", "right", ""];
|
|
7
|
-
export declare const borderProperties: readonly ["color", "radius", "width"];
|
|
8
|
-
export declare const cursorTypes: readonly ["not-allowed", "help", "pointer", "wait", ""];
|
|
9
|
-
export type Value = number | '';
|
|
10
|
-
export type DynamicVariants = `${typeof colorVariants[number]}:${keyof IColors}` | `border${Capitalize<typeof borderDirection[number]>}Width:${keyof IBorderRadius}` | `border${Capitalize<typeof borderDirection[number]>}Color:${keyof IColors}` | `borderRadius:${keyof IBorderRadius}` | `border${Capitalize<typeof borderYDirection[number]>}${Capitalize<typeof borderXDirection[number]>}Radius:${keyof IBorderRadius}` | `cursor:${typeof cursorTypes[number]}` | `bg:${keyof IColors}` | `scale:${Value}`;
|
|
11
|
-
export declare const createDynamicVariants: () => {};
|
|
12
|
-
export declare const dynamicVariants: {};
|
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __read = (this && this.__read) || function (o, n) {
|
|
3
|
-
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
4
|
-
if (!m) return o;
|
|
5
|
-
var i = m.call(o), r, ar = [], e;
|
|
6
|
-
try {
|
|
7
|
-
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
8
|
-
}
|
|
9
|
-
catch (error) { e = { error: error }; }
|
|
10
|
-
finally {
|
|
11
|
-
try {
|
|
12
|
-
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
13
|
-
}
|
|
14
|
-
finally { if (e) throw e.error; }
|
|
15
|
-
}
|
|
16
|
-
return ar;
|
|
17
|
-
};
|
|
18
|
-
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
19
|
-
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
20
|
-
if (ar || !(i in from)) {
|
|
21
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
22
|
-
ar[i] = from[i];
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
return to.concat(ar || Array.prototype.slice.call(from));
|
|
26
|
-
};
|
|
27
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
|
-
exports.dynamicVariants = exports.createDynamicVariants = exports.cursorTypes = exports.borderProperties = exports.borderDirection = exports.borderYDirection = exports.borderXDirection = exports.colorVariants = void 0;
|
|
29
|
-
var utils_1 = require("./utils");
|
|
30
|
-
exports.colorVariants = ['backgroundColor', 'color'];
|
|
31
|
-
exports.borderXDirection = ['left', 'right'];
|
|
32
|
-
exports.borderYDirection = ['bottom', 'top'];
|
|
33
|
-
exports.borderDirection = __spreadArray(__spreadArray(__spreadArray([], __read(exports.borderYDirection), false), __read(exports.borderXDirection), false), [''], false);
|
|
34
|
-
exports.borderProperties = ['color', 'radius', 'width'];
|
|
35
|
-
exports.cursorTypes = [
|
|
36
|
-
'not-allowed',
|
|
37
|
-
'help',
|
|
38
|
-
'pointer',
|
|
39
|
-
'wait',
|
|
40
|
-
''
|
|
41
|
-
];
|
|
42
|
-
var createDynamicVariants = function () {
|
|
43
|
-
var dynamicVariants = {};
|
|
44
|
-
function createVariant(variantName, variantReturn) {
|
|
45
|
-
dynamicVariants[variantName] = variantReturn;
|
|
46
|
-
}
|
|
47
|
-
exports.colorVariants.forEach(function (variant) {
|
|
48
|
-
createVariant(variant, function (theme, color) {
|
|
49
|
-
var _a;
|
|
50
|
-
return (_a = {},
|
|
51
|
-
_a[variant] = theme['colors'][color],
|
|
52
|
-
_a);
|
|
53
|
-
});
|
|
54
|
-
});
|
|
55
|
-
exports.borderDirection.forEach(function (direction) {
|
|
56
|
-
if (exports.borderYDirection.includes(direction)) {
|
|
57
|
-
exports.borderXDirection.forEach(function (y) {
|
|
58
|
-
var variant = "border".concat((0, utils_1.capitalize)(direction)).concat((0, utils_1.capitalize)(y), "Radius");
|
|
59
|
-
createVariant(variant, function (theme, value) {
|
|
60
|
-
var _a;
|
|
61
|
-
return (_a = {},
|
|
62
|
-
_a[variant] = theme['borderRadius'][value],
|
|
63
|
-
_a);
|
|
64
|
-
});
|
|
65
|
-
});
|
|
66
|
-
}
|
|
67
|
-
exports.borderProperties.forEach(function (property) {
|
|
68
|
-
var variant = "border".concat((0, utils_1.capitalize)(direction)).concat((0, utils_1.capitalize)(property));
|
|
69
|
-
createVariant(variant, function (theme, value) {
|
|
70
|
-
var _a;
|
|
71
|
-
return (_a = {},
|
|
72
|
-
_a[variant] = property == 'color' ? theme['colors'][value] : theme['borderRadius'][value],
|
|
73
|
-
_a);
|
|
74
|
-
});
|
|
75
|
-
});
|
|
76
|
-
});
|
|
77
|
-
createVariant('cursor', function (theme, cursor) { return ({ cursor: cursor }); });
|
|
78
|
-
createVariant('bg', function (theme, color) { return ({
|
|
79
|
-
backgroundColor: theme['colors'][color]
|
|
80
|
-
}); });
|
|
81
|
-
createVariant('effect', function (theme, effect) { return theme['effects'][effect]; });
|
|
82
|
-
createVariant('scale', function (theme, value) { return ({
|
|
83
|
-
transform: typeof localStorage !== 'undefined' ? "scale(".concat(value, ")") : [{ 'scale': Number(value) }]
|
|
84
|
-
}); });
|
|
85
|
-
return dynamicVariants;
|
|
86
|
-
};
|
|
87
|
-
exports.createDynamicVariants = createDynamicVariants;
|
|
88
|
-
exports.dynamicVariants = (0, exports.createDynamicVariants)();
|
package/dist/lib/hashKey.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const hashKey: (value: Array<any>) => string;
|
package/dist/lib/hashKey.js
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var _a;
|
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.hashKey = void 0;
|
|
5
|
-
var js_sha256_1 = require("js-sha256");
|
|
6
|
-
var styleKey = '@styles-version';
|
|
7
|
-
var version = (_a = require('../../package.json')) === null || _a === void 0 ? void 0 : _a.version;
|
|
8
|
-
var hashKey = function (value) {
|
|
9
|
-
var _a;
|
|
10
|
-
value.push((_a = {}, _a[styleKey] = version, _a));
|
|
11
|
-
var str = JSON.stringify(value);
|
|
12
|
-
return (0, js_sha256_1.sha256)(str);
|
|
13
|
-
};
|
|
14
|
-
exports.hashKey = hashKey;
|
package/dist/lib/hooks.d.ts
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { ICSS } from '../types';
|
|
2
|
-
import { ThemeStore } from './themeStore';
|
|
3
|
-
export declare const useStyleObserver: (style: any) => any;
|
|
4
|
-
export declare function useNestedStylesByKey<T extends string>(match: string, componentStyles: Partial<Record<T, ICSS>>): {};
|
|
5
|
-
type ThemeSelector<T extends Record<string, any>> = (store: ThemeStore) => T;
|
|
6
|
-
export declare const useTheme: <T extends Record<string, any>>(selector: ThemeSelector<T>) => T;
|
|
7
|
-
export declare function useCompositionStyles<T extends string, C extends string>(composition: Array<T>, componentStyles: Partial<Record<C, ICSS>>): Partial<Record<T, ICSS>>;
|
|
8
|
-
export {};
|
package/dist/lib/hooks.js
DELETED
|
@@ -1,76 +0,0 @@
|
|
|
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
|
-
var __values = (this && this.__values) || function(o) {
|
|
14
|
-
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
|
|
15
|
-
if (m) return m.call(o);
|
|
16
|
-
if (o && typeof o.length === "number") return {
|
|
17
|
-
next: function () {
|
|
18
|
-
if (o && i >= o.length) o = void 0;
|
|
19
|
-
return { value: o && o[i++], done: !o };
|
|
20
|
-
}
|
|
21
|
-
};
|
|
22
|
-
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
|
|
23
|
-
};
|
|
24
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
|
-
exports.useCompositionStyles = exports.useTheme = exports.useNestedStylesByKey = exports.useStyleObserver = void 0;
|
|
26
|
-
var react_1 = require("react");
|
|
27
|
-
var utils_1 = require("./utils");
|
|
28
|
-
var shallow_1 = require("zustand/react/shallow");
|
|
29
|
-
var themeStore_1 = require("./themeStore");
|
|
30
|
-
var useStyleObserver = function (style) {
|
|
31
|
-
return (0, react_1.useMemo)(function () {
|
|
32
|
-
if (Array.isArray(style)) {
|
|
33
|
-
return JSON.stringify(style === null || style === void 0 ? void 0 : style.filter(function (v) { return !!v; }));
|
|
34
|
-
}
|
|
35
|
-
else if (typeof style === 'object') {
|
|
36
|
-
return JSON.stringify(style);
|
|
37
|
-
}
|
|
38
|
-
else {
|
|
39
|
-
return style;
|
|
40
|
-
}
|
|
41
|
-
}, [style]);
|
|
42
|
-
};
|
|
43
|
-
exports.useStyleObserver = useStyleObserver;
|
|
44
|
-
function useNestedStylesByKey(match, componentStyles) {
|
|
45
|
-
var styles = __assign({}, componentStyles);
|
|
46
|
-
return (0, react_1.useMemo)(function () {
|
|
47
|
-
return (0, utils_1.getNestedStylesByKey)(match, styles);
|
|
48
|
-
}, [styles]);
|
|
49
|
-
}
|
|
50
|
-
exports.useNestedStylesByKey = useNestedStylesByKey;
|
|
51
|
-
var useTheme = function (selector) {
|
|
52
|
-
return (0, themeStore_1.themeStore)((0, shallow_1.useShallow)(selector));
|
|
53
|
-
};
|
|
54
|
-
exports.useTheme = useTheme;
|
|
55
|
-
function useCompositionStyles(composition, componentStyles) {
|
|
56
|
-
var styles = __assign({}, componentStyles);
|
|
57
|
-
return (0, react_1.useMemo)(function () {
|
|
58
|
-
var e_1, _a;
|
|
59
|
-
var compositionStyles = {};
|
|
60
|
-
try {
|
|
61
|
-
for (var composition_1 = __values(composition), composition_1_1 = composition_1.next(); !composition_1_1.done; composition_1_1 = composition_1.next()) {
|
|
62
|
-
var element = composition_1_1.value;
|
|
63
|
-
compositionStyles[element] = (0, utils_1.getNestedStylesByKey)(element, styles);
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
67
|
-
finally {
|
|
68
|
-
try {
|
|
69
|
-
if (composition_1_1 && !composition_1_1.done && (_a = composition_1.return)) _a.call(composition_1);
|
|
70
|
-
}
|
|
71
|
-
finally { if (e_1) throw e_1.error; }
|
|
72
|
-
}
|
|
73
|
-
return compositionStyles;
|
|
74
|
-
}, [styles]);
|
|
75
|
-
}
|
|
76
|
-
exports.useCompositionStyles = useCompositionStyles;
|
package/dist/lib/index.d.ts
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
export { validateTheme } from './validateTheme';
|
|
2
|
-
export { themeStore } from './themeStore';
|
|
3
|
-
export { createTheme } from './createTheme';
|
|
4
|
-
export { createAppVariants } from './createAppVariants';
|
|
5
|
-
export { createStyles } from './createStyles';
|
|
6
|
-
export { getNestedStylesByKey, mergeStyles, concatStyles } from './utils';
|
|
7
|
-
export { CodeleapStyleRegistry } from './StyleRegistry';
|
|
8
|
-
export { StylePersistor } from './StylePersistor';
|
|
9
|
-
export * from './constants';
|
|
10
|
-
export * from './hooks';
|
package/dist/lib/index.js
DELETED
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.StylePersistor = exports.CodeleapStyleRegistry = exports.concatStyles = exports.mergeStyles = exports.getNestedStylesByKey = exports.createStyles = exports.createAppVariants = exports.createTheme = exports.themeStore = exports.validateTheme = void 0;
|
|
18
|
-
var validateTheme_1 = require("./validateTheme");
|
|
19
|
-
Object.defineProperty(exports, "validateTheme", { enumerable: true, get: function () { return validateTheme_1.validateTheme; } });
|
|
20
|
-
var themeStore_1 = require("./themeStore");
|
|
21
|
-
Object.defineProperty(exports, "themeStore", { enumerable: true, get: function () { return themeStore_1.themeStore; } });
|
|
22
|
-
var createTheme_1 = require("./createTheme");
|
|
23
|
-
Object.defineProperty(exports, "createTheme", { enumerable: true, get: function () { return createTheme_1.createTheme; } });
|
|
24
|
-
var createAppVariants_1 = require("./createAppVariants");
|
|
25
|
-
Object.defineProperty(exports, "createAppVariants", { enumerable: true, get: function () { return createAppVariants_1.createAppVariants; } });
|
|
26
|
-
var createStyles_1 = require("./createStyles");
|
|
27
|
-
Object.defineProperty(exports, "createStyles", { enumerable: true, get: function () { return createStyles_1.createStyles; } });
|
|
28
|
-
var utils_1 = require("./utils");
|
|
29
|
-
Object.defineProperty(exports, "getNestedStylesByKey", { enumerable: true, get: function () { return utils_1.getNestedStylesByKey; } });
|
|
30
|
-
Object.defineProperty(exports, "mergeStyles", { enumerable: true, get: function () { return utils_1.mergeStyles; } });
|
|
31
|
-
Object.defineProperty(exports, "concatStyles", { enumerable: true, get: function () { return utils_1.concatStyles; } });
|
|
32
|
-
var StyleRegistry_1 = require("./StyleRegistry");
|
|
33
|
-
Object.defineProperty(exports, "CodeleapStyleRegistry", { enumerable: true, get: function () { return StyleRegistry_1.CodeleapStyleRegistry; } });
|
|
34
|
-
var StylePersistor_1 = require("./StylePersistor");
|
|
35
|
-
Object.defineProperty(exports, "StylePersistor", { enumerable: true, get: function () { return StylePersistor_1.StylePersistor; } });
|
|
36
|
-
__exportStar(require("./constants"), exports);
|
|
37
|
-
__exportStar(require("./hooks"), exports);
|