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

package/src/components/CdsTable/styles/_CdsTable.mixins.scss

@@ -0,0 +1,86 @@
+@use './CdsTable.variables' as *;
+
+@mixin cell-fixed-ping($side: 'left') {
+  th.cds-table__cell--fix-#{$side} {
+    background: $table-header-bg-fixed;
+  }
+
+  td.cds-table__cell--fix-#{$side} {
+    background: $table-bg-fixed;
+  }
+
+  .cds-table__row--selected {
+    > td.cds-table__cell--fix-#{$side} {
+      background: $table-selected-cell-bg-fixed;
+    }
+  }
+
+  .cds-table__row--warning {
+    > td.cds-table__cell--fix-#{$side} {
+      background: $table-warning-cell-fixed-bg !important;
+    }
+  }
+
+  .cds-table__row--error {
+    > td.cds-table__cell--fix-#{$side} {
+      background: $table-error-cell-fixed-bg !important;
+    }
+  }
+
+  .cds-table__row--striped,
+  .cds-table--striped {
+    > td.cds-table__cell--fix-#{$side} {
+      background: $table-stipe-cell-fixed-bg !important;
+    }
+  }
+}
+
+@mixin cell-fixed-hover-ping($side: 'left') {
+  .cds-table__row:hover > td,
+  > td.cds-table__cell--row-hover {
+    &.cds-table__cell--fix-#{$side} {
+      background: $table-cell-hover-bg-fixed;
+    }
+  }
+
+  .cds-table__row--striped,
+  .cds-table--striped {
+    &:hover {
+      > td.cds-table__cell--row-hover {
+        &.cds-table__cell--fix-#{$side} {
+          background: $table-stipe-cell-fixed-bg !important;
+        }
+      }
+    }
+  }
+
+  .cds-table__row--selected {
+    &:hover {
+      > td.cds-table__cell--row-hover {
+        &.cds-table__cell--fix-#{$side} {
+          background: $table-selected-cell-bg-fixed !important;
+        }
+      }
+    }
+  }
+
+  .cds-table__row--error {
+    &:hover {
+      > td.cds-table__cell--row-hover {
+        &.cds-table__cell--fix-#{$side} {
+          background: $table-error-cell-fixed-bg !important;
+        }
+      }
+    }
+  }
+
+  .cds-table__row--warning {
+    &:hover {
+      > td.cds-table__cell--row-hover {
+        &.cds-table__cell--fix-#{$side} {
+          background: $table-warning-cell-fixed-bg !important;
+        }
+      }
+    }
+  }
+}

package/src/components/CdsTable/styles/_CdsTable.variables.scss

@@ -0,0 +1,82 @@
+@use '../../../styles/tools';
+
+$table-breakpoint-md: 1056px !default;
+
+// Table
+$table-bg: rgb(var(--cds-color-fill-primary), 0.4) !default;
+$table-bg-nested: rgb(var(--cds-color-fill-secondary), 0.5) !default;
+$table-bg-fixed: rgb(var(--cds-color-fill-primary)) !default;
+$table-color: rgb(var(--cds-color-content-primary)) !default;
+$table-header-color: rgb(var(--cds-color-content-primary)) !default;
+$table-header-bg: rgb(var(--cds-color-fill-secondary), 0.4) !default;
+$table-header-bg-fixed: rgb(var(--cds-color-fill-secondary)) !default;
+$table-slot-paddings: var(--cds-spacing-400) var(--cds-spacing-300) !default;
+$table-page-size-text-color: rgb(var(--cds-color-content-tertiary)) !default;
+$table-cell-bg: rgb(var(--cds-color-fill-primary), 0.3) !default;
+$table-stipe-cell-bg: rgb(var(--cds-color-fill-secondary), 0.2) !default;
+$table-stipe-cell-fixed-bg: rgb(var(--cds-color-fill-secondary)) !default;
+$table-warning-cell-bg: rgb(var(--cds-color-status-warning-fill), 0.5) !default;
+$table-warning-cell-fixed-bg: rgb(var(--cds-color-status-warning-fill)) !default;
+$table-error-cell-bg: rgb(var(--cds-color-status-danger-fill), 0.5) !default;
+$table-error-cell-fixed-bg: rgb(var(--cds-color-status-danger-fill)) !default;
+$table-th-padding: var(--cds-spacing-200) var(--cds-spacing-300) !default;
+$table-td-padding: calc(var(--cds-spacing-300) + var(--cds-spacing-50)) !default;
+$table-th-height: tools.to-rem(42px) !default;
+$table-td-height: tools.to-rem(49px) !default;
+$table-selected-cell-width: tools.to-rem(42px) !default;
+$table-expandable-cell-width: tools.to-rem(48px) !default;
+$table-nested-gap: calc(49px + 3px) !default;
+
+// Hover
+$table-cell-hover-bg: rgb(var(--cds-color-fill-secondary-hover), 0.3) !default;
+$table-cell-hover-bg-fixed: rgb(var(--cds-color-fill-primary-hover)) !default;
+$table-expanded-row-bg: rgb(var(--cds-color-fill-secondary), 0.5) !default;
+
+// Sort
+$table-header-sort-active-bg: rgb(var(--cds-color-fill-secondary)) !default;
+$table-fixed-header-sort-active-bg: rgb(var(--cds-color-fill-secondary)) !default;
+$table-header-sort-bg: rgb(var(--cds-color-fill-secondary)) !default;
+$table-body-sort-bg: rgb(var(--cds-color-fill-primary)) !default;
+$table-sort-icon-color: rgb(var(--cds-color-content-primary)) !default;
+$table-sort-icon-color-active: rgb(var(--cds-color-content-primary)) !default;
+
+// Sizes
+$table-selection-column-width: tools.to-rem(32px) !default;
+
+// Fixed
+$table-z-index-fixed: 2 !default;
+$table-box-shadow-color: rgb(var(--cds-alpha-silver-200)) !default;
+$table-shadow-border: var(--cds-border-100) solid rgb(var(--cds-color-line-elevated)) !default;
+
+// Sticky
+$table-sticky-scroll-bar-bg: rgb(var(--cds-color-fill-secondary)) !default;
+$table-sticky-scroll-bar-active-bg: rgb(var(--cds-color-fill-secondary-active)) !default;
+$table-sticky-scroll-bar-radius: var(--cds-border-radius-200) !default;
+$table-sticky-scroll-border: var(--cds-border-100) solid rgb(var(--cds-color-fill-primary)) !default;
+$table-z-index-sticky: calc($table-z-index-fixed + 1) !default;
+
+// Selected
+$table-selected-cell-bg: rgb(var(--cds-color-brand-secondary), 0.5) !default;
+$table-selected-cell-bg-fixed: rgb(var(--cds-color-brand-secondary)) !default;
+
+// Bordered
+$table-border: var(--cds-border-100) solid rgb(var(--cds-color-line-tertiary)) !default;
+$table-border-header: var(--cds-border-100) solid rgb(var(--cds-color-line-tertiary)) !default;
+$table-border-radius: var(--cds-border-radius-200) !default;
+
+
+// Resize
+$table-line-bg: rgb(var(--cds-color-line-primary-hover)) !default;
+
+// Expanded
+$table-expandable-button-opened-bg: rgb(var(--cds-color-fill-secondary-active)) !default;
+$table-expandable-tree-button-width: tools.to-rem(20px) !default;
+$table-expandable-tree-button-height: tools.to-rem(20px) !default;
+
+// Drag-n-Drop
+$table-drag-handle-color: rgb(var(--cds-color-content-tertiary)) !default;
+$table-drag-handle-color-hover: rgb(var(--cds-color-content-primary)) !default;
+$table-drag-handle-size: tools.to-rem(16px) !default;
+$table-drag-indicator-color: rgb(var(--cds-color-brand-primary)) !default;
+$table-drag-indicator-size: tools.to-rem(2px) !default;
+$table-dragging-opacity: 0.4 !default;

package/src/components/CdsTabs/CdsTabs.scss

@@ -0,0 +1,94 @@
+@use 'sass:map';
+@use '../../styles/tools';
+@use './styles/CdsTabs.variables' as *;
+
+@include tools.layer('components') {
+  .cds-tabs {
+    gap: $tabs-gap;
+
+    &.cds-slide-group--vertical {
+      flex: none;
+      height: auto;
+    }
+
+    .cds-slide-group__container {
+      background-color: map.get($tabs-color, 'background');
+      border-radius: $tabs-border-radius;
+    }
+
+    .cds-slide-group__content {
+      gap: $tabs-gap;
+      padding: $tabs-inner-padding;
+    }
+
+    &.cds-tabs--fixed-tabs,
+    &.cds-tabs--align-tabs-center {
+      .cds-slide-group__content > *:last-child {
+        margin-inline-end: auto;
+      }
+
+      .cds-slide-group__content > *:first-child {
+        margin-inline-start: auto;
+      }
+    }
+
+    &.cds-tabs--align-tabs-end {
+      .cds-tab:first-child {
+        margin-inline-start: auto;
+      }
+
+      .cds-tab:last-child {
+        margin-inline-end: 0;
+      }
+    }
+
+    &.cds-tabs--grow {
+      flex-grow: 1;
+
+      .cds-tab {
+        flex: 1 0 auto;
+        max-width: none;
+      }
+    }
+  }
+
+  .cds-tab {
+    height: $tabs-height;
+    color: map.get($tab-color, 'default', 'content');
+    background: map.get($tab-color, 'default', 'background');
+    border-radius: $tab-border-radius;
+    isolation: isolate;
+
+    &--fixed {
+      flex: 1 0 auto;
+      max-width: $tab-fixed-max-width;
+    }
+
+    &:hover {
+      color: map.get($tab-color, 'hover', 'content');
+      background: map.get($tab-color, 'hover', 'background');
+    }
+
+    &--selected, &--selected:hover {
+      color: map.get($tab-color, 'selected', 'content');
+      background: transparent;
+    }
+
+    &__slider {
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+      background: map.get($tab-color, 'selected', 'background');
+      border-radius: $tab-border-radius;
+      opacity: 0;
+
+      @include tools.cds-shadow-bottom-100;
+    }
+
+    &--selected .cds-tab__slider {
+      opacity: 1;
+    }
+
+     @include tools.cds-animation-motion(tools.$cds-duration-fast, 'ease-in-out', 'basic');
+  }
+}

package/src/components/CdsTabs/styles/_CdsTabs.variables.scss

@@ -0,0 +1,30 @@
+// CdsTabs
+$tabs-gap: var(--cds-spacing-100) !default;
+$tabs-height: 24px !default;
+$tabs-stacked-height: 72px !default;
+$tabs-inner-padding: var(--cds-spacing-100) !default;
+$tabs-border-radius: var(--cds-border-radius-300) !default;
+$tabs-color: (
+  'background': rgb(var(--cds-color-fill-secondary), 0.5)
+) !default;
+
+// CdsTab
+$tab-max-width: 360px !default;
+$tab-fixed-max-width: 300px !default;
+$tab-min-width: 16px !default;
+$tab-padding: 0 var(--cds-spacing-300) !default;
+$tab-border-radius: var(--cds-border-radius-200) !default;
+$tab-color: (
+  'default': (
+    'background': transparent,
+    'content': rgb(var(--cds-color-content-primary))
+  ),
+  'hover': (
+    'background': rgb(var(--cds-color-fill-primary-hover)),
+    'content': rgb(var(--cds-color-content-primary))
+  ),
+  'selected': (
+    'background': rgb(var(--cds-color-fill-elevated)),
+    'content': rgb(var(--cds-color-content-primary))
+  )
+) !default;

package/src/components/CdsTag/CdsTag.scss

@@ -0,0 +1,141 @@
+@use 'sass:map';
+@use 'sass:selector';
+@use '../../styles/tools';
+@use './styles/CdsTag.variables' as *;
+
+@include tools.layer('components') {
+  $tag-size-md: map.get($tag-sizes, 'md');
+
+  .cds-tag {
+    position: relative;
+    display: inline-flex;
+    gap: 0 map.get($tag-size-md, 'gap');
+    align-items: center;
+    min-width: 0;
+    max-width: $tag-max-width;
+    height: map.get($tag-size-md, 'height');
+    padding-block: 0;
+    padding-inline: map.get($tag-size-md, 'padding-inline');
+    margin: 0;
+    overflow: hidden;
+    vertical-align: middle;
+    color: $tag-color;
+    text-align: left;
+    white-space: $tag-white-space;
+    text-decoration: none;
+    appearance: none;
+    background: $tag-background;
+    border: none;
+    border-radius: $tag-border-radius;
+
+    @include tools.cds-text-regular(map.get($tag-size-md, 'font-size'));
+
+    &--link {
+      cursor: pointer;
+    }
+
+    &--disabled {
+      color: $tag-disabled-color;
+      cursor: not-allowed;
+      background: $tag-disabled-background;
+    }
+
+    &--link,
+    &--filter {
+      user-select: none;
+    }
+
+    &--pill {
+      border-radius: $tag-pill-border-radius;
+    }
+
+    &--size {
+      @each $size, $cfg in $tag-sizes {
+        &-#{$size} {
+          $padding-inline: map.get($cfg, 'padding-inline');
+
+          gap: 0 map.get($cfg, 'gap');
+          height: map.get($cfg, 'height');
+          padding-inline: $padding-inline;
+
+          @include tools.cds-text-regular(map.get($cfg, 'font-size'));
+
+          .cds-tag__close {
+            max-width: map.get($cfg, 'close-size');
+            max-height: map.get($cfg, 'close-size');
+            font-size: map.get($cfg, 'close-size');
+          }
+
+          // Аватар подгоняется под высоту тега и утапливается в паддинг;
+          // промежуток с контентом даёт gap тега, поэтому собственные
+          // отступы cds-avatar--start/--end обнуляются.
+          .cds-avatar {
+            --cds-avatar-height: #{map.get($cfg, 'avatar-size')};
+          }
+
+          .cds-avatar--start {
+            margin-inline: calc(#{$padding-inline} * -0.7) 0;
+          }
+
+          .cds-avatar--end {
+            margin-inline: 0 calc(#{$padding-inline} * -0.7);
+          }
+
+          @at-root #{selector.append('.cds-tag--pill', &)} {
+            .cds-avatar {
+              --cds-avatar-height: #{map.get($cfg, 'height')};
+            }
+
+            .cds-avatar--start {
+              margin-inline-start: calc(#{$padding-inline} * -1);
+            }
+
+            .cds-avatar--end {
+              margin-inline-end: calc(#{$padding-inline} * -1);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .cds-tag__content {
+    display: inline-flex;
+    align-items: center;
+
+    .cds-autocomplete__selection &,
+    .cds-combobox__selection &,
+    .cds-select__selection & {
+      overflow: hidden;
+    }
+  }
+
+  .cds-tag__filter,
+  .cds-tag__prepend,
+  .cds-tag__append,
+  .cds-tag__close {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .cds-tag__close {
+    flex: 0 1 auto;
+    max-width: map.get($tag-size-md, 'close-size');
+    max-height: map.get($tag-size-md, 'close-size');
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    font: inherit;
+    font-size: map.get($tag-size-md, 'close-size');
+    color: inherit;
+    text-transform: none;
+    cursor: pointer;
+    user-select: none;
+    background-color: transparent;
+    border-style: none;
+
+    .cds-icon {
+      font-size: inherit;
+    }
+  }
+}

package/src/components/CdsTag/styles/_CdsTag.variables.scss

@@ -0,0 +1,57 @@
+@use '../../../styles/tools';
+
+$tag-max-width: 100% !default;
+$tag-white-space: nowrap !default;
+$tag-background: rgb(var(--cds-color-fill-secondary)) !default;
+$tag-color: rgb(var(--cds-color-content-primary)) !default;
+$tag-disabled-background: rgb(var(--cds-color-fill-disable)) !default;
+$tag-disabled-color: rgb(var(--cds-color-content-disable)) !default;
+$tag-border-radius: var(--cds-border-radius-300) !default;
+$tag-pill-border-radius: tools.to-rem(9999px) !default;
+
+// ======================= Sizes =======================
+// Каждый размер: высота, внутренние отступы по горизонтали, промежуток между элементами,
+// размерный токен шрифта, размер кнопки закрытия и размер аватара
+// (высота тега минус 6px; у модификатора pill аватар занимает полную высоту).
+$tag-sizes: (
+  xs: (
+    'height': tools.to-rem(16px),
+    'padding-inline': var(--cds-spacing-100),
+    'gap': var(--cds-spacing-50),
+    'font-size': '50',
+    'close-size': tools.to-rem(12px),
+    'avatar-size': tools.to-rem(10px)
+  ),
+  sm: (
+    'height': tools.to-rem(20px),
+    'padding-inline': var(--cds-spacing-100),
+    'gap': var(--cds-spacing-50),
+    'font-size': '100',
+    'close-size': tools.to-rem(14px),
+    'avatar-size': tools.to-rem(14px)
+  ),
+  md: (
+    'height': tools.to-rem(24px),
+    'padding-inline': var(--cds-spacing-200),
+    'gap': var(--cds-spacing-100),
+    'font-size': '100',
+    'close-size': tools.to-rem(16px),
+    'avatar-size': tools.to-rem(18px)
+  ),
+  lg: (
+    'height': tools.to-rem(28px),
+    'padding-inline': var(--cds-spacing-200),
+    'gap': var(--cds-spacing-100),
+    'font-size': '200',
+    'close-size': tools.to-rem(18px),
+    'avatar-size': tools.to-rem(22px)
+  ),
+  xl: (
+    'height': tools.to-rem(32px),
+    'padding-inline': var(--cds-spacing-300),
+    'gap': var(--cds-spacing-100),
+    'font-size': '200',
+    'close-size': tools.to-rem(20px),
+    'avatar-size': tools.to-rem(26px)
+  )
+) !default;

package/src/components/CdsTagGroup/CdsTagGroup.scss

@@ -0,0 +1,32 @@
+@use '../../styles/tools';
+@use './styles/CdsTagGroup.variables' as *;
+
+@include tools.layer('components') {
+  .cds-tag-group {
+    min-width: 0;
+    max-width: 100%;
+    padding: $tag-group-padding;
+
+    .cds-slide-group__content {
+      gap: $tag-group-gap;
+      align-items: center;
+    }
+
+    .cds-tag--selected:not(.cds-tag--disabled) {
+      color: $tag-group-selected-color;
+      background: $tag-group-selected-background;
+
+      &.cds-tag--link:hover {
+        background: $tag-group-selected-background-hover;
+      }
+    }
+  }
+
+  .cds-tag-group--column {
+    .cds-slide-group__content {
+      flex-wrap: wrap;
+      max-width: 100%;
+      white-space: normal;
+    }
+  }
+}

package/src/components/CdsTagGroup/styles/_CdsTagGroup.variables.scss

@@ -0,0 +1,8 @@
+// Внутренний отступ группы и промежуток между тегами.
+$tag-group-padding: var(--cds-spacing-100) !default;
+$tag-group-gap: var(--cds-spacing-100) !default;
+
+// Выбранное состояние тега: заливка брендовым цветом с контентом на тёмном фоне.
+$tag-group-selected-background: rgb(var(--cds-color-brand-primary)) !default;
+$tag-group-selected-background-hover: rgb(var(--cds-color-brand-primary-hover)) !default;
+$tag-group-selected-color: rgb(var(--cds-color-content-on-dark)) !default;

package/src/components/CdsTextArea/CdsTextArea.scss

@@ -0,0 +1,129 @@
+@use 'sass:selector';
+@use '../../styles/tools';
+@use '../CdsField/styles/CdsField.variables' as *;
+@use './styles/CdsTextArea.variables' as *;
+
+@include tools.layer('components') {
+  .cds-text-area {
+    textarea {
+      flex: 1;
+      min-width: 0;
+      color: inherit;
+      resize: vertical;
+      scrollbar-width: none;
+      transition: $field-input-transition;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      &:focus,
+      &:active {
+        outline: none;
+      }
+
+      &:invalid {
+        box-shadow: none;
+      }
+    }
+
+    .cds-field {
+      --cds-field-padding-top: #{$text-area-padding-block};
+      --cds-field-padding-bottom: #{$text-area-padding-block};
+
+      cursor: text;
+
+      &:not(.cds-field--center-affix) {
+        .cds-field__prepend-inner,
+        .cds-field__append-inner,
+        .cds-field__clearable {
+          align-items: flex-start;
+          padding-top: var(--cds-field-padding-top);
+        }
+      }
+
+      &:not(.cds-field--reverse) {
+        .cds-field__input {
+          @at-root #{selector.append('.cds-text-area--prefixed', &)} {
+            --cds-field-padding-start: #{$text-area-padding-start};
+          }
+
+          @at-root #{selector.append('.cds-text-area--suffixed', &)} {
+            --cds-field-padding-end: #{$text-area-padding-end};
+          }
+        }
+      }
+
+      &.cds-field--reverse {
+        .cds-field__input {
+          @at-root #{selector.append('.cds-text-area--prefixed', &)} {
+            --cds-field-padding-end: #{$text-area-padding-start};
+          }
+
+          @at-root #{selector.append('.cds-text-area--suffixed', &)} {
+            --cds-field-padding-start: #{$text-area-padding-end};
+          }
+        }
+      }
+    }
+
+    textarea.cds-field__input {
+      height: var(--cds-text-area-control-height, auto);
+      max-height: var(--cds-text-area-max-height, none);
+    }
+
+    &--auto-grow {
+      textarea {
+        overflow: hidden;
+      }
+    }
+
+    &--no-resize {
+      textarea {
+        resize: none;
+      }
+    }
+
+    &__prefix,
+    &__suffix {
+      display: flex;
+      align-items: flex-start;
+      padding-block: var(--cds-field-padding-top) var(--cds-field-padding-bottom);
+      color: $text-area-affix-color;
+      white-space: nowrap;
+      cursor: default;
+      user-select: none;
+      transition: inherit;
+    }
+
+    &__prefix {
+      @at-root #{selector.nest('.cds-field:not(.cds-field--reverse)', &)} {
+        padding-inline-start: var(--cds-field-padding-start);
+      }
+
+      @at-root #{selector.nest('.cds-field.cds-field--reverse', &)} {
+        padding-inline-end: var(--cds-field-padding-end);
+      }
+    }
+
+    &__suffix {
+      @at-root #{selector.nest('.cds-field:not(.cds-field--reverse)', &)} {
+        padding-inline-end: var(--cds-field-padding-end);
+      }
+
+      @at-root #{selector.nest('.cds-field.cds-field--reverse', &)} {
+        padding-inline-start: var(--cds-field-padding-start);
+      }
+    }
+
+    &__sizer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      visibility: hidden;
+      height: 0 !important;
+      min-height: 0 !important;
+      pointer-events: none;
+    }
+  }
+}

package/src/components/CdsTextArea/styles/_CdsTextArea.variables.scss

@@ -0,0 +1,6 @@
+@use '../../../styles/settings';
+
+$text-area-affix-color: rgb(var(--cds-color-content-tertiary)) !default;
+$text-area-padding-start: var(--cds-spacing-100) !default;
+$text-area-padding-end: 0 !default;
+$text-area-padding-block: var(--cds-spacing-100) !default;