@a-type/ui 1.8.8 → 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/components/editableText/EditableText.js +1 -1
- package/dist/cjs/components/editableText/EditableText.js.map +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 +592 -127
- 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/components/editableText/EditableText.js +1 -1
- package/dist/esm/components/editableText/EditableText.js.map +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/components/editableText/EditableText.tsx +1 -1
- 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/esm/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/esm/colorMode.js
CHANGED
|
@@ -49,6 +49,15 @@ export function getColorMode() {
|
|
|
49
49
|
return 'system';
|
|
50
50
|
return window.localStorage.getItem('colorMode') || 'system';
|
|
51
51
|
}
|
|
52
|
+
export function getResolvedColorMode() {
|
|
53
|
+
const mode = getColorMode();
|
|
54
|
+
if (mode === 'system') {
|
|
55
|
+
return window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
56
|
+
? 'dark'
|
|
57
|
+
: 'light';
|
|
58
|
+
}
|
|
59
|
+
return mode;
|
|
60
|
+
}
|
|
52
61
|
export function subscribeToColorModeChange(callback) {
|
|
53
62
|
if (typeof window === 'undefined')
|
|
54
63
|
return () => { };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colorMode.js","sourceRoot":"","sources":["../../src/colorMode.ts"],"names":[],"mappings":"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"}
|
|
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").JSX.Element;
|
|
31
31
|
export declare const Card: import("react").FunctionComponent<import("../box/Box.js").BoxProps> & {
|
|
@@ -45,6 +45,6 @@ export function EditableText(_a) {
|
|
|
45
45
|
if (editingFinal) {
|
|
46
46
|
return (_jsx(Input, Object.assign({ ref: inputRef, value: value, onChange: handleChange, onBlur: handleBlur, className: clsx('layer-variants:font-size-inherit', className), id: id, autoSelect: autoSelect, onKeyDown: handleKeyDown }, rest)));
|
|
47
47
|
}
|
|
48
|
-
return (_jsxs("button", Object.assign({ onClick: () => setEditingFinal(true), className: clsx(inputClassName, 'layer-variants:border-transparent layer-variants:bg-transparent layer-variants:w-auto layer-variants:inline-flex layer-variants:items-center layer-variants:gap-2 layer-variants:font-size-inherit layer-variants:text-inherit layer-variants:shadow-none', 'layer-variants:hover:bg-gray-blend', 'layer-variants:focus-visible:outline-none layer-variants:focus-visible:bg-gray-darkBlend', 'cursor-pointer', className), id: id }, rest, { children: [value, _jsx(Icon, { name: "pencil", className: "stroke-gray-blend opacity-50" })] })));
|
|
48
|
+
return (_jsxs("button", Object.assign({ onClick: () => setEditingFinal(true), className: clsx(inputClassName, 'layer-variants:border-transparent layer-variants:bg-transparent layer-variants:w-auto layer-variants:inline-flex layer-variants:items-center layer-variants:gap-2 layer-variants:font-size-inherit layer-variants:text-inherit layer-variants:shadow-none layer-variants:text-left', 'layer-variants:hover:bg-gray-blend', 'layer-variants:focus-visible:outline-none layer-variants:focus-visible:bg-gray-darkBlend', 'cursor-pointer', className), id: id }, rest, { children: [value, _jsx(Icon, { name: "pencil", className: "stroke-gray-blend opacity-50" })] })));
|
|
49
49
|
}
|
|
50
50
|
//# sourceMappingURL=EditableText.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableText.js","sourceRoot":"","sources":["../../../../src/components/editableText/EditableText.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAIN,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,GACR,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAkB1D,MAAM,UAAU,YAAY,CAAC,EAaT;QAbS,EAC5B,KAAK,EACL,aAAa,EACb,OAAO,EACP,eAAe,EACf,SAAS,EACT,EAAE,EACF,UAAU,EACV,SAAS,EACT,MAAM,EACN,QAAQ,EACR,SAAS,OAEU,EADhB,IAAI,cAZqB,yIAa5B,CADO;IAEP,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,OAAO,IAAI,SAAS,CAAC,CAAC;IAC7E,MAAM,YAAY,GAAG,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,eAAe,CAAC;IAChD,MAAM,eAAe,GAAG,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,kBAAkB,CAAC;IAE9D,MAAM,YAAY,GAAG,WAAW,CAC/B,CAAC,EAAiC,EAAE,EAAE;QACrC,aAAa,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC/B,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,CAAC,CAAC;IAChB,CAAC,EACD,CAAC,aAAa,EAAE,QAAQ,CAAC,CACzB,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAChC,CAAC,EAAmC,EAAE,EAAE;QACvC,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACxB,eAAe,CAAC,KAAK,CAAC,CAAC;QACxB,CAAC;QACD,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,EAAE,CAAC,CAAC;IACjB,CAAC,EACD,CAAC,eAAe,EAAE,SAAS,CAAC,CAC5B,CAAC;IAEF,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEhD,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,YAAY,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YACtC,kDAAkD;YAClD,QAAQ,CAAC,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YACtD,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QAC1B,CAAC;IACF,CAAC,EAAE,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE7B,MAAM,UAAU,GAAG,WAAW,CAC7B,CAAC,EAAgC,EAAE,EAAE;QACpC,eAAe,CAAC,KAAK,CAAC,CAAC;QACvB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,EAAE,CAAC,CAAC;IACd,CAAC,EACD,CAAC,eAAe,EAAE,MAAM,CAAC,CACzB,CAAC;IAEF,IAAI,YAAY,EAAE,CAAC;QAClB,OAAO,CACN,KAAC,KAAK,kBACL,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,IAAI,CAAC,kCAAkC,EAAE,SAAS,CAAC,EAC9D,EAAE,EAAE,EAAE,EACN,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,aAAa,IACpB,IAAI,EACP,CACF,CAAC;IACH,CAAC;IAED,OAAO,CACN,gCACC,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,EACpC,SAAS,EAAE,IAAI,CACd,cAAc,EACd,
|
|
1
|
+
{"version":3,"file":"EditableText.js","sourceRoot":"","sources":["../../../../src/components/editableText/EditableText.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAIN,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,GACR,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAkB1D,MAAM,UAAU,YAAY,CAAC,EAaT;QAbS,EAC5B,KAAK,EACL,aAAa,EACb,OAAO,EACP,eAAe,EACf,SAAS,EACT,EAAE,EACF,UAAU,EACV,SAAS,EACT,MAAM,EACN,QAAQ,EACR,SAAS,OAEU,EADhB,IAAI,cAZqB,yIAa5B,CADO;IAEP,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,OAAO,IAAI,SAAS,CAAC,CAAC;IAC7E,MAAM,YAAY,GAAG,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,eAAe,CAAC;IAChD,MAAM,eAAe,GAAG,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,kBAAkB,CAAC;IAE9D,MAAM,YAAY,GAAG,WAAW,CAC/B,CAAC,EAAiC,EAAE,EAAE;QACrC,aAAa,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC/B,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,CAAC,CAAC;IAChB,CAAC,EACD,CAAC,aAAa,EAAE,QAAQ,CAAC,CACzB,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAChC,CAAC,EAAmC,EAAE,EAAE;QACvC,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACxB,eAAe,CAAC,KAAK,CAAC,CAAC;QACxB,CAAC;QACD,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,EAAE,CAAC,CAAC;IACjB,CAAC,EACD,CAAC,eAAe,EAAE,SAAS,CAAC,CAC5B,CAAC;IAEF,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEhD,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,YAAY,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YACtC,kDAAkD;YAClD,QAAQ,CAAC,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YACtD,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QAC1B,CAAC;IACF,CAAC,EAAE,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE7B,MAAM,UAAU,GAAG,WAAW,CAC7B,CAAC,EAAgC,EAAE,EAAE;QACpC,eAAe,CAAC,KAAK,CAAC,CAAC;QACvB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,EAAE,CAAC,CAAC;IACd,CAAC,EACD,CAAC,eAAe,EAAE,MAAM,CAAC,CACzB,CAAC;IAEF,IAAI,YAAY,EAAE,CAAC;QAClB,OAAO,CACN,KAAC,KAAK,kBACL,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,IAAI,CAAC,kCAAkC,EAAE,SAAS,CAAC,EAC9D,EAAE,EAAE,EAAE,EACN,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,aAAa,IACpB,IAAI,EACP,CACF,CAAC;IACH,CAAC;IAED,OAAO,CACN,gCACC,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,EACpC,SAAS,EAAE,IAAI,CACd,cAAc,EACd,+IAA+I,EAC/I,sCAAsC,EACtC,+DAA+D,EAC/D,gBAAgB,EAChB,SAAS,CACT,EACD,EAAE,EAAE,EAAE,IACF,IAAI,eAEP,KAAK,EACN,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,8BAA8B,GAAG,KACvD,CACT,CAAC;AACH,CAAC"}
|
|
@@ -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/esm/hooks/index.js
CHANGED
|
@@ -3,6 +3,7 @@ export * from './useAnimationFrame.js';
|
|
|
3
3
|
export * from './useLongPress.js';
|
|
4
4
|
export * from './useMergedRef.js';
|
|
5
5
|
export * from './useOnUnmount.js';
|
|
6
|
+
export * from './useOverrideTheme.js';
|
|
6
7
|
export * from './useSize.js';
|
|
7
8
|
export * from './useStableCallback.js';
|
|
8
9
|
export * from './useTitleBarColor.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,cAAc,CAAC;AAC7B,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
// @unocss-include
|
|
2
|
+
import { useLayoutEffect } from 'react';
|
|
3
|
+
export function useOverrideTheme(theme) {
|
|
4
|
+
useLayoutEffect(() => {
|
|
5
|
+
if (!theme) {
|
|
6
|
+
return;
|
|
7
|
+
}
|
|
8
|
+
document.body.classList.add(`theme-override-${theme}`);
|
|
9
|
+
return () => {
|
|
10
|
+
document.body.classList.remove(`theme-override-${theme}`);
|
|
11
|
+
};
|
|
12
|
+
}, [theme]);
|
|
13
|
+
}
|
|
14
|
+
//# sourceMappingURL=useOverrideTheme.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useOverrideTheme.js","sourceRoot":"","sources":["../../../src/hooks/useOverrideTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAGxC,MAAM,UAAU,gBAAgB,CAAC,KAAmC;IACnE,eAAe,CAAC,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"}
|
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
// @unocss-include
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import clsx from 'clsx';
|
|
4
|
+
import { useState } from 'react';
|
|
4
5
|
import { ActionBar, ActionButton } from './components/actions/index.js';
|
|
5
6
|
import { Button } from './components/button/index.js';
|
|
6
7
|
import { Card } from './components/card/index.js';
|
|
7
8
|
import { Icon } from './components/icon/index.js';
|
|
8
|
-
import { AvatarList, Box, Checkbox, ContextMenu, DateRangePicker, Dialog, DropdownMenu, H1, H2, H3, H4, HorizontalList, ImageUploader, NavBarItem, NavBarItemIcon, NavBarItemIconWrapper, NavBarItemPip, NavBarItemText, NavBarRoot, Note, P, PageContent, PageNav, PageRoot, Progress, TextSkeleton, ToggleGroup, Tooltip, } from './components/index.js';
|
|
9
|
+
import { AvatarList, Box, Checkbox, ColorPicker, ContextMenu, DateRangePicker, Dialog, DropdownMenu, H1, H2, H3, H4, HorizontalList, ImageUploader, NavBarItem, NavBarItemIcon, NavBarItemIconWrapper, NavBarItemPip, NavBarItemText, NavBarRoot, Note, P, PageContent, PageNav, PageRoot, Progress, Provider, TextSkeleton, ToggleGroup, Tooltip, } from './components/index.js';
|
|
9
10
|
import { Input } from './components/input/index.js';
|
|
10
11
|
import { Tabs } from './components/tabs/tabs.js';
|
|
11
12
|
import { TextArea } from './components/textArea/index.js';
|
|
13
|
+
import { useOverrideTheme } from './hooks/useOverrideTheme.js';
|
|
12
14
|
const meta = {
|
|
13
15
|
title: 'themes',
|
|
14
16
|
argTypes: {},
|
|
@@ -21,7 +23,7 @@ export default meta;
|
|
|
21
23
|
function DemoUI({ className }) {
|
|
22
24
|
const nextWeek = new Date();
|
|
23
25
|
nextWeek.setDate(nextWeek.getDate() + 7);
|
|
24
|
-
return (_jsxs(PageRoot, { children: [_jsx(PageContent, { children: _jsxs("div", { className: clsx('grid gap-2 grid-cols-2'
|
|
26
|
+
return (_jsxs(PageRoot, { className: clsx('flex-1', className), children: [_jsx(PageContent, { children: _jsxs("div", { className: clsx('grid gap-2 grid-cols-2'), children: [_jsxs(Box, { gap: true, wrap: true, p: true, children: [_jsx(Button, { color: "primary", children: "Primary" }), _jsx(Button, { color: "accent", children: "Accent" }), _jsx(Button, { children: "Default" }), _jsx(Button, { color: "contrast", children: "Contrast" }), _jsx(Button, { color: "destructive", children: "Destructive" }), _jsx(Button, { color: "ghost", children: "Ghost" }), _jsx(Button, { color: "ghostAccent", children: "Ghost Accent" }), _jsx(Button, { size: "small", color: "destructive", children: "Destructive Small" }), _jsx(Button, { size: "small", color: "ghostDestructive", children: "Ghost Destructive Small" })] }), _jsxs(Box, { gap: true, wrap: true, p: true, items: "start", children: [_jsx(Input, { placeholder: "Placeholder" }), _jsx(TextArea, { placeholder: "Placeholder" }), _jsxs(Box, { d: "row", gap: true, items: "center", children: [_jsx(Checkbox, { defaultChecked: true }), _jsx("span", { children: "Checkbox" })] }), _jsxs(ToggleGroup, { type: "single", children: [_jsx(ToggleGroup.Item, { value: "1", children: "Toggle 1" }), _jsx(ToggleGroup.Item, { value: "2", children: "Toggle 2" })] })] }), _jsxs(Box, { layout: "start center", d: "col", gap: true, p: true, children: [_jsx(H1, { children: "Heading 1" }), _jsx(H2, { children: "Heading 2" }), _jsx(H3, { children: "Heading 3" }), _jsx(H4, { children: "Heading 4" }), _jsx(P, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }), _jsx(TextSkeleton, { maxLength: 30 }), _jsx(TextSkeleton, { maxLength: 10 })] }), _jsxs(Card, { children: [_jsxs(Card.Main, { onClick: () => { }, children: [_jsx(Card.Title, { children: "Card Title" }), _jsx(Card.Content, { children: "Card Content" })] }), _jsx(Card.Footer, { children: _jsxs(Card.Actions, { children: [_jsx(Button, { size: "small", children: "Action 1" }), _jsx(Button, { size: "icon-small", color: "ghost", children: _jsx(Icon, { name: "placeholder" }) })] }) })] }), _jsxs(Tabs, { defaultValue: "tab1", children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Trigger, { value: "tab1", children: "Tab 1" }), _jsx(Tabs.Trigger, { value: "tab2", children: "Tab 2" })] }), _jsx(Tabs.Content, { value: "tab1", children: "Tab 1 Content" }), _jsx(Tabs.Content, { value: "tab2", children: "Tab 2 Content" })] }), _jsxs(ActionBar, { children: [_jsxs(ActionButton, { children: [_jsx(Icon, { name: "placeholder" }), "Hello"] }), _jsxs(ActionButton, { color: "primary", children: [_jsx(Icon, { name: "placeholder" }), "World"] }), _jsx(ActionButton, { children: _jsx(Icon, { name: "placeholder" }) })] }), _jsxs(AvatarList, { count: 3, children: [_jsx(AvatarList.Item, { index: 0, name: "John Doe" }), _jsx(AvatarList.Item, { index: 1, name: "Jane Doe" }), _jsx(AvatarList.Item, { index: 2, name: "John Smith" })] }), _jsxs(ContextMenu, { children: [_jsx(ContextMenu.Trigger, { asChild: true, children: _jsx(Tooltip, { content: "Hello World", children: _jsx(Button, { children: "Hover or right click" }) }) }), _jsxs(ContextMenu.Content, { children: [_jsx(ContextMenu.Arrow, {}), _jsx(ContextMenu.Item, { children: "Item 1" }), _jsx(ContextMenu.Item, { children: "Item 2" }), _jsx(ContextMenu.Item, { children: "Item 3" })] })] }), _jsxs(Dialog, { children: [_jsx(Dialog.Trigger, { asChild: true, children: _jsx(Button, { children: "Click" }) }), _jsxs(Dialog.Content, { children: [_jsx(Dialog.Title, { children: "Hello there" }), _jsx(Dialog.Description, { children: "Im a dialog" }), _jsxs(Dialog.Actions, { children: [_jsx(Dialog.Close, { children: "Close" }), _jsx(Button, { color: "primary", children: "Action" })] })] })] }), _jsx(DateRangePicker, { className: "grid-col-span-2", value: {
|
|
25
27
|
start: new Date(),
|
|
26
28
|
end: nextWeek,
|
|
27
29
|
}, onChange: () => { } }), _jsx(Progress, { value: 50, className: "m-auto" }), _jsxs(Box, { surface: "primary", p: true, gap: true, children: [_jsx("div", { children: "Primary surface" }), _jsx(Button, { color: "ghost", children: "Ghost" })] }), _jsx(Box, { surface: "accent", p: true, children: "Accent surface" }), _jsx(Box, { surface: "default", p: true, children: "Default surface" }), _jsx(Box, { surface: "attention", p: true, children: "Attention surface" }), _jsx(Box, { children: _jsx(Note, { children: "Note note" }) }), _jsx(Box, { justify: "start", items: "start", children: _jsxs(HorizontalList, { openDirection: "down", children: [_jsx(Button, { size: "small", children: "One" }), _jsx(Button, { size: "small", children: "Two" }), _jsx(Button, { size: "small", children: "Three" }), _jsx(Button, { size: "small", children: "Four" }), _jsx(Button, { size: "small", children: "Five" }), _jsx(Button, { size: "small", children: "Six" })] }) }), _jsx(ImageUploader, { className: "h-200px", value: null, onChange: () => { } }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenu.Trigger, { asChild: true, className: "m-auto", children: _jsx(Button, { children: "Dropdown" }) }), _jsxs(DropdownMenu.Content, { children: [_jsx(DropdownMenu.Item, { children: "Item 1" }), _jsx(DropdownMenu.Item, { children: "Item 2" }), _jsx(DropdownMenu.Item, { children: "Item 3" })] })] })] }) }), _jsx(PageNav, { children: _jsxs(NavBarRoot, { children: [_jsxs(NavBarItem, { children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { name: "cart" }) }), _jsx(NavBarItemText, { children: "Item 1 long" })] }), _jsxs(NavBarItem, { active: true, children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { asChild: true, children: _jsx(Icon, { name: "book" }) }) }), _jsx(NavBarItemText, { children: "Item 2" }), _jsx(NavBarItemPip, {})] }), _jsxs(NavBarItem, { color: "neutral", active: true, children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { asChild: true, children: _jsx(Icon, { name: "book" }) }) }), _jsx(NavBarItemText, { children: "Neutral" }), _jsx(NavBarItemPip, {})] })] }) })] }));
|
|
@@ -31,4 +33,16 @@ export const Default = {
|
|
|
31
33
|
return _jsx(DemoUI, {});
|
|
32
34
|
},
|
|
33
35
|
};
|
|
36
|
+
export const Nesting = {
|
|
37
|
+
render() {
|
|
38
|
+
return (_jsxs(Box, { d: "col", p: true, gap: true, children: [_jsx(Box, { d: "row", gap: true, surface: "primary", children: _jsx(Button, { color: "primary", children: "Root theme" }) }), _jsx(DemoUI, { className: "theme-eggplant override-dark flex-1" })] }));
|
|
39
|
+
},
|
|
40
|
+
};
|
|
41
|
+
export const Override = {
|
|
42
|
+
render() {
|
|
43
|
+
const [theme, setTheme] = useState(null);
|
|
44
|
+
useOverrideTheme(theme);
|
|
45
|
+
return (_jsx(Provider, { children: _jsxs(Box, { d: "col", p: true, gap: true, children: [_jsx(ColorPicker, { value: theme, onChange: setTheme }), _jsx(DemoUI, {})] }) }));
|
|
46
|
+
},
|
|
47
|
+
};
|
|
34
48
|
//# sourceMappingURL=themes.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themes.stories.js","sourceRoot":"","sources":["../../src/themes.stories.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAClD,OAAO,EACN,UAAU,EACV,GAAG,EACH,QAAQ,EACR,WAAW,EACX,eAAe,EACf,MAAM,EACN,YAAY,EACZ,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,cAAc,EACd,aAAa,EACb,UAAU,EACV,cAAc,EACd,qBAAqB,EACrB,aAAa,EACb,cAAc,EACd,UAAU,EACV,IAAI,EACJ,CAAC,EACD,WAAW,EACX,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,
|
|
1
|
+
{"version":3,"file":"themes.stories.js","sourceRoot":"","sources":["../../src/themes.stories.tsx"],"names":[],"mappings":"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"}
|
package/dist/esm/uno.preset.js
CHANGED
|
@@ -545,6 +545,66 @@ export default function presetAglio({ scale = 'md', interFontLocation = 'https:/
|
|
|
545
545
|
--color-shadow-2: var(--palette-shadow-3);
|
|
546
546
|
--color-overlay: var(--palette-black-overlay);
|
|
547
547
|
`;
|
|
548
|
+
const lemon = themeVars({
|
|
549
|
+
primary: 'yellow',
|
|
550
|
+
accent: 'green',
|
|
551
|
+
grayTweak: -20,
|
|
552
|
+
});
|
|
553
|
+
const leek = themeVars({
|
|
554
|
+
primary: 'green',
|
|
555
|
+
accent: 'blue',
|
|
556
|
+
grayTweak: 20,
|
|
557
|
+
});
|
|
558
|
+
const tomato = themeVars({
|
|
559
|
+
primary: 'magenta',
|
|
560
|
+
accent: 'green',
|
|
561
|
+
grayTweak: -20,
|
|
562
|
+
});
|
|
563
|
+
const blueberry = themeVars({
|
|
564
|
+
primary: 'blue',
|
|
565
|
+
accent: 'green',
|
|
566
|
+
grayTweak: 20,
|
|
567
|
+
});
|
|
568
|
+
const eggplant = themeVars({
|
|
569
|
+
primary: 'purple',
|
|
570
|
+
accent: 'green',
|
|
571
|
+
grayTweak: -20,
|
|
572
|
+
});
|
|
573
|
+
const salt = themeVars({
|
|
574
|
+
primary: 'true-gray',
|
|
575
|
+
accent: {
|
|
576
|
+
default: 'true-gray-light',
|
|
577
|
+
wash: 'white',
|
|
578
|
+
light: 'true-gray-wash',
|
|
579
|
+
dark: 'true-gray',
|
|
580
|
+
},
|
|
581
|
+
globalSaturation: 0,
|
|
582
|
+
});
|
|
583
|
+
const computedVars = `
|
|
584
|
+
--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))));
|
|
585
|
+
--palette-gray: hsl(from var(--color-primary) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--global-saturation, 1)) calc(l * 1.125));
|
|
586
|
+
--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))));
|
|
587
|
+
--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))));
|
|
588
|
+
--color-wash: var(--color-gray-wash);
|
|
589
|
+
--color-gray-wash: var(--palette-gray-wash);
|
|
590
|
+
--color-gray: var(--palette-gray);
|
|
591
|
+
--color-gray-dark: var(--palette-gray-dark);
|
|
592
|
+
--color-gray-light: var(--palette-gray-light);
|
|
593
|
+
--palette-gray-1: var(--color-gray-wash);
|
|
594
|
+
--palette-gray-2: var(--color-gray-light);
|
|
595
|
+
--palette-gray-3: var(--color-gray-light);
|
|
596
|
+
--palette-gray-4: var(--color-gray);
|
|
597
|
+
--palette-gray-5: var(--color-gray);
|
|
598
|
+
--palette-gray-6: var(--color-gray);
|
|
599
|
+
--palette-gray-7: var(--color-gray-dark);
|
|
600
|
+
--palette-gray-8: var(--color-gray-dark);
|
|
601
|
+
--palette-gray-9: var(--color-black);
|
|
602
|
+
--palette-gray-0: var(--color-black);
|
|
603
|
+
--palette-gray-ex-1: var(--color-black);
|
|
604
|
+
--palette-gray-ex-2: var(--color-black);
|
|
605
|
+
--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))));
|
|
606
|
+
--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)))));
|
|
607
|
+
`;
|
|
548
608
|
return `
|
|
549
609
|
@layer preflightBase, preflightVariant, components, responsive, variants, utilities;
|
|
550
610
|
|
|
@@ -559,6 +619,17 @@ export default function presetAglio({ scale = 'md', interFontLocation = 'https:/
|
|
|
559
619
|
--palette-red-20: #804020;
|
|
560
620
|
--palette-red-10: #702604;
|
|
561
621
|
--palette-red-00:rgb(37, 28, 25);
|
|
622
|
+
/* TODO: define these */
|
|
623
|
+
--palette-magenta-90: hsl(from rgb(255, 244, 240) calc(h - 20) s l);
|
|
624
|
+
--palette-magenta-80: hsl(from #ffdbcf calc(h - 20) s l);
|
|
625
|
+
--palette-magenta-70: hsl(from #ffbea6 calc(h - 20) s l);
|
|
626
|
+
--palette-magenta-60: hsl(from #fdad8e calc(h - 20) s l);
|
|
627
|
+
--palette-magenta-50: hsl(from #ff8e61 calc(h - 20) s l);
|
|
628
|
+
--palette-magenta-40: hsl(from #d56f46 calc(h - 20) s l);
|
|
629
|
+
--palette-magenta-30: hsl(from #ae562d calc(h - 20) s l);
|
|
630
|
+
--palette-magenta-20: hsl(from #804020 calc(h - 20) s l);
|
|
631
|
+
--palette-magenta-10: hsl(from #702604 calc(h - 20) s l);
|
|
632
|
+
--palette-magenta-00: hsl(from rgb(37, 28, 25) calc(h - 20) s l);
|
|
562
633
|
--palette-green-90:rgb(242, 251, 247);
|
|
563
634
|
--palette-green-80: #c2ffe9;
|
|
564
635
|
--palette-green-70: #92f2d1;
|
|
@@ -579,7 +650,7 @@ export default function presetAglio({ scale = 'md', interFontLocation = 'https:/
|
|
|
579
650
|
--palette-yellow-20:rgb(111, 83, 23);
|
|
580
651
|
--palette-yellow-10:rgb(84, 62, 12);
|
|
581
652
|
--palette-yellow-00:rgb(37, 33, 22);
|
|
582
|
-
--palette-blue-90:
|
|
653
|
+
--palette-blue-90: rgb(238, 248, 255);
|
|
583
654
|
--palette-blue-80: #c4e7ff;
|
|
584
655
|
--palette-blue-70: #87d3fc;
|
|
585
656
|
--palette-blue-60: #5fcefe;
|
|
@@ -623,40 +694,15 @@ export default function presetAglio({ scale = 'md', interFontLocation = 'https:/
|
|
|
623
694
|
--palette-true-gray-20: #4f4f4f;
|
|
624
695
|
--palette-true-gray-10: #383838;
|
|
625
696
|
--palette-true-gray-00: #1f1f1f;
|
|
697
|
+
--palette-true-white: #ffffff;
|
|
698
|
+
--palette-true-black: #303030;
|
|
626
699
|
|
|
627
700
|
--global-saturation: ${saturationScale};
|
|
628
701
|
--global-corner-scale: ${cornerScale};
|
|
629
702
|
--global-border-scale: ${borderScale};
|
|
630
703
|
--global-spacing-scale: ${spacingScale};
|
|
631
704
|
|
|
632
|
-
|
|
633
|
-
--palette-gray: hsl(from var(--color-primary) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--global-saturation, 1)) calc(l * 1.125));
|
|
634
|
-
--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))));
|
|
635
|
-
--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))));
|
|
636
|
-
--color-wash: var(--color-gray-wash);
|
|
637
|
-
|
|
638
|
-
--color-gray-wash: var(--palette-gray-wash);
|
|
639
|
-
--color-gray: var(--palette-gray);
|
|
640
|
-
--color-gray-dark: var(--palette-gray-dark);
|
|
641
|
-
--color-gray-light: var(--palette-gray-light);
|
|
642
|
-
|
|
643
|
-
--palette-gray-1: var(--color-gray-wash);
|
|
644
|
-
--palette-gray-2: var(--color-gray-light);
|
|
645
|
-
--palette-gray-3: var(--color-gray-light);
|
|
646
|
-
--palette-gray-4: var(--color-gray);
|
|
647
|
-
--palette-gray-5: var(--color-gray);
|
|
648
|
-
--palette-gray-6: var(--color-gray);
|
|
649
|
-
--palette-gray-7: var(--color-gray-dark);
|
|
650
|
-
--palette-gray-8: var(--color-gray-dark);
|
|
651
|
-
--palette-gray-9: var(--color-black);
|
|
652
|
-
--palette-gray-0: var(--color-black);
|
|
653
|
-
--palette-gray-ex-1: var(--color-black);
|
|
654
|
-
--palette-gray-ex-2: var(--color-black);
|
|
655
|
-
|
|
656
|
-
--palette-true-white: #ffffff;
|
|
657
|
-
--palette-true-black: #303030;
|
|
658
|
-
--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))));
|
|
659
|
-
--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)))));
|
|
705
|
+
${computedVars}
|
|
660
706
|
|
|
661
707
|
--z-nowPlaying: 40;
|
|
662
708
|
--z-nav: 50;
|
|
@@ -674,19 +720,7 @@ export default function presetAglio({ scale = 'md', interFontLocation = 'https:/
|
|
|
674
720
|
${lightMode}
|
|
675
721
|
|
|
676
722
|
/* DEFAULT THEME (LEMON) */
|
|
677
|
-
|
|
678
|
-
--color-attention: var(--color-red);
|
|
679
|
-
--color-attention-dark: var(--color-red-dark);
|
|
680
|
-
--color-attention-wash: var(--color-red-wash);
|
|
681
|
-
--color-accent: var(--color-green);
|
|
682
|
-
--color-accent-wash: var(--color-green-wash);
|
|
683
|
-
--color-accent-light: var(--color-green-light);
|
|
684
|
-
--color-accent-dark: var(--color-green-dark);
|
|
685
|
-
--color-primary: var(--color-yellow);
|
|
686
|
-
--color-primary-light: var(--color-yellow-light);
|
|
687
|
-
--color-primary-dark: var(--color-yellow-dark);
|
|
688
|
-
--color-primary-wash: var(--color-yellow-wash);
|
|
689
|
-
--gray-hue-tweak: -30;
|
|
723
|
+
${lemon}
|
|
690
724
|
}
|
|
691
725
|
|
|
692
726
|
/* INTRINSIC DARK THEME */
|
|
@@ -697,20 +731,8 @@ export default function presetAglio({ scale = 'md', interFontLocation = 'https:/
|
|
|
697
731
|
}
|
|
698
732
|
|
|
699
733
|
.theme-lemon {
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
--color-attention-dark: var(--color-red-dark);
|
|
703
|
-
--color-attention-wash: var(--color-red-wash);
|
|
704
|
-
--color-accent: var(--color-green);
|
|
705
|
-
--color-accent-wash: var(--color-green-wash);
|
|
706
|
-
--color-accent-light: var(--color-green-light);
|
|
707
|
-
--color-accent-dark: var(--color-green-dark);
|
|
708
|
-
--color-primary: var(--color-yellow);
|
|
709
|
-
--color-primary-light: var(--color-yellow-light);
|
|
710
|
-
--color-primary-dark: var(--color-yellow-dark);
|
|
711
|
-
--color-primary-wash: var(--color-yellow-wash);
|
|
712
|
-
|
|
713
|
-
--gray-hue-tweak: -20;
|
|
734
|
+
${lemon}
|
|
735
|
+
${computedVars}
|
|
714
736
|
}
|
|
715
737
|
|
|
716
738
|
/* fix yellow hue in dark mode */
|
|
@@ -729,88 +751,28 @@ export default function presetAglio({ scale = 'md', interFontLocation = 'https:/
|
|
|
729
751
|
}
|
|
730
752
|
|
|
731
753
|
.theme-blueberry {
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
--color-attention-dark: var(--color-red-dark);
|
|
735
|
-
--color-attention-wash: var(--color-red-wash);
|
|
736
|
-
--color-accent: var(--color-green);
|
|
737
|
-
--color-accent-wash: var(--color-green-wash);
|
|
738
|
-
--color-accent-light: var(--color-green-light);
|
|
739
|
-
--color-accent-dark: var(--color-green-dark);
|
|
740
|
-
--color-primary: var(--color-blue);
|
|
741
|
-
--color-primary-light: var(--color-blue-light);
|
|
742
|
-
--color-primary-dark: var(--color-blue-dark);
|
|
743
|
-
--color-primary-wash: var(--color-blue-wash);
|
|
744
|
-
|
|
745
|
-
--gray-hue-tweak: 20;
|
|
754
|
+
${blueberry}
|
|
755
|
+
${computedVars}
|
|
746
756
|
}
|
|
747
757
|
|
|
748
758
|
.theme-eggplant {
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
--color-attention-dark: var(--color-red-dark);
|
|
752
|
-
--color-attention-wash: var(--color-red-wash);
|
|
753
|
-
--color-accent: var(--color-green);
|
|
754
|
-
--color-accent-wash: var(--color-green-wash);
|
|
755
|
-
--color-accent-light: var(--color-green-light);
|
|
756
|
-
--color-accent-dark: var(--color-green-dark);
|
|
757
|
-
--color-primary: var(--color-purple);
|
|
758
|
-
--color-primary-light: var(--color-purple-light);
|
|
759
|
-
--color-primary-dark: var(--color-purple-dark);
|
|
760
|
-
--color-primary-wash: var(--color-purple-wash);
|
|
761
|
-
|
|
762
|
-
--gray-hue-tweak: -20;
|
|
759
|
+
${eggplant}
|
|
760
|
+
${computedVars}
|
|
763
761
|
}
|
|
764
762
|
|
|
765
763
|
.theme-leek {
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
--color-attention-dark: var(--color-red-dark);
|
|
769
|
-
--color-attention-wash: var(--color-red-wash);
|
|
770
|
-
--color-accent: var(--color-blue);
|
|
771
|
-
--color-accent-wash: var(--color-blue-wash);
|
|
772
|
-
--color-accent-light: var(--color-blue-light);
|
|
773
|
-
--color-accent-dark: var(--color-blue-dark);
|
|
774
|
-
--color-primary: var(--color-green);
|
|
775
|
-
--color-primary-light: var(--color-green-light);
|
|
776
|
-
--color-primary-dark: var(--color-green-dark);
|
|
777
|
-
--color-primary-wash: var(--color-green-wash);
|
|
778
|
-
|
|
779
|
-
--gray-hue-tweak: 20;
|
|
764
|
+
${leek}
|
|
765
|
+
${computedVars}
|
|
780
766
|
}
|
|
781
767
|
|
|
782
768
|
.theme-tomato {
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
--color-attention-dark: var(--color-red-dark);
|
|
786
|
-
--color-attention-wash: var(--color-red-wash);
|
|
787
|
-
--color-accent: var(--color-green);
|
|
788
|
-
--color-accent-wash: var(--color-green-wash);
|
|
789
|
-
--color-accent-light: var(--color-green-light);
|
|
790
|
-
--color-accent-dark: var(--color-green-dark);
|
|
791
|
-
--color-primary: hsl(from var(--color-red) calc(h - 20) s l);
|
|
792
|
-
--color-primary-light: hsl(from var(--color-red-light) calc(h - 20) s l);
|
|
793
|
-
--color-primary-dark: hsl(from var(--color-red-dark) calc(h - 20) s l);
|
|
794
|
-
--color-primary-wash: hsl(from var(--color-red-wash) calc(h - 20) s l);
|
|
795
|
-
|
|
796
|
-
--gray-hue-tweak: -20;
|
|
769
|
+
${tomato}
|
|
770
|
+
${computedVars}
|
|
797
771
|
}
|
|
798
772
|
|
|
799
773
|
.theme-salt {
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
--color-attention-dark: var(--color-red-dark);
|
|
803
|
-
--color-attention-wash: var(--color-red-wash);
|
|
804
|
-
--color-primary: var(--color-true-gray);
|
|
805
|
-
--color-primary-wash: var(--color-true-gray-wash);
|
|
806
|
-
--color-primary-light: var(--color-true-gray-light);
|
|
807
|
-
--color-primary-dark: var(--color-true-gray-dark);
|
|
808
|
-
--color-accent: var(--color-true-gray-light);
|
|
809
|
-
--color-accent-light: var(--color-true-gray-wash);
|
|
810
|
-
--color-accent-dark: var(--color-true-gray);
|
|
811
|
-
--color-accent-wash: var(--color-white);
|
|
812
|
-
|
|
813
|
-
--global-saturation: 0;
|
|
774
|
+
${salt}
|
|
775
|
+
${computedVars}
|
|
814
776
|
}
|
|
815
777
|
|
|
816
778
|
html, body {
|
|
@@ -844,10 +806,37 @@ export default function presetAglio({ scale = 'md', interFontLocation = 'https:/
|
|
|
844
806
|
/** SYSTEM OVERRIDES **/
|
|
845
807
|
.override-light {
|
|
846
808
|
${lightMode}
|
|
809
|
+
color: var(--color-black);
|
|
847
810
|
}
|
|
848
811
|
|
|
849
812
|
.override-dark {
|
|
850
813
|
${darkMode}
|
|
814
|
+
color: var(--color-black);
|
|
815
|
+
}
|
|
816
|
+
|
|
817
|
+
.theme-override-lemon {
|
|
818
|
+
${lemon}
|
|
819
|
+
${computedVars}
|
|
820
|
+
}
|
|
821
|
+
.theme-override-blueberry {
|
|
822
|
+
${blueberry}
|
|
823
|
+
${computedVars}
|
|
824
|
+
}
|
|
825
|
+
.theme-override-eggplant {
|
|
826
|
+
${eggplant}
|
|
827
|
+
${computedVars}
|
|
828
|
+
}
|
|
829
|
+
.theme-override-leek {
|
|
830
|
+
${leek}
|
|
831
|
+
${computedVars}
|
|
832
|
+
}
|
|
833
|
+
.theme-override-tomato {
|
|
834
|
+
${tomato}
|
|
835
|
+
${computedVars}
|
|
836
|
+
}
|
|
837
|
+
.theme-override-salt {
|
|
838
|
+
${salt}
|
|
839
|
+
${computedVars}
|
|
851
840
|
}
|
|
852
841
|
}
|
|
853
842
|
|
|
@@ -895,7 +884,15 @@ export default function presetAglio({ scale = 'md', interFontLocation = 'https:/
|
|
|
895
884
|
],
|
|
896
885
|
};
|
|
897
886
|
}
|
|
898
|
-
const themeColors = [
|
|
887
|
+
const themeColors = [
|
|
888
|
+
'red',
|
|
889
|
+
'magenta',
|
|
890
|
+
'green',
|
|
891
|
+
'yellow',
|
|
892
|
+
'blue',
|
|
893
|
+
'purple',
|
|
894
|
+
'true-gray',
|
|
895
|
+
];
|
|
899
896
|
function roundTens(num) {
|
|
900
897
|
return Math.round(num / 10) * 10;
|
|
901
898
|
}
|
|
@@ -957,4 +954,28 @@ function darken(base, level) {
|
|
|
957
954
|
const levelNum = parseFloat(level);
|
|
958
955
|
return lighten(base, (levelNum / -15).toString());
|
|
959
956
|
}
|
|
957
|
+
function themeVars({ primary, accent, grayTweak, globalSaturation, }) {
|
|
958
|
+
return `
|
|
959
|
+
${themeVarRange({ name: 'attention', range: 'red' })}
|
|
960
|
+
${themeVarRange({ name: 'accent', range: accent })}
|
|
961
|
+
${themeVarRange({ name: 'primary', range: primary })}
|
|
962
|
+
|
|
963
|
+
--gray-hue-tweak: ${grayTweak !== null && grayTweak !== void 0 ? grayTweak : 0};
|
|
964
|
+
${globalSaturation !== undefined
|
|
965
|
+
? `--global-saturation: ${globalSaturation};`
|
|
966
|
+
: ''}
|
|
967
|
+
`;
|
|
968
|
+
}
|
|
969
|
+
function themeVarRange({ name, range, }) {
|
|
970
|
+
if (typeof range === 'string') {
|
|
971
|
+
return `--color-${name}: var(--color-${range});
|
|
972
|
+
--color-${name}-wash: var(--color-${range}-wash);
|
|
973
|
+
--color-${name}-light: var(--color-${range}-light);
|
|
974
|
+
--color-${name}-dark: var(--color-${range}-dark);`;
|
|
975
|
+
}
|
|
976
|
+
return `--color-${name}: var(--color-${range.default});
|
|
977
|
+
--color-${name}-wash: var(--color-${range.wash});
|
|
978
|
+
--color-${name}-light: var(--color-${range.light});
|
|
979
|
+
--color-${name}-dark: var(--color-${range.dark});`;
|
|
980
|
+
}
|
|
960
981
|
//# sourceMappingURL=uno.preset.js.map
|