global.css

:root {
  --background: #FFFFFF;
  --background-rgb: 255, 255, 255;
  --background-alt: #F6F6F6;
  --background-alt-2: #FFF;
  --background-alt-rgb: 246, 246, 246;
  --background-block: #FFFFFF;
  --background-page: #F6F6F6;
  --background-hover: #E1E4FF;
  --background-hover-rgb: 240, 255, 240;
  --background-tag:  #EEE;
  --background-tag-button: #F9F9F9; 
  --background-selectable: #E1E4FF;
  --background-selectable-selectable: #CFD1FF;
  --background-selected: #CFD1FF;
  --background-disabled: #DDD;
  --border: #DBDBDB;
  --border-rgb: 219, 219, 219;
  --border-alt: #DBDBDB;
  --border-hover: #B5B5B5;
  --box-shadow: #DDD;
  --box-shadow-button: #DDD;
  --placeholder: #7A7A7A;
  --text: #7A7A7A;
  --text-alt: #888;
  --text-strong: #333;
  --poster-color: #000;
  --green: #00B242;
  --purple: #CFD1FF; 
}

.dark {
  --background: #36393F;
  --background-rgb: 54, 57, 63;
  --background-alt: #46494F;
  --background-alt-2: #46494F;
  --background-alt-rgb: 70, 73, 79;
  --background-block: #46494F;
  --background-hover: #5E6169;
  --background-hover-rgb: 94, 97, 105;
  --background-page: #36393F;
  --background-tag:  #36393F; 
  --background-tag-button: #4E5159; 
  --background-selectable: #7E80CA;
  --background-selectable-selectable: #878B97;
  --background-selected: #5E60BA;
  --background-disabled: #25282E;
  --border: #25282E;
  --border-rgb: 37, 40, 46;
  --border-alt: #666666;
  --border-hover: #B5B5B5;
  --box-shadow: #2226;
  --box-shadow-button: #111;
  --placeholder: #999;
  --text: #EEEEEE;
  --text-alt: #EEEEEE;
  --text-strong: #FEFEFE;
  --purple: #5E60BA; 
}

body {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
}


.dark {
  /** Styles for Storybook dark mode **/
  p,
  li,
  h2,
  h1 {
    color: var(--text);
  }
  .sbdocs {
    color: var(--text);
  }

  .sb-show-main {
    background: var(--background);
  }
  .css-l1e2yg,
  .docs-story {
    background: var(--background);
  }
  .css-k7lbue {
    color: var(--text);
    background: var(--background);
  }
  .css-11knh3z {
    color: var(--text);
  }
  .docblock-source.sb-unstyled {
    background: var(--background-alt);
    color: var(--text);
  }
}

/* Layout */

.flexrow {
  align-items: center;
  display: flex;
}

/* Widgets */


/* Style shared by fields */
.label {
  color: var(--text);
  font-size: .7em;
  font-weight: bold;
  letter-spacing: 1px;
  margin-bottom: 12px;
  margin-left: 2px;
  text-transform: uppercase;
}


/* Style shared by comboboxes */
.combobox {
  background: var(--background-alt-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  display: inline-block;
  margin: 1px 0 0;
  max-width: 400px;
  padding: .5em;
  position: relative;
  vertical-align: middle;
}

.select select {
  border-radius: 10px;
}

.select select:hover,
.select select:active,
.select select:focus,
input.input:focus {
  border-color: var(--green);
  transition: border-color .2s ease-in-out;
  outline: none;
}

.select-input {
  -webkit-appearance: none; /* Remove default arrow in Chrome & Safari */
  appearance: none;
  height: 3em;
  padding-left: 10px;
  padding-right: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='rgb(0,178,68)'><path d='M3.646 6.646a.5.5 0 0 1 .708 0L8 10.293l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708z'/></svg>");

  background-repeat: no-repeat;
  background-position: right 5px center;
}

.select-input.thin {
  height: 2.1em;
}

.c-mask {
  background-color: #000;
  height: 0;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 0;
  z-index: 204;
}

.c-mask.is-active {
  height: 100%;
  width: 100%;
}

/* Style shared by tables */

table.data-table {
  tbody {
    td {
      border: 1px solid var(--border);
      padding: 0.5em 0.5em;
    }
  }
}