@ptsecurity/mosaic 13.1.0 → 13.3.0

package/_visual.scss

@@ -10,6 +10,8 @@ $light-color-scheme-warning-default: #a26e0c;
 $light-color-scheme-foreground-text: #19252f;
 $light-color-scheme-foreground-text-less-contrast: #6d7a86;
 $light-color-scheme-foreground-text-disabled: #8c99a5;
+$light-color-scheme-foreground-text-error: #db3c55;
+$light-color-scheme-foreground-text-success: #016b37;
 $light-color-scheme-foreground-divider: #d7dee4;
 $light-color-scheme-foreground-border: #bdc7d1;
 $light-color-scheme-foreground-icon: #8c99a5;
@@ -32,6 +34,8 @@ $dark-color-scheme-warning-default: #7e5406;
 $dark-color-scheme-foreground-text: #f2f5f9;
 $dark-color-scheme-foreground-text-less-contrast: #8c99a5;
 $dark-color-scheme-foreground-text-disabled: #6d7a86;
+$dark-color-scheme-foreground-text-error: #ea5868;
+$dark-color-scheme-foreground-text-success: #319d5c;
 $dark-color-scheme-foreground-divider: #333f4a;
 $dark-color-scheme-foreground-border: #515e69;
 $dark-color-scheme-foreground-icon: #8c99a5;
@@ -48,6 +52,19 @@ $dark-color-scheme-states-disabled-opacity: 0.3;
 $font-family-accent: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $font-family-base: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $font-family-monospace: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
+$size-3xs: 2px;
+$size-xxs: 4px;
+$size-xs: 6px;
+$size-s: 8px;
+$size-m: 12px;
+$size-l: 16px;
+$size-xl: 20px;
+$size-xxl: 24px;
+$size-3xl: 32px;
+$size-4xl: 40px;
+$size-5xl: 48px;
+$size-6xl: 56px;
+$size-7xl: 64px;
 $palette-blue-40: #eff6ff;
 $palette-blue-60: #e7f1ff;
 $palette-blue-100: #c8dfff;
@@ -273,28 +290,6 @@ $alert-font-small-body: caption;
 $autocomplete-size-panel-padding: 4px 0;
 $autocomplete-size-panel-max-height: 256px;
 $autocomplete-size-panel-border-radius: 3px;
-$badge-size-default-min-width: 10px;
-$badge-size-default-padding: 0 8px;
-$badge-size-default-border-width: 1px;
-$badge-size-default-border-radius: 4px;
-$badge-size-default-height: 24px;
-$badge-size-default-font-default: caption;
-$badge-size-default-font-caps: caption-caps;
-$badge-size-default-font-mono: caption-mono;
-$badge-size-mini-height: 16px;
-$badge-size-mini-min-width: 10px;
-$badge-size-mini-border-width: 1px;
-$badge-size-mini-border-radius: 2px;
-$badge-size-mini-padding: 0 4px;
-$badge-size-mini-font-default: extra-small-text;
-$badge-size-mini-font-caps: extra-small-text-caps;
-$badge-size-mini-font-mono: extra-small-text-mono;
-$badge-font-default-default: caption;
-$badge-font-default-caps: caption-caps;
-$badge-font-default-mono: caption-mono;
-$badge-font-mini-default: extra-small-text;
-$badge-font-mini-caps: extra-small-text-caps;
-$badge-font-mini-mono: extra-small-text-mono;
 $badge-light-color-scheme-solid-primary-background: #4187ff;
 $badge-light-color-scheme-solid-primary-border: #4187ff;
 $badge-light-color-scheme-solid-primary-color: white;
@@ -373,6 +368,22 @@ $badge-dark-color-scheme-solid-light-color: white;
 $badge-dark-color-scheme-solid-second-background: #515e69;
 $badge-dark-color-scheme-solid-second-border: #515e69;
 $badge-dark-color-scheme-solid-second-color: white;
+$badge-size-default-height: 24px;
+$badge-size-default-min-width: 10px;
+$badge-size-default-padding: 0 8px;
+$badge-size-default-border-width: 1px;
+$badge-size-default-border-radius: 4px;
+$badge-size-mini-height: 16px;
+$badge-size-mini-min-width: 10px;
+$badge-size-mini-border-width: 1px;
+$badge-size-mini-border-radius: 2px;
+$badge-size-mini-padding: 0 4px;
+$badge-font-default-default: caption;
+$badge-font-default-caps: caption-caps;
+$badge-font-default-mono: caption-mono;
+$badge-font-mini-default: extra-small-text;
+$badge-font-mini-caps: extra-small-text-caps;
+$badge-font-mini-mono: extra-small-text-mono;
 $button-toggle-size-border-size: 1px;
 $button-toggle-size-border-radius: 3px;
 $button-light-color-scheme-active-shadow: inset 0 1px 2px 0 rgba(black, 0.2);
@@ -425,16 +436,15 @@ $button-dark-color-scheme-error-color: #ea5868;
 $button-dark-color-scheme-error-icon: #ea5868;
 $button-dark-color-scheme-error-states-active-border: #333f4a;
 $button-dark-color-scheme-error-states-active-background: #333f4a;
+$button-size-height: 32px;
 $button-size-border-width: 1px;
 $button-size-border-radius: 3px;
-$button-size-vertical-padding: 6px;
-$button-size-horizontal-padding: 16px;
+$button-size-horizontal-padding: 12px;
 $button-font-default: body;
 $button-font-primary: body-strong;
 $button-font-primary-transparent: body;
-$icon-button-size-vertical-padding: 6px;
 $icon-button-size-horizontal-padding: 8px;
-$icon-button-size-icon-horizontal-padding: 16px;
+$icon-button-size-left-icon-padding: 6px;
 $card-light-color-scheme-error-vertical-line: #fbd6d6;
 $card-light-color-scheme-error-background: #fff3f3;
 $card-light-color-scheme-error-shadow: #fbd6d6;
@@ -501,6 +511,22 @@ $datepicker-calendar-font-header: caption;
 $datepicker-input-size-width: 130px;
 $divider-size-width: 1px;
 $divider-size-inset-margin: 80px;
+$description-list-light-color-scheme-dt: #6d7a86;
+$description-list-light-color-scheme-dd: #19252f;
+$description-list-dark-color-scheme-dt: #8c99a5;
+$description-list-dark-color-scheme-dd: #f2f5f9;
+$description-list-size-grid-template-columns: repeat(4, 1fr);
+$description-list-size-dt-grid-column: 1;
+$description-list-size-dd-grid-column: 2 / span 3;
+$description-list-size-horizontal-column-gap: 16px;
+$description-list-size-horizontal-row-gap: 12px;
+$description-list-size-vertical-column-gap: 0;
+$description-list-size-vertical-row-gap: 2px;
+$description-list-size-vertical-dd-margin-bottom: 16px;
+$description-list-font-horizontal-dt: body;
+$description-list-font-horizontal-dd: body;
+$description-list-font-vertical-dt: caption;
+$description-list-font-vertical-dd: body;
 $dropdown-item-size-padding: 5px 15px;
 $dropdown-item-size-icon-padding: 0 8px 2px 0;
 $dropdown-item-font-default: body;
@@ -511,7 +537,8 @@ $dropdown-group-header-font-default: body-strong;
 $dropdown-group-header-font-small: caption-caps;
 $dropdown-divider-size-height: 1px;
 $dropdown-divider-size-margin: 4px 0;
-$dropdown-trigger-size-icon-padding-right: 8px;
+$dropdown-trigger-size-button-right-padding: 8px;
+$dropdown-trigger-size-right-icon-padding: 2px;
 $dropdown-panel-size-max-width: 640px;
 $dropdown-panel-size-padding: 4px 0;
 $dropdown-panel-size-border-width: 1px;
@@ -526,12 +553,28 @@ $form-field-dark-color-scheme-background: transparent;
 $form-field-dark-color-scheme-states-hover-border: #515e69;
 $form-field-dark-color-scheme-states-invalid-border: #b9023a;
 $form-field-dark-color-scheme-states-invalid-background: transparent;
+$form-field-size-height: 32px;
 $form-field-size-border-width: 1px;
 $form-field-size-border-radius: 3px;
 $form-field-size-button-width: 32px;
 $form-field-font-default: body;
 $form-field-hint-size-margin-top: 4px;
 $form-field-hint-font-default: caption;
+$form-field-password-hint-light-color-scheme-text-color: #19252f;
+$form-field-password-hint-light-color-scheme-icon-color: #19252f;
+$form-field-password-hint-light-color-scheme-states-invalid-icon-color: #db3c55;
+$form-field-password-hint-light-color-scheme-states-invalid-text-color: #19252f;
+$form-field-password-hint-light-color-scheme-states-valid-text-color: #016b37;
+$form-field-password-hint-light-color-scheme-states-valid-icon-color: #016b37;
+$form-field-password-hint-dark-color-scheme-text-color: #f2f5f9;
+$form-field-password-hint-dark-color-scheme-icon-color: #f2f5f9;
+$form-field-password-hint-dark-color-scheme-states-invalid-icon-color: #ea5868;
+$form-field-password-hint-dark-color-scheme-states-invalid-text-color: #f2f5f9;
+$form-field-password-hint-dark-color-scheme-states-valid-text-color: #319d5c;
+$form-field-password-hint-dark-color-scheme-states-valid-icon-color: #319d5c;
+$form-field-password-hint-size-margin-top: 8px;
+$form-field-password-hint-size-icon-margin: 4px;
+$form-field-password-hint-font-default: caption;
 $forms-light-color-scheme-label: #6d7a86;
 $forms-light-color-scheme-legend: #19252f;
 $forms-dark-color-scheme-label: #8c99a5;
@@ -550,9 +593,8 @@ $forms-size-vertical-legend-margin-top: 32px;
 $forms-size-vertical-legend-margin-bottom: 12px;
 $forms-font-default-label: body;
 $forms-font-default-legend: subheading;
-$input-size-padding: 5px 16px;
+$input-size-padding: 0 16px;
 $input-size-width: 100%;
-$input-size-min-height: 30px;
 $input-font-default: body;
 $input-font-monospace: body-mono;
 $link-light-color-scheme-text: #0374eb;
@@ -574,13 +616,10 @@ $link-dark-color-scheme-state-focused-outline: #4187ff;
 $link-size-icon-margin: 4px;
 $link-size-state-focused-outline-offset: 2px;
 $link-size-state-focused-outline-width: 2px;
-$link-animation-transition: color ease-out 300ms;
-$link-animation-state-hover-transition: color 0ms;
 $link-font-default: body;
-$list-size-horizontal-padding: 16px;
-$list-size-icon-padding: 4px;
+$list-size-horizontal-padding: 12px;
+$list-size-icon-right-margin: 8px;
 $list-size-item-height: 32px;
-$list-size-icon-width: 24px;
 $list-font-item: body;
 $modal-light-color-scheme-shadow: (0 0 0 1px #d7dee4, 0 6px 12px 0 rgba(39, 51, 62, 0.5));
 $modal-light-color-scheme-body-top-shadow: 0 2px 4px 0 rgba(39, 51, 62, 0.16);
@@ -600,7 +639,8 @@ $modal-size-border-width: 1px;
 $modal-header-light-color-scheme-border: #d7dee4;
 $modal-header-dark-color-scheme-border: #333f4a;
 $modal-header-size-border-radius: 4px 4px 0 0;
-$modal-header-size-padding: 14px 16px;
+$modal-header-size-height: 56px;
+$modal-header-size-padding: 0 16px;
 $modal-header-font-default: title;
 $modal-body-size-max-height: calc(100vh - 260px);
 $modal-body-size-padding: 16px 24px 24px;
@@ -608,13 +648,15 @@ $modal-body-font-default: body;
 $modal-footer-light-color-scheme-border: #f2f5f9;
 $modal-footer-dark-color-scheme-border: #333f4a;
 $modal-footer-size-border-radius: 0 0 4px 4px;
-$modal-footer-size-padding: 16px 16px;
+$modal-footer-size-height: 64px;
+$modal-footer-size-padding: 0 16px;
 $modal-confirm-size-padding: 24px;
 $navbar-light-color-scheme-background: #19252f;
 $navbar-light-color-scheme-divider-background: #515e69;
 $navbar-dark-color-scheme-background: #333f4a;
 $navbar-dark-color-scheme-divider-background: #515e69;
 $navbar-size-icon-margin: 6px;
+$navbar-size-right-icon-margin: 2px;
 $navbar-font-title: body;
 $vertical-navbar-size-states-expanded-width: 240px;
 $vertical-navbar-size-states-collapsed-width: 56px;
@@ -668,8 +710,8 @@ $popover-header-light-color-scheme-background: white;
 $popover-header-dark-color-scheme-border: #434f5a;
 $popover-header-dark-color-scheme-text: #f2f5f9;
 $popover-header-dark-color-scheme-background: #333f4a;
-$popover-header-size-height: 10px 16px;
-$popover-header-size-padding: 10px 16px;
+$popover-header-size-height: 40px;
+$popover-header-size-padding: 0 16px;
 $popover-header-font-default: subheading;
 $popover-footer-light-color-scheme-border: #f2f5f9;
 $popover-footer-light-color-scheme-background: #f2f5f9;
@@ -710,7 +752,6 @@ $radio-dark-color-scheme-states-focused-inner-circle-shadow: 0 0 0 1px #19252f;
 $radio-size-size: 14px;
 $radio-size-label-margin: 8px;
 $radio-font-default: body;
-$select-size-height: 30px;
 $select-size-left-padding: 16px;
 $select-size-right-padding: 8px;
 $select-size-left-padding-multiple: 8px;
@@ -724,22 +765,40 @@ $select-panel-font-default: body;
 $sidepanel-light-color-scheme-border: #bdc7d1;
 $sidepanel-dark-color-scheme-border: #19252f;
 $sidepanel-font-default: body;
-$sidepanel-header-size-padding: 14px 16px;
+$sidepanel-header-size-height: 56px;
+$sidepanel-header-size-padding: 0 16px;
 $sidepanel-header-size-close-padding: 0 0 0 8px;
 $sidepanel-header-font-default: title;
-$sidepanel-footer-size-padding: 16px;
+$sidepanel-footer-size-height: 64px;
+$sidepanel-footer-size-padding: 0 16px;
 $sidepanel-footer-font-default: body;
 $table-size-border-width: 1px;
 $table-size-row-padding-vertical: 8px;
 $table-size-row-padding-horizontal: 16px;
 $table-font-header: caption;
-$table-font-body: body;
+$table-font-body: body-tabular;
 $tabs-light-color-scheme-border: #d7dee4;
-$tabs-light-color-scheme-state-active: #0374eb;
-$tabs-light-color-scheme-state-disabled-overlay: rgba(white, 0.3);
+$tabs-light-color-scheme-state-normal-icon: #8c99a5;
+$tabs-light-color-scheme-state-normal-text: #19252f;
+$tabs-light-color-scheme-state-hover-icon: #19252f;
+$tabs-light-color-scheme-state-hover-text: #19252f;
+$tabs-light-color-scheme-state-active-marker-color: #0374eb;
+$tabs-light-color-scheme-state-empty-icon: #8c99a5;
+$tabs-light-color-scheme-state-empty-text: #8c99a5;
+$tabs-light-color-scheme-state-disabled-icon: #8c99a5;
+$tabs-light-color-scheme-state-disabled-text: #8c99a5;
+$tabs-light-color-scheme-state-disabled-marker-opacity: 0.3;
 $tabs-dark-color-scheme-border: #333f4a;
-$tabs-dark-color-scheme-state-active: #0059b8;
-$tabs-dark-color-scheme-state-disabled-overlay: rgba(black, 0.2);
+$tabs-dark-color-scheme-state-normal-icon: #8c99a5;
+$tabs-dark-color-scheme-state-normal-text: #f2f5f9;
+$tabs-dark-color-scheme-state-hover-icon: #f2f5f9;
+$tabs-dark-color-scheme-state-hover-text: #f2f5f9;
+$tabs-dark-color-scheme-state-active-marker-color: #0059b8;
+$tabs-dark-color-scheme-state-empty-icon: #6d7a86;
+$tabs-dark-color-scheme-state-empty-text: #6d7a86;
+$tabs-dark-color-scheme-state-disabled-icon: #6d7a86;
+$tabs-dark-color-scheme-state-disabled-text: #6d7a86;
+$tabs-dark-color-scheme-state-disabled-marker-opacity: 0.3;
 $tabs-size-height: 40px;
 $tabs-size-highlight-height: 4px;
 $tabs-size-padding-horizontal: 16px;
@@ -747,6 +806,14 @@ $tabs-size-border-width: 1px;
 $tabs-size-border-radius: 3px;
 $tabs-size-label-icon-margin: 8px;
 $tabs-font-default: body;
+$vertical-tabs-light-color-scheme-state-normal-background: transparent;
+$vertical-tabs-light-color-scheme-state-selected-background: #e7f1ff;
+$vertical-tabs-light-color-scheme-state-hover-background: rgba(black, 0.05);
+$vertical-tabs-light-color-scheme-state-hover-selected-background: adjust-color(#e7f1ff, $saturation:-22%, $lightness:-5%);
+$vertical-tabs-dark-color-scheme-state-normal-background: transparent;
+$vertical-tabs-dark-color-scheme-state-selected-background: #014b9d;
+$vertical-tabs-dark-color-scheme-state-hover-background: rgba(black, 0.05);
+$vertical-tabs-dark-color-scheme-state-hover-selected-background: adjust-color(#014b9d, $lightness:-1%);
 $tags-light-color-scheme-primary-background: #e7f1ff;
 $tags-light-color-scheme-primary-border: #e7f1ff;
 $tags-light-color-scheme-primary-text: #0374eb;
@@ -799,13 +866,12 @@ $tags-size-margin: 2px;
 $tags-size-height: 24px;
 $tags-size-border-width: 1px;
 $tags-size-border-radius: 4px;
-$tags-size-icon-padding: 3px;
+$tags-size-icon-padding: 4px;
 $tags-size-text-margin: 8px;
 $tags-font-default: caption;
 $tags-font-mono: caption-mono;
 $tags-font-caps: caption-caps;
 $tag-list-size-padding: 1px 6px;
-$tag-list-size-min-height: 30px;
 $tag-input-size-height: 22px;
 $tag-input-size-margin: 2px 4px;
 $tag-input-font-default: body;
@@ -886,7 +952,9 @@ $extended-tooltip-header-size-height: 40px;
 $extended-tooltip-header-size-padding: 10px 16px;
 $extended-tooltip-header-font-default: subheading;
 $tree-size-node-height: 32px;
-$tree-size-padding-left: 8px;
+$tree-size-padding-left: 12px;
+$tree-size-toggle-padding: 4px;
+$tree-size-icon-padding: 8px;
 $tree-size-padding-right: 16px;
 $tree-font-node: body;
 $light-color-scheme-primary-palette: (
@@ -1502,102 +1570,133 @@ $typography-display-1-letter-spacing: normal;
 $typography-display-1-font-weight: normal;
 $typography-display-1-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-display-1-text-transform: null;
+$typography-display-1-font-feature-settings: null;
 $typography-display-2-font-size: 45px;
 $typography-display-2-line-height: 56px;
 $typography-display-2-letter-spacing: normal;
 $typography-display-2-font-weight: normal;
 $typography-display-2-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-display-2-text-transform: null;
+$typography-display-2-font-feature-settings: null;
 $typography-display-3-font-size: 34px;
 $typography-display-3-line-height: 44px;
 $typography-display-3-letter-spacing: normal;
 $typography-display-3-font-weight: normal;
 $typography-display-3-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-display-3-text-transform: null;
+$typography-display-3-font-feature-settings: null;
 $typography-headline-font-size: 24px;
 $typography-headline-line-height: 32px;
 $typography-headline-letter-spacing: normal;
 $typography-headline-font-weight: normal;
 $typography-headline-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-headline-text-transform: null;
+$typography-headline-font-feature-settings: null;
 $typography-title-font-size: 20px;
 $typography-title-line-height: 28px;
 $typography-title-letter-spacing: normal;
 $typography-title-font-weight: 600;
 $typography-title-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-title-text-transform: null;
+$typography-title-font-feature-settings: null;
 $typography-subheading-font-size: 15px;
 $typography-subheading-line-height: 20px;
 $typography-subheading-letter-spacing: -0.009em;
 $typography-subheading-font-weight: 600;
 $typography-subheading-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-subheading-text-transform: null;
+$typography-subheading-font-feature-settings: "ss01" on, "ss04" on;
 $typography-body-font-size: 15px;
 $typography-body-line-height: 20px;
 $typography-body-letter-spacing: -0.009em;
 $typography-body-font-weight: normal;
 $typography-body-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-body-text-transform: null;
+$typography-body-font-feature-settings: "ss01" on, "ss04" on;
+$typography-body-tabular-font-size: 15px;
+$typography-body-tabular-line-height: 20px;
+$typography-body-tabular-letter-spacing: -0.009em;
+$typography-body-tabular-font-weight: normal;
+$typography-body-tabular-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-body-tabular-text-transform: null;
+$typography-body-tabular-font-feature-settings: "tnum" on, "ss01" on, "ss04" on;
 $typography-body-strong-font-size: 15px;
 $typography-body-strong-line-height: 20px;
 $typography-body-strong-letter-spacing: -0.009em;
 $typography-body-strong-font-weight: 500;
 $typography-body-strong-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-body-strong-text-transform: null;
+$typography-body-strong-font-feature-settings: "ss01" on, "ss04" on;
 $typography-body-caps-font-size: 15px;
 $typography-body-caps-line-height: 20px;
 $typography-body-caps-letter-spacing: 1.7px;
 $typography-body-caps-font-weight: normal;
 $typography-body-caps-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-body-caps-text-transform: uppercase;
+$typography-body-caps-font-feature-settings: "ss01" on, "ss04" on;
 $typography-body-mono-font-size: 15px;
 $typography-body-mono-line-height: 20px;
 $typography-body-mono-letter-spacing: normal;
 $typography-body-mono-font-weight: normal;
 $typography-body-mono-font-family: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
 $typography-body-mono-text-transform: null;
+$typography-body-mono-font-feature-settings: null;
 $typography-caption-font-size: 13px;
 $typography-caption-line-height: 16px;
 $typography-caption-letter-spacing: -0.0025em;
 $typography-caption-font-weight: normal;
 $typography-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-caption-text-transform: null;
+$typography-caption-font-feature-settings: "ss01" on, "ss04" on;
+$typography-caption-tabular-font-size: 13px;
+$typography-caption-tabular-line-height: 16px;
+$typography-caption-tabular-letter-spacing: -0.0025em;
+$typography-caption-tabular-font-weight: normal;
+$typography-caption-tabular-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-caption-tabular-text-transform: null;
+$typography-caption-tabular-font-feature-settings: "tnum" on, "ss01" on, "ss04" on;
 $typography-caption-caps-font-size: 13px;
 $typography-caption-caps-line-height: 16px;
 $typography-caption-caps-letter-spacing: 1.5px;
 $typography-caption-caps-font-weight: normal;
 $typography-caption-caps-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-caption-caps-text-transform: uppercase;
+$typography-caption-caps-font-feature-settings: "ss01" on, "ss04" on;
 $typography-caption-mono-font-size: 13px;
 $typography-caption-mono-line-height: 16px;
 $typography-caption-mono-letter-spacing: normal;
 $typography-caption-mono-font-weight: normal;
 $typography-caption-mono-font-family: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
 $typography-caption-mono-text-transform: null;
+$typography-caption-mono-font-feature-settings: null;
 $typography-small-text-font-size: 13px;
 $typography-small-text-line-height: 16px;
 $typography-small-text-letter-spacing: -0.0025em;
 $typography-small-text-font-weight: normal;
 $typography-small-text-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-small-text-text-transform: null;
+$typography-small-text-font-feature-settings: "ss01" on, "ss04" on;
 $typography-extra-small-text-font-size: 11px;
 $typography-extra-small-text-line-height: 16px;
 $typography-extra-small-text-letter-spacing: 0.005em;
 $typography-extra-small-text-font-weight: normal;
 $typography-extra-small-text-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-extra-small-text-text-transform: null;
+$typography-extra-small-text-font-feature-settings: "ss01" on, "ss04" on;
 $typography-extra-small-text-caps-font-size: 11px;
 $typography-extra-small-text-caps-line-height: 16px;
 $typography-extra-small-text-caps-letter-spacing: 1px;
 $typography-extra-small-text-caps-font-weight: normal;
 $typography-extra-small-text-caps-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-extra-small-text-caps-text-transform: uppercase;
+$typography-extra-small-text-caps-font-feature-settings: "ss01" on, "ss04" on;
 $typography-extra-small-text-mono-font-size: 11px;
 $typography-extra-small-text-mono-line-height: 16px;
 $typography-extra-small-text-mono-letter-spacing: 0px;
 $typography-extra-small-text-mono-font-weight: normal;
 $typography-extra-small-text-mono-font-family: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
 $typography-extra-small-text-mono-text-transform: null;
+$typography-extra-small-text-mono-font-feature-settings: null;
 
 $mosaic: (
   'typography': (
@@ -1607,7 +1706,8 @@ $mosaic: (
       'letter-spacing': $typography-display-1-letter-spacing,
       'font-weight': $typography-display-1-font-weight,
       'font-family': $typography-display-1-font-family,
-      'text-transform': $typography-display-1-text-transform
+      'text-transform': $typography-display-1-text-transform,
+      'font-feature-settings': $typography-display-1-font-feature-settings
     ),
     'display-2': (
       'font-size': $typography-display-2-font-size,
@@ -1615,7 +1715,8 @@ $mosaic: (
       'letter-spacing': $typography-display-2-letter-spacing,
       'font-weight': $typography-display-2-font-weight,
       'font-family': $typography-display-2-font-family,
-      'text-transform': $typography-display-2-text-transform
+      'text-transform': $typography-display-2-text-transform,
+      'font-feature-settings': $typography-display-2-font-feature-settings
     ),
     'display-3': (
       'font-size': $typography-display-3-font-size,
@@ -1623,7 +1724,8 @@ $mosaic: (
       'letter-spacing': $typography-display-3-letter-spacing,
       'font-weight': $typography-display-3-font-weight,
       'font-family': $typography-display-3-font-family,
-      'text-transform': $typography-display-3-text-transform
+      'text-transform': $typography-display-3-text-transform,
+      'font-feature-settings': $typography-display-3-font-feature-settings
     ),
     'headline': (
       'font-size': $typography-headline-font-size,
@@ -1631,7 +1733,8 @@ $mosaic: (
       'letter-spacing': $typography-headline-letter-spacing,
       'font-weight': $typography-headline-font-weight,
       'font-family': $typography-headline-font-family,
-      'text-transform': $typography-headline-text-transform
+      'text-transform': $typography-headline-text-transform,
+      'font-feature-settings': $typography-headline-font-feature-settings
     ),
     'title': (
       'font-size': $typography-title-font-size,
@@ -1639,7 +1742,8 @@ $mosaic: (
       'letter-spacing': $typography-title-letter-spacing,
       'font-weight': $typography-title-font-weight,
       'font-family': $typography-title-font-family,
-      'text-transform': $typography-title-text-transform
+      'text-transform': $typography-title-text-transform,
+      'font-feature-settings': $typography-title-font-feature-settings
     ),
     'subheading': (
       'font-size': $typography-subheading-font-size,
@@ -1647,7 +1751,8 @@ $mosaic: (
       'letter-spacing': $typography-subheading-letter-spacing,
       'font-weight': $typography-subheading-font-weight,
       'font-family': $typography-subheading-font-family,
-      'text-transform': $typography-subheading-text-transform
+      'text-transform': $typography-subheading-text-transform,
+      'font-feature-settings': $typography-subheading-font-feature-settings
     ),
     'body': (
       'font-size': $typography-body-font-size,
@@ -1655,7 +1760,17 @@ $mosaic: (
       'letter-spacing': $typography-body-letter-spacing,
       'font-weight': $typography-body-font-weight,
       'font-family': $typography-body-font-family,
-      'text-transform': $typography-body-text-transform
+      'text-transform': $typography-body-text-transform,
+      'font-feature-settings': $typography-body-font-feature-settings
+    ),
+    'body-tabular': (
+      'font-size': $typography-body-tabular-font-size,
+      'line-height': $typography-body-tabular-line-height,
+      'letter-spacing': $typography-body-tabular-letter-spacing,
+      'font-weight': $typography-body-tabular-font-weight,
+      'font-family': $typography-body-tabular-font-family,
+      'text-transform': $typography-body-tabular-text-transform,
+      'font-feature-settings': $typography-body-tabular-font-feature-settings
     ),
     'body-strong': (
       'font-size': $typography-body-strong-font-size,
@@ -1663,7 +1778,8 @@ $mosaic: (
       'letter-spacing': $typography-body-strong-letter-spacing,
       'font-weight': $typography-body-strong-font-weight,
       'font-family': $typography-body-strong-font-family,
-      'text-transform': $typography-body-strong-text-transform
+      'text-transform': $typography-body-strong-text-transform,
+      'font-feature-settings': $typography-body-strong-font-feature-settings
     ),
     'body-caps': (
       'font-size': $typography-body-caps-font-size,
@@ -1671,7 +1787,8 @@ $mosaic: (
       'letter-spacing': $typography-body-caps-letter-spacing,
       'font-weight': $typography-body-caps-font-weight,
       'font-family': $typography-body-caps-font-family,
-      'text-transform': $typography-body-caps-text-transform
+      'text-transform': $typography-body-caps-text-transform,
+      'font-feature-settings': $typography-body-caps-font-feature-settings
     ),
     'body-mono': (
       'font-size': $typography-body-mono-font-size,
@@ -1679,7 +1796,8 @@ $mosaic: (
       'letter-spacing': $typography-body-mono-letter-spacing,
       'font-weight': $typography-body-mono-font-weight,
       'font-family': $typography-body-mono-font-family,
-      'text-transform': $typography-body-mono-text-transform
+      'text-transform': $typography-body-mono-text-transform,
+      'font-feature-settings': $typography-body-mono-font-feature-settings
     ),
     'caption': (
       'font-size': $typography-caption-font-size,
@@ -1687,7 +1805,17 @@ $mosaic: (
       'letter-spacing': $typography-caption-letter-spacing,
       'font-weight': $typography-caption-font-weight,
       'font-family': $typography-caption-font-family,
-      'text-transform': $typography-caption-text-transform
+      'text-transform': $typography-caption-text-transform,
+      'font-feature-settings': $typography-caption-font-feature-settings
+    ),
+    'caption-tabular': (
+      'font-size': $typography-caption-tabular-font-size,
+      'line-height': $typography-caption-tabular-line-height,
+      'letter-spacing': $typography-caption-tabular-letter-spacing,
+      'font-weight': $typography-caption-tabular-font-weight,
+      'font-family': $typography-caption-tabular-font-family,
+      'text-transform': $typography-caption-tabular-text-transform,
+      'font-feature-settings': $typography-caption-tabular-font-feature-settings
     ),
     'caption-caps': (
       'font-size': $typography-caption-caps-font-size,
@@ -1695,7 +1823,8 @@ $mosaic: (
       'letter-spacing': $typography-caption-caps-letter-spacing,
       'font-weight': $typography-caption-caps-font-weight,
       'font-family': $typography-caption-caps-font-family,
-      'text-transform': $typography-caption-caps-text-transform
+      'text-transform': $typography-caption-caps-text-transform,
+      'font-feature-settings': $typography-caption-caps-font-feature-settings
     ),
     'caption-mono': (
       'font-size': $typography-caption-mono-font-size,
@@ -1703,7 +1832,8 @@ $mosaic: (
       'letter-spacing': $typography-caption-mono-letter-spacing,
       'font-weight': $typography-caption-mono-font-weight,
       'font-family': $typography-caption-mono-font-family,
-      'text-transform': $typography-caption-mono-text-transform
+      'text-transform': $typography-caption-mono-text-transform,
+      'font-feature-settings': $typography-caption-mono-font-feature-settings
     ),
     'small-text': (
       'font-size': $typography-small-text-font-size,
@@ -1711,7 +1841,8 @@ $mosaic: (
       'letter-spacing': $typography-small-text-letter-spacing,
       'font-weight': $typography-small-text-font-weight,
       'font-family': $typography-small-text-font-family,
-      'text-transform': $typography-small-text-text-transform
+      'text-transform': $typography-small-text-text-transform,
+      'font-feature-settings': $typography-small-text-font-feature-settings
     ),
     'extra-small-text': (
       'font-size': $typography-extra-small-text-font-size,
@@ -1719,7 +1850,8 @@ $mosaic: (
       'letter-spacing': $typography-extra-small-text-letter-spacing,
       'font-weight': $typography-extra-small-text-font-weight,
       'font-family': $typography-extra-small-text-font-family,
-      'text-transform': $typography-extra-small-text-text-transform
+      'text-transform': $typography-extra-small-text-text-transform,
+      'font-feature-settings': $typography-extra-small-text-font-feature-settings
     ),
     'extra-small-text-caps': (
       'font-size': $typography-extra-small-text-caps-font-size,
@@ -1727,7 +1859,8 @@ $mosaic: (
       'letter-spacing': $typography-extra-small-text-caps-letter-spacing,
       'font-weight': $typography-extra-small-text-caps-font-weight,
       'font-family': $typography-extra-small-text-caps-font-family,
-      'text-transform': $typography-extra-small-text-caps-text-transform
+      'text-transform': $typography-extra-small-text-caps-text-transform,
+      'font-feature-settings': $typography-extra-small-text-caps-font-feature-settings
     ),
     'extra-small-text-mono': (
       'font-size': $typography-extra-small-text-mono-font-size,
@@ -1735,7 +1868,8 @@ $mosaic: (
       'letter-spacing': $typography-extra-small-text-mono-letter-spacing,
       'font-weight': $typography-extra-small-text-mono-font-weight,
       'font-family': $typography-extra-small-text-mono-font-family,
-      'text-transform': $typography-extra-small-text-mono-text-transform
+      'text-transform': $typography-extra-small-text-mono-text-transform,
+      'font-feature-settings': $typography-extra-small-text-mono-font-feature-settings
     )
   )
 );
@@ -1819,6 +1953,8 @@ $fonts: (
     }
 }
 
+
+
 // mixin definition ; sets LTR and RTL within the same style call
 // @see https://css-tricks.com/almanac/properties/d/direction/
 
@@ -1851,12 +1987,6 @@ $fonts: (
 }
 
 
-
-// Layout
-$baseline-grid:            8px !default;
-$layout-gutter-width:      ($baseline-grid * 2) !default;
-
-
 /*
 *  Responsive attributes
 *
@@ -1876,24 +2006,27 @@ $layout-gutter-width:      ($baseline-grid * 2) !default;
     }
 }
 
-@mixin flex-order-for-name($sizes:null) {
+@mixin flex-order-for-name($sizes: null) {
     @if $sizes == null {
-        $sizes : '';
+        $sizes: '';
 
         .flex-order {
-            order : 0;
+            order: 0;
         }
     }
 
     @for $i from -20 through 20 {
-        $order : '';
-        $suffix : '';
+        $order: '';
+        $suffix: '';
 
         @each $s in $sizes {
-            @if $s != '' { $suffix : '#{$s}-#{$i}'; }
-            @else        { $suffix : '#{$i}';       }
+            @if $s != '' {
+                $suffix: '#{$s}-#{$i}';
+            } @else {
+                $suffix: '#{$i}';
+            }
 
-            $order : '.flex-order-#{$suffix}';
+            $order: '.flex-order-#{$suffix}';
         }
 
         #{$order} {
@@ -1903,17 +2036,22 @@ $layout-gutter-width:      ($baseline-grid * 2) !default;
 }
 
 @mixin offset-for-name($sizes:null) {
-    @if $sizes == null { $sizes : ''; }
+    @if $sizes == null {
+        $sizes: '';
+    }
 
     @for $i from 0 through 19 {
-        $offsets : '';
-        $suffix : '';
+        $offsets: '';
+        $suffix: '';
 
         @each $s in $sizes {
-            @if $s != '' { $suffix : '#{$s}-#{$i * 5}'; }
-            @else        { $suffix : '#{$i * 5}';       }
+            @if $s != '' {
+                $suffix: '#{$s}-#{$i * 5}';
+            } @else {
+                $suffix: '#{$i * 5}';
+            }
 
-            $offsets :
+            $offsets:
                 '.offset-#{$suffix}, ' +
                 '.flex-offset-#{$suffix}, ' +
                 '.layout-margin .flex-offset-#{$suffix}, ' +
@@ -1921,20 +2059,26 @@ $layout-gutter-width:      ($baseline-grid * 2) !default;
         }
 
         #{$offsets} {
-            @if $i != 0 { @include rtl-prop(margin-left, margin-right, #{$i * 5 + '%'}, auto); }
-            @else { @include rtl-prop(margin-left, margin-right, 0, auto); }
+            @if $i != 0 {
+                @include rtl-prop(margin-left, margin-right, #{$i * 5 + '%'}, auto);
+            } @else {
+                @include rtl-prop(margin-left, margin-right, 0, auto);
+            }
         }
     }
 
     @each $i in 33 {
-        $offsets : '';
-        $suffix : '';
+        $offsets: '';
+        $suffix: '';
 
         @each $s in $sizes {
-            @if $s != '' {  $suffix : '#{$s}-#{$i}';   }
-            @else        {  $suffix : '#{$i}';         }
+            @if $s != '' {
+                $suffix: '#{$s}-#{$i}';
+            } @else {
+                $suffix: '#{$i}';
+            }
 
-            $offsets :
+            $offsets:
                 '.offset-#{$suffix}, ' +
                 '.flex-offset-#{$suffix}, ' +
                 '.layout-margin .flex-offset-#{$suffix}, ' +
@@ -1947,14 +2091,17 @@ $layout-gutter-width:      ($baseline-grid * 2) !default;
     }
 
     @each $i in 66 {
-        $offsets : '';
-        $suffix : '';
+        $offsets: '';
+        $suffix: '';
 
         @each $s in $sizes {
-            @if $s != '' {  $suffix : '#{$s}-#{$i}';   }
-            @else        {  $suffix : '#{$i}';         }
+            @if $s != '' {
+                $suffix: '#{$s}-#{$i}';
+            } @else {
+                $suffix: '#{$i}';
+            }
 
-            $offsets :
+            $offsets:
                 '.offset-#{$suffix}, ' +
                 '.flex-offset-#{$suffix}, ' +
                 '.layout-margin .flex-offset-#{$suffix}, ' +
@@ -1968,8 +2115,13 @@ $layout-gutter-width:      ($baseline-grid * 2) !default;
 }
 
 @mixin layout-for-name($name: null) {
-    @if $name == null { $name : '';          }
-    @if $name != ''   { $name : '-#{$name}'; }
+    @if $name == null {
+        $name: '';
+    }
+
+    @if $name != '' {
+        $name: '-#{$name}';
+    }
 
     .layout#{$name},
     .layout#{$name}-column,
@@ -1996,6 +2148,7 @@ $layout-gutter-width:      ($baseline-grid * 2) !default;
 
 @mixin flex-properties-for-name($name: null) {
     $flexName: 'flex';
+
     @if $name != null {
         $flexName: 'flex-#{$name}';
         $name: '-#{$name}';
@@ -2005,22 +2158,16 @@ $layout-gutter-width:      ($baseline-grid * 2) !default;
 
     // === flex: 1 1 0%;
     .#{$flexName}             { flex: 1;         box-sizing: border-box; }
-
     .#{$flexName}-grow        { flex: 1 1 100%;  box-sizing: border-box; }
-
     .#{$flexName}-initial     { flex: 0 1 auto;  box-sizing: border-box; }
-
     .#{$flexName}-auto        { flex: 1 1 auto;  box-sizing: border-box; }
-
     .#{$flexName}-none        { flex: 0 0 auto;  box-sizing: border-box; }
-
-    .#{$flexName}-noshrink    { flex: 1 0 auto;  box-sizing: border-box; }
-
-    .#{$flexName}-nogrow      { flex: 0 1 auto;  box-sizing: border-box; }
+    .#{$flexName}-no-shrink    { flex: 1 0 auto;  box-sizing: border-box; }
+    .#{$flexName}-no-grow      { flex: 0 1 auto;  box-sizing: border-box; }
 
     // (1-20) * 5 = 0-100%
     @for $i from 0 through 20 {
-        $value : #{$i * 5 + '%'};
+        $value: #{$i * 5 + '%'};
 
         .#{$flexName}-#{$i * 5} {
             flex: 1 1 100%;
@@ -2036,7 +2183,9 @@ $layout-gutter-width:      ($baseline-grid * 2) !default;
             box-sizing: border-box;
 
             // Required by Chrome M48+ due to http://crbug.com/546034
-            @if $i == 0 {  min-width: 0;  }
+            @if $i == 0 {
+                min-width: 0;
+            }
         }
 
         .layout-column > .#{$flexName}-#{$i * 5} {
@@ -2053,7 +2202,9 @@ $layout-gutter-width:      ($baseline-grid * 2) !default;
             box-sizing: border-box;
 
             // Required by Chrome M48+ due to http://crbug.com/546034
-            @if $i == 0 {  min-width: 0;  }
+            @if $i == 0 {
+                min-width: 0;
+            }
         }
 
         .layout#{$name}-column > .#{$flexName}-#{$i * 5} {
@@ -2063,44 +2214,117 @@ $layout-gutter-width:      ($baseline-grid * 2) !default;
             box-sizing: border-box;
 
             // Required by Chrome M48+ due to http://crbug.com/546034
-            @if $i == 0 {  min-height: 0;  }
+            @if $i == 0 {
+                min-height: 0;
+            }
         }
     }
 
     @if ($name == '') {
-        .flex-33 { flex: 1 1 100%;  max-width: 33.33%;  max-height: 100%; box-sizing: border-box; }
+        .flex-33 {
+            flex: 1 1 100%;
+            max-width: 33.33%;
+            max-height: 100%;
+            box-sizing: border-box;
+        }
 
-        .flex-66 { flex: 1 1 100%;  max-width: 66.66%;  max-height: 100%; box-sizing: border-box; }
+        .flex-66 {
+            flex: 1 1 100%;
+            max-width: 66.66%;
+            max-height: 100%;
+            box-sizing: border-box;
+        }
     }
 
     .layout-row {
-        > .#{$flexName}-33 { flex: 1 1 33.33%;  max-width: 33.33%;  max-height: 100%; box-sizing: border-box; }
+        > .#{$flexName}-33 {
+            flex: 1 1 33.33%;
+            max-width: 33.33%;
+            max-height: 100%;
+            box-sizing: border-box;
+        }
 
-        > .#{$flexName}-66 { flex: 1 1 66.66%;  max-width: 66.66%;  max-height: 100%; box-sizing: border-box; }
+        > .#{$flexName}-66 {
+            flex: 1 1 66.66%;
+            max-width: 66.66%;
+            max-height: 100%;
+            box-sizing: border-box;
+        }
     }
 
     .layout-column {
-        > .#{$flexName}-33 { flex: 1 1 33.33%;  max-width: 100%;  max-height: 33.33%; box-sizing: border-box; }
+        > .#{$flexName}-33 {
+            flex: 1 1 33.33%;
+            max-width: 100%;
+            max-height: 33.33%;
+            box-sizing: border-box;
+        }
 
-        > .#{$flexName}-66 { flex: 1 1 66.66%;  max-width: 100%;  max-height: 66.66%; box-sizing: border-box; }
+        > .#{$flexName}-66 {
+            flex: 1 1 66.66%;
+            max-width: 100%;
+            max-height: 66.66%;
+            box-sizing: border-box;
+        }
     }
 
     .layout#{$name}-row {
-        > .#{$flexName}-33 { flex: 1 1 100%;  max-width: 33.33%;  max-height: 100%; box-sizing: border-box; }
+        > .#{$flexName}-33 {
+            flex: 1 1 100%;
+            max-width: 33.33%;
+            max-height: 100%;
+            box-sizing: border-box;
+        }
 
-        > .#{$flexName}-66 { flex: 1 1 100%;  max-width: 66.66%;  max-height: 100%; box-sizing: border-box; }
+        > .#{$flexName}-66 {
+            flex: 1 1 100%;
+            max-width: 66.66%;
+            max-height: 100%;
+            box-sizing: border-box;
+        }
 
         // Required by Chrome M48+ due to http://crbug.com/546034
-        > .flex { min-width: 0;  }
+        > .flex {
+            min-width: 0;
+        }
     }
 
     .layout#{$name}-column {
-        > .#{$flexName}-33 { flex: 1 1 100%;  max-width: 100%;  max-height: 33.33%; box-sizing: border-box; }
+        > .#{$flexName}-33 {
+            flex: 1 1 100%;
+            max-width: 100%;
+            max-height: 33.33%;
+            box-sizing: border-box;
+        }
 
-        > .#{$flexName}-66 { flex: 1 1 100%;  max-width: 100%;  max-height: 66.66%; box-sizing: border-box; }
+        > .#{$flexName}-66 {
+            flex: 1 1 100%;
+            max-width: 100%;
+            max-height: 66.66%;
+            box-sizing: border-box;
+        }
 
         // Required by Chrome M48+ due to http://crbug.com/546034
-        > .flex { min-height: 0; }
+        > .flex {
+            min-height: 0;
+        }
+    }
+
+    .layout-wrap {
+        flex-wrap: wrap;
+    }
+
+    .layout-nowrap {
+        flex-wrap: nowrap;
+    }
+
+    .layout-fill {
+        margin: 0;
+
+        width: 100%;
+
+        min-height: 100%;
+        height: 100%;
     }
 }
 
@@ -2118,10 +2342,9 @@ $layout-gutter-width:      ($baseline-grid * 2) !default;
     }
 
     .#{$name},
-    .#{$name}-start-stretch // defaults
-    {
-        justify-content : flex-start;
-        align-content : stretch;
+    .#{$name}-start-stretch {
+        justify-content: flex-start;
+        align-content: stretch;
         align-items: stretch;
     }
 
@@ -2130,18 +2353,16 @@ $layout-gutter-width:      ($baseline-grid * 2) !default;
     .#{$name}-start-start,
     .#{$name}-start-center,
     .#{$name}-start-end,
-    .#{$name}-start-stretch
-    {
+    .#{$name}-start-stretch {
         justify-content: flex-start;
     }
 
     // Main Axis Center
-    .#{$name}-center,           //stretch
+    .#{$name}-center, //stretch
     .#{$name}-center-start,
     .#{$name}-center-center,
     .#{$name}-center-end,
-    .#{$name}-center-stretch
-    {
+    .#{$name}-center-stretch {
         justify-content: center;
     }
 
@@ -2150,8 +2371,7 @@ $layout-gutter-width:      ($baseline-grid * 2) !default;
     .#{$name}-end-start,
     .#{$name}-end-center,
     .#{$name}-end-end,
-    .#{$name}-end-stretch
-    {
+    .#{$name}-end-stretch {
         justify-content: flex-end;
     }
 
@@ -2160,8 +2380,7 @@ $layout-gutter-width:      ($baseline-grid * 2) !default;
     .#{$name}-space-around-center,
     .#{$name}-space-around-start,
     .#{$name}-space-around-end,
-    .#{$name}-space-around-stretch
-    {
+    .#{$name}-space-around-stretch {
         justify-content: space-around;
     }
 
@@ -2170,12 +2389,10 @@ $layout-gutter-width:      ($baseline-grid * 2) !default;
     .#{$name}-space-between-center,
     .#{$name}-space-between-start,
     .#{$name}-space-between-end,
-    .#{$name}-space-between-stretch
-    {
+    .#{$name}-space-between-stretch {
         justify-content: space-between;
     }
 
-
     // Arrange on the Cross Axis
     // center, start, end
     // stretch is the default for align-items
@@ -2186,8 +2403,7 @@ $layout-gutter-width:      ($baseline-grid * 2) !default;
     .#{$name}-center-start,
     .#{$name}-end-start,
     .#{$name}-space-between-start,
-    .#{$name}-space-around-start
-    {
+    .#{$name}-space-around-start {
         align-items: flex-start;
         align-content: flex-start;
     }
@@ -2197,8 +2413,7 @@ $layout-gutter-width:      ($baseline-grid * 2) !default;
     .#{$name}-center-center,
     .#{$name}-end-center,
     .#{$name}-space-between-center,
-    .#{$name}-space-around-center
-    {
+    .#{$name}-space-around-center {
         align-items: center;
         align-content: center;
         max-width: 100%;
@@ -2209,8 +2424,7 @@ $layout-gutter-width:      ($baseline-grid * 2) !default;
     .#{$name}-center-center > *,
     .#{$name}-end-center > *,
     .#{$name}-space-between-center > *,
-    .#{$name}-space-around-center > *
-    {
+    .#{$name}-space-around-center > * {
         max-width: 100%;
         box-sizing: border-box;
     }
@@ -2220,8 +2434,7 @@ $layout-gutter-width:      ($baseline-grid * 2) !default;
     .#{$name}-center-end,
     .#{$name}-end-end,
     .#{$name}-space-between-end,
-    .#{$name}-space-around-end
-    {
+    .#{$name}-space-around-end {
         align-items: flex-end;
         align-content: flex-end;
     }
@@ -2231,117 +2444,88 @@ $layout-gutter-width:      ($baseline-grid * 2) !default;
     .#{$name}-center-stretch,
     .#{$name}-end-stretch,
     .#{$name}-space-between-stretch,
-    .#{$name}-space-around-stretch
-    {
+    .#{$name}-space-around-stretch {
         align-items: stretch;
         align-content: stretch;
     }
 }
 
-@mixin layout-padding-margin() {
-
-    // NOTE: these`> *` selectors should only be applied for layout="row" or layout="column" children !!
-    .layout-padding-sm > *,
-    .layout-padding    > .flex-sm
-    {
-        padding: div($layout-gutter-width, 4);
-    }
-
-    .layout-padding,
-    .layout-padding-gt-sm,
-    .layout-padding-md,
-
-        // NOTE: these`> *` selectors should only be applied for layout="row" or layout="column" children !!
-    .layout-padding        > *,
-    .layout-padding-gt-sm  > *,
-    .layout-padding-md     > *,
-
-    .layout-padding        > .flex,
-    .layout-padding        > .flex-gt-sm,
-    .layout-padding        > .flex-md
-    {
-        padding: div($layout-gutter-width, 2);
-    }
-
-    // NOTE: these`> *` selectors should only be applied for layout="row" or layout="column" children !!
-    .layout-padding-gt-md  > *,
-    .layout-padding-lg     > *,
-    .layout-padding-gt-lg  > *,
-
-    .layout-padding        > .flex-gt-md,
-    .layout-padding        > .flex-lg,
-    .layout-padding        > .flex-gt-lg
-    {
-        padding: div($layout-gutter-width, 1);
-    }
-
-    // Margin enhancements
-
-    .layout-margin-sm      > *,
-    .layout-margin         > .flex-sm {
-        margin: div($layout-gutter-width, 4);
-    }
-
-    .layout-margin,
-    .layout-margin-gt-sm,
-    .layout-margin-md,
-
-        // NOTE: these`> *` selectors should only be applied for layout="row" or layout="column" children !!
-    .layout-margin         > *,
-    .layout-margin-gt-sm   > *,
-    .layout-margin-md      > *,
-
-    .layout-margin         > .flex,
-    .layout-margin         > .flex-gt-sm,
-    .layout-margin         > .flex-md
-    {
-        margin: div($layout-gutter-width, 2);
-    }
-
-    // NOTE: these`> *` selectors should only be applied for layout="row" or layout="column" children !!
-    .layout-margin-gt-md  > *,
-    .layout-margin-lg     > *,
-    .layout-margin-gt-lg  > *,
+@mixin layout-indents() {
+    $sizes: (
+        '3xs': $size-3xs,
+        'xxs': $size-xxs,
+        'xs': $size-xs,
+        's': $size-s,
+        'm': $size-m,
+        'l': $size-l,
+        'xl': $size-xl,
+        'xxl': $size-xxl,
+        '3xl': $size-3xl,
+        '4xl': $size-4xl,
+        '5xl': $size-5xl,
+        '6xl': $size-6xl,
+        '7xl': $size-7xl
+    );
+
+    $indents: 'padding', 'margin';
+
+    @each $indent in $indents {
+        @each $name, $value in $sizes {
+            .layout-#{$indent}-#{$name} {
+                #{$indent}: $value;
+            }
+
+            .layout-#{$indent}-top-#{$name} {
+                #{$indent}-top: $value;
+            }
+
+            .layout-#{$indent}-right-#{$name} {
+                #{$indent}-right: $value;
+            }
+
+            .layout-#{$indent}-bottom-#{$name} {
+                #{$indent}-bottom: $value;
+            }
+
+            .layout-#{$indent}-left-#{$name} {
+                #{$indent}-left: $value;
+            }
+        }
 
-    .layout-margin        > .flex-gt-md,
-    .layout-margin        > .flex-lg,
-    .layout-margin        > .flex-gt-lg
-    {
-        margin: div($layout-gutter-width, 1);
-    }
+        .layout-#{$indent}-no-top {
+            #{$indent}-top: 0;
+        }
 
-    .layout-wrap {
-        flex-wrap: wrap;
-    }
+        .layout-#{$indent}-no-right {
+            #{$indent}-right: 0;
+        }
 
-    .layout-nowrap {
-        flex-wrap: nowrap;
-    }
+        .layout-#{$indent}-no-bottom {
+            #{$indent}-bottom: 0;
+        }
 
-    .layout-fill {
-        margin: 0;
-        width: 100%;
-        min-height: 100%;
-        height: 100%;
+        .layout-#{$indent}-no-left {
+            #{$indent}-left: 0;
+        }
     }
 }
 
-@mixin layouts_for_breakpoint($name:null) {
-
+@mixin layouts_for_breakpoint($name: null) {
     @include flex-order-for-name($name);
     @include offset-for-name($name);
     @include layout-align-for-name($name);
 
     @include flex-properties-for-name($name);
     @include layout-for-name($name);
+
+    @include layout-indents();
 }
 
 
 
-@mixin media-print {
 
+@mixin media-print {
     @media print {
-
         .hide-print:not(.show-print):not(.show) {
             display: none !important;
         }
@@ -2389,12 +2573,8 @@ $horizontal-padding: 24px;
 
 
 @mixin mosaic-visual() {
-
     // include specific mixins
-
     @include body_html();
     @include layouts_for_breakpoint();
-    @include layout-padding-margin();
-
     @include media-print();
 }