@rolster/styles-foundations 2.2.2 → 2.2.4

package/dist/rolster-styles.css

@@ -3009,6 +3009,55 @@ p {
   white-space: nowrap;
 }
 
+:root {
+  --rls-app-font-size: 2px;
+  --rls-heading1-font-size: 16rem;
+  --rls-heading1-letter-spacing: 0.0234375em;
+  --rls-heading1-line-height: 18.25rem;
+  --rls-heading2-font-size: 14.45rem;
+  --rls-heading2-letter-spacing: 0.0234375em;
+  --rls-heading2-line-height: 15.45rem;
+  --rls-heading3-font-size: 13.45rem;
+  --rls-heading3-letter-spacing: 0.0234375em;
+  --rls-heading3-line-height: 14.45rem;
+  --rls-heading4-font-size: 12rem;
+  --rls-heading4-letter-spacing: 0.0234375em;
+  --rls-heading4-line-height: 13rem;
+  --rls-heading5-font-size: 11rem;
+  --rls-heading5-letter-spacing: 0.0234375em;
+  --rls-heading5-line-height: 12.65rem;
+  --rls-heading6-font-size: 10rem;
+  --rls-heading6-letter-spacing: 0.0234375em;
+  --rls-heading6-line-height: 11rem;
+  --rls-title-font-size: 9rem;
+  --rls-title-letter-spacing: 0.0546875em;
+  --rls-title-line-height: 10rem;
+  --rls-subtitle-font-size: 8.75rem;
+  --rls-subtitle-letter-spacing: 0.0546875em;
+  --rls-subtitle-line-height: 8.95rem;
+  --rls-body-font-size: 8rem;
+  --rls-body-letter-spacing: 0.03125em;
+  --rls-body-line-height: 9rem;
+  --rls-input-font-size: 7.65rem;
+  --rls-input-letter-spacing: 0.03125em;
+  --rls-input-line-height: 9rem;
+  --rls-label-font-size: 7rem;
+  --rls-label-letter-spacing: 0.03125em;
+  --rls-label-line-height: 8.25rem;
+  --rls-button-font-size: 7.125rem;
+  --rls-button-letter-spacing: 0.05725em;
+  --rls-button-line-height: 8.5rem;
+  --rls-smalltext-font-size: 6rem;
+  --rls-smalltext-letter-spacing: 0.03125em;
+  --rls-smalltext-line-height: 8.5rem;
+  --rls-caption-font-size: 5.75rem;
+  --rls-caption-letter-spacing: 0.046875em;
+  --rls-caption-line-height: 7.25rem;
+  --rls-overline-font-size: 5.35rem;
+  --rls-overline-letter-spacing: 0.0625em;
+  --rls-overline-line-height: 7.25rem;
+}
+
 h1 {
   font-size: var(--rls-heading1-font-size);
   letter-spacing: var(--rls-heading1-letter-spacing);
@@ -4018,8 +4067,10 @@ button {
 
 :root {
   --rlc-app-header-background: var(--rls-app-background-100);
-  --rlc-app-content-background: var(--rls-app-background-500);
+  --rlc-app-header-height: var(--rls-sizing-x28);
   --rlc-app-navbar-background: var(--rls-app-background-100);
+  --rlc-app-navbar-width: 160rem;
+  --rlc-app-content-background: var(--rls-app-background-500);
   --rlc-action-color: var(--rls-app-color-300);
   --rlc-action-ripple-color: var(--rlc-action-color);
   --rlc-action-ripple-dimension: var(--rls-sizing-x18);
@@ -4048,6 +4099,8 @@ button {
   --rlc-datatable-font-size: 7rem;
   --rlc-datatable-width-scroll: var(--rls-sizing-x4);
   --rlc-datatable-padding-scroll: 0rem;
+  --rlc-datatable-header-background: transparent;
+  --rlc-datatable-row-background: rgb(252, 252, 252);
   --rlc-form-footer-justify-content: end;
   --rlc-icon-font-size: var(--rls-sizing-x12);
   --rlc-icon-width: var(--rls-sizing-x12);
@@ -4097,14 +4150,14 @@ button {
   --rlc-toolbar-height: 100%;
   position: relative;
   width: 100%;
-  height: var(--rls-sizing-x28);
+  height: var(--rlc-app-header-height);
   box-sizing: border-box;
   z-index: var(--rls-z-index-8);
   background: var(--rlc-app-header-background);
 }
 .rls-app__header + .rls-app__page,
 .rls-app__header + .rls-app__content {
-  height: calc(100vh - var(--rls-sizing-x28));
+  height: calc(100vh - var(--rlc-app-header-height));
 }
 
 .rls-app__content {
@@ -4130,7 +4183,7 @@ button {
 }
 .rls-app__page__nav {
   position: relative;
-  width: 160rem;
+  width: var(--rlc-app-navbar-width);
   height: 100%;
   margin: 0rem;
   padding: 0rem;
@@ -4141,7 +4194,7 @@ button {
 }
 .rls-app__page__nav + .rls-app__page__content {
   --rlc-snackbar-left: calc(50% + 80rem);
-  width: calc(100% - 160rem);
+  width: calc(100% - var(--rlc-app-navbar-width));
 }
 .rls-app__page__content {
   display: flex;
@@ -4279,6 +4332,7 @@ button {
   column-gap: var(--rls-sizing-x4);
   padding: 0rem var(--rls-sizing-x6);
   box-sizing: border-box;
+  background: var(--rlc-datatable-header-background);
   border: var(--rls-app-border-1-100);
   border-radius: var(--rls-sizing-x4);
 }
@@ -4341,7 +4395,7 @@ button {
   box-sizing: border-box;
   border: var(--rls-app-border-1-100);
   border-radius: var(--rls-sizing-x4);
-  background: #fcfcfc;
+  background: var(--rlc-datatable-row-background);
 }
 .rls-datatable__data--error,
 .rls-datatable__totals--error {