@heycar-uikit/core/themes/dist/default.css

The React UI library from HeyCar

/* If this is ever changed please update breakpoints.json as well */

/* Mobile */

@custom-media --mobile (max-width: 767px);

/* Tablet */

@custom-media --tablet (min-width: 768px);

@custom-media --tablet-s (min-width: 768px);

@custom-media --tablet-l (min-width: 1024px);

/* Desktop */

@custom-media --desktop (min-width: 1280px);

@custom-media --desktop-s (min-width: 1280px);

@custom-media --desktop-m (min-width: 1366px);

@custom-media --desktop-l (min-width: 1440px);

:root {
  /* heycar mint color */
  --color-heycar-mint-50: #e6faf6;
  --color-heycar-mint-100: #ccf5ed;
  --color-heycar-mint-200: #99ebdb;
  --color-heycar-mint-300: #66e2c9;
  --color-heycar-mint-400: #33d8b7;
  --color-heycar-mint-500: #00cea5;
  --color-heycar-mint-600: #00a584;
  --color-heycar-mint-700: #007c63;
  --color-heycar-mint-800: #005242;
  --color-heycar-mint-900: #002921;

  /* mica blue color */
  --color-mica-blue-50: #f1f4fa;
  --color-mica-blue-100: #dee6f2;
  --color-mica-blue-200: #a2b7da;
  --color-mica-blue-300: #7394c8;
  --color-mica-blue-400: #4570b5;
  --color-mica-blue-500: #164ca3;
  --color-mica-blue-600: #123d82;
  --color-mica-blue-700: #052962;
  --color-mica-blue-800: #091e41;
  --color-mica-blue-900: #040f21;

  /* sunbeam blue color */
  --color-sunbeam-blue-50: #f0f9ff;
  --color-sunbeam-blue-100: #e8f6ff;
  --color-sunbeam-blue-200: #e1f3ff;
  --color-sunbeam-blue-300: #d9f0ff;
  --color-sunbeam-blue-400: #cdebff;
  --color-sunbeam-blue-500: #c0e6ff;
  --color-sunbeam-blue-600: #9bd1f4;
  --color-sunbeam-blue-700: #73b6e1;
  --color-sunbeam-blue-800: #4499cf;
  --color-sunbeam-blue-900: #2b6f99;

  /* mustang yellow color */
  --color-mustang-yellow-50: #fef8eb;
  --color-mustang-yellow-100: #fef0d8;
  --color-mustang-yellow-200: #fde1b0;
  --color-mustang-yellow-300: #fbd289;
  --color-mustang-yellow-400: #fac361;
  --color-mustang-yellow-500: #f9b43a;
  --color-mustang-yellow-600: #e29a1a;
  --color-mustang-yellow-700: #c9850c;
  --color-mustang-yellow-800: #ae7000;
  --color-mustang-yellow-900: #895800;

  /* old ferrari red color */
  --color-old-ferrari-red-50: #fff1ef;
  --color-old-ferrari-red-100: #ffe3df;
  --color-old-ferrari-red-200: #ffc8be;
  --color-old-ferrari-red-300: #ffac9e;
  --color-old-ferrari-red-400: #ff917d;
  --color-old-ferrari-red-500: #ff755d;
  --color-old-ferrari-red-600: #f46147;
  --color-old-ferrari-red-700: #e24529;
  --color-old-ferrari-red-800: #d73013;
  --color-old-ferrari-red-900: #c7270a;

  /* -- fantasy name of "green" color to be defined -- */
  --color-green-50: #e9f3ed;
  --color-green-100: #d2e8db;
  --color-green-200: #a5d1b8;
  --color-green-300: #79b994;
  --color-green-400: #4ca271;
  --color-green-500: #1f8b4d;
  --color-green-600: #196f3e;
  --color-green-700: #13532e;
  --color-green-800: #0c381f;
  --color-green-900: #061c0f;

  /* -- fantasy name of "whatsapp" color to be defined -- */
  --color-whatsapp-500: #59ce72;
  --color-whatsapp-600: #33a84c;
  --color-whatsapp-700: #148a2d;

  /* -- fantasy name of "red" color to be defined -- */
  --color-red-50: #fdeeee;
  --color-red-100: #fbdddd;
  --color-red-200: #f7bcbc;
  --color-red-300: #f39a9a;
  --color-red-400: #ef7979;
  --color-red-500: #eb5757;
  --color-red-600: #d73535;
  --color-red-700: #c61a1a;
  --color-red-800: #b90606;
  --color-red-900: #a00;

  /* tarmac grey color */
  --color-tarmac-grey-50: #f3f3f3;
  --color-tarmac-grey-100: #e6e6e6;
  --color-tarmac-grey-200: #cdcdcd;
  --color-tarmac-grey-300: #b5b5b5;
  --color-tarmac-grey-400: #9c9c9c;
  --color-tarmac-grey-500: #838383;
  --color-tarmac-grey-600: #595959;
  --color-tarmac-grey-700: #303030;
  --color-tarmac-grey-800: #262626;
  --color-tarmac-grey-900: #1d1d1d;

  /* brand colors */
  --color-heycar-mint: var(--color-heycar-mint-500);
  --color-mica-blue: var(--color-mica-blue-700);
  --color-sunbeam-blue: var(--color-sunbeam-blue-500);
  --color-championship-white: #fff;
}

/* Depricated. Do Not Use */

:root {
  --gap-3xs: 2px;
  --gap-2xs: 4px;
  --gap-1xs: 6px;
  --gap-xs: 8px;
  --gap-s: 12px;
  --gap-2s: 14px;
  --gap-m: 16px;
  --gap-l: 20px;
  --gap-xl: 24px;
  --gap-2xl: 28px;
  --gap-3xl: 32px;
  --gap-4xl: 36px;
  --gap-5xl: 40px;
  --gap-6xl: 44px;
  --gap-7xl: 48px;
  --gap-8xl: 56px;
  --gap-9xl: 64px;
  --gap-10xl: 72px;
}

:root {
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
  --spacing-14: 56px;
  --spacing-16: 64px;
  --spacing-18: 72px;
}

:root {
  --shadow-none: 'none';
  --shadow-xs: 0 2px 4px rgba(38, 38, 38, 0.06);
  --shadow-s: 0 2px 8px rgba(38, 38, 38, 0.08);
  --shadow-m: 0 4px 12px rgba(38, 38, 38, 0.08);
  --shadow-xl: 0 6px 24px rgba(38, 38, 38, 0.1);
  --shadow-xxl: 2px 8px 48px rgba(38, 38, 38, 0.2);
}

:root {
  /* Font families */
  --font-family-system: Objektiv, sans-serif, 'Helvetica Neue', Helvetica, Arial;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;
  --font-weight-xbold: 800;
}

/*
  Heading
*/

/*
  Sub-Heading
*/

/*
  Body
*/

/*
  Caption
*/

/*
  Overline
*/

/*
  Button
*/

/*
  Button Old - DO NOT USE
*/

/* Default theme (light) */

:root {
  /*
    Colors
  */
  --color-primary-50: var(--color-mica-blue-50);
  --color-primary-100: var(--color-mica-blue-100);
  --color-primary-200: var(--color-mica-blue-200);
  --color-primary-300: var(--color-mica-blue-300);
  --color-primary-400: var(--color-mica-blue-400);
  --color-primary-500: var(--color-mica-blue-500);
  --color-primary-600: var(--color-mica-blue-600);
  --color-primary-700: var(--color-mica-blue-700);
  --color-primary-800: var(--color-mica-blue-800);
  --color-primary-900: var(--color-mica-blue-900);
  --color-secondary-50: var(--color-heycar-mint-50);
  --color-secondary-100: var(--color-heycar-mint-100);
  --color-secondary-200: var(--color-heycar-mint-200);
  --color-secondary-300: var(--color-heycar-mint-300);
  --color-secondary-400: var(--color-heycar-mint-400);
  --color-secondary-500: var(--color-heycar-mint-500);
  --color-secondary-600: var(--color-heycar-mint-600);
  --color-secondary-700: var(--color-heycar-mint-700);
  --color-secondary-800: var(--color-heycar-mint-800);
  --color-secondary-900: var(--color-heycar-mint-900);
  --color-tertiary-50: var(--color-sunbeam-blue-50);
  --color-tertiary-100: var(--color-sunbeam-blue-100);
  --color-tertiary-200: var(--color-sunbeam-blue-200);
  --color-tertiary-300: var(--color-sunbeam-blue-300);
  --color-tertiary-400: var(--color-sunbeam-blue-400);
  --color-tertiary-500: var(--color-sunbeam-blue-500);
  --color-tertiary-600: var(--color-sunbeam-blue-600);
  --color-tertiary-700: var(--color-sunbeam-blue-700);
  --color-tertiary-800: var(--color-sunbeam-blue-800);
  --color-tertiary-900: var(--color-sunbeam-blue-900);
  --color-warning-50: var(--color-mustang-yellow-50);
  --color-warning-100: var(--color-mustang-yellow-100);
  --color-warning-200: var(--color-mustang-yellow-200);
  --color-warning-300: var(--color-mustang-yellow-300);
  --color-warning-400: var(--color-mustang-yellow-400);
  --color-warning-500: var(--color-mustang-yellow-500);
  --color-warning-600: var(--color-mustang-yellow-600);
  --color-warning-700: var(--color-mustang-yellow-700);
  --color-warning-800: var(--color-mustang-yellow-800);
  --color-warning-900: var(--color-mustang-yellow-900);
  --color-highlight-50: var(--color-old-ferrari-red-50);
  --color-highlight-100: var(--color-old-ferrari-red-100);
  --color-highlight-200: var(--color-old-ferrari-red-200);
  --color-highlight-300: var(--color-old-ferrari-red-300);
  --color-highlight-400: var(--color-old-ferrari-red-400);
  --color-highlight-500: var(--color-old-ferrari-red-500);
  --color-highlight-600: var(--color-old-ferrari-red-600);
  --color-highlight-700: var(--color-old-ferrari-red-700);
  --color-highlight-800: var(--color-old-ferrari-red-800);
  --color-highlight-900: var(--color-old-ferrari-red-900);
  --color-success-50: var(--color-green-50);
  --color-success-100: var(--color-green-100);
  --color-success-200: var(--color-green-200);
  --color-success-300: var(--color-green-300);
  --color-success-400: var(--color-green-400);
  --color-success-500: var(--color-green-500);
  --color-success-600: var(--color-green-600);
  --color-success-700: var(--color-green-700);
  --color-success-800: var(--color-green-800);
  --color-success-900: var(--color-green-900);
  --color-error-50: var(--color-red-50);
  --color-error-100: var(--color-red-100);
  --color-error-200: var(--color-red-200);
  --color-error-300: var(--color-red-300);
  --color-error-400: var(--color-red-400);
  --color-error-500: var(--color-red-500);
  --color-error-600: var(--color-red-600);
  --color-error-700: var(--color-red-700);
  --color-error-800: var(--color-red-800);
  --color-error-900: var(--color-red-900);
  --color-neutral-50: var(--color-tarmac-grey-50);
  --color-neutral-100: var(--color-tarmac-grey-100);
  --color-neutral-200: var(--color-tarmac-grey-200);
  --color-neutral-300: var(--color-tarmac-grey-300);
  --color-neutral-400: var(--color-tarmac-grey-400);
  --color-neutral-500: var(--color-tarmac-grey-500);
  --color-neutral-600: var(--color-tarmac-grey-600);
  --color-neutral-700: var(--color-tarmac-grey-700);
  --color-neutral-800: var(--color-tarmac-grey-800);
  --color-neutral-900: var(--color-tarmac-grey-900);

  /*
    Sizes
  */
  --size-small-height: var(--spacing-8);
  --size-middle-height: var(--spacing-10);
  --size-large-height: var(--spacing-12);
}

html {
  font-size: 16px;
}

body {
  color: var(--color-neutral-700);
}