Fix naming convention and export

microsoft · Sep 16, 2022 · 618d27e · 618d27e
1 parent 6fbbc55
commit 618d27e
Show file tree

Hide file tree

Showing 19 changed files with 62 additions and 46 deletions.
diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md
@@ -789,6 +789,12 @@ export const focusStrokeOuterRecipe: DesignToken<ColorRecipe>;
 // @public (undocumented)
 export const focusStrokeWidth: CSSDesignToken<number>;
 
+// @public
+export const focusTreatmentBase: CSSDirective;
+
+// @public
+export const focusTreatmentTight: CSSDirective;
+
 // @public (undocumented)
 export const fontWeight: CSSDesignToken<number>;
 

diff --git a/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts b/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts
@@ -21,7 +21,7 @@ import {
   neutralStrokeLayerRest,
   strokeWidth,
 } from '../../design-tokens';
-import { insetFocusTreatment } from '../../styles/patterns/focus';
+import { focusTreatmentBase } from '../../styles/focus';
 import { typeRampBase } from '../../styles/patterns/type-ramp';
 import { heightNumber } from '../../styles/size';
 
@@ -103,7 +103,7 @@ export const accordionItemStyles: (
     }
 
     .button:${focusVisible}::before {
-      ${insetFocusTreatment}
+      ${focusTreatmentBase}
       border-radius: calc(${layerCornerRadius} * 1px);
     }
 

diff --git a/packages/web-components/src/breadcrumb-item/breadcrumb-item.styles.ts b/packages/web-components/src/breadcrumb-item/breadcrumb-item.styles.ts
@@ -15,7 +15,7 @@ import {
 } from '../design-tokens';
 import { typeRampBase } from '../styles/patterns/type-ramp';
 import { heightNumber } from '../styles/index';
-import { offsetFocusTreatment } from '../styles/patterns/focus';
+import { focusTreatmentTight } from '../styles/focus';
 
 export const breadcrumbItemStyles: (
   context: ElementDefinitionContext,
@@ -61,7 +61,7 @@ export const breadcrumbItemStyles: (
     }
 
     .control:${focusVisible} {
-      ${offsetFocusTreatment}
+      ${focusTreatmentTight}
     }
 
     :host(:not([href])),

diff --git a/packages/web-components/src/checkbox/checkbox.styles.ts b/packages/web-components/src/checkbox/checkbox.styles.ts
@@ -28,7 +28,7 @@ import {
   strokeWidth,
 } from '../design-tokens';
 import { typeRampBase } from '../styles/patterns/type-ramp';
-import { offsetFocusTreatment } from '../styles/patterns/focus';
+import { focusTreatmentTight } from '../styles/focus';
 
 export const checkboxStyles: (context: ElementDefinitionContext, definition: CheckboxOptions) => ElementStyles = (
   context: ElementDefinitionContext,
@@ -106,7 +106,7 @@ export const checkboxStyles: (context: ElementDefinitionContext, definition: Che
 
     :host(:${focusVisible}) .control {
       background: ${neutralFillInputAltFocus};
-      ${offsetFocusTreatment}
+      ${focusTreatmentTight}
     }
 
     :host(.checked) .control {

diff --git a/packages/web-components/src/data-grid/data-grid-cell.styles.ts b/packages/web-components/src/data-grid/data-grid-cell.styles.ts
@@ -14,7 +14,7 @@ import {
   strokeWidth,
 } from '../design-tokens';
 import { typeRampBase } from '../styles/patterns/type-ramp';
-import { insetFocusTreatment } from '../styles/patterns/focus';
+import { focusTreatmentBase } from '../styles/focus';
 
 export const dataGridCellStyles: (
   context: ElementDefinitionContext,
@@ -37,7 +37,7 @@ export const dataGridCellStyles: (
     }
 
     :host(:${focusVisible}) {
-      ${insetFocusTreatment}
+      ${focusTreatmentBase}
     }
   `.withBehaviors(
     forcedColorsStylesheetBehavior(

diff --git a/packages/web-components/src/flipper/flipper.styles.ts b/packages/web-components/src/flipper/flipper.styles.ts
@@ -20,7 +20,7 @@ import {
   neutralStrokeControlRest,
   strokeWidth,
 } from '../design-tokens';
-import { insetFocusTreatment } from '../styles/patterns/focus';
+import { focusTreatmentBase } from '../styles/focus';
 
 export const flipperStyles: (context: ElementDefinitionContext, definition: FlipperOptions) => ElementStyles = (
   context: ElementDefinitionContext,
@@ -65,7 +65,7 @@ export const flipperStyles: (context: ElementDefinitionContext, definition: Flip
     }
 
     :host(:${focusVisible}) {
-      ${insetFocusTreatment}
+      ${focusTreatmentBase}
     }
 
     :host::-moz-focus-inner {

diff --git a/packages/web-components/src/listbox-option/listbox-option.styles.ts b/packages/web-components/src/listbox-option/listbox-option.styles.ts
@@ -26,7 +26,7 @@ import {
   strokeWidth,
 } from '../design-tokens';
 import { typeRampBase } from '../styles/patterns/type-ramp';
-import { insetFocusTreatment } from '../styles/patterns/focus';
+import { focusTreatmentBase } from '../styles/focus';
 
 export const optionStyles: (
   context: ElementDefinitionContext,
@@ -81,7 +81,7 @@ export const optionStyles: (
     }
 
     :host(:${focusVisible}) {
-      ${insetFocusTreatment}
+      ${focusTreatmentBase}
       background: ${neutralFillStealthFocus};
     }
 

diff --git a/packages/web-components/src/listbox/listbox.styles.ts b/packages/web-components/src/listbox/listbox.styles.ts
@@ -11,7 +11,7 @@ import {
   neutralStrokeRest,
   strokeWidth,
 } from '../design-tokens';
-import { insetFocusTreatment } from '../styles/patterns/focus';
+import { focusTreatmentBase } from '../styles/focus';
 
 export const listboxStyles: (
   context: ElementDefinitionContext,
@@ -31,6 +31,6 @@ export const listboxStyles: (
     }
 
     :host(:focus-within:not([disabled])) {
-      ${insetFocusTreatment}
+      ${focusTreatmentBase}
     }
   `
diff --git a/packages/web-components/src/menu-item/menu-item.styles.ts b/packages/web-components/src/menu-item/menu-item.styles.ts
@@ -19,7 +19,7 @@ import {
   strokeWidth,
 } from '../design-tokens';
 import { typeRampBase } from '../styles/patterns/type-ramp';
-import { insetFocusTreatment } from '../styles/patterns/focus';
+import { focusTreatmentBase } from '../styles/focus';
 
 export const menuItemStyles: (context: ElementDefinitionContext, definition: MenuItemOptions) => ElementStyles = (
   context: ElementDefinitionContext,
@@ -84,7 +84,7 @@ export const menuItemStyles: (context: ElementDefinitionContext, definition: Men
     }
 
     :host(:${focusVisible}) {
-      ${insetFocusTreatment}
+      ${focusTreatmentBase}
     }
 
     :host(:not([disabled]):hover) {

diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
@@ -27,7 +27,7 @@ import {
   strokeWidth,
 } from '../design-tokens';
 import { typeRampBase } from '../styles/patterns/type-ramp';
-import { offsetFocusTreatment } from '../styles/patterns/focus';
+import { focusTreatmentTight } from '../styles/focus';
 
 export const radioStyles: (context: ElementDefinitionContext, definition: RadioOptions) => ElementStyles = (
   context: ElementDefinitionContext,
@@ -106,7 +106,7 @@ export const radioStyles: (context: ElementDefinitionContext, definition: RadioO
     }
 
     :host(:${focusVisible}) .control {
-      ${offsetFocusTreatment}
+      ${focusTreatmentTight}
       background: ${neutralFillInputAltFocus};
     }
 

diff --git a/packages/web-components/src/select/select.styles.ts b/packages/web-components/src/select/select.styles.ts
@@ -34,7 +34,7 @@ import {
   strokeWidth,
 } from '../design-tokens';
 import { typeRampBase } from '../styles/patterns/type-ramp';
-import { insetFocusTreatment } from '../styles/patterns/focus';
+import { focusTreatmentBase } from '../styles/focus';
 
 export const selectFilledStyles: (context: ElementDefinitionContext, definition: SelectOptions) => ElementStyles = (
   context: ElementDefinitionContext,
@@ -150,7 +150,7 @@ export const selectStyles = (context, definition) =>
     }
 
     :host(:${focusVisible}) {
-      ${insetFocusTreatment}
+      ${focusTreatmentBase}
     }
 
     :host([disabled]) {

diff --git a/packages/web-components/src/styles/focus.ts b/packages/web-components/src/styles/focus.ts
@@ -0,0 +1,23 @@
+import { cssPartial } from '@microsoft/fast-element';
+import { focusStrokeOuter, focusStrokeWidth, strokeWidth } from '../design-tokens';
+
+/**
+ * Partial CSS for the focus treatment for most typical sized components like Button, Menu Item, etc.
+ *
+ * @public
+ */
+export const focusTreatmentBase = cssPartial`
+  outline: calc(${focusStrokeWidth} * 1px) solid ${focusStrokeOuter};
+  outline-offset: calc(${focusStrokeWidth} * -1px);
+`;
+
+/**
+ * Partial CSS for the focus treatment for tighter components with spacing constraints, like Checkbox
+ * and Radio, or plain text like Hypertext appearance Anchor or Breadcrumb Item.
+ *
+ * @public
+ */
+export const focusTreatmentTight = cssPartial`
+  outline: calc(${focusStrokeWidth} * 1px) solid ${focusStrokeOuter};
+  outline-offset: calc(${strokeWidth} * 1px);
+`;
diff --git a/packages/web-components/src/styles/index.ts b/packages/web-components/src/styles/index.ts
@@ -1,4 +1,5 @@
 export * from './direction';
 export * from './elevation';
+export * from './focus';
 export * from './patterns/';
 export * from './size';
diff --git a/packages/web-components/src/styles/patterns/button.styles.ts b/packages/web-components/src/styles/patterns/button.styles.ts
@@ -42,7 +42,7 @@ import {
   strokeWidth,
 } from '../../design-tokens';
 import { typeRampBase } from '../../styles/patterns/type-ramp';
-import { insetFocusTreatment, offsetFocusTreatment } from './focus';
+import { focusTreatmentBase, focusTreatmentTight } from '../focus';
 
 /**
  * @internal
@@ -108,7 +108,7 @@ export const baseButtonStyles = (
     }
 
     :host .control:${focusVisible} {
-      ${insetFocusTreatment}
+      ${focusTreatmentBase}
     }
 
     :host .control${nonInteractivitySelector} {
@@ -209,7 +209,7 @@ export const AccentButtonStyles = (
     }
 
     :host .control:${focusVisible} {
-      ${insetFocusTreatment}
+      ${focusTreatmentBase}
       box-shadow: 0 0 0 calc(((${focusStrokeWidth} + ${strokeWidth}) - ${strokeWidth}) * 1px) ${focusStrokeInner} inset !important;
     }
 
@@ -306,7 +306,7 @@ export const HypertextStyles = (
     }
 
     :host .control:${focusVisible} {
-      ${offsetFocusTreatment}
+      ${focusTreatmentTight}
     }
 
     :host .control${nonInteractivitySelector} {

diff --git a/packages/web-components/src/styles/patterns/focus.ts b/packages/web-components/src/styles/patterns/focus.ts
diff --git a/packages/web-components/src/switch/switch.styles.ts b/packages/web-components/src/switch/switch.styles.ts
@@ -30,7 +30,7 @@ import {
   strokeWidth,
 } from '../design-tokens';
 import { typeRampBase } from '../styles/patterns/type-ramp';
-import { offsetFocusTreatment } from '../styles/patterns/focus';
+import { focusTreatmentTight } from '../styles/focus';
 
 export const switchStyles: (context: ElementDefinitionContext, definition: SwitchOptions) => ElementStyles = (
   context: ElementDefinitionContext,
@@ -88,7 +88,7 @@ export const switchStyles: (context: ElementDefinitionContext, definition: Switc
     }
 
     :host(:${focusVisible}) .switch {
-      ${offsetFocusTreatment}
+      ${focusTreatmentTight}
       background: ${neutralFillInputAltFocus};
     }
 

diff --git a/packages/web-components/src/tabs/tab/tab.styles.ts b/packages/web-components/src/tabs/tab/tab.styles.ts
@@ -16,7 +16,7 @@ import {
   strokeWidth,
 } from '../../design-tokens';
 import { typeRampBase } from '../../styles/patterns/type-ramp';
-import { insetFocusTreatment } from '../../styles/patterns/focus';
+import { focusTreatmentBase } from '../../styles/focus';
 
 export const tabStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles =
   (context: ElementDefinitionContext, definition: FoundationElementDefinition) =>
@@ -45,7 +45,7 @@ export const tabStyles: (context: ElementDefinitionContext, definition: Foundati
       }
 
       :host(:${focusVisible}) {
-        ${insetFocusTreatment}
+        ${focusTreatmentBase}
       }
 
       :host(.vertical) {

diff --git a/packages/web-components/src/toolbar/toolbar.styles.ts b/packages/web-components/src/toolbar/toolbar.styles.ts
@@ -8,7 +8,7 @@ import {
 } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { designUnit, fillColor } from '../design-tokens';
-import { insetFocusTreatment } from '../styles/patterns/focus';
+import { focusTreatmentBase } from '../styles/focus';
 
 export const toolbarStyles: (
   context: ElementDefinitionContext,
@@ -25,7 +25,7 @@ export const toolbarStyles: (
     }
 
     :host(${focusVisible}) {
-      ${insetFocusTreatment}
+      ${focusTreatmentBase}
     }
 
     .positioning-region {

diff --git a/packages/web-components/src/tree-item/tree-item.styles.ts b/packages/web-components/src/tree-item/tree-item.styles.ts
@@ -30,7 +30,7 @@ import {
 } from '../design-tokens';
 import { Swatch } from '../color/swatch';
 import { typeRampBase } from '../styles/patterns/type-ramp';
-import { insetFocusTreatment } from '../styles/patterns/focus';
+import { focusTreatmentBase } from '../styles/focus';
 
 const ltr = css`
   .expand-collapse-button svg {
@@ -107,7 +107,7 @@ export const treeItemStyles: (context: ElementDefinitionContext, definition: Tre
     }
 
     :host(:${focusVisible}) .positioning-region {
-      ${insetFocusTreatment}
+      ${focusTreatmentBase}
     }
 
     .positioning-region::before {