Use CSS variables

GreenTeaCake · Apr 10, 2024 · e5cd93a · e5cd93a
1 parent 0536a7e
commit e5cd93a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 17 deletions.
diff --git a/src/components/switch/switch.scss b/src/components/switch/switch.scss
@@ -3,18 +3,18 @@ $switch-height: 20px;
 
 $marker-size: 16px;
 
-$background-color-default: #c7c7c7;
-$background-color-checked: #398368;
-$background-color-disabled: #e3e3e3;
+$spacing: calc(($switch-height - $marker-size) / 2);
 
-$marker-color-default: #ffffff;
-$marker-color-disabled: #c7c7c7;
+:host {
+  --background-color-default: #c7c7c7;
+  --background-color-checked: #398368;
+  --background-color-disabled: #e3e3e3;
 
-$highlight-color-default: #112c9f;
+  --highlight-color-default: #112c9f;
 
-$spacing: calc(($switch-height - $marker-size) / 2);
+  --marker-color-default: #ffffff;
+  --marker-color-disabled: #c7c7c7;
 
-:host {
   display: inline-block;
   height: $switch-height;
 
@@ -23,12 +23,12 @@ $spacing: calc(($switch-height - $marker-size) / 2);
     width: $switch-width;
     height: $switch-height;
     border-radius: calc($switch-height / 2);
-    background-color: $background-color-default;
+    background-color: var(--background-color-default);
     position: relative;
     cursor: pointer;
 
     &:hover {
-      outline: 2px solid $highlight-color-default;
+      outline: 2px solid var(--highlight-color-default);
       outline-offset: 2px;
     }
 
@@ -37,15 +37,15 @@ $spacing: calc(($switch-height - $marker-size) / 2);
       width: $marker-size;
       height: $marker-size;
       border-radius: calc($marker-size / 2);
-      background-color: $marker-color-default;
+      background-color: var(--marker-color-default);
 
       position: absolute;
       top: $spacing;
       left: $spacing;
     }
 
     &__checked {
-      background-color: $background-color-checked;
+      background-color: var(--background-color-checked);
 
       .gtc-switch-marker {
         left: calc($switch-width - $marker-size - $spacing);
@@ -55,14 +55,14 @@ $spacing: calc(($switch-height - $marker-size) / 2);
     &__disabled {
       pointer-events: none;
       cursor: not-allowed;
-      background-color: $background-color-disabled;
+      background-color: var(--background-color-disabled);
 
       &:hover {
         outline: none;
       }
 
       .gtc-switch-marker {
-        background-color: $marker-color-disabled;
+        background-color: var(--marker-color-disabled);
       }
     }
   }

diff --git a/src/components/switch/usage/basic-example.md b/src/components/switch/usage/basic-example.md
@@ -3,10 +3,10 @@ Here is the basic usage example for `gtc-switch`:
 ```html
 <gtc-switch label="Accessible Label" checked="false" id="my-cool-switch" />
 <script>
-  let switch = document.getElementById('my-cool-switch');
-  switch.addEventListener('gtcChange', (event) => {
+  let myCoolSwitch = document.getElementById('my-cool-switch');
+  myCoolSwitch.addEventListener('gtcChange', (event) => {
     event.preventDefault();
-    event.srcElement.checked = e.detail;
+    event.srcElement.checked = event.detail;
   });
 </script>
 ```