@adarsh_goswami/design 0.1.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 +237 -0
- package/dist/assets/favicon.svg +9 -0
- package/dist/assets/logo-mark.svg +9 -0
- package/dist/assets/logo.svg +14 -0
- package/dist/index.cjs +1183 -0
- package/dist/index.d.cts +103 -0
- package/dist/index.d.ts +103 -0
- package/dist/index.js +1136 -0
- package/dist/tailwind.config.css +122 -0
- package/dist/theme.css +495 -0
- package/package.json +56 -0
package/README.md
ADDED
|
@@ -0,0 +1,237 @@
|
|
|
1
|
+
# @adarsh_goswami/brand
|
|
2
|
+
|
|
3
|
+
Single source of truth for Adarsh Goswami's personal brand — pre-themed Radix UI components, CSS design tokens, and a Tailwind v4 theme config.
|
|
4
|
+
|
|
5
|
+
Any project that installs this package gets the full AG design system out of the box. No token copy-pasting, no manual Radix theme setup, no brand configuration.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## Install
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install @adarsh_goswami/brand
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
**Peer dependencies** — install these in your project if you haven't already:
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install @radix-ui/themes react react-dom tailwindcss
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## Setup
|
|
24
|
+
|
|
25
|
+
### 1. Import the CSS tokens
|
|
26
|
+
|
|
27
|
+
In your entry file (e.g. `main.tsx`):
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
import '@radix-ui/themes/styles.css'
|
|
31
|
+
import '@adarsh_goswami/brand/dist/theme.css'
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### 2. Add the Tailwind theme config
|
|
35
|
+
|
|
36
|
+
In your main CSS file (e.g. `index.css`):
|
|
37
|
+
|
|
38
|
+
```css
|
|
39
|
+
@import "tailwindcss";
|
|
40
|
+
@import "@adarsh_goswami/brand/dist/theme.css";
|
|
41
|
+
@import "@adarsh_goswami/brand/dist/tailwind.config.css";
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### 3. Wrap your app with Radix Theme
|
|
45
|
+
|
|
46
|
+
```tsx
|
|
47
|
+
import { Theme } from '@radix-ui/themes'
|
|
48
|
+
|
|
49
|
+
export default function App() {
|
|
50
|
+
return (
|
|
51
|
+
<Theme appearance="dark">
|
|
52
|
+
{/* your app */}
|
|
53
|
+
</Theme>
|
|
54
|
+
)
|
|
55
|
+
}
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
No `accentColor` or `grayColor` props needed — the brand theme is applied automatically via CSS.
|
|
59
|
+
|
|
60
|
+
---
|
|
61
|
+
|
|
62
|
+
## What's included
|
|
63
|
+
|
|
64
|
+
| Export | Description |
|
|
65
|
+
|---|---|
|
|
66
|
+
| `dist/theme.css` | All CSS custom property tokens — colors, typography, spacing, shadows, radius, z-index |
|
|
67
|
+
| `dist/tailwind.config.css` | Tailwind v4 `@theme` block — brand tokens as Tailwind utilities |
|
|
68
|
+
| `dist/assets/logo.svg` | Full wordmark |
|
|
69
|
+
| `dist/assets/logo-mark.svg` | Icon only (AG monogram) |
|
|
70
|
+
| `dist/assets/favicon.svg` | 32×32 favicon variant |
|
|
71
|
+
|
|
72
|
+
---
|
|
73
|
+
|
|
74
|
+
## Design tokens
|
|
75
|
+
|
|
76
|
+
All tokens are CSS custom properties available globally after importing `theme.css`.
|
|
77
|
+
|
|
78
|
+
### Colors
|
|
79
|
+
|
|
80
|
+
```css
|
|
81
|
+
/* Backgrounds */
|
|
82
|
+
var(--bg-base) /* #0A0A0B — page background */
|
|
83
|
+
var(--bg-surface) /* #111113 — card/panel */
|
|
84
|
+
var(--bg-raised) /* #18181C — elevated surface */
|
|
85
|
+
var(--bg-overlay) /* #1F1F25 — modals, popovers */
|
|
86
|
+
var(--bg-hover) /* #1A1A1F */
|
|
87
|
+
var(--bg-active) /* #212127 */
|
|
88
|
+
|
|
89
|
+
/* Text */
|
|
90
|
+
var(--text-primary) /* #F0EEF8 */
|
|
91
|
+
var(--text-secondary) /* #9997AA */
|
|
92
|
+
var(--text-muted) /* #5C5A6E */
|
|
93
|
+
var(--text-disabled) /* #3A3848 */
|
|
94
|
+
|
|
95
|
+
/* Accent — electric violet-indigo */
|
|
96
|
+
var(--accent) /* #7C6EFA */
|
|
97
|
+
var(--accent-bright) /* #9B8FFB */
|
|
98
|
+
var(--accent-dim) /* #4A3FCC */
|
|
99
|
+
var(--accent-hover) /* #8D80FB */
|
|
100
|
+
var(--accent-active) /* #6B5CE8 */
|
|
101
|
+
var(--accent-glow) /* rgba(124,110,250,0.15) */
|
|
102
|
+
var(--accent-subtle) /* rgba(124,110,250,0.08) */
|
|
103
|
+
|
|
104
|
+
/* Borders */
|
|
105
|
+
var(--border-subtle) /* #1E1E24 */
|
|
106
|
+
var(--border-soft) /* #2A2A34 */
|
|
107
|
+
var(--border-mid) /* #3A3A48 */
|
|
108
|
+
var(--border-hover) /* #454558 */
|
|
109
|
+
var(--border-focus) /* #7C6EFA */
|
|
110
|
+
|
|
111
|
+
/* Semantic */
|
|
112
|
+
var(--success) /* #3DD68C */
|
|
113
|
+
var(--warning) /* #F5A623 */
|
|
114
|
+
var(--error) /* #F2546A */
|
|
115
|
+
var(--info) /* #4AA8FF */
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### Typography
|
|
119
|
+
|
|
120
|
+
```css
|
|
121
|
+
/* Font families */
|
|
122
|
+
var(--brand-font-display) /* Syne */
|
|
123
|
+
var(--brand-font-body) /* DM Sans */
|
|
124
|
+
var(--brand-font-mono) /* DM Mono */
|
|
125
|
+
|
|
126
|
+
/* Type scale */
|
|
127
|
+
var(--brand-text-xs) /* 11px */
|
|
128
|
+
var(--brand-text-sm) /* 13px */
|
|
129
|
+
var(--brand-text-base) /* 15px */
|
|
130
|
+
var(--brand-text-md) /* 17px */
|
|
131
|
+
var(--brand-text-lg) /* 20px */
|
|
132
|
+
var(--brand-text-xl) /* 24px */
|
|
133
|
+
var(--brand-text-2xl) /* 32px */
|
|
134
|
+
var(--brand-text-3xl) /* 44px */
|
|
135
|
+
var(--brand-text-4xl) /* 60px */
|
|
136
|
+
var(--brand-text-5xl) /* 80px */
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
**Required Google Fonts** — add to your `index.html`:
|
|
140
|
+
|
|
141
|
+
```html
|
|
142
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
143
|
+
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&family=DM+Mono:wght@300;400;500&display=swap" rel="stylesheet">
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
### Tailwind utilities
|
|
147
|
+
|
|
148
|
+
After adding `tailwind.config.css`, all brand tokens are available as Tailwind classes:
|
|
149
|
+
|
|
150
|
+
```html
|
|
151
|
+
<!-- Colors -->
|
|
152
|
+
<div class="bg-bg-surface text-text-primary border border-border-soft">
|
|
153
|
+
<span class="text-accent">Accent text</span>
|
|
154
|
+
|
|
155
|
+
<!-- Typography -->
|
|
156
|
+
<h1 class="font-display text-3xl tracking-tight leading-tight">
|
|
157
|
+
<p class="font-body text-base leading-normal">
|
|
158
|
+
|
|
159
|
+
<!-- Radius -->
|
|
160
|
+
<div class="rounded-md"> <!-- 8px -->
|
|
161
|
+
<div class="rounded-lg"> <!-- 12px -->
|
|
162
|
+
<div class="rounded-full"> <!-- 9999px -->
|
|
163
|
+
|
|
164
|
+
<!-- Shadows -->
|
|
165
|
+
<div class="shadow-md">
|
|
166
|
+
<div class="shadow-accent">
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
---
|
|
170
|
+
|
|
171
|
+
## SVG assets
|
|
172
|
+
|
|
173
|
+
Import brand assets as URLs:
|
|
174
|
+
|
|
175
|
+
```tsx
|
|
176
|
+
import logoUrl from '@adarsh_goswami/brand/dist/assets/logo.svg'
|
|
177
|
+
import logoMarkUrl from '@adarsh_goswami/brand/dist/assets/logo-mark.svg'
|
|
178
|
+
import faviconUrl from '@adarsh_goswami/brand/dist/assets/favicon.svg'
|
|
179
|
+
|
|
180
|
+
<img src={logoUrl} alt="Adarsh Goswami" />
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
For Vite projects, add the type declaration if needed:
|
|
184
|
+
|
|
185
|
+
```ts
|
|
186
|
+
// vite-env.d.ts or global.d.ts
|
|
187
|
+
declare module '*.svg' {
|
|
188
|
+
const url: string
|
|
189
|
+
export default url
|
|
190
|
+
}
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
---
|
|
194
|
+
|
|
195
|
+
## Local development (npm link)
|
|
196
|
+
|
|
197
|
+
When working on this package and a consuming project simultaneously:
|
|
198
|
+
|
|
199
|
+
```bash
|
|
200
|
+
# In this repo
|
|
201
|
+
npm link
|
|
202
|
+
|
|
203
|
+
# In the consuming project
|
|
204
|
+
npm link @adarsh_goswami/brand
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
Changes are reflected instantly — no publish cycle needed.
|
|
208
|
+
|
|
209
|
+
When done:
|
|
210
|
+
|
|
211
|
+
```bash
|
|
212
|
+
# In consuming project
|
|
213
|
+
npm unlink @adarsh_goswami/brand
|
|
214
|
+
|
|
215
|
+
# In this repo
|
|
216
|
+
npm unlink
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
---
|
|
220
|
+
|
|
221
|
+
## Versioning
|
|
222
|
+
|
|
223
|
+
| Change | Bump |
|
|
224
|
+
|---|---|
|
|
225
|
+
| Token value tweak (color shade, spacing value) | `patch` |
|
|
226
|
+
| New component, asset, or token added | `minor` |
|
|
227
|
+
| Token renamed, removed, or breaking component API change | `major` |
|
|
228
|
+
|
|
229
|
+
CI/CD auto-publishes on every push:
|
|
230
|
+
- `develop` → `@adarsh_goswami/brand@x.x.x-dev` (npm tag `dev`)
|
|
231
|
+
- `main` → `@adarsh_goswami/brand@x.x.x` (npm tag `latest`)
|
|
232
|
+
|
|
233
|
+
To install the prerelease build:
|
|
234
|
+
|
|
235
|
+
```bash
|
|
236
|
+
npm install @adarsh_goswami/brand@dev
|
|
237
|
+
```
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<rect width="32" height="32" rx="7" fill="#111113"/>
|
|
3
|
+
<!-- A — scaled 0.5x from 64x64 mark -->
|
|
4
|
+
<path d="M7 23 L12 10 L17 23" stroke="#7C6EFA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
+
<line x1="9" y1="18.5" x2="15" y2="18.5" stroke="#7C6EFA" stroke-width="1.5" stroke-linecap="round"/>
|
|
6
|
+
<!-- G — scaled 0.5x from 64x64 mark -->
|
|
7
|
+
<path d="M19 14 C19 11.5 21 10 23.5 10 C26 10 27.5 11.5 27.5 14 L27.5 16 L24.5 16 L24.5 14.5" stroke="#F0EEF8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
8
|
+
<path d="M19 14 C19 16.5 19 19 19 20 C19 21.75 21 23 23.5 23 C26 23 27.5 21.75 27.5 20 L27.5 16" stroke="#F0EEF8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
9
|
+
</svg>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<rect width="64" height="64" rx="14" fill="#111113"/>
|
|
3
|
+
<!-- A -->
|
|
4
|
+
<path d="M14 46 L24 20 L34 46" stroke="#7C6EFA" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
+
<line x1="18" y1="37" x2="30" y2="37" stroke="#7C6EFA" stroke-width="2.5" stroke-linecap="round"/>
|
|
6
|
+
<!-- G -->
|
|
7
|
+
<path d="M38 28 C38 23 42 20 47 20 C52 20 55 23 55 28 L55 32 L49 32 L49 29" stroke="#F0EEF8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
8
|
+
<path d="M38 28 C38 33 38 38 38 40 C38 43.5 42 46 47 46 C52 46 55 43.5 55 40 L55 32" stroke="#F0EEF8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
9
|
+
</svg>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<svg viewBox="0 0 160 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<!-- Icon mark -->
|
|
3
|
+
<rect width="36" height="36" rx="8" fill="#18181C"/>
|
|
4
|
+
<!-- A -->
|
|
5
|
+
<path d="M6 26 L13 10 L20 26" stroke="#7C6EFA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
6
|
+
<line x1="9" y1="20.5" x2="17" y2="20.5" stroke="#7C6EFA" stroke-width="2" stroke-linecap="round"/>
|
|
7
|
+
<!-- G -->
|
|
8
|
+
<path d="M23 16.5 C23 13.5 25.5 12 28 12 C30.5 12 32 13.5 32 16.5 L32 18.5 L28.5 18.5 L28.5 16.5" stroke="#F0EEF8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
9
|
+
<path d="M23 16.5 C23 19 23 21.5 23 23 C23 25 25.5 26 28 26 C30.5 26 32 25 32 23 L32 18.5" stroke="#F0EEF8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
10
|
+
<!-- Wordmark text -->
|
|
11
|
+
<text x="48" y="26" font-family="Syne, sans-serif" font-weight="700" font-size="18" letter-spacing="-0.36">
|
|
12
|
+
<tspan fill="#F0EEF8">Adarsh</tspan><tspan fill="#7C6EFA">.</tspan>
|
|
13
|
+
</text>
|
|
14
|
+
</svg>
|