From ea7e70dd17cbcfccd2488ee028edb333978636ef Mon Sep 17 00:00:00 2001 From: Tsahi Matsliah Date: Wed, 17 Jun 2026 14:20:14 +0300 Subject: [PATCH 1/6] feat: re-tone color palette toward violet MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Shift the raw color ramps toward a true-violet vibe (brand cabbage ~#9333ea), with subtly violet-tinted neutrals and slightly tinted status colors. Token names, shade levels, semantic mappings and all opacity percentages are unchanged — only the underlying hues move. Adds a Tokens/Palette Re-tone (Purple) Storybook page comparing old vs new ramps, resolved semantic tokens (dark + light) and live components across product surfaces. Co-Authored-By: Claude Opus 4.8 --- packages/extension/src/frame/render.ts | 2 +- .../onboarding/shared/PricingPlan.module.css | 2 +- packages/shared/src/styles/base.css | 8 +- packages/shared/src/styles/colors.ts | 216 ++++++------ packages/shared/tailwind/colors.ts | 220 ++++++------ packages/shared/tailwind/overlay.ts | 144 ++++---- .../stories/tokens/PaletteRetone.stories.tsx | 326 ++++++++++++++++++ 7 files changed, 622 insertions(+), 296 deletions(-) create mode 100644 packages/storybook/stories/tokens/PaletteRetone.stories.tsx diff --git a/packages/extension/src/frame/render.ts b/packages/extension/src/frame/render.ts index 5851011186a..c0a0e49da7a 100644 --- a/packages/extension/src/frame/render.ts +++ b/packages/extension/src/frame/render.ts @@ -127,7 +127,7 @@ const ensureStyles = (): void => { padding: 0 1rem; border: 0; border-radius: 12px; - background: #c029f0; + background: #8E2BEE; color: #ffffff; font: inherit; font-size: 0.9375rem; diff --git a/packages/shared/src/features/onboarding/shared/PricingPlan.module.css b/packages/shared/src/features/onboarding/shared/PricingPlan.module.css index 404abebd3f0..5e442374cfb 100644 --- a/packages/shared/src/features/onboarding/shared/PricingPlan.module.css +++ b/packages/shared/src/features/onboarding/shared/PricingPlan.module.css @@ -19,7 +19,7 @@ } &::before { - background: linear-gradient(135.18deg, #E769FB 0%, #9E70F8 24.16%, #68A6FD 40%, #9E70F8 71.33%, #D473F4 100%); + background: linear-gradient(135.18deg, #C16AFA 0%, #9670F8 24.16%, #6B85F9 40%, #9670F8 71.33%, #AC4EF4 100%); content: ''; position: absolute; top: 0; diff --git a/packages/shared/src/styles/base.css b/packages/shared/src/styles/base.css index 7b803a4e5a7..abcd3dc512d 100644 --- a/packages/shared/src/styles/base.css +++ b/packages/shared/src/styles/base.css @@ -814,7 +814,7 @@ details.right-icon { } .squad-background-fade { - background: radial-gradient(ellipse, #c029f088 0%, #c029f000 400px); + background: radial-gradient(ellipse, #8E2BEE88 0%, #8E2BEE00 400px); background-size: 1200px 500px; background-position: center -250px; background-repeat: no-repeat; @@ -911,7 +911,7 @@ meter::-webkit-meter-bar { } &-best-price { - background: linear-gradient(135deg, #E769FB 0%, #9E70F8 44.71%, #68A6FD 100%); + background: linear-gradient(135deg, #C16AFA 0%, #9670F8 44.71%, #6B85F9 100%); } } @@ -1077,11 +1077,11 @@ meter::-webkit-meter-bar { } .top-hero-panel-border { - background: linear-gradient(122deg, #2d1b8f 0%, #5d1fb7 45%, #ff00a8 100%); + background: linear-gradient(122deg, #331EBA 0%, #600FCD 45%, #F956AF 100%); } .top-hero-glow { - background: rgb(255 0 168 / 35%); + background: rgb(249 86 175 / 35%); } .top-hero-aurora { diff --git a/packages/shared/src/styles/colors.ts b/packages/shared/src/styles/colors.ts index 27342ceb367..0eef4331459 100644 --- a/packages/shared/src/styles/colors.ts +++ b/packages/shared/src/styles/colors.ts @@ -39,48 +39,48 @@ type ColorPalette = Record, Color> & const colors: ColorPalette = { burger: { - '10': '#C98464', - '20': '#C07A5B', - '30': '#B67052', - '40': '#AD6648', - '50': '#A0583C', - '60': '#914B31', - '70': '#864129', - '80': '#7C3822', - '90': '#722F1B', + '10': '#C68B67', + '20': '#BD815E', + '30': '#B47755', + '40': '#AA6D4B', + '50': '#9E5F3F', + '60': '#8F5233', + '70': '#84482B', + '80': '#7A3F24', + '90': '#70361D', }, blueCheese: { - '10': '#6FF1F6', - '20': '#5CECF1', - '30': '#45E5ED', - '40': '#2CDCE6', - '50': '#0DCFDC', - '60': '#08C0CE', - '70': '#05B5C5', - '80': '#02AABD', - '90': '#009FB3', + '10': '#71E6F4', + '20': '#5EE0EF', + '30': '#48D8EA', + '40': '#2FCDE3', + '50': '#10BFD9', + '60': '#0BB1CB', + '70': '#08A6C2', + '80': '#059CBA', + '90': '#0391B0', }, avocado: { - '10': '#74F3BC', - '20': '#65F1AE', - '30': '#51EBA0', - '40': '#39E58C', - '50': '#1DDC6F', - '60': '#15CE5C', - '70': '#0FC54F', - '80': '#0ABD42', - '90': '#04B435', + '10': '#76F1C8', + '20': '#67EFBB', + '30': '#53E9AF', + '40': '#3CE29D', + '50': '#20D982', + '60': '#18CB6F', + '70': '#12C261', + '80': '#0DBA54', + '90': '#07B147', }, lettuce: { - '10': '#DBFE6C', - '20': '#CCFB5B', - '30': '#BDF849', - '40': '#ACF535', - '50': '#92F21D', - '60': '#7DE914', - '70': '#6FE20F', - '80': '#62DB09', - '90': '#58D404', + '10': '#D0FC6E', + '20': '#C1F95D', + '30': '#B1F54C', + '40': '#9FF238', + '50': '#84EF20', + '60': '#6FE617', + '70': '#62DF12', + '80': '#55D80C', + '90': '#4BD107', }, cheese: { '10': '#FFF76F', @@ -94,93 +94,93 @@ const colors: ColorPalette = { '90': '#F3BC00', }, bun: { - '10': '#FFB760', - '20': '#FFAA55', - '30': '#FF9D48', - '40': '#FF8E3B', - '50': '#FF7A2B', - '60': '#FA6620', - '70': '#F55919', - '80': '#F04C11', - '90': '#EB3F0A', + '10': '#FFB260', + '20': '#FFA455', + '30': '#FF9748', + '40': '#FF873B', + '50': '#FF732B', + '60': '#FA5F20', + '70': '#F55219', + '80': '#F04511', + '90': '#EB370A', }, ketchup: { - '10': '#F3796C', - '20': '#ED685C', - '30': '#E7574B', - '40': '#E04337', - '50': '#D52B20', - '60': '#C72017', - '70': '#BD1911', - '80': '#B3110B', - '90': '#A90A05', + '10': '#F1746E', + '20': '#EB635E', + '30': '#E5514D', + '40': '#DD3D3A', + '50': '#D22523', + '60': '#C41A1A', + '70': '#BA1414', + '80': '#B00E10', + '90': '#A7070B', }, bacon: { - '10': '#FE7AB6', - '20': '#FD6EA9', - '30': '#FD619D', - '40': '#FC538D', - '50': '#FC4079', - '60': '#F33163', - '70': '#EA2654', - '80': '#E21C48', - '90': '#D9113A', + '10': '#FC7CD0', + '20': '#FB70C5', + '30': '#FB63BC', + '40': '#F956AF', + '50': '#F9439F', + '60': '#F0348A', + '70': '#E7297C', + '80': '#DF1F70', + '90': '#D61463', }, cabbage: { - '10': '#E669FB', - '20': '#E05CF8', - '30': '#D74CF6', - '40': '#CE3DF3', - '50': '#C029F0', - '60': '#AC1DE4', - '70': '#9E15D9', - '80': '#900DCF', - '90': '#8505C4', + '10': '#C16AFA', + '20': '#B95EF6', + '30': '#AC4EF4', + '40': '#A03FF1', + '50': '#8E2BEE', + '60': '#7A1FE2', + '70': '#6D17D7', + '80': '#600FCD', + '90': '#5607C2', }, onion: { - '10': '#9D70F8', - '20': '#8D62F4', - '30': '#8055F0', - '40': '#7147ED', - '50': '#5F37E9', - '60': '#4E2CD7', - '70': '#4325C8', - '80': '#3B1EBA', - '90': '#3319AD', + '10': '#9670F8', + '20': '#8662F4', + '30': '#7855F0', + '40': '#6947ED', + '50': '#5637E9', + '60': '#452CD7', + '70': '#3B25C8', + '80': '#331EBA', + '90': '#2C19AD', }, water: { - '10': '#68A6FC', - '20': '#5C9BFA', - '30': '#508CF9', - '40': '#427EF7', - '50': '#3169F5', - '60': '#2556ED', - '70': '#1D49E6', - '80': '#153CE0', - '90': '#0D31D9', + '10': '#6B85F9', + '20': '#5F78F7', + '30': '#5367F6', + '40': '#4657F3', + '50': '#353FF1', + '60': '#292BE9', + '70': '#2421E2', + '80': '#2119DC', + '90': '#1C11D5', }, salt: { '0': '#FFFFFF', - '10': '#F5F8FC', - '20': '#EDF0F7', - '30': '#E4E9F2', - '40': '#DBE1ED', - '50': '#CFD6E6', - '60': '#C2CADE', - '70': '#B9C2D9', - '80': '#B0BBD4', - '90': '#A8B3CF', + '10': '#F9F8F9', + '20': '#F3F1F3', + '30': '#ECE9ED', + '40': '#E5E2E6', + '50': '#DCD7DE', + '60': '#D2CCD4', + '70': '#CBC4CE', + '80': '#C5BDC7', + '90': '#BFB5C2', }, pepper: { - '10': '#525866', - '20': '#494E5B', - '30': '#404551', - '40': '#383C47', - '50': '#2D313A', - '60': '#22262D', - '70': '#1C1F26', - '80': '#17191F', - '90': '#0E1217', + '10': '#585167', + '20': '#4E485C', + '30': '#454051', + '40': '#3C3847', + '50': '#312D3A', + '60': '#26232C', + '70': '#1F1D25', + '80': '#1A181E', + '90': '#121015', }, twitter: { '10': '#37BBF6', diff --git a/packages/shared/tailwind/colors.ts b/packages/shared/tailwind/colors.ts index 107334d73ec..3d1a463772a 100644 --- a/packages/shared/tailwind/colors.ts +++ b/packages/shared/tailwind/colors.ts @@ -1,49 +1,49 @@ const colors = { burger: { - 10: '#C98464', - 20: '#C07A5B', - 30: '#B67052', - 40: '#AD6648', - 50: '#A0583C', - 60: '#914B31', - 70: '#864129', - 80: '#7C3822', - 90: '#722F1B', + 10: '#C68B67', + 20: '#BD815E', + 30: '#B47755', + 40: '#AA6D4B', + 50: '#9E5F3F', + 60: '#8F5233', + 70: '#84482B', + 80: '#7A3F24', + 90: '#70361D', }, blueCheese: { - 10: '#6FF1F6', - 20: '#5CECF1', - 30: '#45E5ED', - 40: '#2CDCE6', - 50: '#0DCFDC', - 60: '#08C0CE', - 70: '#05B5C5', - 80: '#02AABD', - 90: '#009FB3', + 10: '#71E6F4', + 20: '#5EE0EF', + 30: '#48D8EA', + 40: '#2FCDE3', + 50: '#10BFD9', + 60: '#0BB1CB', + 70: '#08A6C2', + 80: '#059CBA', + 90: '#0391B0', lightLabel: 'var(--theme-text-primary)', }, avocado: { - 10: '#74F3BC', - 20: '#65F1AE', - 30: '#51EBA0', - 40: '#39E58C', - 50: '#1DDC6F', - 60: '#15CE5C', - 70: '#0FC54F', - 80: '#0ABD42', - 90: '#04B435', + 10: '#76F1C8', + 20: '#67EFBB', + 30: '#53E9AF', + 40: '#3CE29D', + 50: '#20D982', + 60: '#18CB6F', + 70: '#12C261', + 80: '#0DBA54', + 90: '#07B147', lightLabel: 'var(--theme-text-primary)', }, lettuce: { - 10: '#DBFE6C', - 20: '#CCFB5B', - 30: '#BDF849', - 40: '#ACF535', - 50: '#92F21D', - 60: '#7DE914', - 70: '#6FE20F', - 80: '#62DB09', - 90: '#58D404', + 10: '#D0FC6E', + 20: '#C1F95D', + 30: '#B1F54C', + 40: '#9FF238', + 50: '#84EF20', + 60: '#6FE617', + 70: '#62DF12', + 80: '#55D80C', + 90: '#4BD107', lightLabel: 'var(--theme-text-primary)', }, cheese: { @@ -59,97 +59,97 @@ const colors = { lightLabel: 'var(--theme-text-primary)', }, bun: { - 10: '#FFB760', - 20: '#FFAA55', - 30: '#FF9D48', - 40: '#FF8E3B', - 50: '#FF7A2B', - 60: '#FA6620', - 70: '#F55919', - 80: '#F04C11', - 90: '#EB3F0A', + 10: '#FFB260', + 20: '#FFA455', + 30: '#FF9748', + 40: '#FF873B', + 50: '#FF732B', + 60: '#FA5F20', + 70: '#F55219', + 80: '#F04511', + 90: '#EB370A', lightLabel: 'var(--theme-text-primary)', }, ketchup: { - 10: '#F3796C', - 20: '#ED685C', - 30: '#E7574B', - 40: '#E04337', - 50: '#D52B20', - 60: '#C72017', - 70: '#BD1911', - 80: '#B3110B', - 90: '#A90A05', + 10: '#F1746E', + 20: '#EB635E', + 30: '#E5514D', + 40: '#DD3D3A', + 50: '#D22523', + 60: '#C41A1A', + 70: '#BA1414', + 80: '#B00E10', + 90: '#A7070B', }, bacon: { - 10: '#FE7AB6', - 20: '#FD6EA9', - 30: '#FD619D', - 40: '#FC538D', - 50: '#FC4079', - 60: '#F33163', - 70: '#EA2654', - 80: '#E21C48', - 90: '#D9113A', + 10: '#FC7CD0', + 20: '#FB70C5', + 30: '#FB63BC', + 40: '#F956AF', + 50: '#F9439F', + 60: '#F0348A', + 70: '#E7297C', + 80: '#DF1F70', + 90: '#D61463', }, cabbage: { - 0: '#E669FB00', - 10: '#E669FB', - 20: '#E05CF8', - 30: '#D74CF6', - 40: '#CE3DF3', - 50: '#C029F0', - 60: '#AC1DE4', - 70: '#9E15D9', - 80: '#900DCF', - 90: '#8505C4', + 0: '#C16AFA00', + 10: '#C16AFA', + 20: '#B95EF6', + 30: '#AC4EF4', + 40: '#A03FF1', + 50: '#8E2BEE', + 60: '#7A1FE2', + 70: '#6D17D7', + 80: '#600FCD', + 90: '#5607C2', }, onion: { - 0: '#9D70F800', - 10: '#9D70F8', - 20: '#8D62F4', - 30: '#8055F0', - 40: '#7147ED', - 50: '#5F37E9', - 60: '#4E2CD7', - 70: '#4325C8', - 80: '#3B1EBA', - 90: '#3319AD', + 0: '#9670F800', + 10: '#9670F8', + 20: '#8662F4', + 30: '#7855F0', + 40: '#6947ED', + 50: '#5637E9', + 60: '#452CD7', + 70: '#3B25C8', + 80: '#331EBA', + 90: '#2C19AD', darkLabel: '#FFFFFF', }, water: { - 10: '#68A6FC', - 20: '#5C9BFA', - 30: '#508CF9', - 40: '#427EF7', - 50: '#3169F5', - 60: '#2556ED', - 70: '#1D49E6', - 80: '#153CE0', - 90: '#0D31D9', + 10: '#6B85F9', + 20: '#5F78F7', + 30: '#5367F6', + 40: '#4657F3', + 50: '#353FF1', + 60: '#292BE9', + 70: '#2421E2', + 80: '#2119DC', + 90: '#1C11D5', }, salt: { 0: '#FFFFFF', - 10: '#F5F8FC', - 20: '#EDF0F7', - 30: '#E4E9F2', - 40: '#DBE1ED', - 50: '#CFD6E6', - 60: '#C2CADE', - 70: '#B9C2D9', - 80: '#B0BBD4', - 90: '#A8B3CF', + 10: '#F9F8F9', + 20: '#F3F1F3', + 30: '#ECE9ED', + 40: '#E5E2E6', + 50: '#DCD7DE', + 60: '#D2CCD4', + 70: '#CBC4CE', + 80: '#C5BDC7', + 90: '#BFB5C2', }, pepper: { - 10: '#525866', - 20: '#494E5B', - 30: '#404551', - 40: '#383C47', - 50: '#2D313A', - 60: '#22262D', - 70: '#1C1F26', - 80: '#17191F', - 90: '#0E1217', + 10: '#585167', + 20: '#4E485C', + 30: '#454051', + 40: '#3C3847', + 50: '#312D3A', + 60: '#26232C', + 70: '#1F1D25', + 80: '#1A181E', + 90: '#121015', }, twitter: { 10: '#000000', diff --git a/packages/shared/tailwind/overlay.ts b/packages/shared/tailwind/overlay.ts index 6acf4e33618..718e2dca8cc 100644 --- a/packages/shared/tailwind/overlay.ts +++ b/packages/shared/tailwind/overlay.ts @@ -1,19 +1,19 @@ /** TODO: Remove these once we migrated all colors to new naming convention */ const overlayColors = { primary: { - burger: '#A0583CA3', - blueCheese: '#0DCFDCA3', - avocado: '#1DDC6FA3', - lettuce: '#92F21DA3', + burger: '#9E5F3FA3', + blueCheese: '#10BFD9A3', + avocado: '#20D982A3', + lettuce: '#84EF20A3', cheese: '#FFDF00A3', - bun: '#FF7A2BA3', - ketchup: '#D52B20A3', - bacon: '#FC4079A3', - cabbage: '#C029F0A3', - onion: '#5F37E9A3', - water: '#3169F5A3', - salt: '#A8B3CFA3', - pepper: '#0E1217A3', + bun: '#FF732BA3', + ketchup: '#D22523A3', + bacon: '#F9439FA3', + cabbage: '#8E2BEEA3', + onion: '#5637E9A3', + water: '#353FF1A3', + salt: '#BFB5C2A3', + pepper: '#121015A3', twitter: '#000000A3', whatsapp: '#20B038A3', facebook: '#3B5998A3', @@ -24,19 +24,19 @@ const overlayColors = { black: '#000000A3', }, secondary: { - burger: '#A0583C66', - blueCheese: '#0DCFDC66', - avocado: '#1DDC6F66', - lettuce: '#92F21D66', + burger: '#9E5F3F66', + blueCheese: '#10BFD966', + avocado: '#20D98266', + lettuce: '#84EF2066', cheese: '#FFDF0066', - bun: '#FF7A2B66', - ketchup: '#D52B2066', - bacon: '#FC407966', - cabbage: '#C029F066', - onion: '#5F37E966', - water: '#3169F566', - salt: '#A8B3CF66', - pepper: '#0E121766', + bun: '#FF732B66', + ketchup: '#D2252366', + bacon: '#F9439F66', + cabbage: '#8E2BEE66', + onion: '#5637E966', + water: '#353FF166', + salt: '#BFB5C266', + pepper: '#12101566', twitter: '#00000066', whatsapp: '#20B03866', facebook: '#3B599866', @@ -47,19 +47,19 @@ const overlayColors = { black: '#00000066', }, tertiary: { - burger: '#A0583C52', - blueCheese: '#0DCFDC52', - avocado: '#1DDC6F52', - lettuce: '#92F21D52', + burger: '#9E5F3F52', + blueCheese: '#10BFD952', + avocado: '#20D98252', + lettuce: '#84EF2052', cheese: '#FFDF0052', - bun: '#FF7A2B52', - ketchup: '#D52B2052', - bacon: '#FC407952', - cabbage: '#C029F052', - onion: '#5F37E952', - water: '#3169F552', - salt: '#A8B3CF52', - pepper: '#0E121752', + bun: '#FF732B52', + ketchup: '#D2252352', + bacon: '#F9439F52', + cabbage: '#8E2BEE52', + onion: '#5637E952', + water: '#353FF152', + salt: '#BFB5C252', + pepper: '#12101552', twitter: '#00000052', whatsapp: '#20B03852', facebook: '#3B599852', @@ -70,19 +70,19 @@ const overlayColors = { black: '#00000052', }, quaternary: { - burger: '#A0583C3D', - blueCheese: '#0DCFDC3D', - avocado: '#1DDC6F3D', - lettuce: '#92F21D3D', + burger: '#9E5F3F3D', + blueCheese: '#10BFD93D', + avocado: '#20D9823D', + lettuce: '#84EF203D', cheese: '#FFDF003D', - bun: '#FF7A2B3D', - ketchup: '#D52B203D', - bacon: '#FC40793D', - cabbage: '#C029F03D', - onion: '#5F37E93D', - water: '#3169F53D', - salt: '#A8B3CF3D', - pepper: '#0E12173D', + bun: '#FF732B3D', + ketchup: '#D225233D', + bacon: '#F9439F3D', + cabbage: '#8E2BEE3D', + onion: '#5637E93D', + water: '#353FF13D', + salt: '#BFB5C23D', + pepper: '#1210153D', twitter: '#0000003D', whatsapp: '#20B0383D', facebook: '#3B59983D', @@ -93,19 +93,19 @@ const overlayColors = { black: '#0000003D', }, active: { - burger: '#A0583C29', - blueCheese: '#0DCFDC29', - avocado: '#1DDC6F29', - lettuce: '#92F21D29', + burger: '#9E5F3F29', + blueCheese: '#10BFD929', + avocado: '#20D98229', + lettuce: '#84EF2029', cheese: '#FFDF0029', - bun: '#FF7A2B29', - ketchup: '#D52B2029', - bacon: '#FC407929', - cabbage: '#C029F029', - onion: '#5F37E929', - water: '#3169F529', - salt: '#A8B3CF29', - pepper: '#0E121729', + bun: '#FF732B29', + ketchup: '#D2252329', + bacon: '#F9439F29', + cabbage: '#8E2BEE29', + onion: '#5637E929', + water: '#353FF129', + salt: '#BFB5C229', + pepper: '#12101529', twitter: '#00000029', whatsapp: '#20B03829', facebook: '#3B599829', @@ -116,19 +116,19 @@ const overlayColors = { black: '#00000029', }, float: { - burger: '#A0583C14', - blueCheese: '#0DCFDC14', - avocado: '#1DDC6F14', - lettuce: '#92F21D14', + burger: '#9E5F3F14', + blueCheese: '#10BFD914', + avocado: '#20D98214', + lettuce: '#84EF2014', cheese: '#FFDF0014', - bun: '#FF7A2B14', - ketchup: '#D52B2014', - bacon: '#FC407914', - cabbage: '#C029F014', - onion: '#5F37E914', - water: '#3169F514', - salt: '#A8B3CF14', - pepper: '#0E121714', + bun: '#FF732B14', + ketchup: '#D2252314', + bacon: '#F9439F14', + cabbage: '#8E2BEE14', + onion: '#5637E914', + water: '#353FF114', + salt: '#BFB5C214', + pepper: '#12101514', twitter: '#00000014', whatsapp: '#20B03814', facebook: '#3B599814', diff --git a/packages/storybook/stories/tokens/PaletteRetone.stories.tsx b/packages/storybook/stories/tokens/PaletteRetone.stories.tsx new file mode 100644 index 00000000000..60e6c66be19 --- /dev/null +++ b/packages/storybook/stories/tokens/PaletteRetone.stories.tsx @@ -0,0 +1,326 @@ +import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react-vite'; + +/** + * Side-by-side documentation of the "purple re-tone" palette change. + * + * The token structure, names, shade levels and every opacity percentage are + * unchanged — only the underlying hues of the raw ramps were shifted. The + * swatch comparisons below are rendered with inline styles (theme-independent) + * so the OLD and NEW palettes are always visible together; the "Components & + * surfaces" story renders live Tailwind tokens and follows the Storybook theme + * toolbar so you can eyeball dark and light. + */ + +type Ramp = Record; +type Palette = Record; + +// Snapshot of the previous raw ramps (the 13 chromatic/neutral families that changed). +const OLD: Palette = { + burger: { 10:'#C98464',20:'#C07A5B',30:'#B67052',40:'#AD6648',50:'#A0583C',60:'#914B31',70:'#864129',80:'#7C3822',90:'#722F1B' }, + blueCheese: { 10:'#6FF1F6',20:'#5CECF1',30:'#45E5ED',40:'#2CDCE6',50:'#0DCFDC',60:'#08C0CE',70:'#05B5C5',80:'#02AABD',90:'#009FB3' }, + avocado: { 10:'#74F3BC',20:'#65F1AE',30:'#51EBA0',40:'#39E58C',50:'#1DDC6F',60:'#15CE5C',70:'#0FC54F',80:'#0ABD42',90:'#04B435' }, + lettuce: { 10:'#DBFE6C',20:'#CCFB5B',30:'#BDF849',40:'#ACF535',50:'#92F21D',60:'#7DE914',70:'#6FE20F',80:'#62DB09',90:'#58D404' }, + cheese: { 10:'#FFF76F',20:'#FFF35A',30:'#FFEF40',40:'#FFE923',50:'#FFDF00',60:'#FCD400',70:'#F9CC00',80:'#F6C400',90:'#F3BC00' }, + bun: { 10:'#FFB760',20:'#FFAA55',30:'#FF9D48',40:'#FF8E3B',50:'#FF7A2B',60:'#FA6620',70:'#F55919',80:'#F04C11',90:'#EB3F0A' }, + ketchup: { 10:'#F3796C',20:'#ED685C',30:'#E7574B',40:'#E04337',50:'#D52B20',60:'#C72017',70:'#BD1911',80:'#B3110B',90:'#A90A05' }, + bacon: { 10:'#FE7AB6',20:'#FD6EA9',30:'#FD619D',40:'#FC538D',50:'#FC4079',60:'#F33163',70:'#EA2654',80:'#E21C48',90:'#D9113A' }, + cabbage: { 10:'#E669FB',20:'#E05CF8',30:'#D74CF6',40:'#CE3DF3',50:'#C029F0',60:'#AC1DE4',70:'#9E15D9',80:'#900DCF',90:'#8505C4' }, + onion: { 10:'#9D70F8',20:'#8D62F4',30:'#8055F0',40:'#7147ED',50:'#5F37E9',60:'#4E2CD7',70:'#4325C8',80:'#3B1EBA',90:'#3319AD' }, + water: { 10:'#68A6FC',20:'#5C9BFA',30:'#508CF9',40:'#427EF7',50:'#3169F5',60:'#2556ED',70:'#1D49E6',80:'#153CE0',90:'#0D31D9' }, + salt: { 0:'#FFFFFF',10:'#F5F8FC',20:'#EDF0F7',30:'#E4E9F2',40:'#DBE1ED',50:'#CFD6E6',60:'#C2CADE',70:'#B9C2D9',80:'#B0BBD4',90:'#A8B3CF' }, + pepper: { 10:'#525866',20:'#494E5B',30:'#404551',40:'#383C47',50:'#2D313A',60:'#22262D',70:'#1C1F26',80:'#17191F',90:'#0E1217' }, +}; + +// The new re-toned ramps now shipping in the palette. +const NEW: Palette = { + burger: { 10:'#C68B67',20:'#BD815E',30:'#B47755',40:'#AA6D4B',50:'#9E5F3F',60:'#8F5233',70:'#84482B',80:'#7A3F24',90:'#70361D' }, + blueCheese: { 10:'#71E6F4',20:'#5EE0EF',30:'#48D8EA',40:'#2FCDE3',50:'#10BFD9',60:'#0BB1CB',70:'#08A6C2',80:'#059CBA',90:'#0391B0' }, + avocado: { 10:'#76F1C8',20:'#67EFBB',30:'#53E9AF',40:'#3CE29D',50:'#20D982',60:'#18CB6F',70:'#12C261',80:'#0DBA54',90:'#07B147' }, + lettuce: { 10:'#D0FC6E',20:'#C1F95D',30:'#B1F54C',40:'#9FF238',50:'#84EF20',60:'#6FE617',70:'#62DF12',80:'#55D80C',90:'#4BD107' }, + cheese: { 10:'#FFF76F',20:'#FFF35A',30:'#FFEF40',40:'#FFE923',50:'#FFDF00',60:'#FCD400',70:'#F9CC00',80:'#F6C400',90:'#F3BC00' }, + bun: { 10:'#FFB260',20:'#FFA455',30:'#FF9748',40:'#FF873B',50:'#FF732B',60:'#FA5F20',70:'#F55219',80:'#F04511',90:'#EB370A' }, + ketchup: { 10:'#F1746E',20:'#EB635E',30:'#E5514D',40:'#DD3D3A',50:'#D22523',60:'#C41A1A',70:'#BA1414',80:'#B00E10',90:'#A7070B' }, + bacon: { 10:'#FC7CD0',20:'#FB70C5',30:'#FB63BC',40:'#F956AF',50:'#F9439F',60:'#F0348A',70:'#E7297C',80:'#DF1F70',90:'#D61463' }, + cabbage: { 10:'#C16AFA',20:'#B95EF6',30:'#AC4EF4',40:'#A03FF1',50:'#8E2BEE',60:'#7A1FE2',70:'#6D17D7',80:'#600FCD',90:'#5607C2' }, + onion: { 10:'#9670F8',20:'#8662F4',30:'#7855F0',40:'#6947ED',50:'#5637E9',60:'#452CD7',70:'#3B25C8',80:'#331EBA',90:'#2C19AD' }, + water: { 10:'#6B85F9',20:'#5F78F7',30:'#5367F6',40:'#4657F3',50:'#353FF1',60:'#292BE9',70:'#2421E2',80:'#2119DC',90:'#1C11D5' }, + salt: { 0:'#FFFFFF',10:'#F9F8F9',20:'#F3F1F3',30:'#ECE9ED',40:'#E5E2E6',50:'#DCD7DE',60:'#D2CCD4',70:'#CBC4CE',80:'#C5BDC7',90:'#BFB5C2' }, + pepper: { 10:'#585167',20:'#4E485C',30:'#454051',40:'#3C3847',50:'#312D3A',60:'#26232C',70:'#1F1D25',80:'#1A181E',90:'#121015' }, +}; + +const FAMILIES = Object.keys(NEW); +const LEVELS = ['10','20','30','40','50','60','70','80','90']; +const WHITE = '#FFFFFF'; + +// ---------- color math ---------- +const toRgb = (h: string): [number, number, number] => { + const n = h.replace('#', ''); + return [parseInt(n.slice(0, 2), 16), parseInt(n.slice(2, 4), 16), parseInt(n.slice(4, 6), 16)]; +}; +const toHex = (r: number, g: number, b: number): string => + '#' + [r, g, b].map((v) => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, '0').toUpperCase()).join(''); +const hue = (h: string): number => { + let [r, g, b] = toRgb(h); + r /= 255; g /= 255; b /= 255; + const max = Math.max(r, g, b), min = Math.min(r, g, b), d = max - min; + if (d === 0) return 0; + let hh = 0; + if (max === r) hh = (g - b) / d + (g < b ? 6 : 0); + else if (max === g) hh = (b - r) / d + 2; + else hh = (r - g) / d + 4; + return Math.round(hh * 60); +}; +// fg painted at `alpha` opacity over bg — mirrors color-mix(... transparent N%). +const over = (fg: string, bg: string, alpha: number): string => { + const [r1, g1, b1] = toRgb(fg), [r2, g2, b2] = toRgb(bg); + return toHex(r1 * alpha + r2 * (1 - alpha), g1 * alpha + g2 * (1 - alpha), b1 * alpha + b2 * (1 - alpha)); +}; + +// ---------- semantic token resolver (mirrors base.css light/dark mixins) ---------- +type Mode = 'dark' | 'light'; +interface Token { group: string; label: string; resolve: (p: Palette, m: Mode) => string } + +// accent shade per mode: [subtlest, subtler, subtle, default, bolder] +const accent = (p: Palette, fam: string, m: Mode, role: 'subtlest'|'subtler'|'subtle'|'default'|'bolder'): string => { + const dark = { subtlest:'10', subtler:'20', subtle:'30', default:'40', bolder:'50' }; + const light = { subtlest:'90', subtler:'80', subtle:'70', default:'60', bolder:'50' }; + return p[fam][(m === 'dark' ? dark : light)[role]]; +}; +const bgDefault = (p: Palette, m: Mode) => (m === 'dark' ? p.pepper['90'] : WHITE); +const surfaceSecondary = (p: Palette, m: Mode) => (m === 'dark' ? p.salt['90'] : p.pepper['10']); + +const TOKENS: Token[] = [ + { group:'Brand', label:'brand-default', resolve:(p,m)=>accent(p,'cabbage',m,'default') }, + { group:'Brand', label:'brand-bolder', resolve:(p,m)=>accent(p,'cabbage',m,'bolder') }, + { group:'Brand', label:'brand-float (8%)', resolve:(p,m)=>over(accent(p,'cabbage',m,'bolder'), bgDefault(p,m), 0.08) }, + { group:'Brand', label:'brand-hover (12%)', resolve:(p,m)=>over(accent(p,'cabbage',m,'bolder'), bgDefault(p,m), 0.12) }, + + { group:'Backgrounds', label:'background-default', resolve:(p,m)=>bgDefault(p,m) }, + { group:'Backgrounds', label:'background-subtle', resolve:(p,m)=>(m==='dark'?p.pepper['70']:p.salt['10']) }, + { group:'Backgrounds', label:'background-popover', resolve:(p,m)=>(m==='dark'?p.pepper['70']:WHITE) }, + + { group:'Surfaces', label:'surface-primary', resolve:(p,m)=>(m==='dark'?WHITE:p.pepper['90']) }, + { group:'Surfaces', label:'surface-secondary', resolve:(p,m)=>surfaceSecondary(p,m) }, + { group:'Surfaces', label:'surface-invert', resolve:(p,m)=>(m==='dark'?p.pepper['90']:WHITE) }, + { group:'Surfaces', label:'surface-float (8%)', resolve:(p,m)=>over(surfaceSecondary(p,m), bgDefault(p,m), 0.08) }, + { group:'Surfaces', label:'surface-hover (12%)', resolve:(p,m)=>over(surfaceSecondary(p,m), bgDefault(p,m), 0.12) }, + { group:'Surfaces', label:'surface-active (16%)', resolve:(p,m)=>over(surfaceSecondary(p,m), bgDefault(p,m), 0.16) }, + + { group:'Text', label:'text-primary', resolve:(p,m)=>(m==='dark'?WHITE:p.pepper['90']) }, + { group:'Text', label:'text-secondary', resolve:(p,m)=>(m==='dark'?p.salt['50']:p.pepper['50']) }, + { group:'Text', label:'text-tertiary', resolve:(p,m)=>(m==='dark'?p.salt['90']:p.pepper['10']) }, + { group:'Text', label:'text-link', resolve:(p,m)=>accent(p,'water',m,'subtler') }, + + { group:'Borders', label:'border-subtlest-primary', resolve:(p,m)=>(m==='dark'?p.salt['90']:p.pepper['10']) }, + { group:'Borders', label:'border-bolder-primary', resolve:(p,m)=>(m==='dark'?p.pepper['10']:p.salt['90']) }, + + { group:'Status', label:'status-error', resolve:(p,m)=>accent(p,'ketchup',m,'default') }, + { group:'Status', label:'status-warning', resolve:(p,m)=>accent(p,'bun',m,'default') }, + { group:'Status', label:'status-help', resolve:(p,m)=>accent(p,'cheese',m,'default') }, + { group:'Status', label:'status-success', resolve:(p,m)=>accent(p,'avocado',m,'default') }, + { group:'Status', label:'status-info', resolve:(p,m)=>accent(p,'water',m,'default') }, + + { group:'Actions', label:'upvote (avocado)', resolve:(p,m)=>accent(p,'avocado',m,'default') }, + { group:'Actions', label:'downvote (ketchup)', resolve:(p,m)=>accent(p,'ketchup',m,'default') }, + { group:'Actions', label:'comment (blueCheese)', resolve:(p,m)=>accent(p,'blueCheese',m,'default') }, + { group:'Actions', label:'bookmark (bun)', resolve:(p,m)=>accent(p,'bun',m,'default') }, + { group:'Actions', label:'share (cabbage)', resolve:(p,m)=>accent(p,'cabbage',m,'default') }, + { group:'Actions', label:'plus (bacon)', resolve:(p,m)=>accent(p,'bacon',m,'default') }, + { group:'Actions', label:'cores (cheese)', resolve:(p,m)=>accent(p,'cheese',m,'default') }, + + // overlay base = onion-subtlest painted over the mode background at fixed opacities. + { group:'Overlay base', label:'primary (64%)', resolve:(p,m)=>over(accent(p,'onion',m,'subtlest'), bgDefault(p,m), 0.64) }, + { group:'Overlay base', label:'secondary (40%)', resolve:(p,m)=>over(accent(p,'onion',m,'subtlest'), bgDefault(p,m), 0.40) }, + { group:'Overlay base', label:'tertiary (32%)', resolve:(p,m)=>over(accent(p,'onion',m,'subtlest'), bgDefault(p,m), 0.32) }, + { group:'Overlay base', label:'quaternary (24%)', resolve:(p,m)=>over(accent(p,'onion',m,'subtlest'), bgDefault(p,m), 0.24) }, +]; + +// ---------- presentational helpers (inline-styled, theme-independent) ---------- +const mono: React.CSSProperties = { fontFamily: 'monospace', fontSize: 11 }; +const card: React.CSSProperties = { background: '#1A181E', color: '#FFFFFF', padding: 24, borderRadius: 12 }; + +const Swatch = ({ hex, w = 64, h = 40 }: { hex: string; w?: number; h?: number }) => ( +
+); + +const Pair = ({ old, neu, label }: { old: string; neu: string; label?: string }) => ( +
+ {label &&
{label}
} +
+
+ + {old} +
+
+ + {neu} +
+
+
+); + +const meta: Meta = { + title: 'Tokens/Palette Re-tone (Purple)', + parameters: { layout: 'fullscreen' }, +}; +export default meta; +type Story = StoryObj; + +// ===================== Story 1: raw ramps ===================== +export const RawRamps: Story = { + name: 'Raw ramps · old vs new', + render: () => ( +
+

Raw color ramps — old (top) vs new (bottom)

+

+ Every family keeps its name and all nine shade levels. Hues shift toward a true-violet vibe; + neutrals (pepper/salt) gain a subtle violet tint while their lightness ramp is preserved. + Social colors and opacity percentages are unchanged. +

+
+ {FAMILIES.map((fam) => ( +
+
+ {fam} + + hue {hue(OLD[fam]['50'] || OLD[fam]['90'])}° → {hue(NEW[fam]['50'] || NEW[fam]['90'])}° + +
+
+ {LEVELS.map((lvl) => ( +
+ + + {lvl} +
+ ))} +
+
+ ))} +
+
+ ), +}; + +// ===================== Story 2: semantic tokens ===================== +const ModeColumn = ({ mode }: { mode: Mode }) => { + const groups = Array.from(new Set(TOKENS.map((t) => t.group))); + return ( +
+

{mode} theme

+ {groups.map((g) => ( +
+
{g}
+
+ {TOKENS.filter((t) => t.group === g).map((t) => ( + + ))} +
+
+ ))} +
+ ); +}; + +export const SemanticTokens: Story = { + name: 'Semantic tokens · old vs new', + render: () => ( +
+

Semantic tokens — old vs new (resolved)

+

+ Each pair shows the previous hex (left, dimmed) and the new hex (right). Values are resolved exactly + as base.css maps them per mode; alpha tokens (float/hover/overlay) are + composited over the mode background at their unchanged opacity percentages. +

+
+ + +
+
+ ), +}; + +// ===================== Story 3: live components & surfaces ===================== +// Uses real Tailwind semantic classes — follows the Storybook theme toolbar (dark/light). +const Btn = ({ className, children }: { className: string; children: React.ReactNode }) => ( + +); + +const Surface = ({ title, className }: { title: string; className: string }) => ( +
+ {title} + +
+ Primary + Float + Secondary + Share +
+ +
+ ▲ Upvote + ▼ Downvote + 💬 Comment + 🔖 Bookmark + ★ Plus +
+ +
+ brand tag + onion tag + water tag + bacon tag +
+ +
+ success + error + warning + help + info +
+ +
+ Primary text on this surface + Secondary text — supporting copy + Tertiary / metadata + An inline link +
+ + +
+); + +export const ComponentsAndSurfaces: Story = { + name: 'Components & surfaces · live', + render: () => ( +
+
+

Components on real surfaces

+

+ Rendered with live semantic tokens — use the Storybook theme toolbar to switch dark / light. + Each panel is a different product background so you can verify contrast and that nothing breaks. +

+
+
+ + + + +
+ +
+ Brand gradient (cabbage → onion) +

The Plus / funnel gradient now reads as a true violet → indigo blend.

+
+
+ ), +}; From 788eda206772e96a2ebae706b1921534f26da5e5 Mon Sep 17 00:00:00 2001 From: Tsahi Matsliah Date: Wed, 17 Jun 2026 14:33:36 +0300 Subject: [PATCH 2/6] fix: refine neutral tint (silver-blue salt, periwinkle pepper) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Salt keeps its distinctive cool silver-blue character (hue ~228, the A↔B midpoint) instead of reading as plain off-white; pepper shifts to a periwinkle slate (hue ~250) so the darks feel intentional rather than muddy. Lightness ramps and all opacity percentages unchanged. Co-Authored-By: Claude Opus 4.8 --- packages/shared/src/styles/colors.ts | 36 +++++++++---------- packages/shared/tailwind/colors.ts | 36 +++++++++---------- packages/shared/tailwind/overlay.ts | 24 ++++++------- .../stories/tokens/PaletteRetone.stories.tsx | 6 ++-- 4 files changed, 51 insertions(+), 51 deletions(-) diff --git a/packages/shared/src/styles/colors.ts b/packages/shared/src/styles/colors.ts index 0eef4331459..f7d855eb54e 100644 --- a/packages/shared/src/styles/colors.ts +++ b/packages/shared/src/styles/colors.ts @@ -161,26 +161,26 @@ const colors: ColorPalette = { }, salt: { '0': '#FFFFFF', - '10': '#F9F8F9', - '20': '#F3F1F3', - '30': '#ECE9ED', - '40': '#E5E2E6', - '50': '#DCD7DE', - '60': '#D2CCD4', - '70': '#CBC4CE', - '80': '#C5BDC7', - '90': '#BFB5C2', + '10': '#F7F8FA', + '20': '#EFF0F5', + '30': '#E7E9EF', + '40': '#DFE1E9', + '50': '#D3D6E2', + '60': '#C7CAD9', + '70': '#BEC3D4', + '80': '#B6BBCE', + '90': '#AEB3C9', }, pepper: { - '10': '#585167', - '20': '#4E485C', - '30': '#454051', - '40': '#3C3847', - '50': '#312D3A', - '60': '#26232C', - '70': '#1F1D25', - '80': '#1A181E', - '90': '#121015', + '10': '#4F4870', + '20': '#464064', + '30': '#3E3958', + '40': '#36324D', + '50': '#2C283F', + '60': '#221F30', + '70': '#1C1A28', + '80': '#171521', + '90': '#100E17', }, twitter: { '10': '#37BBF6', diff --git a/packages/shared/tailwind/colors.ts b/packages/shared/tailwind/colors.ts index 3d1a463772a..e83b1a968a1 100644 --- a/packages/shared/tailwind/colors.ts +++ b/packages/shared/tailwind/colors.ts @@ -130,26 +130,26 @@ const colors = { }, salt: { 0: '#FFFFFF', - 10: '#F9F8F9', - 20: '#F3F1F3', - 30: '#ECE9ED', - 40: '#E5E2E6', - 50: '#DCD7DE', - 60: '#D2CCD4', - 70: '#CBC4CE', - 80: '#C5BDC7', - 90: '#BFB5C2', + 10: '#F7F8FA', + 20: '#EFF0F5', + 30: '#E7E9EF', + 40: '#DFE1E9', + 50: '#D3D6E2', + 60: '#C7CAD9', + 70: '#BEC3D4', + 80: '#B6BBCE', + 90: '#AEB3C9', }, pepper: { - 10: '#585167', - 20: '#4E485C', - 30: '#454051', - 40: '#3C3847', - 50: '#312D3A', - 60: '#26232C', - 70: '#1F1D25', - 80: '#1A181E', - 90: '#121015', + 10: '#4F4870', + 20: '#464064', + 30: '#3E3958', + 40: '#36324D', + 50: '#2C283F', + 60: '#221F30', + 70: '#1C1A28', + 80: '#171521', + 90: '#100E17', }, twitter: { 10: '#000000', diff --git a/packages/shared/tailwind/overlay.ts b/packages/shared/tailwind/overlay.ts index 718e2dca8cc..d28147150a0 100644 --- a/packages/shared/tailwind/overlay.ts +++ b/packages/shared/tailwind/overlay.ts @@ -12,8 +12,8 @@ const overlayColors = { cabbage: '#8E2BEEA3', onion: '#5637E9A3', water: '#353FF1A3', - salt: '#BFB5C2A3', - pepper: '#121015A3', + salt: '#AEB3C9A3', + pepper: '#100E17A3', twitter: '#000000A3', whatsapp: '#20B038A3', facebook: '#3B5998A3', @@ -35,8 +35,8 @@ const overlayColors = { cabbage: '#8E2BEE66', onion: '#5637E966', water: '#353FF166', - salt: '#BFB5C266', - pepper: '#12101566', + salt: '#AEB3C966', + pepper: '#100E1766', twitter: '#00000066', whatsapp: '#20B03866', facebook: '#3B599866', @@ -58,8 +58,8 @@ const overlayColors = { cabbage: '#8E2BEE52', onion: '#5637E952', water: '#353FF152', - salt: '#BFB5C252', - pepper: '#12101552', + salt: '#AEB3C952', + pepper: '#100E1752', twitter: '#00000052', whatsapp: '#20B03852', facebook: '#3B599852', @@ -81,8 +81,8 @@ const overlayColors = { cabbage: '#8E2BEE3D', onion: '#5637E93D', water: '#353FF13D', - salt: '#BFB5C23D', - pepper: '#1210153D', + salt: '#AEB3C93D', + pepper: '#100E173D', twitter: '#0000003D', whatsapp: '#20B0383D', facebook: '#3B59983D', @@ -104,8 +104,8 @@ const overlayColors = { cabbage: '#8E2BEE29', onion: '#5637E929', water: '#353FF129', - salt: '#BFB5C229', - pepper: '#12101529', + salt: '#AEB3C929', + pepper: '#100E1729', twitter: '#00000029', whatsapp: '#20B03829', facebook: '#3B599829', @@ -127,8 +127,8 @@ const overlayColors = { cabbage: '#8E2BEE14', onion: '#5637E914', water: '#353FF114', - salt: '#BFB5C214', - pepper: '#12101514', + salt: '#AEB3C914', + pepper: '#100E1714', twitter: '#00000014', whatsapp: '#20B03814', facebook: '#3B599814', diff --git a/packages/storybook/stories/tokens/PaletteRetone.stories.tsx b/packages/storybook/stories/tokens/PaletteRetone.stories.tsx index 60e6c66be19..11e36ff0d9c 100644 --- a/packages/storybook/stories/tokens/PaletteRetone.stories.tsx +++ b/packages/storybook/stories/tokens/PaletteRetone.stories.tsx @@ -45,8 +45,8 @@ const NEW: Palette = { cabbage: { 10:'#C16AFA',20:'#B95EF6',30:'#AC4EF4',40:'#A03FF1',50:'#8E2BEE',60:'#7A1FE2',70:'#6D17D7',80:'#600FCD',90:'#5607C2' }, onion: { 10:'#9670F8',20:'#8662F4',30:'#7855F0',40:'#6947ED',50:'#5637E9',60:'#452CD7',70:'#3B25C8',80:'#331EBA',90:'#2C19AD' }, water: { 10:'#6B85F9',20:'#5F78F7',30:'#5367F6',40:'#4657F3',50:'#353FF1',60:'#292BE9',70:'#2421E2',80:'#2119DC',90:'#1C11D5' }, - salt: { 0:'#FFFFFF',10:'#F9F8F9',20:'#F3F1F3',30:'#ECE9ED',40:'#E5E2E6',50:'#DCD7DE',60:'#D2CCD4',70:'#CBC4CE',80:'#C5BDC7',90:'#BFB5C2' }, - pepper: { 10:'#585167',20:'#4E485C',30:'#454051',40:'#3C3847',50:'#312D3A',60:'#26232C',70:'#1F1D25',80:'#1A181E',90:'#121015' }, + salt: { 0:'#FFFFFF',10:'#F7F8FA',20:'#EFF0F5',30:'#E7E9EF',40:'#DFE1E9',50:'#D3D6E2',60:'#C7CAD9',70:'#BEC3D4',80:'#B6BBCE',90:'#AEB3C9' }, + pepper: { 10:'#4F4870',20:'#464064',30:'#3E3958',40:'#36324D',50:'#2C283F',60:'#221F30',70:'#1C1A28',80:'#171521',90:'#100E17' }, }; const FAMILIES = Object.keys(NEW); @@ -138,7 +138,7 @@ const TOKENS: Token[] = [ // ---------- presentational helpers (inline-styled, theme-independent) ---------- const mono: React.CSSProperties = { fontFamily: 'monospace', fontSize: 11 }; -const card: React.CSSProperties = { background: '#1A181E', color: '#FFFFFF', padding: 24, borderRadius: 12 }; +const card: React.CSSProperties = { background: '#171521', color: '#FFFFFF', padding: 24, borderRadius: 12 }; const Swatch = ({ hex, w = 64, h = 40 }: { hex: string; w?: number; h?: number }) => (
From 67bbdada3999b9cce7f3c9e5a54121c631b27459 Mon Sep 17 00:00:00 2001 From: Tsahi Matsliah Date: Wed, 17 Jun 2026 15:51:56 +0300 Subject: [PATCH 3/6] feat: align palette to docs.daily.dev (purple brand, near-black surfaces) Brand (cabbage) now follows the docs Tailwind purple ramp (#9333EA); dark neutrals (pepper) are near-black and essentially neutral (#0F0F12 base, #17171C subtle) for strong sidebar/content contrast; light neutrals (salt) carry a faint lavender tint. Adds a Guidelines story documenting the docs-aligned system. Token names, levels and opacity percentages unchanged. Co-Authored-By: Claude Opus 4.8 --- packages/extension/src/frame/render.ts | 2 +- .../onboarding/shared/PricingPlan.module.css | 2 +- packages/shared/src/styles/base.css | 6 +- packages/shared/src/styles/colors.ts | 54 +++++++++--------- packages/shared/tailwind/colors.ts | 56 +++++++++---------- packages/shared/tailwind/overlay.ts | 36 ++++++------ .../stories/tokens/PaletteRetone.stories.tsx | 52 ++++++++++++++--- 7 files changed, 123 insertions(+), 85 deletions(-) diff --git a/packages/extension/src/frame/render.ts b/packages/extension/src/frame/render.ts index c0a0e49da7a..9dc1ad20095 100644 --- a/packages/extension/src/frame/render.ts +++ b/packages/extension/src/frame/render.ts @@ -127,7 +127,7 @@ const ensureStyles = (): void => { padding: 0 1rem; border: 0; border-radius: 12px; - background: #8E2BEE; + background: #9333EA; color: #ffffff; font: inherit; font-size: 0.9375rem; diff --git a/packages/shared/src/features/onboarding/shared/PricingPlan.module.css b/packages/shared/src/features/onboarding/shared/PricingPlan.module.css index 5e442374cfb..e243ffc6a8e 100644 --- a/packages/shared/src/features/onboarding/shared/PricingPlan.module.css +++ b/packages/shared/src/features/onboarding/shared/PricingPlan.module.css @@ -19,7 +19,7 @@ } &::before { - background: linear-gradient(135.18deg, #C16AFA 0%, #9670F8 24.16%, #6B85F9 40%, #9670F8 71.33%, #AC4EF4 100%); + background: linear-gradient(135.18deg, #D8B4FE 0%, #9670F8 24.16%, #6B85F9 40%, #9670F8 71.33%, #C084FC 100%); content: ''; position: absolute; top: 0; diff --git a/packages/shared/src/styles/base.css b/packages/shared/src/styles/base.css index abcd3dc512d..4d6ec7171e4 100644 --- a/packages/shared/src/styles/base.css +++ b/packages/shared/src/styles/base.css @@ -814,7 +814,7 @@ details.right-icon { } .squad-background-fade { - background: radial-gradient(ellipse, #8E2BEE88 0%, #8E2BEE00 400px); + background: radial-gradient(ellipse, #9333EA88 0%, #9333EA00 400px); background-size: 1200px 500px; background-position: center -250px; background-repeat: no-repeat; @@ -911,7 +911,7 @@ meter::-webkit-meter-bar { } &-best-price { - background: linear-gradient(135deg, #C16AFA 0%, #9670F8 44.71%, #6B85F9 100%); + background: linear-gradient(135deg, #D8B4FE 0%, #9670F8 44.71%, #6B85F9 100%); } } @@ -1077,7 +1077,7 @@ meter::-webkit-meter-bar { } .top-hero-panel-border { - background: linear-gradient(122deg, #331EBA 0%, #600FCD 45%, #F956AF 100%); + background: linear-gradient(122deg, #331EBA 0%, #6B21A8 45%, #F956AF 100%); } .top-hero-glow { diff --git a/packages/shared/src/styles/colors.ts b/packages/shared/src/styles/colors.ts index f7d855eb54e..9bb75c794b4 100644 --- a/packages/shared/src/styles/colors.ts +++ b/packages/shared/src/styles/colors.ts @@ -127,15 +127,15 @@ const colors: ColorPalette = { '90': '#D61463', }, cabbage: { - '10': '#C16AFA', - '20': '#B95EF6', - '30': '#AC4EF4', - '40': '#A03FF1', - '50': '#8E2BEE', - '60': '#7A1FE2', - '70': '#6D17D7', - '80': '#600FCD', - '90': '#5607C2', + '10': '#D8B4FE', + '20': '#CC9CFD', + '30': '#C084FC', + '40': '#A855F7', + '50': '#9333EA', + '60': '#7E22CE', + '70': '#7522BB', + '80': '#6B21A8', + '90': '#581C87', }, onion: { '10': '#9670F8', @@ -161,26 +161,26 @@ const colors: ColorPalette = { }, salt: { '0': '#FFFFFF', - '10': '#F7F8FA', - '20': '#EFF0F5', - '30': '#E7E9EF', - '40': '#DFE1E9', - '50': '#D3D6E2', - '60': '#C7CAD9', - '70': '#BEC3D4', - '80': '#B6BBCE', - '90': '#AEB3C9', + '10': '#F9F8F9', + '20': '#F3F1F3', + '30': '#ECE9ED', + '40': '#E6E1E7', + '50': '#DDD7DE', + '60': '#D4CBD5', + '70': '#CEC2D0', + '80': '#C8BACA', + '90': '#C2B1C6', }, pepper: { - '10': '#4F4870', - '20': '#464064', - '30': '#3E3958', - '40': '#36324D', - '50': '#2C283F', - '60': '#221F30', - '70': '#1C1A28', - '80': '#171521', - '90': '#100E17', + '10': '#52525B', + '20': '#494951', + '30': '#3F3F46', + '40': '#2F2F36', + '50': '#1F1F25', + '60': '#1B1B21', + '70': '#17171C', + '80': '#131317', + '90': '#0F0F12', }, twitter: { '10': '#37BBF6', diff --git a/packages/shared/tailwind/colors.ts b/packages/shared/tailwind/colors.ts index e83b1a968a1..e1d7a3c0488 100644 --- a/packages/shared/tailwind/colors.ts +++ b/packages/shared/tailwind/colors.ts @@ -93,16 +93,16 @@ const colors = { 90: '#D61463', }, cabbage: { - 0: '#C16AFA00', - 10: '#C16AFA', - 20: '#B95EF6', - 30: '#AC4EF4', - 40: '#A03FF1', - 50: '#8E2BEE', - 60: '#7A1FE2', - 70: '#6D17D7', - 80: '#600FCD', - 90: '#5607C2', + 0: '#D8B4FE00', + 10: '#D8B4FE', + 20: '#CC9CFD', + 30: '#C084FC', + 40: '#A855F7', + 50: '#9333EA', + 60: '#7E22CE', + 70: '#7522BB', + 80: '#6B21A8', + 90: '#581C87', }, onion: { 0: '#9670F800', @@ -130,26 +130,26 @@ const colors = { }, salt: { 0: '#FFFFFF', - 10: '#F7F8FA', - 20: '#EFF0F5', - 30: '#E7E9EF', - 40: '#DFE1E9', - 50: '#D3D6E2', - 60: '#C7CAD9', - 70: '#BEC3D4', - 80: '#B6BBCE', - 90: '#AEB3C9', + 10: '#F9F8F9', + 20: '#F3F1F3', + 30: '#ECE9ED', + 40: '#E6E1E7', + 50: '#DDD7DE', + 60: '#D4CBD5', + 70: '#CEC2D0', + 80: '#C8BACA', + 90: '#C2B1C6', }, pepper: { - 10: '#4F4870', - 20: '#464064', - 30: '#3E3958', - 40: '#36324D', - 50: '#2C283F', - 60: '#221F30', - 70: '#1C1A28', - 80: '#171521', - 90: '#100E17', + 10: '#52525B', + 20: '#494951', + 30: '#3F3F46', + 40: '#2F2F36', + 50: '#1F1F25', + 60: '#1B1B21', + 70: '#17171C', + 80: '#131317', + 90: '#0F0F12', }, twitter: { 10: '#000000', diff --git a/packages/shared/tailwind/overlay.ts b/packages/shared/tailwind/overlay.ts index d28147150a0..2ffc7c8552a 100644 --- a/packages/shared/tailwind/overlay.ts +++ b/packages/shared/tailwind/overlay.ts @@ -9,11 +9,11 @@ const overlayColors = { bun: '#FF732BA3', ketchup: '#D22523A3', bacon: '#F9439FA3', - cabbage: '#8E2BEEA3', + cabbage: '#9333EAA3', onion: '#5637E9A3', water: '#353FF1A3', - salt: '#AEB3C9A3', - pepper: '#100E17A3', + salt: '#C2B1C6A3', + pepper: '#0F0F12A3', twitter: '#000000A3', whatsapp: '#20B038A3', facebook: '#3B5998A3', @@ -32,11 +32,11 @@ const overlayColors = { bun: '#FF732B66', ketchup: '#D2252366', bacon: '#F9439F66', - cabbage: '#8E2BEE66', + cabbage: '#9333EA66', onion: '#5637E966', water: '#353FF166', - salt: '#AEB3C966', - pepper: '#100E1766', + salt: '#C2B1C666', + pepper: '#0F0F1266', twitter: '#00000066', whatsapp: '#20B03866', facebook: '#3B599866', @@ -55,11 +55,11 @@ const overlayColors = { bun: '#FF732B52', ketchup: '#D2252352', bacon: '#F9439F52', - cabbage: '#8E2BEE52', + cabbage: '#9333EA52', onion: '#5637E952', water: '#353FF152', - salt: '#AEB3C952', - pepper: '#100E1752', + salt: '#C2B1C652', + pepper: '#0F0F1252', twitter: '#00000052', whatsapp: '#20B03852', facebook: '#3B599852', @@ -78,11 +78,11 @@ const overlayColors = { bun: '#FF732B3D', ketchup: '#D225233D', bacon: '#F9439F3D', - cabbage: '#8E2BEE3D', + cabbage: '#9333EA3D', onion: '#5637E93D', water: '#353FF13D', - salt: '#AEB3C93D', - pepper: '#100E173D', + salt: '#C2B1C63D', + pepper: '#0F0F123D', twitter: '#0000003D', whatsapp: '#20B0383D', facebook: '#3B59983D', @@ -101,11 +101,11 @@ const overlayColors = { bun: '#FF732B29', ketchup: '#D2252329', bacon: '#F9439F29', - cabbage: '#8E2BEE29', + cabbage: '#9333EA29', onion: '#5637E929', water: '#353FF129', - salt: '#AEB3C929', - pepper: '#100E1729', + salt: '#C2B1C629', + pepper: '#0F0F1229', twitter: '#00000029', whatsapp: '#20B03829', facebook: '#3B599829', @@ -124,11 +124,11 @@ const overlayColors = { bun: '#FF732B14', ketchup: '#D2252314', bacon: '#F9439F14', - cabbage: '#8E2BEE14', + cabbage: '#9333EA14', onion: '#5637E914', water: '#353FF114', - salt: '#AEB3C914', - pepper: '#100E1714', + salt: '#C2B1C614', + pepper: '#0F0F1214', twitter: '#00000014', whatsapp: '#20B03814', facebook: '#3B599814', diff --git a/packages/storybook/stories/tokens/PaletteRetone.stories.tsx b/packages/storybook/stories/tokens/PaletteRetone.stories.tsx index 11e36ff0d9c..af9a62c325c 100644 --- a/packages/storybook/stories/tokens/PaletteRetone.stories.tsx +++ b/packages/storybook/stories/tokens/PaletteRetone.stories.tsx @@ -42,11 +42,11 @@ const NEW: Palette = { bun: { 10:'#FFB260',20:'#FFA455',30:'#FF9748',40:'#FF873B',50:'#FF732B',60:'#FA5F20',70:'#F55219',80:'#F04511',90:'#EB370A' }, ketchup: { 10:'#F1746E',20:'#EB635E',30:'#E5514D',40:'#DD3D3A',50:'#D22523',60:'#C41A1A',70:'#BA1414',80:'#B00E10',90:'#A7070B' }, bacon: { 10:'#FC7CD0',20:'#FB70C5',30:'#FB63BC',40:'#F956AF',50:'#F9439F',60:'#F0348A',70:'#E7297C',80:'#DF1F70',90:'#D61463' }, - cabbage: { 10:'#C16AFA',20:'#B95EF6',30:'#AC4EF4',40:'#A03FF1',50:'#8E2BEE',60:'#7A1FE2',70:'#6D17D7',80:'#600FCD',90:'#5607C2' }, + cabbage: { 10:'#D8B4FE',20:'#CC9CFD',30:'#C084FC',40:'#A855F7',50:'#9333EA',60:'#7E22CE',70:'#7522BB',80:'#6B21A8',90:'#581C87' }, onion: { 10:'#9670F8',20:'#8662F4',30:'#7855F0',40:'#6947ED',50:'#5637E9',60:'#452CD7',70:'#3B25C8',80:'#331EBA',90:'#2C19AD' }, water: { 10:'#6B85F9',20:'#5F78F7',30:'#5367F6',40:'#4657F3',50:'#353FF1',60:'#292BE9',70:'#2421E2',80:'#2119DC',90:'#1C11D5' }, - salt: { 0:'#FFFFFF',10:'#F7F8FA',20:'#EFF0F5',30:'#E7E9EF',40:'#DFE1E9',50:'#D3D6E2',60:'#C7CAD9',70:'#BEC3D4',80:'#B6BBCE',90:'#AEB3C9' }, - pepper: { 10:'#4F4870',20:'#464064',30:'#3E3958',40:'#36324D',50:'#2C283F',60:'#221F30',70:'#1C1A28',80:'#171521',90:'#100E17' }, + salt: { 0:'#FFFFFF',10:'#F9F8F9',20:'#F3F1F3',30:'#ECE9ED',40:'#E6E1E7',50:'#DDD7DE',60:'#D4CBD5',70:'#CEC2D0',80:'#C8BACA',90:'#C2B1C6' }, + pepper: { 10:'#52525B',20:'#494951',30:'#3F3F46',40:'#2F2F36',50:'#1F1F25',60:'#1B1B21',70:'#17171C',80:'#131317',90:'#0F0F12' }, }; const FAMILIES = Object.keys(NEW); @@ -138,7 +138,7 @@ const TOKENS: Token[] = [ // ---------- presentational helpers (inline-styled, theme-independent) ---------- const mono: React.CSSProperties = { fontFamily: 'monospace', fontSize: 11 }; -const card: React.CSSProperties = { background: '#171521', color: '#FFFFFF', padding: 24, borderRadius: 12 }; +const card: React.CSSProperties = { background: '#131317', color: '#FFFFFF', padding: 24, borderRadius: 12 }; const Swatch = ({ hex, w = 64, h = 40 }: { hex: string; w?: number; h?: number }) => (
@@ -167,6 +167,43 @@ const meta: Meta = { export default meta; type Story = StoryObj; +// ===================== Story 0: guidelines ===================== +const GUIDE: { token: string; value: string; note: string }[] = [ + { token: 'brand / share', value: NEW.cabbage['50'], note: 'docs purple #9333EA (Tailwind purple-600)' }, + { token: 'background-default (dark)', value: NEW.pepper['90'], note: 'near-black base — the sidebar/page surface' }, + { token: 'background-subtle (dark)', value: NEW.pepper['70'], note: 'cards / content sit one step up for contrast' }, + { token: 'background-default (light)', value: WHITE, note: 'pure white; subtle surface is faint lavender salt.10' }, + { token: 'text-primary (dark)', value: WHITE, note: 'white on near-black' }, + { token: 'border-subtlest (dark)', value: NEW.salt['90'], note: 'low-contrast dividers' }, + { token: 'status-error / success / warning', value: NEW.ketchup['40'], note: 'kept functional (red / green / orange)' }, +]; + +export const Guidelines: Story = { + name: 'Guidelines', + render: () => ( +
+

Palette guideline — docs.daily.dev aligned

+
    +
  • Purple is the brand, not the surface. The accent (cabbage) is the docs purple #9333EA; backgrounds stay neutral so the purple pops.
    • +
  • Near-black dark mode. Surfaces step #0F0F12 → #17171C → #1F1F25 for clear separation between sidebar, content and cards.
    • +
  • Lavender-tinted light mode. White base with a faint purple cast on subtle surfaces.
    • +
  • Status stays functional. Error/success/warning remain red/green/orange.
    • +
  • Structure untouched. Same token names, shade levels and opacity percentages — only hues moved.
    • +
+
+ {GUIDE.map((g) => ( +
+ + {g.value} + {g.token} + {g.note} +
+ ))} +
+
+ ), +}; + // ===================== Story 1: raw ramps ===================== export const RawRamps: Story = { name: 'Raw ramps · old vs new', @@ -174,9 +211,10 @@ export const RawRamps: Story = {

Raw color ramps — old (top) vs new (bottom)

- Every family keeps its name and all nine shade levels. Hues shift toward a true-violet vibe; - neutrals (pepper/salt) gain a subtle violet tint while their lightness ramp is preserved. - Social colors and opacity percentages are unchanged. + Every family keeps its name and all nine shade levels. The brand (cabbage) now follows the + docs.daily.dev purple ramp (#9333EA); dark neutrals (pepper) are near-black and essentially + neutral (#0F0F12 → #17171C) for strong element contrast; light neutrals (salt) carry a faint + lavender tint. Social colors and opacity percentages are unchanged.

{FAMILIES.map((fam) => ( From cee541ecd3309d15e5b24812dd0ac2db7fc4f62c Mon Sep 17 00:00:00 2001 From: Tsahi Matsliah Date: Wed, 17 Jun 2026 16:07:33 +0300 Subject: [PATCH 4/6] fix: match docs.daily.dev more faithfully (brand #9333EA, neutral near-black grays) Shift cabbage so the dark-mode default (.40) lands exactly on the docs brand #9333EA instead of the lighter #A855F7; space pepper for a stronger bg(#0F0F12) -> card(#1F1F25) -> border(#2A2A30) contrast; make salt near-neutral (docs-style gray with only a whisper of lavender) so muted text reads like docs #d4d4d8 rather than washed purple. Co-Authored-By: Claude Opus 4.8 --- packages/extension/src/frame/render.ts | 2 +- .../onboarding/shared/PricingPlan.module.css | 2 +- packages/shared/src/styles/base.css | 4 +- packages/shared/src/styles/colors.ts | 38 +++++++++--------- packages/shared/tailwind/colors.ts | 40 +++++++++---------- packages/shared/tailwind/overlay.ts | 24 +++++------ .../stories/tokens/PaletteRetone.stories.tsx | 18 ++++----- 7 files changed, 64 insertions(+), 64 deletions(-) diff --git a/packages/extension/src/frame/render.ts b/packages/extension/src/frame/render.ts index 9dc1ad20095..eba459332ff 100644 --- a/packages/extension/src/frame/render.ts +++ b/packages/extension/src/frame/render.ts @@ -127,7 +127,7 @@ const ensureStyles = (): void => { padding: 0 1rem; border: 0; border-radius: 12px; - background: #9333EA; + background: #892BDC; color: #ffffff; font: inherit; font-size: 0.9375rem; diff --git a/packages/shared/src/features/onboarding/shared/PricingPlan.module.css b/packages/shared/src/features/onboarding/shared/PricingPlan.module.css index e243ffc6a8e..6932ccd5fcc 100644 --- a/packages/shared/src/features/onboarding/shared/PricingPlan.module.css +++ b/packages/shared/src/features/onboarding/shared/PricingPlan.module.css @@ -19,7 +19,7 @@ } &::before { - background: linear-gradient(135.18deg, #D8B4FE 0%, #9670F8 24.16%, #6B85F9 40%, #9670F8 71.33%, #C084FC 100%); + background: linear-gradient(135.18deg, #C084FC 0%, #9670F8 24.16%, #6B85F9 40%, #9670F8 71.33%, #A855F7 100%); content: ''; position: absolute; top: 0; diff --git a/packages/shared/src/styles/base.css b/packages/shared/src/styles/base.css index 4d6ec7171e4..cced2b77b33 100644 --- a/packages/shared/src/styles/base.css +++ b/packages/shared/src/styles/base.css @@ -814,7 +814,7 @@ details.right-icon { } .squad-background-fade { - background: radial-gradient(ellipse, #9333EA88 0%, #9333EA00 400px); + background: radial-gradient(ellipse, #892BDC88 0%, #892BDC00 400px); background-size: 1200px 500px; background-position: center -250px; background-repeat: no-repeat; @@ -911,7 +911,7 @@ meter::-webkit-meter-bar { } &-best-price { - background: linear-gradient(135deg, #D8B4FE 0%, #9670F8 44.71%, #6B85F9 100%); + background: linear-gradient(135deg, #C084FC 0%, #9670F8 44.71%, #6B85F9 100%); } } diff --git a/packages/shared/src/styles/colors.ts b/packages/shared/src/styles/colors.ts index 9bb75c794b4..1cbca68caa3 100644 --- a/packages/shared/src/styles/colors.ts +++ b/packages/shared/src/styles/colors.ts @@ -127,11 +127,11 @@ const colors: ColorPalette = { '90': '#D61463', }, cabbage: { - '10': '#D8B4FE', - '20': '#CC9CFD', - '30': '#C084FC', - '40': '#A855F7', - '50': '#9333EA', + '10': '#C084FC', + '20': '#B46DFA', + '30': '#A855F7', + '40': '#9333EA', + '50': '#892BDC', '60': '#7E22CE', '70': '#7522BB', '80': '#6B21A8', @@ -161,25 +161,25 @@ const colors: ColorPalette = { }, salt: { '0': '#FFFFFF', - '10': '#F9F8F9', - '20': '#F3F1F3', - '30': '#ECE9ED', - '40': '#E6E1E7', - '50': '#DDD7DE', - '60': '#D4CBD5', - '70': '#CEC2D0', - '80': '#C8BACA', - '90': '#C2B1C6', + '10': '#FAFAFA', + '20': '#F5F4F5', + '30': '#EEECEE', + '40': '#E6E4E7', + '50': '#DFDDDF', + '60': '#D8D4D8', + '70': '#CBC7CC', + '80': '#BDB6BE', + '90': '#ACA2AE', }, pepper: { '10': '#52525B', '20': '#494951', '30': '#3F3F46', - '40': '#2F2F36', - '50': '#1F1F25', - '60': '#1B1B21', - '70': '#17171C', - '80': '#131317', + '40': '#35353B', + '50': '#2A2A30', + '60': '#25252B', + '70': '#1F1F25', + '80': '#17171C', '90': '#0F0F12', }, twitter: { diff --git a/packages/shared/tailwind/colors.ts b/packages/shared/tailwind/colors.ts index e1d7a3c0488..dede31057fe 100644 --- a/packages/shared/tailwind/colors.ts +++ b/packages/shared/tailwind/colors.ts @@ -93,12 +93,12 @@ const colors = { 90: '#D61463', }, cabbage: { - 0: '#D8B4FE00', - 10: '#D8B4FE', - 20: '#CC9CFD', - 30: '#C084FC', - 40: '#A855F7', - 50: '#9333EA', + 0: '#C084FC00', + 10: '#C084FC', + 20: '#B46DFA', + 30: '#A855F7', + 40: '#9333EA', + 50: '#892BDC', 60: '#7E22CE', 70: '#7522BB', 80: '#6B21A8', @@ -130,25 +130,25 @@ const colors = { }, salt: { 0: '#FFFFFF', - 10: '#F9F8F9', - 20: '#F3F1F3', - 30: '#ECE9ED', - 40: '#E6E1E7', - 50: '#DDD7DE', - 60: '#D4CBD5', - 70: '#CEC2D0', - 80: '#C8BACA', - 90: '#C2B1C6', + 10: '#FAFAFA', + 20: '#F5F4F5', + 30: '#EEECEE', + 40: '#E6E4E7', + 50: '#DFDDDF', + 60: '#D8D4D8', + 70: '#CBC7CC', + 80: '#BDB6BE', + 90: '#ACA2AE', }, pepper: { 10: '#52525B', 20: '#494951', 30: '#3F3F46', - 40: '#2F2F36', - 50: '#1F1F25', - 60: '#1B1B21', - 70: '#17171C', - 80: '#131317', + 40: '#35353B', + 50: '#2A2A30', + 60: '#25252B', + 70: '#1F1F25', + 80: '#17171C', 90: '#0F0F12', }, twitter: { diff --git a/packages/shared/tailwind/overlay.ts b/packages/shared/tailwind/overlay.ts index 2ffc7c8552a..3d8e1928fb6 100644 --- a/packages/shared/tailwind/overlay.ts +++ b/packages/shared/tailwind/overlay.ts @@ -9,10 +9,10 @@ const overlayColors = { bun: '#FF732BA3', ketchup: '#D22523A3', bacon: '#F9439FA3', - cabbage: '#9333EAA3', + cabbage: '#892BDCA3', onion: '#5637E9A3', water: '#353FF1A3', - salt: '#C2B1C6A3', + salt: '#ACA2AEA3', pepper: '#0F0F12A3', twitter: '#000000A3', whatsapp: '#20B038A3', @@ -32,10 +32,10 @@ const overlayColors = { bun: '#FF732B66', ketchup: '#D2252366', bacon: '#F9439F66', - cabbage: '#9333EA66', + cabbage: '#892BDC66', onion: '#5637E966', water: '#353FF166', - salt: '#C2B1C666', + salt: '#ACA2AE66', pepper: '#0F0F1266', twitter: '#00000066', whatsapp: '#20B03866', @@ -55,10 +55,10 @@ const overlayColors = { bun: '#FF732B52', ketchup: '#D2252352', bacon: '#F9439F52', - cabbage: '#9333EA52', + cabbage: '#892BDC52', onion: '#5637E952', water: '#353FF152', - salt: '#C2B1C652', + salt: '#ACA2AE52', pepper: '#0F0F1252', twitter: '#00000052', whatsapp: '#20B03852', @@ -78,10 +78,10 @@ const overlayColors = { bun: '#FF732B3D', ketchup: '#D225233D', bacon: '#F9439F3D', - cabbage: '#9333EA3D', + cabbage: '#892BDC3D', onion: '#5637E93D', water: '#353FF13D', - salt: '#C2B1C63D', + salt: '#ACA2AE3D', pepper: '#0F0F123D', twitter: '#0000003D', whatsapp: '#20B0383D', @@ -101,10 +101,10 @@ const overlayColors = { bun: '#FF732B29', ketchup: '#D2252329', bacon: '#F9439F29', - cabbage: '#9333EA29', + cabbage: '#892BDC29', onion: '#5637E929', water: '#353FF129', - salt: '#C2B1C629', + salt: '#ACA2AE29', pepper: '#0F0F1229', twitter: '#00000029', whatsapp: '#20B03829', @@ -124,10 +124,10 @@ const overlayColors = { bun: '#FF732B14', ketchup: '#D2252314', bacon: '#F9439F14', - cabbage: '#9333EA14', + cabbage: '#892BDC14', onion: '#5637E914', water: '#353FF114', - salt: '#C2B1C614', + salt: '#ACA2AE14', pepper: '#0F0F1214', twitter: '#00000014', whatsapp: '#20B03814', diff --git a/packages/storybook/stories/tokens/PaletteRetone.stories.tsx b/packages/storybook/stories/tokens/PaletteRetone.stories.tsx index af9a62c325c..61317b204ce 100644 --- a/packages/storybook/stories/tokens/PaletteRetone.stories.tsx +++ b/packages/storybook/stories/tokens/PaletteRetone.stories.tsx @@ -42,11 +42,11 @@ const NEW: Palette = { bun: { 10:'#FFB260',20:'#FFA455',30:'#FF9748',40:'#FF873B',50:'#FF732B',60:'#FA5F20',70:'#F55219',80:'#F04511',90:'#EB370A' }, ketchup: { 10:'#F1746E',20:'#EB635E',30:'#E5514D',40:'#DD3D3A',50:'#D22523',60:'#C41A1A',70:'#BA1414',80:'#B00E10',90:'#A7070B' }, bacon: { 10:'#FC7CD0',20:'#FB70C5',30:'#FB63BC',40:'#F956AF',50:'#F9439F',60:'#F0348A',70:'#E7297C',80:'#DF1F70',90:'#D61463' }, - cabbage: { 10:'#D8B4FE',20:'#CC9CFD',30:'#C084FC',40:'#A855F7',50:'#9333EA',60:'#7E22CE',70:'#7522BB',80:'#6B21A8',90:'#581C87' }, + cabbage: { 10:'#C084FC',20:'#B46DFA',30:'#A855F7',40:'#9333EA',50:'#892BDC',60:'#7E22CE',70:'#7522BB',80:'#6B21A8',90:'#581C87' }, onion: { 10:'#9670F8',20:'#8662F4',30:'#7855F0',40:'#6947ED',50:'#5637E9',60:'#452CD7',70:'#3B25C8',80:'#331EBA',90:'#2C19AD' }, water: { 10:'#6B85F9',20:'#5F78F7',30:'#5367F6',40:'#4657F3',50:'#353FF1',60:'#292BE9',70:'#2421E2',80:'#2119DC',90:'#1C11D5' }, - salt: { 0:'#FFFFFF',10:'#F9F8F9',20:'#F3F1F3',30:'#ECE9ED',40:'#E6E1E7',50:'#DDD7DE',60:'#D4CBD5',70:'#CEC2D0',80:'#C8BACA',90:'#C2B1C6' }, - pepper: { 10:'#52525B',20:'#494951',30:'#3F3F46',40:'#2F2F36',50:'#1F1F25',60:'#1B1B21',70:'#17171C',80:'#131317',90:'#0F0F12' }, + salt: { 0:'#FFFFFF',10:'#FAFAFA',20:'#F5F4F5',30:'#EEECEE',40:'#E6E4E7',50:'#DFDDDF',60:'#D8D4D8',70:'#CBC7CC',80:'#BDB6BE',90:'#ACA2AE' }, + pepper: { 10:'#52525B',20:'#494951',30:'#3F3F46',40:'#35353B',50:'#2A2A30',60:'#25252B',70:'#1F1F25',80:'#17171C',90:'#0F0F12' }, }; const FAMILIES = Object.keys(NEW); @@ -138,7 +138,7 @@ const TOKENS: Token[] = [ // ---------- presentational helpers (inline-styled, theme-independent) ---------- const mono: React.CSSProperties = { fontFamily: 'monospace', fontSize: 11 }; -const card: React.CSSProperties = { background: '#131317', color: '#FFFFFF', padding: 24, borderRadius: 12 }; +const card: React.CSSProperties = { background: '#17171C', color: '#FFFFFF', padding: 24, borderRadius: 12 }; const Swatch = ({ hex, w = 64, h = 40 }: { hex: string; w?: number; h?: number }) => (
@@ -169,7 +169,7 @@ type Story = StoryObj; // ===================== Story 0: guidelines ===================== const GUIDE: { token: string; value: string; note: string }[] = [ - { token: 'brand / share', value: NEW.cabbage['50'], note: 'docs purple #9333EA (Tailwind purple-600)' }, + { token: 'brand / share', value: NEW.cabbage['50'], note: 'docs purple #892BDC (Tailwind purple-600)' }, { token: 'background-default (dark)', value: NEW.pepper['90'], note: 'near-black base — the sidebar/page surface' }, { token: 'background-subtle (dark)', value: NEW.pepper['70'], note: 'cards / content sit one step up for contrast' }, { token: 'background-default (light)', value: WHITE, note: 'pure white; subtle surface is faint lavender salt.10' }, @@ -184,8 +184,8 @@ export const Guidelines: Story = {

Palette guideline — docs.daily.dev aligned

    -
  • Purple is the brand, not the surface. The accent (cabbage) is the docs purple #9333EA; backgrounds stay neutral so the purple pops.
    • -
  • Near-black dark mode. Surfaces step #0F0F12 → #17171C → #1F1F25 for clear separation between sidebar, content and cards.
    • +
  • Purple is the brand, not the surface. The accent (cabbage) is the docs purple #892BDC; backgrounds stay neutral so the purple pops.
    • +
  • Near-black dark mode. Surfaces step #0F0F12 → #1F1F25 → #2A2A30 for clear separation between sidebar, content and cards.
  • Lavender-tinted light mode. White base with a faint purple cast on subtle surfaces.
  • Status stays functional. Error/success/warning remain red/green/orange.
  • Structure untouched. Same token names, shade levels and opacity percentages — only hues moved.
    • @@ -212,8 +212,8 @@ export const RawRamps: Story = {

    Raw color ramps — old (top) vs new (bottom)

    Every family keeps its name and all nine shade levels. The brand (cabbage) now follows the - docs.daily.dev purple ramp (#9333EA); dark neutrals (pepper) are near-black and essentially - neutral (#0F0F12 → #17171C) for strong element contrast; light neutrals (salt) carry a faint + docs.daily.dev purple ramp (#892BDC); dark neutrals (pepper) are near-black and essentially + neutral (#0F0F12 → #1F1F25) for strong element contrast; light neutrals (salt) carry a faint lavender tint. Social colors and opacity percentages are unchanged.

    From 53c33f570ec8ea35f28222264066e921557ffb45 Mon Sep 17 00:00:00 2001 From: Tsahi Matsliah Date: Wed, 17 Jun 2026 20:16:27 +0300 Subject: [PATCH 5/6] fix: docs-faithful dark surfaces (sidebar + cards #17171C on #0F0F12 page) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Pull pepper.70 to the docs raised gray #17171C (was #1F1F25) so feed cards match the docs, and switch the sidebar shell from background-default to background-subtle so the sidebar is #17171C too — one subtle step over the #0F0F12 page canvas, like docs. Active rail items stay background-default (#0F0F12) as a darker recess. Co-Authored-By: Claude Opus 4.8 --- packages/shared/src/components/sidebar/common.tsx | 2 +- packages/shared/src/styles/colors.ts | 10 +++++----- packages/shared/tailwind/colors.ts | 10 +++++----- .../storybook/stories/tokens/PaletteRetone.stories.tsx | 10 +++++----- 4 files changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/shared/src/components/sidebar/common.tsx b/packages/shared/src/components/sidebar/common.tsx index e25cf19874b..e5f3e23f8b3 100644 --- a/packages/shared/src/components/sidebar/common.tsx +++ b/packages/shared/src/components/sidebar/common.tsx @@ -53,7 +53,7 @@ export const navBtnClass = 'flex flex-1 items-center pl-2 laptop:pl-0 pr-5 laptop:pr-3 h-10 laptop:h-9 overflow-hidden'; export const SidebarAside = classed( 'aside', - 'flex flex-col z-sidebarOverlay laptop:z-sidebar laptop:-translate-x-0 left-0 bg-background-default border-r border-border-subtlest-tertiary transition-[width,transform] duration-300 ease-in-out group fixed top-0 h-full', + 'flex flex-col z-sidebarOverlay laptop:z-sidebar laptop:-translate-x-0 left-0 bg-background-subtle border-r border-border-subtlest-tertiary transition-[width,transform] duration-300 ease-in-out group fixed top-0 h-full', ); export const SidebarScrollWrapper = classed( 'div', diff --git a/packages/shared/src/styles/colors.ts b/packages/shared/src/styles/colors.ts index 1cbca68caa3..287c5ba8cab 100644 --- a/packages/shared/src/styles/colors.ts +++ b/packages/shared/src/styles/colors.ts @@ -175,11 +175,11 @@ const colors: ColorPalette = { '10': '#52525B', '20': '#494951', '30': '#3F3F46', - '40': '#35353B', - '50': '#2A2A30', - '60': '#25252B', - '70': '#1F1F25', - '80': '#17171C', + '40': '#2A2A30', + '50': '#1F1F25', + '60': '#1B1B21', + '70': '#17171C', + '80': '#131318', '90': '#0F0F12', }, twitter: { diff --git a/packages/shared/tailwind/colors.ts b/packages/shared/tailwind/colors.ts index dede31057fe..e85de4a61d4 100644 --- a/packages/shared/tailwind/colors.ts +++ b/packages/shared/tailwind/colors.ts @@ -144,11 +144,11 @@ const colors = { 10: '#52525B', 20: '#494951', 30: '#3F3F46', - 40: '#35353B', - 50: '#2A2A30', - 60: '#25252B', - 70: '#1F1F25', - 80: '#17171C', + 40: '#2A2A30', + 50: '#1F1F25', + 60: '#1B1B21', + 70: '#17171C', + 80: '#131318', 90: '#0F0F12', }, twitter: { diff --git a/packages/storybook/stories/tokens/PaletteRetone.stories.tsx b/packages/storybook/stories/tokens/PaletteRetone.stories.tsx index 61317b204ce..da081eac574 100644 --- a/packages/storybook/stories/tokens/PaletteRetone.stories.tsx +++ b/packages/storybook/stories/tokens/PaletteRetone.stories.tsx @@ -46,7 +46,7 @@ const NEW: Palette = { onion: { 10:'#9670F8',20:'#8662F4',30:'#7855F0',40:'#6947ED',50:'#5637E9',60:'#452CD7',70:'#3B25C8',80:'#331EBA',90:'#2C19AD' }, water: { 10:'#6B85F9',20:'#5F78F7',30:'#5367F6',40:'#4657F3',50:'#353FF1',60:'#292BE9',70:'#2421E2',80:'#2119DC',90:'#1C11D5' }, salt: { 0:'#FFFFFF',10:'#FAFAFA',20:'#F5F4F5',30:'#EEECEE',40:'#E6E4E7',50:'#DFDDDF',60:'#D8D4D8',70:'#CBC7CC',80:'#BDB6BE',90:'#ACA2AE' }, - pepper: { 10:'#52525B',20:'#494951',30:'#3F3F46',40:'#35353B',50:'#2A2A30',60:'#25252B',70:'#1F1F25',80:'#17171C',90:'#0F0F12' }, + pepper: { 10:'#52525B',20:'#494951',30:'#3F3F46',40:'#2A2A30',50:'#1F1F25',60:'#1B1B21',70:'#17171C',80:'#131318',90:'#0F0F12' }, }; const FAMILIES = Object.keys(NEW); @@ -138,7 +138,7 @@ const TOKENS: Token[] = [ // ---------- presentational helpers (inline-styled, theme-independent) ---------- const mono: React.CSSProperties = { fontFamily: 'monospace', fontSize: 11 }; -const card: React.CSSProperties = { background: '#17171C', color: '#FFFFFF', padding: 24, borderRadius: 12 }; +const card: React.CSSProperties = { background: '#131318', color: '#FFFFFF', padding: 24, borderRadius: 12 }; const Swatch = ({ hex, w = 64, h = 40 }: { hex: string; w?: number; h?: number }) => (
    @@ -171,7 +171,7 @@ type Story = StoryObj; const GUIDE: { token: string; value: string; note: string }[] = [ { token: 'brand / share', value: NEW.cabbage['50'], note: 'docs purple #892BDC (Tailwind purple-600)' }, { token: 'background-default (dark)', value: NEW.pepper['90'], note: 'near-black base — the sidebar/page surface' }, - { token: 'background-subtle (dark)', value: NEW.pepper['70'], note: 'cards / content sit one step up for contrast' }, + { token: 'background-subtle (dark)', value: NEW.pepper['70'], note: 'sidebar + feed cards (#17171C, one step up from the page)' }, { token: 'background-default (light)', value: WHITE, note: 'pure white; subtle surface is faint lavender salt.10' }, { token: 'text-primary (dark)', value: WHITE, note: 'white on near-black' }, { token: 'border-subtlest (dark)', value: NEW.salt['90'], note: 'low-contrast dividers' }, @@ -185,7 +185,7 @@ export const Guidelines: Story = {

    Palette guideline — docs.daily.dev aligned

    • Purple is the brand, not the surface. The accent (cabbage) is the docs purple #892BDC; backgrounds stay neutral so the purple pops.
      • -
    • Near-black dark mode. Surfaces step #0F0F12 → #1F1F25 → #2A2A30 for clear separation between sidebar, content and cards.
      • +
    • Near-black dark mode. Surfaces step #0F0F12 → #17171C → #1F1F25 for clear separation between sidebar, content and cards.
    • Lavender-tinted light mode. White base with a faint purple cast on subtle surfaces.
    • Status stays functional. Error/success/warning remain red/green/orange.
    • Structure untouched. Same token names, shade levels and opacity percentages — only hues moved.
      • @@ -213,7 +213,7 @@ export const RawRamps: Story = {

      Every family keeps its name and all nine shade levels. The brand (cabbage) now follows the docs.daily.dev purple ramp (#892BDC); dark neutrals (pepper) are near-black and essentially - neutral (#0F0F12 → #1F1F25) for strong element contrast; light neutrals (salt) carry a faint + neutral (#0F0F12 → #17171C) for strong element contrast; light neutrals (salt) carry a faint lavender tint. Social colors and opacity percentages are unchanged.

      From 30ee538edb8fbe74d20e9ed3d73325f9a860f30a Mon Sep 17 00:00:00 2001 From: Tsahi Matsliah Date: Wed, 17 Jun 2026 23:55:31 +0300 Subject: [PATCH 6/6] feat: rebuild palette in OKLCH (perceptually-even ramps, research-backed) Regenerate every family as a perceptually-uniform OKLCH ramp: lightness eases per-hue (light end -> dark end), chroma peaks mid-ramp, out-of-gamut colors are chroma-fit. Near-black neutrals with a whisper of violet chroma (page #0E0E14, surfaces #19191F), a saturated violet brand whose dark solid button (#913BE0) clears WCAG AA on white text (5.4:1), and status hues kept distinct. Token names, levels and opacity percentages unchanged. Based on Radix scale roles, Carbon elevation, and WCAG/APCA contrast guidance. Co-Authored-By: Claude Opus 4.8 --- packages/extension/src/frame/render.ts | 2 +- .../onboarding/shared/PricingPlan.module.css | 2 +- packages/shared/src/styles/base.css | 6 +- packages/shared/src/styles/colors.ts | 234 ++++++++--------- packages/shared/tailwind/colors.ts | 238 +++++++++--------- packages/shared/tailwind/overlay.ts | 156 ++++++------ .../stories/tokens/PaletteRetone.stories.tsx | 36 +-- 7 files changed, 338 insertions(+), 336 deletions(-) diff --git a/packages/extension/src/frame/render.ts b/packages/extension/src/frame/render.ts index eba459332ff..9122cdff96f 100644 --- a/packages/extension/src/frame/render.ts +++ b/packages/extension/src/frame/render.ts @@ -127,7 +127,7 @@ const ensureStyles = (): void => { padding: 0 1rem; border: 0; border-radius: 12px; - background: #892BDC; + background: #8112D2; color: #ffffff; font: inherit; font-size: 0.9375rem; diff --git a/packages/shared/src/features/onboarding/shared/PricingPlan.module.css b/packages/shared/src/features/onboarding/shared/PricingPlan.module.css index 6932ccd5fcc..58719769433 100644 --- a/packages/shared/src/features/onboarding/shared/PricingPlan.module.css +++ b/packages/shared/src/features/onboarding/shared/PricingPlan.module.css @@ -19,7 +19,7 @@ } &::before { - background: linear-gradient(135.18deg, #C084FC 0%, #9670F8 24.16%, #6B85F9 40%, #9670F8 71.33%, #A855F7 100%); + background: linear-gradient(135.18deg, #BC94F2 0%, #A0ABF3 24.16%, #92CAFF 40%, #A0ABF3 71.33%, #A35DED 100%); content: ''; position: absolute; top: 0; diff --git a/packages/shared/src/styles/base.css b/packages/shared/src/styles/base.css index cced2b77b33..b800157f6f8 100644 --- a/packages/shared/src/styles/base.css +++ b/packages/shared/src/styles/base.css @@ -814,7 +814,7 @@ details.right-icon { } .squad-background-fade { - background: radial-gradient(ellipse, #892BDC88 0%, #892BDC00 400px); + background: radial-gradient(ellipse, #8112D288 0%, #8112D200 400px); background-size: 1200px 500px; background-position: center -250px; background-repeat: no-repeat; @@ -911,7 +911,7 @@ meter::-webkit-meter-bar { } &-best-price { - background: linear-gradient(135deg, #C084FC 0%, #9670F8 44.71%, #6B85F9 100%); + background: linear-gradient(135deg, #BC94F2 0%, #A0ABF3 44.71%, #92CAFF 100%); } } @@ -1077,7 +1077,7 @@ meter::-webkit-meter-bar { } .top-hero-panel-border { - background: linear-gradient(122deg, #331EBA 0%, #6B21A8 45%, #F956AF 100%); + background: linear-gradient(122deg, #2C2986 0%, #500086 45%, #E85692 100%); } .top-hero-glow { diff --git a/packages/shared/src/styles/colors.ts b/packages/shared/src/styles/colors.ts index 287c5ba8cab..131e3755d0f 100644 --- a/packages/shared/src/styles/colors.ts +++ b/packages/shared/src/styles/colors.ts @@ -39,148 +39,148 @@ type ColorPalette = Record, Color> & const colors: ColorPalette = { burger: { - '10': '#C68B67', - '20': '#BD815E', - '30': '#B47755', - '40': '#AA6D4B', - '50': '#9E5F3F', - '60': '#8F5233', - '70': '#84482B', - '80': '#7A3F24', - '90': '#70361D', + '10': '#E1CCBF', + '20': '#D1B7A6', + '30': '#BE9F8B', + '40': '#A6856F', + '50': '#916F58', + '60': '#7D5D48', + '70': '#6B4E3B', + '80': '#594130', + '90': '#473325', }, blueCheese: { - '10': '#71E6F4', - '20': '#5EE0EF', - '30': '#48D8EA', - '40': '#2FCDE3', - '50': '#10BFD9', - '60': '#0BB1CB', - '70': '#08A6C2', - '80': '#059CBA', - '90': '#0391B0', + '10': '#B7F5FD', + '20': '#94E5F0', + '30': '#6CD1DF', + '40': '#3EBAC9', + '50': '#00A6B6', + '60': '#0092A1', + '70': '#00818E', + '80': '#00717D', + '90': '#00616B', }, avocado: { - '10': '#76F1C8', - '20': '#67EFBB', - '30': '#53E9AF', - '40': '#3CE29D', - '50': '#20D982', - '60': '#18CB6F', - '70': '#12C261', - '80': '#0DBA54', - '90': '#07B147', + '10': '#B7F7C7', + '20': '#96E8AC', + '30': '#70D68F', + '40': '#47BF72', + '50': '#19AB5A', + '60': '#00974C', + '70': '#008542', + '80': '#007539', + '90': '#0C6332', }, lettuce: { - '10': '#D0FC6E', - '20': '#C1F95D', - '30': '#B1F54C', - '40': '#9FF238', - '50': '#84EF20', - '60': '#6FE617', - '70': '#62DF12', - '80': '#55D80C', - '90': '#4BD107', + '10': '#A2DF6C', + '20': '#A2DF6C', + '30': '#A2DF6C', + '40': '#88CB44', + '50': '#72B818', + '60': '#65A700', + '70': '#5B9701', + '80': '#548813', + '90': '#4C771E', }, cheese: { - '10': '#FFF76F', - '20': '#FFF35A', - '30': '#FFEF40', - '40': '#FFE923', - '50': '#FFDF00', - '60': '#FCD400', - '70': '#F9CC00', - '80': '#F6C400', - '90': '#F3BC00', + '10': '#E6D858', + '20': '#E6D858', + '30': '#E6D858', + '40': '#D4C31B', + '50': '#C1B100', + '60': '#B1A300', + '70': '#A39500', + '80': '#968900', + '90': '#877C11', }, bun: { - '10': '#FFB260', - '20': '#FFA455', - '30': '#FF9748', - '40': '#FF873B', - '50': '#FF732B', - '60': '#FA5F20', - '70': '#F55219', - '80': '#F04511', - '90': '#EB370A', + '10': '#FFE1CC', + '20': '#FFC89E', + '30': '#FFA761', + '40': '#EA8B36', + '50': '#D67400', + '60': '#BC6500', + '70': '#A65800', + '80': '#924D00', + '90': '#7D4100', }, ketchup: { - '10': '#F1746E', - '20': '#EB635E', - '30': '#E5514D', - '40': '#DD3D3A', - '50': '#D22523', - '60': '#C41A1A', - '70': '#BA1414', - '80': '#B00E10', - '90': '#A7070B', + '10': '#FEA196', + '20': '#F9857A', + '30': '#EF655B', + '40': '#DD423B', + '50': '#CA1C20', + '60': '#B20010', + '70': '#99000C', + '80': '#820008', + '90': '#6B0005', }, bacon: { - '10': '#FC7CD0', - '20': '#FB70C5', - '30': '#FB63BC', - '40': '#F956AF', - '50': '#F9439F', - '60': '#F0348A', - '70': '#E7297C', - '80': '#DF1F70', - '90': '#D61463', + '10': '#FFB5CD', + '20': '#FF98BC', + '30': '#F976A8', + '40': '#E85692', + '50': '#D5397F', + '60': '#C0296F', + '70': '#AA2161', + '80': '#941F55', + '90': '#7C1D47', }, cabbage: { - '10': '#C084FC', - '20': '#B46DFA', - '30': '#A855F7', - '40': '#9333EA', - '50': '#892BDC', - '60': '#7E22CE', - '70': '#7522BB', - '80': '#6B21A8', - '90': '#581C87', + '10': '#BC94F2', + '20': '#B17BF2', + '30': '#A35DED', + '40': '#913BE0', + '50': '#8112D2', + '60': '#6F00B8', + '70': '#5E009D', + '80': '#500086', + '90': '#40006D', }, onion: { - '10': '#9670F8', - '20': '#8662F4', - '30': '#7855F0', - '40': '#6947ED', - '50': '#5637E9', - '60': '#452CD7', - '70': '#3B25C8', - '80': '#331EBA', - '90': '#2C19AD', + '10': '#A0ABF3', + '20': '#8B97F2', + '30': '#767FEB', + '40': '#6065DC', + '50': '#4E4FCD', + '60': '#413FB6', + '70': '#36329E', + '80': '#2C2986', + '90': '#221F6B', }, water: { - '10': '#6B85F9', - '20': '#5F78F7', - '30': '#5367F6', - '40': '#4657F3', - '50': '#353FF1', - '60': '#292BE9', - '70': '#2421E2', - '80': '#2119DC', - '90': '#1C11D5', + '10': '#92CAFF', + '20': '#6CB7FD', + '30': '#40A1F4', + '40': '#0087E0', + '50': '#0072BE', + '60': '#0061A2', + '70': '#00518A', + '80': '#004374', + '90': '#00355D', }, salt: { '0': '#FFFFFF', - '10': '#FAFAFA', - '20': '#F5F4F5', - '30': '#EEECEE', - '40': '#E6E4E7', - '50': '#DFDDDF', - '60': '#D8D4D8', - '70': '#CBC7CC', - '80': '#BDB6BE', - '90': '#ACA2AE', + '10': '#F6F6FB', + '20': '#EEEEF3', + '30': '#E5E6EB', + '40': '#DCDCE1', + '50': '#D0D0D5', + '60': '#C3C3C9', + '70': '#B7B7BC', + '80': '#AAAAAF', + '90': '#9E9EA3', }, pepper: { - '10': '#52525B', - '20': '#494951', - '30': '#3F3F46', - '40': '#2A2A30', - '50': '#1F1F25', - '60': '#1B1B21', - '70': '#17171C', - '80': '#131318', - '90': '#0F0F12', + '10': '#62626B', + '20': '#56565E', + '30': '#494951', + '40': '#3C3C44', + '50': '#2E2E36', + '60': '#222229', + '70': '#19191F', + '80': '#131319', + '90': '#0E0E14', }, twitter: { '10': '#37BBF6', diff --git a/packages/shared/tailwind/colors.ts b/packages/shared/tailwind/colors.ts index e85de4a61d4..d27d6e0a568 100644 --- a/packages/shared/tailwind/colors.ts +++ b/packages/shared/tailwind/colors.ts @@ -1,155 +1,155 @@ const colors = { burger: { - 10: '#C68B67', - 20: '#BD815E', - 30: '#B47755', - 40: '#AA6D4B', - 50: '#9E5F3F', - 60: '#8F5233', - 70: '#84482B', - 80: '#7A3F24', - 90: '#70361D', + 10: '#E1CCBF', + 20: '#D1B7A6', + 30: '#BE9F8B', + 40: '#A6856F', + 50: '#916F58', + 60: '#7D5D48', + 70: '#6B4E3B', + 80: '#594130', + 90: '#473325', }, blueCheese: { - 10: '#71E6F4', - 20: '#5EE0EF', - 30: '#48D8EA', - 40: '#2FCDE3', - 50: '#10BFD9', - 60: '#0BB1CB', - 70: '#08A6C2', - 80: '#059CBA', - 90: '#0391B0', + 10: '#B7F5FD', + 20: '#94E5F0', + 30: '#6CD1DF', + 40: '#3EBAC9', + 50: '#00A6B6', + 60: '#0092A1', + 70: '#00818E', + 80: '#00717D', + 90: '#00616B', lightLabel: 'var(--theme-text-primary)', }, avocado: { - 10: '#76F1C8', - 20: '#67EFBB', - 30: '#53E9AF', - 40: '#3CE29D', - 50: '#20D982', - 60: '#18CB6F', - 70: '#12C261', - 80: '#0DBA54', - 90: '#07B147', + 10: '#B7F7C7', + 20: '#96E8AC', + 30: '#70D68F', + 40: '#47BF72', + 50: '#19AB5A', + 60: '#00974C', + 70: '#008542', + 80: '#007539', + 90: '#0C6332', lightLabel: 'var(--theme-text-primary)', }, lettuce: { - 10: '#D0FC6E', - 20: '#C1F95D', - 30: '#B1F54C', - 40: '#9FF238', - 50: '#84EF20', - 60: '#6FE617', - 70: '#62DF12', - 80: '#55D80C', - 90: '#4BD107', + 10: '#A2DF6C', + 20: '#A2DF6C', + 30: '#A2DF6C', + 40: '#88CB44', + 50: '#72B818', + 60: '#65A700', + 70: '#5B9701', + 80: '#548813', + 90: '#4C771E', lightLabel: 'var(--theme-text-primary)', }, cheese: { - 10: '#FFF76F', - 20: '#FFF35A', - 30: '#FFEF40', - 40: '#FFE923', - 50: '#FFDF00', - 60: '#FCD400', - 70: '#F9CC00', - 80: '#F6C400', - 90: '#F3BC00', + 10: '#E6D858', + 20: '#E6D858', + 30: '#E6D858', + 40: '#D4C31B', + 50: '#C1B100', + 60: '#B1A300', + 70: '#A39500', + 80: '#968900', + 90: '#877C11', lightLabel: 'var(--theme-text-primary)', }, bun: { - 10: '#FFB260', - 20: '#FFA455', - 30: '#FF9748', - 40: '#FF873B', - 50: '#FF732B', - 60: '#FA5F20', - 70: '#F55219', - 80: '#F04511', - 90: '#EB370A', + 10: '#FFE1CC', + 20: '#FFC89E', + 30: '#FFA761', + 40: '#EA8B36', + 50: '#D67400', + 60: '#BC6500', + 70: '#A65800', + 80: '#924D00', + 90: '#7D4100', lightLabel: 'var(--theme-text-primary)', }, ketchup: { - 10: '#F1746E', - 20: '#EB635E', - 30: '#E5514D', - 40: '#DD3D3A', - 50: '#D22523', - 60: '#C41A1A', - 70: '#BA1414', - 80: '#B00E10', - 90: '#A7070B', + 10: '#FEA196', + 20: '#F9857A', + 30: '#EF655B', + 40: '#DD423B', + 50: '#CA1C20', + 60: '#B20010', + 70: '#99000C', + 80: '#820008', + 90: '#6B0005', }, bacon: { - 10: '#FC7CD0', - 20: '#FB70C5', - 30: '#FB63BC', - 40: '#F956AF', - 50: '#F9439F', - 60: '#F0348A', - 70: '#E7297C', - 80: '#DF1F70', - 90: '#D61463', + 10: '#FFB5CD', + 20: '#FF98BC', + 30: '#F976A8', + 40: '#E85692', + 50: '#D5397F', + 60: '#C0296F', + 70: '#AA2161', + 80: '#941F55', + 90: '#7C1D47', }, cabbage: { - 0: '#C084FC00', - 10: '#C084FC', - 20: '#B46DFA', - 30: '#A855F7', - 40: '#9333EA', - 50: '#892BDC', - 60: '#7E22CE', - 70: '#7522BB', - 80: '#6B21A8', - 90: '#581C87', + 0: '#BC94F200', + 10: '#BC94F2', + 20: '#B17BF2', + 30: '#A35DED', + 40: '#913BE0', + 50: '#8112D2', + 60: '#6F00B8', + 70: '#5E009D', + 80: '#500086', + 90: '#40006D', }, onion: { - 0: '#9670F800', - 10: '#9670F8', - 20: '#8662F4', - 30: '#7855F0', - 40: '#6947ED', - 50: '#5637E9', - 60: '#452CD7', - 70: '#3B25C8', - 80: '#331EBA', - 90: '#2C19AD', + 0: '#A0ABF300', + 10: '#A0ABF3', + 20: '#8B97F2', + 30: '#767FEB', + 40: '#6065DC', + 50: '#4E4FCD', + 60: '#413FB6', + 70: '#36329E', + 80: '#2C2986', + 90: '#221F6B', darkLabel: '#FFFFFF', }, water: { - 10: '#6B85F9', - 20: '#5F78F7', - 30: '#5367F6', - 40: '#4657F3', - 50: '#353FF1', - 60: '#292BE9', - 70: '#2421E2', - 80: '#2119DC', - 90: '#1C11D5', + 10: '#92CAFF', + 20: '#6CB7FD', + 30: '#40A1F4', + 40: '#0087E0', + 50: '#0072BE', + 60: '#0061A2', + 70: '#00518A', + 80: '#004374', + 90: '#00355D', }, salt: { 0: '#FFFFFF', - 10: '#FAFAFA', - 20: '#F5F4F5', - 30: '#EEECEE', - 40: '#E6E4E7', - 50: '#DFDDDF', - 60: '#D8D4D8', - 70: '#CBC7CC', - 80: '#BDB6BE', - 90: '#ACA2AE', + 10: '#F6F6FB', + 20: '#EEEEF3', + 30: '#E5E6EB', + 40: '#DCDCE1', + 50: '#D0D0D5', + 60: '#C3C3C9', + 70: '#B7B7BC', + 80: '#AAAAAF', + 90: '#9E9EA3', }, pepper: { - 10: '#52525B', - 20: '#494951', - 30: '#3F3F46', - 40: '#2A2A30', - 50: '#1F1F25', - 60: '#1B1B21', - 70: '#17171C', - 80: '#131318', - 90: '#0F0F12', + 10: '#62626B', + 20: '#56565E', + 30: '#494951', + 40: '#3C3C44', + 50: '#2E2E36', + 60: '#222229', + 70: '#19191F', + 80: '#131319', + 90: '#0E0E14', }, twitter: { 10: '#000000', diff --git a/packages/shared/tailwind/overlay.ts b/packages/shared/tailwind/overlay.ts index 3d8e1928fb6..168e077c889 100644 --- a/packages/shared/tailwind/overlay.ts +++ b/packages/shared/tailwind/overlay.ts @@ -1,19 +1,19 @@ /** TODO: Remove these once we migrated all colors to new naming convention */ const overlayColors = { primary: { - burger: '#9E5F3FA3', - blueCheese: '#10BFD9A3', - avocado: '#20D982A3', - lettuce: '#84EF20A3', - cheese: '#FFDF00A3', - bun: '#FF732BA3', - ketchup: '#D22523A3', - bacon: '#F9439FA3', - cabbage: '#892BDCA3', - onion: '#5637E9A3', - water: '#353FF1A3', - salt: '#ACA2AEA3', - pepper: '#0F0F12A3', + burger: '#916F58A3', + blueCheese: '#00A6B6A3', + avocado: '#19AB5AA3', + lettuce: '#72B818A3', + cheese: '#C1B100A3', + bun: '#D67400A3', + ketchup: '#CA1C20A3', + bacon: '#D5397FA3', + cabbage: '#8112D2A3', + onion: '#4E4FCDA3', + water: '#0072BEA3', + salt: '#9E9EA3A3', + pepper: '#0E0E14A3', twitter: '#000000A3', whatsapp: '#20B038A3', facebook: '#3B5998A3', @@ -24,19 +24,19 @@ const overlayColors = { black: '#000000A3', }, secondary: { - burger: '#9E5F3F66', - blueCheese: '#10BFD966', - avocado: '#20D98266', - lettuce: '#84EF2066', - cheese: '#FFDF0066', - bun: '#FF732B66', - ketchup: '#D2252366', - bacon: '#F9439F66', - cabbage: '#892BDC66', - onion: '#5637E966', - water: '#353FF166', - salt: '#ACA2AE66', - pepper: '#0F0F1266', + burger: '#916F5866', + blueCheese: '#00A6B666', + avocado: '#19AB5A66', + lettuce: '#72B81866', + cheese: '#C1B10066', + bun: '#D6740066', + ketchup: '#CA1C2066', + bacon: '#D5397F66', + cabbage: '#8112D266', + onion: '#4E4FCD66', + water: '#0072BE66', + salt: '#9E9EA366', + pepper: '#0E0E1466', twitter: '#00000066', whatsapp: '#20B03866', facebook: '#3B599866', @@ -47,19 +47,19 @@ const overlayColors = { black: '#00000066', }, tertiary: { - burger: '#9E5F3F52', - blueCheese: '#10BFD952', - avocado: '#20D98252', - lettuce: '#84EF2052', - cheese: '#FFDF0052', - bun: '#FF732B52', - ketchup: '#D2252352', - bacon: '#F9439F52', - cabbage: '#892BDC52', - onion: '#5637E952', - water: '#353FF152', - salt: '#ACA2AE52', - pepper: '#0F0F1252', + burger: '#916F5852', + blueCheese: '#00A6B652', + avocado: '#19AB5A52', + lettuce: '#72B81852', + cheese: '#C1B10052', + bun: '#D6740052', + ketchup: '#CA1C2052', + bacon: '#D5397F52', + cabbage: '#8112D252', + onion: '#4E4FCD52', + water: '#0072BE52', + salt: '#9E9EA352', + pepper: '#0E0E1452', twitter: '#00000052', whatsapp: '#20B03852', facebook: '#3B599852', @@ -70,19 +70,19 @@ const overlayColors = { black: '#00000052', }, quaternary: { - burger: '#9E5F3F3D', - blueCheese: '#10BFD93D', - avocado: '#20D9823D', - lettuce: '#84EF203D', - cheese: '#FFDF003D', - bun: '#FF732B3D', - ketchup: '#D225233D', - bacon: '#F9439F3D', - cabbage: '#892BDC3D', - onion: '#5637E93D', - water: '#353FF13D', - salt: '#ACA2AE3D', - pepper: '#0F0F123D', + burger: '#916F583D', + blueCheese: '#00A6B63D', + avocado: '#19AB5A3D', + lettuce: '#72B8183D', + cheese: '#C1B1003D', + bun: '#D674003D', + ketchup: '#CA1C203D', + bacon: '#D5397F3D', + cabbage: '#8112D23D', + onion: '#4E4FCD3D', + water: '#0072BE3D', + salt: '#9E9EA33D', + pepper: '#0E0E143D', twitter: '#0000003D', whatsapp: '#20B0383D', facebook: '#3B59983D', @@ -93,19 +93,19 @@ const overlayColors = { black: '#0000003D', }, active: { - burger: '#9E5F3F29', - blueCheese: '#10BFD929', - avocado: '#20D98229', - lettuce: '#84EF2029', - cheese: '#FFDF0029', - bun: '#FF732B29', - ketchup: '#D2252329', - bacon: '#F9439F29', - cabbage: '#892BDC29', - onion: '#5637E929', - water: '#353FF129', - salt: '#ACA2AE29', - pepper: '#0F0F1229', + burger: '#916F5829', + blueCheese: '#00A6B629', + avocado: '#19AB5A29', + lettuce: '#72B81829', + cheese: '#C1B10029', + bun: '#D6740029', + ketchup: '#CA1C2029', + bacon: '#D5397F29', + cabbage: '#8112D229', + onion: '#4E4FCD29', + water: '#0072BE29', + salt: '#9E9EA329', + pepper: '#0E0E1429', twitter: '#00000029', whatsapp: '#20B03829', facebook: '#3B599829', @@ -116,19 +116,19 @@ const overlayColors = { black: '#00000029', }, float: { - burger: '#9E5F3F14', - blueCheese: '#10BFD914', - avocado: '#20D98214', - lettuce: '#84EF2014', - cheese: '#FFDF0014', - bun: '#FF732B14', - ketchup: '#D2252314', - bacon: '#F9439F14', - cabbage: '#892BDC14', - onion: '#5637E914', - water: '#353FF114', - salt: '#ACA2AE14', - pepper: '#0F0F1214', + burger: '#916F5814', + blueCheese: '#00A6B614', + avocado: '#19AB5A14', + lettuce: '#72B81814', + cheese: '#C1B10014', + bun: '#D6740014', + ketchup: '#CA1C2014', + bacon: '#D5397F14', + cabbage: '#8112D214', + onion: '#4E4FCD14', + water: '#0072BE14', + salt: '#9E9EA314', + pepper: '#0E0E1414', twitter: '#00000014', whatsapp: '#20B03814', facebook: '#3B599814', diff --git a/packages/storybook/stories/tokens/PaletteRetone.stories.tsx b/packages/storybook/stories/tokens/PaletteRetone.stories.tsx index da081eac574..19cb18b4017 100644 --- a/packages/storybook/stories/tokens/PaletteRetone.stories.tsx +++ b/packages/storybook/stories/tokens/PaletteRetone.stories.tsx @@ -34,19 +34,19 @@ const OLD: Palette = { // The new re-toned ramps now shipping in the palette. const NEW: Palette = { - burger: { 10:'#C68B67',20:'#BD815E',30:'#B47755',40:'#AA6D4B',50:'#9E5F3F',60:'#8F5233',70:'#84482B',80:'#7A3F24',90:'#70361D' }, - blueCheese: { 10:'#71E6F4',20:'#5EE0EF',30:'#48D8EA',40:'#2FCDE3',50:'#10BFD9',60:'#0BB1CB',70:'#08A6C2',80:'#059CBA',90:'#0391B0' }, - avocado: { 10:'#76F1C8',20:'#67EFBB',30:'#53E9AF',40:'#3CE29D',50:'#20D982',60:'#18CB6F',70:'#12C261',80:'#0DBA54',90:'#07B147' }, - lettuce: { 10:'#D0FC6E',20:'#C1F95D',30:'#B1F54C',40:'#9FF238',50:'#84EF20',60:'#6FE617',70:'#62DF12',80:'#55D80C',90:'#4BD107' }, - cheese: { 10:'#FFF76F',20:'#FFF35A',30:'#FFEF40',40:'#FFE923',50:'#FFDF00',60:'#FCD400',70:'#F9CC00',80:'#F6C400',90:'#F3BC00' }, - bun: { 10:'#FFB260',20:'#FFA455',30:'#FF9748',40:'#FF873B',50:'#FF732B',60:'#FA5F20',70:'#F55219',80:'#F04511',90:'#EB370A' }, - ketchup: { 10:'#F1746E',20:'#EB635E',30:'#E5514D',40:'#DD3D3A',50:'#D22523',60:'#C41A1A',70:'#BA1414',80:'#B00E10',90:'#A7070B' }, - bacon: { 10:'#FC7CD0',20:'#FB70C5',30:'#FB63BC',40:'#F956AF',50:'#F9439F',60:'#F0348A',70:'#E7297C',80:'#DF1F70',90:'#D61463' }, - cabbage: { 10:'#C084FC',20:'#B46DFA',30:'#A855F7',40:'#9333EA',50:'#892BDC',60:'#7E22CE',70:'#7522BB',80:'#6B21A8',90:'#581C87' }, - onion: { 10:'#9670F8',20:'#8662F4',30:'#7855F0',40:'#6947ED',50:'#5637E9',60:'#452CD7',70:'#3B25C8',80:'#331EBA',90:'#2C19AD' }, - water: { 10:'#6B85F9',20:'#5F78F7',30:'#5367F6',40:'#4657F3',50:'#353FF1',60:'#292BE9',70:'#2421E2',80:'#2119DC',90:'#1C11D5' }, - salt: { 0:'#FFFFFF',10:'#FAFAFA',20:'#F5F4F5',30:'#EEECEE',40:'#E6E4E7',50:'#DFDDDF',60:'#D8D4D8',70:'#CBC7CC',80:'#BDB6BE',90:'#ACA2AE' }, - pepper: { 10:'#52525B',20:'#494951',30:'#3F3F46',40:'#2A2A30',50:'#1F1F25',60:'#1B1B21',70:'#17171C',80:'#131318',90:'#0F0F12' }, + burger: { 10:'#E1CCBF',20:'#D1B7A6',30:'#BE9F8B',40:'#A6856F',50:'#916F58',60:'#7D5D48',70:'#6B4E3B',80:'#594130',90:'#473325' }, + blueCheese: { 10:'#B7F5FD',20:'#94E5F0',30:'#6CD1DF',40:'#3EBAC9',50:'#00A6B6',60:'#0092A1',70:'#00818E',80:'#00717D',90:'#00616B' }, + avocado: { 10:'#B7F7C7',20:'#96E8AC',30:'#70D68F',40:'#47BF72',50:'#19AB5A',60:'#00974C',70:'#008542',80:'#007539',90:'#0C6332' }, + lettuce: { 10:'#D5FEB5',20:'#BDF092',30:'#A2DF6C',40:'#88CB44',50:'#72B818',60:'#65A700',70:'#5B9701',80:'#548813',90:'#4C771E' }, + cheese: { 10:'#FFF8B6',20:'#F4E985',30:'#E6D858',40:'#D4C31B',50:'#C1B100',60:'#B1A300',70:'#A39500',80:'#968900',90:'#877C11' }, + bun: { 10:'#FFE1CC',20:'#FFC89E',30:'#FFA761',40:'#EA8B36',50:'#D67400',60:'#BC6500',70:'#A65800',80:'#924D00',90:'#7D4100' }, + ketchup: { 10:'#FEA196',20:'#F9857A',30:'#EF655B',40:'#DD423B',50:'#CA1C20',60:'#B20010',70:'#99000C',80:'#820008',90:'#6B0005' }, + bacon: { 10:'#FFB5CD',20:'#FF98BC',30:'#F976A8',40:'#E85692',50:'#D5397F',60:'#C0296F',70:'#AA2161',80:'#941F55',90:'#7C1D47' }, + cabbage: { 10:'#BC94F2',20:'#B17BF2',30:'#A35DED',40:'#913BE0',50:'#8112D2',60:'#6F00B8',70:'#5E009D',80:'#500086',90:'#40006D' }, + onion: { 10:'#A0ABF3',20:'#8B97F2',30:'#767FEB',40:'#6065DC',50:'#4E4FCD',60:'#413FB6',70:'#36329E',80:'#2C2986',90:'#221F6B' }, + water: { 10:'#92CAFF',20:'#6CB7FD',30:'#40A1F4',40:'#0087E0',50:'#0072BE',60:'#0061A2',70:'#00518A',80:'#004374',90:'#00355D' }, + salt: { 0:'#FFFFFF',10:'#F6F6FB',20:'#EEEEF3',30:'#E5E6EB',40:'#DCDCE1',50:'#D0D0D5',60:'#C3C3C9',70:'#B7B7BC',80:'#AAAAAF',90:'#9E9EA3' }, + pepper: { 10:'#62626B',20:'#56565E',30:'#494951',40:'#3C3C44',50:'#2E2E36',60:'#222229',70:'#19191F',80:'#131319',90:'#0E0E14' }, }; const FAMILIES = Object.keys(NEW); @@ -211,10 +211,12 @@ export const RawRamps: Story = {

      Raw color ramps — old (top) vs new (bottom)

      - Every family keeps its name and all nine shade levels. The brand (cabbage) now follows the - docs.daily.dev purple ramp (#892BDC); dark neutrals (pepper) are near-black and essentially - neutral (#0F0F12 → #17171C) for strong element contrast; light neutrals (salt) carry a faint - lavender tint. Social colors and opacity percentages are unchanged. + Every family keeps its name and all nine shade levels. Ramps are built in OKLCH for even + perceptual steps: lightness eases from a per-hue light end to a dark end, chroma peaks mid-ramp, + and out-of-gamut colors are chroma-fit. The brand (cabbage) is a saturated violet; dark neutrals + (pepper) are near-black with a whisper of violet chroma; light neutrals (salt) a faint lavender. + Status colors are each their own hue, kept distinguishable. Social colors and opacity percentages + are unchanged.

      {FAMILIES.map((fam) => (