Skip to content

Commit

Permalink
feat(appearance, badge): add subtle-light to badge (VIV-1992) (#1954)
Browse files Browse the repository at this point in the history
  • Loading branch information
@rachelbt
rachelbt authored Oct 31, 2024
1 parent c5dd033 commit ffcab5f
Show file tree
Hide file tree
Showing 15 changed files with 191 additions and 6 deletions.
2 changes: 1 addition & 1 deletion apps/docs/assets/scripts/components/appearance-ui/appearance-ui.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
@use '../../../../../../libs/shared/src/lib/sass/mixins/appearance/config' as
appearance-config with (
$appearances: filled ghost ghost-light outlined outlined-light duotone subtle
fieldset listitem,
subtle-light fieldset listitem,
$states: idle hover active selected checked checkedAndHover selectedAndHover
disabled selectedAndDisabled readonly,
$default: filled
Expand Down
1 change: 1 addition & 0 deletions apps/docs/assets/scripts/components/appearance-ui/appearance-ui.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export type AppearanceUIAppearance = Extract<
| Appearance.Duotone
| Appearance.Fieldset
| Appearance.Subtle
| Appearance.SubtleLight
| Appearance.Listitem
>;

Expand Down
Binary file modified ...ance-ui/ui.test.ts-snapshots/snapshots-appearance-ui-Desktop-Chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...rance-ui/ui.test.ts-snapshots/snapshots-appearance-ui-Desktop-Firefox-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...arance-ui/ui.test.ts-snapshots/snapshots-appearance-ui-Desktop-Safari-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
62 changes: 61 additions & 1 deletion apps/docs/content/designs/appearance.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -619,4 +619,64 @@ currently ghost-light appearance is being used only with `accent` connotation
</div>
```

## Last update: 06.2024
## Subtle-Light

### Used in

`badge`,

```html preview
<style>
.grid {
display: grid;
grid-template-columns: 80px auto;
inline-size: 820px;
row-gap: 12px;
align-items: center;
}
span {
max-width: 80px;
}
.not-set {
grid-column: 1/-1;
}
.one-example {
grid-column: 2/-1;
}
</style>
<div class="grid">
<span><b>idle</b></span>
<docs-appearance-ui appearance="subtle-light"></docs-appearance-ui>

<span><b>hover</b></span>
<docs-appearance-ui hovered appearance="subtle-light"></docs-appearance-ui>

<span><b>active</b></span>
<docs-appearance-ui active appearance="subtle-light"></docs-appearance-ui>

<span><b>selected</b></span>
<docs-appearance-ui selected appearance="subtle-light"></docs-appearance-ui>

<span><b>selected & hover</b></span>
<docs-appearance-ui
selected
hovered
appearance="subtle-light"
></docs-appearance-ui>

<span><b>disabled</b></span>
<docs-appearance-ui
disabled
appearance="subtle-light"
class="one-example"
></docs-appearance-ui>

<span><b>selected & disabled</b></span>
<span class="one-example" class="one-example">not set</span>

<span><b>readonly</b></span>
<span class="one-example" class="one-example">not set</span>
</div>
```

## Last update: 10.2024
39 changes: 38 additions & 1 deletion libs/components/src/lib/badge/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,12 +71,13 @@ Use the `icon-trailing` attribute to control whether the icon is aligned to the

Set the `appearance` attribute to change the badge's appearance.

- Type: `'filled'` | `'subtle'` | `'duotone'`
- Type: `'filled'` | `'subtle'` | `'subtle-light'` | `'duotone'`
- Default: `'filled'`

```html preview
<vwc-badge text="filled" appearance="filled"></vwc-badge>
<vwc-badge text="subtle" appearance="subtle"></vwc-badge>
<vwc-badge text="subtle-light" appearance="subtle-light"></vwc-badge>
<vwc-badge text="duotone" appearance="duotone"></vwc-badge>
```

Expand Down Expand Up @@ -128,6 +129,42 @@ It accepts a subset of predefined values.
<vwc-badge text="alert" appearance="subtle" connotation="alert"></vwc-badge>
```

#### Subtle-Light badge with connotation

```html preview
<vwc-badge
text="accent"
appearance="subtle-light"
connotation="accent"
></vwc-badge>
<vwc-badge text="cta" appearance="subtle-light" connotation="cta"></vwc-badge>
<vwc-badge
text="information"
appearance="subtle-light"
connotation="information"
></vwc-badge>
<vwc-badge
text="announcement"
appearance="subtle-light"
connotation="announcement"
></vwc-badge>
<vwc-badge
text="success"
appearance="subtle-light"
connotation="success"
></vwc-badge>
<vwc-badge
text="warning"
appearance="subtle-light"
connotation="warning"
></vwc-badge>
<vwc-badge
text="alert"
appearance="subtle-light"
connotation="alert"
></vwc-badge>
```

#### Duotone badge with connotation

```html preview
Expand Down
5 changes: 3 additions & 2 deletions libs/components/src/lib/badge/badge.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,14 @@
@use 'partials/variables' as variables;
@use '../../../../shared/src/lib/sass/mixins/connotation/config' with (
$connotations: accent cta success alert warning information announcement,
$shades: primary primary-text intermediate soft contrast pale fierce firm-all,
$shades: primary primary-text intermediate soft contrast pale fierce
fierce-primary firm firm-all,
$default: accent
);
@use '../../../../shared/src/lib/sass/mixins/connotation' as connotation;
@use '../../../../shared/src/lib/sass/mixins/appearance/config' as
appearance-config with (
$appearances: filled duotone subtle,
$appearances: filled duotone subtle subtle-light,
$states: idle,
$default: filled
);
Expand Down
5 changes: 4 additions & 1 deletion libs/components/src/lib/badge/badge.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,10 @@ export type BadgeConnotation = Extract<
*/
export type BadgeAppearance = Extract<
Appearance,
Appearance.Filled | Appearance.Duotone | Appearance.Subtle
| Appearance.Filled
| Appearance.Duotone
| Appearance.Subtle
| Appearance.SubtleLight
>;

/**
Expand Down
7 changes: 7 additions & 0 deletions libs/components/src/lib/badge/ui.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,13 @@ test('should show the component', async ({ page }: { page: Page }) => {
<vwc-badge text='success' appearance='subtle' connotation='success'></vwc-badge>
<vwc-badge text='warning' appearance='subtle' connotation='warning'></vwc-badge>
<vwc-badge text='alert' appearance='subtle' connotation='alert'></vwc-badge>
<vwc-badge text='accent' appearance='subtle-light' connotation='accent'></vwc-badge>
<vwc-badge text='cta' appearance='subtle-light' connotation='cta'></vwc-badge>
<vwc-badge text='information' appearance='subtle-light' connotation='information'></vwc-badge>
<vwc-badge text='announcement' appearance='subtle-light' connotation='announcement'></vwc-badge>
<vwc-badge text='success' appearance='subtle-light' connotation='success'></vwc-badge>
<vwc-badge text='warning' appearance='subtle-light' connotation='warning'></vwc-badge>
<vwc-badge text='alert' appearance='subtle-light' connotation='alert'></vwc-badge>
<vwc-badge text='accent' appearance='duotone' connotation='accent'></vwc-badge>
<vwc-badge text='cta' appearance='duotone' connotation='cta'></vwc-badge>
<vwc-badge text='information' appearance='duotone' connotation='information'></vwc-badge>
Expand Down
Binary file modified ...s/src/lib/badge/ui.test.ts-snapshots/snapshots-badge-Desktop-Chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ts/src/lib/badge/ui.test.ts-snapshots/snapshots-badge-Desktop-Firefox-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...nts/src/lib/badge/ui.test.ts-snapshots/snapshots-badge-Desktop-Safari-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions libs/components/src/lib/enums.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export enum Appearance {
Duotone = 'duotone',
Fieldset = 'fieldset',
Subtle = 'subtle',
SubtleLight = 'subtle-light',
Ghost = 'ghost',
GhostLight = 'ghost-light',
OutlinedLight = 'outlined-light',
Expand Down
75 changes: 75 additions & 0 deletions libs/shared/src/lib/sass/mixins/appearance/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,16 @@ $states-mapping: (
fill: var(#{connotation.get-connotation-token(soft)}),
outline: transparent,
),
subtle-light: (
text: var(#{connotation.get-connotation-token(contrast)}),
fill:
color-mix(
in srgb,
var(#{connotation.get-connotation-token(primary)}),
transparent 85%
),
outline: transparent,
),
listitem: (
text: var(#{connotation.get-connotation-token(firm)}),
fill: transparent,
Expand Down Expand Up @@ -106,6 +116,16 @@ $states-mapping: (
fill: var(#{connotation.get-connotation-token(faint)}),
outline: transparent,
),
subtle-light: (
text: var(#{connotation.get-connotation-token(contrast)}),
fill:
color-mix(
in srgb,
var(#{connotation.get-connotation-token(primary)}),
transparent 75%
),
outline: transparent,
),
listitem: (
text: var(#{connotation.get-connotation-token(firm)}),
fill: var(#{connotation.get-connotation-token(faint)}),
Expand Down Expand Up @@ -163,6 +183,16 @@ $states-mapping: (
fill: var(#{connotation.get-connotation-token(dim)}),
outline: transparent,
),
subtle-light: (
text: var(#{connotation.get-connotation-token(contrast)}),
fill:
color-mix(
in srgb,
var(#{connotation.get-connotation-token(primary)}),
transparent 65%
),
outline: transparent,
),
listitem: (
text: var(#{connotation.get-connotation-token(firm)}),
fill: var(#{connotation.get-connotation-token(soft)}),
Expand Down Expand Up @@ -210,6 +240,11 @@ $states-mapping: (
fill: var(#{constants.$vvd-color-neutral-100}),
outline: transparent,
),
subtle-light: (
text: var(#{constants.$vvd-color-neutral-300}),
fill: var(#{constants.$vvd-color-neutral-100}),
outline: transparent,
),
listitem: (
text: var(#{constants.$vvd-color-neutral-300}),
fill: transparent,
Expand Down Expand Up @@ -257,6 +292,11 @@ $states-mapping: (
fill: notset,
outline: notset,
),
subtle-light: (
text: notset,
fill: notset,
outline: notset,
),
listitem: (
text: var(#{constants.$vvd-color-neutral-600}),
fill: transparent,
Expand Down Expand Up @@ -314,6 +354,11 @@ $states-mapping: (
fill: var(#{connotation.get-connotation-token(pale)}),
outline: transparent,
),
subtle-light: (
text: var(#{constants.$vvd-color-canvas}),
fill: var(#{connotation.get-connotation-token(firm)}),
outline: transparent,
),
listitem: (
text: var(#{connotation.get-connotation-token(firm)}),
fill: var(#{connotation.get-connotation-token(soft)}),
Expand Down Expand Up @@ -371,6 +416,16 @@ $states-mapping: (
fill: var(#{connotation.get-connotation-token(pale)}),
outline: transparent,
),
subtle-light: (
text: var(#{connotation.get-connotation-token(primary-text)}),
fill:
color-mix(
in srgb,
var(#{connotation.get-connotation-token(fierce-primary)}),
transparent 10%
),
outline: transparent,
),
listitem: (
text: var(#{connotation.get-connotation-token(firm)}),
fill: var(#{connotation.get-connotation-token(dim)}),
Expand Down Expand Up @@ -418,6 +473,11 @@ $states-mapping: (
fill: notset,
outline: notset,
),
subtle-light: (
text: notset,
fill: notset,
outline: notset,
),
listitem: (
text: var(#{constants.$vvd-color-neutral-300}),
fill: var(#{constants.$vvd-color-neutral-200}),
Expand Down Expand Up @@ -470,6 +530,11 @@ $states-mapping: (
fill: var(#{connotation.get-connotation-token(pale)}),
outline: transparent,
),
subtle-light: (
text: var(#{constants.$vvd-color-canvas}),
fill: var(#{connotation.get-connotation-token(firm)}),
outline: transparent,
),
listitem: (
text: var(#{connotation.get-connotation-token(firm)}),
fill: var(#{connotation.get-connotation-token(soft)}),
Expand Down Expand Up @@ -522,6 +587,16 @@ $states-mapping: (
fill: var(#{connotation.get-connotation-token(pale)}),
outline: transparent,
),
subtle-light: (
text: var(#{connotation.get-connotation-token(primary-text)}),
fill:
color-mix(
in srgb,
var(#{connotation.get-connotation-token(fierce-primary)}),
transparent 10%
),
outline: transparent,
),
listitem: (
text: var(#{connotation.get-connotation-token(firm)}),
fill: var(#{connotation.get-connotation-token(dim)}),
Expand Down

0 comments on commit ffcab5f

Please sign in to comment.