@rojaostudio/ds 2.0.0-next.21 → 2.0.0-next.22

package/dist/components/saving-bar.d.ts

@@ -35,10 +35,10 @@ interface SavingBarProps extends HTMLAttributes<HTMLDivElement> {
 }
 /**
  * SavingBar — Figma [RDS] Actions/SavingBar. Shows at the foot of the screen while a change is not
- * saved, and leaves once saved. It is the brand plate on purpose (.ds-plate on the bar, in every brand and in
- * light or dark alike): a state that waits for a decision, not a notice. It does not place itself: put it
- * sticky or fixed at the bottom. Its Buttons are Salvar in tone action and Descartar in tone neutral ghost, read
- * inside the plate. Styles: saving-bar.css.
+ * saved, and leaves once saved. It is the brand's primary colour (savingbar/background, colors/primary/default),
+ * in light and dark and in every brand: a state that waits for a decision, not a notice. It does not place itself:
+ * put it sticky or fixed at the bottom. Its Buttons are Salvar in tone action and Descartar in tone neutral ghost,
+ * with the bar's colours (savingbar/button/*). Styles: saving-bar.css.
  */
 declare function SavingBar({ status, message, savingMessage, errorMessage, onSave, onDiscard, saveLabel, retryLabel, discardLabel, onDetails, detailsLabel, detailsExpanded, detailsControls, className, ...rest }: SavingBarProps): react.JSX.Element;
 

package/dist/components/saving-bar.js

@@ -50,7 +50,7 @@ function SavingBar(_a) {
       role: "region",
       "aria-label": "Salvar altera\xE7\xF5es"
     }, rest), {
-      className: ["rds-savingbar", "ds-plate", className].filter(Boolean).join(" "),
+      className: ["rds-savingbar", className].filter(Boolean).join(" "),
       children: /* @__PURE__ */ jsxs("div", { className: "rds-savingbar__row", children: [
         /* @__PURE__ */ jsxs("p", { className: ["rds-savingbar__message", details && "rds-savingbar__message--details"].filter(Boolean).join(" "), role: "status", children: [
           saving && /* @__PURE__ */ jsx("span", { className: "rds-savingbar__icon rds-savingbar__loader", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Loader, {}) }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rojaostudio/ds",
-  "version": "2.0.0-next.21",
+  "version": "2.0.0-next.22",
   "type": "module",
   "description": "Rojão Design System — componentes React, estilos e alvo React Native. O motor vive em @rojaostudio/ds-core.",
   "license": "MIT",

package/styles/rds/components-styles.css

@@ -8460,10 +8460,14 @@ input:focus-visible + .rds-radio__circle {
 /* @tokens savingbar */
 /*
  * SavingBar (Actions collection, savingbar/*): full width (at least 320), 12 24 padding, 16 between the
- * message (label, medium, at most 2 lines with an ellipsis) and the actions (8 apart). The bar is the brand plate
- * (.ds-plate on the element, set by the component): savingbar/background is surface/page and savingbar/text is text/body,
- * read in the brand mode, so it comes out the same over a light or a dark page. The Buttons are tone action (Salvar)
- * and tone neutral ghost (Descartar), read on the plate too.
+ * message (label, medium, at most 2 lines with an ellipsis) and the actions (8 apart). The bar is the brand's
+ * primary colour: savingbar/background is colors/primary/default and savingbar/text is text/on/primary (the text,
+ * the error alert, the chevron and the loader), so it follows the theme, light or dark, and every brand.
+ * The Buttons stay the Button: Salvar tone action fill and Descartar tone neutral ghost, with the bar's colours.
+ * The bar redeclares the Button tokens those two read: the Salvar fill is savingbar/button/fill/background with
+ * savingbar/button/fill/label, its hover the fill at 85% over the bar (active 70%); the Descartar label is
+ * savingbar/button/ghost/label, its hover the label colour at 15% (active 25%); the focus ring is savingbar/focus/ring;
+ * disabled (saving) is each Button at 40% over the bar, as the Figma layer opacity.
  * Two arrangements, by the screen width, as the Figma viewport mode (layout/compact below lg 1024): expanded from 1024,
  * the message grows (at least 160) beside the actions; compact below it, the message on top and Descartar and
  * Salvar under it, sharing the width.
@@ -8480,6 +8484,23 @@ input:focus-visible + .rds-radio__circle {
   background: var(--savingbar-background);
   color: var(--savingbar-text);
   font-family: var(--type-font-stack);
+
+  /* The Button tokens Salvar (action fill) and Descartar (neutral ghost) read, in the bar's colours. */
+  --button-focus-ring: var(--savingbar-focus-ring);
+  --button-action-fill-background-default: var(--savingbar-button-fill-background);
+  --button-action-fill-background-hover: color-mix(in srgb, var(--savingbar-button-fill-background) 85%, var(--savingbar-background));
+  --button-action-fill-background-active: color-mix(in srgb, var(--savingbar-button-fill-background) 70%, var(--savingbar-background));
+  --button-action-fill-label: var(--savingbar-button-fill-label);
+  --button-action-fill-icon: var(--savingbar-button-fill-label);
+  --button-neutral-ghost-label: var(--savingbar-button-ghost-label);
+  --button-neutral-ghost-icon: var(--savingbar-button-ghost-label);
+  --button-neutral-ghost-background-hover: color-mix(in srgb, var(--savingbar-button-ghost-label) 15%, transparent);
+  --button-neutral-ghost-background-active: color-mix(in srgb, var(--savingbar-button-ghost-label) 25%, transparent);
+  --button-disabled-fill-background: color-mix(in srgb, var(--savingbar-button-fill-background) 40%, var(--savingbar-background));
+  --button-disabled-fill-label: color-mix(in srgb, var(--savingbar-button-fill-label) 40%, var(--savingbar-background));
+  --button-disabled-fill-icon: var(--button-disabled-fill-label);
+  --button-disabled-ghost-label: color-mix(in srgb, var(--savingbar-button-ghost-label) 40%, var(--savingbar-background));
+  --button-disabled-ghost-icon: var(--button-disabled-ghost-label);
 }
 
 .rds-savingbar__row {

package/styles/rds/components.css

@@ -73,7 +73,7 @@
   --button-inverse-focus-ring: var(--text-on-primary-strong);
   --button-inverse-disabled-fill-background: var(--colors-primary-light);
   --button-inverse-disabled-label: var(--text-disabled-invert);
-  --savingbar-background: var(--surface-page);
+  --savingbar-background: var(--colors-primary-default);
   --toggle-label: var(--text-body);
   --toggle-border: var(--border-strong);
   --toggle-background-hover: var(--surface-muted);
@@ -83,7 +83,7 @@
   --toggle-label-disabled: var(--text-disabled);
   --toggle-border-pressed: var(--colors-primary-default);
   --toggle-border-disabled: var(--border-default);
-  --savingbar-text: var(--text-body);
+  --savingbar-text: var(--text-on-primary);
   --fab-cta-background-default: var(--colors-primary-default);
   --fab-cta-background-hover: var(--colors-primary-active);
   --fab-cta-text: var(--text-on-primary);
@@ -120,7 +120,10 @@
   --button-size-lg-icon-only: var(--size-24);
   --button-size-lg-text-size: var(--type-body-size);
   --button-size-lg-text-line: var(--type-body-line);
-  --savingbar-focus-ring: var(--focus-ring);
+  --savingbar-focus-ring: var(--text-on-primary);
+  --savingbar-button-fill-background: var(--text-on-primary);
+  --savingbar-button-fill-label: var(--colors-primary-default);
+  --savingbar-button-ghost-label: var(--text-on-primary);
 
   /* blocks */
   --topnav-background: var(--surface-card);