draft-components 2.10.3 → 3.0.0

package/dist/components/table/table-head-cell.js

@@ -17,7 +17,7 @@ const stateMapping = {
 export const TableHeadCell = forwardRef(function TableHeaderCell({ isSortable = false, sort = 'none', className, children, onChangeSort, ...props }, ref) {
     if (isSortable) {
         const Icon = iconMapping[sort];
-        children = (_jsxs("button", { className: "dc-table-cell__sort-btn", type: "button", onClick: () => onChangeSort?.(stateMapping[sort]), children: [children, " ", _jsx(Icon, { className: "dc-table-cell__sort-icon", "aria-hidden": true, strokeWidth: 2 })] }));
+        children = (_jsxs("button", { className: "dc-table-cell__sort-btn", type: "button", onClick: () => onChangeSort?.(stateMapping[sort]), children: [children, ' ', _jsx(Icon, { className: "dc-table-cell__sort-icon", "aria-hidden": true, strokeWidth: 2 })] }));
     }
     return (_jsx("th", { ...props, className: classNames(className, {
             'dc-table-cell': true,

package/dist/components/table/table.css

@@ -0,0 +1,176 @@
+.dc-table-container,
+.dc-table {
+  --dc-table-border-color: var(--dc-border-color-transparent-2);
+  --dc-table-bg: none;
+  --dc-table-head-bg: var(--dc-bg-transparent-1);
+  --dc-table-row-bg-stripped: var(--dc-bg-transparent-1);
+  --dc-table-row-bg-selected: var(--dc-bg-transparent-1);
+  --dc-table-row-bg-highlighted: var(--dc-bg-transparent-1);
+  --dc-table-cell-bg-hover: var(--dc-bg-transparent-1);
+  --dc-table-cell-bg-focus: var(--dc-bg-transparent-1);
+  --dc-table-cell-padding-x: 12px;
+  --dc-table-cell-padding-y: 8px;
+  --dc-table-sort-icon-size: 16px;
+
+  color-scheme: light;
+}
+
+.dc-table-container {
+  box-sizing: border-box;
+  width: 100%;
+  overflow-x: auto;
+  border: 0 solid var(--dc-table-border-color);
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+}
+
+.dc-table-container_border_all {
+  border-width: 1px;
+}
+
+.dc-table-container_border_top {
+  border-top-width: 1px;
+}
+
+.dc-table-container_border_right {
+  border-right-width: 1px;
+}
+
+.dc-table-container_border_bottom {
+  border-bottom-width: 1px;
+}
+
+.dc-table-container_border_left {
+  border-left-width: 1px;
+}
+
+.dc-table {
+  width: 100%;
+  font: var(--dc-text-sm);
+  font-variant-numeric: tabular-nums;
+  color: var(--dc-primary-text-color);
+  border-spacing: 0;
+  border-collapse: separate;
+}
+
+.dc-table-cell {
+  box-sizing: border-box;
+  padding:
+    var(--dc-table-cell-padding-y)
+    var(--dc-table-cell-padding-x);
+  background: var(--dc-table-bg);
+  border-bottom: 1px solid var(--dc-table-border-color);
+  scroll-snap-align: start;
+}
+
+.dc-table-cell_head {
+  font-size: 90%;
+  font-weight: 700;
+  white-space: nowrap;
+  border-bottom-color: var(--dc-table-border-color);
+}
+
+.dc-table_cell_sm .dc-table-cell {
+  --dc-table-cell-padding-y: 4px;
+  --dc-table-cell-padding-x: 8px;
+}
+
+.dc-table_cell_lg .dc-table-cell {
+  --dc-table-cell-padding-y: 12px;
+  --dc-table-cell-padding-x: 16px;
+}
+
+.dc-table-cell_sortable {
+  padding: 0;
+}
+
+.dc-table-cell__sort-btn {
+  position: relative;
+  display: block;
+  width: 100%;
+  padding:
+    var(--dc-table-cell-padding-y)
+    var(--dc-table-cell-padding-x);
+  padding-right:
+    calc(
+      var(--dc-table-cell-padding-x) +
+      var(--dc-table-sort-icon-size) +
+      var(--dc-table-cell-padding-x)
+    );
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+}
+
+.dc-table-cell__sort-btn:hover {
+  background: var(--dc-table-cell-bg-hover);
+}
+
+.dc-table-cell__sort-btn::before {
+  position: absolute;
+  inset: 0;
+  content: "";
+}
+
+.dc-table-cell__sort-btn:focus {
+  outline: none;
+}
+
+.dc-table-cell__sort-btn:focus::before {
+  background: var(--dc-table-cell-bg-focus);
+}
+
+.dc-table-cell__sort-btn:focus:not(:focus-visible)::before {
+  background: initial;
+}
+
+.dc-table-cell__sort-icon {
+  position: absolute;
+  top: 50%;
+  right: var(--dc-table-cell-padding-x);
+  width: var(--dc-table-sort-icon-size);
+  height: var(--dc-table-sort-icon-size);
+  transform: translateY(-50%);
+}
+
+.dc-table-head_tinted .dc-table-cell {
+  background: var(--dc-table-head-bg);
+}
+
+.dc-table-row_selected .dc-table-cell {
+  background: var(--dc-table-row-bg-selected) !important;
+}
+
+.dc-table_bordered .dc-table-cell:not(:last-child) {
+  border-right: 1px solid var(--dc-table-border-color);
+}
+
+.dc-table_striped .dc-table-body .dc-table-cell {
+  border-bottom-color: transparent;
+}
+
+.dc-table-body .dc-table-row:last-child .dc-table-cell {
+  border-bottom-color: transparent;
+}
+
+.dc-table_striped .dc-table-body .dc-table-row:nth-child(even) .dc-table-cell {
+  background: var(--dc-table-row-bg-stripped);
+}
+
+.dc-table_highlight_row .dc-table-body .dc-table-row:hover .dc-table-cell {
+  background: var(--dc-table-row-bg-highlighted);
+}
+
+.dark .dc-table,
+.dark.dc-table,
+.dark .dc-table-container,
+.dark.dc-table-container {
+  color-scheme: dark;
+}

package/dist/components/tabs/tab.js

@@ -10,5 +10,5 @@ export function Tab({ id, name, icon, counter, className, children, onClick, 'ar
         setSelectedTab(name);
         onClick?.(event);
     }
-    return (_jsx("button", { ...props, className: classNames('dc-tab', className), type: "button", role: "tab", name: name, id: id || tabProps.id, "aria-controls": ariaControls || tabProps.ariaControls, "aria-selected": selected, tabIndex: selected && !tabListHasFocus ? 0 : -1, onClick: handleClick, children: _jsxs("span", { className: "dc-tab__layout", children: [icon != null && (_jsx("span", { className: "dc-tab__icon", children: icon })), children != null && (_jsxs("span", { className: "dc-tab__label", children: [children, " "] })), counter != null && counter !== 0 && (_jsx(Badge, { className: "dc-tab__counter", children: counter }))] }) }));
+    return (_jsx("button", { ...props, className: classNames('dc-tab', className), type: "button", role: "tab", name: name, id: id || tabProps.id, "aria-controls": ariaControls || tabProps.ariaControls, "aria-selected": selected, tabIndex: selected && !tabListHasFocus ? 0 : -1, onClick: handleClick, children: _jsxs("span", { className: "dc-tab__layout", children: [icon != null && (_jsx("span", { className: "dc-tab__icon", children: icon })), children != null && (_jsxs("span", { className: "dc-tab__label", children: [children, ' '] })), counter != null && counter !== 0 && (_jsx(Badge, { className: "dc-tab__counter", children: counter }))] }) }));
 }

package/dist/components/tabs/tabs.css

@@ -0,0 +1,94 @@
+.dc-tabs {
+  --dc-tablist-border-color: var(--dc-border-color-transparent-2);
+  --dc-tab-text-color: var(--dc-primary-text-color);
+  --dc-tab-accent-color: var(--dc-primary-color);
+  --dc-tab-bg: none;
+  --dc-tab-bg-hover: var(--dc-bg-transparent-1);
+  --dc-tab-focus-ring-color: var(--dc-focus-ring-color);
+
+  color-scheme: light;
+}
+
+.dc-tab {
+  position: relative;
+  padding: 0;
+  margin: 0;
+  font: var(--dc-text-sm);
+  color: var(--dc-tab-text-color);
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  cursor: pointer;
+  background: none;
+  border: none;
+}
+
+.dc-tab:focus {
+  outline: none;
+}
+
+.dc-tab[aria-selected="true"]::after {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  content: "";
+  background: var(--dc-blue-500);
+  border-radius: 1px;
+}
+
+.dc-tab__layout {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  padding-right: 8px;
+  padding-left: 8px;
+  margin-bottom: 8px;
+  background: var(--dc-tab-bg);
+  border-radius: 8px;
+}
+
+.dc-tab:hover .dc-tab__layout {
+  background: var(--dc-tab-bg-hover);
+}
+
+.dc-tab:focus .dc-tab__layout {
+  box-shadow: inset 0 0 0 3px var(--dc-tab-focus-ring-color);
+}
+
+.dc-tab:focus:not(:focus-visible) .dc-tab__layout {
+  box-shadow: none;
+}
+
+.dc-tab__icon {
+  display: inline-flex;
+  margin-right: 8px;
+}
+
+.dc-tab__label {
+  white-space: nowrap;
+}
+
+.dc-tab__counter {
+  margin-left: 12px;
+}
+
+.dc-tab-list {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  max-width: 100%;
+  overflow-x: auto;
+  box-shadow: inset 0 -1px 0 var(--dc-tablist-border-color);
+}
+
+.dc-tab-list > * + * {
+  margin-left: 16px;
+}
+
+.dark .dc-tabs,
+.dark.dc-tabs {
+  color-scheme: dark;
+}

package/dist/components/tag/tag.css

@@ -0,0 +1,390 @@
+.dc-tag {
+  --dc-tag-text-color: var(--dc-gray-700);
+  --dc-tag-border-color: rgb(var(--dc-gray-700-rgb) / 20%);
+  --dc-tag-bg: rgb(var(--dc-gray-300-rgb) / 10%);
+
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  padding: 4px 10px;
+  font: 400 14px/16px var(--dc-primary-font);
+  color: var(--dc-tag-text-color);
+  color-scheme: light;
+  background: var(--dc-tag-bg);
+  border-radius: 6px;
+  box-shadow: inset 0 0 0 1px var(--dc-tag-border-color);
+}
+
+.dc-tag_filled {
+  --dc-tag-text-color: var(--dc-gray-800);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: var(--dc-gray-300);
+}
+
+.dc-tag_tinted {
+  --dc-tag-text-color: var(--dc-gray-900);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: rgb(var(--dc-gray-300-rgb) / 40%);
+}
+
+.dc-tag_rounded {
+  border-radius: 12px;
+}
+
+.dc-tag_sm {
+  padding: 2px 8px;
+  font-size: 13px;
+  line-height: 16px;
+  border-radius: 5px;
+}
+
+.dc-tag_sm.dc-tag_rounded {
+  border-radius: 10px;
+}
+
+.dc-tag_lg {
+  padding: 4px 12px;
+  font-size: 15px;
+  line-height: 20px;
+  border-radius: 7px;
+}
+
+.dc-tag_lg.dc-tag_rounded {
+  border-radius: 14px;
+}
+
+.dc-tag_green {
+  --dc-tag-text-color: var(--dc-green-800);
+  --dc-tag-border-color: rgb(var(--dc-green-700-rgb) / 20%);
+  --dc-tag-bg: rgb(var(--dc-green-300-rgb) / 10%);
+}
+
+.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);
+}
+
+.dc-tag_green.dc-tag_tinted {
+  --dc-tag-text-color: var(--dc-green-900);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: rgb(var(--dc-green-300-rgb) / 40%);
+}
+
+.dc-tag_cyan {
+  --dc-tag-text-color: var(--dc-sky-700);
+  --dc-tag-border-color: rgb(var(--dc-sky-700-rgb) / 20%);
+  --dc-tag-bg: rgb(var(--dc-sky-300-rgb) / 10%);
+}
+
+.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);
+}
+
+.dc-tag_cyan.dc-tag_tinted {
+  --dc-tag-text-color: var(--dc-sky-900);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: rgb(var(--dc-sky-300-rgb) / 40%);
+}
+
+.dc-tag_blue {
+  --dc-tag-text-color: var(--dc-blue-800);
+  --dc-tag-border-color: rgb(var(--dc-blue-700-rgb) / 20%);
+  --dc-tag-bg: rgb(var(--dc-blue-300-rgb) / 10%);
+}
+
+.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);
+}
+
+.dc-tag_blue.dc-tag_tinted {
+  --dc-tag-text-color: var(--dc-blue-900);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: rgb(var(--dc-blue-300-rgb) / 40%);
+}
+
+.dc-tag_purple {
+  --dc-tag-text-color: var(--dc-violet-800);
+  --dc-tag-border-color: rgb(var(--dc-violet-700-rgb) / 20%);
+  --dc-tag-bg: rgb(var(--dc-violet-300-rgb) / 10%);
+}
+
+.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);
+}
+
+.dc-tag_purple.dc-tag_tinted {
+  --dc-tag-text-color: var(--dc-violet-900);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: rgb(var(--dc-violet-300-rgb) / 40%);
+}
+
+.dc-tag_pink {
+  --dc-tag-text-color: var(--dc-pink-700);
+  --dc-tag-border-color: rgb(var(--dc-pink-700-rgb) / 20%);
+  --dc-tag-bg: rgb(var(--dc-pink-300-rgb) / 10%);
+}
+
+.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);
+}
+
+.dc-tag_pink.dc-tag_tinted {
+  --dc-tag-text-color: var(--dc-pink-900);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: rgb(var(--dc-pink-300-rgb) / 40%);
+}
+
+.dc-tag_red {
+  --dc-tag-text-color: var(--dc-red-700);
+  --dc-tag-border-color: rgb(var(--dc-red-700-rgb) / 20%);
+  --dc-tag-bg: rgb(var(--dc-red-300-rgb) / 10%);
+}
+
+.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);
+}
+
+.dc-tag_red.dc-tag_tinted {
+  --dc-tag-text-color: var(--dc-red-900);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: rgb(var(--dc-red-300-rgb) / 40%);
+}
+
+.dc-tag_orange {
+  --dc-tag-text-color: var(--dc-orange-700);
+  --dc-tag-border-color: rgb(var(--dc-orange-700-rgb) / 20%);
+  --dc-tag-bg: rgb(var(--dc-orange-300-rgb) / 10%);
+}
+
+.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);
+}
+
+.dc-tag_orange.dc-tag_tinted {
+  --dc-tag-text-color: var(--dc-orange-900);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: rgb(var(--dc-orange-300-rgb) / 40%);
+}
+
+.dc-tag_yellow {
+  --dc-tag-text-color: var(--dc-yellow-800);
+  --dc-tag-border-color: rgb(var(--dc-yellow-700-rgb) / 20%);
+  --dc-tag-bg: rgb(var(--dc-yellow-300-rgb) / 10%);
+}
+
+.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);
+}
+
+.dc-tag_yellow.dc-tag_tinted {
+  --dc-tag-text-color: var(--dc-yellow-900);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: rgb(var(--dc-yellow-300-rgb) / 40%);
+}
+
+.dark .dc-tag,
+.dark.dc-tag {
+  --dc-tag-text-color: var(--dc-gray-300);
+  --dc-tag-border-color: rgb(var(--dc-gray-200-rgb) / 20%);
+  --dc-tag-bg: rgb(var(--dc-gray-400-rgb) / 10%);
+
+  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) / 40%);
+}
+
+.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) / 20%);
+  --dc-tag-bg: rgb(var(--dc-green-400-rgb) / 10%);
+}
+
+.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) / 50%);
+}
+
+.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) / 20%);
+  --dc-tag-bg: rgb(var(--dc-sky-400-rgb) / 10%);
+}
+
+.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) / 50%);
+}
+
+.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) / 20%);
+  --dc-tag-bg: rgb(var(--dc-blue-400-rgb) / 10%);
+}
+
+.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) / 50%);
+}
+
+.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) / 20%);
+  --dc-tag-bg: rgb(var(--dc-violet-400-rgb) / 10%);
+}
+
+.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) / 50%);
+}
+
+.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) / 20%);
+  --dc-tag-bg: rgb(var(--dc-pink-400-rgb) / 10%);
+}
+
+.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) / 50%);
+}
+
+.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) / 20%);
+  --dc-tag-bg: rgb(var(--dc-red-400-rgb) / 10%);
+}
+
+.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) / 50%);
+}
+
+.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) / 20%);
+  --dc-tag-bg: rgb(var(--dc-orange-400-rgb) / 10%);
+}
+
+.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) / 50%);
+}
+
+.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) / 20%);
+  --dc-tag-bg: rgb(var(--dc-yellow-400-rgb) / 10%);
+}
+
+.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) / 50%);
+}