ustatic-css 0.0.1

package/src/css/modules/position/index.scss

@@ -0,0 +1,94 @@
+@import "../../variables.scss";
+@import '../../utils/token';
+@import '../../variables.scss';
+
+.relative {
+  position: relative;
+}
+.absolute {
+  position: absolute;
+}
+.fixed {
+  position: fixed;
+}
+.absolute-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.top {
+  @each $key, $value in $positions {
+    &-#{$key} {
+      top: $value;
+    }
+  }
+}
+
+.right {
+  @each $key, $value in $positions {
+    &-#{$key} {
+      right: $value;
+    }
+  }
+}
+
+.bottom {
+  @each $key, $value in $positions {
+    &-#{$key} {
+      bottom: $value;
+    }
+  }
+}
+
+.left {
+  @each $key, $value in $positions {
+    &-#{$key} {
+      left: $value;
+    }
+  }
+}
+
+@for $i from -10 through 10 {
+  $modifier: if($i < 0, "\-z", "z");
+  $value: abs($i * 10);
+  .#{$modifier}-#{$value} {
+    z-index: $i * 10;
+  }
+}
+
+.z-auto {
+  z-index: auto;
+}
+
+.z-i-hidden {
+  z-index: token("base.zindex.hidden");
+}
+.z-i-icon {
+  z-index: token("base.zindex.1");
+}
+.z-i-modal {
+  z-index: token("base.zindex.60");
+}
+.z-i-notice {
+  z-index: token("base.zindex.100");
+}
+.z-i-tip {
+  z-index: token("base.zindex.50");
+}
+.z-i-load {
+  z-index: token("base.zindex.30");
+}
+.z-i-fullpage-load {
+  z-index: token("base.zindex.100");
+}
+.z-i-menu {
+  z-index: token("base.zindex.20");
+}
+.z-i-teleport {
+  z-index: token("base.zindex.20");
+}
+.z-i-mobile-menu {
+  z-index: token("base.zindex.50");
+}

package/src/css/modules/scroll/index.scss

@@ -0,0 +1,68 @@
+@import '../../utils/token';
+@import '../../variables.scss';
+
+$scroll-bar-width: token("base.scroll.bar.width") !default;
+$scroll-width: token("base.scroll.width") !default;
+$scroll-height: token("base.scroll.height") !default;
+$scroll-thumb-min-width: token("base.scroll.thumb.min-width") !default;
+$scroll-thumb-height: token("base.scroll.thumb.height") !default;
+$scroll-thumb-round: token("base.scroll.thumb.round") !default;
+
+
+.z-scroll {
+  -ms-overflow-style: none;
+  scrollbar-width: $scroll-bar-width;
+
+  /* Стилизация фона полосы прокрутки */
+  ::-webkit-scrollbar-track {
+    background: token("base.color.gray.100"); /* Фон всей полосы прокрутки */
+  }
+
+  &::-webkit-scrollbar {
+    width: $scroll-width;
+    height: $scroll-height;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: token("base.color.gray.400");
+
+    min-width: $scroll-thumb-min-width;
+    height: $scroll-thumb-height;
+    border-radius: $scroll-thumb-round;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: token("base.color.gray.500");
+  }
+  
+  @-moz-document url-prefix() {
+    & {
+      scrollbar-width: thin;
+      scrollbar-color: token("base.color.gray.400") token("base.color.transparent");
+    }
+  }
+
+  &--hovered {
+    &::-webkit-scrollbar {
+      width: token("base.size.1d5"); // Новая ширина при наведении
+      height: token("base.size.1d5");
+    }
+    
+    // Для Firefox
+    scrollbar-width: token("base.size.1d5");
+  }
+
+  &--thin {
+    @include set-token("base.scroll.bar.width", token("base.size.0d5"));
+
+    &::-webkit-scrollbar {
+      @include set-token("base.scroll.height", token("base.size.0d5"));
+      @include set-token("base.scroll.width", token("base.size.0d5"));
+    }
+    
+    &::-webkit-scrollbar-thumb {
+      @include set-token("base.scroll.thumb.min-width", token("base.size.0d5"));
+      @include set-token("base.scroll.thumb.round", token("base.size.1"));
+    }
+  }
+}

package/src/css/modules/sizing/index.scss

@@ -0,0 +1,91 @@
+@import "../../variables";
+
+.w {
+  &-screen {
+    width: 100vw;
+  }
+
+  @each $key, $value in $sizes {
+    &-#{$key} {
+      width: $value;
+    }
+  }
+}
+
+.h {
+  &-screen {
+    height: 100vh;
+  }
+
+  @each $key, $value in $sizes {
+    &-#{$key} {
+      height: $value;
+    }
+  }
+}
+
+.size {
+  &-screen {
+    width: 100vw;
+    height: 100vh;
+  }
+
+  @each $key, $value in $sizes {
+    &-#{$key} {
+      width: $value;
+      height: $value;
+    }
+  }
+}
+
+.min {
+  &-w {
+    &-screen {
+      min-width: 100vw;
+    }
+
+    @each $key, $value in $sizes {
+      &-#{$key} {
+        min-width: $value;
+      }
+    }
+  }
+
+  &-h {
+    &-screen {
+      min-height: 100vh;
+    }
+
+    @each $key, $value in $sizes {
+      &-#{$key} {
+        min-height: $value;
+      }
+    }
+  }
+}
+
+.max {
+  &-w {
+    &-screen {
+      max-width: 100vw;
+    }
+
+    @each $key, $value in $sizes {
+      &-#{$key} {
+        max-width: $value;
+      }
+    }
+  }
+
+  &-h {
+    &-screen {
+      max-height: 100vh;
+    }
+
+    @each $key, $value in $sizes {
+      &-#{$key} {
+        max-height: $value;
+      }
+    }
+  }
+}

package/src/css/modules/spacing/index.scss

@@ -0,0 +1,56 @@
+@import "../../variables";
+
+@each $spaceKey, $spaceValue in $positions {
+  @each $dirKey, $dirValue in $directions {
+    // Создание классов для margin.
+    @if $dirKey == "" {
+      .m-#{$spaceKey} {
+        margin: $spaceValue;
+      }
+      .-m-#{$spaceKey} {
+        margin: calc(-1 * $spaceValue);
+      }
+    } @else {
+      .m#{$dirKey}-#{$spaceKey} {
+        @each $prop in $dirValue {
+          @if $prop != "" {
+            margin-#{$prop}: $spaceValue;
+          }
+        }
+      }
+
+      .-m#{$dirKey}-#{$spaceKey} {
+        @each $prop in $dirValue {
+          @if $prop != "" {
+            margin-#{$prop}: calc(-1 * $spaceValue);
+          }
+        }
+      }
+    }
+    // Создание классов для padding.
+    @if $dirKey == "" {
+      .p-#{$spaceKey} {
+        padding: $spaceValue;
+      }
+      .-p-#{$spaceKey} {
+        padding: calc(-1 * $spaceValue);
+      }
+    } @else {
+      .p#{$dirKey}-#{$spaceKey} {
+        @each $prop in $dirValue {
+          @if $prop != "" {
+            padding-#{$prop}: $spaceValue;
+          }
+        }
+      }
+
+      .-p#{$dirKey}-#{$spaceKey} {
+        @each $prop in $dirValue {
+          @if $prop != "" {
+            padding-#{$prop}: calc(-1 * $spaceValue);
+          }
+        }
+      }
+    }
+  }
+}

package/src/css/modules/typography/index.scss

@@ -0,0 +1,139 @@
+@use "sass:list";
+@import '../../utils/token';
+@import '../../variables.scss';
+@import "../../assets/tokens/ustatic-list";
+
+.font {
+  &-family-inherit {
+    font-family: inherit;
+  }
+  &-size-inherit {
+    font-size: inherit;
+  }
+
+  @each $weight, $value in $font-weights {
+    &-#{$weight} {
+      font-weight: $value;
+    }
+  }
+
+  &-caps {
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+  }
+}
+
+.text {
+  @each $size, $values in $text-sizes {
+    $font-size: nth($values, 1);
+    $line-height: nth($values, 2);
+    &-#{$size} {
+      font-size: $font-size;
+      line-height: $line-height;
+    }
+  }
+
+  @each $key, $value in $palette-rgb {
+    // "" + - исправление ошибки использования в качестве имени класса имени цвета
+    &-#{"" + $key} {
+      color: token("base.color.text");
+      fill: token("base.color.text");
+      @include set-token("base.color.text", rgba($value, token("base.color.opacity")));
+    }
+  }
+
+  @each $key in $text-algins {
+    &-#{$key} {
+      text-align: $key;
+    }
+  }
+
+  @each $key in $vertical-algins {
+    &-#{$key} {
+      vertical-align: $key;
+    }
+  }
+
+  &-none {
+    color: token("base.color.transparent");
+  }
+
+  &-decoration-none {
+    text-decoration: none;
+  }
+  &-style-clear {
+    font-style: normal;
+  }
+  &-ellipsis {
+    text-overflow: ellipsis;
+  }
+
+}
+
+.hover\:text {
+  @each $key, $value in $palette-rgb {
+    // "" + - исправление ошибки использования в качестве имени класса имени цвета
+    &-#{"" + $key} {
+      &:hover {
+        color: token("base.color.text");
+        @include set-token("base.color.text", rgba($value, token("base.color.opacity")));
+      }
+    }
+  }
+}
+
+.line-height {
+  @each $size, $values in $text-sizes {
+    $line-height: nth($values, 2);
+    &-#{$size} {
+      line-height: $line-height;
+    }
+  }
+}
+
+.italic {
+  font-style: italic;
+}
+.underline {
+  text-decoration: underline;
+}
+
+.left-align {
+  text-align: left;
+}
+.center {
+  text-align: center;
+}
+.right-align {
+  text-align: right;
+}
+.justify {
+  text-align: justify;
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+.pre-wrap {
+  white-space: pre-wrap;
+}
+.break-word {
+  word-wrap: break-word;
+}
+
+.list-style-none {
+  list-style: none;
+}
+
+.truncate {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.list-reset {
+  list-style: none;
+  padding-left: 0;
+}

package/src/css/tokens/base/animations/underline.yaml

@@ -0,0 +1,5 @@
+base:
+  underline:
+    color:
+      value: '{base.color.variant.primary}'
+     

package/src/css/tokens/base/border/color.yaml

@@ -0,0 +1,17 @@
+base:
+  border:
+    color:
+      black:
+        value: '{base.color.black}'
+      primary:
+        value: '{base.color.variant.primary}'
+      secondary:
+        value: '{base.color.variant.secondary}'
+      success:
+        value: '{base.color.variant.success}'
+      info:
+        value: '{base.color.variant.info}'
+      warning:
+        value: '{base.color.variant.warning}'
+      danger:
+        value: '{base.color.variant.danger}'

package/src/css/tokens/base/border/radius.yaml

@@ -0,0 +1,33 @@
+base:
+  border:
+    radius:
+      def:
+        value: "{base.border.radius.base}"
+      none:
+        value: 0
+      sm:
+        value: 0.125rem
+        comment: "примерно 2px"
+      base:
+        value: 0.25rem
+        comment: "примерно 4px"
+      md:
+        value: 0.375rem
+        comment: "примерно 6px"
+      lg:
+        value: 0.5rem
+        comment: "примерно 8px"
+      xl:
+        value: 0.75rem
+        comment: "примерно 12px"
+      2xl:
+        value: 1rem
+        comment: "примерно 16px"
+      3xl:
+        value: 1.5rem
+        comment: "примерно 24px"
+      full:
+        value: 9999px
+        comment: "делает элемент полностью круглым"
+    rounded:
+      value: 100%

package/src/css/tokens/base/border/width.yaml

@@ -0,0 +1,19 @@
+base:
+  border:
+    width:
+      def:
+        value: '{base.border.width.1}'
+      '0':
+        value: '0'
+      '1':
+        value: 1px
+      '2':
+        value: 2px
+      '3':
+        value: 3px
+      '4':
+        value: 4px
+      '5':
+        value: 5px
+    "none":
+      value: '0'