@leaflink/stash 52.0.3 → 53.0.0

package/tailwind-base.ts

@@ -1,455 +0,0 @@
-import type { Config } from 'tailwindcss';
-
-import { SCREEN_SIZES } from './src/constants';
-
-export default {
-  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: SCREEN_SIZES,
-
-    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 `styles/base.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: false,
-    preflight: false,
-  },
-} satisfies Config;
-
-/**
- * Utility to return a holistic array of tailwind color classes.
- *
- * This function will allow downstream applications to easily **blocklist** the same color
- * classes that are safelisted in the base preset, just in case they need to prevent unnecessarily
- * duplicating classes in their final build.
- *
- * @see {@link https://tailwindcss.com/docs/content-configuration#discarding-classes}
- */
-export const getColorClasses = () => {
-  const classes: Array<string> = [];
-
-  ['purple', 'royal', 'blue', 'seafoam', 'teal', 'green', 'yellow', 'orange', 'red', 'ice'].forEach((color) => {
-    ['bg', 'text', 'border', 'stroke'].forEach((plugin) => {
-      ['', '400'].forEach((shade) => {
-        classes.push(`tw-${plugin}-${color}${shade ? `-${shade}` : ''}`);
-      });
-    });
-  });
-
-  return classes;
-};