skcr-design-tokens 3.1.0 → 3.2.0

package/README.md

@@ -62,6 +62,32 @@ Angular applications then use `skcr-autechre`'s `ThemeService` for toggling and
 cross-tab synchronization. It does not do the initialization: the script above
 has already done it.
 
+## Upgrading to 3.2.0
+
+Nothing to change: two new tokens, `--color-skeleton` and `--color-skeleton-highlight` (Tailwind
+`bg-skeleton`), the surface of a loading skeleton and the band that sweeps across it — slate-200 /
+slate-50 in light, slate-700 / slate-600 in dark. A skeleton needs its own pair because `muted`
+equals `background` in both themes: a `bg-muted` skeleton vanished on the page. Read by
+`skcr-skeleton` and the first-load rows of `skcr-table` (skcr-autechre 7.7.0, which requires 3.2.0).
+`display.css`'s `.skeleton` takes the same rendering: the pair, and a band fixed to the window that
+sweeps the skeletons rendered together in one wave — still under `prefers-reduced-motion`. A
+`.skeleton` added later runs its own wave; `skcr-skeleton` keeps every skeleton in phase.
+
+## Upgrading to 3.1.1
+
+Nothing to write. **The calendar of the two pickers takes the typeface of the design system.** The
+prebuilt Material theme the skcr-autechre README asks for (`azure-blue.css`) writes `Roboto`, with
+no fallback, in its fifteen `--mat-sys-*-font` typescale tokens: an application that does not load
+Roboto drew the calendar in the browser's default serif. `components.css` now points them at
+`--font-sans`, next to the colour redirection. And the background of
+`.mat-datepicker-content-container` takes the radius of its panel: its square corners covered the
+panel's own, so the calendar looked square.
+
+**The neutral badge (`.badge` alone) sits on slate-200**, one notch above the Figma's
+`neutral-foreground` (slate-100), a departure decided without the design. slate-100 is also the
+page background of the light theme: there the badge had no ground at all and read as plain text,
+and on a card it barely showed. The text stays slate-700 (8.6:1). Every other badge is unchanged.
+
 ## Upgrading to 3.1.0
 
 Additive, nothing changes for existing screens but the fold of `.collapsible` (`display.css`), now
@@ -92,7 +118,7 @@ node 620:965). Every badge changes look, and the palette classes are removed.
   every borderless badge stood 22 px high where the design draws 20. **`.badge-lg`** gives the
   32 px badge (`px-3 py-1.5`, 14/20).
 - **Eleven variants under the Figma's names**, each light (`badge-<variant>`) and strong
-  (`badge-strong-<variant>`): `primary`, `secondary` (`.badge` alone is secondary light), `outline`,
+  (`badge-strong-<variant>`): `primary`, `secondary` (`.badge` alone is secondary light, on slate-200 since 3.1.1), `outline`,
   `info`, `warning`, `destructive`, and the data colours `chart-1`, `chart-3`, `chart-4`,
   `chart-5`, `chart-6` for a category rather than a status (there is no chart-2 in the Figma).
 - **Removed, with their replacement** — a search and replace in the templates:
@@ -185,8 +211,9 @@ name for name, the page would have turned white.
   `tokens.css` (statuses as text on dark surfaces, `neutral`, `destructive-foreground`, the
   `data-*` on some chart colors, `input` and `elevated` as boundaries).
 
-`skcr-autechre` accepts `^1.6.0 || ^2.0.0` since 5.2.0: an application can take the library first and
-move to 2.0.0 once its text on data colors is migrated.
+`skcr-autechre` accepted `^1.6.0 || ^2.0.0` from 5.2.0 on (widened to `^3.0.0` in 5.4.1, narrowed to
+`^3.1.1` after 7.4.0): an application could take the library first and move to 2.0.0 once its text
+on data colors was migrated.
 
 ## Contents
 

package/components.css

@@ -42,6 +42,10 @@
 @layer components {
   .mat-datepicker-content-container {
     background-color: var(--color-popover);
+    /* 3.1.1: the background is painted here, one level inside the rounded panel, and its square
+       corners covered the panel's own — the calendar looked square, as a popup and as the touch
+       dialog. */
+    border-radius: inherit;
   }
 
   .btn {
@@ -102,8 +106,13 @@
        absent from the design. They are gone; the README maps each one to its replacement.
      The hover state of the Figma (80 % opacity) belongs to a clickable badge: none exists, so
      none is emitted. */
+  /* 3.1.1: the neutral badge on slate-200, one notch above the Figma's `neutral-foreground`
+     (slate-100) — a deliberate departure, decided without the design. slate-100 is also the page
+     background of the light theme: there the badge had no ground at all and read as plain text,
+     and on a card it barely showed. Text unchanged (slate-700, 8.6:1). A palette value, like the
+     strong secondary below, so it keeps one look in both themes. */
   .badge {
-    @apply inline-flex items-center justify-center gap-0.5 rounded-lg bg-neutral-foreground px-2 py-0.5 text-xs leading-4 font-medium text-neutral;
+    @apply inline-flex items-center justify-center gap-0.5 rounded-lg bg-slate-200 px-2 py-0.5 text-xs leading-4 font-medium text-neutral;
 
     /* The badge does NOT follow the theme: its colors are the same in both. What it
        contains has to keep the badge's text color. Without this rule, the reset of an
@@ -331,4 +340,23 @@
   --mat-sys-outline: var(--color-border-color);
   --mat-sys-outline-variant: var(--color-border-color);
   --mat-sys-corner-large: 0.5rem;
+
+  /* 3.1.1: the typeface. The prebuilt theme the README asks for writes `Roboto` with no fallback
+     in all fifteen typescale fonts, so an application that does not load Roboto drew the calendar
+     in the browser's default face — a serif — next to an Inter interface. */
+  --mat-sys-body-large-font: var(--font-sans);
+  --mat-sys-body-medium-font: var(--font-sans);
+  --mat-sys-body-small-font: var(--font-sans);
+  --mat-sys-display-large-font: var(--font-sans);
+  --mat-sys-display-medium-font: var(--font-sans);
+  --mat-sys-display-small-font: var(--font-sans);
+  --mat-sys-headline-large-font: var(--font-sans);
+  --mat-sys-headline-medium-font: var(--font-sans);
+  --mat-sys-headline-small-font: var(--font-sans);
+  --mat-sys-label-large-font: var(--font-sans);
+  --mat-sys-label-medium-font: var(--font-sans);
+  --mat-sys-label-small-font: var(--font-sans);
+  --mat-sys-title-large-font: var(--font-sans);
+  --mat-sys-title-medium-font: var(--font-sans);
+  --mat-sys-title-small-font: var(--font-sans);
 }

package/display.css

@@ -480,8 +480,29 @@
     @apply size-3;
   }
 
+  /* Same rendering as `skcr-skeleton` (3.2.0): the skeleton pair of tokens and one light band
+     sweeping across the window, fixed to the viewport so the skeletons rendered together show the
+     same wave; one added later runs its own, the class has no timeline to meet on. Still under
+     reduced motion. Angular projects prefer `skcr-skeleton`, which keeps every skeleton in phase. */
   .skeleton {
-    @apply block h-3 rounded bg-muted animate-pulse motion-reduce:animate-none;
+    @apply block h-3 rounded bg-skeleton;
+    background-image: linear-gradient(
+      100deg,
+      transparent 35%,
+      var(--color-skeleton-highlight) 50%,
+      transparent 65%
+    );
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+    background-size: 200vw 100vh;
+    animation: skcr-skeleton-sweep 1.6s ease-in-out infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .skeleton {
+      background-image: none;
+      animation: none;
+    }
   }
 
   /* Shell of a toast — positioning, stacking and the timer stay with the JS.
@@ -562,3 +583,13 @@
     transition-duration: 1ms;
   }
 }
+
+@keyframes skcr-skeleton-sweep {
+  from {
+    background-position: -120vw 0;
+  }
+
+  to {
+    background-position: 20vw 0;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "skcr-design-tokens",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "Design system SkillCorner : tokens de couleur, utilitaires typographiques et classes de composants. CSS pur, sans dépendance.",
   "license": "UNLICENSED",
   "sideEffects": [

package/tokens.css

@@ -156,6 +156,14 @@
      token can do that: `muted` was worth exactly `popover` in dark, so
      `hover:bg-muted` was strictly invisible there. */
   --color-hover: theme(colors.slate.100);
+  /* 3.2.0: the loading skeleton (skcr-skeleton, the first-load rows of skcr-table, display.css's
+     `.skeleton`). Its own pair because no zone token can carry it: `muted` equals `background` in
+     both themes, so a `bg-muted` skeleton vanished on the page. One notch above the page in light
+     and above the raised surfaces in dark; the highlight is the band that sweeps across it. */
+  /* Measured on 3.2.0 (e2e/skeleton.spec.ts): 1.13 against the light page, 1.23 against a card or
+     a table; slate-300 would give 1.36 / 1.49. */
+  --color-skeleton: theme(colors.slate.200);
+  --color-skeleton-highlight: theme(colors.slate.50);
   /* Modal scrim. The only token that does not invert: slate-500 in both themes, applied at
      15 % opacity and blurred by `skcr-dialog` — the weight of the design's screens (a 15 %
      veil), where 75 % darkened the page far more. */
@@ -260,6 +268,9 @@
   /* One notch above the popover: the hover lifts. On the slate-800 popover the
      ratio goes from 1.00 — invisible — to 1.41. */
   --color-hover: #334155; /* slate-700 */
+  /* Above `control` and `popover` (slate-800), the highest surfaces a skeleton sits on. */
+  --color-skeleton: #334155; /* slate-700 */
+  --color-skeleton-highlight: #475569; /* slate-600 */
   --color-scrim: #64748b; /* slate-500: same value as in light */
 
   --color-primary: #32fe6b; /* primary-400: #008a26 fails contrast on a dark background */