@rolster/styles-foundations 2.2.3 → 2.3.0

package/dist/rolster-styles.css

@@ -1716,7 +1716,7 @@ body {
   -webkit-tap-highlight-color: transparent;
 }
 body.rls-app-body {
-  --rlc-boxfield-body-background: rgba(248, 248, 248, 1);
+  --rlc-fieldbox-body-background: rgba(248, 248, 248, 1);
   --rlc-app-body-background: var(--rls-app-background-300);
 }
 
@@ -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);
@@ -4036,11 +4085,11 @@ button {
   --rlc-ballot-subtitle-overflow: initial;
   --rlc-ballot-subtitle-text-overflow: initial;
   --rlc-ballot-subtitle-white-space: initial;
-  --rlc-boxfield-body-padding: 0rem;
-  --rlc-boxfield-body-background: rgba(255, 255, 255, 1);
-  --rlc-boxfield-body-border: var(--rls-app-border-1-100);
-  --rlc-boxfield-body-shadow: none;
-  --rlc-boxfield-label-font-color: var(--rls-app-color-300);
+  --rlc-fieldbox-body-padding: 0rem;
+  --rlc-fieldbox-body-background: rgba(255, 255, 255, 1);
+  --rlc-fieldbox-body-border: var(--rls-app-border-1-100);
+  --rlc-fieldbox-body-shadow: none;
+  --rlc-fieldbox-label-font-color: var(--rls-app-color-300);
   --rlc-breadcrumb-height: var(--rls-sizing-x18);
   --rlc-button-label-text-transform: uppercase;
   --rlc-button-content-padding: 0rem var(--rls-sizing-x4);
@@ -4170,83 +4219,6 @@ button {
   background-repeat: repeat-x;
 }
 
-.rls-box-field {
-  --pvt-label-opacity: 1;
-  --pvt-body-opacity: 1;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  row-gap: var(--rls-sizing-x2);
-  width: 100%;
-  box-sizing: border-box;
-  transition: height 160ms 0ms var(--rls-standard-curve);
-}
-.rls-box-field--focused {
-  --rlc-boxfield-body-background: var(--rls-app-background-500);
-  --rlc-boxfield-body-border: var(--rls-theme-border-1-500);
-  --rlc-boxfield-body-shadow: 0px 0px 0px 3px var(--rls-theme-shadow-500);
-  --rlc-boxfield-label-font-color: var(--rls-theme-color-500);
-}
-.rls-box-field--error {
-  --rlc-boxfield-body-border: var(--rls-border-1) solid
-    var(--rls-danger-color-500);
-  --rlc-boxfield-body-shadow: 0px 0px 0px 3px var(--box-shadow-danger-500);
-  --rlc-boxfield-label-font-color: var(--rls-danger-color-500);
-}
-.rls-box-field--disabled {
-  --rlc-boxfield-body-background: var(--rls-app-background-500);
-  --pvt-body-opacity: 0.75;
-  --pvt-label-opacity: 0.5;
-}
-.rls-box-field__label {
-  position: relative;
-  width: 100%;
-  padding: 0rem 5rem;
-  box-sizing: border-box;
-  color: var(--rlc-boxfield-label-font-color);
-  opacity: var(--pvt-label-opacity);
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  font-weight: var(--rls-font-weight-medium);
-  font-size: var(--rls-smalltext-font-size);
-  letter-spacing: var(--rls-smalltext-letter-spacing);
-  min-height: var(--rls-smalltext-line-height);
-  line-height: var(--rls-smalltext-line-height);
-}
-.rls-box-field__label span {
-  color: var(--rls-danger-color-500);
-}
-.rls-box-field__body {
-  display: flex;
-  box-sizing: border-box;
-  overflow: hidden;
-  opacity: var(--pvt-body-opacity);
-  border-radius: var(--rls-sizing-x2);
-  background: var(--rlc-boxfield-body-background);
-  padding: var(--rlc-boxfield-body-padding);
-  border: var(--rlc-boxfield-body-border);
-  box-shadow: var(--rlc-boxfield-body-shadow);
-}
-.rls-box-field__helper {
-  color: var(--rls-app-color-100);
-  padding: 0rem 5rem;
-  box-sizing: border-box;
-  font-weight: var(--rls-font-weight-medium);
-  font-size: var(--rls-overline-font-size);
-  letter-spacing: var(--rls-overline-letter-spacing);
-  min-height: var(--rls-overline-line-height);
-  line-height: var(--rls-overline-line-height);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.rls-box-field__error {
-  padding: 0rem var(--rls-sizing-x4);
-  box-sizing: border-box;
-  margin-top: var(--rls-sizing-x1);
-}
-
 .rls-datatable {
   --pvt-header-padding-right: var(--rlc-datatable-padding-scroll);
   --rlc-input-font-size: var(--rlc-datatable-font-size);
@@ -4397,59 +4369,59 @@ button {
   text-overflow: ellipsis;
   overflow: hidden;
 }
-.rls-datatable__cell .rls-box-field,
-.rls-datatable__info .rls-box-field {
+.rls-datatable__cell .rls-field-box,
+.rls-datatable__info .rls-field-box {
   width: 100%;
   padding: 0rem;
 }
-.rls-datatable__cell .rls-box-field__label,
-.rls-datatable__info .rls-box-field__label {
+.rls-datatable__cell .rls-field-box__label,
+.rls-datatable__info .rls-field-box__label {
   display: none;
 }
-.rls-datatable__cell .rls-box-field__body,
-.rls-datatable__info .rls-box-field__body {
+.rls-datatable__cell .rls-field-box__body,
+.rls-datatable__info .rls-field-box__body {
   background: transparent;
   border: none;
   padding: 0rem;
   box-shadow: none;
 }
-.rls-datatable__cell .rls-box-field__icon,
-.rls-datatable__info .rls-box-field__icon {
+.rls-datatable__cell .rls-field-box__icon,
+.rls-datatable__info .rls-field-box__icon {
   padding: 0rem;
 }
-.rls-datatable__cell .rls-box-field__error,
-.rls-datatable__info .rls-box-field__error {
+.rls-datatable__cell .rls-field-box__error,
+.rls-datatable__info .rls-field-box__error {
   display: none;
 }
-.rls-datatable__cell .rls-box-field .rls-input-number,
-.rls-datatable__cell .rls-box-field .rls-input-text,
-.rls-datatable__info .rls-box-field .rls-input-number,
-.rls-datatable__info .rls-box-field .rls-input-text {
+.rls-datatable__cell .rls-field-box .rls-input-number,
+.rls-datatable__cell .rls-field-box .rls-input-text,
+.rls-datatable__info .rls-field-box .rls-input-number,
+.rls-datatable__info .rls-field-box .rls-input-text {
   --rlc-input-parent-padding: 0rem;
 }
-.rls-datatable__cell .rls-list-field .rls-box-field__body,
-.rls-datatable__info .rls-list-field .rls-box-field__body {
+.rls-datatable__cell .rls-field-list .rls-field-box__body,
+.rls-datatable__info .rls-field-list .rls-field-box__body {
   padding: var(--rls-sizing-x4) 0rem;
   border: none;
   box-shadow: none;
 }
-.rls-datatable__cell .rls-list-field__control,
-.rls-datatable__info .rls-list-field__control {
+.rls-datatable__cell .rls-field-list__control,
+.rls-datatable__info .rls-field-list__control {
   font-size: var(--rlc-datatable-font-size);
   font-weight: var(--rls-font-weight-medium);
   letter-spacing: var(--rls-body-letter-spacing);
 }
-.rls-datatable__cell .rls-list-field__suggestions,
-.rls-datatable__info .rls-list-field__suggestions {
+.rls-datatable__cell .rls-field-list__suggestions,
+.rls-datatable__info .rls-field-list__suggestions {
   top: var(--rls-sizing-x24);
 }
-.rls-datatable__cell .rls-list-field__suggestions--higher,
-.rls-datatable__info .rls-list-field__suggestions--higher {
+.rls-datatable__cell .rls-field-list__suggestions--higher,
+.rls-datatable__info .rls-field-list__suggestions--higher {
   top: initial;
   bottom: var(--rls-sizing-x24);
 }
-.rls-datatable__cell .rls-list-field__action .rls-icon,
-.rls-datatable__info .rls-list-field__action .rls-icon {
+.rls-datatable__cell .rls-field-list__action .rls-icon,
+.rls-datatable__info .rls-field-list__action .rls-icon {
   font-size: var(--rls-sizing-x10);
 }
 .rls-datatable__cell .rls-input,
@@ -4512,26 +4484,84 @@ button {
   border-radius: 0rem 0rem var(--rls-sizing-x4) var(--rls-sizing-x4);
 }
 
-.rls-form {
+.rls-field-box {
+  --pvt-label-opacity: 1;
+  --pvt-body-opacity: 1;
+  position: relative;
   display: flex;
   flex-direction: column;
-  row-gap: var(--rls-sizing-x8);
+  row-gap: var(--rls-sizing-x2);
+  width: 100%;
+  box-sizing: border-box;
+  transition: height 160ms 0ms var(--rls-standard-curve);
 }
-.rls-form__content {
+.rls-field-box--focused {
+  --rlc-fieldbox-body-background: var(--rls-app-background-500);
+  --rlc-fieldbox-body-border: var(--rls-theme-border-1-500);
+  --rlc-fieldbox-body-shadow: 0px 0px 0px 3px var(--rls-theme-shadow-500);
+  --rlc-fieldbox-label-font-color: var(--rls-theme-color-500);
+}
+.rls-field-box--error {
+  --rlc-fieldbox-body-border: var(--rls-border-1) solid
+    var(--rls-danger-color-500);
+  --rlc-fieldbox-body-shadow: 0px 0px 0px 3px var(--rls-danger-shadow-500);
+  --rlc-fieldbox-label-font-color: var(--rls-danger-color-500);
+}
+.rls-field-box--disabled {
+  --rlc-fieldbox-body-background: var(--rls-app-background-500);
+  --pvt-body-opacity: 0.75;
+  --pvt-label-opacity: 0.5;
+}
+.rls-field-box__label {
   position: relative;
-  padding: 0rem var(--rls-sizing-x8);
+  width: 100%;
+  padding: 0rem 5rem;
   box-sizing: border-box;
+  color: var(--rlc-fieldbox-label-font-color);
+  opacity: var(--pvt-label-opacity);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-weight: var(--rls-font-weight-medium);
+  font-size: var(--rls-smalltext-font-size);
+  letter-spacing: var(--rls-smalltext-letter-spacing);
+  min-height: var(--rls-smalltext-line-height);
+  line-height: var(--rls-smalltext-line-height);
 }
-.rls-form__footer {
-  position: relative;
+.rls-field-box__label span {
+  color: var(--rls-danger-color-500);
+}
+.rls-field-box__body {
   display: flex;
-  justify-content: var(--rlc-form-footer-justify-content);
-  column-gap: var(--rls-sizing-x8);
-  padding: 0rem var(--rls-sizing-x8);
   box-sizing: border-box;
+  overflow: hidden;
+  opacity: var(--pvt-body-opacity);
+  border-radius: var(--rls-sizing-x2);
+  background: var(--rlc-fieldbox-body-background);
+  padding: var(--rlc-fieldbox-body-padding);
+  border: var(--rlc-fieldbox-body-border);
+  box-shadow: var(--rlc-fieldbox-body-shadow);
+}
+.rls-field-box__helper {
+  color: var(--rls-app-color-100);
+  padding: 0rem 5rem;
+  box-sizing: border-box;
+  font-weight: var(--rls-font-weight-medium);
+  font-size: var(--rls-overline-font-size);
+  letter-spacing: var(--rls-overline-letter-spacing);
+  min-height: var(--rls-overline-line-height);
+  line-height: var(--rls-overline-line-height);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rls-field-box__error {
+  padding: 0rem var(--rls-sizing-x4);
+  box-sizing: border-box;
+  margin-top: var(--rls-sizing-x1);
 }
 
-.rls-list-field {
+.rls-field-list {
   --pvt-action-font-color: var(--rls-app-color-300);
   --pvt-list-height: 0rem;
   --pvt-list-max-height: 160rem;
@@ -4540,19 +4570,19 @@ button {
   --pvt-list-transform-origin: 0% 0%;
   --pvt-backdrop-opacity: 0;
   --pvt-backdrop-bottom: initial;
-  --rlc-boxfield-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+  --rlc-fieldbox-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
   position: relative;
   box-sizing: border-box;
 }
-.rls-list-field.rls-box-field--active {
-  --rlc-boxfield-body-shadow: 0px 0px 0px 3px var(--box-shadow-theme-100);
-  --rlc-boxfield-body-border: var(--rls-theme-border-1-300);
-  --rlc-boxfield-label-font-color: var(--rls-app-color-300);
+.rls-field-list.rls-field-box--active {
+  --rlc-fieldbox-body-shadow: 0px 0px 0px 3px var(--box-shadow-theme-100);
+  --rlc-fieldbox-body-border: var(--rls-theme-border-1-300);
+  --rlc-fieldbox-label-font-color: var(--rls-app-color-300);
 }
-.rls-list-field.rls-box-field--disabled {
+.rls-field-list.rls-field-box--disabled {
   --pvt-action-font-color: var(--rls-app-color-100);
 }
-.rls-list-field__control {
+.rls-field-list__control {
   position: relative;
   width: calc(100% - var(--rls-sizing-x14));
   height: var(--rls-sizing-x12);
@@ -4567,21 +4597,21 @@ button {
   font-weight: var(--rls-font-weight-medium);
   letter-spacing: var(--rlc-input-letter-spacing);
 }
-.rls-list-field__control::placeholder {
+.rls-field-list__control::placeholder {
   color: var(--rls-app-color-100);
 }
-.rls-list-field__control::selection {
+.rls-field-list__control::selection {
   background: var(--rls-theme-color-700);
   color: var(--rls-light-color-500);
 }
-.rls-list-field__control:disabled {
+.rls-field-list__control:disabled {
   opacity: 0.5;
 }
-.rls-list-field__control__placeholder {
+.rls-field-list__control__placeholder {
   position: relative;
   color: var(--rls-app-color-100);
 }
-.rls-list-field__action {
+.rls-field-list__action {
   color: var(--pvt-action-font-color);
   width: var(--rls-sizing-x12);
   height: var(--rls-sizing-x12);
@@ -4590,7 +4620,7 @@ button {
   outline: none;
   background: transparent;
 }
-.rls-list-field__suggestions {
+.rls-field-list__suggestions {
   position: absolute;
   top: calc(100% + var(--rls-sizing-x4));
   left: 0rem;
@@ -4601,7 +4631,7 @@ button {
   z-index: var(--rls-z-index-2);
   padding-bottom: var(--rls-sizing-x6);
 }
-.rls-list-field__suggestions--visible {
+.rls-field-list__suggestions--visible {
   --pvt-list-height: auto;
   --pvt-list-opacity: 1;
   --pvt-list-transform: scale(1, 1);
@@ -4610,12 +4640,12 @@ button {
   height: auto;
   z-index: var(--rls-z-index-4);
 }
-.rls-list-field__suggestions--higher {
+.rls-field-list__suggestions--higher {
   --pvt-list-transform-origin: 0% 100%;
   top: initial;
   bottom: 100%;
 }
-.rls-list-field__suggestions__body {
+.rls-field-list__suggestions__body {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -4637,7 +4667,7 @@ button {
     opacity 240ms 0ms var(--rls-standard-curve),
     transform 240ms 0ms var(--rls-standard-curve);
 }
-.rls-list-field__ul {
+.rls-field-list__ul {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -4646,7 +4676,7 @@ button {
   padding: 0rem var(--rls-sizing-x4);
   box-sizing: border-box;
 }
-.rls-list-field__element {
+.rls-field-list__element {
   --rlc-ballot-subtitle-overflow: hidden;
   --rlc-ballot-subtitle-text-overflow: ellipsis;
   --rlc-ballot-subtitle-white-space: nowrap;
@@ -4656,40 +4686,40 @@ button {
   padding: var(--rls-sizing-x2);
   box-sizing: border-box;
 }
-.rls-list-field__element:hover {
+.rls-field-list__element:hover {
   background: var(--rls-app-background-300);
 }
-.rls-list-field__element:not(:hover):focus {
+.rls-field-list__element:not(:hover):focus {
   background: var(--rls-theme-color-100);
 }
-.rls-list-field__empty {
+.rls-field-list__empty {
   display: flex;
   padding: 0rem var(--rls-sizing-x4);
   box-sizing: border-box;
 }
-.rls-list-field__empty__avatar {
+.rls-field-list__empty__avatar {
   width: var(--rls-sizing-x20);
   height: var(--rls-sizing-x20);
 }
-.rls-list-field__empty__avatar img {
+.rls-field-list__empty__avatar img {
   width: 100%;
 }
-.rls-list-field__empty__description {
+.rls-field-list__empty__description {
   display: flex;
   flex-direction: column;
   row-gap: var(--rls-sizing-x2);
   overflow: hidden;
 }
-.rls-list-field__empty__description label {
+.rls-field-list__empty__description label {
   display: block;
   width: 100%;
   color: var(--rls-app-color-300);
 }
-.rls-list-field__empty__description p {
+.rls-field-list__empty__description p {
   white-space: initial;
   color: var(--rls-app-color-300);
 }
-.rls-list-field__backdrop {
+.rls-field-list__backdrop {
   position: absolute;
   display: block;
   top: 0rem;
@@ -4707,12 +4737,12 @@ button {
 }
 
 @media screen and (max-width: 480px) {
-  .rls-list-field {
+  .rls-field-list {
     --pvt-list-transform: translateY(100%);
     --pvt-list-transform-origin: initial;
     --pvt-list-max-height: initial;
   }
-  .rls-list-field__suggestions {
+  .rls-field-list__suggestions {
     position: fixed;
     display: flex;
     justify-content: center;
@@ -4720,19 +4750,19 @@ button {
     left: 0rem;
     z-index: var(--rls-z-index-32);
   }
-  .rls-list-field__suggestions--visible {
+  .rls-field-list__suggestions--visible {
     --pvt-list-transform: translateY(0%);
     --pvt-backdrop-opacity: 1;
     --pvt-backdrop-bottom: 0rem;
     height: 100%;
   }
-  .rls-list-field__suggestions__body {
+  .rls-field-list__suggestions__body {
     position: absolute;
     bottom: 0px;
     border: none;
     z-index: var(--rls-z-index-4);
   }
-  .rls-list-field__ul {
+  .rls-field-list__ul {
     max-width: 200rem;
     max-height: 75%;
     padding: var(--rls-sizing-x8) var(--rls-sizing-x2);
@@ -4740,23 +4770,42 @@ button {
     border: none;
     box-shadow: none;
   }
-  .rls-list-field__empty {
+  .rls-field-list__empty {
     flex-direction: column;
     padding: var(--rls-sizing-x12) var(--rls-sizing-x2);
   }
-  .rls-list-field__empty__avatar {
+  .rls-field-list__empty__avatar {
     width: 100%;
     height: auto;
     max-width: var(--rls-sizing-x8);
     margin: auto;
     padding-bottom: var(--rls-sizing-x6);
   }
-  .rls-list-field__empty__description label,
-  .rls-list-field__empty__description p {
+  .rls-field-list__empty__description label,
+  .rls-field-list__empty__description p {
     text-align: center;
   }
 }
 
+.rls-form {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x8);
+}
+.rls-form__content {
+  position: relative;
+  padding: 0rem var(--rls-sizing-x8);
+  box-sizing: border-box;
+}
+.rls-form__footer {
+  position: relative;
+  display: flex;
+  justify-content: var(--rlc-form-footer-justify-content);
+  column-gap: var(--rls-sizing-x8);
+  padding: 0rem var(--rls-sizing-x8);
+  box-sizing: border-box;
+}
+
 .rls-aspect-ratio {
   --rls-app-font-size-1360: 2.5px;
   --rls-app-font-size-1820: 2.925px;