@rolster/styles-foundations 3.0.4 → 3.0.6

package/scss/design-system-bordered/molecules/tabs.scss

@@ -1,51 +1,51 @@
-// Rolster Technology Tabs Component
-// v1.0.1
-// @license MIT
-// Author: Rolster Developers
-// Created: 10/Nov/2025
-// Updated: 13/Ene/2026
-
-.rls-tabs {
-  --pvt-background: var(--rls-app-color-100);
-  --pvt-border: var(--rls-app-border-1-200);
-  --pvt-children-font-color: var(--rls-app-color-800);
-
-  display: flex;
-  background: var(--pvt-background);
-  padding: var(--rls-sizing-x2);
-  box-sizing: border-box;
-  border-radius: var(--rls-sizing-x4);
-  border: var(--pvt-border);
-
-  &__children {
-    height: var(--rls-sizing-x12);
-    line-height: var(--rls-sizing-x12);
-    border-radius: var(--rls-sizing-x4);
-    color: var(--rls-app-color-500);
-    font-size: var(--rls-smalltext-font-size);
-    font-weight: var(--rls-font-weight-medium);
-    letter-spacing: var(--rls-smalltext-letter-spacing);
-    text-align: center;
-    cursor: pointer;
-    transition: all 240ms var(--rls-standard-curve);
-
-    &--active {
-      color: var(--pvt-children-font-color);
-      font-weight: var(--rls-font-weight-bold);
-      background: var(--rls-app-color-050);
-    }
-
-    &--disabled {
-      color: var(--rls-app-color-400);
-      font-weight: var(--rls-font-weight-regular);
-      background: transparent;
-      cursor: not-allowed;
-    }
-  }
-
-  &[rls-theme] {
-    --pvt-background: var(--rls-theme-color-050);
-    --pvt-border: var(--rls-theme-border-1-200);
-    --pvt-children-font-color: var(--rls-theme-color-600);
-  }
-}
+// Rolster Technology Tabs Component
+// v1.0.1
+// @license MIT
+// Author: Rolster Developers
+// Created: 10/Nov/2025
+// Updated: 13/Ene/2026
+
+.rls-tabs {
+  --pvt-background: var(--rls-app-color-100);
+  --pvt-border: var(--rls-app-border-1-200);
+  --pvt-children-font-color: var(--rls-app-color-800);
+
+  display: flex;
+  background: var(--pvt-background);
+  padding: var(--rls-sizing-x2);
+  box-sizing: border-box;
+  border-radius: var(--rls-sizing-x4);
+  border: var(--pvt-border);
+
+  &__children {
+    height: var(--rls-sizing-x12);
+    line-height: var(--rls-sizing-x12);
+    border-radius: var(--rls-sizing-x4);
+    color: var(--rls-app-color-500);
+    font-size: var(--rls-smalltext-font-size);
+    font-weight: var(--rls-font-weight-medium);
+    letter-spacing: var(--rls-smalltext-letter-spacing);
+    text-align: center;
+    cursor: pointer;
+    transition: all 240ms var(--rls-standard-curve);
+
+    &--active {
+      color: var(--pvt-children-font-color);
+      font-weight: var(--rls-font-weight-bold);
+      background: var(--rls-app-color-050);
+    }
+
+    &--disabled {
+      color: var(--rls-app-color-400);
+      font-weight: var(--rls-font-weight-regular);
+      background: transparent;
+      cursor: not-allowed;
+    }
+  }
+
+  &[rls-theme] {
+    --pvt-background: var(--rls-theme-color-050);
+    --pvt-border: var(--rls-theme-border-1-200);
+    --pvt-children-font-color: var(--rls-theme-color-600);
+  }
+}

package/scss/design-system-bordered/molecules/toolbar.scss

@@ -1,53 +1,53 @@
-// Rolster Technology Toolbar Component
-// v1.1.1
-// @license MIT
-// Author: Rolster Developers
-// Created: 20/Mar/2018
-// Updated: 14/Nov/2025
-
-.rls-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  column-gap: var(--rls-sizing-x6);
-  height: var(--rlc-toolbar-height, var(--rls-sizing-x28));
-
-  & > * {
-    width: auto;
-  }
-
-  &__description {
-    display: flex;
-    flex-direction: column;
-    row-gap: var(--rls-sizing-x2);
-    overflow: hidden;
-
-    & > label {
-      position: relative;
-      width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
-  &__title {
-    color: var(--rls-app-color-900);
-    height: var(--rls-sizing-x12);
-    line-height: var(--rls-sizing-x12);
-    font-size: var(--rls-body-font-size);
-    letter-spacing: var(--rls-label-letter-spacing);
-    font-weight: var(--rls-font-weight-bold);
-  }
-
-  &__subtitle {
-    color: var(--rls-app-color-600);
-  }
-
-  &__actions {
-    display: flex;
-    box-sizing: border-box;
-    column-gap: var(--rls-sizing-x8);
-    align-items: center;
-  }
-}
+// Rolster Technology Toolbar Component
+// v1.1.1
+// @license MIT
+// Author: Rolster Developers
+// Created: 20/Mar/2018
+// Updated: 14/Nov/2025
+
+.rls-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  column-gap: var(--rls-sizing-x6);
+  height: var(--rlc-toolbar-height, var(--rls-sizing-x28));
+
+  & > * {
+    width: auto;
+  }
+
+  &__description {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--rls-sizing-x2);
+    overflow: hidden;
+
+    & > label {
+      position: relative;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  &__title {
+    color: var(--rls-app-color-900);
+    height: var(--rls-sizing-x12);
+    line-height: var(--rls-sizing-x12);
+    font-size: var(--rls-body-font-size);
+    letter-spacing: var(--rls-label-letter-spacing);
+    font-weight: var(--rls-font-weight-bold);
+  }
+
+  &__subtitle {
+    color: var(--rls-app-color-600);
+  }
+
+  &__actions {
+    display: flex;
+    box-sizing: border-box;
+    column-gap: var(--rls-sizing-x8);
+    align-items: center;
+  }
+}

package/scss/design-system-bordered/organisms/bottom-sheet.scss

@@ -1,108 +1,108 @@
-// Rolster Technology BottomSheet Component
-// v1.0.4
-// @license MIT
-// Author: Rolster Developers
-// Created: 03/Sep/2025
-// Updated: 08/Abr/2026
-
-.rls-bottom-sheet {
-  --pvt-component-transform: translateY(100%);
-  --pvt-component-height: 0rem;
-  --pvt-component-max-height: 75%;
-  --pvt-component-opacity: 0;
-  --pvt-component-visibility: hidden;
-  --pvt-component-transition: 320ms;
-
-  --pvt-backdrop-opacity: 0;
-  --pvt-backdrop-bottom: initial;
-
-  position: fixed;
-  display: flex;
-  top: 0rem;
-  left: 0rem;
-  width: 100%;
-  height: 100%;
-  justify-content: center;
-  z-index: var(--rls-z-index-24);
-  visibility: hidden;
-
-  &--visible {
-    --pvt-component-visibility: visible;
-    --pvt-component-height: auto;
-    --pvt-component-opacity: 1;
-    --pvt-component-transform: translateY(0);
-    --pvt-backdrop-bottom: 0rem;
-    --pvt-backdrop-opacity: 1;
-
-    visibility: visible;
-  }
-
-  &__component {
-    position: absolute;
-    display: flex;
-    bottom: 0px;
-    width: 100%;
-    max-width: 240rem;
-    max-height: var(--pvt-component-max-height);
-    flex-direction: column;
-    opacity: var(--pvt-component-opacity);
-    visibility: var(--pvt-component-visibility);
-    z-index: var(--rls-z-index-2);
-    border-radius: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem 0rem;
-    background: var(--rlc-bottom-sheet-background, var(--rls-app-color-050));
-    transform: var(--pvt-component-transform);
-    transition:
-      opacity var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
-      transform var(--pvt-component-transition) 0ms
-        var(--rls-deceleration-curve),
-      visibility var(--pvt-component-transition) 0ms
-        var(--rls-deceleration-curve);
-
-    &::before {
-      display: block;
-      content: '';
-      width: var(--rls-sizing-x24);
-      height: var(--rls-sizing-x2);
-      border-radius: var(--rls-sizing-x2);
-      background: var(--rls-app-color-300);
-      margin: var(--rls-sizing-x3) auto;
-    }
-  }
-
-  &__backdrop {
-    position: absolute;
-    display: block;
-    top: 0rem;
-    left: 0rem;
-    right: 0rem;
-    bottom: var(--pvt-backdrop-bottom);
-    opacity: var(--pvt-backdrop-opacity);
-    z-index: var(--rls-z-index-1);
-    background: var(
-      --rlc-bottom-sheet-backdrop-color,
-      var(--rls-theme-backdrop-400)
-    );
-    backdrop-filter: var(--rlc-bottom-sheet-backdrop-filter, blur(2px));
-    transition:
-      opacity 120ms 0ms var(--rls-deceleration-curve),
-      bottom 120ms 0ms var(--rls-deceleration-curve);
-  }
-}
-
-@media screen and (max-height: 960px) {
-  .rls-bottom-sheet {
-    --pvt-component-max-height: calc(100% - 32rem);
-  }
-}
-
-@media screen and (max-height: 720px) {
-  .rls-bottom-sheet {
-    --pvt-component-max-height: calc(100% - 24rem);
-  }
-}
-
-@media screen and (max-height: 560px) {
-  .rls-bottom-sheet {
-    --pvt-component-max-height: calc(100% - 16rem);
-  }
-}
+// Rolster Technology BottomSheet Component
+// v1.0.4
+// @license MIT
+// Author: Rolster Developers
+// Created: 03/Sep/2025
+// Updated: 08/Abr/2026
+
+.rls-bottom-sheet {
+  --pvt-component-transform: translateY(100%);
+  --pvt-component-height: 0rem;
+  --pvt-component-max-height: 75%;
+  --pvt-component-opacity: 0;
+  --pvt-component-visibility: hidden;
+  --pvt-component-transition: 320ms;
+
+  --pvt-backdrop-opacity: 0;
+  --pvt-backdrop-bottom: initial;
+
+  position: fixed;
+  display: flex;
+  top: 0rem;
+  left: 0rem;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  z-index: var(--rls-z-index-24);
+  visibility: hidden;
+
+  &--visible {
+    --pvt-component-visibility: visible;
+    --pvt-component-height: auto;
+    --pvt-component-opacity: 1;
+    --pvt-component-transform: translateY(0);
+    --pvt-backdrop-bottom: 0rem;
+    --pvt-backdrop-opacity: 1;
+
+    visibility: visible;
+  }
+
+  &__component {
+    position: absolute;
+    display: flex;
+    bottom: 0px;
+    width: 100%;
+    max-width: 240rem;
+    max-height: var(--pvt-component-max-height);
+    flex-direction: column;
+    opacity: var(--pvt-component-opacity);
+    visibility: var(--pvt-component-visibility);
+    z-index: var(--rls-z-index-2);
+    border-radius: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem 0rem;
+    background: var(--rlc-bottom-sheet-background, var(--rls-app-color-050));
+    transform: var(--pvt-component-transform);
+    transition:
+      opacity var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
+      transform var(--pvt-component-transition) 0ms
+        var(--rls-deceleration-curve),
+      visibility var(--pvt-component-transition) 0ms
+        var(--rls-deceleration-curve);
+
+    &::before {
+      display: block;
+      content: '';
+      width: var(--rls-sizing-x24);
+      height: var(--rls-sizing-x2);
+      border-radius: var(--rls-sizing-x2);
+      background: var(--rls-app-color-300);
+      margin: var(--rls-sizing-x3) auto;
+    }
+  }
+
+  &__backdrop {
+    position: absolute;
+    display: block;
+    top: 0rem;
+    left: 0rem;
+    right: 0rem;
+    bottom: var(--pvt-backdrop-bottom);
+    opacity: var(--pvt-backdrop-opacity);
+    z-index: var(--rls-z-index-1);
+    background: var(
+      --rlc-bottom-sheet-backdrop-color,
+      var(--rls-theme-backdrop-400)
+    );
+    backdrop-filter: var(--rlc-bottom-sheet-backdrop-filter, blur(2px));
+    transition:
+      opacity 120ms 0ms var(--rls-deceleration-curve),
+      bottom 120ms 0ms var(--rls-deceleration-curve);
+  }
+}
+
+@media screen and (max-height: 960px) {
+  .rls-bottom-sheet {
+    --pvt-component-max-height: calc(100% - 32rem);
+  }
+}
+
+@media screen and (max-height: 720px) {
+  .rls-bottom-sheet {
+    --pvt-component-max-height: calc(100% - 24rem);
+  }
+}
+
+@media screen and (max-height: 560px) {
+  .rls-bottom-sheet {
+    --pvt-component-max-height: calc(100% - 16rem);
+  }
+}

package/scss/design-system-bordered/organisms/card.scss

@@ -1,36 +1,36 @@
-// Rolster Technology Card Component
-// v1.2.3
-// @license MIT
-// Author: Rolster Developers
-// Created: 20/Mar/2018
-// Updated: 25/Nov/2025
-
-.rls-card {
-  --rlc-divider-background: var(--rls-app-color-300);
-  --pvt-background: var(--rls-app-color-050);
-  --pvt-border: var(--rlc-card-border, var(--rls-app-border-1-300));
-  --pvt-box-shadow: var(--rlc-card-box-shadow, var(--rls-app-shadow-center-6));
-
-  background: var(--pvt-background);
-  border-radius: var(--rls-sizing-x4);
-  box-shadow: var(--pvt-box-shadow);
-
-  &[rls-theme] {
-    --rlc-divider-background: var(--rls-theme-color-200);
-    --pvt-background: var(--rls-theme-color-050);
-    --pvt-border: var(--rlc-card-border, var(--rls-theme-border-1-200));
-  }
-
-  &--outline {
-    border: var(--pvt-border);
-    box-sizing: border-box;
-  }
-
-  &__content {
-    display: flex;
-    flex-direction: column;
-    row-gap: var(--rlc-card-content-gap, var(--rls-sizing-x4));
-    padding: var(--rlc-card-content-padding, var(--rls-sizing-x8));
-    box-sizing: border-box;
-  }
-}
+// Rolster Technology Card Component
+// v1.2.3
+// @license MIT
+// Author: Rolster Developers
+// Created: 20/Mar/2018
+// Updated: 25/Nov/2025
+
+.rls-card {
+  --rlc-divider-background: var(--rls-app-color-300);
+  --pvt-background: var(--rls-app-color-050);
+  --pvt-border: var(--rlc-card-border, var(--rls-app-border-1-300));
+  --pvt-box-shadow: var(--rlc-card-box-shadow, var(--rls-app-shadow-center-6));
+
+  background: var(--pvt-background);
+  border-radius: var(--rls-sizing-x4);
+  box-shadow: var(--pvt-box-shadow);
+
+  &[rls-theme] {
+    --rlc-divider-background: var(--rls-theme-color-200);
+    --pvt-background: var(--rls-theme-color-050);
+    --pvt-border: var(--rlc-card-border, var(--rls-theme-border-1-200));
+  }
+
+  &--outline {
+    border: var(--pvt-border);
+    box-sizing: border-box;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--rlc-card-content-gap, var(--rls-sizing-x4));
+    padding: var(--rlc-card-content-padding, var(--rls-sizing-x8));
+    box-sizing: border-box;
+  }
+}