Skip to content

Boxel variables consolidation #3568

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

Draft
burieberry wants to merge 3 commits into
base: main
Choose a base branch
from
+247 −268
Draft

Boxel variables consolidation #3568

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
3639634
boxel variables consolidation
burieberry Nov 13, 2025
4ac6c14
update variable usage
burieberry Nov 13, 2025
c711211
add spacing theme default
burieberry Nov 13, 2025
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
8 changes: 4 additions & 4 deletions packages/base/brand-guide.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,15 +118,15 @@ class BrandGuideIsolated extends Component<typeof BrandGuide> {
letter-spacing: var(--boxel-lsp-xs);
}
h1 {
font-size: var(--brand-heading-font-size, var(--boxel-font-size-med));
font-size: var(--brand-heading-font-size, var(--boxel-font-size-md));
line-height: var(
--brand-heading-line-height,
var(--boxel-lineheight-med)
var(--boxel-lineheight-md)
);
}
h2 {
font-size: var(--boxel-font-size-med);
line-height: var(--boxel-lineheight-med);
font-size: var(--boxel-font-size-md);
line-height: var(--boxel-lineheight-md);
}
p {
margin-block: 0;
Expand Down
2 changes: 1 addition & 1 deletion packages/base/components/cards-grid-layout.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -310,7 +310,7 @@ export default class CardsGridLayout extends Component<Signature> {
font-size: var(--typescale-h1, var(--boxel-font-size-lg));
font-weight: 600;
line-height: calc(30 / 22);
letter-spacing: var(--boxel-lsp-xxs);
letter-spacing: var(--boxel-lsp-2xs);
}

.highlights-layout {
Expand Down
2 changes: 1 addition & 1 deletion packages/base/default-templates/embedded.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export default class DefaultEmbeddedTemplate extends GlimmerComponent<{
}
.card-title {
margin: 10px 0 0 0;
font: 500 var(--boxel-font-size-med);
font: 500 var(--boxel-font-size-md);
line-height: 1.25;
letter-spacing: 0.16px;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/base/image.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ class ImageCardView extends Component<typeof ImageCard> {
padding: var(--boxel-sp);
text-align: center;
color: var(--boxel-500);
background-color: var(--boxel-50);
background-color: var(--boxel-150);
border-radius: var(--boxel-form-control-border-radius);
}
</style>
Expand Down
6 changes: 3 additions & 3 deletions packages/base/join-the-community.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@ export class SocialMediaLink extends FieldDef {
.community-link {
display: inline-block;
padding: var(--boxel-sp-xs) var(--boxel-sp-sm);
background: var(--boxel-light-200);
background: var(--boxel-200);
color: var(--boxel-blue);
border-radius: var(--boxel-border-radius-sm);
font: 500 var(--boxel-font-sm);
Expand All @@ -188,7 +188,7 @@ export class SocialMediaLink extends FieldDef {
}

.community-link:hover {
background: var(--boxel-light-300);
background: var(--boxel-200);
}
</style>
</template>
Expand Down Expand Up @@ -217,7 +217,7 @@ export class JoinTheCommunity extends CardDef {
gap: var(--boxel-sp);
width: 100%;
padding: var(--boxel-sp);
background-color: var(--boxel-light-100);
background-color: var(--boxel-150);
border-radius: var(--boxel-border-radius);
}
</style>
Expand Down
4 changes: 2 additions & 2 deletions packages/base/skill.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,11 +71,11 @@ export class CommandField extends FieldDef {
}
.command-data {
flex-grow: 1;
border-left: var(--boxel-sp-4xs) solid var(--boxel-purple-300);
border-left: var(--boxel-sp-4xs) solid var(--boxel-400);
padding-left: var(--boxel-sp-xxs);
}
.icon {
color: var(--boxel-purple-300);
color: var(--boxel-400);
margin-top: var(--boxel-sp-xxs);
width: 30px;
height: 30px;
Expand Down
8 changes: 4 additions & 4 deletions packages/base/spec.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -322,8 +322,8 @@ class Isolated extends Component<typeof Spec> {
}
.header-icon-container {
flex-shrink: 0;
height: var(--boxel-icon-xxl);
width: var(--boxel-icon-xxl);
height: var(--boxel-icon-2xl);
width: var(--boxel-icon-2xl);
display: flex;
align-items: center;
justify-content: center;
Expand Down Expand Up @@ -689,8 +689,8 @@ class Edit extends Component<typeof Spec> {
}
.header-icon-container {
flex-shrink: 0;
height: var(--boxel-icon-xxl);
width: var(--boxel-icon-xxl);
height: var(--boxel-icon-2xl);
width: var(--boxel-icon-2xl);
display: flex;
align-items: center;
justify-content: center;
Expand Down
2 changes: 1 addition & 1 deletion packages/base/structured-theme.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -370,7 +370,7 @@ class Isolated extends Component<typeof StructuredTheme> {
grid-template-columns: 1fr 1fr;
}
h2 {
font-size: var(--boxel-font-size-med);
font-size: var(--boxel-font-size-md);
}
}
</style>
Expand Down
4 changes: 2 additions & 2 deletions packages/base/style-reference.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ class Isolated extends Component<typeof StyleReference> {
h2 {
margin-top: 0;
margin-bottom: var(--boxel-sp);
font-size: var(--boxel-font-size-med);
font-size: var(--boxel-font-size-md);
font-weight: 500;
}
ul {
Expand All @@ -87,7 +87,7 @@ class Isolated extends Component<typeof StyleReference> {
text-align: center;
}
.visual-dna {
font-size: var(--boxel-font-size-med);
font-size: var(--boxel-font-size-md);
color: var(--muted-foreground);
max-width: 600px;
margin: 0 auto;
Expand Down
2 changes: 1 addition & 1 deletion packages/base/welcome-to-boxel.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -253,7 +253,7 @@ export class WelcomeToBoxel extends CardDef {
}

.welcome-title {
font-size: var(--boxel-font-size-xxl);
font-size: var(--boxel-font-size-2xl);
font-weight: normal;
color: var(--boxel-light);
font-stretch: normal;
Expand Down
6 changes: 3 additions & 3 deletions packages/boxel-motion/test-app/vendor/card.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@

.boxel-card__description {
margin: 0;
color: var(--boxel-purple-400);
color: var(--boxel-500);
font: var(--boxel-font-sm);
overflow-wrap: break-word;
word-break: break-word;
Expand Down Expand Up @@ -193,7 +193,7 @@
}

.boxel-card-field .field-renderer__title {
color: var(--boxel-purple-400);
color: var(--boxel-500);
font: var(--boxel-font-xs);
font-weight: 700;
letter-spacing: var(--boxel-lsp-xl);
Expand Down Expand Up @@ -269,7 +269,7 @@
}

.card-placeholder {
background-color: var(--boxel-purple-200);
background-color: var(--boxel-400);
border-radius: var(--boxel-border-radius);
height: 122px;
}
Expand Down
6 changes: 3 additions & 3 deletions packages/boxel-ui/addon/src/components/alert/index.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,10 +67,10 @@ const Messages: TemplateOnlyComponent<MessagesSignature> = <template>
.alert-icon {
min-width: 20px;
height: 20px;
--icon-background-color: var(--boxel-error-400);
--icon-background-color: var(--boxel-danger);
}
.failure-icon {
--icon-background-color: var(--destructive, var(--boxel-error-400));
--icon-background-color: var(--destructive, var(--boxel-danger));
--icon-color: var(--destructive-foreground, var(--boxel-light));
}
.message {
Expand Down Expand Up @@ -132,7 +132,7 @@ const Alert: TemplateOnlyComponent<Signature> = <template>
padding: var(--boxel-sp-sm);
font: 500 var(--boxel-font-xs);
letter-spacing: var(--boxel-lsp-sm);
border-radius: var(--boxel-border-radius-xxl);
border-radius: var(--boxel-border-radius-2xl);
}
.error-container {
background-color: var(--destructive-foreground, var(--boxel-650));
Expand Down
4 changes: 2 additions & 2 deletions packages/boxel-ui/addon/src/components/button/index.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -285,7 +285,7 @@ const ButtonComponent: TemplateOnlyComponent<Signature> = <template>
--boxel-button-color: var(--destructive, var(--boxel-danger));
--boxel-button-text-color: var(
--destructive-foreground,
var(--boxel-light-100)
var(--boxel-150)
);
--boxel-button-box-shadow: var(--shadow);
}
Expand Down Expand Up @@ -369,7 +369,7 @@ const ButtonComponent: TemplateOnlyComponent<Signature> = <template>
--boxel-button-padding: var(--boxel-sp-5xs) var(--boxel-sp-xs);
--boxel-button-min-height: var(--boxel-button-xs);
--boxel-button-min-width: 5rem;
--boxel-button-loading-icon-size: var(--boxel-icon-xxs);
--boxel-button-loading-icon-size: var(--boxel-icon-2xs);
--boxel-button-font: 600 var(--boxel-font-xs);
--boxel-button-letter-spacing: var(--boxel-lsp-lg);
}
Expand Down
29 changes: 17 additions & 12 deletions packages/boxel-ui/addon/src/components/card-container/index.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,35 +82,40 @@ const CardContainer: TemplateOnlyComponent<Signature> = <template>

/*** code below this line is from "variables.css". values will be recalculated based on theming variable values ***/
/* font-sizes */
--boxel-font-size-xxl: calc(var(--boxel-font-size) * 2.5);
--boxel-font-size-2xl: calc(var(--boxel-font-size) * 2.5);
--boxel-font-size-xl: calc(var(--boxel-font-size) * 2);
--boxel-font-size-lg: calc(var(--boxel-font-size) * 1.375);
--boxel-font-size-med: calc(var(--boxel-font-size) * 1.25);
--boxel-font-size-md: calc(var(--boxel-font-size) * 1.25);
--boxel-font-size-sm: calc(var(--boxel-font-size) * 0.8125);
--boxel-font-size-xs: calc(var(--boxel-font-size) * 0.6875);
/* spacing */
--boxel-sp-6xs: calc(var(--boxel-sp-5xs) / var(--boxel-ratio));
--boxel-sp-5xs: calc(var(--boxel-sp-4xs) / var(--boxel-ratio));
--boxel-sp-4xs: calc(var(--boxel-sp-xxxs) / var(--boxel-ratio));
--boxel-sp-xxxs: calc(var(--boxel-sp-xxs) / var(--boxel-ratio));
--boxel-sp-xxs: calc(var(--boxel-sp-xs) / var(--boxel-ratio));
--boxel-sp-4xs: calc(var(--boxel-sp-3xs) / var(--boxel-ratio));
--boxel-sp-3xs: calc(var(--boxel-sp-2xs) / var(--boxel-ratio));
--boxel-sp-2xs: calc(var(--boxel-sp-xs) / var(--boxel-ratio));
--boxel-sp-xs: calc(var(--boxel-sp-sm) / var(--boxel-ratio));
--boxel-sp-sm: calc(var(--boxel-sp) / var(--boxel-ratio));
--boxel-sp: var(--boxel-spacing); /* base */
--boxel-sp-lg: calc(var(--boxel-sp) * var(--boxel-ratio));
--boxel-sp-xl: calc(var(--boxel-sp-lg) * var(--boxel-ratio));
--boxel-sp-xxl: calc(var(--boxel-sp-xl) * var(--boxel-ratio));
--boxel-sp-xxxl: calc(var(--boxel-sp-xxl) * var(--boxel-ratio));
--boxel-sp-2xl: calc(var(--boxel-sp-xl) * var(--boxel-ratio));
--boxel-sp-3xl: calc(var(--boxel-sp-2xl) * var(--boxel-ratio));
/* border-radius */
--boxel-border-radius-xxs: calc(var(--boxel-border-radius-xs) - 2.5px);
--boxel-border-radius-xs: calc(var(--boxel-border-radius-sm) - 3px);
--boxel-border-radius-sm: calc(var(--boxel-border-radius) - 3px);
--boxel-border-radius-2xs: calc(var(--boxel-border-radius) - 8.5px);
--boxel-border-radius-xs: calc(var(--boxel-border-radius) - 6px);
--boxel-border-radius-sm: calc(var(--boxel-border-radius) - 4px);
--boxel-border-radius: var(--boxel-radius); /* base */
--boxel-border-radius-lg: calc(var(--boxel-border-radius) + 2px);
--boxel-border-radius-xl: calc(var(--boxel-border-radius-lg) + 3px);
--boxel-border-radius-xxl: calc(var(--boxel-border-radius-xl) + 5px);
--boxel-border-radius-xl: calc(var(--boxel-border-radius) + 5px);
--boxel-border-radius-2xl: calc(var(--boxel-border-radius) + 10px);
--boxel-form-control-border-radius: var(--boxel-border-radius);

--boxel-sp-xxxs: var(--boxel-sp-3xs);
--boxel-sp-xxs: var(--boxel-sp-2xs);
--boxel-sp-xxl: var(--boxel-sp-2xl);
--boxel-sp-xxxl: var(--boxel-sp-3xl);

font-family: var(--font-family-base, var(--font-sans));
font-size: var(--typescale-body);
font-weight: var(--font-weight-body);
Expand Down
2 changes: 1 addition & 1 deletion packages/boxel-ui/addon/src/components/card-header/index.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,7 @@ export default class CardHeader extends Component<Signature> {
);
--inner-boxel-card-header-realm-icon-size: var(
--boxel-card-header-realm-icon-size,
var(--boxel-icon-med)
var(--boxel-icon-md)
);
--inner-boxel-card-header-card-type-icon-size: var(
--boxel-card-header-card-type-icon-size,
Expand Down
2 changes: 1 addition & 1 deletion packages/boxel-ui/addon/src/components/context-button/index.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ const DropdownButton: TemplateOnlyComponent<Signature> = <template>
}
.boxel-context-button--destructive:hover,
.boxel-context-button--destructive-icon:hover {
color: var(--destructive-foreground, var(--boxel-light-100));
color: var(--destructive-foreground, var(--boxel-150));
background-color: var(--destructive, var(--boxel-danger));
}

Expand Down
6 changes: 3 additions & 3 deletions packages/boxel-ui/addon/src/components/dropdown/index.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -256,7 +256,7 @@ class BoxelDropdown extends Component<Signature> {

--dropdown-hover-color: var(
--boxel-dropdown-hover-color,
var(--theme-hover, var(--boxel-light-100))
var(--theme-hover, var(--boxel-150))
);

background-color: var(--dropdown-background-color);
Expand Down Expand Up @@ -297,7 +297,7 @@ class BoxelDropdown extends Component<Signature> {
);
--dropdown-hover-color: var(
--boxel-dropdown-hover-color,
var(--theme-hover, var(--boxel-light-100))
var(--theme-hover, var(--boxel-150))
);
}

Expand Down Expand Up @@ -327,7 +327,7 @@ class BoxelDropdown extends Component<Signature> {
);
--dropdown-hover-color: var(
--boxel-dropdown-hover-color,
var(--theme-hover, var(--boxel-light-100))
var(--theme-hover, var(--boxel-150))
);
--dropdown-selected-text-color: var(
--secondary-foreground,
Expand Down
4 changes: 2 additions & 2 deletions packages/boxel-ui/addon/src/components/dropdown/trigger/index.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ const BoxelDropdownTrigger: TemplateOnlyComponent<Signature> = <template>
}

.boxel-dropdown-trigger--showing-placeholder {
color: var(--boxel-purple-300);
color: var(--boxel-400);
}

.boxel-dropdown-trigger__icon {
Expand All @@ -60,7 +60,7 @@ const BoxelDropdownTrigger: TemplateOnlyComponent<Signature> = <template>
}

.boxel-dropdown-trigger__caret {
--icon-color: var(--boxel-purple-200);
--icon-color: var(--boxel-400);
margin-left: var(--boxel-sp-xxs);
}
}
Expand Down
4 changes: 2 additions & 2 deletions packages/boxel-ui/addon/src/components/menu/index.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ export default class Menu extends Component<Signature> {
--boxel-menu-border-radius: var(--boxel-border-radius);
--boxel-menu-color: var(--boxel-light);
--boxel-menu-text-color: var(--boxel-dark);
--boxel-menu-current-color: var(--boxel-light-100);
--boxel-menu-current-color: var(--boxel-150);
--boxel-menu-selected-color: var(--boxel-highlight);
--boxel-menu-disabled-color: var(--boxel-highlight);
--boxel-menu-font: 500 var(--boxel-font-sm);
Expand Down Expand Up @@ -238,7 +238,7 @@ export default class Menu extends Component<Signature> {
margin: 0;
border: 0;
height: 0;
border-bottom: 1px solid var(--boxel-purple-300);
border-bottom: 1px solid var(--boxel-400);
}

.menu-item {
Expand Down
2 changes: 1 addition & 1 deletion packages/boxel-ui/addon/src/components/pill/index.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ const Pill: TemplateOnlyComponent<PillSignature> = <template>
display: inline-flex;
min-width: var(
--boxel-pill-icon-size,
var(--pill-icon-size, var(--boxel-icon-xxs))
var(--pill-icon-size, var(--boxel-icon-2xs))
);
margin-block: 0;
margin-inline: 0;
Expand Down
2 changes: 1 addition & 1 deletion packages/boxel-ui/addon/src/components/progress-bar/index.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export default class ProgressBar extends Component<Signature> {
.boxel-progress-bar {
--progress-bar-background-color: var(
--boxel-progress-bar-background-color,
var(--muted, var(--boxel-light-200))
var(--muted, var(--boxel-200))
);
--progress-bar-border-radius: var(
--boxel-progress-bar-border-radius,
Expand Down
2 changes: 1 addition & 1 deletion packages/boxel-ui/addon/src/components/progress-radial/index.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export default class ProgressRadial extends Component<Signature> {
);
--progress-radial-background-color: var(
--boxel-progress-radial-background-color,
var(--muted, var(--boxel-light-200))
var(--muted, var(--boxel-200))
);
--progress-radial-font-weight: var(
--boxel-progress-radial-font-weight,
Expand Down
2 changes: 1 addition & 1 deletion packages/boxel-ui/addon/src/components/radio-input/item.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ const RadioInputItem: TemplateOnlyComponent<Signature> = <template>
--boxel-radio-disabled-border-color,
var(
--radio-disabled-border-color,
var(--muted-foreground, var(--boxel-purple-300))
var(--muted-foreground, var(--boxel-400))
)
);

Expand Down
Loading
Loading