@leaflink/stash 44.0.0-beta.6 → 44.0.0-beta.7

package/dist/tailwind-base.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leaflink/stash",
-  "version": "44.0.0-beta.6",
+  "version": "44.0.0-beta.7",
   "description": "LeafLink's design system.",
   "homepage": "https://stash.leaflink.com",
   "main": "./dist/index.ts",
@@ -138,7 +138,7 @@
     "autoprefixer": "^9.7.4",
     "babel-core": "^7.0.0-bridge.0",
     "eslint": "^8.41.0",
-    "eslint-config-leaflink": "^3.0.0",
+    "eslint-config-leaflink": "^3.1.0",
     "jsdom": "^22.1.0",
     "postcss": "^8.4.35",
     "postcss-html": "^1.5.0",

package/tailwind-base.ts

@@ -22,7 +22,7 @@ export default {
   // 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]00)?$/,
+      pattern: /(bg|text|border)-(purple|royal|blue|seafoam|teal|green|yellow|orange|red|ice)(-[1,5,7]00)$/,
     },
     // Illustration.vue stroke color.
     {
@@ -37,6 +37,8 @@ export default {
     // 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

package/dist/Tabs.vue_used_vue_type_style_index_0_lang.module-0af1e1cf.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tabs.vue_used_vue_type_style_index_0_lang.module-0af1e1cf.js","sources":["../src/components/Tabs/keys.ts","../src/components/Tabs/models.ts","../src/components/Tabs/Tabs.vue"],"sourcesContent":["import { Injection } from '../../../types/utils';\nimport { TabsInjection } from './models';\n\nexport const TABS_INJECTION: Injection<TabsInjection> = Object.freeze({\n  key: Symbol('TABS_INJECTION_KEY'),\n});\n","import { ComputedRef } from 'vue';\n\nexport enum TabVariant {\n  Line = 'line',\n  Enclosed = 'enclosed',\n}\n\nexport type TabVariants = `${TabVariant}`;\n\nexport interface TabsInjection {\n  activeTab: ComputedRef<string>;\n  variant: ComputedRef<TabVariants>;\n  setActiveTab: (newTabValue: string) => void;\n}\n","<script lang=\"ts\">\n  import { TabVariant, TabVariants } from './models';\n\n  export * from './keys';\n  export * from './models';\n\n  export interface TabsProps {\n    /**\n     * The currently active tab value\n     */\n    activeTab: string;\n\n    /**\n     * Tabs variant\n     */\n    variant?: TabVariants;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import debounce from 'lodash-es/debounce';\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, onBeforeUnmount, onDeactivated, onMounted, onUpdated, provide, Ref, ref, useCssModule } from 'vue';\n\n  import { DEBOUNCE } from '../../constants';\n  import { t } from '../../locale';\n  import Dropdown from '../Dropdown/Dropdown.vue';\n  import Icon from '../Icon/Icon.vue';\n  import { TABS_INJECTION } from './keys';\n\n  const emit =\n    defineEmits<{\n      (e: 'update:activeTab', newTabValue: TabsProps['activeTab']): void;\n    }>();\n\n  const props = withDefaults(defineProps<TabsProps>(), {\n    variant: TabVariant.Line,\n  });\n  const classes = useCssModule();\n\n  const tabListEl = ref();\n  const moreDropdownMenuEl = ref();\n  const observer: Ref<IntersectionObserver | undefined> = ref(undefined);\n  const hasIntersectionObserver = 'IntersectionObserver' in window;\n  const overflowIds = ref<Set<string>>(new Set());\n  const moreDropdownWidth = ref(0);\n  const moreDropdownEl = ref<InstanceType<typeof Dropdown>>();\n  const moreMenuId = uniqueId('more-dropdown-menu-');\n  const isMoreMenuOpen = ref(false);\n\n  const currentActiveTab = computed({\n    get() {\n      return props.activeTab;\n    },\n    set(nv: TabsProps['activeTab']) {\n      emit('update:activeTab', nv);\n    },\n  });\n\n  function setActiveTab(newTabValue: TabsProps['activeTab']) {\n    currentActiveTab.value = newTabValue;\n  }\n\n  provide(TABS_INJECTION.key, {\n    activeTab: computed(() => currentActiveTab.value),\n    variant: computed(() => props.variant),\n    setActiveTab,\n  });\n\n  function initObserve() {\n    if (!hasIntersectionObserver) {\n      return;\n    }\n\n    if (!tabListEl.value) {\n      return;\n    }\n\n    const tabs = Array.from(tabListEl.value?.children as HTMLLIElement[]);\n    const options = {\n      root: tabListEl.value,\n      rootMargin: '0px',\n      threshold: Array.from({ length: 100 }).map((v, i) => (i + 1) / 100),\n    };\n\n    observer.value = new IntersectionObserver((entries) => {\n      entries.forEach((entry) => {\n        const dataId = entry.target.getAttribute('id') as string;\n        /**\n         * Check for partial intersection.\n         * Zooming out can result in ratio of approx 0.984\n         * Anything higher will result in nav items disappearing\n         */\n        if (entry.intersectionRatio > 0.94) {\n          // show tab, hide in dropdown\n          if (overflowIds.value.has(dataId)) {\n            overflowIds.value.delete(dataId);\n          }\n        } else {\n          // hide tab, show in dropdown\n          if (dataId && !overflowIds.value.has(dataId)) {\n            overflowIds.value.add(dataId);\n          }\n        }\n      });\n    }, options);\n\n    tabs.forEach((element) => {\n      observer.value?.observe(element);\n      if (overflowIds.value.has(element.getAttribute('id') as string)) {\n        element.classList.add('tw-invisible');\n      } else {\n        element.classList.remove('tw-invisible');\n      }\n    });\n\n    moreDropdownWidth.value = moreDropdownEl.value?.$el?.getBoundingClientRect().width;\n\n    if (!moreDropdownMenuEl.value) {\n      return;\n    }\n\n    const dropdownList = Array.from(moreDropdownMenuEl.value.children as HTMLLIElement[]);\n    dropdownList.forEach((element) => {\n      const firstElementChild = element.firstElementChild as Element;\n      firstElementChild.className = '';\n      element.className = '';\n\n      element.classList.add(\n        classes['tabs__overflowed-tab'],\n        'tw-rounded',\n        'tw-text-sm',\n        'tw-p-1.5',\n        'tw-text-left',\n        'tw-cursor-pointer',\n        'tw-text-ice-700',\n        'hover:tw-text-white',\n        'hover:tw-bg-blue-500',\n        'aria-disabled:tw-text-ice-500',\n        'aria-disabled:tw-pointer-events-none',\n        'aria-disabled:hover:tw-text-ice-500',\n        'aria-disabled:hover:tw-bg-inherit',\n        'aria-disabled:hover:tw-cursor-default',\n        'aria-selected:tw-text-white',\n        'aria-selected:tw-bg-blue-500',\n      );\n\n      if (!overflowIds.value.has(element.getAttribute('id') as string)) {\n        element.classList.add('tw-hidden');\n      } else {\n        element.classList.remove('tw-hidden');\n      }\n\n      element.removeEventListener('click', () => {});\n    });\n  }\n\n  const debouncedInitObserve = debounce(initObserve, DEBOUNCE.FAST, { leading: true });\n\n  function destroyObserver() {\n    if (observer.value) {\n      observer.value.disconnect();\n      observer.value = undefined;\n    }\n  }\n\n  onMounted(() => {\n    initObserve();\n  });\n\n  onUpdated(() => {\n    destroyObserver();\n    debouncedInitObserve();\n  });\n\n  onDeactivated(() => {\n    destroyObserver();\n  });\n\n  onBeforeUnmount(() => {\n    destroyObserver();\n  });\n\n  function onMoreClick(toggleMoreDropdown) {\n    toggleMoreDropdown();\n    isMoreMenuOpen.value = !isMoreMenuOpen.value;\n  }\n</script>\n\n<template>\n  <div class=\"root stash-tabs tw-relative\" role=\"tabList\" data-test=\"stash-tabs\">\n    <ul\n      ref=\"tabListEl\"\n      :style=\"{\n        width: `calc(100% - ${moreDropdownWidth}px)`,\n      }\"\n      class=\"stash-tabs-list tw-flex tw-items-end tw-overflow-hidden\"\n      :class=\"{\n        'stash-tabs-list--line': variant === 'line',\n        'stash-tabs-list--enclosed': variant === 'enclosed',\n        'tw-gap-6': variant === 'line',\n      }\"\n    >\n      <slot></slot>\n\n      <Dropdown v-if=\"overflowIds.size\" ref=\"moreDropdownEl\" class=\"!tw-absolute tw-right-0 tw-top-0\">\n        <template #toggle=\"{ toggle }\">\n          <button\n            aria-haspopup=\"menu\"\n            :aria-controls=\"moreMenuId\"\n            :aria-expanded=\"isMoreMenuOpen\"\n            class=\"\n              tw-flex\n              tw-cursor-pointer\n              tw-items-center\n              tw-justify-center\n              tw-border-solid\n              tw-px-6\n              tw-py-1.5\n              tw-text-sm\n              tw-font-medium\n              tw-text-blue-500\n              hover:tw-text-blue-700\n            \"\n            :class=\"{ 'tw-border-t-4 tw-border-transparent': props.variant === 'enclosed' }\"\n            type=\"button\"\n            @click=\"onMoreClick(toggle)\"\n          >\n            {{ t('ll.more') }}\n            <Icon name=\"caret-down\" />\n          </button>\n        </template>\n        <template #default>\n          <ul\n            :id=\"moreMenuId\"\n            ref=\"moreDropdownMenuEl\"\n            class=\"tabs__dropdown-list tw-space-y-1.5 tw-px-1.5 tw-pb-1.5\"\n            role=\"menu\"\n          >\n            <slot></slot>\n          </ul>\n        </template>\n      </Dropdown>\n    </ul>\n  </div>\n</template>\n\n<style module>\n  .tabs__overflowed-tab > a {\n    /* prevents the global link styles to overwrite the overflowed tab styles */\n    &,\n    &:hover,\n    &:focus {\n      color: inherit;\n    }\n  }\n</style>\n"],"names":["TABS_INJECTION","TabVariant","classes","useCssModule","tabListEl","ref","moreDropdownMenuEl","observer","hasIntersectionObserver","overflowIds","moreDropdownWidth","moreDropdownEl","moreMenuId","uniqueId","isMoreMenuOpen","currentActiveTab","computed","props","nv","emit","setActiveTab","newTabValue","provide","initObserve","tabs","_a","options","v","i","entries","entry","dataId","element","_c","_b","firstElementChild","debouncedInitObserve","debounce","DEBOUNCE","destroyObserver","onMounted","onUpdated","onDeactivated","onBeforeUnmount","onMoreClick","toggleMoreDropdown"],"mappings":";;;;;;;AAGa,MAAAA,KAA2C,OAAO,OAAO;AAAA,EACpE,KAAK,OAAO,oBAAoB;AAClC,CAAC;ACHW,IAAAC,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,WAAW,YAFDA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;iBCoCJC,IAAUC,KAEVC,IAAYC,KACZC,IAAqBD,KACrBE,IAAkDF,EAAI,MAAS,GAC/DG,IAA0B,0BAA0B,QACpDC,IAAcJ,EAAqB,oBAAA,IAAK,CAAA,GACxCK,IAAoBL,EAAI,CAAC,GACzBM,IAAiBN,KACjBO,IAAaC,EAAS,qBAAqB,GAC3CC,IAAiBT,EAAI,EAAK,GAE1BU,IAAmBC,EAAS;AAAA,MAChC,MAAM;AACJ,eAAOC,EAAM;AAAA,MACf;AAAA,MACA,IAAIC,GAA4B;AAC9B,QAAAC,EAAK,oBAAoBD,CAAE;AAAA,MAC7B;AAAA,IAAA,CACD;AAED,aAASE,EAAaC,GAAqC;AACzD,MAAAN,EAAiB,QAAQM;AAAA,IAC3B;AAEA,IAAAC,EAAQtB,GAAe,KAAK;AAAA,MAC1B,WAAWgB,EAAS,MAAMD,EAAiB,KAAK;AAAA,MAChD,SAASC,EAAS,MAAMC,EAAM,OAAO;AAAA,MACrC,cAAAG;AAAA,IAAA,CACD;AAED,aAASG,IAAc;;AAKjB,UAJA,CAACf,KAID,CAACJ,EAAU;AACb;AAGF,YAAMoB,IAAO,MAAM,MAAKC,IAAArB,EAAU,UAAV,gBAAAqB,EAAiB,QAA2B,GAC9DC,IAAU;AAAA,QACd,MAAMtB,EAAU;AAAA,QAChB,YAAY;AAAA,QACZ,WAAW,MAAM,KAAK,EAAE,QAAQ,IAAI,CAAC,EAAE,IAAI,CAACuB,GAAGC,OAAOA,IAAI,KAAK,GAAG;AAAA,MAAA;AAoChE,UAjCJrB,EAAS,QAAQ,IAAI,qBAAqB,CAACsB,MAAY;AAC7C,QAAAA,EAAA,QAAQ,CAACC,MAAU;AACzB,gBAAMC,IAASD,EAAM,OAAO,aAAa,IAAI;AAMzC,UAAAA,EAAM,oBAAoB,OAExBrB,EAAY,MAAM,IAAIsB,CAAM,KAClBtB,EAAA,MAAM,OAAOsB,CAAM,IAI7BA,KAAU,CAACtB,EAAY,MAAM,IAAIsB,CAAM,KAC7BtB,EAAA,MAAM,IAAIsB,CAAM;AAAA,QAEhC,CACD;AAAA,SACAL,CAAO,GAELF,EAAA,QAAQ,CAACQ,MAAY;;AACf,SAAAP,IAAAlB,EAAA,UAAA,QAAAkB,EAAO,QAAQO,IACpBvB,EAAY,MAAM,IAAIuB,EAAQ,aAAa,IAAI,CAAW,IACpDA,EAAA,UAAU,IAAI,cAAc,IAE5BA,EAAA,UAAU,OAAO,cAAc;AAAA,MACzC,CACD,GAEDtB,EAAkB,SAAQuB,KAAAC,IAAAvB,EAAe,UAAf,gBAAAuB,EAAsB,QAAtB,gBAAAD,EAA2B,wBAAwB,OAEzE,CAAC3B,EAAmB;AACtB;AAIW,MADQ,MAAM,KAAKA,EAAmB,MAAM,QAA2B,EACvE,QAAQ,CAAC0B,MAAY;AAChC,cAAMG,IAAoBH,EAAQ;AAClC,QAAAG,EAAkB,YAAY,IAC9BH,EAAQ,YAAY,IAEpBA,EAAQ,UAAU;AAAA,UAChB9B,EAAQ,sBAAsB;AAAA,UAC9B;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA,GAGGO,EAAY,MAAM,IAAIuB,EAAQ,aAAa,IAAI,CAAW,IAGrDA,EAAA,UAAU,OAAO,WAAW,IAF5BA,EAAA,UAAU,IAAI,WAAW,GAK3BA,EAAA,oBAAoB,SAAS,MAAM;AAAA,QAAA,CAAE;AAAA,MAAA,CAC9C;AAAA,IACH;AAEM,UAAAI,IAAuBC,EAASd,GAAae,EAAS,MAAM,EAAE,SAAS,IAAM;AAEnF,aAASC,IAAkB;AACzB,MAAIhC,EAAS,UACXA,EAAS,MAAM,cACfA,EAAS,QAAQ;AAAA,IAErB;AAEA,IAAAiC,EAAU,MAAM;AACF,MAAAjB;IAAA,CACb,GAEDkB,EAAU,MAAM;AACE,MAAAF,KACKH;IAAA,CACtB,GAEDM,EAAc,MAAM;AACF,MAAAH;IAAA,CACjB,GAEDI,EAAgB,MAAM;AACJ,MAAAJ;IAAA,CACjB;AAED,aAASK,EAAYC,GAAoB;AACpB,MAAAA,KACJ/B,EAAA,QAAQ,CAACA,EAAe;AAAA,IACzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}