@photoroom/ui 0.1.232 → 0.1.234

package/colors.css

@@ -27,6 +27,31 @@
   );
 }
 
+/*
+ * Flash gradient backgrounds (same in light + dark)
+ */
+@utility bg-background-flash {
+  background-image: linear-gradient(
+    to right,
+    var(--color-yellow-500),
+    var(--color-yellow-light-500)
+  );
+}
+@utility bg-background-flash-hover {
+  background-image: linear-gradient(
+    to right,
+    var(--color-yellow-400),
+    var(--color-yellow-light-400)
+  );
+}
+@utility bg-background-flash-down {
+  background-image: linear-gradient(
+    to right,
+    var(--color-yellow-600),
+    var(--color-yellow-light-600)
+  );
+}
+
 /*
  * Pro gradient on text/content elements (same in light + dark)
  */
@@ -142,6 +167,16 @@
   /* Camera accent */
   --color-camera-accent-500: #f5b63d;
 
+  /* Yellow */
+  --color-yellow-400: #edf280;
+  --color-yellow-500: #e5ed49;
+  --color-yellow-600: #c3c93e;
+
+  /* Yellow light */
+  --color-yellow-light-400: #feffea;
+  --color-yellow-light-500: #fdffd5;
+  --color-yellow-light-600: #e4e5c0;
+
   /* Branding */
   --color-secondary-moon-grape: #626eff;
   --color-secondary-electric-litchi: #ff86f6;
@@ -262,10 +297,6 @@
   --color-misc-ai-image: #5383ff;
   --color-misc-ai-video: #00cd9c;
   --color-misc-automated-exports: #aa4fff;
-
-  /* Yellow flash */
-  --color-misc-yellow: #e5ed49;
-  --color-misc-yellow-light: #fdffd5;
 }
 
 /*
@@ -347,6 +378,16 @@
   /* Camera accent */
   --color-camera-accent-500: #f5b63d;
 
+  /* Yellow */
+  --color-yellow-400: #edf280;
+  --color-yellow-500: #e5ed49;
+  --color-yellow-600: #c3c93e;
+
+  /* Yellow light */
+  --color-yellow-light-400: #feffea;
+  --color-yellow-light-500: #fdffd5;
+  --color-yellow-light-600: #e4e5c0;
+
   /*
    * ALIASES
    */
@@ -449,10 +490,6 @@
   --color-misc-ai-image: #5383ff;
   --color-misc-ai-video: #00cd9c;
   --color-misc-automated-exports: #aa4fff;
-
-  /* Yellow flash */
-  --color-misc-yellow: #e5ed49;
-  --color-misc-yellow-light: #fdffd5;
 }
 .theme-dark .bg-background-pro-hover {
   background-image: linear-gradient(

package/components/action/Button/utils.d.ts

@@ -8,7 +8,7 @@ type ButtonLayoutParams = {
 export type ButtonLayouts = "icon" | "icon-and-label" | "label" | "stack" | "loading";
 export declare function getButtonLayout({ icon, stacked, children }: ButtonLayoutParams): ButtonLayouts;
 export declare const buttonVariants: (props?: ({
-    variant?: "accent" | "secondary-accent" | "borderless-accent" | "primary" | "secondary" | "borderless" | "secondary-outline" | "negative" | "pro" | "on-dark" | "secondary-on-dark" | "borderless-on-dark" | null | undefined;
+    variant?: "accent" | "secondary-accent" | "borderless-accent" | "primary" | "secondary" | "borderless" | "secondary-outline" | "negative" | "pro" | "flash" | "on-dark" | "secondary-on-dark" | "borderless-on-dark" | null | undefined;
     density?: "compact" | "regular" | "spacious" | null | undefined;
     loading?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/components/action/Button/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/action/Button/utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,KAAK,kBAAkB,GAAG;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,gBAAgB,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;AAEtF,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,kBAAkB,GAAG,aAAa,CAU9F;AAED,eAAO,MAAM,cAAc;;;;8EA2C1B,CAAC;AAsBF,eAAO,MAAM,aAAa;;;;8EAwDxB,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;8EAQ3B,CAAC;AAEH,eAAO,MAAM,gBAAgB;;8EAQ3B,CAAC;AAEH,eAAO,MAAM,wBAAwB;;;CAGpC,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/action/Button/utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,KAAK,kBAAkB,GAAG;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,gBAAgB,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;AAEtF,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,kBAAkB,GAAG,aAAa,CAU9F;AAED,eAAO,MAAM,cAAc;;;;8EA6C1B,CAAC;AAsBF,eAAO,MAAM,aAAa;;;;8EAwDxB,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;8EAQ3B,CAAC;AAEH,eAAO,MAAM,gBAAgB;;8EAQ3B,CAAC;AAEH,eAAO,MAAM,wBAAwB;;;CAGpC,CAAC"}

package/components/action/HeroButton/HeroButton.d.ts

@@ -1,6 +1,6 @@
 import { ForwardRefComponent } from "../../polymorphic";
 export type HeroButtonProps = Readonly<{
-    variant?: "accent" | "primary" | "on-dark" | "pro";
+    variant?: "accent" | "primary" | "on-dark" | "pro" | "flash";
     size?: "medium" | "large";
     loading?: boolean;
     badge?: React.ReactNode;

package/components/action/HeroButton/HeroButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeroButton.d.ts","sourceRoot":"","sources":["../../../../src/components/action/HeroButton/HeroButton.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAExD,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAC;IACrC,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,KAAK,CAAC;IACnD,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC,CAAC;AAEH,KAAK,qBAAqB,GAAG,mBAAmB,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;AAE5E,eAAO,MAAM,UAAU,EA8ElB,qBAAqB,CAAC"}
+{"version":3,"file":"HeroButton.d.ts","sourceRoot":"","sources":["../../../../src/components/action/HeroButton/HeroButton.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAExD,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAC;IACrC,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,KAAK,GAAG,OAAO,CAAC;IAC7D,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC,CAAC;AAEH,KAAK,qBAAqB,GAAG,mBAAmB,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;AAE5E,eAAO,MAAM,UAAU,EAkFlB,qBAAqB,CAAC"}