draft-components 3.6.0 → 4.0.0

package/dist/components/button/button.css

@@ -1,13 +1,17 @@
-.dc-button {
-  --dc-button-height: 36px;
-  --dc-button-radius: 9px;
-  --dc-button-padding-left: 16px;
-  --dc-button-padding-right: 16px;
-  --dc-button-text-color: var(--dc-button-gray-text-color);
-  --dc-button-border-color: var(--dc-button-gray-border-color);
-  --dc-button-bg: var(--dc-button-gray-bg);
-  --dc-button-bg-hover: var(--dc-button-gray-bg-hover);
-  --dc-button-focus-ring-color: var(--dc-focus-ring-color);
+.dc-button,
+.dc-button_tint_light {
+  --height: 36px;
+  --radius: 9px;
+  --padding-left: 16px;
+  --padding-right: 16px;
+  --color: var(--dc-neutral-900);
+  --color-hover: var(--dc-neutral-900);
+  --background: var(--dc-white);
+  --background-hover: var(--dc-white);
+  --border-color: rgb(var(--dc-neutral-900-rgb) / 15%);
+  --shadow-color: rgb(var(--dc-black-rgb) / 10%);
+  --shadow: 0 1px 2px -1px var(--shadow-color);
+  --focus-ring-color: var(--dc-focus-ring-color);
 
   position: relative;
   box-sizing: border-box;
@@ -16,66 +20,76 @@
   grid-column-gap: 0.5em;
   place-items: center;
   justify-content: center;
-  height: var(--dc-button-height);
-  padding: 0 var(--dc-button-padding-right) 0 var(--dc-button-padding-left);
+  height: var(--height);
+  padding: 0 var(--padding-right) 0 var(--padding-left);
   font: 500 var(--dc-text-sm);
-  color: var(--dc-button-text-color);
+  color: var(--color);
   text-align: center;
-  text-decoration: none;
   text-transform: none;
   white-space: nowrap;
+  text-decoration: none;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  color-scheme: light;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  background: var(--dc-button-bg);
-  border: 1px solid var(--dc-button-border-color);
-  border-radius: var(--dc-button-radius);
-  transition-duration: 0.2s;
-  transition-property: color, background-color;
+  color-scheme: light;
+  background: var(--background);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
 }
 
-.dark .dc-button,
-.dark.dc-button {
-  color-scheme: dark;
+.dc-button_style_tinted,
+.dc-button_tint_light.dc-button_style_tinted {
+  --color: var(--dc-neutral-900);
+  --color-hover: var(--dc-neutral-900);
+  --background: rgb(var(--dc-neutral-900-rgb) / 8%);
+  --background-hover: rgb(var(--dc-neutral-900-rgb) / 16%);
+  --border-color: transparent;
+  --shadow: none;
 }
 
-.dc-button:focus {
-  outline: none;
+.dc-button_style_plain,
+.dc-button_tint_light.dc-button_style_plain {
+  --color: var(--dc-neutral-900);
+  --color-hover: var(--dc-neutral-900);
+  --background: transparent;
+  --background-hover: rgb(var(--dc-neutral-900-rgb) / 8%);
+  --border-color: transparent;
+  --shadow: none;
 }
 
-.dc-button:focus::after {
-  position: absolute;
-  inset: -3px;
-  pointer-events: none;
-  content: "";
-  border-radius: calc(3px + var(--dc-button-radius));
-  box-shadow: 0 0 0 3px var(--dc-button-focus-ring-color);
-}
-
-.dc-button_full-width {
-  display: grid;
-  width: 100%;
+.dc-button:focus {
+  outline: none;
 }
 
-.dc-button_style_plain:focus::after {
-  inset: 0;
-  border-radius: var(--dc-button-radius);
+.dc-button:focus-visible {
+  outline: solid 2px var(--focus-ring-color);
+  outline-offset: 2px;
 }
 
-.dc-button:focus:not(:focus-visible)::after {
-  content: none;
+.dc-button_style_plain:focus-visible {
+  outline-offset: 0;
+  background: var(--background-hover);
 }
 
 .dc-button:disabled {
+  pointer-events: none;
   opacity: var(--dc-disabled-state-opacity);
 }
 
-.dc-button:hover:not(:disabled) {
-  background: var(--dc-button-bg-hover);
+@media (hover: hover) {
+  .dc-button:hover {
+    color: var(--color-hover);
+    background: var(--background-hover);
+  }
+}
+
+.dc-button_full-width {
+  display: grid;
+  width: 100%;
 }
 
 .dc-button_loading,
@@ -94,119 +108,317 @@
 }
 
 .dc-button_has_icon-left {
-  padding-left: calc(var(--dc-button-padding-left) / 1.6);
+  padding-left: calc(var(--padding-left) / 1.5);
 }
 
 .dc-button_has_icon-right {
-  padding-right: calc(var(--dc-button-padding-right) / 1.6);
-}
-
-.dc-button_style_tinted {
-  --dc-button-text-color: var(--dc-button-gray-tinted-text-color);
-  --dc-button-bg: var(--dc-button-gray-tinted-bg);
-  --dc-button-bg-hover: var(--dc-button-gray-tinted-bg-hover);
-
-  border-color: transparent;
-  box-shadow: none;
-}
-
-.dc-button_style_plain {
-  --dc-button-text-color: var(--dc-button-gray-plain-text-color);
-  --dc-button-bg-hover: var(--dc-button-gray-plain-bg-hover);
-
-  background: transparent;
-  border-color: transparent;
-  box-shadow: none;
+  padding-right: calc(var(--padding-right) / 1.5);
 }
 
 .dc-button_xs {
-  --dc-button-height: 28px;
-  --dc-button-radius: 7px;
-  --dc-button-padding-left: 8px;
-  --dc-button-padding-right: 8px;
+  --height: 28px;
+  --radius: 7px;
+  --padding-left: 8px;
+  --padding-right: 8px;
 
   font: 500 var(--dc-text-xs);
 }
 
 .dc-button_sm {
-  --dc-button-height: 32px;
-  --dc-button-radius: 8px;
-  --dc-button-padding-left: 12px;
-  --dc-button-padding-right: 12px;
+  --height: 32px;
+  --radius: 8px;
+  --padding-left: 12px;
+  --padding-right: 12px;
 
   font: 500 var(--dc-text-sm);
 }
 
 .dc-button_lg {
-  --dc-button-height: 40px;
-  --dc-button-radius: 10px;
-  --dc-button-padding-left: 18px;
-  --dc-button-padding-right: 18px;
+  --height: 40px;
+  --radius: 10px;
+  --padding-left: 18px;
+  --padding-right: 18px;
 
   font: 500 var(--dc-text-md);
 }
 
 .dc-button_xl {
-  --dc-button-height: 44px;
-  --dc-button-radius: 11px;
-  --dc-button-padding-left: 20px;
-  --dc-button-padding-right: 20px;
+  --height: 44px;
+  --radius: 11px;
+  --padding-left: 20px;
+  --padding-right: 20px;
 
   font: 500 var(--dc-text-md);
 }
 
-.dc-button_tint_blue.dc-button_style_filled {
-  --dc-button-text-color: var(--dc-button-blue-text-color);
-  --dc-button-border-color: var(--dc-button-blue-border-color);
-  --dc-button-bg: var(--dc-button-blue-bg);
-  --dc-button-bg-hover: var(--dc-button-blue-bg-hover);
+.dc-button_tint_dark {
+  --color: var(--dc-white);
+  --color-hover: var(--dc-white);
+  --background: var(--dc-neutral-900);
+  --background-hover: var(--dc-neutral-900);
+  --border-color: rgb(var(--dc-white-rgb) / 15%);
+  --shadow-color: rgb(var(--dc-neutral-900-rgb) / 20%);
 }
 
-.dc-button_tint_blue.dc-button_style_tinted {
-  --dc-button-text-color: var(--dc-button-blue-tinted-text-color);
-  --dc-button-bg: var(--dc-button-blue-tinted-bg);
-  --dc-button-bg-hover: var(--dc-button-blue-tinted-bg-hover);
+.dc-button_tint_dark.dc-button_style_tinted {
+  --color: var(--dc-neutral-900);
+  --color-hover: var(--dc-neutral-900);
+  --background: rgb(var(--dc-neutral-900-rgb) / 8%);
+  --background-hover: rgb(var(--dc-neutral-900-rgb) / 16%);
+  --border-color: transparent;
+  --shadow: none;
 }
 
-.dc-button_tint_blue.dc-button_style_plain {
-  --dc-button-text-color: var(--dc-button-blue-plain-text-color);
-  --dc-button-bg-hover: var(--dc-button-blue-plain-bg-hover);
+.dc-button_tint_dark.dc-button_style_plain {
+  --color: var(--dc-neutral-900);
+  --color-hover: var(--dc-neutral-900);
+  --background: transparent;
+  --background-hover: rgb(var(--dc-neutral-900-rgb) / 8%);
+  --border-color: transparent;
+  --shadow: none;
 }
 
-.dc-button_tint_red.dc-button_style_filled {
-  --dc-button-text-color: var(--dc-button-red-text-color);
-  --dc-button-border-color: var(--dc-button-red-border-color);
-  --dc-button-bg: var(--dc-button-red-bg);
-  --dc-button-bg-hover: var(--dc-button-red-bg-hover);
+.dc-button_tint_sky {
+  --color: var(--dc-white);
+  --color-hover: var(--dc-white);
+  --background: var(--dc-sky-500);
+  --background-hover: var(--dc-sky-500);
+  --border-color: rgb(var(--dc-cyan-900-rgb) / 15%);
+  --shadow-color: rgb(var(--dc-cyan-900-rgb) / 20%);
 }
 
-.dc-button_tint_red.dc-button_style_tinted {
-  --dc-button-text-color: var(--dc-button-red-tinted-text-color);
-  --dc-button-bg: var(--dc-button-red-tinted-bg);
-  --dc-button-bg-hover: var(--dc-button-red-tinted-bg-hover);
+.dc-button_tint_sky.dc-button_style_tinted {
+  --color: var(--dc-sky-700);
+  --color-hover: var(--dc-sky-700);
+  --background: rgb(var(--dc-sky-500-rgb) / 12%);
+  --background-hover: rgb(var(--dc-sky-500-rgb) / 24%);
+  --border-color: transparent;
+  --shadow: none;
 }
 
-.dc-button_tint_red.dc-button_style_plain {
-  --dc-button-text-color: var(--dc-button-red-plain-text-color);
-  --dc-button-bg-hover: var(--dc-button-red-plain-bg-hover);
+.dc-button_tint_sky.dc-button_style_plain {
+  --color: var(--dc-sky-600);
+  --color-hover: var(--dc-sky-700);
+  --background: transparent;
+  --background-hover: rgb(var(--dc-sky-500-rgb) / 12%);
+  --border-color: transparent;
+  --shadow: none;
+}
+
+.dc-button_tint_blue {
+  --color: var(--dc-white);
+  --color-hover: var(--dc-white);
+  --background: var(--dc-blue-500);
+  --background-hover: var(--dc-blue-500);
+  --border-color: rgb(var(--dc-blue-900-rgb) / 15%);
+  --shadow-color: rgb(var(--dc-blue-900-rgb) / 20%);
+}
+
+.dc-button_tint_blue.dc-button_style_tinted {
+  --color: var(--dc-blue-700);
+  --color-hover: var(--dc-blue-700);
+  --background: rgb(var(--dc-blue-500-rgb) / 12%);
+  --background-hover: rgb(var(--dc-blue-500-rgb) / 24%);
+  --border-color: transparent;
+  --shadow: none;
+}
+
+.dc-button_tint_blue.dc-button_style_plain {
+  --color: var(--dc-blue-600);
+  --color-hover: var(--dc-blue-700);
+  --background: transparent;
+  --background-hover: rgb(var(--dc-blue-500-rgb) / 12%);
+  --border-color: transparent;
+  --shadow: none;
+}
+
+.dc-button_tint_indigo {
+  --color: var(--dc-white);
+  --color-hover: var(--dc-white);
+  --background: var(--dc-indigo-500);
+  --background-hover: var(--dc-indigo-500);
+  --border-color: rgb(var(--dc-indigo-900-rgb) / 15%);
+  --shadow-color: rgb(var(--dc-indigo-900-rgb) / 20%);
+}
+
+.dc-button_tint_indigo.dc-button_style_tinted {
+  --color: var(--dc-indigo-700);
+  --color-hover: var(--dc-indigo-700);
+  --background: rgb(var(--dc-indigo-500-rgb) / 12%);
+  --background-hover: rgb(var(--dc-indigo-500-rgb) / 24%);
+  --border-color: transparent;
+  --shadow: none;
+}
+
+.dc-button_tint_indigo.dc-button_style_plain {
+  --color: var(--dc-indigo-600);
+  --color-hover: var(--dc-indigo-700);
+  --background: transparent;
+  --background-hover: rgb(var(--dc-indigo-500-rgb) / 12%);
+  --border-color: transparent;
+  --shadow: none;
+}
+
+.dc-button_tint_rose {
+  --color: var(--dc-white);
+  --color-hover: var(--dc-white);
+  --background: var(--dc-rose-500);
+  --background-hover: var(--dc-rose-500);
+  --border-color: rgb(var(--dc-rose-900-rgb) / 15%);
+  --shadow-color: rgb(var(--dc-rose-900-rgb) / 20%);
+}
+
+.dc-button_tint_rose.dc-button_style_tinted {
+  --color: var(--dc-rose-700);
+  --color-hover: var(--dc-rose-700);
+  --background: rgb(var(--dc-rose-500-rgb) / 12%);
+  --background-hover: rgb(var(--dc-rose-500-rgb) / 24%);
+  --border-color: transparent;
+  --shadow: none;
+}
+
+.dc-button_tint_rose.dc-button_style_plain {
+  --color: var(--dc-rose-600);
+  --color-hover: var(--dc-rose-700);
+  --background: transparent;
+  --background-hover: rgb(var(--dc-rose-500-rgb) / 12%);
+  --border-color: transparent;
+  --shadow: none;
+}
+
+.dc-button_tint_red {
+  --color: var(--dc-white);
+  --color-hover: var(--dc-white);
+  --background: var(--dc-red-600);
+  --background-hover: var(--dc-red-600);
+  --border-color: rgb(var(--dc-red-950-rgb) / 15%);
+  --shadow-color: rgb(var(--dc-red-900-rgb) / 20%);
+}
+
+.dc-button_tint_red.dc-button_style_tinted {
+  --color: var(--dc-red-800);
+  --color-hover: var(--dc-red-800);
+  --background: rgb(var(--dc-red-500-rgb) / 12%);
+  --background-hover: rgb(var(--dc-red-500-rgb) / 24%);
+  --border-color: transparent;
+  --shadow: none;
 }
 
-.dc-button_tint_green.dc-button_style_filled {
-  --dc-button-text-color: var(--dc-button-green-text-color);
-  --dc-button-border-color: var(--dc-button-green-border-color);
-  --dc-button-bg: var(--dc-button-green-bg);
-  --dc-button-bg-hover: var(--dc-button-green-bg-hover);
+.dc-button_tint_red.dc-button_style_plain {
+  --color: var(--dc-red-700);
+  --color-hover: var(--dc-red-800);
+  --background: transparent;
+  --background-hover: rgb(var(--dc-red-500-rgb) / 12%);
+  --border-color: transparent;
+  --shadow: none;
+}
+
+.dc-button_tint_orange {
+  --color: var(--dc-white);
+  --color-hover: var(--dc-white);
+  --background: var(--dc-orange-500);
+  --background-hover: var(--dc-orange-500);
+  --border-color: rgb(var(--dc-orange-900-rgb) / 15%);
+  --shadow-color: rgb(var(--dc-orange-900-rgb) / 20%);
+}
+
+.dc-button_tint_orange.dc-button_style_tinted {
+  --color: var(--dc-orange-700);
+  --color-hover: var(--dc-orange-700);
+  --background: rgb(var(--dc-orange-500-rgb) / 12%);
+  --background-hover: rgb(var(--dc-orange-500-rgb) / 24%);
+  --border-color: transparent;
+  --shadow: none;
+}
+
+.dc-button_tint_orange.dc-button_style_plain {
+  --color: var(--dc-orange-600);
+  --color-hover: var(--dc-orange-700);
+  --background: transparent;
+  --background-hover: rgb(var(--dc-orange-500-rgb) / 12%);
+  --border-color: transparent;
+  --shadow: none;
+}
+
+.dc-button_tint_yellow {
+  --color: var(--dc-black);
+  --color-hover: var(--dc-black);
+  --background: var(--dc-yellow-300);
+  --background-hover: var(--dc-yellow-300);
+  --border-color: rgb(var(--dc-yellow-800-rgb) / 15%);
+  --shadow-color: rgb(var(--dc-yellow-900-rgb) / 20%);
+}
+
+.dc-button_tint_yellow.dc-button_style_tinted {
+  --color: var(--dc-yellow-800);
+  --color-hover: var(--dc-yellow-800);
+  --background: rgb(var(--dc-yellow-400-rgb) / 20%);
+  --background-hover: rgb(var(--dc-yellow-400-rgb) / 40%);
+  --border-color: transparent;
+  --shadow: none;
+}
+
+.dc-button_tint_yellow.dc-button_style_plain {
+  --color: var(--dc-yellow-700);
+  --color-hover: var(--dc-yellow-800);
+  --background: transparent;
+  --background-hover: rgb(var(--dc-yellow-400-rgb) / 20%);
+  --border-color: transparent;
+  --shadow: none;
+}
+
+.dc-button_tint_lime {
+  --color: var(--dc-black);
+  --color-hover: var(--dc-black);
+  --background: var(--dc-lime-300);
+  --background-hover: var(--dc-lime-300);
+  --border-color: rgb(var(--dc-lime-800-rgb) / 15%);
+  --shadow-color: rgb(var(--dc-lime-900-rgb) / 20%);
+}
+
+.dc-button_tint_lime.dc-button_style_tinted {
+  --color: var(--dc-lime-800);
+  --color-hover: var(--dc-lime-800);
+  --background: rgb(var(--dc-lime-400-rgb) / 20%);
+  --background-hover: rgb(var(--dc-lime-400-rgb) / 40%);
+  --border-color: transparent;
+  --shadow: none;
+}
+
+.dc-button_tint_lime.dc-button_style_plain {
+  --color: var(--dc-lime-700);
+  --color-hover: var(--dc-lime-800);
+  --background: transparent;
+  --background-hover: rgb(var(--dc-lime-400-rgb) / 20%);
+  --border-color: transparent;
+  --shadow: none;
+}
+
+.dc-button_tint_green {
+  --color: var(--dc-white);
+  --color-hover: var(--dc-white);
+  --background: var(--dc-green-600);
+  --background-hover: var(--dc-green-600);
+  --border-color: rgb(var(--dc-green-950-rgb) / 15%);
+  --shadow-color: rgb(var(--dc-green-900-rgb) / 20%);
 }
 
 .dc-button_tint_green.dc-button_style_tinted {
-  --dc-button-text-color: var(--dc-button-green-tinted-text-color);
-  --dc-button-bg: var(--dc-button-green-tinted-bg);
-  --dc-button-bg-hover: var(--dc-button-green-tinted-bg-hover);
+  --color: var(--dc-green-800);
+  --color-hover: var(--dc-green-800);
+  --background: rgb(var(--dc-green-500-rgb) / 12%);
+  --background-hover: rgb(var(--dc-green-500-rgb) / 24%);
+  --border-color: transparent;
+  --shadow: none;
 }
 
 .dc-button_tint_green.dc-button_style_plain {
-  --dc-button-text-color: var(--dc-button-green-plain-text-color);
-  --dc-button-bg-hover: var(--dc-button-green-plain-bg-hover);
+  --color: var(--dc-green-700);
+  --color-hover: var(--dc-green-800);
+  --background: transparent;
+  --background-hover: rgb(var(--dc-green-500-rgb) / 12%);
+  --border-color: transparent;
+  --shadow: none;
 }
 
 .dc-button__label {
@@ -240,7 +452,311 @@
 
 .dc-button_icon-only {
   grid-template-columns: auto;
-  width: var(--dc-button-height);
-  height: var(--dc-button-height);
+  width: var(--height);
+  height: var(--height);
   padding: 0;
 }
+
+.dark.dc-button,
+.dark .dc-button {
+  --shadow: none;
+
+  color-scheme: dark;
+}
+
+.dark.dc-button_tint_light,
+.dark .dc-button_tint_light {
+  --color: var(--dc-white);
+  --color-hover: var(--dc-white);
+  --background: var(--dc-neutral-700);
+  --background-hover: var(--dc-neutral-700);
+  --border-color: rgb(var(--dc-white-rgb) / 10%);
+}
+
+.dark.dc-button_tint_light.dc-button_style_tinted,
+.dark .dc-button_tint_light.dc-button_style_tinted {
+  --color: var(--dc-white);
+  --color-hover: var(--dc-white);
+  --background: rgb(var(--dc-neutral-50-rgb) / 20%);
+  --background-hover: rgb(var(--dc-neutral-50-rgb) / 30%);
+  --border-color: transparent;
+}
+
+.dark .dc-button_style_plain,
+.dark .dc-button_tint_light.dc-button_style_plain {
+  --color: var(--dc-white);
+  --color-hover: var(--dc-white);
+  --background: transparent;
+  --background-hover: rgb(var(--dc-neutral-50-rgb) / 20%);
+  --border-color: transparent;
+}
+
+.dark.dc-button_tint_dark,
+.dark .dc-button_tint_dark {
+  --color: var(--dc-neutral-900);
+  --color-hover: var(--dc-neutral-900);
+  --background: var(--dc-white);
+  --background-hover: var(--dc-white);
+  --border-color: rgb(var(--dc-neutral-300-rgb) / 15%);
+}
+
+.dark.dc-button_tint_dark.dc-button_style_tinted,
+.dark .dc-button_tint_dark.dc-button_style_tinted {
+  --color: var(--dc-white);
+  --color-hover: var(--dc-white);
+  --background: rgb(var(--dc-neutral-50-rgb) / 20%);
+  --background-hover: rgb(var(--dc-neutral-50-rgb) / 30%);
+  --border-color: transparent;
+}
+
+.dark.dc-button_tint_dark.dc-button_style_plain,
+.dark .dc-button_tint_dark.dc-button_style_plain {
+  --color: var(--dc-white);
+  --color-hover: var(--dc-white);
+  --background: transparent;
+  --background-hover: rgb(var(--dc-neutral-50-rgb) / 20%);
+  --border-color: transparent;
+}
+
+.dark.dc-button_tint_sky,
+.dark .dc-button_tint_sky {
+  --color: var(--dc-white);
+  --color-hover: var(--dc-white);
+  --background: var(--dc-sky-500);
+  --background-hover: var(--dc-sky-500);
+  --border-color: rgb(var(--dc-sky-300-rgb) / 15%);
+}
+
+.dark.dc-button_tint_sky.dc-button_style_tinted,
+.dark .dc-button_tint_sky.dc-button_style_tinted {
+  --color: var(--dc-sky-300);
+  --color-hover: var(--dc-sky-300);
+  --background: rgb(var(--dc-sky-300-rgb) / 20%);
+  --background-hover: rgb(var(--dc-sky-300-rgb) / 30%);
+  --border-color: transparent;
+}
+
+.dark.dc-button_tint_sky.dc-button_style_plain,
+.dark .dc-button_tint_sky.dc-button_style_plain {
+  --color: var(--dc-sky-300);
+  --color-hover: var(--dc-sky-300);
+  --background: transparent;
+  --background-hover: rgb(var(--dc-sky-300-rgb) / 20%);
+  --border-color: transparent;
+}
+
+.dark.dc-button_tint_blue,
+.dark .dc-button_tint_blue {
+  --color: var(--dc-white);
+  --color-hover: var(--dc-white);
+  --background: var(--dc-blue-500);
+  --background-hover: var(--dc-blue-500);
+  --border-color: rgb(var(--dc-blue-300-rgb) / 15%);
+}
+
+.dark.dc-button_tint_blue.dc-button_style_tinted,
+.dark .dc-button_tint_blue.dc-button_style_tinted {
+  --color: var(--dc-blue-300);
+  --color-hover: var(--dc-blue-300);
+  --background: rgb(var(--dc-blue-300-rgb) / 20%);
+  --background-hover: rgb(var(--dc-blue-300-rgb) / 30%);
+  --border-color: transparent;
+}
+
+.dark.dc-button_tint_blue.dc-button_style_plain,
+.dark .dc-button_tint_blue.dc-button_style_plain {
+  --color: var(--dc-blue-300);
+  --color-hover: var(--dc-blue-300);
+  --background: transparent;
+  --background-hover: rgb(var(--dc-blue-300-rgb) / 20%);
+  --border-color: transparent;
+}
+
+.dark.dc-button_tint_indigo,
+.dark .dc-button_tint_indigo {
+  --color: var(--dc-white);
+  --color-hover: var(--dc-white);
+  --background: var(--dc-indigo-500);
+  --background-hover: var(--dc-indigo-500);
+  --border-color: rgb(var(--dc-indigo-300-rgb) / 15%);
+}
+
+.dark.dc-button_tint_indigo.dc-button_style_tinted,
+.dark .dc-button_tint_indigo.dc-button_style_tinted {
+  --color: var(--dc-indigo-300);
+  --color-hover: var(--dc-indigo-300);
+  --background: rgb(var(--dc-indigo-300-rgb) / 20%);
+  --background-hover: rgb(var(--dc-indigo-300-rgb) / 30%);
+  --border-color: transparent;
+}
+
+.dark.dc-button_tint_indigo.dc-button_style_plain,
+.dark .dc-button_tint_indigo.dc-button_style_plain {
+  --color: var(--dc-indigo-300);
+  --color-hover: var(--dc-indigo-300);
+  --background: transparent;
+  --background-hover: rgb(var(--dc-indigo-300-rgb) / 20%);
+  --border-color: transparent;
+}
+
+.dark.dc-button_tint_rose,
+.dark .dc-button_tint_rose {
+  --color: var(--dc-white);
+  --color-hover: var(--dc-white);
+  --background: var(--dc-rose-500);
+  --background-hover: var(--dc-rose-500);
+  --border-color: rgb(var(--dc-rose-300-rgb) / 15%);
+}
+
+.dark.dc-button_tint_rose.dc-button_style_tinted,
+.dark .dc-button_tint_rose.dc-button_style_tinted {
+  --color: var(--dc-rose-300);
+  --color-hover: var(--dc-rose-300);
+  --background: rgb(var(--dc-rose-300-rgb) / 20%);
+  --background-hover: rgb(var(--dc-rose-300-rgb) / 30%);
+  --border-color: transparent;
+}
+
+.dark.dc-button_tint_rose.dc-button_style_plain,
+.dark .dc-button_tint_rose.dc-button_style_plain {
+  --color: var(--dc-rose-300);
+  --color-hover: var(--dc-rose-300);
+  --background: transparent;
+  --background-hover: rgb(var(--dc-rose-300-rgb) / 20%);
+  --border-color: transparent;
+}
+
+.dark.dc-button_tint_red,
+.dark .dc-button_tint_red {
+  --color: var(--dc-white);
+  --color-hover: var(--dc-white);
+  --background: var(--dc-red-600);
+  --background-hover: var(--dc-red-600);
+  --border-color: rgb(var(--dc-red-600-rgb) / 15%);
+}
+
+.dark.dc-button_tint_red.dc-button_style_tinted,
+.dark .dc-button_tint_red.dc-button_style_tinted {
+  --color: var(--dc-red-400);
+  --color-hover: var(--dc-red-400);
+  --background: rgb(var(--dc-red-300-rgb) / 20%);
+  --background-hover: rgb(var(--dc-red-300-rgb) / 30%);
+  --border-color: transparent;
+}
+
+.dark.dc-button_tint_red.dc-button_style_plain,
+.dark .dc-button_tint_red.dc-button_style_plain {
+  --color: var(--dc-red-400);
+  --color-hover: var(--dc-red-400);
+  --background: transparent;
+  --background-hover: rgb(var(--dc-red-300-rgb) / 20%);
+  --border-color: transparent;
+}
+
+.dark.dc-button_tint_orange,
+.dark .dc-button_tint_orange {
+  --color: var(--dc-white);
+  --color-hover: var(--dc-white);
+  --background: var(--dc-orange-500);
+  --background-hover: var(--dc-orange-500);
+  --border-color: rgb(var(--dc-orange-500-rgb) / 15%);
+}
+
+.dark.dc-button_tint_orange.dc-button_style_tinted,
+.dark .dc-button_tint_orange.dc-button_style_tinted {
+  --color: var(--dc-orange-400);
+  --color-hover: var(--dc-orange-400);
+  --background: rgb(var(--dc-orange-300-rgb) / 20%);
+  --background-hover: rgb(var(--dc-orange-300-rgb) / 30%);
+  --border-color: transparent;
+}
+
+.dark.dc-button_tint_orange.dc-button_style_plain,
+.dark .dc-button_tint_orange.dc-button_style_plain {
+  --color: var(--dc-orange-400);
+  --color-hover: var(--dc-orange-400);
+  --background: transparent;
+  --background-hover: rgb(var(--dc-orange-300-rgb) / 20%);
+  --border-color: transparent;
+}
+
+.dark.dc-button_tint_yellow,
+.dark .dc-button_tint_yellow {
+  --color: var(--dc-black);
+  --color-hover: var(--dc-black);
+  --background: var(--dc-yellow-300);
+  --background-hover: var(--dc-yellow-300);
+  --border-color: rgb(var(--dc-yellow-200-rgb) / 15%);
+}
+
+.dark.dc-button_tint_yellow.dc-button_style_tinted,
+.dark .dc-button_tint_yellow.dc-button_style_tinted {
+  --color: var(--dc-yellow-400);
+  --color-hover: var(--dc-yellow-400);
+  --background: rgb(var(--dc-yellow-300-rgb) / 20%);
+  --background-hover: rgb(var(--dc-yellow-300-rgb) / 30%);
+  --border-color: transparent;
+}
+
+.dark.dc-button_tint_yellow.dc-button_style_plain,
+.dark .dc-button_tint_yellow.dc-button_style_plain {
+  --color: var(--dc-yellow-400);
+  --color-hover: var(--dc-yellow-400);
+  --background: transparent;
+  --background-hover: rgb(var(--dc-yellow-300-rgb) / 20%);
+  --border-color: transparent;
+}
+
+.dark.dc-button_tint_lime,
+.dark .dc-button_tint_lime {
+  --color: var(--dc-black);
+  --color-hover: var(--dc-black);
+  --background: var(--dc-lime-300);
+  --background-hover: var(--dc-lime-300);
+  --border-color: rgb(var(--dc-lime-200-rgb) / 15%);
+}
+
+.dark.dc-button_tint_lime.dc-button_style_tinted,
+.dark .dc-button_tint_lime.dc-button_style_tinted {
+  --color: var(--dc-lime-400);
+  --color-hover: var(--dc-lime-400);
+  --background: rgb(var(--dc-lime-300-rgb) / 20%);
+  --background-hover: rgb(var(--dc-lime-300-rgb) / 30%);
+  --border-color: transparent;
+}
+
+.dark.dc-button_tint_lime.dc-button_style_plain,
+.dark .dc-button_tint_lime.dc-button_style_plain {
+  --color: var(--dc-lime-400);
+  --color-hover: var(--dc-lime-400);
+  --background: transparent;
+  --background-hover: rgb(var(--dc-lime-300-rgb) / 20%);
+  --border-color: transparent;
+}
+
+.dark.dc-button_tint_green,
+.dark .dc-button_tint_green {
+  --color: var(--dc-white);
+  --color-hover: var(--dc-white);
+  --background: var(--dc-green-600);
+  --background-hover: var(--dc-green-600);
+  --border-color: rgb(var(--dc-green-600-rgb) / 15%);
+}
+
+.dark.dc-button_tint_green.dc-button_style_tinted,
+.dark .dc-button_tint_green.dc-button_style_tinted {
+  --color: var(--dc-green-400);
+  --color-hover: var(--dc-green-400);
+  --background: rgb(var(--dc-green-300-rgb) / 20%);
+  --background-hover: rgb(var(--dc-green-300-rgb) / 30%);
+  --border-color: transparent;
+}
+
+.dark.dc-button_tint_green.dc-button_style_plain,
+.dark .dc-button_tint_green.dc-button_style_plain {
+  --color: var(--dc-green-400);
+  --color-hover: var(--dc-green-400);
+  --background: transparent;
+  --background-hover: rgb(var(--dc-green-300-rgb) / 20%);
+  --border-color: transparent;
+}