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

package/src/components/CdsToolbar/CdsToolbar.scss

@@ -0,0 +1,72 @@
+@use '../../styles/tools';
+@use './styles/CdsToolbar.variables' as *;
+
+@include tools.layer('components') {
+  .cds-toolbar {
+    position: relative;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    padding: tools.$cds-spacing-xs;
+    color: $toolbar-color;
+    background: $toolbar-background;
+
+    &--inset {
+      padding-left: tools.$cds-spacing-m;
+    }
+
+    &--bordered {
+      border-bottom: var(--cds-border-100) solid $toolbar-border-color;
+    }
+
+    &--no-gutters {
+      padding: 0;
+    }
+
+    &--no-gutter-start {
+      padding-top: 0;
+      padding-bottom: 0;
+      padding-left: 0;
+    }
+
+    &--no-gutter-end {
+      padding-top: 0;
+      padding-right: 0;
+      padding-bottom: 0;
+    }
+  }
+
+  // Внутри частей макета тулбар не рисует свой фон и не задаёт цвет текста:
+  // и то и другое приходит от CdsHeader/CdsFooter (пропсы bgColor/color и
+  // контрастный класс), иначе тулбар закрывал бы выбранный фон собой.
+  .cds-header .cds-toolbar,
+  .cds-footer .cds-toolbar {
+    color: inherit;
+    background: transparent;
+  }
+
+  .cds-toolbar-title {
+    flex: 1 1 0;
+    min-width: 1px;
+    max-width: 100%;
+    padding: tools.$cds-spacing-xs;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &:first-child {
+      padding-left: 0;
+    }
+
+    &:last-child {
+      padding-right: 0;
+    }
+
+    &--shrink {
+      flex: 0 1 auto;
+      width: auto;
+      min-width: 0;
+      max-width: 100%;
+    }
+  }
+}

package/src/components/CdsToolbar/styles/_CdsToolbar.variables.scss

@@ -0,0 +1,3 @@
+$toolbar-background: rgb(var(--cds-color-surface-elevated)) !default;
+$toolbar-color: rgb(var(--cds-color-content-primary)) !default;
+$toolbar-border-color: rgb(var(--cds-color-line-elevated)) !default;

package/src/components/CdsTooltip/CdsTooltip.scss

@@ -0,0 +1,111 @@
+@use 'sass:map';
+@use '../../styles/settings';
+@use '../../styles/tools';
+@use './styles/CdsTooltip.variables' as *;
+
+@include tools.layer('components') {
+  .cds-tooltip {
+    > .cds-overlay__content {
+      display: inline-block;
+      width: auto;
+      padding-block: $tooltip-block-padding;
+      padding-inline: $tooltip-inline-padding;
+      color: map.get($tooltip-colors, 'color');
+      text-transform: initial;
+      overflow-wrap: break-word;
+      background-color: map.get($tooltip-colors, 'background');
+      border-radius: $tooltip-border-radius;
+      opacity: 1;
+      transition-property: opacity, transform;
+
+      @include tools.cds-text-regular-200;
+
+      a {
+        color: map.get($tooltip-colors, 'link');
+        text-decoration: underline;
+      }
+    }
+
+    &:not(.cds-tooltip--interactive) {
+      > .cds-overlay__content {
+        pointer-events: none;
+      }
+    }
+
+    &:not(.cds-tooltip--hide-arrow) > .cds-overlay__content {
+      &::before {
+        position: absolute;
+        width: $tooltip-arrow-size;
+        height: $tooltip-arrow-size;
+        content: '';
+        background-color: inherit;
+        border-radius: $tooltip-arrow-radius;
+        transform: rotate(45deg);
+      }
+
+      &[style*='--cds-overlay-anchor-origin: top']::before {
+        bottom: calc($tooltip-arrow-size / -2);
+        left: 50%;
+        margin-left: calc($tooltip-arrow-size / -2);
+      }
+
+      &[style*='--cds-overlay-anchor-origin: bottom']::before {
+        top: calc($tooltip-arrow-size / -2);
+        left: 50%;
+        margin-left: calc($tooltip-arrow-size / -2);
+      }
+
+      &[style*='--cds-overlay-anchor-origin: left']::before {
+        top: 50%;
+        right: calc($tooltip-arrow-size / -2);
+        margin-top: calc($tooltip-arrow-size / -2);
+      }
+
+      &[style*='--cds-overlay-anchor-origin: right']::before {
+        top: 50%;
+        left: calc($tooltip-arrow-size / -2);
+        margin-top: calc($tooltip-arrow-size / -2);
+      }
+
+      &[style*='--cds-overlay-anchor-origin: top left']::before,
+      &[style*='--cds-overlay-anchor-origin: bottom left']::before {
+        left: $tooltip-arrow-edge-offset;
+        margin-left: 0;
+      }
+
+      &[style*='--cds-overlay-anchor-origin: top right']::before,
+      &[style*='--cds-overlay-anchor-origin: bottom right']::before {
+        right: $tooltip-arrow-edge-offset;
+        left: auto;
+        margin-left: 0;
+      }
+
+      &[style*='--cds-overlay-anchor-origin: left top']::before,
+      &[style*='--cds-overlay-anchor-origin: right top']::before {
+        top: $tooltip-arrow-edge-offset;
+        margin-top: 0;
+      }
+
+      &[style*='--cds-overlay-anchor-origin: left bottom']::before,
+      &[style*='--cds-overlay-anchor-origin: right bottom']::before {
+        top: auto;
+        bottom: $tooltip-arrow-edge-offset;
+        margin-top: 0;
+      }
+    }
+  }
+}
+
+@include tools.layer('overrides') {
+  .cds-tooltip > .cds-overlay__content {
+    &[class*='enter-active'] {
+      transition-timing-function: settings.$decelerated-easing;
+      transition-duration: $tooltip-transition-enter-duration;
+    }
+
+    &[class*='leave-active'] {
+      transition-timing-function: settings.$accelerated-easing;
+      transition-duration: $tooltip-transition-leave-duration;
+    }
+  }
+}

package/src/components/CdsTooltip/styles/_CdsTooltip.variables.scss

@@ -0,0 +1,15 @@
+@use '../../../styles/tools';
+
+$tooltip-border-radius: var(--cds-border-radius-200) !default;
+$tooltip-inline-padding: var(--cds-spacing-400) !default;
+$tooltip-block-padding: var(--cds-spacing-200) !default;
+$tooltip-colors: (
+  'background': rgb(var(--cds-color-surface-inverse)),
+  'color': rgb(var(--cds-color-content-inverse)),
+  'link': rgb(var(--cds-color-content-inverse))
+) !default;
+$tooltip-transition-enter-duration: (tools.$cds-duration-very-fast + ms) !default;
+$tooltip-transition-leave-duration: (tools.$cds-duration-instant + ms) !default;
+$tooltip-arrow-size: var(--cds-spacing-200) !default;
+$tooltip-arrow-edge-offset: var(--cds-spacing-300) !default;
+$tooltip-arrow-radius: var(--cds-border-radius-100) !default;

package/src/components/CdsTree/CdsTree.scss

@@ -0,0 +1,290 @@
+@use 'sass:map';
+@use '../../styles/tools';
+@use './styles/CdsTree.variables' as *;
+
+@include tools.layer('components') {
+  .cds-tree {
+    @include tools.cds-text-regular-200;
+
+    color: map.get($tree-colors, 'text-color');
+
+    .cds-tree-list__holder-inner {
+      align-items: flex-start;
+    }
+
+    &--show-line {
+      .cds-treenode__indent {
+        &-unit {
+          position: relative;
+          height: 100%;
+
+          &::before {
+            position: absolute;
+            top: 0;
+            right: calc($tree-title-height / 2);
+            bottom: calc($tree-node-padding * -1);
+            content: '';
+            border-right: $tree-line-width solid map.get($tree-colors, 'line');
+          }
+
+          &--end {
+            &::before {
+              display: none;
+            }
+          }
+        }
+      }
+
+      .cds-tree__switcher-leaf-line {
+        position: relative;
+        z-index: 1;
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+
+        &::before {
+          position: absolute;
+          top: 0;
+          right: calc($tree-title-height / 2);
+          bottom: calc($tree-node-padding * -1);
+          margin-left: $tree-line-offset;
+          content: ' ';
+          border-right: $tree-line-width solid map.get($tree-colors, 'line');
+        }
+
+        &::after {
+          position: absolute;
+          width: calc($tree-title-height / 2);
+          height: calc($tree-title-height / 2);
+          content: ' ';
+          border-bottom: $tree-line-width solid map.get($tree-colors, 'line');
+        }
+      }
+    }
+
+    &--block-node {
+      .cds-tree-list__holder-inner {
+        align-items: stretch;
+
+        .cds-treenode__node-content-wrapper {
+          flex: auto;
+        }
+
+        .cds-treenode.dragging {
+          position: relative;
+
+          &::after {
+            position: absolute;
+            inset: 0 0 $tree-node-padding;
+            pointer-events: none;
+            content: '';
+            border: $tree-line-width solid map.get($tree-colors, 'drop-indicator');
+            opacity: 0;
+            animation: cds-tree-node-fx-do-not-use 0.3s;
+            animation-fill-mode: forwards;
+            animation-play-state: running;
+          }
+        }
+      }
+    }
+
+    &--unselectable.cds-tree--uncheckable {
+      .cds-treenode__node-content-wrapper {
+        cursor: inherit;
+
+        .cds-treenode__title {
+          user-select: inherit;
+        }
+
+        &:hover {
+          background: transparent;
+        }
+      }
+    }
+
+    &--clickable-node {
+      .cds-treenode__node-content-wrapper {
+        cursor: pointer !important;
+        user-select: none;
+      }
+    }
+
+    &__switcher-icon {
+      margin-right: $tree-node-padding;
+
+      &.cds-functional-button {
+        width: $tree-switcher-size;
+        height: $tree-switcher-size;
+      }
+
+      &--expanded {
+        background-color: map.get($tree-colors, 'expanded');
+      }
+    }
+  }
+
+  .cds-tree-list {
+    &__holder-inner {
+      align-items: flex-start;
+    }
+  }
+
+  .cds-treenode {
+    display: flex;
+    align-items: center;
+    padding: 0 0 var(--cds-spacing-100) 0;
+    outline: none;
+
+    &--disabled {
+      .cds-treenode__node-content-wrapper {
+        color: map.get($tree-colors, 'disabled');
+        cursor: not-allowed;
+
+        &:hover {
+          background: transparent;
+        }
+      }
+    }
+
+    &--leaf-last {
+      .cds-tree__switcher-leaf-line {
+        &::before {
+          top: auto !important;
+          bottom: auto !important;
+          height: calc($tree-title-height / 2) !important;
+        }
+      }
+    }
+
+    // >>> Indent
+    &__indent {
+      align-self: stretch;
+      white-space: nowrap;
+      user-select: none;
+
+      &-unit {
+        display: inline-block;
+        width: $tree-title-height;
+      }
+    }
+
+    &__title {
+      user-select: none;
+    }
+
+    &__switcher {
+      position: relative;
+      display: flex;
+      align-items: center;
+      align-self: stretch;
+      justify-content: center;
+      min-width: $tree-title-height;
+      margin: 0;
+      line-height: $tree-title-height;
+      text-align: center;
+      cursor: pointer;
+      user-select: none;
+
+      svg {
+        @include tools.cds-animation-motion(tools.$cds-duration-fast, 'ease-in-out', 'basic');
+      }
+
+      &--close > .cds-tree__switcher-icon svg {
+        transform: rotate(-90deg);
+      }
+
+      &--noop {
+        cursor: inherit;
+      }
+    }
+
+    &__checkbox {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      width: $tree-checkbox-size;
+      height: $tree-checkbox-size;
+      padding-inline-start: var(--cds-spacing-100);
+    }
+
+    &__node-content-wrapper {
+      position: relative;
+      z-index: auto;
+      display: flex;
+      align-items: center;
+      min-height: $tree-title-height;
+      padding: 0 $tree-node-padding;
+      margin: 0;
+      line-height: $tree-title-height;
+      color: map.get($tree-colors, 'text-color');
+      cursor: pointer;
+      background: transparent;
+      border-radius: $tree-node-border-radius;
+
+      &:hover {
+        background-color: map.get($tree-colors, 'hover');
+      }
+
+      &:focus-visible {
+        outline: $tree-node-outline-width solid map.get($tree-colors, 'focus');
+      }
+
+      .cds-tree__drop-indicator {
+        position: absolute;
+        z-index: 1;
+        height: $tree-drop-indicator-height;
+        pointer-events: none;
+        background-color: map.get($tree-colors, 'drop-indicator');
+        border-radius: $tree-drop-indicator-radius;
+
+        &::after {
+          position: absolute;
+          top: $tree-drop-indicator-dot-top;
+          left: $tree-drop-indicator-dot-left;
+          width: $tree-drop-indicator-dot-size;
+          height: $tree-drop-indicator-dot-size;
+          content: '';
+          background-color: transparent;
+          border: $tree-drop-indicator-dot-border solid map.get($tree-colors, 'drop-indicator');
+          border-radius: 50%;
+        }
+      }
+
+      .cds-treenode.drop-container {
+        > [draggable] {
+          box-shadow: 0 0 0 $tree-drop-indicator-dot-border map.get($tree-colors, 'drop-indicator');
+        }
+      }
+    }
+
+    &__icon {
+      display: inline-block;
+      width: $tree-title-height;
+      vertical-align: middle;
+    }
+
+    &__draggable-icon {
+      cursor: grab;
+      transition: opacity (tools.$cds-duration-normal + ms);
+
+      &:hover {
+        opacity: $tree-draggable-hover-opacity;
+      }
+    }
+
+    &--selected {
+      .cds-treenode__node-content-wrapper {
+        color: map.get($tree-colors, 'selected-text');
+        background: map.get($tree-colors, 'selected');
+      }
+    }
+  }
+
+  .cds-motion-collapse {
+    overflow: hidden;
+    transition:
+      height (tools.$cds-duration-fast + ms) tools.get-motion('ease-in-out'),
+      opacity (tools.$cds-duration-fast + ms) tools.get-motion('ease-in-out') !important;
+  }
+}

package/src/components/CdsTree/styles/_CdsTree.variables.scss

@@ -0,0 +1,29 @@
+@use '../../../styles/tools';
+
+$tree-title-height: tools.to-rem(24px) !default;
+$tree-switcher-size: tools.to-rem(20px) !default;
+$tree-checkbox-size: tools.to-rem(24px) !default;
+$tree-node-padding: var(--cds-spacing-100) !default;
+$tree-node-inset: var(--cds-spacing-100) !default;
+$tree-node-border-radius: var(--cds-border-radius-200) !default;
+$tree-node-outline-width: var(--cds-border-200) !default;
+$tree-drop-indicator-height: tools.to-rem(2px) !default;
+$tree-drop-indicator-radius: tools.to-rem(1px) !default;
+$tree-drop-indicator-dot-size: tools.to-rem(8px) !default;
+$tree-drop-indicator-dot-border: tools.to-rem(2px) !default;
+$tree-drop-indicator-dot-top: tools.to-rem(-3px) !default;
+$tree-drop-indicator-dot-left: tools.to-rem(-6px) !default;
+$tree-line-offset: tools.to-rem(-1px) !default;
+$tree-line-width: tools.to-rem(1px) !default;
+$tree-draggable-hover-opacity: 0.45 !default;
+$tree-colors: (
+  'text-color': rgb(var(--cds-color-content-primary)),
+  'expanded': rgb(var(--cds-color-fill-primary-active)),
+  'line': rgb(var(--cds-color-line-tertiary)),
+  'selected': rgb(var(--cds-color-fill-selected)),
+  'selected-text': rgb(var(--cds-color-content-on-dark)),
+  'hover': rgb(var(--cds-color-fill-primary-hover)),
+  'focus': rgb(var(--cds-color-line-focus-outline)),
+  'disabled': rgb(var(--cds-color-content-disable)),
+  'drop-indicator': rgb(var(--cds-color-brand-primary))
+) !default;

package/src/components/CdsUploader/CdsUploader.scss

@@ -0,0 +1,109 @@
+@use 'sass:map';
+@use '../../styles/tools';
+@use './styles/CdsUploader.variables' as *;
+
+@include tools.layer('components') {
+  .cds-uploader-field {
+    position: relative;
+    text-align: left;
+  }
+  
+  .cds-input.cds-uploader {
+    grid-template:
+      'label label label label' max-content
+      'description description description description' max-content
+      'prepend control append free' max-content
+      'messages messages messages messages' auto
+      / max-content max-content max-content minmax(0, 1fr);
+  }
+
+  .cds-uploader__trigger {
+    display: inline-flex;
+
+    &--disabled,
+    &--readonly {
+      cursor: not-allowed;
+    }
+  }
+
+  .cds-uploader-list-item {
+    @include tools.cds-animation-motion(tools.$cds-duration-very-fast, 'ease-in-out', 'basic');
+
+    &:first-child {
+      margin-top: $uploader-messages-offset;
+    }
+
+    &:hover {
+      background-color: map.get($uploader-color, 'hover');
+
+      .cds-uploader-list-item__actions {
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+
+    &__container {
+      position: relative;
+      display: flex;
+      gap: $uploader-list-item-gap;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      min-height: $uploader-list-item-height;
+      padding-block: $uploader-list-item-padding-block;
+      padding-inline: $uploader-list-item-padding-inline;
+    }
+
+    &__progress {
+      position: absolute;
+      right: 0;
+      bottom: $uploader-item-progress-offset;
+      left: 0;
+      width: 100%;
+      padding-inline: inherit;
+    }
+
+    &__status {
+      display: flex;
+      align-items: center;
+    }
+
+    &__actions {
+      display: flex;
+      visibility: hidden;
+      align-items: center;
+      color: map.get($uploader-color, 'text');
+      opacity: 0;
+
+      @include tools.cds-text-regular-200;
+      @include tools.cds-animation-motion(tools.$cds-duration-very-fast, 'ease-in-out', 'basic');
+
+      .cds-button + .cds-button {
+        margin-left: 0;
+      }
+    }
+
+    &__name {
+      flex: auto;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: map.get($uploader-color, 'text');
+      white-space: nowrap;
+      text-decoration: none;
+
+      &:visited {
+        color: map.get($uploader-color, 'text') !important;
+      }
+
+      @include tools.cds-text-regular-200;
+    }
+
+    &--error,
+    &--progress {
+      .cds-uploader-list-item__actions {
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+  }
+}

package/src/components/CdsUploader/styles/_CdsUploader.variables.scss

@@ -0,0 +1,16 @@
+@use 'sass:map';
+@use '../../../styles/tools';
+
+$uploader-color: (
+  'hover': rgb(var(--cds-color-fill-primary-hover)),
+  'progress': rgb(var(--cds-color-status-progress-surface)),
+  'text': rgb(var(--cds-color-content-primary))
+) !default;
+$uploader-label-offset: var(--cds-spacing-200) !default;
+$uploader-description-offset: var(--cds-spacing-200) !default;
+$uploader-messages-offset: var(--cds-spacing-200) !default;
+$uploader-list-item-height: tools.to-rem(32px) !default;
+$uploader-list-item-padding-inline: var(--cds-spacing-200) !default;
+$uploader-list-item-padding-block: var(--cds-spacing-50) !default;
+$uploader-list-item-gap: var(--cds-spacing-200) !default;
+$uploader-item-progress-offset: $uploader-list-item-padding-block !default;

package/src/components/CdsVirtualScroll/CdsVirtualScroll.scss

@@ -0,0 +1,16 @@
+@use '../../styles/tools';
+@use './styles/CdsVirtualScroll.variables' as *;
+
+@include tools.layer('components') {
+  .cds-virtual-scroll {
+    position: relative;
+    display: block;
+    flex: 1 1 auto;
+    max-width: $virtual-scroll-max-width;
+    overflow: auto;
+
+    &__container {
+      display: block;
+    }
+  }
+}

package/src/components/CdsVirtualScroll/styles/_CdsVirtualScroll.variables.scss

@@ -0,0 +1,3 @@
+@use '../../../styles/settings';
+
+$virtual-scroll-max-width: 100% !default;