Variables and Styles

In Flute, there are basic variables for colors (which you should preferably not delete or modify).

All variables can only be called within SCSS files. For example:

body {
    color: $color-text;
}

Here is the complete list of variables:

protected array $variables = [
    // Colors
    'color-text' => '#FFFFFF',
    'color-text-inverse' => '#0B0B0B',
    'color-primary' => '#BAFF68',
    'color-primary-light' => '#bbff681f',
    'color-secondary' => '#AD68FF',
    'color-secondary-light' => '#ad68ff4f',
    'color-card' => '#101010',
    'color-bg' => '#0B0B0B',
    'color-gray' => '#696969',
    'color-inactive' => '#5F5F5F',
    'color-disabled' => '#191919',
    'color-success' => '#65FF7E',
    'color-success-light' => 'rgba(101, 255, 126, 0.2)',
    'color-error' => '#F14949',
    'color-error-light' => 'rgba(241, 73, 73, 0.2)',
    'color-warning' => '#FFC046',
    'color-warning-light' => 'rgba(255, 192, 70, 0.2)',

    'color-white-20' => 'rgba(255, 255, 255, 0.2)',
    'color-white-10' => 'rgba(255, 255, 255, 0.1)',
    'color-white-5' => 'rgba(255, 255, 255, 0.05)',
    'color-white-3' => 'rgba(255, 255, 255, 0.03)',

    'color-modal-bg' => '#191919e3',

    // Fonts
    'font-primary' => '\'Montserrat\', \'Open Sans\', system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
    'font-secondary' => '\'SF Pro Display\', \'Montserrat\', system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
    'font-line-height' => 1.5,

    // Sizes
    'font-size-large' => '20px',
    'font-size-base' => '16px',
    'font-size-small' => '14px',

    // Others
    'border-radius' => '25px',
    'border-radius-el' => '14px',
    'transition' => '.3s',

    // Spacings
    'spacing-xs' => '5px',
    'spacing-sm' => '10px',
    'spacing-md' => '15px',
    'spacing-lg' => '20px',
    'spacing-xl' => '30px'
];

Modifying and Adding Variables

To modify or add to the default variables, simply change them within ThemeLoader.php:

ThemeLoader.php

public function register(\Flute\Core\Template\Template $templateService)
{
    $templateService->variables()->change('color-text', '#000000');
}

info

The change method adds and modifies variables. So, you can use it in both cases.