@itwin/itwinui-variables/os.css

CSS variables for the iTwinUI design system

@media (prefers-color-scheme: dark) {
  :where([data-iui-theme]) {
    --iui-opacity-1: 1;
    --iui-opacity-2: 0.85;
    --iui-opacity-3: 0.65;
    --iui-opacity-4: 0.45;
    --iui-opacity-5: 0.25;
    --iui-opacity-6: 0.1;
    --iui-color-background: #333c41;
    --iui-color-background-zebra: #374046;
    --iui-color-background-hover: #3a444a;
    --iui-color-background-backdrop: #242b2e;
    --iui-color-background-backdrop-hover: #2c3338;
    --iui-color-background-disabled: #1d2225;
    --iui-color-background-accent: var(--iui-color-background-informational);
    --iui-color-background-accent-hover: var(
      --iui-color-background-informational-hover
    );
    --iui-color-background-accent-muted: var(
      --iui-color-background-informational-muted
    );
    --iui-color-background-informational: #0071b8;
    --iui-color-background-informational-hover: #008ee0;
    --iui-color-background-informational-muted: #384652;
    --iui-color-background-positive: #157e11;
    --iui-color-background-positive-hover: #1e991a;
    --iui-color-background-positive-muted: #3a4b46;
    --iui-color-background-warning: #8f6400;
    --iui-color-background-warning-hover: #b88400;
    --iui-color-background-warning-muted: #46453f;
    --iui-color-background-negative: #c52b26;
    --iui-color-background-negative-hover: #e94f44;
    --iui-color-background-negative-muted: #464347;
    --iui-color-background-transparent-hover: hsla(0, 0%, 100%, 0.065);
    --iui-color-border-subtle: #49555d;
    --iui-color-border: #58666f;
    --iui-color-border-foreground: #707070;
    --iui-color-border-foreground-hover: #949494;
    --iui-color-border-disabled: #5e5e5e;
    --iui-color-border-accent: var(--iui-color-border-informational);
    --iui-color-border-informational: #94befa;
    --iui-color-border-positive: #94d293;
    --iui-color-border-warning: #faaa75;
    --iui-color-border-negative: #f9a9a9;
    --iui-color-icon: #c9c9c9;
    --iui-color-icon-hover: #dbdbdb;
    --iui-color-icon-muted: #949494;
    --iui-color-icon-muted-hover: #a6a6a6;
    --iui-color-icon-disabled: #707070;
    --iui-color-icon-disabled-hover: #949494;
    --iui-color-icon-accent: var(--iui-color-icon-informational);
    --iui-color-icon-informational: #7bb4f9;
    --iui-color-icon-positive: #82d080;
    --iui-color-icon-warning: #f59e56;
    --iui-color-icon-negative: #f89696;
    --iui-color-text: #dbdbdb;
    --iui-color-text-hover: #ededed;
    --iui-color-text-muted: #b8b8b8;
    --iui-color-text-placeholder: #a6a6a6;
    --iui-color-text-disabled: #828282;
    --iui-color-text-disabled-hover: #a6a6a6;
    --iui-color-text-accent: var(--iui-color-text-informational);
    --iui-color-text-accent-hover: var(--iui-color-text-informational-hover);
    --iui-color-text-informational: #94befa;
    --iui-color-text-informational-hover: #bcd4fb;
    --iui-color-text-positive: #94d293;
    --iui-color-text-positive-hover: #d2efd2;
    --iui-color-text-warning: #faaa75;
    --iui-color-text-warning-hover: #fbc9ac;
    --iui-color-text-negative: #f9a9a9;
    --iui-color-text-negative-hover: #fbc6c6;
    --iui-color-background-hsl: 203deg 12% 22.75%;
    --iui-color-foreground-hsl: 0deg 0% 93%;
    --iui-color-accent-hsl: var(--iui-color-informational-hsl);
    --iui-color-informational-hsl: 213deg 91% 73%;
    --iui-color-positive-hsl: 119deg 46% 66%;
    --iui-color-warning-hsl: 27deg 89% 65%;
    --iui-color-negative-hsl: 0deg 87% 78%;
    --iui-shadow-color: hsl(0 0% 0%/var(--iui-opacity-4));
  }
}
@media (prefers-color-scheme: light) and (prefers-contrast: more) {
  :where([data-iui-theme]) {
    --iui-opacity-1: 1;
    --iui-opacity-2: 0.8;
    --iui-opacity-3: 0.6;
    --iui-opacity-4: 0.4;
    --iui-opacity-5: 0.2;
    --iui-opacity-6: 0.1;
    --iui-color-background: white;
    --iui-color-background-zebra: #fafafa;
    --iui-color-background-hover: #f4f5f5;
    --iui-color-background-backdrop: #eaebec;
    --iui-color-background-backdrop-hover: #dfe1e2;
    --iui-color-background-disabled: #d4d7d8;
    --iui-color-background-accent: var(--iui-color-background-informational);
    --iui-color-background-accent-hover: var(
      --iui-color-background-informational-hover
    );
    --iui-color-background-accent-muted: var(
      --iui-color-background-informational-muted
    );
    --iui-color-background-informational: #00568f;
    --iui-color-background-informational-hover: #003c66;
    --iui-color-background-informational-muted: #e5eff5;
    --iui-color-background-positive: #0d610a;
    --iui-color-background-positive-hover: #074205;
    --iui-color-background-positive-muted: #e7f0e6;
    --iui-color-background-warning: #6b4b00;
    --iui-color-background-warning-hover: #4d3400;
    --iui-color-background-warning-muted: #f3eee7;
    --iui-color-background-negative: #9e0008;
    --iui-color-background-negative-hover: #700004;
    --iui-color-background-negative-muted: #ffebeb;
    --iui-color-background-transparent-hover: hsla(0, 0%, 0%, 0.08);
    --iui-color-border-subtle: #b4b8bb;
    --iui-color-border: #9fa4a8;
    --iui-color-border-foreground: #7a7a7a;
    --iui-color-border-foreground-hover: #5c5c5c;
    --iui-color-border-disabled: #8a8a8a;
    --iui-color-border-accent: var(--iui-color-border-informational);
    --iui-color-border-informational: #004f80;
    --iui-color-border-positive: #0d560b;
    --iui-color-border-warning: #583304;
    --iui-color-border-negative: #9c0707;
    --iui-color-icon: #2e2e2e;
    --iui-color-icon-hover: #1f1f1f;
    --iui-color-icon-muted: #5c5c5c;
    --iui-color-icon-muted-hover: #4d4d4d;
    --iui-color-icon-disabled: #737373;
    --iui-color-icon-disabled-hover: #4d4d4d;
    --iui-color-icon-accent: var(--iui-color-icon-informational);
    --iui-color-icon-informational: #00619e;
    --iui-color-icon-positive: #116c0e;
    --iui-color-icon-warning: #754306;
    --iui-color-icon-negative: #bf0808;
    --iui-color-text: #1f1f1f;
    --iui-color-text-hover: #0f0f0f;
    --iui-color-text-muted: #4d4d4d;
    --iui-color-text-disabled: #737373;
    --iui-color-text-disabled-hover: #3d3d3d;
    --iui-color-text-accent: var(--iui-color-text-informational);
    --iui-color-text-accent-hover: var(--iui-color-text-informational-hover);
    --iui-color-text-informational: #004f80;
    --iui-color-text-informational-hover: #002c47;
    --iui-color-text-positive: #0d560b;
    --iui-color-text-positive-hover: #083206;
    --iui-color-text-warning: #583304;
    --iui-color-text-warning-hover: #2c1902;
    --iui-color-text-negative: #9c0707;
    --iui-color-text-negative-hover: #580404;
    --iui-color-background-hsl: 203deg 5% 100%;
    --iui-color-foreground-hsl: 0deg 0% 6%;
    --iui-color-accent-hsl: var(--iui-color-informational-hsl);
    --iui-color-informational-hsl: 203deg 100% 31%;
    --iui-color-positive-hsl: 118deg 77% 24%;
    --iui-color-warning-hsl: 33deg 91% 24%;
    --iui-color-negative-hsl: 0deg 92% 39%;
  }
}
@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
  :where([data-iui-theme]) {
    --iui-opacity-1: 1;
    --iui-opacity-2: 0.85;
    --iui-opacity-3: 0.65;
    --iui-opacity-4: 0.45;
    --iui-opacity-5: 0.25;
    --iui-opacity-6: 0.1;
    --iui-color-background: #333739;
    --iui-color-background-zebra: #383c3f;
    --iui-color-background-hover: #3d4245;
    --iui-color-background-backdrop: #1f2122;
    --iui-color-background-backdrop-hover: #292c2e;
    --iui-color-background-disabled: #141617;
    --iui-color-background-accent: var(--iui-color-background-informational);
    --iui-color-background-accent-hover: var(
      --iui-color-background-informational-hover
    );
    --iui-color-background-accent-muted: var(
      --iui-color-background-informational-muted
    );
    --iui-color-background-informational: #00568f;
    --iui-color-background-informational-hover: #0071b8;
    --iui-color-background-informational-muted: #3c4449;
    --iui-color-background-positive: #0d610a;
    --iui-color-background-positive-hover: #157e11;
    --iui-color-background-positive-muted: #3c4441;
    --iui-color-background-warning: #6b4b00;
    --iui-color-background-warning-hover: #8f6400;
    --iui-color-background-warning-muted: #434342;
    --iui-color-background-negative: #9e0008;
    --iui-color-background-negative-hover: #c52b26;
    --iui-color-background-negative-muted: #484244;
    --iui-color-background-transparent-hover: hsla(0, 0%, 100%, 0.085);
    --iui-color-border-subtle: #5c6367;
    --iui-color-border: #666e73;
    --iui-color-border-foreground: #999999;
    --iui-color-border-foreground-hover: #b3b3b3;
    --iui-color-border-disabled: #8c8c8c;
    --iui-color-border-accent: var(--iui-color-border-informational);
    --iui-color-border-informational: #c3deee;
    --iui-color-border-positive: #c8e1c7;
    --iui-color-border-warning: #e8d8c4;
    --iui-color-border-negative: #f9d2d2;
    --iui-color-icon: #d9d9d9;
    --iui-color-icon-hover: #e6e6e6;
    --iui-color-icon-muted: #bfbfbf;
    --iui-color-icon-muted-hover: #cccccc;
    --iui-color-icon-disabled: #8c8c8c;
    --iui-color-icon-disabled-hover: #999999;
    --iui-color-icon-accent: var(--iui-color-icon-informational);
    --iui-color-icon-informational: #90c1e0;
    --iui-color-icon-positive: #96c695;
    --iui-color-icon-warning: #d5b690;
    --iui-color-icon-negative: #f2a6a6;
    --iui-color-text: #e6e6e6;
    --iui-color-text-hover: #f2f2f2;
    --iui-color-text-muted: #cccccc;
    --iui-color-text-disabled: #8c8c8c;
    --iui-color-text-disabled-hover: #a6a6a6;
    --iui-color-text-accent: var(--iui-color-text-informational);
    --iui-color-text-accent-hover: var(--iui-color-text-informational-hover);
    --iui-color-text-informational: #c3deee;
    --iui-color-text-informational-hover: #ebf4f9;
    --iui-color-text-positive: #c8e1c7;
    --iui-color-text-positive-hover: #ecf4ec;
    --iui-color-text-warning: #e8d8c4;
    --iui-color-text-warning-hover: #f7f0e9;
    --iui-color-text-negative: #f9d2d2;
    --iui-color-text-negative-hover: #fdeded;
    --iui-color-background-hsl: 203deg 6% 21.25%;
    --iui-color-foreground-hsl: 0deg 0% 95%;
    --iui-color-accent-hsl: var(--iui-color-informational-hsl);
    --iui-color-informational-hsl: 203deg 56% 72%;
    --iui-color-positive-hsl: 119deg 30% 68%;
    --iui-color-warning-hsl: 33deg 45% 70%;
    --iui-color-negative-hsl: 0deg 75% 80%;
  }
}