Skip to content

Commit 92175f8

Browse files
koculukoculu
committed
Use fluent style API.
1 parent 509a39b commit 92175f8

14 files changed

Lines changed: 2077 additions & 2226 deletions

‎frontend/docs/apiReferenceStyles.ts‎

Lines changed: 174 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1,139 +1,186 @@
1+
import type { Style } from '@purestack/ts-css'
12
import {
23
BREAKPOINTS,
34
mediaBelow,
45
styleBuilder,
6+
type ThemePalette,
57
themes,
68
} from '@purestack/ts-style'
79

810
export function registerApiReferenceStyles() {
911
themes.forEach((theme, palette) => {
1012
const root = styleBuilder.get(theme)
11-
const neutral = palette.semanticTone.neutral
12-
const accent = palette.semanticTone.accent
13-
14-
root.select('.api-overview').css({
15-
padding: '1.25rem',
16-
border: `1px solid ${neutral.border.subtle}`,
17-
borderTop: `3px solid ${accent.text.default}`,
18-
borderRadius: palette.radii.md,
19-
background: neutral.surface.rest.background,
20-
})
21-
root.select('.api-overview__signature').css({
22-
fontSize: palette.font.size.h3,
23-
color: accent.text.default,
24-
background: 'none',
25-
border: 'none',
26-
padding: '0',
27-
})
28-
root.select('.api-overview p').css({ margin: '0.75rem 0 0' })
29-
root.select('.api-index').css({
30-
display: 'flex',
31-
flexWrap: 'wrap',
32-
gap: '0.5rem',
33-
marginTop: '1rem',
34-
})
35-
root.select('.api-index a').css({
36-
padding: '0.3rem 0.65rem',
37-
border: `1px solid ${neutral.border.subtle}`,
38-
borderRadius: palette.radii.sm,
39-
fontSize: palette.font.size.xs,
40-
textDecoration: 'none',
41-
})
42-
root.select('.api-index a:hover, .api-index a:focus-visible').css({
43-
borderColor: accent.text.default,
44-
color: accent.text.default,
45-
})
46-
root.select('.api-property').css({
47-
display: 'grid',
48-
gridTemplateColumns: 'minmax(0, 11rem) minmax(0, 1fr)',
49-
gap: '1.5rem',
50-
padding: '1.5rem 0',
51-
borderTop: `1px solid ${neutral.border.subtle}`,
52-
scrollMarginTop: '7rem',
53-
})
54-
root.select('.api-property:target').css({
55-
borderTopColor: accent.text.default,
56-
background: accent.surface.rest.background,
57-
boxShadow: `0 0 0 0.5rem ${accent.surface.rest.background}`,
58-
})
59-
root.select('.api-property__header, .api-property__content').minWidth('0')
60-
root.select('.api-property__header h4').css({
61-
margin: '0 0 0.5rem',
62-
fontSize: palette.font.size.h6,
63-
})
64-
root.select('.api-property__header h4 a').css({
65-
textDecoration: 'none',
66-
color: accent.text.default,
67-
})
68-
root.select('.api-property__header h4 span').css({
69-
color: neutral.text.subtle,
70-
fontWeight: '400',
71-
})
72-
root.select('.api-property__header h4 code, .api-property__type').css({
73-
background: 'none',
74-
border: 'none',
75-
padding: '0',
76-
overflowWrap: 'anywhere',
77-
})
78-
root.select('.api-property__type').css({
79-
color: neutral.text.subtle,
80-
fontSize: palette.font.size.xs,
81-
})
82-
root.select('.api-property__default').css({
83-
display: 'flex',
84-
flexWrap: 'wrap',
85-
alignItems: 'baseline',
86-
gap: '0.4rem',
87-
margin: '0.8rem 0 0',
88-
fontSize: palette.font.size.xs,
89-
})
90-
root.select('.api-property__default dt').color(neutral.text.subtle)
91-
root.select('.api-property__default dd').margin('0')
92-
root.select('.api-property__content > p:first-child').marginTop('0')
93-
root.select('.api-property__content > :last-child').marginBottom('0')
94-
root.select('.api-values, .api-demo').css({
95-
display: 'flex',
96-
flexWrap: 'wrap',
97-
alignItems: 'center',
98-
gap: '0.5rem',
99-
margin: '0.85rem 0',
100-
})
101-
root.select('.api-demo').css({
102-
padding: '0.9rem',
103-
borderRadius: palette.radii.md,
104-
background: neutral.surface.rest.background,
105-
})
106-
root.select('.api-property__content pre').margin('0.8rem 0 0')
107-
root.select('.api-note').css({
108-
paddingLeft: '0.8rem',
109-
borderLeft: `2px solid ${accent.border.default}`,
110-
color: neutral.text.subtle,
111-
fontSize: palette.font.size.sm,
112-
})
113-
root.select('.api-contract').css({
114-
padding: '1.1rem 1.25rem',
115-
borderLeft: `2px solid ${accent.border.default}`,
116-
background: neutral.surface.rest.background,
117-
})
118-
root.select('.api-contract > :first-child').marginTop('0')
119-
root.select('.api-contract > :last-child').marginBottom('0')
120-
root.media(mediaBelow(BREAKPOINTS.md)).select('.api-property').css({
121-
gridTemplateColumns: 'minmax(0, 1fr)',
122-
gap: '0.8rem',
123-
})
124-
root.media(mediaBelow(BREAKPOINTS.md)).select('.api-property__header').css({
125-
display: 'flex',
126-
flexWrap: 'wrap',
127-
alignItems: 'baseline',
128-
gap: '0.5rem 0.9rem',
129-
})
130-
root
131-
.media(mediaBelow(BREAKPOINTS.md))
132-
.select('.api-property__header h4')
133-
.margin('0')
134-
root
135-
.media(mediaBelow(BREAKPOINTS.md))
136-
.select('.api-property__default')
137-
.margin('0')
13+
registerOverviewStyles(root, palette)
14+
registerIndexStyles(root, palette)
15+
registerPropertyLayoutStyles(root, palette)
16+
registerPropertyMetadataStyles(root, palette)
17+
registerPropertyContentStyles(root, palette)
18+
registerContractStyles(root, palette)
19+
registerResponsivePropertyStyles(root)
13820
})
13921
}
22+
23+
function registerOverviewStyles(root: Style, palette: ThemePalette) {
24+
const neutral = palette.semanticTone.neutral
25+
const accent = palette.semanticTone.accent
26+
27+
root
28+
.select('.api-overview')
29+
.padding('1.25rem')
30+
.border(`1px solid ${neutral.border.subtle}`)
31+
.borderTop(`3px solid ${accent.text.default}`)
32+
.borderRadius(palette.radii.md)
33+
.background(neutral.surface.rest.background)
34+
root
35+
.select('.api-overview__signature')
36+
.fontSize(palette.font.size.h3)
37+
.color(accent.text.default)
38+
.background('none')
39+
.border('none')
40+
.padding('0')
41+
root.select('.api-overview p').margin('0.75rem 0 0')
42+
}
43+
44+
function registerIndexStyles(root: Style, palette: ThemePalette) {
45+
const neutral = palette.semanticTone.neutral
46+
const accent = palette.semanticTone.accent
47+
48+
root
49+
.select('.api-index')
50+
.display('flex')
51+
.flexWrap('wrap')
52+
.gap('0.5rem')
53+
.marginTop('1rem')
54+
root
55+
.select('.api-index a')
56+
.padding('0.3rem 0.65rem')
57+
.border(`1px solid ${neutral.border.subtle}`)
58+
.borderRadius(palette.radii.sm)
59+
.fontSize(palette.font.size.xs)
60+
.textDecoration('none')
61+
root
62+
.select('.api-index a:hover, .api-index a:focus-visible')
63+
.borderColor(accent.text.default)
64+
.color(accent.text.default)
65+
}
66+
67+
function registerPropertyLayoutStyles(root: Style, palette: ThemePalette) {
68+
const neutral = palette.semanticTone.neutral
69+
const accent = palette.semanticTone.accent
70+
71+
root
72+
.select('.api-property')
73+
.display('grid')
74+
.gridTemplateColumns('minmax(0, 11rem) minmax(0, 1fr)')
75+
.gap('1.5rem')
76+
.padding('1.5rem 0')
77+
.borderTop(`1px solid ${neutral.border.subtle}`)
78+
.scrollMarginTop('7rem')
79+
root
80+
.select('.api-property:target')
81+
.borderTopColor(accent.text.default)
82+
.background(accent.surface.rest.background)
83+
.boxShadow(`0 0 0 0.5rem ${accent.surface.rest.background}`)
84+
root.select('.api-property__header, .api-property__content').minWidth('0')
85+
}
86+
87+
function registerPropertyMetadataStyles(root: Style, palette: ThemePalette) {
88+
const neutral = palette.semanticTone.neutral
89+
const accent = palette.semanticTone.accent
90+
91+
root
92+
.select('.api-property__header h4')
93+
.margin('0 0 0.5rem')
94+
.fontSize(palette.font.size.h6)
95+
root
96+
.select('.api-property__header h4 a')
97+
.textDecoration('none')
98+
.color(accent.text.default)
99+
root
100+
.select('.api-property__header h4 span')
101+
.color(neutral.text.subtle)
102+
.fontWeight('400')
103+
root
104+
.select('.api-property__header h4 code, .api-property__type')
105+
.background('none')
106+
.border('none')
107+
.padding('0')
108+
.overflowWrap('anywhere')
109+
root
110+
.select('.api-property__type')
111+
.color(neutral.text.subtle)
112+
.fontSize(palette.font.size.xs)
113+
root
114+
.select('.api-property__default')
115+
.display('flex')
116+
.flexWrap('wrap')
117+
.alignItems('baseline')
118+
.gap('0.4rem')
119+
.margin('0.8rem 0 0')
120+
.fontSize(palette.font.size.xs)
121+
root.select('.api-property__default dt').color(neutral.text.subtle)
122+
root.select('.api-property__default dd').margin('0')
123+
}
124+
125+
function registerPropertyContentStyles(root: Style, palette: ThemePalette) {
126+
const neutral = palette.semanticTone.neutral
127+
const accent = palette.semanticTone.accent
128+
129+
root.select('.api-property__content > p:first-child').marginTop('0')
130+
root.select('.api-property__content > :last-child').marginBottom('0')
131+
root
132+
.select('.api-values, .api-demo')
133+
.display('flex')
134+
.flexWrap('wrap')
135+
.alignItems('center')
136+
.gap('0.5rem')
137+
.margin('0.85rem 0')
138+
root
139+
.select('.api-demo')
140+
.padding('0.9rem')
141+
.borderRadius(palette.radii.md)
142+
.background(neutral.surface.rest.background)
143+
root.select('.api-property__content pre').margin('0.8rem 0 0')
144+
root
145+
.select('.api-note')
146+
.paddingLeft('0.8rem')
147+
.borderLeft(`2px solid ${accent.border.default}`)
148+
.color(neutral.text.subtle)
149+
.fontSize(palette.font.size.sm)
150+
}
151+
152+
function registerContractStyles(root: Style, palette: ThemePalette) {
153+
const neutral = palette.semanticTone.neutral
154+
const accent = palette.semanticTone.accent
155+
156+
root
157+
.select('.api-contract')
158+
.padding('1.1rem 1.25rem')
159+
.borderLeft(`2px solid ${accent.border.default}`)
160+
.background(neutral.surface.rest.background)
161+
root.select('.api-contract > :first-child').marginTop('0')
162+
root.select('.api-contract > :last-child').marginBottom('0')
163+
}
164+
165+
function registerResponsivePropertyStyles(root: Style) {
166+
root
167+
.media(mediaBelow(BREAKPOINTS.md))
168+
.select('.api-property')
169+
.gridTemplateColumns('minmax(0, 1fr)')
170+
.gap('0.8rem')
171+
root
172+
.media(mediaBelow(BREAKPOINTS.md))
173+
.select('.api-property__header')
174+
.display('flex')
175+
.flexWrap('wrap')
176+
.alignItems('baseline')
177+
.gap('0.5rem 0.9rem')
178+
root
179+
.media(mediaBelow(BREAKPOINTS.md))
180+
.select('.api-property__header h4')
181+
.margin('0')
182+
root
183+
.media(mediaBelow(BREAKPOINTS.md))
184+
.select('.api-property__default')
185+
.margin('0')
186+
}

0 commit comments

Comments
 (0)