| /* Common colors via CSS Variables. |
| Assumes use of infra-sk/modules/theme-chooser-sk. |
| |
| Can be imported via: |
| |
| @import '../colors'; |
| */ |
| @import '~elements-sk/themes/themes'; |
| |
| :root { |
| --primary: var(--blue-grey-600); |
| --on-primary: var(--white); |
| --primary-variant: rgb(204, 204, 255); |
| --on-primary-variant: var(--black); |
| --link-color: hsl(199, 70%, 40%); |
| |
| --color-canceled: rgb(117, 112, 179); |
| --color-failure: rgb(217, 95, 2); |
| --color-in-progress: rgb(248, 230, 180); |
| --color-mishap: rgb(117, 112, 179); |
| --color-success: rgb(209, 228, 188); |
| } |
| .darkmode { |
| --grey-850: #303030; |
| --primary: var(--blue-grey-600); |
| --on-primary: var(--white); |
| --primary-variant: rgb(204, 204, 255); |
| --on-primary-variant: var(--black); |
| --background: var(--grey-900); |
| --on-background: var(--grey-300); |
| --surface: var(--grey-850); |
| --on-surface: var(--grey-200); |
| --error: var(--amber-900); |
| --link-color: hsl(199, 70%, 40%); |
| } |
| |
| a, |
| a.visited { |
| color: var(--link-color); |
| } |
| |
| .darkmode input { |
| background-color: var(--surface-2dp); |
| color: var(--on-surface); |
| } |
| |
| :disabled { |
| opacity: var(--text-intensity-medium); |
| } |
| |
| /* Background and foreground colors. */ |
| .bg-canceled { |
| background-color: var(--color-canceled); |
| fill: var(--color-canceled); |
| } |
| .bg-failure { |
| background-color: var(--color-failure); |
| fill: var(--color-failure); |
| } |
| .bg-in-progress { |
| background-color: var(--color-in-progress); |
| fill: var(--color-in-progress); |
| /* It's hard to see white on yellow, so invert the color. */ |
| color: black; |
| } |
| .bg-mishap { |
| background-color: var(--color-mishap); |
| fill: var(--color-mishap); |
| } |
| .bg-success { |
| background-color: var(--color-success); |
| fill: var(--color-success); |
| } |
| |
| .fg-canceled { |
| color: var(--color-canceled); |
| fill: var(--color-canceled); |
| } |
| .fg-failure { |
| color: var(--color-failure); |
| fill: var(--color-failure); |
| } |
| .fg-in-progress { |
| color: var(--color-in-progress); |
| fill: var(--color-in-progress); |
| } |
| .fg-mishap { |
| color: var(--color-mishap); |
| fill: var(--color-mishap); |
| } |
| .fg-success { |
| color: var(--color-success); |
| fill: var(--color-success); |
| } |