@central-design-system/components 3.0.0-beta.3 → 3.0.0-beta.31

package/src/scss/themes/index.ts

@@ -1,6 +1,6 @@
 /**
  * Automatically generated by CDS CLI
- * Generated on 10/12/2023, 12:49:36 PM
+ * Generated on 6/6/2024, 3:19:58 PM
  **/
 
 /**

package/src/scss/utility/display.scss

@@ -1,13 +1,64 @@
-@import "variables";
+@import "./variables";
 
-@each $name, $display in $displays {
+/*
+ * При добавлении утилитарных классов необходимо разделять переменные/формирование. Переменные хранятся в папке ./variables и также используются для формирования документации.
+ * Для всех утилитарных классов необходимо указывать !important
+ * Также, в данном файле необходимо указывать классы как без брейкпоинтов, так и с ними. Пример ниже.
+ * Чтобы утилитарные стили начали работать, необходимо экспортировать этот файл в index.scss, который в дальнейшем окажется в основном бандле.
+ */
+
+// Без брейкпоинтов
+@each $name, $value in $displays {
+  .cds-#{$name} {
+    display: $value !important;
+  }
+}
+
+@each $name, $value in $overflow {
+  .cds-overflow-#{$name} {
+    overflow: $value !important;
+  }
+}
+
+@each $name, $value in $positions {
   .cds-#{$name} {
-    display: $display !important;
+    position: $value !important;
   }
 }
 
-@each $name, $visibility in $visibility {
+@each $name, $value in $visibility {
   .cds-#{$name} {
-    visibility: $visibility !important;
+    visibility: $value !important;
+  }
+}
+
+// С брейкпоинтами
+@each $breakpoint, $map in $grid-breakpoints {
+  $width: map-get($map, 'width');
+
+  @media (min-width: $width) {
+    @each $name, $value in $displays {
+      .#{$breakpoint}\:cds-#{$name} {
+        display: $value !important;
+      }
+    }
+
+    @each $name, $value in $overflow {
+      .#{$breakpoint}\:cds-overflow-#{$name} {
+        overflow: $value !important;
+      }
+    }
+
+    @each $name, $value in $visibility {
+      .#{$breakpoint}\cds-#{$name} {
+        visibility: $value !important;
+      }
+    }
+
+    @each $name, $value in $positions {
+      .#{$breakpoint}\:cds-#{$name} {
+        position: $value !important;
+      }
+    }
   }
 }

package/src/scss/utility/flexbox.scss

@@ -1,37 +1,35 @@
-@import "variables";
+@import "./variables";
 
-@each $name, $direction in $flex-direction {
-  .cds-#{$name} {
-    flex-direction: $direction !important;
-  }
-}
+/*
+ * При добавлении утилитарных классов необходимо разделять переменные/формирование. Переменные хранятся в папке ./variables и также используются для формирования документации.
+ * Для всех утилитарных классов необходимо указывать !important
+ * Также, в данном файле необходимо указывать классы как без брейкпоинтов, так и с ними. Пример ниже.
+ * Чтобы утилитарные стили начали работать, необходимо экспортировать этот файл в index.scss, который в дальнейшем окажется в основном бандле.
+ */
 
-@each $name, $value in $justify-content {
-  .cds-justify-#{$name} {
-    justify-content: $value !important;
-  }
-}
+@each $key, $value in $flex-properties {
+  $prefix: map-get($value, 'name');
+  $propertyMap: map-get($value, 'map');
+  $cssProperty: map-get($value, 'property');
 
-@each $name, $value in $align-items {
-  .cds-items-#{$name} {
-    align-items: $value !important;
+  // без брейкпоинтов
+  @each $name, $propValue in $propertyMap {
+    .cds-#{$prefix}#{$name} {
+      #{$cssProperty}: $propValue !important;
+    }
   }
-}
 
-@each $name, $value in $align-content {
-  .cds-content-#{$name} {
-    align-content: $value !important;
-  }
-}
+  // брейкпоинты
+  @each $breakpoint, $map in $grid-breakpoints {
+    $width: map-get($map, 'width');
 
-@each $name, $value in $flex-wrap {
-  .cds-flex-#{$name} {
-    flex-wrap: $value !important;
+    @media (min-width: $width) {
+      @each $name, $propValue in $propertyMap {
+        .#{$breakpoint}\:cds-#{$prefix}#{$name} {
+          #{$cssProperty}: $propValue !important;
+        }
+      }
+    }
   }
 }
 
-@each $name, $value in $align-self {
-  .cds-self-#{$name} {
-    align-self: $value !important;
-  }
-}

package/src/scss/utility/index.scss

@@ -1,7 +1,6 @@
-@import 'generatedFiles/generatedStyles';
 @import 'display';
 @import 'layout';
 @import 'spacing';
-@import 'typography';
 @import 'flexbox';
 @import 'lists';
+@import "typography";

package/src/scss/utility/layout.scss

@@ -1,4 +1,11 @@
-@import "variables";
+@import "./variables";
+
+/*
+ * При добавлении утилитарных классов необходимо разделять переменные/формирование. Переменные хранятся в папке ./variables и также используются для формирования документации.
+ * Для всех утилитарных классов необходимо указывать !important
+ * Также, в данном файле необходимо указывать классы как без брейкпоинтов, так и с ними. Пример ниже.
+ * Чтобы утилитарные стили начали работать, необходимо экспортировать этот файл в index.scss, который в дальнейшем окажется в основном бандле.
+ */
 
 @each $name, $index in $z-indexes {
   .#{$name} {
@@ -6,6 +13,61 @@
   }
 }
 
-.cds-fullwidth {
-  width: 100%;
+@each $name, $value in $widthHeight {
+  .cds-h-#{$name} {
+    height: $value !important;
+  }
+
+  .cds-w-#{$name} {
+    width: $value !important;
+  }
+
+  .cds-max-h-#{$name} {
+    max-height: $value !important;
+  }
+
+  .cds-max-w-#{$name} {
+    max-width: $value !important;
+  }
+
+  .cds-min-h-#{$name} {
+    min-height: $value !important;
+  }
+
+  .cds-min-w-#{$name} {
+    min-width: $value !important;
+  }
+}
+
+
+@each $breakpoint, $map in $grid-breakpoints {
+  $width: map-get($map, 'width');
+
+  @media (min-width: $width) {
+    @each $name, $value in $widthHeight {
+      .#{$breakpoint}\:cds-w-#{$name} {
+        width: $value !important;
+      }
+
+      .#{$breakpoint}\:cds-min-w-#{$name} {
+        min-width: $value !important;
+      }
+
+      .#{$breakpoint}\:cds-max-w-#{$name} {
+        max-width: $value !important;
+      }
+
+      .#{$breakpoint}\:cds-h-#{$name} {
+        height: $value !important;
+      }
+
+      .#{$breakpoint}\:cds-min-h-#{$name} {
+        min-height: $value !important;
+      }
+
+      .#{$breakpoint}\:cds-max-h-#{$name} {
+        max-height: $value !important;
+      }
+    }
+  }
 }

package/src/scss/utility/spacing.scss

@@ -1,89 +1,49 @@
-@import "variables";
-
-@each $name, $space in $spaces {
-  .cds-pa-#{$name} {
-    padding: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-pt-#{$name} {
-    padding-top: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-pb-#{$name} {
-    padding-bottom: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-pr-#{$name} {
-    padding-right: $space !important;
+@import "./variables";
+
+/*
+ * При добавлении утилитарных классов необходимо разделять переменные/формирование. Переменные хранятся в папке ./variables и также используются для формирования документации.
+ * Для всех утилитарных классов необходимо указывать !important
+ * Также, в данном файле необходимо указывать классы как без брейкпоинтов, так и с ними. Пример ниже.
+ * Чтобы утилитарные стили начали работать, необходимо экспортировать этот файл в index.scss, который в дальнейшем окажется в основном бандле.
+ */
+
+// Базовые классы, без брейкпоинтов
+@each $abbr, $cssProp in map-merge($padding-map, $margin-map) {
+  @each $name, $space in $spaces {
+    @if type-of($cssProp) == 'list' {
+      .cds-#{$abbr}-#{$name} {
+        @each $prop in $cssProp {
+          #{$prop}: $space !important;
+        }
+      }
+    } @else {
+      .cds-#{$abbr}-#{$name} {
+        #{$cssProp}: $space !important;
+      }
+    }
+  }
+}
+
+// Классы с брейкпоинтами
+@each $breakpoint, $map in $grid-breakpoints {
+  $width: map-get($map, 'width');
+
+  @media (min-width: $width) {
+    @each $abbr, $cssProp in map-merge($padding-map, $margin-map) {
+      @each $name, $space in $spaces {
+        @if type-of($cssProp) == 'list' {
+          .#{$breakpoint}\:cds-#{$abbr}-#{$name} {
+            @each $prop in $cssProp {
+              #{$prop}: $space !important;
+            }
+          }
+        } @else {
+          .#{$breakpoint}\:cds-#{$abbr}-#{$name} {
+            #{$cssProp}: $space !important;
+          }
+        }
+      }
+    }
   }
 }
 
-@each $name, $space in $spaces {
-  .cds-pl-#{$name} {
-    padding-left: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-px-#{$name} {
-    padding-right: $space !important;
-    padding-left: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-py-#{$name} {
-    padding-top: $space !important;
-    padding-bottom: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-ma-#{$name} {
-    margin: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-mt-#{$name} {
-    margin-top: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-mb-#{$name} {
-    margin-bottom: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-mr-#{$name} {
-    margin-right: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-ml-#{$name} {
-    margin-left: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-mx-#{$name} {
-    margin-right: $space !important;
-    margin-left: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-my-#{$name} {
-    margin-top: $space !important;
-    margin-bottom: $space !important;
-  }
-}

package/src/scss/utility/typography.scss

@@ -1,4 +1,4 @@
-@import "variables";
+@import "./variables";
 
 @each $type, $value in $typography {
   .cds-text-#{$type} {
@@ -14,3 +14,50 @@
     font-family: var(--cds-font-family-sans) !important;
   }
 }
+
+@each $breakpoint, $map in $grid-breakpoints {
+  $breakpoint-width: map-get($map, 'width');
+
+  @media (min-width: $breakpoint-width) {
+    @each $type, $value in $typography {
+      .#{$breakpoint}\:cds-text-#{$type} {
+        @each $name, $val in $value {
+          @if $name == 'size' {
+            font-size: $val !important;
+          } @else if $name == 'height' {
+            line-height: $val !important;
+          } @else if $name == 'weight' {
+            font-weight: $val !important;
+          }
+        }
+        font-family: var(--cds-font-family-sans) !important;
+      }
+    }
+  }
+}
+
+@each $key, $value in $typography-properties {
+  $prefix: map-get($value, 'name');
+  $propertyMap: map-get($value, 'map');
+  $cssProperty: map-get($value, 'property');
+
+  // Без брейкпоинтов
+  @each $name, $propValue in $propertyMap {
+    .cds-#{$prefix}#{$name} {
+      #{$cssProperty}: $propValue !important;
+    }
+  }
+
+  // Брейкпоинты
+  @each $breakpoint, $map in $grid-breakpoints {
+    $width: map-get($map, 'width');
+
+    @media (min-width: $width) {
+      @each $name, $propValue in $propertyMap {
+        .#{$breakpoint}\:cds-#{$prefix}#{$name} {
+          #{$cssProperty}: $propValue !important;
+        }
+      }
+    }
+  }
+}

package/src/scss/utility/variables/display.scss

@@ -0,0 +1,10 @@
+$displays: (
+  block: block,
+  inline-block: inline-block,
+  inline: inline,
+  flex: flex,
+  inline-flex: inline-flex,
+  table-row: table-row,
+  table-cell: table-cell,
+  none: none
+);

package/src/scss/utility/variables/exports/_display.scss

@@ -0,0 +1,7 @@
+@import "../display";
+
+@each $name, $value in $displays {
+  .#{$name} {
+    display: #{$value};
+  }
+};

package/src/scss/utility/variables/exports/_flex.scss

@@ -0,0 +1,13 @@
+@import "../flex";
+
+:export {
+  @each $key, $value in $flex-properties {
+    $prefix: map-get($value, 'name');
+    $propertyMap: map-get($value, 'map');
+    $cssProperty: map-get($value, 'property');
+
+    @each $name, $value in $propertyMap {
+      #{$prefix}#{$name}: #{$cssProperty}/#{$value}
+    }
+  }
+}

package/src/scss/utility/variables/exports/_overflow.scss

@@ -0,0 +1,7 @@
+@import "../overflow";
+
+:export {
+  @each $name, $value in $overflow {
+    #{$name}: #{overflow}/#{$value}
+  }
+}

package/src/scss/utility/variables/exports/_position.scss

@@ -0,0 +1,7 @@
+@import "../position";
+
+:export {
+  @each $name, $value in $positions {
+    #{$name}: #{position}/#{$value}
+  }
+}

package/src/scss/utility/variables/exports/_spacing.scss

@@ -0,0 +1,14 @@
+@use 'sass:list';
+@import "../spacing";
+
+:export {
+  @each $abbr, $cssProp in $padding-map {
+    @each $name, $space in $spaces {
+      @if type-of($cssProp) == 'list' {
+        #{$abbr}-#{$name}: list.nth($cssProp, 1)/#{$space}_ list.nth($cssProp, 2)/#{$space}
+      } @else {
+        #{$abbr}-#{$name}: #{$cssProp}/#{$space}
+      }
+    }
+  }
+}

package/src/scss/utility/variables/exports/_typography.scss

@@ -0,0 +1,22 @@
+@import "../typography";
+
+@each $name, $value in $typography {
+  .text-#{$name} {
+    font-size: map-get($value, 'size');
+    line-height: map-get($value, 'height');
+    font-weight: map-get($value, 'weight');
+  }
+}
+
+@each $key, $value in $typography-properties {
+  $prefix: map-get($value, 'name');
+  $propertyMap: map-get($value, 'map');
+  $cssProperty: map-get($value, 'property');
+
+  // Без брейкпоинтов
+  @each $name, $propValue in $propertyMap {
+    .#{$prefix}#{$name} {
+      #{$cssProperty}: $propValue;
+    }
+  }
+}

package/src/scss/utility/variables/exports/_visibility.scss

@@ -0,0 +1,7 @@
+@import "../visibility";
+
+:export {
+  @each $name, $value in $visibility {
+    #{$name}: #{visibility}/#{$value}
+  }
+}

package/src/scss/utility/variables/exports/_widthHeight.scss

@@ -0,0 +1,7 @@
+@import "../widthHeight";
+
+:export {
+  @each $name, $value in $widthHeight {
+    w-#{$name}: #{width}/#{$value}
+  }
+}

package/src/scss/utility/variables/flex.scss

@@ -0,0 +1,140 @@
+$flex-direction: (
+  'flex-col': column,
+  'flex-row': row,
+  'flex-row-reverse': row-reverse,
+  'flex-col-reverse': column-reverse
+);
+
+$justify-content: (
+  'center': center,
+  'start': flex-start,
+  'end': flex-end,
+  'between': space-between,
+  'around': space-around,
+  'stretch': stretch
+);
+
+$align-items: (
+  'start': flex-start,
+  'end': flex-end,
+  'center': center,
+  'baseline': baseline,
+  'stretch': stretch
+);
+
+$align-content: (
+  'start': flex-start,
+  'end': flex-end,
+  'center': center,
+  'between': space-between,
+  'around': space-around,
+  'stretch': stretch,
+);
+
+$align-self: (
+  'start': flex-start,
+  'end': flex-end,
+  'center': center,
+  'baseline': baseline,
+  'stretch': stretch,
+  'auto': auto,
+  'normal': normal,
+  'first-baseline': first baseline,
+  'last-baseline': last baseline
+);
+
+$flex-wrap: (
+  'wrap': wrap,
+  'nowrap': nowrap,
+  'wrap-reverse': wrap-reverse
+);
+
+$flex-grow: (
+  '0': 0,
+  '1': 1,
+  '2': 2,
+  '3': 3
+);
+
+$flex-shrink: (
+  '0': 0,
+  '1': 1,
+  '2': 2,
+  '3': 3
+);
+
+$flex-basis: (
+  'auto': auto,
+  '0': 0,
+  '10': 10%,
+  '20': 20%,
+  '30': 30%,
+  '40': 40%
+);
+
+$order: (
+  'first': -1,
+  '0': 0,
+  '1': 1,
+  '2': 2,
+  '3': 3,
+  '4': 4,
+  '5': 5,
+  '6': 6,
+  '7': 7,
+  'last': 999
+);
+
+$gap-sizes: (
+  '0': 0,
+  'px': 1px,
+  '0\\.5': 0.125rem, // 2px
+  '1': 0.25rem, // 4px
+  '1\\.5': 0.375rem, // 6px
+  '2': 0.5rem, // 8px
+  '2\\.5': 0.625rem, // 10px
+  '3': 0.75rem, // 12px
+  '3\\.5': 0.875rem, // 14px
+  '4': 1rem, // 16px
+  '5': 1.25rem, // 20px
+  '6': 1.5rem, // 24px
+  '7': 1.75rem, // 28px
+  '8': 2rem, // 32px
+  '9': 2.25rem, // 36px
+  '10': 2.5rem, // 40px
+  '11': 2.75rem, // 44px
+  '12': 3rem, // 48px
+  '14': 3.5rem, // 56px
+  '16': 4rem, // 64px
+  '20': 5rem, // 80px
+  '24': 6rem, // 96px
+  '28': 7rem, // 112px
+  '32': 8rem, // 128px
+  '36': 9rem, // 144px
+  '40': 10rem, // 160px
+  '44': 11rem, // 176px
+  '48': 12rem, // 192px
+  '52': 13rem, // 208px
+  '56': 14rem, // 224px
+  '60': 15rem, // 240px
+  '64': 16rem, // 256px
+  '72': 18rem, // 288px
+  '80': 20rem, // 320px
+  '96': 24rem // 384px
+);
+
+$flex-properties: (
+  'direction': ('name': '', 'map': $flex-direction, 'property': 'flex-direction'),
+  'justify': ('name': 'justify-', 'map': $justify-content, 'property': 'justify-content'),
+  'items': ('name': 'items-', 'map': $align-items, 'property': 'align-items'),
+  'content': ('name': 'content-', 'map': $align-content, 'property': 'align-content'),
+  'flex': ('name': 'flex-', 'map': $flex-wrap, 'property': 'flex-wrap'),
+  'self': ('name': 'self-', 'map': $align-self, 'property': 'align-self'),
+  'grow': ('name': 'grow-', 'map': $flex-grow, 'property': 'flex-grow'),
+  'shrink': ('name': 'shrink-', 'map': $flex-shrink, 'property': 'flex-shrink'),
+  'basis': ('name': 'basis-', 'map': $flex-basis, 'property': 'flex-basis'),
+  'order': ('name': 'order-', 'map': $order, 'property': 'order'),
+  'gap': ('name': 'gap-', 'map': $gap-sizes, 'property': 'gap'),
+  'gap-y': ('name': 'gap-y-', 'map': $gap-sizes, 'property': 'row-gap'),
+  'gap-x': ('name': 'gap-x-', 'map': $gap-sizes, 'property': 'column-gap'),
+);

package/src/scss/utility/variables/index.scss

@@ -0,0 +1,12 @@
+@import "../../mixins/layout/layout";
+@import "../../mixins/layout/spacing";
+@import "../../mixins/typo";
+@import "../../modules/grid/_config";
+@import "visibility";
+@import "widthHeight";
+@import "display";
+@import "overflow";
+@import "position";
+@import "flex";
+@import "spacing";
+@import "typography";