draft-components 0.61.0 → 0.63.0

package/scss/components/_secret.scss

@@ -1,3 +1,5 @@
+@use '../abstracts' as dc;
+
 .dc-secret {
   font-family: var(--dc-font-code);
   position: relative;
@@ -7,7 +9,7 @@
 
 .dc-secret__content {
   text-align: left;
-  opacity: $opacity-75;
+  opacity: dc.$opacity-75;
 }
 
 .dc-secret__btn {
@@ -25,6 +27,6 @@
 
 .dc-secret_shown .dc-secret__btn {
   position: initial;
-  margin-top: $gap-2x;
+  margin-top: dc.$gap-2x;
   transform: none;
 }

package/scss/components/_segmented-control.scss

@@ -1,20 +1,22 @@
+@use '../abstracts' as dc;
+
 .dc-segmented-control {
   position: relative;
   display: inline-flex;
   margin-top: 0;
   margin-bottom: 0;
-  padding: px-to-rem(1px) px-to-rem(2px);
+  padding: dc.px-to-rem(1px) dc.px-to-rem(2px);
   list-style: none;
-  border-radius: $border-radius-lg;
-  background: rgba($gray-900, $opacity-5);
+  border-radius: dc.$border-radius-lg;
+  background: rgba(dc.$gray-900, dc.$opacity-5);
 }
 
 .dc-segmented-control_size_sm {
-  border-radius: $border-radius-md;
+  border-radius: dc.$border-radius-md;
 }
 
 .dc-segmented-control_size_lg {
-  border-radius: $border-radius-xl;
+  border-radius: dc.$border-radius-xl;
 }
 
 .dc-segmented-control__radio-btn {

package/scss/components/_select.scss

@@ -1,34 +1,36 @@
+@use '../abstracts' as dc;
+
 @function select-arrow-icon($color) {
-  @return inline-svg(
+  @return dc.inline-svg(
     '<svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 11L6 14L9 11" stroke="#{$color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 5L6 2L3 5" stroke="#{$color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
   );
 }
 
 .dc-select {
-  line-height: $leading-default;
+  line-height: dc.$leading-default;
   width: auto;
   padding-right: calc(1.25em + var(--dc-input-gap));
   padding-left: var(--dc-input-gap);
   cursor: pointer;
   color: initial;
   border: none;
-  background-image: select-arrow-icon($gray-600);
+  background-image: select-arrow-icon(dc.$gray-600);
   background-repeat: no-repeat;
   background-position: calc(100% - var(--dc-input-gap)) center;
   background-size: 0.85em auto;
-  box-shadow: 0 0 0 1px var(--dc-input-border-color), $shadow-xs;
+  box-shadow: 0 0 0 1px var(--dc-input-border-color), dc.$shadow-xs;
 }
 
 .dc-select:disabled {
-  background-image: select-arrow-icon($gray-400);
+  background-image: select-arrow-icon(dc.$gray-400);
 }
 
 .dc-select[multiple] {
   height: initial;
-  padding: $gap-2x 0;
+  padding: dc.$gap-2x 0;
   background: var(--dc-input-bg);
 }
 
 .dc-select option {
-  padding: $gap-1x $gap-3x;
+  padding: dc.$gap-1x dc.$gap-3x;
 }

package/scss/components/_selection-control.scss

@@ -1,6 +1,8 @@
+@use '../abstracts' as dc;
+
 .dc-selection-control {
-  --dc-selection-control-size: #{px-to-rem(18px)};
-  --dc-selection-control-gap: #{$gap-3x};
+  --dc-selection-control-size: #{dc.px-to-rem(18px)};
+  --dc-selection-control-gap: #{dc.$gap-3x};
 }
 
 .dc-selection-control {
@@ -18,20 +20,20 @@
 }
 
 .dc-selection-control__label {
-  font-size: $font-size-sm;
-  font-weight: $font-weight-medium;
-  line-height: $leading-default;
+  font-size: dc.$font-size-sm;
+  font-weight: dc.$font-weight-medium;
+  line-height: dc.$leading-tight;
   display: inline-block;
   margin-left: var(--dc-selection-control-gap);
   user-select: none;
   color: var(--dc-primary-text-color);
-  @include text-truncate;
+  @include dc.text-truncate;
 }
 
 .dc-selection-control__description {
-  font-size: $font-size-sm;
-  line-height: $leading-tight;
-  margin-top: $gap-1x;
+  font-size: dc.$font-size-sm;
+  line-height: dc.$leading-tight;
+  margin-top: dc.$gap-1x;
   margin-left: calc(
     var(--dc-selection-control-size) + var(--dc-selection-control-gap)
   );

package/scss/components/_slider.scss

@@ -1,33 +1,37 @@
-@use 'sass:math';
+@use 'sass:math' as math;
+@use '../abstracts' as dc;
 
-$track-height: px-to-rem(2px);
-$thumb-height: px-to-rem(20px);
-$thumb-width: px-to-rem(10px);
-$thumb-shadow: 0 0 0 1px rgba($black, $opacity-10), $shadow-sm, $shadow-md;
-
-@mixin round-thumb-styles {
+@mixin thumb {
   box-sizing: border-box;
-  width: $thumb-height;
-  height: $thumb-height;
+  width: var(--dc-slider-thumb-width);
+  height: var(--dc-slider-thumb-height);
+  cursor: pointer;
+  border: none;
   border-radius: 50%;
-  border-color: transparent;
   background: var(--dc-slider-thumb-bg);
-  box-shadow: $thumb-shadow;
+  box-shadow: (
+    0 0 0 1px rgba(black, dc.$opacity-10),
+    0 2px 3px rgba(black, dc.$opacity-15)
+  );
   appearance: none;
 }
 
-@mixin rect-thumb-styles {
-  width: $thumb-width;
-  border-radius: $border-radius-xs;
+@mixin thumb-rect {
+  border-radius: calc(var(--dc-slider-thumb-width) / 2);
 }
 
-@mixin thumb-focus-styles {
-  box-shadow: $thumb-shadow, 0 0 0 4px var(--dc-focus-ring-color);
+@mixin thumb-focus {
+  box-shadow: (
+    0 0 0 1px rgba(black, dc.$opacity-10),
+    0 2px 3px rgba(black, dc.$opacity-15),
+    0 0 0 2px var(--dc-focus-border-color)
+  );
 }
 
 .dc-slider {
-  position: relative;
-  box-sizing: border-box;
+  font-family: var(--dc-font-base);
+  display: flex;
+  flex-direction: column;
   width: 100%;
 }
 
@@ -35,106 +39,92 @@ $thumb-shadow: 0 0 0 1px rgba($black, $opacity-10), $shadow-sm, $shadow-md;
   opacity: var(--dc-disabled-state-opacity);
 }
 
-.dc-slider__tick_marks {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 100%;
+.dc-slider_thumb_rect {
+  --dc-slider-thumb-width: 10px;
 }
 
-.dc-slider__tick_marks > * {
-  flex: 0 0 3px;
-  height: 6px;
+.dc-slider__input {
+  font: inherit;
+  width: inherit;
+  height: var(--dc-slider-track-height);
+  margin: (
+    calc((var(--dc-slider-thumb-height) - var(--dc-slider-track-height)) / 2) 0
+  );
+  padding: 0;
+  border-radius: 2px;
   background: var(--dc-slider-track-bg);
+  box-shadow: inset 0 0 0 1px rgba(black, 0.03);
+  appearance: none;
 }
 
-.dc-slider::before,
-.dc-slider__fill-track {
-  position: absolute;
-  top: math.div($thumb-height - $track-height, 2);
-  left: 0;
-  height: $track-height;
+.dc-slider__input:focus {
+  outline: none;
 }
 
-.dc-slider::before {
-  width: 100%;
-  content: '';
-  background: var(--dc-slider-track-bg);
+.dc-slider__input::-webkit-slider-thumb {
+  @include thumb;
 }
 
-.dc-slider__fill-track {
-  width: 0;
-  background: var(--dc-slider-fill-track-bg);
+.dc-slider__input::-moz-range-thumb {
+  @include thumb;
 }
 
-.dc-slider__input {
-  position: relative;
-  top: 0;
-  left: 0;
-  display: block;
-  box-sizing: border-box;
-  width: 100%;
-  height: $thumb-height;
-  cursor: pointer;
-  opacity: 1;
-  background: transparent;
-  appearance: none;
-
-  &::-ms-track {
-    width: 100%;
-    cursor: pointer;
-    color: transparent;
-    border-color: transparent;
-    background: transparent;
-  }
-
-  &::-webkit-slider-thumb {
-    @include round-thumb-styles;
-  }
+.dc-slider__input::-ms-thumb {
+  @include thumb;
+}
 
-  &::-moz-range-thumb {
-    @include round-thumb-styles;
-  }
+.dc-slider__input:focus::-webkit-slider-thumb {
+  @include thumb-focus;
+}
 
-  &::-ms-thumb {
-    @include round-thumb-styles;
-  }
+.dc-slider__input:focus::-moz-range-thumb {
+  @include thumb-focus;
+}
 
-  &:focus {
-    outline: none;
-  }
+.dc-slider__input:focus::-ms-thumb {
+  @include thumb-focus;
+}
 
-  &:focus::-webkit-slider-thumb {
-    @include thumb-focus-styles;
-  }
+.dc-slider_thumb_rect .dc-slider__input::-webkit-slider-thumb {
+  @include thumb-rect;
+}
 
-  &:focus::-moz-range-thumb {
-    @include thumb-focus-styles;
-  }
+.dc-slider_thumb_rect .dc-slider__input::-moz-range-thumb {
+  @include thumb-rect;
+}
 
-  &:focus::-ms-thumb {
-    @include thumb-focus-styles;
-  }
+.dc-slider_thumb_rect .dc-slider__input::-ms-thumb {
+  @include thumb-rect;
+}
 
-  &:disabled {
-    cursor: default;
-  }
+.dc-slider__tick-marks {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-top: dc.$gap-1x;
 }
 
-.dc-slider__input_thumb_style_rect {
-  &::-webkit-slider-thumb {
-    @include rect-thumb-styles;
-  }
+.dc-slider-tick-mark {
+  font-size: dc.$font-size-xs;
+  display: inline-flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: flex-start;
+  width: var(--dc-slider-thumb-width);
+  text-align: center;
+  white-space: nowrap;
+  color: var(--dc-slider-tick-mark-color);
+}
 
-  &::-moz-range-thumb {
-    @include rect-thumb-styles;
-  }
+.dc-slider-tick-mark::before {
+  display: inline-block;
+  flex: none;
+  width: 2px;
+  height: 8px;
+  content: '';
+  background: var(--dc-slider-track-bg);
+}
 
-  &::-ms-thumb {
-    @include rect-thumb-styles;
-  }
+.dc-slider-tick-mark__label {
+  padding-top: dc.$gap-1x;
 }

package/scss/components/_switch.scss

@@ -1,3 +1,5 @@
+@use '../abstracts' as dc;
+
 .dc-switch {
   --dc-selection-control-size: var(--dc-switch-width);
 }
@@ -7,7 +9,7 @@
 }
 
 .dc-switch__input {
-  @include visually-hidden;
+  @include dc.visually-hidden;
 }
 
 .dc-switch__check {
@@ -17,7 +19,7 @@
   width: var(--dc-switch-width);
   height: var(--dc-switch-height);
   cursor: pointer;
-  transition: $transition-quick;
+  transition: dc.$transition-quick;
   transition-property: border-color, background-color;
   border-radius: calc(var(--dc-switch-height) / 2);
   background: var(--dc-switch-bg);
@@ -38,7 +40,7 @@
   transition-property: transform, border-color;
   border-radius: 50%;
   background: var(--dc-input-accent-secondary-color);
-  box-shadow: $shadow-sm, $shadow-md;
+  box-shadow: dc.$shadow-sm, dc.$shadow-md;
 }
 
 .dc-switch__input:checked + .dc-switch__check {

package/scss/components/_table.scss

@@ -1,3 +1,5 @@
+@use '../abstracts' as dc;
+
 .dc-table-container {
   position: relative;
   overflow-x: auto;
@@ -7,19 +9,19 @@
 
   &:focus {
     outline: none;
-    @include focus-ring;
+    @include dc.focus-ring;
   }
 }
 
 .dc-table {
   font-family: var(--dc-font-base);
-  font-size: $font-size-sm;
-  font-weight: $font-weight-normal;
+  font-size: dc.$font-size-sm;
+  font-weight: dc.$font-weight-normal;
+  font-variant-numeric: tabular-nums;
   width: 100%;
   height: auto;
   border-spacing: 0;
   border-collapse: separate;
-  font-variant-numeric: tabular-nums;
 }
 
 .dc-table-head {
@@ -35,33 +37,33 @@
 }
 
 .dc-table-cell {
-  padding: px-to-rem(10px);
+  padding: dc.px-to-rem(10px);
   border-bottom: var(--dc-table-border);
   background: var(--dc-table-cell-bg);
 
   .dc-table-head & {
     font-size: 90%;
-    padding-top: px-to-rem(8px);
-    padding-bottom: px-to-rem(8px);
+    padding-top: dc.px-to-rem(8px);
+    padding-bottom: dc.px-to-rem(8px);
     white-space: nowrap;
   }
 
   .dc-table_padding_lg & {
-    padding: px-to-rem(14px);
+    padding: dc.px-to-rem(14px);
   }
 
   .dc-table_padding_lg .dc-table-head & {
-    padding-top: px-to-rem(12px);
-    padding-bottom: px-to-rem(12px);
+    padding-top: dc.px-to-rem(12px);
+    padding-bottom: dc.px-to-rem(12px);
   }
 
   .dc-table_padding_sm & {
-    padding: px-to-rem(8px);
+    padding: dc.px-to-rem(8px);
   }
 }
 
 .dc-table-cell_header {
-  font-weight: $font-weight-medium;
+  font-weight: dc.$font-weight-medium;
   background: var(--dc-table-header-cell-bg);
 }
 
@@ -71,11 +73,11 @@
 }
 
 .dc-table-cell__sort-btn {
-  margin-right: $gap-2x;
+  margin-right: dc.$gap-2x;
 }
 
 .dc-table-sort-btn .dc-btn__text {
-  @include visually-hidden;
+  @include dc.visually-hidden;
 }
 
 .dc-table_sticky-header > .dc-table-head > .dc-table-row > .dc-table-cell {
@@ -120,7 +122,8 @@
   background: var(--dc-table-selected-stiped-row-bg);
 }
 
-.dc-table_loading > .dc-table-body .dc-table-cell {
+.dc-table_loading > .dc-table-body .dc-table-cell,
+.dc-table-cell_loading {
   position: relative;
   color: transparent;
 
@@ -149,7 +152,7 @@
     max-height: 100%;
     content: '';
     animation: shine 2s infinite linear;
-    border-radius: $border-radius-2xs;
+    border-radius: dc.$border-radius-2xs;
     background-color: var(--dc-skeleton-bg-color);
     background-image: linear-gradient(
       90deg,

package/scss/components/_tabs.scss

@@ -1,27 +1,28 @@
 @use 'sass:math' as math;
+@use '../abstracts' as dc;
 
 .dc-tab {
-  font-size: $font-size-sm;
-  line-height: px-to-rem(40px);
+  font-size: dc.$font-size-sm;
+  line-height: dc.px-to-rem(40px);
   position: relative;
   display: inline-flex;
   align-items: baseline;
-  height: px-to-rem(40px);
-  padding: 0 $gap-2x;
+  height: dc.px-to-rem(40px);
+  padding: 0 dc.$gap-2x;
   cursor: pointer;
   user-select: none;
   white-space: nowrap;
   color: var(--dc-tab-text-color);
   border: none;
   border-bottom: 2px solid transparent;
-  border-radius: $border-radius-md;
+  border-radius: dc.$border-radius-md;
   background: none;
   appearance: none;
 }
 
 .dc-tab:focus {
   outline: none;
-  @include focus-ring-inset;
+  @include dc.focus-ring-inset;
 }
 
 .dc-tab_selected {
@@ -33,20 +34,20 @@
 
 .dc-tab__icon {
   flex: 0;
-  margin-right: $gap-3x;
+  margin-right: dc.$gap-3x;
 }
 
 .dc-tab__badge {
-  $_size: px-to-rem(20px);
+  $_size: dc.px-to-rem(20px);
 
-  font-size: $font-size-xs;
+  font-size: dc.$font-size-xs;
   line-height: $_size;
   display: inline-block;
   box-sizing: border-box;
   min-width: $_size;
   height: $_size;
-  margin-left: $gap-3x;
-  padding: 0 $gap-1x;
+  margin-left: dc.$gap-3x;
+  padding: 0 dc.$gap-1x;
   color: var(--dc-tab-badge-text-color);
   border-radius: math.div($_size, 2);
   background: var(--dc-tab-badge-bg-color);
@@ -69,7 +70,7 @@
 }
 
 .dc-tabs__list > .dc-tabs__tab + .dc-tabs__tab {
-  margin-left: $gap-2x;
+  margin-left: dc.$gap-2x;
 }
 
 .dc-tabs__tab-pointer {