@stainless-api/ui-primitives 0.1.0-beta.30 → 0.1.0-beta.31

package/dist/styles.css

@@ -225,7 +225,7 @@ body {
     --stl-color-muted-background: light-dark(rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
     --stl-color-muted-background-hover: rgb(from var(--stl-color-muted-background) r g b/calc(alpha * 2));
     /* faint background */
-    --stl-color-faint-background: light-dark(rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-004))), rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))));
+    --stl-color-faint-background: rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-004)));
     --stl-color-faint-background-hover: rgb(from var(--stl-color-faint-background) r g b/calc(alpha * 2));
     /* ui elements like cards and buttons match --stl-color-background in light mode, but have a slight tint in dark mode */
     --stl-color-ui-background: light-dark(
@@ -305,6 +305,19 @@ body {
     --stl-color-blue-inverse-background: var(--stl-color-blue);
     --stl-color-blue-inverse-background-hover: rgb(from var(--stl-color-blue) r g b/calc(alpha * var(--stl-opacity-level-080)));
     --stl-color-blue-inverse-foreground: rgb(255, 255, 255);
+    /* yellow */
+    --stl-color-yellow: light-dark(#ca8a04, #eab308);
+    --stl-color-yellow-foreground: var(--stl-color-yellow);
+    --stl-color-yellow-foreground-reduced: rgb(from var(--stl-color-yellow-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-yellow-foreground-muted: rgb(from var(--stl-color-yellow-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-yellow-muted-background: light-dark(rgb(from var(--stl-color-yellow-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-yellow-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-yellow-muted-background-hover: rgb(from var(--stl-color-yellow-muted-background) r g b/calc(alpha * 2));
+    --stl-color-yellow-border: light-dark(rgb(from var(--stl-color-yellow) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-yellow) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-yellow-border-faint: rgb(from var(--stl-color-yellow-border) r g b/calc(alpha * 0.5));
+    --stl-color-yellow-border-strong: var(--stl-color-yellow);
+    --stl-color-yellow-inverse-background: var(--stl-color-yellow);
+    --stl-color-yellow-inverse-background-hover: rgb(from var(--stl-color-yellow) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-yellow-inverse-foreground: rgb(255, 255, 255);
     /* orange */
     --stl-color-orange: light-dark(#ea580c, #f97316);
     --stl-color-orange-foreground: var(--stl-color-orange);
@@ -357,19 +370,6 @@ body {
     --stl-color-pink-inverse-background: var(--stl-color-pink);
     --stl-color-pink-inverse-background-hover: rgb(from var(--stl-color-pink) r g b/calc(alpha * var(--stl-opacity-level-080)));
     --stl-color-pink-inverse-foreground: rgb(255, 255, 255);
-    /* yellow */
-    --stl-color-yellow: light-dark(#ca8a04, #eab308);
-    --stl-color-yellow-foreground: var(--stl-color-yellow);
-    --stl-color-yellow-foreground-reduced: rgb(from var(--stl-color-yellow-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
-    --stl-color-yellow-foreground-muted: rgb(from var(--stl-color-yellow-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
-    --stl-color-yellow-muted-background: light-dark(rgb(from var(--stl-color-yellow-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-yellow-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
-    --stl-color-yellow-muted-background-hover: rgb(from var(--stl-color-yellow-muted-background) r g b/calc(alpha * 2));
-    --stl-color-yellow-border: light-dark(rgb(from var(--stl-color-yellow) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-yellow) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
-    --stl-color-yellow-border-faint: rgb(from var(--stl-color-yellow-border) r g b/calc(alpha * 0.5));
-    --stl-color-yellow-border-strong: var(--stl-color-yellow);
-    --stl-color-yellow-inverse-background: var(--stl-color-yellow);
-    --stl-color-yellow-inverse-background-hover: rgb(from var(--stl-color-yellow) r g b/calc(alpha * var(--stl-opacity-level-080)));
-    --stl-color-yellow-inverse-foreground: rgb(255, 255, 255);
   }
   :root[data-theme=dark],
   .stl-theme-dark {
@@ -440,9 +440,9 @@ body {
 
 .stl-ui-button--muted {
   color: var(--stl-color-foreground);
-  background-color: var(--stl-color-faint-background);
+  background-color: var(--stl-color-muted-background);
   &:hover {
-    background-color: var(--stl-color-faint-background-hover);
+    background-color: var(--stl-color-muted-background-hover);
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stainless-api/ui-primitives",
-  "version": "0.1.0-beta.30",
+  "version": "0.1.0-beta.31",
   "publishConfig": {
     "access": "public"
   },
@@ -14,16 +14,16 @@
   },
   "dependencies": {
     "clsx": "^2.1.1",
-    "lucide-react": "^0.554.0"
+    "lucide-react": "^0.555.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "rolldown": "1.0.0-beta.51",
+    "rolldown": "1.0.0-beta.52",
     "sass": "^1.94.2",
-    "tsdown": "^0.16.7",
+    "tsdown": "^0.16.8",
     "typescript": "5.9.3",
     "@stainless/eslint-config": "0.1.0-beta.0"
   },