@inchurch/matcha-core 20.0.3

package/core.scss

@@ -0,0 +1,1508 @@
+// -------------------------------------------------------------------------------------------------------------------
+// @ Breakpoints generator
+//
+// Examples:
+// @include media-breakpoint("xs") {
+// Show styles in small devices ( Phones and Gadget, 0px and up < 600px )
+// }
+// @include media-breakpoint("gt-xs") {
+// Show styles in medium devices (landscapes and tablets, 600px and up < 1024px )
+// }
+// @include media-breakpoint("gt-sm") {
+// Show styles in large devices (tablets and small monitors, 1024px and up < 1440px)
+// }
+// @include media-breakpoint("gt-md") {
+// Show styles in X-Large devices (big desktops, 1440px and up < 1920)
+// }
+// @include media-breakpoint("gt-lg") {
+// Show styles in XX-Large devices (larger desktops, 1920px and up)
+// }
+// -------------------------------------------------------------------------------------------------------------------
+
+// Media step breakpoint mixin based on Angular Material lib
+$breakpoints: (
+    xs: 'screen and (max-width: 599px)',
+    sm: 'screen and (min-width: 600px) and (max-width: 1023px)',
+    md: 'screen and (min-width: 1024px) and (max-width: 1439px)',
+    lg: 'screen and (min-width: 1440px) and (max-width: 1919px)',
+    xl: 'screen and (min-width: 1920px) and (max-width: 5000px)',
+    lt-sm: 'screen and (max-width: 599px)',
+    lt-md: 'screen and (max-width: 1023px)',
+    lt-lg: 'screen and (max-width: 1439px)',
+    lt-xl: 'screen and (max-width: 1919px)',
+    gt-xs: 'screen and (min-width: 600px)',
+    gt-sm: 'screen and (min-width: 1024px)',
+    gt-md: 'screen and (min-width: 1440px)',
+    gt-lg: 'screen and (min-width: 1920px)'
+) !default;
+
+// Re-map the breakpoints for the helper classes
+$helper-breakpoints: (
+    initial: null,
+    xs: 'xs',
+    sm: 'gt-xs',
+    md: 'gt-sm',
+    lg: 'gt-md',
+    xl: 'gt-lg'
+);
+
+@mixin media-breakpoint($breakpointName) {
+    $mediaQuery: map-get($breakpoints, $breakpointName);
+    @if ($mediaQuery == null) {
+        @content;
+    } @else {
+        @media #{$mediaQuery} {
+            @content;
+        }
+    }
+}
+
+// Define the variable for the base size (usually 16 pixels = 1 rem).
+$base-font-size: 16px;
+
+// Function to convert pixels to rem.
+@function px-to-rem($value-in-px) {
+    @if $value-in-px != 0 {
+        @return calc($value-in-px / $base-font-size) * 1rem;
+    } @else {
+        @return $value-in-px;
+    }
+}
+
+// =====================================================================================================
+// DS Token maps — connect legacy utility classes to Design System CSS custom properties.
+// When a utility class (.px-16, .gap-8) resolves to a value with a corresponding DS token,
+// we emit var(--matcha-*) so Figma changes propagate. Values without direct tokens fall back to px.
+// =====================================================================================================
+$space-token-map: (
+    0:   var(--matcha-space-0, 0),
+    2:   var(--matcha-space-025, 2px),
+    4:   var(--matcha-space-050, 4px),
+    6:   var(--matcha-space-075, 6px),
+    8:   var(--matcha-space-100, 8px),
+    12:  var(--matcha-space-150, 12px),
+    16:  var(--matcha-space-200, 16px),
+    20:  var(--matcha-space-250, 20px),
+    24:  var(--matcha-space-300, 24px),
+    32:  var(--matcha-space-400, 32px),
+    40:  var(--matcha-space-500, 40px),
+    48:  var(--matcha-space-600, 48px),
+    64:  var(--matcha-space-800, 64px),
+    80:  var(--matcha-space-1000, 80px),
+    96:  var(--matcha-space-1200, 96px),
+);
+
+$radius-token-map: (
+    0:    var(--matcha-radius-none, 0),
+    2:    var(--matcha-radius-sm, 2px),
+    4:    var(--matcha-radius-md, 4px),
+    8:    var(--matcha-radius-lg, 8px),
+    16:   var(--matcha-radius-xl, 16px),
+    24:   var(--matcha-radius-2xl, 24px),
+    9999: var(--matcha-radius-pill, 9999px),
+);
+
+$font-size-token-map: (
+    10: var(--matcha-font-size-2xs, 10px),
+    12: var(--matcha-font-size-xs, 12px),
+    14: var(--matcha-font-size-sm, 14px),
+    16: var(--matcha-font-size-md, 16px),
+    18: var(--matcha-font-size-lg, 18px),
+    20: var(--matcha-font-size-xl, 20px),
+    24: var(--matcha-font-size-2xl, 24px),
+    32: var(--matcha-font-size-3xl, 32px),
+);
+
+$font-weight-token-map: (
+    400: var(--matcha-weight-regular, 400),
+    500: var(--matcha-weight-medium, 500),
+    600: var(--matcha-weight-semibold, 600),
+    700: var(--matcha-weight-bold, 700),
+    800: 800,  // Figma não tem weight/extrabold; literal 800
+    900: var(--matcha-weight-black, 900),
+);
+
+@function ds-space($size) {
+    $abs-size: if($size < 0, -$size, $size);
+    $token: map-get($space-token-map, $abs-size);
+    @if $token != null {
+        @if $size < 0 {
+            @return calc(-1 * #{$token});
+        }
+        @return $token;
+    }
+    @return #{$size}px;
+}
+
+@function ds-radius($size) {
+    $token: map-get($radius-token-map, $size);
+    @if $token != null {
+        @return $token;
+    }
+    @return #{$size}px;
+}
+
+@function ds-font-size($size) {
+    $token: map-get($font-size-token-map, $size);
+    @if $token != null {
+        @return $token;
+    }
+    @return #{$size}px;
+}
+
+@function ds-font-weight($weight) {
+    $token: map-get($font-weight-token-map, $weight);
+    @if $token != null {
+        @return $token;
+    }
+    @return $weight;
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Size classes | Width and Height
+// -----------------------------------------------------------------------------------------------------
+@mixin _size-classes($prop, $abbrev, $length, $size, $infix: "") {
+    .#{$abbrev}#{$infix}-#{$size} {
+        #{$prop}: $length;
+    }
+
+    .#{$abbrev}#{$infix}-#{$size}--force {
+        #{$prop}: $length !important;
+    }
+
+    .max-#{$abbrev}#{$infix}-#{$size} {
+        max-#{$prop}: $length;
+    }
+
+    .max-#{$abbrev}#{$infix}-#{$size}--force {
+        max-#{$prop}: $length !important;
+    }
+
+    .min-#{$abbrev}#{$infix}-#{$size} {
+        min-#{$prop}: $length;
+    }
+
+    .min-#{$abbrev}#{$infix}-#{$size}--force {
+        min-#{$prop}: $length !important;
+    }
+}
+@mixin generate-size-classes($helper-breakpoints) {
+    @each $breakpoint, $media-size in $helper-breakpoints {
+        @include media-breakpoint($media-size) {
+            $infix: if($media-size == null, "", "-#{$breakpoint}");
+
+            @each $prop, $abbrev in (height: h, width: w) {
+                // Pixels
+                @for $index from 0 through 64 {
+                    $size: $index * 4;
+                    $length: #{$size}px;
+
+                    @include _size-classes($prop, $abbrev, $length, $size, $infix);
+                }
+
+                // Percentages
+                @for $i from 0 through 20 {
+                    $i-p: 5 * $i;
+                    $size-p: 5% * $i;
+
+                    @include _size-classes($prop, $abbrev, $size-p, "#{$i-p}-p", $infix);
+                }
+
+                // Big sizes
+                @for $i from 3 through 20 {
+                    $size: $i * 100;
+                    $length: #{$size}px;
+
+                    @include _size-classes($prop, $abbrev, $length, $size, $infix);
+                }
+
+                // Auto
+                .#{$abbrev}#{$infix}-auto {
+                    #{$prop}: auto;
+                }
+
+                .#{$abbrev}#{$infix}-auto--force {
+                    #{$prop}: auto !important;
+                }
+            }
+        }
+    }
+}
+@include generate-size-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Spacing classes - Margin and Padding
+// Generate spacing values from -64 to 64 jumping from 4 to 4
+// -----------------------------------------------------------------------------------------------------
+@mixin _spacing-classes($prop, $abbrev, $length, $size, $infix: "") {
+    .#{$abbrev}#{$infix}-#{$size} {
+        #{$prop}: $length;
+    }
+
+    .#{$abbrev}#{$infix}-#{$size}--force {
+        #{$prop}: $length !important;
+    }
+
+    .#{$abbrev}x#{$infix}-#{$size} {
+        #{$prop}-right: $length;
+        #{$prop}-left: $length;
+    }
+
+    .#{$abbrev}x#{$infix}-#{$size}--force {
+        #{$prop}-right: $length !important;
+        #{$prop}-left: $length !important;
+    }
+
+    .#{$abbrev}y#{$infix}-#{$size} {
+        #{$prop}-top: $length;
+        #{$prop}-bottom: $length;
+    }
+
+    .#{$abbrev}y#{$infix}-#{$size}--force {
+        #{$prop}-top: $length !important;
+        #{$prop}-bottom: $length !important;
+    }
+
+    .#{$abbrev}t#{$infix}-#{$size} {
+        #{$prop}-top: $length;
+    }
+
+    .#{$abbrev}t#{$infix}-#{$size}--force {
+        #{$prop}-top: $length !important;
+    }
+
+    .#{$abbrev}r#{$infix}-#{$size} {
+        #{$prop}-right: $length;
+    }
+
+    .#{$abbrev}r#{$infix}-#{$size}--force {
+        #{$prop}-right: $length !important;
+    }
+
+    .#{$abbrev}b#{$infix}-#{$size} {
+        #{$prop}-bottom: $length;
+    }
+
+    .#{$abbrev}b#{$infix}-#{$size}--force {
+        #{$prop}-bottom: $length !important;
+    }
+
+    .#{$abbrev}l#{$infix}-#{$size} {
+        #{$prop}-left: $length;
+    }
+
+    .#{$abbrev}l#{$infix}-#{$size}--force {
+        #{$prop}-left: $length !important;
+    }
+}
+@mixin generate-spacing-classes($helper-breakpoints) {
+    @each $breakpoint, $media-size in $helper-breakpoints {
+        @include media-breakpoint($media-size) {
+            $infix: if($media-size == null, "", "-#{$breakpoint}");
+
+            @each $prop, $abbrev in (margin: m, padding: p) {
+                // For margins, include negative values
+                @for $index from -16 through 16 {
+                    $size: $index * 4;
+                    $length: ds-space($size); // uses --matcha-space-* tokens when available
+
+                    @include _spacing-classes($prop, $abbrev, $length, $size, $infix);
+                }
+
+                // For paddings, only positive values
+                @if ($prop == padding) {
+                    @for $index from 0 through 24 {
+                        $size: $index * 4;
+                        $length: ds-space($size); // uses --matcha-space-* tokens when available
+
+                        @include _spacing-classes($prop, $abbrev, $length, $size, $infix);
+                    }
+                }
+
+                // Special auto classes for margin
+                @if ($prop == margin) {
+                    .m#{$infix}-auto {
+                        margin: auto;
+                    }
+
+                    .m#{$infix}-auto--force {
+                        margin: auto !important;
+                    }
+
+                    .mt#{$infix}-auto {
+                        margin-top: auto;
+                    }
+
+                    .mt#{$infix}-auto--force {
+                        margin-top: auto !important;
+                    }
+
+                    .mr#{$infix}-auto {
+                        margin-right: auto;
+                    }
+
+                    .mr#{$infix}-auto--force {
+                        margin-right: auto !important;
+                    }
+
+                    .mb#{$infix}-auto {
+                        margin-bottom: auto;
+                    }
+
+                    .mb#{$infix}-auto--force {
+                        margin-bottom: auto !important;
+                    }
+
+                    .ml#{$infix}-auto {
+                        margin-left: auto;
+                    }
+
+                    .ml#{$infix}-auto--force {
+                        margin-left: auto !important;
+                    }
+
+                    .mx#{$infix}-auto {
+                        margin-right: auto;
+                        margin-left: auto;
+                    }
+
+                    .mx#{$infix}-auto--force {
+                        margin-right: auto !important;
+                        margin-left: auto !important;
+                    }
+
+                    .my#{$infix}-auto {
+                        margin-top: auto;
+                        margin-bottom: auto;
+                    }
+
+                    .my#{$infix}-auto--force {
+                        margin-top: auto !important;
+                        margin-bottom: auto !important;
+                    }
+                }
+            }
+        }
+    }
+}
+@include generate-spacing-classes($helper-breakpoints);
+
+// -------------------------------------------------------------------------------------------------------------------
+// @ Display classes | Flex and Grid
+// -------------------------------------------------------------------------------------------------------------------
+@mixin _grid-prop($i) {
+    display: grid;
+    grid-template-columns: repeat($i, minmax(0, 1fr));
+}
+@mixin generate-layout-grid($helper-breakpoints) {
+    $grid-length: 12;
+    $grid-prefix: "col";
+
+    [class^="grid-"] {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            @for $i from 1 through $grid-length {
+                .grid#{$infix}-#{$i} {
+                    @include _grid-prop($i);
+                }
+
+                .span#{$infix}-#{$i}c,
+                .colspan#{$infix}-#{$i} {
+                    grid-column-end: span #{$i};
+                }
+
+                .span#{$infix}-#{$i}r,
+                .rowspan#{$infix}-#{$i} {
+                    grid-row-end: span #{$i};
+                }
+            }
+        }
+    }
+}
+@mixin generate-layout-flex($helper-breakpoints) {
+    $grid-length: 12;
+    $grid-prefix: "col";
+    .row {
+        display: flex;
+        flex-wrap: wrap;
+
+        > div[class*="#{$grid-prefix}-"] {
+            box-sizing: border-box;
+        }
+
+        > div:not([class*="#{$grid-prefix}-"]) {
+            flex: 1;
+        }
+
+        @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+            @include media-breakpoint($materialBreakpoint) {
+                $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+                @for $i from 1 through $grid-length {
+                    .#{$grid-prefix}#{$infix}-#{$i} {
+                        flex-basis: percentage($i / $grid-length);
+                    }
+
+                    .#{$grid-prefix}-offset#{$infix}-#{$i} {
+                        margin-left: percentage($i / $grid-length);
+                    }
+                }
+                @each $classLabel, $cssValue in (align-start flex-start, align-center center, align-end flex-end) {
+                    > div[class*="#{$grid-prefix}-"].#{$classLabel} {
+                        align-self: $cssValue;
+                    }
+                }
+
+                @each $classLabel, $cssValue in (align-start flex-start, align-center center, align-end flex-end, space-around space-around, space-between space-between) {
+                    &.#{$classLabel} {
+                        justify-content: $cssValue;
+                    }
+                }
+            }
+        }
+    }
+}
+@include generate-layout-grid($helper-breakpoints);
+@include generate-layout-flex($helper-breakpoints);
+
+// -------------------------------------------------------------------------------------------------------------------
+// @Gaps classes
+// -------------------------------------------------------------------------------------------------------------------
+@mixin generate-gap-classes($helper-breakpoints) {
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            @for $i from 0 through 12 {
+                $size: $i * 4;
+                $gap-value: ds-space($size);
+                .gap#{$infix}-#{$size} {
+                    column-gap: $gap-value;
+                    row-gap: $gap-value;
+                }
+            }
+        }
+    }
+    // Dynamic gaps
+    .gap-inside {
+        -moz-column-gap: var(--matcha-space-200, 16px);
+        column-gap: var(--matcha-space-200, 16px);
+        row-gap: var(--matcha-space-200, 16px);
+    }
+    .gap-outside {
+        -moz-column-gap: var(--matcha-space-200, 16px);
+        column-gap: var(--matcha-space-200, 16px);
+        row-gap: var(--matcha-space-200, 16px);
+    }
+    @media screen and (min-width: 600px) {
+        .gap-outside {
+            -moz-column-gap: var(--matcha-space-300, 24px);
+            column-gap: var(--matcha-space-300, 24px);
+            row-gap: var(--matcha-space-300, 24px);
+        }
+    }
+}
+@include generate-gap-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Z-index classes
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-z-index-classes($helper-breakpoints) {
+    @each $breakpoint, $breakpointName in $helper-breakpoints {
+        @include media-breakpoint($breakpointName) {
+            $infix: if($breakpointName == null, "", "-#{$breakpoint}");
+
+            @for $i from -1 through 24 {
+                .z-index#{$infix}-#{$i} {
+                    z-index: #{$i};
+                }
+
+                .z-index#{$infix}-#{$i}--force {
+                    z-index: #{$i} !important;
+                }
+            }
+        }
+    }
+}
+@include generate-z-index-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Order classes
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-order-classes($helper-breakpoints) {
+    @each $breakpoint, $breakpointName in $helper-breakpoints {
+        @include media-breakpoint($breakpointName) {
+            $infix: if($breakpointName == null, "", "-#{$breakpoint}");
+
+            /* <integer> values */
+            @for $i from -12 through 12 {
+                .order#{$infix}-#{$i} {
+                    order: #{$i};
+                }
+
+                .order#{$infix}-#{$i}--force {
+                    order: #{$i} !important;
+                }
+            }
+
+            /* Global values */
+            @each $value in (inherit, initial) {
+                .order#{$infix}-#{$value} {
+                    order: #{$value};
+                }
+
+                .order#{$infix}-#{$value}--force {
+                    order: #{$value} !important;
+                }
+            }
+        }
+    }
+}
+@include generate-order-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Absolute position alignment classes
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-position-classes($helper-breakpoints) {
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            @each $position in (top, right, bottom, left) {
+                .place#{$infix}-#{$position} {
+                    #{$position}: 0;
+                }
+
+                .place#{$infix}-#{$position}--force {
+                    #{$position}: 0 !important;
+                }
+            }
+        }
+    }
+}
+@include generate-position-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Position classes
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-position-classes($helper-breakpoints) {
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            @each $pos in (relative, absolute, static, fixed) {
+                .position#{$infix}-#{$pos} {
+                    position: #{$pos};
+                }
+
+                .position#{$infix}-#{$pos}--force {
+                    position: #{$pos} !important;
+                }
+            }
+        }
+    }
+}
+@include generate-position-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Display classes
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-display-classes($helper-breakpoints) {
+    @each $breakpoint, $media-size in $helper-breakpoints {
+        @include media-breakpoint($media-size) {
+            $infix: if($media-size == null, "", "-#{$breakpoint}");
+
+            @each $class-suffix, $value in (
+                none: none,
+                inline: inline,
+                inline-block: inline-block,
+                block: block,
+                grid: grid,
+                table: table,
+                table-cell: table-cell,
+                table-row: table-row,
+                inline-flex: inline-flex,
+                flex: flex
+            ) {
+                .d#{$infix}-#{$class-suffix} {
+                    display: $value;
+                }
+
+                .d#{$infix}-#{$class-suffix}--force {
+                    display: $value !important;
+                }
+            }
+        }
+    }
+}
+@include generate-display-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Flex classes
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-flex-classes($helper-breakpoints) {
+    @each $breakpoint, $media-size in $helper-breakpoints {
+        @include media-breakpoint($media-size) {
+            $infix: if($media-size == null, "", "-#{$breakpoint}");
+
+            @each $class-suffix, $value in (
+                row: (display:flex, flex-direction: row),
+                row-reverse: (display:flex, flex-direction: row-reverse),
+                column: (display:flex, flex-direction: column),
+                column-reverse: (display:flex, flex-direction: column-reverse),
+
+                nowrap: (flex-wrap: nowrap),
+                wrap: (flex-wrap: wrap),
+
+                align-center: (display:flex, align-items: center),
+                align-start: (display:flex, align-items: flex-start),
+                align-end: (display:flex, align-items: flex-end),
+                align-inherit: (display:flex, align-items: inherit),
+                align-initial: (display:flex, align-items: initial),
+
+                align-self-end: (display:flex, align-self: flex-end),
+                align-self-start: (display:flex, align-self: flex-start),
+                align-self-inherit: (display:flex, align-self: inherit),
+                align-self-initial: (display:flex, align-self: initial),
+
+                center-center: (display:flex, justify-content: center, align-items: center),
+
+                justify-center: (display:flex, justify-content: center),
+                center: (display:flex, justify-content: center),
+
+                justify-end: (display:flex, justify-content: flex-end),
+                end: (display:flex, justify-content: flex-end),
+
+                justify-start: (display:flex, justify-content: flex-start),
+                start: (display:flex, justify-content: flex-start),
+
+                justify-inherit: (display:flex, justify-content: inherit),
+                inherit: (display:flex, justify-content: inherit),
+
+                justify-initial: (display:flex, justify-content: initial),
+                initial: (display:flex, justify-content: initial),
+
+                left: (display:flex, justify-content: left),
+                right: (display:flex, justify-content: right),
+                normal: (display:flex, justify-content: normal),
+                revert: (display:flex, justify-content: revert),
+
+                space-around: (display:flex, justify-content: space-around),
+                around: (display:flex, justify-content: space-around),
+
+                space-between: (display:flex, justify-content: space-between),
+                between: (display:flex, justify-content: space-between),
+
+                space-evenly: (display:flex, justify-content: space-evenly),
+                evenly: (display:flex, justify-content: space-evenly),
+
+                stretch: (display:flex, justify-content: stretch),
+                unset: (display:flex, justify-content: unset)
+
+            ) {
+                $class-name: ".flex#{$infix}-#{$class-suffix}";
+                $class-name-force: ".flex#{$infix}-#{$class-suffix}--force";
+
+                #{$class-name} {
+                    @each $property, $prop-value in $value {
+                        #{$property}: #{$prop-value};
+                    }
+                }
+
+                #{$class-name-force} {
+                    @each $property, $prop-value in $value {
+                        #{$property}: #{$prop-value} !important;
+                    }
+                }
+            }
+            // For margins, include negative values
+            @for $index from 0 through 3 {
+                .flex#{$infix}-grow-#{$index} {
+                    flex-grow: $index;
+                }
+                .flex#{$infix}-shrink-#{$index} {
+                    flex-shrink: $index;
+                }
+            }
+            .flex#{$infix}-full {
+                flex-grow: 1;
+                flex-shrink: 1;
+                flex-basis: 100%;
+                ;
+            }
+            .flex#{$infix}-basis-1 {
+                flex-basis: 100%;
+            }
+        }
+    }
+}
+@include generate-flex-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Font Weight classes
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-font-weight-classes($helper-breakpoints) {
+    @each $breakpoint, $media-size in $helper-breakpoints {
+        @include media-breakpoint($media-size) {
+            $infix: if($media-size == null, "", "-#{$breakpoint}");
+
+            @for $index from 1 through 9 {
+                $weight: $index * 100;
+                $weight-value: ds-font-weight($weight);
+
+                .fw#{$infix}-#{$weight} {
+                    font-weight: $weight-value;
+                }
+
+                .fw#{$infix}-#{$weight}--force {
+                    font-weight: $weight-value !important;
+                }
+            }
+        }
+    }
+}
+@include generate-font-weight-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Font Size classes
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-font-size-classes($helper-breakpoints) {
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+            $index: 0;
+            @while $index <= 96 {
+                $size: $index;
+                $fs-value: ds-font-size($size);
+                .fs#{$infix}-#{$size} {
+                    font-size: $fs-value;
+                }
+                .fs#{$infix}-#{$size}--force {
+                    font-size: $fs-value !important;
+                }
+                $index: $index + 1;
+            }
+        }
+    }
+}
+@include generate-font-size-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Letter Spacing classes
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-letter-spacing-classes($helper-breakpoints) {
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+            $index: 0;
+            @while $index <= 18 {
+                $spacing: $index * 0.1;
+                .ls#{$infix}-#{$index} {
+                    letter-spacing: #{$spacing}em;
+                }
+                .ls#{$infix}-#{$index}--force {
+                    letter-spacing: #{$spacing}em !important;
+                }
+                $index: $index + 1;
+            }
+
+        }
+    }
+}
+@include generate-letter-spacing-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Line Height classes
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-line-height-classes($helper-breakpoints) {
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            $index: 0;
+            @while $index <= 100 {
+                $height: $index * 1;
+
+                .lh#{$infix}-#{$height} {
+                    line-height: #{$height}px;
+                }
+
+                .lh#{$infix}-#{$height}--force {
+                    line-height: #{$height}px !important;
+                }
+
+                $index: $index + 1;
+            }
+        }
+    }
+}
+@include generate-line-height-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Aspect Ratio classes
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-aspect-ratio-classes($helper-breakpoints) {
+    // Aspect ratios definition
+    $aspect-ratios: (
+        'auto': 'auto',
+        '1x1': '1/1',
+        '1x2': '1/2',
+        '2x1': '2/1',
+        '3x4': '3/4',
+        '4x3': '4/3',
+        '9x16': '9/16',
+        '16x9': '16/9',
+        'half': '0.5',
+        'inherit': 'inherit',
+        'initial': 'initial',
+        'unset': 'unset'
+    );
+
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            @each $ratio, $value in $aspect-ratios {
+                $class-name: ".aspect-ratio#{$infix}-#{$ratio}";
+
+                #{$class-name} {
+                    aspect-ratio: #{$value};
+                }
+
+                #{$class-name}--force {
+                    aspect-ratio: #{$value} !important;
+                }
+            }
+        }
+    }
+}
+@include generate-aspect-ratio-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Cursor classes
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-cursor-classes($helper-breakpoints) {
+    $cursor-types: (
+        pointer,
+        default,
+        grab,
+        grabbing,
+        move,
+        help,
+        wait
+    );
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            @for $i from 1 through length($cursor-types) {
+                $cursor-type: nth($cursor-types, $i);
+
+                .cursor-#{$cursor-type}#{$infix} {
+                    cursor: #{$cursor-type};
+                }
+
+                .cursor-#{$cursor-type}#{$infix}--force {
+                    cursor: #{$cursor-type} !important;
+                }
+            }
+        }
+    }
+}
+@include generate-cursor-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Pointer Events classes
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-pointer-events-classes($helper-breakpoints) {
+    $pointer-events: (
+        auto,
+        none,
+        all,
+        visible,
+        visiblePainted,
+        visibleFill,
+        visibleStroke,
+        painted,
+        fill,
+        stroke
+    );
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            @for $i from 1 through length($pointer-events) {
+                $pointer-event: nth($pointer-events, $i);
+
+                .pointer-events-#{$pointer-event}#{$infix} {
+                    pointer-events: #{$pointer-event};
+                }
+
+                .pointer-events-#{$pointer-event}#{$infix}--force {
+                    pointer-events: #{$pointer-event} !important;
+                }
+            }
+        }
+    }
+}
+@include generate-pointer-events-classes($helper-breakpoints);
+
+
+// -----------------------------------------------------------------------------------------------------
+// @ Opacity
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-opacity-classes($helper-breakpoints) {
+    // Definindo os valores de opacidade e seus nomes de classe
+    $opacity-values: (
+        '0': 0,
+        '01': 0.1,
+        '02': 0.2,
+        '03': 0.3,
+        '04': 0.4,
+        '05': 0.5,
+        '06': 0.6,
+        '07': 0.7,
+        '08': 0.8,
+        '09': 0.9,
+        '10': 1.0,
+        '1':1
+    );
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+            @each $step, $opacity in $opacity-values {
+                .opacity#{$infix}-#{$step} {
+                    opacity: $opacity;
+                }
+                .opacity#{$infix}-#{$step}--force {
+                    opacity: $opacity !important;
+                }
+            }
+        }
+    }
+}
+@include generate-opacity-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Float & List Style
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-float-list-classes {
+    .clearfix::after {
+        content: "";
+        clear: both;
+        display: table;
+    }
+
+    .float-left {
+        float: left;
+    }
+
+    .float-right {
+        float: right;
+    }
+
+    .list-style-none {
+        list-style: none;
+    }
+
+    .list-style-disc {
+        list-style: disc;
+    }
+
+    .list-style-dot {
+        list-style: dot;
+    }
+}
+@include generate-float-list-classes;
+
+// -----------------------------------------------------------------------------------------------------
+// @ Text Decoration Helpers
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-text-decoration-classes($helper-breakpoints){
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            .text#{$infix}-decoration-strike,
+            .text#{$infix}-strike,
+            .text#{$infix}-line-through {
+                text-decoration: line-through;
+            }
+
+            .text#{$infix}-decoration-strike--force,
+            .text#{$infix}-strike--force,
+            .text#{$infix}-line-through--force {
+                text-decoration: line-through !important;
+            }
+
+            .text#{$infix}-decoration-none,
+            .text#{$infix}-none {
+                text-decoration: none;
+            }
+
+            .text#{$infix}-decoration-none--force,
+            .text#{$infix}-none--force {
+                text-decoration: none !important;
+            }
+
+            .text#{$infix}-super {
+                vertical-align: super;
+            }
+
+            .text#{$infix}-super--force {
+                vertical-align: super !important;
+            }
+
+            .text#{$infix}-sub {
+                vertical-align: sub;
+            }
+
+            .text#{$infix}-sub--force {
+                vertical-align: sub !important;
+            }
+        }
+    }
+}
+@include generate-text-decoration-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Text Alignment and Transform Helpers
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-text-alignment-classes($helper-breakpoints){
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            .text#{$infix}-capitalize {
+                text-transform: capitalize;
+            }
+
+            .text#{$infix}-capitalize--force {
+                text-transform: capitalize !important;
+            }
+
+            .text#{$infix}-lowercase {
+                text-transform: lowercase;
+            }
+
+            .text#{$infix}-lowercase--force {
+                text-transform: lowercase !important;
+            }
+
+            .text#{$infix}-uppercase {
+                text-transform: uppercase;
+            }
+
+            .text#{$infix}-uppercase--force {
+                text-transform: uppercase !important;
+            }
+
+            .text#{$infix}-nowrap {
+                white-space: nowrap;
+            }
+
+            .text#{$infix}-left {
+                text-align: left;
+            }
+
+            .text#{$infix}-left--force {
+                text-align: left !important;
+            }
+
+            .text#{$infix}-center {
+                text-align: center;
+            }
+
+            .text#{$infix}-center--force {
+                text-align: center !important;
+            }
+
+            .text#{$infix}-right {
+                text-align: right;
+            }
+
+            .text#{$infix}-right--force {
+                text-align: right !important;
+            }
+        }
+    }
+}
+@include generate-text-alignment-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Text Spacing and Truncation Helpers
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-text-spacing-classes($helper-breakpoints){
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            .text#{$infix}-boxed {
+                border-radius: 2px;
+                padding: 4px 8px;
+                margin: 0 8px;
+                font-size: 11px;
+                font-weight: 600;
+                white-space: nowrap;
+            }
+
+            .text#{$infix}-truncate,
+            .text#{$infix}-ellipsis {
+                display: block;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+    }
+}
+@include generate-text-spacing-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Overflow Helpers
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-overflow-classes($helper-breakpoints){
+    $overflow-classes: (
+        auto: auto,
+        scroll: scroll,
+        hidden: hidden,
+        overlay: overlay
+    );
+
+    $overflow-directions: (
+        x: (auto: auto, scroll: scroll, hidden: hidden, overlay: overlay),
+        y: (auto: auto, scroll: scroll, hidden: hidden, overlay: overlay)
+    );
+
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            // Classes para overflow geral
+            @each $class, $value in $overflow-classes {
+                .overflow#{$infix}-#{$class} {
+                    overflow: $value;
+                }
+                .overflow#{$infix}-#{$class}--force {
+                    overflow: $value !important;
+                }
+            }
+
+            // Classes para overflow no eixo x
+            @each $class, $value in map-get($overflow-directions, x) {
+                .overflow-x#{$infix}-#{$class} {
+                    overflow-x: $value;
+                }
+                .overflow-x#{$infix}-#{$class}--force {
+                    overflow-x: $value !important;
+                }
+            }
+
+            // Classes para overflow no eixo y
+            @each $class, $value in map-get($overflow-directions, y) {
+                .overflow-y#{$infix}-#{$class} {
+                    overflow-y: $value;
+                }
+                .overflow-y#{$infix}-#{$class}--force {
+                    overflow-y: $value !important;
+                }
+            }
+        }
+    }
+}
+@include generate-overflow-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Border Size Helpers
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-border-size-classes($helper-breakpoints){
+    $border-directions: (bottom: bb, top: bt, left: bl, right: br);
+
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            @for $i from 0 through 4 {
+                $border-value: $i * 2;
+                $border-suffix: "-#{$border-value}";
+
+                // Classes para borda geral
+                .border#{$infix}#{$border-suffix},
+                .b#{$infix}#{$border-suffix} {
+                    border: #{$border-value}px solid;
+                }
+
+                // Classes para bordas individuais
+                @each $direction, $abbrev in $border-directions {
+                    .border-#{$direction}#{$infix}#{$border-suffix},
+                    .#{$abbrev}#{$infix}#{$border-suffix} {
+                        border-#{$direction}: #{$border-value}px solid;
+                    }
+                    .border-#{$direction}#{$infix}#{$border-suffix}--force,
+                    .#{$abbrev}#{$infix}#{$border-suffix}--force {
+                        border-#{$direction}: #{$border-value}px solid !important;
+                    }
+                }
+            }
+            // Classe para borda nula
+            .b#{$infix}-none,
+            .border#{$infix}-none {
+                border: none;
+            }
+            .b#{$infix}-none--force,
+            .border#{$infix}-none--force {
+                border: none !important;
+            }
+        }
+    }
+
+
+}
+@include generate-border-size-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Border Style
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-border-style-classes($helper-breakpoints){
+    $border-styles: (
+        solid: solid,
+        dashed: dashed,
+        dotted: dotted,
+        double: double,
+        groove: groove,
+        ridge: ridge,
+        inset: inset,
+        outset: outset,
+        none: none
+    );
+
+    $border-directions: (
+        bottom: (solid: solid, dashed: dashed, dotted: dotted, double: double, groove: groove, ridge: ridge, inset: inset, outset: outset, none: none),
+        top: (solid: solid, dashed: dashed, dotted: dotted, double: double, groove: groove, ridge: ridge, inset: inset, outset: outset, none: none),
+        left: (solid: solid, dashed: dashed, dotted: dotted, double: double, groove: groove, ridge: ridge, inset: inset, outset: outset, none: none),
+        right: (solid: solid, dashed: dashed, dotted: dotted, double: double, groove: groove, ridge: ridge, inset: inset, outset: outset, none: none)
+    );
+
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            // Classes para estilo de borda geral
+            @each $class, $value in $border-styles {
+                .border-style#{$infix}-#{$class} {
+                    border-style: $value;
+                }
+                .border-style#{$infix}-#{$class}--force {
+                    border-style: $value !important;
+                }
+            }
+        }
+    }
+}
+@include generate-border-style-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Border Radius Helpers
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-radius-classes($helper-breakpoints){
+    $radius-directions: (bottom: b, top: t, left: l, right: r);
+
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            @for $i from 0 through 12 {
+                $radius-value: $i * 2;
+                $radius-suffix: "-#{$radius-value}";
+                $r: ds-radius($radius-value);
+
+                // Classes para borda geral
+                .radius#{$infix}#{$radius-suffix} {
+                    border-radius: $r; // Sem !important
+                }
+
+                // Classes para bordas individuais
+                @each $direction, $abbrev in $radius-directions {
+                    @if $direction == bottom {
+                        .radius-#{$direction}#{$infix}#{$radius-suffix} {
+                            border-radius: 0 0 #{$r} #{$r}; // Sem !important
+                        }
+
+                        .radius-#{$direction}#{$infix}#{$radius-suffix}--force {
+                            border-radius: 0 0 #{$r} #{$r} !important; // Com !important
+                        }
+                    } @else if $direction == top {
+                        .radius-#{$direction}#{$infix}#{$radius-suffix} {
+                            border-radius: #{$r} #{$r} 0 0; // Sem !important
+                        }
+
+                        .radius-#{$direction}#{$infix}#{$radius-suffix}--force {
+                            border-radius: #{$r} #{$r} 0 0 !important; // Com !important
+                        }
+                    } @else if $direction == left {
+                        .radius-#{$direction}#{$infix}#{$radius-suffix} {
+                            border-radius: #{$r} 0 0 #{$r}; // Sem !important
+                        }
+
+                        .radius-#{$direction}#{$infix}#{$radius-suffix}--force {
+                            border-radius: #{$r} 0 0 #{$r} !important; // Com !important
+                        }
+                    } @else if $direction == right {
+                        .radius-#{$direction}#{$infix}#{$radius-suffix} {
+                            border-radius: 0 #{$r} #{$r} 0; // Sem !important
+                        }
+
+                        .radius-#{$direction}#{$infix}#{$radius-suffix}--force {
+                            border-radius: 0 #{$r} #{$r} 0 !important; // Com !important
+                        }
+                    }
+                }
+            }
+            .radius#{$infix}-full {
+                border-radius: 9999px;
+            }
+            .radius#{$infix}-full--force {
+                border-radius: 9999px !important;
+            }
+            .radius#{$infix}-none {
+                border-radius: 0;
+            }
+            .radius#{$infix}-none--force {
+                border-radius: 0 !important;
+            }
+        }
+    }
+    // Classe para borda nula
+    .border-none {
+        border: none !important;
+    }
+}
+@include generate-radius-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Hover - Show/Hide
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-hover-show-hide-classes {
+    .on-hover-show:hover {
+        opacity: 1;
+    }
+    .on-hover-hide:hover {
+        opacity: 0;
+    }
+}
+@include generate-hover-show-hide-classes;
+
+// -----------------------------------------------------------------------------------------------------
+// @ Transition
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-transition-classes() {
+    $durations: (100, 300);
+    $easing: ('linear', 'ease-in', 'ease-out', 'ease-in-out');
+    @each $duration in $durations {
+        @each $ease in $easing {
+            $class-suffix: if($ease == 'linear', 'l', if($ease == 'ease-in', 'ei', if($ease == 'ease-out', 'eo', 'eio')));
+            .ts-#{$duration}-#{$class-suffix} {
+                transition: all #{$duration}ms #{$ease};
+            }
+        }
+    }
+}
+@include generate-transition-classes();
+
+// -----------------------------------------------------------------------------------------------------
+// @ Rotate Animation
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-rotate-animation-classes() {
+    // Define as durações desejadas para a animação de rotação
+    $durations: (1, 2, 3);
+    @each $duration in $durations {
+        .rotate-infinity-#{$duration}s {
+            animation: spin #{$duration}s infinite;
+        }
+    }
+}
+// Define a keyframes para a animação de rotação
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+@include generate-rotate-animation-classes();
+
+// -----------------------------------------------------------------------------------------------------
+// @ Border Size Helpers
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-line-clamp-classes($helper-breakpoints){
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+            @for $i from 0 through 6 {
+                // Classes para borda geral
+                .line-clamp#{$infix}-#{$i}{
+                    overflow: hidden;
+                    display: -webkit-box;
+                    -webkit-box-orient: vertical;
+                    -webkit-line-clamp: $i;
+                    line-clamp: $i;
+                    text-overflow: ellipsis;
+                    word-break: break-word;
+                    white-space: initial;
+                    -webkit-box-orient: vertical;
+                }
+            }
+            .line-clamp#{$infix}-none{
+                overflow: visible;
+                display: block;
+                -webkit-box-orient: horizontal;
+                -webkit-line-clamp: none;
+                line-clamp: none;
+            }
+        }
+    }
+}
+@include generate-line-clamp-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Masonry
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-masonry-classes($helper-breakpoints){
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+            @for $i from 1 through 12 {
+                // Classes para borda geral
+                .masonry#{$infix}-#{$i}{
+                    column-count: $i;
+                    > *{
+                        break-inside: avoid;
+                        display: inline-block;
+                        width: 100%;
+                    }
+                }
+            }
+            @for $i from 0 through 12 {
+                $size: $i * 4;
+                // Classes para borda geral
+                .masonry-gap#{$infix}-#{$size}{
+                    column-gap: #{$size}px;
+                    > *{
+                        margin-bottom: #{$size}px;
+                    }
+                }
+            }
+        }
+    }
+}
+@include generate-masonry-classes($helper-breakpoints);
+
+