@fastwork/xosmoz-svelte 0.0.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +159 -0
- package/dist/assets/favicon.svg +1 -0
- package/dist/components/Button.svelte +118 -0
- package/dist/components/Button.svelte.d.ts +36 -0
- package/dist/docs/GettingStarted.mdx +190 -0
- package/dist/docs/Welcome.mdx +161 -0
- package/dist/docs/foundation/APCA.svelte +358 -0
- package/dist/docs/foundation/APCA.svelte.d.ts +18 -0
- package/dist/docs/foundation/BoxShadows.svelte +204 -0
- package/dist/docs/foundation/BoxShadows.svelte.d.ts +3 -0
- package/dist/docs/foundation/Colors.svelte +900 -0
- package/dist/docs/foundation/Colors.svelte.d.ts +3 -0
- package/dist/docs/foundation/KitchenSink.svelte +1581 -0
- package/dist/docs/foundation/KitchenSink.svelte.d.ts +18 -0
- package/dist/docs/foundation/Themes.svelte +1048 -0
- package/dist/docs/foundation/Themes.svelte.d.ts +3 -0
- package/dist/docs/foundation/Typography.svelte +622 -0
- package/dist/docs/foundation/Typography.svelte.d.ts +3 -0
- package/dist/index.d.ts +21 -0
- package/dist/index.js +21 -0
- package/dist/styles.css +25 -0
- package/dist/utils/clipboard.d.ts +31 -0
- package/dist/utils/clipboard.js +57 -0
- package/dist/utils/colorCalculations.d.ts +32 -0
- package/dist/utils/colorCalculations.js +69 -0
- package/dist/utils/themeDetection.d.ts +20 -0
- package/dist/utils/themeDetection.js +48 -0
- package/package.json +89 -0
package/README.md
ADDED
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
# @fastwork/xosmoz-svelte
|
|
2
|
+
|
|
3
|
+
Svelte 5 components for the Xosmoz design system.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @fastwork/xosmoz-svelte @fastwork/xosmoz-theme @fastwork/xosmoz-css
|
|
9
|
+
# or
|
|
10
|
+
yarn add @fastwork/xosmoz-svelte @fastwork/xosmoz-theme @fastwork/xosmoz-css
|
|
11
|
+
# or
|
|
12
|
+
pnpm add @fastwork/xosmoz-svelte @fastwork/xosmoz-theme @fastwork/xosmoz-css
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Requirements
|
|
16
|
+
|
|
17
|
+
| Package | Minimum Version |
|
|
18
|
+
|---------|-----------------|
|
|
19
|
+
| `svelte` | `^5.0.0` |
|
|
20
|
+
| `@fastwork/xosmoz-theme` | `>=0.0.33` |
|
|
21
|
+
| `@fastwork/xosmoz-css` | `>=0.0.20` |
|
|
22
|
+
|
|
23
|
+
## Usage
|
|
24
|
+
|
|
25
|
+
### 1. Import Styles
|
|
26
|
+
|
|
27
|
+
Add the required CSS to your app entry point or layout:
|
|
28
|
+
|
|
29
|
+
```svelte
|
|
30
|
+
<!-- In your +layout.svelte or app entry -->
|
|
31
|
+
<script>
|
|
32
|
+
import '@fastwork/xosmoz-svelte/styles.css';
|
|
33
|
+
</script>
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
Or import styles individually for more control:
|
|
37
|
+
|
|
38
|
+
```ts
|
|
39
|
+
import '@fastwork/xosmoz-theme/base.css';
|
|
40
|
+
import '@fastwork/xosmoz-theme/themes.css';
|
|
41
|
+
import '@fastwork/xosmoz-css/component.css';
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### 2. Set Theme
|
|
45
|
+
|
|
46
|
+
Add a `data-theme` attribute to enable theming:
|
|
47
|
+
|
|
48
|
+
```html
|
|
49
|
+
<html data-theme="light">
|
|
50
|
+
<!-- or "dark" -->
|
|
51
|
+
</html>
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### 3. Use Components
|
|
55
|
+
|
|
56
|
+
```svelte
|
|
57
|
+
<script>
|
|
58
|
+
import { Button } from '@fastwork/xosmoz-svelte';
|
|
59
|
+
</script>
|
|
60
|
+
|
|
61
|
+
<Button variant="primary" size="medium">
|
|
62
|
+
Click me
|
|
63
|
+
</Button>
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## Components
|
|
67
|
+
|
|
68
|
+
### Button
|
|
69
|
+
|
|
70
|
+
A versatile button component with multiple variants and sizes.
|
|
71
|
+
|
|
72
|
+
```svelte
|
|
73
|
+
<script>
|
|
74
|
+
import { Button } from '@fastwork/xosmoz-svelte';
|
|
75
|
+
</script>
|
|
76
|
+
|
|
77
|
+
<!-- Variants -->
|
|
78
|
+
<Button variant="primary">Primary</Button>
|
|
79
|
+
<Button variant="secondary">Secondary</Button>
|
|
80
|
+
<Button variant="outline">Outline</Button>
|
|
81
|
+
<Button variant="tertiary">Tertiary</Button>
|
|
82
|
+
<Button variant="ghost">Ghost</Button>
|
|
83
|
+
<Button variant="danger">Danger</Button>
|
|
84
|
+
<Button variant="success">Success</Button>
|
|
85
|
+
|
|
86
|
+
<!-- Sizes -->
|
|
87
|
+
<Button size="small">Small</Button>
|
|
88
|
+
<Button size="medium">Medium</Button>
|
|
89
|
+
<Button size="large">Large</Button>
|
|
90
|
+
|
|
91
|
+
<!-- States -->
|
|
92
|
+
<Button loading>Loading</Button>
|
|
93
|
+
<Button disabled>Disabled</Button>
|
|
94
|
+
|
|
95
|
+
<!-- Modifiers -->
|
|
96
|
+
<Button fluid>Full Width</Button>
|
|
97
|
+
<Button pill>Pill Shape</Button>
|
|
98
|
+
<Button square>Square</Button>
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
#### Props
|
|
102
|
+
|
|
103
|
+
| Prop | Type | Default | Description |
|
|
104
|
+
|------|------|---------|-------------|
|
|
105
|
+
| `variant` | `'primary' \| 'secondary' \| 'outline' \| 'tertiary' \| 'ghost' \| 'danger' \| 'success' \| 'white'` | `'primary'` | Button style variant |
|
|
106
|
+
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Button size |
|
|
107
|
+
| `disabled` | `boolean` | `false` | Disable the button |
|
|
108
|
+
| `loading` | `boolean` | `false` | Show loading spinner |
|
|
109
|
+
| `fluid` | `boolean` | `false` | Full width button |
|
|
110
|
+
| `pill` | `boolean` | `false` | Pill-shaped border radius |
|
|
111
|
+
| `square` | `boolean` | `false` | Square aspect ratio |
|
|
112
|
+
| `type` | `'button' \| 'submit' \| 'reset'` | `'button'` | Button type attribute |
|
|
113
|
+
|
|
114
|
+
#### Slots
|
|
115
|
+
|
|
116
|
+
| Slot | Description |
|
|
117
|
+
|------|-------------|
|
|
118
|
+
| `children` | Main button content |
|
|
119
|
+
| `startIcon` | Icon before the text |
|
|
120
|
+
| `endIcon` | Icon after the text |
|
|
121
|
+
|
|
122
|
+
---
|
|
123
|
+
|
|
124
|
+
## Development (Storybook)
|
|
125
|
+
|
|
126
|
+
### Run Storybook
|
|
127
|
+
|
|
128
|
+
```bash
|
|
129
|
+
# From monorepo root
|
|
130
|
+
yarn storybook
|
|
131
|
+
|
|
132
|
+
# Or using NX
|
|
133
|
+
nx run xosmoz-svelte:storybook
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
Opens Storybook at `http://localhost:6006`
|
|
137
|
+
|
|
138
|
+
### Build Storybook
|
|
139
|
+
|
|
140
|
+
```bash
|
|
141
|
+
yarn storybook:build
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
### Project Structure
|
|
145
|
+
|
|
146
|
+
```
|
|
147
|
+
src/
|
|
148
|
+
├── lib/
|
|
149
|
+
│ ├── components/ # Svelte components
|
|
150
|
+
│ │ ├── Button.svelte
|
|
151
|
+
│ │ └── Button.stories.ts
|
|
152
|
+
│ ├── docs/ # Documentation pages
|
|
153
|
+
│ └── index.ts # Package exports
|
|
154
|
+
└── .storybook/ # Storybook config
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
## License
|
|
158
|
+
|
|
159
|
+
MIT
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
export type ButtonVariant =
|
|
3
|
+
| 'primary'
|
|
4
|
+
| 'secondary'
|
|
5
|
+
| 'outline'
|
|
6
|
+
| 'tertiary'
|
|
7
|
+
| 'ghost'
|
|
8
|
+
| 'danger'
|
|
9
|
+
| 'success'
|
|
10
|
+
| 'white'
|
|
11
|
+
| 'white-secondary';
|
|
12
|
+
|
|
13
|
+
export type ButtonSize = 'small' | 'medium' | 'large';
|
|
14
|
+
|
|
15
|
+
export interface ButtonProps {
|
|
16
|
+
/** Button variant style */
|
|
17
|
+
variant?: ButtonVariant;
|
|
18
|
+
/** Button size */
|
|
19
|
+
size?: ButtonSize;
|
|
20
|
+
/** Whether the button is disabled */
|
|
21
|
+
disabled?: boolean;
|
|
22
|
+
/** Whether the button is in loading state */
|
|
23
|
+
loading?: boolean;
|
|
24
|
+
/** Whether the button should take full width */
|
|
25
|
+
fluid?: boolean;
|
|
26
|
+
/** Whether the button has pill-shaped border radius */
|
|
27
|
+
pill?: boolean;
|
|
28
|
+
/** Whether the button should be square (1:1 aspect ratio) */
|
|
29
|
+
square?: boolean;
|
|
30
|
+
/** Button type attribute */
|
|
31
|
+
type?: 'button' | 'submit' | 'reset';
|
|
32
|
+
/** Additional CSS classes */
|
|
33
|
+
class?: string;
|
|
34
|
+
/** Click handler */
|
|
35
|
+
onclick?: (event: MouseEvent) => void;
|
|
36
|
+
}
|
|
37
|
+
</script>
|
|
38
|
+
|
|
39
|
+
<script lang="ts">
|
|
40
|
+
import type { Snippet } from 'svelte';
|
|
41
|
+
|
|
42
|
+
interface Props extends ButtonProps {
|
|
43
|
+
/** Content before the main text */
|
|
44
|
+
startIcon?: Snippet;
|
|
45
|
+
/** Main button content */
|
|
46
|
+
children: Snippet;
|
|
47
|
+
/** Content after the main text */
|
|
48
|
+
endIcon?: Snippet;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
let {
|
|
52
|
+
variant = 'primary',
|
|
53
|
+
size = 'medium',
|
|
54
|
+
disabled = false,
|
|
55
|
+
loading = false,
|
|
56
|
+
fluid = false,
|
|
57
|
+
pill = false,
|
|
58
|
+
square = false,
|
|
59
|
+
type = 'button',
|
|
60
|
+
class: className = '',
|
|
61
|
+
onclick,
|
|
62
|
+
startIcon,
|
|
63
|
+
children,
|
|
64
|
+
endIcon
|
|
65
|
+
}: Props = $props();
|
|
66
|
+
|
|
67
|
+
const buttonClasses = $derived.by(() => {
|
|
68
|
+
const classes = ['xz-button'];
|
|
69
|
+
|
|
70
|
+
// Variant (only add class if not primary, which is the default)
|
|
71
|
+
if (variant !== 'primary') {
|
|
72
|
+
classes.push(`is-variant-${variant}`);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
// Size (only add class if not medium, which is the default)
|
|
76
|
+
if (size !== 'medium') {
|
|
77
|
+
classes.push(`is-size-${size}`);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
// States
|
|
81
|
+
if (loading) classes.push('is-loading');
|
|
82
|
+
if (disabled) classes.push('is-disabled');
|
|
83
|
+
|
|
84
|
+
// Modifiers
|
|
85
|
+
if (fluid) classes.push('is-fluid');
|
|
86
|
+
if (pill) classes.push('is-pill');
|
|
87
|
+
if (square) classes.push('is-square');
|
|
88
|
+
|
|
89
|
+
// Custom classes
|
|
90
|
+
if (className) classes.push(className);
|
|
91
|
+
|
|
92
|
+
return classes.join(' ');
|
|
93
|
+
});
|
|
94
|
+
</script>
|
|
95
|
+
|
|
96
|
+
<button
|
|
97
|
+
class={buttonClasses}
|
|
98
|
+
{type}
|
|
99
|
+
disabled={disabled || loading}
|
|
100
|
+
aria-disabled={disabled || loading}
|
|
101
|
+
aria-busy={loading}
|
|
102
|
+
{onclick}
|
|
103
|
+
>
|
|
104
|
+
{#if startIcon}
|
|
105
|
+
<span class="start-icon">
|
|
106
|
+
{@render startIcon()}
|
|
107
|
+
</span>
|
|
108
|
+
{/if}
|
|
109
|
+
<span>
|
|
110
|
+
{@render children()}
|
|
111
|
+
</span>
|
|
112
|
+
{#if endIcon}
|
|
113
|
+
<span class="end-icon">
|
|
114
|
+
{@render endIcon()}
|
|
115
|
+
</span>
|
|
116
|
+
{/if}
|
|
117
|
+
</button>
|
|
118
|
+
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'tertiary' | 'ghost' | 'danger' | 'success' | 'white' | 'white-secondary';
|
|
2
|
+
export type ButtonSize = 'small' | 'medium' | 'large';
|
|
3
|
+
export interface ButtonProps {
|
|
4
|
+
/** Button variant style */
|
|
5
|
+
variant?: ButtonVariant;
|
|
6
|
+
/** Button size */
|
|
7
|
+
size?: ButtonSize;
|
|
8
|
+
/** Whether the button is disabled */
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
/** Whether the button is in loading state */
|
|
11
|
+
loading?: boolean;
|
|
12
|
+
/** Whether the button should take full width */
|
|
13
|
+
fluid?: boolean;
|
|
14
|
+
/** Whether the button has pill-shaped border radius */
|
|
15
|
+
pill?: boolean;
|
|
16
|
+
/** Whether the button should be square (1:1 aspect ratio) */
|
|
17
|
+
square?: boolean;
|
|
18
|
+
/** Button type attribute */
|
|
19
|
+
type?: 'button' | 'submit' | 'reset';
|
|
20
|
+
/** Additional CSS classes */
|
|
21
|
+
class?: string;
|
|
22
|
+
/** Click handler */
|
|
23
|
+
onclick?: (event: MouseEvent) => void;
|
|
24
|
+
}
|
|
25
|
+
import type { Snippet } from 'svelte';
|
|
26
|
+
interface Props extends ButtonProps {
|
|
27
|
+
/** Content before the main text */
|
|
28
|
+
startIcon?: Snippet;
|
|
29
|
+
/** Main button content */
|
|
30
|
+
children: Snippet;
|
|
31
|
+
/** Content after the main text */
|
|
32
|
+
endIcon?: Snippet;
|
|
33
|
+
}
|
|
34
|
+
declare const Button: import("svelte").Component<Props, {}, "">;
|
|
35
|
+
type Button = ReturnType<typeof Button>;
|
|
36
|
+
export default Button;
|
|
@@ -0,0 +1,190 @@
|
|
|
1
|
+
import { Meta } from '@storybook/addon-docs/blocks';
|
|
2
|
+
|
|
3
|
+
<Meta title="Getting Started" />
|
|
4
|
+
|
|
5
|
+
# Getting Started with Xosmoz
|
|
6
|
+
|
|
7
|
+
This guide will walk you through installing and using Xosmoz in your project. You'll learn how to set up themes, use color tokens, and implement theme switching.
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## Installation
|
|
12
|
+
|
|
13
|
+
Install the Xosmoz theme package using your preferred package manager:
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
# npm
|
|
17
|
+
npm install @fastwork/xosmoz-theme
|
|
18
|
+
|
|
19
|
+
# yarn
|
|
20
|
+
yarn add @fastwork/xosmoz-theme
|
|
21
|
+
|
|
22
|
+
# pnpm
|
|
23
|
+
pnpm add @fastwork/xosmoz-theme
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
---
|
|
27
|
+
|
|
28
|
+
## Quick Setup
|
|
29
|
+
|
|
30
|
+
### Step 1: Import CSS
|
|
31
|
+
|
|
32
|
+
Add the Xosmoz CSS to your application entry point (e.g., `main.js`, `main.ts`, or `App.jsx`):
|
|
33
|
+
|
|
34
|
+
```javascript
|
|
35
|
+
// Import base styles and non-color tokens
|
|
36
|
+
import '@fastwork/xosmoz-theme/base.css';
|
|
37
|
+
|
|
38
|
+
// Import theme colors (includes light and dark)
|
|
39
|
+
import '@fastwork/xosmoz-theme/themes.css';
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### Step 2: Set the Theme
|
|
43
|
+
|
|
44
|
+
Apply a theme by setting the `data-theme` attribute on your root HTML element:
|
|
45
|
+
|
|
46
|
+
```html
|
|
47
|
+
<!DOCTYPE html>
|
|
48
|
+
<html data-theme="light">
|
|
49
|
+
<head>
|
|
50
|
+
<title>My App</title>
|
|
51
|
+
</head>
|
|
52
|
+
<body>
|
|
53
|
+
<!-- Your app content -->
|
|
54
|
+
</body>
|
|
55
|
+
</html>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
**Available themes:**
|
|
59
|
+
- `light` - Clean, modern light theme (default)
|
|
60
|
+
- `dark` - Elegant dark theme
|
|
61
|
+
|
|
62
|
+
### Step 3: Use Color Tokens
|
|
63
|
+
|
|
64
|
+
Now you can use Xosmoz design tokens in your CSS:
|
|
65
|
+
|
|
66
|
+
```css
|
|
67
|
+
.button {
|
|
68
|
+
background: var(--xz-color-primary-bg-100);
|
|
69
|
+
color: var(--xz-color-primary-fg);
|
|
70
|
+
}
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
That's it! Your app now has theme support with semantic color tokens.
|
|
74
|
+
|
|
75
|
+
---
|
|
76
|
+
|
|
77
|
+
## Understanding Color Tokens
|
|
78
|
+
|
|
79
|
+
Xosmoz organizes colors into two main groups:
|
|
80
|
+
|
|
81
|
+
### Base Colors (Theme-Agnostic)
|
|
82
|
+
|
|
83
|
+
These colors adapt automatically to the active theme:
|
|
84
|
+
|
|
85
|
+
**Backgrounds:**
|
|
86
|
+
```css
|
|
87
|
+
var(--xz-color-bg-100) /* Primary app background */
|
|
88
|
+
var(--xz-color-bg-200) /* Secondary surface (cards, modals) */
|
|
89
|
+
var(--xz-color-bg-300) /* Tertiary surface (headers, sidebars) */
|
|
90
|
+
var(--xz-color-bg-400) /* Elevated surface (popovers, tooltips) */
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
**Text/Content:**
|
|
94
|
+
```css
|
|
95
|
+
var(--xz-color-content-100) /* Primary text */
|
|
96
|
+
var(--xz-color-content-200) /* Secondary text (60% opacity) */
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
**Lines/Borders:**
|
|
100
|
+
```css
|
|
101
|
+
var(--xz-color-line-100) /* Subtle dividers (10% opacity) */
|
|
102
|
+
var(--xz-color-line-200) /* Standard borders (20% opacity) */
|
|
103
|
+
var(--xz-color-line-300) /* Strong borders (30% opacity) */
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
### Semantic Colors (Purpose-Driven)
|
|
107
|
+
|
|
108
|
+
These colors convey meaning and intent:
|
|
109
|
+
|
|
110
|
+
- **primary** - Brand actions, links, key UI elements
|
|
111
|
+
- **danger** - Errors, delete actions, critical warnings
|
|
112
|
+
- **success** - Confirmations, positive actions, completed states
|
|
113
|
+
- **warning** - Cautions, important alerts, pending states
|
|
114
|
+
- **info** - Informational messages, tips, neutral feedback
|
|
115
|
+
|
|
116
|
+
Each semantic color has **5 variants**:
|
|
117
|
+
|
|
118
|
+
```css
|
|
119
|
+
/* Example: Primary color variants */
|
|
120
|
+
var(--xz-color-primary-soft-100) /* Light background tint */
|
|
121
|
+
var(--xz-color-primary-line-200) /* Border color */
|
|
122
|
+
var(--xz-color-primary-bg-100) /* Solid button background */
|
|
123
|
+
var(--xz-color-primary-content-100) /* Text color */
|
|
124
|
+
var(--xz-color-primary-fg) /* Text on solid background (white) */
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
**Scale System:**
|
|
128
|
+
- `.soft` variants: 100 (subtle), 200 (medium), 300 (strong)
|
|
129
|
+
- `.line` variants: 100 (subtle), 200 (standard), 300 (prominent)
|
|
130
|
+
- `.bg` variants: 100 (normal), 200 (hover/darker)
|
|
131
|
+
- `.content` variants: 100 (primary), 200 (emphasized)
|
|
132
|
+
- `.fg` - Foreground text on solid backgrounds
|
|
133
|
+
|
|
134
|
+
## Next Steps
|
|
135
|
+
|
|
136
|
+
Now that you have Xosmoz set up, explore the Foundation section to learn more:
|
|
137
|
+
|
|
138
|
+
### 📚 Explore the Documentation
|
|
139
|
+
|
|
140
|
+
<div style={{
|
|
141
|
+
display: 'grid',
|
|
142
|
+
gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
|
|
143
|
+
gap: '1rem',
|
|
144
|
+
margin: '2rem 0',
|
|
145
|
+
}}>
|
|
146
|
+
<div style={{
|
|
147
|
+
padding: '1.5rem',
|
|
148
|
+
background: 'var(--xz-color-bg-200)',
|
|
149
|
+
border: '1px solid var(--xz-color-line-100)',
|
|
150
|
+
borderRadius: 'var(--xz-radius-md)',
|
|
151
|
+
}}>
|
|
152
|
+
<h4 style={{ marginTop: 0, color: 'var(--xz-color-content-100)' }}>Foundation / Colors</h4>
|
|
153
|
+
<p style={{ color: 'var(--xz-color-content-200)', fontSize: '0.875rem', marginBottom: '1rem' }}>
|
|
154
|
+
Browse the complete color palette with 10-step scales for each color family.
|
|
155
|
+
</p>
|
|
156
|
+
<a href="/?path=/docs/foundation-colors--docs" style={{ color: 'var(--xz-color-primary-content-100)', textDecoration: 'none', fontWeight: 600, fontSize: '0.875rem' }}>
|
|
157
|
+
View Colors →
|
|
158
|
+
</a>
|
|
159
|
+
</div>
|
|
160
|
+
|
|
161
|
+
<div style={{
|
|
162
|
+
padding: '1.5rem',
|
|
163
|
+
background: 'var(--xz-color-bg-200)',
|
|
164
|
+
border: '1px solid var(--xz-color-line-100)',
|
|
165
|
+
borderRadius: 'var(--xz-radius-md)',
|
|
166
|
+
}}>
|
|
167
|
+
<h4 style={{ marginTop: 0, color: 'var(--xz-color-content-100)' }}>Foundation / Themes</h4>
|
|
168
|
+
<p style={{ color: 'var(--xz-color-content-200)', fontSize: '0.875rem', marginBottom: '1rem' }}>
|
|
169
|
+
See all semantic color tokens and their usage across light and dark themes.
|
|
170
|
+
</p>
|
|
171
|
+
<a href="/?path=/docs/foundation-themes--docs" style={{ color: 'var(--xz-color-primary-content-100)', textDecoration: 'none', fontWeight: 600, fontSize: '0.875rem' }}>
|
|
172
|
+
View Themes →
|
|
173
|
+
</a>
|
|
174
|
+
</div>
|
|
175
|
+
|
|
176
|
+
<div style={{
|
|
177
|
+
padding: '1.5rem',
|
|
178
|
+
background: 'var(--xz-color-bg-200)',
|
|
179
|
+
border: '1px solid var(--xz-color-line-100)',
|
|
180
|
+
borderRadius: 'var(--xz-radius-md)',
|
|
181
|
+
}}>
|
|
182
|
+
<h4 style={{ marginTop: 0, color: 'var(--xz-color-content-100)' }}>Foundation / APCA Contrast</h4>
|
|
183
|
+
<p style={{ color: 'var(--xz-color-content-200)', fontSize: '0.875rem', marginBottom: '1rem' }}>
|
|
184
|
+
Learn about accessibility standards and contrast guidelines.
|
|
185
|
+
</p>
|
|
186
|
+
<a href="/?path=/docs/foundation-apca-contrast--docs" style={{ color: 'var(--xz-color-primary-content-100)', textDecoration: 'none', fontWeight: 600, fontSize: '0.875rem' }}>
|
|
187
|
+
View APCA →
|
|
188
|
+
</a>
|
|
189
|
+
</div>
|
|
190
|
+
</div>
|
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
import { Meta } from '@storybook/addon-docs/blocks';
|
|
2
|
+
|
|
3
|
+
<Meta title="Welcome" />
|
|
4
|
+
|
|
5
|
+
<div style={{
|
|
6
|
+
padding: '3rem 0',
|
|
7
|
+
textAlign: 'center',
|
|
8
|
+
fontFamily: 'var(--xz-font-family-primary)',
|
|
9
|
+
}}>
|
|
10
|
+
<h1 style={{
|
|
11
|
+
fontSize: '3rem',
|
|
12
|
+
fontWeight: 'bold',
|
|
13
|
+
marginBottom: '1rem',
|
|
14
|
+
color: 'var(--xz-color-content-100)',
|
|
15
|
+
}}>
|
|
16
|
+
Xosmoz Design System
|
|
17
|
+
</h1>
|
|
18
|
+
|
|
19
|
+
<p style={{
|
|
20
|
+
fontSize: '1.25rem',
|
|
21
|
+
color: 'var(--xz-color-content-200)',
|
|
22
|
+
marginBottom: '2rem',
|
|
23
|
+
maxWidth: '700px',
|
|
24
|
+
margin: '0 auto 2rem',
|
|
25
|
+
lineHeight: '1.6',
|
|
26
|
+
}}>
|
|
27
|
+
A modern design system with semantic color tokens, built-in themes, and seamless dark mode support. Built for developers who value simplicity and accessibility.
|
|
28
|
+
</p>
|
|
29
|
+
</div>
|
|
30
|
+
|
|
31
|
+
## ✨ Key Features
|
|
32
|
+
|
|
33
|
+
<div style={{
|
|
34
|
+
display: 'grid',
|
|
35
|
+
gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
|
|
36
|
+
gap: '1.5rem',
|
|
37
|
+
margin: '2rem 0 3rem',
|
|
38
|
+
}}>
|
|
39
|
+
<div style={{
|
|
40
|
+
padding: '1.5rem',
|
|
41
|
+
background: 'var(--xz-color-bg-200)',
|
|
42
|
+
border: '1px solid var(--xz-color-line-100)',
|
|
43
|
+
borderRadius: 'var(--xz-radius-md)',
|
|
44
|
+
}}>
|
|
45
|
+
<h3 style={{ fontSize: '1.125rem', marginBottom: '0.75rem', color: 'var(--xz-color-content-100)' }}>🎨 Semantic Colors</h3>
|
|
46
|
+
<p style={{ color: 'var(--xz-color-content-200)', margin: 0, fontSize: '0.9375rem', lineHeight: '1.5' }}>
|
|
47
|
+
Purpose-driven color tokens for primary actions, success states, warnings, errors, and more. Design with intent, not just colors.
|
|
48
|
+
</p>
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
<div style={{
|
|
52
|
+
padding: '1.5rem',
|
|
53
|
+
background: 'var(--xz-color-bg-200)',
|
|
54
|
+
border: '1px solid var(--xz-color-line-100)',
|
|
55
|
+
borderRadius: 'var(--xz-radius-md)',
|
|
56
|
+
}}>
|
|
57
|
+
<h3 style={{ fontSize: '1.125rem', marginBottom: '0.75rem', color: 'var(--xz-color-content-100)' }}>🌓 Built-in Themes</h3>
|
|
58
|
+
<p style={{ color: 'var(--xz-color-content-200)', margin: 0, fontSize: '0.9375rem', lineHeight: '1.5' }}>
|
|
59
|
+
Light and dark themes out of the box. Switch instantly with a single attribute change. No CSS rewrites needed.
|
|
60
|
+
</p>
|
|
61
|
+
</div>
|
|
62
|
+
|
|
63
|
+
<div style={{
|
|
64
|
+
padding: '1.5rem',
|
|
65
|
+
background: 'var(--xz-color-bg-200)',
|
|
66
|
+
border: '1px solid var(--xz-color-line-100)',
|
|
67
|
+
borderRadius: 'var(--xz-radius-md)',
|
|
68
|
+
}}>
|
|
69
|
+
<h3 style={{ fontSize: '1.125rem', marginBottom: '0.75rem', color: 'var(--xz-color-content-100)' }}>🎯 CSS Variables</h3>
|
|
70
|
+
<p style={{ color: 'var(--xz-color-content-200)', margin: 0, fontSize: '0.9375rem', lineHeight: '1.5' }}>
|
|
71
|
+
Use design tokens with CSS custom properties. Theme-aware styling that updates automatically when users switch themes.
|
|
72
|
+
</p>
|
|
73
|
+
</div>
|
|
74
|
+
|
|
75
|
+
<div style={{
|
|
76
|
+
padding: '1.5rem',
|
|
77
|
+
background: 'var(--xz-color-bg-200)',
|
|
78
|
+
border: '1px solid var(--xz-color-line-100)',
|
|
79
|
+
borderRadius: 'var(--xz-radius-md)',
|
|
80
|
+
}}>
|
|
81
|
+
<h3 style={{ fontSize: '1.125rem', marginBottom: '0.75rem', color: 'var(--xz-color-content-100)' }}>📦 Framework Agnostic</h3>
|
|
82
|
+
<p style={{ color: 'var(--xz-color-content-200)', margin: 0, fontSize: '0.9375rem', lineHeight: '1.5' }}>
|
|
83
|
+
Works with React, Vue, Svelte, or vanilla JavaScript. Use it anywhere, however you build.
|
|
84
|
+
</p>
|
|
85
|
+
</div>
|
|
86
|
+
|
|
87
|
+
<div style={{
|
|
88
|
+
padding: '1.5rem',
|
|
89
|
+
background: 'var(--xz-color-bg-200)',
|
|
90
|
+
border: '1px solid var(--xz-color-line-100)',
|
|
91
|
+
borderRadius: 'var(--xz-radius-md)',
|
|
92
|
+
}}>
|
|
93
|
+
<h3 style={{ fontSize: '1.125rem', marginBottom: '0.75rem', color: 'var(--xz-color-content-100)' }}>🔧 TypeScript Support</h3>
|
|
94
|
+
<p style={{ color: 'var(--xz-color-content-200)', margin: 0, fontSize: '0.9375rem', lineHeight: '1.5' }}>
|
|
95
|
+
Fully typed theme objects with autocomplete. Access any color, spacing, or token programmatically with confidence.
|
|
96
|
+
</p>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
|
|
100
|
+
## 📚 What's Inside
|
|
101
|
+
|
|
102
|
+
<div style={{
|
|
103
|
+
display: 'grid',
|
|
104
|
+
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
|
|
105
|
+
gap: '1.5rem',
|
|
106
|
+
margin: '2rem 0',
|
|
107
|
+
}}>
|
|
108
|
+
<div style={{
|
|
109
|
+
padding: '1.5rem',
|
|
110
|
+
background: 'var(--xz-color-bg-100)',
|
|
111
|
+
border: '1px solid var(--xz-color-line-200)',
|
|
112
|
+
borderRadius: 'var(--xz-radius-md)',
|
|
113
|
+
}}>
|
|
114
|
+
<h3 style={{ fontSize: '1.125rem', marginBottom: '0.5rem', color: 'var(--xz-color-primary-content-100)' }}>Foundation / Colors</h3>
|
|
115
|
+
<p style={{ color: 'var(--xz-color-content-200)', margin: '0 0 1rem', fontSize: '0.9375rem', lineHeight: '1.5' }}>
|
|
116
|
+
Explore the complete color palette with 10-step scales for each color family. See how colors adapt across themes.
|
|
117
|
+
</p>
|
|
118
|
+
<a
|
|
119
|
+
href="/?path=/docs/foundation-colors--docs"
|
|
120
|
+
style={{ color: 'var(--xz-color-primary-content-100)', textDecoration: 'none', fontSize: '0.875rem', fontWeight: 600 }}
|
|
121
|
+
>
|
|
122
|
+
View Colors →
|
|
123
|
+
</a>
|
|
124
|
+
</div>
|
|
125
|
+
|
|
126
|
+
<div style={{
|
|
127
|
+
padding: '1.5rem',
|
|
128
|
+
background: 'var(--xz-color-bg-100)',
|
|
129
|
+
border: '1px solid var(--xz-color-line-200)',
|
|
130
|
+
borderRadius: 'var(--xz-radius-md)',
|
|
131
|
+
}}>
|
|
132
|
+
<h3 style={{ fontSize: '1.125rem', marginBottom: '0.5rem', color: 'var(--xz-color-primary-content-100)' }}>Foundation / Themes</h3>
|
|
133
|
+
<p style={{ color: 'var(--xz-color-content-200)', margin: '0 0 1rem', fontSize: '0.9375rem', lineHeight: '1.5' }}>
|
|
134
|
+
Learn about semantic color tokens and how to implement theme switching in your application.
|
|
135
|
+
</p>
|
|
136
|
+
<a
|
|
137
|
+
href="/?path=/docs/foundation-themes--docs"
|
|
138
|
+
style={{ color: 'var(--xz-color-primary-content-100)', textDecoration: 'none', fontSize: '0.875rem', fontWeight: 600 }}
|
|
139
|
+
>
|
|
140
|
+
View Themes →
|
|
141
|
+
</a>
|
|
142
|
+
</div>
|
|
143
|
+
|
|
144
|
+
<div style={{
|
|
145
|
+
padding: '1.5rem',
|
|
146
|
+
background: 'var(--xz-color-bg-100)',
|
|
147
|
+
border: '1px solid var(--xz-color-line-200)',
|
|
148
|
+
borderRadius: 'var(--xz-radius-md)',
|
|
149
|
+
}}>
|
|
150
|
+
<h3 style={{ fontSize: '1.125rem', marginBottom: '0.5rem', color: 'var(--xz-color-primary-content-100)' }}>Foundation / APCA Contrast</h3>
|
|
151
|
+
<p style={{ color: 'var(--xz-color-content-200)', margin: '0 0 1rem', fontSize: '0.9375rem', lineHeight: '1.5' }}>
|
|
152
|
+
Understand how Xosmoz ensures accessibility with modern contrast standards and guidelines.
|
|
153
|
+
</p>
|
|
154
|
+
<a
|
|
155
|
+
href="/?path=/docs/foundation-apca-contrast--docs"
|
|
156
|
+
style={{ color: 'var(--xz-color-primary-content-100)', textDecoration: 'none', fontSize: '0.875rem', fontWeight: 600 }}
|
|
157
|
+
>
|
|
158
|
+
View APCA →
|
|
159
|
+
</a>
|
|
160
|
+
</div>
|
|
161
|
+
</div>
|