Keys
Keys allow your styles to be themeable. By using the CSS custom properties' fallback values, you can easily instantiate, bind, and override values of a style/component. Sentro allows this process to be streamlined, automated, and funner than manually coding everything in.
Basic Usage
Assigning themeable properties and keys
Get your CSS styles.
.sdc-button {
width: 100%;
max-width: max-content;
display: inline-flex;
flex-flow: row nowrap;
padding: 0.4rem 0.6rem;
user-select: none;
background-color: #ff6a00;
color: #100500;
}
Determine what properties you want to be themeable. Usually these are color-related properties, typography properties,
shape properties (like border-radius
), etc.
.sdc-button {
width: 100%;
max-width: max-content;
display: inline-flex;
flex-flow: row nowrap;
padding: 0.4rem 0.6rem; // This is themeable.
user-select: none;
background-color: #ff6a00; // This too!
color: #100500; // This one as well!
}
Attach the sentro.key-create()
function to the themeable properties. Think of it as opening that specific property as an entrypoint for user-modifiable values.
.sdc-button {
width: 100%;
max-width: max-content;
display: inline-flex;
flex-flow: row nowrap;
padding: sentro.key-create(...,...); // This is themeable.
user-select: none;
background-color: sentro.key-create(...,...); // This too!
color: sentro.key-create(...,...); // This one as well!
}
Name the key in the first parameter.
We suggest putting the component name (minus the prefix) before the property name you want to assign to it. ( i.e.
button-fill
,button-ink
,card-padding
,header-brand-size
).
.sdc-button {
width: 100%;
max-width: max-content;
display: inline-flex;
flex-flow: row nowrap;
padding: sentro.key-create('button-padding',...);
user-select: none;
background-color: sentro.key-create('button-fill',...);
color: sentro.key-create('button-ink',...);
}
Assign a value in the second parameter.
.sdc-button {
width: 100%;
max-width: max-content;
display: inline-flex;
flex-flow: row nowrap;
padding: sentro.key-create('button-padding', 0.4rem 0.6rem);
user-select: none;
background-color: sentro.key-create('button-fill', #ff6a00);
color: sentro.key-create('button-ink', #100500);
}
Alternatively, if you're already using tokens, you can use them directly.
.sdc-button {
width: 100%;
max-width: max-content;
display: inline-flex;
flex-flow: row nowrap;
padding: sentro.key-create('button-padding', ('padding-sm' 'padding-md'));
user-select: none;
background-color: sentro.key-create('button-fill', 'accent-400');
color: sentro.key-create('button-ink', 'accent-ink');
}
Using the keys to make other themes, and variations
Create a class to theme the base style.
.my-new-button-theme {
// Code here...
}
Assign new values by using the sentro.key-bind()
mixin.
.my-new-button-theme {
@include sentro.key-bind('button-fill', lightgreen);
@include sentro.key-bind('button-ink', darkblue);
@include sentro.key-bind('button-padding', 0.6rem 0.8rem);
}
Assign the class to the HTML element.
<button class="sdc-button my-button-theme">
<!-- Other stuff here... -->
</button>
Using keys with a custom separator
When you want to use custom separators for your keys, the global separator can be changed using the $separator
parameter. Please refer to this guide for more information.