@jgmelgares/tw-presets/css/light-variables.css

A reusable Tailwind CSS preset package for creating consistent and customizable design systems. This package includes a Tailwind preset configuration and a CSS file with predefined variables to streamline your development workflow.

/* Color Mode - Light */
:root {
  /* Surface */
  /* || Background layer || */
  --surface-base: var(--neutral-50);
  /* || Main content surface || */
  --surface-content: var(--white);
  --surface-content-hovered: var(--neutral-100);
  --surface-content-pressed: var(--neutral-200);
  /* || Elevated surfaces like cards || */
  --surface-raised: var(--white);
  --surface-raised-hovered: var(--neutral-100);
  --surface-raised-pressed: var(--neutral-200);
  /* || Overlays like modals || */
  --surface-overlay: var(--white);
  --surface-overlay-hovered: var(--neutral-100);
  --surface-overlay-pressed: var(--neutral-200);
  /* || Sunken surfaces like input fields or inner containers || */
  --surface-sunken: var(--neutral-50);
  /* ------------------------------------------------------- */

  /* Shadows */
  /* || Light and subtle for content surfaces || */
  --shadow-content: 0px 1px 2px rgba(9, 30, 66, 0.1),
    0px 1px 3px rgba(9, 30, 66, 0.06);
  /* || Medium elevation for cards and raised elements || */
  --shadow-raised: 0px 2px 4px rgba(9, 30, 66, 0.1),
    0px 4px 6px rgba(9, 30, 66, 0.08);
  /* || Strong and prominent for overlays like modals || */
  --shadow-overlay: 0px 4px 8px rgba(9, 30, 66, 0.12),
    0px 6px 12px rgba(9, 30, 66, 0.16);
  /* ------------------------------------------------------- */

  /* Text Color */
  --text-content-primary: var(--alpha-dark-900);
  --text-content-secondary: var(--alpha-dark-700);
  --text-content-tertiary: var(--alpha-dark-400);
  --text-content-primary-inverse: var(--alpha-light-900);
  --text-content-secondary-inverse: var(--alpha-light-700);
  --text-content-tertiary-inverse: var(--alpha-light-400);

  /* Neutral Text Tokens */
  --text-neutral: var(--neutral-1000);
  --text-neutral-hover: var(--neutral-800);
  --text-neutral-active: var(--neutral-1200);
  --text-neutral-subtle: var(--neutral-600);
  --text-neutral-bold: var(--neutral-1100);
  --text-neutral-inverse: var(--neutral-50);
  --text-neutral-disabled: var(--neutral-600);
  --text-neutral-placeholder: var(--neutral-600);

  /* Primary Text Tokens */
  --text-primary: var(--blue-1000);
  --text-primary-hover: var(--blue-800);
  --text-primary-active: var(--blue-1200);
  --text-primary-subtle: var(--blue-600);
  --text-primary-bold: var(--blue-1100);
  --text-primary-inverse: var(--blue-50);
  --text-primary-disabled: var(--blue-500);
  --text-primary-placeholder: var(--blue-600);

  /* Secondary Text Tokens */
  --text-secondary: var(--violet-1000);
  --text-secondary-hover: var(--violet-800);
  --text-secondary-active: var(--violet-1200);
  --text-secondary-subtle: var(--violet-600);
  --text-secondary-bold: var(--violet-1100);
  --text-secondary-inverse: var(--violet-50);
  --text-secondary-disabled: var(--violet-500);
  --text-secondary-placeholder: var(--violet-600);

  /* Info Text Tokens */
  --text-info: var(--cyan-1000);
  --text-info-hover: var(--cyan-800);
  --text-info-active: var(--cyan-1200);
  --text-info-subtle: var(--cyan-600);
  --text-info-bold: var(--cyan-1100);
  --text-info-inverse: var(--cyan-50);
  --text-info-disabled: var(--cyan-500);
  --text-info-placeholder: var(--cyan-600);

  /* Success Text Tokens */
  --text-success: var(--green-1000);
  --text-success-hover: var(--green-800);
  --text-success-active: var(--green-1200);
  --text-success-subtle: var(--green-600);
  --text-success-bold: var(--green-1100);
  --text-success-inverse: var(--green-50);
  --text-success-disabled: var(--green-500);
  --text-success-placeholder: var(--green-600);

  /* Warning Text Tokens */
  --text-warning: var(--amber-1000);
  --text-warning-hover: var(--amber-800);
  --text-warning-active: var(--amber-1200);
  --text-warning-subtle: var(--amber-600);
  --text-warning-bold: var(--amber-1100);
  --text-warning-inverse: var(--amber-50);
  --text-warning-disabled: var(--amber-500);
  --text-warning-placeholder: var(--amber-600);

  /* Danger Text Tokens */
  --text-danger: var(--red-1000);
  --text-danger-hover: var(--red-800);
  --text-danger-active: var(--red-1200);
  --text-danger-subtle: var(--red-600);
  --text-danger-bold: var(--red-1100);
  --text-danger-inverse: var(--red-50);
  --text-danger-disabled: var(--red-500);
  --text-danger-placeholder: var(--red-600);

  /* Advertising Text Tokens */
  --text-advertising: var(--fuchsia-1000);
  --text-advertising-hover: var(--fuchsia-800);
  --text-advertising-active: var(--fuchsia-1200);
  --text-advertising-subtle: var(--fuchsia-600);
  --text-advertising-bold: var(--fuchsia-1100);
  --text-advertising-inverse: var(--fuchsia-50);
  --text-advertising-disabled: var(--fuchsia-500);
  --text-advertising-placeholder: var(--fuchsia-600);
  /* ------------------------------------------------------- */

  /* Links */
  --link: var(--blue-1000);
  --link-active: var(--blue-1200);
  --link-visited: var(--violet-1000);
  --link-visited-active: var(--violet-1200);
  --link-disabled: var(--neutral-400);
  /* ------------------------------------------------------- */

  /* Icon Color */
  /* Neutral Icon Colors */
  --icon-neutral: var(--neutral-1100);
  --icon-neutral-hover: var(--neutral-900);
  --icon-neutral-active: var(--neutral-1300);
  --icon-neutral-disabled: var(--neutral-600);
  --icon-neutral-inverse: var(--neutral-50);

  /* Primary Icon Colors */
  --icon-primary: var(--blue-1100);
  --icon-primary-hover: var(--blue-900);
  --icon-primary-active: var(--blue-1300);
  --icon-primary-disabled: var(--blue-500);
  --icon-primary-inverse: var(--blue-50);

  /* Secondary Icon Colors */
  --icon-secondary: var(--violet-1100);
  --icon-secondary-hover: var(--violet-900);
  --icon-secondary-active: var(--violet-1300);
  --icon-secondary-disabled: var(--violet-500);
  --icon-secondary-inverse: var(--violet-50);

  /* Info Icon Colors */
  --icon-info: var(--cyan-1200);
  --icon-info-hover: var(--cyan-1000);
  --icon-info-active: var(--cyan-1400);
  --icon-info-disabled: var(--cyan-500);
  --icon-info-inverse: var(--cyan-50);

  /* Success Icon Colors */
  --icon-success: var(--green-1200);
  --icon-success-hover: var(--green-1000);
  --icon-success-active: var(--green-1400);
  --icon-success-disabled: var(--green-500);
  --icon-success-inverse: var(--green-50);

  /* Warning Icon Colors */
  --icon-warning: var(--amber-1300);
  --icon-warning-hover: var(--amber-1100);
  --icon-warning-active: var(--amber-1500);
  --icon-warning-disabled: var(--amber-500);
  --icon-warning-inverse: var(--amber-50);

  /* Danger Icon Colors */
  --icon-danger: var(--red-1100);
  --icon-danger-hover: var(--red-900);
  --icon-danger-active: var(--red-1300);
  --icon-danger-disabled: var(--red-500);
  --icon-danger-inverse: var(--red-50);

  /* Advertising Icon Colors */
  --icon-advertising: var(--fuchsia-1100);
  --icon-advertising-hover: var(--fuchsia-900);
  --icon-advertising-active: var(--fuchsia-1300);
  --icon-advertising-disabled: var(--fuchsia-500);
  --icon-advertising-inverse: var(--fuchsia-50);
  /* ------------------------------------------------------- */

  /**  Border */
  /* Neutral Borders */
  --border-neutral: var(--neutral-1100);
  --border-neutral-hover: var(--neutral-900);
  --border-neutral-active: var(--neutral-1200);
  --border-neutral-focus: var(--neutral-1300);
  --border-neutral-subtle: var(--neutral-400);
  --border-neutral-subtle-hover: var(--neutral-500);
  --border-neutral-subtle-active: var(--neutral-600);
  --border-neutral-subtle-focus: var(--neutral-500);
  --border-neutral-bold: var(--neutral-1300);
  --border-neutral-bold-hover: var(--neutral-1200);
  --border-neutral-bold-focus: var(--neutral-1400);
  --border-neutral-bold-active: var(--neutral-1500);
  --border-neutral-disabled: var(--neutral-300);
  --border-divider: var(--neutral-300);
  --border-divider-bold: var(--neutral-1100);

  /* Primary Borders */
  --border-primary: var(--blue-1100);
  --border-primary-hover: var(--blue-1000);
  --border-primary-active: var(--blue-1200);
  --border-primary-focus: var(--blue-1300);
  --border-primary-subtle: var(--blue-400);
  --border-primary-subtle-hover: var(--blue-500);
  --border-primary-subtle-active: var(--blue-600);
  --border-primary-subtle-focus: var(--blue-500);
  --border-primary-bold: var(--blue-1300);
  --border-primary-bold-hover: var(--blue-1200);
  --border-primary-bold-active: var(--blue-1400);
  --border-primary-bold-focus: var(--blue-1500);
  --border-primary-disabled: var(--blue-300);

  /* Secondary Borders */
  --border-secondary: var(--violet-1100);
  --border-secondary-hover: var(--violet-1000);
  --border-secondary-active: var(--violet-1200);
  --border-secondary-focus: var(--violet-1300);
  --border-secondary-subtle: var(--violet-400);
  --border-secondary-subtle-hover: var(--violet-500);
  --border-secondary-subtle-active: var(--violet-600);
  --border-secondary-subtle-focus: var(--violet-500);
  --border-secondary-bold: var(--violet-1300);
  --border-secondary-bold-hover: var(--violet-1200);
  --border-secondary-bold-active: var(--violet-1400);
  --border-secondary-bold-focus: var(--violet-1500);
  --border-secondary-disabled: var(--violet-300);

  /* Informational Borders */
  --border-info: var(--cyan-1200);
  --border-info-hover: var(--cyan-1100);
  --border-info-active: var(--cyan-1300);
  --border-info-focus: var(--cyan-1400);
  --border-info-subtle: var(--cyan-400);
  --border-info-subtle-hover: var(--cyan-500);
  --border-info-subtle-active: var(--cyan-600);
  --border-info-subtle-focus: var(--cyan-500);
  --border-info-bold: var(--cyan-1400);
  --border-info-bold-hover: var(--cyan-1300);
  --border-info-bold-active: var(--cyan-1500);
  --border-info-bold-focus: var(--cyan-1600);
  --border-info-disabled: var(--cyan-300);

  /* Success Borders */
  --border-success: var(--green-1300);
  --border-success-hover: var(--green-1200);
  --border-success-active: var(--green-1400);
  --border-success-focus: var(--green-1500);
  --border-success-subtle: var(--green-400);
  --border-success-subtle-hover: var(--green-500);
  --border-success-subtle-active: var(--green-600);
  --border-success-subtle-focus: var(--green-500);
  --border-success-bold: var(--green-1500);
  --border-success-bold-hover: var(--green-1400);
  --border-success-bold-active: var(--green-1600);
  --border-success-bold-focus: var(--green-1600);
  --border-success-disabled: var(--green-300);

  /* Warning Borders */
  --border-warning: var(--amber-1300);
  --border-warning-hover: var(--amber-1200);
  --border-warning-active: var(--amber-1400);
  --border-warning-focus: var(--amber-1500);
  --border-warning-subtle: var(--amber-400);
  --border-warning-subtle-hover: var(--amber-500);
  --border-warning-subtle-active: var(--amber-600);
  --border-warning-subtle-focus: var(--amber-500);
  --border-warning-bold: var(--amber-1500);
  --border-warning-bold-hover: var(--amber-1400);
  --border-warning-bold-active: var(--amber-1600);
  --border-warning-bold-focus: var(--amber-1600);
  --border-warning-disabled: var(--amber-300);

  /* Danger Borders */
  --border-danger: var(--red-1100);
  --border-danger-hover: var(--red-1000);
  --border-danger-active: var(--red-1200);
  --border-danger-focus: var(--red-1300);
  --border-danger-subtle: var(--red-400);
  --border-danger-subtle-hover: var(--red-500);
  --border-danger-subtle-active: var(--red-600);
  --border-danger-subtle-focus: var(--red-500);
  --border-danger-bold: var(--red-1300);
  --border-danger-bold-hover: var(--red-1200);
  --border-danger-bold-active: var(--red-1400);
  --border-danger-bold-focus: var(--red-1500);
  --border-danger-disabled: var(--red-300);

  /* Advertising Borders */
  --border-advertising: var(--fuchsia-1000);
  --border-advertising-hover: var(--fuchsia-900);
  --border-advertising-active: var(--fuchsia-1100);
  --border-advertising-focus: var(--fuchsia-1200);
  --border-advertising-subtle: var(--fuchsia-400);
  --border-advertising-subtle-hover: var(--fuchsia-500);
  --border-advertising-subtle-active: var(--fuchsia-600);
  --border-advertising-subtle-focus: var(--fuchsia-500);
  --border-advertising-bold: var(--fuchsia-1200);
  --border-advertising-bold-hover: var(--fuchsia-1100);
  --border-advertising-bold-active: var(--fuchsia-1300);
  --border-advertising-bold-focus: var(--fuchsia-1400);
  --border-advertising-disabled: var(--fuchsia-300);
  /* ------------------------------------------------------- */

  /** Backgrounds */
  --background-neutral: var(--neutral-1000);
  --background-neutral-hover: var(--neutral-900);
  --background-neutral-active: var(--neutral-1100);
  --background-neutral-focus: var(--neutral-1200);
  --background-neutral-disabled: var(--neutral-200);
  --background-neutral-subtle: var(--neutral-100);
  --background-neutral-subtle-hover: var(--neutral-200);
  --background-neutral-subtle-active: var(--neutral-300);
  --background-neutral-subtle-focus: var(--neutral-200);
  --background-neutral-bold: var(--neutral-1200);
  --background-neutral-bold-hover: var(--neutral-1100);
  --background-neutral-bold-active: var(--neutral-1300);
  --background-neutral-bold-focus: var(--neutral-1400);

  --background-primary: var(--blue-1000);
  --background-primary-hover: var(--blue-900);
  --background-primary-active: var(--blue-1100);
  --background-primary-focus: var(--blue-1200);
  --background-primary-disabled: var(--blue-200);
  --background-primary-subtle: var(--blue-100);
  --background-primary-subtle-hover: var(--blue-200);
  --background-primary-subtle-active: var(--blue-300);
  --background-primary-subtle-focus: var(--blue-200);
  --background-primary-bold: var(--blue-1200);
  --background-primary-bold-hover: var(--blue-1100);
  --background-primary-bold-active: var(--blue-1300);
  --background-primary-bold-focus: var(--blue-1400);

  --background-secondary: var(--violet-1000);
  --background-secondary-hover: var(--violet-900);
  --background-secondary-active: var(--violet-1100);
  --background-secondary-focus: var(--violet-1200);
  --background-secondary-disabled: var(--violet-200);
  --background-secondary-subtle: var(--violet-100);
  --background-secondary-subtle-hover: var(--violet-200);
  --background-secondary-subtle-active: var(--violet-300);
  --background-secondary-subtle-focus: var(--violet-200);
  --background-secondary-bold: var(--violet-1200);
  --background-secondary-bold-hover: var(--violet-1100);
  --background-secondary-bold-active: var(--violet-1300);
  --background-secondary-bold-focus: var(--violet-1400);

  /* States */
  --background-info: var(--cyan-1100);
  --background-info-hover: var(--cyan-1000);
  --background-info-active: var(--cyan-1200);
  --background-info-focus: var(--cyan-1300);
  --background-info-disabled: var(--cyan-200);
  --background-info-subtle: var(--cyan-100);
  --background-info-subtle-hover: var(--cyan-200);
  --background-info-subtle-active: var(--cyan-300);
  --background-info-subtle-focus: var(--cyan-200);
  --background-info-bold: var(--cyan-1300);
  --background-info-bold-hover: var(--cyan-1200);
  --background-info-bold-active: var(--cyan-1400);
  --background-info-bold-focus: var(--cyan-1500);

  --background-success: var(--green-1200);
  --background-success-hover: var(--green-1100);
  --background-success-active: var(--green-1300);
  --background-success-focus: var(--green-1400);
  --background-success-disabled: var(--green-200);
  --background-success-subtle: var(--green-100);
  --background-success-subtle-hover: var(--green-200);
  --background-success-subtle-active: var(--green-300);
  --background-success-subtle-focus: var(--green-200);
  --background-success-bold: var(--green-1400);
  --background-success-bold-hover: var(--green-1300);
  --background-success-bold-active: var(--green-1500);
  --background-success-bold-focus: var(--green-1600);

  --background-warning: var(--amber-1200);
  --background-warning-hover: var(--amber-1100);
  --background-warning-active: var(--amber-1300);
  --background-warning-focus: var(--amber-1400);
  --background-warning-disabled: var(--amber-200);
  --background-warning-subtle: var(--amber-100);
  --background-warning-subtle-hover: var(--amber-200);
  --background-warning-subtle-active: var(--amber-300);
  --background-warning-subtle-focus: var(--amber-200);
  --background-warning-bold: var(--amber-1400);
  --background-warning-bold-hover: var(--amber-1300);
  --background-warning-bold-active: var(--amber-1500);
  --background-warning-bold-focus: var(--amber-1600);

  --background-danger: var(--red-1000);
  --background-danger-hover: var(--red-900);
  --background-danger-active: var(--red-1100);
  --background-danger-focus: var(--red-1200);
  --background-danger-disabled: var(--red-200);
  --background-danger-subtle: var(--red-100);
  --background-danger-subtle-hover: var(--red-200);
  --background-danger-subtle-active: var(--red-300);
  --background-danger-subtle-focus: var(--red-200);
  --background-danger-bold: var(--red-1200);
  --background-danger-bold-hover: var(--red-1100);
  --background-danger-bold-active: var(--red-1300);
  --background-danger-bold-focus: var(--red-1400);

  --background-advertising: var(--fuchsia-900);
  --background-advertising-hover: var(--fuchsia-800);
  --background-advertising-active: var(--fuchsia-1000);
  --background-advertising-focus: var(--fuchsia-1100);
  --background-advertising-disabled: var(--fuchsia-200);
  --background-advertising-subtle: var(--fuchsia-100);
  --background-advertising-subtle-hover: var(--fuchsia-200);
  --background-advertising-subtle-active: var(--fuchsia-300);
  --background-advertising-subtle-focus: var(--fuchsia-200);
  --background-advertising-bold: var(--fuchsia-1100);
  --background-advertising-bold-hover: var(--fuchsia-1000);
  --background-advertising-bold-active: var(--fuchsia-1200);
  --background-advertising-bold-focus: var(--fuchsia-1300);

  /** Overlay */
  --background-overlay: var(--alpha-dark-600);
  /* ------------------------------------------------------- */

  /* Progressbar */
  --progressbar-background: var(--neutral-200);
  --progressbar-neutral: var(--neutral-800);
  --progressbar-primary: var(--blue-800);
  --progressbar-secondary: var(--violet-800);
  --progressbar-info: var(--cyan-800);
  --progressbar-success: var(--green-800);
  --progressbar-warning: var(--amber-800);
  --progressbar-danger: var(--red-800);
  --progressbar-advertising: var(--fuchsia-800);
  /* ------------------------------------------------------- */
}