@dss-kit/ui-kit 0.0.27 → 0.0.29

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

@@ -1,11 +1,11 @@
-@mixin breakpoint($breakpoint, $direction: max) {
-  @if $direction == min {
-    @media (min-width: $breakpoint) {
-      @content;
-    }
-  } @else if $direction == max {
-    @media (max-width: ($breakpoint - 1px)) {
-      @content;
-    }
-  }
-}
+@mixin breakpoint($breakpoint, $direction: max) {
+  @if $direction == min {
+    @media (min-width: $breakpoint) {
+      @content;
+    }
+  } @else if $direction == max {
+    @media (max-width: ($breakpoint - 1px)) {
+      @content;
+    }
+  }
+}

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

@@ -1,3 +1,3 @@
-@forward "base";
-@forward "screen";
-@forward "semantic";
+@forward "base";
+@forward "screen";
+@forward "semantic";

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

@@ -1,61 +1,61 @@
-@use "./base.scss";
-
-@mixin bp-1920($direction: max) {
-  @include base.breakpoint(1920px, $direction) {
-    @content;
-  }
-}
-
-@mixin bp-1440($direction: max) {
-  @include base.breakpoint(1440px, $direction) {
-    @content;
-  }
-}
-
-@mixin bp-1280($direction: max) {
-  @include base.breakpoint(1280px, $direction) {
-    @content;
-  }
-}
-
-@mixin bp-1200($direction: max) {
-  @include base.breakpoint(1200px, $direction) {
-    @content;
-  }
-}
-
-@mixin bp-1024($direction: max) {
-  @include base.breakpoint(1024px, $direction) {
-    @content;
-  }
-}
-
-@mixin bp-992($direction: max) {
-  @include base.breakpoint(992px, $direction) {
-    @content;
-  }
-}
-
-@mixin bp-768($direction: max) {
-  @include base.breakpoint(768px, $direction) {
-    @content;
-  }
-}
-
-@mixin bp-576($direction: max) {
-  @include base.breakpoint(576px, $direction) {
-    @content;
-  }
-}
-
-@mixin bp-480($direction: max) {
-  @include base.breakpoint(480px, $direction) {
-    @content;
-  }
-}
-
-@mixin bp-375($direction: max) {
-  @include base.breakpoint(375px, $direction) {
-    @content;
-  }
-}
+@use "./base.scss";
+
+@mixin bp-1920($direction: max) {
+  @include base.breakpoint(1920px, $direction) {
+    @content;
+  }
+}
+
+@mixin bp-1440($direction: max) {
+  @include base.breakpoint(1440px, $direction) {
+    @content;
+  }
+}
+
+@mixin bp-1280($direction: max) {
+  @include base.breakpoint(1280px, $direction) {
+    @content;
+  }
+}
+
+@mixin bp-1200($direction: max) {
+  @include base.breakpoint(1200px, $direction) {
+    @content;
+  }
+}
+
+@mixin bp-1024($direction: max) {
+  @include base.breakpoint(1024px, $direction) {
+    @content;
+  }
+}
+
+@mixin bp-992($direction: max) {
+  @include base.breakpoint(992px, $direction) {
+    @content;
+  }
+}
+
+@mixin bp-768($direction: max) {
+  @include base.breakpoint(768px, $direction) {
+    @content;
+  }
+}
+
+@mixin bp-576($direction: max) {
+  @include base.breakpoint(576px, $direction) {
+    @content;
+  }
+}
+
+@mixin bp-480($direction: max) {
+  @include base.breakpoint(480px, $direction) {
+    @content;
+  }
+}
+
+@mixin bp-375($direction: max) {
+  @include base.breakpoint(375px, $direction) {
+    @content;
+  }
+}

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/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,29 +1,29 @@
-@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 xs-modifier {
+  &_xsSize {
+    @content;
+  }
+}
+
+@mixin sm-modifier {
+  &_smSize {
+    @content;
+  }
+}
+
+@mixin md-modifier {
+  &_mdSize {
+    @content;
+  }
+}
+
+@mixin lg-modifier {
+  &_lgSize {
+    @content;
+  }
+}
+
+@mixin xl-modifier {
+  &_xlSize {
+    @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";

package/dist/types/tokens.types.d.ts

@@ -9,5 +9,16 @@ export type AccentType = "accent";
 export type InverseType = "inverse";
 export type CustomType = "custom";
 export type Size = "xs" | "sm" | "md" | "lg" | "xl";
-export type IconColor = PrimaryType | SecondaryType | TertiaryType | PositiveType | NegativeType | WarningType | AccentType | InverseType;
+export type CornerRadius = "zero" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "full-round";
+export type IconColor = PrimaryType | SecondaryType | TertiaryType | PositiveType | NegativeType | WarningType | AccentType | InverseType | CustomType;
+export type TextColor = PrimaryType | SecondaryType | TertiaryType | PositiveType | NegativeType | WarningType | AccentType | InverseType | CustomType;
+export type BorderColor = AccentType | NegativeType | PositiveType | WarningType | NeutralType | CustomType;
+export type BorderVariant = PrimaryType | SecondaryType;
+export type FillColor = AccentType | PositiveType | NegativeType | WarningType | NeutralType | CustomType;
+export type FillVariant = PrimaryType | SecondaryType | "tint" | "tint-low";
+export type BackgroundColor = PrimaryType | SecondaryType | TertiaryType | "elevation-primary" | "elevation-secondary" | "elevation-tertiary" | CustomType;
+export type StatusColor = AccentType | NegativeType | PositiveType | WarningType | NeutralType | CustomType;
+export type StatusVariant = "default" | "tint" | "tint-low";
+export type ColorType = PrimaryType | SecondaryType | TertiaryType | PositiveType | NegativeType | WarningType | NeutralType | AccentType | InverseType | CustomType;
+export type HoverableColor<T extends string> = T | `${T}-hover`;
 //# sourceMappingURL=tokens.types.d.ts.map

package/dist/types/tokens.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.types.d.ts","sourceRoot":"","sources":["../../src/types/tokens.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,SAAS,CAAC;AACpC,MAAM,MAAM,aAAa,GAAG,WAAW,CAAC;AACxC,MAAM,MAAM,YAAY,GAAG,UAAU,CAAC;AACtC,MAAM,MAAM,YAAY,GAAG,UAAU,CAAC;AACtC,MAAM,MAAM,YAAY,GAAG,UAAU,CAAC;AACtC,MAAM,MAAM,WAAW,GAAG,SAAS,CAAC;AACpC,MAAM,MAAM,WAAW,GAAG,SAAS,CAAC;AACpC,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;AAClC,MAAM,MAAM,WAAW,GAAG,SAAS,CAAC;AACpC,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;AAElC,MAAM,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD,MAAM,MAAM,SAAS,GACjB,WAAW,GACX,aAAa,GACb,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,UAAU,GACV,WAAW,CAAC"}
+{"version":3,"file":"tokens.types.d.ts","sourceRoot":"","sources":["../../src/types/tokens.types.ts"],"names":[],"mappings":"AACA,MAAM,MAAM,WAAW,GAAG,SAAS,CAAC;AACpC,MAAM,MAAM,aAAa,GAAG,WAAW,CAAC;AACxC,MAAM,MAAM,YAAY,GAAG,UAAU,CAAC;AACtC,MAAM,MAAM,YAAY,GAAG,UAAU,CAAC;AACtC,MAAM,MAAM,YAAY,GAAG,UAAU,CAAC;AACtC,MAAM,MAAM,WAAW,GAAG,SAAS,CAAC;AACpC,MAAM,MAAM,WAAW,GAAG,SAAS,CAAC;AACpC,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;AAClC,MAAM,MAAM,WAAW,GAAG,SAAS,CAAC;AACpC,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;AAElC,MAAM,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAGpD,MAAM,MAAM,YAAY,GACpB,MAAM,GACN,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,YAAY,CAAC;AAGjB,MAAM,MAAM,SAAS,GACjB,WAAW,GACX,aAAa,GACb,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,UAAU,GACV,WAAW,GACX,UAAU,CAAC;AAGf,MAAM,MAAM,SAAS,GACjB,WAAW,GACX,aAAa,GACb,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,UAAU,GACV,WAAW,GACX,UAAU,CAAC;AAGf,MAAM,MAAM,WAAW,GACnB,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,WAAW,GACX,UAAU,CAAC;AAGf,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,aAAa,CAAC;AAGxD,MAAM,MAAM,SAAS,GACjB,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,WAAW,GACX,UAAU,CAAC;AAGf,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,aAAa,GAAG,MAAM,GAAG,UAAU,CAAC;AAG5E,MAAM,MAAM,eAAe,GACvB,WAAW,GACX,aAAa,GACb,YAAY,GACZ,mBAAmB,GACnB,qBAAqB,GACrB,oBAAoB,GACpB,UAAU,CAAC;AAGf,MAAM,MAAM,WAAW,GACnB,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,WAAW,GACX,UAAU,CAAC;AAGf,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,UAAU,CAAC;AAG5D,MAAM,MAAM,SAAS,GACjB,WAAW,GACX,aAAa,GACb,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,WAAW,GACX,UAAU,GACV,WAAW,GACX,UAAU,CAAC;AAGf,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,GAAG,GAAG,CAAC,QAAQ,CAAC"}