@rokkit/themes 1.0.0-next.124 → 1.0.0-next.127

package/src/material/button.css

@@ -0,0 +1,153 @@
+/**
+ * Button - Material Theme Styles
+ *
+ * Material Design inspired with elevation and shadows.
+ */
+
+/* =============================================================================
+   Default Style (filled)
+   ============================================================================= */
+
+[data-style='material'] [data-button][data-style='default'][data-variant='default'],
+[data-style='material'] [data-button]:not([data-style])[data-variant='default'],
+[data-style='material'] [data-button][data-style='default']:not([data-variant]),
+[data-style='material'] [data-button]:not([data-style]):not([data-variant]) {
+  @apply bg-surface-z2 text-surface-z8 shadow-sm;
+}
+
+[data-style='material'] [data-button][data-style='default'][data-variant='primary'],
+[data-style='material'] [data-button]:not([data-style])[data-variant='primary'] {
+  @apply bg-primary-z5 text-on-primary shadow-md;
+}
+
+[data-style='material'] [data-button][data-style='default'][data-variant='secondary'],
+[data-style='material'] [data-button]:not([data-style])[data-variant='secondary'] {
+  @apply bg-secondary-z4 text-on-secondary shadow-md;
+}
+
+[data-style='material'] [data-button][data-style='default'][data-variant='danger'],
+[data-style='material'] [data-button]:not([data-style])[data-variant='danger'] {
+  @apply bg-danger-z4 text-on-danger shadow-md;
+}
+
+/* =============================================================================
+   Outline Style
+   ============================================================================= */
+
+[data-style='material'] [data-button][data-style='outline'][data-variant='default'],
+[data-style='material'] [data-button][data-style='outline']:not([data-variant]) {
+  @apply border-surface-z4 text-surface-z7 border bg-transparent;
+}
+
+[data-style='material'] [data-button][data-style='outline'][data-variant='primary'] {
+  @apply border-primary-z4 text-primary-z6 border bg-transparent;
+}
+
+[data-style='material'] [data-button][data-style='outline'][data-variant='secondary'] {
+  @apply border-secondary-z4 text-secondary-z6 border bg-transparent;
+}
+
+[data-style='material'] [data-button][data-style='outline'][data-variant='danger'] {
+  @apply border-danger-z4 text-danger-z4 border bg-transparent;
+}
+
+/* =============================================================================
+   Ghost Style
+   ============================================================================= */
+
+[data-style='material'] [data-button][data-style='ghost'] {
+  @apply border-transparent bg-transparent;
+}
+
+[data-style='material'] [data-button][data-style='ghost'][data-variant='default'],
+[data-style='material'] [data-button][data-style='ghost']:not([data-variant]) {
+  @apply text-surface-z7;
+}
+
+[data-style='material'] [data-button][data-style='ghost'][data-variant='primary'] {
+  @apply text-primary-z6;
+}
+
+[data-style='material'] [data-button][data-style='ghost'][data-variant='secondary'] {
+  @apply text-secondary-z6;
+}
+
+[data-style='material'] [data-button][data-style='ghost'][data-variant='danger'] {
+  @apply text-danger-z4;
+}
+
+/* =============================================================================
+   Gradient Style
+   ============================================================================= */
+
+[data-style='material'] [data-button][data-style='gradient'][data-variant='default'],
+[data-style='material'] [data-button][data-style='gradient']:not([data-variant]) {
+  @apply from-surface-z3 to-surface-z1 text-surface-z10 shadow-md bg-gradient-to-br;
+}
+
+[data-style='material'] [data-button][data-style='gradient'][data-variant='primary'] {
+  @apply from-primary-z5 to-primary-z3 text-on-primary shadow-md bg-gradient-to-br;
+}
+
+[data-style='material'] [data-button][data-style='gradient'][data-variant='secondary'] {
+  @apply from-secondary-z5 to-secondary-z3 text-on-secondary shadow-md bg-gradient-to-br;
+}
+
+[data-style='material'] [data-button][data-style='gradient'][data-variant='danger'] {
+  @apply from-danger-z5 to-danger-z3 text-on-danger shadow-md bg-gradient-to-br;
+}
+
+[data-style='material'] [data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
+  filter: brightness(1.08);
+  @apply shadow-lg;
+}
+
+/* =============================================================================
+   Link Style
+   ============================================================================= */
+
+[data-style='material'] [data-button][data-style='link'][data-variant='default'],
+[data-style='material'] [data-button][data-style='link']:not([data-variant]) {
+  @apply text-surface-z7;
+}
+
+[data-style='material'] [data-button][data-style='link'][data-variant='primary'] {
+  @apply text-primary-z6;
+}
+
+[data-style='material'] [data-button][data-style='link'][data-variant='secondary'] {
+  @apply text-secondary-z6;
+}
+
+[data-style='material'] [data-button][data-style='link'][data-variant='danger'] {
+  @apply text-danger-z4;
+}
+
+[data-style='material'] [data-button][data-style='link']:hover:not(:disabled):not([data-disabled]) {
+  @apply text-primary-z7;
+}
+
+/* =============================================================================
+   Hover States
+   ============================================================================= */
+
+[data-style='material'] [data-button][data-style='default']:hover:not(:disabled):not([data-disabled]),
+[data-style='material'] [data-button]:not([data-style]):hover:not(:disabled):not([data-disabled]) {
+  @apply shadow-md;
+}
+
+[data-style='material'] [data-button][data-style='outline']:hover:not(:disabled):not([data-disabled]) {
+  @apply bg-surface-z1;
+}
+
+[data-style='material'] [data-button][data-style='ghost']:hover:not(:disabled):not([data-disabled]) {
+  @apply bg-surface-z2;
+}
+
+/* =============================================================================
+   Focus
+   ============================================================================= */
+
+[data-style='material'] [data-button]:focus-visible {
+  @apply ring-primary-z4 ring-2 ring-offset-2 outline-none;
+}

package/src/material/floating-action.css

@@ -0,0 +1,60 @@
+/**
+ * FloatingAction - Material Theme Styles
+ *
+ * Material Design inspired with elevation and shadows.
+ */
+
+/* =============================================================================
+   FAB Trigger Button
+   ============================================================================= */
+
+[data-style='material'] [data-fab-trigger] {
+  @apply bg-primary-z5 text-white shadow-lg;
+}
+
+[data-style='material'] [data-fab-trigger]:hover:not(:disabled) {
+  @apply bg-primary-z6 shadow-xl;
+  transform: scale(1.05);
+}
+
+[data-style='material'] [data-fab-trigger]:focus-visible {
+  @apply ring-primary-z4 ring-2 ring-offset-2 outline-none;
+}
+
+[data-style='material'] [data-fab][data-open='true'] [data-fab-trigger] {
+  @apply bg-surface-z4 text-surface-z10 shadow-lg;
+  transform: rotate(45deg);
+}
+
+/* =============================================================================
+   FAB Items
+   ============================================================================= */
+
+[data-style='material'] [data-fab-item] {
+  @apply bg-surface-z1 text-surface-z8 shadow-md;
+}
+
+[data-style='material'] [data-fab-item]:hover:not(:disabled) {
+  @apply bg-surface-z2 text-surface-z10 shadow-lg;
+}
+
+[data-style='material'] [data-fab-item]:focus-visible {
+  @apply ring-primary-z4 ring-2 outline-none;
+}
+
+/* Item icon */
+[data-style='material'] [data-fab-item] [data-fab-item-icon] {
+  @apply text-primary-z6;
+}
+
+[data-style='material'] [data-fab-item]:hover:not(:disabled) [data-fab-item-icon] {
+  @apply text-primary-z7;
+}
+
+/* =============================================================================
+   Backdrop
+   ============================================================================= */
+
+[data-style='material'] [data-fab-backdrop] {
+  background: rgba(0, 0, 0, 0.5);
+}

package/src/material/floating-navigation.css

@@ -0,0 +1,74 @@
+/**
+ * FloatingNavigation - Material Theme Styles
+ *
+ * Material Design inspired with elevation and shadows.
+ */
+
+/* =============================================================================
+   Container
+   ============================================================================= */
+
+[data-style='material'] [data-floating-nav] {
+  @apply bg-surface-z1 shadow-xl;
+}
+
+/* =============================================================================
+   Header
+   ============================================================================= */
+
+[data-style='material'] [data-floating-nav-title] {
+  @apply text-surface-z6;
+}
+
+[data-style='material'] [data-floating-nav-pin] {
+  @apply text-surface-z6;
+}
+
+[data-style='material'] [data-floating-nav-pin]:hover {
+  @apply text-primary-z6;
+}
+
+[data-style='material'] [data-floating-nav-pin][aria-pressed='true'] {
+  @apply text-primary-z7;
+}
+
+/* =============================================================================
+   Items
+   ============================================================================= */
+
+[data-style='material'] [data-floating-nav-item] {
+  @apply text-surface-z8;
+}
+
+[data-style='material'] [data-floating-nav-item]:hover {
+  @apply bg-surface-z2 text-surface-z10;
+}
+
+[data-style='material'] [data-floating-nav-item][data-active] {
+  @apply text-primary-z7 bg-primary-z5/10;
+}
+
+[data-style='material'] [data-floating-nav-item]:focus-visible {
+  @apply ring-primary-z4 ring-2 outline-none;
+}
+
+/* Icon */
+[data-style='material'] [data-floating-nav-icon] {
+  @apply text-surface-z6;
+}
+
+[data-style='material'] [data-floating-nav-item]:hover [data-floating-nav-icon] {
+  @apply text-primary-z6;
+}
+
+[data-style='material'] [data-floating-nav-item][data-active] [data-floating-nav-icon] {
+  @apply text-primary-z7;
+}
+
+/* =============================================================================
+   Active Indicator
+   ============================================================================= */
+
+[data-style='material'] [data-floating-nav-indicator] {
+  @apply bg-primary-z5 shadow-sm;
+}

package/src/material/index.css

@@ -0,0 +1,23 @@
+/**
+ * @rokkit/themes - Material Theme
+ *
+ * Material Design inspired styling with elevation shadows and ripple effects.
+ * Use with data-style="material" wrapper.
+ */
+
+@import './button.css';
+@import './input.css';
+@import './toolbar.css';
+@import './tabs.css';
+@import './toggle.css';
+@import './switch.css';
+@import './list.css';
+@import './tree.css';
+@import './select.css';
+@import './menu.css';
+@import './floating-action.css';
+@import './table.css';
+@import './search-filter.css';
+@import './range.css';
+@import './timeline.css';
+@import './floating-navigation.css';

package/src/material/input.css

@@ -1,65 +1,143 @@
-[data-style='material'] input {
-  @apply border-box focus:outline-none;
+/* Material Theme - Form field and input styles
+ * Material Design outlined text field with floating label.
+ */
+
+/* Form background: needed so floating label pill matches */
+[data-style='material'] [data-form-root] {
+  @apply bg-surface-z1;
+  --material-bg: rgba(var(--color-surface-100), 1);
+}
+
+[data-mode='dark'] [data-style='material'] [data-form-root] {
+  --material-bg: rgba(var(--color-surface-900), 1);
+}
+
+/* Field root: relative positioning for floating label */
+[data-style='material'] [data-field-root] {
+  @apply relative gap-0;
+}
+
+/* Input root: outlined border */
+[data-style='material'] [data-input-root] {
+  @apply flex items-center border border-surface-z4 rounded bg-transparent p-0 transition-all;
+  background-image: none;
 }
-[data-style='material'] rk-input-field {
-  @apply border-surface-z3 box-border rounded border;
-  @apply text-surface-800 relative pb-0 leading-loose;
+
+[data-style='material'] [data-input-root]:hover {
+  @apply border-surface-z6;
 }
-[data-style='material'] rk-input-field.empty label {
-  @apply absolute top-0 my-3.5 align-middle;
+
+[data-style='material'] [data-input-root]:focus-within {
+  @apply border-primary-z5 bg-transparent;
+  background-image: none;
 }
 
-[data-style='material'] rk-input-field input,
-[data-style='material'] rk-input-field > field > :not(icon) {
-  @apply border-none bg-transparent focus:outline-none;
+/* Inputs inside wrapper */
+[data-style='material'] [data-input-root] input:not([type='checkbox'], [type='radio'], [type='color']),
+[data-style='material'] [data-input-root] textarea,
+[data-style='material'] [data-input-root] select {
+  @apply bg-transparent text-surface-z9 w-full border-none px-3 py-2.5 outline-none transition-all;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
 }
 
-[data-style='material'] rk-input-field:focus-within {
-  @apply border-primary;
+[data-style='material'] [data-input-root] textarea {
+  @apply resize-vertical min-h-20;
 }
 
-[data-style='material'] rk-input-field label,
-[data-style='material'] rk-input-field:focus-within label {
-  @apply bg-surface-z1 z-1 absolute block;
-  @apply -top-2 left-3 my-0 px-1 leading-tight opacity-100;
+/* Select inside input-root */
+[data-style='material'] [data-input-root] [data-select-trigger] {
+  @apply bg-transparent text-surface-z9 border-none rounded px-3 shadow-none ring-0 focus:outline-none;
+  font-size: 0.875rem;
 }
 
-[data-style='material'] rk-input-select {
-  @apply cursor-pointer select-none rounded;
+/* Suppress standalone select open-state ring/border when inside input-root */
+[data-style='material'] [data-input-root] [data-select][data-open='true'] [data-select-trigger] {
+  @apply border-none ring-0 shadow-none;
 }
-[data-style='material'] rk-input-select > selected-item {
-  @apply bg-surface-z1 h-8 items-center pl-4 pr-0 normal-case;
-  @apply border-surface-z3 text-surface-800 rounded border;
-  @apply hover:bg-surface-z3 hover:border-secondary-600;
+
+/* Labels: floating label effect (exclude checkbox — uses inline label) */
+[data-style='material'] [data-field-root]:not([data-field-type='checkbox']) [data-field] > label {
+  @apply text-surface-z5 text-sm absolute left-3 px-1 transition-all pointer-events-none;
+  top: 50%;
+  transform: translateY(-50%);
+  background: transparent;
+  z-index: 1;
 }
 
-[data-style='material'] rk-input-select:hover square-icon {
-  @apply border-surface;
+/* Label floats up when input has focus or value */
+[data-style='material'] [data-field-root]:not([data-field-type='checkbox']) [data-field]:has([data-input-root]:focus-within) > label,
+[data-style='material'] [data-field-root]:not([data-field-type='checkbox']):not([data-field-empty='true']) [data-field] > label {
+  @apply text-xs;
+  top: 0;
+  transform: translateY(-50%);
+  background: var(--material-bg, rgba(var(--color-surface-100), 1));
+  padding-inline: 0.25rem;
 }
-[data-style='material'] rk-input-select scroll {
-  @apply mt-2 shadow-lg;
+
+[data-style='material'] [data-field-root]:not([data-field-type='checkbox']) [data-field]:has([data-input-root]:focus-within) > label {
+  @apply text-primary-z5;
 }
 
-[data-style='material'] rk-input-range range-track selected {
-  @apply bg-primary border-0;
+/* Checkbox fields: inline label, centered with icon */
+[data-style='material'] [data-field-type='checkbox'] [data-field] {
+  @apply flex flex-row items-center gap-2;
 }
-[data-style='material'] rk-input-range range-track rk-thumb {
-  @apply bg-primary-600 -top-1.5;
+
+[data-style='material'] [data-field-type='checkbox'] [data-field] > label {
+  @apply text-surface-z7 text-sm;
 }
-[data-style='material'] rk-input-range rk-thumb.sliding::before {
-  @apply bg-primary-400;
+
+/* Form-level labels (FormRenderer) */
+[data-style='material'] [data-form-root] label {
+  @apply text-surface-z5 text-sm;
 }
 
-[data-style='material'] rk-rating {
-  @apply text-surface-600 text-xl focus:outline-none;
+/* Info field value */
+[data-style='material'] [data-field-info] {
+  @apply text-primary-z6;
 }
-[data-style='material'] rk-rating > rk-icon {
-  @apply w-8;
+
+/* Separator */
+[data-style='material'] [data-form-separator] {
+  @apply border-surface-z3;
 }
-[data-style='material'] rk-rating:focus-within rk-icon[aria-checked='true'] {
-  @apply text-secondary;
+
+/* Disabled state */
+[data-style='material'] [data-field-disabled] [data-input-root] {
+  @apply border-surface-z3 bg-surface-z1 opacity-60 cursor-not-allowed;
+}
+
+/* Error state */
+[data-style='material'] [data-field-state='fail'] [data-input-root] {
+  @apply border-danger-z4;
+}
+
+[data-style='material'] [data-field-root]:not([data-field-type='checkbox'])[data-field-state='fail'] [data-field] > label {
+  @apply text-danger-z4;
+}
+
+/* Description */
+[data-style='material'] [data-description] {
+  @apply text-surface-z5 mt-1 text-xs px-3;
+}
+
+/* Message */
+[data-style='material'] [data-message] {
+  @apply text-danger-z5 text-xs mt-1 px-3;
+}
+
+/* Checkbox */
+[data-style='material'] [data-checkbox-icon] {
+  @apply text-surface-z5 text-lg;
+}
+
+[data-style='material'] [data-checkbox-root][data-variant='custom']:has(input:checked) [data-checkbox-icon] {
+  @apply text-primary-z5;
 }
 
-[data-style='material'] rk-rating rk-icon.hovering > i {
-  @apply text-primary;
+/* Placeholders */
+[data-style='material'] [data-input-root] input::placeholder,
+[data-style='material'] [data-input-root] textarea::placeholder {
+  @apply text-surface-z4;
 }