canny-ui 1.0.0

package/dist/canny-ui.css

@@ -0,0 +1,887 @@
+@charset "UTF-8";
+@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..900,0..100;1,9..144,300..900,0..100&family=Geist+Mono:wght@300..700&family=Geist:wght@300..700&display=swap");
+:root {
+  --bg-base: #f5f2ea;
+  --bg-surface-low: #fbfaf6;
+  --bg-surface-lowest: #ffffff;
+  --bg-surface-edge: #ebe6d8;
+  --text-primary: #10131a;
+  --text-secondary: #2a2f3a;
+  --text-muted: #6b7180;
+  --text-on-solid: #fbfaf6;
+  --text-accent: #0050b3;
+  --color-primary: #0066ff;
+  --color-primary-dark: #003a7a;
+  --color-primary-soft: #88b3ff;
+  --color-danger: #c2410c;
+  --color-warning: #a16207;
+  --color-success: #3f6212;
+  --color-info: #475569;
+  --hairline-color: rgba(16, 19, 26, 0.12);
+  --hairline-strong: rgba(16, 19, 26, 0.24);
+  --shadow-ambient: 0 6px 32px -8px rgba(0, 102, 255, 0.22);
+  --shadow-card: 0 1px 2px rgba(16, 19, 26, 0.04),
+                        0 8px 24px -12px rgba(16, 19, 26, 0.12);
+  --shadow-lift: 0 2px 4px rgba(16, 19, 26, 0.06),
+                        0 24px 48px -16px rgba(16, 19, 26, 0.18);
+  --ease-precise: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --transition-fast: 120ms var(--ease-precise);
+  --transition-base: 200ms var(--ease-precise);
+  --transition-slow: 320ms var(--ease-precise);
+  --radius-xs: 2px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 10px;
+  --font-display: 'Fraunces', 'Newsreader', 'Iowan Old Style', Georgia, serif;
+  --font-body: 'Geist', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif;
+  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.375rem;
+  --text-2xl: 1.875rem;
+  --text-3xl: 2.75rem;
+  --text-4xl: 4rem;
+  --track-tight: -0.02em;
+  --track-normal: 0;
+  --track-wide: 0.08em;
+  --track-wider: 0.14em;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-base: #0b0d12;
+    --bg-surface-low: #131620;
+    --bg-surface-lowest: #1c2030;
+    --bg-surface-edge: #262b3d;
+    --text-primary: #fbfaf6;
+    --text-secondary: #ebe6d8;
+    --text-muted: #9aa0ae;
+    --text-on-solid: #0b0d12;
+    --text-accent: #4d8cff;
+    --color-primary: #4d8cff;
+    --color-primary-dark: #0050b3;
+    --color-primary-soft: #003a7a;
+    --color-danger: #ea580c;
+    --color-warning: #ca8a04;
+    --color-success: #65a30d;
+    --color-info: #64748b;
+    --hairline-color: rgba(251, 250, 246, 0.10);
+    --hairline-strong: rgba(251, 250, 246, 0.22);
+    --shadow-ambient: 0 8px 40px -8px rgba(77, 140, 255, 0.35);
+    --shadow-card: 0 1px 0 rgba(251, 250, 246, 0.04),
+                          0 16px 40px -16px rgba(0, 0, 0, 0.6);
+    --shadow-lift: 0 24px 48px -16px rgba(0, 0, 0, 0.7);
+  }
+}
+.cny-dark {
+  --bg-base: #0b0d12;
+  --bg-surface-low: #131620;
+  --bg-surface-lowest: #1c2030;
+  --bg-surface-edge: #262b3d;
+  --text-primary: #fbfaf6;
+  --text-secondary: #ebe6d8;
+  --text-muted: #9aa0ae;
+  --text-on-solid: #0b0d12;
+  --text-accent: #4d8cff;
+  --color-primary: #4d8cff;
+  --color-primary-dark: #0050b3;
+  --color-primary-soft: #003a7a;
+  --color-danger: #ea580c;
+  --color-warning: #ca8a04;
+  --color-success: #65a30d;
+  --color-info: #64748b;
+  --hairline-color: rgba(251, 250, 246, 0.10);
+  --hairline-strong: rgba(251, 250, 246, 0.22);
+  --shadow-ambient: 0 8px 40px -8px rgba(77, 140, 255, 0.35);
+  --shadow-card: 0 1px 0 rgba(251, 250, 246, 0.04),
+                        0 16px 40px -16px rgba(0, 0, 0, 0.6);
+  --shadow-lift: 0 24px 48px -16px rgba(0, 0, 0, 0.7);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background: var(--bg-base);
+  color: var(--text-primary);
+}
+
+.cny-app {
+  font-family: var(--font-body);
+  font-size: var(--text-base);
+  line-height: 1.55;
+  color: var(--text-primary);
+  font-feature-settings: "ss01", "cv11";
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+.cny-app h1 {
+  font-family: var(--font-display);
+  font-size: var(--text-3xl);
+  font-weight: 400;
+  font-variation-settings: "opsz" 144, "SOFT" 20;
+  letter-spacing: var(--track-tight);
+  line-height: 1.02;
+  margin: 0 0 24px;
+  color: var(--text-primary);
+}
+.cny-app h2 {
+  font-family: var(--font-display);
+  font-size: var(--text-2xl);
+  font-weight: 400;
+  font-variation-settings: "opsz" 96, "SOFT" 40;
+  letter-spacing: var(--track-tight);
+  line-height: 1.12;
+  margin: 0 0 16px;
+}
+.cny-app h3 {
+  font-family: var(--font-body);
+  font-size: var(--text-xl);
+  font-weight: 500;
+  letter-spacing: -0.005em;
+  line-height: 1.25;
+  margin: 0 0 12px;
+}
+.cny-app p {
+  margin: 0 0 16px;
+  max-width: 68ch;
+}
+.cny-app a {
+  color: var(--text-accent);
+  text-decoration-line: underline;
+  text-decoration-color: var(--hairline-strong);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.18em;
+  transition: text-decoration-color var(--transition-fast);
+}
+.cny-app a:hover {
+  text-decoration-color: currentColor;
+}
+.cny-app small,
+.cny-app .cny-meta {
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+}
+.cny-app code, .cny-app kbd, .cny-app pre, .cny-app samp {
+  font-family: var(--font-mono);
+  font-size: 0.92em;
+}
+.cny-app em, .cny-app i {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-variation-settings: "opsz" 48, "SOFT" 80;
+}
+.cny-app .cny-tabular {
+  font-variant-numeric: tabular-nums slashed-zero;
+}
+
+.btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 8px 20px;
+  min-height: 36px;
+  border: 0;
+  border-radius: var(--radius-md);
+  font-family: var(--font-body);
+  font-size: 0.875rem;
+  font-weight: 500;
+  letter-spacing: -0.005em;
+  line-height: 1.2;
+  cursor: pointer;
+  user-select: none;
+  transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
+}
+.btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.btn:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+.btn.solid {
+  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
+  color: var(--text-on-solid);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+.btn.solid:hover:not(:disabled) {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), var(--shadow-ambient);
+  transform: translateY(-1px);
+}
+.btn.solid:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);
+}
+.btn.solid.danger {
+  --color-primary: var(--color-danger);
+  --color-primary-dark: #c2410c;
+}
+.btn.solid.warning {
+  --color-primary: var(--color-warning);
+  --color-primary-dark: #a16207;
+}
+.btn.solid.success {
+  --color-primary: var(--color-success);
+  --color-primary-dark: #3f6212;
+}
+.btn.solid.info {
+  --color-primary: var(--color-info);
+  --color-primary-dark: #475569;
+}
+.btn.ghost {
+  background: transparent;
+  color: var(--color-primary);
+}
+.btn.ghost:hover:not(:disabled) {
+  background: var(--bg-surface-low);
+}
+.btn.ghost:active:not(:disabled) {
+  background: var(--bg-surface-edge);
+}
+.btn.ghost.danger {
+  color: var(--color-danger);
+}
+.btn.ghost.warning {
+  color: var(--color-warning);
+}
+.btn.ghost.success {
+  color: var(--color-success);
+}
+.btn.ghost.info {
+  color: var(--color-info);
+}
+.btn.outline {
+  background: transparent;
+  color: var(--text-primary);
+  box-shadow: inset 0 0 0 1px var(--hairline-strong);
+}
+.btn.outline:hover:not(:disabled) {
+  background: var(--bg-surface-low);
+  box-shadow: inset 0 0 0 1px var(--text-primary);
+}
+.btn.link {
+  background: transparent;
+  color: var(--text-accent);
+  padding-left: 0;
+  padding-right: 0;
+  min-height: auto;
+  box-shadow: inset 0 -1px 0 0 var(--hairline-color);
+  border-radius: 0;
+}
+.btn.link:hover:not(:disabled) {
+  box-shadow: inset 0 -1px 0 0 currentColor;
+}
+.btn.sm {
+  padding: 4px 12px;
+  min-height: 28px;
+  font-size: 0.8125rem;
+}
+.btn.lg {
+  padding: 12px 24px;
+  min-height: 44px;
+  font-size: 0.9375rem;
+}
+
+.input {
+  display: block;
+  width: 100%;
+  padding: 12px 12px 8px;
+  background: transparent;
+  color: var(--text-primary);
+  border: 0;
+  border-bottom: 1px solid var(--hairline-strong);
+  border-radius: 0;
+  outline: none;
+  font-family: var(--font-body);
+  font-size: 0.9375rem;
+  line-height: 1.4;
+  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
+}
+.input::placeholder {
+  color: var(--text-muted);
+}
+.input:hover:not(:disabled):not(:focus) {
+  border-bottom-color: var(--text-primary);
+}
+.input:focus {
+  border-bottom: 1px solid var(--color-primary);
+  background: linear-gradient(to top, color-mix(in oklch, var(--color-primary) 6%, transparent) 0%, transparent 40%);
+  box-shadow: 0 1px 0 0 var(--color-primary);
+}
+.input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.input.danger {
+  border-bottom-color: var(--color-danger);
+}
+.input.danger:focus {
+  border-bottom-color: var(--color-danger);
+  box-shadow: 0 1px 0 0 var(--color-danger);
+  background: linear-gradient(to top, color-mix(in oklch, var(--color-danger) 6%, transparent) 0%, transparent 40%);
+}
+.input.warning {
+  border-bottom-color: var(--color-warning);
+}
+.input.warning:focus {
+  border-bottom-color: var(--color-warning);
+  box-shadow: 0 1px 0 0 var(--color-warning);
+}
+
+.card {
+  position: relative;
+  background: var(--bg-surface-lowest);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  padding: 24px;
+  transition: box-shadow var(--transition-base), transform var(--transition-base);
+}
+.card.interactive {
+  cursor: pointer;
+}
+.card.interactive:hover {
+  box-shadow: var(--shadow-lift);
+  transform: translateY(-2px);
+}
+.card.danger, .card.warning, .card.success, .card.info {
+  overflow: hidden;
+}
+.card.danger::before, .card.warning::before, .card.success::before, .card.info::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 24px;
+  bottom: 24px;
+  width: 2px;
+  border-radius: 1px;
+}
+.card.danger::before {
+  background: var(--color-danger);
+}
+.card.warning::before {
+  background: var(--color-warning);
+}
+.card.success::before {
+  background: var(--color-success);
+}
+.card.info::before {
+  background: var(--color-info);
+}
+.card.flush {
+  background: transparent;
+  box-shadow: none;
+  border-top: 1px solid var(--hairline-color);
+  border-radius: 0;
+  padding: 20px 0;
+}
+.card-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+.card-footer {
+  margin-top: 20px;
+  padding-top: 16px;
+  border-top: 1px solid var(--hairline-color);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.p-0 {
+  padding: 0;
+}
+
+.m-0 {
+  margin: 0;
+}
+
+.px-0 {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.py-0 {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.mx-0 {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.my-0 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.gap-0 {
+  gap: 0;
+}
+
+.p-1 {
+  padding: 4px;
+}
+
+.m-1 {
+  margin: 4px;
+}
+
+.px-1 {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+.py-1 {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+.mx-1 {
+  margin-left: 4px;
+  margin-right: 4px;
+}
+
+.my-1 {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+
+.gap-1 {
+  gap: 4px;
+}
+
+.p-2 {
+  padding: 8px;
+}
+
+.m-2 {
+  margin: 8px;
+}
+
+.px-2 {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.py-2 {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.mx-2 {
+  margin-left: 8px;
+  margin-right: 8px;
+}
+
+.my-2 {
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+
+.gap-2 {
+  gap: 8px;
+}
+
+.p-3 {
+  padding: 12px;
+}
+
+.m-3 {
+  margin: 12px;
+}
+
+.px-3 {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.py-3 {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+.mx-3 {
+  margin-left: 12px;
+  margin-right: 12px;
+}
+
+.my-3 {
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+
+.gap-3 {
+  gap: 12px;
+}
+
+.p-4 {
+  padding: 16px;
+}
+
+.m-4 {
+  margin: 16px;
+}
+
+.px-4 {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.py-4 {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+
+.mx-4 {
+  margin-left: 16px;
+  margin-right: 16px;
+}
+
+.my-4 {
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+
+.gap-4 {
+  gap: 16px;
+}
+
+.p-5 {
+  padding: 20px;
+}
+
+.m-5 {
+  margin: 20px;
+}
+
+.px-5 {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.py-5 {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+.mx-5 {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.my-5 {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.gap-5 {
+  gap: 20px;
+}
+
+.p-6 {
+  padding: 24px;
+}
+
+.m-6 {
+  margin: 24px;
+}
+
+.px-6 {
+  padding-left: 24px;
+  padding-right: 24px;
+}
+
+.py-6 {
+  padding-top: 24px;
+  padding-bottom: 24px;
+}
+
+.mx-6 {
+  margin-left: 24px;
+  margin-right: 24px;
+}
+
+.my-6 {
+  margin-top: 24px;
+  margin-bottom: 24px;
+}
+
+.gap-6 {
+  gap: 24px;
+}
+
+.p-8 {
+  padding: 32px;
+}
+
+.m-8 {
+  margin: 32px;
+}
+
+.px-8 {
+  padding-left: 32px;
+  padding-right: 32px;
+}
+
+.py-8 {
+  padding-top: 32px;
+  padding-bottom: 32px;
+}
+
+.mx-8 {
+  margin-left: 32px;
+  margin-right: 32px;
+}
+
+.my-8 {
+  margin-top: 32px;
+  margin-bottom: 32px;
+}
+
+.gap-8 {
+  gap: 32px;
+}
+
+.p-10 {
+  padding: 40px;
+}
+
+.m-10 {
+  margin: 40px;
+}
+
+.px-10 {
+  padding-left: 40px;
+  padding-right: 40px;
+}
+
+.py-10 {
+  padding-top: 40px;
+  padding-bottom: 40px;
+}
+
+.mx-10 {
+  margin-left: 40px;
+  margin-right: 40px;
+}
+
+.my-10 {
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+
+.gap-10 {
+  gap: 40px;
+}
+
+.p-12 {
+  padding: 48px;
+}
+
+.m-12 {
+  margin: 48px;
+}
+
+.px-12 {
+  padding-left: 48px;
+  padding-right: 48px;
+}
+
+.py-12 {
+  padding-top: 48px;
+  padding-bottom: 48px;
+}
+
+.mx-12 {
+  margin-left: 48px;
+  margin-right: 48px;
+}
+
+.my-12 {
+  margin-top: 48px;
+  margin-bottom: 48px;
+}
+
+.gap-12 {
+  gap: 48px;
+}
+
+.p-16 {
+  padding: 64px;
+}
+
+.m-16 {
+  margin: 64px;
+}
+
+.px-16 {
+  padding-left: 64px;
+  padding-right: 64px;
+}
+
+.py-16 {
+  padding-top: 64px;
+  padding-bottom: 64px;
+}
+
+.mx-16 {
+  margin-left: 64px;
+  margin-right: 64px;
+}
+
+.my-16 {
+  margin-top: 64px;
+  margin-bottom: 64px;
+}
+
+.gap-16 {
+  gap: 64px;
+}
+
+.text-primary {
+  color: var(--text-primary);
+}
+
+.text-secondary {
+  color: var(--text-secondary);
+}
+
+.text-muted {
+  color: var(--text-muted);
+}
+
+.text-accent {
+  color: var(--text-accent);
+}
+
+.text-danger {
+  color: var(--color-danger);
+}
+
+.text-success {
+  color: var(--color-success);
+}
+
+.text-warning {
+  color: var(--color-warning);
+}
+
+.text-info {
+  color: var(--color-info);
+}
+
+.cny-label {
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  letter-spacing: var(--track-wider);
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.cny-mono {
+  font-family: var(--font-mono);
+  font-feature-settings: "tnum" 1, "zero" 1;
+  letter-spacing: -0.005em;
+}
+
+.cny-rule {
+  height: 1px;
+  width: 100%;
+  background: var(--hairline-color);
+  border: 0;
+  margin: 24px 0;
+}
+
+.cny-index {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 500;
+  letter-spacing: var(--track-wide);
+  color: var(--color-primary);
+  margin-right: 12px;
+  vertical-align: 0.08em;
+}
+.cny-index::after {
+  content: "  —";
+  color: var(--text-muted);
+  margin-left: 0.25em;
+}
+
+.cny-grid-paper {
+  background-image: linear-gradient(var(--hairline-color) 1px, transparent 1px), linear-gradient(90deg, var(--hairline-color) 1px, transparent 1px);
+  background-size: 8px 8px, 8px 8px;
+  background-position: -1px -1px;
+}
+
+.cny-grain {
+  position: relative;
+  isolation: isolate;
+}
+.cny-grain::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: -1;
+  opacity: 0.35;
+  mix-blend-mode: multiply;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.05  0 0 0 0 0.08  0 0 0 0.25 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
+}
+
+.cny-divide-top {
+  box-shadow: 0 -1px 0 0 var(--hairline-color);
+}
+
+.cny-divide-bottom {
+  box-shadow: 0 1px 0 0 var(--hairline-color);
+}
+
+@keyframes cny-rise {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.cny-rise {
+  animation: cny-rise 700ms var(--ease-precise) both;
+}
+
+.cny-stack {
+  display: flex;
+  flex-direction: column;
+}
+
+.cny-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.cny-wrap {
+  flex-wrap: wrap;
+}