mithril-materialized 2.0.0-beta.5 → 2.0.0-beta.7

package/sass/components/_theme-variables.scss

@@ -0,0 +1,187 @@
+// Theme Variables using CSS Custom Properties
+// This enables runtime theme switching including dark mode
+
+:root {
+  // Light theme (default)
+  --mm-primary-color: #26a69a;
+  --mm-primary-color-light: #80cbc4;
+  --mm-primary-color-dark: #00695c;
+  
+  --mm-secondary-color: #ff6f00;
+  --mm-secondary-color-light: #ffa726;
+  --mm-secondary-color-dark: #ef6c00;
+  
+  // Background colors
+  --mm-background-color: #ffffff;
+  --mm-surface-color: #ffffff;
+  --mm-card-background: #ffffff;
+  
+  // Text colors
+  --mm-text-primary: rgba(0, 0, 0, 0.87);
+  --mm-text-secondary: rgba(0, 0, 0, 0.6);
+  --mm-text-disabled: rgba(0, 0, 0, 0.38);
+  --mm-text-hint: rgba(0, 0, 0, 0.38);
+  
+  // Border and divider colors
+  --mm-border-color: rgba(0, 0, 0, 0.12);
+  --mm-divider-color: rgba(0, 0, 0, 0.12);
+  
+  // Input colors
+  --mm-input-background: #ffffff;
+  --mm-input-border: rgba(0, 0, 0, 0.42);
+  --mm-input-border-focus: var(--mm-primary-color);
+  --mm-input-text: var(--mm-text-primary);
+  
+  // Button colors
+  --mm-button-background: var(--mm-primary-color);
+  --mm-button-text: #ffffff;
+  --mm-button-flat-text: var(--mm-primary-color);
+  
+  // Navigation colors
+  --mm-nav-background: var(--mm-primary-color);
+  --mm-nav-text: #ffffff;
+  --mm-nav-active-text: #ffffff;
+  
+  // Modal and overlay colors
+  --mm-modal-background: #ffffff;
+  --mm-overlay-background: rgba(0, 0, 0, 0.5);
+  
+  // Shadow colors
+  --mm-shadow-color: rgba(0, 0, 0, 0.16);
+  --mm-shadow-umbra: rgba(0, 0, 0, 0.2);
+  --mm-shadow-penumbra: rgba(0, 0, 0, 0.14);
+  --mm-shadow-ambient: rgba(0, 0, 0, 0.12);
+  
+  // Switch colors
+  --mm-switch-checked-track: rgba(38, 166, 154, 0.3);
+  --mm-switch-checked-thumb: #26a69a;
+  --mm-switch-unchecked-track: rgba(0, 0, 0, 0.6);
+  --mm-switch-unchecked-thumb: #f5f5f5;
+  --mm-switch-disabled-track: rgba(0, 0, 0, 0.12);
+  --mm-switch-disabled-thumb: #bdbdbd;
+}
+
+// Apply theme variables to body and main containers
+body {
+  background-color: var(--mm-background-color);
+  color: var(--mm-text-primary);
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.container, .main {
+  color: var(--mm-text-primary);
+}
+
+// Dark theme
+[data-theme="dark"] {
+  --mm-primary-color: #80cbc4;
+  --mm-primary-color-light: #b2dfdb;
+  --mm-primary-color-dark: #4db6ac;
+  
+  --mm-secondary-color: #ffa726;
+  --mm-secondary-color-light: #ffcc02;
+  --mm-secondary-color-dark: #ff8f00;
+  
+  // Background colors
+  --mm-background-color: #121212;
+  --mm-surface-color: #1e1e1e;
+  --mm-card-background: #2d2d2d;
+  
+  // Text colors
+  --mm-text-primary: rgba(255, 255, 255, 0.87);
+  --mm-text-secondary: rgba(255, 255, 255, 0.6);
+  --mm-text-disabled: rgba(255, 255, 255, 0.38);
+  --mm-text-hint: rgba(255, 255, 255, 0.38);
+  
+  // Border and divider colors
+  --mm-border-color: rgba(255, 255, 255, 0.12);
+  --mm-divider-color: rgba(255, 255, 255, 0.12);
+  
+  // Input colors
+  --mm-input-background: #2d2d2d;
+  --mm-input-border: rgba(255, 255, 255, 0.42);
+  --mm-input-border-focus: var(--mm-primary-color);
+  --mm-input-text: var(--mm-text-primary);
+  
+  // Button colors
+  --mm-button-background: var(--mm-primary-color);
+  --mm-button-text: #000000;
+  --mm-button-flat-text: var(--mm-primary-color);
+  
+  // Navigation colors
+  --mm-nav-background: #1e1e1e;
+  --mm-nav-text: #ffffff;
+  --mm-nav-active-text: #000000;
+  
+  // Modal and overlay colors
+  --mm-modal-background: #2d2d2d;
+  --mm-overlay-background: rgba(0, 0, 0, 0.8);
+  
+  // Shadow colors
+  --mm-shadow-color: rgba(0, 0, 0, 0.5);
+  --mm-shadow-umbra: rgba(0, 0, 0, 0.5);
+  --mm-shadow-penumbra: rgba(0, 0, 0, 0.36);
+  --mm-shadow-ambient: rgba(0, 0, 0, 0.3);
+  
+  // Switch colors (dark theme)
+  --mm-switch-checked-track: rgba(128, 203, 196, 0.3);
+  --mm-switch-checked-thumb: #80cbc4;
+  --mm-switch-unchecked-track: rgba(255, 255, 255, 0.6);
+  --mm-switch-unchecked-thumb: #616161;
+  --mm-switch-disabled-track: rgba(255, 255, 255, 0.12);
+  --mm-switch-disabled-thumb: #424242;
+}
+
+// Auto dark mode based on user preference
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --mm-primary-color: #80cbc4;
+    --mm-primary-color-light: #b2dfdb;
+    --mm-primary-color-dark: #4db6ac;
+    
+    --mm-secondary-color: #ffa726;
+    --mm-secondary-color-light: #ffcc02;
+    --mm-secondary-color-dark: #ff8f00;
+    
+    --mm-background-color: #121212;
+    --mm-surface-color: #1e1e1e;
+    --mm-card-background: #2d2d2d;
+    
+    --mm-text-primary: rgba(255, 255, 255, 0.87);
+    --mm-text-secondary: rgba(255, 255, 255, 0.6);
+    --mm-text-disabled: rgba(255, 255, 255, 0.38);
+    --mm-text-hint: rgba(255, 255, 255, 0.38);
+    
+    --mm-border-color: rgba(255, 255, 255, 0.12);
+    --mm-divider-color: rgba(255, 255, 255, 0.12);
+    
+    --mm-input-background: #2d2d2d;
+    --mm-input-border: rgba(255, 255, 255, 0.42);
+    --mm-input-border-focus: var(--mm-primary-color);
+    --mm-input-text: var(--mm-text-primary);
+    
+    --mm-button-background: var(--mm-primary-color);
+    --mm-button-text: #000000;
+    --mm-button-flat-text: var(--mm-primary-color);
+    
+    --mm-nav-background: #1e1e1e;
+    --mm-nav-text: #ffffff;
+    --mm-nav-active-text: #000000;
+    
+    --mm-modal-background: #2d2d2d;
+    --mm-overlay-background: rgba(0, 0, 0, 0.8);
+    
+    --mm-shadow-color: rgba(0, 0, 0, 0.5);
+    --mm-shadow-umbra: rgba(0, 0, 0, 0.5);
+    --mm-shadow-penumbra: rgba(0, 0, 0, 0.36);
+    --mm-shadow-ambient: rgba(0, 0, 0, 0.3);
+    
+    // Switch colors (auto dark theme)
+    --mm-switch-checked-track: rgba(128, 203, 196, 0.3);
+    --mm-switch-checked-thumb: #80cbc4;
+    --mm-switch-unchecked-track: rgba(255, 255, 255, 0.6);
+    --mm-switch-unchecked-thumb: #616161;
+    --mm-switch-disabled-track: rgba(255, 255, 255, 0.12);
+    --mm-switch-disabled-thumb: #424242;
+  }
+}

package/sass/components/_timepicker.scss

@@ -35,7 +35,7 @@
   gap: 8px;
   margin-top: 8px;
   padding: 12px;
-  background-color: #f5f5f5;
+  background-color: var(--mm-border-color, #f5f5f5);
   border-radius: 4px;
   font-size: 14px;
 
@@ -48,13 +48,13 @@
       width: 50px;
       text-align: center;
       padding: 4px;
-      border: 1px solid #ccc;
+      border: 1px solid var(--mm-border-color, #ccc);
       border-radius: 4px;
     }
 
     select {
       padding: 4px;
-      border: 1px solid #ccc;
+      border: 1px solid var(--mm-border-color, #ccc);
       border-radius: 4px;
       margin-left: 4px;
     }
@@ -63,7 +63,7 @@
   input[type="time"] {
     font-size: 16px;
     padding: 4px 8px;
-    border: 1px solid #ccc;
+    border: 1px solid var(--mm-border-color, #ccc);
     border-radius: 4px;
     min-width: 120px;
   }
@@ -71,7 +71,7 @@
   .btn-flat {
     padding: 4px 8px;
     font-size: 11px;
-    background-color: #e0e0e0;
+    background-color: var(--mm-border-color, #e0e0e0);
     border-radius: 4px;
     min-width: auto;
   }

package/sass/components/_wizard.scss

@@ -0,0 +1,416 @@
+// Wizard/Stepper Component Styles
+
+.wizard {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  
+  &.horizontal {
+    .wizard-steps {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      position: relative;
+    }
+    
+    .wizard-step {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      flex: 1;
+      position: relative;
+      
+      &:not(:last-child) {
+        margin-right: 2rem;
+      }
+    }
+    
+    .wizard-step-content {
+      margin-top: 0.75rem;
+      max-width: 200px;
+    }
+    
+    .wizard-step-connector {
+      position: absolute;
+      top: 20px;
+      left: calc(50% + 20px);
+      width: calc(100% - 40px);
+      height: 2px;
+      background: var(--mm-border-color, rgba(0, 0, 0, 0.12));
+      z-index: 1;
+    }
+  }
+  
+  &.vertical {
+    .wizard-steps {
+      display: flex;
+      flex-direction: column;
+    }
+    
+    .wizard-step {
+      display: flex;
+      align-items: flex-start;
+      text-align: left;
+      position: relative;
+      padding-bottom: 2rem;
+      
+      &:last-child {
+        padding-bottom: 0;
+      }
+    }
+    
+    .wizard-step-content {
+      margin-left: 1rem;
+      flex: 1;
+    }
+    
+    .wizard-step-connector {
+      position: absolute;
+      top: 40px;
+      left: 19px;
+      bottom: -2rem;
+      width: 2px;
+      background: var(--mm-border-color, rgba(0, 0, 0, 0.12));
+      z-index: 1;
+    }
+  }
+}
+
+.wizard-header {
+  margin-bottom: 2rem;
+}
+
+.wizard-step {
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+  
+  &.disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  
+  &:hover:not(.disabled) {
+    .wizard-step-indicator {
+      box-shadow: 0 0 0 8px var(--mm-primary-color-light, rgba(38, 166, 154, 0.1));
+    }
+  }
+}
+
+.wizard-step-indicator {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--mm-border-color, rgba(0, 0, 0, 0.12));
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  font-weight: 500;
+  font-size: 0.875rem;
+  transition: all 0.2s ease;
+  position: relative;
+  z-index: 2;
+  
+  .material-icons {
+    font-size: 1.25rem;
+  }
+  
+  .wizard-step-number {
+    font-weight: 600;
+  }
+}
+
+.wizard-step.active {
+  .wizard-step-indicator {
+    background: var(--mm-primary-color, #26a69a);
+    color: var(--mm-button-text, #ffffff);
+  }
+  
+  .wizard-step-title {
+    color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+    font-weight: 600;
+  }
+}
+
+.wizard-step.completed {
+  .wizard-step-indicator {
+    background: var(--mm-primary-color, #26a69a);
+    color: var(--mm-button-text, #ffffff);
+  }
+  
+  .wizard-step-connector {
+    background: var(--mm-primary-color, #26a69a);
+  }
+}
+
+.wizard-step.error {
+  .wizard-step-indicator {
+    background: #f44336;
+    color: #ffffff;
+  }
+  
+  .wizard-step-title {
+    color: #f44336;
+  }
+}
+
+.wizard-step-title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  margin-bottom: 0.25rem;
+  line-height: 1.3;
+}
+
+.wizard-step-subtitle {
+  font-size: 0.75rem;
+  color: var(--mm-text-hint, rgba(0, 0, 0, 0.38));
+  line-height: 1.3;
+  margin-bottom: 0.25rem;
+}
+
+.wizard-step-optional {
+  font-size: 0.625rem;
+  color: var(--mm-text-hint, rgba(0, 0, 0, 0.38));
+  font-style: italic;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.wizard-body {
+  flex: 1;
+  margin-bottom: 2rem;
+  
+  // Ensure form elements have proper responsive layout
+  .input-field {
+    margin-bottom: 1.5rem;
+    
+    input, textarea {
+      width: 100%;
+      box-sizing: border-box;
+    }
+    
+    label {
+      color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+      transition: all 0.3s ease;
+      
+      &.active {
+        color: var(--mm-primary-color, #26a69a);
+        transform: translateY(-14px) scale(0.8);
+      }
+    }
+  }
+  
+  .row {
+    margin-bottom: 0;
+    
+    .col {
+      padding: 0 0.75rem;
+      
+      &:first-child {
+        padding-left: 0;
+      }
+      
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+  }
+}
+
+.wizard-step-panel {
+  animation: wizard-slide-in 0.3s ease;
+}
+
+@keyframes wizard-slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.wizard-footer {
+  border-top: 1px solid var(--mm-border-color, rgba(0, 0, 0, 0.12));
+  padding-top: 1.5rem;
+}
+
+.wizard-navigation {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  
+  .wizard-btn-previous,
+  .wizard-btn-skip {
+    margin-right: auto;
+  }
+  
+  .wizard-btn-next,
+  .wizard-btn-complete {
+    margin-left: auto;
+    
+    .material-icons {
+      margin-right: 0.5rem;
+      animation: wizard-loading 1s infinite linear;
+    }
+  }
+}
+
+@keyframes wizard-loading {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// Compact variant
+.wizard.compact {
+  .wizard-step-indicator {
+    width: 32px;
+    height: 32px;
+    font-size: 0.75rem;
+    
+    .material-icons {
+      font-size: 1rem;
+    }
+  }
+  
+  .wizard-step-title {
+    font-size: 0.75rem;
+  }
+  
+  .wizard-step-subtitle {
+    font-size: 0.625rem;
+  }
+  
+  .wizard-header {
+    margin-bottom: 1.5rem;
+  }
+  
+  &.horizontal {
+    .wizard-step-connector {
+      top: 16px;
+    }
+  }
+  
+  &.vertical {
+    .wizard-step-connector {
+      top: 32px;
+      left: 15px;
+    }
+  }
+}
+
+// Large variant
+.wizard.large {
+  .wizard-step-indicator {
+    width: 48px;
+    height: 48px;
+    font-size: 1rem;
+    
+    .material-icons {
+      font-size: 1.5rem;
+    }
+  }
+  
+  .wizard-step-title {
+    font-size: 1rem;
+  }
+  
+  .wizard-step-subtitle {
+    font-size: 0.875rem;
+  }
+  
+  .wizard-header {
+    margin-bottom: 2.5rem;
+  }
+  
+  &.horizontal {
+    .wizard-step-connector {
+      top: 24px;
+    }
+  }
+  
+  &.vertical {
+    .wizard-step-connector {
+      top: 48px;
+      left: 23px;
+    }
+  }
+}
+
+// Responsive behavior
+@media (max-width: 768px) {
+  .wizard.horizontal {
+    .wizard-steps {
+      flex-direction: column;
+      align-items: stretch;
+    }
+    
+    .wizard-step {
+      flex-direction: row;
+      align-items: center;
+      text-align: left;
+      margin-right: 0;
+      margin-bottom: 1rem;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+    
+    .wizard-step-content {
+      margin-top: 0;
+      margin-left: 1rem;
+      max-width: none;
+    }
+    
+    .wizard-step-connector {
+      display: none;
+    }
+  }
+}
+
+// Dark theme adjustments
+[data-theme="dark"] {
+  .wizard-step.error {
+    .wizard-step-title {
+      color: #f48fb1;
+    }
+    
+    .wizard-step-indicator {
+      background: #f48fb1;
+      color: #000000;
+    }
+  }
+  
+  .wizard-footer {
+    border-color: var(--mm-border-color, rgba(255, 255, 255, 0.12));
+  }
+}
+
+// Accessibility improvements
+.wizard-step {
+  &:focus {
+    outline: 2px solid var(--mm-primary-color, #26a69a);
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+  
+  &[aria-disabled="true"] {
+    pointer-events: none;
+  }
+}
+
+.wizard-step-indicator {
+  &[aria-current="step"] {
+    box-shadow: 0 0 0 4px var(--mm-primary-color-light, rgba(38, 166, 154, 0.2));
+  }
+}