-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: enabled users to force light/dark mode (#1776)
* refactor: enabled users to force light/dark mode * refactor: removed color-scheme class
- Loading branch information
Showing
3 changed files
with
246 additions
and
228 deletions.
There are no files selected for viewing
229 changes: 229 additions & 0 deletions
229
packages/foundations/scss/colors/_default-color-scheme.scss
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,229 @@ | ||
| @mixin get-color-scheme-light { | ||
| --db-base-on-enabled: #fff; | ||
| --db-base-origin-enabled: #242629; | ||
| --db-base-origin-hover: #212326; | ||
| --db-base-origin-pressed: #1e1f22; | ||
| --db-base-text-enabled: #242629; | ||
| --db-base-text-hover: #6b6c6d; | ||
| --db-base-text-pressed: #939494; | ||
| --db-base-on-bg-enabled: #242629; | ||
| --db-base-on-bg-hover: #12131540; | ||
| --db-base-on-bg-pressed: #191b1d80; | ||
| --db-base-on-bg-weak-enabled: #12131540; | ||
| --db-base-bg-enabled: #fff; | ||
| --db-base-bg-strong-enabled: #fafafa; | ||
| --db-base-element-enabled: #777e88; | ||
| --db-base-border-enabled: #5f656da3; | ||
| --db-base-border-weak-enabled: #43474d52; | ||
| --db-neutral-on-enabled: #fff; | ||
| --db-neutral-origin-enabled: #646973; | ||
| --db-neutral-origin-hover: #5c6069; | ||
| --db-neutral-origin-pressed: #52575f; | ||
| --db-neutral-text-enabled: #646973; | ||
| --db-neutral-text-hover: #898c93; | ||
| --db-neutral-text-pressed: #a6a8ad; | ||
| --db-neutral-on-bg-enabled: #3c3f45; | ||
| --db-neutral-on-bg-hover: #1e202340; | ||
| --db-neutral-on-bg-pressed: #2a2d3180; | ||
| --db-neutral-on-bg-weak-enabled: #1e202340; | ||
| --db-neutral-bg-enabled: #f6f6f7; | ||
| --db-neutral-bg-strong-enabled: #f1f1f2; | ||
| --db-neutral-element-enabled: #777d88; | ||
| --db-neutral-border-enabled: #5f646da3; | ||
| --db-neutral-border-weak-enabled: #43474d52; | ||
| --db-brand-on-enabled: #fff; | ||
| --db-brand-origin-enabled: #ec0016; | ||
| --db-brand-origin-hover: #d80014; | ||
| --db-brand-origin-pressed: #c30012; | ||
| --db-brand-text-enabled: #e80014; | ||
| --db-brand-text-hover: #ec6668; | ||
| --db-brand-text-pressed: #f09091; | ||
| --db-brand-on-bg-enabled: #8b000c; | ||
| --db-brand-on-bg-hover: #46000640; | ||
| --db-brand-on-bg-pressed: #62000880; | ||
| --db-brand-on-bg-weak-enabled: #46000640; | ||
| --db-brand-bg-enabled: #fdf5f5; | ||
| --db-brand-bg-strong-enabled: #f8f0f0; | ||
| --db-brand-element-enabled: #ff0016; | ||
| --db-brand-border-enabled: #cc0012a3; | ||
| --db-brand-border-weak-enabled: #90000c52; | ||
| --db-informational-on-enabled: #fff; | ||
| --db-informational-origin-enabled: #309fd1; | ||
| --db-informational-origin-hover: #2c92c0; | ||
| --db-informational-origin-pressed: #2883ac; | ||
| --db-informational-text-enabled: #007caa; | ||
| --db-informational-text-hover: #6699ba; | ||
| --db-informational-text-pressed: #90b1c9; | ||
| --db-informational-on-bg-enabled: #004a66; | ||
| --db-informational-on-bg-hover: #00253340; | ||
| --db-informational-on-bg-pressed: #00344880; | ||
| --db-informational-on-bg-weak-enabled: #00253340; | ||
| --db-informational-bg-enabled: #f5f7f9; | ||
| --db-informational-bg-strong-enabled: #f0f2f4; | ||
| --db-informational-element-enabled: #0099d1; | ||
| --db-informational-border-enabled: #007aa7a3; | ||
| --db-informational-border-weak-enabled: #00577652; | ||
| --db-warning-on-enabled: #fff; | ||
| --db-warning-origin-enabled: #f39200; | ||
| --db-warning-origin-hover: #df8600; | ||
| --db-warning-origin-pressed: #c87800; | ||
| --db-warning-text-enabled: #af5c00; | ||
| --db-warning-text-hover: #be8466; | ||
| --db-warning-text-pressed: #cca390; | ||
| --db-warning-on-bg-enabled: #693700; | ||
| --db-warning-on-bg-hover: #351c0040; | ||
| --db-warning-on-bg-pressed: #4a270080; | ||
| --db-warning-on-bg-weak-enabled: #351c0040; | ||
| --db-warning-bg-enabled: #faf6f5; | ||
| --db-warning-bg-strong-enabled: #f5f1f0; | ||
| --db-warning-element-enabled: #db7300; | ||
| --db-warning-border-enabled: #af5c00a3; | ||
| --db-warning-border-weak-enabled: #7c410052; | ||
| --db-successful-on-enabled: #fff; | ||
| --db-successful-origin-enabled: #63a615; | ||
| --db-successful-origin-hover: #5b9813; | ||
| --db-successful-origin-pressed: #528911; | ||
| --db-successful-text-enabled: #398200; | ||
| --db-successful-text-hover: #739d66; | ||
| --db-successful-text-pressed: #98b490; | ||
| --db-successful-on-bg-enabled: #224e00; | ||
| --db-successful-on-bg-hover: #11270040; | ||
| --db-successful-on-bg-pressed: #18370080; | ||
| --db-successful-on-bg-weak-enabled: #11270040; | ||
| --db-successful-bg-enabled: #f5f7f5; | ||
| --db-successful-bg-strong-enabled: #f0f2f0; | ||
| --db-successful-element-enabled: #48a300; | ||
| --db-successful-border-enabled: #3a8200a3; | ||
| --db-successful-border-weak-enabled: #295c0052; | ||
| --db-critical-on-enabled: #fff; | ||
| --db-critical-origin-enabled: #ec0016; | ||
| --db-critical-origin-hover: #d80014; | ||
| --db-critical-origin-pressed: #c30012; | ||
| --db-critical-text-enabled: #e80014; | ||
| --db-critical-text-hover: #ec6668; | ||
| --db-critical-text-pressed: #f09091; | ||
| --db-critical-on-bg-enabled: #8b000c; | ||
| --db-critical-on-bg-hover: #46000640; | ||
| --db-critical-on-bg-pressed: #62000880; | ||
| --db-critical-on-bg-weak-enabled: #46000640; | ||
| --db-critical-bg-enabled: #fdf5f5; | ||
| --db-critical-bg-strong-enabled: #f8f0f0; | ||
| --db-critical-element-enabled: #ff0016; | ||
| --db-critical-border-enabled: #cc0012a3; | ||
| --db-critical-border-weak-enabled: #90000c52; | ||
| } | ||
|
|
||
| @mixin get-color-scheme-dark { | ||
| --db-base-on-enabled: #000000bf; | ||
| --db-base-origin-enabled: #fff; | ||
| --db-base-origin-hover: #fff; | ||
| --db-base-origin-pressed: #fff; | ||
| --db-base-text-enabled: #fff; | ||
| --db-base-text-hover: #eaeaea; | ||
| --db-base-text-pressed: #d2d2d2; | ||
| --db-base-on-bg-enabled: #fff; | ||
| --db-base-on-bg-hover: #80808040; | ||
| --db-base-on-bg-pressed: #b4b4b480; | ||
| --db-base-on-bg-weak-enabled: #80808040; | ||
| --db-base-bg-enabled: #242629; | ||
| --db-base-bg-strong-enabled: #3e3f41; | ||
| --db-base-element-enabled: #8a8a8a; | ||
| --db-base-border-enabled: #787878bf; | ||
| --db-base-border-weak-enabled: #62626280; | ||
| --db-neutral-on-enabled: #000000bf; | ||
| --db-neutral-origin-enabled: #646973; | ||
| --db-neutral-origin-hover: #898c93; | ||
| --db-neutral-origin-pressed: #a6a8ad; | ||
| --db-neutral-text-enabled: #acb1bb; | ||
| --db-neutral-text-hover: #9ea2ab; | ||
| --db-neutral-text-pressed: #8e929a; | ||
| --db-neutral-on-bg-enabled: #e5e6e9; | ||
| --db-neutral-on-bg-hover: #73737540; | ||
| --db-neutral-on-bg-pressed: #a2a3a580; | ||
| --db-neutral-on-bg-weak-enabled: #73737540; | ||
| --db-neutral-bg-enabled: #313235; | ||
| --db-neutral-bg-strong-enabled: #464749; | ||
| --db-neutral-element-enabled: #848b9a; | ||
| --db-neutral-border-enabled: #727885bf; | ||
| --db-neutral-border-weak-enabled: #5d626d80; | ||
| --db-brand-on-enabled: #fff; | ||
| --db-brand-origin-enabled: #ec0016; | ||
| --db-brand-origin-hover: #ef6668; | ||
| --db-brand-origin-pressed: #f29091; | ||
| --db-brand-text-enabled: #ff8c70; | ||
| --db-brand-text-hover: #ea8067; | ||
| --db-brand-text-pressed: #d2735c; | ||
| --db-brand-on-bg-enabled: #ffddd7; | ||
| --db-brand-on-bg-hover: #806f6c40; | ||
| --db-brand-on-bg-pressed: #b49c9880; | ||
| --db-brand-on-bg-weak-enabled: #806f6c40; | ||
| --db-brand-bg-enabled: #482820; | ||
| --db-brand-bg-strong-enabled: #57403c; | ||
| --db-brand-element-enabled: #ff4214; | ||
| --db-brand-border-enabled: #dd3911bf; | ||
| --db-brand-border-weak-enabled: #b42f0e80; | ||
| --db-informational-on-enabled: #000000bf; | ||
| --db-informational-origin-enabled: #309fd1; | ||
| --db-informational-origin-hover: #6fb2d9; | ||
| --db-informational-origin-pressed: #96c3e1; | ||
| --db-informational-text-enabled: #50b3ea; | ||
| --db-informational-text-hover: #49a4d6; | ||
| --db-informational-text-pressed: #4294c1; | ||
| --db-informational-on-bg-enabled: #d2e7f8; | ||
| --db-informational-on-bg-hover: #69747c40; | ||
| --db-informational-on-bg-pressed: #94a3af80; | ||
| --db-informational-on-bg-weak-enabled: #69747c40; | ||
| --db-informational-bg-enabled: #173342; | ||
| --db-informational-bg-strong-enabled: #384752; | ||
| --db-informational-element-enabled: #1a93d6; | ||
| --db-informational-border-enabled: #177fb9bf; | ||
| --db-informational-border-weak-enabled: #12689780; | ||
| --db-warning-on-enabled: #000000bf; | ||
| --db-warning-origin-enabled: #f39200; | ||
| --db-warning-origin-hover: #f5a866; | ||
| --db-warning-origin-pressed: #f7bc90; | ||
| --db-warning-text-enabled: #f59303; | ||
| --db-warning-text-hover: #e18703; | ||
| --db-warning-text-pressed: #ca7902; | ||
| --db-warning-on-bg-enabled: #fbdecc; | ||
| --db-warning-on-bg-hover: #7e6f6640; | ||
| --db-warning-on-bg-pressed: #b19d9080; | ||
| --db-warning-on-bg-weak-enabled: #7e6f6640; | ||
| --db-warning-bg-enabled: #452a01; | ||
| --db-warning-bg-strong-enabled: #554233; | ||
| --db-warning-element-enabled: #fc9703; | ||
| --db-warning-border-enabled: #da8303bf; | ||
| --db-warning-border-weak-enabled: #b26b0280; | ||
| --db-successful-on-enabled: #000000bf; | ||
| --db-successful-origin-enabled: #63a615; | ||
| --db-successful-origin-hover: #89b768; | ||
| --db-successful-origin-pressed: #a6c791; | ||
| --db-successful-text-enabled: #81bf35; | ||
| --db-successful-text-hover: #76af31; | ||
| --db-successful-text-pressed: #6a9e2c; | ||
| --db-successful-on-bg-enabled: #daeace; | ||
| --db-successful-on-bg-hover: #6d756740; | ||
| --db-successful-on-bg-pressed: #9aa59280; | ||
| --db-successful-on-bg-weak-enabled: #6d756740; | ||
| --db-successful-bg-enabled: #24360f; | ||
| --db-successful-bg-strong-enabled: #3e4935; | ||
| --db-successful-element-enabled: #87c837; | ||
| --db-successful-border-enabled: #75ad30bf; | ||
| --db-successful-border-weak-enabled: #5f8d2780; | ||
| --db-critical-on-enabled: #000000bf; | ||
| --db-critical-origin-enabled: #ec0016; | ||
| --db-critical-origin-hover: #ef6668; | ||
| --db-critical-origin-pressed: #f29091; | ||
| --db-critical-text-enabled: #ff8c70; | ||
| --db-critical-text-hover: #ea8067; | ||
| --db-critical-text-pressed: #d2735c; | ||
| --db-critical-on-bg-enabled: #ffddd7; | ||
| --db-critical-on-bg-hover: #806f6c40; | ||
| --db-critical-on-bg-pressed: #b49c9880; | ||
| --db-critical-on-bg-weak-enabled: #806f6c40; | ||
| --db-critical-bg-enabled: #482820; | ||
| --db-critical-bg-strong-enabled: #57403c; | ||
| --db-critical-element-enabled: #ff4214; | ||
| --db-critical-border-enabled: #dd3911bf; | ||
| --db-critical-border-weak-enabled: #b42f0e80; | ||
| } |
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,9 @@ | ||
| @use "./default-color-scheme"; | ||
|
|
||
| [data-color-scheme="light"] { | ||
| @include default-color-scheme.get-color-scheme-light; | ||
| } | ||
|
|
||
| [data-color-scheme="dark"] { | ||
| @include default-color-scheme.get-color-scheme-dark; | ||
| } |
Oops, something went wrong.