From 4563bf92ef65836ce0afc2e974a2ecd5fe719b1b Mon Sep 17 00:00:00 2001 From: Jeremy Davis Date: Tue, 15 Oct 2024 16:33:22 +0200 Subject: [PATCH] SONAR-23205 Remove legacy CSS custom properties --- server/sonar-web/config/utils.js | 26 -- server/sonar-web/design-system/package.json | 1 - server/sonar-web/design-system/vite.config.js | 14 +- server/sonar-web/package.json | 1 - .../src/main/js/app/styles/init/base.css | 6 +- .../src/main/js/app/styles/print.css | 2 +- .../src/main/js/app/styles/style.css | 24 +- server/sonar-web/src/main/js/app/theme-old.js | 274 ----------------- server/sonar-web/src/main/js/app/theme.ts | 277 ------------------ .../account/profile/UserExternalIdentity.tsx | 3 +- .../src/main/js/apps/coding-rules/styles.css | 48 +-- .../SnippetViewer.css | 8 +- .../src/main/js/apps/issues/styles.css | 2 +- .../src/main/js/apps/overview/styles.css | 26 +- .../src/main/js/apps/permissions/styles.css | 2 +- .../src/main/js/apps/projects/styles.css | 2 +- .../src/main/js/apps/quality-gates/styles.css | 12 +- .../components/HotspotPrimaryLocationBox.css | 10 +- .../src/main/js/apps/settings/styles.css | 4 +- .../src/main/js/apps/system/styles.css | 2 +- .../users/components/UserListItemIdentity.tsx | 3 +- .../main/js/apps/web-api/styles/web-api.css | 6 +- .../SourceViewer/components/Line.css | 220 +------------- .../js/components/SourceViewer/styles.css | 56 ++-- .../activity-graph/DataTableModal.tsx | 4 +- .../js/components/charts/AdvancedTimeline.css | 16 +- .../main/js/components/charts/LineChart.css | 4 +- .../controls/ScreenPositionFixer.tsx | 3 +- .../main/js/components/controls/Tooltip.css | 4 +- .../main/js/components/controls/Tooltip.tsx | 3 +- .../src/main/js/components/issue/Issue.css | 50 ++-- .../locations/SingleFileLocationNavigator.css | 10 +- .../main/js/components/search-navigator.css | 76 ++--- .../src/main/js/components/ui/Rating.css | 32 +- .../src/main/js/components/ui/popups.css | 24 +- .../src/main/js/helpers/constants.ts | 24 +- .../components/a11y/A11ySkipLinks.css | 4 +- server/sonar-web/yarn.lock | 13 - 38 files changed, 248 insertions(+), 1048 deletions(-) delete mode 100644 server/sonar-web/src/main/js/app/theme-old.js delete mode 100644 server/sonar-web/src/main/js/app/theme.ts diff --git a/server/sonar-web/config/utils.js b/server/sonar-web/config/utils.js index 537ecadf68b..74acbb3a019 100644 --- a/server/sonar-web/config/utils.js +++ b/server/sonar-web/config/utils.js @@ -17,31 +17,6 @@ * 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 diff --git a/server/sonar-web/design-system/package.json b/server/sonar-web/design-system/package.json index cf7cb0ad226..70405278cac 100644 --- a/server/sonar-web/design-system/package.json +++ b/server/sonar-web/design-system/package.json @@ -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", diff --git a/server/sonar-web/design-system/vite.config.js b/server/sonar-web/design-system/vite.config.js index 7267ded8d44..47300754bae 100644 --- a/server/sonar-web/design-system/vite.config.js +++ b/server/sonar-web/design-system/vite.config.js @@ -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: { diff --git a/server/sonar-web/package.json b/server/sonar-web/package.json index 8ef994a6cfa..b8ccadcbde1 100644 --- a/server/sonar-web/package.json +++ b/server/sonar-web/package.json @@ -119,7 +119,6 @@ "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", diff --git a/server/sonar-web/src/main/js/app/styles/init/base.css b/server/sonar-web/src/main/js/app/styles/init/base.css index a7f14eca985..5267e737eea 100644 --- a/server/sonar-web/src/main/js/app/styles/init/base.css +++ b/server/sonar-web/src/main/js/app/styles/init/base.css @@ -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; } diff --git a/server/sonar-web/src/main/js/app/styles/print.css b/server/sonar-web/src/main/js/app/styles/print.css index 94bdd0d2757..8aa67639908 100644 --- a/server/sonar-web/src/main/js/app/styles/print.css +++ b/server/sonar-web/src/main/js/app/styles/print.css @@ -23,7 +23,7 @@ } a { - color: var(--baseFontColor); + color: #333; border-bottom: none; } diff --git a/server/sonar-web/src/main/js/app/styles/style.css b/server/sonar-web/src/main/js/app/styles/style.css index b734d42825d..5a2c6881dfa 100644 --- a/server/sonar-web/src/main/js/app/styles/style.css +++ b/server/sonar-web/src/main/js/app/styles/style.css @@ -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; } @@ -93,16 +93,16 @@ .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 index f6568a90ba5..00000000000 --- a/server/sonar-web/src/main/js/app/theme-old.js +++ /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 index f096de9b9da..00000000000 --- a/server/sonar-web/src/main/js/app/theme.ts +++ /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; diff --git a/server/sonar-web/src/main/js/apps/account/profile/UserExternalIdentity.tsx b/server/sonar-web/src/main/js/apps/account/profile/UserExternalIdentity.tsx index 9e0bf59e04f..2ed4bc8bba1 100644 --- a/server/sonar-web/src/main/js/apps/account/profile/UserExternalIdentity.tsx +++ b/server/sonar-web/src/main/js/apps/account/profile/UserExternalIdentity.tsx @@ -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'), }} > 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; } diff --git a/server/sonar-web/src/main/js/apps/issues/styles.css b/server/sonar-web/src/main/js/apps/issues/styles.css index 5b84774f3a0..1b40c05e39e 100644 --- a/server/sonar-web/src/main/js/apps/issues/styles.css +++ b/server/sonar-web/src/main/js/apps/issues/styles.css @@ -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; } diff --git a/server/sonar-web/src/main/js/apps/overview/styles.css b/server/sonar-web/src/main/js/apps/overview/styles.css index 3ca1c3ab01d..69dea1f07cb 100644 --- a/server/sonar-web/src/main/js/apps/overview/styles.css +++ b/server/sonar-web/src/main/js/apps/overview/styles.css @@ -31,19 +31,19 @@ } .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 { @@ -52,11 +52,11 @@ } .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 { @@ -66,13 +66,13 @@ .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; } /* @@ -115,11 +115,11 @@ } .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 { @@ -146,11 +146,11 @@ } .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 { @@ -166,7 +166,7 @@ .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; diff --git a/server/sonar-web/src/main/js/apps/permissions/styles.css b/server/sonar-web/src/main/js/apps/permissions/styles.css index fc03dd53634..6cfeca04445 100644 --- a/server/sonar-web/src/main/js/apps/permissions/styles.css +++ b/server/sonar-web/src/main/js/apps/permissions/styles.css @@ -32,7 +32,7 @@ .permissions-table .divider::after { display: block; content: ''; - background: var(--barBorderColor); + background: #e6e6e6; height: 1px; width: 100%; } diff --git a/server/sonar-web/src/main/js/apps/projects/styles.css b/server/sonar-web/src/main/js/apps/projects/styles.css index 060b18ad7df..244da4a1990 100644 --- a/server/sonar-web/src/main/js/apps/projects/styles.css +++ b/server/sonar-web/src/main/js/apps/projects/styles.css @@ -19,7 +19,7 @@ */ .projects-leak-sorting-option.is-focused { - background-color: var(--leakSecondaryColor); + background-color: #f1e8cb; } .project-filters-list { diff --git a/server/sonar-web/src/main/js/apps/quality-gates/styles.css b/server/sonar-web/src/main/js/apps/quality-gates/styles.css index 6f8292ebbc5..9ed67a915d4 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/styles.css +++ b/server/sonar-web/src/main/js/apps/quality-gates/styles.css @@ -27,7 +27,7 @@ } .quality-gate-permissions .permission-list-item:hover { - background-color: var(--rowHoverHighlight); + background-color: #ecf6fe; } .quality-gate-section tbody { @@ -62,15 +62,15 @@ } .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 { @@ -78,11 +78,11 @@ } .red-text { - color: var(--red); + color: #d02f3a; } .green-text { - color: var(--success500); + color: #008223; } .strike-through { diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotPrimaryLocationBox.css b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotPrimaryLocationBox.css index 62312d6700e..9bb20d24771 100644 --- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotPrimaryLocationBox.css +++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotPrimaryLocationBox.css @@ -18,20 +18,20 @@ * 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; } diff --git a/server/sonar-web/src/main/js/apps/settings/styles.css b/server/sonar-web/src/main/js/apps/settings/styles.css index 6993aea752d..bb4b45727b6 100644 --- a/server/sonar-web/src/main/js/apps/settings/styles.css +++ b/server/sonar-web/src/main/js/apps/settings/styles.css @@ -49,12 +49,12 @@ .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 { diff --git a/server/sonar-web/src/main/js/apps/system/styles.css b/server/sonar-web/src/main/js/apps/system/styles.css index 2cfc7fbd559..371f089a5bc 100644 --- a/server/sonar-web/src/main/js/apps/system/styles.css +++ b/server/sonar-web/src/main/js/apps/system/styles.css @@ -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; } diff --git a/server/sonar-web/src/main/js/apps/users/components/UserListItemIdentity.tsx b/server/sonar-web/src/main/js/apps/users/components/UserListItemIdentity.tsx index 7fe3adb9f5c..89643dc1f06 100644 --- a/server/sonar-web/src/main/js/apps/users/components/UserListItemIdentity.tsx +++ b/server/sonar-web/src/main/js/apps/users/components/UserListItemIdentity.tsx @@ -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 tfoot > tr > td { font-size: 93%; - color: var(--secondFontColor); + color: #656565; padding: 5px; } diff --git a/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.css b/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.css index 825d707118d..fc7e781c032 100644 --- a/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.css +++ b/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.css @@ -19,7 +19,7 @@ */ .line-tooltip { fill: none; - stroke: var(--secondFontColor); + stroke: #656565; stroke-width: 1px; shape-rendering: crispEdges; } @@ -40,27 +40,27 @@ .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; } diff --git a/server/sonar-web/src/main/js/components/charts/LineChart.css b/server/sonar-web/src/main/js/components/charts/LineChart.css index 52d5ff65c13..c7b40167d56 100644 --- a/server/sonar-web/src/main/js/components/charts/LineChart.css +++ b/server/sonar-web/src/main/js/components/charts/LineChart.css @@ -24,12 +24,12 @@ .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 { diff --git a/server/sonar-web/src/main/js/components/controls/ScreenPositionFixer.tsx b/server/sonar-web/src/main/js/components/controls/ScreenPositionFixer.tsx index caa82929548..b0a128c175e 100644 --- a/server/sonar-web/src/main/js/components/controls/ScreenPositionFixer.tsx +++ b/server/sonar-web/src/main/js/components/controls/ScreenPositionFixer.tsx @@ -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 { throttledPosition: () => void; diff --git a/server/sonar-web/src/main/js/components/controls/Tooltip.css b/server/sonar-web/src/main/js/components/controls/Tooltip.css index 343208ac95c..8ccf9a2f409 100644 --- a/server/sonar-web/src/main/js/components/controls/Tooltip.css +++ b/server/sonar-web/src/main/js/components/controls/Tooltip.css @@ -19,7 +19,7 @@ */ .tooltip { position: absolute; - z-index: var(--tooltipZIndex); + z-index: 9001; display: block; height: auto; box-sizing: border-box; @@ -121,7 +121,7 @@ } .tooltip .issue-message-highlight-CODE { - background-color: var(--whitea18); + background-color: rgba(255, 255, 255, 0.18); } @keyframes fadeIn { diff --git a/server/sonar-web/src/main/js/components/controls/Tooltip.tsx b/server/sonar-web/src/main/js/components/controls/Tooltip.tsx index e7bc5128b9f..3bb6d08fa3f 100644 --- a/server/sonar-web/src/main/js/components/controls/Tooltip.tsx +++ b/server/sonar-web/src/main/js/components/controls/Tooltip.tsx @@ -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 { // 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': diff --git a/server/sonar-web/src/main/js/components/issue/Issue.css b/server/sonar-web/src/main/js/components/issue/Issue.css index 7c385ae0b6a..8d3e774fc5b 100644 --- a/server/sonar-web/src/main/js/components/issue/Issue.css +++ b/server/sonar-web/src/main/js/components/issue/Issue.css @@ -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, @@ -56,17 +56,17 @@ .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; } @@ -84,13 +84,13 @@ } .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 { @@ -112,8 +112,8 @@ .issue-comments { margin-top: 5px; - padding-left: var(--gridSize); - font-size: var(--smallFontSize); + padding-left: 8px; + font-size: 12px; } .issue-comment { @@ -128,7 +128,7 @@ flex-shrink: 0; max-width: 130px; line-height: 18px; - color: var(--secondFontColor); + color: #656565; font-weight: 600; overflow: hidden; text-overflow: ellipsis; @@ -139,7 +139,7 @@ flex-shrink: 0; line-height: 18px; white-space: nowrap; - color: var(--secondFontColor); + color: #656565; } .issue-comment-actions { @@ -151,7 +151,7 @@ .issue-comment-bubble-popup { width: 440px; - font-size: var(--smallFontSize); + font-size: 12px; } .issue-comment-form-text textarea { @@ -208,7 +208,7 @@ } .issue:not(.selected) .location-index { - background-color: var(--gray60); + background-color: #888; } .issue .menu:not(.issues-similar-issues-menu):not(.issue-changelog) { @@ -217,27 +217,27 @@ } .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; } @@ -252,15 +252,15 @@ } .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; } diff --git a/server/sonar-web/src/main/js/components/locations/SingleFileLocationNavigator.css b/server/sonar-web/src/main/js/components/locations/SingleFileLocationNavigator.css index 59ce297c1f8..7db34335f2a 100644 --- a/server/sonar-web/src/main/js/components/locations/SingleFileLocationNavigator.css +++ b/server/sonar-web/src/main/js/components/locations/SingleFileLocationNavigator.css @@ -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; } diff --git a/server/sonar-web/src/main/js/components/search-navigator.css b/server/sonar-web/src/main/js/components/search-navigator.css index f470ac723ee..916f726d785 100644 --- a/server/sonar-web/src/main/js/components/search-navigator.css +++ b/server/sonar-web/src/main/js/components/search-navigator.css @@ -33,19 +33,19 @@ } .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; diff --git a/server/sonar-web/src/main/js/components/ui/Rating.css b/server/sonar-web/src/main/js/components/ui/Rating.css index 29d053f5e9e..ebe095917c5 100644 --- a/server/sonar-web/src/main/js/components/ui/Rating.css +++ b/server/sonar-web/src/main/js/components/ui/Rating.css @@ -19,47 +19,47 @@ */ .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; } diff --git a/server/sonar-web/src/main/js/components/ui/popups.css b/server/sonar-web/src/main/js/components/ui/popups.css index f9381ff5644..5bbb3496c5e 100644 --- a/server/sonar-web/src/main/js/components/ui/popups.css +++ b/server/sonar-web/src/main/js/components/ui/popups.css @@ -20,15 +20,15 @@ .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 { @@ -111,7 +111,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-right .popup-arrow:after { @@ -139,7 +139,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-left .popup-arrow:after { @@ -166,7 +166,7 @@ top: 8px; border-right-width: 0; border-left-width: 6px; - border-left-color: var(--barBorderColor); + border-left-color: #e6e6e6; border-right-color: transparent; } @@ -194,7 +194,7 @@ top: 8px; border-left-width: 0; border-right-width: 6px; - border-right-color: var(--barBorderColor); + border-right-color: #e6e6e6; border-left-color: transparent; } @@ -222,7 +222,7 @@ 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; } @@ -248,7 +248,7 @@ bottom: -6px; top: auto; left: 8px; - border-color: var(--barBorderColor) transparent transparent; + border-color: #e6e6e6 transparent transparent; border-width: 6px 6px 0 6px; } @@ -263,7 +263,7 @@ /* #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 */ diff --git a/server/sonar-web/src/main/js/helpers/constants.ts b/server/sonar-web/src/main/js/helpers/constants.ts index 682fcab1814..2145390f909 100644 --- a/server/sonar-web/src/main/js/helpers/constants.ts +++ b/server/sonar-web/src/main/js/helpers/constants.ts @@ -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 }, { diff --git a/server/sonar-web/src/main/js/sonar-aligned/components/a11y/A11ySkipLinks.css b/server/sonar-web/src/main/js/sonar-aligned/components/a11y/A11ySkipLinks.css index 75f5043f47f..7c8b873dc94 100644 --- a/server/sonar-web/src/main/js/sonar-aligned/components/a11y/A11ySkipLinks.css +++ b/server/sonar-web/src/main/js/sonar-aligned/components/a11y/A11ySkipLinks.css @@ -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; } diff --git a/server/sonar-web/yarn.lock b/server/sonar-web/yarn.lock index fc4fbdf5456..d62c34d11e1 100644 --- a/server/sonar-web/yarn.lock +++ b/server/sonar-web/yarn.lock @@ -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" -- 2.39.5