@photoroom/ui 0.1.118 → 0.1.120

package/plugins/icon-to-edge.js

@@ -1,101 +0,0 @@
-// oxlint-disable-next-line typescript/no-require-imports
-const plugin = require("tailwindcss/plugin");
-
-module.exports = plugin(({ addUtilities }) => {
-  /**
-   * Icon to edge
-   * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/Design-system?type=design&node-id=16204-13067&mode=dev
-   */
-  addUtilities({
-    // Default
-    ...["pl", "pr", "py"].reduce((acc, prefix) => {
-      return {
-        ...acc,
-        [`.icon-to-edge-${prefix}-200`]: {
-          [`@apply ${prefix}-[4px]`]: {},
-        },
-        [`.icon-to-edge-${prefix}-250`]: {
-          [`@apply ${prefix}-[5px]`]: {},
-        },
-        [`.icon-to-edge-${prefix}-300`]: {
-          [`@apply ${prefix}-[6px]`]: {},
-        },
-        [`.icon-to-edge-${prefix}-350`]: {
-          [`@apply ${prefix}-[6px]`]: {},
-        },
-        [`.icon-to-edge-${prefix}-400`]: {
-          [`@apply ${prefix}-[8px]`]: {},
-        },
-        [`.icon-to-edge-${prefix}-450`]: {
-          [`@apply ${prefix}-[9px]`]: {},
-        },
-        [`.icon-to-edge-${prefix}-500`]: {
-          [`@apply ${prefix}-[10px]`]: {},
-        },
-        [`.icon-to-edge-${prefix}-550`]: {
-          [`@apply ${prefix}-[11px]`]: {},
-        },
-        [`.icon-to-edge-${prefix}-600`]: {
-          [`@apply ${prefix}-[12px]`]: {},
-        },
-        [`.icon-to-edge-${prefix}-650`]: {
-          [`@apply ${prefix}-[13px]`]: {},
-        },
-        [`.icon-to-edge-${prefix}-700`]: {
-          [`@apply ${prefix}-[14px]`]: {},
-        },
-        [`.icon-to-edge-${prefix}-750`]: {
-          [`@apply ${prefix}-[15px]`]: {},
-        },
-        [`.icon-to-edge-${prefix}-800`]: {
-          [`@apply ${prefix}-[16px]`]: {},
-        },
-      };
-    }, {}),
-    // Spacious
-    ...["pl", "pr"].reduce((acc, prefix) => {
-      return {
-        ...acc,
-        [`.icon-to-edge-spacious-${prefix}-200`]: {
-          [`@apply ${prefix}-[5px]`]: {},
-        },
-        [`.icon-to-edge-spacious-${prefix}-250`]: {
-          [`@apply ${prefix}-[7px]`]: {},
-        },
-        [`.icon-to-edge-spacious-${prefix}-300`]: {
-          [`@apply ${prefix}-[9px]`]: {},
-        },
-        [`.icon-to-edge-spacious-${prefix}-350`]: {
-          [`@apply ${prefix}-[9px]`]: {},
-        },
-        [`.icon-to-edge-spacious-${prefix}-400`]: {
-          [`@apply ${prefix}-[11px]`]: {},
-        },
-        [`.icon-to-edge-spacious-${prefix}-450`]: {
-          [`@apply ${prefix}-[12px]`]: {},
-        },
-        [`.icon-to-edge-spacious-${prefix}-500`]: {
-          [`@apply ${prefix}-[14px]`]: {},
-        },
-        [`.icon-to-edge-spacious-${prefix}-550`]: {
-          [`@apply ${prefix}-[16px]`]: {},
-        },
-        [`.icon-to-edge-spacious-${prefix}-600`]: {
-          [`@apply ${prefix}-[17px]`]: {},
-        },
-        [`.icon-to-edge-spacious-${prefix}-650`]: {
-          [`@apply ${prefix}-[18px]`]: {},
-        },
-        [`.icon-to-edge-spacious-${prefix}-700`]: {
-          [`@apply ${prefix}-[19px]`]: {},
-        },
-        [`.icon-to-edge-spacious-${prefix}-750`]: {
-          [`@apply ${prefix}-[21px]`]: {},
-        },
-        [`.icon-to-edge-spacious-${prefix}-800`]: {
-          [`@apply ${prefix}-[23px]`]: {},
-        },
-      };
-    }, {}),
-  });
-});

package/plugins/misc.js

@@ -1,112 +0,0 @@
-// oxlint-disable-next-line typescript/no-require-imports
-const plugin = require("tailwindcss/plugin");
-
-// https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/Design-system?type=design&node-id=20464-7406&mode=dev
-module.exports = plugin(({ addComponents, addUtilities }) => {
-  // Scrollbar utilities
-  addComponents({
-    ".scrollbar-none": {
-      "scrollbar-width": "none",
-      "&::-webkit-scrollbar": {
-        display: "none",
-      },
-    },
-  });
-
-  // Dropdown utilities
-  addUtilities({
-    ".misc-hairline-spacing": {
-      "@apply gap-0.5": {},
-    },
-    ".misc-dropdown-padding": {
-      "@apply p-1": {},
-    },
-    ".misc-dropdown-padding-spacious": {
-      "@apply p-4": {},
-    },
-    ".misc-dropdown-rounding": {
-      "@apply rounded-500": {},
-    },
-    ".misc-dropdown-inner-rounding": {
-      "@apply rounded-300": {},
-    },
-  });
-
-  // Dialog utilities
-  addUtilities({
-    ".misc-dialog-rounding": {
-      "@apply rounded-500": {},
-    },
-    ".misc-dialog-overlay": {
-      "background-color": "rgba(0,0,0,25%)",
-    },
-  });
-
-  // Border/ring utilities
-  addUtilities({
-    ".misc-border-size-hairline": {
-      "@apply border-0.5": {},
-    },
-    ".misc-border-size-default": {
-      "@apply border": {},
-    },
-    ".misc-border-size-selection": {
-      "@apply border-2": {},
-    },
-    ".misc-border-size-focus-ring": {
-      "@apply ring-3": {},
-    },
-    // Outer border using box-shadow so it doesn't affect the element's bounding box.
-    // Use this instead of `border border-misc-border` on floating/elevated UI elements
-    // (pills, menus, popovers) to keep the layout size exact and render the correct
-    // semi-transparent misc-border token.
-    ".misc-outer-border": {
-      "@apply ring-1 ring-misc-border": {},
-    },
-  });
-
-  // Shadow utilities
-  addUtilities({
-    ".misc-shadow-selection": {
-      "@apply shadow-[inset_0_0_0_1px_var(--color-white)]": {},
-    },
-  });
-
-  // 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": {
-        display: "flex !important",
-        width: "100% !important",
-        flexDirection: "column !important",
-        gap: "0.75rem !important",
-      },
-      ".react-colorful__saturation": {
-        height: "10rem !important",
-        width: "100% !important",
-        borderRadius: "8px !important",
-        border: "0 !important",
-      },
-      ".react-colorful__hue": {
-        height: "1rem !important",
-        borderRadius: "9999px !important",
-      },
-      ".react-colorful__pointer": {
-        height: "1rem !important",
-        width: "1rem !important",
-      },
-    },
-  });
-
-  // Magic gradient on HeroBlock
-  addUtilities({
-    ".text-hero-magic": {
-      "background-image": "linear-gradient(to bottom right, #410CD9, #F68EFE)",
-      "background-clip": "text",
-      "-webkit-background-clip": "text",
-      color: "transparent",
-    },
-  });
-});

package/plugins/size.js

@@ -1,154 +0,0 @@
-// oxlint-disable-next-line typescript/no-require-imports
-const plugin = require("tailwindcss/plugin");
-
-module.exports = plugin(({ addUtilities }) => {
-  /**
-   * Size
-   * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/Design-system?type=design&node-id=16712-19165&mode=dev
-   */
-  addUtilities({
-    // Width & Height
-    ".size-150": {
-      "@apply h-3": {},
-      "@apply w-3": {},
-    },
-    ".size-200": {
-      "@apply h-4": {},
-      "@apply w-4": {},
-    },
-    ".size-250": {
-      "@apply h-5": {},
-      "@apply w-5": {},
-    },
-    ".size-300": {
-      "@apply h-6": {},
-      "@apply w-6": {},
-    },
-    ".size-350": {
-      "@apply h-7": {},
-      "@apply w-7": {},
-    },
-    ".size-400": {
-      "@apply h-8": {},
-      "@apply w-8": {},
-    },
-    ".size-450": {
-      "@apply h-9": {},
-      "@apply w-9": {},
-    },
-    ".size-500": {
-      "@apply h-10": {},
-      "@apply w-10": {},
-    },
-    ".size-550": {
-      "@apply h-11": {},
-      "@apply w-11": {},
-    },
-    ".size-600": {
-      "@apply h-12": {},
-      "@apply w-12": {},
-    },
-    ".size-650": {
-      "@apply h-[52px]": {}, // h-13 does not exist. https://tailwindcss.com/docs/height
-      "@apply w-[52px]": {}, // w-13 does not exist. https://tailwindcss.com/docs/width
-    },
-    ".size-700": {
-      "@apply h-14": {},
-      "@apply w-14": {},
-    },
-    ".size-750": {
-      "@apply h-[60px]": {}, // h-15 does not exist. https://tailwindcss.com/docs/height
-      "@apply w-[60px]": {}, // w-15 does not exist. https://tailwindcss.com/docs/width
-    },
-    ".size-800": {
-      "@apply h-16": {},
-      "@apply w-16": {},
-    },
-    // Width
-    ".size-w-150": {
-      "@apply w-3": {},
-    },
-    ".size-w-200": {
-      "@apply w-4": {},
-    },
-    ".size-w-250": {
-      "@apply w-5": {},
-    },
-    ".size-w-300": {
-      "@apply w-6": {},
-    },
-    ".size-w-350": {
-      "@apply w-7": {},
-    },
-    ".size-w-400": {
-      "@apply w-8": {},
-    },
-    ".size-w-450": {
-      "@apply w-9": {},
-    },
-    ".size-w-500": {
-      "@apply w-10": {},
-    },
-    ".size-w-550": {
-      "@apply w-11": {},
-    },
-    ".size-w-600": {
-      "@apply w-12": {},
-    },
-    ".size-w-650": {
-      "@apply w-[52px]": {}, // w-13 does not exist. https://tailwindcss.com/docs/width
-    },
-    ".size-w-700": {
-      "@apply w-14": {},
-    },
-    ".size-w-750": {
-      "@apply w-[60px]": {}, // w-15 does not exist. https://tailwindcss.com/docs/width
-    },
-    ".size-w-800": {
-      "@apply w-16": {},
-    },
-    // Height
-    ".size-h-150": {
-      "@apply h-3": {},
-    },
-    ".size-h-200": {
-      "@apply h-4": {},
-    },
-    ".size-h-250": {
-      "@apply h-5": {},
-    },
-    ".size-h-300": {
-      "@apply h-6": {},
-    },
-    ".size-h-350": {
-      "@apply h-7": {},
-    },
-    ".size-h-400": {
-      "@apply h-8": {},
-    },
-    ".size-h-450": {
-      "@apply h-9": {},
-    },
-    ".size-h-500": {
-      "@apply h-10": {},
-    },
-    ".size-h-550": {
-      "@apply h-11": {},
-    },
-    ".size-h-600": {
-      "@apply h-12": {},
-    },
-    ".size-h-650": {
-      "@apply h-[52px]": {}, // h-13 does not exist. https://tailwindcss.com/docs/width
-    },
-    ".size-h-700": {
-      "@apply h-14": {},
-    },
-    ".size-h-750": {
-      "@apply h-[60px]": {}, // h-15 does not exist. https://tailwindcss.com/docs/width
-    },
-    ".size-h-800": {
-      "@apply h-16": {},
-    },
-  });
-});

package/plugins/spacing.js

@@ -1,84 +0,0 @@
-// oxlint-disable-next-line typescript/no-require-imports
-const plugin = require("tailwindcss/plugin");
-
-module.exports = plugin(({ addUtilities }) => {
-  addUtilities({
-    /**
-     * External paddings
-     * https://www.figma.com/file/5G9xtfAPMEgTJoLQbAg1KR/Website?node-id=7043-23918&t=Lt0OG56xEr6Z3xzr-4
-     */
-    ...["pt", "pb", "py"].reduce((acc, prefix) => {
-      return {
-        ...acc,
-        [`.${prefix}-e400`]: {
-          [`@apply ${prefix}-10`]: {},
-          [`@apply sm:${prefix}-12`]: {},
-          [`@apply lg:${prefix}-16`]: {},
-        },
-        [`.${prefix}-e500`]: {
-          [`@apply ${prefix}-10`]: {},
-          [`@apply sm:${prefix}-16`]: {},
-          [`@apply lg:${prefix}-20`]: {},
-        },
-        [`.${prefix}-e600`]: {
-          [`@apply ${prefix}-12`]: {},
-          [`@apply sm:${prefix}-20`]: {},
-          [`@apply lg:${prefix}-24`]: {},
-        },
-        [`.${prefix}-e700`]: {
-          [`@apply ${prefix}-14`]: {},
-          [`@apply sm:${prefix}-24`]: {},
-          [`@apply lg:${prefix}-28`]: {},
-        },
-        [`.${prefix}-e800`]: {
-          [`@apply ${prefix}-16`]: {},
-          [`@apply sm:${prefix}-28`]: {},
-          [`@apply lg:${prefix}-32`]: {},
-        },
-        [`.${prefix}-e900`]: {
-          [`@apply ${prefix}-18`]: {},
-          [`@apply sm:${prefix}-32`]: {},
-          [`@apply lg:${prefix}-36`]: {},
-        },
-        [`.${prefix}-e1000`]: {
-          [`@apply ${prefix}-20`]: {},
-          [`@apply sm:${prefix}-36`]: {},
-          [`@apply lg:${prefix}-40`]: {},
-        },
-      };
-    }, {}),
-    /**
-     * Internal paddings
-     * https://www.figma.com/file/5G9xtfAPMEgTJoLQbAg1KR/Website?node-id=7050-26673&t=Lt0OG56xEr6Z3xzr-4
-     */
-    ...["pt", "pb", "py", "gap"].reduce((acc, prefix) => {
-      return {
-        ...acc,
-        [`.${prefix}-i200`]: {
-          [`@apply ${prefix}-8`]: {},
-        },
-        [`.${prefix}-i300`]: {
-          [`@apply ${prefix}-10`]: {},
-        },
-        [`.${prefix}-i400`]: {
-          [`@apply ${prefix}-12`]: {},
-        },
-        [`.${prefix}-i500`]: {
-          [`@apply ${prefix}-12`]: {},
-          [`@apply sm:${prefix}-14`]: {},
-          [`@apply lg:${prefix}-16`]: {},
-        },
-        [`.${prefix}-i600`]: {
-          [`@apply ${prefix}-12`]: {},
-          [`@apply sm:${prefix}-16`]: {},
-          [`@apply lg:${prefix}-20`]: {},
-        },
-        [`.${prefix}-i1000`]: {
-          [`@apply ${prefix}-24`]: {},
-          [`@apply sm:${prefix}-28`]: {},
-          [`@apply lg:${prefix}-32`]: {},
-        },
-      };
-    }, {}),
-  });
-});

package/plugins/text-to-leading.js

@@ -1,61 +0,0 @@
-// oxlint-disable-next-line typescript/no-require-imports
-const plugin = require("tailwindcss/plugin");
-
-module.exports = plugin(({ addUtilities }) => {
-  /**
-   * Text to leading
-   * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/Design-system?type=design&node-id=11366-12592&t=kZrq6Rbq3zAyydf4-4
-   */
-  addUtilities({
-    // Default
-    ".text-to-leading-300": {
-      "@apply ml-[6px]": {},
-    },
-    ".text-to-leading-400": {
-      "@apply ml-[7px]": {},
-    },
-    ".text-to-leading-500": {
-      "@apply ml-[8px]": {},
-    },
-    ".text-to-leading-600": {
-      "@apply ml-[10px]": {},
-    },
-    ".text-to-leading-700": {
-      "@apply ml-[12px]": {},
-    },
-
-    // Compact
-    ".text-to-leading-compact-300": {
-      "@apply ml-[3px]": {},
-    },
-    ".text-to-leading-compact-400": {
-      "@apply ml-[3.3px]": {},
-    },
-    ".text-to-leading-compact-500": {
-      "@apply ml-[4px]": {},
-    },
-    ".text-to-leading-compact-600": {
-      "@apply ml-[5px]": {},
-    },
-    ".text-to-leading-compact-700": {
-      "@apply ml-[6px]": {},
-    },
-
-    // Spacious
-    ".text-to-leading-spacious-300": {
-      "@apply ml-[8px]": {},
-    },
-    ".text-to-leading-spacious-400": {
-      "@apply ml-[10px]": {},
-    },
-    ".text-to-leading-spacious-500": {
-      "@apply ml-[12px]": {},
-    },
-    ".text-to-leading-spacious-600": {
-      "@apply ml-[14px]": {},
-    },
-    ".text-to-leading-spacious-700": {
-      "@apply ml-[17px]": {},
-    },
-  });
-});

package/plugins/transitions.js

@@ -1,15 +0,0 @@
-// oxlint-disable-next-line typescript/no-require-imports
-const plugin = require("tailwindcss/plugin");
-
-/**
- * Interaction Transition
- * https://www.figma.com/design/cHgANa7dtzDDGXk7dKuAOQ/Prism?node-id=62868-23303&m=dev
- */
-module.exports = plugin(({ addUtilities }) => {
-  addUtilities({
-    ".interaction-transition": {
-      "transition-timing-function": "cubic-bezier(0.2, 1, 0.4, 1)",
-      "transition-duration": "200ms",
-    },
-  });
-});