@rolster/styles-foundations 1.1.10 → 1.1.12

package/dist/rolster-styles.css

@@ -39,80 +39,81 @@
     rgb(33, 122, 214) 0%,
     rgb(17, 75, 147) 100%
   );
-  --color-success-900: rgba(16, 81, 70, 1);
-  --color-success-700: rgba(10, 123, 104, 1);
-  --color-success-500: rgba(12, 192, 157, 1);
-  --color-success-300: rgba(87, 241, 204, 1);
-  --color-success-100: rgba(202, 253, 238, 1);
-  --skeleton-success-500: rgba(10, 123, 104, 0.5);
-  --skeleton-success-300: rgba(10, 123, 104, 0.25);
-  --skeleton-success-100: rgba(10, 123, 104, 0.1);
-  --box-shadow-success-500: rgba(12, 192, 157, 0.24);
-  --backdrop-success-500: rgba(16, 81, 70, 0.8);
+  --color-success-900: rgba(4, 80, 56, 1);
+  --color-success-700: rgba(0, 124, 82, 1);
+  --color-success-500: rgba(10, 191, 121, 1);
+  --color-success-300: rgba(106, 235, 177, 1);
+  --color-success-100: rgba(208, 251, 227, 1);
+  --skeleton-success-500: rgba(0, 124, 82, 0.5);
+  --skeleton-success-300: rgba(0, 124, 82, 0.25);
+  --skeleton-success-100: rgba(0, 124, 82, 0.1);
+  --box-shadow-success-500: rgba(10, 191, 121, 0.24);
+  --backdrop-success-500: rgba(4, 80, 56, 0.8);
   --gradient-success-500: linear-gradient(
     180deg,
-    rgb(12, 192, 157) 0%,
-    rgb(10, 123, 104) 100%
+    rgb(10, 191, 121) 0%,
+    rgb(0, 124, 82) 100%
   );
-  --color-info-900: rgba(10, 77, 112, 1);
-  --color-info-700: rgba(0, 110, 164, 1);
-  --color-info-500: rgba(24, 182, 246, 1);
-  --color-info-300: rgba(122, 215, 255, 1);
-  --color-info-100: rgba(218, 243, 253, 1);
-  --skeleton-info-500: rgba(0, 110, 164, 0.5);
-  --skeleton-info-300: rgba(0, 110, 164, 0.25);
-  --skeleton-info-100: rgba(0, 110, 164, 0.1);
-  --box-shadow-info-500: rgba(24, 182, 246, 0.24);
-  --backdrop-info-500: rgba(10, 77, 112, 0.8);
+  --color-info-900: rgba(7, 70, 115, 1);
+  --color-info-700: rgba(0, 100, 170, 1);
+  --color-info-500: rgba(2, 159, 245, 1);
+  --color-info-300: rgba(118, 207, 255, 1);
+  --color-info-100: rgba(222, 241, 255, 1);
+  --skeleton-info-500: rgba(0, 100, 170, 0.5);
+  --skeleton-info-300: rgba(0, 100, 170, 0.25);
+  --skeleton-info-100: rgba(0, 100, 170, 0.1);
+  --box-shadow-info-500: rgba(2, 159, 245, 0.24);
+  --backdrop-info-500: rgba(7, 70, 115, 0.8);
   --gradient-info-500: linear-gradient(
     180deg,
-    rgb(24, 182, 246) 0%,
-    rgb(0, 110, 164) 100%
+    rgb(2, 159, 245) 0%,
+    rgb(0, 100, 170) 100%
   );
-  --color-happy-900: rgb(63, 3, 104, 1);
-  --color-happy-700: rgb(113, 27, 174, 1);
-  --color-happy-500: rgba(154, 43, 242, 1);
-  --color-happy-300: rgb(197, 127, 255, 1);
-  --color-happy-100: rgb(243, 219, 238, 1);
-  --skeleton-happy-500: rgba(113, 27, 174, 0.5);
-  --skeleton-happy-300: rgba(113, 27, 174, 0.25);
-  --skeleton-happy-100: rgba(113, 27, 174, 0.1);
-  --box-shadow-happy-500: rgba(154, 43, 242, 0.24);
-  --backdrop-happy-500: rgba(63, 3, 104, 0.8);
+  --color-happy-900: rgb(63, 19, 63, 1);
+  --color-happy-700: rgb(142, 58, 145, 1);
+  --color-happy-500: rgba(170, 73, 176, 1);
+  --color-happy-300: rgba(217, 147, 223, 1);
+  --color-happy-100: rgba(240, 217, 245, 1);
+  --skeleton-happy-500: rgba(142, 58, 145, 0.5);
+  --skeleton-happy-300: rgba(142, 58, 145, 0.25);
+  --skeleton-happy-100: rgba(142, 58, 145, 0.1);
+  --box-shadow-happy-500: rgba(170, 73, 176, 0.24);
+  --backdrop-happy-500: rgba(63, 19, 63, 0.8);
   --gradient-happy-500: linear-gradient(
     180deg,
-    rgb(154, 43, 242) 0%,
-    rgb(113, 27, 174) 100%
+    rgb(170, 73, 176) 0%,
+    rgb(142, 58, 145) 100%
   );
-  --color-warning-900: rgb(70, 27, 2, 1);
-  --color-warning-700: rgba(164, 96, 4, 1);
-  --color-warning-500: rgb(239, 178, 3, 1);
-  --color-warning-300: rgb(255, 196, 28, 1);
-  --color-warning-100: rgb(255, 249, 194, 1);
-  --skeleton-warning-500: rgba(164, 96, 4, 0.5);
-  --skeleton-warning-300: rgba(164, 96, 4, 0.25);
-  --skeleton-warning-100: rgba(164, 96, 4, 0.1);
-  --box-shadow-warning-500: rgba(239, 178, 3, 0.24);
-  --backdrop-warning-500: rgba(70, 27, 2, 0.8);
+  --color-warning-900: rgb(116, 68, 15, 1);
+  --color-warning-700: rgba(166, 107, 2, 1);
+  --color-warning-500: rgb(255, 206, 0, 1);
+  --color-warning-300: rgba(255, 238, 65, 1);
+  --color-warning-100: rgba(255, 254, 193, 1);
+  --skeleton-warning-500: rgba(166, 107, 2, 0.5);
+  --skeleton-warning-300: rgba(166, 107, 2, 0.25);
+  --skeleton-warning-100: rgba(166, 107, 2, 0.1);
+  --box-shadow-warning-500: rgba(255, 206, 0, 0.24);
+  --backdrop-warning-500: rgba(116, 68, 15, 0.8);
   --gradient-warning-500: linear-gradient(
     180deg,
-    rgb(239, 178, 3) 0%,
-    rgb(164, 96, 4) 100%
+    rgb(255, 206, 0) 0%,
+    rgb(166, 107, 2) 100%
   );
-  --color-danger-900: rgba(130, 26, 26, 1);
-  --color-danger-700: rgba(190, 23, 23, 1);
-  --color-danger-500: rgba(244, 60, 60, 1);
-  --color-danger-300: rgba(255, 162, 162, 1);
-  --color-danger-100: rgba(254, 242, 242, 1);
-  --skeleton-danger-500: rgba(190, 23, 23, 0.5);
-  --skeleton-danger-300: rgba(190, 23, 23, 0.25);
-  --skeleton-danger-100: rgba(190, 23, 23, 0.1);
-  --box-shadow-danger-500: rgba(244, 60, 60, 0.24);
-  --backdrop-danger-500: rgba(130, 26, 26, 0.8);
+  color: #881414;
+  --color-danger-900: rgba(136, 20, 20, 1);
+  --color-danger-700: rgba(200, 13, 13, 1);
+  --color-danger-500: rgba(255, 44, 44, 1);
+  --color-danger-300: rgba(255, 157, 157, 1);
+  --color-danger-100: rgba(255, 223, 223, 1);
+  --skeleton-danger-500: rgba(200, 13, 13, 0.5);
+  --skeleton-danger-300: rgba(200, 13, 13, 0.25);
+  --skeleton-danger-100: rgba(200, 13, 13, 0.1);
+  --box-shadow-danger-500: rgba(255, 44, 44, 0.24);
+  --backdrop-danger-500: rgba(136, 20, 20, 0.8);
   --gradient-danger-500: linear-gradient(
     180deg,
-    rgb(244, 60, 60) 0%,
-    rgb(190, 23, 23) 100%
+    rgb(255, 44, 44) 0%,
+    rgb(200, 13, 13) 100%
   );
   --color-coffee-900: rgba(93, 57, 49, 1);
   --color-coffee-700: rgba(140, 83, 66, 1);
@@ -3722,6 +3723,7 @@ button {
   --rls-card-content-padding: var(--sizing-x8);
   --rls-datatable-letter-spacing: 0.0625em;
   --rls-datatable-font-size: 7rem;
+  --rls-datatable-width-scroll: var(--sizing-x12);
   --rls-form-footer-justify-content: end;
   --rls-icon-font-size: var(--sizing-x12);
   --rls-icon-width: var(--sizing-x12);
@@ -3913,11 +3915,15 @@ button {
 .rls-datatable {
   --rls-input-font-size: var(--rls-datatable-font-size);
   --rls-input-letter-spacing: var(--rls-datatable-letter-spacing);
+  --pvt-header-padding-right: var(--sizing-x6);
   position: relative;
   width: 100%;
   border-radius: var(--sizing-x4);
   box-sizing: border-box;
 }
+.rls-datatable--scrolleable {
+  --pvt-header-padding-right: var(--sizing-x12);
+}
 .rls-datatable > table {
   display: flex;
   flex-direction: column;
@@ -3931,7 +3937,8 @@ button {
 .rls-datatable__header {
   display: flex;
   column-gap: var(--sizing-x4);
-  padding: 0rem var(--sizing-x6);
+  padding-left: var(--sizing-x6);
+  padding-right: var(--pvt-header-padding-right);
   box-sizing: border-box;
 }
 .rls-datatable__title {
@@ -3977,7 +3984,13 @@ button {
   flex-direction: column;
   row-gap: var(--sizing-x6);
 }
-.rls-datatable__data {
+.rls-datatable__summary {
+  padding-left: var(--sizing-x6);
+  padding-right: var(--pvt-header-padding-right);
+  box-sizing: border-box;
+}
+.rls-datatable__data,
+.rls-datatable__totals {
   position: relative;
   display: flex;
   column-gap: var(--sizing-x4);
@@ -3987,11 +4000,13 @@ button {
   border-radius: var(--sizing-x4);
   background: #fcfcfc;
 }
-.rls-datatable__data--error {
+.rls-datatable__data--error,
+.rls-datatable__totals--error {
   background: var(--color-danger-100);
   border: var(--border-1-danger-300);
 }
-.rls-datatable__cell {
+.rls-datatable__cell,
+.rls-datatable__info {
   position: relative;
   display: flex;
   height: var(--sizing-x20);
@@ -4005,10 +4020,12 @@ button {
   letter-spacing: var(--rls-datatable-letter-spacing);
   font-weight: var(--font-weight-regular);
 }
-.rls-datatable__cell--overflow {
+.rls-datatable__cell--overflow,
+.rls-datatable__info--overflow {
   overflow: initial;
 }
-.rls-datatable__cell--control {
+.rls-datatable__cell--control,
+.rls-datatable__info--control {
   --rls-avatar-border-radius: var(--sizing-x3);
   --rls-avatar-width: var(--sizing-x16);
   --rls-avatar-height: var(--sizing-x16);
@@ -4022,69 +4039,86 @@ button {
   width: var(--sizing-x24);
   padding: 0rem;
 }
-.rls-datatable__cell--control > * {
+.rls-datatable__cell--control > *,
+.rls-datatable__info--control > * {
   margin: auto;
 }
-.rls-datatable__cell > span {
+.rls-datatable__cell > span,
+.rls-datatable__info > span {
   width: 100%;
   text-overflow: ellipsis;
   overflow: hidden;
 }
-.rls-datatable__cell .rls-box-field {
+.rls-datatable__cell .rls-box-field,
+.rls-datatable__info .rls-box-field {
   width: 100%;
   padding: 0rem;
 }
-.rls-datatable__cell .rls-box-field__label {
+.rls-datatable__cell .rls-box-field__label,
+.rls-datatable__info .rls-box-field__label {
   display: none;
 }
-.rls-datatable__cell .rls-box-field__body {
+.rls-datatable__cell .rls-box-field__body,
+.rls-datatable__info .rls-box-field__body {
   background: transparent;
   border: none;
   padding: 0rem;
   box-shadow: none;
 }
-.rls-datatable__cell .rls-box-field__icon {
+.rls-datatable__cell .rls-box-field__icon,
+.rls-datatable__info .rls-box-field__icon {
   padding: 0rem;
 }
-.rls-datatable__cell .rls-box-field__error {
+.rls-datatable__cell .rls-box-field__error,
+.rls-datatable__info .rls-box-field__error {
   display: none;
 }
 .rls-datatable__cell .rls-box-field .rls-input-number,
-.rls-datatable__cell .rls-box-field .rls-input-text {
+.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-input-parent-padding: 0rem;
 }
-.rls-datatable__cell .rls-list-field .rls-box-field__body {
+.rls-datatable__cell .rls-list-field .rls-box-field__body,
+.rls-datatable__info .rls-list-field .rls-box-field__body {
   padding: var(--sizing-x4) 0rem;
   border: none;
   box-shadow: none;
 }
-.rls-datatable__cell .rls-list-field__control {
+.rls-datatable__cell .rls-list-field__control,
+.rls-datatable__info .rls-list-field__control {
   font-size: var(--rls-datatable-font-size);
   font-weight: var(--font-weight-medium);
   letter-spacing: var(--body-letter-spacing);
 }
-.rls-datatable__cell .rls-list-field__suggestions {
+.rls-datatable__cell .rls-list-field__suggestions,
+.rls-datatable__info .rls-list-field__suggestions {
   top: var(--sizing-x24);
 }
-.rls-datatable__cell .rls-list-field__suggestions--higher {
+.rls-datatable__cell .rls-list-field__suggestions--higher,
+.rls-datatable__info .rls-list-field__suggestions--higher {
   top: initial;
   bottom: var(--sizing-x24);
 }
-.rls-datatable__cell .rls-list-field__action .rls-icon {
+.rls-datatable__cell .rls-list-field__action .rls-icon,
+.rls-datatable__info .rls-list-field__action .rls-icon {
   font-size: var(--sizing-x10);
 }
-.rls-datatable__cell .rls-input {
+.rls-datatable__cell .rls-input,
+.rls-datatable__info .rls-input {
   margin: var(--sizing-x4) 0rem;
 }
-.rls-datatable__cell .rls-amount {
+.rls-datatable__cell .rls-amount,
+.rls-datatable__info .rls-amount {
   font-size: var(--rls-datatable-font-size);
   width: 100%;
 }
-.rls-datatable__cell .rls-poster {
+.rls-datatable__cell .rls-poster,
+.rls-datatable__info .rls-poster {
   display: flex;
   width: calc(100% - var(--sizing-x2));
   height: 100%;
-  margin: var(--sizing-x3) 0rem;
+  margin: var(--sizing-x3) var(--sizing-x2);
   justify-content: center;
   align-items: center;
   overflow: hidden;
@@ -4096,25 +4130,29 @@ button {
   background: var(--color-rolster-100);
   color: var(--color-rolster-500);
 }
-.rls-datatable__cell > .rls-ballot {
+.rls-datatable__cell > .rls-ballot,
+.rls-datatable__info > .rls-ballot {
   padding: 0rem;
   height: var(--sizing-x20);
 }
-.rls-datatable__cell > .rls-ballot .rls-ballot__title {
+.rls-datatable__cell > .rls-ballot .rls-ballot__title,
+.rls-datatable__info > .rls-ballot .rls-ballot__title {
   font-weight: var(--font-weight-semibold);
   font-size: var(--smalltext-font-size);
   letter-spacing: var(--smalltext-letter-spacing);
   min-height: var(--sizing-x8);
   line-height: var(--sizing-x8);
 }
-.rls-datatable__cell > .rls-ballot .rls-ballot__subtitle {
+.rls-datatable__cell > .rls-ballot .rls-ballot__subtitle,
+.rls-datatable__info > .rls-ballot .rls-ballot__subtitle {
   margin-top: 0rem;
   font-size: var(--overline-font-size);
   letter-spacing: var(--overline-letter-spacing);
   min-height: var(--sizing-x8);
   line-height: var(--sizing-x8);
 }
-.rls-datatable__cell > a:hover {
+.rls-datatable__cell > a:hover,
+.rls-datatable__info > a:hover {
   color: var(--color-theme-700);
   text-decoration: underline;
 }