Modularize styling participants

eclipse-theia · Jun 10, 2022 · 77b5538 · 77b5538
1 parent ad72cf5
commit 77b5538
Show file tree

Hide file tree

Showing 7 changed files with 271 additions and 188 deletions.
diff --git a/packages/core/src/browser/common-frontend-contribution.ts b/packages/core/src/browser/common-frontend-contribution.ts
@@ -341,13 +341,7 @@ export const supportPaste = browser.isNative || (!browser.isChrome && document.q
 export const RECENT_COMMANDS_STORAGE_KEY = 'commands';
 
 @injectable()
-export class CommonFrontendContribution implements
-    FrontendApplicationContribution,
-    MenuContribution,
-    CommandContribution,
-    KeybindingContribution,
-    ColorContribution,
-    StylingParticipant {
+export class CommonFrontendContribution implements FrontendApplicationContribution, MenuContribution, CommandContribution, KeybindingContribution, ColorContribution {
 
     protected commonDecorationsStyleSheet: CSSStyleSheet = DecorationStyle.createStyleSheet('coreCommonDecorationsStyle');
 
@@ -2245,164 +2239,4 @@ export class CommonFrontendContribution implements
             }
         );
     }
-
-    registerThemeStyle(theme: ColorTheme, collector: CssStyleCollector): void {
-        const focusBorder = theme.getColor('focusBorder');
-        const contrastBorder = theme.getColor('contrastBorder');
-        const highContrast = isHighContrast(theme.type);
-
-        if (highContrast) {
-            if (focusBorder) {
-                // Action labels (codicon buttons)
-                collector.addRule(`
-                    .action-label:hover {
-                        outline: 1px dashed ${focusBorder};
-                    }
-                `);
-                // Menus
-                collector.addRule(`
-                    .p-Menu .p-Menu-item.p-mod-active {
-                        outline: 1px solid ${focusBorder};
-                        outline-offset: -1px;
-                    }
-                    .p-MenuBar .p-MenuBar-item.p-mod-active {
-                        outline: 1px dashed ${focusBorder};
-                    }
-                    .p-MenuBar.p-mod-active .p-MenuBar-item.p-mod-active {
-                        outline: 1px solid ${focusBorder};
-                    }
-                `);
-                // Sidebar Menu
-                // Menus
-                collector.addRule(`
-                    .theia-sidebar-menu > :hover {
-                        outline: 1px dashed ${focusBorder};
-                        outline-offset: -7px;
-                    }
-                `);
-                // Tabs
-                collector.addRule(`
-                    #theia-main-content-panel .p-TabBar .p-TabBar-tab {
-                        outline-offset: -4px;
-                    }
-                    #theia-main-content-panel .p-TabBar .p-TabBar-tab.p-mod-current {
-                        outline: 1px solid ${focusBorder};
-                    }
-                    #theia-main-content-panel .p-TabBar .p-TabBar-tab:not(.p-mod-current):hover {
-                        outline: 1px dashed ${focusBorder};
-                    }
-                `);
-                // Trees
-                collector.addRule(`
-                    .theia-TreeNode {
-                        outline-offset: -1px;
-                    }
-                    .theia-TreeNode:hover {
-                        outline: 1px dashed ${focusBorder};
-                    }
-                    .theia-Tree .theia-TreeNode.theia-mod-selected {
-                        outline: 1px dotted ${focusBorder};
-                    }
-                    .theia-Tree:focus .theia-TreeNode.theia-mod-selected,
-                    .theia-Tree .ReactVirtualized__List:focus .theia-TreeNode.theia-mod-selected {
-                        outline: 1px solid ${focusBorder};
-                    }
-                `);
-            }
-            if (contrastBorder) {
-                // Buttons
-                collector.addRule(`
-                    .theia-button {
-                        border: 1px solid ${contrastBorder};
-                    }
-                `);
-                // Breadcrumbs
-                collector.addRule(`
-                    .theia-tabBar-breadcrumb-row {
-                        outline: 1px solid ${contrastBorder};
-                    }
-                `);
-                // Badges
-                collector.addRule(`.p-TabBar .theia-badge-decorator-sidebar {
-                    outline: 1px solid ${contrastBorder};
-                }`);
-            }
-        }
-
-        // Buttons
-        const buttonBackground = theme.getColor('button.background');
-        collector.addRule(`
-            .theia-button {
-                background: ${buttonBackground || 'none'};
-            }
-        `);
-        const buttonHoverBackground = theme.getColor('button.hoverBackground');
-        if (buttonHoverBackground) {
-            collector.addRule(`
-                .theia-button:hover {
-                    background-color: ${buttonHoverBackground};
-                }
-            `);
-        }
-        const secondaryButtonBackground = theme.getColor('secondaryButton.background');
-        collector.addRule(`
-            .theia-button.secondary {
-                background: ${secondaryButtonBackground || 'none'};
-            }
-        `);
-        const secondaryButtonHoverBackground = theme.getColor('secondaryButton.hoverBackground');
-        if (secondaryButtonHoverBackground) {
-            collector.addRule(`
-                .theia-button.secondary:hover {
-                    background-color: ${secondaryButtonHoverBackground};
-                }
-            `);
-        }
-        // Tabs
-        const tabActiveBackground = theme.getColor('tab.activeBackground');
-        const tabActiveBorderTop = theme.getColor('tab.activeBorderTop') || (highContrast && contrastBorder) || 'transparent';
-        const tabActiveBorder = theme.getColor('tab.activeBorder') || (highContrast && contrastBorder) || 'transparent';
-        collector.addRule(`
-            #theia-main-content-panel .p-TabBar .p-TabBar-tab.p-mod-current {
-                color: var(--theia-tab-activeForeground);
-                ${tabActiveBackground && `background: ${tabActiveBackground};`}
-                box-shadow: 0 1px 0 ${tabActiveBorderTop}, 0 -1px 0 ${tabActiveBorder} inset;
-            }
-        `);
-        // Status bar
-        if (isHighContrast(theme.type) && focusBorder) {
-            collector.addRule(`
-                #theia-statusBar .area .element.hasCommand:hover {
-                    outline: 1px dashed ${focusBorder};
-                    cursor: pointer;
-                }
-                #theia-statusBar .area .element.hasCommand:active {
-                    outline: 1px solid ${focusBorder};
-                    cursor: pointer;
-                }
-                .theia-mod-offline #theia-statusBar .area .element.hasCommand:hover {
-                    outline: none;
-                }
-                .theia-mod-offline #theia-statusBar .area .element.hasCommand:active {
-                    outline: none;
-                }
-            `);
-        } else {
-            collector.addRule(`
-                #theia-statusBar .area .element.hasCommand:hover {
-                    background-color: var(--theia-statusBarItem-hoverBackground);
-                    cursor: pointer;
-                }
-                #theia-statusBar .area .element.hasCommand:active {
-                    background-color: var(--theia-statusBarItem-activeBackground);
-                }
-                .theia-mod-offline #theia-statusBar .area .element.hasCommand:hover {
-                    background-color: var(--theia-statusBarItem-offlineHoverBackground) !important;
-                }
-                .theia-mod-offline #theia-statusBar .area .element.hasCommand:active {
-                    background-color: var(--theia-statusBarItem-offlineActiveBackground) !important;
-                }
-            `);
-        }
-    }
 }