zzos/react-native-devtools-frontend
1
0
Fork 0
mirror of https://github.com/react/react-native-devtools-frontend.git synced 2026-09-28 13:13:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add part of Material design tokens

Browse Source 
Bug:none
Change-Id: Iebf1a6a5190df67bea3c3dbda25c28718a111510
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5366404
Commit-Queue: Kateryna Prokopenko <kprokopenko@chromium.org>
Auto-Submit: Kateryna Prokopenko <kprokopenko@chromium.org>
Reviewed-by: Benedikt Meurer <bmeurer@chromium.org>
This commit is contained in:
Kateryna Prokopenko
2024-03-18 14:44:21 +00:00
committed by Devtools-frontend LUCI CQ
parent cdec4e2b73
commit b63b015fbd
5 changed files with 64 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/gni/devtools_grd_files.gni
+1
View File
@@ -2122,6 +2122,7 @@ grd_files_debug_sources = [
"front_end/ui/legacy/components/utils/imagePreview.css.js",
"front_end/ui/legacy/components/utils/jsUtils.css.js",
"front_end/ui/legacy/confirmDialog.css.legacy.js",
"front_end/ui/legacy/designTokens.css.legacy.js",
"front_end/ui/legacy/dialog.css.legacy.js",
"front_end/ui/legacy/dropTarget.css.legacy.js",
"front_end/ui/legacy/emptyWidget.css.js",
front_end/ui/legacy/BUILD.gn
+2
View File
@@ -21,6 +21,7 @@ generate_css("legacy_css_files") {
"checkboxTextLabel.css",
"closeButton.css",
"confirmDialog.css",
"designTokens.css",
"dialog.css",
"dropTarget.css",
"emptyWidget.css",
@@ -63,6 +64,7 @@ generate_css("legacy_css_files") {
copy_to_gen("copy_stylesheets_for_server") {
sources = [
"applicationColorTokens.css",
"designTokens.css",
"inspectorCommon.css",
"inspectorSyntaxHighlight.css",
"textButton.css",
front_end/ui/legacy/designTokens.css
+58
View File
@@ -0,0 +1,58 @@
/*
* Copyright 2024 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.
*/
:root {
--ref-typeface-weight-regular: 400;
--ref-typeface-weight-medium: 500;
--ref-typeface-weight-bold: 700;
--sys-size-1: 1px;
--sys-size-2: 0.125rem;
--sys-size-3: 0.25rem;
--sys-size-4: 0.375rem;
--sys-size-5: 0.5rem;
--sys-size-6: 0.75rem;
--sys-size-7: 0.875rem;
--sys-size-8: 1rem;
--sys-size-9: 1.25rem;
--sys-size-10: 1.375rem;
--sys-size-11: 1.5rem;
--sys-size-12: 1.75rem;
--sys-size-13: 2rem;
--sys-size-14: 2.5rem;
--sys-shape-corner-extra-small: 4px;
--sys-shape-corner-small: 8px;
--sys-shape-corner-medium-small: 12px;
--sys-shape-corner-medium: 16px;
--sys-shape-corner-large: 24px;
--sys-shape-corner-full: 9999px;
/* weight size/line-height */
--sys-typescale-body1-medium: var(--ref-typeface-weight-medium) var(--sys-typescale-body1-size)/var(--sys-typescale-body1-line-height);
--sys-typescale-body2-medium: var(--ref-typeface-weight-medium) var(--sys-typescale-body2-size)/var(--sys-typescale-body2-line-height);
--sys-typescale-body3-medium: var(--ref-typeface-weight-medium) var(--sys-typescale-body3-size)/var(--sys-typescale-body3-line-height);
--sys-typescale-body4-medium: var(--ref-typeface-weight-medium) var(--sys-typescale-body4-size)/var(--sys-typescale-body4-line-height);
--sys-typescale-body5-medium: var(--ref-typeface-weight-medium) var(--sys-typescale-body5-size)/var(--sys-typescale-body5-line-height);
--sys-typescale-headline1-size: 24px;
--sys-typescale-headline2-size: 20px;
--sys-typescale-headline3-size: 18px;
--sys-typescale-headline4-size: 16px;
--sys-typescale-headline5-size: 14px;
--sys-typescale-body1-size: 16px;
--sys-typescale-body2-size: 14px;
--sys-typescale-body3-size: 13px;
--sys-typescale-body4-size: 12px;
--sys-typescale-body5-size: 11px;
--sys-typescale-headline1-line-height: 32px;
--sys-typescale-headline2-line-height: 24px;
--sys-typescale-headline3-line-height: 24px;
--sys-typescale-headline4-line-height: 24px;
--sys-typescale-headline5-line-height: 20px;
--sys-typescale-body1-line-height: 24px;
--sys-typescale-body2-line-height: 20px;
--sys-typescale-body3-line-height: 20px;
--sys-typescale-body4-line-height: 16px;
--sys-typescale-body5-line-height: 16px;
}
front_end/ui/legacy/utils/inject-core-styles.ts
+2
View File
@@ -3,6 +3,7 @@
// found in the LICENSE file.
import applicationColorTokensStyles from '../applicationColorTokens.css.legacy.js';
import designTokensStyles from '../designTokens.css.legacy.js';
import inspectorCommonStyles from '../inspectorCommon.css.legacy.js';
import textButtonStyles from '../textButton.css.legacy.js';
import * as ThemeSupport from '../theme_support/theme_support.js';
@@ -11,6 +12,7 @@ import tokens from '../tokens.css.legacy.js';
export function injectCoreStyles(root: Element|ShadowRoot): void {
ThemeSupport.ThemeSupport.instance().appendStyle(root, applicationColorTokensStyles);
ThemeSupport.ThemeSupport.instance().appendStyle(root, designTokensStyles);
ThemeSupport.ThemeSupport.instance().appendStyle(root, inspectorCommonStyles);
ThemeSupport.ThemeSupport.instance().appendStyle(root, textButtonStyles);
ThemeSupport.ThemeSupport.instance().appendStyle(root, themeColorsStyles);
scripts/component_server/server.js
+1
View File
@@ -102,6 +102,7 @@ const styleSheetPaths = [
'front_end/ui/legacy/themeColors.css',
'front_end/ui/legacy/tokens.css',
'front_end/ui/legacy/applicationColorTokens.css',
'front_end/ui/legacy/designTokens.css',
'front_end/ui/legacy/inspectorCommon.css',
'front_end/ui/legacy/inspectorSyntaxHighlight.css',
'front_end/ui/legacy/textButton.css',