canvas-ui-sdk 0.1.2 → 0.1.3
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 +10 -0
- package/package.json +4 -2
- package/styles/tokens.reference.css +39 -1
package/README.md
CHANGED
|
@@ -56,6 +56,16 @@ This SDK uses CSS custom properties (variables) for theming. Define these in you
|
|
|
56
56
|
|
|
57
57
|
See `styles/tokens.reference.css` for a complete list of available CSS variables.
|
|
58
58
|
|
|
59
|
+
## Tailwind v4
|
|
60
|
+
|
|
61
|
+
If you're using Tailwind CSS v4, add this to your CSS file so Tailwind scans the SDK's compiled JS for utility classes:
|
|
62
|
+
|
|
63
|
+
```css
|
|
64
|
+
@source "../../node_modules/canvas-ui-sdk/dist";
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
Without this, Tailwind won't generate the utility classes used by SDK components.
|
|
68
|
+
|
|
59
69
|
## Components
|
|
60
70
|
|
|
61
71
|
### UI Components
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "canvas-ui-sdk",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A comprehensive UI component library with design tokens for building beautiful interfaces",
|
|
6
6
|
"main": "./dist/index.mjs",
|
|
@@ -19,7 +19,9 @@
|
|
|
19
19
|
},
|
|
20
20
|
"./styles": "./styles/tokens.reference.css"
|
|
21
21
|
},
|
|
22
|
-
"sideEffects":
|
|
22
|
+
"sideEffects": [
|
|
23
|
+
"**/*.css"
|
|
24
|
+
],
|
|
23
25
|
"files": [
|
|
24
26
|
"dist",
|
|
25
27
|
"styles",
|
|
@@ -53,12 +53,50 @@
|
|
|
53
53
|
--canvas-sidebar-dark-text: #7e92b0;
|
|
54
54
|
--canvas-sidebar-dark-border: #1e3a5f;
|
|
55
55
|
|
|
56
|
+
/* Layout */
|
|
57
|
+
--sidebar-width: 320px;
|
|
58
|
+
--header-height: 64px;
|
|
59
|
+
--sidebar-width-icon: 96px;
|
|
60
|
+
|
|
61
|
+
/* Spacing */
|
|
62
|
+
--spacing-xxs: 2px;
|
|
63
|
+
--spacing-xs: 4px;
|
|
64
|
+
--spacing-sm: 6px;
|
|
65
|
+
--spacing-md: 8px;
|
|
66
|
+
--spacing-lg: 12px;
|
|
67
|
+
--spacing-xl: 16px;
|
|
68
|
+
--spacing-2xl: 20px;
|
|
69
|
+
--spacing-3xl: 24px;
|
|
70
|
+
--spacing-4xl: 32px;
|
|
71
|
+
--spacing-5xl: 40px;
|
|
72
|
+
--spacing-6xl: 48px;
|
|
73
|
+
--spacing-7xl: 64px;
|
|
74
|
+
--spacing-8xl: 80px;
|
|
75
|
+
--spacing-10xl: 120px;
|
|
76
|
+
|
|
77
|
+
/* Radius */
|
|
78
|
+
--radius-xs: 6px;
|
|
79
|
+
--radius-md: 8px;
|
|
80
|
+
--radius-lg: 12px;
|
|
81
|
+
--radius-xl: 16px;
|
|
82
|
+
--radius-2xl: 20px;
|
|
83
|
+
--radius-3xl: 24px;
|
|
84
|
+
--radius-4xl: 32px;
|
|
85
|
+
--radius-nav: 8px;
|
|
86
|
+
--radius-full: 9999px;
|
|
87
|
+
|
|
88
|
+
/* Neutral palette */
|
|
89
|
+
--canvas-neutral-border: #e9eef3;
|
|
90
|
+
--canvas-neutral-surface: #f8fafc;
|
|
91
|
+
--canvas-neutral-text: #4b5565;
|
|
92
|
+
--canvas-neutral-placeholder: #6c7684;
|
|
93
|
+
|
|
56
94
|
/* ============================================
|
|
57
95
|
* TYPOGRAPHY TOKENS
|
|
58
96
|
* ============================================ */
|
|
59
97
|
|
|
60
98
|
/* Global Font */
|
|
61
|
-
--typo-global-font: "Inter";
|
|
99
|
+
--typo-global-font: "Inter", sans-serif;
|
|
62
100
|
|
|
63
101
|
/* H1 - Hero Headlines */
|
|
64
102
|
--typo-h1-font: "";
|