Changelog
0.1.6
- Properly display the Table Component when it has a single row
- Adds the Accordion Component
- Updated the Progress Component to use CSS variables for better cross-browser compatibility
Migration Guide from 0.1.5
You can no longer use the <progress> HTML element to display a styled
progress bar due to incompatibilities with Gecko-based browsers. Use something
like a <div> that supports CSS pseudo-elements.
Additionally, you can no longer use the value and max attributes to control
the progress bar. Use the --progress-value and --progress-max instead.
<div is-="progress" style="--progress-value: 50;">50%</div>
<div is-="progress" style="--progress-value: 8; --progress-max: 10;">8/10</div>To control the progress bar dynamically with JavaScript:
document
.getElementById('my-progress-element')
.style.setProperty('--progress-max', '100')0.1.5
- Added the View Component
- Added the Progress Component
- Removed the arrow marker from the Popover Component on Safari
0.1.4
- Hotfix: fixed input styles not getting applied
0.1.3
- Added the Spinner Component
- Added the Range Component
- Fixed table borders
- Fixed input component scoping
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 | |
| 2 | body { |
| 3 | display: flex; |
| 4 | flex-direction: column; |
| 5 | gap: 1ch; |
| 6 | } |
| 7 |
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 | |
| 2 | body { |
| 3 | display: flex; |
| 4 | align-items: flex-start; |
| 5 | gap: 1ch; |
| 6 | } |
| 7 |
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