@maggioli-design-system/styles 3.11.0 → 5.0.0

package/dist/css/typography.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../../../node_modules/@maggioli-design-system/design-tokens/dist/scss/variables.scss","../../scss/global/scaffolding/typography.scss","../../scss/mixins/scaffolding.scss","../../scss/mixins/media.scss"],"names":[],"mappings":"AACA;AAAA;AAAA;AAAA;ACAE;EACE;;AAEA;EACE;;;ACqEF;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;EAI3B,aAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;EAI3B,aAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;EAI3B,aAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,mBAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,mBAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,mBAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;ACxBjC;EDsEE;IAlCQ,aAZuB;;;AAiD7B;EA7CE,WAJ2B;EAI3B,mBAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;ACxBjC;EDyEI;IArCM,aAZuB;;;;AA8C/B;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;;AD3BjC;EACE;;AAEA;EACE;;;ACqEF;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;;;AD3BjC;EACE;;AAEA;EACE;;;ACqEF;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B","file":"typography.css"}

package/dist/css/typography.min.css

@@ -1 +0,0 @@
-.text-primary{font-family:Roboto, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Helvetica Neue, sans-serif}.text-primary::placeholder{font-family:Roboto, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Helvetica Neue, sans-serif}.text-primary--h1{font-size:42px;font-weight:800;letter-spacing:-0.025rem;line-height:50px}.text-primary--h1::placeholder{font-size:42px;font-weight:800;letter-spacing:-0.025rem;line-height:50px}.text-primary--h2{font-size:33px;font-weight:800;letter-spacing:-0.025rem;line-height:50px}.text-primary--h2::placeholder{font-size:33px;font-weight:800;letter-spacing:-0.025rem;line-height:50px}.text-primary--h3{font-size:26px;font-weight:700;letter-spacing:-0.025rem;line-height:40px}.text-primary--h3::placeholder{font-size:26px;font-weight:700;letter-spacing:-0.025rem;line-height:40px}.text-primary--h4{font-size:20px;font-weight:600;line-height:30px}.text-primary--h4::placeholder{font-size:20px;font-weight:600;line-height:30px}.text-primary--h5{font-size:16px;font-weight:600;line-height:25px}.text-primary--h5::placeholder{font-size:16px;font-weight:600;line-height:25px}.text-primary--h6{font-size:20px;font-variant-caps:all-small-caps;font-weight:500;line-height:20px}.text-primary--h6::placeholder{font-size:20px;font-variant-caps:all-small-caps;font-weight:500;line-height:20px}.text-primary--overline{font-size:14px;font-variant-caps:all-small-caps;font-weight:500;line-height:15px}@media(min-width: 768px){.text-primary--overline{line-height:20px}}.text-primary--overline::placeholder{font-size:14px;font-variant-caps:all-small-caps;font-weight:500;line-height:15px}@media(min-width: 768px){.text-primary--overline::placeholder{line-height:20px}}.text-primary--action{font-size:14px;font-weight:500;line-height:24px}.text-primary--action::placeholder{font-size:14px;font-weight:500;line-height:24px}.text-secondary{font-family:Karla, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Helvetica Neue, sans-serif}.text-secondary::placeholder{font-family:Karla, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Helvetica Neue, sans-serif}.text-secondary--paragraph{font-size:20px;font-weight:400;line-height:35px}.text-secondary--paragraph::placeholder{font-size:20px;font-weight:400;line-height:35px}.text-secondary--detail{font-size:16px;font-weight:400;line-height:25px}.text-secondary--detail::placeholder{font-size:16px;font-weight:400;line-height:25px}.text-secondary--caption{font-size:13px;font-weight:400;line-height:20px}.text-secondary--caption::placeholder{font-size:13px;font-weight:400;line-height:20px}.text-secondary--label-paragraph{font-size:13px;font-weight:600;line-height:20px;text-transform:uppercase}.text-secondary--label-paragraph::placeholder{font-size:13px;font-weight:600;line-height:20px;text-transform:uppercase}.text-secondary--label-detail{font-size:12px;font-weight:600;line-height:20px;text-transform:uppercase}.text-secondary--label-detail::placeholder{font-size:12px;font-weight:600;line-height:20px;text-transform:uppercase}.text-secondary--label-caption{font-size:10px;font-weight:600;line-height:20px;text-transform:uppercase}.text-secondary--label-caption::placeholder{font-size:10px;font-weight:600;line-height:20px;text-transform:uppercase}.text-mono{font-family:Roboto Mono, monospace}.text-mono::placeholder{font-family:Roboto Mono, monospace}.text-mono--code{font-size:16px;font-weight:400;line-height:30px}.text-mono--code::placeholder{font-size:16px;font-weight:400;line-height:30px}.text-mono--hack{font-size:12px;font-weight:400;line-height:20px}.text-mono--hack::placeholder{font-size:12px;font-weight:400;line-height:20px}

package/dist/scss/config.scss

@@ -1,10 +0,0 @@
-$config: (
-  palette: (
-    format: ('rgb-channels'),
-    scaffold: ('background-color:background-color', 'color:color'),
-    colors: ('brand.maggioli', 'status.info', 'status.success', 'status.error', 'status.warning', 'adjust.tone')
-  ),
-  scaffold: (
-    properties: ('border-radius:border-radius', 'box-shadow:box-shadow', 'padding:padding', 'horizontal-padding:horizontal-padding', 'vertical-padding:vertical-padding')
-  )
-)!default;

package/dist/scss/export/base.scss

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

package/dist/scss/export/color-palette.scss

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

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,62 +0,0 @@
-@mixin scaffold-property-set ($name, $property, $list, $interactive: true) {
-
-  @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,
-        $interactive: $interactive
-      );
-    }
-  }
-}
-
-@each $property in $config-scaffold-properties {
-  @include scaffold-property-set($name: 'box-shadow', $property: $property, $list: $shadow, $interactive: true);
-  @include scaffold-property-set($name: 'border-radius', $property: $property, $list: $radius, $interactive: true);
-  @include scaffold-property-set($name: 'padding', $property: $property, $list: $list-sizes, $interactive: true);
-
-  @if (property-name($property, 2) == 'horizontal-padding') {
-
-    $property-selector: property-name($property, 1);
-    $property-name: property-name($property, 2);
-
-    @each $variant, $value in $list-sizes {
-      .#{$property-selector}-#{$variant} {
-        padding-left: $value !important;
-        padding-right: $value !important;
-      }
-    }
-  }
-
-  @if (property-name($property, 2) == 'vertical-padding') {
-
-    $property-selector: property-name($property, 1);
-    $property-name: property-name($property, 2);
-
-    @each $variant, $value in $list-sizes {
-      .#{$property-selector}-#{$variant} {
-        padding-bottom: $value !important;
-        padding-top: $value !important;
-      }
-    }
-  }
-}
-
-.transition-cosmetics {
-  transition: box-shadow get($tween, 'hover'), border-radius get($tween, 'hover'), padding get($tween, 'hover') !important;
-}
-
-.transition-colors {
-  transition: background-color get($tween, 'hover'), color get($tween, 'hover') !important;
-}
-
-.transition {
-  transition: background-color get($tween, 'hover'), color get($tween, 'hover'), box-shadow get($tween, 'hover'), border-radius get($tween, 'hover'), padding get($tween, 'hover') !important;
-}

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

@@ -1,97 +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;
-    }
-
-    .hover\:#{$property-selector}-#{$selector} {
-      &:hover {
-        #{$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'));