Skip to content

feat: import shared design tokens from design-system #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
avifenesh merged 3 commits into from
Feb 22, 2026
Merged

feat: import shared design tokens from design-system #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b3a4a87
feat: import shared design tokens from monorepo design-system
avifenesh Feb 22, 2026
8224557
feat: add Google Fonts stylesheet link to HTML head
avifenesh Feb 22, 2026
b703a67
fix: vendor design-system CSS for standalone builds
avifenesh Feb 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/layouts/Base.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ const base = import.meta.env.BASE_URL;
<meta name="twitter:description" content={description}>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap">
<link rel="icon" type="image/svg+xml" href={`${base}favicon.svg`}>
</head>
<body>
Expand Down
151 changes: 151 additions & 0 deletions src/styles/design-system/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
/*
* ==========================================================================
* AGENT-SH DESIGN SYSTEM - BASE STYLES
* ==========================================================================
*
* Reset rules, element defaults, and utility classes built on the token
* system. Import AFTER tokens.css.
*
* NOTE: Do NOT import this file in Docusaurus sites - Infima provides its
* own reset and base styles. Use tokens.css + tokens-docusaurus.css instead.
*
* ==========================================================================
*/

/* --------------------------------------------------------------------------
* BASE RESET & DEFAULTS
*
* Minimal reset that sets up the token system on actual elements.
* This ensures tokens flow into the cascade properly.
* -------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
scroll-behavior: smooth; /* Overridden by reduced-motion below */
}

body {
font-family: var(--font-sans);
font-size: var(--text-base);
font-weight: var(--font-normal);
line-height: var(--leading-normal);
color: var(--color-text-primary);
background-color: var(--color-bg-base);
}

/* Code elements use the mono stack */
code,
kbd,
samp,
pre {
font-family: var(--font-mono);
font-size: 0.9em; /* Slightly smaller than surrounding text to match x-height */
}

/* Links use the accent color */
a {
color: var(--color-accent-purple);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
color: var(--color-accent-hover);
}

/* Selection uses accent tint */
::selection {
background-color: rgba(var(--color-accent-purple-rgb), 0.3);
color: var(--color-text-primary);
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}

/* --------------------------------------------------------------------------
* UTILITY CLASSES
*
* Commonly needed utilities built on the token system.
* These provide quick access to the most-used patterns.
* -------------------------------------------------------------------------- */

/* Accent gradient text - for headings and emphasis */
.text-gradient {
background: var(--gradient-accent-text);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}

/* Glass panel - the signature component style */
.glass {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: var(--glass-border);
border-radius: var(--radius-lg);
}

.glass-accent {
background: var(--glass-bg-accent);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: var(--glass-border-accent);
border-radius: var(--radius-lg);
}

/* Glow effect - for accent-highlighted elements */
.glow {
box-shadow: var(--glow-accent);
}

.glow-strong {
box-shadow: var(--glow-accent-strong);
}

/* Accent border gradient (applied via pseudo-element) */
.border-gradient {
position: relative;
border-radius: var(--radius-lg);
}

.border-gradient::before {
content: '';
position: absolute;
inset: 0;
padding: 1px;
border-radius: inherit;
background: var(--gradient-accent);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}

/* Visually hidden but accessible to screen readers */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
Loading