@heycar-uikit/core/themes/styles/theme.module.css

The React UI library from HeyCar

@import '../../../themes/src/default.css';

.colorBlock {
  margin-bottom: 20px !important;
}

.colorShade {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
  margin-right: 10px !important;
  width: 60px;
  height: 60px;
  display: inline-block;
  padding: 10px;
  color: #969090;
  font-weight: 600;
}

.colorShade span {
  display: table;
}

.colorShade span:nth-child(2) {
  font-size: 13px;
}

.brandColor {
  width: 195px;
  font-size: 12px;
}

/* Primary */
.primary-50 {
  background-color: var(--color-primary-50);
}
.primary-100 {
  background-color: var(--color-primary-100);
}
.primary-200 {
  background-color: var(--color-primary-200);
}
.primary-300 {
  background-color: var(--color-primary-300);
}
.primary-400 {
  background-color: var(--color-primary-400);
}
.primary-500 {
  background-color: var(--color-primary-500);
}
.primary-600 {
  background-color: var(--color-primary-600);
}
.primary-700 {
  background-color: var(--color-primary-700);
}
.primary-800 {
  background-color: var(--color-primary-800);
}
.primary-900 {
  background-color: var(--color-primary-900);
}

/* Secondary */
.secondary-50 {
  background-color: var(--color-secondary-50);
}
.secondary-100 {
  background-color: var(--color-secondary-100);
}
.secondary-200 {
  background-color: var(--color-secondary-200);
}
.secondary-300 {
  background-color: var(--color-secondary-300);
}
.secondary-400 {
  background-color: var(--color-secondary-400);
}
.secondary-500 {
  background-color: var(--color-secondary-500);
}
.secondary-600 {
  background-color: var(--color-secondary-600);
}
.secondary-700 {
  background-color: var(--color-secondary-700);
}
.secondary-800 {
  background-color: var(--color-secondary-800);
}
.secondary-900 {
  background-color: var(--color-secondary-900);
}

/* Tertiary */
.tertiary-50 {
  background-color: var(--color-tertiary-50);
}
.tertiary-100 {
  background-color: var(--color-tertiary-100);
}
.tertiary-200 {
  background-color: var(--color-tertiary-200);
}
.tertiary-300 {
  background-color: var(--color-tertiary-300);
}
.tertiary-400 {
  background-color: var(--color-tertiary-400);
}
.tertiary-500 {
  background-color: var(--color-tertiary-500);
}
.tertiary-600 {
  background-color: var(--color-tertiary-600);
}
.tertiary-700 {
  background-color: var(--color-tertiary-700);
}
.tertiary-800 {
  background-color: var(--color-tertiary-800);
}
.tertiary-900 {
  background-color: var(--color-tertiary-900);
}

/* Highlight 1 */
.warning-50 {
  background-color: var(--color-warning-50);
}
.warning-100 {
  background-color: var(--color-warning-100);
}
.warning-200 {
  background-color: var(--color-warning-200);
}
.warning-300 {
  background-color: var(--color-warning-300);
}
.warning-400 {
  background-color: var(--color-warning-400);
}
.warning-500 {
  background-color: var(--color-warning-500);
}
.warning-600 {
  background-color: var(--color-warning-600);
}
.warning-700 {
  background-color: var(--color-warning-700);
}
.warning-800 {
  background-color: var(--color-warning-800);
}
.warning-900 {
  background-color: var(--color-warning-900);
}

/* Highlight 2 */
.highlight-50 {
  background-color: var(--color-highlight-50);
}
.highlight-100 {
  background-color: var(--color-highlight-100);
}
.highlight-200 {
  background-color: var(--color-highlight-200);
}
.highlight-300 {
  background-color: var(--color-highlight-300);
}
.highlight-400 {
  background-color: var(--color-highlight-400);
}
.highlight-500 {
  background-color: var(--color-highlight-500);
}
.highlight-600 {
  background-color: var(--color-highlight-600);
}
.highlight-700 {
  background-color: var(--color-highlight-700);
}
.highlight-800 {
  background-color: var(--color-highlight-800);
}
.highlight-900 {
  background-color: var(--color-highlight-900);
}

/* Success */
.success-50 {
  background-color: var(--color-success-50);
}
.success-100 {
  background-color: var(--color-success-100);
}
.success-200 {
  background-color: var(--color-success-200);
}
.success-300 {
  background-color: var(--color-success-300);
}
.success-400 {
  background-color: var(--color-success-400);
}
.success-500 {
  background-color: var(--color-success-500);
}
.success-600 {
  background-color: var(--color-success-600);
}
.success-700 {
  background-color: var(--color-success-700);
}
.success-800 {
  background-color: var(--color-success-800);
}
.success-900 {
  background-color: var(--color-success-900);
}

/* Error */
.error-50 {
  background-color: var(--color-error-50);
}
.error-100 {
  background-color: var(--color-error-100);
}
.error-200 {
  background-color: var(--color-error-200);
}
.error-300 {
  background-color: var(--color-error-300);
}
.error-400 {
  background-color: var(--color-error-400);
}
.error-500 {
  background-color: var(--color-error-500);
}
.error-600 {
  background-color: var(--color-error-600);
}
.error-700 {
  background-color: var(--color-error-700);
}
.error-800 {
  background-color: var(--color-error-800);
}
.error-900 {
  background-color: var(--color-error-900);
}

/* Neutral */
.neutral-50 {
  background-color: var(--color-neutral-50);
}
.neutral-100 {
  background-color: var(--color-neutral-100);
}
.neutral-200 {
  background-color: var(--color-neutral-200);
}
.neutral-300 {
  background-color: var(--color-neutral-300);
}
.neutral-400 {
  background-color: var(--color-neutral-400);
}
.neutral-500 {
  background-color: var(--color-neutral-500);
}
.neutral-600 {
  background-color: var(--color-neutral-600);
}
.neutral-700 {
  background-color: var(--color-neutral-700);
}
.neutral-800 {
  background-color: var(--color-neutral-800);
}
.neutral-900 {
  background-color: var(--color-neutral-900);
}

/* Brand colors */
.heycar-mint {
  background-color: var(--color-heycar-mint);
}

.mica-blue {
  background-color: var(--color-mica-blue);
}

.sunbeam-blue {
  background-color: var(--color-sunbeam-blue);
}

.championship-white {
  background-color: var(--color-championship-white);
}

/* Whatsapp */

.whatsapp-500 {
  background-color: var(--color-whatsapp-500);
}
.whatsapp-600 {
  background-color: var(--color-whatsapp-600);
}
.whatsapp-700 {
  background-color: var(--color-whatsapp-700);
}

.shadowWrapper {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.xs {
  box-shadow: var(--shadow-xs);
}

.s {
  box-shadow: var(--shadow-s);
}
.m {
  box-shadow: var(--shadow-m);
}
.xl {
  box-shadow: var(--shadow-xl);
}
.xxl {
  box-shadow: var(--shadow-xxl);
}
.none {
  box-shadow: none !important;
}

.shadow {
  height: 195px;
  width: 100%;
  background: var(--color-championship-white);
  border: 1px solid #e6e6e6;
}

.nameShadow {
  padding: 30px;
  font-size: 16px;
  font-weight: bold;
}