feat(react-cap-theme): introduce style hook to specifically opt into border radius updates (#662)

Co-authored-by: David Zukowski <6439050+davezuko@users.noreply.github.com>

Author: dvdzkwsk

change/@fluentui-contrib-react-cap-theme-9ae06b97-135d-45f6-b610-30ca8ac5e4dc.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Introduce CAP_STYLE_HOOKS_ROUNDED_CORNERS",
+  "packageName": "@fluentui-contrib/react-cap-theme",
+  "email": "6439050+davezuko@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-cap-theme/.storybook/docs.css

@@ -0,0 +1,11 @@
+/*
+ * Constrain the docs reading column to a comfortable width and center it.
+ * The shared docs CSS sets `.sbdocs-content` to max-width: 1200px; this
+ * package-scoped override narrows it and centers the column. The extra class in
+ * the selector raises specificity so it wins regardless of stylesheet order.
+ */
+#storybook-docs .sbdocs.sbdocs-content {
+  max-width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+}

packages/react-cap-theme/.storybook/main.ts

@@ -5,7 +5,10 @@ import rootConfig from '../../../.storybook/main';
 const config: StorybookConfig = {
   ...rootConfig,
   addons: [...(rootConfig.addons ?? []), 'storybook-addon-pseudo-states'],
-  stories: ['../stories/**/index.stories.@(js|jsx|ts|tsx|mdx)'],
+  stories: [
+    '../stories/**/index.stories.@(js|jsx|ts|tsx)',
+    '../stories/**/index.mdx',
+  ],
 };
 
 export default config;

packages/react-cap-theme/.storybook/preview.tsx

@@ -1,29 +1,15 @@
 import * as React from 'react';
 import rootPreview from '../../../.storybook/preview';
-import {
-  FluentProvider,
-  Theme,
-  webLightTheme,
-} from '@fluentui/react-components';
-import { CAP_STYLE_HOOKS } from '../src/index';
+import { FluentProvider, webLightTheme } from '@fluentui/react-components';
+import { CAP_STYLE_HOOKS, CAP_THEME_TOKENS } from '../src/index';
 import type { JSXElement } from '@fluentui/react-utilities';
 
 import type { Preview, StoryFn } from '@storybook/react';
-import { CAPTokens } from '../src/components/tokens/types';
 
-const capTheme: Record<keyof Theme & keyof CAPTokens, string> = {
-  ...webLightTheme,
-  borderRadius2XLarge: '12px',
-  borderRadius3XLarge: '16px',
-  borderRadius4XLarge: '24px',
-  colorNeutralStroke4: '#ebebeb',
-  colorNeutralStroke4Hover: '#e0e0e0',
-  colorNeutralStroke4Pressed: '#d6d6d6',
-  colorNeutralStroke4Selected: '#ebebeb',
-  colorNeutralForeground5: '#616161',
-  colorNeutralForeground5Hover: '#242424',
-  colorNeutralForeground5Pressed: '#242424',
-};
+// Imported after `rootPreview` so this package's docs overrides win.
+import './docs.css';
+
+const capTheme = { ...webLightTheme, ...CAP_THEME_TOKENS };
 
 const preview: Preview = {
   ...rootPreview,
@@ -37,6 +23,26 @@ const preview: Preview = {
       </FluentProvider>
     ),
   ],
+  parameters: {
+    ...rootPreview.parameters,
+    options: {
+      storySort: {
+        order: [
+          'Packages',
+          [
+            'react-cap-theme',
+            [
+              'Getting Started',
+              'Design Language',
+              ['Overview', 'Rounded Corners'],
+              'Components',
+              '*',
+            ],
+          ],
+        ],
+      },
+    },
+  },
   tags: ['autodocs'],
 };
 

packages/react-cap-theme/src/components/tokens/index.ts

@@ -1 +1 @@
-export { capTokens } from './tokens';
+export { capTokens, CAP_THEME_TOKENS } from './tokens';

packages/react-cap-theme/src/components/tokens/tokens.ts

@@ -1,14 +1,40 @@
 import { CAPTokens } from './types';
 
-export const capTokens: Record<keyof CAPTokens, string> = {
-  borderRadius2XLarge: 'var(--borderRadius2XLarge)',
-  borderRadius3XLarge: 'var(--borderRadius3XLarge)',
-  borderRadius4XLarge: 'var(--borderRadius4XLarge)',
-  colorNeutralStroke4: 'var(--colorNeutralStroke4)',
-  colorNeutralStroke4Hover: 'var(--colorNeutralStroke4Hover)',
-  colorNeutralStroke4Pressed: 'var(--colorNeutralStroke4Pressed)',
-  colorNeutralStroke4Selected: 'var(--colorNeutralStroke4Selected)',
-  colorNeutralForeground5: 'var(--colorNeutralForeground5)',
-  colorNeutralForeground5Hover: 'var(--colorNeutralForeground5Hover)',
-  colorNeutralForeground5Pressed: 'var(--colorNeutralForeground5Pressed)',
+/**
+ * Default values for the CAP-specific design tokens (the ones Fluent v9 doesn't
+ * ship yet). These defaults are baked into the CAP style hooks (see `capTokens`)
+ * as CSS-variable fallbacks, so consumers don't have to set them by default.
+ *
+ * Override a value by defining the matching theme token on your `FluentProvider`
+ * theme — that emits the CSS variable, which takes precedence over the fallback.
+ * To override several at once, spread these onto your base theme:
+ *
+ * ```tsx
+ * const capTheme = { ...webLightTheme, ...CAP_THEME_TOKENS };
+ * ```
+ */
+export const CAP_THEME_TOKENS: Record<keyof CAPTokens, string> = {
+  borderRadius2XLarge: '12px',
+  borderRadius3XLarge: '16px',
+  borderRadius4XLarge: '24px',
+  colorNeutralStroke4: '#ebebeb',
+  colorNeutralStroke4Hover: '#e0e0e0',
+  colorNeutralStroke4Pressed: '#d6d6d6',
+  colorNeutralStroke4Selected: '#ebebeb',
+  colorNeutralForeground5: '#616161',
+  colorNeutralForeground5Hover: '#242424',
+  colorNeutralForeground5Pressed: '#242424',
 };
+
+/**
+ * The CAP tokens as CSS-variable references for use inside style hooks. Each one
+ * carries its {@link CAP_THEME_TOKENS} default as a fallback, so the hooks work
+ * even when the consumer hasn't defined the token on their theme; defining it
+ * (e.g. via `CAP_THEME_TOKENS`) overrides the fallback.
+ */
+export const capTokens: Record<keyof CAPTokens, string> = Object.fromEntries(
+  (Object.keys(CAP_THEME_TOKENS) as (keyof CAPTokens)[]).map((key) => [
+    key,
+    `var(--${key}, ${CAP_THEME_TOKENS[key]})`,
+  ])
+) as Record<keyof CAPTokens, string>;