[email protected]

🚀 What's Changed

• 📝 docs: remove the direct import usage (#286)
• 📝 docs: default to expand code examples and adjust visibile height in the collapsed state (#287)
• 🐛 fix: color style review (#288)

@trendmicro/[email protected]

🚀 What's Changed

💣 Breaking Changes

[PR #282] Remove deprecated light and dark shadows from styled-ui-theme

packages/styled-ui-theme/src/foundations/shadows.js

const shadows = {
  none: 'none',
-
-  /**
-   * offset-x | offset-y | blur-radius | spread-radius | color
-   */
-  dark: {
-    sm: '0 2px 8px 0 rgba(0, 0, 0, 0.48), 0 1px 2px 0 rgba(0, 0, 0, 0.16)',
-    md: '0 4px 16px 0 rgba(0, 0, 0, 0.48), 0 2px 4px 0 rgba(0, 0, 0, 0.16)',
-    lg: '0 8px 32px 0 rgba(0, 0, 0, 0.48), 0 4px 8px 0 rgba(0, 0, 0, 0.16)',
-  },
-  light: {
-    sm: '0 2px 8px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.08)',
-    md: '0 4px 16px 0 rgba(0, 0, 0, 0.16), 0 2px 4px 0 rgba(0, 0, 0, 0.08)',
-    lg: '0 8px 32px 0 rgba(0, 0, 0, 0.16), 0 4px 8px 0 rgba(0, 0, 0, 0.08)',
-  },
};

@trendmicro/[email protected]

🚀 What's Changed

• 🎉 feat: color style enhancements (#282)
• 🎉 feat: change useColorMode Hook usage (#284)
• 🧱 chore(react-styled-ui): bump tmicon to v1.19.0 (de50d51)

💣 Breaking Changes

• [PR #282] Change severity color values
  • Change the color of dark.severity.critical to magenta:60 (#dc1d68)
  • Change the color of dark.severity.info to gray:50 (#8a8a8a)
  • Change the color of light.severity.critical to magenta:60 (#dc1d68)
  • Change the color of light.severity.info to gray:50 (#8a8a8a)
• [PR #282] Change shadow color keys from sm, md, lg to thin, medium, thick
  • thin
    • Tooltip
    • Popover
  • medium
    • Menu
  • thick
    • Drawer
    • Modal
• [PR #282] Remove light and dark shadows from the theme

[email protected]

🚀 What's Changed

• 📝 docs(color-style): fix misspelled words and add detailed usage for the useColorStyle Hook (#277)

@trendmicro/[email protected]

🚀 What's Changed

• 🐛 fix: uncaught Error: [ThemeProvider] Please make your theme prop a plain object (#280)
• 🐛 fix: fix an issue that cannot pass the z-index value to DrawerContent and ModalContent components (#281)

@trendmicro/[email protected]

🚀 What's Changed

• 🎉 feat: rework color style system (#266)
• 🐛 fix: add borderRadius prop to TagCloseButton component (#272)
• 🎉 feat: provide a manual update function for updating the ref of the top-level child in Tooltip (#274)
• 🎉 feat: provide a manual update function for updating the ref of the top-level child in PopoverTrigger (#275)
• 🧱 chore: @babel/eslint-parser as the ESLint default parser and bump Next.js to v10 (#276)

💣 Breaking Changes

[PR #266] The color style system has been reworked to break the cross dependencies among theme / color mode / color style. The useColorStyle Hook now also provides more flexibility and it no longer has any direct dependency to theme and color mode.

Before

<ThemeProvider theme={customTheme} palette={customPalette}>
  <ColorModeProvider value="dark">
    <CSSBaseLine /> 
    <App />
  </ColorModeProvider>
</ThemeProvider>

After

<ThemeProvider theme={customTheme}>
  <ColorModeProvider value="dark">
    <ColorStyleProvider>
      <CSSBaseLine /> 
      <App />
    </ColorStyleProvider>
  </ColorModeProvider>
</ThemeProvider>

In your app, you can use the useColorStyle Hook to get or set color style for a given color mode.

const [colorMode] = useColorMode();
const [colorStyle, setColorStyle] = useColorStyle({ colorMode });
const { colors } = useTheme();

console.log(colorMode);
// => 'dark'
console.log(colorStyle.text.primary);
// => 'white:primary'
console.log(colorStyle.background.primary);
// => 'gray:100'
console.log(colors[colorStyle.text.primary]);
// => 'rgba(255, 255, 255, .92)'
console.log(colors[colorStyle.background.primary]);
// => '#151515'

Custom color style

First, you can create your custom color style or override default color style as below:

import { colorStyle } from '@trendmicro/react-styled-ui';

const customColorStyle = {
  ...colorStyle,
 dark: {
    ..colorStyle.dark,
    text: {
      emphasis: 'white:primary',
      primary: 'white:primary',
      secondary: 'white:secondary',
      tertiary: 'white:tertiary',
      disabled: 'white:disabled',
      link: 'blue:40',
      warning: 'orange:50',
      error: 'red:50',
    },
  },
  light: {
    ...colorStyle.light,
    text: {
      emphasis: 'black:emphasis',
      primary: 'black:primary',
      secondary: 'black:secondary',
      tertiary: 'black:tertiary',
      disabled: 'black:disabled',
      link: 'blue:60',
      warning: 'orange:50',
      error: 'red:60',
    },
  },
};

export default customColorStyle;

Then, pass your custom color style to ColorStyleProvider with the value prop.

<ThemeProvider theme={customTheme}>
  <ColorModeProvider value="dark">
    <ColorStyleProvider value={customColorStyle}>
      <CSSBaseLine /> 
      <App />
    </ColorStyleProvider>
  </ColorModeProvider>
</ThemeProvider>

@trendmicro/[email protected]

🚀 What's Changed

• 💣 breaking: remove the heading style (#268)

💣 Breaking Changes

[PR #268] The heading style has deprecated and removed in this release. You can replace heading with base if necessary.

@trendmicro/[email protected]

🚀 What's Changed

• 🐛 fix: fix undesired artifacts with the published version 0.12.0
• 🐛 fix: Dropdown button overlay menu list (#271)
• 🐛 fix: Scrollbar of top start menu list always auto scroll to bottom when mouse hover to menu item (#271)

@trendmicro/[email protected]

🚀 What's Changed

• 🎉 feat: import SVG icons from the @trendmicro/tmicon package (#261)
• 🎉 feat: move @trendmicro/styled-ui-theme from peerDependencies to dependencies (#262)
• 📝 docs: fix abnormal UI (#263)
• 🎉 feat: enable website tracking using Google Analytics (#267)

💣 Breaking Changes

[PR #262] There is a breaking change that moves @trendmicro/styled-ui-theme from peerDependencies to dependencies. It's no longer need to explicitly add @trendmicro/styled-ui-theme to your package dependencies.

Before

yarn add @trendmicro/react-styled-ui @trendmicro/styled-ui-theme

After

yarn add @trendmicro/react-styled-ui

@trendmicro/[email protected]

🚀 What's Changed

• 🎉 feat: enhance ThemeProvider and ColorModeProvider and add useColorStyle Hook (#258)

Color Styles

https://trendmicro-frontend.github.io/styled-ui/color-styles

<ThemeProvider theme={customTheme} palette={customColorPalette}>
  <ColorModeProvider value="dark">
    <App />
  </ColorModeProvider>
</ThemeProvider>

useColorStyle Hook

function Example() {
  const [colorStyle] = useColorStyle();
  const backgorundColor = colorStyle.background.secondary;
  const textColor = colorStyle.text.secondary;

  return (
    <Box background={backgorundColor} p="4x">
      <Text color={textColor} size="lg">
        Sample text
      </Text>
    </Box>
  );
};