Merge pull request #12294 from Armansiddiqui9/refactor-css

refactor: replace hardcoded spacing values with semantic tokens

Author: lokesh

bundlesize.config.json

@@ -67,7 +67,7 @@
     },
     {
       "path": "static/build/css/page-book.css",
-      "maxSize": "15.5KB"
+      "maxSize": "15.7KB"
     },
     {
       "path": "static/build/css/page-edit.css",

static/css/base/common.css

@@ -27,7 +27,7 @@ td {
   padding: 0;
 }
 h1 {
-  margin: 20px 0;
+  margin: var(--spacing-stack-lg) 0;
 }
 body,
 p,
@@ -81,8 +81,8 @@ h6 {
   font-weight: 600;
 }
 div.head {
-  margin-bottom: 10px;
-  margin-top: 20px;
+  margin-bottom: var(--spacing-stack-sm);
+  margin-top: var(--spacing-stack-lg);
 }
 div.head span {
   font-size: var(--font-size-label-medium);

static/css/base/dl.css

@@ -9,20 +9,20 @@ dt {
   clear: both;
 }
 dl {
-  margin: 10px 0;
+  margin: var(--spacing-stack-sm) 0;
 }
 dl:after {
   content: "";
   display: block;
   clear: both;
 }
 dl dt {
-  padding: 0 15px 10px 0;
+  padding: 0 var(--spacing-inset-md) var(--spacing-inset-sm) 0;
   width: 120px;
 }
 dd {
   max-width: 270px;
 }
 dd + dd {
-  padding-left: 8px;
+  padding-left: var(--spacing-inset-sm);
 }

static/css/base/headings.css

@@ -39,7 +39,7 @@ h2.publisher {
   background-color: var(--lightest-grey);
 }
 h2.edition-title {
-  margin: 7px 0 0;
+  margin: var(--spacing-stack-sm) 0 0;
   color: var(--grey);
   font-family: var(--font-family-title);
   font-weight: normal;
@@ -73,8 +73,8 @@ h3.Question {
   font-size: 1.2em;
   font-weight: normal;
   color: var(--brown);
-  margin-top: 10px;
-  padding-top: 10px;
+  margin-top: var(--spacing-stack-sm);
+  padding-top: var(--spacing-inset-sm);
   border-top: 1px dotted var(--lighter-grey);
 }
 
@@ -96,7 +96,7 @@ h4.facetHead {
   padding: 0;
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: var(--spacing-inline-sm);
 }
 h4.facetHead .facet-icon {
   flex-shrink: 0;
@@ -107,6 +107,7 @@ h4.facetHead span.merge {
   font-size: var(--font-size-label-small);
   font-weight: normal !important;
   text-transform: none !important;
+  /* Not tokenized: must exceed the 16px icon width to avoid text overlap */
   padding-left: 22px;
   background: url(/images/icons/icon_merge-sm.png) no-repeat 0 0;
   min-height: 16px;

static/css/base/helpers-common.css

@@ -29,7 +29,7 @@
 
 #offline-info {
   text-align: center;
-  padding: 10px 5px;
+  padding: var(--spacing-inset-sm) var(--spacing-inset-xs);
   display: none;
   background-color: var(--grey);
   color: var(--white);
@@ -43,7 +43,7 @@
 .clearfix {
   width: 100%;
   clear: both;
-  padding: 5px;
+  padding: var(--spacing-inset-xs);
 }
 /* To be used for shifting content so its accessible to screen readers
    but not visible to anyone else. */
@@ -61,5 +61,5 @@ a.hoverlink {
   color: var(--dark-green);
   font-size: var(--font-size-label-small);
   text-align: center;
-  padding: 5px 0 0;
+  padding: var(--spacing-inset-xs) 0 0;
 }

static/css/base/helpers-misc.css

@@ -50,7 +50,7 @@ button.larger {
 
 .adminOnly {
   background-color: var(--orange) !important;
-  padding: 4px;
+  padding: var(--spacing-inset-xs);
   border-radius: 4px;
 }
 
@@ -74,7 +74,7 @@ button.larger {
 }
 
 .valid {
-  padding: 5px 0 0 29px !important;
+  padding: var(--spacing-inset-xs) 0 0 29px !important;
 }
 
 .noborder {

static/css/components/admin-table.css

@@ -1,17 +1,17 @@
 .measurements {
   width: 100%;
-  margin: 10px 0 30px;
+  margin: var(--spacing-stack-sm) 0 var(--spacing-stack-xl);
   color: var(--dark-grey);
 }
 .measurements th {
   font-family: var(--font-family-body);
   font-size: 0.6875em;
   text-align: right;
   vertical-align: bottom;
-  padding: 0 8px;
+  padding: 0 var(--spacing-inset-sm);
 }
 .measurements td {
-  padding: 8px;
+  padding: var(--spacing-inset-sm);
   text-align: right;
   vertical-align: bottom;
   font-size: 0.75em;

static/css/components/author-infobox.css

@@ -3,8 +3,8 @@
   line-height: 1.5em;
   background-color: var(--grey-fafafa);
   border-radius: 5px;
-  padding: 10px;
-  margin-bottom: 3px;
+  padding: var(--spacing-inset-sm);
+  margin-bottom: var(--spacing-stack-xs);
   border-bottom: 1px solid var(--light-beige);
 }
 .infobox .illustration {
@@ -18,17 +18,17 @@
   background-color: transparent;
 }
 .infobox tr td:first-child {
-  padding-right: 5px;
+  padding-right: var(--spacing-inset-xs);
 }
 .infobox table {
   /* Without this page-user.css makes the table very compact */
   border-collapse: unset;
-  border-spacing: 3px;
+  border-spacing: var(--spacing-inset-xs);
 }
 .infobox .profile-icon-container {
   display: flex;
   justify-content: center;
-  gap: 0.25rem;
+  gap: var(--spacing-inline-sm);
   flex-wrap: wrap;
 }
 .infobox .profile-icon-container .profile-icon {
@@ -37,5 +37,5 @@
 }
 .infobox-name {
   text-align: center;
-  margin-bottom: 10px;
+  margin-bottom: var(--spacing-stack-sm);
 }

static/css/components/book.css

@@ -3,7 +3,7 @@
 .book > .cta-button-group,
 .book > .cta-btn,
 .book form .cta-button-group {
-  margin-top: 10px;
+  margin-top: var(--spacing-stack-sm);
 }
 
 .book .book-cover {

static/css/components/buttonBtn.css

@@ -4,7 +4,7 @@
 /* This button should be used for now on */
 .btn {
   text-align: center;
-  padding: 5px 10px;
+  padding: var(--spacing-inset-xs) var(--spacing-inset-sm);
 }
 
 .btn.primary {
@@ -22,7 +22,7 @@ a.btn {
 
 /* These should be in their own chip.css file */
 .chip {
-  padding: 4px 12px;
+  padding: var(--spacing-inset-xs) var(--spacing-inset-md);
   border: 1px solid var(--mid-grey);
   border-radius: 16px;
   user-select: none;