@misoto22/kioku-ui-theme-kioku 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Misoto22
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,50 @@
+# Kioku theme pack
+
+`@misoto22/kioku-ui-theme-kioku` provides the Washi, Muji, and Sumi visual
+identities as an external theme collection for `@misoto22/kioku-ui`.
+
+```tsx
+import {ThemeProvider} from '@misoto22/kioku-ui/theme';
+import {kiokuThemes, washiTheme} from '@misoto22/kioku-ui-theme-kioku';
+import '@misoto22/kioku-ui-theme-kioku/theme.css';
+
+export function App({children}: {children: React.ReactNode}) {
+  return (
+    <ThemeProvider defaultThemeId={washiTheme.id} themes={kiokuThemes}>
+      {children}
+    </ThemeProvider>
+  );
+}
+```
+
+The host owns the selected theme and any persistence adapter. Palette values use
+CSS `light-dark()`, so they follow the host's inherited `color-scheme`. The
+themes share the package's semantic spacing, radius, and control-size scales.
+The stylesheet never targets `:root`, `html`, or `body`.
+
+The three skins carry Kioku Console's own palettes, geometry, and type scale:
+warm paper rather than white, one 3px corner for every element including
+controls, a hairline rule instead of a drop shadow, and the console's compact
+spacing. Where a role that this package holds to WCAG AA missed the threshold on
+one of its backgrounds, it keeps the console's hue and loses only lightness.
+
+Each skin fulfills the spacing roles at both densities, so a reader selecting
+`standard` widens the same rhythm rather than switching visual identity:
+
+```tsx
+<ThemeProvider
+  defaultDensity="standard"
+  defaultThemeId={washiTheme.id}
+  themes={kiokuThemes}
+>
+```
+
+`typography.fontFeatureSettings` asks for `'palt' 1`, the proportional spacing
+the Japanese faces these skins are set in are cut for; a theme whose type is
+Latin says `normal` instead.
+
+`texture.grain` is the paper speckle's own colour. Washi and Muji tint it; Sumi
+sets it transparent, which is how a skin declines the texture.
+
+The initial theme release supports core `>=0.0.0 <0.2.0`. A later pre-1 core
+minor must be compatibility-reviewed before this peer range is widened.

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { kiokuThemes, mujiTheme, sumiTheme, washiTheme } from './themes.js';

package/dist/index.js

@@ -0,0 +1 @@
+export { kiokuThemes, mujiTheme, sumiTheme, washiTheme } from './themes.js';

package/dist/theme.css

@@ -0,0 +1,701 @@
+/* Ready-to-use theme CSS. Every selector targets a ThemeProvider data-theme root. */
+[data-theme='washi'],
+[data-theme='muji'],
+[data-theme='sumi'] {
+  --kioku-ui-color-canvas: var(--kioku-theme-color-canvas);
+  --kioku-ui-color-surface: var(--kioku-theme-color-surface);
+  --kioku-ui-color-surface-raised: var(--kioku-theme-color-surface-raised);
+  --kioku-ui-color-surface-muted: var(--kioku-theme-color-surface-muted);
+  --kioku-ui-color-text: var(--kioku-theme-color-text);
+  --kioku-ui-color-text-secondary: var(--kioku-theme-color-text-secondary);
+  --kioku-ui-color-text-muted: var(--kioku-theme-color-text-muted);
+  --kioku-ui-color-text-on-accent: var(--kioku-theme-color-text-on-accent);
+  --kioku-ui-color-accent: var(--kioku-theme-color-accent);
+  --kioku-ui-color-accent-hover: var(--kioku-theme-color-accent-hover);
+  --kioku-ui-color-accent-active: var(--kioku-theme-color-accent-active);
+  --kioku-ui-color-overlay-hover: var(--kioku-theme-color-overlay-hover);
+  --kioku-ui-color-overlay-active: var(--kioku-theme-color-overlay-active);
+  --kioku-ui-color-disabled-surface: var(--kioku-theme-color-disabled-surface);
+  --kioku-ui-color-disabled-text: var(--kioku-theme-color-disabled-text);
+  --kioku-ui-color-focus: var(--kioku-theme-color-focus);
+  --kioku-ui-border-default: var(--kioku-theme-border-default);
+  --kioku-ui-border-strong: var(--kioku-theme-border-strong);
+  --kioku-ui-border-interactive: var(--kioku-theme-border-interactive);
+  --kioku-ui-border-disabled: var(--kioku-theme-border-disabled);
+  --kioku-ui-border-width: var(--kioku-theme-border-width);
+  --kioku-ui-border-style: var(--kioku-theme-border-style);
+  --kioku-ui-status-info-surface: var(--kioku-theme-status-info-surface);
+  --kioku-ui-status-info-text: var(--kioku-theme-status-info-text);
+  --kioku-ui-status-success-surface: var(--kioku-theme-status-success-surface);
+  --kioku-ui-status-success-text: var(--kioku-theme-status-success-text);
+  --kioku-ui-status-warning-surface: var(--kioku-theme-status-warning-surface);
+  --kioku-ui-status-warning-text: var(--kioku-theme-status-warning-text);
+  --kioku-ui-status-danger-surface: var(--kioku-theme-status-danger-surface);
+  --kioku-ui-status-danger-text: var(--kioku-theme-status-danger-text);
+  --kioku-ui-focus-width: var(--kioku-theme-focus-width);
+  --kioku-ui-focus-offset: var(--kioku-theme-focus-offset);
+  --kioku-ui-typography-font-family-body: var(--kioku-theme-font-family-body);
+  --kioku-ui-typography-font-family-heading: var(
+    --kioku-theme-font-family-heading
+  );
+  --kioku-ui-typography-font-family-display: var(
+    --kioku-theme-font-family-display
+  );
+  --kioku-ui-typography-font-family-mono: var(--kioku-theme-font-family-mono);
+  --kioku-ui-typography-font-feature-settings: var(
+    --kioku-theme-font-feature-settings
+  );
+  --kioku-ui-typography-font-size-xs: var(--kioku-theme-font-size-xs);
+  --kioku-ui-typography-font-size-sm: var(--kioku-theme-font-size-sm);
+  --kioku-ui-typography-font-size-md: var(--kioku-theme-font-size-md);
+  --kioku-ui-typography-font-size-lg: var(--kioku-theme-font-size-lg);
+  --kioku-ui-typography-font-size-xl: var(--kioku-theme-font-size-xl);
+  --kioku-ui-typography-font-size2xl: var(--kioku-theme-font-size-2xl);
+  --kioku-ui-typography-font-weight-regular: var(
+    --kioku-theme-font-weight-regular
+  );
+  --kioku-ui-typography-font-weight-medium: var(
+    --kioku-theme-font-weight-medium
+  );
+  --kioku-ui-typography-font-weight-strong: var(
+    --kioku-theme-font-weight-strong
+  );
+  --kioku-ui-typography-line-height-body: var(--kioku-theme-line-height-body);
+  --kioku-ui-typography-line-height-heading: var(
+    --kioku-theme-line-height-heading
+  );
+  --kioku-ui-spacing-xs: var(--kioku-theme-spacing-xs);
+  --kioku-ui-spacing-sm: var(--kioku-theme-spacing-sm);
+  --kioku-ui-spacing-md: var(--kioku-theme-spacing-md);
+  --kioku-ui-spacing-lg: var(--kioku-theme-spacing-lg);
+  --kioku-ui-spacing-xl: var(--kioku-theme-spacing-xl);
+  --kioku-ui-spacing-2xl: var(--kioku-theme-spacing-2xl);
+  --kioku-ui-radius-inner: var(--kioku-theme-radius-inner);
+  --kioku-ui-radius-element: var(--kioku-theme-radius-element);
+  --kioku-ui-radius-container: var(--kioku-theme-radius-container);
+  --kioku-ui-radius-page: var(--kioku-theme-radius-page);
+  --kioku-ui-radius-full: var(--kioku-theme-radius-full);
+  --kioku-ui-size-control-sm: var(--kioku-theme-size-control-sm);
+  --kioku-ui-size-control-md: var(--kioku-theme-size-control-md);
+  --kioku-ui-size-control-lg: var(--kioku-theme-size-control-lg);
+  --kioku-ui-size-hit-target: var(--kioku-theme-size-hit-target);
+  --kioku-ui-elevation-low: var(--kioku-theme-elevation-low);
+  --kioku-ui-elevation-medium: var(--kioku-theme-elevation-medium);
+  --kioku-ui-elevation-high: var(--kioku-theme-elevation-high);
+  --kioku-ui-texture-grain: var(--kioku-theme-texture-grain);
+  --kioku-ui-motion-duration-fast: var(--kioku-theme-motion-duration-fast);
+  --kioku-ui-motion-duration-moderate: var(
+    --kioku-theme-motion-duration-moderate
+  );
+  --kioku-ui-motion-duration-slow: var(--kioku-theme-motion-duration-slow);
+  --kioku-ui-motion-easing-standard: var(--kioku-theme-motion-easing-standard);
+  --kioku-ui-motion-easing-emphasized: var(
+    --kioku-theme-motion-easing-emphasized
+  );
+
+  --kioku-theme-border-width: 1px;
+  --kioku-theme-border-style: solid;
+  --kioku-theme-focus-width: 2px;
+  --kioku-theme-focus-offset: 2px;
+  --kioku-theme-font-family-body:
+    'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    sans-serif;
+  --kioku-theme-font-family-heading:
+    'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    sans-serif;
+  --kioku-theme-font-family-mono:
+    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+  --kioku-theme-font-feature-settings: 'palt' 1;
+  --kioku-theme-font-size-xs: 11px;
+  --kioku-theme-font-size-sm: 12.5px;
+  --kioku-theme-font-size-md: 13.5px;
+  --kioku-theme-font-size-lg: 16px;
+  --kioku-theme-font-size-xl: 27px;
+  --kioku-theme-font-size-2xl: 30px;
+  --kioku-theme-font-weight-regular: 400;
+  --kioku-theme-font-weight-medium: 500;
+  --kioku-theme-font-weight-strong: 600;
+  --kioku-theme-line-height-body: 1.62;
+  --kioku-theme-line-height-heading: 1.25;
+  --kioku-theme-radius-inner: 3px;
+  --kioku-theme-radius-element: 3px;
+  --kioku-theme-radius-container: 3px;
+  --kioku-theme-radius-page: 3px;
+  --kioku-theme-radius-full: 999px;
+  --kioku-theme-size-control-sm: 24px;
+  --kioku-theme-size-control-md: 28px;
+  --kioku-theme-size-control-lg: 32px;
+  --kioku-theme-size-hit-target: 44px;
+  --kioku-theme-motion-duration-fast: 120ms;
+  --kioku-theme-motion-duration-moderate: 220ms;
+  --kioku-theme-motion-duration-slow: 760ms;
+  --kioku-theme-motion-easing-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
+  --kioku-theme-motion-easing-emphasized: cubic-bezier(0.16, 0.84, 0.28, 1);
+
+  /* compact is the default: this is a tool, not a landing page. */
+  --kioku-theme-spacing-xs: 3px;
+  --kioku-theme-spacing-sm: 6px;
+  --kioku-theme-spacing-md: 10px;
+  --kioku-theme-spacing-lg: 14px;
+  --kioku-theme-spacing-xl: 20px;
+  --kioku-theme-spacing-2xl: 28px;
+}
+
+/* Density is a matter of eyesight and screen size, so it stays a knob. */
+[data-theme='washi'][data-density='standard'],
+[data-theme='muji'][data-density='standard'],
+[data-theme='sumi'][data-density='standard'] {
+  --kioku-theme-spacing-xs: 4px;
+  --kioku-theme-spacing-sm: 8px;
+  --kioku-theme-spacing-md: 13px;
+  --kioku-theme-spacing-lg: 18px;
+  --kioku-theme-spacing-xl: 26px;
+  --kioku-theme-spacing-2xl: 38px;
+}
+
+/* 和紙: warm paper and sumi ink, with indigo, moss, kerria and madder. */
+[data-theme='washi'] {
+  --kioku-theme-color-canvas: light-dark(#efebe0, #191713);
+  --kioku-theme-color-surface: light-dark(#f6f3e9, #211e19);
+  --kioku-theme-color-surface-raised: light-dark(#f6f3e9, #282419);
+  --kioku-theme-color-surface-muted: light-dark(#e7e2d3, #2a2620);
+  --kioku-theme-color-text: light-dark(#26221c, #ece6d9);
+  --kioku-theme-color-text-secondary: light-dark(#5d574c, #a49c8c);
+  --kioku-theme-color-text-muted: light-dark(#696459, #928c82);
+  --kioku-theme-color-text-on-accent: light-dark(#f6f3e9, #191713);
+  --kioku-theme-color-accent: light-dark(#2f5d8a, #7ba6cf);
+  --kioku-theme-color-accent-hover: light-dark(#23486b, #a3c4e2);
+  --kioku-theme-color-accent-active: light-dark(#1b3852, #c0d8ee);
+  --kioku-theme-color-overlay-hover: light-dark(
+    rgb(38 34 28 / 4%),
+    rgb(236 230 217 / 6%)
+  );
+  --kioku-theme-color-overlay-active: light-dark(
+    rgb(38 34 28 / 7%),
+    rgb(236 230 217 / 10%)
+  );
+  --kioku-theme-color-disabled-surface: light-dark(#e2dccb, #151310);
+  --kioku-theme-color-disabled-text: light-dark(#8a8375, #7d766a);
+  --kioku-theme-color-focus: light-dark(#2f5d8a, #7ba6cf);
+  --kioku-theme-border-default: light-dark(#ddd7c5, #302b24);
+  --kioku-theme-border-strong: light-dark(#c8c0aa, #423b31);
+  --kioku-theme-border-interactive: light-dark(#2f5d8a, #7ba6cf);
+  --kioku-theme-border-disabled: light-dark(#e3ddcd, #2a2620);
+  --kioku-theme-status-info-surface: light-dark(#e3eaf1, #7ba6cf24);
+  --kioku-theme-status-info-text: light-dark(#23486b, #a3c4e2);
+  --kioku-theme-status-success-surface: light-dark(#e6ecdf, #8fae7620);
+  --kioku-theme-status-success-text: light-dark(#4f7043, #8fae76);
+  --kioku-theme-status-warning-surface: light-dark(#f6eed9, #d0a85120);
+  --kioku-theme-status-warning-text: light-dark(#87650e, #d0a851);
+  --kioku-theme-status-danger-surface: light-dark(#f5e3df, #d1786c20);
+  --kioku-theme-status-danger-text: light-dark(#a2453b, #d1786c);
+  --kioku-theme-texture-grain: light-dark(
+    rgb(38 34 28 / 4%),
+    rgb(236 230 217 / 6%)
+  );
+  --kioku-theme-font-family-display:
+    'Shippori Mincho', 'Hiragino Mincho ProN', serif;
+  --kioku-theme-elevation-low: 0 0 0 1px light-dark(#ddd7c5, #302b24);
+  --kioku-theme-elevation-medium:
+    0 1px 0 light-dark(rgb(38 34 28 / 4%), rgb(0 0 0 / 22%)),
+    0 0 0 1px light-dark(#ddd7c5, #302b24);
+  --kioku-theme-elevation-high:
+    0 2px 5px light-dark(rgb(38 34 28 / 7%), rgb(0 0 0 / 34%)),
+    0 0 0 1px light-dark(#ddd7c5, #302b24);
+}
+
+/* 無印: cool walls, light timber where you touch it, green-grey accent. */
+[data-theme='muji'] {
+  --kioku-theme-color-canvas: light-dark(#f2f2ef, #1a1c19);
+  --kioku-theme-color-surface: light-dark(#f9f9f7, #222420);
+  --kioku-theme-color-surface-raised: light-dark(#f9f9f7, #292c27);
+  --kioku-theme-color-surface-muted: light-dark(#eae4d8, #2b2d27);
+  --kioku-theme-color-text: light-dark(#2f322c, #e7e8e2);
+  --kioku-theme-color-text-secondary: light-dark(#64675d, #9b9e95);
+  --kioku-theme-color-text-muted: light-dark(#656760, #92948d);
+  --kioku-theme-color-text-on-accent: light-dark(#f9f9f7, #1a1c19);
+  --kioku-theme-color-accent: light-dark(#566b52, #9cb597);
+  --kioku-theme-color-accent-hover: light-dark(#41533e, #b8cbb3);
+  --kioku-theme-color-accent-active: light-dark(#33422f, #cbdbc7);
+  --kioku-theme-color-overlay-hover: light-dark(
+    rgb(47 50 44 / 4%),
+    rgb(231 232 226 / 6%)
+  );
+  --kioku-theme-color-overlay-active: light-dark(
+    rgb(47 50 44 / 7%),
+    rgb(231 232 226 / 10%)
+  );
+  --kioku-theme-color-disabled-surface: light-dark(#e0d9ca, #141613);
+  --kioku-theme-color-disabled-text: light-dark(#93968b, #75786f);
+  --kioku-theme-color-focus: light-dark(#566b52, #9cb597);
+  --kioku-theme-border-default: light-dark(#dcdcd4, #31342d);
+  --kioku-theme-border-strong: light-dark(#c2c3b8, #43463d);
+  --kioku-theme-border-interactive: light-dark(#566b52, #9cb597);
+  --kioku-theme-border-disabled: light-dark(#e2e2db, #2b2d27);
+  --kioku-theme-status-info-surface: light-dark(#e4e9e0, #9cb59720);
+  --kioku-theme-status-info-text: light-dark(#41533e, #b8cbb3);
+  --kioku-theme-status-success-surface: light-dark(#e6ebe0, #9cb59720);
+  --kioku-theme-status-success-text: light-dark(#57704d, #9cb597);
+  --kioku-theme-status-warning-surface: light-dark(#f1e9d8, #cbab6b20);
+  --kioku-theme-status-warning-text: light-dark(#806630, #cbab6b);
+  --kioku-theme-status-danger-surface: light-dark(#f2e2dd, #cc8a7c20);
+  --kioku-theme-status-danger-text: light-dark(#95564a, #cc8a7c);
+  --kioku-theme-texture-grain: light-dark(
+    rgb(47 50 44 / 2%),
+    rgb(231 232 226 / 4%)
+  );
+  --kioku-theme-font-family-display:
+    'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    sans-serif;
+  --kioku-theme-elevation-low: 0 0 0 1px light-dark(#dcdcd4, #31342d);
+  --kioku-theme-elevation-medium:
+    0 1px 0 light-dark(rgb(47 50 44 / 4%), rgb(0 0 0 / 24%)),
+    0 0 0 1px light-dark(#dcdcd4, #31342d);
+  --kioku-theme-elevation-high:
+    0 2px 5px light-dark(rgb(47 50 44 / 7%), rgb(0 0 0 / 36%)),
+    0 0 0 1px light-dark(#dcdcd4, #31342d);
+}
+
+/* 墨: high contrast, near monochrome, one indigo accent, no grain. */
+[data-theme='sumi'] {
+  --kioku-theme-color-canvas: light-dark(#f5f5f3, #0f0f0e);
+  --kioku-theme-color-surface: light-dark(#ffffff, #191918);
+  --kioku-theme-color-surface-raised: light-dark(#ffffff, #212120);
+  --kioku-theme-color-surface-muted: light-dark(#edede9, #222220);
+  --kioku-theme-color-text: light-dark(#131311, #f2f2ee);
+  --kioku-theme-color-text-secondary: light-dark(#4a4a46, #a8a8a2);
+  --kioku-theme-color-text-muted: light-dark(#6b6b65, #8a8a84);
+  --kioku-theme-color-text-on-accent: light-dark(#ffffff, #0f0f0e);
+  --kioku-theme-color-accent: light-dark(#1d4d7c, #79aade);
+  --kioku-theme-color-accent-hover: light-dark(#143a60, #a2c6ea);
+  --kioku-theme-color-accent-active: light-dark(#0f2c49, #bcd6f0);
+  --kioku-theme-color-overlay-hover: light-dark(
+    rgb(19 19 17 / 4%),
+    rgb(242 242 238 / 6%)
+  );
+  --kioku-theme-color-overlay-active: light-dark(
+    rgb(19 19 17 / 7%),
+    rgb(242 242 238 / 10%)
+  );
+  --kioku-theme-color-disabled-surface: light-dark(#e4e4e0, #090908);
+  --kioku-theme-color-disabled-text: light-dark(#7c7c76, #7b7b75);
+  --kioku-theme-color-focus: light-dark(#1d4d7c, #79aade);
+  --kioku-theme-border-default: light-dark(#dcdcd8, #2a2a27);
+  --kioku-theme-border-strong: light-dark(#b4b4ae, #3d3d39);
+  --kioku-theme-border-interactive: light-dark(#1d4d7c, #79aade);
+  --kioku-theme-border-disabled: light-dark(#e2e2de, #222220);
+  --kioku-theme-status-info-surface: light-dark(#e3e9f0, #79aade24);
+  --kioku-theme-status-info-text: light-dark(#143a60, #a2c6ea);
+  --kioku-theme-status-success-surface: light-dark(#e4ebe2, #8bb37f20);
+  --kioku-theme-status-success-text: light-dark(#3f6b3a, #8bb37f);
+  --kioku-theme-status-warning-surface: light-dark(#f3ecda, #d3b16420);
+  --kioku-theme-status-warning-text: light-dark(#8a6510, #d3b164);
+  --kioku-theme-status-danger-surface: light-dark(#f4e0dd, #d5837a20);
+  --kioku-theme-status-danger-text: light-dark(#993229, #d5837a);
+  --kioku-theme-texture-grain: light-dark(transparent, transparent);
+  --kioku-theme-font-family-display:
+    'Shippori Mincho', 'Hiragino Mincho ProN', serif;
+  --kioku-theme-elevation-low: 0 0 0 1px light-dark(#dcdcd8, #2a2a27);
+  --kioku-theme-elevation-medium:
+    0 1px 0 light-dark(rgb(19 19 17 / 6%), rgb(0 0 0 / 40%)),
+    0 0 0 1px light-dark(#dcdcd8, #2a2a27);
+  --kioku-theme-elevation-high:
+    0 2px 5px light-dark(rgb(19 19 17 / 10%), rgb(0 0 0 / 52%)),
+    0 0 0 1px light-dark(#dcdcd8, #2a2a27);
+}
+
+/* ThemeDefinition values resolve through a dictionary owned by each skin. */
+[data-theme='washi'] {
+  --kioku-theme-washi-color-canvas: var(--kioku-theme-color-canvas);
+  --kioku-theme-washi-color-surface: var(--kioku-theme-color-surface);
+  --kioku-theme-washi-color-surface-raised: var(
+    --kioku-theme-color-surface-raised
+  );
+  --kioku-theme-washi-color-surface-muted: var(
+    --kioku-theme-color-surface-muted
+  );
+  --kioku-theme-washi-color-text: var(--kioku-theme-color-text);
+  --kioku-theme-washi-color-text-secondary: var(
+    --kioku-theme-color-text-secondary
+  );
+  --kioku-theme-washi-color-text-muted: var(--kioku-theme-color-text-muted);
+  --kioku-theme-washi-color-text-on-accent: var(
+    --kioku-theme-color-text-on-accent
+  );
+  --kioku-theme-washi-color-accent: var(--kioku-theme-color-accent);
+  --kioku-theme-washi-color-accent-hover: var(--kioku-theme-color-accent-hover);
+  --kioku-theme-washi-color-accent-active: var(
+    --kioku-theme-color-accent-active
+  );
+  --kioku-theme-washi-color-overlay-hover: var(
+    --kioku-theme-color-overlay-hover
+  );
+  --kioku-theme-washi-color-overlay-active: var(
+    --kioku-theme-color-overlay-active
+  );
+  --kioku-theme-washi-color-disabled-surface: var(
+    --kioku-theme-color-disabled-surface
+  );
+  --kioku-theme-washi-color-disabled-text: var(
+    --kioku-theme-color-disabled-text
+  );
+  --kioku-theme-washi-color-focus: var(--kioku-theme-color-focus);
+  --kioku-theme-washi-border-default: var(--kioku-theme-border-default);
+  --kioku-theme-washi-border-strong: var(--kioku-theme-border-strong);
+  --kioku-theme-washi-border-interactive: var(--kioku-theme-border-interactive);
+  --kioku-theme-washi-border-disabled: var(--kioku-theme-border-disabled);
+  --kioku-theme-washi-border-width: var(--kioku-theme-border-width);
+  --kioku-theme-washi-border-style: var(--kioku-theme-border-style);
+  --kioku-theme-washi-status-info-surface: var(
+    --kioku-theme-status-info-surface
+  );
+  --kioku-theme-washi-status-info-text: var(--kioku-theme-status-info-text);
+  --kioku-theme-washi-status-success-surface: var(
+    --kioku-theme-status-success-surface
+  );
+  --kioku-theme-washi-status-success-text: var(
+    --kioku-theme-status-success-text
+  );
+  --kioku-theme-washi-status-warning-surface: var(
+    --kioku-theme-status-warning-surface
+  );
+  --kioku-theme-washi-status-warning-text: var(
+    --kioku-theme-status-warning-text
+  );
+  --kioku-theme-washi-status-danger-surface: var(
+    --kioku-theme-status-danger-surface
+  );
+  --kioku-theme-washi-status-danger-text: var(--kioku-theme-status-danger-text);
+  --kioku-theme-washi-focus-width: var(--kioku-theme-focus-width);
+  --kioku-theme-washi-focus-offset: var(--kioku-theme-focus-offset);
+  --kioku-theme-washi-font-family-body: var(--kioku-theme-font-family-body);
+  --kioku-theme-washi-font-family-heading: var(
+    --kioku-theme-font-family-heading
+  );
+  --kioku-theme-washi-font-family-display: var(
+    --kioku-theme-font-family-display
+  );
+  --kioku-theme-washi-font-family-mono: var(--kioku-theme-font-family-mono);
+  --kioku-theme-washi-font-feature-settings: var(
+    --kioku-theme-font-feature-settings
+  );
+  --kioku-theme-washi-font-size-xs: var(--kioku-theme-font-size-xs);
+  --kioku-theme-washi-font-size-sm: var(--kioku-theme-font-size-sm);
+  --kioku-theme-washi-font-size-md: var(--kioku-theme-font-size-md);
+  --kioku-theme-washi-font-size-lg: var(--kioku-theme-font-size-lg);
+  --kioku-theme-washi-font-size-xl: var(--kioku-theme-font-size-xl);
+  --kioku-theme-washi-font-size-2xl: var(--kioku-theme-font-size-2xl);
+  --kioku-theme-washi-font-weight-regular: var(
+    --kioku-theme-font-weight-regular
+  );
+  --kioku-theme-washi-font-weight-medium: var(--kioku-theme-font-weight-medium);
+  --kioku-theme-washi-font-weight-strong: var(--kioku-theme-font-weight-strong);
+  --kioku-theme-washi-line-height-body: var(--kioku-theme-line-height-body);
+  --kioku-theme-washi-line-height-heading: var(
+    --kioku-theme-line-height-heading
+  );
+  --kioku-theme-washi-spacing-xs: var(--kioku-theme-spacing-xs);
+  --kioku-theme-washi-spacing-sm: var(--kioku-theme-spacing-sm);
+  --kioku-theme-washi-spacing-md: var(--kioku-theme-spacing-md);
+  --kioku-theme-washi-spacing-lg: var(--kioku-theme-spacing-lg);
+  --kioku-theme-washi-spacing-xl: var(--kioku-theme-spacing-xl);
+  --kioku-theme-washi-spacing-2xl: var(--kioku-theme-spacing-2xl);
+  --kioku-theme-washi-radius-inner: var(--kioku-theme-radius-inner);
+  --kioku-theme-washi-radius-element: var(--kioku-theme-radius-element);
+  --kioku-theme-washi-radius-container: var(--kioku-theme-radius-container);
+  --kioku-theme-washi-radius-page: var(--kioku-theme-radius-page);
+  --kioku-theme-washi-radius-full: var(--kioku-theme-radius-full);
+  --kioku-theme-washi-size-control-sm: var(--kioku-theme-size-control-sm);
+  --kioku-theme-washi-size-control-md: var(--kioku-theme-size-control-md);
+  --kioku-theme-washi-size-control-lg: var(--kioku-theme-size-control-lg);
+  --kioku-theme-washi-size-hit-target: var(--kioku-theme-size-hit-target);
+  --kioku-theme-washi-elevation-low: var(--kioku-theme-elevation-low);
+  --kioku-theme-washi-elevation-medium: var(--kioku-theme-elevation-medium);
+  --kioku-theme-washi-elevation-high: var(--kioku-theme-elevation-high);
+  --kioku-theme-washi-texture-grain: var(--kioku-theme-texture-grain);
+  --kioku-theme-washi-motion-duration-fast: var(
+    --kioku-theme-motion-duration-fast
+  );
+  --kioku-theme-washi-motion-duration-moderate: var(
+    --kioku-theme-motion-duration-moderate
+  );
+  --kioku-theme-washi-motion-duration-slow: var(
+    --kioku-theme-motion-duration-slow
+  );
+  --kioku-theme-washi-motion-easing-standard: var(
+    --kioku-theme-motion-easing-standard
+  );
+  --kioku-theme-washi-motion-easing-emphasized: var(
+    --kioku-theme-motion-easing-emphasized
+  );
+}
+
+[data-theme='muji'] {
+  --kioku-theme-muji-color-canvas: var(--kioku-theme-color-canvas);
+  --kioku-theme-muji-color-surface: var(--kioku-theme-color-surface);
+  --kioku-theme-muji-color-surface-raised: var(
+    --kioku-theme-color-surface-raised
+  );
+  --kioku-theme-muji-color-surface-muted: var(
+    --kioku-theme-color-surface-muted
+  );
+  --kioku-theme-muji-color-text: var(--kioku-theme-color-text);
+  --kioku-theme-muji-color-text-secondary: var(
+    --kioku-theme-color-text-secondary
+  );
+  --kioku-theme-muji-color-text-muted: var(--kioku-theme-color-text-muted);
+  --kioku-theme-muji-color-text-on-accent: var(
+    --kioku-theme-color-text-on-accent
+  );
+  --kioku-theme-muji-color-accent: var(--kioku-theme-color-accent);
+  --kioku-theme-muji-color-accent-hover: var(--kioku-theme-color-accent-hover);
+  --kioku-theme-muji-color-accent-active: var(
+    --kioku-theme-color-accent-active
+  );
+  --kioku-theme-muji-color-overlay-hover: var(
+    --kioku-theme-color-overlay-hover
+  );
+  --kioku-theme-muji-color-overlay-active: var(
+    --kioku-theme-color-overlay-active
+  );
+  --kioku-theme-muji-color-disabled-surface: var(
+    --kioku-theme-color-disabled-surface
+  );
+  --kioku-theme-muji-color-disabled-text: var(
+    --kioku-theme-color-disabled-text
+  );
+  --kioku-theme-muji-color-focus: var(--kioku-theme-color-focus);
+  --kioku-theme-muji-border-default: var(--kioku-theme-border-default);
+  --kioku-theme-muji-border-strong: var(--kioku-theme-border-strong);
+  --kioku-theme-muji-border-interactive: var(--kioku-theme-border-interactive);
+  --kioku-theme-muji-border-disabled: var(--kioku-theme-border-disabled);
+  --kioku-theme-muji-border-width: var(--kioku-theme-border-width);
+  --kioku-theme-muji-border-style: var(--kioku-theme-border-style);
+  --kioku-theme-muji-status-info-surface: var(
+    --kioku-theme-status-info-surface
+  );
+  --kioku-theme-muji-status-info-text: var(--kioku-theme-status-info-text);
+  --kioku-theme-muji-status-success-surface: var(
+    --kioku-theme-status-success-surface
+  );
+  --kioku-theme-muji-status-success-text: var(
+    --kioku-theme-status-success-text
+  );
+  --kioku-theme-muji-status-warning-surface: var(
+    --kioku-theme-status-warning-surface
+  );
+  --kioku-theme-muji-status-warning-text: var(
+    --kioku-theme-status-warning-text
+  );
+  --kioku-theme-muji-status-danger-surface: var(
+    --kioku-theme-status-danger-surface
+  );
+  --kioku-theme-muji-status-danger-text: var(--kioku-theme-status-danger-text);
+  --kioku-theme-muji-focus-width: var(--kioku-theme-focus-width);
+  --kioku-theme-muji-focus-offset: var(--kioku-theme-focus-offset);
+  --kioku-theme-muji-font-family-body: var(--kioku-theme-font-family-body);
+  --kioku-theme-muji-font-family-heading: var(
+    --kioku-theme-font-family-heading
+  );
+  --kioku-theme-muji-font-family-display: var(
+    --kioku-theme-font-family-display
+  );
+  --kioku-theme-muji-font-family-mono: var(--kioku-theme-font-family-mono);
+  --kioku-theme-muji-font-feature-settings: var(
+    --kioku-theme-font-feature-settings
+  );
+  --kioku-theme-muji-font-size-xs: var(--kioku-theme-font-size-xs);
+  --kioku-theme-muji-font-size-sm: var(--kioku-theme-font-size-sm);
+  --kioku-theme-muji-font-size-md: var(--kioku-theme-font-size-md);
+  --kioku-theme-muji-font-size-lg: var(--kioku-theme-font-size-lg);
+  --kioku-theme-muji-font-size-xl: var(--kioku-theme-font-size-xl);
+  --kioku-theme-muji-font-size-2xl: var(--kioku-theme-font-size-2xl);
+  --kioku-theme-muji-font-weight-regular: var(
+    --kioku-theme-font-weight-regular
+  );
+  --kioku-theme-muji-font-weight-medium: var(--kioku-theme-font-weight-medium);
+  --kioku-theme-muji-font-weight-strong: var(--kioku-theme-font-weight-strong);
+  --kioku-theme-muji-line-height-body: var(--kioku-theme-line-height-body);
+  --kioku-theme-muji-line-height-heading: var(
+    --kioku-theme-line-height-heading
+  );
+  --kioku-theme-muji-spacing-xs: var(--kioku-theme-spacing-xs);
+  --kioku-theme-muji-spacing-sm: var(--kioku-theme-spacing-sm);
+  --kioku-theme-muji-spacing-md: var(--kioku-theme-spacing-md);
+  --kioku-theme-muji-spacing-lg: var(--kioku-theme-spacing-lg);
+  --kioku-theme-muji-spacing-xl: var(--kioku-theme-spacing-xl);
+  --kioku-theme-muji-spacing-2xl: var(--kioku-theme-spacing-2xl);
+  --kioku-theme-muji-radius-inner: var(--kioku-theme-radius-inner);
+  --kioku-theme-muji-radius-element: var(--kioku-theme-radius-element);
+  --kioku-theme-muji-radius-container: var(--kioku-theme-radius-container);
+  --kioku-theme-muji-radius-page: var(--kioku-theme-radius-page);
+  --kioku-theme-muji-radius-full: var(--kioku-theme-radius-full);
+  --kioku-theme-muji-size-control-sm: var(--kioku-theme-size-control-sm);
+  --kioku-theme-muji-size-control-md: var(--kioku-theme-size-control-md);
+  --kioku-theme-muji-size-control-lg: var(--kioku-theme-size-control-lg);
+  --kioku-theme-muji-size-hit-target: var(--kioku-theme-size-hit-target);
+  --kioku-theme-muji-elevation-low: var(--kioku-theme-elevation-low);
+  --kioku-theme-muji-elevation-medium: var(--kioku-theme-elevation-medium);
+  --kioku-theme-muji-elevation-high: var(--kioku-theme-elevation-high);
+  --kioku-theme-muji-texture-grain: var(--kioku-theme-texture-grain);
+  --kioku-theme-muji-motion-duration-fast: var(
+    --kioku-theme-motion-duration-fast
+  );
+  --kioku-theme-muji-motion-duration-moderate: var(
+    --kioku-theme-motion-duration-moderate
+  );
+  --kioku-theme-muji-motion-duration-slow: var(
+    --kioku-theme-motion-duration-slow
+  );
+  --kioku-theme-muji-motion-easing-standard: var(
+    --kioku-theme-motion-easing-standard
+  );
+  --kioku-theme-muji-motion-easing-emphasized: var(
+    --kioku-theme-motion-easing-emphasized
+  );
+}
+
+[data-theme='sumi'] {
+  --kioku-theme-sumi-color-canvas: var(--kioku-theme-color-canvas);
+  --kioku-theme-sumi-color-surface: var(--kioku-theme-color-surface);
+  --kioku-theme-sumi-color-surface-raised: var(
+    --kioku-theme-color-surface-raised
+  );
+  --kioku-theme-sumi-color-surface-muted: var(
+    --kioku-theme-color-surface-muted
+  );
+  --kioku-theme-sumi-color-text: var(--kioku-theme-color-text);
+  --kioku-theme-sumi-color-text-secondary: var(
+    --kioku-theme-color-text-secondary
+  );
+  --kioku-theme-sumi-color-text-muted: var(--kioku-theme-color-text-muted);
+  --kioku-theme-sumi-color-text-on-accent: var(
+    --kioku-theme-color-text-on-accent
+  );
+  --kioku-theme-sumi-color-accent: var(--kioku-theme-color-accent);
+  --kioku-theme-sumi-color-accent-hover: var(--kioku-theme-color-accent-hover);
+  --kioku-theme-sumi-color-accent-active: var(
+    --kioku-theme-color-accent-active
+  );
+  --kioku-theme-sumi-color-overlay-hover: var(
+    --kioku-theme-color-overlay-hover
+  );
+  --kioku-theme-sumi-color-overlay-active: var(
+    --kioku-theme-color-overlay-active
+  );
+  --kioku-theme-sumi-color-disabled-surface: var(
+    --kioku-theme-color-disabled-surface
+  );
+  --kioku-theme-sumi-color-disabled-text: var(
+    --kioku-theme-color-disabled-text
+  );
+  --kioku-theme-sumi-color-focus: var(--kioku-theme-color-focus);
+  --kioku-theme-sumi-border-default: var(--kioku-theme-border-default);
+  --kioku-theme-sumi-border-strong: var(--kioku-theme-border-strong);
+  --kioku-theme-sumi-border-interactive: var(--kioku-theme-border-interactive);
+  --kioku-theme-sumi-border-disabled: var(--kioku-theme-border-disabled);
+  --kioku-theme-sumi-border-width: var(--kioku-theme-border-width);
+  --kioku-theme-sumi-border-style: var(--kioku-theme-border-style);
+  --kioku-theme-sumi-status-info-surface: var(
+    --kioku-theme-status-info-surface
+  );
+  --kioku-theme-sumi-status-info-text: var(--kioku-theme-status-info-text);
+  --kioku-theme-sumi-status-success-surface: var(
+    --kioku-theme-status-success-surface
+  );
+  --kioku-theme-sumi-status-success-text: var(
+    --kioku-theme-status-success-text
+  );
+  --kioku-theme-sumi-status-warning-surface: var(
+    --kioku-theme-status-warning-surface
+  );
+  --kioku-theme-sumi-status-warning-text: var(
+    --kioku-theme-status-warning-text
+  );
+  --kioku-theme-sumi-status-danger-surface: var(
+    --kioku-theme-status-danger-surface
+  );
+  --kioku-theme-sumi-status-danger-text: var(--kioku-theme-status-danger-text);
+  --kioku-theme-sumi-focus-width: var(--kioku-theme-focus-width);
+  --kioku-theme-sumi-focus-offset: var(--kioku-theme-focus-offset);
+  --kioku-theme-sumi-font-family-body: var(--kioku-theme-font-family-body);
+  --kioku-theme-sumi-font-family-heading: var(
+    --kioku-theme-font-family-heading
+  );
+  --kioku-theme-sumi-font-family-display: var(
+    --kioku-theme-font-family-display
+  );
+  --kioku-theme-sumi-font-family-mono: var(--kioku-theme-font-family-mono);
+  --kioku-theme-sumi-font-feature-settings: var(
+    --kioku-theme-font-feature-settings
+  );
+  --kioku-theme-sumi-font-size-xs: var(--kioku-theme-font-size-xs);
+  --kioku-theme-sumi-font-size-sm: var(--kioku-theme-font-size-sm);
+  --kioku-theme-sumi-font-size-md: var(--kioku-theme-font-size-md);
+  --kioku-theme-sumi-font-size-lg: var(--kioku-theme-font-size-lg);
+  --kioku-theme-sumi-font-size-xl: var(--kioku-theme-font-size-xl);
+  --kioku-theme-sumi-font-size-2xl: var(--kioku-theme-font-size-2xl);
+  --kioku-theme-sumi-font-weight-regular: var(
+    --kioku-theme-font-weight-regular
+  );
+  --kioku-theme-sumi-font-weight-medium: var(--kioku-theme-font-weight-medium);
+  --kioku-theme-sumi-font-weight-strong: var(--kioku-theme-font-weight-strong);
+  --kioku-theme-sumi-line-height-body: var(--kioku-theme-line-height-body);
+  --kioku-theme-sumi-line-height-heading: var(
+    --kioku-theme-line-height-heading
+  );
+  --kioku-theme-sumi-spacing-xs: var(--kioku-theme-spacing-xs);
+  --kioku-theme-sumi-spacing-sm: var(--kioku-theme-spacing-sm);
+  --kioku-theme-sumi-spacing-md: var(--kioku-theme-spacing-md);
+  --kioku-theme-sumi-spacing-lg: var(--kioku-theme-spacing-lg);
+  --kioku-theme-sumi-spacing-xl: var(--kioku-theme-spacing-xl);
+  --kioku-theme-sumi-spacing-2xl: var(--kioku-theme-spacing-2xl);
+  --kioku-theme-sumi-radius-inner: var(--kioku-theme-radius-inner);
+  --kioku-theme-sumi-radius-element: var(--kioku-theme-radius-element);
+  --kioku-theme-sumi-radius-container: var(--kioku-theme-radius-container);
+  --kioku-theme-sumi-radius-page: var(--kioku-theme-radius-page);
+  --kioku-theme-sumi-radius-full: var(--kioku-theme-radius-full);
+  --kioku-theme-sumi-size-control-sm: var(--kioku-theme-size-control-sm);
+  --kioku-theme-sumi-size-control-md: var(--kioku-theme-size-control-md);
+  --kioku-theme-sumi-size-control-lg: var(--kioku-theme-size-control-lg);
+  --kioku-theme-sumi-size-hit-target: var(--kioku-theme-size-hit-target);
+  --kioku-theme-sumi-elevation-low: var(--kioku-theme-elevation-low);
+  --kioku-theme-sumi-elevation-medium: var(--kioku-theme-elevation-medium);
+  --kioku-theme-sumi-elevation-high: var(--kioku-theme-elevation-high);
+  --kioku-theme-sumi-texture-grain: var(--kioku-theme-texture-grain);
+  --kioku-theme-sumi-motion-duration-fast: var(
+    --kioku-theme-motion-duration-fast
+  );
+  --kioku-theme-sumi-motion-duration-moderate: var(
+    --kioku-theme-motion-duration-moderate
+  );
+  --kioku-theme-sumi-motion-duration-slow: var(
+    --kioku-theme-motion-duration-slow
+  );
+  --kioku-theme-sumi-motion-easing-standard: var(
+    --kioku-theme-motion-easing-standard
+  );
+  --kioku-theme-sumi-motion-easing-emphasized: var(
+    --kioku-theme-motion-easing-emphasized
+  );
+}
+
+/* Chinese uses complete SC families inside each selected theme. */
+[data-theme='washi']:lang(zh),
+[data-theme='sumi']:lang(zh) {
+  --kioku-theme-font-family-body:
+    'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
+  --kioku-theme-font-family-heading:
+    'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
+  --kioku-theme-font-family-display:
+    'Noto Serif SC', 'Songti SC', 'STSong', serif;
+}
+
+[data-theme='muji']:lang(zh) {
+  --kioku-theme-font-family-body:
+    'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
+  --kioku-theme-font-family-heading:
+    'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
+  --kioku-theme-font-family-display:
+    'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
+}

package/dist/themes.d.ts

@@ -0,0 +1,5 @@
+import type { ThemeDefinition } from '@misoto22/kioku-ui/theme';
+export declare const washiTheme: ThemeDefinition;
+export declare const mujiTheme: ThemeDefinition;
+export declare const sumiTheme: ThemeDefinition;
+export declare const kiokuThemes: readonly ThemeDefinition[];

package/dist/themes.js

@@ -0,0 +1,92 @@
+function themeTokenReferences(id) {
+    const variable = (role) => `var(--kioku-theme-${id}-${role})`;
+    return Object.freeze({
+        'color.canvas': variable('color-canvas'),
+        'color.surface': variable('color-surface'),
+        'color.surfaceRaised': variable('color-surface-raised'),
+        'color.surfaceMuted': variable('color-surface-muted'),
+        'color.text': variable('color-text'),
+        'color.textSecondary': variable('color-text-secondary'),
+        'color.textMuted': variable('color-text-muted'),
+        'color.textOnAccent': variable('color-text-on-accent'),
+        'color.accent': variable('color-accent'),
+        'color.accentHover': variable('color-accent-hover'),
+        'color.accentActive': variable('color-accent-active'),
+        'color.overlayHover': variable('color-overlay-hover'),
+        'color.overlayActive': variable('color-overlay-active'),
+        'color.disabledSurface': variable('color-disabled-surface'),
+        'color.disabledText': variable('color-disabled-text'),
+        'color.focus': variable('color-focus'),
+        'border.default': variable('border-default'),
+        'border.strong': variable('border-strong'),
+        'border.interactive': variable('border-interactive'),
+        'border.disabled': variable('border-disabled'),
+        'border.width': variable('border-width'),
+        'border.style': variable('border-style'),
+        'status.infoSurface': variable('status-info-surface'),
+        'status.infoText': variable('status-info-text'),
+        'status.successSurface': variable('status-success-surface'),
+        'status.successText': variable('status-success-text'),
+        'status.warningSurface': variable('status-warning-surface'),
+        'status.warningText': variable('status-warning-text'),
+        'status.dangerSurface': variable('status-danger-surface'),
+        'status.dangerText': variable('status-danger-text'),
+        'focus.width': variable('focus-width'),
+        'focus.offset': variable('focus-offset'),
+        'typography.fontFamilyBody': variable('font-family-body'),
+        'typography.fontFamilyHeading': variable('font-family-heading'),
+        'typography.fontFamilyDisplay': variable('font-family-display'),
+        'typography.fontFamilyMono': variable('font-family-mono'),
+        'typography.fontFeatureSettings': variable('font-feature-settings'),
+        'typography.fontSizeXs': variable('font-size-xs'),
+        'typography.fontSizeSm': variable('font-size-sm'),
+        'typography.fontSizeMd': variable('font-size-md'),
+        'typography.fontSizeLg': variable('font-size-lg'),
+        'typography.fontSizeXl': variable('font-size-xl'),
+        'typography.fontSize2xl': variable('font-size-2xl'),
+        'typography.fontWeightRegular': variable('font-weight-regular'),
+        'typography.fontWeightMedium': variable('font-weight-medium'),
+        'typography.fontWeightStrong': variable('font-weight-strong'),
+        'typography.lineHeightBody': variable('line-height-body'),
+        'typography.lineHeightHeading': variable('line-height-heading'),
+        'spacing.xs': variable('spacing-xs'),
+        'spacing.sm': variable('spacing-sm'),
+        'spacing.md': variable('spacing-md'),
+        'spacing.lg': variable('spacing-lg'),
+        'spacing.xl': variable('spacing-xl'),
+        'spacing.2xl': variable('spacing-2xl'),
+        'radius.inner': variable('radius-inner'),
+        'radius.element': variable('radius-element'),
+        'radius.container': variable('radius-container'),
+        'radius.page': variable('radius-page'),
+        'radius.full': variable('radius-full'),
+        'size.controlSm': variable('size-control-sm'),
+        'size.controlMd': variable('size-control-md'),
+        'size.controlLg': variable('size-control-lg'),
+        'size.hitTarget': variable('size-hit-target'),
+        'elevation.low': variable('elevation-low'),
+        'elevation.medium': variable('elevation-medium'),
+        'elevation.high': variable('elevation-high'),
+        'texture.grain': variable('texture-grain'),
+        'motion.durationFast': variable('motion-duration-fast'),
+        'motion.durationModerate': variable('motion-duration-moderate'),
+        'motion.durationSlow': variable('motion-duration-slow'),
+        'motion.easingStandard': variable('motion-easing-standard'),
+        'motion.easingEmphasized': variable('motion-easing-emphasized'),
+    });
+}
+function defineTheme(id, label) {
+    return Object.freeze({
+        id,
+        label,
+        tokens: themeTokenReferences(id),
+    });
+}
+export const washiTheme = defineTheme('washi', 'Washi');
+export const mujiTheme = defineTheme('muji', 'Muji');
+export const sumiTheme = defineTheme('sumi', 'Sumi');
+export const kiokuThemes = Object.freeze([
+    washiTheme,
+    mujiTheme,
+    sumiTheme,
+]);

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@misoto22/kioku-ui-theme-kioku",
+  "version": "0.0.0",
+  "description": "Kioku Washi, Muji, and Sumi themes for Kioku UI.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Misoto22/kioku-ui.git",
+    "directory": "packages/themes/kioku"
+  },
+  "homepage": "https://github.com/Misoto22/kioku-ui#readme",
+  "bugs": {
+    "url": "https://github.com/Misoto22/kioku-ui/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./theme.css": "./dist/theme.css"
+  },
+  "peerDependencies": {
+    "@misoto22/kioku-ui": ">=0.0.0 <0.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@misoto22/kioku-ui": "0.0.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && node build.mjs",
+    "test": "vitest run src",
+    "typecheck": "tsc --noEmit -p tsconfig.json"
+  }
+}