_feature-callout-theme.scss (7683B)
1 // This Source Code Form is subject to the terms of the Mozilla Public 2 // License, v. 2.0. If a copy of the MPL was not distributed with this 3 // file, You can obtain one at http://mozilla.org/MPL/2.0/. 4 5 // stylelint-disable color-hex-length, color-hex-case -- we want to preserve 6 // these values exactly, since they're drawn from other parts of the browser. 7 8 @mixin light-theme { 9 --fc-background: var(--fc-background-light, #FFF); 10 --fc-color: var(--fc-color-light, rgb(21, 20, 26)); 11 --fc-border: var(--fc-border-light, #CFCFD8); 12 --fc-accent-color: var(--fc-accent-color-light, rgb(0, 97, 224)); 13 --fc-button-background: var(--fc-button-background-light, #F0F0F4); 14 --fc-button-color: var(--fc-button-color-light, rgb(21, 20, 26)); 15 --fc-button-border: var(--fc-button-border-light, transparent); 16 --fc-button-background-hover: var(--fc-button-background-hover-light, #E0E0E6); 17 --fc-button-color-hover: var(--fc-button-color-hover-light, rgb(21, 20, 26)); 18 --fc-button-border-hover: var(--fc-button-border-hover-light, transparent); 19 --fc-button-background-active: var(--fc-button-background-active-light, #CFCFD8); 20 --fc-button-color-active: var(--fc-button-color-active-light, rgb(21, 20, 26)); 21 --fc-button-border-active: var(--fc-button-border-active-light, transparent); 22 --fc-primary-button-background: var(--fc-primary-button-background-light, #0061E0); 23 --fc-primary-button-color: var(--fc-primary-button-color-light, rgb(251,251,254)); 24 --fc-primary-button-border: var(--fc-primary-button-border-light, transparent); 25 --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-light, #0250BB); 26 --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-light, rgb(251,251,254)); 27 --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-light, transparent); 28 --fc-primary-button-background-active: var(--fc-primary-button-background-active-light, #053E94); 29 --fc-primary-button-color-active: var(--fc-primary-button-color-active-light, rgb(251,251,254)); 30 --fc-primary-button-border-active: var(--fc-primary-button-border-active-light, transparent); 31 --fc-step-color: color-mix(in srgb, currentColor 50%, transparent); 32 --fc-link-color: var(--fc-link-color-light, #0061E0); 33 --fc-link-color-hover: var(--fc-link-color-hover-light, #0250BB); 34 --fc-link-color-active: var(--fc-link-color-active-light, #053E94); 35 --fc-icon-success-color: var(--fc-icon-success-color-light, #2AC3A2); 36 --fc-dismiss-button-background: var(--fc-dismiss-button-background-light, #FFF); 37 --fc-dismiss-button-background-hover: var(--fc-dismiss-button-background-hover-light, color-mix(in srgb, currentColor 14%, #FFF)); 38 --fc-dismiss-button-background-active: var(--fc-dismiss-button-background-active-light, color-mix(in srgb, currentColor 14%, #FFF)); 39 } 40 41 @mixin dark-theme { 42 --fc-background: var(--fc-background-dark, rgb(43, 42, 51)); 43 --fc-color: var(--fc-color-dark, rgb(251, 251, 254)); 44 --fc-border: var(--fc-border-dark, #3A3944); 45 --fc-accent-color: var(--fc-accent-color-dark, rgb(0, 221, 255)); 46 --fc-button-background: var(--fc-button-background-dark, #2B2A33); 47 --fc-button-color: var(--fc-button-color-dark, rgb(251, 251, 254)); 48 --fc-button-border: var(--fc-button-border-dark, transparent); 49 --fc-button-background-hover: var(--fc-button-background-hover-dark, #52525E); 50 --fc-button-color-hover: var(--fc-button-color-hover-dark, rgb(251, 251, 254)); 51 --fc-button-border-hover: var(--fc-button-border-hover-dark, transparent); 52 --fc-button-background-active: var(--fc-button-background-active-dark, #5B5B66); 53 --fc-button-color-active: var(--fc-button-color-active-dark, rgb(251, 251, 254)); 54 --fc-button-border-active: var(--fc-button-border-active-dark, transparent); 55 --fc-primary-button-background: var(--fc-primary-button-background-dark, rgb(0,221,255)); 56 --fc-primary-button-color: var(--fc-primary-button-color-dark, rgb(43,42,51)); 57 --fc-primary-button-border: var(--fc-primary-button-border-dark, transparent); 58 --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-dark, rgb(128,235,255)); 59 --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-dark, rgb(43,42,51)); 60 --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-dark, transparent); 61 --fc-primary-button-background-active: var(--fc-primary-button-background-active-dark, rgb(170,242,255)); 62 --fc-primary-button-color-active: var(--fc-primary-button-color-active-dark, rgb(43,42,51)); 63 --fc-primary-button-border-active: var(--fc-primary-button-border-active-dark, transparent); 64 --fc-link-color: var(--fc-link-color-dark, #00DDFF); 65 --fc-link-color-hover: var(--fc-link-color-hover-dark, #80EBFF); 66 --fc-link-color-active: var(--fc-link-color-hover-active, #AAF2FF); 67 --fc-icon-success-color: var(--fc-icon-success-color-dark, #54FFBD); 68 --fc-dismiss-button-background: var(--fc-dismiss-button-background-dark, rgb(66, 65, 77)); 69 --fc-dismiss-button-background-hover: var(--fc-dismiss-button-background-hover-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77))); 70 --fc-dismiss-button-background-active: var(--fc-dismiss-button-background-active-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77))); 71 72 } 73 74 @mixin hcm-theme { 75 --fc-background: var(--fc-background-hcm, -moz-dialog); 76 --fc-color: var(--fc-color-hcm, -moz-dialogtext); 77 --fc-border: var(--fc-border-hcm, -moz-dialogtext); 78 --fc-accent-color: var(--fc-accent-color-hcm, LinkText); 79 --fc-button-background: var(--fc-button-background-hcm, ButtonFace); 80 --fc-button-color: var(--fc-button-color-hcm, ButtonText); 81 --fc-button-border: var(--fc-button-border-hcm, ButtonText); 82 --fc-button-background-hover: var(--fc-button-background-hover-hcm, ButtonText); 83 --fc-button-color-hover: var(--fc-button-color-hover-hcm, ButtonFace); 84 --fc-button-border-hover: var(--fc-button-border-hover-hcm, ButtonText); 85 --fc-button-background-active: var(--fc-button-background-active-hcm, ButtonText); 86 --fc-button-color-active: var(--fc-button-color-active-hcm, ButtonFace); 87 --fc-button-border-active: var(--fc-button-border-active-hcm, ButtonText); 88 --fc-primary-button-background: var(--fc-primary-button-background-hcm, ButtonText); 89 --fc-primary-button-color: var(--fc-primary-button-color-hcm, ButtonFace); 90 --fc-primary-button-border: var(--fc-primary-button-border-hcm, ButtonFace); 91 --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-hcm, SelectedItem); 92 --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-hcm, SelectedItemText); 93 --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-hcm, SelectedItemText); 94 --fc-primary-button-background-active: var(--fc-primary-button-background-active-hcm, SelectedItemText); 95 --fc-primary-button-color-active: var(--fc-primary-button-color-active-hcm, SelectedItem); 96 --fc-primary-button-border-active: var(--fc-primary-button-border-active-hcm, SelectedItem); 97 --fc-step-color: var(--fc-accent-color-hcm, LinkText); 98 --fc-link-color: var(--fc-link-color-hcm, LinkText); 99 --fc-link-color-hover: var(--fc-link-color-hover-hcm, LinkText); 100 --fc-link-color-active: var(--fc-link-color-active-hcm, ActiveText); 101 --fc-icon-success-color: var(--fc-icon-success-color-hcm, LinkText); 102 --fc-dismiss-button-background: var(--fc-dismiss-button-background-hcm, -moz-dialog); 103 --fc-dismiss-button-background-hover: var(--fc-dismiss-button-background-hover-hcm, color-mix(in srgb, currentColor 14%, SelectedItem)); 104 --fc-dismiss-button-background-active: var(--fc-dismiss-button-background-active-hcm, color-mix(in srgb, currentColor 14%, SelectedItem)); 105 }