diff options
Diffstat (limited to 'server/sonar-web/src/main/js')
33 files changed, 247 insertions, 994 deletions
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'), }} > <Image diff --git a/server/sonar-web/src/main/js/apps/coding-rules/styles.css b/server/sonar-web/src/main/js/apps/coding-rules/styles.css index 8cc4f50d58d..27a5e03ef1b 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/styles.css +++ b/server/sonar-web/src/main/js/apps/coding-rules/styles.css @@ -27,13 +27,13 @@ .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 { @@ -82,14 +82,14 @@ } .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 { @@ -99,13 +99,13 @@ .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 { @@ -154,7 +154,7 @@ } .coding-rules-detail-parameter-value { - font-family: var(--sourceCodeFontFamily); + font-family: Consolas, 'Ubuntu Mono', 'Liberation Mono', Menlo, Courier, monospace; word-break: break-all; } @@ -166,7 +166,7 @@ .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, @@ -211,7 +211,7 @@ } .coding-rules-detail-quality-profile-inheritance { - font-size: var(--smallFontSize); + font-size: 12px; font-weight: normal; } @@ -225,7 +225,7 @@ } .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 { @@ -239,11 +239,11 @@ } .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 { @@ -273,14 +273,14 @@ } } .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 { @@ -293,10 +293,10 @@ } .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; } diff --git a/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/SnippetViewer.css b/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/SnippetViewer.css index 46935fe2b03..d4e6f73f275 100644 --- a/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/SnippetViewer.css +++ b/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/SnippetViewer.css @@ -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; } @@ -46,10 +46,10 @@ .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; } 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<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 diff --git a/server/sonar-web/src/main/js/apps/web-api/styles/web-api.css b/server/sonar-web/src/main/js/apps/web-api/styles/web-api.css index 7bddceae3b3..da075b8b900 100644 --- a/server/sonar-web/src/main/js/apps/web-api/styles/web-api.css +++ b/server/sonar-web/src/main/js/apps/web-api/styles/web-api.css @@ -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 { diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/Line.css b/server/sonar-web/src/main/js/components/SourceViewer/components/Line.css index 24fb5b1c2bd..b5822602448 100644 --- a/server/sonar-web/src/main/js/components/SourceViewer/components/Line.css +++ b/server/sonar-web/src/main/js/components/SourceViewer/components/Line.css @@ -17,103 +17,11 @@ * 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 { @@ -123,125 +31,3 @@ 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; -} diff --git a/server/sonar-web/src/main/js/components/SourceViewer/styles.css b/server/sonar-web/src/main/js/components/SourceViewer/styles.css index 6c6c0f68c5c..0779f8fda2e 100644 --- a/server/sonar-web/src/main/js/components/SourceViewer/styles.css +++ b/server/sonar-web/src/main/js/components/SourceViewer/styles.css @@ -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; } @@ -37,41 +37,41 @@ .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 { @@ -83,23 +83,23 @@ } .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; } @@ -118,12 +118,12 @@ .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; } @@ -133,16 +133,16 @@ } .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); } diff --git a/server/sonar-web/src/main/js/components/activity-graph/DataTableModal.tsx b/server/sonar-web/src/main/js/components/activity-graph/DataTableModal.tsx index 8519a9ccb7c..f67b7fa00dd 100644 --- a/server/sonar-web/src/main/js/components/activity-graph/DataTableModal.tsx +++ b/server/sonar-web/src/main/js/components/activity-graph/DataTableModal.tsx @@ -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; } 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<Props, Fixes> { 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<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': 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; } |