@canonical/launchpad-design-tokens/dist/css/color/light.css

Design tokens for Canonical's Launchpad

/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --lp-color-brand-default: #e95420;
  --lp-color-brand-hover: #da4816;
  --lp-color-brand-active: #cc4414;
  --lp-color-positive: #0e8420;
  --lp-color-negative: #c7162b;
  --lp-color-information: #24598f;
  --lp-color-caution: #cc7900;
  --lp-color-text-default: #000000;
  --lp-color-text-muted: rgba(0, 0, 0, 0.6);
  --lp-color-text-inactive: rgba(0, 0, 0, 0.75);
  --lp-color-text-reversed: #ffffff;
  --lp-color-text-white: #ffffff;
  --lp-color-text-link-default: #0066cc;
  --lp-color-text-link-visited: #7d42b8;
  --lp-color-background-default: #ffffff;
  --lp-color-background-hover: #f2f2f2;
  --lp-color-background-active: #ebebeb;
  --lp-color-background-alt: #f7f7f7;
  --lp-color-background-alt-reversed: #202020;
  --lp-color-background-brand-default: rgba(233, 84, 32, 0.1);
  --lp-color-background-brand-hover: rgba(233, 84, 32, 0.15);
  --lp-color-background-brand-active: rgba(233, 84, 32, 0.1);
  --lp-color-background-neutral-default: #f2f2f2;
  --lp-color-background-neutral-hover: #e5e5e5;
  --lp-color-background-neutral-active: #dedede;
  --lp-color-background-positive-default: rgba(10, 189, 37, 0.1);
  --lp-color-background-positive-hover: rgba(0, 199, 30, 0.15);
  --lp-color-background-positive-active: rgba(0, 199, 30, 0.18);
  --lp-color-background-negative-default: rgba(199, 0, 20, 0.1);
  --lp-color-background-negative-hover: rgba(199, 0, 20, 0.15);
  --lp-color-background-negative-active: rgba(199, 0, 20, 0.18);
  --lp-color-background-information-default: rgba(0, 99, 199, 0.1);
  --lp-color-background-information-hover: rgba(0, 99, 199, 0.15);
  --lp-color-background-information-active: rgba(0, 99, 199, 0.18);
  --lp-color-background-caution-default: rgba(199, 90, 0, 0.1);
  --lp-color-background-caution-hover: rgba(199, 90, 0, 0.15);
  --lp-color-background-caution-active: rgba(199, 90, 0, 0.18);
  --lp-color-background-input: #f5f5f5;
  --lp-color-background-overlay: rgba(17, 17, 17, 0.85);
  --lp-color-border-default: rgba(0, 0, 0, 0.2);
  --lp-color-border-highlight: #000000;
  --lp-color-border-focus: #2e96ff;
  --lp-color-border-high-contrast: #707070;
  --lp-color-border-low-contrast: rgba(0, 0, 0, 0.1);
  --lp-color-border-neutral: rgba(0, 0, 0, 0.56);
  --lp-color-icon-status-shade-1: #f7f7f7;
  --lp-color-icon-status-shade-2: #d9d9d9;
  --lp-color-icon-status-queued: #808080;
  --lp-color-fill-positive-hover: #0c6d1a;
  --lp-color-fill-positive-active: #0a5f17;
  --lp-color-fill-negative-hover: #b01326;
  --lp-color-fill-negative-active: #a21223;
  --lp-color-status-default: #666666;
  --lp-color-status-positive: #0e8420;
  --lp-color-status-negative: #c7162b;
  --lp-color-status-information: #24598f;
  --lp-color-status-caution: #cc7900;
  --lp-color-border-positive: var(--lp-color-positive);
  --lp-color-border-negative: var(--lp-color-negative);
  --lp-color-border-information: var(--lp-color-information);
  --lp-color-border-caution: var(--lp-color-caution);
  --lp-color-icon-default: var(--lp-color-text-default);
  --lp-color-icon-muted: var(--lp-color-text-muted);
  --lp-color-icon-positive: var(--lp-color-positive);
  --lp-color-icon-negative: var(--lp-color-negative);
  --lp-color-icon-information: var(--lp-color-information);
  --lp-color-icon-caution: var(--lp-color-caution);
  --lp-color-icon-link: var(--lp-color-text-link-default);
  --lp-color-fill-positive-default: var(--lp-color-positive);
  --lp-color-fill-negative-default: var(--lp-color-negative);
}