@domandigital/craft 0.1.0

package/css/craft.css

@@ -0,0 +1,145 @@
+/*
+ * @domandigital/craft — base stylesheet.
+ *
+ * Works with or without Tailwind. Nothing here depends on a build step, a
+ * preprocessor, or a utility class layer; it is the typographic and interaction
+ * floor every Doman Digital surface stands on.
+ *
+ * Pair with the generated token block (see `craftTokens()`), which supplies the
+ * `--craft-*` custom properties this file references.
+ */
+
+/* ---------------------------------------------------------------------------
+ * Typography floor
+ * ------------------------------------------------------------------------- */
+
+html {
+  /* Kerning and ligatures are off by default in several engines at body sizes.
+     Turning them on is the single cheapest legibility win available. */
+  font-kerning: normal;
+  font-optical-sizing: auto;
+  text-rendering: optimizeLegibility;
+}
+
+/* A heading that wraps one word onto its own line looks like a mistake.
+   `balance` evens the lines; it is capped at ~6 lines by the spec, which is why
+   it is scoped to headings and not applied to body copy. */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.craft-balance {
+  text-wrap: balance;
+}
+
+/* `pretty` is the body-copy counterpart: it only prevents orphans, so it stays
+   cheap on long text where `balance` would not. */
+p,
+li,
+figcaption,
+blockquote {
+  text-wrap: pretty;
+}
+
+.craft-prose {
+  max-inline-size: var(--craft-measure-body, 65ch);
+  hanging-punctuation: first last;
+}
+
+.craft-measure-narrow {
+  max-inline-size: var(--craft-measure-narrow, 45ch);
+}
+
+.craft-measure-wide {
+  max-inline-size: var(--craft-measure-wide, 75ch);
+}
+
+/* Numbers in a column must line up. Proportional figures in a table are the
+   tell that nobody looked at the table. */
+.craft-numeric,
+[data-numeric] {
+  font-variant-numeric: lining-nums tabular-nums;
+  text-align: end;
+}
+
+/*
+ * Descender mask.
+ *
+ * A tight display line clipped by `overflow: hidden` (a reveal wrapper, a
+ * gradient text fill) loses the tails of g, j, p, q and y. Padding the box and
+ * pulling the same amount back off the margin gives the descenders room without
+ * moving anything on the page.
+ */
+.craft-descender-mask {
+  padding-bottom: 0.16em;
+  margin-bottom: -0.16em;
+}
+
+/* ---------------------------------------------------------------------------
+ * Interaction
+ * ------------------------------------------------------------------------- */
+
+.craft-press {
+  transition: transform var(--craft-duration-press, 120ms)
+    var(--craft-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
+}
+
+.craft-press:active {
+  transform: scale(var(--craft-scale-press, 0.97));
+}
+
+/* Hover affordances only where hover exists. On touch, a hover-lift fires on tap
+   and sticks, which reads as a stuck element rather than feedback. */
+@media (hover: hover) and (pointer: fine) {
+  .craft-hover-lift {
+    transition:
+      transform var(--craft-duration-dropdown, 200ms)
+        var(--craft-ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
+      box-shadow var(--craft-duration-dropdown, 200ms)
+        var(--craft-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
+  }
+
+  .craft-hover-lift:hover {
+    transform: translateY(-2px);
+  }
+}
+
+/* ---------------------------------------------------------------------------
+ * Motion budget, rule 1: the LCP element never animates.
+ *
+ * Whatever the largest contentful paint turns out to be, animating it delays the
+ * metric by exactly the animation's duration. Mark it and it is held still.
+ * ------------------------------------------------------------------------- */
+
+[data-craft-lcp] {
+  animation: none !important;
+  transition: none !important;
+}
+
+/* ---------------------------------------------------------------------------
+ * Reduced motion.
+ *
+ * COLLAPSE durations. Never `animation: none`.
+ *
+ * This is not a style preference. A forwards-filled entrance keyframe starts at
+ * `opacity: 0` and ends at `opacity: 1`; `animation: none` removes the animation
+ * *and* its fill, so the element keeps the `opacity: 0` from its own base rule
+ * and the content is invisible — permanently, for exactly the users who asked
+ * for less motion. Collapsing the duration to 0.01ms runs the animation to
+ * completion within a frame, so the end state applies and nothing moves.
+ * ------------------------------------------------------------------------- */
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-delay: 0ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    transition-delay: 0ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/css/craft.tailwind.css

@@ -0,0 +1,97 @@
+/*
+ * @domandigital/craft — Tailwind v4 theme bridge.
+ * Generated by `tailwindV4Theme()`. Import after craft.css and your token file.
+ *
+ * `@theme inline` is required rather than optional: without `inline`, Tailwind
+ * copies the value at build time and a runtime override of the underlying
+ * custom property never reaches the generated utility.
+ */
+
+@theme inline {
+  --color-bg-canvas: var(--craft-bg-canvas);
+  --color-bg-base: var(--craft-bg-base);
+  --color-bg-surface: var(--craft-bg-surface);
+  --color-bg-elevated: var(--craft-bg-elevated);
+  --color-text-primary: var(--craft-text-primary);
+  --color-text-secondary: var(--craft-text-secondary);
+  --color-text-muted: var(--craft-text-muted);
+  --color-text-on-accent: var(--craft-text-on-accent);
+  --color-border-subtle: var(--craft-border-subtle);
+  --color-border-strong: var(--craft-border-strong);
+  --color-accent: var(--craft-accent);
+  --color-accent-hover: var(--craft-accent-hover);
+  --color-accent-soft: var(--craft-accent-soft);
+  --color-accent-text: var(--craft-accent-text);
+  --color-success: var(--craft-success);
+  --color-warning: var(--craft-warning);
+  --color-danger: var(--craft-danger);
+  --color-info: var(--craft-info);
+  --text-step--2: var(--craft-step--2);
+  --text-step--1: var(--craft-step--1);
+  --text-step-0: var(--craft-step-0);
+  --text-step-1: var(--craft-step-1);
+  --text-step-2: var(--craft-step-2);
+  --text-step-3: var(--craft-step-3);
+  --text-step-4: var(--craft-step-4);
+  --text-step-5: var(--craft-step-5);
+  --spacing-3xs: var(--craft-space-3xs);
+  --spacing-2xs: var(--craft-space-2xs);
+  --spacing-xs: var(--craft-space-xs);
+  --spacing-s: var(--craft-space-s);
+  --spacing-m: var(--craft-space-m);
+  --spacing-l: var(--craft-space-l);
+  --spacing-xl: var(--craft-space-xl);
+  --spacing-2xl: var(--craft-space-2xl);
+  --spacing-3xl: var(--craft-space-3xl);
+  --spacing-section-sm: var(--craft-section-sm);
+  --spacing-section-md: var(--craft-section-md);
+  --spacing-section-lg: var(--craft-section-lg);
+  --ease-out: var(--craft-ease-out);
+  --ease-in-out: var(--craft-ease-in-out);
+  --ease-drawer: var(--craft-ease-drawer);
+  --ease-reveal: var(--craft-ease-reveal);
+  --duration-press: var(--craft-duration-press);
+  --duration-tooltip: var(--craft-duration-tooltip);
+  --duration-dropdown: var(--craft-duration-dropdown);
+  --duration-modal: var(--craft-duration-modal);
+  --duration-drawer: var(--craft-duration-drawer);
+  --duration-reveal: var(--craft-duration-reveal);
+  --duration-stagger: var(--craft-duration-stagger);
+  --tracking-display: var(--craft-tracking-display);
+  --tracking-heading: var(--craft-tracking-heading);
+  --tracking-body: var(--craft-tracking-body);
+  --tracking-button: var(--craft-tracking-button);
+  --tracking-eyebrow: var(--craft-tracking-eyebrow);
+  --leading-display: var(--craft-leading-display);
+  --leading-heading: var(--craft-leading-heading);
+  --leading-subheading: var(--craft-leading-subheading);
+  --leading-body: var(--craft-leading-body);
+}
+
+:root {
+  --craft-density-row: 2.5rem;
+  --craft-density-pad-x: 0.75rem;
+  --craft-density-pad-y: 0.5rem;
+  --craft-density-font: 0.875rem;
+}
+
+[data-density="compact"] {
+  --craft-density-row: 2rem;
+  --craft-density-pad-x: 0.5rem;
+  --craft-density-pad-y: 0.25rem;
+  --craft-density-font: 0.8125rem;
+}
+
+[data-density="comfortable"] {
+  --craft-density-row: 2.5rem;
+  --craft-density-pad-x: 0.75rem;
+  --craft-density-pad-y: 0.5rem;
+  --craft-density-font: 0.875rem;
+}
+
+[data-density="spacious"] {
+  --craft-density-row: 3rem;
+  --craft-density-pad-x: 1rem;
+  --craft-density-pad-y: 0.75rem;
+  --craft-density-font: 0.9375rem;
+}