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.