rift-ds 1.19.0 → 1.19.1

package/components/Attachment/AttachmentViewer.js

@@ -178,6 +178,7 @@ const AttachmentViewer = React.forwardRef(
                 {
                   icon: "chevron_left",
                   variant: "secondary",
+                  tone: "neutral",
                   size: "compact",
                   ariaLabel: previousLabel,
                   tooltip: false,
@@ -190,6 +191,7 @@ const AttachmentViewer = React.forwardRef(
                 {
                   icon: "chevron_right",
                   variant: "secondary",
+                  tone: "neutral",
                   size: "compact",
                   ariaLabel: nextLabel,
                   tooltip: false,

package/components/BentoTile/BentoTile.js

@@ -197,6 +197,7 @@ const BentoTile = React.forwardRef(
                   ref: triggerRef,
                   icon: "open_in_full",
                   variant: awake ? "primary" : "secondary",
+                  tone: awake ? void 0 : "neutral",
                   size: "compact",
                   ariaLabel: label,
                   tooltip: false,
@@ -280,6 +281,7 @@ function BentoTileOverlay({ title, titleId, panelName, toggleName, closeLabel, o
                   ref: closeRef,
                   icon: "close_fullscreen",
                   variant: "secondary",
+                  tone: "neutral",
                   size: "compact",
                   ariaLabel: closeLabel,
                   tooltip: false,

package/components/SegmentedControl/SegmentedControl.css

@@ -272,6 +272,12 @@
     transform var(--motion-duration-fast) var(--motion-ease-standard);
 }
 
+/* The tip sits on the page surface, not the selected segment's fill, so it
+   keeps its own ink when the active-label rules above would recolour it. */
+.ds-segmented-control .ds-segmented-control__segment .ds-segmented-control__label--tip {
+  color: var(--color-text-primary);
+}
+
 /* --motion-duration-slow matches MOTION_HOVER_SHOW_DELAY_MS, the hover-intent
    delay Tooltip uses in JS, so the label does not flash while the pointer
    passes through. Hiding takes no delay, like a tooltip leaving. */

package/components/TableToolbar/TableToolbar.css

@@ -120,6 +120,7 @@
    chip's editor) holds its pressed fill until the panel closes, so the
    bar says which control the open panel belongs to. */
 .ds-table-toolbar .ds-circular-button--tertiary[aria-expanded='true'],
+.ds-table-toolbar .ds-circular-button--secondary-neutral[aria-expanded='true'],
 .ds-table-toolbar .ds-chip[aria-expanded='true'],
 .ds-table-toolbar .ds-button[aria-expanded='true'] {
   background-color: var(--color-action-passive-bg-active);
@@ -302,7 +303,7 @@
 
 /* A count on an icon's top-end corner, drawn as BottomNav's count badge:
    a solid pill on the count badge pair, so it reads at a glance on the
-   filled icon buttons in both modes. */
+   outlined icon buttons in both modes. */
 .ds-table-toolbar__badge {
   position: absolute;
   inset-block-start: calc(-1 * var(--padding-100));

package/components/TableToolbar/TableToolbar.js

@@ -794,7 +794,7 @@ const TableToolbar = React.forwardRef(
       CircularButton,
       {
         icon: "filter_list",
-        variant: "primary",
+        variant: "secondary",
         tone: "neutral",
         size,
         ariaLabel: labels.filters(activeFilters),
@@ -1081,7 +1081,7 @@ const TableToolbar = React.forwardRef(
             CircularButton,
             {
               icon: "swap_vert",
-              variant: "primary",
+              variant: "secondary",
               tone: "neutral",
               size,
               ariaLabel: labels.sort(sorts.length),
@@ -1276,7 +1276,7 @@ const TableToolbar = React.forwardRef(
             CircularButton,
             {
               icon: "view_agenda",
-              variant: "primary",
+              variant: "secondary",
               tone: "neutral",
               size,
               ariaLabel: labels.group(Boolean(groupedBy)),
@@ -1304,7 +1304,7 @@ const TableToolbar = React.forwardRef(
           CircularButton,
           {
             icon: "view_column",
-            variant: "primary",
+            variant: "secondary",
             tone: "neutral",
             size,
             ariaLabel: labels.columns,
@@ -1349,7 +1349,7 @@ const TableToolbar = React.forwardRef(
           CircularButton,
           {
             icon: "more_horiz",
-            variant: "primary",
+            variant: "secondary",
             tone: "neutral",
             size,
             ariaLabel: labels.more,
@@ -1457,7 +1457,7 @@ const TableToolbar = React.forwardRef(
                           CircularButton,
                           {
                             icon: "search",
-                            variant: "primary",
+                            variant: "secondary",
                             tone: "neutral",
                             size,
                             ariaLabel: labels.search,
@@ -1478,7 +1478,7 @@ const TableToolbar = React.forwardRef(
                           CircularButton,
                           {
                             icon: action.icon,
-                            variant: "primary",
+                            variant: "secondary",
                             tone: "neutral",
                             size,
                             ariaLabel: action.label,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rift-ds",
-  "version": "1.19.0",
+  "version": "1.19.1",
   "description": "An AI-ready React design system: accessible components on composable tokens, light/dark theming, and CSS-variable overrides.",
   "author": {
     "name": "Robert Ritacca",

package/tokens/presets/mono.css

@@ -61,6 +61,13 @@ html[data-brand="mono"] {
   --color-ambient-4: #5C5C5C;
   --color-ambient-5: #707070;
   --color-ambient-6: #A7A7A7;
+  --color-chart-series-1: var(--primitive-blue-06);
+  --color-chart-series-2: var(--primitive-green-07);
+  --color-chart-series-3: var(--primitive-yellow-07);
+  --color-chart-series-4: var(--primitive-red-07);
+  --color-chart-series-5: var(--primitive-purple-07);
+  --color-chart-series-6: var(--primitive-orange-07);
+  --color-chart-series-7: var(--primitive-teal-07);
   --color-core-accent-amber: #B8B8B8;
   --color-core-accent-cobalt: #5C5C5C;
   --color-core-accent-coral: #A3A3A3;
@@ -191,6 +198,13 @@ html[data-brand="mono"][data-theme="dark"] {
   --color-ambient-4: #5C5C5C;
   --color-ambient-5: #F6F6F6;
   --color-ambient-6: #F9F9F9;
+  --color-chart-series-1: var(--primitive-blue-05);
+  --color-chart-series-2: var(--primitive-green-07);
+  --color-chart-series-3: var(--primitive-yellow-07);
+  --color-chart-series-4: var(--primitive-red-07);
+  --color-chart-series-5: var(--primitive-purple-07);
+  --color-chart-series-6: var(--primitive-orange-07);
+  --color-chart-series-7: var(--primitive-teal-07);
   --color-core-accent-amber: #B8B8B8;
   --color-core-accent-cobalt: #5C5C5C;
   --color-core-accent-coral: #A3A3A3;

package/tokens/presets/zest.css

@@ -72,6 +72,7 @@ html[data-brand="zest"] {
   --color-core-ui-secondary: var(--primitive-green-10);
   --color-input-border-hover: var(--primitive-green-08);
   --color-input-border-selected: var(--primitive-green-07);
+  --color-status-positive-text: var(--primitive-green-10);
   --font-display-1-letter-spacing: -0.025em;
   --font-display-1-weight: 800;
   --font-display-2-letter-spacing: -0.02em;
@@ -240,6 +241,7 @@ html[data-brand="zest"][data-theme="dark"] {
   --color-core-ui-secondary: var(--primitive-green-09);
   --color-input-border-hover: var(--primitive-green-08);
   --color-input-border-selected: var(--primitive-green-08);
+  --color-status-positive-text: var(--primitive-green-01);
   --font-display-1-letter-spacing: -0.025em;
   --font-display-1-weight: 800;
   --font-display-2-letter-spacing: -0.02em;

package/tokens/tokens-dark.css

@@ -140,7 +140,7 @@
   --color-action-neutral-bg-hover: var(--primitive-neutral-07);
   --color-action-neutral-bg-active: var(--primitive-neutral-06);
   --color-action-neutral-text: var(--primitive-neutral-00);
-  --color-action-neutral-border: var(--primitive-neutral-06);
+  --color-action-neutral-border: var(--primitive-neutral-08);
   --color-action-destructive-bg: var(--primitive-red-05);
   --color-action-destructive-bg-hover: var(--primitive-red-04);
   --color-action-destructive-bg-active: var(--primitive-red-03);

package/tokens/tokens-light.css

@@ -162,9 +162,9 @@
   --color-action-neutral-bg-active: var(--primitive-neutral-04);
   --color-action-neutral-text: var(--primitive-neutral-10);
   /* The outlined neutral button's edge (secondary emphasis, neutral tone):
-     a mid grey that reads as a control edge on the page without the
-     action colour. */
-  --color-action-neutral-border: var(--primitive-neutral-05);
+     the container border's step, so it matches a SegmentedControl beside
+     it without the action colour. */
+  --color-action-neutral-border: var(--primitive-neutral-02);
 
   /* Action - Destructive (dangerous or irreversible actions). Keyed to the
      red ramp the error status uses, never to an accent, so danger reads as
@@ -220,33 +220,33 @@
   --color-file-presentation: var(--primitive-file-presentation);
 
   /* Status - Positive */
-  --color-status-positive-bg: var(--primitive-green-01);
+  --color-status-positive-bg: var(--primitive-green-02);
   --color-status-positive-border: var(--primitive-green-07);
-  --color-status-positive-text: var(--primitive-green-10);
+  --color-status-positive-text: var(--primitive-green-09);
   --color-status-positive-icon: var(--primitive-green-08);
 
   /* Status - Warning */
-  --color-status-warning-bg: var(--primitive-orange-01);
+  --color-status-warning-bg: var(--primitive-orange-02);
   --color-status-warning-border: var(--primitive-orange-07);
-  --color-status-warning-text: var(--primitive-orange-10);
+  --color-status-warning-text: var(--primitive-orange-09);
   --color-status-warning-icon: var(--primitive-orange-08);
 
   /* Status - Error */
-  --color-status-error-bg: var(--primitive-red-01);
+  --color-status-error-bg: var(--primitive-red-02);
   --color-status-error-border: var(--primitive-red-07);
-  --color-status-error-text: var(--primitive-red-10);
+  --color-status-error-text: var(--primitive-red-09);
   --color-status-error-icon: var(--primitive-red-08);
 
   /* Status - Info */
-  --color-status-info-bg: var(--primitive-blue-01);
+  --color-status-info-bg: var(--primitive-blue-02);
   --color-status-info-border: var(--primitive-blue-07);
-  --color-status-info-text: var(--primitive-blue-10);
+  --color-status-info-text: var(--primitive-blue-08);
   --color-status-info-icon: var(--primitive-blue-06);
 
   /* Status - Neutral */
-  --color-status-neutral-bg: var(--primitive-neutral-02);
+  --color-status-neutral-bg: var(--primitive-neutral-01);
   --color-status-neutral-border: var(--primitive-neutral-07);
-  --color-status-neutral-text: var(--primitive-neutral-08);
+  --color-status-neutral-text: var(--primitive-neutral-07);
   --color-status-neutral-icon: var(--primitive-neutral-06);
 
   /* The -icon step is the status glyph colour for plain surfaces (a step
@@ -276,7 +276,8 @@
 
   /* Chart - Ordered series ramp for multi-series charts. Series 1 follows
      the action teal (theme-split with it); 2-7 alias the core accents, so
-     re-theming an accent re-themes every chart that uses its slot. */
+     re-theming an accent re-themes every chart that uses its slot. A theme
+     may re-point any of them in its extras. */
   --color-chart-series-1: var(--color-action-primary-bg);
   --color-chart-series-2: var(--color-core-accent-mint);
   --color-chart-series-3: var(--color-core-accent-gold);