1 files changed, 743 insertions, 0 deletions
diff --git a/server/sonar-web/design-system/src/theme/light.ts b/server/sonar-web/design-system/src/theme/light.ts
new file mode 100644
index 00000000000..8b10b339326
--- /dev/null
+++ b/server/sonar-web/design-system/src/theme/light.ts
@@ -0,0 +1,743 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2023 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 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 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,
+
+    // 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,
+
+    // 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], 0.2],
+    radioChecked: COLORS.indigo[50],
+    radioDisabled: secondary.default,
+    radioDisabledBackground: secondary.light,
+    radioDisabledBorder: secondary.default,
+
+    // 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],
+
+    // flag message
+    flagMessageBackground: COLORS.white,
+
+    errorBorder: danger.light,
+    errorBackground: danger.lightest,
+    errorText: danger.dark,
+
+    warningBorder: COLORS.yellow[400],
+    warningBackground: COLORS.yellow[50],
+
+    successBorder: COLORS.green[400],
+    successBackground: COLORS.green[50],
+
+    infoBorder: COLORS.blue[400],
+    infoBackground: COLORS.blue[50],
+
+    // banner message
+    bannerMessage: danger.lightest,
+    bannerMessageIcon: danger.darker,
+
+    // toggle buttons
+    toggle: COLORS.white,
+    toggleBorder: secondary.default,
+    toggleHover: secondary.light,
+    toggleFocus: [...secondary.default, 0.2],
+
+    // code snippet
+    codeSnippetBackground: COLORS.blueGrey[25],
+    codeSnippetBorder: COLORS.blueGrey[100],
+    codeSnippetHighlight: secondary.default,
+
+    // code viewer
+    codeLineIssueIndicator: COLORS.blueGrey[400], // Should be blueGrey[300], to be changed once code viewer is reworked
+
+    // 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,
+
+    // 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],
+
+    // input select
+    selectOptionSelected: secondary.light,
+
+    // breadcrumbs
+    breadcrumb: 'transparent',
+
+    // tab
+    tabBorder: primary.light,
+
+    //table
+    tableRowHover: COLORS.indigo[25],
+    tableRowSelected: COLORS.indigo[300],
+
+    // links
+    linkDefault: primary.default,
+    linkActive: COLORS.indigo[600],
+    linkDiscreet: 'currentColor',
+    linkTooltipDefault: COLORS.indigo[200],
+    linkTooltipActive: COLORS.indigo[100],
+
+    // 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], 0.2],
+    bannerIconFocus: danger.default,
+    discreetInteractiveIcon: secondary.dark,
+    destructiveIcon: 'transparent',
+    destructiveIconHover: danger.lightest,
+    destructiveIconFocus: danger.default,
+
+    // icons
+    iconSeverityMajor: danger.light,
+    iconSeverityMinor: COLORS.yellowGreen[400],
+    iconSeverityInfo: COLORS.blue[400],
+    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],
+    iconRuleInheritanceOverride: danger.light,
+
+    // numbered list
+    numberedList: COLORS.indigo[50],
+
+    // 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
+    'duplicationsRating.A': COLORS.green[500],
+    'duplicationsRating.B': COLORS.yellowGreen[500],
+    'duplicationsRating.C': COLORS.yellow[500],
+    'duplicationsRating.D': COLORS.orange[500],
+    'duplicationsRating.E': COLORS.red[500],
+    duplicationsRatingSecondary: 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],
+
+    // 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],
+
+    // 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],
+    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.indigo[50],
+    subnavigationBorder: COLORS.grey[100],
+    subnavigationSeparator: COLORS.grey[50],
+    subnavigationSubheading: COLORS.blueGrey[25],
+
+    // footer
+    footer: COLORS.white,
+    footerBorder: COLORS.grey[100],
+
+    // project
+    projectCardBackground: COLORS.white,
+    projectCardBorder: COLORS.blueGrey[100],
+
+    // overview
+    iconOverviewIssue: COLORS.blueGrey[400],
+
+    // graph - chart
+    graphPointCircleColor: COLORS.white,
+    'graphLineColor.0': COLORS.blue[500],
+    'graphLineColor.1': COLORS.blue[700],
+    'graphLineColor.2': COLORS.blue[300],
+    'graphLineColor.3': COLORS.blue[900],
+    graphGridColor: COLORS.grey[50],
+    graphCursorLineColor: COLORS.blueGrey[400],
+    newCodeHighlight: COLORS.indigo[300],
+    graphZoomBackgroundColor: COLORS.blueGrey[25],
+    graphZoomBorderColor: COLORS.blueGrey[100],
+    graphZoomHandleColor: COLORS.blueGrey[400],
+
+    // 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
+    issueBoxBorder: danger.lighter,
+    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,
+    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],
+
+    // leak legend
+    leakLegend: [...COLORS.indigo[300], 0.15],
+    leakLegendBorder: COLORS.indigo[100],
+
+    // hotspot
+    hotspotStatus: COLORS.blueGrey[25],
+
+    // 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],
+  },
+
+  // 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,
+
+    // 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 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,
+
+    // 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,
+
+    // 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,
+    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],
+
+    // 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],
+  },
+
+  // 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],
+    ],
+  },
+
+  // predefined borders
+  borders: {
+    default: ['1px', 'solid', ...COLORS.grey[50]],
+    active: ['3px', 'solid', ...primary.light],
+    focus: ['4px', 'solid', ...secondary.default, 0.2],
+  },
+
+  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',
+  },
+};
+
+export default lightTheme;