Color

Documentation for the Stack color 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/Color';

.my-component-class {
    @include Color.apply(
        ...
    );
}

API

The 'apply()' Mixin

Parameter	Effect
$scope	STRING - This is where you would set the scope of the color. Available scopes are: text, outlined, and filled.
$color-theme	MAP - This parameter should contain a map of the color theme. Refer to color-theme injection.
$scope-exceptions	LIST - This is where you set what scopes are to be exclued for this component's color.
$query-settings	LIST - You can exclude some parameters from the color query. has-elevation and no-elevation are the current available query settings.

'apply()' Mixin Implementation Example

$color-theme: (
    ...
);

.my-component-class {
    @include Color.apply('filled', $color-theme, ('no-elevation'));
}

Color-Theme Injection

• Theme Injection is the term we are going to use when we're going to apply a certain set of colors to a component.

• One of the main concepts in this feature is to treat the theme values like JSON data. Then you inject that data in the mixin.

• Values of the injection parameters should be a list. This list would contain two values, first is the fill, second is the ink.

• The fill value is what we would set as the main color of the component

• The ink value is what we would set as the main typpgraphy color of that component with the fill color.

• The color-theme injection API is as follows:

Parameter	Effect
'default'	Sets the default/base color of the component. This is the color that is in its resting/normal state.
'hover'	Sets the on-hover color of the component.
'active'	Sets the on-active color of the component. This is the color that is in its 'pressed' state
'focus'	Sets the on-focus color of the component.
'disabled'	Sets the color of the component in its disabled state
'elevation'	Sets the color of the component's elevation

Color-Theme Injection Implementation Example

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

$_color-theme: (
    'default': (var(--sc-theme--primary), #fff),
    'hover': (var(--sc-theme--primary), #fff),
    'focus': (var(--sc-theme--primary), #fff),
    'active': (var(--sc-theme--primary-light), #fff),
    'disabled': (var(--sc-theme--primary-dark), #fff),
    'elevation': #000,
);

.my-component-class {
    @include Color.apply('filled', $_color-theme);
}