@rokkit/themes 1.0.4 → 1.0.5

package/src/zen-sumi/button.css

@@ -0,0 +1,176 @@
+/**
+ * Button - Zen-Sumi Theme Styles
+ *
+ * Ink-on-paper aesthetics. No gradients. No shadows.
+ * Primary filled = ink background (surface-z9) with paper text.
+ * CTA/accent = shu vermillion (primary-z5).
+ * Focus: border darkens — no glow ring.
+ */
+
+/* =============================================================================
+   Default Style (filled)
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-button][data-style='default'][data-variant='default'],
+[data-style='zen-sumi'] [data-button]:not([data-style])[data-variant='default'],
+[data-style='zen-sumi'] [data-button][data-style='default']:not([data-variant]),
+[data-style='zen-sumi'] [data-button]:not([data-style]):not([data-variant]) {
+  @apply bg-surface-z9 text-surface-z0 border-transparent bg-none;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='default'][data-variant='primary'],
+[data-style='zen-sumi'] [data-button]:not([data-style])[data-variant='primary'] {
+  @apply bg-primary-z5 text-on-primary border-transparent bg-none;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='default'][data-variant='secondary'],
+[data-style='zen-sumi'] [data-button]:not([data-style])[data-variant='secondary'] {
+  @apply bg-secondary-z5 text-on-secondary border-transparent bg-none;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='default'][data-variant='accent'],
+[data-style='zen-sumi'] [data-button]:not([data-style])[data-variant='accent'] {
+  @apply bg-accent-z5 text-on-accent border-transparent bg-none;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='default'][data-variant='danger'],
+[data-style='zen-sumi'] [data-button]:not([data-style])[data-variant='danger'] {
+  @apply bg-danger-z5 text-on-danger border-transparent bg-none;
+}
+
+/* =============================================================================
+   Outline Style
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-button][data-style='outline'][data-variant='default'],
+[data-style='zen-sumi'] [data-button][data-style='outline']:not([data-variant]) {
+  @apply border-surface-z3 text-ink-z2 border bg-transparent;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='outline'][data-variant='primary'] {
+  @apply border-primary-z4 text-primary-z6 border bg-transparent;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='outline'][data-variant='secondary'] {
+  @apply border-secondary-z4 text-secondary-z6 border bg-transparent;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='outline'][data-variant='accent'] {
+  @apply border-accent-z4 text-accent-z6 border bg-transparent;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='outline'][data-variant='danger'] {
+  @apply border-danger-z4 text-danger-z5 border bg-transparent;
+}
+
+/* =============================================================================
+   Ghost Style
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-button][data-style='ghost'] {
+  @apply border-transparent bg-transparent;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='ghost'][data-variant='default'],
+[data-style='zen-sumi'] [data-button][data-style='ghost']:not([data-variant]) {
+  @apply text-ink-z3;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='ghost'][data-variant='primary'] {
+  @apply text-primary-z6;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='ghost'][data-variant='secondary'] {
+  @apply text-secondary-z6;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='ghost'][data-variant='accent'] {
+  @apply text-accent-z6;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='ghost'][data-variant='danger'] {
+  @apply text-danger-z5;
+}
+
+/* =============================================================================
+   Gradient Style — zen-sumi uses flat fills, not gradients.
+   Minimal override: treat gradient like filled.
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-button][data-style='gradient'][data-variant='default'],
+[data-style='zen-sumi'] [data-button][data-style='gradient']:not([data-variant]) {
+  @apply bg-surface-z2 text-ink-z1 bg-none;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='gradient'][data-variant='primary'] {
+  @apply bg-primary-z5 text-on-primary bg-none;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='gradient'][data-variant='secondary'] {
+  @apply bg-secondary-z5 text-on-secondary bg-none;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='gradient'][data-variant='accent'] {
+  @apply bg-accent-z5 text-on-accent bg-none;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='gradient'][data-variant='danger'] {
+  @apply bg-danger-z5 text-on-danger bg-none;
+}
+
+/* =============================================================================
+   Link Style
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-button][data-style='link'][data-variant='default'],
+[data-style='zen-sumi'] [data-button][data-style='link']:not([data-variant]) {
+  @apply text-ink-z3;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='link'][data-variant='primary'] {
+  @apply text-primary-z5;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='link'][data-variant='secondary'] {
+  @apply text-secondary-z5;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='link'][data-variant='accent'] {
+  @apply text-accent-z5;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='link'][data-variant='danger'] {
+  @apply text-danger-z5;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='link']:hover:not(:disabled):not([data-disabled]) {
+  @apply text-ink-z1;
+}
+
+/* =============================================================================
+   Hover States — darken, no glow
+   ============================================================================= */
+
+[data-style='zen-sumi']
+  [data-button][data-style='default']:hover:not(:disabled):not([data-disabled]),
+[data-style='zen-sumi'] [data-button]:not([data-style]):hover:not(:disabled):not([data-disabled]) {
+  @apply bg-surface-z10 bg-none;
+}
+
+[data-style='zen-sumi']
+  [data-button][data-style='outline']:hover:not(:disabled):not([data-disabled]) {
+  @apply bg-surface-z1 border-surface-z5 bg-none;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='ghost']:hover:not(:disabled):not([data-disabled]) {
+  @apply bg-surface-z2;
+}
+
+/* =============================================================================
+   Focus — border darkens, no ring glow
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-button]:focus-visible {
+  @apply outline-none;
+  box-shadow: 0 0 0 1px var(--color-surface-z5);
+}

package/src/zen-sumi/card.css

@@ -0,0 +1,104 @@
+/**
+ * Card - Zen-Sumi Theme Styles
+ *
+ * Paper bg with hairline border. No shadows.
+ * Depth through background tone shifts only.
+ * Interactive: hover darkens border, bg shifts to surface-z2.
+ */
+
+/* =============================================================================
+   Base Card Styles
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-card] {
+  @apply bg-surface-z1 border-surface-z2 text-ink-z1 border bg-none;
+  box-shadow: none;
+}
+
+/* Interactive cards */
+[data-style='zen-sumi'] [data-card][data-card-interactive] {
+  cursor: pointer;
+  transition: border-color 0.2s ease;
+}
+
+[data-style='zen-sumi'] [data-card][data-card-interactive]:hover {
+  @apply border-surface-z4 bg-surface-z2 bg-none;
+}
+
+[data-style='zen-sumi'] [data-card][data-card-interactive]:active {
+  @apply bg-surface-z3 bg-none;
+}
+
+/* =============================================================================
+   Card Sections
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-card-header] {
+  @apply border-surface-z2 border-b;
+}
+
+[data-style='zen-sumi'] [data-card-body] {
+  @apply text-ink-z2;
+}
+
+[data-style='zen-sumi'] [data-card-footer] {
+  @apply border-surface-z2 text-ink-z4 border-t;
+}
+
+/* =============================================================================
+   Focus States
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-card][data-card-interactive]:focus-visible {
+  @apply outline-none;
+  box-shadow: 0 0 0 1px var(--color-surface-z5);
+}
+
+/* =============================================================================
+   Disabled State
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-card][data-card-interactive][data-disabled],
+[data-style='zen-sumi'] [data-card][data-card-interactive]:disabled {
+  @apply cursor-not-allowed opacity-50;
+}
+
+/* =============================================================================
+   Variants
+   ============================================================================= */
+
+/* Primary — shu vermillion fill */
+[data-style='zen-sumi'] [data-card][data-variant='primary'] {
+  @apply bg-primary-z5 border-primary-z6 text-on-primary border bg-none;
+  box-shadow: none;
+}
+
+[data-style='zen-sumi'] [data-card][data-variant='primary'] [data-card-header],
+[data-style='zen-sumi'] [data-card][data-variant='primary'] [data-card-footer] {
+  @apply border-primary-z4/40;
+}
+
+[data-style='zen-sumi'] [data-card][data-variant='primary'] [data-card-body] {
+  @apply text-on-primary/80;
+}
+
+/* Secondary */
+[data-style='zen-sumi'] [data-card][data-variant='secondary'] {
+  @apply bg-secondary-z4 border-secondary-z5 text-on-secondary border bg-none;
+  box-shadow: none;
+}
+
+[data-style='zen-sumi'] [data-card][data-variant='secondary'] [data-card-header],
+[data-style='zen-sumi'] [data-card][data-variant='secondary'] [data-card-footer] {
+  @apply border-secondary-z3/40;
+}
+
+[data-style='zen-sumi'] [data-card][data-variant='secondary'] [data-card-body] {
+  @apply text-on-secondary/80;
+}
+
+/* Tertiary — recessed surface, lighter border */
+[data-style='zen-sumi'] [data-card][data-variant='tertiary'] {
+  @apply bg-surface-z0 border-surface-z2 text-ink-z3 border bg-none;
+  box-shadow: none;
+}

package/src/zen-sumi/chart.css

@@ -0,0 +1,41 @@
+/**
+ * Chart - Zen-Sumi Theme Styles
+ *
+ * Ink-wash aesthetic. Axes and grids: hairline surface-z2.
+ * Labels: surface-z5 (secondary text). Dimmed elements: very low opacity.
+ */
+
+[data-style='zen-sumi'] [data-chart-axis-line],
+[data-style='zen-sumi'] [data-chart-tick] line {
+  @apply stroke-surface-z2;
+}
+
+[data-style='zen-sumi'] [data-chart-tick-label] {
+  @apply fill-surface-z5;
+}
+
+[data-style='zen-sumi'] [data-chart-grid-line] {
+  @apply stroke-surface-z2;
+  stroke-opacity: 0.4;
+  stroke-dasharray: 2 4;
+}
+
+[data-style='zen-sumi'] [data-chart-legend-label] {
+  @apply fill-surface-z5;
+}
+
+[data-style='zen-sumi'] [data-chart-legend-item]:hover {
+  @apply text-ink-z2;
+}
+
+[data-style='zen-sumi'] [data-plot-element='bar'][data-dimmed],
+[data-style='zen-sumi'] [data-plot-element='point'][data-dimmed],
+[data-style='zen-sumi'] [data-plot-element='arc'][data-dimmed],
+[data-style='zen-sumi'] [data-plot-element='line'][data-dimmed],
+[data-style='zen-sumi'] [data-plot-element='area'][data-dimmed] {
+  opacity: 0.1;
+}
+
+[data-style='zen-sumi'] [data-facet-title] {
+  @apply text-ink-z5;
+}

package/src/zen-sumi/dropdown.css

@@ -0,0 +1,53 @@
+/**
+ * Dropdown - Zen-Sumi Theme Styles
+ *
+ * Hairline trigger. Panel: paper bg, no shadow.
+ * Options: transparent → surface-z2 on hover.
+ */
+
+[data-style='zen-sumi'] [data-dropdown-trigger] {
+  @apply border-surface-z3 text-ink-z3 border bg-transparent bg-none;
+}
+
+[data-style='zen-sumi'] [data-dropdown-trigger]:hover:not(:disabled) {
+  @apply text-ink-z1 border-surface-z4 bg-none;
+}
+
+[data-style='zen-sumi'] [data-dropdown-trigger]:focus-visible {
+  @apply outline-none;
+  box-shadow: 0 0 0 1px var(--color-surface-z5);
+}
+
+[data-style='zen-sumi'] [data-dropdown][data-open='true'] [data-dropdown-trigger] {
+  @apply border-surface-z5 bg-none;
+}
+
+[data-style='zen-sumi'] [data-dropdown-trigger] [data-dropdown-icon] {
+  @apply text-ink-z5;
+}
+
+[data-style='zen-sumi'] [data-dropdown-trigger] [data-dropdown-arrow] {
+  @apply text-surface-z4;
+}
+
+[data-style='zen-sumi'] [data-dropdown-panel] {
+  @apply bg-surface-z0 border-surface-z2 border bg-none;
+  box-shadow: none;
+}
+
+[data-style='zen-sumi'] [data-dropdown-option] {
+  @apply text-ink-z3;
+}
+
+[data-style='zen-sumi'] [data-dropdown-option]:hover:not(:disabled),
+[data-style='zen-sumi'] [data-dropdown-option]:focus:not(:disabled) {
+  @apply bg-surface-z2 text-ink-z1 bg-none outline-none;
+}
+
+[data-style='zen-sumi'] [data-dropdown-option][data-active='true'] {
+  @apply text-ink-z1 border-primary-z4 border-l-2 bg-none;
+}
+
+[data-style='zen-sumi'] [data-dropdown-separator] {
+  @apply bg-surface-z2 bg-none;
+}

package/src/zen-sumi/floating-action.css

@@ -0,0 +1,68 @@
+/**
+ * FloatingAction - Zen-Sumi Theme Styles
+ *
+ * Paper bg with hairline border. No shadow.
+ * Hover: surface-z2 wash. No glow rings.
+ */
+
+/* =============================================================================
+   FAB Trigger Button
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-fab-trigger] {
+  @apply bg-surface-z1 text-ink-z2 border-surface-z2 border bg-none;
+  box-shadow: none;
+}
+
+[data-style='zen-sumi'] [data-fab-trigger]:hover:not(:disabled) {
+  @apply bg-surface-z2 text-ink-z1 border-surface-z4 bg-none;
+}
+
+[data-style='zen-sumi'] [data-fab-trigger]:focus-visible {
+  @apply outline-none;
+  box-shadow: 0 0 0 1px var(--color-surface-z5);
+}
+
+[data-style='zen-sumi'] [data-fab][data-open='true'] [data-fab-trigger] {
+  @apply bg-surface-z2 border-surface-z4 bg-none;
+  transform: rotate(45deg);
+}
+
+[data-style='zen-sumi'] [data-fab][data-open='true'] [data-fab-trigger]:hover:not(:disabled) {
+  @apply bg-none;
+}
+
+/* =============================================================================
+   FAB Items
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-fab-item] {
+  @apply bg-surface-z1 text-ink-z3 border-surface-z2 border bg-none;
+  box-shadow: none;
+}
+
+[data-style='zen-sumi'] [data-fab-item]:hover:not(:disabled) {
+  @apply bg-surface-z2 text-ink-z1 border-surface-z4 bg-none;
+}
+
+[data-style='zen-sumi'] [data-fab-item]:focus-visible {
+  @apply outline-none;
+  box-shadow: 0 0 0 1px var(--color-surface-z5);
+}
+
+/* Item icon */
+[data-style='zen-sumi'] [data-fab-item] [data-fab-item-icon] {
+  @apply text-ink-z5;
+}
+
+[data-style='zen-sumi'] [data-fab-item]:hover:not(:disabled) [data-fab-item-icon] {
+  @apply text-ink-z3;
+}
+
+/* =============================================================================
+   Backdrop
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-fab-backdrop] {
+  background: color-mix(in oklch, var(--color-surface-z9) 15%, transparent);
+}

package/src/zen-sumi/floating-navigation.css

@@ -0,0 +1,74 @@
+/**
+ * FloatingNavigation - Zen-Sumi Theme Styles
+ *
+ * Paper bg, hairline border, no shadow.
+ * Items: text-only default, surface-z2 wash on hover.
+ * Active: ink text + surface-z1 bg + primary indicator.
+ */
+
+/* =============================================================================
+   Container
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-floating-nav] {
+  @apply bg-surface-z0 border-surface-z2 border bg-none;
+  box-shadow: none;
+}
+
+/* =============================================================================
+   Header
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-floating-nav-title] {
+  @apply text-ink-z5;
+}
+
+[data-style='zen-sumi'] [data-floating-nav-pin] {
+  @apply text-surface-z4;
+}
+
+[data-style='zen-sumi'] [data-floating-nav-pin]:hover {
+  @apply text-ink-z3;
+}
+
+[data-style='zen-sumi'] [data-floating-nav-pin][aria-pressed='true'] {
+  @apply text-ink-z1;
+}
+
+/* =============================================================================
+   Items
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-floating-nav-item] {
+  @apply text-ink-z4;
+}
+
+[data-style='zen-sumi'] [data-floating-nav-item]:hover {
+  @apply bg-surface-z2 text-ink-z2 bg-none;
+}
+
+[data-style='zen-sumi'] [data-floating-nav-item][data-active] {
+  @apply bg-surface-z1 text-ink-z1 bg-none;
+}
+
+[data-style='zen-sumi'] [data-floating-nav-item]:focus-visible {
+  @apply outline-none;
+  box-shadow: inset 0 0 0 1px var(--color-surface-z4);
+}
+
+/* Icon */
+[data-style='zen-sumi'] [data-floating-nav-icon] {
+  @apply text-ink-z5;
+}
+
+[data-style='zen-sumi'] [data-floating-nav-item][data-active] [data-floating-nav-icon] {
+  @apply text-primary-z5;
+}
+
+/* =============================================================================
+   Active Indicator
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-floating-nav-indicator] {
+  @apply bg-primary-z5 bg-none;
+}

package/src/{grada-ui → zen-sumi}/index.css

@@ -1,38 +1,20 @@
 /**
- * @rokkit/themes - Grada UI Theme
+ * @rokkit/themes - Zen-Sumi Theme
  *
- * Coral/purple gradient identity with Montserrat typography.
- * Clean white form elements, pill buttons, left-border accent states.
- * Use with data-style="grada-ui" wrapper.
+ * 禅墨 — The aesthetic of ink on paper. Restraint as luxury.
+ *
+ * Key principles:
+ *  - No shadows. Depth through background tone variation only.
+ *  - No gradients. Color conveys meaning, not decoration.
+ *  - Hairline borders (surface-z2). Paper-edge precision.
+ *  - Ink-on-paper primary: surface-z9 bg / surface-z0 text.
+ *  - Single accent: primary (shu/vermillion) for active and CTA.
+ *  - Focus: border darkens — no glow rings.
+ *
+ * Use with data-style="zen-sumi" wrapper.
  */
 
-/* =============================================================================
-   Grada UI Design Tokens
-   ============================================================================= */
-
-[data-style='grada-ui'] {
-  /* Brand colors (from Figma) */
-  --gd-primary: #f27a54;
-  --gd-secondary: #a154f2;
-  --gd-gradient: linear-gradient(to right, #f27a54, #a154f2);
-
-  /* Semantic colors */
-  --gd-success: #6fcf97;
-  --gd-error-border: #cf6f8a;
-  --gd-error-text: #f27474;
-
-  /* Surface palette */
-  --gd-dark: #30363d;
-  --gd-surface-a: #3c444c;
-  --gd-surface-b: #747d88;
-  --gd-grey-c: #cbcfd4;
-
-  /* Typography */
-  font-family: 'Montserrat', sans-serif;
-}
-
 @import './button.css';
-@import './input.css';
 @import './toolbar.css';
 @import './tabs.css';
 @import './toggle.css';
@@ -43,6 +25,7 @@
 @import './menu.css';
 @import './dropdown.css';
 @import './floating-action.css';
+@import './input.css';
 @import './table.css';
 @import './search-filter.css';
 @import './range.css';
@@ -54,3 +37,15 @@
 @import './status-list.css';
 @import './step-indicator.css';
 @import './chart.css';
+@import './swatch.css';
+
+/* =============================================================================
+   Layout overrides — Ma (間) generous spacing
+   ============================================================================= */
+
+[data-style='zen-sumi'] {
+  --layout-section-gap: 2.5rem;
+  --layout-section-padding: 1.75rem;
+  --layout-content-padding: 2rem;
+  --layout-card-gap: 0.75rem;
+}