design: two-color palette — rename all tokens to --cream / --blue

Replace ochre-clay, carbon-black, burnt-oxide, slate-indigo with clean
two-color system: --cream (#f4f0e8) and --blue (#041cf3). Update every
component, utility class, and test assertion.
This commit is contained in:
Ilia Mashkov
2026-05-11 12:59:32 +03:00
parent fed9c97ddb
commit 30f8e4be95
21 changed files with 111 additions and 161 deletions
+5 -9
View File
@@ -18,17 +18,13 @@ describe('Section', () => {
});
describe('background variants', () => {
it('defaults to ochre background', () => {
it('defaults to cream background', () => {
const { container } = render(<Section>x</Section>);
expect(container.querySelector('section')).toHaveClass('bg-ochre-clay', 'text-carbon-black');
expect(container.querySelector('section')).toHaveClass('bg-cream', 'text-blue');
});
it('applies slate background', () => {
const { container } = render(<Section background="slate">x</Section>);
expect(container.querySelector('section')).toHaveClass('bg-slate-indigo', 'text-ochre-clay');
});
it('applies white background', () => {
const { container } = render(<Section background="white">x</Section>);
expect(container.querySelector('section')).toHaveClass('bg-white', 'text-carbon-black');
it('applies blue background', () => {
const { container } = render(<Section background="blue">x</Section>);
expect(container.querySelector('section')).toHaveClass('bg-blue', 'text-cream');
});
});
+5 -6
View File
@@ -1,7 +1,7 @@
import type { ReactNode } from 'react';
import { cn } from '$shared/lib';
export type SectionBackground = 'ochre' | 'slate' | 'white';
export type SectionBackground = 'cream' | 'blue';
export type ContainerSize = 'default' | 'wide' | 'ultra-wide';
interface SectionProps {
@@ -11,7 +11,7 @@ interface SectionProps {
children: ReactNode;
/**
* Background color variant
* @default 'ochre'
* @default 'cream'
*/
background?: SectionBackground;
/**
@@ -26,15 +26,14 @@ interface SectionProps {
}
const BACKGROUNDS: Record<SectionBackground, string> = {
ochre: 'bg-ochre-clay text-carbon-black',
slate: 'bg-slate-indigo text-ochre-clay',
white: 'bg-white text-carbon-black',
cream: 'bg-cream text-blue',
blue: 'bg-blue text-cream',
};
/**
* Full-width page section with background and optional borders.
*/
export function Section({ children, background = 'ochre', bordered = false, className }: SectionProps) {
export function Section({ children, background = 'cream', bordered = false, className }: SectionProps) {
return (
<section className={cn(BACKGROUNDS[background], bordered && 'brutal-border-top brutal-border-bottom', className)}>
{children}