From cdb37d89dc96dc18fd08ea977922a856d833c5ab Mon Sep 17 00:00:00 2001 From: clukhei Date: Wed, 15 Jul 2026 15:15:54 +0800 Subject: [PATCH 1/2] refactor(*): update all component to use label size token --- playground/Theming.html | 789 ++++++++++++++++++ src/components/Accordion/accordion-item.css | 4 +- src/components/Alert/alert-link.css | 2 +- src/components/Alert/alert.css | 4 +- src/components/Breadcrumb/breadcrumb-item.css | 1 + src/components/Datepicker/datepicker.css | 1 - .../description-list-group.css | 4 +- .../DescriptionList/description-list.css | 4 +- src/components/Drawer/drawer.css | 2 +- src/components/Dropdown/dropdown-item.css | 1 + src/components/FileUpload/file-upload.css | 6 +- src/components/IconList/icon-list.css | 4 +- src/components/Link/link.css | 8 +- src/components/Mainnav/mainnav-dropdown.css | 4 + src/components/Mainnav/mainnav-item.css | 2 + src/components/Mainnav/mainnav.css | 2 + .../Mainnav/sgds-mainnav-dropdown.ts | 6 +- src/components/Modal/modal.css | 2 +- src/components/Pagination/pagination.css | 4 +- src/components/ProgressBar/progress-bar.css | 2 +- src/components/Sidebar/sidebar-item.css | 2 +- src/components/Sidebar/sidebar-section.css | 2 +- src/components/Sidenav/sidenav-item.css | 4 +- src/components/Spinner/spinner.css | 2 +- src/components/Subnav/subnav-item.css | 2 +- src/components/Switch/switch.css | 4 +- .../SystemBanner/system-banner-item.css | 6 +- src/components/SystemBanner/system-banner.css | 2 +- src/components/Tab/tab.css | 2 +- src/components/Table/table.css | 1 + src/components/Tooltip/tooltip.css | 2 +- src/styles/feedback.css | 2 +- 32 files changed, 841 insertions(+), 42 deletions(-) create mode 100644 playground/Theming.html diff --git a/playground/Theming.html b/playground/Theming.html new file mode 100644 index 000000000..2c1574874 --- /dev/null +++ b/playground/Theming.html @@ -0,0 +1,789 @@ + + + + + + + + + + + +
+ + + Theming Playground + Overview + + Components + Buttons + Forms + Navigation + Data Display + Overlays + + + Resources + Documentation + GitHub + Changelog + + Feedback + Contact +
+ Toggle Theme +
+ +
+ + +
+ + +
+ +
Theming
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ + + + +
+

Overview

+ + +
+ + + + This is a default system banner with an icon and action link. + + Learn more + + + + + + New + A dismissible system banner with a badge. Users can close this notification. + + View details + + + + + + + Scheduled maintenance on 20 July 2026 from 2:00 AM to 6:00 AM SGT. + + Details + + + + + All systems are currently operational. + + +
+ + +
+ This is a primary alert with a title and description text. + Your changes have been saved successfully. + Please review your inputs before proceeding. + Something went wrong. Please try again later. + A new version is available for download. +
+ + +
+ Primary + Secondary + Success + Danger + Warning + Info + Neutral +
+ + +
+ +
+ + +

Spinners (tones)

+
+ + + +
+

Spinners (sizes)

+
+ + + + + +
+
+ + + + +
+

Buttons

+ + +

Sizes

+
+ Extra Small + Small + Default (md) + Large +
+ + +

Primary (variant)

+
+ Brand + Danger + Neutral +
+ + +

Outline (variant)

+
+ Brand + Danger + Neutral +
+ + +

Ghost (variant)

+
+ Brand + Danger + Neutral +
+ + +

Icon Buttons

+
+ + + + + + + +
+ + +

Close Button

+
+ +
+
+ + + + +
+

Forms

+ +
+ + + + + + + + + Option 1 + Option 2 + Option 3 + + + + + Apple + Banana + Cherry + Durian + + + + + + + + + + + + +
+ Checkboxes +
+ Option A + Option B + Option C (checked) +
+
+ + +
+ Radio Buttons +
+ Radio 1 + Radio 2 + Radio 3 (checked) +
+
+ + +
+ Switch (sizes) +
+ + + + +
+
+
+
+ + + + +
+

Feedback & Status

+ + +
+ Show Toast + + This is a success toast notification. + +
+ + +

Stepper (horizontal)

+
+ + Enter your personal information + Review your submission + Complete payment + Confirmation + +
+ + +

Stepper (vertical)

+
+ + Your account has been set up + Personal details saved + Awaiting email verification + Ready to use + +
+ + +
+ + + +
+
+ + + + + + + + + +
+

Data Display

+ + +
+ + + Name + Role + Status + Action + + + Alice + Engineer + Active + + + + Bob + Designer + Away + + + + Charlie + Manager + Offline + + + +
+ + +

Accordion (default density)

+
+ + +
What is SGDS?
+
The Singapore Government Design System (SGDS) is a collection of reusable components and patterns built for government digital services. It ensures consistency and accessibility across all touchpoints.
+ + +
How do I get started?
+
Install the web component library via npm: npm install @govtechsg/sgds-web-component. Then import and use the components in your HTML or framework of choice.
+ + +
Is SGDS accessible?
+
Yes. All components are built with WCAG 2.1 AA compliance in mind. They include proper ARIA attributes, keyboard navigation, and focus management out of the box.
+ + +
+ + +

Accordion (compact density)

+
+ + +
Compact Item 1
+
This accordion uses compact density for tighter spacing. Useful for sidebars or constrained layouts.
+ + +
Compact Item 2
+
Content remains readable while taking up less vertical space.
+ + +
Compact Item 3
+
Ideal for navigation menus or settings panels.
+ + +
+ + +

Accordion (spacious density)

+
+ + +
Spacious Item 1
+
The spacious density gives more breathing room between items. Best for content-heavy sections where readability is paramount.
+ + +
Spacious Item 2
+
Each item has generous padding, making it easy to scan through multiple sections.
+ + +
Spacious Item 3
+
Use this density for FAQ pages, documentation, or long-form content.
+ + +
+ + +

Accordion (border variant)

+
+ + +
Border Item 1
+
The border variant adds an outlined style to each accordion item for visual separation.
+ + +
Border Item 2
+
Useful when the accordion sits on a coloured background and needs extra definition.
+ + +
+ + +
+ +
Project Details
+ + Project Name + SGDS Web Components + + + Version + 3.24.0 + + + Framework + Lit + TypeScript + + + License + MIT + + +
+ + + + + +
+ + Card Title + This is a basic card component with a title and description. + + + + Icon Card + A card with an icon. + + + Thumbnail + Thumbnail Card + A card with an image thumbnail. + + + Image + Image Card + A card with a prominent image. + +
+
+ + + + +
+

Overlays & Interactive

+ + +
+ Open Modal + +

This is a modal dialog. It overlays the page content.

+ + + + Open Drawer +
+ + +
+ + Dropdown + Action 1 + Action 2 + Action 3 + + + + + Menu Item 1 + Menu Item 2 + Menu Item 3 + +
+ + +
+ + Hover for Tooltip + +
+ + +

Icon List (small)

+
+ + + + Small icon list item + + + + Another small item + + +
+

Icon List (medium)

+
+ + + + Medium icon list item + + + + Another medium item + + +
+

Icon List (large)

+
+ + + + Large icon list item + + + + Another large item + + +
+ + +
+ + Overview + Buttons + Forms + Feedback + Navigation + +
+
+ +
+ + + +

Theming Playground

+

A demonstration of all SGDS web components for theming and visual testing.

+ +
Resources
+ Documentation + Getting Started + Component Library + + +
Community
+ GitHub + Discussions + Changelog + + +
Support
+ Report a Bug + Feature Request + FAQ + + +
+ +
+ + + +

Drawer Title

+

A side panel for additional content.

+

This is a drawer panel that slides in from the side. It can contain forms, details, or any supplementary content.

+
+ Close +
+ + + + + diff --git a/src/components/Accordion/accordion-item.css b/src/components/Accordion/accordion-item.css index 3a288566a..e6a5e1a0e 100644 --- a/src/components/Accordion/accordion-item.css +++ b/src/components/Accordion/accordion-item.css @@ -9,7 +9,7 @@ } :host([density="compact"]) .accordion-body { - font-size: var(--sgds-font-size-body-sm); + font-size: var(--sgds-font-size-label-sm); line-height: var(--sgds-line-height-2-xs); } @@ -105,7 +105,7 @@ slot[name="caret"] sgds-icon { .accordion-body { padding: 0; overflow: hidden; - font-size: var(--sgds-font-size-body-md); + font-size: var(--sgds-font-size-label-md); line-height: var(--sgds-line-height-xs); color: var(--sgds-body-color-subtle); } diff --git a/src/components/Alert/alert-link.css b/src/components/Alert/alert-link.css index fbe7b6338..31163be54 100644 --- a/src/components/Alert/alert-link.css +++ b/src/components/Alert/alert-link.css @@ -7,7 +7,7 @@ .alert-link:hover { color: var(--sgds-alert-color); text-decoration-line: underline; - font-size: var(--sgds-font-size-body-sm); + font-size: var(--sgds-font-size-label-sm); font-weight: var(--sgds-font-weight-regular); line-height: var(--sgds-line-height-2-xs); } diff --git a/src/components/Alert/alert.css b/src/components/Alert/alert.css index 71b4e49e1..3ff5cc2b0 100644 --- a/src/components/Alert/alert.css +++ b/src/components/Alert/alert.css @@ -97,13 +97,13 @@ } .alert-content__description { display: inline; - font-size: var(--sgds-font-size-body-sm); + font-size: var(--sgds-font-size-label-sm); font-weight: var(--sgds-font-weight-regular); line-height: var(--sgds-line-height-2-xs); } .alert-content__description::slotted(*) { - font-size: var(--sgds-font-size-body-sm); + font-size: var(--sgds-font-size-label-sm); font-weight: var(--sgds-font-weight-regular); line-height: var(--sgds-line-height-2-xs); } diff --git a/src/components/Breadcrumb/breadcrumb-item.css b/src/components/Breadcrumb/breadcrumb-item.css index 28a9d4c34..77887b5cd 100644 --- a/src/components/Breadcrumb/breadcrumb-item.css +++ b/src/components/Breadcrumb/breadcrumb-item.css @@ -3,6 +3,7 @@ gap: var(--sgds-gap-xs); align-items: center; min-width: 0; + font-size: var(--sgds-font-size-link-md); } :host .nav-link::slotted(*) { diff --git a/src/components/Datepicker/datepicker.css b/src/components/Datepicker/datepicker.css index 52016940e..dadd353f0 100644 --- a/src/components/Datepicker/datepicker.css +++ b/src/components/Datepicker/datepicker.css @@ -8,7 +8,6 @@ --datepicker-selected-date-bg: var(--sgds-primary); --datepicker-selected-date-color: white; - font-size: var(--sgds-font-size-14); } :host([menuisopen]:not([disabled]):not([readonly])) .dropdown-menu { diff --git a/src/components/DescriptionList/description-list-group.css b/src/components/DescriptionList/description-list-group.css index 2c749ade9..a47ab0300 100644 --- a/src/components/DescriptionList/description-list-group.css +++ b/src/components/DescriptionList/description-list-group.css @@ -12,14 +12,14 @@ slot[name="title"]::slotted(*) { color: var(--sgds-heading-color-default); font-weight: var(--sgds-font-weight-semibold); letter-spacing: var(--sgds-letter-spacing-tight); - font-size: var(--sgds-font-size-24); + font-size: var(--sgds-font-size-heading-sm); line-height: var(--sgds-line-height-32); } slot[name="description"]::slotted(*) { font-weight: var(--sgds-font-weight-regular); color: var(--sgds-color-subtle); - font-size: var(--sgds-font-size-16); + font-size: var(--sgds-font-size-label-md); line-height: var(--sgds-line-height-24); } diff --git a/src/components/DescriptionList/description-list.css b/src/components/DescriptionList/description-list.css index cc38fa3e2..8524dff63 100644 --- a/src/components/DescriptionList/description-list.css +++ b/src/components/DescriptionList/description-list.css @@ -24,12 +24,12 @@ .label { color: var(--sgds-color-default); font-weight: var(--sgds-font-weight-semibold); - font-size: var(--sgds-font-size-16); + font-size: var(--sgds-font-size-label-md); } .data { color: var(--sgds-color-subtle); - font-size: var(--sgds-font-size-16); + font-size: var(--sgds-font-size-label-md); font-weight: var(--sgds-font-weight-regular); margin: 0; } diff --git a/src/components/Drawer/drawer.css b/src/components/Drawer/drawer.css index 6168231ac..d0da50566 100644 --- a/src/components/Drawer/drawer.css +++ b/src/components/Drawer/drawer.css @@ -105,7 +105,7 @@ sgds-close-button.drawer-close { slot[name="title"]::slotted(*) { margin-bottom: var(--sgds-margin-none) !important; - font-size: var(--sgds-font-size-24) !important; + font-size: var(--sgds-font-size-heading-sm) !important; color: var(--sgds-color-default) !important; } diff --git a/src/components/Dropdown/dropdown-item.css b/src/components/Dropdown/dropdown-item.css index c3a0e30dc..11a13d392 100644 --- a/src/components/Dropdown/dropdown-item.css +++ b/src/components/Dropdown/dropdown-item.css @@ -12,6 +12,7 @@ color: var(--sgds-color-default); text-align: inherit; cursor: pointer; + font-size: var(--sgds-font-size-label-sm); } .dropdown-item:hover { diff --git a/src/components/FileUpload/file-upload.css b/src/components/FileUpload/file-upload.css index 87f61cf94..095d5b2c8 100644 --- a/src/components/FileUpload/file-upload.css +++ b/src/components/FileUpload/file-upload.css @@ -94,8 +94,8 @@ .file-upload-item-error-message { color: var(--sgds-form-danger-color-default); - font-size: var(--sgds-font-size-12); - line-height: var(--sgds-line-height-16); + font-size: var(--sgds-font-size-label-sm,); + line-height: var(--sgds-line-height-2-xs); } ul { @@ -139,7 +139,7 @@ sgds-icon.invalid { } .drag-drop-text { - font-size: var(--sgds-font-size-14); + font-size: var(--sgds-font-size-label-sm); line-height: var(--sgds-line-height-20); } diff --git a/src/components/IconList/icon-list.css b/src/components/IconList/icon-list.css index 825c9c295..9a8a07bad 100644 --- a/src/components/IconList/icon-list.css +++ b/src/components/IconList/icon-list.css @@ -11,11 +11,11 @@ slot::slotted(*){ } .sm { - font-size: var(--sgds-font-size-14); + font-size: var(--sgds-font-size-label-sm); line-height: var(--sgds-line-height-20); } .lg { - font-size : var(--sgds-font-size-20); + font-size : var(--sgds-font-size-label-lg); line-height: var(--sgds-line-height-32); } \ No newline at end of file diff --git a/src/components/Link/link.css b/src/components/Link/link.css index 8e80a3d0b..f21452b5b 100644 --- a/src/components/Link/link.css +++ b/src/components/Link/link.css @@ -82,24 +82,24 @@ :host([size="md"]) .nav-link::slotted(a) { line-height: var(--sgds-line-height-24) !important; - font-size: var(--sgds-font-size-16) !important; + font-size: var(--sgds-font-size-link-md) !important; --text-underline-offset: 3px; } :host([size="lg"]) .nav-link::slotted(a) { - font-size: var(--sgds-font-size-20) !important; + font-size: var(--sgds-font-size-link-lg) !important; line-height: var(--sgds-line-height-32) !important; --text-underline-offset: 4px; } :host([size="sm"]) .nav-link::slotted(a) { line-height: var(--sgds-line-height-20) !important; - font-size: var(--sgds-font-size-14) !important; + font-size: var(--sgds-font-size-link-sm) !important; --text-underline-offset: 2.8px; } :host([size="xs"]) .nav-link::slotted(a) { line-height: var(--sgds-line-height-16) !important; - font-size: var(--sgds-font-size-12) !important; + font-size: var(--sgds-font-size-link-xs) !important; --text-underline-offset: 2.2px; } /* External Links */ diff --git a/src/components/Mainnav/mainnav-dropdown.css b/src/components/Mainnav/mainnav-dropdown.css index 4dd4d7f5f..09ef152f2 100644 --- a/src/components/Mainnav/mainnav-dropdown.css +++ b/src/components/Mainnav/mainnav-dropdown.css @@ -53,6 +53,8 @@ text-decoration: none; padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x); box-sizing: border-box; + font-size: var(--sgds-font-size-label-sm); + line-height: var(--sgds-line-height-2-xs, 20px); } .nav-link:not(.disabled).active, @@ -97,6 +99,8 @@ padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x); max-width: var(--sgds-mainnav-max-width, 1440px); margin: auto; + font-size: var(--sgds-font-size-label-sm); + line-height: var(--sgds-line-height-2-xs, 20px); } .dropdown-items a:hover { diff --git a/src/components/Mainnav/mainnav-item.css b/src/components/Mainnav/mainnav-item.css index 8c4f63e9e..9959f27ac 100644 --- a/src/components/Mainnav/mainnav-item.css +++ b/src/components/Mainnav/mainnav-item.css @@ -105,6 +105,8 @@ color: var(--sgds-color-default) !important; padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x); box-sizing: border-box; + font-size: var(--sgds-font-size-label-sm); + line-height: var(--sgds-line-height-2-xs, 20px); } @media screen and (min-width: 1024px) { diff --git a/src/components/Mainnav/mainnav.css b/src/components/Mainnav/mainnav.css index 237065d02..84825b577 100644 --- a/src/components/Mainnav/mainnav.css +++ b/src/components/Mainnav/mainnav.css @@ -20,6 +20,7 @@ nav { max-width: var(--sgds-mainnav-max-width, 1440px); min-height: 80px; margin: auto; + font-size: var(--sgds-font-size-label-sm); } :host([fluid]) .navbar { @@ -31,6 +32,7 @@ nav { align-items: center; text-decoration: none; white-space: nowrap; + color: var(--sgds-color-default); } .navbar-brand:focus-visible { diff --git a/src/components/Mainnav/sgds-mainnav-dropdown.ts b/src/components/Mainnav/sgds-mainnav-dropdown.ts index 71e166e0a..e97bd457d 100644 --- a/src/components/Mainnav/sgds-mainnav-dropdown.ts +++ b/src/components/Mainnav/sgds-mainnav-dropdown.ts @@ -285,11 +285,11 @@ export class SgdsMainnavDropdown extends SgdsElement { @keydown=${this._handleKeyboardOpen} > - +
- + @@ -316,7 +316,7 @@ export class SgdsMainnavDropdown extends SgdsElement { slot="toggler" > - + `; diff --git a/src/components/Modal/modal.css b/src/components/Modal/modal.css index ec7f1ec20..503fb92d8 100644 --- a/src/components/Modal/modal.css +++ b/src/components/Modal/modal.css @@ -132,7 +132,7 @@ slot[name="title"]::slotted(*) { gap: 1rem; margin: var(--sgds-margin-none) !important; line-height: var(--sgds-line-height-40) !important; - font-size: var(--sgds-font-size-24) !important; + font-size: var(--sgds-font-size-heading-sm) !important; } slot[name="description"]::slotted(*) { diff --git a/src/components/Pagination/pagination.css b/src/components/Pagination/pagination.css index deeaca632..1eba30337 100644 --- a/src/components/Pagination/pagination.css +++ b/src/components/Pagination/pagination.css @@ -62,7 +62,7 @@ svg { } .pagination-sm .page-link { - font-size: var(--sgds-font-size-14); + font-size: var(--sgds-font-size-label-sm); width: var(--sgds-dimension-40); height: var(--sgds-dimension-40); } @@ -85,5 +85,5 @@ svg { } .pagination-sm .pagination-description { - font-size: var(--sgds-font-size-14); + font-size: var(--sgds-font-size-label-sm); } diff --git a/src/components/ProgressBar/progress-bar.css b/src/components/ProgressBar/progress-bar.css index 35de2b574..6c3ba5cf7 100644 --- a/src/components/ProgressBar/progress-bar.css +++ b/src/components/ProgressBar/progress-bar.css @@ -41,7 +41,7 @@ progress { .label { white-space: nowrap; - font-size: var(--sgds-font-size-14); + font-size: var(--sgds-font-size-label-sm); color: var(--sgds-color-subtle); } diff --git a/src/components/Sidebar/sidebar-item.css b/src/components/Sidebar/sidebar-item.css index 251124ffd..5b2dd5dd9 100644 --- a/src/components/Sidebar/sidebar-item.css +++ b/src/components/Sidebar/sidebar-item.css @@ -28,7 +28,7 @@ } .sidebar-item-label { - font-size: var(--sgds-font-size-1); + font-size: var(--sgds-font-size-label-sm); line-height: var(--sgds-line-height-20); overflow: hidden; display: -webkit-box; diff --git a/src/components/Sidebar/sidebar-section.css b/src/components/Sidebar/sidebar-section.css index 50f0cd281..6705b2d4b 100644 --- a/src/components/Sidebar/sidebar-section.css +++ b/src/components/Sidebar/sidebar-section.css @@ -8,7 +8,7 @@ align-items: center; gap: var(--sgds-gap-2-xs); cursor: pointer; - font-size: var(--sgds-font-size-0); + font-size: var(--sgds-font-size-label-xs); line-height: var(--sgds-line-height-20); color: var(--sgds-label-color-subtle); padding: var(--sgds-padding-xs) var(--sgds-padding-sm); diff --git a/src/components/Sidenav/sidenav-item.css b/src/components/Sidenav/sidenav-item.css index 98221e863..1a1839539 100644 --- a/src/components/Sidenav/sidenav-item.css +++ b/src/components/Sidenav/sidenav-item.css @@ -10,7 +10,7 @@ button { width: 100%; text-align: initial; line-height: var(--sgds-line-height-24); - font-size: var(--sgds-font-size-16); + font-size: var(--sgds-font-size-label-md); border: 0; background: 0; padding: var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) @@ -57,7 +57,7 @@ button { text-decoration: none !important; color: inherit !important; line-height: var(--sgds-line-height-24) !important; - font-size: var(--sgds-font-size-16); + font-size: var(--sgds-font-size-label-md); border: 0; background: 0; padding: var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) diff --git a/src/components/Spinner/spinner.css b/src/components/Spinner/spinner.css index 43f294605..ac7430214 100644 --- a/src/components/Spinner/spinner.css +++ b/src/components/Spinner/spinner.css @@ -64,7 +64,7 @@ } .spinner-label { - font-size: var(--sgds-font-size-14); + font-size: var(--sgds-font-size-label-sm); color: var(--sgds-neutral-color-default); } diff --git a/src/components/Subnav/subnav-item.css b/src/components/Subnav/subnav-item.css index ccaad8d6b..0bd1ff07d 100644 --- a/src/components/Subnav/subnav-item.css +++ b/src/components/Subnav/subnav-item.css @@ -8,7 +8,7 @@ display: inline-block; width: 100%; text-decoration: none !important; - font-size: var(--sgds-font-size-14) !important; + font-size: var(--sgds-font-size-label-sm) !important; color: var(--sgds-link-color-default, var(--sgds-color-default)); padding: var(--sgds-padding-sm) var(--sgds-padding-lg); cursor: pointer; diff --git a/src/components/Switch/switch.css b/src/components/Switch/switch.css index 1b16e029e..801445e7a 100644 --- a/src/components/Switch/switch.css +++ b/src/components/Switch/switch.css @@ -58,7 +58,7 @@ input { } :host([size="sm"]) .form-check { - font-size: var(--sgds-font-size-14); + font-size: var(--sgds-font-size-label-sm); } :host([size="sm"]) .form-check-input { @@ -68,7 +68,7 @@ input { } :host([size="lg"]) .form-check { - font-size: var(--sgds-font-size-20); + font-size: var(--sgds-font-size-label-lg); } :host([size="lg"]) .form-check-input { diff --git a/src/components/SystemBanner/system-banner-item.css b/src/components/SystemBanner/system-banner-item.css index 6a487a8b7..2df46c833 100644 --- a/src/components/SystemBanner/system-banner-item.css +++ b/src/components/SystemBanner/system-banner-item.css @@ -1,7 +1,7 @@ :host { display: block; width: inherit; - font-size: var(--sgds-font-size-14, 14px); + font-size: var(--sgds-font-size-label-sm); font-style: normal; font-weight: var(--sgds-font-weight-regular, 400); line-height: var(--sgds-line-height-20, 20px); /* 142.857% */ @@ -10,7 +10,7 @@ /* Handles inline links and all texts */ ::slotted(:not(sgds-icon)) { - font-size: var(--sgds-font-size-14, 14px) !important; + font-size: var(--sgds-font-size-label-sm) !important; line-height: var(--sgds-line-height-20, 20px) !important; color: var(--sgds-color-fixed-light) !important; } @@ -73,7 +73,7 @@ slot[name="action"]::slotted(a) { text-decoration: none !important; color: var(--sgds-color-fixed-light) !important; - font-size: var(--sgds-font-size-14, 14px) !important; + font-size: var(--sgds-font-size-label-sm) !important; } .banner-item__message_and__action { diff --git a/src/components/SystemBanner/system-banner.css b/src/components/SystemBanner/system-banner.css index 91cfd3cec..e39e9f1d4 100644 --- a/src/components/SystemBanner/system-banner.css +++ b/src/components/SystemBanner/system-banner.css @@ -36,7 +36,7 @@ .pagination { display: flex; gap: var(--sgds-gap-2-xs); - font-size: var(--sgds-font-size-12); + font-size: var(--sgds-font-size-label-xs); align-items: center; font-weight: var(--sgds-font-weight-regular, 400); line-height: var(--sgds-line-height-16, 16px); /* 133.333% */ diff --git a/src/components/Tab/tab.css b/src/components/Tab/tab.css index f9eec7979..3e3aa1ba5 100644 --- a/src/components/Tab/tab.css +++ b/src/components/Tab/tab.css @@ -1,6 +1,6 @@ :host([density="compact"]) .tab { padding: var(--sgds-spacer-3) var(--sgds-spacer-5); - font-size: var(--sgds-font-size-14); + font-size: var(--sgds-font-size-label-sm); } :host(:not([active])) .tab { diff --git a/src/components/Table/table.css b/src/components/Table/table.css index 2ab8767ff..17ac2d31e 100644 --- a/src/components/Table/table.css +++ b/src/components/Table/table.css @@ -21,6 +21,7 @@ table { display: table; width: 100%; table-layout: auto; + font-size: var(--sgds-font-size-label-sm); } :host([layout="fixed"]) .table { diff --git a/src/components/Tooltip/tooltip.css b/src/components/Tooltip/tooltip.css index bdfcf2d34..a710d1d14 100644 --- a/src/components/Tooltip/tooltip.css +++ b/src/components/Tooltip/tooltip.css @@ -11,7 +11,7 @@ background-color: var(--sgds-surface-fixed-dark); border-radius: var(--sgds-border-radius-md); color: var(--sgds-color-fixed-light); - font-size: var(--sgds-font-size-14); + font-size: var(--sgds-font-size-label-sm); max-width: var(--sgds-dimension-320); padding: var(--sgds-padding-xs) var(--sgds-padding-sm); box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.14); diff --git a/src/styles/feedback.css b/src/styles/feedback.css index dbc91b8d4..011baafb0 100644 --- a/src/styles/feedback.css +++ b/src/styles/feedback.css @@ -8,7 +8,7 @@ .invalid-feedback { color: var(--sgds-form-danger-color-default); - font-size: var(--sgds-font-size-14); + font-size: var(--sgds-font-size-label-sm); font-weight: var(--sgds-font-weight-regular); line-height: var(--sgds-line-height-20); } From 89998c1b0588229e8a339c078cbf86367eba1c33 Mon Sep 17 00:00:00 2001 From: clukhei Date: Wed, 15 Jul 2026 23:57:31 +0800 Subject: [PATCH 2/2] refactor(*): replace primitives with semantics for line height --- playground/Theming.html | 94 +++++++++---------- .../description-list-group.css | 4 +- src/components/FileUpload/file-upload.css | 2 +- src/components/IconList/icon-list.css | 4 +- src/components/Link/link.css | 8 +- src/components/Modal/modal.css | 4 +- src/components/Sidebar/sidebar-item.css | 2 +- src/components/Sidebar/sidebar-section.css | 2 +- src/components/Sidenav/sidenav-item.css | 4 +- .../SystemBanner/system-banner-item.css | 10 +- src/components/SystemBanner/system-banner.css | 2 +- 11 files changed, 65 insertions(+), 71 deletions(-) diff --git a/playground/Theming.html b/playground/Theming.html index 2c1574874..065145670 100644 --- a/playground/Theming.html +++ b/playground/Theming.html @@ -5,10 +5,6 @@