rift-ds 1.2.0 → 1.3.0

package/components/Inspector/InspectorColorPicker.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import { ColorPicker } from "../ColorPicker/ColorPicker.js";
+import "./Inspector.css";
+const InspectorColorPicker = React.forwardRef(
+  ({
+    label,
+    value,
+    defaultValue,
+    onValueChange,
+    showAlpha = false,
+    name,
+    disabled = false,
+    size = "default",
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseId = React.useId();
+    const labelId = `${baseId}-label`;
+    const triggerId = `${baseId}-trigger`;
+    const classes = [
+      "ds-inspector-color-picker",
+      size === "compact" ? "ds-inspector-color-picker--compact" : "",
+      disabled ? "ds-inspector-color-picker--disabled" : "",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      /* @__PURE__ */ jsx("span", { id: labelId, className: "ds-inspector-color-picker__label", "aria-hidden": "true", children: label }),
+      /* @__PURE__ */ jsx(
+        ColorPicker,
+        {
+          id: triggerId,
+          "aria-labelledby": `${labelId} ${triggerId}-value`,
+          size,
+          value,
+          defaultValue,
+          onValueChange,
+          showAlpha,
+          showText: true,
+          name,
+          disabled
+        }
+      )
+    ] });
+  }
+);
+InspectorColorPicker.displayName = "InspectorColorPicker";
+export {
+  InspectorColorPicker
+};

package/components/Instructions/Instructions.css

@@ -64,14 +64,14 @@
   width: 32px;
   height: 32px;
   border-radius: var(--radius-pill);
-  border: var(--border-025) solid var(--color-action-primary-border);
+  border: var(--border-025) solid var(--color-bg-container-border);
   background-color: transparent;
   flex-shrink: 0;
 }
 
 .ds-instructions__badge .material-symbols-rounded {
   --icon-size: var(--icon-size-600);
-  color: var(--color-action-primary-bg);
+  color: var(--color-icon-primary);
 }
 
 .ds-instructions__number {
@@ -79,14 +79,14 @@
   font-size: var(--font-paragraph-sm-size);
   font-weight: var(--font-title-body-weight);
   line-height: 1;
-  color: var(--color-action-primary-bg);
+  color: var(--color-text-secondary);
 }
 
 .ds-instructions__dot {
   width: 8px;
   height: 8px;
   border-radius: var(--radius-pill);
-  background-color: var(--color-action-primary-bg);
+  background-color: var(--color-icon-primary);
 }
 
 .ds-instructions__connector {

package/components/Prose/Prose.css

@@ -173,6 +173,33 @@
   font-size: inherit;
 }
 
+/* A renderer that maps fenced code to CodeBlock (for its copy button)
+   gets the same block rhythm, and the plain-pre panel and inline-code
+   chip step aside so CodeBlock's own chrome is the only chrome */
+.ds-prose .ds-code-block {
+  margin: 0;
+  margin-block-end: var(--gap-400);
+}
+
+.ds-prose > .ds-code-block:last-child {
+  margin-block-end: 0;
+}
+
+.ds-prose .ds-code-block pre {
+  margin: 0;
+  padding: var(--padding-400);
+  overflow: auto;
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+}
+
+.ds-prose .ds-code-block code {
+  background-color: transparent;
+  border-radius: 0;
+  padding-inline: 0;
+}
+
 /* ============================================
    BLOCKQUOTES
    Mirrors Reasoning's trace rail

package/components/Sparkline/Sparkline.css

@@ -12,7 +12,7 @@
   display: inline-block;
   vertical-align: middle;
   flex-shrink: 0;
-  color: var(--color-action-primary-bg);
+  color: var(--color-chart-series-1);
 }
 
 /* Parts */
@@ -60,7 +60,7 @@
 /* Tones */
 
 .ds-sparkline--accent {
-  color: var(--color-action-primary-bg);
+  color: var(--color-chart-series-1);
 }
 
 .ds-sparkline--positive {

package/components/Spinner/Spinner.css

@@ -52,7 +52,7 @@
    ============================================ */
 
 .ds-spinner--primary .ds-spinner__arc {
-  stroke: var(--color-action-primary-bg);
+  stroke: var(--color-text-primary);
 }
 
 .ds-spinner--neutral .ds-spinner__arc {

package/components/Timeline/Timeline.css

@@ -331,7 +331,7 @@
 }
 
 .ds-timeline__role-bullets a {
-  color: var(--color-action-primary-bg);
+  color: var(--color-action-primary-text-tertiary);
   font-weight: var(--font-paragraph-emphasis-weight);
   text-decoration: underline;
   text-decoration-color: transparent;