/*
 * Tailwind @source directives so dynamic class names from Stash components are included.
 * Import this as part of your app's Tailwind run (same build that processes your @source).
 *
 * ALWAYS include these color related classes (below). 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/detecting-classes-in-source-files#dynamic-class-names
 *
 * 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-.+/.
 */
@source inline("{bg,text,border}-{purple,royal,blue,seafoam,teal,green,yellow,orange,red,ice}-{50,100,200,300,400,500,600,700,800,900,950}");

/* Stroke and text colors for illustrations */
@source inline("stroke-{purple,royal,blue,seafoam,teal,green,yellow,orange,red,ice}-500");
@source inline("text-{purple,royal,blue,seafoam,teal,green,yellow,orange,red,ice}-400");

/* Other classes that are used dynamically (ex: `text-${isDark ? 'white' : 'black'}`) */
@source inline("bg-ice-200 bg-white bg-black text-white text-black border-white border-black");