[L] Update Bootstrap Library to use Tokens

[Dianadec]

Description:

The tokens have recently been completed and we now need to update the bootstrap library.

https://github.com/digitalspace/bcparks-bootstrap-theme

Acceptance Criteria:

• [ ] Bootstrap variables match the token glossary
• [ ] Font sizes and weights match token glossary
• [ ] Library uses standard bootstrap spacing
• [ ] Admin specific components and overrides match what is in the Admin Library Figma

Development Checklist:

• [ ] variables.scss is updated with token colour codes
• [ ] overrides.scss, fonts.scss, and additional.scss are reviewed to ensure they match the figma and token glossary guidelines

Dependencies

• Blocked by #314 , #375
• Blocking #469 , #335, #355

Relevant documentation as reference

Tokens overview Token glossary

Definition of Ready

• [ ] Acceptance criteria are included
• [ ] Wireframes are included (if applicable)
• [ ] Design / Solution is accepted by Product Owner (if applicable)
• [ ] Dependencies are identified (technical, business, regulatory/policy)
• [ ] Story has been estimated (under 13 pts)

Definition of Done

• In progress:
  • [ ] Acceptance criteria are tested (Functionality meets the acceptance criteria defined in the ticket)
  • [ ] UI meets accessibility requirements
  • [ ] Unit tests are written
  • [ ] Work is traceable in GitHub
  • [ ] PR linked to ticket number
  • [ ] If needed/required - Dev adds flag/label to highlight any migration steps necessary prior to PROD deployment
• Code review:
  • [ ] Code is peer reviewed and has passed CI/CD tests
• QA:
  • [ ] Acceptance criteria are tested (Functionality meets the acceptance criteria defined in the ticket)
  • [ ] Code is potentially shippable to the production environment
  • [ ] Functional features have been tested and passed by QA
  • [ ] UI components tested by designer
  • [ ] Code is deployed to PROD when moved to 'done' column (unless requested otherwise by PO)
• PO Review:
  • [ ] Acceptance criteria are tested (Functionality meets the acceptance criteria defined in the ticket)
  • [ ] Reviewed and approved by Product Owner

Notes:

[manuji]

Tested on TEST: Passed

• From a QA perspective no issues were found after this update on the UI.
• I noticed some discrepancies compared to the design token glossary such as DR H1 tags uses a different fornt size than what is given on the glossary.
• I highly recommend getting this ticket a pass from the Design expertise to confirm everything is as per the Design token glossary.

[manuji]

I will grab this back to report UI issues on DUP.

[manuji]

Tested o TEST DUP-Public: Pending

Given below are the UI issues I have noticed after updating with the new Bootstrap tokens.

1. The font and components on "Booking time" section looks smaller when compared to the rest of the content.

2. The font sie of the labels on visitor information form is small when compared to the rest of the content when set to 0.75rem

@meyerdarcie , @meredithom

[meredithom]

DUP Admin changes:

• Breadcrumb colour doesn't cover entire breadcrumb area.
• Cards not centered on home page
• Metrics page: too small of font for the date filters, should match other button
• FAQ page: title too small, remove bg colour

DR and A&R changes have been added to their tickets: #335 and #469

[Dianadec]

Notes: will push this to PROD but will revisit token library about font sizes

[manuji]

@meredithom This is deployed to TEST and ready to review.