_theme.scss (7599B)
1 @function textbox-shadow($color) { 2 @return 0 0 0 1px $color, 0 0 0 $textbox-shadow-size rgba($color, 0.3); 3 } 4 5 @mixin textbox-focus($color) { 6 --newtab-textbox-focus-boxshadow: #{textbox-shadow($color)}; 7 } 8 9 // scss variables related to the theme. 10 $inner-box-shadow: 0 0 0 1px var(--newtab-inner-box-shadow-color); 11 $input-error-boxshadow: #{textbox-shadow(var(--newtab-status-error))}; 12 $shadow-primary: 0 0 0 5px var(--newtab-element-secondary-color); 13 $shadow-secondary: 0 1px 4px 0 $grey-90-20; 14 $shadow-large: 0 2px 14px 0 $black-20; 15 $shadow-focus: 0 0 0 2px var(--newtab-primary-action-background-dimmed); 16 $shadow-card: 0 2px 6px rgba(0, 0, 0, 15%); 17 $shadow-image-inset: inset 0 0 0 0.5px $black-15; 18 19 // Default theme 20 :root { 21 color-scheme: light; 22 // General styles 23 --newtab-background-color: #{$in-content-page-background}; 24 --newtab-background-color-secondary: #{$newtab-background-secondary}; 25 --newtab-text-primary-color: var(--text-color); 26 // Card Background includes 20% transparency 27 --newtab-background-card: #{$newtab-background-card}; 28 --newtab-text-topic-label-color: var(--color-violet-70); 29 --newtab-text-secondary-text: var(--text-color-deemphasized); 30 // We need to be careful about the contrast of text over newtab wallpapers, which might not match the theme. 31 // --newtab-text-primary-color is set in contextTheme.js and reacts to possible installed addon themes. 32 // If we use that variable here, with light-dark, we can retain that addon theme text color, 33 // and also have a fallback in case the wallpaper contrast doesn't match. 34 --newtab-contextual-text-primary-color: light-dark(var(--newtab-text-primary-color), #{$in-content-page-color-dark}); 35 --newtab-primary-action-background: light-dark(#{$primary-blue}, #{$primary-blue-dark}); 36 // A button colour closer to the Pocket brand for usage in the Pocket section. 37 --newtab-primary-action-background-pocket: #008078; 38 --newtab-text-secondary-color: color-mix(in srgb, var(--newtab-text-primary-color) 70%, transparent); 39 --newtab-contextual-text-secondary-color: color-mix(in srgb, var(--newtab-contextual-text-primary-color) 70%, transparent); 40 41 // A background color for weather widget to help with wallpaper contrast. 42 --newtab-weather-background-color: light-dark(rgba(255, 255, 255, 85%), rgba(66, 65, 77, 85%)); 43 44 // --newtab-element-*-color is used when an element needs to be set off from 45 // the primary background color. 46 --newtab-element-hover-color: color-mix(in srgb, var(--newtab-background-color) 90%, #{$black}); 47 --newtab-element-active-color: color-mix(in srgb, var(--newtab-background-color) 80%, #{$black}); 48 49 // --newtab-button-*-color is used on all new page card/top site options buttons 50 --newtab-button-background: var(--button-background-color); 51 --newtab-button-focus-background: var(--newtab-button-background); 52 --newtab-button-focus-border: var(--focus-outline-color); 53 --newtab-button-hover-background: var(--button-background-color-hover); 54 --newtab-button-active-background: var(--button-background-color-active); 55 --newtab-button-text: var(--button-text-color); 56 57 // --newtab-button-static*-color is used on pocket cards and require a 58 // static color unit due to transparency issues with `color-mix` 59 --newtab-button-static-background: light-dark(#F0F0F4, #2B2A33); 60 --newtab-button-static-focus-background: var(--newtab-button-static-background); 61 --newtab-button-static-hover-background: light-dark(#E0E0E6, #52525E); 62 --newtab-button-static-active-background: light-dark(#CFCFD8, #5B5B66); 63 64 // --newtab-element-secondary*-color is used when an element needs to be set 65 // off from the secondary background color. 66 --newtab-element-secondary-color: color-mix(in srgb, currentColor 5%, transparent); 67 --newtab-element-secondary-hover-color: color-mix(in srgb, currentColor 12%, transparent); 68 --newtab-element-secondary-active-color: color-mix(in srgb, currentColor 25%, transparent); 69 70 --newtab-primary-element-hover-color: color-mix(in srgb, var(--newtab-primary-action-background) 90%, #{$black}); 71 --newtab-primary-element-hover-pocket-color: color-mix(in srgb, var(--newtab-primary-action-background-pocket) 90%, #{$black}); 72 --newtab-primary-element-active-color: color-mix(in srgb, var(--newtab-primary-action-background) 80%, #{$black}); 73 --newtab-primary-element-text-color: #{$white}; 74 // --newtab-primary-action-background-dimmed is used for soft focus borders. 75 --newtab-primary-action-background-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent); 76 --newtab-primary-action-background-pocket-dimmed: color-mix(in srgb, var(--newtab-primary-action-background-pocket) 25%, transparent); 77 --newtab-wordmark-color: light-dark(#{$newtab-wordmark-default-color}, #{$newtab-wordmark-darktheme-color}); 78 --newtab-status-success: #{$status-green}; 79 --newtab-status-error: var(--color-red-60); 80 --newtab-inner-box-shadow-color: #{$black-10}; 81 --newtab-section-card-box-shadow-color: rgba(58, 57, 68, 20%); 82 --newtab-overlay-color: color-mix(in srgb, var(--newtab-background-color) 85%, transparent); 83 84 // Custom border radius 85 --border-radius-large: 16px; 86 87 @include textbox-focus(var(--newtab-primary-action-background)); 88 89 // Buttons 90 --newtab-button-secondary-color: inherit; 91 92 &[lwt-newtab-brighttext] { 93 // We export color-scheme because some addon themes might not work with light-dark and prefers-color-scheme. 94 // If we add color-scheme here, we can still use light-dark 95 color-scheme: dark; 96 // General styles 97 --newtab-background-color: #{$in-content-page-background-dark}; 98 --newtab-background-color-secondary: #{$newtab-background-secondary-dark}; 99 --newtab-text-primary-color: #{$in-content-page-color-dark}; 100 // Card Background includes 20% transparency 101 --newtab-background-card: #{$newtab-background-card-dark}; 102 --newtab-text-topic-label-color: var(--color-violet-30); 103 --newtab-text-secondary-text: #FBFBFEB0; 104 105 --newtab-contextual-text-primary-color: light-dark(#{$in-content-page-color}, var(--newtab-text-primary-color)); 106 --newtab-primary-action-background-pocket: #{$primary-blue-dark}; 107 --newtab-primary-action-background-pocket-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent); 108 109 --newtab-primary-element-hover-color: color-mix(in srgb, var(--newtab-primary-action-background) 55%, #{$white}); 110 --newtab-primary-element-hover-pocket-color: color-mix(in srgb, var(--newtab-primary-action-background-pocket) 55%, #{$white}); 111 112 --newtab-element-hover-color: color-mix(in srgb, var(--newtab-background-color) 80%, #{$white}); 113 --newtab-element-active-color: color-mix(in srgb, var(--newtab-background-color) 60%, #{$white}); 114 --newtab-section-card-box-shadow-color: rgba(0, 0, 0, 80%); 115 --newtab-element-secondary-color: color-mix(in srgb, currentColor 10%, transparent); 116 --newtab-element-secondary-hover-color: color-mix(in srgb, currentColor 17%, transparent); 117 --newtab-element-secondary-active-color: color-mix(in srgb, currentColor 30%, transparent); 118 119 --newtab-primary-element-text-color: #{$primary-text-color-dark}; 120 --newtab-status-success: #{$status-dark-green}; 121 } 122 } 123 124 @media (prefers-contrast) { 125 :root { 126 --newtab-text-secondary-color: var(--newtab-text-primary-color); 127 --newtab-text-topic-label-color: var(--color-violet-30); 128 129 color-scheme: light; 130 --newtab-text-secondary-text: #000; 131 132 } 133 134 @media (prefers-color-scheme: dark) { 135 :root { 136 color-scheme: dark; 137 --newtab-text-secondary-text: #FFF; 138 } 139 } 140 }