123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958 |
- /*
- * 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.
- */
- import { OPACITY_20_PERCENT, OPACITY_75_PERCENT } from '../helpers/constants';
- import COLORS from './colors';
-
- const primary = {
- light: COLORS.indigo[400],
- default: COLORS.indigo[500],
- dark: COLORS.indigo[600],
- };
-
- const secondary = {
- light: COLORS.blueGrey[50],
- default: COLORS.blueGrey[200],
- dark: COLORS.blueGrey[400],
- darker: COLORS.blueGrey[500],
- };
-
- const danger = {
- lightest: COLORS.red[50],
- lighter: COLORS.red[300],
- light: COLORS.red[400],
- default: COLORS.red[600],
- dark: COLORS.red[700],
- darker: COLORS.red[800],
- };
-
- const codeSnippetLight = {
- annotations: [34, 84, 192],
- body: [51, 53, 60],
- constants: [126, 83, 5],
- comments: [109, 111, 119],
- keyword: [152, 29, 150],
- string: [32, 105, 31],
- 'keyword-light': [28, 28, 163], // Not used currently in code snippet
- 'preprocessing-directive': [47, 103, 48],
- };
-
- export const lightTheme = {
- id: 'light-theme',
- highlightTheme: 'atom-one-light.css',
- logo: 'sonarcloud-logo-black.svg',
-
- colors: {
- transparent: 'transparent',
- currentColor: 'currentColor',
-
- backgroundPrimary: COLORS.blueGrey[25],
- backgroundSecondary: COLORS.white,
- border: COLORS.grey[50],
- sonarcloud: COLORS.sonarcloud,
-
- // primary
- primaryLight: primary.light,
- primary: primary.default,
- primaryDark: primary.dark,
-
- // danger
- danger: danger.dark,
-
- // text
- textDisabled: COLORS.blueGrey[300],
- textSubdued: COLORS.blueGrey[400],
- textSuccess: COLORS.yellowGreen[700],
-
- //Project list card
- projectCardDisabled: COLORS.blueGrey[200],
-
- // buttons
- button: primary.default,
- buttonHover: primary.dark,
- buttonSecondary: COLORS.white,
- buttonSecondaryBorder: secondary.default,
- buttonSecondaryHover: secondary.light,
- buttonDisabled: secondary.light,
- buttonDisabledBorder: secondary.default,
-
- // danger buttons
- dangerButton: danger.default,
- dangerButtonHover: danger.dark,
- dangerButtonFocus: danger.default,
- dangerButtonSecondary: COLORS.white,
- dangerButtonSecondaryBorder: danger.lighter,
- dangerButtonSecondaryHover: danger.lightest,
- dangerButtonSecondaryFocus: danger.light,
-
- // third party button
- thirdPartyButton: COLORS.white,
- thirdPartyButtonBorder: secondary.default,
- thirdPartyButtonHover: secondary.light,
-
- // popup
- popup: COLORS.white,
- popupBorder: secondary.default,
-
- // Toasts
- toast: COLORS.white,
- toastText: secondary.darker,
- toastCloseIcon: secondary.dark,
-
- toastErrorBorder: danger.light,
- toastErrorIconBackground: danger.lightest,
-
- toastWarningBorder: COLORS.yellow[400],
- toastWarningIconBackground: COLORS.yellow[50],
-
- toastSuccessBorder: COLORS.yellowGreen[400],
- toastSuccessIconBackground: COLORS.yellowGreen[50],
-
- toastInfoBorder: COLORS.blue[400],
- toastInfoIconBackground: COLORS.blue[50],
-
- // spotlight
- spotlightPulseBackground: primary.default,
- spotlightBackgroundColor: COLORS.blueGrey[50],
-
- // modal
- modalContents: COLORS.white,
- modalOverlay: [...COLORS.blueGrey[900], OPACITY_75_PERCENT],
-
- // dropdown menu
- dropdownMenu: COLORS.white,
- dropdownMenuHover: secondary.light,
- dropdownMenuFocus: COLORS.indigo[50],
- dropdownMenuFocusBorder: primary.light,
- dropdownMenuDisabled: COLORS.white,
- dropdownMenuHeader: COLORS.white,
- dropdownMenuDanger: danger.default,
- dropdownMenuSubTitle: secondary.dark,
-
- // radio
- radio: primary.default,
- radioBorder: primary.default,
- radioHover: COLORS.indigo[50],
- radioFocus: COLORS.indigo[50],
- radioFocusBorder: COLORS.indigo[300],
- radioFocusOutline: [...COLORS.indigo[300], OPACITY_20_PERCENT],
- radioChecked: COLORS.indigo[50],
- radioDisabled: secondary.default,
- radioDisabledBackground: secondary.light,
- radioDisabledBorder: secondary.default,
- radioDisabledLabel: COLORS.blueGrey[300],
-
- // switch
- switch: secondary.default,
- switchDisabled: COLORS.blueGrey[100],
- switchActive: primary.default,
- switchHover: COLORS.blueGrey[300],
- switchHoverActive: primary.light,
- switchButton: COLORS.white,
- switchButtonDisabled: secondary.light,
-
- // sidebar
- // NOTE: these aren't used because the sidebar is exclusively dark. but for type purposes are listed here
- sidebarBackground: COLORS.blueGrey[700],
- sidebarItemActive: COLORS.blueGrey[800],
- sidebarBorder: COLORS.blueGrey[500],
- sidebarTextDisabled: COLORS.blueGrey[400],
- sidebarIcon: COLORS.blueGrey[400],
- sidebarActiveIcon: COLORS.blueGrey[200],
-
- //separator-circle
- separatorCircle: COLORS.blueGrey[200],
- separatorSlash: COLORS.blueGrey[300],
-
- // rule breakdown table
- breakdownBorder: COLORS.grey[100],
- breakdownHeaderBackground: COLORS.blueGrey[50],
-
- // flag message
- flagMessageBackground: COLORS.white,
-
- errorBorder: danger.light,
- errorBackground: danger.lightest,
- errorText: danger.dark,
-
- warningBorder: COLORS.yellow[400],
- warningBackground: COLORS.yellow[50],
- warningText: COLORS.yellow[900],
-
- successBorder: COLORS.green[400],
- successBackground: COLORS.green[50],
- successText: COLORS.green[900],
-
- infoBorder: COLORS.blue[400],
- infoBackground: COLORS.blue[50],
- infoText: COLORS.blue[900],
-
- // banner message
- bannerMessage: danger.lightest,
- bannerMessageIcon: danger.darker,
-
- // toggle buttons
- toggle: COLORS.white,
- toggleBorder: secondary.default,
- toggleHover: secondary.light,
- toggleFocus: [...secondary.default, OPACITY_20_PERCENT],
-
- // code snippet
- codeSnippetBackground: COLORS.blueGrey[25],
- codeSnippetBorder: COLORS.blueGrey[100],
- codeSnippetHighlight: secondary.default,
- codeSnippetBody: codeSnippetLight.body,
- codeSnippetAnnotations: codeSnippetLight.annotations,
- codeSnippetComments: codeSnippetLight.comments,
- codeSnippetConstants: codeSnippetLight.constants,
- codeSnippetKeyword: codeSnippetLight.keyword,
- codeSnippetString: codeSnippetLight.string,
- codeSnippetKeywordLight: codeSnippetLight['keyword-light'],
- codeSnippetPreprocessingDirective: codeSnippetLight['preprocessing-directive'],
- codeSnippetInline: COLORS.blueGrey[500],
-
- // code viewer
- codeLine: COLORS.white,
- codeLineBorder: COLORS.grey[100],
- codeLineIssueIndicator: COLORS.blueGrey[400], // Should be blueGrey[300], to be changed once code viewer is reworked
- codeLineLocationMarker: COLORS.red[200],
- codeLineLocationMarkerSelected: danger.lighter,
- codeLineLocationSelected: COLORS.blueGrey[100],
- codeLineCoveredUnderline: [...COLORS.green[500], 0.15],
- codeLineUncoveredUnderline: [...COLORS.red[500], 0.15],
-
- codeLineHover: secondary.light,
- codeLineHighlighted: COLORS.blueGrey[100],
- codeLineNewCodeUnderline: [...COLORS.indigo[300], 0.15],
- codeLineMeta: COLORS.blueGrey[300],
- codeLineMetaHover: secondary.dark,
- codeLineDuplication: secondary.default,
- codeLineCovered: COLORS.green[300],
- codeLineUncovered: danger.default,
- codeLinePartiallyCoveredA: danger.default,
- codeLinePartiallyCoveredB: COLORS.white,
- codeLineIssueSquiggle: danger.lighter,
- codeLineIssuePointerBorder: COLORS.white,
- codeLineLocationHighlighted: [...COLORS.blueGrey[200], 0.6],
- codeLineEllipsis: COLORS.white,
- codeLineEllipsisHover: secondary.light,
- codeLineIssueLocation: [...danger.lighter, 0.15],
- codeLineIssueLocationSelected: [...danger.lighter, 0.5],
- codeLineIssueMessageTooltip: secondary.darker,
-
- // code syntax highlight
- codeSyntaxBody: COLORS.codeSyntaxLight.body,
- codeSyntaxAnnotations: COLORS.codeSyntaxLight.annotations,
- codeSyntaxConstants: COLORS.codeSyntaxLight.constants,
- codeSyntaxComments: COLORS.codeSyntaxLight.comments,
- codeSyntaxKeyword: COLORS.codeSyntaxLight.keyword,
- codeSyntaxString: COLORS.codeSyntaxLight.string,
- codeSyntaxKeywordLight: COLORS.codeSyntaxLight['keyword-light'],
- codeSyntaxPreprocessingDirective: COLORS.codeSyntaxLight['preprocessing-directive'],
-
- // checkbox
- checkboxHover: COLORS.indigo[50],
- checkboxCheckedHover: primary.light,
- checkboxDisabled: secondary.light,
- checkboxDisabledChecked: secondary.default,
- checkboxLabel: COLORS.blueGrey[500],
-
- // input search
- searchHighlight: COLORS.tangerine[50],
-
- // input field
- inputBackground: COLORS.white,
- inputBorder: secondary.default,
- inputFocus: primary.light,
- inputDanger: danger.default,
- inputDangerFocus: danger.light,
- inputSuccess: COLORS.yellowGreen[500],
- inputSuccessFocus: COLORS.yellowGreen[400],
- inputDisabled: secondary.light,
- inputDisabledBorder: secondary.default,
- inputPlaceholder: secondary.dark,
-
- // required input
- inputRequired: danger.dark,
-
- // tooltip
- tooltipBackground: COLORS.blueGrey[600],
- tooltipSeparator: secondary.dark,
- tooltipHighlight: secondary.default,
-
- // avatar
- avatarBackground: COLORS.white,
- avatarBorder: COLORS.blueGrey[100],
-
- // badges
- badgeNew: COLORS.indigo[100],
- badgeDefault: COLORS.blueGrey[100],
- badgeDeleted: COLORS.red[100],
- badgeCounter: COLORS.blueGrey[100],
- badgeCounterFailed: COLORS.red[50],
- badgeCounterFailedBorder: COLORS.red[200],
-
- // pills
- pillDanger: COLORS.red[50],
- pillDangerBorder: COLORS.red[300],
- pillWarning: COLORS.yellow[50],
- pillWarningBorder: COLORS.yellow[300],
- pillInfo: COLORS.blue[50],
- pillInfoBorder: COLORS.blue[300],
- pillAccent: COLORS.indigo[50],
- pillAccentBorder: 'transparent',
-
- // input select
- selectOptionSelected: secondary.light,
-
- // breadcrumbs
- breadcrumb: 'transparent',
-
- // tab
- tabBorder: primary.light,
-
- // tabs
- tab: COLORS.blueGrey[400],
- tabSelected: primary.default,
- tabHover: COLORS.blueGrey[25],
-
- //table
- tableRowHover: COLORS.indigo[25],
- tableRowSelected: COLORS.indigo[300],
-
- // links
- linkDefault: primary.default,
- linkNaked: COLORS.blueGrey[700],
- linkActive: COLORS.indigo[600],
- linkDiscreet: 'currentColor',
- linkTooltipDefault: COLORS.indigo[200],
- linkTooltipActive: COLORS.indigo[100],
- linkBorder: COLORS.indigo[300],
- linkExternalIcon: COLORS.indigo[300],
- linkExternalIconActive: COLORS.indigo[400],
- contentLinkBorder: COLORS.blueGrey[200],
-
- // discreet select
- discreetBorder: secondary.default,
- discreetBackground: COLORS.white,
- discreetHover: secondary.light,
- discreetButtonHover: COLORS.indigo[500],
- discreetFocus: COLORS.indigo[50],
- discreetFocusBorder: primary.light,
-
- // interactive icon
- interactiveIcon: 'transparent',
- interactiveIconHover: COLORS.indigo[50],
- interactiveIconFocus: primary.default,
- bannerIcon: 'transparent',
- bannerIconHover: [...COLORS.red[600], OPACITY_20_PERCENT],
- bannerIconFocus: danger.default,
- discreetInteractiveIcon: secondary.dark,
- destructiveIcon: 'transparent',
- destructiveIconHover: danger.lightest,
- destructiveIconFocus: danger.default,
-
- // icons
- iconSoftwareImpactSeverityHigh: COLORS.red[500],
- iconSoftwareImpactSeverityMedium: COLORS.yellow[700],
- iconSoftwareImpactSeverityLow: COLORS.blue[700],
- iconSoftwareImpactSeverityDisabled: COLORS.blueGrey[300],
- iconSeverityMajor: danger.light,
- iconSeverityMinor: COLORS.yellowGreen[400],
- iconSeverityInfo: COLORS.blue[400],
- iconSeverityDisabled: COLORS.blueGrey[300],
- iconTypeDisabled: COLORS.blueGrey[300],
- iconDirectory: COLORS.orange[300],
- iconFile: COLORS.blueGrey[300],
- iconProject: COLORS.blueGrey[300],
- iconUnitTest: COLORS.blueGrey[300],
- iconFavorite: COLORS.tangerine[400],
- iconCheck: COLORS.green[500],
- iconPositiveUpdate: COLORS.green[300],
- iconNegativeUpdate: COLORS.red[300],
- iconTrendPositive: COLORS.green[400],
- iconTrendNegative: COLORS.red[400],
- iconTrendNeutral: COLORS.blue[400],
- iconTrendDisabled: COLORS.blueGrey[400],
- iconError: danger.default,
- iconWarning: COLORS.yellow[600],
- iconSuccess: COLORS.green[600],
- iconInfo: COLORS.blue[600],
- iconStatus: COLORS.blueGrey[200],
- iconStatusResolved: secondary.dark,
- iconNotificationsOn: COLORS.indigo[300],
- iconHelperHint: COLORS.blueGrey[100],
- iconHelperHintRaised: COLORS.blueGrey[400],
- iconRuleInheritanceOverride: danger.light,
-
- // numbered list
- numberedList: COLORS.indigo[50],
- numberedListText: COLORS.indigo[800],
-
- // unordered list
- listMarker: COLORS.blueGrey[300],
-
- // product news
- productNews: COLORS.indigo[50],
- productNewsHover: COLORS.indigo[100],
-
- // scrollbar
- scrollbar: COLORS.blueGrey[25],
-
- // resizer
- resizer: secondary.default,
-
- // coverage indicators
- coverageGreen: COLORS.green[500],
- coverageRed: danger.dark,
-
- // duplications indicators
- 'duplicationsIndicator.A': COLORS.green[500],
- 'duplicationsIndicator.B': COLORS.green[500],
- 'duplicationsIndicator.C': COLORS.yellowGreen[500],
- 'duplicationsIndicator.D': COLORS.yellow[500],
- 'duplicationsIndicator.E': COLORS.orange[500],
- 'duplicationsIndicator.F': COLORS.red[500],
- duplicationsIndicatorSecondary: secondary.light,
-
- // size indicators
- sizeIndicator: COLORS.blue[500],
-
- // rating colors
- 'rating.A': COLORS.green[200],
- 'rating.B': COLORS.yellowGreen[200],
- 'rating.C': COLORS.yellow[200],
- 'rating.D': COLORS.orange[200],
- 'rating.E': COLORS.red[200],
-
- // rating donut outside circle indicators
- 'ratingDonut.A': COLORS.green[400],
- 'ratingDonut.B': COLORS.yellowGreen[400],
- 'ratingDonut.C': COLORS.yellow[400],
- 'ratingDonut.D': COLORS.orange[400],
- 'ratingDonut.E': COLORS.red[400],
-
- // date picker
- datePicker: COLORS.white,
- datePickerIcon: secondary.default,
- datePickerDisabled: COLORS.white,
- datePickerDefault: COLORS.white,
- datePickerHover: COLORS.blueGrey[100],
- datePickerSelected: primary.default,
- datePickerRange: COLORS.indigo[100],
-
- // tags
- tag: secondary.light,
-
- // quality gate indicator
- qgIndicatorPassed: COLORS.green[200],
- qgIndicatorFailed: COLORS.red[200],
- qgIndicatorNotComputed: COLORS.blueGrey[200],
-
- // quality gate status card
- qgCardFailed: COLORS.red[300],
-
- // quality gate texts colors
- qgConditionNotCayc: COLORS.red[600],
- qgConditionCayc: COLORS.green[600],
-
- // main bar
- mainBar: COLORS.white,
- mainBarHover: COLORS.blueGrey[600],
- mainBarLogo: COLORS.white,
- mainBarDarkLogo: COLORS.blueGrey[800],
- mainBarNews: COLORS.indigo[50],
- menuBorder: primary.light,
-
- // navbar
- navbar: COLORS.white,
- navbarTextMeta: secondary.darker,
-
- // filterbar
- filterbar: COLORS.white,
- filterbarBorder: COLORS.blueGrey[100],
-
- // facets
- facetHeader: COLORS.blueGrey[600],
- facetHeaderDisabled: COLORS.blueGrey[400],
- facetItemSelected: COLORS.indigo[50],
- facetItemSelectedHover: COLORS.indigo[100],
- facetItemSelectedBorder: primary.light,
- facetItemDisabled: COLORS.blueGrey[300],
- facetItemLight: secondary.dark,
- facetItemGraph: secondary.default,
- facetKeyboardHint: COLORS.blueGrey[50],
- facetToggleActive: COLORS.green[500],
- facetToggleInactive: COLORS.red[500],
- facetToggleHover: COLORS.blueGrey[600],
-
- // subnavigation sidebar
- subnavigation: COLORS.white,
- subnavigationHover: COLORS.blueGrey[50],
- subnavigationSelected: COLORS.blueGrey[100],
- subnavigationBorder: COLORS.grey[100],
- subnavigationSeparator: COLORS.grey[50],
- subnavigationSubheading: COLORS.blueGrey[25],
- subnavigationDisabled: COLORS.blueGrey[300],
- subnavigationExecutionFlow: COLORS.blueGrey[25],
- subnavigationExecutionFlowBorder: secondary.default,
- subnavigationExecutionFlowSeparator: COLORS.blueGrey[100],
- subnavigationExecutionFlowActive: COLORS.indigo[500],
-
- // footer
- footer: COLORS.white,
- footerBorder: COLORS.grey[100],
-
- // project
- projectCardBackground: COLORS.white,
- projectCardBorder: COLORS.blueGrey[100],
- projectCardInfo: COLORS.blueGrey[35],
-
- // overview
- overviewCardDefaultIcon: secondary.light,
- iconOverviewIssue: COLORS.blueGrey[400],
- overviewCardWarningIcon: COLORS.yellow[50],
- overviewCardErrorIcon: COLORS.red[100],
- overviewCardSuccessIcon: COLORS.green[200],
-
- // overview software impact breakdown
- overviewSoftwareImpactSeverityNeutral: COLORS.blueGrey[35],
- overviewSoftwareImpactSeverityHigh: COLORS.red[100],
- overviewSoftwareImpactSeverityMedium: COLORS.yellow[100],
- overviewSoftwareImpactSeverityLow: COLORS.blue[100],
-
- // graph - chart
- graphPointCircleColor: COLORS.white,
- 'graphLineColor.0': COLORS.blue[500],
- 'graphLineColor.1': COLORS.blue[700],
- 'graphLineColor.2': COLORS.blue[300],
- 'graphLineColor.3': COLORS.blue[500],
- 'graphLineColor.4': COLORS.blue[700],
- 'graphLineColor.5': COLORS.blue[300],
- graphGridColor: COLORS.grey[50],
- graphCursorLineColor: COLORS.blueGrey[400],
- newCodeHighlight: COLORS.indigo[300],
- graphZoomBackgroundColor: COLORS.blueGrey[25],
- graphZoomBorderColor: COLORS.blueGrey[100],
- graphZoomHandleColor: COLORS.blueGrey[400],
- graphLegendBorder: secondary.darker,
-
- // page
- pageTitle: COLORS.blueGrey[700],
- pageContentLight: secondary.dark,
- pageContent: secondary.darker,
- pageContentDark: COLORS.blueGrey[600],
- pageBlock: COLORS.white,
- pageBlockBorder: COLORS.blueGrey[100],
-
- // core concepts
- coreConceptsCloseIcon: COLORS.blueGrey[300],
- coreConceptsTitle: secondary.darker,
- coreConceptsBody: secondary.darker,
- coreConceptsHomeBorder: COLORS.blueGrey[100],
- coreConceptsCompleted: COLORS.green[500],
- coreConceptsPulse: COLORS.indigo[500],
- coreConceptsPulseFallback: COLORS.white,
-
- // progress bar
- coreConceptsProgressBar: secondary.light,
-
- // issue box
- issueBoxSelectedBorder: danger.lighter,
- issueBoxBorder: secondary.default,
- issueBoxBorderDepracated: secondary.default,
- issueTypeIcon: COLORS.red[200],
-
- // separator
- pipeSeparator: COLORS.blueGrey[100],
-
- // drilldown link
- drilldown: secondary.darker,
- drilldownBorder: secondary.default,
-
- // selection card
- selectionCardHeader: secondary.darker,
- selectionCardDisabled: secondary.light,
- selectionCardDisabledText: secondary.dark,
- selectionCardBorder: COLORS.blueGrey[100],
- selectionCardBorderHover: COLORS.indigo[200],
- selectionCardBorderSelected: primary.light,
- selectionCardBorderDisabled: secondary.default,
-
- // bubble charts
- bubbleChartLine: COLORS.grey[50],
- bubbleDefault: [...COLORS.blue[500], 0.3],
- 'bubble.1': [...COLORS.green[500], 0.3],
- 'bubble.2': [...COLORS.yellowGreen[500], 0.3],
- 'bubble.3': [...COLORS.yellow[500], 0.3],
- 'bubble.4': [...COLORS.orange[500], 0.3],
- 'bubble.5': [...COLORS.red[500], 0.3],
-
- // new code legend
- newCodeLegend: [...COLORS.indigo[300], 0.15],
- newCodeLegendBorder: COLORS.indigo[200],
-
- // highlighted section
- highlightedSection: COLORS.blueGrey[25],
- highlightedSectionBorder: COLORS.blueGrey[100],
-
- // highlight ring
- highlightRingBackground: secondary.light,
-
- // activity comments
- activityCommentPipe: COLORS.tangerine[200],
-
- // illustrations
- illustrationOutline: COLORS.blueGrey[400],
- illustrationInlineBorder: COLORS.blueGrey[100],
- illustrationPrimary: COLORS.indigo[400],
- illustrationSecondary: COLORS.indigo[200],
- illustrationShade: COLORS.indigo[25],
-
- // news bar
- newsBar: COLORS.white,
- newsBorder: COLORS.grey[100],
- newsContent: COLORS.white,
- newsTag: COLORS.blueGrey[50],
- roadmap: COLORS.indigo[25],
- roadmapContent: 'transparent',
-
- // project analyse page
- almCardBorder: COLORS.grey[100],
-
- // Keyboard hint
- keyboardHintKey: COLORS.blueGrey[100],
-
- // progressBar
- progressBarForeground: COLORS.indigo[500],
- progressBarBackground: COLORS.indigo[100],
- },
-
- // contrast colors to be used for text when using a color background with the same name
- // must match the color name
- contrasts: {
- backgroundPrimary: COLORS.blueGrey[900],
- backgroundSecondary: COLORS.blueGrey[900],
- primaryLight: secondary.darker,
- primary: COLORS.white,
-
- // switch
- switchHover: primary.light,
- switchButton: primary.default,
- switchButtonDisabled: COLORS.blueGrey[300],
-
- // sidebar
- sidebarBackground: COLORS.blueGrey[200],
- sidebarItemActive: COLORS.blueGrey[25],
-
- // flag message
- flagMessageBackground: secondary.darker,
-
- // info message
- infoBackground: COLORS.blue[900],
-
- // banner message
- bannerMessage: COLORS.red[900],
-
- // buttons
- buttonDisabled: COLORS.blueGrey[300],
- buttonSecondary: secondary.darker,
-
- // danger buttons
- dangerButton: COLORS.white,
- dangerButtonSecondary: danger.dark,
-
- // third party button
- thirdPartyButton: secondary.darker,
-
- // popup
- popup: secondary.darker,
-
- // dropdown menu
- dropdownMenu: secondary.darker,
- dropdownMenuDisabled: COLORS.blueGrey[300],
- dropdownMenuHeader: secondary.dark,
-
- // toggle buttons
- toggle: secondary.darker,
- toggleHover: secondary.darker,
-
- // code viewer
- codeLineNewCodeUnderline: COLORS.indigo[500],
- codeLineCoveredUnderline: COLORS.green[700],
- codeLineUncoveredUnderline: COLORS.red[700],
- codeLineEllipsis: COLORS.blueGrey[300],
- codeLineEllipsisHover: secondary.dark,
- codeLineLocationMarker: COLORS.red[900],
- codeLineLocationMarkerSelected: COLORS.red[900],
- codeLineIssueMessageTooltip: COLORS.blueGrey[25],
-
- // code snippet
- codeSnippetHighlight: danger.default,
-
- // checkbox
- checkboxDisabled: secondary.default,
-
- // input search
- searchHighlight: secondary.darker,
-
- // input field
- inputBackground: secondary.darker,
- inputDisabled: COLORS.blueGrey[300],
-
- // tooltip
- tooltipBackground: secondary.light,
-
- // badges
- badgeNew: COLORS.indigo[900],
- badgeDefault: COLORS.blueGrey[700],
- badgeDeleted: COLORS.red[900],
- badgeCounter: secondary.darker,
- badgeCounterFailed: danger.dark,
-
- // pills
- pillDanger: COLORS.red[800],
- pillDangerIcon: COLORS.red[700],
- pillWarning: COLORS.yellow[800],
- pillWarningIcon: COLORS.yellow[700],
- pillInfo: COLORS.blue[800],
- pillInfoIcon: COLORS.blue[700],
- pillAccent: COLORS.indigo[500],
-
- // project cards
- overviewCardDefaultIcon: COLORS.blueGrey[500],
- overviewCardWarningIcon: COLORS.yellow[700],
- overviewCardErrorIcon: COLORS.red[500],
- overviewCardSuccessIcon: COLORS.green[500],
-
- // breadcrumbs
- breadcrumb: secondary.dark,
-
- // discreet select
- discreetBackground: secondary.darker,
- discreetHover: secondary.darker,
-
- // interactive icons
- interactiveIcon: primary.dark,
- interactiveIconHover: COLORS.indigo[800],
- bannerIcon: danger.darker,
- bannerIconHover: danger.darker,
- destructiveIcon: danger.default,
- destructiveIconHover: danger.darker,
-
- // icons
- iconSeverityMajor: COLORS.white,
- iconSeverityMinor: COLORS.white,
- iconSeverityInfo: COLORS.white,
- iconStatusResolved: COLORS.white,
- iconHelperHint: secondary.darker,
- iconHelperHintRaised: COLORS.white,
-
- // numbered list
- numberedList: COLORS.indigo[800],
-
- // product news
- productNews: secondary.darker,
- productNewsHover: secondary.darker,
-
- // scrollbar
- scrollbar: COLORS.grey[100],
-
- // size indicators
- sizeIndicator: COLORS.white,
-
- // rating colors
- 'rating.A': COLORS.green[900],
- 'rating.B': COLORS.yellowGreen[900],
- 'rating.C': COLORS.yellow[900],
- 'rating.D': COLORS.orange[900],
- 'rating.E': COLORS.red[900],
-
- // date picker
- datePicker: COLORS.blueGrey[300],
- datePickerDisabled: COLORS.blueGrey[300],
- datePickerDefault: COLORS.blueGrey[600],
- datePickerHover: COLORS.blueGrey[600],
- datePickerSelected: COLORS.white,
- datePickerRange: COLORS.blueGrey[600],
-
- // tags
- tag: secondary.darker,
-
- // quality gate indicator
- qgIndicatorPassed: COLORS.green[800],
- qgIndicatorFailed: danger.darker,
- qgIndicatorNotComputed: COLORS.blueGrey[800],
-
- // main bar
- mainBar: secondary.darker,
- mainBarLogo: COLORS.black,
- mainBarDarkLogo: COLORS.white,
- mainBarNews: secondary.darker,
-
- // navbar
- navbar: secondary.darker,
-
- // filterbar
- filterbar: secondary.darker,
-
- // facet
- facetKeyboardHint: secondary.darker,
- facetToggleActive: COLORS.white,
- facetToggleInactive: COLORS.white,
-
- // subnavigation sidebar
- subnavigation: secondary.darker,
- subnavigationExecutionFlow: COLORS.blueGrey[700],
- subnavigationHover: COLORS.blueGrey[700],
- subnavigationSubheading: secondary.dark,
-
- // footer
- footer: secondary.dark,
-
- // page
- pageBlock: secondary.darker,
-
- // graph - chart
- graphZoomHandleColor: COLORS.white,
-
- // progress bar
- coreConceptsProgressBar: primary.light,
-
- // issue box
- issueTypeIcon: COLORS.red[900],
- iconSeverityDisabled: COLORS.white,
- iconTypeDisabled: COLORS.white,
-
- // selection card
- selectionCardDisabled: secondary.dark,
-
- // bubble charts
- bubbleDefault: COLORS.blue[500],
- 'bubble.1': COLORS.green[500],
- 'bubble.2': COLORS.yellowGreen[500],
- 'bubble.3': COLORS.yellow[500],
- 'bubble.4': COLORS.orange[500],
- 'bubble.5': COLORS.red[500],
-
- // news bar
- newsBar: COLORS.blueGrey[600],
- newsContent: COLORS.blueGrey[500],
- newsTag: COLORS.blueGrey[500],
- roadmap: COLORS.blueGrey[600],
- roadmapContent: COLORS.blueGrey[500],
-
- // Keyboard hint
- keyboardHintKey: COLORS.blueGrey[500],
- },
-
- // predefined shadows
- shadows: {
- xs: [[0, 1, 2, 0, ...COLORS.blueGrey[700], 0.05]],
- sm: [
- [0, 1, 3, 0, ...COLORS.blueGrey[700], 0.05],
- [0, 1, 25, 0, ...COLORS.blueGrey[700], 0.05],
- ],
- md: [
- [0, 4, 8, -2, ...COLORS.blueGrey[700], 0.1],
- [0, 2, 15, -2, ...COLORS.blueGrey[700], 0.06],
- ],
- lg: [
- [0, 12, 16, -4, ...COLORS.blueGrey[700], 0.1],
- [0, 4, 6, -2, ...COLORS.blueGrey[700], 0.05],
- ],
- xl: [
- [15, 20, 24, -4, ...COLORS.blueGrey[700], 0.1],
- [0, 8, 8, -4, ...COLORS.blueGrey[700], 0.06],
- ],
- scrolling: [[0, 0, 8, 0, ...COLORS.blueGrey[700], 0.2]],
- },
-
- // predefined borders
- borders: {
- default: ['1px', 'solid', ...COLORS.grey[50]],
- active: ['4px', 'solid', ...primary.light],
- xsActive: ['3px', 'solid', ...primary.light],
- focus: ['4px', 'solid', ...secondary.default, OPACITY_20_PERCENT],
- heavy: ['2px', 'solid', ...COLORS.grey[50]],
- },
-
- avatar: {
- color: [
- COLORS.blueGrey[100],
- COLORS.indigo[100],
- COLORS.tangerine[100],
- COLORS.green[100],
- COLORS.yellowGreen[100],
- COLORS.yellow[100],
- COLORS.orange[100],
- COLORS.red[100],
- COLORS.blue[100],
- ],
- contrast: [
- COLORS.blueGrey[900],
- COLORS.indigo[900],
- COLORS.tangerine[900],
- COLORS.green[900],
- COLORS.yellowGreen[900],
- COLORS.yellow[900],
- COLORS.orange[900],
- COLORS.red[900],
- COLORS.blue[900],
- ],
- },
-
- // Theme specific icons and images
- images: {
- azure: 'azure.svg',
- bitbucket: 'bitbucket.svg',
- github: 'github.svg',
- gitlab: 'gitlab.svg',
- microsoft: 'microsoft.svg',
- 'cayc-1': 'cayc-1-light.gif',
- 'cayc-2': 'cayc-2-light.gif',
- 'cayc-3': 'cayc-3-light.svg',
- 'cayc-4': 'cayc-4-light.svg',
- 'new-code-1': 'new-code-1.svg',
- 'new-code-2': 'new-code-2-light.svg',
- 'new-code-3': 'new-code-3.gif',
- 'new-code-4': 'new-code-4.gif',
- 'new-code-5': 'new-code-5.png',
- 'pull-requests-1': 'pull-requests-1-light.gif',
- 'pull-requests-2': 'pull-requests-2-light.svg',
- 'pull-requests-3': 'pull-requests-3.svg',
- 'quality-gate-1': 'quality-gate-1.png',
- 'quality-gate-2a': 'quality-gate-2a.svg',
- 'quality-gate-2b': 'quality-gate-2b.png',
- 'quality-gate-2c': 'quality-gate-2c.png',
- 'quality-gate-3': 'quality-gate-3-light.svg',
- 'quality-gate-4': 'quality-gate-4.png',
- 'quality-gate-5': 'quality-gate-5.svg',
-
- // project configure page
- AzurePipe: '/images/alms/azure.svg',
- BitbucketPipe: '/images/alms/bitbucket.svg',
- BitbucketAzure: '/images/alms/azure.svg',
- BitbucketCircleCI: '/images/tutorials/circleci.svg',
- GitHubActions: '/images/alms/github.svg',
- GitHubCircleCI: '/images/tutorials/circleci.svg',
- GitHubTravis: '/images/tutorials/TravisCI-Mascot.png',
- GitLabPipeline: '/images/alms/gitlab.svg',
- },
- };
|