]> source.dussan.org Git - sonarqube.git/commitdiff
SONAR-23205 Remove legacy CSS custom properties
authorJeremy Davis <jeremy.davis@sonarsource.com>
Tue, 15 Oct 2024 14:33:22 +0000 (16:33 +0200)
committersonartech <sonartech@sonarsource.com>
Tue, 22 Oct 2024 20:03:09 +0000 (20:03 +0000)
38 files changed:
server/sonar-web/config/utils.js
server/sonar-web/design-system/package.json
server/sonar-web/design-system/vite.config.js
server/sonar-web/package.json
server/sonar-web/src/main/js/app/styles/init/base.css
server/sonar-web/src/main/js/app/styles/print.css
server/sonar-web/src/main/js/app/styles/style.css
server/sonar-web/src/main/js/app/theme-old.js [deleted file]
server/sonar-web/src/main/js/app/theme.ts [deleted file]
server/sonar-web/src/main/js/apps/account/profile/UserExternalIdentity.tsx
server/sonar-web/src/main/js/apps/coding-rules/styles.css
server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/SnippetViewer.css
server/sonar-web/src/main/js/apps/issues/styles.css
server/sonar-web/src/main/js/apps/overview/styles.css
server/sonar-web/src/main/js/apps/permissions/styles.css
server/sonar-web/src/main/js/apps/projects/styles.css
server/sonar-web/src/main/js/apps/quality-gates/styles.css
server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotPrimaryLocationBox.css
server/sonar-web/src/main/js/apps/settings/styles.css
server/sonar-web/src/main/js/apps/system/styles.css
server/sonar-web/src/main/js/apps/users/components/UserListItemIdentity.tsx
server/sonar-web/src/main/js/apps/web-api/styles/web-api.css
server/sonar-web/src/main/js/components/SourceViewer/components/Line.css
server/sonar-web/src/main/js/components/SourceViewer/styles.css
server/sonar-web/src/main/js/components/activity-graph/DataTableModal.tsx
server/sonar-web/src/main/js/components/charts/AdvancedTimeline.css
server/sonar-web/src/main/js/components/charts/LineChart.css
server/sonar-web/src/main/js/components/controls/ScreenPositionFixer.tsx
server/sonar-web/src/main/js/components/controls/Tooltip.css
server/sonar-web/src/main/js/components/controls/Tooltip.tsx
server/sonar-web/src/main/js/components/issue/Issue.css
server/sonar-web/src/main/js/components/locations/SingleFileLocationNavigator.css
server/sonar-web/src/main/js/components/search-navigator.css
server/sonar-web/src/main/js/components/ui/Rating.css
server/sonar-web/src/main/js/components/ui/popups.css
server/sonar-web/src/main/js/helpers/constants.ts
server/sonar-web/src/main/js/sonar-aligned/components/a11y/A11ySkipLinks.css
server/sonar-web/yarn.lock

index 537ecadf68b4e7eb4c4005b63e310138600d27be..74acbb3a019d2a312134a6d56e0b9c9984133f56 100644 (file)
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-/* eslint-disable no-console */
-function getCustomProperties() {
-  const customProperties = {};
-  const parseCustomProperties = (theme) => {
-    Object.keys(theme).forEach((key) => {
-      if (typeof theme[key] === 'object') {
-        parseCustomProperties(theme[key]);
-      } else if (typeof theme[key] === 'string') {
-        if (!customProperties[`--${key}`]) {
-          customProperties[`--${key}`] = theme[key];
-        } else {
-          console.error(
-            `Custom CSS property "${key}" already exists with value "${
-              customProperties[`--${key}`]
-            }".`,
-          );
-          process.exit(1);
-        }
-      }
-    });
-  };
-  parseCustomProperties(require('../src/main/js/app/theme-old'));
-
-  return customProperties;
-}
 
 // See https://github.com/evanw/esbuild/issues/337
 function importAsGlobals(mapping) {
@@ -83,7 +58,6 @@ function importAsGlobals(mapping) {
 }
 
 module.exports = {
-  getCustomProperties,
   importAsGlobals,
   // NOTE: esbuild will transpile the _syntax_ down to what the TARGET_BROWSERS understand.
   // It will _not_, however, polyfill missing API methods, such as String.prototype.replaceAll
index cf7cb0ad226b51d5858685ba275e9c6d994d1061..70405278cac3bcb6cdbfd39c91d99a35bba9f437 100644 (file)
@@ -50,7 +50,6 @@
     "jest": "29.7.0",
     "postcss": "8.4.47",
     "postcss-calc": "10.0.2",
-    "postcss-custom-properties": "12.1.11",
     "prettier": "3.3.3",
     "prettier-plugin-organize-imports": "4.1.0",
     "twin.macro": "3.4.1",
index 7267ded8d441169e0fceafaaff2a82a21c3e36ab..47300754baeb2096ba4abedfcc32e9a1a3aa4e6b 100644 (file)
@@ -21,16 +21,12 @@ import react from '@vitejs/plugin-react';
 import autoprefixer from 'autoprefixer';
 import { resolve } from 'node:path';
 import postCssCalc from 'postcss-calc';
-import postCssCustomProperties from 'postcss-custom-properties';
 import tailwind from 'tailwindcss';
 import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
-import { getCustomProperties } from '../config/utils';
 import babelConfig from './babel.config';
 import * as packageJson from './package.json';
 
-const customProperties = getCustomProperties();
-
 // https://vitejs.dev/config/
 export default defineConfig({
   build: {
@@ -47,15 +43,7 @@ export default defineConfig({
   },
   css: {
     postcss: {
-      plugins: [
-        tailwind('../tailwind.config.js'),
-        autoprefixer,
-        postCssCustomProperties({
-          importFrom: { customProperties },
-          preserve: false,
-        }),
-        postCssCalc,
-      ],
+      plugins: [tailwind('../tailwind.config.js'), autoprefixer, postCssCalc],
     },
   },
   esbuild: {
index 8ef994a6cfa415c40babaf0879043a5cb4c8b174..b8ccadcbde1c54c563dceac08c5734804dcffb3d 100644 (file)
     "path-browserify": "1.0.1",
     "postcss": "8.4.47",
     "postcss-calc": "10.0.2",
-    "postcss-custom-properties": "12.1.11",
     "prettier": "3.3.3",
     "prettier-plugin-organize-imports": "4.1.0",
     "rollup-plugin-visualizer": "5.12.0",
index a7f14eca98506ab8d27ea3e58dba7def1dfec7a4..5267e737eeac1044ccc2b29ea7f82fff86682d3c 100644 (file)
@@ -106,8 +106,8 @@ code,
 kbd,
 samp,
 tt {
-  font-family: var(--sourceCodeFontFamily);
-  font-size: var(--smallFontSize);
+  font-family: Consolas, 'Ubuntu Mono', 'Liberation Mono', Menlo, Courier, monospace;
+  font-size: 12px;
   line-height: 18px;
 }
 
@@ -122,5 +122,5 @@ hr {
   padding: 0;
   height: 1px;
   border: none;
-  background-color: var(--barBorderColor);
+  background-color: #e6e6e6;
 }
index 94bdd0d27576ffb3f05895b05ec0128f672449bb..8aa676399087432b46b28dd69e3296bb2ea794a5 100644 (file)
@@ -23,7 +23,7 @@
   }
 
   a {
-    color: var(--baseFontColor);
+    color: #333;
     border-bottom: none;
   }
 
index b734d42825d59dc774bffa9754ff385b60e7f2b3..5a2c6881dfa27897db829f9a5f5ada9a8f782eca 100644 (file)
@@ -49,7 +49,7 @@
 }
 
 .markdown h2 {
-  font-size: var(--bigFontSize);
+  font-size: 16px;
   font-weight: 400;
 }
 
@@ -57,7 +57,7 @@
 .markdown h4,
 .markdown h5,
 .markdown h6 {
-  font-size: var(--baseFontSize);
+  font-size: 13px;
   font-weight: 600;
 }
 
@@ -85,7 +85,7 @@
 
 .rule-desc h5,
 .rule-desc h6 {
-  font-size: var(--baseFontSize);
+  font-size: 13px;
   font-weight: 600;
 }
 
 .markdown pre,
 .rule-desc code,
 .markdown code {
-  font-family: var(--sourceCodeFontFamily);
-  font-size: var(--smallFontSize);
+  font-family: Consolas, 'Ubuntu Mono', 'Liberation Mono', Menlo, Courier, monospace;
+  font-size: 12px;
 }
 
 .rule-desc pre,
 .markdown pre {
-  background-color: var(--codeBackground);
+  background-color: #f5f5f5;
   border-radius: 8px;
-  border: 1px solid var(--codeBorder);
-  padding: calc(2 * var(--gridSize));
+  border: 1px solid #e6e6e6;
+  padding: calc(2 * 8px);
   margin-top: 0;
   margin-bottom: 0;
   overflow-x: auto;
@@ -153,14 +153,14 @@ code.rule {
 .markdown table {
   min-width: 50%;
   border-collapse: collapse;
-  border: 1px solid var(--barBorderColor);
+  border: 1px solid #e6e6e6;
 }
 
 .rule-desc th,
 .markdown th {
   padding: 5px 10px;
-  border: 1px solid var(--barBorderColor);
-  background-color: var(--barBackgroundColor);
+  border: 1px solid #e6e6e6;
+  background-color: #f3f3f3;
   font-weight: 600;
   text-align: center;
 }
@@ -168,5 +168,5 @@ code.rule {
 .rule-desc td,
 .markdown td {
   padding: 5px 10px;
-  border: 1px solid var(--barBorderColor);
+  border: 1px solid #e6e6e6;
 }
diff --git a/server/sonar-web/src/main/js/app/theme-old.js b/server/sonar-web/src/main/js/app/theme-old.js
deleted file mode 100644 (file)
index f6568a9..0000000
+++ /dev/null
@@ -1,274 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-// IMPORTANT: any change in this file requires restart of the dev server
-const grid = 8;
-const baseFontSizeRaw = 13;
-
-module.exports = {
-  colors: {
-    blue: '#4b9fd5',
-    veryLightBlue: '#f2faff',
-    lightBlue: '#cae3f2',
-    darkBlue: '#236a97',
-    veryDarkBlue: '#0E516F',
-    green: '#00aa00',
-    lightGreen: '#b0d513',
-    veryLightGreen: '#f5f9fc',
-    yellow: '#eabe06',
-    orange: '#ed7d20',
-    red: '#D02F3A',
-    purple: '#9139d4',
-
-    gray94: '#efefef',
-    gray80: '#cdcdcd',
-    gray71: '#b4b4b4',
-    gray67: '#aaa',
-    gray60: '#888',
-    gray52: '#525252',
-    gray40: '#404040',
-
-    disabledQualityGate: '#757575',
-
-    sizeRatingBackground: '#297BAE',
-
-    transparentWhite: 'rgba(255,255,255,0.62)',
-    transparentGray: 'rgba(200, 200, 200, 0.5)',
-    transparentBlack: 'rgba(0, 0, 0, 0.25)',
-
-    disableGrayText: '#bbb',
-    disableGrayBorder: '#ddd',
-    disableGrayBg: '#ebebeb',
-
-    barBackgroundColor: '#f3f3f3',
-    barBackgroundColorHighlight: '#f8f8f8',
-    barBorderColor: '#e6e6e6',
-
-    globalNavBarBg: '#262626',
-
-    educationPrinciplesBgColor: '#F4F6FF',
-    educationPrinciplesBorderColor: '#B0BDF9',
-
-    favoriteColor: '#e77213',
-    homepageColor: '#D86C13',
-
-    // table
-    rowHoverHighlight: '#ecf6fe',
-
-    // fonts
-    baseFontColor: '#333',
-    secondFontColor: '#656565',
-
-    // forms
-    mandatoryFieldColor: '#a4030f',
-
-    // leak
-    leakPrimaryColor: '#fbf3d5',
-    leakSecondaryColor: '#f1e8cb',
-
-    // issues
-    secondIssueBgColor: '#f8eeee',
-    issueBgColor: '#f2dede',
-    hotspotBgColor: '#eeeff4',
-    issueLocationSelected: '#f4b1b0',
-    issueLocationHighlighted: '#e1e1f2',
-    conciseIssueRed: '#d18582',
-    conciseIssueRedSelected: '#a4030f',
-
-    // coverage
-    lineCoverageRed: '#a4030f',
-    lineCoverageGreen: '#b4dd78',
-
-    // alerts
-    warningIconColor: '#eabe06',
-
-    alertBorderError: '#f4b1b0',
-    alertBackgroundError: '#f2dede',
-    alertTextError: '#862422',
-    alertIconError: '#a4030f',
-
-    alertBorderWarning: '#faebcc',
-    alertBackgroundWarning: '#fcf8e3',
-    alertTextWarning: '#6f4f17',
-    alertIconWarning: '#db781a',
-
-    alertBorderSuccess: '#d6e9c6',
-    alertBackgroundSuccess: '#dff0d8',
-    alertTextSuccess: '#215821',
-    alertIconSuccess: '#6d9867',
-
-    alertBorderInfo: '#b1dff3',
-    alertBackgroundInfo: '#d9edf7',
-    alertTextInfo: '#0e516f',
-    alertIconInfo: '#0271b9',
-
-    // badge
-    badgeBlueBackground: '#2E7CB5',
-    badgeBlueColor: '#FFFFFF',
-    badgeRedBackgroundOnIssue: '#EEC8C8',
-
-    // alm
-    azure: '#0078d7',
-    bitbucket: '#0052CC',
-    github: '#e1e4e8',
-
-    // code/pre
-    codeBackground: '#f5f5f5',
-    codeBorder: '#e6e6e6',
-    codeAdded: '#dff0d8',
-    codeRemoved: '#f2dede',
-
-    // promotion
-    darkBackground: '#292929',
-    darkBackgroundSeparator: '#413b3b',
-    darkBackgroundFontColor: '#f6f8fa',
-
-    //quality gate badges
-    badgeGreenBackground: '#f0faec',
-    badgeRedBackground: '#ffeaea',
-
-    // new color palette
-    // Some of these colors duplicate what we have above, but this will make it
-    // easier to align with the UX designers on what colors to use where.
-    // Colors that have transparency are suffixed with an "a" followed by the percentage
-    // value of the alpha channel.
-    primary: '#236a97',
-    primarya40: 'rgba(35, 107, 151, 0.40)',
-    primary400: '#297BAE',
-
-    info50: '#ECF6FE',
-    info100: '#D9EDF7',
-    info200: '#B1DFF3',
-    info400: '#4B9FD5',
-    info500: '#0271B9',
-
-    success300: '#6CD46C',
-    success300a20: 'rgba(108, 212, 108, 0.2)',
-    success500: '#008223',
-    success500a20: 'rgba(0, 138, 37, 0.20)',
-    successVariant: '#C6E056',
-    successVarianta20: 'rgba(198, 224, 86, 0.2)',
-    successVariantDark: '#809E00',
-
-    warning: '#B95E04',
-    warningVariant: '#F4D348',
-    warningVarianta20: 'rgba(244, 211, 72, 0.2)',
-    warningVariantDark: '#B18F00',
-    warningAccent: '#F69D53',
-    warningAccenta20: 'rgba(246, 157, 83, 0.2)',
-
-    error400: '#F0878E',
-    error400a20: 'rgba(240, 135, 142, 0.2)',
-    error500: '#D02F3A',
-    error500a20: 'rgba(208, 47, 58, 0.20)',
-    error700: '#B81723',
-
-    neutral50: '#F3F3F3',
-    neutral200: '#CCCCCC',
-    neutral600: '#666666',
-    neutral800: '#333333',
-
-    white: '#FFFFFF',
-    whitea18: 'rgba(255, 255, 255, 0.18)',
-    whitea60: 'rgba(255, 255, 255, 0.60)',
-
-    black: '#000000',
-    blacka06: 'rgba(0, 0, 0, 0.06)',
-    blacka38: 'rgba(0, 0, 0, 0.38)',
-    blacka60: 'rgba(0, 0, 0, 0.60)',
-    blacka75: 'rgba(0, 0, 0, 0.75)',
-    blacka87: 'rgba(0, 0, 0, 0.87)',
-  },
-
-  sizes: {
-    gridSize: `${grid}px`,
-
-    baseFontSize: `${baseFontSizeRaw}px`,
-    verySmallFontSize: '10px',
-    smallFontSize: '12px',
-    mediumFontSize: '14px',
-    bigFontSize: '16px',
-    veryBigFontSize: '18px',
-    hugeFontSize: '24px',
-    giganticFontSize: '36px',
-
-    hugeControlHeight: `${5 * grid}px`,
-    largeControlHeight: `${4 * grid}px`,
-    controlHeight: `${3 * grid}px`,
-    smallControlHeight: `${2.5 * grid}px`,
-    tinyControlHeight: `${2 * grid}px`,
-
-    globalNavHeight: `${6 * grid}px`,
-
-    globalNavContentHeight: `${4 * grid}px`,
-
-    pagePadding: '20px',
-  },
-
-  rawSizes: {
-    grid,
-    baseFontSizeRaw,
-    globalNavHeightRaw: 6 * grid,
-    globalNavContentHeightRaw: 4 * grid,
-    contextNavHeightRaw: 9 * grid,
-  },
-
-  fonts: {
-    baseFontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif",
-    systemFontFamily: "-apple-system,'BlinkMacSystemFont','Helvetica','Arial',sans-serif",
-    sourceCodeFontFamily: "Consolas, 'Ubuntu Mono', 'Liberation Mono', Menlo, Courier, monospace",
-  },
-
-  // z-index
-  // =======
-  //    1 -  100  for page elements (e.g. sidebars, panels)
-  //  101 -  500  for generic page fixed elements (e.g. navigation, workspace)
-  //  501 - 3000  for page ui elements
-  // 3001 - 8000  for generic ui elements (e.g. dropdowns, tooltips)
-  zIndexes: {
-    // common
-    aboveNormalZIndex: '3',
-    normalZIndex: '2',
-    belowNormalZIndex: '1',
-
-    // ui elements
-    pageMainZIndex: '50',
-    pageSideZIndex: '50',
-    pageHeaderZIndex: '55',
-
-    globalBannerZIndex: '60',
-
-    contextbarZIndex: '420',
-
-    tooltipZIndex: '9001',
-
-    dropdownMenuZIndex: '7500',
-
-    processContainerZIndex: '7000',
-
-    modalZIndex: '6001',
-    modalOverlayZIndex: '6000',
-
-    popupZIndex: '5000',
-  },
-
-  others: {
-    defaultShadow: '0 6px 12px rgba(0, 0, 0, 0.175)',
-  },
-};
diff --git a/server/sonar-web/src/main/js/app/theme.ts b/server/sonar-web/src/main/js/app/theme.ts
deleted file mode 100644 (file)
index f096de9..0000000
+++ /dev/null
@@ -1,277 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-// IMPORTANT: any change in this file requires restart of the dev server
-const grid = 8;
-const baseFontSizeRaw = 13;
-
-const theme = {
-  colors: {
-    blue: '#4b9fd5',
-    veryLightBlue: '#f2faff',
-    lightBlue: '#cae3f2',
-    darkBlue: '#236a97',
-    veryDarkBlue: '#0E516F',
-    green: '#00aa00',
-    lightGreen: '#b0d513',
-    veryLightGreen: '#f5f9fc',
-    yellow: '#eabe06',
-    orange: '#ed7d20',
-    red: '#D02F3A',
-    purple: '#9139d4',
-
-    gray94: '#efefef',
-    gray80: '#cdcdcd',
-    gray71: '#b4b4b4',
-    gray67: '#aaa',
-    gray60: '#888',
-    gray52: '#525252',
-    gray40: '#404040',
-
-    disabledQualityGate: '#757575',
-
-    sizeRatingBackground: '#297BAE',
-
-    transparentWhite: 'rgba(255,255,255,0.62)',
-    transparentGray: 'rgba(200, 200, 200, 0.5)',
-    transparentBlack: 'rgba(0, 0, 0, 0.25)',
-
-    disableGrayText: '#bbb',
-    disableGrayBorder: '#ddd',
-    disableGrayBg: '#ebebeb',
-
-    barBackgroundColor: '#f3f3f3',
-    barBackgroundColorHighlight: '#f8f8f8',
-    barBorderColor: '#e6e6e6',
-
-    globalNavBarBg: '#262626',
-
-    educationPrinciplesBgColor: '#F4F6FF',
-    educationPrinciplesBorderColor: '#B0BDF9',
-
-    favoriteColor: '#e77213',
-    homepageColor: '#D86C13',
-
-    // table
-    rowHoverHighlight: '#ecf6fe',
-
-    // fonts
-    baseFontColor: '#333',
-    secondFontColor: '#656565',
-
-    // forms
-    mandatoryFieldColor: '#a4030f',
-
-    // leak
-    leakPrimaryColor: '#fbf3d5',
-    leakSecondaryColor: '#f1e8cb',
-
-    // issues
-    secondIssueBgColor: '#f8eeee',
-    issueBgColor: '#f2dede',
-    hotspotBgColor: '#eeeff4',
-    issueLocationSelected: '#f4b1b0',
-    issueLocationHighlighted: '#e1e1f2',
-    conciseIssueRed: '#d18582',
-    conciseIssueRedSelected: '#a4030f',
-
-    // coverage
-    lineCoverageRed: '#a4030f',
-    lineCoverageGreen: '#b4dd78',
-
-    // alerts
-    warningIconColor: '#eabe06',
-
-    alertBorderError: '#f4b1b0',
-    alertBackgroundError: '#f2dede',
-    alertTextError: '#862422',
-    alertIconError: '#a4030f',
-
-    alertBorderWarning: '#faebcc',
-    alertBackgroundWarning: '#fcf8e3',
-    alertTextWarning: '#6f4f17',
-    alertIconWarning: '#db781a',
-
-    alertBorderSuccess: '#d6e9c6',
-    alertBackgroundSuccess: '#dff0d8',
-    alertTextSuccess: '#215821',
-    alertIconSuccess: '#6d9867',
-
-    alertBorderInfo: '#b1dff3',
-    alertBackgroundInfo: '#d9edf7',
-    alertTextInfo: '#0e516f',
-    alertIconInfo: '#0271b9',
-
-    // badge
-    badgeBlueBackground: '#2E7CB5',
-    badgeBlueColor: '#FFFFFF',
-    badgeRedBackgroundOnIssue: '#EEC8C8',
-
-    // alm
-    azure: '#0078d7',
-    bitbucket: '#0052CC',
-    github: '#e1e4e8',
-
-    // code/pre
-    codeBackground: '#f5f5f5',
-    codeBorder: '#e6e6e6',
-    codeAdded: '#dff0d8',
-    codeRemoved: '#f2dede',
-
-    // promotion
-    darkBackground: '#292929',
-    darkBackgroundSeparator: '#413b3b',
-    darkBackgroundFontColor: '#f6f8fa',
-
-    //quality gate badges
-    badgeGreenBackground: '#f0faec',
-    badgeRedBackground: '#ffeaea',
-
-    // new color palette
-    // Some of these colors duplicate what we have above, but this will make it
-    // easier to align with the UX designers on what colors to use where.
-    // Colors that have transparency are suffixed with an "a" followed by the percentage
-    // value of the alpha channel.
-    primary: '#236a97',
-    primarya40: 'rgba(35, 107, 151, 0.40)',
-    primary400: '#297BAE',
-
-    info50: '#ECF6FE',
-    info100: '#D9EDF7',
-    info200: '#B1DFF3',
-    info400: '#4B9FD5',
-    info500: '#0271B9',
-
-    success300: '#6CD46C',
-    success300a20: 'rgba(108, 212, 108, 0.2)',
-    success500: '#008223',
-    success500a20: 'rgba(0, 138, 37, 0.20)',
-    successVariant: '#C6E056',
-    successVarianta20: 'rgba(198, 224, 86, 0.2)',
-    successVariantDark: '#809E00',
-
-    warning: '#B95E04',
-    warningVariant: '#F4D348',
-    warningVarianta20: 'rgba(244, 211, 72, 0.2)',
-    warningVariantDark: '#B18F00',
-    warningAccent: '#F69D53',
-    warningAccenta20: 'rgba(246, 157, 83, 0.2)',
-
-    error400: '#F0878E',
-    error400a20: 'rgba(240, 135, 142, 0.2)',
-    error500: '#D02F3A',
-    error500a20: 'rgba(208, 47, 58, 0.20)',
-    error700: '#B81723',
-
-    neutral50: '#F3F3F3',
-    neutral200: '#CCCCCC',
-    neutral600: '#666666',
-    neutral800: '#333333',
-
-    white: '#FFFFFF',
-    whitea18: 'rgba(255, 255, 255, 0.18)',
-    whitea60: 'rgba(255, 255, 255, 0.60)',
-
-    black: '#000000',
-    blacka06: 'rgba(0, 0, 0, 0.06)',
-    blacka38: 'rgba(0, 0, 0, 0.38)',
-    blacka60: 'rgba(0, 0, 0, 0.60)',
-    blacka75: 'rgba(0, 0, 0, 0.75)',
-    blacka87: 'rgba(0, 0, 0, 0.87)',
-  },
-
-  sizes: {
-    gridSize: `${grid}px`,
-
-    baseFontSize: `${baseFontSizeRaw}px`,
-    verySmallFontSize: '10px',
-    smallFontSize: '12px',
-    mediumFontSize: '14px',
-    bigFontSize: '16px',
-    veryBigFontSize: '18px',
-    hugeFontSize: '24px',
-    giganticFontSize: '36px',
-
-    hugeControlHeight: `${5 * grid}px`,
-    largeControlHeight: `${4 * grid}px`,
-    controlHeight: `${3 * grid}px`,
-    smallControlHeight: `${2.5 * grid}px`,
-    tinyControlHeight: `${2 * grid}px`,
-
-    globalNavHeight: `${6 * grid}px`,
-
-    globalNavContentHeight: `${4 * grid}px`,
-
-    pagePadding: '20px',
-  },
-
-  rawSizes: {
-    grid,
-    baseFontSizeRaw,
-    globalNavHeightRaw: 6 * grid,
-    globalNavContentHeightRaw: 4 * grid,
-    contextNavHeightRaw: 9 * grid,
-  },
-
-  fonts: {
-    baseFontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif",
-    systemFontFamily: "-apple-system,'BlinkMacSystemFont','Helvetica','Arial',sans-serif",
-    sourceCodeFontFamily: "Consolas, 'Ubuntu Mono', 'Liberation Mono', Menlo, Courier, monospace",
-  },
-
-  // z-index
-  // =======
-  //    1 -  100  for page elements (e.g. sidebars, panels)
-  //  101 -  500  for generic page fixed elements (e.g. navigation, workspace)
-  //  501 - 3000  for page ui elements
-  // 3001 - 8000  for generic ui elements (e.g. dropdowns, tooltips)
-  zIndexes: {
-    // common
-    aboveNormalZIndex: '3',
-    normalZIndex: '2',
-    belowNormalZIndex: '1',
-
-    // ui elements
-    pageMainZIndex: '50',
-    pageSideZIndex: '50',
-    pageHeaderZIndex: '55',
-
-    globalBannerZIndex: '60',
-
-    contextbarZIndex: '420',
-
-    tooltipZIndex: '9001',
-
-    dropdownMenuZIndex: '7500',
-
-    processContainerZIndex: '7000',
-
-    modalZIndex: '6001',
-    modalOverlayZIndex: '6000',
-
-    popupZIndex: '5000',
-  },
-
-  others: {
-    defaultShadow: '0 6px 12px rgba(0, 0, 0, 0.175)',
-  },
-};
-
-export default theme;
-export const { colors, rawSizes } = theme;
index 9e0bf59e04f337813e50fd57ac46e8bc610fd190..2ed4bc8bba18681d8035484f65e0f4dc6dc757bb 100644 (file)
@@ -22,7 +22,6 @@ import { getTextColor } from 'design-system';
 import * as React from 'react';
 import { Image } from '~sonar-aligned/components/common/Image';
 import { getIdentityProviders } from '../../../api/users';
-import { colors } from '../../../app/theme';
 import { IdentityProvider } from '../../../types/types';
 import { LoggedInUser } from '../../../types/users';
 
@@ -102,7 +101,7 @@ export default class UserExternalIdentity extends React.PureComponent<
           className="sw-inline-flex sw-items-center sw-px-1"
           style={{
             backgroundColor: identityProvider.backgroundColor,
-            color: getTextColor(identityProvider.backgroundColor, colors.secondFontColor),
+            color: getTextColor(identityProvider.backgroundColor, '#656565'),
           }}
         >
           <Image
index 8cc4f50d58d8da235a6321e0f12946f785e14487..27a5e03ef1bef4eec561ff7c2715da4bf81ea603 100644 (file)
 
 .coding-rules-similar-tag-divider {
   margin-top: 6px;
-  border-top: 1px solid var(--barBorderColor);
+  border-top: 1px solid #e6e6e6;
 }
 
 .coding-rules-filter-title {
-  padding: var(--gridSize);
+  padding: 8px;
   font-size: 12px;
-  color: var(--neutral600);
+  color: #666666;
   white-space: nowrap;
   line-height: unset;
 }
@@ -74,7 +74,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-family: var(--sourceCodeFontFamily);
+  font-family: Consolas, 'Ubuntu Mono', 'Liberation Mono', Menlo, Courier, monospace;
 }
 
 .coding-rules-detail-quality-profile-parameter + .coding-rules-detail-quality-profile-parameter {
 }
 
 .coding-rules-detail-header {
-  font-size: var(--veryBigFontSize);
+  font-size: 18px;
 }
 
 .coding-rules-detail-properties {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  margin-top: var(--gridSize);
+  margin-top: 8px;
 }
 
 .coding-rules-detail-properties + .coding-rules-detail-properties {
 .coding-rules-detail-property {
   display: flex;
   align-items: center;
-  margin-right: var(--gridSize);
-  margin-bottom: var(--gridSize);
-  font-size: var(--smallFontSize);
+  margin-right: 8px;
+  margin-bottom: 8px;
+  font-size: 12px;
 }
 
 .coding-rules-detail-property.muted {
-  color: var(--neutral200);
+  color: #cccccc;
 }
 
 .coding-rules-detail-tag + .coding-rules-detail-tag {
 }
 
 .coding-rules-detail-parameter-value {
-  font-family: var(--sourceCodeFontFamily);
+  font-family: Consolas, 'Ubuntu Mono', 'Liberation Mono', Menlo, Courier, monospace;
   word-break: break-all;
 }
 
 
 .coding-rules-detail-quality-profiles td,
 .coding-rules-detail-list td {
-  border-top: 1px solid var(--barBorderColor);
+  border-top: 1px solid #e6e6e6;
 }
 
 .coding-rules-detail-quality-profiles tr:first-child td,
 }
 
 .coding-rules-detail-quality-profile-inheritance {
-  font-size: var(--smallFontSize);
+  font-size: 12px;
   font-weight: normal;
 }
 
 }
 
 .coding-rules-most-violated-projects tr:first-child + tr td {
-  border-top-color: var(--barBorderColor);
+  border-top-color: #e6e6e6;
 }
 
 .coding-rules-most-violated-projects .coding-rules-detail-list-name {
 }
 
 .coding-rule.selected {
-  border-color: var(--blue) !important;
+  border-color: #4b9fd5 !important;
 }
 
 .coding-rule + .coding-rule {
-  border-top-color: var(--barBorderColor);
+  border-top-color: #e6e6e6;
 }
 
 .coding-rule.selected + .coding-rule {
   }
 }
 .coding-rule-title {
-  line-height: calc(2.5 * var(--gridSize));
-  font-size: var(--baseFontSize);
+  line-height: calc(2.5 * 8px);
+  font-size: 13px;
 }
 
 .coding-rule-meta {
-  padding: calc(0.25 * var(--gridSize));
+  padding: calc(0.25 * 8px);
   padding-left: 30px;
-  font-size: var(--smallFontSize);
+  font-size: 12px;
 }
 
 .coding-rule-activation {
 }
 
 .notice-dot {
-  height: var(--gridSize);
-  width: var(--gridSize);
-  background-color: var(--blue);
+  height: 8px;
+  width: 8px;
+  background-color: #4b9fd5;
   border-radius: 50%;
   display: inline-block;
-  margin-left: var(--gridSize);
+  margin-left: 8px;
 }
index 46935fe2b0368001b591a6d7b14bab47b1c55435..d4e6f73f275f20e50b93bf37c8fab22faee6d263 100644 (file)
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 .snippet {
-  border: 1px solid var(--gray80);
+  border: 1px solid #cdcdcd;
   overflow-x: auto;
 }
 
 .expand-block > button {
   background: transparent;
   box-sizing: border-box;
-  color: var(--secondFontColor);
+  color: #656565;
   height: 20px;
   width: 100%;
-  padding: calc(var(--gridSize) / 4);
+  padding: calc(8px / 4);
   border: 0;
   text-align: left;
   cursor: pointer;
@@ -58,7 +58,7 @@
 .expand-block > button:hover,
 .expand-block > button:focus,
 .expand-block > button:active {
-  color: var(--darkBlue);
+  color: #236a97;
   outline: none;
 }
 
index 5b84774f3a08f1f7f82798b04e57e3c1c2d84f14..1b40c05e39eee88b46aace3c231fcafb0969df4a 100644 (file)
@@ -22,6 +22,6 @@
   vertical-align: top;
   line-height: 18px;
   box-sizing: border-box;
-  background-color: var(--issueBgColor);
+  background-color: #f2dede;
   transition: background-color 0.3s ease;
 }
index 3ca1c3ab01d659c764d3718c4f9e48417f42bb6f..69dea1f07cb78ab5a05952f21eaff16afd029dba 100644 (file)
 }
 
 .overview-measures-row + .overview-measures-row {
-  border-top: 1px solid var(--barBorderColor);
+  border-top: 1px solid #e6e6e6;
 }
 
 .overview-measures-value {
   line-height: 1;
-  font-size: var(--giganticFontSize);
+  font-size: 36px;
   white-space: nowrap;
 }
 
 .overview-measures-empty-value {
   height: 1px;
-  width: var(--bigFontSize);
-  background: var(--baseFontColor);
+  width: 16px;
+  background: #333;
 }
 
 .overview-measures-aside {
 }
 
 .overview-measures-tab {
-  width: calc(160px - calc(4 * var(--gridSize)));
+  width: calc(160px - calc(4 * 8px));
 }
 
 .overview-measures-emphasis {
-  background: var(--veryLightGreen);
+  background: #f5f9fc;
 }
 
 .overview-quality-gate-conditions-list {
 .overview-quality-gate-condition,
 .overview-quality-gate-condition:hover {
   display: block;
-  color: var(--baseFontColor);
+  color: #333;
   border: none;
   transition: background-color 0.3s ease;
 }
 
 .overview-quality-gate-condition:hover {
-  background-color: var(--rowHoverHighlight);
+  background-color: #ecf6fe;
 }
 
 /*
 }
 
 .pr-overview .overview-quality-gate-condition-error {
-  border-color: var(--red);
+  border-color: #d02f3a;
 }
 
 .pr-overview .overview-quality-gate-condition-warn {
-  border-color: var(--orange);
+  border-color: #ed7d20;
 }
 
 .pr-pverview .overview-measures-row {
 }
 
 .overview-analysis {
-  color: var(--secondFontColor);
+  color: #656565;
 }
 
 .overview-analysis + .overview-analysis {
-  margin-top: calc(2 * var(--gridSize));
+  margin-top: calc(2 * 8px);
 }
 
 .overview-activity-events {
 .overview-analysis-event.badge {
   border-radius: 2px;
   font-weight: bold;
-  font-size: var(--smallFontSize);
+  font-size: 12px;
   letter-spacing: 0;
   overflow: hidden;
   text-overflow: ellipsis;
index fc03dd53634f8810f00cfbfbc172e8453a13a13b..6cfeca044455ecd735ccc33b7edef424889e743b 100644 (file)
@@ -32,7 +32,7 @@
 .permissions-table .divider::after {
   display: block;
   content: '';
-  background: var(--barBorderColor);
+  background: #e6e6e6;
   height: 1px;
   width: 100%;
 }
index 060b18ad7df517e2fc9a023e56b127b909e5c1cf..244da4a19902bd5631d79f0b507271c75bb8e4e9 100644 (file)
@@ -19,7 +19,7 @@
  */
 
 .projects-leak-sorting-option.is-focused {
-  background-color: var(--leakSecondaryColor);
+  background-color: #f1e8cb;
 }
 
 .project-filters-list {
index 6f8292ebbc50a10a516cd371924ee0bfba0cb80e..9ed67a915d4be933ff9b15312032f740c52400aa 100644 (file)
@@ -27,7 +27,7 @@
 }
 
 .quality-gate-permissions .permission-list-item:hover {
-  background-color: var(--rowHoverHighlight);
+  background-color: #ecf6fe;
 }
 
 .quality-gate-section tbody {
 }
 
 .bordered-bottom-cayc {
-  border-bottom: 1px solid var(--whitea18);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
 }
 
 .cayc-warning-header {
-  color: var(--alertTextWarning);
+  color: #6f4f17;
 }
 
 .cayc-success-header {
-  color: var(--alertTextSuccess);
+  color: #215821;
 }
 
 .cayc-warning-description {
 }
 
 .red-text {
-  color: var(--red);
+  color: #d02f3a;
 }
 
 .green-text {
-  color: var(--success500);
+  color: #008223;
 }
 
 .strike-through {
index 62312d6700e01f3c18cb654404c008ab217b09b1..9bb20d24771e3fb8f2d61096b1035d3d4e8b0c51 100644 (file)
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 .hotspot-primary-location {
-  border: 1px solid var(--blue);
-  background-color: var(--issueBgColor);
+  border: 1px solid #4b9fd5;
+  background-color: #f2dede;
   border-left: 4px solid;
   margin: 10px 0px;
 }
 
 .hotspot-primary-location.hotspot-risk-exposure-HIGH {
-  border-left-color: var(--error400);
+  border-left-color: #f0878e;
 }
 
 .hotspot-primary-location.hotspot-risk-exposure-MEDIUM {
-  border-left-color: var(--warningAccent);
+  border-left-color: #f69d53;
 }
 
 .hotspot-primary-location.hotspot-risk-exposure-LOW {
-  border-left-color: var(--warningVariant);
+  border-left-color: #f4d348;
 }
index 6993aea752d9e4af5916f1a8f3a0cb6ae6151023..bb4b45727b6cf27c01b498db33c9f3266001cdd7 100644 (file)
 .settings-sub-categories-list > li + li {
   margin: 30px -20px 0;
   padding: 30px 20px;
-  border-top: 1px solid var(--barBorderColor);
+  border-top: 1px solid #e6e6e6;
 }
 
 .settings-sub-category-name {
   margin-bottom: 20px;
-  font-size: var(--bigFontSize);
+  font-size: 16px;
 }
 
 .settings-large-input {
index 2cfc7fbd559ac572b07bca912d2dfb9419d96fb8..371f089a5bcfa3b42c2bf45f433cdeb336b9f30c 100644 (file)
@@ -28,7 +28,7 @@
 
 .system-info-copy-paste-id-info {
   max-width: 550px;
-  padding: var(--gridSize) calc(2 * var(--gridSize));
+  padding: 8px calc(2 * 8px);
   clear: both;
   line-height: 1.8;
 }
index 7fe3adb9f5c7da96d4c6b79319c95e14a49c0eea..89643dc1f06d3b36f140c68f36623021063d6616 100644 (file)
@@ -21,7 +21,6 @@
 import { Badge, Note, getTextColor } from 'design-system';
 import * as React from 'react';
 import { Image } from '~sonar-aligned/components/common/Image';
-import { colors } from '../../../app/theme';
 import { translate } from '../../../helpers/l10n';
 import { isDefined } from '../../../helpers/types';
 import { IdentityProvider, Provider } from '../../../types/types';
@@ -68,7 +67,7 @@ export function ExternalProvider({ identityProvider, user }: Omit<Props, 'manage
         className="sw-inline-flex sw-items-center sw-px-1"
         style={{
           backgroundColor: identityProvider.backgroundColor,
-          color: getTextColor(identityProvider.backgroundColor, colors.secondFontColor),
+          color: getTextColor(identityProvider.backgroundColor, '#656565'),
         }}
       >
         <Image
index 7bddceae3b3711e163e382b79991f0bfebb560aa..da075b8b900fd6e46dd557a56d19a970f768889b 100644 (file)
@@ -24,7 +24,7 @@
 .web-api-search {
   margin: 20px 10px 0;
   padding: 0 10px 20px;
-  border-bottom: 1px solid var(--barBorderColor);
+  border-bottom: 1px solid #e6e6e6;
   white-space: nowrap;
 }
 
@@ -45,7 +45,7 @@
 }
 
 .web-api-domain-actions {
-  margin-top: calc(2 * var(--gridSize));
+  margin-top: calc(2 * 8px);
 }
 
 .web-api-action-title {
@@ -78,7 +78,7 @@
 .web-api-params td {
   vertical-align: top;
   padding: 8px 10px;
-  border-top: 1px solid var(--barBorderColor);
+  border-top: 1px solid #e6e6e6;
 }
 
 .web-api-params tr:first-child td {
index 24fb5b1c2bdc9a03722135dfd2569a6776a4858b..b5822602448a6f561e479ecfcf5a955a1515d192 100644 (file)
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-.source-line:hover .source-line-number,
-.source-line:hover .source-line-issues,
-.source-line:hover .source-line-coverage,
-.source-line:hover .source-line-duplications,
-.source-line:hover .source-line-duplications-extra,
-.source-line:hover .source-line-scm {
-  border-color: #e9e9e9;
-  background-color: #e9e9e9;
-}
-
-.source-line:hover .source-line-code {
-  background-color: #f5f5f5;
-}
-
-.source-line [role='button'] {
-  cursor: pointer;
-}
-
-.source-line-highlighted .source-line-number,
-.source-line-highlighted:hover .source-line-number,
-.source-line-highlighted .source-line-issues,
-.source-line-highlighted:hover .source-line-issues,
-.source-line-highlighted .source-line-coverage,
-.source-line-highlighted:hover .source-line-coverage,
-.source-line-highlighted .source-line-duplications,
-.source-line-highlighted:hover .source-line-duplications,
-.source-line-highlighted .source-line-duplications-extra,
-.source-line-highlighted:hover .source-line-duplications-extra,
-.source-line-highlighted .source-line-scm,
-.source-line-highlighted:hover .source-line-scm {
-  border-color: #c4dfec !important;
-  background-color: #c4dfec;
-}
-
-.source-line-highlighted .source-line-code,
-.source-line-highlighted:hover .source-line-code {
-  background-color: #d9edf7;
-}
-
-.source-line-filtered .source-line-code {
-  background-color: var(--leakPrimaryColor) !important;
-}
-
-.source-line-filtered.source-line-highlighted .source-line-code,
-.source-line-filtered.source-line-highlighted:hover .source-line-code {
-  background-color: #cdd9c4 !important;
-}
-
-.source-line-filtered.source-line-filtered-dark .source-line-code {
-  background-color: #f9ebb7 !important;
-}
-
-.source-line-filtered:hover .source-line-code,
-.source-line-filtered.source-line-filtered-dark:hover .source-line-code {
-  background-color: var(--leakSecondaryColor) !important;
-}
-
-.source-line-last .source-line-code {
-  padding-bottom: 160px;
-}
 
-.source-viewer pre,
-.source-line-number,
-.source-line-scm {
+.source-viewer pre {
   line-height: 18px;
-  font-family: var(--sourceCodeFontFamily);
-  font-size: var(--smallFontSize);
-}
-
-.source-line-code {
-  position: relative;
-}
-
-.source-line-code pre {
-  float: left;
-  word-wrap: break-word;
-  white-space: pre-wrap;
-}
-
-.source-line-code-inner {
-  min-height: 18px;
-  padding: 0 10px;
-}
-
-.source-line-code-inner:before,
-.source-line-code-inner:after {
-  display: table;
-  content: '';
-  line-height: 0;
-}
-
-.source-line-code-inner:after {
-  clear: both;
-}
-
-.source-line-code-inner pre {
-  tab-size: 4;
+  font-family: Consolas, 'Ubuntu Mono', 'Liberation Mono', Menlo, Courier, monospace;
+  font-size: 12px;
 }
 
 .source-line-code-issue {
   background-size: 4px;
   background-position: bottom;
 }
-
-.source-meta {
-  position: relative;
-  vertical-align: top;
-  width: 1px;
-  background-clip: padding-box;
-  user-select: none;
-}
-
-.source-meta:focus {
-  outline: none;
-}
-
-.source-line-number {
-  min-width: 18px;
-  padding: 0 10px;
-  background-color: var(--barBackgroundColor);
-  color: var(--secondFontColor);
-  text-align: right;
-}
-
-.source-line-issues {
-  position: relative;
-  padding: 0 2px;
-  background-color: var(--barBackgroundColor);
-  white-space: nowrap;
-}
-
-.source-line-with-issues svg {
-  padding-right: 2px;
-  vertical-align: middle;
-}
-
-.source-line-issues-counter {
-  position: absolute;
-  left: 17px;
-  line-height: 8px;
-  font-size: 8px;
-  z-index: 900;
-}
-
-.source-line-coverage {
-  background-color: var(--barBackgroundColor);
-}
-
-.source-line-duplications,
-.source-line-duplications-extra {
-  background-color: var(--barBackgroundColor);
-}
-
-.source-line-duplications-extra {
-  display: none;
-}
-
-.source-line-scm {
-  padding: 0 5px;
-  background-color: var(--barBackgroundColor);
-}
-
-.source-line-scm .dropdown {
-  display: block;
-}
-
-.source-line-scm button {
-  display: block;
-  width: 100%;
-  height: 18px;
-}
-
-.source-line-scm-inner {
-  max-width: 40px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.source-line-bar {
-  width: 5px;
-  height: 18px;
-}
-
-.source-line-bar:focus {
-  outline: none;
-}
-
-.source-line-covered {
-  background-color: var(--lineCoverageGreen) !important;
-}
-
-.source-line-uncovered {
-  background-color: var(--lineCoverageRed) !important;
-}
-
-.source-line-partially-covered {
-  background-color: var(--lineCoverageRed) !important;
-  background-image: repeating-linear-gradient(
-    45deg,
-    rgba(255, 255, 255, 0.5) 4px,
-    transparent 4px,
-    transparent 8px,
-    rgba(255, 255, 255, 0.5) 8px,
-    rgba(255, 255, 255, 0.5) 12px,
-    transparent 12px,
-    transparent 16px,
-    rgba(255, 255, 255, 0.5) 16px,
-    rgba(255, 255, 255, 0.5) 20px
-  ) !important;
-}
-
-.source-line-duplicated {
-  background-color: #797979 !important;
-}
-
-.source-viewer-bubble-popup a {
-  font-family: var(--baseFontFamily);
-  font-size: var(--baseFontSize);
-  text-align: left;
-  user-select: text;
-  border-bottom: none;
-  transition: none;
-  color: unset;
-}
index 6c6c0f68c5cf5b7b839c81db06f5b30c37743a6f..0779f8fda2eb58ce2379b2059f2fb701016a2d3c 100644 (file)
@@ -20,7 +20,7 @@
 .source-viewer {
   width: 100%;
   min-height: 200px;
-  border: 1px solid var(--gray80);
+  border: 1px solid #cdcdcd;
   box-sizing: border-box;
   background-color: #fff;
 }
 
 .source-viewer-more-code {
   padding: 40px 0;
-  border-bottom: 1px solid var(--barBorderColor);
-  background-color: var(--barBackgroundColor);
+  border-bottom: 1px solid #e6e6e6;
+  background-color: #f3f3f3;
   text-align: center;
 }
 
 .source-table + .source-viewer-more-code {
   border-bottom: none;
-  border-top: 1px solid var(--barBorderColor);
+  border-top: 1px solid #e6e6e6;
 }
 
 .issue-location.highlighted {
-  border-color: var(--issueLocationHighlighted);
-  background-color: var(--issueLocationHighlighted);
+  border-color: #e1e1f2;
+  background-color: #e1e1f2;
 }
 
 .issue-location.selected {
-  border-color: var(--issueLocationSelected);
-  background-color: var(--issueLocationSelected);
+  border-color: #f4b1b0;
+  background-color: #f4b1b0;
 }
 
 .measures-viewer {
   display: flex;
-  margin: 0 calc(-1 * var(--gridSize));
+  margin: 0 calc(-1 * 8px);
 }
 
 .measures-viewer + .measures-viewer {
-  margin-top: var(--gridSize);
+  margin-top: 8px;
 }
 
 .measures-viewer-header {
-  font-size: var(--smallFontSize);
+  font-size: 12px;
 }
 
 .measures-viewer-secondary .measures-viewer-card {
-  background-color: var(--barBackgroundColor);
+  background-color: #f3f3f3;
 }
 
 .measures-viewer-section {
 }
 
 .measures-viewer-card {
-  margin: calc(2 * var(--gridSize)) var(--gridSize);
-  padding: var(--gridSize);
-  border: 1px solid var(--barBorderColor);
+  margin: calc(2 * 8px) 8px;
+  padding: 8px;
+  border: 1px solid #e6e6e6;
   background-color: #fff;
 }
 
 .measures + .measures {
-  margin-top: calc(2 * var(--gridSize));
-  padding-top: calc(2 * var(--gridSize));
-  border-top: 1px solid var(--barBorderColor);
+  margin-top: calc(2 * 8px);
+  padding-top: calc(2 * 8px);
+  border-top: 1px solid #e6e6e6;
 }
 
 .measures-chart {
   display: inline-block;
   vertical-align: middle;
-  width: calc(var(--gridSize) * 10);
-  margin-right: calc(var(--gridSize) * 3);
+  width: calc(8px * 10);
+  margin-right: calc(8px * 3);
   text-align: center;
 }
 
 
 .measure-name {
   display: block;
-  font-size: var(--baseFontSize);
+  font-size: 13px;
 }
 
 .measure-value {
-  color: var(--darkBlue);
-  font-size: var(--bigFontSize);
+  color: #236a97;
+  font-size: 16px;
   font-weight: 400;
 }
 
 }
 
 .measure-big .measure-name {
-  margin-top: calc(var(--gridSize) / 2);
-  margin-bottom: var(--gridSize);
-  font-size: var(--bigFontSize);
+  margin-top: calc(8px / 2);
+  margin-bottom: 8px;
+  font-size: 16px;
 }
 
 .measure-big .measure-value,
 .measure-big .rating {
-  font-size: var(--hugeFontSize);
+  font-size: 24px;
 }
 
 .measure-big + .measure-big {
-  margin-left: calc(var(--gridSize) * 3);
+  margin-left: calc(8px * 3);
 }
index 8519a9ccb7cfa20a650c6f806733cc7c81145de9..f67b7fa00dde2fec4df142890ac2e784b7129eb0 100644 (file)
@@ -195,7 +195,7 @@ const StyledTable = styled.table`
     vertical-align: top;
     line-height: 18px;
     padding: 8px 10px;
-    border-bottom: 1px solid var(--barBorderColor);
+    border-bottom: 1px solid #e6e6e6;
     font-weight: 600;
   }
 
@@ -207,7 +207,7 @@ const StyledTable = styled.table`
 
   & > tfoot > tr > td {
     font-size: 93%;
-    color: var(--secondFontColor);
+    color: #656565;
     padding: 5px;
   }
 
index 825d707118d6c88acc77ec5882c5ee2a49a75f8a..fc7e781c032d00fd4f80d2b21f1114641811389e 100644 (file)
@@ -19,7 +19,7 @@
  */
 .line-tooltip {
   fill: none;
-  stroke: var(--secondFontColor);
+  stroke: #656565;
   stroke-width: 1px;
   shape-rendering: crispEdges;
 }
 
 .line-chart-event {
   fill: #fff;
-  stroke: var(--blue);
+  stroke: #4b9fd5;
   stroke-width: 2px;
 }
 
 .line-chart-event.VERSION {
-  stroke: var(--blue);
+  stroke: #4b9fd5;
 }
 
 .line-chart-event.QUALITY_GATE {
-  stroke: var(--green);
+  stroke: #00aa00;
 }
 
 .line-chart-event.QUALITY_PROFILE {
-  stroke: var(--orange);
+  stroke: #ed7d20;
 }
 
 .line-chart-event.OTHER {
-  stroke: var(--purple);
+  stroke: #9139d4;
 }
 
 .new-code-legend {
-  fill: var(--secondFontColor);
-  font-size: var(--smallFontSize);
+  fill: #656565;
+  font-size: 12px;
 }
index 52d5ff65c137f8c8862eac42cd8f830752aaae54..c7b40167d5690727726c7ab78994ac1a4f793461 100644 (file)
 
 .line-chart-point {
   fill: #fff;
-  stroke: var(--blue);
+  stroke: #4b9fd5;
   stroke-width: 2px;
 }
 
 .line-chart-tick {
-  fill: var(--secondFontColor);
+  fill: #656565;
 }
 
 .line-chart-tick-x {
index caa82929548354e96ade2d63e2d7dbc1951d6d89..b0a128c175e84b2136d3107f1ffe09004be0d279 100644 (file)
@@ -20,7 +20,6 @@
 import { throttle } from 'lodash';
 import * as React from 'react';
 import { findDOMNode } from 'react-dom';
-import { rawSizes } from '../../app/theme';
 
 interface Props {
   /**
@@ -43,7 +42,7 @@ interface Fixes {
   topFix?: number;
 }
 
-const EDGE_MARGIN = rawSizes.grid / 2;
+const EDGE_MARGIN = 4;
 
 export default class ScreenPositionFixer extends React.Component<Props, Fixes> {
   throttledPosition: () => void;
index 343208ac95c687bdf9abfc253dbeef81bd42304c..8ccf9a2f40916e0bc5e4a8de2cbc8cdfc0a55619 100644 (file)
@@ -19,7 +19,7 @@
  */
 .tooltip {
   position: absolute;
-  z-index: var(--tooltipZIndex);
+  z-index: 9001;
   display: block;
   height: auto;
   box-sizing: border-box;
 }
 
 .tooltip .issue-message-highlight-CODE {
-  background-color: var(--whitea18);
+  background-color: rgba(255, 255, 255, 0.18);
 }
 
 @keyframes fadeIn {
index e7bc5128b9f3dac13de3c32dd19c38c8f10145bd..3bb6d08fa3fc8b3db4857cb0a7fd3ec3e8089da6 100644 (file)
@@ -21,7 +21,6 @@ import classNames from 'classnames';
 import { throttle, uniqueId } from 'lodash';
 import * as React from 'react';
 import { createPortal, findDOMNode } from 'react-dom';
-import { rawSizes } from '../../app/theme';
 import { ONE_SECOND } from '../../helpers/constants';
 import { translate } from '../../helpers/l10n';
 import EscKeydownHandler from './EscKeydownHandler';
@@ -340,7 +339,7 @@ export class TooltipInner extends React.Component<TooltipProps, State> {
     // We can live with a tooltip that's slightly positioned over the toggle
     // node. Only trigger if it really starts overlapping, as the re-positioning
     // is quite expensive, needing 2 re-renders.
-    const threshold = rawSizes.grid;
+    const threshold = 8;
     switch (this.getPlacement()) {
       case 'left':
       case 'right':
index 7c385ae0b6abbeb72406ccc87714bcbf0eca9cd7..8d3e774fc5bf44b68492b041f9a9098175f52e38 100644 (file)
@@ -19,9 +19,9 @@
  */
 .issue {
   position: relative;
-  padding-top: var(--gridSize);
-  padding-bottom: var(--gridSize);
-  background-color: var(--issueBgColor);
+  padding-top: 8px;
+  padding-bottom: 8px;
+  background-color: #f2dede;
   transition: all 0.3s ease;
   border: 2px solid transparent;
   cursor: pointer;
@@ -35,7 +35,7 @@
 .issue-message-box.selected {
   box-shadow: none;
   outline: none;
-  border: 2px solid var(--blue) !important;
+  border: 2px solid #4b9fd5 !important;
 }
 
 .issue + .issue,
 
 .issue-message .button-plain {
   line-height: 18px;
-  font-size: var(--baseFontSize);
+  font-size: 13px;
   font-weight: 600;
   text-align: left;
 }
 
 .issue-message {
   flex: 1;
-  padding-left: var(--gridSize);
-  padding-right: var(--gridSize);
+  padding-left: 8px;
+  padding-right: 8px;
   line-height: 18px;
-  font-size: var(--baseFontSize);
+  font-size: 13px;
   font-weight: 600;
   text-overflow: ellipsis;
 }
 }
 
 .issue-meta {
-  line-height: var(--smallFontSize);
-  font-size: var(--smallFontSize);
+  line-height: 12px;
+  font-size: 12px;
   display: flex;
 }
 
 .issue-meta + .issue-meta {
-  margin-left: var(--gridSize);
+  margin-left: 8px;
 }
 
 .issue-meta-label {
 
 .issue-comments {
   margin-top: 5px;
-  padding-left: var(--gridSize);
-  font-size: var(--smallFontSize);
+  padding-left: 8px;
+  font-size: 12px;
 }
 
 .issue-comment {
   flex-shrink: 0;
   max-width: 130px;
   line-height: 18px;
-  color: var(--secondFontColor);
+  color: #656565;
   font-weight: 600;
   overflow: hidden;
   text-overflow: ellipsis;
   flex-shrink: 0;
   line-height: 18px;
   white-space: nowrap;
-  color: var(--secondFontColor);
+  color: #656565;
 }
 
 .issue-comment-actions {
 
 .issue-comment-bubble-popup {
   width: 440px;
-  font-size: var(--smallFontSize);
+  font-size: 12px;
 }
 
 .issue-comment-form-text textarea {
 }
 
 .issue:not(.selected) .location-index {
-  background-color: var(--gray60);
+  background-color: #888;
 }
 
 .issue .menu:not(.issues-similar-issues-menu):not(.issue-changelog) {
 }
 
 .issue-message-box {
-  background-color: var(--issueBgColor);
+  background-color: #f2dede;
   border: 2px solid transparent;
   margin: 10px 0px;
 }
 
 .issue-message-highlight-CODE {
-  background-color: var(--whitea60);
+  background-color: rgba(255, 255, 255, 0.6);
   border-radius: 4px;
-  font-family: var(--sourceCodeFontFamily);
+  font-family: Consolas, 'Ubuntu Mono', 'Liberation Mono', Menlo, Courier, monospace;
   font-weight: 400;
   line-height: 1.4em;
   padding: 2px 2px 0;
 }
 
 .issue-message-box.secondary-issue {
-  background-color: var(--secondIssueBgColor);
+  background-color: #f8eeee;
 }
 
 .issue-message-box.secondary-issue:hover,
 .issue:hover {
-  border: 2px dashed var(--blue);
+  border: 2px dashed #4b9fd5;
   outline: 0;
   cursor: pointer;
 }
 }
 
 .issue-comment-tile {
-  background-color: var(--barBackgroundColor);
+  background-color: #f3f3f3;
 }
 
 .issue .button-link {
-  color: var(--veryDarkBlue);
+  color: #0e516f;
 }
 
 .issue .button-link:hover,
 .issue .button-link:focus,
 .issue .button-link:active {
-  color: var(--darkBlue);
+  color: #236a97;
 }
index 59ce297c1f8aec3b44a81ee84e875ed6db1332ab..7db34335f2ae9723887aa601d839edee6a7c9232 100644 (file)
@@ -22,15 +22,15 @@ button.locations-navigator {
   align-items: flex-start;
   border: 1px solid transparent;
   border-radius: 4px;
-  padding: calc(1 / 2 * var(--gridSize));
-  margin-bottom: calc(1 / 4 * var(--gridSize));
+  padding: calc(1 / 2 * 8px);
+  margin-bottom: calc(1 / 4 * 8px);
   color: inherit;
   text-align: left;
 }
 
 button.locations-navigator:hover,
 button.locations-navigator:active {
-  border-color: var(--info400);
+  border-color: #4b9fd5;
 }
 
 button.locations-navigator:focus {
@@ -38,6 +38,6 @@ button.locations-navigator:focus {
 }
 
 button.locations-navigator.selected {
-  border-color: var(--info400);
-  background-color: var(--info50);
+  border-color: #4b9fd5;
+  background-color: #ecf6fe;
 }
index f470ac723eefcb1b3513706532d2eaadcf4a2886..916f726d785d8c2d69a4873f3ad0fb9b501608ef 100644 (file)
 }
 
 .search-navigator-facet-box {
-  background-color: var(--barBackgroundColor);
-  font-size: var(--baseFontSize);
+  background-color: #f3f3f3;
+  font-size: 13px;
 }
 
 .search-navigator-facet-box.leak-facet-box {
-  background-color: var(--leakPrimaryColor);
-  border: 1px solid var(--leakSecondaryColor);
+  background-color: #fbf3d5;
+  border: 1px solid #f1e8cb;
 }
 
 .search-navigator-facet-box.is-inner {
   margin-left: 8px;
   padding-left: 12px;
-  border-left: 1px solid var(--barBorderColor);
+  border-left: 1px solid #e6e6e6;
 }
 
 .search-navigator-facet-box.is-inner .search-navigator-facet-header {
@@ -69,7 +69,7 @@
 
 .search-navigator-facet-box-forbidden .search-navigator-facet-header {
   cursor: default;
-  color: var(--gray60);
+  color: #888;
 }
 
 .search-navigator-facet,
@@ -79,9 +79,9 @@ button.search-navigator-facet {
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  height: calc(3.5 * var(--gridSize));
+  height: calc(3.5 * 8px);
   margin-bottom: 1px;
-  padding: 0 calc(0.75 * var(--gridSize));
+  padding: 0 calc(0.75 * 8px);
   border: 1px solid transparent;
   border-radius: 2px;
   box-sizing: border-box;
@@ -97,13 +97,13 @@ button.search-navigator-facet {
 }
 
 button.search-navigator-facet .facet-name {
-  color: var(--baseFontColor);
+  color: #333;
 }
 
 button.search-navigator-facet:hover,
 button.search-navigator-facet:focus,
 .search-navigator-facet.active {
-  border-color: var(--blue);
+  border-color: #4b9fd5;
 }
 
 .search-navigator-facet.facet-category {
@@ -112,7 +112,7 @@ button.search-navigator-facet:focus,
 }
 
 .search-navigator-facet.facet-category .facet-name {
-  color: var(--secondFontColor);
+  color: #656565;
 }
 
 .search-navigator-facet .facet-name {
@@ -120,8 +120,8 @@ button.search-navigator-facet:focus,
   min-width: 0;
   line-height: 16px;
   padding: 1px 0; /* needed to fit small ratings and levels */
-  color: var(--secondFontColor);
-  font-size: var(--smallFontSize);
+  color: #656565;
+  font-size: 12px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -130,9 +130,9 @@ button.search-navigator-facet:focus,
 .search-navigator-facet .facet-stat {
   display: flex;
   align-items: center;
-  margin-left: var(--gridSize);
-  color: var(--secondFontColor);
-  font-size: var(--smallFontSize);
+  margin-left: 8px;
+  color: #656565;
+  font-size: 12px;
 }
 
 .search-navigator-facet .facet-toggle {
@@ -148,33 +148,33 @@ button.search-navigator-facet:focus,
 }
 
 .search-navigator-facet .facet-toggle:hover {
-  color: var(--baseFontColor);
+  color: #333;
 }
 
 .search-navigator-facet .facet-toggle-active.facet-toggle-green {
-  background-color: var(--green);
+  background-color: #00aa00;
   color: #ffffff;
 }
 
 .search-navigator-facet .facet-toggle-active.facet-toggle-red {
-  background-color: var(--red);
+  background-color: #d02f3a;
   color: #ffffff;
 }
 
 .leak-facet-box .search-navigator-facet .facet-name {
-  background-color: var(--leakPrimaryColor);
+  background-color: #fbf3d5;
 }
 
 .leak-facet-box .search-navigator-facet .facet-stat {
-  background-color: var(--leakPrimaryColor);
+  background-color: #fbf3d5;
 }
 
 .leak-facet-box .search-navigator-facet .facet-stat:before {
-  background-image: linear-gradient(to right, rgba(251, 243, 213, 0), var(--leakPrimaryColor) 75%);
+  background-image: linear-gradient(to right, rgba(251, 243, 213, 0), #fbf3d5 75%);
 }
 
 .search-navigator-facet.active {
-  background-color: var(--veryLightBlue);
+  background-color: #f2faff;
   text-decoration: none;
 }
 
@@ -188,13 +188,13 @@ button.search-navigator-facet:focus,
 }
 
 .search-navigator-facet.compare .facet-toggle.facet-toggle-green {
-  background-color: var(--green);
+  background-color: #00aa00;
   color: #ffffff;
 }
 
 .search-navigator-facet.compare .facet-toggle.facet-toggle-red {
   background-color: transparent;
-  color: var(--secondFontColor);
+  color: #656565;
 }
 
 .search-navigator-facet-half {
@@ -210,7 +210,7 @@ button.search-navigator-facet:focus,
   display: block;
   flex-shrink: 0;
   padding: 8px 1px;
-  color: var(--baseFontColor);
+  color: #333;
   font-weight: 600;
   overflow: hidden;
   white-space: nowrap;
@@ -218,14 +218,14 @@ button.search-navigator-facet:focus,
 
 .search-navigator-facet-header > button {
   border-bottom: none;
-  color: var(--baseFontColor);
+  color: #333;
   cursor: pointer;
   font-weight: inherit;
 }
 
 .search-navigator-facet-header > button:focus,
 .search-navigator-facet-header > button:hover {
-  color: var(--darkBlue);
+  color: #236a97;
 }
 
 .search-navigator-facet-header > h3,
@@ -258,31 +258,31 @@ button.search-navigator-facet:focus,
 }
 
 .search-navigator-facet-list {
-  padding-bottom: var(--gridSize);
+  padding-bottom: 8px;
   font-size: 0;
 }
 
 .search-navigator-facet-list-title {
-  margin: 0 var(--gridSize) calc(var(--gridSize) / 2);
-  font-size: var(--smallFontSize);
+  margin: 0 8px calc(8px / 2);
+  font-size: 12px;
   font-weight: bold;
 }
 
 .search-navigator-facet-list + .search-navigator-facet-list > .search-navigator-facet-list-title {
-  border-top: 1px solid var(--barBorderColor);
-  padding-top: var(--gridSize);
+  border-top: 1px solid #e6e6e6;
+  padding-top: 8px;
 }
 
 .search-navigator-facet-empty {
   margin: 0 0 0 0;
   padding: 0 10px 10px;
-  color: var(--baseFontColor);
-  font-size: var(--smallFontSize);
+  color: #333;
+  font-size: 12px;
 }
 
 .search-navigator-facet-footer {
   display: block;
-  padding-bottom: var(--gridSize);
+  padding-bottom: 8px;
   border-bottom: none;
 }
 
@@ -294,7 +294,7 @@ button.search-navigator-facet:focus,
 .search-navigator-filters {
   position: relative;
   padding: 5px 10px;
-  background-color: var(--barBackgroundColor);
+  background-color: #f3f3f3;
 }
 
 .search-navigator-filters:before,
@@ -311,7 +311,7 @@ button.search-navigator-facet:focus,
 .search-navigator-filters-header {
   margin-bottom: 12px;
   padding-bottom: 11px;
-  border-bottom: 1px solid var(--barBorderColor);
+  border-bottom: 1px solid #e6e6e6;
 }
 .search-navigator-intro {
   width: 500px;
index 29d053f5e9e912b1e5e6389b7724bf546f04dfa8..ebe095917c5d049921730a7a73e8d94c91f0fe8c 100644 (file)
  */
 .rating {
   display: inline-flex;
-  width: var(--controlHeight);
-  height: var(--controlHeight);
-  border-radius: var(--controlHeight);
+  width: 24px;
+  height: 24px;
+  border-radius: 24px;
   box-sizing: border-box;
-  font-size: var(--bigFontSize);
+  font-size: 16px;
   font-weight: 400;
   align-items: center;
   justify-content: center;
 }
 
 .rating-muted {
-  background-color: var(--gray71) !important;
-  color: var(--white) !important;
+  background-color: #b4b4b4 !important;
+  color: #ffffff !important;
 }
 
 a > .rating-A,
 .rating-A {
-  color: var(--blacka75);
-  background-color: var(--success300);
+  color: rgba(0, 0, 0, 0.75);
+  background-color: #6cd46c;
 }
 
 a > .rating-B,
 .rating-B {
-  color: var(--blacka75);
-  background-color: var(--successVariant);
+  color: rgba(0, 0, 0, 0.75);
+  background-color: #c6e056;
 }
 
 a > .rating-C,
 .rating-C {
-  color: var(--blacka75);
-  background-color: var(--warningVariant);
+  color: rgba(0, 0, 0, 0.75);
+  background-color: #f4d348;
 }
 
 a > .rating-D,
 .rating-D {
-  color: var(--blacka75);
-  background-color: var(--warningAccent);
+  color: rgba(0, 0, 0, 0.75);
+  background-color: #f69d53;
 }
 
 a > .rating-E,
 .rating-E {
-  color: var(--blacka75);
-  background-color: var(--error400);
+  color: rgba(0, 0, 0, 0.75);
+  background-color: #f0878e;
 }
index f9381ff56445a62cddf98e4954090e0d790a7827..5bbb3496c5e9621a4d5ca6c77fadec718d79510a 100644 (file)
 
 .popup {
   position: absolute;
-  z-index: var(--popupZIndex);
+  z-index: 5000;
   margin-top: -16px;
   margin-left: 8px;
-  padding: var(--gridSize);
+  padding: 8px;
   border: 1px solid var(--echoes-color-border-weak);
   border-radius: 3px;
   box-sizing: border-box;
   background-color: #ffffff;
-  box-shadow: var(--defaultShadow);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
   cursor: default;
 }
 
@@ -50,7 +50,7 @@
   top: 15px;
   left: -6px;
   border-left-width: 0;
-  border-right-color: var(--barBorderColor);
+  border-right-color: #e6e6e6;
 }
 
 .popup-arrow:after {
@@ -77,7 +77,7 @@
   border-left-width: 6px;
   border-top-width: 0;
   border-right-color: transparent;
-  border-bottom-color: var(--barBorderColor);
+  border-bottom-color: #e6e6e6;
 }
 
 .popup.is-bottom .popup-arrow.is-left {
   border-left-width: 6px;
   border-top-width: 0;
   border-right-color: transparent;
-  border-bottom-color: var(--barBorderColor);
+  border-bottom-color: #e6e6e6;
 }
 
 .popup.is-bottom-right .popup-arrow:after {
   border-left-width: 6px;
   border-top-width: 0;
   border-right-color: transparent;
-  border-bottom-color: var(--barBorderColor);
+  border-bottom-color: #e6e6e6;
 }
 
 .popup.is-bottom-left .popup-arrow:after {
   top: 8px;
   border-right-width: 0;
   border-left-width: 6px;
-  border-left-color: var(--barBorderColor);
+  border-left-color: #e6e6e6;
   border-right-color: transparent;
 }
 
   top: 8px;
   border-left-width: 0;
   border-right-width: 6px;
-  border-right-color: var(--barBorderColor);
+  border-right-color: #e6e6e6;
   border-left-color: transparent;
 }
 
   top: calc(100% - 15px);
   border-left-width: 0;
   border-right-width: 6px;
-  border-right-color: var(--barBorderColor);
+  border-right-color: #e6e6e6;
   border-left-color: transparent;
 }
 
   bottom: -6px;
   top: auto;
   left: 8px;
-  border-color: var(--barBorderColor) transparent transparent;
+  border-color: #e6e6e6 transparent transparent;
   border-width: 6px 6px 0 6px;
 }
 
 /* #region .popup & .menu or .multi-select */
 .popup:not(.no-padding) > .menu,
 .popup:not(.no-padding) > .multi-select {
-  margin: calc(-1 * var(--gridSize));
+  margin: calc(-1 * 8px);
 }
 /* #endregion */
 
index 682fcab1814bf1dac41654ccae315bba3e0cbe9f..2145390f9090879615d689d1f23bbc935e47d81c 100644 (file)
@@ -20,7 +20,6 @@
 
 import { ComponentQualifier } from '~sonar-aligned/types/component';
 import { MetricKey } from '~sonar-aligned/types/metrics';
-import { colors } from '../app/theme';
 import { AlmKeys } from '../types/alm-settings';
 import {
   CleanCodeAttribute,
@@ -155,6 +154,29 @@ export const RULE_TYPES: RuleType[] = ['BUG', 'VULNERABILITY', 'CODE_SMELL', 'SE
 
 export const RULE_STATUSES = ['READY', 'BETA', 'DEPRECATED'];
 
+/**
+ * @deprecated Legacy colors. Equivalents should be added to the Echoes design system soon
+ */
+const colors = {
+  success300: '#6CD46C',
+  success300a20: 'rgba(108, 212, 108, 0.2)',
+  success500: '#008223',
+  successVariant: '#C6E056',
+  successVarianta20: 'rgba(198, 224, 86, 0.2)',
+  successVariantDark: '#809E00',
+
+  warning: '#B95E04',
+  warningVariant: '#F4D348',
+  warningVarianta20: 'rgba(244, 211, 72, 0.2)',
+  warningVariantDark: '#B18F00',
+  warningAccent: '#F69D53',
+  warningAccenta20: 'rgba(246, 157, 83, 0.2)',
+
+  error400: '#F0878E',
+  error400a20: 'rgba(240, 135, 142, 0.2)',
+  error700: '#B81723',
+};
+
 export const RATING_COLORS = [
   { fill: colors.success300, fillTransparent: colors.success300a20, stroke: colors.success500 },
   {
index 75f5043f47f614df1494bab30701139a9b39566b..7c8b873dc94fc60d1f3d6dc801198d47c23d6ad4 100644 (file)
@@ -20,7 +20,7 @@
 .a11y-skip-link {
   width: 0;
   height: 0;
-  padding: var(--gridSize);
+  padding: 8px;
   position: absolute;
   left: -9999px;
   top: -9999px;
@@ -36,6 +36,6 @@
   left: 6px;
   top: 6px;
   color: white;
-  background-color: var(--globalNavBarBg);
+  background-color: #262626;
   text-decoration: underline;
 }
index fc4fbdf5456adf92e99cd2d6088d0b10b11b0dea..d62c34d11e1c20c4e26e4c41be457b5645db1a27 100644 (file)
@@ -7597,7 +7597,6 @@ __metadata:
     path-browserify: "npm:1.0.1"
     postcss: "npm:8.4.47"
     postcss-calc: "npm:10.0.2"
-    postcss-custom-properties: "npm:12.1.11"
     prettier: "npm:3.3.3"
     prettier-plugin-organize-imports: "npm:4.1.0"
     react: "npm:18.3.1"
@@ -9748,7 +9747,6 @@ __metadata:
     jest: "npm:29.7.0"
     postcss: "npm:8.4.47"
     postcss-calc: "npm:10.0.2"
-    postcss-custom-properties: "npm:12.1.11"
     prettier: "npm:3.3.3"
     prettier-plugin-organize-imports: "npm:4.1.0"
     react-toastify: "npm:10.0.5"
@@ -15335,17 +15333,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-custom-properties@npm:12.1.11":
-  version: 12.1.11
-  resolution: "postcss-custom-properties@npm:12.1.11"
-  dependencies:
-    postcss-value-parser: "npm:^4.2.0"
-  peerDependencies:
-    postcss: ^8.2
-  checksum: 10/3f049f07cc45c9debcc8d662374947eb3158bb66b2722c81368b36d60de0629e75d80ccfe2ca25ba21af8ce146c50dbc91c62c28e01c06635252e39678c1eb6d
-  languageName: node
-  linkType: hard
-
 "postcss-import@npm:^15.1.0":
   version: 15.1.0
   resolution: "postcss-import@npm:15.1.0"