@rolster/styles-foundations 1.1.14 → 2.2.0

package/scss/components/_data-table.scss

@@ -1,25 +1,25 @@
 // Rolster Technology Datatable Component
-// v1.3.1
+// v2.0.0
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 14/Abr/2024
+// Updated: 26/May/2024
 
 @mixin datatable_cell_control() {
-  --rls-avatar-border-radius: var(--sizing-x3);
-  --rls-avatar-width: var(--sizing-x16);
-  --rls-avatar-height: var(--sizing-x16);
-  --rls-avatar-font-size: var(--rls-datatable-font-size);
+  --rlc-avatar-border-radius: var(--rls-sizing-x3);
+  --rlc-avatar-width: var(--rls-sizing-x16);
+  --rlc-avatar-height: var(--rls-sizing-x16);
+  --rlc-avatar-font-size: var(--rlc-datatable-font-size);
 
-  --rls-action-ripple-dimension: var(--sizing-x16);
-  --rls-action-ripple-position: -8rem;
+  --rlc-action-ripple-dimension: var(--rls-sizing-x16);
+  --rlc-action-ripple-position: -8rem;
 
-  --rls-switch-element-size: var(--sizing-x10);
-  --rls-switch-bar-radius: var(--sizing-x2);
-  --rls-switch-bar-height: var(--sizing-x4);
+  --rlc-switch-element-size: var(--rls-sizing-x10);
+  --rlc-switch-bar-radius: var(--rls-sizing-x2);
+  --rlc-switch-bar-height: var(--rls-sizing-x4);
 
   display: flex;
-  width: var(--sizing-x24);
+  width: var(--rls-sizing-x24);
   padding: 0rem;
 
   & > * {
@@ -28,46 +28,47 @@
 }
 
 .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(--rls-datatable-padding-scroll);
+  --pvt-header-padding-right: var(--rlc-datatable-padding-scroll);
+
+  --rls-input-font-size: var(--rlc-datatable-font-size);
+  --rls-input-letter-spacing: var(--rlc-datatable-letter-spacing);
 
   position: relative;
   display: flex;
   width: 100%;
   flex-direction: column;
-  row-gap: var(--sizing-x6);
-  border-radius: var(--sizing-x4);
+  row-gap: var(--rls-sizing-x6);
+  border-radius: var(--rls-sizing-x4);
   box-sizing: border-box;
 
   &--scrolleable {
     --pvt-header-padding-right: calc(
-      var(--rls-datatable-padding-scroll) + var(--rls-datatable-width-scroll)
+      var(--rlc-datatable-padding-scroll) + var(--rlc-datatable-width-scroll)
     );
   }
 
   & > table {
     display: flex;
     flex-direction: column;
-    row-gap: var(--sizing-x4);
+    row-gap: var(--rls-sizing-x4);
     border-spacing: 0;
     border-collapse: collapse;
   }
 
   &__thead {
     width: 100%;
-    padding-left: var(--rls-datatable-padding-scroll);
+    padding-left: var(--rlc-datatable-padding-scroll);
     padding-right: var(--pvt-header-padding-right);
     box-sizing: border-box;
   }
 
   &__header {
     display: flex;
-    column-gap: var(--sizing-x4);
-    padding: 0rem var(--sizing-x6);
+    column-gap: var(--rls-sizing-x4);
+    padding: 0rem var(--rls-sizing-x6);
     box-sizing: border-box;
-    border: var(--border-1-theme-100);
-    border-radius: var(--sizing-x4);
+    border: var(--rls-theme-border-1-100);
+    border-radius: var(--rls-sizing-x4);
   }
 
   &__title {
@@ -76,12 +77,12 @@
     text-align: left;
     overflow: hidden;
     white-space: nowrap;
-    height: var(--sizing-x20);
-    line-height: var(--sizing-x20);
-    color: var(--color-theme-500);
-    font-size: var(--rls-datatable-font-size);
-    letter-spacing: var(--rls-datatable-letter-spacing);
-    font-weight: var(--font-weight-bold);
+    height: var(--rls-sizing-x20);
+    line-height: var(--rls-sizing-x20);
+    color: var(--rls-app-color-500);
+    font-size: var(--rlc-datatable-font-size);
+    letter-spacing: var(--rlc-datatable-letter-spacing);
+    font-weight: var(--rls-font-weight-bold);
 
     &--control {
       @include datatable_cell_control();
@@ -101,13 +102,13 @@
   &__tbody {
     display: flex;
     flex-direction: column;
-    row-gap: var(--sizing-x6);
-    padding: 0rem var(--rls-datatable-padding-scroll);
+    row-gap: var(--rls-sizing-x6);
+    padding: 0rem var(--rlc-datatable-padding-scroll);
     box-sizing: border-box;
   }
 
   &__tsummary {
-    padding-left: var(--rls-datatable-padding-scroll);
+    padding-left: var(--rlc-datatable-padding-scroll);
     padding-right: var(--pvt-header-padding-right);
     box-sizing: border-box;
   }
@@ -116,16 +117,16 @@
   &__totals {
     position: relative;
     display: flex;
-    column-gap: var(--sizing-x4);
-    padding: 0rem var(--sizing-x6);
+    column-gap: var(--rls-sizing-x4);
+    padding: 0rem var(--rls-sizing-x6);
     box-sizing: border-box;
-    border: var(--border-1-theme-100);
-    border-radius: var(--sizing-x4);
+    border: var(--rls-theme-border-1-100);
+    border-radius: var(--rls-sizing-x4);
     background: rgba(252, 252, 252, 1);
 
     &--error {
-      background: var(--color-danger-100);
-      border: var(--border-1-danger-300);
+      background: var(--rls-danger-color-100);
+      border: var(--rls-border-1-danger-300);
     }
   }
 
@@ -133,16 +134,16 @@
   &__info {
     position: relative;
     display: flex;
-    height: var(--sizing-x20);
-    line-height: var(--sizing-x20);
+    height: var(--rls-sizing-x20);
+    line-height: var(--rls-sizing-x20);
     text-align: left;
     cursor: default;
     overflow: hidden;
     white-space: nowrap;
-    color: var(--rls-input-font-color);
-    font-size: var(--rls-datatable-font-size);
-    letter-spacing: var(--rls-datatable-letter-spacing);
-    font-weight: var(--font-weight-regular);
+    color: var(--rlc-input-font-color);
+    font-size: var(--rlc-datatable-font-size);
+    letter-spacing: var(--rlc-datatable-letter-spacing);
+    font-weight: var(--rls-font-weight-regular);
 
     &--overflow {
       overflow: initial;
@@ -183,89 +184,89 @@
 
       .rls-input-number,
       .rls-input-text {
-        --rls-input-parent-padding: 0rem;
+        --rlc-input-parent-padding: 0rem;
       }
     }
 
     .rls-list-field {
       .rls-box-field__body {
-        padding: var(--sizing-x4) 0rem;
+        padding: var(--rls-sizing-x4) 0rem;
         border: none;
         box-shadow: none;
       }
 
       &__control {
-        font-size: var(--rls-datatable-font-size);
-        font-weight: var(--font-weight-medium);
-        letter-spacing: var(--body-letter-spacing);
+        font-size: var(--rlc-datatable-font-size);
+        font-weight: var(--rls-font-weight-medium);
+        letter-spacing: var(--rls-body-letter-spacing);
       }
 
       &__suggestions {
-        top: var(--sizing-x24);
+        top: var(--rls-sizing-x24);
 
         &--higher {
           top: initial;
-          bottom: var(--sizing-x24);
+          bottom: var(--rls-sizing-x24);
         }
       }
 
       &__action {
         .rls-icon {
-          font-size: var(--sizing-x10);
+          font-size: var(--rls-sizing-x10);
         }
       }
     }
 
     .rls-input {
-      margin: var(--sizing-x4) 0rem;
+      margin: var(--rls-sizing-x4) 0rem;
     }
 
     .rls-amount {
-      font-size: var(--rls-datatable-font-size);
+      font-size: var(--rlc-datatable-font-size);
       width: 100%;
     }
 
     .rls-poster {
       display: flex;
-      width: calc(100% - var(--sizing-x2));
+      width: calc(100% - var(--rls-sizing-x2));
       height: 100%;
-      margin: var(--sizing-x3) var(--sizing-x2);
+      margin: var(--rls-sizing-x3) var(--rls-sizing-x2);
       justify-content: center;
       align-items: center;
       overflow: hidden;
-      height: var(--sizing-x14);
-      line-height: var(--sizing-x14);
+      height: var(--rls-sizing-x14);
+      line-height: var(--rls-sizing-x14);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      background: var(--color-rolster-100);
-      color: var(--color-rolster-500);
+      background: var(--rls-theme-color-100);
+      color: var(--rls-theme-color-500);
     }
 
     & > .rls-ballot {
       padding: 0rem;
-      height: var(--sizing-x20);
+      height: var(--rls-sizing-x20);
 
       .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);
+        font-weight: var(--rls-font-weight-semibold);
+        font-size: var(--rls-smalltext-font-size);
+        letter-spacing: var(--rls-smalltext-letter-spacing);
+        min-height: var(--rls-sizing-x8);
+        line-height: var(--rls-sizing-x8);
       }
 
       .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);
+        font-size: var(--rls-overline-font-size);
+        letter-spacing: var(--rls-overline-letter-spacing);
+        min-height: var(--rls-sizing-x8);
+        line-height: var(--rls-sizing-x8);
       }
     }
 
     & > a {
       &:hover {
-        color: var(--color-theme-700);
+        color: var(--rls-app-color-700);
         text-decoration: underline;
       }
     }
@@ -275,7 +276,7 @@
     position: relative;
     width: 100%;
     overflow: hidden;
-    background: var(--color-theme-100);
-    border-radius: 0rem 0rem var(--sizing-x4) var(--sizing-x4);
+    background: var(--rls-app-color-100);
+    border-radius: 0rem 0rem var(--rls-sizing-x4) var(--rls-sizing-x4);
   }
 }

package/scss/components/_form.scss

@@ -1,27 +1,27 @@
 // Rolster Technology Form Component
-// v1.0.2
+// v2.0.0
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 17/Nov/2023
+// Updated: 26/May/2024
 
 .rls-form {
   display: flex;
   flex-direction: column;
-  row-gap: var(--sizing-x8);
+  row-gap: var(--rls-sizing-x8);
 
   &__content {
     position: relative;
-    padding: 0rem var(--sizing-x8);
+    padding: 0rem var(--rls-sizing-x8);
     box-sizing: border-box;
   }
 
   &__footer {
     position: relative;
     display: flex;
-    justify-content: var(--rls-form-footer-justify-content);
-    column-gap: var(--sizing-x8);
-    padding: 0rem var(--sizing-x8);
+    justify-content: var(--rlc-form-footer-justify-content);
+    column-gap: var(--rls-sizing-x8);
+    padding: 0rem var(--rls-sizing-x8);
     box-sizing: border-box;
   }
 }

package/scss/components/_list-field.scss

@@ -1,14 +1,12 @@
 // Rolster Technology ListField Component
-// v1.1.7
+// v1.2.0
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 27/Ene/2024
+// Updated: 31/May/2024
 
 .rls-list-field {
-  --rls-boxfield-body-padding: var(--sizing-x3) var(--sizing-x4);
-
-  --pvt-action-font-color: var(--color-theme-300);
+  --pvt-action-font-color: var(--rls-app-color-300);
   --pvt-list-height: 0rem;
   --pvt-list-max-height: 160rem;
   --pvt-list-opacity: 0;
@@ -17,41 +15,43 @@
   --pvt-backdrop-opacity: 0;
   --pvt-backdrop-bottom: initial;
 
+  --rlc-boxfield-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+
   position: relative;
   box-sizing: border-box;
 
   &.rls-box-field--active {
-    --rls-boxfield-body-shadow: 0px 0px 0px 3px var(--box-shadow-theme-100);
-    --rls-boxfield-body-border: var(--border-1-theme-300);
-    --rls-boxfield-label-font-color: var(--color-theme-300);
+    --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-box-field--disabled {
-    --pvt-action-font-color: var(--color-theme-100);
+    --pvt-action-font-color: var(--rls-app-color-100);
   }
 
   &__control {
     position: relative;
-    width: calc(100% - var(--sizing-x14));
-    height: var(--sizing-x12);
-    line-height: var(--sizing-x12);
+    width: calc(100% - var(--rls-sizing-x14));
+    height: var(--rls-sizing-x12);
+    line-height: var(--rls-sizing-x12);
     padding: 0rem;
     cursor: text;
     border: none;
     outline: none;
     background: transparent;
-    color: var(--rls-input-font-color);
+    color: var(--rlc-input-font-color);
     font-size: var(--rls-input-font-size);
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--rls-font-weight-medium);
     letter-spacing: var(--rls-input-letter-spacing);
 
     &::placeholder {
-      color: var(--color-theme-100);
+      color: var(--rls-app-color-100);
     }
 
     &::selection {
-      background: var(--color-rolster-700);
-      color: var(--color-light-500);
+      background: var(--rls-theme-color-700);
+      color: var(--rls-light-color-500);
     }
 
     &:disabled {
@@ -60,31 +60,30 @@
 
     &__placeholder {
       position: relative;
-      float: left;
-      color: var(--color-theme-100);
+      color: var(--rls-app-color-100);
     }
   }
 
   &__action {
     color: var(--pvt-action-font-color);
-    width: var(--sizing-x12);
-    height: var(--sizing-x12);
+    width: var(--rls-sizing-x12);
+    height: var(--rls-sizing-x12);
     padding: 0rem;
-    margin-left: var(--sizing-x2);
+    margin-left: var(--rls-sizing-x2);
     outline: none;
     background: transparent;
   }
 
   &__suggestions {
     position: absolute;
-    top: calc(100% + var(--sizing-x4));
+    top: calc(100% + var(--rls-sizing-x4));
     left: 0rem;
     width: 100%;
     height: 0rem;
     max-height: var(--pvt-list-max-height);
     overflow: hidden;
-    z-index: var(--z-index-2);
-    padding-bottom: var(--sizing-x6);
+    z-index: var(--rls-z-index-2);
+    padding-bottom: var(--rls-sizing-x6);
 
     &--visible {
       --pvt-list-height: auto;
@@ -94,7 +93,7 @@
       overflow: initial;
       opacity: 1;
       height: auto;
-      z-index: var(--z-index-4);
+      z-index: var(--rls-z-index-4);
     }
 
     &--higher {
@@ -110,21 +109,21 @@
       width: 100%;
       height: var(--pvt-list-height);
       max-height: var(--pvt-list-max-height);
-      padding: var(--sizing-x4) var(--sizing-x2);
+      padding: var(--rls-sizing-x4) var(--rls-sizing-x2);
       box-sizing: border-box;
-      border-radius: var(--sizing-x4);
+      border-radius: var(--rls-sizing-x4);
       overflow: hidden;
-      z-index: var(--z-index-2);
-      background: var(--background-theme-500);
-      border: var(--border-1-rolster-500);
-      box-shadow: 0px 0px 0px 3px var(--box-shadow-rolster-500);
+      z-index: var(--rls-z-index-2);
+      background: var(--rls-app-background-500);
+      border: var(--rls-theme-border-1-500);
+      box-shadow: 0px 0px 0px 3px var(--rls-theme-shadow-500);
       will-change: opacity, transform;
       opacity: var(--pvt-list-opacity);
       transform: var(--pvt-list-transform);
       transform-origin: var(--pvt-list-transform-origin);
       transition:
-        opacity 240ms 0ms var(--standard-curve),
-        transform 240ms 0ms var(--standard-curve);
+        opacity 240ms 0ms var(--rls-standard-curve),
+        transform 240ms 0ms var(--rls-standard-curve);
     }
   }
 
@@ -134,38 +133,38 @@
     width: 100%;
     overflow-y: auto;
     overflow-x: hidden;
-    padding: 0rem var(--sizing-x4);
+    padding: 0rem var(--rls-sizing-x4);
     box-sizing: border-box;
   }
 
   &__element {
-    --rls-ballot-subtitle-overflow: hidden;
-    --rls-ballot-subtitle-text-overflow: ellipsis;
-    --rls-ballot-subtitle-white-space: nowrap;
+    --rlc-ballot-subtitle-overflow: hidden;
+    --rlc-ballot-subtitle-text-overflow: ellipsis;
+    --rlc-ballot-subtitle-white-space: nowrap;
 
     box-sizing: border-box;
     outline: none;
-    border-radius: var(--sizing-x4);
-    padding: var(--sizing-x2);
+    border-radius: var(--rls-sizing-x4);
+    padding: var(--rls-sizing-x2);
     box-sizing: border-box;
 
     &:hover {
-      background: var(--background-theme-300);
+      background: var(--rls-app-background-300);
     }
 
     &:not(:hover):focus {
-      background: var(--color-rolster-100);
+      background: var(--rls-theme-color-100);
     }
   }
 
   &__empty {
     display: flex;
-    padding: 0rem var(--sizing-x4);
+    padding: 0rem var(--rls-sizing-x4);
     box-sizing: border-box;
 
     &__avatar {
-      width: var(--sizing-x20);
-      height: var(--sizing-x20);
+      width: var(--rls-sizing-x20);
+      height: var(--rls-sizing-x20);
 
       img {
         width: 100%;
@@ -175,18 +174,18 @@
     &__description {
       display: flex;
       flex-direction: column;
-      row-gap: var(--sizing-x2);
+      row-gap: var(--rls-sizing-x2);
       overflow: hidden;
 
       label {
         display: block;
         width: 100%;
-        color: var(--color-theme-300);
+        color: var(--rls-app-color-300);
       }
 
       p {
         white-space: initial;
-        color: var(--color-theme-300);
+        color: var(--rls-app-color-300);
       }
     }
   }
@@ -199,13 +198,13 @@
     right: 0rem;
     bottom: var(--pvt-backdrop-bottom);
     opacity: var(--pvt-backdrop-opacity);
-    z-index: var(--z-index-2);
+    z-index: var(--rls-z-index-2);
     will-change: opacity;
-    background: var(--backdrop-rolster-500);
+    background: var(--rls-theme-backdrop-900);
     backdrop-filter: blur(2px);
     transition:
-      opacity 120ms 0ms var(--deceleration-curve),
-      bottom 120ms 0ms var(--deceleration-curve);
+      opacity 120ms 0ms var(--rls-deceleration-curve),
+      bottom 120ms 0ms var(--rls-deceleration-curve);
   }
 }
 
@@ -216,54 +215,54 @@
     --pvt-list-max-height: initial;
 
     &__suggestions {
+      position: fixed;
       display: flex;
       justify-content: center;
+      top: 0rem;
+      left: 0rem;
+      z-index: var(--rls-z-index-32);
 
       &--visible {
         --pvt-list-transform: translateY(0%);
         --pvt-backdrop-opacity: 1;
         --pvt-backdrop-bottom: 0rem;
 
-        position: fixed;
-        top: 0rem;
-        left: 0rem;
         height: 100%;
-        z-index: var(--z-index-32);
+      }
+
+      &__body {
+        position: absolute;
+        bottom: 0px;
+        border: none;
+        z-index: var(--rls-z-index-4);
       }
     }
 
     &__ul {
-      position: absolute;
-      bottom: 0rem;
-      width: 100%;
       max-width: 200rem;
       max-height: 75%;
-      padding: var(--sizing-x8) var(--sizing-x2);
-      border-radius: var(--sizing-x4) var(--sizing-x4) 0rem 0rem;
+      padding: var(--rls-sizing-x8) var(--rls-sizing-x2);
+      border-radius: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem 0rem;
       border: none;
       box-shadow: none;
     }
 
     &__empty {
       flex-direction: column;
-      margin: auto;
-      padding: var(--sizing-x12) 0rem;
+      padding: var(--rls-sizing-x12) var(--rls-sizing-x2);
 
       &__avatar {
         width: 100%;
         height: auto;
-        max-width: var(--sizing-x8);
+        max-width: var(--rls-sizing-x8);
         margin: auto;
-        padding-bottom: var(--sizing-x6);
+        padding-bottom: var(--rls-sizing-x6);
       }
 
       &__description {
-        width: 100%;
-        padding-left: 0rem;
-
-        label {
+        label,
+        p {
           text-align: center;
-          margin-top: var(--sizing-x2);
         }
       }
     }

package/scss/foundations/_animations.foundation.scss

@@ -0,0 +1,16 @@
+// Rolster Technology Animations Foundations
+// v2.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 20/Mar/2018
+// Updated: 26/May/2024
+
+:root {
+  --rls-standard-curve: cubic-bezier(0.4, 0, 0.2, 1);
+
+  --rls-deceleration-curve: cubic-bezier(0, 0, 0.2, 1);
+
+  --rls-acceleration-curve: cubic-bezier(0.4, 0, 1, 1);
+
+  --rls-sharp-curve: cubic-bezier(0.4, 0, 0.6, 1);
+}