Skip to content

Commit 419d0e4

Browse files
author
Fergus Bisset
committed
style: Override the Default NHS Focus styles with FDP Brand aligned alternatives
1 parent 9a7593c commit 419d0e4

File tree

15 files changed

+720
-428
lines changed

15 files changed

+720
-428
lines changed

‎dist/meta/components.json‎

Lines changed: 134 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"version": "0.0.44-alpha.9",
3-
"generatedAt": "2025-10-26T08:33:49.764Z",
2+
"version": "0.0.44-alpha.10",
3+
"generatedAt": "2025-10-26T08:36:33.598Z",
44
"count": 18,
55
"components": {
66
"Textarea": {
@@ -387,6 +387,45 @@
387387
],
388388
"source": "src/components/Panel/Panel.schema.ts"
389389
},
390+
"Label": {
391+
"name": "Label",
392+
"category": "form",
393+
"since": "0.1.1",
394+
"a11yNotes": [
395+
"Supports page heading mode by rendering an <h1> containing a nested <label> to retain association."
396+
],
397+
"props": [
398+
{
399+
"name": "htmlFor",
400+
"type": "string",
401+
"description": "ID of associated form control"
402+
},
403+
{
404+
"name": "className",
405+
"type": "string",
406+
"description": "Additional CSS classes"
407+
},
408+
{
409+
"name": "isPageHeading",
410+
"type": "boolean",
411+
"defaultValue": "false",
412+
"description": "Render as page heading (h1 wrapper)"
413+
},
414+
{
415+
"name": "size",
416+
"type": "'xl'|'l'|'m'|'s'",
417+
"defaultValue": "m",
418+
"description": "Size variant"
419+
},
420+
{
421+
"name": "children",
422+
"type": "ReactNode|string",
423+
"required": true,
424+
"description": "Label content"
425+
}
426+
],
427+
"source": "src/components/Label/Label.schema.ts"
428+
},
390429
"InsetText": {
391430
"name": "InsetText",
392431
"category": "content",
@@ -598,45 +637,6 @@
598637
],
599638
"source": "src/components/Heading/Heading.schema.ts"
600639
},
601-
"Label": {
602-
"name": "Label",
603-
"category": "form",
604-
"since": "0.1.1",
605-
"a11yNotes": [
606-
"Supports page heading mode by rendering an <h1> containing a nested <label> to retain association."
607-
],
608-
"props": [
609-
{
610-
"name": "htmlFor",
611-
"type": "string",
612-
"description": "ID of associated form control"
613-
},
614-
{
615-
"name": "className",
616-
"type": "string",
617-
"description": "Additional CSS classes"
618-
},
619-
{
620-
"name": "isPageHeading",
621-
"type": "boolean",
622-
"defaultValue": "false",
623-
"description": "Render as page heading (h1 wrapper)"
624-
},
625-
{
626-
"name": "size",
627-
"type": "'xl'|'l'|'m'|'s'",
628-
"defaultValue": "m",
629-
"description": "Size variant"
630-
},
631-
{
632-
"name": "children",
633-
"type": "ReactNode|string",
634-
"required": true,
635-
"description": "Label content"
636-
}
637-
],
638-
"source": "src/components/Label/Label.schema.ts"
639-
},
640640
"Hint": {
641641
"name": "Hint",
642642
"category": "typography",
@@ -697,6 +697,39 @@
697697
],
698698
"source": "src/components/Fieldset/Fieldset.schema.ts"
699699
},
700+
"ErrorMessage": {
701+
"name": "ErrorMessage",
702+
"category": "form",
703+
"since": "0.1.1",
704+
"a11yNotes": [
705+
"Includes visually hidden prefix text (default \"Error:\") to aid screen reader users."
706+
],
707+
"props": [
708+
{
709+
"name": "id",
710+
"type": "string",
711+
"description": "HTML id attribute"
712+
},
713+
{
714+
"name": "className",
715+
"type": "string",
716+
"description": "Additional CSS classes"
717+
},
718+
{
719+
"name": "visuallyHiddenText",
720+
"type": "string",
721+
"defaultValue": "Error:",
722+
"description": "Prefix announced to screen readers"
723+
},
724+
{
725+
"name": "children",
726+
"type": "ReactNode|string",
727+
"required": true,
728+
"description": "Error message content"
729+
}
730+
],
731+
"source": "src/components/ErrorMessage/ErrorMessage.schema.ts"
732+
},
700733
"ErrorSummary": {
701734
"name": "ErrorSummary",
702735
"category": "form",
@@ -746,39 +779,6 @@
746779
],
747780
"source": "src/components/ErrorSummary/ErrorSummary.schema.ts"
748781
},
749-
"ErrorMessage": {
750-
"name": "ErrorMessage",
751-
"category": "form",
752-
"since": "0.1.1",
753-
"a11yNotes": [
754-
"Includes visually hidden prefix text (default \"Error:\") to aid screen reader users."
755-
],
756-
"props": [
757-
{
758-
"name": "id",
759-
"type": "string",
760-
"description": "HTML id attribute"
761-
},
762-
{
763-
"name": "className",
764-
"type": "string",
765-
"description": "Additional CSS classes"
766-
},
767-
{
768-
"name": "visuallyHiddenText",
769-
"type": "string",
770-
"defaultValue": "Error:",
771-
"description": "Prefix announced to screen readers"
772-
},
773-
{
774-
"name": "children",
775-
"type": "ReactNode|string",
776-
"required": true,
777-
"description": "Error message content"
778-
}
779-
],
780-
"source": "src/components/ErrorMessage/ErrorMessage.schema.ts"
781-
},
782782
"Details": {
783783
"name": "Details",
784784
"category": "content",
@@ -960,6 +960,64 @@
960960
],
961961
"source": "src/components/CharacterCount/CharacterCount.schema.ts"
962962
},
963+
"Checkboxes": {
964+
"name": "Checkboxes",
965+
"props": [
966+
{
967+
"name": "items",
968+
"type": "CheckboxItem[]",
969+
"required": true,
970+
"description": "Array of checkbox items"
971+
},
972+
{
973+
"name": "name",
974+
"type": "string",
975+
"required": true,
976+
"description": "Shared name attribute"
977+
},
978+
{
979+
"name": "idPrefix",
980+
"type": "string",
981+
"description": "ID prefix for fieldset and inputs"
982+
},
983+
{
984+
"name": "legend",
985+
"type": "string",
986+
"description": "Legend text"
987+
},
988+
{
989+
"name": "isPageHeading",
990+
"type": "boolean",
991+
"description": "Legend rendered as page heading"
992+
},
993+
{
994+
"name": "legendSize",
995+
"type": "\"xl\"|\"l\"|\"m\"|\"s\"",
996+
"description": "Legend size"
997+
},
998+
{
999+
"name": "hint",
1000+
"type": "string",
1001+
"description": "Group hint text"
1002+
},
1003+
{
1004+
"name": "errorMessage",
1005+
"type": "string",
1006+
"description": "Group error message"
1007+
},
1008+
{
1009+
"name": "className",
1010+
"type": "string",
1011+
"description": "Extra wrapper classes"
1012+
},
1013+
{
1014+
"name": "small",
1015+
"type": "boolean",
1016+
"description": "Small variant"
1017+
}
1018+
],
1019+
"source": "src/components/Checkboxes/Checkboxes.schema.ts"
1020+
},
9631021
"Button": {
9641022
"name": "Button",
9651023
"category": "form",
@@ -1053,76 +1111,18 @@
10531111
}
10541112
],
10551113
"source": "src/components/Button/Button.schema.ts"
1056-
},
1057-
"Checkboxes": {
1058-
"name": "Checkboxes",
1059-
"props": [
1060-
{
1061-
"name": "items",
1062-
"type": "CheckboxItem[]",
1063-
"required": true,
1064-
"description": "Array of checkbox items"
1065-
},
1066-
{
1067-
"name": "name",
1068-
"type": "string",
1069-
"required": true,
1070-
"description": "Shared name attribute"
1071-
},
1072-
{
1073-
"name": "idPrefix",
1074-
"type": "string",
1075-
"description": "ID prefix for fieldset and inputs"
1076-
},
1077-
{
1078-
"name": "legend",
1079-
"type": "string",
1080-
"description": "Legend text"
1081-
},
1082-
{
1083-
"name": "isPageHeading",
1084-
"type": "boolean",
1085-
"description": "Legend rendered as page heading"
1086-
},
1087-
{
1088-
"name": "legendSize",
1089-
"type": "\"xl\"|\"l\"|\"m\"|\"s\"",
1090-
"description": "Legend size"
1091-
},
1092-
{
1093-
"name": "hint",
1094-
"type": "string",
1095-
"description": "Group hint text"
1096-
},
1097-
{
1098-
"name": "errorMessage",
1099-
"type": "string",
1100-
"description": "Group error message"
1101-
},
1102-
{
1103-
"name": "className",
1104-
"type": "string",
1105-
"description": "Extra wrapper classes"
1106-
},
1107-
{
1108-
"name": "small",
1109-
"type": "boolean",
1110-
"description": "Small variant"
1111-
}
1112-
],
1113-
"source": "src/components/Checkboxes/Checkboxes.schema.ts"
11141114
}
11151115
},
11161116
"categories": {
11171117
"form": [
11181118
"Textarea",
11191119
"Select",
11201120
"Radios",
1121-
"Input",
11221121
"Label",
1122+
"Input",
11231123
"Fieldset",
1124-
"ErrorSummary",
11251124
"ErrorMessage",
1125+
"ErrorSummary",
11261126
"DateInput",
11271127
"Button"
11281128
],

‎packages/nhs-fdp/dist/android/colors.xml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
<color name="brand_fdp_primary_green">#ff009639</color>
1515
<color name="brand_fdp_primary_dark_green">#ff63a691</color>
1616
<color name="brand_fdp_primary_purple">#ffd6cce3</color>
17+
<color name="brand_fdp_primary_dark_purple">#ffac98cb</color>
1718
<color name="brand_fdp_primary_white">#ffffffff</color>
1819
<color name="brand_fdp_grey_1">#ff425563</color>
1920
<color name="brand_fdp_grey_2">#ff768692</color>

‎packages/nhs-fdp/dist/css/tokens.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
--brand-fdp-primary-green: #009639; /** NHS Green */
3939
--brand-fdp-primary-dark-green: #63a691; /** NHS Dark Green */
4040
--brand-fdp-primary-purple: #d6cce3; /** NHS Purple (tint) */
41+
--brand-fdp-primary-dark-purple: #ac98cb; /** NHS Dark Purple */
4142
--brand-fdp-primary-white: #ffffff; /** NHS White */
4243
--brand-fdp-grey-1: #425563; /** NHS Dark Grey */
4344
--brand-fdp-grey-2: #768692; /** NHS Mid Grey */

‎packages/nhs-fdp/dist/ios-swift/StyleDictionary+Class.swift‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ public class StyleDictionaryClass {
4444
public static let brandFdpPrimaryBlue = UIColor(red: 0.000, green: 0.369, blue: 0.722, alpha: 1) /** NHS Blue */
4545
public static let brandFdpPrimaryDarkBlue = UIColor(red: 0.000, green: 0.188, blue: 0.529, alpha: 1) /** NHS FDP Dark Blue */
4646
public static let brandFdpPrimaryDarkGreen = UIColor(red: 0.388, green: 0.651, blue: 0.569, alpha: 1) /** NHS Dark Green */
47+
public static let brandFdpPrimaryDarkPurple = UIColor(red: 0.675, green: 0.596, blue: 0.796, alpha: 1) /** NHS Dark Purple */
4748
public static let brandFdpPrimaryGreen = UIColor(red: 0.000, green: 0.588, blue: 0.224, alpha: 1) /** NHS Green */
4849
public static let brandFdpPrimaryPurple = UIColor(red: 0.839, green: 0.800, blue: 0.890, alpha: 1) /** NHS Purple (tint) */
4950
public static let brandFdpPrimaryWhite = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) /** NHS White */

‎packages/nhs-fdp/dist/ios-swift/StyleDictionary+Enum.swift‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ public enum StyleDictionaryEnum {
4444
public static let brandFdpPrimaryBlue = UIColor(red: 0.000, green: 0.369, blue: 0.722, alpha: 1) /** NHS Blue */
4545
public static let brandFdpPrimaryDarkBlue = UIColor(red: 0.000, green: 0.188, blue: 0.529, alpha: 1) /** NHS FDP Dark Blue */
4646
public static let brandFdpPrimaryDarkGreen = UIColor(red: 0.388, green: 0.651, blue: 0.569, alpha: 1) /** NHS Dark Green */
47+
public static let brandFdpPrimaryDarkPurple = UIColor(red: 0.675, green: 0.596, blue: 0.796, alpha: 1) /** NHS Dark Purple */
4748
public static let brandFdpPrimaryGreen = UIColor(red: 0.000, green: 0.588, blue: 0.224, alpha: 1) /** NHS Green */
4849
public static let brandFdpPrimaryPurple = UIColor(red: 0.839, green: 0.800, blue: 0.890, alpha: 1) /** NHS Purple (tint) */
4950
public static let brandFdpPrimaryWhite = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) /** NHS White */

‎packages/nhs-fdp/dist/ios-swift/StyleDictionary+Struct.swift‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ internal struct StyleDictionaryStruct {
4444
internal static let brandFdpPrimaryBlue = UIColor(red: 0.000, green: 0.369, blue: 0.722, alpha: 1) /** NHS Blue */
4545
internal static let brandFdpPrimaryDarkBlue = UIColor(red: 0.000, green: 0.188, blue: 0.529, alpha: 1) /** NHS FDP Dark Blue */
4646
internal static let brandFdpPrimaryDarkGreen = UIColor(red: 0.388, green: 0.651, blue: 0.569, alpha: 1) /** NHS Dark Green */
47+
internal static let brandFdpPrimaryDarkPurple = UIColor(red: 0.675, green: 0.596, blue: 0.796, alpha: 1) /** NHS Dark Purple */
4748
internal static let brandFdpPrimaryGreen = UIColor(red: 0.000, green: 0.588, blue: 0.224, alpha: 1) /** NHS Green */
4849
internal static let brandFdpPrimaryPurple = UIColor(red: 0.839, green: 0.800, blue: 0.890, alpha: 1) /** NHS Purple (tint) */
4950
internal static let brandFdpPrimaryWhite = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) /** NHS White */

‎packages/nhs-fdp/dist/ios-swift/StyleDictionaryColor.swift‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ public enum StyleDictionaryColor {
2222
public static let brandFdpPrimaryBlue = UIColor(red: 0.000, green: 0.369, blue: 0.722, alpha: 1) /** NHS Blue */
2323
public static let brandFdpPrimaryDarkBlue = UIColor(red: 0.000, green: 0.188, blue: 0.529, alpha: 1) /** NHS FDP Dark Blue */
2424
public static let brandFdpPrimaryDarkGreen = UIColor(red: 0.388, green: 0.651, blue: 0.569, alpha: 1) /** NHS Dark Green */
25+
public static let brandFdpPrimaryDarkPurple = UIColor(red: 0.675, green: 0.596, blue: 0.796, alpha: 1) /** NHS Dark Purple */
2526
public static let brandFdpPrimaryGreen = UIColor(red: 0.000, green: 0.588, blue: 0.224, alpha: 1) /** NHS Green */
2627
public static let brandFdpPrimaryPurple = UIColor(red: 0.839, green: 0.800, blue: 0.890, alpha: 1) /** NHS Purple (tint) */
2728
public static let brandFdpPrimaryWhite = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) /** NHS White */

‎packages/nhs-fdp/dist/js/tokens.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export const BrandFdpPrimaryBlue = "#005eb8"; // NHS Blue
4141
export const BrandFdpPrimaryGreen = "#009639"; // NHS Green
4242
export const BrandFdpPrimaryDarkGreen = "#63a691"; // NHS Dark Green
4343
export const BrandFdpPrimaryPurple = "#d6cce3"; // NHS Purple (tint)
44+
export const BrandFdpPrimaryDarkPurple = "#ac98cb"; // NHS Dark Purple
4445
export const BrandFdpPrimaryWhite = "#ffffff"; // NHS White
4546
export const BrandFdpGrey1 = "#425563"; // NHS Dark Grey
4647
export const BrandFdpGrey2 = "#768692"; // NHS Mid Grey

‎packages/nhs-fdp/dist/js/tokens.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@
6161
"green": "#009639",
6262
"dark-green": "#63a691",
6363
"purple": "#d6cce3",
64+
"dark-purple": "#ac98cb",
6465
"white": "#ffffff"
6566
},
6667
"grey": {

‎packages/nhs-fdp/dist/scss/_colors.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ $nhs-fdp-brand-fdp-primary-blue: #005eb8;
1212
$nhs-fdp-brand-fdp-primary-green: #009639;
1313
$nhs-fdp-brand-fdp-primary-dark-green: #63a691;
1414
$nhs-fdp-brand-fdp-primary-purple: #d6cce3;
15+
$nhs-fdp-brand-fdp-primary-dark-purple: #ac98cb;
1516
$nhs-fdp-brand-fdp-primary-white: #ffffff;
1617
$nhs-fdp-brand-fdp-grey-1: #425563;
1718
$nhs-fdp-brand-fdp-grey-2: #768692;

0 commit comments

Comments
 (0)