skcr-design-tokens 2.2.0 → 3.0.0

package/README.md

@@ -62,6 +62,40 @@ 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.0.0
+
+**Breaking: the badges follow the Badge of the Figma library** (« Skillcorner webapp - Library »,
+node 620:965). Every badge changes look, and the palette classes are removed.
+
+- **20 px high, no border** but on outline. Up to 2.2.0 `.badge` carried a transparent border, so
+  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`,
+  `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:
+
+| Removed | Use |
+| --- | --- |
+| `badge-success` (2.2.0) | `badge-primary` |
+| `badge-white` | `badge-outline` |
+| `badge-green` | `badge-chart-1` |
+| `badge-yellow` | `badge-chart-3` |
+| `badge-orange` | `badge-chart-4` |
+| `badge-destructive` as a red category | `badge-chart-5` (keep `badge-destructive`, now the design's, for an error status) |
+| `badge-blue` | `badge-info` |
+| `badge-purple` | `badge-chart-1` (the designer's mapping) |
+| `badge-pink` | `badge-chart-3` (the designer's mapping) |
+| `badge-cyan` | `badge-chart-6` (the designer's mapping) |
+| `badge-strong-yellow` / `-orange` / `-red` | `badge-strong-chart-3` / `-chart-4` / `-chart-5` |
+| `badge-strong-slate` | `badge-strong-secondary` |
+
+- **Kept names, new look**: `badge-primary` (was a primary-100 pill with a primary-300 edge, now the
+  design's green status pill), `badge-info`, `badge-destructive` (now red text on red-100).
+- A removed class emits nothing, silently: the badge falls back to the neutral one. Search the
+  templates — `[class.badge-…]` bindings and class maps in TypeScript included.
+
 ## Upgrading to 2.2.0
 
 Two classes added, nothing changes for existing screens: **`.badge-success`** and

package/components.css

@@ -15,13 +15,9 @@
    their own tokens rather than an opacity, because in dark the primary
    background is LIGHT: its hover has to lighten, where in light it darkens.
 
-   The `.badge` family, on the other hand, keeps its raw hues, and that is
-   deliberate: `badge-purple` is purple by definition, not by role. Its pills are
-   light backgrounds with dark text, which stays readable on a dark interface.
-   The two neutral badges are the exception since 2.1.0: the default `.badge`
-   (the design's "secondary / light") and `.badge-strong-slate` ("secondary /
-   strong") are written in `neutral` / `neutral-foreground`, two roles that keep
-   the same value in both themes.
+   The `.badge` family follows the Badge of the Figma library since 3.0.0 — see
+   its block below: status pairs and data colours, which keep one value in both
+   themes, so a badge reads the same on a dark interface.
 
    `.badge` takes gaffer's variant, the only one actually in use — 38 usages. The
    discarded variant carried `dark:` classes which would not have responded to
@@ -94,8 +90,20 @@
     }
   }
 
+  /* 3.0.0: the Badge of the Figma library (« Skillcorner webapp - Library », node 620:965), read
+     variant by variant on 2026-10-06. Two sizes, two styles, eleven variants, under the Figma's
+     own names:
+     - default 20 px (`px-2 py-0.5`, 12/16), `.badge-lg` 32 px (`px-3 py-1.5`, 14/20, `gap-1`);
+     - `.badge-<variant>` is the light style, `.badge-strong-<variant>` the strong one; `.badge`
+       alone is secondary light, the neutral badge;
+     - NO border but on outline. Up to 2.2.0 every badge carried a transparent one, so the
+       borderless badges stood 22 px high where the design draws 20, and the palette variants
+       (`-green`, `-purple`… on a -100 ground with a -300 edge) were gaffer's former local style,
+       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. */
   .badge {
-    @apply inline-flex items-center justify-center gap-0.5 rounded-lg border border-transparent 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-neutral-foreground 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
@@ -108,39 +116,24 @@
       color: inherit;
     }
 
-    /* The colored variants keep their slate-950 text: only the two neutral badges
-       moved to `neutral` in 2.1.0. */
-    &:is(
-      .badge-white,
-      .badge-primary,
-      .badge-green,
-      .badge-yellow,
-      .badge-orange,
-      .badge-destructive,
-      .badge-blue,
-      .badge-purple,
-      .badge-pink,
-      .badge-cyan,
-      .badge-strong-yellow,
-      .badge-strong-orange,
-      .badge-strong-red
-    ) {
-      @apply text-slate-950;
+    &.badge-lg {
+      @apply gap-1 px-3 py-1.5 text-sm leading-5;
     }
 
-    /* `bg-white` and not `bg-card`: the card role turns dark in the dark theme, while
-       the badge text stays slate-950. The border keeps it visible on a white card. */
-    &.badge-white {
-      @apply border-border-color bg-white;
-    }
+    /* Outline: the only bordered badge. Its 1 px edge is taken out of the vertical padding, so
+       it stays 20 px (32 px large) like the others — the Figma draws the stroke inside. It sits
+       on the theme's surfaces, unlike the others: a control ground with the foreground text. */
+    &.badge-outline {
+      @apply border border-border-color bg-control text-foreground py-px;
 
-    &.badge-primary {
-      @apply border-primary-300 bg-primary-100;
+      &.badge-lg {
+        @apply py-[5px];
+      }
     }
 
-    /* 2.2.0: the design's count badges (Filters, Columns, the metric groups) — a status pair, so
-       the same light pill in both themes, its text in the status colour rather than slate-950. */
-    &.badge-success {
+    /* Light: the status pair, its pale ground with the status colour as text. The pairs keep
+       their light values in dark (tokens 2.0.0), so the badge reads the same in both themes. */
+    &.badge-primary {
       @apply bg-success-foreground text-success;
     }
 
@@ -148,53 +141,96 @@
       @apply bg-info-foreground text-info;
     }
 
-    &.badge-green {
-      @apply border-green-300 bg-green-100;
+    &.badge-warning {
+      @apply bg-warning-foreground text-warning;
     }
 
-    &.badge-yellow {
-      @apply border-yellow-300 bg-yellow-100;
+    &.badge-destructive {
+      @apply bg-destructive-foreground text-destructive;
     }
 
-    &.badge-orange {
-      @apply border-orange-300 bg-orange-100;
+    /* Strong: the same pairs inverted. Primary takes the primary surface and its foreground,
+       which both move in dark (green-400 under slate-950 text), so it stays readable there. */
+    &.badge-strong-primary {
+      @apply bg-primary text-primary-foreground;
     }
 
-    &.badge-destructive {
-      @apply border-red-300 bg-red-100;
+    /* The Figma binds strong secondary to slate-800 under slate-200, through variables that turn
+       dark in the dark theme (`track` would vanish on its own ground). Written as palette
+       values, like every badge, it keeps one look in both. */
+    &.badge-strong-secondary {
+      @apply bg-slate-800 text-slate-200;
+    }
+
+    &.badge-strong-info {
+      @apply bg-info text-info-foreground;
+    }
+
+    &.badge-strong-warning {
+      @apply bg-warning text-warning-foreground;
+    }
+
+    &.badge-strong-destructive {
+      @apply bg-destructive text-destructive-foreground;
+    }
+
+    /* Chart: the data colours, for a category rather than a status — a hue that tells one
+       value from another. Light on the `-foreground` shade, strong on the `-accent` one, both
+       under `data-foreground`, the text the percentile surfaces already use. No chart-2: the
+       Figma has none. */
+    &:is(
+      .badge-chart-1,
+      .badge-chart-3,
+      .badge-chart-4,
+      .badge-chart-5,
+      .badge-chart-6,
+      .badge-strong-chart-1,
+      .badge-strong-chart-3,
+      .badge-strong-chart-4,
+      .badge-strong-chart-5,
+      .badge-strong-chart-6
+    ) {
+      @apply text-data-foreground;
+    }
+
+    &.badge-chart-1 {
+      @apply bg-chart-1-foreground;
+    }
+
+    &.badge-chart-3 {
+      @apply bg-chart-3-foreground;
     }
 
-    &.badge-blue {
-      @apply border-blue-300 bg-blue-100;
+    &.badge-chart-4 {
+      @apply bg-chart-4-foreground;
     }
 
-    &.badge-purple {
-      @apply border-purple-300 bg-purple-100;
+    &.badge-chart-5 {
+      @apply bg-chart-5-foreground;
     }
 
-    &.badge-pink {
-      @apply border-pink-300 bg-pink-100;
+    &.badge-chart-6 {
+      @apply bg-chart-6-foreground;
     }
 
-    &.badge-cyan {
-      @apply border-cyan-300 bg-cyan-100;
+    &.badge-strong-chart-1 {
+      @apply bg-chart-1-accent;
     }
 
-    &.badge-strong-yellow {
-      @apply bg-yellow-300;
+    &.badge-strong-chart-3 {
+      @apply bg-chart-3-accent;
     }
 
-    &.badge-strong-orange {
-      @apply bg-orange-300;
+    &.badge-strong-chart-4 {
+      @apply bg-chart-4-accent;
     }
 
-    &.badge-strong-red {
-      @apply bg-red-300;
+    &.badge-strong-chart-5 {
+      @apply bg-chart-5-accent;
     }
 
-    /* The design's "secondary / strong": the default badge inverted. */
-    &.badge-strong-slate {
-      @apply bg-neutral text-neutral-foreground;
+    &.badge-strong-chart-6 {
+      @apply bg-chart-6-accent;
     }
   }
 

package/package.json

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