canny-ui 1.0.0 → 3.0.0

package/dist/canny-ui.css

@@ -1,887 +0,0 @@
-@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;
-}