Skip to content

GitLab

T
tangled
Commit 8e7f4fc5 authored by Christopher Lam's avatar Christopher Lam Committed by Commit Bot
Browse files
Options

[CrOS WebUI] Add cros_colors.css and use for os-settings-ui. 

This CL adds a semantic color file which will be used across all ChromeOS
WebUIs such as System Web Apps and System Dialogs. As a strawman, some
top-level OS Settings styles have been replaced.

Bug: 1018654
Change-Id: Id06fe0a1ae6366e6e990c10f4ee004b330829b7e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1880358Reviewed-by: default avatarKyle Horimoto <khorimoto@chromium.org>
Reviewed-by: default avatarDan Beam <dbeam@chromium.org>
Commit-Queue: calamity <calamity@chromium.org>
Cr-Commit-Position: refs/heads/master@{#713346}
parent e98b447c
Hide whitespace changes
Inline Side-by-side
Showing with 28 additions and 20 deletions
chrome/browser/resources/settings/chromeos/os_settings.html
View file @ 8e7f4fc5
...@@ -7,24 +7,14 @@ ...@@ -7,24 +7,14 @@
<if expr="not optimize_webui"> <if expr="not optimize_webui">
<base href="chrome://os-settings"> <base href="chrome://os-settings">
</if> </if>
<link rel="stylesheet" href="chrome://resources/css/md_colors.css"> <link rel="stylesheet" href="chrome://resources/css/cros_colors.css">
<style> <style>
html { html {
background-color: #fff; background-color: var(--cros-default-bg-color);
overflow: hidden; overflow: hidden;
/* Remove 300ms delay for 'click' event, when using touch interface. */ /* Remove 300ms delay for 'click' event, when using touch interface. */
touch-action: manipulation; touch-action: manipulation;
} }
html.loading::before {
/* TODO(hsuregan): update for dark mode when needed. */
background-color: #fff;
border-bottom: var(--md-toolbar-border);
box-sizing: border-box;
content: '';
display: block;
height: var(--md-toolbar-height);
}
</style> </style>
</head> </head>
<body> <body>
......
chrome/browser/resources/settings/chromeos/os_settings_ui/os_settings_ui.html
View file @ 8e7f4fc5
...@@ -40,18 +40,13 @@ ...@@ -40,18 +40,13 @@
os-toolbar { os-toolbar {
@apply --layout-center; @apply --layout-center;
/* TODO(hsuregan): update for dark mode when needed. */ /* TODO(hsuregan): update for dark mode when needed. */
background-color: white;
color: var(--cr-secondary-text-color);
min-height: 56px; min-height: 56px;
z-index: 2; z-index: 2;
--cr-toolbar-search-field-background: var(--google-grey-refresh-100);
--cr-toolbar-search-field-border-radius: 4px;
--cr-toolbar-search-field-input-color: var(--google-grey-refresh-700);
} }
cr-drawer { cr-drawer {
--cr-separator-line: none; --cr-separator-line: none;
--cr-drawer-header-color: var(--google-grey-refresh-700); --cr-drawer-header-color: var(--cros-default-text-color-secondary);
--cr-drawer-header-font-weight: 500; --cr-drawer-header-font-weight: 500;
--cr-drawer-header-padding: 20px; --cr-drawer-header-padding: 20px;
} }
......
chrome/browser/resources/settings/chromeos/os_toolbar/os_toolbar.html
View file @ 8e7f4fc5
...@@ -12,9 +12,14 @@ ...@@ -12,9 +12,14 @@
<template> <template>
<style include="cr-icons cr-hidden-style"> <style include="cr-icons cr-hidden-style">
:host { :host {
--cr-toolbar-search-field-background:
var(--cros-default-toolbar-search-bg-color);
--cr-toolbar-search-field-border-radius: 4px;
--cr-toolbar-search-field-input-color:
var(--cros-default-text-color-secondary);
align-items: center; align-items: center;
background-color: var(--google-blue-700); background-color: var(--cros-default-toolbar-bg-color);
color: #fff; color: var(--cros-default-text-color-secondary);
display: flex; display: flex;
height: var(--cr-toolbar-height); height: var(--cr-toolbar-height);
} }
......
ui/webui/resources/css/cros_colors.css 0 → 100644
View file @ 8e7f4fc5
/* Copyright 2019 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
html {
--cros-default-text-color: var(--google-grey-900);
--cros-default-text-color-secondary: var(--google-grey-refresh-700);
--cros-default-bg-color: #fff;
--cros-default-toolbar-bg-color: #fff;
--cros-default-toolbar-search-bg-color: var(--google-grey-refresh-100);
}
/* TODO(crbug.com/1018654): Implement dark mode overrides */
ui/webui/resources/webui_resources.grd
View file @ 8e7f4fc5
...@@ -207,6 +207,9 @@ without changes to the corresponding grd file. --> ...@@ -207,6 +207,9 @@ without changes to the corresponding grd file. -->
compress="gzip" /> compress="gzip" />
<if expr="chromeos"> <if expr="chromeos">
<structure name="IDR_WEBUI_CSS_CROS_COLORS"
file="css/cros_colors.css" type="chrome_html"
compress="gzip" />
<structure name="IDR_WEBUI_HTML_CHROMEOS_ONC_MOJO" <structure name="IDR_WEBUI_HTML_CHROMEOS_ONC_MOJO"
file="html/chromeos/onc_mojo.html" type="chrome_html" file="html/chromeos/onc_mojo.html" type="chrome_html"
compress="gzip" /> compress="gzip" />
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment