feat: improve theme

.changeset/afraid-avocados-roll.md

@@ -0,0 +1,5 @@
+---
+'@saas-ui/react': patch
+---
+
+Improved Sidebar contrast

.changeset/honest-nails-wash.md

@@ -0,0 +1,5 @@
+---
+'@saas-ui/react': patch
+---
+
+Improved focusRing styles

.changeset/nasty-knives-argue.md

@@ -0,0 +1,5 @@
+---
+'@saas-ui/react': patch
+---
+
+Added SegmentControl stories and made sizing consistent with buttons

.changeset/weak-horses-smile.md

@@ -0,0 +1,5 @@
+---
+'@saas-ui/react': patch
+---
+
+Sidebar.Button now renders a div with role="button"

packages/saas-ui-core/src/components/sidebar/sidebar.tsx

@@ -189,20 +189,20 @@ export const SidebarNavItem = forwardRef<
   return <sui.div ref={ref} {...props} />
 })
 
-export interface SidebarNavButtonProps extends HTMLSystemProps<'button'> {
+export interface SidebarNavButtonProps extends HTMLSystemProps<'div'> {
   active?: boolean
 }
 
 export const SidebarNavButton = forwardRef<
-  HTMLButtonElement,
+  HTMLDivElement,
   SidebarNavButtonProps
 >((props, ref) => {
   const { children, active, ...rest } = props
 
   return (
-    <sui.button ref={ref} data-active={dataAttr(active)} {...rest}>
+    <sui.div ref={ref} data-active={dataAttr(active)} role="button" {...rest}>
       {children}
-    </sui.button>
+    </sui.div>
   )
 })
 

packages/saas-ui-react/src/components/button/button.recipe.ts

@@ -163,10 +163,10 @@ export const buttonRecipe = defineRecipe({
       ghost: {
         color: 'colorPalette.fg',
         _hover: {
-          bg: 'colorPalette.muted',
+          bg: 'colorPalette.subtle',
         },
         _expanded: {
-          bg: 'colorPalette.muted',
+          bg: 'colorPalette.subtle',
         },
       },
 
@@ -176,6 +176,15 @@ export const buttonRecipe = defineRecipe({
     },
   },
 
+  compoundVariants: [
+    {
+      variant: 'plain',
+      css: {
+        px: 0,
+      },
+    },
+  ],
+
   defaultVariants: {
     size: 'md',
     variant: 'solid',

packages/saas-ui-react/src/components/card/card.stories.tsx

@@ -0,0 +1,185 @@
+import React from 'react'
+
+import {
+  Group,
+  Heading,
+  Icon,
+  IconButton,
+  Image,
+  LinkBox,
+  LinkOverlay,
+  SimpleGrid,
+  Spacer,
+  Text,
+} from '@chakra-ui/react'
+import { Meta, StoryObj } from '@storybook/react'
+import { FaGithub, FaSlack, FaXTwitter } from 'react-icons/fa6'
+import { LuArrowRight, LuMoreVertical } from 'react-icons/lu'
+
+import { Avatar } from '#components/avatar/avatar.js'
+
+import { Button } from '../button/index.ts'
+import { Persona } from '../persona/index.ts'
+import { Card } from './index.ts'
+
+export default {
+  title: 'Components/Card',
+  component: Card.Root,
+  tags: ['autodocs'],
+} satisfies Meta
+
+type Story = StoryObj<typeof Card>
+
+export const Media = () => (
+  <>
+    <Card.Root maxW="400px" position="relative" overflow="clip">
+      <Card.Header
+        flexDirection="row"
+        position="absolute"
+        top="0"
+        left="0"
+        right="0"
+        backdropFilter="blur(10px)"
+        className="dark"
+      >
+        <Persona
+          name="Eelco Wiersma"
+          secondaryLabel="South Tirol, Italy"
+          size="sm"
+          flex="1"
+        />
+        <IconButton
+          aria-label="More"
+          size="sm"
+          variant="ghost"
+          alignSelf="flex-start"
+        >
+          <LuMoreVertical />
+        </IconButton>
+      </Card.Header>
+      <Image height="256px" src="/mountains.jpg" objectFit="cover" />
+      <Card.Body
+        position="absolute"
+        bottom="0"
+        left="0"
+        right="0"
+        bgGradient="to-t"
+        gradientFrom="black"
+        gradientTo="transparent"
+        height="140px"
+        justifyContent="flex-end"
+      >
+        <Group>
+          <Text flex="1" textStyle="sm" color="fg.inverted">
+            South Tirol
+          </Text>
+          <Button variant="solid" colorPalette="accent" size="sm">
+            Book now
+          </Button>
+        </Group>
+      </Card.Body>
+    </Card.Root>
+  </>
+)
+
+export const Outline = () => (
+  <SimpleGrid columns={[1, null, 2]} gap="2">
+    <Card.Root variant="outline">
+      <Card.Header>
+        <Icon me="2" boxSize="6">
+          <FaGithub />
+        </Icon>
+        <Heading size="md">Github</Heading>
+      </Card.Header>
+      <Card.Body>
+        <Text color="fg.muted" textStyle="md">
+          Link pull requests
+        </Text>
+      </Card.Body>
+      <Card.Footer>
+        <Group>
+          <Button colorScheme="gray" variant="surface">
+            Enable
+          </Button>
+          <Button variant="ghost">Learn more</Button>
+        </Group>
+      </Card.Footer>
+    </Card.Root>
+    <Card.Root variant="outline">
+      <Card.Header>
+        <Icon me="2" boxSize="6">
+          <FaSlack />
+        </Icon>
+        <Heading size="md">Slack</Heading>
+      </Card.Header>
+      <Card.Body>
+        <Text color="fg.muted" textStyle="md">
+          Send push notifications
+        </Text>
+      </Card.Body>
+      <Card.Footer>
+        <Group>
+          <Button colorScheme="gray" variant="surface">
+            Enable
+          </Button>
+          <Button variant="ghost">Learn more</Button>
+        </Group>
+      </Card.Footer>
+    </Card.Root>
+  </SimpleGrid>
+)
+
+export const Footer = () => (
+  <Card.Root colorPalette="accent" variant="subtle" maxW="xl">
+    <Card.Header>
+      <Card.Title>Getting started</Card.Title>
+    </Card.Header>
+    <Card.Body>
+      <Text textStyle="md">
+        Welcome to Saas UI, in the next steps we will walk you through all the
+        basic features of Saas UI.
+      </Text>
+    </Card.Body>
+    <Card.Footer>
+      <Group>
+        <Button variant="solid" colorPalette="accent">
+          Continue
+        </Button>
+        <Button variant="ghost">Dismiss</Button>
+      </Group>
+    </Card.Footer>
+  </Card.Root>
+)
+
+export const Interactive = () => (
+  <Card.Root asChild width="100%" maxW="400px" role="button" variant="elevated">
+    <LinkBox>
+      <Card.Header>
+        <Avatar src="/chakra-ui-logomark-colored.svg" size="sm" me="2" />
+        <LinkOverlay href="#">
+          <Heading size="sm">Chakra UI</Heading>
+        </LinkOverlay>
+      </Card.Header>
+      <Card.Body>
+        <Text fontSize="md" color="muted">
+          Chakra UI is a simple, modular and accessible component library that
+          gives you the building blocks you need to build your React
+          applications.
+        </Text>
+      </Card.Body>
+      <Card.Footer>
+        <Button variant="plain" _parentHover={{ colorPalette: 'teal' }}>
+          Learn more
+          <Icon
+            transform="translateX(-5px)"
+            transitionProperty="common"
+            transitionDuration="moderate"
+            css={{ _parentHover: { transform: 'translateX(0)' } }}
+          >
+            <LuArrowRight />
+          </Icon>
+        </Button>
+      </Card.Footer>
+    </LinkBox>
+  </Card.Root>
+)

packages/saas-ui-react/src/components/card/index.ts

@@ -0,0 +1 @@
+export { Card } from '@chakra-ui/react'

packages/saas-ui-react/src/components/persona/persona.recipe.ts

@@ -9,6 +9,7 @@ const baseStyleLabel = defineStyle({
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis',
   minW: 0,
+  color: 'fg',
 })
 
 export const personaSlotRecipe = defineSlotRecipe({
@@ -52,11 +53,11 @@ export const personaSlotRecipe = defineSlotRecipe({
     label: baseStyleLabel,
     secondaryLabel: {
       ...baseStyleLabel,
-      color: 'fg.muted',
+      color: 'fg/60',
     },
     tertiaryLabel: {
       ...baseStyleLabel,
-      color: 'fg.muted',
+      color: 'fg/60',
     },
   },
   variants: {

packages/saas-ui-react/src/components/segmented-control/segmented-control.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import { SegmentedControl } from './index.ts'
+
+export default {
+  title: 'Components/Segmented Control',
+  component: SegmentedControl,
+} satisfies Meta
+
+type Story = StoryObj<typeof SegmentedControl>
+
+export const Default: Story = {
+  args: {
+    defaultValue: 'One',
+    items: ['One', 'Two', 'Three'],
+  },
+}
+
+export const Small: Story = {
+  args: {
+    defaultValue: 'One',
+    items: ['One', 'Two', 'Three'],
+    size: 'sm',
+  },
+}

packages/saas-ui-react/src/components/sidebar/sidebar-item.recipe.ts

@@ -21,7 +21,8 @@ export const sidebarNavItemSlotRecipe = defineSlotRecipe({
       cursor: 'button',
       transitionProperty: 'common',
       transitionDuration: 'fast',
-      focusVisibleRing: 'outside',
+      focusVisibleRing: 'inside',
+      focusRingWidth: '1px',
       '& > svg': {
         boxSize: 4,
         color: 'var(--sidebar-item-icon-color)',
@@ -34,6 +35,11 @@ export const sidebarNavItemSlotRecipe = defineSlotRecipe({
       display: 'flex',
       gap: '1px',
       ms: 'auto',
+      '& button': {
+        _hover: {
+          bg: 'transparent',
+        },
+      },
     },
   },
   variants: {

packages/saas-ui-react/src/components/sidebar/sidebar.recipe.ts

@@ -98,6 +98,9 @@ export const sidebarSlotRecipe = defineSlotRecipe({
     groupEndElement: {
       '& > button': {
         boxSize: 6,
+        _hover: {
+          bg: 'transparent',
+        },
       },
     },
     groupContent: {
@@ -208,11 +211,6 @@ export const sidebarSlotRecipe = defineSlotRecipe({
       },
       compact: {},
     },
-    variant: {
-      muted: {},
-      solid: {},
-      subtle: {},
-    },
     size: {
       md: {
         header: {
@@ -232,7 +230,6 @@ export const sidebarSlotRecipe = defineSlotRecipe({
   },
   defaultVariants: {
     mode: 'collapsible',
-    variant: 'muted',
     size: 'md',
   },
 })

packages/saas-ui-react/src/components/sidebar/sidebar.stories.tsx

@@ -75,7 +75,7 @@ function SidebarLayout(props: { children: React.ReactElement }) {
   return (
     <Sidebar.Provider mode={mode}>
       <AppShell sidebar={props.children}>
-        <Stack height="full" flex="1" boxShadow="sm">
+        <Stack height="full" flex="1" borderLeftWidth="1px" boxShadow="sm">
           <HStack
             px="4"
             minH="12"

packages/saas-ui-react/src/preset.ts

@@ -1,9 +1,18 @@
 import { createSystem, defaultBaseConfig, mergeConfigs } from '@chakra-ui/react'
 
 import { defaultThemeConfig } from './theme'
+import { utilities } from './theme/utilities.ts'
 
-export const defaultConfig = mergeConfigs(defaultBaseConfig, defaultThemeConfig)
+const defaultConfig = mergeConfigs(defaultBaseConfig, defaultThemeConfig)
+
+/**
+ * TODO: This is a temporary fix to add the utilities to the default config.
+ */
+defaultConfig.utilities = Object.assign(
+  defaultConfig.utilities ?? {},
+  utilities,
+)
 
 export const defaultSystem = createSystem(defaultConfig)
 
-export { defaultSystem as system }
+export { defaultSystem as system, defaultConfig }