@ekanos/ui 0.1.1 → 0.1.3

package/dist/base.css

@@ -0,0 +1,116 @@
+/*
+ * @ekanos/ui — base rules the components depend on
+ * ------------------------------------------------------------------
+ * Plain CSS. Everything here is something a component's class strings assume
+ * about the page rather than state themselves. Kept deliberately short: a
+ * library stylesheet has no business restyling a host's page.
+ */
+
+/*
+ * Default border colour.
+ *
+ * Tailwind's Preflight resets every element to `border: 0 solid`, which leaves
+ * `border-color` at `currentColor`. Several components then set only a border
+ * *width* and expect the theme colour: `Button variant="outline"` and
+ * `SelectTrigger` use a bare `border`, `Badge` uses `border border-transparent`.
+ * Without this rule those borders come out the colour of the label text.
+ *
+ * This is the same rule Fusion's own `@layer base` carries
+ * (the host's global stylesheet).
+ */
+*,
+::after,
+::before,
+::backdrop,
+::file-selector-button {
+  border-color: var(--border, currentColor);
+}
+
+/*
+ * Missing-icon placeholders.
+ *
+ * `@ekanos/ui/icon` renders Font Awesome markup — `<i class="fa-solid fa-house">`
+ * — and this package ships NO icon font. Fusion uses Font Awesome **Pro**,
+ * which is commercially licensed and cannot be redistributed inside an MIT
+ * package. See the README for what to load instead.
+ *
+ * That leaves two ways for an icon to come out blank, and both are silent, so
+ * there are two placeholders. Neither can change the rendering of a correctly
+ * licensed Pro host.
+ */
+
+/*
+ * 1. No Font Awesome CSS at all. An `<i>` then has no content and no box, so
+ *    icons render as *literally nothing* and a partner cannot tell "I forgot
+ *    the icon font" apart from "my code is broken". This draws a placeholder
+ *    box instead.
+ *
+ *    `:where()` keeps the specificity at (0,0,1) — below Font Awesome's own
+ *    `:is(…)::before` at (0,1,1) — so FA wins `content` outright the instant
+ *    any Font Awesome stylesheet is present.
+ *
+ *    BUT specificity only settles properties BOTH rules declare, and `content`
+ *    is the ONLY one FA sets on `::before`. FA declares `font-family` and
+ *    `font-weight` on the ELEMENT (`.fa-solid { font-family: var(--_fa-family) }`),
+ *    never on the pseudo-element. So declaring them here left them uncontested
+ *    at `::before` level — a declared value beats an inherited one regardless
+ *    of specificity — and FA's correct codepoint got painted in system-ui,
+ *    which has no glyph in the Private Use Area. The result was Chromium's
+ *    missing-glyph hex box on every icon in any app that loads both this
+ *    stylesheet and a real Font Awesome build.
+ *
+ *    So this rule must NOT set the font. Inheriting is correct in both cases:
+ *    with FA present the element carries the FA family and the glyph resolves;
+ *    with FA absent the element inherits the body font, which does have U+25A1.
+ *
+ *    Override the glyph with `--ekanos-icon-fallback` (any CSS <string>), or
+ *    switch it off with `--ekanos-icon-fallback: ''`.
+ */
+:where(i[class*='fa-']) {
+  display: inline-block;
+  font-style: normal;
+  line-height: 1;
+  text-align: center;
+}
+
+:where(i[class*='fa-'])::before {
+  content: var(--ekanos-icon-fallback, '\25a1');
+  font-style: normal;
+}
+
+/*
+ * 2. Font Awesome Free IS loaded, but the requested glyph is Pro-only. Free
+ *    covers `fa-solid` / `fa-regular` / `fa-brands`; it has no `fa-light` or
+ *    `fa-duotone` families and is missing many Pro glyphs — including
+ *    `fa-light fa-shapes`, which is what this package's icon resolver falls
+ *    back to for an unmapped name. Font Awesome drives its glyphs off a per-icon
+ *    `--fa` custom property (`.fa-house { --fa: '\f015' }`) and renders
+ *    `content: var(--fa)`, so a glyph Free doesn't define leaves `--fa` unset
+ *    and `content` invalid — nothing renders, again silently.
+ *
+ *    Giving `--fa` a zero-specificity default fixes that: any real Font Awesome
+ *    icon class is (0,1,0) and beats it, so known glyphs are untouched, while
+ *    an unknown one falls through to a question mark (`\f059`,
+ *    `fa-circle-question`, which Free does ship). Matches the fallback the
+ *    Fusion dev harness uses against Font Awesome Free.
+ */
+:where(i[class*='fa-']) {
+  --fa: var(--ekanos-icon-fa-fallback, '\f059');
+}
+
+/*
+ * Opt-in page shell.
+ *
+ * Fusion's app sets `bg-background text-foreground` on `<body>`; this package
+ * will not do that to a host page uninvited. Put `class="ekanos-root"` on
+ * `<body>` (or on any wrapper around Ekanos UI) to adopt Fusion's page surface
+ * — which is what makes dark mode look right, rather than dark cards floating
+ * on a white page.
+ */
+.ekanos-root {
+  background-color: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/dist/card.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
 
 /**
- * Takes a `render` prop (the Base UI convention — see packages/ui/CLAUDE.md) so
+ * Takes a `render` prop (the Base UI convention) so
  * a card that is itself a destination can BE the link rather than wrapping one:
  * `<Card render={<Link href={href} />}>`. Without it, clickable cards get
  * hand-styled anchors and the surface drifts from this one.