@aveonline/ui-react
Version:
Home base for Aveonline design system - ecosystem react
169 lines (167 loc) • 6.45 kB
CSS
/**
* Modify directly
* --font-family-sans = Inter
* --font-weight-regular = 400
*/
:root {
--spacing-1xl: 117px;
--spacing-xxl: 56px;
--spacing-xl: 32px;
--spacing-lg: 24px;
--spacing-md: 18px;
--spacing-sm: 16px;
--spacing-xs: 8px;
--spacing-xxs: 0px;
--box-shadow-pressed: 0px 6px 8px 0px #3434341a;
--box-shadow-popup: 0px 0px 1px rgba(0, 0, 0, 0.2),
0px 3px 50px rgba(0, 0, 0, 0.2);
--box-shadow-popover: 0px 0px 2px rgba(0, 0, 0, 0.2),
0px 2px 10px rgba(0, 0, 0, 0.1);
--box-shadow-card: 0px 2px 1px rgba(0, 0, 0, 0.05),
0px 0px 1px rgba(0, 0, 0, 0.25);
--font-family-sans: 'Inter';
--border-radius-md: 20px;
--border-radius-sm: 10px;
--border-radius-xs: 8px;
--font-weight-bold: 700;
--font-weight-medium: 500;
--font-weight-regular: 400;
--line-height-xxl: 56px;
--line-height-xl: 36px;
--line-height-lg: 32px;
--line-height-md: 28px;
--line-height-sm: 24px;
--line-height-xs: 20px;
--line-height-xxs: 16px;
--font-size-xxl: 50px;
--font-size-xl: 40px;
--font-size-lg: 32px;
--font-size-md: 28px;
--font-size-sm: 24px;
--font-size-xs: 16px;
--font-size-xxs: 14px;
--colors-special-four-back: rgba(156, 255, 147, 0.25);
--colors-special-four: #72d69a;
--colors-special-three-back: rgba(179, 215, 255, 0.25);
--colors-special-three: #3eadfe;
--colors-special-two-back: rgba(240, 166, 98, 0.25);
--colors-special-two: #f0a662;
--colors-special-one-back: rgba(182, 147, 255, 0.25);
--colors-special-one: #bc72d6;
--colors-base-success: #16ab49ff;
--colors-base-warning: #ffa826ff;
--colors-base-critical: #f56270ff;
--colors-base-brand: #c80935ff;
--colors-base-interactive: #007affff;
--colors-base-secondary: #8a8a8aff;
--colors-base-primary: #42484eff;
--colors-base-surface: #f0f0f0ff;
--colors-radial-100: #1ddd5eff;
--colors-radial-90: #139840ff;
--colors-radial-80: #0f642cff;
--colors-radial-70: #93a611ff;
--colors-radial-60: #d0d82bff;
--colors-radial-50: #ede437ff;
--colors-radial-40: #f9b017ff;
--colors-radial-30: #f28c1bff;
--colors-radial-20: #e15b24ff;
--colors-radial-10: #b21a1bff;
--colors-background-modal: rgba(66, 72, 78, 0.25);
--colors-background-selected: #edeeefff;
--colors-background-active: #edeeefff;
--colors-background-hovered: #f1f2f3ff;
--colors-background-default: #f6f6f7ff;
--colors-surface-neutral-disabled: #f6f6f6;
--colors-surface-neutral-active: #bdbdbd;
--colors-surface-neutral-hovered: #cecece;
--colors-surface-neutral-subdued: #e8e8e8;
--colors-surface-neutral-default: #dddddd;
--colors-surface-critical-disabled: #fde7ea;
--colors-surface-critical-active: #e49b9b;
--colors-surface-critical-hovered: #ebb3b3;
--colors-surface-critical-subdued: #fddfdf;
--colors-surface-critical-default: #f1c8c8;
--colors-surface-success-active: #9cd8b1;
--colors-surface-success-hovered: #b3dfc2;
--colors-surface-success-subdued: #d0eedb;
--colors-surface-success-default: #bfe8d3;
--colors-surface-warning-active: #ffe78f;
--colors-surface-warning-hovered: #feeca5;
--colors-surface-warning-subdued: #fff7da;
--colors-surface-warning-default: #fff2c2;
--colors-surface-action-disabled: #e7f4ff;
--colors-surface-action-active: #93b7df;
--colors-surface-action-hovered: #a4c8f0;
--colors-surface-action-subdued: #ddeaf7;
--colors-surface-action-default: #b3d7ff;
--colors-surface-disabled: #f6f8fb;
--colors-surface-pressed: #ccced1;
--colors-surface-active: #dfe1e4;
--colors-surface-hovered: #ebedf0;
--colors-surface-subdued: #f3f4f6;
--colors-surface-default: #ffffffff;
--colors-focused-default: #3eadfeff;
--colors-icon-on: #ffffffff;
--colors-icon-success: #149840ff;
--colors-icon-warning: #c18f00ff;
--colors-icon-critical: #bd2a2aff;
--colors-icon-disabled: #d6d6d6ff;
--colors-icon-active: #636b74ff;
--colors-icon-hovered: #42484eff;
--colors-icon-subdued: #a1a1a1ff;
--colors-icon-default: #61666bff;
--colors-icon-brand: #5f24f1;
--colors-interactive-critical-disabled: #ce9ea2ff;
--colors-interactive-critical-active: #6c0f00ff;
--colors-interactive-critical-hovered: #c12929ff;
--colors-interactive-critical-default: #d82f2fff;
--colors-interactive-disabled: #d6dbe0ff;
--colors-interactive-active: #004289ff;
--colors-interactive-hovered: #0068daff;
--colors-interactive-default: #007aff;
--colors-border-shadow-subdued: #ebebeb;
--colors-border-critical-disabled: #ffc9c6ff;
--colors-border-critical-subdued: #e05563ff;
--colors-border-critical-default: #f56270ff;
--colors-border-success-subdued: #43da76ff;
--colors-border-success-default: #16ab49;
--colors-border-disabled: #e3e3e3;
--colors-border-active: #c5c5c5;
--colors-border-hovered: #d1d1d1;
--colors-border-subdued: #e7e7e7;
--colors-border-default: #dcdcdc;
--colors-action-opacity-disabled: rgba(109, 113, 117, 0.2);
--colors-action-opacity-active: rgba(109, 113, 117, 0.6);
--colors-action-opacity-hovered: rgba(109, 113, 117, 0.4);
--colors-action-opacity-default: rgba(109, 113, 117, 0.3);
--colors-action-critical-disabled: #e4dfe0ff;
--colors-action-critical-pressed: #6c0f00ff;
--colors-action-critical-active: #9d2020ff;
--colors-action-critical-hovered: #c12929ff;
--colors-action-critical-default: #d82f2fff;
--colors-action-secondary-disabled: #f3f5f8;
--colors-action-secondary-pressed: #a8abb1;
--colors-action-secondary-active: #c8cbd1;
--colors-action-secondary-hovered: #d9dce2;
--colors-action-secondary-subdued: #f0f2f5;
--colors-action-secondary-default: #e5e7ea;
--colors-action-primary-disabled: #d6dbe0ff;
--colors-action-primary-pressed: #072a52ff;
--colors-action-primary-active: #0c4d95ff;
--colors-action-primary-hovered: #126dd0ff;
--colors-action-primary-default: #007affff;
--colors-action-primary-brand: #5f24f1;
--colors-letter-on: #ffffffff;
--colors-letter-success: #12953eff;
--colors-letter-critical: #bd2a2aff;
--colors-letter-warning: #ce881eff;
--colors-letter-disabled: #c3c5ca;
--colors-letter-subdued: #797c81;
--colors-letter-default: #4a4f54;
--colors-letter-brand: #5f24f1;
--ave-white: #fff;
--ave-gray: #3d3d3d;
--ave-primary: #5f24f1;
--ave-secondary: #301279;
--ave-active: #bfa7f9;
}