@betokyo/ui-components/ui/assets/styles/theme.css

As part of a school project, the BeTokyo UI components library allows us to reuse components in each of our web apps.

:host {
  --color-pending: #FCD64F;
  --color-accepted: #82C784;
  --color-cancelled: #A22A44;
  --color-proposed: #F79F4D;
  --color-declined: #E6E6E6;
  --color-ended: #B2CCD6;
  --color-text: #FFFFFF;
  --color-base: #000000;
  --color-available: #2ECC71;
  --color-disabled: #D2D2D2;

  --color-primary: #1D2C54;
  --color-primary-80: rgba(29, 44, 84, 0.8);
  --color-primary-50: rgba(29, 44, 84, 0.5);
  --color-primary-20: rgba(29, 44, 84, 0.2);

  --color-secondary: #D9D9D9;
  --color-secondary-80: rgba(217, 217, 217, 0.8);
  --color-secondary-50: rgba(217, 217, 217, 0.5);
  --color-secondary-20: rgba(217, 217, 217, 0.2);

  --color-danger: #A22A44;
  --color-danger-80: rgba(162, 42, 68, 0.8);
  --color-danger-50: rgba(162, 42, 68, 0.5);
  --color-danger-20: rgba(162, 42, 68, 0.2);

  --color-light: #D9D9D9;
  --color-light-80: rgba(217, 217, 217, 0.8);
  --color-light-50: rgba(217, 217, 217, 0.5);
  --color-light-20: rgba(217, 217, 217, 0.2);

  --color-dark: #000000;
  --color-dark-80: rgba(0, 0, 0, 0.8);
  --color-dark-50: rgba(0, 0, 0, 0.5);
  --color-dark-20: rgba(0, 0, 0, 0.2);

  /* standar sizes and types */  
  --max-width: 315px;
  --margin-v: 10px;
  --padding-h: 20px;
  --padding-v: 15px;
  --padding: 10px;
  --small-padding: 5px;
  --border-radius: 5px;
  --border-width: 1px;
  --border-style: solid;

  /* media threshold */
  --large-mobile: 414px;
  --mobile-w: 480px;
  --tablet-w: 768px;
  --laptop-w: 1024px;   
} 

h1 {
  font-family: 'DM Sans', sans-serif;
  font-size: 2em;
  margin: 5px 0;
}

h2 {
  font-family: "Dhyana", sans-serif;
  font-size: 1.4em;
  margin: 5px 0;
}

h3 {
  font-family: "Dhyana", sans-serif;
  font-size: 1.2em;
  margin: 5px 0;
}

.element-title {
  font-family: "Doppio One", sans-serif;
  font-size: 16px;
  font-weight: bold;
  line-height: 140%;
}

.description-text {
  font-family: "Dhyana", sans-serif;
  font-size: 24px;
  line-height: 140%;
}

.card-text {
  font-family: "Dhyana", sans-serif;
  font-size: 16px;
  line-height: 140%;
}

html,
body,
div,
p,
span,
button,
link {
  color: var(--color-dark-80);
  font-family: "Dhyana", sans-serif;
}