draft-components 0.61.0 → 0.63.0

package/scss/components/_avatar.scss

@@ -1,104 +1,106 @@
+@use '../abstracts' as dc;
+
 .dc-avatar {
   position: relative;
   display: inline-flex;
 }
 
 .dc-avatar_tint_blue {
-  --dc-avatar-color: #{$white};
+  --dc-avatar-color: #{dc.$white};
   --dc-avatar-bg1-color: #6fd2fc;
   --dc-avatar-bg2-color: #2a9ef1;
 }
 
 .dc-avatar_icon-tint_blue {
-  --dc-avatar-icon-color: #{$white};
+  --dc-avatar-icon-color: #{dc.$white};
   --dc-avatar-icon-bg: linear-gradient(#6fd2fc, #2a9ef1);
 }
 
 .dc-avatar_tint_cyan {
-  --dc-avatar-color: #{$white};
+  --dc-avatar-color: #{dc.$white};
   --dc-avatar-bg1-color: #51ebd5;
   --dc-avatar-bg2-color: #28c9b7;
 }
 
 .dc-avatar_icon-tint_cyan {
-  --dc-avatar-icon-color: #{$white};
+  --dc-avatar-icon-color: #{dc.$white};
   --dc-avatar-icon-bg: linear-gradient(#51ebd5, #28c9b7);
 }
 
 .dc-avatar_tint_red {
-  --dc-avatar-color: #{$white};
+  --dc-avatar-color: #{dc.$white};
   --dc-avatar-bg1-color: #ff8e72;
   --dc-avatar-bg2-color: #ff5151;
 }
 
 .dc-avatar_icon-tint_red {
-  --dc-avatar-icon-color: #{$white};
+  --dc-avatar-icon-color: #{dc.$white};
   --dc-avatar-icon-bg: linear-gradient(#ff8e72, #ff5151);
 }
 
 .dc-avatar_tint_green {
-  --dc-avatar-color: #{$white};
+  --dc-avatar-color: #{dc.$white};
   --dc-avatar-bg1-color: #28ed7f;
   --dc-avatar-bg2-color: #16c059;
 }
 
 .dc-avatar_icon-tint_green {
-  --dc-avatar-icon-color: #{$white};
+  --dc-avatar-icon-color: #{dc.$white};
   --dc-avatar-icon-bg: linear-gradient(#28ed7f, #16c032);
 }
 
 .dc-avatar_tint_lime {
-  --dc-avatar-color: #{$white};
+  --dc-avatar-color: #{dc.$white};
   --dc-avatar-bg1-color: #9ddd7d;
   --dc-avatar-bg2-color: #54cb68;
 }
 
 .dc-avatar_icon-tint_lime {
-  --dc-avatar-icon-color: #{$white};
+  --dc-avatar-icon-color: #{dc.$white};
   --dc-avatar-icon-bg: linear-gradient(#9ddd7d, #54cb68);
 }
 
 .dc-avatar_tint_indigo {
-  --dc-avatar-color: #{$white};
+  --dc-avatar-color: #{dc.$white};
   --dc-avatar-bg1-color: #80aaff;
   --dc-avatar-bg2-color: #665fff;
 }
 
 .dc-avatar_icon-tint_indigo {
-  --dc-avatar-icon-color: #{$white};
+  --dc-avatar-icon-color: #{dc.$white};
   --dc-avatar-icon-bg: linear-gradient(#80aaff, #665fff);
 }
 
 .dc-avatar_tint_yellow {
-  --dc-avatar-color: #{$white};
+  --dc-avatar-color: #{dc.$white};
   --dc-avatar-bg1-color: #ffd85e;
   --dc-avatar-bg2-color: #ffb92b;
 }
 
 .dc-avatar_icon-tint_yellow {
-  --dc-avatar-icon-color: #{$white};
+  --dc-avatar-icon-color: #{dc.$white};
   --dc-avatar-icon-bg: linear-gradient(#ffd85e, #ffb92b);
 }
 
 .dc-avatar_tint_orange {
-  --dc-avatar-color: #{$white};
+  --dc-avatar-color: #{dc.$white};
   --dc-avatar-bg1-color: #ffc045;
   --dc-avatar-bg2-color: #ff8f15;
 }
 
 .dc-avatar_icon-tint_orange {
-  --dc-avatar-icon-color: #{$white};
+  --dc-avatar-icon-color: #{dc.$white};
   --dc-avatar-icon-bg: linear-gradient(#ffc045, #ff8f15);
 }
 
 .dc-avatar_tint_pink {
-  --dc-avatar-color: #{$white};
+  --dc-avatar-color: #{dc.$white};
   --dc-avatar-bg1-color: #e09ff2;
   --dc-avatar-bg2-color: #d669ed;
 }
 
 .dc-avatar_icon-tint_pink {
-  --dc-avatar-icon-color: #{$white};
+  --dc-avatar-icon-color: #{dc.$white};
   --dc-avatar-icon-bg: linear-gradient(#e09ff2, #d669ed);
 }
 

package/scss/components/_box.scss

@@ -1,3 +1,5 @@
+@use '../abstracts' as dc;
+
 .dc-box {
   font-family: var(--dc-font-base);
   box-sizing: border-box;
@@ -45,31 +47,31 @@
 }
 
 .dc-box_border-radius_2xs {
-  border-radius: $border-radius-2xs;
+  border-radius: dc.$border-radius-2xs;
 }
 
 .dc-box_border-radius_xs {
-  border-radius: $border-radius-xs;
+  border-radius: dc.$border-radius-xs;
 }
 
 .dc-box_border-radius_sm {
-  border-radius: $border-radius-sm;
+  border-radius: dc.$border-radius-sm;
 }
 
 .dc-box_border-radius_md {
-  border-radius: $border-radius-md;
+  border-radius: dc.$border-radius-md;
 }
 
 .dc-box_border-radius_lg {
-  border-radius: $border-radius-lg;
+  border-radius: dc.$border-radius-lg;
 }
 
 .dc-box_border-radius_xl {
-  border-radius: $border-radius-xl;
+  border-radius: dc.$border-radius-xl;
 }
 
 .dc-box_border-radius_2xl {
-  border-radius: $border-radius-2xl;
+  border-radius: dc.$border-radius-2xl;
 }
 
 /*------------------------------------*\
@@ -80,23 +82,23 @@
 }
 
 .dc-box_elevation_xs {
-  box-shadow: $shadow-xs;
+  box-shadow: dc.$shadow-xs;
 }
 
 .dc-box_elevation_sm {
-  box-shadow: $shadow-sm;
+  box-shadow: dc.$shadow-sm;
 }
 
 .dc-box_elevation_md {
-  box-shadow: $shadow-md;
+  box-shadow: dc.$shadow-md;
 }
 
 .dc-box_elevation_lg {
-  box-shadow: $shadow-lg;
+  box-shadow: dc.$shadow-lg;
 }
 
 .dc-box_elevation_xl {
-  box-shadow: $shadow-xl;
+  box-shadow: dc.$shadow-xl;
 }
 
 /*------------------------------------*\
@@ -107,31 +109,31 @@
 }
 
 .dc-box_p_1x {
-  padding: $gap-1x;
+  padding: dc.$gap-1x;
 }
 
 .dc-box_p_2x {
-  padding: $gap-2x;
+  padding: dc.$gap-2x;
 }
 
 .dc-box_p_3x {
-  padding: $gap-3x;
+  padding: dc.$gap-3x;
 }
 
 .dc-box_p_4x {
-  padding: $gap-4x;
+  padding: dc.$gap-4x;
 }
 
 .dc-box_p_5x {
-  padding: $gap-5x;
+  padding: dc.$gap-5x;
 }
 
 .dc-box_p_6x {
-  padding: $gap-6x;
+  padding: dc.$gap-6x;
 }
 
 .dc-box_p_8x {
-  padding: $gap-8x;
+  padding: dc.$gap-8x;
 }
 
 /*------------------------------------*\
@@ -142,31 +144,31 @@
 }
 
 .dc-box_pt_1x {
-  padding-top: $gap-1x;
+  padding-top: dc.$gap-1x;
 }
 
 .dc-box_pt_2x {
-  padding-top: $gap-2x;
+  padding-top: dc.$gap-2x;
 }
 
 .dc-box_pt_3x {
-  padding-top: $gap-3x;
+  padding-top: dc.$gap-3x;
 }
 
 .dc-box_pt_4x {
-  padding-top: $gap-4x;
+  padding-top: dc.$gap-4x;
 }
 
 .dc-box_pt_5x {
-  padding-top: $gap-5x;
+  padding-top: dc.$gap-5x;
 }
 
 .dc-box_pt_6x {
-  padding-top: $gap-6x;
+  padding-top: dc.$gap-6x;
 }
 
 .dc-box_pt_8x {
-  padding-top: $gap-8x;
+  padding-top: dc.$gap-8x;
 }
 
 /*------------------------------------*\
@@ -177,31 +179,31 @@
 }
 
 .dc-box_pr_1x {
-  padding-right: $gap-1x;
+  padding-right: dc.$gap-1x;
 }
 
 .dc-box_pr_2x {
-  padding-right: $gap-2x;
+  padding-right: dc.$gap-2x;
 }
 
 .dc-box_pr_3x {
-  padding-right: $gap-3x;
+  padding-right: dc.$gap-3x;
 }
 
 .dc-box_pr_4x {
-  padding-right: $gap-4x;
+  padding-right: dc.$gap-4x;
 }
 
 .dc-box_pr_5x {
-  padding-right: $gap-5x;
+  padding-right: dc.$gap-5x;
 }
 
 .dc-box_pr_6x {
-  padding-right: $gap-6x;
+  padding-right: dc.$gap-6x;
 }
 
 .dc-box_pr_8x {
-  padding-right: $gap-8x;
+  padding-right: dc.$gap-8x;
 }
 
 /*------------------------------------*\
@@ -212,31 +214,31 @@
 }
 
 .dc-box_pb_1x {
-  padding-bottom: $gap-1x;
+  padding-bottom: dc.$gap-1x;
 }
 
 .dc-box_pb_2x {
-  padding-bottom: $gap-2x;
+  padding-bottom: dc.$gap-2x;
 }
 
 .dc-box_pb_3x {
-  padding-bottom: $gap-3x;
+  padding-bottom: dc.$gap-3x;
 }
 
 .dc-box_pb_4x {
-  padding-bottom: $gap-4x;
+  padding-bottom: dc.$gap-4x;
 }
 
 .dc-box_pb_5x {
-  padding-bottom: $gap-5x;
+  padding-bottom: dc.$gap-5x;
 }
 
 .dc-box_pb_6x {
-  padding-bottom: $gap-6x;
+  padding-bottom: dc.$gap-6x;
 }
 
 .dc-box_pb_8x {
-  padding-bottom: $gap-8x;
+  padding-bottom: dc.$gap-8x;
 }
 
 /*------------------------------------*\
@@ -247,29 +249,29 @@
 }
 
 .dc-box_pl_1x {
-  padding-left: $gap-1x;
+  padding-left: dc.$gap-1x;
 }
 
 .dc-box_pl_2x {
-  padding-left: $gap-2x;
+  padding-left: dc.$gap-2x;
 }
 
 .dc-box_pl_3x {
-  padding-left: $gap-3x;
+  padding-left: dc.$gap-3x;
 }
 
 .dc-box_pl_4x {
-  padding-left: $gap-4x;
+  padding-left: dc.$gap-4x;
 }
 
 .dc-box_pl_5x {
-  padding-left: $gap-5x;
+  padding-left: dc.$gap-5x;
 }
 
 .dc-box_pl_6x {
-  padding-left: $gap-6x;
+  padding-left: dc.$gap-6x;
 }
 
 .dc-box_pl_8x {
-  padding-left: $gap-8x;
+  padding-left: dc.$gap-8x;
 }

package/scss/components/_breadcrumbs.scss

@@ -1,3 +1,5 @@
+@use '../abstracts' as dc;
+
 .dc-breadcrumbs {
   font-family: var(--dc-font-base);
   overflow-y: auto;
@@ -18,8 +20,8 @@
 }
 
 .dc-breadcrumbs__delimiter {
-  margin-right: $gap-4x;
-  margin-left: $gap-4x;
+  margin-right: dc.$gap-4x;
+  margin-left: dc.$gap-4x;
   color: var(--dc-breadcrumbs-delimiter-color);
 }
 
@@ -27,7 +29,7 @@
   font-family: inherit;
   display: inline-flex;
   align-items: center;
-  transition: $transition-quick;
+  transition: dc.$transition-quick;
   transition-property: color;
   text-decoration: none;
   color: var(--dc-breadcrumbs-item-color);
@@ -42,5 +44,5 @@
 }
 
 .dc-breadcrumbs-item__icon {
-  margin-right: $gap-2x;
+  margin-right: dc.$gap-2x;
 }

package/scss/components/_button.scss

@@ -1,8 +1,10 @@
+@use '../abstracts' as dc;
+
 .dc-btn {
   font-family: var(--dc-font-base);
-  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-default;
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -12,25 +14,25 @@
   min-width: var(--dc-btn-height);
   max-width: 100%;
   min-height: var(--dc-btn-height);
-  padding: 0 $gap-3x;
+  padding: 0 dc.$gap-3x;
   cursor: pointer;
   user-select: none;
-  transition: $transition-quick;
+  transition: dc.$transition-quick;
   transition-property: opacity, background-color;
   text-decoration: none;
-  letter-spacing: $tracking-tight;
+  letter-spacing: dc.$tracking-tight;
   color: var(--dc-btn-text-color);
   border: 1px solid var(--dc-btn-border-color);
-  border-radius: $border-radius-md;
+  border-radius: dc.$border-radius-md;
   background: var(--dc-btn-bg);
-  box-shadow: 0 1px 2px #{rgba($black, $opacity-5)};
+  box-shadow: 0 1px 2px #{rgba(dc.$black, dc.$opacity-5)};
 }
 
 .dc-btn:focus {
   border-color: var(--dc-btn-border-color-focus);
   outline: none;
   box-shadow: (
-    0 1px 2px #{rgba($black, $opacity-5)},
+    0 1px 2px #{rgba(dc.$black, dc.$opacity-5)},
     0 0 0 3px var(--dc-btn-focus-ring-color)
   );
 }
@@ -50,20 +52,20 @@
 }
 
 .dc-btn > * + * {
-  margin-left: $gap-2x;
+  margin-left: dc.$gap-2x;
 }
 
 .dc-btn_size_xs,
 .dc-btn_size_sm {
-  font-size: $font-size-xs;
+  font-size: dc.$font-size-xs;
 
-  border-radius: $border-radius-sm;
+  border-radius: dc.$border-radius-sm;
   --dc-btn-height: var(--dc-control-xs-h);
 }
 
 .dc-btn_size_xs {
-  padding-right: $gap-2x;
-  padding-left: $gap-2x;
+  padding-right: dc.$gap-2x;
+  padding-left: dc.$gap-2x;
 }
 
 .dc-btn_size_sm {
@@ -71,11 +73,11 @@
 }
 
 .dc-btn_size_lg {
-  font-size: $font-size-base;
+  font-size: dc.$font-size-base;
 
-  padding-right: $gap-4x;
-  padding-left: $gap-4x;
-  border-radius: $border-radius-md;
+  padding-right: dc.$gap-4x;
+  padding-left: dc.$gap-4x;
+  border-radius: dc.$border-radius-md;
   --dc-btn-height: var(--dc-control-lg-h);
 }
 

package/scss/components/_calendar.scss

@@ -1,7 +1,8 @@
 @use 'sass:math' as math;
+@use '../abstracts' as dc;
 
-$_calendar-cell-gap: $gap-2x;
-$_calendar-cell-size: px-to-rem(30px);
+$_calendar-cell-gap: dc.$gap-2x;
+$_calendar-cell-size: dc.px-to-rem(30px);
 $_calendar-day-border: 1px dashed var(--dc-calendar-border-color);
 
 .dc-calendar {
@@ -14,12 +15,12 @@ $_calendar-day-border: 1px dashed var(--dc-calendar-border-color);
 }
 
 .dc-calendar-header > * + * {
-  margin-left: $gap-1x;
+  margin-left: dc.$gap-1x;
 }
 
 .dc-calendar-header__title {
-  font-size: $font-size-sm;
-  font-weight: $font-weight-normal;
+  font-size: dc.$font-size-sm;
+  font-weight: dc.$font-weight-normal;
   flex: auto;
   text-align: center;
   color: var(--dc-calendar-text-color);
@@ -46,13 +47,13 @@ $_calendar-day-border: 1px dashed var(--dc-calendar-border-color);
 }
 
 .dc-calendar-row_head {
-  margin-bottom: $gap-2x;
-  padding: $gap-2x 0;
+  margin-bottom: dc.$gap-2x;
+  padding: dc.$gap-2x 0;
   border-bottom: 1px solid var(--dc-calendar-border-secondary-color);
 }
 
 .dc-calendar-row_head > * {
-  font-size: $font-size-xs;
+  font-size: dc.$font-size-xs;
   flex: 1 0 $_calendar-cell-size;
   text-align: center;
   color: var(--dc-calendar-text-secondary-color);
@@ -80,7 +81,7 @@ $_calendar-day-border: 1px dashed var(--dc-calendar-border-color);
 }
 
 .dc-calendar-day__btn {
-  font-size: $font-size-sm;
+  font-size: dc.$font-size-sm;
   line-height: 1;
   position: relative;
   display: inline-block;
@@ -105,9 +106,10 @@ $_calendar-day-border: 1px dashed var(--dc-calendar-border-color);
 .dc-calendar-day__btn:focus {
   z-index: 1;
   outline: none;
-  @include focus-ring;
+  @include dc.focus-ring;
 }
 
+//noinspection CssMissingComma
 .dc-calendar-day_range-preview-start:not(.dc-calendar-day_selected)
   .dc-calendar-day__btn,
 .dc-calendar-day_range-preview-end:not(.dc-calendar-day_selected)
@@ -126,7 +128,7 @@ $_calendar-day-border: 1px dashed var(--dc-calendar-border-color);
 }
 
 .dc-calendar-day_in-range::before {
-  background: $blue-100;
+  background: dc.$blue-100;
 }
 
 .dc-calendar-day_in-range-preview::before {
@@ -173,3 +175,11 @@ $_calendar-day-border: 1px dashed var(--dc-calendar-border-color);
 .dc-calendar-day_selected .dc-calendar-day__btn:hover {
   border-color: var(--dc-calendar-selected-day-bg-color);
 }
+
+.dc-calendar-day_disabled {
+  opacity: var(--dc-disabled-state-opacity);
+}
+
+.dc-calendar-day_disabled > .dc-calendar-day__btn {
+  border-color: transparent;
+}

package/scss/components/_checkbox.scss

@@ -1,3 +1,5 @@
+@use '../abstracts' as dc;
+
 .dc-checkbox {
   --dc-selection-control-size: var(--dc-checkbox-size);
 }
@@ -7,7 +9,7 @@
 }
 
 .dc-checkbox__input {
-  @include visually-hidden;
+  @include dc.visually-hidden;
 }
 
 .dc-checkbox__check {
@@ -20,7 +22,7 @@
   height: var(--dc-checkbox-size);
   cursor: pointer;
   border: var(--dc-input-border);
-  border-radius: $border-radius-xs;
+  border-radius: dc.$border-radius-xs;
   background: var(--dc-input-bg);
 }
 

package/scss/components/_date-picker.scss

@@ -1,9 +1,11 @@
+@use '../abstracts' as dc;
+
 .dc-date-picker {
   font-family: var(--dc-font-base);
   display: inline-block;
 }
 
 .dc-date-picker__footer {
-  font-size: $font-size-sm;
-  margin-top: $gap-2x;
+  font-size: dc.$font-size-sm;
+  margin-top: dc.$gap-2x;
 }

package/scss/components/_date-preset-picker-popover.scss

@@ -1,3 +1,5 @@
+@use '../abstracts' as dc;
+
 .dc-date-preset-picker-popover {
   max-width: initial;
   max-height: initial;
@@ -11,7 +13,7 @@
 }
 
 .dc-date-preset-picker__body > * + * {
-  margin-left: $gap-6x;
+  margin-left: dc.$gap-6x;
 }
 
 .dc-date-preset-picker_phone-view .dc-date-preset-picker__body {
@@ -19,7 +21,7 @@
 }
 
 .dc-date-preset-picker_phone-view .dc-date-preset-picker__body > * + * {
-  margin-top: $gap-4x;
+  margin-top: dc.$gap-4x;
   margin-left: 0;
 }
 
@@ -27,17 +29,17 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  margin-top: $gap-4x;
-  padding-top: $gap-4x;
+  margin-top: dc.$gap-4x;
+  padding-top: dc.$gap-4x;
   border-top: 1px solid var(--dc-secondary-border-color);
 }
 
 .dc-date-preset-picker__footer > * + * {
-  margin-left: $gap-4x;
+  margin-left: dc.$gap-4x;
 }
 
 .dc-date-preset-picker__selection {
-  font-size: $font-size-xs;
+  font-size: dc.$font-size-xs;
   text-align: right;
 }
 
@@ -46,7 +48,7 @@
 }
 
 .dc-date-preset-picker__selection > small {
-  font-size: $font-size-2xs;
+  font-size: dc.$font-size-2xs;
   color: var(--dc-secondary-text-color);
 }
 
@@ -56,7 +58,7 @@
 }
 
 .dc-date-preset-picker__btns > * + * {
-  margin-left: $gap-2x;
+  margin-left: dc.$gap-2x;
 }
 
 .dc-date-preset-picker_phone-view .dc-date-preset-picker__footer {
@@ -67,7 +69,7 @@
 }
 
 .dc-date-preset-picker_phone-view .dc-date-preset-picker__footer > * + * {
-  margin-top: $gap-3x;
+  margin-top: dc.$gap-3x;
   margin-left: 0;
 }