Skip to content

feat(tokens): redesign color palette scales (QCDL-29) #81

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
Fernando Jesus (fernandorjesus) merged 2 commits into from
Jul 20, 2026
Merged

feat(tokens): redesign color palette scales (QCDL-29) #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cd1eaa8
feat(tokens): redesign color palette scales (QCDL-29)
fernandorjesus Jul 16, 2026
11d70ef
Merge branch 'main' of github.com:lastro-co/design-system into featur…
fernandorjesus Jul 17, 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 src/components/ui/ContextMenu/ContextMenu.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ export const WithCustomColors: Story = {
Clique com botão direito aqui
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem color="#49317A">Ação Primária</ContextMenuItem>
<ContextMenuItem color="#49317a">Ação Primária</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem color="#2563EB">Ação Azul</ContextMenuItem>
<ContextMenuSeparator />
Expand Down
103 changes: 97 additions & 6 deletions src/stories/Colors.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,35 +61,60 @@ const ColorPalettePage = () => (
<ColorGroup
colors={[
{
name: "purple 900",
name: "Purple 950",
cssVar: "--color-purple-950",
tailwindName: "purple-950",
},
{
name: "Purple 900",
cssVar: "--color-purple-900",
tailwindName: "purple-900",
},
{
name: "purple 800",
name: "Purple 800",
cssVar: "--color-purple-800",
tailwindName: "purple-800",
},
{
name: "purple 600",
name: "Purple 700",
cssVar: "--color-purple-700",
tailwindName: "purple-700",
},
{
name: "Purple 600",
cssVar: "--color-purple-600",
tailwindName: "purple-600",
},
{
name: "purple 500",
name: "Purple 500",
cssVar: "--color-purple-500",
tailwindName: "purple-500",
},
{
name: "purple 300",
name: "Purple 400",
cssVar: "--color-purple-400",
tailwindName: "purple-400",
},
{
name: "Purple 300",
cssVar: "--color-purple-300",
tailwindName: "purple-300",
},
{
name: "purple 100",
name: "Purple 200",
cssVar: "--color-purple-200",
tailwindName: "purple-200",
},
{
name: "Purple 100",
cssVar: "--color-purple-100",
tailwindName: "purple-100",
},
{
name: "Purple 50",
cssVar: "--color-purple-50",
tailwindName: "purple-50",
},
]}
title="Purple Colors"
/>
Expand All @@ -106,16 +131,36 @@ const ColorPalettePage = () => (
cssVar: "--color-gray-800",
tailwindName: "gray-800",
},
{
name: "Gray 700",
cssVar: "--color-gray-700",
tailwindName: "gray-700",
},
{
name: "Gray 600",
cssVar: "--color-gray-600",
tailwindName: "gray-600",
},
{
name: "Gray 500",
cssVar: "--color-gray-500",
tailwindName: "gray-500",
},
{
name: "Gray 400",
cssVar: "--color-gray-400",
tailwindName: "gray-400",
},
{
name: "Gray 300",
cssVar: "--color-gray-300",
tailwindName: "gray-300",
},
{
name: "Gray 200",
cssVar: "--color-gray-200",
tailwindName: "gray-200",
},
{
name: "Gray 100",
cssVar: "--color-gray-100",
Expand Down Expand Up @@ -146,6 +191,16 @@ const ColorPalettePage = () => (
cssVar: "--color-blue-600",
tailwindName: "blue-600",
},
{
name: "Blue 500",
cssVar: "--color-blue-500",
tailwindName: "blue-500",
},
{
name: "Blue 100",
cssVar: "--color-blue-100",
tailwindName: "blue-100",
},
{ name: "Blue 50", cssVar: "--color-blue-50", tailwindName: "blue-50" },
]}
title="Blue"
Expand All @@ -163,6 +218,16 @@ const ColorPalettePage = () => (
cssVar: "--color-green-600",
tailwindName: "green-600",
},
{
name: "Green 500",
cssVar: "--color-green-500",
tailwindName: "green-500",
},
{
name: "Green 100",
cssVar: "--color-green-100",
tailwindName: "green-100",
},
{
name: "Green 50",
cssVar: "--color-green-50",
Expand All @@ -184,6 +249,16 @@ const ColorPalettePage = () => (
cssVar: "--color-yellow-600",
tailwindName: "yellow-600",
},
{
name: "Yellow 500",
cssVar: "--color-yellow-500",
tailwindName: "yellow-500",
},
{
name: "Yellow 100",
cssVar: "--color-yellow-100",
tailwindName: "yellow-100",
},
{
name: "Yellow 50",
cssVar: "--color-yellow-50",
Expand All @@ -197,18 +272,34 @@ const ColorPalettePage = () => (
colors={[
{ name: "Red 800", cssVar: "--color-red-800", tailwindName: "red-800" },
{ name: "Red 600", cssVar: "--color-red-600", tailwindName: "red-600" },
{ name: "Red 500", cssVar: "--color-red-500", tailwindName: "red-500" },
{
name: "Red 100",
cssVar: "--color-red-100",
tailwindName: "red-100",
},
{ name: "Red 50", cssVar: "--color-red-50", tailwindName: "red-50" },
]}
title="Red"
/>

<ColorGroup
colors={[
{
name: "Apricot 800",
cssVar: "--color-apricot-800",
tailwindName: "apricot-800",
},
{
name: "Apricot 500",
cssVar: "--color-apricot-500",
tailwindName: "apricot-500",
},
{
name: "Apricot 50",
cssVar: "--color-apricot-50",
tailwindName: "apricot-50",
},
{
name: "Mint 500",
cssVar: "--color-mint-500",
Expand Down
60 changes: 38 additions & 22 deletions src/styles/tokens.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,53 @@
@theme {
--color-purple-950: #1e1338;
--color-purple-900: #2e1f4d;
--color-purple-800: #49317a;
--color-purple-700: #593d96;
--color-purple-600: #6845ad;
--color-purple-500: #9664fa;
--color-purple-400: #d8ceee;
--color-purple-300: #eae0fe;
--color-purple-100: #f3e8ff;
--color-purple-500: #7e56c9;
--color-purple-400: #9664fa;
--color-purple-300: #b18dfb;
--color-purple-200: #cebafc;
--color-purple-100: #e6dbfe;
--color-purple-50: #f4f0ff;

--color-gray-900: #323232;
--color-gray-800: #646464;
--color-gray-600: #999999;
--color-gray-300: #e5e5e5;
--color-gray-100: #f5f5f5;
--color-gray-50: #fafafa;
--color-gray-900: #1a1a2e;
--color-gray-800: #2d2d3f;
--color-gray-700: #4a4a5a;
--color-gray-600: #6b6b7b;
--color-gray-500: #8e8e9e;
--color-gray-400: #b0b0bc;
--color-gray-300: #d1d1d9;
--color-gray-200: #e5e5eb;
--color-gray-100: #f0f0f4;
--color-gray-50: #f8f8fa;

--color-white: #ffffff;
--color-black: #1a1a1a;

--color-blue-800: #0a4f7f;
--color-blue-600: #0068b3;
--color-blue-50: #eef8ff;
--color-blue-800: #0c4a8a;
--color-blue-600: #1d6bb5;
--color-blue-500: #2563eb;
--color-blue-100: #dbeafe;
--color-blue-50: #eff6ff;

--color-green-800: #075539;
--color-green-600: #0a8558;
--color-green-50: #e7f8f3;
--color-green-800: #166534;
--color-green-600: #16a34a;
--color-green-500: #22c55e;
--color-green-100: #dcfce7;
--color-green-50: #f0fdf4;

--color-yellow-800: #714d09;
--color-yellow-600: #ffb82e;
--color-yellow-50: #fff8e7;
--color-yellow-800: #854d0e;
--color-yellow-600: #ca8a04;
--color-yellow-500: #eab308;
--color-yellow-100: #fef9c3;
--color-yellow-50: #fefce8;

--color-red-800: #8d0c0c;
--color-red-600: #b31919;
--color-red-50: #feefef;
--color-red-800: #991b1b;
--color-red-600: #b91c1c;
--color-red-500: #ef4444;
--color-red-100: #fee2e2;
--color-red-50: #fef2f2;

--color-apricot-50: #fff1e7;
--color-apricot-500: #ff793e;
Expand Down
2 changes: 1 addition & 1 deletion tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export default {
theme: {
extend: {
colors: {
"brand-purple": "#49317A",
"brand-purple": "#49317a",
},
fontFamily: {
"red-hat-text": ['"Red Hat Text"', "sans-serif"],
Expand Down
Loading