@photoroom/ui 0.1.118 → 0.1.120

package/tailwind.config.js

@@ -1,490 +0,0 @@
-// oxlint-disable typescript/no-require-imports
-const defaultTheme = require("tailwindcss/defaultTheme");
-
-module.exports = {
-  darkMode: ["class", ".theme-dark"], // https://tailwindcss.com/docs/dark-mode#basic-usage
-  content: [
-    "./src/components/**/*.{ts,tsx}",
-    "./src/stories/**/*.{ts,tsx,mdx}",
-    "./../../node_modules/@photoroom/storybook-setup/decorators/**/*.{ts,tsx,mdx}",
-  ],
-  theme: {
-    fontFamily: {
-      brand: ["TT Photoroom", ...defaultTheme.fontFamily.sans],
-    },
-    opacity: {
-      ...defaultTheme.opacity,
-      15: "0.15",
-    },
-    // Border Radius: https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/%F0%9F%9B%A0-Design-System?node-id=6953%3A13224
-    borderRadius: {
-      inherit: "inherit",
-      full: defaultTheme.borderRadius.full,
-      none: defaultTheme.borderRadius.none,
-      150: "3px",
-      200: "4px",
-      250: "5px",
-      300: "6px",
-      350: "7px",
-      400: "8px",
-      450: "9px",
-      500: "10px",
-      "area-500": "18px",
-      "area-600": "34px",
-    },
-    extend: {
-      screens: {
-        "2xl": "1512px",
-        "3xl": "1800px",
-      },
-      // Aspect Ratio: https://tailwindcss.com/docs/aspect-ratio#customizing-your-theme
-      aspectRatio: {
-        "4/3": "4 / 3",
-      },
-      // Font Size: https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/%F0%9F%9B%A0-Design-System?node-id=6953%3A13370
-      fontSize: {
-        300: "10px",
-        400: "12px",
-        500: "14px",
-        600: "17px",
-        700: "20px",
-        800: "24px",
-        900: "29px",
-        1000: "35px",
-        1100: "42px",
-        1200: "50px",
-        1300: "60px",
-        1400: "72px",
-      },
-      // Font Weight: https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/%F0%9F%9B%A0-Design-System?node-id=6953%3A13333
-      fontWeight: {
-        inherit: "inherit",
-        300: 300, // Light
-        400: 400, // Regular
-        500: 500, // Medium
-        600: 600, // SemiBold
-        700: 700, // Bold
-        800: 800, // ExtraBold
-      },
-      // Line Height: https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/%F0%9F%9B%A0-Design-System?node-id=6953%3A13353
-      lineHeight: {
-        400: "110%", // Large heading
-        500: "130%", // Heading, component
-        600: "150%", // Body
-      },
-      leading: {
-        DEFAULT: 1.2,
-      },
-      borderWidth: {
-        0.5: "0.5px",
-      },
-      ringWidth: {
-        3: "3px",
-      },
-      colors: {
-        // Base
-        black: "var(--color-black)",
-        "black-alpha-1": "var(--color-black-alpha-1)", // 000000, 5%
-        "black-alpha-2": "var(--color-black-alpha-2)", // 000000, 10%
-        "black-alpha-3": "var(--color-black-alpha-3)", // 000000, 15%
-        "black-alpha-4": "var(--color-black-alpha-4)", // 000000, 24%
-        "black-alpha-5": "var(--color-black-alpha-5)", // 000000, 32%
-        "black-alpha-6": "var(--color-black-alpha-6)", // 000000, 42%
-        "black-alpha-7": "var(--color-black-alpha-7)", // 000000, 56%
-        "black-alpha-8": "var(--color-black-alpha-8)", // 000000, 75%
-        white: "var(--color-white)",
-        "white-1": "var(--color-white-1)",
-        "white-2": "var(--color-white-2)",
-        "white-alpha-1": "var(--color-white-alpha-1)", // FFFFFF, 7%
-        "white-alpha-2": "var(--color-white-alpha-2)", // FFFFFF, 12%
-        "white-alpha-3": "var(--color-white-alpha-3)", // FFFFFF, 18%
-        "white-alpha-4": "var(--color-white-alpha-4)", // FFFFFF, 41%
-        "white-alpha-5": "var(--color-white-alpha-5)", // FFFFFF, 49%
-        "white-alpha-6": "var(--color-white-alpha-6)", // FFFFFF, 60%
-        "white-alpha-7": "var(--color-white-alpha-7)", // FFFFFF, 72%
-        "white-alpha-8": "var(--color-white-alpha-8)", // FFFFFF, 81%
-        "white-alpha-9": "var(--color-white-alpha-9)", // FFFFFF, 85%
-
-        "neutral-0": "var(--color-neutral-0)",
-        "neutral-50": "var(--color-neutral-50)",
-        "neutral-100": "var(--color-neutral-100)",
-        "neutral-200": "var(--color-neutral-200)",
-        "neutral-300": "var(--color-neutral-300)",
-        "neutral-400": "var(--color-neutral-400)",
-        "neutral-500": "var(--color-neutral-500)",
-        "neutral-600": "var(--color-neutral-600)",
-        "neutral-700": "var(--color-neutral-700)",
-        "neutral-800": "var(--color-neutral-800)",
-        "neutral-900": "var(--color-neutral-900)",
-        "neutral-alpha-100": "var(--color-neutral-alpha-100)", // 000000, 5%
-        "neutral-alpha-200": "var(--color-neutral-alpha-200)", // 000000, 10%
-        "neutral-alpha-300": "var(--color-neutral-alpha-300)", // 000000, 15%
-        "neutral-alpha-400": "var(--color-neutral-alpha-400)", // 000000, 29%
-        "neutral-alpha-500": "var(--color-neutral-alpha-500)", // 000000, 37%
-
-        "sand-50": "var(--color-sand-50)",
-
-        "accent-300": "var(--color-accent-300)",
-        "accent-400": "var(--color-accent-400)",
-        "accent-500": "var(--color-accent-500)",
-        "accent-600": "var(--color-accent-600)",
-        "accent-alpha-1": "var(--color-accent-alpha-1)", // 5826DE, 6%
-        "accent-alpha-2": "var(--color-accent-alpha-2)", // 400ADB, 11%
-        "accent-alpha-3": "var(--color-accent-alpha-3)", // 430EDC, 17%
-        "accent-alpha-4": "var(--color-accent-alpha-4)", // 3E07DA, 27%
-        "accent-alpha-5": "var(--color-accent-alpha-5)", // 3701D7, 35%
-
-        "positive-400": "var(--color-positive-400)",
-        "positive-500": "var(--color-positive-500)",
-        "positive-600": "var(--color-positive-600)",
-        "positive-alpha-1": "var(--color-positive-alpha-1)", // 0FAF7D, 10%
-        "positive-alpha-2": "var(--color-positive-alpha-2)", // 08A671, 19%
-        "positive-alpha-3": "var(--color-positive-alpha-3)", // 03A572, 29%
-
-        "negative-400": "var(--color-negative-400)",
-        "negative-500": "var(--color-negative-500)",
-        "negative-600": "var(--color-negative-600)",
-        "negative-alpha-1": "var(--color-negative-alpha-1)", // FF6969, 10%
-        "negative-alpha-2": "var(--color-negative-alpha-2)", // FF1818, 13%
-        "negative-alpha-3": "var(--color-negative-alpha-3)", // FF4A4A, 26%
-
-        "magic-accent-400": "var(--color-magic-accent-400)",
-        "magic-accent-500": "var(--color-magic-accent-500)",
-        "magic-accent-600": "var(--color-magic-accent-600)",
-
-        "animation-accent-500": "var(--color-animation-accent-500)",
-
-        "camera-accent-500": "var(--color-camera-accent-500)",
-
-        "secondary-moon-grape": "var(--color-secondary-moon-grape)",
-        "secondary-electric-litchi": "var(--color-secondary-electric-litchi)",
-        "secondary-sunny-mango": "var(--color-secondary-sunny-mango)",
-        "secondary-aqua-kiwi": "var(--color-secondary-aqua-kiwi)",
-        "secondary-coral-cherry": "var(--color-secondary-coral-cherry)",
-        "secondary-navy": "var(--color-secondary-navy)",
-
-        "misc-replaceable": "var(--color-replaceable)",
-
-        // Aliases
-
-        "surface-default": "var(--color-surface-default)",
-        "surface-alternate": "var(--color-surface-alternate)",
-        "surface-low": "var(--color-surface-low)",
-        "surface-high": "var(--color-surface-high)",
-        "surface-higher": "var(--color-surface-higher)",
-
-        "background-default": "var(--color-background-default)",
-        "background-hover": "var(--color-background-hover)",
-        "background-down": "var(--color-background-down)",
-        "background-subdued": "var(--color-background-subdued)",
-        "background-subdued-hover": "var(--color-background-subdued-hover)",
-        "background-subdued-down": "var(--color-background-subdued-down)",
-        "background-accent": "var(--color-background-accent)",
-        "background-accent-hover": "var(--color-background-accent-hover)",
-        "background-accent-down": "var(--color-background-accent-down)",
-        "background-accent-subdued": "var(--color-background-accent-subdued)",
-        "background-accent-subdued-hover": "var(--color-background-accent-subdued-hover)",
-        "background-accent-subdued-down": "var(--color-background-accent-subdued-down)",
-        "background-positive": "var(--color-background-positive)",
-        "background-positive-hover": "var(--color-background-positive-hover)",
-        "background-positive-down": "var(--color-background-positive-down)",
-        "background-positive-subdued": "var(--color-background-positive-subdued)",
-        "background-positive-subdued-hover": "var(--color-background-positive-subdued-hover)",
-        "background-positive-subdued-down": "var(--color-background-positive-subdued-down)",
-        "background-negative": "var(--color-background-negative)",
-        "background-negative-hover": "var(--color-background-negative-hover)",
-        "background-negative-down": "var(--color-background-negative-down)",
-        "background-negative-subdued": "var(--color-background-negative-subdued)",
-        "background-negative-subdued-hover": "var(--color-background-negative-subdued-hover)",
-        "background-negative-subdued-down": "var(--color-background-negative-subdued-down)",
-        "background-tab": "var(--color-background-tab)",
-        "background-bar": "var(--color-background-bar)",
-        "background-white": "var(--color-background-white)",
-        "background-white-hover": "var(--color-background-white-hover)",
-        "background-white-down": "var(--color-background-white-down)",
-        "background-white-subdued": "var(--color-background-white-subdued)",
-        "background-white-subdued-hover": "var(--color-background-white-subdued-hover)",
-        "background-white-subdued-down": "var(--color-background-white-subdued-down)",
-        "background-spotlight": "var(--color-background-spotlight)",
-        "background-spotlight-down": "var(--color-background-spotlight-down)",
-        "background-inverted": "var(--color-background-inverted)",
-        "background-promotional": "var(--color-background-promotional)",
-        "background-asset": "#e6e6e6",
-        "background-overlay": "var(--color-background-overlay)",
-        "background-tooltip": "var(--color-background-tooltip)",
-
-        "content-primary": "var(--color-content-primary)",
-        "content-subdued-primary": "var(--color-content-subdued-primary)",
-        "content-secondary": "var(--color-content-secondary)",
-        "content-tertiary": "var(--color-content-tertiary)",
-        "content-accent": "var(--color-content-accent)",
-        "content-accent-hover": "var(--color-content-accent-hover)",
-        "content-accent-down": "var(--color-content-accent-down)",
-        "content-positive": "var(--color-content-positive)",
-        "content-positive-hover": "var(--color-content-positive-hover)",
-        "content-positive-down": "var(--color-content-positive-down)",
-        "content-negative": "var(--color-content-negative)",
-        "content-negative-hover": "var(--color-content-negative-hover)",
-        "content-negative-down": "var(--color-content-negative-down)",
-        "content-camera-accent": "var(--color-content-camera-accent)",
-        "content-white-primary": "var(--color-content-white-primary)",
-        "content-white-secondary": "var(--color-content-white-secondary)",
-        "content-black-primary": "var(--color-content-black-primary)",
-        "content-white-primary-inverted": "var(--color-content-white-primary-inverted)",
-        "content-white-subdued-primary-inverted":
-          "var(--color-content-white-subdued-primary-inverted)",
-
-        "misc-divider": "var(--color-misc-divider)",
-        "misc-divider-ios": "var(--color-misc-divider-ios)",
-        "misc-border": "var(--color-misc-border)",
-        "misc-border-emphasized": "var(--color-misc-border-emphasized)",
-        "misc-border-box": "var(--color-misc-border-box)",
-        "misc-border-box-hover": "var(--color-misc-border-box-hover)",
-        "misc-border-box-down": "var(--color-misc-border-box-down)",
-        "misc-border-sidebar": "var(--color-misc-border-sidebar)",
-        "misc-border-default": "var(--color-misc-border-default)",
-        "misc-stack-layer-1": "var(--color-misc-stack-layer-1)",
-        "misc-stack-layer-2": "var(--color-misc-stack-layer-2)",
-        "misc-focus-indicator": "var(--color-misc-focus-indicator)",
-        "misc-focus-indicator-subdued": "var(--color-misc-focus-indicator-subdued)",
-        "misc-white-focus-indicator": "var(--color-misc-white-focus-indicator)",
-        "misc-hairline": "var(--color-neutral-alpha-300)",
-
-        "misc-visual-hover": "var(--color-misc-visual-hover)",
-        "misc-visual-down": "var(--color-misc-visual-down)",
-        "misc-automated-exports": "var(--color-misc-automated-exports)",
-
-        "misc-ai-image": "var(--color-misc-ai-image)",
-        "misc-ai-video": "var(--color-misc-ai-video)",
-
-        checker: "var(--color-checker)",
-
-        /**
-         * Do not use the tokens below (deprecated) !!
-         */
-        yellow: "#FFC710",
-        green: "#23D114",
-        blue: "#339CFF",
-        pink: "#FF47E0",
-        pastel: {
-          pink: "#F68EFE",
-          coral: "#FFAAAA",
-          yellow: "#FFEC8D",
-          "cyan-1": "#22CBE8",
-          "cyan-2": "#B5F6FB",
-        },
-        facebook: {
-          DEFAULT: "#1877F2",
-          dark: "#0B63D4",
-          light: "#2C83F2",
-          800: "#5071FC",
-          900: "#4866e3",
-        },
-      },
-      boxShadow: {
-        // https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/%F0%9F%9B%A0-Design-System?node-id=7711%3A13275
-        300: [
-          "0px 0.5px 3.13px rgba(0, 0, 0, 0.06)",
-          "0px 1px 6.25px rgba(0, 0, 0, 0.03)",
-          "0px 2px 12.5px rgba(0, 0, 0, 0.02)",
-        ],
-        400: [
-          "0px 1px 5px rgba(0, 0, 0, 0.07)",
-          "0px 2px 10px rgba(0, 0, 0, 0.03)",
-          "0px 4px 20px rgba(0, 0, 0, 0.02)",
-        ],
-        500: [
-          "0px 2px 8px rgba(0, 0, 0, 0.08)",
-          "0px 4px 16px rgba(0, 0, 0, 0.04)",
-          "0px 8px 32px rgba(0, 0, 0, 0.02)",
-        ],
-        600: [
-          "0px 4px 12.8px rgba(0, 0, 0, 0.09)",
-          "0px 8px 25.6px rgba(0, 0, 0, 0.05)",
-          "0px 16px 51.2px rgba(0, 0, 0, 0.02)",
-        ],
-        700: [
-          "0px 8px 20.48px rgba(0, 0, 0, 0.11)",
-          "0px 16px 40.96px rgba(0, 0, 0, 0.05)",
-          "0px 32px 81.92px rgba(0, 0, 0, 0.03)",
-        ],
-        800: [
-          "0px 16px 32.77px rgba(0, 0, 0, 0.12)",
-          "0px 32px 65.54px rgba(0, 0, 0, 0.06)",
-          "0px 64px 131.07px rgba(0, 0, 0, 0.03)",
-        ],
-        "background-generator": [
-          "0px 151px 60px rgba(174, 174, 194, 0.01)",
-          "0px 85px 51px rgba(174, 174, 194, 0.05)",
-          "0px 38px 38px rgba(174, 174, 194, 0.09)",
-          "0px 9px 21px rgba(174, 174, 194, 0.1)",
-          "0px 0px 0px rgba(174, 174, 194, 0.1)",
-        ],
-      },
-      spacing: {
-        18: "4.5rem", // 72px
-        22: "5.5rem", // 88px
-      },
-      // https://tailwindcss.com/docs/max-width#customizing-your-theme
-      maxWidth: {
-        xxs: "13rem", // 208px
-        mdlg: "29rem", // 464px, mdlg standing for medium-large..?
-        "1.5xl": "40rem", // 640px
-        "2.5xl": "45rem", // 720px
-        "5.5xl": "67rem", // 1072px
-      },
-      padding: {
-        26: "6.5rem", // 104px
-      },
-      gridTemplateColumns: {
-        header: "1fr auto 1fr",
-      },
-      keyframes: {
-        "bone-pulse": {
-          "0%": {
-            backgroundColor: "var(--color-neutral-alpha-100)",
-          },
-          "50%": {
-            backgroundColor: "var(--color-neutral-alpha-300)",
-          },
-          "100%": {
-            backgroundColor: "var(--color-neutral-alpha-100)",
-          },
-        },
-        "tooltip-slide-down": {
-          from: {
-            opacity: 0,
-            transform: "translateY(-10px)",
-          },
-          to: {
-            opacity: 1,
-            transform: "translateY(0)",
-          },
-        },
-        "tooltip-slide-up": {
-          from: {
-            opacity: 0,
-            transform: "translateY(10px)",
-          },
-          to: {
-            opacity: 1,
-            transform: "translateY(0)",
-          },
-        },
-        "tooltip-slide-left": {
-          from: {
-            opacity: 0,
-            transform: "translateX(10px)",
-          },
-          to: {
-            opacity: 1,
-            transform: "translateX(0)",
-          },
-        },
-        "tooltip-slide-right": {
-          from: {
-            opacity: 0,
-            transform: "translateX(-10px)",
-          },
-          to: {
-            opacity: 1,
-            transform: "translateX(0)",
-          },
-        },
-        "button-loading-indeterminate-wiggle": {
-          "0%": {
-            transform: "translate(-200%, -50%)",
-          },
-          "50%": {
-            transform: "translate(200%, -50%)",
-          },
-          "100%": {
-            transform: "translate(-200%, -50%)",
-          },
-        },
-        "dialog-overlay-enter": {
-          from: { opacity: 0 },
-          to: { opacity: 1 },
-        },
-        "dialog-overlay-leave": {
-          from: { opacity: 1 },
-          to: { opacity: 0 },
-        },
-        "dialog-enter": {
-          from: { transform: "scale(0.95)" },
-          to: { transform: "scale(1)" },
-        },
-        "dialog-leave": {
-          from: { transform: "scale(1)" },
-          to: { transform: "scale(0.95)" },
-        },
-        "spotlight-fade-subdued": {
-          "0%": { backgroundColor: "var(--color-background-spotlight)" },
-          "100%": { backgroundColor: "var(--color-background-subdued)" },
-        },
-        "spotlight-fade-white": {
-          "0%": { backgroundColor: "var(--color-background-spotlight)" },
-          "100%": { backgroundColor: "var(--color-background-white)" },
-        },
-        "radix-accordion-slide-down": {
-          from: {
-            height: 0,
-          },
-          to: {
-            height: "var(--radix-accordion-content-height)",
-          },
-        },
-        "radix-accordion-slide-up": {
-          from: {
-            height: "var(--radix-accordion-content-height)",
-          },
-          to: {
-            height: 0,
-          },
-        },
-      },
-      animation: {
-        "bone-pulse": "bone-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite",
-        "tooltip-slide-down": "tooltip-slide-down 0.2s",
-        "tooltip-slide-up": "tooltip-slide-up 0.2s",
-        "tooltip-slide-left": "tooltip-slide-left 0.2s",
-        "tooltip-slide-right": "tooltip-slide-right 0.2s",
-        "button-loading-indeterminate-wiggle":
-          "button-loading-indeterminate-wiggle 2498ms cubic-bezier(0.5, 0.0, 0.5, 1.0) infinite",
-        "dialog-overlay-enter": "dialog-overlay-enter 0.2s ease-out",
-        "dialog-overlay-leave": "dialog-overlay-leave 0.2s ease-in",
-        "dialog-enter": "dialog-enter 0.2s ease-out",
-        "dialog-leave": "dialog-leave 0.2s ease-in",
-        "spotlight-fade-subdued": "spotlight-fade-subdued 500ms forwards 1500ms",
-        "spotlight-fade-white": "spotlight-fade-white 500ms forwards 1500ms",
-        "radix-accordion-slide-down":
-          "radix-accordion-slide-down 300ms cubic-bezier(0.87, 0, 0.13, 1)",
-        "radix-accordion-slide-up": "radix-accordion-slide-up 300ms cubic-bezier(0.87, 0, 0.13, 1)",
-      },
-      filter: {
-        "font-thumbnail": "var(--font-thumbnail-filter)",
-      },
-    },
-  },
-  plugins: [
-    require("@tailwindcss/typography"),
-    require("@tailwindcss/forms"),
-    require("@tailwindcss/container-queries"),
-    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"),
-    require("./src/plugins/content-to-edge"),
-    require("./src/plugins/icon-to-edge"),
-    require("./src/plugins/text-to-leading"),
-    require("./src/plugins/icon-offset"),
-    require("./src/plugins/icon-size"),
-    require("./src/plugins/transitions"),
-    require("./src/plugins/size"),
-    require("./src/plugins/spacing"),
-    require("./src/plugins/misc"),
-  ],
-};