@rojaostudio/ds 2.0.0-next.15 → 2.0.0-next.17

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;
@@ -2677,10 +2680,10 @@ input:focus-visible + .rds-checkbox__box {
  * an 8 dot. Selected fills the card with the brand. Disabled is the same card at half opacity (as in Figma).
  * tile: a grid cell, 16 inside, centred: the icon, then the label 14/20 semibold and the description 12/16 (8 below
  * the icon). Selected fills it with the brand, the icon square at 10% of choice-card/icon/background/selected, the
- * description at 70%, and a 16 check (11 glyph) 8 from the top right corner.
+ * description at full opacity, and a 16 check (11 glyph) 8 from the top right corner.
  * preview: 8 inside, the picture on top (16:9, a 1px border, corners radius/container, a 24 placeholder icon), then
  * the label 16/24 semibold and the description 14/20, 4 in from the sides. Selected keeps the surface: a 2px border
- * in the brand, the description at 70% and a 20 check (12 glyph) in the picture's bottom right corner.
+ * in the brand, the description at full opacity and a 20 check (12 glyph) in the picture's bottom right corner.
  * The group stacks rows 8 apart; tiles and previews go in a grid (cells of at least 160 and 240), 8 apart.
  */
 .rds-choice-card-group {
@@ -2872,11 +2875,6 @@ input:focus-visible + .rds-checkbox__box {
   color: var(--choice-card-icon-color-selected);
 }
 
-.rds-choice-card--tile.rds-choice-card--selected .rds-choice-card__description,
-.rds-choice-card--preview.rds-choice-card--selected .rds-choice-card__description {
-  color: color-mix(in srgb, var(--_description) 70%, transparent);
-}
-
 .rds-choice-card--tile .rds-choice-card__check {
   position: absolute;
   top: calc(var(--space-8) - var(--border-width));
@@ -4301,7 +4299,7 @@ input:focus-visible + .rds-checkbox__box {
  * FilterChip (Forms collection, filter-chip/*): 32 tall, pill, 12 inside, 4 between icon, label and count;
  * label 14/20 medium. inactive: card fill and a hairline; hover: muted fill, strong hairline; active: the brand
  * at 12% over what is behind, brand border and label; disabled: the whole chip at 50%, the label at 40%.
- * The count reads at 60% of the label. Icon 14, in the label's colour.
+ * The count reads in the label's colour, at full opacity. Icon 14, in the label's colour.
  */
 .rds-filter-chip-group {
   display: flex;
@@ -4345,14 +4343,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);
@@ -4392,7 +4390,6 @@ input:focus-visible + .rds-checkbox__box {
 }
 
 .rds-filter-chip__count {
-  color: color-mix(in srgb, currentColor 60%, transparent);
   font-variant-numeric: tabular-nums;
 }
 
@@ -4401,7 +4398,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;
   }
@@ -6568,7 +6565,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 {
@@ -6580,11 +6577,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);
 }
 
@@ -6610,7 +6607,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;
@@ -6620,7 +6617,7 @@ body:has(.rds-modal) {
   border-color: var(--item-border);
 }
 
-.rds-item--muted {
+.rds-item--soft {
   background: var(--item-muted-background);
 }
 
@@ -6666,7 +6663,7 @@ body:has(.rds-modal) {
 
 @media (forced-colors: active) {
   .rds-item--outline,
-  .rds-item--muted {
+  .rds-item--soft {
     border-color: CanvasText;
   }
 }
@@ -8855,7 +8852,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);
@@ -8881,21 +8879,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);
 }
@@ -9498,6 +9481,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 {
@@ -9519,11 +9503,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);
 }
 
@@ -9531,6 +9515,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

@@ -183,7 +183,7 @@
   /* chat */
   --attachment-background: var(--surface-card);
   --attachment-border: var(--border-default);
-  --attachment-border-error: var(--colors-state-error);
+  --attachment-border-error: var(--border-error);
   --attachment-description: var(--text-muted);
   --attachment-error: var(--text-error);
   --attachment-media: var(--surface-muted);
@@ -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);
@@ -551,7 +549,7 @@
   --input-border-default: var(--border-strong);
   --input-border-hover: var(--border-strong-hover);
   --input-border-focus: var(--focus-ring);
-  --input-border-error: var(--colors-state-error);
+  --input-border-error: var(--border-error);
   --input-border-disabled: var(--border-default);
   --input-value-default: var(--text-body);
   --input-value-disabled: var(--text-disabled);
@@ -580,7 +578,7 @@
   --textarea-border-default: var(--border-strong);
   --textarea-border-hover: var(--border-strong-hover);
   --textarea-border-focus: var(--focus-ring);
-  --textarea-border-error: var(--colors-state-error);
+  --textarea-border-error: var(--border-error);
   --textarea-border-disabled: var(--border-default);
   --textarea-value-default: var(--text-body);
   --textarea-value-disabled: var(--text-disabled);
@@ -601,7 +599,7 @@
   --select-border-default: var(--border-strong);
   --select-border-hover: var(--border-strong-hover);
   --select-border-focus: var(--focus-ring);
-  --select-border-error: var(--colors-state-error);
+  --select-border-error: var(--border-error);
   --select-border-disabled: var(--border-default);
   --select-value-default: var(--text-body);
   --select-value-disabled: var(--text-disabled);
@@ -629,7 +627,7 @@
   --checkbox-control-background-checked-disabled: var(--text-disabled);
   --checkbox-control-border-default: var(--border-strong);
   --checkbox-control-border-hover: var(--border-strong-hover);
-  --checkbox-control-border-error: var(--colors-state-error);
+  --checkbox-control-border-error: var(--border-error);
   --checkbox-control-border-disabled: var(--border-default);
   --checkbox-control-mark: var(--text-on-secondary);
   --checkbox-control-mark-disabled: var(--surface-card);
@@ -650,7 +648,7 @@
   --radio-control-background-checked-disabled: var(--text-disabled);
   --radio-control-border-default: var(--border-strong);
   --radio-control-border-hover: var(--border-strong-hover);
-  --radio-control-border-error: var(--colors-state-error);
+  --radio-control-border-error: var(--border-error);
   --radio-control-border-disabled: var(--border-default);
   --radio-control-dot: var(--text-on-secondary);
   --radio-control-dot-disabled: var(--surface-card);
@@ -717,7 +715,7 @@
   --otp-slot-background-disabled: var(--surface-disabled);
   --otp-slot-border-default: var(--border-strong);
   --otp-slot-border-active: var(--focus-ring);
-  --otp-slot-border-error: var(--colors-state-error);
+  --otp-slot-border-error: var(--border-error);
   --otp-slot-border-disabled: var(--border-default);
   --combobox-empty: var(--text-muted);
   --calendar-background: var(--surface-card);
@@ -749,7 +747,7 @@
   --file-input-area-border-default: var(--border-strong);
   --file-input-area-border-hover: var(--focus-ring);
   --file-input-area-border-focus: var(--focus-ring);
-  --file-input-area-border-error: var(--colors-state-error);
+  --file-input-area-border-error: var(--border-error);
   --file-input-area-border-disabled: var(--border-default);
   --file-input-area-icon-default: var(--colors-primary-default);
   --file-input-area-icon-disabled: var(--text-disabled);
@@ -772,7 +770,7 @@
   --chip-input-border-default: var(--border-strong);
   --chip-input-border-hover: var(--border-strong-hover);
   --chip-input-border-focus: var(--focus-ring);
-  --chip-input-border-error: var(--colors-state-error);
+  --chip-input-border-error: var(--border-error);
   --chip-input-border-disabled: var(--border-default);
   --chip-input-value-default: var(--text-body);
   --chip-input-value-disabled: var(--text-disabled);
@@ -791,7 +789,7 @@
   --number-input-border-default: var(--border-strong);
   --number-input-border-hover: var(--border-strong-hover);
   --number-input-border-focus: var(--focus-ring);
-  --number-input-border-error: var(--colors-state-error);
+  --number-input-border-error: var(--border-error);
   --number-input-border-disabled: var(--border-default);
   --number-input-value-default: var(--text-body);
   --number-input-value-disabled: var(--text-disabled);
@@ -812,7 +810,7 @@
   --color-input-border-default: var(--border-strong);
   --color-input-border-hover: var(--border-strong-hover);
   --color-input-border-focus: var(--focus-ring);
-  --color-input-border-error: var(--colors-state-error);
+  --color-input-border-error: var(--border-error);
   --color-input-border-disabled: var(--border-default);
   --color-input-value-default: var(--text-body);
   --color-input-value-disabled: var(--text-disabled);
@@ -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);
@@ -973,11 +965,10 @@
   --navmenu-trigger-background-open: var(--surface-muted);
   --navmenu-trigger-label: var(--text-body);
   --tabs-soon-background: var(--surface-muted);
-  --tabs-soon-text: var(--text-disabled);
+  --tabs-soon-text: var(--text-subtle);
   --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 */

package/styles/rds/theme.css

@@ -65,7 +65,7 @@
   --border-strong: #71717a;
   --border-strong-hover: #52525b;
   --colors-state-info: #2196f3;
-  --text-on-info: #ffffff;
+  --text-on-info: #000000;
   --colors-state-warning: #ff9800;
   --colors-state-warning-strong: #dc7f00;
   --text-on-warning: #000000;
@@ -80,7 +80,7 @@
   --surface-neutral: #f4f4f5;
   --text-neutral: #27272a;
   --chart-series-1: #5a6478;
-  --chart-series-2: #dc7f00;
+  --chart-series-2: #bd6a00;
   --chart-series-3: #009688;
   --chart-series-4: #bc4ad0;
   --chart-series-5: #379c3d;
@@ -104,6 +104,7 @@
   --colors-state-neutral-strong: #52525b;
   --text-on-primary-subtle: #ffffff4d;
   --surface-tint-subtle: #f4f6f9;
+  --border-error: #c50003;
   --rojao-primary: #1b2a4a;
   --rojao-secondary: #1b2a4a;
   --rojao-accent: #ff6a00;
@@ -186,6 +187,7 @@
   --colors-state-neutral-strong: #a1a1aa;
   --text-on-primary-subtle: #0000004d;
   --surface-tint-subtle: #002445;
+  --border-error: #ff6c5c;
 }
 
 .ds-plate, [data-rds-plate] {
@@ -265,5 +267,6 @@
   --colors-state-info-strong: #8cc6ff;
   --colors-state-neutral-strong: #a1a1aa;
   --surface-tint-subtle: #ffffff0d;
+  --border-error: #ffa598;
 }
 }