@a-type/ui 1.8.9 → 1.8.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/dist/cjs/colorMode.d.ts +1 -0
- package/dist/cjs/colorMode.js +10 -0
- package/dist/cjs/colorMode.js.map +1 -1
- package/dist/cjs/components/card/Card.d.ts +1 -1
- package/dist/cjs/hooks/index.d.ts +1 -0
- package/dist/cjs/hooks/index.js +1 -0
- package/dist/cjs/hooks/index.js.map +1 -1
- package/dist/cjs/hooks/useOverrideTheme.d.ts +2 -0
- package/dist/cjs/hooks/useOverrideTheme.js +17 -0
- package/dist/cjs/hooks/useOverrideTheme.js.map +1 -0
- package/dist/cjs/themes.stories.d.ts +2 -0
- package/dist/cjs/themes.stories.js +16 -2
- package/dist/cjs/themes.stories.js.map +1 -1
- package/dist/cjs/uno.preset.js +148 -127
- package/dist/cjs/uno.preset.js.map +1 -1
- package/dist/css/main.css +591 -126
- package/dist/esm/colorMode.d.ts +1 -0
- package/dist/esm/colorMode.js +9 -0
- package/dist/esm/colorMode.js.map +1 -1
- package/dist/esm/components/card/Card.d.ts +1 -1
- package/dist/esm/hooks/index.d.ts +1 -0
- package/dist/esm/hooks/index.js +1 -0
- package/dist/esm/hooks/index.js.map +1 -1
- package/dist/esm/hooks/useOverrideTheme.d.ts +2 -0
- package/dist/esm/hooks/useOverrideTheme.js +14 -0
- package/dist/esm/hooks/useOverrideTheme.js.map +1 -0
- package/dist/esm/themes.stories.d.ts +2 -0
- package/dist/esm/themes.stories.js +16 -2
- package/dist/esm/themes.stories.js.map +1 -1
- package/dist/esm/uno.preset.js +148 -127
- package/dist/esm/uno.preset.js.map +1 -1
- package/package.json +1 -1
- package/src/colorMode.ts +10 -0
- package/src/hooks/index.ts +1 -0
- package/src/hooks/useOverrideTheme.ts +14 -0
- package/src/themes.stories.tsx +36 -2
- package/src/uno.preset.ts +178 -127
package/dist/cjs/colorMode.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
export declare function setColorMode(mode: 'system' | 'light' | 'dark'): void;
|
|
2
2
|
export declare function getColorMode(): 'system' | 'light' | 'dark';
|
|
3
|
+
export declare function getResolvedColorMode(): 'light' | 'dark';
|
|
3
4
|
export declare function subscribeToColorModeChange(callback: (mode: 'system' | 'light' | 'dark') => void): () => void;
|
package/dist/cjs/colorMode.js
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
exports.setColorMode = setColorMode;
|
|
5
5
|
exports.getColorMode = getColorMode;
|
|
6
|
+
exports.getResolvedColorMode = getResolvedColorMode;
|
|
6
7
|
exports.subscribeToColorModeChange = subscribeToColorModeChange;
|
|
7
8
|
function setColorMode(mode) {
|
|
8
9
|
if (typeof window === 'undefined')
|
|
@@ -54,6 +55,15 @@ function getColorMode() {
|
|
|
54
55
|
return 'system';
|
|
55
56
|
return window.localStorage.getItem('colorMode') || 'system';
|
|
56
57
|
}
|
|
58
|
+
function getResolvedColorMode() {
|
|
59
|
+
const mode = getColorMode();
|
|
60
|
+
if (mode === 'system') {
|
|
61
|
+
return window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
62
|
+
? 'dark'
|
|
63
|
+
: 'light';
|
|
64
|
+
}
|
|
65
|
+
return mode;
|
|
66
|
+
}
|
|
57
67
|
function subscribeToColorModeChange(callback) {
|
|
58
68
|
if (typeof window === 'undefined')
|
|
59
69
|
return () => { };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colorMode.js","sourceRoot":"","sources":["../../src/colorMode.ts"],"names":[],"mappings":";;AAAA,oCAQC;AA8CD,oCAGC;AAED,gEASC;
|
|
1
|
+
{"version":3,"file":"colorMode.js","sourceRoot":"","sources":["../../src/colorMode.ts"],"names":[],"mappings":"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"}
|
|
@@ -25,7 +25,7 @@ export declare const CardActions: import("react").FunctionComponent<import("reac
|
|
|
25
25
|
export declare const CardMenu: import("react").FunctionComponent<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
|
|
26
26
|
export declare const cardGridColumns: {
|
|
27
27
|
default: (size: number) => 2 | 1 | 3;
|
|
28
|
-
small: (size: number) => 2 | 1 |
|
|
28
|
+
small: (size: number) => 2 | 1 | 3 | 4;
|
|
29
29
|
};
|
|
30
30
|
export declare const CardGrid: ({ children, className, columns, gap, }: MasonryProps) => import("react/jsx-runtime.js").JSX.Element;
|
|
31
31
|
export declare const Card: import("react").FunctionComponent<import("../box/Box.js").BoxProps> & {
|
|
@@ -2,6 +2,7 @@ export * from './useAnimationFrame.js';
|
|
|
2
2
|
export * from './useLongPress.js';
|
|
3
3
|
export * from './useMergedRef.js';
|
|
4
4
|
export * from './useOnUnmount.js';
|
|
5
|
+
export * from './useOverrideTheme.js';
|
|
5
6
|
export * from './useSize.js';
|
|
6
7
|
export * from './useStableCallback.js';
|
|
7
8
|
export * from './useTitleBarColor.js';
|
package/dist/cjs/hooks/index.js
CHANGED
|
@@ -19,6 +19,7 @@ __exportStar(require("./useAnimationFrame.js"), exports);
|
|
|
19
19
|
__exportStar(require("./useLongPress.js"), exports);
|
|
20
20
|
__exportStar(require("./useMergedRef.js"), exports);
|
|
21
21
|
__exportStar(require("./useOnUnmount.js"), exports);
|
|
22
|
+
__exportStar(require("./useOverrideTheme.js"), exports);
|
|
22
23
|
__exportStar(require("./useSize.js"), exports);
|
|
23
24
|
__exportStar(require("./useStableCallback.js"), exports);
|
|
24
25
|
__exportStar(require("./useTitleBarColor.js"), exports);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,yDAAuC;AACvC,oDAAkC;AAClC,oDAAkC;AAClC,oDAAkC;AAClC,+CAA6B;AAC7B,yDAAuC;AACvC,wDAAsC;AACtC,iDAA+B;AAC/B,+DAA6C;AAC7C,qDAAmC;AACnC,iDAA+B"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,yDAAuC;AACvC,oDAAkC;AAClC,oDAAkC;AAClC,oDAAkC;AAClC,wDAAsC;AACtC,+CAA6B;AAC7B,yDAAuC;AACvC,wDAAsC;AACtC,iDAA+B;AAC/B,+DAA6C;AAC7C,qDAAmC;AACnC,iDAA+B"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
// @unocss-include
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.useOverrideTheme = useOverrideTheme;
|
|
5
|
+
const react_1 = require("react");
|
|
6
|
+
function useOverrideTheme(theme) {
|
|
7
|
+
(0, react_1.useLayoutEffect)(() => {
|
|
8
|
+
if (!theme) {
|
|
9
|
+
return;
|
|
10
|
+
}
|
|
11
|
+
document.body.classList.add(`theme-override-${theme}`);
|
|
12
|
+
return () => {
|
|
13
|
+
document.body.classList.remove(`theme-override-${theme}`);
|
|
14
|
+
};
|
|
15
|
+
}, [theme]);
|
|
16
|
+
}
|
|
17
|
+
//# sourceMappingURL=useOverrideTheme.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useOverrideTheme.js","sourceRoot":"","sources":["../../../src/hooks/useOverrideTheme.ts"],"names":[],"mappings":";;AAGA,4CAUC;AAbD,iCAAwC;AAGxC,SAAgB,gBAAgB,CAAC,KAAmC;IACnE,IAAA,uBAAe,EAAC,GAAG,EAAE;QACpB,IAAI,CAAC,KAAK,EAAE,CAAC;YACZ,OAAO;QACR,CAAC;QACD,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAkB,KAAK,EAAE,CAAC,CAAC;QACvD,OAAO,GAAG,EAAE;YACX,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAkB,KAAK,EAAE,CAAC,CAAC;QAC3D,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AACb,CAAC"}
|
|
@@ -4,9 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
5
5
|
};
|
|
6
6
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
-
exports.Default = void 0;
|
|
7
|
+
exports.Override = exports.Nesting = exports.Default = void 0;
|
|
8
8
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
9
9
|
const clsx_1 = __importDefault(require("clsx"));
|
|
10
|
+
const react_1 = require("react");
|
|
10
11
|
const index_js_1 = require("./components/actions/index.js");
|
|
11
12
|
const index_js_2 = require("./components/button/index.js");
|
|
12
13
|
const index_js_3 = require("./components/card/index.js");
|
|
@@ -15,6 +16,7 @@ const index_js_5 = require("./components/index.js");
|
|
|
15
16
|
const index_js_6 = require("./components/input/index.js");
|
|
16
17
|
const tabs_js_1 = require("./components/tabs/tabs.js");
|
|
17
18
|
const index_js_7 = require("./components/textArea/index.js");
|
|
19
|
+
const useOverrideTheme_js_1 = require("./hooks/useOverrideTheme.js");
|
|
18
20
|
const meta = {
|
|
19
21
|
title: 'themes',
|
|
20
22
|
argTypes: {},
|
|
@@ -27,7 +29,7 @@ exports.default = meta;
|
|
|
27
29
|
function DemoUI({ className }) {
|
|
28
30
|
const nextWeek = new Date();
|
|
29
31
|
nextWeek.setDate(nextWeek.getDate() + 7);
|
|
30
|
-
return ((0, jsx_runtime_1.jsxs)(index_js_5.PageRoot, { children: [(0, jsx_runtime_1.jsx)(index_js_5.PageContent, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('grid gap-2 grid-cols-2'
|
|
32
|
+
return ((0, jsx_runtime_1.jsxs)(index_js_5.PageRoot, { className: (0, clsx_1.default)('flex-1', className), children: [(0, jsx_runtime_1.jsx)(index_js_5.PageContent, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('grid gap-2 grid-cols-2'), children: [(0, jsx_runtime_1.jsxs)(index_js_5.Box, { gap: true, wrap: true, p: true, children: [(0, jsx_runtime_1.jsx)(index_js_2.Button, { color: "primary", children: "Primary" }), (0, jsx_runtime_1.jsx)(index_js_2.Button, { color: "accent", children: "Accent" }), (0, jsx_runtime_1.jsx)(index_js_2.Button, { children: "Default" }), (0, jsx_runtime_1.jsx)(index_js_2.Button, { color: "contrast", children: "Contrast" }), (0, jsx_runtime_1.jsx)(index_js_2.Button, { color: "destructive", children: "Destructive" }), (0, jsx_runtime_1.jsx)(index_js_2.Button, { color: "ghost", children: "Ghost" }), (0, jsx_runtime_1.jsx)(index_js_2.Button, { color: "ghostAccent", children: "Ghost Accent" }), (0, jsx_runtime_1.jsx)(index_js_2.Button, { size: "small", color: "destructive", children: "Destructive Small" }), (0, jsx_runtime_1.jsx)(index_js_2.Button, { size: "small", color: "ghostDestructive", children: "Ghost Destructive Small" })] }), (0, jsx_runtime_1.jsxs)(index_js_5.Box, { gap: true, wrap: true, p: true, items: "start", children: [(0, jsx_runtime_1.jsx)(index_js_6.Input, { placeholder: "Placeholder" }), (0, jsx_runtime_1.jsx)(index_js_7.TextArea, { placeholder: "Placeholder" }), (0, jsx_runtime_1.jsxs)(index_js_5.Box, { d: "row", gap: true, items: "center", children: [(0, jsx_runtime_1.jsx)(index_js_5.Checkbox, { defaultChecked: true }), (0, jsx_runtime_1.jsx)("span", { children: "Checkbox" })] }), (0, jsx_runtime_1.jsxs)(index_js_5.ToggleGroup, { type: "single", children: [(0, jsx_runtime_1.jsx)(index_js_5.ToggleGroup.Item, { value: "1", children: "Toggle 1" }), (0, jsx_runtime_1.jsx)(index_js_5.ToggleGroup.Item, { value: "2", children: "Toggle 2" })] })] }), (0, jsx_runtime_1.jsxs)(index_js_5.Box, { layout: "start center", d: "col", gap: true, p: true, children: [(0, jsx_runtime_1.jsx)(index_js_5.H1, { children: "Heading 1" }), (0, jsx_runtime_1.jsx)(index_js_5.H2, { children: "Heading 2" }), (0, jsx_runtime_1.jsx)(index_js_5.H3, { children: "Heading 3" }), (0, jsx_runtime_1.jsx)(index_js_5.H4, { children: "Heading 4" }), (0, jsx_runtime_1.jsx)(index_js_5.P, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }), (0, jsx_runtime_1.jsx)(index_js_5.TextSkeleton, { maxLength: 30 }), (0, jsx_runtime_1.jsx)(index_js_5.TextSkeleton, { maxLength: 10 })] }), (0, jsx_runtime_1.jsxs)(index_js_3.Card, { children: [(0, jsx_runtime_1.jsxs)(index_js_3.Card.Main, { onClick: () => { }, children: [(0, jsx_runtime_1.jsx)(index_js_3.Card.Title, { children: "Card Title" }), (0, jsx_runtime_1.jsx)(index_js_3.Card.Content, { children: "Card Content" })] }), (0, jsx_runtime_1.jsx)(index_js_3.Card.Footer, { children: (0, jsx_runtime_1.jsxs)(index_js_3.Card.Actions, { children: [(0, jsx_runtime_1.jsx)(index_js_2.Button, { size: "small", children: "Action 1" }), (0, jsx_runtime_1.jsx)(index_js_2.Button, { size: "icon-small", color: "ghost", children: (0, jsx_runtime_1.jsx)(index_js_4.Icon, { name: "placeholder" }) })] }) })] }), (0, jsx_runtime_1.jsxs)(tabs_js_1.Tabs, { defaultValue: "tab1", children: [(0, jsx_runtime_1.jsxs)(tabs_js_1.Tabs.List, { children: [(0, jsx_runtime_1.jsx)(tabs_js_1.Tabs.Trigger, { value: "tab1", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(tabs_js_1.Tabs.Trigger, { value: "tab2", children: "Tab 2" })] }), (0, jsx_runtime_1.jsx)(tabs_js_1.Tabs.Content, { value: "tab1", children: "Tab 1 Content" }), (0, jsx_runtime_1.jsx)(tabs_js_1.Tabs.Content, { value: "tab2", children: "Tab 2 Content" })] }), (0, jsx_runtime_1.jsxs)(index_js_1.ActionBar, { children: [(0, jsx_runtime_1.jsxs)(index_js_1.ActionButton, { children: [(0, jsx_runtime_1.jsx)(index_js_4.Icon, { name: "placeholder" }), "Hello"] }), (0, jsx_runtime_1.jsxs)(index_js_1.ActionButton, { color: "primary", children: [(0, jsx_runtime_1.jsx)(index_js_4.Icon, { name: "placeholder" }), "World"] }), (0, jsx_runtime_1.jsx)(index_js_1.ActionButton, { children: (0, jsx_runtime_1.jsx)(index_js_4.Icon, { name: "placeholder" }) })] }), (0, jsx_runtime_1.jsxs)(index_js_5.AvatarList, { count: 3, children: [(0, jsx_runtime_1.jsx)(index_js_5.AvatarList.Item, { index: 0, name: "John Doe" }), (0, jsx_runtime_1.jsx)(index_js_5.AvatarList.Item, { index: 1, name: "Jane Doe" }), (0, jsx_runtime_1.jsx)(index_js_5.AvatarList.Item, { index: 2, name: "John Smith" })] }), (0, jsx_runtime_1.jsxs)(index_js_5.ContextMenu, { children: [(0, jsx_runtime_1.jsx)(index_js_5.ContextMenu.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(index_js_5.Tooltip, { content: "Hello World", children: (0, jsx_runtime_1.jsx)(index_js_2.Button, { children: "Hover or right click" }) }) }), (0, jsx_runtime_1.jsxs)(index_js_5.ContextMenu.Content, { children: [(0, jsx_runtime_1.jsx)(index_js_5.ContextMenu.Arrow, {}), (0, jsx_runtime_1.jsx)(index_js_5.ContextMenu.Item, { children: "Item 1" }), (0, jsx_runtime_1.jsx)(index_js_5.ContextMenu.Item, { children: "Item 2" }), (0, jsx_runtime_1.jsx)(index_js_5.ContextMenu.Item, { children: "Item 3" })] })] }), (0, jsx_runtime_1.jsxs)(index_js_5.Dialog, { children: [(0, jsx_runtime_1.jsx)(index_js_5.Dialog.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(index_js_2.Button, { children: "Click" }) }), (0, jsx_runtime_1.jsxs)(index_js_5.Dialog.Content, { children: [(0, jsx_runtime_1.jsx)(index_js_5.Dialog.Title, { children: "Hello there" }), (0, jsx_runtime_1.jsx)(index_js_5.Dialog.Description, { children: "Im a dialog" }), (0, jsx_runtime_1.jsxs)(index_js_5.Dialog.Actions, { children: [(0, jsx_runtime_1.jsx)(index_js_5.Dialog.Close, { children: "Close" }), (0, jsx_runtime_1.jsx)(index_js_2.Button, { color: "primary", children: "Action" })] })] })] }), (0, jsx_runtime_1.jsx)(index_js_5.DateRangePicker, { className: "grid-col-span-2", value: {
|
|
31
33
|
start: new Date(),
|
|
32
34
|
end: nextWeek,
|
|
33
35
|
}, onChange: () => { } }), (0, jsx_runtime_1.jsx)(index_js_5.Progress, { value: 50, className: "m-auto" }), (0, jsx_runtime_1.jsxs)(index_js_5.Box, { surface: "primary", p: true, gap: true, children: [(0, jsx_runtime_1.jsx)("div", { children: "Primary surface" }), (0, jsx_runtime_1.jsx)(index_js_2.Button, { color: "ghost", children: "Ghost" })] }), (0, jsx_runtime_1.jsx)(index_js_5.Box, { surface: "accent", p: true, children: "Accent surface" }), (0, jsx_runtime_1.jsx)(index_js_5.Box, { surface: "default", p: true, children: "Default surface" }), (0, jsx_runtime_1.jsx)(index_js_5.Box, { surface: "attention", p: true, children: "Attention surface" }), (0, jsx_runtime_1.jsx)(index_js_5.Box, { children: (0, jsx_runtime_1.jsx)(index_js_5.Note, { children: "Note note" }) }), (0, jsx_runtime_1.jsx)(index_js_5.Box, { justify: "start", items: "start", children: (0, jsx_runtime_1.jsxs)(index_js_5.HorizontalList, { openDirection: "down", children: [(0, jsx_runtime_1.jsx)(index_js_2.Button, { size: "small", children: "One" }), (0, jsx_runtime_1.jsx)(index_js_2.Button, { size: "small", children: "Two" }), (0, jsx_runtime_1.jsx)(index_js_2.Button, { size: "small", children: "Three" }), (0, jsx_runtime_1.jsx)(index_js_2.Button, { size: "small", children: "Four" }), (0, jsx_runtime_1.jsx)(index_js_2.Button, { size: "small", children: "Five" }), (0, jsx_runtime_1.jsx)(index_js_2.Button, { size: "small", children: "Six" })] }) }), (0, jsx_runtime_1.jsx)(index_js_5.ImageUploader, { className: "h-200px", value: null, onChange: () => { } }), (0, jsx_runtime_1.jsxs)(index_js_5.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(index_js_5.DropdownMenu.Trigger, { asChild: true, className: "m-auto", children: (0, jsx_runtime_1.jsx)(index_js_2.Button, { children: "Dropdown" }) }), (0, jsx_runtime_1.jsxs)(index_js_5.DropdownMenu.Content, { children: [(0, jsx_runtime_1.jsx)(index_js_5.DropdownMenu.Item, { children: "Item 1" }), (0, jsx_runtime_1.jsx)(index_js_5.DropdownMenu.Item, { children: "Item 2" }), (0, jsx_runtime_1.jsx)(index_js_5.DropdownMenu.Item, { children: "Item 3" })] })] })] }) }), (0, jsx_runtime_1.jsx)(index_js_5.PageNav, { children: (0, jsx_runtime_1.jsxs)(index_js_5.NavBarRoot, { children: [(0, jsx_runtime_1.jsxs)(index_js_5.NavBarItem, { children: [(0, jsx_runtime_1.jsx)(index_js_5.NavBarItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(index_js_5.NavBarItemIcon, { name: "cart" }) }), (0, jsx_runtime_1.jsx)(index_js_5.NavBarItemText, { children: "Item 1 long" })] }), (0, jsx_runtime_1.jsxs)(index_js_5.NavBarItem, { active: true, children: [(0, jsx_runtime_1.jsx)(index_js_5.NavBarItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(index_js_5.NavBarItemIcon, { asChild: true, children: (0, jsx_runtime_1.jsx)(index_js_4.Icon, { name: "book" }) }) }), (0, jsx_runtime_1.jsx)(index_js_5.NavBarItemText, { children: "Item 2" }), (0, jsx_runtime_1.jsx)(index_js_5.NavBarItemPip, {})] }), (0, jsx_runtime_1.jsxs)(index_js_5.NavBarItem, { color: "neutral", active: true, children: [(0, jsx_runtime_1.jsx)(index_js_5.NavBarItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(index_js_5.NavBarItemIcon, { asChild: true, children: (0, jsx_runtime_1.jsx)(index_js_4.Icon, { name: "book" }) }) }), (0, jsx_runtime_1.jsx)(index_js_5.NavBarItemText, { children: "Neutral" }), (0, jsx_runtime_1.jsx)(index_js_5.NavBarItemPip, {})] })] }) })] }));
|
|
@@ -37,4 +39,16 @@ exports.Default = {
|
|
|
37
39
|
return (0, jsx_runtime_1.jsx)(DemoUI, {});
|
|
38
40
|
},
|
|
39
41
|
};
|
|
42
|
+
exports.Nesting = {
|
|
43
|
+
render() {
|
|
44
|
+
return ((0, jsx_runtime_1.jsxs)(index_js_5.Box, { d: "col", p: true, gap: true, children: [(0, jsx_runtime_1.jsx)(index_js_5.Box, { d: "row", gap: true, surface: "primary", children: (0, jsx_runtime_1.jsx)(index_js_2.Button, { color: "primary", children: "Root theme" }) }), (0, jsx_runtime_1.jsx)(DemoUI, { className: "theme-eggplant override-dark flex-1" })] }));
|
|
45
|
+
},
|
|
46
|
+
};
|
|
47
|
+
exports.Override = {
|
|
48
|
+
render() {
|
|
49
|
+
const [theme, setTheme] = (0, react_1.useState)(null);
|
|
50
|
+
(0, useOverrideTheme_js_1.useOverrideTheme)(theme);
|
|
51
|
+
return ((0, jsx_runtime_1.jsx)(index_js_5.Provider, { children: (0, jsx_runtime_1.jsxs)(index_js_5.Box, { d: "col", p: true, gap: true, children: [(0, jsx_runtime_1.jsx)(index_js_5.ColorPicker, { value: theme, onChange: setTheme }), (0, jsx_runtime_1.jsx)(DemoUI, {})] }) }));
|
|
52
|
+
},
|
|
53
|
+
};
|
|
40
54
|
//# sourceMappingURL=themes.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themes.stories.js","sourceRoot":"","sources":["../../src/themes.stories.tsx"],"names":[],"mappings":";;;;;;;AACA,gDAAwB;AACxB,4DAAwE;AACxE,2DAAsD;AACtD,yDAAkD;AAClD,yDAAkD;AAClD,
|
|
1
|
+
{"version":3,"file":"themes.stories.js","sourceRoot":"","sources":["../../src/themes.stories.tsx"],"names":[],"mappings":"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"}
|
package/dist/cjs/uno.preset.js
CHANGED
|
@@ -551,6 +551,66 @@ function presetAglio({ scale = 'md', interFontLocation = 'https://resources.bisc
|
|
|
551
551
|
--color-shadow-2: var(--palette-shadow-3);
|
|
552
552
|
--color-overlay: var(--palette-black-overlay);
|
|
553
553
|
`;
|
|
554
|
+
const lemon = themeVars({
|
|
555
|
+
primary: 'yellow',
|
|
556
|
+
accent: 'green',
|
|
557
|
+
grayTweak: -20,
|
|
558
|
+
});
|
|
559
|
+
const leek = themeVars({
|
|
560
|
+
primary: 'green',
|
|
561
|
+
accent: 'blue',
|
|
562
|
+
grayTweak: 20,
|
|
563
|
+
});
|
|
564
|
+
const tomato = themeVars({
|
|
565
|
+
primary: 'magenta',
|
|
566
|
+
accent: 'green',
|
|
567
|
+
grayTweak: -20,
|
|
568
|
+
});
|
|
569
|
+
const blueberry = themeVars({
|
|
570
|
+
primary: 'blue',
|
|
571
|
+
accent: 'green',
|
|
572
|
+
grayTweak: 20,
|
|
573
|
+
});
|
|
574
|
+
const eggplant = themeVars({
|
|
575
|
+
primary: 'purple',
|
|
576
|
+
accent: 'green',
|
|
577
|
+
grayTweak: -20,
|
|
578
|
+
});
|
|
579
|
+
const salt = themeVars({
|
|
580
|
+
primary: 'true-gray',
|
|
581
|
+
accent: {
|
|
582
|
+
default: 'true-gray-light',
|
|
583
|
+
wash: 'white',
|
|
584
|
+
light: 'true-gray-wash',
|
|
585
|
+
dark: 'true-gray',
|
|
586
|
+
},
|
|
587
|
+
globalSaturation: 0,
|
|
588
|
+
});
|
|
589
|
+
const computedVars = `
|
|
590
|
+
--palette-gray-wash: hsl(from var(--color-primary-wash) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--wash-saturation-tweak, 1) * var(--global-saturation, 1)) calc(l * pow(1.025, var(--mode-mult,1))));
|
|
591
|
+
--palette-gray: hsl(from var(--color-primary) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--global-saturation, 1)) calc(l * 1.125));
|
|
592
|
+
--palette-gray-dark: hsl(from var(--color-primary-dark) calc(h + var(--gray-hue-tweak, 0)) calc(s * 0.75 * var(--global-saturation, 1)) calc(l * pow(1.125, var(--mode-mult,1))));
|
|
593
|
+
--palette-gray-light: hsl(from var(--color-primary-light) calc(h + var(--gray-hue-tweak, 0) * pow(2, var(--mode-mult, 1))) calc(s * 0.5 * var(--global-saturation, 1)) calc(l * pow(1.25, var(--mode-mult,1))));
|
|
594
|
+
--color-wash: var(--color-gray-wash);
|
|
595
|
+
--color-gray-wash: var(--palette-gray-wash);
|
|
596
|
+
--color-gray: var(--palette-gray);
|
|
597
|
+
--color-gray-dark: var(--palette-gray-dark);
|
|
598
|
+
--color-gray-light: var(--palette-gray-light);
|
|
599
|
+
--palette-gray-1: var(--color-gray-wash);
|
|
600
|
+
--palette-gray-2: var(--color-gray-light);
|
|
601
|
+
--palette-gray-3: var(--color-gray-light);
|
|
602
|
+
--palette-gray-4: var(--color-gray);
|
|
603
|
+
--palette-gray-5: var(--color-gray);
|
|
604
|
+
--palette-gray-6: var(--color-gray);
|
|
605
|
+
--palette-gray-7: var(--color-gray-dark);
|
|
606
|
+
--palette-gray-8: var(--color-gray-dark);
|
|
607
|
+
--palette-gray-9: var(--color-black);
|
|
608
|
+
--palette-gray-0: var(--color-black);
|
|
609
|
+
--palette-gray-ex-1: var(--color-black);
|
|
610
|
+
--palette-gray-ex-2: var(--color-black);
|
|
611
|
+
--palette-white: hsl(from var(--color-wash) calc(h + 0) calc(s * 0.3 * var(--global-saturation, 1)) calc(min(100, l + 1 / var(--global-saturation, 1))));
|
|
612
|
+
--palette-black: hsl(from var(--color-gray-dark) calc(h + 0) calc(s * 0.1 * var(--global-saturation, 1)) calc(min(100, l / (var(--mode-mult,1) * -5 + pow(1 + var(--global-saturation, 1), 1.5)))));
|
|
613
|
+
`;
|
|
554
614
|
return `
|
|
555
615
|
@layer preflightBase, preflightVariant, components, responsive, variants, utilities;
|
|
556
616
|
|
|
@@ -565,6 +625,17 @@ function presetAglio({ scale = 'md', interFontLocation = 'https://resources.bisc
|
|
|
565
625
|
--palette-red-20: #804020;
|
|
566
626
|
--palette-red-10: #702604;
|
|
567
627
|
--palette-red-00:rgb(37, 28, 25);
|
|
628
|
+
/* TODO: define these */
|
|
629
|
+
--palette-magenta-90: hsl(from rgb(255, 244, 240) calc(h - 20) s l);
|
|
630
|
+
--palette-magenta-80: hsl(from #ffdbcf calc(h - 20) s l);
|
|
631
|
+
--palette-magenta-70: hsl(from #ffbea6 calc(h - 20) s l);
|
|
632
|
+
--palette-magenta-60: hsl(from #fdad8e calc(h - 20) s l);
|
|
633
|
+
--palette-magenta-50: hsl(from #ff8e61 calc(h - 20) s l);
|
|
634
|
+
--palette-magenta-40: hsl(from #d56f46 calc(h - 20) s l);
|
|
635
|
+
--palette-magenta-30: hsl(from #ae562d calc(h - 20) s l);
|
|
636
|
+
--palette-magenta-20: hsl(from #804020 calc(h - 20) s l);
|
|
637
|
+
--palette-magenta-10: hsl(from #702604 calc(h - 20) s l);
|
|
638
|
+
--palette-magenta-00: hsl(from rgb(37, 28, 25) calc(h - 20) s l);
|
|
568
639
|
--palette-green-90:rgb(242, 251, 247);
|
|
569
640
|
--palette-green-80: #c2ffe9;
|
|
570
641
|
--palette-green-70: #92f2d1;
|
|
@@ -585,7 +656,7 @@ function presetAglio({ scale = 'md', interFontLocation = 'https://resources.bisc
|
|
|
585
656
|
--palette-yellow-20:rgb(111, 83, 23);
|
|
586
657
|
--palette-yellow-10:rgb(84, 62, 12);
|
|
587
658
|
--palette-yellow-00:rgb(37, 33, 22);
|
|
588
|
-
--palette-blue-90:
|
|
659
|
+
--palette-blue-90: rgb(238, 248, 255);
|
|
589
660
|
--palette-blue-80: #c4e7ff;
|
|
590
661
|
--palette-blue-70: #87d3fc;
|
|
591
662
|
--palette-blue-60: #5fcefe;
|
|
@@ -629,40 +700,15 @@ function presetAglio({ scale = 'md', interFontLocation = 'https://resources.bisc
|
|
|
629
700
|
--palette-true-gray-20: #4f4f4f;
|
|
630
701
|
--palette-true-gray-10: #383838;
|
|
631
702
|
--palette-true-gray-00: #1f1f1f;
|
|
703
|
+
--palette-true-white: #ffffff;
|
|
704
|
+
--palette-true-black: #303030;
|
|
632
705
|
|
|
633
706
|
--global-saturation: ${saturationScale};
|
|
634
707
|
--global-corner-scale: ${cornerScale};
|
|
635
708
|
--global-border-scale: ${borderScale};
|
|
636
709
|
--global-spacing-scale: ${spacingScale};
|
|
637
710
|
|
|
638
|
-
|
|
639
|
-
--palette-gray: hsl(from var(--color-primary) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--global-saturation, 1)) calc(l * 1.125));
|
|
640
|
-
--palette-gray-dark: hsl(from var(--color-primary-dark) calc(h + var(--gray-hue-tweak, 0)) calc(s * 0.75 * var(--global-saturation, 1)) calc(l * pow(1.125, var(--mode-mult,1))));
|
|
641
|
-
--palette-gray-light: hsl(from var(--color-primary-light) calc(h + var(--gray-hue-tweak, 0) * pow(2, var(--mode-mult, 1))) calc(s * 0.5 * var(--global-saturation, 1)) calc(l * pow(1.25, var(--mode-mult,1))));
|
|
642
|
-
--color-wash: var(--color-gray-wash);
|
|
643
|
-
|
|
644
|
-
--color-gray-wash: var(--palette-gray-wash);
|
|
645
|
-
--color-gray: var(--palette-gray);
|
|
646
|
-
--color-gray-dark: var(--palette-gray-dark);
|
|
647
|
-
--color-gray-light: var(--palette-gray-light);
|
|
648
|
-
|
|
649
|
-
--palette-gray-1: var(--color-gray-wash);
|
|
650
|
-
--palette-gray-2: var(--color-gray-light);
|
|
651
|
-
--palette-gray-3: var(--color-gray-light);
|
|
652
|
-
--palette-gray-4: var(--color-gray);
|
|
653
|
-
--palette-gray-5: var(--color-gray);
|
|
654
|
-
--palette-gray-6: var(--color-gray);
|
|
655
|
-
--palette-gray-7: var(--color-gray-dark);
|
|
656
|
-
--palette-gray-8: var(--color-gray-dark);
|
|
657
|
-
--palette-gray-9: var(--color-black);
|
|
658
|
-
--palette-gray-0: var(--color-black);
|
|
659
|
-
--palette-gray-ex-1: var(--color-black);
|
|
660
|
-
--palette-gray-ex-2: var(--color-black);
|
|
661
|
-
|
|
662
|
-
--palette-true-white: #ffffff;
|
|
663
|
-
--palette-true-black: #303030;
|
|
664
|
-
--palette-white: hsl(from var(--color-wash) calc(h + 0) calc(s * 0.3 * var(--global-saturation, 1)) calc(min(100, l + 1 / var(--global-saturation, 1))));
|
|
665
|
-
--palette-black: hsl(from var(--color-gray-dark) calc(h + 0) calc(s * 0.1 * var(--global-saturation, 1)) calc(min(100, l / (var(--mode-mult,1) * -5 + pow(1 + var(--global-saturation, 1), 1.5)))));
|
|
711
|
+
${computedVars}
|
|
666
712
|
|
|
667
713
|
--z-nowPlaying: 40;
|
|
668
714
|
--z-nav: 50;
|
|
@@ -680,19 +726,7 @@ function presetAglio({ scale = 'md', interFontLocation = 'https://resources.bisc
|
|
|
680
726
|
${lightMode}
|
|
681
727
|
|
|
682
728
|
/* DEFAULT THEME (LEMON) */
|
|
683
|
-
|
|
684
|
-
--color-attention: var(--color-red);
|
|
685
|
-
--color-attention-dark: var(--color-red-dark);
|
|
686
|
-
--color-attention-wash: var(--color-red-wash);
|
|
687
|
-
--color-accent: var(--color-green);
|
|
688
|
-
--color-accent-wash: var(--color-green-wash);
|
|
689
|
-
--color-accent-light: var(--color-green-light);
|
|
690
|
-
--color-accent-dark: var(--color-green-dark);
|
|
691
|
-
--color-primary: var(--color-yellow);
|
|
692
|
-
--color-primary-light: var(--color-yellow-light);
|
|
693
|
-
--color-primary-dark: var(--color-yellow-dark);
|
|
694
|
-
--color-primary-wash: var(--color-yellow-wash);
|
|
695
|
-
--gray-hue-tweak: -30;
|
|
729
|
+
${lemon}
|
|
696
730
|
}
|
|
697
731
|
|
|
698
732
|
/* INTRINSIC DARK THEME */
|
|
@@ -703,20 +737,8 @@ function presetAglio({ scale = 'md', interFontLocation = 'https://resources.bisc
|
|
|
703
737
|
}
|
|
704
738
|
|
|
705
739
|
.theme-lemon {
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
--color-attention-dark: var(--color-red-dark);
|
|
709
|
-
--color-attention-wash: var(--color-red-wash);
|
|
710
|
-
--color-accent: var(--color-green);
|
|
711
|
-
--color-accent-wash: var(--color-green-wash);
|
|
712
|
-
--color-accent-light: var(--color-green-light);
|
|
713
|
-
--color-accent-dark: var(--color-green-dark);
|
|
714
|
-
--color-primary: var(--color-yellow);
|
|
715
|
-
--color-primary-light: var(--color-yellow-light);
|
|
716
|
-
--color-primary-dark: var(--color-yellow-dark);
|
|
717
|
-
--color-primary-wash: var(--color-yellow-wash);
|
|
718
|
-
|
|
719
|
-
--gray-hue-tweak: -20;
|
|
740
|
+
${lemon}
|
|
741
|
+
${computedVars}
|
|
720
742
|
}
|
|
721
743
|
|
|
722
744
|
/* fix yellow hue in dark mode */
|
|
@@ -735,88 +757,28 @@ function presetAglio({ scale = 'md', interFontLocation = 'https://resources.bisc
|
|
|
735
757
|
}
|
|
736
758
|
|
|
737
759
|
.theme-blueberry {
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
--color-attention-dark: var(--color-red-dark);
|
|
741
|
-
--color-attention-wash: var(--color-red-wash);
|
|
742
|
-
--color-accent: var(--color-green);
|
|
743
|
-
--color-accent-wash: var(--color-green-wash);
|
|
744
|
-
--color-accent-light: var(--color-green-light);
|
|
745
|
-
--color-accent-dark: var(--color-green-dark);
|
|
746
|
-
--color-primary: var(--color-blue);
|
|
747
|
-
--color-primary-light: var(--color-blue-light);
|
|
748
|
-
--color-primary-dark: var(--color-blue-dark);
|
|
749
|
-
--color-primary-wash: var(--color-blue-wash);
|
|
750
|
-
|
|
751
|
-
--gray-hue-tweak: 20;
|
|
760
|
+
${blueberry}
|
|
761
|
+
${computedVars}
|
|
752
762
|
}
|
|
753
763
|
|
|
754
764
|
.theme-eggplant {
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
--color-attention-dark: var(--color-red-dark);
|
|
758
|
-
--color-attention-wash: var(--color-red-wash);
|
|
759
|
-
--color-accent: var(--color-green);
|
|
760
|
-
--color-accent-wash: var(--color-green-wash);
|
|
761
|
-
--color-accent-light: var(--color-green-light);
|
|
762
|
-
--color-accent-dark: var(--color-green-dark);
|
|
763
|
-
--color-primary: var(--color-purple);
|
|
764
|
-
--color-primary-light: var(--color-purple-light);
|
|
765
|
-
--color-primary-dark: var(--color-purple-dark);
|
|
766
|
-
--color-primary-wash: var(--color-purple-wash);
|
|
767
|
-
|
|
768
|
-
--gray-hue-tweak: -20;
|
|
765
|
+
${eggplant}
|
|
766
|
+
${computedVars}
|
|
769
767
|
}
|
|
770
768
|
|
|
771
769
|
.theme-leek {
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
--color-attention-dark: var(--color-red-dark);
|
|
775
|
-
--color-attention-wash: var(--color-red-wash);
|
|
776
|
-
--color-accent: var(--color-blue);
|
|
777
|
-
--color-accent-wash: var(--color-blue-wash);
|
|
778
|
-
--color-accent-light: var(--color-blue-light);
|
|
779
|
-
--color-accent-dark: var(--color-blue-dark);
|
|
780
|
-
--color-primary: var(--color-green);
|
|
781
|
-
--color-primary-light: var(--color-green-light);
|
|
782
|
-
--color-primary-dark: var(--color-green-dark);
|
|
783
|
-
--color-primary-wash: var(--color-green-wash);
|
|
784
|
-
|
|
785
|
-
--gray-hue-tweak: 20;
|
|
770
|
+
${leek}
|
|
771
|
+
${computedVars}
|
|
786
772
|
}
|
|
787
773
|
|
|
788
774
|
.theme-tomato {
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
--color-attention-dark: var(--color-red-dark);
|
|
792
|
-
--color-attention-wash: var(--color-red-wash);
|
|
793
|
-
--color-accent: var(--color-green);
|
|
794
|
-
--color-accent-wash: var(--color-green-wash);
|
|
795
|
-
--color-accent-light: var(--color-green-light);
|
|
796
|
-
--color-accent-dark: var(--color-green-dark);
|
|
797
|
-
--color-primary: hsl(from var(--color-red) calc(h - 20) s l);
|
|
798
|
-
--color-primary-light: hsl(from var(--color-red-light) calc(h - 20) s l);
|
|
799
|
-
--color-primary-dark: hsl(from var(--color-red-dark) calc(h - 20) s l);
|
|
800
|
-
--color-primary-wash: hsl(from var(--color-red-wash) calc(h - 20) s l);
|
|
801
|
-
|
|
802
|
-
--gray-hue-tweak: -20;
|
|
775
|
+
${tomato}
|
|
776
|
+
${computedVars}
|
|
803
777
|
}
|
|
804
778
|
|
|
805
779
|
.theme-salt {
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
--color-attention-dark: var(--color-red-dark);
|
|
809
|
-
--color-attention-wash: var(--color-red-wash);
|
|
810
|
-
--color-primary: var(--color-true-gray);
|
|
811
|
-
--color-primary-wash: var(--color-true-gray-wash);
|
|
812
|
-
--color-primary-light: var(--color-true-gray-light);
|
|
813
|
-
--color-primary-dark: var(--color-true-gray-dark);
|
|
814
|
-
--color-accent: var(--color-true-gray-light);
|
|
815
|
-
--color-accent-light: var(--color-true-gray-wash);
|
|
816
|
-
--color-accent-dark: var(--color-true-gray);
|
|
817
|
-
--color-accent-wash: var(--color-white);
|
|
818
|
-
|
|
819
|
-
--global-saturation: 0;
|
|
780
|
+
${salt}
|
|
781
|
+
${computedVars}
|
|
820
782
|
}
|
|
821
783
|
|
|
822
784
|
html, body {
|
|
@@ -850,10 +812,37 @@ function presetAglio({ scale = 'md', interFontLocation = 'https://resources.bisc
|
|
|
850
812
|
/** SYSTEM OVERRIDES **/
|
|
851
813
|
.override-light {
|
|
852
814
|
${lightMode}
|
|
815
|
+
color: var(--color-black);
|
|
853
816
|
}
|
|
854
817
|
|
|
855
818
|
.override-dark {
|
|
856
819
|
${darkMode}
|
|
820
|
+
color: var(--color-black);
|
|
821
|
+
}
|
|
822
|
+
|
|
823
|
+
.theme-override-lemon {
|
|
824
|
+
${lemon}
|
|
825
|
+
${computedVars}
|
|
826
|
+
}
|
|
827
|
+
.theme-override-blueberry {
|
|
828
|
+
${blueberry}
|
|
829
|
+
${computedVars}
|
|
830
|
+
}
|
|
831
|
+
.theme-override-eggplant {
|
|
832
|
+
${eggplant}
|
|
833
|
+
${computedVars}
|
|
834
|
+
}
|
|
835
|
+
.theme-override-leek {
|
|
836
|
+
${leek}
|
|
837
|
+
${computedVars}
|
|
838
|
+
}
|
|
839
|
+
.theme-override-tomato {
|
|
840
|
+
${tomato}
|
|
841
|
+
${computedVars}
|
|
842
|
+
}
|
|
843
|
+
.theme-override-salt {
|
|
844
|
+
${salt}
|
|
845
|
+
${computedVars}
|
|
857
846
|
}
|
|
858
847
|
}
|
|
859
848
|
|
|
@@ -901,7 +890,15 @@ function presetAglio({ scale = 'md', interFontLocation = 'https://resources.bisc
|
|
|
901
890
|
],
|
|
902
891
|
};
|
|
903
892
|
}
|
|
904
|
-
const themeColors = [
|
|
893
|
+
const themeColors = [
|
|
894
|
+
'red',
|
|
895
|
+
'magenta',
|
|
896
|
+
'green',
|
|
897
|
+
'yellow',
|
|
898
|
+
'blue',
|
|
899
|
+
'purple',
|
|
900
|
+
'true-gray',
|
|
901
|
+
];
|
|
905
902
|
function roundTens(num) {
|
|
906
903
|
return Math.round(num / 10) * 10;
|
|
907
904
|
}
|
|
@@ -963,4 +960,28 @@ function darken(base, level) {
|
|
|
963
960
|
const levelNum = parseFloat(level);
|
|
964
961
|
return lighten(base, (levelNum / -15).toString());
|
|
965
962
|
}
|
|
963
|
+
function themeVars({ primary, accent, grayTweak, globalSaturation, }) {
|
|
964
|
+
return `
|
|
965
|
+
${themeVarRange({ name: 'attention', range: 'red' })}
|
|
966
|
+
${themeVarRange({ name: 'accent', range: accent })}
|
|
967
|
+
${themeVarRange({ name: 'primary', range: primary })}
|
|
968
|
+
|
|
969
|
+
--gray-hue-tweak: ${grayTweak !== null && grayTweak !== void 0 ? grayTweak : 0};
|
|
970
|
+
${globalSaturation !== undefined
|
|
971
|
+
? `--global-saturation: ${globalSaturation};`
|
|
972
|
+
: ''}
|
|
973
|
+
`;
|
|
974
|
+
}
|
|
975
|
+
function themeVarRange({ name, range, }) {
|
|
976
|
+
if (typeof range === 'string') {
|
|
977
|
+
return `--color-${name}: var(--color-${range});
|
|
978
|
+
--color-${name}-wash: var(--color-${range}-wash);
|
|
979
|
+
--color-${name}-light: var(--color-${range}-light);
|
|
980
|
+
--color-${name}-dark: var(--color-${range}-dark);`;
|
|
981
|
+
}
|
|
982
|
+
return `--color-${name}: var(--color-${range.default});
|
|
983
|
+
--color-${name}-wash: var(--color-${range.wash});
|
|
984
|
+
--color-${name}-light: var(--color-${range.light});
|
|
985
|
+
--color-${name}-dark: var(--color-${range.dark});`;
|
|
986
|
+
}
|
|
966
987
|
//# sourceMappingURL=uno.preset.js.map
|