ustatic-css 0.0.1-b.2

package/src/css/modules/border/border.scss

@@ -0,0 +1,88 @@
+@use "sass:list";
+@import '../../utils/token';
+@import '../../variables.scss';
+
+@mixin border($direction, $bw: -1) {
+  @if $direction == "all" {
+    border-style: solid;
+    @if $bw == -1 {
+      border-width: token("base.border.width.def");
+    } @else {
+      border-width: token("base.border.width." + $bw);
+    }
+  } @else {
+    border-#{$direction}-style: solid;
+    @if $bw == -1 {
+      border-#{$direction}-width: token("base.border.width.def");
+    } @else {
+      border-#{$direction}-width: token("base.border.width." + $bw);
+    }
+  }
+}
+
+.border {
+  &-none {
+    border: 0;
+  }
+
+  @for $i from -1 through 5 {
+    @each $key, $value in $directions {
+      @if $key == "" {
+        @if $i == -1 {
+          @include border("all");
+        } @else {
+          &-#{$i} {
+            @include border("all", $i);
+          }
+        }
+      } @else {
+        &-#{$key} {
+          @each $subKey in $value {
+            @if $subKey == "" {
+            } @else {
+              @if $i == -1 {
+                @include border($subKey);
+              } @else {
+                &-#{$i} {
+                  @include border($subKey, $i);
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // Цвета границ для всех сторон
+  @each $name, $value in $palette-rgb {
+    &-#{"" + $name} {
+      border-color: token("base.color.border");
+      @include set-token("base.color.border", rgba($value, token("base.color.opacity")));
+    }
+  }
+
+  // Цвета границ по сторонам (border-t-red-500, border-b-blue-300, etc.)
+  @each $dirKey, $dirValue in $directions {
+    @if $dirKey != "" {
+      @each $subKey in $dirValue {
+        @if $subKey != "" {
+          @each $name, $value in $palette-rgb {
+            &-#{$dirKey}-#{"" + $name} {
+              border-#{$subKey}-color: token("base.color.border");
+              @include set-token("base.color.border", rgba($value, token("base.color.opacity")));
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &-transparent {
+    border-color: token("base.color.transparent");
+  }
+
+  &-dashed {
+    border-style: dashed;
+  }
+}

package/src/css/modules/border/divider.scss

@@ -0,0 +1,38 @@
+@use "sass:list";
+@import '../../utils/token';
+@import '../../variables.scss';
+
+.divider {
+  &-x {
+    width: 100%;
+    height: 1px;
+    background-color: #000;
+    margin: 20px 0;
+
+    &--small {
+      margin: 10px 0;
+    }
+    &--medium {
+      margin: 20px 0;
+    }
+    &--large {
+      margin: 30px 0;
+    }
+  }
+  &-y {
+    width: 1px;
+    height: 100%;
+    background-color: #000;
+    margin: 20px 0;
+
+    &--small {
+      margin: 10px 0;
+    }
+    &--medium {
+      margin: 20px 0;
+    }
+    &--large {
+      margin: 30px 0;
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+@import './border.scss';
+@import './rounded.scss';
+@import './divider.scss';

package/src/css/modules/border/rounded.scss

@@ -0,0 +1,70 @@
+@import '../../utils/token';
+@import '../../variables.scss';
+
+// @function rounded-position($position) {
+//   @return (
+//     t: "border-top-right-radius: #{$position}; border-top-left-radius: #{$position}",
+//     r: "border-top-right-radius: #{$position}; border-bottom-right-radius: #{$position}",
+//     b: "border-bottom-right-radius: #{$position}; border-bottom-left-radius: #{$position}",
+//     l: "border-top-left-radius: #{$position}; border-bottom-left-radius: #{$position}",
+
+//     tr: "border-top-right-radius: #{$position}",
+//     tl: "border-top-left-radius: #{$position}",
+//     br: "border-bottom-right-radius: #{$position}",
+//     bl: "border-bottom-left-radius: #{$position}"
+//   );
+// }
+
+.rounded {
+  @each $key, $value in $radiuses {
+    &-#{$key} {
+      @if $key == "base" {
+        border-radius: $value;
+      } @else {
+        border-radius: $value;
+      }
+    }
+
+    &-t-#{$key} {
+      border-top-right-radius: #{$value};
+      border-top-left-radius: #{$value};
+    }
+    
+    &-r-#{$key} {
+      border-top-right-radius: #{$value};
+      border-bottom-right-radius: #{$value};
+    }
+
+    &-b-#{$key} {
+      border-bottom-right-radius: #{$value};
+      border-bottom-left-radius: #{$value};
+    }
+
+    &-l-#{$key} {
+      border-top-left-radius: #{$value};
+      border-bottom-left-radius: #{$value};
+    }
+
+    &-tr-#{$key} {
+      border-top-right-radius: #{$value};
+    }
+
+    &-tl-#{$key} {
+      border-top-left-radius: #{$value};
+    }
+
+    &-br-#{$key} {
+      border-bottom-right-radius: #{$value};
+    }
+
+    &-bl-#{$key} {
+      border-bottom-left-radius: #{$value};
+    }
+  }
+  &-none {
+    border-radius: 0;
+  }
+}
+.circle {
+  border-radius: token("base.border.rounded");
+}

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

@@ -0,0 +1,33 @@
+@import '../../utils/token';
+@import '../../variables.scss';
+
+.cursor {
+  &-pointer {
+    cursor: token("base.cursor.pointer");
+  }
+
+  &-move {
+    cursor: token("base.cursor.move");
+  }
+
+  &-default {
+    cursor: token("base.cursor.default");
+  }
+
+  &-disabled {
+    cursor: token("base.cursor.disabled");
+  }
+
+  &-resize-x {
+    cursor: token("base.cursor.resize.ew");
+  }
+  &-resize-y {
+    cursor: token("base.cursor.resize.ns");
+  }
+  &-wait {
+    cursor: token("base.cursor.wait");
+  }
+  &-help {
+    cursor: token("base.cursor.help");
+  }
+}

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

@@ -0,0 +1,19 @@
+
+.inline       { display: inline }
+.block        { display: block }
+.inline-block { display: inline-block }
+.table        { display: table }
+.table-cell   { display: table-cell }
+
+.overflow-hidden { overflow: hidden }
+.overflow-y-hidden { overflow-y: hidden }
+.overflow-x-hidden { overflow-x: hidden }
+
+.overflow-scroll { overflow: scroll }
+.overflow-y-scroll { overflow-y: scroll }
+.overflow-x-scroll { overflow-x: scroll }
+
+.overflow-auto   { overflow: auto }
+.overflow-y-auto   { overflow-y: auto }
+.overflow-x-auto   { overflow-x: auto }
+

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

@@ -0,0 +1,35 @@
+@import '../../utils/token';
+@import '../../variables.scss';
+
+.opacity {
+  @each $step in $opacities {
+    &-#{$step} {
+      opacity: calc($step / 100);
+    }
+  }
+}
+
+.hover\:opacity {
+  @each $step in $opacities {
+    &-#{$step} {
+      &:hover {
+        opacity: calc($step / 100);
+      }
+    }
+  }
+}
+
+.required::after {
+  position: absolute;
+  margin-left: token("base.position.1");
+  color: token("base.color.variant.danger");
+  content: "*";
+}
+
+.rotate {
+  @each $key, $value in $rotations {
+    &-#{$key} {
+      transform: rotate(calc($value * 1deg));
+    }
+  }
+}

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

@@ -0,0 +1,34 @@
+@import '../../utils/token';
+@import '../../variables.scss';
+
+.grayscale {
+  filter: grayscale(100%);
+  -webkit-filter: grayscale(100%);
+  -moz-filter: grayscale(100%);
+  -ms-filter: grayscale(100%);
+  -o-filter: grayscale(100%);
+
+  &-0 {
+    filter: grayscale(0%);
+    -webkit-filter: grayscale(0%);
+    -moz-filter: grayscale(0%);
+    -ms-filter: grayscale(0%);
+    -o-filter: grayscale(0%);
+  }
+}
+
+.no-filter {
+  filter: none;
+  -webkit-filter: none;
+  -moz-filter: none;
+  -ms-filter: none;
+  -o-filter: none;
+
+  &:hover {
+    filter: none;
+    -webkit-filter: none;
+    -moz-filter: none;
+    -ms-filter: none;
+    -o-filter: none;
+  }
+}

package/src/css/modules/flexbox/flex.scss

@@ -0,0 +1,132 @@
+@import "../../variables";
+
+$align-types: (
+  start: flex-start,
+  end: flex-end,
+  center: center,
+  baseline: baseline,
+  stretch: stretch
+);
+
+$content-types: (
+  start: flex-start,
+  end: flex-end,
+  center: center,
+  between: space-between,
+  around: space-around
+);
+
+.flex {
+  display: flex;
+
+  &-column, &-col {
+    flex-direction: column;
+
+    &-reverse {
+      flex-direction: column-reverse;
+    }
+  }
+
+  &-row {
+    flex-direction: row;
+
+    &-reverse {
+      flex-direction: row-reverse;
+    }
+  }
+
+  &-wrap {
+    flex-wrap: wrap;
+  }
+
+  &-nowrap {
+    flex-wrap: nowrap;
+  }
+
+  &-0 {
+    flex: 0 0 auto;
+  }
+
+  &-auto {
+    flex: 1 1 auto;
+    min-width: 0; /* 1 */
+    min-height: 0; /* 1 */
+  }
+
+  &-1 {
+    flex: 1;
+  }
+
+  &-none {
+    flex: none;
+  }
+}
+
+.items {
+  @each $key, $value in $align-types {
+    &-#{$key} {
+      align-items: $value;
+    }
+  }
+}
+
+.self {
+  @each $key, $value in $align-types {
+    &-#{$key} {
+      align-self: $value;
+    }
+  }
+}
+
+.justify {
+  @each $key, $value in $content-types {
+    &-#{$key} {
+      justify-content: $value;
+    }
+  }
+
+  &-evenly {
+    justify-content: space-evenly;
+  }
+}
+
+.content {
+  @each $key, $value in $align-types {
+    &-#{$key} {
+      align-content: $value;
+    }
+  }
+
+  &-stretch {
+    align-content: stretch;
+  }
+}
+
+.shrink {
+  flex-shrink: 1;
+
+  @for $i from 0 through 3 {
+    &-#{$i} {
+      flex-shrink: $i;
+    }
+  }
+}
+
+.grow {
+  flex-grow: 1;
+
+  @for $i from 0 through 3 {
+    &-#{$i} {
+      flex-grow: $i;
+    }
+  }
+}
+
+.order {
+  @each $key, $value in $flex-orders {
+    &-#{$key} {
+      order: $value;
+    }
+  }
+}
+

package/src/css/modules/flexbox/gap.scss

@@ -0,0 +1,15 @@
+@import "../../variables";
+
+.gap {
+  @each $key, $value in $steps {
+    &-#{$key} {
+      gap: $value;
+    }
+    &-y-#{$key} {
+      row-gap: $value;
+    }
+    &-x-#{$key} {
+      column-gap: $value;
+    }
+  }
+}

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

@@ -0,0 +1,2 @@
+@import './flex.scss';
+@import './gap.scss';

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

@@ -0,0 +1,94 @@
+@import "../../variables";
+
+$grid-template-columns: token("base.grid.template.columns") !default;
+$grid-template-rows: token("base.grid.template.rows") !default;
+$grid-template-colspan: token("base.grid.template.colspan") !default;
+
+.grid {
+  display: grid;
+}
+
+.grid-container {
+  container-type: inline-size;
+  container-name: grid;
+}
+
+.grid-columns {
+  grid-template-columns: $grid-template-columns;
+
+  &--1fr-auto {
+    grid-template-columns: 1fr auto;
+  }
+
+  &--auto-1fr {
+    grid-template-columns: auto 1fr;
+  }
+
+  &--1fr-1fr {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  &--1fr-2fr {
+    grid-template-columns: 1fr 2fr;
+  }
+
+  &--1fr-1fr-1fr {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  $columns: ();
+  @for $i from 1 through 10 {
+    $columns: append($columns, $i);
+  }
+  $columns: append($columns, auto-fill);
+
+  @each $size, $sizeValue in $sizes {
+    @each $n, $nValue in $columns {
+      &--#{$n}-#{$size} {
+        grid-template-columns: repeat($n, minmax($sizeValue, 1fr));
+        @container grid (max-width: 1800px) {
+          // grid-template-columns: repeat(auto-fill, minmax($sizeValue, 1fr));
+          grid-template-columns: 1fr;
+        }
+      }
+    }
+  }
+}
+
+.grid-rows {
+  grid-template-rows: $grid-template-rows;
+
+  &--auto-1fr-auto {
+    grid-template-rows: auto 1fr auto;
+  }
+
+  &--1fr-auto {
+    grid-template-rows: 1fr auto;
+  }
+
+  &--auto-1fr {
+    grid-template-rows: auto 1fr;
+  }
+
+  &--1fr-1fr-1fr {
+    grid-template-rows: repeat(3, 1fr);
+  }
+
+  &--1fr-1fr {
+    grid-template-rows: 1fr 1fr;
+  }
+}
+
+.grid-col-span {
+  &-1 {
+    grid-column: span 1;
+  }
+
+  &-2 {
+    grid-column: span 2;
+  }
+
+  &-3 {
+    grid-column: span 3;
+  }
+}

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

@@ -0,0 +1,27 @@
+@import "../../variables";
+
+.hide {
+  display: none !important;
+}
+
+@each $breakpoint, $width in $screens {
+  @if $breakpoint == 'xs' {
+    // Пропускаем `xs`, так как это начальный брейкпоинт.
+  } @else {
+    // Получаем предыдущий брейкпоинт в списке.
+    $prev-breakpoint: nth(nth(map-keys($screens), index(map-keys($screens), $breakpoint) - 1), 1);
+    $prev-width: map-get($screens, $prev-breakpoint);
+
+    // Создаем custom media query для текущего брейкпоинта.
+    @media (min-width: $prev-width) and (max-width: calc($width - 1px)) {
+      .hide-#{$breakpoint} { display: none !important }
+    }
+  }
+}
+
+// Генерация custom media для последнего брейкпоинта без max-width.
+$last-breakpoint: nth(map-keys($screens), length(map-keys($screens)));
+$last-width: map-get($screens, $last-breakpoint);
+@media (min-width: $last-width) {
+  .hide-full { display: none !important }
+}

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

@@ -0,0 +1,28 @@
+
+.pointer-events {
+  &-none {
+    pointer-events: none;
+  }
+
+  &-auto {
+    pointer-events: auto;
+  }
+}
+
+.user-select {
+  &-none {
+    user-select: none;
+  }
+
+  &-auto {
+    user-select: auto;
+  }
+
+  &-all {
+    user-select: all;
+  }
+
+  &-text {
+    user-select: text;
+  }
+}

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

@@ -0,0 +1,63 @@
+@use "sass:list";
+@import '../../utils/token';
+@import '../../variables.scss';
+
+.outline {
+  &-none {
+    outline: none;
+  }
+
+  // Только ширина
+  @each $size, $sizeValue in $sizes-short {
+    &-#{$size} {
+      outline-width: $sizeValue;
+      outline-style: solid;
+    }
+  }
+
+  // Только цвет
+  @each $color, $value in $palette-rgb {
+    &-#{"#{$color}"} {
+      outline-color: token("base.color.outline");
+      @include set-token("base.color.outline", rgba($value, token("base.color.opacity")));
+    }
+  }
+
+  &-style {
+    &--solid {
+      outline-style: solid;
+    }
+
+    &--dotted {
+      outline-style: dotted;
+    }
+
+    &--dashed {
+      outline-style: dashed;
+    }
+
+    &--groove {
+      outline-style: groove;
+    }
+
+    &--ridge {
+      outline-style: ridge;
+    }
+
+    &--inset {
+      outline-style: inset;
+    }
+
+    &--outset {
+      outline-style: outset;
+    }
+  }
+}
+
+@for $offsetStep from -10 through 10 {
+  $modifier: if($offsetStep < 0, "\-outline-offset", "outline-offset");
+  $value: abs($offsetStep);
+  .#{$modifier}-#{$value} {
+    outline-offset: #{$offsetStep}px;
+  }
+}