Skip to content

Extend the theme contract with kit tokens and add sample UI to the theme dashboards #5989

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
burieberry merged 13 commits into from
Sep 5, 2026
Merged

Extend the theme contract with kit tokens and add sample UI to the theme dashboards #5989

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
941374f
Upstream kit surface, status, ink, and typography tokens to the theme…
burieberry Sep 2, 2026
68f5cdf
Show inherited defaults in the theme preview and widen theme cards
burieberry Sep 2, 2026
0bc346f
Restore theme base tracking as the body letter-spacing default
burieberry Sep 3, 2026
115ecb3
updates based on review feedback
burieberry Sep 3, 2026
8af4e4c
Collect ui-label typography vars and describe surface and ink color g…
burieberry Sep 4, 2026
27e1bcd
Cap generated CSS blocks on theme dashboards with a scroll-driven edg…
burieberry Sep 4, 2026
1780a86
Apply dark token defaults at themed-card boundaries
burieberry Sep 4, 2026
1ef7361
Add theme specimens, measured type ladder, and key-token recipe to th…
burieberry Sep 4, 2026
8c0c605
Declare scheme-dependent switch and secondary button knobs in both th…
burieberry Sep 4, 2026
ed44b52
Describe the key-token recipe from usage counts and drop serialized i…
burieberry Sep 4, 2026
d90af59
Name specimen tab panels with aria-label
burieberry Sep 4, 2026
9ef38cd
Link specimen tabs to panels only in live renders
burieberry Sep 4, 2026
17a5649
Polish theme dashboard specimens and add copy to inherited swatches
burieberry Sep 5, 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
109 changes: 32 additions & 77 deletions packages/base/brand-guide.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import {
BasicFitted,
CopyButton,
Swatch,
Button,
FieldContainer,
GridContainer,
} from '@cardstack/boxel-ui/components';
Expand Down Expand Up @@ -48,6 +47,8 @@ import {
ThemeDashboardHeader,
NavSection,
PreviewPills,
FontsPreview,
ThemeSpecimens,
CardContainerCss,
ThemeImporter,
ResetButton,
Expand Down Expand Up @@ -223,47 +224,13 @@ class BrandGuideIsolated extends Component<typeof BrandGuide> {
</GridContainer>
{{/unless}}
<@fields.typography class='brand-typography-preview' />
{{else if (eq section.id 'fonts')}}
<FontsPreview
@fontStack={{@model.fontStacksFor this.isDarkMode}}
@cssImports={{@model.cssImports}}
/>
{{else if (eq section.id 'ui-components')}}
<GridContainer class='cta-grid'>
<FieldContainer @label='Primary CTA' @vertical={{true}}>
<div class='preview-container cta-preview-container'>
<Button @kind='primary' @size='extra-small'>Sample CTA</Button>
</div>
</FieldContainer>
<FieldContainer @label='Secondary CTA' @vertical={{true}}>
<div class='preview-container cta-preview-container'>
<Button @kind='secondary' @size='extra-small'>Sample CTA</Button>
</div>
</FieldContainer>
<FieldContainer @label='Disabled CTA' @vertical={{true}}>
<div class='preview-container cta-preview-container'>
<Button @disabled={{true}} @size='extra-small'>Sample
CTA</Button>
</div>
</FieldContainer>
</GridContainer>
<FieldContainer
@label='Corner Radius for holding shapes'
@vertical={{true}}
>
<GridContainer class='ui-grid'>
<div class='preview-container ui-preview-container'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</div>
<div
class='preview-container ui-preview-container photo-container'
/>
</GridContainer>
</FieldContainer>
<ThemeSpecimens />
{{else if (eq section.id 'visual-dna')}}
<div class='dsr-section-content'>
{{#if this.editMode}}
Expand Down Expand Up @@ -344,7 +311,10 @@ class BrandGuideIsolated extends Component<typeof BrandGuide> {
</div>
{{else if (eq section.id 'card-container-css')}}
{{#if @model.cssVariables}}
<CardContainerCss @cssVariables={{@model.cssVariables}} />
<CardContainerCss
@cssVariables={{@model.cssVariables}}
@isDarkMode={{this.isDarkMode}}
/>
<hr class='brand-guide-vars-divider' />
<h3 class='brand-guide-vars-heading'>Brand Guide-Specific
Variables</h3>
Expand Down Expand Up @@ -641,46 +611,13 @@ class BrandGuideIsolated extends Component<typeof BrandGuide> {
:deep(h3) {
font-size: var(--boxel-font-size-md);
}
.cta-grid {
margin-bottom: var(--boxel-sp-xl);
grid-template-columns: repeat(3, 1fr);
}
.preview-container {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
background-color: var(--muted);
color: var(--dsr-foreground);
border-radius: var(--boxel-border-radius);
overflow: hidden;
}
.cta-preview-container {
min-height: 7.5rem;
}
.ui-grid {
grid-template-columns: repeat(2, 1fr);
}
.ui-preview-container {
height: 11.25rem;
align-items: flex-start;
padding: var(--boxel-sp-xxl);
overflow: auto;
}
.photo-container {
background-image: url('https://app-assets-cardstack.s3.us-east-1.amazonaws.com/%40cardstack/boxel/images/placeholders/photo-placeholder.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

/* typography section */
.typography-grid {
grid-template-columns: 1fr 1fr;
}
@container (width <= 768px) {
.typography-grid,
.cta-grid {
.typography-grid {
grid-template-columns: 1fr;
}
}
Expand Down Expand Up @@ -1010,6 +947,11 @@ class BrandGuideIsolated extends Component<typeof BrandGuide> {
title: 'Typography',
fieldName: 'typography',
},
{
id: 'fonts',
navTitle: 'Fonts',
title: 'Fonts',
},
{
id: 'mark-usage',
navTitle: 'Mark Usage',
Expand Down Expand Up @@ -1043,7 +985,8 @@ class BrandGuideIsolated extends Component<typeof BrandGuide> {
this.sections.filter(
(section) =>
section.id !== 'card-container-css' &&
section.id !== 'ui-components',
section.id !== 'ui-components' &&
section.id !== 'fonts',
),
this.hasThemeCss,
);
Expand All @@ -1063,6 +1006,10 @@ class BrandGuideIsolated extends Component<typeof BrandGuide> {
return Boolean(this.args.model.cssVariables);
}

if (section.id === 'fonts') {
return this.hasFontsContent;
}

if (section.id === 'custom-css') {
return this.hasCustomVariables;
}
Expand Down Expand Up @@ -1097,6 +1044,14 @@ class BrandGuideIsolated extends Component<typeof BrandGuide> {
});
}

private get hasFontsContent() {
let model = this.args.model;
return Boolean(
model.fontStacksFor?.(this.isDarkMode).some((font) => font.stack) ||
model.cssImports?.length,
);
}

private get hasBrandPaletteContent() {
return (
this.args.model?.brandColorPalette?.length ||
Expand Down
47 changes: 43 additions & 4 deletions packages/base/card-api.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3426,26 +3426,65 @@ export class CSSField extends TextAreaField {
--border,
color-mix(in oklab, var(--field-fg) 20%, var(--field-bg))
);
--field-fade: 1.5rem;
position: relative;
background-color: var(--field-bg);
border: 1px solid var(--field-border);
border-radius: var(--radius, var(--boxel-border-radius));
overflow: hidden;
}
.css-field-copy-button {
position: absolute;
top: var(--boxel-sp-xs);
right: var(--boxel-sp-xs);
z-index: 1;
}
.css-field {
margin-block: 0;
padding: var(--boxel-sp);
background-color: var(--field-bg);
border: 1px solid var(--field-border);
border-radius: var(--radius, var(--boxel-border-radius));
color: var(--field-fg);
font-family: var(
--font-mono,
var(--boxel-monospace-font-family, monospace)
);
font-size: var(--boxel-font-size-xs);
overflow-x: auto;
max-height: var(--css-field-max-height, none);
overflow: auto;
/* iOS-style edge fades: text dissolves into the background at an
edge only while more content lies beyond it. Each mask layer is
taller than the box by the fade height, so shifting it up by that
amount parks its fade offscreen; the scroll timeline slides them
into view. Base positions show no fade, which is also what
browsers without scroll-driven animations render. */
mask-image:
linear-gradient(to bottom, transparent, black var(--field-fade)),
linear-gradient(to top, transparent, black var(--field-fade));
mask-size: 100% calc(100% + var(--field-fade));
mask-repeat: no-repeat;
mask-composite: intersect;
mask-position:
0 calc(-1 * var(--field-fade)),
0 0;
animation: css-field-edge-fade linear both;
animation-timeline: scroll(self);
}
@keyframes css-field-edge-fade {
0% {
mask-position:
0 calc(-1 * var(--field-fade)),
0 calc(-1 * var(--field-fade));
}
8%,
92% {
mask-position:
0 0,
0 calc(-1 * var(--field-fade));
}
100% {
mask-position:
0 0,
0 0;
}
}
.css-field::placeholder {
opacity: 0.5;
Expand Down
Loading
Loading