@rolster/styles-foundations 1.0.0

package/scss/utilities/_normalize-utilities.scss

@@ -0,0 +1,211 @@
+// Rolster Technology Normalize Utilities
+// v1.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 11/Ago/2022
+// Updated: 11/Ago/2022
+
+:root {
+  --rolster-font-family: -rolster-system-font, -apple-system,
+    BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica;
+}
+
+html {
+  font-size: var(--rolster-font-size, 16px);
+  font-family: var(--rolster-font-family);
+}
+
+body {
+  position: absolute;
+  top: 0rem;
+  bottom: 0rem;
+  left: 0rem;
+  right: 0rem;
+  margin: 0rem;
+  padding: 0rem;
+  -webkit-tap-highlight-color: transparent;
+  background: var(--background-theme-300);
+}
+
+div {
+  position: relative;
+  width: 100%;
+}
+
+audio,
+canvas,
+progress,
+video {
+  vertical-align: baseline;
+}
+
+audio:not([controls]) {
+  display: none;
+  height: 0rem;
+}
+
+b,
+strong {
+  font-weight: bold;
+}
+
+img {
+  border: 0rem;
+}
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+figure {
+  margin: 1rem 40rem;
+}
+
+hr {
+  height: 0.0625rem;
+  border-width: 0rem;
+  box-sizing: content-box;
+}
+
+pre {
+  overflow: auto;
+}
+
+code,
+kbd,
+pre,
+samp {
+  font-family: inherit;
+  font-size: 1rem;
+}
+
+label,
+input,
+select,
+textarea {
+  font-family: inherit;
+  line-height: normal;
+}
+
+textarea {
+  overflow: auto;
+  height: auto;
+  font: inherit;
+  color: inherit;
+}
+
+textarea::placeholder {
+  padding-left: 0.125rem;
+}
+
+form,
+input,
+optgroup,
+select {
+  margin: 0rem;
+  font: inherit;
+  color: inherit;
+}
+
+html input[type='button'],
+input[type='reset'],
+input[type='submit'] {
+  cursor: pointer;
+}
+
+a,
+a div,
+a span,
+a ion-icon,
+a ion-label,
+button,
+button div,
+button span,
+button ion-icon,
+button ion-label,
+[tappable],
+[tappable] div,
+[tappable] span,
+[tappable] ion-icon,
+[tappable] ion-label,
+input,
+textarea {
+  touch-action: manipulation;
+}
+
+a ion-label,
+button ion-label {
+  pointer-events: none;
+}
+
+button {
+  border: 0rem;
+  border-radius: 0rem;
+  font-family: inherit;
+  font-style: inherit;
+  font-variant: inherit;
+  line-height: 1;
+  text-transform: none;
+}
+
+[tappable] {
+  cursor: pointer;
+}
+
+a[disabled],
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  padding: 0rem;
+  border: 0rem;
+}
+
+input[type='checkbox'],
+input[type='radio'] {
+  padding: 0rem;
+  box-sizing: border-box;
+}
+
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0rem;
+}
+
+td,
+th {
+  padding: 0rem;
+}
+
+ul {
+  list-style-type: none;
+  margin-block-start: 0rem;
+  margin-block-end: 0rem;
+  margin-inline-start: 0rem;
+  margin-inline-end: 0rem;
+  padding-inline-start: 0rem;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  margin: 0rem;
+  font-weight: var(--font-weight-medium);
+}

package/scss/utilities/_texts-utilities.scss

@@ -0,0 +1,23 @@
+// Rolster Technology Text Utilities
+// v1.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 08/Sep/2022
+// Updated: 08/Sep/2022
+
+@mixin align($orientation) {
+  .align-#{$orientation} {
+    text-align: #{$orientation} !important;
+  }
+}
+
+@include align(center);
+@include align(justify);
+@include align(left);
+@include align(right);
+
+.truncate {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}

package/scss/utilities/_themes-utilities.scss

@@ -0,0 +1,42 @@
+// Rolster Technology Themes Utilities
+// v1.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 13/Abr/2023
+// Updated: 13/Abr/2023
+
+.font-mode-500 {
+  color: var(--color-theme-500);
+}
+
+.font-mode-300 {
+  color: var(--color-theme-300);
+}
+
+.font-mode-100 {
+  color: var(--color-theme-100);
+}
+
+.bg-mode-500 {
+  background: var(--background-theme-500);
+}
+
+.bg-mode-300 {
+  background: var(--background-theme-300);
+}
+
+.bg-mode-100 {
+  background: var(--background-theme-100);
+}
+
+.border-1-mode-500 {
+  border: var(--border-1-theme-500);
+}
+
+.border-2-mode-500 {
+  border: var(--border-2-theme-500);
+}
+
+.border-4-mode-500 {
+  border: var(--border-4-theme-500);
+}

package/scss/utilities/_typographics-utilities.scss

@@ -0,0 +1,363 @@
+// Rolster Technology Typographics Utilities
+// v1.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 20/Mar/2018
+// Updated: 13/Abr/2023
+
+h1,
+.h1-default {
+  font-size: var(--heading-1-size);
+  letter-spacing: var(--heading-1-letter-spacing);
+  min-height: var(--heading-1-line-height);
+  line-height: var(--heading-1-line-height);
+}
+
+h2,
+.h2-default {
+  font-size: var(--heading-2-size);
+  letter-spacing: var(--heading-2-letter-spacing);
+  min-height: var(--heading-2-line-height);
+  line-height: var(--heading-2-line-height);
+}
+
+h3,
+.h3-default {
+  font-size: var(--heading-3-size);
+  letter-spacing: var(--heading-3-letter-spacing);
+  min-height: var(--heading-3-line-height);
+  line-height: var(--heading-3-line-height);
+}
+
+h4,
+.h4-default {
+  font-size: var(--heading-4-size);
+  letter-spacing: var(--heading-4-letter-spacing);
+  min-height: var(--heading-4-line-height);
+  line-height: var(--heading-4-line-height);
+}
+
+h5,
+.h5-default {
+  font-size: var(--heading-5-size);
+  letter-spacing: var(--heading-5-letter-spacing);
+  min-height: var(--heading-5-line-height);
+  line-height: var(--heading-5-line-height);
+}
+
+h6,
+.h6-default {
+  font-size: var(--heading-6-size);
+  letter-spacing: var(--heading-6-letter-spacing);
+  min-height: var(--heading-6-line-height);
+  line-height: var(--heading-6-line-height);
+}
+
+.title-default {
+  font-size: var(--title-size);
+  letter-spacing: var(--title-letter-spacing);
+  min-height: var(--title-line-height);
+  line-height: var(--title-line-height);
+}
+
+.subtitle-default {
+  font-size: var(--subtitle-size);
+  letter-spacing: var(--subtitle-letter-spacing);
+  min-height: var(--subtitle-line-height);
+  line-height: var(--subtitle-line-height);
+}
+
+.body-default {
+  font-size: var(--body-size);
+  letter-spacing: var(--body-letter-spacing);
+  min-height: var(--body-line-height);
+  line-height: var(--body-line-height);
+}
+
+.label-default {
+  font-size: var(--label-size);
+  letter-spacing: var(--label-letter-spacing);
+  min-height: var(--label-line-height);
+  line-height: var(--label-line-height);
+}
+
+.smalltext-default {
+  font-size: var(--smalltext-size);
+  letter-spacing: var(--smalltext-letter-spacing);
+  min-height: var(--smalltext-line-height);
+  line-height: var(--smalltext-line-height);
+}
+
+.caption-default {
+  font-size: var(--caption-size);
+  letter-spacing: var(--caption-letter-spacing);
+  min-height: var(--caption-line-height);
+  line-height: var(--caption-line-height);
+}
+
+.overline-default {
+  font-size: var(--overline-size);
+  letter-spacing: var(--overline-letter-spacing);
+  min-height: var(--overline-line-height);
+  line-height: var(--overline-line-height);
+}
+
+.h1-regular {
+  @extend .h1-default;
+  font-weight: var(--font-weight-regular);
+}
+
+.h1-medium {
+  @extend .h1-default;
+  font-weight: var(--font-weight-medium);
+}
+
+.h1-semibold {
+  @extend .h1-default;
+  font-weight: var(--font-weight-semibold);
+}
+
+.h1-bold {
+  @extend .h1-default;
+  font-weight: var(--font-weight-bold);
+}
+
+.h2-regular {
+  @extend .h2-default;
+  font-weight: var(--font-weight-regular);
+}
+
+.h2-medium {
+  @extend .h2-default;
+  font-weight: var(--font-weight-medium);
+}
+
+.h2-semibold {
+  @extend .h2-default;
+  font-weight: var(--font-weight-semibold);
+}
+
+.h2-bold {
+  @extend .h2-default;
+  font-weight: var(--font-weight-bold);
+}
+
+.h3-regular {
+  @extend .h3-default;
+  font-weight: var(--font-weight-regular);
+}
+
+.h3-medium {
+  @extend .h3-default;
+  font-weight: var(--font-weight-medium);
+}
+
+.h3-semibold {
+  @extend .h3-default;
+  font-weight: var(--font-weight-semibold);
+}
+
+.h3-bold {
+  @extend .h3-default;
+  font-weight: var(--font-weight-bold);
+}
+
+.h4-regular {
+  @extend .h4-default;
+  font-weight: var(--font-weight-regular);
+}
+
+.h4-medium {
+  @extend .h4-default;
+  font-weight: var(--font-weight-medium);
+}
+
+.h4-semibold {
+  @extend .h4-default;
+  font-weight: var(--font-weight-semibold);
+}
+
+.h4-bold {
+  @extend .h4-default;
+  font-weight: var(--font-weight-bold);
+}
+
+.h5-regular {
+  @extend .h5-default;
+  font-weight: var(--font-weight-regular);
+}
+
+.h5-medium {
+  @extend .h5-default;
+  font-weight: var(--font-weight-medium);
+}
+
+.h5-semibold {
+  @extend .h5-default;
+  font-weight: var(--font-weight-semibold);
+}
+
+.h5-bold {
+  @extend .h5-default;
+  font-weight: var(--font-weight-bold);
+}
+
+.h6-regular {
+  @extend .h6-default;
+  font-weight: var(--font-weight-regular);
+}
+
+.h6-medium {
+  @extend .h6-default;
+  font-weight: var(--font-weight-medium);
+}
+
+.h6-semibold {
+  @extend .h6-default;
+  font-weight: var(--font-weight-semibold);
+}
+
+.h6-bold {
+  @extend .h6-default;
+  font-weight: var(--font-weight-bold);
+}
+
+.title-regular {
+  @extend .title-default;
+  font-weight: var(--font-weight-regular);
+}
+
+.title-medium {
+  @extend .title-default;
+  font-weight: var(--font-weight-medium);
+}
+
+.title-semibold {
+  @extend .title-default;
+  font-weight: var(--font-weight-semibold);
+}
+
+.title-bold {
+  @extend .title-default;
+  font-weight: var(--font-weight-bold);
+}
+
+.subtitle-regular {
+  @extend .subtitle-default;
+  font-weight: var(--font-weight-regular);
+}
+
+.subtitle-medium {
+  @extend .subtitle-default;
+  font-weight: var(--font-weight-medium);
+}
+
+.subtitle-semibold {
+  @extend .subtitle-default;
+  font-weight: var(--font-weight-semibold);
+}
+
+.subtitle-bold {
+  @extend .subtitle-default;
+  font-weight: var(--font-weight-bold);
+}
+
+.body-regular {
+  @extend .body-default;
+  font-weight: var(--font-weight-regular);
+}
+
+.body-medium {
+  @extend .body-default;
+  font-weight: var(--font-weight-medium);
+}
+
+.body-semibold {
+  @extend .body-default;
+  font-weight: var(--font-weight-semibold);
+}
+
+.body-bold {
+  @extend .body-default;
+  font-weight: var(--font-weight-bold);
+}
+
+.label-regular {
+  @extend .label-default;
+  font-weight: var(--font-weight-regular);
+}
+
+.label-medium {
+  @extend .label-default;
+  font-weight: var(--font-weight-medium);
+}
+
+.label-semibold {
+  @extend .label-default;
+  font-weight: var(--font-weight-semibold);
+}
+
+.label-bold {
+  @extend .label-default;
+  font-weight: var(--font-weight-bold);
+}
+
+.smalltext-regular {
+  @extend .smalltext-default;
+  font-weight: var(--font-weight-regular);
+}
+
+.smalltext-medium {
+  @extend .smalltext-default;
+  font-weight: var(--font-weight-medium);
+}
+
+.smalltext-semibold {
+  @extend .smalltext-default;
+  font-weight: var(--font-weight-semibold);
+}
+
+.smalltext-bold {
+  @extend .smalltext-default;
+  font-weight: var(--font-weight-bold);
+}
+
+.caption-regular {
+  @extend .caption-default;
+  font-weight: var(--font-weight-regular);
+}
+
+.caption-medium {
+  @extend .caption-default;
+  font-weight: var(--font-weight-medium);
+}
+
+.caption-semibold {
+  @extend .caption-default;
+  font-weight: var(--font-weight-semibold);
+}
+
+.caption-bold {
+  @extend .caption-default;
+  font-weight: var(--font-weight-bold);
+}
+
+.overline-regular {
+  @extend .overline-default;
+  font-weight: var(--font-weight-regular);
+}
+
+.overline-medium {
+  @extend .overline-default;
+  font-weight: var(--font-weight-medium);
+}
+
+.overline-semibold {
+  @extend .overline-default;
+  font-weight: var(--font-weight-semibold);
+}
+
+.overline-bold {
+  @extend .overline-default;
+  font-weight: var(--font-weight-bold);
+}