feat: ensure all components inherit font-family (#8388)

**Related Issue:** #7175 #9205 ## Summary All components now inherit from the font-family set at root and that font-family is inherited from tokens. This also updates tailwind to use the font-family token --------- Co-authored-by: JC Franco <jfranco@esri.com>
Esri · Apr 26, 2024 · 90f8923 · 90f8923
1 parent 425f3fb
commit 90f8923
Show file tree

Hide file tree

Showing 74 changed files with 150 additions and 137 deletions.
diff --git a/packages/calcite-components/.storybook/main.ts b/packages/calcite-components/.storybook/main.ts
@@ -56,7 +56,7 @@ module.exports = {
           closable
           kind="warning"
           scale="l"
-          style="font-family: var(--calcite-sans-family)"
+          style="font-family: var(--calcite-font-family)"
         >
           <div slot="title">
             This storybook is on the current @next version and is meant for internal, testing purposes only.

diff --git a/packages/calcite-components/.storybook/preview-head.html b/packages/calcite-components/.storybook/preview-head.html
@@ -5,7 +5,7 @@
 <!-- docs fixes for displaying components -->
 <style>
   body {
-    font-family: var(--calcite-sans-family);
+    font-family: var(--calcite-font-family);
     color: var(--calcite-color-text-1);
     background-color: var(--calcite-color-background);
   }

diff --git a/packages/calcite-components/calcite-preset.ts b/packages/calcite-components/calcite-preset.ts
@@ -74,8 +74,8 @@ export default {
     },
     fontFamily: {
       // assets/styles/_type
-      sans: "var(--calcite-sans-family)",
-      mono: "var(--calcite-code-family)",
+      sans: "var(--calcite-font-family)",
+      mono: "var(--calcite-font-family-code)",
       inherit: "inherit",
     },
     fontSize: {

diff --git a/packages/calcite-components/src/assets/styles/global.scss b/packages/calcite-components/src/assets/styles/global.scss
@@ -15,18 +15,18 @@
   @extend %type-vars;
   @include floating-ui-base();
   @include animation-base();
-
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
   --calcite-popover-z-index: var(--calcite-z-index-popup);
   --calcite-border-radius: var(--calcite-border-radius-round, 4px);
   --calcite-border-radius-base: 0;
   --calcite-offset-invert-focus: 0; // should be 0 or 1
   --calcite-panel-width-multiplier: 1;
   --calcite-ui-icon-color: currentColor;
 
-  @apply font-sans;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  font-family: var(--calcite-font-family);
 }
 
 .calcite-mode-auto {

diff --git a/packages/calcite-components/src/components/action/action.scss b/packages/calcite-components/src/components/action/action.scss
@@ -44,8 +44,8 @@
     items-center
     justify-start
     border-none
-    font-sans
-    font-medium;
+    font-medium
+    font-sans;
 
   text-align: unset;
   flex: 1 0 auto;
@@ -161,12 +161,15 @@
   @apply text-color-1 fill-color-1 bg-foreground-3;
 }
 
-:host([active]) .button:active {
-  @apply bg-foreground-1;
+:host([appearance="transparent"]) .button {
+  @apply bg-transparent
+    transition-shadow
+    duration-150
+    ease-in-out;
 }
 
-:host([appearance="transparent"]) .button {
-  @apply bg-transparent;
+:host([active]) .button:active {
+  @apply bg-foreground-1;
 }
 
 :host([appearance="transparent"][active]) .button,
@@ -187,6 +190,7 @@
 :host([loading][appearance="solid"]) .button:hover,
 :host([loading][appearance="solid"]) .button:focus {
   @apply bg-foreground-1;
+
   .text-container {
     @apply opacity-disabled;
   }
@@ -209,13 +213,6 @@
   @apply opacity-disabled bg-foreground-3;
 }
 
-:host([appearance="transparent"]) .button {
-  @apply bg-transparent
-    transition-shadow
-    duration-150
-    ease-in-out;
-}
-
 .indicator-with-icon {
   @include action-indicator();
 }

diff --git a/packages/calcite-components/src/components/block-section/block-section.scss b/packages/calcite-components/src/components/block-section/block-section.scss
@@ -18,14 +18,20 @@
 }
 
 .toggle {
-  @apply text-color-2
+  @apply font-sans
+    text-color-2
     w-full
     border-0
     bg-transparent
-    font-sans
     font-medium;
 }
 
+.toggle--switch {
+  .status-icon {
+    margin-inline-start: theme("margin.2");
+  }
+}
+
 .toggle--switch,
 .section-header {
   @apply text-n1
@@ -72,12 +78,6 @@
   }
 }
 
-.toggle--switch {
-  .status-icon {
-    margin-inline-start: theme("margin.2");
-  }
-}
-
 .toggle--switch__content {
   @apply flex flex-auto items-center;
 }

diff --git a/packages/calcite-components/src/components/block/block.scss b/packages/calcite-components/src/components/block/block.scss
@@ -37,7 +37,7 @@
 }
 
 .toggle {
-  @apply font-inherit
+  @apply font-sans
     focus-base
     m-0
     flex

diff --git a/packages/calcite-components/src/components/list-item-group/list-item-group.scss b/packages/calcite-components/src/components/list-item-group/list-item-group.scss
@@ -9,7 +9,7 @@
 @include disabled();
 
 .container {
-  @apply text-n1 text-color-2 m-0 flex flex-1 p-3 font-sans font-medium;
+  @apply text-n1 text-color-2 m-0 flex flex-1 p-3 font-medium;
 }
 
 .heading {

diff --git a/packages/calcite-components/src/components/list-item/list-item.scss b/packages/calcite-components/src/components/list-item/list-item.scss
@@ -28,7 +28,7 @@
   @apply bg-foreground-1
   box-border
   flex
-  flex-1 font-sans;
+  flex-1;
   * {
     @apply box-border;
   }
@@ -74,7 +74,6 @@
     select-none
     flex
     flex-auto
-    font-sans
     font-normal
     items-stretch
     p-0;

diff --git a/packages/calcite-components/src/components/navigation-user/navigation-user.scss b/packages/calcite-components/src/components/navigation-user/navigation-user.scss
@@ -3,14 +3,14 @@
   & .button {
     background-color: transparent;
     border: none;
-    @apply flex
+    @apply font-sans
+      flex
       m-0
       items-center
       justify-center
       cursor-pointer
       transition-default
       focus-base
-      font-sans
       text-0h;
     border-block-end: 2px solid transparent;
   }
@@ -29,14 +29,6 @@
   @apply bg-foreground-3 text-color-1;
 }
 
-calcite-avatar {
-  @apply px-4;
-}
-
-calcite-avatar ~ .text-container {
-  @apply ps-0;
-}
-
 :host([active]) .button {
   @apply text-color-1 border-color-brand;
   --calcite-ui-icon-color: var(--calcite-color-brand);
@@ -50,6 +42,14 @@ calcite-avatar ~ .text-container {
   mt-0.5;
 }
 
+calcite-avatar {
+  @apply px-4;
+}
+
+calcite-avatar ~ .text-container {
+  @apply ps-0;
+}
+
 .full-name {
   @apply text-0
   ms-0

diff --git a/packages/calcite-components/src/components/stack/stack.scss b/packages/calcite-components/src/components/stack/stack.scss
@@ -15,7 +15,6 @@
   @apply text-color-2
   flex
   flex-auto
-  font-sans
   font-normal
   items-stretch;
 }
@@ -45,6 +44,10 @@
 .content-start,
 .content-end {
   @apply flex-initial;
+
+  ::slotted(calcite-icon) {
+    @apply self-center mx-3;
+  }
 }
 
 .actions-start,
@@ -54,13 +57,6 @@
   @apply flex items-center;
 }
 
-.content-start,
-.content-end {
-  ::slotted(calcite-icon) {
-    @apply self-center mx-3;
-  }
-}
-
 .actions-start,
 .actions-end {
   ::slotted(calcite-action),

diff --git a/packages/calcite-components/src/components/text-area/text-area.scss b/packages/calcite-components/src/components/text-area/text-area.scss
@@ -6,16 +6,16 @@
 }
 
 textarea {
-  @apply text-color-1
-  relative
-  block
-  bg-foreground-1
-  box-border
-  border-color-input
-  border
-  font-sans
-  w-full
-  m-0;
+  @apply font-sans
+    text-color-1
+    relative
+    block
+    bg-foreground-1
+    box-border
+    border-color-input
+    border
+    w-full
+    m-0;
   min-inline-size: theme("spacing.48");
   border-block-end: 1px solid var(--calcite-color-border-3);
   @media screen and (max-width: 480px) {
@@ -86,9 +86,7 @@ textarea {
     @apply py-1
     px-2;
   }
-}
 
-:host([scale="s"]) {
   textarea,
   .footer,
   .character-limit {
@@ -107,9 +105,7 @@ textarea {
     px-3;
     min-block-size: 2.25rem;
   }
-}
 
-:host([scale="m"]) {
   textarea,
   .footer,
   .character-limit {
@@ -129,9 +125,7 @@ textarea {
     px-4;
     min-block-size: 2.75rem;
   }
-}
 
-:host([scale="l"]) {
   textarea,
   .footer,
   .character-limit {

diff --git a/packages/calcite-components/src/demos/_assets/demos.css b/packages/calcite-components/src/demos/_assets/demos.css
@@ -80,7 +80,7 @@ main {
 
 .calcite-comp {
   color: var(--calcite-color-text-3);
-  font-family: var(--calcite-sans-family);
+  font-family: var(--calcite-font-family);
   font-size: var(--calcite-font-size-0);
   font-weight: var(--calcite-font-weight-medium);
 }
diff --git a/packages/calcite-components/src/demos/accordion.html b/packages/calcite-components/src/demos/accordion.html
@@ -15,7 +15,7 @@
         flex: 0 0 20%;
         margin: 0 25px;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
       }

diff --git a/packages/calcite-components/src/demos/action.html b/packages/calcite-components/src/demos/action.html
@@ -21,7 +21,7 @@
       .child-action-bar {
         margin: 10px 25px;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
         padding: 0 10px;

diff --git a/packages/calcite-components/src/demos/alert.html b/packages/calcite-components/src/demos/alert.html
@@ -55,7 +55,7 @@
       .first-container,
       .second-container > div {
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
       }

diff --git a/packages/calcite-components/src/demos/avatar.html b/packages/calcite-components/src/demos/avatar.html
@@ -18,7 +18,7 @@
         flex: 1 0 21%;
         margin: 0 15px;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
       }

diff --git a/packages/calcite-components/src/demos/block.html b/packages/calcite-components/src/demos/block.html
@@ -18,7 +18,7 @@
         flex: 0 0 40%;
         margin: 0 25px;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
         padding: 18px 0;

diff --git a/packages/calcite-components/src/demos/button.html b/packages/calcite-components/src/demos/button.html
@@ -25,7 +25,7 @@
       .icon-slot,
       span {
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-weight: var(--calcite-font-weight-medium);
       }
 

diff --git a/packages/calcite-components/src/demos/card.html b/packages/calcite-components/src/demos/card.html
@@ -11,7 +11,7 @@
         flex-wrap: wrap;
         flex-direction: row;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
         padding: 15px;

diff --git a/packages/calcite-components/src/demos/checkbox.html b/packages/calcite-components/src/demos/checkbox.html
@@ -17,7 +17,7 @@
         flex: 1 0 21%;
         padding: 0 25px;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
       }