@knadh/oat 0.1.0

package/css/00-base.css

@@ -0,0 +1,177 @@
+@layer theme, base, components, animations, utilities;
+
+@layer base {
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+
+  * {
+    margin: 0;
+  }
+
+  html {
+    tab-size: 4;
+  }
+
+  /* Top-layer elements don't inherit from body. Set explicitly. */
+  body, dialog, [popover] {
+    font-family: var(--font-sans);
+    font-size: var(--text-regular);
+    line-height: var(--leading-normal);
+    color: var(--foreground);
+  }
+
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+    -webkit-font-smoothing: antialiased;
+  }
+
+  img, picture, video, canvas, svg {
+    max-width: 100%;
+  }
+
+  p, h1, h2, h3, h4, h5, h6 {
+    overflow-wrap: break-word;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-weight: var(--font-semibold);
+    line-height: 1.25;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  h1 {
+    font-size: 2.25rem;
+    margin: var(--space-10) 0 var(--space-6);
+  }
+
+  h2 {
+    font-size: 1.875rem;
+    margin: var(--space-8) 0 var(--space-5);
+  }
+
+  h3 {
+    font-size: 1.5rem;
+    margin: var(--space-6) 0 var(--space-4);
+  }
+
+  h4 {
+    font-size: 1.25rem;
+    margin: var(--space-5) 0 var(--space-3);
+  }
+
+  h5 {
+    font-size: 1.125rem;
+    margin: var(--space-4) 0 var(--space-2);
+  }
+
+  h6 {
+    font-size: var(--text-regular);
+    margin: var(--space-4) 0 var(--space-2);
+  }
+
+  p {
+    margin-bottom: var(--space-4);
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  a {
+    color: var(--primary);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    transition: color var(--transition-fast);
+
+    &:hover {
+      color: rgb(from var(--primary) r g b / 0.8);
+    }
+  }
+
+  strong, b {
+    font-weight: var(--font-semibold);
+  }
+
+  em, i {
+    font-style: italic;
+  }
+
+  small {
+    font-size: var(--text-7);
+  }
+
+  code {
+    font-family: var(--font-mono);
+    font-size: 0.875em;
+    padding: 0.125rem 0.25rem;
+    background-color: var(--faint);
+    border-radius: var(--radius-small);
+  }
+
+  pre {
+    font-family: var(--font-mono);
+    padding: var(--space-4);
+    background-color: var(--faint);
+    border-radius: var(--radius-medium);
+    overflow-x: auto;
+    margin-bottom: var(--space-4);
+
+    code {
+      padding: 0;
+      background: none;
+      border-radius: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 4px solid var(--border);
+    padding-left: var(--space-4);
+    margin: var(--space-4) 0;
+    color: var(--muted-foreground);
+    font-style: italic;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--border);
+    margin: var(--space-8) 0;
+  }
+
+  ul, ol {
+    padding-left: var(--space-6);
+    margin-bottom: var(--space-4);
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  li {
+    margin-bottom: var(--space-1);
+  }
+
+  mark {
+    background-color: rgb(from var(--warning) r g b / 0.3);
+    padding: 0.125rem 0.25rem;
+    border-radius: var(--radius-small);
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+
+  :disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}

package/css/01-theme.css

@@ -0,0 +1,98 @@
+@layer theme {
+  :root {
+    /* Default light theme variables */
+    --background: #fff;
+    --foreground: #09090b;
+    --card: #fff;
+    --card-foreground: #09090b;
+    --primary: #574747;
+    --primary-foreground: #fafafa;
+    --secondary: #f4f4f5;
+    --secondary-foreground: #574747;
+    --muted: #f4f4f5;
+    --muted-foreground: #71717a;
+    --faint: #fafafa;
+    --accent: #f4f4f5;
+    --danger: #df514c;
+    --danger-foreground: #fafafa;
+    --success: #4caf50;
+    --success-foreground: #fafafa;
+    --warning: #ff8c00;
+    --warning-foreground: #09090b;
+    --border: #d4d4d8;
+    --input: #d4d4d8;
+    --ring: #574747;
+
+    /* ==================== */
+    --space-1: 0.25rem;
+    --space-2: 0.5rem;
+    --space-3: 0.75rem;
+    --space-4: 1rem;
+    --space-5: 1.25rem;
+    --space-6: 1.5rem;
+    --space-8: 2rem;
+    --space-10: 2.5rem;
+    --space-12: 3rem;
+    --space-14: 3.5rem;
+    --space-16: 4rem;
+    --space-18: 4.5rem;
+
+    --radius-small: 0.125rem;
+    --radius-medium: 0.375rem;
+    --radius-large: 0.75rem;
+    --radius-full: 9999px;
+
+    --bar-height: 0.5rem;
+
+    --font-sans: system-ui, sans-serif;
+    --font-mono: ui-monospace, Consolas, monospace;
+
+    --text-1: 3rem;
+    --text-2: 2.25rem;
+    --text-3: 1.875rem;
+    --text-4: 1.5rem;
+    --text-5: 1.25rem;
+    --text-6: 1rem;
+    --text-7: 0.875rem;
+    --text-8: 0.75rem;
+    --text-regular: var(--text-6);
+
+    --leading-normal: 1.5;
+
+    --font-normal: 400;
+    --font-medium: 500;
+    --font-semibold: 600;
+    --font-bold: 600;
+
+    --shadow-small: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-medium: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-large: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+
+    --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+
+    --z-dropdown: 50;
+    --z-modal: 200;
+  }
+
+  [data-theme="dark"] {
+    --background: #09090b;
+    --foreground: #fafafa;
+    --card: #18181b;
+    --card-foreground: #fafafa;
+    --primary: #fafafa;
+    --primary-foreground: #18181b;
+    --secondary: #27272a;
+    --secondary-foreground: #fafafa;
+    --muted: #27272a;
+    --muted-foreground: #a1a1aa;
+    --faint: #1e1e21;
+    --accent: #27272a;
+    --danger-foreground: #fafafa;
+    --success-foreground: #fafafa;
+    --warning-foreground: #09090b;
+    --border: #52525b;
+    --input: #52525b;
+    --ring: #d4d4d8;
+  }
+}

package/css/accordion.css

@@ -0,0 +1,60 @@
+@layer components {
+  details {
+    border: 1px solid var(--border);
+    border-radius: var(--radius-medium);
+    overflow: hidden;
+
+    & + details {
+      margin-top: -1px;
+      border-start-start-radius: 0;
+      border-start-end-radius: 0;
+    }
+
+    &:has(+ details) {
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+    &[open] summary {
+      border-bottom: 1px solid var(--border);
+    }
+  }
+
+  summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+    padding: var(--space-4);
+    font-weight: var(--font-medium);
+    cursor: pointer;
+    user-select: none;
+    transition: background-color var(--transition-fast);
+
+    &:hover {
+      background-color: var(--muted);
+    }
+
+    &::-webkit-details-marker, &::marker {
+      display: none;
+    }
+
+    &::after {
+      content: "";
+      width: 1rem;
+      height: 1rem;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+      background-size: contain;
+      background-repeat: no-repeat;
+      transition: transform var(--transition-fast);
+    }
+
+    details[open] &::after {
+      transform: rotate(180deg);
+    }
+  }
+
+  details > *:not(summary) {
+    padding: var(--space-4);
+  }
+}

package/css/alert.css

@@ -0,0 +1,57 @@
+@layer components {
+  [role="alert"] {
+    position: relative;
+    display: flex;
+    gap: var(--space-3);
+    padding: var(--space-4);
+    background-color: var(--background);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-medium);
+    font-size: var(--text-7);
+
+    &[data-variant] {
+      border: none;
+    }
+
+    &[data-variant="error"], &[data-variant="danger"] {
+      color: var(--danger);
+      background-color: color-mix(in srgb, var(--danger) 8%, white);
+
+      & a {
+        color: var(--danger);
+      }
+    }
+
+    &[data-variant="success"] {
+      color: var(--success);
+      background-color: color-mix(in srgb, var(--success) 8%, white);
+
+      & a {
+        color: var(--success);
+      }
+    }
+
+    &[data-variant="warning"] {
+      color: var(--warning);
+      background-color: color-mix(in srgb, var(--warning) 8%, white);
+
+      & a {
+        color: var(--warning);
+      }
+    }
+
+    [data-theme="dark"] & {
+      &[data-variant="error"], &[data-variant="danger"] {
+        background-color: color-mix(in srgb, var(--danger) 20%, black);
+      }
+
+      &[data-variant="success"] {
+        background-color: color-mix(in srgb, var(--success) 20%, black);
+      }
+
+      &[data-variant="warning"] {
+        background-color: color-mix(in srgb, var(--warning) 20%, black);
+      }
+    }
+  }
+}

package/css/animations.css

@@ -0,0 +1,59 @@
+@layer animations {
+  /* Pop-in animation for modals/overlays - swings from above */
+  .animate-pop-in {
+    opacity: 1;
+    transform: perspective(1000px) rotateX(0deg) translateZ(0);
+    transition:
+      opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
+      transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
+      overlay 150ms cubic-bezier(0.4, 0, 0.2, 1) allow-discrete,
+      display 150ms cubic-bezier(0.4, 0, 0.2, 1) allow-discrete;
+
+    /* Entry - where to animate FROM */
+    @starting-style {
+      opacity: 0;
+      transform: perspective(1000px) rotateX(-15deg) translateZ(-80px);
+    }
+
+    /* Exit - where to animate TO when closing */
+    &[data-state="closing"] {
+      opacity: 0;
+      transform: perspective(1000px) rotateX(-15deg) translateZ(-80px);
+    }
+
+    &[data-state="closing"]::backdrop {
+      opacity: 0;
+    }
+  }
+
+  /* Backdrop animation for dialogs */
+  dialog::backdrop {
+    opacity: 1;
+    transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
+
+    @starting-style {
+      opacity: 0;
+    }
+  }
+
+  /* Slide-in animation for toasts */
+  .animate-slide-in {
+    opacity: 1;
+    transform: translateX(0);
+    transition:
+      opacity 150ms cubic-bezier(0.16, 1, 0.3, 1),
+      transform 150ms cubic-bezier(0.16, 1, 0.3, 1);
+
+    /* Entry - slide in from right */
+    @starting-style {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+
+    /* Exit - slide out to right */
+    &[data-state="closing"] {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+  }
+}

package/css/badge.css

@@ -0,0 +1,54 @@
+@layer components {
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding: var(--space-1) var(--space-4);
+    font-size: var(--text-8);
+    font-weight: var(--font-medium);
+    line-height: var(--leading-normal);
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    border-radius: var(--radius-full);
+
+    &.secondary {
+      background-color: var(--secondary);
+      color: var(--secondary-foreground);
+    }
+
+    &.outline {
+      background-color: transparent;
+      color: var(--foreground);
+      border: 1px solid var(--border);
+    }
+
+    &.success {
+      color: var(--success);
+      background-color: color-mix(in srgb, var(--success) 12%, white);
+    }
+
+    &.warning {
+      color: var(--warning);
+      background-color: color-mix(in srgb, var(--warning) 12%, white);
+    }
+
+    &.danger {
+      color: var(--danger);
+      background-color: color-mix(in srgb, var(--danger) 15%, white);
+    }
+
+    [data-theme="dark"] & {
+      &.success {
+        background-color: color-mix(in srgb, var(--success) 40%, black);
+      }
+
+      &.warning {
+        background-color: color-mix(in srgb, var(--warning) 40%, black);
+      }
+
+      &.danger {
+        background-color: color-mix(in srgb, var(--danger) 40%, black);
+      }
+    }
+  }
+}

package/css/button.css

@@ -0,0 +1,118 @@
+@layer base {
+  :is(button, [type=submit], [type=reset], [type=button], a.button) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    /* height: 2.5rem; */
+    padding: var(--space-2) var(--space-4);
+    font-size: var(--text-7);
+    font-weight: var(--font-medium);
+    line-height: var(--leading-normal);
+    white-space: nowrap;
+    text-decoration: none;
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    border-radius: var(--radius-medium);
+    border: 1px solid;
+    border-color: rgb(from #fff r g b / 0.15) rgb(from #000 r g b / 0.2) rgb(from #000 r g b / 0.2) rgb(from #fff r g b / 0.15);
+    transition: background-color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
+    cursor: pointer;
+
+    &:hover:not(:disabled) {
+      background-color: color-mix(in srgb, var(--primary), white 25%);
+    }
+
+    &:active:not(:disabled) {
+      transform: translate(1px, 1px);
+    }
+
+    &.secondary {
+      background-color: var(--secondary);
+      color: var(--secondary-foreground);
+      border-color: rgb(from #fff r g b / 0.5) rgb(from #000 r g b / 0.1) rgb(from #000 r g b / 0.1) rgb(from #fff r g b / 0.5);
+
+      &:hover:not(:disabled) {
+        background-color: color-mix(in srgb, var(--secondary), black 10%);
+      }
+    }
+
+    &.outline {
+      background-color: transparent;
+      color: var(--foreground);
+      border-color: var(--border);
+
+      &:hover:not(:disabled) {
+        background-color: var(--accent);
+      }
+    }
+
+    &.ghost {
+      background-color: transparent;
+      color: var(--foreground);
+      border-color: transparent;
+
+      &:hover:not(:disabled) {
+        background-color: var(--accent);
+      }
+    }
+
+    &.danger {
+      background-color: var(--danger);
+      color: var(--danger-foreground);
+
+      &:hover:not(:disabled) {
+        background-color: color-mix(in srgb, var(--danger), black 15%);
+      }
+    }
+
+    &.small {
+      padding: var(--space-1) var(--space-3);
+      font-size: var(--text-8);
+    }
+
+    &.large {
+      height: 3rem;
+      padding: 0 var(--space-6);
+      font-size: var(--text-regular);
+    }
+
+    &.icon {
+      width: 2.5rem;
+      padding: 0;
+
+      &.small {
+        width: 2rem;
+      }
+
+      &.large {
+        width: 3rem;
+      }
+    }
+  }
+}
+
+@layer components {
+  menu.buttons {
+    padding-left: 0;
+    display: inline-flex;
+
+    & > :is(button, [type=button], [type=submit], [type=reset], a.button) {
+      border-radius: 0;
+
+      &:first-child {
+        border-start-start-radius: var(--radius-medium);
+        border-end-start-radius: var(--radius-medium);
+      }
+
+      &:last-child {
+        border-start-end-radius: var(--radius-medium);
+        border-end-end-radius: var(--radius-medium);
+      }
+
+      &:not(:last-child) {
+        border-inline-end: 1px solid rgb(from var(--primary-foreground) r g b / 0.2);
+      }
+    }
+  }
+}

package/css/card.css

@@ -0,0 +1,11 @@
+@layer components {
+  .card {
+    background-color: var(--card);
+    color: var(--card-foreground);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-medium);
+    box-shadow: var(--shadow-small);
+    padding: var(--space-6);
+    overflow: hidden;
+  }
+}