draft-components 0.61.1 → 0.63.1

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 {

package/scss/components/_tag.scss

@@ -1,32 +1,34 @@
+@use '../abstracts' as dc;
+
 .dc-tag {
-  --dc-tag-height: #{px-to-rem(26px)};
-  --dc-tag-color: #{$gray-700};
-  --dc-tag-fill-color: #{$gray-200};
+  --dc-tag-height: #{dc.px-to-rem(26px)};
+  --dc-tag-color: #{dc.$gray-700};
+  --dc-tag-fill-color: #{dc.$gray-200};
 }
 
 .dc-tag {
   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;
   line-height: 1;
   display: inline-flex;
   align-items: center;
   min-height: var(--dc-tag-height);
-  padding: 0 $gap-3x;
+  padding: 0 dc.$gap-3x;
   color: var(--dc-tag-color);
-  border-radius: $border-radius-sm;
+  border-radius: dc.$border-radius-sm;
   background: var(--dc-tag-fill-color);
 }
 
 .dc-tag_size_sm {
-  font-size: $font-size-xs;
-  --dc-tag-height: #{px-to-rem(24px)};
+  font-size: dc.$font-size-xs;
+  --dc-tag-height: #{dc.px-to-rem(24px)};
 }
 
 .dc-tag_size_lg {
-  font-size: $font-size-base;
-  border-radius: $border-radius-md;
-  --dc-tag-height: #{px-to-rem(28px)};
+  font-size: dc.$font-size-base;
+  border-radius: dc.$border-radius-md;
+  --dc-tag-height: #{dc.px-to-rem(28px)};
 }
 
 .dc-tag_rounded {
@@ -36,7 +38,7 @@
 }
 
 .dc-tag__icon {
-  margin-right: px-to-em(6px, 14px);
+  margin-right: dc.px-to-em(6px, 14px);
 }
 
 .dc-tag__text {
@@ -45,16 +47,16 @@
 .dc-tag__btn {
   display: inline-flex;
   box-sizing: border-box;
-  margin-left: px-to-em(6px, 14px);
+  margin-left: dc.px-to-em(6px, 14px);
   padding: 0;
   cursor: pointer;
-  transition: $transition-quick;
+  transition: dc.$transition-quick;
   transition-property: opacity;
   transform: translateY(0.05em);
-  opacity: $opacity-60;
+  opacity: dc.$opacity-60;
   color: inherit;
   border: none;
-  border-radius: px-to-rem(1px);
+  border-radius: dc.px-to-rem(1px);
   background: none;
   appearance: none;
 }
@@ -65,51 +67,51 @@
 }
 
 .dc-tag__btn:enabled:hover {
-  opacity: $opacity-100;
+  opacity: dc.$opacity-100;
 }
 
 .dc-tag:focus {
-  opacity: $opacity-100;
+  opacity: dc.$opacity-100;
   outline: none;
   box-shadow: 0 0 0 2px var(--dc-tag-fill-color), 0 0 0 4px currentColor;
 }
 
 .dc-tag_color_blue {
-  --dc-tag-color: #{$blue-800};
-  --dc-tag-fill-color: #{$blue-100};
+  --dc-tag-color: #{dc.$blue-800};
+  --dc-tag-fill-color: #{dc.$blue-100};
 }
 
 .dc-tag_color_cyan {
-  --dc-tag-color: #{$cyan-900};
-  --dc-tag-fill-color: #{$cyan-100};
+  --dc-tag-color: #{dc.$cyan-900};
+  --dc-tag-fill-color: #{dc.$cyan-100};
 }
 
 .dc-tag_color_red {
-  --dc-tag-color: #{$red-900};
-  --dc-tag-fill-color: #{$red-100};
+  --dc-tag-color: #{dc.$red-900};
+  --dc-tag-fill-color: #{dc.$red-100};
 }
 
 .dc-tag_color_green {
-  --dc-tag-color: #{$green-800};
-  --dc-tag-fill-color: #{$green-200};
+  --dc-tag-color: #{dc.$green-800};
+  --dc-tag-fill-color: #{dc.$green-200};
 }
 
 .dc-tag_color_lime {
-  --dc-tag-color: #{$lime-900};
-  --dc-tag-fill-color: #{$lime-100};
+  --dc-tag-color: #{dc.$lime-900};
+  --dc-tag-fill-color: #{dc.$lime-100};
 }
 
 .dc-tag_color_indigo {
-  --dc-tag-color: #{$indigo-900};
-  --dc-tag-fill-color: #{$indigo-100};
+  --dc-tag-color: #{dc.$indigo-900};
+  --dc-tag-fill-color: #{dc.$indigo-100};
 }
 
 .dc-tag_color_yellow {
-  --dc-tag-color: #{$yellow-900};
-  --dc-tag-fill-color: #{$yellow-100};
+  --dc-tag-color: #{dc.$yellow-900};
+  --dc-tag-fill-color: #{dc.$yellow-100};
 }
 
 .dc-tag_color_orange {
-  --dc-tag-color: #{$orange-900};
-  --dc-tag-fill-color: #{$orange-100};
+  --dc-tag-color: #{dc.$orange-900};
+  --dc-tag-fill-color: #{dc.$orange-100};
 }

package/scss/components/_text-input.scss

@@ -1,3 +1,5 @@
+@use '../abstracts' as dc;
+
 .dc-text-input {
   display: inline-flex;
   align-items: center;
@@ -18,7 +20,7 @@
 }
 
 .dc-text-input__native-input::placeholder {
-  opacity: $opacity-40;
+  opacity: dc.$opacity-40;
   color: inherit;
 }
 

package/scss/components/_toast.scss

@@ -1,39 +1,41 @@
+@use '../abstracts' as dc;
+
 .dc-toast-btn {
-  font-size: $font-size-sm;
-  padding: $gap-1x $gap-3x;
+  font-size: dc.$font-size-sm;
+  padding: dc.$gap-1x dc.$gap-3x;
   cursor: pointer;
-  transition: $transition-quick;
+  transition: dc.$transition-quick;
   transition-property: opacity;
-  opacity: $opacity-65;
+  opacity: dc.$opacity-65;
   color: var(--dc-toast-btn-text-color);
   border: none;
-  border-radius: $border-radius-md;
+  border-radius: dc.$border-radius-md;
   background: var(--dc-toast-btn-bg);
   appearance: none;
 
   &:hover {
-    opacity: $opacity-100;
+    opacity: dc.$opacity-100;
   }
 
   &:focus {
-    opacity: $opacity-100;
+    opacity: dc.$opacity-100;
     outline: none;
-    box-shadow: 0 0 0 0.125rem $gray-500;
+    box-shadow: 0 0 0 0.125rem dc.$gray-500;
   }
 }
 
 .dc-toast {
   font-family: var(--dc-font-base);
-  font-size: $font-size-sm;
+  font-size: dc.$font-size-sm;
   position: relative;
   display: inline-flex;
   box-sizing: border-box;
   width: auto;
-  min-width: px-to-rem(256px);
-  max-width: px-to-rem(600px);
+  min-width: dc.px-to-rem(256px);
+  max-width: dc.px-to-rem(600px);
   text-align: left;
   color: var(--dc-toast-text-color);
-  border-radius: $border-radius-xl;
+  border-radius: dc.$border-radius-xl;
   background: var(--dc-toast-bg);
 }
 
@@ -50,45 +52,45 @@
 
 .dc-toast__body {
   flex: auto;
-  padding: $gap-4x;
+  padding: dc.$gap-4x;
 }
 
 .dc-toast__btns {
   flex: none;
   flex-direction: column;
-  padding: $gap-1x;
+  padding: dc.$gap-1x;
 }
 
 .dc-toast__btns > * + * {
-  margin-top: $gap-1x;
+  margin-top: dc.$gap-1x;
 }
 
 .dc-toast__icon {
-  margin-top: px-to-rem(2px);
-  margin-right: $gap-4x;
+  margin-top: dc.px-to-rem(2px);
+  margin-right: dc.$gap-4x;
 }
 
 .dc-toast_appearance_error .dc-toast__icon {
-  color: $red-500;
+  color: dc.$red-500;
 }
 
 .dc-toast_appearance_warning .dc-toast__icon {
-  color: $orange-500;
+  color: dc.$orange-500;
 }
 
 .dc-toast_appearance_success .dc-toast__icon {
-  color: $green-400;
+  color: dc.$green-400;
 }
 
 .dc-toast_appearance_info .dc-toast__icon {
-  color: $blue-400;
+  color: dc.$blue-400;
 }
 
 .dc-toast__message,
 .dc-toast__informative-text {
   font-size: inherit;
-  font-weight: $font-weight-normal;
-  line-height: $leading-normal;
+  font-weight: dc.$font-weight-normal;
+  line-height: dc.$leading-normal;
   margin: 0;
 }
 

package/scss/components/_toaster.scss

@@ -1,8 +1,10 @@
+@use '../abstracts' as dc;
+
 .toaster {
   position: fixed;
-  z-index: $zindex-toast;
-  right: $gap-2x;
-  left: $gap-2x;
+  z-index: dc.$zindex-toast;
+  right: dc.$gap-2x;
+  left: dc.$gap-2x;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
@@ -13,13 +15,13 @@
 .toaster_position_top-left,
 .toaster_position_top-center,
 .toaster_position_top-right {
-  top: $gap-2x;
+  top: dc.$gap-2x;
 }
 
 .toaster_position_bottom-left,
 .toaster_position_bottom-center,
 .toaster_position_bottom-right {
-  bottom: $gap-2x;
+  bottom: dc.$gap-2x;
 }
 
 .toaster_position_top-left > *,
@@ -48,7 +50,7 @@
 .toaster__item {
   animation: 250ms ease forwards;
   pointer-events: all;
-  box-shadow: 0 0 0 1px $gray-600, $shadow-lg;
+  box-shadow: 0 0 0 1px dc.$gray-600, dc.$shadow-lg;
 }
 
 @keyframes dc-show-toast-from-top {

package/scss/components/_tooltip.scss

@@ -1,13 +1,15 @@
+@use '../abstracts' as dc;
+
 .dc-tooltip {
   font-family: var(--dc-font-base);
-  font-size: $font-size-sm;
-  line-height: $leading-normal;
+  font-size: dc.$font-size-sm;
+  line-height: dc.$leading-normal;
   display: inline-block;
   box-sizing: border-box;
   width: auto;
   max-width: 18rem;
-  padding: $gap-1x $gap-2x;
+  padding: dc.$gap-1x dc.$gap-2x;
   color: var(--dc-tooltip-text-color);
-  border-radius: $border-radius-sm;
+  border-radius: dc.$border-radius-sm;
   background: var(--dc-tooltip-bg-color);
 }

package/scss/components/_vertical-navigation.scss

@@ -1,12 +1,14 @@
+@use '../abstracts' as dc;
+
 .dc-vertical-nav {
   font-family: var(--dc-font-base);
 }
 
 .dc-vertical-nav__header {
-  font-size: $font-size-xs;
-  font-weight: $font-weight-medium;
-  margin-bottom: $gap-2x;
-  padding-left: $gap-2x;
+  font-size: dc.$font-size-xs;
+  font-weight: dc.$font-weight-medium;
+  margin-bottom: dc.$gap-2x;
+  padding-left: dc.$gap-2x;
   letter-spacing: 0.075em;
   text-transform: uppercase;
   color: var(--dc-secondary-text-color);
@@ -19,41 +21,41 @@
 }
 
 .dc-vertical-nav__items > * + * {
-  margin-top: $gap-1x;
+  margin-top: dc.$gap-1x;
 }
 
 .dc-vertical-nav-item {
-  font-size: $font-size-base;
+  font-size: dc.$font-size-base;
   display: flex;
   align-items: center;
   box-sizing: border-box;
-  height: px-to-rem(36px);
-  padding: 0 $gap-2x;
+  height: dc.px-to-rem(36px);
+  padding: 0 dc.$gap-2x;
   cursor: default;
   user-select: none;
   text-decoration: none;
   color: var(--dc-secondary-text-color);
-  border-radius: $border-radius-sm;
+  border-radius: dc.$border-radius-sm;
 }
 
 .dc-vertical-nav-item:focus {
   outline: none;
-  @include focus-ring;
+  @include dc.focus-ring;
 }
 
 .dc-vertical-nav-item:hover {
-  background: rgba($black, $opacity-5);
+  background: rgba(dc.$black, dc.$opacity-5);
 }
 
 .dc-vertical-nav-item_selected {
   color: var(--dc-primary-text-color);
-  background: rgba($black, $opacity-5);
+  background: rgba(dc.$black, dc.$opacity-5);
 }
 
 .dc-vertical-nav-item__icon {
   display: inline-flex;
   flex: none;
-  padding-right: $gap-2x;
+  padding-right: dc.$gap-2x;
 }
 
 .dc-vertical-nav-item__content {
@@ -67,5 +69,5 @@
 .dc-vertical-nav-item__badge {
   display: inline-flex;
   flex: none;
-  padding-left: $gap-1x;
+  padding-left: dc.$gap-1x;
 }

package/scss/draft-components-utils.scss

@@ -1,4 +1,3 @@
-@import 'abstracts/variables';
 @import 'utils/box-model';
 @import 'utils/flexbox';
 @import 'utils/margin';

package/scss/draft-components.scss

@@ -1,4 +1,3 @@
-@import 'abstracts';
 @import 'themes/default-theme';
 @import 'base';
 @import 'components';