Skip to content

Commit 2b7edae

Browse files
adaam2adaam2
committed
fix: tokens
1 parent 3c6a740 commit 2b7edae

File tree

8 files changed

+733
-1070
lines changed

8 files changed

+733
-1070
lines changed

‎CLAUDE.md‎

Lines changed: 700 additions & 929 deletions
Large diffs are not rendered by default.

‎scripts/generate-utility-docs.js‎

Lines changed: 23 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ const postcss = require('postcss')
66

77
// Paths
88
const UTILITIES_CSS = path.join(__dirname, '../src/utilities.css')
9-
const BASE_CSS = path.join(__dirname, '../src/base.css')
109
const CLAUDE_MD = path.join(__dirname, '../CLAUDE.md')
1110
const TYPES_DIR = path.join(__dirname, '../types')
1211
const UTILITIES_TYPES = path.join(TYPES_DIR, 'utilities.d.ts')
@@ -115,30 +114,30 @@ function generateTypeDefinitions(utilities, themeColors) {
115114
* DO NOT EDIT THIS FILE DIRECTLY
116115
* Run 'pnpm generate:docs' to update
117116
*/
118-
117+
/* eslint-disable */
118+
/* prettier-ignore */
119119
/**
120120
* Custom utility classes defined in utilities.css
121121
*/
122122
export type MoonshineUtilities =
123-
${utilityTypes};
123+
${utilityTypes}
124124
125125
/**
126126
* Semantic color utilities available from theme
127127
* These are auto-generated from theme colors with standard prefixes
128128
*/
129129
export type MoonshineColorUtilities =
130-
${colorUtilities};
130+
${colorUtilities}
131131
132132
/**
133133
* All available Moonshine utility classes
134134
*/
135-
export type MoonshineClasses = MoonshineUtilities | MoonshineColorUtilities;
135+
export type MoonshineClasses = MoonshineUtilities | MoonshineColorUtilities
136136
137137
/**
138138
* Helper type for className props
139139
*/
140-
export type MoonshineClassName = MoonshineClasses | MoonshineClasses[] | undefined | null | false;
141-
`
140+
export type MoonshineClassName = MoonshineClasses | MoonshineClasses[] | undefined | null | false`
142141
}
143142

144143
// Generate documentation section for CLAUDE.md
@@ -147,14 +146,13 @@ function generateDocSection(utilities) {
147146

148147
// Group utilities by type
149148
const typography = utilities.filter(
150-
(u) => u.name.startsWith('text-') || u.name.startsWith('typography-')
149+
(u) => u.name.startsWith('text-')
151150
)
152151
const backgrounds = utilities.filter((u) => u.name.startsWith('bg-'))
153152
const borders = utilities.filter((u) => u.name.startsWith('border-'))
154153
const other = utilities.filter(
155154
(u) =>
156155
!u.name.startsWith('text-') &&
157-
!u.name.startsWith('typography-') &&
158156
!u.name.startsWith('bg-') &&
159157
!u.name.startsWith('border-')
160158
)
@@ -171,18 +169,10 @@ function generateDocSection(utilities) {
171169
sections.push('### Typography Utilities\n')
172170
typography.forEach((u) => {
173171
sections.push(`#### \`${u.name}\`\n`)
174-
sections.push('```css')
175-
sections.push(`.${u.name} {`)
176-
sections.push(u.properties.join('\n'))
177-
178-
if (u.variants.length > 0) {
179-
u.variants.forEach((v) => {
180-
sections.push(`\n /* ${v.name} variant */`)
181-
sections.push(v.properties.join('\n'))
182-
})
183-
}
184-
185-
sections.push('}')
172+
sections.push('```tsx')
173+
sections.push(`<p className={cn('${u.name}')}>`)
174+
sections.push(`Hello world`)
175+
sections.push(`</p>`)
186176
sections.push('```\n')
187177
})
188178
}
@@ -192,18 +182,10 @@ function generateDocSection(utilities) {
192182
sections.push('### Background Utilities\n')
193183
backgrounds.forEach((u) => {
194184
sections.push(`#### \`${u.name}\`\n`)
195-
sections.push('```css')
196-
sections.push(`.${u.name} {`)
197-
sections.push(u.properties.join('\n'))
198-
199-
if (u.variants.length > 0) {
200-
u.variants.forEach((v) => {
201-
sections.push(`\n /* ${v.name} variant */`)
202-
sections.push(v.properties.join('\n'))
203-
})
204-
}
205-
206-
sections.push('}')
185+
sections.push('```tsx')
186+
sections.push(`<div className={cn('${u.name}')}>`)
187+
sections.push(`Hello world`)
188+
sections.push(`</div>`)
207189
sections.push('```\n')
208190
})
209191
}
@@ -213,10 +195,10 @@ function generateDocSection(utilities) {
213195
sections.push('### Border Utilities\n')
214196
borders.forEach((u) => {
215197
sections.push(`#### \`${u.name}\`\n`)
216-
sections.push('```css')
217-
sections.push(`.${u.name} {`)
218-
sections.push(u.properties.join('\n'))
219-
sections.push('}')
198+
sections.push('```tsx')
199+
sections.push(`<div className={cn('${u.name}')}>`)
200+
sections.push(`Hello world`)
201+
sections.push(`</div>`)
220202
sections.push('```\n')
221203
})
222204
}
@@ -226,10 +208,10 @@ function generateDocSection(utilities) {
226208
sections.push('### Other Utilities\n')
227209
other.forEach((u) => {
228210
sections.push(`#### \`${u.name}\`\n`)
229-
sections.push('```css')
230-
sections.push(`.${u.name} {`)
231-
sections.push(u.properties.join('\n'))
232-
sections.push('}')
211+
sections.push('```tsx')
212+
sections.push(`<div className={cn('${u.name}')}>`)
213+
sections.push(`Hello world`)
214+
sections.push(`</div>`)
233215
sections.push('```\n')
234216
})
235217
}

‎src/components/AIChat/parts/AIChatMessageToolInvocationPart.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export function AIChatMessageToolInvocationPart({
4343
<Text variant="xs" className="mb-1 font-medium text-neutral-200">
4444
Input:
4545
</Text>
46-
<pre className="typography-body-xs rounded bg-neutral-900 p-2 whitespace-pre-wrap text-neutral-300">
46+
<pre className="text-body-xs rounded bg-neutral-900 p-2 whitespace-pre-wrap text-neutral-300">
4747
{JSON.stringify(toolInput, null, 2)}
4848
</pre>
4949
</div>

‎src/components/AIChat/parts/AIChatMessageToolPart.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export interface AIChatMessageToolPartComponents extends BaseComponents {
4444
}
4545

4646
const inputResultClassName =
47-
'typography-body-xs max-h-48 overflow-auto rounded p-2 break-all whitespace-pre-wrap text-foreground bg-muted'
47+
'text-body-xs max-h-48 overflow-auto rounded p-2 break-all whitespace-pre-wrap text-foreground bg-muted'
4848

4949
const defaultComponents: DefaultComponents<AIChatMessageToolPartComponents> = {
5050
toolName: ({ toolName, confirmMessage, className }) => (

‎src/components/AIChat/parts/AIChatMessageToolResultPart.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export function AIChatMessageToolResultPart({
3737
</Text>
3838
</div>
3939
<div className="mt-2">
40-
<pre className="typography-body-xs rounded bg-neutral-900 p-2 whitespace-pre-wrap text-neutral-300">
40+
<pre className="text-body-xs rounded bg-neutral-900 p-2 whitespace-pre-wrap text-neutral-300">
4141
{content}
4242
</pre>
4343
</div>

‎src/components/AppLayout/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@ const AppLayoutBreadcrumb = ({
160160
AppLayoutBreadcrumb.displayName = 'AppLayout.Breadcrumb'
161161

162162
const AppLayoutBreadcrumbDivider = () => {
163-
return <span className="text-muted-foreground typography-body-lg">/</span>
163+
return <span className="text-muted-foreground text-body-lg">/</span>
164164
}
165165

166166
interface AppLayoutBreadcrumbItemProps extends PropsWithChildren {
@@ -176,7 +176,7 @@ const AppLayoutBreadcrumbItem = ({
176176
return (
177177
<div
178178
className={cn(
179-
'typography-body-md text-muted-foreground cursor-pointer',
179+
'text-body-md text-muted-foreground cursor-pointer',
180180
active && 'text-foreground cursor-default',
181181
!active && 'hover:text-foreground',
182182
className
@@ -211,7 +211,7 @@ const AppLayoutCollapseButton = ({
211211
<Tooltip delayDuration={500}>
212212
<TooltipTrigger asChild>
213213
<button
214-
className="typography-body-md hover:bg-accent rounded-md p-1.5"
214+
className="text-body-md hover:bg-accent rounded-md p-1.5"
215215
onMouseEnter={() => setIsHovered(true)}
216216
onMouseLeave={() => setIsHovered(false)}
217217
onClick={() => setCollapsed(!collapsed)}

‎src/utilities.css‎

Lines changed: 0 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -4,82 +4,6 @@
44
* They reference the primitives defined in base.css
55
*/
66

7-
/*
8-
TODO: rename to text-*
9-
TODO: replace these with the ones for the new brand
10-
TODO: Delete all typography classes https://linear.app/speakeasy/issue/DES-325/replace-all-references-to-typography-classes
11-
*/
12-
@utility typography-heading-xl {
13-
font-size: 2.063rem;
14-
font-weight: 300;
15-
line-height: 1.375;
16-
letter-spacing: 0.0015em;
17-
font-family: var(--font-diatype);
18-
}
19-
@utility typography-heading-lg {
20-
font-size: 1.813rem;
21-
font-weight: 300;
22-
line-height: 1.5;
23-
letter-spacing: 0.0015em;
24-
font-family: var(--font-diatype);
25-
}
26-
@utility typography-heading-md {
27-
font-size: 1.625rem;
28-
font-weight: 300;
29-
line-height: 1.6;
30-
letter-spacing: 0.0015em;
31-
font-family: var(--font-diatype);
32-
}
33-
@utility typography-heading-sm {
34-
font-size: 1.438rem;
35-
font-weight: 300;
36-
line-height: 1.6;
37-
letter-spacing: 0.0015em;
38-
font-family: var(--font-diatype);
39-
}
40-
@utility typography-heading-xs {
41-
font-size: 1.25rem;
42-
font-weight: 300;
43-
line-height: 1.6;
44-
letter-spacing: 0.0015em;
45-
font-family: var(--font-diatype);
46-
}
47-
@utility typography-heading-xxs {
48-
font-size: 1.125rem;
49-
font-weight: 300;
50-
line-height: 1.778;
51-
letter-spacing: 0.0015em;
52-
font-family: var(--font-diatype);
53-
}
54-
@utility typography-body-lg {
55-
font-size: 1.125rem;
56-
font-weight: 400;
57-
line-height: 1.75;
58-
letter-spacing: 0.0025em;
59-
font-family: var(--font-diatype);
60-
}
61-
@utility typography-body-md {
62-
font-size: 1rem;
63-
font-weight: 400;
64-
line-height: 1.75;
65-
letter-spacing: 0.0025em;
66-
font-family: var(--font-diatype);
67-
}
68-
@utility typography-body-sm {
69-
font-size: 0.875rem;
70-
font-weight: 400;
71-
line-height: 1.75;
72-
letter-spacing: 0.0025em;
73-
font-family: var(--font-diatype);
74-
}
75-
@utility typography-body-xs {
76-
font-size: 0.75rem;
77-
font-weight: 400;
78-
line-height: 1.75;
79-
letter-spacing: 0.0025em;
80-
font-family: var(--font-diatype);
81-
}
82-
837
@utility container {
848
padding-inline: 1rem;
859
margin-inline: auto;

‎types/utilities.d.ts‎

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,16 @@
11
/**
22
* Auto-generated TypeScript definitions for Moonshine utilities
3-
* Generated on: 2025-07-25T19:46:22.448Z
3+
* Generated on: 2025-08-05T10:11:38.805Z
44
*
55
* DO NOT EDIT THIS FILE DIRECTLY
66
* Run 'pnpm generate:docs' to update
77
*/
8-
8+
/* eslint-disable */
9+
/* prettier-ignore */
910
/**
1011
* Custom utility classes defined in utilities.css
1112
*/
1213
export type MoonshineUtilities =
13-
| 'typography-heading-xl'
14-
| 'typography-heading-lg'
15-
| 'typography-heading-md'
16-
| 'typography-heading-sm'
17-
| 'typography-heading-xs'
18-
| 'typography-heading-xxs'
19-
| 'typography-body-lg'
20-
| 'typography-body-md'
21-
| 'typography-body-sm'
22-
| 'typography-body-xs'
2314
| 'container'
2415
| 'bg-mask'
2516
| 'text-display-2xl'
@@ -426,9 +417,4 @@ export type MoonshineClasses = MoonshineUtilities | MoonshineColorUtilities
426417
/**
427418
* Helper type for className props
428419
*/
429-
export type MoonshineClassName =
430-
| MoonshineClasses
431-
| MoonshineClasses[]
432-
| undefined
433-
| null
434-
| false
420+
export type MoonshineClassName = MoonshineClasses | MoonshineClasses[] | undefined | null | false

0 commit comments

Comments
 (0)