Skip to content

chore: Refactor visual accent colors to use tokens #4745

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
at-susie merged 10 commits into from
Jul 27, 2026
Merged

chore: Refactor visual accent colors to use tokens #4745

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
dc0fb6f
chore: Refactor visual accent colors to use explicit token references
at-susie Jul 20, 2026
b66bbcc
chore: Bring the hexToRgba
at-susie Jul 20, 2026
3b5916d
chore: Refactor visual accent styles
at-susie Jul 22, 2026
7605dac
chore: Remove unnecessary reference token
at-susie Jul 22, 2026
d119717
chore: Update accent indigo and remove error-500 color tokens
at-susie Jul 22, 2026
70445a6
chore: Updated token names for the visual-accent
at-susie Jul 22, 2026
3e6bba6
chore: Update visual accent and badge styles to be latest ones
at-susie Jul 23, 2026
8200881
chore: Add missing palette and update snapshots
at-susie Jul 23, 2026
9e7719d
chore: Remove rgba converting function and apply raw rgba values
at-susie Jul 24, 2026
ac49215
chore: Increase size limit
at-susie Jul 27, 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
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@
{
"path": "lib/components/internal/widget-exports.js",
"brotli": false,
"limit": "1360 kB",
"limit": "1370 kB",
"ignore": "react-dom"
}
],
Expand Down
35 changes: 17 additions & 18 deletions pages/box/visual-accent.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,29 +15,28 @@ import ScreenshotArea from '../utils/screenshot-area';
// ─── Data ──────────────────────────────────────────────────────────────────────

const ALL_VARIANTS: BoxProps.VisualAccent.Color[] = [
'red',
'yellow',
'grey',
'indigo',
'red',
'green',
'orange',
'purple',
'mint',
'lime',
'grey',
'yellow',

'amber',
'teal',
'cyan',
'purple',
'blue',
'violet',
'fuchsia',
'magenta',
'lime',

'violet',

'pink',
'rose',
'amber',
'orange',
];

const BOX_VARIANTS: { variant: BoxProps['variant']; label: string; content: string }[] = [
{ variant: 'h3', label: 'h3', content: 'Heading 3' },
{ variant: 'p', label: 'p', content: 'Body paragraph text' },
{ variant: 'h3', label: 'h3', content: 'Heading' },
{ variant: 'p', label: 'p', content: 'Paragraph' },
];

const LIST_ITEMS: { id: string; content: string; icon: string; color: BoxProps.VisualAccent.Color }[] = [
Expand All @@ -46,7 +45,7 @@ const LIST_ITEMS: { id: string; content: string; icon: string; color: BoxProps.V
{ id: 'network', content: 'Network configuration', icon: 'globe', color: 'grey' },
{ id: 'multi-session', content: 'Multi-session data', icon: 'multiscreen', color: 'purple' },
{ id: 'alert', content: 'Alert center', icon: 'security', color: 'red' },
{ id: 'communication', content: 'Communication', icon: 'contact', color: 'mint' },
{ id: 'communication', content: 'Communication', icon: 'contact', color: 'teal' },
];

// ─── Page ──────────────────────────────────────────────────────────────────────
Expand Down Expand Up @@ -114,7 +113,7 @@ export default function StyleBoxPage() {
label: 'Components',
value: (
<Box
visualAccent={{ color: 'mint' }}
visualAccent={{ color: 'teal' }}
padding={{ horizontal: 'xxxs', vertical: 'xxxs' }}
margin={{ top: 'xxs' }}
>
Expand All @@ -126,7 +125,7 @@ export default function StyleBoxPage() {
label: 'Patterns',
value: (
<Box
visualAccent={{ color: 'mint' }}
visualAccent={{ color: 'teal' }}
padding={{ horizontal: 'xxxs', vertical: 'xxxs' }}
margin={{ top: 'xxs' }}
>
Expand All @@ -138,7 +137,7 @@ export default function StyleBoxPage() {
label: 'Demos',
value: (
<Box
visualAccent={{ color: 'mint' }}
visualAccent={{ color: 'teal' }}
padding={{ horizontal: 'xxxs', vertical: 'xxxs' }}
margin={{ top: 'xxs' }}
>
Expand Down
Loading
Loading