@photoroom/ui 0.1.85 → 0.1.86

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photoroom/ui",
-  "version": "0.1.85",
+  "version": "0.1.86",
   "private": false,
   "description": "Photoroom design system components",
   "sideEffects": [

package/plugins/backgrounds.js

@@ -1,8 +1,22 @@
 /* oxlint-disable typescript/no-require-imports */
-const { default: flattenColorPalette } = require("tailwindcss/lib/util/flattenColorPalette");
-const { default: toColorValue } = require("tailwindcss/lib/util/toColorValue");
 const plugin = require("tailwindcss/plugin");
 
+// Inlined from tailwindcss v3 internals (removed in v4).
+const flattenColorPalette = (colors) =>
+  Object.assign(
+    {},
+    ...Object.entries(colors ?? {}).flatMap(([color, values]) =>
+      typeof values === "object"
+        ? Object.entries(flattenColorPalette(values)).map(([number, hex]) => ({
+            [color + (number === "DEFAULT" ? "" : `-${number}`)]: hex,
+          }))
+        : [{ [color]: values }]
+    )
+  );
+
+const toColorValue = (maybeFn, opts = {}) =>
+  typeof maybeFn === "function" ? maybeFn(opts) : maybeFn;
+
 module.exports = plugin(({ theme, addUtilities, matchUtilities }) => {
   matchUtilities(
     {

package/plugins/colors.js

@@ -396,31 +396,27 @@ module.exports = plugin(({ addBase, addUtilities }) => {
   });
 
   // Background (gradient)
+  const proGradient = (from, to) =>
+    `linear-gradient(to right, var(--color-${from}), var(--color-${to}))`;
   addUtilities({
     ".bg-background-pro": {
-      "@apply from-accent-500": {},
-      "@apply to-magic-accent-500": {},
+      "background-image": proGradient("accent-500", "magic-accent-500"),
     },
     ".bg-background-pro-hover": {
-      "@apply from-accent-400": {},
-      "@apply to-magic-accent-400": {},
+      "background-image": proGradient("accent-400", "magic-accent-400"),
     },
     ".bg-background-pro-down": {
-      "@apply from-accent-600": {},
-      "@apply to-magic-accent-600": {},
+      "background-image": proGradient("accent-600", "magic-accent-600"),
     },
     ".theme-dark": {
       ".bg-background-pro": {
-        "@apply from-accent-500": {},
-        "@apply to-magic-accent-500": {},
+        "background-image": proGradient("accent-500", "magic-accent-500"),
       },
       ".bg-background-pro-hover": {
-        "@apply from-accent-600": {},
-        "@apply to-magic-accent-600": {},
+        "background-image": proGradient("accent-600", "magic-accent-600"),
       },
       ".bg-background-pro-down": {
-        "@apply from-accent-400": {},
-        "@apply to-magic-accent-400": {},
+        "background-image": proGradient("accent-400", "magic-accent-400"),
       },
     },
   });
@@ -428,13 +424,11 @@ module.exports = plugin(({ addBase, addUtilities }) => {
   // Content (gradient)
   addUtilities({
     ".bg-content-pro": {
-      "@apply from-accent-500": {},
-      "@apply to-magic-accent-500": {},
+      "background-image": proGradient("accent-500", "magic-accent-500"),
     },
     ".theme-dark": {
       ".bg-content-pro": {
-        "@apply from-accent-500": {},
-        "@apply to-magic-accent-500": {},
+        "background-image": proGradient("accent-500", "magic-accent-500"),
       },
     },
   });

package/plugins/forms.js

@@ -1,8 +1,8 @@
 // oxlint-disable-next-line typescript/no-require-imports
 const plugin = require("tailwindcss/plugin");
 
-module.exports = plugin(({ addComponents }) => {
-  addComponents({
+module.exports = plugin(({ addBase }) => {
+  addBase({
     // this removes the up / down arrows in the number inputs
     'input[type="number"]': {
       "-moz-appearance": "textfield",

package/plugins/misc.js

@@ -72,20 +72,30 @@ module.exports = plugin(({ addComponents, addUtilities }) => {
     },
   });
 
-  // Color picker utilities (overrides for react-colorful)
+  // Color picker utilities (overrides for react-colorful).
+  // !important is needed because react-colorful injects unlayered <style>,
+  // which beats anything inside @layer utilities regardless of specificity.
   addUtilities({
     ".misc-color-picker": {
       ".react-colorful": {
-        "@apply flex w-full flex-col gap-3": {},
+        display: "flex !important",
+        width: "100% !important",
+        flexDirection: "column !important",
+        gap: "0.75rem !important",
       },
       ".react-colorful__saturation": {
-        "@apply h-40 w-full rounded-400 border-0": {},
+        height: "10rem !important",
+        width: "100% !important",
+        borderRadius: "8px !important",
+        border: "0 !important",
       },
       ".react-colorful__hue": {
-        "@apply h-4 rounded-full": {},
+        height: "1rem !important",
+        borderRadius: "9999px !important",
       },
       ".react-colorful__pointer": {
-        "@apply h-4 w-4": {},
+        height: "1rem !important",
+        width: "1rem !important",
       },
     },
   });
@@ -93,7 +103,10 @@ module.exports = plugin(({ addComponents, addUtilities }) => {
   // Magic gradient on HeroBlock
   addUtilities({
     ".text-hero-magic": {
-      [`@apply bg-gradient-to-br from-[#410CD9] to-[#F68EFE] bg-clip-text text-transparent`]: {},
+      "background-image": "linear-gradient(to bottom right, #410CD9, #F68EFE)",
+      "background-clip": "text",
+      "-webkit-background-clip": "text",
+      color: "transparent",
     },
   });
 });

package/plugins/variants.js

@@ -0,0 +1,9 @@
+// oxlint-disable-next-line typescript/no-require-imports
+const plugin = require("tailwindcss/plugin");
+
+// Custom variants that aren't expressible as plain breakpoint values in v4.
+// `tall` is a min-height media query; `mobile` is a max-width media query.
+module.exports = plugin(({ addVariant }) => {
+  addVariant("tall", "@media (min-height: 780px)");
+  addVariant("mobile", "@media (max-width: 600px)");
+});

package/tailwind.config.js

@@ -1,37 +1,6 @@
 // oxlint-disable typescript/no-require-imports
 const defaultTheme = require("tailwindcss/defaultTheme");
 
-/**
- * Returns a hex color from a tailwind color name
- * @param {string} color - The desired color – could be a variable (e.g. --my-custom-color) or an hex value (e.g #BADA55)
- * @returns {string} - The formatted string for tailwind
- */
-function withOpacityValue(color) {
-  const isVariable = color.startsWith("--");
-
-  const rgb = hexToRgb(color);
-
-  const value = isVariable ? `var(${color})` : `${rgb.r} ${rgb.g} ${rgb.b}`;
-
-  return ({ opacityValue }) => {
-    if (opacityValue === undefined) {
-      return `rgb(${value})`;
-    }
-    return `rgb(${value} / ${opacityValue})`;
-  };
-}
-
-function hexToRgb(hex) {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result
-    ? {
-        r: parseInt(result[1], 16),
-        g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16),
-      }
-    : null;
-}
-
 module.exports = {
   darkMode: ["class", ".theme-dark"], // https://tailwindcss.com/docs/dark-mode#basic-usage
   content: [
@@ -65,9 +34,8 @@ module.exports = {
     },
     extend: {
       screens: {
-        tall: { raw: "(min-height: 780px)" },
-        "2xl": { raw: "(min-width: 1512px)" },
-        "3xl": { raw: "(min-width: 1800px)" },
+        "2xl": "1512px",
+        "3xl": "1800px",
       },
       // Aspect Ratio: https://tailwindcss.com/docs/aspect-ratio#customizing-your-theme
       aspectRatio: {
@@ -294,23 +262,23 @@ module.exports = {
         /**
          * Do not use the tokens below (deprecated) !!
          */
-        yellow: withOpacityValue("#FFC710"),
-        green: withOpacityValue("#23D114"),
-        blue: withOpacityValue("#339CFF"),
-        pink: withOpacityValue("#FF47E0"),
+        yellow: "#FFC710",
+        green: "#23D114",
+        blue: "#339CFF",
+        pink: "#FF47E0",
         pastel: {
-          pink: withOpacityValue("#F68EFE"),
-          coral: withOpacityValue("#FFAAAA"),
-          yellow: withOpacityValue("#FFEC8D"),
-          "cyan-1": withOpacityValue("#22CBE8"),
-          "cyan-2": withOpacityValue("#B5F6FB"),
+          pink: "#F68EFE",
+          coral: "#FFAAAA",
+          yellow: "#FFEC8D",
+          "cyan-1": "#22CBE8",
+          "cyan-2": "#B5F6FB",
         },
         facebook: {
-          DEFAULT: withOpacityValue("#1877F2"),
-          dark: withOpacityValue("#0B63D4"),
-          light: withOpacityValue("#2C83F2"),
-          800: withOpacityValue("#5071FC"),
-          900: withOpacityValue("#4866e3"),
+          DEFAULT: "#1877F2",
+          dark: "#0B63D4",
+          light: "#2C83F2",
+          800: "#5071FC",
+          900: "#4866e3",
         },
       },
       boxShadow: {
@@ -505,6 +473,7 @@ module.exports = {
     require("tailwindcss-radix"),
     // Custom plugins
     require("./src/plugins/forms"),
+    require("./src/plugins/variants"),
     require("./src/plugins/typography"),
     require("./src/plugins/backgrounds"),
     require("./src/plugins/colors"),