Style Updates Checklist

[MCatherine1994]

✅ Carbon Component Style Updates Checklist

We either need to keep all the rounded corners or get rid of them all - Marina

Topics that need discussion on July 23rd, 2025:

Conclusion: we will no make any change for the following items.

• Warning icon has a border 🔗 FDS Figma Text 🔗 FDS Figma Password
  Note: Voted within the design sub-group meeting on July 23rd, 2025:
  - Keep with the Carbon default: 5 votes
  - Nice to have but not urgent to implement: 1 vote
  - Need it now: 0 vote
  - Jack's note: The latest Carbon default will include a border for the warning icon. It will be sufficient to follow this new Carbon default.

• Containers with rounded corners

  • ??? Rounded corners on containers visually affect all components with rounded corners (are these custom-built?) 🔗 FDS sample - Client 4
  • Should we apply rounded corners to all components, or only round the top corners of input fields (Text Input & Password Input, Number Input, Text Area, Select, Date Picker, Search)?
    Note: Voted within the design sub-group meeting on July 23rd, 2025:
    - Keep with the Carbon default (straight corners for all): 0 vote
    - Keep with what we implemented (only round top corners): 5 votes
    - Round all corners: 1 vote

• Border radius for open panels. Dropdown, select, date picker, time picker, overflow menu. Round corner vs straight corner
  Note: Voted within the design sub-group meeting on July 23rd, 2025:
  - Keep with the Carbon default (straight corners for all): 4 votes
  - Round only bottom corners: 1 vote
  - Round all corners: 0 vote

Topics that need discussion:

• Moving forward, do we want to keep with Carbon default, and just apply necessary changes?
  • Decide what are necessary changes (who can decide that)
  • Can we allow existing applications remain unchanged

Mismatch between code and Figma:

• Number input: In code, we applied border radius 4px to all corners for the control buttons.
• Dropdown: In code we applied border radius to all corners in the dropdown menu.
• Date picker: In code we set border radius 4px to all corners for calendar picker. In code, we applied border radius 4px to all corners for the previous month and next month button.
• Pagination: In code, we applied border radius 4px to all corners for previous and next buttons and selection buttons.
• UI Shell: In code, we set the background color and height for the header.

TODOs:

Developers: done in pr #190

• Typography: Update from BC Sans to BC Sans 2.0 in order to: 🔗 nr-theme backlog
  • enable Indigenous characters that align with BC's adoption of legal names with indigenous characters
  • enable 2 new font weights: BC Sans Light and BC Sans Light Italic
• Number input: update the base font
• Update hardcoded color, font in the stylesheet to use tokens
• Provide a documentation for onboarding new applications

Designers:

• Review the latest default Carbon design
  • Upon review, the designers see that the latest Carbon defaults have many new or updated components. In order to reduce or avoid the amount work required for an entire overhaul of the FDS design system, the decision is to continue using the FDS components as they are. The designers are to understand that the Figma files they generate based on the FDS design system may not 100% reflect the Carbon web components that are deployed in code because the FDS components may be out of date.
    • If a team has the need to adopt and use the newer variants from the latest Carbon default, that team should supply or secure the designer resources to update the respective component on the FDS system. This is meant to happen on an ad hoc basis as opposed to a mandatory and systematic overhaul of the FDS design system.
• Fix the typography naming discrepency between FDS and Carbon
  • https://carbondesignsystem.com/elements/typography/type-sets/
• Data table: update alternating row colours (zebra stripes) in Figma
• Discuss ideas on how to make team-level component customizations more transparent to other teams
  • Initial idea is to put new team-level components in the FDS Design System Figma file and clearly name the component, with "[Component] - [Team] [Date]". For example "Button - Alliance 2025"

Button

• Border-radius: 4px on all corners 🔗 FDS Figma

Text Input & Password Input (Jack's note: may need to split these up)

• Border-radius: 4px 4px 0px 0px (top-left and top-right) 🔗 FDS Figma Text 🔗 FDS Figma Password 🔗 Carbon Text
  • Designer scale = 2
    • a. FDS brand tone: formal yet friendly, more welcoming than sharp corners.
    • b. Gov.bc has rounded corners on text input
    • c. It's difficult to even find real world examples of apps/websites without rounded corners
• Warning icon has a border 🔗 FDS Figma Text 🔗 FDS Figma Password

Text Area

• Border-radius: 4px 4px 0px 0px (top-left and top-right) 🔗 FDS Figma

Number Input

• Border-radius: 4px 4px 0px 0px (top-left and top-right) 🔗 FDS Figma
• Base font: "code-01" 🔗 FDS Figma
  • 🔗 BC Sans is a fork of Google's 🔗 Noto font family. 🔗 Noto Sans Mono is compatible with the BC Sans identity.
• Warning icon has a border 🔗 FDS Figma
• ? In the code, we applied border radius 4px to all corners for the control button.

Search

• Border-radius: 4px 4px 0px 0px (top-left and top-right) 🔗 FDS Figma

Checkbox

• Focus state border-radius: 4px on all corners 🔗 FDS Figma
  Note: No code change needed. Checkbox in Figma has no border-radius by default, but in React component, it has. We will not do the style override for it as it already meets our requirements.

Radio Button

Select

• Select field: 4px 4px 0px 0px (top-left and top-right) 🔗 FDS Figma
• Dropdown menu: 4px on all corners 🔗 FDS Figma. Note: No code change needed, this is by default.

Dropdown

• Dropdown field: 4px 4px 0px 0px (top-left and top-right) 🔗 FDS Figma

Date Picker

• Border-radius: 4px 4px 0px 0px (top-left and top-right) 🔗 FDS Figma
• ? In code we set border radius 4px to all corners for data picker panel.
• ? In code, we applied border radius 4px to all corners for the previous month and next month button.

Time Picker

• Border-radius 4px on left top corner and right top corners, no border-radius in the middle

Notification

• Border-radius: 4px on all corners 🔗 FDS Figma
• New color sets 🔗 FDS Figma
• Use misuse icon instead of error-filled for error notifications 🔗 FDS Figma
  Note: this is not doable through scss file, each team will handle it by themselves

Tooltip

• Border-radius: 4px 🔗 FDS Figma.
  Note: No code change needed. Tooltip seems already have a border radius by default, not 4px, but we are okay with it.

Modal

• Border-radius: 8px on all corners 🔗 FDS Figma
• Modal content spacing 🔗 FDS Figma
• New footer variants??? 🔗 FDS Figma

Tile

• Border-radius: 4px on all corners 🔗 FDS Figma

Data Table

• Header cells: 4px 4px 0px 0px (top-left and top-right) 🔗 FDS Figma
• Row expend icon chevron should have 4px border-radius on all corners when on focus.

Pagination

• Border-radius: 0px 0px 4px 4px (bottom-left and bottom-right) 🔗 FDS Figma
• Set height of small (2.5rem), medium (3rem) and large (3.5rem) size
• ? In code, we applied border radius 4px to all corners for previous and next buttons and selection buttons.

Overflow Menu

• Closed button: border-radius 4px on all corners 🔗 FDS Figma
• Open button: 4px 4px 0px 0px (top-left and top-right) 🔗 FDS Figma
• First menu item: 4px top-left and top-right 🔗 FDS Figma
• Last menu item: 4px bottom-left and bottom-right 🔗 FDS Figma

Toggle

Note: this is not widely used, so each team will handle it by themselves

• Light mode: use Light Filled Carbon icon 🔗 FDS Figma
• Dark mode: use Asleep Filled Carbon icon 🔗 FDS Figma
• Change text color from text-secondary to text-primary [???🔗 FDS Figma]

Left Panel

• List item height: 48px 🔗 FDS Figma
• Left icons use "link-primary" color 🔗 FDS Figma
• Add a right border for the panel
• Selected item text uses "primary-text" color 🔗 FDS Figma
  Note: this is by Carbon default

Right Panel

• List item height: 48px 🔗 FDS Figma
  Note: this will be handled by each team

Slider

• ??? Rounded top corners for text input 🔗 FDS Figma
  Note: this will be handled by the team uses slider

Typography

• Label - Change text color from text-secondary to text-primary
  This change will apply to Checkbox, Date Picker, Dropdown, Number Input, RadioButton, Select, Slider, Text Input, Password Input, Text Area label

Theme / Colour system

• FDS colour system from 2022 differs from Carbon default 🔗 FDS Figma
  Note: we will keep our own color tokens
• Lime green to Green 🔗 FDS Figma
• Violet to Purple 🔗 FDS Figma
• Pink to Magenta 🔗 FDS Figma
• Notification token name change 🔗 FDS Figma Light 🔗 FDS Figma Dark
• Add notification color token for "warning-alt" and "info-square" type

Warning state changes ??? (Jack note: Follow 2025 Carbon defaults???)

FDS Designer scale of design values

0 - We don't care enough about this change
1 - We don't care about this change for the future, but discarding it may require a lot of re-work for a service in production
2 - We care about this change for the following reasons, but can be convinced to align with default Carbon
3 - This change is to align with UX best practices
4 - This change is to mitigate an accessibility / usability risk
5 - This change represents repeated feedback from users