@codeleap/styles 7.0.2 → 7.1.1
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 +18 -20
- package/dist/classes/Cacher.js.map +1 -1
- package/dist/classes/StaleControl.js +6 -7
- package/dist/classes/StaleControl.js.map +1 -1
- package/dist/classes/StyleCache.js +27 -24
- package/dist/classes/StyleCache.js.map +1 -1
- package/dist/classes/StylePersistor.js +7 -10
- package/dist/classes/StylePersistor.js.map +1 -1
- package/dist/classes/StyleRegistry.js +62 -75
- package/dist/classes/StyleRegistry.js.map +1 -1
- package/dist/classes/index.js +2 -18
- package/dist/classes/index.js.map +1 -1
- package/dist/constants.js +1 -4
- package/dist/constants.js.map +1 -1
- package/dist/hooks/index.js +4 -20
- package/dist/hooks/index.js.map +1 -1
- package/dist/hooks/useCompositionStyles.js +9 -10
- package/dist/hooks/useCompositionStyles.js.map +1 -1
- package/dist/hooks/useNestedStylesByKey.js +8 -9
- package/dist/hooks/useNestedStylesByKey.js.map +1 -1
- package/dist/hooks/useStyleObserver.js +4 -8
- package/dist/hooks/useStyleObserver.js.map +1 -1
- package/dist/hooks/useTheme.js +4 -8
- package/dist/hooks/useTheme.js.map +1 -1
- package/dist/index.js +11 -27
- package/dist/index.js.map +1 -1
- package/dist/lib/calc.js +2 -5
- package/dist/lib/calc.js.map +1 -1
- package/dist/lib/createStyles.js +7 -12
- package/dist/lib/createStyles.js.map +1 -1
- package/dist/lib/createTheme.js +73 -58
- package/dist/lib/createTheme.js.map +1 -1
- package/dist/lib/cssVariables.js +5 -11
- package/dist/lib/cssVariables.js.map +1 -1
- package/dist/lib/index.js +4 -17
- package/dist/lib/index.js.map +1 -1
- package/dist/theme/generateColorScheme.js +5 -8
- package/dist/theme/generateColorScheme.js.map +1 -1
- package/dist/theme/index.js +3 -19
- 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 +22 -26
- package/dist/theme/themeStore.js.map +1 -1
- package/dist/theme/validateTheme.js +13 -6
- package/dist/theme/validateTheme.js.map +1 -1
- package/dist/tools/colors.js +7 -16
- package/dist/tools/colors.js.map +1 -1
- package/dist/tools/deepClone.js +2 -8
- package/dist/tools/deepClone.js.map +1 -1
- package/dist/tools/deepmerge.js +1 -8
- package/dist/tools/deepmerge.js.map +1 -1
- package/dist/tools/hashKey.js +4 -9
- package/dist/tools/hashKey.js.map +1 -1
- package/dist/tools/index.js +6 -45
- package/dist/tools/index.js.map +1 -1
- package/dist/tools/minifier.js +6 -11
- package/dist/tools/minifier.js.map +1 -1
- package/dist/tools/multiplierProperty.js +1 -4
- package/dist/tools/multiplierProperty.js.map +1 -1
- package/dist/types/cache.js +1 -2
- package/dist/types/component.js +1 -2
- package/dist/types/core.js +1 -2
- package/dist/types/core.js.map +1 -1
- package/dist/types/icon.js +1 -2
- package/dist/types/icon.js.map +1 -1
- package/dist/types/index.js +5 -21
- package/dist/types/index.js.map +1 -1
- package/dist/types/spacing.js +2 -5
- package/dist/types/spacing.js.map +1 -1
- package/dist/types/store.js +1 -2
- package/dist/types/style.js +1 -2
- package/dist/types/theme.js +1 -2
- package/dist/utils.js +17 -25
- package/dist/utils.js.map +1 -1
- package/dist/variants/borderCreator.js +7 -12
- package/dist/variants/borderCreator.js.map +1 -1
- package/dist/variants/createAppVariants.js +3 -6
- package/dist/variants/createAppVariants.js.map +1 -1
- package/dist/variants/defaultVariants.js +1 -4
- package/dist/variants/defaultVariants.js.map +1 -1
- package/dist/variants/dynamicVariants.js +20 -24
- package/dist/variants/dynamicVariants.js.map +1 -1
- package/dist/variants/index.js +6 -22
- package/dist/variants/index.js.map +1 -1
- package/dist/variants/mediaQuery.js +9 -9
- package/dist/variants/mediaQuery.js.map +1 -1
- package/dist/variants/spacing.js +3 -6
- package/dist/variants/spacing.js.map +1 -1
- package/package.json +2 -2
package/dist/hooks/useTheme.js
CHANGED
|
@@ -1,8 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
exports.useTheme = void 0;
|
|
4
|
-
const theme_1 = require("../theme");
|
|
5
|
-
const react_1 = require("@nanostores/react");
|
|
1
|
+
import { themeStoreComputed } from '../theme';
|
|
2
|
+
import { useStore } from '@nanostores/react';
|
|
6
3
|
/**
|
|
7
4
|
* Subscribes to the global theme state and returns either the full `ThemeState`
|
|
8
5
|
* (when called without arguments) or a derived value (when called with a selector).
|
|
@@ -17,12 +14,11 @@ const react_1 = require("@nanostores/react");
|
|
|
17
14
|
* // Derived slice — component only re-renders when colorScheme changes
|
|
18
15
|
* const colorScheme = useTheme(s => s.colorScheme)
|
|
19
16
|
*/
|
|
20
|
-
const useTheme = (selector) => {
|
|
21
|
-
const state =
|
|
17
|
+
export const useTheme = (selector) => {
|
|
18
|
+
const state = useStore(themeStoreComputed);
|
|
22
19
|
if (!selector) {
|
|
23
20
|
return state;
|
|
24
21
|
}
|
|
25
22
|
return selector(state);
|
|
26
23
|
};
|
|
27
|
-
exports.useTheme = useTheme;
|
|
28
24
|
//# sourceMappingURL=useTheme.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTheme.js","sourceRoot":"","sources":["../../src/hooks/useTheme.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useTheme.js","sourceRoot":"","sources":["../../src/hooks/useTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,kBAAkB,EAAE,MAAM,UAAU,CAAA;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAI5C;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CACtB,QAA2B,EACxB,EAAE;IACL,MAAM,KAAK,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAA;IAE1C,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,KAAU,CAAA;IACnB,CAAC;IAED,OAAO,QAAQ,CAAC,KAAK,CAAC,CAAA;AACxB,CAAC,CAAA"}
|
package/dist/index.js
CHANGED
|
@@ -1,28 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
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);
|
|
1
|
+
import './constants';
|
|
2
|
+
import './utils';
|
|
3
|
+
export * from './classes';
|
|
4
|
+
export * from './hooks';
|
|
5
|
+
export * from './lib';
|
|
6
|
+
export * from './theme';
|
|
7
|
+
export * from './tools';
|
|
8
|
+
export * from './types';
|
|
9
|
+
export * from './variants';
|
|
10
|
+
export * from './constants';
|
|
11
|
+
export * from './utils';
|
|
28
12
|
//# 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":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AACpB,OAAO,SAAS,CAAA;AAEhB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA"}
|
package/dist/lib/calc.js
CHANGED
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.calc = void 0;
|
|
4
1
|
/**
|
|
5
2
|
* Chainable builder for CSS `calc()` expressions. Each arithmetic method appends
|
|
6
3
|
* to the expression and returns `this`, so calls can be chained. Call `build()`
|
|
@@ -10,6 +7,7 @@ exports.calc = void 0;
|
|
|
10
7
|
* calc(100, '%').sub(16).build() // → 'calc((100%) - (16px))'
|
|
11
8
|
*/
|
|
12
9
|
class CalcBuilder {
|
|
10
|
+
expression;
|
|
13
11
|
constructor(initial, unit = 'px') {
|
|
14
12
|
this.expression = `${initial}${unit}`;
|
|
15
13
|
}
|
|
@@ -43,6 +41,5 @@ class CalcBuilder {
|
|
|
43
41
|
* and optional unit (default `'px'`), then chain `.add()`, `.sub()`, `.mult()`, `.div()`,
|
|
44
42
|
* and finally call `.build()` to get the complete string.
|
|
45
43
|
*/
|
|
46
|
-
const calc = (base, unit = 'px') => new CalcBuilder(base, unit);
|
|
47
|
-
exports.calc = calc;
|
|
44
|
+
export const calc = (base, unit = 'px') => new CalcBuilder(base, unit);
|
|
48
45
|
//# 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":"
|
|
1
|
+
{"version":3,"file":"calc.js","sourceRoot":"","sources":["../../src/lib/calc.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,MAAM,WAAW;IACP,UAAU,CAAQ;IAE1B,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;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,IAAY,EAAE,OAAa,IAAI,EAAE,EAAE,CAAC,IAAI,WAAW,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA"}
|
package/dist/lib/createStyles.js
CHANGED
|
@@ -1,16 +1,11 @@
|
|
|
1
|
-
|
|
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");
|
|
1
|
+
import { themeStore } from '../theme';
|
|
7
2
|
/**
|
|
8
3
|
* Symbol used to attach a context-aware factory function to a styles proxy.
|
|
9
4
|
* `CodeleapStyleRegistry.registerVariants` reads this symbol from each entry to
|
|
10
5
|
* identify which variants require a `ComponentContext` at resolution time.
|
|
11
6
|
* Not intended for direct use by consumers.
|
|
12
7
|
*/
|
|
13
|
-
|
|
8
|
+
export const CONTEXT_FACTORY_SYMBOL = Symbol('contextFactory');
|
|
14
9
|
/**
|
|
15
10
|
* Creates a reactive styles object that automatically updates when theme changes.
|
|
16
11
|
* Uses a proxy to re-compute styles on each access, ensuring theme changes are reflected.
|
|
@@ -20,9 +15,9 @@ exports.CONTEXT_FACTORY_SYMBOL = Symbol('contextFactory');
|
|
|
20
15
|
* @param {StylesShape<K, V> | ((theme: ITheme) => StylesShape<K, V>)} styles - Static styles object or function that receives theme
|
|
21
16
|
* @returns {StylesShape<K, V>} Proxied styles object that recomputes on theme changes
|
|
22
17
|
*/
|
|
23
|
-
function createStyles(styles) {
|
|
18
|
+
export function createStyles(styles) {
|
|
24
19
|
const compute = () => {
|
|
25
|
-
const current =
|
|
20
|
+
const current = themeStore.theme;
|
|
26
21
|
if (typeof styles === 'function') {
|
|
27
22
|
return !current ? {} : styles(current);
|
|
28
23
|
}
|
|
@@ -47,14 +42,14 @@ function createStyles(styles) {
|
|
|
47
42
|
* getter so the registry can invoke the factory with the actual context at render time.
|
|
48
43
|
* Use this instead of `createStyles` when variant styles depend on component state.
|
|
49
44
|
*/
|
|
50
|
-
function createStylesWithContext(styles) {
|
|
45
|
+
export function createStylesWithContext(styles) {
|
|
51
46
|
const compute = (context = {}) => {
|
|
52
|
-
const current =
|
|
47
|
+
const current = themeStore.theme;
|
|
53
48
|
return !current ? {} : styles(current, context);
|
|
54
49
|
};
|
|
55
50
|
return new Proxy(compute(), {
|
|
56
51
|
get(target, prop) {
|
|
57
|
-
if (prop ===
|
|
52
|
+
if (prop === CONTEXT_FACTORY_SYMBOL)
|
|
58
53
|
return styles;
|
|
59
54
|
return compute()[prop];
|
|
60
55
|
},
|
|
@@ -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":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAMrC;;;;;GAKG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAA;AAE9D;;;;;;;;GAQG;AACH,MAAM,UAAU,YAAY,CAC1B,MAAkE;IAElE,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,MAAM,OAAO,GAAG,UAAU,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,MAAM,UAAU,uBAAuB,CACrC,MAAwD;IAExD,MAAM,OAAO,GAAG,CAAC,UAAa,EAAO,EAAE,EAAE;QACvC,MAAM,OAAO,GAAG,UAAU,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,sBAAsB;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,21 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
t[p] = s[p];
|
|
6
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
-
t[p[i]] = s[p[i]];
|
|
10
|
-
}
|
|
11
|
-
return t;
|
|
12
|
-
};
|
|
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");
|
|
1
|
+
import { borderCreator, createMediaQueries, defaultVariants, spacingFactory } from '../variants';
|
|
2
|
+
import { minifier, multiplierProperty } from '../tools';
|
|
3
|
+
import { themeStore } from '../theme';
|
|
4
|
+
import { applyColorSchemeToDOM, buildCssVarProxy, flattenColorMap, DOM_COLOR_SCHEME_KEY } from './cssVariables';
|
|
19
5
|
const colorSchemeKey = '@styles.theme.colorScheme';
|
|
20
6
|
const alternateColorsKey = '@styles.theme.alternateColors';
|
|
21
7
|
/**
|
|
@@ -35,18 +21,17 @@ const alternateColorsKey = '@styles.theme.alternateColors';
|
|
|
35
21
|
* @param theme - Raw theme object (output of `validateTheme` or a compliant literal).
|
|
36
22
|
* @param themePersistor - Storage adapter for persisting color-scheme selection and injected schemes.
|
|
37
23
|
*/
|
|
38
|
-
const createTheme = (theme, themePersistor) => {
|
|
39
|
-
|
|
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"]);
|
|
24
|
+
export const createTheme = (theme, themePersistor) => {
|
|
25
|
+
const { colors, breakpoints, presets, radius, stroke, size, effects, typography, icons, baseColors, values, ...otherThemeValues } = theme;
|
|
41
26
|
const persistor = {
|
|
42
27
|
get: (key) => {
|
|
43
28
|
const value = themePersistor.get(key);
|
|
44
29
|
if (!value)
|
|
45
30
|
return null;
|
|
46
|
-
return
|
|
31
|
+
return minifier.decompress(value);
|
|
47
32
|
},
|
|
48
33
|
set: (key, value) => {
|
|
49
|
-
return themePersistor.set(key, !value ? '' :
|
|
34
|
+
return themePersistor.set(key, !value ? '' : minifier.compress(value));
|
|
50
35
|
},
|
|
51
36
|
getNoCompress: (key) => {
|
|
52
37
|
if (themePersistor.getNoCompress)
|
|
@@ -62,86 +47,116 @@ const createTheme = (theme, themePersistor) => {
|
|
|
62
47
|
localStorage.setItem(key, value);
|
|
63
48
|
},
|
|
64
49
|
};
|
|
65
|
-
|
|
50
|
+
themeStore.setColorScheme(persistor.get(colorSchemeKey) ?? themePersistor.getSystemColorScheme?.() ?? 'default');
|
|
66
51
|
const persistedAlternateColors = persistor.get(alternateColorsKey);
|
|
67
|
-
const alternateColors =
|
|
68
|
-
|
|
52
|
+
const alternateColors = {
|
|
53
|
+
...(persistedAlternateColors ?? {}),
|
|
54
|
+
...otherThemeValues?.alternateColors,
|
|
55
|
+
};
|
|
56
|
+
themeStore.setAlternateColorsScheme(alternateColors);
|
|
69
57
|
// On web: build CSS var proxy once — theme.colors returns var(--cl-X) strings.
|
|
70
58
|
// On RN (isBrowser falsy): keep raw RGBA values as before.
|
|
71
|
-
const cssVarColors = theme.isBrowser ?
|
|
59
|
+
const cssVarColors = theme.isBrowser ? buildCssVarProxy(colors) : colors;
|
|
72
60
|
// Apply persisted scheme to DOM immediately (browser-only, no-op on server/RN)
|
|
73
|
-
|
|
74
|
-
const baseSpacing =
|
|
75
|
-
const themeObj =
|
|
76
|
-
|
|
61
|
+
applyColorSchemeToDOM(persistor.getNoCompress(DOM_COLOR_SCHEME_KEY) ?? 'default');
|
|
62
|
+
const baseSpacing = theme.baseSpacing ?? 1;
|
|
63
|
+
const themeObj = {
|
|
64
|
+
...otherThemeValues,
|
|
65
|
+
get alternateColors() {
|
|
66
|
+
return themeStore.alternateColorsScheme;
|
|
77
67
|
},
|
|
78
68
|
baseColors,
|
|
79
69
|
currentColorScheme() {
|
|
80
|
-
return
|
|
81
|
-
},
|
|
70
|
+
return themeStore.colorScheme;
|
|
71
|
+
},
|
|
72
|
+
breakpoints: breakpoints ?? {},
|
|
82
73
|
// On web: var(--cl-X) strings — browser CSS handles color switching.
|
|
83
74
|
// On RN: raw RGBA values, scheme-reactive as before.
|
|
84
|
-
colors: cssVarColors,
|
|
75
|
+
colors: cssVarColors,
|
|
85
76
|
// Always the active scheme's real RGBA values — use when you need the actual color in JS.
|
|
86
77
|
get currentSchemeColors() {
|
|
87
|
-
|
|
88
|
-
const colorScheme = (_a = theme_1.themeStore.colorScheme) !== null && _a !== void 0 ? _a : 'default';
|
|
78
|
+
const colorScheme = themeStore.colorScheme ?? 'default';
|
|
89
79
|
if (colorScheme === 'default')
|
|
90
80
|
return colors;
|
|
91
|
-
const scheme =
|
|
81
|
+
const scheme = themeStore.alternateColorsScheme?.[colorScheme];
|
|
92
82
|
if (!scheme) {
|
|
93
83
|
console.warn(`Color scheme ${colorScheme} not found in theme`);
|
|
94
84
|
}
|
|
95
|
-
return (scheme
|
|
85
|
+
return (scheme ?? colors);
|
|
96
86
|
},
|
|
97
87
|
getCssVariables(schemeName) {
|
|
98
|
-
var _a, _b;
|
|
99
88
|
const map = !schemeName || schemeName === 'default'
|
|
100
89
|
? colors
|
|
101
|
-
:
|
|
102
|
-
return
|
|
90
|
+
: themeStore.alternateColorsScheme?.[schemeName] ?? colors;
|
|
91
|
+
return flattenColorMap(map);
|
|
103
92
|
},
|
|
104
93
|
setColorScheme(colorScheme) {
|
|
105
|
-
|
|
106
|
-
const hasScheme = colorScheme === 'default' ? true : !!((_a = theme_1.themeStore.alternateColorsScheme) === null || _a === void 0 ? void 0 : _a[colorScheme]);
|
|
94
|
+
const hasScheme = colorScheme === 'default' ? true : !!themeStore.alternateColorsScheme?.[colorScheme];
|
|
107
95
|
if (!hasScheme) {
|
|
108
96
|
console.warn(`Color scheme ${colorScheme} not found in theme`);
|
|
109
97
|
return;
|
|
110
98
|
}
|
|
111
|
-
|
|
99
|
+
themeStore.setColorScheme(colorScheme);
|
|
112
100
|
persistor.set(colorSchemeKey, colorScheme);
|
|
113
101
|
// Store uncompressed for the FOUC prevention script (lz can't run inline)
|
|
114
|
-
persistor.setNoCompress(
|
|
115
|
-
|
|
102
|
+
persistor.setNoCompress(DOM_COLOR_SCHEME_KEY, colorScheme);
|
|
103
|
+
applyColorSchemeToDOM(colorScheme);
|
|
116
104
|
},
|
|
117
105
|
injectColorScheme(name, colorMap) {
|
|
118
|
-
|
|
106
|
+
themeStore.injectColorScheme(name, colorMap);
|
|
119
107
|
const persistedAlternateColors = persistor.get(alternateColorsKey);
|
|
120
|
-
const unpersistedAlternateColors =
|
|
108
|
+
const unpersistedAlternateColors = {
|
|
109
|
+
...(persistedAlternateColors ?? {}),
|
|
110
|
+
[name]: colorMap,
|
|
111
|
+
};
|
|
121
112
|
persistor.set(alternateColorsKey, unpersistedAlternateColors);
|
|
122
113
|
},
|
|
123
114
|
ejectColorScheme(name) {
|
|
124
|
-
|
|
115
|
+
themeStore.ejectColorScheme(name);
|
|
125
116
|
const persistedAlternateColors = persistor.get(alternateColorsKey);
|
|
126
117
|
if (name in persistedAlternateColors) {
|
|
127
118
|
delete persistedAlternateColors[name];
|
|
128
119
|
}
|
|
129
120
|
persistor.set(alternateColorsKey, persistedAlternateColors);
|
|
130
121
|
},
|
|
131
|
-
baseSpacing,
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
122
|
+
baseSpacing,
|
|
123
|
+
value: (n = 1) => baseSpacing * n,
|
|
124
|
+
spacing: {
|
|
125
|
+
value: (n = 1) => baseSpacing * n,
|
|
126
|
+
gap: multiplierProperty(baseSpacing, 'gap'),
|
|
127
|
+
...spacingFactory(baseSpacing, 'padding'),
|
|
128
|
+
...spacingFactory(baseSpacing, 'margin'),
|
|
129
|
+
...spacingFactory(baseSpacing, 'p', true),
|
|
130
|
+
...spacingFactory(baseSpacing, 'm', true),
|
|
131
|
+
},
|
|
132
|
+
inset: {
|
|
133
|
+
top: multiplierProperty(baseSpacing, 'top'),
|
|
134
|
+
bottom: multiplierProperty(baseSpacing, 'bottom'),
|
|
135
|
+
left: multiplierProperty(baseSpacing, 'left'),
|
|
136
|
+
right: multiplierProperty(baseSpacing, 'right'),
|
|
137
|
+
},
|
|
138
|
+
presets: {
|
|
139
|
+
...defaultVariants,
|
|
140
|
+
...presets,
|
|
141
|
+
},
|
|
142
|
+
radius: radius ?? {},
|
|
143
|
+
stroke: stroke ?? {},
|
|
144
|
+
size: size ?? {},
|
|
145
|
+
effects: effects ?? {},
|
|
146
|
+
media: createMediaQueries(breakpoints),
|
|
147
|
+
border: borderCreator,
|
|
148
|
+
typography: typography ?? {},
|
|
149
|
+
icons: icons,
|
|
150
|
+
values: values ?? {},
|
|
151
|
+
sized: (size) => {
|
|
137
152
|
const value = typeof size == 'number' ? size * baseSpacing : size;
|
|
138
153
|
return {
|
|
139
154
|
width: value,
|
|
140
155
|
height: value,
|
|
141
156
|
};
|
|
142
|
-
}
|
|
143
|
-
|
|
157
|
+
},
|
|
158
|
+
};
|
|
159
|
+
themeStore.setTheme(themeObj);
|
|
144
160
|
return themeObj;
|
|
145
161
|
};
|
|
146
|
-
exports.createTheme = createTheme;
|
|
147
162
|
//# 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,29 +1,23 @@
|
|
|
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;
|
|
7
1
|
/**
|
|
8
2
|
* CSS custom-property prefix used for all codeleap design-token variables.
|
|
9
3
|
* Color tokens are injected as `--cl-<tokenPath>` on `:root` (or a scheme-specific
|
|
10
4
|
* `[data-color-scheme]` selector). Changing this value after tokens are injected
|
|
11
5
|
* will break existing CSS that references `var(--cl-*)`.
|
|
12
6
|
*/
|
|
13
|
-
|
|
7
|
+
export const CSS_VAR_PREFIX = '--cl-';
|
|
14
8
|
/**
|
|
15
9
|
* Storage key used to persist the active color scheme name in an uncompressed format
|
|
16
10
|
* (plain string, not LZ-encoded). Stored separately so a lightweight inline script
|
|
17
11
|
* can read it before React hydrates and set `data-color-scheme` on `<html>` to prevent
|
|
18
12
|
* a flash of the wrong color scheme (FOUC).
|
|
19
13
|
*/
|
|
20
|
-
|
|
14
|
+
export const DOM_COLOR_SCHEME_KEY = '@styles.dom.colorScheme';
|
|
21
15
|
/**
|
|
22
16
|
* Recursively flattens a nested color token object into a flat map of CSS custom-property
|
|
23
17
|
* names to their values. Nesting levels are joined with `-` (e.g., `{ primary: { solid: '#fff' } }`
|
|
24
18
|
* → `{ '--cl-primary-solid': '#fff' }`). Non-string leaf values are silently skipped.
|
|
25
19
|
*/
|
|
26
|
-
function flattenColorMap(obj, path = '', prefix =
|
|
20
|
+
export function flattenColorMap(obj, path = '', prefix = CSS_VAR_PREFIX) {
|
|
27
21
|
const result = {};
|
|
28
22
|
for (const [key, value] of Object.entries(obj)) {
|
|
29
23
|
const cssPath = path ? `${path}-${key}` : key;
|
|
@@ -42,7 +36,7 @@ function flattenColorMap(obj, path = '', prefix = exports.CSS_VAR_PREFIX) {
|
|
|
42
36
|
* CSS variable references so that color-scheme switching via `data-color-scheme` CSS
|
|
43
37
|
* selectors works without JavaScript re-renders.
|
|
44
38
|
*/
|
|
45
|
-
function buildCssVarProxy(obj, path = '', prefix =
|
|
39
|
+
export function buildCssVarProxy(obj, path = '', prefix = CSS_VAR_PREFIX) {
|
|
46
40
|
if (typeof obj !== 'object' || obj === null)
|
|
47
41
|
return obj;
|
|
48
42
|
const result = {};
|
|
@@ -66,7 +60,7 @@ function buildCssVarProxy(obj, path = '', prefix = exports.CSS_VAR_PREFIX) {
|
|
|
66
60
|
* The `'default'` scheme removes the attribute entirely so the `:root` base variables
|
|
67
61
|
* apply. No-ops on non-browser environments (SSR, React Native).
|
|
68
62
|
*/
|
|
69
|
-
function applyColorSchemeToDOM(colorScheme) {
|
|
63
|
+
export function applyColorSchemeToDOM(colorScheme) {
|
|
70
64
|
if (typeof document === 'undefined')
|
|
71
65
|
return;
|
|
72
66
|
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":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,OAAO,CAAA;AAErC;;;;;GAKG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,yBAAyB,CAAA;AAE7D;;;;GAIG;AACH,MAAM,UAAU,eAAe,CAC7B,GAAwB,EACxB,IAAI,GAAG,EAAE,EACT,MAAM,GAAG,cAAc;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,MAAM,UAAU,gBAAgB,CAAI,GAAM,EAAE,IAAI,GAAG,EAAE,EAAE,MAAM,GAAG,cAAc;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,MAAM,UAAU,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,18 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
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; } });
|
|
1
|
+
export { createStyles, createStylesWithContext, CONTEXT_FACTORY_SYMBOL } from './createStyles';
|
|
2
|
+
export { createTheme } from './createTheme';
|
|
3
|
+
export { calc } from './calc';
|
|
4
|
+
export { flattenColorMap, buildCssVarProxy, applyColorSchemeToDOM, CSS_VAR_PREFIX, DOM_COLOR_SCHEME_KEY } from './cssVariables';
|
|
18
5
|
//# 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":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAA;AAC9F,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA"}
|
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.generateColorScheme = generateColorScheme;
|
|
4
|
-
const tools_1 = require("../tools");
|
|
1
|
+
import { colorTools } from '../tools';
|
|
5
2
|
const lightnesses = [95, 85, 75, 60, 45, 30, 27, 21, 16, 10];
|
|
6
3
|
const defaultLightnessMap = Object.fromEntries(lightnesses.map((l, i) => {
|
|
7
4
|
const step = ((i + 1) * 100).toString();
|
|
@@ -25,12 +22,12 @@ const defaultAlphasMap = Object.fromEntries(alphas.map((a, i) => {
|
|
|
25
22
|
* Default alpha steps: `[0.05, 0.10, …, 0.90]`.
|
|
26
23
|
* Both can be overridden by passing custom maps (step → value).
|
|
27
24
|
*/
|
|
28
|
-
function generateColorScheme(anchorHex, prefix = 'primary', lightnesses = defaultLightnessMap, alphas = defaultAlphasMap) {
|
|
29
|
-
const { h, s } =
|
|
30
|
-
const baseRGB =
|
|
25
|
+
export function generateColorScheme(anchorHex, prefix = 'primary', lightnesses = defaultLightnessMap, alphas = defaultAlphasMap) {
|
|
26
|
+
const { h, s } = colorTools.hexToHSL(anchorHex);
|
|
27
|
+
const baseRGB = colorTools.hexToRGB(anchorHex);
|
|
31
28
|
const scheme = {};
|
|
32
29
|
Object.entries(lightnesses).forEach(([step, lightness]) => {
|
|
33
|
-
const rgb =
|
|
30
|
+
const rgb = colorTools.hslToRGB(h, s, lightness);
|
|
34
31
|
scheme[`${prefix}Solid${step}`] = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 1.00)`;
|
|
35
32
|
});
|
|
36
33
|
Object.entries(alphas).forEach(([step, alpha]) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generateColorScheme.js","sourceRoot":"","sources":["../../src/theme/generateColorScheme.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"generateColorScheme.js","sourceRoot":"","sources":["../../src/theme/generateColorScheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAGrC,MAAM,WAAW,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAA;AAE5D,MAAM,mBAAmB,GAAG,MAAM,CAAC,WAAW,CAC5C,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;IACvB,MAAM,IAAI,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,QAAQ,EAAE,CAAA;IACvC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,CAAA;AAClB,CAAC,CAAC,CACH,CAAA;AAED,MAAM,MAAM,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAA;AAE3E,MAAM,gBAAgB,GAAG,MAAM,CAAC,WAAW,CACzC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;IAClB,MAAM,IAAI,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,QAAQ,EAAE,CAAA;IACvC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,CAAA;AAClB,CAAC,CAAC,CACH,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,mBAAmB,CACjC,SAAiB,EACjB,MAAM,GAAG,SAAS,EAClB,cAAyC,mBAAmB,EAC5D,SAAkC,gBAAgB;IAElD,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,UAAU,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAA;IAC/C,MAAM,OAAO,GAAG,UAAU,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAA;IAE9C,MAAM,MAAM,GAA2B,EAAE,CAAA;IAEzC,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,EAAE;QACxD,MAAM,GAAG,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,SAAS,CAAC,CAAA;QAChD,MAAM,CAAC,GAAG,MAAM,QAAQ,IAAI,EAAE,CAAC,GAAG,QAAQ,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,SAAS,CAAA;IAC9E,CAAC,CAAC,CAAA;IAEF,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE;QAC/C,MAAM,CAAC,GAAG,MAAM,cAAc,IAAI,EAAE,CAAC,GAAG,QAAQ,OAAO,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC,KAAK,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAA;IAC/G,CAAC,CAAC,CAAA;IAEF,OAAO,MAAM,CAAA;AACf,CAAC"}
|
package/dist/theme/index.js
CHANGED
|
@@ -1,20 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
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("./themeStore"), exports);
|
|
18
|
-
__exportStar(require("./validateTheme"), exports);
|
|
19
|
-
__exportStar(require("./generateColorScheme"), exports);
|
|
1
|
+
export * from './themeStore';
|
|
2
|
+
export * from './validateTheme';
|
|
3
|
+
export * from './generateColorScheme';
|
|
20
4
|
//# sourceMappingURL=index.js.map
|
package/dist/theme/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,uBAAuB,CAAA"}
|
|
@@ -12,9 +12,9 @@ export type ThemeState = {
|
|
|
12
12
|
*/
|
|
13
13
|
export declare class ThemeStore {
|
|
14
14
|
private readonly alternateColorsSchemeStore;
|
|
15
|
-
readonly colorSchemeStore: import("nanostores"
|
|
16
|
-
readonly themeStore: import("nanostores"
|
|
17
|
-
readonly variantsStore: import("nanostores"
|
|
15
|
+
readonly colorSchemeStore: import("nanostores").PreinitializedWritableAtom<string | null> & object;
|
|
16
|
+
readonly themeStore: import("nanostores").PreinitializedWritableAtom<ITheme | null> & object;
|
|
17
|
+
readonly variantsStore: import("nanostores").PreinitializedMapStore<IAppVariants> & object;
|
|
18
18
|
/**
|
|
19
19
|
* Gets the current theme.
|
|
20
20
|
* @returns {ITheme | null} Current theme or null if not set
|
|
@@ -99,7 +99,7 @@ export declare const themeStore: ThemeStore;
|
|
|
99
99
|
* so they re-render only when either the theme object or the active color scheme
|
|
100
100
|
* changes — not on every `ThemeStore` method call.
|
|
101
101
|
*/
|
|
102
|
-
export declare const themeStoreComputed: import("nanostores"
|
|
102
|
+
export declare const themeStoreComputed: import("nanostores").ReadableAtom<{
|
|
103
103
|
theme: AppTheme<Theme>;
|
|
104
104
|
colorScheme: string | null;
|
|
105
105
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themeStore.d.ts","sourceRoot":"","sources":["../../src/theme/themeStore.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAG1E;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;CAC3B,CAAA;AAED;;;GAGG;AACH,qBAAa,UAAU;IACrB,OAAO,CAAC,QAAQ,CAAC,0BAA0B,CAAuC;IAElF,SAAgB,gBAAgB,
|
|
1
|
+
{"version":3,"file":"themeStore.d.ts","sourceRoot":"","sources":["../../src/theme/themeStore.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAG1E;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;CAC3B,CAAA;AAED;;;GAGG;AACH,qBAAa,UAAU;IACrB,OAAO,CAAC,QAAQ,CAAC,0BAA0B,CAAuC;IAElF,SAAgB,gBAAgB,0EAA4B;IAE5D,SAAgB,UAAU,0EAA4B;IAEtD,SAAgB,aAAa,qEAAwC;IAErE;;;OAGG;IACH,IAAI,KAAK,kBAER;IAED;;;OAGG;IACH,IAAI,UAAU,2BAGb;IAED;;;OAGG;IACH,IAAI,WAAW,kBAEd;IAED;;;OAGG;IACH,IAAI,QAAQ,iBAEX;IAED;;;OAGG;IACH,IAAI,qBAAqB;;MAExB;IAED;;;;OAIG;IACH,WAAW,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC;IAI1B;;;OAGG;IACH,cAAc,CAAC,WAAW,EAAE,MAAM;IAIlC;;;OAGG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM;IAItB;;;OAGG;IACH,wBAAwB,CAAC,MAAM,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,CAAA;KAAE;IAI5D;;;;OAIG;IACH,OAAO,CAAC,mBAAmB;IAW3B;;;;;OAKG;IACH,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ;;;IAkBhD;;;;OAIG;IACH,gBAAgB,CAAC,IAAI,EAAC,MAAM;;;CAW7B;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,YAAmB,CAAA;AAE1C;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB;WAIF,QAAQ,CAAC,KAAK,CAAC;;EAEzC,CAAA"}
|