@rolster/styles-foundations 2.7.2 → 3.0.0

package/scss/design-system-filled/organisms/picker-date-range.scss

@@ -0,0 +1,88 @@
+// Rolster Technology PickerDateRange Component
+// v1.1.6
+// @license MIT
+// Author: Rolster Developers
+// Created: 23/Abr/2026
+// Updated: 27/Abr/2026
+
+.rls-picker-date-range {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 150rem;
+  row-gap: var(--rls-sizing-x4);
+  overflow: hidden;
+  border-radius: var(--rlc-picker-date-range-radius, 0rem);
+  background: var(--rlc-picker-date-range-background, transparent);
+
+  &__header {
+    --rlc-picker-selector-title-padding: var(--rls-sizing-x4)
+      var(--rls-sizing-x6);
+    --rlc-picker-selector-title-radius: var(--rls-sizing-x6);
+    --rlc-picker-selector-title-background: var(--rls-app-color-200);
+
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--rls-sizing-x4);
+    padding: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem var(--rls-sizing-x4);
+    box-sizing: border-box;
+  }
+
+  &__title {
+    height: var(--rls-sizing-x14);
+    line-height: var(--rls-sizing-x14);
+    font-size: var(--rls-paragraph-font-size);
+    text-align: center;
+    cursor: default;
+    color: var(--rls-app-color-700);
+
+    &:hover {
+      color: var(--rls-theme-color-500);
+    }
+
+    & > span {
+      font-weight: var(--rls-font-weight-bold);
+    }
+  }
+
+  &__component {
+    --rlc-picker-day-range-display: none;
+    --rlc-picker-month-display: none;
+    --rlc-picker-year-display: none;
+
+    display: flex;
+    justify-content: center;
+    width: 150rem;
+    padding: 0rem var(--rls-sizing-x2);
+    box-sizing: border-box;
+
+    &--day {
+      --rlc-picker-day-range-display: flex;
+    }
+
+    &--month {
+      --rlc-picker-month-display: grid;
+    }
+
+    &--year {
+      --rlc-picker-year-display: block;
+    }
+  }
+
+  &__footer {
+    &--hidden {
+      display: none;
+    }
+  }
+
+  &__actions {
+    --rlc-button-width: 100%;
+    --rlc-button-content-padding: 0rem var(--rls-sizing-x3);
+
+    display: flex;
+    column-gap: var(--rls-sizing-x4);
+    padding: var(--rls-sizing-x6) var(--rls-sizing-x8);
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+}

package/scss/design-system-filled/organisms/picker-date.scss

@@ -0,0 +1,90 @@
+// Rolster Technology PickerDate Component
+// v2.1.3
+// @license MIT
+// Author: Rolster Developers
+// Created: 23/Abr/2026
+// Updated: 04/May/2026
+
+.rls-picker-date {
+  position: relative;
+  display: flex;
+  width: 150rem;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x4);
+  overflow: hidden;
+  user-select: none;
+  border-radius: var(--rlc-picker-date-radius, 0rem);
+  background: var(--rlc-picker-date-background, transparent);
+
+  &__header {
+    --rlc-picker-selector-title-padding: var(--rls-sizing-x4)
+      var(--rls-sizing-x6);
+    --rlc-picker-selector-title-radius: var(--rls-sizing-x6);
+    --rlc-picker-selector-title-background: var(--rls-app-color-200);
+
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--rls-sizing-x4);
+    padding: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem var(--rls-sizing-x4);
+    box-sizing: border-box;
+  }
+
+  &__title {
+    height: var(--rls-sizing-x14);
+    line-height: var(--rls-sizing-x14);
+    font-size: var(--rls-paragraph-font-size);
+    text-align: center;
+    cursor: default;
+    color: var(--rls-app-color-700);
+
+    &:hover {
+      color: var(--rls-theme-color-500);
+    }
+
+    & > span {
+      font-weight: var(--rls-font-weight-bold);
+    }
+  }
+
+  &__component {
+    --rlc-picker-day-display: none;
+    --rlc-picker-month-display: none;
+    --rlc-picker-year-display: none;
+
+    display: flex;
+    justify-content: center;
+
+    &--day {
+      --rlc-picker-day-display: flex;
+    }
+
+    &--month {
+      --rlc-picker-month-display: grid;
+    }
+
+    &--year {
+      --rlc-picker-year-display: block;
+    }
+  }
+
+  &__actions {
+    --rlc-button-width: 100%;
+    --rlc-button-content-padding: 0rem var(--rls-sizing-x3);
+    --rls-button-font-size: 6.75rem;
+    
+    display: flex;
+    column-gap: var(--rls-sizing-x6);
+    align-items: center;
+    padding: var(--rls-sizing-x4) var(--rls-sizing-x8) var(--rls-sizing-x6)
+      var(--rls-sizing-x8);
+    overflow: hidden;
+    box-sizing: border-box;
+
+    &--today {
+      display: flex;
+      width: var(--rls-sizing-x16);
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}

package/scss/design-system-filled/organisms/snackbar.scss

@@ -0,0 +1,93 @@
+// Rolster Technology Snackbar Component
+// v1.0.9
+// @license MIT
+// Author: Rolster Developers
+// Created: 23/Abr/2026
+// Updated: 23/Abr/2026
+
+.rls-snackbar {
+  position: fixed;
+  display: flex;
+  left: var(--rlc-snackbar-left, 50%);
+  width: auto;
+  max-width: 240rem;
+  height: auto;
+  bottom: 0rem;
+  column-gap: var(--rls-sizing-x6);
+  padding: var(--rls-sizing-x6);
+  box-sizing: border-box;
+  border-radius: var(--rls-sizing-x6);
+  background: var(--rls-app-color-050);
+  border-left: var(--rls-theme-border-4-400);
+  transform: translate(-50%, calc(100% + var(--rls-sizing-x4)));
+  transition: all 160ms 0ms var(--rls-standard-curve);
+  box-shadow: var(--rls-app-shadow-center-8);
+  z-index: var(--rls-z-index-32);
+
+  &--visible {
+    transform: translate(-50%, calc(0% - var(--rls-sizing-x8)));
+  }
+
+  &__avatar {
+    --rlc-icon-color: var(--rls-theme-color-050);
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    background: var(--rls-theme-color-500);
+    width: var(--rls-sizing-x18);
+    height: var(--rls-sizing-x18);
+    border-radius: var(--rls-sizing-x4);
+
+    & + .rls-snackbar__component {
+      width: calc(100% - var(--rls-sizing-x18));
+    }
+  }
+
+  &__component {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--rls-sizing-x2);
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    column-gap: var(--rls-sizing-x4);
+
+    & > button {
+      background: transparent;
+      padding: 0rem;
+      cursor: pointer;
+      color: var(--rls-theme-color-700);
+    }
+  }
+
+  &__title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--rls-theme-color-500);
+    font-size: var(--rls-body-font-size);
+    font-weight: var(--rls-font-weight-bold);
+    letter-spacing: var(--rls-body-letter-spacing);
+  }
+
+  &__content {
+    p {
+      line-height: var(--rls-sizing-x10);
+      color: var(--rls-app-color-600);
+      font-size: var(--rls-label-font-size);
+      font-weight: var(--rls-font-weight-medium);
+      letter-spacing: var(--rls-label-letter-spacing);
+    }
+  }
+}
+
+@media only screen and (max-width: 375px) {
+  .rls-snackbar {
+    width: calc(100% - var(--rls-sizing-x12));
+  }
+}

package/scss/foundations/borders.scss

@@ -1,14 +1,14 @@
-// Rolster Technology Borders Foundations
-// v1.0.0
-// @license MIT
-// Author: Rolster Developers
-// Created: 28/Oct/2025
-// Updated: 28/Oct/2025
-
-body {
-  --rls-app-border-1-transparent: var(--rls-border-1) solid transparent;
-
-  --rls-app-border-2-transparent: var(--rls-border-2) solid transparent;
-
-  --rls-app-border-4-transparent: var(--rls-border-4) solid transparent;
-}
+// Rolster Technology Borders Foundations
+// v1.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 28/Oct/2025
+// Updated: 28/Oct/2025
+
+body {
+  --rls-app-border-1-transparent: var(--rls-border-1) solid transparent;
+
+  --rls-app-border-2-transparent: var(--rls-border-2) solid transparent;
+
+  --rls-app-border-4-transparent: var(--rls-border-4) solid transparent;
+}

package/scss/foundations/colors.scss

@@ -8,40 +8,40 @@
 @use 'helpers' as helpers;
 
 body {
-  --rls-app-color-950: var(--rls-project-color-950, #26303b);
+  --rls-app-color-950: var(--rls-project-color-950, #1f1e31);
 
-  --rls-app-color-900: var(--rls-project-color-900, #32384e);
+  --rls-app-color-900: var(--rls-project-color-900, #272638);
 
-  --rls-app-color-800: var(--rls-project-color-800, #3f4661);
+  --rls-app-color-800: var(--rls-project-color-800, #373647);
 
-  --rls-app-color-700: var(--rls-project-color-700, #515a7d);
+  --rls-app-color-700: var(--rls-project-color-700, #494958);
 
-  --rls-app-color-600: var(--rls-project-color-600, #67739f);
+  --rls-app-color-600: var(--rls-project-color-600, #64646f);
 
-  --rls-app-color-500: var(--rls-project-color-500, #828fbf);
+  --rls-app-color-500: var(--rls-project-color-500, #84848d);
 
-  --rls-app-color-400: var(--rls-project-color-400, #a5b0e8);
+  --rls-app-color-400: var(--rls-project-color-400, #a9a9af);
 
-  --rls-app-color-300: var(--rls-project-color-300, #c2cbf5);
+  --rls-app-color-300: var(--rls-project-color-300, #d4d4d6);
 
-  --rls-app-color-200: var(--rls-project-color-200, #e0e5ff);
+  --rls-app-color-200: var(--rls-project-color-200, #eae9e9);
 
-  --rls-app-color-100: var(--rls-project-color-100, #f5f7ff);
+  --rls-app-color-100: var(--rls-project-color-100, #f7f7f5);
 
   --rls-app-color-050: var(--rls-project-color-050, #ffffff);
 
   @include helpers.rolster-theme(
     'standard',
-    #26303b,
-    #32384e,
-    #3f4661,
-    #515a7d,
-    #67739f,
-    #828fbf,
-    #a5b0e8,
-    #c2cbf5,
-    #e0e5ff,
-    #f5f7ff,
+    #1f1e31,
+    #272638,
+    #373647,
+    #494958,
+    #64646f,
+    #84848d,
+    #a9a9af,
+    #d4d4d6,
+    #eae9e9,
+    #f7f7f5,
     #ffffff
   );
 
@@ -286,25 +286,25 @@ body {
   );
 
   &[app-theme='dark'] {
-    --rls-app-color-050: var(--rls-project-color-050, #26303b);
+    --rls-app-color-050: var(--rls-project-color-050, #1f1e31);
 
-    --rls-app-color-100: var(--rls-project-color-100, #32384e);
+    --rls-app-color-100: var(--rls-project-color-100, #272638);
 
-    --rls-app-color-200: var(--rls-project-color-200, #3f4661);
+    --rls-app-color-200: var(--rls-project-color-200, #373647);
 
-    --rls-app-color-300: var(--rls-project-color-300, #515a7d);
+    --rls-app-color-300: var(--rls-project-color-300, #494958);
 
-    --rls-app-color-400: var(--rls-project-color-400, #67739f);
+    --rls-app-color-400: var(--rls-project-color-400, #64646f);
 
-    --rls-app-color-500: var(--rls-project-color-500, #828fbf);
+    --rls-app-color-500: var(--rls-project-color-500, #84848d);
 
-    --rls-app-color-600: var(--rls-project-color-600, #a5b0e8);
+    --rls-app-color-600: var(--rls-project-color-600, #a9a9af);
 
-    --rls-app-color-700: var(--rls-project-color-700, #c2cbf5);
+    --rls-app-color-700: var(--rls-project-color-700, #d4d4d6);
 
-    --rls-app-color-800: var(--rls-project-color-800, #e0e5ff);
+    --rls-app-color-800: var(--rls-project-color-800, #eae9e9);
 
-    --rls-app-color-900: var(--rls-project-color-900, #f5f7ff);
+    --rls-app-color-900: var(--rls-project-color-900, #f7f7f5);
 
     --rls-app-color-950: var(--rls-project-color-950, #ffffff);
   }

package/scss/foundations/elevations.scss

@@ -1,128 +1,130 @@
-// Rolster Technology Elevations Foundations
-// v2.1.3
-// @license MIT
-// Author: Rolster Developers
-// Created: 20/Mar/2018
-// Updated: 08/Abr/2026
-
-body {
-  --rls-app-shadow-color: rgba(173, 186, 230, 0.6);
-
-  --rls-z-index-2: 1;
-
-  --rls-z-index-2: 2;
-
-  --rls-z-index-4: 4;
-
-  --rls-z-index-6: 6;
-
-  --rls-z-index-8: 8;
-
-  --rls-z-index-12: 12;
-
-  --rls-z-index-16: 16;
-
-  --rls-z-index-24: 24;
-
-  --rls-z-index-32: 32;
-
-  --rls-app-shadow-1: 0px 4px 2px -2px rgba(173, 186, 230, 0.02);
-
-  --rls-app-shadow-2: 0px 4px 8px -2px rgba(173, 186, 230, 0.04);
-
-  --rls-app-shadow-3: 0px 2px 4px -2px rgba(173, 186, 230, 0.08);
-
-  --rls-app-shadow-4: 0px 4px 8px -6px rgba(173, 186, 230, 0.03),
-    0px 16px 8px -4px rgba(173, 186, 230, 0.03);
-
-  --rls-app-shadow-5: 0px 8px 24px -4px rgba(173, 186, 230, 0.08);
-
-  --rls-app-shadow-6: 0px 8px 24px -4px rgba(173, 186, 230, 0.12);
-
-  --rls-app-shadow-bottom-2: 0px 2px 2px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-bottom-4: 0px 4px 4px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-bottom-6: 0px 6px 6px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-bottom-8: 0px 8px 8px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-bottom-16: 0px 16px 16px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-bottom-24: 0px 24px 24px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-bottom-32: 0px 32px 32px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-top-2: 0px -2px 2px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-top-4: 0px -4px 4px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-top-6: 0px -6px 6px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-top-8: 0px -8px 8px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-top-16: 0px -16px 16px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-top-24: 0px -24px 24px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-top-32: 0px -32px 32px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-right-2: 2px 0px 2px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-right-4: 4px 0px 4px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-right-6: 6px 0px 6px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-right-8: 8px 0px 8px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-right-16: 16px 0px 16px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-right-24: 24px 0px 24px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-right-32: 32px 0px 32px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-left-2: -2px 0px 2px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-left-4: -4px 0px 4px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-left-6: -6px 0px 6px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-left-8: -8px 0px 8px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-left-16: -16px 0px 16px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-left-24: -24px 0px 24px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-left-32: -32px 0px 32px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-center-2: 0px 0px 2px 0px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-center-4: 0px 0px 4px 0px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-center-6: 0px 0px 6px 0px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-center-8: 0px 0px 8px 0px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-center-16: 0px 0px 16px 0px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-center-24: 0px 0px 24px 0px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-center-32: 0px 0px 32px 0px var(--rls-app-shadow-color);
-}
-
-*[app-theme='dark'] {
-  --rls-app-shadow-color: rgb(98, 111, 155, 0.6);
-
-  --rls-app-shadow-1: 0px 4px 2px -2px rgba(50, 44, 47, 0.02);
-
-  --rls-app-shadow-2: 0px 4px 8px -2px rgba(50, 44, 47, 0.04);
-
-  --rls-app-shadow-3: 0px 2px 4px -2px rgba(50, 44, 47, 0.08);
-
-  --rls-app-shadow-4: 0px 4px 8px -6px rgba(50, 44, 47, 0.03),
-    0px 16px 8px -4px rgba(50, 44, 47, 0.03);
-
-  --rls-app-shadow-5: 0px 8px 24px -4px rgba(50, 44, 47, 0.08);
-
-  --rls-app-shadow-6: 0px 8px 24px -4px rgba(50, 44, 47, 0.12);
-}
+// Rolster Technology Elevations Foundations
+// v2.1.4
+// @license MIT
+// Author: Rolster Developers
+// Created: 20/Mar/2018
+// Updated: 09/Abr/2026
+
+body {
+  --rls-app-shadow-color: rgba(169, 169, 175, 0.6);
+
+  --rls-z-index-1: 1;
+
+  --rls-z-index-2: 2;
+
+  --rls-z-index-4: 4;
+
+  --rls-z-index-6: 6;
+
+  --rls-z-index-8: 8;
+
+  --rls-z-index-12: 12;
+
+  --rls-z-index-16: 16;
+
+  --rls-z-index-24: 24;
+
+  --rls-z-index-32: 32;
+
+  --rls-app-shadow-1: 0px 4px 2px -2px rgba(169, 169, 175, 0.02);
+
+  --rls-app-shadow-2: 0px 4px 8px -2px rgba(169, 169, 175, 0.04);
+
+  --rls-app-shadow-3: 0px 2px 4px -2px rgba(169, 169, 175, 0.08);
+
+  --rls-app-shadow-4:
+    0px 4px 8px -6px rgba(169, 169, 175, 0.03),
+    0px 16px 8px -4px rgba(169, 169, 175, 0.03);
+
+  --rls-app-shadow-5: 0px 8px 24px -4px rgba(169, 169, 175, 0.08);
+
+  --rls-app-shadow-6: 0px 8px 24px -4px rgba(169, 169, 175, 0.12);
+
+  --rls-app-shadow-bottom-2: 0px 2px 2px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-bottom-4: 0px 4px 4px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-bottom-6: 0px 6px 6px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-bottom-8: 0px 8px 8px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-bottom-16: 0px 16px 16px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-bottom-24: 0px 24px 24px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-bottom-32: 0px 32px 32px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-top-2: 0px -2px 2px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-top-4: 0px -4px 4px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-top-6: 0px -6px 6px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-top-8: 0px -8px 8px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-top-16: 0px -16px 16px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-top-24: 0px -24px 24px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-top-32: 0px -32px 32px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-right-2: 2px 0px 2px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-right-4: 4px 0px 4px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-right-6: 6px 0px 6px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-right-8: 8px 0px 8px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-right-16: 16px 0px 16px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-right-24: 24px 0px 24px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-right-32: 32px 0px 32px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-left-2: -2px 0px 2px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-left-4: -4px 0px 4px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-left-6: -6px 0px 6px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-left-8: -8px 0px 8px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-left-16: -16px 0px 16px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-left-24: -24px 0px 24px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-left-32: -32px 0px 32px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-center-2: 0px 0px 2px 0px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-center-4: 0px 0px 4px 0px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-center-6: 0px 0px 6px 0px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-center-8: 0px 0px 8px 0px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-center-16: 0px 0px 16px 0px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-center-24: 0px 0px 24px 0px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-center-32: 0px 0px 32px 0px var(--rls-app-shadow-color);
+}
+
+*[app-theme='dark'] {
+  --rls-app-shadow-color: rgb(98, 111, 155, 0.6);
+
+  --rls-app-shadow-1: 0px 4px 2px -2px rgba(50, 44, 47, 0.02);
+
+  --rls-app-shadow-2: 0px 4px 8px -2px rgba(50, 44, 47, 0.04);
+
+  --rls-app-shadow-3: 0px 2px 4px -2px rgba(50, 44, 47, 0.08);
+
+  --rls-app-shadow-4:
+    0px 4px 8px -6px rgba(50, 44, 47, 0.03),
+    0px 16px 8px -4px rgba(50, 44, 47, 0.03);
+
+  --rls-app-shadow-5: 0px 8px 24px -4px rgba(50, 44, 47, 0.08);
+
+  --rls-app-shadow-6: 0px 8px 24px -4px rgba(50, 44, 47, 0.12);
+}