@dss-kit/ui-kit 0.2.31 → 0.2.33

package/dist/styles/utils/breakpoints/semantic.scss

@@ -1,31 +1,31 @@
-@use "./screen.scss";
-
-@mixin bp-xs($direction: max) {
-  @include screen.bp-480($direction) {
-    @content;
-  }
-}
-
-@mixin bp-sm($direction: max) {
-  @include screen.bp-576($direction) {
-    @content;
-  }
-}
-
-@mixin bp-md($direction: max) {
-  @include screen.bp-768($direction) {
-    @content;
-  }
-}
-
-@mixin bp-lg($direction: max) {
-  @include screen.bp-992($direction) {
-    @content;
-  }
-}
-
-@mixin bp-xl($direction: max) {
-  @include screen.bp-1200($direction) {
-    @content;
-  }
-}
+@use "./screen.scss";
+
+@mixin bp-xs($direction: max) {
+  @include screen.bp-480($direction) {
+    @content;
+  }
+}
+
+@mixin bp-sm($direction: max) {
+  @include screen.bp-576($direction) {
+    @content;
+  }
+}
+
+@mixin bp-md($direction: max) {
+  @include screen.bp-768($direction) {
+    @content;
+  }
+}
+
+@mixin bp-lg($direction: max) {
+  @include screen.bp-992($direction) {
+    @content;
+  }
+}
+
+@mixin bp-xl($direction: max) {
+  @include screen.bp-1200($direction) {
+    @content;
+  }
+}

package/dist/styles/utils/breakpoints.ts

@@ -1,35 +1,35 @@
-import type { BreakpointDirection } from "@/utils";
-import { Breakpoints, BreakpointsBase } from "@/utils";
-
-const breakpoint = (
-  px: number,
-  direction: BreakpointDirection = "max"
-): string => {
-  if (direction === "min") {
-    return `@media (min-width: ${px}px)`;
-  }
-  return `@media (max-width: ${px - 1}px)`;
-};
-
-export const bp = {
-  xs: (direction: BreakpointDirection = "max") =>
-    breakpoint(Breakpoints.xs, direction),
-  sm: (direction: BreakpointDirection = "max") =>
-    breakpoint(Breakpoints.sm, direction),
-  md: (direction: BreakpointDirection = "max") =>
-    breakpoint(Breakpoints.md, direction),
-  lg: (direction: BreakpointDirection = "max") =>
-    breakpoint(Breakpoints.lg, direction),
-  xl: (direction: BreakpointDirection = "max") =>
-    breakpoint(Breakpoints.xl, direction),
-  bp375: (direction: BreakpointDirection = "max") =>
-    breakpoint(BreakpointsBase._375, direction),
-  bp1024: (direction: BreakpointDirection = "max") =>
-    breakpoint(BreakpointsBase._1024, direction),
-  bp1280: (direction: BreakpointDirection = "max") =>
-    breakpoint(BreakpointsBase._1280, direction),
-  bp1440: (direction: BreakpointDirection = "max") =>
-    breakpoint(BreakpointsBase._1440, direction),
-  bp1920: (direction: BreakpointDirection = "max") =>
-    breakpoint(BreakpointsBase._1920, direction),
-} as const;
+import type { BreakpointDirection } from "@/utils";
+import { Breakpoints, BreakpointsBase } from "@/utils";
+
+const breakpoint = (
+  px: number,
+  direction: BreakpointDirection = "max"
+): string => {
+  if (direction === "min") {
+    return `@media (min-width: ${px}px)`;
+  }
+  return `@media (max-width: ${px - 1}px)`;
+};
+
+export const bp = {
+  xs: (direction: BreakpointDirection = "max") =>
+    breakpoint(Breakpoints.xs, direction),
+  sm: (direction: BreakpointDirection = "max") =>
+    breakpoint(Breakpoints.sm, direction),
+  md: (direction: BreakpointDirection = "max") =>
+    breakpoint(Breakpoints.md, direction),
+  lg: (direction: BreakpointDirection = "max") =>
+    breakpoint(Breakpoints.lg, direction),
+  xl: (direction: BreakpointDirection = "max") =>
+    breakpoint(Breakpoints.xl, direction),
+  bp375: (direction: BreakpointDirection = "max") =>
+    breakpoint(BreakpointsBase._375, direction),
+  bp1024: (direction: BreakpointDirection = "max") =>
+    breakpoint(BreakpointsBase._1024, direction),
+  bp1280: (direction: BreakpointDirection = "max") =>
+    breakpoint(BreakpointsBase._1280, direction),
+  bp1440: (direction: BreakpointDirection = "max") =>
+    breakpoint(BreakpointsBase._1440, direction),
+  bp1920: (direction: BreakpointDirection = "max") =>
+    breakpoint(BreakpointsBase._1920, direction),
+} as const;

package/dist/styles/utils/fonts/font-family.scss

@@ -1,3 +1,3 @@
-@mixin Inter {
-  font-family: Inter, sans-serif;
-}
+@mixin Inter {
+  font-family: Inter, sans-serif;
+}

package/dist/styles/utils/fonts/index.scss

@@ -1 +1 @@
-@forward "font-family";
+@forward "font-family";

package/dist/styles/utils/index.scss

@@ -1,5 +1,5 @@
-@forward "breakpoints";
-@forward "fonts";
-@forward "size";
-@forward "typography";
-@forward "style";
+@forward "breakpoints";
+@forward "fonts";
+@forward "size";
+@forward "typography";
+@forward "style";

package/dist/styles/utils/size/index.scss

@@ -1 +1 @@
-@forward "modifiers";
+@forward "modifiers";

package/dist/styles/utils/size/modifiers.scss

@@ -1,41 +1,41 @@
-@mixin xxs-modifier {
-  &_2xsSize {
-    @content;
-  }
-}
-
-@mixin xs-modifier {
-  &_xsSize {
-    @content;
-  }
-}
-
-@mixin sm-modifier {
-  &_smSize {
-    @content;
-  }
-}
-
-@mixin md-modifier {
-  &_mdSize {
-    @content;
-  }
-}
-
-@mixin lg-modifier {
-  &_lgSize {
-    @content;
-  }
-}
-
-@mixin xl-modifier {
-  &_xlSize {
-    @content;
-  }
-}
-
-@mixin xxl-modifier {
-  &_2xlSize {
-    @content;
-  }
+@mixin xxs-modifier {
+  &_2xsSize {
+    @content;
+  }
+}
+
+@mixin xs-modifier {
+  &_xsSize {
+    @content;
+  }
+}
+
+@mixin sm-modifier {
+  &_smSize {
+    @content;
+  }
+}
+
+@mixin md-modifier {
+  &_mdSize {
+    @content;
+  }
+}
+
+@mixin lg-modifier {
+  &_lgSize {
+    @content;
+  }
+}
+
+@mixin xl-modifier {
+  &_xlSize {
+    @content;
+  }
+}
+
+@mixin xxl-modifier {
+  &_2xlSize {
+    @content;
+  }
 }

package/dist/styles/utils/style/index.scss

@@ -1 +1 @@
-@forward "variants";
+@forward "variants";

package/dist/styles/utils/style/variants.scss

@@ -1,34 +1,34 @@
-@mixin style-variant-text($map, $pseudo-class: null, $postfix: "") {
-  @each $style, $color in $map {
-    &_#{$style}#{$postfix}#{if($pseudo-class, ':' + $pseudo-class, '')} {
-      color: $color;
-    }
-  }
-}
-
-@mixin style-variant-border($width: 1px, $map, $pseudo-class: null, $postfix: "") {
-  border: $width solid transparent;
-  @each $style, $color in $map {
-    &_#{$style}#{$postfix}#{if($pseudo-class, ':' + $pseudo-class, '')} {
-      border-color: $color;
-    }
-  }
-}
-
-@mixin style-variant-bg($map, $pseudo-class: null, $postfix: "") {
-  @each $style, $color in $map {
-    &_#{$style}#{$postfix}#{if($pseudo-class, ':' + $pseudo-class, '')} {
-      background-color: $color;
-    }
-  }
-}
-
-@mixin style-variant-svg($map, $pseudo-class: null, $postfix: "") {
-  @each $style, $color in $map {
-    &_#{$style}#{$postfix}#{if($pseudo-class, ':' + $pseudo-class, '')} {
-      svg {
-        color: $color;
-      }
-    }
-  }
-}
+@mixin style-variant-text($map, $pseudo-class: null, $postfix: "") {
+  @each $style, $color in $map {
+    &_#{$style}#{$postfix}#{if($pseudo-class, ':' + $pseudo-class, '')} {
+      color: $color;
+    }
+  }
+}
+
+@mixin style-variant-border($width: 1px, $map, $pseudo-class: null, $postfix: "") {
+  border: $width solid transparent;
+  @each $style, $color in $map {
+    &_#{$style}#{$postfix}#{if($pseudo-class, ':' + $pseudo-class, '')} {
+      border-color: $color;
+    }
+  }
+}
+
+@mixin style-variant-bg($map, $pseudo-class: null, $postfix: "") {
+  @each $style, $color in $map {
+    &_#{$style}#{$postfix}#{if($pseudo-class, ':' + $pseudo-class, '')} {
+      background-color: $color;
+    }
+  }
+}
+
+@mixin style-variant-svg($map, $pseudo-class: null, $postfix: "") {
+  @each $style, $color in $map {
+    &_#{$style}#{$postfix}#{if($pseudo-class, ':' + $pseudo-class, '')} {
+      svg {
+        color: $color;
+      }
+    }
+  }
+}

package/dist/styles/utils/typography/_font-weight.scss

@@ -1,33 +1,33 @@
-@use "sass:map";
-
-$font-weight: (
-  regular: 400,
-  medium: 500,
-  semibold: 600,
-  bold: 700,
-) !default;
-
-@function font-weight-token($name) {
-  @if not map.has-key($font-weight, $name) {
-    @error "Unknown font-weight token `#{$name}`";
-  }
-  @return map.get($font-weight, $name);
-}
-
-@mixin font-weight($name) {
-  font-weight: font-weight-token($name);
-}
-
-// опциональные алиасы ради DX/совместимости
-@mixin font-regular {
-  @include font-weight(regular);
-}
-@mixin font-medium {
-  @include font-weight(medium);
-}
-@mixin font-semibold {
-  @include font-weight(semibold);
-}
-@mixin font-bold {
-  @include font-weight(bold);
-}
+@use "sass:map";
+
+$font-weight: (
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+) !default;
+
+@function font-weight-token($name) {
+  @if not map.has-key($font-weight, $name) {
+    @error "Unknown font-weight token `#{$name}`";
+  }
+  @return map.get($font-weight, $name);
+}
+
+@mixin font-weight($name) {
+  font-weight: font-weight-token($name);
+}
+
+// опциональные алиасы ради DX/совместимости
+@mixin font-regular {
+  @include font-weight(regular);
+}
+@mixin font-medium {
+  @include font-weight(medium);
+}
+@mixin font-semibold {
+  @include font-weight(semibold);
+}
+@mixin font-bold {
+  @include font-weight(bold);
+}

package/dist/styles/utils/typography/_variants.scss

@@ -1,85 +1,85 @@
-@use "../fonts";
-@use "../breakpoints/semantic.scss" as breakpoints;
-
-/* Общий базовый стиль для любого текста */
-@mixin common {
-  @include fonts.Inter;
-  word-break: break-word;
-}
-
-/* Быстрое объявление font-size + line-height */
-@mixin text-size($font-size, $line-height) {
-  font-size: $font-size;
-  line-height: $line-height;
-}
-
-/* ==== Titles ==== */
-@mixin title-1 {
-  @include text-size(32px, 36px);
-
-  // md = 768px
-  @include breakpoints.bp-md() {
-    font-size: 24px;
-  }
-}
-
-@mixin title-2 {
-  @include text-size(24px, 28px);
-
-  // md = 768px
-  @include breakpoints.bp-md() {
-    font-size: 20px;
-  }
-}
-
-@mixin title-3 {
-  @include text-size(20px, 28px);
-
-  // md = 768px
-  @include breakpoints.bp-md() {
-    font-size: 18px;
-  }
-
-  // xs = 480px
-  @include breakpoints.bp-xs() {
-    font-size: 16px;
-  }
-}
-
-/* ==== Headline ==== */
-@mixin headline-1 {
-  font-size: 22px;
-  line-height: 26px;
-}
-
-@mixin headline-2 {
-  font-size: 18px;
-  line-height: 22px;
-}
-
-@mixin headline-3 {
-  font-size: 16px;
-  line-height: 20px;
-}
-
-/* ==== Body ==== */
-@mixin body-1 {
-  font-size: 16px;
-  line-height: 24px;
-}
-
-@mixin body-2 {
-  font-size: 14px;
-  line-height: 20px;
-}
-
-/* ==== Caption ==== */
-@mixin caption-1 {
-  font-size: 12px;
-  line-height: 16px;
-}
-
-@mixin caption-2 {
-  font-size: 10px;
-  line-height: 14px;
-}
+@use "../fonts";
+@use "../breakpoints/semantic.scss" as breakpoints;
+
+/* Общий базовый стиль для любого текста */
+@mixin common {
+  @include fonts.Inter;
+  word-break: break-word;
+}
+
+/* Быстрое объявление font-size + line-height */
+@mixin text-size($font-size, $line-height) {
+  font-size: $font-size;
+  line-height: $line-height;
+}
+
+/* ==== Titles ==== */
+@mixin title-1 {
+  @include text-size(32px, 36px);
+
+  // md = 768px
+  @include breakpoints.bp-md() {
+    font-size: 24px;
+  }
+}
+
+@mixin title-2 {
+  @include text-size(24px, 28px);
+
+  // md = 768px
+  @include breakpoints.bp-md() {
+    font-size: 20px;
+  }
+}
+
+@mixin title-3 {
+  @include text-size(20px, 28px);
+
+  // md = 768px
+  @include breakpoints.bp-md() {
+    font-size: 18px;
+  }
+
+  // xs = 480px
+  @include breakpoints.bp-xs() {
+    font-size: 16px;
+  }
+}
+
+/* ==== Headline ==== */
+@mixin headline-1 {
+  font-size: 22px;
+  line-height: 26px;
+}
+
+@mixin headline-2 {
+  font-size: 18px;
+  line-height: 22px;
+}
+
+@mixin headline-3 {
+  font-size: 16px;
+  line-height: 20px;
+}
+
+/* ==== Body ==== */
+@mixin body-1 {
+  font-size: 16px;
+  line-height: 24px;
+}
+
+@mixin body-2 {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+/* ==== Caption ==== */
+@mixin caption-1 {
+  font-size: 12px;
+  line-height: 16px;
+}
+
+@mixin caption-2 {
+  font-size: 10px;
+  line-height: 14px;
+}

package/dist/styles/utils/typography/index.scss

@@ -1,2 +1,2 @@
-@forward "_variants";
-@forward "_font-weight";
+@forward "_variants";
+@forward "_font-weight";