feat: use Carbon font tokens

bluecatengineering · Nov 29, 2023 · 6f27491 · 6f27491
1 parent ea0499c
commit 6f27491
Show file tree

Hide file tree

Showing 38 changed files with 173 additions and 159 deletions.
diff --git a/.storybook/preview.less b/.storybook/preview.less
@@ -34,7 +34,7 @@
 }
 
 body {
-	@font-14-400();
+	@body-compact-01();
 }
 
 #storybook-root {

diff --git a/packages/pelagos/__tests__/components/__snapshots__/EditorDetailsPanel-test.js.snap b/packages/pelagos/__tests__/components/__snapshots__/EditorDetailsPanel-test.js.snap
@@ -6,27 +6,31 @@ exports[`EditorDetailsPanel rendering renders expected elements when showButtons
   className="EditorDetailsPanel"
   id="test"
 >
-  <IconButton
-    aria-label="Close"
-    className="EditorDetailsPanel__close"
-    icon={
-      {
-        "icon": [],
-        "iconName": "xmark-thin",
-      }
-    }
-    id="closeDetailsPanelBtn"
-    size="large"
-    tooltipPlacement="left"
-    tooltipText="Close"
-    type="ghost"
-  />
-  <h2
-    className="EditorDetailsPanel__title"
-    id="detailsPanelTitle"
+  <div
+    className="EditorDetailsPanel__header"
   >
-    Test
-  </h2>
+    <h2
+      className="EditorDetailsPanel__title"
+      id="detailsPanelTitle"
+    >
+      Test
+    </h2>
+    <IconButton
+      aria-label="Close"
+      className="EditorDetailsPanel__close"
+      icon={
+        {
+          "icon": [],
+          "iconName": "xmark-thin",
+        }
+      }
+      id="closeDetailsPanelBtn"
+      size="large"
+      tooltipPlacement="left"
+      tooltipText="Close"
+      type="ghost"
+    />
+  </div>
   <React.Fragment>
     cloneWithClassName
   </React.Fragment>
@@ -39,27 +43,31 @@ exports[`EditorDetailsPanel rendering renders expected elements when showButtons
   className="EditorDetailsPanel"
   id="test"
 >
-  <IconButton
-    aria-label="Close"
-    className="EditorDetailsPanel__close"
-    icon={
-      {
-        "icon": [],
-        "iconName": "xmark-thin",
-      }
-    }
-    id="closeDetailsPanelBtn"
-    size="large"
-    tooltipPlacement="left"
-    tooltipText="Close"
-    type="ghost"
-  />
-  <h2
-    className="EditorDetailsPanel__title"
-    id="detailsPanelTitle"
+  <div
+    className="EditorDetailsPanel__header"
   >
-    Test
-  </h2>
+    <h2
+      className="EditorDetailsPanel__title"
+      id="detailsPanelTitle"
+    >
+      Test
+    </h2>
+    <IconButton
+      aria-label="Close"
+      className="EditorDetailsPanel__close"
+      icon={
+        {
+          "icon": [],
+          "iconName": "xmark-thin",
+        }
+      }
+      id="closeDetailsPanelBtn"
+      size="large"
+      tooltipPlacement="left"
+      tooltipText="Close"
+      type="ghost"
+    />
+  </div>
   <React.Fragment>
     cloneWithClassName
     <DefaultDetailsButtons
@@ -84,27 +92,31 @@ exports[`EditorDetailsPanel rendering renders expected elements with two childre
   className="EditorDetailsPanel"
   id="test"
 >
-  <IconButton
-    aria-label="Close"
-    className="EditorDetailsPanel__close"
-    icon={
-      {
-        "icon": [],
-        "iconName": "xmark-thin",
-      }
-    }
-    id="closeDetailsPanelBtn"
-    size="large"
-    tooltipPlacement="left"
-    tooltipText="Close"
-    type="ghost"
-  />
-  <h2
-    className="EditorDetailsPanel__title"
-    id="detailsPanelTitle"
+  <div
+    className="EditorDetailsPanel__header"
   >
-    Test
-  </h2>
+    <h2
+      className="EditorDetailsPanel__title"
+      id="detailsPanelTitle"
+    >
+      Test
+    </h2>
+    <IconButton
+      aria-label="Close"
+      className="EditorDetailsPanel__close"
+      icon={
+        {
+          "icon": [],
+          "iconName": "xmark-thin",
+        }
+      }
+      id="closeDetailsPanelBtn"
+      size="large"
+      tooltipPlacement="left"
+      tooltipText="Close"
+      type="ghost"
+    />
+  </div>
   <React.Fragment>
     cloneWithClassName
     cloneWithClassName
@@ -118,27 +130,31 @@ exports[`EditorDetailsPanel rendering renders expected elements with two childre
   className="EditorDetailsPanel"
   id="test"
 >
-  <IconButton
-    aria-label="Close"
-    className="EditorDetailsPanel__close"
-    icon={
-      {
-        "icon": [],
-        "iconName": "xmark-thin",
-      }
-    }
-    id="closeDetailsPanelBtn"
-    size="large"
-    tooltipPlacement="left"
-    tooltipText="Close"
-    type="ghost"
-  />
-  <h2
-    className="EditorDetailsPanel__title"
-    id="detailsPanelTitle"
+  <div
+    className="EditorDetailsPanel__header"
   >
-    Test
-  </h2>
+    <h2
+      className="EditorDetailsPanel__title"
+      id="detailsPanelTitle"
+    >
+      Test
+    </h2>
+    <IconButton
+      aria-label="Close"
+      className="EditorDetailsPanel__close"
+      icon={
+        {
+          "icon": [],
+          "iconName": "xmark-thin",
+        }
+      }
+      id="closeDetailsPanelBtn"
+      size="large"
+      tooltipPlacement="left"
+      tooltipText="Close"
+      type="ghost"
+    />
+  </div>
   <React.Fragment>
     cloneWithClassName
   </React.Fragment>

diff --git a/packages/pelagos/__tests__/table/__snapshots__/TableTitle-test.js.snap b/packages/pelagos/__tests__/table/__snapshots__/TableTitle-test.js.snap
@@ -2,9 +2,10 @@
 
 exports[`TableTitle rendering renders expected elements 1`] = `
 <div
-  className="Table__title"
+  className="Table__header"
 >
   <h2
+    className="Table__title"
     id="test"
   >
     Test title

diff --git a/packages/pelagos/less/headers.less b/packages/pelagos/less/headers.less
@@ -15,28 +15,26 @@
 	}
 
 	h1 {
-		@font-24-400();
+		@heading-04();
 	}
 
 	h2 {
-		@font-18-400();
+		@heading-03();
 	}
 
 	h3 {
-		@font-16-600();
+		@heading-02();
 	}
 
 	h4 {
-		@font-14-600();
+		@heading-compact-02();
 	}
 
 	h5 {
-		@font-12-600();
-		color: var(--text-secondary);
+		@heading-01();
 	}
 
 	h6 {
-		@font-10-600();
-		color: var(--text-secondary);
+		@heading-compact-01();
 	}
 }
diff --git a/packages/pelagos/less/inputs.less b/packages/pelagos/less/inputs.less
@@ -16,7 +16,7 @@
 	}
 
 	::placeholder {
-		@font-12-400();
+		@body-compact-01();
 		color: var(--text-placeholder);
 
 		@media print {

diff --git a/packages/pelagos/src/components/BlockHeader.js b/packages/pelagos/src/components/BlockHeader.js
@@ -3,7 +3,7 @@ import {t} from '@bluecateng/l10n.macro';
 
 import './BlockHeader.less';
 
-/** Header for a form section. */
+/** Header for a form section, usually as a Collapsible title. */
 const BlockHeader = ({className, header, configured}) => (
 	<h2 className={`BlockHeader${className ? ` ${className}` : ''}`}>
 		{header}

diff --git a/packages/pelagos/src/components/BlockHeader.less b/packages/pelagos/src/components/BlockHeader.less
@@ -3,19 +3,19 @@
 
 @layer pelagos {
 	.BlockHeader {
+		@body-01();
 		display: flex;
 		flex-direction: row;
 		align-items: center;
 	}
 
 	.BlockHeader__indicator {
-		@font-10-400();
+		@helper-text-01();
 		color: var(--text-helper);
 		margin-left: @sp-12;
 	}
 
 	.BlockHeader--configured {
-		@font-12-400();
 		color: var(--text-secondary);
 	}
 }
diff --git a/packages/pelagos/src/components/Breadcrumb.less b/packages/pelagos/src/components/Breadcrumb.less
@@ -7,7 +7,7 @@
 	}
 
 	.Breadcrumb__crumbs {
-		@font-12-400();
+		@body-compact-01();
 		color: var(--text-primary);
 		display: block;
 	}
@@ -26,7 +26,7 @@
 	.Breadcrumb__back {
 		position: absolute;
 		left: -32px;
-		top: -8px;
+		top: -7px;
 	}
 
 	@media print {

diff --git a/packages/pelagos/src/components/Button.less b/packages/pelagos/src/components/Button.less
@@ -6,7 +6,7 @@
 @layer pelagos {
 	.Button {
 		@focus-visible();
-		@font-14-600();
+		@body-compact-01();
 		display: inline-flex;
 		align-items: center;
 		white-space: nowrap;

diff --git a/packages/pelagos/src/components/Calendar.less b/packages/pelagos/src/components/Calendar.less
@@ -22,8 +22,7 @@
 	}
 
 	.Calendar__dayLabel {
-		@font-10-600();
-		color: var(--text-secondary);
+		@body-compact-01();
 	}
 
 	.Calendar__cell {

diff --git a/packages/pelagos/src/components/Collapsible.less b/packages/pelagos/src/components/Collapsible.less
@@ -21,6 +21,7 @@
 	}
 
 	.Collapsible__title {
+		@body-01();
 		flex: 1;
 		text-align: left;
 	}

diff --git a/packages/pelagos/src/components/DetailRegion.less b/packages/pelagos/src/components/DetailRegion.less
@@ -13,7 +13,7 @@
 		}
 
 		&__title {
-			@font-12-400();
+			@label-01();
 			color: var(--text-secondary);
 		}
 	}

diff --git a/packages/pelagos/src/components/Dialog.less b/packages/pelagos/src/components/Dialog.less
@@ -108,7 +108,7 @@
 		}
 
 		&__title {
-			@font-16-600();
+			@heading-03();
 			@ellipsis();
 			padding: @sp-16;
 			border-bottom: 1px solid var(--border-subtle);
-Original file line number
+Diff line change
@@ Expand Up / @@ -34,7 +34,7 @@ @@
     }
     body {
-    	@font-14-400();
+    	@body-compact-01();
     }
     #storybook-root {
@@ Expand Down @@