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 <marcus.tillmanns@qt.io>
This commit is contained in:
Alessandro Portale
2024-11-18 15:51:29 +01:00
parent 8425d8a5c2
commit a61e732ba0
3 changed files with 193 additions and 68 deletions

View File

@@ -1,48 +1,50 @@
; Qt Creator Color Tokens - dark mode ; Qt Creator Color Tokens - dark mode
[General]
Includes=primitive-colors.inc
[Colors] [Colors]
Token_Basic_Black=ff181818 Token_Basic_Black=Primitive-Neutral-900
Token_Basic_White=ffFCFCFC Token_Basic_White=Primitive-Neutral-100
Token_Accent_Default=ff12A75D Token_Accent_Default=Primitive-Neon-600
Token_Accent_Muted=ff12834B Token_Accent_Muted=Primitive-Neon-700
Token_Accent_Subtle=ff14673E Token_Accent_Subtle=Primitive-Neon-800
Token_Background_Default=ff1f1f1f Token_Background_Default=Primitive-Neutral-850
Token_Background_Muted=ff262626 Token_Background_Muted=Primitive-Neutral-800
Token_Background_Subtle=ff2D2D2D Token_Background_Subtle=Primitive-Neutral-750
Token_Foreground_Default=ff4A4A4A Token_Foreground_Default=Primitive-Neutral-600
Token_Foreground_Muted=ff3F3F3F Token_Foreground_Muted=Primitive-Neutral-650
Token_Foreground_Subtle=ff353535 Token_Foreground_Subtle=Primitive-Neutral-700
Token_Text_Default=ffF2F2F2 Token_Text_Default=Primitive-Neutral-150
Token_Text_Muted=ffAEAEAE Token_Text_Muted=Primitive-Neutral-350
Token_Text_Subtle=ff595959 Token_Text_Subtle=Primitive-Neutral-550
Token_Text_Accent=ff1EC974 Token_Text_Accent=Primitive-Neon-500
Token_Stroke_Strong=ffE3E3E3 Token_Stroke_Strong=Primitive-Neutral-200
Token_Stroke_Muted=ff909090 Token_Stroke_Muted=Primitive-Neutral-450
Token_Stroke_Subtle=ff4A4A4A Token_Stroke_Subtle=Primitive-Neutral-650
Token_Notification_Alert_Default=ffEFAD4C Token_Notification_Alert_Default=Primitive-Yellow-400
Token_Notification_Alert_Muted=ffBC7A19 Token_Notification_Alert_Muted=Primitive-Yellow-600
Token_Notification_Alert_Subtle=ff31240F Token_Notification_Alert_Subtle=Primitive-Yellow-1000
Token_Notification_Neutral_Default=ff8671EC Token_Notification_Neutral_Default=Primitive-QAMidnight-300
Token_Notification_Neutral_Muted=ff361EAB Token_Notification_Neutral_Muted=Primitive-QAMidnight-600
Token_Notification_Neutral_Subtle=ff1E1450 Token_Notification_Neutral_Subtle=Primitive-QAMidnight-900
Token_Notification_Danger_Default=ffE34269 Token_Notification_Danger_Default=Primitive-Red-400
Token_Notification_Danger_Muted=ffB00F36 Token_Notification_Danger_Muted=Primitive-Red-600
Token_Notification_Danger_Subtle=ff33161C Token_Notification_Danger_Subtle=Primitive-Red-1000
Token_Notification_Success_Default=ff1EC974 Token_Notification_Success_Default=Primitive-Neon-500
Token_Notification_Success_Muted=ff12834B Token_Notification_Success_Muted=Primitive-Neon-700
Token_Notification_Success_Subtle=ff092C1B Token_Notification_Success_Subtle=Primitive-Neon-1000
Token_Gradient01_Start=ff00414A Token_Gradient01_Start=Primitive-Pine-700
Token_Gradient01_End=ff12A75D Token_Gradient01_End=Primitive-Neon-600
Token_Gradient02_Start=ff4A4A4A Token_Gradient02_Start=Primitive-Neutral-600
Token_Gradient02_End=ff909090 Token_Gradient02_End=Primitive-Neutral-450

View File

@@ -1,48 +1,50 @@
; Qt Creator Color Tokens - light mode ; Qt Creator Color Tokens - light mode
[General]
Includes=primitive-colors.inc
[Colors] [Colors]
Token_Basic_Black=ff181818 Token_Basic_Black=Primitive-Neutral-900
Token_Basic_White=ffFCFCFC Token_Basic_White=Primitive-Neutral-100
Token_Accent_Default=ff1EC974 Token_Accent_Default=Primitive-Neon-500
Token_Accent_Muted=ff12A75D Token_Accent_Muted=Primitive-Neon-600
Token_Accent_Subtle=ff12834B Token_Accent_Subtle=Primitive-Neon-700
Token_Background_Default=ffFCFCFC Token_Background_Default=Primitive-Neutral-100
Token_Background_Muted=ffF2F2F2 Token_Background_Muted=Primitive-Neutral-150
Token_Background_Subtle=ffE3E3E3 Token_Background_Subtle=Primitive-Neutral-200
Token_Foreground_Default=ffBEBEBE Token_Foreground_Default=Primitive-Neutral-300
Token_Foreground_Muted=ffCDCDCD Token_Foreground_Muted=Primitive-Neutral-250
Token_Foreground_Subtle=ffE3E3E3 Token_Foreground_Subtle=Primitive-Neutral-200
Token_Text_Default=ff2D2D2D Token_Text_Default=Primitive-Neutral-750
Token_Text_Muted=ff595959 Token_Text_Muted=Primitive-Neutral-550
Token_Text_Subtle=ffAEAEAE Token_Text_Subtle=Primitive-Neutral-350
Token_Text_Accent=ff12A75D Token_Text_Accent=Primitive-Neon-600
Token_Stroke_Strong=ff595959 Token_Stroke_Strong=Primitive-Neutral-550
Token_Stroke_Muted=ff909090 Token_Stroke_Muted=Primitive-Neutral-400
Token_Stroke_Subtle=ffCDCDCD Token_Stroke_Subtle=Primitive-Neutral-250
Token_Notification_Alert_Default=ffBC7A19 Token_Notification_Alert_Default=Primitive-Yellow-600
Token_Notification_Alert_Muted=ffEB991F Token_Notification_Alert_Muted=Primitive-Yellow-500
Token_Notification_Alert_Subtle=ffFFEBCD Token_Notification_Alert_Subtle=Primitive-Yellow-100
Token_Notification_Neutral_Default=ff27138B Token_Notification_Neutral_Default=Primitive-QAMidnight-700
Token_Notification_Neutral_Muted=ff361EAB Token_Notification_Neutral_Muted=Primitive-QAMidnight-600
Token_Notification_Neutral_Subtle=ffD9D2F9 Token_Notification_Neutral_Subtle=Primitive-QAMidnight-100
Token_Notification_Danger_Default=ffB00F36 Token_Notification_Danger_Default=Primitive-Red-600
Token_Notification_Danger_Muted=ffDC1343 Token_Notification_Danger_Muted=Primitive-Red-500
Token_Notification_Danger_Subtle=ffFACED9 Token_Notification_Danger_Subtle=Primitive-Red-100
Token_Notification_Success_Default=ff12834B Token_Notification_Success_Default=Primitive-Neon-700
Token_Notification_Success_Muted=ff12A75D Token_Notification_Success_Muted=Primitive-Neon-600
Token_Notification_Success_Subtle=ffDBFDEC Token_Notification_Success_Subtle=Primitive-Neon-100
Token_Gradient01_Start=ff1EC974 Token_Gradient01_Start=Primitive-Neon-500
Token_Gradient01_End=ff0099A1 Token_Gradient01_End=Primitive-Pine-600
Token_Gradient02_Start=ff9D9D9D Token_Gradient02_Start=Primitive-Neutral-400
Token_Gradient02_End=ff595959 Token_Gradient02_End=Primitive-Neutral-550

View File

@@ -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