draft-components 2.11.0 → 3.0.0

package/css/draft-components.dark.css

@@ -1,609 +0,0 @@
-.dark {
-  /* Background */
-  --dc-primary-bg: var(--dc-gray-900);
-  --dc-bg-transparent-1: rgb(var(--dc-gray-50-rgb) / 0.1);
-  --dc-bg-transparent-2: rgb(var(--dc-gray-50-rgb) / 0.15);
-  --dc-bg-transparent-3: rgb(var(--dc-gray-50-rgb) / 0.25);
-
-  /* Borders */
-  --dc-border-color-transparent-1: rgb(var(--dc-gray-50-rgb) / 0.1);
-  --dc-border-color-transparent-2: rgb(var(--dc-gray-50-rgb) / 0.2);
-  --dc-border-color-transparent-3: rgb(var(--dc-gray-50-rgb) / 0.3);
-
-  /* Text */
-  --dc-primary-text-color: var(--dc-gray-100);
-  --dc-secondary-text-color: var(--dc-gray-400);
-  --dc-tertiary-text-color: var(--dc-gray-600);
-
-  /* Primary */
-  --dc-primary-color: var(--dc-blue-600);
-  --dc-primary-color-hover: var(--dc-blue-500);
-  --dc-on-primary-color: var(--dc-white);
-
-  /* Secondary */
-  --dc-secondary-color: rgb(var(--dc-blue-400-rgb) / 0.15);
-  --dc-secondary-color-hover: rgb(var(--dc-blue-400-rgb) / 0.3);
-  --dc-on-secondary-color: var(--dc-blue-400);
-
-  /* Accents */
-  --dc-info-text-color: var(--dc-blue-400);
-  --dc-success-text-color: var(--dc-green-400);
-  --dc-error-text-color: var(--dc-red-400);
-  --dc-warning-text-color: var(--dc-orange-400);
-
-  /* Gray button */
-  --dc-button-gray-text-color: var(--dc-gray-100);
-  --dc-button-gray-border-color: rgb(var(--dc-gray-50-rgb) / 0.1);
-  --dc-button-gray-bg: var(--dc-gray-700);
-  --dc-button-gray-bg-hover: var(--dc-gray-600);
-  --dc-button-gray-tinted-text-color: var(--dc-gray-100);
-  --dc-button-gray-tinted-bg: rgb(var(--dc-gray-50-rgb) / 0.1);
-  --dc-button-gray-tinted-bg-hover: rgb(var(--dc-gray-50-rgb) / 0.2);
-  --dc-button-gray-plain-text-color: var(--dc-gray-100);
-  --dc-button-gray-plain-bg-hover: rgb(var(--dc-gray-50-rgb) / 0.1);
-
-  /* Blue button */
-  --dc-button-blue-text-color: var(--dc-white);
-  --dc-button-blue-border-color: transparent;
-  --dc-button-blue-bg: var(--dc-blue-600);
-  --dc-button-blue-bg-hover: var(--dc-blue-500);
-  --dc-button-blue-tinted-text-color: var(--dc-blue-400);
-  --dc-button-blue-tinted-bg: rgb(var(--dc-blue-400-rgb) / 0.15);
-  --dc-button-blue-tinted-bg-hover: rgb(var(--dc-blue-400-rgb) / 0.3);
-  --dc-button-blue-plain-text-color: var(--dc-blue-400);
-  --dc-button-blue-plain-bg-hover: rgb(var(--dc-blue-400-rgb) / 0.15);
-
-  /* Red button */
-  --dc-button-red-text-color: var(--dc-white);
-  --dc-button-red-border-color: transparent;
-  --dc-button-red-bg: var(--dc-red-600);
-  --dc-button-red-bg-hover: var(--dc-red-500);
-  --dc-button-red-tinted-text-color: var(--dc-red-400);
-  --dc-button-red-tinted-bg: rgb(var(--dc-red-400-rgb) / 0.15);
-  --dc-button-red-tinted-bg-hover: rgb(var(--dc-red-400-rgb) / 0.3);
-  --dc-button-red-plain-text-color: var(--dc-red-400);
-  --dc-button-red-plain-bg-hover: rgb(var(--dc-red-400-rgb) / 0.15);
-
-  /* Green button */
-  --dc-button-green-text-color: var(--dc-white);
-  --dc-button-green-border-color: transparent;
-  --dc-button-green-bg: var(--dc-green-600);
-  --dc-button-green-bg-hover: var(--dc-green-500);
-  --dc-button-green-tinted-text-color: var(--dc-green-400);
-  --dc-button-green-tinted-bg: rgb(var(--dc-green-400-rgb) / 0.15);
-  --dc-button-green-tinted-bg-hover: rgb(var(--dc-green-400-rgb) / 0.3);
-  --dc-button-green-plain-text-color: var(--dc-green-400);
-  --dc-button-green-plain-bg-hover: rgb(var(--dc-green-400-rgb) / 0.15);
-
-  /* Controls */
-  --dc-control-primary-text-color: var(--dc-gray-100);
-  --dc-control-secondary-text-color: var(--dc-gray-400);
-  --dc-control-primary-color: var(--dc-blue-600);
-  --dc-control-primary-color-hover: var(--dc-blue-500);
-  --dc-control-on-primary-color: var(--dc-white);
-  --dc-control-secondary-color: rgb(var(--dc-blue-400-rgb) / 0.15);
-  --dc-control-border-color: var(--dc-gray-600);
-  --dc-control-bg: var(--dc-gray-800);
-  --dc-control-bg-inset: rgb(var(--dc-gray-50-rgb) / 0.25);
-  --dc-control-error-color: var(--dc-red-400);
-  --dc-focus-ring-color: rgb(var(--dc-blue-400-rgb) / 0.7);
-}
-
-/* Elements */
-
-.dark .dc-counter,
-.dark.dc-counter {
-  color-scheme: dark;
-}
-
-.dark .dc-tag,
-.dark.dc-tag {
-  --dc-tag-text-color: var(--dc-gray-300);
-  --dc-tag-border-color: rgb(var(--dc-gray-200-rgb) / 0.2);
-  --dc-tag-bg: rgb(var(--dc-gray-400-rgb) / 0.1);
-
-  color-scheme: dark;
-}
-
-.dark .dc-tag_filled,
-.dark.dc-tag_filled {
-  --dc-tag-text-color: var(--dc-gray-800);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: var(--dc-gray-300);
-}
-
-.dark .dc-tag_tinted,
-.dark.dc-tag_tinted {
-  --dc-tag-text-color: var(--dc-gray-50);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-gray-400-rgb) / 0.4);
-}
-
-.dark .dc-tag_green,
-.dark.dc-tag_green {
-  --dc-tag-text-color: var(--dc-green-400);
-  --dc-tag-border-color: rgb(var(--dc-green-200-rgb) / 0.2);
-  --dc-tag-bg: rgb(var(--dc-green-400-rgb) / 0.1);
-}
-
-.dark.dc-tag_green.dc-tag_filled,
-.dark .dc-tag_green.dc-tag_filled {
-  --dc-tag-text-color: var(--dc-white);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: var(--dc-green-600);
-}
-
-.dark .dc-tag_green.dc-tag_tinted,
-.dark.dc-tag_green.dc-tag_tinted {
-  --dc-tag-text-color: var(--dc-green-50);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-green-400-rgb) / 0.5);
-}
-
-.dark .dc-tag_cyan,
-.dark.dc-tag_cyan {
-  --dc-tag-text-color: var(--dc-sky-400);
-  --dc-tag-border-color: rgb(var(--dc-sky-200-rgb) / 0.2);
-  --dc-tag-bg: rgb(var(--dc-sky-400-rgb) / 0.1);
-}
-
-.dark .dc-tag_cyan.dc-tag_filled,
-.dark.dc-tag_cyan.dc-tag_filled {
-  --dc-tag-text-color: var(--dc-white);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: var(--dc-sky-600);
-}
-
-.dark .dc-tag_cyan.dc-tag_tinted,
-.dark.dc-tag_cyan.dc-tag_tinted {
-  --dc-tag-text-color: var(--dc-sky-50);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-sky-400-rgb) / 0.5);
-}
-
-.dark .dc-tag_blue,
-.dark.dc-tag_blue {
-  --dc-tag-text-color: var(--dc-blue-400);
-  --dc-tag-border-color: rgb(var(--dc-blue-200-rgb) / 0.2);
-  --dc-tag-bg: rgb(var(--dc-blue-400-rgb) / 0.1);
-}
-
-.dark .dc-tag_blue.dc-tag_filled,
-.dark.dc-tag_blue.dc-tag_filled {
-  --dc-tag-text-color: var(--dc-white);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: var(--dc-blue-600);
-}
-
-.dark .dc-tag_blue.dc-tag_tinted,
-.dark.dc-tag_blue.dc-tag_tinted {
-  --dc-tag-text-color: var(--dc-blue-50);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-blue-400-rgb) / 0.5);
-}
-
-.dark .dc-tag_purple,
-.dark.dc-tag_purple {
-  --dc-tag-text-color: var(--dc-violet-400);
-  --dc-tag-border-color: rgb(var(--dc-violet-200-rgb) / 0.2);
-  --dc-tag-bg: rgb(var(--dc-violet-400-rgb) / 0.1);
-}
-
-.dark .dc-tag_purple.dc-tag_filled,
-.dark.dc-tag_purple.dc-tag_filled {
-  --dc-tag-text-color: var(--dc-white);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: var(--dc-violet-600);
-}
-
-.dark .dc-tag_purple.dc-tag_tinted,
-.dark.dc-tag_purple.dc-tag_tinted {
-  --dc-tag-text-color: var(--dc-violet-50);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-violet-400-rgb) / 0.5);
-}
-
-.dark.dc-tag_pink,
-.dark .dc-tag_pink {
-  --dc-tag-text-color: var(--dc-pink-400);
-  --dc-tag-border-color: rgb(var(--dc-pink-200-rgb) / 0.2);
-  --dc-tag-bg: rgb(var(--dc-pink-400-rgb) / 0.1);
-}
-
-.dark .dc-tag_pink.dc-tag_filled,
-.dark.dc-tag_pink.dc-tag_filled {
-  --dc-tag-text-color: var(--dc-white);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: var(--dc-pink-600);
-}
-
-.dark .dc-tag_pink.dc-tag_tinted,
-.dark.dc-tag_pink.dc-tag_tinted {
-  --dc-tag-text-color: var(--dc-pink-50);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-pink-400-rgb) / 0.5);
-}
-
-.dark .dc-tag_red,
-.dark.dc-tag_red {
-  --dc-tag-text-color: var(--dc-red-400);
-  --dc-tag-border-color: rgb(var(--dc-red-200-rgb) / 0.2);
-  --dc-tag-bg: rgb(var(--dc-red-400-rgb) / 0.1);
-}
-
-.dark .dc-tag_red.dc-tag_filled,
-.dark.dc-tag_red.dc-tag_filled {
-  --dc-tag-text-color: var(--dc-white);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: var(--dc-red-500);
-}
-
-.dark .dc-tag_red.dc-tag_tinted,
-.dark.dc-tag_red.dc-tag_tinted {
-  --dc-tag-text-color: var(--dc-red-50);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-red-400-rgb) / 0.5);
-}
-
-.dark .dc-tag_orange,
-.dark.dc-tag_orange {
-  --dc-tag-text-color: var(--dc-orange-500);
-  --dc-tag-border-color: rgb(var(--dc-orange-200-rgb) / 0.2);
-  --dc-tag-bg: rgb(var(--dc-orange-400-rgb) / 0.1);
-}
-
-.dark .dc-tag_orange.dc-tag_filled,
-.dark.dc-tag_orange.dc-tag_filled {
-  --dc-tag-text-color: var(--dc-white);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: var(--dc-orange-500);
-}
-
-.dark .dc-tag_orange.dc-tag_tinted,
-.dark.dc-tag_orange.dc-tag_tinted {
-  --dc-tag-text-color: var(--dc-orange-50);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-orange-400-rgb) / 0.5);
-}
-
-.dark .dc-tag_yellow,
-.dark.dc-tag_yellow {
-  --dc-tag-text-color: var(--dc-yellow-500);
-  --dc-tag-border-color: rgb(var(--dc-yellow-200-rgb) / 0.2);
-  --dc-tag-bg: rgb(var(--dc-yellow-400-rgb) / 0.1);
-}
-
-.dark .dc-tag_yellow.dc-tag_filled,
-.dark.dc-tag_yellow.dc-tag_filled {
-  --dc-tag-text-color: var(--dc-yellow-900);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: var(--dc-yellow-400);
-}
-
-.dark .dc-tag_yellow.dc-tag_tinted,
-.dark.dc-tag_yellow.dc-tag_tinted {
-  --dc-tag-text-color: var(--dc-yellow-50);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-yellow-400-rgb) / 0.5);
-}
-
-.dark .dc-avatar,
-.dark.dc-avatar {
-  --dc-avatar-border-color: rgb(var(--dc-white-rgb) / 0.025);
-
-  color-scheme: dark;
-}
-
-.dark .dc-avatar_type_image,
-.dark.dc-avatar_type_image {
-  --dc-avatar-border-color: rgb(var(--dc-white-rgb) / 0.1);
-}
-
-.dark .dc-button,
-.dark.dc-button {
-  color-scheme: dark;
-}
-
-.dark .dc-button-group,
-.dark.dc-button-group {
-  color-scheme: dark;
-}
-
-.dark .dc-spinner,
-.dark.dc-spinner {
-  color-scheme: dark;
-}
-
-/* Overlays */
-
-.dark .dc-tooltip,
-.dark.dc-tooltip {
-  --dc-tooltip-text-color: var(--dc-gray-800);
-  --dc-tooltip-bg: var(--dc-gray-100);
-
-  color-scheme: dark;
-}
-
-.dark .dc-popover,
-.dark.dc-popover {
-  --dc-popover-border-color: var(--dc-gray-700);
-  --dc-popover-bg: var(--dc-gray-800);
-  --dc-popover-shadow:
-    0 0 0 1px var(--dc-gray-700),
-    var(--dc-shadow-lg);
-
-  color-scheme: dark;
-}
-
-.dark .dc-dialog,
-.dark.dc-dialog {
-  --dc-dialog-border-color: var(--dc-gray-700);
-  --dc-dialog-bg: var(--dc-gray-800);
-  --dc-dialog-divider-color: var(--dc-border-color-transparent-1);
-
-  color-scheme: dark;
-}
-
-.dark .dc-dialog .dc-dialog-modal,
-.dark.dc-dialog .dc-dialog-modal {
-  box-shadow:
-    0 0 0 1px var(--dc-border-color-transparent-2),
-    var(--dc-shadow-xl);
-}
-
-.dark .dc-slide-over,
-.dark.dc-slide-over {
-  --dc-slide-over-panel-bg: var(--dc-gray-800);
-
-  color-scheme: dark;
-}
-
-.dark .dc-slide-over__panel {
-  box-shadow: 0 0 0 1px var(--dc-border-color-transparent-1), var(--dc-shadow-md);
-}
-
-/* Forms */
-
-.dark .dc-text-input,
-.dark.dc-text-input {
-  color-scheme: dark;
-}
-
-.dark .dc-password-input,
-.dark.dc-password-input {
-  color-scheme: dark;
-}
-
-.dark .dc-textarea,
-.dark.dc-textarea {
-  color-scheme: dark;
-}
-
-.dark .dc-select,
-.dark.dc-select {
-  color-scheme: dark;
-}
-
-.dark .dc-switch,
-.dark.dc-switch {
-  color-scheme: dark;
-}
-
-.dark .dc-checkbox,
-.dark.dc-checkbox {
-  color-scheme: dark;
-}
-
-.dark .dc-radio,
-.dark.dc-radio {
-  color-scheme: dark;
-}
-
-.dark .dc-slider,
-.dark.dc-slider {
-  /* Thumb properties */
-  --dc-slider-thumb-border: 2px solid var(--dc-gray-200);
-  --dc-slider-thumb-focus-ring:
-    var(--dc-slider-thumb-shadow),
-    0 0 0 4px var(--dc-focus-ring-color);
-
-  /* Label properties */
-  --dc-slider-label-border: 1px solid var(--dc-gray-600);
-  --dc-slider-label-bg: var(--dc-gray-700);
-
-  /* Tick mark properties */
-  --dc-slider-tick-mark-color: rgb(var(--dc-gray-50-rgb) / 0.5);
-}
-
-.dark .dc-file-picker,
-.dark.dc-file-picker {
-  color-scheme: dark;
-}
-
-.dark .dc-datepicker,
-.dark.dc-datepicker {
-  color-scheme: dark;
-}
-
-.dark .dc-segmented,
-.dark.dc-segmented {
-  --dc-segmented-btn-bg-checked: var(--dc-gray-600);
-  --dc-segmented-btn-border-color-focus: var(--dc-blue-400);
-  --dc-segmented-btn-border-color-checked: var(--dc-gray-400);
-
-  color-scheme: dark;
-}
-
-.dark .dc-label,
-.dark.dc-label {
-  --dc-label-required-mark-color: #f87171;
-
-  color-scheme: dark;
-}
-
-.dark .dc-caption,
-.dark.dc-caption {
-  color-scheme: dark;
-}
-
-.dark .dc-selection-control,
-.dark.dc-selection-control {
-  color-scheme: dark;
-}
-
-.dark .dc-form-field,
-.dark.dc-form-field {
-  color-scheme: dark;
-}
-
-.dark .dc-color-picker,
-.dark.dc-color-picker {
-  --dc-color-picker-btn-inner-border-color: rgb(255 255 255 / 0.1);
-
-  color-scheme: dark;
-}
-
-.dark .dc-date-picker-popover,
-.dark.dc-date-picker-popover {
-  color-scheme: dark;
-}
-
-.dark .dc-date-range-picker-popover,
-.dark.dc-date-range-picker-popover {
-  color-scheme: dark;
-}
-
-/* Data display */
-
-.dark .dc-table,
-.dark.dc-table,
-.dark .dc-table-container,
-.dark.dc-table-container {
-  color-scheme: dark;
-}
-
-/* Feedback */
-
-.dark .dc-alert,
-.dark.dc-alert {
-  --dc-alert-text-color: var(--dc-gray-300);
-  --dc-alert-icon-color: var(--dc-gray-300);
-  --dc-alert-bg: rgb(var(--dc-gray-200-rgb) / 0.1);
-  --dc-alert-border-color: rgb(var(--dc-gray-400-rgb) / 0.2);
-  --dc-alert-accent-border-color: var(--dc-gray-400);
-
-  color-scheme: dark;
-}
-
-.dark .dc-alert_tint_orange,
-.dark.dc-alert_tint_orange {
-  --dc-alert-text-color: var(--dc-orange-400);
-  --dc-alert-icon-color: var(--dc-orange-400);
-  --dc-alert-bg: rgb(var(--dc-orange-200-rgb) / 0.1);
-  --dc-alert-border-color: rgb(var(--dc-orange-400-rgb) / 0.3);
-  --dc-alert-accent-border-color: var(--dc-orange-500);
-}
-
-.dark .dc-alert_tint_red,
-.dark.dc-alert_tint_red {
-  --dc-alert-text-color: var(--dc-red-400);
-  --dc-alert-icon-color: var(--dc-red-400);
-  --dc-alert-bg: rgb(var(--dc-red-300-rgb) / 0.1);
-  --dc-alert-border-color: rgb(var(--dc-red-400-rgb) / 0.3);
-  --dc-alert-accent-border-color: var(--dc-red-500);
-}
-
-.dark .dc-alert_tint_blue,
-.dark.dc-alert_tint_blue {
-  --dc-alert-text-color: var(--dc-blue-300);
-  --dc-alert-icon-color: var(--dc-blue-300);
-  --dc-alert-bg: rgb(var(--dc-blue-200-rgb) / 0.1);
-  --dc-alert-border-color: rgb(var(--dc-blue-400-rgb) / 0.3);
-  --dc-alert-accent-border-color: var(--dc-blue-400);
-}
-
-.dark .dc-alert_tint_green,
-.dark.dc-alert_tint_green {
-  --dc-alert-text-color: var(--dc-green-400);
-  --dc-alert-icon-color: var(--dc-green-400);
-  --dc-alert-bg: rgb(var(--dc-green-200-rgb) / 0.1);
-  --dc-alert-border-color: rgb(var(--dc-green-400-rgb) / 0.3);
-  --dc-alert-accent-border-color: var(--dc-green-500);
-}
-
-.dark .dc-toast,
-.dark.dc-toast {
-  --dc-toast-text-color: var(--dc-gray-800);
-  --dc-toast-secondary-text-color: var(--dc-gray-600);
-  --dc-toast-icon-color: var(--dc-gray-700);
-  --dc-toast-bg: var(--dc-gray-100);
-  --dc-toast-close-btn-color: var(--dc-gray-800);
-  --dc-toast-close-btn-bg: var(--dc-gray-100);
-  --dc-toast-btn-text-color: var(--dc-gray-800);
-  --dc-toast-btn-bg: rgb(var(--dc-gray-900-rgb) / 0.1);
-  --dc-toast-btn-bg-hover: rgb(var(--dc-gray-900-rgb) / 0.2);
-  --dc-toast-btn-focus-ring-color: var(--dc-gray-700);
-
-  color-scheme: dark;
-}
-
-.dark .dc-toast .dc-toast__close-btn,
-.dark.dc-toast .dc-toast__close-btn {
-  box-shadow:
-    0 0 0 1px rgb(var(--dc-black-rgb) / 0.1),
-    var(--dc-shadow-sm),
-    var(--dc-shadow-md);
-}
-
-.dark .dc-toaster,
-.dark.dc-toaster {
-  color-scheme: dark;
-}
-
-.dark .dc-empty-state,
-.dark.dc-empty-state {
-  color-scheme: dark;
-}
-
-/* Navigation */
-
-.dark .dc-tabs,
-.dark.dc-tabs {
-  color-scheme: dark;
-}
-
-.dark .dc-menu,
-.dark.dc-menu {
-  color-scheme: dark;
-}
-
-.dark .dc-nav-list,
-.dark.dc-nav-list {
-  color-scheme: dark;
-}
-
-.dark .dc-breadcrumbs,
-.dark.dc-breadcrumbs {
-  --dc-breadcrumbs-separator-color: rgb(var(--dc-gray-400-rgb) / 0.5);
-
-  color-scheme: dark;
-}
-
-.dark .dc-filter-buttons,
-.dark.dc-filter-buttons {
-  color-scheme: dark;
-}
-
-/* Other */
-
-.dark .dc-filtered-search,
-.dark.dc-filtered-search {
-  --dc-filtered-search-listbox-bg: var(--dc-gray-800);
-  --dc-filtered-search-listbox-shadow:
-    0 0 0 1px var(--dc-gray-700),
-    var(--dc-shadow-lg);
-  --dc-filtered-search-token-bg: var(--dc-gray-700);
-  --dc-filtered-search-token-bg-hover: rgb(var(--dc-white-rgb) / 0.1);
-
-  color-scheme: dark;
-}