@quaffui/quaff 0.1.0-prealpha16 → 0.1.0-prealpha19

package/dist/css/shared/q-field.scss

@@ -1,15 +1,12 @@
 @use "sass:math";
-@import "../mixins/field-mixins.scss";
-
-$transition-duration: 0.2s;
+@use "../mixins";
 
 .q-field {
-  display: flex;
-  --wrapper-height: 3rem;
+  $transition-duration: 0.2s;
+  $wrapper-height: 3rem;
+  $wrapper-height-dense: 2.5rem;
 
-  &--dense {
-    --wrapper-height: 2.5rem;
-  }
+  display: flex;
 
   &__inner {
     display: flex;
@@ -21,7 +18,11 @@ $transition-duration: 0.2s;
     --decorator-color: var(--outline);
     display: flex;
     position: relative;
-    height: var(--wrapper-height);
+    height: $wrapper-height;
+  }
+
+  &--dense &__wrapper {
+    height: $wrapper-height-dense;
   }
 
   &--rounded#{&}--active &__wrapper {
@@ -70,7 +71,11 @@ $transition-duration: 0.2s;
   }
 
   &--rounded &__wrapper {
-    border-radius: calc(var(--wrapper-height) / 2);
+    border-radius: math.div($wrapper-height, 2);
+  }
+
+  &--rounded#{&}--dense &__wrapper {
+    border-radius: math.div($wrapper-height-dense, 2);
   }
 
   &--outlined &__wrapper {
@@ -96,11 +101,19 @@ $transition-duration: 0.2s;
   }
 
   &--label#{&}--active#{&}--rounded &__wrapper {
-    @include border-substitute("rounded");
+    @include mixins.border-substitute("rounded", $wrapper-height);
+  }
+
+  &--label#{&}--active#{&}--rounded#{&}--dense &__wrapper {
+    @include mixins.border-substitute("rounded", $wrapper-height-dense, true);
   }
 
   &--label#{&}--active#{&}--outlined &__wrapper {
-    @include border-substitute("outlined");
+    @include mixins.border-substitute("outlined", $wrapper-height);
+  }
+
+  &--label#{&}--active#{&}--outlined#{&}--dense &__wrapper {
+    @include mixins.border-substitute("outlined", $wrapper-height-dense, true);
   }
 
   // in case we have no label
@@ -114,7 +127,7 @@ $transition-duration: 0.2s;
     top: 0px;
     right: 0px;
     font-size: 1rem;
-    line-height: calc(var(--wrapper-height) - 0.25rem);
+    line-height: $wrapper-height - 0.25rem;
     color: var(--decorator-color);
     pointer-events: none;
     transition:
@@ -127,6 +140,10 @@ $transition-duration: 0.2s;
     will-change: top, left, font-size, line-height;
   }
 
+  &--label#{&}--dense &__label {
+    line-height: $wrapper-height-dense - 0.25rem;
+  }
+
   &--default &__label,
   &--filled &__label {
     left: 1rem;
@@ -137,9 +154,9 @@ $transition-duration: 0.2s;
     top: 0.0625rem;
   }
 
-  &--slot-prepend#{&}--default &__label,
-  &--slot-prepend#{&}--filled &__label {
-    left: calc(0.5rem + var(--slot-prepend-width));
+  &--snippet-prepend#{&}--default &__label,
+  &--snippet-prepend#{&}--filled &__label {
+    left: calc(0.5rem + var(--snippet-prepend-width));
   }
 
   &--active#{&}--default &__label,
@@ -151,8 +168,8 @@ $transition-duration: 0.2s;
     left: 1.4375rem;
   }
 
-  &--slot-prepend#{&}--rounded &__label {
-    left: calc(0.5rem + var(--slot-prepend-width));
+  &--snippet-prepend#{&}--rounded &__label {
+    left: calc(0.5rem + var(--snippet-prepend-width));
   }
 
   &--active#{&}--rounded &__label {
@@ -170,11 +187,11 @@ $transition-duration: 0.2s;
     left: 0.75rem;
   }
 
-  &--slot-prepend#{&}--outlined &__label {
-    left: calc(0.5rem + var(--slot-prepend-width));
+  &--snippet-prepend#{&}--outlined &__label {
+    left: calc(0.5rem + var(--snippet-prepend-width));
   }
 
-  // active state should not account for prepend slot width
+  // active state should not account for prepend snippet width
   &--active#{&}--outlined &__label {
     left: 0.75rem;
   }
@@ -195,19 +212,31 @@ $transition-duration: 0.2s;
   }
 
   &--active#{&}--rounded &__label {
-    right: calc(var(--wrapper-height) / 2 - 0.125rem);
+    right: math.div($wrapper-height, 2) - 0.125rem;
+  }
+
+  &--active#{&}--rounded#{&}--dense &__label {
+    right: math.div($wrapper-height-dense, 2) - 0.125rem;
   }
 
   &--active#{&}--outlined &__label {
     right: 1.375rem;
   }
 
+  &--active#{&}--outlined#{&}--dense &__label {
+    right: 1.125rem;
+  }
+
   &--active &__label {
     font-size: 0.75rem;
     line-height: 0px;
     margin-top: -0.0625rem;
   }
 
+  &--active#{&}--dense &__label {
+    line-height: 0px;
+  }
+
   &--active#{&}--default &__label,
   &--active#{&}--filled &__label {
     margin-top: 0px;
@@ -222,11 +251,12 @@ $transition-duration: 0.2s;
   }
 
   &__input {
-    @include reset-form-element;
+    @include mixins.reset-form-element;
     font-size: 1rem;
     height: 100%;
     color: unset;
     flex-grow: 1;
+    min-width: 0;
   }
 
   &--default &__input,
@@ -248,11 +278,11 @@ $transition-duration: 0.2s;
     padding: 0 0.75rem;
   }
 
-  &--slot-prepend &__input {
+  &--snippet-prepend &__input {
     padding-left: 0.5rem !important;
   }
 
-  &--slot-append &__input {
+  &--snippet-append &__input {
     padding-right: 0.5rem !important;
   }
 
@@ -274,7 +304,7 @@ $transition-duration: 0.2s;
     --decorator-color: var(--error);
   }
 
-  &__slot- {
+  &__snippet- {
     &prepend,
     &append,
     &before,
@@ -284,27 +314,27 @@ $transition-duration: 0.2s;
     }
   }
 
-  &__slot-prepend {
+  &__snippet-prepend {
     padding-left: 0.75rem;
   }
 
-  &--rounded &__slot-prepend {
+  &--rounded &__snippet-prepend {
     padding-left: 1rem;
   }
 
-  &__slot-append {
+  &__snippet-append {
     padding-right: 0.75rem;
   }
 
-  &--rounded &__slot-append {
+  &--rounded &__snippet-append {
     padding-right: 1rem;
   }
 
-  &__slot-before {
+  &__snippet-before {
     padding-right: 0.75rem;
   }
 
-  &__slot-after {
+  &__snippet-after {
     padding-left: 0.75rem;
   }
 

package/dist/css/theme/_colors.scss

@@ -0,0 +1,173 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+
+:root {
+  --primary-light: #2d54cc;
+  --on-primary-light: #ffffff;
+  --primary-container-light: #dce1ff;
+  --on-primary-container-light: #001551;
+  --secondary-light: #595d72;
+  --on-secondary-light: #ffffff;
+  --secondary-container-light: #dee1f9;
+  --on-secondary-container-light: #161b2c;
+  --tertiary-light: #75546f;
+  --on-tertiary-light: #ffffff;
+  --tertiary-container-light: #ffd7f5;
+  --on-tertiary-container-light: #2c1229;
+  --neutral-light: #5e5e62;
+  --on-neutral-light: #ffffff;
+  --neutral-container-light: #e4e1e6;
+  --on-neutral-container-light: #1b1b1f;
+  --neutral-variant-light: #5d5e67;
+  --on-neutral-variant-light: #ffffff;
+  --neutral-variant-container-light: #e2e1ec;
+  --on-neutral-variant-container-light: #1a1b23;
+  --error-light: #ba1a1a;
+  --on-error-light: #ffffff;
+  --error-container-light: #ffdad6;
+  --on-error-container-light: #410002;
+  --surface-light: #fbf8fd;
+  --surface-dim-light: #dbd9de;
+  --surface-bright-light: #fbf8fd;
+  --on-surface-light: #1b1b1f;
+  --on-surface-variant-light: #45464f;
+  --surface-container-lowest-light: #ffffff;
+  --surface-container-low-light: #f5f3f7;
+  --surface-container-light: #efedf1;
+  --surface-container-high-light: #eae7ec;
+  --surface-container-highest-light: #e4e1e6;
+  --inverse-surface-light: #303034;
+  --inverse-on-surface-light: #f2f0f4;
+  --inverse-primary-light: #b7c4ff;
+  --outline-light: #767680;
+  --outline-variant-light: #c6c5d0;
+  --scrim-light: #000000;
+  --shadow-light: #000000;
+  --primary-dark: #b7c4ff;
+  --on-primary-dark: #002681;
+  --primary-container-dark: #0039b4;
+  --on-primary-container-dark: #dce1ff;
+  --secondary-dark: #c2c5dd;
+  --on-secondary-dark: #2b3042;
+  --secondary-container-dark: #424659;
+  --on-secondary-container-dark: #dee1f9;
+  --tertiary-dark: #e3bada;
+  --on-tertiary-dark: #43273f;
+  --tertiary-container-dark: #5c3d57;
+  --on-tertiary-container-dark: #ffd7f5;
+  --neutral-dark: #c8c6ca;
+  --on-neutral-dark: #303034;
+  --neutral-container-dark: #47464a;
+  --on-neutral-container-dark: #e4e1e6;
+  --neutral-variant-dark: #c6c5d0;
+  --on-neutral-variant-dark: #2f3038;
+  --neutral-variant-container-dark: #45464f;
+  --on-neutral-variant-container-dark: #e2e1ec;
+  --error-dark: #ffb4ab;
+  --on-error-dark: #690005;
+  --error-container-dark: #93000a;
+  --on-error-container-dark: #ffdad6;
+  --surface-dark: #131316;
+  --surface-dim-dark: #131316;
+  --surface-bright-dark: #39393c;
+  --on-surface-dark: #e4e1e6;
+  --on-surface-variant-dark: #e2e1ec;
+  --surface-container-lowest-dark: #0e0e11;
+  --surface-container-low-dark: #1b1b1f;
+  --surface-container-dark: #1f1f23;
+  --surface-container-high-dark: #2a2a2d;
+  --surface-container-highest-dark: #39393c;
+  --inverse-surface-dark: #e4e1e6;
+  --inverse-on-surface-dark: #303034;
+  --inverse-primary-dark: #2d54cc;
+  --outline-dark: #90909a;
+  --outline-variant-dark: #45464f;
+  --scrim-dark: #000000;
+  --shadow-dark: #000000;
+}
+
+.body--light {
+  --primary: var(--primary-light);
+  --on-primary: var(--on-primary-light);
+  --primary-container: var(--primary-container-light);
+  --on-primary-container: var(--on-primary-container-light);
+  --secondary: var(--secondary-light);
+  --on-secondary: var(--on-secondary-light);
+  --secondary-container: var(--secondary-container-light);
+  --on-secondary-container: var(--on-secondary-container-light);
+  --tertiary: var(--tertiary-light);
+  --on-tertiary: var(--on-tertiary-light);
+  --tertiary-container: var(--tertiary-container-light);
+  --on-tertiary-container: var(--on-tertiary-container-light);
+  --neutral: var(--neutral-light);
+  --on-neutral: var(--on-neutral-light);
+  --neutral-container: var(--neutral-container-light);
+  --on-neutral-container: var(--on-neutral-container-light);
+  --neutral-variant: var(--neutral-variant-light);
+  --on-neutral-variant: var(--on-neutral-variant-light);
+  --neutral-variant-container: var(--neutral-variant-container-light);
+  --on-neutral-variant-container: var(--on-neutral-variant-container-light);
+  --error: var(--error-light);
+  --on-error: var(--on-error-light);
+  --error-container: var(--error-container-light);
+  --on-error-container: var(--on-error-container-light);
+  --surface: var(--surface-light);
+  --surface-dim: var(--surface-dim-light);
+  --surface-bright: var(--surface-bright-light);
+  --on-surface: var(--on-surface-light);
+  --on-surface-variant: var(--on-surface-variant-light);
+  --surface-container-lowest: var(--surface-container-lowest-light);
+  --surface-container-low: var(--surface-container-low-light);
+  --surface-container: var(--surface-container-light);
+  --surface-container-high: var(--surface-container-high-light);
+  --surface-container-highest: var(--surface-container-highest-light);
+  --inverse-surface: var(--inverse-surface-light);
+  --inverse-on-surface: var(--inverse-on-surface-light);
+  --inverse-primary: var(--inverse-primary-light);
+  --outline: var(--outline-light);
+  --outline-variant: var(--outline-variant-light);
+  --scrim: var(--scrim-light);
+  --shadow: var(--shadow-light);
+}
+.body--dark {
+  --primary: var(--primary-dark);
+  --on-primary: var(--on-primary-dark);
+  --primary-container: var(--primary-container-dark);
+  --on-primary-container: var(--on-primary-container-dark);
+  --secondary: var(--secondary-dark);
+  --on-secondary: var(--on-secondary-dark);
+  --secondary-container: var(--secondary-container-dark);
+  --on-secondary-container: var(--on-secondary-container-dark);
+  --tertiary: var(--tertiary-dark);
+  --on-tertiary: var(--on-tertiary-dark);
+  --tertiary-container: var(--tertiary-container-dark);
+  --on-tertiary-container: var(--on-tertiary-container-dark);
+  --neutral: var(--neutral-dark);
+  --on-neutral: var(--on-neutral-dark);
+  --neutral-container: var(--neutral-container-dark);
+  --on-neutral-container: var(--on-neutral-container-dark);
+  --neutral-variant: var(--neutral-variant-dark);
+  --on-neutral-variant: var(--on-neutral-variant-dark);
+  --neutral-variant-container: var(--neutral-variant-container-dark);
+  --on-neutral-variant-container: var(--on-neutral-variant-container-dark);
+  --error: var(--error-dark);
+  --on-error: var(--on-error-dark);
+  --error-container: var(--error-container-dark);
+  --on-error-container: var(--on-error-container-dark);
+  --surface: var(--surface-dark);
+  --surface-dim: var(--surface-dim-dark);
+  --surface-bright: var(--surface-bright-dark);
+  --on-surface: var(--on-surface-dark);
+  --on-surface-variant: var(--on-surface-variant-dark);
+  --surface-container-lowest: var(--surface-container-lowest-dark);
+  --surface-container-low: var(--surface-container-low-dark);
+  --surface-container: var(--surface-container-dark);
+  --surface-container-high: var(--surface-container-high-dark);
+  --surface-container-highest: var(--surface-container-highest-dark);
+  --inverse-surface: var(--inverse-surface-dark);
+  --inverse-on-surface: var(--inverse-on-surface-dark);
+  --inverse-primary: var(--inverse-primary-dark);
+  --outline: var(--outline-dark);
+  --outline-variant: var(--outline-variant-dark);
+  --scrim: var(--scrim-dark);
+  --shadow: var(--shadow-dark);
+}

package/dist/css/theme/css-variables.scss

@@ -0,0 +1,5 @@
+:root {
+  --size: 16px;
+  --font: Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
+  --font-icon: "Material Symbols Outlined";
+}

package/dist/css/theme/page.scss

@@ -1,4 +1,4 @@
-@import "../variables-sass.scss";
+@use "../variables";
 
 .q-page {
   max-width: 75rem;
@@ -6,11 +6,11 @@
   padding: 4rem 1.5rem;
   line-height: 1.5;
 
-  @media only screen and (max-width: #{map-get($breakpoints, md) - 1px}) {
+  @media only screen and (max-width: #{map-get(variables.$breakpoints, md) - 1px}) {
     padding: 3rem 1.25rem;
   }
 
-  @media only screen and (min-width: #{map-get($breakpoints, md)}) and (max-width: #{map-get($breakpoints, lg) - 1px}) {
+  @media only screen and (min-width: #{map-get(variables.$breakpoints, md)}) and (max-width: #{map-get(variables.$breakpoints, lg) - 1px}) {
     padding: 3.5rem 1.5rem;
   }
 }

package/dist/css/theme/reset.scss

@@ -9,10 +9,26 @@
   box-sizing: border-box;
 }
 
+html,
+body {
+  height: 100%;
+  width: 100%;
+  color: var(--on-surface);
+}
+
+.body--light {
+  background-color: rgb(253, 251, 255);
+}
+
+.body--dark {
+  background-color: rgb(20, 19, 20);
+}
+
 body {
-  color: var(--on-background);
   background-color: var(--body);
   overflow-x: hidden;
+  height: 100%;
+  width: 100%;
 }
 
 label {

package/dist/css/theme/theme.scss

@@ -1,11 +1,10 @@
+@import "$css/theme/colors";
 @import "$css/theme/tokens.scss";
 @import "$css/theme/colors.module.scss";
 @import "$css/theme/palette.scss";
 @import "$css/theme/reset.scss";
-@import "$css/theme/bridge.scss";
+@import "$css/theme/css-variables.scss";
 @import "$css/theme/typography.module.scss";
 @import "$css/theme/typography.scss";
 @import "$css/theme/elevate.scss";
-@import "$css/theme/theme.light.scss";
-@import "$css/theme/theme.dark.scss";
 @import "$css/theme/page.scss";

package/dist/css/theme/tokens.scss

@@ -1,163 +1,4 @@
 :root {
-  --md-source: 255, 183, 123;
-  /* primary */
-  --palette-primary0: 0, 0, 0;
-  --palette-primary10: 46, 21, 0;
-  --palette-primary20: 77, 39, 0;
-  --palette-primary25: 93, 48, 0;
-  --palette-primary30: 109, 57, 0;
-  --palette-primary35: 126, 67, 0;
-  --palette-primary40: 144, 77, 0;
-  --palette-primary50: 176, 100, 20;
-  --palette-primary60: 207, 125, 45;
-  --palette-primary70: 239, 150, 69;
-  --palette-primary80: 255, 183, 124;
-  --palette-primary90: 255, 220, 194;
-  --palette-primary95: 255, 237, 226;
-  --palette-primary98: 255, 248, 245;
-  --palette-primary99: 255, 251, 255;
-  --palette-primary100: 255, 255, 255;
-  /* secondary */
-  --palette-secondary0: 0, 0, 0;
-  --palette-secondary10: 42, 23, 7;
-  --palette-secondary20: 65, 44, 25;
-  --palette-secondary25: 78, 55, 35;
-  --palette-secondary30: 90, 66, 46;
-  --palette-secondary35: 103, 77, 57;
-  --palette-secondary40: 116, 89, 68;
-  --palette-secondary50: 142, 113, 91;
-  --palette-secondary60: 170, 139, 115;
-  --palette-secondary70: 198, 165, 140;
-  --palette-secondary80: 227, 192, 166;
-  --palette-secondary90: 255, 220, 194;
-  --palette-secondary95: 255, 237, 226;
-  --palette-secondary98: 255, 248, 245;
-  --palette-secondary99: 255, 251, 255;
-  --palette-secondary100: 255, 255, 255;
-  /* tertiary */
-  --palette-tertiary0: 0, 0, 0;
-  --palette-tertiary10: 25, 30, 0;
-  --palette-tertiary20: 46, 51, 13;
-  --palette-tertiary25: 57, 62, 23;
-  --palette-tertiary30: 68, 74, 34;
-  --palette-tertiary35: 80, 86, 44;
-  --palette-tertiary40: 92, 98, 55;
-  --palette-tertiary50: 116, 123, 77;
-  --palette-tertiary60: 142, 149, 101;
-  --palette-tertiary70: 169, 175, 125;
-  --palette-tertiary80: 196, 203, 151;
-  --palette-tertiary90: 224, 231, 177;
-  --palette-tertiary95: 239, 245, 190;
-  --palette-tertiary98: 247, 254, 198;
-  --palette-tertiary99: 252, 255, 220;
-  --palette-tertiary100: 255, 255, 255;
-  /* neutral */
-  --palette-neutral0: 0, 0, 0;
-  --palette-neutral10: 32, 27, 23;
-  --palette-neutral20: 53, 47, 43;
-  --palette-neutral25: 65, 58, 54;
-  --palette-neutral30: 76, 69, 65;
-  --palette-neutral35: 88, 81, 76;
-  --palette-neutral40: 101, 93, 88;
-  --palette-neutral50: 126, 117, 112;
-  --palette-neutral60: 152, 143, 137;
-  --palette-neutral70: 179, 169, 163;
-  --palette-neutral80: 207, 196, 190;
-  --palette-neutral90: 236, 224, 218;
-  --palette-neutral95: 250, 238, 232;
-  --palette-neutral98: 255, 248, 245;
-  --palette-neutral99: 255, 251, 255;
-  --palette-neutral100: 255, 255, 255;
-  /* neutral-variant */
-  --palette-neutral-variant0: 0, 0, 0;
-  --palette-neutral-variant10: 36, 26, 18;
-  --palette-neutral-variant20: 58, 46, 37;
-  --palette-neutral-variant25: 69, 57, 48;
-  --palette-neutral-variant30: 81, 68, 59;
-  --palette-neutral-variant35: 93, 80, 70;
-  --palette-neutral-variant40: 106, 92, 81;
-  --palette-neutral-variant50: 132, 116, 105;
-  --palette-neutral-variant60: 158, 142, 130;
-  --palette-neutral-variant70: 186, 168, 156;
-  --palette-neutral-variant80: 214, 195, 182;
-  --palette-neutral-variant90: 243, 223, 210;
-  --palette-neutral-variant95: 255, 237, 226;
-  --palette-neutral-variant98: 255, 248, 245;
-  --palette-neutral-variant99: 255, 251, 255;
-  --palette-neutral-variant100: 255, 255, 255;
-  /* error */
-  --palette-error0: 0, 0, 0;
-  --palette-error10: 65, 0, 2;
-  --palette-error20: 105, 0, 5;
-  --palette-error25: 126, 0, 7;
-  --palette-error30: 147, 0, 10;
-  --palette-error35: 168, 7, 16;
-  --palette-error40: 186, 26, 26;
-  --palette-error50: 222, 55, 48;
-  --palette-error60: 255, 84, 73;
-  --palette-error70: 255, 137, 125;
-  --palette-error80: 255, 180, 171;
-  --palette-error90: 255, 218, 214;
-  --palette-error95: 255, 237, 234;
-  --palette-error98: 255, 248, 247;
-  --palette-error99: 255, 251, 255;
-  --palette-error100: 255, 255, 255;
-  /* light */
-  --primary-light: 0, 98, 159;
-  --on-primary-light: 255, 255, 255;
-  --primary-container-light: 206, 229, 255;
-  --on-primary-container-light: 18, 28, 39;
-  --secondary-light: 82, 96, 112;
-  --on-secondary-light: 255, 255, 255;
-  --secondary-container-light: 214, 228, 247;
-  --on-secondary-container-light: 15, 29, 42;
-  --tertiary-light: 105, 88, 121;
-  --on-tertiary-light: 255, 255, 255;
-  --tertiary-container-light: 241, 219, 255;
-  --on-tertiary-container-light: 36, 21, 51;
-  --error-light: 186, 27, 27;
-  --error-container-light: 255, 218, 212;
-  --on-error-light: 255, 255, 255;
-  --on-error-container-light: 65, 0, 1;
-  --background-light: 253, 252, 255;
-  --on-background-light: 26, 28, 30;
-  --surface-light: 253, 252, 255;
-  --on-surface-light: 26, 28, 30;
-  --surface-variant-light: 223, 227, 236;
-  --on-surface-variant-light: 66, 71, 78;
-  --outline-light: 114, 119, 127;
-  --inverse-on-surface-light: 240, 240, 243;
-  --inverse-surface-light: 47, 48, 51;
-  --inverse-primary-light: 151, 203, 255;
-  --shadow-light: 0, 0, 0;
-  /* dark */
-  --primary-dark: 151, 203, 255;
-  --on-primary-dark: 0, 51, 85;
-  --primary-container-dark: 0, 74, 122;
-  --on-primary-container-dark: 206, 229, 255;
-  --secondary-dark: 186, 200, 218;
-  --on-secondary-dark: 36, 50, 64;
-  --secondary-container-dark: 59, 72, 87;
-  --on-secondary-container-dark: 214, 228, 247;
-  --tertiary-dark: 212, 190, 230;
-  --on-tertiary-dark: 57, 42, 72;
-  --tertiary-container-dark: 81, 64, 97;
-  --on-tertiary-container-dark: 241, 219, 255;
-  --error-dark: 255, 180, 169;
-  --error-container-dark: 147, 0, 6;
-  --on-error-dark: 104, 0, 3;
-  --on-error-container-dark: 255, 218, 212;
-  --background-dark: 26, 28, 30;
-  --on-background-dark: 226, 226, 230;
-  --surface-dark: 26, 28, 30;
-  --on-surface-dark: 226, 226, 230;
-  --surface-variant-dark: 66, 71, 78;
-  --on-surface-variant-dark: 195, 199, 207;
-  --outline-dark: 140, 145, 153;
-  --inverse-on-surface-dark: 26, 28, 30;
-  --inverse-surface-dark: 226, 226, 230;
-  --inverse-primary-dark: 0, 98, 159;
-  --shadow-dark: 0, 0, 0;
   /* display - large */
   --typescale-display-large-font-family-name: Roboto, sans-serif;
   --typescale-display-large-font-family-style: Regular;

package/dist/helpers/clickOutside.js

@@ -14,8 +14,9 @@ export function clickOutside(node, onEventFunction) {
 }
 export function clickOutsideDialog(node, onEventFunction) {
     const handleClick = (event) => {
-        if (!node.open)
+        if (!node.open) {
             return;
+        }
         const rect = node.getBoundingClientRect();
         const isInDialog = rect.top <= event.clientY &&
             event.clientY <= rect.top + rect.height &&

package/dist/helpers/ripple.d.ts

@@ -2,7 +2,7 @@ interface RippleOptions {
     center?: boolean;
     color?: string;
     duration?: number;
-    disable?: boolean;
+    disabled?: boolean;
 }
 export declare function ripple(el: HTMLElement, options?: RippleOptions): {
     destroy(): void;