fix(components): manual format adjustment to CSS

Author: alex-ju

packages/components/src/styles/components/alert.scss

@@ -145,9 +145,8 @@
 
   &.hds-alert--type-inline {
     background-color: var(--token-color-surface-faint);
-    border-color: var(
-      --token-color-border-strong
-    ); // notice: in the "neutral" color the "inline" has a slightly darker border color compared to the others to increase contrast (eg. could be used on a light gray background)
+    // notice: in the "neutral" color the "inline" has a slightly darker border color compared to the others to increase contrast (eg. could be used on a light gray background)
+    border-color: var(--token-color-border-strong);
   }
 
   // different color by design

packages/components/src/styles/components/app-side-nav/content.scss

@@ -58,17 +58,18 @@
 
 // LIST (root elements)
 
-.hds-app-side-nav__list-wrapper, // <nav> element
+// <nav> element
+.hds-app-side-nav__list-wrapper,
+// <ul> element
 .hds-app-side-nav__list {
-  // <ul> element
   margin: 0;
   padding: 0;
 }
 
 // ITEM (generic container)
 
+// <li> element
 .hds-app-side-nav__list-item {
-  // <li> element
   position: relative; // for the "active" state indicator
   list-style-type: none;
 
@@ -77,8 +78,8 @@
   }
 }
 
+// <a>/<button> element (via Hds::Interactive)
 .hds-app-side-nav__list-item-link {
-  // <a>/<button> element (via Hds::Interactive)
   display: flex;
   gap: var(--token-app-side-nav-body-list-item-content-spacing-horizontal);
   align-items: center;

packages/components/src/styles/components/badge-count.scss

@@ -28,29 +28,29 @@ $hds-badge-count-border-width: 1px;
 // these values later may come from the design tokens
 $hds-badge-count-size-props: (
   "small": (
+    // 13px = 0.8125rem
     "font-size": 0.8125rem,
-    // 13px
     "height": 1.25rem,
+    // 16px = 1.2308
     "line-height": 1.2308,
-    // 16px
     "padding-vertical": 0.125rem,
     "padding-horizontal": 0.5rem,
   ),
   "medium": (
+    // 13px = 0.8125rem
     "font-size": 0.8125rem,
-    // 13px
     "height": 1.5rem,
+    // 16px = 1.2308
     "line-height": 1.2308,
-    // 16px
     "padding-vertical": 0.25rem,
     "padding-horizontal": 0.75rem,
   ),
   "large": (
+    // 16px = 1rem
     "font-size": 1rem,
-    // 16px
     "height": 2rem,
+    // 24px = 1.5
     "line-height": 1.5,
-    // 24px
     "padding-vertical": 0.25rem,
     "padding-horizontal": 0.875rem,
   ),

packages/components/src/styles/components/badge.scss

@@ -67,35 +67,35 @@ $hds-badge-colors-props: (
 // these values later may come from the design tokens
 $hds-badge-size-props: (
   "small": (
+    // 13px = 0.8125rem
     "font-size": 0.8125rem,
-    // 13px
     "gap": 0.25rem,
     "height": 1.25rem,
     "icon-size": 0.75rem,
+    // 16px = 1.2308
     "line-height": 1.2308,
-    // 16px
     "padding-vertical": 0.125rem,
     "padding-horizontal": 0.375rem,
   ),
   "medium": (
+    // 13px = 0.8125rem
     "font-size": 0.8125rem,
-    // 13px
     "gap": 0.25rem,
     "height": 1.5rem,
     "icon-size": 1rem,
+    // 16px = 1.2308
     "line-height": 1.2308,
-    // 16px
     "padding-vertical": 0.25rem,
     "padding-horizontal": 0.5rem,
   ),
   "large": (
+    // 16px = 1rem
     "font-size": 1rem,
-    // 16px
     "gap": 0.375rem,
     "height": 2rem,
     "icon-size": 1rem,
+    // 24px = 1.5
     "line-height": 1.5,
-    // 24px
     "padding-vertical": 0.25rem,
     "padding-horizontal": 0.5rem,
   ),

packages/components/src/styles/components/dismiss-button.scss

@@ -19,8 +19,8 @@
 
   &:hover,
   &.mock-hover {
+    // we re-use the pseudo-element created by the "focus-ring" mixin
     &::before {
-      // we re-use the pseudo-element created by the "focus-ring" mixin
       background-color: rgba(#dedfe3, 0.4);
     }
   }

packages/components/src/styles/components/form/group.scss

@@ -7,16 +7,16 @@
 // FORM > GROUP
 //
 
+// notice: this is a <fieldset> element
 .hds-form-group {
-  // notice: this is a <fieldset> element
   display: block;
   margin: 0;
   padding: 0;
   border: none;
 }
 
+// notice: this is a <legend> element
 .hds-form-group__legend {
-  // notice: this is a <legend> element
   margin: 0 0 8px 0;
   padding: 0;
 }

packages/components/src/styles/components/icon-tile.scss

@@ -60,42 +60,42 @@ $hds-icon-tile-border-width: 1px;
 // these values later may come from the design tokens
 $hds-icon-tile-size-props: (
   "small": (
+    // 28px = 1.75rem
     "size": 1.75rem,
-    // 28px
     "border-radius": 5px,
+    // 16px = 1rem
     "icon-size": 1rem,
-    // 16px
+    // 18px = 1.125rem
     "logo-size": 1.125rem,
-    // 18px
+    // 18px = 1.125rem
     "extra-size": 1.125rem,
-    // 18px
     "extra-border-radius": 4px,
     "extra-icon-size": 0.75rem,
   ),
   "medium": (
+    // 40px = 2.5rem
     "size": 2.5rem,
-    // 40px
     "border-radius": 6px,
+    // 24px = 1.5rem
     "icon-size": 1.5rem,
-    // 24px
+    // 28px = 1.75rem
     "logo-size": 1.75rem,
-    // 28px
+    // 20px = 1.25rem
     "extra-size": 1.25rem,
-    // 20px
     "extra-border-radius": 5px,
+    // 12px = .75rem
     "extra-icon-size": 0.75rem,
-    // 12px
   ),
   "large": (
+    // 48px = 3rem
     "size": 3rem,
-    // 48px
     "border-radius": 6px,
+    // 24px = 1.5rem
     "icon-size": 1.5rem,
-    // 24px
+    // 32px = 2rem
     "logo-size": 2rem,
-    // 32px
+    // 24px = 1.5rem
     "extra-size": 1.5rem,
-    // 24px
     "extra-border-radius": 5px,
     "extra-icon-size": 1rem,
   ),

packages/components/src/styles/components/link/standalone.scss

@@ -49,28 +49,28 @@ $hds-link-standalone-border-width: 1px;
 // these values later may come from the design tokens
 $hds-link-standalone-size-props: (
   "small": (
+    // 13px = 0.8125rem
     "font-size": 0.8125rem,
-    // 13px;
+    // 12px = 0.75rem
     "icon-size": 0.75rem,
-    // 12px
+    // 16px ~= 1.231
     "line-height": 1.231,
-    // ~16px
   ),
   "medium": (
+    // 14px = 0.875rem
     "font-size": 0.875rem,
-    // 14px
+    // 16px = 1rem
     "icon-size": 1rem,
-    // 16px
+    // 16px ~= 1.143
     "line-height": 1.143,
-    // ~16px
   ),
   "large": (
+    // 16px = 1rem
     "font-size": 1rem,
-    // 16px
+    // 24px = 1.5rem
     "icon-size": 1.5rem,
-    // 24px
+    // 24px = 1.5
     "line-height": 1.5,
-    // 24px
   ),
 );
 

packages/components/src/styles/components/pagination.scss

@@ -155,8 +155,8 @@ $hds-pagination-layout-breakpoint: 1000px;
 
   // indicator underline
   // notice: in all these calculations we have to take in account that there's a 1px transparent border
+  // notice: we use the `::before` for the focus
   &::after {
-    // notice: we use the `::before` for the focus
     position: absolute;
     right: calc(var(--token-pagination-nav-indicator-spacing) - 1px);
     bottom: -1px;

packages/components/src/styles/components/side-nav/content.scss

@@ -58,26 +58,27 @@
 
 // LIST (root elements)
 
-.hds-side-nav__list-wrapper, // <nav> element
+// <nav> element
+.hds-side-nav__list-wrapper,
+// <ul> element
 .hds-side-nav__list {
-  // <ul> element
   margin: 0;
   padding: 0;
 }
 
 // ITEM (generic container)
 
+// <li> element
 .hds-side-nav__list-item {
-  // <li> element
   list-style-type: none;
 
   & + & {
     margin-top: var(--token-side-nav-body-list-item-spacing-vertical);
   }
 }
 
+// <a>/<button> element (via Hds::Interactive)
 .hds-side-nav__list-item-link {
-  // <a>/<button> element (via Hds::Interactive)
   display: flex;
   gap: var(--token-side-nav-body-list-item-content-spacing-horizontal);
   align-items: center;

packages/components/src/styles/mixins/_button.scss

@@ -13,46 +13,46 @@ $hds-button-focus-border-width: 3px;
 // these values later may come from the design tokens
 $hds-button-size-props: (
   "small": (
+    // 13px = 0.8125rem
     "font-size": 0.8125rem,
-    // 13px;
+    // 14px = 0.875rem; we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)
     "line-height": 0.875rem,
-    // 14px - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)
+    // 28px = 1.75rem
     "min-height": 1.75rem,
-    // 28px
+    // 6px = 0.375rem; here we're taking into account the 1px border
     "padding-vertical": 0.375rem,
-    // 6px - here we're taking into account the 1px border
+    // 11px = 0.6875rem; here we're taking into account the 1px border
     "padding-horizontal": 0.6875rem,
-    // 11px - here we're taking into account the 1px border
+    // 12px = 0.75rem
     "icon-size": 0.75rem,
-    // 12px
   ),
   "medium": (
+    // 14px =  0.875rem
     "font-size": 0.875rem,
-    // 14px
+    // 16px = 1rem
     "line-height": 1rem,
-    // 16px
+    // 36px = 2.25rem
     "min-height": 2.25rem,
-    // 36px
+    // 9px = 0.5625rem; here we're taking into account the 1px border
     "padding-vertical": 0.5625rem,
-    // 9px - here we're taking into account the 1px border
+    // 15px = 0.9375rem; here we're taking into account the 1px border
     "padding-horizontal": 0.9375rem,
-    // 15px - here we're taking into account the 1px border
-    "icon-size": 1rem,
     // 16px
+    "icon-size": 1rem,
   ),
   "large": (
+    // 16px = 1rem
     "font-size": 1rem,
-    // 16px
+    // 24px = 1.5rem
     "line-height": 1.5rem,
-    // 24px
+    // 48px = 3rem
     "min-height": 3rem,
-    // 48px
+    // 11px = 0.6875rem; here we're taking into account the 1px border
     "padding-vertical": 0.6875rem,
-    // 11px - here we're taking into account the 1px border
+    // 19px = 1.1875rem; here we're taking into account the 1px border
     "padding-horizontal": 1.1875rem,
-    // 19px - here we're taking into account the 1px border
+    // 24px = 1.5rem
     "icon-size": 1.5rem,
-    // 24px
   ),
 );