_variables.scss (9088B)
1 @use 'sass:math'; 2 3 // newtab only variables, otherwise use https://firefoxux.github.io/firefox-desktop-components/?path=/story/docs-tokens-table--default 4 :root { 5 --newtab-card-height: 282px; 6 --newtab-card-width-medium: 300px; 7 --newtab-card-grid-layout-width: 296px; // Matches widget used in Base.jsx 8 } 9 10 $primary-blue: var(--color-accent-primary); 11 $primary-blue-dark: var(--color-accent-primary); 12 $primary-text-color-dark: rgb(43, 42, 51); 13 14 // -------------------------------------------------------------------------- // 15 // Grays from http://design.firefox.com/photon/visuals/color.html 16 17 $grey-30: #D7D7DB; 18 $grey-60: #4A4A4F; 19 $grey-90: #0C0C0D; 20 21 $grey-90-10: rgba($grey-90, 0.1); 22 $grey-90-20: rgba($grey-90, 0.2); 23 24 $blue-40-40: oklch(from var(--color-blue-40) / lch 40%); 25 $blue-50-30: oklch(from var(--color-blue-50) / lch 30%); 26 27 $black: #000; 28 $black-10: rgba($black, 0.1); 29 $black-15: rgba($black, 0.15); 30 $black-20: rgba($black, 0.2); 31 $black-25: rgba($black, 0.25); 32 $black-30: rgba($black, 0.3); 33 $black-40: rgba($black, 0.4); 34 35 // -------------------------------------------------------------------------- // 36 // Other colors 37 38 $white: var(--color-white); 39 $status-green: var(--color-green-50); 40 $status-dark-green: var(--color-green-30); 41 $bookmark-icon-fill: var(--color-blue-40); 42 $download-icon-fill: var(--color-green-40); 43 $pocket-icon-fill: #EF4056; 44 $email-input-invalid: var(--color-red-10); 45 46 $newtab-wordmark-default-color: #20123A; 47 $newtab-wordmark-darktheme-color: rgb(251, 251, 254); 48 49 /* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */ 50 $in-content-page-color: var(--text-color); 51 /* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */ 52 $in-content-page-color-dark: var(--text-color); 53 54 // -------------------------------------------------------------------------- // 55 // These colors should match the colors in the default themes 56 // (toolkit/mozapps/extensions/...). Note that they could get replaced by other 57 // themes. The color set in --tabpanel-background-color (tabs.inc.css) should 58 // match these colors here to avoid flashing. 59 60 $in-content-page-background: #F9F9FB; 61 $in-content-page-background-dark: #2B2A33; 62 $newtab-background-secondary: var(--color-white); 63 $newtab-background-secondary-dark: rgb(66, 65, 77); 64 65 // Mirrors $newtab-background-secondary with 15% transparency 66 $newtab-background-card: color-mix(in srgb, var(--color-white) 85%, transparent); 67 $newtab-background-card-dark: rgba(66, 65, 77, 85%); 68 69 // Photon transitions from http://design.firefox.com/photon/motion/duration-and-easing.html 70 $photon-easing: cubic-bezier(0.07, 0.95, 0, 1); 71 72 // Grid related styles 73 $base-gutter: 32px; 74 $section-horizontal-padding: 25px; 75 $vars-section-horizontal-padding: 25px; 76 $section-vertical-padding: 10px; 77 $section-spacing: 40px - $section-vertical-padding * 2; // 20px 78 $grid-unit: 96px; // 1 top site 79 // New Tab Experience grid unit needs to be smaller, but for now we are changing 80 // this UI with a pref, so requires duplication. 81 $grid-unit-small: 80px; // 1 top site 82 83 $icon-size: 16px; 84 $smaller-icon-size: 12px; 85 $larger-icon-size: 32px; 86 87 $searchbar-width-small: ($grid-unit * 2 + $base-gutter * 1) - 24px; // 200px 88 $searchbar-width-medium: ($grid-unit * 4 + $base-gutter * 3) - 120px; // 360px 89 $searchbar-width-large: ($grid-unit * 6 + $base-gutter * 5) - 136px; // 600px 90 $searchbar-width-largest: ($grid-unit * 6 + $base-gutter * 5) - 16px; // 720px 91 92 $wrapper-default-width: $grid-unit * 2 + $base-gutter * 1 + $vars-section-horizontal-padding * 2; // 2 top sites 93 $wrapper-max-width-medium: $grid-unit * 4 + $base-gutter * 3 + $vars-section-horizontal-padding * 2; // 4 top sites 94 $wrapper-max-width-large: $grid-unit * 6 + $base-gutter * 5 + $vars-section-horizontal-padding * 2; // 6 top sites 95 $wrapper-max-width-widest: $grid-unit * 8 + $base-gutter * 7 + $vars-section-horizontal-padding * 2; // 8 top sites 96 $wrapper-max-width-weather: $grid-unit * 12 + $base-gutter * 7 + $vars-section-horizontal-padding * 2; // Weather visible 97 $wrapper-max-width-ultra-wide: $grid-unit * 14 + $base-gutter * 7 + $vars-section-horizontal-padding * 2; // 8 top sites 4 stories 98 // For the breakpoints, we need to add space for the scrollbar to avoid weird 99 // layout issues when the scrollbar is visible. 16px is wide enough to cover all 100 // OSes and keeps it simpler than a per-OS value. 101 $scrollbar-width: 16px; 102 103 // Breakpoints 104 // If updating these breakpoints, don't forget to update uses of DSImage, which 105 // might choose the right image src to use depending on the viewport size 106 // and the $debug-breakpoints list below 107 $break-point-small: 510px; 108 $break-point-medium: $wrapper-max-width-medium + $base-gutter * 2 + $scrollbar-width; // 610px 109 // A temporary breakpoint for a new layout experiment. 110 $break-point-layout-variant: 724px; 111 $break-point-large: $wrapper-max-width-large + $base-gutter * 2 + $scrollbar-width; // 866px 112 $break-point-widest: $wrapper-max-width-widest + $base-gutter * 2 + $scrollbar-width; // 1122px 113 // temporary breakpoint for sections experiment 114 $break-point-sections-variant: 1310px + $base-gutter * 2 + $scrollbar-width; // 1374px 115 $break-point-weather: $wrapper-max-width-weather + $base-gutter * 2 + $scrollbar-width; // 1506px 116 $break-point-ultra-wide: $wrapper-max-width-ultra-wide + $base-gutter * 2 + $scrollbar-width; // 1698px 117 118 // Used for @include debug-breakpoints in mixins.scss 119 $debug-breakpoints: ( 120 small: $break-point-small, 121 medium: $break-point-medium, 122 large: $break-point-large, 123 widest: $break-point-widest, 124 sections-variant: $break-point-sections-variant, 125 weather: $break-point-weather, 126 ultra-wide: $break-point-ultra-wide 127 ); 128 129 $debug-breakpoint-colors: ( 130 small: red, 131 medium: orange, 132 large: yellow, 133 widest: green, 134 sections-variant: blue, 135 weather: purple, 136 ultra-wide: violet 137 ); 138 139 /* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */ 140 $section-title-font-size: var(--font-size-large); 141 142 $card-width: $grid-unit-small * 2 + $base-gutter; 143 144 $card-height: 266px; 145 $card-preview-image-height: 122px; 146 $card-title-margin: 2px; 147 $card-text-line-height: 19px; 148 149 // Larger cards for wider screens: 150 $card-width-large: 309px; 151 $card-height-large: 370px; 152 $card-preview-image-height-large: 155px; 153 154 // Compact cards for Highlights 155 $card-height-compact: 160px; 156 $card-preview-image-height-compact: 108px; 157 158 $topic-margin-block-start: 12px; 159 160 $context-menu-button-size: 27px; 161 $context-menu-button-boxshadow: 0 2px $grey-90-10; 162 $context-menu-shadow: 0 5px 10px $black-30, 0 0 0 1px $black-20; 163 $context-menu-font-size: inherit; 164 165 // $context-menu-border-radius: 5px; 166 $context-menu-outer-padding: 5px; 167 $context-menu-item-padding: 3px 12px; 168 169 $image-path: 'chrome://newtab/content/data/content/assets/'; 170 171 $textbox-shadow-size: 4px; 172 173 $customize-menu-slide-bezier: cubic-bezier(0.46, 0.03, 0.52, 0.96); 174 $customize-menu-expand-bezier: cubic-bezier(0.82, 0.085, 0.395, 0.895); 175 $customize-menu-border-tint: 1px solid rgba(0, 0, 0, 15%); 176 177 @mixin fade-in { 178 box-shadow: inset $inner-box-shadow, $shadow-primary; 179 transition: box-shadow 150ms; 180 } 181 182 @mixin fade-in-card { 183 box-shadow: $shadow-primary; 184 transition: box-shadow 150ms; 185 } 186 187 @mixin ds-focus { 188 border: 0; 189 outline: var(--focus-outline); 190 } 191 192 @mixin context-menu-button { 193 .context-menu-button { 194 background-clip: padding-box; 195 background-color: var(--newtab-button-background); 196 background-image: url('chrome://global/skin/icons/more.svg'); 197 background-position: 50.1%; 198 border: 0; 199 outline: 1px solid var(--border-color); 200 outline-width: 0; 201 border-radius: var(--border-radius-circle); 202 cursor: pointer; 203 color: var(--button-text-color); 204 fill: var(--newtab-button-text); 205 height: $context-menu-button-size; 206 inset-inline-end: calc(var(--space-medium) * -1); 207 opacity: 0; 208 position: absolute; 209 inset-block-start: calc(var(--space-medium) * -1); 210 transform: scale(0.25); 211 transition-duration: 150ms; 212 transition-property: transform, opacity; 213 width: $context-menu-button-size; 214 215 &:is(:active, :focus-visible, :hover) { 216 opacity: 1; 217 transform: scale(1); 218 } 219 220 &:is(:hover) { 221 background-color: var(--newtab-button-hover-background); 222 } 223 224 &:is(:focus-visible) { 225 outline-color: var(--newtab-button-focus-border); 226 background-color: var(--newtab-button-focus-background); 227 outline-width: 4px; 228 } 229 230 &:is(:active) { 231 background-color: var(--newtab-button-active-background); 232 } 233 234 235 } 236 } 237 238 @mixin context-menu-button-hover { 239 .context-menu-button { 240 opacity: 1; 241 transform: scale(1); 242 transition-delay: 333ms; 243 } 244 } 245 246 @mixin context-menu-open-middle { 247 .context-menu { 248 margin-inline-end: auto; 249 margin-inline-start: auto; 250 inset-inline-end: auto; 251 inset-inline-start: calc(var(--space-xxlarge) * -1); 252 } 253 } 254 255 @mixin context-menu-open-left { 256 .context-menu { 257 margin-inline-end: var(--space-xsmall); 258 margin-inline-start: auto; 259 inset-inline-end: 0; 260 inset-inline-start: auto; 261 } 262 } 263 264 @mixin flip-icon { 265 &:dir(rtl) { 266 transform: scaleX(-1); 267 } 268 }