@enact/limestone 1.3.0

package/styles/mixins.less

@@ -0,0 +1,337 @@
+//
+// Handy Information
+// http://lesscss.org/features/#mixins-feature-not-outputting-the-mixin
+//
+
+@import "~@enact/spotlight/styles/mixins.less";
+@import "~@enact/ui/styles/mixins.less";
+@import (multiple) "./variables.less";
+
+// Allows a component to override the existing "disabled" rules and apply its own customized rules.
+.lime-disabled(@rules) when (isruleset(@rules)) {
+	.disabled({
+		opacity: 1; // reset standard disabled rule.
+
+		@rules();
+	});
+}
+
+.lime-taparea(@element-size) when (@lime-smallest-tappable-size > @element-size) {
+	// Take the size of the minimum tappable area, and subtract the element's current size.
+	@_tap-offset: -((@lime-smallest-tappable-size - @element-size) / 2);
+
+	&::before {
+		content: "";
+		position: absolute;
+		top: @_tap-offset;
+		right: @_tap-offset;
+		bottom: @_tap-offset;
+		left: @_tap-offset;
+		border-radius: @lime-button-border-radius;
+	}
+}
+
+.lime-taparea(@element-size) when (@lime-smallest-tappable-size <= @element-size) {
+	// Remove the tappable area if the tap area is smaller than the element's current size.
+	&::before {
+		content: none;
+	}
+}
+
+.lime-item-icon-tap-area-adjust() {
+	&.small > .small-icon-tap-area {
+		left: -@lime-spotlight-outset;
+		right: -@lime-spotlight-outset;
+	}
+}
+
+.lime-word-break() {
+	overflow-wrap: break-word;
+	word-break: keep-all;
+}
+
+// NOTE: Until we are able to automatically remove these JSDoc-style comments, they should remain LESS-commented
+// /**
+//  * Add a margin to your component which includes the standard limestone spotlight margin on the
+//  * sides and uses the two arguments for margin on the top and bottom respectively.
+//  *
+//  * @param  {Measurement} @t Top margin
+//  * @param  {Measurement} @b Bottom margin
+//  */
+.lime-spotlight-margin(@t; @b) {
+	margin: @t @lime-spotlight-outset @b;
+}
+
+// /**
+//  * Add a margin to your component which includes the standard limestone spotlight margin on the
+//  * sides and uses the argument for margin on the top and bottom.
+//  *
+//  * @param  {Measurement} @tb Top and bottom margin
+//  */
+.lime-spotlight-margin(@tb) {
+	margin: @tb @lime-spotlight-outset;
+}
+
+// /**
+//  * Add a margin to your component which includes the standard limestone spotlight margin only on
+//  * the sides.
+//  */
+.lime-spotlight-margin() {
+	margin-left: @lime-spotlight-outset;
+	margin-right: @lime-spotlight-outset;
+}
+
+// /**
+//  * Add a padding to your component which includes the standard limestone spotlight padding on the
+//  * sides and uses the two arguments for padding on the top and bottom respectively.
+//  *
+//  * @param  {Measurement} @t Top padding
+//  * @param  {Measurement} @b Bottom padding
+//  */
+.lime-spotlight-padding(@t; @b) {
+	padding: @t @lime-spotlight-outset @b;
+}
+
+// /**
+//  * Add a padding to your component which includes the standard limestone spotlight padding on the
+//  * sides and uses the argument for padding on the top and bottom.
+//  *
+//  * @param  {Measurement} @tb Top and bottom padding
+//  */
+.lime-spotlight-padding(@tb) {
+	padding: @tb @lime-spotlight-outset;
+}
+
+// /**
+//  * Add a padding to your component which includes the standard limestone spotlight padding only on
+//  * the sides.
+//  */
+.lime-spotlight-padding() {
+	padding-left: @lime-spotlight-outset;
+	padding-right: @lime-spotlight-outset;
+}
+
+//
+// Mixin classes for creating the limestone text classes
+//
+
+// Text base provides family, weight, and size
+// Accepts 0, 1 or 2 arguments
+// The first argument allows overriding the font size, defaulting to
+// the default body font size, the 2nd argument is used privately by
+// ThemeDecorator to override the target of the rules.
+.lime-text-base(@font-size: @lime-body-font-size; @target: normal) {
+	.lime-font({
+		font-weight: @lime-non-latin-font-weight;
+	}, @target);
+
+	font-weight: normal;
+	font-size: @font-size;
+
+	.enact-locale-line-height(@lime-body-line-height; @lime-tallglyph-body-line-height; @target);
+}
+
+//
+// Limestone Font Applicator
+//
+// When only rules are provided. Default populate the @target argument.
+.lime-font(@nlrules; @target: normal) when (isruleset(@nlrules)) {
+	// content: "Applying .lime-font (rules)";
+	.lime-font(@lime-font-family, @lime-non-latin-font-family, @nlrules, @target);
+}
+// When 0, 1, or 2 strings (font family names) are provided. Default populate the @target argument so the signature stays the same.
+.lime-font(@family: @lime-font-family; @nlfamily: @lime-non-latin-font-family; @target: normal) when (isstring(@family)) and (isstring(@nlfamily)) {
+	// content: "Applying .lime-font 0123";
+	.lime-font(@family, @nlfamily, {}, @target);
+}
+// When exactly 3 or 4 args are provided. Types are assumed because they went through the trouble to provide all 3 required args.
+.lime-font(@family; @nlfamily; @nlrules; @target: normal) when (isruleset(@nlrules)) {
+	// content: "Applying .lime-font 34";
+	font-family: @family;
+
+	.enact-locale(non-latin, {
+		font-family: @nlfamily;
+		@nlrules();
+	}, @target);
+}
+
+// Convenience method added to simply set the font size. Please don't use this inside the framework
+// as it will generate a significant amount of selectors and rules that might not be minified.
+// The framework offers more direct and more efficient means of assigning multiple rules at once.
+// This is primarily a convenience for external app developers.
+// Usage:
+//    0 args -> default size for latin is applied to both latin and non-latin
+//    1 arg  -> that size is applied to both latin and non-latin
+//    2 args -> first is applied to latin, second to non-latin
+.lime-font-size(@font-size: @lime-body-font-size; @nlfont-size: @font-size) {
+	font-size: @font-size;
+
+	.enact-locale(non-latin, {
+		font-size: @nlfont-size;
+	});
+}
+
+// Generic Non-Latin Font Rule generator
+.lime-locale-non-latin(@rules; @target: normal) when (isruleset(@rules)) and (default()) {
+	.enact-locale(non-latin, @rules, @target);
+}
+
+//
+// Custom Text Size Mixins
+//
+// 1 arg: Shorthand for just setting the font size in custom-text mode
+.lime-custom-text-size(@latin-size) {
+	.lime-custom-text({
+		font-size: @latin-size;
+	});
+}
+// 2 args: Shorthand for just setting the font size of both latin and non-latin in custom-text mode
+.lime-custom-text-size(@latin-size; @non-latin-size) {
+	.lime-custom-text(
+	{
+		font-size: @latin-size;
+	};
+	{
+		font-size: @non-latin-size;
+	});
+}
+
+// 1 arg: Generic rule applicator, accepts an entire rule-set to add for large text mode
+.lime-custom-text(@lrules) when (isruleset(@lrules)) {
+	&:global(.largeText) {
+		@lrules();
+	}
+}
+// 2 args: Generic rule applicator, accepts 2 entire rule-sets to add both latin and non-latin for large text mode
+.lime-custom-text(@lrules; @nlrules) when (isruleset(@lrules)) and (isruleset(@nlrules)) {
+	.lime-custom-text(@lrules);
+
+	.enact-locale(non-latin, {
+		.lime-custom-text(@nlrules);
+	});
+}
+
+.lime-font-number() {
+	// content: "Applying .lime-font-number";
+	.lime-font(@lime-number-font-family; @lime-number-font-family);
+}
+
+//
+// Text definitions
+//
+
+.lime-alert-title() {
+	.lime-font(@lime-alert-font-family; @lime-non-latin-font-family-light);
+	.enact-locale-line-height(@lime-alert-line-height; @lime-tallglyph-body-line-height);
+	font-size: @lime-alert-title-font-size;
+	font-weight: @lime-alert-font-weight;
+}
+
+.lime-alert-subtitle() {
+	.lime-font(@lime-alert-font-family; @lime-non-latin-font-family-light);
+	.enact-locale-line-height(@lime-alert-line-height);
+	font-size: @lime-alert-subtitle-font-size;
+	font-weight: @lime-alert-font-weight;
+}
+
+.lime-alert-overlay-content() {
+	.lime-font(@lime-alert-font-family; @lime-non-latin-font-family-light);
+	.enact-locale-line-height(@lime-alert-line-height; @lime-tallglyph-body-line-height);
+	font-weight: @lime-alert-font-weight;
+	font-size: @lime-alert-overlay-font-size;
+	text-align: initial;
+	.lime-word-break();
+	.locale-japanese-line-break();
+}
+
+.lime-body-text() {
+	font-weight: @lime-body-font-weight;
+	font-size: @lime-body-font-size;
+	font-style: @lime-body-font-style;
+	.lime-font(@lime-body-font-family; @lime-non-latin-font-family-light; {
+		font-weight: @lime-non-latin-body-font-weight;
+		font-size: @lime-non-latin-body-font-size;
+		font-style: @lime-non-latin-body-font-style;
+	});
+
+	.enact-locale-line-height(@lime-body-line-height; @lime-tallglyph-body-line-height);
+
+	a:link {color: inherit; text-decoration:none;}
+	a:visited {color: inherit; text-decoration:none;}
+	a:hover {color: inherit; text-decoration:none;}
+	a:active {color: inherit; text-decoration:none;}
+}
+
+.lime-body-text-small() {
+	font-size: @lime-body-small-font-size;
+
+	.enact-locale-line-height(@lime-body-small-line-height; @lime-tallglyph-body-line-height);
+}
+
+.lime-large-button-text() {
+	.lime-font(@lime-button-font-family; @lime-non-latin-button-font-family; {
+		font-size: @lime-non-latin-button-large-font-size;
+		font-style: @lime-non-latin-button-font-style;
+		font-weight: @lime-non-latin-button-font-weight;
+	});
+	font-size: @lime-button-font-size;
+	font-style: @lime-button-font-style;
+	font-weight: @lime-button-font-weight;
+	.font-kerning();
+}
+
+.lime-small-button-text() {
+	.lime-font(@lime-button-small-font-family; @lime-non-latin-button-font-family; {
+		font-size: @lime-non-latin-button-small-font-size;
+		font-style: @lime-non-latin-button-small-font-style;
+		font-weight: @lime-non-latin-button-small-font-weight;
+	});
+	font-size: @lime-button-small-font-size;
+	font-style: @lime-button-small-font-style;
+	font-weight: @lime-button-small-font-weight;
+	.font-kerning();
+}
+
+// Uses Webkit specific styles to have multi-line ellipsis
+.lime-multi-line-ellipsis(@lines) {
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: @lines;
+	-webkit-box-orient: vertical;
+}
+
+// Add an extension to the .enact-locale-line-height mixin defined in ~@ui which has defaults specific to limestone.
+//
+// Set line-height for normal and tallglyphs with 0, 1 or 2 arguments
+// Ex:
+//   .enact-locale-line-height();              ->  normal: default; tallglyphs: default;
+//   .enact-locale-line-height(1.4em);         ->  normal: 1.4em; tallglyphs: default;
+//   .enact-locale-line-height(1.4em; 1.6em);  ->  normal: 1.4em; tallglyphs: 1.6em;
+.enact-locale-line-height(@normal: @lime-common-line-height; @tallglyph: @lime-tallglyph-line-height; @target: normal) when (default()) {
+	.enact-locale-tallglyph(line-height; @normal; @tallglyph; @target);
+}
+
+.lime-focus-ring() {
+	transform: none;       
+	outline: 12px solid #e6e6e6;
+	outline-offset: 9px;  
+}
+
+.lime-focus-highlight() {
+    .focus({
+		&:global(.focusRing) {
+			.lime-focus-ring();
+		}
+    });
+};
+
+.lime-focus-highlight(@target) {
+	.focus({
+		&:global(.focusRing) {
+			transform: none;
+			.@{target} {
+				.lime-focus-ring(); 
+			}
+        }
+    });
+};

package/styles/skin.less

@@ -0,0 +1,54 @@
+// 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 limestone 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";
+
+		@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();
+		}
+	}
+}

package/styles/variables-base.less

@@ -0,0 +1,32 @@
+// Alert
+// ---------------------------------------
+@lime-alert-overlay-border-radius: var(--semantic-radius-popup);
+
+// Button
+// ---------------------------------------
+@lime-button-border-radius: var(--semantic-radius-button);
+@lime-button-bg-border-width: '';
+@lime-button-bg-border-style: none;
+@lime-button-icononly-border-radius: '';
+@lime-button-icononly-bg-border: '';
+
+// ContextualPopup
+// ---------------------------------------
+@lime-contextualpopup-border-radius: var(--semantic-radius-container);
+
+// Heading
+@lime-heading-font-style: normal;
+@lime-heading-padding: 0 0 18px 0;
+
+// HolePunchScrim
+// ---------------------------------------
+@lime-holepunchscrim-border-radius: @lime-button-border-radius;
+
+// Item
+// ---------------------------------------
+@lime-item-font-weight: var(--primitive-font-weight-semibold);
+@lime-item-border-radius: var(--primitive-radius-12);
+
+// Scroller
+// ---------------------------------------
+// @lime-scrollbar-track-border-radius:

package/styles/variables-game.less

@@ -0,0 +1,25 @@
+// Alert
+// ---------------------------------------
+@lime-alert-overlay-border-radius: 0;
+
+// Button
+// ---------------------------------------
+@lime-button-border-radius: 0;
+@lime-button-bg-border-width: 6px;
+@lime-button-bg-border-style: solid;
+@lime-button-icononly-border-radius: var(--primitive-radius-12);
+@lime-button-icononly-bg-border: 6px;
+
+// Heading
+// ---------------------------------------
+@lime-heading-font-style: italic;
+@lime-heading-padding: 18px 48px;
+
+// Item
+// ---------------------------------------
+@lime-item-font-weight: var(--primitive-font-weight-regular);
+@lime-item-border-radius: 0;
+
+// Scroller
+// ---------------------------------------
+@lime-scrollbar-track-border-radius: var(--primitive-radius-6);