Merge pull request #3 from DevoInc/feat/QUV-2366_genesys_styles_impro…

…vements

feat(QUV-2366)!: Genesys styles improvements

.storybook/preview.scss

@@ -2,7 +2,7 @@
 @import "assets/styles/preview/preview.scss";
 
 // The genesys-styles scss. We need to wrap these styles to avoid doc styles affect to the components
-@import "../src/styles.scss";
+@import "../src/light";
 
 // because the storybook source code is rendered using the same class name 'tag'
 pre .tag {

build.ts

@@ -4,10 +4,14 @@ import { writeFileSync, cpSync, rmSync, mkdirSync } from "fs";
 // Prepare environment
 rmSync('dist', { recursive: true, force: true });
 mkdirSync('dist');
+mkdirSync('dist/css');
 
 // Create css
-const result = sass.compile("./src/styles.scss");
-writeFileSync("dist/styles.css", result.css);
+const lightResult = sass.compile("./src/light.scss");
+writeFileSync("dist/css/light.css", lightResult.css);
+
+const darkResult = sass.compile("./src/dark.scss");
+writeFileSync("dist/css/dark.css", darkResult.css);
 
 // Copy SCSS files
-cpSync("src/", "dist/", { recursive: true });
+cpSync("src/", "dist/scss", { recursive: true });

src/_styles.scss

@@ -0,0 +1,18 @@
+//----------------------------------------------------------------------------//
+//                               GENESYS STYLES                               //
+//----------------------------------------------------------------------------//
+
+/**
+* 7-1 PATTERN: 7 FOLDERS, 1 FILE.
+* Basically, you have all your partials stuffed into 7 different folders, and a
+* single file at the root level (usually named main.scss) which imports them all
+* to be compiled into a CSS stylesheet.
+* More info: https://sass-guidelin.es/#the-7-1-pattern
+*/
+
+
+@import "./utils";
+@import "./vendors";
+@import "./base";
+@import "./components";
+@import "./layout";

src/base/_index.scss

@@ -0,0 +1,5 @@
+// ----------------------------------- BASE --------------------------------- //
+
+
+// The reset, fonts and typography base styles are obtained from genesys-base-styles.
+@import "../../node_modules/@devoinc/genesys-icons/dist/gi-styles.scss";

src/components/_icons.scss

@@ -5,10 +5,6 @@
   @include text-color(body, base);
   font-size: map-get($icon-size-map, md);
 
-  &:not([class*="gi"]) {
-    @include icon-font;
-  }
-
   // Bold - Modifier - Icons
 
   &--bold {

src/components/_loader.scss

@@ -45,7 +45,7 @@
       spinner-circle-stroke-animated: $cmp-loader-spinner-animated-stroke-color-background-light,
       logo-even-path-fill: $cmp-loader-logo-even-path-color-background-light,
       logo-odd-path-fill: $cmp-loader-logo-odd-path-color-background-light,
-      custom-icon: $light-color
+      custom-icon: #FFFFFF
     ),
     dark: (
       spinner-circle-stroke: $cmp-loader-spinner-color-background-dark,
@@ -280,7 +280,7 @@
         left: 34.9%;
         width: 9px;
         height: 3.5px;
-        background-color: $light-color;
+        background-color: #FFFFFF;
         filter: blur(2.75px) opacity(80%);
         animation: bounce-dot-shadow-animation ease 0.5s alternate infinite;
         transform-origin: 50% center;

src/components/_typography.scss

@@ -137,3 +137,14 @@
 .underlined {
   text-decoration: underline;
 }
+
+
+// TEXT LEGIBLE - TYPOGRAPHY ------------------------------------------------ //
+
+.body-legible--max-width {
+  @each $size in $typography-body-size-list {
+    &-#{$size} {
+      max-width: map-get($body-legible-width-map, $size);
+    }
+  }
+}

src/components/modal/_modal.scss

@@ -1,6 +1,8 @@
 // -------------------------- MODAL - COMPONENTS ---------------------------- //
 
 
+// These styles depend on the fancybox library
+
 .modal {
   @import './variables-modal';
   @import './mixins-modal';
@@ -113,7 +115,7 @@
   // Close - Element - Modal
 
   &__close {
-    position: absolute;
+    position: absolute !important;
     z-index: inherit;
     top: calc((#{$modal-header-height}
       - #{$cmp-button-size-height-sm}) / 2);
@@ -203,46 +205,6 @@
       }
     }
   }
-
-
-  // CASE OF USE - MODAL ---------------------------------------------------- //
-
-  // Dashboard - Case of use - Modal
-
-  &#{$parent}--dashboard {
-    overflow: hidden;
-
-    .empty-state span,
-    .empty-state h3,
-    .empty-state p {
-      @include text-color($color: inverse);
-      opacity: .8;
-    }
-
-    #{$parent}__close {
-      @include get-button-type-styles($parent: &, $type: blend-inverse);
-      top: 1.2rem;
-      right: 1.2rem;
-    }
-
-    &.gridster > * {
-      margin: inherit;
-    }
-
-    &[style*="display: inline-block"] {
-      display: inherit !important;
-    }
-  }
 }
 
 
-// FANCYBOX CONTAINER - MODAL ----------------------------------------------- //
-
-.fancybox-container {
-  z-index: map-deep-get($elevation-map, overlay, z-index);
-
-  .fancybox-bg {
-    @include overlay-color-type;
-    opacity: 1;
-  }
-}

src/components/modal/_variables-modal.scss

@@ -64,4 +64,4 @@ $modal-size-map: (
     min-height: $cmp-modal-size-min-height-full,
     height: $cmp-modal-size-height-full,
   )
-)
+);

src/dark.scss

@@ -0,0 +1,7 @@
+// ------------------------------ DARK - THEME ------------------------------ //
+
+
+@import "../node_modules/@devoinc/genesys-brand-devo/dist/dark/scss/tokens.sass.alias";
+@import "../node_modules/@devoinc/genesys-brand-devo/dist/dark/scss/tokens.sass.cmp";
+
+@import "./styles";

src/layout/_form.scss

@@ -1,4 +1,4 @@
-// --------------------------- NEW - FORM - LAYOUT -------------------------- //
+// ----------------------------- FORM - LAYOUT ------------------------------ //
 
 
 .form {

src/light.scss

@@ -0,0 +1,7 @@
+// ------------------------------ LIGHT - THEME ----------------------------- //
+
+
+@import "../node_modules/@devoinc/genesys-brand-devo/dist/light/scss/tokens.sass.alias";
+@import "../node_modules/@devoinc/genesys-brand-devo/dist/light/scss/tokens.sass.cmp";
+
+@import "./styles";

src/utils/functions/_index.scss

@@ -10,4 +10,3 @@
 @import "./utils-functions/important-functions";
 @import "./utils-functions/map-deep-functions";
 @import "./utils-functions/selectors-functions";
-@import "./utils-functions/strip-unit-functions";

src/utils/functions/utils-functions/_selectors-functions.scss

@@ -14,7 +14,7 @@
     focused: '&:focus, &:focus-within#{if($parent, ', &#{$parent}--focused', '')}',
     focused-visible: '&:focus-visible#{if($parent, ', &#{$parent}--focused-visible', '')}',
     hovered: '&:hover#{if($parent, ', &#{$parent}--hovered', '')}',
-    not-checked: '&:not(:checked), &:not([checked="true"]), &:not([aria-checked="true"])#{if($parent, ', &:not(#{$parent}--checked)', '')}',
+    not-checked: '&:not(:checked, [checked="true"], [aria-checked="true"]#{if($parent, ', #{$parent}--checked', '')})',
     not-disabled: '&:not(:disabled):not([disabled]):not([aria-disabled="true"])#{if($parent, ':not(#{$parent}--disabled)', '')}',
     not-readonly: '&:not([readonly])#{if($parent, ':not(#{$parent}--readonly)', '')}',
     pressed: '&:active#{if($parent, ', &#{$parent}--pressed', '')}',

src/utils/mixins/_index.scss

@@ -33,7 +33,6 @@
 @import "./components-mixins/scrollbar-mixins";
 @import "./components-mixins/switch-mixins";
 @import "./components-mixins/tag-mixins";
-@import "./components-mixins/widgets-mixins";
 
 // Layout - Mixins
 

src/utils/mixins/components-mixins/_field-mixins.scss

@@ -437,9 +437,9 @@
   border-color: map-deep-get($field-control-color-map, border, $status, enabled);
   background-color: map-deep-get($field-control-color-map, background, $status, enabled);
 
-  #{$disabled-selector},
-  &.disabled {
-    #{$not-checked-selector} {
+  #{$not-checked-selector} {
+    #{$disabled-selector},
+    &.disabled {
       background-color: map-deep-get($field-control-color-map, border, $status, enabled);
       border-color: map-deep-get($field-control-color-map, border, $status, enabled);
     }