@lyeve-labs/ui-kit 0.28.0 → 0.29.0

package/dist/components/Logo.svelte

@@ -11,9 +11,11 @@
    * drew a near-black column on a dark surface. There is no media query here
    * for that reason, and none belongs here.
    *
-   * The neutral faces come from currentColor and the lit faces from the brand
-   * ramp, so every face answers the same tokens as the rest of the page and a
-   * palette change reaches the mark with everything else.
+   * Every face and the wordmark paint from the mark-* tokens, which carry the
+   * brand book's colours per theme: the same lockup the documentation site
+   * ships as a static file. They are separate from the brand ramp because that
+   * ramp darkens for text contrast in the light theme and inverts the mark's
+   * lighting there.
    */
 
   type Size = 'sm' | 'md' | 'lg';
@@ -47,10 +49,7 @@
   const px = $derived(marks[size]);
 </script>
 
-<!-- text-fg is stated here rather than inherited. The mark is usually wrapped
-     in a link that carries no colour of its own, so currentColor would
-     otherwise be whatever that ancestor happened to hold. -->
-<span class="inline-flex items-center gap-2 text-fg {klass}">
+<span class="inline-flex items-center gap-2 {klass}">
   <span class="inline-flex shrink-0 items-center justify-center">
     <svg
       width={px}
@@ -60,18 +59,24 @@
       aria-hidden="true"
     >
       <g transform="translate(6 4)">
-        <polygon class="fill-current" points="0,14 14,7 14,40 0,47" />
-        <polygon class="fill-current opacity-50" points="0,47 14,40 14,54 0,61" />
-        <polygon class="fill-current opacity-75" points="14,40 28,33 28,47 14,54" />
-        <polygon class="fill-brand-light" points="14,54 28,47 56,33 42,40" />
-        <polygon class="fill-brand-deep" points="42,40 56,33 56,47 42,54" />
-        <polygon class="fill-brand" points="14,54 28,61 42,54 28,47" />
-        <polygon class="fill-brand" points="28,47 42,54 56,47 42,40" />
+        <polygon class="fill-mark-ink" points="0,14 14,7 14,40 0,47" />
+        <polygon class="fill-mark-foot" points="0,47 14,40 14,54 0,61" />
+        <polygon class="fill-mark-step" points="14,40 28,33 28,47 14,54" />
+        <polygon class="fill-mark-top" points="14,54 28,47 56,33 42,40" />
+        <polygon class="fill-mark-side" points="42,40 56,33 56,47 42,54" />
+        <polygon class="fill-mark-face" points="14,54 28,61 42,54 28,47" />
+        <polygon class="fill-mark-face" points="28,47 42,54 56,47 42,40" />
       </g>
     </svg>
   </span>
 
   {#if wordmark}
-    <span class="font-semibold tracking-tight {words[size]}">LyEve</span>
+    <!-- The accent splits the word across two elements, which some screen
+         readers announce letter group by letter group, so the painted word is
+         hidden and the name is given once as plain text. -->
+    <span class="font-bold tracking-tight text-mark-ink {words[size]}">
+      <span aria-hidden="true">Ly<span class="text-mark-accent">E</span>ve</span>
+      <span class="sr-only">LyEve</span>
+    </span>
   {/if}
 </span>

package/dist/components/Logo.svelte.d.ts

@@ -10,9 +10,11 @@
  * drew a near-black column on a dark surface. There is no media query here
  * for that reason, and none belongs here.
  *
- * The neutral faces come from currentColor and the lit faces from the brand
- * ramp, so every face answers the same tokens as the rest of the page and a
- * palette change reaches the mark with everything else.
+ * Every face and the wordmark paint from the mark-* tokens, which carry the
+ * brand book's colours per theme: the same lockup the documentation site
+ * ships as a static file. They are separate from the brand ramp because that
+ * ramp darkens for text contrast in the light theme and inverts the mark's
+ * lighting there.
  */
 type Size = 'sm' | 'md' | 'lg';
 interface Props {

package/dist/index.d.ts

@@ -93,4 +93,4 @@ export { cn, type ClassValue } from './utils/cn.js';
 export { getTheme, getThemePreference, nextThemePreference, resolveTheme, setTheme, setThemePreference, systemTheme, themeBootScript, toggleTheme, watchSystemTheme, THEME_PREFERENCES, type Theme, type ThemePreference, } from './utils/theme.js';
 export * as motion from './motion.js';
 export type { Rung as MotionRung, Curve as MotionCurve } from './motion.js';
-export declare const VERSION = "0.28.0";
+export declare const VERSION = "0.29.0";

package/dist/index.js

@@ -103,4 +103,4 @@ export * as motion from './motion.js';
 // ── Version ────────────────────────────────────────────────────────────────
 // Generated from package.json by `pnpm version:sync`. Bump package.json, never
 // this line; the build and the test suite fail when the two disagree.
-export const VERSION = '0.28.0';
+export const VERSION = '0.29.0';

package/dist/styles/theme.css

@@ -57,6 +57,19 @@
    * paints it on and the badge as well. */
   --color-violet: #9587f2;
 
+  /* The product mark's faces, at the brand book's values. They are their own
+   * tokens because the brand ramp above is tuned for text contrast: in the
+   * light theme it darkens to #005a77 and brand-light sits below brand, so a
+   * mark painted from it inverts its lighting. A logotype is exempt from the
+   * contrast floor, so these keep the published colours instead. */
+  --color-mark-ink: #ffffff;
+  --color-mark-foot: #9aa1ad;
+  --color-mark-step: #c5cad3;
+  --color-mark-top: #00d4ff;
+  --color-mark-side: #0099c4;
+  --color-mark-face: #00b4dd;
+  --color-mark-accent: #00d4ff;
+
   /* #15803d and #b45309 sit at ~3.7:1 on ink, below the 4.5:1 AA floor
    * for the text-size status labels that use them. */
   --color-success: #22c55e;
@@ -396,12 +409,33 @@ html[data-theme='light'] {
   --color-brand-light: #004f69;
   --color-brand-deep: #00455c;
   --color-violet: #5544da;
+  --color-mark-ink: #0a0e14;
+  --color-mark-foot: #9aa1ad;
+  --color-mark-step: #c5cad3;
+  --color-mark-top: #0099c4;
+  --color-mark-side: #006a8a;
+  --color-mark-face: #007ea6;
+  --color-mark-accent: #00d4ff;
 
   --color-success: #126c34;
   --color-warn: #904207;
   --color-danger: #ab1a1a;
 }
 
+/*
+ * A forced-colors scheme repaints the page but not a fill named in hex, so the
+ * mark's white column vanished on a white high-contrast canvas. Its neutral
+ * faces take the system colours there; the cyan faces keep their shape.
+ */
+@media (forced-colors: active) {
+  :root,
+  html[data-theme='light'] {
+    --color-mark-ink: CanvasText;
+    --color-mark-foot: GrayText;
+    --color-mark-step: GrayText;
+  }
+}
+
 /*
  * The four durations as utilities. A --duration-* token generates nothing
  * (see the motion section of the @theme block), so each is declared here the
@@ -552,6 +586,13 @@ html[data-theme='light'] {
     --color-brand-light: #000000;
     --color-brand-deep: #000000;
     --color-violet: #000000;
+    /* The mark keeps its light-theme faces: in black every face is one
+     * shape and the L is gone. Printing from the dark theme would otherwise
+     * put a white column on white paper. */
+    --color-mark-ink: #0a0e14;
+    --color-mark-top: #0099c4;
+    --color-mark-side: #006a8a;
+    --color-mark-face: #007ea6;
     --color-success: #000000;
     --color-warn: #000000;
     --color-danger: #000000;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lyeve-labs/ui-kit",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "description": "A clean, accessible, palette-aware Svelte 5 component library. The design system behind LyEve.",
   "license": "MIT",
   "author": "LyEve Labs <hello@lyeve.com>",

package/src/lib/styles/theme.css

@@ -57,6 +57,19 @@
    * paints it on and the badge as well. */
   --color-violet: #9587f2;
 
+  /* The product mark's faces, at the brand book's values. They are their own
+   * tokens because the brand ramp above is tuned for text contrast: in the
+   * light theme it darkens to #005a77 and brand-light sits below brand, so a
+   * mark painted from it inverts its lighting. A logotype is exempt from the
+   * contrast floor, so these keep the published colours instead. */
+  --color-mark-ink: #ffffff;
+  --color-mark-foot: #9aa1ad;
+  --color-mark-step: #c5cad3;
+  --color-mark-top: #00d4ff;
+  --color-mark-side: #0099c4;
+  --color-mark-face: #00b4dd;
+  --color-mark-accent: #00d4ff;
+
   /* #15803d and #b45309 sit at ~3.7:1 on ink, below the 4.5:1 AA floor
    * for the text-size status labels that use them. */
   --color-success: #22c55e;
@@ -396,12 +409,33 @@ html[data-theme='light'] {
   --color-brand-light: #004f69;
   --color-brand-deep: #00455c;
   --color-violet: #5544da;
+  --color-mark-ink: #0a0e14;
+  --color-mark-foot: #9aa1ad;
+  --color-mark-step: #c5cad3;
+  --color-mark-top: #0099c4;
+  --color-mark-side: #006a8a;
+  --color-mark-face: #007ea6;
+  --color-mark-accent: #00d4ff;
 
   --color-success: #126c34;
   --color-warn: #904207;
   --color-danger: #ab1a1a;
 }
 
+/*
+ * A forced-colors scheme repaints the page but not a fill named in hex, so the
+ * mark's white column vanished on a white high-contrast canvas. Its neutral
+ * faces take the system colours there; the cyan faces keep their shape.
+ */
+@media (forced-colors: active) {
+  :root,
+  html[data-theme='light'] {
+    --color-mark-ink: CanvasText;
+    --color-mark-foot: GrayText;
+    --color-mark-step: GrayText;
+  }
+}
+
 /*
  * The four durations as utilities. A --duration-* token generates nothing
  * (see the motion section of the @theme block), so each is declared here the
@@ -552,6 +586,13 @@ html[data-theme='light'] {
     --color-brand-light: #000000;
     --color-brand-deep: #000000;
     --color-violet: #000000;
+    /* The mark keeps its light-theme faces: in black every face is one
+     * shape and the L is gone. Printing from the dark theme would otherwise
+     * put a white column on white paper. */
+    --color-mark-ink: #0a0e14;
+    --color-mark-top: #0099c4;
+    --color-mark-side: #006a8a;
+    --color-mark-face: #007ea6;
     --color-success: #000000;
     --color-warn: #000000;
     --color-danger: #000000;