Bug 1467572 - Part 16: Adjust RDM colors for the light and dark theme to match the designs. r=rcaliman
Light Theme Design https://mozilla.invisionapp.com/d/main#/console/12408235/300479943/preview
Dark Theme Design https://mozilla.invisionapp.com/d/main#/console/12408235/302151757/preview
MozReview-Commit-ID: 1hF104PmyDO
--- a/devtools/client/responsive.html/components/DeviceModal.js
+++ b/devtools/client/responsive.html/components/DeviceModal.js
@@ -150,17 +150,17 @@ class DeviceModal extends PureComponent
return dom.div(
{
id: "device-modal-wrapper",
className: this.props.devices.isModalOpen ? "opened" : "closed",
},
dom.div(
{
- className: "device-modal container",
+ className: "device-modal",
},
dom.button({
id: "device-close-button",
className: "devtools-button",
onClick: () => onUpdateDeviceModal(false),
}),
dom.div(
{--- a/devtools/client/responsive.html/index.css
+++ b/devtools/client/responsive.html/index.css
@@ -31,43 +31,44 @@ button {
html,
body,
#root {
height: 100%;
overflow: hidden;
}
+.theme-dark body,
+.theme-dark button,
+.theme-dark input {
+ color: var(--theme-toolbar-color);
+}
+
#app {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
/**
* Common styles for shared components
*/
-.container {
- background-color: var(--theme-toolbar-background);
- border: 1px solid var(--theme-splitter-color);
-}
-
.devtools-separator {
height: 100%;
margin: 0 1px;
}
/**
* Toolbar
*/
#toolbar {
- background-color: var(--theme-toolbar-background);
+ background-color: var(--theme-tab-toolbar-background);
border-bottom: 1px solid var(--theme-splitter-color);
display: grid;
grid-template-columns: min-content auto min-content;
width: 100%;
min-height: 29px;
-moz-user-select: none;
}
@@ -131,16 +132,20 @@ body,
#viewports-container {
display: flex;
justify-content: center;
overflow: auto;
height: 100%;
width: 100%;
}
+.theme-light #viewports-container {
+ background-color: #F5F5F6;
+}
+
#viewports {
/* Individual viewports are inline elements, make sure they stay on a single
line */
white-space: nowrap;
padding-top: 30px;
}
/**
@@ -242,16 +247,20 @@ body,
border: 1px solid var(--theme-selection-background);
transition: all 0.2s ease-in-out;
}
.viewport-dimension-input.invalid:focus {
border: 1px solid #d92215;
}
+.theme-dark .viewport-dimension-input {
+ background-color: var(--theme-tab-toolbar-background);
+}
+
.viewport-dimension-separator {
-moz-user-select: none;
padding: 0 0.3em;
}
/**
* Device Modal
*/
@@ -275,16 +284,18 @@ body,
100% {
opacity: 0;
transform: translateY(5px);
visibility: hidden;
}
}
.device-modal {
+ background-color: var(--theme-toolbar-background);
+ border: 1px solid var(--theme-splitter-color);
border-radius: 2px;
box-shadow: var(--rdm-box-shadow);
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
@@ -341,16 +352,17 @@ body,
.device-header {
font-weight: bold;
text-transform: capitalize;
padding: 0 0 3px 23px;
}
.device-label {
+ color: var(--theme-body-color);
padding-bottom: 3px;
display: flex;
align-items: center;
/* Largest size without horizontal scrollbars */
max-width: 181px;
}
.device-input-checkbox {--- a/devtools/client/responsive.html/index.xhtml
+++ b/devtools/client/responsive.html/index.xhtml
@@ -8,12 +8,12 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css"
href="resource://devtools/client/responsive.html/index.css"/>
<script type="application/javascript"
src="chrome://devtools/content/shared/theme-switching.js"></script>
<script type="application/javascript"
src="resource://devtools/client/responsive.html/index.js"></script>
</head>
- <body class="theme-body" role="application">
+ <body class="theme-toolbar" role="application">
<div id="root"/>
</body>
</html>