igniteui-theming 6.1.0-beta.1 → 6.1.0

package/json/colors/presets/palettes.json

@@ -1 +1 @@
-{"light-bootstrap-palette":{"primary":"#0d6efd","secondary":"#6c757d","gray":"#949ea9","surface":"#f8f9fa","info":"#0dcaf0","success":"#198754","warn":"#ffc107","error":"#dc3545"},"dark-bootstrap-palette":{"primary":"#0d6efd","secondary":"#6c757d","gray":"#b6bdc4","surface":"#212529","info":"#0dcaf0","success":"#198754","warn":"#ffc107","error":"#dc3545"},"light-material-palette":{"primary":"#0099ff","secondary":"#df1b74","gray":"#9e9e9e","surface":"white","info":"#1377d5","success":"#4eb862","warn":"#faa419","error":"#ff134a"},"dark-material-palette":{"primary":"#0099ff","secondary":"#df1b74","gray":"#bdbdbd","surface":"#222222","info":"#1377d5","success":"#4eb862","warn":"#faa419","error":"#ff134a"},"light-fluent-palette":{"primary":"#0078d4","secondary":"#2b88d8","gray":"#9e9e9e","surface":"white","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"dark-fluent-palette":{"primary":"#0078d4","secondary":"#2b88d8","gray":"#bdbdbd","surface":"#222222","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"light-indigo-palette":{"primary":"#4051b5","secondary":"#4051b5","gray":"#9a9da2","surface":"#f8f8fa","info":"#9b27b0","success":"#689f38","warn":"#f66d1e","error":"#d11a2c"},"dark-indigo-palette":{"primary":"#4051b5","secondary":"#4051b5","gray":"#c3c3c6","surface":"#1e1f24","info":"#9b27b0","success":"#689f38","warn":"#f66d1e","error":"#d11a2c"}}
+{"light-bootstrap-palette":{"primary":"#0d6efd","secondary":"#6c757d","gray":"#949ea9","surface":"#f8f9fa","info":"#0dcaf0","success":"#198754","warn":"#ffc107","error":"#dc3545"},"dark-bootstrap-palette":{"primary":"#0d6efd","secondary":"#6c757d","gray":"#b6bdc4","surface":"#212529","info":"#0dcaf0","success":"#198754","warn":"#ffc107","error":"#dc3545"},"light-material-palette":{"primary":"#0099ff","secondary":"#df1b74","gray":"#9e9e9e","surface":"white","info":"#1377d5","success":"#4eb862","warn":"#faa419","error":"#ff134a"},"dark-material-palette":{"primary":"#0099ff","secondary":"#df1b74","gray":"#bdbdbd","surface":"#222222","info":"#1377d5","success":"#4eb862","warn":"#faa419","error":"#ff134a"},"light-fluent-palette":{"primary":"#0078d4","secondary":"#2b88d8","gray":"#9e9e9e","surface":"white","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"dark-fluent-palette":{"primary":"#0078d4","secondary":"#2b88d8","gray":"#bdbdbd","surface":"#1b1b1b","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"light-indigo-palette":{"primary":"#4051b5","secondary":"#4051b5","gray":"#9a9da2","surface":"#f8f8fa","info":"#9b27b0","success":"#689f38","warn":"#f66d1e","error":"#d11a2c"},"dark-indigo-palette":{"primary":"#4051b5","secondary":"#4051b5","gray":"#c3c3c6","surface":"#1e1f24","info":"#9b27b0","success":"#689f38","warn":"#f66d1e","error":"#d11a2c"}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "6.1.0-beta.1",
+  "version": "6.1.0",
   "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/color/presets/dark/_fluent.scss

@@ -12,7 +12,7 @@
 /// @prop {Color} primary [#0078d4] - The primary color
 /// @prop {Color} secondary [#2b88d8] - The secondary color
 /// @prop {Color} gray [#fff] - The gray color
-/// @prop {Color} surface [#222] - The surface color
+/// @prop {Color} surface [#1b1b1b] - The surface color
 /// @prop {Color} info [#1377d5] - The info color
 /// @prop {Color} success [#107c10] - The success color
 /// @prop {Color} warn [#797673] - The warn color
@@ -20,7 +20,7 @@
 $palette: palette(
     $primary: #0078d4,
     $secondary: #2b88d8,
-    $surface: #222,
+    $surface: #1b1b1b,
     $info: #1377d5,
     $success: #107c10,
     $warn: #797673,
@@ -34,7 +34,7 @@ $palette: palette(
 /// @prop {Color} primary [#2b579a] - The primary color
 /// @prop {Color} secondary [#2b579a] - The secondary color
 /// @prop {Color} gray [#fff] - The gray color
-/// @prop {Color} surface [#222] - The surface color
+/// @prop {Color} surface [#1b1b1b] - The surface color
 /// @prop {Color} info [#1377d5] - The info color
 /// @prop {Color} success [#107c10] - The success color
 /// @prop {Color} warn [#797673] - The warn color
@@ -42,7 +42,7 @@ $palette: palette(
 $word-palette: palette(
     $primary: #2b579a,
     $secondary: #2b579a,
-    $surface: #222,
+    $surface: #1b1b1b,
     $info: #1377d5,
     $success: #107c10,
     $warn: #797673,
@@ -56,7 +56,7 @@ $word-palette: palette(
 /// @prop {Color} primary [#217346] - The primary color
 /// @prop {Color} secondary [#217346] - The secondary color
 /// @prop {Color} gray [#fff] - The gray color
-/// @prop {Color} surface [#222] - The surface color
+/// @prop {Color} surface [#1b1b1b] - The surface color
 /// @prop {Color} info [#1377d5] - The info color
 /// @prop {Color} success [#107c10] - The success color
 /// @prop {Color} warn [#797673] - The warn color
@@ -64,7 +64,7 @@ $word-palette: palette(
 $excel-palette: palette(
     $primary: #217346,
     $secondary: #217346,
-    $surface: #222,
+    $surface: #1b1b1b,
     $info: #1377d5,
     $success: #107c10,
     $warn: #797673,

package/sass/themes/schemas/components/dark/_slider.scss

@@ -22,7 +22,7 @@ $dark-material-slider: $material-slider;
 /// @prop {Map} track-color [color: ('gray', 600)] - The color of the track.
 /// @prop {Map} track-hover-color [color: ('primary', 300)] - The color of the track on hover.
 /// @prop {Map} thumb-border-color [color: ('gray', 400)] - The thumb border color.
-/// @prop {Map} thumb-border-hover-color [color: ('gray', 400)] - The thumb border color.
+/// @prop {Map} thumb-border-hover-color [color: ('gray', 400)] - The thumb border color on hover.
 /// @prop {Map} thumb-focus-color [color: ('primary', 100)] - The focus outline color of the thumb.
 /// @prop {Map} thumb-disabled-border-color [color: ('gray', 200)] - The thumb border color when it's disabled.
 /// @prop {Map} disabled-base-track-color [color: ('gray', 100)] - The base background color of the track when is disabled.
@@ -129,7 +129,11 @@ $dark-bootstrap-slider: extend(
 /// @prop {Map} thumb-color [color: 'surface'] - The color of the thumb.
 /// @prop {Map} thumb-border-color [color: ('primary', 400)] - The thumb border color.
 /// @prop {Map} thumb-border-hover-color [color: ('primary', 300)] - The thumb border color when hovered.
-/// @prop {Map} disabled-thumb-color [color: 'surface'] - The thumb color when its disabled.
+/// @prop {Map} tick-color [contrast-color: ('gray', 50, 0.2)] - The background-color of the tick.
+/// @prop {Map} tick-label-color [contrast-color: ('gray', 50, 0.6)] - The color of the tick label.
+/// @prop {Map} label-background-color [color: ('gray', 300)] - The background color of the bubble label.
+/// @prop {Map} label-text-color [contrast-color: ('gray', 50)] - The text color of the bubble label.
+/// @prop {Map} disabled-thumb-color [color: 'surface'] - The thumb color when it's disabled.
 /// @prop {Map} thumb-disabled-border-color [color: ('primary', 800)] - The thumb border color when it's disabled.
 /// @prop {Map} disabled-base-track-color [contrast-color: ('gray', 50, 0.15)] - The base background color of the track when is disabled.
 /// @prop {Map} disabled-fill-track-color [color: ('primary', 800)] - The background color of the fill track when is disabled.
@@ -185,6 +189,32 @@ $dark-indigo-slider: extend(
                 300,
             ),
         ),
+        tick-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.2,
+            ),
+        ),
+        tick-label-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.6,
+            ),
+        ),
+        label-background-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+        label-text-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
         disabled-thumb-color: (
             color: 'surface',
         ),

package/sass/themes/schemas/components/dark/_splitter.scss

@@ -54,7 +54,7 @@ $dark-bootstrap-splitter: $bootstrap-splitter;
 /// @prop {Map} bar-color [color: ('gray', 200)] - The background color of the bar.
 /// @prop {Map} focus-color [color: ('gray', 300)] - The color used for focused splitter bar.
 /// @prop {Map} handle-color [color: ('gray', 600)] - The color for the bar drag handle.
-/// @prop {Map} expander-color [color: ('gray', 600)] - The color for the bar drag handle.
+/// @prop {Map} expander-color [color: ('gray', 600)] - The color for the arrow expander.
 /// @requires $indigo-splitter
 $dark-indigo-splitter: extend(
     $indigo-splitter,

package/sass/themes/schemas/components/dark/_time-picker.scss

@@ -47,17 +47,27 @@ $dark-bootstrap-time-picker: $bootstrap-time-picker;
 
 /// Generates a dark indigo time-picker schema.
 /// @type {Map}
+/// @prop {Map} text-color [color: ('gray', 900)] - The text color of an open time picker.
 /// @prop {Map} background-color [color: ('gray', 50)] - The time-picker panel background color.
 /// @prop {Map} header-background [color: ('gray', 50)] - The header background color of a time picker.
 /// @prop {Map} selected-text-color [color: ('primary', 200)] -  The text color of a selected item in time picker.
 /// @prop {Map} hover-text-color [color: ('primary', 200)] - The hover text color of an open time picker.
 /// @prop {Color} border-color [color: ('gray', 100)] - The border-color of the time picker.
 /// @prop {Color} divider-color [color: ('gray', 100)] - The divider color of the time picker.
+/// @prop {Map} header-hour-text-color [contrast-color: ('gray', 50)] - The header hour text color of a time picker.
+/// @prop {Map} header-time-period-color [contrast-color: ('gray', 50)] - The header AM/PM text color of a time picker.
 /// @requires $indigo-time-picker
 $dark-indigo-time-picker: extend(
     $indigo-time-picker,
     $dark-indigo-elevation-time-picker,
     (
+        text-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
         background-color: (
             color: (
                 'gray',
@@ -79,6 +89,20 @@ $dark-indigo-time-picker: extend(
             ),
         ),
 
+        header-hour-text-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        header-time-period-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+
         selected-text-color: (
             color: (
                 'primary',

package/sass/themes/schemas/components/light/_slider.scss

@@ -334,7 +334,7 @@ $bootstrap-slider: extend(
 /// @prop {Map} tick-label-color [color: ('gray', 600)] - The color of the tick label.
 /// @prop {Map} label-background-color [color: ('gray', 600)] - The background color of the bubble label.
 /// @prop {Map} label-text-color [contrast-color: ('gray', 600)] - The text color of the bubble label.
-/// @prop {Map} disabled-thumb-color [color: ('gray', 50)] - The thumb color when its disabled.
+/// @prop {Map} disabled-thumb-color [color: ('gray', 50)] - The thumb color when it's disabled.
 /// @prop {Map} thumb-disabled-border-color [color: ('primary', 50)] - The thumb border color when it's disabled.
 /// @prop {Map} disabled-base-track-color [color: ('gray', 900, 0.15)] - The base background color of the track when is disabled.
 /// @prop {Map} disabled-fill-track-color [color: ('primary', 50)] - The background color of the fill track when is disabled.

package/sass/themes/schemas/components/light/_splitter.scss

@@ -75,7 +75,7 @@ $bootstrap-splitter: $light-splitter;
 /// @prop {Map} bar-color [color: ('gray', 400)] - The background color of the bar.
 /// @prop {Map} focus-color [color: ('gray', 500)] - The color used for focused splitter bar.
 /// @prop {Map} handle-color [color: ('gray', 700)] - The color for the bar drag handle.
-/// @prop {Map} expander-color [color: ('gray', 700)] - The color for the bar drag handle.
+/// @prop {Map} expander-color [color: ('gray', 700)] - The color for the arrow expander.
 /// @requires {Map} $light-splitter
 $indigo-splitter: extend(
     $light-splitter,