@prozorro/prozorro-ui 0.0.5 → 0.0.7-beta

package/src/styles/_colors.scss

@@ -0,0 +1,90 @@
+$pz-solid-color-utilities: (
+  "white": var(--pz-color-white),
+  "black-90": var(--pz-color-black-90),
+  "grey-20": var(--pz-color-grey-20),
+  "grey-30": var(--pz-color-grey-30),
+  "grey-40": var(--pz-color-grey-40),
+  "grey-60": var(--pz-color-grey-60),
+  "blue-10": var(--pz-color-blue-10),
+  "blue-30": var(--pz-color-blue-30),
+  "blue-50": var(--pz-color-blue-50),
+  "blue-60": var(--pz-color-blue-60),
+  "red-30": var(--pz-color-red-30),
+  "red-40": var(--pz-color-red-40),
+  "red-50": var(--pz-color-red-50),
+  "red-60": var(--pz-color-red-60),
+  "orange-50": var(--pz-color-orange-50),
+  "orange-60": var(--pz-color-orange-60),
+  "green-20": var(--pz-color-green-20),
+  "green-30": var(--pz-color-green-30),
+  "green-50": var(--pz-color-green-50),
+  "green-60": var(--pz-color-green-60),
+  "gradient-blue": var(--pz-color-gradient-blue),
+  "gradient-green": var(--pz-color-gradient-green),
+  "gradient-orange": var(--pz-color-gradient-orange),
+  "text-primary": var(--pz-color-text-primary),
+  "text-secondary": var(--pz-color-text-secondary),
+  "text-link": var(--pz-color-text-link),
+  "text-link-hover": var(--pz-color-text-link-hover),
+  "text-link-disabled": var(--pz-color-text-link-disabled),
+  "button-danger": var(--pz-color-button-danger),
+  "button-danger-hover": var(--pz-color-button-danger-hover),
+  "button-primary": var(--pz-color-button-primary),
+  "button-primary-hover": var(--pz-color-button-primary-hover),
+  "button-success-light": var(--pz-color-button-success-light),
+  "button-success": var(--pz-color-button-success),
+  "button-success-hover": var(--pz-color-button-success-hover),
+  "button-alert": var(--pz-color-button-alert),
+  "button-alert-hover": var(--pz-color-button-alert-hover),
+  "button-disabled": var(--pz-color-button-disabled),
+  "status-inactive": var(--pz-color-status-inactive),
+  "status-hidden": var(--pz-color-status-hidden),
+  "status-active": var(--pz-color-status-active),
+  "status-monitoring": var(--pz-color-status-monitoring),
+  "status-disabled": var(--pz-color-status-disabled),
+  "status-progress": var(--pz-color-status-progress),
+  "background-primary": var(--pz-color-background-primary),
+  "background-frame": var(--pz-color-background-frame),
+  "background-hover": var(--pz-color-background-hover),
+  "tag-green": var(--pz-color-tag-green),
+  "tag-grey": var(--pz-color-tag-grey),
+  "tag-blue": var(--pz-color-tag-blue),
+  "tag-red": var(--pz-color-tag-red),
+  "stroke-red": var(--pz-color-stroke-red),
+  "stroke-grey": var(--pz-color-stroke-grey),
+  "icon-primary": var(--pz-color-icon-primary),
+  "icon-hover": var(--pz-color-icon-hover),
+  "icon-danger": var(--pz-color-icon-danger),
+  "icon-danger-hover": var(--pz-color-icon-danger-hover),
+  "icon-success-light": var(--pz-color-icon-success-light),
+  "icon-success": var(--pz-color-icon-success),
+  "icon-success-hover": var(--pz-color-icon-success-hover),
+  "icon-alert": var(--pz-color-icon-alert),
+  "icon-alert-hover": var(--pz-color-icon-alert-hover),
+  "icon-disabled": var(--pz-color-icon-disabled),
+  "auction-red-text": var(--pz-color-auction-red-text),
+);
+$pz-gradient-color-utilities: (
+  "gradient-blue": var(--pz-gradient-blue),
+  "gradient-green": var(--pz-gradient-green),
+  "gradient-orange": var(--pz-gradient-orange),
+  "status-auction-progress": var(--pz-gradient-status-auction-progress),
+  "status-auction-waiting": var(--pz-gradient-status-auction-waiting),
+  "status-auction-success": var(--pz-gradient-status-auction-success),
+);
+
+@each $name, $value in $pz-solid-color-utilities {
+  .pz-text-#{$name} {
+    color: $value;
+  }
+
+  .pz-bg-#{$name} {
+    background-color: $value;
+  }
+}
+
+@each $name, $value in $pz-gradient-color-utilities {
+  .pz-bg-#{$name} {
+    background-image: $value;
+  }
+}

package/src/styles/_grid.scss

@@ -0,0 +1,69 @@
+@use "abstract/mixins" as *;
+
+.pz-container {
+  @include pz-container;
+}
+
+.pz-container-fluid {
+  width: 100%;
+  padding-inline: var(--pz-grid-margin);
+  margin-inline: auto;
+}
+
+.pz-grid {
+  @include pz-grid;
+}
+
+.pz-grid-dense {
+  grid-auto-flow: dense;
+}
+
+.pz-grid-fit {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
+}
+
+.pz-col-full {
+  grid-column: 1 / -1;
+}
+
+.pz-grid-item {
+  min-width: 0;
+}
+
+@mixin emit-grid-columns($prefix: "") {
+  .pz-col-#{$prefix}full {
+    grid-column: 1 / -1;
+  }
+
+  @for $index from 1 through 12 {
+    .pz-col-#{$prefix}#{$index} {
+      grid-column: span $index;
+    }
+
+    .pz-start-#{$prefix}#{$index} {
+      grid-column-start: $index;
+    }
+  }
+}
+
+@include emit-grid-columns;
+
+@include min-media-devices("sm") {
+  @include emit-grid-columns("sm-");
+}
+
+@include min-media-devices("md") {
+  @include emit-grid-columns("md-");
+}
+
+@include min-media-devices("lg") {
+  @include emit-grid-columns("lg-");
+}
+
+@include min-media-devices("xl") {
+  @include emit-grid-columns("xl-");
+}
+
+@include min-media-devices("xxl") {
+  @include emit-grid-columns("xxl-");
+}

package/src/styles/_reset.scss

@@ -2,8 +2,8 @@ body {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  color: var(--black);
-  font-size: var(--size-m);
+  color: var(--pz-color-text-primary);
+  font-size: var(--pz-font-size-16);
 }
 
 html {

package/src/styles/_spacing.scss

@@ -0,0 +1,56 @@
+$spacing-properties: (
+  "m": margin,
+  "mt": margin-top,
+  "mr": margin-right,
+  "mb": margin-bottom,
+  "ml": margin-left,
+  "mx": margin-inline,
+  "my": margin-block,
+  "p": padding,
+  "pt": padding-top,
+  "pr": padding-right,
+  "pb": padding-bottom,
+  "pl": padding-left,
+  "px": padding-inline,
+  "py": padding-block,
+);
+$spacing-scale: (
+  "0": var(--pz-space-0),
+  "4": var(--pz-space-4),
+  "8": var(--pz-space-8),
+  "16": var(--pz-space-16),
+  "20": var(--pz-space-20),
+  "24": var(--pz-space-24),
+  "32": var(--pz-space-32),
+  "40": var(--pz-space-40),
+  "44": var(--pz-space-44),
+  "60": var(--pz-space-60),
+);
+
+@each $utility, $property in $spacing-properties {
+  @each $token, $value in $spacing-scale {
+    .pz-#{$utility}-#{$token} {
+      #{$property}: $value;
+    }
+  }
+}
+
+.pz-m-auto {
+  margin: auto;
+}
+
+.pz-mx-auto {
+  margin-inline: auto;
+}
+
+.pz-my-auto {
+  margin-block: auto;
+}
+
+.pz-ml-auto {
+  margin-left: auto;
+}
+
+.pz-mr-auto {
+  margin-right: auto;
+}

package/src/styles/abstract/_mixins.scss

@@ -38,7 +38,7 @@ $breakpoints: (
 @mixin range-slider-thumb {
   width: 10%;
   height: 10px;
-  background: var(--blue-200);
+  background: var(--pz-color-button-primary);
   cursor: pointer;
 }
 
@@ -48,3 +48,19 @@ $breakpoints: (
     outline-offset: 2px;
   }
 }
+
+@mixin pz-container($max-width: var(--pz-grid-frame-max-width), $padding-inline: var(--pz-grid-margin)) {
+  width: min(100%, #{$max-width});
+  padding-inline: $padding-inline;
+  margin-inline: auto;
+}
+
+@mixin pz-grid($columns: var(--pz-grid-columns), $gap: var(--pz-grid-gutter)) {
+  display: grid;
+  grid-template-columns: repeat($columns, minmax(0, 1fr));
+  gap: $gap;
+}
+
+@mixin pz-grid-span($span) {
+  grid-column: span $span;
+}

package/src/styles/abstract/_typography.scss

@@ -7,79 +7,79 @@
 // ─── Desktop ──────────────────────────────────────────────────────────────────
 
 @mixin typography-h1-bold {
-  font-size: var(--size-xxl); // 44px
+  font-size: var(--pz-font-size-44); // 44px
   font-weight: 700;
   line-height: 1.5;
 }
 
 @mixin typography-h1-regular {
-  font-size: var(--size-xxl); // 44px
+  font-size: var(--pz-font-size-44); // 44px
   font-weight: 400;
   line-height: 1.5;
 }
 
 @mixin typography-h2-bold {
-  font-size: var(--size-xxlss); // 32px
+  font-size: var(--pz-font-size-32); // 32px
   font-weight: 700;
   line-height: 1.5;
 }
 
 @mixin typography-h3-bold {
-  font-size: var(--size-xl); // 24px
+  font-size: var(--pz-font-size-24); // 24px
   font-weight: 700;
   line-height: 1.5;
 }
 
 @mixin typography-h3-regular {
-  font-size: var(--size-xl); // 24px
+  font-size: var(--pz-font-size-24); // 24px
   font-weight: 400;
   line-height: 1.5;
 }
 
 @mixin typography-h4-regular {
-  font-size: var(--size-l); // 18px
+  font-size: var(--pz-font-size-18); // 18px
   font-weight: 400;
   line-height: 1.5;
 }
 
 @mixin typography-h4-semibold {
-  font-size: var(--size-l); // 18px
+  font-size: var(--pz-font-size-18); // 18px
   font-weight: 600;
   line-height: 1.5;
 }
 
 @mixin typography-h4-bold {
-  font-size: var(--size-l); // 18px
+  font-size: var(--pz-font-size-18); // 18px
   font-weight: 700;
   line-height: 1.5;
 }
 
 @mixin typography-subtitle {
-  font-size: var(--size-m); // 16px
+  font-size: var(--pz-font-size-16); // 16px
   font-weight: 600;
   line-height: 1.5;
 }
 
 @mixin typography-body-regular {
-  font-size: var(--size-s); // 14px
+  font-size: var(--pz-font-size-14); // 14px
   font-weight: 400;
   line-height: 1.5;
 }
 
 @mixin typography-body-semibold {
-  font-size: var(--size-s); // 14px
+  font-size: var(--pz-font-size-14); // 14px
   font-weight: 600;
   line-height: 1.5;
 }
 
 @mixin typography-body-bold {
-  font-size: var(--size-s); // 14px
+  font-size: var(--pz-font-size-14); // 14px
   font-weight: 700;
   line-height: 1.5;
 }
 
 @mixin typography-capitalized {
-  font-size: var(--size-s); // 14px
+  font-size: var(--pz-font-size-14); // 14px
   font-weight: 400;
   line-height: 1.5;
   text-transform: uppercase;
@@ -87,52 +87,52 @@
 }
 
 @mixin typography-hint {
-  font-size: var(--size-s); // 14px
+  font-size: var(--pz-font-size-14); // 14px
   font-weight: 400;
   line-height: 1.5;
-  color: var(--gray-900);
+  color: var(--pz-color-text-secondary);
 }
 
 @mixin typography-line-through {
-  font-size: var(--size-s); // 14px
+  font-size: var(--pz-font-size-14); // 14px
   font-weight: 400;
   line-height: 1.5;
   text-decoration: line-through;
 }
 
 @mixin typography-small-regular {
-  font-size: var(--size-xs); // 12px
+  font-size: var(--pz-font-size-12); // 12px
   font-weight: 400;
   line-height: 1.5;
 }
 
 @mixin typography-small-semibold {
-  font-size: var(--size-xs); // 12px
+  font-size: var(--pz-font-size-12); // 12px
   font-weight: 600;
   line-height: 1.5;
 }
 
 @mixin typography-small-bold {
-  font-size: var(--size-xs); // 12px
+  font-size: var(--pz-font-size-12); // 12px
   font-weight: 700;
   line-height: 1.5;
 }
 
 @mixin typography-link {
-  font-size: var(--size-s); // 14px
+  font-size: var(--pz-font-size-14); // 14px
   font-weight: 400;
   line-height: 1.5;
-  color: var(--blue-100);
+  color: var(--pz-color-text-link);
   text-decoration: underline;
   cursor: pointer;
 
   &:hover {
-    color: var(--blue);
+    color: var(--pz-color-text-link-hover);
   }
 }
 
 @mixin typography-document {
-  font-size: var(--size-s); // 14px
+  font-size: var(--pz-font-size-14); // 14px
   font-weight: 400;
   line-height: 1.5;
 }
@@ -142,61 +142,61 @@
 // @include max-media-devices("sm") { @include typography-h1-bold-mobile; }
 
 @mixin typography-h1-bold-mobile {
-  font-size: var(--size-xl); // 24px
+  font-size: var(--pz-font-size-24); // 24px
   font-weight: 700;
   line-height: 1.5;
 }
 
 @mixin typography-h1-regular-mobile {
-  font-size: var(--size-xl); // 24px
+  font-size: var(--pz-font-size-24); // 24px
   font-weight: 400;
   line-height: 1.5;
 }
 
 @mixin typography-h2-bold-mobile {
-  font-size: var(--size-xls); // 20px
+  font-size: var(--pz-font-size-20); // 20px
   font-weight: 700;
   line-height: 1.5;
 }
 
 @mixin typography-h2-regular-mobile {
-  font-size: var(--size-xls); // 20px
+  font-size: var(--pz-font-size-20); // 20px
   font-weight: 400;
   line-height: 1.5;
 }
 
 @mixin typography-h3-bold-mobile {
-  font-size: var(--size-l); // 18px
+  font-size: var(--pz-font-size-18); // 18px
   font-weight: 700;
   line-height: 1.5;
 }
 
 @mixin typography-h3-semibold-mobile {
-  font-size: var(--size-l); // 18px
+  font-size: var(--pz-font-size-18); // 18px
   font-weight: 600;
   line-height: 1.5;
 }
 
 @mixin typography-h3-regular-mobile {
-  font-size: var(--size-l); // 18px
+  font-size: var(--pz-font-size-18); // 18px
   font-weight: 400;
   line-height: 1.5;
 }
 
 @mixin typography-h4-bold-mobile {
-  font-size: var(--size-m); // 16px
+  font-size: var(--pz-font-size-16); // 16px
   font-weight: 700;
   line-height: 1.5;
 }
 
 @mixin typography-h4-semibold-mobile {
-  font-size: var(--size-m); // 16px
+  font-size: var(--pz-font-size-16); // 16px
   font-weight: 600;
   line-height: 1.5;
 }
 
 @mixin typography-h4-regular-mobile {
-  font-size: var(--size-m); // 16px
+  font-size: var(--pz-font-size-16); // 16px
   font-weight: 400;
   line-height: 1.5;
 }

package/src/styles/abstract/_variables.scss

@@ -1,59 +1,150 @@
 :root {
   // Colors
-  --white: #fff;
-  --black: #242638;
-  --black-tansparent: rgb(36 38 56 / 70%);
-  --gray: #f5f5f5;
-  --gray-100: #d6dade;
-  --gray-200: #939393;
-  --gray-300: #f0f4f5;
-  --gray-400: #f4f8f9;
-  --gray-500: #454545;
-  --gray-600: #f8f8f8;
-  --gray-700: rgb(214 218 222 / 50%);
-  --gray-800: #c2d8de;
-  --gray-900: #6d6d6d;
-  --gray-950: #c0c0c0;
-  --blue: #014da8;
-  --blue-100: #2070d1;
-  --blue-200: #c2d8de;
-  --blue-300: #006887;
-  --blue-400: #6dc8eb;
-  --green: #599a4f;
-  --green-100: #bfffb2;
-  --green-200: #e2f7dc;
-  --green-300: #40e81e;
-  --green-400: #89db33;
-  --red: #d70c17;
-  --red-100: #e55166;
-  --red-200: #e85d57;
-  --red-300: #ff3800;
-  --red-400: #f00;
-  --orange: #ef9400;
-  --orange-100: #e56101;
-  --orange-200: #ff831a;
+  // Raw colors
+  --pz-color-white: #fff;
+  --pz-color-black-90: #242638;
+  --pz-color-grey-20: #f5f5f5;
+  --pz-color-grey-30: #d6dade;
+  --pz-color-grey-40: #c0c0c0;
+  --pz-color-grey-60: #6d6d6d;
+  --pz-color-blue-10: #f0f4f5;
+  --pz-color-blue-30: #c2d8de;
+  --pz-color-blue-50: #2070d1;
+  --pz-color-blue-60: #014da8;
+  --pz-color-red-30: #f7dcdc;
+  --pz-color-red-40: #e85d57;
+  --pz-color-red-50: #ff3800;
+  --pz-color-red-60: #d70c17;
+  --pz-color-orange-50: #ff831a;
+  --pz-color-orange-60: #e86a00;
+  --pz-color-green-20: #e2f7dc;
+  --pz-color-green-30: #89db33;
+  --pz-color-green-50: #599a4f;
+  --pz-color-green-60: #4c8344;
+  --pz-color-gradient-blue: #0082fc;
+  --pz-color-gradient-green: #599a4f;
+  --pz-color-gradient-orange: #ff831a;
+
+  // Gradients
+  --pz-gradient-blue: linear-gradient(90deg, var(--pz-color-gradient-blue) 0%, var(--pz-color-white) 100%);
+  --pz-gradient-green: linear-gradient(90deg, var(--pz-color-gradient-green) 0%, var(--pz-color-white) 100%);
+  --pz-gradient-orange: linear-gradient(90deg, var(--pz-color-gradient-orange) 0%, var(--pz-color-white) 100%);
+
+  // Usage tokens: text
+  --pz-color-text-primary: var(--pz-color-black-90);
+  --pz-color-text-secondary: var(--pz-color-grey-60);
+  --pz-color-text-link: var(--pz-color-blue-50);
+  --pz-color-text-link-hover: var(--pz-color-blue-60);
+  --pz-color-text-link-disabled: var(--pz-color-grey-40);
+
+  // Usage tokens: buttons
+  --pz-color-button-danger: var(--pz-color-red-50);
+  --pz-color-button-danger-hover: var(--pz-color-red-60);
+  --pz-color-button-primary: var(--pz-color-blue-50);
+  --pz-color-button-primary-hover: var(--pz-color-blue-60);
+  --pz-color-button-success-light: var(--pz-color-green-30);
+  --pz-color-button-success: var(--pz-color-green-50);
+  --pz-color-button-success-hover: var(--pz-color-green-60);
+  --pz-color-button-alert: var(--pz-color-orange-50);
+  --pz-color-button-alert-hover: var(--pz-color-orange-60);
+  --pz-color-button-disabled: var(--pz-color-grey-40);
+
+  // Usage tokens: status
+  --pz-color-status-inactive: var(--pz-color-red-50);
+  --pz-color-status-hidden: var(--pz-color-orange-50);
+  --pz-color-status-active: var(--pz-color-green-50);
+  --pz-color-status-monitoring: var(--pz-color-green-30);
+  --pz-color-status-disabled: var(--pz-color-grey-40);
+  --pz-color-status-progress: var(--pz-color-blue-50);
+  --pz-gradient-status-auction-progress: var(--pz-gradient-blue);
+  --pz-gradient-status-auction-waiting: var(--pz-gradient-orange);
+  --pz-gradient-status-auction-success: var(--pz-gradient-green);
+
+  // Usage tokens: background
+  --pz-color-background-primary: var(--pz-color-white);
+  --pz-color-background-frame: var(--pz-color-grey-20);
+  --pz-color-background-hover: var(--pz-color-blue-10);
+
+  // Usage tokens: tags
+  --pz-color-tag-green: var(--pz-color-green-20);
+  --pz-color-tag-grey: var(--pz-color-grey-30);
+  --pz-color-tag-blue: var(--pz-color-blue-30);
+  --pz-color-tag-red: var(--pz-color-red-30);
+
+  // Usage tokens: stroke
+  --pz-color-stroke-red: var(--pz-color-red-60);
+  --pz-color-stroke-grey: var(--pz-color-grey-30);
+
+  // Usage tokens: icons
+  --pz-color-icon-primary: var(--pz-color-blue-50);
+  --pz-color-icon-hover: var(--pz-color-blue-60);
+  --pz-color-icon-danger: var(--pz-color-red-50);
+  --pz-color-icon-danger-hover: var(--pz-color-red-60);
+  --pz-color-icon-success-light: var(--pz-color-green-30);
+  --pz-color-icon-success: var(--pz-color-green-50);
+  --pz-color-icon-success-hover: var(--pz-color-green-60);
+  --pz-color-icon-alert: var(--pz-color-orange-50);
+  --pz-color-icon-alert-hover: var(--pz-color-orange-60);
+  --pz-color-icon-disabled: var(--pz-color-grey-40);
+
+  // Usage tokens: misc
+  --pz-color-auction-red-text: var(--pz-color-red-40);
 
   // Font sizes
-  --size-xxl: 44px;
-  --size-xxls: 40px;
-  --size-xxlss: 32px;
-  --size-xl: 24px;
-  --size-xls: 20px;
-  --size-l: 18px;
-  --size-m: 16px;
-  --size-s: 14px;
-  --size-xs: 12px;
-
-  // Line height
-  --line-height-s: 20px;
-  --line-height-m: 24px;
-  --line-height-l: 28px;
-
-  // Blocks
-  --tooltip-width: 415px;
-  --tender-list-title-width: 387px;
-  --tender-list-title-box-width: 340px;
-
-  // Spacing
-  --row-horzontal-padding: 10px; // general .row wrapper style
+  --pz-font-size-44: 44px;
+  --pz-font-size-32: 32px;
+  --pz-font-size-24: 24px;
+  --pz-font-size-20: 20px;
+  --pz-font-size-18: 18px;
+  --pz-font-size-16: 16px;
+  --pz-font-size-14: 14px;
+  --pz-font-size-12: 12px;
+
+  // Spacing scale
+  --pz-space-0: 0;
+  --pz-space-4: 4px;
+  --pz-space-8: 8px;
+  --pz-space-16: 16px;
+  --pz-space-20: 20px;
+  --pz-space-24: 24px;
+  --pz-space-32: 32px;
+  --pz-space-40: 40px;
+  --pz-space-44: 44px;
+  --pz-space-60: 60px;
+
+  // Grid system
+  --pz-grid-columns-mobile: 4;
+  --pz-grid-columns-tablet: 8;
+  --pz-grid-columns-desktop: 12;
+  --pz-grid-gutter-mobile: 16px;
+  --pz-grid-gutter-tablet: 24px;
+  --pz-grid-gutter-desktop: 24px;
+  --pz-grid-margin-mobile: 16px;
+  --pz-grid-margin-tablet: 32px;
+  --pz-grid-margin-desktop: 80px;
+  --pz-grid-frame-max-width-mobile: 100%;
+  --pz-grid-frame-max-width-tablet: 768px;
+  --pz-grid-frame-max-width-desktop: 1440px;
+  --pz-grid-columns: var(--pz-grid-columns-mobile);
+  --pz-grid-gutter: var(--pz-grid-gutter-mobile);
+  --pz-grid-margin: var(--pz-grid-margin-mobile);
+  --pz-grid-frame-max-width: var(--pz-grid-frame-max-width-mobile);
+}
+
+@media (width >= 768px) {
+  :root {
+    --pz-grid-columns: var(--pz-grid-columns-tablet);
+    --pz-grid-gutter: var(--pz-grid-gutter-tablet);
+    --pz-grid-margin: var(--pz-grid-margin-tablet);
+    --pz-grid-frame-max-width: var(--pz-grid-frame-max-width-tablet);
+  }
+}
+
+@media (width >= 1200px) {
+  :root {
+    --pz-grid-columns: var(--pz-grid-columns-desktop);
+    --pz-grid-gutter: var(--pz-grid-gutter-desktop);
+    --pz-grid-margin: var(--pz-grid-margin-desktop);
+    --pz-grid-frame-max-width: var(--pz-grid-frame-max-width-desktop);
+  }
 }