@rolster/styles-foundations 1.0.0

package/scss/foundations/_sizings-foundations.scss

@@ -0,0 +1,74 @@
+// Rolster Technology Sizings Foundations
+// v1.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 20/Mar/2018
+// Updated: 11/Abr/2023
+
+:root {
+  --sizing-2: 0.125rem;
+
+  --sizing-4: 0.25rem;
+
+  --sizing-6: 0.375rem;
+
+  --sizing-8: 0.5rem;
+
+  --sizing-12: 0.75rem;
+
+  --sizing-16: 1rem;
+
+  --sizing-20: 1.25rem;
+
+  --sizing-24: 1.5rem;
+
+  --sizing-28: 1.75rem;
+
+  --sizing-32: 2rem;
+
+  --sizing-36: 2.25rem;
+
+  --sizing-40: 2.5rem;
+
+  --sizing-44: 2.75rem;
+
+  --sizing-48: 3rem;
+
+  --sizing-52: 3.25rem;
+
+  --sizing-56: 3.5rem;
+
+  --sizing-60: 3.75rem;
+
+  --sizing-64: 4rem;
+
+  --border-1: 1px;
+
+  --border-2: 2px;
+
+  --border-4: 4px;
+}
+
+@supports (padding-top: constant(safe-area-inset-top)) {
+  :root {
+    --sizing-safe-top: constant(safe-area-inset-top);
+
+    --sizing-safe-right: constant(safe-area-inset-right);
+
+    --sizing-safe-bottom: constant(safe-area-inset-bottom);
+
+    --sizing-safe-left: constant(safe-area-inset-left);
+  }
+}
+
+@supports (padding-top: env(safe-area-inset-top)) {
+  :root {
+    --sizing-safe-top: env(safe-area-inset-top);
+
+    --sizing-safe-right: env(safe-area-inset-right);
+
+    --sizing-safe-bottom: env(safe-area-inset-bottom);
+
+    --sizing-safe-left: env(safe-area-inset-left);
+  }
+}

package/scss/foundations/_themes-foundations.scss

@@ -0,0 +1,103 @@
+// Rolster Technology Themes Foundations
+// v1.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 03/Mar/2022
+// Updated: 14/Abr/2023
+
+@mixin border-theme-rolster($token, $color) {
+  --border-1-rolster-#{$token}: var(--border-1) solid
+    var(--color-#{$color}-#{$token});
+
+  --border-2-rolster-#{$token}: var(--border-2) solid
+    var(--color-#{$color}-#{$token});
+
+  --border-4-rolster-#{$token}: var(--border-4) solid
+    var(--color-#{$color}-#{$token});
+}
+
+@mixin theme-rolster($color) {
+  --color-rolster-900: var(--color-#{$color}-900);
+
+  --color-rolster-700: var(--color-#{$color}-700);
+
+  --color-rolster-500: var(--color-#{$color}-500);
+
+  --color-rolster-300: var(--color-#{$color}-300);
+
+  --color-rolster-100: var(--color-#{$color}-100);
+
+  --skeleton-rolster-500: var(--skeleton-#{$color}-500);
+
+  --skeleton-rolster-300: var(--skeleton-#{$color}-300);
+
+  --skeleton-rolster-100: var(--skeleton-#{$color}-100);
+
+  @include border-theme-rolster(900, $color);
+  @include border-theme-rolster(700, $color);
+  @include border-theme-rolster(500, $color);
+  @include border-theme-rolster(300, $color);
+  @include border-theme-rolster(100, $color);
+
+  --box-shadow-rolster-500: var(--box-shadow-#{$color}-500);
+
+  --backdrop-rolster-500: var(--backdrop-#{$color}-500);
+
+  --gradient-rolster-500: var(--gradient-#{$color}-500);
+}
+
+@mixin border-theme($theme, $token) {
+  --border-1-theme-#{$token}: var(--border-1) solid
+    var(--border-#{$theme}-#{$token});
+
+  --border-2-theme-#{$token}: var(--border-2) solid
+    var(--border-#{$theme}-#{$token});
+
+  --border-4-theme-#{$token}: var(--border-4) solid
+    var(--border-#{$theme}-#{$token});
+}
+
+:root {
+  --background-theme-500: var(--background-light-500);
+
+  --background-theme-300: var(--background-light-300);
+
+  --background-theme-100: var(--background-light-100);
+
+  --color-theme-500: var(--color-dark-500);
+
+  --color-theme-300: var(--color-dark-300);
+
+  --color-theme-100: var(--color-dark-100);
+
+  --border-theme-500: var(--border-dark-500);
+
+  --border-theme-300: var(--border-dark-300);
+
+  --border-theme-100: var(--border-dark-100);
+
+  @include border-theme('dark', 500);
+  @include border-theme('dark', 300);
+  @include border-theme('dark', 100);
+  @include theme-rolster('base');
+}
+
+*[rls-theme='success'] {
+  @include theme-rolster('success');
+}
+
+*[rls-theme='info'] {
+  @include theme-rolster('info');
+}
+
+*[rls-theme='happy'] {
+  @include theme-rolster('happy');
+}
+
+*[rls-theme='warning'] {
+  @include theme-rolster('warning');
+}
+
+*[rls-theme='danger'] {
+  @include theme-rolster('danger');
+}

package/scss/foundations/_typographics-foundations.scss

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

package/scss/styles.scss

@@ -0,0 +1,10 @@
+// Rolster Technology Styles
+// v1.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 11/Ago/2022
+// Updated: 13/Abr/2023
+
+@import 'rolster-foundations';
+@import 'rolster-utilities';
+@import 'rolster-components';

package/scss/utilities/_colors-utilities.scss

@@ -0,0 +1,54 @@
+// Rolster Technology Colors Utilities
+// v1.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 13/Abr/2023
+// Updated: 13/Abr/2023
+
+.font-dark-500 {
+  color: var(--color-dark-500);
+}
+
+.font-dark-300 {
+  color: var(--color-dark-300);
+}
+
+.font-dark-100 {
+  color: var(--color-dark-100);
+}
+
+.font-light-500 {
+  color: var(--color-light-500);
+}
+
+.font-light-300 {
+  color: var(--color-light-300);
+}
+
+.font-light-100 {
+  color: var(--color-light-100);
+}
+
+.bg-dark-500 {
+  background: var(--background-dark-500);
+}
+
+.bg-dark-300 {
+  background: var(--background-dark-300);
+}
+
+.bg-dark-100 {
+  background: var(--background-dark-100);
+}
+
+.bg-light-500 {
+  background: var(--background-light-500);
+}
+
+.bg-light-300 {
+  background: var(--background-light-300);
+}
+
+.bg-light-100 {
+  background: var(--background-light-100);
+}

package/scss/utilities/_layout-utilities.scss

@@ -0,0 +1,314 @@
+// Rolster Technology Layout Utilities
+// v1.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 11/Abr/2023
+// Updated: 13/Abr/2023
+
+:root {
+  --flex-grid-12-gap: 0rem;
+  --flex-grid-8-gap: 0rem;
+  --flex-grid-6-gap: 0rem;
+  --flex-grid-4-gap: 0rem;
+
+  --flex-grid-12-col-2: 0rem;
+  --flex-grid-12-col-3: 0rem;
+  --flex-grid-12-col-4: 0rem;
+  --flex-grid-12-col-6: 0rem;
+  --flex-grid-12-col-8: 0rem;
+
+  --flex-grid-8-col-2: 0rem;
+  --flex-grid-8-col-3: 0rem;
+  --flex-grid-8-col-4: 0rem;
+  --flex-grid-8-col-6: 0rem;
+
+  --flex-grid-6-col-2: 0rem;
+  --flex-grid-6-col-3: 0rem;
+  --flex-grid-6-col-4: 0rem;
+
+  --flex-grid-4-col-2: 0rem;
+  --flex-grid-4-col-3: 0rem;
+}
+
+@mixin grid-responsive($size) {
+  .#{$size}-grid-8 {
+    display: grid;
+    gap: var(--sizing-8);
+  }
+
+  .#{$size}-grid-12 {
+    display: grid;
+    gap: var(--sizing-12);
+  }
+
+  .#{$size}-grid-16 {
+    display: grid;
+    gap: var(--sizing-16);
+  }
+
+  .#{$size}-grid-col-12 {
+    grid-template-columns: repeat(12, 1fr);
+  }
+
+  .#{$size}-grid-col-8 {
+    grid-template-columns: repeat(8, 1fr);
+  }
+
+  .#{$size}-grid-col-6 {
+    grid-template-columns: repeat(6, 1fr);
+  }
+
+  .#{$size}-grid-col-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .#{$size}-grid-col-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .#{$size}-grid-col-1 {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+
+@include grid-responsive('xs');
+
+@media screen and (min-width: 360px) {
+  @include grid-responsive('sm');
+}
+
+@media screen and (min-width: 640px) {
+  @include grid-responsive('md');
+}
+
+@media screen and (min-width: 960px) {
+  @include grid-responsive('lg');
+}
+
+@media screen and (min-width: 1280px) {
+  @include grid-responsive('xl');
+}
+
+@mixin flex-grid-responsive($size) {
+  .#{$size}-flex-grid-8 {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: var(--sizing-8);
+    --flex-grid-12-gap: 0.4584rem;
+    --flex-grid-8-gap: 0.4375rem;
+    --flex-grid-6-gap: 0.417rem;
+    --flex-grid-4-gap: 0.375rem;
+
+    --flex-grid-12-col-2: 0.425rem;
+    --flex-grid-12-col-3: 0.3875rem;
+    --flex-grid-12-col-4: 0.35rem;
+    --flex-grid-12-col-6: 0.2725rem;
+    --flex-grid-12-col-8: 0.375rem;
+
+    --flex-grid-8-col-2: 0.3875rem;
+    --flex-grid-8-col-3: 0.325rem;
+    --flex-grid-8-col-4: 0.275rem;
+    --flex-grid-8-col-6: 0.225rem;
+
+    --flex-grid-6-col-2: 0.3525rem;
+    --flex-grid-6-col-3: 0.275rem;
+    --flex-grid-6-col-4: 0.2125rem;
+
+    --flex-grid-4-col-2: 0.25rem;
+    --flex-grid-4-col-3: 0.125rem;
+  }
+
+  .#{$size}-flex-grid-12 {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: var(--sizing-12);
+
+    --flex-grid-12-gap: 0.9140625rem;
+    --flex-grid-8-gap: 0.875rem;
+    --flex-grid-6-gap: 0.8309375rem;
+    --flex-grid-4-gap: 0.75rem;
+
+    --flex-grid-12-col-2: 0.828rem;
+    --flex-grid-12-col-3: 0.75rem;
+    --flex-grid-12-col-4: 0.6725rem;
+    --flex-grid-12-col-6: 0.5125rem;
+    --flex-grid-12-col-8: 0.375rem;
+
+    --flex-grid-8-col-2: 0.77275rem;
+    --flex-grid-8-col-3: 0.65rem;
+    --flex-grid-8-col-4: 0.5rem;
+    --flex-grid-8-col-6: 0.275rem;
+
+    --flex-grid-6-col-2: 0.675rem;
+    --flex-grid-6-col-3: 0.5rem;
+    --flex-grid-6-col-4: 0.355rem;
+
+    --flex-grid-4-col-2: 0.5rem;
+    --flex-grid-4-col-3: 0.275rem;
+  }
+
+  .#{$size}-flex-grid-16 {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: var(--sizing-16);
+
+    --flex-grid-12-gap: 0.9140625rem;
+    --flex-grid-8-gap: 0.875rem;
+    --flex-grid-6-gap: 0.8309375rem;
+    --flex-grid-4-gap: 0.75rem;
+
+    --flex-grid-12-col-2: 0.8325rem;
+    --flex-grid-12-col-3: 0.75rem;
+    --flex-grid-12-col-4: 0.6725rem;
+    --flex-grid-12-col-6: 0.5125rem;
+    --flex-grid-12-col-8: 0.375rem;
+
+    --flex-grid-8-col-2: 0.77275rem;
+    --flex-grid-8-col-3: 0.65rem;
+    --flex-grid-8-col-4: 0.5rem;
+    --flex-grid-8-col-6: 0.275rem;
+
+    --flex-grid-6-col-2: 0.675rem;
+    --flex-grid-6-col-3: 0.5rem;
+    --flex-grid-6-col-4: 0.355rem;
+
+    --flex-grid-4-col-2: 0.5rem;
+    --flex-grid-4-col-3: 0.275rem;
+  }
+
+  .#{$size}-flex-grid-col-4 {
+    & > * {
+      width: calc(25% - var(--flex-grid-4-gap));
+
+      &.#{$size}-flex-col-1 {
+        width: calc(25% - var(--flex-grid-4-gap));
+      }
+
+      &.#{$size}-flex-col-2 {
+        width: calc(50% - var(--flex-grid-4-col-2));
+      }
+
+      &.#{$size}-flex-col-3 {
+        width: calc(75% - var(--flex-grid-4-col-3));
+      }
+
+      &.#{$size}-flex-col-4,
+      &.#{$size}-flex-col-6,
+      &.#{$size}-flex-col-8,
+      &.#{$size}-flex-col-12 {
+        width: 100%;
+      }
+    }
+  }
+
+  .#{$size}-flex-grid-col-6 {
+    & > * {
+      width: calc(16.66% - var(--flex-grid-6-gap));
+
+      &.#{$size}-flex-col-1 {
+        width: calc(16.66% - var(--flex-grid-6-gap));
+      }
+
+      &.#{$size}-flex-col-2 {
+        width: calc(33.34% - var(--flex-grid-6-col-2));
+      }
+
+      &.#{$size}-flex-col-3 {
+        width: calc(50% - var(--flex-grid-6-col-3));
+      }
+
+      &.#{$size}-flex-col-4 {
+        width: calc(66.67% - var(--flex-grid-6-col-4));
+      }
+
+      &.#{$size}-flex-col-6,
+      &.#{$size}-flex-col-8,
+      &.#{$size}-flex-col-12 {
+        width: 100%;
+      }
+    }
+  }
+
+  .#{$size}-flex-grid-col-8 {
+    & > * {
+      width: calc(12.5% - var(--flex-grid-8-gap));
+
+      &.#{$size}-flex-col-1 {
+        width: calc(12.5% - var(--flex-grid-8-gap));
+      }
+
+      &.#{$size}-flex-col-2 {
+        width: calc(25% - var(--flex-grid-8-col-2));
+      }
+
+      &.#{$size}-flex-col-3 {
+        width: calc(37.5% - var(--flex-grid-8-col-3));
+      }
+
+      &.#{$size}-flex-col-4 {
+        width: calc(50% - var(--flex-grid-8-col-4));
+      }
+
+      &.#{$size}-flex-col-6 {
+        width: calc(75% - var(--flex-grid-8-col-6));
+      }
+
+      &.#{$size}-flex-col-8,
+      &.#{$size}-flex-col-12 {
+        width: 100%;
+      }
+    }
+  }
+
+  .#{$size}-flex-grid-col-12 {
+    & > * {
+      width: calc(8.33% - var(--flex-grid-12-gap));
+
+      &.#{$size}-flex-col-1 {
+        width: calc(8.33% - var(--flex-grid-12-gap));
+      }
+
+      &.#{$size}-flex-col-2 {
+        width: calc(16.66% - var(--flex-grid-12-col-2));
+      }
+
+      &.#{$size}-flex-col-3 {
+        width: calc(25% - var(--flex-grid-12-col-3));
+      }
+
+      &.#{$size}-flex-col-4 {
+        width: calc(33.33% - var(--flex-grid-12-col-4));
+      }
+
+      &.#{$size}-flex-col-6 {
+        width: calc(50% - var(--flex-grid-12-col-6));
+      }
+
+      &.#{$size}-flex-col-8 {
+        width: calc(66.66% - var(--flex-grid-12-col-8));
+      }
+
+      &.#{$size}-flex-col-12 {
+        width: 100%;
+      }
+    }
+  }
+}
+
+@include flex-grid-responsive('xs');
+
+@media screen and (min-width: 360px) {
+  @include flex-grid-responsive('sm');
+}
+
+@media screen and (min-width: 640px) {
+  @include flex-grid-responsive('md');
+}
+
+@media screen and (min-width: 960px) {
+  @include flex-grid-responsive('lg');
+}
+
+@media screen and (min-width: 1280px) {
+  @include flex-grid-responsive('xl');
+}