mithril-materialized 2.0.0-beta.2 → 2.0.0-beta.4

package/sass/components/_theme-variables.scss

@@ -0,0 +1,205 @@
+// 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);
+  
+  // Chip colors
+  --mm-chip-bg: #e4e4e4;
+  --mm-chip-text: var(--mm-text-secondary);
+  
+  // Dropdown colors
+  --mm-dropdown-hover: #eee;
+  --mm-dropdown-focus: #ddd;
+  --mm-dropdown-selected: #e3f2fd;
+  --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);
+  
+  // Chip colors
+  --mm-chip-bg: #424242;
+  --mm-chip-text: var(--mm-text-secondary);
+  
+  // Dropdown colors
+  --mm-dropdown-hover: #444;
+  --mm-dropdown-focus: #555;
+  --mm-dropdown-selected: #1e3a8a;
+  
+  // 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,100 +71,192 @@
   .btn-flat {
     padding: 4px 8px;
     font-size: 11px;
-    background-color: #e0e0e0;
+    background-color: var(--mm-border-color, #e0e0e0);
     border-radius: 4px;
     min-width: auto;
   }
 }
 
+/* Timepicker Containers */
 .timepicker-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
+  max-width: 325px;
+  max-height: none;
+}
+
+.timepicker-container.modal-content {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-
-  .timepicker-content {
-    background: white;
-    border-radius: 8px;
-    padding: 24px;
-    min-width: 320px;
-    max-width: 400px;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-
-    .modal-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 20px;
-
-      h5 {
-        margin: 0;
-      }
-
-      .btn-flat {
-        padding: 4px 8px;
-        font-size: 11px;
-        min-width: auto;
-
-        i.material-icons {
-          font-size: 14px;
-          margin-right: 4px;
-        }
-      }
-    }
+  flex-direction: column;
+  padding: 0;
+}
 
-    .time-display {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 8px;
-      margin-bottom: 24px;
-      font-size: 2.5rem;
-      font-weight: 300;
-
-      input[type="number"] {
-        width: 80px;
-        text-align: center;
-        font-size: 2.5rem;
-        border: 1px solid #ddd;
-        border-radius: 4px;
-        padding: 8px;
-      }
-
-      .ampm-selector {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-
-        button {
-          min-width: 60px;
-          padding: 4px 8px;
-        }
-      }
-    }
+.text-primary {
+	color: rgba(255, 255, 255, 1);
+}
 
-    .timepicker-actions {
-      display: flex;
-      justify-content: space-between;
-      gap: 8px;
-      margin-top: 24px;
 
-      > div {
-        display: flex;
-        gap: 8px;
-      }
+/* Clock Digital Display */
+.timepicker-digital-display {
+  flex: 1 auto;
+  background-color: variables.$secondary-color;
+  padding: 10px;
+  font-weight: 300;
+}
 
-      .btn-flat {
-        padding: 0 20px;
-      }
-    }
+.timepicker-text-container {
+	font-size: 4rem;
+	font-weight: bold;
+	text-align: center;
+	color: rgba(255, 255, 255, 0.6);
+  font-weight: 400;
+	position: relative;
+  user-select: none;
+}
+
+.timepicker-span-hours,
+.timepicker-span-minutes,
+.timepicker-span-am-pm div {
+	cursor: pointer;
+}
+
+.timepicker-span-hours {
+  margin-right: 3px;
+}
+
+.timepicker-span-minutes {
+  margin-left: 3px;
+}
+
+.timepicker-display-am-pm {
+  font-size: 1.3rem;
+  position: absolute;
+  right: 1rem;
+  bottom: 1rem;
+  font-weight: 400;
+}
+
+
+/* Analog Clock Display */
+.timepicker-analog-display {
+  flex: 2.5 auto;
+}
+
+.timepicker-plate {
+	background-color: variables.$timepicker-clock-plate-bg;
+	border-radius: 50%;
+	width: 270px;
+	height: 270px;
+	overflow: visible;
+	position: relative;
+  margin: auto;
+  margin-top: 25px;
+  margin-bottom: 5px;
+	user-select: none;
+}
+
+.timepicker-canvas,
+.timepicker-dial {
+	position: absolute;
+	left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+.timepicker-minutes {
+	visibility: hidden;
+}
+
+.timepicker-tick {
+	border-radius: 50%;
+	color: variables.$timepicker-clock-color;
+	line-height: 40px;
+	text-align: center;
+	width: 40px;
+	height: 40px;
+	position: absolute;
+	cursor: pointer;
+  font-size: 15px;
+}
+
+.timepicker-tick.active,
+.timepicker-tick:hover {
+	background-color: color.scale(variables.$secondary-color, $alpha: -75%);
+}
+.timepicker-dial {
+	transition: transform 350ms, opacity 350ms;
+}
+.timepicker-dial-out {
+  &.timepicker-hours {
+	  transform: scale(1.1, 1.1);
+  }
+
+  &.timepicker-minutes {
+	  transform: scale(.8, .8);
+  }
+
+	opacity: 0;
+}
+.timepicker-canvas {
+	transition: opacity 175ms;
+
+  line {
+	  stroke: variables.$secondary-color;
+	  stroke-width: 4;
+	  stroke-linecap: round;
   }
 }
+.timepicker-canvas-out {
+	opacity: 0.25;
+}
+.timepicker-canvas-bearing {
+	stroke: none;
+	fill: variables.$secondary-color;
+}
+.timepicker-canvas-bg {
+	stroke: none;
+	fill: variables.$secondary-color;
+}
+
+
+/* Footer */
+.timepicker-footer {
+  margin: 0 auto;
+  padding: 5px 1rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.timepicker-clear {
+  color: variables.$error-color;
+}
+
+.timepicker-close {
+  color: variables.$secondary-color;
+}
+
+.timepicker-clear,
+.timepicker-close {
+  padding: 0 20px;
+}
+
+/* Media Queries */
+@media #{variables.$medium-and-up} {
+  .timepicker-modal {
+    max-width: 600px;
+  }
+
+  .timepicker-container.modal-content {
+    flex-direction: row;
+  }
+
+  .timepicker-text-container {
+		top: 32%;
+	}
 
-/* Legacy styles kept for applications using old Materialize TimePicker */
+	.timepicker-display-am-pm {
+	  position: relative;
+	  right: auto;
+	  bottom: auto;
+	  text-align: center;
+	  margin-top: 1.2rem;
+	}
+}