Align with fast components (#33)

* Align with fast components

* Upgrade @microsft/fast packages

* Update snapsots

Author: fcollonval

packages/components/package.json

@@ -40,10 +40,10 @@
     "test:visual": "tsc --incremental -p tsconfig.playwright.json && playwright test"
   },
   "dependencies": {
-    "@microsoft/fast-colors": "^5.1.4",
-    "@microsoft/fast-components": "^2.17.1",
-    "@microsoft/fast-element": "^1.6.0",
-    "@microsoft/fast-foundation": "^2.21.0",
+    "@microsoft/fast-colors": "^5.1.5",
+    "@microsoft/fast-components": "^2.25.1",
+    "@microsoft/fast-element": "^1.8.0",
+    "@microsoft/fast-foundation": "^2.37.1",
     "@microsoft/fast-web-utilities": "^5.1.0"
   },
   "devDependencies": {

packages/components/src/accordion-item/accordion-item.styles.ts

@@ -23,7 +23,7 @@ import {
   strokeWidth,
   typeRampMinus1FontSize,
   typeRampMinus1LineHeight
-} from '../design-token';
+} from '../design-tokens';
 import { heightNumber } from '../styles/size';
 
 /**

packages/components/src/avatar/avatar.styles.ts

@@ -19,7 +19,7 @@ import {
   foregroundOnAccentRest,
   neutralForegroundRest,
   typeRampBaseFontSize
-} from '../design-token';
+} from '../design-tokens';
 
 const rtl: FoundationElementTemplate<ElementStyles, AvatarOptions> = (
   context,

packages/components/src/badge/badge.styles.ts

@@ -12,7 +12,7 @@ import {
   strokeWidth,
   typeRampMinus1FontSize,
   typeRampMinus1LineHeight
-} from '../design-token';
+} from '../design-tokens';
 import { heightNumber } from '../styles/index';
 
 /**

packages/components/src/breadcrumb-item/breadcrumb-item.styles.ts

@@ -22,7 +22,7 @@ import {
   strokeWidth,
   typeRampBaseFontSize,
   typeRampBaseLineHeight
-} from '../design-token';
+} from '../design-tokens';
 import { heightNumber } from '../styles/index';
 
 /**

packages/components/src/button/button.styles.ts

@@ -45,7 +45,7 @@ import {
   strokeWidth,
   typeRampBaseFontSize,
   typeRampBaseLineHeight
-} from '../design-token';
+} from '../design-tokens';
 import { heightNumber } from '../styles';
 
 /**

packages/components/src/card/card.stories.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { neutralForegroundRest, typeRampBaseFontSize } from '../design-token';
+import { neutralForegroundRest, typeRampBaseFontSize } from '../design-tokens';
 import { setTheme } from '../utilities/storybook';
 
 export default {

packages/components/src/checkbox/checkbox.styles.ts

@@ -35,7 +35,7 @@ import {
   strokeWidth,
   typeRampBaseFontSize,
   typeRampBaseLineHeight
-} from '../design-token';
+} from '../design-tokens';
 import { heightNumber } from '../styles/index';
 
 /**

packages/components/src/checkbox/index.ts

@@ -21,7 +21,7 @@ export const jpCheckbox = Checkbox.compose<CheckboxOptions>({
   baseName: 'checkbox',
   template,
   styles,
-  checkedIndicator: `
+  checkedIndicator: /* html */ `
     <svg
       part="checked-indicator"
       class="checked-indicator"
@@ -35,7 +35,7 @@ export const jpCheckbox = Checkbox.compose<CheckboxOptions>({
       />
     </svg>
     `,
-  indeterminateIndicator: `
+  indeterminateIndicator: /* html */ `
         <div part="indeterminate-indicator" class="indeterminate-indicator"></div>
     `
 });

packages/components/src/combobox/combobox.styles.ts

@@ -15,7 +15,7 @@ import {
   strokeWidth,
   typeRampBaseFontSize,
   typeRampBaseLineHeight
-} from '../design-token';
+} from '../design-tokens';
 import { selectStyles } from '../select/select.styles';
 
 /**

packages/components/src/combobox/index.ts

@@ -42,7 +42,7 @@ export const jpCombobox = Combobox.compose<ComboboxOptions>({
   shadowOptions: {
     delegatesFocus: true
   },
-  indicator: `
+  indicator: /* html */ `
     <svg
       class="select-indicator"
       part="select-indicator"

packages/components/src/data-grid/data-grid-cell.styles.ts

@@ -19,7 +19,7 @@ import {
   strokeWidth,
   typeRampBaseFontSize,
   typeRampBaseLineHeight
-} from '../design-token';
+} from '../design-tokens';
 
 /**
  * Styles for Data Grid cell

packages/components/src/design-token.ts renamed to packages/components/src/design-tokens.ts

@@ -3,7 +3,7 @@
 
 export { addJupyterLabThemeChangeListener } from './utilities/theme/applyTheme';
 
-export * from './design-token';
+export * from './design-tokens';
 export * from './jupyter-design-system';
 export * from './custom-elements';
 

packages/components/src/index.ts

@@ -29,7 +29,7 @@ import {
   strokeWidth,
   typeRampBaseFontSize,
   typeRampBaseLineHeight
-} from '../design-token';
+} from '../design-tokens';
 import { heightNumber } from '../styles/index';
 
 /**

packages/components/src/menu-item/menu-item.styles.ts

@@ -31,10 +31,10 @@ export const jpNumberField = NumberField.compose<NumberFieldOptions>({
   shadowOptions: {
     delegatesFocus: true
   },
-  stepDownGlyph: `
+  stepDownGlyph: /* html */ `
         <span class="step-down-glyph" part="step-down-glyph"></span>
     `,
-  stepUpGlyph: `
+  stepUpGlyph: /* html */ `
         <span class="step-up-glyph" part="step-up-glyph"></span>
     `
 });

packages/components/src/number-field/index.ts

@@ -7,7 +7,7 @@ import {
   FoundationElementTemplate,
   NumberFieldOptions
 } from '@microsoft/fast-foundation';
-import { neutralForegroundRest } from '../design-token';
+import { neutralForegroundRest } from '../design-tokens';
 import { BaseFieldStyles } from '../styles/index';
 
 /**

packages/components/src/number-field/number-field.styles.ts

@@ -21,7 +21,7 @@ export const jpProgressRing = ProgressRing.compose<ProgressRingOptions>({
   baseName: 'progress-ring',
   template,
   styles,
-  indeterminateIndicator: `
+  indeterminateIndicator: /* html */ `
         <svg class="progress" part="progress" viewBox="0 0 16 16">
             <circle
                 class="background"

packages/components/src/progress-ring/index.ts

@@ -21,10 +21,10 @@ export const jpProgress = Progress.compose<ProgressOptions>({
   baseName: 'progress',
   template,
   styles,
-  indeterminateIndicator1: `
+  indeterminateIndicator1: /* html */ `
         <span class="indeterminate-indicator-1" part="indeterminate-indicator-1"></span>
     `,
-  indeterminateIndicator2: `
+  indeterminateIndicator2: /* html */ `
         <span class="indeterminate-indicator-2" part="indeterminate-indicator-2"></span>
     `
 });

packages/components/src/progress/index.ts

@@ -34,7 +34,7 @@ import {
   strokeWidth,
   typeRampBaseFontSize,
   typeRampBaseLineHeight
-} from '../design-token';
+} from '../design-tokens';
 import { heightNumber } from '../styles/index';
 
 /**

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

@@ -4,13 +4,45 @@
 
 import { css, ElementStyles } from '@microsoft/fast-element';
 import {
+  DesignToken,
   focusVisible,
   FoundationElementTemplate,
   TextFieldOptions
 } from '@microsoft/fast-foundation';
-import { designUnit } from '../design-token';
+import { Swatch } from '../colors';
+import {
+  bodyFont,
+  controlCornerRadius,
+  density,
+  neutralFillRecipe,
+  neutralFillStealthActive,
+  neutralFillStealthHover,
+  neutralFillStealthRecipe,
+  neutralForegroundRest,
+  typeRampBaseFontSize,
+  typeRampBaseLineHeight,
+  designUnit
+} from '../design-tokens';
 import { BaseFieldStyles, heightNumber } from '../styles/index';
 
+const clearButtonHover = DesignToken.create<Swatch>(
+  'clear-button-hover'
+).withDefault((target: HTMLElement) => {
+  const buttonRecipe = neutralFillStealthRecipe.getValueFor(target);
+  const inputRecipe = neutralFillRecipe.getValueFor(target);
+  return buttonRecipe.evaluate(target, inputRecipe.evaluate(target).hover)
+    .hover;
+});
+
+const clearButtonActive = DesignToken.create<Swatch>(
+  'clear-button-active'
+).withDefault((target: HTMLElement) => {
+  const buttonRecipe = neutralFillStealthRecipe.getValueFor(target);
+  const inputRecipe = neutralFillRecipe.getValueFor(target);
+  return buttonRecipe.evaluate(target, inputRecipe.evaluate(target).hover)
+    .active;
+});
+
 export const searchStyles: FoundationElementTemplate<
   ElementStyles,
   TextFieldOptions
@@ -37,17 +69,37 @@ export const searchStyles: FoundationElementTemplate<
       outline: none;
     }
 
-    /* Cancel margin set for button focus outline */
-    jp-button {
-      margin: 0;
-    }
-
     .clear-button {
-      position: absolute;
-      right: 0;
-      top: 1px;
       height: calc(100% - 2px);
       opacity: 0;
+      margin: 1px;
+      background: transparent;
+      color: ${neutralForegroundRest};
+      fill: currentcolor;
+      border: none;
+      border-radius: calc(${controlCornerRadius} * 1px);
+      min-width: calc(${heightNumber} * 1px);
+      font-size: ${typeRampBaseFontSize};
+      line-height: ${typeRampBaseLineHeight};
+      outline: none;
+      font-family: ${bodyFont};
+      padding: 0 calc((10 + (${designUnit} * 2 * ${density})) * 1px);
+    }
+
+    .clear-button:hover {
+      background: ${neutralFillStealthHover};
+    }
+
+    .clear-button:active {
+      background: ${neutralFillStealthActive};
+    }
+
+    :host([appearance='filled']) .clear-button:hover {
+      background: ${clearButtonHover};
+    }
+
+    :host([appearance='filled']) .clear-button:active {
+      background: ${clearButtonActive};
     }
 
     .input-wrapper {

packages/components/src/search/search.styles.ts

@@ -39,7 +39,7 @@ export const jpSelect = Select.compose<SelectOptions>({
   baseClass: FoundationSelect,
   template,
   styles,
-  indicator: `
+  indicator: /* html */ `
         <svg
             class="select-indicator"
             part="select-indicator"

packages/components/src/select/index.ts

@@ -21,7 +21,7 @@ export const jpSlider = Slider.compose<SliderOptions>({
   baseName: 'slider',
   template,
   styles,
-  thumb: `
+  thumb: /* html */ `
         <div class="thumb-cursor"></div>
     `
 });

packages/components/src/slider/index.ts

@@ -22,7 +22,7 @@ import {
   neutralForegroundRest,
   neutralStrokeHover,
   neutralStrokeRest
-} from '../design-token';
+} from '../design-tokens';
 import { heightNumber } from '../styles/index';
 
 /**

packages/components/src/slider/slider.styles.ts

@@ -3,7 +3,7 @@
 // Distributed under the terms of the Modified BSD License.
 
 import { cssPartial } from '@microsoft/fast-element';
-import { baseHeightMultiplier, density, designUnit } from '../design-token';
+import { baseHeightMultiplier, density, designUnit } from '../design-tokens';
 
 /**
  * A formula to retrieve the control height.

packages/components/src/styles/size.ts

@@ -36,7 +36,7 @@ import {
   strokeWidth,
   typeRampBaseFontSize,
   typeRampBaseLineHeight
-} from '../design-token';
+} from '../design-tokens';
 import { heightNumber } from '../styles/index';
 
 /**

packages/components/src/switch/switch.styles.ts

@@ -18,7 +18,7 @@ import {
   neutralForegroundRest,
   typeRampBaseFontSize,
   typeRampBaseLineHeight
-} from '../design-token';
+} from '../design-tokens';
 import { heightNumber } from '../styles/index';
 
 /**

packages/components/src/tabs/tabs.styles.ts

@@ -22,7 +22,7 @@ import {
   strokeWidth,
   typeRampBaseFontSize,
   typeRampBaseLineHeight
-} from '../design-token';
+} from '../design-tokens';
 import { css, ElementStyles } from '@microsoft/fast-element';
 import {
   disabledCursor,

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

@@ -17,7 +17,7 @@ import {
   fillColor,
   focusStrokeWidth,
   strokeWidth
-} from '../design-token';
+} from '../design-tokens';
 
 /**
  * Styles for the Toolbar

packages/components/src/toolbar/toolbar.styles.ts

@@ -22,7 +22,7 @@ export const jpTreeItem = TreeItem.compose<TreeItemOptions>({
   baseName: 'tree-item',
   template,
   styles,
-  expandCollapseGlyph: `
+  expandCollapseGlyph: /* html */ `
         <svg
             viewBox="0 0 16 16"
             xmlns="http://www.w3.org/2000/svg"

packages/components/src/tree-item/index.ts

@@ -36,7 +36,7 @@ import {
   strokeWidth,
   typeRampBaseFontSize,
   typeRampBaseLineHeight
-} from '../design-token';
+} from '../design-tokens';
 import { heightNumber } from '../styles/index';
 
 const ltr = css`

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

@@ -5,7 +5,7 @@ import { icon, library } from '@fortawesome/fontawesome-svg-core';
 import * as icons from '@fortawesome/free-solid-svg-icons';
 import { parseColor } from '@microsoft/fast-colors';
 import { isDark, PaletteRGB, StandardLuminance, SwatchRGB } from '../../colors';
-import { accentPalette, baseLayerLuminance } from '../../design-token';
+import { accentPalette, baseLayerLuminance } from '../../design-tokens';
 
 /**
  * Generate the SVG for a fontawesome icon

packages/components/src/utilities/storybook/index.ts

@@ -23,7 +23,7 @@ import {
   neutralPalette,
   strokeWidth,
   typeRampBaseFontSize
-} from '../../design-token';
+} from '../../design-tokens';
 
 const THEME_NAME_BODY_ATTRIBUTE = 'data-jp-theme-name';
 const THEME_MODE_BODY_ATTRIBUTE = 'data-jp-theme-light';