-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add second set of tokens for prefers theme mode (#3)
- Loading branch information
1 parent
857d319
commit 11eabed
Showing
5 changed files
with
573 additions
and
289 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,283 @@ | ||
| html[data-theme="dark"] { | ||
| --ds-divider: var(--ds-neutral-700); | ||
| --ds-focus-visible: var(--ds-common-white); | ||
| --ds-background-body: var(--ds-neutral-900); | ||
| --ds-background-level1: var(--ds-neutral-800); | ||
| --ds-background-level2: var(--ds-neutral-700); | ||
| --ds-background-level3: var(--ds-neutral-600); | ||
| --ds-background-surface: var(--ds-neutral-900); | ||
| --ds-background-tooltip: var(--ds-neutral-0); | ||
| --ds-cyan-main: var(--ds-cyan-400); | ||
| --ds-failure-main: var(--ds-failure-400); | ||
| --ds-failure-outlined-active-bg: var(--ds-failure-500); | ||
| --ds-failure-outlined-border: var(--ds-failure-600); | ||
| --ds-failure-outlined-color: var(--ds-common-white); | ||
| --ds-failure-outlined-disabled-border: var(--ds-neutral-800); | ||
| --ds-failure-outlined-disabled-color: var(--ds-neutral-600); | ||
| --ds-failure-outlined-hover-bg: var(--ds-failure-900); | ||
| --ds-failure-outlined-hover-border: var(--ds-failure-500); | ||
| --ds-failure-plain-active-bg: var(--ds-failure-700); | ||
| --ds-failure-plain-color: var(--ds-failure-300); | ||
| --ds-failure-plain-disabled-color: var(--ds-failure-800); | ||
| --ds-failure-plain-hover-bg: var(--ds-failure-800); | ||
| --ds-failure-soft-active-bg: var(--ds-failure-600); | ||
| --ds-failure-soft-bg: var(--ds-failure-900); | ||
| --ds-failure-soft-color: var(--ds-failure-200); | ||
| --ds-failure-soft-disabled-bg: var(--ds-failure-600); | ||
| --ds-failure-soft-disabled-color: var(--ds-failure-800); | ||
| --ds-failure-soft-hover-bg: var(--ds-failure-700); | ||
| --ds-failure-solid-active-bg: var(--ds-failure-800); | ||
| --ds-failure-solid-bg: var(--ds-failure-600); | ||
| --ds-failure-solid-color: var(--ds-common-white); | ||
| --ds-failure-solid-disabled-bg: var(--ds-neutral-600); | ||
| --ds-failure-solid-disabled-color: var(--ds-neutral-800); | ||
| --ds-failure-solid-hover-bg: var(--ds-failure-700); | ||
| --ds-magenta-main: var(--ds-magenta-400); | ||
| --ds-neutral-main: var(--ds-common-white); | ||
| --ds-neutral-outlined-active-bg: var(--ds-neutral-500); | ||
| --ds-neutral-outlined-border: var(--ds-neutral-600); | ||
| --ds-neutral-outlined-color: var(--ds-common-white); | ||
| --ds-neutral-outlined-disabled-border: var(--ds-neutral-800); | ||
| --ds-neutral-outlined-disabled-color: var(--ds-neutral-600); | ||
| --ds-neutral-outlined-hover-bg: var(--ds-neutral-800); | ||
| --ds-neutral-outlined-hover-border: var(--ds-neutral-500); | ||
| --ds-neutral-plain-active-bg: var(--ds-neutral-700); | ||
| --ds-neutral-plain-color: var(--ds-common-white); | ||
| --ds-neutral-plain-disabled-color: var(--ds-neutral-800); | ||
| --ds-neutral-plain-hover-bg: var(--ds-neutral-800); | ||
| --ds-neutral-soft-active-bg: var(--ds-neutral-600); | ||
| --ds-neutral-soft-bg: var(--ds-neutral-800); | ||
| --ds-neutral-soft-color: var(--ds-common-white); | ||
| --ds-neutral-soft-disabled-bg: var(--ds-neutral-600); | ||
| --ds-neutral-soft-disabled-color: var(--ds-neutral-800); | ||
| --ds-neutral-soft-hover-bg: var(--ds-neutral-700); | ||
| --ds-neutral-solid-active-bg: var(--ds-neutral-100); | ||
| --ds-neutral-solid-bg: var(--ds-common-white); | ||
| --ds-neutral-solid-color: var(--ds-neutral-900); | ||
| --ds-neutral-solid-disabled-bg: var(--ds-neutral-600); | ||
| --ds-neutral-solid-disabled-color: var(--ds-neutral-800); | ||
| --ds-neutral-solid-hover-bg: var(--ds-neutral-0); | ||
| --ds-orange-main: var(--ds-orange-400); | ||
| --ds-primary-main: var(--ds-primary-400); | ||
| --ds-primary-outlined-active-bg: var(--ds-primary-500); | ||
| --ds-primary-outlined-border: var(--ds-primary-600); | ||
| --ds-primary-outlined-color: var(--ds-common-white); | ||
| --ds-primary-outlined-disabled-border: var(--ds-neutral-800); | ||
| --ds-primary-outlined-disabled-color: var(--ds-neutral-600); | ||
| --ds-primary-outlined-hover-bg: var(--ds-primary-900); | ||
| --ds-primary-outlined-hover-border: var(--ds-primary-500); | ||
| --ds-primary-plain-active-bg: var(--ds-primary-700); | ||
| --ds-primary-plain-color: var(--ds-primary-300); | ||
| --ds-primary-plain-disabled-color: var(--ds-primary-800); | ||
| --ds-primary-plain-hover-bg: var(--ds-primary-800); | ||
| --ds-primary-soft-active-bg: var(--ds-primary-600); | ||
| --ds-primary-soft-bg: var(--ds-primary-900); | ||
| --ds-primary-soft-color: var(--ds-primary-200); | ||
| --ds-primary-soft-disabled-bg: var(--ds-primary-600); | ||
| --ds-primary-soft-disabled-color: var(--ds-primary-800); | ||
| --ds-primary-soft-hover-bg: var(--ds-primary-700); | ||
| --ds-primary-solid-active-bg: var(--ds-primary-800); | ||
| --ds-primary-solid-bg: var(--ds-primary-600); | ||
| --ds-primary-solid-color: var(--ds-common-white); | ||
| --ds-primary-solid-disabled-bg: var(--ds-neutral-600); | ||
| --ds-primary-solid-disabled-color: var(--ds-neutral-800); | ||
| --ds-primary-solid-hover-bg: var(--ds-primary-700); | ||
| --ds-success-main: var(--ds-success-400); | ||
| --ds-success-outlined-active-bg: var(--ds-success-500); | ||
| --ds-success-outlined-border: var(--ds-success-600); | ||
| --ds-success-outlined-color: var(--ds-common-white); | ||
| --ds-success-outlined-disabled-border: var(--ds-neutral-800); | ||
| --ds-success-outlined-disabled-color: var(--ds-neutral-600); | ||
| --ds-success-outlined-hover-bg: var(--ds-success-900); | ||
| --ds-success-outlined-hover-border: var(--ds-success-500); | ||
| --ds-success-plain-active-bg: var(--ds-success-700); | ||
| --ds-success-plain-color: var(--ds-success-300); | ||
| --ds-success-plain-disabled-color: var(--ds-success-800); | ||
| --ds-success-plain-hover-bg: var(--ds-success-800); | ||
| --ds-success-soft-active-bg: var(--ds-success-600); | ||
| --ds-success-soft-bg: var(--ds-success-900); | ||
| --ds-success-soft-color: var(--ds-success-200); | ||
| --ds-success-soft-disabled-bg: var(--ds-success-600); | ||
| --ds-success-soft-disabled-color: var(--ds-success-800); | ||
| --ds-success-soft-hover-bg: var(--ds-success-700); | ||
| --ds-success-solid-active-bg: var(--ds-success-800); | ||
| --ds-success-solid-bg: var(--ds-success-600); | ||
| --ds-success-solid-color: var(--ds-common-white); | ||
| --ds-success-solid-disabled-bg: var(--ds-neutral-600); | ||
| --ds-success-solid-disabled-color: var(--ds-neutral-800); | ||
| --ds-success-solid-hover-bg: var(--ds-success-700); | ||
| --ds-teal-main: var(--ds-teal-400); | ||
| --ds-text-disabled: var(--ds-neutral-800); | ||
| --ds-text-inverse: var(--ds-neutral-900); | ||
| --ds-text-placeholder: var(--ds-neutral-700); | ||
| --ds-text-primary: var(--ds-common-white); | ||
| --ds-text-secondary: var(--ds-neutral-300); | ||
| --ds-text-tertiary: var(--ds-neutral-500); | ||
| --ds-warning-main: var(--ds-warning-400); | ||
| --ds-warning-outlined-active-bg: var(--ds-warning-500); | ||
| --ds-warning-outlined-border: var(--ds-warning-600); | ||
| --ds-warning-outlined-color: var(--ds-common-white); | ||
| --ds-warning-outlined-disabled-border: var(--ds-neutral-800); | ||
| --ds-warning-outlined-disabled-color: var(--ds-neutral-600); | ||
| --ds-warning-outlined-hover-bg: var(--ds-warning-900); | ||
| --ds-warning-outlined-hover-border: var(--ds-warning-500); | ||
| --ds-warning-plain-active-bg: var(--ds-warning-700); | ||
| --ds-warning-plain-color: var(--ds-warning-300); | ||
| --ds-warning-plain-disabled-color: var(--ds-warning-800); | ||
| --ds-warning-plain-hover-bg: var(--ds-warning-800); | ||
| --ds-warning-soft-active-bg: var(--ds-warning-600); | ||
| --ds-warning-soft-bg: var(--ds-warning-900); | ||
| --ds-warning-soft-color: var(--ds-warning-200); | ||
| --ds-warning-soft-disabled-bg: var(--ds-warning-600); | ||
| --ds-warning-soft-disabled-color: var(--ds-warning-800); | ||
| --ds-warning-soft-hover-bg: var(--ds-warning-700); | ||
| --ds-warning-solid-active-bg: var(--ds-warning-800); | ||
| --ds-warning-solid-bg: var(--ds-warning-600); | ||
| --ds-warning-solid-color: var(--ds-common-white); | ||
| --ds-warning-solid-disabled-bg: var(--ds-neutral-600); | ||
| --ds-warning-solid-disabled-color: var(--ds-neutral-800); | ||
| --ds-warning-solid-hover-bg: var(--ds-warning-700); | ||
| } | ||
|
|
||
| @media (prefers-color-scheme: dark) { | ||
| :root:not([data-theme="light"]):not([data-theme="dark"]) { | ||
| --ds-divider: var(--ds-neutral-700); | ||
| --ds-focus-visible: var(--ds-common-white); | ||
| --ds-background-body: var(--ds-neutral-900); | ||
| --ds-background-level1: var(--ds-neutral-800); | ||
| --ds-background-level2: var(--ds-neutral-700); | ||
| --ds-background-level3: var(--ds-neutral-600); | ||
| --ds-background-surface: var(--ds-neutral-900); | ||
| --ds-background-tooltip: var(--ds-neutral-0); | ||
| --ds-cyan-main: var(--ds-cyan-400); | ||
| --ds-failure-main: var(--ds-failure-400); | ||
| --ds-failure-outlined-active-bg: var(--ds-failure-500); | ||
| --ds-failure-outlined-border: var(--ds-failure-600); | ||
| --ds-failure-outlined-color: var(--ds-common-white); | ||
| --ds-failure-outlined-disabled-border: var(--ds-neutral-800); | ||
| --ds-failure-outlined-disabled-color: var(--ds-neutral-600); | ||
| --ds-failure-outlined-hover-bg: var(--ds-failure-900); | ||
| --ds-failure-outlined-hover-border: var(--ds-failure-500); | ||
| --ds-failure-plain-active-bg: var(--ds-failure-700); | ||
| --ds-failure-plain-color: var(--ds-failure-300); | ||
| --ds-failure-plain-disabled-color: var(--ds-failure-800); | ||
| --ds-failure-plain-hover-bg: var(--ds-failure-800); | ||
| --ds-failure-soft-active-bg: var(--ds-failure-600); | ||
| --ds-failure-soft-bg: var(--ds-failure-900); | ||
| --ds-failure-soft-color: var(--ds-failure-200); | ||
| --ds-failure-soft-disabled-bg: var(--ds-failure-600); | ||
| --ds-failure-soft-disabled-color: var(--ds-failure-800); | ||
| --ds-failure-soft-hover-bg: var(--ds-failure-700); | ||
| --ds-failure-solid-active-bg: var(--ds-failure-800); | ||
| --ds-failure-solid-bg: var(--ds-failure-600); | ||
| --ds-failure-solid-color: var(--ds-common-white); | ||
| --ds-failure-solid-disabled-bg: var(--ds-neutral-600); | ||
| --ds-failure-solid-disabled-color: var(--ds-neutral-800); | ||
| --ds-failure-solid-hover-bg: var(--ds-failure-700); | ||
| --ds-magenta-main: var(--ds-magenta-400); | ||
| --ds-neutral-main: var(--ds-common-white); | ||
| --ds-neutral-outlined-active-bg: var(--ds-neutral-500); | ||
| --ds-neutral-outlined-border: var(--ds-neutral-600); | ||
| --ds-neutral-outlined-color: var(--ds-common-white); | ||
| --ds-neutral-outlined-disabled-border: var(--ds-neutral-800); | ||
| --ds-neutral-outlined-disabled-color: var(--ds-neutral-600); | ||
| --ds-neutral-outlined-hover-bg: var(--ds-neutral-800); | ||
| --ds-neutral-outlined-hover-border: var(--ds-neutral-500); | ||
| --ds-neutral-plain-active-bg: var(--ds-neutral-700); | ||
| --ds-neutral-plain-color: var(--ds-common-white); | ||
| --ds-neutral-plain-disabled-color: var(--ds-neutral-800); | ||
| --ds-neutral-plain-hover-bg: var(--ds-neutral-800); | ||
| --ds-neutral-soft-active-bg: var(--ds-neutral-600); | ||
| --ds-neutral-soft-bg: var(--ds-neutral-800); | ||
| --ds-neutral-soft-color: var(--ds-common-white); | ||
| --ds-neutral-soft-disabled-bg: var(--ds-neutral-600); | ||
| --ds-neutral-soft-disabled-color: var(--ds-neutral-800); | ||
| --ds-neutral-soft-hover-bg: var(--ds-neutral-700); | ||
| --ds-neutral-solid-active-bg: var(--ds-neutral-100); | ||
| --ds-neutral-solid-bg: var(--ds-common-white); | ||
| --ds-neutral-solid-color: var(--ds-neutral-900); | ||
| --ds-neutral-solid-disabled-bg: var(--ds-neutral-600); | ||
| --ds-neutral-solid-disabled-color: var(--ds-neutral-800); | ||
| --ds-neutral-solid-hover-bg: var(--ds-neutral-0); | ||
| --ds-orange-main: var(--ds-orange-400); | ||
| --ds-primary-main: var(--ds-primary-400); | ||
| --ds-primary-outlined-active-bg: var(--ds-primary-500); | ||
| --ds-primary-outlined-border: var(--ds-primary-600); | ||
| --ds-primary-outlined-color: var(--ds-common-white); | ||
| --ds-primary-outlined-disabled-border: var(--ds-neutral-800); | ||
| --ds-primary-outlined-disabled-color: var(--ds-neutral-600); | ||
| --ds-primary-outlined-hover-bg: var(--ds-primary-900); | ||
| --ds-primary-outlined-hover-border: var(--ds-primary-500); | ||
| --ds-primary-plain-active-bg: var(--ds-primary-700); | ||
| --ds-primary-plain-color: var(--ds-primary-300); | ||
| --ds-primary-plain-disabled-color: var(--ds-primary-800); | ||
| --ds-primary-plain-hover-bg: var(--ds-primary-800); | ||
| --ds-primary-soft-active-bg: var(--ds-primary-600); | ||
| --ds-primary-soft-bg: var(--ds-primary-900); | ||
| --ds-primary-soft-color: var(--ds-primary-200); | ||
| --ds-primary-soft-disabled-bg: var(--ds-primary-600); | ||
| --ds-primary-soft-disabled-color: var(--ds-primary-800); | ||
| --ds-primary-soft-hover-bg: var(--ds-primary-700); | ||
| --ds-primary-solid-active-bg: var(--ds-primary-800); | ||
| --ds-primary-solid-bg: var(--ds-primary-600); | ||
| --ds-primary-solid-color: var(--ds-common-white); | ||
| --ds-primary-solid-disabled-bg: var(--ds-neutral-600); | ||
| --ds-primary-solid-disabled-color: var(--ds-neutral-800); | ||
| --ds-primary-solid-hover-bg: var(--ds-primary-700); | ||
| --ds-success-main: var(--ds-success-400); | ||
| --ds-success-outlined-active-bg: var(--ds-success-500); | ||
| --ds-success-outlined-border: var(--ds-success-600); | ||
| --ds-success-outlined-color: var(--ds-common-white); | ||
| --ds-success-outlined-disabled-border: var(--ds-neutral-800); | ||
| --ds-success-outlined-disabled-color: var(--ds-neutral-600); | ||
| --ds-success-outlined-hover-bg: var(--ds-success-900); | ||
| --ds-success-outlined-hover-border: var(--ds-success-500); | ||
| --ds-success-plain-active-bg: var(--ds-success-700); | ||
| --ds-success-plain-color: var(--ds-success-300); | ||
| --ds-success-plain-disabled-color: var(--ds-success-800); | ||
| --ds-success-plain-hover-bg: var(--ds-success-800); | ||
| --ds-success-soft-active-bg: var(--ds-success-600); | ||
| --ds-success-soft-bg: var(--ds-success-900); | ||
| --ds-success-soft-color: var(--ds-success-200); | ||
| --ds-success-soft-disabled-bg: var(--ds-success-600); | ||
| --ds-success-soft-disabled-color: var(--ds-success-800); | ||
| --ds-success-soft-hover-bg: var(--ds-success-700); | ||
| --ds-success-solid-active-bg: var(--ds-success-800); | ||
| --ds-success-solid-bg: var(--ds-success-600); | ||
| --ds-success-solid-color: var(--ds-common-white); | ||
| --ds-success-solid-disabled-bg: var(--ds-neutral-600); | ||
| --ds-success-solid-disabled-color: var(--ds-neutral-800); | ||
| --ds-success-solid-hover-bg: var(--ds-success-700); | ||
| --ds-teal-main: var(--ds-teal-400); | ||
| --ds-text-disabled: var(--ds-neutral-800); | ||
| --ds-text-inverse: var(--ds-neutral-900); | ||
| --ds-text-placeholder: var(--ds-neutral-700); | ||
| --ds-text-primary: var(--ds-common-white); | ||
| --ds-text-secondary: var(--ds-neutral-300); | ||
| --ds-text-tertiary: var(--ds-neutral-500); | ||
| --ds-warning-main: var(--ds-warning-400); | ||
| --ds-warning-outlined-active-bg: var(--ds-warning-500); | ||
| --ds-warning-outlined-border: var(--ds-warning-600); | ||
| --ds-warning-outlined-color: var(--ds-common-white); | ||
| --ds-warning-outlined-disabled-border: var(--ds-neutral-800); | ||
| --ds-warning-outlined-disabled-color: var(--ds-neutral-600); | ||
| --ds-warning-outlined-hover-bg: var(--ds-warning-900); | ||
| --ds-warning-outlined-hover-border: var(--ds-warning-500); | ||
| --ds-warning-plain-active-bg: var(--ds-warning-700); | ||
| --ds-warning-plain-color: var(--ds-warning-300); | ||
| --ds-warning-plain-disabled-color: var(--ds-warning-800); | ||
| --ds-warning-plain-hover-bg: var(--ds-warning-800); | ||
| --ds-warning-soft-active-bg: var(--ds-warning-600); | ||
| --ds-warning-soft-bg: var(--ds-warning-900); | ||
| --ds-warning-soft-color: var(--ds-warning-200); | ||
| --ds-warning-soft-disabled-bg: var(--ds-warning-600); | ||
| --ds-warning-soft-disabled-color: var(--ds-warning-800); | ||
| --ds-warning-soft-hover-bg: var(--ds-warning-700); | ||
| --ds-warning-solid-active-bg: var(--ds-warning-800); | ||
| --ds-warning-solid-bg: var(--ds-warning-600); | ||
| --ds-warning-solid-color: var(--ds-common-white); | ||
| --ds-warning-solid-disabled-bg: var(--ds-neutral-600); | ||
| --ds-warning-solid-disabled-color: var(--ds-neutral-800); | ||
| --ds-warning-solid-hover-bg: var(--ds-warning-700); | ||
| } | ||
| } |
Oops, something went wrong.