@rolster/styles-foundations 2.7.3 → 3.0.0

package/scss/design-system-bordered/organisms/picker-clock.scss

@@ -0,0 +1,144 @@
+// Rolster Technology PickerClock Component
+// v2.0.2
+// @license MIT
+// Author: Rolster Developers
+// Created: 20/Mar/2018
+// Updated: 04/May/2026
+
+.rls-picker-clock {
+  position: relative;
+  display: flex;
+  width: 150rem;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x8);
+  overflow: hidden;
+  user-select: none;
+  padding: var(--rlc-picker-clock-padding, 0rem);
+  box-sizing: border-box;
+  border-radius: var(--rlc-picker-clock-radius, 0rem);
+  background: var(--rlc-picker-clock-background, transparent);
+
+  &__header {
+    display: flex;
+    column-gap: var(--rls-sizing-x8);
+    padding: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem var(--rls-sizing-x4);
+    box-sizing: border-box;
+    justify-content: center;
+  }
+
+  &__title {
+    display: flex;
+    width: auto;
+    column-gap: var(--rls-sizing-x2);
+    align-items: center;
+
+    &__value {
+      text-align: center;
+      font-size: var(--rls-heading4-font-size);
+      font-weight: var(--rls-font-weight-semibold);
+      color: var(--rls-app-color-600);
+
+      &--active {
+        color: var(--rls-theme-color-500);
+      }
+
+      &:hover {
+        color: var(--rls-app-color-900);
+      }
+    }
+
+    &__separator {
+      font-size: var(--rls-title-font-size);
+      font-weight: var(--rls-font-weight-semibold);
+    }
+  }
+
+  &__zone {
+    display: flex;
+    width: auto;
+    column-gap: var(--rls-sizing-x4);
+    align-items: center;
+
+    &__value {
+      width: 18rem;
+      text-align: center;
+      padding: var(--rls-sizing-x1) var(--rls-sizing-x2);
+      border-radius: var(--rls-sizing-x2);
+      font-size: var(--rls-body-font-size);
+      font-weight: var(--rls-font-weight-semibold);
+      background: var(--rls-app-color-200);
+
+      &--active {
+        background: var(--rls-theme-gradient-500);
+        color: var(--rls-theme-color-050);
+      }
+    }
+  }
+
+  &__body {
+    display: flex;
+    justify-content: center;
+  }
+
+  &__plate {
+    width: 120rem;
+    height: 120rem;
+    border-radius: 50%;
+    border: var(--rls-app-border-2-200);
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+
+  &__canvas {
+    position: absolute;
+
+    &__line {
+      stroke: var(--rls-theme-color-500);
+      stroke-width: var(--rls-sizing-x1);
+    }
+
+    &__center {
+      fill: var(--rls-theme-color-500);
+    }
+
+    &__indicator {
+      fill: var(--rls-theme-color-300);
+    }
+
+    &__point {
+      fill: var(--rls-theme-color-050);
+    }
+  }
+
+  &__tick {
+    position: absolute;
+    width: var(--rls-sizing-x14);
+    height: var(--rls-sizing-x14);
+    line-height: var(--rls-sizing-x14);
+    text-align: center;
+    cursor: pointer;
+    font-size: var(--rls-paragraph-font-size);
+    font-weight: var(--rls-font-weight-semibold);
+  }
+
+  &__footer {
+    --rlc-button-width: 100%;
+    --rlc-button-content-padding: 0rem var(--rls-sizing-x2);
+    --rls-button-font-size: 6.75rem;
+
+    display: flex;
+    column-gap: var(--rls-sizing-x6);
+    align-items: center;
+    padding: var(--rls-sizing-x4) var(--rls-sizing-x8) var(--rls-sizing-x6)
+      var(--rls-sizing-x8);
+    overflow: hidden;
+    box-sizing: border-box;
+
+    &--today {
+      display: flex;
+      width: var(--rls-sizing-x16);
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}

package/scss/design-system-bordered/organisms/picker-date-range.scss

@@ -0,0 +1,84 @@
+// Rolster Technology PickerDateRange Component
+// v1.1.6
+// @license MIT
+// Author: Rolster Developers
+// Created: 25/May/2023
+// Updated: 28/Abr/2026
+
+.rls-picker-date-range {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 150rem;
+  row-gap: var(--rls-sizing-x4);
+  overflow: hidden;
+  border-radius: var(--rlc-picker-date-range-radius, 0rem);
+  background: var(--rlc-picker-date-range-background, transparent);
+
+  &__header {
+    --rlc-picker-selector-title-padding: var(--rls-sizing-x4);
+    --rlc-picker-selector-title-radius: var(--rls-sizing-x4);
+    --rlc-picker-selector-title-background: var(--rls-app-color-200);
+
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--rls-sizing-x4);
+    padding: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem var(--rls-sizing-x4);
+    box-sizing: border-box;
+  }
+
+  &__title {
+    height: var(--rls-sizing-x14);
+    line-height: var(--rls-sizing-x14);
+    color: var(--rls-app-color-700);
+    text-align: center;
+    cursor: default;
+    font-weight: var(--rls-font-weight-bold);
+    font-size: var(--rls-paragraph-font-size);
+
+    &:hover {
+      color: var(--rls-theme-color-500);
+    }
+  }
+
+  &__component {
+    --rlc-picker-day-range-display: none;
+    --rlc-picker-month-display: none;
+    --rlc-picker-year-display: none;
+
+    display: flex;
+    justify-content: center;
+    width: 150rem;
+    padding: 0rem var(--rls-sizing-x2);
+    box-sizing: border-box;
+
+    &--day {
+      --rlc-picker-day-range-display: flex;
+    }
+
+    &--month {
+      --rlc-picker-month-display: grid;
+    }
+
+    &--year {
+      --rlc-picker-year-display: block;
+    }
+  }
+
+  &__footer {
+    &--hidden {
+      display: none;
+    }
+  }
+
+  &__actions {
+    --rlc-button-width: 100%;
+    --rlc-button-content-padding: 0rem var(--rls-sizing-x2);
+
+    display: flex;
+    column-gap: var(--rls-sizing-x4);
+    padding: var(--rls-sizing-x6) var(--rls-sizing-x8);
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+}

package/scss/design-system-bordered/organisms/picker-date.scss

@@ -0,0 +1,86 @@
+// Rolster Technology PickerDate Component
+// v2.1.3
+// @license MIT
+// Author: Rolster Developers
+// Created: 20/Mar/2018
+// Updated: 04/May/2026
+
+.rls-picker-date {
+  position: relative;
+  display: flex;
+  width: 150rem;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x4);
+  overflow: hidden;
+  user-select: none;
+  border-radius: var(--rlc-picker-date-radius, 0rem);
+  background: var(--rlc-picker-date-background, transparent);
+
+  &__header {
+    --rlc-picker-selector-title-padding: var(--rls-sizing-x4);
+    --rlc-picker-selector-title-radius: var(--rls-sizing-x4);
+    --rlc-picker-selector-title-background: var(--rls-app-color-200);
+
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--rls-sizing-x4);
+    padding: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem var(--rls-sizing-x4);
+    box-sizing: border-box;
+  }
+
+  &__title {
+    height: var(--rls-sizing-x14);
+    line-height: var(--rls-sizing-x14);
+    color: var(--rls-app-color-700);
+    text-align: center;
+    cursor: default;
+    font-weight: var(--rls-font-weight-bold);
+    font-size: var(--rls-paragraph-font-size);
+
+    &:hover {
+      color: var(--rls-theme-color-500);
+    }
+  }
+
+  &__component {
+    --rlc-picker-day-display: none;
+    --rlc-picker-month-display: none;
+    --rlc-picker-year-display: none;
+
+    display: flex;
+    justify-content: center;
+
+    &--day {
+      --rlc-picker-day-display: flex;
+    }
+
+    &--month {
+      --rlc-picker-month-display: grid;
+    }
+
+    &--year {
+      --rlc-picker-year-display: block;
+    }
+  }
+
+  &__actions {
+    --rlc-button-width: 100%;
+    --rlc-button-content-padding: 0rem var(--rls-sizing-x2);
+    --rls-button-font-size: 6.75rem;
+
+    display: flex;
+    column-gap: var(--rls-sizing-x6);
+    align-items: center;
+    padding: var(--rls-sizing-x4) var(--rls-sizing-x8) var(--rls-sizing-x6)
+      var(--rls-sizing-x8);
+    overflow: hidden;
+    box-sizing: border-box;
+
+    &--today {
+      display: flex;
+      width: var(--rls-sizing-x16);
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}

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

@@ -0,0 +1,93 @@
+// Rolster Technology Snackbar Component
+// v1.0.9
+// @license MIT
+// Author: Rolster Developers
+// Created: 20/Mar/2018
+// Updated: 04/Dic/2025
+
+.rls-snackbar {
+  position: fixed;
+  display: flex;
+  left: var(--rlc-snackbar-left, 50%);
+  width: auto;
+  max-width: 240rem;
+  height: auto;
+  bottom: 0rem;
+  column-gap: var(--rls-sizing-x6);
+  padding: var(--rls-sizing-x6);
+  box-sizing: border-box;
+  border-radius: var(--rls-sizing-x6);
+  background: var(--rls-app-color-050);
+  border-left: var(--rls-theme-border-4-400);
+  transform: translate(-50%, calc(100% + var(--rls-sizing-x4)));
+  transition: all 160ms 0ms var(--rls-standard-curve);
+  box-shadow: var(--rls-app-shadow-center-8);
+  z-index: var(--rls-z-index-32);
+
+  &--visible {
+    transform: translate(-50%, calc(0% - var(--rls-sizing-x8)));
+  }
+
+  &__avatar {
+    --rlc-icon-color: var(--rls-theme-color-050);
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    background: var(--rls-theme-color-500);
+    width: var(--rls-sizing-x18);
+    height: var(--rls-sizing-x18);
+    border-radius: var(--rls-sizing-x4);
+
+    & + .rls-snackbar__component {
+      width: calc(100% - var(--rls-sizing-x18));
+    }
+  }
+
+  &__component {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--rls-sizing-x2);
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    column-gap: var(--rls-sizing-x4);
+
+    & > button {
+      background: transparent;
+      padding: 0rem;
+      cursor: pointer;
+      color: var(--rls-theme-color-700);
+    }
+  }
+
+  &__title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--rls-theme-color-500);
+    font-size: var(--rls-body-font-size);
+    font-weight: var(--rls-font-weight-bold);
+    letter-spacing: var(--rls-body-letter-spacing);
+  }
+
+  &__content {
+    p {
+      line-height: var(--rls-sizing-x10);
+      color: var(--rls-app-color-600);
+      font-size: var(--rls-label-font-size);
+      font-weight: var(--rls-font-weight-medium);
+      letter-spacing: var(--rls-label-letter-spacing);
+    }
+  }
+}
+
+@media only screen and (max-width: 375px) {
+  .rls-snackbar {
+    width: calc(100% - var(--rls-sizing-x12));
+  }
+}

package/scss/design-system-filled/_index.scss

@@ -0,0 +1,96 @@
+// Rolster Technology Design System Filled
+// v2.3.3
+// @license MIT
+// Author: Rolster Developers
+// Created: 23/Abr/2026
+// Updated: 23/Abr/2026
+
+@use 'sass:meta';
+
+.rls-design-system-filled {
+  @include meta.load-css('app');
+
+  @include meta.load-css('atoms/amount');
+  @include meta.load-css('atoms/area-text');
+  @include meta.load-css('atoms/avatar');
+  @include meta.load-css('atoms/badge');
+  @include meta.load-css('atoms/breadcrumb');
+  @include meta.load-css('atoms/button');
+  @include meta.load-css('atoms/button-action');
+  @include meta.load-css('atoms/button-option');
+  @include meta.load-css('atoms/check-box');
+  @include meta.load-css('atoms/icon');
+  @include meta.load-css('atoms/image');
+  @include meta.load-css('atoms/input');
+  @include meta.load-css('atoms/input-decimal');
+  @include meta.load-css('atoms/input-money');
+  @include meta.load-css('atoms/input-number');
+  @include meta.load-css('atoms/input-password');
+  @include meta.load-css('atoms/input-percentage');
+  @include meta.load-css('atoms/input-search');
+  @include meta.load-css('atoms/input-text');
+  @include meta.load-css('atoms/label');
+  @include meta.load-css('atoms/message-icon');
+  @include meta.load-css('atoms/poster');
+  @include meta.load-css('atoms/progress-bar');
+  @include meta.load-css('atoms/progress-circular');
+  @include meta.load-css('atoms/radio-button');
+  @include meta.load-css('atoms/skeleton');
+  @include meta.load-css('atoms/skeleton-text');
+  @include meta.load-css('atoms/spinner');
+  @include meta.load-css('atoms/switch');
+  @include meta.load-css('atoms/tabular-text');
+
+  @include meta.load-css('molecules/accordion');
+  @include meta.load-css('molecules/alert');
+  @include meta.load-css('molecules/ballot');
+  @include meta.load-css('molecules/button-progress');
+  @include meta.load-css('molecules/button-toggle');
+  @include meta.load-css('molecules/field-area');
+  @include meta.load-css('molecules/field-box');
+  @include meta.load-css('molecules/field-decimal');
+  @include meta.load-css('molecules/field-file');
+  @include meta.load-css('molecules/field-list');
+  @include meta.load-css('molecules/field-list-suggestions');
+  @include meta.load-css('molecules/field-money');
+  @include meta.load-css('molecules/field-number');
+  @include meta.load-css('molecules/field-password');
+  @include meta.load-css('molecules/field-percentage');
+  @include meta.load-css('molecules/field-readonly');
+  @include meta.load-css('molecules/field-text');
+  @include meta.load-css('molecules/label-check-box');
+  @include meta.load-css('molecules/label-radio-button');
+  @include meta.load-css('molecules/label-switch');
+  @include meta.load-css('molecules/message-empty');
+  @include meta.load-css('molecules/pagination');
+  @include meta.load-css('molecules/picker-day');
+  @include meta.load-css('molecules/picker-day-range');
+  @include meta.load-css('molecules/picker-month');
+  @include meta.load-css('molecules/picker-selector-title');
+  @include meta.load-css('molecules/picker-year');
+  @include meta.load-css('molecules/slider');
+  @include meta.load-css('molecules/tabs');
+  @include meta.load-css('molecules/toolbar');
+
+  @include meta.load-css('organisms/bottom-sheet');
+  @include meta.load-css('organisms/card');
+  @include meta.load-css('organisms/confirmation');
+  @include meta.load-css('organisms/data-table');
+  @include meta.load-css('organisms/dropdown');
+  @include meta.load-css('organisms/field-autocomplete');
+  @include meta.load-css('organisms/field-clock');
+  @include meta.load-css('organisms/field-date');
+  @include meta.load-css('organisms/field-date-range');
+  @include meta.load-css('organisms/field-select');
+  @include meta.load-css('organisms/form');
+  @include meta.load-css('organisms/form-navigation');
+  @include meta.load-css('organisms/image-chooser');
+  @include meta.load-css('organisms/image-editor');
+  @include meta.load-css('organisms/image-editor-modal');
+  @include meta.load-css('organisms/modal');
+  @include meta.load-css('organisms/modal-sheet');
+  @include meta.load-css('organisms/picker-clock');
+  @include meta.load-css('organisms/picker-date');
+  @include meta.load-css('organisms/picker-date-range');
+  @include meta.load-css('organisms/snackbar');
+}