@ambita/design-system 6.0.1-171.0 → 6.0.1-191.0
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 +38 -16
- package/dist/ds.cjs +3 -3
- package/dist/ds.js +2276 -2238
- package/dist/ds.umd.cjs +4 -4
- package/dist/types/composables/useTheme.d.ts +42 -0
- package/dist/types/index.d.ts +16 -14
- package/dist/types/main.d.ts +1 -1
- package/dist/types/types/theme.d.ts +4 -0
- package/package.json +6 -5
package/README.md
CHANGED
|
@@ -6,7 +6,7 @@ Vue 3 component library built with TypeScript, Vite, Reka UI, and SCSS.
|
|
|
6
6
|
|
|
7
7
|
### First Run
|
|
8
8
|
|
|
9
|
-
Generate NPM token (try `npm whoami` to check if configured). If no response, follow this guide
|
|
9
|
+
Generate NPM token (try `npm whoami` to check if configured). If no response, follow [this guide](https://ambita.atlassian.net/wiki/spaces/AI/pages/3060006975/Generate+NPM_TOKEN).
|
|
10
10
|
|
|
11
11
|
To get the project up and running locally:
|
|
12
12
|
|
|
@@ -18,33 +18,54 @@ npm run storybook
|
|
|
18
18
|
|
|
19
19
|
This will install dependencies, build the required theme assets, and start Storybook on port 6006.
|
|
20
20
|
|
|
21
|
-
>
|
|
21
|
+
> [!IMPORTANT]
|
|
22
|
+
> The `build:storybook:prepare` step is **required** before running Storybook for the first time. Storybook needs the compiled theme CSS files in `dist/themes/`. If you see an error about missing `./dist/themes` directory, run this build step first.
|
|
22
23
|
|
|
23
|
-
|
|
24
|
+
You can also run `npm start` to test it running with Vite.
|
|
25
|
+
|
|
26
|
+
### Subsequent Runs
|
|
27
|
+
|
|
28
|
+
```sh
|
|
29
|
+
npm run storybook
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
---
|
|
33
|
+
|
|
34
|
+
### Features
|
|
24
35
|
|
|
25
36
|
The design system features:
|
|
26
37
|
|
|
27
|
-
- **Two Component Types:**
|
|
28
|
-
- **
|
|
29
|
-
- **
|
|
30
|
-
-
|
|
38
|
+
- **Two Component Types:**
|
|
39
|
+
- **Neo** components (built with modern Reka UI primitives)
|
|
40
|
+
- **Aux** components
|
|
41
|
+
- some custom-built components
|
|
42
|
+
- some deprecated components, now replaced by Neo components
|
|
43
|
+
- **Design Token System and Themes**
|
|
44
|
+
- **Formatters**
|
|
45
|
+
- **SCSS Mixins**
|
|
46
|
+
|
|
47
|
+
---
|
|
31
48
|
|
|
32
49
|
### Documentation
|
|
33
50
|
|
|
34
51
|
- **[Ambita Style Guide](https://design.ambita.com)** - Brand guidelines, colors, typography, and visual standards
|
|
35
52
|
|
|
36
|
-
|
|
53
|
+
- **[Storybook](https://design.ambita.com)** - Interactive components and implementation/usage documentation
|
|
54
|
+
|
|
55
|
+
- **[Spotify Portal](https://design.ambita.com)** - Technical docs and this project's relations other projects etc.
|
|
56
|
+
|
|
57
|
+
Key guides for developers:
|
|
58
|
+
|
|
59
|
+
- **[INTEGRATION_GUIDE.md](docs/INTEGRATION_GUIDE.md)** - How to install and use the design system in your projects
|
|
60
|
+
- **[CONTRIBUTING.md](docs/CONTRIBUTING.md)** - General info on contributing
|
|
37
61
|
|
|
38
|
-
|
|
39
|
-
- **[docs/INTEGRATION_GUIDE.md](docs/INTEGRATION_GUIDE.md)** - How to use the design system in projects
|
|
40
|
-
- **[docs/REKA_UI_SCSS_GUIDE.md](docs/REKA_UI_SCSS_GUIDE.md)** - Portal components and `:deep()` selectors
|
|
41
|
-
- **[docs/NEO_COMPONENT_PATTERNS.md](docs/NEO_COMPONENT_PATTERNS.md)** - Common patterns and mixins
|
|
42
|
-
- **[docs/INTERACTION_TESTING_GUIDE.md](docs/INTERACTION_TESTING_GUIDE.md)** - Storybook interaction tests
|
|
43
|
-
- **[.claude/CLAUDE.md](.claude/CLAUDE.md)** - Project instructions for Claude Code
|
|
62
|
+
---
|
|
44
63
|
|
|
45
64
|
### [Vivid Blueprint](https://github.com/Ambita/vivid-blueprint)
|
|
46
65
|
|
|
47
|
-
Recommended front-end template for new Ambita projects, pre-configured with this design system.
|
|
66
|
+
Recommended front-end template for new Ambita projects, pre-configured with this design system and best-practices. Based on the official creators of Vue's [create-vue](https://github.com/vuejs/create-vue) project.
|
|
67
|
+
|
|
68
|
+
---
|
|
48
69
|
|
|
49
70
|
### Scripts
|
|
50
71
|
|
|
@@ -104,9 +125,10 @@ npm run format
|
|
|
104
125
|
npm run type-check
|
|
105
126
|
```
|
|
106
127
|
|
|
128
|
+
---
|
|
129
|
+
|
|
107
130
|
## Links
|
|
108
131
|
|
|
109
132
|
- [Vivid Blueprint](https://github.com/Ambita/vivid-blueprint)
|
|
110
133
|
- [Icons](https://github.com/Ambita/design-system-icons)
|
|
111
134
|
- [Reka UI](https://reka-ui.com)
|
|
112
|
-
|