fix(theme): adjust glass color theme

dvcol · Nov 26, 2024 · 11acd30 · 11acd30
1 parent 6a1938a
commit 11acd30
Show file tree

Hide file tree

Showing 11 changed files with 190 additions and 111 deletions.
diff --git a/demo/components/DemoInputs.svelte b/demo/components/DemoInputs.svelte
@@ -392,7 +392,7 @@
     margin: 2rem 0;
   }
 
-  @media (width < 1200px) {
+  @media (width < 1400px) {
     .column.content {
       flex: 1 0 40%;
       max-width: 50%;

diff --git a/src/lib/buttons/NeoButton.svelte b/src/lib/buttons/NeoButton.svelte
@@ -216,24 +216,19 @@
     }
 
     &.glass {
+      @include mixin.glass;
+
       background-color: var(--neo-btn-bg-color, var(--neo-glass-background-color));
-      box-shadow: var(--neo-glass-box-shadow-raised-3);
       backdrop-filter: var(--neo-blur-2) var(--neo-saturate-3);
 
       &:focus-visible {
         background-color: var(--neo-glass-background-color-focus);
-        box-shadow: var(--neo-glass-box-shadow-raised-2);
         backdrop-filter: var(--neo-blur-1) var(--neo-saturate-3);
       }
 
       &.pressed,
       &:active {
-        box-shadow: var(--neo-glass-box-shadow-inset-3);
         backdrop-filter: var(--neo-blur-0) var(--neo-saturate-2);
-
-        &.shallow {
-          box-shadow: var(--neo-glass-box-shadow-flat);
-        }
       }
 
       &:disabled:not(.skeleton),
@@ -253,12 +248,10 @@
       &:hover:not(:active, &.pressed) {
         background-color: var(--neo-glass-background-color-hover);
         border-color: var(--neo-btn-border-color-hover, var(--neo-glass-border-color-hover));
-        box-shadow: var(--neo-box-shadow-flat);
         backdrop-filter: var(--neo-blur-1) var(--neo-saturate-2);
 
         &.shallow {
           border-color: transparent;
-          box-shadow: var(--neo-glass-box-shadow-raised-2);
         }
       }
     }

diff --git a/src/lib/buttons/NeoButtonGroup.svelte b/src/lib/buttons/NeoButtonGroup.svelte
@@ -134,7 +134,7 @@
       border-color: transparent !important;
     }
 
-    &:not(.text, .flat, .glass) {
+    &:not(.text, .flat) {
       box-shadow: var(--neo-box-shadow-raised-3);
     }
 
@@ -149,25 +149,19 @@
     }
 
     &.glass {
+      @include mixin.glass;
+
       background-color: var(--neo-btn-bg-color, var(--neo-glass-background-color));
       border-color: var(
         --neo-btn-border-color,
         var(--neo-glass-top-border-color) var(--neo-glass-right-border-color) var(--neo-glass-bottom-border-color) var(--neo-glass-left-border-color)
       );
       backdrop-filter: var(--neo-blur-2) var(--neo-saturate-3);
 
-      &:not(.text, .flat) {
-        box-shadow: var(--neo-glass-box-shadow-raised-3);
-      }
-
       :global(.neo-button) {
         background-color: transparent;
         backdrop-filter: none;
       }
-
-      :global(.neo-button:not(:active, .pressed)) {
-        box-shadow: var(--neo-glass-box-shadow-flat);
-      }
     }
 
     :global(.neo-button) {
@@ -227,10 +221,6 @@
         box-shadow: var(--neo-box-shadow-raised-2);
       }
 
-      &.glass {
-        box-shadow: var(--neo-glass-box-shadow-raised-2);
-      }
-
       :global(.neo-button.loading:active:not(.pressed)),
       :global(.neo-button:not(.flat, .text, :active, .pressed):hover) {
         box-shadow: var(--neo-box-shadow-inset-1);

diff --git a/src/lib/cards/NeoCard.svelte b/src/lib/cards/NeoCard.svelte
@@ -335,7 +335,7 @@
         --neo-card-border-color,
         var(--neo-glass-top-border-color) var(--neo-glass-right-border-color) var(--neo-glass-bottom-border-color) var(--neo-glass-left-border-color)
       );
-      backdrop-filter: var(--neo-card-glass-blur, var(--neo-blur-4) var(--neo-saturate-2));
+      backdrop-filter: var(--neo-card-glass-blur, var(--neo-blur-3) var(--neo-saturate-2));
     }
 
     &.start {

diff --git a/src/lib/inputs/NeoInput.svelte b/src/lib/inputs/NeoInput.svelte
@@ -789,7 +789,7 @@
         --neo-input-border-color,
         var(--neo-glass-top-border-color) var(--neo-glass-right-border-color) var(--neo-glass-bottom-border-color) var(--neo-glass-left-border-color)
       );
-      backdrop-filter: var(--neo-input-glass-blur, var(--neo-blur-4) var(--neo-saturate-2));
+      backdrop-filter: var(--neo-input-glass-blur, var(--neo-blur-3) var(--neo-saturate-2));
     }
 
     &.validation {

diff --git a/src/lib/inputs/NeoTextarea.svelte b/src/lib/inputs/NeoTextarea.svelte
@@ -775,7 +775,7 @@
         --neo-textarea-border-color,
         var(--neo-glass-top-border-color) var(--neo-glass-right-border-color) var(--neo-glass-bottom-border-color) var(--neo-glass-left-border-color)
       );
-      backdrop-filter: var(--neo-textarea-glass-blur, var(--neo-blur-4) var(--neo-saturate-2));
+      backdrop-filter: var(--neo-textarea-glass-blur, var(--neo-blur-3) var(--neo-saturate-2));
     }
 
     &.validation {

diff --git a/src/lib/styles/common/colors.scss b/src/lib/styles/common/colors.scss
@@ -2,11 +2,12 @@
   /* ui color variables */
   --neo-white: oklch(100% 0 0deg);
   --neo-white-soft-light: oklch(from var(--neo-white-soft) calc(l + 0.05) c h);
-  --neo-white-soft-light-10: oklch(from var(--neo-white-soft-light) l c h / 10%);
+  --neo-white-soft-light-30: oklch(from var(--neo-white-soft-light) l c h / 30%);
+  --neo-white-soft-light-60: oklch(from var(--neo-white-soft-light) l c h / 60%);
   --neo-white-soft: oklch(92.9% 0.009 279.682deg);
-  --neo-white-soft-5: oklch(from var(--neo-white-soft) l c h / 5%);
-  --neo-white-soft-8: oklch(from var(--neo-white-soft) l c h / 8%);
-  --neo-white-soft-10: oklch(from var(--neo-white-soft) l c h / 10%);
+  --neo-white-soft-20: oklch(from var(--neo-white-soft) l c h / 20%);
+  --neo-white-soft-22: oklch(from var(--neo-white-soft) l c h / 22%);
+  --neo-white-soft-25: oklch(from var(--neo-white-soft) l c h / 25%);
   --neo-white-soft-dark: oklch(from var(--neo-white-soft) calc(l - 0.075) c h);
   --neo-white-soft-dark-80: oklch(from var(--neo-white-soft-dark) l c h / 80%);
   --neo-black: oklch(0% 0 0deg);
@@ -15,6 +16,7 @@
   --neo-black-10: oklch(from var(--neo-black) l c h / 10%);
   --neo-black-20: oklch(from var(--neo-black) l c h / 20%);
   --neo-black-lighter: oklch(from var(--neo-black-soft) calc(l + 0.1) c h);
+  --neo-black-lighter-40: oklch(from var(--neo-black-lighter) l c h / 40%);
   --neo-black-light: oklch(from var(--neo-black-soft) calc(l + 0.05) c h);
   --neo-black-soft: oklch(33% 0 264.416deg);
   --neo-black-soft-dark: oklch(from var(--neo-black-soft) calc(l - 0.05) c h);
@@ -88,12 +90,13 @@
   --neo-scrollbar-color: var(--neo-grey-soft-60);
 
   /** glass colors */
-  --neo-glass-background-color: var(--neo-white-soft-5);
-  --neo-glass-background-color-focus: var(--neo-white-soft-8);
-  --neo-glass-background-color-hover: var(--neo-white-soft-10);
-  --neo-glass-shadow-color: var(--neo-black-20);
-  --neo-glass-border-color: var(--neo-white-soft-light-10);
-  --neo-glass-border-color-hover: var(--neo-glass-background-color);
+  --neo-glass-background-color: var(--neo-white-soft-20);
+  --neo-glass-background-color-focus: var(--neo-white-soft-22);
+  --neo-glass-background-color-hover: var(--neo-white-soft-25);
+  --neo-glass-shadow-color-light: var(--neo-white-soft-light-60);
+  --neo-glass-shadow-color-dark: var(--neo-black-10);
+  --neo-glass-border-color: var(--neo-white-soft-light-60);
+  --neo-glass-border-color-hover: var(--neo-white-soft-light-30);
   --neo-glass-skeleton-color: var(--neo-grey-soft-60);
 
   /** dark primary colors */
@@ -139,22 +142,11 @@
   --neo-dark-glass-background-color: var(--neo-black-5);
   --neo-dark-glass-background-color-focus: var(--neo-black-8);
   --neo-dark-glass-background-color-hover: var(--neo-black-10);
-  --neo-dark-glass-shadow-color: var(--neo-black-20);
-  --neo-dark-glass-border-color: var(--neo-white-soft-light-10);
-  --neo-dark-glass-border-color-hover: var(--neo-dark-glass-background-color);
+  --neo-dark-glass-shadow-color-light: var(--neo-black-lighter-40);
+  --neo-dark-glass-shadow-color-dark: var(--neo-black-20);
+  --neo-dark-glass-border-color: var(--neo-black-lighter-40);
+  --neo-dark-glass-border-color-hover: var(--neo-black-20);
   --neo-dark-glass-skeleton-color: var(--neo-grey-dark-80);
-
-  /* override semantic color if dark mode is enabled */
-  &[neo-theme='dark'] {
-    @include dark-theme;
-  }
-
-  /* apply dark mode if not overridden */
-  @media (prefers-color-scheme: dark) {
-    &:not([neo-theme='light']) {
-      @include dark-theme;
-    }
-  }
 }
 
 @mixin dark-theme {
@@ -201,7 +193,8 @@
   --neo-glass-background-color: var(--neo-dark-glass-background-color);
   --neo-glass-background-color-focus: var(--neo-dark-glass-background-color-focus);
   --neo-glass-background-color-hover: var(--neo-dark-glass-background-color-hover);
-  --neo-glass-shadow-color: var(--neo-dark-glass-shadow-color);
+  --neo-glass-shadow-color-light: var(--neo-dark-glass-shadow-color-light);
+  --neo-glass-shadow-color-dark: var(--neo-dark-glass-shadow-color-dark);
   --neo-glass-border-color: var(--neo-dark-glass-border-color);
   --neo-glass-border-color-hover: var(--neo-dark-glass-border-color-hover);
   --neo-glass-skeleton-color: var(--neo-dark-glass-skeleton-color);

diff --git a/src/lib/styles/common/filters.scss b/src/lib/styles/common/filters.scss
@@ -0,0 +1,17 @@
+@mixin filters() {
+  /* Blurs */
+  --neo-blur-0: blur(0);
+  --neo-blur-1: blur(2px);
+  --neo-blur-2: blur(4px);
+  --neo-blur-3: blur(6px);
+  --neo-blur-4: blur(8px);
+  --neo-blur-5: blur(12px);
+
+  /* Saturation */
+  --neo-saturate: saturate(1);
+  --neo-saturate-1: saturate(1.1);
+  --neo-saturate-2: saturate(1.2);
+  --neo-saturate-3: saturate(1.3);
+  --neo-saturate-4: saturate(1.5);
+  --neo-saturate-5: saturate(2);
+}