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

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

@@ -0,0 +1,180 @@
+@use 'sass:map';
+@use '../../../styles/tools';
+@use '../../../styles/settings';
+
+// ======================= Variables =======================
+$button-border: var(--cds-border-100) solid !default;
+$button-outline: var(--cds-border-200) solid !default;
+$button-outline-offset: var(--cds-spacing-50) !default;
+$button-border-radius: var(--cds-border-radius-200) !default;
+$button-white-space: nowrap !default;
+$button-content-transition: transform, opacity .2s settings.$standard-easing !default;
+$button-stacked-gap: var(--cds-spacing-100) !default;
+
+// ======================= Appearances =======================
+$button-appearances: (
+  primary: (
+    default: (
+      'background': rgb(var(--cds-color-brand-primary)),
+      'border': rgb(var(--cds-color-brand-primary)),
+      'content': rgb(var(--cds-color-content-on-dark)),
+    ),
+    hover: (
+      'background': rgb(var(--cds-color-brand-primary-hover)),
+      'border': rgb(var(--cds-color-brand-primary-hover)),
+      'content': rgb(var(--cds-color-content-on-dark)),
+    ),
+    active: (
+      'background': rgb(var(--cds-color-brand-primary-active)),
+      'border': rgb(var(--cds-color-brand-primary-active)),
+      'content': rgb(var(--cds-color-content-on-dark)),
+    ),
+    disabled: (
+      'background': rgb(var(--cds-color-fill-disable)),
+      'border': rgb(var(--cds-color-fill-disable)),
+      'content': rgb(var(--cds-color-content-disable)),
+    ),
+    focus: (
+      'outline': rgb(var(--cds-color-line-focus-outline))
+    ),
+  ),
+  secondary: (
+    default: (
+      'background': rgb(var(--cds-color-brand-secondary)),
+      'border': rgb(var(--cds-color-brand-secondary-border)),
+      'content': rgb(var(--cds-color-brand-primary-content)),
+    ),
+    hover: (
+      'background': rgb(var(--cds-color-brand-secondary-hover)),
+      'border': rgb(var(--cds-color-brand-secondary-hover)),
+      'content': rgb(var(--cds-color-brand-primary-content)),
+    ),
+    active: (
+      'background': rgb(var(--cds-color-brand-secondary-active)),
+      'border': rgb(var(--cds-color-brand-secondary-active)),
+      'content': rgb(var(--cds-color-brand-primary-content)),
+    ),
+    disabled: (
+      'background': rgb(var(--cds-color-fill-disable)),
+      'border': rgb(var(--cds-color-fill-disable)),
+      'content': rgb(var(--cds-color-content-disable)),
+    ),
+    focus: (
+      'outline': rgb(var(--cds-color-line-focus-outline))
+    ),
+  ),
+  tertiary: (
+    default: (
+      'background': rgb(var(--cds-color-fill-secondary)),
+      'border': rgb(var(--cds-color-fill-secondary)),
+      'content': rgb(var(--cds-color-content-primary)),
+    ),
+    hover: (
+      'background': rgb(var(--cds-color-fill-secondary-hover)),
+      'border': rgb(var(--cds-color-fill-secondary-hover)),
+      'content': rgb(var(--cds-color-content-primary)),
+    ),
+    active: (
+      'background': rgb(var(--cds-color-fill-secondary-active)),
+      'border': rgb(var(--cds-color-fill-secondary-active)),
+      'content': rgb(var(--cds-color-content-primary)),
+    ),
+    disabled: (
+      'background': rgb(var(--cds-color-fill-disable)),
+      'border': rgb(var(--cds-color-fill-disable)),
+      'content': rgb(var(--cds-color-content-disable)),
+    ),
+    focus: (
+      'outline': rgb(var(--cds-color-line-focus-outline))
+    ),
+  ),
+  inverse: (
+    default: (
+      'background': rgb(var(--cds-color-fill-primary)),
+      'border': transparent,
+      'content': rgb(var(--cds-color-content-primary)),
+    ),
+    hover: (
+      'background': rgb(var(--cds-color-fill-primary-hover)),
+      'border': transparent,
+      'content': rgb(var(--cds-color-content-primary)),
+    ),
+    active: (
+      'background': rgb(var(--cds-color-fill-primary-active)),
+      'border': transparent,
+      'content': rgb(var(--cds-color-content-primary)),
+    ),
+    disabled: (
+      'background': rgb(var(--cds-color-fill-disable)),
+      'border': rgb(var(--cds-color-fill-disable)),
+      'content': rgb(var(--cds-color-content-disable)),
+    ),
+    focus: (
+      'outline': rgb(var(--cds-color-line-focus-outline))
+    ),
+  )
+) !default;
+
+// ======================= Sizes =======================
+$button-sizes: (
+  xs: (
+    'height': tools.to-rem(20px),
+    'padding': var(--cds-spacing-100),
+    'gap': var(--cds-spacing-100),
+    'font-size': '100',
+    'loader': tools.to-rem(12px)
+  ),
+  sm: (
+    'height': tools.to-rem(24px),
+    'padding': var(--cds-spacing-200),
+    'gap': var(--cds-spacing-200),
+    'font-size': '200',
+    'loader': tools.to-rem(16px)
+  ),
+  md: (
+    'height': tools.to-rem(32px),
+    'padding': var(--cds-spacing-400),
+    'gap': var(--cds-spacing-200),
+    'font-size': '200',
+    'loader': tools.to-rem(20px)
+  ),
+  lg: (
+    'height': tools.to-rem(48px),
+    'padding': var(--cds-spacing-500),
+    'gap': var(--cds-spacing-300),
+    'font-size': '400',
+    'loader': tools.to-rem(24px)
+  ),
+  xl: (
+    'height': tools.to-rem(64px),
+    'padding': var(--cds-spacing-600),
+    'gap': var(--cds-spacing-400),
+    'font-size': '600',
+    'loader': tools.to-rem(32px)
+  ),
+) !default;
+
+// ======================= Stacked sizes =======================
+// Высота удвоена относительно обычной кнопки, чтобы вместить иконку над текстом.
+$button-stacked-sizes: (
+  xs: (
+    'height': tools.to-rem(40px),
+    'padding': var(--cds-spacing-100)
+  ),
+  sm: (
+    'height': tools.to-rem(48px),
+    'padding': var(--cds-spacing-200)
+  ),
+  md: (
+    'height': tools.to-rem(64px),
+    'padding': var(--cds-spacing-300)
+  ),
+  lg: (
+    'height': tools.to-rem(96px),
+    'padding': var(--cds-spacing-400)
+  ),
+  xl: (
+    'height': tools.to-rem(128px),
+    'padding': var(--cds-spacing-500)
+  ),
+) !default;

package/src/components/CdsButtonGroup/CdsButtonGroup.scss

@@ -0,0 +1,62 @@
+@use '../../styles/tools';
+@use './styles/CdsButtonGroup.variables' as *;
+
+@include tools.layer('components') {
+  .cds-button-group {
+    display: inline-flex;
+    flex-wrap: nowrap;
+    min-width: 0;
+    max-width: 100%;
+    overflow: auto hidden;
+    vertical-align: middle;
+    border-radius: $button-group-border-radius;
+
+    .cds-button {
+      border-radius: 0;
+    }
+
+    &--horizontal {
+      .cds-button {
+        &:first-child {
+          border-start-start-radius: inherit;
+          border-end-start-radius: inherit;
+        }
+
+        &:last-child {
+          border-start-end-radius: inherit;
+          border-end-end-radius: inherit;
+        }
+      }
+
+      &.cds-button-group--divided {
+        .cds-button:not(:last-child) {
+          border-inline-end: $button-group-divider-border-width $button-group-divider-border-style
+            $button-group-divider-border-color;
+        }
+      }
+    }
+
+    &--vertical {
+      flex-direction: column;
+
+      .cds-button {
+        &:first-child {
+          border-start-start-radius: inherit;
+          border-start-end-radius: inherit;
+        }
+
+        &:last-child {
+          border-end-start-radius: inherit;
+          border-end-end-radius: inherit;
+        }
+      }
+
+      &.cds-button-group--divided {
+        .cds-button:not(:last-child) {
+          border-block-end: $button-group-divider-border-width $button-group-divider-border-style
+            $button-group-divider-border-color;
+        }
+      }
+    }
+  }
+}

package/src/components/CdsButtonGroup/styles/_CdsButtonGroup.variables.scss

@@ -0,0 +1,7 @@
+@use '../../../styles/settings';
+@use '../../CdsButton/styles/CdsButton.variables' as button;
+
+$button-group-border-radius: button.$button-border-radius !default;
+$button-group-divider-border-width: var(--cds-border-100) !default;
+$button-group-divider-border-style: settings.$border-style-root !default;
+$button-group-divider-border-color: rgb(var(--cds-color-line-tertiary)) !default;

package/src/components/CdsButtonToggle/CdsButtonToggle.scss

@@ -0,0 +1,19 @@
+@use 'sass:map';
+@use '../../styles/tools';
+@use './styles/CdsButtonToggle.variables' as *;
+
+@include tools.layer('components') {
+  .cds-button-toggle {
+    @each $appearance, $variant-map in $button-toggle-appearances {
+      > .cds-button--appearance-#{$appearance}.cds-button--active:not(.cds-button--disabled) {
+        color: map.get($variant-map, 'active', 'content');
+        background-color: map.get($variant-map, 'active', 'background');
+        border-color: map.get($variant-map, 'active', 'border');
+
+        svg {
+          fill: map.get($variant-map, 'active', 'content');
+        }
+      }
+    }
+  }
+}

package/src/components/CdsButtonToggle/styles/_CdsButtonToggle.variables.scss

@@ -0,0 +1,3 @@
+@use '../../CdsButton/styles/CdsButton.variables' as button;
+
+$button-toggle-appearances: button.$button-appearances !default;

package/src/components/CdsCard/CdsCard.scss

@@ -0,0 +1,194 @@
+@use '../../styles/tools';
+@use './styles/CdsCard.variables' as *;
+
+@include tools.layer('components') {
+  .cds-card {
+    position: relative;
+    z-index: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    overflow-wrap: $card-overflow-wrap;
+    text-decoration: none;
+    outline: $card-outline-width transparent;
+    background-color: $card-background-color;
+    border: $card-border-width $card-border-color;
+    border-radius: $card-border-radius;
+
+    @include tools.cds-animation-motion(tools.$cds-duration-very-fast, 'ease-in-out', 'basic');
+
+    &--disabled {
+      pointer-events: none;
+      user-select: none;
+
+      >:not(.cds-card__loader) {
+        opacity: $card-disabled-opacity;
+      }
+    }
+
+    &--interactive {
+      color: inherit;
+      cursor: pointer;
+
+      &:hover {
+        border-color: $card-hover-border-color;
+      }
+    }
+
+    &--borderless {
+      border: none;
+    }
+
+    &--selected {
+      border-color: $card-selected-border-color;
+
+      &:hover {
+        border-color: $card-selected-border-color;
+      }
+    }
+
+    &--borderless {
+      border: none;
+    }
+
+    &:focus-visible {
+      outline-color: $card-focus-border-color;
+      outline-offset: $card-outline-offset;
+    }
+
+    &__image {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: -1;
+      display: flex;
+      flex: 1 1 auto;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    &__loader {
+      position: absolute;
+      inset: 0 0 auto;
+      z-index: 1;
+      width: 100%;
+    }
+  }
+
+  .cds-card-group {
+    display: flex;
+    overflow: hidden;
+
+    &--horizontal {
+      flex-direction: row;
+    }
+
+    &--vertical {
+      flex-direction: column;
+    }
+  }
+
+  .cds-card-item {
+    display: grid;
+    flex: $card-header-flex;
+    grid-template-areas: "prepend content append";
+    grid-template-columns: max-content auto max-content;
+    align-items: $card-item-align-items;
+    padding: $card-item-padding;
+
+    &--align-start {
+      align-items: flex-start;
+    }
+
+    &--align-center {
+      align-items: center;
+    }
+
+    &--align-end {
+      align-items: flex-end;
+    }
+
+    + .cds-card-text {
+      padding-top: 0;
+    }
+
+    &__prepend,
+    &__append {
+      display: flex;
+      align-items: center;
+    }
+
+    &__prepend {
+      grid-area: prepend;
+      padding-inline-end: $card-prepend-padding-inline-end;
+    }
+
+    &__append {
+      grid-area: append;
+      padding-inline-start: $card-append-padding-inline-start;
+    }
+
+    &__content {
+      grid-area: content;
+      gap: $card-content-gap;
+      overflow: hidden;
+    }
+  }
+
+  .cds-card-title {
+    display: block;
+    flex: $card-title-flex;
+    min-width: 0;
+    text-transform: none;
+    word-break: normal;
+    overflow-wrap: normal;
+
+    @include tools.ellipsis;
+    @include tools.cds-text-bold-300;
+  }
+
+  .cds-card-subtitle {
+    display: block;
+    flex: none;
+    overflow: hidden;
+    opacity: $card-subtitle-text-opacity;
+
+    @include tools.cds-text-regular-200;
+  }
+
+  .cds-card-text {
+    flex: 1 1 auto;
+    padding: $card-text-padding;
+    text-transform: none;
+
+    @include tools.cds-text-regular-200;
+
+    + .cds-card-actions {
+      padding-top: 0;
+    }
+  }
+
+  .cds-card-actions {
+    display: flex;
+    flex: none;
+    align-items: center;
+    padding: $card-item-padding;
+
+    &--align-start {
+      justify-content: flex-start;
+    }
+
+    &--align-center {
+      justify-content: center;
+    }
+
+    &--align-end {
+      justify-content: flex-end;
+    }
+  }
+
+  .cds-card-divider {
+    padding-inline: $card-item-padding;
+  }
+}

package/src/components/CdsCard/styles/CdsCard.variables.scss

@@ -0,0 +1,36 @@
+@use '../../../styles/tools';
+
+// CdsCardHeader
+$card-header-flex: none !default;
+
+// CdsCard
+$card-overflow-wrap: break-word !default;
+$card-prepend-padding-inline-end: var(--cds-spacing-200) !default;
+$card-append-padding-inline-start: var(--cds-spacing-200) !default;
+$card-gap: var(--cds-spacing-400) !default;
+$card-border-radius: var(--cds-border-radius-300) !default;
+$card-border-width: var(--cds-border-100) solid !default;
+$card-outline-width: var(--cds-border-200) solid !default;
+$card-border-color: rgb(var(--cds-color-line-tertiary)) !default;
+$card-background-color: rgb(var(--cds-color-surface-primary)) !default;
+$card-text-color: rgb(var(--cds-color-content-primary)) !default;
+$card-outline-offset: var(--cds-spacing-50) !default;
+$card-disabled-opacity: 0.5 !default;
+$card-content-gap: var(--cds-spacing-100) !default;
+$card-hover-border-color: rgb(var(--cds-color-line-tertiary-hover)) !default;
+$card-selected-border-color: rgb(var(--cds-color-line-selected)) !default;
+$card-focus-border-color: rgb(var(--cds-color-line-focus-outline)) !default;
+
+// CdsCardItem
+$card-item-align-items: flex-start !default;
+$card-item-padding: var(--cds-spacing-400) !default;
+
+// CdsCardText
+$card-text-padding: var(--cds-spacing-400) !default;
+
+// CdsCardTitle
+$card-title-flex: none !default;
+
+
+// CdsCardSubtitle
+$card-subtitle-text-opacity: 0.8 !default;

package/src/components/CdsCarousel/CdsCarousel.scss

@@ -0,0 +1,76 @@
+@use '../../styles/tools';
+@use './styles/CdsCarousel.variables' as *;
+
+@include tools.layer('components') {
+  .cds-carousel {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+
+    &__controls {
+      position: absolute;
+      bottom: 0;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: $carousel-controls-size;
+      background: $carousel-controls-background;
+
+      .cds-button.cds-functional-button.cds-carousel__controls-item {
+        margin: $carousel-dot-margin;
+        color: $carousel-controls-color;
+
+        svg {
+          opacity: $carousel-dot-inactive-opacity;
+          fill: currentcolor;
+        }
+
+        &:hover {
+          background: none;
+
+          svg {
+            opacity: $carousel-dot-hover-opacity;
+          }
+        }
+      }
+
+      .cds-carousel__controls-item--active svg {
+        opacity: $carousel-dot-active-opacity;
+      }
+    }
+
+    &__progress {
+      right: 0;
+      bottom: 0;
+      left: 0;
+      margin: 0;
+    }
+  }
+
+  .cds-carousel-item {
+    display: block;
+    height: inherit;
+    text-decoration: none;
+
+    > .cds-image {
+      height: inherit;
+    }
+  }
+
+  // Modifier
+  .cds-carousel--hide-delimiter-background {
+    .cds-carousel__controls {
+      background: transparent;
+    }
+  }
+
+  .cds-carousel--vertical-delimiters {
+    .cds-carousel__controls {
+      flex-direction: column;
+      width: $carousel-controls-size;
+      height: 100%;
+    }
+  }
+}

package/src/components/CdsCarousel/styles/_CdsCarousel.variables.scss

@@ -0,0 +1,7 @@
+$carousel-controls-size: 50px !default;
+$carousel-controls-background: rgb(var(--cds-color-surface-overlay)) !default;
+$carousel-controls-color: rgb(var(--cds-color-content-on-dark)) !default;
+$carousel-dot-margin: 0 var(--cds-spacing-100) !default;
+$carousel-dot-inactive-opacity: 0.5 !default;
+$carousel-dot-active-opacity: 1 !default;
+$carousel-dot-hover-opacity: 0.8 !default;

package/src/components/CdsCheckbox/CdsCheckbox.scss

@@ -0,0 +1,20 @@
+@use 'sass:map';
+@use '../../styles/tools';
+@use './styles/CdsCheckbox.variables' as *;
+@use './styles/CdsCheckbox.mixins' as *;
+
+@include tools.layer('components') {
+  .cds-checkbox {
+    &.cds-input {
+      flex: 0 1 auto;
+    }
+
+    &.cds-input--size {
+      @each $size, $_ in $checkbox-label-margins {
+        &-#{$size} {
+          @include use-checkbox-size($size);
+        }
+      }
+    }
+  }
+}

package/src/components/CdsCheckbox/styles/_CdsCheckbox.mixins.scss

@@ -0,0 +1,24 @@
+@use 'sass:map';
+@use './CdsCheckbox.variables' as *;
+@use '../../CdsCheckboxButton/styles/CdsCheckboxButton.variables' as button;
+
+@mixin use-checkbox-size($variant: 'md') {
+  $control-size: map.get(button.$checkbox-button-sizes, $variant);
+  $control-spacing: map.get(button.$checkbox-control-spacings, $variant);
+  $label-margin: map.get($checkbox-label-margins, $variant);
+
+  @if $control-size {
+    .cds-checkbox-button {
+      --cds-checkbox-button-size: #{$control-size};
+      --cds-checkbox-control-spacing: #{$control-spacing};
+    }
+
+    // Расстояние между лейблом и описанием — зазор строк контрола, а не отступ
+    // лейбла: иначе margin сдвигает лейбл вверх относительно чекбокса.
+    .cds-selection-control {
+      row-gap: $label-margin;
+    }
+  } @else {
+    @warn "Size #{$variant} is not defined in the $checkbox-button-sizes map.";
+  }
+}

package/src/components/CdsCheckbox/styles/_CdsCheckbox.variables.scss

@@ -0,0 +1,8 @@
+// ======================= Sizes =======================
+$checkbox-label-margins: (
+  xs: 0,
+  sm: var(--cds-spacing-50),
+  md: var(--cds-spacing-50),
+  lg: var(--cds-spacing-50),
+  xl: var(--cds-spacing-100)
+) !default;