draft-components 0.51.0 → 0.52.2

package/scss/components/_datetime-input.scss

@@ -0,0 +1,92 @@
+.dc-datetime-input {
+  display: inline-block;
+  border: none;
+}
+
+.dc-datetime-input__body,
+.dc-datetime-input__group {
+  display: inline-flex;
+  align-items: center;
+  width: auto;
+}
+
+.dc-datetime-input__body {
+  width: auto;
+  padding: $gap-1x calc(var(--dc-input-gap) - #{px-to-rem(2px)});
+}
+
+.dc-datetime-input__group {
+  height: 100%;
+}
+
+.dc-datetime-input__group + .dc-datetime-input__group {
+  margin-left: $gap-3x;
+}
+
+.dc-datetime-input__separator {
+  display: inline-block;
+  padding: 0 px-to-rem(2px);
+  opacity: $opacity-50;
+}
+
+.dc-date-component-input {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 0;
+}
+
+.dc-date-component-input > * {
+  padding: 0 px-to-rem(2px);
+  font-variant-numeric: tabular-nums;
+}
+
+.dc-date-component-input > [aria-hidden='true'] {
+  pointer-events: none;
+  user-select: none;
+  opacity: 0;
+}
+
+.dc-date-component-input > input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  border: none;
+  border-radius: $border-radius-2xs;
+  background: none;
+  appearance: none;
+  -moz-appearance: textfield;
+}
+
+.dc-date-component-input > input::-webkit-outer-spin-button,
+.dc-date-component-input > input::-webkit-inner-spin-button {
+  margin: 0;
+  appearance: none;
+}
+
+.dc-date-component-input > input::placeholder {
+  color: inherit;
+  opacity: $opacity-40;
+}
+
+.dc-date-component-input > input:focus {
+  color: $white;
+  outline: none;
+  caret-color: transparent;
+  background: var(--dc-input-accent-color);
+}
+
+.dc-date-component-input > input::selection,
+.dc-date-component-input > input:focus::selection {
+  background: transparent;
+}
+
+.dc-date-component-input > input:focus::placeholder {
+  opacity: $opacity-80;
+}

package/scss/components/_form-field.scss

@@ -0,0 +1,16 @@
+.dc-form-field {
+}
+
+.dc-form-field__label {
+  display: inline-block;
+  margin-bottom: $gap-1x;
+}
+
+.dc-form-field__input {
+}
+
+.dc-form-field__hint,
+.dc-form-field__error {
+  width: 100%;
+  margin-top: $gap-1x;
+}

package/scss/components/_index.scss

@@ -5,11 +5,11 @@
 @import 'button';
 @import 'actions-group';
 @import 'buttons-group';
-@import 'field';
-@import 'text-field';
-@import 'number-field';
-@import 'password-field';
-@import 'datetime-field';
+@import 'input';
+@import 'text-input';
+@import 'number-input';
+@import 'password-input';
+@import 'datetime-input';
 @import 'slider';
 @import 'textarea';
 @import 'select';
@@ -32,7 +32,7 @@
 @import 'scope-buttons';
 @import 'label';
 @import 'inline-message';
-@import 'field-group';
+@import 'form-field';
 @import 'dialog';
 @import 'popover';
 @import 'tooltip';

package/scss/components/_input.scss

@@ -0,0 +1,73 @@
+.dc-input {
+  position: relative;
+  box-sizing: border-box;
+  width: var(--dc-input-width);
+  height: var(--dc-input-height);
+  min-width: 0;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+  transition: $transition-quick;
+  transition-property: color, border-color, background-color, box-shadow;
+  color: var(--dc-input-text-color);
+  border: var(--dc-input-border);
+  border-radius: var(--dc-input-border-radius);
+  background: var(--dc-input-bg);
+  font-family: var(--dc-font-base);
+  font-size: var(--dc-input-font-size);
+  font-weight: $font-weight-normal;
+  line-height: 1;
+  appearance: none;
+
+  &::placeholder {
+    opacity: $opacity-40;
+    color: inherit;
+  }
+}
+
+.dc-input:focus,
+.dc-input_focused {
+  --dc-input-focus-color: var(--dc-input-accent-color);
+
+  outline: none;
+  border-color: var(--dc-input-focus-color);
+  box-shadow: 0 0 0 1px var(--dc-input-focus-color);
+}
+
+.dc-input_invalid {
+  border-color: var(--dc-input-error-color);
+}
+
+.dc-input_invalid:focus,
+.dc-input_invalid.dc-input_focused {
+  --dc-input-focus-color: var(--dc-input-error-color);
+}
+
+.dc-input:disabled,
+.dc-input[disabled],
+.dc-input_disabled {
+  pointer-events: none;
+  color: var(--dc-input-disabled-text-color);
+  -webkit-text-fill-color: var(--dc-input-disabled-text-color);
+  border-color: var(--dc-input-disabled-border-color);
+  background-color: var(--dc-input-disabled-bg);
+  box-shadow: none;
+}
+
+.dc-input_size_sm {
+  --dc-input-width: #{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_size_lg {
+  --dc-input-width: #{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_full_width {
+  width: 100% !important;
+}

package/scss/components/{_number-field.scss → _number-input.scss}

@@ -1,17 +1,17 @@
-.dc-number-field {
+.dc-number-input {
   display: inline-flex;
   align-items: center;
 }
 
-.dc-number-field_full-width {
+.dc-number-input_full-width {
   width: 100%;
 }
 
-.dc-number-field > * + * {
+.dc-number-input > * + * {
   margin-left: $gap-1x;
 }
 
-.dc-number-field__input {
+.dc-number-input__text-input {
   flex: auto;
   width: px-to-rem(160px);
 }

package/scss/components/{_password-field.scss → _password-input.scss}

@@ -1,8 +1,8 @@
-.dc-password-field > *:last-child {
+.dc-password-input > *:last-child {
   padding-right: 0.125rem;
 }
 
-.dc-password-field .dc-icon-button {
+.dc-password-input__button {
   max-height: 100%;
   color: inherit;
   border-radius: inherit;

package/scss/components/_radio-button.scss

@@ -1,5 +1,5 @@
 .dc-radio-btn {
-  --dc-selection-control-size: var(--dc-radio-button-size);
+  --dc-selection-control-size: var(--dc-radio-btn-size);
 
   position: relative;
 }
@@ -13,46 +13,45 @@
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  width: var(--dc-radio-button-size);
-  height: var(--dc-radio-button-size);
+  width: var(--dc-radio-btn-size);
+  height: var(--dc-radio-btn-size);
   cursor: pointer;
-  color: var(--dc-field-accent-text-color);
+  color: var(--dc-input-accent-secondary-color);
   border-radius: 50%;
-  border: 0.0625rem solid var(--dc-field-border-color);
-  background: var(--dc-field-bg-color);
-
-  .dc-radio-btn__input:checked + & {
-    position: relative;
-    color: var(--dc-field-accent-text-color);
-    border-color: var(--dc-field-accent-color);
-    background: var(--dc-field-accent-color);
-
-    &::after {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      display: inline-flex;
-      width: calc(var(--dc-radio-button-size) / 2.61802);
-      height: calc(var(--dc-radio-button-size) / 2.61802);
-      content: '';
-      transform: translate(-50%, -50%);
-      border-radius: 50%;
-      background: currentColor;
-      box-shadow: $shadow-xs;
-    }
-  }
+  border: var(--dc-input-border);
+  background: var(--dc-input-bg);
+}
 
-  .dc-radio-btn__input:focus + & {
-    box-shadow: 0 0 0 3px var(--dc-focus-ring-color);
-  }
+.dc-radio-btn__input:checked + .dc-radio-btn__radio {
+  position: relative;
+  color: var(--dc-input-accent-secondary-color);
+  border-color: var(--dc-input-accent-color);
+  background: var(--dc-input-accent-color);
+}
+.dc-radio-btn__input:checked + .dc-radio-btn__radio::after {
+  --size: calc(var(--dc-radio-btn-size) / 2.618);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: inline-flex;
+  width: var(--size);
+  height: var(--size);
+  content: '';
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  background: currentColor;
+  box-shadow: $shadow-xs;
+}
 
-  .dc-radio-btn__input:disabled + & {
-    cursor: default;
-    border-color: var(--dc-field-disabled-border-color);
-    background: var(--dc-field-disabled-bg-color);
+.dc-radio-btn__input:focus + .dc-radio-btn__radio {
+  box-shadow: 0 0 0 3px var(--dc-focus-ring-color);
+}
 
-    &::after {
-      color: var(--dc-field-disabled-text-color);
-    }
-  }
+.dc-radio-btn__input:disabled + .dc-radio-btn__radio {
+  cursor: default;
+  border-color: var(--dc-input-disabled-border-color);
+  background: var(--dc-input-disabled-bg);
+}
+.dc-radio-btn__input:disabled + .dc-radio-btn__radio::after {
+  color: var(--dc-input-disabled-text-color);
 }

package/scss/components/_select.scss

@@ -1,4 +1,4 @@
-@function get-arrow-icon($color) {
+@function select-arrow-icon($color) {
   @return 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>'
   );
@@ -6,27 +6,27 @@
 
 .dc-select {
   width: auto;
-  padding-right: calc(1.25em + var(--dc-field-pad));
-  padding-left: var(--dc-field-pad);
+  padding-right: calc(1.25em + var(--dc-input-gap));
+  padding-left: var(--dc-input-gap);
   cursor: pointer;
-  background-image: get-arrow-icon($gray-600);
+  background-image: select-arrow-icon($gray-600);
   background-repeat: no-repeat;
   background-size: 0.85em auto;
-  background-position: calc(100% - var(--dc-field-pad)) center;
+  background-position: calc(100% - var(--dc-input-gap)) center;
   box-shadow: $shadow-xs;
   line-height: $leading-default;
+}
 
-  &:disabled {
-    background-image: get-arrow-icon($gray-400);
-  }
+.dc-select:disabled {
+  background-image: select-arrow-icon($gray-400);
 }
 
 .dc-select[multiple] {
   height: initial;
   padding: $gap-2x 0;
-  background: var(--dc-field-bg-color);
+  background: var(--dc-input-bg);
+}
 
-  option {
-    padding: $gap-1x $gap-3x;
-  }
+.dc-select option {
+  padding: $gap-1x $gap-3x;
 }

package/scss/components/_selection-control.scss

@@ -1,4 +1,5 @@
 .dc-selection-control {
+  --dc-selection-control-size: #{px-to-rem(18px)};
   --dc-selection-control-gap: #{$gap-3x};
 
   display: inline-flex;
@@ -19,15 +20,17 @@
   margin-left: var(--dc-selection-control-gap);
   user-select: none;
   color: var(--dc-primary-text-color);
-  font-size: $font-size-base;
+  font-size: $font-size-sm;
+  font-weight: $font-weight-medium;
   line-height: $leading-default;
   @include text-truncate;
 }
 
 .dc-selection-control__description {
   margin-top: $gap-1x;
-  margin-left: var(--dc-selection-control-size, 0);
-  padding-left: var(--dc-selection-control-gap);
+  margin-left: calc(
+    var(--dc-selection-control-size) + var(--dc-selection-control-gap)
+  );
   color: var(--dc-secondary-text-color);
   font-size: $font-size-sm;
   line-height: $leading-tight;
@@ -35,5 +38,5 @@
 
 .dc-selection-control_disabled .dc-selection-control__label,
 .dc-selection-control_disabled .dc-selection-control__description {
-  color: var(--dc-field-disabled-text-color);
+  color: var(--dc-input-disabled-text-color);
 }

package/scss/components/_slider.scss

@@ -11,7 +11,7 @@ $thumb-shadow: 0 0 0 1px rgba($black, $opacity-10), $shadow-sm, $shadow-md;
   height: $thumb-height;
   border-radius: 50%;
   border-color: transparent;
-  background: var(--dc-slider-thumb-gb-color);
+  background: var(--dc-slider-thumb-bg);
   box-shadow: $thumb-shadow;
   appearance: none;
 }
@@ -49,7 +49,7 @@ $thumb-shadow: 0 0 0 1px rgba($black, $opacity-10), $shadow-sm, $shadow-md;
 .dc-slider__tick_marks > * {
   flex: 0 0 3px;
   height: 6px;
-  background: var(--dc-slider-track-gb-color);
+  background: var(--dc-slider-track-bg);
 }
 
 .dc-slider::before,
@@ -63,12 +63,12 @@ $thumb-shadow: 0 0 0 1px rgba($black, $opacity-10), $shadow-sm, $shadow-md;
 .dc-slider::before {
   content: '';
   width: 100%;
-  background: var(--dc-slider-track-gb-color);
+  background: var(--dc-slider-track-bg);
 }
 
 .dc-slider__fill-track {
   width: 0;
-  background: var(--dc-slider-fill-track-gb-color);
+  background: var(--dc-slider-fill-track-bg);
 }
 
 .dc-slider__input {

package/scss/components/_switch.scss

@@ -1,5 +1,5 @@
 .dc-switch {
-  --dc-selection-control-size: 2rem;
+  --dc-selection-control-size: var(--dc-switch-width);
 
   position: relative;
 }
@@ -12,48 +12,48 @@
   position: relative;
   display: inline-flex;
   box-sizing: border-box;
-  width: var(--dc-switch-w);
-  height: var(--dc-switch-h);
+  width: var(--dc-switch-width);
+  height: var(--dc-switch-height);
   transition: $transition-quick;
   transition-property: border-color, background-color;
   cursor: pointer;
-  border-radius: calc(var(--dc-switch-h) / 2);
-  background: var(--dc-switch-bg-color);
-
-  &::after {
-    $offset: calc((var(--dc-switch-h) - var(--dc-switch-check-size)) / 2);
-
-    position: absolute;
-    top: $offset;
-    left: $offset;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    width: var(--dc-switch-check-size);
-    height: var(--dc-switch-check-size);
-    content: '';
-    transition: inherit;
-    transition-property: transform, border-color;
-    background: var(--dc-switch-check-color);
-    box-shadow: $shadow-sm, $shadow-md;
-    border-radius: 50%;
-  }
-
-  .dc-switch__input:checked + & {
-    background: var(--dc-switch-accent-color);
-
-    &::after {
-      transform: translateX(#{calc(var(--dc-switch-w) - var(--dc-switch-h))});
-    }
-  }
-
-  .dc-switch__input:focus + & {
-    box-shadow: 0 0 0 3px var(--dc-focus-ring-color);
-  }
-
-  .dc-switch__input:disabled + & {
-    cursor: default;
-    opacity: var(--dc-disabled-state-opacity);
-  }
+  border-radius: calc(var(--dc-switch-height) / 2);
+  background: var(--dc-switch-bg);
+}
+
+.dc-switch__check::after {
+  --offset: calc((var(--dc-switch-height) - var(--dc-switch-check-size)) / 2);
+
+  position: absolute;
+  top: var(--offset);
+  left: var(--offset);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--dc-switch-check-size);
+  height: var(--dc-switch-check-size);
+  content: '';
+  transition: inherit;
+  transition-property: transform, border-color;
+  background: var(--dc-input-accent-secondary-color);
+  box-shadow: $shadow-sm, $shadow-md;
+  border-radius: 50%;
+}
+
+.dc-switch__input:checked + .dc-switch__check {
+  background: var(--dc-input-accent-color);
+}
+.dc-switch__input:checked + .dc-switch__check::after {
+  // noinspection CssInvalidFunction
+  transform: translateX(calc(var(--dc-switch-width) - var(--dc-switch-height)));
+}
+
+.dc-switch__input:focus + .dc-switch__check {
+  box-shadow: 0 0 0 3px var(--dc-focus-ring-color);
+}
+
+.dc-switch__input:disabled + .dc-switch__check {
+  cursor: default;
+  opacity: var(--dc-disabled-state-opacity);
 }

package/scss/components/_text-input.scss

@@ -0,0 +1,52 @@
+.dc-text-input {
+  display: inline-flex;
+  align-items: center;
+}
+
+.dc-text-input__native-input {
+  flex: auto;
+  box-sizing: border-box;
+  width: 100%;
+  height: inherit;
+  min-width: 0;
+  padding: 0 calc(var(--dc-input-gap) * 0.75);
+  color: inherit;
+  border: none;
+  background: none;
+  font: inherit;
+  line-height: var(--dc-input-height);
+}
+
+.dc-text-input__native-input::placeholder {
+  color: inherit;
+  opacity: $opacity-40;
+}
+
+.dc-text-input__native-input:focus {
+  outline: none;
+}
+
+.dc-text-input__native-input:disabled {
+  color: inherit;
+  -webkit-text-fill-color: inherit;
+}
+
+.dc-text-input__add-on {
+  display: inline-flex;
+  flex: none;
+  padding: 0;
+  color: var(--dc-input-add-on-color);
+  border-radius: inherit;
+}
+
+.dc-input_disabled .dc-text-input__add-on {
+  color: var(--dc-input-disabled-add-on-color);
+}
+
+.dc-text-input > *:first-child {
+  padding-left: var(--dc-input-gap);
+}
+
+.dc-text-input > *:last-child {
+  padding-right: var(--dc-input-gap);
+}

package/scss/components/_textarea.scss

@@ -1,8 +1,9 @@
 .dc-textarea {
-  width: calc(var(--dc-field-w) * 1.75);
-  // min-height = lines-count * leading-in-rem * (top-padding + bottom-padding)
-  min-height: calc(5 * var(--dc-textarea-lh) * 1rem + var(--dc-field-pad) * 2);
-  padding: var(--dc-field-pad);
+  width: calc(var(--dc-input-width) * 1.75);
+  min-height: calc(
+    5 * var(--dc-textarea-leading) * 1rem + var(--dc-input-gap) * 2
+  );
+  padding: var(--dc-input-gap);
   resize: vertical;
-  line-height: var(--dc-textarea-lh);
+  line-height: var(--dc-textarea-leading);
 }