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

package/src/components/CdsFunctionalButton/CdsFunctionalButton.scss

@@ -0,0 +1,49 @@
+@use 'sass:map';
+@use '../../styles/tools';
+@use './styles/CdsFunctionalButton.variables' as *;
+
+@include tools.layer('components') {
+  .cds-button.cds-functional-button {
+    color: map.get($cds-functional-button-colors, 'default', 'content');
+    background: map.get($cds-functional-button-colors, 'default', 'background');
+    border-color: map.get($cds-functional-button-colors, 'default', 'border');
+
+    svg {
+      fill: map.get($cds-functional-button-colors, 'default', 'content');
+    }
+
+    &:hover {
+      color: map.get($cds-functional-button-colors, 'hover', 'content');
+      background: map.get($cds-functional-button-colors, 'hover', 'background');
+      border-color: map.get($cds-functional-button-colors, 'hover', 'border');
+
+      svg {
+        fill: map.get($cds-functional-button-colors, 'hover', 'content');
+      }
+    }
+
+    &:active {
+      color: map.get($cds-functional-button-colors, 'active', 'content');
+      background: map.get($cds-functional-button-colors, 'active', 'background');
+      border-color: map.get($cds-functional-button-colors, 'active', 'border');
+
+      svg {
+        fill: map.get($cds-functional-button-colors, 'active', 'content');
+      }
+    }
+
+    &:focus-visible {
+      outline-color: map.get($cds-functional-button-colors, 'focus', 'outline');
+    }
+
+    &.cds-button--disabled {
+      color: map.get($cds-functional-button-colors, 'disabled', 'content');
+      background: map.get($cds-functional-button-colors, 'disabled', 'background');
+      border-color: map.get($cds-functional-button-colors, 'disabled', 'border');
+
+      svg {
+        fill: map.get($cds-functional-button-colors, 'disabled', 'content');
+      }
+    }
+  }
+}

package/src/components/CdsFunctionalButton/styles/_CdsFunctionalButton.variables.scss

@@ -0,0 +1,25 @@
+$cds-functional-button-colors: (
+  default: (
+    'background': transparent,
+    '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': transparent,
+    'border': transparent,
+    'content': rgb(var(--cds-color-content-disable)),
+  ),
+  focus: (
+    'outline': rgb(var(--cds-color-line-focus-outline))
+  ),
+)

package/src/components/CdsGrid/components/CSSGrid.scss

@@ -0,0 +1,3 @@
+@use '../../../styles/utilities/grid' as *;
+@include css-grid;
+@include aspect-ratio;

package/src/components/CdsGrid/components/FlexGrid.scss

@@ -0,0 +1,3 @@
+@use '../../../styles/utilities/grid' as *;
+@include flex-grid;
+@include aspect-ratio;

package/src/components/CdsHeader/CdsHeader.scss

@@ -0,0 +1,36 @@
+@use '../../styles/tools';
+@use './styles/CdsHeader.variables' as *;
+
+@include tools.layer('components') {
+  .cds-header {
+    position: relative;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: tools.z('cds-layer-extra-high');
+    color: $header-color;
+    background: $header-background;
+
+    @include tools.cds-animation-motion(tools.$cds-duration-fast, 'ease-in-out', 'accent');
+
+    &--absolute {
+      position: absolute;
+    }
+
+    &--fixed {
+      position: fixed;
+    }
+
+    &--hidden {
+      transform: translateY(-110%);
+    }
+
+    &--bordered {
+      border-bottom: var(--cds-border-100) solid $header-border-color;
+    }
+
+    &--elevated {
+      @include tools.cds-shadow-bottom-100;
+    }
+  }
+}

package/src/components/CdsHeader/styles/_CdsHeader.variables.scss

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

package/src/components/CdsHighlight/CdsHighlight.scss

@@ -0,0 +1,16 @@
+@use '../../styles/tools';
+@use './styles/CdsHighlight.variables' as *;
+
+@include tools.layer('components') {
+  .cds-highlight {
+    &__mark {
+      color: var(--cds-highlight-color, #{$highlight-color});
+      background: var(--cds-highlight-background, #{$highlight-background});
+      border-radius: var(--cds-highlight-border-radius, #{$highlight-border-radius});
+
+      @media (forced-colors: active) {
+        background: buttontext !important;
+      }
+    }
+  }
+}

package/src/components/CdsHighlight/styles/_CdsHighlight.variables.scss

@@ -0,0 +1,8 @@
+$highlight-opacity: 8% !default;
+$highlight-background: color-mix(
+  in srgb,
+  currentcolor var(--cds-highlight-opacity, $highlight-opacity),
+  transparent
+) !default;
+$highlight-border-radius: var(--cds-border-radius-100) !default;
+$highlight-color: inherit !default;

package/src/components/CdsIcon/CdsIcon.scss

@@ -0,0 +1,54 @@
+@use 'sass:map';
+@use '../../styles/tools';
+@use '../../styles/settings';
+@use './styles/CdsIcon.variables' as *;
+
+@include tools.layer('components') {
+  .cds-icon {
+    --cds-icon-size-multiplier: 1;
+
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: $icon-size;
+    min-width: $icon-size;
+    height: $icon-size;
+    font-feature-settings: 'liga';
+    line-height: $icon-line-height;
+    vertical-align: $icon-vertical-align;
+    text-align: center;
+    text-indent: $icon-text-indent;
+    letter-spacing: $icon-letter-spacing;
+    user-select: none;
+    opacity: var(--cds-icon-opacity, #{$icon-opacity});
+
+    &__svg, svg {
+      width: 100%;
+      height: 100%;
+      fill: currentcolor;
+    }
+
+    @each $name in settings.$sizes {
+      &--size-#{$name} {
+        font-size: calc(var(--cds-icon-size-multiplier) * #{map.get($icon-sizes, $name)});
+      }
+    }
+
+    &--clickable {
+      cursor: pointer;
+    }
+
+    &--disabled {
+      pointer-events: none;
+    }
+
+    &--start {
+      margin-inline-end: $icon-margin-start;
+    }
+
+    &--end {
+      margin-inline-start: $icon-margin-end;
+    }
+  }
+}

package/src/components/CdsIcon/styles/_CdsIcon.variables.scss

@@ -0,0 +1,20 @@
+@use '../../../styles/tools';
+
+$icon-size: 1em !default;
+$icon-opacity: 1 !default;
+$icon-letter-spacing: normal !default;
+$icon-line-height: 1 !default;
+$icon-margin-end: var(--cds-spacing-100) !default;
+$icon-margin-start: var(--cds-spacing-100) !default;
+$icon-left-margin-left: var(--cds-spacing-200) !default;
+$icon-vertical-align: middle !default;
+$icon-text-indent: 0 !default;
+
+// Sizes
+$icon-sizes: (
+  'xs': tools.to-rem(12px),
+  'sm': tools.to-rem(14px),
+  'md': tools.to-rem(16px),
+  'lg': tools.to-rem(20px),
+  'xl': tools.to-rem(24px),
+) !default;

package/src/components/CdsImage/CdsImage.scss

@@ -0,0 +1,62 @@
+@use '../../styles/tools';
+@use './styles/CdsImage.variables' as *;
+
+@include tools.layer('components') {
+  .cds-image {
+    z-index: 0;
+
+    &.cds-image--absolute {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: -1;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    &.cds-image--fit-content {
+      max-width: fit-content;
+
+      > .cds-image__img {
+        position: relative;
+      }
+
+      > .cds-responsive__sizer {
+        display: none;
+      }
+    }
+
+    &--booting .cds-responsive__sizer {
+      transition: none;
+    }
+  }
+
+  .cds-image__img,
+  .cds-image__picture,
+  .cds-image__gradient,
+  .cds-image__placeholder,
+  .cds-image__error {
+    z-index: -1;
+
+    @include tools.absolute;
+  }
+
+  .cds-image__img {
+    &--preload {
+      filter: $image-preload-filter;
+    }
+
+    &--contain {
+      object-fit: contain;
+    }
+
+    &--cover {
+      object-fit: cover;
+    }
+  }
+
+  .cds-image__gradient {
+    background-repeat: no-repeat;
+  }
+}

package/src/components/CdsImage/styles/_CdsImage.variables.scss

@@ -0,0 +1,4 @@
+// Токены 3-го уровня компонента CdsImage.
+
+// Размытие изображения-заглушки (lazy-src), показываемого до загрузки основного.
+$image-preload-filter: blur(4px) !default;

package/src/components/CdsInput/CdsInput.scss

@@ -0,0 +1,108 @@
+@use 'sass:map';
+@use '../../styles/tools';
+@use './styles/CdsInput.variables' as *;
+@use './styles/CdsInput.mixins' as *;
+
+@include tools.layer('components') {
+  .cds-input {
+    display: grid;
+    flex: 1 1 auto;
+
+    &--size {
+      @each $size, $_ in $input-sizes {
+        &-#{$size} {
+          @include use-input-size($size);
+        }
+      }
+    }
+
+    &--vertical {
+      grid-template:
+        "label" max-content
+        "description" max-content
+        "append" max-content
+        "control" auto
+        "prepend" max-content
+        "messages" auto / minmax(0, 1fr);
+    }
+
+    &--horizontal {
+      grid-template:
+        'label label label' max-content
+        'description description description' max-content
+        'prepend control append' 1fr
+        'a messages b' auto
+        / max-content minmax(0, 1fr) max-content;
+    }
+  }
+
+  .cds-input__label {
+    grid-area: label;
+  }
+
+  .cds-input__description {
+    grid-area: description;
+  }
+
+  .cds-input__prepend {
+    grid-area: prepend;
+  }
+
+  .cds-input__control {
+    display: flex;
+    grid-area: control;
+  }
+
+  .cds-input__append {
+    grid-area: append;
+  }
+
+  .cds-input__prepend,
+  .cds-input__append {
+    display: flex;
+
+    .cds-input--center-affix & {
+      align-items: center;
+      padding-top: 0;
+    }
+  }
+
+  .cds-input__details {
+    display: flex;
+    grid-area: messages;
+    align-items: flex-end;
+    justify-content: space-between;
+    overflow: hidden;
+  }
+
+  .cds-input__label,
+  .cds-input__description,
+  .cds-input__details,
+  .cds-input__prepend,
+  .cds-input__append {
+    .cds-input--disabled &,
+    .cds-input--error & {
+      > .cds-icon,
+      .cds-messages {
+        opacity: 1;
+      }
+    }
+
+    .cds-input--glow.cds-input--focused & {
+      > .cds-icon {
+        opacity: 1;
+      }
+    }
+
+    .cds-input--disabled & {
+       color: $input-disabled-color;
+    }
+
+    .cds-input--error:not(.cds-input--disabled) & {
+      > .cds-icon,
+      .cds-messages {
+        color: $input-error-color;
+      }
+    }
+  }
+}

package/src/components/CdsInput/styles/_CdsInput.mixins.scss

@@ -0,0 +1,54 @@
+@use 'sass:map';
+@use '../../../styles/tools';
+@use './CdsInput.variables' as *;
+
+@mixin use-input-size($variant: 'md') {
+  $variant-map: map.get($input-sizes, $variant);
+
+  @if $variant-map {
+    @include tools.cds-text-regular(map.get($variant-map, 'input', 'font-size'));
+
+    &.cds-input--vertical {
+      .cds-input__prepend {
+        margin-block-start: map.get($variant-map, 'input', 'affix-margin-inside');
+      }
+
+      .cds-input__append {
+        margin-block-end: map.get($variant-map, 'input', 'affix-margin-inside');
+      }
+    }
+
+    &.cds-input--horizontal {
+      .cds-input__prepend {
+        margin-inline-end: map.get($variant-map, 'input', 'affix-margin-inside');
+      }
+
+      .cds-input__append {
+        margin-inline-start: map.get($variant-map, 'input', 'affix-margin-inside');
+      }
+    }
+
+    .cds-label {
+      margin-block-end: map.get($variant-map, 'label', 'margin-block');
+
+      @include tools.cds-text-regular(map.get($variant-map, 'label', 'font-size'));
+    }
+
+    .cds-description {
+      margin-block-end: map.get($variant-map, 'description', 'margin-block');
+
+      @include tools.cds-text-regular(map.get($variant-map, 'description', 'font-size'));
+    }
+
+    .cds-input__details {
+      margin-block-start: map.get($variant-map, 'messages', 'margin-block');
+    }
+
+    .cds-messages,
+    .cds-counter {
+      @include tools.cds-text-regular(map.get($variant-map, 'messages', 'font-size'));
+    }
+  } @else {
+    @warn "Size #{$variant} is not defined in the $input-sizes map.";
+  }
+}

package/src/components/CdsInput/styles/_CdsInput.variables.scss

@@ -0,0 +1,98 @@
+// ======================= Variables =======================
+$input-affix-margin-inside: var(--cds-spacing-200) !default;
+$input-disabled-color: rgb(var(--cds-color-content-disable)) !default;
+$input-error-color: rgb(var(--cds-color-status-danger-content)) !default;
+
+// ======================= Sizes =======================
+$input-sizes: (
+  xs: (
+    label: (
+      'font-size': '100',
+      'margin-block': 0,
+    ),
+    description: (
+      'font-size': '50',
+      'margin-block': var(--cds-spacing-50),
+    ),
+    input: (
+      'font-size': '100',
+      'affix-margin-inside': var(--cds-spacing-100),
+    ),
+    messages: (
+      'font-size': '50',
+      'margin-block': var(--cds-spacing-50),
+    ),
+  ),
+  sm: (
+    label: (
+      'font-size': '100',
+      'margin-block': var(--cds-spacing-50),
+    ),
+    description: (
+      'font-size': '50',
+      'margin-block': var(--cds-spacing-50),
+    ),
+    input: (
+      'font-size': '100',
+      'affix-margin-inside': var(--cds-spacing-100),
+    ),
+    messages: (
+      'font-size': '50',
+      'margin-block': var(--cds-spacing-50)
+    ),
+  ),
+  md: (
+    label: (
+      'font-size': '200',
+      'margin-block': var(--cds-spacing-100),
+    ),
+    description: (
+      'font-size': '100',
+      'margin-block': var(--cds-spacing-100),
+    ),
+    input: (
+      'font-size': '200',
+      'affix-margin-inside': var(--cds-spacing-200),
+    ),
+    messages: (
+      'font-size': '100',
+      'margin-block': var(--cds-spacing-50),
+    ),
+  ),
+  lg: (
+    label: (
+      'font-size': '300',
+      'margin-block': var(--cds-spacing-100),
+    ),
+    description: (
+      'font-size': '200',
+      'margin-block': var(--cds-spacing-200),
+    ),
+    input: (
+      'font-size': '300',
+      'affix-margin-inside': var(--cds-spacing-300),
+    ),
+    messages: (
+      'font-size': '200',
+      'margin-block': var(--cds-spacing-100),
+    ),
+  ),
+  xl: (
+    label: (
+      'font-size': '400',
+      'margin-block': var(--cds-spacing-200),
+    ),
+    description: (
+      'font-size': '300',
+      'margin-block': var(--cds-spacing-200),
+    ),
+    input: (
+      'font-size': '400',
+      'affix-margin-inside': var(--cds-spacing-300),
+    ),
+    messages: (
+      'font-size': '300',
+      'margin-block': var(--cds-spacing-100),
+    ),
+  )
+) !default;

package/src/components/CdsLabel/CdsLabel.scss

@@ -0,0 +1,23 @@
+@use 'sass:map';
+@use '../../styles/tools';
+@use './styles/CdsLabel.variables' as *;
+
+@include tools.layer('components') {
+  .cds-label {
+    display: flex;
+    align-items: center;
+    color: $label-color;
+    cursor: pointer;
+    user-select: none;
+
+    &--disabled {
+      color: $label-disabled-color;
+      pointer-events: none;
+      cursor: not-allowed;
+    }
+
+    &--readonly {
+      pointer-events: none;
+    }
+  }
+}

package/src/components/CdsLabel/styles/_CdsLabel.variables.scss

@@ -0,0 +1,2 @@
+$label-color: inherit !default;
+$label-disabled-color: rgb(var(--cds-color-content-disable)) !default;

package/src/components/CdsLayout/CdsLayout.scss

@@ -0,0 +1,61 @@
+@use '../../styles/tools';
+@use './styles/CdsLayout.variables' as *;
+
+@include tools.layer('components') {
+  .cds-layout {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    color: $layout-color;
+    outline: 0;
+    background: $layout-background;
+
+    &__container {
+      position: relative;
+      width: 100%;
+      height: 100%;
+
+      .cds-layout {
+        min-height: 100%;
+
+        > main {
+          transform: translate3d(0, 0, 0);
+
+          > div {
+            min-height: 0;
+            max-height: 100%;
+          }
+        }
+      }
+    }
+
+    &-container__target {
+      position: absolute;
+      inset: 0;
+      overflow: hidden;
+
+      // Устанавливаем содержащий блок для потомков с `position: fixed`
+      // (плавающая шапка `CdsHeader reveal`, `CdsDrawer--fixed`), чтобы в режиме
+      // `container` они позиционировались относительно контейнера, а не вьюпорта.
+      // Расчёт offset/space в useLayout уже завязан на containerHeight.
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  .cds-scrollable {
+    position: absolute;
+    inset: 0;
+    overflow: hidden auto;
+  }
+
+  .cds-hide-scrollbar {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+      width: 0;
+      height: 0;
+    }
+  }
+}

package/src/components/CdsLayout/styles/_CdsLayout.variables.scss

@@ -0,0 +1,2 @@
+$layout-background: rgb(var(--cds-color-page-primary)) !default;
+$layout-color: rgb(var(--cds-color-content-primary)) !default;

package/src/components/CdsLink/CdsLink.scss

@@ -0,0 +1,33 @@
+@use '../../styles/tools';
+@use './styles/CdsLink.variables' as *;
+
+@include tools.layer('components') {
+  .cds-link {
+    color: $link-color;
+    text-decoration: underline;
+    text-decoration-color: transparent;
+    cursor: pointer;
+
+    @include tools.cds-text-regular-200;
+    @include tools.cds-animation-motion(tools.$cds-duration-very-fast, 'ease-in-out', 'basic');
+
+    &:hover {
+      text-decoration-color: inherit;
+    }
+
+    &:visited:not([href^='#']) {
+      color: $link-color-visited;
+    }
+
+    &:focus-visible {
+      outline: $link-outline-width solid $link-outline-color;
+      outline-offset: $link-outline-offset;
+    }
+
+    &--disabled {
+      color: $link-color-disabled;
+      pointer-events: none;
+      cursor: not-allowed;
+    }
+  }
+}