From ee25b1a0ec4045361a9840677397004466db27ee Mon Sep 17 00:00:00 2001 From: Christoph Jerolimov Date: Tue, 3 Dec 2024 22:52:08 +0100 Subject: [PATCH] feat(theme): migrate and release rhdh-theme 0.1.0 (RHDH 1.1) Signed-off-by: Christoph Jerolimov --- .../theme/.changeset/fast-dolphins-act.md | 5 + .../plugins/theme/src/componentOverrides.ts | 192 +++++++++++++++++- .../theme/plugins/theme/src/darkTheme.ts | 6 +- .../plugins/theme/src/defaultThemePalette.ts | 63 ++++++ .../theme/plugins/theme/src/lightTheme.ts | 10 +- 5 files changed, 266 insertions(+), 10 deletions(-) create mode 100644 workspaces/theme/.changeset/fast-dolphins-act.md create mode 100644 workspaces/theme/plugins/theme/src/defaultThemePalette.ts diff --git a/workspaces/theme/.changeset/fast-dolphins-act.md b/workspaces/theme/.changeset/fast-dolphins-act.md new file mode 100644 index 0000000..5b6ed7a --- /dev/null +++ b/workspaces/theme/.changeset/fast-dolphins-act.md @@ -0,0 +1,5 @@ +--- +'@red-hat-developer-hub/backstage-plugin-theme': minor +--- + +This version contains the initial theme from RHDH 1.1 https://github.com/janus-idp/backstage-showcase/tree/v1.1.0/packages/app/src/themes diff --git a/workspaces/theme/plugins/theme/src/componentOverrides.ts b/workspaces/theme/plugins/theme/src/componentOverrides.ts index 3e1a3b8..42d3f2f 100644 --- a/workspaces/theme/plugins/theme/src/componentOverrides.ts +++ b/workspaces/theme/plugins/theme/src/componentOverrides.ts @@ -14,6 +14,8 @@ * limitations under the License. */ import { UnifiedThemeOptions } from '@backstage/theme'; +import { defaultThemePalette } from './defaultThemePalette'; +import { ThemeColors } from './types'; const redhatFont = `@font-face { font-family: 'Red Hat Font'; @@ -25,8 +27,190 @@ const redhatFont = `@font-face { url(/fonts/RedHatText-Regular.ttf) format('truetype'); }`; -export const components: UnifiedThemeOptions['components'] = { - MuiCssBaseline: { - styleOverrides: redhatFont, - }, +export const components = ( + themeColors: ThemeColors, + mode: string, +): UnifiedThemeOptions['components'] => { + const themePalette = defaultThemePalette(mode); + return { + BackstageHeaderTabs: { + styleOverrides: { + tabsWrapper: { + paddingLeft: '0', + }, + defaultTab: { + textTransform: 'none', + fontSize: '0.875rem', + '&:hover': { + boxShadow: '0 -3px #b8bbbe inset', + }, + }, + }, + }, + MuiTabs: { + defaultProps: { + TabIndicatorProps: { + style: { + height: '3px', + background: themeColors.navigationIndicatorColor || '#0066CC', + }, + }, + }, + styleOverrides: { + root: { + borderBottom: '1px solid #d2d2d2', + }, + }, + }, + MuiTab: { + defaultProps: { + disableRipple: true, + }, + styleOverrides: { + root: { + textTransform: 'none', + minWidth: 'initial !important', + '&.Mui-disabled': { + backgroundColor: '#d2d2d2', + }, + }, + }, + }, + MuiButton: { + defaultProps: { + disableRipple: true, + }, + styleOverrides: { + root: { + textTransform: 'none', + border: '0', + borderRadius: '3px', + }, + contained: { + boxShadow: 'none', + '&:hover': { + border: '0', + boxShadow: 'none', + }, + '&:-webkit-any-link:focus-visible': { + outlineOffset: '0', + }, + }, + containedPrimary: { + backgroundColor: themePalette.primary.containedButtonBackground, + color: themePalette.primary.contrastText, + '&:hover': { + backgroundColor: themePalette.primary.dark, + color: themePalette.primary.contrastText, + }, + '&:focus-visible': { + boxShadow: `inset 0 0 0 1px ${themePalette.primary.focusVisibleBorder}`, + outline: `${themePalette.primary.focusVisibleBorder} solid 1px`, + backgroundColor: themePalette.primary.dark, + color: themePalette.primary.contrastText, + }, + '&:disabled': { + color: themePalette.primary.disabled, + backgroundColor: themePalette.primary.disabledBackground, + }, + }, + containedSecondary: { + backgroundColor: themePalette.secondary.containedButtonBackground, + color: themePalette.secondary.contrastText, + '&:hover': { + backgroundColor: themePalette.secondary.dark, + color: themePalette.secondary.contrastText, + }, + '&:focus-visible': { + boxShadow: `inset 0 0 0 1px ${themePalette.secondary.focusVisibleBorder}`, + outline: `${themePalette.secondary.focusVisibleBorder} solid 1px`, + backgroundColor: themePalette.secondary.dark, + color: themePalette.secondary.contrastText, + }, + '&:disabled': { + color: themePalette.secondary.disabled, + backgroundColor: themePalette.secondary.disabledBackground, + }, + }, + outlined: { + border: '0', + boxShadow: `inset 0 0 0 1px ${themePalette.primary.main}`, + '&:hover': { + border: '0', + boxShadow: `inset 0 0 0 2px ${themePalette.primary.main}`, + backgroundColor: 'transparent', + }, + '&:focus-visible': { + boxShadow: `inset 0 0 0 2px ${themePalette.primary.main}`, + outline: `${themePalette.primary.focusVisibleBorder} solid 1px`, + }, + }, + outlinedPrimary: { + color: themePalette.primary.main, + boxShadow: `inset 0 0 0 1px ${themePalette.primary.main}`, + border: '0', + '&:hover': { + border: '0', + boxShadow: `inset 0 0 0 2px ${themePalette.primary.main}`, + backgroundColor: 'transparent', + }, + '&:focus-visible': { + boxShadow: `inset 0 0 0 2px ${themePalette.primary.main}`, + outline: `${themePalette.primary.focusVisibleBorder} solid 1px`, + }, + }, + outlinedSecondary: { + color: themePalette.secondary.main, + boxShadow: `inset 0 0 0 1px ${themePalette.secondary.main}`, + border: '0', + '&:hover': { + border: '0', + boxShadow: `inset 0 0 0 2px ${themePalette.secondary.main}`, + backgroundColor: 'transparent', + }, + '&:focus-visible': { + boxShadow: `inset 0 0 0 2px ${themePalette.secondary.main}`, + outline: `${themePalette.secondary.focusVisibleBorder} solid 1px`, + }, + }, + text: { + color: themePalette.primary.main, + '&:hover': { + color: themePalette.primary.textHover, + backgroundColor: 'transparent', + }, + '&:focus-visible': { + boxShadow: `inset 0 0 0 2px ${themePalette.primary.main}`, + outline: `${themePalette.primary.focusVisibleBorder} solid 1px`, + }, + }, + textPrimary: { + color: themePalette.primary.main, + '&:hover': { + color: themePalette.primary.textHover, + backgroundColor: 'transparent', + }, + }, + textSecondary: { + color: themePalette.secondary.main, + '&:hover': { + color: themePalette.secondary.textHover, + backgroundColor: 'transparent', + }, + }, + }, + }, + MuiLink: { + styleOverrides: { + underlineHover: { + '&:hover': { + textDecoration: 'none', + }, + }, + }, + }, + MuiCssBaseline: { + styleOverrides: redhatFont, + }, + }; }; diff --git a/workspaces/theme/plugins/theme/src/darkTheme.ts b/workspaces/theme/plugins/theme/src/darkTheme.ts index f38d7ee..861c6e9 100644 --- a/workspaces/theme/plugins/theme/src/darkTheme.ts +++ b/workspaces/theme/plugins/theme/src/darkTheme.ts @@ -30,15 +30,15 @@ export const customDarkTheme = (themeColors: ThemeColors) => }), navigation: { background: '#0f1214', - indicator: themeColors.navigationIndicatorColor || '#009596', + indicator: themeColors.navigationIndicatorColor || '#0066CC', color: '#ffffff', selectedColor: '#ffffff', navItem: { - hoverBackground: '#030303', + hoverBackground: '#3c3f42', }, }, }, defaultPageTheme: 'home', pageTheme: pageTheme(themeColors), - components, + components: components(themeColors, 'dark'), }); diff --git a/workspaces/theme/plugins/theme/src/defaultThemePalette.ts b/workspaces/theme/plugins/theme/src/defaultThemePalette.ts new file mode 100644 index 0000000..3d17bcf --- /dev/null +++ b/workspaces/theme/plugins/theme/src/defaultThemePalette.ts @@ -0,0 +1,63 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +export const defaultThemePalette = (mode: string) => { + if (mode === 'dark') { + return { + primary: { + main: '#1FA7F8', // text button color, button background color + containedButtonBackground: '#0066CC', // contained button background color + textHover: '#73BCF7', // text button hover color + contrastText: '#FFF', // contained button text color + dark: '#004080', // contained button hover background color + disabledBackground: '#444548', // contained button disabled background color + disabled: '#AAABAC', // contained button disabled text color + focusVisibleBorder: '#ADD6FF', // contained button focus color + }, + secondary: { + main: '#B2A3FF', + containedButtonBackground: '#8476D1', + textHover: '#CBC1FF', + contrastText: '#FFF', + dark: '#6753AC', + disabledBackground: '#444548', + disabled: '#AAABAC', + focusVisibleBorder: '#ADD6FF', + }, + }; + } + return { + primary: { + main: '#0066CC', + containedButtonBackground: '#0066CC', + mainHover: '#004080', + contrastText: '#FFF', + dark: '#004080', + disabledBackground: '#D2D2D2', + disabled: '#6A6E73', + focusVisibleBorder: '#0066CC', + }, + secondary: { + main: '#8476D1', + containedButtonBackground: '#8476D1', + mainHover: '#6753AC', + contrastText: '#FFF', + dark: '#6753AC', + disabledBackground: '#D2D2D2', + disabled: '#6A6E73', + focusVisibleBorder: '#0066CC', + }, + }; +}; diff --git a/workspaces/theme/plugins/theme/src/lightTheme.ts b/workspaces/theme/plugins/theme/src/lightTheme.ts index 743f67d..78a5f75 100644 --- a/workspaces/theme/plugins/theme/src/lightTheme.ts +++ b/workspaces/theme/plugins/theme/src/lightTheme.ts @@ -30,15 +30,19 @@ export const customLightTheme = (themeColors: ThemeColors) => }), navigation: { background: '#222427', - indicator: themeColors.navigationIndicatorColor || '#009596', + indicator: themeColors.navigationIndicatorColor || '#0066CC', color: '#ffffff', selectedColor: '#ffffff', navItem: { - hoverBackground: '#4f5255', + hoverBackground: '#3c3f42', }, }, + text: { + primary: '#151515', + secondary: '#757575', + }, }, defaultPageTheme: 'home', pageTheme: pageTheme(themeColors), - components, + components: components(themeColors, 'light'), });