opacity-checkerboard

NPM

1.0.0
Examples Changelog

1.0.0 (2024-10-31) #

Note: Version bump only for package @spectrum-web-components/opacity-checkerboard

0.49.0 (2024-10-15) #

Note: Version bump only for package @spectrum-web-components/opacity-checkerboard

0.48.1 (2024-10-01) #

Note: Version bump only for package @spectrum-web-components/opacity-checkerboard

0.48.0 (2024-09-17) #

Note: Version bump only for package @spectrum-web-components/opacity-checkerboard

0.47.2 (2024-09-03) #

Note: Version bump only for package @spectrum-web-components/opacity-checkerboard

0.47.1 (2024-08-27) #

Note: Version bump only for package @spectrum-web-components/opacity-checkerboard

0.47.0 (2024-08-20) #

Note: Version bump only for package @spectrum-web-components/opacity-checkerboard

0.46.0 (2024-08-08) #

Note: Version bump only for package @spectrum-web-components/opacity-checkerboard

0.45.0 (2024-07-30) #

Note: Version bump only for package @spectrum-web-components/opacity-checkerboard

0.44.0 (2024-07-15) #

Note: Version bump only for package @spectrum-web-components/opacity-checkerboard

0.43.0 (2024-06-11) #

Note: Version bump only for package @spectrum-web-components/opacity-checkerboard

0.42.5 (2024-05-24) #

Note: Version bump only for package @spectrum-web-components/opacity-checkerboard

0.42.4 (2024-05-14) #

Note: Version bump only for package @spectrum-web-components/opacity-checkerboard

0.42.3 (2024-05-01) #

Note: Version bump only for package @spectrum-web-components/opacity-checkerboard

0.42.2 (2024-04-03) #

Note: Version bump only for package @spectrum-web-components/opacity-checkerboard

0.42.1 (2024-04-02) #

Note: Version bump only for package @spectrum-web-components/opacity-checkerboard

0.42.0 (2024-03-19) #

Features #

  • asset: use core tokens (99e76f4)

0.41.2 (2024-03-05) #

Note: Version bump only for package @spectrum-web-components/opacity-checkerboard

0.41.1 (2024-02-22) #

Note: Version bump only for package @spectrum-web-components/opacity-checkerboard

0.41.0 (2024-02-13) #

Note: Version bump only for package @spectrum-web-components/opacity-checkerboard

0.40.5 (2024-02-05) #

Note: Version bump only for package @spectrum-web-components/opacity-checkerboard

0.40.4 (2024-01-29) #

Note: Version bump only for package @spectrum-web-components/opacity-checkerboard

0.40.3 (2024-01-11) #

Note: Version bump only for package @spectrum-web-components/opacity-checkerboard

0.40.2 (2023-12-18) #

Note: Version bump only for package @spectrum-web-components/opacity-checkerboard

0.40.1 (2023-12-05) #

Note: Version bump only for package @spectrum-web-components/opacity-checkerboard

0.40.0 (2023-11-16) #

Note: Version bump only for package @spectrum-web-components/opacity-checkerboard

0.39.4 (2023-11-02) #

Note: Version bump only for package @spectrum-web-components/opacity-checkerboard

0.39.3 (2023-10-18) #

Bug Fixes #

  • update deps graph, fix imports (f633005)

0.39.2 (2023-10-13) #

Note: Version bump only for package @spectrum-web-components/opacity-checkerboard

0.39.1 (2023-10-06) #

Note: Version bump only for package @spectrum-web-components/opacity-checkerboard

0.39.0 (2023-09-25) #

Bug Fixes #

  • color-handle,color-loupe,swatch,thumbnail: use the Opacity Checkerboard package (47e1fc4)
  • opacity checkerboard inclusion order (#3651) (4f417dc)

0.38.0 (2023-09-05) #

Note: Version bump only for package @spectrum-web-components/opacity-checkerboard

0.37.0 (2023-08-18) #

Note: Version bump only for package @spectrum-web-components/opacity-checkerboard

0.36.0 (2023-08-18) #

Features #

  • opacity-checkerboard: add component (#3416) (90202f9)

Description #

The opacity-checkerboard class is used to highlight opacity. Leverage these styles in your component as outlined below to unify you application's visuals with those delivered by various Spectrum Web Components.

Usage #

Import the styles from the opacity-checkerboard CSS:

import opacityCheckerBoardStyles from '@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js';

Add it to your component's styles array before your component's styles. The order that you include the styles in makes a difference, because selectors within opacity checkerboard may have the same specificity as those within your component.

public static override get styles(): CSSResultArray {
    return [opacityCheckerBoardStyles, styles];
}

Use the opacity-checkerboard class in your component's render() method:

<div
    class="opacity-checkerboard"
    style="inline-size: 100px; block-size: 100px;"
></div>