style: improve dark mode button contrast (#85)

tien · Sep 15, 2024 · f67fe30 · f67fe30
1 parent 83bb659
commit f67fe30
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 15 deletions.
diff --git a/.changeset/hungry-eagles-hug.md b/.changeset/hungry-eagles-hug.md
@@ -0,0 +1,5 @@
+---
+"dot-connect": patch
+---
+
+Updated button with improved contrast for dark mode.
diff --git a/packages/dot-connect/src/elements/components/element.ts b/packages/dot-connect/src/elements/components/element.ts
@@ -64,32 +64,24 @@ export abstract class DotConnectElement extends SignalWatcher(LitElement) {
       }
 
       &.info {
-        color: light-dark(
-          var(--info-color),
-          color-mix(in srgb, var(--info-color), var(--surface-color) 10%)
-        );
+        color: var(--info-color);
       }
 
       &.success {
-        color: light-dark(
-          var(--success-color),
-          color-mix(in srgb, var(--success-color), var(--surface-color) 10%)
-        );
+        color: var(--success-color);
       }
 
       &.error {
-        color: light-dark(
-          var(--error-color),
-          color-mix(in srgb, var(--error-color), var(--surface-color) 10%)
-        );
+        color: var(--error-color);
       }
 
       &.info,
       &.success,
       &.error {
-        background-color: light-dark(
-          color-mix(in srgb, var(--on-surface-color), transparent 95%),
-          var(--on-surface-color)
+        background-color: color-mix(
+          in srgb,
+          var(--on-surface-color),
+          transparent 95%
         );
       }