igniteui-theming/tailwind/themes/base.css

A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.

@theme{--color-primary-50: var(--ig-primary-50);--color-primary-50-contrast: var(--ig-primary-50-contrast);--color-primary-100: var(--ig-primary-100);--color-primary-100-contrast: var(--ig-primary-100-contrast);--color-primary-200: var(--ig-primary-200);--color-primary-200-contrast: var(--ig-primary-200-contrast);--color-primary-300: var(--ig-primary-300);--color-primary-300-contrast: var(--ig-primary-300-contrast);--color-primary-400: var(--ig-primary-400);--color-primary-400-contrast: var(--ig-primary-400-contrast);--color-primary-500: var(--ig-primary-500);--color-primary-500-contrast: var(--ig-primary-500-contrast);--color-primary-600: var(--ig-primary-600);--color-primary-600-contrast: var(--ig-primary-600-contrast);--color-primary-700: var(--ig-primary-700);--color-primary-700-contrast: var(--ig-primary-700-contrast);--color-primary-800: var(--ig-primary-800);--color-primary-800-contrast: var(--ig-primary-800-contrast);--color-primary-900: var(--ig-primary-900);--color-primary-900-contrast: var(--ig-primary-900-contrast);--color-primary-A100: var(--ig-primary-A100);--color-primary-A100-contrast: var(--ig-primary-A100-contrast);--color-primary-A200: var(--ig-primary-A200);--color-primary-A200-contrast: var(--ig-primary-A200-contrast);--color-primary-A400: var(--ig-primary-A400);--color-primary-A400-contrast: var(--ig-primary-A400-contrast);--color-primary-A700: var(--ig-primary-A700);--color-primary-A700-contrast: var(--ig-primary-A700-contrast);--color-secondary-50: var(--ig-secondary-50);--color-secondary-50-contrast: var(--ig-secondary-50-contrast);--color-secondary-100: var(--ig-secondary-100);--color-secondary-100-contrast: var(--ig-secondary-100-contrast);--color-secondary-200: var(--ig-secondary-200);--color-secondary-200-contrast: var(--ig-secondary-200-contrast);--color-secondary-300: var(--ig-secondary-300);--color-secondary-300-contrast: var(--ig-secondary-300-contrast);--color-secondary-400: var(--ig-secondary-400);--color-secondary-400-contrast: var(--ig-secondary-400-contrast);--color-secondary-500: var(--ig-secondary-500);--color-secondary-500-contrast: var(--ig-secondary-500-contrast);--color-secondary-600: var(--ig-secondary-600);--color-secondary-600-contrast: var(--ig-secondary-600-contrast);--color-secondary-700: var(--ig-secondary-700);--color-secondary-700-contrast: var(--ig-secondary-700-contrast);--color-secondary-800: var(--ig-secondary-800);--color-secondary-800-contrast: var(--ig-secondary-800-contrast);--color-secondary-900: var(--ig-secondary-900);--color-secondary-900-contrast: var(--ig-secondary-900-contrast);--color-secondary-A100: var(--ig-secondary-A100);--color-secondary-A100-contrast: var(--ig-secondary-A100-contrast);--color-secondary-A200: var(--ig-secondary-A200);--color-secondary-A200-contrast: var(--ig-secondary-A200-contrast);--color-secondary-A400: var(--ig-secondary-A400);--color-secondary-A400-contrast: var(--ig-secondary-A400-contrast);--color-secondary-A700: var(--ig-secondary-A700);--color-secondary-A700-contrast: var(--ig-secondary-A700-contrast);--color-gray-50: var(--ig-gray-50);--color-gray-50-contrast: var(--ig-gray-50-contrast);--color-gray-100: var(--ig-gray-100);--color-gray-100-contrast: var(--ig-gray-100-contrast);--color-gray-200: var(--ig-gray-200);--color-gray-200-contrast: var(--ig-gray-200-contrast);--color-gray-300: var(--ig-gray-300);--color-gray-300-contrast: var(--ig-gray-300-contrast);--color-gray-400: var(--ig-gray-400);--color-gray-400-contrast: var(--ig-gray-400-contrast);--color-gray-500: var(--ig-gray-500);--color-gray-500-contrast: var(--ig-gray-500-contrast);--color-gray-600: var(--ig-gray-600);--color-gray-600-contrast: var(--ig-gray-600-contrast);--color-gray-700: var(--ig-gray-700);--color-gray-700-contrast: var(--ig-gray-700-contrast);--color-gray-800: var(--ig-gray-800);--color-gray-800-contrast: var(--ig-gray-800-contrast);--color-gray-900: var(--ig-gray-900);--color-gray-900-contrast: var(--ig-gray-900-contrast);--color-surface-50: var(--ig-surface-50);--color-surface-50-contrast: var(--ig-surface-50-contrast);--color-surface-100: var(--ig-surface-100);--color-surface-100-contrast: var(--ig-surface-100-contrast);--color-surface-200: var(--ig-surface-200);--color-surface-200-contrast: var(--ig-surface-200-contrast);--color-surface-300: var(--ig-surface-300);--color-surface-300-contrast: var(--ig-surface-300-contrast);--color-surface-400: var(--ig-surface-400);--color-surface-400-contrast: var(--ig-surface-400-contrast);--color-surface-500: var(--ig-surface-500);--color-surface-500-contrast: var(--ig-surface-500-contrast);--color-surface-600: var(--ig-surface-600);--color-surface-600-contrast: var(--ig-surface-600-contrast);--color-surface-700: var(--ig-surface-700);--color-surface-700-contrast: var(--ig-surface-700-contrast);--color-surface-800: var(--ig-surface-800);--color-surface-800-contrast: var(--ig-surface-800-contrast);--color-surface-900: var(--ig-surface-900);--color-surface-900-contrast: var(--ig-surface-900-contrast);--color-surface-A100: var(--ig-surface-A100);--color-surface-A100-contrast: var(--ig-surface-A100-contrast);--color-surface-A200: var(--ig-surface-A200);--color-surface-A200-contrast: var(--ig-surface-A200-contrast);--color-surface-A400: var(--ig-surface-A400);--color-surface-A400-contrast: var(--ig-surface-A400-contrast);--color-surface-A700: var(--ig-surface-A700);--color-surface-A700-contrast: var(--ig-surface-A700-contrast);--color-info-50: var(--ig-info-50);--color-info-50-contrast: var(--ig-info-50-contrast);--color-info-100: var(--ig-info-100);--color-info-100-contrast: var(--ig-info-100-contrast);--color-info-200: var(--ig-info-200);--color-info-200-contrast: var(--ig-info-200-contrast);--color-info-300: var(--ig-info-300);--color-info-300-contrast: var(--ig-info-300-contrast);--color-info-400: var(--ig-info-400);--color-info-400-contrast: var(--ig-info-400-contrast);--color-info-500: var(--ig-info-500);--color-info-500-contrast: var(--ig-info-500-contrast);--color-info-600: var(--ig-info-600);--color-info-600-contrast: var(--ig-info-600-contrast);--color-info-700: var(--ig-info-700);--color-info-700-contrast: var(--ig-info-700-contrast);--color-info-800: var(--ig-info-800);--color-info-800-contrast: var(--ig-info-800-contrast);--color-info-900: var(--ig-info-900);--color-info-900-contrast: var(--ig-info-900-contrast);--color-info-A100: var(--ig-info-A100);--color-info-A100-contrast: var(--ig-info-A100-contrast);--color-info-A200: var(--ig-info-A200);--color-info-A200-contrast: var(--ig-info-A200-contrast);--color-info-A400: var(--ig-info-A400);--color-info-A400-contrast: var(--ig-info-A400-contrast);--color-info-A700: var(--ig-info-A700);--color-info-A700-contrast: var(--ig-info-A700-contrast);--color-success-50: var(--ig-success-50);--color-success-50-contrast: var(--ig-success-50-contrast);--color-success-100: var(--ig-success-100);--color-success-100-contrast: var(--ig-success-100-contrast);--color-success-200: var(--ig-success-200);--color-success-200-contrast: var(--ig-success-200-contrast);--color-success-300: var(--ig-success-300);--color-success-300-contrast: var(--ig-success-300-contrast);--color-success-400: var(--ig-success-400);--color-success-400-contrast: var(--ig-success-400-contrast);--color-success-500: var(--ig-success-500);--color-success-500-contrast: var(--ig-success-500-contrast);--color-success-600: var(--ig-success-600);--color-success-600-contrast: var(--ig-success-600-contrast);--color-success-700: var(--ig-success-700);--color-success-700-contrast: var(--ig-success-700-contrast);--color-success-800: var(--ig-success-800);--color-success-800-contrast: var(--ig-success-800-contrast);--color-success-900: var(--ig-success-900);--color-success-900-contrast: var(--ig-success-900-contrast);--color-success-A100: var(--ig-success-A100);--color-success-A100-contrast: var(--ig-success-A100-contrast);--color-success-A200: var(--ig-success-A200);--color-success-A200-contrast: var(--ig-success-A200-contrast);--color-success-A400: var(--ig-success-A400);--color-success-A400-contrast: var(--ig-success-A400-contrast);--color-success-A700: var(--ig-success-A700);--color-success-A700-contrast: var(--ig-success-A700-contrast);--color-warn-50: var(--ig-warn-50);--color-warn-50-contrast: var(--ig-warn-50-contrast);--color-warn-100: var(--ig-warn-100);--color-warn-100-contrast: var(--ig-warn-100-contrast);--color-warn-200: var(--ig-warn-200);--color-warn-200-contrast: var(--ig-warn-200-contrast);--color-warn-300: var(--ig-warn-300);--color-warn-300-contrast: var(--ig-warn-300-contrast);--color-warn-400: var(--ig-warn-400);--color-warn-400-contrast: var(--ig-warn-400-contrast);--color-warn-500: var(--ig-warn-500);--color-warn-500-contrast: var(--ig-warn-500-contrast);--color-warn-600: var(--ig-warn-600);--color-warn-600-contrast: var(--ig-warn-600-contrast);--color-warn-700: var(--ig-warn-700);--color-warn-700-contrast: var(--ig-warn-700-contrast);--color-warn-800: var(--ig-warn-800);--color-warn-800-contrast: var(--ig-warn-800-contrast);--color-warn-900: var(--ig-warn-900);--color-warn-900-contrast: var(--ig-warn-900-contrast);--color-warn-A100: var(--ig-warn-A100);--color-warn-A100-contrast: var(--ig-warn-A100-contrast);--color-warn-A200: var(--ig-warn-A200);--color-warn-A200-contrast: var(--ig-warn-A200-contrast);--color-warn-A400: var(--ig-warn-A400);--color-warn-A400-contrast: var(--ig-warn-A400-contrast);--color-warn-A700: var(--ig-warn-A700);--color-warn-A700-contrast: var(--ig-warn-A700-contrast);--color-error-50: var(--ig-error-50);--color-error-50-contrast: var(--ig-error-50-contrast);--color-error-100: var(--ig-error-100);--color-error-100-contrast: var(--ig-error-100-contrast);--color-error-200: var(--ig-error-200);--color-error-200-contrast: var(--ig-error-200-contrast);--color-error-300: var(--ig-error-300);--color-error-300-contrast: var(--ig-error-300-contrast);--color-error-400: var(--ig-error-400);--color-error-400-contrast: var(--ig-error-400-contrast);--color-error-500: var(--ig-error-500);--color-error-500-contrast: var(--ig-error-500-contrast);--color-error-600: var(--ig-error-600);--color-error-600-contrast: var(--ig-error-600-contrast);--color-error-700: var(--ig-error-700);--color-error-700-contrast: var(--ig-error-700-contrast);--color-error-800: var(--ig-error-800);--color-error-800-contrast: var(--ig-error-800-contrast);--color-error-900: var(--ig-error-900);--color-error-900-contrast: var(--ig-error-900-contrast);--color-error-A100: var(--ig-error-A100);--color-error-A100-contrast: var(--ig-error-A100-contrast);--color-error-A200: var(--ig-error-A200);--color-error-A200-contrast: var(--ig-error-A200-contrast);--color-error-A400: var(--ig-error-A400);--color-error-A400-contrast: var(--ig-error-A400-contrast);--color-error-A700: var(--ig-error-A700);--color-error-A700-contrast: var(--ig-error-A700-contrast);--shadow-elevation-0: var(--ig-elevation-0);--shadow-elevation-1: var(--ig-elevation-1);--shadow-elevation-2: var(--ig-elevation-2);--shadow-elevation-3: var(--ig-elevation-3);--shadow-elevation-4: var(--ig-elevation-4);--shadow-elevation-5: var(--ig-elevation-5);--shadow-elevation-6: var(--ig-elevation-6);--shadow-elevation-7: var(--ig-elevation-7);--shadow-elevation-8: var(--ig-elevation-8);--shadow-elevation-9: var(--ig-elevation-9);--shadow-elevation-10: var(--ig-elevation-10);--shadow-elevation-11: var(--ig-elevation-11);--shadow-elevation-12: var(--ig-elevation-12);--shadow-elevation-13: var(--ig-elevation-13);--shadow-elevation-14: var(--ig-elevation-14);--shadow-elevation-15: var(--ig-elevation-15);--shadow-elevation-16: var(--ig-elevation-16);--shadow-elevation-17: var(--ig-elevation-17);--shadow-elevation-18: var(--ig-elevation-18);--shadow-elevation-19: var(--ig-elevation-19);--shadow-elevation-20: var(--ig-elevation-20);--shadow-elevation-21: var(--ig-elevation-21);--shadow-elevation-22: var(--ig-elevation-22);--shadow-elevation-23: var(--ig-elevation-23);--shadow-elevation-24: var(--ig-elevation-24);--font-ig: var(--ig-font-family);--text-base: var(--ig-base-font-size)}@utility type-style-h1{font-family:var(--ig-h1-font-family);font-size:var(--ig-h1-font-size);font-weight:var(--ig-h1-font-weight);font-style:var(--ig-h1-font-style);line-height:var(--ig-h1-line-height);letter-spacing:var(--ig-h1-letter-spacing);text-transform:var(--ig-h1-text-transform);margin-top:var(--ig-h1-margin-top);margin-bottom:var(--ig-h1-margin-bottom)}@utility type-style-h2{font-family:var(--ig-h2-font-family);font-size:var(--ig-h2-font-size);font-weight:var(--ig-h2-font-weight);font-style:var(--ig-h2-font-style);line-height:var(--ig-h2-line-height);letter-spacing:var(--ig-h2-letter-spacing);text-transform:var(--ig-h2-text-transform);margin-top:var(--ig-h2-margin-top);margin-bottom:var(--ig-h2-margin-bottom)}@utility type-style-h3{font-family:var(--ig-h3-font-family);font-size:var(--ig-h3-font-size);font-weight:var(--ig-h3-font-weight);font-style:var(--ig-h3-font-style);line-height:var(--ig-h3-line-height);letter-spacing:var(--ig-h3-letter-spacing);text-transform:var(--ig-h3-text-transform);margin-top:var(--ig-h3-margin-top);margin-bottom:var(--ig-h3-margin-bottom)}@utility type-style-h4{font-family:var(--ig-h4-font-family);font-size:var(--ig-h4-font-size);font-weight:var(--ig-h4-font-weight);font-style:var(--ig-h4-font-style);line-height:var(--ig-h4-line-height);letter-spacing:var(--ig-h4-letter-spacing);text-transform:var(--ig-h4-text-transform);margin-top:var(--ig-h4-margin-top);margin-bottom:var(--ig-h4-margin-bottom)}@utility type-style-h5{font-family:var(--ig-h5-font-family);font-size:var(--ig-h5-font-size);font-weight:var(--ig-h5-font-weight);font-style:var(--ig-h5-font-style);line-height:var(--ig-h5-line-height);letter-spacing:var(--ig-h5-letter-spacing);text-transform:var(--ig-h5-text-transform);margin-top:var(--ig-h5-margin-top);margin-bottom:var(--ig-h5-margin-bottom)}@utility type-style-h6{font-family:var(--ig-h6-font-family);font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom)}@utility type-style-subtitle-1{font-family:var(--ig-subtitle-1-font-family);font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom)}@utility type-style-subtitle-2{font-family:var(--ig-subtitle-2-font-family);font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom)}@utility type-style-body-1{font-family:var(--ig-body-1-font-family);font-size:var(--ig-body-1-font-size);font-weight:var(--ig-body-1-font-weight);font-style:var(--ig-body-1-font-style);line-height:var(--ig-body-1-line-height);letter-spacing:var(--ig-body-1-letter-spacing);text-transform:var(--ig-body-1-text-transform);margin-top:var(--ig-body-1-margin-top);margin-bottom:var(--ig-body-1-margin-bottom)}@utility type-style-body-2{font-family:var(--ig-body-2-font-family);font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom)}@utility type-style-button{font-family:var(--ig-button-font-family);font-size:var(--ig-button-font-size);font-weight:var(--ig-button-font-weight);font-style:var(--ig-button-font-style);line-height:var(--ig-button-line-height);letter-spacing:var(--ig-button-letter-spacing);text-transform:var(--ig-button-text-transform);margin-top:var(--ig-button-margin-top);margin-bottom:var(--ig-button-margin-bottom)}@utility type-style-caption{font-family:var(--ig-caption-font-family);font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom)}@utility type-style-overline{font-family:var(--ig-overline-font-family);font-size:var(--ig-overline-font-size);font-weight:var(--ig-overline-font-weight);font-style:var(--ig-overline-font-style);line-height:var(--ig-overline-line-height);letter-spacing:var(--ig-overline-letter-spacing);text-transform:var(--ig-overline-text-transform);margin-top:var(--ig-overline-margin-top);margin-bottom:var(--ig-overline-margin-bottom)}