Feature 14: Weekly Plan Builder (#121)

Co-authored-by: orchestrator-agent <20+orchestrator-agent@code.cubecraftcreations.com>

web/src/ui/Tag.module.css

@@ -19,3 +19,8 @@
   background: var(--color-accent-2-200);
   color: var(--color-accent-2-800);
 }
+
+.neutral {
+  background: var(--color-neutral-100);
+  color: var(--color-neutral-800);
+}

web/src/ui/Tag.test.tsx

@@ -15,4 +15,9 @@ describe('Tag', () => {
     render(<Tag tone="teal">Synced</Tag>)
     expect(screen.getByText('Synced')).toHaveClass(styles.teal!)
   })
+
+  it('supports the neutral tone', () => {
+    render(<Tag tone="neutral">Regular</Tag>)
+    expect(screen.getByText('Regular')).toHaveClass(styles.neutral!)
+  })
 })

web/src/ui/Tag.tsx

@@ -1,13 +1,14 @@
 import type { ComponentPropsWithRef } from 'react'
 import styles from './Tag.module.css'
 
-export type TagTone = 'grape' | 'teal'
+export type TagTone = 'grape' | 'teal' | 'neutral'
 
 export type TagProps = ComponentPropsWithRef<'span'> & {
   tone?: TagTone
 }
 
-// Static label such as "Draft", "Side quest" or "Synced". Not interactive.
+// Static label such as "Draft", "Side quest", "Synced" or "Regular". Not
+// interactive.
 export function Tag({ tone = 'grape', className, ...rest }: TagProps) {
   const classes = [styles.tag, styles[tone], className].filter(Boolean).join(' ')
   return <span className={classes} {...rest} />