Merge pull request #352 from liam-hq/web-font-inter

💄 Update `font-family` settings across ERD Renderer components

frontend/.changeset/breezy-pianos-listen.md

@@ -0,0 +1,7 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/ui": patch
+"@liam-hq/cli": patch
+---
+
+:lipstick: Update font-family settings across ERD Renderer components

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Columns/Columns.module.css

@@ -6,7 +6,6 @@
   padding: var(--spacing-2);
   border-bottom: 1px solid var(--global-border);
   color: var(--global-foreground);
-  font-family: var(--main-font);
   font-size: var(--font-size-2);
   font-style: normal;
   font-weight: 500;

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Columns/ColumnsItem/ColumnsItem.module.css

@@ -6,7 +6,6 @@
 
 .heading {
   color: var(--global-foreground);
-  font-family: var(--main-font);
   font-size: var(--font-size-3);
   font-style: normal;
   font-weight: 400;
@@ -15,7 +14,6 @@
 
 .comment {
   color: var(--color-white-alpha-70);
-  font-family: var(--main-font);
   font-size: var(--font-size-2);
   font-style: normal;
   font-weight: 400;
@@ -44,7 +42,6 @@
   padding: var(--spacing-1) var(--spacing-2);
   border-right: solid 1px var(--global-border);
   color: var(--color-white-alpha-70);
-  font-family: var(--main-font);
   font-size: var(--font-size-2);
   font-style: normal;
   font-weight: 400;

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Comment/Comment.module.css

@@ -8,7 +8,6 @@
   border-radius: var(--border-radius-base);
   background: var(--pane-muted-background);
   color: var(--color-white-alpha-70);
-  font-family: var(--main-font);
   font-size: var(--font-size-3);
   font-style: normal;
   font-weight: 400;

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Indices/Indices.module.css

@@ -10,7 +10,6 @@
   align-items: center;
   gap: var(--spacing-1);
   color: var(--global-foreground);
-  font-family: var(--main-font);
   font-size: var(--font-size-3);
   font-style: normal;
   font-weight: 400;
@@ -29,7 +28,6 @@
 
 .listItem {
   color: var(--color-white-alpha-70);
-  font-family: var(--main-font);
   font-size: var(--font-size-2);
   font-style: normal;
   font-weight: 400;

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/RelatedTables/RelatedTables.module.css

@@ -13,7 +13,6 @@
 
 .heading {
   color: var(--global-foreground);
-  font-family: var(--main-font);
   font-size: var(--font-size-3);
   font-style: normal;
   font-weight: 400;

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/TableDetail.module.css

@@ -8,6 +8,7 @@
   box-shadow: 0px 4px 20px 0px var(--shadow-basic-shadow, #000);
   word-break: break-all;
   list-style-position: outside;
+  font-family: var(--main-font);
 }
 
 .header {
@@ -21,7 +22,6 @@
 
 .heading {
   color: var(--global-foreground);
-  font-family: var(--main-font);
   font-size: var(--font-size-2);
   font-style: normal;
   font-weight: 500;

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Unique/Unique.module.css

@@ -10,7 +10,6 @@
   align-items: center;
   gap: var(--spacing-1);
   color: var(--global-foreground);
-  font-family: var(--main-font);
   font-size: var(--font-size-3);
   font-style: normal;
   font-weight: 400;
@@ -29,7 +28,6 @@
 
 .listItem {
   color: var(--color-white-alpha-70);
-  font-family: var(--main-font);
   font-size: var(--font-size-2);
   font-style: normal;
   font-weight: 400;

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/ShowModeMenu/ShowModeMenu.module.css

@@ -7,7 +7,6 @@
 
 .label {
   color: var(--overlay-60);
-  font-family: var(--main-font);
   font-size: var(--font-size-3);
   font-style: normal;
   font-weight: 400;

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/Toolbar.module.css

@@ -26,3 +26,8 @@
   box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px
     rgba(22, 23, 24, 0.2);
 }
+
+/* https://github.com/radix-ui/primitives/issues/2908 */
+:global([data-radix-popper-content-wrapper]) {
+  font-family: var(--main-font);
+}

frontend/packages/erd-core/src/components/ERDRenderer/ERDRenderer.module.css

@@ -5,6 +5,8 @@
   /* NOTE: workaround for that drawer with modal={false} does not work */
   /* ref: https://github.com/emilkowalski/vaul/issues/492 */
   pointer-events: all;
+
+  font-family: var(--main-font);
 }
 
 .mainWrapper {

frontend/packages/ui/src/styles/variables.css

@@ -1,5 +1,6 @@
 /* https://fonts.google.com/specimen/IBM+Plex+Mono */
-@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');
+/* https://fonts.google.com/specimen/Inter */
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 
 :root {
   --default-timing-function: ease-out;