censademopackage
Version:
React components library project for Innovaccer Design System
208 lines (181 loc) • 6.1 kB
CSS
:root {
/* Colors */
/* default */
--primary: var(--jal);
--secondary: var(--stone);
--success: var(--neem);
--alert: var(--mirch);
--warning: var(--haldi);
--accent1: var(--tawak);
--accent2: var(--jamun);
--accent3: var(--neel);
--accent4: var(--nimbu);
--inverse: var(--night);
/* dark */
--primary-dark: var(--jal-dark);
--secondary-dark: var(--stone-dark);
--success-dark: var(--neem-dark);
--alert-dark: var(--mirch-dark);
--warning-dark: var(--haldi-dark);
--accent1-dark: var(--tawak-dark);
--accent2-dark: var(--jamun-dark);
--accent3-dark: var(--neel-dark);
--accent4-dark: var(--nimbu-dark);
/* darker */
--primary-darker: var(--jal-darker);
--success-darker: var(--neem-darker);
--alert-darker: var(--mirch-darker);
--warning-darker: var(--haldi-darker);
--accent1-darker: var(--tawak-darker);
--accent2-darker: var(--jamun-darker);
--accent3-darker: var(--neel-darker);
--accent4-darker: var(--nimbu-darker);
/* light */
--primary-light: var(--jal-light);
--secondary-light: var(--stone-light);
--success-light: var(--neem-light);
--alert-light: var(--mirch-light);
--warning-light: var(--haldi-light);
--accent1-light: var(--tawak-light);
--accent2-light: var(--jamun-light);
--accent3-light: var(--neel-light);
--accent4-light: var(--nimbu-light);
--inverse-light: var(--night-light);
/* lighter */
--primary-lighter: var(--jal-lighter);
--secondary-lighter: var(--stone-lighter);
--success-lighter: var(--neem-lighter);
--alert-lighter: var(--mirch-lighter);
--warning-lighter: var(--haldi-lighter);
--accent1-lighter: var(--tawak-lighter);
--accent2-lighter: var(--jamun-lighter);
--accent3-lighter: var(--neel-lighter);
--accent4-lighter: var(--nimbu-lighter);
--inverse-lighter: var(--night-lighter);
/* lightest */
--primary-lightest: var(--jal-lightest);
--secondary-lightest: var(--stone-lightest);
--success-lightest: var(--neem-lightest);
--alert-lightest: var(--mirch-lightest);
--warning-lightest: var(--haldi-lightest);
--accent1-lightest: var(--tawak-lightest);
--accent2-lightest: var(--jamun-lightest);
--accent3-lightest: var(--neel-lightest);
--accent4-lightest: var(--nimbu-lightest);
--inverse-lightest: var(--night-lightest);
/* shadow */
--primary-shadow: color-mod(var(--primary) a(0.16));
--secondary-shadow: color-mod(var(--secondary) a(0.16));
--success-shadow: color-mod(var(--success) a(0.16));
--alert-shadow: color-mod(var(--alert) a(0.16));
--warning-shadow: color-mod(var(--warning) a(0.16));
--accent1-shadow: color-mod(var(--accent1) a(0.16));
--accent2-shadow: color-mod(var(--accent2) a(0.16));
--accent3-shadow: color-mod(var(--accent3) a(0.16));
--accent4-shadow: color-mod(var(--accent4) a(0.16));
--inverse-shadow: color-mod(var(--inverse) a(0.16));
/* Text colors */
--text: var(--night);
--text-subtle: var(--night-lighter);
--text-link: var(--primary);
--text-disabled: var(--inverse-lightest);
--text-destructive: var(--alert);
--text-white: var(--white);
--text-success: var(--success);
/* spacing */
--spacing-xs: 1px;
--spacing-s: 2px;
--spacing-m: 4px;
--spacing: 8px;
--spacing-l: 12px;
/* 8 * 2 */
--spacing-2: 16px;
/* 8 * 3 */
--spacing-xl: 24px;
/* 8 * 4 */
--spacing-3: 32px;
/* 8 * 6 */
--spacing-4: 48px;
/* 8 * 8 */
--spacing-5: 64px;
/* 8 * 12 */
--spacing-6: 96px;
/* 8 * 16 */
--spacing-7: 128px;
/* 8 * 22 */
--spacing-8: 176px;
/* 8 * 32 */
--spacing-9: 256px;
/* Fonts */
--font-family: 'Nunito Sans';
/* Font size */
--font-size-xxs: 4px;
--font-size-xs: 8px;
--font-size-s: 12px;
--font-size: 14px;
--font-size-m: 16px;
--font-size-l: 20px;
--font-size-xl: 28px;
--font-size-xxl: 32px;
--font-size-xxxl: 40px;
/* Font weight */
--font-weight-normal: 400;
--font-weight-medium: 600;
--font-weight-bold: 700;
--font-weight-bolder: 800;
/* Line height or Font height */
--font-height-normal: normal;
--font-height-s: 16px;
--font-height: 20px;
--font-height-m: 24px;
--font-height-l: 32px;
--font-height-xl: 40px;
--font-height-xxl: 48px;
/* Letter spacing */
--letter-spacing: 0.5px;
/* body settings */
/* border */
--border: var(--spacing-xs) solid var(--secondary);
--border-s: var(--spacing-s) solid var(--secondary);
/* padding */
/* shadow */
--shadow-s: 0 1px 4px 0 rgba(0, 0, 0, 0.16);
--shadow-m: 0 2px 8px 0 rgba(0, 0, 0, 0.16);
--shadow-l: 0 4px 16px 0 rgba(0, 0, 0, 0.16);
--shadow-spread: 0 0 0 3px;
/*
Grid breakpoints
Define the minimum dimensions at which your layout will change,
adapting to different screen sizes, for use in media queries.
*/
--grid-s-breakpoint: 576px;
--grid-m-breakpoint: 768px;
--grid-l-breakpoint: 992px;
--grid-xl-breakpoint: 1200px;
/*
Grid columns
Set the number of columns and specify the width of the gutters.
*/
--grid-columns: 12;
/* Undefined colors */
--card-subdued-bg: #fcfafa;
/* Transparancy (Opacity) */
--transparent-58: 0.58;
/* Transition curve timing function */
/* Use standard-easing when an element is visible from the beginning to the end of a motion. Ex-Expanding cards. */
--standard-productive-curve: cubic-bezier(0.2, 0, 0.38, 0.9);
--standard-expressive-curve: cubic-bezier(0.4, 0.14, 0.3, 1);
/* Use entrance-easing when an element quickly appears and slows down to a stop. Ex-when adding elements to the view, such as a modal appearing. */
--entrance-productive-curve: cubic-bezier(0, 0, 0.38, 0.9);
--entrance-expressive-curve: cubic-bezier(0, 0, 0.3, 1);
/* Use exit-easing when removing elements from view, such as closing a modal or toaster. */
--exit-productive-curve: cubic-bezier(0.2, 0, 1, 0.9);
--exit-expressive-curve: cubic-bezier(0.4, 0.14, 1, 1);
/* Transition duration */
--duration--fast-01: 80ms;
--duration--fast-02: 120ms;
--duration--moderate-01: 160ms;
--duration--moderate-02: 240ms;
--duration--slow-01: 400ms;
--duration--slow-02: 720ms;
}