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.

Instantiation

The instantiation instructions can be found here.

Basic Usage

Assigning themeable properties and keys

Get your CSS styles.

.msc-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.

.msc-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.

.msc-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).

.msc-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.

.msc-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);
}

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="msc-button my-button-theme">
   <!-- Other stuff here... -->
</button>

API

key-create() mixin

⚠ Must be used in a selector!

Binds a new value to an existing key.

SYNTAX

@include sentro.key-bind({string} $key, {*} $value);

USAGE

@use 'path/to/@matteusan/sentro' with ($prefix: 'sdc', $context: 'token');

.sdc-card {
    @include sentro.key-bind('card-bg', sentro.token-switch('surface-light'));
}

...

key-create() function

⚠ Must be used as a property value, css-function value, or key-fallback value!

Creates a key with a fallback value for a CSS property.

SYNTAX

sentro.key-create({string} $key, {*} $value);

USAGE

@use 'path/to/@matteusan/sentro' with ($prefix: 'sdc', $context: 'token');

.sdc-card {
    background: sentro.key-create('card-bg', sentro.token-switch('surface-light'));
}

...

key-check() function

⚠ Must be used within a conditional statement!

Checks if a token is a valid key or not. NOTE: It does not throw and error when the value is asserted as false, you need to make the error yourself.

SYNTAX

sentro.key-check({string} $query);

USAGE

@use 'path/to/@matteusan/sentro' with ($prefix: 'sdc', $context: 'token');

@function tell-me-if-its-a-key($key) {
    @if sentro.key-check($key) {
        @return 'IT IS A KEY!';
    } @else {
        @return 'Oh, that\'s disappointing...';
    }
}

...

key-get() function

⚠ Must be used as a property value, css-function value, or key-fallback value!

Queries and retrieves a key in its CSS custom property form.

SYNTAX

sentro.key-get({string} $key);

USAGE

@use 'path/to/@matteusan/sentro' with ($prefix: 'sdc', $context: 'token');

.sdc-card {
    background: sentro.key-get('card-bg');
}

...

key-get-raw() function

⚠ Must be used as a property value, css-function value, or key-fallback value!

Queries and retrieves a key in its raw value form.

SYNTAX

sentro.key-get-raw({string} $key);

USAGE

@use 'path/to/@matteusan/sentro' with ($prefix: 'sdc', $context: 'token');

.sdc-card {
    background: sentro.key-get-raw('card-bg');
}

...