npm - @photoroom/ui - Versions diffs - 0.1.117 → 0.1.119 - Mend

@photoroom/ui 0.1.117 → 0.1.119

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

package/README.md +12 -1
package/animations.css +13 -0
package/colors.css +445 -0
package/components/content/BatchTile/BatchTile.d.ts +3 -1
package/components/content/BatchTile/BatchTile.d.ts.map +1 -1
package/components/index.d.ts +1 -0
package/components/index.d.ts.map +1 -1
package/components/input/OptionSelectionListItem/OptionSelectionListItem.d.ts +41 -0
package/components/input/OptionSelectionListItem/OptionSelectionListItem.d.ts.map +1 -0
package/components/input/OptionSelectionListItem/index.d.ts +2 -0
package/components/input/OptionSelectionListItem/index.d.ts.map +1 -0
package/index.css +1 -1
package/index.mjs +12 -12
package/package.json +5 -5
package/theme.css +1420 -0
package/plugins/backgrounds.js +0 -43
package/plugins/colors.js +0 -435
package/plugins/content-to-edge.js +0 -104
package/plugins/forms.js +0 -21
package/plugins/icon-offset.js +0 -29
package/plugins/icon-size.js +0 -39
package/plugins/icon-to-edge.js +0 -101
package/plugins/misc.js +0 -112
package/plugins/size.js +0 -154
package/plugins/spacing.js +0 -84
package/plugins/text-to-leading.js +0 -61
package/plugins/transitions.js +0 -15
package/plugins/typography.js +0 -523
package/plugins/variants.js +0 -9
package/tailwind.config.js +0 -490

package/plugins/typography.js DELETED Viewed

@@ -1,523 +0,0 @@
-// oxlint-disable-next-line typescript/no-require-imports
-const plugin = require("tailwindcss/plugin");
-module.exports = plugin(({ addComponents }) => {
-  /**
-   * Component character styles
-   * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/%F0%9F%9B%A0-Design-System?node-id=7217%3A13600
-   */
-  addComponents({
-    // Default
-    ".component-300": {
-      "@apply text-300": {},
-      "@apply font-500": {},
-      "@apply leading-500": {},
-    },
-    ".component-400": {
-      "@apply text-400": {},
-      "@apply font-500": {},
-      "@apply leading-500": {},
-    },
-    ".component-500": {
-      "@apply text-500": {},
-      "@apply font-500": {},
-      "@apply leading-500": {},
-    },
-    ".component-600": {
-      "@apply text-600": {},
-      "@apply font-500": {},
-      "@apply leading-500": {},
-    },
-    ".component-700": {
-      "@apply text-700": {},
-      "@apply font-500": {},
-      "@apply leading-500": {},
-    },
-    ".component-800": {
-      "@apply text-800": {},
-      "@apply font-500": {},
-      "@apply leading-500": {},
-    },
-    ".component-900": {
-      "@apply text-900": {},
-      "@apply font-500": {},
-      "@apply leading-500": {},
-      "@apply -tracking-[0.058px]": {},
-    },
-    // Light
-    // https://www.figma.com/design/cHgANa7dtzDDGXk7dKuAOQ/Prism?node-id=16712-22778&m=dev
-    ".component-light-300": {
-      "@apply text-300": {},
-      "@apply font-400": {},
-      "@apply leading-500": {},
-    },
-    ".component-light-400": {
-      "@apply text-400": {},
-      "@apply font-400": {},
-      "@apply leading-500": {},
-    },
-    ".component-light-500": {
-      "@apply text-500": {},
-      "@apply font-400": {},
-      "@apply leading-500": {},
-    },
-    ".component-light-600": {
-      "@apply text-600": {},
-      "@apply font-400": {},
-      "@apply leading-500": {},
-    },
-    ".component-light-700": {
-      "@apply text-700": {},
-      "@apply font-400": {},
-      "@apply leading-500": {},
-    },
-    ".component-light-800": {
-      "@apply text-800": {},
-      "@apply font-400": {},
-      "@apply leading-500": {},
-    },
-    ".component-light-900": {
-      "@apply text-900": {},
-      "@apply font-400": {},
-      "@apply leading-500": {},
-      "@apply -tracking-[0.0667px]": {},
-    },
-    // Semi strong
-    ".component-semi-strong-300": {
-      "@apply text-300": {},
-      "@apply font-600": {},
-      "@apply leading-500": {},
-    },
-    ".component-semi-strong-400": {
-      "@apply text-400": {},
-      "@apply font-600": {},
-      "@apply leading-500": {},
-    },
-    ".component-semi-strong-500": {
-      "@apply text-500": {},
-      "@apply font-600": {},
-      "@apply leading-500": {},
-    },
-    ".component-semi-strong-600": {
-      "@apply text-600": {},
-      "@apply font-600": {},
-      "@apply leading-500": {},
-    },
-    ".component-semi-strong-700": {
-      "@apply text-700": {},
-      "@apply font-600": {},
-      "@apply leading-500": {},
-    },
-    ".component-semi-strong-800": {
-      "@apply text-800": {},
-      "@apply font-600": {},
-      "@apply leading-500": {},
-    },
-    ".component-semi-strong-900": {
-      "@apply text-900": {},
-      "@apply font-600": {},
-      "@apply leading-500": {},
-      "@apply -tracking-[0.0493px]": {},
-    },
-    // Strong
-    ".component-strong-300": {
-      "@apply text-300": {},
-      "@apply font-700": {},
-      "@apply leading-500": {},
-    },
-    ".component-strong-400": {
-      "@apply text-400": {},
-      "@apply font-700": {},
-      "@apply leading-500": {},
-    },
-    ".component-strong-500": {
-      "@apply text-500": {},
-      "@apply font-700": {},
-      "@apply leading-500": {},
-    },
-    ".component-strong-600": {
-      "@apply text-600": {},
-      "@apply font-700": {},
-      "@apply leading-500": {},
-    },
-    ".component-strong-700": {
-      "@apply text-700": {},
-      "@apply font-700": {},
-      "@apply leading-500": {},
-    },
-    ".component-strong-800": {
-      "@apply text-800": {},
-      "@apply font-700": {},
-      "@apply leading-500": {},
-    },
-    ".component-strong-900": {
-      "@apply text-900": {},
-      "@apply font-700": {},
-      "@apply leading-500": {},
-      "@apply -tracking-[0.0377px]": {},
-    },
-  });
-  /**
-   * Body character styles
-   * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/%F0%9F%9B%A0-Design-System?node-id=7265%3A14332
-   */
-  addComponents({
-    // Default
-    ".body-300": {
-      "@apply text-300": {},
-      "@apply font-500": {},
-      "@apply leading-600": {},
-    },
-    ".body-400": {
-      "@apply text-400": {},
-      "@apply font-500": {},
-      "@apply leading-600": {},
-    },
-    ".body-500": {
-      "@apply text-500": {},
-      "@apply font-500": {},
-      "@apply leading-600": {},
-    },
-    ".body-600": {
-      "@apply text-600": {},
-      "@apply font-500": {},
-      "@apply leading-600": {},
-    },
-    ".body-700": {
-      "@apply text-700": {},
-      "@apply font-500": {},
-      "@apply leading-600": {},
-    },
-    ".body-800": {
-      "@apply text-800": {},
-      "@apply font-500": {},
-      "@apply leading-600": {},
-    },
-    ".body-900": {
-      "@apply text-900": {},
-      "@apply font-500": {},
-      "@apply leading-600": {},
-    },
-    ".body-1000": {
-      "@apply text-1000": {},
-      "@apply font-500": {},
-      "@apply leading-600": {},
-    },
-    // Light
-    // https://www.figma.com/design/cHgANa7dtzDDGXk7dKuAOQ/Prism?node-id=16712-22506&m=dev
-    ".body-light-300": {
-      "@apply text-300": {},
-      "@apply font-400": {},
-      "@apply leading-600": {},
-    },
-    ".body-light-400": {
-      "@apply text-400": {},
-      "@apply font-400": {},
-      "@apply leading-600": {},
-    },
-    ".body-light-500": {
-      "@apply text-500": {},
-      "@apply font-400": {},
-      "@apply leading-600": {},
-    },
-    ".body-light-600": {
-      "@apply text-600": {},
-      "@apply font-400": {},
-      "@apply leading-600": {},
-    },
-    ".body-light-700": {
-      "@apply text-700": {},
-      "@apply font-400": {},
-      "@apply leading-600": {},
-    },
-    ".body-light-800": {
-      "@apply text-800": {},
-      "@apply font-400": {},
-      "@apply leading-600": {},
-    },
-    ".body-light-900": {
-      "@apply text-900": {},
-      "@apply font-400": {},
-      "@apply leading-600": {},
-      "@apply -tracking-[0.0667px]": {},
-    },
-    ".body-light-1000": {
-      "@apply text-1000": {},
-      "@apply font-400": {},
-      "@apply leading-600": {},
-      "@apply -tracking-[0.0203px]": {},
-    },
-    // Semi strong
-    ".body-semi-strong-300": {
-      "@apply text-300": {},
-      "@apply font-600": {},
-      "@apply leading-600": {},
-    },
-    ".body-semi-strong-400": {
-      "@apply text-400": {},
-      "@apply font-600": {},
-      "@apply leading-600": {},
-    },
-    ".body-semi-strong-500": {
-      "@apply text-500": {},
-      "@apply font-600": {},
-      "@apply leading-600": {},
-    },
-    ".body-semi-strong-600": {
-      "@apply text-600": {},
-      "@apply font-600": {},
-      "@apply leading-600": {},
-    },
-    ".body-semi-strong-700": {
-      "@apply text-700": {},
-      "@apply font-600": {},
-      "@apply leading-600": {},
-    },
-    ".body-semi-strong-800": {
-      "@apply text-800": {},
-      "@apply font-600": {},
-      "@apply leading-600": {},
-    },
-    ".body-semi-strong-900": {
-      "@apply text-900": {},
-      "@apply font-600": {},
-      "@apply leading-600": {},
-    },
-    ".body-semi-strong-1000": {
-      "@apply text-1000": {},
-      "@apply font-600": {},
-      "@apply leading-600": {},
-    },
-    // Strong
-    ".body-strong-300": {
-      "@apply text-300": {},
-      "@apply font-700": {},
-      "@apply leading-600": {},
-    },
-    ".body-strong-400": {
-      "@apply text-400": {},
-      "@apply font-700": {},
-      "@apply leading-600": {},
-    },
-    ".body-strong-500": {
-      "@apply text-500": {},
-      "@apply font-700": {},
-      "@apply leading-600": {},
-    },
-    ".body-strong-600": {
-      "@apply text-600": {},
-      "@apply font-700": {},
-      "@apply leading-600": {},
-    },
-    ".body-strong-700": {
-      "@apply text-700": {},
-      "@apply font-700": {},
-      "@apply leading-600": {},
-    },
-    ".body-strong-800": {
-      "@apply text-800": {},
-      "@apply font-700": {},
-      "@apply leading-600": {},
-    },
-    ".body-strong-900": {
-      "@apply text-900": {},
-      "@apply font-700": {},
-      "@apply leading-600": {},
-    },
-    ".body-strong-1000": {
-      "@apply text-1000": {},
-      "@apply font-700": {},
-      "@apply leading-600": {},
-    },
-  });
-  /**
-   * Headings Thin
-   * https://figma.com/design/cHgANa7dtzDDGXk7dKuAOQ/Prism?node-id=23281-8050&t=jhbOdzGMbMu9mJNm-4
-   */
-  addComponents({
-    ".heading-thin-300": {
-      "@apply text-500": {},
-      "@apply font-500": {},
-      "@apply leading-500": {},
-    },
-    ".heading-thin-400": {
-      "@apply text-600": {},
-      "@apply font-500": {},
-      "@apply leading-500": {},
-    },
-    ".heading-thin-500": {
-      "@apply text-700": {},
-      "@apply font-500": {},
-      "@apply leading-500": {},
-    },
-    ".heading-thin-600": {
-      "@apply text-800": {},
-      "@apply font-500": {},
-      "@apply leading-500": {},
-    },
-    ".heading-thin-700": {
-      "@apply text-900": {},
-      "@apply font-500": {},
-      "@apply leading-400": {},
-      "@apply -tracking-[0.058px]": {},
-    },
-    ".heading-thin-800": {
-      "@apply text-1000": {},
-      "@apply font-500": {},
-      "@apply leading-400": {},
-      "@apply -tracking-[0.175px]": {},
-    },
-    ".heading-thin-900": {
-      "@apply text-1100": {},
-      "@apply font-500": {},
-      "@apply leading-400": {},
-      "@apply -tracking-[0.357px]": {},
-    },
-    ".heading-thin-1000": {
-      "@apply text-1200": {},
-      "@apply font-500": {},
-      "@apply leading-400": {},
-      "@apply -tracking-[0.625px]": {},
-    },
-    ".heading-thin-1100": {
-      "@apply text-1300": {},
-      "@apply font-500": {},
-      "@apply leading-400": {},
-      "@apply -tracking-[1.05px]": {},
-    },
-    ".heading-thin-1200": {
-      "@apply text-1400": {},
-      "@apply font-500": {},
-      "@apply leading-400": {},
-      "@apply -tracking-[1.692px]": {},
-    },
-  });
-  /**
-   * Headings Light
-   * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/%F0%9F%9B%A0-Design-System?node-id=7285%3A13522
-   */
-  addComponents({
-    ".heading-light-300": {
-      "@apply text-500": {},
-      "@apply font-600": {},
-      "@apply leading-500": {},
-    },
-    ".heading-light-400": {
-      "@apply text-600": {},
-      "@apply font-600": {},
-      "@apply leading-500": {},
-    },
-    ".heading-light-500": {
-      "@apply text-700": {},
-      "@apply font-600": {},
-      "@apply leading-500": {},
-    },
-    ".heading-light-600": {
-      "@apply text-800": {},
-      "@apply font-600": {},
-      "@apply leading-500": {},
-    },
-    ".heading-light-700": {
-      "@apply text-900": {},
-      "@apply font-600": {},
-      "@apply leading-400": {},
-      "@apply -tracking-[0.0493px]": {},
-    },
-    ".heading-light-800": {
-      "@apply text-1000": {},
-      "@apply font-600": {},
-      "@apply leading-400": {},
-      "@apply -tracking-[0.147px]": {},
-    },
-    ".heading-light-900": {
-      "@apply text-1100": {},
-      "@apply font-600": {},
-      "@apply leading-400": {},
-      "@apply -tracking-[0.2982px]": {},
-    },
-    ".heading-light-1000": {
-      "@apply text-1200": {},
-      "@apply font-600": {},
-      "@apply leading-400": {},
-      "@apply -tracking-[0.52px]": {},
-    },
-    ".heading-light-1100": {
-      "@apply text-1300": {},
-      "@apply font-600": {},
-      "@apply leading-400": {},
-      "@apply -tracking-[0.876px]": {},
-    },
-    ".heading-light-1200": {
-      "@apply text-1400": {},
-      "@apply font-600": {},
-      "@apply leading-400": {},
-      "@apply -tracking-[1.4112px]": {},
-    },
-  });
-  /**
-   * Headings Default
-   * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/%F0%9F%9B%A0-Design-System?node-id=7285%3A13522
-   */
-  addComponents({
-    ".heading-300": {
-      "@apply text-500": {},
-      "@apply font-700": {},
-      "@apply leading-500": {},
-    },
-    ".heading-400": {
-      "@apply text-600": {},
-      "@apply font-700": {},
-      "@apply leading-500": {},
-    },
-    ".heading-500": {
-      "@apply text-700": {},
-      "@apply font-700": {},
-      "@apply leading-500": {},
-    },
-    ".heading-600": {
-      "@apply text-800": {},
-      "@apply font-700": {},
-      "@apply leading-500": {},
-    },
-    ".heading-700": {
-      "@apply text-900": {},
-      "@apply font-700": {},
-      "@apply leading-400": {},
-      "@apply -tracking-[0.0377px]": {},
-    },
-    ".heading-800": {
-      "@apply text-1000": {},
-      "@apply font-700": {},
-      "@apply leading-400": {},
-      "@apply -tracking-[0.1155px]": {},
-    },
-    ".heading-900": {
-      "@apply text-1100": {},
-      "@apply font-700": {},
-      "@apply leading-400": {},
-      "@apply -tracking-[0.2394px]": {},
-    },
-    ".heading-1000": {
-      "@apply text-1200": {},
-      "@apply font-700": {},
-      "@apply leading-400": {},
-      "@apply -tracking-[0.415px]": {},
-    },
-    ".heading-1100": {
-      "@apply text-1300": {},
-      "@apply font-700": {},
-      "@apply leading-400": {},
-      "@apply -tracking-[0.702px]": {},
-    },
-    ".heading-1200": {
-      "@apply text-1400": {},
-      "@apply font-700": {},
-      "@apply leading-400": {},
-      "@apply -tracking-[1.1304px]": {},
-    },
-  });
-});

package/plugins/variants.js DELETED Viewed

@@ -1,9 +0,0 @@
-// 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)");
-});