AlchemyCMS/alchemy_cms

:root {
  /* Sizes */
  --spacing-0: 2px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;

  /* Icons */
  --icon-size-xs: 0.75rem;
  --icon-size-sm: 0.875rem;
  --icon-size-1x: 1rem;
  --icon-size-md: 1.3rem;
  --icon-size-xl: 1.5rem;
  --icon-size-xxl: 1.6rem;

  /* Font Families */
  --font-mono: Menlo, Monaco, "Bitstream Vera Sans Mono", "Lucida Console",
    Terminal, monospace;
  --font-sans: "Open Sans", "Lucida Grande", "Lucida Sans Unicode",
    "Lucida Sans", Verdana, Tahoma, sans-serif;

  /* Font Size - at the moment only in Pixel, because the base font size is 12px */
  --font-size_small: 10px; /* 0.875rem */
  --font-size_medium: 12px; /* 1rem */
  --font-size_large: 16px; /* 1.25 rem */

  --font-weigth_normal: 500;
  --font-weigth_bold: 700;

  /* border-radius */
  --border-radius_medium: 3px;

  /* Colors */
  --color-blue_very_light: hsl(203deg, 32%, 97%);
  --color-blue_light: hsl(203deg, 32%, 85%);
  --color-blue_medium: hsl(212deg, 52%, 36%);
  --color-blue_dark: hsl(212deg, 52%, 26%);

  --color-green_very_light: hsl(88deg, 47%, 88%);
  --color-green_light: hsl(127deg, 25%, 69%);
  --color-green_medium: hsl(127deg, 25%, 48%);
  --color-green_dark: hsl(128deg, 32%, 26%);

  --color-yellow_light: hsl(60deg, 81%, 92%);
  --color-yellow_medium: hsl(56deg, 68%, 85%);
  --color-yellow_dark: hsl(56deg, 53%, 29%);

  --color-orange_medium: hsl(42deg, 100%, 74%);
  --color-orange_dark: hsl(28deg, 77%, 68%);
  --color-orange_very_dark: hsl(28deg, 77%, 48%);

  --color-red_very_light: hsl(0deg, 47%, 88%);
  --color-red_light: hsl(0deg, 25%, 69%);
  --color-red_medium: hsl(0deg, 51%, 42%);
  --color-red_dark: hsl(0deg, 51%, 25%);

  --color-grey_very_light: hsl(0deg, 0%, 97%);
  --color-grey_light: hsl(0deg, 0%, 94%);
  --color-grey_medium: hsl(0deg, 0%, 78%);
  --color-grey_dark: hsl(0deg, 0%, 40%);
  --color-grey_very_dark: hsl(0deg, 0%, 20%);

  --color-white: hsl(0deg, 0%, 100%);

  --color-text: hsla(224deg, 23%, 26%, 0.8);
  --color-text_muted: hsla(224deg, 23%, 26%, 0.5);
  --color-icon: hsla(224deg, 23%, 26%, 0.75);
}

.alchemy-light {
  --outline-color: var(--color-orange_dark);

  --font-color_failed: var(--color-red_medium);
  --font-color_default: var(--color-text);

  --tabs_indicator-color: var(--color-orange_dark);
  --tabs_track-color: var(--color-grey_light);
  --sl-input-label-color: var(--color-text);

  --file-upload_background-color: hsla(0deg, 0%, 80%, 0.8);
  --file-upload_single-upload-background-color: var(--color-grey_light);
  --file-upload_progress-track-color: var(--color-blue_very_light);
  --file-upload_progress-indicator-color: var(--color-blue_dark);

  --file-upload_progress-indicator-color-canceled: hsla(0deg, 0%, 60%, 0.8);
  --file-upload_progress-indicator-color-failed: var(--color-red_medium);
  --file-upload_progress-indicator-color-invalid: var(--color-red_medium);
  --file-upload_progress-indicator-color-successful: var(--color-green_medium);
  --file-upload_progress-indicator-color-upload-finished: var(
    --color-blue_dark
  );
}