From 74ef5be0cef620b14a45c89323ef5c1d7d4870b7 Mon Sep 17 00:00:00 2001 From: Victor Saa Date: Sun, 2 Apr 2023 22:16:42 -0500 Subject: [PATCH 01/15] refactor: map-modifiers mixin BREAKING CHANGE: renamed base colors --- package.json | 4 +- src/base/_animations.scss | 4 +- src/base/modifiers/_box-model.scss | 14 +- src/base/modifiers/_colors.scss | 6 +- src/base/modifiers/_dimensions.scss | 8 +- src/base/modifiers/_gaping.scss | 16 +- src/base/modifiers/_text.scss | 8 +- src/components/_avatar.scss | 23 +-- src/components/_box.scss | 196 +++---------------- src/components/_buttonLink.scss | 89 ++++----- src/components/_buttonToggle.scss | 161 ++++------------ src/components/_hr.scss | 62 +++--- src/components/_inputSelect.scss | 199 +++++++------------ src/components/_inputText.scss | 128 +++++++------ src/components/_inputToggle.scss | 55 +++--- src/components/_link.scss | 58 +++--- src/components/_svgIcon.scss | 62 +++--- src/components/_text.scss | 2 +- src/components/module.scss | 284 +++++++++++----------------- src/layouts/_columns.scss | 6 +- src/layouts/_grid.scss | 10 +- src/layouts/_navigationX.scss | 11 +- src/layouts/_table.scss | 266 +++----------------------- src/pseudos/_tooltip.scss | 8 +- src/utils/_funciones.scss | 23 ++- src/utils/_mixins.scss | 31 +++ src/utils/_variables.scss | 79 +++++--- yarn.lock | 20 +- 28 files changed, 658 insertions(+), 1175 deletions(-) diff --git a/package.json b/package.json index 64c7c2e..10c990c 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,7 @@ "postcss-precision": "vis97c/postcss-precision", "postcss-sort-media-queries": "^3.8.9", "prettier": "^2.0.5", - "sass": "1.32.10", + "sass": "^1.60.0", "semantic-release": "^17.1.1", "sort-css-media-queries": "vis97c/sort-css-media-queries", "stylelint": "^13.6.1", @@ -124,4 +124,4 @@ "copyFilesSettings": { "whenFileExists": "overwrite" } -} \ No newline at end of file +} diff --git a/src/base/_animations.scss b/src/base/_animations.scss index d5fc331..ae043df 100644 --- a/src/base/_animations.scss +++ b/src/base/_animations.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + /// # Animations /// Animations are also taken into account.\ /// They are his own kind of component so all animations comes with a shared set of classes to alter them. @@ -64,7 +66,7 @@ @for $i from 1 through 20 { &.--delay-#{$i} { - animation-delay: #{$i/10}s; + animation-delay: #{math.div($i, 10)}s; } &.--iterations-#{$i} { animation-iteration-count: #{$i}; diff --git a/src/base/modifiers/_box-model.scss b/src/base/modifiers/_box-model.scss index 4087a33..3408f19 100644 --- a/src/base/modifiers/_box-model.scss +++ b/src/base/modifiers/_box-model.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + // box sizing .--boxSizing { &-content { @@ -109,21 +111,21 @@ $models: margin, padding; // all sides .--#{$m}-#{$i*5} { @include extend-viewports-classes { - #{$model}: #{$i/3}rem; + #{$model}: #{math.div($i, 3)}rem; } } // X axis .--#{$m}X-#{$i*5} { @include extend-viewports-classes { - #{$model}-left: #{$i/3}rem; - #{$model}-right: #{$i/3}rem; + #{$model}-left: #{math.div($i, 3)}rem; + #{$model}-right: #{math.div($i, 3)}rem; } } // Y axis .--#{$m}Y-#{$i*5} { @include extend-viewports-classes { - #{$model}-top: #{$i/3}rem; - #{$model}-bottom: #{$i/3}rem; + #{$model}-top: #{math.div($i, 3)}rem; + #{$model}-bottom: #{math.div($i, 3)}rem; } } } @@ -145,7 +147,7 @@ $models: margin, padding; @for $i from 1 through 20 { .--#{$mcd}-#{$i * 5} { @include extend-viewports-classes { - #{$model}-#{$direction}: #{$i/3}rem; + #{$model}-#{$direction}: #{math.div($i, 3)}rem; } } } diff --git a/src/base/modifiers/_colors.scss b/src/base/modifiers/_colors.scss index 47f6d36..5a76ab1 100644 --- a/src/base/modifiers/_colors.scss +++ b/src/base/modifiers/_colors.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + // Default striped .--striped { @include extend-viewports-classes { @@ -62,14 +64,14 @@ // background color .--bgColor-#{$name}#{$i} { @include extend-viewports-classes { - background-color: color($name, $i/10); + background-color: color($name, math.div($i, 10)); } } // borderColor .--bdrColor-#{$name}#{$i} { @include extend-viewports-classes { - border-color: color($name, $i/10); + border-color: color($name, math.div($i, 10)); } } } diff --git a/src/base/modifiers/_dimensions.scss b/src/base/modifiers/_dimensions.scss index 4a814df..aa29933 100644 --- a/src/base/modifiers/_dimensions.scss +++ b/src/base/modifiers/_dimensions.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + // Dimensions $dimensions: width, height; $sizes: 1400, 1300, 1080, 980, 880, 780, 580, 480, 440, 220, 180; @@ -39,7 +41,7 @@ $sizes: 1400, 1300, 1080, 980, 880, 780, 580, 480, 440, 220, 180; @each $size in $sizes { &-#{$size} { @include extend-viewports-classes { - #{$dimension}: #{round($size/15)}rem; + #{$dimension}: #{round(math.div($size, 15))}rem; } } } @@ -83,7 +85,9 @@ $sizes: 1400, 1300, 1080, 980, 880, 780, 580, 480, 440, 220, 180; @each $size in $sizes { &-#{$size} { @include extend-viewports-classes { - #{$constrain}-#{$dimension}: #{round($size/15)}rem; + #{$constrain}-#{$dimension}: #{round( + math.div($size, 15) + )}rem; } } } diff --git a/src/base/modifiers/_gaping.scss b/src/base/modifiers/_gaping.scss index fde8eb2..906bcbd 100644 --- a/src/base/modifiers/_gaping.scss +++ b/src/base/modifiers/_gaping.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + // grid Gap // both dimension // @@ -89,19 +91,19 @@ .--gap-#{$i*5} { // flex, column & grid only @include extend-viewports-classes(false, $viewports) { - gap: #{$i/3}rem; + gap: #{math.div($i, 3)}rem; } } .--gapX-#{$i*5} { // flex, column & grid only, X axis @include extend-viewports-classes(false, $viewports) { - column-gap: #{$i/3}rem; + column-gap: #{math.div($i, 3)}rem; } } .--gapY-#{$i*5} { // flex, column & grid only, Y axis @include extend-viewports-classes(false, $viewports) { - row-gap: #{$i/3}rem; + row-gap: #{math.div($i, 3)}rem; } } @@ -109,23 +111,23 @@ // Fallback for gap on non supporting browsers .--gaping-#{$i*5} { @include extend-viewports-classes(false, $viewports) { - margin: 0 -#{$i/3}rem -#{$i/3}rem 0; + margin: 0 -#{math.div($i, 3)}rem -#{math.div($i, 3)}rem 0; > * { - margin: 0 #{$i/3}rem #{$i/3}rem 0; + margin: 0 #{math.div($i, 3)}rem #{math.div($i, 3)}rem 0; } } } .--gapingX-#{$i*5} { @include extend-viewports-classes(false, $viewports) { > *:not(:last-child) { - margin-right: #{$i/3}rem; + margin-right: #{math.div($i, 3)}rem; } } } .--gapingY-#{$i*5} { @include extend-viewports-classes(false, $viewports) { > *:not(:last-child) { - margin-bottom: #{$i/3}rem; + margin-bottom: #{math.div($i, 3)}rem; } } } diff --git a/src/base/modifiers/_text.scss b/src/base/modifiers/_text.scss index d5d9ade..3981463 100644 --- a/src/base/modifiers/_text.scss +++ b/src/base/modifiers/_text.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + // text tranform // // @group GlobalModifiers @@ -213,7 +215,7 @@ &, > :not([class*="-txtCo"]) { // Color - color: color(dark, 0.7); + color: $textColor; } } @@ -261,7 +263,7 @@ &, > :not([class*="-txtCo"]) { // Shadow - color: color($name, $i/10); + color: color($name, math.div($i, 10)); } } } @@ -272,7 +274,7 @@ &, > :not([class*="-txtSh"]) { // Shadow - text-shadow: 1px 1px 1px color($name, $i/10); + text-shadow: 1px 1px 1px color($name, math.div($i, 10)); } } } diff --git a/src/components/_avatar.scss b/src/components/_avatar.scss index 74ab1ea..e0b6bc4 100644 --- a/src/components/_avatar.scss +++ b/src/components/_avatar.scss @@ -1,3 +1,5 @@ +@use "sass:meta"; + // avatar proporcion 1:1 // // @group Components @@ -5,18 +7,17 @@ // avatar size // // @group Modifiers - &, - &.--size { - width: 3rem; - height: 3rem; - } - &.--size-lg { - width: 9rem; - height: 9rem; + @function avatarSizeSelector($name) { + @return ".--size-#{$name}"; } - &.--size-md { - width: 6rem; - height: 6rem; + @include extend-map-modifiers( + $elementSizes, + meta.get-function("avatarSizeSelector"), + sm + ) + using($name, $value) { + width: $value; + height: $value; } img { diff --git a/src/components/_box.scss b/src/components/_box.scss index dcd34c1..0524137 100644 --- a/src/components/_box.scss +++ b/src/components/_box.scss @@ -1,3 +1,5 @@ +@use "sass:meta"; + // Comment // // @group Components @@ -40,22 +42,31 @@ // Comment theme // // @group Modifiers - &.--tm-light { + @function boxThemeSelector($name) { + @return ".--tm-#{$name}"; + } + @include extend-map-modifiers( + $extendedThemeColors, + meta.get-function("boxThemeSelector"), + secondary, + ':not([class*="-tm-"])' + ) + using($name, $value) { &:not([class*="-bgCo"]) { - background: color(light, 0.1); + background: color($name, 0.1); } &:hover { - border-color: color(light, 0.1); + border-color: color($name, 0.1); } &:hover, &.is--active, &.is--routeExact:not(.no--route):not(.no--routeExact) { &.--bttn, &.--button { - background: color(light, 0.2); - // border-color: color(light, 0.3); + background: color($name, 0.2); + // border-color: color($name, 0.3); .box { - box-shadow: 3px 3px 9px color(light, 0.3); + box-shadow: 3px 3px 9px color($name, 0.3); } } } @@ -63,11 +74,12 @@ &.--button { &:not([class*="-txtCo"]) { // Color - color: color(light); + color: color($name); } } } - &.--tm-lightAlt { + + &.--tm-lightComplement { &:not([class*="-bgCo"]) { background: color(light); } @@ -95,148 +107,6 @@ } } - &.--tm-primary { - &:not([class*="-bgCo"]) { - background: color(primary, 0.1); - } - &:hover { - border-color: color(primary, 0.1); - } - &:hover, - &.is--active, - &.is--routeExact:not(.no--route):not(.no--routeExact) { - &.--bttn, - &.--button { - background: color(primary, 0.2); - // border-color: color(primary, 0.3); - .box { - box-shadow: 3px 3px 9px color(primary, 0.3); - } - } - } - &.--bttn, - &.--button { - &:not([class*="-txtCo"]) { - // Color - color: color(primary); - } - } - } - - &.--tm-primaryAlt { - &:not([class*="-bgCo"]) { - background: color(primaryAlt, 0.1); - } - &:hover { - border-color: color(primaryAlt, 0.1); - } - &:hover, - &.is--active, - &.is--routeExact:not(.no--route):not(.no--routeExact) { - &.--bttn, - &.--button { - background: color(primaryAlt, 0.2); - // border-color: color(primaryAlt, 0.3); - .box { - box-shadow: 3px 3px 9px color(primaryAlt, 0.3); - } - } - } - &.--bttn, - &.--button { - &:not([class*="-txtCo"]) { - // Color - color: color(primaryAlt); - } - } - } - - &.--tm-danger { - &:not([class*="-bgCo"]) { - background: color(danger, 0.1); - } - &:hover { - border-color: color(danger, 0.1); - } - &:hover, - &.is--active, - &.is--routeExact:not(.no--route):not(.no--routeExact) { - &.--bttn, - &.--button { - background: color(danger, 0.2); - // border-color: color(danger, 0.3); - .box { - box-shadow: 3px 3px 9px color(danger, 0.3); - } - } - } - &.--bttn, - &.--button { - &:not([class*="-txtCo"]) { - // Color - color: color(danger); - } - } - } - - &.--tm-success { - &:not([class*="-bgCo"]) { - background: color(success, 0.1); - } - &:hover { - border-color: color(success, 0.1); - } - &:hover, - &.is--active, - &.is--routeExact:not(.no--route):not(.no--routeExact) { - &.--bttn, - &.--button { - background: color(success, 0.2); - // border-color: color(success, 0.3); - .box { - box-shadow: 3px 3px 9px color(success, 0.3); - } - } - } - &.--bttn, - &.--button { - &:not([class*="-txtCo"]) { - // Color - color: color(success); - } - } - } - - // default theme - &:not([class*="-tm"]), - &.--tm-secondary { - &:not([class*="-bgCo"]) { - background: color(secondary, 0.1); - } - &:hover { - border-color: color(secondary, 0.1); - } - &:hover, - &.is--active, - &.is--routeExact:not(.no--route):not(.no--routeExact) { - &.--bttn, - &.--button { - background: color(secondary, 0.2); - // border-color: color(secondary, 0.3); - .box { - box-shadow: 3px 3px 9px color(secondary, 0.3); - } - } - } - &.--bttn, - &.--button { - &:not([class*="-txtCo"]) { - // Color - color: color(secondary); - } - } - } - // button behavior // // @group Modifiers @@ -258,22 +128,16 @@ // this assummes there is only one child // // @group Modifiers - &.--square { - &-xs { - width: 3rem; - } - &-sm { - width: 5rem; - } - &-lg { - width: 9rem; - } - &, - &-md { - width: 6rem; - } - } - &[class*="-square"] { + @function boxSquareSelector($name) { + @return ".--square-#{$name}"; + } + @include extend-map-modifiers( + $elementSizes, + meta.get-function("boxSquareSelector"), + md + ) + using($name, $value) { + width: $value; margin: 0 auto; overflow: hidden; &:before { diff --git a/src/components/_buttonLink.scss b/src/components/_buttonLink.scss index 4a75c94..b6c869a 100644 --- a/src/components/_buttonLink.scss +++ b/src/components/_buttonLink.scss @@ -1,3 +1,5 @@ +@use "sass:meta"; + // link Navigation element // // @group Components @@ -91,76 +93,49 @@ // nav link themes // // @group Modifiers - &.--tm { - &-light-primaryAlt { - &:hover, - &.is--active, - &.is--routeExact:not(.no--route):not(.no--routeExact) { - --rw: #{color(primaryAlt)}; - } - } - &-primary-light { - &:hover, - &.is--active, - &.is--routeExact:not(.no--route):not(.no--routeExact) { - --rw: #{color(primary)}; - } - } - &-danger-light { - --rw: #{color(danger)}; - &:not(.is--active) { - &:not(.is--routeExact), - &.is--routeExact.no--route, - &.is--routeExact.no--routeExact { - &:hover { - --rw: #{color(danger, 0.5)}; - } - } - } - &.is--active, - &.is--routeExact:not(.no--route):not(.no--routeExact) { - --rw: #{color(danger, 0.7)}; - } - } - &-success-light { - --rw: #{color(success)}; - &:not(.is--active) { - &:not(.is--routeExact), - &.is--routeExact.no--route, - &.is--routeExact.no--routeExact { - &:hover { - --rw: #{color(success, 0.5)}; - } - } - } - &.is--active, - &.is--routeExact:not(.no--route):not(.no--routeExact) { - --rw: #{color(success, 0.7)}; - } - } - &-primary-light, - &-light-primaryAlt { - --rw: #{color(light)}; - } + @function buttonLinkThemeSelector($name) { + @return ".--tm-#{$name}-light"; } - // default theme: secondary - &:not([class*="-tm"]), - &.--tm-secondary-light { - --rw: #{color(secondary)}; + @include extend-map-modifiers( + $extendedThemeColors, + meta.get-function("buttonLinkThemeSelector"), + secondary, + ':not([class*="-tm-"])' + ) + using($name, $value) { + --rw: #{color($name)}; &:not(.is--active) { &:not(.is--routeExact), &.is--routeExact.no--route, &.is--routeExact.no--routeExact { &:hover { - --rw: #{color(dark, 0.5)}; + --rw: #{color($name, 0.5)}; } } } &.is--active, &.is--routeExact:not(.no--route):not(.no--routeExact) { - --rw: #{color(dark, 0.7)}; + --rw: #{color($name, 0.7)}; } } + + // Alternative themes + @function buttonLinkThemeSelectorLight($name) { + @return ".--tm-light-#{$name}"; + } + @include extend-map-modifiers( + $extendedThemeColors, + meta.get-function("buttonLinkThemeSelectorLight") + ) + using($name, $value) { + --rw: #{color(light)}; + &:hover, + &.is--active, + &.is--routeExact:not(.no--route):not(.no--routeExact) { + --rw: #{color($name)}; + } + } + i.icon, .svg { &:last-child { diff --git a/src/components/_buttonToggle.scss b/src/components/_buttonToggle.scss index 59964e9..85917fa 100644 --- a/src/components/_buttonToggle.scss +++ b/src/components/_buttonToggle.scss @@ -1,3 +1,5 @@ +@use "sass:meta"; + // Toggle button // this element is expected to be an