@rolster/styles-foundations 1.1.14 → 2.0.1

package/scss/foundations/_colors.foundation.scss

@@ -0,0 +1,268 @@
+// Rolster Technology Colors Foundations
+// v2.3.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 03/Mar/2022
+// Updated: 26/May/2024
+
+:root {
+  --rls-dark-background-500: rgba(37, 38, 65, 1);
+
+  --rls-dark-background-300: rgba(52, 57, 87, 1);
+
+  --rls-dark-background-100: rgba(72, 77, 107, 1);
+
+  --rls-light-background-500: rgba(255, 255, 255, 1);
+
+  --rls-light-background-300: rgba(239, 242, 252, 1);
+
+  --rls-light-background-100: rgba(221, 223, 237, 1);
+
+  --rls-dark-color-500: rgba(40, 50, 61, 1);
+
+  --rls-dark-color-300: rgba(98, 111, 155, 1);
+
+  --rls-dark-color-100: rgba(173, 186, 212, 1);
+
+  --rls-light-color-500: rgba(255, 255, 255, 1);
+
+  --rls-light-color-300: rgba(185, 195, 231, 1);
+
+  --rls-light-color-100: rgba(128, 141, 190, 1);
+
+  --rls-dark-border-500: rgba(85, 95, 131, 1);
+
+  --rls-dark-border-300: rgba(173, 186, 230, 1);
+
+  --rls-dark-border-100: rgba(209, 214, 239, 1);
+
+  --rls-light-border-500: rgba(255, 255, 255, 1);
+
+  --rls-light-border-300: rgba(185, 195, 231, 1);
+
+  --rls-light-border-100: rgba(128, 141, 190, 1);
+
+  // COLORS STANDARD
+
+  --rls-standard-color-900: rgba(21, 56, 101, 1);
+
+  --rls-standard-color-700: rgba(17, 75, 147, 1);
+
+  --rls-standard-color-500: rgba(33, 122, 214, 1);
+
+  --rls-standard-color-300: rgba(136, 186, 241, 1);
+
+  --rls-standard-color-100: rgba(227, 236, 251, 1);
+
+  --rls-standard-skeleton-500: rgba(17, 75, 147, 0.5);
+
+  --rls-standard-skeleton-300: rgba(17, 75, 147, 0.25);
+
+  --rls-standard-skeleton-100: rgba(17, 75, 147, 0.1);
+
+  --rls-standard-shadow-500: rgba(33, 122, 214, 0.24);
+
+  --rls-standard-backdrop-500: rgba(21, 56, 101, 0.8);
+
+  --rls-standard-gradient-500: linear-gradient(
+    180deg,
+    rgb(33, 122, 214) 0%,
+    rgb(17, 75, 147) 100%
+  );
+
+  // COLORS SUCCESS
+
+  --rls-success-color-900: rgba(4, 80, 56, 1);
+
+  --rls-success-color-700: rgba(0, 124, 82, 1);
+
+  --rls-success-color-500: rgba(10, 191, 121, 1);
+
+  --rls-success-color-300: rgba(106, 235, 177, 1);
+
+  --rls-success-color-100: rgba(208, 251, 227, 1);
+
+  --rls-success-skeleton-500: rgba(0, 124, 82, 0.5);
+
+  --rls-success-skeleton-300: rgba(0, 124, 82, 0.25);
+
+  --rls-success-skeleton-100: rgba(0, 124, 82, 0.1);
+
+  --rls-success-shadow-500: rgba(10, 191, 121, 0.24);
+
+  --rls-success-backdrop-500: rgba(4, 80, 56, 0.8);
+
+  --rls-success-gradient-500: linear-gradient(
+    180deg,
+    rgb(10, 191, 121) 0%,
+    rgb(0, 124, 82) 100%
+  );
+
+  // COLORS INFO
+
+  --rls-info-color-900: rgba(7, 70, 115, 1);
+
+  --rls-info-color-700: rgba(0, 100, 170, 1);
+
+  --rls-info-color-500: rgba(2, 159, 245, 1);
+
+  --rls-info-color-300: rgba(118, 207, 255, 1);
+
+  --rls-info-color-100: rgba(222, 241, 255, 1);
+
+  --rls-info-skeleton-500: rgba(0, 100, 170, 0.5);
+
+  --rls-info-skeleton-300: rgba(0, 100, 170, 0.25);
+
+  --rls-info-skeleton-100: rgba(0, 100, 170, 0.1);
+
+  --rls-info-shadow-500: rgba(2, 159, 245, 0.24);
+
+  --rls-info-backdrop-500: rgba(7, 70, 115, 0.8);
+
+  --rls-info-gradient-500: linear-gradient(
+    180deg,
+    rgb(2, 159, 245) 0%,
+    rgb(0, 100, 170) 100%
+  );
+
+  // COLORS WARNING
+
+  --rls-warning-color-900: rgb(116, 68, 15, 1);
+
+  --rls-warning-color-700: rgba(166, 107, 2, 1);
+
+  --rls-warning-color-500: rgb(255, 206, 0, 1);
+
+  --rls-warning-color-300: rgba(255, 238, 65, 1);
+
+  --rls-warning-color-100: rgba(255, 254, 193, 1);
+
+  --rls-warning-skeleton-500: rgba(166, 107, 2, 0.5);
+
+  --rls-warning-skeleton-300: rgba(166, 107, 2, 0.25);
+
+  --rls-warning-skeleton-100: rgba(166, 107, 2, 0.1);
+
+  --rls-warning-shadow-500: rgba(255, 206, 0, 0.24);
+
+  --rls-warning-backdrop-500: rgba(116, 68, 15, 0.8);
+
+  --rls-warning-gradient-500: linear-gradient(
+    180deg,
+    rgb(255, 206, 0) 0%,
+    rgb(166, 107, 2) 100%
+  );
+
+  // COLORS DANGER
+
+  --rls-danger-color-900: rgba(136, 20, 20, 1);
+
+  --rls-danger-color-700: rgba(200, 13, 13, 1);
+
+  --rls-danger-color-500: rgba(255, 44, 44, 1);
+
+  --rls-danger-color-300: rgba(255, 157, 157, 1);
+
+  --rls-danger-color-100: rgba(255, 223, 223, 1);
+
+  --rls-danger-skeleton-500: rgba(200, 13, 13, 0.5);
+
+  --rls-danger-skeleton-300: rgba(200, 13, 13, 0.25);
+
+  --rls-danger-skeleton-100: rgba(200, 13, 13, 0.1);
+
+  --rls-danger-shadow-500: rgba(255, 44, 44, 0.24);
+
+  --rls-danger-backdrop-500: rgba(136, 20, 20, 0.8);
+
+  --rls-danger-gradient-500: linear-gradient(
+    180deg,
+    rgb(255, 44, 44) 0%,
+    rgb(200, 13, 13) 100%
+  );
+
+  // COLORS AMAIZING
+
+  --rls-amaizing-color-900: rgb(63, 19, 63, 1);
+
+  --rls-amaizing-color-700: rgb(142, 58, 145, 1);
+
+  --rls-amaizing-color-500: rgba(170, 73, 176, 1);
+
+  --rls-amaizing-color-300: rgba(217, 147, 223, 1);
+
+  --rls-amaizing-color-100: rgba(240, 217, 245, 1);
+
+  --rls-amaizing-skeleton-500: rgba(142, 58, 145, 0.5);
+
+  --rls-amaizing-skeleton-300: rgba(142, 58, 145, 0.25);
+
+  --rls-amaizing-skeleton-100: rgba(142, 58, 145, 0.1);
+
+  --rls-amaizing-shadow-500: rgba(170, 73, 176, 0.24);
+
+  --rls-amaizing-backdrop-500: rgba(63, 19, 63, 0.8);
+
+  --rls-amaizing-gradient-500: linear-gradient(
+    180deg,
+    rgb(170, 73, 176) 0%,
+    rgb(142, 58, 145) 100%
+  );
+
+  // COLORS SMARTNESS
+
+  --rls-smartness-color-900: rgba(93, 57, 49, 1);
+
+  --rls-smartness-color-700: rgba(140, 83, 66, 1);
+
+  --rls-smartness-color-500: rgba(182, 121, 89, 1);
+
+  --rls-smartness-color-300: rgba(219, 193, 172, 1);
+
+  --rls-smartness-color-100: rgb(243, 234, 225, 1);
+
+  --rls-smartness-skeleton-500: rgba(140, 83, 66, 0.5);
+
+  --rls-smartness-skeleton-300: rgba(140, 83, 66, 0.25);
+
+  --rls-smartness-skeleton-100: rgba(140, 83, 66, 0.1);
+
+  --rls-smartness-shadow-500: rgba(182, 121, 89, 0.24);
+
+  --rls-smartness-backdrop-500: rgba(93, 57, 49, 0.8);
+
+  --rls-smartness-gradient-500: linear-gradient(
+    180deg,
+    rgb(182, 121, 89) 0%,
+    rgb(140, 83, 66) 100%
+  );
+
+  // COLORS OBSIDIAN
+
+  --rls-obsidian-color-900: rgba(58, 50, 45, 1);
+
+  --rls-obsidian-color-700: rgba(97, 84, 71, 1);
+
+  --rls-obsidian-color-500: rgba(141, 127, 101, 1);
+
+  --rls-obsidian-color-300: rgb(178, 170, 146, 1);
+
+  --rls-obsidian-color-100: rgb(230, 228, 219, 1);
+
+  --rls-obsidian-skeleton-500: rgba(97, 84, 71, 0.5);
+
+  --rls-obsidian-skeleton-300: rgba(97, 84, 71, 0.25);
+
+  --rls-obsidian-skeleton-100: rgba(97, 84, 71, 0.1);
+
+  --rls-obsidian-shadow-500: rgba(141, 127, 101, 0.24);
+
+  --rls-obsidian-backdrop-500: rgba(58, 50, 45, 0.8);
+
+  --rls-obsidian-gradient-500: linear-gradient(
+    180deg,
+    rgb(141, 127, 101) 0%,
+    rgb(97, 84, 71) 100%
+  );
+}

package/scss/foundations/_elevations.foundation.scss

@@ -0,0 +1,157 @@
+// Rolster Technology Elevations Foundations
+// v2.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 20/Mar/2018
+// Updated: 26/May/2024
+
+:root {
+  --rls-z-index-2: 2;
+
+  --rls-z-index-4: 4;
+
+  --rls-z-index-6: 6;
+
+  --rls-z-index-8: 8;
+
+  --rls-z-index-12: 12;
+
+  --rls-z-index-16: 16;
+
+  --rls-z-index-24: 24;
+
+  --rls-z-index-32: 32;
+
+  --rls-app-shadow-1: 0px 4px 2px -2px rgba(50, 44, 47, 0.02);
+
+  --rls-app-shadow-2: 0px 4px 8px -2px rgba(50, 44, 47, 0.04);
+
+  --rls-app-shadow-3: 0px 2px 4px -2px rgba(50, 44, 47, 0.08);
+
+  --rls-app-shadow-4: 0px 4px 8px -6px rgba(50, 44, 47, 0.03),
+    0px 16px 8px -4px rgba(50, 44, 47, 0.03);
+
+  --rls-app-shadow-5: 0px 8px 24px -4px rgba(50, 44, 47, 0.08);
+
+  --rls-app-shadow-6: 0px 8px 24px -4px rgba(50, 44, 47, 0.12);
+
+  --rls-light-shadow-bottom-2: 0px 2px 2px rgba(173, 186, 230, 0.4);
+
+  --rls-light-shadow-bottom-4: 0px 4px 4px rgba(173, 186, 230, 0.4);
+
+  --rls-light-shadow-bottom-8: 0px 8px 8px rgba(173, 186, 230, 0.4);
+
+  --rls-light-shadow-bottom-16: 0px 16px 16px rgba(173, 186, 230, 0.4);
+
+  --rls-light-shadow-bottom-24: 0px 24px 24px rgba(173, 186, 230, 0.4);
+
+  --rls-light-shadow-bottom-32: 0px 32px 32px rgba(173, 186, 230, 0.4);
+
+  --rls-light-shadow-top-2: 0px -2px 2px rgba(173, 186, 230, 0.4);
+
+  --rls-light-shadow-top-4: 0px -4px 4px rgba(173, 186, 230, 0.4);
+
+  --rls-light-shadow-top-8: 0px -8px 8px rgba(173, 186, 230, 0.4);
+
+  --rls-light-shadow-top-16: 0px -16px 16px rgba(173, 186, 230, 0.4);
+
+  --rls-light-shadow-top-24: 0px -24px 24px rgba(173, 186, 230, 0.4);
+
+  --rls-light-shadow-top-32: 0px -32px 32px rgba(173, 186, 230, 0.4);
+
+  --rls-light-shadow-right-2: 2px 0px 2px rgba(173, 186, 230, 0.4);
+
+  --rls-light-shadow-right-4: 4px 0px 4px rgba(173, 186, 230, 0.4);
+
+  --rls-light-shadow-right-8: 8px 0px 8px rgba(173, 186, 230, 0.4);
+
+  --rls-light-shadow-right-16: 16px 0px 16px rgba(173, 186, 230, 0.4);
+
+  --rls-light-shadow-right-24: 24px 0px 24px rgba(173, 186, 230, 0.4);
+
+  --rls-light-shadow-right-32: 32px 0px 32px rgba(173, 186, 230, 0.4);
+
+  --rls-light-shadow-left-2: -2px 0px 2px rgba(173, 186, 230, 0.4);
+
+  --rls-light-shadow-left-4: -4px 0px 4px rgba(173, 186, 230, 0.4);
+
+  --rls-light-shadow-left-8: -8px 0px 8px rgba(173, 186, 230, 0.4);
+
+  --rls-light-shadow-left-16: -16px 0px 16px rgba(173, 186, 230, 0.4);
+
+  --rls-light-shadow-left-24: -24px 0px 24px rgba(173, 186, 230, 0.4);
+
+  --rls-light-shadow-left-32: -32px 0px 32px rgba(173, 186, 230, 0.4);
+
+  --rls-light-shadow-center-2: 0px 0px 2px 0px rgba(173, 186, 230, 0.4);
+
+  --rls-light-shadow-center-4: 0px 0px 4px 0px rgba(173, 186, 230, 0.4);
+
+  --rls-light-shadow-center-8: 0px 0px 8px 0px rgba(173, 186, 230, 0.4);
+
+  --rls-light-shadow-center-16: 0px 0px 16px 0px rgba(173, 186, 230, 0.4);
+
+  --rls-light-shadow-center-24: 0px 0px 24px 0px rgba(173, 186, 230, 0.4);
+
+  --rls-light-shadow-center-32: 0px 0px 32px 0px rgba(173, 186, 230, 0.4);
+
+  --rls-dark-shadow-bottom-2: 0px 2px 2px rgba(50, 44, 47, 0.4);
+
+  --rls-dark-shadow-bottom-4: 0px 4px 4px rgba(50, 44, 47, 0.4);
+
+  --rls-dark-shadow-bottom-8: 0px 8px 8px rgba(50, 44, 47, 0.4);
+
+  --rls-dark-shadow-bottom-16: 0px 16px 16px rgba(50, 44, 47, 0.4);
+
+  --rls-dark-shadow-bottom-24: 0px 24px 24px rgba(50, 44, 47, 0.4);
+
+  --rls-dark-shadow-bottom-32: 0px 32px 32px rgba(50, 44, 47, 0.4);
+
+  --rls-dark-shadow-top-2: 0px -2px 2px rgba(50, 44, 47, 0.4);
+
+  --rls-dark-shadow-top-4: 0px -4px 4px rgba(50, 44, 47, 0.4);
+
+  --rls-dark-shadow-top-8: 0px -8px 8px rgba(50, 44, 47, 0.4);
+
+  --rls-dark-shadow-top-16: 0px -16px 16px rgba(50, 44, 47, 0.4);
+
+  --rls-dark-shadow-top-24: 0px -24px 24px rgba(50, 44, 47, 0.4);
+
+  --rls-dark-shadow-top-32: 0px -32px 32px rgba(50, 44, 47, 0.4);
+
+  --rls-dark-shadow-right-2: 2px 0px 2px rgba(50, 44, 47, 0.4);
+
+  --rls-dark-shadow-right-4: 4px 0px 4px rgba(50, 44, 47, 0.4);
+
+  --rls-dark-shadow-right-8: 8px 0px 8px rgba(50, 44, 47, 0.4);
+
+  --rls-dark-shadow-right-16: 16px 0px 16px rgba(50, 44, 47, 0.4);
+
+  --rls-dark-shadow-right-24: 24px 0px 24px rgba(50, 44, 47, 0.4);
+
+  --rls-dark-shadow-right-32: 32px 0px 32px rgba(50, 44, 47, 0.4);
+
+  --rls-dark-shadow-left-2: -2px 0px 2px rgba(50, 44, 47, 0.4);
+
+  --rls-dark-shadow-left-4: -4px 0px 4px rgba(50, 44, 47, 0.4);
+
+  --rls-dark-shadow-left-8: -8px 0px 8px rgba(50, 44, 47, 0.4);
+
+  --rls-dark-shadow-left-16: -16px 0px 16px rgba(50, 44, 47, 0.4);
+
+  --rls-dark-shadow-left-24: -24px 0px 24px rgba(50, 44, 47, 0.4);
+
+  --rls-dark-shadow-left-32: -32px 0px 32px rgba(50, 44, 47, 0.4);
+
+  --rls-dark-shadow-center-2: 0px 0px 2px 0px rgba(50, 44, 47, 0.4);
+
+  --rls-dark-shadow-center-4: 0px 0px 4px 0px rgba(50, 44, 47, 0.4);
+
+  --rls-dark-shadow-center-8: 0px 0px 8px 0px rgba(50, 44, 47, 0.4);
+
+  --rls-dark-shadow-center-16: 0px 0px 16px 0px rgba(50, 44, 47, 0.4);
+
+  --rls-dark-shadow-center-24: 0px 0px 24px 0px rgba(50, 44, 47, 0.4);
+
+  --rls-dark-shadow-center-32: 0px 0px 32px 0px rgba(50, 44, 47, 0.4);
+}

package/scss/foundations/_sizings.foundation.scss

@@ -0,0 +1,74 @@
+// Rolster Technology Sizings Foundations
+// v2.1.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 20/Mar/2018
+// Updated: 26/May/2024
+
+:root {
+  --rls-sizing-x1: 1rem;
+
+  --rls-sizing-x2: 2rem;
+
+  --rls-sizing-x3: 3rem;
+
+  --rls-sizing-x4: 4rem;
+
+  --rls-sizing-x6: 6rem;
+
+  --rls-sizing-x8: 8rem;
+
+  --rls-sizing-x10: 10rem;
+
+  --rls-sizing-x12: 12rem;
+
+  --rls-sizing-x14: 14rem;
+
+  --rls-sizing-x16: 16rem;
+
+  --rls-sizing-x18: 18rem;
+
+  --rls-sizing-x20: 20rem;
+
+  --rls-sizing-x22: 22rem;
+
+  --rls-sizing-x24: 24rem;
+
+  --rls-sizing-x26: 26rem;
+
+  --rls-sizing-x28: 28rem;
+
+  --rls-sizing-x30: 30rem;
+
+  --rls-sizing-x32: 32rem;
+
+  --rls-border-1: 1px;
+
+  --rls-border-2: 2px;
+
+  --rls-border-4: 4px;
+}
+
+@supports (padding-top: constant(safe-area-inset-top)) {
+  :root {
+    --rls-sizing-safe-top: constant(safe-area-inset-top);
+
+    --rls-sizing-safe-right: constant(safe-area-inset-right);
+
+    --rls-sizing-safe-bottom: constant(safe-area-inset-bottom);
+
+    --rls-sizing-safe-left: constant(safe-area-inset-left);
+  }
+}
+
+@supports (padding-top: env(safe-area-inset-top)) {
+  :root {
+    --rls-sizing-safe-top: env(safe-area-inset-top);
+
+    --rls-sizing-safe-right: env(safe-area-inset-right);
+
+    --rls-sizing-safe-bottom: env(safe-area-inset-bottom);
+
+    --rls-sizing-safe-left: env(safe-area-inset-left);
+  }
+}

package/scss/foundations/_themes.foundation.scss

@@ -0,0 +1,160 @@
+// Rolster Technology Themes Foundations
+// v2.3.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 03/Mar/2022
+// Updated: 26/May/2024
+
+@mixin app-border-token($theme, $token) {
+  --rls-app-border-1-#{$token}: var(--rls-border-1) solid
+    var(--rls-#{$theme}-border-#{$token});
+
+  --rls-app-border-2-#{$token}: var(--rls-border-2) solid
+    var(--rls-#{$theme}-border-#{$token});
+
+  --rls-app-border-4-#{$token}: var(--rls-border-4) solid
+    var(--rls-#{$theme}-border-#{$token});
+}
+
+@mixin app-shadow-position($theme, $position) {
+  --rls-app-shadow-#{$position}-2: var(--rls-#{$theme}-shadow-#{$position}-2);
+
+  --rls-app-shadow-#{$position}-4: var(--rls-#{$theme}-shadow-#{$position}-4);
+
+  --rls-app-shadow-#{$position}-8: var(--rls-#{$theme}-shadow-#{$position}-8);
+
+  --rls-app-shadow-#{$position}-16: var(--rls-#{$theme}-shadow-#{$position}-16);
+
+  --rls-app-shadow-#{$position}-24: var(--rls-#{$theme}-shadow-#{$position}-24);
+
+  --rls-app-shadow-#{$position}-32: var(--rls-#{$theme}-shadow-#{$position}-32);
+}
+
+@mixin rolster-border-color($theme, $token) {
+  --rls-#{$theme}-border-1-#{$token}: var(--rls-border-1) solid
+    var(--rls-#{$theme}-color-#{$token});
+
+  --rls-#{$theme}-border-2-#{$token}: var(--rls-border-2) solid
+    var(--rls-#{$theme}-color-#{$token});
+
+  --rls-#{$theme}-border-4-#{$token}: var(--rls-border-4) solid
+    var(--rls-#{$theme}-color-#{$token});
+}
+
+@mixin rolster-border-token($theme) {
+  @include rolster-border-color($theme, 100);
+  @include rolster-border-color($theme, 300);
+  @include rolster-border-color($theme, 500);
+  @include rolster-border-color($theme, 700);
+  @include rolster-border-color($theme, 900);
+}
+
+@mixin rolster-border-theme($theme, $token) {
+  --rls-theme-border-1-#{$token}: var(--rls-border-1) solid
+    var(--rls-#{$theme}-color-#{$token});
+
+  --rls-theme-border-2-#{$token}: var(--rls-border-2) solid
+    var(--rls-#{$theme}-color-#{$token});
+
+  --rls-theme-border-4-#{$token}: var(--rls-border-4) solid
+    var(--rls-#{$theme}-color-#{$token});
+}
+
+@mixin rolster-theme($theme) {
+  --rls-theme-color-900: var(--rls-#{$theme}-color-900);
+
+  --rls-theme-color-700: var(--rls-#{$theme}-color-700);
+
+  --rls-theme-color-500: var(--rls-#{$theme}-color-500);
+
+  --rls-theme-color-300: var(--rls-#{$theme}-color-300);
+
+  --rls-theme-color-100: var(--rls-#{$theme}-color-100);
+
+  --rls-theme-skeleton-500: var(--rls-#{$theme}-skeleton-500);
+
+  --rls-theme-skeleton-300: var(--rls-#{$theme}-skeleton-300);
+
+  --rls-theme-skeleton-100: var(--rls-#{$theme}-skeleton-100);
+
+  --rls-theme-shadow-500: var(--rls-#{$theme}-shadow-500);
+
+  --rls-theme-backdrop-500: var(--rls-#{$theme}-backdrop-500);
+
+  --rls-theme-gradient-500: var(--rls-#{$theme}-gradient-500);
+
+  @include rolster-border-theme($theme, 900);
+  @include rolster-border-theme($theme, 700);
+  @include rolster-border-theme($theme, 500);
+  @include rolster-border-theme($theme, 300);
+  @include rolster-border-theme($theme, 100);
+}
+
+:root {
+  --rls-app-background-500: var(--rls-light-background-500);
+
+  --rls-app-background-300: var(--rls-light-background-300);
+
+  --rls-app-background-100: var(--rls-light-background-100);
+
+  --rls-app-color-500: var(--rls-dark-color-500);
+
+  --rls-app-color-300: var(--rls-dark-color-300);
+
+  --rls-app-color-100: var(--rls-dark-color-100);
+
+  --rls-app-border-500: var(--rls-dark-border-500);
+
+  --rls-app-border-300: var(--rls-dark-border-300);
+
+  --rls-app-border-100: var(--rls-dark-border-100);
+
+  @include app-border-token('dark', 500);
+  @include app-border-token('dark', 300);
+  @include app-border-token('dark', 100);
+
+  @include app-shadow-position('bottom', 'light');
+  @include app-shadow-position('top', 'light');
+  @include app-shadow-position('right', 'light');
+  @include app-shadow-position('left', 'light');
+  @include app-shadow-position('center', 'light');
+
+  @include rolster-border-token('standard');
+  @include rolster-border-token('success');
+  @include rolster-border-token('info');
+  @include rolster-border-token('warning');
+  @include rolster-border-token('danger');
+  @include rolster-border-token('amaizing');
+  @include rolster-border-token('smartness');
+  @include rolster-border-token('obsidian');
+
+  @include rolster-theme('standard');
+}
+
+*[rls-theme='success'] {
+  @include rolster-theme('success');
+}
+
+*[rls-theme='info'] {
+  @include rolster-theme('info');
+}
+
+*[rls-theme='warning'] {
+  @include rolster-theme('warning');
+}
+
+*[rls-theme='danger'] {
+  @include rolster-theme('danger');
+}
+
+*[rls-theme='amaizing'] {
+  @include rolster-theme('amaizing');
+}
+
+*[rls-theme='smartness'] {
+  @include rolster-theme('smartness');
+}
+
+*[rls-theme='obsidian'] {
+  @include rolster-theme('obsidian');
+}

package/scss/foundations/_typographics.foundation.scss

@@ -0,0 +1,26 @@
+// Rolster Technology Typographics Foundations
+// v2.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 20/Mar/2018
+// Updated: 26/May/2024
+
+:root {
+  --rls-font-weight-thin: 100;
+
+  --rls-font-weight-extra-light: 200;
+
+  --rls-font-weight-light: 300;
+
+  --rls-font-weight-regular: 400;
+
+  --rls-font-weight-medium: 500;
+
+  --rls-font-weight-semibold: 600;
+
+  --rls-font-weight-bold: 700;
+
+  --rls-font-weight-extrabold: 800;
+
+  --rls-font-weight-black: 900;
+}