Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (265119 => 265120)
--- trunk/Source/WebInspectorUI/ChangeLog 2020-07-30 23:54:39 UTC (rev 265119)
+++ trunk/Source/WebInspectorUI/ChangeLog 2020-07-31 00:12:06 UTC (rev 265120)
@@ -1,3 +1,87 @@
+2020-07-30 Nikita Vasilyev <nvasil...@apple.com>
+
+ Web Inspector: on Big Sur, match OS background, text, and border colors
+ https://bugs.webkit.org/show_bug.cgi?id=214366
+ <rdar://problem/65617290>
+
+ Reviewed by Devin Rousso.
+
+ Refactoring:
+ - Remove --background-color-code because it was always the same value as --background-color-content.
+ - Replace commonly hardcoded `hsl(0, 0%, 97%)` background with --background-color-intermediate.
+
+ * UserInterface/Views/AnimationDetailsSidebarPanel.css:
+ (.sidebar > .panel.details.animation > .content > .details-section.animation-keyframes .details-section):
+ (.sidebar > .panel.details.animation > .content > .details-section.animation-keyframes .details-section .row.styles .CodeMirror):
+ * UserInterface/Views/BoxShadowEditor.css:
+ (.box-shadow-editor > table > tr > td > input[type="text"]):
+ * UserInterface/Views/BreakpointActionView.css:
+ (@media (prefers-color-scheme: dark) .breakpoint-action-eval-editor):
+ * UserInterface/Views/BreakpointPopoverController.css:
+ (.edit-breakpoint-popover-condition):
+ * UserInterface/Views/ChangesDetailsSidebarPanel.css:
+ (.sidebar > .panel.changes-panel .css-rule):
+ * UserInterface/Views/ComputedStyleSection.css:
+ (.computed-style-section .computed-property-item.expanded):
+ (.computed-style-properties.details-section > .content,):
+ * UserInterface/Views/ConsolePrompt.css:
+ (.console-prompt):
+ (.console-prompt > .CodeMirror-scroll):
+ * UserInterface/Views/CookiePopover.css:
+ (.popover .cookie-popover-content > table > tr > td > input:matches([type="text"], [type="datetime-local"])):
+
+ * UserInterface/Views/DetailsSection.css:
+ (.details-section .details-section):
+ (.details-section .details-section > .header):
+ Refactor. --background-color-content is the same color value.
+
+ (.details-section .details-section:not(.collapsed) > .header):
+ Refactor. --border-color-secondary is the same color value.
+
+ (.details-section > .content > .group:nth-child(even)):
+ (.details-section > .content > .group > .row:matches(.empty, .text)):
+ (@media (prefers-color-scheme: dark) .details-section > .header > label,):
+
+ * UserInterface/Views/DividerNavigationItem.css:
+ (.navigation-bar .item.divider):
+ Don't use hairline dividers. MacOS Catalina and Big Sur don't use hairline borders.
+
+ * UserInterface/Views/GraphicsOverviewContentView.css:
+ (.content-view.graphics-overview > section > .header):
+ (@media (prefers-color-scheme: dark) .content-view.graphics-overview):
+ * UserInterface/Views/LocalResourceOverridePopover.css:
+ (.popover .local-resource-override-popover-content .editor):
+ * UserInterface/Views/LogContentView.css:
+ (@media (prefers-color-scheme: dark) .console-messages):
+ * UserInterface/Views/QuickConsole.css:
+ (.quick-console):
+ * UserInterface/Views/ScopeChainDetailsSidebarPanel.css:
+ (@media (prefers-color-scheme: dark) .watch-_expression_-editor):
+ * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css:
+ (.spreadsheet-css-declaration):
+ (.spreadsheet-css-declaration.locked):
+ * UserInterface/Views/SyntaxHighlightingDefaultTheme.css:
+ (@media (prefers-color-scheme: dark) .cm-s-default,):
+ * UserInterface/Views/TabBar.css:
+ (body.big-sur.docked .tab-bar > .border.bottom):
+ * UserInterface/Views/URLBreakpointPopover.css:
+ (.popover .url-breakpoint-content > .editor-wrapper > .editor):
+
+ * UserInterface/Views/Variables.css:
+ (:root):
+ Add --separator-color, which has the same semantics as `separator` color from Apple HIG
+ (https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/#dynamic-system-colors).
+ --border-color-secondary was only defined in the dark mode. Define it in the light mode, too.
+
+ (body.window-inactive):
+ Remove unused variable.
+
+ (body.big-sur):
+ (@media (prefers-color-scheme: dark) :root):
+ (@media (prefers-color-scheme: dark) body.big-sur):
+ (@media (prefers-color-scheme: dark) body.window-inactive):
+ (body.window-inactive *): Remove unnecessarily greedy selector.
+
2020-07-30 Devin Rousso <drou...@apple.com>
Web Inspector: only show scrollbars when needed
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/AnimationDetailsSidebarPanel.css (265119 => 265120)
--- trunk/Source/WebInspectorUI/UserInterface/Views/AnimationDetailsSidebarPanel.css 2020-07-30 23:54:39 UTC (rev 265119)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/AnimationDetailsSidebarPanel.css 2020-07-31 00:12:06 UTC (rev 265120)
@@ -28,7 +28,7 @@
}
.sidebar > .panel.details.animation > .content > .details-section.animation-keyframes .details-section {
- background-color: hsl(0, 0%, 97%);
+ background-color: var(--background-color-intermediate);
}
.sidebar > .panel.details.animation > .content > .details-section.animation-keyframes .details-section .row.styles {
@@ -40,9 +40,3 @@
padding: 4px 0;
background-color: transparent;
}
-
-@media (prefers-color-scheme: dark) {
- .sidebar > .panel.details.animation > .content > .details-section.animation-keyframes .details-section {
- background-color: hsl(0, 0%, 18%);
- }
-}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BoxShadowEditor.css (265119 => 265120)
--- trunk/Source/WebInspectorUI/UserInterface/Views/BoxShadowEditor.css 2020-07-30 23:54:39 UTC (rev 265119)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BoxShadowEditor.css 2020-07-31 00:12:06 UTC (rev 265120)
@@ -51,7 +51,7 @@
padding: 3px 4px 2px;
font-family: Menlo, monospace;
text-align: end;
- background-color: var(--background-color-code);
+ background-color: var(--background-color-content);
border: 1px solid var(--text-color-quaternary);
-webkit-appearance: none;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css (265119 => 265120)
--- trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css 2020-07-30 23:54:39 UTC (rev 265119)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css 2020-07-31 00:12:06 UTC (rev 265120)
@@ -111,6 +111,6 @@
}
.breakpoint-action-eval-editor {
- background: var(--background-color-code);
+ background: var(--background-color-content);
}
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css (265119 => 265120)
--- trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css 2020-07-30 23:54:39 UTC (rev 265119)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css 2020-07-31 00:12:06 UTC (rev 265120)
@@ -84,7 +84,7 @@
padding: 4px 0 2px;
-webkit-appearance: textfield;
border: 1px solid hsl(0, 0%, 78%);
- background: var(--background-color-code);
+ background: var(--background-color-content);
}
.edit-breakpoint-popover-condition > .CodeMirror {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.css (265119 => 265120)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.css 2020-07-30 23:54:39 UTC (rev 265119)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.css 2020-07-31 00:12:06 UTC (rev 265120)
@@ -32,7 +32,7 @@
padding: var(--css-declaration-vertical-padding) 0;
font: 11px Menlo, monospace;
color: var(--text-color-secondary);
- background-color: var(--background-color-code);
+ background-color: var(--background-color-content);
-webkit-user-select: text;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.css (265119 => 265120)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.css 2020-07-30 23:54:39 UTC (rev 265119)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.css 2020-07-31 00:12:06 UTC (rev 265120)
@@ -41,7 +41,7 @@
.computed-style-section .computed-property-item.expanded {
padding-bottom: 2px;
- background-color: hsl(0, 0%, 97%);
+ background-color: var(--background-color-intermediate);
border-top: 0.5px solid var(--text-color-quaternary);
border-bottom: 0.5px solid var(--text-color-quaternary);
}
@@ -158,9 +158,3 @@
.computed-style-properties.details-section > .content > .group {
display: block;
}
-
-@media (prefers-color-scheme: dark) {
- .computed-style-section .computed-property-item.expanded {
- background-color: var(--background-color-code);
- }
-}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.css (265119 => 265120)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.css 2020-07-30 23:54:39 UTC (rev 265119)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.css 2020-07-31 00:12:06 UTC (rev 265120)
@@ -24,7 +24,7 @@
*/
.console-prompt {
- background-color: white;
+ background-color: var(--background-color-content);
}
.console-prompt > .CodeMirror {
@@ -35,9 +35,3 @@
.console-prompt > .CodeMirror-scroll {
overflow: hidden;
}
-
-@media (prefers-color-scheme: dark) {
- .console-prompt {
- background-color: var(--background-color-code);
- }
-}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CookiePopover.css (265119 => 265120)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CookiePopover.css 2020-07-30 23:54:39 UTC (rev 265119)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CookiePopover.css 2020-07-31 00:12:06 UTC (rev 265120)
@@ -51,7 +51,7 @@
width: 100%;
padding: 3px 4px 2px;
font-family: Menlo, monospace;
- background-color: var(--background-color-code);
+ background-color: var(--background-color-content);
border: 1px solid var(--text-color-quaternary);
-webkit-appearance: none;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css (265119 => 265120)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css 2020-07-30 23:54:39 UTC (rev 265119)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css 2020-07-31 00:12:06 UTC (rev 265120)
@@ -33,7 +33,7 @@
}
.details-section .details-section {
- background-color: hsl(0, 0%, 100%);
+ background-color: var(--background-color-content);
border-color: var(--text-color-quaternary);
}
@@ -89,7 +89,7 @@
.details-section .details-section > .header {
top: 21px;
- background-color: hsl(0, 0%, 100%);
+ background-color: var(--background-color-content);
font-weight: 500;
/* Ensure these headers are displayed below the parent header but above scrollbars. */
@@ -97,7 +97,7 @@
}
.details-section .details-section:not(.collapsed) > .header {
- border-bottom: 1px solid hsl(0, 0%, 87%);
+ border-bottom: 1px solid var(--border-color-secondary);
}
.details-section > .header::before {
@@ -182,7 +182,7 @@
}
.details-section > .content > .group:nth-child(even) {
- background-color: hsl(0, 0%, 97%);
+ background-color: var(--background-color-intermediate);
}
.details-section > .content > .group:nth-child(even) > .row:matches(.simple:first-child > *, :not(.simple):first-child) {
@@ -256,7 +256,7 @@
.details-section > .content > .group > .row:matches(.empty, .text) {
padding: 0 6px 7px 6px;
text-align: center;
- color: gray;
+ color: var(--text-color-secondary);
}
.details-section > .content > .group > .row.text {
@@ -303,28 +303,8 @@
color: var(--text-color);
}
- .details-section > .header > label {
- color: var(--text-color-secondary);
- }
-
- .details-section .details-section,
- .details-section .details-section > .header {
- background-color: var(--background-color-content);
- }
-
- .details-section .details-section:not(.collapsed) > .header {
- border-bottom-color: var(--border-color-secondary);
- }
-
+ .details-section > .header > label,
.details-section > .content > .group > .row.simple > .label {
color: var(--text-color-secondary);
}
-
- .details-section > .content > .group:nth-child(even) {
- background-color: unset;
- }
-
- .details-section > .content > .group > .row:matches(.empty, .text) {
- color: var(--text-color-secondary);
- }
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DividerNavigationItem.css (265119 => 265120)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DividerNavigationItem.css 2020-07-30 23:54:39 UTC (rev 265119)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DividerNavigationItem.css 2020-07-31 00:12:06 UTC (rev 265120)
@@ -26,17 +26,5 @@
.navigation-bar .item.divider {
width: 1px;
height: 16px;
- background-color: hsl(0, 0%, 74%);
+ background-color: var(--separator-color);
}
-
-@media (-webkit-min-device-pixel-ratio: 2) {
- .navigation-bar .item.divider {
- width: 0.5px;
- }
-}
-
-@media (prefers-color-scheme: dark) {
- .navigation-bar .item.divider {
- background-color: hsl(0, 0%, 40%);
- }
-}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/GraphicsOverviewContentView.css (265119 => 265120)
--- trunk/Source/WebInspectorUI/UserInterface/Views/GraphicsOverviewContentView.css 2020-07-30 23:54:39 UTC (rev 265119)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/GraphicsOverviewContentView.css 2020-07-31 00:12:06 UTC (rev 265120)
@@ -48,7 +48,7 @@
min-height: var(--navigation-bar-height);
margin-top: -1px;
-webkit-padding-start: 8px;
- background-color: hsl(0, 0%, 97%);
+ background-color: var(--background-color-intermediate);
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
@@ -75,9 +75,5 @@
.content-view.graphics-overview {
background-color: hsl(0, 0%, 14%);
}
-
- .content-view.graphics-overview > section > .header {
- background-color: hsl(0, 0%, 21%);
- }
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LocalResourceOverridePopover.css (265119 => 265120)
--- trunk/Source/WebInspectorUI/UserInterface/Views/LocalResourceOverridePopover.css 2020-07-30 23:54:39 UTC (rev 265119)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LocalResourceOverridePopover.css 2020-07-31 00:12:06 UTC (rev 265120)
@@ -57,7 +57,7 @@
padding: 4px 0 2px;
-webkit-appearance: unset;
border: 1px solid hsl(0, 0%, 78%);
- background: var(--background-color-code);
+ background: var(--background-color-content);
border-color: var(--text-color-quaternary);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.css (265119 => 265120)
--- trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.css 2020-07-30 23:54:39 UTC (rev 265119)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.css 2020-07-31 00:12:06 UTC (rev 265120)
@@ -242,7 +242,7 @@
@media (prefers-color-scheme: dark) {
.console-messages {
- background-color: var(--background-color-code);
+ background-color: var(--background-color-content);
}
.console-item {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/QuickConsole.css (265119 => 265120)
--- trunk/Source/WebInspectorUI/UserInterface/Views/QuickConsole.css 2020-07-30 23:54:39 UTC (rev 265119)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/QuickConsole.css 2020-07-31 00:12:06 UTC (rev 265120)
@@ -31,7 +31,7 @@
align-items: flex-end;
color: var(--text-color);
- background-color: var(--background-color-code);
+ background-color: var(--background-color-content);
border-top: 1px solid var(--border-color);
padding: 3px 0 4px;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.css (265119 => 265120)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.css 2020-07-30 23:54:39 UTC (rev 265119)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.css 2020-07-31 00:12:06 UTC (rev 265120)
@@ -66,6 +66,6 @@
@media (prefers-color-scheme: dark) {
.watch-_expression_-editor {
- background-color: var(--background-color-code);
+ background-color: var(--background-color-content);
}
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css (265119 => 265120)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css 2020-07-30 23:54:39 UTC (rev 265119)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css 2020-07-31 00:12:06 UTC (rev 265120)
@@ -29,7 +29,7 @@
font-family: Menlo, monospace;
font-size: 11px;
color: var(--text-color-tertiary);
- background: var(--background-color-code);
+ background: var(--background-color-content);
border-bottom: 0.5px solid var(--text-color-quaternary);
-webkit-user-select: text;
}
@@ -132,7 +132,7 @@
}
.spreadsheet-css-declaration.locked {
- background-color: hsl(0, 0%, 97%)
+ background-color: var(--background-color-intermediate);
}
.spreadsheet-css-declaration .locked-icon {
@@ -157,10 +157,6 @@
}
@media (prefers-color-scheme: dark) {
- .spreadsheet-css-declaration.locked {
- background: var(--background-color);
- }
-
.spreadsheet-css-declaration .selector.style-attribute {
color: var(--text-color-secondary);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css (265119 => 265120)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css 2020-07-30 23:54:39 UTC (rev 265119)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css 2020-07-31 00:12:06 UTC (rev 265120)
@@ -139,7 +139,7 @@
.cm-s-default,
.CodeMirror {
- background-color: var(--background-color-code);
+ background-color: var(--background-color-content);
}
.cm-s-default .cm-attribute {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css (265119 => 265120)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css 2020-07-30 23:54:39 UTC (rev 265119)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css 2020-07-31 00:12:06 UTC (rev 265120)
@@ -91,6 +91,10 @@
filter: brightness(80%);
}
+body.big-sur.docked .tab-bar > .border.bottom {
+ background-color: var(--border-color);
+}
+
body.window-inactive .tab-bar > .border {
background-color: var(--tab-item-light-border-color);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/URLBreakpointPopover.css (265119 => 265120)
--- trunk/Source/WebInspectorUI/UserInterface/Views/URLBreakpointPopover.css 2020-07-30 23:54:39 UTC (rev 265119)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/URLBreakpointPopover.css 2020-07-31 00:12:06 UTC (rev 265120)
@@ -40,7 +40,7 @@
padding: 4px 0 2px;
-webkit-appearance: textfield;
border: 1px solid hsl(0, 0%, 78%);
- background: var(--background-color-code);
+ background: var(--background-color-content);
}
.popover .url-breakpoint-content > .editor-wrapper > .editor > .CodeMirror {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css (265119 => 265120)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2020-07-30 23:54:39 UTC (rev 265119)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2020-07-31 00:12:06 UTC (rev 265120)
@@ -45,10 +45,12 @@
/* Dividers, separators, background fills */
--text-color-quaternary: hsl(0, 0%, 85%);
+ --separator-color: hsla(0, 0%, var(--foreground-lightness), 0.15);
+
--background-color: white;
--background-color-content: white;
- --background-color-code: white;
+ --background-color-intermediate: hsl(0, 0%, 97%);
--background-color-unfocused: hsla(0, 0%, calc(100% - var(--foreground-lightness)), 0.8);
--background-color-alternate: hsla(0, 0%, var(--foreground-lightness), 0.05);
@@ -80,7 +82,7 @@
--glyph-opacity: 1;
--border-color: hsl(0, 0%, 70%);
- --border-color-dark: hsl(0, 0%, 57%);
+ --border-color-secondary: hsl(0, 0%, 87%);
--button-background-color: white;
--button-background-color-hover: hsl(0, 0%, 88%);
@@ -201,6 +203,8 @@
--diff-addition-border-color: hsl(90, 100%, 40%);
--color-picker-width: 256px;
+
+ --sorted-header-font-weight: 500;
}
body.window-inactive {
@@ -210,13 +214,26 @@
--glyph-color: hsla(0, 0%, 30%, 0.65);
--glyph-color-disabled: hsla(0, 0%, 30%, 0.35);
--glyph-opacity: 0.6;
-}
-body.window-inactive * {
--border-color: hsl(0, 0%, 85%);
- --border-color-dark: hsl(0, 0%, 72%);
}
+body.big-sur {
+ --text-color: hsl(0, 0%, 15%);
+
+ --background-color-intermediate: hsl(0, 0%, 98.5%);
+
+ --panel-background-color: hsl(0, 0%, 96%);
+ --panel-background-color-light: hsl(0, 0%, 98%);
+
+ --separator-color: hsla(0, 0%, var(--foreground-lightness), 0.1);
+
+ --border-color: hsl(0, 0%, 87%);
+ --border-color-secondary: hsl(0, 0%, 91%);
+
+ --sorted-header-font-weight: 700;
+}
+
body.mac-platform:not(.big-sur):not(.docked) {
--undocked-title-area-height: calc(22px / var(--zoom-factor));
}
@@ -250,7 +267,7 @@
--background-color-tertiary: hsl(0, 0%, 31%);
--background-color-content: hsl(0, 0%, 21%);
- --background-color-code: hsl(0, 0%, 21%);
+ --background-color-intermediate: hsl(0, 0%, 23%);
--gray-background-color: hsl(0, 0%, 50%);
@@ -358,7 +375,14 @@
--diff-deletion-background-color: hsl(5, 40%, 28%);
}
+ body.big-sur {
+ --glyph-color: hsl(0, 0%, 69%);
+ --glyph-color-pressed: hsl(0, 0%, 100%);
+ }
+
body.window-inactive {
+ --border-color: hsl(0, 0%, 33%);
+
--selected-background-color: hsla(212, 92%, 64%, 0.5);
--glyph-color: hsl(0, 0%, 52%);
@@ -365,13 +389,21 @@
--glyph-color-disabled: hsla(0, 0%, 52%, 0.4);
}
- body.window-inactive * {
- /* These properties are duplicated so that they have higher specificity than WebKit's stylesheet.
- Otherwise, the variable definition inside 'body.window-inactive *' in OpenSource overrides with a lighter color.
- When merging to open source, we should guard the existing .window-inactive style with
- '@media not all' to avoid applying the definition too broadly. */
- --border-color: hsl(0, 0%, 33%);
- --border-color-dark: hsl(0, 0%, 37%); /* non-semantic variable names */
+ body.big-sur {
+ --text-color: hsl(0, 0%, 85%);
+
+ --background-color: hsl(0, 0%, 20%);
+ --background-color-secondary: hsl(0, 0%, 23%);
+ --background-color-tertiary: hsl(0, 0%, 27%);
+
+ --background-color-content: hsl(0, 0%, 17%);
+ --background-color-intermediate: hsl(0, 0%, 19%);
+
+ --panel-background-color: hsl(0, 0%, 20%);
+ --panel-background-color-light: hsl(0, 0%, 25%);
+
+ --border-color: hsl(0, 0%, 30%);
+ --border-color-secondary: hsl(0, 0%, 24%);
}
}
