@sap-ux/ui-components 1.0.0

package/dist/styles/_color.scss

@@ -0,0 +1,435 @@
+:root {
+    /* Variables with WING support */
+    --vscuie-button-background: var(--theia-button-background, var(--vscode-button-background, #2196f3));
+    --vscuie-button-foreground: var(
+        --theia-ui-button-font-color,
+        var(--vscode-button-foreground, rgba(255, 255, 255, 1))
+    );
+    --vscuie-button-hoverBackground: var(--theia-ui-button-color-hover, var(--vscode-button-hoverBackground, #1976d2));
+    --vscuie-editor-background: var(--theia-editor-background, var(--vscode-editor-background, #ffffff));
+    --vscuie-editor-foreground: var(--theia-editor-foreground, var(--vscode-editor-foreground, #616161));
+    --vscuie-input-foreground: var(--theia-input-foreground, var(--vscode-input-foreground, #e0e0e0));
+    --vscuie-input-placeholderForeground: var(
+        --theia-ui-font-color0,
+        var(--vscode-input-placeholderForeground, #212121)
+    );
+    --vscuie-input-border: var(--theia-border-color1, var(--vscode-input-border, #eeeeee));
+    --vscuie-input-background: var(--theia-input-background, var(--vscode-input-background, #ececec));
+    --vscuie-foreground: var(--theia-foreground, var(--vscode-foreground, #616161));
+    --vscuie-editor-inactiveSelectionBackground: var(
+        --theia-editor-inactiveSelectionBackground,
+        var(--vscode-editor-inactiveSelectionBackground, #bdbdbd)
+    );
+    --vscuie-editor-font-weight: var(--vscode-editor-font-weight, 400);
+
+    --vscuie-font-family: var(
+        --theia-ui-font-family,
+        var(
+            --vscode-font-family,
+            (
+                -apple-system,
+                BlinkMacSystemFont,
+                'Segoe UI',
+                Roboto,
+                Helvetica,
+                Arial,
+                sans-serif,
+                'Apple Color Emoji',
+                'Segoe UI Emoji',
+                'Segoe UI Symbol'
+            )
+        )
+    );
+    --vscuie-font-size: var(--theia-ui-font-size1, var(--vscode-font-size, 12px));
+    --vscuie-font-weight: var(--vscode-font-weight, 'normal');
+
+    --vscuie-list-dropBackground: var(--theia-ansi-white-background-color, var(--vscode-list-dropBackground, #bdbdbd));
+    --vscuie-menu-background: var(--theia-menu-color0, var(--vscode-menu-background, #dcdcdc));
+    --vscuie-editorIndentGuide-background: var(
+        --theia-layout-color4,
+        var(--vscode-editorIndentGuide-background, #dcdcdc)
+    );
+    --vscuie-activityBarBadge-background: var(
+        --theia-accent-color2,
+        var(--vscode-activityBarBadge-background, #4496da)
+    );
+    --vscuie-dropdown-background: var(--theia-layout-color2, var(--vscode-dropdown-background, #ececec));
+    --vscuie-inputOption-activeBackground: var(
+        --theia-accent-color3,
+        var(--vscode-inputOption-activeBackground, #c0dbf1)
+    );
+    --vscuie-focusBorder: var(--theia-accent-color1, var(--vscode-focusBorder, #2b75c0));
+    --vscuie-sideBar-background: var(
+        --theia-layout-color1,
+        var(--vscode-sideBar-background, var(--vscuie-editorWidget-background, #f3f3f3))
+    );
+    --vscuie-sideBarSectionHeader-background: var(
+        --theia-sideBarSectionHeader-background,
+        var(--vscode-sideBarSectionHeader-background, rgba(128, 128, 128, 0.2))
+    );
+    --vscuie-list-inactiveSelectionBackground: var(
+        --theia-layout-color3,
+        var(--vscode-list-inactiveSelectionBackground, #dcdcdc)
+    );
+    --vscuie-list-activeSelectionBackground: var(
+        --theia-layout-color3,
+        var(--vscode-list-activeSelectionBackground, #dcdcdc)
+    );
+    --vscuie-tab-inactiveBackground: var(--theia-layout-color2, var(--vscode-tab-inactiveBackground, #616161));
+    --vscuie-editorWidget-background: var(
+        --theia-editorWidget-background,
+        var(--vscode-editorWidget-background, #616161)
+    );
+    --vscuie-tab-border: var(--theia-accent-color2, var(--vscode-tab-border, #4496da));
+    --vscuie-menubar-selectionBackground: var(
+        --theia-layout-color3,
+        var(--vscode-menubar-selectionBackground, #dcdcdc)
+    );
+    --vscuie-textLink-foreground: var(--theia-textLink-foreground, var(--vscode-textLink-foreground, #007acc));
+    --vscuie-editorError-foreground: var(--theia-editorError-foreground, var(--vscode-editorError-foreground, #e51400));
+    --vscuie-dropdown-border: var(--theia-dropdown-border, var(--vscode-dropdown-border, #cecece));
+
+    /* WORK IN PROGRESS - colors are not been validated - check before using */
+    --vscuie-activityBar-dropBackground: var(--theia-tab-icon-color, var(--vscode-activityBar-dropBackground, #616161));
+    --vscuie-activityBar-inactiveForeground: var(
+        --theia-tab-icon-color,
+        var(--vscode-activityBar-inactiveForeground, #616161)
+    );
+    --vscuie-activityBar-foreground: var(--theia-tab-icon-color, var(--vscode-activityBar-foreground, #616161));
+    --vscuie-activityBarBadge-foreground: var(
+        --theia-tab-icon-color,
+        var(--vscode-activityBarBadge-foreground, #616161)
+    );
+    --vscuie-breadcrumb-background: var(--theia-tab-icon-color, var(--vscode-breadcrumb-background, #616161));
+    --vscuie-editorGroupHeader-noTabsBackground: var(
+        --theia-tab-icon-color,
+        var(--vscode-editorGroupHeader-noTabsBackground, #616161)
+    );
+    --vscuie-editorGutter-background: var(--theia-tab-icon-color, var(--vscode-editorGutter-background, #616161));
+    --vscuie-editorMarkerNavigation-background: var(
+        --theia-tab-icon-color,
+        var(--vscode-editorMarkerNavigation-background, #616161)
+    );
+    --vscuie-editorPane-background: var(--theia-tab-icon-color, var(--vscode-editorPane-background, #616161));
+    --vscuie-extensionBadge-remoteForeground: var(
+        --theia-tab-icon-color,
+        var(--vscode-extensionBadge-remoteForeground, #616161)
+    );
+    --vscuie-extensionButton-prominentForeground: var(
+        --theia-tab-icon-color,
+        var(--vscode-extensionButton-prominentForeground, #616161)
+    );
+    --vscuie-list-activeSelectionForeground: var(
+        --theia-word-highlight-color1,
+        var(--vscode-list-activeSelectionForeground, #616161)
+    );
+    --vscuie-menu-selectionForeground: var(--theia-word-highlight-color1, var(--vscode-menu-selectionForeground));
+    --vscuie-panel-background: var(--theia-tab-icon-color, var(--vscode-panel-background, #616161));
+    --vscuie-peekViewTitle-background: var(--theia-tab-icon-color, var(--vscode-peekViewTitle-background, #616161));
+    --vscuie-settings-checkboxBackground: var(
+        --theia-tab-icon-color,
+        var(--vscode-settings-checkboxBackground, #616161)
+    );
+    --vscuie-settings-dropdownBackground: var(
+        --theia-tab-icon-color,
+        var(--vscode-settings-dropdownBackground, #616161)
+    );
+    --vscuie-settings-numberInputBackground: var(
+        --theia-tab-icon-color,
+        var(--vscode-settings-numberInputBackground, #616161)
+    );
+    --vscuie-settings-textInputBackground: var(
+        --theia-tab-icon-color,
+        var(--vscode-settings-textInputBackground, #616161)
+    );
+    --vscuie-statusBar-debuggingForeground: var(--theia-tab-icon-color, var(--vscode-statusBar-debuggingForeground));
+    --vscuie-statusBar-foreground: var(--theia-tab-icon-color, var(--vscode-statusBar-foreground));
+    --vscuie-statusBar-noFolderForeground: var(--theia-tab-icon-color, var(--vscode-statusBar-noFolderForeground));
+    --vscuie-statusBarItem-prominentForeground: var(
+        --theia-content-font-color0,
+        var(--vscode-statusBarItem-prominentForeground)
+    );
+    --vscuie-statusBarItem-remoteForeground: var(
+        --theia-content-font-color0,
+        var(--vscode-statusBarItem-remoteForeground)
+    );
+    --vscuie-tab-activeBackground: var(--theia-word-highlight-color1, var(--vscode-tab-activeBackground));
+    --vscuie-tab-unfocusedActiveBackground: var(
+        --theia-word-highlight-color1,
+        var(--vscode-tab-unfocusedActiveBackground)
+    );
+    --vscuie-terminal-background: var(--theia-tab-icon-color, var(--vscode-terminal-background));
+    --vscuie-statusBarItem-activeBackground: var(--theia-tab-icon-color, var(--vscode-statusBarItem-activeBackground));
+    --vscuie-statusBarItem-hoverBackground: var(--theia-tab-icon-color, var(--vscode-statusBarItem-hoverBackground));
+    --vscuie-editor-stackFrameHighlightBackground: var(
+        --theia-tab-icon-color,
+        var(--vscode-editor-stackFrameHighlightBackground)
+    );
+    --vscuie-activityBar-background: var(--theia-border-color1, var(--vscode-activityBar-background));
+    --vscuie-extensionBadge-remoteBackground: var(--theia-accent-color2, var(--vscode-extensionBadge-remoteBackground));
+    --vscuie-inputOption-activeBorder: var(--theia-selected-text-background, var(--vscode-inputOption-activeBorder));
+    --vscuie-inputValidation-infoBorder: var(--theia-accent-color2, var(--vscode-inputValidation-infoBorder));
+    --vscuie-peekView-border: var(--theia-accent-color2, var(--vscode-peekView-border, #4496da));
+    --vscuie-statusBar-background: var(--theia-accent-color2, var(--vscode-statusBar-background));
+    --vscuie-badge-background: var(--theia-variable-value-color, var(--vscode-badge-background));
+    --vscuie-badge-foreground: var(--theia-layout-color2, var(--vscode-badge-foreground));
+    --vscuie-menubar-selectionForeground: var(--theia-ui-font-color1, var(--vscode-menubar-selectionForeground));
+    --vscuie-peekViewTitleLabel-foreground: var(--theia-layout-color2, var(--vscode-peekViewTitleLabel-foreground));
+    --vscuie-tab-activeForeground: var(--theia-layout-color2, var(--vscode-tab-activeForeground));
+    --vscuie-terminal-foreground: var(--theia-layout-color2, var(--vscode-terminal-foreground));
+    --vscuie-titleBar-activeForeground: var(--theia-layout-color2, var(--vscode-titleBar-activeForeground));
+    --vscuie-breadcrumb-activeSelectionForeground: var(
+        --theia-secondary-brand-color0,
+        var(--vscode-breadcrumb-activeSelectionForeground)
+    );
+    --vscuie-breadcrumb-focusForeground: var(--theia-secondary-brand-color0, var(--vscode-breadcrumb-focusForeground));
+    --vscuie-breadcrumb-foreground: var(--theia-secondary-brand-color0, var(--vscode-breadcrumb-foreground));
+    --vscuie-breadcrumbPicker-background: var(
+        --theia-ui-font-color0,
+        var(--vscode-breadcrumbPicker-background, #616161)
+    );
+    --vscuie-debugToolBar-background: var(--theia-ui-font-color0, var(--vscode-debugToolBar-background, #616161));
+    --vscuie-editorGroupHeader-tabsBackground: var(
+        --theia-ui-font-color0,
+        var(--vscode-editorGroupHeader-tabsBackground, #616161)
+    );
+    --vscuie-editorHoverWidget-background: var(
+        --theia-ui-font-color0,
+        var(--vscode-editorHoverWidget-background, #616161)
+    );
+    --vscuie-editorSuggestWidget-background: var(
+        --theia-ui-font-color0,
+        var(--vscode-editorSuggestWidget-background, #616161)
+    );
+    --vscuie-notifications-background: var(--theia-layout-color1, var(--vscode-notifications-background, #f3f3f3));
+    --vscuie-peekViewResult-background: var(--theia-ui-font-color0, var(--vscode-peekViewResult-background, #616161));
+    --vscuie-quickInput-background: var(--theia-ui-font-color0, var(--vscode-quickInput-background, #616161));
+    --vscuie-panel-border: var(--theia-border-color2, var(--vscode-panel-border, #e0e0e0));
+    --vscuie-editor-wordHighlightBackground: var(
+        --theia-layout-color0,
+        var(--vscode-editor-wordHighlightBackground, #ffffff)
+    );
+    --vscuie-editorOverviewRuler-border: var(--theia-layout-color2, var(--vscode-editorOverviewRuler-border, #ececec));
+    --vscuie-extensionButton-prominentBackground: var(
+        --theia-layout-color3,
+        var(--vscode-extensionButton-prominentBackground, #dcdcdc)
+    );
+    --vscuie-extensionButton-prominentHoverBackground: var(
+        --theia-layout-color3,
+        var(--vscode-extensionButton-prominentHoverBackground, #dcdcdc)
+    );
+    --vscuie-notificationCenterHeader-background: var(
+        --theia-layout-color2,
+        var(--vscode-notificationCenterHeader-background, #ececec)
+    );
+    --vscuie-list-hoverBackground: var(--theia-border-color1, var(--vscode-list-hoverBackground, #e0e0e0));
+    --vscuie-editorLineNumber-foreground: var(
+        --theia-layout-color2,
+        var(--vscode-editorLineNumber-foreground, #ececec)
+    );
+    --vscuie-settings-textInputForeground: var(
+        --theia-layout-color2,
+        var(--vscode-settings-textInputForeground, #ececec)
+    );
+    --vscuie-debugExceptionWidget-background: var(--vscode-debugExceptionWidget-background);
+    --vscuie-debugExceptionWidget-border: var(--vscode-debugExceptionWidget-border);
+    --vscuie-descriptionForeground: var(--vscode-descriptionForeground);
+    --vscuie-diffEditor-insertedTextBackground: var(--vscode-diffEditor-insertedTextBackground);
+    --vscuie-diffEditor-removedTextBackground: var(--vscode-diffEditor-removedTextBackground);
+    --vscuie-dropdown-foreground: var(--vscode-dropdown-foreground);
+    --vscuie-editor-findMatchBackground: var(--vscode-editor-findMatchBackground);
+    --vscuie-editor-findMatchHighlightBackground: var(--vscode-editor-findMatchHighlightBackground);
+    --vscuie-editor-findRangeHighlightBackground: var(--vscode-editor-findRangeHighlightBackground);
+    --vscuie-editor-focusedStackFrameHighlightBackground: var(--vscode-editor-focusedStackFrameHighlightBackground);
+    --vscuie-editor-font-family: var(--vscode-editor-font-family);
+    --vscuie-editor-font-size: var(--vscode-editor-font-size);
+    --vscuie-editor-hoverHighlightBackground: var(--vscode-editor-hoverHighlightBackground);
+    --vscuie-editor-lineHighlightBorder: var(--vscode-editor-lineHighlightBorder);
+    --vscuie-editor-rangeHighlightBackground: var(--vscode-editor-rangeHighlightBackground);
+    --vscuie-editor-selectionBackground: var(--vscode-editor-selectionBackground);
+    --vscuie-editor-selectionHighlightBackground: var(--vscode-editor-selectionHighlightBackground);
+    --vscuie-editor-snippetFinalTabstopHighlightBorder: var(--vscode-editor-snippetFinalTabstopHighlightBorder);
+    --vscuie-editor-snippetTabstopHighlightBackground: var(--vscode-editor-snippetTabstopHighlightBackground);
+    --vscuie-editor-wordHighlightStrongBackground: var(--vscode-editor-wordHighlightStrongBackground);
+    --vscuie-editorActiveLineNumber-foreground: var(--vscode-editorActiveLineNumber-foreground);
+    --vscuie-editorBracketMatch-background: var(--vscode-editorBracketMatch-background);
+    --vscuie-editorBracketMatch-border: var(--vscode-editorBracketMatch-border);
+    --vscuie-editorCodeLens-foreground: var(--vscode-editorCodeLens-foreground);
+    --vscuie-editorCursor-foreground: var(--vscode-editorCursor-foreground);
+    --vscuie-editorGroup-border: var(--vscode-editorGroup-border);
+    --vscuie-editorGroup-dropBackground: var(--vscode-editorGroup-dropBackground);
+    --vscuie-editorGutter-addedBackground: var(--vscode-editorGutter-addedBackground);
+    --vscuie-editorGutter-commentRangeForeground: var(--vscode-editorGutter-commentRangeForeground);
+    --vscuie-editorGutter-deletedBackground: var(--vscode-editorGutter-deletedBackground);
+    --vscuie-editorGutter-modifiedBackground: var(--vscode-editorGutter-modifiedBackground);
+    --vscuie-editorHint-foreground: var(--vscode-editorHint-foreground);
+    --vscuie-editorHoverWidget-border: var(--vscode-editorHoverWidget-border);
+    --vscuie-editorHoverWidget-statusBarBackground: var(--vscode-editorHoverWidget-statusBarBackground);
+    --vscuie-editorIndentGuide-activeBackground: var(--vscode-editorIndentGuide-activeBackground);
+    --vscuie-editorInfo-foreground: var(--vscode-editorInfo-foreground);
+    --vscuie-editorLineNumber-activeForeground: var(--vscode-editorLineNumber-activeForeground);
+    --vscuie-editorLineNumber-foreground: var(--vscode-editorLineNumber-foreground);
+    --vscuie-editorLink-activeForeground: var(--vscode-editorLink-activeForeground);
+    --vscuie-editorMarkerNavigationError-background: var(--vscode-editorMarkerNavigationError-background);
+    --vscuie-editorMarkerNavigationInfo-background: var(--vscode-editorMarkerNavigationInfo-background);
+    --vscuie-editorMarkerNavigationWarning-background: var(--vscode-editorMarkerNavigationWarning-background);
+    --vscuie-editorOverviewRuler-addedForeground: var(--vscode-editorOverviewRuler-addedForeground);
+    --vscuie-editorOverviewRuler-bracketMatchForeground: var(--vscode-editorOverviewRuler-bracketMatchForeground);
+    --vscuie-editorOverviewRuler-commonContentForeground: var(--vscode-editorOverviewRuler-commonContentForeground);
+    --vscuie-editorOverviewRuler-currentContentForeground: var(--vscode-editorOverviewRuler-currentContentForeground);
+    --vscuie-editorOverviewRuler-deletedForeground: var(--vscode-editorOverviewRuler-deletedForeground);
+    --vscuie-editorOverviewRuler-errorForeground: var(--vscode-editorOverviewRuler-errorForeground);
+    --vscuie-editorOverviewRuler-findMatchForeground: var(--vscode-editorOverviewRuler-findMatchForeground);
+    --vscuie-editorOverviewRuler-incomingContentForeground: var(--vscode-editorOverviewRuler-incomingContentForeground);
+    --vscuie-editorOverviewRuler-infoForeground: var(--vscode-editorOverviewRuler-infoForeground);
+    --vscuie-editorOverviewRuler-modifiedForeground: var(--vscode-editorOverviewRuler-modifiedForeground);
+    --vscuie-editorOverviewRuler-rangeHighlightForeground: var(--vscode-editorOverviewRuler-rangeHighlightForeground);
+    --vscuie-editorOverviewRuler-selectionHighlightForeground: var(
+        --vscode-editorOverviewRuler-selectionHighlightForeground
+    );
+    --vscuie-editorOverviewRuler-warningForeground: var(--vscode-editorOverviewRuler-warningForeground);
+    --vscuie-editorOverviewRuler-wordHighlightForeground: var(--vscode-editorOverviewRuler-wordHighlightForeground);
+    --vscuie-editorOverviewRuler-wordHighlightStrongForeground: var(
+        --vscode-editorOverviewRuler-wordHighlightStrongForeground
+    );
+    --vscuie-editorRuler-foreground: var(--vscode-editorRuler-foreground);
+    --vscuie-editorSuggestWidget-border: var(--vscode-editorSuggestWidget-border);
+    --vscuie-editorSuggestWidget-foreground: var(--vscode-editorSuggestWidget-foreground);
+    --vscuie-editorSuggestWidget-highlightForeground: var(--vscode-editorSuggestWidget-highlightForeground, #0066bf);
+    --vscuie-editorSuggestWidget-selectedBackground: var(--vscode-editorSuggestWidget-selectedBackground, #d6ebff);
+    --vscuie-editorUnnecessaryCode-opacity: var(--vscode-editorUnnecessaryCode-opacity);
+    --vscuie-editorWarning-foreground: var(--vscode-editorWarning-foreground);
+    --vscuie-editorWhitespace-foreground: var(--vscode-editorWhitespace-foreground);
+    --vscuie-editorWidget-border: var(--vscode-editorWidget-border);
+    --vscuie-editorWidget-foreground: var(--vscode-editorWidget-foreground);
+    --vscuie-errorForeground: var(--vscode-errorForeground);
+    --vscuie-gitDecoration-addedResourceForeground: var(--vscode-gitDecoration-addedResourceForeground);
+    --vscuie-gitDecoration-conflictingResourceForeground: var(--vscode-gitDecoration-conflictingResourceForeground);
+    --vscuie-gitDecoration-deletedResourceForeground: var(--vscode-gitDecoration-deletedResourceForeground);
+    --vscuie-gitDecoration-ignoredResourceForeground: var(--vscode-gitDecoration-ignoredResourceForeground);
+    --vscuie-gitDecoration-modifiedResourceForeground: var(--vscode-gitDecoration-modifiedResourceForeground);
+    --vscuie-gitDecoration-submoduleResourceForeground: var(--vscode-gitDecoration-submoduleResourceForeground);
+    --vscuie-gitDecoration-untrackedResourceForeground: var(--vscode-gitDecoration-untrackedResourceForeground);
+    --vscuie-imagePreview-border: var(--vscode-imagePreview-border);
+    --vscuie-inputOption-activeBorder: var(--vscode-inputOption-activeBorder);
+    --vscuie-inputValidation-errorBackground: var(--vscode-inputValidation-errorBackground);
+    --vscuie-inputValidation-errorBorder: var(--vscode-inputValidation-errorBorder);
+    --vscuie-inputValidation-infoBackground: var(--vscode-inputValidation-infoBackground);
+    --vscuie-inputValidation-warningBackground: var(--vscode-inputValidation-warningBackground);
+    --vscuie-inputValidation-warningBorder: var(--vscode-inputValidation-warningBorder);
+    --vscuie-list-activeSelectionForeground: var(--vscode-list-activeSelectionForeground);
+    --vscuie-list-errorForeground: var(--vscode-list-errorForeground);
+    --vscuie-list-focusBackground: var(--vscode-list-focusBackground);
+    --vscuie-list-highlightForeground: var(--vscode-list-highlightForeground);
+    --vscuie-list-invalidItemForeground: var(--vscode-list-invalidItemForeground);
+    --vscuie-list-warningForeground: var(--vscode-list-warningForeground);
+    --vscuie-listFilterWidget-background: var(--vscode-listFilterWidget-background);
+    --vscuie-listFilterWidget-noMatchesOutline: var(--vscode-listFilterWidget-noMatchesOutline);
+    --vscuie-listFilterWidget-outline: var(--vscode-listFilterWidget-outline);
+    --vscuie-menu-foreground: var(--vscode-menu-foreground, #cccccc);
+    --vscode-menu-background: var(--vscode-menu-background, #252526);
+    --vscuie-menu-selectionBackground: var(--vscode-menu-selectionBackground);
+    --vscuie-menu-separatorBackground: var(--vscode-menu-separatorBackground);
+    --vscuie-merge-commonContentBackground: var(--vscode-merge-commonContentBackground);
+    --vscuie-merge-commonHeaderBackground: var(--vscode-merge-commonHeaderBackground);
+    --vscuie-merge-currentContentBackground: var(--vscode-merge-currentContentBackground);
+    --vscuie-merge-currentHeaderBackground: var(--vscode-merge-currentHeaderBackground);
+    --vscuie-merge-incomingContentBackground: var(--vscode-merge-incomingContentBackground);
+    --vscuie-merge-incomingHeaderBackground: var(--vscode-merge-incomingHeaderBackground);
+    --vscuie-minimap-findMatchHighlight: var(--vscode-minimap-findMatchHighlight);
+    --vscuie-notificationLink-foreground: var(--vscode-notificationLink-foreground);
+    --vscuie-notifications-border: var(--vscode-notifications-border);
+    --vscuie-notifications-foreground: var(--vscode-notifications-foreground);
+    --vscuie-panel-dropBackground: var(--vscode-panel-dropBackground);
+    --vscuie-panelTitle-activeBorder: var(--vscode-panelTitle-activeBorder);
+    --vscuie-panelTitle-activeForeground: var(--vscode-panelTitle-activeForeground);
+    --vscuie-panelTitle-inactiveForeground: var(--vscode-panelTitle-inactiveForeground);
+    --vscuie-peekViewEditor-background: var(--vscode-peekViewEditor-background);
+    --vscuie-peekViewEditor-matchHighlightBackground: var(--vscode-peekViewEditor-matchHighlightBackground);
+    --vscuie-peekViewEditorGutter-background: var(--vscode-peekViewEditorGutter-background);
+    --vscuie-peekViewResult-fileForeground: var(--vscode-peekViewResult-fileForeground);
+    --vscuie-peekViewResult-lineForeground: var(--vscode-peekViewResult-lineForeground);
+    --vscuie-peekViewResult-matchHighlightBackground: var(--vscode-peekViewResult-matchHighlightBackground);
+    --vscuie-peekViewResult-selectionBackground: var(--vscode-peekViewResult-selectionBackground);
+    --vscuie-peekViewResult-selectionForeground: var(--vscode-peekViewResult-selectionForeground);
+    --vscuie-peekViewTitleDescription-foreground: var(--vscode-peekViewTitleDescription-foreground);
+    --vscuie-pickerGroup-border: var(--vscode-pickerGroup-border);
+    --vscuie-pickerGroup-foreground: var(--vscode-pickerGroup-foreground);
+    --vscuie-progressBar-background: var(--vscode-progressBar-background);
+    --vscuie-scrollbar-shadow: var(--vscode-scrollbar-shadow);
+    --vscuie-scrollbarSlider-activeBackground: var(--vscode-scrollbarSlider-activeBackground);
+    --vscuie-scrollbarSlider-background: var(--vscode-scrollbarSlider-background);
+    --vscuie-scrollbarSlider-hoverBackground: var(--vscode-scrollbarSlider-hoverBackground);
+    --vscuie-settings-checkboxBorder: var(--vscode-settings-checkboxBorder);
+    --vscuie-settings-checkboxForeground: var(--vscode-settings-checkboxForeground);
+    --vscuie-settings-dropdownBorder: var(--vscode-settings-dropdownBorder, #a9a9a9);
+    --vscuie-settings-dropdownForeground: var(--vscode-settings-dropdownForeground);
+    --vscuie-settings-dropdownListBorder: var(--vscode-settings-dropdownListBorder, #c8c8c8);
+    --vscuie-settings-headerForeground: var(--vscode-settings-headerForeground);
+    --vscuie-settings-modifiedItemIndicator: var(--vscode-settings-modifiedItemIndicator);
+    --vscuie-settings-numberInputForeground: var(--vscode-settings-numberInputForeground);
+    --vscuie-sideBar-dropBackground: var(--vscode-sideBar-dropBackground);
+    --vscuie-sideBarTitle-foreground: var(--vscode-sideBarTitle-foreground);
+    --vscuie-statusBar-debuggingBackground: var(--vscode-statusBar-debuggingBackground);
+    --vscuie-statusBar-noFolderBackground: var(--vscode-statusBar-noFolderBackground);
+    --vscuie-statusBarItem-prominentBackground: var(--vscode-statusBarItem-prominentBackground);
+    --vscuie-statusBarItem-prominentHoverBackground: var(--vscode-statusBarItem-prominentHoverBackground);
+    --vscuie-statusBarItem-remoteBackground: var(--vscode-statusBarItem-remoteBackground);
+    --vscuie-tab-activeModifiedBorder: var(--vscode-tab-activeModifiedBorder);
+    --vscuie-tab-inactiveForeground: var(--vscode-tab-inactiveForeground);
+    --vscuie-tab-inactiveModifiedBorder: var(--vscode-tab-inactiveModifiedBorder);
+    --vscuie-tab-unfocusedActiveForeground: var(--vscode-tab-unfocusedActiveForeground);
+    --vscuie-tab-unfocusedActiveModifiedBorder: var(--vscode-tab-unfocusedActiveModifiedBorder);
+    --vscuie-tab-unfocusedInactiveForeground: var(--vscode-tab-unfocusedInactiveForeground);
+    --vscuie-tab-unfocusedInactiveModifiedBorder: var(--vscode-tab-unfocusedInactiveModifiedBorder);
+    --vscuie-terminal-ansiBlack: var(--vscode-terminal-ansiBlack);
+    --vscuie-terminal-ansiBlue: var(--vscode-terminal-ansiBlue);
+    --vscuie-terminal-ansiBrightBlack: var(--vscode-terminal-ansiBrightBlack);
+    --vscuie-terminal-ansiBrightBlue: var(--vscode-terminal-ansiBrightBlue);
+    --vscuie-terminal-ansiBrightCyan: var(--vscode-terminal-ansiBrightCyan);
+    --vscuie-terminal-ansiBrightGreen: var(--vscode-terminal-ansiBrightGreen);
+    --vscuie-terminal-ansiBrightMagenta: var(--vscode-terminal-ansiBrightMagenta);
+    --vscuie-terminal-ansiBrightWhite: var(--vscode-terminal-ansiBrightWhite);
+    --vscuie-terminal-ansiBrightYellow: var(--vscode-terminal-ansiBrightYellow);
+    --vscuie-terminal-ansiCyan: var(--vscode-terminal-ansiCyan);
+    --vscuie-terminal-ansiGreen: var(--vscode-terminal-ansiGreen);
+    --vscuie-terminal-ansiMagenta: var(--vscode-terminal-ansiMagenta);
+    --vscuie-terminal-ansiRed: var(--vscode-terminal-ansiRed);
+    --vscuie-terminal-ansiWhite: var(--vscode-terminal-ansiWhite);
+    --vscuie-terminal-ansiYellow: var(--vscode-terminal-ansiYellow);
+    --vscuie-terminal-border: var(--vscode-terminal-border);
+    --vscuie-terminal-selectionBackground: var(--vscode-terminal-selectionBackground);
+    --vscuie-textBlockQuote-background: var(--vscode-textBlockQuote-background);
+    --vscuie-textBlockQuote-border: var(--vscode-textBlockQuote-border);
+    --vscuie-textCodeBlock-background: var(--vscode-textCodeBlock-background);
+    --vscuie-textLink-activeForeground: var(--vscode-textLink-activeForeground);
+    --vscuie-textPreformat-foreground: var(--vscode-textPreformat-foreground);
+    --vscuie-textSeparator-foreground: var(--vscode-textSeparator-foreground);
+    --vscuie-titleBar-activeBackground: var(--vscode-titleBar-activeBackground);
+    --vscuie-titleBar-inactiveBackground: var(--vscode-titleBar-inactiveBackground);
+    --vscuie-titleBar-inactiveForeground: var(--vscode-titleBar-inactiveForeground);
+    --vscuie-tree-indentGuidesStroke: var(--vscode-tree-indentGuidesStroke);
+    --vscuie-widget-shadow: var(--vscode-widget-shadow);
+    --vscuie-icon-foreground: var(--theia-ui-font-color1, var(--vscode-icon-foreground, #9e9e9e));
+    --vscuie-button-secondary-background: var(
+        --theia-ui-button-color-secondary,
+        var(--vscode-menubar-selectionBackground, #9e9e9e)
+    );
+    --vscuie-button-secondary-foreground: var(
+        --theia-ui-button-font-color-secondary,
+        var(--vscuie-button-foreground, rgba(255, 255, 255, 1))
+    );
+    --vscuie-button-secondary-hoverBackground: var(
+        --theia-ui-button-color-secondary-hover,
+        var(--vscode-menubar-selectionBackground, #616161)
+    );
+    --vscuie-button-disabledBackground: var(
+        --theia-secondaryButton-disabledBackground,
+        var(--vscode-secondaryButton-disabledBackground, #ccc)
+    );
+    --vscuie-symbolIcon-textForeground: var(--vscode-symbolIcon-textForeground, #ccc);
+    --vscuie-splitter-background: var(
+        --theia-editorGroupHeader-tabsBackground,
+        var(--vscode-debugToolBar-background, #616161)
+    );
+}

package/dist/styles/_mixins.scss

@@ -0,0 +1,15 @@
+@mixin base-font($size: $button-font-size, $family: $font-family-base, $weight: $font-weight-base) {
+    @include apply-font($size, $family, $weight);
+}
+
+@mixin apply-font($size: '', $family: '', $weight: '') {
+    @if $size != '' {
+        font-size: $size;
+    }
+    @if $family != '' {
+        font-family: $family;
+    }
+    @if $weight != '' {
+        font-weight: $weight;
+    }
+}