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';
 
 /**