Various style fixes

change/@fluentui-web-components-e70e1294-83c5-4c30-af76-4683b9c047c0.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix various style bugs and design token uses",
+  "packageName": "@fluentui/web-components",
+  "email": "corylaviska@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/src/listbox-option/listbox-option.styles.ts

@@ -38,94 +38,93 @@ export const optionStyles: (
 ) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) =>
   css`
     ${display('inline-flex')} :host {
-        font-family: ${bodyFont};
-        border-radius: calc(${controlCornerRadius} * 1px);
-        border: calc(${focusStrokeWidth} * 1px) solid transparent;
-        box-sizing: border-box;
-        color: ${neutralForegroundRest};
-        cursor: pointer;
-        fill: currentcolor;
-        font-size: ${typeRampBaseFontSize};
-        height: calc(${heightNumber} * 1px);
-        line-height: ${typeRampBaseLineHeight};
-        margin: 0 calc(${designUnit} * 1px);
-        outline: none;
-        overflow: hidden;
-        align-items: center;
-        padding: 0 calc(${designUnit} * 2.25px);
-        user-select: none;
-        white-space: nowrap;
+      font-family: ${bodyFont};
+      border-radius: calc(${controlCornerRadius} * 1px);
+      border: calc(${focusStrokeWidth} * 1px) solid transparent;
+      box-sizing: border-box;
+      color: ${neutralForegroundRest};
+      cursor: pointer;
+      fill: currentcolor;
+      font-size: ${typeRampBaseFontSize};
+      height: calc(${heightNumber} * 1px);
+      line-height: ${typeRampBaseLineHeight};
+      margin: 0 calc(${designUnit} * 1px);
+      outline: none;
+      overflow: hidden;
+      align-items: center;
+      padding: 0 calc(${designUnit} * 2.25px);
+      user-select: none;
+      white-space: nowrap;
     }
 
     :host(:${focusVisible}) {
-        box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) inset ${focusStrokeInner};
-        border-color: ${focusStrokeOuter};
-        background: ${accentFillFocus};
-        color: ${foregroundOnAccentFocus};
+      box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) inset ${focusStrokeInner};
+      border-color: ${focusStrokeOuter};
+      background: ${accentFillFocus};
+      color: ${foregroundOnAccentFocus};
     }
 
-    :host([aria-selected="true"]) {
-        background: ${accentFillRest};
-        color: ${foregroundOnAccentRest};
+    :host([aria-selected='true']) {
+      background: ${accentFillRest};
+      color: ${foregroundOnAccentRest};
     }
 
     :host(:hover) {
       background: ${accentFillHover};
       color: ${foregroundOnAccentHover};
     }
-  
+
     :host(:active) {
-        background: ${accentFillActive};
-        color: ${foregroundOnAccentActive};
+      background: ${accentFillActive};
+      color: ${foregroundOnAccentActive};
     }
 
-    :host(:not([aria-selected="true"]):hover) {
-        background: ${neutralFillHover};
-        color: ${neutralForegroundRest}};
+    :host(:not([aria-selected='true']):hover) {
+      background: ${neutralFillHover};
+      color: ${neutralForegroundRest};
     }
 
-    :host(:not([aria-selected="true"]):active) {
-        background: ${neutralFillActive};
-        color: ${neutralForegroundRest}};
+    :host(:not([aria-selected='true']):active) {
+      background: ${neutralFillActive};
+      color: ${neutralForegroundRest};
     }
 
     :host([disabled]) {
-        cursor: ${disabledCursor};
-        opacity: ${disabledOpacity};
+      cursor: ${disabledCursor};
+      opacity: ${disabledOpacity};
     }
 
     :host([disabled]:hover) {
-        background-color: inherit;
+      background-color: inherit;
     }
 
     .content {
-        grid-column-start: 2;
-        justify-self: start;
-        overflow: hidden;
-        text-overflow: ellipsis;
+      grid-column-start: 2;
+      justify-self: start;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     .start,
     .end,
     ::slotted(svg) {
-        display: flex;
+      display: flex;
     }
 
     ::slotted(svg) {
-        ${/* Glyph size and margin-left is temporary - replace when adaptive typography is figured out */ ''}
-        height: calc(${designUnit} * 4px);
-        width: calc(${designUnit} * 4px);
+      ${/* Glyph size and margin-left is temporary - replace when adaptive typography is figured out */ ''}
+      height: calc(${designUnit} * 4px);
+      width: calc(${designUnit} * 4px);
     }
 
-    ::slotted([slot="end"]) {
-        margin-inline-start: 1ch;
+    ::slotted([slot='end']) {
+      margin-inline-start: 1ch;
     }
 
-    ::slotted([slot="start"]) {
-        margin-inline-end: 1ch;
+    ::slotted([slot='start']) {
+      margin-inline-end: 1ch;
     }
-
-`.withBehaviors(
+  `.withBehaviors(
     forcedColorsStylesheetBehavior(
       css`
         :host {

packages/web-components/src/progress/progress/progress.styles.ts

@@ -78,7 +78,7 @@ export const progressStyles: (context: ElementDefinitionContext, definition: Pro
     :host(.paused) .indeterminate-indicator-1,
     :host(.paused) .indeterminate-indicator-2 {
       animation-play-state: paused;
-      background-color: $[neutralFillRest};
+      background-color: ${neutralFillRest};
     }
 
     :host(.paused) .determinate {

packages/web-components/src/radio/radio.styles.ts

@@ -10,6 +10,7 @@ import {
 } from '@microsoft/fast-foundation';
 import { heightNumber } from '../styles';
 import {
+  bodyFont,
   designUnit,
   disabledOpacity,
   fillColor,
@@ -22,6 +23,8 @@ import {
   neutralStrokeHover,
   neutralStrokeRest,
   strokeWidth,
+  typeRampBaseFontSize,
+  typeRampBaseLineHeight,
 } from '../design-tokens';
 
 export const radioStyles: (context: ElementDefinitionContext, definition: RadioOptions) => ElementStyles = (
@@ -63,15 +66,15 @@ export const radioStyles: (context: ElementDefinitionContext, definition: RadioO
     }
 
     .label {
-      font-family: var(--body-font);
+      font-family: ${bodyFont};
       color: ${neutralForegroundRest};
       ${
         /* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast/issues/2766 */ ''
       } padding-inline-start: calc(${designUnit} * 2px + 2px);
       margin-inline-end: calc(${designUnit} * 2px + 2px);
       cursor: pointer;
-      font-size: var(--type-ramp-base-font-size);
-      line-height: var(--type-ramp-base-line-height);
+      font-size: ${typeRampBaseFontSize};
+      line-height: ${typeRampBaseLineHeight};
     }
 
     .control,

packages/web-components/src/select/select.styles.ts

@@ -19,6 +19,7 @@ import {
   disabledOpacity,
   focusStrokeInner,
   focusStrokeOuter,
+  focusStrokeWidth,
   foregroundOnAccentFocus,
   neutralFillHover,
   neutralFillInputActive,
@@ -128,7 +129,7 @@ export const selectStyles = (context, definition) =>
     }
 
     :host(:${focusVisible}) ::slotted([aria-selected="true"][role="option"]:not([disabled])) {
-      box-shadow: 0 0 0 calc(var(--focus-outline-width) * 1px) inset ${focusStrokeInner};
+      box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) inset ${focusStrokeInner};
       border-color: ${focusStrokeOuter};
       background: ${accentFillFocus};
       color: ${foregroundOnAccentFocus};
@@ -261,7 +262,7 @@ export const selectStyles = (context, definition) =>
         :host(:${focusVisible}) ::slotted([aria-selected="true"][role="option"]:not([disabled])) {
           background: ${SystemColors.Highlight};
           border-color: ${SystemColors.ButtonText};
-          box-shadow: 0 0 0 calc(var(--focus-outline-width) * 1px) inset ${SystemColors.HighlightText};
+          box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) inset ${SystemColors.HighlightText};
           color: ${SystemColors.HighlightText};
           fill: currentcolor;
         }

packages/web-components/src/text-area/text-area.styles.ts

@@ -11,7 +11,10 @@ import { SystemColors } from '@microsoft/fast-web-utilities';
 import { fillStateStyles, heightNumber } from '../styles';
 import { appearanceBehavior } from '../utilities/behaviors';
 import {
+  bodyFont,
+  controlCornerRadius,
   designUnit,
+  disabledOpacity,
   focusStrokeOuter,
   neutralFillHover,
   neutralFillInputHover,
@@ -64,7 +67,7 @@ export const textAreaFilledStyles: (
 export const textAreaStyles = (context, definition) =>
   css`
     ${display('inline-flex')} :host {
-      font-family: var(--body-font);
+      font-family: ${bodyFont};
       outline: none;
       user-select: none;
       position: relative;
@@ -77,7 +80,7 @@ export const textAreaStyles = (context, definition) =>
       position: relative;
       color: ${neutralForegroundRest};
       background: ${neutralFillInputRest};
-      border-radius: calc(var(--corner-radius) * 1px);
+      border-radius: calc(${controlCornerRadius} * 1px);
       border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};
       height: calc(${heightNumber} * 2px);
       font: inherit;
@@ -138,7 +141,7 @@ export const textAreaStyles = (context, definition) =>
       cursor: ${disabledCursor};
     }
     :host([disabled]) {
-      opacity: var(--disabled-opacity);
+      opacity: ${disabledOpacity};
     }
   `.withBehaviors(
     appearanceBehavior('filled', textAreaFilledStyles(context, definition)),

packages/web-components/src/text-field/text-field.styles.ts

@@ -13,6 +13,7 @@ import { appearanceBehavior } from '../utilities/behaviors';
 import {
   bodyFont,
   controlCornerRadius,
+  designUnit,
   disabledOpacity,
   focusStrokeOuter,
   neutralFillHover,
@@ -105,7 +106,7 @@ export const textFieldStyles = (context, definition) =>
       margin-top: auto;
       margin-bottom: auto;
       border: none;
-      padding: 0 calc(var(--design-unit) * 2px + 1px);
+      padding: 0 calc(${designUnit} * 2px + 1px);
       color: ${neutralForegroundRest};
       font-family: inherit;
       font-size: ${typeRampBaseFontSize};

packages/web-components/src/tree-item/tree-item.styles.ts

@@ -19,6 +19,7 @@ import {
   designUnit,
   disabledOpacity,
   focusStrokeOuter,
+  focusStrokeWidth,
   neutralFillRecipe,
   neutralFillRest,
   neutralFillStealthActive,
@@ -40,7 +41,7 @@ const ltr = css`
     left: var(--expand-collapse-button-nested-width, calc(${heightNumber} * -1px));
   }
   :host([selected])::after {
-    left: calc(var(--focus-outline-width) * 1px);
+    left: calc(${focusStrokeWidth} * 1px);
   }
   :host([expanded]) > .positioning-region .expand-collapse-glyph {
     transform: rotate(45deg);
@@ -55,7 +56,7 @@ const rtl = css`
     right: var(--expand-collapse-button-nested-width, calc(${heightNumber} * -1px));
   }
   :host([selected])::after {
-    right: calc(var(--focus-outline-width) * 1px);
+    right: calc(${focusStrokeWidth} * 1px);
   }
   :host([expanded]) > .positioning-region .expand-collapse-glyph {
     transform: rotate(135deg);