@rolster/styles-foundations 1.0.2 → 1.0.5

package/dist/rolster-styles.css

@@ -281,6 +281,36 @@
   --box-shadow-rolster-500: var(--box-shadow-base-500);
   --backdrop-rolster-500: var(--backdrop-base-500);
   --gradient-rolster-500: var(--gradient-base-500);
+  --shadow-bottom-theme-2: var(--shadow-bottom-light-2);
+  --shadow-bottom-theme-4: var(--shadow-bottom-light-4);
+  --shadow-bottom-theme-8: var(--shadow-bottom-light-8);
+  --shadow-bottom-theme-16: var(--shadow-bottom-light-16);
+  --shadow-bottom-theme-24: var(--shadow-bottom-light-24);
+  --shadow-bottom-theme-32: var(--shadow-bottom-light-32);
+  --shadow-top-theme-2: var(--shadow-top-light-2);
+  --shadow-top-theme-4: var(--shadow-top-light-4);
+  --shadow-top-theme-8: var(--shadow-top-light-8);
+  --shadow-top-theme-16: var(--shadow-top-light-16);
+  --shadow-top-theme-24: var(--shadow-top-light-24);
+  --shadow-top-theme-32: var(--shadow-top-light-32);
+  --shadow-right-theme-2: var(--shadow-right-light-2);
+  --shadow-right-theme-4: var(--shadow-right-light-4);
+  --shadow-right-theme-8: var(--shadow-right-light-8);
+  --shadow-right-theme-16: var(--shadow-right-light-16);
+  --shadow-right-theme-24: var(--shadow-right-light-24);
+  --shadow-right-theme-32: var(--shadow-right-light-32);
+  --shadow-left-theme-2: var(--shadow-left-light-2);
+  --shadow-left-theme-4: var(--shadow-left-light-4);
+  --shadow-left-theme-8: var(--shadow-left-light-8);
+  --shadow-left-theme-16: var(--shadow-left-light-16);
+  --shadow-left-theme-24: var(--shadow-left-light-24);
+  --shadow-left-theme-32: var(--shadow-left-light-32);
+  --shadow-center-theme-2: var(--shadow-center-light-2);
+  --shadow-center-theme-4: var(--shadow-center-light-4);
+  --shadow-center-theme-8: var(--shadow-center-light-8);
+  --shadow-center-theme-16: var(--shadow-center-light-16);
+  --shadow-center-theme-24: var(--shadow-center-light-24);
+  --shadow-center-theme-32: var(--shadow-center-light-32);
 }
 
 *[rls-theme='success'] {
@@ -1985,6 +2015,33 @@ h6 {
   font-weight: var(--font-weight-bold);
 }
 
+.body-default,
+.body-regular,
+.body-medium,
+.body-semibold,
+.body-bold {
+  font-size: var(--body-font-size);
+  letter-spacing: var(--body-letter-spacing);
+  min-height: var(--body-line-height);
+  line-height: var(--body-line-height);
+}
+
+.body-regular {
+  font-weight: var(--font-weight-regular);
+}
+
+.body-medium {
+  font-weight: var(--font-weight-medium);
+}
+
+.body-semibold {
+  font-weight: var(--font-weight-semibold);
+}
+
+.body-bold {
+  font-weight: var(--font-weight-bold);
+}
+
 .input-default,
 .input-regular,
 .input-medium,
@@ -2120,6 +2177,552 @@ h6 {
   font-weight: var(--font-weight-bold);
 }
 
+.pdg-top-4 {
+  padding-top: var(--sizing-4);
+}
+
+.pdg-rgt-4 {
+  padding-right: var(--sizing-4);
+}
+
+.pdg-bot-4 {
+  padding-bottom: var(--sizing-4);
+}
+
+.pdg-lft-4 {
+  padding-left: var(--sizing-4);
+}
+
+.pdg-hrz-4 {
+  padding: 0rem var(--sizing-4);
+}
+
+.pdg-vrt-4 {
+  padding: var(--sizing-4) 0rem;
+}
+
+.pdg-4 {
+  padding: var(--sizing-4);
+}
+
+.pdg-top-8 {
+  padding-top: var(--sizing-8);
+}
+
+.pdg-rgt-8 {
+  padding-right: var(--sizing-8);
+}
+
+.pdg-bot-8 {
+  padding-bottom: var(--sizing-8);
+}
+
+.pdg-lft-8 {
+  padding-left: var(--sizing-8);
+}
+
+.pdg-hrz-8 {
+  padding: 0rem var(--sizing-8);
+}
+
+.pdg-vrt-8 {
+  padding: var(--sizing-8) 0rem;
+}
+
+.pdg-8 {
+  padding: var(--sizing-8);
+}
+
+.pdg-top-12 {
+  padding-top: var(--sizing-12);
+}
+
+.pdg-rgt-12 {
+  padding-right: var(--sizing-12);
+}
+
+.pdg-bot-12 {
+  padding-bottom: var(--sizing-12);
+}
+
+.pdg-lft-12 {
+  padding-left: var(--sizing-12);
+}
+
+.pdg-hrz-12 {
+  padding: 0rem var(--sizing-12);
+}
+
+.pdg-vrt-12 {
+  padding: var(--sizing-12) 0rem;
+}
+
+.pdg-12 {
+  padding: var(--sizing-12);
+}
+
+.pdg-top-16 {
+  padding-top: var(--sizing-16);
+}
+
+.pdg-rgt-16 {
+  padding-right: var(--sizing-16);
+}
+
+.pdg-bot-16 {
+  padding-bottom: var(--sizing-16);
+}
+
+.pdg-lft-16 {
+  padding-left: var(--sizing-16);
+}
+
+.pdg-hrz-16 {
+  padding: 0rem var(--sizing-16);
+}
+
+.pdg-vrt-16 {
+  padding: var(--sizing-16) 0rem;
+}
+
+.pdg-16 {
+  padding: var(--sizing-16);
+}
+
+.pdg-top-24 {
+  padding-top: var(--sizing-24);
+}
+
+.pdg-rgt-24 {
+  padding-right: var(--sizing-24);
+}
+
+.pdg-bot-24 {
+  padding-bottom: var(--sizing-24);
+}
+
+.pdg-lft-24 {
+  padding-left: var(--sizing-24);
+}
+
+.pdg-hrz-24 {
+  padding: 0rem var(--sizing-24);
+}
+
+.pdg-vrt-24 {
+  padding: var(--sizing-24) 0rem;
+}
+
+.pdg-24 {
+  padding: var(--sizing-24);
+}
+
+.pdg-top-36 {
+  padding-top: var(--sizing-36);
+}
+
+.pdg-rgt-36 {
+  padding-right: var(--sizing-36);
+}
+
+.pdg-bot-36 {
+  padding-bottom: var(--sizing-36);
+}
+
+.pdg-lft-36 {
+  padding-left: var(--sizing-36);
+}
+
+.pdg-hrz-36 {
+  padding: 0rem var(--sizing-36);
+}
+
+.pdg-vrt-36 {
+  padding: var(--sizing-36) 0rem;
+}
+
+.pdg-36 {
+  padding: var(--sizing-36);
+}
+
+.pdx-top-4 {
+  padding-top: var(--sizing-4);
+  box-sizing: border-box;
+}
+
+.pdx-rgt-4 {
+  padding-right: var(--sizing-4);
+  box-sizing: border-box;
+}
+
+.pdx-bot-4 {
+  padding-bottom: var(--sizing-4);
+  box-sizing: border-box;
+}
+
+.pdx-lft-4 {
+  padding-left: var(--sizing-4);
+  box-sizing: border-box;
+}
+
+.pdx-hrz-4 {
+  padding: 0rem var(--sizing-4);
+  box-sizing: border-box;
+}
+
+.pdx-vrt-4 {
+  padding: var(--sizing-4) 0rem;
+  box-sizing: border-box;
+}
+
+.pdx-4 {
+  padding: var(--sizing-4);
+  box-sizing: border-box;
+}
+
+.pdx-top-8 {
+  padding-top: var(--sizing-8);
+  box-sizing: border-box;
+}
+
+.pdx-rgt-8 {
+  padding-right: var(--sizing-8);
+  box-sizing: border-box;
+}
+
+.pdx-bot-8 {
+  padding-bottom: var(--sizing-8);
+  box-sizing: border-box;
+}
+
+.pdx-lft-8 {
+  padding-left: var(--sizing-8);
+  box-sizing: border-box;
+}
+
+.pdx-hrz-8 {
+  padding: 0rem var(--sizing-8);
+  box-sizing: border-box;
+}
+
+.pdx-vrt-8 {
+  padding: var(--sizing-8) 0rem;
+  box-sizing: border-box;
+}
+
+.pdx-8 {
+  padding: var(--sizing-8);
+  box-sizing: border-box;
+}
+
+.pdx-top-12 {
+  padding-top: var(--sizing-12);
+  box-sizing: border-box;
+}
+
+.pdx-rgt-12 {
+  padding-right: var(--sizing-12);
+  box-sizing: border-box;
+}
+
+.pdx-bot-12 {
+  padding-bottom: var(--sizing-12);
+  box-sizing: border-box;
+}
+
+.pdx-lft-12 {
+  padding-left: var(--sizing-12);
+  box-sizing: border-box;
+}
+
+.pdx-hrz-12 {
+  padding: 0rem var(--sizing-12);
+  box-sizing: border-box;
+}
+
+.pdx-vrt-12 {
+  padding: var(--sizing-12) 0rem;
+  box-sizing: border-box;
+}
+
+.pdx-12 {
+  padding: var(--sizing-12);
+  box-sizing: border-box;
+}
+
+.pdx-top-16 {
+  padding-top: var(--sizing-16);
+  box-sizing: border-box;
+}
+
+.pdx-rgt-16 {
+  padding-right: var(--sizing-16);
+  box-sizing: border-box;
+}
+
+.pdx-bot-16 {
+  padding-bottom: var(--sizing-16);
+  box-sizing: border-box;
+}
+
+.pdx-lft-16 {
+  padding-left: var(--sizing-16);
+  box-sizing: border-box;
+}
+
+.pdx-hrz-16 {
+  padding: 0rem var(--sizing-16);
+  box-sizing: border-box;
+}
+
+.pdx-vrt-16 {
+  padding: var(--sizing-16) 0rem;
+  box-sizing: border-box;
+}
+
+.pdx-16 {
+  padding: var(--sizing-16);
+  box-sizing: border-box;
+}
+
+.pdx-top-24 {
+  padding-top: var(--sizing-24);
+  box-sizing: border-box;
+}
+
+.pdx-rgt-24 {
+  padding-right: var(--sizing-24);
+  box-sizing: border-box;
+}
+
+.pdx-bot-24 {
+  padding-bottom: var(--sizing-24);
+  box-sizing: border-box;
+}
+
+.pdx-lft-24 {
+  padding-left: var(--sizing-24);
+  box-sizing: border-box;
+}
+
+.pdx-hrz-24 {
+  padding: 0rem var(--sizing-24);
+  box-sizing: border-box;
+}
+
+.pdx-vrt-24 {
+  padding: var(--sizing-24) 0rem;
+  box-sizing: border-box;
+}
+
+.pdx-24 {
+  padding: var(--sizing-24);
+  box-sizing: border-box;
+}
+
+.pdx-top-36 {
+  padding-top: var(--sizing-36);
+  box-sizing: border-box;
+}
+
+.pdx-rgt-36 {
+  padding-right: var(--sizing-36);
+  box-sizing: border-box;
+}
+
+.pdx-bot-36 {
+  padding-bottom: var(--sizing-36);
+  box-sizing: border-box;
+}
+
+.pdx-lft-36 {
+  padding-left: var(--sizing-36);
+  box-sizing: border-box;
+}
+
+.pdx-hrz-36 {
+  padding: 0rem var(--sizing-36);
+  box-sizing: border-box;
+}
+
+.pdx-vrt-36 {
+  padding: var(--sizing-36) 0rem;
+  box-sizing: border-box;
+}
+
+.pdx-36 {
+  padding: var(--sizing-36);
+  box-sizing: border-box;
+}
+
+.mrg-top-4 {
+  margin-top: var(--sizing-4);
+}
+
+.mrg-rgt-4 {
+  margin-right: var(--sizing-4);
+}
+
+.mrg-bot-4 {
+  margin-bottom: var(--sizing-4);
+}
+
+.mrg-lft-4 {
+  margin-left: var(--sizing-4);
+}
+
+.mrg-hrz-4 {
+  margin: 0rem var(--sizing-4);
+}
+
+.mrg-vrt-4 {
+  margin: var(--sizing-4) 0rem;
+}
+
+.mrg-4 {
+  margin: var(--sizing-4);
+}
+
+.mrg-top-8 {
+  margin-top: var(--sizing-8);
+}
+
+.mrg-rgt-8 {
+  margin-right: var(--sizing-8);
+}
+
+.mrg-bot-8 {
+  margin-bottom: var(--sizing-8);
+}
+
+.mrg-lft-8 {
+  margin-left: var(--sizing-8);
+}
+
+.mrg-hrz-8 {
+  margin: 0rem var(--sizing-8);
+}
+
+.mrg-vrt-8 {
+  margin: var(--sizing-8) 0rem;
+}
+
+.mrg-8 {
+  margin: var(--sizing-8);
+}
+
+.mrg-top-12 {
+  margin-top: var(--sizing-12);
+}
+
+.mrg-rgt-12 {
+  margin-right: var(--sizing-12);
+}
+
+.mrg-bot-12 {
+  margin-bottom: var(--sizing-12);
+}
+
+.mrg-lft-12 {
+  margin-left: var(--sizing-12);
+}
+
+.mrg-hrz-12 {
+  margin: 0rem var(--sizing-12);
+}
+
+.mrg-vrt-12 {
+  margin: var(--sizing-12) 0rem;
+}
+
+.mrg-12 {
+  margin: var(--sizing-12);
+}
+
+.mrg-top-16 {
+  margin-top: var(--sizing-16);
+}
+
+.mrg-rgt-16 {
+  margin-right: var(--sizing-16);
+}
+
+.mrg-bot-16 {
+  margin-bottom: var(--sizing-16);
+}
+
+.mrg-lft-16 {
+  margin-left: var(--sizing-16);
+}
+
+.mrg-hrz-16 {
+  margin: 0rem var(--sizing-16);
+}
+
+.mrg-vrt-16 {
+  margin: var(--sizing-16) 0rem;
+}
+
+.mrg-16 {
+  margin: var(--sizing-16);
+}
+
+.mrg-top-24 {
+  margin-top: var(--sizing-24);
+}
+
+.mrg-rgt-24 {
+  margin-right: var(--sizing-24);
+}
+
+.mrg-bot-24 {
+  margin-bottom: var(--sizing-24);
+}
+
+.mrg-lft-24 {
+  margin-left: var(--sizing-24);
+}
+
+.mrg-hrz-24 {
+  margin: 0rem var(--sizing-24);
+}
+
+.mrg-vrt-24 {
+  margin: var(--sizing-24) 0rem;
+}
+
+.mrg-24 {
+  margin: var(--sizing-24);
+}
+
+.mrg-top-36 {
+  margin-top: var(--sizing-36);
+}
+
+.mrg-rgt-36 {
+  margin-right: var(--sizing-36);
+}
+
+.mrg-bot-36 {
+  margin-bottom: var(--sizing-36);
+}
+
+.mrg-lft-36 {
+  margin-left: var(--sizing-36);
+}
+
+.mrg-hrz-36 {
+  margin: 0rem var(--sizing-36);
+}
+
+.mrg-vrt-36 {
+  margin: var(--sizing-36) 0rem;
+}
+
+.mrg-36 {
+  margin: var(--sizing-36);
+}
+
 :root {
   --rls-avatar-font-size: var(--title-font-size);
   --rls-avatar-border-radius: var(--sizing-8);
@@ -2138,6 +2741,8 @@ h6 {
   --rls-button-label-text-transform: uppercase;
   --rls-button-content-padding: 0rem var(--sizing-8);
   --rls-button-content-radius: var(--sizing-4);
+  --rls-buttonaction-color: var(--color-theme-300);
+  --rls-buttonaction-ripple-color: var(--rls-buttonaction-color);
   --rls-buttonaction-ripple-dimension: var(--sizing-36);
   --rls-buttonaction-ripple-position: -1.125rem;
   --rls-form-footer-justify-content: end;
@@ -2242,7 +2847,6 @@ h6 {
   width: 100%;
   box-sizing: border-box;
   transition: height 160ms 0ms var(--standard-curve);
-  box-sizing: border-box;
 }
 .rls-box-field--active {
   --rls-boxfield-body-border: var(--border-1-rolster-500);
@@ -2734,7 +3338,6 @@ h6 {
     bottom: 0rem;
     width: 100%;
     max-width: 25rem;
-    min-height: 25%;
     max-height: 75%;
     padding: var(--sizing-16) var(--sizing-4);
     border-radius: var(--sizing-8) var(--sizing-8) 0rem 0rem;
@@ -2744,6 +3347,7 @@ h6 {
   .rls-list-field__empty {
     flex-direction: column;
     margin: auto;
+    padding: var(--sizing-24) 0rem;
   }
   .rls-list-field__empty__avatar {
     width: 100%;