Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Material UI] Add channel colors if possible #35178

Merged
merged 7 commits into from
Dec 5, 2022

Conversation

siriwatknp
Copy link
Member

@siriwatknp siriwatknp commented Nov 17, 2022

close #35159

Problem

https://codesandbox.io/s/determined-fermat-mikfcs?file=/src/App.tsx

The extendTheme creates channel colors if it sees palette.*.main, so it breaks if I do this with custom palette:

extendTheme({
  colorSchemes: {
    light: {
      palette: {
        gradient: {
          main: 'linear-gradient(...)', // it tries to create channel color which throws an error because the value is not a valid color.
          ...
        }
      }
    }
  }
})

This is definitely confusing for developers and there is no workaround unless they change from primary to another name.

Solution

Display warning instead of throwing errors.

For dependent tokens

These tokens are used to calculate channel colors, so the warning is displayed if it cannot parse the value:

extendTheme({
  colorSchemes: {
    light: {
      palette: {
        divider: 'green',
      },
    },
  },
}),

// MUI: The value of `palette.divider` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().

For independent tokens

These tokens are not used by others, so they can be replaced with any CSS color, e.g. gradient or refer to another CSS variable.

extendTheme({
  colorSchemes: {
    light: {
      palette: {
        Alert: {
          errorColor: 'green', // ✅
        },
      },
    },
  },
})

Custom palettes

Like in #35159, the gradient is created with the same structure of MUI primary palette but that's not the intention of the developers, so the errors are silent:

extendTheme({
  colorSchemes: {
    light: {
      palette: {
        gradient: {
          primary: 'linear-gradient(#000, transparent)',},
      },
    },
  },
})

https://codesandbox.io/s/awesome-chihiro-uo3ddh?file=/src/App.tsx


@siriwatknp siriwatknp added package: material-ui Specific to @mui/material customization: theme Centered around the theming features labels Nov 17, 2022
@mui-bot
Copy link

mui-bot commented Nov 17, 2022

Messages
📖 Netlify deploy preview: https://deploy-preview-35178--material-ui.netlify.app/

@material-ui/core: parsed: +0.26% , gzip: +0.16%
@material-ui/system: parsed: +0.63% , gzip: +0.42%

Details of bundle changes

Generated by 🚫 dangerJS against 73c11f3

@siriwatknp siriwatknp marked this pull request as ready for review November 17, 2022 03:52
Comment on lines +30 to +32
if (!obj[key] && defaultValue) {
obj[key] = defaultValue;
}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

only apply the key if defaultValue exists.

// before
setColor(object, 'a', undefined); // { a: undefined }

// after
setColor(object, 'a', undefined); // {}

@siriwatknp
Copy link
Member Author

@mnajdova Please review again. In summary, instead of throwing errors, the warning is displayed for specific tokens that are used for channel color generation.

setColor(
palette.Alert,
'infoColor',
silent(() => darken(palette.info.light, 0.6)),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we extract this in a separate function? Instead of invoking silent(() => darken()) we could just invoke darken(), which will behind the scene do this. Same for the other color manipulators. We could even export these functions from the color manipulators directly by using some prefix, like safeDarken or something similar. My worry is that if we add new color tokens we may forget to use the silent function.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something like this?

// colorManipulator.js
export const colorChannel = ...;
export const safeColorChannel = (color, warning) => {
  try {
    return colorChannel(color);
  } catch (error) {
    if (warning && process.env.NODE_ENV !== 'production') {
      console.warn(warning);
    }
    return undefined;
  }
}

// experimental_extendTheme.js
setColor(
  palette[color],
  'activeChannel',
  colorChannelSafe(colors.active, 'MUI: The value of "palette.action.active" should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'),
);

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mnajdova In case you missed the notification.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Exactly yes, sorry for not responding sooner.

Comment on lines +3 to +7
private_safeColorChannel as safeColorChannel,
private_safeAlpha as safeAlpha,
private_safeDarken as safeDarken,
private_safeLighten as safeLighten,
private_safeEmphasize as safeEmphasize,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mnajdova I mark them as private_ to align with our intention.

Copy link
Member

@mnajdova mnajdova left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good

@siriwatknp siriwatknp merged commit e00a4d8 into mui:master Dec 5, 2022
@siriwatknp siriwatknp added the bug 🐛 Something doesn't work label Dec 5, 2022
feliperli pushed a commit to jesrodri/material-ui that referenced this pull request Dec 6, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work customization: theme Centered around the theming features package: material-ui Specific to @mui/material
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Allow using linear-gradient color in theme palette
3 participants