mizu-ui 0.1.0

package/styles.css

@@ -0,0 +1,280 @@
+@import "@fontsource-variable/archivo";
+@import "@fontsource/instrument-serif";
+@import "@fontsource/jetbrains-mono";
+
+:root,
+[data-theme="dark"] {
+  --mizu-ink: #0f0e0c;
+  --mizu-ink-2: #16130f;
+  --mizu-ink-3: #201b15;
+  --mizu-paper: #f4f0e8;
+  --mizu-muted: #a8a193;
+  --mizu-faint: #6f695e;
+  --mizu-accent: #ff4d1c;
+  --mizu-accent-fill: #d23e0e;
+  --mizu-line: #29241d;
+  --mizu-line-bright: rgba(244, 240, 232, 0.22);
+
+  --mizu-font-display: "Archivo Variable", ui-sans-serif, system-ui, sans-serif;
+  --mizu-font-serif: "Instrument Serif", Georgia, serif;
+  --mizu-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
+
+  --mizu-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
+  --mizu-ease-wipe: cubic-bezier(0.76, 0, 0.24, 1);
+  --mizu-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  --mizu-duration-fast: 180ms;
+  --mizu-duration-med: 420ms;
+  --mizu-duration-slow: 900ms;
+
+  --mizu-space-1: 4px;
+  --mizu-space-2: 8px;
+  --mizu-space-3: 12px;
+  --mizu-space-4: 16px;
+  --mizu-space-5: 24px;
+  --mizu-space-6: 32px;
+  --mizu-space-7: 48px;
+  --mizu-space-8: 64px;
+  --mizu-space-9: 96px;
+
+  --mizu-radius: 2px;
+  --mizu-z-base: 0;
+  --mizu-z-raised: 10;
+  --mizu-z-overlay: 60;
+  --mizu-z-wipe: 90;
+  --mizu-z-cursor: 96;
+}
+
+[data-theme="light"] {
+  --mizu-ink: #f4f0e8;
+  --mizu-ink-2: #e9e3d5;
+  --mizu-ink-3: #dcd4c1;
+  --mizu-paper: #16130f;
+  --mizu-muted: #6f695e;
+  --mizu-faint: #a8a193;
+  --mizu-accent: #ff4d1c;
+  --mizu-accent-fill: #c23a0c;
+  --mizu-line: #d9d2c2;
+  --mizu-line-bright: rgba(22, 19, 15, 0.22);
+}
+
+.mizu-root {
+  background: var(--mizu-ink);
+  color: var(--mizu-paper);
+  font-family: var(--mizu-font-display);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+.mizu-root ::selection {
+  background: var(--mizu-accent);
+  color: var(--mizu-ink);
+}
+
+.mizu-root :focus-visible {
+  outline: 2px solid var(--mizu-accent);
+  outline-offset: 3px;
+  border-radius: var(--mizu-radius);
+}
+
+.mizu-font-wide {
+  font-stretch: 118%;
+}
+
+.mizu-font-narrow {
+  font-stretch: 88%;
+}
+
+.mizu-text-outline {
+  color: transparent;
+  -webkit-text-stroke: 1px var(--mizu-line-bright);
+}
+
+.mizu-text-outline-accent {
+  color: transparent;
+  -webkit-text-stroke: 1px var(--mizu-accent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mizu-root *,
+  .mizu-root *::before,
+  .mizu-root *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* ---------- component styles ---------- */
+
+.mizu-slider-input {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 16px;
+  background: transparent;
+}
+
+.mizu-slider-input::-webkit-slider-runnable-track {
+  height: 1px;
+  background: var(--mizu-line-bright);
+}
+
+.mizu-slider-input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 10px;
+  height: 10px;
+  margin-top: -5px;
+  background: var(--mizu-accent);
+  transform: rotate(45deg);
+  transition: background var(--mizu-duration-fast) ease;
+}
+
+.mizu-slider-input:hover::-webkit-slider-thumb {
+  background: var(--mizu-paper);
+}
+
+.mizu-slider-input::-moz-range-track {
+  height: 1px;
+  background: var(--mizu-line-bright);
+}
+
+.mizu-slider-input::-moz-range-thumb {
+  width: 10px;
+  height: 10px;
+  border: none;
+  border-radius: 0;
+  background: var(--mizu-accent);
+  transform: rotate(45deg);
+}
+
+.mizu-slider-input:focus-visible {
+  outline: 2px solid var(--mizu-accent);
+  outline-offset: 4px;
+}
+
+.mizu-tooltip {
+  position: relative;
+  display: inline-flex;
+}
+
+.mizu-tooltip-bubble {
+  position: absolute;
+  left: 50%;
+  bottom: calc(100% + 10px);
+  transform: translateX(-50%) translateY(4px);
+  padding: 6px 10px;
+  background: var(--mizu-ink-2);
+  border: 1px solid var(--mizu-line-bright);
+  font-family: var(--mizu-font-mono);
+  font-size: 10px;
+  letter-spacing: "0.2em";
+  text-transform: uppercase;
+  color: var(--mizu-paper);
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity var(--mizu-duration-fast) ease,
+    transform var(--mizu-duration-fast) var(--mizu-ease-expo);
+  z-index: var(--mizu-z-overlay);
+}
+
+.mizu-tooltip--bottom .mizu-tooltip-bubble {
+  bottom: auto;
+  top: calc(100% + 10px);
+  transform: translateX(-50%) translateY(-4px);
+}
+
+.mizu-tooltip:hover .mizu-tooltip-bubble,
+.mizu-tooltip:focus-within .mizu-tooltip-bubble {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
+.mizu-nav-links {
+  display: none;
+  align-items: center;
+  gap: 32px;
+}
+
+.mizu-nav-chapter {
+  display: none;
+}
+
+.mizu-nav-burger {
+  display: inline-flex;
+  align-items: center;
+}
+
+@media (min-width: 768px) {
+  .mizu-nav-links {
+    display: flex;
+  }
+
+  .mizu-nav-burger {
+    display: none;
+  }
+}
+
+@media (min-width: 1024px) {
+  .mizu-nav-chapter {
+    display: block;
+  }
+}
+
+.mizu-nav-overlay-link:hover span:last-child {
+  transform: translateX(12px);
+}
+
+.mizu-btn--solid:hover:not(:disabled) {
+  background: var(--mizu-accent);
+}
+
+.mizu-btn--ghost:hover:not(:disabled) {
+  border-color: rgba(244, 240, 232, 0.7);
+  background: var(--mizu-ink-2);
+}
+
+.mizu-btn--inverse:hover:not(:disabled) {
+  background: var(--mizu-accent);
+}
+
+.mizu-btn-arrow {
+  transition: transform 300ms var(--mizu-ease-expo);
+}
+
+.mizu-btn:hover .mizu-btn-arrow {
+  transform: translate(2px, -2px);
+}
+
+.mizu-ghost {
+  color: transparent;
+  -webkit-text-stroke: 1px var(--mizu-line-bright);
+  transition:
+    color 500ms ease,
+    -webkit-text-stroke-color 500ms ease,
+    letter-spacing 500ms var(--mizu-ease-expo),
+    transform 500ms var(--mizu-ease-expo);
+  cursor: default;
+  user-select: none;
+}
+
+.mizu-ghost:hover {
+  color: var(--mizu-accent);
+  -webkit-text-stroke-color: transparent;
+  letter-spacing: -0.02em;
+}
+
+.mizu-ghost--paper:hover {
+  color: var(--mizu-paper);
+}
+
+.mizu-specimen-input:focus {
+  border-color: var(--mizu-accent) !important;
+}
+
+.mizu-specimen-toggle:hover {
+  border-color: var(--mizu-line-bright);
+  color: var(--mizu-paper);
+}