#### Limitless - Color System

##### System overview

###### Overview

Custom colors system - a set of CSS classes that allow you to change colors on-the-fly directly in markup by changing class name. All colors correspond to Material design palette and includes 16 color palettes: 5 contextual (primary, danger, success, warning and info) and 11 alternative. The system is completely optional and moved to a separate `colors.min.css` minified CSS file.

Basically color system is supported by almost all layout elements and components: sidebar, navbar, content panels, links, text, icons, alerts, dropdown menus, form components, tables, tabs, progress bars, buttons, notifications, popovers, tooltips etc. The system consists of 16 color palettes, each palette includes 1 main color and 5 alternate colors that are darker and lighter than the main one.

Available color palettes:

- Primary palette
- Danger palette
- Success palette
- Warning palette
- Info palette
- Pink palette
- Violet palette
- Purple palette
- Indigo palette
- Blue palette
- Teal palette
- Green palette
- Orange palette
- Brown palette
- Grey palette
- Slate palette

###### Basic usage

Usage is very simple, all you need to do is to add one of the color CSS classes to the element. Limitless template includes a bunch of pages with color palette usage demonstration - in components, elements and layout parts. Depending on what part of element you want to change, available classes are (`primary` palette is an example):

Class | Prefixes | Description
--- | --- | ---
Background
`.bg-primary` | *-300, *-400, *-600, *-700, *-800 | Background color. Can be added to dropdown menus, sidebar, navbar, alerts, inputs, panels, selects etc.
Borders
`.border-primary` | *-300, *-400, *-600, *-700, *-800 | 4 sides border color. Any element that contains border
`border-top-primary` | Top border only. Any element that contains all sides border or top border only
`border-bottom-primary` | Bottom border only. Any element that contains all sides border or bottom border only
`border-left-primary` | Left border only. Any element that contains all sides border or left border only
`border-right-primary` | Right border only. Any element that contains all sides border or right border only
Text
`.text-primary` | *-300, *-400, *-600, *-700, *-800 | Text color. Can be used in text, icons and links
Alpha
`.alpha-primary` | none | Light background or text color. Useful when you need to use lighter color variations, in alerts for example

###### Colors

Color system uses Material design palette colors with limitations: only 7 colors of 14 are used. I just tried to keep only main colors and drop unnecessary ones. But if you want to add them back, it's relatively easy to do in SCSS files. Colored blocks below demonstrate all color codes and variables used in the template:

- 300 #64B5F6
- 400 #42A5F5
- 500 #2196F3
- 600 #1E88E5
- 700 #1976D2
- 800 #1565C0

Primary palette
@color-primary-*

- 300 #E57373
- 400 #EF5350
- 500 #F44336
- 600 #E53935
- 700 #D32F2F
- 800 #C62828

Danger palette
@color-danger-*

- 300 #81C784
- 400 #66BB6A
- 500 #4CAF50
- 600 #43A047
- 700 #388E3C
- 800 #2E7D32

Success palette
@color-success-*

- 300 #FF8A65
- 400 #FF7043
- 500 #FF5722
- 600 #F4511E
- 700 #E64A19
- 800 #D84315

Warning palette
@color-warning-*

- 300 #4DD0E1
- 400 #26C6DA
- 500 #00BCD4
- 600 #00ACC1
- 700 #0097A7
- 800 #00838F

Info palette
@color-info-*

- 300 #F06292
- 400 #EC407A
- 500 #E91E63
- 600 #D81B60
- 700 #C2185B
- 800 #AD1457

Pink palette
@color-pink-*

- 300 #BA68C8
- 400 #AB47BC
- 500 #9C27B0
- 600 #8E24AA
- 700 #7B1FA2
- 800 #6A1B9A

Violet palette
@color-violet-*

- 300 #9575CD
- 400 #7E57C2
- 500 #673AB7
- 600 #5E35B1
- 700 #512DA8
- 800 #4527A0

Purple palette
@color-purple-*

- 300 #7986CB
- 400 #5C6BC0
- 500 #3F51B5
- 600 #3949AB
- 700 #303F9F
- 800 #283593

Indigo palette
@color-indigo-*

- 300 #4FC3F7
- 400 #29B6F6
- 500 #03A9F4
- 600 #039BE5
- 700 #0288D1
- 800 #0277BD

Blue palette
@color-blue-*

- 300 #4DB6AC
- 400 #26A69A
- 500 #009688
- 600 #00897B
- 700 #00796B
- 800 #00695C

Teal palette
@color-teal-*

- 300 #AED581
- 400 #9CCC65
- 500 #8BC34A
- 600 #7CB342
- 700 #689F38
- 800 #558B2F

Green palette
@color-green-*

- 300 #FFB74D
- 400 #FFA726
- 500 #FF9800
- 600 #FB8C00
- 700 #F57C00
- 800 #EF6C00

Orange palette
@color-orange-*

- 300 #A1887F
- 400 #8D6E63
- 500 #795548
- 600 #6D4C41
- 700 #5D4037
- 800 #4E342E

Brown palette
@color-brown-*

- 300 #999
- 400 #888
- 500 #777
- 600 #666
- 700 #555
- 800 #444

Grey palette
@color-grey-*

- 300 #90A4AE
- 400 #78909C
- 500 #607D8B
- 600 #546E7A
- 700 #455A64
- 800 #37474F

Slate palette
@color-slate-*

###### SCSS and CSS

Color system includes 2 source SCSS files - `colors.scss` and `palette.scss` located in `global_assets/scss/themes/[theme]/colors/` folders. The first file includes class names and styles for them: background, borders, text and alpha colors. The second file includes list of all color variables. Each theme contains its own color palette, however they are the same in all themes, but prepared for changes.

SCSS folder in `global_assets/scss/layouts/[layout]/[theme]/compile/` contains one more `colors.scss` file. This file is needed for `colors.min.css` CSS file compile. Basically it includes paths to main SCSS files, so when you compile CSS files, use this file:

    // Import custom template config
    @import "../../../../config";
    @import "../../../../shared/utils/ll-functions";
    @import "../../../../shared/utils/ll-mixins";
    @import "../../../../themes/default/colors/palette";

    // Core variables and mixins
    @import "../../../../_bootstrap/functions";
    @import "../../../../_bootstrap/variables";
    @import "../../../../_bootstrap/mixins";

    // Import template's variables
    @import "../variables/variables-core";
    @import "../variables/variables-custom";
    @import "../../../../themes/default/bootstrap_limitless/mixins";

    // Color system, always load last
    @import "../../../../themes/default/colors/colors";

File `colors.scss` includes a color map and a set of SCSS mixins defined in `ll-mixins.scss` and `ll-functions.scss` files. If you want to add a new color shade, simply add a new color or variable to `$ll-theme-colors` map. If you want to remove any color from CSS, remove it from the map. In both cases you need to re-compile SCSS files.

Each color has a base class and 6 shades. Naming is the following: base class is omitted and doesn't have any suffix (e.g. `.bg-primary`); shade 50 has different class suffix for CSS targeting purpose (e.g. `.alpha-primary`); other shades have suffix that corresponds to map (e.g. 400 means `.bg-primary-400`). So if you need to add a new color - lighter for example - just add a new line in color map with name and color itself: `lighter: lighten($color-primary-500, 10%)`, where "lighter" will be a class name suffix (`.bg-primary-lighter`) in generated CSS file. SCSS color map looks like this:

    //
    // Create color map
    //

    $ll-theme-colors: (
        primary: (
            base: $color-primary-500,
            50: $color-primary-50,
            300: $color-primary-300,
            400: $color-primary-400,
            600: $color-primary-600,
            700: $color-primary-700,
            800: $color-primary-800
        ),
        danger: (
            base: $color-danger-500,
            50: $color-danger-50,
            300: $color-danger-300,
            400: $color-danger-400,
            600: $color-danger-600,
            700: $color-danger-700,
            800: $color-danger-800
        ),
        ...
    )

If you want to use color system in your project, i suggest to use minified `colors.min.css` file included to the package, since basically this file won't be changed often, except if you may want to change colors in `palette.scss` file. But if you don't want to use the system, feel free to remove compiled CSS file, but don't remove any paths to `palette.scss` file in any SCSS files, because color variables are used in different components and layout options.