@owodesign/owoui 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/README.md +32 -5
- package/dist/index.d.ts +73 -21
- package/dist/index.min.js +1 -1
- package/dist/storybook/catalog.js +32 -8
- package/dist/storybook/catalog.json +32 -8
- package/dist/storybook/index.d.ts +1 -0
- package/dist/storybook/index.min.js +9 -8
- package/dist/storybook-static/app.css +4171 -0
- package/dist/storybook-static/assets/main.css +2 -0
- package/dist/storybook-static/assets/main.js +235 -0
- package/dist/storybook-static/index.html +24 -0
- package/dist/tokens.d.ts +4 -2
- package/dist/tokens.min.js +1 -1
- package/package.json +32 -15
- package/src/preset-default.css +27 -0
- package/src/preset-elevated.css +27 -0
- package/src/preset-flat.css +27 -0
- package/src/preset-glass.css +27 -0
- package/src/style.css +3 -1
- package/src/styles/tokens.css +131 -83
- package/src/styles/ui/collapsible.css +13 -0
- package/src/styles/ui/input.css +2 -2
- package/src/styles/ui/select.css +4 -4
- package/src/styles/ui/status-notice.css +8 -0
- package/src/styles/ui/tabs.css +33 -0
- package/src/styles/ui/textarea.css +8 -0
- package/src/styles/ui/tooltip.css +7 -2
- package/src/theme-dark.css +87 -0
- package/src/theme-light.css +102 -0
- package/src/dark.css +0 -70
- package/src/elevated.css +0 -20
- package/src/flat.css +0 -1
- package/src/glass.css +0 -17
- package/src/styles/ui/empty-state.css +0 -34
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
|
+
<title>owoui Storybook</title>
|
|
7
|
+
<meta name="color-scheme" content="light dark" />
|
|
8
|
+
<link rel="stylesheet" href="./app.css" />
|
|
9
|
+
<script>
|
|
10
|
+
(function(){
|
|
11
|
+
var d=document.documentElement,t=localStorage.getItem('owoui-storybook-theme'),
|
|
12
|
+
p=localStorage.getItem('owoui-storybook-preset');
|
|
13
|
+
t=t==='dark'?'dark':'light';
|
|
14
|
+
p=['default','flat','elevated','glass'].indexOf(p)>=0?p:'default';
|
|
15
|
+
d.dataset.theme=t;d.dataset.preset=p;
|
|
16
|
+
d.classList.add('owoui-theme-'+t,'owoui-preset-'+p);
|
|
17
|
+
})();
|
|
18
|
+
</script>
|
|
19
|
+
</head>
|
|
20
|
+
<body>
|
|
21
|
+
<div id="root"></div>
|
|
22
|
+
<script type="module" src="./assets/main.js"></script>
|
|
23
|
+
</body>
|
|
24
|
+
</html>
|
package/dist/tokens.d.ts
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
declare const semanticTokenKeys: readonly ["--ui-surface-bg", "--ui-surface-bg-subtle", "--ui-surface-bg-raised", "--ui-surface-bg-inset", "--ui-surface-border", "--ui-surface-border-muted", "--ui-surface-border-strong", "--ui-surface-shadow", "--ui-surface-shadow-strong", "--ui-surface-blur", "--ui-canvas-bg", "--ui-canvas-bg-subtle", "--ui-surface-container", "--ui-surface-container-high", "--ui-surface-container-highest", "--ui-text-primary", "--ui-text-secondary", "--ui-text-muted", "--ui-text-on-accent", "--ui-accent-bg", "--ui-accent-bg-hover", "--ui-accent-bg-muted", "--ui-accent-text", "--ui-accent-border", "--ui-success-bg", "--ui-success-border", "--ui-success-text", "--ui-warning-bg", "--ui-warning-border", "--ui-warning-text", "--ui-danger-bg", "--ui-danger-bg-emphasis", "--ui-danger-border", "--ui-danger-text", "--ui-info-bg", "--ui-info-border", "--ui-info-text", "--ui-control-radius-sm", "--ui-control-radius-md", "--ui-control-radius-lg", "--ui-control-radius-xl", "--ui-control-radius-2xl", "--ui-control-border-width", "--ui-control-focus-ring", "--ui-control-focus-ring-offset", "--ui-font-heading", "--ui-motion-duration-fast", "--ui-motion-duration-default", "--ui-motion-ease-standard", "--ui-density-compact", "--ui-density-default", "--ui-density-comfortable"];
|
|
2
2
|
type SemanticTokenKey = (typeof semanticTokenKeys)[number];
|
|
3
|
+
declare const themeNames: readonly ["light", "dark"];
|
|
4
|
+
type OwoUiThemeName = (typeof themeNames)[number];
|
|
3
5
|
declare const tokenGroups: readonly [{
|
|
4
6
|
readonly id: "surface";
|
|
5
7
|
readonly label: "Surface";
|
|
@@ -29,8 +31,8 @@ declare const tokenGroups: readonly [{
|
|
|
29
31
|
readonly label: "Motion & Density";
|
|
30
32
|
readonly tokens: readonly ["--ui-motion-duration-fast", "--ui-motion-duration-default", "--ui-motion-ease-standard", "--ui-density-compact", "--ui-density-default", "--ui-density-comfortable"];
|
|
31
33
|
}];
|
|
32
|
-
declare const presetNames: readonly ["default", "
|
|
34
|
+
declare const presetNames: readonly ["default", "flat", "elevated", "glass"];
|
|
33
35
|
type OwoUiPresetName = (typeof presetNames)[number];
|
|
34
36
|
declare const tokenDescriptions: Record<SemanticTokenKey, string>;
|
|
35
37
|
|
|
36
|
-
export { type OwoUiPresetName, type SemanticTokenKey, presetNames, semanticTokenKeys, tokenDescriptions, tokenGroups };
|
|
38
|
+
export { type OwoUiPresetName, type OwoUiThemeName, type SemanticTokenKey, presetNames, semanticTokenKeys, themeNames, tokenDescriptions, tokenGroups };
|
package/dist/tokens.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var e=["--ui-surface-bg","--ui-surface-bg-subtle","--ui-surface-bg-raised","--ui-surface-bg-inset","--ui-surface-border","--ui-surface-border-muted","--ui-surface-border-strong","--ui-surface-shadow","--ui-surface-shadow-strong","--ui-surface-blur","--ui-canvas-bg","--ui-canvas-bg-subtle","--ui-surface-container","--ui-surface-container-high","--ui-surface-container-highest","--ui-text-primary","--ui-text-secondary","--ui-text-muted","--ui-text-on-accent","--ui-accent-bg","--ui-accent-bg-hover","--ui-accent-bg-muted","--ui-accent-text","--ui-accent-border","--ui-success-bg","--ui-success-border","--ui-success-text","--ui-warning-bg","--ui-warning-border","--ui-warning-text","--ui-danger-bg","--ui-danger-bg-emphasis","--ui-danger-border","--ui-danger-text","--ui-info-bg","--ui-info-border","--ui-info-text","--ui-control-radius-sm","--ui-control-radius-md","--ui-control-radius-lg","--ui-control-radius-xl","--ui-control-radius-2xl","--ui-control-border-width","--ui-control-focus-ring","--ui-control-focus-ring-offset","--ui-font-heading","--ui-motion-duration-fast","--ui-motion-duration-default","--ui-motion-ease-standard","--ui-density-compact","--ui-density-default","--ui-density-comfortable"],r=[{id:"surface",label:"Surface",tokens:["--ui-surface-bg","--ui-surface-bg-subtle","--ui-surface-bg-raised","--ui-surface-bg-inset","--ui-surface-border","--ui-surface-border-muted","--ui-surface-border-strong","--ui-surface-shadow","--ui-surface-shadow-strong","--ui-surface-blur","--ui-canvas-bg","--ui-canvas-bg-subtle","--ui-surface-container","--ui-surface-container-high","--ui-surface-container-highest"]},{id:"text",label:"Text",tokens:["--ui-text-primary","--ui-text-secondary","--ui-text-muted","--ui-text-on-accent"]},{id:"accent",label:"Accent",tokens:["--ui-accent-bg","--ui-accent-bg-hover","--ui-accent-bg-muted","--ui-accent-text","--ui-accent-border"]},{id:"feedback",label:"Feedback",tokens:["--ui-success-bg","--ui-success-border","--ui-success-text","--ui-warning-bg","--ui-warning-border","--ui-warning-text","--ui-danger-bg","--ui-danger-bg-emphasis","--ui-danger-border","--ui-danger-text","--ui-info-bg","--ui-info-border","--ui-info-text"]},{id:"control",label:"Control",tokens:["--ui-control-radius-sm","--ui-control-radius-md","--ui-control-radius-lg","--ui-control-radius-xl","--ui-control-radius-2xl","--ui-control-border-width","--ui-control-focus-ring","--ui-control-focus-ring-offset"]},{id:"typography",label:"Typography",tokens:["--ui-font-heading"]},{id:"motion-density",label:"Motion & Density",tokens:["--ui-motion-duration-fast","--ui-motion-duration-default","--ui-motion-ease-standard","--ui-density-compact","--ui-density-default","--ui-density-comfortable"]}],o=["default","
|
|
1
|
+
var e=["--ui-surface-bg","--ui-surface-bg-subtle","--ui-surface-bg-raised","--ui-surface-bg-inset","--ui-surface-border","--ui-surface-border-muted","--ui-surface-border-strong","--ui-surface-shadow","--ui-surface-shadow-strong","--ui-surface-blur","--ui-canvas-bg","--ui-canvas-bg-subtle","--ui-surface-container","--ui-surface-container-high","--ui-surface-container-highest","--ui-text-primary","--ui-text-secondary","--ui-text-muted","--ui-text-on-accent","--ui-accent-bg","--ui-accent-bg-hover","--ui-accent-bg-muted","--ui-accent-text","--ui-accent-border","--ui-success-bg","--ui-success-border","--ui-success-text","--ui-warning-bg","--ui-warning-border","--ui-warning-text","--ui-danger-bg","--ui-danger-bg-emphasis","--ui-danger-border","--ui-danger-text","--ui-info-bg","--ui-info-border","--ui-info-text","--ui-control-radius-sm","--ui-control-radius-md","--ui-control-radius-lg","--ui-control-radius-xl","--ui-control-radius-2xl","--ui-control-border-width","--ui-control-focus-ring","--ui-control-focus-ring-offset","--ui-font-heading","--ui-motion-duration-fast","--ui-motion-duration-default","--ui-motion-ease-standard","--ui-density-compact","--ui-density-default","--ui-density-comfortable"],r=["light","dark"],t=[{id:"surface",label:"Surface",tokens:["--ui-surface-bg","--ui-surface-bg-subtle","--ui-surface-bg-raised","--ui-surface-bg-inset","--ui-surface-border","--ui-surface-border-muted","--ui-surface-border-strong","--ui-surface-shadow","--ui-surface-shadow-strong","--ui-surface-blur","--ui-canvas-bg","--ui-canvas-bg-subtle","--ui-surface-container","--ui-surface-container-high","--ui-surface-container-highest"]},{id:"text",label:"Text",tokens:["--ui-text-primary","--ui-text-secondary","--ui-text-muted","--ui-text-on-accent"]},{id:"accent",label:"Accent",tokens:["--ui-accent-bg","--ui-accent-bg-hover","--ui-accent-bg-muted","--ui-accent-text","--ui-accent-border"]},{id:"feedback",label:"Feedback",tokens:["--ui-success-bg","--ui-success-border","--ui-success-text","--ui-warning-bg","--ui-warning-border","--ui-warning-text","--ui-danger-bg","--ui-danger-bg-emphasis","--ui-danger-border","--ui-danger-text","--ui-info-bg","--ui-info-border","--ui-info-text"]},{id:"control",label:"Control",tokens:["--ui-control-radius-sm","--ui-control-radius-md","--ui-control-radius-lg","--ui-control-radius-xl","--ui-control-radius-2xl","--ui-control-border-width","--ui-control-focus-ring","--ui-control-focus-ring-offset"]},{id:"typography",label:"Typography",tokens:["--ui-font-heading"]},{id:"motion-density",label:"Motion & Density",tokens:["--ui-motion-duration-fast","--ui-motion-duration-default","--ui-motion-ease-standard","--ui-density-compact","--ui-density-default","--ui-density-comfortable"]}],o=["default","flat","elevated","glass"],a={"--ui-surface-bg":"Default component surface background.","--ui-surface-bg-subtle":"Lower-emphasis surface background.","--ui-surface-bg-raised":"Raised surface background for floating or elevated panels.","--ui-surface-bg-inset":"Inset surface background for inputs and compact controls.","--ui-surface-border":"Default component border color.","--ui-surface-border-muted":"Lowest-emphasis border for subtle separators and dividers.","--ui-surface-border-strong":"Higher-emphasis border or focus-adjacent border color.","--ui-surface-shadow":"Default surface shadow for raised UI.","--ui-surface-shadow-strong":"Higher-emphasis shadow for popovers and overlays.","--ui-surface-blur":"Backdrop blur amount for translucent surface styles.","--ui-canvas-bg":"Page-level canvas background, distinct from component surfaces.","--ui-canvas-bg-subtle":"Subtle canvas background for secondary page regions.","--ui-surface-container":"Container background for sidebars, panels, and layout regions.","--ui-surface-container-high":"Higher-emphasis container background for nested panels.","--ui-surface-container-highest":"Highest-emphasis container background for deeply nested panels.","--ui-text-primary":"Primary readable foreground text color.","--ui-text-secondary":"Secondary readable foreground text color.","--ui-text-muted":"Muted or tertiary text color.","--ui-text-on-accent":"Readable text color when placed on accent surfaces.","--ui-accent-bg":"Primary accent background color.","--ui-accent-bg-hover":"Primary accent hover color.","--ui-accent-bg-muted":"Muted accent background for hover, selected, and highlighted states.","--ui-accent-text":"Readable text color used on accent backgrounds.","--ui-accent-border":"Accent-tinted border for active indicators and emphasis separators.","--ui-success-bg":"Success background treatment.","--ui-success-border":"Success border treatment.","--ui-success-text":"Success foreground text color.","--ui-warning-bg":"Warning background treatment.","--ui-warning-border":"Warning border treatment.","--ui-warning-text":"Warning foreground text color.","--ui-danger-bg":"Danger background treatment.","--ui-danger-bg-emphasis":"Stronger danger background for hover, active, or destructive emphasis.","--ui-danger-border":"Danger border treatment.","--ui-danger-text":"Danger foreground text color.","--ui-info-bg":"Info background treatment.","--ui-info-border":"Info border treatment.","--ui-info-text":"Info foreground text color.","--ui-control-radius-sm":"Small control radius.","--ui-control-radius-md":"Default control radius.","--ui-control-radius-lg":"Large control radius.","--ui-control-radius-xl":"Extra-large radius for drawers, dialogs, and large containers.","--ui-control-radius-2xl":"Double extra-large radius for sheets and full-page overlays.","--ui-control-border-width":"Default border width for controls.","--ui-control-focus-ring":"Focus ring color.","--ui-control-focus-ring-offset":"Focus ring offset base color.","--ui-font-heading":"Heading font family stack.","--ui-motion-duration-fast":"Fast motion duration.","--ui-motion-duration-default":"Default motion duration.","--ui-motion-ease-standard":"Default motion easing curve.","--ui-density-compact":"Compact density scale.","--ui-density-default":"Default density scale.","--ui-density-comfortable":"Comfortable density scale."};export{o as presetNames,e as semanticTokenKeys,r as themeNames,a as tokenDescriptions,t as tokenGroups};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@owodesign/owoui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"description": "Reusable React UI foundation components and theme presets.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.min.js",
|
|
@@ -38,37 +38,47 @@
|
|
|
38
38
|
},
|
|
39
39
|
"./storybook/catalog.json": "./dist/storybook/catalog.json",
|
|
40
40
|
"./style.css": "./src/style.css",
|
|
41
|
-
"./
|
|
42
|
-
"./
|
|
43
|
-
"./
|
|
44
|
-
"./
|
|
41
|
+
"./theme-light.css": "./src/theme-light.css",
|
|
42
|
+
"./theme-dark.css": "./src/theme-dark.css",
|
|
43
|
+
"./preset-default.css": "./src/preset-default.css",
|
|
44
|
+
"./preset-flat.css": "./src/preset-flat.css",
|
|
45
|
+
"./preset-elevated.css": "./src/preset-elevated.css",
|
|
46
|
+
"./preset-glass.css": "./src/preset-glass.css"
|
|
45
47
|
},
|
|
46
48
|
"files": [
|
|
47
49
|
"dist",
|
|
48
50
|
"src/style.css",
|
|
49
51
|
"src/tokens.css",
|
|
50
|
-
"src/
|
|
51
|
-
"src/
|
|
52
|
-
"src/
|
|
53
|
-
"src/
|
|
52
|
+
"src/theme-light.css",
|
|
53
|
+
"src/theme-dark.css",
|
|
54
|
+
"src/preset-default.css",
|
|
55
|
+
"src/preset-flat.css",
|
|
56
|
+
"src/preset-elevated.css",
|
|
57
|
+
"src/preset-glass.css",
|
|
54
58
|
"src/styles"
|
|
55
59
|
],
|
|
56
60
|
"sideEffects": [
|
|
57
61
|
"./src/style.css",
|
|
58
62
|
"./src/tokens.css",
|
|
59
|
-
"./src/
|
|
60
|
-
"./src/
|
|
61
|
-
"./src/
|
|
62
|
-
"./src/
|
|
63
|
+
"./src/theme-light.css",
|
|
64
|
+
"./src/theme-dark.css",
|
|
65
|
+
"./src/preset-default.css",
|
|
66
|
+
"./src/preset-flat.css",
|
|
67
|
+
"./src/preset-elevated.css",
|
|
68
|
+
"./src/preset-glass.css",
|
|
63
69
|
"./src/styles/**/*.css",
|
|
64
70
|
"./src/storybook/**/*.ts",
|
|
65
71
|
"./src/storybook/**/*.tsx"
|
|
66
72
|
],
|
|
67
73
|
"scripts": {
|
|
68
|
-
"build": "npm run build:lib && npm run build:storybook && npm run build:storybook:catalog",
|
|
74
|
+
"build": "npm run build:lib && npm run build:storybook && npm run build:storybook:catalog && npm run build:storybook:static",
|
|
69
75
|
"build:lib": "tsup",
|
|
70
76
|
"build:storybook": "tsup --config tsup.storybook.config.ts",
|
|
71
77
|
"build:storybook:catalog": "node scripts/build-storybook-catalog.mjs",
|
|
78
|
+
"build:storybook:static:bundle": "tsup --config tsup.storybook.static.config.ts",
|
|
79
|
+
"build:storybook:static": "npm run build:storybook:static:bundle && node scripts/build-storybook-static.mjs",
|
|
80
|
+
"dev:storybook": "vite --config vite.config.ts",
|
|
81
|
+
"preview:storybook": "vite preview --config vite.config.ts",
|
|
72
82
|
"typecheck": "tsc --noEmit -p tsconfig.json",
|
|
73
83
|
"consumer:smoke": "node examples/consumer-smoke.mjs",
|
|
74
84
|
"pack:inspect": "npm_config_cache=/tmp/owoui-npm-cache npm pack --dry-run --json .",
|
|
@@ -78,6 +88,7 @@
|
|
|
78
88
|
"access": "public"
|
|
79
89
|
},
|
|
80
90
|
"dependencies": {
|
|
91
|
+
"@floating-ui/dom": "^1.7.6",
|
|
81
92
|
"clsx": "^2.1.1",
|
|
82
93
|
"lucide-react": "^0.576.0"
|
|
83
94
|
},
|
|
@@ -86,9 +97,15 @@
|
|
|
86
97
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
87
98
|
},
|
|
88
99
|
"devDependencies": {
|
|
100
|
+
"@tailwindcss/postcss": "^4.2.1",
|
|
89
101
|
"@types/react": "^19.0.0",
|
|
90
102
|
"@types/react-dom": "^19.0.0",
|
|
103
|
+
"@vitejs/plugin-react": "^6.0.1",
|
|
104
|
+
"postcss": "^8.5.6",
|
|
105
|
+
"react": "^19.2.4",
|
|
106
|
+
"react-dom": "^19.2.4",
|
|
91
107
|
"tailwindcss": "^4.2.1",
|
|
92
|
-
"tsup": "^8.5.1"
|
|
108
|
+
"tsup": "^8.5.1",
|
|
109
|
+
"vite": "^8.0.3"
|
|
93
110
|
}
|
|
94
111
|
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
@import "./tokens.css";
|
|
2
|
+
|
|
3
|
+
:root[data-preset="default"],
|
|
4
|
+
.owoui-preset-default {
|
|
5
|
+
--preset-surface-bg: var(--theme-surface-base);
|
|
6
|
+
--preset-surface-bg-subtle: var(--theme-surface-subtle);
|
|
7
|
+
--preset-surface-bg-raised: var(--theme-surface-raised);
|
|
8
|
+
--preset-surface-bg-inset: var(--theme-surface-inset);
|
|
9
|
+
--preset-surface-border: var(--theme-surface-border);
|
|
10
|
+
--preset-surface-border-muted: var(--theme-surface-border-muted);
|
|
11
|
+
--preset-surface-border-strong: var(--theme-surface-border-strong);
|
|
12
|
+
--preset-surface-shadow: var(--shadow-raised);
|
|
13
|
+
--preset-surface-shadow-strong: var(--shadow-popover);
|
|
14
|
+
--preset-surface-blur: 0px;
|
|
15
|
+
--preset-canvas-bg: var(--theme-surface-canvas);
|
|
16
|
+
--preset-canvas-bg-subtle: var(--theme-canvas-bg-subtle);
|
|
17
|
+
--preset-surface-container: var(--theme-surface-container);
|
|
18
|
+
--preset-surface-container-high: var(--theme-surface-container-high);
|
|
19
|
+
--preset-surface-container-highest: var(--theme-surface-container-highest);
|
|
20
|
+
--preset-control-radius-sm: 0.5rem;
|
|
21
|
+
--preset-control-radius-md: 0.75rem;
|
|
22
|
+
--preset-control-radius-lg: 1rem;
|
|
23
|
+
--preset-control-radius-xl: 1.5rem;
|
|
24
|
+
--preset-control-radius-2xl: 2rem;
|
|
25
|
+
--preset-control-border-width: 1px;
|
|
26
|
+
}
|
|
27
|
+
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
@import "./tokens.css";
|
|
2
|
+
|
|
3
|
+
:root[data-preset="elevated"],
|
|
4
|
+
.owoui-preset-elevated {
|
|
5
|
+
--preset-surface-bg: color-mix(in srgb, var(--theme-surface-base) 96%, var(--theme-surface-border-strong));
|
|
6
|
+
--preset-surface-bg-subtle: color-mix(in srgb, var(--theme-surface-subtle) 96%, var(--theme-surface-border-strong));
|
|
7
|
+
--preset-surface-bg-raised: color-mix(in srgb, var(--theme-surface-raised) 94%, var(--theme-surface-border-strong));
|
|
8
|
+
--preset-surface-bg-inset: var(--theme-surface-inset);
|
|
9
|
+
--preset-surface-border: color-mix(in srgb, var(--theme-surface-border) 88%, var(--theme-surface-border-strong));
|
|
10
|
+
--preset-surface-border-muted: var(--theme-surface-border-muted);
|
|
11
|
+
--preset-surface-border-strong: var(--theme-surface-border-strong);
|
|
12
|
+
--preset-surface-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
|
|
13
|
+
--preset-surface-shadow-strong: 0 28px 60px rgba(15, 23, 42, 0.18);
|
|
14
|
+
--preset-surface-blur: 0px;
|
|
15
|
+
--preset-canvas-bg: var(--theme-surface-canvas);
|
|
16
|
+
--preset-canvas-bg-subtle: var(--theme-canvas-bg-subtle);
|
|
17
|
+
--preset-surface-container: color-mix(in srgb, var(--theme-surface-container) 94%, var(--theme-surface-border-strong));
|
|
18
|
+
--preset-surface-container-high: color-mix(in srgb, var(--theme-surface-container-high) 94%, var(--theme-surface-border-strong));
|
|
19
|
+
--preset-surface-container-highest: color-mix(in srgb, var(--theme-surface-container-highest) 92%, var(--theme-surface-border-strong));
|
|
20
|
+
--preset-control-radius-sm: 0.625rem;
|
|
21
|
+
--preset-control-radius-md: 0.875rem;
|
|
22
|
+
--preset-control-radius-lg: 1.125rem;
|
|
23
|
+
--preset-control-radius-xl: 1.625rem;
|
|
24
|
+
--preset-control-radius-2xl: 2.125rem;
|
|
25
|
+
--preset-control-border-width: 1px;
|
|
26
|
+
}
|
|
27
|
+
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
@import "./tokens.css";
|
|
2
|
+
|
|
3
|
+
:root[data-preset="flat"],
|
|
4
|
+
.owoui-preset-flat {
|
|
5
|
+
--preset-surface-bg: var(--theme-surface-base);
|
|
6
|
+
--preset-surface-bg-subtle: var(--theme-surface-subtle);
|
|
7
|
+
--preset-surface-bg-raised: var(--theme-surface-base);
|
|
8
|
+
--preset-surface-bg-inset: var(--theme-surface-inset);
|
|
9
|
+
--preset-surface-border: var(--theme-surface-border);
|
|
10
|
+
--preset-surface-border-muted: var(--theme-surface-border-muted);
|
|
11
|
+
--preset-surface-border-strong: var(--theme-surface-border-strong);
|
|
12
|
+
--preset-surface-shadow: none;
|
|
13
|
+
--preset-surface-shadow-strong: none;
|
|
14
|
+
--preset-surface-blur: 0px;
|
|
15
|
+
--preset-canvas-bg: var(--theme-surface-canvas);
|
|
16
|
+
--preset-canvas-bg-subtle: var(--theme-canvas-bg-subtle);
|
|
17
|
+
--preset-surface-container: var(--theme-surface-container);
|
|
18
|
+
--preset-surface-container-high: var(--theme-surface-container);
|
|
19
|
+
--preset-surface-container-highest: var(--theme-surface-container-high);
|
|
20
|
+
--preset-control-radius-sm: 0.375rem;
|
|
21
|
+
--preset-control-radius-md: 0.625rem;
|
|
22
|
+
--preset-control-radius-lg: 0.875rem;
|
|
23
|
+
--preset-control-radius-xl: 1.25rem;
|
|
24
|
+
--preset-control-radius-2xl: 1.5rem;
|
|
25
|
+
--preset-control-border-width: 1px;
|
|
26
|
+
}
|
|
27
|
+
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
@import "./tokens.css";
|
|
2
|
+
|
|
3
|
+
:root[data-preset="glass"],
|
|
4
|
+
.owoui-preset-glass {
|
|
5
|
+
--preset-surface-bg: color-mix(in srgb, var(--theme-surface-base) 62%, transparent);
|
|
6
|
+
--preset-surface-bg-subtle: color-mix(in srgb, var(--theme-surface-subtle) 48%, transparent);
|
|
7
|
+
--preset-surface-bg-raised: color-mix(in srgb, var(--theme-surface-raised) 72%, transparent);
|
|
8
|
+
--preset-surface-bg-inset: color-mix(in srgb, var(--theme-surface-inset) 82%, transparent);
|
|
9
|
+
--preset-surface-border: color-mix(in srgb, var(--theme-surface-border-strong) 55%, transparent);
|
|
10
|
+
--preset-surface-border-muted: color-mix(in srgb, var(--theme-surface-border-muted) 60%, transparent);
|
|
11
|
+
--preset-surface-border-strong: color-mix(in srgb, var(--theme-surface-border-strong) 78%, transparent);
|
|
12
|
+
--preset-surface-shadow: 0 16px 44px rgba(15, 23, 42, 0.1);
|
|
13
|
+
--preset-surface-shadow-strong: 0 24px 64px rgba(15, 23, 42, 0.14);
|
|
14
|
+
--preset-surface-blur: 18px;
|
|
15
|
+
--preset-canvas-bg: var(--theme-surface-canvas);
|
|
16
|
+
--preset-canvas-bg-subtle: var(--theme-canvas-bg-subtle);
|
|
17
|
+
--preset-surface-container: color-mix(in srgb, var(--theme-surface-container) 70%, transparent);
|
|
18
|
+
--preset-surface-container-high: color-mix(in srgb, var(--theme-surface-container-high) 74%, transparent);
|
|
19
|
+
--preset-surface-container-highest: color-mix(in srgb, var(--theme-surface-container-highest) 78%, transparent);
|
|
20
|
+
--preset-control-radius-sm: 0.75rem;
|
|
21
|
+
--preset-control-radius-md: 1rem;
|
|
22
|
+
--preset-control-radius-lg: 1.25rem;
|
|
23
|
+
--preset-control-radius-xl: 1.75rem;
|
|
24
|
+
--preset-control-radius-2xl: 2.25rem;
|
|
25
|
+
--preset-control-border-width: 1px;
|
|
26
|
+
}
|
|
27
|
+
|
package/src/style.css
CHANGED
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
@import "./styles/ui/avatar.css";
|
|
4
4
|
@import "./styles/ui/badge.css";
|
|
5
5
|
@import "./styles/ui/button.css";
|
|
6
|
+
@import "./styles/ui/collapsible.css";
|
|
6
7
|
@import "./styles/ui/dialog.css";
|
|
7
8
|
@import "./styles/ui/dropdown-menu.css";
|
|
8
9
|
@import "./styles/ui/drawer.css";
|
|
9
|
-
@import "./styles/ui/empty-state.css";
|
|
10
10
|
@import "./styles/ui/field.css";
|
|
11
11
|
@import "./styles/ui/icon-button.css";
|
|
12
12
|
@import "./styles/ui/input.css";
|
|
@@ -16,5 +16,7 @@
|
|
|
16
16
|
@import "./styles/ui/skeleton.css";
|
|
17
17
|
@import "./styles/ui/status-notice.css";
|
|
18
18
|
@import "./styles/ui/switch.css";
|
|
19
|
+
@import "./styles/ui/tabs.css";
|
|
20
|
+
@import "./styles/ui/textarea.css";
|
|
19
21
|
@import "./styles/ui/toast.css";
|
|
20
22
|
@import "./styles/ui/tooltip.css";
|
package/src/styles/tokens.css
CHANGED
|
@@ -1,4 +1,18 @@
|
|
|
1
|
+
/* ================================================================== */
|
|
2
|
+
/* tokens.css — Tailwind v4 theme registration + shared mapping */
|
|
3
|
+
/* */
|
|
4
|
+
/* This file has TWO responsibilities: */
|
|
5
|
+
/* 1. @theme: Register CSS variables for Tailwind (initial values */
|
|
6
|
+
/* are light-mode defaults — a Tailwind v4 technical requirement) */
|
|
7
|
+
/* 2. :root: Shared mapping chains that are the SAME across all */
|
|
8
|
+
/* themes (preset → ui, app-specific derived variables) */
|
|
9
|
+
/* */
|
|
10
|
+
/* All color VALUES live in theme-light.css / theme-dark.css. */
|
|
11
|
+
/* Do NOT add theme-specific colors here. */
|
|
12
|
+
/* ================================================================== */
|
|
13
|
+
|
|
1
14
|
@theme {
|
|
15
|
+
/* Neutral scale — initial values (light); overridden per-theme */
|
|
2
16
|
--color-n900: #1a1a1a;
|
|
3
17
|
--color-n800: #2d2d2d;
|
|
4
18
|
--color-n700: #4a4a4a;
|
|
@@ -7,14 +21,13 @@
|
|
|
7
21
|
--color-n400: #d4d4d8;
|
|
8
22
|
--color-n300: #e4e4e7;
|
|
9
23
|
|
|
10
|
-
/*
|
|
11
|
-
--color-brand-primary: #
|
|
12
|
-
|
|
13
|
-
--color-brand-
|
|
14
|
-
/* Rose 700 */
|
|
15
|
-
--color-brand-accent: #fb7185;
|
|
24
|
+
/* Brand — initial values (light); overridden per-theme */
|
|
25
|
+
--color-brand-primary: #1a1a1a;
|
|
26
|
+
--color-brand-primary-hover: #000000;
|
|
27
|
+
--color-brand-accent: #4a4a4a;
|
|
16
28
|
|
|
17
|
-
|
|
29
|
+
/* Surface — initial values (light); overridden per-theme */
|
|
30
|
+
--color-surface-canvas: #ffffff;
|
|
18
31
|
--color-surface-base: #ffffff;
|
|
19
32
|
--color-surface-subtle: #fafaf9;
|
|
20
33
|
--color-surface-raised: #ffffff;
|
|
@@ -34,6 +47,7 @@
|
|
|
34
47
|
--shadow-raised: 0 10px 20px rgba(15, 23, 42, 0.08);
|
|
35
48
|
--shadow-popover: 0 18px 40px rgba(15, 23, 42, 0.10);
|
|
36
49
|
|
|
50
|
+
/* Status — initial values (light); overridden per-theme */
|
|
37
51
|
--color-admin-success-bg: rgba(16, 185, 129, 0.10);
|
|
38
52
|
--color-admin-success-border: rgba(16, 185, 129, 0.20);
|
|
39
53
|
--color-admin-success-text: #047857;
|
|
@@ -47,70 +61,103 @@
|
|
|
47
61
|
--color-admin-info-border: rgba(14, 165, 233, 0.20);
|
|
48
62
|
--color-admin-info-text: #0369a1;
|
|
49
63
|
|
|
50
|
-
/* Typography —
|
|
64
|
+
/* Typography — shared across all themes */
|
|
51
65
|
--font-sans: var(--font-inter), var(--font-noto-sans-sc), system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Roboto, sans-serif;
|
|
52
66
|
--font-heading: var(--font-source-serif-pro), var(--font-noto-serif-sc), "Source Serif 4", Georgia, "Times New Roman", serif;
|
|
53
67
|
--font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
|
54
68
|
|
|
69
|
+
/* Motion — shared across all themes */
|
|
55
70
|
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
56
71
|
--ease-exit: cubic-bezier(0.4, 0, 1, 1);
|
|
57
72
|
}
|
|
58
73
|
|
|
74
|
+
/* ================================================================== */
|
|
75
|
+
/* Shared mapping chains: preset → ui */
|
|
76
|
+
/* These mappings are identical across all themes. */
|
|
77
|
+
/* Theme files set --theme-*, presets set --preset-*, this layer */
|
|
78
|
+
/* wires them to the final --ui-* that components consume. */
|
|
79
|
+
/* ================================================================== */
|
|
80
|
+
|
|
59
81
|
:root {
|
|
60
|
-
|
|
61
|
-
--
|
|
62
|
-
--
|
|
63
|
-
--
|
|
64
|
-
--
|
|
65
|
-
--
|
|
66
|
-
--
|
|
67
|
-
--
|
|
68
|
-
--
|
|
69
|
-
--
|
|
70
|
-
|
|
71
|
-
--
|
|
72
|
-
--
|
|
73
|
-
|
|
74
|
-
--
|
|
75
|
-
--
|
|
76
|
-
--
|
|
77
|
-
|
|
78
|
-
--
|
|
79
|
-
--
|
|
80
|
-
--
|
|
81
|
-
--
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
--ui-
|
|
85
|
-
--ui-
|
|
86
|
-
--ui-
|
|
87
|
-
--ui-
|
|
88
|
-
|
|
89
|
-
--ui-
|
|
90
|
-
--ui-
|
|
91
|
-
--ui-
|
|
92
|
-
--ui-
|
|
93
|
-
--ui-
|
|
94
|
-
|
|
95
|
-
--ui-
|
|
96
|
-
--ui-
|
|
97
|
-
|
|
98
|
-
--ui-
|
|
99
|
-
--ui-
|
|
100
|
-
--ui-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
--ui-
|
|
104
|
-
--ui-
|
|
105
|
-
--ui-
|
|
106
|
-
|
|
107
|
-
--ui-
|
|
108
|
-
--ui-
|
|
109
|
-
--ui-
|
|
110
|
-
--ui-
|
|
82
|
+
/* Preset defaults — theme → preset (overridden by preset-*.css) */
|
|
83
|
+
--preset-surface-bg: var(--theme-surface-base);
|
|
84
|
+
--preset-surface-bg-subtle: var(--theme-surface-subtle);
|
|
85
|
+
--preset-surface-bg-raised: var(--theme-surface-raised);
|
|
86
|
+
--preset-surface-bg-inset: var(--theme-surface-inset);
|
|
87
|
+
--preset-surface-border: var(--theme-surface-border);
|
|
88
|
+
--preset-surface-border-muted: var(--theme-surface-border-muted);
|
|
89
|
+
--preset-surface-border-strong: var(--theme-surface-border-strong);
|
|
90
|
+
--preset-surface-shadow: var(--shadow-raised);
|
|
91
|
+
--preset-surface-shadow-strong: var(--shadow-popover);
|
|
92
|
+
--preset-surface-blur: 0px;
|
|
93
|
+
--preset-canvas-bg: var(--theme-surface-canvas);
|
|
94
|
+
--preset-canvas-bg-subtle: var(--theme-canvas-bg-subtle);
|
|
95
|
+
--preset-surface-container: var(--theme-surface-container);
|
|
96
|
+
--preset-surface-container-high: var(--theme-surface-container-high);
|
|
97
|
+
--preset-surface-container-highest: var(--theme-surface-container-highest);
|
|
98
|
+
--preset-control-radius-sm: 0.5rem;
|
|
99
|
+
--preset-control-radius-md: 0.75rem;
|
|
100
|
+
--preset-control-radius-lg: 1rem;
|
|
101
|
+
--preset-control-radius-xl: 1.5rem;
|
|
102
|
+
--preset-control-radius-2xl: 2rem;
|
|
103
|
+
--preset-control-border-width: 1px;
|
|
104
|
+
|
|
105
|
+
/* Final UI layer — preset → ui (consumed by components) */
|
|
106
|
+
--ui-surface-bg: var(--preset-surface-bg);
|
|
107
|
+
--ui-surface-bg-subtle: var(--preset-surface-bg-subtle);
|
|
108
|
+
--ui-surface-bg-raised: var(--preset-surface-bg-raised);
|
|
109
|
+
--ui-surface-bg-inset: var(--preset-surface-bg-inset);
|
|
110
|
+
--ui-surface-border: var(--preset-surface-border);
|
|
111
|
+
--ui-surface-border-muted: var(--preset-surface-border-muted);
|
|
112
|
+
--ui-surface-border-strong: var(--preset-surface-border-strong);
|
|
113
|
+
--ui-surface-shadow: var(--preset-surface-shadow);
|
|
114
|
+
--ui-surface-shadow-strong: var(--preset-surface-shadow-strong);
|
|
115
|
+
--ui-surface-blur: var(--preset-surface-blur);
|
|
116
|
+
|
|
117
|
+
--ui-canvas-bg: var(--preset-canvas-bg);
|
|
118
|
+
--ui-canvas-bg-subtle: var(--preset-canvas-bg-subtle);
|
|
119
|
+
|
|
120
|
+
--ui-surface-container: var(--preset-surface-container);
|
|
121
|
+
--ui-surface-container-high: var(--preset-surface-container-high);
|
|
122
|
+
--ui-surface-container-highest: var(--preset-surface-container-highest);
|
|
123
|
+
|
|
124
|
+
--ui-text-primary: var(--theme-text-primary);
|
|
125
|
+
--ui-text-secondary: var(--theme-text-secondary);
|
|
126
|
+
--ui-text-muted: var(--theme-text-muted);
|
|
127
|
+
--ui-text-on-accent: var(--theme-text-on-accent);
|
|
128
|
+
|
|
129
|
+
--ui-accent-bg: var(--theme-accent-bg);
|
|
130
|
+
--ui-accent-bg-hover: var(--theme-accent-bg-hover);
|
|
131
|
+
--ui-accent-bg-muted: var(--theme-accent-bg-muted);
|
|
132
|
+
--ui-accent-text: var(--theme-text-on-accent);
|
|
133
|
+
--ui-accent-border: var(--theme-accent-border);
|
|
134
|
+
|
|
135
|
+
--ui-success-bg: var(--theme-success-bg);
|
|
136
|
+
--ui-success-border: var(--theme-success-border);
|
|
137
|
+
--ui-success-text: var(--theme-success-text);
|
|
138
|
+
--ui-warning-bg: var(--theme-warning-bg);
|
|
139
|
+
--ui-warning-border: var(--theme-warning-border);
|
|
140
|
+
--ui-warning-text: var(--theme-warning-text);
|
|
141
|
+
--ui-danger-bg: var(--theme-danger-bg);
|
|
142
|
+
--ui-danger-bg-emphasis: var(--theme-danger-bg-emphasis);
|
|
143
|
+
--ui-danger-border: var(--theme-danger-border);
|
|
144
|
+
--ui-danger-text: var(--theme-danger-text);
|
|
145
|
+
--ui-info-bg: var(--theme-info-bg);
|
|
146
|
+
--ui-info-border: var(--theme-info-border);
|
|
147
|
+
--ui-info-text: var(--theme-info-text);
|
|
148
|
+
|
|
149
|
+
--ui-control-radius-sm: var(--preset-control-radius-sm);
|
|
150
|
+
--ui-control-radius-md: var(--preset-control-radius-md);
|
|
151
|
+
--ui-control-radius-lg: var(--preset-control-radius-lg);
|
|
152
|
+
--ui-control-radius-xl: var(--preset-control-radius-xl);
|
|
153
|
+
--ui-control-radius-2xl: var(--preset-control-radius-2xl);
|
|
154
|
+
--ui-control-border-width: var(--preset-control-border-width);
|
|
155
|
+
--ui-control-focus-ring: var(--theme-control-focus-ring);
|
|
156
|
+
--ui-control-focus-ring-offset: var(--theme-control-focus-ring-offset);
|
|
111
157
|
|
|
112
158
|
--ui-font-heading: var(--font-heading);
|
|
113
159
|
|
|
160
|
+
/* Motion & density — shared */
|
|
114
161
|
--ui-motion-duration-fast: 0.15s;
|
|
115
162
|
--ui-motion-duration-default: 0.2s;
|
|
116
163
|
--ui-motion-ease-standard: var(--ease-standard);
|
|
@@ -118,37 +165,38 @@
|
|
|
118
165
|
--ui-density-default: 1;
|
|
119
166
|
--ui-density-comfortable: 1.125;
|
|
120
167
|
|
|
168
|
+
/* Content layout — shared */
|
|
121
169
|
--content-min-width: 320px;
|
|
122
170
|
--content-preferred-width: 70vw;
|
|
123
|
-
/* wider for more expansive reading */
|
|
124
171
|
--content-max-width: 960px;
|
|
125
172
|
--content-width: clamp(600px, 70vw, 960px);
|
|
126
173
|
--content-padding: 24px;
|
|
127
174
|
--header-top-margin: 64px;
|
|
128
175
|
|
|
129
|
-
|
|
130
|
-
--publish-trigger-
|
|
131
|
-
--publish-trigger-
|
|
132
|
-
--publish-trigger-
|
|
133
|
-
--publish-
|
|
134
|
-
--publish-popover-
|
|
135
|
-
--publish-popover-
|
|
136
|
-
--publish-
|
|
137
|
-
--publish-section-
|
|
138
|
-
--publish-
|
|
176
|
+
/* App-specific derived variables — shared (reference --ui-* only) */
|
|
177
|
+
--publish-trigger-bg: var(--ui-surface-bg-subtle);
|
|
178
|
+
--publish-trigger-border: var(--ui-surface-border);
|
|
179
|
+
--publish-trigger-text: var(--ui-text-primary);
|
|
180
|
+
--publish-trigger-active-bg: var(--ui-accent-bg-muted);
|
|
181
|
+
--publish-popover-bg: var(--ui-surface-bg);
|
|
182
|
+
--publish-popover-border: var(--ui-surface-border);
|
|
183
|
+
--publish-popover-shadow: var(--ui-surface-shadow-strong);
|
|
184
|
+
--publish-section-bg: var(--ui-surface-bg-subtle);
|
|
185
|
+
--publish-section-border: var(--ui-surface-border);
|
|
186
|
+
--publish-fact-title: var(--ui-text-secondary);
|
|
139
187
|
--publish-fact-value: var(--color-n900);
|
|
140
|
-
--publish-muted-text: var(--
|
|
141
|
-
--publish-warning-bg: var(--
|
|
142
|
-
--publish-warning-border: var(--
|
|
143
|
-
--publish-warning-text: var(--
|
|
144
|
-
--publish-danger-bg: var(--
|
|
145
|
-
--publish-danger-border: var(--
|
|
146
|
-
--publish-danger-text: var(--
|
|
147
|
-
--publish-success-bg: var(--
|
|
148
|
-
--publish-success-border: var(--
|
|
149
|
-
--publish-success-text: var(--
|
|
150
|
-
--publish-progress-track: var(--
|
|
151
|
-
--publish-progress-fill: var(--
|
|
188
|
+
--publish-muted-text: var(--ui-text-secondary);
|
|
189
|
+
--publish-warning-bg: var(--ui-warning-bg);
|
|
190
|
+
--publish-warning-border: var(--ui-warning-border);
|
|
191
|
+
--publish-warning-text: var(--ui-warning-text);
|
|
192
|
+
--publish-danger-bg: var(--ui-danger-bg);
|
|
193
|
+
--publish-danger-border: var(--ui-danger-border);
|
|
194
|
+
--publish-danger-text: var(--ui-danger-text);
|
|
195
|
+
--publish-success-bg: var(--ui-success-bg);
|
|
196
|
+
--publish-success-border: var(--ui-success-border);
|
|
197
|
+
--publish-success-text: var(--ui-success-text);
|
|
198
|
+
--publish-progress-track: var(--ui-surface-bg-inset);
|
|
199
|
+
--publish-progress-fill: var(--ui-accent-bg);
|
|
152
200
|
|
|
153
201
|
--feedback-neutral-bg: var(--ui-surface-bg-raised);
|
|
154
202
|
--feedback-neutral-border: var(--ui-surface-border);
|
|
@@ -198,7 +246,7 @@
|
|
|
198
246
|
--workspace-transition-veil-bg: var(--color-overlay-soft);
|
|
199
247
|
--workspace-transition-stale-bg: color-mix(in srgb, var(--color-overlay-soft) 72%, transparent);
|
|
200
248
|
|
|
201
|
-
--tooltip-shadow: var(--ui-surface-shadow);
|
|
249
|
+
--tooltip-shadow: var(--ui-surface-shadow-strong);
|
|
202
250
|
--select-dropdown-shadow: var(--ui-surface-shadow-strong);
|
|
203
251
|
--theme-picker-shadow: var(--ui-surface-shadow-strong);
|
|
204
252
|
--drawer-panel-shadow: var(--ui-surface-shadow-strong);
|
package/src/styles/ui/input.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
.ui-input {
|
|
2
|
-
--field-bg: var(--ui-surface-bg
|
|
3
|
-
--field-border:
|
|
2
|
+
--field-bg: var(--ui-surface-bg);
|
|
3
|
+
--field-border: var(--ui-surface-border);
|
|
4
4
|
--field-text: var(--ui-text-primary);
|
|
5
5
|
--field-placeholder: var(--ui-text-muted);
|
|
6
6
|
--field-ring: var(--ui-control-focus-ring);
|
package/src/styles/ui/select.css
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
.ui-select__trigger {
|
|
2
|
-
--select-bg: var(--ui-surface-bg
|
|
3
|
-
--select-border:
|
|
2
|
+
--select-bg: var(--ui-surface-bg);
|
|
3
|
+
--select-border: var(--ui-surface-border);
|
|
4
4
|
--select-text: var(--ui-text-primary);
|
|
5
5
|
--select-ring: var(--ui-control-focus-ring);
|
|
6
6
|
|
|
7
7
|
background: var(--select-bg);
|
|
8
|
-
border:
|
|
8
|
+
border: 0.5px solid var(--select-border);
|
|
9
9
|
color: var(--select-text);
|
|
10
10
|
--tw-ring-color: var(--select-ring);
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
.ui-select__trigger:hover:not(:disabled) {
|
|
14
|
-
--select-
|
|
14
|
+
--select-border: var(--ui-surface-border-strong);
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
.ui-select__trigger[data-open] {
|