Refactor link-box component: replace .less imports with inline .css imports and delete the link-box.less file to streamline CSS usage.

Author: lokesh

static/css/components/link-box.css

@@ -0,0 +1,25 @@
+/**
+ * Link Box
+ * https://github.com/internetarchive/openlibrary/wiki/Design-Pattern-Library#linkbox
+ *
+ * Migrated from link-box.less to native CSS
+ */
+
+.link-box {
+  font-size: var(--font-size-body-medium);
+  white-space: normal;
+  word-wrap: break-word;
+}
+
+.link-box h3 {
+  color: var(--grey);
+  margin: 0;
+  padding: 0;
+  text-transform: uppercase;
+  display: inline;
+  font-size: var(--font-size-label-medium);
+}
+
+.link-box.link-box--with-header h3 {
+  display: block;
+}

static/css/components/link-box.less

@@ -181,7 +181,7 @@ a.section-anchor {
 }
 
 @import (less) "components/readerStats.less";
-@import (less) "components/link-box.less";
+@import (inline) "components/link-box.css";
 
 // Right  (editionTools)
 div.editionTools {

static/css/components/work.less

@@ -761,7 +761,7 @@ div.verify {
 /* LANGUAGE DROPDOWN */
 @import (less) "components/language.less";
 
-@import (less) "components/link-box.less";
+@import (inline) "components/link-box.css";
 
 // Various templates
 .content {

static/css/legacy.less

@@ -5,3 +5,6 @@
 @import (less) "z-index.less";
 @import (less) "border-radius.less";
 @import (less) "borders.less";
+
+// CSS Custom Properties for native CSS components (migration from Less)
+@import (inline) "generated-custom-properties.css";

static/css/less/index.less

@@ -13,7 +13,7 @@
 @import (less) "components/page-heading-search-box.less";
 @import (less) "components/carousel.less";
 @import (less) "components/chart.less";
-@import (less) "components/link-box.less";
+@import (inline) "components/link-box.css";
 @import (less) "components/widget-box.less";
 @import (less) "components/listLists.less";
 @import (less) "components/footer.less";