igniteui-theming 6.0.1 → 6.1.0-beta.1

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":"#f9f9fb","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":"#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"}}

package/json/typography/presets/typescales.json

@@ -1 +1 @@
-{"bootstrap":{"typeface":"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'","h1":{"font-family":"inherit","font-size":"2.5rem","font-weight":"500","font-style":"normal","line-height":"3rem","letter-spacing":"-0.09375rem","text-transform":"none","margin-top":"0","margin-bottom":"0.5rem"},"h2":{"font-family":"inherit","font-size":"2rem","font-weight":"500","font-style":"normal","line-height":"2.4rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0.5rem"},"h3":{"font-family":"inherit","font-size":"1.75rem","font-weight":"500","font-style":"normal","line-height":"2.1rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0.5rem"},"h4":{"font-family":"inherit","font-size":"1.5rem","font-weight":"500","font-style":"normal","line-height":"1.8rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0.5rem"},"h5":{"font-family":"inherit","font-size":"1.25rem","font-weight":"500","font-style":"normal","line-height":"1.5rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0.5rem"},"h6":{"font-family":"inherit","font-size":"1rem","font-weight":"500","font-style":"normal","line-height":"1.2rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0.5rem"},"subtitle-1":{"font-family":"inherit","font-size":"1rem","font-weight":"700","font-style":"normal","line-height":"1.5rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"subtitle-2":{"font-family":"inherit","font-size":"0.875rem","font-weight":"700","font-style":"normal","line-height":"1.5rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"body-1":{"font-family":"inherit","font-size":"1rem","font-weight":"400","font-style":"normal","line-height":"1.5rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"body-2":{"font-family":"inherit","font-size":"0.875rem","font-weight":"400","font-style":"normal","line-height":"1.3125rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"button":{"font-family":"inherit","font-size":"1rem","font-weight":"400","font-style":"normal","line-height":"1.5rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"caption":{"font-family":"inherit","font-size":"0.75rem","font-weight":"400","font-style":"normal","line-height":"1rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"overline":{"font-family":"inherit","font-size":"0.625rem","font-weight":"400","font-style":"normal","line-height":"1rem","letter-spacing":"0.09375rem","text-transform":"uppercase","margin-top":"0","margin-bottom":"0"},"calendar-labels":{"font-family":"inherit","font-size":"0.8125rem","font-weight":"400","font-style":"normal","line-height":"normal","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"}},"material":{"typeface":"'Titillium Web', sans-serif","h1":{"font-family":"inherit","font-size":"6rem","font-weight":"300","font-style":"normal","line-height":"7rem","letter-spacing":"-0.09375rem","text-transform":"none","margin-top":"1.75rem","margin-bottom":"3.5rem"},"h2":{"font-family":"inherit","font-size":"3.75rem","font-weight":"300","font-style":"normal","line-height":"4.4375rem","letter-spacing":"-0.03125rem","text-transform":"none","margin-top":"1.75rem","margin-bottom":"1.75rem"},"h3":{"font-family":"inherit","font-size":"3rem","font-weight":"400","font-style":"normal","line-height":"3.5625rem","letter-spacing":"0","text-transform":"none","margin-top":"1.75rem","margin-bottom":"0"},"h4":{"font-family":"inherit","font-size":"2.125rem","font-weight":"400","font-style":"normal","line-height":"2.5rem","letter-spacing":"0.015625rem","text-transform":"none","margin-top":"1.75rem","margin-bottom":"0"},"h5":{"font-family":"inherit","font-size":"1.5rem","font-weight":"400","font-style":"normal","line-height":"1.75rem","letter-spacing":"0","text-transform":"none","margin-top":"1.75rem","margin-bottom":"0"},"h6":{"font-family":"inherit","font-size":"1.25rem","font-weight":"600","font-style":"normal","line-height":"1.5rem","letter-spacing":"0.009375rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"subtitle-1":{"font-family":"inherit","font-size":"1rem","font-weight":"400","font-style":"normal","line-height":"1.5rem","letter-spacing":"0.009375rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"subtitle-2":{"font-family":"inherit","font-size":"0.875rem","font-weight":"600","font-style":"normal","line-height":"1.5rem","letter-spacing":"0.00625rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"body-1":{"font-family":"inherit","font-size":"1rem","font-weight":"400","font-style":"normal","line-height":"1.75rem","letter-spacing":"0.03125rem","text-transform":"none","margin-top":"1.75rem","margin-bottom":"1rem"},"body-2":{"font-family":"inherit","font-size":"0.875rem","font-weight":"400","font-style":"normal","line-height":"1.25rem","letter-spacing":"0.015625rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"button":{"font-family":"inherit","font-size":"0.875rem","font-weight":"600","font-style":"normal","line-height":"1rem","letter-spacing":"0.046875rem","text-transform":"uppercase","margin-top":"0","margin-bottom":"0"},"caption":{"font-family":"inherit","font-size":"0.75rem","font-weight":"400","font-style":"normal","line-height":"1rem","letter-spacing":"0.025rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"overline":{"font-family":"inherit","font-size":"0.625rem","font-weight":"400","font-style":"normal","line-height":"1rem","letter-spacing":"0.09375rem","text-transform":"uppercase","margin-top":"0","margin-bottom":"0"}},"fluent":{"typeface":"'Open Sans', Helvetica, Arial, sans-serif","h1":{"font-family":"inherit","font-size":"4.25rem","font-weight":"400","font-style":"normal","line-height":"4.75rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h2":{"font-family":"inherit","font-size":"2.625rem","font-weight":"400","font-style":"normal","line-height":"3.25rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h3":{"font-family":"inherit","font-size":"2rem","font-weight":"400","font-style":"normal","line-height":"2.5rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h4":{"font-family":"inherit","font-size":"1.75rem","font-weight":"400","font-style":"normal","line-height":"2.25rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h5":{"font-family":"inherit","font-size":"1.5rem","font-weight":"400","font-style":"normal","line-height":"2rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h6":{"font-family":"inherit","font-size":"1.25rem","font-weight":"400","font-style":"normal","line-height":"1.75rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"subtitle-1":{"font-family":"inherit","font-size":"1.125rem","font-weight":"400","font-style":"normal","line-height":"1.5rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"subtitle-2":{"font-family":"inherit","font-size":"0.875rem","font-weight":"700","font-style":"normal","line-height":"1.25rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"body-1":{"font-family":"inherit","font-size":"1rem","font-weight":"400","font-style":"normal","line-height":"1.375rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"body-2":{"font-family":"inherit","font-size":"0.875rem","font-weight":"400","font-style":"normal","line-height":"1.25rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"button":{"font-family":"inherit","font-size":"0.875rem","font-weight":"600","font-style":"normal","line-height":"0.875rem","letter-spacing":"normal","text-transform":"capitalize","margin-top":"0","margin-bottom":"0"},"caption":{"font-family":"inherit","font-size":"0.75rem","font-weight":"400","font-style":"normal","line-height":"1rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"overline":{"font-family":"inherit","font-size":"0.625rem","font-weight":"400","font-style":"normal","line-height":"0.875rem","letter-spacing":"normal","text-transform":"uppercase","margin-top":"0","margin-bottom":"0"}},"indigo":{"typeface":"'Nunito Sans', sans-serif","h1":{"font-family":"inherit","font-size":"2.25rem","font-weight":"300","font-style":"normal","line-height":"2.625rem","letter-spacing":"0","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h2":{"font-family":"inherit","font-size":"1.75rem","font-weight":"400","font-style":"normal","line-height":"2.25rem","letter-spacing":"0","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h3":{"font-family":"inherit","font-size":"1.5rem","font-weight":"400","font-style":"normal","line-height":"2rem","letter-spacing":"0","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h4":{"font-family":"inherit","font-size":"1.25rem","font-weight":"600","font-style":"normal","line-height":"1.625rem","letter-spacing":"0","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h5":{"font-family":"inherit","font-size":"1rem","font-weight":"600","font-style":"normal","line-height":"1.375rem","letter-spacing":"0","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h6":{"font-family":"inherit","font-size":"0.875rem","font-weight":"600","font-style":"normal","line-height":"1.25rem","letter-spacing":"0","text-transform":"none","margin-top":"0","margin-bottom":"0"},"subtitle-1":{"font-family":"inherit","font-size":"0.8125rem","font-weight":"600","font-style":"normal","line-height":"1.125rem","letter-spacing":"0","text-transform":"none","margin-top":"0","margin-bottom":"0"},"subtitle-2":{"font-family":"inherit","font-size":"0.75rem","font-weight":"600","font-style":"normal","line-height":"1rem","letter-spacing":"0","text-transform":"none","margin-top":"0","margin-bottom":"0"},"body-1":{"font-family":"inherit","font-size":"0.8125rem","font-weight":"400","font-style":"normal","line-height":"1.125rem","letter-spacing":"0","text-transform":"none","margin-top":"0","margin-bottom":"0"},"body-2":{"font-family":"inherit","font-size":"0.75rem","font-weight":"400","font-style":"normal","line-height":"1rem","letter-spacing":"0","text-transform":"none","margin-top":"0","margin-bottom":"0"},"button":{"font-family":"inherit","font-size":"0.6875rem","font-weight":"700","font-style":"normal","line-height":"0.9375rem","letter-spacing":"0","text-transform":"uppercase","margin-top":"0","margin-bottom":"0"},"caption":{"font-family":"inherit","font-size":"0.6875rem","font-weight":"400","font-style":"normal","line-height":"0.9375rem","letter-spacing":"0","text-transform":"normal","margin-top":"0","margin-bottom":"0"},"overline":{"font-family":"inherit","font-size":"0.625rem","font-weight":"700","font-style":"normal","line-height":"0.875rem","letter-spacing":"0","text-transform":"uppercase","margin-top":"0","margin-bottom":"0"}}}
+{"bootstrap":{"typeface":"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'","h1":{"font-family":"inherit","font-size":"2.5rem","font-weight":"500","font-style":"normal","line-height":"3rem","letter-spacing":"-0.09375rem","text-transform":"none","margin-top":"0","margin-bottom":"0.5rem"},"h2":{"font-family":"inherit","font-size":"2rem","font-weight":"500","font-style":"normal","line-height":"2.4rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0.5rem"},"h3":{"font-family":"inherit","font-size":"1.75rem","font-weight":"500","font-style":"normal","line-height":"2.1rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0.5rem"},"h4":{"font-family":"inherit","font-size":"1.5rem","font-weight":"500","font-style":"normal","line-height":"1.8rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0.5rem"},"h5":{"font-family":"inherit","font-size":"1.25rem","font-weight":"500","font-style":"normal","line-height":"1.5rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0.5rem"},"h6":{"font-family":"inherit","font-size":"1rem","font-weight":"500","font-style":"normal","line-height":"1.2rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0.5rem"},"subtitle-1":{"font-family":"inherit","font-size":"1rem","font-weight":"700","font-style":"normal","line-height":"1.5rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"subtitle-2":{"font-family":"inherit","font-size":"0.875rem","font-weight":"700","font-style":"normal","line-height":"1.5rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"body-1":{"font-family":"inherit","font-size":"1rem","font-weight":"400","font-style":"normal","line-height":"1.5rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"body-2":{"font-family":"inherit","font-size":"0.875rem","font-weight":"400","font-style":"normal","line-height":"1.3125rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"button":{"font-family":"inherit","font-size":"1rem","font-weight":"400","font-style":"normal","line-height":"1.5rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"caption":{"font-family":"inherit","font-size":"0.75rem","font-weight":"400","font-style":"normal","line-height":"1rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"overline":{"font-family":"inherit","font-size":"0.625rem","font-weight":"400","font-style":"normal","line-height":"1rem","letter-spacing":"0.09375rem","text-transform":"uppercase","margin-top":"0","margin-bottom":"0"},"calendar-labels":{"font-family":"inherit","font-size":"0.8125rem","font-weight":"400","font-style":"normal","line-height":"normal","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"}},"material":{"typeface":"'Titillium Web', sans-serif","h1":{"font-family":"inherit","font-size":"6rem","font-weight":"300","font-style":"normal","line-height":"7rem","letter-spacing":"-0.09375rem","text-transform":"none","margin-top":"1.75rem","margin-bottom":"3.5rem"},"h2":{"font-family":"inherit","font-size":"3.75rem","font-weight":"300","font-style":"normal","line-height":"4.4375rem","letter-spacing":"-0.03125rem","text-transform":"none","margin-top":"1.75rem","margin-bottom":"1.75rem"},"h3":{"font-family":"inherit","font-size":"3rem","font-weight":"400","font-style":"normal","line-height":"3.5625rem","letter-spacing":"0","text-transform":"none","margin-top":"1.75rem","margin-bottom":"0"},"h4":{"font-family":"inherit","font-size":"2.125rem","font-weight":"400","font-style":"normal","line-height":"2.5rem","letter-spacing":"0.015625rem","text-transform":"none","margin-top":"1.75rem","margin-bottom":"0"},"h5":{"font-family":"inherit","font-size":"1.5rem","font-weight":"400","font-style":"normal","line-height":"1.75rem","letter-spacing":"0","text-transform":"none","margin-top":"1.75rem","margin-bottom":"0"},"h6":{"font-family":"inherit","font-size":"1.25rem","font-weight":"600","font-style":"normal","line-height":"1.5rem","letter-spacing":"0.009375rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"subtitle-1":{"font-family":"inherit","font-size":"1rem","font-weight":"400","font-style":"normal","line-height":"1.5rem","letter-spacing":"0.009375rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"subtitle-2":{"font-family":"inherit","font-size":"0.875rem","font-weight":"600","font-style":"normal","line-height":"1.5rem","letter-spacing":"0.00625rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"body-1":{"font-family":"inherit","font-size":"1rem","font-weight":"400","font-style":"normal","line-height":"1.75rem","letter-spacing":"0.03125rem","text-transform":"none","margin-top":"1.75rem","margin-bottom":"1rem"},"body-2":{"font-family":"inherit","font-size":"0.875rem","font-weight":"400","font-style":"normal","line-height":"1.25rem","letter-spacing":"0.015625rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"button":{"font-family":"inherit","font-size":"0.875rem","font-weight":"600","font-style":"normal","line-height":"1rem","letter-spacing":"0.046875rem","text-transform":"uppercase","margin-top":"0","margin-bottom":"0"},"caption":{"font-family":"inherit","font-size":"0.75rem","font-weight":"400","font-style":"normal","line-height":"1rem","letter-spacing":"0.025rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"overline":{"font-family":"inherit","font-size":"0.625rem","font-weight":"400","font-style":"normal","line-height":"1rem","letter-spacing":"0.09375rem","text-transform":"uppercase","margin-top":"0","margin-bottom":"0"}},"fluent":{"typeface":"'Open Sans', Helvetica, Arial, sans-serif","h1":{"font-family":"inherit","font-size":"4.25rem","font-weight":"400","font-style":"normal","line-height":"4.75rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h2":{"font-family":"inherit","font-size":"2.625rem","font-weight":"400","font-style":"normal","line-height":"3.25rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h3":{"font-family":"inherit","font-size":"2rem","font-weight":"400","font-style":"normal","line-height":"2.5rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h4":{"font-family":"inherit","font-size":"1.75rem","font-weight":"400","font-style":"normal","line-height":"2.25rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h5":{"font-family":"inherit","font-size":"1.5rem","font-weight":"400","font-style":"normal","line-height":"2rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h6":{"font-family":"inherit","font-size":"1.25rem","font-weight":"400","font-style":"normal","line-height":"1.75rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"subtitle-1":{"font-family":"inherit","font-size":"1.125rem","font-weight":"400","font-style":"normal","line-height":"1.5rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"subtitle-2":{"font-family":"inherit","font-size":"0.875rem","font-weight":"700","font-style":"normal","line-height":"1.25rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"body-1":{"font-family":"inherit","font-size":"1rem","font-weight":"400","font-style":"normal","line-height":"1.375rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"body-2":{"font-family":"inherit","font-size":"0.875rem","font-weight":"400","font-style":"normal","line-height":"1.25rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"button":{"font-family":"inherit","font-size":"0.875rem","font-weight":"600","font-style":"normal","line-height":"0.875rem","letter-spacing":"normal","text-transform":"capitalize","margin-top":"0","margin-bottom":"0"},"caption":{"font-family":"inherit","font-size":"0.75rem","font-weight":"400","font-style":"normal","line-height":"1rem","letter-spacing":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"},"overline":{"font-family":"inherit","font-size":"0.625rem","font-weight":"400","font-style":"normal","line-height":"0.875rem","letter-spacing":"normal","text-transform":"uppercase","margin-top":"0","margin-bottom":"0"}},"indigo":{"typeface":"'Nunito Sans', sans-serif","h1":{"font-family":"inherit","font-size":"2.25rem","font-weight":"300","font-style":"normal","line-height":"2.625rem","letter-spacing":"0","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h2":{"font-family":"inherit","font-size":"1.75rem","font-weight":"400","font-style":"normal","line-height":"2.25rem","letter-spacing":"0","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h3":{"font-family":"inherit","font-size":"1.5rem","font-weight":"400","font-style":"normal","line-height":"2rem","letter-spacing":"0","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h4":{"font-family":"inherit","font-size":"1.25rem","font-weight":"600","font-style":"normal","line-height":"1.625rem","letter-spacing":"0","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h5":{"font-family":"inherit","font-size":"1rem","font-weight":"600","font-style":"normal","line-height":"1.375rem","letter-spacing":"0","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h6":{"font-family":"inherit","font-size":"0.875rem","font-weight":"600","font-style":"normal","line-height":"1.25rem","letter-spacing":"0","text-transform":"none","margin-top":"0","margin-bottom":"0"},"subtitle-1":{"font-family":"inherit","font-size":"0.8125rem","font-weight":"600","font-style":"normal","line-height":"1.125rem","letter-spacing":"0","text-transform":"none","margin-top":"0","margin-bottom":"0"},"subtitle-2":{"font-family":"inherit","font-size":"0.75rem","font-weight":"600","font-style":"normal","line-height":"1rem","letter-spacing":"0","text-transform":"none","margin-top":"0","margin-bottom":"0"},"body-1":{"font-family":"inherit","font-size":"0.8125rem","font-weight":"400","font-style":"normal","line-height":"1.125rem","letter-spacing":"0","text-transform":"none","margin-top":"0","margin-bottom":"0"},"body-2":{"font-family":"inherit","font-size":"0.75rem","font-weight":"400","font-style":"normal","line-height":"1rem","letter-spacing":"0","text-transform":"none","margin-top":"0","margin-bottom":"0"},"button":{"font-family":"inherit","font-size":"0.6875rem","font-weight":"700","font-style":"normal","line-height":"0.9375rem","letter-spacing":"0","text-transform":"uppercase","margin-top":"0","margin-bottom":"0"},"caption":{"font-family":"inherit","font-size":"0.6875rem","font-weight":"400","font-style":"normal","line-height":"0.9375rem","letter-spacing":"0","text-transform":"normal","margin-top":"0","margin-bottom":"0"},"overline":{"font-family":"inherit","font-size":"0.625rem","font-weight":"700","font-style":"normal","line-height":"0.875rem","letter-spacing":"0","text-transform":"none","margin-top":"0","margin-bottom":"0"}}}

package/package.json

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

@@ -1,4 +1,5 @@
 @use '../../functions' as *;
+@use '../../types';
 
 ////
 /// @package theming
@@ -6,6 +7,9 @@
 /// @access public
 ////
 
+$color-shades: types.$IColorShades;
+$surface-shades: shades('surface', #1e1f24, $color-shades);
+
 /// Generates the dark indigo palette.
 /// @type Map
 /// @name dark-indigo-palette
@@ -220,10 +224,7 @@ $palette: (
         'A700': to-hsl(#9f000f),
         'A700-contrast': white,
     ),
-    'surface': (
-        500: to-hsl(#1e1f24),
-        '500-contrast': white,
-    ),
+    'surface': $surface-shades,
     _meta: (
         variant: 'indigo',
     ),

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

@@ -1,4 +1,5 @@
 @use '../../functions' as *;
+@use '../../types';
 
 ////
 /// @package theming
@@ -6,6 +7,9 @@
 /// @access public
 ////
 
+$color-shades: types.$IColorShades;
+$surface-shades: shades('surface', #f8f8fa, $color-shades);
+
 /// Generates the light indigo palette.
 /// @type Map
 /// @name light-indigo-palette
@@ -220,10 +224,7 @@ $palette: (
         'A700': to-hsl(#9f000f),
         'A700-contrast': white,
     ),
-    'surface': (
-        500: to-hsl(#f8f8fa),
-        '500-contrast': black,
-    ),
+    'surface': $surface-shades,
     _meta: (
         variant: 'indigo',
     ),

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

@@ -511,8 +511,8 @@ $dark-bootstrap-calendar: extend(
 /// @prop {Map} date-special-hover-background [color: ('primary', 400, .7)] - The background color of a special date.
 /// @prop {Map} date-special-focus-foreground [contrast-color: ('primary', 600)] - The foreground color of a special date.
 /// @prop {Map} date-special-focus-background [color: ('primary', 400, .7)] - The background color of a special date.
-/// @prop {Map} date-special-range-hover-background [color: ('primary', 600, .4)] - The :hover background color of a special date in range selection.
-/// @prop {Map} date-special-range-focus-background [color: ('primary', 600, .4)] - The :focus background color of a special date in range selection.
+/// @prop {Map} date-special-range-hover-background [color: ('primary', 600, .7)] - The :hover background color of a special date in range selection.
+/// @prop {Map} date-special-range-focus-background [color: ('primary', 600, .7)] - The :focus background color of a special date in range selection.
 /// @prop {Map} navigation-hover-color [color: ('primary', 300)] - The :hover color of the icon button responsible for month navigation.
 /// @prop {Map} navigation-focus-color [color: ('primary', 300)] - The :focus color of the icon button responsible for month navigation.
 /// @prop {Мап} actions-divider-color [color: ('gray', 100)] - The border color used for the date-picker actions divider.
@@ -708,14 +708,14 @@ $dark-indigo-calendar: extend(
             color: (
                 'primary',
                 600,
-                0.4,
+                0.7,
             ),
         ),
         date-special-range-focus-background: (
             color: (
                 'primary',
                 600,
-                0.4,
+                0.7,
             ),
         ),
         navigation-hover-color: (

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

@@ -22,6 +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-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.
@@ -60,6 +61,12 @@ $dark-fluent-slider: extend(
                 400,
             ),
         ),
+        thumb-border-hover-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
         thumb-focus-color: (
             color: (
                 'primary',
@@ -114,23 +121,91 @@ $dark-bootstrap-slider: extend(
 
 /// Generates a dark indigo slider schema.
 /// @type {Map}
-/// @prop {Map} base-track-color [color: ('gray', 200)] - The base background color of the track.
-/// @prop {Map} base-track-hover-color [color: ('gray', 400)] - The base background color of the track on hover.
+/// @prop {Map} track-step-color [contrast-color: ('gray', 50, 0.3)] - The color of the track steps.
+/// @prop {Map} base-track-color [contrast-color: ('gray', 50, 0.3)] - The base background color of the track.
+/// @prop {Map} base-track-hover-color [contrast-color: ('gray', 50, 0.4)] - The base background color of the track on hover.
+/// @prop {Map} track-color [color: ('primary', 400)] - The color of the track.
+/// @prop {Map} track-hover-color [color: ('primary', 300)] - The color of the track on hover.
+/// @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} 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.
 /// @requires $indigo-slider
 $dark-indigo-slider: extend(
     $indigo-slider,
     (
+        track-step-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.3,
+            ),
+        ),
         base-track-color: (
-            color: (
+            contrast-color: (
                 'gray',
-                200,
+                50,
+                0.3,
             ),
         ),
         base-track-hover-color: (
-            color: (
+            contrast-color: (
                 'gray',
+                50,
+                0.4,
+            ),
+        ),
+        track-color: (
+            color: (
+                'primary',
+                400,
+            ),
+        ),
+        track-hover-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+        thumb-color: (
+            color: 'surface',
+        ),
+        thumb-border-color: (
+            color: (
+                'primary',
                 400,
             ),
         ),
+        thumb-border-hover-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+        disabled-thumb-color: (
+            color: 'surface',
+        ),
+        thumb-disabled-border-color: (
+            color: (
+                'primary',
+                800,
+            ),
+        ),
+        disabled-base-track-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.15,
+            ),
+        ),
+        disabled-fill-track-color: (
+            color: (
+                'primary',
+                800,
+            ),
+        ),
     )
 );

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

@@ -51,18 +51,39 @@ $dark-bootstrap-splitter: $bootstrap-splitter;
 
 /// Generates a dark indigo splitter schema.
 /// @type {Map}
-/// @prop {Map} handle-color [color: 'surface'] - The color for the bar drag handle.
-/// @prop {Map} expander-color [color: 'surface'] - The color for the bar drag handle.
+/// @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.
 /// @requires $indigo-splitter
 $dark-indigo-splitter: extend(
     $indigo-splitter,
     (
+        bar-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+
+        focus-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
         handle-color: (
-            color: 'surface',
+            color: (
+                'gray',
+                600,
+            ),
         ),
 
         expander-color: (
-            color: 'surface',
+            color: (
+                'gray',
+                600,
+            ),
         ),
     )
 );

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

@@ -1,5 +1,6 @@
 @use '../../../../utils/map' as *;
 @use '../light/time-picker' as *;
+@use '../elevation/time-picker' as *;
 
 ////
 /// @package theming
@@ -9,13 +10,35 @@
 
 /// Generates a dark material time-picker schema.
 /// @type {Map}
+/// @prop {Map} divider-color [color: ('gray', 100)] - The divider color of the time picker.
 /// @requires $material-time-picker
-$dark-material-time-picker: $material-time-picker;
+$dark-material-time-picker: extend(
+    $material-time-picker,
+    (
+        divider-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+    )
+);
 
 /// Generates a dark fluent time-picker schema.
 /// @type {Map}
+/// @prop {Map} divider-color [color: ('gray', 100)] - The divider color of the time picker.
 /// @requires $fluent-time-picker
-$dark-fluent-time-picker: $fluent-time-picker;
+$dark-fluent-time-picker: extend(
+    $fluent-time-picker,
+    (
+        divider-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+    )
+);
 
 /// Generates a dark bootstrap time-picker schema.
 /// @type {Map}
@@ -24,30 +47,56 @@ $dark-bootstrap-time-picker: $bootstrap-time-picker;
 
 /// Generates a dark indigo time-picker schema.
 /// @type {Map}
-/// @prop {Map} text-color [contrast-color: ('surface')] - The text color of an open time picker.
-/// @prop {Map} selected-text-color [color: ('primary', 300)] -  The text color of a selected item in time picker.
-/// @prop {Map} hover-text-color [color: ('primary', 300)] - The hover 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.
 /// @requires $indigo-time-picker
 $dark-indigo-time-picker: extend(
     $indigo-time-picker,
+    $dark-indigo-elevation-time-picker,
     (
-        text-color: (
-            contrast-color: (
-                'surface',
+        background-color: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        header-background: (
+            color: (
+                'gray',
+                50,
             ),
         ),
 
         hover-text-color: (
             color: (
                 'primary',
-                300,
+                200,
             ),
         ),
 
         selected-text-color: (
             color: (
                 'primary',
-                300,
+                200,
+            ),
+        ),
+
+        border-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        divider-color: (
+            color: (
+                'gray',
+                100,
             ),
         ),
     )

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

@@ -111,17 +111,85 @@ $dark-bootstrap-tree: extend(
 
 /// Generates a dark indigo tree schema.
 /// @type {Map}
-/// @prop {Map} hover-color [color: ('primary', 200, .5)] - The background color used for the tree node on hover.
+/// @prop {Map} background-active [color: ('primary', 400, 0.3)] - The background color used for the active tree node.
+/// @prop {Map} background-active-selected [color: ('primary', 400, 0.3)] - The background color used for the active selected tree node.
+/// @prop {Map} foreground [contrast-color: ('gray', 50, 0.8)] - The color used for the tree node content.
+/// @prop {Map} foreground-active [contrast-color: ('gray', 50)] - The color used for the content in active state of the tree node.
+/// @prop {Map} foreground-selected [contrast-color: ('gray', 50)] - The color used for the content of the selected tree node.
+/// @prop {Map} foreground-active-selected [contrast-color: ('gray', 50)] - The color used for the content of the active selected tree node.
+/// @prop {Map} foreground-disabled [contrast-color: ('gray', 50, 0.2)] - The color used for the content of the disabled tree node.
+/// @prop {Map} icon-color [contrast-color: ('gray', 50, 0.8)] - The color used for the tree node icon.
+/// @prop {Map} hover-color [contrast-color: ('gray', 50, .1)] - The background color used for the tree node on hover.
+/// @prop {Map} hover-selected-color [color: ('primary', 400, 0.5)] - The background color used for the selected tree node on hover.
 /// @requires $indigo-tree
 /// @requires $base-dark-tree
 $dark-indigo-tree: extend(
     $indigo-tree,
-    $base-dark-tree,
     (
+        foreground: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
+        foreground-selected: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+        background-active: (
+            color: (
+                'primary',
+                400,
+                0.3,
+            ),
+        ),
+        foreground-active: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+        background-active-selected: (
+            color: (
+                'primary',
+                400,
+                0.3,
+            ),
+        ),
+        foreground-active-selected: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+        foreground-disabled: (
+            contrast-color: (
+                'gray',
+                50,
+                0.2,
+            ),
+        ),
+        icon-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
         hover-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.1,
+            ),
+        ),
+        hover-selected-color: (
             color: (
                 'primary',
-                200,
+                400,
                 0.5,
             ),
         ),

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

@@ -11,3 +11,11 @@ $default-elevation-time-picker: (
     modal-elevation: 24,
     dropdown-elevation: 8,
 );
+$indigo-elevation-time-picker: (
+    modal-elevation: 5,
+    dropdown-elevation: 3,
+);
+$dark-indigo-elevation-time-picker: (
+    modal-elevation: 7,
+    dropdown-elevation: 2,
+);

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

@@ -327,7 +327,7 @@ $light-calendar: (
 /// @prop {Map} year-selected-current-hover-background [color: ('secondary', 700)] - The :hover background color of the current/selected year.
 /// @prop {Map} month-hover-foreground [color: ('gray', 900)] -  The :hover foreground color of the month inside the months view.
 /// @prop {Map} month-hover-background [color: ('gray', 100)] - The :hover background color of the month inside the months view.
-/// @prop {Map} month-current-foreground [contrast-color: ('gray', 200)] - The foreground color of the current month in month view.
+/// @prop {Map} month-current-foreground [color: ('gray', 900)] - The foreground color of the current month in month view.
 /// @prop {Map} month-current-background [color: ('surface')] - The background color of the current month in month view.
 /// @prop {Map} month-current-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current month in month view.
 /// @prop {Map} month-current-hover-background [color: ('gray', 100)] - The :hover background color of the current month in month view.
@@ -494,9 +494,9 @@ $material-calendar: extend(
             ),
         ),
         month-current-foreground: (
-            contrast-color: (
+            color: (
                 'gray',
-                200,
+                900,
             ),
         ),
         month-current-background: (