Theme

Documentation for the Stack theming API

Integration

• Once Stack is in your node modules folder, put this in the styling file that you've made for your project:

@use '~@growstocks/stack/Core/Theme';

:root {
    @include Theme.config(
        ...
    );
}

API

SCSS

Parameter	Effect
$primary-color(required)	Sets the primary fill color properties in the theme
$secondary-color (optional)	Sets the secondary fill color properties in the theme
$screen-sizes (optional)	Sets the breakpoints in the theme
$custom-property (optional)	You can add your own custom properties, and the core framework will automatically set the css property equivalent for you

Theming API Implementation Example

@use '~@growstocks/stack/Core/Theme';

:root {
    @include Theme.config(
        $primary-color: #12305e,
        $secondary-color: #ffa000,
        $my-custom-prop: #232323,
        $patreon: #FF424D,
        $discord: rgb(89, 112, 191)
    );
}

CSS Variables (Output)

• All of the css variable outputs follow a strict formula:

// property-name = the property you placed
// in the Theme.config() mixin.

.my-component {
    background: var(--sc-theme--[property-name]);
}

Copyright (c) 2021 GrowStocks Development Group MIT Licensed