feat: add support for dark mode v1

.env

@@ -66,3 +66,4 @@ FEATURE_DEFAULT_MERGE_STRATEGY=
 FEATURE_CLUSTER_MAP_ENABLE=true
 FEATURE_DEFAULT_LANDING_RB_ENABLE=false
 FEATURE_ACTION_AUDIOS_ENABLE=true
+FEATURE_EXPERIMENTAL_THEMING_ENABLE=false

config.md

@@ -50,5 +50,6 @@
 | TRIGGER_API_TIMEOUT                          | 60000      | Default timeout for all API requests for Trigger calls (Deploy artifacts, charts) in DASHBOARD                   |
 | FEATURE_HIDE_USER_DIRECT_PERMISSIONS_FOR_NON_SUPER_ADMINS | "true" | Would hide the user direct permissions for non-super admin users in User Permissions |
 | FEATURE_ACTION_AUDIOS_ENABLE                 | true         | Would enable audios in dashboard   |
+| FEATURE_EXPERIMENTAL_THEMING_ENABLE                       | true         | Would enable theming in dashboard   |
 
 # DASHBOARD CONFIG SECRET

src/App.tsx

@@ -29,6 +29,11 @@ import {
     ToastVariantType,
     API_STATUS_CODES,
     logExceptionToSentry,
+    Button,
+    ButtonVariantType,
+    ButtonStyleType,
+    ComponentSizeType,
+    useTheme,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { ReactComponent as ICSparkles } from '@Icons/ic-sparkles.svg'
 import { ReactComponent as ICArrowClockwise } from '@Icons/ic-arrow-clockwise.svg'
@@ -49,6 +54,8 @@ const Login = lazy(() => import('./components/login/Login'))
 const GenericDirectApprovalModal = importComponentFromFELibrary('GenericDirectApprovalModal')
 
 export default function App() {
+    const {currentTheme, handleThemeChange} = useTheme()
+
     const onlineToastRef = useRef(null)
     const updateToastRef = useRef(null)
     const [errorPage, setErrorPage] = useState<boolean>(false)
@@ -321,7 +328,7 @@ export default function App() {
             <Suspense fallback={null}>
                 {validating ? (
                     <div className="full-height-width">
-                        <DevtronProgressing parentClasses="h-100 flex bcn-0" classes="icon-dim-80" />
+                        <DevtronProgressing parentClasses="h-100 flex bg__primary" classes="icon-dim-80" />
                     </div>
                 ) : (
                     <>
@@ -360,6 +367,20 @@ export default function App() {
                     </>
                 )}
             </Suspense>
+            {window._env_.FEATURE_EXPERIMENTAL_THEMING_ENABLE && (
+                <div className="dc__position-abs dc__bottom-30-imp dc__right-20">
+                    <Button
+                        icon={<ICSparkles />}
+                        variant={ButtonVariantType.borderLess}
+                        style={ButtonStyleType.neutral}
+                        size={ComponentSizeType.small}
+                        ariaLabel="Toggle theme"
+                        showAriaLabelInTippy={false}
+                        onClick={handleThemeChange}
+                        dataTestId="toggle-theme"
+                    />
+                </div>
+            )}
         </div>
     )
 }

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/CompareConfigView.tsx

@@ -25,7 +25,7 @@ const CompareConfigView = ({
     displayName,
 }: CompareConfigViewProps) => (
     <div className={`flexbox-col ${className ?? ''}`}>
-        <div className="dc__grid-half bcn-0 dc__position-sticky dc__top-0 dc__zi-10">
+        <div className="dc__grid-half bg__primary dc__position-sticky dc__top-0 dc__zi-10">
             <div className="dc__border-right px-12 py-6 flexbox dc__gap-8 dc__border-bottom dc__align-items-center">
                 <ICCheck className="scn-9 icon-dim-16 dc__no-shrink" />
                 <span className="cn-9 fs-12 fw-6 lh-20">Published</span>

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/ConfigHeader.tsx

@@ -40,7 +40,7 @@ const ConfigHeaderTab = ({
             onClick={handleChange}
             type="button"
             disabled={isDisabled}
-            className={`dc__transparent flexbox dc__align-items-center dc__gap-6 py-8 px-12 ${buttonContainerClass} ${isDisabled && !hasError ? 'dc__disabled' : ''} ${isActive ? 'bcn-0 cn-9' : 'cn-7'} ${isNextTabActive ? 'dc__border-right' : ''} ${isPreviousTabActive ? 'dc__border-left' : ''} fs-12 fw-6 lh-20`}
+            className={`dc__transparent flexbox dc__align-items-center dc__gap-6 py-8 px-12 ${buttonContainerClass} ${isDisabled && !hasError ? 'dc__disabled' : ''} ${isActive ? 'bg__primary cn-9' : 'cn-7'} ${isNextTabActive ? 'dc__border-right' : ''} ${isPreviousTabActive ? 'dc__border-left' : ''} fs-12 fw-6 lh-20`}
             role="tab"
         >
             {hasError ? (
@@ -76,7 +76,7 @@ const ConfigHeader = ({
     const activeTabIndex = tabKeys.indexOf(configHeaderTab)
 
     return (
-        <div className="flexbox w-100 dc__align-items-center bc-n50 dc__box-shadow-bottom-n2">
+        <div className="flexbox w-100 dc__align-items-center bg__secondary dc__box-shadow-bottom-n2">
             {tabKeys.map((currentTab: ConfigHeaderTabType, index: number) => (
                 <InvalidYAMLTippyWrapper
                     key={currentTab}

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/ConfigToolbar.tsx

@@ -367,7 +367,7 @@ const ConfigToolbar = ({
 
     return (
         <div
-            className={`px-12 bcn-0 dc__border-bottom-n1 flexbox dc__align-items-center dc__content-space dc__gap-8 dc__no-shrink h-32 ${!showProtectedTabs ? 'py-4' : ''}`}
+            className={`px-12 bg__primary dc__border-bottom-n1 flexbox dc__align-items-center dc__content-space dc__gap-8 dc__no-shrink h-32 ${!showProtectedTabs ? 'py-4' : ''}`}
         >
             <div className="flexbox dc__content-space dc__align-items-center dc__gap-8 dc__align-self-stretch">
                 {getLHSActionNodes()}

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/DTChartSelector.tsx

@@ -119,7 +119,7 @@ const ChartSelectorDropdown = ({
                 <>
                     {customCharts.length > 0 && (
                         <div
-                            className="pt-12 pr-12 pb-8 pl-12 dc__position-sticky bcn-0 top-0 dc__top-radius-4"
+                            className="pt-12 pr-12 pb-8 pl-12 dc__position-sticky bg__primary top-0 dc__top-radius-4"
                             onClick={stopPropagation}
                         >
                             <RadioGroup

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/DeploymentTemplate.tsx

@@ -1678,7 +1678,7 @@ const DeploymentTemplate = ({
         }
 
         return (
-            <div className="flexbox dc__gap-6 dc__align-items-center dc__border-top-n1 bc-n50 py-6 px-10">
+            <div className="flexbox dc__gap-6 dc__align-items-center dc__border-top-n1 bg__secondary py-6 px-10">
                 <ICInfoOutlineGrey className="flex icon-dim-16 dc__no-shrink scn-6" />
                 <div className="flexbox">
                     <span className="cn-8 fs-12 fw-4 lh-20 dc__truncate">
@@ -1827,7 +1827,7 @@ const DeploymentTemplate = ({
         }
 
         return (
-            <div className="dc__border br-4 m-8 flexbox-col dc__content-space flex-grow-1 dc__overflow-scroll bcn-0">
+            <div className="dc__border br-4 m-8 flexbox-col dc__content-space flex-grow-1 dc__overflow-scroll bg__primary">
                 {renderBody()}
 
                 {showDeleteOverrideDialog && (
@@ -1891,7 +1891,7 @@ const DeploymentTemplate = ({
     return (
         <>
             <div
-                className={`h-100 dc__window-bg ${showDraftComments ? 'deployment-template__comments-view' : 'flexbox'}`}
+                className={`h-100 bg__tertiary ${showDraftComments ? 'deployment-template__comments-view' : 'flexbox'}`}
             >
                 {renderDeploymentTemplate()}
 

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/DeploymentTemplateCTA.tsx

@@ -51,7 +51,7 @@ const DeploymentTemplateCTA = ({
     }
 
     return (
-        <footer className="flexbox dc__content-space p-12 bcn-0 dc__border-top dc__align-items-center">
+        <footer className="flexbox dc__content-space p-12 bg__primary dc__border-top dc__align-items-center">
             <div
                 className={`flexbox ${showApplicationMetrics ? 'dc__content-space' : 'dc__content-end'} dc__align-items-center flex-grow-1`}
             >

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/DeploymentTemplateForm.tsx

@@ -63,7 +63,7 @@ const DeploymentTemplateForm = ({
         if (showReadMe) {
             return (
                 <CodeEditor.Header className="flex left p-0-imp dc__border-bottom-n1" hideDefaultSplitHeader>
-                    <div className="flexbox px-16 py-6 dc__content-space fs-12 fw-6 cn-9 bcn-0">
+                    <div className="flexbox px-16 py-6 dc__content-space fs-12 fw-6 cn-9 bg__primary">
                         <div className="flexbox w-100 dc__gap-8 dc__align-items-center">
                             <div className="flexbox dc__gap-8 dc__align-items-center">
                                 {!readOnly && <ICPencil className="icon-dim-16 dc__no-shrink" />}
@@ -90,7 +90,7 @@ const DeploymentTemplateForm = ({
         <div className={`dc__overflow-scroll flex-grow-1 ${showReadMe ? 'dc__grid-half' : 'flexbox-col'}`}>
             {showReadMe && (
                 <div className="flexbox-col dc__border-right dc__overflow-scroll">
-                    <div className="flexbox dc__gap-8 bcn-0 px-12 py-6 dc__border-bottom-n1 flex left py-6">
+                    <div className="flexbox dc__gap-8 bg__primary px-12 py-6 dc__border-bottom-n1 flex left py-6">
                         <ICBookOpen className="icon-dim-16 dc__no-shrink scn-9" />
                         <span className="fs-12 fw-6 cn-9 lh-20">{`Readme ${selectedChart ? `(v${selectedChart.version})` : ''}`}</span>
                     </div>

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/DeploymentTemplateOptionsHeader.tsx

@@ -39,7 +39,7 @@ const DeploymentTemplateOptionsHeader = ({
     }
 
     return (
-        <div className="flexbox dc__align-items-center dc__content-space bcn-0 dc__gap-8">
+        <div className="flexbox dc__align-items-center dc__content-space bg__primary dc__gap-8">
             {isGuiSupported && (
                 <>
                     <InvalidYAMLTippyWrapper

src/Pages/Applications/DevtronApps/Details/AppConfigurations/appConfig.scss

@@ -18,7 +18,7 @@
     display: grid;
     grid-template-columns: 255px 1fr;
     height: calc(100vh - 77px);
-    background: white;
+    background: var(--bg-primary);
     overflow: hidden;
 
     &.app-compose-for-env-compare {
@@ -31,8 +31,8 @@
 
     .app-compose__nav {
         padding: 16px 12px;
-        border-right: solid 1px #d6dbdf;
-        background: white;
+        border-right: solid 1px var(--N200);
+        background: var(--bg-primary);
         height: 100%;
         display: grid;
         grid-template-columns: 1fr;
@@ -76,18 +76,18 @@
         }
 
         .help-container {
-            background-color: #f3f0ff;
+            background-color: var(--V100);
             padding: 8px 12px;
             border-radius: 4px;
             height: 100px;
 
             .progress-container {
-                background-color: #ffffff;
+                background-color: var(--bg-primary);
                 margin: 5px 0 10px 0;
                 font-size: 12px;
 
                 .progress-tracker {
-                    background-color: #1dad70;
+                    background-color: var(--G500);
                     height: 4px;
                     width: 1%;
                 }
@@ -113,7 +113,7 @@
 
     .app-compose__main {
         overflow: auto;
-        background-color: var(--window-bg);
+        background-color: var(--bg-tertiary);
     }
 
     .app-compose__nav-item {
@@ -141,7 +141,7 @@
 
         &:hover:not(.no-hover) {
             text-decoration: none;
-            background: var(--N50);
+            background: var(--bg-secondary);
         }
 
         &.active {
@@ -172,7 +172,7 @@
         grid-template-columns: 16px 1fr;
         grid-column-gap: 8px;
         align-content: initial;
-        color: #f32e2e;
+        color: var(--R500);
         font-size: 12px;
 
         svg {
@@ -189,8 +189,8 @@
         width: calc(100% - 240px - 72px);
         height: 64px;
         padding: 12px 24px;
-        background-color: rgba(242, 244, 247, 0.8);
-        box-shadow: inset 0 1px 0 0 #d6dbdf;
+        background-color: var(--bg-tertiary);
+        box-shadow: inset 0 1px 0 0 var(--N200);
         z-index: var(--index-next-section);
     }
 

src/Pages/GlobalConfigurations/Authorization/APITokens/APITokenList.tsx

@@ -58,7 +58,7 @@ const APITokenList = ({ tokenList, renderSearchToken, reload }: APITokenListType
     const noMatchingResults = () => <GenericFilterEmptyState />
 
     return (
-        <div className="bcn-0">
+        <div className="bg__primary">
             <div data-testid="api-token-page-header" className="flex dc__content-space pl-20 pr-20 pb-16">
                 <FeatureTitleWithInfo
                     title={HEADER_TEXT.API_TOKEN.title}

src/Pages/GlobalConfigurations/Authorization/APITokens/apiToken.scss

@@ -43,7 +43,7 @@
 
     .api-list-row {
         &:hover {
-            background-color: var(--N50);
+            background-color: var(--bg-secondary);
             .api__row-actions {
                 display: flex;
 
@@ -85,7 +85,7 @@
     .search {
         margin-right: 0;
         margin-bottom: 0 !important;
-        background-color: white;
+        background-color: var(--bg-primary);
 
         .search__input {
             &.search-applied {

src/Pages/GlobalConfigurations/Authorization/Authorization.component.tsx

@@ -31,7 +31,7 @@ const Authorization = () => {
             <Route
                 path={path}
                 render={() => (
-                    <div className="authorization-container flexbox-col flex-grow-1 min-h-100 bcn-0 flex-align-center dc__content-center pt-16">
+                    <div className="authorization-container flexbox-col flex-grow-1 min-h-100 bg__primary flex-align-center dc__content-center pt-16">
                         <UserAndGroupPermissions />
                     </div>
                 )}

src/Pages/GlobalConfigurations/Authorization/PermissionGroups/List/PermissionGroupTable.tsx

@@ -47,7 +47,7 @@ const PermissionGroupTable = ({
 
     return (
         <div className="flexbox-col flex-grow-1 show-shimmer-loading">
-            <div className="user-permission__header cn-7 fs-12 fw-6 lh-20 dc__uppercase pl-20 pr-20 dc__border-bottom dc__position-sticky dc__top-0 bcn-0 dc__zi-1">
+            <div className="user-permission__header cn-7 fs-12 fw-6 lh-20 dc__uppercase pl-20 pr-20 dc__border-bottom dc__position-sticky dc__top-0 bg__primary dc__zi-1">
                 {isLoading ? (
                     <span className="child child-shimmer-loading" />
                 ) : (

src/Pages/GlobalConfigurations/Authorization/SSOLoginServices/SSOLogin.component.tsx

@@ -727,7 +727,7 @@ class SSOLogin extends Component<SSOLoginProps, SSOLoginState> {
     render() {
         if (this.state.view === ViewType.LOADING) {
             return (
-                <div className="bcn-0 h-100">
+                <div className="bg__primary h-100">
                     <Progressing pageLoader />
                 </div>
             )
@@ -838,7 +838,7 @@ class SSOLogin extends Component<SSOLoginProps, SSOLoginState> {
                     />
                     {renderSSOBody()}
                 </div>
-                <div className="px-20 py-16 dc__border-top-n1 w-100 dc__position-fixed bcn-0 dc__bottom-0">
+                <div className="px-20 py-16 dc__border-top-n1 w-100 dc__position-fixed bg__primary dc__bottom-0">
                     <button
                         onClick={this.onLoginConfigSave}
                         tabIndex={5}
@@ -853,7 +853,7 @@ class SSOLogin extends Component<SSOLoginProps, SSOLoginState> {
             </div>
         )
         return (
-            <section className="bcn-0 sso-login__wrapper">
+            <section className="bg__primary sso-login__wrapper">
                 {renderSSOContent()}
                 {/* Confirmation Modal for SSO Change */}
                 {showSSOChangeConfirmationModal && (

src/Pages/GlobalConfigurations/Authorization/SSOLoginServices/ssoLogin.scss

@@ -21,8 +21,8 @@
         border: none;
         padding: 0 35px;
         overflow: hidden;
-        color: #f32e2e;
+        color: var(--R500);
         font-size: 14px;
         font-family: Consolas, "Courier New", monospace;
     }
-}
+}

src/Pages/GlobalConfigurations/Authorization/SSOLoginServices/utils.tsx

@@ -29,7 +29,7 @@ export const SSOTabIcons = ({ provider }: SSOTabIconsTypes) => {
         case SSOProvider.google:
             return <Google />
         case SSOProvider.github:
-            return <GitHub />
+            return <GitHub className="fcn-8" />
         case SSOProvider.gitlab:
             return <GitLab />
         case SSOProvider.microsoft:

src/Pages/GlobalConfigurations/Authorization/Shared/components/K8sObjectPermissions/K8sListItemCard.tsx

@@ -389,7 +389,7 @@ const K8sListItemCard = ({
     }
 
     return (
-        <div className="mt-16 mb-16 flexbox-col dc__gap-12 dc__border br-4 p-16 bcn-0">
+        <div className="mt-16 mb-16 flexbox-col dc__gap-12 dc__border br-4 p-16 bg__primary">
             <div className="cn-7 fs-13 fw-4 lh-20 flex dc__content-space">
                 <span>Cluster</span>
                 {!selectedPermissionAction && (

src/Pages/GlobalConfigurations/Authorization/Shared/components/K8sObjectPermissions/K8sPermissionModal.tsx

@@ -149,7 +149,7 @@ const K8sPermissionModal = ({
     return (
         <Drawer onEscape={close} position="right" width="800px">
             <div onClick={stopPropagation} className="h-100 h-100 flexbox-col flex-grow-1 dc__content-space">
-                <div className="flex pt-12 pb-12 pl-20 pr-20 dc__content-space bcn-0 dc__border-bottom">
+                <div className="flex pt-12 pb-12 pl-20 pr-20 dc__content-space bg__primary dc__border-bottom">
                     <span className="flex left fw-6 lh-24 fs-16">Kubernetes resource permission</span>
                     <span
                         className="icon-dim-20 cursor icon-use-fill-n6 flex"
@@ -159,7 +159,7 @@ const K8sPermissionModal = ({
                         <Close />
                     </span>
                 </div>
-                <div className="p-20 fs-13 dc__overflow-scroll flexbox-col flex-grow-1 dc__window-bg">
+                <div className="p-20 fs-13 dc__overflow-scroll flexbox-col flex-grow-1 bg__tertiary">
                     {!selectedPermissionAction && (
                         <div className="flex left fs-13 fw-6">
                             <span className="flex cb-5 cursor dc__gap-12" onClick={addNewPermissionCard}>
@@ -187,7 +187,7 @@ const K8sPermissionModal = ({
                         />
                     ))}
                 </div>
-                <div className="w-100 pt-16 pb-16 pl-20 pr-20 flex right dc__gap-16 bcn-0 dc__border-top">
+                <div className="w-100 pt-16 pb-16 pl-20 pr-20 flex right dc__gap-16 bg__primary dc__border-top">
                     <Button
                         text="Cancel"
                         onClick={close}

src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/UserPermissionTable.tsx

@@ -64,7 +64,7 @@ const UserPermissionTable = ({
             <div
                 className={`user-permission__header ${
                     showStatus ? 'user-permission__header--with-status' : ''
-                } cn-7 fs-12 fw-6 lh-20 dc__uppercase pl-20 pr-20 dc__border-bottom dc__position-sticky dc__top-0 bcn-0 dc__zi-1`}
+                } cn-7 fs-12 fw-6 lh-20 dc__uppercase pl-20 pr-20 dc__border-bottom dc__position-sticky dc__top-0 bg__primary dc__zi-1`}
             >
                 {isLoading ? (
                     <span className="child child-shimmer-loading" />

src/Pages/GlobalConfigurations/Authorization/constants.ts

@@ -83,7 +83,7 @@ export const authorizationSelectStyles = {
     option: (base, state) => ({
         ..._selectStyles.option(base, state),
         ...(state.isSelected && {
-            backgroundColor: state.isFocused ? 'var(--N100)' : 'white',
+            backgroundColor: state.isFocused ? 'var(--N100)' : 'var(--bg-primary)',
         }),
     }),
 }