draft-components 0.71.0 → 0.72.0

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/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});
 
   /*------------------------------------*\

package/scss/utils/_typography.scss

@@ -39,6 +39,285 @@
   color: var(--dc-success-text-color) !important;
 }
 
+.text-gray-50 {
+  color: dc.$gray-50 !important;
+}
+.text-gray-100 {
+  color: dc.$gray-100 !important;
+}
+.text-gray-200 {
+  color: dc.$gray-200 !important;
+}
+.text-gray-300 {
+  color: dc.$gray-300 !important;
+}
+.text-gray-400 {
+  color: dc.$gray-400 !important;
+}
+.text-gray-500 {
+  color: dc.$gray-500 !important;
+}
+.text-gray-600 {
+  color: dc.$gray-600 !important;
+}
+.text-gray-700 {
+  color: dc.$gray-700 !important;
+}
+.text-gray-800 {
+  color: dc.$gray-800 !important;
+}
+.text-gray-900 {
+  color: dc.$gray-900 !important;
+}
+
+.text-blue-50 {
+  color: dc.$blue-50 !important;
+}
+.text-blue-100 {
+  color: dc.$blue-100 !important;
+}
+.text-blue-200 {
+  color: dc.$blue-200 !important;
+}
+.text-blue-300 {
+  color: dc.$blue-300 !important;
+}
+.text-blue-400 {
+  color: dc.$blue-400 !important;
+}
+.text-blue-500 {
+  color: dc.$blue-500 !important;
+}
+.text-blue-600 {
+  color: dc.$blue-600 !important;
+}
+.text-blue-700 {
+  color: dc.$blue-700 !important;
+}
+.text-blue-800 {
+  color: dc.$blue-800 !important;
+}
+.text-blue-900 {
+  color: dc.$blue-900 !important;
+}
+
+.text-cyan-50 {
+  color: dc.$cyan-50 !important;
+}
+.text-cyan-100 {
+  color: dc.$cyan-100 !important;
+}
+.text-cyan-200 {
+  color: dc.$cyan-200 !important;
+}
+.text-cyan-300 {
+  color: dc.$cyan-300 !important;
+}
+.text-cyan-400 {
+  color: dc.$cyan-400 !important;
+}
+.text-cyan-500 {
+  color: dc.$cyan-500 !important;
+}
+.text-cyan-600 {
+  color: dc.$cyan-600 !important;
+}
+.text-cyan-700 {
+  color: dc.$cyan-700 !important;
+}
+.text-cyan-800 {
+  color: dc.$cyan-800 !important;
+}
+.text-cyan-900 {
+  color: dc.$cyan-900 !important;
+}
+
+.text-red-50 {
+  color: dc.$red-50 !important;
+}
+.text-red-100 {
+  color: dc.$red-100 !important;
+}
+.text-red-200 {
+  color: dc.$red-200 !important;
+}
+.text-red-300 {
+  color: dc.$red-300 !important;
+}
+.text-red-400 {
+  color: dc.$red-400 !important;
+}
+.text-red-500 {
+  color: dc.$red-500 !important;
+}
+.text-red-600 {
+  color: dc.$red-600 !important;
+}
+.text-red-700 {
+  color: dc.$red-700 !important;
+}
+.text-red-800 {
+  color: dc.$red-800 !important;
+}
+.text-red-900 {
+  color: dc.$red-900 !important;
+}
+
+.text-green-50 {
+  color: dc.$green-50 !important;
+}
+.text-green-100 {
+  color: dc.$green-100 !important;
+}
+.text-green-200 {
+  color: dc.$green-200 !important;
+}
+.text-green-300 {
+  color: dc.$green-300 !important;
+}
+.text-green-400 {
+  color: dc.$green-400 !important;
+}
+.text-green-500 {
+  color: dc.$green-500 !important;
+}
+.text-green-600 {
+  color: dc.$green-600 !important;
+}
+.text-green-700 {
+  color: dc.$green-700 !important;
+}
+.text-green-800 {
+  color: dc.$green-800 !important;
+}
+.text-green-900 {
+  color: dc.$green-900 !important;
+}
+
+.text-lime-50 {
+  color: dc.$lime-50 !important;
+}
+.text-lime-100 {
+  color: dc.$lime-100 !important;
+}
+.text-lime-200 {
+  color: dc.$lime-200 !important;
+}
+.text-lime-300 {
+  color: dc.$lime-300 !important;
+}
+.text-lime-400 {
+  color: dc.$lime-400 !important;
+}
+.text-lime-500 {
+  color: dc.$lime-500 !important;
+}
+.text-lime-600 {
+  color: dc.$lime-600 !important;
+}
+.text-lime-700 {
+  color: dc.$lime-700 !important;
+}
+.text-lime-800 {
+  color: dc.$lime-800 !important;
+}
+.text-lime-900 {
+  color: dc.$lime-900 !important;
+}
+
+.text-indigo-50 {
+  color: dc.$indigo-50 !important;
+}
+.text-indigo-100 {
+  color: dc.$indigo-100 !important;
+}
+.text-indigo-200 {
+  color: dc.$indigo-200 !important;
+}
+.text-indigo-300 {
+  color: dc.$indigo-300 !important;
+}
+.text-indigo-400 {
+  color: dc.$indigo-400 !important;
+}
+.text-indigo-500 {
+  color: dc.$indigo-500 !important;
+}
+.text-indigo-600 {
+  color: dc.$indigo-600 !important;
+}
+.text-indigo-700 {
+  color: dc.$indigo-700 !important;
+}
+.text-indigo-800 {
+  color: dc.$indigo-800 !important;
+}
+.text-indigo-900 {
+  color: dc.$indigo-900 !important;
+}
+
+.text-yellow-50 {
+  color: dc.$yellow-50 !important;
+}
+.text-yellow-100 {
+  color: dc.$yellow-100 !important;
+}
+.text-yellow-200 {
+  color: dc.$yellow-200 !important;
+}
+.text-yellow-300 {
+  color: dc.$yellow-300 !important;
+}
+.text-yellow-400 {
+  color: dc.$yellow-400 !important;
+}
+.text-yellow-500 {
+  color: dc.$yellow-500 !important;
+}
+.text-yellow-600 {
+  color: dc.$yellow-600 !important;
+}
+.text-yellow-700 {
+  color: dc.$yellow-700 !important;
+}
+.text-yellow-800 {
+  color: dc.$yellow-800 !important;
+}
+.text-yellow-900 {
+  color: dc.$yellow-900 !important;
+}
+
+.text-orange-50 {
+  color: dc.$orange-50 !important;
+}
+.text-orange-100 {
+  color: dc.$orange-100 !important;
+}
+.text-orange-200 {
+  color: dc.$orange-200 !important;
+}
+.text-orange-300 {
+  color: dc.$orange-300 !important;
+}
+.text-orange-400 {
+  color: dc.$orange-400 !important;
+}
+.text-orange-500 {
+  color: dc.$orange-500 !important;
+}
+.text-orange-600 {
+  color: dc.$orange-600 !important;
+}
+.text-orange-700 {
+  color: dc.$orange-700 !important;
+}
+.text-orange-800 {
+  color: dc.$orange-800 !important;
+}
+.text-orange-900 {
+  color: dc.$orange-900 !important;
+}
+
 /*------------------------------------*\
   #TEXT WEIGHT
 \*------------------------------------*/
@@ -54,7 +333,7 @@
   font-weight: 500 !important;
 }
 
-.text-semibold {
+.text-semi-bold {
   font-weight: 600 !important;
 }
 
@@ -62,7 +341,7 @@
   font-weight: 700 !important;
 }
 
-.text-extrabold {
+.text-extra-bold {
   font-weight: 800 !important;
 }
 
@@ -89,6 +368,10 @@
   white-space: nowrap !important;
 }
 
+.text-wrap {
+  white-space: initial !important;
+}
+
 /*------------------------------------*\
   #TEXT ALIGNMENT
 \*------------------------------------*/