refactor(themes): add square and oval presets in schemas

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes for each version of this project will be documented in this file.
 ## 8.0.0
+- `Theming`: Add component schemas for completely round and completely square variations. Can be mixed with the existing light and dark component schemas. For instance:
+    ```scss
+        $light-round-input: extend($_light-input-group, $_round-shape-input-group);
+    ```
+There are also prebuilt schema presets for all components (light-round/dark-round and light-square/dark-square), namely `$light-round-schema, $light-dark-schema, $light-square-schema, $dark-square-schema`;
 - `IgxCombo`: Removed the following deprecated (since 6.2.0) template selectors:
     - `#emptyTemplate`
     - `#headerTemplate`

projects/igniteui-angular/src/lib/checkbox/checkbox.component.html

@@ -16,18 +16,23 @@
     (focus)="onFocus($event)"
     (blur)="onBlur($event)" />
 
-<label #label class="igx-checkbox__composite"
+<div
     igxRipple
     igxRippleTarget=".igx-checkbox__ripple"
     [igxRippleDisabled]="disableRipple"
     [igxRippleCentered]="true"
     [igxRippleDuration]="300"
-    [attr.for]="inputId">
-    <svg class="igx-checkbox__composite-mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-        <path d="M4.1,12.7 9,17.6 20.3,6.3" />
-    </svg>
+    class="igx-checkbox__composite-wrapper"
+>
+    <label #label class="igx-checkbox__composite"
+        [attr.for]="inputId">
+        <svg class="igx-checkbox__composite-mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path d="M4.1,12.7 9,17.6 20.3,6.3" />
+        </svg>
+    </label>
+
     <div class="igx-checkbox__ripple"></div>
-</label>
+</div>
 
 <span #placeholderLabel role="label"
     [class]="labelClass"

projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss

@@ -48,7 +48,9 @@
 ///
 /// @param {Color} $date-disabled-text-color [null] - The text color for disabled dates.
 ///
-/// @param {border-radius} $border-radius [null] - The border radius used for calendar.
+/// @param {border-radius} $border-radius [null] - The border radius used for the outline of the calendar.
+/// @param {border-radius} $date-border-radius [null] - The border radius used for the outline outline of the date.
+/// @param {border-radius} $month-border-radius [null] - The border radius used for the outline outline of the month.
 ///
 /// @requires $default-palette
 /// @requires $light-schema
@@ -72,6 +74,8 @@
     $content-text-color: null,
 
     $border-radius: null,
+    $date-border-radius: null,
+    $month-border-radius: null,
 
     $header-background: null,
     $header-text-color: null,
@@ -111,6 +115,14 @@
         if($border-radius, $border-radius, map-get($calendar-schema, 'border-radius')), 0, 20px
     );
 
+    $date-border-radius: round-borders(
+        if($date-border-radius, $date-border-radius, map-get($calendar-schema, 'date-border-radius')), 0, 20px
+    );
+
+    $month-border-radius: round-borders(
+        if($month-border-radius, $month-border-radius, map-get($calendar-schema, 'month-border-radius')), 0, 20px
+    );
+
     @if not($content-text-color) and $content-background {
         @if type-of($content-background) == 'color' {
             $content-text-color: text-contrast($content-background);
@@ -209,6 +221,8 @@
         header-text-color: $header-text-color,
 
         border-radius: $border-radius,
+        date-border-radius: $date-border-radius,
+        month-border-radius: $month-border-radius,
 
         picker-arrow-color: $picker-arrow-color,
         picker-arrow-hover-color: $picker-arrow-hover-color,
@@ -372,14 +386,16 @@
     }
 
     %cal-value {
+        position: relative;
         display: flex;
         justify-content: center;
         align-items: center;
         width: $cal-value-w;
         height: $cal-value-h;
         min-width: 2ch;
         margin: $cal-value-margin;
-        border-radius: $cal-value-br;
+        // border-radius: $cal-value-br;
+        border-radius: --var($theme, 'date-border-radius');
         color: --var($theme, 'content-text-color');
         cursor: pointer;
         outline: none;
@@ -452,7 +468,7 @@
             transform: translateY(-50%);
             height: 48px;
             background: transparent;
-            border-radius: rem(20px);
+            border-radius: --var($theme, 'month-border-radius');
             transition: background-color .15s ease-out;
             z-index: -1;
         }

projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-component.scss

@@ -40,6 +40,10 @@
         @extend %cbx-label-pos--before !optional;
     }
 
+    @include e(composite-wrapper) {
+        @extend %cbx-composite-wrapper !optional;
+    }
+
     @include e(composite) {
         @extend %cbx-composite !optional;
     }

projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss

@@ -16,6 +16,7 @@
 /// @param {Color} $fill-color [null] - The checked border and fill colors.
 /// @param {Color} $tick-color [null] - The checked mark color.
 /// @param {Color} $disabled-color [null] - The disabled border and fill colors.
+/// @param {border-radius} $border-radius [null] - The border radius used for checkbox component.
 /// Set to light when the surrounding area is dark.
 ///
 /// @requires $default-palette
@@ -31,14 +32,20 @@
     $palette: $default-palette,
     $schema: $light-schema,
 
+    $border-radius: null,
     $label-color: null,
     $empty-color: null,
     $fill-color: null,
     $tick-color: null,
     $disabled-color: null
 ) {
     $name: 'igx-checkbox';
-    $theme: apply-palette(map-get($schema, $name), $palette);
+    $checkbox-schema: map-get($schema, $name);
+    $theme: apply-palette($checkbox-schema, $palette);
+
+    $border-radius: round-borders(
+        if($border-radius, $border-radius, map-get($checkbox-schema, 'border-radius')),0 ,10px
+    );
 
     @return extend($theme, (
         name: $name,
@@ -47,7 +54,8 @@
         empty-color: $empty-color,
         fill-color: $fill-color,
         tick-color: $tick-color,
-        disabled-color: $disabled-color
+        disabled-color: $disabled-color,
+        border-radius: $border-radius
     ));
 }
 
@@ -68,6 +76,7 @@
     @include scale-in-out($start-scale: .9);
 
     $size: em(20px);
+    $checkbox-radius: $size / 2;
     $border-width: 2px;
     $label-margin: em(8px);
     $radius: 2px;
@@ -103,6 +112,11 @@
         @include hide-default();
     }
 
+    %cbx-composite-wrapper {
+        width: $size;
+        height: $size;
+    }
+
     %cbx-composite {
         position: relative;
         display: inline-block;
@@ -113,9 +127,10 @@
         border-width: $border-width;
         border-style: solid;
         border-color: --var($theme, 'empty-color');
-        border-radius: $radius;
+        border-radius: --var($theme, 'border-radius');
         -webkit-tap-highlight-color: transparent;
         transition: border-color .2s $ease-out-quad;
+        overflow: hidden;
 
         &::after {
             position: absolute;
@@ -130,6 +145,7 @@
 
     %cbx-composite--x {
         border-color: --var($theme, 'fill-color');
+        background: --var($theme, 'fill-color');
 
         &::after {
             background: --var($theme, 'fill-color');
@@ -138,9 +154,12 @@
 
     %cbx-composite--disabled {
         border-color: --var($theme, 'disabled-color');
+        background: transparent;
     }
 
     %cbx-composite--x--disabled {
+        background: --var($theme, 'disabled-color');
+
         &::after {
             background: --var($theme, 'disabled-color');
         }
@@ -223,7 +242,7 @@
         @include igx-css-vars($ripple-theme);
         position: absolute;
         top: calc(50% - #{$ripple-radius});
-        left: calc(50% - #{$ripple-radius});
+        right: calc(100% - #{$ripple-radius} - #{$checkbox-radius});
         width: $ripple-size;
         height: $ripple-size;
         border-radius: $ripple-radius;

projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss

@@ -14,7 +14,7 @@
         min-width: 200px;
         max-width: 340px;
         box-shadow: igx-elevation($elevations, 24);
-        border-radius: rem(4px);
+        border-radius: --var($theme, 'border-radius');
         background: --var($theme, 'content-background');
         overflow: hidden;
 
@@ -107,8 +107,6 @@
     %date-picker--dropdown {
         display: flex;
         flex: 1 0 0;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
         box-shadow: igx-elevation($elevations, 3);
     }
 

projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss

@@ -162,7 +162,7 @@
         justify-content: flex-end;
         grid-row: 1;
         font-size: $grid-toolbar-fs;
-        padding: map-get($grid-toolbar-padding, 'cosy');
+        padding: map-get($grid-toolbar-padding, 'comfortable');
         border-bottom: 1px solid igx-color(map-get($theme, 'palette'), 'grays', 300);
         background: --var($theme, 'background-color');
         height: map-get($grid-toolbar-height, 'comfortable');
@@ -295,6 +295,11 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
+
+        > div {
+            display: flex;
+            align-items: center;
+        }
     }
 
     %igx-grid-toolbar__dropdown {

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -74,6 +74,7 @@
 /// @param {box-shadow} $drag-shadow [null] - The shadow used for movable elements (ex. column headers).
 /// @param {color} $row-drag-color [null] - The row drag handle color.
 /// @param {color} $row-ghost-background [null] - The dragged row background color.
+/// @param {border-radius} $drop-area-border-radius [null] - The border radius used for column drop area.
 ///
 /// @requires $default-palette
 /// @requires $light-schema
@@ -167,12 +168,18 @@
     $grid-shadow: null,
     $drag-shadow: null,
     $row-ghost-background: null,
-    $row-drag-color: null
+    $row-drag-color: null,
+    $drop-area-border-radius: null,
 ) {
     $name: 'igx-grid';
     $grid-schema: map-get($schema, $name);
     $theme: apply-palette($grid-schema, $palette);
 
+    $drop-area-border-radius: round-borders(
+        if($drop-area-border-radius, $drop-area-border-radius, map-get($grid-schema, 'border-radius')),0 ,16px
+    );
+
+
     $tree-selected-filtered-row-text-color: rgba(text-contrast(map-get($theme, 'row-selected-background')), .5);
     $tree-selected-filtered-cell-text-color: rgba(text-contrast(map-get($theme, 'cell-selected-background')), .5);
     $row-selected-cell-background: darken-color(map-get($theme, 'row-selected-background'), 8%);
@@ -430,7 +437,8 @@
         grid-shadow: $grid-shadow,
         drag-shadow: $drag-shadow,
         row-ghost-background: $row-ghost-background,
-        row-drag-color: $row-drag-color
+        row-drag-color: $row-drag-color,
+        drop-area-border-radius: $drop-area-border-radius
     ));
 }
 
@@ -490,12 +498,6 @@
         compact: rem(24px)
     );
 
-    $drop-area-padding: (
-        comfortable: 0 rem(16px),
-        cosy: 0 rem(8px),
-        compact: 0 rem(6px)
-    );
-
     $cell-padding-comfortable: rem(24px);
     $cell-padding-cosy: rem(16px);
     $cell-padding-compact: rem(12px);
@@ -1710,9 +1712,8 @@
         align-items: center;
         justify-content: flex-start;
         height: map-get($drop-area-height, 'comfortable');
-        border-radius: map-get($drop-area-height, 'comfortable') / 2;
-        padding: map-get($drop-area-padding, 'comfortable');
-        margin: rem(4px);
+        border-radius: --var($theme, 'drop-area-border-radius');
+        padding: map-get($grid-cell-padding, 'comfortable');
         flex: 1 0 0%;
         background: --var($theme, 'drop-area-background');
 
@@ -1731,17 +1732,16 @@
 
     %igx-drop-area--cosy {
         height: map-get($drop-area-height, 'cosy');
-        border-radius: map-get($drop-area-height, 'cosy') / 2;
-        padding: map-get($drop-area-padding, 'cosy');
+        border-radius: --var($theme, 'drop-area-border-radius');
+        padding: map-get($grid-cell-padding, 'cosy');
     }
 
     %igx-drop-area--compact {
         height: map-get($drop-area-height, 'compact');
-        border-radius: map-get($drop-area-height, 'compact') / 2;
-        padding: map-get($drop-area-padding, 'compact');
+        border-radius: --var($theme, 'drop-area-border-radius');
+        padding: map-get($grid-cell-padding, 'compact');
     }
 
-
     %igx-drop-area__text {
         @include ellipsis();
         color: --var($theme, 'drop-area-text-color');