Changelog
0.1.2
- Switches appear dimmer when unchecked
- Switches correctly show the track when the
<input>stylesheet is imported - Added edge/bisecting caps to the Separator Component
- Properly aligns Badges vertically
- Removes an invalid
initial-valueproperty from the Dialog Component - Removes the markdown-like
#markers prefixing heading elements<h1>-<h6> - Allows the
--box-border-colorCSS to be inherited and controlled with CSS variables - Allows the
--table-border-colorCSS to be inherited and controlled with CSS variables - Allows the
--separator-colorCSS to be inherited and controlled with CSS variables
Migration Guide from < 0.1.1
Heading Markers
The markdown-like # markers on heading elements <h1>-<h6> have been removed
If you intend to keep this behavior, use the following CSS code
h1::before { content: "# "; }
h2::before { content: "## "; }
h3::before { content: "### "; }
h4::before { content: "#### "; }
h5::before { content: "##### "; }
h6::before { content: "###### "; }Inherited Color Variables
Prior to this release, --box-border-color, --table-border-color, and --separator-color always defaulted to --foreground0.
Now all child elements of an element with any of these CSS variables will inherit the value from its closest ancestor
<body style="--box-border-color: red;">
<div box-="square">red border</div>
<div box-="square" style="--box-border-color: blue;">blue border</div>
<div style="--box-border-color: green;">
<div box-="square">green border</div>
</div>
</body>The defaults for these variables can be controlled from :root
@layer base {
:root {
--box-border-color: var(--background1);
--table-border-color: var(--background2);
--separator-color: var(--cyan);
}
}0.1.1
- Adds the Switch Component
- Adds a half-block height variant to the Pre Component so it doesn’t appear so tall
- Tooltips remain visible when you hover over their content
Migration Guide from 0.1.0
Pre Size
The default size for pre elements has been changed to make them shorter
| 1 | <pre size-="small">Small</pre> |
| 2 | <pre>Default</pre> |
| 3 | <pre size-="large">Large (old default)</pre> |
| 1 | body { |
| 2 | display: flex; |
| 3 | flex-direction: column; |
| 4 | gap: 1ch; |
| 5 | } |
Theme
0.1.0
- Removed the
contain:*keyword from thebox-utility property in favor ofshear- - Adds the pre Component
- Adds the Tooltip Component
- Adds the Table Component
- Adds the Dialog Component
- Adds a half-block height variants to Buttons so they don’t appear so tall
Migration Guide from 0.0.x
Box Containment
In versions prior to 0.1.0, a second keyword was added to the box- utility property to control whether the box should pad the top and/or bottom lines
<div box-="square contain:!top"></div>
<div box-="square contain:!bottom"></div>
<div box-="square contain:none"></div>This has been replaced with the shear- property
<div box-="square" shear-="top"></div>
<div box-="square" shear-="bottom"></div>
<div box-="square" shear-="both"></div>Since the selector for box- no longer allows more than one keyword, most elements using the box- utility will be affected by this change
Button Variants
The default button variant has been changed to make the button shorter
| 1 | <button size-="large">Large (old default)</button> |
| 2 | <button>Default</button> |
| 3 | <button size-="small">Small</button> |
| 4 |
| 1 | body { |
| 2 | display: flex; |
| 3 | align-items: flex-start; |
| 4 | gap: 1ch; |
| 5 | } |
Theme
The default button variant is still three lines tall but appears to be shorter as its background doesn’t take up the full height of three lines
0.0.6
- Added the Separator Component
- Added the Radio Component
0.0.5
- Fixed black lines between badges
- Split out nerd font plugin to only provide the font
0.0.4
- Introduced Checkbox Component
0.0.3
- Introduced Popover Component
0.0.2
- Introduced Dynamic Theme Approach
0.0.1
- Initial Release