@siemens/element-theme 51.0.0-rc.7 → 51.0.0-rc.9

package/src/styles/variables/_si-vars.scss

@@ -1,21 +1,27 @@
 @use 'sass:map';
 @use './spacers';
+@use './sizing';
 @use './animations';
 
 // Custom variables
 $si-caret-transition-duration: animations.element-transition-duration(0.4s);
-$si-icon-font-size: 1.25rem;
-$si-icon-font-size-sm: 1rem;
-$si-icon-font-size-lg: 1.5rem;
 
-$btn-width-normal: 80px;
+// Icon sizes
+$si-icon-font-size-sm: var(--si-sys-sizing-icon-sm);
+$si-icon-font-size-md: var(--si-sys-sizing-icon-md);
+$si-icon-font-size: $si-icon-font-size-md;
+$si-icon-font-size-lg: var(--si-sys-sizing-icon-lg);
+$si-icon-font-size-xl: var(--si-sys-sizing-icon-xl);
+$si-icon-font-size-xxl: var(--si-sys-sizing-icon-xxl);
+
+$btn-width-normal: map.get(sizing.$sizing, 120);
 
 // Component styling
 
-$si-application-header-height: calc(1.5rem + (2 * map.get(spacers.$spacers, 5) + 1px));
-$si-titlebar-padding-y: map.get(spacers.$spacers, 3);
+$si-application-header-height: calc(map.get(sizing.$sizing, 100) + 1px);
+$si-titlebar-padding-y: map.get(spacers.$spacers-block, 3);
 $si-titlebar-height: calc(1.5rem + 2 * $si-titlebar-padding-y);
-$si-system-banner-padding-y: map.get(spacers.$spacers, 1);
+$si-system-banner-padding-y: map.get(spacers.$spacers-block, 2);
 $si-system-banner-height: calc(1rem + 2 * $si-system-banner-padding-y);
 
 // allows adding a custom titlebar on top

package/src/styles/variables/_sizing.scss

@@ -0,0 +1,22 @@
+$sizing: (
+  10: var(--si-sys-sizing-sizing-10),
+  20: var(--si-sys-sizing-sizing-20),
+  30: var(--si-sys-sizing-sizing-30),
+  40: var(--si-sys-sizing-sizing-40),
+  50: var(--si-sys-sizing-sizing-50),
+  60: var(--si-sys-sizing-sizing-60),
+  70: var(--si-sys-sizing-sizing-70),
+  80: var(--si-sys-sizing-sizing-80),
+  90: var(--si-sys-sizing-sizing-90),
+  100: var(--si-sys-sizing-sizing-100),
+  110: var(--si-sys-sizing-sizing-110),
+  120: var(--si-sys-sizing-sizing-120),
+  130: var(--si-sys-sizing-sizing-130),
+  140: var(--si-sys-sizing-sizing-140),
+  150: var(--si-sys-sizing-sizing-150),
+  160: var(--si-sys-sizing-sizing-160),
+  170: var(--si-sys-sizing-sizing-170),
+  180: var(--si-sys-sizing-sizing-180),
+  190: var(--si-sys-sizing-sizing-190),
+  200: var(--si-sys-sizing-sizing-200)
+);

package/src/styles/variables/_spacers.scss

@@ -1,28 +1,56 @@
-$spacer: 16px;
+@use 'sass:map';
 
-// stylelint-disable-next-line scss/dollar-variable-default
-$spacers: (
+$spacers-inline: (
   0: 0,
-  // 2px
-  1: $spacer * 0.125,
-  // 4px
-  2: $spacer * 0.25,
-  // 6px
-  3: $spacer * 0.375,
-  // 8px
-  4: $spacer * 0.5,
-  // 12px
-  5: $spacer * 0.75,
-  // 16px
-  6: $spacer,
-  // 20px
-  7: $spacer * 1.25,
-  // 24px
-  8: $spacer * 1.5,
-  // 32px
-  9: $spacer * 2,
-  // 64px
-  10: $spacer * 4,
-  // 96px
-  11: $spacer * 6
+  1: var(--si-sys-sizing-spacing-x-10),
+  2: var(--si-sys-sizing-spacing-x-20),
+  3: var(--si-sys-sizing-spacing-x-30),
+  4: var(--si-sys-sizing-spacing-x-40),
+  5: var(--si-sys-sizing-spacing-x-50),
+  6: var(--si-sys-sizing-spacing-x-60),
+  7: var(--si-sys-sizing-spacing-x-70),
+  8: var(--si-sys-sizing-spacing-x-80),
+  9: var(--si-sys-sizing-spacing-x-90),
+  10: var(--si-sys-sizing-spacing-x-100),
+  11: var(--si-sys-sizing-spacing-x-110),
+  12: var(--si-sys-sizing-spacing-x-120),
+  13: var(--si-sys-sizing-spacing-x-130),
+  14: var(--si-sys-sizing-spacing-x-140)
 );
+
+$spacers-block: (
+  0: 0,
+  1: var(--si-sys-sizing-spacing-y-10),
+  2: var(--si-sys-sizing-spacing-y-20),
+  3: var(--si-sys-sizing-spacing-y-30),
+  4: var(--si-sys-sizing-spacing-y-40),
+  5: var(--si-sys-sizing-spacing-y-50),
+  6: var(--si-sys-sizing-spacing-y-60),
+  7: var(--si-sys-sizing-spacing-y-70),
+  8: var(--si-sys-sizing-spacing-y-80),
+  9: var(--si-sys-sizing-spacing-y-90),
+  10: var(--si-sys-sizing-spacing-y-100),
+  11: var(--si-sys-sizing-spacing-y-110),
+  12: var(--si-sys-sizing-spacing-y-120),
+  13: var(--si-sys-sizing-spacing-y-130),
+  14: var(--si-sys-sizing-spacing-y-140)
+);
+
+@function negative-spacer-map($spacers) {
+  $negative-spacers: ();
+
+  @each $key, $spacer in $spacers {
+    @if $key != 0 {
+      $negative-spacers: map.set($negative-spacers, $key, calc(#{$spacer} * -1));
+    }
+  }
+
+  @return $negative-spacers;
+}
+
+$negative-spacers-inline: negative-spacer-map($spacers-inline);
+$negative-spacers-block: negative-spacer-map($spacers-block);
+
+// @deprecated: Those are for compatibility and will go away with v52
+$spacer: 16px;
+$spacers: $spacers-block;

package/src/styles/variables/_system-tokens.scss

@@ -29,7 +29,7 @@ $si-sys-background-information-hover: var(--si-sys-background-information-hover)
 $si-sys-background-information-subtle: var(--si-sys-background-information-subtle);
 $si-sys-background-inverse: var(--si-sys-background-inverse);
 $si-sys-background-neutral: var(--si-sys-background-neutral);
-$si-sys-background-selected: var(--si-sys-background-selected);
+$si-sys-background-active: var(--si-sys-background-active);
 $si-sys-background-success: var(--si-sys-background-success);
 $si-sys-background-success-active: var(--si-sys-background-success-active);
 $si-sys-background-success-hover: var(--si-sys-background-success-hover);
@@ -68,23 +68,23 @@ $si-sys-code-6: var(--si-sys-code-6);
 $si-sys-code-7: var(--si-sys-code-7);
 $si-sys-code-8: var(--si-sys-code-8);
 $si-sys-code-9: var(--si-sys-code-9);
-$si-sys-data-categorial-1: var(--si-sys-data-categorial-1);
-$si-sys-data-categorial-10: var(--si-sys-data-categorial-10);
-$si-sys-data-categorial-11: var(--si-sys-data-categorial-11);
-$si-sys-data-categorial-12: var(--si-sys-data-categorial-12);
-$si-sys-data-categorial-13: var(--si-sys-data-categorial-13);
-$si-sys-data-categorial-14: var(--si-sys-data-categorial-14);
-$si-sys-data-categorial-15: var(--si-sys-data-categorial-15);
-$si-sys-data-categorial-16: var(--si-sys-data-categorial-16);
-$si-sys-data-categorial-17: var(--si-sys-data-categorial-17);
-$si-sys-data-categorial-2: var(--si-sys-data-categorial-2);
-$si-sys-data-categorial-3: var(--si-sys-data-categorial-3);
-$si-sys-data-categorial-4: var(--si-sys-data-categorial-4);
-$si-sys-data-categorial-5: var(--si-sys-data-categorial-5);
-$si-sys-data-categorial-6: var(--si-sys-data-categorial-6);
-$si-sys-data-categorial-7: var(--si-sys-data-categorial-7);
-$si-sys-data-categorial-8: var(--si-sys-data-categorial-8);
-$si-sys-data-categorial-9: var(--si-sys-data-categorial-9);
+$si-sys-data-categorical-1: var(--si-sys-data-categorical-1);
+$si-sys-data-categorical-10: var(--si-sys-data-categorical-10);
+$si-sys-data-categorical-11: var(--si-sys-data-categorical-11);
+$si-sys-data-categorical-12: var(--si-sys-data-categorical-12);
+$si-sys-data-categorical-13: var(--si-sys-data-categorical-13);
+$si-sys-data-categorical-14: var(--si-sys-data-categorical-14);
+$si-sys-data-categorical-15: var(--si-sys-data-categorical-15);
+$si-sys-data-categorical-16: var(--si-sys-data-categorical-16);
+$si-sys-data-categorical-17: var(--si-sys-data-categorical-17);
+$si-sys-data-categorical-2: var(--si-sys-data-categorical-2);
+$si-sys-data-categorical-3: var(--si-sys-data-categorical-3);
+$si-sys-data-categorical-4: var(--si-sys-data-categorical-4);
+$si-sys-data-categorical-5: var(--si-sys-data-categorical-5);
+$si-sys-data-categorical-6: var(--si-sys-data-categorical-6);
+$si-sys-data-categorical-7: var(--si-sys-data-categorical-7);
+$si-sys-data-categorical-8: var(--si-sys-data-categorical-8);
+$si-sys-data-categorical-9: var(--si-sys-data-categorical-9);
 $si-sys-data-rating-average: var(--si-sys-data-rating-average);
 $si-sys-data-rating-bad: var(--si-sys-data-rating-bad);
 $si-sys-data-rating-excellent: var(--si-sys-data-rating-excellent);

package/src/styles/variables/_typography.scss

@@ -11,7 +11,7 @@
 }
 
 @function px-to-ratio($base, $value) {
-  $ratio: math.div($value, $base * 16px);
+  $ratio: math.div($value, $base);
   @return math.div($ratio, $ratio * 0 + 1);
 }
 
@@ -22,102 +22,140 @@ $si-font-weight-lighter: lighter !default;
 $si-font-weight-light: 300 !default;
 $si-font-weight-normal: 400 !default;
 $si-font-weight-medium: 500 !default;
-$si-font-weight-semibold: 600 !default;
+$si-font-weight-sbold: 600 !default;
+// DEPRECATED: Use $si-font-weight-sbold instead.
+$si-font-weight-semibold: $si-font-weight-sbold !default;
 $si-font-weight-bold: 700 !default;
 $si-font-weight-bolder: bolder !default;
 $si-font-weight-black: 900 !default;
 
-$si-font-size-h1-bold: px-to-rem(28px);
-$si-line-height-h1-bold: px-to-ratio($si-font-size-h1-bold, 36px);
-$si-font-weight-h1-bold: $si-font-weight-bold;
+$si-font-size-h1: var(--si-sys-typography-font-size-h1);
+$si-line-height-h1: var(--si-sys-typography-line-height-h1);
+$si-font-weight-h1: $si-font-weight-sbold;
 
-$si-font-size-h1: px-to-rem(28px);
-$si-line-height-h1: px-to-ratio($si-font-size-h1, 36px);
-$si-font-weight-h1: $si-font-weight-normal;
+// DEPRECATED: Use the $si-*-h1 variables instead.
+$si-font-size-h1-bold: $si-font-size-h1;
+$si-line-height-h1-bold: $si-line-height-h1;
+$si-font-weight-h1-bold: $si-font-weight-bold;
 
-$si-font-size-h2: px-to-rem(24px);
-$si-line-height-h2: px-to-ratio($si-font-size-h2, 32px);
-$si-font-weight-h2: $si-font-weight-semibold;
+$si-font-size-h2: var(--si-sys-typography-font-size-h2);
+$si-line-height-h2: var(--si-sys-typography-line-height-h2);
+$si-font-weight-h2: $si-font-weight-sbold;
 
-$si-font-size-h3: px-to-rem(20px);
-$si-line-height-h3: px-to-ratio($si-font-size-h3, 24px);
-$si-font-weight-h3: $si-font-weight-semibold;
+$si-font-size-h3: var(--si-sys-typography-font-size-h3);
+$si-line-height-h3: var(--si-sys-typography-line-height-h3);
+$si-font-weight-h3: $si-font-weight-sbold;
 
-$si-font-size-h4: px-to-rem(16px);
-$si-line-height-h4: px-to-ratio($si-font-size-h4, 20px);
-$si-font-weight-h4: $si-font-weight-semibold;
+$si-font-size-h4: var(--si-sys-typography-font-size-h4);
+$si-line-height-h4: var(--si-sys-typography-line-height-h4);
+$si-font-weight-h4: $si-font-weight-sbold;
 
-$si-font-size-h4-bold: px-to-rem(16px);
-$si-line-height-h4-bold: px-to-ratio($si-font-size-h4-bold, 20px);
+// DEPRECATED: Use the $si-*-h4 variables instead.
+$si-font-size-h4-bold: $si-font-size-h4;
+$si-line-height-h4-bold: $si-line-height-h4;
 $si-font-weight-h4-bold: $si-font-weight-bold;
 
-$si-font-size-h5: px-to-rem(14px);
-$si-line-height-h5: px-to-ratio($si-font-size-h5, 20px);
-$si-font-weight-h5: $si-font-weight-semibold;
+$si-font-size-h5: var(--si-sys-typography-font-size-h5);
+$si-line-height-h5: var(--si-sys-typography-line-height-h5);
+$si-font-weight-h5: $si-font-weight-sbold;
 
-$si-font-size-h5-bold: px-to-rem(14px);
-$si-line-height-h5-bold: px-to-ratio($si-font-size-h5-bold, 20px);
+$si-font-size-h5-bold: $si-font-size-h5;
+$si-line-height-h5-bold: $si-line-height-h5;
 $si-font-weight-h5-bold: $si-font-weight-bold;
 
-$si-font-size-h6: px-to-rem(12px);
-$si-line-height-h6: px-to-ratio($si-font-size-h6, 16px);
-$si-font-weight-h6: $si-font-weight-semibold;
+$si-font-size-h6: var(--si-sys-typography-font-size-h6);
+$si-line-height-h6: var(--si-sys-typography-line-height-h6);
+$si-font-weight-h6: $si-font-weight-sbold;
 
-$si-font-size-body-lg: px-to-rem(16px);
-$si-line-height-body-lg: px-to-ratio($si-font-size-body-lg, 20px);
+$si-font-size-body-lg: var(--si-sys-typography-font-size-body-lg);
+$si-line-height-body-lg: var(--si-sys-typography-line-height-body-lg);
 $si-font-weight-body-lg: $si-font-weight-normal;
 
-$si-font-size-body-lg-bold: px-to-rem(16px);
-$si-line-height-body-lg-bold: px-to-ratio($si-font-size-body-lg-bold, 20px);
-$si-font-weight-body-lg-bold: $si-font-weight-semibold;
+// DEPRECATED: Use the $si-*-body-lg-sbold variables instead.
+$si-font-size-body-lg-bold: var(--si-sys-typography-font-size-body-lg);
+$si-line-height-body-lg-bold: $si-line-height-body-lg;
+$si-font-weight-body-lg-bold: $si-font-weight-sbold;
+
+$si-font-size-body-lg-sbold: $si-font-size-body-lg;
+$si-line-height-body-lg-sbold: $si-line-height-body-lg;
+$si-font-weight-body-lg-sbold: $si-font-weight-sbold;
 
-$si-font-size-body: px-to-rem(14px);
-$si-line-height-body: px-to-ratio($si-font-size-body, 16px);
-$si-line-height-body-rem: px-to-rem(16px);
+$si-font-size-body: var(--si-sys-typography-font-size-body);
+$si-line-height-body: var(--si-sys-typography-line-height-body);
 $si-font-weight-body: $si-font-weight-normal;
 
-$si-font-size-body-paragraph: px-to-rem(14px);
-$si-line-height-body-paragraph: px-to-ratio($si-font-size-body-paragraph, 20px);
+$si-font-size-body-sbold: $si-font-size-body;
+$si-line-height-body-sbold: $si-line-height-body;
+$si-font-weight-body-sbold: $si-font-weight-sbold;
+
+$si-font-size-body-paragraph: var(--si-sys-typography-font-size-body-paragraph);
+$si-line-height-body-paragraph: var(--si-sys-typography-line-height-body-paragraph);
 $si-font-weight-body-paragraph: $si-font-weight-normal;
 
-$si-font-size-body-sm: px-to-rem(12px);
-$si-line-height-body-sm: px-to-ratio($si-font-size-body-sm, 16px);
+$si-font-size-body-paragraph-sbold: $si-font-size-body-paragraph;
+$si-line-height-body-paragraph-sbold: $si-line-height-body-paragraph;
+$si-font-weight-body-paragraph-sbold: $si-font-weight-sbold;
+
+$si-font-size-body-sm: var(--si-sys-typography-font-size-body-sm);
+$si-line-height-body-sm: var(--si-sys-typography-line-height-body-sm);
 $si-font-weight-body-sm: $si-font-weight-normal;
 
+$si-font-size-body-sm-sbold: $si-font-size-body-sm;
+$si-line-height-body-sm-sbold: $si-line-height-body-sm;
+$si-font-weight-body-sm-sbold: $si-font-weight-sbold;
+
+// DEPRECATED: Use the $si-*-body-sm variables instead.
 $si-font-size-caption: $si-font-size-body-sm;
 $si-line-height-caption: $si-line-height-body-sm;
 $si-font-weight-caption: $si-font-weight-normal;
 
-$si-font-size-display-xxl: px-to-rem(58px);
-$si-line-height-display-xxl: px-to-ratio($si-font-size-display-xxl, 72px);
+$si-font-size-display-xxl: var(--si-sys-typography-font-size-display-xxl);
+$si-line-height-display-xxl: var(--si-sys-typography-line-height-display-xxl);
 $si-font-weight-display-xxl: $si-font-weight-normal;
 
-$si-font-size-display-xl: px-to-rem(48px);
-$si-line-height-display-xl: px-to-ratio($si-font-size-display-xl, 64px);
+$si-font-size-display-xxl-sbold: $si-font-size-display-xxl;
+$si-line-height-display-xxl-sbold: $si-line-height-display-xxl;
+$si-font-weight-display-xxl-sbold: $si-font-weight-sbold;
+
+$si-font-size-display-xl: var(--si-sys-typography-font-size-display-xl);
+$si-line-height-display-xl: var(--si-sys-typography-line-height-display-xl);
 $si-font-weight-display-xl: $si-font-weight-normal;
 
-$si-font-size-display-lg: px-to-rem(40px);
-$si-line-height-display-lg: px-to-ratio($si-font-size-display-lg, 52px);
+$si-font-size-display-xl-sbold: $si-font-size-display-xl;
+$si-line-height-display-xl-sbold: $si-line-height-display-xl;
+$si-font-weight-display-xl-sbold: $si-font-weight-sbold;
+
+$si-font-size-display-lg: var(--si-sys-typography-font-size-display-lg);
+$si-line-height-display-lg: var(--si-sys-typography-line-height-display-lg);
 $si-font-weight-display-lg: $si-font-weight-normal;
 
+$si-font-size-display-lg-sbold: $si-font-size-display-lg;
+$si-line-height-display-lg-sbold: $si-line-height-display-lg;
+$si-font-weight-display-lg-sbold: $si-font-weight-sbold;
+
+// DEPRECATED: Use the $si-*-display-lg-sbold variables instead.
 $si-font-size-display-bold: $si-font-size-display-lg;
 $si-line-height-display-bold: $si-line-height-display-lg;
 $si-font-weight-display-bold: $si-font-weight-bold;
 
-$si-font-size-display: px-to-rem(32px);
-$si-line-height-display: px-to-ratio($si-font-size-display, 40px);
+$si-font-size-display: var(--si-sys-typography-font-size-display);
+$si-line-height-display: var(--si-sys-typography-line-height-display);
 $si-font-weight-display: $si-font-weight-normal;
 
-$si-font-size-code-sm: px-to-rem(12px);
-$si-line-height-code-sm: px-to-ratio($si-font-size-code-sm, 16px);
+$si-font-size-display-sbold: $si-font-size-display;
+$si-line-height-display-sbold: $si-line-height-display;
+$si-font-weight-display-sbold: $si-font-weight-sbold;
+
+$si-font-size-code-sm: var(--si-sys-typography-font-size-code-sm);
+$si-line-height-code-sm: var(--si-sys-typography-line-height-code-sm);
 $si-font-weight-code-sm: $si-font-weight-normal;
 
-$si-font-size-code: px-to-rem(14px);
-$si-line-height-code: px-to-ratio($si-font-size-code, 20px);
+$si-font-size-code: var(--si-sys-typography-font-size-code);
+$si-line-height-code: var(--si-sys-typography-line-height-code);
 $si-font-weight-code: $si-font-weight-normal;
 
-$si-font-size-code-lg: px-to-rem(16px);
-$si-line-height-code-lg: px-to-ratio($si-font-size-code-lg, 20px);
+$si-font-size-code-lg: var(--si-sys-typography-font-size-code-lg);
+$si-line-height-code-lg: var(--si-sys-typography-line-height-code-lg);
 $si-font-weight-code-lg: $si-font-weight-normal;
 
 $si-letter-spacing-normal: 0;

package/src/styles/variables/_utilities.scss

@@ -2,34 +2,17 @@
 
 @use '../bootstrap/variables';
 @use 'spacers';
+@use 'system-tokens';
 
-$negative-spacers: (
-  // -2px
-  n1: spacers.$spacer * -0.125,
-  // -4px
-  n2: spacers.$spacer * -0.25,
-  // -6px
-  n3: spacers.$spacer * -0.375,
-  // -8px
-  n4: spacers.$spacer * -0.5,
-  // -12px
-  n5: spacers.$spacer * -0.75,
-  // -16px
-  n6: spacers.$spacer * -1,
-  // -20px
-  n7: spacers.$spacer * -1.25,
-  // -24px
-  n8: spacers.$spacer * -1.5,
-  // -32px
-  n9: spacers.$spacer * -2,
-  // -64px
-  n10: spacers.$spacer * -4,
-  // -96px
-  n11: spacers.$spacer * -6
+$_margins-inline: map.merge(
+  spacers.$spacers-inline,
+  (
+    auto: auto
+  )
 );
 
-$_margins: map.merge(
-  spacers.$spacers,
+$_margins-block: map.merge(
+  spacers.$spacers-block,
   (
     auto: auto
   )
@@ -75,9 +58,16 @@ $utilities: (
     property: box-shadow,
     class: shadow,
     values: (
+      // Deprecated: Use shadow-2 instead.
       null: variables.$box-shadow,
+      // Deprecated: Use shadow-1 instead.
       sm: variables.$box-shadow-sm,
+      // Deprecated: Use shadow-3 instead.
       lg: variables.$box-shadow-lg,
+      1: system-tokens.$si-sys-effects-shadow-1,
+      2: system-tokens.$si-sys-effects-shadow-2,
+      3: system-tokens.$si-sys-effects-shadow-3,
+      4: system-tokens.$si-sys-effects-shadow-4,
       none: none
     )
   ),
@@ -259,9 +249,13 @@ $utilities: (
   ),
   'gap': (
     responsive: true,
-    property: gap,
+    property: row-gap column-gap,
     class: gap,
-    values: spacers.$spacers
+    values: spacers.$spacers-block,
+    property-values: (
+      row-gap: spacers.$spacers-block,
+      column-gap: spacers.$spacers-inline
+    )
   ),
   'justify-content': (
     responsive: true,
@@ -327,131 +321,150 @@ $utilities: (
   // Margin utilities
   'margin': (
       responsive: true,
-      property: margin,
+      property: margin-block margin-inline,
       class: m,
-      values: $_margins
+      values: $_margins-block,
+      property-values: (
+        margin-block: $_margins-block,
+        margin-inline: $_margins-inline
+      )
     ),
   'margin-x': (
     responsive: true,
     property: margin-inline,
     class: mx,
-    values: $_margins
+    values: $_margins-inline
   ),
   'margin-y': (
     responsive: true,
     property: margin-block,
     class: my,
-    values: $_margins
+    values: $_margins-block
   ),
   'margin-top': (
     responsive: true,
     property: margin-block-start,
     class: mt,
-    values: $_margins
+    values: $_margins-block
   ),
   'margin-end': (
     responsive: true,
     property: margin-inline-end,
     class: me,
-    values: $_margins
+    values: $_margins-inline
   ),
   'margin-bottom': (
     responsive: true,
     property: margin-block-end,
     class: mb,
-    values: $_margins
+    values: $_margins-block
   ),
   'margin-start': (
     responsive: true,
     property: margin-inline-start,
     class: ms,
-    values: $_margins
+    values: $_margins-inline
   ),
   // Negative margin utilities
   'negative-margin': (
       responsive: true,
-      property: margin,
+      negative: true,
+      property: margin-block margin-inline,
       class: m,
-      values: $negative-spacers
+      values: spacers.$negative-spacers-block,
+      property-values: (
+        margin-block: spacers.$negative-spacers-block,
+        margin-inline: spacers.$negative-spacers-inline
+      )
     ),
   'negative-margin-x': (
     responsive: true,
+    negative: true,
     property: margin-inline,
     class: mx,
-    values: $negative-spacers
+    values: spacers.$negative-spacers-inline
   ),
   'negative-margin-y': (
     responsive: true,
+    negative: true,
     property: margin-block,
     class: my,
-    values: $negative-spacers
+    values: spacers.$negative-spacers-block
   ),
   'negative-margin-top': (
     responsive: true,
+    negative: true,
     property: margin-block-start,
     class: mt,
-    values: $negative-spacers
+    values: spacers.$negative-spacers-block
   ),
   'negative-margin-end': (
     responsive: true,
+    negative: true,
     property: margin-inline-end,
     class: me,
-    values: $negative-spacers
+    values: spacers.$negative-spacers-inline
   ),
   'negative-margin-start': (
     responsive: true,
+    negative: true,
     property: margin-inline-start,
     class: ms,
-    values: $negative-spacers
+    values: spacers.$negative-spacers-inline
   ),
   'negative-margin-bottom': (
     responsive: true,
+    negative: true,
     property: margin-block-end,
     class: mb,
-    values: $negative-spacers
+    values: spacers.$negative-spacers-block
   ),
   // Padding utilities
   'padding': (
       responsive: true,
-      property: padding,
+      property: padding-block padding-inline,
       class: p,
-      values: spacers.$spacers
+      values: spacers.$spacers-block,
+      property-values: (
+        padding-block: spacers.$spacers-block,
+        padding-inline: spacers.$spacers-inline
+      )
     ),
   'padding-x': (
     responsive: true,
     property: padding-inline,
     class: px,
-    values: spacers.$spacers
+    values: spacers.$spacers-inline
   ),
   'padding-y': (
     responsive: true,
     property: padding-block,
     class: py,
-    values: spacers.$spacers
+    values: spacers.$spacers-block
   ),
   'padding-top': (
     responsive: true,
     property: padding-block-start,
     class: pt,
-    values: spacers.$spacers
+    values: spacers.$spacers-block
   ),
   'padding-end': (
     responsive: true,
     property: padding-inline-end,
     class: pe,
-    values: spacers.$spacers
+    values: spacers.$spacers-inline
   ),
   'padding-bottom': (
     responsive: true,
     property: padding-block-end,
     class: pb,
-    values: spacers.$spacers
+    values: spacers.$spacers-block
   ),
   'padding-start': (
     responsive: true,
     property: padding-inline-start,
     class: ps,
-    values: spacers.$spacers
+    values: spacers.$spacers-inline
   ),
   // Text
   'font-family': (