-
-
- My Feed
- Microsoft
- Information Technology
- Business News
- Seattle / Tacoma
- Money
- News
- Markets
-
-
-
-
-
-
We're not ready for another pandemic
-
- The Atlantic
-
-
-
-
-
-
- 'Birds Aren't Real' Followers Flock to Missouri, Claim Birds
- Are Government Drones
-
-
- Newsweek
-
-
-
-
-
-
- How a couple built their tiny house on wheels
-
-
- Lovemoney
-
-
-
-
-
-
- NASA: Mystery of subsurface lakes under Mars south pole
- deepens
-
-
- CNET
-
-
-
-
-
-
-
-
- If You Can Walk This Far, You May Live Longer, Says Science
-
-
- ETNT Mind+Body
-
-
-
-
-
-
Pond Weed Identification: What to Know
-
- The Family Handyman
-
-
-
-
-
-
- Man arrested for stealing boat from Seattle, claimed
- explosives were on board
-
-
- KOMO-TV Seattle
-
-
-
-
-
-
- Canada Goose to Stop Using Animal Fur in Products
-
-
- TheStreet
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/design-system-tutorial/package.json b/examples/design-system-tutorial/package.json
deleted file mode 100644
index b8d3031af3b..00000000000
--- a/examples/design-system-tutorial/package.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
- "name": "fast-design-system-demo",
- "version": "1.0.0",
- "description": "A heavily-commented demo of using FAST's Adaptive UI Design System and Design Tokens.",
- "main": "index.js",
- "private": true,
- "scripts": {
- "build": "rimraf dist && webpack --config webpack.config.js --mode=production",
- "start": "webpack-dev-server"
- },
- "author": "",
- "license": "ISC",
- "dependencies": {
- "@microsoft/fast-colors": "^5.3.1",
- "@microsoft/fast-element": "^2.0.0-beta.1",
- "@microsoft/fast-foundation": "^3.0.0-alpha.2",
- "@microsoft/fast-components": "^2.30.6",
- "tslib": "^2.4.0"
- },
- "devDependencies": {
- "rimraf": "^3.0.2",
- "ts-loader": "^7.0.1",
- "typescript": "^4.7.0",
- "webpack": "^4.44.0",
- "webpack-cli": "^3.3.11",
- "webpack-dev-server": "^3.11.0"
- }
-}
diff --git a/examples/design-system-tutorial/src/components/attribution.ts b/examples/design-system-tutorial/src/components/attribution.ts
deleted file mode 100644
index 3ad940aaa74..00000000000
--- a/examples/design-system-tutorial/src/components/attribution.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { designUnit, neutralForegroundHint } from "@microsoft/fast-components";
-import { css, html } from "@microsoft/fast-element";
-import { display, FoundationElement } from "@microsoft/fast-foundation";
-
-/**
- * The FAST Web Components don't have an "attribution" component built-in.
- * The code below shows how you can build your own. Basing it on FoundationElement and
- * using the FoundationElement.compose API, you can create a brand new component that
- * has all the features and integrates into Design System registration in the same way as
- * our official FAST components. Notice also how the styles leverage the design tokens
- * and style helpers provided by the existing FAST Web Components.
- *
- * Since this is a simple component, we've chosen to keep all of its source in
- * this single file. For an example of how to organize code for a more complex component,
- * take a look in the card folder.
- *
- * Additionally, because this component has no behavior of its own, but simply provides
- * an easy to re-use block of HTML with associated styles, we do not need to create a
- * unique class. Calling FoundationElement.compose directly will handle that for us when
- * it defines the web component with the platform.
- */
-
-export const fastAttribution = FoundationElement.compose({
- baseName: "attribution",
- template: html`
-
-
- `,
- styles: css`
- ${display("flex")} ::slotted (*) {
- margin: 0 calc(${designUnit} * 1px);
- }
-
- :host {
- color: ${neutralForegroundHint};
- }
- `,
-});
diff --git a/examples/design-system-tutorial/src/components/card/card.styles.ts b/examples/design-system-tutorial/src/components/card/card.styles.ts
deleted file mode 100644
index 550b14c04b5..00000000000
--- a/examples/design-system-tutorial/src/components/card/card.styles.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import {
- controlCornerRadius,
- designUnit,
- fillColor,
- neutralForegroundRest,
- typeRampMinus1FontSize,
- typeRampMinus1LineHeight,
- typeRampPlus1FontSize,
- typeRampPlus1LineHeight,
-} from "@microsoft/fast-components";
-import { css } from "@microsoft/fast-element";
-import { DesignToken, display } from "@microsoft/fast-foundation";
-
-/**
- * Not only can we have system-wide design tokens, but we can
- * have component-specific tokens as well.
- */
-export const cardPadding = DesignToken.create("card-padding").withDefault(
- (el: HTMLElement) => designUnit.getValueFor(el) * 2
-);
-
-export const demoCardStyles = css`
- ${display("grid")} :host {
- --elevation: 4;
- grid-template-rows: calc(${designUnit} * 39px) 1fr auto calc(${designUnit} * 2px);
- background-color: ${fillColor};
- width: calc(${designUnit} * 75px);
- height: calc(${designUnit} * 76px);
- border-radius: calc(${controlCornerRadius} * 1px);
- contain: content;
- margin: calc(${designUnit} * 2px);
- box-shadow: 0 0 calc((var(--elevation) * 0.225px) + 2px)
- rgba(0, 0, 0, calc(0.11 * (2))),
- 0 calc(var(--elevation) * 0.4px) calc((var(--elevation) * 0.9px))
- rgba(0, 0, 0, calc(0.13));
- }
-
- .feature-image {
- overflow: hidden;
- }
-
- .feature-image ::slotted(img) {
- place-self: stretch;
- width: 100%;
- position: relative;
- top: 50%;
- transform: translateY(-50%);
- }
-
- .content,
- .footer {
- padding: 0 calc(${cardPadding} * 1px);
- }
-
- slot[name="heading"]::slotted(*) {
- color: ${neutralForegroundRest};
- font-size: ${typeRampPlus1FontSize};
- line-height: ${typeRampPlus1LineHeight};
- font-weight: 400;
- overflow: hidden;
- max-height: calc(${typeRampPlus1LineHeight} * 2);
- }
-
- fast-button::part(control) {
- transition: padding 0.2s ease-in-out;
- }
-
- fast-button:not(:hover)::part(control) {
- padding: 0;
- }
-
- ::slotted(fast-attribution) {
- margin-top: calc(${designUnit} * 2px);
- font-size: ${typeRampMinus1FontSize};
- line-height: ${typeRampMinus1LineHeight};
- }
-`;
diff --git a/examples/design-system-tutorial/src/components/card/card.template.ts b/examples/design-system-tutorial/src/components/card/card.template.ts
deleted file mode 100644
index 6a118ccb527..00000000000
--- a/examples/design-system-tutorial/src/components/card/card.template.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { html, ViewTemplate } from "@microsoft/fast-element";
-import { Button, FoundationElementTemplate } from "@microsoft/fast-foundation";
-import type { DemoCard, DemoCardDefinitionOptions } from "./card";
-
-/**
- * When creating components with FoundationElement.compose, the component definition
- * can provide either a template or a function that creates a template (shown below).
- * If a function is provided then the design system will provide the template function
- * with contextual information related to the design system, as well as the definition
- * configuration object provided by combining the base configuration with any customization
- * options provided by the developer. Together, these inputs enable customizing the template
- * for the component itself.
- *
- * Below, the context.tagFor helper is used to enable this card to be reusable with any
- * design system based Foundation Button. This could be fluent-button, fast-button, or
- * any custom button configured with the design system.
- *
- * Additionally, the definition object is used to allow the developer to specify custom
- * "like-button" slotted content. If supplied this will be used across all instances of this card,
- * overriding what was originally built-in.
- */
-export const template: FoundationElementTemplate<
- ViewTemplate,
- DemoCardDefinitionOptions
-> = (context, definition) => {
- const buttonTag = context.tagFor(Button);
-
- return html`
-
-
-
-
-
-
-
-
- `;
-};
diff --git a/examples/design-system-tutorial/src/components/card/card.ts b/examples/design-system-tutorial/src/components/card/card.ts
deleted file mode 100644
index 833736d9558..00000000000
--- a/examples/design-system-tutorial/src/components/card/card.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Card, FoundationElementDefinition } from "@microsoft/fast-foundation";
-import { ViewTemplate } from "@microsoft/fast-element";
-import { fillColor, neutralFillLayerRecipe } from "@microsoft/fast-components";
-
-/**
- * We can provide custom configuration for a component by defining a type as
- * shown below and then using it in template or style factories along with the
- * call to FoundationElement.compose.
- */
-export type DemoCardDefinitionOptions = FoundationElementDefinition & {
- likeButton?: ViewTemplate;
-};
-
-/**
- * While an empty class is technically not needed for use with FoundationElement.compose,
- * one is provided here as a demonstration of practices used in more complex components.
- */
-export class DemoCard extends Card {
- connectedCallback(): void {
- super.connectedCallback();
- const { parentElement } = this;
-
- if (parentElement) {
- fillColor.setValueFor(this, (el: HTMLElement) =>
- neutralFillLayerRecipe
- .getValueFor(this)
- .evaluate(el, fillColor.getValueFor(parentElement))
- );
- }
- }
-}
diff --git a/examples/design-system-tutorial/src/components/card/index.ts b/examples/design-system-tutorial/src/components/card/index.ts
deleted file mode 100644
index a4030fc1f97..00000000000
--- a/examples/design-system-tutorial/src/components/card/index.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { demoCardStyles as styles } from "./card.styles";
-import { template } from "./card.template";
-import { DemoCard, DemoCardDefinitionOptions } from "./card";
-
-/**
- * For more complex components, it may be good to separate the class, template,
- * and styles into their own files. That's what has been done with this example
- * component. When following this pattern, an index file can then be created where
- * the component is composed and/or where all the component pieces are exported.
- *
- * Below the template and styles are composed with the DemoCard class to create a
- * component that is configurable through the DesignSystem API. See the main.ts file
- * for how the demoCard function is used. As an experiment, try using that API to
- * override the likeButton slot content.
- */
-export const demoCard = DemoCard.compose({
- baseName: "demo-card",
- template,
- styles,
-});
-
-export * from "./card";
diff --git a/examples/design-system-tutorial/src/components/index.ts b/examples/design-system-tutorial/src/components/index.ts
deleted file mode 100644
index 71834fd8552..00000000000
--- a/examples/design-system-tutorial/src/components/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./attribution";
-export * from "./card/index";
-export * from "./navigation";
diff --git a/examples/design-system-tutorial/src/components/navigation.ts b/examples/design-system-tutorial/src/components/navigation.ts
deleted file mode 100644
index e2980364861..00000000000
--- a/examples/design-system-tutorial/src/components/navigation.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import {
- fillColor,
- neutralLayer2,
- neutralLayer3,
- neutralLayer4,
- neutralStrokeRest,
- strokeWidth,
-} from "@microsoft/fast-components";
-import { css, customElement, FASTElement, html } from "@microsoft/fast-element";
-import { display } from "@microsoft/fast-foundation";
-
-const template = html`
-
-`;
-
-/**
- * Notice how the styles use design tokens imported from the FAST system.
- * Design tokens can be used anywhere you would use a CSS variable.
- */
-const styles = css`
- ${display("block")} :host {
- background-color: ${fillColor};
- border-right: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};
- }
-`;
-
-/**
- * You do not have to use FoundationElement.compose to define components.
- * You can always use the simple decorator syntax. The decorator option is most
- * appropriate for app-specific components because it immediately defines the
- * component with the platform upon import. On the other hand, FoundationElement.compose
- * is better for reusable components, since it delays registration until the app developer
- * specifies it, and also allows the app developer the opportunity to customize the
- * component before it is defined.
- *
- * Note: When using the decorator approach, if your bundler tree-shakes, you will still
- * need to ensure that the component is statically traceable. The easiest way to do this
- * is to import the component and use it. See the main.ts file for how this component was
- * handled.
- */
-
-@customElement({
- name: "demo-navigation",
- template,
- styles,
-})
-export class Navigation extends FASTElement {
- connectedCallback(): void {
- super.connectedCallback();
-
- // When this element connects, it will alias the fillColor
- // token to the neutralLayer2 token for this element and its
- // descendants. Because FAST's color system is algorithmic,
- // setting the fill color causes other colors to update. This
- // can be seen when looking at the selected item color in the
- // tree-view that is nested in this navigation panel. Try commenting
- // and uncommenting the line below to see how the navigation changes.
- // Also try switching the value to neutralLayer3 or neutralLayer4.
- fillColor.setValueFor(this, neutralLayer2);
- }
-}
diff --git a/examples/design-system-tutorial/src/main.ts b/examples/design-system-tutorial/src/main.ts
deleted file mode 100644
index a1410e6d785..00000000000
--- a/examples/design-system-tutorial/src/main.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-import {
- baseLayerLuminance,
- ColorRecipe,
- controlCornerRadius,
- density,
- fastButton,
- fastCard,
- fastTreeItem,
- fastTreeView,
- fillColor,
- neutralFillLayerRecipe,
- neutralPalette,
- PaletteRGB,
- provideFASTDesignSystem,
- StandardLuminance,
- SwatchRGB,
-} from "@microsoft/fast-components";
-import { parseColorHexRGB } from "@microsoft/fast-colors";
-import { html } from "@microsoft/fast-element";
-import { demoCard, fastAttribution, Navigation } from "./components";
-
-/**
- * This expression prevents tree-shaking. See the {@link Navigation} definition
- * for more information.
- */
-Navigation;
-
-provideFASTDesignSystem().register(
- fastButton(),
- fastCard(),
- fastTreeView(),
- fastTreeItem(),
- fastAttribution(),
- demoCard()
-);
-
-const firstCard = document.querySelector("fast-demo-card") as HTMLElement;
-const containers = document.querySelectorAll(".container") as NodeListOf;
-const firstSection = containers[0];
-const secondSection = containers[1];
-
-/**
- * Demo 1 - Design Token Default Values
- *
- * Every token in Fast and FAST's design system has a default value. They are set
- * to the system's defaults to start but you can change them by importing the token
- * and calling its 'withDefault' method. Each token is strongly typed so that you can
- * only pass valid values.
- *
- * Uncomment the code below to change the default control corner radius to 0.
- */
-
-// controlCornerRadius.withDefault(0);
-
-/**
- * Demo 1.5 - Live Design Tokens
- *
- * Design tokens don't just represent static values. They are live. You can change a token
- * at any time during the life of your application.
- *
- * Uncomment the code below to see how we can increase the value of the control
- * corner radius over time.
- */
-
-// let value = 0;
-// controlCornerRadius.withDefault(value);
-// setInterval(() => controlCornerRadius.withDefault(value += 1), 1000);
-
-/**
- * Demo 2 - Light Mode and Dark Mode
- *
- * The design system's color model is algorithmically based around the concept
- * of "luminance" and "layers". By adjusting the luminance of the base layer,
- * you can switch the design system between light and dark mode, and
- * anywhere in between (luminance is a value from 0 to 1). To simplify the most common
- * luminosity settings, the StandardLuminance helper is provided.
- *
- * Uncomment the code below to switch the design system into dark mode.
- */
-
-// baseLayerLuminance.withDefault(StandardLuminance.LightMode);
-
-/**
- * Demo 3 - Token Values for DOM Trees
- *
- * In addition to being able to set default values for design tokens, you
- * can also set a token value so that it only applies to a specific part of
- * the DOM. Use the setValueFor method of a token to set its value only for the
- * DOM node provided and its descendants.
- *
- * Uncomment the code below to set the fill color only for the first card.
- */
-
-// fillColor.setValueFor(firstCard, (target: HTMLElement) => neutralPalette.getValueFor(target).get(4));
-
-/**
- * Uncomment the code below to set the fill color for the entire first section.
- */
-
-// fillColor.setValueFor(firstSection, (target: HTMLElement) => neutralPalette.getValueFor(target).get(4));
-
-/**
- * Demo 4 - Token Recipes
- *
- * Some color tokens get their values from algorithms we call "recipes". A color recipe is just
- * an object with an 'evaluate' method that returns a Swatch. In the same way that you can change
- * out individual tokens, you can also change recipes that control collections of tokens.
- *
- *
- * Below we change the neutralFillLayerRecipe to simply grab a fixed color lookup from
- * the neutral palette. Changing this recipe will affect all tokens based on the recipe.
- *
- * Uncomment the code below to see how changing the neutralFillLayerRecipe affects the design.
- */
-
-// const recipe: ColorRecipe = {
-// evaluate: (target: HTMLElement) => neutralPalette.getValueFor(target).get(4)
-// };
-//
-// neutralFillLayerRecipe.withDefault(recipe);
-
-/**
- * Demo 5 - Design Overhaul
- *
- * Change as many tokens as you need to get the effect you want.
- * Uncomment the code below to change defaults and sections in various ways.
- */
-
-// controlCornerRadius.withDefault(20);
-// density.withDefault(4);
-// neutralPalette.withDefault(PaletteRGB.create(SwatchRGB.from(parseColorHexRGB("#0078D4")!)))
-// neutralPalette.setValueFor(firstSection, PaletteRGB.create(SwatchRGB.create(0, 1, 0)));
-// neutralPalette.setValueFor(secondSection, PaletteRGB.create(SwatchRGB.create(1, 0, 0)));
-// baseLayerLuminance.withDefault(StandardLuminance.LightMode);
diff --git a/examples/design-system-tutorial/styles.css b/examples/design-system-tutorial/styles.css
deleted file mode 100644
index 0822fa9ae16..00000000000
--- a/examples/design-system-tutorial/styles.css
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * This prevents elements that have not been defined from displaying, preventing
- * a flash of un-styled content.
- */
-:not(:defined) {
- display: none;
-}
-
-body,
-html {
- min-height: 100vh;
- padding: 0;
- margin: 0;
- --top-offset: calc(var(--design-unit) * 28px);
-}
-body {
- background-color: var(--fill-color);
- color: var(--neutral-foreground-rest);
- font-family: var(--body-font);
-}
-
-#root {
- min-height: 100vh;
- display: grid;
- grid-template-columns: 1fr 4fr;
- gap: calc(var(--design-unit) * 1px);
-}
-
-.canvas {
- padding-right: calc(var(--design-unit) * 2px);
- margin-top: var(--top-offset);
-}
-
-.container {
- display: flex;
- flex-wrap: wrap;
-}
-
-demo-navigation fast-tree-view {
- margin-top: calc(var(--top-offset) + (var(--design-unit) * 2px));
-}
-
-fast-demo-card {
- grid-row: 2;
-}
-
-fast-demo-card:first-child {
- grid-column: 2;
-}
-
-fast-demo-card:nth-of-type(2) {
- grid-column: 3;
-}
diff --git a/examples/design-system-tutorial/tsconfig.json b/examples/design-system-tutorial/tsconfig.json
deleted file mode 100644
index 8672ed29cc7..00000000000
--- a/examples/design-system-tutorial/tsconfig.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
- "compilerOptions": {
- "pretty": true,
- "target": "ES2015",
- "module": "ES2015",
- "moduleResolution": "node",
- "importHelpers": true,
- "experimentalDecorators": true,
- "emitDecoratorMetadata": true,
- "declaration": true,
- "declarationMap": true,
- "sourceMap": true,
- "noEmitOnError": true,
- "skipLibCheck": true,
- "preserveConstEnums": true,
- "stripInternal": true,
- "strict": true,
- "outDir": "dist/build",
- "rootDir": "src",
- "lib": [
- "dom",
- "esnext"
- ]
- },
- "include": [
- "src"
- ]
-}
\ No newline at end of file
diff --git a/examples/design-system-tutorial/webpack.config.js b/examples/design-system-tutorial/webpack.config.js
deleted file mode 100644
index c82ea75cb57..00000000000
--- a/examples/design-system-tutorial/webpack.config.js
+++ /dev/null
@@ -1,39 +0,0 @@
-const path = require("path");
-
-module.exports = function (env, { mode }) {
- const production = mode === "production";
- return {
- mode: production ? "production" : "development",
- devtool: production ? "source-maps" : "inline-source-map",
- entry: {
- app: ["./src/main.ts"],
- },
- output: {
- filename: "bundle.js",
- },
- resolve: {
- extensions: [".ts", ".js"],
- modules: ["src", "node_modules"],
- },
- devServer: {
- port: 9000,
- historyApiFallback: true,
- writeToDisk: true,
- open: !process.env.CI,
- lazy: false,
- },
- module: {
- rules: [
- {
- test: /\.ts$/i,
- use: [
- {
- loader: "ts-loader",
- },
- ],
- exclude: /node_modules/,
- },
- ],
- },
- };
-};
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
-