@central-design-system/components 3.0.0-beta.11 → 3.0.0-beta.13

package/dist/components/CdsFooter/CdsFooter.vue.d.ts

@@ -5,7 +5,11 @@ declare const _sfc_main: import("vue").DefineComponent<{
         available: readonly ["cds", "b2b", "promo", "dark"];
         default: undefined;
     };
-    dark: {
+    transparent: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    invertColor: {
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
@@ -42,7 +46,11 @@ declare const _sfc_main: import("vue").DefineComponent<{
         available: readonly ["cds", "b2b", "promo", "dark"];
         default: undefined;
     };
-    dark: {
+    transparent: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    invertColor: {
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
@@ -74,7 +82,8 @@ declare const _sfc_main: import("vue").DefineComponent<{
     onFocusin?: ((event: FocusEvent) => any) | undefined;
     onReveal?: ((value: boolean) => any) | undefined;
 }, {
-    dark: boolean;
+    invertColor: boolean;
+    transparent: boolean;
     theme: string;
     modelValue: boolean;
     height: string | number;

package/dist/components/CdsHeader/CdsHeader.vue.d.ts

@@ -5,7 +5,11 @@ declare const _sfc_main: import("vue").DefineComponent<{
         available: readonly ["cds", "b2b", "promo", "dark"];
         default: undefined;
     };
-    dark: {
+    transparent: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    invertColor: {
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
@@ -42,7 +46,11 @@ declare const _sfc_main: import("vue").DefineComponent<{
         available: readonly ["cds", "b2b", "promo", "dark"];
         default: undefined;
     };
-    dark: {
+    transparent: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    invertColor: {
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
@@ -74,7 +82,8 @@ declare const _sfc_main: import("vue").DefineComponent<{
     onFocusin?: ((event: FocusEvent) => any) | undefined;
     onReveal?: ((value: boolean) => any) | undefined;
 }, {
-    dark: boolean;
+    invertColor: boolean;
+    transparent: boolean;
     theme: string;
     modelValue: boolean;
     height: string | number;

package/dist/components/CdsIcon/CdsIcon.vue.d.ts

@@ -7,6 +7,10 @@ declare const _sfc_main: import("vue").DefineComponent<{
         available: readonly ["cds", "b2b", "promo", "dark"];
         default: undefined;
     };
+    invertColor: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
     size: {
         type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
         default: string;
@@ -25,9 +29,11 @@ declare const _sfc_main: import("vue").DefineComponent<{
     iconComponent: import("vue").ComputedRef<string>;
     sizeClasses: import("vue").ComputedRef<string>;
     themeClasses: Readonly<import("vue").ComputedRef<string | undefined>>;
+    invertColorClasses: import("vue").ComputedRef<string | undefined>;
 } | {
     sizeClasses: import("vue").ComputedRef<string>;
     themeClasses: Readonly<import("vue").ComputedRef<string | undefined>>;
+    invertColorClasses: import("vue").ComputedRef<string | undefined>;
     iconComponent?: undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     theme: {
@@ -35,6 +41,10 @@ declare const _sfc_main: import("vue").DefineComponent<{
         available: readonly ["cds", "b2b", "promo", "dark"];
         default: undefined;
     };
+    invertColor: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
     size: {
         type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
         default: string;
@@ -51,6 +61,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
     };
 }>> & {}, {
     size: "xs" | "sm" | "md" | "lg" | "xl";
+    invertColor: boolean;
     theme: string;
     name: "search" | "link" | "list" | "filters" | "add" | "alert-fill" | "alert" | "analog" | "arrow-down" | "arrow-left-bottom" | "arrow-left-top" | "arrow-left" | "arrow-right-bottom" | "arrow-right-top" | "arrow-right" | "arrow-up" | "arrows-vertical" | "calendar" | "card-bank" | "category" | "check-fill" | "check" | "checkbox-fill" | "checkbox" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chocholate-menu" | "chocolate-menu" | "clock" | "collapse" | "comment" | "company" | "compare" | "copy" | "data-cards" | "delete" | "directory" | "doc-download" | "doc" | "download" | "draggable" | "edit" | "enter" | "error-fill" | "error" | "expand" | "external" | "facebook-fill" | "facebook" | "flag" | "funnel" | "globe" | "infinity" | "info-fill" | "info" | "insert" | "list-search" | "loader" | "location" | "locked" | "login" | "logout" | "menu" | "minus" | "notification" | "overflow-menu-horizontal" | "overflow-menu-vertical" | "password" | "pin" | "plus" | "printer" | "question-fill" | "question" | "refresh" | "remove" | "sandglass" | "save" | "settings" | "shopping-cart" | "sort-date" | "source" | "star-fill" | "star" | "telegram" | "timer" | "tool" | "truck" | "unlocked" | "upload" | "user-avatar" | "user-group" | "visibility-off" | "visibility-on" | "vk" | "winner" | "workspace" | "youtube";
 }>;

package/dist/components/CdsList/CdsList.vue.d.ts

@@ -17,7 +17,11 @@ declare const _sfc_main: import("vue").DefineComponent<{
     opened: PropType<unknown[]>;
     selected: PropType<unknown[]>;
     required: BooleanConstructor;
-    dark: {
+    transparent: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    invertColor: {
         type: PropType<boolean>;
         default: boolean;
     };
@@ -118,7 +122,11 @@ declare const _sfc_main: import("vue").DefineComponent<{
     opened: PropType<unknown[]>;
     selected: PropType<unknown[]>;
     required: BooleanConstructor;
-    dark: {
+    transparent: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    invertColor: {
         type: PropType<boolean>;
         default: boolean;
     };
@@ -196,7 +204,8 @@ declare const _sfc_main: import("vue").DefineComponent<{
     tag: string;
     size: NonNullable<"xs" | "sm" | "md" | "lg" | "xl">;
     disabled: boolean;
-    dark: boolean;
+    invertColor: boolean;
+    transparent: boolean;
     required: boolean;
     selectStrategy: NonNullable<import("../../composable/nested/selectStrategies").TSelectStrategyProp>;
     openStrategy: NonNullable<import("../../composable/nested/openStrategies").TOpenStrategyProp>;

package/dist/components/CdsList/CdsListItem.vue.d.ts

@@ -65,7 +65,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         default: boolean;
     };
 }, {
-    tag: import("vue").ComputedRef<string>;
+    internalTag: import("vue").ComputedRef<string>;
     href: import("vue").ComputedRef<string | undefined>;
     to: import("vue").ComputedRef<import("vue-router").RouteLocationRaw | undefined>;
     slotProps: import("vue").ComputedRef<IItemSlotProps>;

package/dist/components/CdsStatus/CdsStatus.vue.d.ts

@@ -13,10 +13,10 @@ declare const _sfc_main: import("vue").DefineComponent<{
         validator: (value: "error" | "info" | "success" | "warning" | "progress") => boolean;
     };
     appearance: {
-        type: import("vue").PropType<"primary" | "secondary" | "transparent">;
+        type: import("vue").PropType<"transparent" | "primary" | "secondary">;
         default: string;
         available: readonly ["primary", "secondary", "transparent"];
-        validator: (value: "primary" | "secondary" | "transparent") => boolean;
+        validator: (value: "transparent" | "primary" | "secondary") => boolean;
     };
     text: {
         type: import("vue").PropType<string>;
@@ -40,10 +40,10 @@ declare const _sfc_main: import("vue").DefineComponent<{
         validator: (value: "error" | "info" | "success" | "warning" | "progress") => boolean;
     };
     appearance: {
-        type: import("vue").PropType<"primary" | "secondary" | "transparent">;
+        type: import("vue").PropType<"transparent" | "primary" | "secondary">;
         default: string;
         available: readonly ["primary", "secondary", "transparent"];
-        validator: (value: "primary" | "secondary" | "transparent") => boolean;
+        validator: (value: "transparent" | "primary" | "secondary") => boolean;
     };
     text: {
         type: import("vue").PropType<string>;
@@ -52,7 +52,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
 }>>, {
     theme: string;
     text: string;
-    appearance: "primary" | "secondary" | "transparent";
+    appearance: "transparent" | "primary" | "secondary";
     status: "error" | "info" | "success" | "warning" | "progress";
 }>;
 export default _sfc_main;

package/dist/components/CdsTable/utils/index.d.ts

@@ -3,3 +3,4 @@ export * from './column';
 export * from './expand';
 export * from './fixed';
 export * from './listener';
+export * from './vnode';

package/dist/components/CdsTable/utils/vnode.d.ts

@@ -0,0 +1,10 @@
+import { VNode } from 'vue';
+import type { Slots, VNodeArrayChildren } from 'vue';
+/**
+ * Render slot with props and fallback (Instead of renderSlot function from Vue 3)
+ * @param slots
+ * @param name
+ * @param props
+ * @param fallback
+ */
+export declare function customRenderSlot(slots: Slots, name: string, props: Record<string, unknown>, fallback?: () => VNodeArrayChildren): VNode;

package/dist/components/CdsTabs/CdsTabs.vue.d.ts

@@ -46,7 +46,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         available: readonly ["cds", "b2b", "promo", "dark"];
         default: undefined;
     };
-    dark: {
+    invertColor: {
         type: PropType<boolean>;
         default: boolean;
     };
@@ -152,7 +152,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         available: readonly ["cds", "b2b", "promo", "dark"];
         default: undefined;
     };
-    dark: {
+    invertColor: {
         type: PropType<boolean>;
         default: boolean;
     };
@@ -218,7 +218,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
     items: readonly TCdsTabItem[];
     tag: string;
     disabled: boolean;
-    dark: boolean;
+    invertColor: boolean;
     required: NonNullable<boolean | "force">;
     theme: string;
     modelValue: any;

package/dist/components/CdsToolbar/CdsToolbar.vue.d.ts

@@ -6,18 +6,38 @@ declare const _sfc_main: import("vue").DefineComponent<{
         available: readonly ["cds", "b2b", "promo", "dark"];
         default: undefined;
     };
+    invertColor: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    transparent: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    /**
+     * Вложенный тулбар
+     */
     inset: {
         type: PropType<boolean>;
         default: boolean;
     };
+    /**
+     * Показать границу
+     */
     bordered: {
         type: PropType<boolean>;
         default: boolean;
     };
+    /**
+     * Убрать отступ справа или слева
+     */
     noGutter: {
         type: PropType<"start" | "end">;
         default: undefined;
     };
+    /**
+     * Убрать отступы
+     */
     noGutters: {
         type: PropType<boolean>;
         default: boolean;
@@ -30,23 +50,45 @@ declare const _sfc_main: import("vue").DefineComponent<{
         available: readonly ["cds", "b2b", "promo", "dark"];
         default: undefined;
     };
+    invertColor: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    transparent: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    /**
+     * Вложенный тулбар
+     */
     inset: {
         type: PropType<boolean>;
         default: boolean;
     };
+    /**
+     * Показать границу
+     */
     bordered: {
         type: PropType<boolean>;
         default: boolean;
     };
+    /**
+     * Убрать отступ справа или слева
+     */
     noGutter: {
         type: PropType<"start" | "end">;
         default: undefined;
     };
+    /**
+     * Убрать отступы
+     */
     noGutters: {
         type: PropType<boolean>;
         default: boolean;
     };
 }>>, {
+    invertColor: boolean;
+    transparent: boolean;
     theme: string;
     bordered: boolean;
     inset: boolean;

package/dist/composable/appearance.d.ts

@@ -15,7 +15,7 @@ export declare const makeAppearanceProps: <Defaults extends {
      * Внешний вид
      */
     appearance: {
-        type: PropType<"primary" | "secondary" | "transparent">;
+        type: PropType<"transparent" | "primary" | "secondary">;
         default: string;
         available: readonly ["primary", "secondary", "transparent"];
         validator: (value: TAppearance) => boolean;

package/dist/composable/index.d.ts

@@ -8,7 +8,7 @@ export * from './appearance';
 export * from './size';
 export * from './disabled';
 export * from './readonly';
-export * from './dark';
+export * from './invertColor';
 export * from './color';
 export * from './status';
 export * from './tag';
@@ -46,3 +46,4 @@ export * from './ssrBoot';
 export * from './variant';
 export * from './layout';
 export * from './theme';
+export * from './transparent';

package/dist/composable/invertColor.d.ts

@@ -0,0 +1,19 @@
+import type { ComputedRef, PropType } from 'vue';
+export interface IInvertColorProps {
+    invertColor: boolean;
+}
+export interface IUseInvertColor {
+    invertColorClasses: ComputedRef<string | undefined>;
+}
+export declare const makeInvertColor: <Defaults extends {
+    invertColor?: unknown;
+} = {}>(defaults?: Defaults | undefined) => import('../utils').AppendDefault<{
+    /**
+     * Инвертирует цветовую схему компонента
+     */
+    invertColor: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+}, Defaults>;
+export declare function useInvertColor(props: IInvertColorProps, name: string): IUseInvertColor;

package/dist/composable/layout.d.ts

@@ -1,5 +1,6 @@
-import type { PropType } from 'vue';
-import { CSSProperties, Ref } from 'vue';
+import { CSSProperties } from 'vue';
+import { ILayoutContextProps } from '../components/CdsLayout/context';
+import type { PropType, Ref, ComputedRef } from 'vue';
 export interface ILayoutProps {
     modelValue: boolean;
     reveal: boolean;
@@ -8,6 +9,22 @@ export interface ILayoutProps {
     elevated: boolean;
     height: string | number;
 }
+export interface IUseLayout {
+    layout: ILayoutContextProps;
+    size: Ref<number>;
+    revealed: Ref<boolean>;
+    fixed: Ref<boolean>;
+    windowHeight: Ref<number>;
+    containerHeight: ComputedRef<number>;
+    offset: ComputedRef<number>;
+    hidden: ComputedRef<boolean>;
+    revealOnFocus: ComputedRef<boolean>;
+    classes: ComputedRef<Record<string, boolean>>;
+    style: Ref<CSSProperties>;
+    updateLocal: (prop: Ref, value: any) => void;
+    updateRevealed: () => void;
+    onResize: (rect: Pick<DOMRectReadOnly, 'width' | 'height'>) => void;
+}
 export declare const makeLayoutProps: <Defaults extends {
     modelValue?: unknown;
     reveal?: unknown;
@@ -59,21 +76,4 @@ export declare const makeLayoutProps: <Defaults extends {
         default: number;
     };
 }, Defaults>;
-export declare function useLayout(props: ILayoutProps, componentName: string, view?: 'H' | 'F'): {
-    layout: import("../components/CdsLayout/context").ILayoutContextProps;
-    size: Ref<number>;
-    revealed: Ref<boolean>;
-    fixed: import("vue").ComputedRef<boolean>;
-    windowHeight: Ref<number>;
-    containerHeight: import("vue").ComputedRef<number>;
-    offset: import("vue").ComputedRef<number>;
-    hidden: import("vue").ComputedRef<boolean>;
-    revealOnFocus: import("vue").ComputedRef<boolean>;
-    classes: import("vue").ComputedRef<{
-        [x: string]: boolean;
-    }>;
-    style: import("vue").ComputedRef<CSSProperties>;
-    updateLocal: (prop: Ref, value: any) => void;
-    updateRevealed: () => void;
-    onResize: ({ height }: Pick<DOMRectReadOnly, 'width' | 'height'>) => void;
-};
+export declare function useLayout(props: ILayoutProps, componentName: string, view?: 'H' | 'F'): IUseLayout;

package/dist/composable/select.d.ts

@@ -76,7 +76,8 @@ export declare const makeSelectProps: <Defaults extends {
             tag: string;
             size: NonNullable<"xs" | "sm" | "md" | "lg" | "xl">;
             disabled: boolean;
-            dark: boolean;
+            invertColor: boolean;
+            transparent: boolean;
             required: boolean;
             selectStrategy: NonNullable<import("./nested/selectStrategies").TSelectStrategyProp>;
             openStrategy: NonNullable<import("./nested/openStrategies").TOpenStrategyProp>;
@@ -99,7 +100,11 @@ export declare const makeSelectProps: <Defaults extends {
             opened: PropType<unknown[]>;
             selected: PropType<unknown[]>;
             required: BooleanConstructor;
-            dark: {
+            transparent: {
+                type: PropType<boolean>;
+                default: boolean;
+            };
+            invertColor: {
                 type: PropType<boolean>;
                 default: boolean;
             };
@@ -168,7 +173,7 @@ export declare const makeSelectProps: <Defaults extends {
                 path: unknown[];
                 event: Event;
             }) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "items" | "itemTitle" | "itemValue" | "itemChildren" | "itemProps" | "returnObject" | "tag" | "size" | "disabled" | "dark" | "required" | "selectStrategy" | "openStrategy" | "theme" | "lines">, keyof import("vue").VNodeProps | keyof import("vue").AllowedComponentProps>>;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "items" | "itemTitle" | "itemValue" | "itemChildren" | "itemProps" | "returnObject" | "tag" | "size" | "disabled" | "invertColor" | "transparent" | "required" | "selectStrategy" | "openStrategy" | "theme" | "lines">, keyof import("vue").VNodeProps | keyof import("vue").AllowedComponentProps>>;
         default: undefined;
     };
     /**

package/dist/composable/transparent.d.ts

@@ -0,0 +1,19 @@
+import type { ComputedRef, PropType } from 'vue';
+export interface ITransparentProps {
+    transparent: boolean;
+}
+export interface IUseTransparentProps {
+    transparentClasses: ComputedRef<string | undefined>;
+}
+export declare const makeTransparentProps: <Defaults extends {
+    transparent?: unknown;
+} = {}>(defaults?: Defaults | undefined) => import('../utils').AppendDefault<{
+    /**
+     * Позволяет использовать компонент на прозрачном фоне
+     */
+    transparent: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+}, Defaults>;
+export declare function useTransparent(props: ITransparentProps, name: string): IUseTransparentProps;

package/dist/utils/colors.d.ts

@@ -2,7 +2,7 @@ declare const _default: Readonly<{
     red: Readonly<{
         lighten10: "#faecec";
         lighten50: "#fdcfcf";
-        lighten100: "ffb2b2";
+        lighten100: "#ffb2b2";
         lighten200: "#ff6666";
         lighten300: "#f23838";
         lighten400: "#eb0000";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@central-design-system/components",
-  "version": "3.0.0-beta.11",
+  "version": "3.0.0-beta.13",
   "description": "Central Design System on the Vue 3.0 and TypeScript",
   "author": "magersoft",
   "license": "ISC",

package/src/scss/modules/grid/_css-grid.scss

@@ -75,20 +75,18 @@
     --cds-grid-column-hang: calc(var(--cds-grid-gutter) / 2);
 
     display: grid;
-    width: 100%;
-    max-width: get-grid-width($breakpoints, largest-breakpoint-name($breakpoints));
-    padding-right: var(--cds-grid-margin);
-    padding-left: var(--cds-grid-margin);
-    margin-right: auto;
-    margin-left: auto;
     grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
+    inline-size: 100%;
+    margin-inline: auto;
+    padding-inline: var(--cds-grid-margin);
+    max-inline-size: get-grid-width($breakpoints, largest-breakpoint-name($breakpoints));
   }
 
   // -----------------------------------------------------------------------------
   // Full width
   // -----------------------------------------------------------------------------
-  .#{$prefix}--css-grid--full-width {
-    max-width: 100%;
+  .#{$prefix}--css-grid--wide {
+    max-inline-size: 100%;
   }
 
   // -----------------------------------------------------------------------------
@@ -105,12 +103,10 @@
     --cds-grid-mode-start: var(--cds-grid-gutter-start);
     --cds-grid-mode-end: var(--cds-grid-gutter-end);
 
-    margin-right: var(--cds-grid-gutter-end);
-    margin-left: var(--cds-grid-gutter-start);
+    margin-inline: var(--cds-grid-gutter-start) var(--cds-grid-gutter-end);
 
     [dir='rtl'] & {
-      margin-right: var(--cds-grid-gutter-start);
-      margin-left: var(--cds-grid-gutter-end);
+      margin-inline: var(--cds-grid-gutter-end) var(--cds-grid-gutter-start);
     }
   }
 
@@ -134,13 +130,11 @@
   // -----------------------------------------------------------------------------
   .#{$prefix}--subgrid {
     display: grid;
-    margin-right: calc(var(--cds-grid-mode-end) * -1);
-    margin-left: calc(var(--cds-grid-mode-start) * -1);
     grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
+    margin-inline: calc(var(--cds-grid-mode-start) * -1) calc(var(--cds-grid-mode-end) * -1);
 
     [dir='rtl'] & {
-      margin-right: calc(var(--cds-grid-mode-start) * -1);
-      margin-left: calc(var(--cds-grid-mode-end) * -1);
+      margin-inline: calc(var(--cds-grid-mode-end) * -1) calc(var(--cds-grid-mode-start) * -1);
     }
   }
 
@@ -171,11 +165,10 @@
   // Helper class to allow for text alignment in columns where the leading
   // gutter is missing (like narrow) or is reduced (like in condensed).
   .#{$prefix}--grid-column-hang {
-    margin-left: var(--cds-grid-column-hang);
+    margin-inline-start: var(--cds-grid-column-hang);
 
     [dir='rtl'] & {
-      margin-right: var(--cds-grid-column-hang);
-      margin-left: initial;
+      margin-inline: initial var(--cds-grid-column-hang);
     }
   }
 

package/src/scss/modules/grid/_flex-grid.scss

@@ -3,6 +3,12 @@
 
 @import 'mixins';
 
+/// Generate the CSS for a grid for the given breakpoints and gutters
+/// @param {Map} $breakpoints [$grid-breakpoints] - The default breakpoints
+/// @param {Number} $grid-gutter [$grid-gutter] - The default gutters
+/// @param {Number} $condensed-gutter [$grid-gutter-condensed] - The condensed mode gutter
+/// @access public
+/// @group @cds/grid
 @mixin flex-grid(
   $breakpoints: $grid-breakpoints,
   $grid-gutter: $grid-gutter,
@@ -14,7 +20,7 @@
 
   @include cds-largest-breakpoint($breakpoints) {
     .#{$prefix}-grid--wide {
-      max-width: 100%;
+      max-inline-size: 100%;
     }
   }
 
@@ -24,13 +30,11 @@
 
   .#{$prefix}-row-padding [class*='#{$prefix}-col'],
   .#{$prefix}-col-padding {
-    padding-top: $grid-gutter * 0.5;
-    padding-bottom: $grid-gutter * 0.5;
+    padding-block: $grid-gutter * 0.5;
   }
 
   .#{$prefix}-grid-condensed [class*='#{$prefix}-col'] {
-    padding-top: $condensed-gutter * 0.5;
-    padding-bottom: $condensed-gutter * 0.5;
+    padding-block: $condensed-gutter * 0.5;
   }
 
   @include -make-grid-columns($breakpoints, $grid-gutter);