@central-design-system/components 3.0.0-beta.4 → 3.0.0-beta.6

package/src/scss/themes/index.ts

@@ -1,6 +1,6 @@
 /**
  * Automatically generated by CDS CLI
- * Generated on 10/18/2023, 11:05:39 AM
+ * Generated on 11/7/2023, 11:30:49 AM
  **/
 
 /**

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,5 @@
-@import 'generatedFiles/generatedStyles';
 @import 'display';
 @import 'layout';
 @import 'spacing';
-@import 'typography';
 @import 'flexbox';
 @import 'lists';

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/variables/display.scss

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

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

@@ -0,0 +1,7 @@
+@import "../display";
+
+:export {
+  @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/_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,99 @@
+$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
+);
+
+$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')
+);

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

@@ -0,0 +1,11 @@
+@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";

package/src/scss/utility/variables/overflow.scss

@@ -0,0 +1,6 @@
+$overflow: (
+  'hidden': hidden,
+  'scroll': scroll,
+  'auto': auto,
+  'visible': visible
+);

package/src/scss/utility/variables/position.scss

@@ -0,0 +1,7 @@
+$positions: (
+  'static': static,
+  'relative': relative,
+  'absolute': absolute,
+  'fixed': fixed,
+  'sticky': sticky
+);

package/src/scss/utility/variables/spacing.scss

@@ -0,0 +1,37 @@
+@import "../../mixins/layout/spacing";
+
+$spaces: (
+  'none': 0,
+  '3xs': $cds-spacing-3xs,
+  'xxs': $cds-spacing-xxs,
+  'xs': $cds-spacing-xs,
+  's': $cds-spacing-s,
+  'm': $cds-spacing-m,
+  'l': $cds-spacing-l,
+  'xl': $cds-spacing-xl,
+  'xxl': $cds-spacing-xxl,
+  '3xl': $cds-spacing-3xl,
+  '4xl': $cds-spacing-4xl,
+  '5xl': $cds-spacing-5xl,
+  '6xl': $cds-spacing-6xl
+);
+
+$padding-map: (
+  'pa': 'padding',
+  'pt': 'padding-top',
+  'pb': 'padding-bottom',
+  'pr': 'padding-right',
+  'pl': 'padding-left',
+  'px': (padding-right, padding-left),
+  'py': (padding-top, padding-bottom),
+);
+
+$margin-map: (
+  'ma': 'margin',
+  'mt': 'margin-top',
+  'mb': 'margin-bottom',
+  'mr': 'margin-right',
+  'ml': 'margin-left',
+  'mx': (margin-right, margin-left),
+  'my': (margin-top, margin-bottom),
+);

package/src/scss/utility/variables/visibility.scss

@@ -0,0 +1,5 @@
+$visibility: (
+  'invisible': hidden,
+  'visible': visible,
+  'collapse': collapse
+);