draft-components 0.61.0 → 0.63.0

package/scss/components/_datetime-input.scss

@@ -1,3 +1,5 @@
+@use '../abstracts' as dc;
+
 .dc-datetime-input {
   display: inline-block;
   border: none;
@@ -12,7 +14,7 @@
 
 .dc-datetime-input__body {
   width: auto;
-  padding: $gap-1x calc(var(--dc-input-gap) - #{px-to-rem(2px)});
+  padding: dc.$gap-1x calc(var(--dc-input-gap) - #{dc.px-to-rem(2px)});
 }
 
 .dc-datetime-input__group {
@@ -20,13 +22,13 @@
 }
 
 .dc-datetime-input__group + .dc-datetime-input__group {
-  margin-left: $gap-3x;
+  margin-left: dc.$gap-3x;
 }
 
 .dc-datetime-input__separator {
   display: inline-block;
-  padding: 0 px-to-rem(2px);
-  opacity: $opacity-50;
+  padding: 0 dc.px-to-rem(2px);
+  opacity: dc.$opacity-50;
 }
 
 .dc-date-component-input {
@@ -39,8 +41,8 @@
 }
 
 .dc-date-component-input > * {
-  padding: 0 px-to-rem(2px);
   font-variant-numeric: tabular-nums;
+  padding: 0 dc.px-to-rem(2px);
 }
 
 .dc-date-component-input > [aria-hidden='true'] {
@@ -58,7 +60,7 @@
   height: 100%;
   margin: 0;
   border: none;
-  border-radius: $border-radius-2xs;
+  border-radius: dc.$border-radius-2xs;
   background: none;
   appearance: none;
   -moz-appearance: textfield;
@@ -71,12 +73,12 @@
 }
 
 .dc-date-component-input > input::placeholder {
-  opacity: $opacity-40;
+  opacity: dc.$opacity-40;
   color: inherit;
 }
 
 .dc-date-component-input > input:focus {
-  color: $white;
+  color: dc.$white;
   outline: none;
   background: var(--dc-input-accent-color);
   caret-color: transparent;
@@ -88,5 +90,5 @@
 }
 
 .dc-date-component-input > input:focus::placeholder {
-  opacity: $opacity-80;
+  opacity: dc.$opacity-80;
 }

package/scss/components/_dialog.scss

@@ -1,4 +1,6 @@
-$dialog-pad: $gap-4x;
+@use '../abstracts' as dc;
+
+$dialog-pad: dc.$gap-4x;
 
 .dc-dialog-container {
   position: fixed;
@@ -12,7 +14,7 @@ $dialog-pad: $gap-4x;
   justify-content: center;
   width: 100%;
   height: 100%;
-  background: rgba($black, $opacity-25);
+  background: rgba(dc.$black, dc.$opacity-25);
 }
 
 .dc-dialog {
@@ -23,11 +25,11 @@ $dialog-pad: $gap-4x;
   width: 40rem;
   max-width: 100%;
   height: auto;
-  margin: $gap-4x;
+  margin: dc.$gap-4x;
   padding-bottom: $dialog-pad;
   transition-property: opacity, transform;
   vertical-align: middle;
-  border-color: rgba($black, $opacity-25);
+  border-color: rgba(dc.$black, dc.$opacity-25);
 
   & > *:first-child {
     border-top-left-radius: inherit;
@@ -48,7 +50,7 @@ $dialog-pad: $gap-4x;
 
 .dc-dialog__close-btn {
   flex: none;
-  margin: $gap-1x;
+  margin: dc.$gap-1x;
 }
 
 .dc-dialog__description {
@@ -69,7 +71,7 @@ $dialog-pad: $gap-4x;
   padding-bottom: $dialog-pad;
 
   & > * + * {
-    margin-top: $gap-1x;
+    margin-top: dc.$gap-1x;
   }
 }
 
@@ -84,6 +86,6 @@ $dialog-pad: $gap-4x;
   padding-top: $dialog-pad;
 
   & > * + * {
-    margin-left: $gap-2x;
+    margin-left: dc.$gap-2x;
   }
 }

package/scss/components/_form-field.scss

@@ -1,9 +1,11 @@
+@use '../abstracts' as dc;
+
 .dc-form-field {
 }
 
 .dc-form-field__label {
   display: inline-block;
-  margin-bottom: $gap-1x;
+  margin-bottom: dc.$gap-1x;
 }
 
 .dc-form-field__input {
@@ -12,5 +14,5 @@
 .dc-form-field__hint,
 .dc-form-field__error {
   width: 100%;
-  margin-top: $gap-1x;
+  margin-top: dc.$gap-1x;
 }

package/scss/components/_formatted-content.scss

@@ -1,3 +1,5 @@
+@use '../abstracts' as dc;
+
 .dc-fmt-content,
 .dc-fmt-content__large-title,
 .dc-fmt-content__title-1,
@@ -13,22 +15,22 @@
   font-family: var(--dc-font-base);
   margin-top: 0;
   margin-bottom: 0;
-  letter-spacing: $tracking-normal;
+  letter-spacing: dc.$tracking-normal;
   color: inherit;
 }
 
 .dc-fmt-content,
 .dc-fmt-content__paragraph {
-  font-size: $font-size-base;
-  font-weight: $font-weight-normal;
-  line-height: $leading-lg;
+  font-size: dc.$font-size-base;
+  font-weight: dc.$font-weight-normal;
+  line-height: dc.$leading-lg;
 }
 
 .dc-fmt-content b,
 .dc-fmt-content strong,
 .dc-fmt-content__paragraph b,
 .dc-fmt-content__paragraph strong {
-  font-weight: $font-weight-semi-bold;
+  font-weight: dc.$font-weight-semi-bold;
 }
 
 .dc-fmt-content i,
@@ -54,11 +56,11 @@
 .dc-fmt-content__code,
 .dc-fmt-content code,
 .dc-fmt-content__paragraph code {
-  font-family: $font-mono;
+  font-family: dc.$font-mono;
   font-size: 85%;
   padding: 0.2em 0.4em;
-  border-radius: $border-radius-xs;
-  background: rgba($black, $opacity-5);
+  border-radius: dc.$border-radius-xs;
+  background: rgba(dc.$black, dc.$opacity-5);
 }
 
 .dc-fmt-content__large-title,
@@ -72,50 +74,50 @@
 .dc-fmt-content h4,
 .dc-fmt-content h5,
 .dc-fmt-content h6 {
-  font-weight: $font-weight-bold;
-  line-height: $leading-tight;
+  font-weight: dc.$font-weight-bold;
+  line-height: dc.$leading-tight;
 }
 
 .dc-fmt-content__title-1,
 .dc-fmt-content h1 {
-  font-size: $font-size-2xl;
+  font-size: dc.$font-size-2xl;
 }
 
 .dc-fmt-content__title-2,
 .dc-fmt-content h2 {
-  font-size: $font-size-xl;
+  font-size: dc.$font-size-xl;
 }
 
 .dc-fmt-content__title-3,
 .dc-fmt-content h3 {
-  font-size: $font-size-lg;
+  font-size: dc.$font-size-lg;
 }
 
 .dc-fmt-content__headline,
 .dc-fmt-content h4,
 .dc-fmt-content h5,
 .dc-fmt-content h6 {
-  font-size: $font-size-base;
+  font-size: dc.$font-size-base;
 }
 
 .dc-fmt-content__large-title {
-  font-size: $font-size-3xl;
+  font-size: dc.$font-size-3xl;
 }
 
 .dc-fmt-content__subheadline {
-  font-size: $font-size-sm;
-  line-height: $leading-tight;
+  font-size: dc.$font-size-sm;
+  line-height: dc.$leading-tight;
 }
 
 .dc-fmt-content__footnote {
   font-size: 0.8125rem;
-  line-height: $leading-tight;
+  line-height: dc.$leading-tight;
 }
 
 .dc-fmt-content__caption {
-  font-size: $font-size-xs;
-  line-height: $leading-tight;
-  opacity: $opacity-90;
+  font-size: dc.$font-size-xs;
+  line-height: dc.$leading-tight;
+  opacity: dc.$opacity-90;
 }
 
 .dc-fmt-content {

package/scss/components/_inline-message.scss

@@ -1,3 +1,5 @@
+@use '../abstracts' as dc;
+
 .dc-inline-message {
   display: inline-flex;
   align-items: flex-start;
@@ -23,6 +25,6 @@
 .dc-inline-message__icon {
   line-height: 1;
   flex-shrink: 0;
-  margin-right: $gap-2x;
+  margin-right: dc.$gap-2x;
   transform: translateY(0.125em);
 }

package/scss/components/_input.scss

@@ -1,7 +1,9 @@
+@use '../abstracts' as dc;
+
 .dc-input {
   font-family: var(--dc-font-base);
   font-size: var(--dc-input-font-size);
-  font-weight: $font-weight-normal;
+  font-weight: dc.$font-weight-normal;
   line-height: 1;
   position: relative;
   box-sizing: border-box;
@@ -11,7 +13,7 @@
   height: var(--dc-input-height);
   margin: 0;
   padding: 0;
-  transition: $transition-quick;
+  transition: dc.$transition-quick;
   transition-property: color, border-color, background-color, box-shadow;
   color: var(--dc-input-text-color);
   border-radius: var(--dc-input-border-radius);
@@ -20,7 +22,7 @@
   appearance: none;
 
   &::placeholder {
-    opacity: $opacity-40;
+    opacity: dc.$opacity-40;
     color: inherit;
   }
 }
@@ -54,17 +56,17 @@
 }
 
 .dc-input_size_sm {
-  --dc-input-width: #{px-to-rem(224px)};
+  --dc-input-width: #{dc.px-to-rem(224px)};
   --dc-input-height: var(--dc-control-sm-h);
-  --dc-input-border-radius: #{$border-radius-xs};
-  --dc-input-font-size: #{px-to-rem(13px)};
+  --dc-input-border-radius: #{dc.$border-radius-xs};
+  --dc-input-font-size: #{dc.px-to-rem(13px)};
 }
 
 .dc-input_size_lg {
-  --dc-input-width: #{px-to-rem(320px)};
+  --dc-input-width: #{dc.px-to-rem(320px)};
   --dc-input-height: var(--dc-control-lg-h);
-  --dc-input-border-radius: #{$border-radius-sm};
-  --dc-input-font-size: #{px-to-rem(15px)};
+  --dc-input-border-radius: #{dc.$border-radius-sm};
+  --dc-input-font-size: #{dc.px-to-rem(15px)};
 }
 
 .dc-input_full_width {

package/scss/components/_label.scss

@@ -1,11 +1,14 @@
+@use '../abstracts' as dc;
+
 .dc-label {
-  font-weight: $font-weight-medium;
+  font-weight: dc.$font-weight-medium;
   position: relative;
+  display: inline-block;
   color: var(--dc-label-text-color);
 }
 
 .dc-label_required::after {
-  padding-left: $gap-1x;
+  padding-left: dc.$gap-1x;
   content: '*';
   color: var(--dc-label-required-mark-color);
 }

package/scss/components/_loading-view.scss

@@ -1,8 +1,10 @@
+@use '../abstracts' as dc;
+
 .dc-loading-view {
   font-family: var(--dc-font-base);
-  font-size: $font-size-base;
-  padding-right: $gap-4x;
-  padding-left: $gap-4x;
+  font-size: dc.$font-size-base;
+  padding-right: dc.$gap-4x;
+  padding-left: dc.$gap-4x;
   text-align: center;
   color: var(--dc-primary-text-color);
 }
@@ -12,7 +14,7 @@
 }
 
 .dc-loading-view__content {
-  margin-top: $gap-3x;
+  margin-top: dc.$gap-3x;
 }
 
 .dc-loading-view_pad-y_none {
@@ -21,36 +23,36 @@
 }
 
 .dc-loading-view_pad-y_2xs {
-  padding-top: $gap-1x;
-  padding-bottom: $gap-1x;
+  padding-top: dc.$gap-1x;
+  padding-bottom: dc.$gap-1x;
 }
 
 .dc-loading-view_pad-y_xs {
-  padding-top: $gap-2x;
-  padding-bottom: $gap-2x;
+  padding-top: dc.$gap-2x;
+  padding-bottom: dc.$gap-2x;
 }
 
 .dc-loading-view_pad-y_sm {
-  padding-top: $gap-4x;
-  padding-bottom: $gap-4x;
+  padding-top: dc.$gap-4x;
+  padding-bottom: dc.$gap-4x;
 }
 
 .dc-loading-view_pad-y_md {
-  padding-top: $gap-8x;
-  padding-bottom: $gap-8x;
+  padding-top: dc.$gap-8x;
+  padding-bottom: dc.$gap-8x;
 }
 
 .dc-loading-view_pad-y_lg {
-  padding-top: $gap-16x;
-  padding-bottom: $gap-16x;
+  padding-top: dc.$gap-16x;
+  padding-bottom: dc.$gap-16x;
 }
 
 .dc-loading-view_pad-y_xl {
-  padding-top: $gap-20x;
-  padding-bottom: $gap-20x;
+  padding-top: dc.$gap-20x;
+  padding-bottom: dc.$gap-20x;
 }
 
 .dc-loading-view_pad-y_2xl {
-  padding-top: $gap-24x;
-  padding-bottom: $gap-24x;
+  padding-top: dc.$gap-24x;
+  padding-bottom: dc.$gap-24x;
 }

package/scss/components/_non-ideal-state-view.scss

@@ -1,9 +1,11 @@
+@use '../abstracts' as dc;
+
 .dc-non-ideal-state {
   font-family: var(--dc-font-base);
-  font-size: $font-size-base;
+  font-size: dc.$font-size-base;
   box-sizing: border-box;
-  padding-right: $gap-4x;
-  padding-left: $gap-4x;
+  padding-right: dc.$gap-4x;
+  padding-left: dc.$gap-4x;
   text-align: center;
   color: var(--dc-non-ideal-state-text-color);
 }
@@ -14,7 +16,7 @@
 }
 
 .dc-non-ideal-state__icon {
-  margin-bottom: $gap-8x;
+  margin-bottom: dc.$gap-8x;
   color: var(--dc-non-ideal-state-icon-color);
 }
 
@@ -23,31 +25,31 @@
 }
 
 .dc-non-ideal-state__icon_red {
-  color: $red-500;
+  color: dc.$red-500;
 }
 
 .dc-non-ideal-state__icon_orange {
-  color: $orange-500;
+  color: dc.$orange-500;
 }
 
 .dc-non-ideal-state__icon_blue {
-  color: $blue-500;
+  color: dc.$blue-500;
 }
 
 .dc-non-ideal-state__icon_green {
-  color: $green-500;
+  color: dc.$green-500;
 }
 
 .dc-non-ideal-state__description {
-  margin-top: $gap-2x;
+  margin-top: dc.$gap-2x;
 }
 
 .dc-non-ideal-state__actions {
-  margin-top: $gap-4x;
+  margin-top: dc.$gap-4x;
 }
 
 .dc-non-ideal-state__content {
-  margin-top: $gap-4x;
+  margin-top: dc.$gap-4x;
 }
 
 .dc-non-ideal-state_spacing_none {
@@ -56,36 +58,36 @@
 }
 
 .dc-non-ideal-state_spacing_2xs {
-  padding-top: $gap-1x;
-  padding-bottom: $gap-1x;
+  padding-top: dc.$gap-1x;
+  padding-bottom: dc.$gap-1x;
 }
 
 .dc-non-ideal-state_spacing_xs {
-  padding-top: $gap-2x;
-  padding-bottom: $gap-2x;
+  padding-top: dc.$gap-2x;
+  padding-bottom: dc.$gap-2x;
 }
 
 .dc-non-ideal-state_spacing_sm {
-  padding-top: $gap-4x;
-  padding-bottom: $gap-4x;
+  padding-top: dc.$gap-4x;
+  padding-bottom: dc.$gap-4x;
 }
 
 .dc-non-ideal-state_spacing_md {
-  padding-top: $gap-8x;
-  padding-bottom: $gap-8x;
+  padding-top: dc.$gap-8x;
+  padding-bottom: dc.$gap-8x;
 }
 
 .dc-non-ideal-state_spacing_lg {
-  padding-top: $gap-16x;
-  padding-bottom: $gap-16x;
+  padding-top: dc.$gap-16x;
+  padding-bottom: dc.$gap-16x;
 }
 
 .dc-non-ideal-state_spacing_xl {
-  padding-top: $gap-20x;
-  padding-bottom: $gap-20x;
+  padding-top: dc.$gap-20x;
+  padding-bottom: dc.$gap-20x;
 }
 
 .dc-non-ideal-state_spacing_2xl {
-  padding-top: $gap-24x;
-  padding-bottom: $gap-24x;
+  padding-top: dc.$gap-24x;
+  padding-bottom: dc.$gap-24x;
 }

package/scss/components/_number-input.scss

@@ -1,3 +1,5 @@
+@use '../abstracts' as dc;
+
 .dc-number-input {
   display: inline-flex;
   align-items: center;
@@ -8,10 +10,10 @@
 }
 
 .dc-number-input > * + * {
-  margin-left: $gap-1x;
+  margin-left: dc.$gap-1x;
 }
 
 .dc-number-input__text-input {
   flex: auto;
-  width: px-to-rem(160px);
+  width: dc.px-to-rem(160px);
 }

package/scss/components/_radio-button.scss

@@ -1,3 +1,5 @@
+@use '../abstracts' as dc;
+
 .dc-radio-btn {
   --dc-selection-control-size: var(--dc-radio-btn-size);
 }
@@ -7,7 +9,7 @@
 }
 
 .dc-radio-btn__input {
-  @include visually-hidden;
+  @include dc.visually-hidden;
 }
 
 .dc-radio-btn__radio {
@@ -42,7 +44,7 @@
   transform: translate(-50%, -50%);
   border-radius: 50%;
   background: currentColor;
-  box-shadow: $shadow-xs;
+  box-shadow: dc.$shadow-xs;
 }
 
 .dc-radio-btn__input:focus + .dc-radio-btn__radio {

package/scss/components/_radio-group.scss

@@ -1,3 +1,5 @@
+@use '../abstracts' as dc;
+
 .dc-radio-group {
   font-family: var(--dc-font-base);
   margin-top: 0;
@@ -7,27 +9,27 @@
 }
 
 .dc-radio-group > * + * {
-  margin-top: $gap-2x;
+  margin-top: dc.$gap-2x;
 }
 
 .dc-radio-group-input {
-  @include visually-hidden;
+  @include dc.visually-hidden;
 }
 
 .dc-radio-group-item {
   display: flex;
   align-items: center;
   box-sizing: border-box;
-  padding: $gap-2x $gap-4x;
+  padding: dc.$gap-2x dc.$gap-4x;
   cursor: default;
   border: 2px solid var(--dc-radio-group-border-color);
-  border-radius: $border-radius-md;
+  border-radius: dc.$border-radius-md;
 }
 
 .dc-radio-group-item__check {
   display: inline-block;
-  width: px-to-rem(18px);
-  height: px-to-rem(18px);
+  width: dc.px-to-rem(18px);
+  height: dc.px-to-rem(18px);
   color: var(--dc-radio-group-selection-color);
   border-radius: 50%;
   box-shadow: inset 0 0 0 1px var(--dc-radio-group-border-color);
@@ -38,23 +40,23 @@
 }
 
 .dc-radio-group-item > * + * {
-  margin-left: $gap-4x;
+  margin-left: dc.$gap-4x;
 }
 
 .dc-radio-group-item__body {
-  font-size: $font-size-sm;
+  font-size: dc.$font-size-sm;
   flex: auto;
 }
 
 .dc-radio-group-item__label {
-  font-weight: $font-weight-medium;
+  font-weight: dc.$font-weight-medium;
   margin: 0;
   padding: 0;
   color: var(--dc-primary-text-color);
 }
 
 .dc-radio-group-item__description {
-  margin-top: $gap-1x;
+  margin-top: dc.$gap-1x;
   color: var(--dc-secondary-text-color);
 }
 
@@ -62,6 +64,7 @@
   border-color: var(--dc-radio-group-selection-color);
 }
 
+//noinspection CssMissingComma
 .dc-radio-group-input:checked
   ~ .dc-radio-group-item
   .dc-radio-group-item__check-icon {
@@ -78,16 +81,16 @@
 }
 
 .dc-radio-group_type_simple-list > * + * {
-  margin-top: $gap-1x;
+  margin-top: dc.$gap-1x;
 }
 
 .dc-radio-group_type_simple-list .dc-radio-group-item {
   display: inline-flex;
-  padding: $gap-1x;
+  padding: dc.$gap-1x;
   border: none;
-  border-radius: $border-radius-sm;
+  border-radius: dc.$border-radius-sm;
 }
 
 .dc-radio-group_type_simple-list .dc-radio-group-item__label {
-  font-weight: $font-weight-normal;
+  font-weight: dc.$font-weight-normal;
 }

package/scss/components/_scope-buttons.scss

@@ -1,4 +1,6 @@
-$dc-scope-buttons-space: $gap-1x;
+@use '../abstracts' as dc;
+
+$dc-scope-buttons-space: dc.$gap-1x;
 
 .dc-scope-buttons {
   display: inline-flex;
@@ -29,7 +31,7 @@ $dc-scope-buttons-space: $gap-1x;
 }
 
 .dc-scope-buttons_bottom-pad {
-  padding-bottom: $gap-1x;
+  padding-bottom: dc.$gap-1x;
 }
 
 .dc-scope-buttons > .dc-scope-button + .dc-scope-button {