skcr-design-tokens 2.1.0 → 2.2.0

package/README.md

@@ -62,6 +62,26 @@ 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 2.2.0
+
+Two classes added, nothing changes for existing screens: **`.badge-success`** and
+**`.badge-info`**, the design's count badges (« Filters 2 », « Columns 7 », the selected metrics of
+a group). A status pair — `success-foreground` / `success`, `info-foreground` / `info` — so the
+same light pill in both themes, its text in the status colour. They replace the pills the
+applications wrote by hand (`px-2 py-0.5 rounded-lg bg-success-foreground text-success`).
+
+## Upgrading to 2.1.1
+
+One rendering change, aligned on the design's screens: `.btn` takes `shadow-xs` instead of
+`shadow-sm`. The comments of `field`, `control`, `track`, `elevated` and `scrim` follow
+`skcr-autechre` 5.3.3, which stops using `field` and `elevated`: fields, wells and the active tab
+move to `card`, the switch thumb to `control`.
+
+`display.css` follows the same screens: `.input` on `card` (disabled on `background`); `.switch`
+rail on `border-color`, thumb on `control` in both states; `.segmented` and `.chip` on `control`,
+like the design's toggles; `.modal-backdrop` at 15 % with a blur, `.modal-panel` on `popover` with
+`shadow-lg`.
+
 ## Upgrading to 2.1.0
 
 The two neutral badges follow the design's "secondary" badge (2026-10-01). No class is added or
@@ -140,7 +160,7 @@ Three categories do not move up here, deliberately:
 A distinction to know before writing a class, because ignoring it produces a
 defect that is invisible in the light theme.
 
-A **zone** token describes a surface: `card`, `popover`, `muted`, `track`, `field` (the well of a control), `control` (a table set on a card). A
+A **zone** token describes a surface: `card`, `popover`, `muted`, `track`, `field` (the former well of a control, unused by the library since 5.3.3), `control` (raised one notch above the card in dark: tables, the switch thumb, toggles — fields, wells and buttons stay on `card`). A
 **state** token describes what happens to a surface when you interact with it:
 `hover` for hovering, `primary-subtle` for selection, `disabled`.
 

package/components.css

@@ -49,7 +49,7 @@
   }
 
   .btn {
-    @apply rounded-md leading-5 shadow-sm items-center flex gap-1 justify-center py-2 px-3 max-w-sm text-body-small outline-1 -outline-offset-1 outline-border-color focus:outline-2 focus:-outline-offset-2 font-medium relative overflow-hidden z-0 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50;
+    @apply rounded-md leading-5 shadow-xs items-center flex gap-1 justify-center py-2 px-3 max-w-sm text-body-small outline-1 -outline-offset-1 outline-border-color focus:outline-2 focus:-outline-offset-2 font-medium relative overflow-hidden z-0 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50;
 
     &.btn-large {
       @apply px-4 py-2.5;
@@ -79,6 +79,8 @@
       @apply bg-primary text-primary-foreground hover:bg-primary-hover focus:outline-primary;
     }
 
+    /* `card`, like the outline buttons of the design's screens (slate-900 in dark): the button
+       sits at the level of its card and stands out by its border. */
     &.btn-neutral {
       @apply bg-card hover:bg-hover;
     }
@@ -136,6 +138,16 @@
       @apply border-primary-300 bg-primary-100;
     }
 
+    /* 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 {
+      @apply bg-success-foreground text-success;
+    }
+
+    &.badge-info {
+      @apply bg-info-foreground text-info;
+    }
+
     &.badge-green {
       @apply border-green-300 bg-green-100;
     }

package/display.css

@@ -288,7 +288,7 @@
   /* The chip FILTERS (round, clickable, active state); the core `.badge`
      QUALIFIES (status, non-interactive). Two objects, two classes. */
   .chip {
-    @apply inline-flex items-center gap-1.5 rounded-full border border-border-color bg-card px-2.5 py-0.5 text-caption font-medium text-foreground cursor-pointer hover:bg-hover;
+    @apply inline-flex items-center gap-1.5 rounded-full border border-border-color bg-control px-2.5 py-0.5 text-caption font-medium text-foreground cursor-pointer hover:bg-hover;
 
     &.active {
       @apply bg-primary-subtle text-primary-subtle-foreground border-transparent;
@@ -314,20 +314,20 @@
     @apply block text-caption text-muted-foreground mt-1;
   }
 
-  /* Vanilla input field. A well takes `field`, its border takes `input`.
-     Angular projects prefer `skcr-input`. */
+  /* Vanilla input field: `card` like `skcr-input` since 5.3.3, border `input`, disabled on
+     `background`. Angular projects prefer `skcr-input`. */
   .input {
-    @apply block w-full rounded-md border border-input bg-field text-foreground px-3 py-2 text-body-small placeholder:text-muted-foreground focus:outline-2 focus:-outline-offset-1 focus:outline-primary disabled:bg-disabled disabled:cursor-not-allowed;
+    @apply block w-full rounded-md border border-input bg-card text-foreground px-3 py-2 text-body-small placeholder:text-muted-foreground focus:outline-2 focus:-outline-offset-1 focus:outline-primary disabled:bg-background disabled:cursor-not-allowed;
   }
 
   .input-sm {
     @apply px-2 py-1 text-caption;
   }
 
-  /* Switch with a hidden checkbox: the state is `:checked`, the rail takes
-     `track`, the thumb `elevated` — the two tokens made for that. */
+  /* Switch with a hidden checkbox: the state is `:checked`. Rail `border-color` when off, thumb
+     `control` in both states — the values of the design and of `skcr-checkbox`. */
   .switch {
-    @apply relative inline-flex w-10 h-[22px] rounded-full bg-track border border-border-color cursor-pointer align-middle;
+    @apply relative inline-flex w-10 h-[22px] rounded-full bg-border-color border border-border-color cursor-pointer align-middle;
 
     & input {
       @apply absolute inset-0 opacity-0 m-0 cursor-pointer;
@@ -343,11 +343,11 @@
   }
 
   .switch-thumb {
-    @apply absolute top-0.5 left-0.5 size-4 rounded-full bg-elevated shadow transition-transform motion-reduce:transition-none;
+    @apply absolute top-0.5 left-0.5 size-4 rounded-full bg-control shadow transition-transform motion-reduce:transition-none;
   }
 
   .switch input:checked ~ .switch-thumb {
-    @apply translate-x-[18px] bg-primary-foreground;
+    @apply translate-x-[18px];
   }
 
   /* Compact exclusive choice. The application puts `.active` or
@@ -356,7 +356,7 @@
     @apply inline-flex rounded-md border border-border-color overflow-hidden text-caption;
 
     & > * {
-      @apply px-3 py-1.5 bg-card text-muted-foreground border-l border-border-color first:border-l-0 cursor-pointer hover:bg-hover hover:text-foreground;
+      @apply px-3 py-1.5 bg-control text-muted-foreground border-l border-border-color first:border-l-0 cursor-pointer hover:bg-hover hover:text-foreground;
     }
 
     & > .active,
@@ -516,11 +516,11 @@
      themes. Opening and closing stay with the JS — or with the native
      `<dialog>`, which nothing stops you from dressing with these classes. */
   .modal-backdrop {
-    @apply fixed inset-0 z-50 flex items-center justify-center bg-scrim/60 p-4;
+    @apply fixed inset-0 z-50 flex items-center justify-center bg-scrim/15 backdrop-blur-xs p-4;
   }
 
   .modal-panel {
-    @apply flex flex-col w-full max-w-lg max-h-[90vh] rounded-lg border border-border-color bg-card text-card-foreground shadow-xl;
+    @apply flex flex-col w-full max-w-lg max-h-[90vh] rounded-lg border border-border-color bg-popover text-popover-foreground shadow-lg;
   }
 
   .modal-header {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "skcr-design-tokens",
-  "version": "2.1.0",
+  "version": "2.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

@@ -81,25 +81,25 @@
   /* Background of a disabled control. Distinct from `muted`, which is a zone
      background: the two values are close in light but diverge in dark. */
   --color-disabled: theme(colors.slate.50);
-  /* Well of a control: circle of an unchecked radio, box of a checkbox, field
-     background of a picker. Was worth `background` as long as the page background was
-     white; since `background` carries the page grey, the well has its own token. */
+  /* Well of a control. No longer used by the library since 5.3.3: the radio, the checkbox and the
+     fields moved to `card`, the value of the design's screens (slate-900 in dark, where `field`
+     painted them near black). Kept for the applications that write it. */
   --color-field: theme(colors.white);
-  /* Surface of a table SET ON a card: header, rows, fixed columns. White like the card in
-     light; one notch above the card in dark, where the design raises tables off the
-     surface that carries them. The design paints tables and fields with this surface; it
-     is not for buttons, which sit at the level of their surface and stand out by their
-     border. */
+  /* Surface raised one notch above the card in dark (slate-800 on slate-900): tables (header,
+     rows, fixed columns), the switch thumb, `display.css`'s `.chip` and `.segmented`. White like
+     the card in light. Fields, wells, the active tab and `.btn-neutral` are NOT on it: on the
+     design's screens they keep the card value and stand out by their border — a field on a card
+     has the card's background (1.00) and only its `input` edge (1.72 against it in dark); in a
+     modal (`popover`, slate-800) it reads as a darker well (1.22), edge included. */
   --color-control: theme(colors.white);
-  /* Track background: tab container, unselected tab, rail of a switch. One notch
-     stronger than `muted`, which is a zone background. */
+  /* Track background: tab container, unselected tab. One notch stronger than `muted`, which
+     is a zone background. The rail of an unchecked switch takes `border-color`, as in the
+     design. Known shortfall in dark: the active tab (`card`, slate-900) reads at 1.22 against it,
+     the value of the design's screens; its label and a `shadow-xs` carry the rest. */
   --color-track: theme(colors.slate.200);
-  /* Raised surface: what is SET ON another surface — active tab on its track, switch
-     thumb on its rail, dot of a checked radio button on its primary background. To be
-     told apart from a WELL, which takes `field`: the circle of an unchecked radio, the
-     background of a field. In light it is white, like the page background; in dark it
-     is darker than its track (slate-950 on slate-800), the value of the design: the active
-     segment reads as pressed in rather than raised. Known shortfall: 1.38 against the track. */
+  /* No longer used by the library's components since 5.3.3: the active tab moved to `card`, the
+     switch thumb to `control`, the checked radio to a primary dot. The design keeps the token
+     (text on primary); it stays for the applications that write it. */
   --color-elevated: theme(colors.white);
   /* A STATE surface, not a zone one: the hover, and the option highlighted from the
      keyboard. It has its own token because its direction flips with the theme —
@@ -108,7 +108,8 @@
      `hover:bg-muted` was strictly invisible there. */
   --color-hover: theme(colors.slate.100);
   /* Modal scrim. The only token that does not invert: slate-500 in both themes, applied at
-     75 % opacity and blurred by `skcr-dialog`. */
+     15 % opacity and blurred by `skcr-dialog` — the weight of the design's screens (a 15 %
+     veil), where 75 % darkened the page far more. */
   --color-scrim: theme(colors.slate.500);
 
   /* Status colors */