@bunnyapp/components 1.8.0-beta.4 → 1.8.0-beta.40

package/README.md

@@ -146,6 +146,57 @@ setFruitQueryData('123', { id: '123', name: 'Apple' });
 
 For a more complete example in the codebase, see the `useSetQuoteQueryData` hook in the `quantityChangeDrawer` module.
 
+### Styling components
+
+Components are styled through two complementary layers:
+
+1. **Ant Design tokens** — for properties that drive antd primitives (Button, Input, Card, etc.). Set globally or per-component via `ConfigProvider`. See antd's [Customize Theme docs](https://ant.design/docs/react/customize-theme) for the full token reference.
+2. **Bunny CSS classes** — custom surfaces (e.g. PlanPicker, PlanFeatures, PriceListCard) expose stable class names you can target with plain CSS.
+
+#### Antd tokens
+
+```tsx
+import { ConfigProvider } from 'antd';
+
+<ConfigProvider
+  theme={{
+    token: { colorPrimary: '#9B59B6', borderRadius: 16 },
+    components: {
+      Button: { defaultBorderColor: '#FF8C00' },
+    },
+  }}
+>
+  <Upgrade ... />
+</ConfigProvider>
+```
+
+#### Bunny CSS classes
+
+No special API — just target the class with plain CSS. Defaults live in `src/styles/*-tokens.less`.
+
+```css
+.bunny-feature-group {
+  background-color: #00E5FF;
+  border-radius: 24px;
+}
+
+.bunny-price-list-card-price-description {
+  color: #E91E63;
+  font-weight: 700;
+}
+```
+
+Currently exposed for the Upgrade component:
+
+- `.bunny-feature-group` — feature-list group surface
+- `.bunny-plan-features-feature-title-group` — group title text
+- `.bunny-plan-picker-grid-cell-divider` — divider between plan columns
+- `.bunny-plan-picker-price-list-cards` — price-list cards surface
+- `.bunny-plan-picker-checkout-bar` — checkout bar surface
+- `.bunny-price-list-card-price-description` — price description text
+
+For a live example combining both layers, see the `PrideTheme` story in `Upgrade.stories.tsx`.
+
 ### Deprecating @bunnyapp/common
 
 We are gradually deprecating `@bunnyapp/common` and moving types and enums locally to this repository. When something is moved from `@bunnyapp/common`, follow this pattern: