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

package/src/components/CdsAutocomplete/CdsAutocomplete.scss

@@ -0,0 +1,158 @@
+@use 'sass:selector';
+@use '../../styles/tools';
+@use './styles/CdsAutocomplete.variables' as *;
+
+@include tools.layer('components') {
+  .cds-autocomplete {
+    .cds-field {
+      .cds-text-input__prefix,
+      .cds-text-input__suffix,
+      .cds-field__input,
+      .cds-field__input > input,
+      &.cds-field {
+        cursor: text;
+      }
+    }
+
+    .cds-field {
+      .cds-field__input {
+        > input {
+          flex: 1 1;
+        }
+      }
+
+      input {
+        min-width: $autocomplete-focused-input-min-width;
+      }
+
+      &:not(.cds-field--focused) {
+        input {
+          min-width: 0;
+        }
+      }
+    }
+
+    .cds-field--dirty {
+      .cds-autocomplete__selection {
+        margin-inline-end: $autocomplete-selection-inline-gap;
+      }
+    }
+
+    .cds-autocomplete__selection-text {
+      @include tools.ellipsis;
+    }
+
+    &__content {
+      overflow: hidden;
+
+      @at-root #{selector.append('.cds-menu > .cds-overlay__content', &)} {
+        padding-inline: $autocomplete-content-padding-inline;
+        border-radius: $autocomplete-content-border-radius;
+      }
+
+      > .cds-surface {
+        display: flex;
+        flex-direction: column;
+      }
+    }
+
+    &__mask {
+      background: $autocomplete-mask-background;
+    }
+
+    &__selections {
+      display: contents;
+    }
+
+    &__selection {
+      display: inline-flex;
+      align-items: center;
+      max-width: 100%;
+      line-height: inherit;
+      letter-spacing: inherit;
+
+      &:first-child {
+        margin-inline-start: 0;
+      }
+    }
+
+    &--ellipsis {
+      .cds-field__input {
+        flex-wrap: nowrap;
+      }
+
+      .cds-autocomplete__selections {
+        display: block;
+        flex: 1 1 auto;
+        align-self: center;
+        min-width: 0;
+
+        @include tools.ellipsis;
+      }
+
+      .cds-autocomplete__selection {
+        display: inline;
+        max-width: none;
+      }
+
+      .cds-autocomplete__selection-text {
+        display: inline;
+        overflow: visible;
+      }
+    }
+
+    &--selecting-index {
+      .cds-autocomplete__selection {
+        opacity: $autocomplete-unselected-opacity;
+
+        &--selected {
+          opacity: 1;
+        }
+      }
+
+      .cds-field__input > input {
+        caret-color: transparent;
+      }
+    }
+
+    &--single:not(.cds-autocomplete--selection-slot) {
+      .cds-field__input {
+        > input {
+          position: absolute;
+          right: 0;
+          left: 0;
+          width: 100%;
+          padding-inline: inherit;
+        }
+      }
+
+      .cds-field--active {
+        input {
+          transition: none;
+        }
+      }
+
+      .cds-field--dirty:not(.cds-field--focused) {
+        input {
+          opacity: 0;
+        }
+      }
+
+      .cds-field--focused {
+        .cds-autocomplete__selection {
+          opacity: 0;
+        }
+      }
+    }
+
+    &__menu-icon {
+      margin-inline-start: 4px;
+      cursor: pointer;
+      transition: $autocomplete-transition;
+
+      .cds-autocomplete--active-menu & {
+        transform: rotate(180deg);
+      }
+    }
+  }
+}

package/src/components/CdsAutocomplete/styles/_CdsAutocomplete.variables.scss

@@ -0,0 +1,9 @@
+@use '../../../styles/settings';
+
+$autocomplete-content-border-radius: var(--cds-border-radius-200) !default;
+$autocomplete-content-padding-inline: var(--cds-spacing-100) !default;
+$autocomplete-focused-input-min-width: 64px !default;
+$autocomplete-mask-background: rgb(var(--cds-color-content-placeholder)) !default;
+$autocomplete-selection-inline-gap: var(--cds-spacing-50) !default;
+$autocomplete-unselected-opacity: var(--cds-medium-emphasis-opacity) !default;
+$autocomplete-transition: .2s settings.$standard-easing !default;

package/src/components/CdsAvatar/CdsAvatar.scss

@@ -0,0 +1,42 @@
+@use 'sass:map';
+@use '../../styles/tools';
+@use '../../styles/settings';
+@use './styles/CdsAvatar.variables' as *;
+
+@include tools.layer('components') {
+  .cds-avatar {
+    position: relative;
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: var(--cds-avatar-height);
+    height: var(--cds-avatar-height);
+    overflow: hidden;
+    line-height: $avatar-line-height;
+    vertical-align: $avatar-vertical-align;
+    text-align: center;
+    border-radius: $avatar-border-radius;
+    transition: $avatar-transition-duration settings.$standard-easing;
+    transition-property: width, height;
+
+    @each $name in settings.$sizes {
+      &--size-#{$name} {
+        --cds-avatar-height: #{map.get($avatar-sizes, $name)};
+      }
+    }
+
+    &--start {
+      margin-inline-end: $avatar-margin-start;
+    }
+
+    &--end {
+      margin-inline-start: $avatar-margin-end;
+    }
+
+    .cds-image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

package/src/components/CdsAvatar/styles/_CdsAvatar.variables.scss

@@ -0,0 +1,22 @@
+@use '../../../styles/tools';
+
+// Геометрия
+$avatar-border-radius: 50% !default;
+$avatar-line-height: normal !default;
+$avatar-vertical-align: middle !default;
+
+// Отступы модификаторов start / end
+$avatar-margin-start: var(--cds-spacing-200) !default;
+$avatar-margin-end: var(--cds-spacing-200) !default;
+
+// Длительность перехода размеров
+$avatar-transition-duration: 0.2s !default;
+
+// Размеры
+$avatar-sizes: (
+  'xs': tools.to-rem(24px),
+  'sm': tools.to-rem(32px),
+  'md': tools.to-rem(40px),
+  'lg': tools.to-rem(48px),
+  'xl': tools.to-rem(56px)
+) !default;

package/src/components/CdsBadge/CdsBadge.scss

@@ -0,0 +1,69 @@
+@use '../../styles/tools';
+@use './styles/CdsBadge.variables' as *;
+
+@include tools.layer('components') {
+  .cds-badge {
+    display: inline-block;
+    line-height: $badge-line-height;
+
+    &__wrapper {
+      position: relative;
+      display: flex;
+
+      .cds-badge--inline & {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        margin-inline: $badge-wrapper-margin;
+      }
+    }
+
+    &__content {
+      position: absolute;
+      display: inline-flex;
+      gap: $badge-gap;
+      justify-content: center;
+      min-width: $badge-min-width;
+      height: $badge-height;
+      padding: $badge-padding;
+      color: $badge-color;
+      text-align: center;
+      text-indent: 0;
+      white-space: nowrap;
+      pointer-events: auto;
+      background: $badge-background;
+      border-radius: $badge-border-radius;
+      transition: $badge-transition;
+
+      @include tools.cds-text-regular-100;
+
+      &:has(.cds-icon) {
+        padding: $badge-icon-padding;
+      }
+
+      .cds-badge--dot & {
+        width: $badge-dot-width;
+        min-width: 0;
+        height: $badge-dot-height;
+        padding: 0;
+        border-radius: $badge-dot-border-radius;
+      }
+
+      .cds-badge--inline & {
+        position: relative;
+        vertical-align: $badge-inline-vertical-align;
+      }
+
+      .cds-icon {
+        font-size: $badge-font-size;
+        color: inherit;
+      }
+
+      img,
+      .cds-image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}

package/src/components/CdsBadge/styles/_CdsBadge.variables.scss

@@ -0,0 +1,22 @@
+@use '../../../styles/tools';
+@use '../../../styles/settings';
+
+// Default
+$badge-background: rgb(var(--cds-color-status-indication-surface)) !default;
+$badge-color: rgb(var(--cds-color-content-inverse)) !default;
+$badge-line-height: 1 !default;
+$badge-font-size: var(--cds-font-size-100) !default;
+$badge-border-radius: 10px !default;
+$badge-wrapper-margin: 0 !default;
+$badge-min-width: tools.to-rem(16px) !default;
+$badge-height: tools.to-rem(16px) !default;
+$badge-padding: 0 var(--cds-spacing-100) !default;
+$badge-icon-padding: var(--cds-spacing-50) var(--cds-spacing-200) !default;
+$badge-transition: .225s settings.$standard-easing !default;
+$badge-gap: var(--cds-spacing-50) !default;
+$badge-inline-vertical-align: middle !default;
+
+// Dot
+$badge-dot-border-radius: 50% !default;
+$badge-dot-height: tools.to-rem(8px) !default;
+$badge-dot-width: tools.to-rem(8px) !default;

package/src/components/CdsBreadcrumbs/CdsBreadcrumbs.scss

@@ -0,0 +1,49 @@
+@use 'sass:map';
+@use '../../styles/tools';
+@use './styles/CdsBreadcrumbs.variables' as *;
+
+@include tools.layer('components') {
+  .cds-breadcrumbs {
+    display: flex;
+    gap: $breadcrumbs-gap;
+    align-items: center;
+    padding: $breadcrumbs-padding;
+    margin: $breadcrumbs-margin;
+
+    @include tools.cds-text-regular-200;
+
+    &__prepend {
+      display: inline-flex;
+      align-items: center;
+    }
+  }
+
+  .cds-breadcrumbs-item {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: $breadcrumbs-vertical-align;
+    color: map.get($breadcrumbs-colors, 'link');
+    text-decoration: none;
+
+    @include tools.ellipsis;
+
+    &--disabled {
+      color: map.get($breadcrumbs-colors, 'content');
+      pointer-events: none;
+    }
+
+    &__link {
+      color: inherit;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: $breadcrumbs-item-link-text-decoration;
+      }
+    }
+  }
+
+  .cds-breadcrumbs-divider {
+    display: inline-block;
+    color: map.get($breadcrumbs-colors, 'divider');
+  }
+}

package/src/components/CdsBreadcrumbs/styles/_CdsBreadcrumbs.variables.scss

@@ -0,0 +1,14 @@
+@use '../../../styles/tools';
+
+$breadcrumbs-gap: var(--cds-spacing-200) !default;
+$breadcrumbs-padding: 0 !default;
+$breadcrumbs-margin: 0 !default;
+$breadcrumbs-vertical-align: middle !default;
+$breadcrumbs-item-link-text-decoration: underline !default;
+
+// Colors
+$breadcrumbs-colors: (
+  'content': rgb(var(--cds-color-content-primary)),
+  'link': rgb(var(--cds-color-content-link)),
+  'divider': rgb(var(--cds-color-content-primary)),
+) !default;

package/src/components/CdsButton/CdsButton.scss

@@ -0,0 +1,138 @@
+@use 'sass:map';
+@use '../../styles/tools';
+@use './styles/CdsButton.variables' as *;
+@use './styles/CdsButton.mixins' as *;
+
+@include tools.layer('components') {
+  .cds-button {
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    vertical-align: middle;
+    text-align: left;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    outline: $button-outline transparent;
+    border: none;
+    border-radius: $button-border-radius;
+
+    @include tools.cds-animation-motion(tools.$cds-duration-very-fast, 'ease-in-out', 'basic');
+
+    &--appearance {
+      @each $appearance, $_ in $button-appearances {
+        &-#{$appearance} {
+          @include use-button-appearance($appearance);
+        }
+      }
+    }
+
+    &--size {
+      @each $size, $_ in $button-sizes {
+        &-#{$size} {
+          @include use-button-size($size);
+        }
+      }
+    }
+
+    &--block {
+      display: flex;
+      flex: 1 0 auto;
+      min-width: 100%;
+    }
+
+    &--stacked {
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      .cds-button__content {
+        flex-direction: column;
+      }
+
+      .cds-button__prepend,
+      .cds-button__append {
+        margin-inline: 0;
+      }
+
+      @each $size, $_ in $button-stacked-sizes {
+        &.cds-button--size-#{$size} {
+          @include use-button-stacked-size($size);
+        }
+      }
+
+      &.cds-button--block {
+        min-width: 100%;
+      }
+    }
+
+    &--spaced {
+      .cds-button__content {
+        flex-grow: 1;
+      }
+
+      &.cds-button--spaced-start > .cds-button__content {
+        justify-content: end;
+      }
+
+      &.cds-button--spaced-end > .cds-button__content {
+        justify-content: start;
+      }
+    }
+
+    &--loading {
+      pointer-events: none;
+      cursor: default;
+
+      .cds-button__content,
+      .cds-button__prepend,
+      .cds-button__append {
+        opacity: 0;
+      }
+    }
+
+    &--disabled {
+      pointer-events: none;
+      cursor: not-allowed;
+    }
+
+    &--readonly {
+      pointer-events: none;
+      cursor: default;
+    }
+
+    i,
+    svg {
+      position: relative;
+    }
+  }
+
+  .cds-button__content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-overflow: ellipsis;
+    white-space: $button-white-space;
+    transition: $button-content-transition;
+  }
+
+  .cds-button__prepend,
+  .cds-button__append {
+    display: flex;
+    align-items: center;
+  }
+
+  .cds-button__loader {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+}

package/src/components/CdsButton/styles/_CdsButton.mixins.scss

@@ -0,0 +1,76 @@
+@use 'sass:map';
+@use '../../../styles/tools';
+@use './CdsButton.variables' as *;
+
+@mixin use-button-appearance($variant) {
+  $variant-map: map.get($button-appearances, $variant);
+
+  @if $variant-map {
+    color: map.get($variant-map, 'default', 'content');
+    background-color: map.get($variant-map, 'default', 'background');
+    border-color: map.get($variant-map, 'default', 'border');
+
+    &:hover {
+      color: map.get($variant-map, 'hover', 'content');
+      background-color: map.get($variant-map, 'hover', 'background');
+      border-color: map.get($variant-map, 'hover', 'border');
+    }
+
+    &:active {
+      color: map.get($variant-map, 'active', 'content');
+      background-color: map.get($variant-map, 'active', 'background');
+      border-color: map.get($variant-map, 'active', 'border');
+    }
+
+    &:focus-visible {
+      outline-color: map.get($variant-map, 'focus', 'outline');
+      outline-offset: $button-outline-offset;
+    }
+
+    &.cds-button--disabled {
+      color: map.get($variant-map, 'disabled', 'content');
+      background-color: map.get($variant-map, 'disabled', 'background');
+      border-color: map.get($variant-map, 'disabled', 'border');
+    }
+  } @else {
+    @warn "Appearance #{$variant} is not defined in the $button-appearances map.";
+  }
+}
+
+@mixin use-button-size($variant) {
+  $variant-map: map.get($button-sizes, $variant);
+
+  @if $variant-map {
+    gap: 0 map.get($variant-map, 'gap');
+    height: map.get($variant-map, 'height');
+    padding-inline: map.get($variant-map, 'padding');
+
+    @include tools.cds-text-regular(map.get($variant-map, 'font-size'));
+
+    &.cds-button--icon {
+      width: map.get($variant-map, 'height');
+    }
+
+    .cds-button__loader {
+      > .cds-progress-circle {
+        width: map.get($variant-map, 'loader');
+        height: map.get($variant-map, 'loader');
+      }
+    }
+  } @else {
+    @warn "Size #{$variant} is not defined in the $button-sizes map.";
+  }
+}
+
+@mixin use-button-stacked-size($variant) {
+  $variant-map: map.get($button-stacked-sizes, $variant);
+
+  @if $variant-map {
+    gap: $button-stacked-gap;
+    min-width: map.get($variant-map, 'height');
+    height: map.get($variant-map, 'height');
+    padding-inline: map.get($variant-map, 'padding');
+  } @else {
+    @warn "Size #{$variant} is not defined in the $button-stacked-sizes map.";
+  }
+}