shelving/ui/style/Thickness.module.css

Toolkit for using data in JavaScript.

@import "base.css";

@layer variants {
	/* Thickness variants — set the `--thickness` custom property which painted-border components read */
	/* in their border declarations. Lets `<Card thickness-thick>` work for a Card with a top-level */
	/* border, but also `<Table thickness-thick>` where the border lives on `<th>` / `<td>` (the Table */
	/* component reads `--thickness` in its child rules). */
	.thickness-none {
		--thickness: 0;
	}
	.thickness-hairline {
		--thickness: var(--stroke-hairline);
	}
	.thickness-xxthin {
		--thickness: var(--stroke-xxthin);
	}
	.thickness-xthin {
		--thickness: var(--stroke-xthin);
	}
	.thickness-thin {
		--thickness: var(--stroke-thin);
	}
	.thickness-normal {
		--thickness: var(--stroke-normal);
	}
	.thickness-thick {
		--thickness: var(--stroke-thick);
	}
	.thickness-xthick {
		--thickness: var(--stroke-xthick);
	}
	.thickness-xxthick {
		--thickness: var(--stroke-xxthick);
	}
}