@duro-app/ui 2.0.1 → 3.0.0

package/src/components/StatusIcon/StatusIcon.stories.tsx

@@ -2,6 +2,9 @@ import type {Meta, StoryObj} from '@storybook/react'
 import {expect} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {StatusIcon} from './StatusIcon'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
 
 const meta: Meta<typeof StatusIcon> = {
   title: 'Components/StatusIcon',
@@ -47,9 +50,13 @@ export const CustomSize: Story = {
 }
 
 const gridStyles = css.create({
-  grid: {display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: 24},
-  cell: {display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8},
-  label: {fontSize: '0.875rem', color: '#888'},
+  grid: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+    gap: spacing.lg,
+  },
+  cell: {display: 'flex', flexDirection: 'column', alignItems: 'center', gap: spacing.sm},
+  label: {fontSize: typography.fontSizeSm, color: colors.textMuted},
 })
 
 export const AllIcons: Story = {
@@ -66,7 +73,7 @@ export const AllIcons: Story = {
 }
 
 const rowStyles = css.create({
-  row: {display: 'flex', gap: 24, alignItems: 'center'},
+  row: {display: 'flex', gap: spacing.lg, alignItems: 'center'},
 })
 
 export const AllVariants: Story = {

package/src/components/Switch/Switch.stories.tsx

@@ -2,6 +2,7 @@ import type {Meta, StoryObj} from '@storybook/react'
 import {expect, fn} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {Switch} from './Switch'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 
 const meta: Meta<typeof Switch> = {
   title: 'Components/Switch',
@@ -67,7 +68,7 @@ export const WithoutLabel: Story = {
 }
 
 const stackStyles = css.create({
-  stack: {display: 'flex', flexDirection: 'column', gap: 12},
+  stack: {display: 'flex', flexDirection: 'column', gap: spacing.ms},
 })
 
 export const AllVariants: Story = {

package/src/components/Table/Table.stories.tsx

@@ -27,6 +27,7 @@ import {
 import {useDataTable} from './useDataTable'
 import {Combobox} from '../Combobox/Combobox'
 import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
 
 const meta: Meta = {
   title: 'Components/Table',
@@ -326,8 +327,12 @@ export const WithCheckboxes: Story = {
 }
 
 const storyStyles = css.create({
-  stack: {display: 'flex', flexDirection: 'column', gap: 24},
-  label: {color: colors.textMuted, fontSize: '0.875rem', fontWeight: 600},
+  stack: {display: 'flex', flexDirection: 'column', gap: spacing.lg},
+  label: {
+    color: colors.textMuted,
+    fontSize: typography.fontSizeSm,
+    fontWeight: typography.fontWeightSemibold,
+  },
 })
 
 export const AllVariants: Story = {

package/src/components/Tabs/Tabs.meta.ts

@@ -21,6 +21,11 @@ export const meta: ComponentMeta = {
       kind: 'contrast',
       relationship: 'Tabs switch content in-place; SideNav navigates between pages',
     },
+    {
+      component: 'admin-detail-page',
+      kind: 'composition',
+      relationship: 'Tabs as the facets of one record is the admin-detail-page recipe',
+    },
   ],
   example: `<Tabs.Root defaultValue="general">
   <Tabs.List>

package/src/components/Tag/Tag.stories.tsx

@@ -2,6 +2,8 @@ import type {Meta, StoryObj} from '@storybook/react'
 import {expect, fn} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {Tag} from './Tag'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
 
 const meta: Meta<typeof Tag> = {
   title: 'Components/Tag',
@@ -47,10 +49,16 @@ export const Small: Story = {
 }
 
 const layoutStyles = css.create({
-  row: {display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap'},
-  stack: {display: 'flex', flexDirection: 'column', gap: 16},
+  row: {display: 'flex', alignItems: 'center', gap: spacing.sm, flexWrap: 'wrap'},
+  stack: {display: 'flex', flexDirection: 'column', gap: spacing.md},
   // Narrow column that a long identifier tag would overflow without `wrap`.
-  narrowCol: {width: 120, borderWidth: 1, borderStyle: 'solid', borderColor: '#333', padding: 8},
+  narrowCol: {
+    width: 120,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: colors.border,
+    padding: spacing.sm,
+  },
 })
 
 const LONG_CAP = 'lldap.group.member.remove'

package/src/components/Textarea/Textarea.stories.tsx

@@ -2,6 +2,7 @@ import type {Meta, StoryObj} from '@storybook/react'
 import {expect, fn} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {Textarea} from './Textarea'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 
 const meta: Meta<typeof Textarea> = {
   title: 'Components/Textarea',
@@ -59,7 +60,7 @@ export const CustomRows: Story = {
 }
 
 const stackStyles = css.create({
-  stack: {display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 320},
+  stack: {display: 'flex', flexDirection: 'column', gap: spacing.ms, maxWidth: 320},
 })
 
 export const AllVariants: Story = {

package/src/components/ThemeProvider/ThemeProvider.stories.tsx

@@ -4,7 +4,7 @@ import {expect} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {ThemeProvider, type ThemeName} from './ThemeProvider'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
-import {radii} from '@duro-app/tokens/tokens/spacing.css'
+import {radii, spacing} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
 import {shadows} from '@duro-app/tokens/tokens/shadows.css'
 
@@ -18,26 +18,26 @@ type Story = StoryObj<typeof ThemeProvider>
 
 const sampleStyles = css.create({
   container: {
-    padding: 24,
+    padding: spacing.lg,
     backgroundColor: colors.bg,
     color: colors.text,
     borderRadius: radii.md,
     fontFamily: typography.fontFamily,
   },
   card: {
-    padding: 16,
+    padding: spacing.md,
     backgroundColor: colors.bgCard,
     borderWidth: 1,
     borderStyle: 'solid',
     borderColor: colors.border,
     borderRadius: radii.md,
     boxShadow: shadows.md,
-    marginBottom: 12,
+    marginBottom: spacing.ms,
   },
   title: {
     fontSize: typography.fontSizeLg,
     fontWeight: typography.fontWeightSemibold,
-    marginBottom: 8,
+    marginBottom: spacing.sm,
   },
   muted: {
     color: colors.textMuted,
@@ -49,7 +49,7 @@ const sampleStyles = css.create({
   },
   row: {
     display: 'flex',
-    gap: 16,
+    gap: spacing.md,
     flexWrap: 'wrap',
   },
   swatch: {
@@ -126,7 +126,7 @@ export const HighContrast: Story = {
 const sideBySideStyles = css.create({
   wrapper: {
     display: 'flex',
-    gap: 24,
+    gap: spacing.lg,
     flexWrap: 'wrap',
   },
   column: {
@@ -136,8 +136,8 @@ const sideBySideStyles = css.create({
   label: {
     fontSize: typography.fontSizeSm,
     fontWeight: typography.fontWeightSemibold,
-    marginBottom: 8,
-    color: '#888',
+    marginBottom: spacing.sm,
+    color: colors.textMuted,
   },
 })
 

package/src/components/Toast/Toast.stories.tsx

@@ -2,10 +2,17 @@ import type {Meta, StoryObj} from '@storybook/react'
 import {expect, userEvent, waitFor} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {ToastProvider, useToast} from './ToastProvider'
+import {radii, spacing} from '@duro-app/tokens/tokens/spacing.css'
 
 const s = css.create({
-  row: {display: 'flex', flexDirection: 'row', gap: 8, flexWrap: 'wrap'},
-  btn: {padding: 8, borderRadius: 6, borderWidth: 1, borderStyle: 'solid', cursor: 'pointer'},
+  row: {display: 'flex', flexDirection: 'row', gap: spacing.sm, flexWrap: 'wrap'},
+  btn: {
+    padding: spacing.sm,
+    borderRadius: radii.sm,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    cursor: 'pointer',
+  },
 })
 
 function Triggers() {

package/src/components/Toggle/Toggle.stories.tsx

@@ -2,6 +2,7 @@ import type {Meta, StoryObj} from '@storybook/react'
 import {expect, fn} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {Toggle} from './Toggle'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 
 const meta: Meta<typeof Toggle> = {
   title: 'Components/Toggle',
@@ -59,7 +60,7 @@ export const Small: Story = {
 }
 
 const stackStyles = css.create({
-  stack: {display: 'flex', gap: 8},
+  stack: {display: 'flex', gap: spacing.sm},
 })
 
 export const AllVariants: Story = {

package/src/components/ToggleGroup/ToggleGroup.stories.tsx

@@ -3,6 +3,7 @@ import {expect, fn} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {ToggleGroup} from './ToggleGroup'
 import {Toggle} from '../Toggle/Toggle'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 
 const meta: Meta<typeof ToggleGroup> = {
   title: 'Components/ToggleGroup',
@@ -125,7 +126,7 @@ export const Vertical: Story = {
 }
 
 const stackStyles = css.create({
-  stack: {display: 'flex', flexDirection: 'column', gap: 16},
+  stack: {display: 'flex', flexDirection: 'column', gap: spacing.md},
 })
 
 export const AllVariants: Story = {

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -3,6 +3,7 @@ import {expect} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {Tooltip} from './Tooltip'
 import {Badge} from '../Badge/Badge'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 
 const meta: Meta = {
   title: 'Components/Tooltip',
@@ -31,8 +32,8 @@ const centerStyles = css.create({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    padding: 80,
-    gap: 24,
+    padding: spacing.xxxl,
+    gap: spacing.lg,
   },
 })
 

package/src/docs/Spacing.stories.tsx

@@ -1,11 +1,12 @@
 import type {Meta, StoryObj} from '@storybook/react'
 import {css, html} from 'react-strict-dom'
-import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {radii, spacing} from '@duro-app/tokens/tokens/spacing.css'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {Stack} from '../components/Stack/Stack'
 import {Inline} from '../components/Inline/Inline'
 import {useContainerQuery} from '../hooks/useContainerQuery'
 import {TokenTable} from './helpers'
+import {typography, typeScale} from '@duro-app/tokens/tokens/typography.css'
 
 const primitiveTokens: Record<string, string> = {
   xs: '4px',
@@ -35,7 +36,7 @@ const styles = css.create({
     maxWidth: 640,
   },
   hint: {
-    fontSize: '0.75rem',
+    fontSize: typography.fontSizeXs,
     color: colors.textMuted,
     fontStyle: 'italic',
   },
@@ -45,10 +46,10 @@ const styles = css.create({
     alignItems: 'center',
     borderBottomWidth: 1,
     borderBottomStyle: 'dashed',
-    borderBottomColor: 'rgba(0,0,0,0.1)',
+    borderBottomColor: colors.border,
   },
   baselineLabel: {
-    fontSize: '0.75rem',
+    fontSize: typography.fontSizeXs,
     fontFamily: 'monospace',
     color: colors.textMuted,
     width: 50,
@@ -58,7 +59,7 @@ const styles = css.create({
     height: 24,
     backgroundColor: colors.accent,
     opacity: 0.15,
-    borderRadius: 2,
+    borderRadius: radii.xs,
   },
   resizableContainer: {
     resize: 'horizontal',
@@ -72,25 +73,25 @@ const styles = css.create({
     width: 600,
   },
   sizeLabel: {
-    fontSize: '1.5rem',
-    fontWeight: 700,
+    fontSize: typography.fontSizeHeading,
+    fontWeight: typography.fontWeightBold,
     fontFamily: 'monospace',
   },
   sizeCompact: {
-    color: '#e67e22',
+    color: colors.warningText,
   },
   sizeDefault: {
     color: colors.accent,
   },
   sizeSpacious: {
-    color: '#27ae60',
+    color: colors.successText,
   },
   mappingRow: {
     borderBottomWidth: 1,
     borderBottomStyle: 'solid',
     borderBottomColor: colors.border,
     fontFamily: 'monospace',
-    fontSize: '0.8125rem',
+    fontSize: typeScale.fontSize2,
     paddingTop: spacing.xs,
     paddingBottom: spacing.xs,
   },
@@ -98,7 +99,7 @@ const styles = css.create({
     color: colors.textMuted,
   },
   mappingValue: {
-    fontWeight: 600,
+    fontWeight: typography.fontWeightSemibold,
   },
 })
 

package/src/docs/Typography.stories.tsx

@@ -7,6 +7,7 @@ import {Stack} from '../components/Stack/Stack'
 import {Text} from '../components/Text/Text'
 import {Heading} from '../components/Heading/Heading'
 import {TypeScaleTable} from './helpers'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
 
 const meta: Meta = {
   title: 'Foundations/Typography',
@@ -171,7 +172,7 @@ const localStyles = css.create({
     maxWidth: 720,
   },
   hint: {
-    fontSize: '0.75rem',
+    fontSize: typography.fontSizeXs,
     color: colors.textMuted,
     fontStyle: 'italic',
   },
@@ -180,7 +181,7 @@ const localStyles = css.create({
     fontSize: '0.6875rem',
     fontFamily: 'monospace',
     color: colors.textMuted,
-    marginBottom: 4,
+    marginBottom: spacing.xs,
   },
   gridContainer: {
     position: 'relative',
@@ -189,7 +190,7 @@ const localStyles = css.create({
     height: 24,
     borderBottomWidth: 1,
     borderBottomStyle: 'dashed',
-    borderBottomColor: 'rgba(0,0,0,0.08)',
+    borderBottomColor: colors.border,
   },
   gridOverlay: {
     position: 'absolute',

package/src/docs/helpers.tsx

@@ -2,17 +2,18 @@ import {css, html} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {typography, typeScale} from '@duro-app/tokens/tokens/typography.css'
 import {Table} from '../components/Table/Table'
+import {radii, spacing} from '@duro-app/tokens/tokens/spacing.css'
 
 const styles = css.create({
   bar: {
     height: 12,
-    borderRadius: 2,
+    borderRadius: radii.xs,
     backgroundColor: colors.accent,
   },
   label: {
-    fontSize: '1rem',
-    fontWeight: 600,
-    marginBottom: 4,
+    fontSize: typography.fontSizeMd,
+    fontWeight: typography.fontWeightSemibold,
+    marginBottom: spacing.xs,
   },
   mono: {
     fontFamily: 'monospace',