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

package/src/scss/modules/grid/_mixins.scss

@@ -24,8 +24,7 @@
 /// @access private
 /// @group @cds/grid
 @mixin -make-container($breakpoints: $grid-breakpoints) {
-  margin-right: auto;
-  margin-left: auto;
+  margin-inline: auto;
 
   @include -set-largest-breakpoint($breakpoints);
 
@@ -38,15 +37,13 @@
 
       @if $prev-margin != $margin {
         @include cds-breakpoint($name) {
-          padding-right: #{($grid-gutter * 0.5) + $margin};
-          padding-left: #{($grid-gutter * 0.5) + $margin};
-        }
-      } @else {
-        @include cds-breakpoint($name) {
-          padding-right: #{($grid-gutter * 0.5) + $margin};
-          padding-left: #{($grid-gutter * 0.5) + $margin};
+          padding-inline: #{($grid-gutter * 0.5) + $margin};
         }
       }
+    } @else {
+      @include cds-breakpoint($name) {
+        padding-inline: #{($grid-gutter * 0.5) + $margin};
+      }
     }
   }
 }
@@ -57,7 +54,7 @@
 /// @group @cds/grid
 @mixin -set-largest-breakpoint($breakpoints: $grid-breakpoints) {
   $largest-breakpoint: -last-map-item($breakpoints);
-  max-width: map.get($largest-breakpoint, 'width');
+  max-inline-size: map.get($largest-breakpoint, 'width');
 }
 
 /// Add in the max-widths for each breakpoint to the container
@@ -67,7 +64,7 @@
 @mixin -make-container-max-widths($breakpoints: $grid-breakpoints) {
   @each $name, $value in $breakpoints {
     @include cds-breakpoint($name) {
-      max-width: map.get($value, width);
+      max-inline-size: map.get($value, width);
     }
   }
 }
@@ -88,22 +85,19 @@
   // Prevent columns from becoming too narrow when at smaller grid tiers by
   // always setting `width: 100%;`. This works because we use `flex` values
   // later on to override this initial width.
-  width: 100%;
-  padding-right: ($gutter * 0.5);
-  padding-left: ($gutter * 0.5);
+  inline-size: 100%;
+  padding-inline: $gutter * 0.5;
 
   // For our condensed use-case, our gutters collapse to 2px solid, 1px on each side.
   .#{$prefix}-row-condensed &,
   .#{$prefix}-grid-condensed & {
-    padding-right: ($condensed-gutter * 0.5);
-    padding-left: ($condensed-gutter * 0.5);
+    padding-inline: $condensed-gutter * 0.5;
   }
 
   // For our narrow use-case, our container hangs 16px into the gutter
   .#{$prefix}-row-narrow &,
   .#{$prefix}-grid-narrow & {
-    padding-right: ($gutter * 0.5);
-    padding-left: 0;
+    padding-inline: 0 $gutter * 0.5;
   }
 }
 
@@ -122,8 +116,8 @@
     // Add a `max-width` to ensure content within each column does not blow out
     // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
     // do not appear to require this.
-    max-width: math.percentage(math.div($span, $columns));
     flex: 0 0 math.percentage(math.div($span, $columns));
+    max-inline-size: math.percentage(math.div($span, $columns));
   }
 }
 
@@ -137,9 +131,9 @@
   $offset: math.div($span, $columns);
 
   @if $offset == 0 {
-    margin-left: 0;
+    margin-inline-start: 0;
   } @else {
-    margin-left: math.percentage($offset);
+    margin-inline-start: math.percentage($offset);
   }
 }
 
@@ -181,9 +175,9 @@
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
       .#{$prefix}-col,
       .#{$prefix}-col#{$infix} {
-        max-width: 100%;
         flex-basis: 0;
         flex-grow: 1;
+        max-inline-size: 100%;
       }
 
       .#{$prefix}-col-auto,
@@ -192,7 +186,7 @@
 
         // Reset earlier grid tiers
         width: auto;
-        max-width: 100%;
+        max-inline-size: 100%;
         flex: 0 0 auto;
       }
 
@@ -233,8 +227,7 @@
 @mixin -make-row($gutter: $grid-gutter) {
   display: flex;
   flex-wrap: wrap;
-  margin-right: -1 * $gutter * 0.5;
-  margin-left: -1 * $gutter * 0.5;
+  margin-inline: -1 * $gutter * 0.5;
 }
 
 
@@ -249,18 +242,17 @@
 @mixin -no-gutter {
   .#{$prefix}-no-gutter,
   .#{$prefix}-row.#{$prefix}-no-gutter [class*='#{$prefix}-col'] {
-    padding-right: 0;
-    padding-left: 0;
+    padding-inline: 0;
   }
 
   .#{$prefix}-no-gutter--start,
   .#{$prefix}-row.#{$prefix}-no-gutter--start [class*='#{$prefix}-col'] {
-    padding-left: 0;
+    padding-inline-start: 0;
   }
 
   .#{$prefix}-no-gutter--end,
   .#{$prefix}-row.#{$prefix}-no-gutter--end [class*='#{$prefix}-col'] {
-    padding-right: 0;
+    padding-inline-end: 0;
   }
 }
 
@@ -275,11 +267,11 @@
 /// @group @carbon/grid
 @mixin -hang($gutter: $grid-gutter) {
   .#{$prefix}-hang--start {
-    padding-left: $gutter * 0.5;
+    padding-inline-start: $gutter * 0.5;
   }
 
   .#{$prefix}-hang--end {
-    padding-right: $gutter * 0.5;
+    padding-inline-end: $gutter * 0.5;
   }
 }
 

package/src/scss/themes/index.ts

@@ -1,6 +1,6 @@
 /**
  * Automatically generated by CDS CLI
- * Generated on 1/23/2024, 12:30:07 PM
+ * Generated on 2/15/2024, 1:41:26 PM
  **/
 
 /**

package/src/scss/utility/index.scss

@@ -3,3 +3,4 @@
 @import 'spacing';
 @import 'flexbox';
 @import 'lists';
+@import "typography";

package/src/scss/utility/typography.scss

@@ -0,0 +1,63 @@
+@import "./variables";
+
+@each $type, $value in $typography {
+  .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 $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/exports/_display.scss

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

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/index.scss

@@ -9,3 +9,4 @@
 @import "position";
 @import "flex";
 @import "spacing";
+@import "typography";

package/src/scss/utility/variables/typography.scss

@@ -0,0 +1,93 @@
+@import "../../mixins/typo";
+
+$xs: ('size': var(--cds-font-body-size-xs), 'height': var(--cds-font-height-body), 'weight': var(--cds-font-weight-light));
+$sm: ('size': var(--cds-font-body-size-s), 'height': var(--cds-font-height-body), 'weight': var(--cds-font-weight-light));
+$md: ('size': var(--cds-font-body-size-m), 'height': var(--cds-font-height-body), 'weight': var(--cds-font-weight-light));
+$lg: ('size': var(--cds-font-body-size-l), 'height': var(--cds-font-height-body), 'weight': var(--cds-font-weight-normal));
+$h1: ('size': var(--cds-font-heading-1), 'height': var(--cds-font-height-heading), 'weight': var(--cds-font-weight-light));
+$h2: ('size': var(--cds-font-heading-2), 'height': var(--cds-font-height-heading), 'weight': var(--cds-font-weight-light));
+$h3: ('size': var(--cds-font-heading-3), 'height': var(--cds-font-height-heading), 'weight': var(--cds-font-weight-light));
+$h4: ('size': var(--cds-font-heading-4), 'height': var(--cds-font-height-heading), 'weight': var(--cds-font-weight-bold));
+$h5: ('size': var(--cds-font-heading-5), 'height': var(--cds-font-height-heading), 'weight': var(--cds-font-weight-bold));
+$h6: ('size': var(--cds-font-heading-6), 'height': var(--cds-font-height-heading), 'weight': var(--cds-font-weight-bold));
+$display1: ('size': var(--cds-font-display-1), 'height': var(--cds-font-height-display), 'weight': var(--cds-font-weight-bold));
+$display2: ('size': var(--cds-font-display-2), 'height': var(--cds-font-height-display), 'weight': var(--cds-font-weight-bold));
+
+$typography: (
+  'h1': $h1,
+  'h2': $h2,
+  'h3': $h3,
+  'h4': $h4,
+  'h5': $h5,
+  'h6': $h6,
+  'xs': $xs,
+  'sm': $sm,
+  'md': $md,
+  'lg': $lg,
+  'display-1': $display1,
+  'display-2': $display2
+);
+
+$font-weight: (
+  'normal': normal,
+  'bold': bold,
+  '100': 100,
+  '200': 200,
+  '300': 300,
+  '400': 400,
+  '500': 500,
+  '600': 600,
+  '700': 700,
+  '800': 800,
+  '900': 900
+);
+
+$font-style: (
+  'normal': normal,
+  'italic': italic,
+  'oblique': oblique
+);
+
+$text-align: (
+  'left': left,
+  'right': right,
+  'center': center,
+  'justify': justify
+);
+
+$text-decoration: (
+  'none': none,
+  'underline': underline,
+  'overline': overline,
+  'line-through': line-through
+);
+
+$text-transform: (
+  'none': none,
+  'capitalize': capitalize,
+  'uppercase': uppercase,
+  'lowercase': lowercase
+);
+
+$line-height: (
+  'normal': normal,
+  '1': 1,
+  '2': 2
+);
+
+$letter-spacing: (
+  'normal': normal,
+  'tight': -0.05em,
+  0: 0,
+  'wide': 0.05em
+);
+
+$typography-properties: (
+  'weight': ('name': 'font-weight-', 'map': $font-weight, 'property': 'font-weight'),
+  'style': ('name': 'font-style-', 'map': $font-style, 'property': 'font-style'),
+  'align': ('name': 'align-', 'map': $text-align, 'property': 'text-align'),
+  'decoration': ('name': 'text-decoration-', 'map': $text-decoration, 'property': 'text-decoration'),
+  'transform': ('name': 'text-transform-', 'map': $text-transform, 'property': 'text-transform'),
+  'line-height': ('name': 'line-height-', 'map': $line-height, 'property': 'line-height'),
+  'letter-spacing': ('name': 'letter-spacing-', 'map': $letter-spacing, 'property': 'letter-spacing'),
+);

package/dist/composable/dark.d.ts

@@ -1,19 +0,0 @@
-import type { ComputedRef, PropType } from 'vue';
-export interface IDarkProps {
-    dark: boolean;
-}
-export interface IUseDark {
-    darkClasses: ComputedRef<string | undefined>;
-}
-export declare const makeDarkProps: <Defaults extends {
-    dark?: unknown;
-} = {}>(defaults?: Defaults | undefined) => import('../utils').AppendDefault<{
-    /**
-     * Темная тема
-     */
-    dark: {
-        type: PropType<boolean>;
-        default: boolean;
-    };
-}, Defaults>;
-export declare function useDark(props: IDarkProps, name: string): IUseDark;