wip: Implemented partial dark-mode for ClayButton component.

.storybook/preview.ts

@@ -14,11 +14,6 @@ const preview: Preview = {
 
         $theme.setColorScheme(theme, body);
 
-        const backgroundColor = (theme === "dark") ? "#333333" : "#F8F8F8";
-
-        body.style.backgroundColor = backgroundColor;
-        body.style.transition = "background-color var(--clay-ease-duration) var(--clay-ease-function)";
-
         return Story();
     }],
     globalTypes: {

src/assets/style.scss

@@ -3,14 +3,35 @@
     --black: 0, 0, 0;
     --white: 255, 255, 255;
 
-    --clay-color-background: 145, 192, 255;
+    --clay-light-color-background: 248, 248, 248;
+    --clay-dark-color-background: 51, 51, 51;
 
     --clay-ease-duration: 333ms;
     --clay-ease-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
+
+    @media (prefers-color-scheme: light)
+    {
+        --clay-color-background: var(--clay-light-color-background);
+    }
+    @media (prefers-color-scheme: dark)
+    {
+        --clay-color-background: var(--clay-dark-color-background);
+    }
 }
 
 body
 {
+    background-color: rgb(var(--clay-color-background));
     height: 100%;
     text-align: center;
+    transition: background-color var(--clay-ease-duration) var(--clay-ease-function);
+
+    &[light]
+    {
+        --clay-color-background: var(--clay-light-color-background);
+    }
+    &[dark]
+    {
+        --clay-color-background: var(--clay-dark-color-background);
+    }
 }

src/components/ClayButton.vue

@@ -1,8 +1,5 @@
 <script lang="ts" setup>
     import { computed } from "vue";
-    import { useTheme } from "@/utils";
-
-    const $theme = useTheme();
 
     const props = defineProps({
         small: {
@@ -19,24 +16,18 @@
         "clay-button--small": props.small,
         "clay-button--large": props.large
     }));
-
-    const onClick = () => console.log($theme.colorScheme.value);
 </script>
 
 <template>
-    <button class="clay-button"
-            :class="classes"
-            @click="onClick">
+    <button class="clay-button" :class="classes">
         <slot></slot>
     </button>
 </template>
 
 <style lang="scss">
     :root
     {
-        --clay-button-color-shade-light: 105, 205, 255;
-        --clay-button-color-shade-dark: 70, 165, 255;
-
+        --clay-button-color-background: 87, 185, 255;
         --clay-button-color-outline: 255, 185, 87;
         --clay-button-color-shadow: 25, 140, 220;
 
@@ -49,8 +40,9 @@
 
     .clay-button
     {
-        background-image: linear-gradient(rgb(var(--clay-button-color-shade-light)),
-                                          rgb(var(--clay-button-color-shade-dark)));
+        background-color: rgb(var(--clay-button-color-background));
+        background-image: linear-gradient(rgba(var(--white), 0.25), rgba(var(--black), 0.25));
+        background-blend-mode: overlay;
         border: none;
         border-radius: var(--clay-button-roundness);
         box-shadow: 0px 0px 0px 0px rgba(var(--clay-button-color-outline), 0),
@@ -63,7 +55,9 @@
         outline: none;
         padding: var(--clay-button-spacing);
         position: relative;
-        transition: box-shadow var(--clay-ease-duration) var(--clay-ease-function),
+        transition: background-color var(--clay-ease-duration) var(--clay-ease-function),
+                    box-shadow var(--clay-ease-duration) var(--clay-ease-function),
+                    color var(--clay-ease-duration) var(--clay-ease-function),
                     transform var(--clay-ease-duration) var(--clay-ease-function);
 
         perspective: 0px;
@@ -128,4 +122,27 @@
             font-size: 1.5em;
         }
     }
+
+    body[dark]
+    {
+        --clay-button-color-background: 0, 111, 191;
+        --clay-button-color-outline: 255, 185, 87;
+        --clay-button-color-shadow: 0, 0, 0;
+
+        .clay-button
+        {
+            box-shadow: 0px 0px 0px 0px rgba(var(--clay-button-color-outline), 0),
+                        0px 1.5px 3px -1.5px rgba(var(--clay-button-color-shadow), 0.5);
+
+            &:hover
+            {
+                --clay-button-color-background: 47, 168, 255;
+                --clay-button-color-shadow: 47, 168, 255;
+
+                box-shadow: 0px 0px 0px 0px rgba(var(--clay-button-color-outline), 0),
+                            0px 0px 8px 0px rgba(var(--clay-button-color-shadow), 0.666);
+
+            }
+        }
+    }
 </style>

src/types.ts

@@ -1 +1 @@
-export type ColorScheme = "normal" | "light" | "dark";
+export type ColorScheme = "light" | "dark";

src/utils.ts

@@ -2,25 +2,24 @@ import { ref, readonly } from "vue";
 
 import type { ColorScheme } from "./types";
 
-const _scheme = ref<ColorScheme>("normal");
+const _scheme = ref<ColorScheme>("light");
 const scheme = readonly(_scheme);
 
 const getScheme = (body?: HTMLBodyElement) =>
 {
     const _get = (be: HTMLBodyElement) =>
     {
         if (be.hasAttribute("dark")) { return "dark"; }
-        if (be.hasAttribute("light")) { return "light"; }
 
-        return "normal";
+        return "light";
     };
 
     if (body) { return _get(body); }
 
     const _body = document.querySelector<HTMLBodyElement>("body");
     if (_body) { return _get(_body); }
 
-    return "normal";
+    return "light";
 };
 const setScheme = (colorScheme: ColorScheme, body?: HTMLBodyElement) =>
 {
@@ -33,20 +32,13 @@ const setScheme = (colorScheme: ColorScheme, body?: HTMLBodyElement) =>
 
             _scheme.value = "dark";
         }
-        else if (cs === "light")
+        else
         {
             be.removeAttribute("dark");
             be.setAttribute("light", "");
 
             _scheme.value = "light";
         }
-        else
-        {
-            be.removeAttribute("dark");
-            be.removeAttribute("light");
-
-            _scheme.value = "normal";
-        }
     };
 
     if (body) { return _set(body, colorScheme); }