@marwes-ui/presets 1.0.0 → 1.0.1

package/README.md

@@ -1,15 +1,15 @@
 <div align="center">
 
-<img alt="Marwes Design System" src="https://raw.githubusercontent.com/niklas-westman/marwes/main/.github/assets/banner-light.png" width="100%">
+<img alt="Marwes Design System" src="https://raw.githubusercontent.com/niklas-westman/marwes/main/.github/assets/banner-light.png" width="100%" style="border-radius: 40px;">
 
 <br>
 <br>
 
 # Marwes Design System - Presets
 
-**Static first edition CSS and preset theme exports for Marwes React and Vue apps.**
+**Static default CSS and preset theme exports for Marwes React and Vue apps.**
 
-Static `.mw-*` CSS • CSS variables • firstEdition visuals • No runtime CSS-in-JS
+Static `.mw-*` CSS • CSS variables • Default Marwes visuals • No runtime CSS-in-JS
 
 [Documentation](https://github.com/niklas-westman/marwes/tree/main/docs) • [Storybook](https://d3hobet9plpuvm.cloudfront.net/storybook-react/latest/) • [GitHub](https://github.com/niklas-westman/marwes)
 
@@ -19,11 +19,11 @@ Static `.mw-*` CSS • CSS variables • firstEdition visuals • No runtime CSS
 
 ## Why Use It
 
-Most apps install `@marwes-ui/react` or `@marwes-ui/vue`, and those adapters load the first edition preset automatically. Install presets directly when you need the standalone CSS path, the explicit `firstEditionTheme` object, or preset CSS in a custom adapter.
+Most apps install `@marwes-ui/react` or `@marwes-ui/vue`, and those adapters load the default preset automatically. Install presets directly when you need the standalone CSS path, the explicit `firstEditionTheme` object, or preset CSS in a custom adapter.
 
 Presets gives Marwes its default visual layer:
 
-- first edition component CSS
+- default component CSS
 - theme-variable driven colors, radius, focus, typography, density, and state styling
 - stable `.mw-*` class styling for every shipped component family
 - no CSS-in-JS runtime
@@ -38,7 +38,7 @@ Presets are the static visual layer, not the normal app entry point.
 | `@marwes-ui/react` | You are building a React app. |
 | `@marwes-ui/vue` | You are building a Vue app. |
 | `@marwes-ui/core` | You need framework-agnostic recipes, theme utilities, accessibility contracts, or adapter/tooling APIs. |
-| `@marwes-ui/presets` | You need standalone first edition CSS or preset theme exports. |
+| `@marwes-ui/presets` | You need standalone preset CSS or preset theme exports. |
 
 This package gives humans and AI agents a predictable CSS contract: `.mw-*` classes consume `--mw-*` variables generated by the provider, while adapters stay thin.
 
@@ -53,12 +53,12 @@ pnpm add @marwes-ui/presets
 React and Vue apps normally import only the adapter:
 
 ```tsx
-import { Button, MarwesProvider } from "@marwes-ui/react"
+import { Button, ButtonVariant, MarwesProvider } from "@marwes-ui/react"
 
 export function App() {
   return (
     <MarwesProvider>
-      <Button variant="primary">Save</Button>
+      <Button variant={ButtonVariant.primary}>Save</Button>
     </MarwesProvider>
   )
 }
@@ -74,7 +74,7 @@ import "@marwes-ui/presets/firstEdition/styles.css"
 
 ## Available Styled Families
 
-The first edition preset styles these Marwes families today:
+The default preset styles these Marwes families today:
 
 - Accordion and accordion fields
 - Avatar and avatar groups
@@ -98,10 +98,10 @@ The first edition preset styles these Marwes families today:
 
 ## Custom Theme With Preset CSS
 
-Preset CSS consumes provider-generated `--mw-*` variables. Map a graphical profile into `ThemeInput`, pass it to `MarwesProvider`, and the preset follows it.
+Preset CSS consumes provider-generated `--mw-*` variables. Marwes is designed to look great from the beginning: map an existing design library or graphical profile into a partial `ThemeInput`, override only the tokens your product owns, pass it to `MarwesProvider`, and the preset follows it.
 
 ```tsx
-import { MarwesProvider, mwAvailableFonts } from "@marwes-ui/react"
+import { MarwesProvider, mwAvailableFonts, type ThemeInput } from "@marwes-ui/react"
 
 const brandTheme = {
   color: {
@@ -125,16 +125,87 @@ const brandTheme = {
     radius: 10,
     density: "comfortable",
   },
-}
+} satisfies ThemeInput
 
 <MarwesProvider theme={brandTheme}>
   <App />
 </MarwesProvider>
 ```
 
+## Light And Dark Mode
+
+The preset CSS already contains the light and dark visual rules. In React and Vue apps, use `ThemeMode.light` and `ThemeMode.dark` instead of string literals, then let `MarwesProvider` own the active mode and toggle it with the adapter hook:
+
+```tsx
+import { Button, ButtonVariant, MarwesProvider, ThemeMode, useThemeMode } from "@marwes-ui/react"
+
+function ThemeToggle() {
+  const { mode, toggleMode } = useThemeMode()
+
+  return (
+    <Button variant={ButtonVariant.secondary} onClick={toggleMode}>
+      Use {mode === ThemeMode.dark ? ThemeMode.light : ThemeMode.dark} mode
+    </Button>
+  )
+}
+
+export function App() {
+  return (
+    <MarwesProvider defaultMode={ThemeMode.light}>
+      <ThemeToggle />
+      <AppShell />
+    </MarwesProvider>
+  )
+}
+```
+
+When the mode changes, the provider updates the preset's `--mw-*` variables and root class. Preset selectors such as `.mw-theme--dark .mw-btn` then pick up the correct dark-mode component states without any extra CSS in the app.
+
+You do not need a `themeByMode` map for the normal toggle. With no `theme` prop, Marwes uses its default light and dark palettes. With shared brand overrides, pass the same partial `theme` object and the provider still swaps every omitted token by mode.
+
+Use a `themeByMode` map only when your product wants different brand overrides in light and dark mode, such as a different primary color or surface color per mode:
+
+```tsx
+import { useState } from "react"
+import {
+  Button,
+  ButtonVariant,
+  MarwesProvider,
+  ThemeMode,
+  type ThemeInput,
+  useThemeMode,
+} from "@marwes-ui/react"
+
+const themeByMode = {
+  [ThemeMode.light]: { color: { primary: "#2457FF", background: "#F8FAFC", text: "#111827" } },
+  [ThemeMode.dark]: { color: { primary: "#8BA2FF", background: "#0B1020", text: "#F8FAFC" } },
+} satisfies Record<ThemeMode, ThemeInput>
+
+function ThemeToggle() {
+  const { mode, toggleMode } = useThemeMode()
+
+  return (
+    <Button variant={ButtonVariant.secondary} onClick={toggleMode}>
+      Use {mode === ThemeMode.dark ? ThemeMode.light : ThemeMode.dark} mode
+    </Button>
+  )
+}
+
+export function App() {
+  const [mode, setMode] = useState<ThemeMode>(ThemeMode.light)
+
+  return (
+    <MarwesProvider mode={mode} theme={themeByMode[mode]} onModeChange={setMode}>
+      <ThemeToggle />
+      <AppShell />
+    </MarwesProvider>
+  )
+}
+```
+
 ## firstEditionTheme
 
-`firstEditionTheme` remains exported for explicit or advanced use. React and Vue providers already use the same first edition baseline by default, so normal app code does not need to pass it.
+`firstEditionTheme` remains exported for explicit or advanced use. React and Vue providers already use the same baseline by default, so normal app code does not need to pass it.
 
 ```ts
 import { firstEditionTheme } from "@marwes-ui/presets"
@@ -185,13 +256,13 @@ const localOverride = {
 }
 ```
 
-These helpers exist so preset CSS, adapter components, and custom application styles all follow the same provider-generated variables. That enables custom layouts and third-party styling systems to stay visually aligned with the first edition preset without depending on React, Vue, styled-components, or Emotion.
+These helpers exist so preset CSS, adapter components, and custom application styles all follow the same provider-generated variables. That enables custom layouts and third-party styling systems to stay visually aligned with the default preset without depending on React, Vue, styled-components, or Emotion.
 
 ## Accessible Styling Contract
 
 Presets make the semantic contract visible without replacing it. Core and the adapters own roles, labels, state, and ARIA wiring; preset CSS owns the visual states that users need to perceive.
 
-That means the first edition CSS includes styling for:
+That means the default CSS includes styling for:
 
 - visible focus states on interactive controls
 - disabled, invalid, selected, expanded, checked, and busy states
@@ -203,7 +274,7 @@ Example: an invalid input field is accessible because the adapter applies `aria-
 ## Package Boundaries
 
 - `@marwes-ui/core` owns recipes, semantic metadata, and theme resolution.
-- `@marwes-ui/presets` owns static first edition CSS.
+- `@marwes-ui/presets` owns static default CSS.
 - `@marwes-ui/react` and `@marwes-ui/vue` load this preset by default and render components.
 
 ## Scripts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marwes-ui/presets",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "publishConfig": {
     "access": "public"
   },
@@ -30,7 +30,7 @@
   ],
   "dependencies": {
     "@fontsource/instrument-sans": "5.2.8",
-    "@marwes-ui/core": "1.0.0"
+    "@marwes-ui/core": "1.0.1"
   },
   "devDependencies": {
     "rimraf": "6.1.2",

package/src/firstEdition/toast.css

@@ -245,8 +245,8 @@
   --mw-toast-surface: var(--mw-color-surface-elevated);
   --mw-toast-border: var(--mw-color-primary-base);
   --mw-toast-icon: var(--mw-color-primary-base);
-  --mw-toast-text: var(--mw-color-primary-base);
-  --mw-toast-action: var(--mw-color-primary-base);
+  --mw-toast-text: var(--mw-color-text);
+  --mw-toast-action: var(--mw-color-text);
 }
 
 .mw-theme--dark .mw-toast--outline[data-intent="neutral"] {
@@ -259,30 +259,30 @@
 .mw-theme--dark .mw-toast--outline[data-intent="success"] {
   --mw-toast-border: var(--mw-color-success-base);
   --mw-toast-icon: var(--mw-color-success-base);
-  --mw-toast-text: var(--mw-color-success-base);
-  --mw-toast-action: var(--mw-color-success-base);
+  --mw-toast-text: var(--mw-color-text);
+  --mw-toast-action: var(--mw-color-text);
 }
 
 .mw-theme--dark .mw-toast--outline[data-intent="warning"] {
   --mw-toast-border: var(--mw-color-warning-base);
   --mw-toast-icon: var(--mw-color-warning-base);
-  --mw-toast-text: var(--mw-color-warning-base);
-  --mw-toast-action: var(--mw-color-warning-base);
+  --mw-toast-text: var(--mw-color-text);
+  --mw-toast-action: var(--mw-color-text);
 }
 
 .mw-theme--dark .mw-toast--outline[data-intent="error"] {
   --mw-toast-border: var(--mw-color-danger-base);
   --mw-toast-icon: var(--mw-color-danger-base);
-  --mw-toast-text: var(--mw-color-danger-base);
-  --mw-toast-action: var(--mw-color-danger-base);
+  --mw-toast-text: var(--mw-color-text);
+  --mw-toast-action: var(--mw-color-text);
 }
 
 .mw-theme--dark .mw-toast--rich {
   --mw-toast-surface: color-mix(in srgb, var(--mw-color-primary-base) 18%, var(--mw-color-surface));
   --mw-toast-border: var(--mw-color-primary-base);
   --mw-toast-icon: var(--mw-color-primary-base);
-  --mw-toast-text: var(--mw-color-primary-base);
-  --mw-toast-action: var(--mw-color-primary-base);
+  --mw-toast-text: var(--mw-color-text);
+  --mw-toast-action: var(--mw-color-text);
 }
 
 .mw-theme--dark .mw-toast--rich[data-intent="neutral"] {
@@ -297,22 +297,22 @@
   --mw-toast-surface: color-mix(in srgb, var(--mw-color-success-base) 18%, var(--mw-color-surface));
   --mw-toast-border: var(--mw-color-success-base);
   --mw-toast-icon: var(--mw-color-success-base);
-  --mw-toast-text: var(--mw-color-success-base);
-  --mw-toast-action: var(--mw-color-success-base);
+  --mw-toast-text: var(--mw-color-text);
+  --mw-toast-action: var(--mw-color-text);
 }
 
 .mw-theme--dark .mw-toast--rich[data-intent="warning"] {
   --mw-toast-surface: color-mix(in srgb, var(--mw-color-warning-base) 20%, var(--mw-color-surface));
   --mw-toast-border: var(--mw-color-warning-base);
   --mw-toast-icon: var(--mw-color-warning-base);
-  --mw-toast-text: var(--mw-color-warning-base);
-  --mw-toast-action: var(--mw-color-warning-base);
+  --mw-toast-text: var(--mw-color-text);
+  --mw-toast-action: var(--mw-color-text);
 }
 
 .mw-theme--dark .mw-toast--rich[data-intent="error"] {
   --mw-toast-surface: color-mix(in srgb, var(--mw-color-danger-base) 18%, var(--mw-color-surface));
   --mw-toast-border: var(--mw-color-danger-base);
   --mw-toast-icon: var(--mw-color-danger-base);
-  --mw-toast-text: var(--mw-color-danger-base);
-  --mw-toast-action: var(--mw-color-danger-base);
+  --mw-toast-text: var(--mw-color-text);
+  --mw-toast-action: var(--mw-color-text);
 }