@owodesign/owoui 0.1.3 → 0.1.5

package/dist/tokens.min.js

@@ -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=["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};
+var o=["--owo-ref-color-neutral-900","--owo-ref-color-neutral-800","--owo-ref-color-neutral-700","--owo-ref-color-neutral-600","--owo-ref-color-neutral-500","--owo-ref-color-neutral-400","--owo-ref-color-neutral-300","--owo-ref-color-neutral-200","--owo-ref-color-neutral-100"],e=["--owo-cmp-surface-bg","--owo-cmp-surface-bg-subtle","--owo-cmp-surface-bg-raised","--owo-cmp-surface-bg-inset","--owo-cmp-surface-border","--owo-cmp-surface-border-muted","--owo-cmp-surface-border-strong","--owo-cmp-surface-shadow","--owo-cmp-surface-shadow-strong","--owo-cmp-surface-blur","--owo-cmp-canvas-bg","--owo-cmp-canvas-bg-subtle","--owo-cmp-surface-container","--owo-cmp-surface-container-high","--owo-cmp-surface-container-highest","--owo-cmp-overlay-bg","--owo-cmp-text-primary","--owo-cmp-text-secondary","--owo-cmp-text-muted","--owo-cmp-text-on-accent","--owo-cmp-accent-bg","--owo-cmp-accent-bg-hover","--owo-cmp-accent-bg-muted","--owo-cmp-accent-text","--owo-cmp-accent-border","--owo-cmp-success-bg","--owo-cmp-success-border","--owo-cmp-success-text","--owo-cmp-warning-bg","--owo-cmp-warning-border","--owo-cmp-warning-text","--owo-cmp-danger-bg","--owo-cmp-danger-bg-emphasis","--owo-cmp-danger-border","--owo-cmp-danger-text","--owo-cmp-info-bg","--owo-cmp-info-border","--owo-cmp-info-text","--owo-cmp-control-radius-sm","--owo-cmp-control-radius-md","--owo-cmp-control-radius-lg","--owo-cmp-control-radius-xl","--owo-cmp-control-radius-2xl","--owo-cmp-control-radius-full","--owo-cmp-control-border-width","--owo-cmp-control-focus-ring","--owo-cmp-control-focus-ring-offset","--owo-cmp-font-heading","--owo-cmp-motion-duration-fast","--owo-cmp-motion-duration-default","--owo-cmp-motion-ease-standard","--owo-cmp-motion-ease-decelerate","--owo-cmp-motion-ease-accelerate","--owo-cmp-density-compact","--owo-cmp-density-default","--owo-cmp-density-comfortable","--owo-cmp-z-dropdown","--owo-cmp-z-modal","--owo-cmp-z-toast"],r=["light","dark"],c=[{id:"surface",label:"Surface",tokens:["--owo-cmp-surface-bg","--owo-cmp-surface-bg-subtle","--owo-cmp-surface-bg-raised","--owo-cmp-surface-bg-inset","--owo-cmp-surface-border","--owo-cmp-surface-border-muted","--owo-cmp-surface-border-strong","--owo-cmp-surface-shadow","--owo-cmp-surface-shadow-strong","--owo-cmp-surface-blur","--owo-cmp-canvas-bg","--owo-cmp-canvas-bg-subtle","--owo-cmp-surface-container","--owo-cmp-surface-container-high","--owo-cmp-surface-container-highest","--owo-cmp-overlay-bg"]},{id:"text",label:"Text",tokens:["--owo-cmp-text-primary","--owo-cmp-text-secondary","--owo-cmp-text-muted","--owo-cmp-text-on-accent"]},{id:"accent",label:"Accent",tokens:["--owo-cmp-accent-bg","--owo-cmp-accent-bg-hover","--owo-cmp-accent-bg-muted","--owo-cmp-accent-text","--owo-cmp-accent-border"]},{id:"feedback",label:"Feedback",tokens:["--owo-cmp-success-bg","--owo-cmp-success-border","--owo-cmp-success-text","--owo-cmp-warning-bg","--owo-cmp-warning-border","--owo-cmp-warning-text","--owo-cmp-danger-bg","--owo-cmp-danger-bg-emphasis","--owo-cmp-danger-border","--owo-cmp-danger-text","--owo-cmp-info-bg","--owo-cmp-info-border","--owo-cmp-info-text"]},{id:"control",label:"Control",tokens:["--owo-cmp-control-radius-sm","--owo-cmp-control-radius-md","--owo-cmp-control-radius-lg","--owo-cmp-control-radius-xl","--owo-cmp-control-radius-2xl","--owo-cmp-control-radius-full","--owo-cmp-control-border-width","--owo-cmp-control-focus-ring","--owo-cmp-control-focus-ring-offset"]},{id:"typography",label:"Typography",tokens:["--owo-cmp-font-heading"]},{id:"motion-density",label:"Motion & Density",tokens:["--owo-cmp-motion-duration-fast","--owo-cmp-motion-duration-default","--owo-cmp-motion-ease-standard","--owo-cmp-motion-ease-decelerate","--owo-cmp-motion-ease-accelerate","--owo-cmp-density-compact","--owo-cmp-density-default","--owo-cmp-density-comfortable"]},{id:"layering",label:"Layering",tokens:["--owo-cmp-z-dropdown","--owo-cmp-z-modal","--owo-cmp-z-toast"]}],a=["default","flat","elevated","glass"],t={"--owo-cmp-surface-bg":"Default component surface background.","--owo-cmp-surface-bg-subtle":"Lower-emphasis surface background.","--owo-cmp-surface-bg-raised":"Raised surface background for floating or elevated panels.","--owo-cmp-surface-bg-inset":"Inset surface background for inputs and compact controls.","--owo-cmp-surface-border":"Default component border color.","--owo-cmp-surface-border-muted":"Lowest-emphasis border for subtle separators and dividers.","--owo-cmp-surface-border-strong":"Higher-emphasis border or focus-adjacent border color.","--owo-cmp-surface-shadow":"Default surface shadow for raised UI.","--owo-cmp-surface-shadow-strong":"Higher-emphasis shadow for popovers and overlays.","--owo-cmp-surface-blur":"Backdrop blur amount for translucent surface styles.","--owo-cmp-canvas-bg":"Page-level canvas background, distinct from component surfaces.","--owo-cmp-canvas-bg-subtle":"Subtle canvas background for secondary page regions.","--owo-cmp-surface-container":"Container background for sidebars, panels, and layout regions.","--owo-cmp-surface-container-high":"Higher-emphasis container background for nested panels.","--owo-cmp-surface-container-highest":"Highest-emphasis container background for deeply nested panels.","--owo-cmp-overlay-bg":"Shared overlay or backdrop background treatment.","--owo-cmp-text-primary":"Primary readable foreground text color.","--owo-cmp-text-secondary":"Secondary readable foreground text color.","--owo-cmp-text-muted":"Muted or tertiary text color.","--owo-cmp-text-on-accent":"Readable text color when placed on accent surfaces.","--owo-cmp-accent-bg":"Primary accent background color.","--owo-cmp-accent-bg-hover":"Primary accent hover color.","--owo-cmp-accent-bg-muted":"Muted accent background for hover, selected, and highlighted states.","--owo-cmp-accent-text":"Readable text color used on accent backgrounds.","--owo-cmp-accent-border":"Accent-tinted border for active indicators and emphasis separators.","--owo-cmp-success-bg":"Success background treatment.","--owo-cmp-success-border":"Success border treatment.","--owo-cmp-success-text":"Success foreground text color.","--owo-cmp-warning-bg":"Warning background treatment.","--owo-cmp-warning-border":"Warning border treatment.","--owo-cmp-warning-text":"Warning foreground text color.","--owo-cmp-danger-bg":"Danger background treatment.","--owo-cmp-danger-bg-emphasis":"Stronger danger background for hover, active, or destructive emphasis.","--owo-cmp-danger-border":"Danger border treatment.","--owo-cmp-danger-text":"Danger foreground text color.","--owo-cmp-info-bg":"Info background treatment.","--owo-cmp-info-border":"Info border treatment.","--owo-cmp-info-text":"Info foreground text color.","--owo-cmp-control-radius-sm":"Small control radius.","--owo-cmp-control-radius-md":"Default control radius.","--owo-cmp-control-radius-lg":"Large control radius.","--owo-cmp-control-radius-xl":"Extra-large radius for drawers, dialogs, and large containers.","--owo-cmp-control-radius-2xl":"Double extra-large radius for sheets and full-page overlays.","--owo-cmp-control-radius-full":"Fully rounded radius for pills, badges, avatars, and circular controls.","--owo-cmp-control-border-width":"Default border width for controls.","--owo-cmp-control-focus-ring":"Focus ring color.","--owo-cmp-control-focus-ring-offset":"Focus ring offset base color.","--owo-cmp-font-heading":"Heading font family stack.","--owo-cmp-motion-duration-fast":"Fast motion duration.","--owo-cmp-motion-duration-default":"Default motion duration.","--owo-cmp-motion-ease-standard":"Default motion easing curve.","--owo-cmp-motion-ease-decelerate":"Entrance-friendly motion easing curve.","--owo-cmp-motion-ease-accelerate":"Exit-friendly motion easing curve.","--owo-cmp-density-compact":"Compact density scale.","--owo-cmp-density-default":"Default density scale.","--owo-cmp-density-comfortable":"Comfortable density scale.","--owo-cmp-z-dropdown":"Dropdown and popover layering index.","--owo-cmp-z-modal":"Modal and drawer layering index.","--owo-cmp-z-toast":"Toast and high-priority overlay layering index."};export{o as foundationNeutralKeys,a as presetNames,e as semanticTokenKeys,r as themeNames,t as tokenDescriptions,c as tokenGroups};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@owodesign/owoui",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Reusable React UI foundation components and theme presets.",
   "type": "module",
   "main": "./dist/index.min.js",
@@ -27,7 +27,7 @@
       "types": "./dist/tokens.d.ts",
       "import": "./dist/tokens.min.js"
     },
-    "./tokens.css": "./src/tokens.css",
+    "./tokens.css": "./dist/tokens.css",
     "./storybook": {
       "types": "./dist/storybook/index.d.ts",
       "import": "./dist/storybook/index.min.js"
@@ -37,41 +37,32 @@
       "import": "./dist/storybook/catalog.js"
     },
     "./storybook/catalog.json": "./dist/storybook/catalog.json",
-    "./style.css": "./src/style.css",
-    "./theme-light.css": "./src/theme-light.css",
-    "./theme-dark.css": "./src/theme-dark.css",
-    "./preset-default.css": "./src/preset-default.css",
-    "./preset-flat.css": "./src/preset-flat.css",
-    "./preset-elevated.css": "./src/preset-elevated.css",
-    "./preset-glass.css": "./src/preset-glass.css"
+    "./style.css": "./dist/style.css",
+    "./theme-light.css": "./dist/theme-light.css",
+    "./theme-dark.css": "./dist/theme-dark.css",
+    "./preset-default.css": "./dist/preset-default.css",
+    "./preset-flat.css": "./dist/preset-flat.css",
+    "./preset-elevated.css": "./dist/preset-elevated.css",
+    "./preset-glass.css": "./dist/preset-glass.css"
   },
   "files": [
-    "dist",
-    "src/style.css",
-    "src/tokens.css",
-    "src/theme-light.css",
-    "src/theme-dark.css",
-    "src/preset-default.css",
-    "src/preset-flat.css",
-    "src/preset-elevated.css",
-    "src/preset-glass.css",
-    "src/styles"
+    "dist"
   ],
   "sideEffects": [
-    "./src/style.css",
-    "./src/tokens.css",
-    "./src/theme-light.css",
-    "./src/theme-dark.css",
-    "./src/preset-default.css",
-    "./src/preset-flat.css",
-    "./src/preset-elevated.css",
-    "./src/preset-glass.css",
-    "./src/styles/**/*.css",
+    "./dist/style.css",
+    "./dist/tokens.css",
+    "./dist/theme-light.css",
+    "./dist/theme-dark.css",
+    "./dist/preset-default.css",
+    "./dist/preset-flat.css",
+    "./dist/preset-elevated.css",
+    "./dist/preset-glass.css",
     "./src/storybook/**/*.ts",
     "./src/storybook/**/*.tsx"
   ],
   "scripts": {
-    "build": "npm run build:lib && npm run build:storybook && npm run build:storybook:catalog && npm run build:storybook:static",
+    "build": "npm run build:lib && npm run build:css && npm run build:storybook && npm run build:storybook:catalog && npm run build:storybook:static",
+    "build:css": "node scripts/build-css.mjs",
     "build:lib": "tsup",
     "build:storybook": "tsup --config tsup.storybook.config.ts",
     "build:storybook:catalog": "node scripts/build-storybook-catalog.mjs",
@@ -81,8 +72,11 @@
     "preview:storybook": "vite preview --config vite.config.ts",
     "typecheck": "tsc --noEmit -p tsconfig.json",
     "consumer:smoke": "node examples/consumer-smoke.mjs",
+    "consumer:tarball": "node scripts/verify-tarball-consumer.mjs",
+    "clean": "rm -rf dist",
     "pack:inspect": "npm_config_cache=/tmp/owoui-npm-cache npm pack --dry-run --json .",
-    "release:check": "npm run build && npm run typecheck && npm run consumer:smoke && npm run pack:inspect"
+    "release:check": "npm run build && npm run typecheck && npm run consumer:smoke && npm run consumer:tarball && npm run pack:inspect",
+    "release:publish": "npm run release:check && npm publish --access public"
   },
   "publishConfig": {
     "access": "public"
@@ -105,6 +99,7 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "tailwindcss": "^4.2.1",
+    "typescript": "^5.9.3",
     "tsup": "^8.5.1",
     "vite": "^8.0.3"
   }

package/src/preset-default.css

@@ -1,27 +0,0 @@
-@import "./tokens.css";
-
-:root[data-preset="default"],
-.owoui-preset-default {
-  --preset-surface-bg: var(--theme-surface-base);
-  --preset-surface-bg-subtle: var(--theme-surface-subtle);
-  --preset-surface-bg-raised: var(--theme-surface-raised);
-  --preset-surface-bg-inset: var(--theme-surface-inset);
-  --preset-surface-border: var(--theme-surface-border);
-  --preset-surface-border-muted: var(--theme-surface-border-muted);
-  --preset-surface-border-strong: var(--theme-surface-border-strong);
-  --preset-surface-shadow: var(--shadow-raised);
-  --preset-surface-shadow-strong: var(--shadow-popover);
-  --preset-surface-blur: 0px;
-  --preset-canvas-bg: var(--theme-surface-canvas);
-  --preset-canvas-bg-subtle: var(--theme-canvas-bg-subtle);
-  --preset-surface-container: var(--theme-surface-container);
-  --preset-surface-container-high: var(--theme-surface-container-high);
-  --preset-surface-container-highest: var(--theme-surface-container-highest);
-  --preset-control-radius-sm: 0.5rem;
-  --preset-control-radius-md: 0.75rem;
-  --preset-control-radius-lg: 1rem;
-  --preset-control-radius-xl: 1.5rem;
-  --preset-control-radius-2xl: 2rem;
-  --preset-control-border-width: 1px;
-}
-

package/src/preset-elevated.css

@@ -1,27 +0,0 @@
-@import "./tokens.css";
-
-:root[data-preset="elevated"],
-.owoui-preset-elevated {
-  --preset-surface-bg: color-mix(in srgb, var(--theme-surface-base) 96%, var(--theme-surface-border-strong));
-  --preset-surface-bg-subtle: color-mix(in srgb, var(--theme-surface-subtle) 96%, var(--theme-surface-border-strong));
-  --preset-surface-bg-raised: color-mix(in srgb, var(--theme-surface-raised) 94%, var(--theme-surface-border-strong));
-  --preset-surface-bg-inset: var(--theme-surface-inset);
-  --preset-surface-border: color-mix(in srgb, var(--theme-surface-border) 88%, var(--theme-surface-border-strong));
-  --preset-surface-border-muted: var(--theme-surface-border-muted);
-  --preset-surface-border-strong: var(--theme-surface-border-strong);
-  --preset-surface-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
-  --preset-surface-shadow-strong: 0 28px 60px rgba(15, 23, 42, 0.18);
-  --preset-surface-blur: 0px;
-  --preset-canvas-bg: var(--theme-surface-canvas);
-  --preset-canvas-bg-subtle: var(--theme-canvas-bg-subtle);
-  --preset-surface-container: color-mix(in srgb, var(--theme-surface-container) 94%, var(--theme-surface-border-strong));
-  --preset-surface-container-high: color-mix(in srgb, var(--theme-surface-container-high) 94%, var(--theme-surface-border-strong));
-  --preset-surface-container-highest: color-mix(in srgb, var(--theme-surface-container-highest) 92%, var(--theme-surface-border-strong));
-  --preset-control-radius-sm: 0.625rem;
-  --preset-control-radius-md: 0.875rem;
-  --preset-control-radius-lg: 1.125rem;
-  --preset-control-radius-xl: 1.625rem;
-  --preset-control-radius-2xl: 2.125rem;
-  --preset-control-border-width: 1px;
-}
-

package/src/preset-flat.css

@@ -1,27 +0,0 @@
-@import "./tokens.css";
-
-:root[data-preset="flat"],
-.owoui-preset-flat {
-  --preset-surface-bg: var(--theme-surface-base);
-  --preset-surface-bg-subtle: var(--theme-surface-subtle);
-  --preset-surface-bg-raised: var(--theme-surface-base);
-  --preset-surface-bg-inset: var(--theme-surface-inset);
-  --preset-surface-border: var(--theme-surface-border);
-  --preset-surface-border-muted: var(--theme-surface-border-muted);
-  --preset-surface-border-strong: var(--theme-surface-border-strong);
-  --preset-surface-shadow: none;
-  --preset-surface-shadow-strong: none;
-  --preset-surface-blur: 0px;
-  --preset-canvas-bg: var(--theme-surface-canvas);
-  --preset-canvas-bg-subtle: var(--theme-canvas-bg-subtle);
-  --preset-surface-container: var(--theme-surface-container);
-  --preset-surface-container-high: var(--theme-surface-container);
-  --preset-surface-container-highest: var(--theme-surface-container-high);
-  --preset-control-radius-sm: 0.375rem;
-  --preset-control-radius-md: 0.625rem;
-  --preset-control-radius-lg: 0.875rem;
-  --preset-control-radius-xl: 1.25rem;
-  --preset-control-radius-2xl: 1.5rem;
-  --preset-control-border-width: 1px;
-}
-

package/src/preset-glass.css

@@ -1,27 +0,0 @@
-@import "./tokens.css";
-
-:root[data-preset="glass"],
-.owoui-preset-glass {
-  --preset-surface-bg: color-mix(in srgb, var(--theme-surface-base) 62%, transparent);
-  --preset-surface-bg-subtle: color-mix(in srgb, var(--theme-surface-subtle) 48%, transparent);
-  --preset-surface-bg-raised: color-mix(in srgb, var(--theme-surface-raised) 72%, transparent);
-  --preset-surface-bg-inset: color-mix(in srgb, var(--theme-surface-inset) 82%, transparent);
-  --preset-surface-border: color-mix(in srgb, var(--theme-surface-border-strong) 55%, transparent);
-  --preset-surface-border-muted: color-mix(in srgb, var(--theme-surface-border-muted) 60%, transparent);
-  --preset-surface-border-strong: color-mix(in srgb, var(--theme-surface-border-strong) 78%, transparent);
-  --preset-surface-shadow: 0 16px 44px rgba(15, 23, 42, 0.1);
-  --preset-surface-shadow-strong: 0 24px 64px rgba(15, 23, 42, 0.14);
-  --preset-surface-blur: 18px;
-  --preset-canvas-bg: var(--theme-surface-canvas);
-  --preset-canvas-bg-subtle: var(--theme-canvas-bg-subtle);
-  --preset-surface-container: color-mix(in srgb, var(--theme-surface-container) 70%, transparent);
-  --preset-surface-container-high: color-mix(in srgb, var(--theme-surface-container-high) 74%, transparent);
-  --preset-surface-container-highest: color-mix(in srgb, var(--theme-surface-container-highest) 78%, transparent);
-  --preset-control-radius-sm: 0.75rem;
-  --preset-control-radius-md: 1rem;
-  --preset-control-radius-lg: 1.25rem;
-  --preset-control-radius-xl: 1.75rem;
-  --preset-control-radius-2xl: 2.25rem;
-  --preset-control-border-width: 1px;
-}
-

package/src/style.css

@@ -1,22 +0,0 @@
-@import "tailwindcss";
-@import "./styles/tokens.css";
-@import "./styles/ui/avatar.css";
-@import "./styles/ui/badge.css";
-@import "./styles/ui/button.css";
-@import "./styles/ui/collapsible.css";
-@import "./styles/ui/dialog.css";
-@import "./styles/ui/dropdown-menu.css";
-@import "./styles/ui/drawer.css";
-@import "./styles/ui/field.css";
-@import "./styles/ui/icon-button.css";
-@import "./styles/ui/input.css";
-@import "./styles/ui/panel.css";
-@import "./styles/ui/segmented-control.css";
-@import "./styles/ui/select.css";
-@import "./styles/ui/skeleton.css";
-@import "./styles/ui/status-notice.css";
-@import "./styles/ui/switch.css";
-@import "./styles/ui/tabs.css";
-@import "./styles/ui/textarea.css";
-@import "./styles/ui/toast.css";
-@import "./styles/ui/tooltip.css";

package/src/styles/tokens.css

@@ -1,253 +0,0 @@
-/* ================================================================== */
-/*  tokens.css — Tailwind v4 theme registration + shared mapping      */
-/*                                                                     */
-/*  This file has TWO responsibilities:                                */
-/*  1. @theme: Register CSS variables for Tailwind (initial values     */
-/*     are light-mode defaults — a Tailwind v4 technical requirement)  */
-/*  2. :root: Shared mapping chains that are the SAME across all       */
-/*     themes (preset → ui, app-specific derived variables)            */
-/*                                                                     */
-/*  All color VALUES live in theme-light.css / theme-dark.css.         */
-/*  Do NOT add theme-specific colors here.                             */
-/* ================================================================== */
-
-@theme {
-  /* Neutral scale — initial values (light); overridden per-theme */
-  --color-n900: #1a1a1a;
-  --color-n800: #2d2d2d;
-  --color-n700: #4a4a4a;
-  --color-n600: #71717a;
-  --color-n500: #a1a1aa;
-  --color-n400: #d4d4d8;
-  --color-n300: #e4e4e7;
-
-  /* Brand — initial values (light); overridden per-theme */
-  --color-brand-primary: #1a1a1a;
-  --color-brand-primary-hover: #000000;
-  --color-brand-accent: #4a4a4a;
-
-  /* Surface — initial values (light); overridden per-theme */
-  --color-surface-canvas: #ffffff;
-  --color-surface-base: #ffffff;
-  --color-surface-subtle: #fafaf9;
-  --color-surface-raised: #ffffff;
-  --color-surface-inset: #f5f5f4;
-  --color-surface-border: #e5e7eb;
-  --color-surface-ring: #d6d3d1;
-  --color-surface-overlay: rgba(0, 0, 0, 0.4);
-  --color-overlay-soft: rgba(244, 238, 230, 0.56);
-  --color-overlay-strong: rgba(15, 23, 42, 0.18);
-  --color-highlight-soft: rgba(255, 255, 255, 0.56);
-  --color-highlight-sheen: rgba(255, 255, 255, 0.34);
-  --color-text-on-brand: #ffffff;
-  --color-code-block-bg: #f4f4f5;
-  --color-code-block-border: #e4e4e7;
-  --color-code-block-divider: #ececed;
-  --color-code-inline-bg: #f4f4f5;
-  --shadow-raised: 0 10px 20px rgba(15, 23, 42, 0.08);
-  --shadow-popover: 0 18px 40px rgba(15, 23, 42, 0.10);
-
-  /* Status — initial values (light); overridden per-theme */
-  --color-admin-success-bg: rgba(16, 185, 129, 0.10);
-  --color-admin-success-border: rgba(16, 185, 129, 0.20);
-  --color-admin-success-text: #047857;
-  --color-admin-warning-bg: rgba(245, 158, 11, 0.10);
-  --color-admin-warning-border: rgba(245, 158, 11, 0.20);
-  --color-admin-warning-text: #b45309;
-  --color-admin-danger-bg: rgba(239, 68, 68, 0.10);
-  --color-admin-danger-border: rgba(239, 68, 68, 0.20);
-  --color-admin-danger-text: #b91c1c;
-  --color-admin-info-bg: rgba(14, 165, 233, 0.10);
-  --color-admin-info-border: rgba(14, 165, 233, 0.20);
-  --color-admin-info-text: #0369a1;
-
-  /* Typography — shared across all themes */
-  --font-sans: var(--font-inter), var(--font-noto-sans-sc), system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Roboto, sans-serif;
-  --font-heading: var(--font-source-serif-pro), var(--font-noto-serif-sc), "Source Serif 4", Georgia, "Times New Roman", serif;
-  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-
-  /* Motion — shared across all themes */
-  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
-  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
-}
-
-/* ================================================================== */
-/*  Shared mapping chains: preset → ui                                 */
-/*  These mappings are identical across all themes.                    */
-/*  Theme files set --theme-*, presets set --preset-*, this layer      */
-/*  wires them to the final --ui-* that components consume.            */
-/* ================================================================== */
-
-:root {
-  /* Preset defaults — theme → preset (overridden by preset-*.css) */
-  --preset-surface-bg: var(--theme-surface-base);
-  --preset-surface-bg-subtle: var(--theme-surface-subtle);
-  --preset-surface-bg-raised: var(--theme-surface-raised);
-  --preset-surface-bg-inset: var(--theme-surface-inset);
-  --preset-surface-border: var(--theme-surface-border);
-  --preset-surface-border-muted: var(--theme-surface-border-muted);
-  --preset-surface-border-strong: var(--theme-surface-border-strong);
-  --preset-surface-shadow: var(--shadow-raised);
-  --preset-surface-shadow-strong: var(--shadow-popover);
-  --preset-surface-blur: 0px;
-  --preset-canvas-bg: var(--theme-surface-canvas);
-  --preset-canvas-bg-subtle: var(--theme-canvas-bg-subtle);
-  --preset-surface-container: var(--theme-surface-container);
-  --preset-surface-container-high: var(--theme-surface-container-high);
-  --preset-surface-container-highest: var(--theme-surface-container-highest);
-  --preset-control-radius-sm: 0.5rem;
-  --preset-control-radius-md: 0.75rem;
-  --preset-control-radius-lg: 1rem;
-  --preset-control-radius-xl: 1.5rem;
-  --preset-control-radius-2xl: 2rem;
-  --preset-control-border-width: 1px;
-
-  /* Final UI layer — preset → ui (consumed by components) */
-  --ui-surface-bg: var(--preset-surface-bg);
-  --ui-surface-bg-subtle: var(--preset-surface-bg-subtle);
-  --ui-surface-bg-raised: var(--preset-surface-bg-raised);
-  --ui-surface-bg-inset: var(--preset-surface-bg-inset);
-  --ui-surface-border: var(--preset-surface-border);
-  --ui-surface-border-muted: var(--preset-surface-border-muted);
-  --ui-surface-border-strong: var(--preset-surface-border-strong);
-  --ui-surface-shadow: var(--preset-surface-shadow);
-  --ui-surface-shadow-strong: var(--preset-surface-shadow-strong);
-  --ui-surface-blur: var(--preset-surface-blur);
-
-  --ui-canvas-bg: var(--preset-canvas-bg);
-  --ui-canvas-bg-subtle: var(--preset-canvas-bg-subtle);
-
-  --ui-surface-container: var(--preset-surface-container);
-  --ui-surface-container-high: var(--preset-surface-container-high);
-  --ui-surface-container-highest: var(--preset-surface-container-highest);
-
-  --ui-text-primary: var(--theme-text-primary);
-  --ui-text-secondary: var(--theme-text-secondary);
-  --ui-text-muted: var(--theme-text-muted);
-  --ui-text-on-accent: var(--theme-text-on-accent);
-
-  --ui-accent-bg: var(--theme-accent-bg);
-  --ui-accent-bg-hover: var(--theme-accent-bg-hover);
-  --ui-accent-bg-muted: var(--theme-accent-bg-muted);
-  --ui-accent-text: var(--theme-text-on-accent);
-  --ui-accent-border: var(--theme-accent-border);
-
-  --ui-success-bg: var(--theme-success-bg);
-  --ui-success-border: var(--theme-success-border);
-  --ui-success-text: var(--theme-success-text);
-  --ui-warning-bg: var(--theme-warning-bg);
-  --ui-warning-border: var(--theme-warning-border);
-  --ui-warning-text: var(--theme-warning-text);
-  --ui-danger-bg: var(--theme-danger-bg);
-  --ui-danger-bg-emphasis: var(--theme-danger-bg-emphasis);
-  --ui-danger-border: var(--theme-danger-border);
-  --ui-danger-text: var(--theme-danger-text);
-  --ui-info-bg: var(--theme-info-bg);
-  --ui-info-border: var(--theme-info-border);
-  --ui-info-text: var(--theme-info-text);
-
-  --ui-control-radius-sm: var(--preset-control-radius-sm);
-  --ui-control-radius-md: var(--preset-control-radius-md);
-  --ui-control-radius-lg: var(--preset-control-radius-lg);
-  --ui-control-radius-xl: var(--preset-control-radius-xl);
-  --ui-control-radius-2xl: var(--preset-control-radius-2xl);
-  --ui-control-border-width: var(--preset-control-border-width);
-  --ui-control-focus-ring: var(--theme-control-focus-ring);
-  --ui-control-focus-ring-offset: var(--theme-control-focus-ring-offset);
-
-  --ui-font-heading: var(--font-heading);
-
-  /* Motion & density — shared */
-  --ui-motion-duration-fast: 0.15s;
-  --ui-motion-duration-default: 0.2s;
-  --ui-motion-ease-standard: var(--ease-standard);
-  --ui-density-compact: 0.875;
-  --ui-density-default: 1;
-  --ui-density-comfortable: 1.125;
-
-  /* Content layout — shared */
-  --content-min-width: 320px;
-  --content-preferred-width: 70vw;
-  --content-max-width: 960px;
-  --content-width: clamp(600px, 70vw, 960px);
-  --content-padding: 24px;
-  --header-top-margin: 64px;
-
-  /* App-specific derived variables — shared (reference --ui-* only) */
-  --publish-trigger-bg: var(--ui-surface-bg-subtle);
-  --publish-trigger-border: var(--ui-surface-border);
-  --publish-trigger-text: var(--ui-text-primary);
-  --publish-trigger-active-bg: var(--ui-accent-bg-muted);
-  --publish-popover-bg: var(--ui-surface-bg);
-  --publish-popover-border: var(--ui-surface-border);
-  --publish-popover-shadow: var(--ui-surface-shadow-strong);
-  --publish-section-bg: var(--ui-surface-bg-subtle);
-  --publish-section-border: var(--ui-surface-border);
-  --publish-fact-title: var(--ui-text-secondary);
-  --publish-fact-value: var(--color-n900);
-  --publish-muted-text: var(--ui-text-secondary);
-  --publish-warning-bg: var(--ui-warning-bg);
-  --publish-warning-border: var(--ui-warning-border);
-  --publish-warning-text: var(--ui-warning-text);
-  --publish-danger-bg: var(--ui-danger-bg);
-  --publish-danger-border: var(--ui-danger-border);
-  --publish-danger-text: var(--ui-danger-text);
-  --publish-success-bg: var(--ui-success-bg);
-  --publish-success-border: var(--ui-success-border);
-  --publish-success-text: var(--ui-success-text);
-  --publish-progress-track: var(--ui-surface-bg-inset);
-  --publish-progress-fill: var(--ui-accent-bg);
-
-  --feedback-neutral-bg: var(--ui-surface-bg-raised);
-  --feedback-neutral-border: var(--ui-surface-border);
-  --feedback-neutral-text: var(--ui-text-primary);
-  --feedback-neutral-icon: var(--ui-text-secondary);
-  --feedback-info-bg: var(--ui-info-bg);
-  --feedback-info-border: var(--ui-info-border);
-  --feedback-info-text: var(--ui-info-text);
-  --feedback-info-icon: var(--ui-info-text);
-  --feedback-success-bg: var(--ui-success-bg);
-  --feedback-success-border: var(--ui-success-border);
-  --feedback-success-text: var(--ui-success-text);
-  --feedback-success-icon: var(--ui-success-text);
-  --feedback-warning-bg: var(--ui-warning-bg);
-  --feedback-warning-border: var(--ui-warning-border);
-  --feedback-warning-text: var(--ui-warning-text);
-  --feedback-warning-icon: var(--ui-warning-text);
-  --feedback-danger-bg: var(--ui-danger-bg);
-  --feedback-danger-border: var(--ui-danger-border);
-  --feedback-danger-text: var(--ui-danger-text);
-  --feedback-danger-icon: var(--ui-danger-text);
-
-  --toast-shadow: var(--ui-surface-shadow-strong);
-
-  --skeleton-bg: linear-gradient(
-    180deg,
-    color-mix(in srgb, var(--ui-surface-bg-inset) 94%, white) 0%,
-    color-mix(in srgb, var(--ui-surface-bg-inset) 100%, var(--ui-surface-border)) 100%
-  );
-  --skeleton-bg-emphasis: linear-gradient(
-    180deg,
-    color-mix(in srgb, var(--ui-surface-bg-subtle) 78%, var(--color-highlight-soft)) 0%,
-    color-mix(in srgb, var(--ui-surface-bg-inset) 86%, var(--ui-surface-border)) 100%
-  );
-  --skeleton-sheen: linear-gradient(
-    100deg,
-    transparent 0%,
-    color-mix(in srgb, var(--color-highlight-sheen) 10%, transparent) 28%,
-    color-mix(in srgb, var(--color-highlight-sheen) 35%, transparent) 40%,
-    var(--color-highlight-sheen) 50%,
-    color-mix(in srgb, var(--color-highlight-sheen) 35%, transparent) 60%,
-    color-mix(in srgb, var(--color-highlight-sheen) 10%, transparent) 72%,
-    transparent 100%
-  );
-  --skeleton-top-highlight: var(--color-highlight-soft);
-
-  --workspace-transition-veil-bg: var(--color-overlay-soft);
-  --workspace-transition-stale-bg: color-mix(in srgb, var(--color-overlay-soft) 72%, transparent);
-
-  --tooltip-shadow: var(--ui-surface-shadow-strong);
-  --select-dropdown-shadow: var(--ui-surface-shadow-strong);
-  --theme-picker-shadow: var(--ui-surface-shadow-strong);
-  --drawer-panel-shadow: var(--ui-surface-shadow-strong);
-}

package/src/styles/ui/avatar.css

@@ -1,13 +0,0 @@
-.ui-avatar {
-  --avatar-bg: var(--ui-surface-bg-inset);
-  --avatar-text: var(--ui-text-secondary);
-  --avatar-border: transparent;
-  background: var(--avatar-bg);
-  color: var(--avatar-text);
-  border: 1px solid var(--avatar-border);
-}
-
-.ui-avatar[data-tone="subtle"] {
-  --avatar-bg: var(--ui-surface-bg-subtle);
-  --avatar-text: var(--ui-text-muted);
-}

package/src/styles/ui/badge.css

@@ -1,52 +0,0 @@
-.ui-badge {
-  --badge-bg: var(--ui-surface-bg-inset);
-  --badge-text: var(--ui-text-secondary);
-  --badge-border: transparent;
-  background: var(--badge-bg);
-  border-color: var(--badge-border);
-}
-
-.ui-badge[data-variant="outline"] {
-  --badge-bg: transparent;
-  --badge-border: var(--ui-surface-border);
-}
-
-.ui-badge[data-tone="info"] {
-  --badge-bg: var(--ui-info-bg);
-  --badge-text: var(--ui-info-text);
-  --badge-border: var(--ui-info-border);
-}
-
-.ui-badge[data-tone="info"][data-variant="outline"] {
-  --badge-bg: transparent;
-}
-
-.ui-badge[data-tone="success"] {
-  --badge-bg: var(--ui-success-bg);
-  --badge-text: var(--ui-success-text);
-  --badge-border: var(--ui-success-border);
-}
-
-.ui-badge[data-tone="success"][data-variant="outline"] {
-  --badge-bg: transparent;
-}
-
-.ui-badge[data-tone="warning"] {
-  --badge-bg: var(--ui-warning-bg);
-  --badge-text: var(--ui-warning-text);
-  --badge-border: var(--ui-warning-border);
-}
-
-.ui-badge[data-tone="warning"][data-variant="outline"] {
-  --badge-bg: transparent;
-}
-
-.ui-badge[data-tone="danger"] {
-  --badge-bg: var(--ui-danger-bg);
-  --badge-text: var(--ui-danger-text);
-  --badge-border: var(--ui-danger-border);
-}
-
-.ui-badge[data-tone="danger"][data-variant="outline"] {
-  --badge-bg: transparent;
-}

package/src/styles/ui/button.css

@@ -1,49 +0,0 @@
-.ui-button {
-  --button-bg: var(--ui-surface-bg);
-  --button-bg-hover: var(--ui-surface-bg-inset);
-  --button-bg-active: var(--ui-surface-bg-subtle);
-  --button-text: var(--ui-text-primary);
-  --button-border: var(--ui-surface-border);
-  --button-ring: var(--ui-control-focus-ring);
-  --button-disabled-opacity: 0.5;
-  background: var(--button-bg);
-  color: var(--button-text);
-  border-color: var(--button-border);
-}
-
-.ui-button:hover {
-  background: var(--button-bg-hover);
-}
-
-.ui-button:active {
-  background: var(--button-bg-active);
-}
-
-.ui-button:focus-visible {
-  --tw-ring-color: var(--button-ring);
-}
-
-.ui-button[data-variant="primary"] {
-  --button-bg: var(--ui-accent-bg);
-  --button-bg-hover: var(--ui-accent-bg-hover);
-  --button-bg-active: color-mix(in srgb, var(--ui-accent-bg-hover) 88%, black);
-  --button-text: var(--ui-accent-text);
-  --button-border: transparent;
-}
-
-.ui-button[data-variant="ghost"] {
-  --button-bg: transparent;
-  --button-bg-hover: var(--ui-surface-bg-inset);
-  --button-bg-active: var(--ui-surface-bg-subtle);
-  --button-text: var(--ui-text-secondary);
-  --button-border: transparent;
-}
-
-.ui-button[data-variant="danger"] {
-  --button-bg: var(--ui-danger-bg);
-  --button-bg-hover: color-mix(in srgb, var(--ui-danger-bg) 92%, var(--ui-danger-border));
-  --button-bg-active: color-mix(in srgb, var(--ui-danger-bg) 84%, var(--ui-danger-border));
-  --button-text: var(--ui-danger-text);
-  --button-border: var(--ui-danger-border);
-  --button-ring: var(--ui-danger-border);
-}