@streamoid/ui 0.6.4 → 0.6.6

package/dist/index.css

@@ -4002,7 +4002,7 @@
 }
 .ScSideBarLogoUnit_row:hover,
 .ScSideBarLogoUnit_row.ScSideBarLogoUnit_forceHover {
-  background-color: var(--alias-surface-subtle, #1a1a1a);
+  background-color: var(--alias-fill-neutral-neutral, #1a1a1a);
 }
 .ScSideBarLogoUnit_wordmarkSlot {
   display: inline-flex;
@@ -4055,7 +4055,7 @@
 }
 .ScSideBarLogoUnit_collapsedTrigger:hover,
 .ScSideBarLogoUnit_collapsedTrigger.ScSideBarLogoUnit_forceHover {
-  background-color: var(--alias-surface-subtle, #1a1a1a);
+  background-color: var(--alias-fill-neutral-neutral, #1a1a1a);
 }
 .ScSideBarLogoUnit_collapsedWordmarkSlot {
   display: inline-flex;
@@ -4967,6 +4967,18 @@
   border-color: var(--alias-border-strong, #5c5c5c);
   border-width: 0.0625rem;
 }
+[data-theme=Light] .ScOnlyField_inputContainer {
+  border: 0.5px solid var(--alias-border-subtle);
+}
+[data-theme=Light] .ScOnlyField_scOnlyField:hover .ScOnlyField_inputContainer,
+[data-theme=Light] .ScOnlyField_scOnlyField.ScOnlyField_state-hover .ScOnlyField_inputContainer,
+[data-theme=Light] .ScOnlyField_scOnlyField.ScOnlyField_state-filled .ScOnlyField_inputContainer {
+  border-color: var(--alias-border-default);
+}
+[data-theme=Light] .ScOnlyField_scOnlyField.ScOnlyField_state-ative-focused .ScOnlyField_inputContainer {
+  border-color: var(--alias-border-strong);
+  border-width: 0.5px;
+}
 
 /* src/SC-billingHistoryHeader/ScBillingHistoryHeader.module.css */
 .ScBillingHistoryHeader_scBillingHistoryHeader,

package/dist/index.js

@@ -1820,7 +1820,7 @@ var T2 = {
   textInverse: "var(--alias-text---icons-inverse, #101010)",
   fontBody: "var(--font-family-font-family-body, 'Inter', sans-serif)"
 };
-var PRO_GRADIENT = "linear-gradient(36.6deg, #d91536 15%, #ee5e3a 85%)";
+var PRO_GRADIENT = "linear-gradient(135deg, #d91536 0%, #ee5e3a 100%)";
 function ChevronDown() {
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "path",
@@ -1868,12 +1868,21 @@ var ScPlanCard = ({
     gap: "var(--spacing-6xl, 24px)",
     padding: "var(--spacing-5xl, 20px)",
     borderRadius: 24,
-    backgroundColor: T2.neutralplus,
     fontFamily: T2.fontBody,
     // `visible` so the Pro "Increase" tier dropdown can overlay below the card
     // instead of being clipped; card content is inset so corners still read clean.
     overflow: "visible",
-    ...isPopular ? { border: "0.5px solid #d91536" } : { border: "0.5px solid transparent" },
+    ...isPopular ? {
+      // Pro: red→orange gradient border (Figma "CXO Linear 2" @ .8). The card
+      // fill is painted on padding-box; the gradient shows through the 0.5px
+      // transparent border via border-box.
+      background: `linear-gradient(${T2.neutralplus}, ${T2.neutralplus}) padding-box, linear-gradient(135deg, rgba(217, 21, 54, 0.8) 0%, rgba(238, 94, 58, 0.8) 100%) border-box`,
+      border: "0.5px solid transparent"
+    } : {
+      // Free / Enterprise: subtle visible grey edge (Figma #D2D4D8).
+      backgroundColor: T2.neutralplus,
+      border: "0.5px solid var(--alias-border-subtle, #d2d2d2)"
+    },
     ...style
   };
   const button = /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
@@ -2018,7 +2027,10 @@ var ScPlanCard = ({
                     borderRadius: "var(--radius-lg, 10px)",
                     border: "none",
                     cursor: "pointer",
-                    backgroundColor: T2.surfaceRaised,
+                    // surfaceRaised is white in light (invisible on the white
+                    // credits chip); neutralhover is #e5e5e5 in light and the same
+                    // #242424 in dark, so the pill reads in both. Matches Figma.
+                    backgroundColor: "var(--alias-fill-neutral-neutralhover, #242424)",
                     color: T2.textPrimary,
                     fontFamily: T2.fontBody
                   },
@@ -3629,7 +3641,7 @@ function StreamoidSidebar({
                         style: {
                           width: "100%",
                           borderBottom: "1px solid",
-                          borderBottomColor: panelOpen ? "rgba(36, 36, 36, 0.48)" : "transparent",
+                          borderBottomColor: panelOpen ? "var(--alias-border-divider)" : "transparent",
                           transition: "border-color 200ms ease"
                         },
                         children: logoRow
@@ -3962,8 +3974,8 @@ function StreamoidSidebar({
                     top: "var(--spacing-md)",
                     width: 240,
                     zIndex: 50,
-                    backgroundColor: "var(--alias-surface-canvas)",
-                    border: "1px solid var(--alias-surface-subtle)",
+                    backgroundColor: "var(--alias-surface-base)",
+                    border: "1px solid var(--alias-border-default)",
                     borderRadius: "var(--radius-3xl)",
                     overflow: "hidden",
                     paddingBottom: "var(--spacing-md)",

package/dist/index.mjs

@@ -1700,7 +1700,7 @@ var T2 = {
   textInverse: "var(--alias-text---icons-inverse, #101010)",
   fontBody: "var(--font-family-font-family-body, 'Inter', sans-serif)"
 };
-var PRO_GRADIENT = "linear-gradient(36.6deg, #d91536 15%, #ee5e3a 85%)";
+var PRO_GRADIENT = "linear-gradient(135deg, #d91536 0%, #ee5e3a 100%)";
 function ChevronDown() {
   return /* @__PURE__ */ jsx25("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx25(
     "path",
@@ -1748,12 +1748,21 @@ var ScPlanCard = ({
     gap: "var(--spacing-6xl, 24px)",
     padding: "var(--spacing-5xl, 20px)",
     borderRadius: 24,
-    backgroundColor: T2.neutralplus,
     fontFamily: T2.fontBody,
     // `visible` so the Pro "Increase" tier dropdown can overlay below the card
     // instead of being clipped; card content is inset so corners still read clean.
     overflow: "visible",
-    ...isPopular ? { border: "0.5px solid #d91536" } : { border: "0.5px solid transparent" },
+    ...isPopular ? {
+      // Pro: red→orange gradient border (Figma "CXO Linear 2" @ .8). The card
+      // fill is painted on padding-box; the gradient shows through the 0.5px
+      // transparent border via border-box.
+      background: `linear-gradient(${T2.neutralplus}, ${T2.neutralplus}) padding-box, linear-gradient(135deg, rgba(217, 21, 54, 0.8) 0%, rgba(238, 94, 58, 0.8) 100%) border-box`,
+      border: "0.5px solid transparent"
+    } : {
+      // Free / Enterprise: subtle visible grey edge (Figma #D2D4D8).
+      backgroundColor: T2.neutralplus,
+      border: "0.5px solid var(--alias-border-subtle, #d2d2d2)"
+    },
     ...style
   };
   const button = /* @__PURE__ */ jsx25(
@@ -1898,7 +1907,10 @@ var ScPlanCard = ({
                     borderRadius: "var(--radius-lg, 10px)",
                     border: "none",
                     cursor: "pointer",
-                    backgroundColor: T2.surfaceRaised,
+                    // surfaceRaised is white in light (invisible on the white
+                    // credits chip); neutralhover is #e5e5e5 in light and the same
+                    // #242424 in dark, so the pill reads in both. Matches Figma.
+                    backgroundColor: "var(--alias-fill-neutral-neutralhover, #242424)",
                     color: T2.textPrimary,
                     fontFamily: T2.fontBody
                   },
@@ -3509,7 +3521,7 @@ function StreamoidSidebar({
                         style: {
                           width: "100%",
                           borderBottom: "1px solid",
-                          borderBottomColor: panelOpen ? "rgba(36, 36, 36, 0.48)" : "transparent",
+                          borderBottomColor: panelOpen ? "var(--alias-border-divider)" : "transparent",
                           transition: "border-color 200ms ease"
                         },
                         children: logoRow
@@ -3842,8 +3854,8 @@ function StreamoidSidebar({
                     top: "var(--spacing-md)",
                     width: 240,
                     zIndex: 50,
-                    backgroundColor: "var(--alias-surface-canvas)",
-                    border: "1px solid var(--alias-surface-subtle)",
+                    backgroundColor: "var(--alias-surface-base)",
+                    border: "1px solid var(--alias-border-default)",
                     borderRadius: "var(--radius-3xl)",
                     overflow: "hidden",
                     paddingBottom: "var(--spacing-md)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamoid/ui",
-  "version": "0.6.4",
+  "version": "0.6.6",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",