@central-design-system/components 4.0.0-alpha.4 → 4.0.0-alpha.5

package/src/components/CdsField/CdsField.scss

@@ -0,0 +1,209 @@
+@use 'sass:map';
+@use '../../styles/tools';
+@use './styles/CdsField.variables' as *;
+@use './styles/CdsField.mixins' as *;
+
+@include tools.layer('components') {
+  .cds-field {
+    position: relative;
+    display: grid;
+    flex: 1 0;
+    grid-area: control;
+    grid-template-areas: "prepend-inner field loader clear append-inner";
+    grid-template-columns: min-content minmax(0, 1fr) min-content min-content;
+    max-width: 100%;
+    contain: layout;
+    background-color: map.get($field-control-color, 'default', 'background');
+    border: $field-input-border-size map.get($field-control-color, 'default', 'border');
+    border-radius: $field-input-border-radius;
+    transition: $field-input-transition;
+    transition-property: box-shadow, opacity, border-color, width;
+
+    &--size {
+      @each $size, $_ in $field-control-sizes {
+        &-#{$size} {
+          @include use-field-size($size);
+        }
+      }
+    }
+
+    &:where(:hover) {
+      --cds-shadow-border-size: #{$field-input-shadow-border-size};
+      --cds-shadow-border-opacity: #{$field-input-shadow-border-opacity};
+
+      @include tools.cds-shadow-border(map.get($field-control-color, 'default', 'border'));
+    }
+
+    &--focused {
+      --cds-shadow-border-size: #{$field-input-shadow-border-size};
+      --cds-shadow-border-opacity: #{$field-input-shadow-border-opacity};
+
+      @include tools.cds-shadow-border(map.get($field-control-color, 'focus', 'border'));
+    }
+
+    &--error:not(.cds-field--disabled) {
+      color: map.get($field-control-color, 'error', 'content');
+
+      @include tools.cds-shadow-border(map.get($field-control-color, 'error', 'border'));
+
+      .cds-field__input {
+        @include tools.cds-form-placeholder(map.get($field-control-color, 'error', 'content'));
+      }
+    }
+
+    &--readonly {
+      pointer-events: none;
+    }
+
+    &--disabled {
+      color: map.get($field-control-color, 'disabled', 'content');
+      pointer-events: none;
+      background-color: map.get($field-control-color, 'disabled', 'background');
+      border-color: map.get($field-control-color, 'disabled', 'border');
+      box-shadow: none;
+
+      .cds-field__input {
+        color: map.get($field-control-color, 'disabled', 'content');
+        cursor: not-allowed;
+
+        @include tools.cds-form-placeholder(map.get($field-control-color, 'disabled', 'content'));
+      }
+    }
+
+    &__field {
+      position: relative;
+      display: flex;
+      flex: 1 0;
+      grid-area: field;
+      align-items: center;
+    }
+  }
+
+  .cds-field__input {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: $field-input-row-gap;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+    padding-block: var(--cds-field-padding-top) var(--cds-field-padding-bottom);
+    padding-inline: var(--cds-field-padding-start) var(--cds-field-padding-end);
+    color: inherit;
+
+    $root: &;
+
+    input {
+      letter-spacing: inherit;
+      appearance: none;
+      outline: none;
+    }
+
+    @at-root :where(& input, input#{&}, textarea#{&}, select#{&}) {
+      padding: 0;
+      margin: 0;
+      background-color: transparent;
+      border-style: none;
+
+      @include tools.cds-form-placeholder(map.get($field-control-color, 'default', 'placeholder'));
+
+      .cds-field--has-background & {
+        @include tools.cds-form-placeholder(inherit);
+      }
+    }
+  }
+
+  .cds-field__prepend-inner {
+    grid-area: prepend-inner;
+  }
+
+  .cds-field__append-inner {
+    grid-area: append-inner;
+  }
+
+  .cds-field__clearable {
+    grid-area: clear;
+    margin-inline: 0;
+    overflow: hidden;
+    cursor: pointer;
+    opacity: 0;
+    transition: $field-input-transition;
+    transition-property: opacity, transform, width;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition-property: opacity;
+    }
+
+    .cds-field--appended & {
+        margin-inline-end: $field-input-clearable-margin;
+    }
+
+    .cds-field--focused &,
+    .cds-field--persistent-clearable & {
+      opacity: 1;
+    }
+
+    @media (hover: hover) {
+      .v-field:hover & {
+        opacity: 1;
+      }
+    }
+
+    @media (hover: none) {
+      opacity: 1;
+    }
+  }
+
+  .cds-field__loader {
+    position: absolute;
+    top: calc(100% - 1px);
+    right: 0;
+    left: 0;
+    width: 100%;
+    overflow: hidden;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: inherit;
+    border-bottom-left-radius: inherit;
+  }
+
+  .cds-field__loader-circle {
+    display: flex;
+    grid-area: loader;
+    align-items: center;
+    justify-content: center;
+    margin-inline: $field-input-clearable-margin;
+    transition: $field-input-transition;
+  }
+
+  .cds-field__prepend-inner,
+  .cds-field__append-inner,
+  .cds-field__clearable {
+    display: flex;
+    align-items: center;
+
+    .cds-field--center-affix & {
+      align-items: center;
+      padding-top: 0;
+    }
+  }
+
+  .cds-field--reverse {
+    .cds-field__field,
+    .cds-field__input {
+      flex-direction: row-reverse;
+    }
+
+    .cds-field__input {
+      text-align: end;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .cds-field {
+      .cds-progress-bar {
+        border: none
+      }
+    }
+  }
+}

package/src/components/CdsField/styles/_CdsField.mixins.scss

@@ -0,0 +1,39 @@
+@use 'sass:map';
+@use '../../../styles/tools';
+@use './CdsField.variables' as *;
+
+@mixin use-field-size($variant: 'md') {
+  $variant-map: map.get($field-control-sizes, $variant);
+
+  @if $variant-map {
+    --cds-field-padding-start: #{map.get($variant-map, 'padding-inline')};
+    --cds-field-padding-end: #{map.get($variant-map, 'padding-inline')};
+    --cds-field-padding-top: #{map.get($variant-map, 'padding-block')};
+    --cds-field-padding-bottom: #{map.get($variant-map, 'padding-block')};
+
+    &.cds-field--prepended {
+      --cds-field-padding-start: #{map.get($variant-map, 'affixed-inner-padding')};
+
+      padding-inline-start: #{map.get($variant-map, 'affixed-padding')};
+    }
+
+    &.cds-field--appended {
+      --cds-field-padding-end: #{map.get($variant-map, 'affixed-inner-padding')};
+
+      padding-inline-end: #{map.get($variant-map, 'affixed-padding')};
+    }
+
+    .cds-field__input {
+      min-height: map.get($variant-map, 'min-height');
+    }
+
+    .cds-field__loader-circle {
+      .cds-progress-circle {
+        width: #{map.get($variant-map, 'loader-circle-size')};
+        height: #{map.get($variant-map, 'loader-circle-size')};
+      }
+    }
+  } @else {
+    @warn "Size #{$variant} is not defined in the $field-control-sizes map.";
+  }
+}

package/src/components/CdsField/styles/_CdsField.variables.scss

@@ -0,0 +1,84 @@
+@use 'sass:map';
+@use '../../../styles/tools';
+@use '../../../styles/settings';
+
+// ======================= Variables =======================
+$field-input-border-size: var(--cds-border-100) solid !default;
+$field-input-border-radius: var(--cds-border-radius-200) !default;
+$field-input-shadow-border-size: 2px;
+$field-input-shadow-border-opacity: 0.2;
+$field-input-row-gap: var(--cds-spacing-50) !default;
+$field-input-clearable-margin: var(--cds-spacing-200) !default;
+$field-input-loader-circle-margin: var(--cds-spacing-200) !default;
+$field-input-transition: tools.$cds-duration-fast + ms settings.$standard-easing !default;
+
+
+// ======================= Colors =======================
+$field-control-color: (
+  default: (
+    'background': rgb(var(--cds-color-fill-primary)),
+    'content': rgb(var(--cds-color-content-primary)),
+    'border': rgb(var(--cds-color-line-primary)),
+    'placeholder': rgb(var(--cds-color-content-tertiary)),
+  ),
+  hover: (
+    'border': rgb(var(--cds-color-line-primary-hover))
+  ),
+  focus: (
+    'border': rgb(var(--cds-color-line-focus))
+  ),
+  error: (
+    'border': rgb(var(--cds-color-status-danger-line)),
+    'content': rgb(var(--cds-color-status-danger-content)),
+    'placeholder': rgb(var(--cds-color-status-danger-content)),
+  ),
+  disabled: (
+    'background': rgb(var(--cds-color-fill-disable)),
+    'border': rgb(var(--cds-color-line-disable)),
+    'content': rgb(var(--cds-color-content-disable))
+  ),
+) !default;
+
+// ======================= Sizes =======================
+$field-control-sizes: (
+  xs: (
+    'min-height': calc(tools.to-rem(24px) - var(--cds-border-200)),
+    'padding-inline': var(--cds-spacing-200),
+    'padding-block': 0,
+    'affixed-padding': var(--cds-spacing-200),
+    'affixed-inner-padding': var(--cds-spacing-100),
+    'loader-circle-size': tools.to-rem(12px),
+  ),
+  sm: (
+    'min-height': calc(tools.to-rem(28px) - var(--cds-border-200)),
+    'padding-inline': var(--cds-spacing-200),
+    'padding-block': 0,
+    'affixed-padding': var(--cds-spacing-200),
+    'affixed-inner-padding': var(--cds-spacing-100),
+    'loader-circle-size': tools.to-rem(14px),
+  ),
+  md: (
+    'min-height': calc(tools.to-rem(32px) - var(--cds-border-200)),
+    'padding-inline': var(--cds-spacing-300),
+    'padding-block': var(--cds-spacing-100),
+    'affixed-padding': var(--cds-spacing-300),
+    'affixed-inner-padding': var(--cds-spacing-200),
+    'loader-circle-size': tools.to-rem(16px),
+  ),
+  lg: (
+    'min-height': calc(tools.to-rem(36px) - var(--cds-border-200)),
+    'padding-inline': var(--cds-spacing-300),
+    'padding-block': 0,
+    'affixed-padding': var(--cds-spacing-300),
+    'affixed-inner-padding': var(--cds-spacing-200),
+    'loader-circle-size': tools.to-rem(20px),
+  ),
+  xl: (
+    'min-height': calc(tools.to-rem(40px) - var(--cds-border-200)),
+    'padding-inline': var(--cds-spacing-400),
+    'padding-block': 0,
+    'affixed-padding': var(--cds-spacing-300),
+    'affixed-inner-padding': var(--cds-spacing-200),
+    'loader-circle-size': tools.to-rem(24px),
+  )
+) !default;

package/src/components/CdsFileInput/CdsFileInput.scss

@@ -0,0 +1,40 @@
+@use '../../styles/tools';
+@use './styles/CdsFileInput.variables' as *;
+
+@include tools.layer('components') {
+  .cds-file-input {
+    &--hide.cds-input {
+      .cds-field,
+      .cds-input__control,
+      .cds-input__details {
+        display: none;
+      }
+
+      .cds-input__prepend {
+        margin: 0 auto;
+      }
+    }
+
+    .cds-field__input {
+      overflow-wrap: break-word;
+    }
+
+    &__placeholder {
+      color: $file-input-placeholder-color;
+    }
+
+    input[type='file'] {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      z-index: $file-input-native-z-index;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+    }
+
+    &--dragging input[type='file'] {
+      z-index: $file-input-native-dragging-z-index;
+    }
+  }
+}

package/src/components/CdsFileInput/styles/_CdsFileInput.variables.scss

@@ -0,0 +1,5 @@
+@use '../../../styles/settings';
+
+$file-input-native-z-index: 0 !default;
+$file-input-native-dragging-z-index: 1 !default;
+$file-input-placeholder-color: rgb(var(--cds-color-content-tertiary)) !default;

package/src/components/CdsFileUpload/CdsFileUpload.scss

@@ -0,0 +1,173 @@
+@use '../../styles/tools';
+@use './styles/CdsFileUpload.variables' as *;
+
+@include tools.layer('components') {
+  .cds-file-upload {
+    .cds-input__control {
+      flex-direction: column;
+    }
+  }
+
+  // `.cds-surface` объявлен в этом же слое и задаёт `display: block`. Специфичность
+  // равная, поэтому побеждает порядок в источнике — усиливаем селектор до `0,2,0`.
+  .cds-file-upload-dropzone.cds-surface {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: $file-upload-padding;
+    border-color: $file-upload-border-color;
+    border-style: $file-upload-border-style;
+    border-width: $file-upload-border-width;
+    border-radius: $file-upload-border-radius;
+
+    &.cds-file-upload-dropzone--size-md {
+      padding: $file-upload-padding-md;
+    }
+
+    &.cds-file-upload-dropzone--size-sm {
+      flex-direction: row;
+      gap: $file-upload-gap-sm;
+      padding: $file-upload-padding-sm;
+    }
+  }
+
+  .cds-file-upload-dropzone {
+    &--clickable:not(&--readonly, &--disabled) {
+      cursor: pointer;
+
+      &:hover {
+        border-color: $file-upload-border-color-hover;
+      }
+    }
+
+    &--has-files:not(&--clickable),
+    &--readonly {
+      cursor: default;
+    }
+
+    &--disabled {
+      pointer-events: none;
+      opacity: $file-upload-disabled-opacity;
+    }
+
+    // При перетаскивании дочерние элементы не должны перехватывать dragleave.
+    &--dragging > * {
+      pointer-events: none;
+    }
+
+    &--error {
+      border-color: $file-upload-border-color-error;
+    }
+
+    &--inset {
+      padding: $file-upload-inset-padding;
+    }
+
+    .cds-overlay__scrim {
+      pointer-events: none;
+    }
+
+    // Нативный input скрыт, но остаётся в потоке для доступности и form-submit.
+    input[type='file'] {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: $file-upload-native-z-index;
+      cursor: pointer;
+      opacity: 0;
+    }
+  }
+
+  .cds-file-upload-dropzone__title {
+    color: $file-upload-title-color;
+    text-align: center;
+
+    @include tools.cds-text-bold-400;
+  }
+
+  .cds-file-upload-dropzone__subtitle {
+    margin-top: $file-upload-subtitle-margin-top;
+    color: $file-upload-subtitle-color;
+    text-align: center;
+  }
+
+  .cds-file-upload-dropzone__icon {
+    display: flex;
+    margin-bottom: $file-upload-icon-margin-bottom;
+    color: $file-upload-icon-color;
+
+    // `CdsIcon` по умолчанию получает класс размера (`md` = 16px), поэтому
+    // переопределяем его более специфичным селектором, а не через `font-size` родителя.
+    .cds-icon {
+      width: $file-upload-icon-size;
+      height: $file-upload-icon-size;
+      font-size: $file-upload-icon-size;
+    }
+
+    .cds-file-upload-dropzone--size-md & {
+      .cds-icon {
+        width: $file-upload-icon-size-md;
+        height: $file-upload-icon-size-md;
+        font-size: $file-upload-icon-size-md;
+      }
+    }
+
+    .cds-file-upload-dropzone--size-sm & {
+      margin-bottom: 0;
+
+      .cds-icon {
+        width: $file-upload-icon-size-sm;
+        height: $file-upload-icon-size-sm;
+        font-size: $file-upload-icon-size-sm;
+      }
+    }
+  }
+
+  .cds-file-upload-dropzone__divider {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    margin: $file-upload-divider-margin;
+
+    .cds-divider__wrapper {
+      max-width: 100%;
+    }
+  }
+
+  .cds-file-upload-dropzone__inset {
+    width: 100%;
+  }
+
+  .cds-file-upload-dropzone__inset-action {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    padding: $file-upload-inset-action-padding;
+  }
+
+  .cds-file-upload-list {
+    margin: $file-upload-list-margin;
+  }
+
+  .cds-file-upload-item {
+    &:not(:first-child) {
+      margin-top: $file-upload-item-gap;
+    }
+  }
+
+  .cds-file-upload__loader {
+    position: absolute;
+    inset: 0;
+    z-index: $file-upload-loader-z-index;
+    overflow: hidden;
+    pointer-events: none;
+    border-radius: inherit;
+
+    > * {
+      pointer-events: auto;
+    }
+  }
+}

package/src/components/CdsFileUpload/styles/_CdsFileUpload.variables.scss

@@ -0,0 +1,40 @@
+@use '../../../styles/settings';
+
+// Зона загрузки
+$file-upload-padding: var(--cds-spacing-800) var(--cds-spacing-400) !default;
+$file-upload-padding-md: var(--cds-spacing-600) var(--cds-spacing-400) !default;
+$file-upload-padding-sm: var(--cds-spacing-500) var(--cds-spacing-400) !default;
+$file-upload-inset-padding: var(--cds-spacing-400) !default;
+$file-upload-gap-sm: var(--cds-spacing-400) !default;
+$file-upload-border-radius: var(--cds-border-radius-200) !default;
+$file-upload-border-width: var(--cds-border-200) !default;
+$file-upload-border-style: dashed !default;
+$file-upload-border-color: rgb(var(--cds-color-line-primary)) !default;
+$file-upload-border-color-hover: rgb(var(--cds-color-line-primary-hover)) !default;
+$file-upload-border-color-error: rgb(var(--cds-color-status-danger-line)) !default;
+$file-upload-disabled-opacity: 0.5 !default;
+
+// Заголовок и подзаголовок
+$file-upload-title-color: rgb(var(--cds-color-content-primary)) !default;
+$file-upload-subtitle-color: rgb(var(--cds-color-content-secondary)) !default;
+$file-upload-subtitle-margin-top: var(--cds-spacing-200) !default;
+
+// Иконка
+$file-upload-icon-size: var(--cds-spacing-800) !default;
+$file-upload-icon-size-md: var(--cds-spacing-700) !default;
+$file-upload-icon-size-sm: var(--cds-spacing-600) !default;
+$file-upload-icon-color: rgb(var(--cds-color-content-secondary)) !default;
+$file-upload-icon-margin-bottom: var(--cds-spacing-400) !default;
+$file-upload-icon-margin-bottom-md: var(--cds-spacing-200) !default;
+
+// Разделитель
+$file-upload-divider-margin: var(--cds-spacing-600) 0 !default;
+
+// Список файлов
+$file-upload-list-margin: var(--cds-spacing-400) 0 !default;
+$file-upload-item-gap: var(--cds-spacing-200) !default;
+$file-upload-inset-action-padding: var(--cds-spacing-200) 0 !default;
+
+// Загрузка
+$file-upload-loader-z-index: 1 !default;
+$file-upload-native-z-index: -1 !default;

package/src/components/CdsFooter/CdsFooter.scss

@@ -0,0 +1,36 @@
+@use '../../styles/tools';
+@use './styles/CdsFooter.variables' as *;
+
+@include tools.layer('components') {
+  .cds-footer {
+    position: relative;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: tools.z('cds-layer-extra-high');
+    color: $footer-color;
+    background: $footer-background;
+
+    @include tools.cds-animation-motion(tools.$cds-duration-fast, 'ease-in-out', 'accent');
+
+    &--absolute {
+      position: absolute;
+    }
+
+    &--fixed {
+      position: fixed;
+    }
+
+    &--hidden {
+      transform: translateY(110%);
+    }
+
+    &--bordered {
+      border-top: $footer-border-size solid $footer-border-color;
+    }
+
+    &--elevated {
+      @include tools.cds-shadow-top-100;
+    }
+  }
+}

package/src/components/CdsFooter/styles/_CdsFooter.variables.scss

@@ -0,0 +1,4 @@
+$footer-background: rgb(var(--cds-color-surface-elevated)) !default;
+$footer-color: rgb(var(--cds-color-content-primary)) !default;
+$footer-border-color: rgb(var(--cds-color-line-tertiary)) !default;
+$footer-border-size: var(--cds-border-100) !default;

package/src/components/CdsForm/CdsForm.scss

@@ -0,0 +1,24 @@
+@use '../../styles/tools';
+@use './styles/CdsForm.variables' as *;
+
+@include tools.layer('components') {
+  .cds-form {
+    display: block;
+
+    &__label {
+      display: block;
+      padding: 0;
+      padding-bottom: $form-label-gap;
+
+      @include tools.cds-text-bold-400;
+    }
+
+    &__description {
+      display: block;
+      margin-bottom: $form-description-gap;
+      color: $form-description-color;
+
+      @include tools.cds-text-regular-100;
+    }
+  }
+}

package/src/components/CdsForm/styles/_CdsForm.variables.scss

@@ -0,0 +1,5 @@
+@use '../../../styles/tools';
+
+$form-label-gap: var(--cds-spacing-100) !default;
+$form-description-gap: var(--cds-spacing-200) !default;
+$form-description-color: rgb(var(--cds-color-content-secondary)) !default;