@penaprieto/design-system/dist/tokens/BrandB/css/tokens.css

Multi-brand React design system with design tokens from Figma

/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --bright-blue-100: #f2f6fc;
  --bright-blue-200: #e3efff;
  --bright-blue-300: #b9d7ff;
  --bright-blue-400: #90c0ff;
  --bright-blue-500: #64a7ff;
  --bright-blue-600: #3089ff;
  --bright-blue-700: #006eff;
  --bright-blue-800: #0059cd;
  --bright-blue-900: #0047a5;
  --bright-blue-1000: #00357b;
  --indigo-100: #f8fafd;
  --indigo-200: #e9eef8;
  --indigo-300: #cad5ee;
  --indigo-400: #abbde4;
  --indigo-500: #8da5da;
  --indigo-600: #6b8ace;
  --indigo-700: #486ec3;
  --indigo-800: #2e5abb;
  --indigo-900: #083cae;
  --indigo-1000: #06308a;
  --blue-corp-100: #ededf1;
  --blue-corp-200: #d3d4dc;
  --blue-corp-300: #bbbcc8;
  --blue-corp-400: #a2a4b4;
  --blue-corp-500: #878a9f;
  --blue-corp-600: #6c6f89;
  --blue-corp-700: #5a5d7b;
  --blue-corp-800: #464a6b;
  --blue-corp-900: #31355a;
  --blue-corp-1000: #080d39;
  --sky-100: #f9fafd;
  --sky-200: #e9eef8;
  --sky-300: #d8e0f2;
  --sky-400: #ced8ef;
  --sky-500: #c1cbe0;
  --sky-600: #9ea5b6;
  --sky-700: #858b99;
  --sky-800: #6c717c;
  --sky-900: #5b5f69;
  --sky-1000: #494c53;
  --cloud-100: #f8fafd;
  --cloud-200: #e9eef8;
  --cloud-300: #d0d5de;
  --cloud-400: #b9bdc5;
  --cloud-500: #a2a5ac;
  --cloud-600: #888b91;
  --cloud-700: #6f7175;
  --cloud-800: #5e5f63;
  --cloud-900: #4b4c4f;
  --cloud-1000: #37383a;
  --pink-100: #fde9ee;
  --pink-200: #fbc7d5;
  --pink-300: #f9a5bb;
  --pink-400: #f6809e;
  --pink-500: #f34d78;
  --pink-600: #f13465;
  --pink-700: #d32e58;
  --pink-800: #a32444;
  --pink-900: #821c36;
  --pink-1000: #6b172d;
  --green-100: #f3ffd2;
  --green-200: #ddfe80;
  --green-300: #c0fe15;
  --green-400: #aaee2f;
  --green-500: #96d425;
  --green-600: #7faf27;
  --green-700: #688c25;
  --green-800: #536f1e;
  --green-900: #455d1a;
  --green-1000: #384915;
  --alpha-white-100: #ffffff;
  --alpha-white-90: rgba(255, 255, 255, 0.9);
  --alpha-white-80: rgba(255, 255, 255, 0.8);
  --alpha-white-70: rgba(255, 255, 255, 0.7);
  --alpha-white-60: rgba(255, 255, 255, 0.6);
  --alpha-white-50: rgba(255, 255, 255, 0.5);
  --alpha-white-40: rgba(255, 255, 255, 0.4);
  --alpha-white-30: rgba(255, 255, 255, 0.3);
  --alpha-white-20: rgba(255, 255, 255, 0.2);
  --alpha-white-10: rgba(255, 255, 255, 0.1);
  --alpha-white-5: rgba(255, 255, 255, 0.05);
  --alpha-white-0: rgba(255, 255, 255, 0);
  --alpha-indigo-100: #083cae;
  --alpha-indigo-90: rgba(8, 60, 174, 0.9);
  --alpha-indigo-80: rgba(8, 60, 174, 0.8);
  --alpha-indigo-70: rgba(8, 60, 174, 0.7);
  --alpha-indigo-60: rgba(8, 60, 174, 0.6);
  --alpha-indigo-50: rgba(8, 60, 174, 0.5);
  --alpha-indigo-40: rgba(8, 60, 174, 0.4);
  --alpha-indigo-30: rgba(8, 60, 174, 0.3);
  --alpha-indigo-20: rgba(8, 60, 174, 0.2);
  --alpha-indigo-10: rgba(8, 60, 174, 0.1);
  --alpha-indigo-5: rgba(8, 60, 174, 0.05);
  --alpha-pink-100: #f13465;
  --alpha-pink-90: rgba(241, 52, 101, 0.9);
  --alpha-pink-80: rgba(241, 52, 101, 0.8);
  --alpha-pink-70: rgba(241, 52, 101, 0.7);
  --alpha-pink-60: rgba(241, 52, 101, 0.6);
  --alpha-pink-50: rgba(241, 52, 101, 0.5);
  --alpha-pink-40: rgba(241, 52, 101, 0.4);
  --alpha-pink-30: rgba(241, 52, 101, 0.3);
  --alpha-pink-20: rgba(241, 52, 101, 0.2);
  --alpha-pink-10: rgba(241, 52, 101, 0.1);
  --alpha-pink-5: rgba(241, 52, 101, 0.05);
  --alpha-corp-100: #080d39;
  --alpha-corp-90: rgba(8, 13, 57, 0.9);
  --alpha-corp-80: rgba(8, 13, 57, 0.8);
  --alpha-corp-70: rgba(8, 13, 57, 0.7);
  --alpha-corp-60: rgba(8, 13, 57, 0.6);
  --alpha-corp-50: rgba(8, 13, 57, 0.5);
  --alpha-corp-40: rgba(8, 13, 57, 0.4);
  --alpha-corp-30: rgba(8, 13, 57, 0.3);
  --alpha-corp-20: rgba(8, 13, 57, 0.2);
  --alpha-corp-10: rgba(8, 13, 57, 0.1);
  --alpha-corp-5: rgba(8, 13, 57, 0.05);
  --alpha-black-100: #000000;
  --alpha-black-90: rgba(0, 0, 0, 0.9);
  --alpha-black-80: rgba(0, 0, 0, 0.8);
  --alpha-black-70: rgba(0, 0, 0, 0.7);
  --alpha-black-60: rgba(0, 0, 0, 0.6);
  --alpha-black-50: rgba(0, 0, 0, 0.5);
  --alpha-black-40: rgba(0, 0, 0, 0.4);
  --alpha-black-30: rgba(0, 0, 0, 0.3);
  --alpha-black-20: rgba(0, 0, 0, 0.2);
  --alpha-black-10: rgba(0, 0, 0, 0.1);
  --alpha-black-5: rgba(0, 0, 0, 0.05);
  --alpha-black-0: rgba(0, 0, 0, 0);
  --gold-100: #fff8e9;
  --gold-200: #fff1d3;
  --gold-300: #ffe3a7;
  --gold-400: #ffd67c;
  --gold-500: #ffc850;
  --gold-600: #ffba24;
  --gold-700: #cc951d;
  --gold-800: #997016;
  --gold-900: #664a0e;
  --gold-1000: #332507;
  --red-100: #fce8e8;
  --red-200: #fbdfdf;
  --red-300: #f6a6a6;
  --red-400: #f17979;
  --red-500: #ed4d4d;
  --red-600: #e82020;
  --red-700: #a51717;
  --red-800: #8b1313;
  --red-900: #610d0d;
  --red-1000: #2e0606;
  --dark-green-100: #ebfbf1;
  --dark-green-200: #d7f6e3;
  --dark-green-300: #afedc7;
  --dark-green-400: #88e5ab;
  --dark-green-500: #60dc8f;
  --dark-green-600: #38d373;
  --dark-green-700: #2da95c;
  --dark-green-800: #227f45;
  --dark-green-900: #16542e;
  --dark-green-1000: #0b2a17;
  --font-weight-light: 300;
  --font-family: Outfit, sans-serif;
  --line-height-body: 150%;
  --line-height-heading: 110%;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --base-value: 16;
  --brand-primary-default: #38d373;
  --brand-primary-hover: #2da95c;
  --brand-primary-active: #16542e;
  --brand-accent-default: #ffba24;
  --brand-accent-hover: #cc951d;
  --brand-accent-active: #664a0e;
  --brand-success: #006eff;
  --brand-error: #e82020;
  --brand-warning: #f13465;
  --brand-font-family-primary: Outfit, sans-serif;
  --brand-font-family-secondary: Inter, sans-serif;
  --semantic-bg-action-primary-default: #ffba24;
  --semantic-bg-action-primary-hover: #cc951d;
  --semantic-bg-action-primary-active: #664a0e;
  --semantic-bg-action-primary-disabled: #f6809e;
  --semantic-bg-action-secondary-default: rgba(8, 60, 174, 0.05);
  --semantic-bg-action-secondary-hover: rgba(8, 60, 174, 0.1);
  --semantic-bg-action-secondary-active: rgba(8, 60, 174, 0.2);
  --semantic-bg-action-secondary-disabled: rgba(8, 60, 174, 0.1);
  --semantic-bg-action-secondary-inverse-default: rgba(255, 255, 255, 0.1);
  --semantic-bg-action-secondary-inverse-hover: rgba(255, 255, 255, 0.2);
  --semantic-bg-action-secondary-inverse-active: rgba(255, 255, 255, 0.3);
  --semantic-bg-action-secondary-inverse-disabled: rgba(255, 255, 255, 0.05);
  --semantic-bg-action-tertiary-hover: rgba(8, 60, 174, 0.05);
  --semantic-bg-action-tertiary-active: rgba(8, 60, 174, 0.1);
  --semantic-bg-action-tertiary-inverse-hover: rgba(255, 255, 255, 0.05);
  --semantic-bg-action-tertiary-inverse-active: rgba(255, 255, 255, 0.1);
  --semantic-bg-action-brand-default: #38d373;
  --semantic-bg-action-brand-hover: #2da95c;
  --semantic-bg-action-brand-active: #16542e;
  --semantic-bg-action-brand-disabled: #8da5da;
  --semantic-bg-action-brand-subtle-default: #e9eef8;
  --semantic-bg-action-brand-subtle-hover: #cad5ee;
  --semantic-bg-action-brand-subtle-active: #abbde4;
  --semantic-bg-action-ghost-hover: rgba(8, 13, 57, 0.05);
  --semantic-bg-action-ghost-active: rgba(8, 13, 57, 0.1);
  --semantic-bg-default: #f8fafd;
  --semantic-bg-surface-default: #ffffff;
  --semantic-bg-surface-inverse: #080d39;
  --semantic-bg-disabled: #ededf1;
  --semantic-bg-warning: #fff8e9;
  --semantic-bg-error: #fce8e8;
  --semantic-bg-success: #ebfbf1;
  --semantic-bg-info: #e3efff;
  --semantic-bg-overlay: rgba(0, 0, 0, 0.8);
  --semantic-bg-neutral: #000000;
  --semantic-bg-default-alt: #f2f6fc;
  --semantic-icon-brand-disabled: #8da5da;
  --semantic-icon-brand-default: #38d373;
  --semantic-icon-brand-bold: #38d373;
  --semantic-icon-default-bold: #080d39;
  --semantic-icon-default-default: #5a5d7b;
  --semantic-icon-default-disabled: #d3d4dc;
  --semantic-icon-inverse-bold: #ffffff;
  --semantic-icon-inverse-default: rgba(255, 255, 255, 0.7);
  --semantic-icon-inverse-disabled: rgba(255, 255, 255, 0.3);
  --semantic-icon-success: #38d373;
  --semantic-icon-error: #e82020;
  --semantic-icon-warning: #ffba24;
  --semantic-focus-pink: 0px 0px 0px 8px rgba(241,52,101,0.3);
  --semantic-focus-indigo: 0px 0px 0px 8px rgba(8,60,174,0.3);
  --semantic-focus-bright-blue: 0px 0px 0px 8px rgba(0,110,255,0.3);
  --semantic-focus-white: 0px 0px 0px 8px rgba(255,255,255,0.2);
  --semantic-focus-sky: 0px 0px 0px 8px rgba(206,216,240,0.4);
  --semantic-focus-corp: 0px 0px 0px 8px rgba(8,13,57,0.1);
  --semantic-elevation-elevation1: 0px 1px 2px 0px rgba(8,13,57,0.12), 0px 1px 6px 0px rgba(9,61,173,0.05);
  --semantic-elevation-elevation2: 0px 3px 3px -1px rgba(8,13,57,0.12), 0px 3px 12px 0px rgba(9,61,173,0.08);
  --semantic-elevation-elevation3: 0px 4px 5px -3px rgba(8,13,56,0.12), 0px 6px 18px 0px rgba(9,61,173,0.08);
  --semantic-elevation-elevation4: 0px 9px 12px -5px rgba(8,13,56,0.12), 0px 10px 32px 0px rgba(9,61,173,0.12);
  --semantic-elevation-elevation5: 0px 17px 12px -7px rgba(8,13,56,0.12), 0px 14px 46px 0px rgba(9,61,173,0.16);
  --semantic-border-inverse-bold: #ffffff;
  --semantic-border-inverse-default: rgba(255, 255, 255, 0.5);
  --semantic-border-inverse-subtle: rgba(255, 255, 255, 0.2);
  --semantic-border-default-subtle: #ededf1;
  --semantic-border-default-default: #d3d4dc;
  --semantic-border-default-bold: #6c6f89;
  --semantic-border-brand-subtle: #8da5da;
  --semantic-border-brand-default: #38d373;
  --semantic-border-brand-bold: #38d373;
  --semantic-border-brand-bolder: #2da95c;
  --semantic-border-error-default: #e82020;
  --semantic-border-error-subtle: #fbdfdf;
  --semantic-border-warning-subtle: #fff1d3;
  --semantic-border-success-subtle: #d7f6e3;
  --semantic-border-info-subtle: #b9d7ff;
  --semantic-border-accent: #ffba24;
  --semantic-text-corp-primary: #080d39;
  --semantic-text-corp-secondary: #5a5d7b;
  --semantic-text-corp-disabled: #878a9f;
  --semantic-text-indigo-primary: #083cae;
  --semantic-text-indigo-secondary: #486ec3;
  --semantic-text-white-primary: #ffffff;
  --semantic-text-white-secondary: rgba(255, 255, 255, 0.7);
  --semantic-text-pink-primary: #ffba24;
  --semantic-text-brand-primary: #38d373;
  --semantic-text-warning: #664a0e;
  --semantic-text-error: #8b1313;
  --semantic-text-success: #16542e;
  --display-display-clean: 400 72px/110% Outfit, sans-serif;
  --heading-h1: 400 48px/110% Outfit, sans-serif;
  --heading-h2: 400 40px/110% Outfit, sans-serif;
  --heading-h3: 400 28px/110% Outfit, sans-serif;
  --heading-h4: 400 24px/110% Outfit, sans-serif;
  --heading-h5: 400 18px/110% Outfit, sans-serif;
  --heading-tag: 400 10px/150% Outfit, sans-serif;
  --body-x-large: 300 20px/150% Outfit, sans-serif;
  --body-large-strong: 400 18px/150% Outfit, sans-serif;
  --body-large: 300 18px/150% Outfit, sans-serif;
  --body-regular-strong: 400 16px/150% Outfit, sans-serif;
  --body-regular: 300 16px/150% Outfit, sans-serif;
  --body-small-strong: 400 14px/150% Outfit, sans-serif;
  --body-small: 300 14px/150% Outfit, sans-serif;
  --body-x-small: 300 12px/150% Outfit, sans-serif;
  --mobile-display-clean-m: 400 48px/110% Outfit, sans-serif;
  --mobile-h1-m: 400 32px/110% Outfit, sans-serif;
  --mobile-h2-m: 400 28px/110% Outfit, sans-serif;
  --mobile-h3-m: 400 24px/110% Outfit, sans-serif;
  --mobile-h4-m: 400 20px/110% Outfit, sans-serif;
  --size0: 2px;
  --size1: 4px;
  --size2: 8px;
  --size3: 12px;
  --size4: 16px;
  --size5: 24px;
  --size6: 32px;
  --size7: 40px;
  --size8: 48px;
  --size9: 64px;
  --size10: 80px;
  --size11: 120px;
  --size12: 160px;
  --br-xs: 4px;
  --br-sm: 8px;
  --br-md: 16px;
  --br-lg: 24px;
  --br-xl: 40px;
  --br-full: 9999px;
  --button-primary-bg-default: #ffba24;
  --button-primary-bg-hover: #cc951d;
  --button-primary-bg-active: #664a0e;
  --button-primary-bg-disabled: #f6809e;
  --button-primary-border-default: rgba(255, 255, 255, 0.2);
  --button-secondary-bg-default: rgba(8, 60, 174, 0.05);
  --button-secondary-bg-hover: rgba(8, 60, 174, 0.1);
  --button-secondary-bg-active: rgba(8, 60, 174, 0.2);
  --button-secondary-bg-disabled: rgba(8, 60, 174, 0.1);
  --button-secondary-bg-inverse-default: rgba(255, 255, 255, 0.1);
  --button-secondary-bg-inverse-hover: rgba(255, 255, 255, 0.2);
  --button-secondary-bg-inverse-active: rgba(255, 255, 255, 0.3);
  --button-secondary-bg-inverse-disabled: rgba(255, 255, 255, 0.05);
  --button-tertiary-bg-hover: rgba(8, 60, 174, 0.05);
  --button-tertiary-bg-active: rgba(8, 60, 174, 0.1);
  --button-tertiary-bg-inverse-hover: rgba(255, 255, 255, 0.05);
  --button-tertiary-bg-inverse-active: rgba(255, 255, 255, 0.1);
  --button-tertiary-border-default: #38d373;
  --button-tertiary-border-disabled: #8da5da;
  --button-tertiary-border-inverse-default: #ffffff;
  --button-tertiary-border-inverse-disabled: rgba(255, 255, 255, 0.2);
  --button-ghost-bg-hover: rgba(8, 13, 57, 0.05);
  --button-ghost-bg-active: rgba(8, 13, 57, 0.1);
  --button-ghost-bg-inverse-hover: rgba(255, 255, 255, 0.05);
  --button-ghost-bg-inverse-active: rgba(255, 255, 255, 0.1);
  --button-large: 400 18px/150% Outfit, sans-serif;
  --button-medium: 400 16px/150% Outfit, sans-serif;
  --button-small: 400 14px/150% Outfit, sans-serif;
  --text-field-border-default: #d3d4dc;
  --text-field-border-hover: #6c6f89;
  --text-field-border-focus: #38d373;
  --text-field-border-error: #e82020;
  --text-field-bg-default: #ffffff;
  --text-field-bg-disabled: #ededf1;
  --text-field-label: 400 14px/150% Outfit, sans-serif;
  --text-field-placeholder: 400 16px/150% Outfit, sans-serif;
  --text-field-assistive-text: 400 14px/150% Outfit, sans-serif;
  --switch-selected-bg-default: #38d373;
  --switch-selected-bg-hover: #2da95c;
  --switch-bg-disabled: #ededf1;
  --switch-bg-default: #ffffff;
  --switch-border-default: rgba(255, 255, 255, 0.2);
  --switch-border-disabled: #d3d4dc;
  --switch-unselected-bg-default: #e9eef8;
  --switch-unselected-bg-hover: #cad5ee;
  --radio-selected-bg-default: #38d373;
  --radio-selected-bg-hover: #2da95c;
  --radio-selected-bg-disabled: #8da5da;
  --radio-selected-border-default: #38d373;
  --radio-selected-border-hover: #2da95c;
  --radio-selected-border-disabled: #8da5da;
  --radio-bg-default: #ffffff;
  --radio-bg-disabled: #ededf1;
  --radio-unselected-border-default: #d3d4dc;
  --radio-unselected-border-hover: #6c6f89;
  --dropdown-bg-default: #ffffff;
  --dropdown-bg-hover: rgba(8, 60, 174, 0.05);
  --dropdown-bg-active: rgba(8, 60, 174, 0.1);
  --checkbox-selected-bg-default: #38d373;
  --checkbox-selected-bg-hover: #2da95c;
  --checkbox-selected-bg-disabled: rgba(8, 60, 174, 0.1);
  --checkbox-selected-border-default: rgba(255, 255, 255, 0.2);
  --checkbox-unselected-border-default: #d3d4dc;
  --checkbox-unselected-border-hover: #6c6f89;
  --checkbox-unselected-bg-default: #ffffff;
  --checkbox-unselected-bg-disabled: #ededf1;
  --alert-warning-bg: #fff8e9;
  --alert-warning-border: #fff1d3;
  --alert-error-bg: #fce8e8;
  --alert-error-border: #fbdfdf;
  --alert-success-bg: #ebfbf1;
  --alert-success-border: #d7f6e3;
  --alert-info-bg: #e3efff;
  --alert-info-border: #b9d7ff;
  --alert-neutral-bg: #000000;
  --alert-neutral-border: rgba(255, 255, 255, 0.2);
  --alert-default: 400 14px/150% Outfit, sans-serif;
  --alert-description: 300 14px/150% Outfit, sans-serif;
  --slider-track-bg-default: #38d373;
  --slider-track-bg-hover: #2da95c;
  --slider-track-bg-disabled: #8da5da;
  --slider-border-default: rgba(255, 255, 255, 0.2);
  --slider-bg-disabled: #ededf1;
  --radio-card-unselected-bg-default: #ffffff;
  --radio-card-unselected-bg-disabled: #ededf1;
  --radio-card-unselected-border-default: #d3d4dc;
  --radio-card-unselected-border-hover: #6c6f89;
  --radio-card-selected-bg-default: #38d373;
  --radio-card-selected-bg-hover: #2da95c;
  --radio-card-selected-bg-disabled: #8da5da;
  --radio-card-selected-border-default: rgba(255, 255, 255, 0.2);
  --tag-success-bg: #ebfbf1;
  --tag-success-border: #d7f6e3;
  --tag-error-bg: #fce8e8;
  --tag-error-border: #fbdfdf;
  --tag-warning-bg: #fff8e9;
  --tag-warning-border: #fff1d3;
  --tag-info-bg: #e3efff;
  --tag-info-border: #b9d7ff;
  --tag-featured-border: rgba(255, 255, 255, 0.2);
  --tag-featured-bg: #38d373;
  --tag-promo-bg: #080d39;
  --tag-promo-border: rgba(255, 255, 255, 0.2);
  --link-warning-bg-hover: #ffba24;
  --link-warning-bg-active: #ffba24;
  --link-error-bg-hover: #e82020;
  --link-error-bg-active: #e82020;
  --link-success-bg-hover: #38d373;
  --link-success-bg-active: #38d373;
  --link-brand-bg-hover: rgba(8, 60, 174, 0.1);
  --link-brand-bg-active: rgba(8, 60, 174, 0.2);
  --link-white-bg-hover: rgba(255, 255, 255, 0.2);
  --link-white-bg-active: rgba(255, 255, 255, 0.3);
  --link-large: 300 18px/150% Outfit, sans-serif;
  --link-x-large: 300 20px/150% Outfit, sans-serif;
  --link-large-strong: 400 18px/150% Outfit, sans-serif;
  --link-regular: 300 16px/150% Outfit, sans-serif;
  --link-regular-strong: 400 16px/150% Outfit, sans-serif;
  --link-small: 300 14px/150% Outfit, sans-serif;
  --link-small-strong: 400 14px/150% Outfit, sans-serif;
  --link-x-small: 300 12px/150% Outfit, sans-serif;
  --nav-bg-inverse: #2da95c;
  --nav-bg-default: #ffffff;
  --pill-selected-bg-default: #38d373;
  --pill-selected-bg-hover: #2da95c;
  --pill-selected-bg-active: #16542e;
  --pill-selected-bg-disabled: #8da5da;
  --pill-unselected-bg-default: rgba(8, 60, 174, 0.05);
  --pill-unselected-bg-hover: rgba(8, 60, 174, 0.1);
  --pill-unselected-bg-active: rgba(8, 60, 174, 0.2);
  --pill-unselected-bg-disabled: rgba(8, 60, 174, 0.1);
  --avatar-bg-default: #e9eef8;
  --avatar-bg-hover: #cad5ee;
  --avatar-bg-active: #abbde4;
  --avatar-bg-disabled: #ededf1;
  --avatar-bg-overlay-hover: rgba(8, 13, 57, 0.3);
  --avatar-bg-overlay-active: rgba(8, 13, 57, 0.4);
  --skeleton-bg-default-gradient: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0));
  --skeleton-bg-default-default: rgba(0, 0, 0, 0.05);
  --skeleton-bg-inverse-default: rgba(255, 255, 255, 0.1);
  --skeleton-bg-inverse-gradient: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
  --stepper-indicator-pending-bg: #ffffff;
  --stepper-indicator-pending-border: #d3d4dc;
  --stepper-indicator-pending-text: #5a5d7b;
  --stepper-indicator-current-bg: #38d373;
  --stepper-indicator-current-text: #ffffff;
  --stepper-indicator-completed-bg: #38d373;
  --stepper-indicator-completed-text: #ffffff;
  --stepper-indicator-error-bg: #fce8e8;
  --stepper-indicator-error-border: #fbdfdf;
  --stepper-indicator-error-text: #8b1313;
  --stepper-connector-default: #ededf1;
  --stepper-connector-completed: #38d373;
  --stepper-label-default: #080d39;
  --stepper-label-pending: #5a5d7b;
  --timepicker-dropdown-bg: #ffffff;
  --timepicker-dropdown-border: #d3d4dc;
}