Theming (2.0)

LuccaUI comes with sensible defaults, but most of the elements styles can be customized. This is where the theming feature comes in.

Theming consists in overriding said defaults based on your needs. It must be noted that any theme will inherit all the defaults set in the luccaUI default theme.

Say you want to change the color scheme (which is a reference) of luccaUI in your project:

myTheme/core/references/_palettes.overrides.scss

    $myTheme: (
	colors: (
		grey: 		( class: "grey", 		color: #666, 	text: #fff ),
		light: 		( class: "light", 		color: #CCC, 	text: #666 )
        ),
        manipulations: (...)
    );

Note: You need to tell your scss transpiler where your theme can be found through the includePaths (for grunt-sass) variable. You need to pass these paths to your transpiler:

includePaths: [
    'path/to/your/theme',
    // Fallback if a file is missing from your custom theme
    'bower_components/lucca-ui/scss/themes/sample'
]

Note: the easiest way to create your own custom theme is to duplicate the '/lucca-ui/themes/sample' directory in your project and use it as a basis.

Theme structure

All theme variables are saved in a map with the following structure:

$luiTheme: (
    references: (
        palettes: (...),
        sizes: (...),
        breakpoints: (...)
    ),

    adjectives: (
        stuck: (...),
        ...
    ),

    elements: (
        button: (...),
        ...
    )
);

The $luiTheme variable is global and thus can be accessed anywhere in your project (or your namespace if you use the namespaced distribution).

Retrieving theme variables

$props: luiTheme($componentType, $componentName, $keys...);

Here is a quick and dirty example:

$namespace: '#myApp';

#{$namespace} {
	@import "lucca-ui.namespaced";


	// -------------------------------------------------------------------------
	// ---------------------RETRIEVING THEME VARIABLES--------------------------
	// -------------------------------------------------------------------------

	// Retrieving references
	$colorPalettes: luiPalettes();
	$sizes: luiTheme(reference, sizes);
	$breakpoints: luiTheme(reference, breakpoints);

	// Retrieving a given element variable
	$overlayBackground: luiTheme(element, overlay, background);
	$primaryColor: luiPalette(primary, color);
	$darkerPrimaryColor: luiPalette(primary, color, darker);

	// Example use:

	@each $paletteName, $palette in $colorPalettes {
		&.#{map-get($palette, class)} {
			background-color: map-get($palette, color);
			color: map-get($palette, text);
			@if luiIsLod($palette) {
				text-shadow: 0 1px 1px luiPalette($paletteName, color, dark);
			}
		}
	}

	// -------------------------------------------------------------------------
	// --------------------------------NOTES------------------------------------
	// -------------------------------------------------------------------------

	// You have access to extra function when it comes to maps:
	//
	// `map-gets()` allows you to chain keys without having to nest `map-get()`
	// expressions.
	//
	// `map-extend()` allows you to merge two maps
}

About colorschemes

A color in LuccaUI consists of several properties:

• color: The actual 'main' color
• text: The color of text that would be displayed over such main color
• lod ('light on dark'): A boolean precising if text would be written in a lighter color