@rojaostudio/ds 2.0.0-next.16 → 2.0.0-next.18

package/styles/rds/components-styles.css

@@ -554,7 +554,7 @@
   line-height: var(--type-body-line);
 }
 
-.rds-avatar--brand.rds-avatar--default {
+.rds-avatar--brand.rds-avatar--md {
   font-size: var(--type-body-size);
   line-height: var(--type-body-line);
 }
@@ -665,8 +665,8 @@
   --_background: var(--badge-accent-fill-background);
   --_label: var(--badge-accent-fill-label);
 }
-/* The brand's highlighter: the one badge that reads as a marker. */
-.rds-badge--accent-highlight {
+/* accent soft: the brand's highlighter, the one badge that reads as a marker (the old `highlight`). */
+.rds-badge--accent-soft {
   --_background: var(--badge-accent-highlight-background);
   --_label: var(--badge-accent-highlight-label);
 }
@@ -1156,27 +1156,30 @@ button.rds-breadcrumb__link:focus-visible {
   --_text: var(--bubble-fill-text);
 }
 
-.rds-bubble--muted {
+/* soft + neutral (the old `muted`): the one answering. */
+.rds-bubble--soft {
   --_background: var(--bubble-muted-background);
   --_text: var(--bubble-muted-text);
 }
 
-.rds-bubble--tinted {
+/* soft + action (the old `tinted`): the one answering, on the brand tint. */
+.rds-bubble--soft.rds-bubble--action {
   --_background: var(--bubble-tinted-background);
   --_text: var(--bubble-tinted-text);
 }
 
+/* soft + danger (the old `error`): it was not sent. */
+.rds-bubble--soft.rds-bubble--danger {
+  --_background: var(--bubble-error-background);
+  --_text: var(--bubble-error-text);
+}
+
 .rds-bubble--outline {
   --_background: var(--bubble-outline-background);
   --_text: var(--bubble-outline-text);
   border-color: var(--bubble-outline-border);
 }
 
-.rds-bubble--error {
-  --_background: var(--bubble-error-background);
-  --_text: var(--bubble-error-text);
-}
-
 .rds-bubble--ghost {
   --_background: transparent;
   --_text: var(--bubble-ghost-text);
@@ -1749,12 +1752,12 @@ button.rds-breadcrumb__link:focus-visible {
 /* components/card.css */
 /* @tokens card */
 /*
- * Card (Content collection, card/*): header, content and footer. default pads 24, sm pads 16; 24 between the
- * header, the content and the actions (sm: 16). Corners in radius/container.
- *   default: card/background, a card/border hairline and elevation/raised.
+ * Card (Content collection, card/*): header, content and footer. md pads 24, sm pads 16; 24 between the
+ * header, the content and the actions (sm: 16). Corners in radius/container. The Figma `variant`:
+ *   surface: card/background, a card/border hairline and elevation/raised (the default).
  *   outline: only the hairline, no fill, no shadow; it takes the surface underneath (cards side by side in a grid,
  *            inside a panel or a list, where stacked shadows turn into noise).
- *   tint:    the brand's light plate (card/tint/background), no border, no shadow, title in card/tint/title.
+ *   soft:    the brand's light plate (card/tint/background), no border, no shadow, title in card/tint/title.
  * The footer has no band and no rule: the actions sit side by side, the main one last (on the right). The
  * card/footer/background tokens are obsolete in Figma (03/10/2026) and not read here.
  */
@@ -1782,7 +1785,7 @@ button.rds-breadcrumb__link:focus-visible {
   box-shadow: none;
 }
 
-.rds-card--tint {
+.rds-card--soft {
   --_title: var(--card-tint-title);
 
   border-color: transparent;
@@ -3582,10 +3585,17 @@ input:focus-visible + .rds-checkbox__box {
  * DataTableHeader: no tokens of its own; the Input, FilterChip, Chip, Button, Separator, Checkbox, DropdownMenu,
  * Popover and Drawer bring theirs. One row, 8 apart, 12 above the table, packed to the right: the search on the left
  * takes the free width, at least 320 (never wider than the bar); the quick filters, the filters, the view control
- * and the actions follow it on the right, and what does not fit wraps. The wide parts show from 768, the narrow ones
- * below it. In the Popover and the Drawer the filters stack 16 apart, each one a caption-sized label over its chips.
+ * and the actions follow it on the right, and what does not fit wraps.
+ * Two arrangements, by the bar's own width (a size container, as the Figma's viewport mode; the SavingBar's cut):
+ * expanded from 1024 (the __wide parts: Separator, Buttons with labels); compact below it (the __narrow parts: the
+ * filter as an IconButton of 44), where the search accepts 200. On the IconButton, while a filter is on, a dot of 8
+ * (badge neutral fill, 6 in from the top right corner) or a neutral number Badge over the corner (-6 top, -12 right).
+ * In the Popover and the Drawer the filters stack 16 apart, each one a caption-sized label over its chips.
  */
 .rds-data-table-header {
+  box-sizing: border-box;
+  container-type: inline-size;
+  width: 100%;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -3611,17 +3621,55 @@ input:focus-visible + .rds-checkbox__box {
   gap: var(--space-8);
 }
 
-.rds-data-table-header__wide {
+.rds-data-table-header__narrow {
   display: none;
 }
 
-@media (min-width: 768px) {
+@container (max-width: 1023px) {
   .rds-data-table-header__wide {
-    display: flex;
+    display: none;
   }
 
   .rds-data-table-header__narrow {
-    display: none;
+    display: flex;
+  }
+
+  /* Compact: the search accepts 200 (40 × 5), so it sits on one line with the filter and an IconButton at 390. */
+  .rds-data-table-header .rds-data-table-header__search {
+    flex-basis: calc(var(--space-40) * 5);
+    min-width: min(calc(var(--space-40) * 5), 100%);
+  }
+}
+
+/* The compact filter: the IconButton with its indicator on the corner. */
+.rds-data-table-header__trigger {
+  position: relative;
+  display: inline-flex;
+}
+
+.rds-data-table-header__dot,
+.rds-data-table-header__count {
+  position: absolute;
+  pointer-events: none;
+}
+
+.rds-data-table-header__dot {
+  top: calc(var(--space-4) * 1.5);
+  right: calc(var(--space-4) * 1.5);
+  width: var(--space-8);
+  height: var(--space-8);
+  border-radius: var(--radius-full);
+  background: var(--badge-neutral-fill-background);
+}
+
+.rds-data-table-header__count {
+  top: calc(var(--space-4) * -1.5);
+  right: calc(var(--space-12) * -1);
+}
+
+@media (forced-colors: active) {
+  .rds-data-table-header__dot {
+    background: CanvasText;
   }
 }
 
@@ -4340,14 +4388,14 @@ input:focus-visible + .rds-checkbox__box {
 }
 
 @media (hover: hover) {
-  .rds-filter-chip:not(.rds-filter-chip--active, [aria-disabled='true']):hover {
+  .rds-filter-chip:not(.rds-filter-chip--pressed, [aria-disabled='true']):hover {
     --_surface: var(--filter-chip-surface-hover);
     --_stroke: var(--filter-chip-stroke-hover);
     --_text: var(--filter-chip-text-hover);
   }
 }
 
-.rds-filter-chip--active {
+.rds-filter-chip--pressed {
   --_surface: color-mix(in srgb, var(--filter-chip-surface-active) 12%, transparent);
   --_stroke: var(--filter-chip-stroke-active);
   --_text: var(--filter-chip-text-active);
@@ -4395,7 +4443,7 @@ input:focus-visible + .rds-checkbox__box {
     border-color: CanvasText;
   }
 
-  .rds-filter-chip--active {
+  .rds-filter-chip--pressed {
     border-color: Highlight;
     outline: var(--border-width) solid Highlight;
   }
@@ -6562,7 +6610,7 @@ body:has(.rds-modal) {
 /* components/item.css */
 /* @tokens item */
 /*
- * Item (Content collection, item/*): one list row, at least 44 tall. default pads 12 16, gap 16; sm pads 8 12,
+ * Item (Content collection, item/*): one list row, at least 44 tall. md pads 12 16, gap 16; sm pads 8 12,
  * gap 12. Corners in radius/container. Title in label (16/24 medium), description in small (14/20); sm one step down.
  */
 .rds-item-group {
@@ -6574,11 +6622,11 @@ body:has(.rds-modal) {
   list-style: none;
 }
 
-.rds-item-group:has(> .rds-item--default) {
+.rds-item-group:has(> .rds-item--ghost) {
   gap: 0;
 }
 
-.rds-item-group > .rds-item--default + .rds-item--default {
+.rds-item-group > .rds-item--ghost + .rds-item--ghost {
   border-top: var(--border-width) solid var(--item-border);
 }
 
@@ -6604,7 +6652,7 @@ body:has(.rds-modal) {
   --_gap: var(--space-12);
 }
 
-.rds-item--default {
+.rds-item--ghost {
   padding: var(--_pad-y) var(--_pad-x);
   border-width: 0;
   border-radius: 0;
@@ -6614,7 +6662,7 @@ body:has(.rds-modal) {
   border-color: var(--item-border);
 }
 
-.rds-item--muted {
+.rds-item--soft {
   background: var(--item-muted-background);
 }
 
@@ -6660,7 +6708,7 @@ body:has(.rds-modal) {
 
 @media (forced-colors: active) {
   .rds-item--outline,
-  .rds-item--muted {
+  .rds-item--soft {
     border-color: CanvasText;
   }
 }
@@ -8849,7 +8897,8 @@ input:focus-visible + .rds-radio__circle {
  * sidebar/item/label/active and a 3 × 20 marker on the left in sidebar/item/indicator, so the current entry does not
  * rest on colour alone.
  * Section labels 11/14 bold, 16 above and 6 below, with a 14 chevron. Foot: who is signed in (12/16) and Sair.
- * dark (deprecated in the Figma) reads sidebar/dark/*; the current entry stays the light pill.
+ * No tone: the Sidebar follows its container's mode. The brand-coloured bar is a `.ds-plate` around it (the brand
+ * mode), the dark one a `.dark`.
  */
 .rds-sidebar {
   --_background: var(--sidebar-background);
@@ -8875,21 +8924,6 @@ input:focus-visible + .rds-radio__circle {
   font-family: var(--type-font-stack);
 }
 
-.rds-sidebar--dark {
-  --_background: var(--sidebar-dark-background);
-  --_label: var(--sidebar-dark-item-label-default);
-  --_label-hover: var(--sidebar-dark-item-label-hover);
-  --_hover: var(--sidebar-dark-item-background-hover);
-  --_module: var(--sidebar-dark-module);
-  --_user: var(--sidebar-dark-user);
-  --_section: var(--sidebar-dark-section-label);
-  --_count: var(--sidebar-dark-item-label-default);
-  /* No dark ring token: the strongest text over the brand, which is what the ring needs to show there. */
-  --_ring: var(--sidebar-dark-module);
-
-  border-right-color: transparent;
-}
-
 .rds-sidebar--collapsed {
   width: var(--space-64);
 }
@@ -9492,6 +9526,7 @@ input:focus-visible + .rds-radio__circle {
 /*
  * Stat (Content collection, stat/*): 8 between the text and the sparkline. Text: the label 14/20, the row (the
  * value in type/value bold and the Delta, 8 apart, wrapping 4 below) and the caption 12/16, 4 apart.
+ * tone neutral (default), success, danger, warning; muted greys a zero out.
  * framed=true: 16 inside, a 1px border, corners radius/container. framed=false (the SummaryBar cell): 12 16, no border.
  */
 .rds-stat {
@@ -9513,11 +9548,11 @@ input:focus-visible + .rds-radio__circle {
   border-radius: var(--radius-container);
 }
 
-.rds-stat--positive {
+.rds-stat--success {
   --_value: var(--stat-value-positive);
 }
 
-.rds-stat--negative {
+.rds-stat--danger {
   --_value: var(--stat-value-negative);
 }
 
@@ -9525,6 +9560,7 @@ input:focus-visible + .rds-radio__circle {
   --_value: var(--stat-value-warning);
 }
 
+/* muted (zero, nothing to see) wins over the tone: the Figma draws it only on neutral. */
 .rds-stat--muted {
   --_value: var(--stat-value-muted);
 }

package/styles/rds/components.css

@@ -255,11 +255,9 @@
   --tile-danger-soft-icon: var(--text-error);
   --card-background: var(--surface-card);
   --card-border: var(--border-default);
-  --card-footer-background: var(--surface-panel);
   --card-title: var(--text-heading);
   --card-description: var(--text-muted);
   --card-tint-background: var(--surface-tint-default);
-  --card-tint-footer-background: var(--surface-tint-strong);
   --kbd-background: var(--surface-muted);
   --kbd-border: var(--border-default);
   --kbd-label: var(--text-body);
@@ -951,12 +949,6 @@
   --pagination-item-label-disabled: var(--text-disabled);
   --pagination-summary: var(--text-muted);
   --sidebar-item-count: var(--text-muted);
-  --sidebar-dark-background: var(--colors-primary-default);
-  --sidebar-dark-item-background-hover: var(--colors-primary-light);
-  --sidebar-dark-item-label-default: var(--text-on-primary);
-  --sidebar-dark-item-label-hover: var(--text-on-primary-strong);
-  --sidebar-dark-module: var(--text-on-primary-strong);
-  --sidebar-dark-user: var(--text-on-primary);
   --breadcrumb-inverse-label-default: var(--text-on-primary);
   --breadcrumb-inverse-label-hover: var(--text-on-primary-strong);
   --breadcrumb-inverse-label-current: var(--text-on-primary-strong);
@@ -977,7 +969,6 @@
   --tabs-dot-background: var(--colors-state-success);
   --tabs-dot-indicator: var(--colors-state-success);
   --sidebar-section-label: var(--text-subtle);
-  --sidebar-dark-section-label: var(--text-on-primary);
   --sidebar-item-indicator: var(--colors-primary-default);
 
   /* overlays */