Skip to content

[01253] Add Box Shadow Tokens #14

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
dcrjodle merged 1 commit into from
Apr 9, 2026
Merged

[01253] Add Box Shadow Tokens #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
37 changes: 37 additions & 0 deletions demo/src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import '@ivy-interactive/ivy-design-system/css/ivy-framework-light'
import '@ivy-interactive/ivy-design-system/css/ivy-framework-dark'
import '@ivy-interactive/ivy-design-system/css/ivy-framework-chromatic'
import '@ivy-interactive/ivy-design-system/css/ivy-framework-neutral'
import '@ivy-interactive/ivy-design-system/css/ivy-framework-shadow'
import tokens from '@ivy-interactive/ivy-design-system/tokens'
import './style.css'

Expand Down Expand Up @@ -290,6 +291,41 @@ function createExamples(): HTMLElement {
return section
}

function createShadowExamples(): HTMLElement {
const section = document.createElement('section')
section.className = 'color-section shadow-section'
section.innerHTML = `
<h2>Box Shadow Tokens</h2>
<div class="shadow-grid">
<div class="shadow-card" style="box-shadow: var(--shadow-sm)">
<span class="shadow-label">sm</span>
<code>var(--shadow-sm)</code>
</div>
<div class="shadow-card" style="box-shadow: var(--shadow-md)">
<span class="shadow-label">md</span>
<code>var(--shadow-md)</code>
</div>
<div class="shadow-card" style="box-shadow: var(--shadow-lg)">
<span class="shadow-label">lg</span>
<code>var(--shadow-lg)</code>
</div>
<div class="shadow-card" style="box-shadow: var(--shadow-xl)">
<span class="shadow-label">xl</span>
<code>var(--shadow-xl)</code>
</div>
<div class="shadow-card" style="box-shadow: var(--shadow-2xl)">
<span class="shadow-label">2xl</span>
<code>var(--shadow-2xl)</code>
</div>
<div class="shadow-card" style="box-shadow: var(--shadow-inner)">
<span class="shadow-label">inner</span>
<code>var(--shadow-inner)</code>
</div>
</div>
`
return section
}

function init(): void {
const app = document.getElementById('app')
if (!app) return
Expand Down Expand Up @@ -341,6 +377,7 @@ function init(): void {
}

app.appendChild(createExamples())
app.appendChild(createShadowExamples())

if (ivyFramework.chromatic?.color) {
app.appendChild(createSection('Chromatic Colors', ivyFramework.chromatic.color))
Expand Down
31 changes: 31 additions & 0 deletions demo/src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -515,3 +515,34 @@ header code {
background-color: var(--color-primary);
}

/* Shadow tokens */
.shadow-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 2rem;
margin-top: 1rem;
}

.shadow-card {
background: var(--color-background);
border-radius: 8px;
padding: 2rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
min-height: 120px;
justify-content: center;
}

.shadow-label {
font-weight: 600;
font-size: 1.125rem;
color: var(--color-foreground);
}

.shadow-card code {
font-size: 0.875rem;
color: var(--color-muted-foreground);
}

32 changes: 32 additions & 0 deletions figma-tokens/$tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -728,6 +728,38 @@
"type": "spacing"
}
}
},
"shadow": {
"shadow": {
"none": {
"value": "none",
"type": "boxShadow"
},
"sm": {
"value": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
"type": "boxShadow"
},
"md": {
"value": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
"type": "boxShadow"
},
"lg": {
"value": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
"type": "boxShadow"
},
"xl": {
"value": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
"type": "boxShadow"
},
"2xl": {
"value": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
"type": "boxShadow"
},
"inner": {
"value": "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
"type": "boxShadow"
}
}
}
},
"ivy-web": {
Expand Down
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@
"./css/ivy-framework-chromatic.css": "./dist/css/ivy-framework-chromatic.css",
"./css/ivy-framework-neutral": "./dist/css/ivy-framework-neutral.css",
"./css/ivy-framework-neutral.css": "./dist/css/ivy-framework-neutral.css",
"./css/ivy-framework-shadow": "./dist/css/ivy-framework-shadow.css",
"./css/ivy-framework-shadow.css": "./dist/css/ivy-framework-shadow.css",
"./css/ivy-web": "./dist/css/ivy-web-light.css",
"./css/ivy-web-light": "./dist/css/ivy-web-light.css",
"./css/ivy-web-dark": "./dist/css/ivy-web-dark.css",
Expand Down
23 changes: 23 additions & 0 deletions scripts/build.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,9 @@ interface PackageTokens {
padding?: {
padding?: ColorTokens;
};
shadow?: {
shadow?: ColorTokens;
};
}

interface NormalizedTokens {
Expand Down Expand Up @@ -124,6 +127,7 @@ async function build() {
const ivyFrameworkChromatic = ivyFramework.chromatic || {};
const ivyFrameworkBorderRadius = ivyFramework["border-radius"] || {};
const ivyFrameworkPadding = ivyFramework.padding || {};
const ivyFrameworkShadow = ivyFramework.shadow || {};
const ivyFrameworkLightTheme = {
theme: { light: ivyFramework.theme?.light || {} },
};
Expand Down Expand Up @@ -184,6 +188,12 @@ async function build() {
false,
ivyFrameworkSource
);
await generateCSS(
ivyFrameworkShadow,
"dist/css/ivy-framework-shadow.css",
false,
ivyFrameworkSource
);
await generateCSS(
ivyFrameworkLightTheme,
"dist/css/ivy-framework-light.css",
Expand Down Expand Up @@ -222,6 +232,12 @@ async function build() {
true,
ivyFrameworkSource
);
await generateFlatCSS(
ivyFrameworkShadow,
"dist/css/ivy-framework-shadow-flat.css",
false,
ivyFrameworkSource
);

// Generate CSS for ivy-web
console.log("📝 Generating CSS for ivy-web...");
Expand Down Expand Up @@ -309,6 +325,13 @@ async function build() {
"Ivy.Themes",
ivyFrameworkSource
);
await generateCSharp(
ivyFrameworkShadow,
"dist/csharp/IvyFrameworkShadowTokens.cs",
"IvyFrameworkShadowTokens",
"Ivy.Themes",
ivyFrameworkSource
);
await generateCSharp(
ivyFrameworkLightTheme,
"dist/csharp/IvyFrameworkLightThemeTokens.cs",
Expand Down
4 changes: 2 additions & 2 deletions scripts/generate-csharp.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export function extractTokens(
return tokens;
}

const categories = ["color", "sizing", "border-radius", "padding"];
const categories = ["color", "sizing", "border-radius", "padding", "shadow"];
for (const cat of categories) {
if (obj[cat]) {
tokens.push(...extractTokens(obj[cat], "", cat));
Expand Down Expand Up @@ -80,7 +80,7 @@ function resolveTokenReference(
value: string,
sourceTokens: Record<string, any>
): string {
const referenceMatch = value.match(/^\{(ivy-framework|ivy-web)\.source\.(color|sizing)\.([\w.-]+)\}$/);
const referenceMatch = value.match(/^\{(ivy-framework|ivy-web)\.source\.(color|sizing|shadow)\.([\w.-]+)\}$/);
if (referenceMatch) {
const category = referenceMatch[2];
const tokenName = referenceMatch[3];
Expand Down
4 changes: 2 additions & 2 deletions scripts/generate-css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ function resolveTokenReference(
): string {
if (!sourceTokens) return value;

const referenceMatch = value.match(/^\{(ivy-framework|ivy-web)\.source\.(color|sizing)\.([\w.-]+)\}$/);
const referenceMatch = value.match(/^\{(ivy-framework|ivy-web)\.source\.(color|sizing|shadow)\.([\w.-]+)\}$/);
if (referenceMatch) {
const category = referenceMatch[2];
const tokenName = referenceMatch[3];
Expand Down Expand Up @@ -46,7 +46,7 @@ function tokenToCSS(obj: any, prefix = "", sourceTokens?: Record<string, any>):
return css;
}

const categories = ["color", "sizing", "border-radius", "padding"];
const categories = ["color", "sizing", "border-radius", "padding", "shadow"];
for (const category of categories) {
if (obj[category]) {
css += tokenToCSS(obj[category], category, sourceTokens);
Expand Down
4 changes: 2 additions & 2 deletions scripts/generate-flat-css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ function resolveTokenReference(
): string {
if (!sourceTokens) return value;

const referenceMatch = value.match(/^\{(ivy-framework|ivy-web)\.source\.(color|sizing)\.([\w.-]+)\}$/);
const referenceMatch = value.match(/^\{(ivy-framework|ivy-web)\.source\.(color|sizing|shadow)\.([\w.-]+)\}$/);
if (referenceMatch) {
const category = referenceMatch[2];
const tokenName = referenceMatch[3];
Expand Down Expand Up @@ -125,7 +125,7 @@ function tokenToFlatCSS(
return css;
}

const categories = ["color", "sizing", "border-radius", "padding"];
const categories = ["color", "sizing", "border-radius", "padding", "shadow"];
for (const category of categories) {
if (obj[category]) {
css += tokenToFlatCSS(obj[category], category, mapping, sourceTokens);
Expand Down
Loading