Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@ You can find the Storybook with an example for every component in this library [
### How to use Faency

```sh
npm install @traefiklabs/faency@next
npm install @traefik-labs/faency@next

# or

yarn add @traefiklabs/faency@next
yarn add @traefik-labs/faency@next
```

#### Using Stitches Components (Current)
Expand All @@ -27,15 +27,15 @@ Wire up the FaencyProvider which will hold the context with the Theme configurat
> The provider accepts one parameter besides the `children`, which is the `primaryColor`, that will be used to build the colors used on the Theme. This color can be one of the colors exported by the `Stitches` config, just by adding `$` as a prefix, or can be any string that represents a CSS color.

```jsx
import { FaencyProvider } from '@traefiklabs/faency';
import { FaencyProvider } from '@traefik-labs/faency';

const App = () => <FaencyProvider primaryColor="$blue8">{/* your app */}</FaencyProvider>;
```

Then you are ready to import components and use them on your project:

```jsx
import { Flex, styled } from '@traefiklabs/faency';
import { Flex, styled } from '@traefik-labs/faency';

const Container = styled(Flex, {
padding: '$3',
Expand All @@ -53,14 +53,14 @@ For better performance with static CSS, use the new Vanilla Extract components:
1. Import the CSS file in your app's entry point:

```jsx
import '@traefiklabs/faency/dist/style.css';
import '@traefik-labs/faency/dist/style.css';
```

2. Wrap your app with the VanillaExtractThemeProvider:

```jsx
import { VanillaExtractThemeProvider } from '@traefiklabs/faency';
import { BoxVanilla, BadgeVanilla } from '@traefiklabs/faency';
import { VanillaExtractThemeProvider } from '@traefik-labs/faency';
import { BoxVanilla, BadgeVanilla } from '@traefik-labs/faency';

const App = () => (
<VanillaExtractThemeProvider defaultTheme="light" primaryColor="blue">
Expand Down
44 changes: 22 additions & 22 deletions USER_GUIDE.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,10 @@ Install Faency via npm or yarn:

```bash
# npm
npm install @traefiklabs/faency
npm install @traefik-labs/faency

# yarn
yarn add @traefiklabs/faency
yarn add @traefik-labs/faency
```

### Peer Dependencies
Expand All @@ -46,8 +46,8 @@ Wrap your application with the `FaencyProvider`:

```tsx
import React from 'react';
import { FaencyProvider } from '@traefiklabs/faency';
import { Button, Box, Text } from '@traefiklabs/faency';
import { FaencyProvider } from '@traefik-labs/faency';
import { Button, Box, Text } from '@traefik-labs/faency';

function App() {
return (
Expand All @@ -69,9 +69,9 @@ For Vanilla Extract components, import the CSS file and use the `VanillaExtractT

```tsx
import React from 'react';
import '@traefiklabs/faency/dist/style.css'; // Required for Vanilla Extract components
import { VanillaExtractThemeProvider } from '@traefiklabs/faency';
import { BoxVanilla, BadgeVanilla } from '@traefiklabs/faency';
import '@traefik-labs/faency/dist/style.css'; // Required for Vanilla Extract components
import { VanillaExtractThemeProvider } from '@traefik-labs/faency';
import { BoxVanilla, BadgeVanilla } from '@traefik-labs/faency';

function App() {
return (
Expand All @@ -97,7 +97,7 @@ Stitches components use runtime CSS-in-JS, so no separate CSS imports are needed
Vanilla Extract components require importing the static CSS file. Add this import to your application's entry point (e.g., `App.tsx` or `index.tsx`):

```tsx
import '@traefiklabs/faency/dist/style.css';
import '@traefik-labs/faency/dist/style.css';
```

This CSS file contains all the styles for Vanilla Extract components (components with `Vanilla` suffix like `BadgeVanilla`, `BoxVanilla`, etc.). Without this import, these components will render as unstyled elements.
Expand All @@ -119,7 +119,7 @@ Faency includes a powerful theming system with support for light/dark modes and
For more control over theming, use the new Vanilla Extract theme provider:

```tsx
import { VanillaExtractThemeProvider } from '@traefiklabs/faency';
import { VanillaExtractThemeProvider } from '@traefik-labs/faency';

function App() {
return (
Expand Down Expand Up @@ -151,7 +151,7 @@ Faency supports 7 primary color themes:
#### With Vanilla Extract Provider

```tsx
import { VanillaExtractThemeProvider } from '@traefiklabs/faency';
import { VanillaExtractThemeProvider } from '@traefik-labs/faency';

function App() {
return (
Expand All @@ -167,7 +167,7 @@ function App() {
Access and control the theme using the `useVanillaExtractTheme` hook:

```tsx
import { useVanillaExtractTheme } from '@traefiklabs/faency';
import { useVanillaExtractTheme } from '@traefik-labs/faency';

function ThemeToggle() {
const { mode, resolvedTheme, primaryColor, setMode, setPrimaryColor } = useVanillaExtractTheme();
Expand Down Expand Up @@ -220,18 +220,18 @@ function ThemeToggle() {

```tsx
// Import individual components
import { Button, Box, Text, Input, Badge } from '@traefiklabs/faency';
import { Button, Box, Text, Input, Badge } from '@traefik-labs/faency';

// Or import everything
import * as Faency from '@traefiklabs/faency';
import * as Faency from '@traefik-labs/faency';
```

### Basic Component Usage

#### Button

```tsx
import { Button } from '@traefiklabs/faency';
import { Button } from '@traefik-labs/faency';

<Button variant="primary" size="medium">
Click Me
Expand All @@ -247,7 +247,7 @@ import { Button } from '@traefiklabs/faency';
#### Box (Layout Container)

```tsx
import { Box } from '@traefiklabs/faency';
import { Box } from '@traefik-labs/faency';

<Box css={{ p: '$4', bc: '$blue4', br: '$2' }}>Content goes here</Box>;
```
Expand All @@ -257,7 +257,7 @@ The Box component is a flexible container for layouts. Use it with the `css` pro
#### Text

```tsx
import { Text } from '@traefiklabs/faency';
import { Text } from '@traefik-labs/faency';

<Text size="4" css={{ c: '$blue11' }}>
Styled text content
Expand Down Expand Up @@ -441,7 +441,7 @@ Faency is built with TypeScript and provides full type definitions.
All component props are fully typed:

```tsx
import { Button } from '@traefiklabs/faency';
import { Button } from '@traefik-labs/faency';
import type { ComponentProps } from 'react';

// Get the prop types
Expand All @@ -455,7 +455,7 @@ function MyButton(props: ButtonProps) {
### CSS Prop Types

```tsx
import type { CSSProps } from '@traefiklabs/faency';
import type { CSSProps } from '@traefik-labs/faency';

interface MyComponentProps extends CSSProps {
label: string;
Expand All @@ -469,7 +469,7 @@ function MyComponent({ label, css }: MyComponentProps) {
### Theme Types

```tsx
import type { PrimaryColor, ThemeMode } from '@traefiklabs/faency';
import type { PrimaryColor, ThemeMode } from '@traefik-labs/faency';

const primaryColor: PrimaryColor = 'blue';
const themeMode: ThemeMode = 'light';
Expand Down Expand Up @@ -552,7 +552,7 @@ Use Box for layout composition:
For new projects, use the Vanilla Extract components (when available) for better performance:

```tsx
import { BoxVanilla } from '@traefiklabs/faency';
import { BoxVanilla } from '@traefik-labs/faency';

// Better performance with static CSS
<BoxVanilla css={{ p: '$4' }}>Content</BoxVanilla>;
Expand All @@ -573,7 +573,7 @@ import {
Button,
Text,
Badge,
} from '@traefiklabs/faency';
} from '@traefik-labs/faency';

function ThemeControls() {
const { resolvedTheme, setMode, primaryColor, setPrimaryColor } = useVanillaExtractTheme();
Expand Down Expand Up @@ -642,6 +642,6 @@ export default App;
## Additional Resources

- [Component Documentation](https://storybook.traefik.io/faency) - Interactive component examples
- [GitHub Repository](https://github.com/traefiklabs/faency) - Source code and issues
- [GitHub Repository](https://github.com/traefik/faency) - Source code and issues
- [Vanilla Extract Migration Guide](./VANILLA_EXTRACT_DEVELOPER_GUIDE.md) - For contributors
- [Project Guidelines](./CLAUDE.md) - Development guidelines
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "@traefiklabs/faency",
"name": "@traefik-labs/faency",
"description": "Traefik Labs design system",
"version": "1.0.0-semantic-release",
"license": "Apache-2.0",
Expand Down
4 changes: 2 additions & 2 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -5743,9 +5743,9 @@ __metadata:
languageName: node
linkType: hard

"@traefiklabs/faency@workspace:.":
"@traefik-labs/faency@workspace:.":
version: 0.0.0-use.local
resolution: "@traefiklabs/faency@workspace:."
resolution: "@traefik-labs/faency@workspace:."
dependencies:
"@babel/core": "npm:^7.15.4"
"@babel/plugin-transform-react-pure-annotations": "npm:^7.16.7"
Expand Down