unit.gl 0.1.13 → 0.3.1

package/scss/classes/_utilities.scss

@@ -0,0 +1,1488 @@
+////
+///
+/// Utilities Classes Module
+/// ===========================================================================
+///
+/// This module generates comprehensive utility classes for spacing, sizing,
+/// positioning, and borders using the curated q() units scale. These classes
+/// provide granular control similar to utility-first frameworks like Tailwind,
+/// but using the unit.gl design system.
+///
+/// Utilities Generated:
+/// - Padding: .p_q*, .pt_q*, .pr_q*, .pb_q*, .pl_q*, .px_q*, .py_q*
+/// - Margin: .m_q*, .mt_q*, .mr_q*, .mb_q*, .ml_q*, .mx_q*, .my_q*
+/// - Gap: .gap_q*, .gap_col_q*, .gap_row_q*
+/// - Width: .w_q*, .min_w_q*, .max_w_q*
+/// - Height: .h_q*, .min_h_q*, .max_h_q*
+/// - Inset: .inset_q*, .top_q*, .right_q*, .bottom_q*, .left_q*, .inset_x_q*, .inset_y_q*
+/// - Border Width: .border_q*, .border_t_q*, .border_r_q*, .border_b_q*, .border_l_q*, .border_x_q*, .border_y_q*
+/// - Border Radius: .rounded_q*, .rounded_t_q*, .rounded_r_q*, .rounded_b_q*, .rounded_l_q*
+///
+/// Responsive Variants:
+/// All utilities are generated with responsive modifiers for all breakpoints:
+/// - us: .us_p_q4, .us_m_q8, .us_gap_q12, etc.
+/// - ss: .ss_p_q4, .ss_m_q8, .ss_gap_q12, etc.
+/// - xs: .xs_p_q4, .xs_m_q8, .xs_gap_q12, etc.
+/// - sm: .sm_p_q4, .sm_m_q8, .sm_gap_q12, etc.
+/// - md: .md_p_q4, .md_m_q8, .md_gap_q12, etc.
+/// - lg: .lg_p_q4, .lg_m_q8, .lg_gap_q12, etc.
+/// - xl: .xl_p_q4, .xl_m_q8, .xl_gap_q12, etc.
+/// - ul: .ul_p_q4, .ul_m_q8, .ul_gap_q12, etc.
+///
+/// CSS Variables:
+/// All utilities also set corresponding CSS custom properties for dynamic JS usage:
+/// - --q-padding-*
+/// - --q-margin-*
+/// - --q-gap-*
+/// - --q-width-*
+/// - --q-height-*
+/// - --q-inset-*
+/// - --q-border-*
+///
+/// @group Classes
+/// @author Scape Agency
+/// @link https://unit.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+///
+////
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "sass:map";
+@use "../mixins" as mixins;
+@use "../variables" as variables;
+@use "../maps" as maps;
+
+// ============================================================================
+// Utilities Generation
+// ============================================================================
+
+// Generate base utilities (no breakpoint prefix)
+@include mixins.padding-utilities();
+@include mixins.margin-utilities();
+@include mixins.gap-utilities();
+@include mixins.width-utilities();
+@include mixins.height-utilities();
+@include mixins.inset-utilities();
+@include mixins.border-width-utilities();
+@include mixins.border-radius-utilities();
+
+// ============================================================================
+// Responsive Utilities - US Breakpoint (Ultra-Small)
+// ============================================================================
+
+@include mixins.breakpoint(us) {
+    @each $key, $value in maps.$q_steps {
+        // Padding
+        .us_p_q#{$key} {
+            padding: variables.q($value);
+        }
+        .us_pt_q#{$key} {
+            padding-top: variables.q($value);
+        }
+        .us_pr_q#{$key} {
+            padding-right: variables.q($value);
+        }
+        .us_pb_q#{$key} {
+            padding-bottom: variables.q($value);
+        }
+        .us_pl_q#{$key} {
+            padding-left: variables.q($value);
+        }
+        .us_px_q#{$key} {
+            padding-left: variables.q($value);
+            padding-right: variables.q($value);
+        }
+        .us_py_q#{$key} {
+            padding-top: variables.q($value);
+            padding-bottom: variables.q($value);
+        }
+
+        // Margin
+        .us_m_q#{$key} {
+            margin: variables.q($value);
+        }
+        .us_mt_q#{$key} {
+            margin-top: variables.q($value);
+        }
+        .us_mr_q#{$key} {
+            margin-right: variables.q($value);
+        }
+        .us_mb_q#{$key} {
+            margin-bottom: variables.q($value);
+        }
+        .us_ml_q#{$key} {
+            margin-left: variables.q($value);
+        }
+        .us_mx_q#{$key} {
+            margin-left: variables.q($value);
+            margin-right: variables.q($value);
+        }
+        .us_my_q#{$key} {
+            margin-top: variables.q($value);
+            margin-bottom: variables.q($value);
+        }
+
+        // Gap
+        .us_gap_q#{$key} {
+            gap: variables.q($value);
+        }
+        .us_gap_col_q#{$key} {
+            column-gap: variables.q($value);
+        }
+        .us_gap_row_q#{$key} {
+            row-gap: variables.q($value);
+        }
+
+        // Width
+        .us_w_q#{$key} {
+            width: variables.q($value);
+        }
+        .us_min_w_q#{$key} {
+            min-width: variables.q($value);
+        }
+        .us_max_w_q#{$key} {
+            max-width: variables.q($value);
+        }
+
+        // Height
+        .us_h_q#{$key} {
+            height: variables.q($value);
+        }
+        .us_min_h_q#{$key} {
+            min-height: variables.q($value);
+        }
+        .us_max_h_q#{$key} {
+            max-height: variables.q($value);
+        }
+
+        // Inset
+        .us_inset_q#{$key} {
+            top: variables.q($value);
+            right: variables.q($value);
+            bottom: variables.q($value);
+            left: variables.q($value);
+        }
+        .us_top_q#{$key} {
+            top: variables.q($value);
+        }
+        .us_right_q#{$key} {
+            right: variables.q($value);
+        }
+        .us_bottom_q#{$key} {
+            bottom: variables.q($value);
+        }
+        .us_left_q#{$key} {
+            left: variables.q($value);
+        }
+        .us_inset_x_q#{$key} {
+            left: variables.q($value);
+            right: variables.q($value);
+        }
+        .us_inset_y_q#{$key} {
+            top: variables.q($value);
+            bottom: variables.q($value);
+        }
+
+        // Border Width
+        .us_border_q#{$key} {
+            border-width: variables.q($value);
+        }
+        .us_border_t_q#{$key} {
+            border-top-width: variables.q($value);
+        }
+        .us_border_r_q#{$key} {
+            border-right-width: variables.q($value);
+        }
+        .us_border_b_q#{$key} {
+            border-bottom-width: variables.q($value);
+        }
+        .us_border_l_q#{$key} {
+            border-left-width: variables.q($value);
+        }
+        .us_border_x_q#{$key} {
+            border-left-width: variables.q($value);
+            border-right-width: variables.q($value);
+        }
+        .us_border_y_q#{$key} {
+            border-top-width: variables.q($value);
+            border-bottom-width: variables.q($value);
+        }
+
+        // Border Radius
+        .us_rounded_q#{$key} {
+            border-radius: variables.q($value);
+        }
+        .us_rounded_t_q#{$key} {
+            border-top-left-radius: variables.q($value);
+            border-top-right-radius: variables.q($value);
+        }
+        .us_rounded_r_q#{$key} {
+            border-top-right-radius: variables.q($value);
+            border-bottom-right-radius: variables.q($value);
+        }
+        .us_rounded_b_q#{$key} {
+            border-bottom-left-radius: variables.q($value);
+            border-bottom-right-radius: variables.q($value);
+        }
+        .us_rounded_l_q#{$key} {
+            border-top-left-radius: variables.q($value);
+            border-bottom-left-radius: variables.q($value);
+        }
+        .us_rounded_tl_q#{$key} {
+            border-top-left-radius: variables.q($value);
+        }
+        .us_rounded_tr_q#{$key} {
+            border-top-right-radius: variables.q($value);
+        }
+        .us_rounded_br_q#{$key} {
+            border-bottom-right-radius: variables.q($value);
+        }
+        .us_rounded_bl_q#{$key} {
+            border-bottom-left-radius: variables.q($value);
+        }
+    }
+}
+
+// ============================================================================
+// Responsive Utilities - XS Breakpoint
+// ============================================================================
+
+// ============================================================================
+// Responsive Utilities - SS Breakpoint
+// ============================================================================
+
+@include mixins.breakpoint(ss) {
+    @each $key, $value in maps.$q_steps {
+        // Padding
+        .ss_p_q#{$key} {
+            padding: variables.q($value);
+        }
+        .ss_pt_q#{$key} {
+            padding-top: variables.q($value);
+        }
+        .ss_pr_q#{$key} {
+            padding-right: variables.q($value);
+        }
+        .ss_pb_q#{$key} {
+            padding-bottom: variables.q($value);
+        }
+        .ss_pl_q#{$key} {
+            padding-left: variables.q($value);
+        }
+        .ss_px_q#{$key} {
+            padding-left: variables.q($value);
+            padding-right: variables.q($value);
+        }
+        .ss_py_q#{$key} {
+            padding-top: variables.q($value);
+            padding-bottom: variables.q($value);
+        }
+
+        // Margin
+        .ss_m_q#{$key} {
+            margin: variables.q($value);
+        }
+        .ss_mt_q#{$key} {
+            margin-top: variables.q($value);
+        }
+        .ss_mr_q#{$key} {
+            margin-right: variables.q($value);
+        }
+        .ss_mb_q#{$key} {
+            margin-bottom: variables.q($value);
+        }
+        .ss_ml_q#{$key} {
+            margin-left: variables.q($value);
+        }
+        .ss_mx_q#{$key} {
+            margin-left: variables.q($value);
+            margin-right: variables.q($value);
+        }
+        .ss_my_q#{$key} {
+            margin-top: variables.q($value);
+            margin-bottom: variables.q($value);
+        }
+
+        // Gap
+        .ss_gap_q#{$key} {
+            gap: variables.q($value);
+        }
+        .ss_gap_col_q#{$key} {
+            column-gap: variables.q($value);
+        }
+        .ss_gap_row_q#{$key} {
+            row-gap: variables.q($value);
+        }
+
+        // Width
+        .ss_w_q#{$key} {
+            width: variables.q($value);
+        }
+        .ss_min_w_q#{$key} {
+            min-width: variables.q($value);
+        }
+        .ss_max_w_q#{$key} {
+            max-width: variables.q($value);
+        }
+
+        // Height
+        .ss_h_q#{$key} {
+            height: variables.q($value);
+        }
+        .ss_min_h_q#{$key} {
+            min-height: variables.q($value);
+        }
+        .ss_max_h_q#{$key} {
+            max-height: variables.q($value);
+        }
+
+        // Inset
+        .ss_inset_q#{$key} {
+            top: variables.q($value);
+            right: variables.q($value);
+            bottom: variables.q($value);
+            left: variables.q($value);
+        }
+        .ss_top_q#{$key} {
+            top: variables.q($value);
+        }
+        .ss_right_q#{$key} {
+            right: variables.q($value);
+        }
+        .ss_bottom_q#{$key} {
+            bottom: variables.q($value);
+        }
+        .ss_left_q#{$key} {
+            left: variables.q($value);
+        }
+        .ss_inset_x_q#{$key} {
+            left: variables.q($value);
+            right: variables.q($value);
+        }
+        .ss_inset_y_q#{$key} {
+            top: variables.q($value);
+            bottom: variables.q($value);
+        }
+
+        // Border Width
+        .ss_border_q#{$key} {
+            border-width: variables.q($value);
+        }
+        .ss_border_t_q#{$key} {
+            border-top-width: variables.q($value);
+        }
+        .ss_border_r_q#{$key} {
+            border-right-width: variables.q($value);
+        }
+        .ss_border_b_q#{$key} {
+            border-bottom-width: variables.q($value);
+        }
+        .ss_border_l_q#{$key} {
+            border-left-width: variables.q($value);
+        }
+        .ss_border_x_q#{$key} {
+            border-left-width: variables.q($value);
+            border-right-width: variables.q($value);
+        }
+        .ss_border_y_q#{$key} {
+            border-top-width: variables.q($value);
+            border-bottom-width: variables.q($value);
+        }
+
+        // Border Radius
+        .ss_rounded_q#{$key} {
+            border-radius: variables.q($value);
+        }
+        .ss_rounded_t_q#{$key} {
+            border-top-left-radius: variables.q($value);
+            border-top-right-radius: variables.q($value);
+        }
+        .ss_rounded_r_q#{$key} {
+            border-top-right-radius: variables.q($value);
+            border-bottom-right-radius: variables.q($value);
+        }
+        .ss_rounded_b_q#{$key} {
+            border-bottom-left-radius: variables.q($value);
+            border-bottom-right-radius: variables.q($value);
+        }
+        .ss_rounded_l_q#{$key} {
+            border-top-left-radius: variables.q($value);
+            border-bottom-left-radius: variables.q($value);
+        }
+        .ss_rounded_tl_q#{$key} {
+            border-top-left-radius: variables.q($value);
+        }
+        .ss_rounded_tr_q#{$key} {
+            border-top-right-radius: variables.q($value);
+        }
+        .ss_rounded_br_q#{$key} {
+            border-bottom-right-radius: variables.q($value);
+        }
+        .ss_rounded_bl_q#{$key} {
+            border-bottom-left-radius: variables.q($value);
+        }
+    }
+}
+
+@include mixins.breakpoint(xs) {
+    @each $key, $value in maps.$q_steps {
+        // Padding
+        .xs_p_q#{$key} {
+            padding: variables.q($value);
+        }
+        .xs_pt_q#{$key} {
+            padding-top: variables.q($value);
+        }
+        .xs_pr_q#{$key} {
+            padding-right: variables.q($value);
+        }
+        .xs_pb_q#{$key} {
+            padding-bottom: variables.q($value);
+        }
+        .xs_pl_q#{$key} {
+            padding-left: variables.q($value);
+        }
+        .xs_px_q#{$key} {
+            padding-left: variables.q($value);
+            padding-right: variables.q($value);
+        }
+        .xs_py_q#{$key} {
+            padding-top: variables.q($value);
+            padding-bottom: variables.q($value);
+        }
+
+        // Margin
+        .xs_m_q#{$key} {
+            margin: variables.q($value);
+        }
+        .xs_mt_q#{$key} {
+            margin-top: variables.q($value);
+        }
+        .xs_mr_q#{$key} {
+            margin-right: variables.q($value);
+        }
+        .xs_mb_q#{$key} {
+            margin-bottom: variables.q($value);
+        }
+        .xs_ml_q#{$key} {
+            margin-left: variables.q($value);
+        }
+        .xs_mx_q#{$key} {
+            margin-left: variables.q($value);
+            margin-right: variables.q($value);
+        }
+        .xs_my_q#{$key} {
+            margin-top: variables.q($value);
+            margin-bottom: variables.q($value);
+        }
+
+        // Gap
+        .xs_gap_q#{$key} {
+            gap: variables.q($value);
+        }
+        .xs_gap_col_q#{$key} {
+            column-gap: variables.q($value);
+        }
+        .xs_gap_row_q#{$key} {
+            row-gap: variables.q($value);
+        }
+
+        // Width
+        .xs_w_q#{$key} {
+            width: variables.q($value);
+        }
+        .xs_min_w_q#{$key} {
+            min-width: variables.q($value);
+        }
+        .xs_max_w_q#{$key} {
+            max-width: variables.q($value);
+        }
+
+        // Height
+        .xs_h_q#{$key} {
+            height: variables.q($value);
+        }
+        .xs_min_h_q#{$key} {
+            min-height: variables.q($value);
+        }
+        .xs_max_h_q#{$key} {
+            max-height: variables.q($value);
+        }
+
+        // Inset
+        .xs_inset_q#{$key} {
+            top: variables.q($value);
+            right: variables.q($value);
+            bottom: variables.q($value);
+            left: variables.q($value);
+        }
+        .xs_top_q#{$key} {
+            top: variables.q($value);
+        }
+        .xs_right_q#{$key} {
+            right: variables.q($value);
+        }
+        .xs_bottom_q#{$key} {
+            bottom: variables.q($value);
+        }
+        .xs_left_q#{$key} {
+            left: variables.q($value);
+        }
+        .xs_inset_x_q#{$key} {
+            left: variables.q($value);
+            right: variables.q($value);
+        }
+        .xs_inset_y_q#{$key} {
+            top: variables.q($value);
+            bottom: variables.q($value);
+        }
+
+        // Border Width
+        .xs_border_q#{$key} {
+            border-width: variables.q($value);
+        }
+        .xs_border_t_q#{$key} {
+            border-top-width: variables.q($value);
+        }
+        .xs_border_r_q#{$key} {
+            border-right-width: variables.q($value);
+        }
+        .xs_border_b_q#{$key} {
+            border-bottom-width: variables.q($value);
+        }
+        .xs_border_l_q#{$key} {
+            border-left-width: variables.q($value);
+        }
+        .xs_border_x_q#{$key} {
+            border-left-width: variables.q($value);
+            border-right-width: variables.q($value);
+        }
+        .xs_border_y_q#{$key} {
+            border-top-width: variables.q($value);
+            border-bottom-width: variables.q($value);
+        }
+
+        // Border Radius
+        .xs_rounded_q#{$key} {
+            border-radius: variables.q($value);
+        }
+        .xs_rounded_t_q#{$key} {
+            border-top-left-radius: variables.q($value);
+            border-top-right-radius: variables.q($value);
+        }
+        .xs_rounded_r_q#{$key} {
+            border-top-right-radius: variables.q($value);
+            border-bottom-right-radius: variables.q($value);
+        }
+        .xs_rounded_b_q#{$key} {
+            border-bottom-left-radius: variables.q($value);
+            border-bottom-right-radius: variables.q($value);
+        }
+        .xs_rounded_l_q#{$key} {
+            border-top-left-radius: variables.q($value);
+            border-bottom-left-radius: variables.q($value);
+        }
+        .xs_rounded_tl_q#{$key} {
+            border-top-left-radius: variables.q($value);
+        }
+        .xs_rounded_tr_q#{$key} {
+            border-top-right-radius: variables.q($value);
+        }
+        .xs_rounded_br_q#{$key} {
+            border-bottom-right-radius: variables.q($value);
+        }
+        .xs_rounded_bl_q#{$key} {
+            border-bottom-left-radius: variables.q($value);
+        }
+    }
+}
+
+// ============================================================================
+// Responsive Utilities - SM Breakpoint
+// ============================================================================
+
+@include mixins.breakpoint(sm) {
+    @each $key, $value in maps.$q_steps {
+        // Padding
+        .sm_p_q#{$key} {
+            padding: variables.q($value);
+        }
+        .sm_pt_q#{$key} {
+            padding-top: variables.q($value);
+        }
+        .sm_pr_q#{$key} {
+            padding-right: variables.q($value);
+        }
+        .sm_pb_q#{$key} {
+            padding-bottom: variables.q($value);
+        }
+        .sm_pl_q#{$key} {
+            padding-left: variables.q($value);
+        }
+        .sm_px_q#{$key} {
+            padding-left: variables.q($value);
+            padding-right: variables.q($value);
+        }
+        .sm_py_q#{$key} {
+            padding-top: variables.q($value);
+            padding-bottom: variables.q($value);
+        }
+
+        // Margin
+        .sm_m_q#{$key} {
+            margin: variables.q($value);
+        }
+        .sm_mt_q#{$key} {
+            margin-top: variables.q($value);
+        }
+        .sm_mr_q#{$key} {
+            margin-right: variables.q($value);
+        }
+        .sm_mb_q#{$key} {
+            margin-bottom: variables.q($value);
+        }
+        .sm_ml_q#{$key} {
+            margin-left: variables.q($value);
+        }
+        .sm_mx_q#{$key} {
+            margin-left: variables.q($value);
+            margin-right: variables.q($value);
+        }
+        .sm_my_q#{$key} {
+            margin-top: variables.q($value);
+            margin-bottom: variables.q($value);
+        }
+
+        // Gap
+        .sm_gap_q#{$key} {
+            gap: variables.q($value);
+        }
+        .sm_gap_col_q#{$key} {
+            column-gap: variables.q($value);
+        }
+        .sm_gap_row_q#{$key} {
+            row-gap: variables.q($value);
+        }
+
+        // Width
+        .sm_w_q#{$key} {
+            width: variables.q($value);
+        }
+        .sm_min_w_q#{$key} {
+            min-width: variables.q($value);
+        }
+        .sm_max_w_q#{$key} {
+            max-width: variables.q($value);
+        }
+
+        // Height
+        .sm_h_q#{$key} {
+            height: variables.q($value);
+        }
+        .sm_min_h_q#{$key} {
+            min-height: variables.q($value);
+        }
+        .sm_max_h_q#{$key} {
+            max-height: variables.q($value);
+        }
+
+        // Inset
+        .sm_inset_q#{$key} {
+            top: variables.q($value);
+            right: variables.q($value);
+            bottom: variables.q($value);
+            left: variables.q($value);
+        }
+        .sm_top_q#{$key} {
+            top: variables.q($value);
+        }
+        .sm_right_q#{$key} {
+            right: variables.q($value);
+        }
+        .sm_bottom_q#{$key} {
+            bottom: variables.q($value);
+        }
+        .sm_left_q#{$key} {
+            left: variables.q($value);
+        }
+        .sm_inset_x_q#{$key} {
+            left: variables.q($value);
+            right: variables.q($value);
+        }
+        .sm_inset_y_q#{$key} {
+            top: variables.q($value);
+            bottom: variables.q($value);
+        }
+
+        // Border Width
+        .sm_border_q#{$key} {
+            border-width: variables.q($value);
+        }
+        .sm_border_t_q#{$key} {
+            border-top-width: variables.q($value);
+        }
+        .sm_border_r_q#{$key} {
+            border-right-width: variables.q($value);
+        }
+        .sm_border_b_q#{$key} {
+            border-bottom-width: variables.q($value);
+        }
+        .sm_border_l_q#{$key} {
+            border-left-width: variables.q($value);
+        }
+        .sm_border_x_q#{$key} {
+            border-left-width: variables.q($value);
+            border-right-width: variables.q($value);
+        }
+        .sm_border_y_q#{$key} {
+            border-top-width: variables.q($value);
+            border-bottom-width: variables.q($value);
+        }
+
+        // Border Radius
+        .sm_rounded_q#{$key} {
+            border-radius: variables.q($value);
+        }
+        .sm_rounded_t_q#{$key} {
+            border-top-left-radius: variables.q($value);
+            border-top-right-radius: variables.q($value);
+        }
+        .sm_rounded_r_q#{$key} {
+            border-top-right-radius: variables.q($value);
+            border-bottom-right-radius: variables.q($value);
+        }
+        .sm_rounded_b_q#{$key} {
+            border-bottom-left-radius: variables.q($value);
+            border-bottom-right-radius: variables.q($value);
+        }
+        .sm_rounded_l_q#{$key} {
+            border-top-left-radius: variables.q($value);
+            border-bottom-left-radius: variables.q($value);
+        }
+        .sm_rounded_tl_q#{$key} {
+            border-top-left-radius: variables.q($value);
+        }
+        .sm_rounded_tr_q#{$key} {
+            border-top-right-radius: variables.q($value);
+        }
+        .sm_rounded_br_q#{$key} {
+            border-bottom-right-radius: variables.q($value);
+        }
+        .sm_rounded_bl_q#{$key} {
+            border-bottom-left-radius: variables.q($value);
+        }
+    }
+}
+
+// ============================================================================
+// Responsive Utilities - MD Breakpoint
+// ============================================================================
+
+@include mixins.breakpoint(md) {
+    @each $key, $value in maps.$q_steps {
+        // Padding
+        .md_p_q#{$key} {
+            padding: variables.q($value);
+        }
+        .md_pt_q#{$key} {
+            padding-top: variables.q($value);
+        }
+        .md_pr_q#{$key} {
+            padding-right: variables.q($value);
+        }
+        .md_pb_q#{$key} {
+            padding-bottom: variables.q($value);
+        }
+        .md_pl_q#{$key} {
+            padding-left: variables.q($value);
+        }
+        .md_px_q#{$key} {
+            padding-left: variables.q($value);
+            padding-right: variables.q($value);
+        }
+        .md_py_q#{$key} {
+            padding-top: variables.q($value);
+            padding-bottom: variables.q($value);
+        }
+
+        // Margin
+        .md_m_q#{$key} {
+            margin: variables.q($value);
+        }
+        .md_mt_q#{$key} {
+            margin-top: variables.q($value);
+        }
+        .md_mr_q#{$key} {
+            margin-right: variables.q($value);
+        }
+        .md_mb_q#{$key} {
+            margin-bottom: variables.q($value);
+        }
+        .md_ml_q#{$key} {
+            margin-left: variables.q($value);
+        }
+        .md_mx_q#{$key} {
+            margin-left: variables.q($value);
+            margin-right: variables.q($value);
+        }
+        .md_my_q#{$key} {
+            margin-top: variables.q($value);
+            margin-bottom: variables.q($value);
+        }
+
+        // Gap
+        .md_gap_q#{$key} {
+            gap: variables.q($value);
+        }
+        .md_gap_col_q#{$key} {
+            column-gap: variables.q($value);
+        }
+        .md_gap_row_q#{$key} {
+            row-gap: variables.q($value);
+        }
+
+        // Width
+        .md_w_q#{$key} {
+            width: variables.q($value);
+        }
+        .md_min_w_q#{$key} {
+            min-width: variables.q($value);
+        }
+        .md_max_w_q#{$key} {
+            max-width: variables.q($value);
+        }
+
+        // Height
+        .md_h_q#{$key} {
+            height: variables.q($value);
+        }
+        .md_min_h_q#{$key} {
+            min-height: variables.q($value);
+        }
+        .md_max_h_q#{$key} {
+            max-height: variables.q($value);
+        }
+
+        // Inset
+        .md_inset_q#{$key} {
+            top: variables.q($value);
+            right: variables.q($value);
+            bottom: variables.q($value);
+            left: variables.q($value);
+        }
+        .md_top_q#{$key} {
+            top: variables.q($value);
+        }
+        .md_right_q#{$key} {
+            right: variables.q($value);
+        }
+        .md_bottom_q#{$key} {
+            bottom: variables.q($value);
+        }
+        .md_left_q#{$key} {
+            left: variables.q($value);
+        }
+        .md_inset_x_q#{$key} {
+            left: variables.q($value);
+            right: variables.q($value);
+        }
+        .md_inset_y_q#{$key} {
+            top: variables.q($value);
+            bottom: variables.q($value);
+        }
+
+        // Border Width
+        .md_border_q#{$key} {
+            border-width: variables.q($value);
+        }
+        .md_border_t_q#{$key} {
+            border-top-width: variables.q($value);
+        }
+        .md_border_r_q#{$key} {
+            border-right-width: variables.q($value);
+        }
+        .md_border_b_q#{$key} {
+            border-bottom-width: variables.q($value);
+        }
+        .md_border_l_q#{$key} {
+            border-left-width: variables.q($value);
+        }
+        .md_border_x_q#{$key} {
+            border-left-width: variables.q($value);
+            border-right-width: variables.q($value);
+        }
+        .md_border_y_q#{$key} {
+            border-top-width: variables.q($value);
+            border-bottom-width: variables.q($value);
+        }
+
+        // Border Radius
+        .md_rounded_q#{$key} {
+            border-radius: variables.q($value);
+        }
+        .md_rounded_t_q#{$key} {
+            border-top-left-radius: variables.q($value);
+            border-top-right-radius: variables.q($value);
+        }
+        .md_rounded_r_q#{$key} {
+            border-top-right-radius: variables.q($value);
+            border-bottom-right-radius: variables.q($value);
+        }
+        .md_rounded_b_q#{$key} {
+            border-bottom-left-radius: variables.q($value);
+            border-bottom-right-radius: variables.q($value);
+        }
+        .md_rounded_l_q#{$key} {
+            border-top-left-radius: variables.q($value);
+            border-bottom-left-radius: variables.q($value);
+        }
+        .md_rounded_tl_q#{$key} {
+            border-top-left-radius: variables.q($value);
+        }
+        .md_rounded_tr_q#{$key} {
+            border-top-right-radius: variables.q($value);
+        }
+        .md_rounded_br_q#{$key} {
+            border-bottom-right-radius: variables.q($value);
+        }
+        .md_rounded_bl_q#{$key} {
+            border-bottom-left-radius: variables.q($value);
+        }
+    }
+}
+
+// ============================================================================
+// Responsive Utilities - LG Breakpoint
+// ============================================================================
+
+@include mixins.breakpoint(lg) {
+    @each $key, $value in maps.$q_steps {
+        // Padding
+        .lg_p_q#{$key} {
+            padding: variables.q($value);
+        }
+        .lg_pt_q#{$key} {
+            padding-top: variables.q($value);
+        }
+        .lg_pr_q#{$key} {
+            padding-right: variables.q($value);
+        }
+        .lg_pb_q#{$key} {
+            padding-bottom: variables.q($value);
+        }
+        .lg_pl_q#{$key} {
+            padding-left: variables.q($value);
+        }
+        .lg_px_q#{$key} {
+            padding-left: variables.q($value);
+            padding-right: variables.q($value);
+        }
+        .lg_py_q#{$key} {
+            padding-top: variables.q($value);
+            padding-bottom: variables.q($value);
+        }
+
+        // Margin
+        .lg_m_q#{$key} {
+            margin: variables.q($value);
+        }
+        .lg_mt_q#{$key} {
+            margin-top: variables.q($value);
+        }
+        .lg_mr_q#{$key} {
+            margin-right: variables.q($value);
+        }
+        .lg_mb_q#{$key} {
+            margin-bottom: variables.q($value);
+        }
+        .lg_ml_q#{$key} {
+            margin-left: variables.q($value);
+        }
+        .lg_mx_q#{$key} {
+            margin-left: variables.q($value);
+            margin-right: variables.q($value);
+        }
+        .lg_my_q#{$key} {
+            margin-top: variables.q($value);
+            margin-bottom: variables.q($value);
+        }
+
+        // Gap
+        .lg_gap_q#{$key} {
+            gap: variables.q($value);
+        }
+        .lg_gap_col_q#{$key} {
+            column-gap: variables.q($value);
+        }
+        .lg_gap_row_q#{$key} {
+            row-gap: variables.q($value);
+        }
+
+        // Width
+        .lg_w_q#{$key} {
+            width: variables.q($value);
+        }
+        .lg_min_w_q#{$key} {
+            min-width: variables.q($value);
+        }
+        .lg_max_w_q#{$key} {
+            max-width: variables.q($value);
+        }
+
+        // Height
+        .lg_h_q#{$key} {
+            height: variables.q($value);
+        }
+        .lg_min_h_q#{$key} {
+            min-height: variables.q($value);
+        }
+        .lg_max_h_q#{$key} {
+            max-height: variables.q($value);
+        }
+
+        // Inset
+        .lg_inset_q#{$key} {
+            top: variables.q($value);
+            right: variables.q($value);
+            bottom: variables.q($value);
+            left: variables.q($value);
+        }
+        .lg_top_q#{$key} {
+            top: variables.q($value);
+        }
+        .lg_right_q#{$key} {
+            right: variables.q($value);
+        }
+        .lg_bottom_q#{$key} {
+            bottom: variables.q($value);
+        }
+        .lg_left_q#{$key} {
+            left: variables.q($value);
+        }
+        .lg_inset_x_q#{$key} {
+            left: variables.q($value);
+            right: variables.q($value);
+        }
+        .lg_inset_y_q#{$key} {
+            top: variables.q($value);
+            bottom: variables.q($value);
+        }
+
+        // Border Width
+        .lg_border_q#{$key} {
+            border-width: variables.q($value);
+        }
+        .lg_border_t_q#{$key} {
+            border-top-width: variables.q($value);
+        }
+        .lg_border_r_q#{$key} {
+            border-right-width: variables.q($value);
+        }
+        .lg_border_b_q#{$key} {
+            border-bottom-width: variables.q($value);
+        }
+        .lg_border_l_q#{$key} {
+            border-left-width: variables.q($value);
+        }
+        .lg_border_x_q#{$key} {
+            border-left-width: variables.q($value);
+            border-right-width: variables.q($value);
+        }
+        .lg_border_y_q#{$key} {
+            border-top-width: variables.q($value);
+            border-bottom-width: variables.q($value);
+        }
+
+        // Border Radius
+        .lg_rounded_q#{$key} {
+            border-radius: variables.q($value);
+        }
+        .lg_rounded_t_q#{$key} {
+            border-top-left-radius: variables.q($value);
+            border-top-right-radius: variables.q($value);
+        }
+        .lg_rounded_r_q#{$key} {
+            border-top-right-radius: variables.q($value);
+            border-bottom-right-radius: variables.q($value);
+        }
+        .lg_rounded_b_q#{$key} {
+            border-bottom-left-radius: variables.q($value);
+            border-bottom-right-radius: variables.q($value);
+        }
+        .lg_rounded_l_q#{$key} {
+            border-top-left-radius: variables.q($value);
+            border-bottom-left-radius: variables.q($value);
+        }
+        .lg_rounded_tl_q#{$key} {
+            border-top-left-radius: variables.q($value);
+        }
+        .lg_rounded_tr_q#{$key} {
+            border-top-right-radius: variables.q($value);
+        }
+        .lg_rounded_br_q#{$key} {
+            border-bottom-right-radius: variables.q($value);
+        }
+        .lg_rounded_bl_q#{$key} {
+            border-bottom-left-radius: variables.q($value);
+        }
+    }
+}
+
+// ============================================================================
+// Responsive Utilities - XL Breakpoint
+// ============================================================================
+
+@include mixins.breakpoint(xl) {
+    @each $key, $value in maps.$q_steps {
+        // Padding
+        .xl_p_q#{$key} {
+            padding: variables.q($value);
+        }
+        .xl_pt_q#{$key} {
+            padding-top: variables.q($value);
+        }
+        .xl_pr_q#{$key} {
+            padding-right: variables.q($value);
+        }
+        .xl_pb_q#{$key} {
+            padding-bottom: variables.q($value);
+        }
+        .xl_pl_q#{$key} {
+            padding-left: variables.q($value);
+        }
+        .xl_px_q#{$key} {
+            padding-left: variables.q($value);
+            padding-right: variables.q($value);
+        }
+        .xl_py_q#{$key} {
+            padding-top: variables.q($value);
+            padding-bottom: variables.q($value);
+        }
+
+        // Margin
+        .xl_m_q#{$key} {
+            margin: variables.q($value);
+        }
+        .xl_mt_q#{$key} {
+            margin-top: variables.q($value);
+        }
+        .xl_mr_q#{$key} {
+            margin-right: variables.q($value);
+        }
+        .xl_mb_q#{$key} {
+            margin-bottom: variables.q($value);
+        }
+        .xl_ml_q#{$key} {
+            margin-left: variables.q($value);
+        }
+        .xl_mx_q#{$key} {
+            margin-left: variables.q($value);
+            margin-right: variables.q($value);
+        }
+        .xl_my_q#{$key} {
+            margin-top: variables.q($value);
+            margin-bottom: variables.q($value);
+        }
+
+        // Gap
+        .xl_gap_q#{$key} {
+            gap: variables.q($value);
+        }
+        .xl_gap_col_q#{$key} {
+            column-gap: variables.q($value);
+        }
+        .xl_gap_row_q#{$key} {
+            row-gap: variables.q($value);
+        }
+
+        // Width
+        .xl_w_q#{$key} {
+            width: variables.q($value);
+        }
+        .xl_min_w_q#{$key} {
+            min-width: variables.q($value);
+        }
+        .xl_max_w_q#{$key} {
+            max-width: variables.q($value);
+        }
+
+        // Height
+        .xl_h_q#{$key} {
+            height: variables.q($value);
+        }
+        .xl_min_h_q#{$key} {
+            min-height: variables.q($value);
+        }
+        .xl_max_h_q#{$key} {
+            max-height: variables.q($value);
+        }
+
+        // Inset
+        .xl_inset_q#{$key} {
+            top: variables.q($value);
+            right: variables.q($value);
+            bottom: variables.q($value);
+            left: variables.q($value);
+        }
+        .xl_top_q#{$key} {
+            top: variables.q($value);
+        }
+        .xl_right_q#{$key} {
+            right: variables.q($value);
+        }
+        .xl_bottom_q#{$key} {
+            bottom: variables.q($value);
+        }
+        .xl_left_q#{$key} {
+            left: variables.q($value);
+        }
+        .xl_inset_x_q#{$key} {
+            left: variables.q($value);
+            right: variables.q($value);
+        }
+        .xl_inset_y_q#{$key} {
+            top: variables.q($value);
+            bottom: variables.q($value);
+        }
+
+        // Border Width
+        .xl_border_q#{$key} {
+            border-width: variables.q($value);
+        }
+        .xl_border_t_q#{$key} {
+            border-top-width: variables.q($value);
+        }
+        .xl_border_r_q#{$key} {
+            border-right-width: variables.q($value);
+        }
+        .xl_border_b_q#{$key} {
+            border-bottom-width: variables.q($value);
+        }
+        .xl_border_l_q#{$key} {
+            border-left-width: variables.q($value);
+        }
+        .xl_border_x_q#{$key} {
+            border-left-width: variables.q($value);
+            border-right-width: variables.q($value);
+        }
+        .xl_border_y_q#{$key} {
+            border-top-width: variables.q($value);
+            border-bottom-width: variables.q($value);
+        }
+
+        // Border Radius
+        .xl_rounded_q#{$key} {
+            border-radius: variables.q($value);
+        }
+        .xl_rounded_t_q#{$key} {
+            border-top-left-radius: variables.q($value);
+            border-top-right-radius: variables.q($value);
+        }
+        .xl_rounded_r_q#{$key} {
+            border-top-right-radius: variables.q($value);
+            border-bottom-right-radius: variables.q($value);
+        }
+        .xl_rounded_b_q#{$key} {
+            border-bottom-left-radius: variables.q($value);
+            border-bottom-right-radius: variables.q($value);
+        }
+        .xl_rounded_l_q#{$key} {
+            border-top-left-radius: variables.q($value);
+            border-bottom-left-radius: variables.q($value);
+        }
+        .xl_rounded_tl_q#{$key} {
+            border-top-left-radius: variables.q($value);
+        }
+        .xl_rounded_tr_q#{$key} {
+            border-top-right-radius: variables.q($value);
+        }
+        .xl_rounded_br_q#{$key} {
+            border-bottom-right-radius: variables.q($value);
+        }
+        .xl_rounded_bl_q#{$key} {
+            border-bottom-left-radius: variables.q($value);
+        }
+    }
+}
+
+// ============================================================================
+// Responsive Utilities - UL Breakpoint
+// ============================================================================
+
+@include mixins.breakpoint(ul) {
+    @each $key, $value in maps.$q_steps {
+        // Padding
+        .ul_p_q#{$key} {
+            padding: variables.q($value);
+        }
+        .ul_pt_q#{$key} {
+            padding-top: variables.q($value);
+        }
+        .ul_pr_q#{$key} {
+            padding-right: variables.q($value);
+        }
+        .ul_pb_q#{$key} {
+            padding-bottom: variables.q($value);
+        }
+        .ul_pl_q#{$key} {
+            padding-left: variables.q($value);
+        }
+        .ul_px_q#{$key} {
+            padding-left: variables.q($value);
+            padding-right: variables.q($value);
+        }
+        .ul_py_q#{$key} {
+            padding-top: variables.q($value);
+            padding-bottom: variables.q($value);
+        }
+
+        // Margin
+        .ul_m_q#{$key} {
+            margin: variables.q($value);
+        }
+        .ul_mt_q#{$key} {
+            margin-top: variables.q($value);
+        }
+        .ul_mr_q#{$key} {
+            margin-right: variables.q($value);
+        }
+        .ul_mb_q#{$key} {
+            margin-bottom: variables.q($value);
+        }
+        .ul_ml_q#{$key} {
+            margin-left: variables.q($value);
+        }
+        .ul_mx_q#{$key} {
+            margin-left: variables.q($value);
+            margin-right: variables.q($value);
+        }
+        .ul_my_q#{$key} {
+            margin-top: variables.q($value);
+            margin-bottom: variables.q($value);
+        }
+
+        // Gap
+        .ul_gap_q#{$key} {
+            gap: variables.q($value);
+        }
+        .ul_gap_col_q#{$key} {
+            column-gap: variables.q($value);
+        }
+        .ul_gap_row_q#{$key} {
+            row-gap: variables.q($value);
+        }
+
+        // Width
+        .ul_w_q#{$key} {
+            width: variables.q($value);
+        }
+        .ul_min_w_q#{$key} {
+            min-width: variables.q($value);
+        }
+        .ul_max_w_q#{$key} {
+            max-width: variables.q($value);
+        }
+
+        // Height
+        .ul_h_q#{$key} {
+            height: variables.q($value);
+        }
+        .ul_min_h_q#{$key} {
+            min-height: variables.q($value);
+        }
+        .ul_max_h_q#{$key} {
+            max-height: variables.q($value);
+        }
+
+        // Inset
+        .ul_inset_q#{$key} {
+            top: variables.q($value);
+            right: variables.q($value);
+            bottom: variables.q($value);
+            left: variables.q($value);
+        }
+        .ul_top_q#{$key} {
+            top: variables.q($value);
+        }
+        .ul_right_q#{$key} {
+            right: variables.q($value);
+        }
+        .ul_bottom_q#{$key} {
+            bottom: variables.q($value);
+        }
+        .ul_left_q#{$key} {
+            left: variables.q($value);
+        }
+        .ul_inset_x_q#{$key} {
+            left: variables.q($value);
+            right: variables.q($value);
+        }
+        .ul_inset_y_q#{$key} {
+            top: variables.q($value);
+            bottom: variables.q($value);
+        }
+
+        // Border Width
+        .ul_border_q#{$key} {
+            border-width: variables.q($value);
+        }
+        .ul_border_t_q#{$key} {
+            border-top-width: variables.q($value);
+        }
+        .ul_border_r_q#{$key} {
+            border-right-width: variables.q($value);
+        }
+        .ul_border_b_q#{$key} {
+            border-bottom-width: variables.q($value);
+        }
+        .ul_border_l_q#{$key} {
+            border-left-width: variables.q($value);
+        }
+        .ul_border_x_q#{$key} {
+            border-left-width: variables.q($value);
+            border-right-width: variables.q($value);
+        }
+        .ul_border_y_q#{$key} {
+            border-top-width: variables.q($value);
+            border-bottom-width: variables.q($value);
+        }
+
+        // Border Radius
+        .ul_rounded_q#{$key} {
+            border-radius: variables.q($value);
+        }
+        .ul_rounded_t_q#{$key} {
+            border-top-left-radius: variables.q($value);
+            border-top-right-radius: variables.q($value);
+        }
+        .ul_rounded_r_q#{$key} {
+            border-top-right-radius: variables.q($value);
+            border-bottom-right-radius: variables.q($value);
+        }
+        .ul_rounded_b_q#{$key} {
+            border-bottom-left-radius: variables.q($value);
+            border-bottom-right-radius: variables.q($value);
+        }
+        .ul_rounded_l_q#{$key} {
+            border-top-left-radius: variables.q($value);
+            border-bottom-left-radius: variables.q($value);
+        }
+        .ul_rounded_tl_q#{$key} {
+            border-top-left-radius: variables.q($value);
+        }
+        .ul_rounded_tr_q#{$key} {
+            border-top-right-radius: variables.q($value);
+        }
+        .ul_rounded_br_q#{$key} {
+            border-bottom-right-radius: variables.q($value);
+        }
+        .ul_rounded_bl_q#{$key} {
+            border-bottom-left-radius: variables.q($value);
+        }
+    }
+}