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

package/dist/components.css

@@ -1063,7 +1063,7 @@ button.btn-floating {
 }
 
 .dropdown-content {
-  background-color: #fff;
+  background-color: var(--mm-surface-color, #fff);
   margin: 0;
   display: none;
   min-width: 100px;
@@ -1080,7 +1080,7 @@ button.btn-floating {
 }
 .dropdown-content li {
   clear: both;
-  color: rgba(0, 0, 0, 0.87);
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
   cursor: pointer;
   min-height: 50px;
   line-height: 1.5rem;
@@ -1088,7 +1088,7 @@ button.btn-floating {
   text-align: left;
 }
 .dropdown-content li:hover, .dropdown-content li.active {
-  background-color: #eee;
+  background-color: var(--mm-dropdown-hover, #eee);
 }
 .dropdown-content li:focus {
   outline: none;
@@ -1099,7 +1099,7 @@ button.btn-floating {
 }
 .dropdown-content li > a, .dropdown-content li > span {
   font-size: 16px;
-  color: #26a69a;
+  color: var(--mm-text-primary, #26a69a);
   display: block;
   line-height: 22px;
   padding: 14px 16px;
@@ -1118,7 +1118,7 @@ button.btn-floating {
 }
 
 body.keyboard-focused .dropdown-content li:focus {
-  background-color: rgb(217.6, 217.6, 217.6);
+  background-color: var(--mm-dropdown-focus, rgb(217.6, 217.6, 217.6));
 }
 
 .input-field.col .dropdown-content [type=checkbox] + label {

package/dist/core.css

@@ -3088,7 +3088,7 @@ select {
   bottom: 0;
   margin: auto 0;
   z-index: 0;
-  fill: rgba(0, 0, 0, 0.87);
+  fill: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
 }
 .select-wrapper + label {
   position: absolute;
@@ -3128,19 +3128,19 @@ select:disabled {
 .select-dropdown li.disabled,
 .select-dropdown li.disabled > span,
 .select-dropdown li.optgroup {
-  color: rgba(0, 0, 0, 0.3);
+  color: var(--mm-text-disabled, rgba(0, 0, 0, 0.3));
   background-color: transparent;
 }
 
 body.keyboard-focused .select-dropdown.dropdown-content li:focus {
-  background-color: rgba(0, 0, 0, 0.08);
+  background-color: var(--mm-dropdown-focus, rgba(0, 0, 0, 0.08));
 }
 
 .select-dropdown.dropdown-content li:hover {
-  background-color: rgba(0, 0, 0, 0.08);
+  background-color: var(--mm-dropdown-hover, rgba(0, 0, 0, 0.08));
 }
 .select-dropdown.dropdown-content li.selected {
-  background-color: rgba(0, 0, 0, 0.03);
+  background-color: var(--mm-dropdown-selected, rgba(0, 0, 0, 0.03));
 }
 
 .prefix ~ .select-wrapper {
@@ -3161,13 +3161,13 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
 }
 
 .select-dropdown li.optgroup {
-  border-top: 1px solid #eee;
+  border-top: 1px solid var(--mm-border-color, #eee);
 }
 .select-dropdown li.optgroup.selected > span {
-  color: rgba(0, 0, 0, 0.7);
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.7));
 }
 .select-dropdown li.optgroup > span {
-  color: rgba(0, 0, 0, 0.4);
+  color: var(--mm-text-hint, rgba(0, 0, 0, 0.4));
 }
 .select-dropdown li.optgroup ~ li.optgroup-option {
   padding-left: 1rem;

package/dist/forms.css

@@ -1338,7 +1338,7 @@ select {
   bottom: 0;
   margin: auto 0;
   z-index: 0;
-  fill: rgba(0, 0, 0, 0.87);
+  fill: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
 }
 .select-wrapper + label {
   position: absolute;
@@ -1378,19 +1378,19 @@ select:disabled {
 .select-dropdown li.disabled,
 .select-dropdown li.disabled > span,
 .select-dropdown li.optgroup {
-  color: rgba(0, 0, 0, 0.3);
+  color: var(--mm-text-disabled, rgba(0, 0, 0, 0.3));
   background-color: transparent;
 }
 
 body.keyboard-focused .select-dropdown.dropdown-content li:focus {
-  background-color: rgba(0, 0, 0, 0.08);
+  background-color: var(--mm-dropdown-focus, rgba(0, 0, 0, 0.08));
 }
 
 .select-dropdown.dropdown-content li:hover {
-  background-color: rgba(0, 0, 0, 0.08);
+  background-color: var(--mm-dropdown-hover, rgba(0, 0, 0, 0.08));
 }
 .select-dropdown.dropdown-content li.selected {
-  background-color: rgba(0, 0, 0, 0.03);
+  background-color: var(--mm-dropdown-selected, rgba(0, 0, 0, 0.03));
 }
 
 .prefix ~ .select-wrapper {
@@ -1411,13 +1411,13 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
 }
 
 .select-dropdown li.optgroup {
-  border-top: 1px solid #eee;
+  border-top: 1px solid var(--mm-border-color, #eee);
 }
 .select-dropdown li.optgroup.selected > span {
-  color: rgba(0, 0, 0, 0.7);
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.7));
 }
 .select-dropdown li.optgroup > span {
-  color: rgba(0, 0, 0, 0.4);
+  color: var(--mm-text-hint, rgba(0, 0, 0, 0.4));
 }
 .select-dropdown li.optgroup ~ li.optgroup-option {
   padding-left: 1rem;

package/dist/index.css

@@ -28,6 +28,11 @@
   --mm-modal-background: #ffffff;
   --mm-overlay-background: rgba(0, 0, 0, 0.5);
   --mm-shadow-color: rgba(0, 0, 0, 0.16);
+  --mm-chip-bg: #e4e4e4;
+  --mm-chip-text: var(--mm-text-secondary);
+  --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);
@@ -81,6 +86,11 @@ body {
   --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);
+  --mm-chip-bg: #424242;
+  --mm-chip-text: var(--mm-text-secondary);
+  --mm-dropdown-hover: #444;
+  --mm-dropdown-focus: #555;
+  --mm-dropdown-selected: #1e3a8a;
   --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);
@@ -5214,7 +5224,7 @@ button.btn-floating {
 }
 
 .dropdown-content {
-  background-color: #fff;
+  background-color: var(--mm-surface-color, #fff);
   margin: 0;
   display: none;
   min-width: 100px;
@@ -5231,7 +5241,7 @@ button.btn-floating {
 }
 .dropdown-content li {
   clear: both;
-  color: rgba(0, 0, 0, 0.87);
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
   cursor: pointer;
   min-height: 50px;
   line-height: 1.5rem;
@@ -5239,7 +5249,7 @@ button.btn-floating {
   text-align: left;
 }
 .dropdown-content li:hover, .dropdown-content li.active {
-  background-color: #eee;
+  background-color: var(--mm-dropdown-hover, #eee);
 }
 .dropdown-content li:focus {
   outline: none;
@@ -5250,7 +5260,7 @@ button.btn-floating {
 }
 .dropdown-content li > a, .dropdown-content li > span {
   font-size: 16px;
-  color: #26a69a;
+  color: var(--mm-text-primary, #26a69a);
   display: block;
   line-height: 22px;
   padding: 14px 16px;
@@ -5269,7 +5279,7 @@ button.btn-floating {
 }
 
 body.keyboard-focused .dropdown-content li:focus {
-  background-color: rgb(217.6, 217.6, 217.6);
+  background-color: var(--mm-dropdown-focus, rgb(217.6, 217.6, 217.6));
 }
 
 .input-field.col .dropdown-content [type=checkbox] + label {
@@ -5568,18 +5578,18 @@ body.keyboard-focused .dropdown-content li:focus {
   height: 32px;
   font-size: 13px;
   font-weight: 500;
-  color: rgba(0, 0, 0, 0.6);
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
   line-height: 32px;
   padding: 0 12px;
   border-radius: 16px;
-  background-color: #e4e4e4;
+  background-color: var(--mm-chip-bg, #e4e4e4);
   margin-bottom: 5px;
   margin-right: 5px;
 }
 .chip:focus {
   outline: none;
-  background-color: #26a69a;
-  color: #fff;
+  background-color: var(--mm-primary-color, #26a69a);
+  color: var(--mm-button-text, #fff);
 }
 .chip > img {
   float: left;
@@ -5598,7 +5608,7 @@ body.keyboard-focused .dropdown-content li:focus {
 
 .chips {
   border: none;
-  border-bottom: 1px solid #9e9e9e;
+  border-bottom: 1px solid var(--mm-input-border, #9e9e9e);
   box-shadow: none;
   margin: 0 0 8px 0;
   min-height: 45px;
@@ -5606,8 +5616,8 @@ body.keyboard-focused .dropdown-content li:focus {
   transition: all 0.3s;
 }
 .chips.focus {
-  border-bottom: 1px solid #26a69a;
-  box-shadow: 0 1px 0 0 #26a69a;
+  border-bottom: 1px solid var(--mm-primary-color, #26a69a);
+  box-shadow: 0 1px 0 0 var(--mm-primary-color, #26a69a);
 }
 .chips:hover {
   cursor: text;
@@ -5615,7 +5625,7 @@ body.keyboard-focused .dropdown-content li:focus {
 .chips .input {
   background: none;
   border: 0;
-  color: rgba(0, 0, 0, 0.6);
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.6));
   display: inline-block;
   font-size: 16px;
   height: 3rem;
@@ -6729,7 +6739,7 @@ select {
   bottom: 0;
   margin: auto 0;
   z-index: 0;
-  fill: rgba(0, 0, 0, 0.87);
+  fill: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
 }
 .select-wrapper + label {
   position: absolute;
@@ -6771,19 +6781,19 @@ select:disabled {
 .select-dropdown li.disabled,
 .select-dropdown li.disabled > span,
 .select-dropdown li.optgroup {
-  color: rgba(0, 0, 0, 0.3);
+  color: var(--mm-text-disabled, rgba(0, 0, 0, 0.3));
   background-color: transparent;
 }
 
 body.keyboard-focused .select-dropdown.dropdown-content li:focus {
-  background-color: rgba(0, 0, 0, 0.08);
+  background-color: var(--mm-dropdown-focus, rgba(0, 0, 0, 0.08));
 }
 
 .select-dropdown.dropdown-content li:hover {
-  background-color: rgba(0, 0, 0, 0.08);
+  background-color: var(--mm-dropdown-hover, rgba(0, 0, 0, 0.08));
 }
 .select-dropdown.dropdown-content li.selected {
-  background-color: rgba(0, 0, 0, 0.03);
+  background-color: var(--mm-dropdown-selected, rgba(0, 0, 0, 0.03));
 }
 
 .prefix ~ .select-wrapper {
@@ -6804,13 +6814,13 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
 }
 
 .select-dropdown li.optgroup {
-  border-top: 1px solid #eee;
+  border-top: 1px solid var(--mm-border-color, #eee);
 }
 .select-dropdown li.optgroup.selected > span {
-  color: rgba(0, 0, 0, 0.7);
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.7));
 }
 .select-dropdown li.optgroup > span {
-  color: rgba(0, 0, 0, 0.4);
+  color: var(--mm-text-hint, rgba(0, 0, 0, 0.4));
 }
 .select-dropdown li.optgroup ~ li.optgroup-option {
   padding-left: 1rem;

package/dist/index.esm.js

@@ -1090,8 +1090,8 @@ const Chips = () => {
                                 maxHeight: '200px',
                                 overflow: 'auto',
                                 zIndex: 1000,
-                                backgroundColor: '#fff',
-                                boxShadow: '0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2)',
+                                backgroundColor: 'var(--mm-surface-color, #fff)',
+                                boxShadow: '0 2px 2px 0 var(--mm-shadow-penumbra, rgba(0,0,0,0.14)), 0 3px 1px -2px var(--mm-shadow-umbra, rgba(0,0,0,0.12)), 0 1px 5px 0 var(--mm-shadow-ambient, rgba(0,0,0,0.2))',
                             },
                         }, state.autocompleteItems.map((item, index) => m('li.autocomplete-item', {
                             key: item.tag,
@@ -1099,7 +1099,8 @@ const Chips = () => {
                             style: {
                                 padding: '12px 16px',
                                 cursor: 'pointer',
-                                backgroundColor: state.selectedAutocompleteIndex === index ? '#eee' : 'transparent',
+                                backgroundColor: state.selectedAutocompleteIndex === index ? 'var(--mm-border-color, #eee)' : 'transparent',
+                                color: 'var(--mm-text-primary, inherit)',
                             },
                             onmousedown: (e) => {
                                 e.preventDefault();
@@ -2320,7 +2321,7 @@ const TextArea = () => {
                     }, oncreate: ({ dom }) => {
                         const textarea = (state.textarea = dom);
                         // Set initial value and height if provided
-                        if (initialValue !== undefined) {
+                        if (initialValue) {
                             textarea.value = String(initialValue);
                             updateHeight(textarea);
                             // } else {
@@ -2363,7 +2364,7 @@ const TextArea = () => {
                         if (onchange && state.textarea) {
                             onchange(state.textarea.value);
                         }
-                    }, value: initialValue, onkeyup: onkeyup
+                    }, onkeyup: onkeyup
                         ? (ev) => {
                             onkeyup(ev, ev.target.value);
                         }
@@ -2380,7 +2381,7 @@ const TextArea = () => {
                     label,
                     id,
                     isMandatory,
-                    isActive: ((_a = state.textarea) === null || _a === void 0 ? void 0 : _a.value) || initialValue || placeholder || state.active,
+                    isActive: ((_a = state.textarea) === null || _a === void 0 ? void 0 : _a.value) || placeholder || state.active,
                 }),
                 m(HelperText, {
                     helperText,
@@ -2448,7 +2449,7 @@ const InputField = (type, defaultClass = '') => () => {
                             input.focus();
                         }
                         // Set initial value if provided
-                        if (initialValue !== undefined) {
+                        if (initialValue) {
                             input.value = String(initialValue);
                         }
                         // Update character count state for counter component
@@ -2552,14 +2553,13 @@ const InputField = (type, defaultClass = '') => () => {
                         if (onchange && state.inputElement) {
                             onchange(getValue(state.inputElement));
                         }
-                    }, value: initialValue })),
+                    } })),
                 m(Label, {
                     label,
                     id,
                     isMandatory,
                     isActive: state.active ||
                         ((_a = state.inputElement) === null || _a === void 0 ? void 0 : _a.value) ||
-                        initialValue ||
                         placeholder ||
                         type === 'number' ||
                         type === 'color' ||
@@ -2638,7 +2638,7 @@ const FileInput = () => {
                             i.value = initialValue;
                     },
                 })),
-                (canClear || initialValue) &&
+                (canClear || (i === null || i === void 0 ? void 0 : i.value)) &&
                     m('a.waves-effect.waves-teal.btn-flat', {
                         style: {
                             float: 'right',
@@ -4714,7 +4714,7 @@ const SearchSelect = () => {
                         placeholder &&
                         m('span.placeholder', {
                             style: {
-                                color: '#9e9e9e',
+                                color: 'var(--mm-text-hint, #9e9e9e)',
                                 flexGrow: 1,
                                 padding: '8px 0',
                             },
@@ -4776,7 +4776,9 @@ const SearchSelect = () => {
                                     fontSize: '0.875rem',
                                     border: 'none',
                                     padding: '8px 0',
-                                    borderBottom: '1px solid #9e9e9e',
+                                    borderBottom: '1px solid var(--mm-input-border, #9e9e9e)',
+                                    backgroundColor: 'transparent',
+                                    color: 'var(--mm-text-primary, inherit)',
                                 },
                             }),
                         ]),

package/dist/index.js

@@ -1092,8 +1092,8 @@ const Chips = () => {
                                 maxHeight: '200px',
                                 overflow: 'auto',
                                 zIndex: 1000,
-                                backgroundColor: '#fff',
-                                boxShadow: '0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2)',
+                                backgroundColor: 'var(--mm-surface-color, #fff)',
+                                boxShadow: '0 2px 2px 0 var(--mm-shadow-penumbra, rgba(0,0,0,0.14)), 0 3px 1px -2px var(--mm-shadow-umbra, rgba(0,0,0,0.12)), 0 1px 5px 0 var(--mm-shadow-ambient, rgba(0,0,0,0.2))',
                             },
                         }, state.autocompleteItems.map((item, index) => m('li.autocomplete-item', {
                             key: item.tag,
@@ -1101,7 +1101,8 @@ const Chips = () => {
                             style: {
                                 padding: '12px 16px',
                                 cursor: 'pointer',
-                                backgroundColor: state.selectedAutocompleteIndex === index ? '#eee' : 'transparent',
+                                backgroundColor: state.selectedAutocompleteIndex === index ? 'var(--mm-border-color, #eee)' : 'transparent',
+                                color: 'var(--mm-text-primary, inherit)',
                             },
                             onmousedown: (e) => {
                                 e.preventDefault();
@@ -2322,7 +2323,7 @@ const TextArea = () => {
                     }, oncreate: ({ dom }) => {
                         const textarea = (state.textarea = dom);
                         // Set initial value and height if provided
-                        if (initialValue !== undefined) {
+                        if (initialValue) {
                             textarea.value = String(initialValue);
                             updateHeight(textarea);
                             // } else {
@@ -2365,7 +2366,7 @@ const TextArea = () => {
                         if (onchange && state.textarea) {
                             onchange(state.textarea.value);
                         }
-                    }, value: initialValue, onkeyup: onkeyup
+                    }, onkeyup: onkeyup
                         ? (ev) => {
                             onkeyup(ev, ev.target.value);
                         }
@@ -2382,7 +2383,7 @@ const TextArea = () => {
                     label,
                     id,
                     isMandatory,
-                    isActive: ((_a = state.textarea) === null || _a === void 0 ? void 0 : _a.value) || initialValue || placeholder || state.active,
+                    isActive: ((_a = state.textarea) === null || _a === void 0 ? void 0 : _a.value) || placeholder || state.active,
                 }),
                 m(HelperText, {
                     helperText,
@@ -2450,7 +2451,7 @@ const InputField = (type, defaultClass = '') => () => {
                             input.focus();
                         }
                         // Set initial value if provided
-                        if (initialValue !== undefined) {
+                        if (initialValue) {
                             input.value = String(initialValue);
                         }
                         // Update character count state for counter component
@@ -2554,14 +2555,13 @@ const InputField = (type, defaultClass = '') => () => {
                         if (onchange && state.inputElement) {
                             onchange(getValue(state.inputElement));
                         }
-                    }, value: initialValue })),
+                    } })),
                 m(Label, {
                     label,
                     id,
                     isMandatory,
                     isActive: state.active ||
                         ((_a = state.inputElement) === null || _a === void 0 ? void 0 : _a.value) ||
-                        initialValue ||
                         placeholder ||
                         type === 'number' ||
                         type === 'color' ||
@@ -2640,7 +2640,7 @@ const FileInput = () => {
                             i.value = initialValue;
                     },
                 })),
-                (canClear || initialValue) &&
+                (canClear || (i === null || i === void 0 ? void 0 : i.value)) &&
                     m('a.waves-effect.waves-teal.btn-flat', {
                         style: {
                             float: 'right',
@@ -4716,7 +4716,7 @@ const SearchSelect = () => {
                         placeholder &&
                         m('span.placeholder', {
                             style: {
-                                color: '#9e9e9e',
+                                color: 'var(--mm-text-hint, #9e9e9e)',
                                 flexGrow: 1,
                                 padding: '8px 0',
                             },
@@ -4778,7 +4778,9 @@ const SearchSelect = () => {
                                     fontSize: '0.875rem',
                                     border: 'none',
                                     padding: '8px 0',
-                                    borderBottom: '1px solid #9e9e9e',
+                                    borderBottom: '1px solid var(--mm-input-border, #9e9e9e)',
+                                    backgroundColor: 'transparent',
+                                    color: 'var(--mm-text-primary, inherit)',
                                 },
                             }),
                         ]),