draft-components 0.71.2 → 0.73.0

package/scss/abstracts/_variables.scss

@@ -2,9 +2,6 @@
   #COLORS
 \*------------------------------------*/
 
-$white: #fff;
-$black: #000;
-
 $gray-50: #fafafa;
 $gray-100: #f4f4f5;
 $gray-200: #e4e4e7;
@@ -104,15 +101,6 @@ $orange-700: #f76707;
 $orange-800: #e8590c;
 $orange-900: #d9480f;
 
-/*------------------------------------*\
-  #Z-INDEX
-\*------------------------------------*/
-$zindex-base: 0;
-$zindex-sticky: 100;
-$zindex-fixed: 200;
-$zindex-overlay: 300;
-$zindex-toast: 400;
-
 /*------------------------------------*\
   #FONT FAMILY
 \*------------------------------------*/
@@ -222,20 +210,20 @@ $transition-slow: 500ms ease-in-out;
 /*------------------------------------*\
   #SHADOWS
 \*------------------------------------*/
-$shadow-xs: 0 0.0625rem 0.125rem 0 rgba($black, 0.05);
+$shadow-xs: 0 0.0625rem 0.125rem 0 rgba(black, 0.05);
 $shadow-sm: (
-  0 0.0625rem 0.1875rem 0 rgba($black, 0.1),
-  0 0.0625rem 0.125rem 0 rgba($black, 0.06)
+  0 0.0625rem 0.1875rem 0 rgba(black, 0.1),
+  0 0.0625rem 0.125rem 0 rgba(black, 0.06)
 );
 $shadow-md: (
-  0 0.25rem 0.375rem -0.0625rem rgba($black, 0.1),
-  0 0.125rem 0.25rem -0.0625rem rgba($black, 0.06)
+  0 0.25rem 0.375rem -0.0625rem rgba(black, 0.1),
+  0 0.125rem 0.25rem -0.0625rem rgba(black, 0.06)
 );
 $shadow-lg: (
-  0 0.625rem 0.9375rem -0.1875rem rgba($black, 0.1),
-  0 0.25rem 0.375rem -0.125rem rgba($black, 0.05)
+  0 0.625rem 0.9375rem -0.1875rem rgba(black, 0.1),
+  0 0.25rem 0.375rem -0.125rem rgba(black, 0.05)
 );
 $shadow-xl: (
-  0 1.25rem 1.5625rem -0.3125rem rgba($black, 0.1),
-  0 0.625rem 0.625rem -0.3125rem rgba($black, 0.04)
+  0 1.25rem 1.5625rem -0.3125rem rgba(black, 0.1),
+  0 0.625rem 0.625rem -0.3125rem rgba(black, 0.04)
 );

package/scss/components/_avatar.scss

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

package/scss/components/_button.scss

@@ -25,14 +25,14 @@
   border: 1px solid var(--dc-btn-border-color);
   border-radius: dc.$border-radius-md;
   background: var(--dc-btn-bg);
-  box-shadow: 0 1px 2px #{rgba(dc.$black, dc.$opacity-5)};
+  box-shadow: 0 1px 2px #{rgba(black, dc.$opacity-5)};
 }
 
 .dc-btn:focus {
   border-color: var(--dc-btn-border-color-focus);
   outline: none;
   box-shadow: (
-    0 1px 2px #{rgba(dc.$black, dc.$opacity-5)},
+    0 1px 2px #{rgba(black, dc.$opacity-5)},
     0 0 0 3px var(--dc-btn-focus-ring-color)
   );
 }

package/scss/components/_datetime-input.scss

@@ -41,8 +41,8 @@
 }
 
 .dc-date-component-input > * {
-  font-variant-numeric: tabular-nums;
   padding: 0 dc.px-to-rem(2px);
+  font-variant-numeric: tabular-nums;
 }
 
 .dc-date-component-input > [aria-hidden='true'] {
@@ -78,7 +78,7 @@
 }
 
 .dc-date-component-input > input:focus {
-  color: dc.$white;
+  color: white;
   outline: none;
   background: var(--dc-input-accent-color);
   caret-color: transparent;

package/scss/components/_file-input.scss

@@ -0,0 +1,71 @@
+@use '../abstracts' as dc;
+
+.dc-file-input {
+  font-family: var(--dc-font-base);
+  font-size: dc.$font-size-sm;
+  width: 100%;
+  color: var(--dc-file-input-text-color);
+}
+
+.dc-file-input__drop-zone {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  box-sizing: border-box;
+  height: 100%;
+  padding: dc.$gap-8x dc.$gap-6x;
+  border: 1px dashed var(--dc-file-input-border-color);
+  border-radius: dc.$border-radius-lg;
+}
+
+.dc-file-input__drop-zone_drag-over {
+  border-color: var(--dc-file-input-drag-border-color);
+}
+
+.dc-file-input__content {
+  text-align: center;
+}
+
+.dc-file-input__icon {
+  display: inline-flex;
+  margin-bottom: dc.$gap-5x;
+  color: var(--dc-file-input-icon-color);
+}
+
+.dc-file-input__button {
+  padding: dc.px-to-rem(2px);
+  cursor: pointer;
+  transition: dc.$transition-quick;
+  transition-property: box-shadow, color;
+  color: var(--dc-file-input-label-color);
+  border-radius: dc.$border-radius-xs;
+}
+
+.dc-file-input__help-text {
+  font-size: 90%;
+  margin-top: dc.$gap-2x;
+  color: var(--dc-file-input-help-text-color);
+}
+
+.dc-file-input__native {
+  @include dc.visually-hidden;
+}
+
+.dc-file-input__native:focus + .dc-file-input__drop-zone {
+  .dc-file-input__button {
+    box-shadow: 0 0 0 2px var(--dc-focus-border-color);
+  }
+}
+
+.dc-file-input_disabled {
+  opacity: var(--dc-disabled-state-opacity);
+}
+
+.dc-file-input_disabled * {
+  cursor: default;
+}
+
+.dc-file-input_disabled .dc-file-input__drop-zone_drag-over {
+  border-color: var(--dc-file-input-border-color);
+}

package/scss/components/_formatted-content.scss

@@ -60,7 +60,7 @@
   font-size: 85%;
   padding: 0.2em 0.4em;
   border-radius: dc.$border-radius-xs;
-  background: rgba(dc.$black, dc.$opacity-5);
+  background: rgba(black, dc.$opacity-5);
 }
 
 .dc-fmt-content__large-title,

package/scss/components/_index.scss

@@ -15,6 +15,7 @@
 @import 'number-input';
 @import 'password-input';
 @import 'datetime-input';
+@import 'file-input';
 @import 'calendar';
 @import 'date-picker';
 @import 'date-preset-picker-popover';

package/scss/components/_select.scss

@@ -7,7 +7,7 @@
 }
 
 .dc-select {
-  line-height: dc.$leading-default;
+  line-height: dc.$leading-tight;
   width: auto;
   padding-right: calc(1.25em + var(--dc-input-gap));
   padding-left: var(--dc-input-gap);

package/scss/components/_toaster.scss

@@ -2,7 +2,6 @@
 
 .toaster {
   position: fixed;
-  z-index: dc.$zindex-toast;
   right: dc.$gap-2x;
   left: dc.$gap-2x;
   box-sizing: border-box;

package/scss/components/_vertical-navigation.scss

@@ -44,12 +44,12 @@
 }
 
 .dc-vertical-nav-item:hover {
-  background: rgba(dc.$black, dc.$opacity-5);
+  background: rgba(black, dc.$opacity-5);
 }
 
 .dc-vertical-nav-item_selected {
   color: var(--dc-primary-text-color);
-  background: rgba(dc.$black, dc.$opacity-5);
+  background: rgba(black, dc.$opacity-5);
 }
 
 .dc-vertical-nav-item__icon {

package/scss/draft-components-utils.scss

@@ -3,5 +3,6 @@
 @import 'utils/margin';
 @import 'utils/padding';
 @import 'utils/gap';
-@import 'utils/borders';
+@import 'utils/border';
 @import 'utils/typography';
+@import 'utils/color';

package/scss/themes/_default-theme.scss

@@ -19,7 +19,7 @@
   --dc-primary-border-color: #{dc.$gray-300};
   --dc-secondary-border-color: #{dc.$gray-200};
 
-  --dc-primary-bg-color: #{dc.$white};
+  --dc-primary-bg-color: white;
   --dc-secondary-bg-color: #{dc.$gray-50};
   --dc-tertiary-bg-color: #{dc.$gray-100};
 
@@ -28,15 +28,10 @@
 
   --dc-focus-border-color: #{dc.$blue-500};
   --dc-focus-ring-color: #{rgba(dc.$blue-500, dc.$opacity-45)};
-  --dc-focus-ring-secondary-color: #{dc.$white};
+  --dc-focus-ring-secondary-color: white;
   --dc-focus-danger-border-color: #{dc.$red-500};
   --dc-focus-danger-ring-color: #{rgba(dc.$red-500, dc.$opacity-40)};
 
-  --dc-zindex-base: #{dc.$zindex-base};
-  --dc-zindex-sticky: #{dc.$zindex-sticky};
-  --dc-zindex-fixed: #{dc.$zindex-fixed};
-  --dc-zindex-overlay: #{dc.$zindex-overlay};
-
   --dc-disabled-state-opacity: #{dc.$opacity-50};
 
   --dc-control-xs-h: #{dc.px-to-rem(22px)};
@@ -57,7 +52,7 @@
   \*------------------------------------*/
   --dc-btn-height: var(--dc-control-md-h);
   --dc-btn-text-color: #{dc.$gray-700};
-  --dc-btn-bg: #{dc.$white};
+  --dc-btn-bg: white;
   --dc-btn-bg-hover: #{dc.$gray-100};
   --dc-btn-bg-active: #{dc.$gray-200};
   --dc-btn-border-color: #{dc.$gray-200};
@@ -80,7 +75,7 @@
   --dc-btn-minimal-border-color-focus: #{rgba(dc.$gray-500, dc.$opacity-0)};
   --dc-btn-minimal-focus-ring-color: var(--dc-focus-ring-color);
 
-  --dc-btn-primary-text-color: #{dc.$white};
+  --dc-btn-primary-text-color: white;
   --dc-btn-primary-bg: #{dc.$blue-500};
   --dc-btn-primary-bg-hover: #{dc.$blue-600};
   --dc-btn-primary-bg-active: #{dc.$blue-700};
@@ -88,7 +83,7 @@
   --dc-btn-primary-border-color-focus: #{dc.$blue-600};
   --dc-btn-primary-focus-ring-color: var(--dc-focus-ring-color);
 
-  --dc-btn-danger-text-color: #{dc.$white};
+  --dc-btn-danger-text-color: white;
   --dc-btn-danger-bg: #{dc.$red-600};
   --dc-btn-danger-bg-hover: #{dc.$red-700};
   --dc-btn-danger-bg-active: #{dc.$red-800};
@@ -96,7 +91,7 @@
   --dc-btn-danger-border-color-focus: #{dc.$red-800};
   --dc-btn-danger-focus-ring-color: #{rgba(dc.$red-600, dc.$opacity-50)};
 
-  --dc-btn-success-text-color: #{dc.$white};
+  --dc-btn-success-text-color: white;
   --dc-btn-success-bg: #{dc.$green-500};
   --dc-btn-success-bg-hover: #{dc.$green-600};
   --dc-btn-success-bg-active: #{dc.$green-700};
@@ -111,7 +106,7 @@
   --dc-input-add-on-color: #{dc.$gray-600};
   --dc-input-border-color: #{dc.$gray-300};
   --dc-input-border: 1px solid var(--dc-input-border-color);
-  --dc-input-bg: #{dc.$white};
+  --dc-input-bg: white;
 
   --dc-input-disabled-text-color: #{dc.$gray-400};
   --dc-input-disabled-add-on-color: #{dc.$gray-400};
@@ -120,7 +115,7 @@
 
   --dc-input-error-color: #{dc.$red-600};
   --dc-input-accent-color: #{dc.$blue-500};
-  --dc-input-accent-secondary-color: #{dc.$white};
+  --dc-input-accent-secondary-color: white;
 
   --dc-input-width: #{dc.px-to-rem(288px)};
   --dc-input-height: var(--dc-control-md-h);
@@ -130,6 +125,16 @@
 
   --dc-textarea-leading: #{dc.$leading-normal};
 
+  /*------------------------------------*\
+   #FILE INPUT
+  \*------------------------------------*/
+  --dc-file-input-text-color: #{dc.$gray-800};
+  --dc-file-input-icon-color: #{dc.$gray-400};
+  --dc-file-input-label-color: #{dc.$blue-500};
+  --dc-file-input-help-text-color: #{dc.$gray-500};
+  --dc-file-input-border-color: #{dc.$gray-400};
+  --dc-file-input-drag-border-color: #{dc.$gray-400};
+
   /*------------------------------------*\
    #SELECTION CONTROLS
   \*------------------------------------*/
@@ -146,7 +151,7 @@
    #RADIO GROUP
   \*------------------------------------*/
   --dc-radio-group-selection-color: #{dc.$blue-500};
-  --dc-radio-group-border-color: #{rgba(dc.$black, dc.$opacity-10)};
+  --dc-radio-group-border-color: #{rgba(black, dc.$opacity-10)};
 
   /*------------------------------------*\
    #SLIDER
@@ -154,7 +159,7 @@
   --dc-slider-thumb-width: 20px;
   --dc-slider-thumb-height: 20px;
   --dc-slider-track-height: 4px;
-  --dc-slider-thumb-bg: #{dc.$white};
+  --dc-slider-thumb-bg: white;
   --dc-slider-track-bg: #{dc.$gray-200};
   --dc-slider-fill-track-bg: #{dc.$blue-500};
   --dc-slider-tick-mark-color: #{dc.$gray-700};
@@ -168,7 +173,7 @@
   --dc-calendar-border-secondary-color: #{dc.$gray-200};
   --dc-calendar-arrow-color: #{dc.$blue-600};
   --dc-calendar-current-day-text-color: #{dc.$orange-600};
-  --dc-calendar-selected-day-text-color: #{dc.$white};
+  --dc-calendar-selected-day-text-color: white;
   --dc-calendar-selected-day-bg-color: #{dc.$blue-500};
 
   /*------------------------------------*\
@@ -187,7 +192,7 @@
    #ACTIONS GROUP
   \*------------------------------------*/
   --dc-actions-group-border: #{dc.$gray-300};
-  --dc-actions-group-bg: #{dc.$white};
+  --dc-actions-group-bg: white;
 
   /*------------------------------------*\
    #NON IDEAL STATE VIEW
@@ -200,10 +205,10 @@
    #TOAST
   \*------------------------------------*/
   --dc-toast-bg: #{dc.$gray-700};
-  --dc-toast-text-color: #{dc.$white};
+  --dc-toast-text-color: white;
   --dc-toast-secondary-text-color: #{dc.$gray-300};
-  --dc-toast-btn-bg: #{rgba(dc.$white, dc.$opacity-10)};
-  --dc-toast-btn-text-color: #{dc.$white};
+  --dc-toast-btn-bg: #{rgba(white, dc.$opacity-10)};
+  --dc-toast-btn-text-color: white;
 
   /*------------------------------------*\
    #BREADCRUMBS
@@ -217,7 +222,7 @@
    #SEGMENTED CONTROL
   \*------------------------------------*/
   --dc-segmented-control-text-color: #{dc.$gray-700};
-  --dc-segmented-control-text-color-active: #{dc.$white};
+  --dc-segmented-control-text-color-active: white;
   --dc-segmented-control-border-color: #{rgba(dc.$gray-900, dc.$opacity-15)};
   --dc-segmented-control-border-focus: #{dc.$blue-500};
   --dc-segmented-control-separator-color: #{rgba(dc.$gray-900, dc.$opacity-20)};
@@ -229,9 +234,9 @@
   \*------------------------------------*/
   --dc-tab-text-color: #{dc.$gray-500};
   --dc-tab-selected-text-color: #{dc.$blue-500};
-  --dc-tab-badge-text-color: #{dc.$white};
+  --dc-tab-badge-text-color: white;
   --dc-tab-badge-bg-color: #{dc.$gray-300};
-  --dc-tab-badge-selected-text-color: #{dc.$white};
+  --dc-tab-badge-selected-text-color: white;
   --dc-tab-selected-badge-bg-color: #{dc.$blue-500};
   --dc-tab-pointer-color: #{dc.$blue-500};
   --dc-tabs-border-color: #{dc.$gray-200};
@@ -263,10 +268,10 @@
   /*------------------------------------*\
    #AVATAR
   \*------------------------------------*/
-  --dc-avatar-color: #{dc.$white};
+  --dc-avatar-color: white;
   --dc-avatar-bg1-color: #{dc.$gray-400};
   --dc-avatar-bg2-color: #{dc.$gray-500};
-  --dc-avatar-icon-color: #{dc.$white};
+  --dc-avatar-icon-color: white;
   --dc-avatar-icon-bg: linear-gradient(#{dc.$gray-400}, #{dc.$gray-500});
 
   /*------------------------------------*\