random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-10-14 07:48:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

fixed all the issues of css

Browse Source
This commit is contained in:
Sakshi Gupta 2025-09-24 01:21:00 +05:30
parent 9a78fd0b7b
commit c42fe99c1a
22 changed files with 361 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Common/Upload/Upload.tsx
View File

@ -50,7 +50,7 @@ export const Upload: FunctionComponent<UploadProps> = ({
const title = label + " to upload"; const title = label + " to upload";
return ( return (
<div> <div>
<span className="renewUploadItemsHeader">{label}</span> <span className="renewUploadItemsHeader" style={{ color: "var(--colorNeutralForeground1)" }}>{label}</span>
{tooltip && <InfoTooltip>{tooltip}</InfoTooltip>} {tooltip && <InfoTooltip>{tooltip}</InfoTooltip>}
<Stack horizontal> <Stack horizontal>
<TextField styles={{ fieldGroup: { width: 300 } }} readOnly value={selectedFilesTitle.toString()} /> <TextField styles={{ fieldGroup: { width: 300 } }} readOnly value={selectedFilesTitle.toString()} />

10
src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx
View File

@ -58,7 +58,7 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
aria-expanded={this.state.isExpanded} aria-expanded={this.state.isExpanded}
> >
<Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} /> <Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} />
<Label>{this.props.title}</Label> <Label styles={{ root: { color: "var(--colorNeutralForeground1)" } }}>{this.props.title}</Label>
{this.props.tooltipContent && ( {this.props.tooltipContent && (
<TooltipHost <TooltipHost
directionalHint={DirectionalHint.bottomLeftEdge} directionalHint={DirectionalHint.bottomLeftEdge}
@ -79,6 +79,14 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
id={`delete-${this.props.title.split(" ").join("-")}`} id={`delete-${this.props.title.split(" ").join("-")}`}
iconProps={{ iconName: "Delete" }} iconProps={{ iconName: "Delete" }}
style={{ height: 27, marginRight: "20px" }} style={{ height: 27, marginRight: "20px" }}
styles={{
rootHovered: {
backgroundColor: "transparent",
},
rootPressed: {
backgroundColor: "transparent",
}
}}
onClick={(event) => { onClick={(event) => {
event.stopPropagation(); event.stopPropagation();
this.props.onDelete(); this.props.onDelete();

27
src/Explorer/Controls/FullTextSeach/FullTextPoliciesComponent.tsx
View File

@ -33,6 +33,7 @@ export interface FullTextPolicyData {
const labelStyles = { const labelStyles = {
root: { root: {
fontSize: 12, fontSize: 12,
color: "var(--colorNeutralForeground1)"
}, },
}; };
@ -222,7 +223,31 @@ export const FullTextPoliciesComponent: React.FunctionComponent<FullTextPolicies
</Stack> </Stack>
</CollapsibleSectionComponent> </CollapsibleSectionComponent>
))} ))}
<DefaultButton id={`add-vector-policy`} styles={{ root: { maxWidth: 170, fontSize: 12 } }} onClick={onAdd}> <DefaultButton
id={`add-vector-policy`}
styles={{
root: {
maxWidth: 170,
fontSize: 12,
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent",
borderColor: "var(--colorNeutralStroke1)"
},
rootHovered: {
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent",
borderColor: "var(--colorNeutralForeground1)"
},
rootPressed: {
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent",
borderColor: "var(--colorNeutralForeground1)"
},
rootDisabled: {
backgroundColor: "transparent"
}
}}
onClick={onAdd}>
Add full text path Add full text path
</DefaultButton> </DefaultButton>
</Stack> </Stack>

2
src/Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent.tsx
View File

@ -116,7 +116,7 @@ export class ComputedPropertiesComponent extends React.Component<
{unsavedEditorWarningMessage("computedProperties")} {unsavedEditorWarningMessage("computedProperties")}
</MessageBar> </MessageBar>
)} )}
<Text style={{ marginLeft: "30px", marginBottom: "10px" }}> <Text style={{ marginLeft: "30px", marginBottom: "10px", color: "var(--colorNeutralForeground1)" }}>
<Link target="_blank" href="https://aka.ms/computed-properties-preview/"> <Link target="_blank" href="https://aka.ms/computed-properties-preview/">
{"Learn more"} <FontIcon iconName="NavigateExternalInline" /> {"Learn more"} <FontIcon iconName="NavigateExternalInline" />
</Link> </Link>

74
src/Explorer/Controls/Settings/SettingsSubComponents/ContainerPolicyComponent.tsx
View File

@ -102,11 +102,57 @@ export const ContainerPolicyComponent: React.FC<ContainerPolicyComponentProps> =
return ( return (
<div> <div>
<Pivot onLinkClick={onPivotChange} selectedKey={ContainerPolicyTabTypes[selectedTab]}> <Pivot
onLinkClick={onPivotChange}
selectedKey={ContainerPolicyTabTypes[selectedTab]}
styles={{
root: {
color: "var(--colorNeutralForeground1)"
},
link: {
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent",
selectors: {
':hover': {
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent"
},
':active': {
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent"
}
}
},
linkIsSelected: {
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent",
selectors: {
':before': {
color: "var(--colorNeutralForeground1)",
backgroundColor: "var(--colorBrandForeground1)"
},
':hover': {
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent"
},
':active': {
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent"
}
}
},
linkContent: {
color: "inherit"
},
text: {
color: "inherit"
}
}}
>
{isVectorSearchEnabled && ( {isVectorSearchEnabled && (
<PivotItem <PivotItem
itemKey={ContainerPolicyTabTypes[ContainerPolicyTabTypes.VectorPolicyTab]} itemKey={ContainerPolicyTabTypes[ContainerPolicyTabTypes.VectorPolicyTab]}
style={{ marginTop: 20 }} style={{ marginTop: 20, color: "var(--colorNeutralForeground1)" }}
headerText="Vector Policy" headerText="Vector Policy"
> >
<Stack {...titleAndInputStackProps} styles={{ root: { position: "relative", maxWidth: "400px" } }}> <Stack {...titleAndInputStackProps} styles={{ root: { position: "relative", maxWidth: "400px" } }}>
@ -128,7 +174,7 @@ export const ContainerPolicyComponent: React.FC<ContainerPolicyComponentProps> =
{isFullTextSearchEnabled && ( {isFullTextSearchEnabled && (
<PivotItem <PivotItem
itemKey={ContainerPolicyTabTypes[ContainerPolicyTabTypes.FullTextPolicyTab]} itemKey={ContainerPolicyTabTypes[ContainerPolicyTabTypes.FullTextPolicyTab]}
style={{ marginTop: 20 }} style={{ marginTop: 20, color: "var(--colorNeutralForeground1)" }}
headerText="Full Text Policy" headerText="Full Text Policy"
> >
<Stack {...titleAndInputStackProps} styles={{ root: { position: "relative", maxWidth: "400px" } }}> <Stack {...titleAndInputStackProps} styles={{ root: { position: "relative", maxWidth: "400px" } }}>
@ -144,7 +190,27 @@ export const ContainerPolicyComponent: React.FC<ContainerPolicyComponentProps> =
) : ( ) : (
<DefaultButton <DefaultButton
id={"create-full-text-policy"} id={"create-full-text-policy"}
styles={{ root: { fontSize: 12 } }} styles={{
root: {
fontSize: 12,
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent",
borderColor: "var(--colorNeutralForeground1)"
},
rootHovered: {
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent",
borderColor: "var(--colorNeutralForeground1)"
},
rootPressed: {
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent",
borderColor: "var(--colorNeutralForeground1)"
},
rootDisabled: {
backgroundColor: "transparent"
}
}}
onClick={() => { onClick={() => {
checkAndSendFullTextPolicyToSettings({ checkAndSendFullTextPolicyToSettings({
defaultLanguage: getFullTextLanguageOptions()[0].key as never, defaultLanguage: getFullTextLanguageOptions()[0].key as never,

2
src/Explorer/Controls/Settings/SettingsSubComponents/PartitionKeyComponent.tsx
View File

@ -191,7 +191,7 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({
Learn more Learn more
</Link> </Link>
</MessageBar> </MessageBar>
<Text> <Text styles={{ root: { color: "var(--colorNeutralForeground1)" } }}>
To change the partition key, a new destination container must be created or an existing destination To change the partition key, a new destination container must be created or an existing destination
container selected. Data will then be copied to the destination container. container selected. Data will then be copied to the destination container.
</Text> </Text>

11
src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.tsx
View File

@ -65,7 +65,7 @@ export const ThroughputBucketsComponent: FC<ThroughputBucketsComponentProps> = (
return ( return (
<Stack tokens={{ childrenGap: "m" }} styles={{ root: { width: "70%", maxWidth: 700 } }}> <Stack tokens={{ childrenGap: "m" }} styles={{ root: { width: "70%", maxWidth: 700 } }}>
<Label>Throughput Buckets</Label> <Label styles={{ root: { color: "var(--colorNeutralForeground1)" } }}>Throughput Buckets</Label>
<Stack> <Stack>
{throughputBuckets?.map((bucket) => ( {throughputBuckets?.map((bucket) => (
<Stack key={bucket.id} horizontal tokens={{ childrenGap: 8 }} verticalAlign="center"> <Stack key={bucket.id} horizontal tokens={{ childrenGap: 8 }} verticalAlign="center">
@ -77,7 +77,14 @@ export const ThroughputBucketsComponent: FC<ThroughputBucketsComponentProps> = (
onChange={(newValue) => handleBucketChange(bucket.id, newValue)} onChange={(newValue) => handleBucketChange(bucket.id, newValue)}
showValue={false} showValue={false}
label={`Bucket ${bucket.id}${bucket.id === 1 ? " (Data Explorer Query Bucket)" : ""}`} label={`Bucket ${bucket.id}${bucket.id === 1 ? " (Data Explorer Query Bucket)" : ""}`}
styles={{ root: { flex: 2, maxWidth: 400 } }} styles={{
root: { flex: 2, maxWidth: 400 },
titleLabel: {
color: bucket.maxThroughputPercentage === 100 ?
"var(--colorNeutralForeground4)" :
"var(--colorNeutralForeground1)"
}
}}
disabled={bucket.maxThroughputPercentage === 100} disabled={bucket.maxThroughputPercentage === 100}
/> />
<TextField <TextField

6
src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.tsx
View File

@ -54,8 +54,8 @@ export const CostEstimateText: FunctionComponent<CostEstimateTextProps> = ({
if (isAutoscale) { if (isAutoscale) {
return ( return (
<Stack style={{ marginBottom: 6 }}> <Stack style={{ marginBottom: 6 , color: "var(--colorNeutralForeground1)" }}>
<Text variant="small"> <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
{estimatedMonthlyCost} ({currency}){iconWithEstimatedCostDisclaimer}:{" "} {estimatedMonthlyCost} ({currency}){iconWithEstimatedCostDisclaimer}:{" "}
<b> <b>
{currencySign + calculateEstimateNumber(monthlyPrice / 10)} -{" "} {currencySign + calculateEstimateNumber(monthlyPrice / 10)} -{" "}
@ -70,7 +70,7 @@ export const CostEstimateText: FunctionComponent<CostEstimateTextProps> = ({
return ( return (
<Stack style={{ marginBottom: 8 }}> <Stack style={{ marginBottom: 8 }}>
<Text variant="small"> <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
Estimated cost ({currency}){iconWithEstimatedCostDisclaimer}:{" "} Estimated cost ({currency}){iconWithEstimatedCostDisclaimer}:{" "}
<b> <b>
{currencySign + calculateEstimateNumber(hourlyPrice)} hourly /{" "} {currencySign + calculateEstimateNumber(hourlyPrice)} hourly /{" "}

4
src/Explorer/Controls/ThroughputInput/ThroughputInput.less
View File

@ -10,9 +10,13 @@
font-size: @mediumFontSize; font-size: @mediumFontSize;
padding: 0 @LargeSpace 0 @SmallSpace; padding: 0 @LargeSpace 0 @SmallSpace;
} }
// .throughputInputSpacing{
// color: "var(--colorNeutralForeground1)";
// }
.throughputInputSpacing > :not(:last-child) { .throughputInputSpacing > :not(:last-child) {
margin-bottom: @DefaultSpace; margin-bottom: @DefaultSpace;
color: "var(--colorNeutralForeground1)";
} }
.capacitycalculator-link:focus { .capacitycalculator-link:focus {

18
src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
View File

@ -193,7 +193,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
<div className="throughputInputContainer throughputInputSpacing"> <div className="throughputInputContainer throughputInputSpacing">
<Stack horizontal> <Stack horizontal>
<span className="mandatoryStar">*&nbsp;</span> <span className="mandatoryStar">*&nbsp;</span>
<Text aria-label="Throughput header" variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}> <Text aria-label="Throughput header" variant="small" style={{ lineHeight: "20px", fontWeight: 600 , color: "var(--colorNeutralForeground1)"}}>
{getThroughputLabelText()} {getThroughputLabelText()}
</Text> </Text>
<InfoTooltip>{PricingUtils.getRuToolTipText()}</InfoTooltip> <InfoTooltip>{PricingUtils.getRuToolTipText()}</InfoTooltip>
@ -236,14 +236,14 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
{isAutoscaleSelected && ( {isAutoscaleSelected && (
<Stack className="throughputInputSpacing"> <Stack className="throughputInputSpacing">
<Text style={{ marginTop: -2, fontSize: 12 }}> <Text style={{ marginTop: -2, fontSize: 12 ,color: "var(--colorNeutralForeground1)" }}>
Your container throughput will automatically scale up to the maximum value you select, from a minimum of 10% Your container throughput will automatically scale up to the maximum value you select, from a minimum of 10%
of that value. of that value.
</Text> </Text>
<Stack horizontal verticalAlign="end" tokens={{ childrenGap: 8 }}> <Stack horizontal verticalAlign="end" tokens={{ childrenGap: 8 }}>
<Stack tokens={{ childrenGap: 4 }}> <Stack tokens={{ childrenGap: 4 }}>
<Stack horizontal verticalAlign="center" tokens={{ childrenGap: 4 }}> <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 4 }}>
<Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}> <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600, color: "var(--colorNeutralForeground1)" }}>
Minimum RU/s Minimum RU/s
</Text> </Text>
<InfoTooltip>The minimum RU/s your container will scale to</InfoTooltip> <InfoTooltip>The minimum RU/s your container will scale to</InfoTooltip>
@ -260,6 +260,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
color: "var(--colorNeutralForeground1)",
}} }}
> >
{Math.round(throughput / 10).toString()} {Math.round(throughput / 10).toString()}
@ -272,6 +273,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
fontSize: 12, fontSize: 12,
fontWeight: 400, fontWeight: 400,
paddingBottom: 6, paddingBottom: 6,
color: "var(--colorNeutralForeground1)"
}} }}
> >
x 10 = x 10 =
@ -279,7 +281,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
<Stack tokens={{ childrenGap: 4 }}> <Stack tokens={{ childrenGap: 4 }}>
<Stack horizontal verticalAlign="center" tokens={{ childrenGap: 4 }}> <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 4 }}>
<Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}> <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600,color: "var(--colorNeutralForeground1)" }}>
Maximum RU/s Maximum RU/s
</Text> </Text>
<InfoTooltip>{getAutoScaleTooltip()}</InfoTooltip> <InfoTooltip>{getAutoScaleTooltip()}</InfoTooltip>
@ -289,7 +291,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
type="number" type="number"
styles={{ styles={{
fieldGroup: { width: 100, height: 27, flexShrink: 0 }, fieldGroup: { width: 100, height: 27, flexShrink: 0 },
field: { fontSize: 14, fontWeight: 400 }, field: { fontSize: 14, fontWeight: 400 , color: "var(--colorNeutralForeground1)"},
}} }}
onChange={(_event, newInput?: string) => onThroughputValueChange(newInput)} onChange={(_event, newInput?: string) => onThroughputValueChange(newInput)}
step={AutoPilotUtils.autoPilotIncrementStep} step={AutoPilotUtils.autoPilotIncrementStep}
@ -305,7 +307,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
<CostEstimateText requestUnits={throughput} isAutoscale={isAutoscaleSelected} /> <CostEstimateText requestUnits={throughput} isAutoscale={isAutoscaleSelected} />
<Stack className="throughputInputSpacing"> <Stack className="throughputInputSpacing">
<Text variant="small" aria-label="ruDescription"> <Text variant="small" aria-label="ruDescription" style={{color: "var(--colorNeutralForeground1)" }}>
Estimate your required RU/s with&nbsp; Estimate your required RU/s with&nbsp;
<Link <Link
className="underlinedLink" className="underlinedLink"
@ -324,7 +326,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
{!isAutoscaleSelected && ( {!isAutoscaleSelected && (
<Stack className="throughputInputSpacing"> <Stack className="throughputInputSpacing">
<Text variant="small" aria-label="ruDescription"> <Text variant="small" aria-label="ruDescription" style={{color: "var(--colorNeutralForeground1)" }}>
Estimate your required RU/s with&nbsp; Estimate your required RU/s with&nbsp;
<Link <Link
className="underlinedLink" className="underlinedLink"
@ -337,7 +339,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
. .
</Text> </Text>
<Stack horizontal> <Stack horizontal>
<Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }} aria-label="maxRUDescription"> <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600, color: "var(--colorNeutralForeground1)" }} aria-label="maxRUDescription">
{isDatabase ? "Database" : getCollectionName()} Required RU/s {isDatabase ? "Database" : getCollectionName()} Required RU/s
</Text> </Text>
<InfoTooltip>{getAutoScaleTooltip()}</InfoTooltip> <InfoTooltip>{getAutoScaleTooltip()}</InfoTooltip>

44
src/Explorer/Menus/NotificationConsole/NotificationConsole.less
View File

@ -30,11 +30,11 @@
flex-shrink:0; flex-shrink:0;
&:hover { &:hover {
background-color:@NotificationHigh; background-color: @NotificationHigh;
} }
&:active { &:active {
background-color:@NotificationHigh; background-color: @NotificationHigh;
} }
&:focus { &:focus {
@ -189,4 +189,44 @@
} }
} }
} }
}
// Dark theme specific overrides
body.isDarkMode {
.notificationConsoleContainer {
.notificationConsoleHeader {
background-color: var(--colorNeutralBackground2);
color: var(--colorNeutralForeground1);
&:hover {
background-color: var(--colorNeutralBackground3);
color: var(--colorNeutralForeground1);
}
&:active {
background-color: var(--colorNeutralBackground4);
color: var(--colorNeutralForeground1);
}
}
.notificationConsoleContents {
background-color: var(--colorNeutralBackground1);
color: var(--colorNeutralForeground1);
.clearNotificationsButton {
border: @ButtonBorderWidth solid var(--colorNeutralStroke1);
&:hover {
background-color: var(--colorNeutralBackground3);
color: var(--colorNeutralForeground1);
}
&:active {
border: @ButtonBorderWidth dashed var(--colorBrandForeground1);
background-color: var(--colorBrandBackground);
color: var(--colorNeutralForegroundOnBrand);
}
}
}
}
} }

56
src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx
View File

@ -349,9 +349,14 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
label={`Share throughput across ${getCollectionName(true).toLocaleLowerCase()}`} label={`Share throughput across ${getCollectionName(true).toLocaleLowerCase()}`}
checked={this.state.isSharedThroughputChecked} checked={this.state.isSharedThroughputChecked}
styles={{ styles={{
text: { fontSize: 12 }, text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
checkbox: { width: 12, height: 12 }, checkbox: { width: 12, height: 12 },
label: { padding: 0, alignItems: "center" }, label: { padding: 0, alignItems: "center" },
root: {
selectors: {
':hover .ms-Checkbox-text': { color: "var(--colorNeutralForeground1)" }
}
}
}} }}
onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) => onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
this.setState({ isSharedThroughputChecked: isChecked }) this.setState({ isSharedThroughputChecked: isChecked })
@ -648,7 +653,27 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
{userContext.apiType === "SQL" && ( {userContext.apiType === "SQL" && (
<Stack className="panelGroupSpacing"> <Stack className="panelGroupSpacing">
<DefaultButton <DefaultButton
styles={{ root: { padding: 0, width: 200, height: 30 }, label: { fontSize: 12 } }} styles={{
root: {
padding: 0,
width: 200,
height: 30,
backgroundColor: 'var(--colorNeutralBackground2)',
color: 'var(--colorNeutralForeground1)',
borderColor: 'var(--colorNeutralStroke1)'
},
rootHovered: {
backgroundColor: 'var(--colorNeutralBackground3)',
color: 'var(--colorNeutralForeground1)',
},
rootPressed: {
backgroundColor: 'var(--colorBrandBackgroundPressed)',
color: 'var(--colorNeutralForegroundOnBrand)',
},
label: {
fontSize: 12
}
}}
hidden={this.state.useHashV1} hidden={this.state.useHashV1}
disabled={this.state.subPartitionKeys.length >= Constants.BackendDefaults.maxNumMultiHashPartition} disabled={this.state.subPartitionKeys.length >= Constants.BackendDefaults.maxNumMultiHashPartition}
onClick={() => this.setState({ subPartitionKeys: [...this.state.subPartitionKeys, ""] })} onClick={() => this.setState({ subPartitionKeys: [...this.state.subPartitionKeys, ""] })}
@ -656,7 +681,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
Add hierarchical partition key Add hierarchical partition key
</DefaultButton> </DefaultButton>
{this.state.subPartitionKeys.length > 0 && ( {this.state.subPartitionKeys.length > 0 && (
<Text variant="small"> <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
<Icon iconName="InfoSolid" className="removeIcon" tabIndex={0} /> This feature allows you to <Icon iconName="InfoSolid" className="removeIcon" tabIndex={0} /> This feature allows you to
partition your data with up to three levels of keys for better data distribution. Requires .NET partition your data with up to three levels of keys for better data distribution. Requires .NET
V3, Java V4 SDK, or preview JavaScript V3 SDK.{" "} V3, Java V4 SDK, or preview JavaScript V3 SDK.{" "}
@ -677,9 +702,14 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
label={`Provision dedicated throughput for this ${getCollectionName().toLocaleLowerCase()}`} label={`Provision dedicated throughput for this ${getCollectionName().toLocaleLowerCase()}`}
checked={this.state.enableDedicatedThroughput} checked={this.state.enableDedicatedThroughput}
styles={{ styles={{
text: { fontSize: 12 }, text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
checkbox: { width: 12, height: 12 }, checkbox: { width: 12, height: 12 },
label: { padding: 0, alignItems: "center" }, label: { padding: 0, alignItems: "center" },
root: {
selectors: {
':hover .ms-Checkbox-text': { color: "var(--colorNeutralForeground1)" }
}
}
}} }}
onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) => onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
this.setState({ enableDedicatedThroughput: isChecked }) this.setState({ enableDedicatedThroughput: isChecked })
@ -768,7 +798,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
<ActionButton <ActionButton
iconProps={{ iconName: "Add" }} iconProps={{ iconName: "Add" }}
styles={{ root: { padding: 0 }, label: { fontSize: 12 } }} styles={{ root: { padding: 0 }, label: { fontSize: 12 , color: "var(--colorNeutralForeground1)"}}}
onClick={() => this.setState({ uniqueKeys: [...this.state.uniqueKeys, ""] })} onClick={() => this.setState({ uniqueKeys: [...this.state.uniqueKeys, ""] })}
> >
Add unique key Add unique key
@ -934,9 +964,14 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
label="Create a Wildcard Index on all fields" label="Create a Wildcard Index on all fields"
checked={this.state.createMongoWildCardIndex} checked={this.state.createMongoWildCardIndex}
styles={{ styles={{
text: { fontSize: 12 }, text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
checkbox: { width: 12, height: 12 }, checkbox: { width: 12, height: 12 },
label: { padding: 0, alignItems: "center" }, label: { padding: 0, alignItems: "center" },
root: {
selectors: {
':hover .ms-Checkbox-text': { color: "var(--colorNeutralForeground1)" }
}
}
}} }}
onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) => onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
this.setState({ createMongoWildCardIndex: isChecked }) this.setState({ createMongoWildCardIndex: isChecked })
@ -951,15 +986,20 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
label="My application uses an older Cosmos .NET or Java SDK version (.NET V1 or Java V2)" label="My application uses an older Cosmos .NET or Java SDK version (.NET V1 or Java V2)"
checked={this.state.useHashV1} checked={this.state.useHashV1}
styles={{ styles={{
text: { fontSize: 12 }, text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
checkbox: { width: 12, height: 12 }, checkbox: { width: 12, height: 12 },
label: { padding: 0, alignItems: "center", wordWrap: "break-word", whiteSpace: "break-spaces" }, label: { padding: 0, alignItems: "center", wordWrap: "break-word", whiteSpace: "break-spaces" },
root: {
selectors: {
':hover .ms-Checkbox-text': { color: "var(--colorNeutralForeground1)" }
}
}
}} }}
onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) => onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
this.setState({ useHashV1: isChecked, subPartitionKeys: [] }) this.setState({ useHashV1: isChecked, subPartitionKeys: [] })
} }
/> />
<Text variant="small"> <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
<Icon iconName="InfoSolid" className="removeIcon" /> To ensure compatibility with older SDKs, the <Icon iconName="InfoSolid" className="removeIcon" /> To ensure compatibility with older SDKs, the
created container will use a legacy partitioning scheme that supports partition key values of size created container will use a legacy partitioning scheme that supports partition key values of size
only up to 101 bytes. If this is enabled, you will not be able to use hierarchical partition keys.{" "} only up to 101 bytes. If this is enabled, you will not be able to use hierarchical partition keys.{" "}

7
src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx
View File

@ -224,9 +224,14 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
<Checkbox <Checkbox
title="Provision shared throughput" title="Provision shared throughput"
styles={{ styles={{
text: { fontSize: 12 }, text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
checkbox: { width: 12, height: 12 }, checkbox: { width: 12, height: 12 },
label: { padding: 0, alignItems: "center" }, label: { padding: 0, alignItems: "center" },
root: {
selectors: {
':hover .ms-Checkbox-text': { color: "var(--colorNeutralForeground1)" }
}
}
}} }}
label="Provision throughput" label="Provision throughput"
checked={databaseCreateNewShared} checked={databaseCreateNewShared}

9
src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/AdvancedComponent.tsx
View File

@ -32,15 +32,20 @@ export const AdvancedComponent = (props: AdvancedComponentProps): JSX.Element =>
label="My application uses an older Cosmos .NET or Java SDK version (.NET V1 or Java V2)" label="My application uses an older Cosmos .NET or Java SDK version (.NET V1 or Java V2)"
checked={useHashV1} checked={useHashV1}
styles={{ styles={{
text: { fontSize: 12 }, text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
checkbox: { width: 12, height: 12 }, checkbox: { width: 12, height: 12 },
label: { padding: 0, alignItems: "center", wordWrap: "break-word", whiteSpace: "break-spaces" }, label: { padding: 0, alignItems: "center", wordWrap: "break-word", whiteSpace: "break-spaces" },
root: {
selectors: {
':hover .ms-Checkbox-text': { color: "var(--colorNeutralForeground1)" }
}
}
}} }}
onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) => { onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) => {
useHashV1CheckboxOnChange(isChecked); useHashV1CheckboxOnChange(isChecked);
}} }}
/> />
<Text variant="small"> <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
<Icon iconName="InfoSolid" className="removeIcon" /> To ensure compatibility with older SDKs, the created <Icon iconName="InfoSolid" className="removeIcon" /> To ensure compatibility with older SDKs, the created
container will use a legacy partitioning scheme that supports partition key values of size only up to 101 container will use a legacy partitioning scheme that supports partition key values of size only up to 101
bytes. If this is enabled, you will not be able to use hierarchical partition keys.{" "} bytes. If this is enabled, you will not be able to use hierarchical partition keys.{" "}

2
src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/PartitionKeyComponent.tsx
View File

@ -117,7 +117,7 @@ export const PartitionKeyComponent = (props: PartitionKeyComponentProps): JSX.El
Add hierarchical partition key Add hierarchical partition key
</DefaultButton> </DefaultButton>
{subPartitionKeys.length > 0 && ( {subPartitionKeys.length > 0 && (
<Text variant="small"> <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
<Icon iconName="InfoSolid" className="removeIcon" tabIndex={0} /> This feature allows you to partition your <Icon iconName="InfoSolid" className="removeIcon" tabIndex={0} /> This feature allows you to partition your
data with up to three levels of keys for better data distribution. Requires .NET V3, Java V4 SDK, or preview data with up to three levels of keys for better data distribution. Requires .NET V3, Java V4 SDK, or preview
JavaScript V3 SDK.{" "} JavaScript V3 SDK.{" "}

4
src/Explorer/Panes/ChangePartitionKeyPane/ChangePartitionKeyPane.tsx
View File

@ -135,7 +135,7 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
return ( return (
<RightPaneForm formError={formError} isExecuting={isExecuting} onSubmit={submit} submitButtonText="OK"> <RightPaneForm formError={formError} isExecuting={isExecuting} onSubmit={submit} submitButtonText="OK">
<Stack tokens={{ childrenGap: 10 }} className="panelMainContent"> <Stack tokens={{ childrenGap: 10 }} className="panelMainContent">
<Text variant="small"> <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
When changing a container’s partition key, you will need to create a destination container with the correct When changing a container’s partition key, you will need to create a destination container with the correct
partition key. You may also select an existing destination container.&nbsp; partition key. You may also select an existing destination container.&nbsp;
<Link <Link
@ -346,7 +346,7 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
Add hierarchical partition key Add hierarchical partition key
</DefaultButton> </DefaultButton>
{subPartitionKeys.length > 0 && ( {subPartitionKeys.length > 0 && (
<Text variant="small"> <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
<Icon iconName="InfoSolid" className="removeIcon" tabIndex={0} /> This feature allows you to <Icon iconName="InfoSolid" className="removeIcon" tabIndex={0} /> This feature allows you to
partition your data with up to three levels of keys for better data distribution. Requires .NET V3, partition your data with up to three levels of keys for better data distribution. Requires .NET V3,
Java V4 SDK, or preview JavaScript V3 SDK.{" "} Java V4 SDK, or preview JavaScript V3 SDK.{" "}

9
src/Explorer/Panes/LoadQueryPane/LoadQueryPane.tsx
View File

@ -94,7 +94,14 @@ export const LoadQueryPane: FunctionComponent = (): JSX.Element => {
value={selectedFileName} value={selectedFileName}
autoFocus autoFocus
readOnly readOnly
styles={{ fieldGroup: { width: 300 } }} styles={{
fieldGroup: { width: 300, color: "var(--colorNeutralForeground1)" },
subComponentStyles: {
label: {
root: { color: "var(--colorNeutralForeground1)" }
}
}
}}
/> />
<label htmlFor="importQueryInputId" className="customFileUpload"> <label htmlFor="importQueryInputId" className="customFileUpload">
<Image {...imageProps} src={folderIcon} alt="upload files" /> <Image {...imageProps} src={folderIcon} alt="upload files" />

68
src/Explorer/Panes/PanelComponent.less
View File

@ -37,18 +37,18 @@
.panelTextField { .panelTextField {
font-size: @mediumFontSize; font-size: @mediumFontSize;
border: 1px solid var(--colorNeutralStroke1, #605e5c); border: 1px solid var(--colorNeutralStroke1);
color: var(--colorNeutralForeground1); color: var(--colorNeutralForeground1);
background-color: var(--colorNeutralBackground2, @BaseLight); background-color: var(--colorNeutralBackground2);
padding: 4px 10px; padding: 4px 10px;
width: @newCollectionPaneInputWidth; width: @newCollectionPaneInputWidth;
&::placeholder { &::placeholder {
color: var(--colorNeutralForeground3, @BaseMediumHigh); color: var(--colorNeutralForeground3);
} }
&:focus { &:focus {
border-color: var(--colorCompoundBrandStroke1, @SelectionColor); border-color: var(--colorCompoundBrandStroke1);
outline: none; outline: none;
} }
} }
@ -60,7 +60,7 @@
.panelRadioBtnLabel { .panelRadioBtnLabel {
font-size: @mediumFontSize; font-size: @mediumFontSize;
padding: 0 @LargeSpace 0 @SmallSpace; padding: 0 @LargeSpace 0 @SmallSpace;
color: var(--colorNeutralForeground1, @BaseHigh); color: var(--colorNeutralForeground1);
} }
.panelSectionSpinner { .panelSectionSpinner {
@ -70,47 +70,42 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
// Override Fluent UI component styles to use theme variables
.ms-Dropdown { .ms-Dropdown {
.ms-Dropdown-title { .ms-Dropdown-title {
background-color: var(--colorNeutralBackground2, @BaseLight); background-color: var(--colorNeutralBackground2);
border-color: var(--colorNeutralStroke1, #605e5c); border-color: var(--colorNeutralStroke1);
color: var(--colorNeutralForeground1, @BaseHigh); color: var(--colorNeutralForeground1);
} }
.ms-Dropdown-caretDownWrapper { .ms-Dropdown-caretDownWrapper {
color: var(--colorNeutralForeground1, @BaseHigh); color: var(--colorNeutralForeground1);
} }
} }
.ms-Checkbox { .ms-Checkbox {
.ms-Checkbox-label { .ms-Checkbox-label {
color: var(--colorNeutralForeground1, @BaseHigh); color: var(--colorNeutralForeground1);
} }
} }
.ms-TextField { .ms-TextField {
.ms-TextField-fieldGroup { .ms-TextField-fieldGroup {
background-color: var(--colorNeutralBackground2, @BaseLight); background-color: var(--colorNeutralBackground2);
border-color: var(--colorNeutralStroke1, #605e5c); border-color: var(--colorNeutralStroke1);
} }
.ms-TextField-field { .ms-TextField-field {
background-color: var(--colorNeutralBackground2, @BaseLight); background-color: var(--colorNeutralBackground2);
color: var(--colorNeutralForeground1, @BaseHigh); color: var(--colorNeutralForeground1);
&::placeholder { &::placeholder {
color: var(--colorNeutralForeground3, @BaseMediumHigh); color: var(--colorNeutralForeground3);
} }
} }
} }
.ms-Text { .ms-Text {
color: var(--colorNeutralForeground1, @BaseHigh); color: var(--colorNeutralForeground1);
}
span, label {
color: var(--colorNeutralForeground1, @BaseHigh);
} }
} }
@ -124,14 +119,14 @@
} }
.panelHeader { .panelHeader {
color: var(--colorNeutralForeground1, @BaseDark); color: var(--colorNeutralForeground1);
font-size: @largeFontSize; font-size: @largeFontSize;
font-weight: 400; font-weight: 400;
} }
.panelInfoErrorContainer { .panelInfoErrorContainer {
background-color: var(--colorNeutralBackground3, @BaseLow); background-color: var(--colorNeutralBackground3);
color: var(--colorNeutralForeground1, @BaseHigh); color: var(--colorNeutralForeground1);
padding: @DefaultSpace; padding: @DefaultSpace;
display: inline-flex; display: inline-flex;
margin: 20px 34px 0 34px; margin: 20px 34px 0 34px;
@ -143,15 +138,15 @@
} }
.panelWarningIcon { .panelWarningIcon {
color: var(--colorPaletteYellowForeground1, @WarningIconColor); color: var(--colorPaletteYellowForeground1);
} }
.panelErrorIcon { .panelErrorIcon {
color: var(--colorPaletteRedForeground1, @ErrorIconColor); color: var(--colorPaletteRedForeground1);
} }
.panelLargeInfoIcon { .panelLargeInfoIcon {
color: var(--colorBrandForeground1, @InfoIconColor); color: var(--colorBrandForeground1);
} }
.panelWarningErrorDetailsLinkContainer { .panelWarningErrorDetailsLinkContainer {
@ -160,22 +155,22 @@
padding-left: @MediumSpace; padding-left: @MediumSpace;
.paneErrorLink { .paneErrorLink {
color: var(--colorBrandForeground1, @LinkColor); color: var(--colorBrandForeground1);
cursor: pointer; cursor: pointer;
font-size: @mediumFontSize; font-size: @mediumFontSize;
} }
.panelWarningErrorMessage { .panelWarningErrorMessage {
color: var(--colorNeutralForeground1, @BaseHigh); color: var(--colorNeutralForeground1);
} }
} }
} }
.panelFooter { .panelFooter {
padding: 16px 34px; padding: 16px 34px;
border-top: solid 1px var(--colorNeutralStroke1, #bbbbbb); border-top: solid 1px var(--colorNeutralStroke1);
background-color: var(--colorNeutralBackground1, @BaseLight); background-color: var(--colorNeutralBackground1);
color: var(--colorNeutralForeground1, @BaseHigh); color: var(--colorNeutralForeground1);
& button { & button {
height: 30px; height: 30px;
@ -197,7 +192,7 @@
.addRemoveIcon [alt="editEntity"]:focus, .addRemoveIcon [alt="editEntity"]:focus,
.addRemoveIconLabel [alt="editEntity"]:focus { .addRemoveIconLabel [alt="editEntity"]:focus {
border: 1px dashed var(--colorNeutralStroke1, #605e5c); border: 1px dashed var(--colorNeutralStroke1);
outline: none; outline: none;
} }
@ -240,7 +235,7 @@
} }
.removeIcon { .removeIcon {
color: @InfoIconColor; color: "var(--colorNeutralForeground1)";
} }
.backImageIcon { .backImageIcon {
@ -248,7 +243,7 @@
} }
[alt="back"]:focus { [alt="back"]:focus {
border: 1px solid var(--colorCompoundBrandStroke1, @SelectionColor); border: 1px solid var(--colorCompoundBrandStroke1);
outline: none; outline: none;
} }
@ -296,4 +291,5 @@
.ms-Panel-overlay { .ms-Panel-overlay {
background-color: var(--overlayBackground); background-color: var(--overlayBackground);
} }
} }

11
src/Explorer/Panes/SaveQueryPane/SaveQueryPane.tsx
View File

@ -147,7 +147,16 @@ export const SaveQueryPane: FunctionComponent<SaveQueryPaneProps> = ({
<div className="panelFormWrapper" style={{ flexGrow: 1 }}> <div className="panelFormWrapper" style={{ flexGrow: 1 }}>
<div className="panelMainContent"> <div className="panelMainContent">
{!isSaveQueryEnabled() ? ( {!isSaveQueryEnabled() ? (
<Text variant="small">{setupSaveQueriesText}</Text> <Text
variant="small"
styles={{
root: {
color: 'var(--colorNeutralForeground1)',
}
}}
>
{setupSaveQueriesText}
</Text>
) : ( ) : (
<TextField <TextField
id="saveQueryInput" id="saveQueryInput"

8
src/Main.tsx
View File

@ -64,6 +64,7 @@ import "./Shared/appInsights";
import { useConfig } from "./hooks/useConfig"; import { useConfig } from "./hooks/useConfig";
import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer"; import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer";
import { isDarkMode } from "./hooks/useTheme"; import { isDarkMode } from "./hooks/useTheme";
import "./less/DarkModeMenus.less";
import "./less/ThemeSystem.less"; import "./less/ThemeSystem.less";
// Initialize icons before React is loaded // Initialize icons before React is loaded
initializeIcons(undefined, { disableWarnings: true }); initializeIcons(undefined, { disableWarnings: true });
@ -124,11 +125,8 @@ const App = (): JSX.Element => {
}} }}
> >
<div id="freeTierTeachingBubble"> </div> <div id="freeTierTeachingBubble"> </div>
{/* Main Command Bar - Start */}
<CommandBar container={explorer} /> <CommandBar container={explorer} />
{/* Collections Tree and Tabs - Begin */}
<SidebarContainer explorer={explorer} /> <SidebarContainer explorer={explorer} />
{/* Collections Tree and Tabs - End */}
<div <div
className="dataExplorerErrorConsoleContainer" className="dataExplorerErrorConsoleContainer"
role="contentinfo" role="contentinfo"
@ -155,21 +153,17 @@ const App = (): JSX.Element => {
}; };
const Root: React.FC = () => { const Root: React.FC = () => {
// Force dark theme
const currentTheme = isDarkMode ? webDarkTheme : webLightTheme; const currentTheme = isDarkMode ? webDarkTheme : webLightTheme;
// Apply theme to body for Fluent UI v8 components
useEffect(() => { useEffect(() => {
if (isDarkMode) { if (isDarkMode) {
document.body.classList.add("isDarkMode"); document.body.classList.add("isDarkMode");
document.body.style.backgroundColor = "var(--colorNeutralBackground1)"; document.body.style.backgroundColor = "var(--colorNeutralBackground1)";
document.body.style.color = "var(--colorNeutralForeground1)"; document.body.style.color = "var(--colorNeutralForeground1)";
// loadTheme(appThemeFabric);
} else { } else {
document.body.classList.remove("isDarkMode"); document.body.classList.remove("isDarkMode");
document.body.style.backgroundColor = ""; document.body.style.backgroundColor = "";
document.body.style.color = ""; document.body.style.color = "";
// loadTheme(appThemeFabric);
} }
}, [isDarkMode]); }, [isDarkMode]);

57
src/less/DarkModeMenus.less Normal file
View File

@ -0,0 +1,57 @@
body.isDarkMode {
.ms-Callout.ms-ContextualMenu-Callout {
--bodyBackgroundColor: var(--colorNeutralBackground1);
--bodyTextColor: var(--colorNeutralForeground1);
.ms-Callout-main {
background-color: var(--colorNeutralBackground1);
}
}
.ms-ContextualMenu-container,
.ms-ContextualMenu-list,
.ms-ContextualMenu-list.is-open {
background-color: var(--colorNeutralBackground1);
}
.ms-ContextualMenu-item {
background-color: var(--colorNeutralBackground1);
}
.ms-ContextualMenu-link {
color: var(--colorNeutralForeground1);
background-color: var(--colorNeutralBackground1);
&:hover, &:focus {
background-color: var(--colorNeutralBackground3);
}
}
.ms-ContextualMenu-itemText {
color: var(--colorNeutralForeground1);
}
.ms-ContextualMenu-icon {
color: var(--colorNeutralForeground1);
}
}
body.isDarkMode {
.fui-MenuPopover {
background-color: var(--colorNeutralBackground1);
}
.fui-MenuList {
background-color: var(--colorNeutralBackground1);
}
.fui-MenuItem {
color: var(--colorNeutralForeground1);
background-color: var(--colorNeutralBackground1);
&:hover, &:focus {
background-color: var(--colorNeutralBackground3);
}
}
}

37
src/less/ThemeSystem.less
View File

@ -7,6 +7,7 @@
--colorNeutralForeground1: @BaseHigh; --colorNeutralForeground1: @BaseHigh;
--colorNeutralForeground2: @BaseMediumHigh; --colorNeutralForeground2: @BaseMediumHigh;
--colorNeutralForeground3: @BaseMedium; --colorNeutralForeground3: @BaseMedium;
--colorNeutralForeground4: @BaseLow;
--colorNeutralStroke1: @BaseMedium; --colorNeutralStroke1: @BaseMedium;
--colorCompoundBrandStroke1: @SelectionColor; --colorCompoundBrandStroke1: @SelectionColor;
--colorBrandForeground1: @LinkColor; --colorBrandForeground1: @LinkColor;
@ -26,6 +27,7 @@ body.isDarkMode {
--colorNeutralForeground1: #ffffff; --colorNeutralForeground1: #ffffff;
--colorNeutralForeground2: #d2d2d2; --colorNeutralForeground2: #d2d2d2;
--colorNeutralForeground3: #a0a0a0; --colorNeutralForeground3: #a0a0a0;
--colorNeutralForeground4: #6e6e6e;
--colorNeutralStroke1: #484848; --colorNeutralStroke1: #484848;
--colorCompoundBrandStroke1: #4db6e8; --colorCompoundBrandStroke1: #4db6e8;
--colorBrandForeground1: #4db6e8; --colorBrandForeground1: #4db6e8;
@ -39,31 +41,31 @@ body.isDarkMode {
// Theme Mixins // Theme Mixins
.theme-background() { .theme-background() {
background-color: var(--colorNeutralBackground1, @BaseLight); background-color: var(--colorNeutralBackground1);
color: var(--colorNeutralForeground1, @BaseHigh); color: var(--colorNeutralForeground1);
} }
.theme-surface() { .theme-surface() {
background-color: var(--colorNeutralBackground2, @BaseLow); background-color: var(--colorNeutralBackground2);
color: var(--colorNeutralForeground1, @BaseHigh); color: var(--colorNeutralForeground1);
} }
.theme-border() { .theme-border() {
border-color: var(--colorNeutralStroke1, @BaseMedium); border-color: var(--colorNeutralStroke1);
} }
.theme-input() { .theme-input() {
background-color: var(--colorNeutralBackground2, @BaseLow); background-color: var(--colorNeutralBackground2);
color: var(--colorNeutralForeground1, @BaseHigh); color: var(--colorNeutralForeground1);
border: 1px solid var(--colorNeutralStroke1, @BaseMedium); border: 1px solid var(--colorNeutralStroke1);
&::placeholder { &::placeholder {
color: var(--colorNeutralForeground3, @BaseMedium); color: var(--colorNeutralForeground3);
} }
&:focus, &:focus,
&:focus-within { &:focus-within {
border-color: var(--colorCompoundBrandStroke1, @SelectionColor); border-color: var(--colorCompoundBrandStroke1);
outline: none; outline: none;
} }
} }
@ -72,21 +74,8 @@ body.isDarkMode {
.ms-TextField { .ms-TextField {
.ms-TextField-fieldGroup { .ms-TextField-fieldGroup {
&:focus-within { &:focus-within {
border-color: var(--colorCompoundBrandStroke1, @SelectionColor) ; border-color: var(--colorCompoundBrandStroke1) ;
} }
} }
} }
} }
.theme-panel() {
.theme-background();
.theme-border();
}
:global {
.ms-Fabric--isFocusVisible .ms-Button:focus::after,
.ms-Fabric--isFocusVisible .ms-TextField:focus::after,
.ms-Fabric--isFocusVisible *[data-is-focusable="true"]:focus::after {
border-color: var(--colorCompoundBrandStroke1, @SelectionColor) ;
}
}