igniteui-theming 1.0.0-beta.13 → 1.0.0-beta.14

package/_index.scss

@@ -1,6 +1,6 @@
-@forward './sass/animations';
+@forward './sass/bem';
 @forward './sass/color';
-@forward './sass/typography';
 @forward './sass/elevations';
-@forward './sass/utils';
 @forward './sass/themes';
+@forward './sass/typography';
+@forward './sass/utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "1.0.0-beta.13",
+  "version": "1.0.0-beta.14",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "scripts": {

package/sass/_index.scss

@@ -1,4 +1,4 @@
-@forward 'animations';
+@forward 'bem';
 @forward 'color';
 @forward 'elevations';
 @forward 'typography';

package/sass/bem/_index.scss

@@ -0,0 +1,397 @@
+/* stylelint-disable max-line-length */
+@use 'sass:string';
+@use 'sass:meta';
+@use 'sass:list';
+@use 'sass:selector';
+
+////
+/// @group bem
+/// @author <a href="https://github.com/runningskull" target="_blank">Juan Patten</a>
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+/// @type String - The Element separator used. Default '__'.
+$bem--sep-elem: if(meta.variable-exists(bem--sep-elem), $bem--sep-elem, '__');
+
+/// @type String - The Modifier separator used. Default '--'.
+$bem--sep-mod: if(meta.variable-exists(bem--sep-mod), $bem--sep-mod, '--');
+
+/// @type String - The Modifier Value separator used. Default '-'.
+$bem--sep-mod-val: if(meta.variable-exists(bem--sep-mod-val), $bem--sep-mod-val, '-');
+
+/// Converts a passed selector value into plain string.
+/// @access private
+/// @param {String} $s - The selector to be converted.
+@function bem--selector-to-string($s) {
+    @if not($s) {
+        @return '';
+    }
+
+    @return string.slice(meta.inspect($s), 2, -3);
+}
+
+/// Prepends a dot to the passed BEM selector.
+/// @access private
+/// @param {String} $x - The BEM selector to prepend a dot to.
+@function bem--with-dot($x) {
+    $first: string.slice($x, 0, 1);
+
+    @return if($first == '.', $x, string.insert($x, '.', -100));
+}
+
+/// Converts a key-value map into a modifier string.
+/// @access private
+@function bem--mod-str($m) {
+    @if meta.type-of($m) == 'map' {
+        $mm: list.nth($m, 1);
+
+        @return list.nth($mm, 1) + $bem--sep-mod-val + list.nth($mm, 2);
+    } @else {
+        @return $m;
+    }
+}
+
+/// Prefixes the block name to an element selector string,
+/// with the element separator string used as a divider.
+/// @access private
+/// @param {String} $b - The block name.
+/// @param {String} $e - The element name.
+@function bem--elem-str($b, $e) {
+    @return $b + $bem--sep-elem + $e;
+}
+
+/// Returns a block selector string affixed by the modifier selector,
+/// followed by the element selector string.
+/// @access private
+/// @param {String} $block - The block name.
+/// @param {String} $elem - The sub-element name.
+/// @param {String} $mod - The modifier name.
+@function bem--bem-str($block, $elem, $mod) {
+    $elem: if($elem, ' ' + $elem, '');
+
+    @return ($block + $bem--sep-mod + bem--mod-str($mod) + $elem);
+}
+
+/// Checks if the element separator string is part of the passed string.
+/// @access private
+/// @param {String} $x - The string to check.
+/// @returns {number|null} Will return the index of the occurance,
+/// or null if the element separator name is not part of the passed string.
+@function bem--contains-elem($x) {
+    // if you set the separators to common strings, this could fail
+    @return string.index($x, $bem--sep-elem);
+}
+
+/// Checks if the modifier separator string is part of the passed string.
+/// @access private
+/// @param {String} $x - The string to check.
+/// @returns {number|null} Will return the index of the occurance,
+/// or null if the modifier separator string is not part of the passed string.
+@function bem--contains-mod($x) {
+    // if you set the separators to common strings, this could fail
+    @return string.index($x, $bem--sep-mod);
+}
+
+/// Checks if the passed selector string contains a colon.
+/// @access private
+/// @param {String} $x - The string to check for colons.
+/// @returns {number|null} Will return the index of the occurance,
+/// or null if the string does not contain any colons.
+@function bem--contains-pseudo($x) {
+    @return string.index($x, ':');
+}
+
+/// Returns the BEM block-name that generated `$x`. Does not include leading ".".
+/// @access private
+/// @param {String} $x - The block name.
+@function bem--extract-block($x) {
+    @if bem--contains-mod($x) {
+        @return string.slice($x, 1, string.index($x, $bem--sep-mod) - 1);
+    } @else if bem--contains-elem($x) {
+        @return string.slice($x, 1, string.index($x, $bem--sep-elem) - 1);
+    } @else if bem--contains-pseudo($x) {
+        @return string.slice($x, 1, string.index($x, ':') - 1);
+    }
+
+    @return $x;
+}
+
+/// Returns the first selector of a nested selector string.
+/// @access private
+@function bem--extract-first-selector($x) {
+    $eow: string.index($x, ' ') or -1;
+
+    @return string.slice($x, 1, $eow);
+}
+
+/// Generates a full BEM selector.
+/// @access public
+/// @param {String} $block - Required. A string block name.
+/// @param {String|List} $elem - Optional. A sub-element name. If `$mod` is not present, it is
+/// joined with $block. If $mod is present, it is nested under `$block--$mod`.
+/// @param {String|Map} $mod - Optional. A block modifier.
+/// @example scss Include a block
+///   @include bem-selector(block); // outputs .block
+/// @example scss Include a block and an element
+///   @include bem-selector(block, $e:elem); // outputs .block__elem
+/// @example scss Include block, element, and element modifier
+///   @include bem-selector(block, $e:(elem,emod); // outputs .block__elem-emod
+/// @example scss Include block and block modifier
+///   @include bem-selector(block, $m:mod) // outputs .block--mod
+/// @example scss Include block and modifier value
+///   @include bem-selector(block, $m:(mod:val)); // outputs .block--mod-val
+/// @example scss Include block modifier followed by block sub-element
+///   @include bem-selector(block, $m:mod, $e:elem); // outputs .block--mod .block__elem
+@function bem-selector($block, $e: null, $elem: null, $m: null, $mod: null, $mods: null) {
+    $block: bem--with-dot($block);
+    $elem: $e or $elem;
+
+    // Return early if possible
+    $mods: $m or $mod or $mods;
+
+    @if not ($elem or $mods) {
+        @return $block;
+    }
+
+    @if $elem {
+        // User passed an element-specific modifier
+        @if meta.type-of($elem) == list and list.nth($elem, 2) {
+            // For now we don't support multiple elem-mods at once
+            @if meta.type-of(list.nth($elem, 2)) == 'list' {
+                @error 'Only one element-modifier allowed.';
+            }
+
+            $elem: string.slice(bem-selector(list.nth($elem, 1), $m: list.nth($elem, 2)), 2);
+        }
+
+        $elem: bem--elem-str($block, $elem);
+    }
+
+    @if not $mods {
+        @return bem--with-dot($elem);
+    }
+
+    @if meta.type-of($mods) != 'list' {
+        $mods: ($mods, );
+    }
+
+    $bemcls: '';
+
+    @for $i from 1 to list.length($mods) {
+        $bemcls: $bemcls + bem--bem-str($block, $elem, list.nth($mods, $i)) + ', ';
+    }
+
+    $bemcls: $bemcls + bem--bem-str($block, $elem, list.nth($mods, -1));
+
+    @return $bemcls;
+}
+
+/// Simply unrolls into a class-selector. The main purpose of using this mixin
+/// is to clearly denote the start of a BEM block.
+/// @access public
+/// @param {String} $block - The block name.
+@mixin bem-block($block) {
+    @at-root {
+        #{bem-selector($block)} {
+            @content;
+        }
+    }
+}
+
+/// Unrolls into a proper BEM element selector, depending on the context.
+/// Inside just a block, yields a root-level `.block__elem`.
+/// Inside a mod or pseudo-selector, yields a nested `.block--mod .block__elem`.
+/// If $mod is included, it is appended to the block selector. Multiple
+/// $mods are not supported.
+/// @access public
+/// @param {String} $elem - The sub-element name.
+/// @param {String} $m - The modifier name.
+/// @param {String} $mod - An alias of `$m`.
+@mixin bem-elem($elem, $m: null, $mod: null, $mods: null) {
+    $this: bem--selector-to-string(&);
+    $block: bem--extract-block($this);
+    $first: bem--extract-first-selector($this);
+    $nested: bem--contains-pseudo($this) or bem--contains-mod($this);
+    $mod: $m or $mod;
+    $mx: ();
+
+    @if $this == '' {
+        @error 'Detected an Element that is not inside a Block: #{$elem}';
+    }
+
+    @if bem--contains-elem($this) {
+        @error 'Detected a multi-level nested Element (#{$this} #{$elem})! Bem doesn\'t support nested ' + 'elements because they do not have BEM nature (www.getbem.com/faq/#css-nested-elements). ' + 'If you must do it, use a hardcoded selector like &__subsubelem ';
+    }
+
+    @if $mods != null and meta.type-of($mods) == 'list' {
+        @each $i in $mods {
+            $mx: list.append($mx, #{bem-selector($block, $e: ($elem, $i))});
+        }
+    }
+
+    @if not($nested) {
+        // Normal case, no pseudo-selector present or mod, so no nesting.
+        // .block__elem { ... }
+        @at-root {
+            @if not($mods) {
+                #{bem-selector($block, $e: ($elem, $mod))} {
+                    @content;
+                }
+            } @else {
+                #{selector.append($mx...)} {
+                    @content;
+                }
+            }
+        }
+    } @else {
+        // pseudo-element or mod present, so we have nesting.
+        // .block:active .block__elem { ... }
+        // .block--mod .block__elem { ... }
+        @at-root {
+            $selector: $first + ' ' + bem-selector($block, $e: ($elem, $mod));
+
+            @if not($mods) {
+                #{$selector} {
+                    @content;
+                }
+            } @else {
+                #{$first} #{selector.append($mx...)} {
+                    @content;
+                }
+            }
+        }
+    }
+}
+
+/// Unrolls into a BEM block-modifier selector.
+/// This mixin does not generate element-modifiers, the bem-elem mixin instead.
+/// Nesting bem-mod inside a pseudo-selector is not supported, because what
+/// that should mean isn't clear.
+/// @access public
+/// @param {String} $mod - The modifier name.
+@mixin bem-mod($mod) {
+    $skip: false;
+    $this: bem--selector-to-string(&);
+
+    @if $this == '' {
+        @error 'Detected a Modifier that is not inside a Block: ' + $mod;
+    }
+
+    @if bem--contains-elem($this) {
+        @error 'Nesting a Modifier inside an Element (#{$this} #{$mod}) ' + 'is not supported. Instead, use bem-elem(myelem, elem-mod) syntax.';
+    }
+
+    @if bem--contains-pseudo($this) {
+        @error 'Nesting a Modifier inside a pseudo-selector is not supported: #{$this} #{$mod}';
+    }
+
+    @at-root {
+        #{bem-selector($this, $m: $mod)} {
+            @content;
+        }
+    }
+}
+
+/// Unrolls into a block--modifier.[block--modifier...] .block__el
+/// This mixin is useful when we want to apply classes to a block,
+/// or block element when two or more modifiers are applied in tandem
+/// @access public
+/// @param {List} $mods - A list of modifiers
+@mixin bem-mods($mods...) {
+    $this: bem--selector-to-string(&);
+    $mod-classes: ();
+
+    @each $mod in $mods {
+        @if $this == '' {
+            @error 'Detected a Modifier that is not inside a Block: ' + $mod;
+        }
+
+        @if bem--contains-elem($this) {
+            @error 'Nesting a Modifier inside an Element (#{$this} #{$mod}) ' + 'is not supported. Instead, use bem-elem(myelem, elem-mod) syntax.';
+        }
+
+        @if bem--contains-pseudo($this) {
+            @error 'Nesting a Modifier inside a pseudo-selector is not supported: #{$this} #{$mod}';
+        }
+
+        $mod-classes: list.append($mod-classes, #{bem-selector($block: $this, $m: $mod)});
+    }
+
+    @at-root {
+        #{selector.append($mod-classes...)} {
+            @content;
+        }
+    }
+}
+
+/// @alias bem-selector
+/// @see bem-selector
+@mixin bem($block, $e: null, $elem: null, $m: null, $mod: null, $mods: null) {
+    #{bem-selector($block, $e: $e, $elem: $elem, $m: $m, $mod: $mod, $mods: $mods)} {
+        @content;
+    }
+}
+
+/// @alias bem-block
+/// @see bem-block
+@mixin block($block) {
+    @include bem-block($block) {
+        @content;
+    }
+}
+
+/// @alias bem-elem
+/// @see bem-elem
+@mixin elem($elem, $m: null, $mod: null, $mods: null) {
+    @include bem-elem($elem, $m: $m, $mod: $mod, $mods: $mods) {
+        @content;
+    }
+}
+
+/// @alias bem-mod
+/// @see bem-mod
+@mixin mod($mod) {
+    @include bem-mod($mod) {
+        @content;
+    }
+}
+
+/// @alias bem-mods
+/// @see bem-mods
+@mixin mods($mods...) {
+    @include bem-mods($mods...) {
+        @content;
+    }
+}
+
+/// @alias bem-block
+/// @see bem-block
+@mixin b($block) {
+    @include bem-block($block) {
+        @content;
+    }
+}
+
+/// @alias bem-elem
+/// @see bem-elem
+@mixin e($elem, $m: null, $mod: null, $mods: null) {
+    @include bem-elem($elem, $m: $m, $mod: $mod, $mods: $mods) {
+        @content;
+    }
+}
+
+/// @alias bem-mod
+/// @see bem-mod
+@mixin m($mod) {
+    @include bem-mod($mod) {
+        @content;
+    }
+}
+
+/// @alias bem-mods
+/// @see bem-mods
+@mixin mx($mods...) {
+    @include bem-mods($mods...) {
+        @content;
+    }
+}

package/sass/color/presets/dark/_fluent.scss

@@ -4,6 +4,7 @@ $palette: palette(
     $primary: #0078d4,
     $secondary: #0078d4,
     $surface: #222,
+    $info: #1377d5,
     $success: #107c10,
     $warn: #797673,
     $error: #a80000,
@@ -13,6 +14,7 @@ $word-palette: palette(
     $primary: #2b579a,
     $secondary: #2b579a,
     $surface: #222,
+    $info: #1377d5,
     $success: #107c10,
     $warn: #797673,
     $error: #a80000,
@@ -22,6 +24,7 @@ $excel-palette: palette(
     $primary: #217346,
     $secondary: #217346,
     $surface: #222,
+    $info: #1377d5,
     $success: #107c10,
     $warn: #797673,
     $error: #a80000,

package/sass/color/presets/light/_fluent.scss

@@ -14,6 +14,7 @@ $word-palette: palette(
     $primary: #2b579a,
     $secondary: #2b579a,
     $surface: #fff,
+    $info: #1377d5,
     $success: #107c10,
     $warn: #797673,
     $error: #a80000,
@@ -23,6 +24,7 @@ $excel-palette: palette(
     $primary: #217346,
     $secondary: #217346,
     $surface: #fff,
+    $info: #1377d5,
     $success: #107c10,
     $warn: #797673,
     $error: #a80000,

package/test/_bem.spec.scss

@@ -0,0 +1,168 @@
+/* stylelint-disable selector-class-pattern */
+/* stylelint-disable max-nesting-depth */
+@use '../node_modules/sass-true/' as *;
+@use '../sass/bem' as *;
+
+@include describe('BEM') {
+    @include it('creates block__element classes using the respective mixins') {
+        @include assert() {
+            @include output($selector: false) {
+                @include b(block) {
+                    background: black;
+
+                    @include e(element) {
+                        color: orange;
+                    }
+                }
+            }
+
+            @include expect($selector: false) {
+                .block {
+                    background: black;
+                }
+
+                .block__element {
+                    color: orange;
+                }
+            }
+        }
+    }
+
+    @include it('creates block--modifier classes using the modifier mixins') {
+        @include assert() {
+            @include output($selector: false) {
+                @include b(block) {
+                    background: black;
+
+                    @include m(error) {
+                        background: red;
+                    }
+
+                    @include mx(error, selected) {
+                        background: darkred;
+                    }
+                }
+            }
+
+            @include expect($selector: false) {
+                .block {
+                    background: black;
+                }
+
+                .block--error {
+                    background: red;
+                }
+
+                .block--error.block--selected {
+                    background: darkred;
+                }
+            }
+        }
+    }
+
+    @include it('creates block__element--modifier classes using the element mixin') {
+        @include assert() {
+            @include output($selector: false) {
+                @include b(block) {
+                    background: black;
+
+                    @include e(element, $m: small) {
+                        font-size: 12px;
+                    }
+
+                    @include e(element, $m: medium) {
+                        font-size: 14px;
+                    }
+
+                    @include e(element, $m: large) {
+                        font-size: 16px;
+                    }
+                }
+            }
+
+            @include expect($selector: false) {
+                .block {
+                    background: black;
+                }
+
+                .block__element--small {
+                    font-size: 12px;
+                }
+
+                .block__element--medium {
+                    font-size: 14px;
+                }
+
+                .block__element--large {
+                    font-size: 16px;
+                }
+            }
+        }
+    }
+
+    @include it('creates multiple element modifier classes using the element mixin') {
+        @include assert() {
+            @include output($selector: false) {
+                @include b(block) {
+                    background: black;
+
+                    @include e(element, $mods: (small, pink)) {
+                        color: pink;
+                        font-size: 12px;
+                    }
+                }
+            }
+
+            @include expect($selector: false) {
+                .block {
+                    background: black;
+                }
+
+                .block__element--small.block__element--pink {
+                    color: pink;
+                    font-size: 12px;
+                }
+            }
+        }
+    }
+
+    @include it('overwrites element styles in a modified block') {
+        @include assert() {
+            @include output($selector: false) {
+                @include b(block) {
+                    background: black;
+
+                    @include e(element) {
+                        color: wheat;
+                    }
+
+                    @include m(error) {
+                        background: red;
+
+                        @include e(element) {
+                            color: white;
+                        }
+                    }
+                }
+            }
+
+            @include expect($selector: false) {
+                .block {
+                    background: black;
+                }
+
+                .block__element {
+                    color: wheat;
+                }
+
+                .block--error {
+                    background: red;
+                }
+
+                .block--error .block__element {
+                    color: white;
+                }
+            }
+        }
+    }
+}

package/test/_index.scss

@@ -4,3 +4,4 @@
 @use 'utils.spec' as *;
 @use 'themes.spec' as *;
 @use 'elevations.spec' as *;
+@use 'bem.spec' as *;