@dvcol/neo-svelte 0.1.3 → 0.1.4

package/dist/providers/NeoThemeSelector.svelte

@@ -8,7 +8,7 @@
   import IconSave from '../icons/IconSave.svelte';
   import IconSaveOff from '../icons/IconSaveOff.svelte';
   import IconSun from '../icons/IconSun.svelte';
-  import IconSunrise from '../icons/IconSunrise.svelte';
+  import IconSunFull from '../icons/IconSunFull.svelte';
   import { useNeoThemeContext } from './neo-theme-provider-context.svelte.js';
   import { NeoSource, NeoTheme } from './neo-theme-provider.model.js';
 
@@ -56,8 +56,8 @@
   {#if showSource}
     <NeoButton aria-label="Cycle light source origin" title="Cycle light source origin" checked onclick={onCycleSource} {...sourceProps}>
       {#snippet icon()}
-        <span class="source-icon" style:--neo-source-rotate={`${angle}deg`}>
-          <IconSunrise />
+        <span class="neo-source-icon" style:--neo-source-rotate="{angle}deg">
+          <IconSunFull />
         </span>
       {/snippet}
       <span>Source</span>
@@ -65,8 +65,8 @@
   {/if}
   {#if showTheme}
     <NeoButton
-      aria-label={`Toggle ${dark ? 'light' : 'dark'} theme`}
-      title={`Toggle ${dark ? 'light' : 'dark'} theme`}
+      aria-label="Toggle {dark ? 'light' : 'dark'} theme"
+      title="Toggle {dark ? 'light' : 'dark'} theme"
       toggle
       checked={dark}
       onclick={onTheme}
@@ -84,8 +84,8 @@
   {/if}
   {#if showReset}
     <NeoButton
-      aria-label={`Toggle ${reset ? 'off' : 'on'} style reset`}
-      title={`Toggle ${reset ? 'off' : 'on'} style reset`}
+      aria-label="Toggle {reset ? 'off' : 'on'} style reset"
+      title="Toggle {reset ? 'off' : 'on'} style reset"
       toggle
       checked={reset}
       onclick={onReset}
@@ -110,13 +110,13 @@
   {@render children?.(context.state)}
 </NeoButtonGroup>
 
-<style>.source-icon {
+<style>.neo-source-icon {
   overflow: hidden;
   border-radius: var(--neo-theme-selector-border-radius, var(--neo-border-radius-lg));
   rotate: var(--neo-source-rotate, 0);
   transition: rotate 0.5s ease;
 }
-.source-icon :global(svg) {
+.neo-source-icon :global(svg) {
   width: 1.25rem;
   height: 1.25rem;
   translate: -30% -30%;

package/dist/providers/neo-theme-provider-context.svelte.js

@@ -63,7 +63,7 @@ export class NeoThemeProviderContext {
         this.root.setAttribute(NeoThemeStorageKey.Theme, this.theme);
         this.root.setAttribute(NeoThemeStorageKey.Source, this.source);
         if (this.reset)
-            this.root.setAttribute(NeoThemeStorageKey.Rest, '');
+            this.root.setAttribute(NeoThemeStorageKey.Reset, '');
         else
             this.root.removeAttribute(NeoThemeStorageKey.Reset);
         if (!localStorage)

package/dist/providers/neo-theme-selector.model.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
-import type { NeoButtonProps } from '../buttons/index.js';
 import type { NeoButtonGroupProps } from '../buttons/neo-button-group.model.js';
+import type { NeoButtonProps } from '../buttons/neo-button.model.js';
 import type { INeoThemeProviderContext } from './neo-theme-provider.model.js';
 export type NeoThemeSelectorProps = {
     children?: Snippet<[INeoThemeProviderContext]>;

package/dist/skeletons/NeoSkeletonMedia.svelte

@@ -58,8 +58,8 @@
 <NeoSkeletonContainer {loading} in={inAction} out={outAction} {width} {height} {containerProps} {content}>
   <div
     class:neo-skeleton-media={true}
-    class:rounded
-    class:circle
+    class:neo-rounded={rounded}
+    class:neo-circle={circle}
     style:aspect-ratio={ratio}
     style:width
     style:height
@@ -123,10 +123,10 @@
     border-color: var(--neo-skeleton-color-start);
   }
 }
-.neo-skeleton-media.rounded {
+.neo-skeleton-media.neo-rounded {
   border-radius: var(--neo-skeleton-border-radius, var(--neo-border-radius-lg));
 }
-.neo-skeleton-media.circle {
+.neo-skeleton-media.neo-circle {
   border-radius: 50%;
   aspect-ratio: 1/1;
 }

package/dist/skeletons/NeoSkeletonText.svelte

@@ -43,14 +43,14 @@
 <NeoSkeletonContainer {loading} in={inAction} out={outAction} {width} {height} {containerProps} {content}>
   <div class:neo-skeleton-text={true} style:width style:height in:inFn={inProps} out:outFn={outProps} {...rest}>
     {#if title}
-      <div class:neo-skeleton-text-line={true} class:title class:alt {...titleProps}>&nbsp;</div>
+      <div class:neo-skeleton-text-line={true} class:neo-title={title} class:neo-alt={alt} {...titleProps}>&nbsp;</div>
     {/if}
 
     {#if paragraphs && lines}
       {#each Array(Number(paragraphs)) as _}
-        <div class:neo-skeleton-text-paragraph={true} class:alt class:justify {...paragraphProps}>
+        <div class:neo-skeleton-text-paragraph={true} class:neo-alt={alt} class:neo-justify={justify} {...paragraphProps}>
           {#each Array(Number(lines)) as __}
-            <div class="neo-skeleton-text-line" class:alt>&nbsp;</div>
+            <div class="neo-skeleton-text-line" class:neo-alt={alt}>&nbsp;</div>
           {/each}
         </div>
       {/each}
@@ -132,26 +132,26 @@
 .neo-skeleton-text-line:only-child {
   width: 100%;
 }
-.neo-skeleton-text-line.alt {
+.neo-skeleton-text-line.neo-alt {
   width: 20%;
 }
-.neo-skeleton-text-line.alt:nth-child(even) {
+.neo-skeleton-text-line.neo-alt:nth-child(even) {
   width: 24%;
 }
-.neo-skeleton-text-line.alt:nth-child(3n) {
+.neo-skeleton-text-line.neo-alt:nth-child(3n) {
   width: 16%;
   animation-delay: 0.75s;
 }
-.neo-skeleton-text-line.alt:nth-child(4n) {
+.neo-skeleton-text-line.neo-alt:nth-child(4n) {
   width: 28%;
 }
-.neo-skeleton-text-line.alt:nth-child(6n) {
+.neo-skeleton-text-line.neo-alt:nth-child(6n) {
   width: 12%;
 }
-.neo-skeleton-text-line.alt:nth-child(7n) {
+.neo-skeleton-text-line.neo-alt:nth-child(7n) {
   width: 18%;
 }
-.neo-skeleton-text-line.title {
+.neo-skeleton-text-line.neo-title {
   width: 70%;
   height: var(--neo-line-height, 1.5rem);
 }
@@ -162,9 +162,9 @@
   flex-direction: column;
   gap: var(--neo-skeleton-paragraph-gap, var(--neo-gap-xs));
 }
-.neo-skeleton-text-paragraph.alt {
+.neo-skeleton-text-paragraph.neo-alt {
   flex-flow: row wrap;
 }
-.neo-skeleton-text-paragraph.justify .neo-skeleton-text-line {
+.neo-skeleton-text-paragraph.neo-justify .neo-skeleton-text-line {
   flex: 1 1 auto;
 }</style>

package/dist/styles/common/colors.scss

@@ -1,39 +1,33 @@
-[neo-theme-root] {
+@mixin colors {
   /* 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-50: oklch(from var(--neo-white-soft-light) l c h / 50%);
+  --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-10: oklch(from var(--neo-white-soft) l c h / 10%);
-  --neo-white-soft-15: oklch(from var(--neo-white-soft) l c h / 15%);
   --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);
   --neo-black-5: oklch(from var(--neo-black) l c h / 5%);
-  --neo-black-lighter-50: oklch(from var(--neo-black-lighter) l c h / 50%);
+  --neo-black-8: oklch(from var(--neo-black) l c h / 8%);
+  --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-20: oklch(from var(--neo-black-lighter) l c h / 20%);
+  --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-10: oklch(from var(--neo-black-soft) l c h / 10%);
   --neo-black-soft-dark: oklch(from var(--neo-black-soft) calc(l - 0.05) c h);
-  --neo-black-soft-dark-50: oklch(from var(--neo-black-soft-dark) l c h / 50%);
   --neo-grey: oklch(from var(--neo-black-soft) calc(l + 0.612) c h);
   --neo-grey-soft: oklch(from var(--neo-grey) calc(l - 0.15) c h);
-  --neo-grey-soft-5: oklch(from var(--neo-grey-soft) l c h / 5%);
-  --neo-grey-soft-10: oklch(from var(--neo-grey-soft) l c h / 10%);
-  --neo-grey-soft-12: oklch(from var(--neo-grey-soft) l c h / 12%);
   --neo-grey-soft-20: oklch(from var(--neo-grey-soft) l c h / 20%);
   --neo-grey-soft-30: oklch(from var(--neo-grey-soft) l c h / 30%);
   --neo-grey-soft-60: oklch(from var(--neo-grey-soft) l c h / 60%);
   --neo-grey-strong: oklch(from var(--neo-grey) calc(l - 0.4) c h);
-  --neo-grey-strong-5: oklch(from var(--neo-grey-strong) l c h / 5%);
-  --neo-grey-strong-8: oklch(from var(--neo-grey-strong) l c h / 8%);
-  --neo-grey-strong-10: oklch(from var(--neo-grey-strong) l c h / 10%);
-  --neo-grey-strong-12: oklch(from var(--neo-grey-strong) l c h / 12%);
-  --neo-grey-strong-20: oklch(from var(--neo-grey-strong) l c h / 20%);
   --neo-grey-strong-60: oklch(from var(--neo-grey-strong) l c h / 60%);
-  --neo-grey-strong-80: oklch(from var(--neo-grey-strong) l c h / 80%);
   --neo-grey-dark: oklch(from var(--neo-grey-strong) calc(l - 0.1) c h);
   --neo-grey-dark-80: oklch(from var(--neo-grey-dark) l c h / 80%);
   --neo-blue: oklch(50% 0.302 264.206deg);
@@ -49,7 +43,7 @@
   --neo-red-light-75: oklch(from var(--neo-red-light) l c h / 75%);
   --neo-red: oklch(50% 0.302 26.206deg);
   --neo-red-5: oklch(from var(--neo-red) l c h / 5%);
-  --neo-red-10: oklch(from var(--neo-red) l c h / 10%);
+  --neo-red-7: oklch(from var(--neo-red) l c h / 7%);
   --neo-red-50: oklch(from var(--neo-red) l c h / 50%);
   --neo-red-75: oklch(from var(--neo-red) l c h / 75%);
   --neo-green-light: oklch(from var(--neo-green) calc(l + 0.25) c h);
@@ -63,7 +57,7 @@
   --neo-color-primary-80: var(--neo-blue-80);
   --neo-color-error: var(--neo-red);
   --neo-color-error-5: var(--neo-red-5);
-  --neo-color-error-10: var(--neo-red-10);
+  --neo-color-error-7: var(--neo-red-7);
   --neo-color-error-50: var(--neo-red-50);
   --neo-color-error-75: var(--neo-red-75);
   --neo-color-success: var(--neo-green);
@@ -71,16 +65,17 @@
 
   /** semantic colors */
   --neo-text-color: var(--neo-grey-strong);
+  --neo-text-color-secondary: color-mix(in srgb, var(--neo-text-color), white 20%);
+  --neo-text-color-highlight: color-mix(in srgb, currentcolor, black 50%);
   --neo-text-color-active: color-mix(in srgb, currentcolor, white 10%);
-  --neo-text-color-focused: var(--neo-color-primary-50);
+  --neo-text-color-focused: color-mix(in srgb, var(--neo-text-color), var(--neo-color-primary) 50%);
   --neo-text-color-focused-active: color-mix(in srgb, var(--neo-text-color-focused), white 10%);
-  --neo-text-color-hover: var(--neo-color-primary-80);
+  --neo-text-color-hover: color-mix(in srgb, var(--neo-text-color), var(--neo-color-primary) 70%);
   --neo-text-color-hover-active: color-mix(in srgb, var(--neo-text-color-hover), white 20%);
   --neo-text-color-disabled: var(--neo-grey-strong-60);
   --neo-text-highlight-color: var(--neo-grey-soft-30);
   --neo-border-color: var(--neo-grey-soft);
-  --neo-border-color-focused: var(--neo-color-primary-50);
-  --neo-border-color-primary: var(--neo-color-primary-80);
+  --neo-border-color-focused: color-mix(in srgb, var(--neo-border-color), var(--neo-color-primary) 50%);
   --neo-border-color-disabled: var(--neo-grey-soft-60);
   --neo-background-color: var(--neo-white-soft);
   --neo-background-color-lighter: color-mix(in srgb, var(--neo-background-color), white 5%);
@@ -92,17 +87,18 @@
   --neo-close-color: var(--neo-color-error);
   --neo-close-color-hover: var(--neo-color-error-75);
   --neo-close-color-focused: var(--neo-color-error-50);
-  --neo-close-bg-color-hover: var(--neo-color-error-10);
+  --neo-close-bg-color-hover: var(--neo-color-error-7);
   --neo-close-bg-color-focused: var(--neo-color-error-5);
   --neo-scrollbar-color: var(--neo-grey-soft-60);
 
   /** glass colors */
   --neo-glass-background-color: var(--neo-white-soft-20);
-  --neo-glass-background-color-focus: var(--neo-white-soft-15);
-  --neo-glass-background-color-hover: var(--neo-white-soft-10);
-  --neo-glass-shadow-color: var(--neo-black-soft-10);
-  --neo-glass-border-color: var(--neo-white-soft-light-50);
-  --neo-glass-border-color-hover: var(--neo-glass-background-color);
+  --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 */
@@ -119,16 +115,17 @@
 
   /** dark mode semantic colors */
   --neo-dark-text-color: var(--neo-white-soft-dark);
+  --neo-dark-text-color-secondary: color-mix(in srgb, var(--neo-text-color), black 20%);
+  --neo-dark-text-color-highlight: color-mix(in srgb, currentcolor, white 80%);
   --neo-dark-text-color-active: color-mix(in srgb, currentcolor, black 10%);
-  --neo-dark-text-color-focused: var(--neo-dark-color-primary-50);
+  --neo-dark-text-color-focused: color-mix(in srgb, var(--neo-dark-text-color), var(--neo-dark-color-primary) 40%);
   --neo-dark-text-color-focused-active: color-mix(in srgb, var(--neo-dark-text-color-focused), black 10%);
-  --neo-dark-text-color-hover: var(--neo-dark-color-primary-80);
+  --neo-dark-text-color-hover: color-mix(in srgb, var(--neo-dark-text-color), var(--neo-dark-color-primary) 80%);
   --neo-dark-text-color-hover-active: color-mix(in srgb, var(--neo-dark-text-color-hover), black 20%);
   --neo-dark-text-color-disabled: var(--neo-white-soft-dark-80);
   --neo-dark-text-highlight-color: var(--neo-grey-soft-20);
   --neo-dark-border-color: var(--neo-grey-dark);
-  --neo-dark-border-color-focused: var(--neo-dark-color-primary-50);
-  --neo-dark-border-color-primary: var(--neo-dark-color-primary-80);
+  --neo-dark-border-color-focused: color-mix(in srgb, var(--neo-dark-border-color), var(--neo-dark-color-primary) 40%);
   --neo-dark-border-color-disabled: var(--neo-grey-dark-80);
   --neo-dark-background-color: var(--neo-black-soft);
   --neo-dark-background-color-lighter: color-mix(in srgb, var(--neo-background-color), black 5%);
@@ -145,73 +142,64 @@
   --neo-dark-scrollbar-color: var(--neo-grey-dark-80);
 
   /** dark mode glass colors */
-  --neo-dark-glass-background-color: var(--neo-grey-strong-8);
-  --neo-dark-glass-background-color-focus: var(--neo-grey-strong-10);
-  --neo-dark-glass-background-color-hover: var(--neo-grey-strong-12);
-  --neo-dark-glass-shadow-color: var(--neo-black-soft-dark-50);
-  --neo-dark-glass-border-color: var(--neo-black-lighter-50);
-  --neo-dark-glass-border-color-hover: var(--neo-dark-glass-background-color);
+  --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-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-5);
   --neo-dark-glass-skeleton-color: var(--neo-grey-dark-80);
+}
 
-  @mixin dark-theme {
-    /** primary colors */
-    --neo-color-primary: var(--neo-dark-color-primary);
-    --neo-color-primary-50: var(--neo-dark-color-primary-50);
-    --neo-color-primary-80: var(--neo-dark-color-primary-80);
-    --neo-color-error: var(--neo-dark-color-error);
-    --neo-color-error-5: var(--neo-dark-color-error-5);
-    --neo-color-error-10: var(--neo-dark-color-error-10);
-    --neo-color-error-50: var(--neo-dark-color-error-50);
-    --neo-color-error-75: var(--neo-dark-color-error-75);
-    --neo-color-success: var(--neo-dark-color-success);
-    --neo-color-success-50: var(--neo-dark-color-success-50);
-
-    /** semantic colors */
-    --neo-text-color: var(--neo-dark-text-color);
-    --neo-text-color-active: var(--neo-dark-text-color-active);
-    --neo-text-color-focused: var(--neo-dark-text-color-focused);
-    --neo-text-color-focused-active: var(--neo-dark-text-color-focused-active);
-    --neo-text-color-hover: var(--neo-dark-text-color-hover);
-    --neo-text-color-hover-active: var(--neo-dark-text-color-hover-active);
-    --neo-text-color-disabled: var(--neo-dark-text-color-disabled);
-    --neo-text-highlight-color: var(--neo-dark-text-highlight-color);
-    --neo-border-color: var(--neo-dark-border-color);
-    --neo-border-color-focused: var(--neo-dark-border-color-focused);
-    --neo-border-color-primary: var(--neo-dark-border-color-primary);
-    --neo-border-color-disabled: var(--neo-dark-border-color-disabled);
-    --neo-background-color: var(--neo-dark-background-color);
-    --neo-background-color-lighter: var(--neo-dark-background-color-lighter);
-    --neo-background-color-darker: var(--neo-dark-background-color-darker);
-    --neo-shadow-color-light: var(--neo-dark-shadow-color-light);
-    --neo-shadow-color-dark: var(--neo-dark-shadow-color-dark);
-    --neo-skeleton-color: var(--neo-dark-skeleton-color);
-    --neo-skeleton-color-step: var(--neo-dark-skeleton-color-step);
-    --neo-close-color: var(--neo-dark-close-color);
-    --neo-close-color-hover: var(--neo-dark-close-color-hover);
-    --neo-close-color-focused: var(--neo-dark-close-color-focused);
-    --neo-close-bg-color-hover: var(--neo-dark-close-bg-color-hover);
-    --neo-close-bg-color-focused: var(--neo-dark-close-bg-color-focused);
-    --neo-scrollbar-color: var(--neo-dark-scrollbar-color);
-
-    /** glass colors */
-    --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-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);
-  }
+@mixin dark-theme {
+  /** primary colors */
+  --neo-color-primary: var(--neo-dark-color-primary);
+  --neo-color-primary-50: var(--neo-dark-color-primary-50);
+  --neo-color-primary-80: var(--neo-dark-color-primary-80);
+  --neo-color-error: var(--neo-dark-color-error);
+  --neo-color-error-5: var(--neo-dark-color-error-5);
+  --neo-color-error-7: var(--neo-dark-color-error-10);
+  --neo-color-error-50: var(--neo-dark-color-error-50);
+  --neo-color-error-75: var(--neo-dark-color-error-75);
+  --neo-color-success: var(--neo-dark-color-success);
+  --neo-color-success-50: var(--neo-dark-color-success-50);
 
-  /* override semantic color if dark mode is enabled */
-  &[neo-theme='dark'] {
-    @include dark-theme;
-  }
+  /** semantic colors */
+  --neo-text-color: var(--neo-dark-text-color);
+  --neo-text-color-secondary: var(--neo-dark-text-color-secondary);
+  --neo-text-color-highlight: var(--neo-dark-text-color-highlight);
+  --neo-text-color-active: var(--neo-dark-text-color-active);
+  --neo-text-color-focused: var(--neo-dark-text-color-focused);
+  --neo-text-color-focused-active: var(--neo-dark-text-color-focused-active);
+  --neo-text-color-hover: var(--neo-dark-text-color-hover);
+  --neo-text-color-hover-active: var(--neo-dark-text-color-hover-active);
+  --neo-text-color-disabled: var(--neo-dark-text-color-disabled);
+  --neo-text-highlight-color: var(--neo-dark-text-highlight-color);
+  --neo-border-color: var(--neo-dark-border-color);
+  --neo-border-color-focused: var(--neo-dark-border-color-focused);
+  --neo-border-color-disabled: var(--neo-dark-border-color-disabled);
+  --neo-background-color: var(--neo-dark-background-color);
+  --neo-background-color-lighter: var(--neo-dark-background-color-lighter);
+  --neo-background-color-darker: var(--neo-dark-background-color-darker);
+  --neo-shadow-color-light: var(--neo-dark-shadow-color-light);
+  --neo-shadow-color-dark: var(--neo-dark-shadow-color-dark);
+  --neo-skeleton-color: var(--neo-dark-skeleton-color);
+  --neo-skeleton-color-step: var(--neo-dark-skeleton-color-step);
+  --neo-close-color: var(--neo-dark-close-color);
+  --neo-close-color-hover: var(--neo-dark-close-color-hover);
+  --neo-close-color-focused: var(--neo-dark-close-color-focused);
+  --neo-close-bg-color-hover: var(--neo-dark-close-bg-color-hover);
+  --neo-close-bg-color-focused: var(--neo-dark-close-bg-color-focused);
+  --neo-scrollbar-color: var(--neo-dark-scrollbar-color);
 
-  /* apply dark mode if not overridden */
-  @media (prefers-color-scheme: dark) {
-    &:not([neo-theme='light']) {
-      @include dark-theme;
-    }
-  }
+  /** glass colors */
+  --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-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);
 }

package/dist/styles/common/filters.scss

@@ -0,0 +1,17 @@
+@mixin filters() {
+  /* Blurs */
+  --neo-blur-0: blur(0);
+  --neo-blur-1: blur(4px);
+  --neo-blur-2: blur(6px);
+  --neo-blur-3: blur(8px);
+  --neo-blur-4: blur(12px);
+  --neo-blur-5: blur(16px);
+
+  /* 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);
+}