From e35788fa31d67dfddb74d1dd57cc0f5a0ddeeaf1 Mon Sep 17 00:00:00 2001
From: Vixalie <vixalie@outlook.com>
Date: Fri, 7 Mar 2025 16:14:10 +0800
Subject: [PATCH] refactor button styles.

---
 src/components.css | 302 ++++++++++++++++++++++++++++++++++++---------
 1 file changed, 246 insertions(+), 56 deletions(-)

diff --git a/src/components.css b/src/components.css
index 02e0a8d..2c3fc3d 100644
--- a/src/components.css
+++ b/src/components.css
@@ -94,6 +94,7 @@
     color: var(--button-text);
     background-color: var(--button-surface);
     box-shadow: var(--elevation-dark-0);
+    cursor: pointer;
     &.smaller {
       font-size: calc(var(--font-size) * 0.8);
     }
@@ -107,97 +108,286 @@
       font-size: calc(var(--font-size) * 1.6);
     }
     &:hover:not(:disabled) {
-      --button-text: var(--color-dark-on-primary);
+      color: var(--button-text);
+      background-color: color-mix(in oklch, var(--button-surface) 8%, transparent);
       box-shadow: var(--elevation-dark-1-ambient), var(--elevation-dark-1-umbra);
     }
     &:active:not(:disabled) {
-      color: color-mix(in oklch, var(--button-text) 12%, transparent);
+      color: var(--button-text);
+      background: color-mix(in oklch, var(--button-surface) 10%, transparent);
+      box-shadow: var(--elevation-dark-0);
+    }
+    &:disabled {
+      color: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
+      background-color: color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent);
+      cursor: not-allowed;
+    }
+    &.filled:not(:disabled) {
+      --button-text: var(--color-dark-on-primary);
+      --button-surface: var(--color-dark-primary);
+      &.secondary {
+        --button-text: var(--color-dark-on-secondary);
+        --button-surface: var(--color-dark-secondary);
+      }
+      &.tertiary {
+        --button-text: var(--color-dark-on-tertiary);
+        --button-surface: var(--color-dark-tertiary);
+      }
+      &.danger {
+        --button-text: var(--color-dark-on-error);
+        --button-surface: var(--color-dark-error);
+      }
+      &.warn {
+        --button-text: var(--color-dark-on-warning);
+        --button-surface: var(--color-dark-warning);
+      }
+      &.success {
+        --button-text: var(--color-dark-on-success);
+        --button-surface: var(--color-dark-success);
+      }
+      &.info {
+        --button-text: var(--color-dark-on-info);
+        --button-surface: var(--color-dark-info);
+      }
+    }
+    &.filled:disabled {
+      --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
+      --button-surface: color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent);
     }
     &.tonal:not(:disabled) {
       --button-text: var(--color-dark-on-primary-container);
       --button-surface: var(--color-dark-primary-container);
+      &.secondary {
+        --button-text: var(--color-dark-on-secondary-container);
+        --button-surface: var(--color-dark-secondary-container);
+      }
+      &.tertiary {
+        --button-text: var(--color-dark-on-tertiary-container);
+        --button-surface: var(--color-dark-tertiary-container);
+      }
+      &.danger {
+        --button-text: var(--color-dark-on-error-container);
+        --button-surface: var(--color-dark-error-container);
+      }
+      &.warn {
+        --button-text: var(--color-dark-on-warning-container);
+        --button-surface: var(--color-dark-warning-container);
+      }
+      &.success {
+        --button-text: var(--color-dark-on-success-container);
+        --button-surface: var(--color-dark-success-container);
+      }
+      &.info {
+        --button-text: var(--color-dark-on-info-container);
+        --button-surface: var(--color-dark-info-container);
+      }
     }
-    &.danger:not(:disabled) {
-      --button-text: var(--color-dark-on-error);
-      --button-surface: var(--color-dark-error);
-    }
-    &.warn:not(:disabled) {
-      --button-text: var(--color-dark-on-warning);
-      --button-surface: var(--color-dark-warning);
-    }
-    &.success:not(:disabled) {
-      --button-text: var(--color-dark-on-success);
-      --button-surface: var(--color-dark-success);
-    }
-    &.info:not(:disabled) {
-      --button-text: var(--color-dark-on-info);
-      --button-surface: var(--color-dark-info);
-    }
-    &:disabled {
+    &.tonal:disabled {
       --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
       --button-surface: color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent);
-      --button-outline: color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent);
-      cursor: not-allowed;
     }
-    &.outline {
+    &.outlined:not(:disabled) {
+      border: 1px solid var(--button-outline);
       --button-text: var(--color-dark-primary);
       --button-surface: transparent;
-      border: 1px solid var(--button-outline);
-      &:hover:not(:disabled) {
-        --button-text: var(--color-dark-primary);
+      &:hover {
+        background-color: color-mix(in oklch, var(--button-text) 8%, transparent);
+        box-shadow: var(--elevation-dark-0);
+      }
+      &:active {
+        background-color: color-mix(in oklch, var(--button-text) 10%, transparent);
+      }
+      &.secondary {
+        --button-text: var(--color-dark-secondary);
+      }
+      &.tertiary {
+        --button-text: var(--color-dark-tertiary);
+      }
+      &.danger {
+        --button-text: var(--color-dark-error);
+      }
+      &.warn {
+        --button-text: var(--color-dark-warning);
+      }
+      &.success {
+        --button-text: var(--color-dark-success);
+      }
+      &.info {
+        --button-text: var(--color-dark-info);
+      }
+    }
+    &.outlined:disabled {
+      border: 1px solid color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent);
+      --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
+    }
+    &.text:not(:disabled) {
+      --button-text: var(--color-dark-primary);
+      --button-surface: transparent;
+      &:hover {
         --button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
         box-shadow: var(--elevation-dark-0);
       }
-      &:active:not(:disabled) {
-        --button-text: var(--color-dark-primary);
+      &:active {
         --button-surface: color-mix(in oklch, var(--button-text) 10%, transparent);
-        box-shadow: var(--elevation-dark-0);
       }
-      &.danger:not(:disabled) {
+      &.secondary {
+        --button-text: var(--color-dark-secondary);
+      }
+      &.tertiary {
+        --button-text: var(--color-dark-tertiary);
+      }
+      &.danger {
         --button-text: var(--color-dark-error);
       }
-      &.warn:not(:disabled) {
+      &.warn {
         --button-text: var(--color-dark-warning);
       }
-      &.success:not(:disabled) {
+      &.success {
         --button-text: var(--color-dark-success);
       }
-      &.info:not(:disabled) {
+      &.info {
         --button-text: var(--color-dark-info);
       }
-      &:disabled {
-        --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
-      }
     }
-    &.text {
-      --button-text: --color-dark-primary;
+    &.text:disabled {
+      --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
       --button-surface: transparent;
-      border: none;
-      &:hover:not(:disabled) {
-        --button-surface: color-mix(in oklch, var(--color-dark-primary) 8%, transparent);
+    }
+    &.icon:not(:disabled) {
+      --button-text: var(--color-dark-on-surface-variant);
+      --button-surface: transparent;
+      &:hover {
+        --button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
+        box-shadow: var(--elevation-dark-0);
       }
-      &:active:not(:disabled) {
-        --button-surface: color-mix(in oklch, var(--color-dark-primary) 10%, transparent);
+      &:active {
+        --button-surface: color-mix(in oklch, var(--button-text) 10%, transparent);
       }
-      &.danger:not(:disabled) {
-        --button-text: var(--color-dark-error);
-        --button-surface: transparent;
+      &.selected {
+        --button-text: var(--color-dark-primary);
+        &.secondary {
+          --button-text: var(--color-dark-secondary);
+        }
+        &.tertiary {
+          --button-text: var(--color-dark-tertiary);
+        }
+        &.danger {
+          --button-text: var(--color-dark-error);
+        }
+        &.warn {
+          --button-text: var(--color-dark-warning);
+        }
+        &.success {
+          --button-text: var(--color-dark-success);
+        }
+        &.info {
+          --button-text: var(--color-dark-info);
+        }
       }
-      &.warn:not(:disabled) {
-        --button-text: var(--color-dark-warning);
-        --button-surface: transparent;
+    }
+    &.icon:disabled {
+      --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
+      --button-surface: transparent;
+    }
+    &.filled_icon:not(:disabled) {
+      --button-text: var(--color-dark-on-primary);
+      --button-surface: var(--color-dark-primary);
+      &.secondary {
+        --button-text: var(--color-dark-on-secondary);
+        --button-surface: var(--color-dark-secondary);
       }
-      &.success:not(:disabled) {
-        --button-text: var(--color-dark-success);
-        --button-surface: transparent;
+      &.tertiary {
+        --button-text: var(--color-dark-on-tertiary);
+        --button-surface: var(--color-dark-tertiary);
       }
-      &.info:not(:disabled) {
-        --button-text: var(--color-dark-info);
-        --button-surface: transparent;
+      &.danger {
+        --button-text: var(--color-dark-on-error);
+        --button-surface: var(--color-dark-error);
       }
-      &:disabled {
-        --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
+      &.warn {
+        --button-text: var(--color-dark-on-warning);
+        --button-surface: var(--color-dark-warning);
       }
+      &.success {
+        --button-text: var(--color-dark-on-success);
+        --button-surface: var(--color-dark-success);
+      }
+      &.info {
+        --button-text: var(--color-dark-on-info);
+        --button-surface: var(--color-dark-info);
+      }
+      &.unselected {
+        --button-text: var(--color-dark-primary);
+        --button-surface: var(--color-dark-surface-container-highest);
+      }
+    }
+    &.filled_icon:disabled {
+      --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
+      --button-surface: color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent);
+    }
+    &.tonal_icon:not(:disabled) {
+      --button-text: var(--color-dark-on-primary-container);
+      --button-surface: var(--color-dark-primary-container);
+      &:hover {
+        --button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
+        box-shadow: var(--elevation-dark-0);
+      }
+      &:active {
+        --button-surface: color-mix(in oklch, var(--button-text) 10%, transparent);
+      }
+      &.secondary {
+        --button-text: var(--color-dark-on-secondary-container);
+        --button-surface: var(--color-dark-secondary-container);
+      }
+      &.tertiary {
+        --button-text: var(--color-dark-on-tertiary-container);
+        --button-surface: var(--color-dark-tertiary-container);
+      }
+      &.danger {
+        --button-text: var(--color-dark-on-error-container);
+        --button-surface: var(--color-dark-error-container);
+      }
+      &.warn {
+        --button-text: var(--color-dark-on-warning-container);
+        --button-surface: var(--color-dark-warning-container);
+      }
+      &.success {
+        --button-text: var(--color-dark-on-success-container);
+        --button-surface: var(--color-dark-success-container);
+      }
+      &.info {
+        --button-text: var(--color-dark-on-info-container);
+        --button-surface: var(--color-dark-info-container);
+      }
+      &.unselected {
+        --button-text: var(--color-dark-on-surface-variant);
+        --button-surface: var(--color-dark-surface-container-highest);
+      }
+    }
+    &.tonal_icon:disabled {
+      --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
+      --button-surface: color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent);
+    }
+    &.outlined_icon:not(:disabled) {
+      --button-text: var(--color-dark-on-surface-variant);
+      --button-surface: transparent;
+      border: 1px solid var(--button-outline);
+      &:hover {
+        --button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
+        box-shadow: var(--elevation-dark-0);
+      }
+      &:active {
+        --button-surface: color-mix(in oklch, var(--button-text) 10%, transparent);
+      }
+      &.selected {
+        --button-text: var(--color-dark-inverse-on-surface);
+        --button-surface: var(--color-dark-inverse-surface);
+      }
+    }
+    &.outlined_icon:disabled {
+      --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
+      --button-surface: color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent);
+      border: 1px solid color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent);
     }
   }
 }