CHANGELOG.md

@fuel-ui/config

0.14.0

Minor Changes

• Chore: Forked stitches packages to improve typing and class generation. Feat: Added a new flexible and custom theme system. Read the RFC for all details and check out an example of usage. Feat: Updated Flex, BoxCentered, Grid, and Stack components to be used within Box as namespaced components [BREAKING CHANGE]:

  import { Box } from '@fuel-ui/react';
  function App() {
    return <Box.Flex>Hello world</Box.Flex>;
  }

  Feat: Introduced a new polymorphic components system where as props automatically adjust prop typings. Any HTML element can be used in the component prop. For example, using an a tag will render an anchor:

  import { Button } from '@fuel-ui/react';
  import { IconExternalLink } from '@tabler/icons-react';
  function Demo() {
    return (
      <Button
        component="a"
        href="#"
        variant="outlined"
        leftIcon={<IconExternalLink size={18} />}
      >
        Open in new tab
      </Button>
    );
  }

  Feat: Refined the default light theme for better clarity and simplicity:

  import {
    ThemeProvider,
    darkTheme,
    lightTheme,
    useFuelTheme,
  } from '@fuel-ui/react';
  function ThemeWrapper(props: any) {
    const isDark = useSomeHookToDetectIsDark();
    const { setTheme } = useFuelTheme();
    useEffect(() => {
      setTheme(isDark ? darkTheme : lightTheme);
    }, [isDark]);
    return <ThemeProvider>{props.children}</ThemeProvider>;
  }

  Feat: Added new design tokens in this release. All color tokens are now auto-generated using the design-system/tokens project, based on the Stitches design tokens pattern and Radix Colors. Important notes about the new tokens:
  • Always reference the semantic value of a token when using a color, e.g., use $intentsPrimary9 instead of $green9.
  • Semantic colors are available for all necessary layer styles and inputs. A layer mixin has been introduced to simplify token usage (see Button/styles.ts implementation for more details).
  • New tokens are generated in the design-tokens/tokens/build/tokens-raw.ts file after running pnpm build inside the package.
  • Understanding and following the new token system is crucial for easy light/dark theme switching.
  • The number of colors and variations in Button, Tag, and Badge has been reduced to only include design system intents. Chore: Removed color prop from Button and all derived/related components. Use intent instead.

  import { Button } from '@fuel-ui/react'
  function Demo() {
  return <Button intent='base'>Cancel</Button>
  }
  ```, by [@pedronauck](https://github.com/pedronauck) (See [#228](https://github.com/FuelLabs/fuel-ui/pull/228))

0.13.0

Minor Changes

• ✨ Feat: minimal set of adjustments to have a new brand look, by @pedronauck (See #219)

0.12.4

0.12.3

0.12.2

0.12.1

0.12.0

0.11.0

Minor Changes

• ✨ Feat: add new component. Check inside then Pagination.stories.tsx to see how to use it, by @pedronauck (See #189)

0.10.2

Patch Changes

• 🐞 Fix(react): <InputAmount> now discount fee when hit max button and also format balance units to don't break layout, by @pedronauck (See #184)

0.10.1

0.10.0

0.9.3

Patch Changes

• 🐞 Fix: Drawer required props and update dependencies, by @pedronauck (See #175)

0.9.2

Patch Changes

• 🐞 Fix: Drawer required props and update dependencies, by @pedronauck (See #168)

0.9.1

0.9.0

0.8.0

0.7.0

0.6.0

0.5.0

0.4.0

0.3.0

0.2.0

0.0.2

Patch Changes

• Add changesets to monorepo, by @pedronauck (See #46)