Skip to content

Commit

Permalink
Update grommet-app theme.jsx to support new structure
Browse files Browse the repository at this point in the history
  • Loading branch information
@taysea
taysea committed Nov 21, 2024
1 parent d95f099 commit f40900e
Showing 1 changed file with 99 additions and 37 deletions.
136 changes: 99 additions & 37 deletions sandbox/grommet-app/src/theme.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,7 @@ const buildTheme = tokens => {
const flatColors = flattenObject(light, '-');
const tokenColors = {};
Object.keys(flatColors).forEach(color => {
if (!color.includes('elevation')) {
if (!color.includes('shadow')) {
const adjustedColor = color.split('-').join('.');
tokenColors[color] = {
light: access(`hpe.color.${adjustedColor}`, light),
Expand Down Expand Up @@ -508,10 +508,20 @@ const buildTheme = tokens => {
},
};

// This means the theme is structure pre switch of button.size.kind --> button.kind.size
const oldTheme =
components.hpe.button.medium && 'default' in components.hpe.button.medium
? true
: false;

// abstracted so button and pinned list icon can reference
const mediumIconOnlyPad = {
vertical: components.hpe.button.medium.default.iconOnly.paddingY,
horizontal: components.hpe.button.medium.default.iconOnly.paddingX,
vertical: oldTheme
? components.hpe.button.medium.default.iconOnly.paddingY
: components.hpe.button.default.medium.iconOnly.paddingY,
horizontal: oldTheme
? components.hpe.button.medium.default.iconOnly.paddingX
: components.hpe.button.default.medium.iconOnly.paddingY,
};

const anchorSizeTheme = {};
Expand Down Expand Up @@ -539,18 +549,18 @@ const buildTheme = tokens => {

const buttonKindTheme = {};
buttonKinds.forEach(kind => {
const borderWidth = oldTheme
? components.hpe.button.medium?.[kind].borderWidth
: components.hpe.button[kind]?.medium.borderWidth;
const borderRadius = oldTheme
? components.hpe.button.medium?.[kind].borderRadius
: components.hpe.button[kind]?.medium.borderRadius;
buttonKindTheme[kind] = {
background: components.hpe.button?.[kind].enabled.background,
border: {
width:
dimensions.borderSize[
components.hpe.button.medium?.[kind].borderWidth
] || components.hpe.button.medium?.[kind].borderWidth,
width: dimensions.borderSize[borderWidth] || borderWidth,
color: components.hpe.button?.[kind].enabled.borderColor,
radius:
dimensions.borderSize[
components.hpe.button.medium?.[kind].borderRadius
] || components.hpe.button.medium?.[kind].borderRadius,
radius: dimensions.borderSize[borderRadius] || borderRadius,
},
color: components.hpe.button?.[kind].enabled.textColor,
font: {
Expand Down Expand Up @@ -620,26 +630,42 @@ const buildTheme = tokens => {
buttonKinds.forEach(kind => {
kindStyles[kind] = {
border: {
radius: components.hpe.button?.[size]?.[kind].borderRadius,
radius: oldTheme
? components.hpe.button?.[size]?.[kind]?.borderRadius
: components.hpe.button?.[kind]?.[size]?.borderRadius,
},
pad: {
vertical: components.hpe.button?.[size]?.[kind].paddingY,
horizontal: components.hpe.button?.[size]?.[kind].paddingX,
vertical: oldTheme
? components.hpe.button?.[size]?.[kind]?.paddingY
: components.hpe.button?.[kind]?.[size]?.paddingY,
horizontal: oldTheme
? components.hpe.button?.[size]?.[kind]?.paddingX
: components.hpe.button?.[kind]?.[size]?.paddingX,
},
};
});
buttonSizesTheme[size] = {
border: {
radius: components.hpe.button?.[size]?.default.borderRadius,
radius: oldTheme
? components.hpe.button?.[size]?.default.borderRadius
: components.hpe.button?.default?.[size]?.borderRadius,
},
pad: {
vertical: components.hpe.button?.[size]?.default.paddingY,
horizontal: components.hpe.button?.[size]?.default.paddingX,
vertical: oldTheme
? components.hpe.button?.[size]?.default.paddingY
: components.hpe.button?.default?.[size]?.paddingY,
horizontal: oldTheme
? components.hpe.button?.[size]?.default.paddingX
: components.hpe.button?.default?.[size]?.paddingX,
},
iconOnly: {
pad: {
vertical: components.hpe.button?.[size]?.default.iconOnly.paddingY,
horizontal: components.hpe.button?.[size]?.default.iconOnly.paddingX,
vertical: oldTheme
? components.hpe.button?.[size]?.default.iconOnly.paddingY
: components.hpe.button?.default?.[size]?.iconOnly.paddingY,
horizontal: oldTheme
? components.hpe.button?.[size]?.default.iconOnly.paddingX
: components.hpe.button?.default?.[size]?.iconOnly.paddingX,
},
},
...kindStyles,
Expand Down Expand Up @@ -866,7 +892,9 @@ const buildTheme = tokens => {
button: {
intelligentPad: false,
color: components.hpe.button.default.enabled.textColor,
gap: components.hpe.button.medium.default.gapX,
gap: oldTheme
? components.hpe.button.medium.default.gapX
: components.hpe.button.default.medium.gapX,
badge: {
align: 'container', // TO DO this is a grommet-ism?
container: {
Expand Down Expand Up @@ -1342,11 +1370,17 @@ const buildTheme = tokens => {
border: {
// Q: is this the correct value?
// A: yes
radius: components.hpe.button.medium.default.borderRadius,
radius: oldTheme
? components.hpe.button.medium.default.borderRadius
: components.hpe.button.default.medium.borderRadius,
},
pad: {
vertical: components.hpe.button.medium.default.paddingY,
horizontal: components.hpe.button.medium.default.paddingX,
vertical: oldTheme
? components.hpe.button.medium.default.paddingY
: components.hpe.button.default.medium.paddingY,
horizontal: oldTheme
? components.hpe.button.medium.default.paddingX
: components.hpe.button.default.medium.paddingX,
},
color: components.hpe.button.default.enabled.textColor,
font: {
Expand Down Expand Up @@ -2008,15 +2042,19 @@ const buildTheme = tokens => {
button: {
color: components.hpe.button.default.enabled.textColor,
border: {
radius: components.hpe.button.medium.default.borderRadius,
radius: oldTheme
? components.hpe.button.medium.default.borderRadius
: components.hpe.button.default.medium.borderRadius,
},
font: {
weight: components.hpe.button.default.enabled.fontWeight,
},
active: {
background: components.hpe.button.default.selected.enabled.background,
border: {
radius: components.hpe.button.medium.default.borderRadius,
radius: oldTheme
? components.hpe.button.medium.default.borderRadius
: components.hpe.button.default.medium.borderRadius,
},
color: components.hpe.button.default.selected.enabled.textColor,
font: {
Expand All @@ -2026,7 +2064,9 @@ const buildTheme = tokens => {
hover: {
background: components.hpe.button.default.hover.background,
border: {
radius: components.hpe.button.medium.default.borderRadius,
radius: oldTheme
? components.hpe.button.medium.default.borderRadius
: components.hpe.button.default.medium.borderRadius,
},
color: components.hpe.button.default.hover.textColor,
font: {
Expand All @@ -2036,7 +2076,9 @@ const buildTheme = tokens => {
disabled: {
background: components.hpe.button.default.disabled.background,
border: {
radius: components.hpe.button.medium.default.borderRadius,
radius: oldTheme
? components.hpe.button.medium.default.borderRadius
: components.hpe.button.default.medium.borderRadius,
},
color: components.hpe.button.default.disabled.textColor,
font: {
Expand All @@ -2046,11 +2088,17 @@ const buildTheme = tokens => {
size: {
small: {
border: {
radius: components.hpe.button.small.default.borderRadius,
radius: oldTheme
? components.hpe.button.small.default.borderRadius
: components.hpe.button.default.small.borderRadius,
width:
dimensions.borderSize[
components.hpe.button.small.default.borderWidth
] || components.hpe.button.small.default.borderWidth,
oldTheme
? components.hpe.button.small.default.borderWidth
: components.hpe.button.default.small.borderWidth
] || oldTheme
? components.hpe.button.small.default.borderWidth
: components.hpe.button.default.small.borderWidth,
},
pad: {
vertical: '4px',
Expand All @@ -2065,11 +2113,17 @@ const buildTheme = tokens => {
},
medium: {
border: {
radius: components.hpe.button.medium.default.borderRadius,
radius: oldTheme
? components.hpe.button.medium.default.borderRadius
: components.hpe.button.default.medium.borderRadius,
width:
dimensions.borderSize[
components.hpe.button.medium.default.borderWidth
] || components.hpe.button.medium.default.borderWidth,
oldTheme
? components.hpe.button.medium.default.borderWidth
: components.hpe.button.default.medium.borderWidth
] || oldTheme
? components.hpe.button.medium.default.borderWidth
: components.hpe.button.default.medium.borderWidth,
},
pad: {
vertical: '4px',
Expand All @@ -2084,11 +2138,17 @@ const buildTheme = tokens => {
},
large: {
border: {
radius: components.hpe.button.large.default.borderRadius,
radius: oldTheme
? components.hpe.button.large.default.borderRadius
: components.hpe.button.default.large.borderRadius,
width:
dimensions.borderSize[
components.hpe.button.large.default.borderWidth
] || components.hpe.button.large.default.borderWidth,
oldTheme
? components.hpe.button.large.default.borderWidth
: components.hpe.button.default.large.borderWidth
] || oldTheme
? components.hpe.button.large.default.borderWidth
: components.hpe.button.default.large.borderWidth,
},
pad: {
vertical: '4px',
Expand Down Expand Up @@ -2491,7 +2551,9 @@ const buildTheme = tokens => {
container: {
border: {
color: components.hpe.button.toolbar.enabled.borderColor,
size: components.hpe.button.medium.toolbar.borderWidth,
size: oldTheme
? components.hpe.button.medium.toolbar.borderWidth
: components.hpe.button.toolbar.medium.borderWidth,
},
},
},
Expand Down

0 comments on commit f40900e

Please sign in to comment.