Windi/Tailwind scss

README.md

Windi/Tailwind scss

List of useful Windi/Tailwind variables and utils ready to use.

Colors

Just import in your .scss file

@use "./colors" as *;
@use "./mixins" as *;


.btn {
  color: $color-slate-800;
  background-color: color($slate, 100);
  font-size: $font-md;
  border-radius: $rounded;
}

_colors.scss

/**  PINK  **/
$color-pink-50: #fdf2f8;
$color-pink-100: #fce7f3;
$color-pink-200: #fbcfe8;
$color-pink-300: #f9a8d4;
$color-pink-400: #f472b6;
$color-pink-500: #ec4899;
$color-pink-600: #db2777;
$color-pink-700: #be185d;
$color-pink-800: #9d174d;
$color-pink-900: #831843;

$color-pink: $color-pink-500;

$pink: (
  "50": $color-pink-50,
  "100": $color-pink-100,
  "200": $color-pink-200,
  "300": $color-pink-300,
  "400": $color-pink-400,
  "500": $color-pink-500,
  "600": $color-pink-600,
  "700": $color-pink-700,
  "800": $color-pink-800,
  "900": $color-pink-900,
);

/**  ROSE  **/
$color-rose-50: #fff1f2;
$color-rose-100: #ffe4e6;
$color-rose-200: #fecdd3;
$color-rose-300: #fda4af;
$color-rose-400: #fb7185;
$color-rose-500: #f43f5e;
$color-rose-600: #e11d48;
$color-rose-700: #be123c;
$color-rose-800: #9f1239;
$color-rose-900: #881337;

$color-rose: $color-rose-500;

$rose: (
  "50": $color-rose-50,
  "100": $color-rose-100,
  "200": $color-rose-200,
  "300": $color-rose-300,
  "400": $color-rose-400,
  "500": $color-rose-500,
  "600": $color-rose-600,
  "700": $color-rose-700,
  "800": $color-rose-800,
  "900": $color-rose-900,
);

/**  RED  **/
$color-red-50: #fef2f2;
$color-red-100: #fee2e2;
$color-red-200: #fecaca;
$color-red-300: #fca5a5;
$color-red-400: #f87171;
$color-red-500: #ef4444;
$color-red-600: #dc2626;
$color-red-700: #b91c1c;
$color-red-800: #991b1b;
$color-red-900: #7f1d1d;

$color-red: $color-red-500;

$red: (
  "50": $color-red-50,
  "100": $color-red-100,
  "200": $color-red-200,
  "300": $color-red-300,
  "400": $color-red-400,
  "500": $color-red-500,
  "600": $color-red-600,
  "700": $color-red-700,
  "800": $color-red-800,
  "900": $color-red-900,
);

/** ORANGE  **/
$color-orange-50: #fff7ed;
$color-orange-100: #ffedd5;
$color-orange-200: #fed7aa;
$color-orange-300: #fdba74;
$color-orange-400: #fb923c;
$color-orange-500: #f97316;
$color-orange-600: #ea580c;
$color-orange-700: #c2410c;
$color-orange-800: #9a3412;
$color-orange-900: #7c2d12;

$color-orange: $color-orange-500;

$orange: (
  "50": $color-orange-50,
  "100": $color-orange-100,
  "200": $color-orange-200,
  "300": $color-orange-300,
  "400": $color-orange-400,
  "500": $color-orange-500,
  "600": $color-orange-600,
  "700": $color-orange-700,
  "800": $color-orange-800,
  "900": $color-orange-900,
);


/**  YELLOW  **/
$color-yellow-50: #fffbeb;
$color-yellow-100: #fef3c7;
$color-yellow-200: #fde68a;
$color-yellow-300: #fcd34d;
$color-yellow-400: #fbbf24;
$color-yellow-500: #f59e0b;
$color-yellow-600: #d97706;
$color-yellow-700: #b45309;
$color-yellow-800: #92400e;
$color-yellow-900: #78350f;

$color-yellow: $color-yellow-500;

$yellow: (
  "50": $color-yellow-50,
  "100": $color-yellow-100,
  "200": $color-yellow-200,
  "300": $color-yellow-300,
  "400": $color-yellow-400,
  "500": $color-yellow-500,
  "600": $color-yellow-600,
  "700": $color-yellow-700,
  "800": $color-yellow-800,
  "900": $color-yellow-900,
);


/**  AMBER  **/
$color-amber-50: #fffbeb;
$color-amber-100: #fef3c7;
$color-amber-200: #fde68a;
$color-amber-300: #fcd34d;
$color-amber-400: #fbbf24;
$color-amber-500: #f59e0b;
$color-amber-600: #d97706;
$color-amber-700: #b45309;
$color-amber-800: #92400e;
$color-amber-900: #78350f;

$color-amber: $color-amber-500;

$amber: (
  "50": $color-amber-50,
  "100": $color-amber-100,
  "200": $color-amber-200,
  "300": $color-amber-300,
  "400": $color-amber-400,
  "500": $color-amber-500,
  "600": $color-amber-600,
  "700": $color-amber-700,
  "800": $color-amber-800,
  "900": $color-amber-900,
);

/**  LIME  **/
$color-lime-50: #f7fee7;
$color-lime-100: #ecfccb;
$color-lime-200: #d9f99d;
$color-lime-300: #bef264;
$color-lime-400: #a3e635;
$color-lime-500: #84cc16;
$color-lime-600: #65a30d;
$color-lime-700: #4d7c0f;
$color-lime-800: #3f6212;
$color-lime-900: #365314;

$color-lime: $color-lime-500;

$lime: (
  "50": $color-lime-50,
  "100": $color-lime-100,
  "200": $color-lime-200,
  "300": $color-lime-300,
  "400": $color-lime-400,
  "500": $color-lime-500,
  "600": $color-lime-600,
  "700": $color-lime-700,
  "800": $color-lime-800,
  "900": $color-lime-900,
);

/**  GREEN  **/
$color-green-50: #ecfdf5;
$color-green-100: #d1fae5;
$color-green-200: #a7f3d0;
$color-green-300: #6ee7b7;
$color-green-400: #34d399;
$color-green-500: #10b981;
$color-green-600: #059669;
$color-green-700: #047857;
$color-green-800: #065f46;
$color-green-900: #064e3b;

$color-green: $color-green-500;

$green: (
  "50": $color-green-50,
  "100": $color-green-100,
  "200": $color-green-200,
  "300": $color-green-300,
  "400": $color-green-400,
  "500": $color-green-500,
  "600": $color-green-600,
  "700": $color-green-700,
  "800": $color-green-800,
  "900": $color-green-900,
);

/**  EMERALD  **/
$color-emerald-50: #ecfdf5;
$color-emerald-100: #d1fae5;
$color-emerald-200: #a7f3d0;
$color-emerald-300: #6ee7b7;
$color-emerald-400: #34d399;
$color-emerald-500: #10b981;
$color-emerald-600: #059669;
$color-emerald-700: #047857;
$color-emerald-800: #065f46;
$color-emerald-900: #064e3b;

$color-emerald: $color-emerald-500;

$emerald: (
  "50": $color-emerald-50,
  "100": $color-emerald-100,
  "200": $color-emerald-200,
  "300": $color-emerald-300,
  "400": $color-emerald-400,
  "500": $color-emerald-500,
  "600": $color-emerald-600,
  "700": $color-emerald-700,
  "800": $color-emerald-800,
  "900": $color-emerald-900,
);

/**  TEAL  **/
$color-teal-50: #f0fdfa;
$color-teal-100: #ccfbf1;
$color-teal-200: #99f6e4;
$color-teal-300: #5eead4;
$color-teal-400: #2dd4bf;
$color-teal-500: #14b8a6;
$color-teal-600: #0d9488;
$color-teal-700: #0f766e;
$color-teal-800: #115e59;
$color-teal-900: #134e4a;

$color-teal: $color-teal-500;

$teal: (
  "50": $color-teal-50,
  "100": $color-teal-100,
  "200": $color-teal-200,
  "300": $color-teal-300,
  "400": $color-teal-400,
  "500": $color-teal-500,
  "600": $color-teal-600,
  "700": $color-teal-700,
  "800": $color-teal-800,
  "900": $color-teal-900,
);

/**  CYAN  **/
$color-cyan-50: #ecfeff;
$color-cyan-100: #cffafe;
$color-cyan-200: #a5f3fc;
$color-cyan-300: #67e8f9;
$color-cyan-400: #22d3ee;
$color-cyan-500: #06b6d4;
$color-cyan-600: #0891b2;
$color-cyan-700: #0e7490;
$color-cyan-800: #155e75;
$color-cyan-900: #164e63;

$color-cyan: $color-cyan-500;

$cyan: (
  "50": $color-cyan-50,
  "100": $color-cyan-100,
  "200": $color-cyan-200,
  "300": $color-cyan-300,
  "400": $color-cyan-400,
  "500": $color-cyan-500,
  "600": $color-cyan-600,
  "700": $color-cyan-700,
  "800": $color-cyan-800,
  "900": $color-cyan-900,
);

/**  SKY  **/
$color-sky-50: #f0f9ff;
$color-sky-100: #e0f2fe;
$color-sky-200: #bae6fd;
$color-sky-300: #7dd3fc;
$color-sky-400: #38bdf8;
$color-sky-500: #0ea5e9;
$color-sky-600: #0284c7;
$color-sky-700: #0369a1;
$color-sky-800: #075985;
$color-sky-900: #0c4a6e;

$color-sky: $color-sky-500;

$sky: (
  "50": $color-sky-50,
  "100": $color-sky-100,
  "200": $color-sky-200,
  "300": $color-sky-300,
  "400": $color-sky-400,
  "500": $color-sky-500,
  "600": $color-sky-600,
  "700": $color-sky-700,
  "800": $color-sky-800,
  "900": $color-sky-900,
);

/**  BLUE  **/
$color-blue-50: #eff6ff;
$color-blue-100: #dbeafe;
$color-blue-200: #bfdbfe;
$color-blue-300: #93c5fd;
$color-blue-400: #60a5fa;
$color-blue-500: #3b82f6;
$color-blue-600: #2563eb;
$color-blue-700: #1d4ed8;
$color-blue-800: #1e40af;
$color-blue-900: #1e3a8a;

$color-blue: $color-blue-500;

$blue: (
  "50": $color-blue-50,
  "100": $color-blue-100,
  "200": $color-blue-200,
  "300": $color-blue-300,
  "400": $color-blue-400,
  "500": $color-blue-500,
  "600": $color-blue-600,
  "700": $color-blue-700,
  "800": $color-blue-800,
  "900": $color-blue-900,
);

/**  INDIGO  **/
$color-indigo-50: #eef2ff;
$color-indigo-100: #e0e7ff;
$color-indigo-200: #c7d2fe;
$color-indigo-300: #a5b4fc;
$color-indigo-400: #818cf8;
$color-indigo-500: #6366f1;
$color-indigo-600: #4f46e5;
$color-indigo-700: #4338ca;
$color-indigo-800: #3730a3;
$color-indigo-900: #312e81;

$color-indigo: $color-indigo-500;

$indigo: (
  "50": $color-indigo-50,
  "100": $color-indigo-100,
  "200": $color-indigo-200,
  "300": $color-indigo-300,
  "400": $color-indigo-400,
  "500": $color-indigo-500,
  "600": $color-indigo-600,
  "700": $color-indigo-700,
  "800": $color-indigo-800,
  "900": $color-indigo-900,
);

/**  PURPLE  **/
$color-purple-50: #f5f3ff;
$color-purple-100: #ede9fe;
$color-purple-200: #ddd6fe;
$color-purple-300: #c4b5fd;
$color-purple-400: #a78bfa;
$color-purple-500: #8b5cf6;
$color-purple-600: #7c3aed;
$color-purple-700: #6d28d9;
$color-purple-800: #5b21b6;
$color-purple-900: #4c1d95;

$color-purple: $color-purple-500;

$purple: (
  "50": $color-purple-50,
  "100": $color-purple-100,
  "200": $color-purple-200,
  "300": $color-purple-300,
  "400": $color-purple-400,
  "500": $color-purple-500,
  "600": $color-purple-600,
  "700": $color-purple-700,
  "800": $color-purple-800,
  "900": $color-purple-900,
);

/**  VIOLET  **/
$color-violet-50: #f5f3ff;
$color-violet-100: #ede9fe;
$color-violet-200: #ddd6fe;
$color-violet-300: #c4b5fd;
$color-violet-400: #a78bfa;
$color-violet-500: #8b5cf6;
$color-violet-600: #7c3aed;
$color-violet-700: #6d28d9;
$color-violet-800: #5b21b6;
$color-violet-900: #4c1d95;

$color-violet: $color-violet-500;

$violet: (
  "50": $color-violet-50,
  "100": $color-violet-100,
  "200": $color-violet-200,
  "300": $color-violet-300,
  "400": $color-violet-400,
  "500": $color-violet-500,
  "600": $color-violet-600,
  "700": $color-violet-700,
  "800": $color-violet-800,
  "900": $color-violet-900,
);

/**  FUCHSIA  **/
$color-fuchsia-50: #fdf4ff;
$color-fuchsia-100: #fae8ff;
$color-fuchsia-200: #f5d0fe;
$color-fuchsia-300: #f0abfc;
$color-fuchsia-400: #e879f9;
$color-fuchsia-500: #d946ef;
$color-fuchsia-600: #c026d3;
$color-fuchsia-700: #a21caf;
$color-fuchsia-800: #86198f;
$color-fuchsia-900: #701a75;

$color-fuchsia: $color-fuchsia-500;

$fuchsia: (
  "50": $color-fuchsia-50,
  "100": $color-fuchsia-100,
  "200": $color-fuchsia-200,
  "300": $color-fuchsia-300,
  "400": $color-fuchsia-400,
  "500": $color-fuchsia-500,
  "600": $color-fuchsia-600,
  "700": $color-fuchsia-700,
  "800": $color-fuchsia-800,
  "900": $color-fuchsia-900,
);

/**  GRAY  **/
$color-gray-50: #f9fafb;
$color-gray-100: #f3f4f6;
$color-gray-200: #e5e7eb;
$color-gray-300: #d1d5db;
$color-gray-400: #9ca3af;
$color-gray-500: #6b7280;
$color-gray-600: #4b5563;
$color-gray-700: #374151;
$color-gray-800: #1f2937;
$color-gray-900: #111827;

$color-gray: $color-gray-500;

$gray: (
  "50": $color-gray-50,
  "100": $color-gray-100,
  "200": $color-gray-200,
  "300": $color-gray-300,
  "400": $color-gray-400,
  "500": $color-gray-500,
  "600": $color-gray-600,
  "700": $color-gray-700,
  "800": $color-gray-800,
  "900": $color-gray-900,
);

/**  SLATE  **/
$color-slate-50: #f8fafc;
$color-slate-100: #f1f5f9;
$color-slate-200: #e2e8f0;
$color-slate-300: #cbd5e1;
$color-slate-400: #94A3B8;
$color-slate-500: #64748B;
$color-slate-600: #475569;
$color-slate-700: #334155;
$color-slate-800: #1E293B;
$color-slate-900: #0F172A;

$color-slate: $color-slate-500;

$slate: (
  "50": $color-slate-50,
  "100": $color-slate-100,
  "200": $color-slate-200,
  "300": $color-slate-300,
  "400": $color-slate-400,
  "500": $color-slate-500,
  "600": $color-slate-600,
  "700": $color-slate-700,
  "800": $color-slate-800,
  "900": $color-slate-900,
);

/**  STONE  **/
$color-stone-50: #fafaf9;
$color-stone-100: #f5f5f4;
$color-stone-200: #e7e5e4;
$color-stone-300: #d6d3d1;
$color-stone-400: #a8a29e;
$color-stone-500: #78716c;
$color-stone-600: #57534e;
$color-stone-700: #44403c;
$color-stone-800: #292524;
$color-stone-900: #1c1917;

$color-stone: $color-stone-500;

$stone: (
  "50": $color-stone-50,
  "100": $color-stone-100,
  "200": $color-stone-200,
  "300": $color-stone-300,
  "400": $color-stone-400,
  "500": $color-stone-500,
  "600": $color-stone-600,
  "700": $color-stone-700,
  "800": $color-stone-800,
  "900": $color-stone-900,
);

/**  NEUTRAL  **/
$color-neutral-50: #fafafa;
$color-neutral-100: #f5f5f5;
$color-neutral-200: #e5e5e5;
$color-neutral-300: #d4d4d4;
$color-neutral-400: #a3a3a3;
$color-neutral-500: #737373;
$color-neutral-600: #525252;
$color-neutral-700: #404040;
$color-neutral-800: #262626;
$color-neutral-900: #171717;

$color-neutral: $color-neutral-500;

$neutral: (
  "50": $color-neutral-50,
  "100": $color-neutral-100,
  "200": $color-neutral-200,
  "300": $color-neutral-300,
  "400": $color-neutral-400,
  "500": $color-neutral-500,
  "600": $color-neutral-600,
  "700": $color-neutral-700,
  "800": $color-neutral-800,
  "900": $color-neutral-900,
);

/**  ZINC  **/
$color-zinc-50: #fafafa;
$color-zinc-100: #f4f4f5;
$color-zinc-200: #e4e4e7;
$color-zinc-300: #d4d4d8;
$color-zinc-400: #a1a1aa;
$color-zinc-500: #71717A;
$color-zinc-600: #52525B;
$color-zinc-700: #3F3F46;
$color-zinc-800: #27272A;
$color-zinc-900: #18181B;

$color-zinc: $color-zinc-500;

$zinc: (
  "50": $color-zinc-50,
  "100": $color-zinc-100,
  "200": $color-zinc-200,
  "300": $color-zinc-300,
  "400": $color-zinc-400,
  "500": $color-zinc-500,
  "600": $color-zinc-600,
  "700": $color-zinc-700,
  "800": $color-zinc-800,
  "900": $color-zinc-900,
);

/**  LIGHT  **/
$color-light-50: #fdfdfd;
$color-light-100: #fcfcfc;
$color-light-200: #fafafa;
$color-light-300: #f8f9fa;
$color-light-400: #f6f6f6;
$color-light-500: #f2f2f2;
$color-light-600: #f1f3f5;
$color-light-700: #e9ecef;
$color-light-800: #dee2e6;
$color-light-900: #dde1e3;

$color-light: $color-light-500;

$light: (
  "50": $color-light-50,
  "100": $color-light-100,
  "200": $color-light-200,
  "300": $color-light-300,
  "400": $color-light-400,
  "500": $color-light-500,
  "600": $color-light-600,
  "700": $color-light-700,
  "800": $color-light-800,
  "900": $color-light-900,
);

/**  DARK  **/
$color-dark-50: #4a4a4a;
$color-dark-100: #3c3c3c;
$color-dark-200: #323232;
$color-dark-300: #2d2d2d;
$color-dark-400: #222222;
$color-dark-500: #1f1f1f;
$color-dark-600: #1c1c1e;
$color-dark-700: #1b1b1b;
$color-dark-800: #181818;
$color-dark-900: #0f0f0f;

$color-dark: $color-dark-500;

$dark: (
  "50": $color-dark-50,
  "100": $color-dark-100,
  "200": $color-dark-200,
  "300": $color-dark-300,
  "400": $color-dark-400,
  "500": $color-dark-500,
  "600": $color-dark-600,
  "700": $color-dark-700,
  "800": $color-dark-800,
  "900": $color-dark-900,
);

/**  COLORS MAP  **/
$colors: (
  "rose": $rose,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "amber": $amber,
  "lime": $lime,
  "green": $green,
  "emerald": $emerald,
  "teal": $teal,
  "cyan": $cyan,
  "sky": $sky,
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "violet": $violet,
  "fuchsia": $fuchsia,
  "gray": $gray,
  "slate": $slate,
  "stone": $stone,
  "neutral": $neutral,
  "zinc": $zinc,
  "light": $light,
  "dark": $dark,
);

_mixins.scss

@use "sass:map";

/* COLOR UTILITY */
@function color($colorKey, $colorShade: 500) {
  @return map.get($colorKey, $colorShade);
}

_variables.scss

/** COLORs  **/
$color-light: #FDFDFD;
$color-dark: #333333;
$color-black: #000000;

/**  FONT-FAMILYs **/
$font-primary: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji';
$font-secondary: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif';

/**  FONT-SIZEs  **/
$font-2xs: 0.625rem;   // 10px
$font-xs: 0.75rem;     // 12px
$font-sm: 0.875rem;    // 14px
$font-base: 1rem;      // 16px
$font-md: $font-base;  // 16px
$font-lg: 1.125rem;    // 18px
$font-xl: 1.25rem;     // 20px
$font-2xl: 1.5rem;     // 24px
$font-2_5xl: 1.75rem;  // 28px
$font-3xl: 1.875rem;   // 30px
$font-4xl: 2.25rem;    // 36px
$font-4_5xl: 2.5rem;   // 40px
$font-5xl: 3rem;       // 48px
$font-6xl: 3.75rem;    // 60px
$font-7xl: 4.5rem;     // 75px
$font-8xl: 6rem;       // 96px
$font-9xl: 8rem;       // 128px

/**  FONT-WEIGHTs **/
$font-thin: 100;
$font-light: 300;
$font-regular: 400;
$font-medium: 500;
$font-semibold: 600;
$font-bold: 700;
$font-black: 900;

/**  LINE-HEIGHTs  **/
$leading-none: 1;
$leading-tight: 1.25;
$leading-snug: 1.375;
$leading-normal: 1.5;
$leading-relaxed: 1.625;
$leading-loose: 2;

/** LETTER SPACING */
$tracking-tighter: -0.05em;
$tracking-tight: -0.025em;
$tracking-normal: 0em;
$tracking-wide: 0.025em;
$tracking-wider: 0.05em;
$tracking-widest: 0.1em;

/** WORD SPACING */
$word-spacing-tighter: -0.05em;
$word-spacing-tight: -0.025em;
$word-spacing-normal: 0em;
$word-spacing-wide: 0.025em;
$word-spacing-wider: 0.05em;
$word-spacing-widest: 0.1em;

/** BORDER RADIUS **/
$rounded-none: 0px;
$rounded-sm: 0.125rem; // 2px
$rounded: 0.25rem;     // 4px
$rounded-md: 0.375rem; // 6px
$rounded-lg: 0.5rem;   // 8px
$rounded-xl: 0.75rem;  // 12px
$rounded-2xl: 1rem;    // 16px
$rounded-3xl: 1.5rem;  // 24px
$rounded-full: 9999px;

/** SHADOWs **/
$shadow-sm: 0 0 transparent, 0 0 transparent, 0 1px 2px 0 rgba($color-black, 0.05);
$shadow: 0 0 transparent, 0 0 transparent, 0 1px 3px 0 rgba($color-black, 0.1), 0 1px 2px 0 rgba($color-black, 0.06);
$shadow-md: 0 0 transparent, 0 0 transparent, 0 4px 6px -1px rgba($color-black, 0.1), 0 2px 4px -1px rgba($color-black, 0.06);
$shadow-lg: 0 0 transparent, 0 0 transparent, 0 10px 15px -3px rgba($color-black, 0.1), 0 4px 6px -2px rgba($color-black, 0.05);
$shadow-xl: 0 0 transparent, 0 0 transparent, 0 20px 25px -5px rgba($color-black, 0.1), 0 10px 10px -5px rgba($color-black, 0.04);
$shadow-2xl: 0 0 transparent, 0 0 transparent, 0 25px 50px -12px rgba($color-black, 0.25);

/** RESPONSIVE BREAKPOINTS **/
$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;