@weavy/uikit-react 13.0.0 → 14.0.0

package/src/scss/theme/_tab.scss

@@ -0,0 +1,72 @@
+@use "base/colors";
+@use "base/vars";
+
+.wy-tabs {
+    display: flex;
+    justify-content: space-evenly;
+    padding:.25rem;
+}
+
+.wy-tab {
+    --wy-component-color: #{colors.$primary};
+    --wy-component-background-color: transparent; // #{colors.$surface-2};
+  
+    color: var(--wy-component-color);
+    background: var(--wy-component-background-color);
+
+    border: none;
+    border-radius: vars.$border-radius-lg;
+
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: .25rem;
+    position: relative;
+
+    text-align: center;
+    text-decoration: none;
+  
+    cursor: pointer;
+    user-select: none;
+
+    .wy-tab-icon {
+        // State layer
+        position: relative;
+        padding: .25rem 1rem;
+        border-radius: var(--wy-btn-border-radius);
+        display: inline-flex;
+
+        &::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border-radius: inherit;
+            background: var(--wy-component-color);
+            opacity: 0%;
+        }
+    }
+
+    &:hover {
+        .wy-tab-icon::before {
+            opacity: 8%;
+        }
+    }
+
+    &:focus, &:active, &.wy-active {
+        .wy-tab-icon::before {
+            opacity: 12%;
+        }
+    }
+
+    .wy-tab-label {
+        font-family: var(--wy-btn-font-family);
+        line-height: var(--wy-btn-line-height);
+    
+        font-size: vars.$font-size-xs;
+        font-weight: vars.$font-weight-base;
+    }
+}

package/src/scss/theme/_tables.scss

@@ -1,47 +1,83 @@
-@use "config" as *;
-@use "bs/tables";
+@use "base/vars";
+@use "base/colors";
+@use "base/text";
 
-
-// table with avatar/icon in first and last column
-%table-icons {
+.wy-table {
+  --wy-component-color: #{colors.$on-background};
+  --wy-component-background-color: #{colors.$background};
+  color: var(--wy-component-color);
+  background-color: var(--wy-component-background-color);
   table-layout: fixed;
+  width: 100%;
+  //margin-bottom: 1rem;
+  vertical-align: top;
+  border-collapse: collapse;
 
   th, td {
-    // cell with img or icon
-    &:first-child, &:last-child {
-      color: $icon-color !important;
-      vertical-align: middle;
-      text-align: center;
-      padding: $table-cell-padding-y-sm $table-cell-padding-x;
-      width: 2rem + $table-cell-padding-x;
-      // reset th styles (for dropdown menus in th)
-      font-size: $font-size-base;
-      font-weight: $font-weight-base;
-      text-transform: none;
-      letter-spacing: normal;
-    }
+    padding: vars.$table-cell-padding-y vars.$table-cell-padding-x;
+    box-shadow: #{colors.$outline-variant} 0px -1px 0px 0px inset;
+    line-height: 1;
+    vertical-align: middle;
+    height: 2.5rem;
 
     &:first-child {
-      padding-right: 0;
+      padding-left: calc(#{vars.$table-cell-padding-x} * 2);
     }
 
     &:last-child {
-      padding-left: 0;
+      padding-right: calc(#{vars.$table-cell-padding-x} * 2);
     }
   }
+
+  > tbody {
+    vertical-align: inherit;
+  }
+
+  > thead {
+    vertical-align: bottom;
+  }
+
+  .wy-table-cell-icon {
+    color: var(--wy-component-color);
+    vertical-align: middle;
+    text-align: center;
+    padding: calc(#{vars.$table-cell-padding-y} * .5) vars.$table-cell-padding-x;
+    width: calc(2.5rem + #{vars.$table-cell-padding-x} * 2);
+    // reset th styles (for dropdown menus in th)
+    font-size: vars.$font-size-base;
+    font-weight: vars.$font-weight-base;
+    text-transform: none;
+    letter-spacing: normal;
+  }
+
+  .wy-table-cell-text {
+    @include text.truncate;
+    width: 100%;
+  }
 }
 
+.wy-table-hover {
+  > tbody > tr:not(.wy-pager):hover > * {
+    --wy-component-color: #{colors.$on-surface};
+    --wy-component-background-color: #{colors.$surface-2};
+    color: var(--color);
+    background-color: var(--wy-component-background-color);
+    cursor: pointer;
+  }
+}
 
 .wy-table-trashed {
   th, td {
-    color: $text-muted;
     text-decoration: line-through;
+
     &:not(:last-child) {
-      opacity: $btn-disabled-opacity;
+      > * {
+        opacity: vars.$opacity-disabled;
+      }
     }
 
     > a {
-      color: $text-muted;
+      color: var(--wy-component-color);
     }
   }
 
@@ -51,3 +87,14 @@
     }
   }
 }
+
+.wy-table-no-result {
+  text-align: center;
+  padding: 1rem;
+}
+
+
+.wy-table-sort-link {
+  display: inline-flex;
+  align-items: center;
+}

package/src/scss/theme/_toasts.scss

@@ -1,47 +1,77 @@
 @use "sass:map";
-@use "variables" as *;
+@use "base/vars";
+@use "base/colors";
+
+$toast-max-width: 16rem !default;
+$toast-padding-x: .75rem !default;
+$toast-padding-y: .5rem !default;
 
 .wy-toasts {
   position: fixed;
   left: 0;
-  bottom: 0;
+  bottom: 3.5rem;
   right: 0;
   pointer-events: none;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  z-index: $zindex-fixed;
+  z-index: vars.$zindex-fixed;
+  gap: 1rem;
 }
 
 .wy-toast {
+  background: colors.$on-surface;
+  color: colors.$surface-2;
   margin: 0 0 1rem;
-}
-
-.wy-toast-body {
+  width: $toast-max-width;
+  max-width: calc(100% - 3rem);
+  gap: .5rem;
+  display: flex;
+  cursor: pointer;
+  border-radius: vars.$border-radius;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: .5rem;
   padding: $toast-padding-y $toast-padding-x;
-}
-
-.wy-button-toast {
-  font-weight: $font-weight-normal;
-  text-decoration: $link-decoration;
+  user-select: none;
+  box-shadow: vars.$shadow-level2;
+  position: relative;
+  overflow: hidden;
+  height: auto;
 
-  &:hover {
-    color: $btn-link-hover-color;
-    text-decoration: $link-hover-decoration;
-  }
-
-  &:focus {
-    text-decoration: $link-hover-decoration;
-    box-shadow: none;
+  &.wy-fade {
+    transition: all vars.$transition;
+    
+    &:not(.wy-show) {
+      opacity: 0;
+      height: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+      margin-top: 0;
+      margin-bottom: 0;
+    }
   }
+}
 
-  &:disabled,
-  &.wy-disabled {
-    color: $btn-link-disabled-color;
-  }
+.wy-toast-action {
+  position: sticky;
+  top: 4.5rem;
+  bottom: 4.5rem;
+  // TODO: check z-index - needs to be below dropdown z-index (1000) currently $zindex-toast is 1090
+  z-index: 999;
+  background-color: colors.$primary;
+  color: colors.$on-primary;
+  padding: .5rem 1rem;
+  border-radius: 50rem;
+  font-size: vars.$font-size-xs;
+  width: max-content;
+  align-self: center;
+  text-align: center;
+  box-shadow: none;
+}
 
-  color: map.get($utilities-text-colors, "info");
-  text-transform: uppercase;
-  font-weight: 500;
+.wy-toast-primary {
+  background: colors.$on-primary-container;
+  color: colors.$primary-container;
 }

package/src/scss/theme/_type.scss

@@ -0,0 +1,41 @@
+@use "base/vars";
+
+@mixin heading {
+  margin-top: .5rem;
+  margin-bottom: .5rem;
+  font-style: vars.$headings-font-style;
+  font-weight: vars.$headings-font-weight;
+  line-height: vars.$headings-line-height;
+}
+
+// We never use H1 since we are in a context
+
+// ~ H2
+.wy-title {
+  @include heading;
+  margin-top: .5rem;
+  margin-bottom: .5rem;
+  font-weight: 400;
+  font-size: 2.5rem;
+  line-height: 3rem;
+}
+
+// ~ H3
+.wy-headline {
+  @include heading;
+  margin-top: .5rem;
+  margin-bottom: .5rem;
+  font-weight: 400;
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+// ~ H4
+.wy-label {
+  @include heading;
+  margin-top: 0rem;
+  margin-bottom: 0rem;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}

package/src/scss/theme/{bootstrap/mixins → base}/_breakpoints.scss

@@ -1,3 +1,12 @@
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px
+) !default;
+
 // Breakpoint viewport sizes and media queries.
 //
 // Breakpoints are defined as a map of (name: minimum width), order from small to large:

package/src/scss/theme/base/_colors.scss

@@ -0,0 +1,315 @@
+@use "sass:color";
+@use "sass:map";
+@use "palette";
+
+// fixed colors
+$theme: palette.$seed;
+$black: palette.$neutral-0;
+$white: palette.$neutral-100;
+$shadow: $black;
+
+// css variables
+:where(:root, :host > *) {
+  // fixed colors
+  --wy-theme: #{$theme};
+  --wy-black: #{$black};
+  --wy-white: #{$white};
+  --wy-shadow: #{$shadow};
+
+  // palette
+  --wy-primary-99: #{palette.$primary-99};
+  --wy-primary-95: #{palette.$primary-95};
+  --wy-primary-90: #{palette.$primary-90};
+  --wy-primary-80: #{palette.$primary-80};
+  --wy-primary-70: #{palette.$primary-70};
+  --wy-primary-60: #{palette.$primary-60};
+  --wy-primary-50: #{palette.$primary-50};
+  --wy-primary-40: #{palette.$primary-40};
+  --wy-primary-30: #{palette.$primary-30};
+  --wy-primary-20: #{palette.$primary-20};
+  --wy-primary-10: #{palette.$primary-10};
+                   
+  --wy-secondary-99: #{palette.$secondary-99};
+  --wy-secondary-95: #{palette.$secondary-95};
+  --wy-secondary-90: #{palette.$secondary-90};
+  --wy-secondary-80: #{palette.$secondary-80};
+  --wy-secondary-70: #{palette.$secondary-70};
+  --wy-secondary-60: #{palette.$secondary-60};
+  --wy-secondary-50: #{palette.$secondary-50};
+  --wy-secondary-40: #{palette.$secondary-40};
+  --wy-secondary-30: #{palette.$secondary-30};
+  --wy-secondary-20: #{palette.$secondary-20};
+  --wy-secondary-10: #{palette.$secondary-10};
+
+  --wy-tertiary-99: #{palette.$secondary-99};
+  --wy-tertiary-95: #{palette.$secondary-95};
+  --wy-tertiary-90: #{palette.$secondary-90};
+  --wy-tertiary-80: #{palette.$secondary-80};
+  --wy-tertiary-70: #{palette.$secondary-70};
+  --wy-tertiary-60: #{palette.$secondary-60};
+  --wy-tertiary-50: #{palette.$secondary-50};
+  --wy-tertiary-40: #{palette.$secondary-40};
+  --wy-tertiary-30: #{palette.$secondary-30};
+  --wy-tertiary-20: #{palette.$secondary-20};
+  --wy-tertiary-10: #{palette.$secondary-10};
+
+  --wy-error-99: #{palette.$error-99};
+  --wy-error-95: #{palette.$error-95};
+  --wy-error-90: #{palette.$error-90};
+  --wy-error-80: #{palette.$error-80};
+  --wy-error-70: #{palette.$error-70};
+  --wy-error-60: #{palette.$error-60};
+  --wy-error-50: #{palette.$error-50};
+  --wy-error-40: #{palette.$error-40};
+  --wy-error-30: #{palette.$error-30};
+  --wy-error-20: #{palette.$error-20};
+  --wy-error-10: #{palette.$error-10};
+
+  --wy-neutral-99: #{palette.$neutral-99};
+  --wy-neutral-95: #{palette.$neutral-95};
+  --wy-neutral-90: #{palette.$neutral-90};
+  --wy-neutral-80: #{palette.$neutral-80};
+  --wy-neutral-70: #{palette.$neutral-70};
+  --wy-neutral-60: #{palette.$neutral-60};
+  --wy-neutral-50: #{palette.$neutral-50};
+  --wy-neutral-40: #{palette.$neutral-40};
+  --wy-neutral-30: #{palette.$neutral-30};
+  --wy-neutral-20: #{palette.$neutral-20};
+  --wy-neutral-10: #{palette.$neutral-10};
+
+  --wy-neutral-variant-99: #{palette.$neutral-variant-99};
+  --wy-neutral-variant-95: #{palette.$neutral-variant-95};
+  --wy-neutral-variant-90: #{palette.$neutral-variant-90};
+  --wy-neutral-variant-80: #{palette.$neutral-variant-80};
+  --wy-neutral-variant-70: #{palette.$neutral-variant-70};
+  --wy-neutral-variant-60: #{palette.$neutral-variant-60};
+  --wy-neutral-variant-50: #{palette.$neutral-variant-50};
+  --wy-neutral-variant-40: #{palette.$neutral-variant-40};
+  --wy-neutral-variant-30: #{palette.$neutral-variant-30};
+  --wy-neutral-variant-20: #{palette.$neutral-variant-20};
+  --wy-neutral-variant-10: #{palette.$neutral-variant-10};
+
+  --wy-surface-1-light: #{palette.$surface-1-light}; // --wy-surface + --wy-primary with 5% opacity
+  --wy-surface-2-light: #{palette.$surface-2-light}; // --wy-surface + --wy-primary with 8% opacity
+  --wy-surface-3-light: #{palette.$surface-3-light}; // --wy-surface + --wy-primary with 11 opacity
+  --wy-surface-4-light: #{palette.$surface-4-light}; // --wy-surface + --wy-primary with 12% opacity
+  --wy-surface-5-light: #{palette.$surface-5-light}; // --wy-surface + --wy-primary with 14% opacity
+
+  --wy-surface-1-dark: #{palette.$surface-1-dark}; // --wy-surface + --wy-primary with 5% opacity
+  --wy-surface-2-dark: #{palette.$surface-2-dark}; // --wy-surface + --wy-primary with 8% opacity
+  --wy-surface-3-dark: #{palette.$surface-3-dark}; // --wy-surface + --wy-primary with 11 opacity
+  --wy-surface-4-dark: #{palette.$surface-4-dark}; // --wy-surface + --wy-primary with 12% opacity
+  --wy-surface-5-dark: #{palette.$surface-5-dark}; // --wy-surface + --wy-primary with 14% opacity
+
+  // custom colors
+  --wy-blue-light: #{palette.$blue-light};
+  --wy-indigo-light: #{palette.$indigo-light};
+  --wy-purple-light: #{palette.$purple-light};
+  --wy-pink-light: #{palette.$pink-light};
+  --wy-red-light: #{palette.$red-light};
+  --wy-orange-light: #{palette.$orange-light};
+  --wy-yellow-light: #{palette.$yellow-light};
+  --wy-green-light: #{palette.$green-light};
+  --wy-teal-light: #{palette.$teal-light};
+  --wy-cyan-light: #{palette.$cyan-light};
+  --wy-gray-light: #{palette.$gray-light};
+
+  // custom colors
+  --wy-blue-dark: #{palette.$blue-dark};
+  --wy-indigo-dark: #{palette.$indigo-dark};
+  --wy-purple-dark: #{palette.$purple-dark};
+  --wy-pink-dark: #{palette.$pink-dark};
+  --wy-red-dark: #{palette.$red-dark};
+  --wy-orange-dark: #{palette.$orange-dark};
+  --wy-yellow-dark: #{palette.$yellow-dark};
+  --wy-green-dark: #{palette.$green-dark};
+  --wy-teal-dark: #{palette.$teal-dark};
+  --wy-cyan-dark: #{palette.$cyan-dark};
+  --wy-gray-dark: #{palette.$gray-dark};
+}
+
+:where(:root, :host > *, .wy-light) {
+  // light mode
+  color-scheme: light;
+
+  // theme colors
+  --wy-primary: var(--wy-primary-40);
+  --wy-on-primary: var(--wy-white); 
+  --wy-primary-container: var(--wy-primary-90);
+  --wy-on-primary-container: var(--wy-primary-10); 
+
+  --wy-secondary: var(--wy-secondary-40);
+  --wy-on-secondary: var(--wy-white); 
+  --wy-secondary-container: var(--wy-secondary-90);
+  --wy-on-secondary-container: var(--wy-secondary-10);
+
+  --wy-tertiary: var(--wy-tertiary-40);
+  --wy-on-tertiary: var(--wy-white); 
+  --wy-tertiary-container: var(--wy-tertiary-90);
+  --wy-on-tertiary-container: var(--wy-tertiary-10);
+
+  --wy-error: var(--wy-error-40); 
+  --wy-on-error: var(--wy-white); 
+  --wy-error-container: var(--wy-error-90); 
+  --wy-on-error-container: var(--wy-error-10); 
+
+  --wy-background: var(--wy-neutral-99);
+  --wy-on-background: var(--wy-neutral-10);
+
+  --wy-surface: var(--wy-neutral-99);
+  --wy-on-surface: var(--wy-neutral-10);
+
+  --wy-surface-variant: var(--wy-neutral-variant-90);
+  --wy-on-surface-variant: var(--wy-neutral-variant-30); 
+
+  --wy-outline: var(--wy-neutral-variant-50);
+  --wy-outline-variant: var(--wy-neutral-variant-80);
+
+  --wy-inverse-surface: var(--wy-neutral-20);
+  --wy-on-inverse-surface: var(--wy-neutral-95);
+  --wy-inverse-primary: var(--wy-primary-80);
+
+  --wy-surface-1: var(--wy-surface-1-light); // --wy-surface + --wy-primary with 5% opacity
+  --wy-surface-2: var(--wy-surface-2-light); // --wy-surface + --wy-primary with 8% opacity
+  --wy-surface-3: var(--wy-surface-3-light); // --wy-surface + --wy-primary with 11 opacity
+  --wy-surface-4: var(--wy-surface-4-light); // --wy-surface + --wy-primary with 12% opacity
+  --wy-surface-5: var(--wy-surface-5-light); // --wy-surface + --wy-primary with 14% opacity
+
+  --wy-link: var(--wy-primary-40);
+
+  // custom colors
+  --wy-blue: var(--wy-blue-light);
+  --wy-indigo: var(--wy-indigo-light);
+  --wy-purple: var(--wy-purple-light);
+  --wy-pink: var(--wy-pink-light);
+  --wy-red: var(--wy-red-light);
+  --wy-orange: var(--wy-orange-light);
+  --wy-yellow: var(--wy-yellow-light);
+  --wy-green: var(--wy-green-light);
+  --wy-teal: var(--wy-teal-light);
+  --wy-cyan: var(--wy-cyan-light);
+  --wy-gray: var(--wy-gray-light);
+}
+
+:where(.wy-dark) {
+  // dark mode
+  color-scheme: dark;
+
+  // theme colors
+  --wy-primary: var(--wy-primary-80);
+  --wy-on-primary: var(--wy-primary-20); 
+  --wy-primary-container: var(--wy-primary-30);
+  --wy-on-primary-container: var(--wy-primary-90); 
+
+  --wy-secondary: var(--wy-secondary-80);
+  --wy-on-secondary: var(--wy-secondary-20); 
+  --wy-secondary-container: var(--wy-secondary-30);
+  --wy-on-secondary-container: var(--wy-secondary-90);
+
+  --wy-tertiary: var(--wy-tertiary-80);
+  --wy-on-tertiary: var(--wy-tertiary-20); 
+  --wy-tertiary-container: var(--wy-tertiary-30);
+  --wy-on-tertiary-container: var(--wy-tertiary-90);
+
+  --wy-error: var(--wy-error-80); 
+  --wy-on-error: var(--wy-error-20); 
+  --wy-error-container: var(--wy-error-30); 
+  --wy-on-error-container: var(--wy-error-90); 
+
+  --wy-background: var(--wy-neutral-10);
+  --wy-on-background: var(--wy-neutral-90);
+
+  --wy-surface: var(--wy-neutral-10);
+  --wy-on-surface: var(--wy-neutral-90);
+
+  --wy-surface-variant: var(--wy-neutral-variant-30);
+  --wy-on-surface-variant: var(--wy-neutral-variant-80); 
+
+  --wy-outline: var(--wy-neutral-variant-60);
+  --wy-outline-variant: var(--wy-neutral-variant-30);
+
+  --wy-inverse-surface: var(--wy-neutral-90);
+  --wy-on-inverse-surface: var(--wy-neutral-20);
+  --wy-inverse-primary: var(--wy-primary-40);
+ 
+  --wy-surface-1: var(--wy-surface-1-dark); // --wy-surface + --wy-primary with 5% opacity
+  --wy-surface-2: var(--wy-surface-2-dark); // --wy-surface + --wy-primary with 8% opacity
+  --wy-surface-3: var(--wy-surface-3-dark); // --wy-surface + --wy-primary with 11 opacity
+  --wy-surface-4: var(--wy-surface-4-dark); // --wy-surface + --wy-primary with 12% opacity
+  --wy-surface-5: var(--wy-surface-5-dark); // --wy-surface + --wy-primary with 14% opacity
+
+  --wy-link: var(--wy-primary-80);
+
+  // custom colors
+  --wy-blue: var(--wy-blue-dark);
+  --wy-indigo: var(--wy-indigo-dark);
+  --wy-purple: var(--wy-purple-dark);
+  --wy-pink: var(--wy-pink-dark);
+  --wy-red: var(--wy-red-dark);
+  --wy-orange: var(--wy-orange-dark);
+  --wy-yellow: var(--wy-yellow-dark);
+  --wy-green: var(--wy-green-dark);
+  --wy-teal: var(--wy-teal-dark);
+  --wy-cyan: var(--wy-cyan-dark);
+  --wy-gray: var(--wy-gray-dark);
+}
+
+// scss theme colors
+$primary: var(--wy-primary);
+$on-primary: var(--wy-on-primary);
+$primary-container: var(--wy-primary-container);
+$on-primary-container: var(--wy-on-primary-container);
+
+$secondary: var(--wy-secondary);
+$on-secondary: var(--wy-on-secondary);
+$secondary-container: var(--wy-secondary-container);
+$on-secondary-container: var(--wy-on-secondary-container);
+
+$tertiary: var(--wy-tertiary);
+$on-tertiary: var(--wy-on-tertiary);
+$tertiary-container: var(--wy-tertiary-container);
+$on-tertiary-container: var(--wy-on-tertiary-container);
+
+$error: var(--wy-error);
+$on-error: var(--wy-on-error);
+$error-container: var(--wy-error-container);
+$on-error-container: var(--wy-on-error-container);
+
+$background: var(--wy-background);
+$on-background: var(--wy-on-background);
+
+$surface: var(--wy-surface);
+$on-surface: var(--wy-on-surface);
+
+$surface-variant: var(--wy-surface-variant);
+$on-surface-variant: var(--wy-on-surface-variant);
+
+$outline: var(--wy-outline);
+$outline-variant: var(--wy-outline-variant);
+
+$surface-1: var(--wy-surface-1);
+$surface-2: var(--wy-surface-2);
+$surface-3: var(--wy-surface-3);
+$surface-4: var(--wy-surface-4);
+$surface-5: var(--wy-surface-5);
+
+$inverse-surface: var(--wy-inverse-surface);
+$on-inverse-surface: var(--wy-on-inverse-surface);
+$inverse-primary: var(--wy-inverse-primary);
+
+$link: var(--wy-link);
+
+// scss custom colors
+$blue: var(--wy-blue);
+$indigo: var(--wy-indigo);
+$purple: var(--wy-purple);
+$pink: var(--wy-pink);
+$red: var(--wy-red);
+$orange: var(--wy-orange);
+$yellow: var(--wy-yellow);
+$green: var(--wy-green);
+$teal: var(--wy-teal);
+$cyan: var(--wy-cyan);
+$gray: var(--wy-gray);
+
+

package/src/scss/theme/base/_md.scss

@@ -0,0 +1,19 @@
+// Material design animation and shadows from https://fezvrasta.github.io/bootstrap-material-design/
+$animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
+$animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1);
+$animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1);
+$animation-curve-default: $animation-curve-fast-out-slow-in;
+$animation-duration: .2s;
+$animation-duration-fast: .1s;
+
+$shadow-umbra-opacity: 0.2;
+$shadow-penumbra-opacity: 0.14;
+$shadow-ambient-opacity: 0.12;
+$shadow-focus: 0 0 .5rem rgba(#000, .18), 0 .5rem 1rem rgba(#000, .36);
+$shadow-2dp: 0 .125rem .125rem 0 rgba(#000, $shadow-penumbra-opacity), 0 .1875rem .0625rem -.125rem rgba(#000, $shadow-umbra-opacity), 0 .0625rem .3125rem 0 rgba(#000, $shadow-ambient-opacity);
+$shadow-3dp: 0 .1875rem .25rem 0 rgba(#000, $shadow-penumbra-opacity), 0 .1875rem .1875rem -.125rem rgba(#000, $shadow-umbra-opacity), 0 .0625rem .5rem 0 rgba(#000, $shadow-ambient-opacity);
+$shadow-4dp: 0 .25rem .3125rem 0 rgba(#000, $shadow-penumbra-opacity), 0 .0625rem .625rem 0 rgba(#000, $shadow-ambient-opacity), 0 .125rem .25rem -.0625rem rgba(#000, $shadow-umbra-opacity);
+$shadow-6dp: 0 .375rem .625rem 0 rgba(#000, $shadow-penumbra-opacity), 0 .0625rem 1.5rem 0 rgba(#000, $shadow-ambient-opacity), 0 .1875rem .3125rem -.0625rem rgba(#000, $shadow-umbra-opacity);
+$shadow-8dp: 0 .5rem .625rem .0625rem rgba(#000, $shadow-penumbra-opacity), 0 .1875rem 1.25rem .125rem rgba(#000, $shadow-ambient-opacity), 0 .3125rem .3125rem -.1875rem rgba(#000, $shadow-umbra-opacity);
+$shadow-16dp: 0 1rem 2.25rem .125rem rgba(#000, $shadow-penumbra-opacity), 0 .375rem 1.875rem .3125rem rgba(#000, $shadow-ambient-opacity), 0 .5rem .625rem -.3125rem rgba(#000, $shadow-umbra-opacity);
+$shadow-24dp: 0 .5625rem 4.375rem .5rem rgba(#000, $shadow-penumbra-opacity), 0 1.0625rem 1.3125rem -.4375rem rgba(#000, $shadow-ambient-opacity), 0 2.25rem 3.5rem .1875rem rgba(#000, $shadow-umbra-opacity);