refactor(*): components use label size over body size tokens [run-chromatic][skip-cd] (#763)

clukhei · web-flow · commit 35e528f12a38 · 2026-07-21T10:47:06.000+08:00
diff --git a/playground/Theming.html b/playground/Theming.html
diff --git 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);
 }
 
@@ -99,7 +99,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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -12,15 +12,15 @@ 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);
-  line-height: var(--sgds-line-height-32);
+  font-size: var(--sgds-font-size-heading-sm);
+  line-height: var(--sgds-line-height-sm);
 }
 
 slot[name="description"]::slotted(*) {
   font-weight: var(--sgds-font-weight-regular);
   color: var(--sgds-color-subtle);
-  font-size: var(--sgds-font-size-16);
-  line-height: var(--sgds-line-height-24);
+  font-size: var(--sgds-font-size-label-md);
+  line-height: var(--sgds-line-height-xs);
 }
 
 .header {
diff --git 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
@@ -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
@@ -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
@@ -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,8 +139,8 @@ sgds-icon.invalid {
 }
 
 .drag-drop-text {
-  font-size: var(--sgds-font-size-14);
-  line-height: var(--sgds-line-height-20);
+  font-size: var(--sgds-font-size-label-sm);
+  line-height: var(--sgds-line-height-2-xs);
 }
 
 .drag-drop-zone:focus,
diff --git 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);
-  line-height: var(--sgds-line-height-20);
+  font-size: var(--sgds-font-size-label-sm);
+  line-height: var(--sgds-line-height-2-xs);
 }
 
 .lg {
-  font-size : var(--sgds-font-size-20);
-  line-height: var(--sgds-line-height-32);
+  font-size : var(--sgds-font-size-label-lg);
+  line-height: var(--sgds-line-height-md);
 }
diff --git a/src/components/Link/link.css b/src/components/Link/link.css
@@ -81,25 +81,25 @@
 }
 
 :host([size="md"]) .nav-link::slotted(a) {
-  line-height: var(--sgds-line-height-24) !important;
-  font-size: var(--sgds-font-size-16) !important;
+  line-height: var(--sgds-line-height-xs) !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;
-  line-height: var(--sgds-line-height-32) !important;
+  font-size: var(--sgds-font-size-link-lg) !important;
+  line-height: var(--sgds-line-height-md) !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;
+  line-height: var(--sgds-line-height-2-xs) !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;
+  line-height: var(--sgds-line-height-3-xs) !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
@@ -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
@@ -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
@@ -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
@@ -285,11 +285,11 @@ export class SgdsMainnavDropdown extends SgdsElement {
         @keydown=${this._handleKeyboardOpen}
       >
         <slot name="toggler"></slot>
-        <sgds-icon name="chevron-right"></sgds-icon>
+        <sgds-icon name="chevron-right" size="md"></sgds-icon>
       </a>
       <div class="dropdown-items">
         <a tabindex="0" role="button" @click=${this._closeMenu} @keydown=${this._handleHeaderKeyboardEvent}>
-          <sgds-icon name="chevron-left"></sgds-icon>
+          <sgds-icon name="chevron-left" size="md"></sgds-icon>
           <span></span>
         </a>
         <slot @slotchange=${this._handleSlotChange}></slot>
@@ -316,7 +316,7 @@ export class SgdsMainnavDropdown extends SgdsElement {
         slot="toggler"
       >
         <slot name="toggler"></slot>
-        <sgds-icon name="chevron-down"></sgds-icon>
+        <sgds-icon name="chevron-down" size="md"></sgds-icon>
       </a>
       <slot @slotchange=${this._handleDesktopSlotChange}></slot>
     </sgds-dropdown>`;
diff --git a/src/components/Modal/modal.css b/src/components/Modal/modal.css
@@ -131,14 +131,14 @@ slot[name="title"]::slotted(*) {
   align-items: center;
   gap: 1rem;
   margin: var(--sgds-margin-none) !important;
-  line-height: var(--sgds-line-height-40) !important;
-  font-size: var(--sgds-font-size-24) !important;
+  line-height: var(--sgds-line-height-lg) !important;
+  font-size: var(--sgds-font-size-heading-sm) !important;
 }
 
 slot[name="description"]::slotted(*) {
   margin: var(--sgds-margin-none) !important;
   color: var(--sgds-color-subtle);
-  line-height: var(--sgds-line-height-24);
+  line-height: var(--sgds-line-height-xs);
 }
 
 .modal-body {
diff --git 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
@@ -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
@@ -28,8 +28,8 @@
 }
 
 .sidebar-item-label {
-  font-size: var(--sgds-font-size-1);
-  line-height: var(--sgds-line-height-20);
+  font-size: var(--sgds-font-size-label-sm);
+  line-height: var(--sgds-line-height-2-xs);
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2;
diff --git a/src/components/Sidebar/sidebar-section.css b/src/components/Sidebar/sidebar-section.css
@@ -7,8 +7,9 @@
   display: flex;
   align-items: center;
   gap: var(--sgds-gap-2-xs);
-  font-size: var(--sgds-font-size-0);
-  line-height: var(--sgds-line-height-20);
+  cursor: pointer;
+  font-size: var(--sgds-font-size-label-xs);
+  line-height: var(--sgds-line-height-2-xs);
   color: var(--sgds-label-color-subtle);
   padding: var(--sgds-padding-xs) var(--sgds-padding-sm);
   border-radius: var(--sgds-border-radius-md);
diff --git a/src/components/Sidenav/sidenav-item.css b/src/components/Sidenav/sidenav-item.css
@@ -9,8 +9,8 @@ button {
 .sidenav-btn {
   width: 100%;
   text-align: initial;
-  line-height: var(--sgds-line-height-24);
-  font-size: var(--sgds-font-size-16);
+  line-height: var(--sgds-line-height-xs);
+  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)
@@ -56,8 +56,8 @@ button {
 .no-menu-default::slotted(a) {
   text-decoration: none !important;
   color: inherit !important;
-  line-height: var(--sgds-line-height-24) !important;
-  font-size: var(--sgds-font-size-16);
+  line-height: var(--sgds-line-height-xs) !important;
+  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
@@ -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
@@ -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
@@ -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
diff --git a/src/components/SystemBanner/system-banner.css b/src/components/SystemBanner/system-banner.css
diff --git a/src/components/Tab/tab.css b/src/components/Tab/tab.css
diff --git a/src/components/Table/table.css b/src/components/Table/table.css
diff --git a/src/components/Tooltip/tooltip.css b/src/components/Tooltip/tooltip.css
diff --git a/src/styles/feedback.css b/src/styles/feedback.css

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`:host([density="compact"]) .accordion-body {`
`12`		`- font-size: var(--sgds-font-size-body-sm);`
	`12`	`+ font-size: var(--sgds-font-size-label-sm);`
`13`	`13`	`line-height: var(--sgds-line-height-2-xs);`
`14`	`14`	`}`
`15`	`15`
`@@ -99,7 +99,7 @@ slot[name="caret"] sgds-icon {`
`99`	`99`	`.accordion-body {`
`100`	`100`	`padding: 0;`
`101`	`101`	`overflow: hidden;`
`102`		`- font-size: var(--sgds-font-size-body-md);`
	`102`	`+ font-size: var(--sgds-font-size-label-md);`
`103`	`103`	`line-height: var(--sgds-line-height-xs);`
`104`	`104`	`color: var(--sgds-body-color-subtle);`
`105`	`105`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@`
`7`	`7`	`.alert-link:hover {`
`8`	`8`	`color: var(--sgds-alert-color);`
`9`	`9`	`text-decoration-line: underline;`
`10`		`- font-size: var(--sgds-font-size-body-sm);`
	`10`	`+ font-size: var(--sgds-font-size-label-sm);`
`11`	`11`	`font-weight: var(--sgds-font-weight-regular);`
`12`	`12`	`line-height: var(--sgds-line-height-2-xs);`
`13`	`13`	`}`
Original file line number	Diff line number	Diff line change
`@@ -97,13 +97,13 @@`
`97`	`97`	`}`
`98`	`98`	`.alert-content__description {`
`99`	`99`	`display: inline;`
`100`		`- font-size: var(--sgds-font-size-body-sm);`
	`100`	`+ font-size: var(--sgds-font-size-label-sm);`
`101`	`101`	`font-weight: var(--sgds-font-weight-regular);`
`102`	`102`	`line-height: var(--sgds-line-height-2-xs);`
`103`	`103`	`}`
`104`	`104`
`105`	`105`	`.alert-content__description::slotted(*) {`
`106`		`- font-size: var(--sgds-font-size-body-sm);`
	`106`	`+ font-size: var(--sgds-font-size-label-sm);`
`107`	`107`	`font-weight: var(--sgds-font-weight-regular);`
`108`	`108`	`line-height: var(--sgds-line-height-2-xs);`
`109`	`109`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@`
`3`	`3`	`gap: var(--sgds-gap-xs);`
`4`	`4`	`align-items: center;`
`5`	`5`	`min-width: 0;`
	`6`	`+ font-size: var(--sgds-font-size-link-md);`
`6`	`7`	`}`
`7`	`8`
`8`	`9`	`:host .nav-link::slotted(*) {`
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,6 @@`
`8`	`8`	`--datepicker-selected-date-bg: var(--sgds-primary);`
`9`	`9`	`--datepicker-selected-date-color: white;`
`10`	`10`
`11`		`- font-size: var(--sgds-font-size-14);`
`12`	`11`	`}`
`13`	`12`
`14`	`13`	`:host([menuisopen]:not([disabled]):not([readonly])) .dropdown-menu {`
Original file line number	Diff line number	Diff line change
`@@ -24,12 +24,12 @@`
`24`	`24`	`.label {`
`25`	`25`	`color: var(--sgds-color-default);`
`26`	`26`	`font-weight: var(--sgds-font-weight-semibold);`
`27`		`- font-size: var(--sgds-font-size-16);`
	`27`	`+ font-size: var(--sgds-font-size-label-md);`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`.data {`
`31`	`31`	`color: var(--sgds-color-subtle);`
`32`		`- font-size: var(--sgds-font-size-16);`
	`32`	`+ font-size: var(--sgds-font-size-label-md);`
`33`	`33`	`font-weight: var(--sgds-font-weight-regular);`
`34`	`34`	`margin: 0;`
`35`	`35`	`}`
Original file line number	Diff line number	Diff line change
`@@ -105,7 +105,7 @@ sgds-close-button.drawer-close {`
`105`	`105`
`106`	`106`	`slot[name="title"]::slotted(*) {`
`107`	`107`	`margin-bottom: var(--sgds-margin-none) !important;`
`108`		`- font-size: var(--sgds-font-size-24) !important;`
	`108`	`+ font-size: var(--sgds-font-size-heading-sm) !important;`
`109`	`109`	`color: var(--sgds-color-default) !important;`
`110`	`110`	`}`
`111`	`111`
Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,7 @@`
`12`	`12`	`color: var(--sgds-color-default);`
`13`	`13`	`text-align: inherit;`
`14`	`14`	`cursor: pointer;`
	`15`	`+ font-size: var(--sgds-font-size-label-sm);`
`15`	`16`	`}`
`16`	`17`
`17`	`18`	`.dropdown-item:hover {`