Skip to content

Commit 061c2b0

Browse files
avifeneshavifenesh
authored
feat: import shared design tokens from design-system (#268)
* fix: align marketplace.json with Claude Code plugin schema Use object-form source {"source": "url", "url": "..."} instead of bare URL strings, and remove unrecognized "requires"/"core" keys that cause schema validation errors when loading the marketplace. * feat: import shared design tokens from monorepo design-system Replace inline token definitions with @import from the shared design-system at the monorepo root. Keeps brand personality docs as comments for reference. * feat: add Google Fonts stylesheet link to HTML head Fonts were previously loaded via CSS @import in tokens.css which is render-blocking. Move to HTML <link> tag for parallel loading. * fix: vendor design-system CSS and revert unrelated marketplace.json changes - Vendor tokens.css and base.css into site/assets/css/design-system/ so they resolve correctly in standalone builds - Fix @import paths to use local ./design-system/ instead of workspace-relative - Revert marketplace.json changes that were accidentally included
1 parent 4a9535b commit 061c2b0

File tree

4 files changed

+511
-469
lines changed

4 files changed

+511
-469
lines changed

‎site/assets/css/design-system/base.css‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
/*
2+
* ==========================================================================
3+
* AGENT-SH DESIGN SYSTEM - BASE STYLES
4+
* ==========================================================================
5+
*
6+
* Reset rules, element defaults, and utility classes built on the token
7+
* system. Import AFTER tokens.css.
8+
*
9+
* NOTE: Do NOT import this file in Docusaurus sites - Infima provides its
10+
* own reset and base styles. Use tokens.css + tokens-docusaurus.css instead.
11+
*
12+
* ==========================================================================
13+
*/
14+
15+
/* --------------------------------------------------------------------------
16+
* BASE RESET & DEFAULTS
17+
*
18+
* Minimal reset that sets up the token system on actual elements.
19+
* This ensures tokens flow into the cascade properly.
20+
* -------------------------------------------------------------------------- */
21+
*,
22+
*::before,
23+
*::after {
24+
box-sizing: border-box;
25+
margin: 0;
26+
padding: 0;
27+
}
28+
29+
html {
30+
font-size: 16px;
31+
-webkit-font-smoothing: antialiased;
32+
-moz-osx-font-smoothing: grayscale;
33+
text-rendering: optimizeLegibility;
34+
scroll-behavior: smooth; /* Overridden by reduced-motion below */
35+
}
36+
37+
body {
38+
font-family: var(--font-sans);
39+
font-size: var(--text-base);
40+
font-weight: var(--font-normal);
41+
line-height: var(--leading-normal);
42+
color: var(--color-text-primary);
43+
background-color: var(--color-bg-base);
44+
}
45+
46+
/* Code elements use the mono stack */
47+
code,
48+
kbd,
49+
samp,
50+
pre {
51+
font-family: var(--font-mono);
52+
font-size: 0.9em; /* Slightly smaller than surrounding text to match x-height */
53+
}
54+
55+
/* Links use the accent color */
56+
a {
57+
color: var(--color-accent-purple);
58+
text-decoration: none;
59+
transition: color var(--duration-fast) var(--ease-out);
60+
}
61+
62+
a:hover {
63+
color: var(--color-accent-hover);
64+
}
65+
66+
/* Selection uses accent tint */
67+
::selection {
68+
background-color: rgba(var(--color-accent-purple-rgb), 0.3);
69+
color: var(--color-text-primary);
70+
}
71+
72+
/* Respect user motion preferences */
73+
@media (prefers-reduced-motion: reduce) {
74+
html {
75+
scroll-behavior: auto;
76+
}
77+
}
78+
79+
/* --------------------------------------------------------------------------
80+
* UTILITY CLASSES
81+
*
82+
* Commonly needed utilities built on the token system.
83+
* These provide quick access to the most-used patterns.
84+
* -------------------------------------------------------------------------- */
85+
86+
/* Accent gradient text - for headings and emphasis */
87+
.text-gradient {
88+
background: var(--gradient-accent-text);
89+
-webkit-background-clip: text;
90+
background-clip: text;
91+
-webkit-text-fill-color: transparent;
92+
}
93+
94+
/* Glass panel - the signature component style */
95+
.glass {
96+
background: var(--glass-bg);
97+
backdrop-filter: blur(var(--glass-blur));
98+
-webkit-backdrop-filter: blur(var(--glass-blur));
99+
border: var(--glass-border);
100+
border-radius: var(--radius-lg);
101+
}
102+
103+
.glass-accent {
104+
background: var(--glass-bg-accent);
105+
backdrop-filter: blur(var(--glass-blur));
106+
-webkit-backdrop-filter: blur(var(--glass-blur));
107+
border: var(--glass-border-accent);
108+
border-radius: var(--radius-lg);
109+
}
110+
111+
/* Glow effect - for accent-highlighted elements */
112+
.glow {
113+
box-shadow: var(--glow-accent);
114+
}
115+
116+
.glow-strong {
117+
box-shadow: var(--glow-accent-strong);
118+
}
119+
120+
/* Accent border gradient (applied via pseudo-element) */
121+
.border-gradient {
122+
position: relative;
123+
border-radius: var(--radius-lg);
124+
}
125+
126+
.border-gradient::before {
127+
content: '';
128+
position: absolute;
129+
inset: 0;
130+
padding: 1px;
131+
border-radius: inherit;
132+
background: var(--gradient-accent);
133+
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
134+
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
135+
-webkit-mask-composite: xor;
136+
mask-composite: exclude;
137+
pointer-events: none;
138+
}
139+
140+
/* Visually hidden but accessible to screen readers */
141+
.sr-only {
142+
position: absolute;
143+
width: 1px;
144+
height: 1px;
145+
padding: 0;
146+
margin: -1px;
147+
overflow: hidden;
148+
clip: rect(0, 0, 0, 0);
149+
white-space: nowrap;
150+
border-width: 0;
151+
}

0 commit comments

Comments
 (0)