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

package/src/components/CdsTextInput/CdsTextInput.scss

@@ -0,0 +1,84 @@
+@use 'sass:map';
+@use 'sass:selector';
+@use '../../styles/tools';
+@use '../CdsField/styles/CdsField.variables' as *;
+@use './styles/CdsTextInput.variables' as *;
+
+@include tools.layer('components') {
+  .cds-text-input {
+    input {
+      flex: 1;
+      min-width: 0;
+      color: inherit;
+      transition: $field-input-transition;
+
+      &:focus,
+      &:active {
+        outline: none;
+      }
+
+      &:invalid {
+        box-shadow: none
+      }
+    }
+
+    .cds-field {
+      cursor: text;
+
+      &:not(.cds-field--reverse) {
+        .cds-field__input {
+          @at-root #{selector.append('.cds-text-input--prefixed', &)} {
+            --cds-field-padding-start: #{$text-input-padding-start};
+          }
+
+          @at-root #{selector.append('.cds-text-input--suffixed', &)} {
+            --cds-field-padding-end: #{$text-input-padding-end};
+          }
+        }
+      }
+
+      &.cds-field--reverse {
+        .cds-field__input {
+          @at-root #{selector.append('.cds-text-input--prefixed', &)} {
+            --cds-field-padding-end: #{$text-input-padding-start};
+          }
+
+          @at-root #{selector.append('.cds-text-input--suffixed', &)} {
+            --cds-field-padding-start: #{$text-input-padding-end};
+          }
+        }
+      }
+    }
+
+    &__prefix,
+    &__suffix {
+      display: flex;
+      align-items: center;
+      color: $text-input-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);
+      }
+    }
+  }
+}

package/src/components/CdsTextInput/styles/_CdsTextInput.variables.scss

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

package/src/components/CdsTimePicker/CdsTimePicker.scss

@@ -0,0 +1,93 @@
+@use 'sass:map';
+@use '../../styles/tools';
+@use './styles/CdsTimePicker.variables' as *;
+
+@include tools.layer('components') {
+  .cds-time-picker {
+    display: flex;
+    flex-direction: column;
+    gap: $time-picker-container-gap;
+    align-items: center;
+    max-width: 100%;
+    padding: $time-picker-paddings;
+    color: map.get($time-picker-color, 'color');
+
+    &__container {
+      display: inline-flex;
+      gap: $time-picker-clock-gap;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &__clock {
+      display: inline-flex;
+      flex-direction: column;
+      gap: $time-picker-clock-gap;
+      align-items: center;
+      justify-content: center;
+
+      .cds-functional-button {
+        width: $time-picker-function-btn-size;
+        height: $time-picker-function-btn-size;
+        padding: 0;
+      }
+    }
+
+    &__input {
+      width: $time-picker-input-width;
+      text-align: center;
+      outline: none;
+      border: none;
+
+      .cds-field--size-md {
+        --cds-field-padding-start: #{$time-picker-input-padding};
+        --cds-field-padding-end: #{$time-picker-input-padding};
+      }
+
+      .cds-input__control {
+        min-height: $time-picker-input-height;
+      }
+
+      .cds-field__input {
+        min-height: $time-picker-input-height;
+
+        input {
+          padding: 0;
+          text-overflow: inherit;
+          text-align: center;
+          appearance: textfield;
+        }
+      }
+
+      input::-webkit-outer-spin-button,
+      input::-webkit-inner-spin-button {
+        margin: 0;
+        appearance: none;
+      }
+    }
+
+    &__separator {
+      @include tools.cds-text-regular-200;
+    }
+
+    &__ampm {
+      margin-left: $time-picker-ampm-offset;
+    }
+
+    &__now {
+      width: 100%;
+
+      > .cds-button {
+        width: 100%;
+      }
+    }
+
+    &--disabled {
+      cursor: not-allowed;
+    }
+
+    &--readonly {
+      pointer-events: none;
+    }
+  }
+}

package/src/components/CdsTimePicker/styles/_CdsTimePicker.variables.scss

@@ -0,0 +1,13 @@
+@use '../../../styles/tools';
+
+$time-picker-color: (
+  'color': rgb(var(--cds-color-content-primary)),
+) !default;
+$time-picker-paddings: var(--cds-spacing-200) var(--cds-spacing-300) !default;
+$time-picker-container-gap: var(--cds-spacing-300) !default;
+$time-picker-clock-gap: var(--cds-spacing-50) !default;
+$time-picker-input-padding: calc(var(--cds-spacing-200) - 1px) !default;
+$time-picker-input-width: tools.to-rem(32px) !default;
+$time-picker-input-height: calc(#{tools.to-rem(28px)} - var(--cds-border-200)) !default;
+$time-picker-ampm-offset: calc(var(--cds-spacing-300) - var(--cds-spacing-50)) !default;
+$time-picker-function-btn-size: tools.to-rem(16px) !default;

package/src/components/CdsToast/CdsToast.scss

@@ -0,0 +1,207 @@
+@use '../../styles/settings';
+@use '../../styles/tools';
+@use './styles/CdsToast.variables' as *;
+
+@include tools.layer('components') {
+  .cds-toast {
+    --cds-toast-current-offset: var(--cds-toast-offset);
+
+    z-index: $toast-z-index;
+    justify-content: center;
+    margin: $toast-margin;
+    margin-inline-end: calc(#{$toast-margin} + var(--cds-scrollbar-offset));
+    transform: translateY(calc(var(--cds-toast-direction) * var(--cds-toast-current-offset)));
+    transition: transform 0.2s settings.$standard-easing;
+
+    &:not(.cds-toast--center, .cds-toast--top) {
+      align-items: flex-end;
+    }
+
+    &__wrapper {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      min-width: $toast-min-width;
+      max-width: $toast-max-width;
+      min-height: $toast-min-height;
+      padding: $toast-padding;
+      overflow: hidden;
+      border: $toast-border;
+      border-radius: $toast-border-radius;
+      transition: 0.35s settings.$standard-easing;
+      transition-property: height, width;
+
+      @include tools.cds-shadow-bottom-300;
+
+      @media (forced-colors: active) {
+        border: thick solid;
+      }
+    }
+
+    &__header {
+      flex-basis: 100%;
+
+      &::after {
+        display: block;
+        flex-basis: 100%;
+        content: '';
+      }
+    }
+
+    &__prepend {
+      display: flex;
+      align-items: center;
+      align-self: center;
+      height: $toast-prepend-height;
+    }
+
+    &__title {
+      @include tools.cds-text-bold-300;
+    }
+
+    &__content {
+      flex: 1 1;
+      padding: $toast-content-padding;
+      margin-right: auto;
+      text-align: initial;
+
+      @include tools.cds-text-regular-300;
+    }
+
+    &__actions {
+      display: flex;
+      gap: $toast-action-gap;
+      align-items: center;
+      align-self: center;
+    }
+
+    &__timer {
+      position: absolute;
+      left: 0;
+      width: 100%;
+
+      &--top {
+        top: 0;
+      }
+
+      &--bottom {
+        bottom: 0;
+      }
+
+      .cds-progress-bar {
+        transition: 0.2s linear;
+      }
+    }
+
+    @each $status in (info, success, warning, danger, progress) {
+      &--#{$status} {
+        color: rgb(var(--cds-color-status-#{$status}-content));
+        background-color: rgb(var(--cds-color-status-#{$status}-fill));
+        border-color: rgb(var(--cds-color-status-#{$status}-line));
+      }
+    }
+
+    &--absolute {
+      position: absolute;
+      z-index: 1;
+    }
+
+    &--vertical .cds-toast__actions {
+      flex-basis: 100%;
+      justify-content: end;
+      padding-top: $toast-action-offset;
+
+      &::before {
+        display: block;
+        flex-basis: 100%;
+        content: '';
+      }
+    }
+
+    &--center {
+      align-items: center;
+      justify-content: center;
+    }
+
+    &--top {
+      align-items: flex-start;
+    }
+
+    &--bottom {
+      align-items: flex-end;
+    }
+
+    &--left,
+    &--start {
+      justify-content: flex-start;
+    }
+
+    &--right,
+    &--end {
+      justify-content: flex-end;
+    }
+
+    &--collapsed {
+      --cds-toast-current-offset: calc(var(--cds-toast-gap) * var(--cds-toast-index, 0));
+
+      .cds-toast__wrapper {
+        width: calc(var(--cds-toast-collapsed-width) - 2 * var(--cds-toast-gap) * var(--cds-toast-index, 0));
+        min-width: 0;
+        height: var(--cds-toast-collapsed-height);
+
+        > * {
+          opacity: 0;
+        }
+      }
+
+      &.cds-toast--start,
+      &.cds-toast--left {
+        .cds-toast__wrapper {
+          transform: translateX(calc(var(--cds-toast-gap) * var(--cds-toast-index, 0)));
+        }
+      }
+
+      &.cds-toast--end,
+      &.cds-toast--right {
+        .cds-toast__wrapper {
+          transform: translateX(calc(-1 * var(--cds-toast-gap) * var(--cds-toast-index, 0)));
+        }
+      }
+
+      .cds-progress-bar {
+        opacity: 0;
+      }
+    }
+  }
+}
+
+@include tools.layer('transitions') {
+  .cds-toast-transition {
+    &-enter-active,
+    &-leave-active {
+      transition-timing-function: settings.$decelerated-easing;
+      transition-duration: 0.15s;
+    }
+
+    &-enter-active {
+      transition-property: opacity, transform;
+
+      @media (prefers-reduced-motion: reduce) {
+        transition-property: opacity;
+      }
+    }
+
+    &-enter-from {
+      opacity: 0;
+      transform: scale($toast-transition-scale);
+    }
+
+    &-leave-active {
+      transition-property: opacity;
+    }
+
+    &-leave-to {
+      opacity: 0;
+    }
+  }
+}

package/src/components/CdsToast/styles/_CdsToast.variables.scss

@@ -0,0 +1,16 @@
+@use '../../../styles/settings';
+@use '../../../styles/tools';
+
+$toast-z-index: 10000 !default;
+$toast-margin: var(--cds-spacing-400) !default;
+$toast-border: var(--cds-border-100) solid !default;
+$toast-border-radius: var(--cds-border-radius-200) !default;
+$toast-max-width: tools.to-rem(672px) !default;
+$toast-min-width: tools.to-rem(344px) !default;
+$toast-min-height: tools.to-rem(48px) !default;
+$toast-padding: var(--cds-spacing-300) !default;
+$toast-prepend-height: var(--cds-font-line-height-400) !default;
+$toast-content-padding: 0 var(--cds-spacing-400) !default;
+$toast-action-gap: var(--cds-spacing-400) !default;
+$toast-action-offset: var(--cds-spacing-300) !default;
+$toast-transition-scale: 0.8 !default;

package/src/components/CdsToggle/CdsToggle.scss

@@ -0,0 +1,192 @@
+@use 'sass:map';
+@use 'sass:math';
+@use '../../styles/tools';
+@use './styles/CdsToggle.variables' as *;
+
+@include tools.layer('components') {
+  .cds-toggle {
+    $md: map.get($toggle-sizes, md);
+    $md-h: map.get($md, track-height);
+    $md-on: map.get($md, thumb-on);
+
+    --cds-toggle-track-height: #{tools.to-rem(map.get($md, track-height))};
+    --cds-toggle-track-width: #{tools.to-rem(map.get($md, track-width))};
+    --cds-toggle-thumb-size: #{tools.to-rem(map.get($md, thumb-on))};
+    --cds-toggle-thumb-off-scale: #{math.div(map.get($md, thumb-off), map.get($md, thumb-on))};
+    --cds-toggle-thumb-pad: #{tools.to-rem(math.div($md-h - $md-on, 2))};
+    --cds-toggle-thumb-travel: #{tools.to-rem(map.get($md, track-width) - $md-on - ($md-h - $md-on))};
+    --cds-toggle-label-gap: #{map.get($md, label-gap)};
+    --cds-toggle-label-offset: #{map.get($md, label-offset)};
+
+    .cds-selection-control {
+      min-height: var(--cds-toggle-track-height);
+    }
+
+    .cds-selection-control__wrapper {
+      position: relative;
+      width: var(--cds-toggle-track-width);
+      height: var(--cds-toggle-track-height);
+    }
+
+    .cds-selection-control__input {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: $toggle-track-radius;
+    }
+
+    // Расстояние между лейблом и описанием — зазор строк контрола, а не отступ
+    // лейбла: иначе margin сдвигает лейбл вверх относительно переключателя.
+    .cds-selection-control {
+      row-gap: var(--cds-toggle-label-gap);
+    }
+
+    .cds-label,
+    .cds-description {
+      padding-inline-start: var(--cds-toggle-label-offset);
+    }
+
+  }
+
+  // ======================= Sizes =======================
+  @each $name, $cfg in $toggle-sizes {
+    $track-height: map.get($cfg, track-height);
+    $track-width: map.get($cfg, track-width);
+    $thumb-on: map.get($cfg, thumb-on);
+    $thumb-off: map.get($cfg, thumb-off);
+    $pad: math.div($track-height - $thumb-on, 2);
+
+    .cds-toggle--size-#{$name} {
+      --cds-toggle-track-height: #{tools.to-rem($track-height)};
+      --cds-toggle-track-width: #{tools.to-rem($track-width)};
+      --cds-toggle-thumb-size: #{tools.to-rem($thumb-on)};
+      --cds-toggle-thumb-off-scale: #{math.div($thumb-off, $thumb-on)};
+      --cds-toggle-thumb-pad: #{tools.to-rem($pad)};
+      --cds-toggle-thumb-travel: #{tools.to-rem($track-width - $thumb-on - 2 * $pad)};
+      --cds-toggle-label-gap: #{map.get($cfg, label-gap)};
+      --cds-toggle-label-offset: #{map.get($cfg, label-offset)};
+    }
+  }
+
+  // ======================= Track =======================
+  .cds-toggle__track {
+    position: absolute;
+    inset: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    min-width: var(--cds-toggle-track-width);
+    height: var(--cds-toggle-track-height);
+    padding: 0 var(--cds-spacing-100);
+    cursor: pointer;
+    background-color: map.get($toggle-colors, track, unselected);
+    border-radius: $toggle-track-radius;
+    transition: $toggle-track-transition;
+
+    .cds-selection-control--dirty & {
+      background-color: map.get($toggle-colors, track, selected);
+    }
+  }
+
+  .cds-toggle__track-true {
+    margin-inline-end: auto;
+
+    .cds-selection-control:not(.cds-selection-control--dirty) & {
+      opacity: 0;
+    }
+  }
+
+  .cds-toggle__track-false {
+    margin-inline-start: auto;
+
+    .cds-selection-control--dirty & {
+      opacity: 0;
+    }
+  }
+
+  // ======================= Thumb =======================
+  .cds-toggle__thumb {
+    position: absolute;
+    top: 50%;
+    left: var(--cds-toggle-thumb-pad);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--cds-toggle-thumb-size);
+    height: var(--cds-toggle-thumb-size);
+    overflow: hidden;
+    color: map.get($toggle-colors, icon, selected);
+    pointer-events: none;
+    background-color: map.get($toggle-colors, thumb, unselected);
+    border-radius: $toggle-thumb-radius;
+    transform: translateX(0) translateY(-50%) scale(var(--cds-toggle-thumb-off-scale));
+    transition: $toggle-thumb-transition;
+
+    &--filled {
+      transform: translateX(0) translateY(-50%) scale(1);
+    }
+
+    .cds-selection-control--dirty & {
+      background-color: map.get($toggle-colors, thumb, selected);
+      transform: translateX(var(--cds-toggle-thumb-travel)) translateY(-50%) scale(1);
+    }
+
+    .cds-icon {
+      font-size: var(--cds-toggle-thumb-size);
+    }
+  }
+
+  // ======================= Loader =======================
+  .cds-toggle__loader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  // ======================= Focus =======================
+  .cds-toggle {
+    .cds-selection-control--focus-visible .cds-toggle__track {
+      outline: $toggle-focus-outline-width solid $toggle-focus-outline-color;
+      outline-offset: $toggle-focus-outline-offset;
+    }
+  }
+
+  // ======================= Indeterminate =======================
+  .cds-toggle--indeterminate {
+    .cds-toggle__thumb {
+      transform: translateX(calc(var(--cds-toggle-thumb-travel) / 2)) translateY(-50%) scale(0.75);
+    }
+  }
+
+  // ======================= Disabled =======================
+  .cds-toggle {
+    .cds-selection-control--disabled {
+      opacity: 1;
+
+      .cds-toggle__track {
+        background-color: map.get($toggle-colors, track, disabled-unselected);
+      }
+
+      .cds-toggle__thumb {
+        background-color: map.get($toggle-colors, thumb, disabled);
+      }
+
+      &.cds-selection-control--dirty .cds-toggle__track {
+        background-color: map.get($toggle-colors, track, disabled-selected);
+      }
+    }
+
+    // ======================= Error =======================
+    .cds-selection-control--error:not(.cds-selection-control--disabled) {
+      .cds-toggle__track {
+        background-color: map.get($toggle-colors, track, error);
+      }
+
+      .cds-toggle__thumb {
+        color: map.get($toggle-colors, icon, error);
+        background-color: map.get($toggle-colors, thumb, error);
+      }
+    }
+  }
+}

package/src/components/CdsToggle/styles/_CdsToggle.variables.scss

@@ -0,0 +1,81 @@
+@use '../../../styles/tools';
+
+// ======================= Transitions =======================
+$toggle-track-transition: background-color (tools.$cds-duration-fast + ms) tools.get-motion('ease-in-out', 'basic') !default;
+$toggle-thumb-transition: transform (tools.$cds-duration-fast + ms) tools.get-motion('ease-in-out', 'accent'),
+  background-color (tools.$cds-duration-fast + ms) tools.get-motion('ease-in-out', 'basic') !default;
+
+// ======================= Radius =======================
+$toggle-track-radius: tools.to-rem(9999px) !default;
+$toggle-thumb-radius: 50% !default;
+
+// ======================= Sizes =======================
+// Каждый размер: высота дорожки, ширина дорожки, размер «бегунка» (вкл.), размер «бегунка» (выкл.).
+$toggle-sizes: (
+  xs: (
+    track-height: 18px,
+    track-width: 34px,
+    thumb-on: 12px,
+    thumb-off: 8px,
+    label-gap: 0,
+    label-offset: var(--cds-spacing-50)
+  ),
+  sm: (
+    track-height: 20px,
+    track-width: 36px,
+    thumb-on: 14px,
+    thumb-off: 10px,
+    label-gap: 0,
+    label-offset: var(--cds-spacing-100)
+  ),
+  md: (
+    track-height: 24px,
+    track-width: 44px,
+    thumb-on: 18px,
+    thumb-off: 14px,
+    label-gap: var(--cds-spacing-50),
+    label-offset: var(--cds-spacing-200)
+  ),
+  lg: (
+    track-height: 28px,
+    track-width: 52px,
+    thumb-on: 20px,
+    thumb-off: 16px,
+    label-gap: var(--cds-spacing-50),
+    label-offset: var(--cds-spacing-200)
+  ),
+  xl: (
+    track-height: 40px,
+    track-width: 78px,
+    thumb-on: 30px,
+    thumb-off: 26px,
+    label-gap: var(--cds-spacing-100),
+    label-offset: var(--cds-spacing-300)
+  )
+) !default;
+
+// ======================= Colors =======================
+$toggle-colors: (
+  track: (
+    unselected: rgb(var(--cds-color-fill-secondary)),
+    selected: rgb(var(--cds-color-status-success-surface)),
+    disabled-unselected: rgb(var(--cds-color-fill-disable)),
+    disabled-selected: rgb(var(--cds-color-fill-disable)),
+    error: rgb(var(--cds-color-status-danger-surface))
+  ),
+  thumb: (
+    unselected: rgb(var(--cds-color-content-on-dark)),
+    selected: rgb(var(--cds-color-content-on-dark)),
+    disabled: rgb(var(--cds-color-content-disable)),
+    error: rgb(var(--cds-color-content-on-dark))
+  ),
+  icon: (
+    selected: rgb(var(--cds-color-fill-selected)),
+    error: rgb(var(--cds-color-status-danger-content))
+  )
+) !default;
+
+// ======================= Focus =======================
+$toggle-focus-outline-color: rgb(var(--cds-color-line-focus-outline)) !default;
+$toggle-focus-outline-width: var(--cds-border-200) !default;
+$toggle-focus-outline-offset: var(--cds-spacing-50) !default;