File: _theme.scss

package info (click to toggle)
firefox 141.0.3-1
  • links: PTS, VCS
  • area: main
  • in suites: sid
  • size: 4,550,588 kB
  • sloc: cpp: 7,426,506; javascript: 6,367,238; ansic: 3,707,351; python: 1,369,002; xml: 623,983; asm: 426,918; java: 184,324; sh: 64,488; makefile: 19,203; objc: 13,059; perl: 12,955; yacc: 4,583; cs: 3,846; pascal: 3,352; lex: 1,720; ruby: 1,071; exp: 762; php: 436; lisp: 258; awk: 247; sql: 66; sed: 54; csh: 10
file content (151 lines) | stat: -rw-r--r-- 8,157 bytes parent folder | download | duplicates (3)
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;
    }
  }
}