@dvcol/neo-svelte 0.1.1

package/dist/styles/common/colors.scss

@@ -0,0 +1,217 @@
+[neo-theme-root] {
+  /* 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: 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-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-lighter: oklch(from var(--neo-black-soft) calc(l + 0.1) c h);
+  --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);
+  --neo-blue-50: oklch(from var(--neo-blue) l c h / 50%);
+  --neo-blue-80: oklch(from var(--neo-blue) l c h / 80%);
+  --neo-blue-soft: oklch(from var(--neo-blue) calc(l + 0.4) c h);
+  --neo-blue-soft-50: oklch(from var(--neo-blue-soft) l c h / 50%);
+  --neo-blue-soft-80: oklch(from var(--neo-blue-soft) l c h / 80%);
+  --neo-red-light: oklch(from var(--neo-red) calc(l + 0.25) c h);
+  --neo-red-light-5: oklch(from var(--neo-red-light) l c h / 5%);
+  --neo-red-light-10: oklch(from var(--neo-red-light) l c h / 10%);
+  --neo-red-light-50: oklch(from var(--neo-red-light) l c h / 50%);
+  --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-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);
+  --neo-green-light-50: oklch(from var(--neo-green-light) l c h / 50%);
+  --neo-green: oklch(52% 0.177 142.495deg);
+  --neo-green-50: oklch(from var(--neo-green) l c h / 50%);
+
+  /** primary colors */
+  --neo-color-primary: var(--neo-blue);
+  --neo-color-primary-50: var(--neo-blue-50);
+  --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-50: var(--neo-red-50);
+  --neo-color-error-75: var(--neo-red-75);
+  --neo-color-success: var(--neo-green);
+  --neo-color-success-50: var(--neo-green-50);
+
+  /** semantic colors */
+  --neo-text-color: var(--neo-grey-strong);
+  --neo-text-color-active: color-mix(in srgb, currentcolor, white 10%);
+  --neo-text-color-focused: 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-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-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%);
+  --neo-background-color-darker: color-mix(in srgb, var(--neo-background-color, transparent), black 5%);
+  --neo-shadow-color-light: var(--neo-white-soft-light);
+  --neo-shadow-color-dark: var(--neo-white-soft-dark);
+  --neo-skeleton-color: var(--neo-grey-soft);
+  --neo-skeleton-color-step: 0.1;
+  --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-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-skeleton-color: var(--neo-grey-soft-60);
+
+  /** dark primary colors */
+  --neo-dark-color-primary: var(--neo-blue-soft);
+  --neo-dark-color-primary-50: var(--neo-blue-soft-50);
+  --neo-dark-color-primary-80: var(--neo-blue-soft-80);
+  --neo-dark-color-error: var(--neo-red-light);
+  --neo-dark-color-error-5: var(--neo-red-light-5);
+  --neo-dark-color-error-10: var(--neo-red-light-10);
+  --neo-dark-color-error-50: var(--neo-red-light-50);
+  --neo-dark-color-error-75: var(--neo-red-light-75);
+  --neo-dark-color-success: var(--neo-green-light);
+  --neo-dark-color-success-50: var(--neo-green-light-50);
+
+  /** dark mode semantic colors */
+  --neo-dark-text-color: var(--neo-white-soft-dark);
+  --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-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-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-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%);
+  --neo-dark-background-color-darker: color-mix(in srgb, var(--neo-background-color, transparent), white 5%);
+  --neo-dark-shadow-color-light: var(--neo-black-light);
+  --neo-dark-shadow-color-dark: var(--neo-black-soft-dark);
+  --neo-dark-skeleton-color: var(--neo-grey-dark);
+  --neo-dark-skeleton-color-step: 0.05;
+  --neo-dark-close-color: var(--neo-dark-color-error);
+  --neo-dark-close-color-hover: var(--neo-dark-color-error-75);
+  --neo-dark-close-color-focused: var(--neo-dark-color-error-50);
+  --neo-dark-close-bg-color-hover: var(--neo-dark-color-error-10);
+  --neo-dark-close-bg-color-focused: var(--neo-dark-color-error-5);
+  --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-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);
+  }
+
+  /* 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;
+    }
+  }
+}

package/dist/styles/common/flex.scss

@@ -0,0 +1,26 @@
+@mixin center {
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin column($display: flex, $flex: 1 1 auto, $gap: var(--neo-gap, 1rem), $center: false) {
+  @if $center {
+    @include center;
+  }
+
+  display: $display;
+  flex: $flex;
+  flex-direction: column;
+  gap: $gap;
+}
+
+@mixin row($display: flex, $flex: 1 1 auto, $wrap: wrap, $gap: var(--neo-gap, 1rem), $center: false) {
+  @if $center {
+    @include center;
+  }
+
+  display: $display;
+  flex: $flex;
+  flex-flow: row $wrap;
+  gap: $gap;
+}

package/dist/styles/common/properties.css

@@ -0,0 +1,23 @@
+@property --neo-angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+
+@property --neo-progress {
+  syntax: '<percentage>';
+  inherits: true;
+  initial-value: 0%;
+}
+
+@property --neo-source-color {
+  syntax: '<color>';
+  initial-value: transparent;
+  inherits: false;
+}
+
+@property --neo-target-color {
+  syntax: '<color>';
+  initial-value: transparent;
+  inherits: false;
+}

package/dist/styles/common/shadows.scss

@@ -0,0 +1,305 @@
+[neo-theme-root] {
+  /* Blurs */
+  --neo-blur-0: blur(0);
+  --neo-blur-1: blur(1px);
+  --neo-blur-2: blur(2px);
+  --neo-blur-3: blur(3px);
+  --neo-blur-4: blur(4px);
+  --neo-blur-5: blur(8px);
+
+  /* Saturation */
+  --neo-saturate: saturate(1);
+  --neo-saturate-1: saturate(1.125);
+  --neo-saturate-2: saturate(1.25);
+  --neo-saturate-3: saturate(1.5);
+  --neo-saturate-4: saturate(1.75);
+  --neo-saturate-5: saturate(2);
+
+  @mixin shadows($direction: top-left) {
+    /* Base shadows flat */
+    $neo-shadow-flat:
+      0 0 0 0 var(--neo-shadow-color-dark),
+      0 0 0 0 var(--neo-shadow-color-light);
+    $neo-shadow-inset-flat:
+      inset 0 0 0 0 var(--neo-shadow-color-dark),
+      inset 0 0 0 0 var(--neo-shadow-color-light);
+
+    /* Base shadows raised top left */
+    $neo-shadow-raised-1: null;
+    $neo-shadow-raised-2: null;
+    $neo-shadow-raised-3: null;
+    $neo-shadow-raised-4: null;
+    $neo-shadow-raised-5: null;
+
+    /** Base shadows inset top left */
+    $neo-shadow-inset-1: null;
+    $neo-shadow-inset-2: null;
+    $neo-shadow-inset-3: null;
+    $neo-shadow-inset-4: null;
+    $neo-shadow-inset-5: null;
+
+    /** Glass shadows */
+    $neo-glass-shadow-raised-1: null;
+    $neo-glass-shadow-raised-2: null;
+    $neo-glass-shadow-raised-3: null;
+    $neo-glass-shadow-raised-4: null;
+    $neo-glass-shadow-raised-5: null;
+
+    /** glass border-color */
+    $neo-glass-top-border-color: null;
+    $neo-glass-right-border-color: null;
+    $neo-glass-bottom-border-color: null;
+    $neo-glass-left-border-color: null;
+
+    /* Box shadows top left */
+    @if $direction == top-left {
+      /* Base shadows raised top left */
+      $neo-shadow-raised-1:
+        0.08rem 0.08rem 0.2rem var(--neo-shadow-color-dark),
+        -0.08rem -0.08rem 0.1rem var(--neo-shadow-color-light);
+      $neo-shadow-raised-2:
+        0.1rem 0.1rem 0.3rem var(--neo-shadow-color-dark),
+        -0.1rem -0.1rem 0.2rem var(--neo-shadow-color-light);
+      $neo-shadow-raised-3:
+        0.3rem 0.3rem 0.3rem var(--neo-shadow-color-dark),
+        -0.2rem -0.2rem 0.2rem var(--neo-shadow-color-light);
+      $neo-shadow-raised-4:
+        0.5rem 0.5rem 0.6rem var(--neo-shadow-color-dark),
+        -0.35rem -0.35rem 0.4rem var(--neo-shadow-color-light);
+      $neo-shadow-raised-5:
+        0.7rem 0.7rem 0.7rem var(--neo-shadow-color-dark),
+        -0.55rem -0.55rem 0.7rem var(--neo-shadow-color-light);
+
+      /** Base shadows inset top left */
+      $neo-shadow-inset-1:
+        inset 0.08rem 0.08rem 0.2rem var(--neo-shadow-color-dark),
+        inset -0.08rem -0.08rem 0.1rem var(--neo-shadow-color-light);
+      $neo-shadow-inset-2:
+        inset 0.15rem 0.15rem 0.3rem var(--neo-shadow-color-dark),
+        inset -0.15rem -0.15rem 0.2rem var(--neo-shadow-color-light);
+      $neo-shadow-inset-3:
+        inset 0.3rem 0.3rem 0.4rem var(--neo-shadow-color-dark),
+        inset -0.2rem -0.2rem 0.3rem var(--neo-shadow-color-light);
+      $neo-shadow-inset-4:
+        inset 0.5rem 0.5rem 0.6rem var(--neo-shadow-color-dark),
+        inset -0.35rem -0.35rem 0.4rem var(--neo-shadow-color-light);
+      $neo-shadow-inset-5:
+        inset 0.8rem 0.8rem 0.7rem var(--neo-shadow-color-dark),
+        inset -0.6rem -0.6rem 0.8rem var(--neo-shadow-color-light);
+
+      /** Glass shadows */
+      $neo-glass-shadow-raised-1: 0.08rem 0.08rem 0.2rem var(--neo-glass-shadow-color);
+      $neo-glass-shadow-raised-2: 0.1rem 0.1rem 0.3rem var(--neo-glass-shadow-color);
+      $neo-glass-shadow-raised-3: 0.3rem 0.3rem 0.3rem var(--neo-glass-shadow-color);
+      $neo-glass-shadow-raised-4: 0.5rem 0.5rem 0.6rem var(--neo-glass-shadow-color);
+      $neo-glass-shadow-raised-5: 0.8rem 0.8rem 0.7rem var(--neo-glass-shadow-color);
+
+      /** glass border-color */
+      $neo-glass-top-border-color: var(--neo-glass-border-color);
+      $neo-glass-right-border-color: transparent;
+      $neo-glass-left-border-color: var(--neo-glass-border-color);
+      $neo-glass-bottom-border-color: transparent;
+    }
+
+    /* Box shadows top right */
+    @else if $direction == top-right {
+      /* Box shadows raised */
+      $neo-shadow-raised-1:
+        -0.08rem 0.08rem 0.2rem var(--neo-shadow-color-dark),
+        0.08rem -0.08rem 0.1rem var(--neo-shadow-color-light);
+      $neo-shadow-raised-2:
+        -0.1rem 0.1rem 0.3rem var(--neo-shadow-color-dark),
+        0.1rem -0.1rem 0.2rem var(--neo-shadow-color-light);
+      $neo-shadow-raised-3:
+        -0.3rem 0.3rem 0.3rem var(--neo-shadow-color-dark),
+        0.2rem -0.2rem 0.2rem var(--neo-shadow-color-light);
+      $neo-shadow-raised-4:
+        -0.5rem 0.5rem 0.6rem var(--neo-shadow-color-dark),
+        0.35rem -0.35rem 0.4rem var(--neo-shadow-color-light);
+      $neo-shadow-raised-5:
+        -0.7rem 0.7rem 0.7rem var(--neo-shadow-color-dark),
+        0.55rem -0.55rem 0.7rem var(--neo-shadow-color-light);
+
+      /* Box shadows inset */
+      $neo-shadow-inset-1:
+        inset -0.08rem 0.08rem 0.2rem var(--neo-shadow-color-dark),
+        inset 0.08rem -0.08rem 0.1rem var(--neo-shadow-color-light);
+      $neo-shadow-inset-2:
+        inset -0.15rem 0.15rem 0.3rem var(--neo-shadow-color-dark),
+        inset 0.15rem -0.15rem 0.2rem var(--neo-shadow-color-light);
+      $neo-shadow-inset-3:
+        inset -0.3rem 0.3rem 0.4rem var(--neo-shadow-color-dark),
+        inset 0.2rem -0.2rem 0.3rem var(--neo-shadow-color-light);
+      $neo-shadow-inset-4:
+        inset -0.5rem 0.5rem 0.6rem var(--neo-shadow-color-dark),
+        inset 0.35rem -0.35rem 0.4rem var(--neo-shadow-color-light);
+      $neo-shadow-inset-5:
+        inset -0.8rem 0.8rem 0.7rem var(--neo-shadow-color-dark),
+        inset 0.6rem -0.6rem 0.8rem var(--neo-shadow-color-light);
+
+      /** Glass shadows */
+      $neo-glass-shadow-raised-1: -0.08rem 0.08rem 0.2rem var(--neo-glass-shadow-color);
+      $neo-glass-shadow-raised-2: -0.1rem 0.1rem 0.3rem var(--neo-glass-shadow-color);
+      $neo-glass-shadow-raised-3: -0.3rem 0.3rem 0.3rem var(--neo-glass-shadow-color);
+      $neo-glass-shadow-raised-4: -0.5rem 0.5rem 0.6rem var(--neo-glass-shadow-color);
+      $neo-glass-shadow-raised-5: -0.8rem 0.8rem 0.7rem var(--neo-glass-shadow-color);
+
+      /** glass border-color */
+      $neo-glass-top-border-color: var(--neo-glass-border-color);
+      $neo-glass-right-border-color: var(--neo-glass-border-color);
+      $neo-glass-left-border-color: transparent;
+      $neo-glass-bottom-border-color: transparent;
+    }
+
+    /* Box shadows bottom right */
+    @else if $direction == bottom-right {
+      /* Box shadows raised */
+      $neo-shadow-raised-1:
+        -0.08rem -0.08rem 0.2rem var(--neo-shadow-color-dark),
+        0.08rem 0.08rem 0.1rem var(--neo-shadow-color-light);
+      $neo-shadow-raised-2:
+        -0.1rem -0.1rem 0.3rem var(--neo-shadow-color-dark),
+        0.1rem 0.1rem 0.2rem var(--neo-shadow-color-light);
+      $neo-shadow-raised-3:
+        -0.3rem -0.3rem 0.3rem var(--neo-shadow-color-dark),
+        0.2rem 0.2rem 0.2rem var(--neo-shadow-color-light);
+      $neo-shadow-raised-4:
+        -0.5rem -0.5rem 0.6rem var(--neo-shadow-color-dark),
+        0.35rem 0.35rem 0.4rem var(--neo-shadow-color-light);
+      $neo-shadow-raised-5:
+        -0.7rem -0.7rem 0.7rem var(--neo-shadow-color-dark),
+        0.55rem 0.55rem 0.7rem var(--neo-shadow-color-light);
+
+      /* Box shadows inset */
+      $neo-shadow-inset-1:
+        inset -0.08rem -0.08rem 0.2rem var(--neo-shadow-color-dark),
+        inset 0.08rem 0.08rem 0.1rem var(--neo-shadow-color-light);
+      $neo-shadow-inset-2:
+        inset -0.15rem -0.15rem 0.3rem var(--neo-shadow-color-dark),
+        inset 0.15rem 0.15rem 0.2rem var(--neo-shadow-color-light);
+      $neo-shadow-inset-3:
+        inset -0.3rem -0.3rem 0.4rem var(--neo-shadow-color-dark),
+        inset 0.2rem 0.2rem 0.3rem var(--neo-shadow-color-light);
+      $neo-shadow-inset-4:
+        inset -0.5rem -0.5rem 0.6rem var(--neo-shadow-color-dark),
+        inset 0.35rem 0.35rem 0.4rem var(--neo-shadow-color-light);
+      $neo-shadow-inset-5:
+        inset -0.8rem -0.8rem 0.7rem var(--neo-shadow-color-dark),
+        inset 0.6rem 0.6rem 0.8rem var(--neo-shadow-color-light);
+
+      /** Glass shadows */
+      $neo-glass-shadow-raised-1: -0.08rem -0.08rem 0.2rem var(--neo-glass-shadow-color);
+      $neo-glass-shadow-raised-2: -0.1rem -0.1rem 0.3rem var(--neo-glass-shadow-color);
+      $neo-glass-shadow-raised-3: -0.3rem -0.3rem 0.3rem var(--neo-glass-shadow-color);
+      $neo-glass-shadow-raised-4: -0.5rem -0.5rem 0.6rem var(--neo-glass-shadow-color);
+      $neo-glass-shadow-raised-5: -0.8rem -0.8rem 0.7rem var(--neo-glass-shadow-color);
+
+      /** glass border-color */
+      $neo-glass-top-border-color: transparent;
+      $neo-glass-right-border-color: var(--neo-glass-border-color);
+      $neo-glass-left-border-color: transparent;
+      $neo-glass-bottom-border-color: var(--neo-glass-border-color);
+    }
+
+    /* Box shadows bottom left */
+    @else if $direction == bottom-left {
+      /* Base shadows raised top left */
+      $neo-shadow-raised-1:
+        0.08rem -0.08rem 0.2rem var(--neo-shadow-color-dark),
+        -0.08rem 0.08rem 0.1rem var(--neo-shadow-color-light);
+      $neo-shadow-raised-2:
+        0.1rem -0.1rem 0.3rem var(--neo-shadow-color-dark),
+        -0.1rem 0.1rem 0.2rem var(--neo-shadow-color-light);
+      $neo-shadow-raised-3:
+        0.3rem -0.3rem 0.3rem var(--neo-shadow-color-dark),
+        -0.2rem 0.2rem 0.2rem var(--neo-shadow-color-light);
+      $neo-shadow-raised-4:
+        0.5rem -0.5rem 0.6rem var(--neo-shadow-color-dark),
+        -0.35rem 0.35rem 0.4rem var(--neo-shadow-color-light);
+      $neo-shadow-raised-5:
+        0.7rem -0.7rem 0.7rem var(--neo-shadow-color-dark),
+        -0.55rem 0.55rem 0.7rem var(--neo-shadow-color-light);
+
+      /** Base shadows inset top left */
+      $neo-shadow-inset-1:
+        inset 0.08rem -0.08rem 0.2rem var(--neo-shadow-color-dark),
+        inset -0.08rem 0.08rem 0.1rem var(--neo-shadow-color-light);
+      $neo-shadow-inset-2:
+        inset 0.15rem -0.15rem 0.3rem var(--neo-shadow-color-dark),
+        inset -0.15rem 0.15rem 0.2rem var(--neo-shadow-color-light);
+      $neo-shadow-inset-3:
+        inset 0.3rem -0.3rem 0.4rem var(--neo-shadow-color-dark),
+        inset -0.2rem 0.2rem 0.3rem var(--neo-shadow-color-light);
+      $neo-shadow-inset-4:
+        inset 0.5rem -0.5rem 0.6rem var(--neo-shadow-color-dark),
+        inset -0.35rem 0.35rem 0.4rem var(--neo-shadow-color-light);
+      $neo-shadow-inset-5:
+        inset 0.8rem -0.8rem 0.7rem var(--neo-shadow-color-dark),
+        inset -0.6rem 0.6rem 0.8rem var(--neo-shadow-color-light);
+
+      /** Glass shadows */
+      $neo-glass-shadow-raised-1: 0.08rem -0.08rem 0.2rem var(--neo-glass-shadow-color);
+      $neo-glass-shadow-raised-2: 0.1rem -0.1rem 0.3rem var(--neo-glass-shadow-color);
+      $neo-glass-shadow-raised-3: 0.3rem -0.3rem 0.3rem var(--neo-glass-shadow-color);
+      $neo-glass-shadow-raised-4: 0.5rem -0.5rem 0.6rem var(--neo-glass-shadow-color);
+      $neo-glass-shadow-raised-5: 0.8rem -0.8rem 0.7rem var(--neo-glass-shadow-color);
+
+      /** glass border-color */
+      $neo-glass-top-border-color: transparent;
+      $neo-glass-right-border-color: transparent;
+      $neo-glass-left-border-color: var(--neo-glass-border-color);
+      $neo-glass-bottom-border-color: var(--neo-glass-border-color);
+    }
+
+    /** Base shadows flat */
+    --neo-box-shadow-flat: none;
+
+    /* Box shadows raised top left */
+    --neo-box-shadow-raised-1: #{$neo-shadow-raised-1}, #{$neo-shadow-inset-flat};
+    --neo-box-shadow-raised-2: #{$neo-shadow-raised-2}, #{$neo-shadow-inset-flat};
+    --neo-box-shadow-raised-3: #{$neo-shadow-raised-3}, #{$neo-shadow-inset-flat};
+    --neo-box-shadow-raised-4: #{$neo-shadow-raised-4}, #{$neo-shadow-inset-flat};
+    --neo-box-shadow-raised-5: #{$neo-shadow-raised-5}, #{$neo-shadow-inset-flat};
+
+    /** Base shadows inset top left */
+    --neo-box-shadow-inset-1: #{$neo-shadow-flat}, #{$neo-shadow-inset-1};
+    --neo-box-shadow-inset-2: #{$neo-shadow-flat}, #{$neo-shadow-inset-2};
+    --neo-box-shadow-inset-3: #{$neo-shadow-flat}, #{$neo-shadow-inset-3};
+    --neo-box-shadow-inset-4: #{$neo-shadow-flat}, #{$neo-shadow-inset-4};
+    --neo-box-shadow-inset-5: #{$neo-shadow-flat}, #{$neo-shadow-inset-5};
+
+    /* Glass box shadows raised */
+    --neo-glass-box-shadow-raised-1: #{$neo-glass-shadow-raised-1};
+    --neo-glass-box-shadow-raised-2: #{$neo-glass-shadow-raised-2};
+    --neo-glass-box-shadow-raised-3: #{$neo-glass-shadow-raised-3};
+    --neo-glass-box-shadow-raised-4: #{$neo-glass-shadow-raised-4};
+    --neo-glass-box-shadow-raised-5: #{$neo-glass-shadow-raised-5};
+
+    /* Glass box shadows inset */
+    --neo-glass-box-shadow-inset-1: var(--neo-box-shadow-inset-1);
+    --neo-glass-box-shadow-inset-2: var(--neo-box-shadow-inset-2);
+    --neo-glass-box-shadow-inset-3: var(--neo-box-shadow-inset-3);
+    --neo-glass-box-shadow-inset-4: var(--neo-box-shadow-inset-4);
+    --neo-glass-box-shadow-inset-5: var(--neo-box-shadow-inset-5);
+
+    /** glass border-color */
+    --neo-glass-top-border-color: #{$neo-glass-top-border-color};
+    --neo-glass-right-border-color: #{$neo-glass-right-border-color};
+    --neo-glass-left-border-color: #{$neo-glass-left-border-color};
+    --neo-glass-bottom-border-color: #{$neo-glass-bottom-border-color};
+  }
+
+  @include shadows;
+
+  &[neo-source='bottom-right'] {
+    @include shadows(bottom-right);
+  }
+
+  &[neo-source='top-right'] {
+    @include shadows(top-right);
+  }
+
+  &[neo-source='bottom-left'] {
+    @include shadows(bottom-left);
+  }
+}

package/dist/styles/common/spacing.scss

@@ -0,0 +1,27 @@
+[neo-theme-root] {
+  /* Borders */
+  --neo-border-width: 1px;
+  --neo-border-radius: 0.5rem;
+  --neo-border-radius-md: 1rem;
+  --neo-border-radius-lg: 2rem;
+
+  /* Gap */
+  --neo-gap-xxs: 0.5rem;
+  --neo-gap-xs: 0.615rem;
+  --neo-gap-sm: 0.75rem;
+  --neo-gap: 1rem;
+  --neo-gap-md: 1.25rem;
+  --neo-gap-lg: 2rem;
+  --neo-gap-xl: 3rem;
+  --neo-gap-xxl: 5rem;
+
+  /* Line height */
+  --neo-line-height-xxs: 0.75rem;
+  --neo-line-height-xs: 1rem;
+  --neo-line-height-sm: 1.25rem;
+  --neo-line-height: 1.5rem;
+
+  /* Margin */
+  --neo-shadow-margin: 0.6rem;
+  --neo-shadow-margin-lg: 1.125rem;
+}

package/dist/styles/common/typography.scss

@@ -0,0 +1,13 @@
+[neo-theme-root] {
+  /* Default font stack */
+  --neo-font-family: 'Nunito Sans', ui-rounded, sans-serif;
+
+  /* font variables */
+  --neo-font-size-xxs: 0.625rem;
+  --neo-font-size-xs: 0.75rem;
+  --neo-font-size-sm: 0.875rem;
+  --neo-font-size: 1rem;
+  --neo-font-size-md: 1.125rem;
+  --neo-font-size-lg: 1.25rem;
+  --neo-font-size-xl: 1.5rem;
+}

package/dist/styles/common/utils.scss

@@ -0,0 +1,8 @@
+[neo-theme-root] {
+  /* Transforms */
+  --neo-transition-bezier: cubic-bezier(0.4, 0, 0.2, 1);
+  --neo-transition-skeleton: cubic-bezier(0.4, 0, 0.6, 1);
+
+  /* Opacity */
+  --neo-opacity-disabled: 0.8;
+}

package/dist/styles/common/z-index.scss

@@ -0,0 +1,12 @@
+[neo-theme-root] {
+  --neo-z-index-behind: -1;
+  --neo-z-index-default: 0;
+  --neo-z-index-in-front: 1;
+  --neo-z-index-layer-1: 10;
+  --neo-z-index-layer-2: 100;
+  --neo-z-index-layer-3: 200;
+  --neo-z-index-layer-4: 300;
+  --neo-z-index-layer-5: 400;
+  --neo-z-index-layer-ui: 1000;
+  --neo-z-index-layer-max: 2147483647;
+}