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

Design tokens for Canonical's Launchpad

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

@media (prefers-color-scheme: light) {
  :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);
  }
}


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

@media (prefers-color-scheme: dark) {
  :root {
    --lp-color-brand-default: #e95420;
    --lp-color-brand-hover: #da4816;
    --lp-color-brand-active: #cc4414;
    --lp-color-positive: #62a36c;
    --lp-color-negative: #d17b85;
    --lp-color-information: #5ea6ed;
    --lp-color-caution: #c48831;
    --lp-color-text-default: #ffffff;
    --lp-color-text-muted: rgba(255, 255, 255, 0.6);
    --lp-color-text-inactive: rgba(255, 255, 255, 0.75);
    --lp-color-text-reversed: #000000;
    --lp-color-text-white: #ffffff;
    --lp-color-text-link-default: #6699cc;
    --lp-color-text-link-visited: #a679d2;
    --lp-color-background-default: #262626;
    --lp-color-background-hover: #313131;
    --lp-color-background-active: #373737;
    --lp-color-background-alt: #202020;
    --lp-color-background-alt-reversed: #f7f7f7;
    --lp-color-background-brand-default: rgba(233, 84, 32, 0.2);
    --lp-color-background-brand-hover: rgba(233, 84, 32, 0.3);
    --lp-color-background-brand-active: rgba(233, 84, 32, 0.36);
    --lp-color-background-neutral-default: rgba(255, 255, 255, 0.15);
    --lp-color-background-neutral-hover: rgba(255, 255, 255, 0.2);
    --lp-color-background-neutral-active: rgba(255, 255, 255, 0.25);
    --lp-color-background-positive-default: rgba(10, 189, 37, 0.2);
    --lp-color-background-positive-hover: rgba(0, 199, 30, 0.3);
    --lp-color-background-positive-active: rgba(0, 199, 30, 0.36);
    --lp-color-background-negative-default: rgba(255, 102, 120, 0.2);
    --lp-color-background-negative-hover: rgba(255, 102, 120, 0.3);
    --lp-color-background-negative-active: rgba(255, 102, 120, 0.36);
    --lp-color-background-information-default: rgba(0, 137, 255, 0.2);
    --lp-color-background-information-hover: rgba(0, 137, 255, 0.3);
    --lp-color-background-information-active: rgba(0, 137, 255, 0.36);
    --lp-color-background-caution-default: rgba(255, 115, 0, 0.2);
    --lp-color-background-caution-hover: rgba(255, 143, 51, 0.3);
    --lp-color-background-caution-active: rgba(255, 115, 0, 0.36);
    --lp-color-background-input: #2f2f2f;
    --lp-color-background-overlay: rgba(17, 17, 17, 0.85);
    --lp-color-border-default: rgba(255, 255, 255, 0.2);
    --lp-color-border-highlight: #ffffff;
    --lp-color-border-focus: #99ccff;
    --lp-color-border-high-contrast: #939393;
    --lp-color-border-low-contrast: rgba(255, 255, 255, 0.1);
    --lp-color-border-neutral: #a6a6a6;
    --lp-color-icon-status-shade-1: #f7f7f7;
    --lp-color-icon-status-shade-2: #d9d9d9;
    --lp-color-icon-status-queued: #808080;
    --lp-color-fill-positive-default: #008013;
    --lp-color-fill-positive-hover: #00670f;
    --lp-color-fill-positive-active: #00570d;
    --lp-color-fill-negative-default: #a11223;
    --lp-color-fill-negative-hover: #8a0f1e;
    --lp-color-fill-negative-active: #7c0e1b;
    --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);
  }
}


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

.light {
  --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);
}


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

.dark {
  --lp-color-brand-default: #e95420;
  --lp-color-brand-hover: #da4816;
  --lp-color-brand-active: #cc4414;
  --lp-color-positive: #62a36c;
  --lp-color-negative: #d17b85;
  --lp-color-information: #5ea6ed;
  --lp-color-caution: #c48831;
  --lp-color-text-default: #ffffff;
  --lp-color-text-muted: rgba(255, 255, 255, 0.6);
  --lp-color-text-inactive: rgba(255, 255, 255, 0.75);
  --lp-color-text-reversed: #000000;
  --lp-color-text-white: #ffffff;
  --lp-color-text-link-default: #6699cc;
  --lp-color-text-link-visited: #a679d2;
  --lp-color-background-default: #262626;
  --lp-color-background-hover: #313131;
  --lp-color-background-active: #373737;
  --lp-color-background-alt: #202020;
  --lp-color-background-alt-reversed: #f7f7f7;
  --lp-color-background-brand-default: rgba(233, 84, 32, 0.2);
  --lp-color-background-brand-hover: rgba(233, 84, 32, 0.3);
  --lp-color-background-brand-active: rgba(233, 84, 32, 0.36);
  --lp-color-background-neutral-default: rgba(255, 255, 255, 0.15);
  --lp-color-background-neutral-hover: rgba(255, 255, 255, 0.2);
  --lp-color-background-neutral-active: rgba(255, 255, 255, 0.25);
  --lp-color-background-positive-default: rgba(10, 189, 37, 0.2);
  --lp-color-background-positive-hover: rgba(0, 199, 30, 0.3);
  --lp-color-background-positive-active: rgba(0, 199, 30, 0.36);
  --lp-color-background-negative-default: rgba(255, 102, 120, 0.2);
  --lp-color-background-negative-hover: rgba(255, 102, 120, 0.3);
  --lp-color-background-negative-active: rgba(255, 102, 120, 0.36);
  --lp-color-background-information-default: rgba(0, 137, 255, 0.2);
  --lp-color-background-information-hover: rgba(0, 137, 255, 0.3);
  --lp-color-background-information-active: rgba(0, 137, 255, 0.36);
  --lp-color-background-caution-default: rgba(255, 115, 0, 0.2);
  --lp-color-background-caution-hover: rgba(255, 143, 51, 0.3);
  --lp-color-background-caution-active: rgba(255, 115, 0, 0.36);
  --lp-color-background-input: #2f2f2f;
  --lp-color-background-overlay: rgba(17, 17, 17, 0.85);
  --lp-color-border-default: rgba(255, 255, 255, 0.2);
  --lp-color-border-highlight: #ffffff;
  --lp-color-border-focus: #99ccff;
  --lp-color-border-high-contrast: #939393;
  --lp-color-border-low-contrast: rgba(255, 255, 255, 0.1);
  --lp-color-border-neutral: #a6a6a6;
  --lp-color-icon-status-shade-1: #f7f7f7;
  --lp-color-icon-status-shade-2: #d9d9d9;
  --lp-color-icon-status-queued: #808080;
  --lp-color-fill-positive-default: #008013;
  --lp-color-fill-positive-hover: #00670f;
  --lp-color-fill-positive-active: #00570d;
  --lp-color-fill-negative-default: #a11223;
  --lp-color-fill-negative-hover: #8a0f1e;
  --lp-color-fill-negative-active: #7c0e1b;
  --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);
}