@rolster/styles-foundations 2.7.3 → 3.0.0

package/scss/foundations/themes.scss

@@ -1,230 +1,230 @@
-// Rolster Technology Themes Foundations
-// v2.5.3
-// @license MIT
-// Author: Rolster Developers
-// Created: 03/Mar/2022
-// Updated: 09/Abr/2026
-
-@mixin rolster-app-border($token) {
-  --rls-app-border-1-#{$token}: var(--rls-border-1) solid
-    var(--rls-app-color-#{$token});
-
-  --rls-app-border-2-#{$token}: var(--rls-border-2) solid
-    var(--rls-app-color-#{$token});
-
-  --rls-app-border-4-#{$token}: var(--rls-border-4) solid
-    var(--rls-app-color-#{$token});
-}
-
-@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, 200);
-  @include rolster-border-color($theme, 300);
-  @include rolster-border-color($theme, 400);
-  @include rolster-border-color($theme, 500);
-  @include rolster-border-color($theme, 600);
-  @include rolster-border-color($theme, 700);
-  @include rolster-border-color($theme, 800);
-  @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-950: var(--rls-#{$theme}-color-950);
-
-  --rls-theme-color-900: var(--rls-#{$theme}-color-900);
-
-  --rls-theme-color-800: var(--rls-#{$theme}-color-800);
-
-  --rls-theme-color-700: var(--rls-#{$theme}-color-700);
-
-  --rls-theme-color-600: var(--rls-#{$theme}-color-600);
-
-  --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-color-050: var(--rls-#{$theme}-color-050);
-
-  --rls-theme-font-900: var(--rls-#{$theme}-color-050);
-
-  --rls-theme-color-050: var(--rls-#{$theme}-color-050);
-
-  --rls-theme-font-100: var(--rls-#{$theme}-color-900);
-
-  --rls-theme-skeleton-500: var(--rls-#{$theme}-skeleton-500);
-
-  --rls-theme-skeleton-400: var(--rls-#{$theme}-skeleton-400);
-
-  --rls-theme-skeleton-300: var(--rls-#{$theme}-skeleton-300);
-
-  --rls-theme-skeleton-200: var(--rls-#{$theme}-skeleton-200);
-
-  --rls-theme-skeleton-100: var(--rls-#{$theme}-skeleton-100);
-
-  --rls-theme-shadow-color-500: var(--rls-#{$theme}-shadow-color-500);
-
-  --rls-theme-shadow-500: var(--rls-#{$theme}-shadow-500);
-
-  --rls-theme-backdrop-100: var(--rls-#{$theme}-backdrop-100);
-
-  --rls-theme-backdrop-200: var(--rls-#{$theme}-backdrop-200);
-
-  --rls-theme-backdrop-300: var(--rls-#{$theme}-backdrop-300);
-
-  --rls-theme-backdrop-400: var(--rls-#{$theme}-backdrop-400);
-
-  --rls-theme-backdrop-500: var(--rls-#{$theme}-backdrop-500);
-
-  --rls-theme-backdrop-600: var(--rls-#{$theme}-backdrop-600);
-
-  --rls-theme-backdrop-700: var(--rls-#{$theme}-backdrop-700);
-
-  --rls-theme-backdrop-800: var(--rls-#{$theme}-backdrop-800);
-
-  --rls-theme-backdrop-900: var(--rls-#{$theme}-backdrop-900);
-
-  --rls-theme-gradient-700: var(--rls-#{$theme}-gradient-700);
-
-  --rls-theme-gradient-600: var(--rls-#{$theme}-gradient-600);
-  
-  --rls-theme-gradient-500: var(--rls-#{$theme}-gradient-500);
-
-  --rls-theme-gradient-400: var(--rls-#{$theme}-gradient-400);
-  
-  --rls-theme-gradient-300: var(--rls-#{$theme}-gradient-300);
-
-  @include rolster-border-theme($theme, 900);
-  @include rolster-border-theme($theme, 800);
-  @include rolster-border-theme($theme, 700);
-  @include rolster-border-theme($theme, 600);
-  @include rolster-border-theme($theme, 500);
-  @include rolster-border-theme($theme, 400);
-  @include rolster-border-theme($theme, 300);
-  @include rolster-border-theme($theme, 200);
-  @include rolster-border-theme($theme, 100);
-}
-
-body {
-  @include rolster-app-border('050');
-  @include rolster-app-border('100');
-  @include rolster-app-border('200');
-  @include rolster-app-border('300');
-  @include rolster-app-border('400');
-  @include rolster-app-border('500');
-  @include rolster-app-border('600');
-  @include rolster-app-border('700');
-  @include rolster-app-border('800');
-  @include rolster-app-border('900');
-
-  @include rolster-border-token('standard');
-  @include rolster-border-token('primary');
-  @include rolster-border-token('secondary');
-  @include rolster-border-token('tertiary');
-  @include rolster-border-token('success');
-  @include rolster-border-token('info');
-  @include rolster-border-token('warning');
-  @include rolster-border-token('danger');
-  @include rolster-border-token('berry');
-  @include rolster-border-token('ross');
-  @include rolster-border-token('hope');
-  @include rolster-border-token('mountains');
-  @include rolster-border-token('amaizing');
-  @include rolster-border-token('purple');
-  @include rolster-border-token('amber');
-  @include rolster-border-token('smartness');
-  @include rolster-border-token('obsidian');
-
-  @include rolster-theme('primary');
-}
-
-*[rls-theme='standard'] {
-  @include rolster-theme('standard');
-}
-
-*[rls-theme='secondary'] {
-  @include rolster-theme('secondary');
-}
-
-*[rls-theme='tertiary'] {
-  @include rolster-theme('tertiary');
-}
-
-*[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='berry'] {
-  @include rolster-theme('berry');
-}
-
-*[rls-theme='ross'] {
-  @include rolster-theme('ross');
-}
-
-*[rls-theme='hope'] {
-  @include rolster-theme('hope');
-}
-
-*[rls-theme='mountains'] {
-  @include rolster-theme('mountains');
-}
-
-*[rls-theme='amaizing'] {
-  @include rolster-theme('amaizing');
-}
-
-*[rls-theme='purple'] {
-  @include rolster-theme('purple');
-}
-
-*[rls-theme='amber'] {
-  @include rolster-theme('amber');
-}
-
-*[rls-theme='smartness'] {
-  @include rolster-theme('smartness');
-}
-
-*[rls-theme='obsidian'] {
-  @include rolster-theme('obsidian');
-}
+// Rolster Technology Themes Foundations
+// v2.5.3
+// @license MIT
+// Author: Rolster Developers
+// Created: 03/Mar/2022
+// Updated: 09/Abr/2026
+
+@mixin rolster-app-border($token) {
+  --rls-app-border-1-#{$token}: var(--rls-border-1) solid
+    var(--rls-app-color-#{$token});
+
+  --rls-app-border-2-#{$token}: var(--rls-border-2) solid
+    var(--rls-app-color-#{$token});
+
+  --rls-app-border-4-#{$token}: var(--rls-border-4) solid
+    var(--rls-app-color-#{$token});
+}
+
+@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, 200);
+  @include rolster-border-color($theme, 300);
+  @include rolster-border-color($theme, 400);
+  @include rolster-border-color($theme, 500);
+  @include rolster-border-color($theme, 600);
+  @include rolster-border-color($theme, 700);
+  @include rolster-border-color($theme, 800);
+  @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-950: var(--rls-#{$theme}-color-950);
+
+  --rls-theme-color-900: var(--rls-#{$theme}-color-900);
+
+  --rls-theme-color-800: var(--rls-#{$theme}-color-800);
+
+  --rls-theme-color-700: var(--rls-#{$theme}-color-700);
+
+  --rls-theme-color-600: var(--rls-#{$theme}-color-600);
+
+  --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-color-050: var(--rls-#{$theme}-color-050);
+
+  --rls-theme-font-900: var(--rls-#{$theme}-color-050);
+
+  --rls-theme-color-050: var(--rls-#{$theme}-color-050);
+
+  --rls-theme-font-100: var(--rls-#{$theme}-color-900);
+
+  --rls-theme-skeleton-500: var(--rls-#{$theme}-skeleton-500);
+
+  --rls-theme-skeleton-400: var(--rls-#{$theme}-skeleton-400);
+
+  --rls-theme-skeleton-300: var(--rls-#{$theme}-skeleton-300);
+
+  --rls-theme-skeleton-200: var(--rls-#{$theme}-skeleton-200);
+
+  --rls-theme-skeleton-100: var(--rls-#{$theme}-skeleton-100);
+
+  --rls-theme-shadow-color-500: var(--rls-#{$theme}-shadow-color-500);
+
+  --rls-theme-shadow-500: var(--rls-#{$theme}-shadow-500);
+
+  --rls-theme-backdrop-100: var(--rls-#{$theme}-backdrop-100);
+
+  --rls-theme-backdrop-200: var(--rls-#{$theme}-backdrop-200);
+
+  --rls-theme-backdrop-300: var(--rls-#{$theme}-backdrop-300);
+
+  --rls-theme-backdrop-400: var(--rls-#{$theme}-backdrop-400);
+
+  --rls-theme-backdrop-500: var(--rls-#{$theme}-backdrop-500);
+
+  --rls-theme-backdrop-600: var(--rls-#{$theme}-backdrop-600);
+
+  --rls-theme-backdrop-700: var(--rls-#{$theme}-backdrop-700);
+
+  --rls-theme-backdrop-800: var(--rls-#{$theme}-backdrop-800);
+
+  --rls-theme-backdrop-900: var(--rls-#{$theme}-backdrop-900);
+
+  --rls-theme-gradient-700: var(--rls-#{$theme}-gradient-700);
+
+  --rls-theme-gradient-600: var(--rls-#{$theme}-gradient-600);
+  
+  --rls-theme-gradient-500: var(--rls-#{$theme}-gradient-500);
+
+  --rls-theme-gradient-400: var(--rls-#{$theme}-gradient-400);
+  
+  --rls-theme-gradient-300: var(--rls-#{$theme}-gradient-300);
+
+  @include rolster-border-theme($theme, 900);
+  @include rolster-border-theme($theme, 800);
+  @include rolster-border-theme($theme, 700);
+  @include rolster-border-theme($theme, 600);
+  @include rolster-border-theme($theme, 500);
+  @include rolster-border-theme($theme, 400);
+  @include rolster-border-theme($theme, 300);
+  @include rolster-border-theme($theme, 200);
+  @include rolster-border-theme($theme, 100);
+}
+
+body {
+  @include rolster-app-border('050');
+  @include rolster-app-border('100');
+  @include rolster-app-border('200');
+  @include rolster-app-border('300');
+  @include rolster-app-border('400');
+  @include rolster-app-border('500');
+  @include rolster-app-border('600');
+  @include rolster-app-border('700');
+  @include rolster-app-border('800');
+  @include rolster-app-border('900');
+
+  @include rolster-border-token('standard');
+  @include rolster-border-token('primary');
+  @include rolster-border-token('secondary');
+  @include rolster-border-token('tertiary');
+  @include rolster-border-token('success');
+  @include rolster-border-token('info');
+  @include rolster-border-token('warning');
+  @include rolster-border-token('danger');
+  @include rolster-border-token('berry');
+  @include rolster-border-token('ross');
+  @include rolster-border-token('hope');
+  @include rolster-border-token('mountains');
+  @include rolster-border-token('amaizing');
+  @include rolster-border-token('purple');
+  @include rolster-border-token('amber');
+  @include rolster-border-token('smartness');
+  @include rolster-border-token('obsidian');
+
+  @include rolster-theme('primary');
+}
+
+*[rls-theme='standard'] {
+  @include rolster-theme('standard');
+}
+
+*[rls-theme='secondary'] {
+  @include rolster-theme('secondary');
+}
+
+*[rls-theme='tertiary'] {
+  @include rolster-theme('tertiary');
+}
+
+*[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='berry'] {
+  @include rolster-theme('berry');
+}
+
+*[rls-theme='ross'] {
+  @include rolster-theme('ross');
+}
+
+*[rls-theme='hope'] {
+  @include rolster-theme('hope');
+}
+
+*[rls-theme='mountains'] {
+  @include rolster-theme('mountains');
+}
+
+*[rls-theme='amaizing'] {
+  @include rolster-theme('amaizing');
+}
+
+*[rls-theme='purple'] {
+  @include rolster-theme('purple');
+}
+
+*[rls-theme='amber'] {
+  @include rolster-theme('amber');
+}
+
+*[rls-theme='smartness'] {
+  @include rolster-theme('smartness');
+}
+
+*[rls-theme='obsidian'] {
+  @include rolster-theme('obsidian');
+}

package/scss/styles.scss

@@ -7,7 +7,6 @@
 
 @use 'foundations';
 @use 'utilities';
-@use 'components';
 
 :root {
   --rls-html-max-width: 100%;