@granularjs/ui 0.1.1 → 0.1.3
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/granular-ui.min.js +294 -37
- package/dist/granular-ui.min.js.map +3 -3
- package/package.json +2 -2
- package/src/components/ActionIcon.js +2 -1
- package/src/components/Button.js +2 -0
- package/src/components/Chip.js +3 -2
- package/src/components/Container.js +1 -0
- package/src/components/List.js +7 -1
- package/src/components/SegmentedControl.js +9 -9
- package/src/components/Text.js +8 -1
- package/src/components/TextInput.js +2 -1
- package/src/index.js +2 -2
- package/src/theme/styles.js +280 -23
- package/src/theme/theme.js +4 -0
- package/types/index.d.ts +2 -2
- package/types/theme/theme.d.ts +1 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@granularjs/ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"description": "90+ production-ready UI components for Granular. Dark/light themes, CSS variables, accessible, zero dependencies beyond @granularjs/core.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/granular-ui.min.js",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"build:debug": "mkdir -p ./dist/fonts && cp -R src/theme/fonts/* ./dist/fonts/ && npx -y esbuild src/index.js --bundle --sourcemap --format=esm --external:@granularjs/core --outfile=./dist/granular-ui.js && npx -y -p typescript@latest tsc -p tsconfig.json",
|
|
24
24
|
"build:watch": "npx -y esbuild src/index.js --bundle --minify --sourcemap --format=esm --external:@granularjs/core --outfile=./dist/granular-ui.min.js --watch",
|
|
25
25
|
"version": "npm run build:minify && git add -A",
|
|
26
|
-
"postversion": "git push && git push
|
|
26
|
+
"postversion": "git push && git push origin v$(node -p \"require('./package.json').version\")"
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
29
29
|
"@granularjs/core": "^1.0.0"
|
|
@@ -3,7 +3,7 @@ import { cx, splitPropsChildren, classVar } from '../utils.js';
|
|
|
3
3
|
|
|
4
4
|
export function ActionIcon(...args) {
|
|
5
5
|
const { props, children } = splitPropsChildren(args, { size: 'md', variant: 'filled' });
|
|
6
|
-
const { size, variant, className, ...rest } = props;
|
|
6
|
+
const { size, variant, color, className, ...rest } = props;
|
|
7
7
|
return Button(
|
|
8
8
|
{
|
|
9
9
|
...rest,
|
|
@@ -11,6 +11,7 @@ export function ActionIcon(...args) {
|
|
|
11
11
|
className: cx(
|
|
12
12
|
'g-ui-action-icon',
|
|
13
13
|
classVar('g-ui-action-icon-size-', size, 'md'),
|
|
14
|
+
classVar('g-ui-action-icon-color-', color, 'primary'),
|
|
14
15
|
classVar('g-ui-action-icon-', variant, 'filled'),
|
|
15
16
|
className
|
|
16
17
|
),
|
package/src/components/Button.js
CHANGED
|
@@ -5,6 +5,7 @@ export function Button(...args) {
|
|
|
5
5
|
const { props, children } = splitPropsChildren(args, { variant: 'filled', size: 'md', justify: 'center' });
|
|
6
6
|
const {
|
|
7
7
|
variant,
|
|
8
|
+
color,
|
|
8
9
|
size,
|
|
9
10
|
fullWidth,
|
|
10
11
|
loading,
|
|
@@ -25,6 +26,7 @@ export function Button(...args) {
|
|
|
25
26
|
className: cx(
|
|
26
27
|
'g-ui-button',
|
|
27
28
|
classVar('g-ui-button-variant-', variant, 'filled'),
|
|
29
|
+
classVar('g-ui-button-color-', color, 'primary'),
|
|
28
30
|
classVar('g-ui-justify-', justify, 'center'),
|
|
29
31
|
classVar('g-ui-button-size-', size, 'md'),
|
|
30
32
|
classFlag('g-ui-button-full', fullWidth),
|
package/src/components/Chip.js
CHANGED
|
@@ -2,8 +2,8 @@ import { Button, after, state } from '@granularjs/core';
|
|
|
2
2
|
import { cx, splitPropsChildren, classVar } from '../utils.js';
|
|
3
3
|
|
|
4
4
|
export function Chip(...args) {
|
|
5
|
-
const { props, rawProps, children } = splitPropsChildren(args, { size: 'md', variant: 'filled' });
|
|
6
|
-
const { checked, size, variant, className, ...rest } = props;
|
|
5
|
+
const { props, rawProps, children } = splitPropsChildren(args, { size: 'md', variant: 'filled', color: 'primary' });
|
|
6
|
+
const { checked, size, variant, color, className, ...rest } = props;
|
|
7
7
|
const { onChange } = rawProps;
|
|
8
8
|
const currentState = state(!!checked);
|
|
9
9
|
after(checked).change((next) => {
|
|
@@ -22,6 +22,7 @@ export function Chip(...args) {
|
|
|
22
22
|
'g-ui-chip',
|
|
23
23
|
classVar('g-ui-chip-size-', size, 'md'),
|
|
24
24
|
classVar('g-ui-chip-variant-', variant, 'filled'),
|
|
25
|
+
classVar('g-ui-chip-color-', color, 'primary'),
|
|
25
26
|
after(currentState).compute((current) => {
|
|
26
27
|
if (current) return 'g-ui-chip-active';
|
|
27
28
|
return '';
|
package/src/components/List.js
CHANGED
|
@@ -17,7 +17,13 @@ export function List(...args) {
|
|
|
17
17
|
value && typeof value === 'object' && typeof value.tagName === 'string' &&
|
|
18
18
|
value.tagName.toLowerCase() === 'li';
|
|
19
19
|
const wrapChild = (child) => {
|
|
20
|
+
console.log('INFO ABOUT ITEM', child,
|
|
21
|
+
typeof child,
|
|
22
|
+
typeof child?.tagName,
|
|
23
|
+
child?.tagName?.toLowerCase()
|
|
24
|
+
);
|
|
20
25
|
const wrapValue = (value) => {
|
|
26
|
+
if (value?.nodeType === 'granular-list-node') return value;
|
|
21
27
|
if (value == null || value === false) return null;
|
|
22
28
|
if (Array.isArray(value)) return value.map((item) => wrapValue(item));
|
|
23
29
|
if (isListItemNode(value)) return value;
|
|
@@ -29,7 +35,7 @@ export function List(...args) {
|
|
|
29
35
|
}
|
|
30
36
|
return wrapValue(child);
|
|
31
37
|
};
|
|
32
|
-
const listChildren = children.map((child) => wrapChild(child));
|
|
38
|
+
const listChildren = when(children, () => children.map((child) => wrapChild(child)));
|
|
33
39
|
const listProps = {
|
|
34
40
|
...rest,
|
|
35
41
|
className: cx(
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Div, after, state } from '@granularjs/core';
|
|
1
|
+
import { Div, after, state, list } from '@granularjs/core';
|
|
2
2
|
import { cx, splitPropsChildren, classVar, resolveValue } from '../utils.js';
|
|
3
3
|
|
|
4
4
|
export function SegmentedControl(...args) {
|
|
@@ -18,22 +18,22 @@ export function SegmentedControl(...args) {
|
|
|
18
18
|
return Div(
|
|
19
19
|
{ ...rest, className: cx(scroll && 'g-ui-segmented-scroll') },
|
|
20
20
|
Div(
|
|
21
|
-
{ className: cx('g-ui-segmented', classVar('g-ui-segmented-size-', size, 'sm'),
|
|
22
|
-
data
|
|
21
|
+
{ className: cx('g-ui-segmented', classVar('g-ui-segmented-size-', size, 'sm'), className) },
|
|
22
|
+
list(data, ((item) =>
|
|
23
23
|
Div(
|
|
24
24
|
{
|
|
25
25
|
className: cx(
|
|
26
26
|
'g-ui-segmented-item',
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
27
|
+
after(currentState).compute((current) => {
|
|
28
|
+
if (item.get().value === current) return 'g-ui-segmented-active';
|
|
29
|
+
return '';
|
|
30
|
+
})
|
|
31
31
|
),
|
|
32
|
-
onClick: () => setValue(item.value),
|
|
32
|
+
onClick: () => setValue(item.get().value),
|
|
33
33
|
},
|
|
34
34
|
item.label
|
|
35
35
|
)
|
|
36
|
-
)
|
|
36
|
+
))
|
|
37
37
|
)
|
|
38
38
|
);
|
|
39
39
|
}
|
package/src/components/Text.js
CHANGED
|
@@ -3,7 +3,7 @@ import { cx, splitPropsChildren, classVar, classFlag, classMap } from '../utils.
|
|
|
3
3
|
|
|
4
4
|
export function Text(...args) {
|
|
5
5
|
const { props, children } = splitPropsChildren(args, { size: 'md' });
|
|
6
|
-
const { size, weight, color, dimmed, align, ellipsis, className, style, ...rest } = props;
|
|
6
|
+
const { size, weight, color, dimmed, align, ellipsis, decoration, className, style, ...rest } = props;
|
|
7
7
|
const weightClass = classMap(weight, {
|
|
8
8
|
bold: 'g-ui-text-weight-700',
|
|
9
9
|
semibold: 'g-ui-text-weight-600',
|
|
@@ -24,6 +24,12 @@ export function Text(...args) {
|
|
|
24
24
|
right: 'g-ui-text-align-right',
|
|
25
25
|
left: 'g-ui-text-align-left',
|
|
26
26
|
});
|
|
27
|
+
const decorationClass = classMap(decoration, {
|
|
28
|
+
underline: 'g-ui-text-decoration-underline',
|
|
29
|
+
'line-through': 'g-ui-text-decoration-line-through',
|
|
30
|
+
overline: 'g-ui-text-decoration-overline',
|
|
31
|
+
none: 'g-ui-text-decoration-none',
|
|
32
|
+
});
|
|
27
33
|
return Span(
|
|
28
34
|
{
|
|
29
35
|
...rest,
|
|
@@ -36,6 +42,7 @@ export function Text(...args) {
|
|
|
36
42
|
weightClass,
|
|
37
43
|
colorClass,
|
|
38
44
|
alignClass,
|
|
45
|
+
decorationClass,
|
|
39
46
|
className
|
|
40
47
|
),
|
|
41
48
|
},
|
|
@@ -16,7 +16,7 @@ export function TextInput(...args) {
|
|
|
16
16
|
value: computed_value,
|
|
17
17
|
...rest
|
|
18
18
|
} = props;
|
|
19
|
-
const { value: raw_value, onChange, onInput, onFocus, onBlur, onKeyDown, onKeyUp, onClick } = rawProps;
|
|
19
|
+
const { value: raw_value, node, onChange, onInput, onFocus, onBlur, onKeyDown, onKeyUp, onClick } = rawProps;
|
|
20
20
|
|
|
21
21
|
const isValueTwoWay = isState(raw_value) && !onChange && !onInput
|
|
22
22
|
const currentState = isValueTwoWay ? raw_value : state(resolveValue(computed_value) ?? '');
|
|
@@ -40,6 +40,7 @@ export function TextInput(...args) {
|
|
|
40
40
|
|
|
41
41
|
const input = Control({
|
|
42
42
|
...rest,
|
|
43
|
+
node,
|
|
43
44
|
value: currentState,
|
|
44
45
|
onInput: handleInput,
|
|
45
46
|
onChange: handleInput,
|
package/src/index.js
CHANGED
|
@@ -2,8 +2,8 @@ import { ensureStyles } from './theme/styles.js';
|
|
|
2
2
|
|
|
3
3
|
ensureStyles();
|
|
4
4
|
|
|
5
|
-
export { setThemeVars, setThemeMode } from './theme/theme.js';
|
|
6
|
-
export { cx } from './utils.js';
|
|
5
|
+
export { setThemeVars, setThemeMode, getThemeMode } from './theme/theme.js';
|
|
6
|
+
export { cx, classVar, classFlag, classMap, splitPropsChildren } from './utils.js';
|
|
7
7
|
export { Button } from './components/Button.js';
|
|
8
8
|
export { Text } from './components/Text.js';
|
|
9
9
|
export { Title } from './components/Title.js';
|
package/src/theme/styles.js
CHANGED
|
@@ -370,9 +370,29 @@ const css = `
|
|
|
370
370
|
|
|
371
371
|
/* Aliases for common usage */
|
|
372
372
|
--g-ui-success: var(--g-ui-green-500);
|
|
373
|
+
--g-ui-success-hover: var(--g-ui-green-600);
|
|
374
|
+
--g-ui-success-active: var(--g-ui-green-700);
|
|
375
|
+
--g-ui-success-subtle: var(--g-ui-green-100);
|
|
376
|
+
--g-ui-success-muted: var(--g-ui-green-200);
|
|
377
|
+
--g-ui-success-fg: var(--g-ui-white);
|
|
373
378
|
--g-ui-danger: var(--g-ui-red-500);
|
|
379
|
+
--g-ui-danger-hover: var(--g-ui-red-600);
|
|
380
|
+
--g-ui-danger-active: var(--g-ui-red-700);
|
|
381
|
+
--g-ui-danger-subtle: var(--g-ui-red-100);
|
|
382
|
+
--g-ui-danger-muted: var(--g-ui-red-200);
|
|
383
|
+
--g-ui-danger-fg: var(--g-ui-white);
|
|
374
384
|
--g-ui-warning: var(--g-ui-yellow-500);
|
|
385
|
+
--g-ui-warning-hover: var(--g-ui-yellow-600);
|
|
386
|
+
--g-ui-warning-active: var(--g-ui-yellow-700);
|
|
387
|
+
--g-ui-warning-subtle: var(--g-ui-yellow-100);
|
|
388
|
+
--g-ui-warning-muted: var(--g-ui-yellow-200);
|
|
389
|
+
--g-ui-warning-fg: var(--g-ui-gray-900);
|
|
375
390
|
--g-ui-info: var(--g-ui-cyan-500);
|
|
391
|
+
--g-ui-info-hover: var(--g-ui-cyan-600);
|
|
392
|
+
--g-ui-info-active: var(--g-ui-cyan-700);
|
|
393
|
+
--g-ui-info-subtle: var(--g-ui-cyan-100);
|
|
394
|
+
--g-ui-info-muted: var(--g-ui-cyan-200);
|
|
395
|
+
--g-ui-info-fg: var(--g-ui-white);
|
|
376
396
|
|
|
377
397
|
/* Shadows - Dark theme (dual-layer, Linear/Vercel inspired) */
|
|
378
398
|
--g-ui-shadow-xs: 0px 1px 2px rgba(0, 0, 0, 0.48);
|
|
@@ -645,6 +665,10 @@ body {
|
|
|
645
665
|
.g-ui-text-align-left { text-align: left; }
|
|
646
666
|
.g-ui-text-align-center { text-align: center; }
|
|
647
667
|
.g-ui-text-align-right { text-align: right; }
|
|
668
|
+
.g-ui-text-decoration-underline { text-decoration: underline; }
|
|
669
|
+
.g-ui-text-decoration-line-through { text-decoration: line-through; }
|
|
670
|
+
.g-ui-text-decoration-overline { text-decoration: overline; }
|
|
671
|
+
.g-ui-text-decoration-none { text-decoration: none; }
|
|
648
672
|
|
|
649
673
|
.g-ui-title {
|
|
650
674
|
font-family: var(--g-ui-font);
|
|
@@ -836,11 +860,68 @@ body {
|
|
|
836
860
|
.g-ui-button-variant-outline:hover { background: var(--g-ui-primary-subtle); }
|
|
837
861
|
.g-ui-button-variant-subtle:hover { background: var(--g-ui-bg-muted); }
|
|
838
862
|
.g-ui-button-variant-transparent:hover { background: var(--g-ui-bg-muted); }
|
|
863
|
+
|
|
864
|
+
.g-ui-button-color-primary.g-ui-button-variant-filled { background: var(--g-ui-primary); color: var(--g-ui-primary-fg); border: 1px solid transparent; }
|
|
865
|
+
.g-ui-button-color-primary.g-ui-button-variant-light { background: var(--g-ui-primary-subtle); color: var(--g-ui-primary); border: 1px solid var(--g-ui-primary-muted); }
|
|
866
|
+
.g-ui-button-color-primary.g-ui-button-variant-outline { background: transparent; color: var(--g-ui-primary); border: 1px solid var(--g-ui-primary); }
|
|
867
|
+
.g-ui-button-color-primary.g-ui-button-variant-subtle { background: transparent; color: var(--g-ui-text); border: 1px solid var(--g-ui-border); }
|
|
868
|
+
.g-ui-button-color-primary.g-ui-button-variant-transparent { background: transparent; color: var(--g-ui-text); border: 1px solid transparent; }
|
|
869
|
+
.g-ui-button-color-primary.g-ui-button-variant-filled:hover { background: var(--g-ui-primary-hover); }
|
|
870
|
+
.g-ui-button-color-primary.g-ui-button-variant-light:hover { background: var(--g-ui-primary-muted); }
|
|
871
|
+
.g-ui-button-color-primary.g-ui-button-variant-outline:hover { background: var(--g-ui-primary-subtle); }
|
|
872
|
+
.g-ui-button-color-primary.g-ui-button-variant-subtle:hover { background: var(--g-ui-bg-muted); }
|
|
873
|
+
.g-ui-button-color-primary.g-ui-button-variant-transparent:hover { background: var(--g-ui-bg-muted); }
|
|
874
|
+
|
|
875
|
+
.g-ui-button-color-success.g-ui-button-variant-filled { background: var(--g-ui-success); color: var(--g-ui-success-fg); border: 1px solid transparent; }
|
|
876
|
+
.g-ui-button-color-success.g-ui-button-variant-light { background: var(--g-ui-success-subtle); color: var(--g-ui-success); border: 1px solid var(--g-ui-success-muted); }
|
|
877
|
+
.g-ui-button-color-success.g-ui-button-variant-outline { background: transparent; color: var(--g-ui-success); border: 1px solid var(--g-ui-success); }
|
|
878
|
+
.g-ui-button-color-success.g-ui-button-variant-subtle { background: transparent; color: var(--g-ui-text); border: 1px solid var(--g-ui-border); }
|
|
879
|
+
.g-ui-button-color-success.g-ui-button-variant-transparent { background: transparent; color: var(--g-ui-text); border: 1px solid transparent; }
|
|
880
|
+
.g-ui-button-color-success.g-ui-button-variant-filled:hover { background: var(--g-ui-success-hover); }
|
|
881
|
+
.g-ui-button-color-success.g-ui-button-variant-light:hover { background: var(--g-ui-success-muted); }
|
|
882
|
+
.g-ui-button-color-success.g-ui-button-variant-outline:hover { background: var(--g-ui-success-subtle); }
|
|
883
|
+
.g-ui-button-color-success.g-ui-button-variant-subtle:hover { background: var(--g-ui-bg-muted); }
|
|
884
|
+
.g-ui-button-color-success.g-ui-button-variant-transparent:hover { background: var(--g-ui-bg-muted); }
|
|
885
|
+
|
|
886
|
+
.g-ui-button-color-warning.g-ui-button-variant-filled { background: var(--g-ui-warning); color: var(--g-ui-warning-fg); border: 1px solid transparent; }
|
|
887
|
+
.g-ui-button-color-warning.g-ui-button-variant-light { background: var(--g-ui-warning-subtle); color: var(--g-ui-warning); border: 1px solid var(--g-ui-warning-muted); }
|
|
888
|
+
.g-ui-button-color-warning.g-ui-button-variant-outline { background: transparent; color: var(--g-ui-warning); border: 1px solid var(--g-ui-warning); }
|
|
889
|
+
.g-ui-button-color-warning.g-ui-button-variant-subtle { background: transparent; color: var(--g-ui-text); border: 1px solid var(--g-ui-border); }
|
|
890
|
+
.g-ui-button-color-warning.g-ui-button-variant-transparent { background: transparent; color: var(--g-ui-text); border: 1px solid transparent; }
|
|
891
|
+
.g-ui-button-color-warning.g-ui-button-variant-filled:hover { background: var(--g-ui-warning-hover); }
|
|
892
|
+
.g-ui-button-color-warning.g-ui-button-variant-light:hover { background: var(--g-ui-warning-muted); }
|
|
893
|
+
.g-ui-button-color-warning.g-ui-button-variant-outline:hover { background: var(--g-ui-warning-subtle); }
|
|
894
|
+
.g-ui-button-color-warning.g-ui-button-variant-subtle:hover { background: var(--g-ui-bg-muted); }
|
|
895
|
+
.g-ui-button-color-warning.g-ui-button-variant-transparent:hover { background: var(--g-ui-bg-muted); }
|
|
896
|
+
|
|
897
|
+
.g-ui-button-color-danger.g-ui-button-variant-filled { background: var(--g-ui-danger); color: var(--g-ui-danger-fg); border: 1px solid transparent; }
|
|
898
|
+
.g-ui-button-color-danger.g-ui-button-variant-light { background: var(--g-ui-danger-subtle); color: var(--g-ui-danger); border: 1px solid var(--g-ui-danger-muted); }
|
|
899
|
+
.g-ui-button-color-danger.g-ui-button-variant-outline { background: transparent; color: var(--g-ui-danger); border: 1px solid var(--g-ui-danger); }
|
|
900
|
+
.g-ui-button-color-danger.g-ui-button-variant-subtle { background: transparent; color: var(--g-ui-text); border: 1px solid var(--g-ui-border); }
|
|
901
|
+
.g-ui-button-color-danger.g-ui-button-variant-transparent { background: transparent; color: var(--g-ui-text); border: 1px solid transparent; }
|
|
902
|
+
.g-ui-button-color-danger.g-ui-button-variant-filled:hover { background: var(--g-ui-danger-hover); }
|
|
903
|
+
.g-ui-button-color-danger.g-ui-button-variant-light:hover { background: var(--g-ui-danger-muted); }
|
|
904
|
+
.g-ui-button-color-danger.g-ui-button-variant-outline:hover { background: var(--g-ui-danger-subtle); }
|
|
905
|
+
.g-ui-button-color-danger.g-ui-button-variant-subtle:hover { background: var(--g-ui-bg-muted); }
|
|
906
|
+
.g-ui-button-color-danger.g-ui-button-variant-transparent:hover { background: var(--g-ui-bg-muted); }
|
|
907
|
+
|
|
908
|
+
.g-ui-button-color-info.g-ui-button-variant-filled { background: var(--g-ui-info); color: var(--g-ui-info-fg); border: 1px solid transparent; }
|
|
909
|
+
.g-ui-button-color-info.g-ui-button-variant-light { background: var(--g-ui-info-subtle); color: var(--g-ui-info); border: 1px solid var(--g-ui-info-muted); }
|
|
910
|
+
.g-ui-button-color-info.g-ui-button-variant-outline { background: transparent; color: var(--g-ui-info); border: 1px solid var(--g-ui-info); }
|
|
911
|
+
.g-ui-button-color-info.g-ui-button-variant-subtle { background: transparent; color: var(--g-ui-text); border: 1px solid var(--g-ui-border); }
|
|
912
|
+
.g-ui-button-color-info.g-ui-button-variant-transparent { background: transparent; color: var(--g-ui-text); border: 1px solid transparent; }
|
|
913
|
+
.g-ui-button-color-info.g-ui-button-variant-filled:hover { background: var(--g-ui-info-hover); }
|
|
914
|
+
.g-ui-button-color-info.g-ui-button-variant-light:hover { background: var(--g-ui-info-muted); }
|
|
915
|
+
.g-ui-button-color-info.g-ui-button-variant-outline:hover { background: var(--g-ui-info-subtle); }
|
|
916
|
+
.g-ui-button-color-info.g-ui-button-variant-subtle:hover { background: var(--g-ui-bg-muted); }
|
|
917
|
+
.g-ui-button-color-info.g-ui-button-variant-transparent:hover { background: var(--g-ui-bg-muted); }
|
|
918
|
+
|
|
919
|
+
|
|
839
920
|
.g-ui-button-size-xs { font-size: 12px; height: 30px; padding: 0 var(--g-ui-space-8); }
|
|
840
921
|
.g-ui-button-size-sm { font-size: 13px; height: 36px; padding: 0 var(--g-ui-space-10); }
|
|
841
922
|
.g-ui-button-size-md { font-size: 14px; height: 42px; padding: 0 var(--g-ui-space-10); }
|
|
842
|
-
.g-ui-button-size-lg { font-size: 15px; height: 50px; padding: 0 var(--g-ui-space-
|
|
843
|
-
.g-ui-button-size-xl { font-size: 16px; height: 60px; padding: 0 var(--g-ui-space-
|
|
923
|
+
.g-ui-button-size-lg { font-size: 15px; height: 50px; padding: 0 var(--g-ui-space-12); }
|
|
924
|
+
.g-ui-button-size-xl { font-size: 16px; height: 60px; padding: 0 var(--g-ui-space-14); }
|
|
844
925
|
|
|
845
926
|
.g-ui-input-wrapper {
|
|
846
927
|
width: 100%;
|
|
@@ -1034,22 +1115,22 @@ body {
|
|
|
1034
1115
|
.g-ui-checkbox-size-xs .g-ui-checkbox-indeterminate svg { width: 16px; height: 16px; }
|
|
1035
1116
|
.g-ui-checkbox-size-sm .g-ui-checkbox-indeterminate { top:3px; left:4px; }
|
|
1036
1117
|
.g-ui-checkbox-size-sm .g-ui-checkbox-indeterminate svg { width: 20px; height:20px; }
|
|
1037
|
-
.g-ui-checkbox-size-md .g-ui-checkbox-indeterminate { top:
|
|
1118
|
+
.g-ui-checkbox-size-md .g-ui-checkbox-indeterminate { top:0px; left:0px; }
|
|
1038
1119
|
.g-ui-checkbox-size-md .g-ui-checkbox-indeterminate svg { width: 24px; height: 24px; }
|
|
1039
1120
|
.g-ui-checkbox-size-lg .g-ui-checkbox-indeterminate { top:4px; left:5px; }
|
|
1040
1121
|
.g-ui-checkbox-size-lg .g-ui-checkbox-indeterminate svg { width: 28px; height: 28px; }
|
|
1041
1122
|
.g-ui-checkbox-size-xl .g-ui-checkbox-indeterminate { top:5px; left:6px; }
|
|
1042
1123
|
.g-ui-checkbox-size-xl .g-ui-checkbox-indeterminate svg { width: 32px; height: 32px; }
|
|
1043
1124
|
|
|
1044
|
-
.g-ui-checkbox-size-xs .g-ui-checkbox-checked { top:
|
|
1125
|
+
.g-ui-checkbox-size-xs .g-ui-checkbox-checked { top: 0px;left:0.5px; }
|
|
1045
1126
|
.g-ui-checkbox-size-xs .g-ui-checkbox-checked svg { width: 16px; height: 16px; }
|
|
1046
|
-
.g-ui-checkbox-size-sm .g-ui-checkbox-checked { top:
|
|
1127
|
+
.g-ui-checkbox-size-sm .g-ui-checkbox-checked { top:0px; left:0.3px; }
|
|
1047
1128
|
.g-ui-checkbox-size-sm .g-ui-checkbox-checked svg { width: 20px; height:20px; }
|
|
1048
|
-
.g-ui-checkbox-size-md .g-ui-checkbox-checked { top:
|
|
1129
|
+
.g-ui-checkbox-size-md .g-ui-checkbox-checked { top:0px; left:0px; }
|
|
1049
1130
|
.g-ui-checkbox-size-md .g-ui-checkbox-checked svg { width: 24px; height: 24px; }
|
|
1050
|
-
.g-ui-checkbox-size-lg .g-ui-checkbox-checked { top:
|
|
1131
|
+
.g-ui-checkbox-size-lg .g-ui-checkbox-checked { top:1px; left:1px; }
|
|
1051
1132
|
.g-ui-checkbox-size-lg .g-ui-checkbox-checked svg { width: 28px; height: 28px; }
|
|
1052
|
-
.g-ui-checkbox-size-xl .g-ui-checkbox-checked { top:
|
|
1133
|
+
.g-ui-checkbox-size-xl .g-ui-checkbox-checked { top:2px; left:3px; }
|
|
1053
1134
|
.g-ui-checkbox-size-xl .g-ui-checkbox-checked svg { width: 32px; height: 32px; }
|
|
1054
1135
|
|
|
1055
1136
|
.g-ui-switch {
|
|
@@ -1884,26 +1965,78 @@ body {
|
|
|
1884
1965
|
background: transparent;
|
|
1885
1966
|
color: var(--g-ui-text);
|
|
1886
1967
|
}
|
|
1887
|
-
.g-ui-chip-active {
|
|
1888
|
-
background: var(--g-ui-primary);
|
|
1889
|
-
border-color: transparent;
|
|
1890
|
-
color: var(--g-ui-primary-fg);
|
|
1891
|
-
}
|
|
1892
1968
|
.g-ui-chip-size-xs { font-size: 12px; height: 20px; padding: 0 var(--g-ui-space-6); }
|
|
1893
1969
|
.g-ui-chip-size-sm { font-size: 13px; height: 21px; padding: 0 var(--g-ui-space-5); }
|
|
1894
1970
|
.g-ui-chip-size-md { font-size: 14px; height: 22px; padding: 0 var(--g-ui-space-6); }
|
|
1895
1971
|
.g-ui-chip-size-lg { font-size: 15px; height: 23px; padding: 0 var(--g-ui-space-7); }
|
|
1896
1972
|
.g-ui-chip-size-xl { font-size: 16px; height: 24px; padding: 0 var(--g-ui-space-8); }
|
|
1897
|
-
|
|
1898
|
-
.g-ui-chip-variant-
|
|
1899
|
-
.g-ui-chip-variant-
|
|
1900
|
-
.g-ui-chip-
|
|
1901
|
-
.g-ui-chip-
|
|
1902
|
-
.g-ui-chip-
|
|
1903
|
-
|
|
1904
|
-
|
|
1905
|
-
|
|
1906
|
-
}
|
|
1973
|
+
|
|
1974
|
+
.g-ui-chip-color-primary.g-ui-chip-variant-filled { background: var(--g-ui-bg-muted); color: var(--g-ui-text); border-color: transparent; }
|
|
1975
|
+
.g-ui-chip-color-primary.g-ui-chip-variant-light { background: var(--g-ui-primary-subtle); color: var(--g-ui-primary); border: 1px solid var(--g-ui-primary-muted); }
|
|
1976
|
+
.g-ui-chip-color-primary.g-ui-chip-variant-outline { background: var(--g-ui-surface); color: var(--g-ui-text); border-color: var(--g-ui-border); }
|
|
1977
|
+
.g-ui-chip-color-primary.g-ui-chip-variant-filled:hover { background: var(--g-ui-bg-muted-hover, var(--g-ui-bg-muted)); }
|
|
1978
|
+
.g-ui-chip-color-primary.g-ui-chip-variant-light:hover { background: var(--g-ui-primary-muted); }
|
|
1979
|
+
.g-ui-chip-color-primary.g-ui-chip-variant-outline:hover { border-color: var(--g-ui-primary); color: var(--g-ui-primary); }
|
|
1980
|
+
.g-ui-chip-color-primary.g-ui-chip-variant-filled.g-ui-chip-active,
|
|
1981
|
+
.g-ui-chip-color-primary.g-ui-chip-variant-light.g-ui-chip-active,
|
|
1982
|
+
.g-ui-chip-color-primary.g-ui-chip-variant-outline.g-ui-chip-active { background: var(--g-ui-primary); color: var(--g-ui-primary-fg); border-color: transparent; }
|
|
1983
|
+
|
|
1984
|
+
.g-ui-chip-color-success.g-ui-chip-variant-filled { background: var(--g-ui-bg-muted); color: var(--g-ui-text); border-color: transparent; }
|
|
1985
|
+
.g-ui-chip-color-success.g-ui-chip-variant-light { background: var(--g-ui-success-subtle); color: var(--g-ui-success); border: 1px solid var(--g-ui-success-muted); }
|
|
1986
|
+
.g-ui-chip-color-success.g-ui-chip-variant-outline { background: var(--g-ui-surface); color: var(--g-ui-text); border-color: var(--g-ui-border); }
|
|
1987
|
+
.g-ui-chip-color-success.g-ui-chip-variant-filled:hover { background: var(--g-ui-bg-muted-hover, var(--g-ui-bg-muted)); }
|
|
1988
|
+
.g-ui-chip-color-success.g-ui-chip-variant-light:hover { background: var(--g-ui-success-muted); }
|
|
1989
|
+
.g-ui-chip-color-success.g-ui-chip-variant-outline:hover { border-color: var(--g-ui-success); color: var(--g-ui-success); }
|
|
1990
|
+
.g-ui-chip-color-success.g-ui-chip-variant-filled.g-ui-chip-active,
|
|
1991
|
+
.g-ui-chip-color-success.g-ui-chip-variant-light.g-ui-chip-active,
|
|
1992
|
+
.g-ui-chip-color-success.g-ui-chip-variant-outline.g-ui-chip-active { background: var(--g-ui-success); color: var(--g-ui-success-fg); border-color: transparent; }
|
|
1993
|
+
|
|
1994
|
+
.g-ui-chip-color-warning.g-ui-chip-variant-filled { background: var(--g-ui-bg-muted); color: var(--g-ui-text); border-color: transparent; }
|
|
1995
|
+
.g-ui-chip-color-warning.g-ui-chip-variant-light { background: var(--g-ui-warning-subtle); color: var(--g-ui-warning); border: 1px solid var(--g-ui-warning-muted); }
|
|
1996
|
+
.g-ui-chip-color-warning.g-ui-chip-variant-outline { background: var(--g-ui-surface); color: var(--g-ui-text); border-color: var(--g-ui-border); }
|
|
1997
|
+
.g-ui-chip-color-warning.g-ui-chip-variant-filled:hover { background: var(--g-ui-bg-muted-hover, var(--g-ui-bg-muted)); }
|
|
1998
|
+
.g-ui-chip-color-warning.g-ui-chip-variant-light:hover { background: var(--g-ui-warning-muted); }
|
|
1999
|
+
.g-ui-chip-color-warning.g-ui-chip-variant-outline:hover { border-color: var(--g-ui-warning); color: var(--g-ui-warning); }
|
|
2000
|
+
.g-ui-chip-color-warning.g-ui-chip-variant-filled.g-ui-chip-active,
|
|
2001
|
+
.g-ui-chip-color-warning.g-ui-chip-variant-light.g-ui-chip-active,
|
|
2002
|
+
.g-ui-chip-color-warning.g-ui-chip-variant-outline.g-ui-chip-active { background: var(--g-ui-warning); color: var(--g-ui-warning-fg); border-color: transparent; }
|
|
2003
|
+
|
|
2004
|
+
.g-ui-chip-color-danger.g-ui-chip-variant-filled { background: var(--g-ui-bg-muted); color: var(--g-ui-text); border-color: transparent; }
|
|
2005
|
+
.g-ui-chip-color-danger.g-ui-chip-variant-light { background: var(--g-ui-danger-subtle); color: var(--g-ui-danger); border: 1px solid var(--g-ui-danger-muted); }
|
|
2006
|
+
.g-ui-chip-color-danger.g-ui-chip-variant-outline { background: var(--g-ui-surface); color: var(--g-ui-text); border-color: var(--g-ui-border); }
|
|
2007
|
+
.g-ui-chip-color-danger.g-ui-chip-variant-filled:hover { background: var(--g-ui-bg-muted-hover, var(--g-ui-bg-muted)); }
|
|
2008
|
+
.g-ui-chip-color-danger.g-ui-chip-variant-light:hover { background: var(--g-ui-danger-muted); }
|
|
2009
|
+
.g-ui-chip-color-danger.g-ui-chip-variant-outline:hover { border-color: var(--g-ui-danger); color: var(--g-ui-danger); }
|
|
2010
|
+
.g-ui-chip-color-danger.g-ui-chip-variant-filled.g-ui-chip-active,
|
|
2011
|
+
.g-ui-chip-color-danger.g-ui-chip-variant-light.g-ui-chip-active,
|
|
2012
|
+
.g-ui-chip-color-danger.g-ui-chip-variant-outline.g-ui-chip-active { background: var(--g-ui-danger); color: var(--g-ui-danger-fg); border-color: transparent; }
|
|
2013
|
+
|
|
2014
|
+
.g-ui-chip-color-info.g-ui-chip-variant-filled { background: var(--g-ui-bg-muted); color: var(--g-ui-text); border-color: transparent; }
|
|
2015
|
+
.g-ui-chip-color-info.g-ui-chip-variant-light { background: var(--g-ui-info-subtle); color: var(--g-ui-info); border: 1px solid var(--g-ui-info-muted); }
|
|
2016
|
+
.g-ui-chip-color-info.g-ui-chip-variant-outline { background: var(--g-ui-surface); color: var(--g-ui-text); border-color: var(--g-ui-border); }
|
|
2017
|
+
.g-ui-chip-color-info.g-ui-chip-variant-filled:hover { background: var(--g-ui-bg-muted-hover, var(--g-ui-bg-muted)); }
|
|
2018
|
+
.g-ui-chip-color-info.g-ui-chip-variant-light:hover { background: var(--g-ui-info-muted); }
|
|
2019
|
+
.g-ui-chip-color-info.g-ui-chip-variant-outline:hover { border-color: var(--g-ui-info); color: var(--g-ui-info); }
|
|
2020
|
+
.g-ui-chip-color-info.g-ui-chip-variant-filled.g-ui-chip-active,
|
|
2021
|
+
.g-ui-chip-color-info.g-ui-chip-variant-light.g-ui-chip-active,
|
|
2022
|
+
.g-ui-chip-color-info.g-ui-chip-variant-outline.g-ui-chip-active { background: var(--g-ui-info); color: var(--g-ui-info-fg); border-color: transparent; }
|
|
2023
|
+
|
|
2024
|
+
|
|
2025
|
+
|
|
2026
|
+
|
|
2027
|
+
|
|
2028
|
+
|
|
2029
|
+
|
|
2030
|
+
|
|
2031
|
+
|
|
2032
|
+
|
|
2033
|
+
|
|
2034
|
+
|
|
2035
|
+
|
|
2036
|
+
|
|
2037
|
+
|
|
2038
|
+
|
|
2039
|
+
|
|
1907
2040
|
|
|
1908
2041
|
.g-ui-segmented {
|
|
1909
2042
|
display: inline-flex;
|
|
@@ -3261,6 +3394,130 @@ body {
|
|
|
3261
3394
|
.g-ui-action-icon-outline:hover { background: var(--g-ui-primary-subtle); }
|
|
3262
3395
|
.g-ui-action-icon-subtle:hover { background: var(--g-ui-bg-muted); }
|
|
3263
3396
|
|
|
3397
|
+
|
|
3398
|
+
|
|
3399
|
+
.g-ui-action-icon-color-primary.g-ui-action-icon-filled {
|
|
3400
|
+
background: var(--g-ui-primary);
|
|
3401
|
+
border-color: transparent;
|
|
3402
|
+
color: var(--g-ui-primary-fg);
|
|
3403
|
+
}
|
|
3404
|
+
.g-ui-action-icon-color-primary.g-ui-action-icon-subtle {
|
|
3405
|
+
background: transparent;
|
|
3406
|
+
border-color: var(--g-ui-border);
|
|
3407
|
+
}
|
|
3408
|
+
.g-ui-action-icon-color-primary.g-ui-action-icon-light {
|
|
3409
|
+
background: var(--g-ui-primary-subtle);
|
|
3410
|
+
border-color: var(--g-ui-primary-muted);
|
|
3411
|
+
color: var(--g-ui-primary);
|
|
3412
|
+
}
|
|
3413
|
+
.g-ui-action-icon-color-primary.g-ui-action-icon-outline {
|
|
3414
|
+
background: transparent;
|
|
3415
|
+
border-color: var(--g-ui-primary);
|
|
3416
|
+
color: var(--g-ui-primary);
|
|
3417
|
+
}
|
|
3418
|
+
.g-ui-action-icon-color-primary.g-ui-action-icon-filled:hover { background: var(--g-ui-primary-hover); }
|
|
3419
|
+
.g-ui-action-icon-color-primary.g-ui-action-icon-light:hover { background: var(--g-ui-primary-muted); }
|
|
3420
|
+
.g-ui-action-icon-color-primary.g-ui-action-icon-outline:hover { background: var(--g-ui-primary-subtle); }
|
|
3421
|
+
.g-ui-action-icon-color-primary.g-ui-action-icon-subtle:hover { background: var(--g-ui-bg-muted); }
|
|
3422
|
+
|
|
3423
|
+
|
|
3424
|
+
.g-ui-action-icon-color-success.g-ui-action-icon-filled {
|
|
3425
|
+
background: var(--g-ui-success);
|
|
3426
|
+
border-color: transparent;
|
|
3427
|
+
color: var(--g-ui-success-fg);
|
|
3428
|
+
}
|
|
3429
|
+
.g-ui-action-icon-color-success.g-ui-action-icon-subtle {
|
|
3430
|
+
background: transparent;
|
|
3431
|
+
border-color: var(--g-ui-border);
|
|
3432
|
+
}
|
|
3433
|
+
.g-ui-action-icon-color-success.g-ui-action-icon-light {
|
|
3434
|
+
background: var(--g-ui-success-subtle);
|
|
3435
|
+
border-color: var(--g-ui-success-muted);
|
|
3436
|
+
color: var(--g-ui-success);
|
|
3437
|
+
}
|
|
3438
|
+
.g-ui-action-icon-color-success.g-ui-action-icon-outline {
|
|
3439
|
+
background: transparent;
|
|
3440
|
+
border-color: var(--g-ui-success);
|
|
3441
|
+
color: var(--g-ui-success);
|
|
3442
|
+
}
|
|
3443
|
+
.g-ui-action-icon-color-success.g-ui-action-icon-filled:hover { background: var(--g-ui-success-hover); }
|
|
3444
|
+
.g-ui-action-icon-color-success.g-ui-action-icon-light:hover { background: var(--g-ui-success-muted); }
|
|
3445
|
+
.g-ui-action-icon-color-success.g-ui-action-icon-outline:hover { background: var(--g-ui-success-subtle); }
|
|
3446
|
+
.g-ui-action-icon-color-success.g-ui-action-icon-subtle:hover { background: var(--g-ui-bg-muted); }
|
|
3447
|
+
|
|
3448
|
+
.g-ui-action-icon-color-danger.g-ui-action-icon-filled {
|
|
3449
|
+
background: var(--g-ui-danger);
|
|
3450
|
+
border-color: transparent;
|
|
3451
|
+
color: var(--g-ui-danger-fg);
|
|
3452
|
+
}
|
|
3453
|
+
.g-ui-action-icon-color-danger.g-ui-action-icon-subtle {
|
|
3454
|
+
background: transparent;
|
|
3455
|
+
border-color: var(--g-ui-border);
|
|
3456
|
+
}
|
|
3457
|
+
.g-ui-action-icon-color-danger.g-ui-action-icon-light {
|
|
3458
|
+
background: var(--g-ui-danger-subtle);
|
|
3459
|
+
border-color: var(--g-ui-danger-muted);
|
|
3460
|
+
color: var(--g-ui-danger);
|
|
3461
|
+
}
|
|
3462
|
+
.g-ui-action-icon-color-danger.g-ui-action-icon-outline {
|
|
3463
|
+
background: transparent;
|
|
3464
|
+
border-color: var(--g-ui-danger);
|
|
3465
|
+
color: var(--g-ui-danger);
|
|
3466
|
+
}
|
|
3467
|
+
.g-ui-action-icon-color-danger.g-ui-action-icon-filled:hover { background: var(--g-ui-danger-hover); }
|
|
3468
|
+
.g-ui-action-icon-color-danger.g-ui-action-icon-light:hover { background: var(--g-ui-danger-muted); }
|
|
3469
|
+
.g-ui-action-icon-color-danger.g-ui-action-icon-outline:hover { background: var(--g-ui-danger-subtle); }
|
|
3470
|
+
.g-ui-action-icon-color-danger.g-ui-action-icon-subtle:hover { background: var(--g-ui-bg-muted); }
|
|
3471
|
+
|
|
3472
|
+
.g-ui-action-icon-color-warning.g-ui-action-icon-filled {
|
|
3473
|
+
background: var(--g-ui-warning);
|
|
3474
|
+
border-color: transparent;
|
|
3475
|
+
color: var(--g-ui-warning-fg);
|
|
3476
|
+
}
|
|
3477
|
+
.g-ui-action-icon-color-warning.g-ui-action-icon-subtle {
|
|
3478
|
+
background: transparent;
|
|
3479
|
+
border-color: var(--g-ui-border);
|
|
3480
|
+
}
|
|
3481
|
+
.g-ui-action-icon-color-warning.g-ui-action-icon-light {
|
|
3482
|
+
background: var(--g-ui-warning-subtle);
|
|
3483
|
+
border-color: var(--g-ui-warning-muted);
|
|
3484
|
+
color: var(--g-ui-warning);
|
|
3485
|
+
}
|
|
3486
|
+
.g-ui-action-icon-color-warning.g-ui-action-icon-outline {
|
|
3487
|
+
background: transparent;
|
|
3488
|
+
border-color: var(--g-ui-warning);
|
|
3489
|
+
color: var(--g-ui-warning);
|
|
3490
|
+
}
|
|
3491
|
+
.g-ui-action-icon-color-warning.g-ui-action-icon-filled:hover { background: var(--g-ui-warning-hover); }
|
|
3492
|
+
.g-ui-action-icon-color-warning.g-ui-action-icon-light:hover { background: var(--g-ui-warning-muted); }
|
|
3493
|
+
.g-ui-action-icon-color-warning.g-ui-action-icon-outline:hover { background: var(--g-ui-warning-subtle); }
|
|
3494
|
+
.g-ui-action-icon-color-warning.g-ui-action-icon-subtle:hover { background: var(--g-ui-bg-muted); }
|
|
3495
|
+
|
|
3496
|
+
.g-ui-action-icon-color-info.g-ui-action-icon-filled {
|
|
3497
|
+
background: var(--g-ui-info);
|
|
3498
|
+
border-color: transparent;
|
|
3499
|
+
color: var(--g-ui-info-fg);
|
|
3500
|
+
}
|
|
3501
|
+
.g-ui-action-icon-color-info.g-ui-action-icon-subtle {
|
|
3502
|
+
background: transparent;
|
|
3503
|
+
border-color: var(--g-ui-border);
|
|
3504
|
+
}
|
|
3505
|
+
.g-ui-action-icon-color-info.g-ui-action-icon-light {
|
|
3506
|
+
background: var(--g-ui-info-subtle);
|
|
3507
|
+
border-color: var(--g-ui-info-muted);
|
|
3508
|
+
color: var(--g-ui-info);
|
|
3509
|
+
}
|
|
3510
|
+
.g-ui-action-icon-color-info.g-ui-action-icon-outline {
|
|
3511
|
+
background: transparent;
|
|
3512
|
+
border-color: var(--g-ui-info);
|
|
3513
|
+
color: var(--g-ui-info);
|
|
3514
|
+
}
|
|
3515
|
+
.g-ui-action-icon-color-info.g-ui-action-icon-filled:hover { background: var(--g-ui-info-hover); }
|
|
3516
|
+
.g-ui-action-icon-color-info.g-ui-action-icon-light:hover { background: var(--g-ui-info-muted); }
|
|
3517
|
+
.g-ui-action-icon-color-info.g-ui-action-icon-outline:hover { background: var(--g-ui-info-subtle); }
|
|
3518
|
+
.g-ui-action-icon-color-info.g-ui-action-icon-subtle:hover { background: var(--g-ui-bg-muted); }
|
|
3519
|
+
|
|
3520
|
+
|
|
3264
3521
|
.g-ui-popover {
|
|
3265
3522
|
position: relative;
|
|
3266
3523
|
display: inline-flex;
|
package/src/theme/theme.js
CHANGED
|
@@ -69,3 +69,7 @@ export function setThemeMode(mode = 'dark', target = document?.documentElement)
|
|
|
69
69
|
target.classList.remove('g-ui-theme-dark', 'g-ui-theme-light');
|
|
70
70
|
target.classList.add(mode === 'light' ? 'g-ui-theme-light' : 'g-ui-theme-dark');
|
|
71
71
|
}
|
|
72
|
+
|
|
73
|
+
export function getThemeMode(target = document?.documentElement) {
|
|
74
|
+
return target.classList.contains('g-ui-theme-light') ? 'light' : 'dark';
|
|
75
|
+
}
|
package/types/index.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
export { cx } from "./utils.js";
|
|
2
1
|
export { Button } from "./components/Button.js";
|
|
3
2
|
export { Text } from "./components/Text.js";
|
|
4
3
|
export { Title } from "./components/Title.js";
|
|
@@ -90,4 +89,5 @@ export { GridTable } from "./components/GridTable.js";
|
|
|
90
89
|
export { BottomBar } from "./components/BottomBar.js";
|
|
91
90
|
export { EventCalendar } from "./components/EventCalendar.js";
|
|
92
91
|
export { useDisclosure } from "./hooks/useDisclosure.js";
|
|
93
|
-
export { setThemeVars, setThemeMode } from "./theme/theme.js";
|
|
92
|
+
export { setThemeVars, setThemeMode, getThemeMode } from "./theme/theme.js";
|
|
93
|
+
export { cx, classVar, classFlag, classMap, splitPropsChildren } from "./utils.js";
|
package/types/theme/theme.d.ts
CHANGED