diff --git a/packages/grafana-data/src/themes/registry.ts b/packages/grafana-data/src/themes/registry.ts index 240e5b75717..c4cf352b622 100644 --- a/packages/grafana-data/src/themes/registry.ts +++ b/packages/grafana-data/src/themes/registry.ts @@ -22,9 +22,12 @@ export function getThemeById(id: string): GrafanaTheme2 { * @internal * For internal use only */ -export function getBuiltInThemes(includeExtras?: boolean) { +export function getBuiltInThemes(allowedExtras: string[]) { const themes = themeRegistry.list().filter((item) => { - return includeExtras ? true : !item.isExtra; + if (item.isExtra) { + return allowedExtras.includes(item.id); + } + return true; }); // sort themes alphabetically, but put built-in themes (default, dark, light, system) first const sortedThemes = themes.sort((a, b) => { diff --git a/packages/grafana-data/src/themes/themeDefinitions/aubergine.ts b/packages/grafana-data/src/themes/themeDefinitions/aubergine.ts new file mode 100644 index 00000000000..45260c2fae0 --- /dev/null +++ b/packages/grafana-data/src/themes/themeDefinitions/aubergine.ts @@ -0,0 +1,55 @@ +import { NewThemeOptions } from '../createTheme'; + +const aubergineTheme: NewThemeOptions = { + name: 'Aubergine', + colors: { + mode: 'dark', + border: { + weak: '#4F2A3D', + medium: '#6A3C4B', + strong: '#8C5A69', + }, + text: { + primary: '#E5D0D6', + secondary: '#D1A8C4', + disabled: '#B7A0A6', + link: '#A56BB6', + maxContrast: '#FFFFFF', + }, + primary: { + main: '#8C5A69', + }, + secondary: { + main: '#6A3C4B', + text: '#D1A8C4', + border: '#8C5A69', + }, + background: { + canvas: '#2E1F2D', + primary: '#3C2136', + secondary: '#4A2D47', + }, + action: { + hover: '#6A3C4B', + selected: '#8C5A69', + selectedBorder: '#FFB300', + focus: '#A56BB6', + hoverOpacity: 0.1, + disabledText: '#B7A0A6', + disabledBackground: '#4A2D47', + disabledOpacity: 0.38, + }, + gradients: { + brandHorizontal: 'linear-gradient(270deg, #6A3C4B 0%, #A56BB6 100%)', + brandVertical: 'linear-gradient(0deg, #6A3C4B 0%, #A56BB6 100%)', + }, + contrastThreshold: 4, + hoverFactor: 0.07, + tonalOffset: 0.15, + }, + shape: { + borderRadius: 6, + }, +}; + +export default aubergineTheme; diff --git a/packages/grafana-data/src/themes/themeDefinitions/desertbloom.ts b/packages/grafana-data/src/themes/themeDefinitions/desertbloom.ts new file mode 100644 index 00000000000..20e6938ab36 --- /dev/null +++ b/packages/grafana-data/src/themes/themeDefinitions/desertbloom.ts @@ -0,0 +1,79 @@ +import { NewThemeOptions } from '../createTheme'; + +const desertBloomTheme: NewThemeOptions = { + name: 'Desert bloom', + colors: { + mode: 'light', + border: { + weak: 'rgba(0, 0, 0, 0.12)', + medium: 'rgba(0, 0, 0, 0.20)', + strong: 'rgba(0, 0, 0, 0.30)', + }, + text: { + primary: '#333333', + secondary: '#555555', + disabled: 'rgba(0, 0, 0, 0.5)', + link: '#1A82E2', + maxContrast: '#000000', + }, + primary: { + main: '#FF6F61', + text: '#FE6F61', + border: '#E55B4D', + name: 'primary', + shade: '#E55B4D', + transparent: '#FF6F6126', + contrastText: '#FFFFFF', + borderTransparent: '#FF6F6140', + }, + secondary: { + main: '#FFFFFF', + text: '#695f53', + border: '#d9cec0', + name: 'secondary', + shade: '#d9cec0', + transparent: '#FFFFFF26', + contrastText: '#4c4339', + borderTransparent: '#FFFFFF40', + }, + info: { + main: '#1A82E2', + }, + error: { + main: '#FF6B6B', + }, + success: { + main: '#4CAF50', + }, + warning: { + main: '#FFC107', + }, + background: { + canvas: '#FFF8F0', + primary: '#FFFFFF', + secondary: '#f9f3e8', + }, + action: { + hover: 'rgba(168, 156, 134, 0.12)', + selected: 'rgba(168, 156, 134, 0.36)', + selectedBorder: '#FF6F61', + focus: 'rgba(168, 156, 134, 0.50)', + hoverOpacity: 0.08, + disabledText: 'rgba(168, 156, 134, 0.5)', + disabledBackground: 'rgba(168, 156, 134, 0.06)', + disabledOpacity: 0.38, + }, + gradients: { + brandHorizontal: 'linear-gradient(270deg, #FF6F61 0%, #ece0d1 100%)', + brandVertical: 'linear-gradient(0.01deg, #FF6F61 0.01%, #ece0d1 99.99%)', + }, + contrastThreshold: 3, + hoverFactor: 0.03, + tonalOffset: 0.15, + }, + shape: { + borderRadius: 6, + }, +}; + +export default desertBloomTheme; diff --git a/packages/grafana-data/src/themes/themeDefinitions/gildedgrove.ts b/packages/grafana-data/src/themes/themeDefinitions/gildedgrove.ts new file mode 100644 index 00000000000..546003ba07d --- /dev/null +++ b/packages/grafana-data/src/themes/themeDefinitions/gildedgrove.ts @@ -0,0 +1,67 @@ +import { NewThemeOptions } from '../createTheme'; + +const gildedGroveTheme: NewThemeOptions = { + name: 'Gilded grove', + colors: { + mode: 'dark', + border: { + weak: 'rgba(200, 200, 180, 0.12)', + medium: 'rgba(200, 200, 180, 0.20)', + strong: 'rgba(200, 200, 180, 0.30)', + }, + text: { + primary: 'rgb(250, 250, 239)', + secondary: 'rgba(200, 200, 180, 0.85)', + disabled: 'rgba(200, 200, 180, 0.6)', + link: '#FEAC34', + maxContrast: '#FFFFFF', + }, + primary: { + main: '#FEAC34', + text: '#FFD783', + border: '#FFD783', + name: 'primary', + shade: 'rgb(255, 173, 80)', + transparent: '#FEAC3426', + contrastText: '#111614', + borderTransparent: '#FFD78340', + }, + secondary: { + main: 'rgba(200, 200, 180, 0.10)', + shade: 'rgba(200, 200, 180, 0.14)', + transparent: 'rgba(200, 200, 180, 0.08)', + text: 'rgb(200, 200, 180)', + contrastText: 'rgb(200, 200, 180)', + border: 'rgba(200, 200, 180, 0.08)', + name: 'secondary', + borderTransparent: 'rgba(200, 200, 180, 0.25)', + }, + background: { + canvas: '#111614', + primary: '#1d2220', + secondary: '#27312E', + }, + action: { + hover: 'rgba(200, 200, 180, 0.16)', + selected: 'rgba(200, 200, 180, 0.12)', + selectedBorder: '#FEAC34', + focus: 'rgba(200, 200, 180, 0.16)', + hoverOpacity: 0.08, + disabledText: 'rgba(200, 200, 180, 0.6)', + disabledBackground: 'rgba(200, 200, 180, 0.04)', + disabledOpacity: 0.38, + }, + gradients: { + brandHorizontal: 'linear-gradient(270deg, #FEAC34 0%, #FFD783 100%)', + brandVertical: 'linear-gradient(0.01deg, #FEAC34 0.01%, #FFD783 99.99%)', + }, + contrastThreshold: 3, + hoverFactor: 0.03, + tonalOffset: 0.15, + }, + shape: { + borderRadius: 5, + }, +}; + +export default gildedGroveTheme; diff --git a/packages/grafana-data/src/themes/themeDefinitions/index.ts b/packages/grafana-data/src/themes/themeDefinitions/index.ts index a88efba4add..f0277312fe4 100644 --- a/packages/grafana-data/src/themes/themeDefinitions/index.ts +++ b/packages/grafana-data/src/themes/themeDefinitions/index.ts @@ -1 +1,11 @@ +export { default as aubergine } from './aubergine'; export { default as debug } from './debug'; +export { default as desertbloom } from './desertbloom'; +export { default as gildedgrove } from './gildedgrove'; +export { default as mars } from './mars'; +export { default as matrix } from './matrix'; +export { default as sapphiredusk } from './sapphiredusk'; +export { default as synthwave } from './synthwave'; +export { default as tron } from './tron'; +export { default as victorian } from './victorian'; +export { default as zen } from './zen'; diff --git a/packages/grafana-data/src/themes/themeDefinitions/mars.ts b/packages/grafana-data/src/themes/themeDefinitions/mars.ts new file mode 100644 index 00000000000..c695e65d992 --- /dev/null +++ b/packages/grafana-data/src/themes/themeDefinitions/mars.ts @@ -0,0 +1,55 @@ +import { NewThemeOptions } from '../createTheme'; + +const marsTheme: NewThemeOptions = { + name: 'Mars', + colors: { + mode: 'dark', + border: { + weak: 'rgba(210, 90, 60, 0.2)', + medium: 'rgba(210, 90, 60, 0.35)', + strong: 'rgba(210, 90, 60, 0.5)', + }, + text: { + primary: '#DDDDDD', + secondary: '#BBBBBB', + disabled: 'rgba(221, 221, 221, 0.5)', + link: '#FF6F61', + maxContrast: '#FFFFFF', + }, + primary: { + main: '#FF6F61', + }, + secondary: { + main: '#6a2f2f', + text: '#BBBBBB', + border: 'rgba(210, 90, 60, 0.2)', + }, + background: { + canvas: '#3C1E1E', + primary: '#522626', + secondary: '#6A2F2F', + }, + action: { + hover: 'rgba(210, 90, 60, 0.16)', + selected: 'rgba(210, 90, 60, 0.12)', + selectedBorder: '#FF6F61', + focus: 'rgba(210, 90, 60, 0.16)', + hoverOpacity: 0.08, + disabledText: 'rgba(221, 221, 221, 0.5)', + disabledBackground: 'rgba(210, 90, 60, 0.08)', + disabledOpacity: 0.38, + }, + gradients: { + brandHorizontal: 'linear-gradient(270deg, #FF6F61 0%, #D25A3C 100%)', + brandVertical: 'linear-gradient(0.01deg, #FF6F61 0.01%, #D25A3C 99.99%)', + }, + contrastThreshold: 3, + hoverFactor: 0.05, + tonalOffset: 0.2, + }, + shape: { + borderRadius: 4, + }, +}; + +export default marsTheme; diff --git a/packages/grafana-data/src/themes/themeDefinitions/matrix.ts b/packages/grafana-data/src/themes/themeDefinitions/matrix.ts new file mode 100644 index 00000000000..3d4350e4f0a --- /dev/null +++ b/packages/grafana-data/src/themes/themeDefinitions/matrix.ts @@ -0,0 +1,43 @@ +import { NewThemeOptions } from '../createTheme'; + +const matrixTheme: NewThemeOptions = { + name: 'Matrix', + colors: { + mode: 'dark', + background: { + canvas: '#000000', + primary: '#020202', + secondary: '#080808', + }, + text: { + primary: '#00c017', + secondary: '#008910', + disabled: '#006a0c', + link: '#00ff41', + maxContrast: '#00ff41', + }, + border: { + weak: '#008f1144', + medium: '#008f1188', + strong: '#008910', + }, + primary: { + main: '#008910', + }, + secondary: { + text: '#008910', + }, + gradients: { + brandVertical: 'linear-gradient(0deg, #008910 0%, #00ff41 100%)', + brandHorizontal: 'linear-gradient(90deg, #008910 0%, #00ff41 100%)', + }, + }, + shape: { + borderRadius: 0, + }, + typography: { + fontFamily: 'monospace', + }, +}; + +export default matrixTheme; diff --git a/packages/grafana-data/src/themes/themeDefinitions/sapphiredusk.ts b/packages/grafana-data/src/themes/themeDefinitions/sapphiredusk.ts new file mode 100644 index 00000000000..353ff32b712 --- /dev/null +++ b/packages/grafana-data/src/themes/themeDefinitions/sapphiredusk.ts @@ -0,0 +1,81 @@ +import { NewThemeOptions } from '../createTheme'; + +const sapphireDuskTheme: NewThemeOptions = { + name: 'Sapphire dusk', + colors: { + mode: 'dark', + border: { + weak: '#232e47', + medium: '#2c3853', + strong: '#404d6b', + }, + text: { + primary: '#FFFFFF', + secondary: '#bcccdd', + disabled: '#838da5', + link: '#93EBF0', + maxContrast: '#FFFFFF', + }, + primary: { + main: '#93EBF0', + text: '#a8e9ed', + border: '#93ebf0', + name: 'primary', + shade: '#c0f5d9', + transparent: '#93EBF029', + contrastText: '#111614', + borderTransparent: '#93ebf040', + }, + secondary: { + main: '#2c364f', + shade: '#36415e', + transparent: 'rgba(200, 200, 180, 0.08)', + text: '#d1dfff', + contrastText: '#acfeff', + border: 'rgba(200, 200, 180, 0.08)', + name: 'secondary', + borderTransparent: 'rgba(200, 200, 180, 0.25)', + }, + info: { + main: '#4d4593', + text: '#a8e9ed', + border: '#5d54a7', + }, + error: { + main: '#c63370', + }, + success: { + main: '#1A7F4B', + }, + warning: { + main: '#D448EA', + }, + background: { + canvas: '#1e273d', + primary: '#12192e', + secondary: '#212c47', + }, + action: { + hover: '#364057', + selected: '#364260', + selectedBorder: '#D448EA', + focus: '#364057', + hoverOpacity: 0.08, + disabledText: 'rgba(54, 64, 87, 0.6)', + disabledBackground: 'rgba(54, 64, 87, 0.04)', + disabledOpacity: 0.38, + }, + gradients: { + brandHorizontal: 'linear-gradient(270deg, #D346EF 0%, #2C83FE 100%)', + brandVertical: 'linear-gradient(0deg, #D346EF 0%, #2C83FE 100%)', + }, + contrastThreshold: 3, + hoverFactor: 0.03, + tonalOffset: 0.15, + }, + shape: { + borderRadius: 5, + }, +}; + +export default sapphireDuskTheme; diff --git a/packages/grafana-data/src/themes/themeDefinitions/synthwave.ts b/packages/grafana-data/src/themes/themeDefinitions/synthwave.ts new file mode 100644 index 00000000000..c54eaf71731 --- /dev/null +++ b/packages/grafana-data/src/themes/themeDefinitions/synthwave.ts @@ -0,0 +1,55 @@ +import { NewThemeOptions } from '../createTheme'; + +const synthwaveTheme: NewThemeOptions = { + name: 'Synthwave', + colors: { + mode: 'dark', + border: { + weak: 'rgba(255, 20, 147, 0.12)', + medium: 'rgba(255, 20, 147, 0.20)', + strong: 'rgba(255, 20, 147, 0.30)', + }, + text: { + primary: '#E0E0E0', + secondary: 'rgba(224, 224, 224, 0.75)', + disabled: 'rgba(224, 224, 224, 0.5)', + link: '#FF69B4', + maxContrast: '#FFFFFF', + }, + primary: { + main: '#FF1493', + }, + secondary: { + main: '#37183a', + text: 'rgba(224, 224, 224, 0.75)', + border: 'rgba(255, 20, 147, 0.10)', + }, + background: { + canvas: '#1A1A2E', + primary: '#16213E', + secondary: '#0F3460', + }, + action: { + hover: 'rgba(255, 20, 147, 0.16)', + selected: 'rgba(255, 20, 147, 0.12)', + selectedBorder: '#FF1493', + focus: 'rgba(255, 20, 147, 0.16)', + hoverOpacity: 0.08, + disabledText: 'rgba(224, 224, 224, 0.5)', + disabledBackground: 'rgba(255, 20, 147, 0.08)', + disabledOpacity: 0.38, + }, + gradients: { + brandHorizontal: 'linear-gradient(270deg, #FF1493 0%, #1E90FF 100%)', + brandVertical: 'linear-gradient(0.01deg, #FF1493 0.01%, #1E90FF 99.99%)', + }, + contrastThreshold: 3, + hoverFactor: 0.03, + tonalOffset: 0.15, + }, + shape: { + borderRadius: 6, + }, +}; + +export default synthwaveTheme; diff --git a/packages/grafana-data/src/themes/themeDefinitions/tron.ts b/packages/grafana-data/src/themes/themeDefinitions/tron.ts new file mode 100644 index 00000000000..e3e761e012b --- /dev/null +++ b/packages/grafana-data/src/themes/themeDefinitions/tron.ts @@ -0,0 +1,55 @@ +import { NewThemeOptions } from '../createTheme'; + +const tronTheme: NewThemeOptions = { + name: 'Tron', + colors: { + mode: 'dark', + border: { + weak: 'rgba(0, 255, 255, 0.12)', + medium: 'rgba(0, 255, 255, 0.20)', + strong: 'rgba(0, 255, 255, 0.30)', + }, + text: { + primary: '#E0E0E0', + secondary: 'rgba(224, 224, 224, 0.75)', + disabled: 'rgba(224, 224, 224, 0.5)', + link: '#00FFFF', + maxContrast: '#FFFFFF', + }, + primary: { + main: '#00FFFF', + }, + secondary: { + main: '#0b2e36', + text: 'rgba(224, 224, 224, 0.75)', + border: 'rgba(0, 255, 255, 0.10)', + }, + background: { + canvas: '#0A0F18', + primary: '#0F1B2A', + secondary: '#152234', + }, + action: { + hover: 'rgba(0, 255, 255, 0.16)', + selected: 'rgba(0, 255, 255, 0.12)', + selectedBorder: '#00FFFF', + focus: 'rgba(0, 255, 255, 0.16)', + hoverOpacity: 0.08, + disabledText: 'rgba(224, 224, 224, 0.5)', + disabledBackground: 'rgba(0, 255, 255, 0.08)', + disabledOpacity: 0.38, + }, + gradients: { + brandHorizontal: 'linear-gradient(270deg, #00FFFF 0%, #29ABE2 100%)', + brandVertical: 'linear-gradient(0.01deg, #00FFFF 0.01%, #29ABE2 99.99%)', + }, + contrastThreshold: 3, + hoverFactor: 0.05, + tonalOffset: 0.2, + }, + shape: { + borderRadius: 6, + }, +}; + +export default tronTheme; diff --git a/packages/grafana-data/src/themes/themeDefinitions/victorian.ts b/packages/grafana-data/src/themes/themeDefinitions/victorian.ts new file mode 100644 index 00000000000..a90879ea1fb --- /dev/null +++ b/packages/grafana-data/src/themes/themeDefinitions/victorian.ts @@ -0,0 +1,59 @@ +import { NewThemeOptions } from '../createTheme'; + +const victorianTheme: NewThemeOptions = { + name: 'Victorian', + colors: { + mode: 'dark', + border: { + weak: '#3A2C22', + medium: '#3A2C22', + strong: '#4B3D32', + }, + text: { + primary: '#D9D0A2', + secondary: '#C4B89B', + disabled: '#A89F91', + link: '#C28A4D', + maxContrast: '#FFFFFF', + }, + primary: { + main: '#C28A4D', + }, + secondary: { + main: '#3A2C22', + text: '#C4B89B', + border: '#4B3D32', + }, + background: { + canvas: '#1F1510', + primary: '#2C1A13', + secondary: '#402A21', + }, + action: { + hover: '#3A2C22', + selected: '#4B3D32', + selectedBorder: '#C28A4D', + focus: '#C28A4D', + hoverOpacity: 0.1, + disabledText: '#A89F91', + disabledBackground: '#402A21', + disabledOpacity: 0.38, + }, + gradients: { + brandHorizontal: 'linear-gradient(270deg, #D9D0a1 0%, #C28A4D 100%)', + brandVertical: 'linear-gradient(0.01deg, #D9D0a1 0.01%, #C28A4D 99.99%)', + }, + contrastThreshold: 4, + hoverFactor: 0.07, + tonalOffset: 0.15, + }, + shape: { + borderRadius: 6, + }, + typography: { + fontFamily: '"Georgia", "Times New Roman", serif', + fontFamilyMonospace: "'Courier New', monospace", + }, +}; + +export default victorianTheme; diff --git a/packages/grafana-data/src/themes/themeDefinitions/zen.ts b/packages/grafana-data/src/themes/themeDefinitions/zen.ts new file mode 100644 index 00000000000..0867de1e63e --- /dev/null +++ b/packages/grafana-data/src/themes/themeDefinitions/zen.ts @@ -0,0 +1,55 @@ +import { NewThemeOptions } from '../createTheme'; + +const zenTheme: NewThemeOptions = { + name: 'Zen', + colors: { + mode: 'light', + text: { + primary: '#333333', + secondary: '#666666', + disabled: '#B8B8B8', + link: '#4F9F6E', + maxContrast: '#000000', + }, + border: { + weak: '#B1B7B3', + medium: '#A2A8A2', + strong: '#7C7F7A', + }, + primary: { + main: '#6D8E6D', + }, + secondary: { + main: '#E0E0E0', + text: '#666666', + border: '#A2A8A2', + }, + background: { + canvas: '#F4F4F4', + primary: '#E9E9E9', + secondary: '#D8D8D8', + }, + action: { + hover: '#D1D1D1', + selected: '#B8B8B8', + selectedBorder: '#88B88B', + hoverOpacity: 0.1, + focus: '#D1D1D1', + disabledBackground: '#E0E0E0', + disabledText: '#B8B8B8', + disabledOpacity: 0.5, + }, + gradients: { + brandHorizontal: 'linear-gradient(270deg, #88B88B 0%, #6D8E6D 100%)', + brandVertical: 'linear-gradient(0.01deg, #88B88B 0.01%, #6D8E6D 99.99%)', + }, + contrastThreshold: 3, + hoverFactor: 0.03, + tonalOffset: 0.2, + }, + shape: { + borderRadius: 8, + }, +}; + +export default zenTheme; diff --git a/packages/grafana-data/src/types/featureToggles.gen.ts b/packages/grafana-data/src/types/featureToggles.gen.ts index 452659bcf74..3e0490dd97b 100644 --- a/packages/grafana-data/src/types/featureToggles.gen.ts +++ b/packages/grafana-data/src/types/featureToggles.gen.ts @@ -256,4 +256,5 @@ export interface FeatureToggles { alertingAlertmanagerExtraDedupStage?: boolean; alertingAlertmanagerExtraDedupStageStopPipeline?: boolean; newLogsPanel?: boolean; + grafanaconThemes?: boolean; } diff --git a/packages/grafana-ui/.storybook/preview.ts b/packages/grafana-ui/.storybook/preview.ts index a8dc3e9f062..61206e5ab7f 100644 --- a/packages/grafana-ui/.storybook/preview.ts +++ b/packages/grafana-ui/.storybook/preview.ts @@ -31,7 +31,15 @@ const handleThemeChange = (theme: GrafanaTheme2) => { } }; -const showExtraThemes = process.env.NODE_ENV === 'development'; +const allowedExtraThemes: string[] = []; + +if (process.env.NODE_ENV === 'development') { + allowedExtraThemes.push('debug'); + allowedExtraThemes.push('desertbloom'); + allowedExtraThemes.push('gildedgrove'); + allowedExtraThemes.push('sapphiredusk'); + allowedExtraThemes.push('tron'); +} const preview: Preview = { decorators: [withTheme(handleThemeChange), withTimeZone()], @@ -71,7 +79,7 @@ const preview: Preview = { defaultValue: 'system', toolbar: { icon: 'paintbrush', - items: getBuiltInThemes(showExtraThemes).map((theme) => ({ + items: getBuiltInThemes(allowedExtraThemes).map((theme) => ({ value: theme.id, title: theme.name, })), diff --git a/pkg/services/featuremgmt/registry.go b/pkg/services/featuremgmt/registry.go index f0def056b77..bf5496b9c3c 100644 --- a/pkg/services/featuremgmt/registry.go +++ b/pkg/services/featuremgmt/registry.go @@ -1784,6 +1784,15 @@ var ( FrontendOnly: true, Owner: grafanaObservabilityLogsSquad, }, + { + Name: "grafanaconThemes", + Description: "Enables the temporary themes for GrafanaCon", + Stage: FeatureStageExperimental, + Owner: grafanaFrontendPlatformSquad, + HideFromAdminPage: true, + HideFromDocs: true, + RequiresRestart: true, + }, } ) diff --git a/pkg/services/featuremgmt/toggles_gen.csv b/pkg/services/featuremgmt/toggles_gen.csv index ad6203ebdc7..66125da1954 100644 --- a/pkg/services/featuremgmt/toggles_gen.csv +++ b/pkg/services/featuremgmt/toggles_gen.csv @@ -237,3 +237,4 @@ fetchRulesUsingPost,experimental,@grafana/alerting-squad,false,false,false alertingAlertmanagerExtraDedupStage,experimental,@grafana/alerting-squad,false,true,false alertingAlertmanagerExtraDedupStageStopPipeline,experimental,@grafana/alerting-squad,false,true,false newLogsPanel,experimental,@grafana/observability-logs,false,false,true +grafanaconThemes,experimental,@grafana/grafana-frontend-platform,false,true,false diff --git a/pkg/services/featuremgmt/toggles_gen.go b/pkg/services/featuremgmt/toggles_gen.go index 8c36acbcc51..e910ed15857 100644 --- a/pkg/services/featuremgmt/toggles_gen.go +++ b/pkg/services/featuremgmt/toggles_gen.go @@ -958,4 +958,8 @@ const ( // FlagNewLogsPanel // Enables the new logs panel in Explore FlagNewLogsPanel = "newLogsPanel" + + // FlagGrafanaconThemes + // Enables the temporary themes for GrafanaCon + FlagGrafanaconThemes = "grafanaconThemes" ) diff --git a/pkg/services/featuremgmt/toggles_gen.json b/pkg/services/featuremgmt/toggles_gen.json index e1673e7c8ab..bc2a152baaf 100644 --- a/pkg/services/featuremgmt/toggles_gen.json +++ b/pkg/services/featuremgmt/toggles_gen.json @@ -1865,6 +1865,21 @@ "hideFromDocs": true } }, + { + "metadata": { + "name": "grafanaconThemes", + "resourceVersion": "1738661140740", + "creationTimestamp": "2025-02-04T09:25:40Z" + }, + "spec": { + "description": "Enables the temporary themes for GrafanaCon", + "stage": "experimental", + "codeowner": "@grafana/grafana-frontend-platform", + "requiresRestart": true, + "hideFromAdminPage": true, + "hideFromDocs": true + } + }, { "metadata": { "name": "groupAttributeSync", diff --git a/pkg/services/preference/themes.go b/pkg/services/preference/themes.go index f1332d33f0b..4e88235d5d2 100644 --- a/pkg/services/preference/themes.go +++ b/pkg/services/preference/themes.go @@ -11,6 +11,16 @@ var themes = []ThemeDTO{ {ID: "dark", Type: "dark"}, {ID: "system", Type: "dark"}, {ID: "debug", Type: "dark", IsExtra: true}, + {ID: "aubergine", Type: "dark", IsExtra: true}, + {ID: "desertbloom", Type: "light", IsExtra: true}, + {ID: "gildedgrove", Type: "dark", IsExtra: true}, + {ID: "mars", Type: "dark", IsExtra: true}, + {ID: "matrix", Type: "dark", IsExtra: true}, + {ID: "sapphiredusk", Type: "dark", IsExtra: true}, + {ID: "synthwave", Type: "dark", IsExtra: true}, + {ID: "tron", Type: "dark", IsExtra: true}, + {ID: "victorian", Type: "dark", IsExtra: true}, + {ID: "zen", Type: "light", IsExtra: true}, } func GetThemeByID(id string) *ThemeDTO { diff --git a/public/app/core/components/SharedPreferences/SharedPreferences.tsx b/public/app/core/components/SharedPreferences/SharedPreferences.tsx index a24bd4b027b..16d91551060 100644 --- a/public/app/core/components/SharedPreferences/SharedPreferences.tsx +++ b/public/app/core/components/SharedPreferences/SharedPreferences.tsx @@ -17,6 +17,7 @@ import { FeatureBadge, Combobox, ComboboxOption, + TextLink, } from '@grafana/ui'; import { DashboardPicker } from 'app/core/components/Select/DashboardPicker'; import { t, Trans } from 'app/core/internationalization'; @@ -80,7 +81,20 @@ export class SharedPreferences extends PureComponent { navbar: { bookmarkUrls: [] }, }; - this.themeOptions = getBuiltInThemes(config.featureToggles.extraThemes).map((theme) => ({ + const allowedExtraThemes = []; + + if (config.featureToggles.extraThemes) { + allowedExtraThemes.push('debug'); + } + + if (config.featureToggles.grafanaconThemes) { + allowedExtraThemes.push('desertbloom'); + allowedExtraThemes.push('gildedgrove'); + allowedExtraThemes.push('sapphiredusk'); + allowedExtraThemes.push('tron'); + } + + this.themeOptions = getBuiltInThemes(allowedExtraThemes).map((theme) => ({ value: theme.id, label: getTranslatedThemeName(theme), })); @@ -168,6 +182,20 @@ export class SharedPreferences extends PureComponent { loading={isLoading} disabled={isLoading} label={t('shared-preferences.fields.theme-label', 'Interface theme')} + description={ + config.featureToggles.grafanaconThemes ? ( + + Enjoying the limited edition themes? Tell us what you'd like to see{' '} + + here. + + + ) : undefined + } > here.", "theme-label": "Interface theme", "week-start-label": "Week start" }, diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json index e3194c0093e..ad00f61eef6 100644 --- a/public/locales/pseudo-LOCALE/grafana.json +++ b/public/locales/pseudo-LOCALE/grafana.json @@ -3398,6 +3398,7 @@ "home-dashboard-placeholder": "Đęƒäūľŧ đäşĥþőäřđ", "locale-label": "Ŀäʼnģūäģę", "locale-placeholder": "Cĥőőşę ľäʼnģūäģę", + "theme-description": "Ēʼnĵőyįʼnģ ŧĥę ľįmįŧęđ ęđįŧįőʼn ŧĥęmęş? Ŧęľľ ūş ŵĥäŧ yőū'đ ľįĸę ŧő şęę <2>ĥęřę.", "theme-label": "Ĩʼnŧęřƒäčę ŧĥęmę", "week-start-label": "Ŵęęĸ şŧäřŧ" },