@rokkit/themes 1.0.4 → 1.1.0

package/src/rokkit/upload-progress.css

@@ -9,15 +9,15 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-upload-header] {
-  @apply text-surface-z7;
+  @apply text-ink-mute;
 }
 
 [data-style='rokkit'] [data-upload-clear] {
-  @apply border-surface-z4 text-surface-z6;
+  @apply border-paper-edge text-ink-soft;
 }
 
 [data-style='rokkit'] [data-upload-clear]:hover {
-  @apply bg-surface-z3 text-surface-z9;
+  @apply bg-paper-mute text-ink;
 }
 
 /* =============================================================================
@@ -25,11 +25,11 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-upload-file-status] {
-  @apply text-surface-z7;
+  @apply text-ink-mute;
 }
 
 [data-style='rokkit'] [data-upload-file-status]:hover {
-  @apply bg-surface-z2;
+  @apply bg-paper-mute;
 }
 
 /* =============================================================================
@@ -37,11 +37,11 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-upload-file-icon] {
-  @apply text-surface-z5;
+  @apply text-ink-soft;
 }
 
 [data-style='rokkit'] [data-upload-file-size] {
-  @apply text-surface-z5;
+  @apply text-ink-soft;
 }
 
 /* =============================================================================
@@ -49,11 +49,11 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-upload-bar] {
-  @apply bg-surface-z3;
+  @apply bg-paper-mute;
 }
 
 [data-style='rokkit'] [data-upload-fill] {
-  @apply from-primary-z5 to-secondary-z5 bg-gradient-to-r;
+  @apply from-primary to-accent bg-gradient-to-r;
 }
 
 /* =============================================================================
@@ -61,28 +61,28 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-upload-file-status][data-status='uploading'] [data-upload-status] {
-  @apply text-primary-z6;
+  @apply text-primary;
 }
 
 [data-style='rokkit'] [data-upload-file-status][data-status='done'] [data-upload-status] {
-  @apply text-green-500;
+  @apply text-success;
 }
 
 [data-style='rokkit'] [data-upload-file-status][data-status='error'] [data-upload-status] {
-  @apply text-red-500;
+  @apply text-danger;
 }
 
 [data-style='rokkit'] [data-upload-file-status][data-status='pending'] [data-upload-status] {
-  @apply text-surface-z5;
+  @apply text-ink-soft;
 }
 
 /* Status-based file icon tinting */
 [data-style='rokkit'] [data-upload-file-status][data-status='done'] [data-upload-file-icon] {
-  @apply text-green-500;
+  @apply text-success;
 }
 
 [data-style='rokkit'] [data-upload-file-status][data-status='error'] [data-upload-file-icon] {
-  @apply text-red-500;
+  @apply text-danger;
 }
 
 /* =============================================================================
@@ -90,13 +90,13 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-upload-actions] button {
-  @apply text-surface-z5;
+  @apply text-ink-soft;
 }
 
 [data-style='rokkit'] [data-upload-actions] button:hover {
-  @apply bg-surface-z3 text-surface-z9;
+  @apply bg-paper-mute text-ink;
 }
 
 [data-style='rokkit'] [data-upload-file-status][data-status='error'] [data-upload-retry]:hover {
-  @apply text-primary-z7;
+  @apply text-primary;
 }

package/src/rokkit/upload-target.css

@@ -9,20 +9,20 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-upload-target] {
-  @apply border-surface-z4 text-surface-z6;
+  @apply border-paper-edge text-ink-soft;
 }
 
 [data-style='rokkit'] [data-upload-target]:hover:not([data-disabled]) {
-  @apply border-surface-z5 text-surface-z7 bg-surface-z2;
+  @apply border-ink-soft text-ink-mute bg-paper-mute;
 }
 
 [data-style='rokkit'] [data-upload-target]:focus-visible:not([data-disabled]) {
-  @apply border-primary-z5 ring-primary-z3 ring-2;
+  @apply border-primary ring-primary ring-2;
 }
 
 /* Drag-over highlight */
 [data-style='rokkit'] [data-upload-target][data-dragging] {
-  @apply border-primary-z5 bg-primary-z2 text-primary-z7;
+  @apply border-primary bg-primary text-primary;
 }
 
 /* =============================================================================
@@ -30,11 +30,11 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-upload-target] [data-upload-icon] {
-  @apply text-surface-z5;
+  @apply text-ink-soft;
 }
 
 [data-style='rokkit'] [data-upload-target][data-dragging] [data-upload-icon] {
-  @apply text-primary-z6;
+  @apply text-primary;
 }
 
 /* =============================================================================
@@ -42,9 +42,9 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-upload-target] [data-upload-button] {
-  @apply border-surface-z4 text-surface-z7;
+  @apply border-paper-edge text-ink-mute;
 }
 
 [data-style='rokkit'] [data-upload-target] [data-upload-button]:hover:not(:disabled) {
-  @apply bg-surface-z3 text-surface-z9;
+  @apply bg-paper-mute text-ink;
 }

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-ink text-paper 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 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-accent text-on-primary 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 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 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-paper-mute text-ink-mute border bg-transparent;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='outline'][data-variant='primary'] {
+  @apply border-primary text-primary border bg-transparent;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='outline'][data-variant='secondary'] {
+  @apply border-accent text-accent border bg-transparent;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='outline'][data-variant='accent'] {
+  @apply border-accent text-accent border bg-transparent;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='outline'][data-variant='danger'] {
+  @apply border-danger text-danger 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-soft;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='ghost'][data-variant='primary'] {
+  @apply text-primary;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='ghost'][data-variant='secondary'] {
+  @apply text-accent;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='ghost'][data-variant='accent'] {
+  @apply text-accent;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='ghost'][data-variant='danger'] {
+  @apply text-danger;
+}
+
+/* =============================================================================
+   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-paper-mute text-ink-mute bg-none;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='gradient'][data-variant='primary'] {
+  @apply bg-primary text-on-primary bg-none;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='gradient'][data-variant='secondary'] {
+  @apply bg-accent text-on-primary bg-none;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='gradient'][data-variant='accent'] {
+  @apply bg-accent text-on-accent bg-none;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='gradient'][data-variant='danger'] {
+  @apply bg-danger 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-soft;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='link'][data-variant='primary'] {
+  @apply text-primary;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='link'][data-variant='secondary'] {
+  @apply text-accent;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='link'][data-variant='accent'] {
+  @apply text-accent;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='link'][data-variant='danger'] {
+  @apply text-danger;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='link']:hover:not(:disabled):not([data-disabled]) {
+  @apply text-ink-mute;
+}
+
+/* =============================================================================
+   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-ink bg-none;
+}
+
+[data-style='zen-sumi']
+  [data-button][data-style='outline']:hover:not(:disabled):not([data-disabled]) {
+  @apply bg-paper-soft border-ink-soft bg-none;
+}
+
+[data-style='zen-sumi'] [data-button][data-style='ghost']:hover:not(:disabled):not([data-disabled]) {
+  @apply bg-paper-mute;
+}
+
+/* =============================================================================
+   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-paper-soft border-paper-mute text-ink-mute 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-paper-edge bg-paper-mute bg-none;
+}
+
+[data-style='zen-sumi'] [data-card][data-card-interactive]:active {
+  @apply bg-paper-mute bg-none;
+}
+
+/* =============================================================================
+   Card Sections
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-card-header] {
+  @apply border-paper-mute border-b;
+}
+
+[data-style='zen-sumi'] [data-card-body] {
+  @apply text-ink-mute;
+}
+
+[data-style='zen-sumi'] [data-card-footer] {
+  @apply border-paper-mute text-ink-soft 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 border-primary 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/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-accent border-accent text-on-primary 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-accent/40;
+}
+
+[data-style='zen-sumi'] [data-card][data-variant='secondary'] [data-card-body] {
+  @apply text-on-primary/80;
+}
+
+/* Tertiary — recessed surface, lighter border */
+[data-style='zen-sumi'] [data-card][data-variant='tertiary'] {
+  @apply bg-paper border-paper-mute text-ink-soft 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-paper-mute;
+}
+
+[data-style='zen-sumi'] [data-chart-tick-label] {
+  @apply fill-ink-soft;
+}
+
+[data-style='zen-sumi'] [data-chart-grid-line] {
+  @apply stroke-paper-mute;
+  stroke-opacity: 0.4;
+  stroke-dasharray: 2 4;
+}
+
+[data-style='zen-sumi'] [data-chart-legend-label] {
+  @apply fill-ink-soft;
+}
+
+[data-style='zen-sumi'] [data-chart-legend-item]:hover {
+  @apply text-ink-mute;
+}
+
+[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-paper-edge;
+}

package/src/zen-sumi/code-block.css

@@ -0,0 +1,35 @@
+/**
+ * CodeBlock — Zen-Sumi theme.
+ *
+ * Inherits the Frame chrome (border, header bg). This file adds the
+ * mono typography + muted ink colours for the title row, lang chip,
+ * action buttons, and pre/code body.
+ */
+
+[data-style='zen-sumi'] [data-code-block-icon] {
+	@apply text-ink-soft;
+}
+
+[data-style='zen-sumi'] [data-code-block-filename] {
+	font: 500 11.5px var(--font-mono);
+	@apply text-ink-mute;
+}
+
+[data-style='zen-sumi'] [data-code-block-lang] {
+	font: 500 10px var(--font-mono);
+	@apply text-ink-soft border-paper-edge border;
+}
+
+[data-style='zen-sumi'] [data-code-block-actions] button {
+	font: 500 11px var(--font-mono);
+	@apply text-ink-soft;
+}
+
+[data-style='zen-sumi'] [data-code-block-actions] button:hover {
+	@apply bg-paper-mute text-ink;
+}
+
+[data-style='zen-sumi'] [data-code-block-body] pre {
+	font: 400 12px/1.65 var(--font-mono);
+	@apply text-ink;
+}

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-paper-mute text-ink-soft border bg-transparent bg-none;
+}
+
+[data-style='zen-sumi'] [data-dropdown-trigger]:hover:not(:disabled) {
+  @apply text-ink-mute border-paper-edge 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-ink-soft bg-none;
+}
+
+[data-style='zen-sumi'] [data-dropdown-trigger] [data-dropdown-icon] {
+  @apply text-paper-edge;
+}
+
+[data-style='zen-sumi'] [data-dropdown-trigger] [data-dropdown-arrow] {
+  @apply text-paper-edge;
+}
+
+[data-style='zen-sumi'] [data-dropdown-panel] {
+  @apply bg-paper border-paper-mute border bg-none;
+  box-shadow: none;
+}
+
+[data-style='zen-sumi'] [data-dropdown-option] {
+  @apply text-ink-soft;
+}
+
+[data-style='zen-sumi'] [data-dropdown-option]:hover:not(:disabled),
+[data-style='zen-sumi'] [data-dropdown-option]:focus:not(:disabled) {
+  @apply bg-paper-mute text-ink-mute bg-none outline-none;
+}
+
+[data-style='zen-sumi'] [data-dropdown-option][data-active='true'] {
+  @apply text-ink-mute border-primary border-l-2 bg-none;
+}
+
+[data-style='zen-sumi'] [data-dropdown-separator] {
+  @apply bg-paper-mute 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-paper-soft text-ink-mute border-paper-mute border bg-none;
+  box-shadow: none;
+}
+
+[data-style='zen-sumi'] [data-fab-trigger]:hover:not(:disabled) {
+  @apply bg-paper-mute text-ink-mute border-paper-edge 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-paper-mute border-paper-edge 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-paper-soft text-ink-soft border-paper-mute border bg-none;
+  box-shadow: none;
+}
+
+[data-style='zen-sumi'] [data-fab-item]:hover:not(:disabled) {
+  @apply bg-paper-mute text-ink-mute border-paper-edge 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-paper-edge;
+}
+
+[data-style='zen-sumi'] [data-fab-item]:hover:not(:disabled) [data-fab-item-icon] {
+  @apply text-ink-soft;
+}
+
+/* =============================================================================
+   Backdrop
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-fab-backdrop] {
+  background: color-mix(in oklch, var(--color-surface-z9) 15%, transparent);
+}