adam/vscode-front-matter
1
0
Fork 0
mirror of https://github.com/estruyf/vscode-front-matter.git synced 2026-07-01 07:21:15 +02:00
Code Issues Packages Projects Releases Wiki Activity

Tab colors

Browse Source
This commit is contained in:
Elio Struyf
2024-04-01 17:06:48 +02:00
parent 0b7f58d0ab
commit 35a6c8bada
5 changed files with 40 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/dashboardWebView/components/Header/Tab.tsx
+3 -3
View File
@@ -17,10 +17,10 @@ export const Tab: React.FunctionComponent<ITabProps> = ({
return (
<button
className={cn(`h-full flex items-center py-2 px-1 text-sm font-medium text-center border-b-2 border-transparent hover:border-[var(--vscode-tab-activeForeground)] hover:text-[var(--vscode-tab-activeForeground)] ${location.pathname === `/${navigationType}`
className={cn(`h-full flex items-center py-2 px-1 text-sm font-medium text-center border-b-2 border-transparent hover:text-[var(--vscode-tab-activeForeground)] ${location.pathname === `/${navigationType}`
?
`text-[var(--vscode-tab-activeForeground)] border-[var(--vscode-tab-activeForeground)]` :
`text-[var(--vscode-tab-inactiveForeground)]`
`text-[var(--frontmatter-nav-active)] border-[var(--frontmatter-nav-active)]` :
`text-[var(--frontmatter-nav-inactive)]`
}`)}
type="button"
role="tab"
src/dashboardWebView/components/Header/Tabs.tsx
+5 -5
View File
@@ -27,20 +27,20 @@ export const Tabs: React.FunctionComponent<ITabsProps> = ({
>
<li role="presentation">
<Tab navigationType={NavigationType.Contents} onNavigate={onNavigate}>
<PageIcon className={`h-4 w-auto mr-2 text-[var(--frontmatter-secondary-text)]`} />
<PageIcon className={`h-4 w-auto mr-2`} />
<span>{l10n.t(LocalizationKey.dashboardHeaderTabsContents)}</span>
</Tab>
</li>
<li role="presentation">
<Tab navigationType={NavigationType.Media} onNavigate={onNavigate}>
<PhotoIcon className={`h-4 w-auto mr-2 text-[var(--frontmatter-secondary-text)]`} />
<PhotoIcon className={`h-4 w-auto mr-2`} />
<span>{l10n.t(LocalizationKey.dashboardHeaderTabsMedia)}</span>
</Tab>
</li>
<FeatureFlag features={mode?.features || []} flag={FEATURE_FLAG.dashboard.snippets.view}>
<li role="presentation">
<Tab navigationType={NavigationType.Snippets} onNavigate={onNavigate}>
<ScissorsIcon className={`h-4 w-auto mr-2 text-[var(--frontmatter-secondary-text)]`} />
<ScissorsIcon className={`h-4 w-auto mr-2`} />
<span>{l10n.t(LocalizationKey.dashboardHeaderTabsSnippets)}</span>
</Tab>
</li>
@@ -48,7 +48,7 @@ export const Tabs: React.FunctionComponent<ITabsProps> = ({
<FeatureFlag features={mode?.features || []} flag={FEATURE_FLAG.dashboard.data.view}>
<li role="presentation">
<Tab navigationType={NavigationType.Data} onNavigate={onNavigate}>
<CircleStackIcon className={`h-4 w-auto mr-2 text-[var(--frontmatter-secondary-text)]`} />
<CircleStackIcon className={`h-4 w-auto mr-2`} />
<span>{l10n.t(LocalizationKey.dashboardHeaderTabsData)}</span>
</Tab>
</li>
@@ -56,7 +56,7 @@ export const Tabs: React.FunctionComponent<ITabsProps> = ({
<FeatureFlag features={mode?.features || []} flag={FEATURE_FLAG.dashboard.taxonomy.view}>
<li role="presentation">
<Tab navigationType={NavigationType.Taxonomy} onNavigate={onNavigate}>
<TagIcon className={`h-4 w-auto mr-2 text-[var(--frontmatter-secondary-text)]`} />
<TagIcon className={`h-4 w-auto mr-2`} />
<span>{l10n.t(LocalizationKey.dashboardHeaderTabsTaxonomies)}</span>
</Tab>
</li>
src/dashboardWebView/utils/index.ts
+1
View File
@@ -1,5 +1,6 @@
export * from './MessageHandlers';
export * from './darkenColor';
export * from './getRelPath';
export * from './opacityColor';
export * from './preserveColor';
export * from './updateCssVariables';
src/dashboardWebView/utils/opacityColor.ts
+19
View File
@@ -0,0 +1,19 @@
export const opacityColor = (color: string | undefined, opacity: number) => {
if (color) {
if (color.startsWith('#')) {
return `${color}${Math.round(opacity * 255)
.toString(16)
.padStart(2, '0')}`;
} else if (color.startsWith('rgba')) {
const splits = color.split(',');
splits.pop();
return `${splits.join(', ')}, ${opacity})`;
} else if (color.startsWith('rgb')) {
return `${color.replace('rgb', 'rgba').replace(')', `, ${opacity})`)}`;
} else {
return color;
}
}
return color;
};
src/dashboardWebView/utils/updateCssVariables.ts
+12 -2
View File
@@ -1,5 +1,4 @@
import { darkenColor } from './darkenColor';
import { preserveColor } from './preserveColor';
import { darkenColor, opacityColor, preserveColor } from '.';
export const updateCssVariables = (isDarkTheme: boolean = true) => {
const styles = getComputedStyle(document.documentElement);
@@ -52,6 +51,17 @@ export const updateCssVariables = (isDarkTheme: boolean = true) => {
'var(--vscode-list-activeSelectionForeground)'
);
// Navigation
const tabActiveForeground = styles.getPropertyValue('--vscode-tab-activeForeground');
document.documentElement.style.setProperty(
'--frontmatter-nav-active',
preserveColor(tabActiveForeground) || 'var(--vscode-tab-activeForeground)'
);
document.documentElement.style.setProperty(
'--frontmatter-nav-inactive',
opacityColor(tabActiveForeground, 0.6) || 'var(--vscode-tab-inactiveForeground)'
);
// Borders
const borderColor = styles.getPropertyValue('--vscode-panel-border');
document.documentElement.style.setProperty('--frontmatter-border', 'var(--vscode-panel-border)');