import { SCREEN_SIZES as i } from "./constants.js";
const o = {
  content: [
    // Todo: can/should this be optimized? Where should we be looking for classes?
    "./src/**/*.{vue,ts,tsx,js,jsx,mdx}"
  ],
  prefix: "tw-",
  // ALWAYS include these color related classes. This allows us to dynamically
  // create color classes based on a color prop in our components instead of
  // listing the full class name like is encouraged in the docs.
  // https://tailwindcss.com/docs/content-configuration#using-regular-expressions
  //
  // Note: If any stash components change which color classes they dynamically build,
  // this needs to change. Keep this list as small as possible.
  //
  // Note: Patterns can only match against base utility names like /bg-red-.+/, and won’t match if the pattern
  // includes a variant modifier like /hover:bg-red-.+/.
  safelist: [
    {
      pattern: /(bg|text|border)-(purple|royal|blue|seafoam|teal|green|yellow|orange|red|ice)(-[1,5,7,9]00)$/
    },
    // Illustration.vue stroke color.
    {
      pattern: /stroke-(purple|royal|blue|seafoam|teal|green|yellow|orange|red|ice)-500$/
    },
    // Illustration.vue dynamic text.
    {
      pattern: /text-(purple|royal|blue|seafoam|teal|green|yellow|orange|red|ice)-400$/
    },
    // Dynamic bg color for components using the colorScheme function (Chip, Avatar, etc.)
    "bg-ice-200",
    // These are custom classes that we might not use in our Stash code, but we
    // define in Stash and want to keep in the final CSS for downstream use.
    "heading-jumbo",
    // allow white and black to be used dynamically
    "bg-white",
    "bg-black",
    "text-white",
    "text-black",
    "border-white",
    "border-black"
  ],
  // Conflicts with our own custom classes
  // https://tailwindcss.com/docs/content-configuration#discarding-classes
  blocklist: ["container"],
  theme: {
    screens: i,
    fontFamily: {
      mono: ["monospace"],
      sans: ["Sofia", "sans-serif"],
      /**
       * @deprecated - use `tw-font-sans` instead!
       */
      sofia: ["Sofia", "sans-serif"]
    },
    colors: {
      white: "#fff",
      black: "#000",
      transparent: "transparent",
      inherit: "inherit",
      // --color-white: #ffffff;
      // --color-black: #000000;
      // --color-blue-hover: rgba(0,114,240,0.74902);
      // --color-red-hover: rgba(228,0,43,0.74902);
      // --color-ice-700-hover: rgba(118,121,127,0.11765);
      // --color-white-hover: rgba(255,255,255,0.11765);
      // --button-secondary-blue-hover: rgba(0,114,240,0.11765);
      // --button-secondary-red-hover: rgba(228,0,43,0.11765);
      // https://tailwindcss.com/docs/upgrade-guide#fill-and-stroke-use-color-palette
      current: "currentColor",
      purple: {
        900: "#06040F",
        800: "#0C091E",
        700: "#120D2D",
        600: "#18123C",
        500: "#1E164B",
        400: "#4B456F",
        300: "#787393",
        200: "#A5A2B7",
        100: "#D2D0DB"
      },
      royal: {
        900: "#0A0C24",
        800: "#131747",
        700: "#1D236B",
        600: "#262E8E",
        500: "#303AB2",
        400: "#5961C1",
        300: "#8389D1",
        200: "#ACB0E0",
        100: "#D6D8F0"
      },
      blue: {
        900: "#001730",
        800: "#002E60",
        700: "#004490",
        600: "#005BC0",
        500: "#0072F0",
        400: "#338EF3",
        300: "#66AAF6",
        200: "#99C7F9",
        100: "#CCE3FC"
      },
      teal: {
        900: "#002528",
        800: "#004B50",
        700: "#017078",
        600: "#0196A0",
        500: "#01BBC8",
        400: "#34C9D3",
        300: "#67D6DE",
        200: "#99E4E9",
        100: "#CCF1F4"
      },
      green: {
        900: "#062313",
        800: "#0C4627",
        700: "#11683A",
        600: "#178B4E",
        500: "#1DAE61",
        400: "#4ABE81",
        300: "#77CEA0",
        200: "#A5DFC0",
        100: "#D2EFDF"
      },
      seafoam: {
        900: "#0C2C26",
        800: "#18584D",
        700: "#248373",
        600: "#30AF9A",
        500: "#3CDBC0",
        400: "#63E2CD",
        300: "#8AE9D9",
        200: "#B1F1E6",
        100: "#D8F8F2"
      },
      yellow: {
        900: "#332A00",
        800: "#665500",
        700: "#997F00",
        600: "#CCAA00",
        500: "#FFD400",
        400: "#FFDD33",
        300: "#FFE566",
        200: "#FFEE99",
        100: "#FFF6CC"
      },
      orange: {
        900: "#331E07",
        800: "#663B0F",
        700: "#995916",
        600: "#CC761E",
        500: "#FF9425",
        400: "#FFA951",
        300: "#FFBF7C",
        200: "#FFD4A8",
        100: "#FFEAD3"
      },
      red: {
        900: "#2E0009",
        800: "#5B0011",
        700: "#89001A",
        600: "#B60022",
        500: "#E4002B",
        400: "#E93355",
        300: "#EF6680",
        200: "#F499AA",
        100: "#FACCD5"
      },
      ice: {
        900: "#27282A",
        800: "#4F5055",
        700: "#76797F",
        600: "#9EA1AA",
        500: "#C5C9D4",
        400: "#D1D4DD",
        300: "#DCDFE5",
        200: "#E8E9EE",
        100: "#F3F4F6"
      }
    },
    // Custom additions to Tailwind's existing utility classes.
    // https://tailwindcss.com/docs/theme#extending-the-default-theme
    extend: {
      backgroundImage: {
        "scroll-shadow": "linear-gradient(0deg, rgb(197 201 212 / 35%), rgb(38 38 38 / 0%))"
      },
      borderWidth: {
        6: "6px",
        10: "10px",
        12: "12px"
      },
      // .tw-shadow-*
      boxShadow: {
        // Modules or Images if necessary (Previously Shadow Low)
        DEFAULT: "0px 2px 2px 0px rgba(38, 38, 38, 0.05), 0px 2px 6px 0px rgba(38, 38, 38, 0.10)",
        // Cards Scroll Lock Modules like Global Nav or the Bulk Select Mobile Pattern
        md: "0px 3px 3px 1px rgba(38, 38, 38, 0.05), 0px 3px 12px 1px rgba(38, 38, 38, 0.10)",
        // TBD
        lg: "0px 6px 6px 0px rgba(38, 38, 38, 0.05), 0px 6px 18px 2px rgba(38, 38, 38, 0.10), 0px 6px 18px 2px rgba(38, 38, 38, 0.15)",
        // Floating UIs like the Zendesk Help center
        xl: "0px 12px 12px 0px rgba(38, 38, 38, 0.05), 0px 12px 12px 2px rgba(38, 38, 38, 0.10), 0px 12px 24px 2px rgba(38, 38, 38, 0.15)",
        // Dropdowns, Selects, Menus
        "2xl": "0px 18px 18px 4px rgba(38, 38, 38, 0.05), 0px 18px 18px 4px rgba(38, 38, 38, 0.10), 0px 18px 30px 0px rgba(38, 38, 38, 0.15)",
        // Dialogs, Modals and any other Overlay types (Previously Shadow High)
        "3xl": "0px 24px 24px 0px rgba(38, 38, 38, 0.05), 0px 24px 24px 8px rgba(38, 38, 38, 0.10), 0px 24px 48px 8px rgba(38, 38, 38, 0.15)",
        // @deprecated - use `tw-shadow` instead!
        low: "0 2px 4px rgba(0, 15, 35, 0.06)",
        // @deprecated - use `tw-shadow-3xl` instead!
        high: "0 4px 8px rgba(0, 15, 35, 0.06)"
      },
      // .tw-text-*
      // Note: All these font SIZES match tailwind! We're only overriding default
      // line-height to match LL typography & adjust for Sofia.
      fontSize: {
        "2xl": [
          "1.5rem",
          {
            lineHeight: "calc(32/24)"
          }
        ],
        xl: [
          "1.25rem",
          {
            lineHeight: "calc(28/20)"
          }
        ],
        base: [
          "1rem",
          {
            lineHeight: "calc(24/16)"
          }
        ],
        sm: [
          "0.875rem",
          {
            lineHeight: "calc(20/14)"
          }
        ],
        xs: [
          "0.75rem",
          {
            lineHeight: "calc(16/12)"
          }
        ]
      },
      height: {
        input: "2.25rem",
        // 36px
        logo: "1.375rem",
        // 22px
        topbar: "3.5rem",
        // 56px
        chip: "1.375rem"
        // 22px
      },
      // .tw-max-h-*
      maxHeight: {
        "select-menu": "18.75rem"
        // 300px - sharable with dropdown, date, etc.
      },
      // .tw-leading-*
      lineHeight: {
        initial: "initial",
        "2xl": "calc(32/24)",
        xl: "calc(28/20)",
        base: "calc(24/16)",
        // for backwards compatibility with LL typography line-heights
        body: "calc(20/14)",
        small: "calc(16/12)",
        button: "calc(24/14)"
      },
      // .tw-min-w-*
      minWidth: {
        auto: "auto",
        input: "9rem"
        // 144px
      },
      // .tw-max-w-*
      maxWidth: {
        field: "18rem",
        // 288px - standard width used for form field elements
        initial: "initial",
        container: "87.5rem"
        // 1400px - max width used for page content
      },
      // .tw-rotate-*
      rotate: {
        270: "270deg"
      },
      // https://tailwindcss.com/docs/customizing-spacing
      spacing: {
        15: "3.75rem",
        // 60px (same as ll-spacing-6 to help migrate)
        // This is the only tailwind setting dependent on a variable and this is because the
        // variable actually has responsive styles baked in, and there's no way to do that
        // with tailwind. Defined in @leaflink/stash-theme tokens (spacing.css).
        gutter: "var(--grid-gutter)",
        sidebar: "17.5rem"
        // 280px
      },
      // .tw-w-*
      width: {
        container: "87.5rem",
        // 1400px
        "inline-edit": "8.75rem",
        // 140px - standard width used for ll-inline-edit elements
        "inline-edit-small": "5.6rem",
        // 90px - standard width used for smaller ll-inline-edit elements
        sidebar: "17.5rem",
        // 280px
        "select-menu": "5rem"
        // 80px
      },
      // .tw-z-*
      zIndex: {
        "-10": "-10",
        "-20": "-20",
        "-30": "-30",
        behind: "-1",
        content: "100",
        // general content on the page
        control: "200",
        // for UI controls, widgets, buttons, etc. These are given one level higher priority
        page: "300",
        // applies to page-level blocks, ie. site-header, side-nav, etc
        screen: "400",
        // covers all "standard" things visible on the screen: page-level blocks, UI/control things, general content
        modal: "1000",
        // covers all things except dialogs, including other elements promoted along the z-axis.
        dialog: "1001"
        // covers all things, including other elements promoted along the z-axis.
      },
      animation: {
        grow: "grow 1s",
        pulse: "pulse 2s cubic-bezier(.4, 0, .6,1) infinite",
        shake: "shake 1s ease 0s 1 normal none running",
        "fade-in": "fade-in 0.3s ease-out",
        "fade-out": "fade-out 0.3s ease-in"
      },
      keyframes: {
        grow: {
          "from, to": {
            transform: "scale3d(1, 1, 1)"
          },
          "50%": {
            transform: "scale3d(1.25, 1.25, 1.25)"
          }
        },
        pulse: {
          "0%, 100%": { opacity: "1" },
          "50%": { opacity: "0.25" }
        },
        shake: {
          "from, to": {
            transform: "translate3d(0, 0, 0)"
          },
          "10%, 30%, 50%, 70%, 90%": {
            transform: "translate3d(-10px, 0, 0)"
          },
          "20%, 40%, 60%, 80%": {
            transform: "translate3d(10px, 0, 0)"
          }
        },
        "fade-in": {
          "0%": { opacity: "0" },
          "100%": { opacity: "1" }
        },
        "fade-out": {
          "0%": { opacity: "1" },
          "100%": { opacity: "0" }
        }
      },
      // .tw-ease-*
      transitionTimingFunction: {
        "fast-out-slow-in": "cubic-bezier(0.4, 0, 0.2, 1)",
        "linear-out-slow-in": "cubic-bezier(0, 0, 0.2, 1)",
        "fast-out-linear-in": "cubic-bezier(0.4, 0, 1, 1)",
        "ease-in-out": "cubic-bezier(0.4, 0, 0.6, 1)",
        "fast-in-fast-out": "cubic-bezier(0.25, 0.8, 0.25, 1)",
        swing: "cubic-bezier(0.25, 0.8, 0.5, 1)"
      },
      // .tw-duration-*
      transitionDuration: {
        snap: "0.1s",
        fast: "0.165s",
        brisk: "0.333s",
        slow: "0.5s",
        sleepy: "1s"
      }
    }
  },
  corePlugins: {
    // because we have our own
    container: !1,
    preflight: !1
  }
}, p = () => {
  const e = [];
  return ["purple", "royal", "blue", "seafoam", "teal", "green", "yellow", "orange", "red", "ice"].forEach((a) => {
    ["bg", "text", "border", "stroke"].forEach((r) => {
      ["500", "400"].forEach((t) => {
        e.push(`${r}-${a}-${t}`);
      });
    });
  }), e;
};
export {
  o as default,
  p as getColorClasses
};
//# sourceMappingURL=tailwind-base.js.map
