@codeleap/styles 7.0.1 → 7.0.2
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/dist/classes/Cacher.js +10 -6
- package/dist/classes/Cacher.js.map +1 -1
- package/dist/classes/StaleControl.js +5 -1
- package/dist/classes/StaleControl.js.map +1 -1
- package/dist/classes/StyleCache.js +20 -16
- package/dist/classes/StyleCache.js.map +1 -1
- package/dist/classes/StylePersistor.js +10 -6
- package/dist/classes/StylePersistor.js.map +1 -1
- package/dist/classes/StyleRegistry.js +39 -35
- package/dist/classes/StyleRegistry.js.map +1 -1
- package/dist/classes/index.js +18 -2
- package/dist/classes/index.js.map +1 -1
- package/dist/constants.js +4 -1
- package/dist/constants.js.map +1 -1
- package/dist/hooks/index.js +20 -4
- package/dist/hooks/index.js.map +1 -1
- package/dist/hooks/useCompositionStyles.js +9 -6
- package/dist/hooks/useCompositionStyles.js.map +1 -1
- package/dist/hooks/useNestedStylesByKey.js +8 -5
- package/dist/hooks/useNestedStylesByKey.js.map +1 -1
- package/dist/hooks/useStyleObserver.js +7 -3
- package/dist/hooks/useStyleObserver.js.map +1 -1
- package/dist/hooks/useTheme.js +8 -4
- package/dist/hooks/useTheme.js.map +1 -1
- package/dist/index.js +27 -11
- package/dist/index.js.map +1 -1
- package/dist/lib/calc.js +5 -1
- package/dist/lib/calc.js.map +1 -1
- package/dist/lib/createStyles.js +12 -7
- package/dist/lib/createStyles.js.map +1 -1
- package/dist/lib/createTheme.js +34 -30
- package/dist/lib/createTheme.js.map +1 -1
- package/dist/lib/cssVariables.js +11 -5
- package/dist/lib/cssVariables.js.map +1 -1
- package/dist/lib/index.js +17 -4
- package/dist/lib/index.js.map +1 -1
- package/dist/theme/generateColorScheme.js +8 -5
- package/dist/theme/generateColorScheme.js.map +1 -1
- package/dist/theme/index.js +19 -3
- package/dist/theme/index.js.map +1 -1
- package/dist/theme/themeStore.d.ts +4 -4
- package/dist/theme/themeStore.d.ts.map +1 -1
- package/dist/theme/themeStore.js +14 -10
- package/dist/theme/themeStore.js.map +1 -1
- package/dist/theme/validateTheme.js +4 -1
- package/dist/theme/validateTheme.js.map +1 -1
- package/dist/tools/colors.js +16 -7
- package/dist/tools/colors.js.map +1 -1
- package/dist/tools/deepClone.js +8 -2
- package/dist/tools/deepClone.js.map +1 -1
- package/dist/tools/deepmerge.js +8 -1
- package/dist/tools/deepmerge.js.map +1 -1
- package/dist/tools/hashKey.js +7 -3
- package/dist/tools/hashKey.js.map +1 -1
- package/dist/tools/index.js +45 -6
- package/dist/tools/index.js.map +1 -1
- package/dist/tools/minifier.js +11 -6
- package/dist/tools/minifier.js.map +1 -1
- package/dist/tools/multiplierProperty.js +4 -1
- package/dist/tools/multiplierProperty.js.map +1 -1
- package/dist/types/cache.js +2 -1
- package/dist/types/component.js +2 -1
- package/dist/types/core.js +2 -1
- package/dist/types/core.js.map +1 -1
- package/dist/types/icon.js +2 -1
- package/dist/types/icon.js.map +1 -1
- package/dist/types/index.js +21 -5
- package/dist/types/index.js.map +1 -1
- package/dist/types/spacing.js +5 -2
- package/dist/types/spacing.js.map +1 -1
- package/dist/types/store.js +2 -1
- package/dist/types/style.js +2 -1
- package/dist/types/theme.js +2 -1
- package/dist/utils.js +23 -15
- package/dist/utils.js.map +1 -1
- package/dist/variants/borderCreator.js +9 -5
- package/dist/variants/borderCreator.js.map +1 -1
- package/dist/variants/createAppVariants.js +6 -3
- package/dist/variants/createAppVariants.js.map +1 -1
- package/dist/variants/defaultVariants.js +4 -1
- package/dist/variants/defaultVariants.js.map +1 -1
- package/dist/variants/dynamicVariants.js +24 -20
- package/dist/variants/dynamicVariants.js.map +1 -1
- package/dist/variants/index.js +22 -6
- package/dist/variants/index.js.map +1 -1
- package/dist/variants/mediaQuery.js +4 -1
- package/dist/variants/mediaQuery.js.map +1 -1
- package/dist/variants/spacing.js +6 -3
- package/dist/variants/spacing.js.map +1 -1
- package/package.json +1 -1
package/dist/hooks/index.js
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
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
|
+
__exportStar(require("./useCompositionStyles"), exports);
|
|
18
|
+
__exportStar(require("./useNestedStylesByKey"), exports);
|
|
19
|
+
__exportStar(require("./useStyleObserver"), exports);
|
|
20
|
+
__exportStar(require("./useTheme"), exports);
|
|
5
21
|
//# sourceMappingURL=index.js.map
|
package/dist/hooks/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,yDAAsC;AACtC,yDAAsC;AACtC,qDAAkC;AAClC,6CAA0B"}
|
|
@@ -1,5 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useCompositionStyles = useCompositionStyles;
|
|
4
|
+
const react_1 = require("react");
|
|
5
|
+
const utils_1 = require("../utils");
|
|
3
6
|
/**
|
|
4
7
|
* Slices a flat component-style record into per-element sub-records, memoised to
|
|
5
8
|
* avoid unnecessary re-renders. For each element name in `composition`, it calls
|
|
@@ -9,17 +12,17 @@ import { getNestedStylesByKey } from '../utils';
|
|
|
9
12
|
* Useful when a parent component receives a merged `componentStyles` object and
|
|
10
13
|
* needs to distribute the correct slice to each child element.
|
|
11
14
|
*/
|
|
12
|
-
|
|
15
|
+
function useCompositionStyles(composition, componentStyles) {
|
|
13
16
|
const styles = Object.assign({}, componentStyles);
|
|
14
|
-
return useMemo(() => {
|
|
17
|
+
return (0, react_1.useMemo)(() => {
|
|
15
18
|
const compositionStyles = {};
|
|
16
19
|
if (Array.isArray(composition)) {
|
|
17
20
|
for (const element of composition) {
|
|
18
|
-
compositionStyles[element] = getNestedStylesByKey(element, styles);
|
|
21
|
+
compositionStyles[element] = (0, utils_1.getNestedStylesByKey)(element, styles);
|
|
19
22
|
}
|
|
20
23
|
}
|
|
21
24
|
else {
|
|
22
|
-
compositionStyles[composition] = getNestedStylesByKey(composition, styles);
|
|
25
|
+
compositionStyles[composition] = (0, utils_1.getNestedStylesByKey)(composition, styles);
|
|
23
26
|
}
|
|
24
27
|
return compositionStyles;
|
|
25
28
|
}, [styles]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCompositionStyles.js","sourceRoot":"","sources":["../../src/hooks/useCompositionStyles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useCompositionStyles.js","sourceRoot":"","sources":["../../src/hooks/useCompositionStyles.ts"],"names":[],"mappings":";;AAaA,oDAqBC;AAlCD,iCAA+B;AAE/B,oCAA+C;AAE/C;;;;;;;;GAQG;AACH,SAAgB,oBAAoB,CAClC,WAA2B,EAC3B,eAAyC;IAEzC,MAAM,MAAM,qBACP,eAAe,CACnB,CAAA;IAED,OAAO,IAAA,eAAO,EAAC,GAAG,EAAE;QAClB,MAAM,iBAAiB,GAAyB,EAAE,CAAA;QAElD,IAAI,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC;YAC/B,KAAK,MAAM,OAAO,IAAI,WAAW,EAAE,CAAC;gBAClC,iBAAiB,CAAC,OAAiB,CAAC,GAAG,IAAA,4BAAoB,EAAC,OAAO,EAAE,MAAM,CAAC,CAAA;YAC9E,CAAC;QACH,CAAC;aAAM,CAAC;YACN,iBAAiB,CAAC,WAAqB,CAAC,GAAG,IAAA,4BAAoB,EAAC,WAAW,EAAE,MAAM,CAAC,CAAA;QACtF,CAAC;QAED,OAAO,iBAA6C,CAAA;IACtD,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;AACd,CAAC"}
|
|
@@ -1,5 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useNestedStylesByKey = useNestedStylesByKey;
|
|
4
|
+
const react_1 = require("react");
|
|
5
|
+
const utils_1 = require("../utils");
|
|
3
6
|
/**
|
|
4
7
|
* Memoised wrapper around `getNestedStylesByKey`. Returns the sub-record of
|
|
5
8
|
* `componentStyles` whose keys start with `match`, with the prefix stripped and the
|
|
@@ -8,10 +11,10 @@ import { getNestedStylesByKey } from '../utils';
|
|
|
8
11
|
* Use instead of `useCompositionStyles` when you need the slice for a single element
|
|
9
12
|
* and don't want the overhead of iterating over an array.
|
|
10
13
|
*/
|
|
11
|
-
|
|
14
|
+
function useNestedStylesByKey(match, componentStyles) {
|
|
12
15
|
const styles = Object.assign({}, componentStyles);
|
|
13
|
-
return useMemo(() => {
|
|
14
|
-
return getNestedStylesByKey(match, styles);
|
|
16
|
+
return (0, react_1.useMemo)(() => {
|
|
17
|
+
return (0, utils_1.getNestedStylesByKey)(match, styles);
|
|
15
18
|
}, [styles]);
|
|
16
19
|
}
|
|
17
20
|
//# sourceMappingURL=useNestedStylesByKey.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useNestedStylesByKey.js","sourceRoot":"","sources":["../../src/hooks/useNestedStylesByKey.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useNestedStylesByKey.js","sourceRoot":"","sources":["../../src/hooks/useNestedStylesByKey.ts"],"names":[],"mappings":";;AAYA,oDAQC;AApBD,iCAA+B;AAE/B,oCAA+C;AAE/C;;;;;;;GAOG;AACH,SAAgB,oBAAoB,CAAmB,KAAa,EAAE,eAAyC;IAC7G,MAAM,MAAM,qBACP,eAAe,CACnB,CAAA;IAED,OAAO,IAAA,eAAO,EAAC,GAAG,EAAE;QAClB,OAAO,IAAA,4BAAoB,EAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IAC5C,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;AACd,CAAC"}
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useStyleObserver = void 0;
|
|
4
|
+
const react_1 = require("react");
|
|
2
5
|
/**
|
|
3
6
|
* Produces a stable string that changes only when the style value changes, suitable
|
|
4
7
|
* for use as a `useEffect`/`useMemo` dependency when the style prop is an object or
|
|
@@ -6,8 +9,8 @@ import { useMemo } from 'react';
|
|
|
6
9
|
* Falsy entries are stripped from arrays before serialisation, so `[null, style]` and
|
|
7
10
|
* `[style]` yield the same string.
|
|
8
11
|
*/
|
|
9
|
-
|
|
10
|
-
return useMemo(() => {
|
|
12
|
+
const useStyleObserver = (style) => {
|
|
13
|
+
return (0, react_1.useMemo)(() => {
|
|
11
14
|
if (Array.isArray(style)) {
|
|
12
15
|
return JSON.stringify(style === null || style === void 0 ? void 0 : style.filter(v => !!v));
|
|
13
16
|
}
|
|
@@ -19,4 +22,5 @@ export const useStyleObserver = (style) => {
|
|
|
19
22
|
}
|
|
20
23
|
}, [style]);
|
|
21
24
|
};
|
|
25
|
+
exports.useStyleObserver = useStyleObserver;
|
|
22
26
|
//# sourceMappingURL=useStyleObserver.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useStyleObserver.js","sourceRoot":"","sources":["../../src/hooks/useStyleObserver.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"useStyleObserver.js","sourceRoot":"","sources":["../../src/hooks/useStyleObserver.ts"],"names":[],"mappings":";;;AAAA,iCAA+B;AAE/B;;;;;;GAMG;AACI,MAAM,gBAAgB,GAAG,CAAC,KAAU,EAAE,EAAE;IAC7C,OAAO,IAAA,eAAO,EAAC,GAAG,EAAE;QAClB,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;YACzB,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QAChD,CAAC;aAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAC,CAAC;YACpC,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;QAC9B,CAAC;aAAM,CAAC;YACN,OAAO,KAAK,CAAA;QACd,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;AACb,CAAC,CAAA;AAVY,QAAA,gBAAgB,oBAU5B"}
|
package/dist/hooks/useTheme.js
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useTheme = void 0;
|
|
4
|
+
const theme_1 = require("../theme");
|
|
5
|
+
const react_1 = require("@nanostores/react");
|
|
3
6
|
/**
|
|
4
7
|
* Subscribes to the global theme state and returns either the full `ThemeState`
|
|
5
8
|
* (when called without arguments) or a derived value (when called with a selector).
|
|
@@ -14,11 +17,12 @@ import { useStore } from '@nanostores/react';
|
|
|
14
17
|
* // Derived slice — component only re-renders when colorScheme changes
|
|
15
18
|
* const colorScheme = useTheme(s => s.colorScheme)
|
|
16
19
|
*/
|
|
17
|
-
|
|
18
|
-
const state = useStore(themeStoreComputed);
|
|
20
|
+
const useTheme = (selector) => {
|
|
21
|
+
const state = (0, react_1.useStore)(theme_1.themeStoreComputed);
|
|
19
22
|
if (!selector) {
|
|
20
23
|
return state;
|
|
21
24
|
}
|
|
22
25
|
return selector(state);
|
|
23
26
|
};
|
|
27
|
+
exports.useTheme = useTheme;
|
|
24
28
|
//# sourceMappingURL=useTheme.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTheme.js","sourceRoot":"","sources":["../../src/hooks/useTheme.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"useTheme.js","sourceRoot":"","sources":["../../src/hooks/useTheme.ts"],"names":[],"mappings":";;;AAAA,oCAAyD;AACzD,6CAA4C;AAI5C;;;;;;;;;;;;;GAaG;AACI,MAAM,QAAQ,GAAG,CACtB,QAA2B,EACxB,EAAE;IACL,MAAM,KAAK,GAAG,IAAA,gBAAQ,EAAC,0BAAkB,CAAC,CAAA;IAE1C,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,KAAU,CAAA;IACnB,CAAC;IAED,OAAO,QAAQ,CAAC,KAAK,CAAC,CAAA;AACxB,CAAC,CAAA;AAVY,QAAA,QAAQ,YAUpB"}
|
package/dist/index.js
CHANGED
|
@@ -1,12 +1,28 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
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
|
+
require("./constants");
|
|
18
|
+
require("./utils");
|
|
19
|
+
__exportStar(require("./classes"), exports);
|
|
20
|
+
__exportStar(require("./hooks"), exports);
|
|
21
|
+
__exportStar(require("./lib"), exports);
|
|
22
|
+
__exportStar(require("./theme"), exports);
|
|
23
|
+
__exportStar(require("./tools"), exports);
|
|
24
|
+
__exportStar(require("./types"), exports);
|
|
25
|
+
__exportStar(require("./variants"), exports);
|
|
26
|
+
__exportStar(require("./constants"), exports);
|
|
27
|
+
__exportStar(require("./utils"), exports);
|
|
12
28
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,uBAAoB;AACpB,mBAAgB;AAEhB,4CAAyB;AACzB,0CAAuB;AACvB,wCAAqB;AACrB,0CAAuB;AACvB,0CAAuB;AACvB,0CAAuB;AACvB,6CAA0B;AAC1B,8CAA2B;AAC3B,0CAAuB"}
|
package/dist/lib/calc.js
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.calc = void 0;
|
|
1
4
|
/**
|
|
2
5
|
* Chainable builder for CSS `calc()` expressions. Each arithmetic method appends
|
|
3
6
|
* to the expression and returns `this`, so calls can be chained. Call `build()`
|
|
@@ -40,5 +43,6 @@ class CalcBuilder {
|
|
|
40
43
|
* and optional unit (default `'px'`), then chain `.add()`, `.sub()`, `.mult()`, `.div()`,
|
|
41
44
|
* and finally call `.build()` to get the complete string.
|
|
42
45
|
*/
|
|
43
|
-
|
|
46
|
+
const calc = (base, unit = 'px') => new CalcBuilder(base, unit);
|
|
47
|
+
exports.calc = calc;
|
|
44
48
|
//# sourceMappingURL=calc.js.map
|
package/dist/lib/calc.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calc.js","sourceRoot":"","sources":["../../src/lib/calc.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,MAAM,WAAW;IAGf,YAAY,OAAe,EAAE,OAAa,IAAI;QAC5C,IAAI,CAAC,UAAU,GAAG,GAAG,OAAO,GAAG,IAAI,EAAE,CAAA;IACvC,CAAC;IAEO,IAAI,CAAC,KAAa;QACxB,OAAO,IAAI,KAAK,GAAG,CAAA;IACrB,CAAC;IAED,GAAG,CAAC,KAAa,EAAE,OAAa,IAAI;QAClC,MAAM,GAAG,GAAG,GAAG,KAAK,GAAG,IAAI,EAAE,CAAA;QAC7B,IAAI,CAAC,UAAU,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAA;QACrE,OAAO,IAAI,CAAA;IACb,CAAC;IAED,GAAG,CAAC,KAAa,EAAE,OAAa,IAAI;QAClC,MAAM,GAAG,GAAG,GAAG,KAAK,GAAG,IAAI,EAAE,CAAA;QAC7B,IAAI,CAAC,UAAU,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAA;QACrE,OAAO,IAAI,CAAA;IACb,CAAC;IAED,IAAI,CAAC,KAAa;QAChB,IAAI,CAAC,UAAU,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,KAAK,EAAE,CAAA;QAC5D,OAAO,IAAI,CAAA;IACb,CAAC;IAED,GAAG,CAAC,KAAa;QACf,IAAI,CAAC,UAAU,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,KAAK,EAAE,CAAA;QAC5D,OAAO,IAAI,CAAA;IACb,CAAC;IAED,KAAK;QACH,OAAO,QAAQ,IAAI,CAAC,UAAU,GAAG,CAAA;IACnC,CAAC;CACF;AAED;;;;GAIG;
|
|
1
|
+
{"version":3,"file":"calc.js","sourceRoot":"","sources":["../../src/lib/calc.ts"],"names":[],"mappings":";;;AAEA;;;;;;;GAOG;AACH,MAAM,WAAW;IAGf,YAAY,OAAe,EAAE,OAAa,IAAI;QAC5C,IAAI,CAAC,UAAU,GAAG,GAAG,OAAO,GAAG,IAAI,EAAE,CAAA;IACvC,CAAC;IAEO,IAAI,CAAC,KAAa;QACxB,OAAO,IAAI,KAAK,GAAG,CAAA;IACrB,CAAC;IAED,GAAG,CAAC,KAAa,EAAE,OAAa,IAAI;QAClC,MAAM,GAAG,GAAG,GAAG,KAAK,GAAG,IAAI,EAAE,CAAA;QAC7B,IAAI,CAAC,UAAU,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAA;QACrE,OAAO,IAAI,CAAA;IACb,CAAC;IAED,GAAG,CAAC,KAAa,EAAE,OAAa,IAAI;QAClC,MAAM,GAAG,GAAG,GAAG,KAAK,GAAG,IAAI,EAAE,CAAA;QAC7B,IAAI,CAAC,UAAU,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAA;QACrE,OAAO,IAAI,CAAA;IACb,CAAC;IAED,IAAI,CAAC,KAAa;QAChB,IAAI,CAAC,UAAU,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,KAAK,EAAE,CAAA;QAC5D,OAAO,IAAI,CAAA;IACb,CAAC;IAED,GAAG,CAAC,KAAa;QACf,IAAI,CAAC,UAAU,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,KAAK,EAAE,CAAA;QAC5D,OAAO,IAAI,CAAA;IACb,CAAC;IAED,KAAK;QACH,OAAO,QAAQ,IAAI,CAAC,UAAU,GAAG,CAAA;IACnC,CAAC;CACF;AAED;;;;GAIG;AACI,MAAM,IAAI,GAAG,CAAC,IAAY,EAAE,OAAa,IAAI,EAAE,EAAE,CAAC,IAAI,WAAW,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;AAAvE,QAAA,IAAI,QAAmE"}
|
package/dist/lib/createStyles.js
CHANGED
|
@@ -1,11 +1,16 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.CONTEXT_FACTORY_SYMBOL = void 0;
|
|
4
|
+
exports.createStyles = createStyles;
|
|
5
|
+
exports.createStylesWithContext = createStylesWithContext;
|
|
6
|
+
const theme_1 = require("../theme");
|
|
2
7
|
/**
|
|
3
8
|
* Symbol used to attach a context-aware factory function to a styles proxy.
|
|
4
9
|
* `CodeleapStyleRegistry.registerVariants` reads this symbol from each entry to
|
|
5
10
|
* identify which variants require a `ComponentContext` at resolution time.
|
|
6
11
|
* Not intended for direct use by consumers.
|
|
7
12
|
*/
|
|
8
|
-
|
|
13
|
+
exports.CONTEXT_FACTORY_SYMBOL = Symbol('contextFactory');
|
|
9
14
|
/**
|
|
10
15
|
* Creates a reactive styles object that automatically updates when theme changes.
|
|
11
16
|
* Uses a proxy to re-compute styles on each access, ensuring theme changes are reflected.
|
|
@@ -15,9 +20,9 @@ export const CONTEXT_FACTORY_SYMBOL = Symbol('contextFactory');
|
|
|
15
20
|
* @param {StylesShape<K, V> | ((theme: ITheme) => StylesShape<K, V>)} styles - Static styles object or function that receives theme
|
|
16
21
|
* @returns {StylesShape<K, V>} Proxied styles object that recomputes on theme changes
|
|
17
22
|
*/
|
|
18
|
-
|
|
23
|
+
function createStyles(styles) {
|
|
19
24
|
const compute = () => {
|
|
20
|
-
const current = themeStore.theme;
|
|
25
|
+
const current = theme_1.themeStore.theme;
|
|
21
26
|
if (typeof styles === 'function') {
|
|
22
27
|
return !current ? {} : styles(current);
|
|
23
28
|
}
|
|
@@ -42,14 +47,14 @@ export function createStyles(styles) {
|
|
|
42
47
|
* getter so the registry can invoke the factory with the actual context at render time.
|
|
43
48
|
* Use this instead of `createStyles` when variant styles depend on component state.
|
|
44
49
|
*/
|
|
45
|
-
|
|
50
|
+
function createStylesWithContext(styles) {
|
|
46
51
|
const compute = (context = {}) => {
|
|
47
|
-
const current = themeStore.theme;
|
|
52
|
+
const current = theme_1.themeStore.theme;
|
|
48
53
|
return !current ? {} : styles(current, context);
|
|
49
54
|
};
|
|
50
55
|
return new Proxy(compute(), {
|
|
51
56
|
get(target, prop) {
|
|
52
|
-
if (prop === CONTEXT_FACTORY_SYMBOL)
|
|
57
|
+
if (prop === exports.CONTEXT_FACTORY_SYMBOL)
|
|
53
58
|
return styles;
|
|
54
59
|
return compute()[prop];
|
|
55
60
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createStyles.js","sourceRoot":"","sources":["../../src/lib/createStyles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"createStyles.js","sourceRoot":"","sources":["../../src/lib/createStyles.ts"],"names":[],"mappings":";;;AAwBA,oCAsBC;AASD,0DAcC;AApED,oCAAqC;AAMrC;;;;;GAKG;AACU,QAAA,sBAAsB,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAA;AAE9D;;;;;;;;GAQG;AACH,SAAgB,YAAY,CAC1B,MAAkE;IAElE,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,MAAM,OAAO,GAAG,kBAAU,CAAC,KAAK,CAAA;QAEhC,IAAI,OAAO,MAAM,KAAK,UAAU,EAAE,CAAC;YACjC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,EAAuB,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;QAC7D,CAAC;aAAM,CAAC;YACN,OAAO,MAAM,CAAA;QACf,CAAC;IACH,CAAC,CAAA;IAED,4EAA4E;IAC5E,yFAAyF;IACzF,wGAAwG;IACxG,iFAAiF;IACjF,OAAO,IAAI,KAAK,CAAC,OAAO,EAAuB,EAAE;QAC/C,GAAG,CAAC,MAAM,EAAE,IAAI;YACd,OAAQ,OAAO,EAA0B,CAAC,IAAc,CAAC,CAAA;QAC3D,CAAC;KACF,CAAC,CAAA;AACJ,CAAC;AAED;;;;;;GAMG;AACH,SAAgB,uBAAuB,CACrC,MAAwD;IAExD,MAAM,OAAO,GAAG,CAAC,UAAa,EAAO,EAAE,EAAE;QACvC,MAAM,OAAO,GAAG,kBAAU,CAAC,KAAK,CAAA;QAChC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,EAAuB,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;IACtE,CAAC,CAAA;IAED,OAAO,IAAI,KAAK,CAAC,OAAO,EAAuB,EAAE;QAC/C,GAAG,CAAC,MAAM,EAAE,IAAI;YACd,IAAI,IAAI,KAAK,8BAAsB;gBAAE,OAAO,MAAM,CAAA;YAClD,OAAQ,OAAO,EAA0B,CAAC,IAAc,CAAC,CAAA;QAC3D,CAAC;KACF,CAAC,CAAA;AACJ,CAAC"}
|
package/dist/lib/createTheme.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
3
|
var t = {};
|
|
3
4
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
@@ -9,10 +10,12 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
10
|
}
|
|
10
11
|
return t;
|
|
11
12
|
};
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
+
exports.createTheme = void 0;
|
|
15
|
+
const variants_1 = require("../variants");
|
|
16
|
+
const tools_1 = require("../tools");
|
|
17
|
+
const theme_1 = require("../theme");
|
|
18
|
+
const cssVariables_1 = require("./cssVariables");
|
|
16
19
|
const colorSchemeKey = '@styles.theme.colorScheme';
|
|
17
20
|
const alternateColorsKey = '@styles.theme.alternateColors';
|
|
18
21
|
/**
|
|
@@ -32,7 +35,7 @@ const alternateColorsKey = '@styles.theme.alternateColors';
|
|
|
32
35
|
* @param theme - Raw theme object (output of `validateTheme` or a compliant literal).
|
|
33
36
|
* @param themePersistor - Storage adapter for persisting color-scheme selection and injected schemes.
|
|
34
37
|
*/
|
|
35
|
-
|
|
38
|
+
const createTheme = (theme, themePersistor) => {
|
|
36
39
|
var _a, _b, _c, _d, _e;
|
|
37
40
|
const { colors, breakpoints, presets, radius, stroke, size, effects, typography, icons, baseColors, values } = theme, otherThemeValues = __rest(theme, ["colors", "breakpoints", "presets", "radius", "stroke", "size", "effects", "typography", "icons", "baseColors", "values"]);
|
|
38
41
|
const persistor = {
|
|
@@ -40,10 +43,10 @@ export const createTheme = (theme, themePersistor) => {
|
|
|
40
43
|
const value = themePersistor.get(key);
|
|
41
44
|
if (!value)
|
|
42
45
|
return null;
|
|
43
|
-
return minifier.decompress(value);
|
|
46
|
+
return tools_1.minifier.decompress(value);
|
|
44
47
|
},
|
|
45
48
|
set: (key, value) => {
|
|
46
|
-
return themePersistor.set(key, !value ? '' : minifier.compress(value));
|
|
49
|
+
return themePersistor.set(key, !value ? '' : tools_1.minifier.compress(value));
|
|
47
50
|
},
|
|
48
51
|
getNoCompress: (key) => {
|
|
49
52
|
if (themePersistor.getNoCompress)
|
|
@@ -59,22 +62,22 @@ export const createTheme = (theme, themePersistor) => {
|
|
|
59
62
|
localStorage.setItem(key, value);
|
|
60
63
|
},
|
|
61
64
|
};
|
|
62
|
-
themeStore.setColorScheme((_c = (_a = persistor.get(colorSchemeKey)) !== null && _a !== void 0 ? _a : (_b = themePersistor.getSystemColorScheme) === null || _b === void 0 ? void 0 : _b.call(themePersistor)) !== null && _c !== void 0 ? _c : 'default');
|
|
65
|
+
theme_1.themeStore.setColorScheme((_c = (_a = persistor.get(colorSchemeKey)) !== null && _a !== void 0 ? _a : (_b = themePersistor.getSystemColorScheme) === null || _b === void 0 ? void 0 : _b.call(themePersistor)) !== null && _c !== void 0 ? _c : 'default');
|
|
63
66
|
const persistedAlternateColors = persistor.get(alternateColorsKey);
|
|
64
67
|
const alternateColors = Object.assign(Object.assign({}, (persistedAlternateColors !== null && persistedAlternateColors !== void 0 ? persistedAlternateColors : {})), otherThemeValues === null || otherThemeValues === void 0 ? void 0 : otherThemeValues.alternateColors);
|
|
65
|
-
themeStore.setAlternateColorsScheme(alternateColors);
|
|
68
|
+
theme_1.themeStore.setAlternateColorsScheme(alternateColors);
|
|
66
69
|
// On web: build CSS var proxy once — theme.colors returns var(--cl-X) strings.
|
|
67
70
|
// On RN (isBrowser falsy): keep raw RGBA values as before.
|
|
68
|
-
const cssVarColors = theme.isBrowser ? buildCssVarProxy(colors) : colors;
|
|
71
|
+
const cssVarColors = theme.isBrowser ? (0, cssVariables_1.buildCssVarProxy)(colors) : colors;
|
|
69
72
|
// Apply persisted scheme to DOM immediately (browser-only, no-op on server/RN)
|
|
70
|
-
applyColorSchemeToDOM((_d = persistor.getNoCompress(DOM_COLOR_SCHEME_KEY)) !== null && _d !== void 0 ? _d : 'default');
|
|
73
|
+
(0, cssVariables_1.applyColorSchemeToDOM)((_d = persistor.getNoCompress(cssVariables_1.DOM_COLOR_SCHEME_KEY)) !== null && _d !== void 0 ? _d : 'default');
|
|
71
74
|
const baseSpacing = (_e = theme.baseSpacing) !== null && _e !== void 0 ? _e : 1;
|
|
72
75
|
const themeObj = Object.assign(Object.assign({}, otherThemeValues), { get alternateColors() {
|
|
73
|
-
return themeStore.alternateColorsScheme;
|
|
76
|
+
return theme_1.themeStore.alternateColorsScheme;
|
|
74
77
|
},
|
|
75
78
|
baseColors,
|
|
76
79
|
currentColorScheme() {
|
|
77
|
-
return themeStore.colorScheme;
|
|
80
|
+
return theme_1.themeStore.colorScheme;
|
|
78
81
|
}, breakpoints: breakpoints !== null && breakpoints !== void 0 ? breakpoints : {},
|
|
79
82
|
// On web: var(--cl-X) strings — browser CSS handles color switching.
|
|
80
83
|
// On RN: raw RGBA values, scheme-reactive as before.
|
|
@@ -82,10 +85,10 @@ export const createTheme = (theme, themePersistor) => {
|
|
|
82
85
|
// Always the active scheme's real RGBA values — use when you need the actual color in JS.
|
|
83
86
|
get currentSchemeColors() {
|
|
84
87
|
var _a, _b;
|
|
85
|
-
const colorScheme = (_a = themeStore.colorScheme) !== null && _a !== void 0 ? _a : 'default';
|
|
88
|
+
const colorScheme = (_a = theme_1.themeStore.colorScheme) !== null && _a !== void 0 ? _a : 'default';
|
|
86
89
|
if (colorScheme === 'default')
|
|
87
90
|
return colors;
|
|
88
|
-
const scheme = (_b = themeStore.alternateColorsScheme) === null || _b === void 0 ? void 0 : _b[colorScheme];
|
|
91
|
+
const scheme = (_b = theme_1.themeStore.alternateColorsScheme) === null || _b === void 0 ? void 0 : _b[colorScheme];
|
|
89
92
|
if (!scheme) {
|
|
90
93
|
console.warn(`Color scheme ${colorScheme} not found in theme`);
|
|
91
94
|
}
|
|
@@ -95,49 +98,50 @@ export const createTheme = (theme, themePersistor) => {
|
|
|
95
98
|
var _a, _b;
|
|
96
99
|
const map = !schemeName || schemeName === 'default'
|
|
97
100
|
? colors
|
|
98
|
-
: (_b = (_a = themeStore.alternateColorsScheme) === null || _a === void 0 ? void 0 : _a[schemeName]) !== null && _b !== void 0 ? _b : colors;
|
|
99
|
-
return flattenColorMap(map);
|
|
101
|
+
: (_b = (_a = theme_1.themeStore.alternateColorsScheme) === null || _a === void 0 ? void 0 : _a[schemeName]) !== null && _b !== void 0 ? _b : colors;
|
|
102
|
+
return (0, cssVariables_1.flattenColorMap)(map);
|
|
100
103
|
},
|
|
101
104
|
setColorScheme(colorScheme) {
|
|
102
105
|
var _a;
|
|
103
|
-
const hasScheme = colorScheme === 'default' ? true : !!((_a = themeStore.alternateColorsScheme) === null || _a === void 0 ? void 0 : _a[colorScheme]);
|
|
106
|
+
const hasScheme = colorScheme === 'default' ? true : !!((_a = theme_1.themeStore.alternateColorsScheme) === null || _a === void 0 ? void 0 : _a[colorScheme]);
|
|
104
107
|
if (!hasScheme) {
|
|
105
108
|
console.warn(`Color scheme ${colorScheme} not found in theme`);
|
|
106
109
|
return;
|
|
107
110
|
}
|
|
108
|
-
themeStore.setColorScheme(colorScheme);
|
|
111
|
+
theme_1.themeStore.setColorScheme(colorScheme);
|
|
109
112
|
persistor.set(colorSchemeKey, colorScheme);
|
|
110
113
|
// Store uncompressed for the FOUC prevention script (lz can't run inline)
|
|
111
|
-
persistor.setNoCompress(DOM_COLOR_SCHEME_KEY, colorScheme);
|
|
112
|
-
applyColorSchemeToDOM(colorScheme);
|
|
114
|
+
persistor.setNoCompress(cssVariables_1.DOM_COLOR_SCHEME_KEY, colorScheme);
|
|
115
|
+
(0, cssVariables_1.applyColorSchemeToDOM)(colorScheme);
|
|
113
116
|
},
|
|
114
117
|
injectColorScheme(name, colorMap) {
|
|
115
|
-
themeStore.injectColorScheme(name, colorMap);
|
|
118
|
+
theme_1.themeStore.injectColorScheme(name, colorMap);
|
|
116
119
|
const persistedAlternateColors = persistor.get(alternateColorsKey);
|
|
117
120
|
const unpersistedAlternateColors = Object.assign(Object.assign({}, (persistedAlternateColors !== null && persistedAlternateColors !== void 0 ? persistedAlternateColors : {})), { [name]: colorMap });
|
|
118
121
|
persistor.set(alternateColorsKey, unpersistedAlternateColors);
|
|
119
122
|
},
|
|
120
123
|
ejectColorScheme(name) {
|
|
121
|
-
themeStore.ejectColorScheme(name);
|
|
124
|
+
theme_1.themeStore.ejectColorScheme(name);
|
|
122
125
|
const persistedAlternateColors = persistor.get(alternateColorsKey);
|
|
123
126
|
if (name in persistedAlternateColors) {
|
|
124
127
|
delete persistedAlternateColors[name];
|
|
125
128
|
}
|
|
126
129
|
persistor.set(alternateColorsKey, persistedAlternateColors);
|
|
127
130
|
},
|
|
128
|
-
baseSpacing, value: (n = 1) => baseSpacing * n, spacing: Object.assign(Object.assign(Object.assign(Object.assign({ value: (n = 1) => baseSpacing * n, gap: multiplierProperty(baseSpacing, 'gap') }, spacingFactory(baseSpacing, 'padding')), spacingFactory(baseSpacing, 'margin')), spacingFactory(baseSpacing, 'p', true)), spacingFactory(baseSpacing, 'm', true)), inset: {
|
|
129
|
-
top: multiplierProperty(baseSpacing, 'top'),
|
|
130
|
-
bottom: multiplierProperty(baseSpacing, 'bottom'),
|
|
131
|
-
left: multiplierProperty(baseSpacing, 'left'),
|
|
132
|
-
right: multiplierProperty(baseSpacing, 'right'),
|
|
133
|
-
}, presets: Object.assign(Object.assign({}, defaultVariants), presets), radius: radius !== null && radius !== void 0 ? radius : {}, stroke: stroke !== null && stroke !== void 0 ? stroke : {}, size: size !== null && size !== void 0 ? size : {}, effects: effects !== null && effects !== void 0 ? effects : {}, media: createMediaQueries(breakpoints), border: borderCreator, typography: typography !== null && typography !== void 0 ? typography : {}, icons: icons, values: values !== null && values !== void 0 ? values : {}, sized: (size) => {
|
|
131
|
+
baseSpacing, value: (n = 1) => baseSpacing * n, spacing: Object.assign(Object.assign(Object.assign(Object.assign({ value: (n = 1) => baseSpacing * n, gap: (0, tools_1.multiplierProperty)(baseSpacing, 'gap') }, (0, variants_1.spacingFactory)(baseSpacing, 'padding')), (0, variants_1.spacingFactory)(baseSpacing, 'margin')), (0, variants_1.spacingFactory)(baseSpacing, 'p', true)), (0, variants_1.spacingFactory)(baseSpacing, 'm', true)), inset: {
|
|
132
|
+
top: (0, tools_1.multiplierProperty)(baseSpacing, 'top'),
|
|
133
|
+
bottom: (0, tools_1.multiplierProperty)(baseSpacing, 'bottom'),
|
|
134
|
+
left: (0, tools_1.multiplierProperty)(baseSpacing, 'left'),
|
|
135
|
+
right: (0, tools_1.multiplierProperty)(baseSpacing, 'right'),
|
|
136
|
+
}, presets: Object.assign(Object.assign({}, variants_1.defaultVariants), presets), radius: radius !== null && radius !== void 0 ? radius : {}, stroke: stroke !== null && stroke !== void 0 ? stroke : {}, size: size !== null && size !== void 0 ? size : {}, effects: effects !== null && effects !== void 0 ? effects : {}, media: (0, variants_1.createMediaQueries)(breakpoints), border: variants_1.borderCreator, typography: typography !== null && typography !== void 0 ? typography : {}, icons: icons, values: values !== null && values !== void 0 ? values : {}, sized: (size) => {
|
|
134
137
|
const value = typeof size == 'number' ? size * baseSpacing : size;
|
|
135
138
|
return {
|
|
136
139
|
width: value,
|
|
137
140
|
height: value,
|
|
138
141
|
};
|
|
139
142
|
} });
|
|
140
|
-
themeStore.setTheme(themeObj);
|
|
143
|
+
theme_1.themeStore.setTheme(themeObj);
|
|
141
144
|
return themeObj;
|
|
142
145
|
};
|
|
146
|
+
exports.createTheme = createTheme;
|
|
143
147
|
//# sourceMappingURL=createTheme.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createTheme.js","sourceRoot":"","sources":["../../src/lib/createTheme.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"createTheme.js","sourceRoot":"","sources":["../../src/lib/createTheme.ts"],"names":[],"mappings":"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"}
|
package/dist/lib/cssVariables.js
CHANGED
|
@@ -1,23 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.DOM_COLOR_SCHEME_KEY = exports.CSS_VAR_PREFIX = void 0;
|
|
4
|
+
exports.flattenColorMap = flattenColorMap;
|
|
5
|
+
exports.buildCssVarProxy = buildCssVarProxy;
|
|
6
|
+
exports.applyColorSchemeToDOM = applyColorSchemeToDOM;
|
|
1
7
|
/**
|
|
2
8
|
* CSS custom-property prefix used for all codeleap design-token variables.
|
|
3
9
|
* Color tokens are injected as `--cl-<tokenPath>` on `:root` (or a scheme-specific
|
|
4
10
|
* `[data-color-scheme]` selector). Changing this value after tokens are injected
|
|
5
11
|
* will break existing CSS that references `var(--cl-*)`.
|
|
6
12
|
*/
|
|
7
|
-
|
|
13
|
+
exports.CSS_VAR_PREFIX = '--cl-';
|
|
8
14
|
/**
|
|
9
15
|
* Storage key used to persist the active color scheme name in an uncompressed format
|
|
10
16
|
* (plain string, not LZ-encoded). Stored separately so a lightweight inline script
|
|
11
17
|
* can read it before React hydrates and set `data-color-scheme` on `<html>` to prevent
|
|
12
18
|
* a flash of the wrong color scheme (FOUC).
|
|
13
19
|
*/
|
|
14
|
-
|
|
20
|
+
exports.DOM_COLOR_SCHEME_KEY = '@styles.dom.colorScheme';
|
|
15
21
|
/**
|
|
16
22
|
* Recursively flattens a nested color token object into a flat map of CSS custom-property
|
|
17
23
|
* names to their values. Nesting levels are joined with `-` (e.g., `{ primary: { solid: '#fff' } }`
|
|
18
24
|
* → `{ '--cl-primary-solid': '#fff' }`). Non-string leaf values are silently skipped.
|
|
19
25
|
*/
|
|
20
|
-
|
|
26
|
+
function flattenColorMap(obj, path = '', prefix = exports.CSS_VAR_PREFIX) {
|
|
21
27
|
const result = {};
|
|
22
28
|
for (const [key, value] of Object.entries(obj)) {
|
|
23
29
|
const cssPath = path ? `${path}-${key}` : key;
|
|
@@ -36,7 +42,7 @@ export function flattenColorMap(obj, path = '', prefix = CSS_VAR_PREFIX) {
|
|
|
36
42
|
* CSS variable references so that color-scheme switching via `data-color-scheme` CSS
|
|
37
43
|
* selectors works without JavaScript re-renders.
|
|
38
44
|
*/
|
|
39
|
-
|
|
45
|
+
function buildCssVarProxy(obj, path = '', prefix = exports.CSS_VAR_PREFIX) {
|
|
40
46
|
if (typeof obj !== 'object' || obj === null)
|
|
41
47
|
return obj;
|
|
42
48
|
const result = {};
|
|
@@ -60,7 +66,7 @@ export function buildCssVarProxy(obj, path = '', prefix = CSS_VAR_PREFIX) {
|
|
|
60
66
|
* The `'default'` scheme removes the attribute entirely so the `:root` base variables
|
|
61
67
|
* apply. No-ops on non-browser environments (SSR, React Native).
|
|
62
68
|
*/
|
|
63
|
-
|
|
69
|
+
function applyColorSchemeToDOM(colorScheme) {
|
|
64
70
|
if (typeof document === 'undefined')
|
|
65
71
|
return;
|
|
66
72
|
if (colorScheme === 'default') {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cssVariables.js","sourceRoot":"","sources":["../../src/lib/cssVariables.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"cssVariables.js","sourceRoot":"","sources":["../../src/lib/cssVariables.ts"],"names":[],"mappings":";;;AAqBA,0CAeC;AAQD,4CAcC;AAQD,sDAOC;AAzED;;;;;GAKG;AACU,QAAA,cAAc,GAAG,OAAO,CAAA;AAErC;;;;;GAKG;AACU,QAAA,oBAAoB,GAAG,yBAAyB,CAAA;AAE7D;;;;GAIG;AACH,SAAgB,eAAe,CAC7B,GAAwB,EACxB,IAAI,GAAG,EAAE,EACT,MAAM,GAAG,sBAAc;IAEvB,MAAM,MAAM,GAA2B,EAAE,CAAA;IACzC,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;QAC/C,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,CAAA;QAC7C,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC9B,MAAM,CAAC,GAAG,MAAM,GAAG,OAAO,EAAE,CAAC,GAAG,KAAK,CAAA;QACvC,CAAC;aAAM,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC9C,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAA;QAChE,CAAC;IACH,CAAC;IACD,OAAO,MAAM,CAAA;AACf,CAAC;AAED;;;;;GAKG;AACH,SAAgB,gBAAgB,CAAI,GAAM,EAAE,IAAI,GAAG,EAAE,EAAE,MAAM,GAAG,sBAAc;IAC5E,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,IAAI;QAAE,OAAO,GAAG,CAAA;IACvD,MAAM,MAAM,GAAwB,EAAE,CAAA;IACtC,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,GAA0B,CAAC,EAAE,CAAC;QACtE,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,CAAA;QAC7C,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC9B,MAAM,CAAC,GAAG,CAAC,GAAG,OAAO,MAAM,GAAG,OAAO,GAAG,CAAA;QAC1C,CAAC;aAAM,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC9C,MAAM,CAAC,GAAG,CAAC,GAAG,gBAAgB,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,CAAA;QACxD,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;QACrB,CAAC;IACH,CAAC;IACD,OAAO,MAAW,CAAA;AACpB,CAAC;AAED;;;;;GAKG;AACH,SAAgB,qBAAqB,CAAC,WAAmB;IACvD,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAM;IAC3C,IAAI,WAAW,KAAK,SAAS,EAAE,CAAC;QAC9B,OAAO,QAAQ,CAAC,eAAe,CAAC,OAAO,CAAC,WAAW,CAAA;IACrD,CAAC;SAAM,CAAC;QACN,QAAQ,CAAC,eAAe,CAAC,OAAO,CAAC,WAAW,GAAG,WAAW,CAAA;IAC5D,CAAC;AACH,CAAC"}
|
package/dist/lib/index.js
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.DOM_COLOR_SCHEME_KEY = exports.CSS_VAR_PREFIX = exports.applyColorSchemeToDOM = exports.buildCssVarProxy = exports.flattenColorMap = exports.calc = exports.createTheme = exports.CONTEXT_FACTORY_SYMBOL = exports.createStylesWithContext = exports.createStyles = void 0;
|
|
4
|
+
var createStyles_1 = require("./createStyles");
|
|
5
|
+
Object.defineProperty(exports, "createStyles", { enumerable: true, get: function () { return createStyles_1.createStyles; } });
|
|
6
|
+
Object.defineProperty(exports, "createStylesWithContext", { enumerable: true, get: function () { return createStyles_1.createStylesWithContext; } });
|
|
7
|
+
Object.defineProperty(exports, "CONTEXT_FACTORY_SYMBOL", { enumerable: true, get: function () { return createStyles_1.CONTEXT_FACTORY_SYMBOL; } });
|
|
8
|
+
var createTheme_1 = require("./createTheme");
|
|
9
|
+
Object.defineProperty(exports, "createTheme", { enumerable: true, get: function () { return createTheme_1.createTheme; } });
|
|
10
|
+
var calc_1 = require("./calc");
|
|
11
|
+
Object.defineProperty(exports, "calc", { enumerable: true, get: function () { return calc_1.calc; } });
|
|
12
|
+
var cssVariables_1 = require("./cssVariables");
|
|
13
|
+
Object.defineProperty(exports, "flattenColorMap", { enumerable: true, get: function () { return cssVariables_1.flattenColorMap; } });
|
|
14
|
+
Object.defineProperty(exports, "buildCssVarProxy", { enumerable: true, get: function () { return cssVariables_1.buildCssVarProxy; } });
|
|
15
|
+
Object.defineProperty(exports, "applyColorSchemeToDOM", { enumerable: true, get: function () { return cssVariables_1.applyColorSchemeToDOM; } });
|
|
16
|
+
Object.defineProperty(exports, "CSS_VAR_PREFIX", { enumerable: true, get: function () { return cssVariables_1.CSS_VAR_PREFIX; } });
|
|
17
|
+
Object.defineProperty(exports, "DOM_COLOR_SCHEME_KEY", { enumerable: true, get: function () { return cssVariables_1.DOM_COLOR_SCHEME_KEY; } });
|
|
5
18
|
//# sourceMappingURL=index.js.map
|
package/dist/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/index.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/index.ts"],"names":[],"mappings":";;;AAAA,+CAA8F;AAArF,4GAAA,YAAY,OAAA;AAAE,uHAAA,uBAAuB,OAAA;AAAE,sHAAA,sBAAsB,OAAA;AACtE,6CAA2C;AAAlC,0GAAA,WAAW,OAAA;AACpB,+BAA6B;AAApB,4FAAA,IAAI,OAAA;AACb,+CAA+H;AAAtH,+GAAA,eAAe,OAAA;AAAE,gHAAA,gBAAgB,OAAA;AAAE,qHAAA,qBAAqB,OAAA;AAAE,8GAAA,cAAc,OAAA;AAAE,oHAAA,oBAAoB,OAAA"}
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.generateColorScheme = generateColorScheme;
|
|
4
|
+
const tools_1 = require("../tools");
|
|
2
5
|
const lightnesses = [95, 85, 75, 60, 45, 30, 27, 21, 16, 10];
|
|
3
6
|
const defaultLightnessMap = Object.fromEntries(lightnesses.map((l, i) => {
|
|
4
7
|
const step = ((i + 1) * 100).toString();
|
|
@@ -22,12 +25,12 @@ const defaultAlphasMap = Object.fromEntries(alphas.map((a, i) => {
|
|
|
22
25
|
* Default alpha steps: `[0.05, 0.10, …, 0.90]`.
|
|
23
26
|
* Both can be overridden by passing custom maps (step → value).
|
|
24
27
|
*/
|
|
25
|
-
|
|
26
|
-
const { h, s } = colorTools.hexToHSL(anchorHex);
|
|
27
|
-
const baseRGB = colorTools.hexToRGB(anchorHex);
|
|
28
|
+
function generateColorScheme(anchorHex, prefix = 'primary', lightnesses = defaultLightnessMap, alphas = defaultAlphasMap) {
|
|
29
|
+
const { h, s } = tools_1.colorTools.hexToHSL(anchorHex);
|
|
30
|
+
const baseRGB = tools_1.colorTools.hexToRGB(anchorHex);
|
|
28
31
|
const scheme = {};
|
|
29
32
|
Object.entries(lightnesses).forEach(([step, lightness]) => {
|
|
30
|
-
const rgb = colorTools.hslToRGB(h, s, lightness);
|
|
33
|
+
const rgb = tools_1.colorTools.hslToRGB(h, s, lightness);
|
|
31
34
|
scheme[`${prefix}Solid${step}`] = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 1.00)`;
|
|
32
35
|
});
|
|
33
36
|
Object.entries(alphas).forEach(([step, alpha]) => {
|