From d1a9793fec1611390a2a7f250554bedd301640ee Mon Sep 17 00:00:00 2001 From: lindsaym-fa Date: Wed, 5 Jun 2024 16:57:06 -0400 Subject: [PATCH] finalize component group properties and docs --- docs/_includes/sidebar.njk | 2 +- .../{groups.md => component-groups.md} | 25 +++++++++++- src/components/range/range.styles.ts | 6 +-- src/components/tooltip/tooltip.styles.ts | 9 +++-- src/components/tooltip/tooltip.ts | 4 ++ src/themes/default.css | 38 +++++++------------ 6 files changed, 50 insertions(+), 34 deletions(-) rename docs/docs/theming/{groups.md => component-groups.md} (81%) diff --git a/docs/_includes/sidebar.njk b/docs/_includes/sidebar.njk index 5a1da77cb..7efc6dcb7 100644 --- a/docs/_includes/sidebar.njk +++ b/docs/_includes/sidebar.njk @@ -261,6 +261,6 @@ Z-index
  • - Component Groups + Component Groups
    • \ No newline at end of file diff --git a/docs/docs/theming/groups.md b/docs/docs/theming/component-groups.md similarity index 81% rename from docs/docs/theming/groups.md rename to docs/docs/theming/component-groups.md index 8631582b9..938392913 100644 --- a/docs/docs/theming/groups.md +++ b/docs/docs/theming/component-groups.md @@ -79,7 +79,7 @@ Panels consist of components with larger, contained surface areas like [callout] | `--wa-panel-border-radius` | `var(--wa-border-radius-m)` | ```html {.example} -
    +
    +``` + +## Tooltips + +Tooltip styles are shared between the [tooltip](/docs/components/tooltip) component and the tooltip implementation in [range](/docs/components/range). + +| Custom Property | Default Value | +| ---------------------------- | ----------------------------------- | +| `--wa-tooltip-arrow-size` | `0.375rem` | +| `--wa-tooltip-background` | `var(--wa-color-neutral-fill-loud)` | +| `--wa-tooltip-border-radius` | `var(--wa-border-radius-s)` | +| `--wa-tooltip-content-color` | `var(--wa-color-neutral-on-loud)` | +| `--wa-tooltip-font-size` | `var(--wa-font-size-s)` | +| `--wa-tooltip-line-height` | `var(--wa-line-height-normal)` | + +```html {.example} + + + +
    + ``` \ No newline at end of file diff --git a/src/components/range/range.styles.ts b/src/components/range/range.styles.ts index ec30c0330..f7d0ba608 100644 --- a/src/components/range/range.styles.ts +++ b/src/components/range/range.styles.ts @@ -152,11 +152,11 @@ export default css` border-radius: var(--wa-tooltip-border-radius); background-color: var(--wa-tooltip-background); font-family: inherit; - font-size: var(--wa-tooltip-content-font-size); - line-height: var(--wa-tooltip-content-line-height); + font-size: var(--wa-tooltip-font-size); + line-height: var(--wa-tooltip-line-height); color: var(--wa-tooltip-content-color); opacity: 0; - padding: var(--wa-tooltip-padding); + padding: var(--wa-space-2xs) var(--wa-space-xs); transition: var(--wa-transition-normal) opacity; pointer-events: none; } diff --git a/src/components/tooltip/tooltip.styles.ts b/src/components/tooltip/tooltip.styles.ts index ab14af08a..7cd006e3d 100644 --- a/src/components/tooltip/tooltip.styles.ts +++ b/src/components/tooltip/tooltip.styles.ts @@ -5,7 +5,8 @@ export default css` --background: var(--wa-tooltip-background); --border-radius: var(--wa-tooltip-border-radius); --content-color: var(--wa-tooltip-content-color); - --max-width: 20rem; + --max-width: 30ch; + --padding: var(--wa-space-2xs) var(--wa-space-xs); display: contents; } @@ -42,12 +43,12 @@ export default css` border-radius: var(--border-radius); background: var(--background); font-family: inherit; - font-size: var(--wa-tooltip-content-font-size); - line-height: var(--wa-tooltip-content-line-height); + font-size: var(--wa-tooltip-font-size); + line-height: var(--wa-tooltip-line-height); text-align: start; white-space: normal; color: var(--content-color); - padding: var(--wa-tooltip-padding); + padding: var(--padding); user-select: none; -webkit-user-select: none; } diff --git a/src/components/tooltip/tooltip.ts b/src/components/tooltip/tooltip.ts index 8b6c75777..5e5c63cae 100644 --- a/src/components/tooltip/tooltip.ts +++ b/src/components/tooltip/tooltip.ts @@ -35,7 +35,11 @@ import type { CSSResultGroup } from 'lit'; * @csspart base__arrow - The popup's exported `arrow` part. Use this to target the tooltip's arrow. * @csspart body - The tooltip's body where its content is rendered. * + * @cssproperty --background - The tooltip's background styles. + * @cssproperty --border-radius - The radius of the tooltip's corners. + * @cssproperty --content-color - The color of the tooltip's content. * @cssproperty --max-width - The maximum width of the tooltip before its content will wrap. + * @cssproperty --padding - The padding within the tooltip. * @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering. * @cssproperty --show-delay - The amount of time to wait before showing the tooltip when hovering. */ diff --git a/src/themes/default.css b/src/themes/default.css index 9b7d5a61c..0a05c8d89 100644 --- a/src/themes/default.css +++ b/src/themes/default.css @@ -163,19 +163,13 @@ /** * Semantic Colors - * Five semantic groups help reinforce a component's message, intended usage, or expected results through meaningful hues - - * * Brand for your brand color - * * Success for validity or confirmation - * * Neutral for ordinary or inactive content - * * Warning for caution or uncertainty - * * Danger for errors or risk + * Five semantic groups - brand, success, neutral, warning, and danger - help reinforce a component's message, intended usage, or expected results. * Within these groups, each color specifies a role - * * Fill for background colors or areas larger than a few pixels * * Border for borders, dividers, and other stroke-like elements * * On for content displayed on a fill with the corresponding attention * Each role has three options for attention - quiet, normal, and loud - where quiet draws the least attention and loud draws the most. */ - --wa-color-brand-fill-quiet: var(--wa-color-primary-95); --wa-color-brand-fill-normal: var(--wa-color-primary-90); --wa-color-brand-fill-loud: var(--wa-color-primary-50); @@ -237,7 +231,7 @@ /* The default type scale is roughly based on the Major Second scale (x1.125), * with each value rounded to the nearest whole pixel based on a 16px root font size. * For larger font sizes, every other step on the scale is skipped in order to maximize variation. - * A multiplier is provided to increase or decrease all font sizes at once. */ + * A multiplier is provided to uniformly increase or decrease all font sizes. */ --wa-font-size-multiplier: 1; --wa-font-size-2xs: calc(0.6875rem * var(--wa-font-size-multiplier)); /* 11px */ --wa-font-size-xs: calc(0.75rem * var(--wa-font-size-multiplier)); /* 12px */ @@ -267,10 +261,9 @@ /** * Spacing - * Space properties help create predictable rhythm and meaningful proximity. */ - /* Space is designed to scale according to a single base value. - * The base value is intended for calculations and is not used by components directly. */ + + /* A multiplier is provided to uniformly increase or decrease all spacing. */ --wa-space-multiplier: 1; --wa-space-3xs: calc(var(--wa-space-multiplier) * 0.125rem); /* 2px */ --wa-space-2xs: calc(var(--wa-space-multiplier) * 0.25rem); /* 4px */ @@ -287,15 +280,13 @@ */ --wa-border-style: solid; - /* Border width is designed to scale according to a single base value. - * The base value is intended for calculations and is not used by components directly. */ + /* A multiplier is provided to uniformly increase or decrease all border widths. */ --wa-border-width-multiplier: 0.0625; --wa-border-width-s: calc(var(--wa-border-width-multiplier) * 1rem); --wa-border-width-m: calc(var(--wa-border-width-multiplier) * 2rem); --wa-border-width-l: calc(var(--wa-border-width-multiplier) * 3rem); - /* Border radius is designed to scale according to a single base value. - * The base value is intended for calculations and is not used by components directly. */ + /* A multiplier is provided to uniformly increase or decrease all border radii. */ --wa-border-radius-multiplier: 0.375; --wa-border-radius-xs: calc(var(--wa-border-radius-multiplier) * 0.5rem); --wa-border-radius-s: calc(var(--wa-border-radius-multiplier) * 1rem); @@ -330,8 +321,10 @@ --wa-z-index-tooltip: 1000; /** - * Component groups + * Component Groups */ + + /* Form controls */ --wa-form-control-background: var(--wa-color-surface-default); --wa-form-control-border-style: var(--wa-border-style); @@ -343,7 +336,7 @@ --wa-form-control-label-color: var(--wa-color-text-normal); --wa-form-control-label-font-weight: var(--wa-font-weight-normal); - --wa-form-control-label-line-height: var(--wa-line-height-normal); + --wa-form-control-label-line-height: var(--wa-line-height-condensed); --wa-form-control-value-color: var(--wa-color-text-normal); --wa-form-control-value-font-weight: var(--wa-font-weight-body); @@ -365,15 +358,14 @@ --wa-form-control-required-content-color: inherit; --wa-form-control-required-content-offset: -0.1em; + /* Panels */ --wa-panel-border-style: var(--wa-border-style); --wa-panel-border-width: var(--wa-border-width-s); --wa-panel-border-radius: var(--wa-border-radius-m); --wa-flow-spacing: var(--wa-space-2xl); - /** - * From 2.x - */ + /* Tooltips */ --wa-tooltip-arrow-size: 0.375rem; --wa-tooltip-background: var(--wa-color-neutral-fill-loud); @@ -381,10 +373,8 @@ --wa-tooltip-border-radius: var(--wa-border-radius-s); --wa-tooltip-content-color: var(--wa-color-neutral-on-loud); - --wa-tooltip-content-font-size: var(--wa-font-size-s); - --wa-tooltip-content-line-height: var(--wa-line-height-normal); - - --wa-tooltip-padding: var(--wa-space-2xs) var(--wa-space-xs); + --wa-tooltip-font-size: var(--wa-font-size-s); + --wa-tooltip-line-height: var(--wa-line-height-normal); } .wa-theme-default-dark,