@marwes-ui/presets 0.0.4 → 1.0.1

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 Niklas Westman
+Copyright (c) 2026 Niklas Westman, Martino Ognissanti and contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,68 +1,292 @@
-# @marwes-ui/presets
+<div align="center">
 
-Design presets for Marwes. Presets define theme defaults and static CSS for component classnames.
+<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;">
 
-## Responsibilities
-- Provide preset objects (currently `firstEdition`).
-- Provide static CSS for `.mw-*` classnames.
-- Map semantic theme values to visual styles with CSS variables.
+<br>
+<br>
 
-## Non-Responsibilities
-- No component logic.
-- No framework rendering.
-- No runtime CSS-in-JS.
+# Marwes Design System - Presets
+
+**Static default CSS and preset theme exports for Marwes React and Vue apps.**
+
+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)
+
+</div>
+
+---
+
+## Why Use It
+
+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:
+
+- 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
+- CSS that follows the same core recipes used by React and Vue
+
+## Package Map
+
+Presets are the static visual layer, not the normal app entry point.
+
+| Package | Use it when |
+| --- | --- |
+| `@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 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.
+
+## Install
+
+```bash
+pnpm add @marwes-ui/presets
+```
+
+## Normal App Setup
+
+React and Vue apps normally import only the adapter:
 
-## Install and Use
 ```tsx
-import { MarwesProvider } from "@marwes-ui/react";
-import { firstEdition } from "@marwes-ui/presets";
-import "@marwes-ui/presets/firstEdition/styles.css";
+import { Button, ButtonVariant, MarwesProvider } from "@marwes-ui/react"
 
-<MarwesProvider preset={firstEdition}>
+export function App() {
+  return (
+    <MarwesProvider>
+      <Button variant={ButtonVariant.primary}>Save</Button>
+    </MarwesProvider>
+  )
+}
+```
+
+## Direct CSS Import
+
+Use the direct CSS path for custom adapters, static prototypes, or tooling that needs the preset without the React/Vue entry.
+
+```ts
+import "@marwes-ui/presets/firstEdition/styles.css"
+```
+
+## Available Styled Families
+
+The default preset styles these Marwes families today:
+
+- Accordion and accordion fields
+- Avatar and avatar groups
+- Badge and contextual badge variants
+- Button and purpose button variants
+- Card variants
+- Checkbox, checkbox fields, and checkbox groups
+- Dialog and dialog modal
+- Divider
+- Icon
+- Input, textarea, select, rich text, OTP, and field variants
+- Paragraph and heading typography
+- Radio and radio groups
+- Slider and slider fields
+- Spacing and spacer primitives
+- Spinner variants
+- Switch and switch fields
+- Tab groups and panels
+- Toast and toast container
+- Tooltip and tooltip groups
+
+## Custom Theme With Preset CSS
+
+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, type ThemeInput } from "@marwes-ui/react"
+
+const brandTheme = {
+  color: {
+    primary: "#2457FF",
+    danger: "#D90429",
+    success: "#15803D",
+    warning: "#D97706",
+    background: "#F8FAFC",
+    surface: "#FFFFFF",
+    surfaceElevated: "#FFFFFF",
+    text: "#111827",
+    textMuted: "#4B5563",
+    border: "#D1D5DB",
+    focus: "#2457FF",
+  },
+  font: {
+    primary: mwAvailableFonts.Poppins,
+    secondary: mwAvailableFonts.Lora,
+  },
+  ui: {
+    radius: 10,
+    density: "comfortable",
+  },
+} satisfies ThemeInput
+
+<MarwesProvider theme={brandTheme}>
   <App />
-</MarwesProvider>;
+</MarwesProvider>
 ```
 
-## firstEdition
-Preset definition:
-- `src/firstEdition/index.ts`
+## Light And Dark Mode
 
-Main stylesheet:
-- `src/firstEdition/styles.css`
+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:
 
-Imported component styles:
-- `button.css`
-- `input.css`
-- `checkbox.css`
-- `icon.css`
-- `typography.css`
-- `molecules/checkbox-field.css`
+```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 baseline by default, so normal app code does not need to pass it.
+
+```ts
+import { firstEditionTheme } from "@marwes-ui/presets"
+```
+
+## CSS Contract
 
-## Contract with Core
 Core recipes emit:
-- stable classes such as `mw-btn`, `mw-input`, `mw-checkbox`
-- CSS vars such as `--mw-primary`, `--mw-radius`
+- stable classes such as `.mw-btn`, `.mw-input`, `.mw-checkbox`, `.mw-card`
+- component-scoped vars where needed
+- semantic theme variables such as `--mw-color-primary-base`, `--mw-color-text`, and `--mw-ui-radius`
+- fixed spacing variables such as `--mw-spacing-sp-24`
 
-Presets must style those classes/vars consistently and should not require adapter-specific hacks.
+Preset CSS must style those classes and variables consistently without adapter-specific hacks.
 
-## CSS Conventions
-- Keep prefix `--mw-*` for variables.
-- Keep classname prefix `.mw-*`.
-- Prefer semantic vars from core (`--mw-primary`, `--mw-text`, `--mw-surface`) over hardcoded colors.
-- Keep focus-visible and disabled states explicit in CSS.
+Plain CSS can use those variables anywhere under `MarwesProvider`:
 
-## Figma Mapping
-When syncing design changes from Figma, follow:
-- `../../docs/FIGMA_TO_MARWES.md`
+```css
+.project-panel {
+  padding: var(--mw-spacing-sp-24);
+  color: var(--mw-color-text);
+  background: var(--mw-color-surface);
+  border: 1px solid var(--mw-color-border);
+  border-radius: var(--mw-ui-radius);
+}
+```
 
-This ensures token names and state variants map predictably into preset CSS.
+JavaScript styling layers should import token helpers from `@marwes-ui/core`, `@marwes-ui/react`, or `@marwes-ui/vue` instead of duplicating `var(...)` strings.
+
+Use the helper that matches the job:
+
+- `mwThemeVars` returns CSS `var(...)` references for app-owned CSS-in-JS, style objects, vanilla-extract, and config files.
+- `mwThemeVarNames` returns raw custom property names for assigning overrides or inspecting the preset CSS contract.
+- `mwVar()` wraps custom or advanced `--mw-*` names with optional fallback support.
+- `mwStyledTheme` mirrors `mwThemeVars` as a plain theme object for styled-components and Emotion integrations.
+
+```ts
+import { mwThemeVarNames, mwThemeVars, mwVar } from "@marwes-ui/core"
+
+const panelStyle = {
+  padding: mwThemeVars.spacing.sp24,
+  color: mwThemeVars.color.text,
+  outlineColor: mwVar("--mw-color-focus", "#2457FF"),
+}
+
+const localOverride = {
+  [mwThemeVarNames.color.focus]: "#FF00AA",
+}
+```
+
+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 default CSS includes styling for:
+
+- visible focus states on interactive controls
+- disabled, invalid, selected, expanded, checked, and busy states
+- theme-driven text and background colors with contrast-aware defaults
+- component classes that match the same recipes used by React and Vue
+
+Example: an invalid input field is accessible because the adapter applies `aria-invalid` and `aria-describedby`; the preset then makes that same invalid state visually obvious through `.mw-input-field--invalid` and related input classes.
+
+## Package Boundaries
+
+- `@marwes-ui/core` owns recipes, semantic metadata, and theme resolution.
+- `@marwes-ui/presets` owns static default CSS.
+- `@marwes-ui/react` and `@marwes-ui/vue` load this preset by default and render components.
 
 ## Scripts
-- `pnpm --filter @marwes-ui/presets dev`
-- `pnpm --filter @marwes-ui/presets build`
-- `pnpm --filter @marwes-ui/presets typecheck`
+
+```bash
+pnpm --filter @marwes-ui/presets build
+pnpm --filter @marwes-ui/presets typecheck
+pnpm --filter @marwes-ui/presets test
+```
 
 ## Related Docs
-- `../../docs/PROJECT.md`
-- `../../docs/ARCHITECTURE.md`
-- `../../docs/ENGINEERING.md`
+
+- [Docs index](https://github.com/niklas-westman/marwes/tree/main/docs)
+- [Architecture](https://github.com/niklas-westman/marwes/blob/main/docs/reference/architecture.md)
+- [Figma to Marwes](https://github.com/niklas-westman/marwes/blob/main/docs/guides/figma-to-marwes.md)

package/dist/chunk-2JNIKK66.js

@@ -0,0 +1,21 @@
+import '@fontsource/instrument-sans/400.css';
+import '@fontsource/instrument-sans/500.css';
+import '@fontsource/instrument-sans/600.css';
+
+// src/firstEdition/index.ts
+var firstEditionTheme = {
+  color: {
+    primary: {
+      base: "#2F31FC",
+      label: "#FFFFFF",
+      labelDisabled: "rgba(255,255,255,0.5)"
+    },
+    success: "#00875A"
+  },
+  font: { primary: "'Instrument Sans', Inter, system-ui, sans-serif" },
+  ui: { radius: 4, density: "comfortable" }
+};
+
+export { firstEditionTheme };
+//# sourceMappingURL=chunk-2JNIKK66.js.map
+//# sourceMappingURL=chunk-2JNIKK66.js.map

package/dist/chunk-2JNIKK66.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/firstEdition/index.ts"],"names":[],"mappings":";;;;;AAOO,IAAM,iBAAA,GAAgC;AAAA,EAC3C,KAAA,EAAO;AAAA,IACL,OAAA,EAAS;AAAA,MACP,IAAA,EAAM,SAAA;AAAA,MACN,KAAA,EAAO,SAAA;AAAA,MACP,aAAA,EAAe;AAAA,KACjB;AAAA,IACA,OAAA,EAAS;AAAA,GACX;AAAA,EACA,IAAA,EAAM,EAAE,OAAA,EAAS,iDAAA,EAAkD;AAAA,EACnE,EAAA,EAAI,EAAE,MAAA,EAAQ,CAAA,EAAG,SAAS,aAAA;AAC5B","file":"chunk-2JNIKK66.js","sourcesContent":["import type { ThemeInput } from \"@marwes-ui/core\"\nimport \"@fontsource/instrument-sans/400.css\"\nimport \"@fontsource/instrument-sans/500.css\"\nimport \"@fontsource/instrument-sans/600.css\"\n\n// Explicit ThemeInput for consumers that still want to import the preset object.\n// MarwesProvider uses the same first edition baseline when no theme is provided.\nexport const firstEditionTheme: ThemeInput = {\n  color: {\n    primary: {\n      base: \"#2F31FC\",\n      label: \"#FFFFFF\",\n      labelDisabled: \"rgba(255,255,255,0.5)\",\n    },\n    success: \"#00875A\",\n  },\n  font: { primary: \"'Instrument Sans', Inter, system-ui, sans-serif\" },\n  ui: { radius: 4, density: \"comfortable\" },\n}\n"]}

package/dist/firstEdition/index.d.ts

@@ -1,5 +1,5 @@
-import { Preset } from '@marwes-ui/core';
+import { ThemeInput } from '@marwes-ui/core';
 
-declare const firstEdition: Preset;
+declare const firstEditionTheme: ThemeInput;
 
-export { firstEdition };
+export { firstEditionTheme };

package/dist/firstEdition/index.js

@@ -1,3 +1,3 @@
-export { firstEdition } from '../chunk-UJIVT75P.js';
+export { firstEditionTheme } from '../chunk-2JNIKK66.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export { firstEdition } from './firstEdition/index.js';
-export { Preset } from '@marwes-ui/core';
+export { firstEditionTheme } from './firstEdition/index.js';
+export { ThemeInput } from '@marwes-ui/core';

package/dist/index.js

@@ -1,3 +1,3 @@
-export { firstEdition } from './chunk-UJIVT75P.js';
+export { firstEditionTheme } from './chunk-2JNIKK66.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@marwes-ui/presets",
-  "version": "0.0.4",
+  "version": "1.0.1",
   "publishConfig": {
     "access": "public"
   },
+  "license": "MIT",
   "private": false,
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css",
+    "**/*.css"
+  ],
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -22,22 +26,24 @@
   },
   "files": [
     "dist",
-    "src/firstEdition/styles.css"
+    "src/firstEdition"
   ],
   "dependencies": {
-    "@fontsource/instrument-sans": "^5.2.8",
-    "@marwes-ui/core": "0.0.4"
+    "@fontsource/instrument-sans": "5.2.8",
+    "@marwes-ui/core": "1.0.1"
   },
   "devDependencies": {
-    "rimraf": "^6.0.0",
-    "tsup": "^8.0.0",
-    "typescript": "^5.4.0"
+    "rimraf": "6.1.2",
+    "tsup": "8.5.1",
+    "typescript": "5.9.3",
+    "vitest": "4.0.18"
   },
   "scripts": {
     "dev": "tsup --watch",
     "build": "tsup",
     "typecheck": "tsc -p tsconfig.json --noEmit",
-    "test": "echo \"No tests in @marwes-ui/presets\"",
+    "test:typecheck": "tsc -p tsconfig.test.json --noEmit",
+    "test": "vitest run",
     "clean": "rimraf dist",
     "lint": "biome lint .",
     "format": "biome format --write ."

package/src/firstEdition/accordion.css

@@ -0,0 +1,140 @@
+/*
+ * Accordion Component Styles
+ * Validated against the latest live Figma sync:
+ * - .figma/marwes/components/accordion.json
+ * - .figma/marwes/pages/-accordion/-accordion_1364-11755.json
+ * - .figma/marwes/pages/-accordion/-accordion-dark_2276-47132.json
+ *
+ * Light state colors:
+ *   default surface  #ffffff
+ *   hover surface    #f3f4f6
+ *   pressed surface  #e5e7eb
+ *   border           #e5e7eb
+ *   focus border     #2f31fc
+ *   title            #141414
+ *   icon/content     #595959
+ *   disabled text    #737373
+ *
+ * Dark state colors:
+ *   default surface  #2e2e2e
+ *   hover surface    #595959
+ *   pressed surface  #737373
+ *   border           #474747
+ *   focus border     #5859fc
+ *   title            #f9fafb
+ *   icon/content     #a3a3a3
+ *   disabled text    #595959
+ */
+
+.mw-accordion {
+  --mw-accordion-title: var(--mw-color-text);
+  --mw-accordion-icon: var(--mw-color-text-muted);
+  --mw-accordion-content: var(--mw-color-text-muted);
+  --mw-accordion-surface: var(--mw-color-surface-elevated);
+  --mw-accordion-surface-hover: var(--mw-color-surface-subtle);
+  --mw-accordion-surface-pressed: var(--mw-color-border-subtle);
+  --mw-accordion-border: var(--mw-color-border-subtle);
+  --mw-accordion-focus-border: var(--mw-color-focus, #2f31fc);
+  --mw-accordion-title-disabled: var(--mw-color-text-disabled);
+  --mw-accordion-icon-disabled: var(--mw-color-text-disabled);
+  --mw-accordion-content-disabled: var(--mw-color-text-disabled);
+
+  width: 100%;
+  background: var(--mw-accordion-surface);
+  border: 1px solid var(--mw-accordion-border);
+  border-radius: var(--mw-ui-radius, 6px);
+  overflow: hidden;
+  transition: background-color 150ms ease, border-color 150ms ease;
+}
+
+.mw-accordion__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 16px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  gap: 8px;
+}
+
+.mw-accordion__title {
+  flex: 1;
+  font-family: var(--mw-font-primary, inherit);
+  font-size: var(--mw-density-font-size, 14px);
+  font-weight: 500;
+  line-height: 16px;
+  color: var(--mw-accordion-title);
+}
+
+.mw-accordion__icon {
+  display: inline-block;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  background-color: var(--mw-accordion-icon);
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  -webkit-mask-size: contain;
+  transition: transform 200ms ease;
+}
+
+.mw-accordion--open .mw-accordion__icon {
+  transform: rotate(180deg);
+}
+
+.mw-accordion:not(.mw-accordion--disabled):hover {
+  background: var(--mw-accordion-surface-hover);
+}
+
+.mw-accordion:not(.mw-accordion--disabled) .mw-accordion__trigger:active,
+.mw-accordion:not(.mw-accordion--disabled) .mw-accordion__trigger:active + .mw-accordion__panel {
+  background: var(--mw-accordion-surface-pressed);
+}
+
+.mw-accordion:focus-within {
+  border-color: var(--mw-accordion-focus-border);
+}
+
+.mw-accordion__trigger:focus-visible {
+  outline: none;
+}
+
+.mw-accordion__content {
+  padding: 0 16px 16px;
+  font-family: var(--mw-font-primary, inherit);
+  font-size: var(--mw-density-font-size, 14px);
+  line-height: 20px;
+  color: var(--mw-accordion-content);
+}
+
+.mw-accordion--disabled {
+  --mw-accordion-title: var(--mw-accordion-title-disabled);
+  --mw-accordion-icon: var(--mw-accordion-icon-disabled);
+  --mw-accordion-content: var(--mw-accordion-content-disabled);
+}
+
+.mw-accordion--disabled .mw-accordion__trigger {
+  cursor: not-allowed;
+}
+
+.mw-theme--dark .mw-accordion {
+  --mw-accordion-title: var(--mw-color-text);
+  --mw-accordion-icon: var(--mw-color-text-muted);
+  --mw-accordion-content: var(--mw-color-text-muted);
+  --mw-accordion-surface: var(--mw-color-surface-elevated);
+  --mw-accordion-surface-hover: var(--mw-color-surface-subtle);
+  --mw-accordion-surface-pressed: var(--mw-color-border);
+  --mw-accordion-border: var(--mw-color-border-subtle);
+  --mw-accordion-focus-border: var(--mw-color-focus, #5859fc);
+  --mw-accordion-title-disabled: var(--mw-color-text-disabled);
+  --mw-accordion-icon-disabled: var(--mw-color-text-disabled);
+  --mw-accordion-content-disabled: var(--mw-color-text-disabled);
+}