@granularjs/ui 0.1.2 → 0.2.0
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 +308 -39
- 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/Text.js +8 -1
- package/src/components/TextInput.js +2 -1
- package/src/index.js +1 -1
- package/src/theme/styles.js +294 -25
- package/src/theme/theme.js +4 -0
- package/types/index.d.ts +1 -1
- 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.
|
|
3
|
+
"version": "0.2.0",
|
|
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/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,7 +2,7 @@ import { ensureStyles } from './theme/styles.js';
|
|
|
2
2
|
|
|
3
3
|
ensureStyles();
|
|
4
4
|
|
|
5
|
-
export { setThemeVars, setThemeMode } from './theme/theme.js';
|
|
5
|
+
export { setThemeVars, setThemeMode, getThemeMode } from './theme/theme.js';
|
|
6
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';
|
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);
|
|
@@ -389,6 +409,11 @@ const css = `
|
|
|
389
409
|
--g-ui-primary-strong: var(--g-ui-primary-active);
|
|
390
410
|
--g-ui-shadow: var(--g-ui-shadow-md);
|
|
391
411
|
|
|
412
|
+
/* Overlays (themeable) */
|
|
413
|
+
--g-ui-overlay-light: rgba(0,0,0,0.4);
|
|
414
|
+
--g-ui-overlay-normal: rgba(0,0,0,0.6);
|
|
415
|
+
--g-ui-overlay-dark: rgba(0,0,0,0.8);
|
|
416
|
+
|
|
392
417
|
/* Misc */
|
|
393
418
|
--g-ui-radius: 4px;
|
|
394
419
|
--g-ui-font: 'Inter', 'Arimo', 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
@@ -609,6 +634,13 @@ const css = `
|
|
|
609
634
|
--g-ui-shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
|
|
610
635
|
--g-ui-shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
|
|
611
636
|
}
|
|
637
|
+
|
|
638
|
+
* {
|
|
639
|
+
box-sizing: border-box;
|
|
640
|
+
margin: 0;
|
|
641
|
+
padding: 0;
|
|
642
|
+
}
|
|
643
|
+
|
|
612
644
|
body {
|
|
613
645
|
margin: 0;
|
|
614
646
|
padding: 0;
|
|
@@ -645,6 +677,10 @@ body {
|
|
|
645
677
|
.g-ui-text-align-left { text-align: left; }
|
|
646
678
|
.g-ui-text-align-center { text-align: center; }
|
|
647
679
|
.g-ui-text-align-right { text-align: right; }
|
|
680
|
+
.g-ui-text-decoration-underline { text-decoration: underline; }
|
|
681
|
+
.g-ui-text-decoration-line-through { text-decoration: line-through; }
|
|
682
|
+
.g-ui-text-decoration-overline { text-decoration: overline; }
|
|
683
|
+
.g-ui-text-decoration-none { text-decoration: none; }
|
|
648
684
|
|
|
649
685
|
.g-ui-title {
|
|
650
686
|
font-family: var(--g-ui-font);
|
|
@@ -836,6 +872,63 @@ body {
|
|
|
836
872
|
.g-ui-button-variant-outline:hover { background: var(--g-ui-primary-subtle); }
|
|
837
873
|
.g-ui-button-variant-subtle:hover { background: var(--g-ui-bg-muted); }
|
|
838
874
|
.g-ui-button-variant-transparent:hover { background: var(--g-ui-bg-muted); }
|
|
875
|
+
|
|
876
|
+
.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; }
|
|
877
|
+
.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); }
|
|
878
|
+
.g-ui-button-color-primary.g-ui-button-variant-outline { background: transparent; color: var(--g-ui-primary); border: 1px solid var(--g-ui-primary); }
|
|
879
|
+
.g-ui-button-color-primary.g-ui-button-variant-subtle { background: transparent; color: var(--g-ui-text); border: 1px solid var(--g-ui-border); }
|
|
880
|
+
.g-ui-button-color-primary.g-ui-button-variant-transparent { background: transparent; color: var(--g-ui-text); border: 1px solid transparent; }
|
|
881
|
+
.g-ui-button-color-primary.g-ui-button-variant-filled:hover { background: var(--g-ui-primary-hover); }
|
|
882
|
+
.g-ui-button-color-primary.g-ui-button-variant-light:hover { background: var(--g-ui-primary-muted); }
|
|
883
|
+
.g-ui-button-color-primary.g-ui-button-variant-outline:hover { background: var(--g-ui-primary-subtle); }
|
|
884
|
+
.g-ui-button-color-primary.g-ui-button-variant-subtle:hover { background: var(--g-ui-bg-muted); }
|
|
885
|
+
.g-ui-button-color-primary.g-ui-button-variant-transparent:hover { background: var(--g-ui-bg-muted); }
|
|
886
|
+
|
|
887
|
+
.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; }
|
|
888
|
+
.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); }
|
|
889
|
+
.g-ui-button-color-success.g-ui-button-variant-outline { background: transparent; color: var(--g-ui-success); border: 1px solid var(--g-ui-success); }
|
|
890
|
+
.g-ui-button-color-success.g-ui-button-variant-subtle { background: transparent; color: var(--g-ui-text); border: 1px solid var(--g-ui-border); }
|
|
891
|
+
.g-ui-button-color-success.g-ui-button-variant-transparent { background: transparent; color: var(--g-ui-text); border: 1px solid transparent; }
|
|
892
|
+
.g-ui-button-color-success.g-ui-button-variant-filled:hover { background: var(--g-ui-success-hover); }
|
|
893
|
+
.g-ui-button-color-success.g-ui-button-variant-light:hover { background: var(--g-ui-success-muted); }
|
|
894
|
+
.g-ui-button-color-success.g-ui-button-variant-outline:hover { background: var(--g-ui-success-subtle); }
|
|
895
|
+
.g-ui-button-color-success.g-ui-button-variant-subtle:hover { background: var(--g-ui-bg-muted); }
|
|
896
|
+
.g-ui-button-color-success.g-ui-button-variant-transparent:hover { background: var(--g-ui-bg-muted); }
|
|
897
|
+
|
|
898
|
+
.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; }
|
|
899
|
+
.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); }
|
|
900
|
+
.g-ui-button-color-warning.g-ui-button-variant-outline { background: transparent; color: var(--g-ui-warning); border: 1px solid var(--g-ui-warning); }
|
|
901
|
+
.g-ui-button-color-warning.g-ui-button-variant-subtle { background: transparent; color: var(--g-ui-text); border: 1px solid var(--g-ui-border); }
|
|
902
|
+
.g-ui-button-color-warning.g-ui-button-variant-transparent { background: transparent; color: var(--g-ui-text); border: 1px solid transparent; }
|
|
903
|
+
.g-ui-button-color-warning.g-ui-button-variant-filled:hover { background: var(--g-ui-warning-hover); }
|
|
904
|
+
.g-ui-button-color-warning.g-ui-button-variant-light:hover { background: var(--g-ui-warning-muted); }
|
|
905
|
+
.g-ui-button-color-warning.g-ui-button-variant-outline:hover { background: var(--g-ui-warning-subtle); }
|
|
906
|
+
.g-ui-button-color-warning.g-ui-button-variant-subtle:hover { background: var(--g-ui-bg-muted); }
|
|
907
|
+
.g-ui-button-color-warning.g-ui-button-variant-transparent:hover { background: var(--g-ui-bg-muted); }
|
|
908
|
+
|
|
909
|
+
.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; }
|
|
910
|
+
.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); }
|
|
911
|
+
.g-ui-button-color-danger.g-ui-button-variant-outline { background: transparent; color: var(--g-ui-danger); border: 1px solid var(--g-ui-danger); }
|
|
912
|
+
.g-ui-button-color-danger.g-ui-button-variant-subtle { background: transparent; color: var(--g-ui-text); border: 1px solid var(--g-ui-border); }
|
|
913
|
+
.g-ui-button-color-danger.g-ui-button-variant-transparent { background: transparent; color: var(--g-ui-text); border: 1px solid transparent; }
|
|
914
|
+
.g-ui-button-color-danger.g-ui-button-variant-filled:hover { background: var(--g-ui-danger-hover); }
|
|
915
|
+
.g-ui-button-color-danger.g-ui-button-variant-light:hover { background: var(--g-ui-danger-muted); }
|
|
916
|
+
.g-ui-button-color-danger.g-ui-button-variant-outline:hover { background: var(--g-ui-danger-subtle); }
|
|
917
|
+
.g-ui-button-color-danger.g-ui-button-variant-subtle:hover { background: var(--g-ui-bg-muted); }
|
|
918
|
+
.g-ui-button-color-danger.g-ui-button-variant-transparent:hover { background: var(--g-ui-bg-muted); }
|
|
919
|
+
|
|
920
|
+
.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; }
|
|
921
|
+
.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); }
|
|
922
|
+
.g-ui-button-color-info.g-ui-button-variant-outline { background: transparent; color: var(--g-ui-info); border: 1px solid var(--g-ui-info); }
|
|
923
|
+
.g-ui-button-color-info.g-ui-button-variant-subtle { background: transparent; color: var(--g-ui-text); border: 1px solid var(--g-ui-border); }
|
|
924
|
+
.g-ui-button-color-info.g-ui-button-variant-transparent { background: transparent; color: var(--g-ui-text); border: 1px solid transparent; }
|
|
925
|
+
.g-ui-button-color-info.g-ui-button-variant-filled:hover { background: var(--g-ui-info-hover); }
|
|
926
|
+
.g-ui-button-color-info.g-ui-button-variant-light:hover { background: var(--g-ui-info-muted); }
|
|
927
|
+
.g-ui-button-color-info.g-ui-button-variant-outline:hover { background: var(--g-ui-info-subtle); }
|
|
928
|
+
.g-ui-button-color-info.g-ui-button-variant-subtle:hover { background: var(--g-ui-bg-muted); }
|
|
929
|
+
.g-ui-button-color-info.g-ui-button-variant-transparent:hover { background: var(--g-ui-bg-muted); }
|
|
930
|
+
|
|
931
|
+
|
|
839
932
|
.g-ui-button-size-xs { font-size: 12px; height: 30px; padding: 0 var(--g-ui-space-8); }
|
|
840
933
|
.g-ui-button-size-sm { font-size: 13px; height: 36px; padding: 0 var(--g-ui-space-10); }
|
|
841
934
|
.g-ui-button-size-md { font-size: 14px; height: 42px; padding: 0 var(--g-ui-space-10); }
|
|
@@ -921,15 +1014,15 @@ body {
|
|
|
921
1014
|
.g-ui-modal-overlay {
|
|
922
1015
|
position: fixed;
|
|
923
1016
|
inset: 0;
|
|
924
|
-
background:
|
|
1017
|
+
background: var(--g-ui-overlay-normal);
|
|
925
1018
|
display: flex;
|
|
926
1019
|
align-items: center;
|
|
927
1020
|
justify-content: center;
|
|
928
1021
|
z-index: 999;
|
|
929
1022
|
}
|
|
930
|
-
.g-ui-modal-overlay-light { background:
|
|
931
|
-
.g-ui-modal-overlay-normal { background:
|
|
932
|
-
.g-ui-modal-overlay-dark { background:
|
|
1023
|
+
.g-ui-modal-overlay-light { background: var(--g-ui-overlay-light); }
|
|
1024
|
+
.g-ui-modal-overlay-normal { background: var(--g-ui-overlay-normal); }
|
|
1025
|
+
.g-ui-modal-overlay-dark { background: var(--g-ui-overlay-dark); }
|
|
933
1026
|
.g-ui-modal-centered { align-items: center; justify-content: center; }
|
|
934
1027
|
.g-ui-modal-top { align-items: flex-start; justify-content: center; padding-top: var(--g-ui-space-40); }
|
|
935
1028
|
.g-ui-modal-position-top-left { align-items: flex-start; justify-content: flex-start; padding: var(--g-ui-space-40) var(--g-ui-space-20); }
|
|
@@ -1078,7 +1171,7 @@ body {
|
|
|
1078
1171
|
width: var(--g-ui-switch-thumb, 14px);
|
|
1079
1172
|
height: var(--g-ui-switch-thumb, 14px);
|
|
1080
1173
|
border-radius: 50%;
|
|
1081
|
-
background:
|
|
1174
|
+
background: var(--g-ui-white);
|
|
1082
1175
|
top: var(--g-ui-switch-offset, 2px);
|
|
1083
1176
|
left: var(--g-ui-switch-offset, 2px);
|
|
1084
1177
|
transition: transform .15s ease;
|
|
@@ -1346,9 +1439,9 @@ body {
|
|
|
1346
1439
|
inset: 0;
|
|
1347
1440
|
z-index: 998;
|
|
1348
1441
|
}
|
|
1349
|
-
.g-ui-drawer-overlay-normal { background:
|
|
1350
|
-
.g-ui-drawer-overlay-light { background:
|
|
1351
|
-
.g-ui-drawer-overlay-dark { background:
|
|
1442
|
+
.g-ui-drawer-overlay-normal { background: var(--g-ui-overlay-normal); }
|
|
1443
|
+
.g-ui-drawer-overlay-light { background: var(--g-ui-overlay-light); }
|
|
1444
|
+
.g-ui-drawer-overlay-dark { background: var(--g-ui-overlay-dark); }
|
|
1352
1445
|
.g-ui-drawer {
|
|
1353
1446
|
position: fixed;
|
|
1354
1447
|
top: 0;
|
|
@@ -1884,26 +1977,78 @@ body {
|
|
|
1884
1977
|
background: transparent;
|
|
1885
1978
|
color: var(--g-ui-text);
|
|
1886
1979
|
}
|
|
1887
|
-
.g-ui-chip-active {
|
|
1888
|
-
background: var(--g-ui-primary);
|
|
1889
|
-
border-color: transparent;
|
|
1890
|
-
color: var(--g-ui-primary-fg);
|
|
1891
|
-
}
|
|
1892
1980
|
.g-ui-chip-size-xs { font-size: 12px; height: 20px; padding: 0 var(--g-ui-space-6); }
|
|
1893
1981
|
.g-ui-chip-size-sm { font-size: 13px; height: 21px; padding: 0 var(--g-ui-space-5); }
|
|
1894
1982
|
.g-ui-chip-size-md { font-size: 14px; height: 22px; padding: 0 var(--g-ui-space-6); }
|
|
1895
1983
|
.g-ui-chip-size-lg { font-size: 15px; height: 23px; padding: 0 var(--g-ui-space-7); }
|
|
1896
1984
|
.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
|
-
}
|
|
1985
|
+
|
|
1986
|
+
.g-ui-chip-color-primary.g-ui-chip-variant-filled { background: var(--g-ui-bg-muted); color: var(--g-ui-text); border-color: transparent; }
|
|
1987
|
+
.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); }
|
|
1988
|
+
.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); }
|
|
1989
|
+
.g-ui-chip-color-primary.g-ui-chip-variant-filled:hover { background: var(--g-ui-bg-muted-hover, var(--g-ui-bg-muted)); }
|
|
1990
|
+
.g-ui-chip-color-primary.g-ui-chip-variant-light:hover { background: var(--g-ui-primary-muted); }
|
|
1991
|
+
.g-ui-chip-color-primary.g-ui-chip-variant-outline:hover { border-color: var(--g-ui-primary); color: var(--g-ui-primary); }
|
|
1992
|
+
.g-ui-chip-color-primary.g-ui-chip-variant-filled.g-ui-chip-active,
|
|
1993
|
+
.g-ui-chip-color-primary.g-ui-chip-variant-light.g-ui-chip-active,
|
|
1994
|
+
.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; }
|
|
1995
|
+
|
|
1996
|
+
.g-ui-chip-color-success.g-ui-chip-variant-filled { background: var(--g-ui-bg-muted); color: var(--g-ui-text); border-color: transparent; }
|
|
1997
|
+
.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); }
|
|
1998
|
+
.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); }
|
|
1999
|
+
.g-ui-chip-color-success.g-ui-chip-variant-filled:hover { background: var(--g-ui-bg-muted-hover, var(--g-ui-bg-muted)); }
|
|
2000
|
+
.g-ui-chip-color-success.g-ui-chip-variant-light:hover { background: var(--g-ui-success-muted); }
|
|
2001
|
+
.g-ui-chip-color-success.g-ui-chip-variant-outline:hover { border-color: var(--g-ui-success); color: var(--g-ui-success); }
|
|
2002
|
+
.g-ui-chip-color-success.g-ui-chip-variant-filled.g-ui-chip-active,
|
|
2003
|
+
.g-ui-chip-color-success.g-ui-chip-variant-light.g-ui-chip-active,
|
|
2004
|
+
.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; }
|
|
2005
|
+
|
|
2006
|
+
.g-ui-chip-color-warning.g-ui-chip-variant-filled { background: var(--g-ui-bg-muted); color: var(--g-ui-text); border-color: transparent; }
|
|
2007
|
+
.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); }
|
|
2008
|
+
.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); }
|
|
2009
|
+
.g-ui-chip-color-warning.g-ui-chip-variant-filled:hover { background: var(--g-ui-bg-muted-hover, var(--g-ui-bg-muted)); }
|
|
2010
|
+
.g-ui-chip-color-warning.g-ui-chip-variant-light:hover { background: var(--g-ui-warning-muted); }
|
|
2011
|
+
.g-ui-chip-color-warning.g-ui-chip-variant-outline:hover { border-color: var(--g-ui-warning); color: var(--g-ui-warning); }
|
|
2012
|
+
.g-ui-chip-color-warning.g-ui-chip-variant-filled.g-ui-chip-active,
|
|
2013
|
+
.g-ui-chip-color-warning.g-ui-chip-variant-light.g-ui-chip-active,
|
|
2014
|
+
.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; }
|
|
2015
|
+
|
|
2016
|
+
.g-ui-chip-color-danger.g-ui-chip-variant-filled { background: var(--g-ui-bg-muted); color: var(--g-ui-text); border-color: transparent; }
|
|
2017
|
+
.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); }
|
|
2018
|
+
.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); }
|
|
2019
|
+
.g-ui-chip-color-danger.g-ui-chip-variant-filled:hover { background: var(--g-ui-bg-muted-hover, var(--g-ui-bg-muted)); }
|
|
2020
|
+
.g-ui-chip-color-danger.g-ui-chip-variant-light:hover { background: var(--g-ui-danger-muted); }
|
|
2021
|
+
.g-ui-chip-color-danger.g-ui-chip-variant-outline:hover { border-color: var(--g-ui-danger); color: var(--g-ui-danger); }
|
|
2022
|
+
.g-ui-chip-color-danger.g-ui-chip-variant-filled.g-ui-chip-active,
|
|
2023
|
+
.g-ui-chip-color-danger.g-ui-chip-variant-light.g-ui-chip-active,
|
|
2024
|
+
.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; }
|
|
2025
|
+
|
|
2026
|
+
.g-ui-chip-color-info.g-ui-chip-variant-filled { background: var(--g-ui-bg-muted); color: var(--g-ui-text); border-color: transparent; }
|
|
2027
|
+
.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); }
|
|
2028
|
+
.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); }
|
|
2029
|
+
.g-ui-chip-color-info.g-ui-chip-variant-filled:hover { background: var(--g-ui-bg-muted-hover, var(--g-ui-bg-muted)); }
|
|
2030
|
+
.g-ui-chip-color-info.g-ui-chip-variant-light:hover { background: var(--g-ui-info-muted); }
|
|
2031
|
+
.g-ui-chip-color-info.g-ui-chip-variant-outline:hover { border-color: var(--g-ui-info); color: var(--g-ui-info); }
|
|
2032
|
+
.g-ui-chip-color-info.g-ui-chip-variant-filled.g-ui-chip-active,
|
|
2033
|
+
.g-ui-chip-color-info.g-ui-chip-variant-light.g-ui-chip-active,
|
|
2034
|
+
.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; }
|
|
2035
|
+
|
|
2036
|
+
|
|
2037
|
+
|
|
2038
|
+
|
|
2039
|
+
|
|
2040
|
+
|
|
2041
|
+
|
|
2042
|
+
|
|
2043
|
+
|
|
2044
|
+
|
|
2045
|
+
|
|
2046
|
+
|
|
2047
|
+
|
|
2048
|
+
|
|
2049
|
+
|
|
2050
|
+
|
|
2051
|
+
|
|
1907
2052
|
|
|
1908
2053
|
.g-ui-segmented {
|
|
1909
2054
|
display: inline-flex;
|
|
@@ -3024,7 +3169,7 @@ body {
|
|
|
3024
3169
|
.g-ui-loading-overlay {
|
|
3025
3170
|
position: absolute;
|
|
3026
3171
|
inset: 0;
|
|
3027
|
-
background:
|
|
3172
|
+
background: var(--g-ui-overlay-normal);
|
|
3028
3173
|
display: flex;
|
|
3029
3174
|
align-items: center;
|
|
3030
3175
|
justify-content: center;
|
|
@@ -3261,6 +3406,130 @@ body {
|
|
|
3261
3406
|
.g-ui-action-icon-outline:hover { background: var(--g-ui-primary-subtle); }
|
|
3262
3407
|
.g-ui-action-icon-subtle:hover { background: var(--g-ui-bg-muted); }
|
|
3263
3408
|
|
|
3409
|
+
|
|
3410
|
+
|
|
3411
|
+
.g-ui-action-icon-color-primary.g-ui-action-icon-filled {
|
|
3412
|
+
background: var(--g-ui-primary);
|
|
3413
|
+
border-color: transparent;
|
|
3414
|
+
color: var(--g-ui-primary-fg);
|
|
3415
|
+
}
|
|
3416
|
+
.g-ui-action-icon-color-primary.g-ui-action-icon-subtle {
|
|
3417
|
+
background: transparent;
|
|
3418
|
+
border-color: var(--g-ui-border);
|
|
3419
|
+
}
|
|
3420
|
+
.g-ui-action-icon-color-primary.g-ui-action-icon-light {
|
|
3421
|
+
background: var(--g-ui-primary-subtle);
|
|
3422
|
+
border-color: var(--g-ui-primary-muted);
|
|
3423
|
+
color: var(--g-ui-primary);
|
|
3424
|
+
}
|
|
3425
|
+
.g-ui-action-icon-color-primary.g-ui-action-icon-outline {
|
|
3426
|
+
background: transparent;
|
|
3427
|
+
border-color: var(--g-ui-primary);
|
|
3428
|
+
color: var(--g-ui-primary);
|
|
3429
|
+
}
|
|
3430
|
+
.g-ui-action-icon-color-primary.g-ui-action-icon-filled:hover { background: var(--g-ui-primary-hover); }
|
|
3431
|
+
.g-ui-action-icon-color-primary.g-ui-action-icon-light:hover { background: var(--g-ui-primary-muted); }
|
|
3432
|
+
.g-ui-action-icon-color-primary.g-ui-action-icon-outline:hover { background: var(--g-ui-primary-subtle); }
|
|
3433
|
+
.g-ui-action-icon-color-primary.g-ui-action-icon-subtle:hover { background: var(--g-ui-bg-muted); }
|
|
3434
|
+
|
|
3435
|
+
|
|
3436
|
+
.g-ui-action-icon-color-success.g-ui-action-icon-filled {
|
|
3437
|
+
background: var(--g-ui-success);
|
|
3438
|
+
border-color: transparent;
|
|
3439
|
+
color: var(--g-ui-success-fg);
|
|
3440
|
+
}
|
|
3441
|
+
.g-ui-action-icon-color-success.g-ui-action-icon-subtle {
|
|
3442
|
+
background: transparent;
|
|
3443
|
+
border-color: var(--g-ui-border);
|
|
3444
|
+
}
|
|
3445
|
+
.g-ui-action-icon-color-success.g-ui-action-icon-light {
|
|
3446
|
+
background: var(--g-ui-success-subtle);
|
|
3447
|
+
border-color: var(--g-ui-success-muted);
|
|
3448
|
+
color: var(--g-ui-success);
|
|
3449
|
+
}
|
|
3450
|
+
.g-ui-action-icon-color-success.g-ui-action-icon-outline {
|
|
3451
|
+
background: transparent;
|
|
3452
|
+
border-color: var(--g-ui-success);
|
|
3453
|
+
color: var(--g-ui-success);
|
|
3454
|
+
}
|
|
3455
|
+
.g-ui-action-icon-color-success.g-ui-action-icon-filled:hover { background: var(--g-ui-success-hover); }
|
|
3456
|
+
.g-ui-action-icon-color-success.g-ui-action-icon-light:hover { background: var(--g-ui-success-muted); }
|
|
3457
|
+
.g-ui-action-icon-color-success.g-ui-action-icon-outline:hover { background: var(--g-ui-success-subtle); }
|
|
3458
|
+
.g-ui-action-icon-color-success.g-ui-action-icon-subtle:hover { background: var(--g-ui-bg-muted); }
|
|
3459
|
+
|
|
3460
|
+
.g-ui-action-icon-color-danger.g-ui-action-icon-filled {
|
|
3461
|
+
background: var(--g-ui-danger);
|
|
3462
|
+
border-color: transparent;
|
|
3463
|
+
color: var(--g-ui-danger-fg);
|
|
3464
|
+
}
|
|
3465
|
+
.g-ui-action-icon-color-danger.g-ui-action-icon-subtle {
|
|
3466
|
+
background: transparent;
|
|
3467
|
+
border-color: var(--g-ui-border);
|
|
3468
|
+
}
|
|
3469
|
+
.g-ui-action-icon-color-danger.g-ui-action-icon-light {
|
|
3470
|
+
background: var(--g-ui-danger-subtle);
|
|
3471
|
+
border-color: var(--g-ui-danger-muted);
|
|
3472
|
+
color: var(--g-ui-danger);
|
|
3473
|
+
}
|
|
3474
|
+
.g-ui-action-icon-color-danger.g-ui-action-icon-outline {
|
|
3475
|
+
background: transparent;
|
|
3476
|
+
border-color: var(--g-ui-danger);
|
|
3477
|
+
color: var(--g-ui-danger);
|
|
3478
|
+
}
|
|
3479
|
+
.g-ui-action-icon-color-danger.g-ui-action-icon-filled:hover { background: var(--g-ui-danger-hover); }
|
|
3480
|
+
.g-ui-action-icon-color-danger.g-ui-action-icon-light:hover { background: var(--g-ui-danger-muted); }
|
|
3481
|
+
.g-ui-action-icon-color-danger.g-ui-action-icon-outline:hover { background: var(--g-ui-danger-subtle); }
|
|
3482
|
+
.g-ui-action-icon-color-danger.g-ui-action-icon-subtle:hover { background: var(--g-ui-bg-muted); }
|
|
3483
|
+
|
|
3484
|
+
.g-ui-action-icon-color-warning.g-ui-action-icon-filled {
|
|
3485
|
+
background: var(--g-ui-warning);
|
|
3486
|
+
border-color: transparent;
|
|
3487
|
+
color: var(--g-ui-warning-fg);
|
|
3488
|
+
}
|
|
3489
|
+
.g-ui-action-icon-color-warning.g-ui-action-icon-subtle {
|
|
3490
|
+
background: transparent;
|
|
3491
|
+
border-color: var(--g-ui-border);
|
|
3492
|
+
}
|
|
3493
|
+
.g-ui-action-icon-color-warning.g-ui-action-icon-light {
|
|
3494
|
+
background: var(--g-ui-warning-subtle);
|
|
3495
|
+
border-color: var(--g-ui-warning-muted);
|
|
3496
|
+
color: var(--g-ui-warning);
|
|
3497
|
+
}
|
|
3498
|
+
.g-ui-action-icon-color-warning.g-ui-action-icon-outline {
|
|
3499
|
+
background: transparent;
|
|
3500
|
+
border-color: var(--g-ui-warning);
|
|
3501
|
+
color: var(--g-ui-warning);
|
|
3502
|
+
}
|
|
3503
|
+
.g-ui-action-icon-color-warning.g-ui-action-icon-filled:hover { background: var(--g-ui-warning-hover); }
|
|
3504
|
+
.g-ui-action-icon-color-warning.g-ui-action-icon-light:hover { background: var(--g-ui-warning-muted); }
|
|
3505
|
+
.g-ui-action-icon-color-warning.g-ui-action-icon-outline:hover { background: var(--g-ui-warning-subtle); }
|
|
3506
|
+
.g-ui-action-icon-color-warning.g-ui-action-icon-subtle:hover { background: var(--g-ui-bg-muted); }
|
|
3507
|
+
|
|
3508
|
+
.g-ui-action-icon-color-info.g-ui-action-icon-filled {
|
|
3509
|
+
background: var(--g-ui-info);
|
|
3510
|
+
border-color: transparent;
|
|
3511
|
+
color: var(--g-ui-info-fg);
|
|
3512
|
+
}
|
|
3513
|
+
.g-ui-action-icon-color-info.g-ui-action-icon-subtle {
|
|
3514
|
+
background: transparent;
|
|
3515
|
+
border-color: var(--g-ui-border);
|
|
3516
|
+
}
|
|
3517
|
+
.g-ui-action-icon-color-info.g-ui-action-icon-light {
|
|
3518
|
+
background: var(--g-ui-info-subtle);
|
|
3519
|
+
border-color: var(--g-ui-info-muted);
|
|
3520
|
+
color: var(--g-ui-info);
|
|
3521
|
+
}
|
|
3522
|
+
.g-ui-action-icon-color-info.g-ui-action-icon-outline {
|
|
3523
|
+
background: transparent;
|
|
3524
|
+
border-color: var(--g-ui-info);
|
|
3525
|
+
color: var(--g-ui-info);
|
|
3526
|
+
}
|
|
3527
|
+
.g-ui-action-icon-color-info.g-ui-action-icon-filled:hover { background: var(--g-ui-info-hover); }
|
|
3528
|
+
.g-ui-action-icon-color-info.g-ui-action-icon-light:hover { background: var(--g-ui-info-muted); }
|
|
3529
|
+
.g-ui-action-icon-color-info.g-ui-action-icon-outline:hover { background: var(--g-ui-info-subtle); }
|
|
3530
|
+
.g-ui-action-icon-color-info.g-ui-action-icon-subtle:hover { background: var(--g-ui-bg-muted); }
|
|
3531
|
+
|
|
3532
|
+
|
|
3264
3533
|
.g-ui-popover {
|
|
3265
3534
|
position: relative;
|
|
3266
3535
|
display: inline-flex;
|
|
@@ -3420,7 +3689,7 @@ body {
|
|
|
3420
3689
|
position: fixed;
|
|
3421
3690
|
inset: 0;
|
|
3422
3691
|
z-index: 998;
|
|
3423
|
-
background:
|
|
3692
|
+
background: var(--g-ui-overlay-normal);
|
|
3424
3693
|
opacity: 0;
|
|
3425
3694
|
pointer-events: none;
|
|
3426
3695
|
transition: opacity .22s ease, backdrop-filter .22s ease;
|
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
|
@@ -89,5 +89,5 @@ export { GridTable } from "./components/GridTable.js";
|
|
|
89
89
|
export { BottomBar } from "./components/BottomBar.js";
|
|
90
90
|
export { EventCalendar } from "./components/EventCalendar.js";
|
|
91
91
|
export { useDisclosure } from "./hooks/useDisclosure.js";
|
|
92
|
-
export { setThemeVars, setThemeMode } from "./theme/theme.js";
|
|
92
|
+
export { setThemeVars, setThemeMode, getThemeMode } from "./theme/theme.js";
|
|
93
93
|
export { cx, classVar, classFlag, classMap, splitPropsChildren } from "./utils.js";
|
package/types/theme/theme.d.ts
CHANGED