@maggioli-design-system/styles 4.0.2 → 5.0.0

package/dist/scss/export/colors.scss

@@ -1,2 +0,0 @@
-@import '../import-framework';
-@import '../global/scaffolding/colors';

package/dist/scss/export/components.scss

@@ -1,2 +0,0 @@
-@import '../import-framework';
-@import '../global/components/view-limit';

package/dist/scss/export/styles.scss

@@ -1,8 +0,0 @@
-@import '../import-framework';
-@import '../global/scaffolding/colors';
-@import '../global/scaffolding/cosmetics';
-@import '../global/scaffolding/tokens';
-@import '../global/scaffolding/typography';
-@import '../global/base';
-@import '../global/components/view-limit';
-@import '../global/utility/overflow';

package/dist/scss/export/typography.scss

@@ -1,2 +0,0 @@
-@import '../import-framework';
-@import '../global/scaffolding/typography';

package/dist/scss/extends/scroll.scss

@@ -1,21 +0,0 @@
-%scroll {
-  overflow: auto;
-
-  // sass-lint:disable no-vendor-prefixes
-  -webkit-overflow-scrolling: touch;
-
-  &::-webkit-scrollbar {
-    background-color: transparent;
-    display: none;
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: transparent;
-    display: none;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: transparent;
-    display: none;
-  }
-}

package/dist/scss/functions/assets.scss

@@ -1,3 +0,0 @@
-@function asset ($filename) {
-  @return url('/assets/img/#{$filename}');
-}

package/dist/scss/functions/color.scss

@@ -1,24 +0,0 @@
-@function color ($path, $contrast: '', $opacity: 1) {
-  // color: color('brand.maggioli', 3) => color: var(--hex-brand-maggioli-03)
-  $name: str-replace($path, '.', '-');
-
-  @if $contrast != '' {
-
-    $contrast: '-#{$contrast}';
-  }
-
-  @if $opacity == 1 {
-
-    @if list-has-value($palette-format, 'hex') {
-      @return var(--hex-#{$name}#{$contrast});
-    } @else {
-      @return RGB(var(--#{$name}#{$contrast})); /* stylelint-disable-line */
-    }
-  }
-
-  @if list-has-value($palette-format, 'rgb-channels') {
-    @return rgba(var(--#{$name}#{$contrast}), $opacity);
-  } @else {
-    @return RGB(var(--#{$name}#{$contrast})); /* stylelint-disable-line */
-  }
-}

package/dist/scss/functions/lists.scss

@@ -1,27 +0,0 @@
-@function list-has-value ($list, $search-value) {
-  // list-has-value(('hello-world', 'foo'), 'hello') @return false
-  // list-has-value(('hello-world', 'foo'), 'hello-world') @return true
-
-  @each $value in $list {
-
-    @if ($search-value == $value) {
-      @return true;
-    }
-  }
-  @return false;
-}
-
-@function list-like-value ($list, $search-value) {
-  // list-like-value(('hello-world', 'foo'), 'hello') @return true
-  // list-like-value(('hello-world', 'foo'), 'hello-world') @return true
-
-  @each $value in $list {
-    @each $name, $char in $value {
-
-      @if (str-index($name, $search-value)) {
-        @return true;
-      }
-    }
-  }
-  @return false;
-}

package/dist/scss/functions/maps.scss

@@ -1,54 +0,0 @@
-@function get ($map, $search-key) {
-  // es:
-  // background-color: get($backgrounds, 'alto');
-  @each $key, $value in $map {
-
-    @if ('#{$key}' == '#{$search-key}') {
-      @return $value;
-    }
-  }
-  @return null;
-
-  @error 'No attribute key \'#{$key}\' found inside map #{$map}\nPlease checkout your code to fine where is the problem.';
-}
-
-@function reverse ($map) {
-
-  $result: null;
-
-  @if type-of($map) == 'map' {
-
-    $keys: map-keys($map);
-    $map-reversed: ();
-
-    @for $i from length($keys) through 1 {
-
-      $map-reversed: map-merge($map-reversed, (nth($keys, $i): map-get($map, nth($keys, $i))));
-    }
-
-    @if type-of($map-reversed) == 'map' {
-
-      $result: $map-reversed;
-    } @else {
-
-      @warn 'There was an error reversing the order of "#{$map}"';
-    }
-  } @else {
-
-    @warn '"#{$map}" is not a valid map';
-  }
-
-  @return $result;
-}
-
-@function token ($path, $map, $separator: '.') {
-
-  $list: str-split($path, $separator);
-  $partial-map: $map;
-
-  @each $key in $list {
-
-    $partial-map: get($partial-map, $key);
-  }
-  @return $partial-map;
-}

package/dist/scss/functions/math.scss

@@ -1,18 +0,0 @@
-$gutter: 20px !default;
-
-@function scale-value ($value, $scale) {
-  @return round($value * $scale);
-}
-
-@function spacing ($scale: 1) {
-  @return scale-value($gutter, $scale);
-}
-
-@function s ($scale: 1, $value: null) {
-
-  @if $value {
-    @return scale-value($value, $scale);
-  } @else {
-    @return spacing($scale);
-  }
-}

package/dist/scss/functions/media.scss

@@ -1,10 +0,0 @@
-@function rule ($viewport) {
-
-  $rule: get($media, $viewport);
-
-  @if type-of($rule) == 'map' {
-    @return '#{map-keys($rule)}-width: #{get($rule, map-keys($rule))}';
-  }
-
-  @return 'min-width: #{$rule}';
-}

package/dist/scss/functions/scaffolding.scss

@@ -1,8 +0,0 @@
-@function property-name ($property, $index: 1) {
-
-  @if (length(str-split($property, ':')) == 2) {
-    @return nth(str-split($property, ':'), $index);
-  }
-
-  @return $property;
-}

package/dist/scss/functions/strings.scss

@@ -1,102 +0,0 @@
-@function lead-zero ($value) {
-
-  @if str-length($value) < 2 {
-    @return '0#{$value}';
-  }
-
-  @return $value;
-}
-
-@function capitalize ($string) {
-  @return to-upper-case(str-slice($string, 1, 1)) + str-slice($string, 2);
-}
-
-@function str-ucfirst ($string) {
-  @return capitalize($string);
-}
-
-@function uncapitalize ($string) {
-  @return to-lower-case(str-slice($string, 1, 1)) + str-slice($string, 2);
-}
-
-@function str-lcfirst ($string) {
-  @return uncapitalize($string);
-}
-
-@function str-ucwords ($string) {
-
-  $progress: $string;
-  $result: '';
-  $running: true;
-
-  @while $running {
-
-    $index: str-index($progress, ' ');
-
-    @if $index {
-
-      $result: $result + capitalize(str-slice($progress, 1, $index));
-      $progress: str-slice($progress, ($index + 1));
-    } @else {
-
-      $running: false;
-    }
-  }
-
-  @return capitalize($result) + capitalize($progress);
-}
-
-@function contain ($list, $value) {
-  @return not not index($list, $value);
-}
-
-@function camelize ($string) {
-
-  $progress: $string;
-  $result: '';
-  $exclude: ' ', '-', '–', '—', '_', ',', ';', ':', '.';
-
-  @while str-length($progress) > 0 {
-
-    $char: str-slice($progress, 1, 1);
-
-    @if contain($exclude, $char) {
-
-      $progress: capitalize(str-slice($progress, 2, 2)) + str-slice($progress, 3);
-    } @else {
-
-      $result: $result + $char;
-      $progress: str-slice($progress, 2);
-    }
-  }
-  @return $result;
-}
-
-@function str-replace ($string, $search, $replace: '') {
-
-  $index: str-index($string, $search);
-
-  @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
-  }
-
-  @return $string;
-}
-
-@function str-split ($string, $separator) {
-
-  $split-arr: ();
-  $index: str-index($string, $separator);
-
-  @while $index != null {
-
-    $item: str-slice($string, 1, $index - 1);
-    $split-arr: append($split-arr, $item);
-    $string: str-slice($string, $index + 1);
-    $index: str-index($string, $separator);
-  }
-
-  $split-arr: append($split-arr, $string);
-
-  @return $split-arr;
-}

package/dist/scss/global/base.scss

@@ -1,101 +0,0 @@
-$default-font-set: 'paragraph';
-$font-base-styles: $font-secondary-styles;
-$font-base-variants: $font-secondary-variants;
-
-body,
-html {
-  margin: 0;
-}
-
-body {
-  background-color: color('adjust.tone');
-  color: color('adjust.tone', '03');
-  font-family: get($font-family, 'secondary');
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-tap-highlight-color: transparent;
-  text-align: -webkit-left;
-  text-align: left;
-  text-rendering: optimizeLegibility;
-  text-size-adjust: 100%;
-  width: 100%;
-  @include apply-styles-set($map: $font-base-styles, $set: $default-font-set);
-}
-
-button {
-  font-family: get($font-family, 'primary');
-}
-
-input,
-textarea {
-  appearance: none;
-  @include apply-styles-set($map: $font-base-styles, $set: $default-font-set);
-
-  &::placeholder {
-    user-select: none;
-    @include apply-styles-set($map: $font-base-styles, $set: $default-font-set);
-  }
-}
-
-b,
-strong {
-  @include apply-styles-set($map: $font-base-variants, $set: 'bold');
-}
-
-a {
-  color: color('brand.maggioli');
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-  text-decoration: none;
-}
-
-a,
-aside,
-body,
-code,
-div,
-datalist,
-footer,
-form,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-header,
-hr,
-html,
-input,
-li,
-main,
-section,
-span,
-ul,
-textarea {
-  box-sizing: border-box;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p {
-  margin: 0;
-}
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit;
-}
-
-::selection {
-  background-color: color('brand.maggioli', '15');
-  color: color('brand.maggioli');
-}

package/dist/scss/global/components/view-limit.scss

@@ -1,9 +0,0 @@
-.view-limit {
-  box-sizing: border-box;
-  margin: auto;
-  max-width: 1024px;
-
-  @include media ('large') {
-    max-width: 1280px;
-  }
-}

package/dist/scss/global/scaffolding/colors.scss

@@ -1,66 +0,0 @@
-@function get-var-name ($prefix, $group-name, $tint-name, $color-name) {
-
-  @if $color-name == 'color' {
-
-    $color-name: '';
-  } @else {
-
-    $color-name: ' #{$color-name}';
-  }
-
-  @if $prefix == 'rgb' {
-    @return str-replace('--#{$group-name $tint-name}#{$color-name}', ' ', '-');
-  }
-  @return str-replace('--#{$prefix}-#{$group-name $tint-name}#{$color-name}', ' ', '-');
-}
-
-@mixin scaffold-vars ($light-mode) {
-  @each $group-name, $group-map in get($tokens, 'color') {
-
-    @if list-like-value($palette-colors, $group-name) {
-
-      @each $tint-name, $tints-map in $group-map {
-
-        @if list-like-value($palette-colors, $tint-name) {
-
-          @each $light-mode-name, $light-modes-map in $tints-map {
-
-            @if ($light-mode-name == $light-mode) {
-              @each $color-name, $color-value in $light-modes-map {
-
-                @if list-has-value($palette-format, 'rgb-channels') {
-                  #{get-var-name('rgb', $group-name, $tint-name, lead-zero($color-name))}: #{red($color-value), green($color-value), blue($color-value)};
-                }
-
-                @if list-has-value($palette-format, 'hex') {
-                  #{get-var-name('hex', $group-name, $tint-name, lead-zero($color-name))}: #{$color-value};
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-:root {
-  @include scaffold-vars('light');
-
-  .color-mode {
-    &--auto {
-
-      @media (prefers-color-scheme: dark) { /* stylelint-disable-line */
-        @include scaffold-vars('dark');
-      }
-    }
-
-    &--dark {
-      @include scaffold-vars('dark');
-    }
-
-    &--light {
-      @include scaffold-vars('light');
-    }
-  }
-}

package/dist/scss/global/scaffolding/cosmetics.scss

@@ -1,23 +0,0 @@
-@mixin scaffold-property-set ($name, $property, $list) {
-
-  @if (property-name($property, 2) == $name) {
-
-    $property-selector: property-name($property, 1);
-    $property-name: property-name($property, 2);
-
-    @each $variant, $value in $list {
-      @include scaffold-property (
-        $property-name: $property-name,
-        $property-selector: $property-selector,
-        $variant: $variant,
-        $value: $value
-      );
-    }
-  }
-}
-
-@each $property in $config-scaffold-properties {
-  @include scaffold-property-set($name: 'box-shadow', $property: $property, $list: $shadow);
-  @include scaffold-property-set($name: 'border-radius', $property: $property, $list: $radius);
-  @include scaffold-property-set($name: 'padding', $property: $property, $list: $list-sizes);
-}

package/dist/scss/global/scaffolding/tokens.scss

@@ -1,91 +0,0 @@
-@mixin scaffold-property-color ($property, $group-name, $tint-name, $contrast-level, $color-mode) {
-
-  $selector: '';
-
-  @if $contrast-level == 'color' {
-
-    $selector: str-replace('#{$group-name $tint-name}', ' ', '-');
-  } @else {
-
-    $selector: str-replace('#{$group-name $tint-name $contrast-level}', ' ', '-');
-  }
-
-  $color-name: str-replace('#{$group-name $tint-name}', ' ', '.');
-  $property-selector: property-name($property, 1);
-  $property-name: property-name($property, 2);
-
-  @if ($color-mode == 'light') {
-    .#{$property-selector}-#{$selector} {
-      #{$property-name}: color($color-name, $contrast-level) !important;
-    }
-  } @else {
-    .color-mode {
-      &--auto {
-        @media (prefers-color-scheme: dark) { /* stylelint-disable-line */
-          .dark\:#{$property-selector}-#{$selector} {
-            #{$property-name}: color($color-name, $contrast-level) !important;
-          }
-        }
-      }
-
-      &--dark {
-        .dark\:#{$property-selector}-#{$selector} {
-          #{$property-name}: color($color-name, $contrast-level) !important;
-        }
-      }
-    }
-  }
-}
-
-@mixin scaffold-color-mode ($color-mode, $light-mode-name, $group-name, $tint-name, $light-modes-map) {
-
-  $i: 0;
-
-  @each $contrast, $contrast-value in $light-modes-map {
-
-    @if $light-mode-name == $color-mode {
-
-      $i: $i + 1;
-
-      @each $property-name in $palette-scaffold {
-
-        @include scaffold-property-color(
-          $property: $property-name,
-          $group-name: $group-name,
-          $tint-name: $tint-name,
-          $contrast-level: lead-zero($contrast),
-          $color-mode: $color-mode
-        );
-      }
-    }
-  }
-}
-
-@mixin scaffold-colors ($colors) {
-  @each $group-name, $group-map in $colors {
-    @each $tint-name, $tints-map in $group-map {
-      @each $light-mode-name, $light-modes-map in $tints-map {
-
-        @include scaffold-color-mode (
-          $color-mode: 'light',
-          $light-mode-name: $light-mode-name,
-          $group-name: $group-name,
-          $tint-name: $tint-name,
-          $light-modes-map: $light-modes-map
-        );
-
-        @include scaffold-color-mode (
-          $color-mode: 'dark',
-          $light-mode-name: $light-mode-name,
-          $group-name: $group-name,
-          $tint-name: $tint-name,
-          $light-modes-map: $light-modes-map
-        );
-      }
-    }
-  }
-}
-
-// stylelint-disable scss/at-mixin-named-arguments
-
-@include scaffold-colors($colors: get($tokens, 'color'));

package/dist/scss/global/scaffolding/typography.scss

@@ -1,17 +0,0 @@
-@mixin scaffold-text ($style, $font-styles) {
-  .text-#{$style} {
-    font-family: get($font-family, $style);
-
-    &::placeholder {
-      font-family: get($font-family, $style);
-    }
-  }
-  @include add-styles-set(
-    $map: $font-styles,
-    $name: 'text-#{$style}'
-  );
-}
-
-@include scaffold-text($style: 'primary',   $font-styles: $font-primary-styles);
-@include scaffold-text($style: 'secondary', $font-styles: $font-secondary-styles);
-@include scaffold-text($style: 'mono',      $font-styles: $font-mono-styles);

package/dist/scss/global/utility/overflow.scss

@@ -1,9 +0,0 @@
-.overflow {
-  &-hidden {
-    overflow: hidden !important;
-  }
-
-  &-visible {
-    overflow: visible !important;
-  }
-}

package/dist/scss/import-framework.scss

@@ -1,13 +0,0 @@
-@import 'functions/lists';
-@import 'functions/maps';
-@import 'functions/math';
-@import 'functions/strings';
-@import 'functions/color';
-@import 'functions/media';
-@import 'functions/scaffolding';
-@import 'mixins/parent';
-@import 'mixins/export';
-@import 'mixins/media';
-@import 'mixins/scaffolding';
-@import 'extends/scroll';
-@import 'theme';

package/dist/scss/import-global.scss

@@ -1,8 +0,0 @@
-@import 'import-framework';
-@import 'global/scaffolding/colors';
-@import 'global/scaffolding/cosmetics';
-@import 'global/scaffolding/tokens';
-@import 'global/scaffolding/typography';
-@import 'global/base';
-@import 'global/components/view-limit';
-@import 'global/utility/overflow';

package/dist/scss/mixins/export.scss

@@ -1,49 +0,0 @@
-@mixin get-font-viewports ($viewports, $set, $family) {
-  @each $viewport, $properties in map-get($viewports, $set) {
-    @each $property, $value in $properties {
-
-      $name: #{$family}-#{$set}-#{$viewport}-#{$property};
-      $camel-name: camelize($name);
-
-      #{$camel-name}: $value;
-    }
-  }
-}
-
-@mixin export-font-style ($map, $family, $prefix: '') {
-  @each $set, $viewports in $map {
-
-    $name: #{$family}-#{$set};
-    $selector: #{$family} #{$family}--#{$set};
-
-    @if $prefix != '' {
-
-      $selector: #{$prefix}-#{$family} #{$prefix}-#{$family}--#{$set};
-    }
-
-    $camel-name: camelize($name);
-
-    #{$camel-name}Selector: $selector;
-    @include get-font-viewports ($viewports: $map, $set: $set, $family: $family);
-  }
-}
-
-@mixin export-media-queries ($media) {
-
-  $list: '';
-
-  @each $viewport, $rule in $media {
-
-    @if ($list == '') {
-
-      $list: #{$viewport};
-    } @else {
-
-      $list: #{$viewport},#{$list};
-    }
-
-    $camel-name: camelize($viewport);
-
-    #{$camel-name}: #{$rule};
-  }
-}