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