@rolster/styles-foundations 1.0.0

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@rolster/styles-foundations",
+  "version": "1.0.0",
+  "description": "Front-end style pack to develop responsive and mobile projects on the web with Rolster.",
+  "sass": "scss/styles.scss",
+  "style": "dist/styles.css",
+  "author": "Rolster Technology <rolster.developments@gmail.com>",
+  "license": "MIT",
+  "files": [
+    "dist/",
+    "fonts/",
+    "icons/",
+    "scss/"
+  ],
+  "scripts": {
+    "clean": "rimraf ./dist",
+    "sass-to-css": "node-sass scss/styles.scss -o dist/",
+    "css-minify": "css-minify -d dist/ -o dist/",
+    "rltcss": "rtlcss dist/styles.css dist/styles.rtl.css",
+    "build": "npm run clean && npm run sass-to-css && npm run rltcss && npm run css-minify"
+  },
+  "devDependencies": {
+    "css-minify": "^2.0.0",
+    "node-sass": "^9.0.0",
+    "rimraf": "^3.0.2",
+    "rtlcss": "^4.1.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rolster-developments/typescript-forms.git"
+  }
+}

package/readme.md

@@ -0,0 +1,13 @@
+# Rolster Styles Foundations
+
+Front-end style pack to develop responsive and mobile projects on the web with Rolster.
+
+## Installation
+
+```
+npm i @rolster/styles-foundations
+```
+
+## Contributing
+
+- Daniel Andrés Castillo Pedroza :rocket:

package/scss/_rolster-components.scss

@@ -0,0 +1,9 @@
+// Rolster Technology Components
+// v1.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 13/Abr/2023
+// Updated: 13/Abr/2023
+
+@import 'components/app';
+@import 'components/box-field';

package/scss/_rolster-foundations.scss

@@ -0,0 +1,13 @@
+// Rolster Technology Foundations
+// v1.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 03/Mar/2022
+// Updated: 13/Abr/2023
+
+@import 'foundations/animations-foundations';
+@import 'foundations/colors-foundations';
+@import 'foundations/sizings-foundations';
+@import 'foundations/elevations-foundations';
+@import 'foundations/themes-foundations';
+@import 'foundations/typographics-foundations';

package/scss/_rolster-utilities.scss

@@ -0,0 +1,13 @@
+// Rolster Technology Utilities
+// v1.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 13/Abr/2023
+// Updated: 13/Abr/2023
+
+@import 'utilities/normalize-utilities';
+@import 'utilities/colors-utilities';
+@import 'utilities/layout-utilities';
+@import 'utilities/themes-utilities';
+@import 'utilities/texts-utilities';
+@import 'utilities/typographics-utilities';

package/scss/components/_app.scss

@@ -0,0 +1,89 @@
+// Rolster Technology App Component
+// v1.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 20/Mar/2018
+// Updated: 16/Abr/2023
+
+.rls-app {
+  &__body {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    top: 0rem;
+    left: 0rem;
+    padding: 0rem;
+    margin: 0rem;
+    width: 100%;
+    height: 100%;
+    z-index: var(--z-index-8);
+    overflow: hidden;
+    transition: left 240ms 0ms var(--standard-curve),
+      width 240ms 0ms var(--standard-curve);
+  }
+
+  &__header {
+    position: relative;
+    width: 100%;
+    height: 3.5rem;
+    box-sizing: border-box;
+    z-index: var(--z-index-8);
+    background: var(--background-theme-100);
+
+    & + .rls-app__page,
+    & + .rls-app__content {
+      height: calc(100vh - 3.5rem);
+    }
+
+    .rls-toolbar {
+      height: 100%;
+    }
+  }
+
+  &__content {
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    margin: 0rem;
+    padding: 0rem;
+    overflow: auto;
+    box-sizing: border-box;
+  }
+
+  &__page {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 100vh;
+    margin: 0rem;
+    padding: 0rem;
+    overflow: hidden;
+    box-sizing: border-box;
+
+    &__nav {
+      position: relative;
+      width: 17.5rem;
+      height: 100%;
+      margin: 0rem;
+      padding: 0rem;
+      overflow: auto;
+      box-sizing: border-box;
+      border-radius: 0rem 0rem var(--sizing-48) 0rem;
+      background: var(--background-theme-100);
+
+      & + .rls-app__page__content {
+        width: calc(100% - 17.5rem);
+      }
+    }
+
+    &__content {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      margin: 0rem;
+      padding: 0rem;
+      overflow: auto;
+      box-sizing: border-box;
+    }
+  }
+}

package/scss/components/_box-field.scss

@@ -0,0 +1,94 @@
+// Rolster Technology BoxField Component
+// v1.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 08/Sep/2022
+// Updated: 14/Abr/2023
+
+.rls-box-field {
+  --box-field-body-background: rgb(248, 248, 248, 1);
+  --box-field-body-border: var(--border-1-theme-100);
+  --box-field-body-shadow: none;
+  --box-field-body-opacity: 1;
+  --box-field-label-color: var(--color-theme-300);
+  --box-field-label-opacity: 1;
+
+  position: relative;
+  float: left;
+  width: 100%;
+  box-sizing: border-box;
+
+  &__content {
+    transition: height 160ms 0ms var(--standard-curve);
+    box-sizing: border-box;
+
+    &--active {
+      --box-field-body-background: var(--background-theme-500);
+      --box-field-label-color: var(--color-xofttion-500);
+      --box-field-body-border: var(--border-1-xofttion-500);
+      --box-field-body-shadow: 0px 0px 0px 3px var(--box-shadow-xofttion-500);
+    }
+
+    &--error {
+      --box-field-label-color: var(--color-danger-500);
+      --box-field-body-border: var(--border-1) solid var(--color-danger-500);
+      --box-field-body-shadow: 0px 0px 0px 3px var(--box-shadow-danger-500);
+    }
+
+    &--disabled {
+      --box-field-body-background: var(--background-theme-500);
+      --box-field-body-opacity: 0.75;
+      --box-field-label-opacity: 0.5;
+    }
+  }
+
+  &__label {
+    position: relative;
+    float: left;
+    width: 100%;
+    padding: 0rem 0.625rem;
+    box-sizing: border-box;
+    margin-bottom: var(--sizing-4);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: var(--box-field-label-color);
+    opacity: var(--box-field-label-opacity);
+    font-weight: var(--font-weight-medium);
+    font-size: var(--smalltext-size);
+    letter-spacing: var(--smalltext-letter-spacing);
+    min-height: var(--smalltext-line-height);
+    line-height: var(--smalltext-line-height);
+
+    span {
+      color: var(--color-danger-500);
+    }
+  }
+
+  &__body {
+    display: flex;
+    box-sizing: border-box;
+    overflow: hidden;
+    border-radius: var(--sizing-4);
+    background: var(--box-field-body-background);
+    border: var(--box-field-body-border);
+    box-shadow: var(--box-field-body-shadow);
+    opacity: var(--box-field-body-opacity);
+  }
+
+  &__helper {
+    color: var(--color-theme-100);
+    padding: 0rem 0.625rem;
+    box-sizing: border-box;
+    margin-top: var(--sizing-4);
+    font-weight: var(--font-weight-medium);
+    font-size: var(--overline-size);
+    letter-spacing: var(--overline-letter-spacing);
+    min-height: var(--overline-line-height);
+    line-height: var(--overline-line-height);
+
+    &--error {
+      color: var(--color-danger-500);
+    }
+  }
+}

package/scss/foundations/_animations-foundations.scss

@@ -0,0 +1,16 @@
+// Rolster Technology Animations Foundations
+// v1.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 20/Mar/2018
+// Updated: 12/Ago/2022
+
+:root {
+  --standard-curve: cubic-bezier(0.4, 0, 0.2, 1);
+
+  --deceleration-curve: cubic-bezier(0, 0, 0.2, 1);
+
+  --acceleration-curve: cubic-bezier(0.4, 0, 1, 1);
+
+  --sharp-curve: cubic-bezier(0.4, 0, 0.6, 1);
+}

package/scss/foundations/_colors-foundations.scss

@@ -0,0 +1,200 @@
+// Rolster Technology Colors Foundations
+// v1.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 03/Mar/2022
+// Updated: 16/Abr/2023
+
+:root {
+  --background-dark-500: rgba(37, 38, 65, 1);
+
+  --background-dark-300: rgba(52, 57, 87, 1);
+
+  --background-dark-100: rgba(72, 77, 107, 1);
+
+  --background-light-500: rgba(255, 255, 255, 1);
+
+  --background-light-300: rgba(239, 242, 252, 1);
+
+  --background-light-100: rgba(221, 223, 237, 1);
+
+  --color-dark-500: rgba(40, 50, 61, 1);
+
+  --color-dark-300: rgba(98, 111, 155, 1);
+
+  --color-dark-100: rgba(157, 165, 178, 1);
+
+  --color-light-500: rgba(255, 255, 255, 1);
+
+  --color-light-300: rgba(185, 195, 231, 1);
+
+  --color-light-100: rgba(128, 141, 190, 1);
+
+  --border-dark-500: rgba(117, 125, 138, 1);
+
+  --border-dark-300: rgba(195, 199, 206, 1);
+
+  --border-dark-100: rgba(225, 227, 230, 1);
+
+  --border-light-500: rgba(255, 255, 255, 1);
+
+  --border-light-300: rgba(185, 195, 231, 1);
+
+  --border-light-100: rgba(128, 141, 190, 1);
+
+  --color-base-900: rgba(28, 56, 89, 1);
+
+  --color-base-700: rgba(23, 79, 144, 1);
+
+  --color-base-500: rgba(20, 97, 187, 1);
+
+  --color-base-300: rgba(118, 163, 215, 1);
+
+  --color-base-100: rgba(217, 229, 244, 1);
+
+  --skeleton-base-500: rgba(23, 79, 144, 0.5);
+
+  --skeleton-base-300: rgba(23, 79, 144, 0.25);
+
+  --skeleton-base-100: rgba(23, 79, 144, 0.1);
+
+  --box-shadow-base-500: rgba(20, 97, 187, 0.24);
+
+  --backdrop-base-500: rgba(18, 46, 79, 0.8);
+
+  --gradient-base-500: linear-gradient(
+    180deg,
+    rgb(20, 97, 187) 0%,
+    rgb(23, 79, 144) 100%
+  );
+
+  --color-success-900: rgba(24, 80, 70, 1);
+
+  --color-success-700: rgba(14, 126, 106, 1);
+
+  --color-success-500: rgba(7, 162, 135, 1);
+
+  --color-success-300: rgba(111, 201, 185, 1);
+
+  --color-success-100: rgba(215, 240, 235, 1);
+
+  --skeleton-success-500: rgba(14, 126, 106, 0.5);
+
+  --skeleton-success-300: rgba(14, 126, 106, 0.25);
+
+  --skeleton-success-100: rgba(14, 126, 106, 0.1);
+
+  --box-shadow-success-500: rgba(7, 162, 135, 0.24);
+
+  --backdrop-success-500: rgba(14, 70, 60, 0.8);
+
+  --gradient-success-500: linear-gradient(
+    180deg,
+    rgb(7, 162, 135) 0%,
+    rgb(14, 126, 106) 100%
+  );
+
+  --color-info-900: rgba(30, 87, 110, 1);
+
+  --color-info-700: rgba(26, 140, 186, 1);
+
+  --color-info-500: rgba(24, 182, 246, 1);
+
+  --color-info-300: rgba(121, 212, 249, 1);
+
+  --color-info-100: rgba(218, 243, 253, 1);
+
+  --skeleton-info-500: rgba(26, 140, 186, 0.5);
+
+  --skeleton-info-300: rgba(26, 140, 186, 0.25);
+
+  --skeleton-info-100: rgba(26, 140, 186, 0.1);
+
+  --box-shadow-info-500: rgba(24, 182, 246, 0.24);
+
+  --backdrop-info-500: rgba(20, 77, 100, 0.8);
+
+  --gradient-info-500: linear-gradient(
+    180deg,
+    rgb(24, 182, 246) 0%,
+    rgb(26, 140, 186) 100%
+  );
+
+  --color-happy-900: rgba(74, 45, 65, 1);
+
+  --color-happy-700: rgba(115, 57, 96, 1);
+
+  --color-happy-500: rgba(147, 67, 121, 1);
+
+  --color-happy-300: rgba(192, 145, 177, 1);
+
+  --color-happy-100: rgba(237, 224, 233, 1);
+
+  --skeleton-happy-500: rgba(115, 57, 96, 0.5);
+
+  --skeleton-happy-300: rgba(115, 57, 96, 0.25);
+
+  --skeleton-happy-100: rgba(115, 57, 96, 0.1);
+
+  --box-shadow-happy-500: rgba(147, 67, 121, 0.24);
+
+  --backdrop-happy-500: rgba(64, 35, 55, 0.8);
+
+  --gradient-happy-500: linear-gradient(
+    180deg,
+    rgb(147, 67, 121) 0%,
+    rgb(115, 57, 96) 100%
+  );
+
+  --color-warning-900: rgba(112, 81, 48, 1);
+
+  --color-warning-700: rgba(190, 128, 62, 1);
+
+  --color-warning-500: rgba(252, 165, 73, 1);
+
+  --color-warning-300: rgba(253, 202, 149, 1);
+
+  --color-warning-100: rgba(254, 240, 225, 1);
+
+  --skeleton-warning-500: rgba(190, 128, 62, 0.5);
+
+  --skeleton-warning-300: rgba(190, 128, 62, 0.25);
+
+  --skeleton-warning-100: rgba(190, 128, 62, 0.1);
+
+  --box-shadow-warning-500: rgba(252, 165, 73, 0.24);
+
+  --backdrop-warning-500: rgba(102, 71, 38, 0.8);
+
+  --gradient-warning-500: linear-gradient(
+    180deg,
+    rgb(252, 165, 73) 0%,
+    rgb(190, 128, 62) 100%
+  );
+
+  --color-danger-900: rgba(109, 43, 43, 1);
+
+  --color-danger-700: rgba(185, 52, 52, 1);
+
+  --color-danger-500: rgba(244, 60, 60, 1);
+
+  --color-danger-300: rgba(248, 141, 141, 1);
+
+  --color-danger-100: rgba(253, 223, 223, 1);
+
+  --skeleton-danger-500: rgba(185, 52, 52, 0.5);
+
+  --skeleton-danger-300: rgba(185, 52, 52, 0.25);
+
+  --skeleton-danger-100: rgba(185, 52, 52, 0.1);
+
+  --box-shadow-danger-500: rgba(244, 60, 60, 0.24);
+
+  --backdrop-danger-500: rgba(99, 33, 33, 0.8);
+
+  --gradient-danger-500: linear-gradient(
+    180deg,
+    rgb(244, 60, 60) 0%,
+    rgb(185, 52, 52) 100%
+  );
+}

package/scss/foundations/_elevations-foundations.scss

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