@rolster/styles-foundations 2.2.3 → 2.3.0

package/scss/components/{_box-field.scss → _field-box.scss}

@@ -1,11 +1,11 @@
-// Rolster Technology BoxField Component
-// v2.0.0
+// Rolster Technology FieldBox Component
+// v2.1.0
 // @license MIT
 // Author: Rolster Developers
 // Created: 08/Sep/2022
-// Updated: 26/May/2024
+// Updated: 24/Jun/2024
 
-.rls-box-field {
+.rls-field-box {
   --pvt-label-opacity: 1;
   --pvt-body-opacity: 1;
 
@@ -18,21 +18,21 @@
   transition: height 160ms 0ms var(--rls-standard-curve);
 
   &--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);
+    --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);
   }
 
   &--error {
-    --rlc-boxfield-body-border: var(--rls-border-1) solid
+    --rlc-fieldbox-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);
+    --rlc-fieldbox-body-shadow: 0px 0px 0px 3px var(--rls-danger-shadow-500);
+    --rlc-fieldbox-label-font-color: var(--rls-danger-color-500);
   }
 
   &--disabled {
-    --rlc-boxfield-body-background: var(--rls-app-background-500);
+    --rlc-fieldbox-body-background: var(--rls-app-background-500);
     --pvt-body-opacity: 0.75;
     --pvt-label-opacity: 0.5;
   }
@@ -42,7 +42,7 @@
     width: 100%;
     padding: 0rem 5rem;
     box-sizing: border-box;
-    color: var(--rlc-boxfield-label-font-color);
+    color: var(--rlc-fieldbox-label-font-color);
     opacity: var(--pvt-label-opacity);
     overflow: hidden;
     white-space: nowrap;
@@ -64,10 +64,10 @@
     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);
+    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);
   }
 
   &__helper {

package/scss/components/{_list-field.scss → _field-list.scss}

@@ -1,11 +1,11 @@
 // Rolster Technology ListField Component
-// v1.2.0
+// v1.3.0
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 31/May/2024
+// Updated: 24/Jun/2024
 
-.rls-list-field {
+.rls-field-list {
   --pvt-action-font-color: var(--rls-app-color-300);
   --pvt-list-height: 0rem;
   --pvt-list-max-height: 160rem;
@@ -15,18 +15,18 @@
   --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-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-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-box-field--disabled {
+  &.rls-field-box--disabled {
     --pvt-action-font-color: var(--rls-app-color-100);
   }
 
@@ -209,7 +209,7 @@
 }
 
 @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;

package/scss/utilities/_normalize.utility.scss

@@ -29,7 +29,7 @@ body {
   -webkit-tap-highlight-color: transparent;
 
   &.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);
   }
 }

package/scss/utilities/_typographics.utility.scss

@@ -1,9 +1,9 @@
 // Rolster Technology Typographics Utilities
-// v2.0.0
+// v2.1.0
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 26/May/2024
+// Updated: 24/Jun/2024
 
 @mixin typographic($name, $key) {
   .rls-#{$name}-default {
@@ -34,6 +34,70 @@
   }
 }
 
+: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);