[cleanup] Rename theme_colors.css and application_color_tokens.css

This renames these two files to better reflect the current content:

theme_colors -> design_system_tokens
application_color_tokens -> application_tokens

Bug: 390330089
Change-Id: Iceac9fc91fb774912236715643f831caad035ed2
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6205768
Reviewed-by: Benedikt Meurer <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: ktran

config/gni/devtools_grd_files.gni

@@ -291,7 +291,7 @@ grd_files_release_sources = [
   "front_end/Images/width.svg",
   "front_end/Images/zoom-in.svg",
   "front_end/Tests.js",
-  "front_end/application_color_tokens.css",
+  "front_end/application_tokens.css",
   "front_end/core/common/common.js",
   "front_end/core/dom_extension/dom_extension.js",
   "front_end/core/host/host.js",
@@ -303,6 +303,7 @@ grd_files_release_sources = [
   "front_end/core/root/root.js",
   "front_end/core/sdk/sdk-meta.js",
   "front_end/core/sdk/sdk.js",
+  "front_end/design_system_tokens.css",
   "front_end/device_mode_emulation_frame.html",
   "front_end/devtools_app.html",
   "front_end/devtools_compatibility.js",
@@ -674,7 +675,6 @@ grd_files_release_sources = [
   "front_end/services/trace_bounds/trace_bounds.js",
   "front_end/services/tracing/tracing.js",
   "front_end/services/window_bounds/window_bounds.js",
-  "front_end/theme_colors.css",
   "front_end/third_party/acorn/acorn.js",
   "front_end/third_party/chromium/client-variations/client-variations.js",
   "front_end/third_party/codemirror.next/chunk/angular.js",

docs/styleguide/ux/styles.md

@@ -8,20 +8,20 @@ We define three sets of color token types, **reference/palette tokens**,
 **system tokens**, and **application tokens**.
 
 [**Reference or palette
-tokens**](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/theme_colors.css)
+tokens**](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/design_system_tokens.css)
 (e.g. `--ref-palette-X`) are a set of base colors that get updated on [Chrome
 color theme change](###) and should not be directly used.
 
 [**System
-tokens**](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/theme_colors.css)
+tokens**](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/design_system_tokens.css)
 (e.g. `--sys-color-X`) are a set of semantic tokens (use is often clear from
 name e.g. `--sys-color-error-container`). They reference palette tokens and
 incorporate light / dark mode switches and should be used in the code directly.
 You can view all system tokens in their light and dark variant when running the
 component server with `npm run components-server` under *Theme Colors*.
 
 [**Application
-tokens**](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/application_color_tokens.css)
+tokens**](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/application_tokens.css)
 (e.g. `--app-color-X`) reference palette tokens, and add more semantic meaning
 and handle exception cases, where system tokens are not enough. Should be
 defined for both light and dark modes. An example CL that adds application
@@ -51,7 +51,7 @@ Chrome's theming differentiates between two *default* color schemes (a blue
 **default** and a **grey default**), and a number of **accent** color schemes
 (blue, purple, yellow, and so on). In DevTools, the default schemes are defined
 as `baseline-grayscale` and `baseline-default` css classes in
-[themeColors.css](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/theme_colors.css).
+[themeColors.css](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/design_system_tokens.css).
 The accent color schemes don't require extra color definitions and will adapt
 with the reference colors.
 
@@ -317,18 +317,18 @@ example CL that adds application tokens can be found
 ### Resources
 
   * [Reference color
-    tokens](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/theme_colors.css)
+    tokens](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/design_system_tokens.css)
   * [System color
-    tokens](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/theme_colors.css)
+    tokens](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/design_system_tokens.css)
   * [Application color
-    tokens](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/application_color_tokens_.css)
+    tokens](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/application_tokens_.css)
   * [Color definitions in the CDT
     Figma](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/CDT-design-kit?node-id=337-5217&m=dev)
 
 ## Sizes
 
 [**System
-tokens**](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/theme_colors.css)
+tokens**](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/design_system_tokens.css)
 include a set of tokens to be used for sizes, ranging from `--sys-size-1` (which
 corresponds to a single pixel) to `--sys-size-41` (which corresponds to the HD
 resolution width).

front_end/BUILD.gn

@@ -35,9 +35,9 @@ group("front_end") {
 
 copy_to_gen("integration_test_runner-gen") {
   sources = [
-    "application_color_tokens.css",
+    "application_tokens.css",
+    "design_system_tokens.css",
     "integration_test_runner.html",
-    "theme_colors.css",
   ]
 }
 

front_end/application_color_tokens.css front_end/application_tokens.cssfront_end/application_color_tokens.css renamed to front_end/application_tokens.css

@@ -17,6 +17,6 @@
 <meta http-equiv="Content-Security-Policy" content="object-src 'none'; script-src 'self' https://chrome-devtools-frontend.appspot.com">
 <meta name="referrer" content="no-referrer">
 <script type="module" src="./entrypoints/%ENTRYPOINT_NAME%/%ENTRYPOINT_NAME%.js"></script>
-<link href="./application_color_tokens.css" rel="stylesheet">
-<link href="./theme_colors.css" rel="stylesheet">
+<link href="./application_tokens.css" rel="stylesheet">
+<link href="./design_system_tokens.css" rel="stylesheet">
 <body class="undocked" id="-blink-dev-tools">

front_end/theme_colors.css front_end/design_system_tokens.cssfront_end/theme_colors.css renamed to front_end/design_system_tokens.css

@@ -143,8 +143,8 @@ server.once('error', error => {
 // All paths that are injected globally into real DevTools, so we do the same
 // to avoid styles being broken in the component server.
 const styleSheetPaths = [
-  'front_end/theme_colors.css',
-  'front_end/application_color_tokens.css',
+  'front_end/design_system_tokens.css',
+  'front_end/application_tokens.css',
   'front_end/ui/components/buttons/textButton.css',
   'front_end/ui/legacy/inspectorCommon.css',
   'front_end/ui/components/docs/component_docs_styles.css',

front_end/entrypoint_template.html

@@ -55,21 +55,21 @@ const COLOR_INDICATOR_REGEXES = new Set([
 
 const CUSTOM_VARIABLE_OVERRIDE_PREFIX = '--override-';
 
-const applicationColorsPath = join(
+const applicationTokensPath = join(
     import.meta.dirname,
     '..',
     '..',
     '..',
     'front_end',
-    'application_color_tokens.css',
+    'application_tokens.css',
 );
-const themeColorsPath = join(
+const designSystemTokensPath = join(
     import.meta.dirname,
     '..',
     '..',
     '..',
     'front_end',
-    'theme_colors.css',
+    'design_system_tokens.css',
 );
 const inspectorCommonPath = join(
   import.meta.dirname,
@@ -98,9 +98,9 @@ function getRootVariableDeclarationsFromCSSFile(filePath) {
 }
 
 const DEFINED_APPLICATION_COLOR_VARIABLES =
-  getRootVariableDeclarationsFromCSSFile(applicationColorsPath);
+  getRootVariableDeclarationsFromCSSFile(applicationTokensPath);
 const DEFINED_THEME_COLOR_VARIABLES =
-  getRootVariableDeclarationsFromCSSFile(themeColorsPath);
+  getRootVariableDeclarationsFromCSSFile(designSystemTokensPath);
 const DEFINED_INSPECTOR_STYLE_VARIABLES =
   getRootVariableDeclarationsFromCSSFile(inspectorCommonPath);
 const ALL_DEFINED_VARIABLES = new Set([

scripts/component_server/server.js

@@ -84,8 +84,8 @@ module.exports = function(config: any) {
       ...tests.map(pattern => ({pattern: `${pattern}.map`, served: true, included: false, watched: true})),
       {pattern: path.join(GEN_DIR, 'front_end/Images/*.{svg,png}'), served: true, included: false},
       {pattern: path.join(GEN_DIR, 'front_end/core/i18n/locales/*.json'), served: true, included: false},
-      {pattern: path.join(GEN_DIR, 'front_end/theme_colors.css'), served: true, included: true},
-      {pattern: path.join(GEN_DIR, 'front_end/application_color_tokens.css'), served: true, included: true},
+      {pattern: path.join(GEN_DIR, 'front_end/design_system_tokens.css'), served: true, included: true},
+      {pattern: path.join(GEN_DIR, 'front_end/application_tokens.css'), served: true, included: true},
       {pattern: path.join(GEN_DIR, 'front_end/**/*.css'), served: true, included: false},
       {pattern: path.join(GEN_DIR, 'front_end/**/*.js'), served: true, included: false},
       {pattern: path.join(GEN_DIR, 'front_end/**/*.js.map'), served: true, included: false, watched: true},