@harjs/react-ui 1.1.4 → 1.1.6

package/dist/assets/css/components/data-display/card/status.css

@@ -0,0 +1,929 @@
+.har-card {
+  &.blue {
+    --_color-border: color-mix(in srgb, var(--blue-500) 55%, transparent);
+    --_color-surface: color-mix(in srgb, var(--blue-500) 12%, var(--white-100));
+    --_color-text: color-mix(in srgb, var(--blue-500) 82%, black);
+
+    transition:
+      background-color 0.15s ease,
+      border-color 0.15s ease,
+      color 0.15s ease;
+
+    &.filled {
+      background-color: var(--blue-500);
+      border: solid var(--stroke-1) var(--blue-500);
+      color: var(--white-100);
+      box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.08);
+    }
+
+    &.surface {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) var(--_color-border);
+      color: var(--_color-text);
+    }
+
+    &.surface-borderless {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+
+    &.outlined {
+      background-color: transparent;
+      border: solid var(--stroke-1) var(--blue-500);
+      color: var(--_color-text);
+    }
+
+    &.dashed {
+      background-color: transparent;
+      border: dashed var(--stroke-1) var(--blue-500);
+      color: var(--_color-text);
+    }
+
+    &.borderless {
+      background-color: transparent;
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+  }
+
+  &.purple {
+    --_color-border: color-mix(in srgb, var(--purple-500) 55%, transparent);
+    --_color-surface: color-mix(
+      in srgb,
+      var(--purple-500) 12%,
+      var(--white-100)
+    );
+    --_color-text: color-mix(in srgb, var(--purple-500) 82%, black);
+
+    transition:
+      background-color 0.15s ease,
+      border-color 0.15s ease,
+      color 0.15s ease;
+
+    &.filled {
+      background-color: var(--purple-500);
+      border: solid var(--stroke-1) var(--purple-500);
+      color: var(--white-100);
+      box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.08);
+    }
+
+    &.surface {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) var(--_color-border);
+      color: var(--_color-text);
+    }
+
+    &.surface-borderless {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+
+    &.outlined {
+      background-color: transparent;
+      border: solid var(--stroke-1) var(--purple-500);
+      color: var(--_color-text);
+    }
+
+    &.dashed {
+      background-color: transparent;
+      border: dashed var(--stroke-1) var(--purple-500);
+      color: var(--_color-text);
+    }
+
+    &.borderless {
+      background-color: transparent;
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+  }
+
+  &.pink {
+    --_color-border: color-mix(in srgb, var(--pink-500) 55%, transparent);
+    --_color-surface: color-mix(in srgb, var(--pink-500) 12%, var(--white-100));
+    --_color-text: color-mix(in srgb, var(--pink-500) 82%, black);
+
+    transition:
+      background-color 0.15s ease,
+      border-color 0.15s ease,
+      color 0.15s ease;
+
+    &.filled {
+      background-color: var(--pink-500);
+      border: solid var(--stroke-1) var(--pink-500);
+      color: var(--white-100);
+      box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.08);
+    }
+
+    &.surface {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) var(--_color-border);
+      color: var(--_color-text);
+    }
+
+    &.surface-borderless {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+
+    &.outlined {
+      background-color: transparent;
+      border: solid var(--stroke-1) var(--pink-500);
+      color: var(--_color-text);
+    }
+
+    &.dashed {
+      background-color: transparent;
+      border: dashed var(--stroke-1) var(--pink-500);
+      color: var(--_color-text);
+    }
+
+    &.borderless {
+      background-color: transparent;
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+  }
+
+  &.red {
+    --_color-border: color-mix(in srgb, var(--red-500) 55%, transparent);
+    --_color-surface: color-mix(in srgb, var(--red-500) 12%, var(--white-100));
+    --_color-text: color-mix(in srgb, var(--red-500) 82%, black);
+
+    transition:
+      background-color 0.15s ease,
+      border-color 0.15s ease,
+      color 0.15s ease;
+
+    &.filled {
+      background-color: var(--red-500);
+      border: solid var(--stroke-1) var(--red-500);
+      color: var(--white-100);
+      box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.08);
+    }
+
+    &.surface {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) var(--_color-border);
+      color: var(--_color-text);
+    }
+
+    &.surface-borderless {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+
+    &.outlined {
+      background-color: transparent;
+      border: solid var(--stroke-1) var(--red-500);
+      color: var(--_color-text);
+    }
+
+    &.dashed {
+      background-color: transparent;
+      border: dashed var(--stroke-1) var(--red-500);
+      color: var(--_color-text);
+    }
+
+    &.borderless {
+      background-color: transparent;
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+  }
+
+  &.orange {
+    --_color-border: color-mix(in srgb, var(--orange-500) 55%, transparent);
+    --_color-surface: color-mix(
+      in srgb,
+      var(--orange-500) 12%,
+      var(--white-100)
+    );
+    --_color-text: color-mix(in srgb, var(--orange-500) 82%, black);
+
+    transition:
+      background-color 0.15s ease,
+      border-color 0.15s ease,
+      color 0.15s ease;
+
+    &.filled {
+      background-color: var(--orange-500);
+      border: solid var(--stroke-1) var(--orange-500);
+      color: var(--white-100);
+      box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.08);
+    }
+
+    &.surface {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) var(--_color-border);
+      color: var(--_color-text);
+    }
+
+    &.surface-borderless {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+
+    &.outlined {
+      background-color: transparent;
+      border: solid var(--stroke-1) var(--orange-500);
+      color: var(--_color-text);
+    }
+
+    &.dashed {
+      background-color: transparent;
+      border: dashed var(--stroke-1) var(--orange-500);
+      color: var(--_color-text);
+    }
+
+    &.borderless {
+      background-color: transparent;
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+  }
+
+  &.yellow {
+    --_color-border: color-mix(in srgb, var(--yellow-500) 55%, transparent);
+    --_color-surface: color-mix(
+      in srgb,
+      var(--yellow-500) 12%,
+      var(--white-100)
+    );
+    --_color-text: color-mix(in srgb, var(--yellow-500) 82%, black);
+
+    transition:
+      background-color 0.15s ease,
+      border-color 0.15s ease,
+      color 0.15s ease;
+
+    &.filled {
+      background-color: var(--yellow-500);
+      border: solid var(--stroke-1) var(--yellow-500);
+      color: var(--white-100);
+      box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.08);
+    }
+
+    &.surface {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) var(--_color-border);
+      color: var(--_color-text);
+    }
+
+    &.surface-borderless {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+
+    &.outlined {
+      background-color: transparent;
+      border: solid var(--stroke-1) var(--yellow-500);
+      color: var(--_color-text);
+    }
+
+    &.dashed {
+      background-color: transparent;
+      border: dashed var(--stroke-1) var(--yellow-500);
+      color: var(--_color-text);
+    }
+
+    &.borderless {
+      background-color: transparent;
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+  }
+
+  &.green {
+    --_color-border: color-mix(in srgb, var(--green-500) 55%, transparent);
+    --_color-surface: color-mix(
+      in srgb,
+      var(--green-500) 12%,
+      var(--white-100)
+    );
+    --_color-text: color-mix(in srgb, var(--green-500) 82%, black);
+
+    transition:
+      background-color 0.15s ease,
+      border-color 0.15s ease,
+      color 0.15s ease;
+
+    &.filled {
+      background-color: var(--green-500);
+      border: solid var(--stroke-1) var(--green-500);
+      color: var(--white-100);
+      box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.08);
+    }
+
+    &.surface {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) var(--_color-border);
+      color: var(--_color-text);
+    }
+
+    &.surface-borderless {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+
+    &.outlined {
+      background-color: transparent;
+      border: solid var(--stroke-1) var(--green-500);
+      color: var(--_color-text);
+    }
+
+    &.dashed {
+      background-color: transparent;
+      border: dashed var(--stroke-1) var(--green-500);
+      color: var(--_color-text);
+    }
+
+    &.borderless {
+      background-color: transparent;
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+  }
+
+  &.teal {
+    --_color-border: color-mix(in srgb, var(--teal-500) 55%, transparent);
+    --_color-surface: color-mix(in srgb, var(--teal-500) 12%, var(--white-100));
+    --_color-text: color-mix(in srgb, var(--teal-500) 82%, black);
+
+    transition:
+      background-color 0.15s ease,
+      border-color 0.15s ease,
+      color 0.15s ease;
+
+    &.filled {
+      background-color: var(--teal-500);
+      border: solid var(--stroke-1) var(--teal-500);
+      color: var(--white-100);
+      box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.08);
+    }
+
+    &.surface {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) var(--_color-border);
+      color: var(--_color-text);
+    }
+
+    &.surface-borderless {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+
+    &.outlined {
+      background-color: transparent;
+      border: solid var(--stroke-1) var(--teal-500);
+      color: var(--_color-text);
+    }
+
+    &.dashed {
+      background-color: transparent;
+      border: dashed var(--stroke-1) var(--teal-500);
+      color: var(--_color-text);
+    }
+
+    &.borderless {
+      background-color: transparent;
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+  }
+
+  &.cyan {
+    --_color-border: color-mix(in srgb, var(--cyan-500) 55%, transparent);
+    --_color-surface: color-mix(in srgb, var(--cyan-500) 12%, var(--white-100));
+    --_color-text: color-mix(in srgb, var(--cyan-500) 82%, black);
+
+    transition:
+      background-color 0.15s ease,
+      border-color 0.15s ease,
+      color 0.15s ease;
+
+    &.filled {
+      background-color: var(--cyan-500);
+      border: solid var(--stroke-1) var(--cyan-500);
+      color: var(--white-100);
+      box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.08);
+    }
+
+    &.surface {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) var(--_color-border);
+      color: var(--_color-text);
+    }
+
+    &.surface-borderless {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+
+    &.outlined {
+      background-color: transparent;
+      border: solid var(--stroke-1) var(--cyan-500);
+      color: var(--_color-text);
+    }
+
+    &.dashed {
+      background-color: transparent;
+      border: dashed var(--stroke-1) var(--cyan-500);
+      color: var(--_color-text);
+    }
+
+    &.borderless {
+      background-color: transparent;
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+  }
+
+  &.gray-50 {
+    --_color-border: color-mix(in srgb, var(--gray-50) 55%, transparent);
+    --_color-surface: color-mix(in srgb, var(--gray-50) 12%, var(--white-100));
+    --_color-text: color-mix(in srgb, var(--gray-50) 82%, black);
+
+    transition:
+      background-color 0.15s ease,
+      border-color 0.15s ease,
+      color 0.15s ease;
+
+    &.filled {
+      background-color: var(--gray-50);
+      border: solid var(--stroke-1) var(--gray-50);
+      color: var(--white-100);
+      box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.08);
+    }
+
+    &.surface {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) var(--_color-border);
+      color: var(--_color-text);
+    }
+
+    &.surface-borderless {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+
+    &.outlined {
+      background-color: transparent;
+      border: solid var(--stroke-1) var(--gray-50);
+      color: var(--_color-text);
+    }
+
+    &.dashed {
+      background-color: transparent;
+      border: dashed var(--stroke-1) var(--gray-50);
+      color: var(--_color-text);
+    }
+
+    &.borderless {
+      background-color: transparent;
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+  }
+
+  &.gray-100 {
+    --_color-border: color-mix(in srgb, var(--gray-100) 55%, transparent);
+    --_color-surface: color-mix(in srgb, var(--gray-100) 12%, var(--white-100));
+    --_color-text: color-mix(in srgb, var(--gray-100) 82%, black);
+
+    transition:
+      background-color 0.15s ease,
+      border-color 0.15s ease,
+      color 0.15s ease;
+
+    &.filled {
+      background-color: var(--gray-100);
+      border: solid var(--stroke-1) var(--gray-100);
+      color: var(--white-100);
+      box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.08);
+    }
+
+    &.surface {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) var(--_color-border);
+      color: var(--_color-text);
+    }
+
+    &.surface-borderless {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+
+    &.outlined {
+      background-color: transparent;
+      border: solid var(--stroke-1) var(--gray-100);
+      color: var(--_color-text);
+    }
+
+    &.dashed {
+      background-color: transparent;
+      border: dashed var(--stroke-1) var(--gray-100);
+      color: var(--_color-text);
+    }
+
+    &.borderless {
+      background-color: transparent;
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+  }
+
+  &.gray-200 {
+    --_color-border: color-mix(in srgb, var(--gray-200) 55%, transparent);
+    --_color-surface: color-mix(in srgb, var(--gray-200) 12%, var(--white-100));
+    --_color-text: color-mix(in srgb, var(--gray-200) 82%, black);
+
+    transition:
+      background-color 0.15s ease,
+      border-color 0.15s ease,
+      color 0.15s ease;
+
+    &.filled {
+      background-color: var(--gray-200);
+      border: solid var(--stroke-1) var(--gray-200);
+      color: var(--white-100);
+      box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.08);
+    }
+
+    &.surface {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) var(--_color-border);
+      color: var(--_color-text);
+    }
+
+    &.surface-borderless {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+
+    &.outlined {
+      background-color: transparent;
+      border: solid var(--stroke-1) var(--gray-200);
+      color: var(--_color-text);
+    }
+
+    &.dashed {
+      background-color: transparent;
+      border: dashed var(--stroke-1) var(--gray-200);
+      color: var(--_color-text);
+    }
+
+    &.borderless {
+      background-color: transparent;
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+  }
+
+  &.gray-300 {
+    --_color-border: color-mix(in srgb, var(--gray-300) 55%, transparent);
+    --_color-surface: color-mix(in srgb, var(--gray-300) 12%, var(--white-100));
+    --_color-text: color-mix(in srgb, var(--gray-300) 82%, black);
+
+    transition:
+      background-color 0.15s ease,
+      border-color 0.15s ease,
+      color 0.15s ease;
+
+    &.filled {
+      background-color: var(--gray-300);
+      border: solid var(--stroke-1) var(--gray-300);
+      color: var(--white-100);
+      box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.08);
+    }
+
+    &.surface {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) var(--_color-border);
+      color: var(--_color-text);
+    }
+
+    &.surface-borderless {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+
+    &.outlined {
+      background-color: transparent;
+      border: solid var(--stroke-1) var(--gray-300);
+      color: var(--_color-text);
+    }
+
+    &.dashed {
+      background-color: transparent;
+      border: dashed var(--stroke-1) var(--gray-300);
+      color: var(--_color-text);
+    }
+
+    &.borderless {
+      background-color: transparent;
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+  }
+
+  &.gray-400 {
+    --_color-border: color-mix(in srgb, var(--gray-400) 55%, transparent);
+    --_color-surface: color-mix(in srgb, var(--gray-400) 12%, var(--white-100));
+    --_color-text: color-mix(in srgb, var(--gray-400) 82%, black);
+
+    transition:
+      background-color 0.15s ease,
+      border-color 0.15s ease,
+      color 0.15s ease;
+
+    &.filled {
+      background-color: var(--gray-400);
+      border: solid var(--stroke-1) var(--gray-400);
+      color: var(--white-100);
+      box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.08);
+    }
+
+    &.surface {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) var(--_color-border);
+      color: var(--_color-text);
+    }
+
+    &.surface-borderless {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+
+    &.outlined {
+      background-color: transparent;
+      border: solid var(--stroke-1) var(--gray-400);
+      color: var(--_color-text);
+    }
+
+    &.dashed {
+      background-color: transparent;
+      border: dashed var(--stroke-1) var(--gray-400);
+      color: var(--_color-text);
+    }
+
+    &.borderless {
+      background-color: transparent;
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+  }
+
+  &.gray-500 {
+    --_color-border: color-mix(in srgb, var(--gray-500) 55%, transparent);
+    --_color-surface: color-mix(in srgb, var(--gray-500) 12%, var(--white-100));
+    --_color-text: color-mix(in srgb, var(--gray-500) 82%, black);
+
+    transition:
+      background-color 0.15s ease,
+      border-color 0.15s ease,
+      color 0.15s ease;
+
+    &.filled {
+      background-color: var(--gray-500);
+      border: solid var(--stroke-1) var(--gray-500);
+      color: var(--white-100);
+      box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.08);
+    }
+
+    &.surface {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) var(--_color-border);
+      color: var(--_color-text);
+    }
+
+    &.surface-borderless {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+
+    &.outlined {
+      background-color: transparent;
+      border: solid var(--stroke-1) var(--gray-500);
+      color: var(--_color-text);
+    }
+
+    &.dashed {
+      background-color: transparent;
+      border: dashed var(--stroke-1) var(--gray-500);
+      color: var(--_color-text);
+    }
+
+    &.borderless {
+      background-color: transparent;
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+  }
+
+  &.gray-600 {
+    --_color-border: color-mix(in srgb, var(--gray-600) 55%, transparent);
+    --_color-surface: color-mix(in srgb, var(--gray-600) 12%, var(--white-100));
+    --_color-text: color-mix(in srgb, var(--gray-600) 82%, black);
+
+    transition:
+      background-color 0.15s ease,
+      border-color 0.15s ease,
+      color 0.15s ease;
+
+    &.filled {
+      background-color: var(--gray-600);
+      border: solid var(--stroke-1) var(--gray-600);
+      color: var(--white-100);
+      box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.08);
+    }
+
+    &.surface {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) var(--_color-border);
+      color: var(--_color-text);
+    }
+
+    &.surface-borderless {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+
+    &.outlined {
+      background-color: transparent;
+      border: solid var(--stroke-1) var(--gray-600);
+      color: var(--_color-text);
+    }
+
+    &.dashed {
+      background-color: transparent;
+      border: dashed var(--stroke-1) var(--gray-600);
+      color: var(--_color-text);
+    }
+
+    &.borderless {
+      background-color: transparent;
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+  }
+
+  &.gray-700 {
+    --_color-border: color-mix(in srgb, var(--gray-700) 55%, transparent);
+    --_color-surface: color-mix(in srgb, var(--gray-700) 12%, var(--white-100));
+    --_color-text: color-mix(in srgb, var(--gray-700) 82%, black);
+
+    transition:
+      background-color 0.15s ease,
+      border-color 0.15s ease,
+      color 0.15s ease;
+
+    &.filled {
+      background-color: var(--gray-700);
+      border: solid var(--stroke-1) var(--gray-700);
+      color: var(--white-100);
+      box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.08);
+    }
+
+    &.surface {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) var(--_color-border);
+      color: var(--_color-text);
+    }
+
+    &.surface-borderless {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+
+    &.outlined {
+      background-color: transparent;
+      border: solid var(--stroke-1) var(--gray-700);
+      color: var(--_color-text);
+    }
+
+    &.dashed {
+      background-color: transparent;
+      border: dashed var(--stroke-1) var(--gray-700);
+      color: var(--_color-text);
+    }
+
+    &.borderless {
+      background-color: transparent;
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+  }
+
+  &.gray-800 {
+    --_color-border: color-mix(in srgb, var(--gray-800) 55%, transparent);
+    --_color-surface: color-mix(in srgb, var(--gray-800) 12%, var(--white-100));
+    --_color-text: color-mix(in srgb, var(--gray-800) 82%, black);
+
+    transition:
+      background-color 0.15s ease,
+      border-color 0.15s ease,
+      color 0.15s ease;
+
+    &.filled {
+      background-color: var(--gray-800);
+      border: solid var(--stroke-1) var(--gray-800);
+      color: var(--white-100);
+      box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.08);
+    }
+
+    &.surface {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) var(--_color-border);
+      color: var(--_color-text);
+    }
+
+    &.surface-borderless {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+
+    &.outlined {
+      background-color: transparent;
+      border: solid var(--stroke-1) var(--gray-800);
+      color: var(--_color-text);
+    }
+
+    &.dashed {
+      background-color: transparent;
+      border: dashed var(--stroke-1) var(--gray-800);
+      color: var(--_color-text);
+    }
+
+    &.borderless {
+      background-color: transparent;
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+  }
+
+  &.gray-900 {
+    --_color-border: color-mix(in srgb, var(--gray-900) 55%, transparent);
+    --_color-surface: color-mix(in srgb, var(--gray-900) 12%, var(--white-100));
+    --_color-text: color-mix(in srgb, var(--gray-900) 82%, black);
+
+    transition:
+      background-color 0.15s ease,
+      border-color 0.15s ease,
+      color 0.15s ease;
+
+    &.filled {
+      background-color: var(--gray-900);
+      border: solid var(--stroke-1) var(--gray-900);
+      color: var(--white-100);
+      box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.08);
+    }
+
+    &.surface {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) var(--_color-border);
+      color: var(--_color-text);
+    }
+
+    &.surface-borderless {
+      background-color: var(--_color-surface);
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+
+    &.outlined {
+      background-color: transparent;
+      border: solid var(--stroke-1) var(--gray-900);
+      color: var(--_color-text);
+    }
+
+    &.dashed {
+      background-color: transparent;
+      border: dashed var(--stroke-1) var(--gray-900);
+      color: var(--_color-text);
+    }
+
+    &.borderless {
+      background-color: transparent;
+      border: solid var(--stroke-1) transparent;
+      color: var(--_color-text);
+    }
+  }
+}