@konopskidev/ui 0.0.0-stage → 0.1.0

package/src/styles/prose.css

@@ -0,0 +1,105 @@
+/*
+ * Long-form prose
+ * ===============
+ *
+ * Long-form typography needs descendant selectors, so it is a component class
+ * rather than a utility. Specificity stays low so a converter can override.
+ *
+ * `font-serif` is set here, unlike on the site where `<body>` supplied it: a
+ * library cannot assume anything about the app shell around it.
+ */
+
+@layer components {
+  .prose-article {
+    @apply font-serif text-base leading-[1.75];
+  }
+
+  /*
+   * Descendant, not child: rich-text renderers wrap their output in their own
+   * container, so paragraphs are never direct children of this class.
+   */
+  .prose-article p {
+    @apply mb-[1.15em];
+  }
+
+  .prose-article p:last-child {
+    @apply mb-0;
+  }
+
+  /*
+   * Size and face come from the global heading scale; prose only owns the
+   * rhythm between blocks, so the two cannot drift apart.
+   */
+  .prose-article h2 {
+    @apply mt-[2.2em] mb-[0.6em] scroll-mt-24;
+  }
+
+  .prose-article h3 {
+    @apply mt-[1.8em] mb-[0.5em] scroll-mt-24;
+  }
+
+  .prose-article h4 {
+    @apply mt-[1.6em] mb-[0.4em] scroll-mt-24;
+  }
+
+  .prose-article strong {
+    @apply font-semibold;
+  }
+
+  /*
+   * Always underlined: primary-on-body text is 2.04:1 against the surrounding
+   * copy, so colour alone cannot mark these as links (WCAG 1.4.1).
+   */
+  .prose-article a {
+    @apply text-primary underline underline-offset-4;
+  }
+
+  .prose-article ul,
+  .prose-article ol {
+    @apply my-[1.15em] pl-6;
+  }
+
+  .prose-article ul {
+    @apply list-disc;
+  }
+
+  .prose-article ol {
+    @apply list-decimal;
+  }
+
+  .prose-article li {
+    @apply mb-[0.4em];
+  }
+
+  /*
+   * Inline code only. Highlighted blocks also render a <code> element (inside
+   * their own wrapper), so this must not match every code descendant.
+   */
+  .prose-article :is(p, li, td, blockquote) > code {
+    @apply rounded-sm border border-border bg-code px-[0.35em] py-[0.1em] font-mono text-[0.85em];
+  }
+
+  .prose-article hr {
+    @apply my-10 border-border;
+  }
+
+  .prose-article img {
+    @apply border border-border;
+  }
+
+  .prose-article figure {
+    @apply my-8;
+  }
+
+  .prose-article figcaption {
+    @apply mt-2 text-sm text-muted-foreground;
+  }
+
+  .prose-article blockquote {
+    @apply my-[1.4em] border-l-2 border-primary/40 pl-5 text-muted-foreground italic;
+  }
+
+  .prose-article blockquote p:last-child {
+    @apply mb-0;
+  }
+}

package/src/styles/theme.css

@@ -0,0 +1,108 @@
+/*
+ * konopskidev theme
+ * =================
+ *
+ * Maps the raw tokens in `tokens.css` onto Tailwind utilities.
+ *
+ * `inline` keeps the `var()` reference at the use site, so `.dark` overrides of
+ * the tokens flow through every utility without redeclaring anything here.
+ */
+
+/* Dark mode is the `.dark` class on an ancestor; `&:is(.dark *)` is the only
+   form that actually matches every element inside it. */
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  /*
+   * Type. The `--font-*` variables are set by the consuming app — konopskidev
+   * sets them with `next/font`, anything else can set them however it likes.
+   * The fallbacks matter: the site's original `var(--font-lato)` had none, so
+   * outside a `next/font` app the whole stack was invalid.
+   */
+  --font-sans: var(--font-lato, 'Lato'), ui-sans-serif, system-ui, sans-serif;
+  --font-display: var(--font-playfair, 'Playfair Display'), ui-serif, Georgia, serif;
+  --font-serif: var(--font-lora, 'Lora'), ui-serif, Georgia, serif;
+  --font-mono: var(--font-jetbrains, 'JetBrains Mono'), ui-monospace, monospace;
+
+  /*
+   * Type scale. Body copy is 1rem (the browser default) and every heading step
+   * is a visible jump above it. The base heading rules and the `text-*`
+   * utilities both read these, so a heading size is declared exactly once.
+   */
+  --text-display: clamp(2.25rem, 6vw, 3.5rem);
+  --text-display--line-height: 1.08;
+  --text-lead: 1.25rem;
+  --text-lead--line-height: 1.6;
+  --text-h1: clamp(2rem, 4.8vw, 2.75rem);
+  --text-h1--line-height: 1.12;
+  --text-h2: 1.75rem;
+  --text-h2--line-height: 1.2;
+  --text-h3: 1.375rem;
+  --text-h3--line-height: 1.3;
+  --text-h4: 1.125rem;
+  --text-h4--line-height: 1.4;
+  --text-h5: 1rem;
+  --text-h5--line-height: 1.5;
+  --text-h6: 0.875rem;
+  --text-h6--line-height: 1.5;
+
+  /* surfaces & text */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* code */
+  --color-code: var(--code);
+  --color-tok-fg: var(--tok-fg);
+  --color-tok-comment: var(--tok-comment);
+  --color-tok-punct: var(--tok-punct);
+  --color-tok-keyword: var(--tok-keyword);
+  --color-tok-string: var(--tok-string);
+  --color-tok-number: var(--tok-number);
+  --color-tok-function: var(--tok-function);
+  --color-tok-type: var(--tok-type);
+
+  /* charts */
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  /* sidebar */
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* layout */
+  --container-page: 67.5rem; /* 1080px */
+  --container-article: 42.5rem; /* 680px */
+  --container-toc: 13.75rem; /* 220px */
+
+  /* radius */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}

package/src/styles/tokens.css

@@ -0,0 +1,129 @@
+/*
+ * konopskidev tokens
+ * ==================
+ *
+ * Every value here is copied verbatim from konopskidev's
+ * `src/app/(website)/index.css`, so a component rendered from this package looks
+ * exactly like the same component on the site.
+ *
+ * Rules, inherited from the source file and worth keeping:
+ *
+ * 1. Values live unlayered so `.dark` can override them. Wrapping them in a
+ *    layer would make the override lose against `@theme inline` utilities.
+ * 2. Tokens are referenced, never redefined, by `theme.css`. A colour is
+ *    declared exactly once, here.
+ * 3. Dark mode is the `.dark` class on an ancestor (usually `<html>`), set by
+ *    the consuming app.
+ */
+
+:root {
+  --radius: 0.5rem;
+
+  --background: #fbfbfa;
+  --foreground: #1d2329;
+
+  --card: #ffffff;
+  --card-foreground: #1d2329;
+  --popover: #ffffff;
+  --popover-foreground: #1d2329;
+
+  --primary: #1f4fa3;
+  --primary-foreground: #ffffff;
+  --secondary: #f2f3f4;
+  --secondary-foreground: #1d2329;
+  --muted: #f2f3f4;
+  --muted-foreground: #5d6670;
+  --accent: #f2f3f4;
+  --accent-foreground: #1d2329;
+  --destructive: #b4362f;
+  --destructive-foreground: #ffffff;
+
+  --border: #e1e4e7;
+  --input: #d8dce0;
+  --ring: #1f4fa3;
+
+  --code: #f4f5f6;
+  --tok-fg: #1d2329;
+  --tok-comment: #666e77;
+  --tok-punct: #5d6670;
+  --tok-keyword: #1f4fa3;
+  --tok-string: #1f7a4d;
+  --tok-number: #a25d09;
+  --tok-function: #7a3fb0;
+  --tok-type: #0b6e99;
+
+  /*
+   * The site never charted anything, so the chart palette is derived from the
+   * syntax palette above: a chart, a code block and a diff then share one
+   * categorical colour language instead of introducing a second one.
+   */
+  --chart-1: var(--tok-keyword);
+  --chart-2: var(--tok-string);
+  --chart-3: var(--tok-number);
+  --chart-4: var(--tok-function);
+  --chart-5: var(--tok-type);
+
+  /*
+   * Sidebar surfaces. Defined by reference so they follow the theme for free;
+   * `var()` inside a custom property resolves where it is used, not here.
+   */
+  --sidebar: var(--card);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: var(--accent);
+  --sidebar-accent-foreground: var(--accent-foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+
+  /*
+   * Stacking scale. konopskidev's Dialog referenced `--z-index-modal` without
+   * it ever being defined, which silently disabled its z-index; the scale is
+   * declared here so every floating surface has somewhere to sit.
+   */
+  --z-index-dropdown: 40;
+  --z-index-overlay: 50;
+  --z-index-modal: 50;
+  --z-index-popover: 60;
+  --z-index-toast: 70;
+  --z-index-tooltip: 80;
+
+  color-scheme: light;
+}
+
+.dark {
+  --background: #14181c;
+  --foreground: #e6e9ec;
+
+  --card: #171c21;
+  --card-foreground: #e6e9ec;
+  --popover: #171c21;
+  --popover-foreground: #e6e9ec;
+
+  --primary: #7aa7ee;
+  --primary-foreground: #14181c;
+  --secondary: #1c2227;
+  --secondary-foreground: #e6e9ec;
+  --muted: #1c2227;
+  --muted-foreground: #98a2ac;
+  --accent: #232a31;
+  --accent-foreground: #e6e9ec;
+  --destructive: #e07b73;
+  --destructive-foreground: #14181c;
+
+  --border: #2b333a;
+  --input: #333c44;
+  --ring: #7aa7ee;
+
+  --code: #1b2126;
+  --tok-fg: #e6e9ec;
+  --tok-comment: #848e97;
+  --tok-punct: #98a2ac;
+  --tok-keyword: #7aa7ee;
+  --tok-string: #7fd1a6;
+  --tok-number: #e0a04a;
+  --tok-function: #c4a1f0;
+  --tok-type: #6fc3e0;
+
+  color-scheme: dark;
+}

package/src/styles/utilities.css

@@ -0,0 +1,57 @@
+/*
+ * konopskidev primitives
+ * ======================
+ *
+ * Single-purpose, variant-composable utilities. These are the vocabulary the
+ * site is written in, so they ship with the components rather than being
+ * re-invented per app.
+ */
+
+@utility container-page {
+  @apply mx-auto w-full max-w-page px-6;
+}
+
+@utility container-prose {
+  @apply w-full max-w-article;
+}
+
+@utility stack {
+  @apply flex flex-col gap-4;
+}
+
+@utility stack-tight {
+  @apply flex flex-col gap-2;
+}
+
+@utility stack-loose {
+  @apply flex flex-col gap-8;
+}
+
+@utility eyebrow {
+  @apply font-sans text-xs font-medium tracking-[0.08em] text-muted-foreground uppercase;
+}
+
+/* Page and section headings are the h1 / h2 steps of the scale, set bolder. */
+@utility page-title {
+  @apply font-display text-h1 font-bold;
+}
+
+@utility section-title {
+  @apply font-display text-h2 font-semibold;
+}
+
+@utility card {
+  @apply rounded-sm border border-border bg-card text-card-foreground;
+}
+
+/*
+ * The house focus treatment: an outline, not a ring. It sits outside the box,
+ * never shifts layout, and is visible on every surface the tokens allow.
+ */
+@utility focus-ring {
+  @apply focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring;
+}
+
+@utility container-grid {
+  @apply grid gap-6 md:grid-cols-2;
+}