@enact/sandstone/styles/skin.less

Large-screen/TV support library for Enact, containing a variety of UI components.

// skin.less
//

.applySkins(@componentRules) when (isruleset(@componentRules)) {
	// Load the color-mixins, which reference variables from the imports below,
	// and updates dynamically based on which variable-set is loaded.
	@import "./color-mixins.less";

	// Neutral Skin
	&:global(.neutral) {
		// Load the sandstone neutral rules into this scope
		@import (multiple) "./variables-base.less";
		@import (multiple) "./colors.less";

		@componentRules();

		// High Contrast Variant
		:global(.enact-a11y-high-contrast) &:global(.highContrast) {
			@import "./colors-highcontrast.less";

			@componentRules();
		}
	}

	// Light Skin
	&:global(.light) {
		@import (multiple) "./variables-base.less";
		@import (multiple) "./colors.less";
		@import "./colors-light.less";

		@componentRules();
	}

	// Game Skin
	&:global(.game) {
		@import (multiple) "./variables-base.less";
		@import (multiple) "./colors.less";
		@import "./variables-game.less";
		@import "./colors-game.less";

		@componentRules();

		:global(.green) & {
			@import "./colors-game-green.less";

			@componentRules();
		}

		:global(.orange) & {
			@import "./colors-game-orange.less";

			@componentRules();
		}
	}
}