Semi-automatically clean up unused css variables

..using gpaste/4761439898959872

Bug:none
Change-Id: I99c56343825e27cbf29b9e285f5fd4b8132aafa4
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6198364
Reviewed-by: Kim-Anh Tran <[email protected]>
Commit-Queue: Kateryna Prokopenko <[email protected]>
Auto-Submit: Kateryna Prokopenko <[email protected]>

Author: Kateryna Prokopenko

front_end/application_color_tokens.css

@@ -7,9 +7,6 @@
   --icon-action: var(--sys-color-primary-bright);
   --icon-arrow-main-thread: var(--sys-color-primary-bright);
   --icon-checkmark-green: var(--sys-color-green-bright);
-  --icon-checkmark-purple: var(--sys-color-purple-bright);
-  --icon-checkmark-red: var(--sys-color-error-bright);
-  --icon-contrast-issue: var(--sys-color-error-bright);
   --icon-default: var(--sys-color-on-surface-subtle);
   --icon-default-hover: var(--sys-color-on-surface);
   --icon-disabled: var(--sys-color-state-disabled);
@@ -27,7 +24,6 @@
   --icon-folder-primary: var(--sys-color-on-surface-subtle);
   --icon-folder-deployed: var(--sys-color-primary-bright);
   --icon-folder-workspace: var(--sys-color-orange);
-  --icon-force-white: var(--sys-color-on-tonal-container);
   --icon-gap-focus-selected: var(--sys-color-tonal-container);
   --icon-gap-default: var(--sys-color-cdt-base-container);
   --icon-gap-inactive: var(--sys-color-neutral-container);
@@ -38,14 +34,10 @@
   --icon-link: var(--sys-color-primary-bright);
   --icon-no-request: var(--sys-color-orange-bright);
   --icon-primary: var(--sys-color-primary-bright);
-  --icon-record: var(--sys-color-error-bright);
   --icon-request-response: var(--sys-color-primary-bright);
   --icon-request: var(--sys-color-on-surface-subtle);
-  --icon-security-lock: var(--sys-color-green-bright);
   --icon-css: var(--sys-color-purple-bright);
   --icon-css-hover: var(--sys-color-purple);
-  --icon-status-code-ok: var(--sys-color-tertiary-bright);
-  --icon-stop: var(--sys-color-error-bright);
   --icon-toggled: var(--sys-color-primary-bright);
   --icon-warning: var(--sys-color-orange-bright);
   --ui-text: var(--sys-color-on-surface-subtle);
@@ -68,84 +60,33 @@
   --color-background-inverted-opacity-50: rgb(0 0 0 / 50%);
   --color-background-opacity-50: rgb(255 255 255 / 50%);
   --color-background-opacity-80: rgb(255 255 255 / 80%);
-  --color-background-elevation-0: rgb(248 249 249);
   --color-background-elevation-1: rgb(241 243 244);
   --color-background-elevation-2: rgb(222 225 230);
   /** Used when the elevation is visible only on dark theme */
   --color-background-elevation-dark-only: var(--color-background);
-  --color-background-highlight: rgb(218 220 224);
   /** To draw grid lines behind elements */
   --divider-line: rgb(0 0 0 / 10%);
-
-  /**
-   * When hovering over an element and the background should be a little
-   * bit darker. For example, when hovering over a node in the flame chart
-   * tree in the performance panel. This color is intentionally opaque,
-   * since the color of the underlying element should still be dominant.
-   */
-  --color-background-hover-overlay: rgb(56 121 217 / 10%);
-  /**
-   * Used when selecting a range of a section, for example when
-   * selecting a range in the performance panel timeline.
-   */
-  --color-selection-highlight: rgb(56 121 217 / 30%);
-  --color-selection-highlight-border: rgb(16 81 177);
-  /**
-   * When showing matching elements of a particular search filter (for example
-   * when showing all matching css selectors/rules in the elements style
-   * pane). The highlight is intended to be used on top of the original background
-   * color and text color.
-   */
-  --color-match-highlight: rgb(56 121 217 / 20%);
   --color-text-primary: rgb(32 33 36);
   --color-text-secondary: rgb(95 99 104);
-  --color-text-secondary-selected: rgb(188 185 182);
   --color-text-disabled: rgb(128 134 139);
-  --color-details-hairline: rgb(202 205 209);
-  --color-details-hairline-light: rgb(223 225 227);
-  --color-accent-red: rgb(217 48 37);
   --color-red: rgb(238 68 47);
-  --color-accent-green: rgb(24 128 56);
-  --color-green: rgb(99 172 190);
-  --color-link: var(--color-primary-old);
-  --color-syntax-1: rgb(200 0 0);
-  --color-syntax-2: rgb(136 18 128);
-  --color-syntax-3: rgb(26 26 166);
-  --color-syntax-4: rgb(153 69 0);
-  --color-syntax-5: rgb(132 240 255);
-  --color-syntax-6: rgb(35 110 37);
-  --color-syntax-7: rgb(48 57 66);
-  --color-syntax-8: rgb(168 148 166);
   --drop-shadow:
     0 0 0 1px rgb(0 0 0 / 5%),
     0 2px 4px rgb(0 0 0 / 20%),
     0 2px 6px rgb(0 0 0 / 10%);
   --drop-shadow-depth-1:
     0 1px 2px rgb(60 64 67 / 30%),
     0 1px 3px 1px rgb(60 64 67 / 15%);
-  --drop-shadow-depth-2:
-    0 1px 2px rgb(60 64 67 / 30%),
-    0 2px 6px 2px rgb(60 64 67 / 15%);
   --drop-shadow-depth-3:
     0 4px 8px 3px rgb(60 64 67 / 15%),
     0 1px 3px rgb(60 64 67 / 30%);
-  --drop-shadow-depth-4:
-    0 6px 10px 4px rgb(60 64 67 / 15%),
-    0 2px 3px rgb(60 64 67 / 30%);
-  --drop-shadow-depth-5:
-    0 8px 12px 6px rgb(60 64 67 / 15%),
-    0 4px 4px rgb(60 64 67 / 30%);
   --box-shadow-outline-color: rgb(0 0 0 / 50%);
   /** These are the colors of the native Mac scrollbars */
   --color-scrollbar-mac: rgb(143 143 143 / 60%);
   --color-scrollbar-mac-hover: rgb(64 64 64 / 60%);
   /** These colors are used on all non-Mac platforms for scrollbars */
   --color-scrollbar-other: rgb(0 0 0 / 50%);
   --color-scrollbar-other-hover: rgb(0 0 0 / 50%);
-  /** These colors have the same value in dark mode */
-  --lighthouse-red: rgb(255 78 67);
-  --lighthouse-orange: rgb(255 164 0);
-  --lighthouse-green: rgb(12 206 106);
   /** The colors are for issue icons and related highlights */
   --issue-color-red: rgb(235 57 65);
   --issue-color-yellow: rgb(242 153 0);
@@ -157,7 +98,6 @@
   --color-error-text: #f00;
 
   /* Colors used by the code editor */
-  --color-selected-option: #fff;
   --color-continue-to-location: var(--ref-palette-blue90);
   --color-continue-to-location-hover: var(--ref-palette-blue80);
   --color-continue-to-location-hover-border: var(--ref-palette-blue70);
@@ -170,10 +110,6 @@
 
   /* Color tokens for icons */
   --color-primary: rgb(11 87 208);
-  --color-orange: rgb(169 91 18);
-  --color-orange-bright: rgb(232 143 33);
-  --color-error: rgb(179 38 30);
-  --color-error-bright: rgb(220 54 46);
 
     /* Color for strokestyle of canvas in flame chart */
   /* It is the same color as sys-color-primary but with a 10% opacity */
@@ -258,7 +194,6 @@
   /**
    * Colors for performance panel annotations list in sidebar.
    */
-  --app-color-performance-sidebar-entry-label: var(--ref-palette-purple80);
   --app-color-performance-sidebar-time-range: var(--ref-palette-pink60);
   --app-color-performance-sidebar-label-text-dark: var(--ref-palette-neutral10);
   --app-color-performance-sidebar-label-text-light: var(--ref-palette-neutral100);
@@ -269,11 +204,6 @@
   --app-color-card-background: var(--sys-color-base-container-elevated);
   --app-color-card-divider: color-mix(in srgb, var(--ref-palette-neutral0) 6%, transparent);
 
-  /**
-   * Color for scrollable area shadow gradient
-   */
-  --app-color-scroll-area-shadow-start: color-mix(in srgb, var(--ref-palette-neutral0) 30%, transparent);
-
   /**
    * Colors for element panel sidebar subtitle
    */
@@ -308,53 +238,24 @@
     --color-background-inverted-opacity-50: rgb(255 255 255 / 50%);
     --color-background-opacity-50: rgb(32 33 36 / 50%);
     --color-background-opacity-80: rgb(32 33 36 / 80%);
-    --color-background-elevation-0: rgb(32 32 35);
     --color-background-elevation-1: rgb(41 42 45);
     --color-background-elevation-2: rgb(53 54 58);
     --color-background-elevation-dark-only: var(--color-background-elevation-1);
-    --color-background-highlight: rgb(69 69 69);
     --divider-line: rgb(255 255 255 / 10%);
-    --color-background-hover-overlay: rgb(56 121 217 / 10%);
-    --color-selection-highlight: rgb(251 202 70 / 20%);
-    --color-selection-highlight-border: rgb(251 202 70);
-    --color-match-highlight: rgb(56 121 217 / 35%);
     --color-text-primary: rgb(232 234 237);
     --color-text-secondary: rgb(154 160 166);
-    --color-text-secondary-selected: rgb(188 185 182);
     --color-text-disabled: rgb(128 134 139);
-    --color-details-hairline: rgb(73 76 80);
-    --color-details-hairline-light: rgb(54 57 59);
-    --color-accent-red: rgb(242 139 130);
     --color-red: rgb(237 78 76);
-    --color-accent-green: rgb(129 201 149);
-    --color-link: var(--color-primary-old);
-    --color-syntax-1: rgb(53 212 199);
-    --color-syntax-2: rgb(93 176 215);
-    --color-syntax-3: rgb(242 151 102);
-    --color-syntax-4: rgb(155 187 220);
-    --color-syntax-5: rgb(132 240 255);
-    --color-syntax-6: rgb(171 171 171);
-    --color-syntax-7: rgb(207 208 208);
-    --color-syntax-8: rgb(93 176 215);
     --drop-shadow:
       0 0 0 1px rgb(255 255 255 / 20%),
       0 2px 4px 2px rgb(0 0 0 / 20%),
       0 2px 6px 2px rgb(0 0 0 / 10%);
     --drop-shadow-depth-1:
       0 1px 2px rgb(0 0 0 / 30%),
       0 1px 3px 1px rgb(0 0 0 / 15%);
-    --drop-shadow-depth-2:
-      0 1px 2px rgb(0 0 0 / 30%),
-      0 2px 6px 2px rgb(0 0 0 / 15%);
     --drop-shadow-depth-3:
       0 4px 8px 3px rgb(0 0 0 / 15%),
       0 1px 3px rgb(0 0 0 / 30%);
-    --drop-shadow-depth-4:
-      0 6px 10px 4px rgb(0 0 0 / 15%),
-      0 2px 3px rgb(0 0 0 / 30%);
-    --drop-shadow-depth-5:
-      0 8px 12px 6px rgb(0 0 0 / 15%),
-      0 4px 4px rgb(0 0 0 / 30%);
     --box-shadow-outline-color: rgb(0 0 0 / 50%);
     --color-scrollbar-mac: rgb(51 51 51);
     --color-scrollbar-mac-hover: rgb(75 76 79);
@@ -363,7 +264,6 @@
     --color-error-text: hsl(0deg 100% 75%);
 
     /* Colors used by the code editor */
-    --color-selected-option: #fff;
     --color-continue-to-location: var(--ref-palette-yellow30);
     --color-continue-to-location-hover: var(--ref-palette-yellow40);
     --color-continue-to-location-hover-border: var(--ref-palette-yellow50);
@@ -376,10 +276,6 @@
 
     /* Color tokens for icons */
     --color-primary: rgb(168 199 250);
-    --color-orange: rgb(255 184 113);
-    --color-orange-bright: rgb(238 152 54);
-    --color-error: rgb(242 184 181);
-    --color-error-bright: rgb(228 105 98);
 
     /* Color for strokestyle of canvas in flame chart */
     /* It is the same color as sys-color-primary but with a 10% opacity */
@@ -461,11 +357,6 @@
     --app-color-card-divider: color-mix(in srgb, var(--ref-palette-neutral100) 10%, transparent);
     --app-color-card-background: var(--sys-color-surface2);
 
-    /**
-    * Color for scrollable area shadow gradient
-    */
-    --app-color-scroll-area-shadow-start: color-mix(in srgb, var(--ref-palette-neutral100) 30%, transparent);
-
     /**
      * Colors for element panel sidebar subtitle
      */

front_end/ui/legacy/inspectorCommon.css

@@ -25,23 +25,11 @@
    * https://crbug.com/1122511
    */
   --legacy-accent-color: #1a73e8;
-  --legacy-accent-fg-color: #1a73e8;
-  --legacy-accent-color-hover: #3b86e8;
-  --legacy-accent-fg-color-hover: #1567d3;
-  --legacy-active-control-bg-color: #5a5a5a;
-  --legacy-focus-bg-color: hsl(214deg 40% 92%);
   --legacy-focus-ring-inactive-shadow-color: #e0e0e0;
   --legacy-input-validation-error: #db1600;
-  --legacy-toolbar-hover-bg-color: #eaeaea;
-  --legacy-selection-fg-color: #fff;
   --legacy-selection-bg-color: var(--legacy-accent-color);
-  --legacy-selection-inactive-fg-color: #5a5a5a;
-  --legacy-selection-inactive-bg-color: #dadada;
-  --legacy-divider-border: 1px solid var(--sys-color-divider);
   --legacy-focus-ring-inactive-shadow: 0 0 0 1px var(--legacy-focus-ring-inactive-shadow-color);
   --legacy-focus-ring-active-shadow: 0 0 0 1px var(--legacy-accent-color);
-  --legacy-item-selection-bg-color: #cfe8fc;
-  --legacy-item-selection-inactive-bg-color: #e0e0e0;
   --monospace-font-size: 10px;
   --monospace-font-family: monospace;
   --source-code-font-size: 11px;
@@ -50,8 +38,6 @@
   --sys-motion-duration-medium2: 300ms;
   --sys-motion-duration-long2: 500ms;
   --sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
-  --sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
-  --sys-motion-easing-emphasized-accelerate: cubic-bezier(0.2, 0, 0, 1);
 
   /* This will be overridden by the platform-X classes that get
    * added to the html tag on load, but is here as a safe
@@ -72,19 +58,8 @@
    * https://crbug.com/1122511
    */
   --legacy-accent-color: #0e639c;
-  --legacy-accent-fg-color: #ccc;
-  --legacy-accent-fg-color-hover: #fff;
-  --legacy-accent-color-hover: rgb(17 119 187);
-  --legacy-active-control-bg-color: #cdcdcd;
-  --legacy-focus-bg-color: hsl(214deg 19% 27%);
   --legacy-focus-ring-inactive-shadow-color: #5a5a5a;
-  --legacy-toolbar-hover-bg-color: #202020;
-  --legacy-selection-fg-color: #cdcdcd;
-  --legacy-selection-inactive-fg-color: #cdcdcd;
-  --legacy-selection-inactive-bg-color: hsl(0deg 0% 28%);
   --legacy-focus-ring-inactive-shadow: 0 0 0 1px var(--legacy-focus-ring-inactive-shadow-color);
-  --legacy-item-selection-bg-color: hsl(207deg 88% 22%);
-  --legacy-item-selection-inactive-bg-color: #454545;
 }
 
 body {
@@ -682,11 +657,6 @@ button.link:focus-visible {
   border-radius: var(--sys-shape-corner-full);
 }
 
-.theme-with-dark-background button.link:focus-visible,
-:host-context(.theme-with-dark-background) button.link:focus-visible {
-  --override-link-focus-background-color: rgb(230 230 230 / 8%);
-}
-
 @media (forced-colors: active) {
   .dimmed,
   select:disabled {
@@ -756,7 +726,6 @@ input.custom-search-input::-webkit-search-cancel-button:hover {
 
 :host-context(.theme-with-dark-background) devtools-adorner {
   --override-adorner-border-color: var(--sys-color-tonal-outline);
-  --override-adorner-focus-border-color: var(--sys-color-state-focus-ring);
   --override-adorner-active-background-color: var(--sys-color-state-riple-neutral-on-subtle);
 }