mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Themes: Add new theme definitions behind feature toggle (#100129)
* create new toggle * add survey link behind feature toggle * fix translations * better theme structure * add all the themes back * update matrix * fix mars contrast * fix color contrast probs with tron * fix a11y issues with synthwave/victorian themes * fix aubergine/zen * rename green + gold * rename to space * rename, only enable 4 for grafanacon * add survey link * fix info color in sapphiredusk * handle extra themes in storybook
This commit is contained in:
Ashley Harrison
GitHub
parent
e05413dcc4
commit
7d3a77a45c
@ -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) => {
|
||||
|
||||
@ -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;
|
||||
@ -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;
|
||||
@ -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;
|
||||
@ -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';
|
||||
|
||||
55
packages/grafana-data/src/themes/themeDefinitions/mars.ts
Normal file
55
packages/grafana-data/src/themes/themeDefinitions/mars.ts
Normal file
@ -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;
|
||||
43
packages/grafana-data/src/themes/themeDefinitions/matrix.ts
Normal file
43
packages/grafana-data/src/themes/themeDefinitions/matrix.ts
Normal file
@ -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;
|
||||
@ -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;
|
||||
@ -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;
|
||||
55
packages/grafana-data/src/themes/themeDefinitions/tron.ts
Normal file
55
packages/grafana-data/src/themes/themeDefinitions/tron.ts
Normal file
@ -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;
|
||||
@ -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;
|
||||
55
packages/grafana-data/src/themes/themeDefinitions/zen.ts
Normal file
55
packages/grafana-data/src/themes/themeDefinitions/zen.ts
Normal file
@ -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;
|
||||
@ -256,4 +256,5 @@ export interface FeatureToggles {
|
||||
alertingAlertmanagerExtraDedupStage?: boolean;
|
||||
alertingAlertmanagerExtraDedupStageStopPipeline?: boolean;
|
||||
newLogsPanel?: boolean;
|
||||
grafanaconThemes?: boolean;
|
||||
}
|
||||
|
||||
@ -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,
|
||||
})),
|
||||
|
||||
@ -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,
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
@ -958,4 +958,8 @@ const (
|
||||
// FlagNewLogsPanel
|
||||
// Enables the new logs panel in Explore
|
||||
FlagNewLogsPanel = "newLogsPanel"
|
||||
|
||||
// FlagGrafanaconThemes
|
||||
// Enables the temporary themes for GrafanaCon
|
||||
FlagGrafanaconThemes = "grafanaconThemes"
|
||||
)
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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<Props, State> {
|
||||
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<Props, State> {
|
||||
loading={isLoading}
|
||||
disabled={isLoading}
|
||||
label={t('shared-preferences.fields.theme-label', 'Interface theme')}
|
||||
description={
|
||||
config.featureToggles.grafanaconThemes ? (
|
||||
<Trans i18nKey="shared-preferences.fields.theme-description">
|
||||
Enjoying the limited edition themes? Tell us what you'd like to see{' '}
|
||||
<TextLink
|
||||
variant="bodySmall"
|
||||
external
|
||||
href="https://docs.google.com/forms/d/e/1FAIpQLSeRKAY8nUMEVIKSYJ99uOO-dimF6Y69_If1Q1jTLOZRWqK1cw/viewform?usp=dialog"
|
||||
>
|
||||
here.
|
||||
</TextLink>
|
||||
</Trans>
|
||||
) : undefined
|
||||
}
|
||||
>
|
||||
<Combobox
|
||||
options={this.themeOptions}
|
||||
|
||||
@ -3398,6 +3398,7 @@
|
||||
"home-dashboard-placeholder": "Default dashboard",
|
||||
"locale-label": "Language",
|
||||
"locale-placeholder": "Choose language",
|
||||
"theme-description": "Enjoying the limited edition themes? Tell us what you'd like to see <2>here.</2>",
|
||||
"theme-label": "Interface theme",
|
||||
"week-start-label": "Week start"
|
||||
},
|
||||
|
||||
@ -3398,6 +3398,7 @@
|
||||
"home-dashboard-placeholder": "Đęƒäūľŧ đäşĥþőäřđ",
|
||||
"locale-label": "Ŀäʼnģūäģę",
|
||||
"locale-placeholder": "Cĥőőşę ľäʼnģūäģę",
|
||||
"theme-description": "Ēʼnĵőyįʼnģ ŧĥę ľįmįŧęđ ęđįŧįőʼn ŧĥęmęş? Ŧęľľ ūş ŵĥäŧ yőū'đ ľįĸę ŧő şęę <2>ĥęřę.</2>",
|
||||
"theme-label": "Ĩʼnŧęřƒäčę ŧĥęmę",
|
||||
"week-start-label": "Ŵęęĸ şŧäřŧ"
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user