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

package/src/components/CdsLink/styles/_CdsLink.variables.scss

@@ -0,0 +1,6 @@
+$link-color: rgb(var(--cds-color-content-link)) !default;
+$link-color-visited: rgb(var(--cds-color-content-link-visited)) !default;
+$link-color-disabled: rgb(var(--cds-color-content-disable)) !default;
+$link-outline-color: rgb(var(--cds-color-line-focus-outline)) !default;
+$link-outline-width: var(--cds-border-200) !default;
+$link-outline-offset: var(--cds-spacing-50) !default;

package/src/components/CdsList/CdsList.scss

@@ -0,0 +1,104 @@
+@use 'sass:list';
+@use 'sass:map';
+@use '../../styles/tools';
+@use './styles/CdsList.variables' as *;
+
+@include tools.layer('components') {
+  .cds-list {
+    position: relative;
+    padding: $list-padding;
+    overflow: auto;
+    overflow-x: hidden;
+    color: $list-color;
+    outline: none;
+    background: $list-background;
+
+    @include tools.border($list-border...);
+
+    &--disabled {
+      color: map.get($list-item-color, 'disabled', 'content');
+      pointer-events: none;
+      user-select: none;
+    }
+
+    &--slim {
+      padding: 0;
+    }
+
+    &--nav {
+      padding-inline: $list-nav-padding;
+
+      .cds-list-item:not(:first-child),
+      .cds-list-group:not(:first-child) > .cds-list-item,
+      .cds-list-group__items > .cds-list-item,
+      .cds-list-group__items > .cds-list-group {
+        margin-top: $list-item-nav-margin-top;
+      }
+    }
+
+    &--subheader {
+      padding-top: $list-subheader-padding-top;
+    }
+  }
+
+  .cds-drawer .cds-list {
+    color: inherit;
+  }
+
+  .cds-list-subheader {
+    $root: &;
+
+    display: flex;
+    align-items: center;
+    min-height: $list-subheader-min-height;
+    padding-block: $list-subheader-padding-block;
+    padding-inline-end: $list-subheader-padding-end;
+    color: $list-subheader-color;
+    background: inherit;
+    transition: $list-subheader-transition;
+
+    @include tools.cds-text-bold-50-uppercase;
+
+    &__text {
+      @include tools.ellipsis;
+    }
+
+    &--inset {
+      --indent-padding: #{$list-subheader-inset-padding-start};
+    }
+
+    .cds-list--nav & {
+      font-size: $list-nav-subheader-font-size;
+    }
+
+    &--sticky {
+      position: sticky;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      background: inherit;
+    }
+  }
+
+  .cds-list-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    border-radius: inherit;
+  }
+
+  .cds-list__overlay {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background-color: currentcolor;
+    border-radius: inherit;
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+  }
+}

package/src/components/CdsList/CdsListItem.scss

@@ -0,0 +1,330 @@
+@use 'sass:list';
+@use 'sass:math';
+@use 'sass:map';
+@use '../../styles/tools';
+@use '../../styles/settings';
+@use './styles/CdsList.variables' as *;
+
+@include tools.layer('components') {
+  .cds-list-item {
+    position: relative;
+    display: grid;
+    flex: none;
+    grid-template-areas: "prepend content append";
+    grid-template-columns: max-content 1fr auto;
+    align-items: center;
+    max-width: 100%;
+    padding: $list-item-padding;
+    margin-bottom: $list-item-gap;
+    text-decoration: none;
+    outline: none;
+    background: map.get($list-item-color, 'default', 'background');
+    border-radius: $list-item-border-radius;
+
+    @include tools.border($list-item-border...);
+    @include tools.cds-animation-motion(tools.$cds-duration-very-fast, 'ease-in-out', 'basic');
+
+    @supports selector(:focus-visible) {
+      &::after {
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        border: $list-item-border-outline map.get($list-item-color, 'focus', 'outline');
+        border-radius: $list-item-border-radius;
+        opacity: 0;
+        transition: opacity tools.$cds-duration-very-fast + ms ease-in-out;
+
+        @include tools.absolute(true);
+      }
+    }
+
+    &:focus-visible::after,
+    &--focus-visible::after {
+      opacity: 1;
+    }
+
+    &--link {
+      color: inherit;
+      cursor: pointer;
+
+      &:hover {
+        background: map.get($list-item-color, 'hover', 'background');
+      }
+    }
+
+    &--active {
+      background: map.get($list-item-color, 'active', 'background');
+
+      &:hover {
+        background: map.get($list-item-color, 'active', 'background');
+      }
+    }
+
+    &--disabled {
+      color: map.get($list-item-color, 'disabled', 'content');
+      pointer-events: none;
+      user-select: none;
+      background: map.get($list-item-color, 'disabled', 'background');
+    }
+
+    .cds-list--slim & {
+      margin-bottom: 0;
+      border-radius: 0;
+
+      &::after {
+        border-radius: 0;
+      }
+    }
+  }
+
+  .cds-list-item__prepend {
+    display: flex;
+    grid-area: prepend;
+    align-items: center;
+    align-self: center;
+
+    * ~ .cds-list-item__spacer {
+      width: var(--cds-list-prepend-gap)
+    }
+
+    > .cds-badge,
+    > .cds-icon,
+    > .cds-tooltip {
+      ~ .cds-list-item__spacer {
+        width: var(--cds-list-prepend-gap, $list-item-icon-margin-start);
+      }
+    }
+
+    > .cds-avatar,
+    > .cds-badge:is(:has(.cds-avatar)) {
+      ~ .cds-list-item__spacer {
+        width: var(--cds-list-prepend-gap, $list-item-avatar-margin-start)
+      }
+    }
+
+    .cds-list-item--slim & {
+      > .cds-badge,
+      > .cds-icon,
+      > .cds-tooltip {
+        ~ .cds-list-item__spacer {
+          width: var(--cds-list-prepend-gap, $list-item-slim-spacer-width)
+        }
+      }
+
+      > .cds-avatar,
+      > .cds-badge:is(:has(.cds-avatar)) {
+        ~ .cds-list-item__spacer {
+          width: var(--cds-list-prepend-gap, $list-item-slim-avatar-spacer-width)
+        }
+      }
+
+      > .cds-list-item-action ~ .cds-list-item__spacer {
+        width: var(--cds-list-prepend-gap, $list-item-slim-action-spacer-width)
+      }
+    }
+
+    .cds-list-item--three-line & {
+      align-self: start;
+    }
+  }
+
+  .cds-list-item__content {
+    grid-area: content;
+    align-self: center;
+    min-width: $list-item-content-min-width;
+    overflow: hidden;
+
+    // Свёрнутая панель (CdsDrawer minified) до наведения: контент схлопывается,
+    // виден только prepend-глиф. Классы соответствуют CdsDrawer (--minified/--hover).
+    .cds-drawer--minified:not(.cds-drawer--hover) & {
+      min-width: 0
+    }
+  }
+
+  .cds-list-item__append {
+    display: flex;
+    grid-area: append;
+    align-items: center;
+    align-self: center;
+
+    .cds-list-item__spacer {
+      order: -1;
+      transition: 150ms width settings.$standard-easing;
+    }
+
+    * ~ .cds-list-item__spacer {
+      width: var(--cds-list-prepend-gap);
+    }
+
+    > .cds-badge,
+    > .cds-icon,
+    > .cds-tooltip {
+      ~ .cds-list-item__spacer {
+        width: var(--cds-list-prepend-gap, $list-item-icon-margin-end);
+      }
+    }
+
+    > .cds-avatar,
+    > .cds-badge:is(:has(.cds-avatar)) {
+      ~ .cds-list-item__spacer {
+        width: var(--cds-list-prepend-gap, $list-item-avatar-margin-end)
+      }
+    }
+
+    > .cds-list-item-action ~ .cds-list-item__spacer {
+      width: var(--cds-list-prepend-gap, $list-item-action-spacer-width)
+    }
+
+    .cds-list-item--slim & {
+      > .cds-badge,
+      > .cds-icon,
+      > .cds-tooltip {
+        ~ .cds-list-item__spacer {
+          width: var(--cds-list-slim-spacer-width, $list-item-slim-spacer-width)
+        }
+      }
+
+      > .cds-avatar,
+      > .cds-badge:is(:has(.cds-avatar)) {
+        ~ .cds-list-item__spacer {
+          width: var(--cds-list-prepend-gap, $list-item-slim-avatar-spacer-width)
+        }
+      }
+
+      > .cds-list-item-action ~ .cds-list-item__spacer {
+        width: var(--cds-list-prepend-gap, $list-item-slim-action-spacer-width)
+      }
+    }
+
+    .cds-list-item--three-line & {
+      align-self: start;
+    }
+  }
+
+  .cds-list-item-title {
+    hyphens: $list-item-title-hyphens;
+    word-break: $list-item-title-word-break;
+    overflow-wrap: $list-item-title-word-wrap;
+
+    @include tools.ellipsis;
+    @include tools.cds-text-regular-200;
+  }
+
+  .cds-list-item-subtitle,
+  .cds-list-item-description {
+    display: -webkit-box;
+    padding: $list-item-subtitle-padding;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: $list-item-subtitle-word-break;
+    overflow-wrap: $list-item-subtitle-overflow-wrap;
+    -webkit-box-orient: vertical;
+
+    .cds-list-item--one-line & {
+      -webkit-line-clamp: 1;
+    }
+
+    .cds-list-item--two-line & {
+      -webkit-line-clamp: 2;
+    }
+
+    .cds-list-item--three-line & {
+      -webkit-line-clamp: 3;
+    }
+
+    @include tools.cds-text-regular-100;
+  }
+
+  .cds-list-item-action {
+    display: flex;
+    flex: none;
+    align-items: center;
+    align-self: center;
+    transition: inherit;
+    transition-property: height, width;
+
+    &--start {
+      margin-inline: #{-$list-item-action-margin-start} $list-item-action-margin-end;
+    }
+
+    &--end {
+      margin-inline: $list-item-action-margin-start #{-$list-item-action-margin-end};
+    }
+  }
+
+  .cds-list-item-media {
+    margin-top: $list-item-media-margin-top;
+    margin-bottom: $list-item-media-margin-bottom;
+
+    &--start {
+      margin-inline-end: $list-item-media-margin-end;
+    }
+
+    &--end {
+      margin-inline-start: $list-item-media-margin-start;
+    }
+
+    .cds-list-item--two-line & {
+      margin-top: $list-item-media-two-line-margin-top;
+      margin-bottom: $list-item-media-two-line-margin-bottom;
+    }
+
+    .cds-list-item--three-line & {
+      margin-top: $list-item-media-three-line-margin-top;
+      margin-bottom: $list-item-media-three-line-margin-bottom;
+    }
+  }
+
+  .cds-list-item-divider {
+    margin-bottom: $list-item-gap;
+  }
+
+  // ======================= Indent Config =======================
+  $base-padding: list.nth($list-item-padding, 2);
+
+  .cds-list {
+    --indent-padding: 0px;
+
+    &--nav {
+      --indent-padding: -#{$list-nav-padding};
+    }
+  }
+
+  .cds-list-group {
+    --list-indent-size: #{$list-indent-size};
+    --parent-padding: var(--indent-padding);
+    --prepend-width: var(--cds-list-group-prepend, #{$list-item-prepend-size});
+
+    .cds-list--slim & {
+      --prepend-width: var(--cds-list-group-prepend, #{$list-item-slim-prepend-size})
+    }
+
+    &--fluid {
+      --list-indent-size: 0px;
+    }
+
+    &--prepend {
+      --parent-padding: calc(var(--indent-padding) + var(--prepend-width));
+    }
+
+    &--fluid.cds-list-group--prepend {
+      --parent-padding: var(--indent-padding);
+    }
+  }
+
+  .cds-list-group__items {
+    --indent-padding: calc(var(--parent-padding) + var(--cds-list-indent, var(--list-indent-size)));
+
+    min-width: min-content;
+
+    .cds-drawer--minified & {
+      min-width: 0;
+    }
+  }
+
+  .cds-list-group__items .cds-list-item {
+    @include tools.layer('overrides') {
+      padding-inline-start: calc(#{$base-padding} + var(--indent-padding));
+    }
+  }
+}

package/src/components/CdsList/styles/_CdsList.variables.scss

@@ -0,0 +1,115 @@
+@use '../../../styles/settings';
+@use '../../../styles/tools';
+
+$list-indent-size: var(--cds-spacing-400) !default;
+
+// ======================= CdsList =======================
+$list-padding: var(--cds-spacing-100) 0 !default;
+$list-background: transparent !default;
+$list-color: tools.theme-color('on-surface-primary', var(--cds-high-emphasis-opacity)) !default;
+$list-border-color: settings.$border-color-root !default;
+$list-border-style: settings.$border-style-root !default;
+$list-border-thin-width: thin !default;
+$list-border-width: 0 !default;
+
+// borders
+$list-border: (
+  $list-border-color,
+  $list-border-style,
+  $list-border-width,
+  $list-border-thin-width
+) !default;
+
+// ======================= CdsListSubheader =======================
+$list-subheader-color: tools.theme-color('on-surface-primary', var(--cds-medium-emphasis-opacity)) !default;
+$list-subheader-inset-padding-start: 56px !default;
+$list-subheader-min-height: 32px !default;
+$list-subheader-padding-end: var(--cds-spacing-400) !default;
+$list-subheader-padding-top: 0 !default;
+$list-subheader-padding-block: var(--cds-spacing-400) var(--cds-spacing-200) !default;
+$list-subheader-min-height-multiplier: 1 !default;
+$list-subheader-transition: 0.2s min-height settings.$standard-easing !default;
+
+
+// ======================= CdsListItem =======================
+$list-item-gap: var(--cds-spacing-50) !default;
+$list-item-padding: var(--cds-spacing-100) var(--cds-spacing-400) !default;
+$list-item-prepend-size: 8px !default;
+$list-item-content-min-width: 40px !default;
+$list-item-icon-margin-end: var(--cds-spacing-200) !default;
+$list-item-icon-margin-start: var(--cds-spacing-200) !default;
+$list-item-action-spacer-width: var(--cds-spacing-200) !default;
+$list-item-slim-action-spacer-width: var(--cds-spacing-100) !default;
+$list-item-avatar-margin-end: var(--cds-spacing-100) !default;
+$list-item-avatar-margin-start: var(--cds-spacing-100) !default;
+$list-item-slim-spacer-width: var(--cds-spacing-100) !default;
+$list-item-slim-avatar-spacer-width: var(--cds-spacing-100) !default;
+$list-item-slim-prepend-size: 28px !default;
+
+// colors
+$list-item-color: (
+  default: (
+    background: transparent
+  ),
+  hover: (
+    background: rgb(var(--cds-color-fill-primary-hover))
+  ),
+  focus: (
+    outline: rgb(var(--cds-color-line-focus-outline))
+  ),
+  active: (
+    background: rgb(var(--cds-color-brand-secondary)),
+  ),
+  disabled: (
+    background: transparent,
+    content: rgb(var(--cds-color-content-disable))
+  )
+) !default;
+
+// borders
+$list-item-border-color: settings.$border-color-root !default;
+$list-item-border-style: settings.$border-style-root !default;
+$list-item-border-width: 0 !default;
+$list-item-border-thin-width: thin !default;
+$list-item-border: (
+  $list-item-border-color,
+  $list-item-border-style,
+  $list-item-border-width,
+  $list-item-border-thin-width
+) !default;
+$list-item-border-radius: var(--cds-border-radius-200) !default;
+$list-item-border-outline: var(--cds-border-200) solid !default;
+
+// title
+$list-item-title-padding: 0 !default;
+$list-item-title-hyphens: auto !default;
+$list-item-title-text-transform: none !default;
+$list-item-title-word-break: normal !default;
+$list-item-title-word-wrap: break-word !default;
+
+// subtitle
+$list-item-subtitle-padding: 0 !default;
+$list-item-subtitle-text-transform: none !default;
+$list-item-subtitle-overflow-wrap: break-word !default;
+$list-item-subtitle-word-break: initial !default;
+
+// action
+$list-item-action-margin-end: var(--cds-spacing-200) !default;
+$list-item-action-margin-start: var(--cds-spacing-200) !default;
+$list-item-icon-margin-end: var(--cds-spacing-400) !default;
+$list-item-icon-margin-start: var(--cds-spacing-400) !default;
+
+// media
+$list-item-media-margin-bottom: 0 !default;
+$list-item-media-margin-end: 16px !default;
+$list-item-media-margin-start: 16px !default;
+$list-item-media-margin-top: 0 !default;
+$list-item-media-two-line-margin-bottom: -4px !default;
+$list-item-media-two-line-margin-top: -4px !default;
+$list-item-media-three-line-margin-bottom: 0 !default;
+$list-item-media-three-line-margin-top: 0 !default;
+
+// nav
+$list-nav-padding: var(--cds-spacing-200) !default;
+$list-nav-subheader-font-size: .75rem !default;
+$list-item-nav-margin-top: var(--cds-spacing-100) !default;

package/src/components/CdsLoader/CdsLoader.scss

@@ -0,0 +1,78 @@
+@use 'sass:map';
+@use '../../styles/tools';
+@use './styles/CdsLoader.variables' as *;
+@use './styles/CdsLoader.mixins' as *;
+
+@include tools.layer('components') {
+  .cds-loader {
+    position: relative;
+
+    svg {
+      display: block;
+      width: 100%;
+      animation: $loader-turn-animation;
+    }
+
+    circle {
+      fill: none;
+      stroke: map.get($loader-color, 'color');
+      stroke-width: $loader-width;
+      stroke-dasharray: $loader-dash;
+      stroke-dashoffset: $loader-dash;
+      animation: $loader-stroke-animation;
+    }
+
+    &__overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: tools.z('cds-layer-extra-high') + 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      background-color: map.get($loader-color, 'overlay');
+
+      circle {
+        stroke: map.get($loader-color, 'on-color');
+      }
+    }
+
+    &__fixed {
+      position: absolute;
+    }
+
+    &--size {
+      &-xs {
+        @include size('xs');
+      }
+
+      &-sm {
+        @include size('sm');
+      }
+
+      &-md {
+        @include size('md');
+      }
+
+      &-lg {
+        @include size('lg');
+      }
+
+      &-xl {
+        @include size('xl');
+      }
+    }
+  }
+}
+
+@keyframes loader-turn {
+  50% { transform: rotate(180deg) }
+  100% { transform: rotate(720deg) }
+}
+
+@keyframes loader-stroke {
+  50% { stroke-dashoffset: 0 }
+  100% { stroke-dashoffset: $loader-dash }
+}

package/src/components/CdsLoader/styles/_CdsLoader.mixins.scss

@@ -0,0 +1,9 @@
+@use 'sass:map';
+@use './CdsLoader.variables' as *;
+
+@mixin size($variant) {
+  $size: map.get($loader-sizes, $variant);
+
+  width: map.get($size, 'width');
+  height: map.get($size, 'height');
+}

package/src/components/CdsLoader/styles/_CdsLoader.variables.scss

@@ -0,0 +1,40 @@
+@use 'sass:map';
+@use '../../../styles/tools';
+
+
+$loader-dash: 60 !default;
+$loader-duration: 2s !default;
+$loader-width: 2px !default;
+$loader-turn-animation: loader-turn $loader-duration linear infinite !default;
+$loader-stroke-animation: loader-stroke $loader-duration linear infinite !default;
+
+// Colors
+$loader-color: (
+  'overlay': rgb(var(--cds-color-surface-overlay)),
+  'color': rgb(var(--cds-color-content-placeholder)),
+  'on-color': rgb(var(--cds-color-content-secondary))
+) !default;
+
+// Sizes
+$loader-sizes: (
+  xs: (
+    'width': tools.to-rem(16px),
+    'height': tools.to-rem(16px)
+  ),
+  sm: (
+    'width': tools.to-rem(40px),
+    'height': tools.to-rem(40px)
+  ),
+  md: (
+    'width': tools.to-rem(80px),
+    'height': tools.to-rem(80px)
+  ),
+  lg: (
+    'width': tools.to-rem(120px),
+    'height': tools.to-rem(120px)
+  ),
+  xl: (
+    'width': tools.to-rem(160px),
+    'height': tools.to-rem(160px)
+  )
+) !default;

package/src/components/CdsMain/CdsMain.scss

@@ -0,0 +1,7 @@
+@use '../../styles/tools';
+
+@include tools.layer('components') {
+  .cds-main {
+    display: block;
+  }
+}