Releases: gnomical/solid-theme-provider
Security Update
- updated most dependencies
- resolved CVE-2024-47068 (DOM Clobbering Gadget found in rollup bundled scripts that leads to XSS)
- normalized typescript compiler and rollup output directories
Security Update
Updating packages to resolve CVE-2024-4068 (Uncontrolled resource consumption in braces < 3.0.3)
Custom Variants
In addition to the default variables this package also detects hex colors (e.g. #FFFFFF) and auto calculates complementary transparent versions for use throughout your project.
That behavior can now be overridden by passing a custom function to the calculate_variants prop.
The function will be provided the name and value of each variable in the current theme. The ThemeProvider expects an object returned which contains the variants of the key/value pairs that make up the css variables you want added to the root element of the dom.
E.g.
const calculate_variants = (name: string, value: string) => {
// if the current value is a hex color
// add complementary transparencies
let pattern = /^#[0-9A-F]{6}$/i;
if (value.match(pattern)) {
return {
[name + "-alpha_primary"]: value + "f2", // 95%
[name + "-alpha_secondary"]: value + "99", // 60%
[name + "-alpha_tertiary"]: value + "4d", // 30%
[name + "-alpha_quaternary"]: value + "17", // 9%
};
}
return {};
};Security Update and Bugfix
- Fixes CVE-2023-45133
- corrects typo "quaternary" and continues to allow "quarternary" for backward compatibility.
'browser_theme_color' exposed as css variable
- Includes the "browser_theme_color" property of the config as a css variable at run time.
- Also fixes the PostCSS line return parsing error as reported by dependabot
Enable Extending Functionality
currentTheme and setTheme are now exposed for applications that wish to extend the functionality of this component
// Example of passing a string of the theme name to a 3rd party component
import { ThemeProvider, currentTheme } from 'solid-theme-provider';
<ThemeProvider label="Toggle Theme">
<MyComponent theme={currentTheme()}>Bugfix
Dropdown Directions
You can now specify the direction you want the dropdown to pop when more than 2 themes are configured. There are 4 possible settings that correspond to the ordinal directions, ["ne", "se", "sw", "nw"].
More info can be found in the docs.
Dropdown Styles
The default styles have been modified so that the theme options are legible when the dropdown is expanded over page body content.