Skip to content

HMA-12503 addition of dark mode colours semantic tokens #241

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Harry-Accent wants to merge 3 commits into
base: feature/dark-mode
Choose a base branch
from
Open

HMA-12503 addition of dark mode colours semantic tokens #241

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3f3d03c
HMA-12503 adding new dark mode colours to color.kt file , and
Harry-Accent Sep 10, 2026
e5e2707
HMA-12503 added new colours to the xml and colors.kt file
Harry-Accent Sep 11, 2026
2aae6b7
HMA-12503 added new SemanticColors file with the semantic tokens set …
Harry-Accent Sep 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 34 additions & 10 deletions components-compose/src/main/java/uk/gov/hmrc/components/compose/ui/theme/Color.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,12 @@ import androidx.compose.ui.graphics.Color

// Light theme colors
val HmrcBlack = Color(0xFF0B0C0C)
val HmrcWhite = Color(0xFFFFFFFF)
val HmrcWhiteBackground = Color(0xFFFFFFFF)
val HmrcGreen1 = Color(0xFF00703C)
val HmrcGreen2 = Color(0xFF85994B)
val HmrcBlue = Color(0xFF1D70B8)
val HmrcTeal = Color(0xFF28A197)
val HmrcRed = Color(0xFFD4351C)
//
val HmrcGrey1 = Color(0xFF505A5F)
val HmrcGrey2 = Color(0xFFB1B4B6)
val HmrcGrey3 = Color(0xFFF3F2F1)
val HmrcPink = Color(0xFFCA2B75)
val HmrcYellow = Color(0xFFFFBF47)
val HmrcAlwaysBlack = Color(0xFF0B0C0C)
Expand All @@ -37,14 +33,42 @@ val HmrcTransparent = Color.Transparent

// Dark theme colors
val HmrcBlackDark = Color(0xFFFFFFFF)
val HmrcWhiteDark = Color(0xFF0B0C0C)
val HmrcWhiteBackgroundDark = Color(0xFF262626)
val HmrcGreen1Dark = Color(0xFF69B134)
val HmrcGreen2Dark = Color(0xFF28A197)
val HmrcBlueDark = Color(0xFF5BC0C6)
val HmrcRedDark = Color(0xFFEB66CA)
val HmrcGrey1Dark = Color(0xFFB1B4B6)
val HmrcGrey2Dark = Color(0xFF6F777B)
val HmrcGrey3Dark = Color(0xFF0B0C0C)
val HmrcPinkDark = Color(0xFFBB94FF)
val HmrcYellowDark = Color(0xFFFEFF4F)

// light mode colours that pair with the changing dark mode colors
val HmrcWhite = Color(0xFFFFFFFF)
val HmrcWhiteBackground = Color(0xFFFFFFFF)
val HmrcBlue = Color(0xFF1D70B8)
val HmrcGreen1 = Color(0xFF00703C)
val HmrcGrey3 = Color(0xFFF3F2F1)

// old dark mode colors (to be removed once all changes are made)
val HmrcWhiteDark = Color(0xFF0B0C0C)
val HmrcWhiteBackgroundDark = Color(0xFF262626)
val HmrcBlueDark = Color(0xFF5BC0C6)
val HmrcGreen1Dark = Color(0xFF69B134)
val HmrcGrey3Dark = Color(0xFF0B0C0C)

// new light mode colors (name changes)

val HmrcPrimaryGrey = Color(0xFF282D30)
val HmrcDarkGrey = Color(0xFF505A5F)
val HmrcMidGrey = Color(0xFFB1B4B6)
val HmrcLightGrey = Color(0xFFF3F2F1)
val HmrcPrimaryTeal = Color(0xFF5BC0C6)
val HmrcPrimaryYellow = Color(0xFFFFDD00)
val HmrcPrimaryLightBlue = Color(0xFFD7E4F2)

// new dark mode colors
val HmrcPrimaryGreen = Color(0xFF188659)
val HmrcPrimaryRed = Color(0xFFF26954)
val HmrcDarkNavy = Color(0xFF0D1C29)
val HmrcDarkNavy2 = Color(0xFF061625)
val HmrcDarkNavy3 = Color(0xFF092537)
val HmrcNavy = Color(0xFF0A2740)
// mid-navy still to be added to excel spreadsheet
54 changes: 49 additions & 5 deletions components/src/main/res/values-night/colors.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,19 +18,63 @@

<!-- Color palette -->
<color name="hmrc_black">#FFFFFFFF</color>
<color name="hmrc_white">#FF0B0C0C</color>
<color name="hmrc_white_background">#FF262626</color>
<color name="hmrc_green_1">#FF69B134</color>
<color name="hmrc_green_2">#FF28A197</color>
<color name="hmrc_blue">#FF5BC0C6</color>
<color name="hmrc_red">#FFEB66CA</color>
<color name="hmrc_grey_1">#FFB1B4B6</color>
<color name="hmrc_grey_2">#FF6F777B</color>
<color name="hmrc_grey_3">#FF0B0C0C</color>
<color name="hmrc_yellow">#FFFEFF4F</color>
<color name="hmrc_pink">#FFBB94FF</color>
<color name="hmrc_donut_chart_color_1">@color/hmrc_always_white</color>
<color name="hmrc_donut_chart_color_2">@color/hmrc_teal</color>
<color name="hmrc_donut_chart_color_3">@color/hmrc_teal</color>

<!-- old dark mode colors to be removed once all work is completed-->
<color name="hmrc_white">#FF0B0C0C</color>
<color name="hmrc_white_background">#FF262626</color>
<color name="hmrc_blue">#FF5BC0C6</color>
<color name="hmrc_green_1">#FF69B134</color>
<color name="hmrc_grey_3">#FF0B0C0C</color>

<!-- new dark mode colors-->
<color name="hmrc_primary_green">#FF188659</color>
<color name="hmrc_primary_red">#FFF26954</color>
<color name="hmrc_dark_navy">#FF0D1C29</color>
<color name="hmrc_dark_navy_2">#FF061625</color>
<color name="hmrc_dark_navy_3">#FF092537</color>
<color name="hmrc_navy">#FF0A2740</color>
<!--mid-navy still to be added to excel spreadsheet-->


<!-- light mode semantic token colors for xml-->
<!-- text-->
<color name="hmrc_text">@color/hmrc_white</color>

<!-- background-->
<color name="hmrc_interface">@color/hmrc_dark_navy_2</color>

<!-- cards-->
<color name="hmrc_card_background">@color/hmrc_dark_navy_3</color>
<color name="hmrc_card_title">@color/hmrc_white</color>
<color name="hmrc_card_text_color">@color/hmrc_white</color>

<!-- header-->
<color name="hmrc_header_background">@color/hmrc_navy</color>

<!-- onboarding-->
<color name="hmrc_onboarding_background">@color/hmrc_dark_navy_2</color>
<color name="hmrc_onboarding_pager_view">@color/hmrc_dark_navy_3</color>

<!-- buttons-->
<color name="hmrc_primary_button_color">@color/hmrc_primary_green</color>
<color name="hmrc_primary_button_text_color">@color/hmrc_white</color>
<color name="hmrc_secondary_button_color">@color/hmrc_transparent</color>
<color name="hmrc_secondary_button_text_color">@color/hmrc_white</color>

<!-- NavBar-->
<color name="hmrc_nav_bar_background">@color/hmrc_dark_navy_3</color>

<!-- confirmation-->
<color name="hmrc_confirmation_background">@color/hmrc_primary_green</color>


</resources>
68 changes: 62 additions & 6 deletions components/src/main/res/values/colors.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,18 +19,12 @@
<!-- Color palette -->
<color name="hmrc_always_black">#000</color>
<color name="hmrc_always_white">#fff</color>

<color name="hmrc_black">#FF0B0C0C</color>
<color name="hmrc_white">#FFFFFFFF</color>
<color name="hmrc_white_background">#FFFFFFFF</color>
<color name="hmrc_green_1">#FF00703C</color>
<color name="hmrc_green_2">#FF85994B</color>
<color name="hmrc_blue">#FF1D70B8</color>
<color name="hmrc_teal">#FF28A197</color>
<color name="hmrc_red">#FFD4351C</color>
<color name="hmrc_grey_1">#FF505A5F</color>
<color name="hmrc_grey_2">#FFB1B4B6</color>
<color name="hmrc_grey_3">#FFF3F2F1</color>
<color name="hmrc_pink">#FFCA2B75</color>
<color name="hmrc_yellow">#FFFFBF47</color>

Expand All @@ -52,4 +46,66 @@
<color name="hmrc_donut_chart_color_2">#003078</color>
<color name="hmrc_donut_chart_color_3">#003078</color>

<!-- light mode colours that pair with the changing dark mode colors -->
<color name="hmrc_white">#FFFFFFFF</color>
<color name="hmrc_white_background">#FFFFFFFF</color>
<color name="hmrc_blue">#FF1D70B8</color>
<color name="hmrc_green_1">#FF00703C</color>
<color name="hmrc_grey_3">#FFF3F2F1</color>

<!-- new light mode colors (name changes) -->
<color name="hmrc_primary_grey">#FF282D30</color>
<color name="hmrc_dark_grey">#FF505A5F</color>
<color name="hmrc_mid_grey">#FFB1B4B6</color>
<color name="hmrc_light_grey">#FFF3F2F1</color>
<color name="hmrc_primary_teal">#FF5BC0C6</color>
<color name="hmrc_primary_yellow">#FFFFDD00</color>
<color name="hmrc_primary_light_blue">#FFD7E4F2</color>
<!-- Fully transparent -->
<color name="hmrc_transparent">#00000000</color>

<!-- new dark mode colors-->
<color name="hmrc_primary_green">#FF188659</color>
<color name="hmrc_primary_red">#FFF26954</color>
<color name="hmrc_dark_navy">#FF0D1C29</color>
<color name="hmrc_dark_navy_2">#FF061625</color>
<color name="hmrc_dark_navy_3">#FF092537</color>
<color name="hmrc_navy">#FF0A2740</color>


<!-- light mode semantic token colors for xml-->
<!-- text-->
<color name="hmrc_text">@color/hmrc_black</color>

<!-- background-->
<color name="hmrc_interface">@color/hmrc_light_grey</color>

<!-- cards-->
<color name="hmrc_card_background">@color/hmrc_white</color>
<color name="hmrc_card_title">@color/hmrc_blue</color>
<color name="hmrc_card_text_color">@color/hmrc_black</color>

<!-- header-->
<color name="hmrc_header_background">@color/hmrc_blue</color>

<!-- onboarding-->
<color name="hmrc_onboarding_background">@color/hmrc_grey_3</color>
<color name="hmrc_onboarding_pager_view">@color/hmrc_white</color>

<!-- buttons-->
<color name="hmrc_primary_button_color">@color/hmrc_green_1</color>
<color name="hmrc_primary_button_text_color">@color/hmrc_white</color>
<color name="hmrc_secondary_button_color">@color/hmrc_transparent</color>
<color name="hmrc_secondary_button_text_color">@color/hmrc_white</color>

<!-- NavBar-->
<color name="hmrc_nav_bar_background">@color/hmrc_white</color>

<!-- confirmation-->
<color name="hmrc_confirmation_background">@color/hmrc_green_1</color>





</resources>