From 9a78fd0b7b42fe3a865166765defd2e329233c28 Mon Sep 17 00:00:00 2001 From: Sakshi Gupta Date: Tue, 23 Sep 2025 11:07:46 +0530 Subject: [PATCH] second last iteration for css --- src/Explorer/Controls/Dialog.tsx | 56 ++++++++++++++++++- .../Controls/Settings/SettingsRenderUtils.tsx | 6 -- .../ThroughputInput/ThroughputInput.less | 2 +- .../Panes/SettingsPane/SettingsPane.tsx | 6 +- src/less/ThemeSystem.less | 8 +++ 5 files changed, 68 insertions(+), 10 deletions(-) diff --git a/src/Explorer/Controls/Dialog.tsx b/src/Explorer/Controls/Dialog.tsx index a4c50a3fd..efa87d5e7 100644 --- a/src/Explorer/Controls/Dialog.tsx +++ b/src/Explorer/Controls/Dialog.tsx @@ -179,8 +179,18 @@ export const Dialog: FC = () => { title, subText, styles: { - title: { fontSize: DIALOG_TITLE_FONT_SIZE, fontWeight: DIALOG_TITLE_FONT_WEIGHT }, - subText: { fontSize: DIALOG_SUBTEXT_FONT_SIZE }, + title: { + fontSize: DIALOG_TITLE_FONT_SIZE, + fontWeight: DIALOG_TITLE_FONT_WEIGHT, + }, + subText: { + fontSize: DIALOG_SUBTEXT_FONT_SIZE, + color: 'var(--colorNeutralForeground2)' + }, + content: { + backgroundColor: 'var(--colorNeutralBackground1)', + color: 'var(--colorNeutralForeground1)' + } }, showCloseButton: showCloseButton || false, onDismiss, @@ -188,18 +198,60 @@ export const Dialog: FC = () => { modalProps: { isBlocking: isModal, isDarkOverlay: false }, minWidth: DIALOG_MIN_WIDTH, maxWidth: DIALOG_MAX_WIDTH, + styles: { + main: { + backgroundColor: 'var(--colorNeutralBackground1)', + selectors: { + '.ms-Dialog-title': { color: 'var(--colorNeutralForeground1)' }, + } + } + } }; const primaryButtonProps: IButtonProps = { text: primaryButtonText, disabled: primaryButtonDisabled || false, onClick: onPrimaryButtonClick, + styles: { + root: { + backgroundColor: "var(--colorBrandBackground)", + color: "var(--colorNeutralForegroundOnBrand)", + selectors: { + ":hover": { + backgroundColor: "var(--colorBrandBackgroundHover)", + color: "var(--colorNeutralForegroundOnBrand)", + }, + ":active": { + backgroundColor: "var(--colorBrandBackgroundPressed)", + color: "var(--colorNeutralForegroundOnBrand)", + }, + }, + }, + }, }; const secondaryButtonProps: IButtonProps = secondaryButtonText && onSecondaryButtonClick ? { text: secondaryButtonText, onClick: onSecondaryButtonClick, + styles: { + root: { + backgroundColor: "var(--colorNeutralBackground2)", + color: "var(--colorNeutralForeground1)", + borderColor: "var(--colorNeutralStroke1)", + selectors: { + ":hover": { + backgroundColor: "var(--colorNeutralBackground3)", + color: "var(--colorNeutralForeground1)", + }, + ":active": { + backgroundColor: "var(--colorNeutralBackground3)", + color: "var(--colorNeutralForeground1)", + borderColor: "var(--colorCompoundBrandStroke1)", + }, + }, + }, + }, } : undefined; return visible ? ( diff --git a/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx b/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx index 706a4bb07..22e6636c1 100644 --- a/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx +++ b/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx @@ -525,18 +525,12 @@ export const getTextFieldStyles = (current: isDirtyTypes, baseline: isDirtyTypes backgroundColor: "var(--colorNeutralBackground1)", borderColor: StyleConstants.BaseMediumHigh, }, - "input": { - color: "var(--colorNeutralForeground1)", - }, "input#autopilotInput": { backgroundColor: "var(--colorNeutralBackground4)", color: "var(--colorNeutralForeground1)", }, }, }, - field: { - color: "var(--colorNeutralForeground1)", - }, subComponentStyles: { label: { diff --git a/src/Explorer/Controls/ThroughputInput/ThroughputInput.less b/src/Explorer/Controls/ThroughputInput/ThroughputInput.less index 52feab10a..efcb9467a 100644 --- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.less +++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.less @@ -35,7 +35,7 @@ .ms-TextField { .ms-TextField-fieldGroup { &:focus-within { - border-color: var(--colorCompoundBrandStroke1, @SelectionColor) !important; + border-color: var(--colorCompoundBrandStroke1, @SelectionColor); } } } diff --git a/src/Explorer/Panes/SettingsPane/SettingsPane.tsx b/src/Explorer/Panes/SettingsPane/SettingsPane.tsx index d7b56ca5d..eced8e428 100644 --- a/src/Explorer/Panes/SettingsPane/SettingsPane.tsx +++ b/src/Explorer/Panes/SettingsPane/SettingsPane.tsx @@ -1248,8 +1248,12 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({ selectors: { ":hover": { backgroundColor: "var(--colorBrandBackgroundHover)", - color: "var(--colorNeutralForegroundOnBrand)", + color: "var(--colorNeutralForegroundOnBrand)" }, + ":active": { + backgroundColor: "var(--colorBrandBackgroundPressed)", + color: "var(--colorNeutralForegroundOnBrand)" + } }, }, }} diff --git a/src/less/ThemeSystem.less b/src/less/ThemeSystem.less index 59bdc9e2f..42b280daf 100644 --- a/src/less/ThemeSystem.less +++ b/src/less/ThemeSystem.less @@ -12,6 +12,10 @@ --colorBrandForeground1: @LinkColor; --colorPaletteRedForeground1: @ErrorColor; --overlayBackground: rgba(0, 0, 0, 0.4); + --colorBrandBackground: @SelectionColor; + --colorBrandBackgroundHover: @AccentMediumHigh; + --colorBrandBackgroundPressed: @AccentMedium; + --colorNeutralForegroundOnBrand: @BaseLight; } // Dark theme variables @@ -27,6 +31,10 @@ body.isDarkMode { --colorBrandForeground1: #4db6e8; --colorPaletteRedForeground1: #f25d5d; --overlayBackground: rgba(0, 0, 0, 0.4); + --colorBrandBackground: #0078d4; + --colorBrandBackgroundHover: #106ebe; + --colorBrandBackgroundPressed: #005a9e; + --colorNeutralForegroundOnBrand: #ffffff; } // Theme Mixins