feat: ensure all components inherit font-family

packages/calcite-components/.storybook/main.ts

@@ -53,7 +53,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.

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);
   }

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: {

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 {

packages/calcite-components/src/components/action/action.scss

@@ -42,7 +42,6 @@
     items-center
     justify-start
     border-none
-    font-sans
     font-medium;
 
   text-align: unset;
@@ -159,12 +158,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,
@@ -185,6 +187,7 @@
 :host([loading][appearance="solid"]) .button:hover,
 :host([loading][appearance="solid"]) .button:focus {
   @apply bg-foreground-1;
+
   .text-container {
     @apply opacity-disabled;
   }
@@ -207,13 +210,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();
 }

packages/calcite-components/src/components/block-section/block-section.scss

@@ -22,10 +22,15 @@
     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 +77,6 @@
   }
 }
 
-.toggle--switch {
-  .status-icon {
-    margin-inline-start: theme("margin.2");
-  }
-}
-
 .toggle--switch__content {
   @apply flex flex-auto items-center;
 }

packages/calcite-components/src/components/list-item-group/list-item-group.scss

@@ -6,7 +6,7 @@
 @include disabled();
 
 .container {
-  @apply bg-foreground-2 text-n1 text-color-2 m-0 flex flex-1 p-3 font-sans font-bold;
+  @apply bg-foreground-2 text-n1 text-color-2 m-0 flex flex-1 p-3 font-bold;
 }
 
 .heading {

packages/calcite-components/src/components/list-item/list-item.scss

@@ -10,7 +10,7 @@
   @apply bg-foreground-1
   box-border
   flex
-  flex-1 font-sans;
+  flex-1;
   * {
     @apply box-border;
   }
@@ -48,7 +48,6 @@
     select-none
     flex
     flex-auto
-    font-sans
     font-normal
     items-stretch
     p-0;
@@ -75,15 +74,6 @@ td:focus {
     py-2;
 }
 
-.label,
-.description,
-.content-bottom {
-  @apply text-n2 word-break font-sans font-normal;
-  &:only-child {
-    @apply m-0 py-1;
-  }
-}
-
 .label {
   @apply text-color-1;
 }
@@ -92,6 +82,22 @@ td:focus {
   @apply text-color-3 mt-0.5;
 }
 
+.content-bottom {
+  @apply bg-foreground-1 flex flex-col;
+  padding-inline-start: calc(
+    var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier)
+  );
+}
+
+.label,
+.description,
+.content-bottom {
+  @apply text-n2 word-break font-normal;
+  &:only-child {
+    @apply m-0 py-1;
+  }
+}
+
 .content-start {
   @apply justify-start;
 }
@@ -103,13 +109,10 @@ td:focus {
 .content-start,
 .content-end {
   @apply flex-auto;
-}
 
-.content-bottom {
-  @apply bg-foreground-1 flex flex-col;
-  padding-inline-start: calc(
-    var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier)
-  );
+  ::slotted(calcite-icon) {
+    @apply self-center mx-3;
+  }
 }
 
 .content-container--has-center-content .content-start,
@@ -137,13 +140,6 @@ td:focus {
   @apply cursor-pointer;
 }
 
-.content-start,
-.content-end {
-  ::slotted(calcite-icon) {
-    @apply self-center mx-3;
-  }
-}
-
 .actions-start,
 .actions-end {
   ::slotted(calcite-action),

packages/calcite-components/src/components/navigation-user/navigation-user.scss

@@ -10,7 +10,6 @@
       cursor-pointer
       transition-default
       focus-base
-      font-sans
       text-0h;
     border-block-end: 2px solid transparent;
   }
@@ -29,14 +28,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 +41,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

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),

packages/calcite-components/src/components/text-area/text-area.scss

@@ -13,7 +13,6 @@ textarea {
   box-border
   border-color-input
   border
-  font-sans
   w-full
   m-0;
   min-inline-size: theme("spacing.48");
@@ -86,9 +85,7 @@ textarea {
     @apply py-1
     px-2;
   }
-}
 
-:host([scale="s"]) {
   textarea,
   .footer,
   .character-limit {
@@ -107,9 +104,7 @@ textarea {
     px-3;
     min-block-size: 2.25rem;
   }
-}
 
-:host([scale="m"]) {
   textarea,
   .footer,
   .character-limit {
@@ -129,9 +124,7 @@ textarea {
     px-4;
     min-block-size: 2.75rem;
   }
-}
 
-:host([scale="l"]) {
   textarea,
   .footer,
   .character-limit {

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);
 }

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);
       }

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;

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);
       }

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);
       }

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;