-
Notifications
You must be signed in to change notification settings - Fork 600
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add accent color and background color selection (#3123)
* feat: add color pickers and preview * formatting * added dark / light mode * add prettier * ran prettier * saved last index for selecting background * addressed Rob's comments * ran prettier * addressed comments
- Loading branch information
Showing
11 changed files
with
356 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
146 changes: 146 additions & 0 deletions
146
sites/fast-website/src/app/components/color-swatch/color-swatch.styles.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,146 @@ | ||
| import { css } from "@microsoft/fast-element"; | ||
| import { | ||
| display, | ||
| heightNumber, | ||
| neutralFillInputHoverBehavior, | ||
| neutralFillInputRestBehavior, | ||
| neutralOutlineHoverBehavior, | ||
| neutralOutlineRestBehavior, | ||
| forcedColorsStylesheetBehavior, | ||
| SystemColors, | ||
| focusVisible, | ||
| disabledCursor, | ||
| } from "@microsoft/fast-components"; | ||
| import { neutralForegroundRestBehavior } from "@microsoft/fast-components"; | ||
|
|
||
| export const ColorSwatchStyles = css` | ||
| ${display("inline-flex")} :host { | ||
| --input-size: calc((${heightNumber} / 2) + var(--design-unit)); | ||
| align-items: center; | ||
| outline: none; | ||
| margin: calc(var(--design-unit) * 1px) 0; | ||
| ${ | ||
| /* | ||
| * Chromium likes to select label text or the default slot when | ||
| * the radio button is clicked. Maybe there is a better solution here? | ||
| */ "" | ||
| } user-select: none; | ||
| position: relative; | ||
| flex-direction: row; | ||
| transition: all 0.2s ease-in-out; | ||
| } | ||
| .control { | ||
| position: relative; | ||
| width: calc(var(--input-size) * 1px); | ||
| height: calc(var(--input-size) * 1px); | ||
| box-sizing: border-box; | ||
| border-radius: calc(var(--corner-radius) * 1px); | ||
| border: calc(var(--outline-width) * 1px) solid var(--neutral-outline-rest); | ||
| outline: none; | ||
| cursor: pointer; | ||
| } | ||
| .label__hidden { | ||
| display: none; | ||
| } | ||
| .label { | ||
| font-family: var(--body-font); | ||
| color: var(--neutral-foreground-rest); | ||
| ${ | ||
| /* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast-dna/issues/2766 */ "" | ||
| } padding-inline-start: calc(var(--design-unit) * 2px + 2px); | ||
| margin-inline-end: calc(var(--design-unit) * 2px + 2px); | ||
| cursor: pointer; | ||
| ${ | ||
| /* Font size is temporary - replace when adaptive typography is figured out */ "" | ||
| } font-size: calc(1rem + (var(--density) * 2px)); | ||
| } | ||
| .checked-indicator { | ||
| position: absolute; | ||
| top: 5px; | ||
| left: 5px; | ||
| right: 5px; | ||
| bottom: 5px; | ||
| border-radius: 50%; | ||
| display: inline-block; | ||
| flex-shrink: 0; | ||
| background: var(--neutral-foreground-rest); | ||
| fill: var(--neutral-foreground-rest); | ||
| opacity: 0; | ||
| pointer-events: none; | ||
| } | ||
| .control:hover { | ||
| border-color: var(--neutral-outline-hover); | ||
| } | ||
| :host(:${focusVisible}) .control { | ||
| box-shadow: 0 0 0 1px var(--neutral-focus) inset; | ||
| border-color: var(--neutral-focus); | ||
| } | ||
| :host(.disabled) .label, | ||
| :host(.readonly) .label, | ||
| :host(.readonly) .control, | ||
| :host(.disabled) .control { | ||
| cursor: ${disabledCursor}; | ||
| } | ||
| :host(.checked) .checked-indicator { | ||
| opacity: 1; | ||
| } | ||
| :host(.disabled) { | ||
| opacity: var(--disabled-opacity); | ||
| } | ||
| `.withBehaviors( | ||
| neutralFillInputHoverBehavior, | ||
| neutralFillInputRestBehavior, | ||
| neutralForegroundRestBehavior, | ||
| neutralOutlineHoverBehavior, | ||
| neutralOutlineRestBehavior, | ||
| forcedColorsStylesheetBehavior( | ||
| css` | ||
| .control, .control:hover, .control:active { | ||
| forced-color-adjust: none; | ||
| border-color: ${SystemColors.FieldText}; | ||
| background: ${SystemColors.Field}; | ||
| } | ||
| :host(:${focusVisible}) .control { | ||
| border-color: ${SystemColors.Highlight}; | ||
| } | ||
| :host(.checked) .control:hover, .control:active { | ||
| border-color: ${SystemColors.Highlight}; | ||
| background: ${SystemColors.Highlight}; | ||
| } | ||
| :host(.checked) .checked-indicator { | ||
| background: ${SystemColors.Highlight}; | ||
| fill: ${SystemColors.Highlight}; | ||
| } | ||
| :host(.checked) .control:hover .checked-indicator { | ||
| background: ${SystemColors.HighlightText}; | ||
| fill: ${SystemColors.HighlightText}; | ||
| } | ||
| :host(.disabled) { | ||
| forced-color-adjust: none; | ||
| opacity: 1; | ||
| } | ||
| :host(.disabled) .label { | ||
| color: ${SystemColors.GrayText}; | ||
| } | ||
| :host(.disabled) .control, | ||
| :host(.checked.disabled) .control:hover, .control:active { | ||
| background: ${SystemColors.Field}; | ||
| border-color: ${SystemColors.GrayText}; | ||
| } | ||
| :host(.disabled) .checked-indicator, | ||
| :host(.checked.disabled) .control:hover .checked-indicator { | ||
| fill: ${SystemColors.GrayText}; | ||
| background: ${SystemColors.GrayText}; | ||
| } | ||
| ` | ||
| ) | ||
| ); |
31 changes: 31 additions & 0 deletions
31
sites/fast-website/src/app/components/color-swatch/color-swatch.template.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import { html, when, slotted } from "@microsoft/fast-element"; | ||
| import { ColorSwatch } from "./color-swatch"; | ||
|
|
||
| export const ColorSwatchTemplate = html<ColorSwatch>` | ||
| <template | ||
| role="radio" | ||
| class="${x => (x.checked ? "checked" : "")} ${x => | ||
| x.readOnly ? "readonly" : ""}" | ||
| aria-checked="${x => x.checked}" | ||
| aria-required="${x => x.required}" | ||
| aria-disabled="${x => x.disabled}" | ||
| aria-readonly="${x => x.readOnly}" | ||
| @keypress="${(x, c) => x.keypressHandler(c.event as KeyboardEvent)}" | ||
| @click="${(x, c) => x.clickHandler(c.event as MouseEvent)}" | ||
| > | ||
| <div part="control" class="control" style="background: ${x => x.backgroundColor}"> | ||
| <slot name="checked-indicator"> | ||
| <div part="checked-indicator" class="checked-indicator"></div> | ||
| </slot> | ||
| </div> | ||
| <label | ||
| part="label" | ||
| class="${x => | ||
| x.defaultSlottedNodes && x.defaultSlottedNodes.length | ||
| ? "label" | ||
| : "label label__hidden"}" | ||
| > | ||
| <slot ${slotted("defaultSlottedNodes")}></slot> | ||
| </label> | ||
| </template> | ||
| `; |
10 changes: 10 additions & 0 deletions
10
sites/fast-website/src/app/components/color-swatch/color-swatch.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import { attr, observable } from "@microsoft/fast-element"; | ||
| import { FASTRadio } from "@microsoft/fast-components"; | ||
|
|
||
| export class ColorSwatch extends FASTRadio { | ||
| @attr({ attribute: "background-color" }) | ||
| public backgroundColor: string = "#F33378"; | ||
|
|
||
| @observable | ||
| public defaultSlottedNodes: Node[]; | ||
| } |
14 changes: 14 additions & 0 deletions
14
sites/fast-website/src/app/components/color-swatch/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import { customElement } from "@microsoft/fast-element"; | ||
| import { ColorSwatch } from "./color-swatch"; | ||
| import { ColorSwatchTemplate as template } from "./color-swatch.template"; | ||
| import { ColorSwatchStyles as styles } from "./color-swatch.styles"; | ||
|
|
||
| @customElement({ | ||
| name: "site-color-swatch", | ||
| template, | ||
| styles, | ||
| }) | ||
| export class SiteColorSwatch extends ColorSwatch {} | ||
| export * from "./color-swatch.template"; | ||
| export * from "./color-swatch.styles"; | ||
| export * from "./color-swatch"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.