Skip to content

Commit cc7114b

Browse files
lramos15lramos15
authored
Switch to using CSS (microsoft#165185)
* Switch to using CSS * Better fallback value
1 parent cbf6c41 commit cc7114b

File tree

2 files changed

+139
-132
lines changed

2 files changed

+139
-132
lines changed

‎src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted.ts

Lines changed: 1 addition & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,7 @@ import { $, addDisposableListener, append, clearNode, Dimension, reset } from 'v
1313
import { ICommandService } from 'vs/platform/commands/common/commands';
1414
import { IProductService } from 'vs/platform/product/common/productService';
1515
import { hiddenEntriesConfigurationKey, IResolvedWalkthrough, IResolvedWalkthroughStep, IWalkthroughsService } from 'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStartedService';
16-
import { IThemeService, registerThemingParticipant, ThemeIcon } from 'vs/platform/theme/common/themeService';
17-
import { welcomePageBackground, welcomePageProgressBackground, welcomePageProgressForeground, welcomePageTileBackground, welcomePageTileHoverBackground, welcomePageTileShadow } from 'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStartedColors';
18-
import { activeContrastBorder, buttonBackground, buttonForeground, buttonHoverBackground, contrastBorder, descriptionForeground, focusBorder, foreground, checkboxBackground, checkboxBorder, checkboxForeground, textLinkActiveForeground, textLinkForeground } from 'vs/platform/theme/common/colorRegistry';
16+
import { IThemeService, ThemeIcon } from 'vs/platform/theme/common/themeService';
1917
import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
2018
import { firstSessionDateStorageKey, ITelemetryService, TelemetryLevel } from 'vs/platform/telemetry/common/telemetry';
2119
import { DomScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement';
@@ -55,7 +53,6 @@ import { Schemas } from 'vs/base/common/network';
5553
import { IEditorOptions } from 'vs/platform/editor/common/editor';
5654
import { coalesce, equals, flatten } from 'vs/base/common/arrays';
5755
import { ThemeSettings } from 'vs/workbench/services/themes/common/workbenchThemeService';
58-
import { ACTIVITY_BAR_BADGE_BACKGROUND, ACTIVITY_BAR_BADGE_FOREGROUND } from 'vs/workbench/common/theme';
5956
import { startEntries } from 'vs/workbench/contrib/welcomeGettingStarted/common/gettingStartedContent';
6057
import { MarkdownRenderer } from 'vs/editor/contrib/markdownRenderer/browser/markdownRenderer';
6158
import { GettingStartedIndexList } from './gettingStartedList';
@@ -1457,131 +1454,3 @@ export class GettingStartedInputSerializer implements IEditorSerializer {
14571454
return new GettingStartedInput({});
14581455
}
14591456
}
1460-
1461-
registerThemingParticipant((theme, collector) => {
1462-
1463-
const backgroundColor = theme.getColor(welcomePageBackground);
1464-
if (backgroundColor) {
1465-
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer { background-color: ${backgroundColor}; }`);
1466-
}
1467-
1468-
const foregroundColor = theme.getColor(foreground);
1469-
if (foregroundColor) {
1470-
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer { color: ${foregroundColor}; }`);
1471-
}
1472-
1473-
const descriptionColor = theme.getColor(descriptionForeground);
1474-
if (descriptionColor) {
1475-
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .description { color: ${descriptionColor}; }`);
1476-
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .category-progress .message { color: ${descriptionColor}; }`);
1477-
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .gettingStartedDetailsContent > .getting-started-footer { color: ${descriptionColor}; }`);
1478-
}
1479-
1480-
const iconColor = theme.getColor(textLinkForeground);
1481-
if (iconColor) {
1482-
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .icon-widget { color: ${iconColor} }`);
1483-
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .codicon-getting-started-step-checked { color: ${iconColor} } `);
1484-
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step.expanded .codicon-getting-started-step-unchecked { color: ${iconColor} } `);
1485-
}
1486-
1487-
const buttonColor = theme.getColor(welcomePageTileBackground);
1488-
if (buttonColor) {
1489-
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer button { background: ${buttonColor}; }`);
1490-
}
1491-
1492-
const shadowColor = theme.getColor(welcomePageTileShadow);
1493-
if (shadowColor) {
1494-
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideCategories .getting-started-category { filter: drop-shadow(2px 2px 2px ${buttonColor}); }`);
1495-
}
1496-
1497-
const buttonHoverColor = theme.getColor(welcomePageTileHoverBackground);
1498-
if (buttonHoverColor) {
1499-
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer button:hover { background: ${buttonHoverColor}; }`);
1500-
}
1501-
if (buttonColor && buttonHoverColor) {
1502-
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer button.expanded:hover { background: ${buttonColor}; }`);
1503-
}
1504-
1505-
const emphasisButtonForeground = theme.getColor(buttonForeground);
1506-
if (emphasisButtonForeground) {
1507-
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer button.emphasis { color: ${emphasisButtonForeground}; }`);
1508-
}
1509-
1510-
const emphasisButtonBackground = theme.getColor(buttonBackground);
1511-
if (emphasisButtonBackground) {
1512-
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer button.emphasis { background: ${emphasisButtonBackground}; }`);
1513-
}
1514-
1515-
const pendingStepColor = theme.getColor(descriptionForeground);
1516-
if (pendingStepColor) {
1517-
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .codicon-getting-started-step-unchecked { color: ${pendingStepColor} } `);
1518-
}
1519-
1520-
const emphasisButtonHoverBackground = theme.getColor(buttonHoverBackground);
1521-
if (emphasisButtonHoverBackground) {
1522-
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer button.emphasis:hover { background: ${emphasisButtonHoverBackground}; }`);
1523-
}
1524-
1525-
const link = theme.getColor(textLinkForeground);
1526-
if (link) {
1527-
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer a:not(.hide-category-button) { color: ${link}; }`);
1528-
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .button-link { color: ${link}; }`);
1529-
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .button-link .codicon { color: ${link}; }`);
1530-
}
1531-
const activeLink = theme.getColor(textLinkActiveForeground);
1532-
if (activeLink) {
1533-
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer a:not(.hide-category-button):hover { color: ${activeLink}; }`);
1534-
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer a:not(.hide-category-button):active { color: ${activeLink}; }`);
1535-
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer button.button-link:hover { color: ${activeLink}; }`);
1536-
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer button.button-link:hover .codicon { color: ${activeLink}; }`);
1537-
}
1538-
const focusColor = theme.getColor(focusBorder);
1539-
if (focusColor) {
1540-
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer a:not(.codicon-close):focus { outline-color: ${focusColor}; }`);
1541-
}
1542-
const border = theme.getColor(contrastBorder);
1543-
if (border) {
1544-
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer button { border: 1px solid ${border}; }`);
1545-
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer button.button-link { border: inherit; }`);
1546-
}
1547-
const activeBorder = theme.getColor(activeContrastBorder);
1548-
if (activeBorder) {
1549-
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer button:hover { outline-color: ${activeBorder}; }`);
1550-
}
1551-
1552-
const progressBackground = theme.getColor(welcomePageProgressBackground);
1553-
if (progressBackground) {
1554-
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideCategories .progress-bar-outer { background-color: ${progressBackground}; }`);
1555-
}
1556-
const progressForeground = theme.getColor(welcomePageProgressForeground);
1557-
if (progressForeground) {
1558-
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideCategories .progress-bar-inner { background-color: ${progressForeground}; }`);
1559-
}
1560-
1561-
const newBadgeForeground = theme.getColor(ACTIVITY_BAR_BADGE_FOREGROUND);
1562-
if (newBadgeForeground) {
1563-
collector.addRule(`.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .new-badge { color: ${newBadgeForeground}; }`);
1564-
collector.addRule(`.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .featured .featured-icon { color: ${newBadgeForeground}; }`);
1565-
}
1566-
1567-
const newBadgeBackground = theme.getColor(ACTIVITY_BAR_BADGE_BACKGROUND);
1568-
if (newBadgeBackground) {
1569-
collector.addRule(`.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .new-badge { background-color: ${newBadgeBackground}; }`);
1570-
collector.addRule(`.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .featured { border-top-color: ${newBadgeBackground}; }`);
1571-
}
1572-
1573-
const checkboxBackgroundColor = theme.getColor(checkboxBackground);
1574-
if (checkboxBackgroundColor) {
1575-
collector.addRule(`.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-checkbox { background-color: ${checkboxBackgroundColor} !important; }`);
1576-
}
1577-
1578-
const checkboxForegroundColor = theme.getColor(checkboxForeground);
1579-
if (checkboxForegroundColor) {
1580-
collector.addRule(`.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-checkbox { color: ${checkboxForegroundColor} !important; }`);
1581-
}
1582-
1583-
const checkboxBorderColor = theme.getColor(checkboxBorder);
1584-
if (checkboxBorderColor) {
1585-
collector.addRule(`.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-checkbox { border-color: ${checkboxBorderColor} !important; }`);
1586-
}
1587-
});

‎src/vs/workbench/contrib/welcomeGettingStarted/browser/media/gettingStarted.css

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -820,3 +820,141 @@
820820
.monaco-workbench .part.editor>.content .gettingStartedContainer .hide-category-button:hover {
821821
background-color: var(--vscode-toolbar-hoverBackground);
822822
}
823+
824+
.monaco-workbench .part.editor > .content .gettingStartedContainer {
825+
background: var(--vscode-welcomePage-background);
826+
color: var(--vscode-foreground);
827+
}
828+
829+
.monaco-workbench .part.editor > .content .gettingStartedContainer .description {
830+
color: var(--vscode-descriptionForeground);
831+
}
832+
833+
.monaco-workbench .part.editor > .content .gettingStartedContainer .category-progress .message {
834+
color: var(--vscode-descriptionForeground);
835+
}
836+
837+
.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .gettingStartedDetailsContent > .getting-started-footer {
838+
color: var(--vscode-descriptionForeground);
839+
}
840+
841+
.monaco-workbench .part.editor > .content .gettingStartedContainer .icon-widget {
842+
color: var(--vscode-textLink-foreground);
843+
}
844+
845+
.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .codicon-getting-started-step-checked {
846+
color: var(--vscode-textLink-foreground);
847+
}
848+
849+
.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step.expanded .codicon-getting-started-step-unchecked {
850+
color: var(--vscode-textLink-foreground);
851+
}
852+
853+
.monaco-workbench .part.editor > .content .gettingStartedContainer button {
854+
background: var(--vscode-welcomePage-tileBackground);
855+
}
856+
857+
.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideCategories .getting-started-category {
858+
filter: drop-shadow(2px 2px 2px var(--vscode-welcomePage-tileShadow));
859+
}
860+
861+
.monaco-workbench .part.editor > .content .gettingStartedContainer button:hover {
862+
background: var(--vscode-welcomePage-tileHoverBackground);
863+
outline-color: var(--vscode-contrastActiveBorder, var(--vscode-focusBorder));
864+
}
865+
866+
.monaco-workbench .part.editor > .content .gettingStartedContainer button.expanded:hover {
867+
background: var(--vscode-welcomePage-tileBackground);
868+
}
869+
870+
.monaco-workbench .part.editor > .content .gettingStartedContainer button.emphasis {
871+
color: var(--vscode-button-foreground);
872+
}
873+
874+
.monaco-workbench .part.editor > .content .gettingStartedContainer button.emphasis {
875+
background: var(--vscode-button-background);
876+
}
877+
878+
.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .codicon-getting-started-step-unchecked {
879+
color: var(--vscode-descriptionForeground);
880+
}
881+
882+
.monaco-workbench .part.editor > .content .gettingStartedContainer button.emphasis:hover {
883+
background: var(--vscode-button-hoverBackground);
884+
}
885+
886+
.monaco-workbench .part.editor > .content .gettingStartedContainer a:not(.hide-category-button) {
887+
color: var(--vscode-textLink-foreground);
888+
}
889+
890+
.monaco-workbench .part.editor > .content .gettingStartedContainer .button-link {
891+
color: var(--vscode-textLink-foreground);
892+
}
893+
894+
.monaco-workbench .part.editor > .content .gettingStartedContainer .button-link .codicon {
895+
color: var(--vscode-textLink-foreground);
896+
}
897+
898+
.monaco-workbench .part.editor > .content .gettingStartedContainer a:not(.hide-category-button):hover {
899+
color: var(--vscode-textLink-activeForeground);
900+
}
901+
902+
.monaco-workbench .part.editor > .content .gettingStartedContainer a:not(.hide-category-button):active {
903+
color: var(--vscode-textLink-activeForeground);
904+
}
905+
906+
.monaco-workbench .part.editor > .content .gettingStartedContainer button.button-link:hover {
907+
color: var(--vscode-textLink-activeForeground);
908+
}
909+
910+
.monaco-workbench .part.editor > .content .gettingStartedContainer button.button-link:hover .codicon {
911+
color: var(--vscode-textLink-activeForeground);
912+
}
913+
914+
.monaco-workbench .part.editor > .content .gettingStartedContainer a:not(.codicon-close):focus {
915+
outline-color: var(--vscode-focusBorder);
916+
}
917+
918+
.monaco-workbench .part.editor > .content .gettingStartedContainer button {
919+
border: 1px solid var(--vscode-contrastBorder);
920+
}
921+
922+
.monaco-workbench .part.editor > .content .gettingStartedContainer button.button-link {
923+
border: inherit;
924+
}
925+
926+
.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideCategories .progress-bar-outer {
927+
background-color: var(--vscode-welcomePage-progress-background);
928+
}
929+
930+
.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideCategories .progress-bar-inner {
931+
background-color: var(--vscode-welcomePage-progress-foreground);
932+
}
933+
934+
.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .new-badge {
935+
color: var(--vscode-activityBarBadge-foreground);
936+
}
937+
938+
.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .featured .featured-icon {
939+
color: var(--vscode-activityBarBadge-foreground);
940+
}
941+
942+
.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .new-badge {
943+
background-color: var(--vscode-activityBarBadge-background);
944+
}
945+
946+
.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .featured {
947+
border-top-color: var(--vscode-activityBarBadge-background);
948+
}
949+
950+
.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-checkbox {
951+
background-color: var(--vscode-checkbox-background) !important;
952+
}
953+
954+
.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-checkbox {
955+
color: var(--vscode-checkbox-foreground) !important;
956+
}
957+
958+
.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-checkbox {
959+
border-color: var(--vscode-checkbox-border) !important;
960+
}

0 commit comments

Comments
 (0)