Skip to content

Add missing fields to ThemeVarField; add missing local-types package to base #5982

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 10 commits into from
Sep 4, 2026
Merged

Add missing fields to ThemeVarField; add missing local-types package to base #5982

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
ac7ee3b
Add warning and shadow primitive fields to ThemeVarField
burieberry Sep 2, 2026
d8d722d
remove redundant declarations
burieberry Sep 3, 2026
d4d34ac
update switch to use primary for for on state
burieberry Sep 3, 2026
bf39506
update status color field descriptions to be correct
burieberry Sep 3, 2026
b6e2146
Assert shadow primitives round-trip through a tweakcn import
burieberry Sep 3, 2026
3772fe9
reorder deps
burieberry Sep 3, 2026
5a0fba6
Remove the remaining hex fallbacks from the number field components
burieberry Sep 3, 2026
5a552f5
Share one status ramp across the number components and mix its middle…
burieberry Sep 3, 2026
e2e8221
update comment
burieberry Sep 3, 2026
865e02b
Move the inert shadow primitives below the shadow scale and label them
burieberry Sep 3, 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
5 changes: 3 additions & 2 deletions packages/base/color.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { Component } from '@cardstack/base/card-api';
import StringField from '@cardstack/base/string';
import { Swatch } from '@cardstack/boxel-ui/components';
import { markdownEscape } from '@cardstack/boxel-ui/helpers';
import PaletteIcon from '@cardstack/boxel-icons/palette';

import { Component } from './card-api';
import ColorPickerField from './color-field/components/color-picker-field';
import StringField from './string';

class View extends Component<typeof ColorField> {
<template><Swatch @color={{@model}} @style='round' /></template>
Expand Down
28 changes: 14 additions & 14 deletions packages/base/number/components/gauge.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,12 +51,12 @@ export class GaugeAtom extends GlimmerComponent<GaugeSignature> {
const warningThreshold = this.options.warningThreshold;

if (dangerThreshold !== undefined && numericValue >= dangerThreshold) {
return 'var(--destructive, #ef4444)';
return 'var(--destructive)';
}
if (warningThreshold !== undefined && numericValue >= warningThreshold) {
return 'var(--warning, #f59e0b)';
return 'var(--warning)';
}
return 'var(--primary, #3b82f6)';
return 'var(--primary)';
}

get needleRotation() {
Expand Down Expand Up @@ -86,7 +86,7 @@ export class GaugeAtom extends GlimmerComponent<GaugeSignature> {
<path
d='M 20 100 A 80 80 0 0 1 180 100'
fill='none'
stroke='var(--muted, #f1f5f9)'
stroke='var(--muted)'
stroke-width='16'
stroke-linecap='round'
/>
Expand All @@ -105,13 +105,13 @@ export class GaugeAtom extends GlimmerComponent<GaugeSignature> {
)
}}
/>
<circle cx='100' cy='100' r='6' fill='var(--foreground, #1e293b)' />
<circle cx='100' cy='100' r='6' fill='var(--foreground)' />
<line
x1='100'
y1='100'
x2='100'
y2='40'
stroke='var(--foreground, #1e293b)'
stroke='var(--foreground)'
stroke-width='3'
stroke-linecap='round'
style={{this.needleStyle}}
Expand Down Expand Up @@ -158,12 +158,12 @@ export class GaugeEmbedded extends GlimmerComponent<GaugeSignature> {
const warningThreshold = this.options.warningThreshold;

if (dangerThreshold !== undefined && numericValue >= dangerThreshold) {
return 'var(--destructive, #ef4444)';
return 'var(--destructive)';
}
if (warningThreshold !== undefined && numericValue >= warningThreshold) {
return 'var(--warning, #f59e0b)';
return 'var(--warning)';
}
return 'var(--primary, #3b82f6)';
return 'var(--primary)';
}

get needleRotation() {
Expand Down Expand Up @@ -209,7 +209,7 @@ export class GaugeEmbedded extends GlimmerComponent<GaugeSignature> {
<path
d='M 20 100 A 80 80 0 0 1 180 100'
fill='none'
stroke='var(--muted, #f1f5f9)'
stroke='var(--muted)'
stroke-width='16'
stroke-linecap='round'
/>
Expand All @@ -233,7 +233,7 @@ export class GaugeEmbedded extends GlimmerComponent<GaugeSignature> {
y='115'
text-anchor='start'
font-size='10'
fill='var(--muted-foreground, #94a3b8)'
fill='var(--muted-foreground)'
>
{{this.minValue}}
</text>
Expand All @@ -242,17 +242,17 @@ export class GaugeEmbedded extends GlimmerComponent<GaugeSignature> {
y='115'
text-anchor='end'
font-size='10'
fill='var(--muted-foreground, #94a3b8)'
fill='var(--muted-foreground)'
>
{{this.maxValue}}
</text>
<circle cx='100' cy='100' r='6' fill='var(--foreground, #1e293b)' />
<circle cx='100' cy='100' r='6' fill='var(--foreground)' />
<line
x1='100'
y1='100'
x2='100'
y2='40'
stroke='var(--foreground, #1e293b)'
stroke='var(--foreground)'
stroke-width='3'
stroke-linecap='round'
style={{this.needleStyle}}
Expand Down
47 changes: 14 additions & 33 deletions packages/base/number/components/progress-bar.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {
getNumericValue,
calculatePercentage,
getFormattedDisplayValue,
statusRampColor,
} from '../util/index';

export interface ProgressBarOptions {
Expand Down Expand Up @@ -59,19 +60,9 @@ export class ProgressBarAtom extends GlimmerComponent<ProgressBarSignature> {

get fillColor() {
if (this.options.useGradient === false) {
return 'var(--primary, #3b82f6)';
return 'var(--primary)';
}
const p = this.percentage;
if (p <= 25) {
return 'var(--destructive, #ef4444)';
}
if (p <= 50) {
return 'var(--warning, #f59e0b)';
}
if (p <= 75) {
return 'var(--accent, #eab308)';
}
return 'var(--success, #22c55e)';
return statusRampColor(this.percentage);
}

get fillStyle() {
Expand All @@ -83,7 +74,11 @@ export class ProgressBarAtom extends GlimmerComponent<ProgressBarSignature> {
<template>
<span class='progress-bar-atom'>
<div class='progress-bar-track'>
<div class='progress-bar-fill' style={{this.fillStyle}}></div>
<div
class='progress-bar-fill'
style={{this.fillStyle}}
data-test-progress-bar-fill
></div>
</div>
</span>

Expand All @@ -97,7 +92,7 @@ export class ProgressBarAtom extends GlimmerComponent<ProgressBarSignature> {
position: relative;
width: 100%;
height: 0.5rem;
background: var(--muted, #f1f5f9);
background: var(--muted);
border-radius: 999px;
overflow: hidden;
}
Expand Down Expand Up @@ -143,24 +138,9 @@ export class ProgressBarEmbedded extends GlimmerComponent<ProgressBarSignature>

get fillColor() {
if (this.options.useGradient === false) {
return 'var(--primary, #3b82f6)';
}
const p = this.percentage;
// State-based colors based on progress percentage
// 0-25%: Red (low progress)
if (p <= 25) {
return 'var(--destructive, #ef4444)';
}
// 25-50%: Orange (moderate progress)
if (p <= 50) {
return 'var(--warning, #f59e0b)';
}
// 50-75%: Yellow (good progress)
if (p <= 75) {
return 'var(--accent, #eab308)';
return 'var(--primary)';
}
// 75-100%: Green (excellent progress)
return 'var(--success, #22c55e)';
return statusRampColor(this.percentage);
}

get fillStyle() {
Expand Down Expand Up @@ -212,6 +192,7 @@ export class ProgressBarEmbedded extends GlimmerComponent<ProgressBarSignature>
<div
class='progress-bar-fill {{if this.isGradient "gradient" "solid"}}'
style={{this.fillStyle}}
data-test-progress-bar-fill
>
{{#if this.shouldShowText}}
<div class='progress-bar-info'>
Expand All @@ -232,7 +213,7 @@ export class ProgressBarEmbedded extends GlimmerComponent<ProgressBarSignature>
position: relative;
width: 100%;
height: 100%;
background: var(--muted, #f1f5f9);
background: var(--muted);
border-radius: 999px;
overflow: hidden;
}
Expand All @@ -259,7 +240,7 @@ export class ProgressBarEmbedded extends GlimmerComponent<ProgressBarSignature>
.progress-bar-label {
font-size: 0.625rem;
font-weight: 600;
color: var(--primary-foreground, #ffffff);
color: var(--primary-foreground);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Expand Down
46 changes: 11 additions & 35 deletions packages/base/number/components/progress-circle.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
getNumericValue,
calculatePercentage,
getFormattedDisplayValue,
statusRampColor,
} from '../util/index';

export interface ProgressCircleOptions {
Expand Down Expand Up @@ -59,19 +60,9 @@ export class ProgressCircleAtom extends GlimmerComponent<ProgressCircleSignature

get fillColor() {
if (this.options.useGradient === false) {
return 'var(--primary, #3b82f6)';
return 'var(--primary)';
}
const p = this.percentage;
if (p <= 25) {
return 'var(--destructive, #ef4444)';
}
if (p <= 50) {
return 'var(--warning, #f59e0b)';
}
if (p <= 75) {
return 'var(--accent, #eab308)';
}
return 'var(--success, #22c55e)';
return statusRampColor(this.percentage);
}

<template>
Expand Down Expand Up @@ -101,7 +92,7 @@ export class ProgressCircleAtom extends GlimmerComponent<ProgressCircleSignature
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--muted, #f1f5f9);
background: var(--muted);
overflow: hidden;
}
.progress-circle-track {
Expand All @@ -118,7 +109,7 @@ export class ProgressCircleAtom extends GlimmerComponent<ProgressCircleSignature
.progress-circle-fill {
position: absolute;
inset: 0.25rem;
background: var(--background, #ffffff);
background: var(--background);
border-radius: 50%;
}
</style>
Expand Down Expand Up @@ -154,24 +145,9 @@ export class ProgressCircleEmbedded extends GlimmerComponent<ProgressCircleSigna

get fillColor() {
if (this.options.useGradient === false) {
return 'var(--primary, #3b82f6)';
}
const p = this.percentage;
// State-based colors based on progress percentage
// 0-25%: Red (low progress)
if (p <= 25) {
return 'var(--destructive, #ef4444)';
}
// 25-50%: Orange (moderate progress)
if (p <= 50) {
return 'var(--warning, #f59e0b)';
}
// 50-75%: Yellow (good progress)
if (p <= 75) {
return 'var(--accent, #eab308)';
return 'var(--primary)';
}
// 75-100%: Green (excellent progress)
return 'var(--success, #22c55e)';
return statusRampColor(this.percentage);
}

get displayValue() {
Expand Down Expand Up @@ -240,7 +216,7 @@ export class ProgressCircleEmbedded extends GlimmerComponent<ProgressCircleSigna
width: var(--progress-circle-size, 120px);
height: var(--progress-circle-size, 120px);
border-radius: 50%;
background: var(--muted, #f1f5f9);
background: var(--muted);
overflow: hidden;
}
.progress-circle-track {
Expand All @@ -257,7 +233,7 @@ export class ProgressCircleEmbedded extends GlimmerComponent<ProgressCircleSigna
.progress-circle-fill {
position: absolute;
inset: var(--progress-circle-stroke-width, 10px);
background: var(--background, #ffffff);
background: var(--background);
border-radius: 50%;
}
.progress-circle-content {
Expand All @@ -273,13 +249,13 @@ export class ProgressCircleEmbedded extends GlimmerComponent<ProgressCircleSigna
.progress-circle-value {
font-size: var(--progress-circle-value-size, 1.5rem);
font-weight: 700;
color: var(--foreground, #0f172a);
color: var(--foreground);
line-height: 1;
}
.progress-circle-max {
font-size: var(--progress-circle-max-size, 0.875rem);
font-weight: 500;
color: var(--muted-foreground, #64748b);
color: var(--muted-foreground);
}
</style>
</template>
Expand Down
Loading
Loading