fix: colors and more, add igrnore change to savebutton #181 #180

source/components/form/style/toggle-switch.pcss

@@ -20,7 +20,6 @@
     & .switch {
         position: relative;
         height: 2.5em;
-        border-color: var(--monster-bg-color-primary-3);
         border-width: thin;
         border-style: var(--monster-border-style);
         transition: background-color 0.2s;
@@ -31,10 +30,6 @@
         
     }
 
-/*    & .switch-radio input[type="radio"] {
-        display: none;
-    }*/
-
     & .label {
         max-width: 100%;
         white-space: nowrap;
@@ -55,7 +50,6 @@
         left: 4px;
         right: 4px;
         width: calc(50% - 4px);
-        background-color: var(--monster-bg-color-primary-4);
         transition: 0.2s;
     }
 

source/components/form/toggle-switch.mjs

@@ -55,7 +55,7 @@ export const STATE_OFF = "off";
 /**
  * This CustomControl creates a ToggleSwitch element
  *
- * <img src="./images/switch.png">
+ * <img src="./images/toggleswitch.png">
  *
  *
  * @startuml toggleswitch.png
@@ -69,23 +69,10 @@ export const STATE_OFF = "off";
  * @since 3.57.0
  * @copyright schukai GmbH
  * @memberOf Monster.Components.Form
- * @summary A simple Switch
+ * @summary A simple toggle switch
  */
 class ToggleSwitch extends CustomControl {
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @returns {symbol}
-	 * @since 2.1.0
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for(
-			"@schukai/monster/components/form/toggle-switch@@instance",
-		);
-	}
 
-	static getTag() {
-		return "monster-toggle-switch";
-	}
 
 	/**
 	 * To set the options via the html tag the attribute `data-monster-options` must be used.
@@ -113,8 +100,9 @@ class ToggleSwitch extends CustomControl {
 			value: null,
 			disabled: false,
 			classes: {
-				on: "monster-theme-primary-3",
-				off: "monster-theme-primary-2",
+				on: "monster-theme-on",
+				off: "monster-theme-off",
+				handle: "monster-theme-primary-1",
 			},
 			values: {
 				on: "on",
@@ -305,6 +293,22 @@ class ToggleSwitch extends CustomControl {
 	set value(value) {
 		this.setOption("value", value);
 	}
+
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 * @since 2.1.0
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for(
+			"@schukai/monster/components/form/toggle-switch@@instance",
+		);
+	}
+
+	static getTag() {
+		return "monster-toggle-switch";
+	}	
+	
 }
 
 /**
@@ -421,7 +425,7 @@ function getTemplate() {
                  data-monster-attributes="data-monster-state path:value | call:state-callback">
                 <div class="label on" data-monster-replace="path:labels.toggle-switch-on"></div>
                 <div class="label off" data-monster-replace="path:labels.toggle-switch-off"></div>
-                <div class="switch-slider"></div>
+                <div data-monster-attributes="class path:classes.handle | suffix:\\ switch-slider"></div>
             </div>
         </div>`;
 }

source/components/style/mixin/property.pcss

@@ -295,20 +295,38 @@
 
 }
 
-@define-mixin defaultTableProperty {
+@define-mixin defaultOnOfProperty {
     
-    --monster-table-bg-color: var(--monster-gradient-tangerine-1);
-    --monster-table-color: var(--monster-gradient-tangerine-6);
-    --monster-table-border-color: var(--monster-gradient-tangerine-2);
-    --monster-table-hover-color: var(--monster-gradient-tangerine-6);
-    --monster-table-hover-bg-color: var(--monster-gradient-tangerine-2);
+    --monster-theme-on-color: var(--monster-color-green-1);
+    --monster-theme-on-bg-color: var(--monster-color-green-5);
+
+    --monster-theme-off-color: var(--monster-color-gray-1);
+    --monster-theme-off-bg-color: var(--monster-color-gray-4);
+    
+    
+    @media (prefers-color-scheme: dark) {
+        --monster-theme-on-color: var(--monster-color-gray-6);
+        --monster-theme-on-bg-color: var(--monster-color-gray-1);
+
+        --monster-theme-off-color: var(--monster-color-gray-1);
+        --monster-theme-off-bg-color: var(--monster-color-gray-5);
+    }
+}
+
+@define-mixin defaultControlProperty {
+
+    --monster-theme-control-bg-color: var(--monster-gradient-tangerine-1);
+    --monster-theme-control-color: var(--monster-gradient-tangerine-6);
+    --monster-theme-control-border-color: var(--monster-gradient-tangerine-2);
+    --monster-theme-control-hover-color: var(--monster-gradient-tangerine-6);
+    --monster-theme-control-hover-bg-color: var(--monster-gradient-tangerine-2);
 
     @media (prefers-color-scheme: dark) {
-        --monster-table-bg-color: var(--monster-color-gray-5);
-        --monster-table-color: var(--monster-color-gray-1);
-        --monster-table-border-color: var(--monster-color-gray-3);
-        --monster-table-hover-color: var(--monster-color-gray-1);
-        --monster-table-hover-bg-color: var(--monster-color-gray-6);
+        --monster-theme-control-bg-color: var(--monster-color-gray-5);
+        --monster-theme-control-color: var(--monster-color-gray-1);
+        --monster-theme-control-border-color: var(--monster-color-gray-3);
+        --monster-theme-control-hover-color: var(--monster-color-gray-1);
+        --monster-theme-control-hover-bg-color: var(--monster-color-gray-6);
     }
     
 }
\ No newline at end of file

source/components/style/property.pcss

@@ -7,7 +7,8 @@
     @mixin defaultColorProperty;
     @mixin defaultShadowProperty;
     @mixin defaultTextProperty;
-    @mixin defaultTableProperty;
+    @mixin defaultControlProperty;
+    @mixin defaultOnOfProperty;
     @mixin defaultBorderProperty;
     @mixin defaultPoperProperty;
     @mixin defaultZIndexProperty;

source/components/style/table.pcss

@@ -30,17 +30,17 @@ th {
     display: block;
     width: 100%;
     overflow-x: auto;
-    background-color: var(--monster-table-bg-color);
-    color: var(--monster-table-color);
+    background-color: var(--monster-theme-control-bg-color);
+    color: var(--monster-theme-control-color);
     padding: 8px;
     margin: 0;
     box-sizing: border-box;
 }
 
 .monster-table tbody tr th, .monster-table tbody tr td {
-    background-color: var(--monster-table-bg-color);
-    color: var(--monster-table-color);
-    border-bottom: 1px solid var(--monster-table-border-color);
+    background-color: var(--monster-theme-control-bg-color);
+    color: var(--monster-theme-control-color);
+    border-bottom: 1px solid var(--monster-theme-control-border-color);
     
 }
 

source/components/style/theme.pcss

@@ -111,28 +111,37 @@
     
 }
 
-.monster-theme-table-container-1 {
-    background-color: var(--monster-table-bg-color);
-    color: var(--monster-table-color);
-    border: 1px solid var(--monster-table-border-color);
+.monster-theme-control-container-1 {
+    background-color: var(--monster-theme-control-bg-color);
+    color: var(--monster-theme-control-color);
+    border: 1px solid var(--monster-theme-control-border-color);
 }
 
-.monster-theme-table-row-1 {
-    background-color: var(--monster-table-bg-color);
-    color: var(--monster-table-color);
-    border: 1px solid var(--monster-table-border-color);
+.monster-theme-control-row-1 {
+    background-color: var(--monster-theme-control-bg-color);
+    color: var(--monster-theme-control-color);
+    border: 1px solid var(--monster-theme-control-border-color);
 }
 
-.monster-theme-table-elements {
-    background-color: var(--monster-table-bg-color);
-    color: var(--monster-table-color);
+.monster-theme-control-element {
+    background-color: var(--monster-theme-control-bg-color);
+    color: var(--monster-theme-control-color);
 }
 
-.monster-theme-table-background {
-    background-color: var(--monster-table-bg-color);
+.monster-theme-control-background {
+    background-color: var(--monster-theme-control-bg-color);
 }
 
 .monster-theme-background-inherit {
     background-color: inherit !important;
 }
 
+.monster-theme-on {
+    color: var(--monster-theme-on-color);
+    background-color: var(--monster-theme-on-bg-color);
+}
+
+.monster-theme-off {
+    color: var(--monster-theme-off-color);
+    background-color: var(--monster-theme-off-bg-color);
+}
\ No newline at end of file

source/components/stylesheet/table.mjs

@@ -20,7 +20,7 @@ const TableStyleSheet = new CSSStyleSheet();
 try {
   TableStyleSheet.insertRule(`
 @layer table { 
-th{text-align:inherit}.monster-table{border-collapse:collapse;box-sizing:border-box;color:#212529;margin-bottom:1rem;width:100%}.monster-table tr{margin:10px 0}.monster-table td,.monster-table th{padding:.75rem;vertical-align:top}.monster-table thead th{vertical-align:bottom}.monster-table-container{box-sizing:border-box;display:block;margin:0;overflow-x:auto;padding:8px;width:100%}.monster-table tbody tr td,.monster-table tbody tr th,.monster-table-container{background-color:var(--monster-table-bg-color);color:var(--monster-table-color)}.monster-table tbody tr td,.monster-table tbody tr th{border-bottom:1px solid var(--monster-table-border-color)} 
+th{text-align:inherit}.monster-table{border-collapse:collapse;box-sizing:border-box;color:#212529;margin-bottom:1rem;width:100%}.monster-table tr{margin:10px 0}.monster-table td,.monster-table th{padding:.75rem;vertical-align:top}.monster-table thead th{vertical-align:bottom}.monster-table-container{box-sizing:border-box;display:block;margin:0;overflow-x:auto;padding:8px;width:100%}.monster-table tbody tr td,.monster-table tbody tr th,.monster-table-container{background-color:var(--monster-theme-control-bg-color);color:var(--monster-theme-control-color)}.monster-table tbody tr td,.monster-table tbody tr th{border-bottom:1px solid var(--monster-theme-control-border-color)} 
 }`, 0);
 } catch (e) {
   addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");