@rolster/styles-foundations 1.1.14 → 2.2.0

package/scss/foundations/_colors.foundation.scss

@@ -0,0 +1,290 @@
+// Rolster Technology Colors Foundations
+// v2.4.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 03/Mar/2022
+// Updated: 02/Jun/2024
+
+@mixin rolster-theme-900($theme, $r, $g, $b) {
+  --rls-#{$theme}-color-900: rgba(#{$r}, #{$g}, #{$b}, 1);
+
+  --rls-#{$theme}-backdrop-900: rgba(#{$r}, #{$g}, #{$b}, 0.8);
+}
+
+@mixin rolster-theme-700($theme, $r, $g, $b) {
+  --rls-#{$theme}-color-700: rgba(#{$r}, #{$g}, #{$b}, 1);
+
+  --rls-#{$theme}-skeleton-500: rgba(#{$r}, #{$g}, #{$b}, 0.5);
+
+  --rls-#{$theme}-skeleton-300: rgba(#{$r}, #{$g}, #{$b}, 0.25);
+
+  --rls-#{$theme}-skeleton-100: rgba(#{$r}, #{$g}, #{$b}, 0.1);
+}
+
+@mixin rolster-theme-500($theme, $r, $g, $b) {
+  --rls-#{$theme}-color-500: rgba(#{$r}, #{$g}, #{$b}, 1);
+
+  --rls-#{$theme}-shadow-500: rgba(#{$r}, #{$g}, #{$b}, 0.24);
+}
+
+: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
+
+  @include rolster-theme-900('standard', 20, 39, 61);
+
+  @include rolster-theme-700('standard', 32, 83, 136);
+
+  @include rolster-theme-500('standard', 53, 128, 194);
+
+  --rls-standard-color-400: rgba(148, 190, 229, 1);
+
+  --rls-standard-color-300: rgba(198, 219, 241, 1);
+
+  --rls-standard-color-200: rgba(229, 238, 249, 1);
+
+  --rls-standard-color-100: rgba(243, 247, 252, 1);
+
+  --rls-standard-gradient-700: linear-gradient(
+    180deg,
+    var(--rls-standard-color-700) 0%,
+    var(--rls-standard-color-900) 100%
+  );
+
+  --rls-standard-gradient-500: linear-gradient(
+    180deg,
+    var(--rls-standard-color-500) 0%,
+    var(--rls-standard-color-700) 100%
+  );
+
+  // COLORS SUCCESS
+
+  @include rolster-theme-900('success', 1, 45, 33);
+
+  @include rolster-theme-700('success', 0, 124, 82);
+
+  @include rolster-theme-500('success', 10, 191, 121);
+
+  --rls-success-color-400: rgba(106, 235, 177, 1);
+
+  --rls-success-color-300: rgba(164, 246, 203, 1);
+
+  --rls-success-color-200: rgba(208, 251, 227, 1);
+
+  --rls-success-color-100: rgba(235, 254, 244, 1);
+
+  --rls-success-gradient-700: linear-gradient(
+    180deg,
+    var(--rls-success-color-700) 0%,
+    var(--rls-success-color-900) 100%
+  );
+
+  --rls-success-gradient-500: linear-gradient(
+    180deg,
+    var(--rls-success-color-500) 0%,
+    var(--rls-success-color-700) 100%
+  );
+
+  // COLORS INFO
+
+  @include rolster-theme-900('info', 4, 45, 77);
+
+  @include rolster-theme-700('info', 0, 101, 170);
+
+  @include rolster-theme-500('info', 2, 159, 245);
+
+  --rls-info-color-400: rgba(118, 207, 255, 1);
+
+  --rls-info-color-300: rgba(182, 228, 255, 1);
+
+  --rls-info-color-200: rgba(222, 241, 255, 1);
+
+  --rls-info-color-100: rgba(239, 248, 255, 1);
+
+  --rls-info-gradient-700: linear-gradient(
+    180deg,
+    var(--rls-info-color-700) 0%,
+    var(--rls-info-color-900) 100%
+  );
+
+  --rls-info-gradient-500: linear-gradient(
+    180deg,
+    var(--rls-info-color-500) 0%,
+    var(--rls-info-color-700) 100%
+  );
+
+  // COLORS WARNING
+
+  @include rolster-theme-900('warning', 70, 27, 2);
+
+  @include rolster-theme-700('warning', 148, 64, 12);
+
+  @include rolster-theme-500('warning', 222, 123, 2);
+
+  --rls-warning-color-400: rgba(255, 195, 32, 1);
+
+  --rls-warning-color-300: rgba(255, 221, 103, 1);
+
+  --rls-warning-color-200: rgba(255, 232, 136, 1);
+
+  --rls-warning-color-100: rgba(255, 245, 198, 1);
+
+  --rls-warning-gradient-700: linear-gradient(
+    180deg,
+    var(--rls-warning-color-700) 0%,
+    var(--rls-warning-color-900) 100%
+  );
+
+  --rls-warning-gradient-500: linear-gradient(
+    180deg,
+    var(--rls-warning-color-500) 0%,
+    var(--rls-warning-color-700) 100%
+  );
+
+  // COLORS DANGER
+
+  @include rolster-theme-900('danger', 75, 4, 4);
+
+  @include rolster-theme-700('danger', 157, 23, 23);
+
+  @include rolster-theme-500('danger', 255, 44, 44);
+
+  --rls-danger-color-400: rgba(255, 157, 157, 1);
+
+  --rls-danger-color-300: rgba(255, 197, 197, 1);
+
+  --rls-danger-color-200: rgba(255, 223, 223, 1);
+
+  --rls-danger-color-100: rgba(255, 241, 241, 1);
+
+  --rls-danger-gradient-700: linear-gradient(
+    180deg,
+    var(--rls-danger-color-700) 0%,
+    var(--rls-danger-color-900) 100%
+  );
+
+  --rls-danger-gradient-500: linear-gradient(
+    180deg,
+    var(--rls-danger-color-500) 0%,
+    var(--rls-danger-color-700) 100%
+  );
+
+  // COLORS AMAIZING
+
+  @include rolster-theme-900('amaizing', 63, 19, 63);
+
+  @include rolster-theme-700('amaizing', 118, 49, 119);
+
+  @include rolster-theme-500('amaizing', 170, 73, 176);
+
+  --rls-amaizing-color-400: rgba(231, 187, 236, 1);
+
+  --rls-amaizing-color-300: rgba(240, 217, 245, 1);
+
+  --rls-amaizing-color-200: rgba(248, 237, 250, 1);
+
+  --rls-amaizing-color-100: rgba(252, 246, 253, 1);
+
+  --rls-amaizing-gradient-700: linear-gradient(
+    180deg,
+    var(--rls-amaizing-color-700) 0%,
+    var(--rls-amaizing-color-900) 100%
+  );
+
+  --rls-amaizing-gradient-500: linear-gradient(
+    180deg,
+    var(--rls-amaizing-color-500) 0%,
+    var(--rls-amaizing-color-700) 100%
+  );
+
+  // COLORS SMARTNESS
+
+  @include rolster-theme-900('smartness', 50, 24, 22);
+
+  @include rolster-theme-700('smartness', 131, 69, 58);
+
+  @include rolster-theme-500('smartness', 182, 121, 89);
+
+  --rls-smartness-color-400: rgba(201, 163, 128, 1);
+
+  --rls-smartness-color-300: rgba(220, 196, 171, 1);
+
+  --rls-smartness-color-200: rgba(238, 226, 215, 1);
+
+  --rls-smartness-color-100: rgba(249, 246, 241, 1);
+
+  --rls-smartness-gradient-700: linear-gradient(
+    180deg,
+    var(--rls-smartness-color-700) 0%,
+    var(--rls-smartness-color-900) 100%
+  );
+
+  --rls-smartness-gradient-500: linear-gradient(
+    180deg,
+    var(--rls-smartness-color-500) 0%,
+    var(--rls-smartness-color-700) 100%
+  );
+
+  // COLORS OBSIDIAN
+
+  @include rolster-theme-900('obsidian', 41, 34, 31);
+
+  @include rolster-theme-700('obsidian', 98, 83, 70);
+
+  @include rolster-theme-500('obsidian', 141, 127, 101);
+
+  --rls-obsidian-color-400: rgba(178, 170, 146, 1);
+
+  --rls-obsidian-color-300: rgba(206, 202, 186, 1);
+
+  --rls-obsidian-color-200: rgba(230, 228, 219, 1);
+
+  --rls-obsidian-color-100: rgba(245, 245, 241, 1);
+
+  --rls-obsidian-gradient-700: linear-gradient(
+    180deg,
+    var(--rls-obsidian-color-700) 0%,
+    var(--rls-obsidian-color-900) 100%
+  );
+
+  --rls-obsidian-gradient-500: linear-gradient(
+    180deg,
+    var(--rls-obsidian-color-500) 0%,
+    var(--rls-obsidian-color-700) 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,172 @@
+// 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-400: var(--rls-#{$theme}-color-400);
+
+  --rls-theme-color-300: var(--rls-#{$theme}-color-300);
+  
+  --rls-theme-color-200: var(--rls-#{$theme}-color-200);
+
+  --rls-theme-color-100: var(--rls-#{$theme}-color-100);
+
+  --rls-theme-font-900: var(--rls-#{$theme}-color-100);
+
+  --rls-theme-font-500: var(--rls-#{$theme}-color-100);
+
+  --rls-theme-font-100: var(--rls-#{$theme}-color-900);
+
+  --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-900: var(--rls-#{$theme}-backdrop-900);
+
+  --rls-theme-gradient-500: var(--rls-#{$theme}-gradient-500);
+
+  --rls-theme-gradient-700: 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;
+}