From a61e732ba0ee91f061e3272964d2eb0a1d3f2d33 Mon Sep 17 00:00:00 2001 From: Alessandro Portale Date: Mon, 18 Nov 2024 15:51:29 +0100 Subject: [PATCH] Themes: Introduce primitive color palette In the Figma-based design system, the "2024" light and dark theme color tokens reference colors from a primitives layer. Qt Creator was so far missing this indirection. This change adds the primitive layer as .ini file and replaces the #rgb values in the themes with references to the new layer. Fixes: DSGNSYSTM-9 Change-Id: I9ef358dee1f2e4c0e54f9f3ad97c6f3ae4618475 Reviewed-by: Marcus Tillmanns --- share/qtcreator/themes/dark.figmatokens | 70 +++++------ share/qtcreator/themes/light.figmatokens | 70 +++++------ share/qtcreator/themes/primitive-colors.inc | 121 ++++++++++++++++++++ 3 files changed, 193 insertions(+), 68 deletions(-) create mode 100644 share/qtcreator/themes/primitive-colors.inc diff --git a/share/qtcreator/themes/dark.figmatokens b/share/qtcreator/themes/dark.figmatokens index 0c63a7755dd..f9deb3e3757 100644 --- a/share/qtcreator/themes/dark.figmatokens +++ b/share/qtcreator/themes/dark.figmatokens @@ -1,48 +1,50 @@ ; Qt Creator Color Tokens - dark mode +[General] +Includes=primitive-colors.inc [Colors] -Token_Basic_Black=ff181818 -Token_Basic_White=ffFCFCFC +Token_Basic_Black=Primitive-Neutral-900 +Token_Basic_White=Primitive-Neutral-100 -Token_Accent_Default=ff12A75D -Token_Accent_Muted=ff12834B -Token_Accent_Subtle=ff14673E +Token_Accent_Default=Primitive-Neon-600 +Token_Accent_Muted=Primitive-Neon-700 +Token_Accent_Subtle=Primitive-Neon-800 -Token_Background_Default=ff1f1f1f -Token_Background_Muted=ff262626 -Token_Background_Subtle=ff2D2D2D +Token_Background_Default=Primitive-Neutral-850 +Token_Background_Muted=Primitive-Neutral-800 +Token_Background_Subtle=Primitive-Neutral-750 -Token_Foreground_Default=ff4A4A4A -Token_Foreground_Muted=ff3F3F3F -Token_Foreground_Subtle=ff353535 +Token_Foreground_Default=Primitive-Neutral-600 +Token_Foreground_Muted=Primitive-Neutral-650 +Token_Foreground_Subtle=Primitive-Neutral-700 -Token_Text_Default=ffF2F2F2 -Token_Text_Muted=ffAEAEAE -Token_Text_Subtle=ff595959 -Token_Text_Accent=ff1EC974 +Token_Text_Default=Primitive-Neutral-150 +Token_Text_Muted=Primitive-Neutral-350 +Token_Text_Subtle=Primitive-Neutral-550 +Token_Text_Accent=Primitive-Neon-500 -Token_Stroke_Strong=ffE3E3E3 -Token_Stroke_Muted=ff909090 -Token_Stroke_Subtle=ff4A4A4A +Token_Stroke_Strong=Primitive-Neutral-200 +Token_Stroke_Muted=Primitive-Neutral-450 +Token_Stroke_Subtle=Primitive-Neutral-650 -Token_Notification_Alert_Default=ffEFAD4C -Token_Notification_Alert_Muted=ffBC7A19 -Token_Notification_Alert_Subtle=ff31240F +Token_Notification_Alert_Default=Primitive-Yellow-400 +Token_Notification_Alert_Muted=Primitive-Yellow-600 +Token_Notification_Alert_Subtle=Primitive-Yellow-1000 -Token_Notification_Neutral_Default=ff8671EC -Token_Notification_Neutral_Muted=ff361EAB -Token_Notification_Neutral_Subtle=ff1E1450 +Token_Notification_Neutral_Default=Primitive-QAMidnight-300 +Token_Notification_Neutral_Muted=Primitive-QAMidnight-600 +Token_Notification_Neutral_Subtle=Primitive-QAMidnight-900 -Token_Notification_Danger_Default=ffE34269 -Token_Notification_Danger_Muted=ffB00F36 -Token_Notification_Danger_Subtle=ff33161C +Token_Notification_Danger_Default=Primitive-Red-400 +Token_Notification_Danger_Muted=Primitive-Red-600 +Token_Notification_Danger_Subtle=Primitive-Red-1000 -Token_Notification_Success_Default=ff1EC974 -Token_Notification_Success_Muted=ff12834B -Token_Notification_Success_Subtle=ff092C1B +Token_Notification_Success_Default=Primitive-Neon-500 +Token_Notification_Success_Muted=Primitive-Neon-700 +Token_Notification_Success_Subtle=Primitive-Neon-1000 -Token_Gradient01_Start=ff00414A -Token_Gradient01_End=ff12A75D -Token_Gradient02_Start=ff4A4A4A -Token_Gradient02_End=ff909090 +Token_Gradient01_Start=Primitive-Pine-700 +Token_Gradient01_End=Primitive-Neon-600 +Token_Gradient02_Start=Primitive-Neutral-600 +Token_Gradient02_End=Primitive-Neutral-450 diff --git a/share/qtcreator/themes/light.figmatokens b/share/qtcreator/themes/light.figmatokens index c156f14bb1f..657da85ce32 100644 --- a/share/qtcreator/themes/light.figmatokens +++ b/share/qtcreator/themes/light.figmatokens @@ -1,48 +1,50 @@ ; Qt Creator Color Tokens - light mode +[General] +Includes=primitive-colors.inc [Colors] -Token_Basic_Black=ff181818 -Token_Basic_White=ffFCFCFC +Token_Basic_Black=Primitive-Neutral-900 +Token_Basic_White=Primitive-Neutral-100 -Token_Accent_Default=ff1EC974 -Token_Accent_Muted=ff12A75D -Token_Accent_Subtle=ff12834B +Token_Accent_Default=Primitive-Neon-500 +Token_Accent_Muted=Primitive-Neon-600 +Token_Accent_Subtle=Primitive-Neon-700 -Token_Background_Default=ffFCFCFC -Token_Background_Muted=ffF2F2F2 -Token_Background_Subtle=ffE3E3E3 +Token_Background_Default=Primitive-Neutral-100 +Token_Background_Muted=Primitive-Neutral-150 +Token_Background_Subtle=Primitive-Neutral-200 -Token_Foreground_Default=ffBEBEBE -Token_Foreground_Muted=ffCDCDCD -Token_Foreground_Subtle=ffE3E3E3 +Token_Foreground_Default=Primitive-Neutral-300 +Token_Foreground_Muted=Primitive-Neutral-250 +Token_Foreground_Subtle=Primitive-Neutral-200 -Token_Text_Default=ff2D2D2D -Token_Text_Muted=ff595959 -Token_Text_Subtle=ffAEAEAE -Token_Text_Accent=ff12A75D +Token_Text_Default=Primitive-Neutral-750 +Token_Text_Muted=Primitive-Neutral-550 +Token_Text_Subtle=Primitive-Neutral-350 +Token_Text_Accent=Primitive-Neon-600 -Token_Stroke_Strong=ff595959 -Token_Stroke_Muted=ff909090 -Token_Stroke_Subtle=ffCDCDCD +Token_Stroke_Strong=Primitive-Neutral-550 +Token_Stroke_Muted=Primitive-Neutral-400 +Token_Stroke_Subtle=Primitive-Neutral-250 -Token_Notification_Alert_Default=ffBC7A19 -Token_Notification_Alert_Muted=ffEB991F -Token_Notification_Alert_Subtle=ffFFEBCD +Token_Notification_Alert_Default=Primitive-Yellow-600 +Token_Notification_Alert_Muted=Primitive-Yellow-500 +Token_Notification_Alert_Subtle=Primitive-Yellow-100 -Token_Notification_Neutral_Default=ff27138B -Token_Notification_Neutral_Muted=ff361EAB -Token_Notification_Neutral_Subtle=ffD9D2F9 +Token_Notification_Neutral_Default=Primitive-QAMidnight-700 +Token_Notification_Neutral_Muted=Primitive-QAMidnight-600 +Token_Notification_Neutral_Subtle=Primitive-QAMidnight-100 -Token_Notification_Danger_Default=ffB00F36 -Token_Notification_Danger_Muted=ffDC1343 -Token_Notification_Danger_Subtle=ffFACED9 +Token_Notification_Danger_Default=Primitive-Red-600 +Token_Notification_Danger_Muted=Primitive-Red-500 +Token_Notification_Danger_Subtle=Primitive-Red-100 -Token_Notification_Success_Default=ff12834B -Token_Notification_Success_Muted=ff12A75D -Token_Notification_Success_Subtle=ffDBFDEC +Token_Notification_Success_Default=Primitive-Neon-700 +Token_Notification_Success_Muted=Primitive-Neon-600 +Token_Notification_Success_Subtle=Primitive-Neon-100 -Token_Gradient01_Start=ff1EC974 -Token_Gradient01_End=ff0099A1 -Token_Gradient02_Start=ff9D9D9D -Token_Gradient02_End=ff595959 +Token_Gradient01_Start=Primitive-Neon-500 +Token_Gradient01_End=Primitive-Pine-600 +Token_Gradient02_Start=Primitive-Neutral-400 +Token_Gradient02_End=Primitive-Neutral-550 diff --git a/share/qtcreator/themes/primitive-colors.inc b/share/qtcreator/themes/primitive-colors.inc new file mode 100644 index 00000000000..eaf28a82bb2 --- /dev/null +++ b/share/qtcreator/themes/primitive-colors.inc @@ -0,0 +1,121 @@ +[Colors] + +Primitive-Neutral-000=ffffffff +Primitive-Neutral-100=fffcfcfc +Primitive-Neutral-150=fff2f2f2 +Primitive-Neutral-200=ffe3e3e3 +Primitive-Neutral-250=ffcdcdcd +Primitive-Neutral-300=ffbebebe +Primitive-Neutral-350=ffaeaeae +Primitive-Neutral-400=ff9d9d9d +Primitive-Neutral-450=ff909090 +Primitive-Neutral-500=ff737373 +Primitive-Neutral-550=ff595959 +Primitive-Neutral-600=ff4a4a4a +Primitive-Neutral-650=ff3f3f3f +Primitive-Neutral-700=ff353535 +Primitive-Neutral-750=ff2d2d2d +Primitive-Neutral-800=ff262626 +Primitive-Neutral-850=ff1f1f1f +Primitive-Neutral-900=ff181818 +Primitive-Neutral-950=ff121212 +Primitive-Neutral-1000=ff000000 + +Primitive-Neon-100=ffdffced +Primitive-Neon-200=ffc2f8da +Primitive-Neon-300=ff96f0bc +Primitive-Neon-400=ff5cdc8a +Primitive-Neon-500=ff4fc779 +Primitive-Neon-600=ff3fa561 +Primitive-Neon-700=ff32824e +Primitive-Neon-800=ff296640 +Primitive-Neon-900=ff194229 +Primitive-Neon-1000=ff102c1c + +Primitive-Pine-100=ffe3f4fc +Primitive-Pine-200=ffc2eafa +Primitive-Pine-300=ff8fdcf7 +Primitive-Pine-400=ff5cc9f1 +Primitive-Pine-500=ff44b4e1 +Primitive-Pine-600=ff3492c0 +Primitive-Pine-700=ff297595 +Primitive-Pine-800=ff236176 +Primitive-Pine-900=ff1e4e5e +Primitive-Pine-1000=ff124149 + +Primitive-Lemon-100=fff4f6ca +Primitive-Lemon-200=ffeef1a0 +Primitive-Lemon-300=ffebf074 +Primitive-Lemon-400=ffe3ec4e +Primitive-Lemon-500=ffdde83b +Primitive-Lemon-600=ffd0da37 +Primitive-Lemon-700=ffb5be2f +Primitive-Lemon-800=ff9aa327 +Primitive-Lemon-900=ff848b1f +Primitive-Lemon-1000=ff6f7419 + +Primitive-Moss-100=ffeaecdb +Primitive-Moss-200=ffd7ddba +Primitive-Moss-300=ffbcc792 +Primitive-Moss-400=ffa2af6f +Primitive-Moss-500=ff859452 +Primitive-Moss-600=ff67753f +Primitive-Moss-700=ff515b32 +Primitive-Moss-800=ff41492c +Primitive-Moss-900=ff383e28 +Primitive-Moss-1000=ff1d2014 + +Primitive-DS-100=ffbee8f6 +Primitive-DS-200=ffaae0f2 +Primitive-DS-300=ff81d2ed +Primitive-DS-400=ff5ec2e6 +Primitive-DS-500=ff44b4e1 +Primitive-DS-600=ff368fb4 +Primitive-DS-700=ff276c87 +Primitive-DS-800=ff19485a +Primitive-DS-900=ff123543 +Primitive-DS-1000=ff0a242d + +Primitive-QAViolet-100=ffefe9fe +Primitive-QAViolet-200=ffe2d6fd +Primitive-QAViolet-300=ffcab3fc +Primitive-QAViolet-400=ffad88fa +Primitive-QAViolet-500=ff8f5ff4 +Primitive-QAViolet-600=ff7843e7 +Primitive-QAViolet-700=ff6434cb +Primitive-QAViolet-800=ff562da6 +Primitive-QAViolet-900=ff482585 +Primitive-QAViolet-1000=ff2d1262 + +Primitive-QAMidnight-100=ffd8d3f7 +Primitive-QAMidnight-200=ffb6aef1 +Primitive-QAMidnight-300=ff8478e7 +Primitive-QAMidnight-400=ff6357cf +Primitive-QAMidnight-500=ff443aac +Primitive-QAMidnight-600=ff352ca7 +Primitive-QAMidnight-700=ff262088 +Primitive-QAMidnight-800=ff231d6d +Primitive-QAMidnight-900=ff1d184e +Primitive-QAMidnight-1000=ff181439 + +Primitive-Yellow-100=fffdeacf +Primitive-Yellow-200=fff3d5a9 +Primitive-Yellow-300=ffeec080 +Primitive-Yellow-400=ffe8ab58 +Primitive-Yellow-500=ffe39736 +Primitive-Yellow-600=ffb6792a +Primitive-Yellow-700=ff885b1f +Primitive-Yellow-800=ff5b3c14 +Primitive-Yellow-900=ff3d2c14 +Primitive-Yellow-1000=ff302411 + +Primitive-Red-100=fff5cfd9 +Primitive-Red-200=ffe9a5b7 +Primitive-Red-300=ffe0738f +Primitive-Red-400=ffd8456a +Primitive-Red-500=ffd01a46 +Primitive-Red-600=ffa71439 +Primitive-Red-700=ff7d0f2a +Primitive-Red-800=ff511121 +Primitive-Red-900=ff3e1821 +Primitive-Red-1000=ff31161c