opacity-checkerboard
NPM
0.48.1
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>