@dvcol/neo-svelte 0.1.2 → 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';
 
@@ -17,7 +17,7 @@
     children,
 
     // state
-    remember: showRemember = true,
+    remember: showRemember,
     source: showSource = true,
     theme: showTheme = true,
     reset: showReset,
@@ -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

@@ -1,11 +1,11 @@
 import { getContext, setContext, untrack } from 'svelte';
-import { getReset, getSource, getTheme, hasSaved, NeoSourceKey, NeoThemeKey, NeoThemeReset, NeoThemeRoot, } from './neo-theme-provider.model.js';
+import { getRemember, getReset, getSource, getTheme, NeoThemeRoot, NeoThemeStorageKey, } from './neo-theme-provider.model.js';
 import { NeoErrorThemeContextNotFound, NeoErrorThemeInvalidTarget, NeoErrorThemeTargetNotFound } from '../utils/error.utils.js';
 export class NeoThemeProviderContext {
     #reset = $state(getReset());
     #theme = $state(getTheme());
     #source = $state(getSource());
-    #remember = $state(hasSaved());
+    #remember = $state(getRemember());
     #root = $state(document?.documentElement);
     get reset() {
         return this.#reset;
@@ -60,23 +60,24 @@ export class NeoThemeProviderContext {
         if (!('setAttribute' in this.root))
             throw new NeoErrorThemeInvalidTarget();
         this.root.setAttribute(NeoThemeRoot, '');
-        this.root.setAttribute(NeoThemeKey, this.theme);
-        this.root.setAttribute(NeoSourceKey, this.source);
+        this.root.setAttribute(NeoThemeStorageKey.Theme, this.theme);
+        this.root.setAttribute(NeoThemeStorageKey.Source, this.source);
         if (this.reset)
-            this.root.setAttribute(NeoThemeReset, '');
+            this.root.setAttribute(NeoThemeStorageKey.Reset, '');
         else
-            this.root.removeAttribute(NeoThemeReset);
+            this.root.removeAttribute(NeoThemeStorageKey.Reset);
         if (!localStorage)
             return;
+        localStorage.setItem(NeoThemeStorageKey.Remember, Boolean(this.remember).toString());
         if (this.remember) {
-            localStorage.setItem(NeoThemeReset, Boolean(this.reset).toString());
-            localStorage.setItem(NeoThemeKey, this.theme);
-            localStorage.setItem(NeoSourceKey, this.source);
+            localStorage.setItem(NeoThemeStorageKey.Reset, Boolean(this.reset).toString());
+            localStorage.setItem(NeoThemeStorageKey.Theme, this.theme);
+            localStorage.setItem(NeoThemeStorageKey.Source, this.source);
         }
         else {
-            localStorage.removeItem(NeoThemeReset);
-            localStorage.removeItem(NeoThemeKey);
-            localStorage.removeItem(NeoSourceKey);
+            localStorage.removeItem(NeoThemeStorageKey.Reset);
+            localStorage.removeItem(NeoThemeStorageKey.Theme);
+            localStorage.removeItem(NeoThemeStorageKey.Source);
         }
     }
     destroy() {
@@ -85,9 +86,9 @@ export class NeoThemeProviderContext {
         if (!('removeAttribute' in this.root))
             return;
         this.root.removeAttribute(NeoThemeRoot);
-        this.root.removeAttribute(NeoThemeReset);
-        this.root.removeAttribute(NeoThemeKey);
-        this.root.removeAttribute(NeoSourceKey);
+        this.root.removeAttribute(NeoThemeStorageKey.Reset);
+        this.root.removeAttribute(NeoThemeStorageKey.Theme);
+        this.root.removeAttribute(NeoThemeStorageKey.Source);
     }
 }
 const NeoContextKey = Symbol('NeoThemeProviderContext');

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

@@ -63,7 +63,7 @@ export type NeoThemeProviderProps = {
     /**
      * To store the last used reset & theme & source in local storage (if available)
      *
-     * @default false
+     * @default true
      */
     remember?: boolean;
     /**
@@ -74,14 +74,14 @@ export type NeoThemeProviderProps = {
     target?: HTMLElement | ShadowRoot | (() => HTMLElement | ShadowRoot);
 };
 export declare const NeoThemeRoot = "neo-theme-root";
-export declare const NeoThemeReset = "neo-reset";
-export declare const NeoThemeKey = "neo-theme";
-export declare const NeoSourceKey = "neo-source";
+export declare const NeoThemeStorageKey: Record<string, `neo-${keyof INeoThemeProviderContext}`>;
+export type NeoThemeStorageKeys = (typeof NeoThemeStorageKey)[keyof typeof NeoThemeStorageKey];
 export declare const getSavedTheme: () => NeoThemes | null;
 export declare const getPreferTheme: () => NeoThemes;
 export declare const getTheme: () => NeoThemes;
 export declare const getSavedSource: () => NeoSources | null;
 export declare const getSource: () => NeoSources;
 export declare const getSavedReset: () => string | null;
-export declare const getReset: () => boolean | undefined;
-export declare const hasSaved: () => boolean;
+export declare const getReset: () => boolean;
+export declare const getSavedRemember: () => string | null;
+export declare const getRemember: () => boolean;

package/dist/providers/neo-theme-provider.model.js

@@ -16,19 +16,24 @@ export const NeoSource = {
     BottomLeft: 'bottom-left',
 };
 export const NeoThemeRoot = 'neo-theme-root';
-export const NeoThemeReset = 'neo-reset';
-export const NeoThemeKey = 'neo-theme';
-export const NeoSourceKey = 'neo-source';
-export const getSavedTheme = () => localStorage?.getItem(NeoThemeKey);
+export const NeoThemeStorageKey = {
+    Reset: 'neo-reset',
+    Theme: 'neo-theme',
+    Source: 'neo-source',
+    Remember: 'neo-remember',
+};
+export const getSavedTheme = () => localStorage?.getItem(NeoThemeStorageKey.Theme);
 export const getPreferTheme = () => (window.matchMedia('(prefers-color-scheme: dark)').matches ? NeoTheme.Dark : NeoTheme.Light);
 export const getTheme = () => getSavedTheme() ?? getPreferTheme();
-export const getSavedSource = () => localStorage?.getItem(NeoSourceKey);
+export const getSavedSource = () => localStorage?.getItem(NeoThemeStorageKey.Source);
 export const getSource = () => getSavedSource() ?? NeoSource.TopLeft;
-export const getSavedReset = () => localStorage?.getItem(NeoThemeReset);
-export const getReset = () => {
-    const reset = getSavedReset();
-    if (!reset)
-        return;
-    return reset === 'true';
+const getBoolean = (str, fallback = false) => {
+    // If saved reset is always truthy as it is a string
+    if (!str)
+        return fallback;
+    return str === 'true';
 };
-export const hasSaved = () => !!getSavedTheme() || !!getSavedSource() || !!getSavedReset();
+export const getSavedReset = () => localStorage?.getItem(NeoThemeStorageKey.Reset);
+export const getReset = () => getBoolean(getSavedReset(), true);
+export const getSavedRemember = () => localStorage?.getItem(NeoThemeStorageKey.Remember);
+export const getRemember = () => getBoolean(getSavedRemember(), true);

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

@@ -1,9 +1,9 @@
 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]>;
+    children?: Snippet<[INeoThemeProviderContext]>;
     /**
      * Whether to show the reset style button or not.
      */

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);
+}