From 0e7fc6de93d6126e08791d1f6d48f2b8ee80fbdc Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 22 Nov 2018 13:54:19 +0200 Subject: [PATCH] feat(themes): add dark schemas and mixins (#3106) --- CHANGELOG.md | 3 + extras/docs/themes/sassdoc/index.js | 348 +++++++++--------- extras/docs/themes/sassdoc/views/index.hbs | 2 + .../sassdoc/views/partials/properties.hbs | 41 +++ .../themes/sassdoc/views/partials/see.hbs | 19 + .../update-6_2_1/changes/theme-props.json | 189 ++++++++-- .../styles/base/utilities/_functions.scss | 98 ++++- .../core/styles/base/utilities/_mixins.scss | 8 +- .../components/avatar/_avatar-theme.scss | 19 +- .../styles/components/badge/_badge-theme.scss | 17 +- .../components/banner/_banner-theme.scss | 19 +- .../bottom-nav/_bottom-nav-theme.scss | 21 +- .../button-group/_button-group-theme.scss | 29 +- .../components/button/_button-theme.scss | 64 ++-- .../components/calendar/_calendar-theme.scss | 52 +-- .../styles/components/card/_card-theme.scss | 28 +- .../components/carousel/_carousel-theme.scss | 23 +- .../components/checkbox/_checkbox-theme.scss | 47 +-- .../styles/components/chip/_chip-theme.scss | 50 ++- .../column-hiding/_column-hiding-theme.scss | 8 +- .../styles/components/combo/_combo-theme.scss | 19 +- .../date-picker/_date-picker-theme.scss | 9 +- .../components/dialog/_dialog-theme.scss | 15 +- .../drop-down/_drop-down-theme.scss | 71 ++-- .../_expansion-panel-theme.scss | 28 +- .../grid-filtering/_grid-filtering-theme.scss | 34 +- .../grid-paginator/_grid-paginator-theme.scss | 11 +- .../grid-summary/_grid-summary-theme.scss | 35 +- .../grid-toolbar/_grid-toolbar-theme.scss | 41 ++- .../styles/components/grid/_grid-theme.scss | 108 +++--- .../styles/components/icon/_icon-theme.scss | 18 +- .../components/input/_input-group-theme.scss | 149 ++------ .../styles/components/list/_list-theme.scss | 25 +- .../components/navbar/_navbar-theme.scss | 18 +- .../navdrawer/_navdrawer-theme.scss | 33 +- .../components/overlay/_overlay-theme.scss | 12 +- .../components/progress/_progress-theme.scss | 42 ++- .../styles/components/radio/_radio-theme.scss | 36 +- .../components/ripple/_ripple-theme.scss | 12 +- .../components/slider/_slider-theme.scss | 58 ++- .../components/snackbar/_snackbar-theme.scss | 19 +- .../components/switch/_switch-theme.scss | 54 +-- .../styles/components/tabs/_tabs-theme.scss | 40 +- .../time-picker/_time-picker-theme.scss | 35 +- .../styles/components/toast/_toast-theme.scss | 17 +- .../components/tooltip/_tooltip-theme.scss | 45 +-- .../src/lib/core/styles/themes/_index.scss | 32 +- .../src/lib/core/styles/themes/_palettes.scss | 6 +- .../themes/presets/igniteui-dark-green.scss | 4 +- .../schemas/dark-green/_components-theme.scss | 235 ------------ .../themes/schemas/dark-green/_index.scss | 34 -- .../themes/schemas/dark-green/_vars.scss | 19 - .../styles/themes/schemas/dark/_avatar.scss | 13 + .../styles/themes/schemas/dark/_badge.scss | 14 + .../styles/themes/schemas/dark/_banner.scss | 17 + .../themes/schemas/dark/_bottom-nav.scss | 17 + .../themes/schemas/dark/_button-group.scss | 17 + .../styles/themes/schemas/dark/_button.scss | 36 ++ .../styles/themes/schemas/dark/_calendar.scss | 16 + .../styles/themes/schemas/dark/_card.scss | 16 + .../styles/themes/schemas/dark/_carousel.scss | 18 + .../styles/themes/schemas/dark/_checkbox.scss | 16 + .../styles/themes/schemas/dark/_chip.scss | 19 + .../themes/schemas/dark/_column-hiding.scss | 13 + .../styles/themes/schemas/dark/_combo.scss | 17 + .../themes/schemas/dark/_date-picker.scss | 14 + .../styles/themes/schemas/dark/_dialog.scss | 16 + .../themes/schemas/dark/_drop-down.scss | 17 + .../themes/schemas/dark/_expansion-panel.scss | 18 + .../themes/schemas/dark/_grid-filtering.scss | 13 + .../themes/schemas/dark/_grid-pagination.scss | 16 + .../themes/schemas/dark/_grid-summary.scss | 15 + .../themes/schemas/dark/_grid-toolbar.scss | 16 + .../styles/themes/schemas/dark/_grid.scss | 75 ++++ .../styles/themes/schemas/dark/_icon.scss | 16 + .../styles/themes/schemas/dark/_index.scss | 122 ++++++ .../themes/schemas/dark/_input-group.scss | 20 + .../styles/themes/schemas/dark/_list.scss | 23 ++ .../styles/themes/schemas/dark/_navbar.scss | 15 + .../themes/schemas/dark/_navdrawer.scss | 18 + .../styles/themes/schemas/dark/_overlay.scss | 15 + .../styles/themes/schemas/dark/_progress.scss | 23 ++ .../styles/themes/schemas/dark/_radio.scss | 15 + .../styles/themes/schemas/dark/_ripple.scss | 16 + .../styles/themes/schemas/dark/_slider.scss | 15 + .../styles/themes/schemas/dark/_snackbar.scss | 15 + .../styles/themes/schemas/dark/_switch.scss | 21 ++ .../styles/themes/schemas/dark/_tabs.scss | 20 + .../themes/schemas/dark/_time-picker.scss | 19 + .../styles/themes/schemas/dark/_toast.scss | 15 + .../styles/themes/schemas/dark/_tooltip.scss | 14 + .../styles/themes/schemas/light/_avatar.scss | 16 +- .../styles/themes/schemas/light/_badge.scss | 25 +- .../styles/themes/schemas/light/_banner.scss | 16 +- .../themes/schemas/light/_bottom-nav.scss | 14 +- .../themes/schemas/light/_button-group.scss | 23 +- .../styles/themes/schemas/light/_button.scss | 38 +- .../themes/schemas/light/_calendar.scss | 32 +- .../styles/themes/schemas/light/_card.scss | 15 +- .../themes/schemas/light/_carousel.scss | 17 +- .../themes/schemas/light/_checkbox.scss | 15 +- .../styles/themes/schemas/light/_chip.scss | 32 +- .../themes/schemas/light/_column-hiding.scss | 12 +- .../styles/themes/schemas/light/_combo.scss | 13 +- .../themes/schemas/light/_date-picker.scss | 13 +- .../styles/themes/schemas/light/_dialog.scss | 13 +- .../themes/schemas/light/_drop-down.scss | 26 +- .../schemas/light/_expansion-panel.scss | 18 +- .../themes/schemas/light/_grid-filtering.scss | 22 +- .../schemas/light/_grid-pagination.scss | 16 +- .../themes/schemas/light/_grid-summary.scss | 37 +- .../themes/schemas/light/_grid-toolbar.scss | 36 +- .../styles/themes/schemas/light/_grid.scss | 71 +++- .../styles/themes/schemas/light/_icon.scss | 17 +- .../styles/themes/schemas/light/_index.scss | 48 +++ .../themes/schemas/light/_input-group.scss | 71 +++- .../styles/themes/schemas/light/_list.scss | 21 +- .../styles/themes/schemas/light/_navbar.scss | 34 +- .../themes/schemas/light/_navdrawer.scss | 41 ++- .../styles/themes/schemas/light/_overlay.scss | 13 +- .../themes/schemas/light/_progress.scss | 33 +- .../styles/themes/schemas/light/_radio.scss | 16 + .../styles/themes/schemas/light/_ripple.scss | 14 +- .../styles/themes/schemas/light/_slider.scss | 32 +- .../themes/schemas/light/_snackbar.scss | 17 +- .../styles/themes/schemas/light/_switch.scss | 49 ++- .../styles/themes/schemas/light/_tabs.scss | 44 ++- .../themes/schemas/light/_time-picker.scss | 24 +- .../styles/themes/schemas/light/_toast.scss | 16 +- .../styles/themes/schemas/light/_tooltip.scss | 17 +- src/app/mask/mask.sample.css | 22 +- src/index.html | 2 +- src/styles/igniteui-theme.scss | 13 +- 133 files changed, 2948 insertions(+), 1346 deletions(-) create mode 100644 extras/docs/themes/sassdoc/views/partials/properties.hbs create mode 100644 extras/docs/themes/sassdoc/views/partials/see.hbs delete mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark-green/_components-theme.scss delete mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark-green/_index.scss delete mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark-green/_vars.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_avatar.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_badge.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_banner.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_bottom-nav.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_button-group.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_button.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_calendar.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_card.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_carousel.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_checkbox.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_chip.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_column-hiding.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_combo.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_date-picker.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_dialog.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_drop-down.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_expansion-panel.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-filtering.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-pagination.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-summary.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-toolbar.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_icon.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_input-group.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_list.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_navbar.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_navdrawer.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_overlay.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_progress.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_radio.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_ripple.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_slider.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_snackbar.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_switch.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_tabs.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_time-picker.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_toast.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_tooltip.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index 6962d62af56..34c37b42652 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,9 @@ All notable changes for each version of this project will be documented in this ## 6.2.1 - `igx-drop-down`: - Added a new property `maxHeight`, defining the max height of the drop down. +- Themes + - Introducing schemas for easier bootstrapping of component themes. + - **Breaking change** removed $variant from `igx-checkbox-theme`, `igx-ripple-theme`, `igx-switch-theme`, `igx-input-group-theme`, `igx-slider-theme`, and `igx-tooltip-theme`. Use the `$schema` prop, now available on all component themes to change the look for a specific theme. See the [Theming](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/schemas.html) documentation to learn more. - `igx-combo`: - Added a new input property - `displayDensity`. It allows configuring the `displayDensity` of the combo's `value` and `search` inputs. diff --git a/extras/docs/themes/sassdoc/index.js b/extras/docs/themes/sassdoc/index.js index 7e87e5e4000..9325d2d9a35 100644 --- a/extras/docs/themes/sassdoc/index.js +++ b/extras/docs/themes/sassdoc/index.js @@ -27,7 +27,7 @@ const sassPlug = require('sassdoc-plugin-localization'); themeleon.use({ /** - * Builds a structure of json files which represents the retrieved comments per every sass declaration. + * Builds a structure of json files which represents the retrieved comments per every sass declaration. */ convert: (data, dir) => sassPlug.convert(data, dir), /** @@ -49,77 +49,79 @@ themeleon.use({ */ const theme = themeleon(__dirname, function (t) { /** - * If only json conversion is needed the whole process of documentation rendering has to be stopped. + * If only json conversion is needed the whole process of documentation rendering has to be stopped. */ if (t.ctx.convert) { - return t.convert(t.ctx._data, './extras/sassdoc/en'); + return t.convert(t.ctx._data, './extras/sassdoc/en'); } - /** - * Copy the assets folder from the theme's directory in the - * destination directory. - */ - t.copy('assets'); - - const options = { - partials: { - authors: 'partials/authors', - description: 'partials/description', - example: 'partials/example', - footer: 'partials/footer', - header: 'partials/header', - github: 'partials/github', - definitionHeader: 'partials/definitionHeader', - require: 'partials/require', - search: 'partials/search', - sidenav: 'partials/sidenav', - source: 'partials/source', - usedBy: 'partials/usedby', - parameters: 'partials/parameters', - example: 'partials/example', - infraHead: 'partials/infragistics/header', - infraFoot: 'partials/infragistics/footer' - }, - helpers: { - debug: function (content) { - console.log("----VALUE-----"); - console.log(content); - }, - json: function (context) { - return JSON.stringify(context); - }, - github: function (file, line) { - const url = 'https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/core/styles/'; - return `${url}${file}#L${line}`; - }, - typeClass: function (context) { - switch (context) { - case "mixin": - return "--mixin"; - case "function": - return "--function"; - default: - return ""; + /** + * Copy the assets folder from the theme's directory in the + * destination directory. + */ + t.copy('assets'); + + const options = { + partials: { + authors: 'partials/authors', + description: 'partials/description', + example: 'partials/example', + footer: 'partials/footer', + header: 'partials/header', + github: 'partials/github', + definitionHeader: 'partials/definitionHeader', + require: 'partials/require', + search: 'partials/search', + see: 'partials/see', + sidenav: 'partials/sidenav', + source: 'partials/source', + usedBy: 'partials/usedby', + parameters: 'partials/parameters', + properties: 'partials/properties', + example: 'partials/example', + infraHead: 'partials/infragistics/header', + infraFoot: 'partials/infragistics/footer' + }, + helpers: { + debug: function (content) { + console.log("----VALUE-----"); + console.log(content); + }, + json: function (context) { + return JSON.stringify(context); + }, + github: function (file, line) { + const url = 'https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/core/styles/'; + return `${url}${file}#L${line}`; + }, + typeClass: function (context) { + switch (context) { + case "mixin": + return "--mixin"; + case "function": + return "--function"; + default: + return ""; + } + }, + trimType: (value) => { + return value.substring(0, 3); + } } - }, - trimType: (value) => { - return value.substring(0, 3); - } + }; + + /** + * Render `views/index.handlebars` with the theme's context (`ctx` below) + * as `index.html` in the destination directory. + */ + t.handlebars('views/index.hbs', 'index.html', options); + + /** + * Applies the translations from the json files. + */ + if (t.ctx.render) { + const jsonDir = t.ctx.jsonDir ? t.ctx.jsonDir : './extras/sassdoc/en'; + t.render(t.ctx._data, jsonDir); } - }; - - /** - * Render `views/index.handlebars` with the theme's context (`ctx` below) - * as `index.html` in the destination directory. - */ - t.handlebars('views/index.hbs', 'index.html', options); - - /** - * Applies the translations from the json files. - */ - if (t.ctx.render) { - const jsonDir = t.ctx.jsonDir ? t.ctx.jsonDir : './extras/sassdoc/en'; - t.render(t.ctx._data, jsonDir); - } }); /** * Actual theme function. It takes the destination directory `dest` @@ -130,109 +132,109 @@ const theme = themeleon(__dirname, function (t) { * configuration. */ module.exports = function (dest, ctx) { - var def = { - display: { - access: ['public', 'private'], - alias: true, - watermark: false, - }, - groups: { - 'undefined': 'General', - }, - 'shortcutIcon': 'http://sass-lang.com/favicon.ico' - }; - - // Apply default values for groups and display. - ctx.groups = extend(def.groups, ctx.groups); - ctx.display = extend(def.display, ctx.display); - - // Extend top-level context keys. - ctx = extend({}, def, ctx); - - /** - * Parse text data (like descriptions) as Markdown, and put the - * rendered HTML in `html*` variables. - * - * For example, `ctx.package.description` will be parsed as Markdown - * in `ctx.package.htmlDescription`. - * - * See . - */ - extras.markdown(ctx); - - /** - * Add a `display` property for each data item regarding of display - * configuration (hide private items and aliases for example). - * - * You'll need to add default values in your `.sassdocrc` before - * using this filter: - * - * { - * "display": { - * "access": ["public", "private"], - * "alias": false - * } - * } - * - * See . - */ - extras.display(ctx); - - /** - * Allow the user to give a name to the documentation groups. - * - * We can then have `@group slug` in the docblock, and map `slug` - * to `Some title string` in the theme configuration. - * - * **Note:** all items without a group are in the `undefined` group. - * - * See . - */ - extras.groupName(ctx); - - /** - * Use SassDoc indexer to index the data by group and type, so we - * have the following structure: - * - * { - * "group-slug": { - * "function": [...], - * "mixin": [...], - * "variable": [...] - * }, - * "another-group": { - * "function": [...], - * "mixin": [...], - * "variable": [...] - * } - * } - * - * You can then use `data.byGroupAndType` instead of `data` in your - * templates to manipulate the indexed object. - */ - ctx.idx = lunr(function () { - this.field('type'); - this.field('name'); - - ctx.data.forEach((doc) => { - this.add({ - id: `${doc.context.type}-${doc.context.name}`, - name: doc.context.name, - type: doc.context.type - }); - }, this); - }); - - ctx.data.byGroupAndType = extras.byGroupAndType(ctx.data); - - // Avoid key collision with Handlebars default `data`. - // @see https://github.com/SassDoc/generator-sassdoc-theme/issues/22 - ctx._data = ctx.data; - delete ctx.data; - - /** - * Now we have prepared the data, we can proxy to the Themeleon - * generated theme function. - */ - return theme.apply(this, arguments); -}; \ No newline at end of file + var def = { + display: { + access: ['public', 'private'], + alias: true, + watermark: false, + }, + groups: { + 'undefined': 'General', + }, + 'shortcutIcon': 'http://sass-lang.com/favicon.ico' + }; + + // Apply default values for groups and display. + ctx.groups = extend(def.groups, ctx.groups); + ctx.display = extend(def.display, ctx.display); + + // Extend top-level context keys. + ctx = extend({}, def, ctx); + + /** + * Parse text data (like descriptions) as Markdown, and put the + * rendered HTML in `html*` variables. + * + * For example, `ctx.package.description` will be parsed as Markdown + * in `ctx.package.htmlDescription`. + * + * See . + */ + extras.markdown(ctx); + + /** + * Add a `display` property for each data item regarding of display + * configuration (hide private items and aliases for example). + * + * You'll need to add default values in your `.sassdocrc` before + * using this filter: + * + * { + * "display": { + * "access": ["public", "private"], + * "alias": false + * } + * } + * + * See . + */ + extras.display(ctx); + + /** + * Allow the user to give a name to the documentation groups. + * + * We can then have `@group slug` in the docblock, and map `slug` + * to `Some title string` in the theme configuration. + * + * **Note:** all items without a group are in the `undefined` group. + * + * See . + */ + extras.groupName(ctx); + + /** + * Use SassDoc indexer to index the data by group and type, so we + * have the following structure: + * + * { + * "group-slug": { + * "function": [...], + * "mixin": [...], + * "variable": [...] + * }, + * "another-group": { + * "function": [...], + * "mixin": [...], + * "variable": [...] + * } + * } + * + * You can then use `data.byGroupAndType` instead of `data` in your + * templates to manipulate the indexed object. + */ + ctx.idx = lunr(function () { + this.field('type'); + this.field('name'); + + ctx.data.forEach((doc) => { + this.add({ + id: `${doc.context.type}-${doc.context.name}`, + name: doc.context.name, + type: doc.context.type + }); + }, this); + }); + + ctx.data.byGroupAndType = extras.byGroupAndType(ctx.data); + + // Avoid key collision with Handlebars default `data`. + // @see https://github.com/SassDoc/generator-sassdoc-theme/issues/22 + ctx._data = ctx.data; + delete ctx.data; + + /** + * Now we have prepared the data, we can proxy to the Themeleon + * generated theme function. + */ + return theme.apply(this, arguments); +}; diff --git a/extras/docs/themes/sassdoc/views/index.hbs b/extras/docs/themes/sassdoc/views/index.hbs index 2cb58052b5d..e66c7754538 100644 --- a/extras/docs/themes/sassdoc/views/index.hbs +++ b/extras/docs/themes/sassdoc/views/index.hbs @@ -118,6 +118,8 @@ {{!-- {{~>source~}} --}} {{~>example~}} {{> parameters}} + {{> properties}} + {{> see}} {{> usedBy}} {{> require}} {{> authors}} diff --git a/extras/docs/themes/sassdoc/views/partials/properties.hbs b/extras/docs/themes/sassdoc/views/partials/properties.hbs new file mode 100644 index 00000000000..a0130a1e352 --- /dev/null +++ b/extras/docs/themes/sassdoc/views/partials/properties.hbs @@ -0,0 +1,41 @@ +{{#with property}} +
+

Properties

+
+
+
Name
+
+
+
Description
+
+
+
Type
+
+
+
Default Value
+
+
+ + {{#each this}} +
+
+ {{name}} +
+
+ {{{description}}} +
+
+ {{type}} +
+
+ {{! TODO: This should be a helper that determines the value type as well}} + {{#if default}} + {{default}} + {{^}} + none + {{/if}} +
+
+ {{/each}} +
+{{/with}} diff --git a/extras/docs/themes/sassdoc/views/partials/see.hbs b/extras/docs/themes/sassdoc/views/partials/see.hbs new file mode 100644 index 00000000000..b984914ee78 --- /dev/null +++ b/extras/docs/themes/sassdoc/views/partials/see.hbs @@ -0,0 +1,19 @@ +{{#with see}} + +{{/with}} diff --git a/projects/igniteui-angular/migrations/update-6_2_1/changes/theme-props.json b/projects/igniteui-angular/migrations/update-6_2_1/changes/theme-props.json index 0614e0058e8..f075e36bacb 100644 --- a/projects/igniteui-angular/migrations/update-6_2_1/changes/theme-props.json +++ b/projects/igniteui-angular/migrations/update-6_2_1/changes/theme-props.json @@ -1,32 +1,165 @@ { "$schema": "../../common/schema/theme-props.schema.json", - "changes": [ - { "name": "$chip-background", "replaceWith": "$background", "owner": "igx-chip-theme" }, - { "name": "$chip-hover-background", "replaceWith": "$hover-background", "owner": "igx-chip-theme" }, - { "name": "$text-hover-color", "replaceWith": "$hover-text-color", "owner": "igx-chip-theme" }, - { "name": "$order-icon-color", "remove": true, "owner": "igx-chip-theme" }, - { "name": "$order-icon-hover-color", "remove": true, "owner": "igx-chip-theme" }, - { "name": "$dir-icon-color", "remove": true, "owner": "igx-chip-theme" }, - { "name": "$remove-icon-color", "remove": true, "owner": "igx-chip-theme" }, - { "name": "$remove-icon-hover-color", "remove": true, "owner": "igx-chip-theme" }, - { "name": "$chip-focus-border-color", "replaceWith": "$focus-border-color", "owner": "igx-chip-theme" }, - { "name": "$selected-chip-background", "replaceWith": "$selected-background", "owner": "igx-chip-theme" }, - { "name": "$selected-chip-text-color", "replaceWith": "$selected-text-color", "owner": "igx-chip-theme" }, - { "name": "$selected-chip-icon-color", "remove": true, "owner": "igx-chip-theme" }, - { "name": "$selected-chip-hover-background", "replaceWith": "$hover-selected-background", "owner": "igx-chip-theme" }, - { "name": "$selected-chip-focus-background", "replaceWith": "$focus-selected-background", "owner": "igx-chip-theme" }, - { "name": "$selected-chip-text-hover-color", "replaceWith": "$hover-selected-text-color", "owner": "igx-chip-theme" }, - { "name": "$selected-chip-icon-hover-color", "remove": true, "owner": "igx-chip-theme" }, - { "name": "$selected-remove-icon-color", "remove": true, "owner": "igx-chip-theme" }, - { "name": "$selected-chip-icon-focus-color", "remove": true, "owner": "igx-chip-theme" }, - { "name": "$selected-remove-icon-hover-color", "remove": true, "owner": "igx-chip-theme" }, - { "name": "$selected-chip-text-focus-color", "replaceWith": "$focus-selected-text-color", "owner": "igx-chip-theme" }, - { "name": "$selected-chip-focus-border-color", "replaceWith": "$focus-selected-border-color", "owner": "igx-chip-theme" }, - { "name": "$selected-chip-hover-border-color", "replaceWith": "$hover-selected-border-color", "owner": "igx-chip-theme" }, + "changes": [{ + "name": "$chip-background", + "replaceWith": "$background", + "owner": "igx-chip-theme" + }, + { + "name": "$chip-hover-background", + "replaceWith": "$hover-background", + "owner": "igx-chip-theme" + }, + { + "name": "$text-hover-color", + "replaceWith": "$hover-text-color", + "owner": "igx-chip-theme" + }, + { + "name": "$order-icon-color", + "remove": true, + "owner": "igx-chip-theme" + }, + { + "name": "$order-icon-hover-color", + "remove": true, + "owner": "igx-chip-theme" + }, + { + "name": "$dir-icon-color", + "remove": true, + "owner": "igx-chip-theme" + }, + { + "name": "$remove-icon-color", + "remove": true, + "owner": "igx-chip-theme" + }, + { + "name": "$remove-icon-hover-color", + "remove": true, + "owner": "igx-chip-theme" + }, + { + "name": "$chip-focus-border-color", + "replaceWith": "$focus-border-color", + "owner": "igx-chip-theme" + }, + { + "name": "$selected-chip-background", + "replaceWith": "$selected-background", + "owner": "igx-chip-theme" + }, + { + "name": "$selected-chip-text-color", + "replaceWith": "$selected-text-color", + "owner": "igx-chip-theme" + }, + { + "name": "$selected-chip-icon-color", + "remove": true, + "owner": "igx-chip-theme" + }, + { + "name": "$selected-chip-hover-background", + "replaceWith": "$hover-selected-background", + "owner": "igx-chip-theme" + }, + { + "name": "$selected-chip-focus-background", + "replaceWith": "$focus-selected-background", + "owner": "igx-chip-theme" + }, + { + "name": "$selected-chip-text-hover-color", + "replaceWith": "$hover-selected-text-color", + "owner": "igx-chip-theme" + }, + { + "name": "$selected-chip-icon-hover-color", + "remove": true, + "owner": "igx-chip-theme" + }, + { + "name": "$selected-remove-icon-color", + "remove": true, + "owner": "igx-chip-theme" + }, + { + "name": "$selected-chip-icon-focus-color", + "remove": true, + "owner": "igx-chip-theme" + }, + { + "name": "$selected-remove-icon-hover-color", + "remove": true, + "owner": "igx-chip-theme" + }, + { + "name": "$selected-chip-text-focus-color", + "replaceWith": "$focus-selected-text-color", + "owner": "igx-chip-theme" + }, + { + "name": "$selected-chip-focus-border-color", + "replaceWith": "$focus-selected-border-color", + "owner": "igx-chip-theme" + }, + { + "name": "$selected-chip-hover-border-color", + "replaceWith": "$hover-selected-border-color", + "owner": "igx-chip-theme" + }, - { "name": "$row-content-focus-background", "remove": true, "owner": "igx-grid-theme" }, - { "name": "$row-indentation-background", "remove": true, "owner": "igx-grid-theme" }, - { "name": "$grouping-indicator-hover-background", "remove": true, "owner": "igx-grid-theme" }, - { "name": "$grouping-indicator-focus-background", "remove": true, "owner": "igx-grid-theme" } + { + "name": "$row-content-focus-background", + "remove": true, + "owner": "igx-grid-theme" + }, + { + "name": "$row-indentation-background", + "remove": true, + "owner": "igx-grid-theme" + }, + { + "name": "$grouping-indicator-hover-background", + "remove": true, + "owner": "igx-grid-theme" + }, + { + "name": "$grouping-indicator-focus-background", + "remove": true, + "owner": "igx-grid-theme" + }, + { + "name": "$variant", + "remove": true, + "owner": "igx-checkbox-theme" + }, + { + "name": "$variant", + "remove": true, + "owner": "igx-input-group-theme" + }, + { + "name": "$variant", + "remove": true, + "owner": "igx-radio-theme" + }, + { + "name": "$variant", + "remove": true, + "owner": "igx-slider-theme" + }, + { + "name": "$variant", + "remove": true, + "owner": "igx-switch-theme" + }, + { + "name": "$variant", + "remove": true, + "owner": "igx-tooltip-theme" + } ] -} \ No newline at end of file +} diff --git a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss index 2f4696d6735..38ce53d3aee 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss @@ -191,16 +191,17 @@ /// @access public /// @requires {function} to-string /// @param {Color} $rgba - The rgba color to convert. +/// @param {Color} $background - The background color to convert against. /// @return {Color} - The hexidecimal representation of the rgba value. -@function hexrgba($rgba) { +@function hexrgba($rgba, $background: #fff) { @if type-of($rgba) == color { $red: red($rgba); $green: green($rgba); $blue: blue($rgba); $a: alpha($rgba); - $r: floor($a * $red + (1 - $a) * 255); - $g: floor($a * $green + (1 - $a) * 255); - $b: floor($a * $blue + (1 - $a) * 255); + $r: floor($a * $red + (1 - $a) * red($background)); + $g: floor($a * $green + (1 - $a) * green($background)); + $b: floor($a * $blue + (1 - $a) * blue($background)); @return rgb($r, $g, $b); } @return $rgba; @@ -389,17 +390,90 @@ @return $split-arr; } -// @ignore -@function get-theme($themes, $theme) { - @if type-of($themes) == 'map' and map-has-key($themes, $theme) { - @return map-get($themes, $theme); +/// Returns a value for a given instruction map, where the +/// keys of the map are the names of the functions to be called, +/// and the value for a given key is the arguments the function +/// should be called with. +/// The instruction set is executed left-to-right. The output of +/// the first instruction is then passed as input to the next, and so on. +/// @access private +/// @param {Map} $ctx - The instruction map to be used. +/// @param {List | Map} $extra [null] - Additional arguments to be passed during function calls. +/// Will only be applied for `igx-color` and `igx-contrast-color` functions. +/// @example scss Resolve `igx-color` and apply 80% opacity +/// $instructions: ( +/// igx-color: ('primary', 500), +/// rgba: .2 +/// ); +/// // $some-palette is a palette we pass as extra arguments +/// $resolved-color: resolve-value($instructions, $some-palette); +/// +@function resolve-value($ctx, $extra: null) { + $result: null; + @each $fn, $args in $ctx { + @if function-exists($fn) { + @if $result == null and ($fn == 'igx-color' or $fn == 'igx-contrast-color') { + $result: call(get-function($fn), $extra, $args...); + } @else if $result != null { + $result: call(get-function($fn), $result, $args...) + } @else { + $result: call(get-function($fn), $args...) + } + } } + @return $result; +} - @if (function-exists('get-function')) { - @return call(get-function(#{$theme}-theme)); - } @else { - @return call((#{$theme}-theme)); +/// Applies an `igx-palette` to a given theme schema. +/// @access private +/// @param {Map} $schema - A theme schema. +/// @param {Map} $palette - An igx-palette map. +/// @requires {function} resolve-value +/// @example scss Apply an `igx-palette` to theme schema +/// $custom-palette: igx-palette($primary: red, $secondary: blue); +/// $custom-schema: ( +/// my-color: ( +/// igx-color: ('primary', 800), +/// rgba: .5 +/// ), +/// roundness: 5px +/// ); +/// $theme: apply-palette($custom-schema, $custom-palette); // A map with palette values resolved. +/// @returns {Map} - A map with the resolved palette values. +@function apply-palette($schema, $palette) { + $result: (); + @each $key, $value in $schema { + @if type-of($value) == 'map' { + $result: extend($result, (#{$key}: resolve-value($value, $palette))); + } @else { + $result: extend($result, (#{$key}: $value)); + } } + @return $result; +} + +/// Returns true if the scope where it's called +/// is the root of the document. +/// @access private +/// @example scss Check if the current scope is root +/// @mixin smart-mixin() { +/// $scope: if(is-root(), ':root', '&'); +/// +/// #{$scope} { +/// /* style rules here */ +/// } +/// } +/// +@function is-root() { + @each $selector in & { + @return if($selector == null, true, false); + } +} + +/// Returns a random color. +/// @access private +@function random-color { + @return hsl(random(360), 100%, 50%); } /// Returns a value for a given instruction map, where the diff --git a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss index 840cf43c96d..914a66cff32 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss @@ -221,14 +221,14 @@ /// Add theme colors to the global root scope /// Ensures the operation is done only once. /// @access private -/// @param {map} $theme - The component theme to get the +/// @param {map} $theme - The component theme to register as css vars. /// @requires {mixin} css-vars-from-theme @mixin igx-root-css-vars($theme) { - $name: map-get($theme, 'name'); + $scope: &; - @if map-get($themes, $name) == null { + @if map-get($themes, $scope) == null { $id: unique-id(); - $themes: map-merge($themes, (#{$name}: $id)) !global; + $themes: map-merge($themes, (#{$scope}: $id)) !global; @include igx-css-vars($theme); } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss index d0a0a7654fa..a83bd05a921 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss @@ -8,13 +8,16 @@ /// If only background color is specified, text/icon color /// will be assigned automatically to a contrasting color. /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. -/// @param {Color} $icon-background [rgba(0, 0, 0, .26)]- The background color used for avatars of type icon. -/// @param {Color} $icon-color [rgba(0, 0, 0, .74)] - The icon color used for avatars of type icon. -/// @param {Color} $initials-background [rgba(0, 0, 0, .26)] - The background color used for avatars of type initials. -/// @param {Color} $initials-color [rgba(0, 0, 0, .74)] - The text color used for avatars of type initials. -/// @param {Color} $image-background [transparent] - The background color used for avatars of type image. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// @param {Color} $icon-background [null]- The background color used for avatars of type icon. +/// @param {Color} $icon-color [null] - The icon color used for avatars of type icon. +/// @param {Color} $initials-background [null] - The background color used for avatars of type initials. +/// @param {Color} $initials-color [null] - The text color used for avatars of type initials. +/// @param {Color} $image-background [null] - The background color used for avatars of type image. +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires text-contrast -/// @requires igx-color /// @requires extend /// /// @example scss Change the background and icon colors in icon avatars @@ -30,7 +33,8 @@ $initials-color: null, $image-background: null ) { - $theme: apply-palette(map-get($schema, 'igx-avatar'), $palette); + $name: 'igx-avatar'; + $theme: apply-palette(map-get($schema, $name), $palette); @if not($icon-color) and $icon-background { $icon-color: text-contrast($icon-background); @@ -41,6 +45,7 @@ } @return extend($theme, ( + name: $name, palette: $palette, icon-background: $icon-background, icon-color: $icon-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss index 0ab4500bfe4..4104cabd459 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss @@ -9,15 +9,18 @@ /// will be assigned automatically to a contrasting color. /// /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. -/// @param {Color} $icon-color [#fff] - The icon color used. -/// @param {Color} $text-color [#fff] - The text color used. -/// @param {Color} $border-color [#fff] - The border color used. -/// @param {Color} $background-color [primary 500] - The background color used. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// @param {Color} $icon-color [null] - The icon color used. +/// @param {Color} $text-color [null] - The text color used. +/// @param {Color} $border-color [null] - The border color used. +/// @param {Color} $background-color [null] - The background color used. /// @param {Bool} $disable-shadow [true] - Sets the badge shadow visibility. /// @param {Bool} $disable-border [true] - Sets the badge border visibility. /// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires extend -/// @requires igx-color /// @requires igx-elevation /// @requires text-contrast /// @requires rem @@ -42,10 +45,11 @@ $disable-shadow: true, $disable-border: true ) { + $name: 'igx-badge'; $badge-shadow: if($disable-shadow == true, none, igx-elevation($elevations, 1)); $border-width: if($disable-border == true, 0, rem(1px)); - $theme: apply-palette(map-get($schema, 'igx-badge'), $palette); + $theme: apply-palette(map-get($schema, $name), $palette); @if not($icon-color) and $background-color { $icon-color: text-contrast($background-color); @@ -56,6 +60,7 @@ } @return extend($theme, ( + name: $name, palette: $palette, icon-color: $icon-color, text-color: $text-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss index ce67fa35d2f..39f4be52ca1 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss @@ -7,11 +7,18 @@ /// If only background color is specified, text/icon color /// will be assigned automatically to a contrasting color. /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. -/// @param {Color} $banner-background [#FFFFFF)]- The background color used banner background. -/// @param {Color} $banner-label-color [rgba(0, 0, 0, .26)]- The color used for banner label. -/// @param {Color} $banner-border-color [rgba(0, 0, 0, .74)] - The border color used banner border. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// +/// @param {Color} $banner-background [null]- The background color used banner background. +/// @param {Color} $banner-message-color [null]- The color used for banner label. +/// @param {Color} $banner-border-color [null] - The border color used banner border. +/// @param {Color} $banner-illustration-background [null] - The background color used for banner illustration. +/// @param {Color} $banner-illustration-color [null] - The color used banner illustration. +/// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires text-contrast -/// @requires igx-color /// @requires extend /// /// @example scss Change the background in banner @@ -27,13 +34,15 @@ $banner-illustration-background: null, $banner-illustration-color: null ) { - $theme: apply-palette(map-get($schema, 'igx-banner'), $palette); + $name: 'igx-banner'; + $theme: apply-palette(map-get($schema, $name), $palette); @if not($banner-message-color) and $banner-background { $banner-message-color: text-contrast($banner-background); } @return extend($theme, ( + name: $name, palette: $palette, banner-background: $banner-background, banner-message-color: $banner-message-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss index f59d5767ff8..27b2ba36b2f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss @@ -8,12 +8,15 @@ /// If only background color is specified, /// the idle item color will be assigned automatically to a contrasting color. /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. -/// @param {Color} $background [#fff] - The background color used for the toast. -/// @param {Color} $idle-item-color [rgba(0, 0, 0, .62)] - The text-color used for the idle color. -/// @param {Color} $active-item-color [primary 500] - The text-color used for the active color. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// @param {Color} $background [null] - The background color used for the toast. +/// @param {Color} $idle-item-color [null] - The text-color used for the idle color. +/// @param {Color} $active-item-color [null] - The text-color used for the active color. /// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires extend -/// @requires igx-color /// @requires text-contrast /// /// @example scss Set a custom background color @@ -28,13 +31,15 @@ $idle-item-color: null, $active-item-color: null ) { - $theme: apply-palette(map-get($schema, 'igx-bottom-nav'), $palette); + $name: 'igx-bottom-nav'; + $theme: apply-palette(map-get($schema, $name), $palette); @if not($idle-item-color) and $background { $idle-item-color: rgba(text-contrast($background), .7); } @return extend($theme, ( + name: $name, palette: $palette, background: $background, idle-item-color: $idle-item-color, @@ -62,9 +67,9 @@ $menu-height: 56px; $top-menu-shadow: igx-elevation($elevations, 8); - $bottom-menu-shadow: 0 -2px 4px -1px igx-color($palette, 'grays', 400), - 0 -4px 5px 0 igx-color($palette, 'grays', 300), - 0 -1px 10px 0 igx-color($palette, 'grays', 200); + $bottom-menu-shadow: 0 -2px 4px -1px rgba(0, 0, 0, .26), + 0 -4px 5px 0 rgba(0, 0, 0, .12), + 0 -1px 10px 0 rgba(0, 0, 0, .08); $item-min-width: 80px; $item-max-width: 168px; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss index 98ba6f43c6a..c94f05d9f46 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss @@ -8,22 +8,25 @@ /// will be assigned automatically to a contrasting color. /// Does ___not___ apply for disabled state colors. /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. -/// @param {Color} $item-text-color [rgba(0, 0, 0, .62)]- The text color for button group items. -/// @param {Color} $item-background [#fff] - The background color for button group items . -/// @param {Color} $item-border-color [transparent] - The border color between button group items. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// @param {Color} $item-text-color [null]- The text color for button group items. +/// @param {Color} $item-background [null] - The background color for button group items . +/// @param {Color} $item-border-color [null] - The border color between button group items. /// -/// @param {Color} $item-hover-text-color [rgba(0, 0, 0, .74)] - The hover text color for button group items. -/// @param {Color} $item-hover-background [rgba(0, 0, 0, .26)] - The hover background color for button group items. +/// @param {Color} $item-hover-text-color [null] - The hover text color for button group items. +/// @param {Color} $item-hover-background [null] - The hover background color for button group items. /// -/// @param {Color} $disabled-text-color [rgba(0, 0, 0, .26)]- The text/icon color for a disabled item in the button group. -/// @param {Color} $disabled-background-color [rgba(0, 0, 0, .04)] - The background color for a disabled item in the button group. +/// @param {Color} $disabled-text-color [null]- The text/icon color for a disabled item in the button group. +/// @param {Color} $disabled-background-color [null] - The background color for a disabled item in the button group. /// -/// @param {Color} $item-selected-text-color [rgba(0, 0, 0, .74)]- The text color for a selected item in the button group. -/// @param {Color} $item-selected-background [rgba(0, 0, 0, .26)] - The background color for a selected item in the button group. -/// @param {Color} $item-selected-border-color [rgba(0, 0, 0, .06)] - The border color for a selected item from the button group. +/// @param {Color} $item-selected-text-color [null]- The text color for a selected item in the button group. +/// @param {Color} $item-selected-background [null] - The background color for a selected item in the button group. +/// @param {Color} $item-selected-border-color [null] - The border color for a selected item from the button group. /// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires extend -/// @requires igx-color /// @requires text-contrast /// /// @example scss Change the background, text, and border colors @@ -52,7 +55,8 @@ $item-selected-background: null, $item-selected-border-color: null ) { - $theme: apply-palette(map-get($schema, 'igx-button-group'), $palette); + $name: 'igx-button-group'; + $theme: apply-palette(map-get($schema, $name), $palette); @if not($item-text-color) and $item-background { $item-text-color: text-contrast($item-background); @@ -87,6 +91,7 @@ } @return extend($theme, ( + name: $name, palette: $palette, item-text-color: $item-text-color, item-background: $item-background, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss index b9e3de46344..cea841af084 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss @@ -9,42 +9,44 @@ /// will be assigned automatically to a contrasting color. /// Does ___not___ apply for disabled state colors. /// @param {Map} $palette [$default-palette] - The palette used as basis for the component theme. -/// @param {String} $button-roundness [2px]- The edge roundness (border-radius) for flat and raised buttons. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// @param {String} $button-roundness [4px]- The edge roundness (border-radius) for flat and raised buttons. /// -/// @param {Color} $flat-background [transparent] - The background color of a flat button. -/// @param {Color} $flat-text-color [secondary 500] - The idle text color of a flat button. -/// @param {Color} $flat-hover-background [5% of secondary 500] - The hover background color of a flat button. -/// @param {Color} $flat-hover-text-color [secondary 500] - The hover text color of a flat button. -/// @param {Color} $flat-focus-background [12% of secondary 400] - The focus background color of a flat button. -/// @param {Color} $flat-focus-text-color [secondary 500] - The focus text color of a flat button. +/// @param {Color} $flat-background [null] - The background color of a flat button. +/// @param {Color} $flat-text-color [null] - The idle text color of a flat button. +/// @param {Color} $flat-hover-background [null] - The hover background color of a flat button. +/// @param {Color} $flat-hover-text-color [null] - The hover text color of a flat button. +/// @param {Color} $flat-focus-background [null] - The focus background color of a flat button. +/// @param {Color} $flat-focus-text-color [null] - The focus text color of a flat button. /// -/// @param {Color} $raised-background [secondary 500] - The background color of a raised button. -/// @param {Color} $raised-text-color [igx-contrast-color of secondary 500] - The idle text color of a raised button. -/// @param {Color} $raised-hover-background [secondary 300] - The hover background of a raised button. -/// @param {Color} $raised-hover-text-color [igx-contrast-color of secondary 300] - The hover text color of a raised button. -/// @param {Color} $raised-focus-background [secondary 300] - The focus background color of a raised button. -/// @param {Color} $raised-focus-text-color [igx-contrast-color of secondary 300] - The focus text color of a raised button. +/// @param {Color} $raised-background [null] - The background color of a raised button. +/// @param {Color} $raised-text-color [null] - The idle text color of a raised button. +/// @param {Color} $raised-hover-background [null] - The hover background of a raised button. +/// @param {Color} $raised-hover-text-color [null] - The hover text color of a raised button. +/// @param {Color} $raised-focus-background [null] - The focus background color of a raised button. +/// @param {Color} $raised-focus-text-color [null] - The focus text color of a raised button. /// -/// @param {Color} $fab-background [secondary 500] - The background color of a floating action button. -/// @param {Color} $fab-text-color [igx-contrast-color of secondary 500] - The text color of a floating action button. -/// @param {Color} $fab-hover-background [secondary 300] - The hover background color of a floating action button. -/// @param {Color} $fab-hover-text-color [igx-contrast color of secondary 300] - The hover text color of a floating action button. -/// @param {Color} $fab-focus-background [secondary 300] - The focus background color of floating action button. -/// @param {Color} $fab-focus-text-color [igx-contrast color of secondary 300] - The focus text color of a floating action button. +/// @param {Color} $fab-background [null] - The background color of a floating action button. +/// @param {Color} $fab-text-color [null] - The text color of a floating action button. +/// @param {Color} $fab-hover-background [null] - The hover background color of a floating action button. +/// @param {Color} $fab-hover-text-color [null] - The hover text color of a floating action button. +/// @param {Color} $fab-focus-background [null] - The focus background color of floating action button. +/// @param {Color} $fab-focus-text-color [null] - The focus text color of a floating action button. /// -/// @param {Color} $icon-color [rgba(0, 0, 0, .74)] - The icon color of an icon button. -/// @param {Color} $icon-hover-color [rgba(0, 0, 0, .74)] - The hover icon color of an icon button. -/// @param {Color} $icon-background [transparent] - The background color of the an icon button. -/// @param {Color} $icon-hover-background [rgba(0, 0, 0, .04)] - The hover background color of an icon button. -/// @param {Color} $icon-focus-color [rgba(0, 0, 0, .74)] - The focus icon color of an icon button. -/// @param {Color} $icon-focus-background [rgba(0, 0, 0, .26)] - The focus background color an icon button. +/// @param {Color} $icon-color [null] - The icon color of an icon button. +/// @param {Color} $icon-hover-color [null] - The hover icon color of an icon button. +/// @param {Color} $icon-background [null] - The background color of the an icon button. +/// @param {Color} $icon-hover-background [null] - The hover background color of an icon button. +/// @param {Color} $icon-focus-color [null] - The focus icon color of an icon button. +/// @param {Color} $icon-focus-background [null] - The focus background color an icon button. /// -/// @param {Color} $disabled-color [rgba(0, 0, 0, .26)] - The disabled text/icon color of a button. -/// @param {Color} $disabled-background [rgba(0, 0, 0, .04)] - The disabled background color of raised, fab, or icon buttons. +/// @param {Color} $disabled-color [null] - The disabled text/icon color of a button. +/// @param {Color} $disabled-background [null] - The disabled background color of raised, fab, or icon buttons. /// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires extend -/// @requires igx-color -/// @requires igx-contrast-color /// @requires text-contrast /// /// @example scss Change the background and text colors in raised buttons @@ -91,7 +93,8 @@ $disabled-color: null, $disabled-background: null ) { - $theme: apply-palette(map-get($schema, 'igx-button'), $palette); + $name: 'igx-button'; + $theme: apply-palette(map-get($schema, $name), $palette); @if not($flat-text-color) and $flat-background { $flat-text-color: text-contrast($flat-background); @@ -174,6 +177,7 @@ } @return extend($theme, ( + name: $name, palette: $palette, button-roundness: $button-roundness, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss index 1f8c0e77453..0ab80b3d6ca 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss @@ -14,40 +14,42 @@ /// If only background colors are specified, text/icon colors /// will be assigned automatically to a contrasting color. /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. -/// @param {Color} $content-background [#fff] - The main content background color. -/// @param {Color} $content-text-color [rgba(0, 0, 0, .87)] - The main content text color. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// @param {Color} $content-background [null] - The main content background color. +/// @param {Color} $content-text-color [null] - The main content text color. /// -/// @param {Color} $header-background [secondary 500] - The header background color. -/// @param {Color} $header-text-color [igx-contrast-color of secondary 500] - The header text color. +/// @param {Color} $header-background [null] - The header background color. +/// @param {Color} $header-text-color [null] - The header text color. /// -/// @param {Color} $picker-arrow-color [rgba(0, 0, 0, .74)] - The idle picker arrow color. -/// @param {Color} $picker-arrow-hover-color [secondary 500] - The picker hover arrow color. +/// @param {Color} $picker-arrow-color [null] - The idle picker arrow color. +/// @param {Color} $picker-arrow-hover-color [null] - The picker hover arrow color. /// -/// @param {Color} $picker-text-color [rgba(0, 0, 0, .74)]- The idle picker month/year color. -/// @param {Color} $picker-text-hover-color [secondary 500]- The hover picker month/year color. +/// @param {Color} $picker-text-color [null]- The idle picker month/year color. +/// @param {Color} $picker-text-hover-color [null]- The hover picker month/year color. /// -/// @param {Color} $inactive-text-color [rgba(0, 0, 0, .24)] - The text color for weekday labels and other month dates. -/// @param {Color} $weekend-text-color [rgba(0, 0, 0, .24)] - The text color for weekend days. +/// @param {Color} $inactive-text-color [null] - The text color for weekday labels and other month dates. +/// @param {Color} $weekend-text-color [null] - The text color for weekend days. /// -/// @param {Color} $year-current-text-color [secondary 500] - The text color for the current/selected year. -/// @param {Color} $month-current-text-color [secondary 500]- The text color for the current/selected month. +/// @param {Color} $year-current-text-color [null] - The text color for the current/selected year. +/// @param {Color} $month-current-text-color [null]- The text color for the current/selected month. /// -/// @param {Color} $year-hover-text-color [secondary 500] - The year hover text color. -/// @param {Color} $month-hover-text-color [secondary 500] - The month hover text color. +/// @param {Color} $year-hover-text-color [null] - The year hover text color. +/// @param {Color} $month-hover-text-color [null] - The month hover text color. /// -/// @param {Color} $date-selected-background [secondary 500] - The background color for the selected date. -/// @param {Color} $date-selected-text-color [igx-contrast-color of secondary 500] - The text color for the selected date. +/// @param {Color} $date-selected-background [null] - The background color for the selected date. +/// @param {Color} $date-selected-text-color [null] - The text color for the selected date. /// -/// @param {Color} $date-current-text-color [secondary 500] - The text color for the current date. -/// @param {Color} $date-hover-background [rgba(0, 0, 0, .08)] - The hover date background color. +/// @param {Color} $date-current-text-color [null] - The text color for the current date. +/// @param {Color} $date-hover-background [null] - The hover date background color. /// -/// @param {Color} $date-special-background [rgba(0, 0, 0, .87)] - The background color used for special dates. -/// @param {Color} $date-special-text-color [rgba(0, 0, 0, .04] - The text color used for special dates. +/// @param {Color} $date-special-background [null] - The background color used for special dates. +/// @param {Color} $date-special-text-color [null] - The text color used for special dates. /// -/// @param {Color} $date-disabled-text-color [rgba(0, 0, 0, .23)] - The text color for disabled dates. +/// @param {Color} $date-disabled-text-color [null] - The text color for disabled dates. /// -/// @requires igx-color -/// @requires igx-contrast-color +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires text-contrast /// @requires extend /// @@ -94,7 +96,8 @@ $date-disabled-text-color: null ) { - $theme: apply-palette(map-get($schema, 'igx-calendar'), $palette); + $name: 'igx-calendar'; + $theme: apply-palette(map-get($schema, $name), $palette); @if not($content-text-color) and $content-background { $content-text-color: text-contrast($content-background); @@ -169,6 +172,7 @@ } @return extend($theme, ( + name: $name, palette: $palette, content-background: $content-background, content-text-color: $content-text-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss index 79234f92b0e..03f58744299 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss @@ -7,14 +7,17 @@ /// /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. -/// @param {Color} $background [#fff]- The card background color. -/// @param {Color} $header-text-color [rgba(0, 0, 0, .74)] - The text color of the card title. -/// @param {Color} $subtitle-text-color [rgba(0, 0, 0, .54)] - The text color of the card subtitle. -/// @param {Color} $content-text-color [rgba(0, 0, 0, .54)] - The text color of the card content. -/// @param {Color} $actions-text-color [rgba(0, 0, 0, .54)] - The text color of the card buttons. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// @param {Color} $background [null]- The card background color. +/// @param {Color} $header-text-color [null] - The text color of the card title. +/// @param {Color} $subtitle-text-color [null] - The text color of the card subtitle. +/// @param {Color} $content-text-color [null] - The text color of the card content. +/// @param {Color} $actions-text-color [null] - The text color of the card buttons. /// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires extend -/// @requires igx-color /// @requires text-contrast /// /// @example scss Change the background and content text colors in card @@ -34,16 +37,8 @@ $content-text-color: null, $actions-text-color: null ) { - // $default-theme: ( - // name: 'igx-card', - // background: #fff, - // header-text-color: igx-color($palette, grays, 800), - // subtitle-text-color: igx-color($palette, grays, 600), - // content-text-color: igx-color($palette, grays, 600), - // actions-text-color: igx-color($palette, grays, 600) - // ); - - $theme: apply-palette(map-get($schema, 'igx-card'), $palette); + $name: 'igx-card'; + $theme: apply-palette(map-get($schema, $name), $palette); @if not($header-text-color) and $background { $header-text-color: text-contrast($background); @@ -62,6 +57,7 @@ } @return extend($theme, ( + name: $name, palette: $palette, background: $background, header-text-color: $header-text-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss index 56d99eab2ac..ca4fa5a3174 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss @@ -6,17 +6,20 @@ //// /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. -/// @param {Color} $button-background [#fff] - The previous/next buttons idle background color. -/// @param {Color} $button-hover-background [#fff] - The previous/next buttons hover background color. -/// @param {Color} $button-arrow-color [rgba(0, 0, 0, .62)] - The previous/next buttons idle arrow color. -/// @param {Color} $button-hover-arrow-color [rgba(0, 0, 0, .87)] - The previous/next buttons hover arrow color. -/// @param {Color} $indicator-dot-color [#fff] - The active indicator dot color. -/// @param {Color} $indicator-border-color [#fff] - The idle indicator border color. -/// @param {Color} $indicator-active-border-color [#fff] - The active indicator border color. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// @param {Color} $button-background [null] - The previous/next buttons idle background color. +/// @param {Color} $button-hover-background [null] - The previous/next buttons hover background color. +/// @param {Color} $button-arrow-color [null] - The previous/next buttons idle arrow color. +/// @param {Color} $button-hover-arrow-color [null] - The previous/next buttons hover arrow color. +/// @param {Color} $indicator-dot-color [null] - The active indicator dot color. +/// @param {Color} $indicator-border-color [null] - The idle indicator border color. +/// @param {Color} $indicator-active-border-color [null] - The active indicator border color. /// @param {Bool} $disable-button-shadow [true] - Show shadow underneath the previous/next buttons. /// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires extend -/// @requires igx-color /// @requires igx-elevation /// @requires text-contrast /// @requires $elevations @@ -43,7 +46,8 @@ $disable-button-shadow: true ){ - $theme: apply-palette(map-get($schema, 'igx-carousel'), $palette); + $name: 'igx-carousel'; + $theme: apply-palette(map-get($schema, $name), $palette); $button-shadow: if($disable-button-shadow == true, none, igx-elevation($elevations, 1)); @if not($button-arrow-color) and $button-background { @@ -55,6 +59,7 @@ } @return extend($theme, ( + name: $name, palette: $palette, button-background: $button-background, button-hover-background: $button-hover-background, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss index 078d53dbd44..27af5cdcae2 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss @@ -10,16 +10,18 @@ /// Checkbox Theme /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. -/// @param {Color} $label-color [rgba(0, 0, 0, .87)]- The text color used for the label text. -/// @param {Color} $empty-color [rgba(0, 0, 0, .54)] - The unchecked border color. -/// @param {Color} $fill-color [secondary 500] - The checked border and fill colors. -/// @param {Color} $tick-color [#fff] - The checked mark color. -/// @param {Color} $disabled-color [rgba(0, 0, 0, .24)] - The disabled border and fill colors. -/// @param {String} $variant ['dark'] - Determines the default color scheme - could be either 'dark' or 'light'. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// @param {Color} $label-color [null]- The text color used for the label text. +/// @param {Color} $empty-color [null] - The unchecked border color. +/// @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. /// Set to light when the surrounding area is dark. /// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires extend -/// @requires igx-color /// /// @example scss Change the checked fill color /// $my-checkbox-theme: igx-checkbox-theme($fill-color: magenta); @@ -33,42 +35,19 @@ $empty-color: null, $fill-color: null, $tick-color: null, - $disabled-color: null, - $variant: 'dark' + $disabled-color: null ) { $name: 'igx-checkbox'; - - $dark-theme: ( - name: $name, - label-color: igx-color($palette, 'grays', 900), - empty-color: igx-color($palette, 'grays', 600), - fill-color: igx-color($palette, 'secondary', 500), - tick-color: #fff, - disabled-color: igx-color($palette, 'grays', 400) - ); - - $light-theme: ( - name: $name, - label-color: #fff, - empty-color: rgba(255, 255, 255, .7), - fill-color: igx-color($palette, 'secondary', 500), - tick-color: #000, - disabled-color: rgba(255, 255, 255, .3) - ); - - $theme: map-get(( - dark: apply-palette(map-get($schema, 'igx-checkbox'), $palette), - light: $light-theme - ), $variant); + $theme: apply-palette(map-get($schema, $name), $palette); @return extend($theme, ( + name: $name, palette: $palette, label-color: $label-color, empty-color: $empty-color, fill-color: $fill-color, tick-color: $tick-color, - disabled-color: $disabled-color, - variant: $variant + disabled-color: $disabled-color )); } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss index de9657915c2..e7896fba130 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss @@ -6,33 +6,34 @@ /// Chip Theme /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. -/// @param {Color} $roundness [32px] - The chip roundness. +/// @param {Color} $roundness [null] - The chip roundness. /// -/// @param {Color} $text-color [rgba(0, 0, 0, .74)] - The chip text color. -/// @param {Color} $background [rgba(0, 0, 0, .04)] - The chip background color. -/// @param {Color} $border-color [transparent] - The chip border color. +/// @param {Color} $text-color [null] - The chip text color. +/// @param {Color} $background [null] - The chip background color. +/// @param {Color} $border-color [null] - The chip border color. /// -/// @param {Color} $hover-text-color [rgba(0, 0, 0, .74)] - The chip text hover color. -/// @param {Color} $hover-background [rgba(0, 0, 0, .08)] - The chip hover background color. -/// @param {Color} $hover-border-color [transparent] - The chip hover border color. +/// @param {Color} $hover-text-color [null] - The chip text hover color. +/// @param {Color} $hover-background [null] - The chip hover background color. +/// @param {Color} $hover-border-color [null] - The chip hover border color. /// -/// @param {color} $selected-text-color [igx-contrast-color of secondary 500] - The selected chip text color. -/// @param {color} $selected-background [secondary 500] - The selected chip background color. -/// @param {color} $selected-border-color [primary 300] The selected chip border color. +/// @param {color} $selected-text-color [null] - The selected chip text color. +/// @param {color} $selected-background [null] - The selected chip background color. +/// @param {color} $selected-border-color [null] The selected chip border color. /// -/// @param {color} $hover-selected-text-color [igx-contrast-color of secondary 300] - The selected chip hover text color. -/// @param {color} $hover-selected-background [secondary 300] - The selected chip hover background color. -/// @param {color} $hover-selected-border-color [secondary 900] - The selected chip hover border color. +/// @param {color} $hover-selected-text-color [null] - The selected chip hover text color. +/// @param {color} $hover-selected-background [null] - The selected chip hover background color. +/// @param {color} $hover-selected-border-color [null] - The selected chip hover border color. /// -/// @param {color} $focus-selected-text-color [igx-contrast-color of secondary 300] - The selected chip text focus color. -/// @param {color} $focus-selected-background [secondary 300] - The selected chip focus background color. -/// @param {color} $focus-selected-border-color [secondary 900] - The selected chip focus border color. +/// @param {color} $focus-selected-text-color [null] - The selected chip text focus color. +/// @param {color} $focus-selected-background [null] - The selected chip focus background color. +/// @param {color} $focus-selected-border-color [null] - The selected chip focus border color. /// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires extend /// @requires text-contrast -/// @requires igx-color /// @requires luminance -/// @requires hexrgba /// /// @example scss Change the background color /// $my-chip-theme: igx-chip-theme($background: black); @@ -46,6 +47,7 @@ $text-color: null, $background: null, $border-color: null, + $ghost-background: null, $hover-text-color: null, $hover-background: null, @@ -67,7 +69,8 @@ $focus-selected-background: null, $focus-selected-border-color: null ) { - $theme: apply-palette(map-get($schema, 'igx-chip'), $palette); + $name: 'igx-chip'; + $theme: apply-palette(map-get($schema, $name), $palette); @if not($text-color) and $background { $text-color: text-contrast($background); @@ -158,12 +161,14 @@ } @return extend($theme, ( + name: $name, palette: $palette, roundness: $roundness, text-color: $text-color, background: $background, border-color: $border-color, + ghost-background: $ghost-background, hover-text-color: $hover-text-color, hover-background: $hover-background, @@ -477,7 +482,12 @@ z-index: 10; box-shadow: igx-elevation($elevations, 8); overflow: hidden; - background: hexrgba(--var($theme, 'focus-background')) !important; + background: --var($theme, 'ghost-background'); + + &:hover, + &:focus { + background: --var($theme, 'ghost-background'); + } } %igx-chip__ghost--cosy { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/column-hiding/_column-hiding-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/column-hiding/_column-hiding-theme.scss index 1ae32d5cb4a..656cca6398e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/column-hiding/_column-hiding-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/column-hiding/_column-hiding-theme.scss @@ -10,8 +10,10 @@ /// @param {Color} $title-color [primary 500]- The text color used for the title of the list. /// @param {Color} $background-color [transparent] - The background color of the panel. /// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires extend -/// @requires igx-color /// @requires text-contrast /// /// @example scss Change the title color @@ -26,13 +28,15 @@ $title-color: null, $background-color: null ) { - $theme: apply-palette(map-get($schema, 'igx-column-hiding'), $palette); + $name: 'igx-column-hiding'; + $theme: apply-palette(map-get($schema, $name), $palette); @if not($title-color) and $background-color { $title-color: text-contrast($background-color); } @return extend($theme, ( + name: $name, palette: $palette, title-color: $title-color, background-color: $background-color diff --git a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss index 5bae989394e..fac84fecbf6 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss @@ -5,13 +5,16 @@ /// @author Simeon Simeonoff //// +/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// @param {Color} $search-separator-border-color [null] - The combo search box separator color. +/// @param {Color} $empty-list-placeholder-color [null] - The combo placeholder text color. +/// @param {Color} $empty-list-background [null] - The combo list background color. /// -/// @param {Color} $search-separator-border-color [rgba(0, 0, 0, .12)] - The combo search box separator color. -/// @param {Color} $empty-list-placeholder-color [rgba(0, 0, 0, .26)] - The combo placeholder text color. -/// @param {Color} $empty-list-background [#fff] - The combo list background color. -/// -/// @requires text-contrast -/// @requires igx-color +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette +/// @requires extend @function igx-combo-theme( $palette: $default-palette, $schema: $light-schema, @@ -19,9 +22,11 @@ $empty-list-placeholder-color: null, $empty-list-background: null ) { - $theme: apply-palette(map-get($schema, 'igx-combo'), $palette); + $name: 'igx-combo'; + $theme: apply-palette(map-get($schema, $name), $palette); @return extend($theme, ( + name: $name, palette: $palette, search-separator-border-color: $search-separator-border-color, empty-list-placeholder-color: $empty-list-placeholder-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss index 78f50267d56..2b407f6949c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss @@ -7,14 +7,19 @@ /// Date Picker /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. /// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires extend @function igx-date-picker-theme( $palette: $default-palette, $schema: $light-schema ) { - $theme: apply-palette(map-get($schema, 'igx-date-picker'), $palette); - @return extend($theme, (palette: $palette)); + $name: 'igx-date-picker'; + $theme: apply-palette(map-get($schema, $name), $palette); + @return extend($theme, (name: $name, palette: $palette)); } /// @param {Map} $theme - The theme used to style the component. diff --git a/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss index 4f5475b1fed..3ea5f9f41d6 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss @@ -7,13 +7,16 @@ /// Dialog Theme /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. -/// @param {Color} $background [#fff] - The dialog background color. -/// @param {Color} $title-color [rgba(0, 0, 0, .74)] - The dialog title text color. -/// @param {Color} $message-color [rgba(0, 0, 0, .54)] - The dialog message text color. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// @param {Color} $background [null] - The dialog background color. +/// @param {Color} $title-color [null] - The dialog title text color. +/// @param {Color} $message-color [null] - The dialog message text color. /// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires extend /// @requires text-contrast -/// @requires igx-color /// /// @example scss Change the background color /// $my-dialog-theme: igx-dialog-theme($background: black); @@ -27,7 +30,8 @@ $title-color: null, $message-color: null ) { - $theme: apply-palette(map-get($schema, 'igx-dialog'), $palette); + $name: 'igx-dialog'; + $theme: apply-palette(map-get($schema, $name), $palette); @if not($title-color) and $background{ $title-color: text-contrast($background); @@ -38,6 +42,7 @@ } @return extend($theme, ( + name: $name, palette: $palette, background: $background, title-color: $title-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss index 24f4f5c2d78..82c97bcbdbe 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss @@ -4,32 +4,38 @@ /// @author Marin Popov /// @author Simeon Simeonoff //// -/// @param {Color} $background-color [#fff] - The drop-down background color. -/// @param {Color} $header-text-color [secondary 500] - The drop-down header text color. + +/// Generates a drop-down theme. +/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// @param {Color} $background-color [null] - The drop-down background color. +/// @param {Color} $header-text-color [null] - The drop-down header text color. /// -/// @param {Color} $item-text-color [rgba(0, 0, 0, .74)] - The drop-down text color. -/// @param {Color} $hover-item-text-color [rgba(0, 0, 0, .74)] - The drop-down hover text color. +///@param {Color} $item-text-color [null] - The drop-down text color. +/// @param {Color} $hover-item-text-color [null] - The drop-down hover text color. /// -/// @param {Color} $hover-item-background [rgba(0, 0, 0, .04)] - The drop-down hover item background color. +/// @param {Color} $hover-item-background [null] - The drop-down hover item background color. /// -/// @param {Color} $focused-item-background [rgba(0, 0, 0, .04)] - The drop-down focused item background color. -/// @param {Color} $focused-item-text-color [rgba(0, 0, 0, .74)] - The drop-down focused item text color. +/// @param {Color} $focused-item-background [null] - The drop-down focused item background color. +/// @param {Color} $focused-item-text-color [null] - The drop-down focused item text color. /// -/// @param {Color} $selected-item-background [secondary 500] - The drop-down selected item background color. -/// @param {Color} $selected-item-text-color [igx-contrast-color of secondary 500] - The drop-down selected item text color. +/// @param {Color} $selected-item-background [null] - The drop-down selected item background color. +/// @param {Color} $selected-item-text-color [null] - The drop-down selected item text color. /// -/// @param {Color} $selected-hover-item-background [secondary 600] - The drop-down selected item hover background color. -/// @param {Color} $selected-hover-item-text-color [igx-contrast-color of secondary 600] - The drop-down selected item hover text color. +/// @param {Color} $selected-hover-item-background [null] - The drop-down selected item hover background color. +/// @param {Color} $selected-hover-item-text-color [null] - The drop-down selected item hover text color. /// -/// @param {Color} $selected-focus-item-background [secondary 600] - The drop-down selected item focus background color. -/// @param {Color} selected-focus-item-text-color [igx-contrast-color of secondary 600] - The drop-down selected item focus text color. +/// @param {Color} $selected-focus-item-background [null] - The drop-down selected item focus background color. +/// @param {Color} selected-focus-item-text-color [null] - The drop-down selected item focus text color. /// -/// @param {Color} $disabled-item-background [transparent] - The drop-down disabled item background color. -/// @param {Color} $disabled-item-text-color [rgba(0, 0, 0, .38)] - The drop-down disabled item text color. - +/// @param {Color} $disabled-item-background [null] - The drop-down disabled item background color. +/// @param {Color} $disabled-item-text-color [null] - The drop-down disabled item text color. +/// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette +/// @requires extend /// @requires text-contrast -/// @requires igx-color -/// @requires igx-contrast-color @function igx-drop-down-theme( $palette: $default-palette, $schema: $light-schema, @@ -40,24 +46,25 @@ $item-text-color: null, $hover-item-text-color: null, - $hover-item-background:null, + $hover-item-background: null, - $focused-item-background:null, - $focused-item-text-color:null, + $focused-item-background: null, + $focused-item-text-color: null, - $selected-item-background:null, - $selected-item-text-color:null, + $selected-item-background: null, + $selected-item-text-color: null, - $selected-hover-item-background:null, - $selected-hover-item-text-color:null, + $selected-hover-item-background: null, + $selected-hover-item-text-color: null, - $selected-focus-item-background:null, - $selected-focus-item-text-color:null, + $selected-focus-item-background: null, + $selected-focus-item-text-color: null, - $disabled-item-background:null, - $disabled-item-text-color:null + $disabled-item-background: null, + $disabled-item-text-color: null ) { - $theme: apply-palette(map-get($schema, 'igx-drop-down'), $palette); + $name: 'igx-drop-down'; + $theme: apply-palette(map-get($schema, $name), $palette); @if not($item-text-color) and $background-color { $item-text-color: text-contrast($background-color); @@ -111,8 +118,8 @@ $header-text-color: rgba(text-contrast($background-color), .7); } - @return extend($theme, - ( + @return extend($theme, ( + name: $name, palette: $palette, background-color: $background-color, header-text-color: $header-text-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss index 803cd6c6697..bfa51f99422 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss @@ -6,24 +6,26 @@ /// Expansion panel Theme /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. -/// @param {Color} $header-background [rgba()] - The panel header background color. -/// @param {Color} $header-focus-background [rgba()] - The panel header focus background color. -/// @param {Color} $header-title-color [rgba()] - The panel header title text color. -/// @param {Color} $header-description-color [rgba()] - The panel header description text color. -/// @param {Color} $header-icon-color [rgba()] - The panel header icon color. -/// @param {Color} $body-color [rgba()] - The panel body text color. -/// @param {Color} $body-background [rgba()] - The panel body background color. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// @param {Color} $header-background [null] - The panel header background color. +/// @param {Color} $header-focus-background [null] - The panel header focus background color. +/// @param {Color} $header-title-color [null] - The panel header title text color. +/// @param {Color} $header-description-color [null] - The panel header description text color. +/// @param {Color} $header-icon-color [null] - The panel header icon color. +/// @param {Color} $body-color [null] - The panel body text color. +/// @param {Color} $body-background [null] - The panel body background color. +/// @param {Color} $disabled-color [null] - The panel body disabled text color. /// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires extend /// @requires text-contrast -/// @requires igx-color /// /// @example scss Change the background color /// $my-expansion-panel-theme: igx-expansion-panel($header-background: black); /// // Pass the theme to the igx-expansion-panel component mixin /// @include igx-expansion-panel($my-igx-expansion-panel-theme); - - @function igx-expansion-panel-theme( $palette: $default-palette, $schema: $light-schema, @@ -36,9 +38,9 @@ $body-color: null, $body-background: null, $disabled-color: null - ) { - $theme: apply-palette(map-get($schema, 'igx-expansion-panel'), $palette); + $name: 'igx-expansion-panel'; + $theme: apply-palette(map-get($schema, $name), $palette); @if not($header-title-color) and $header-background { $header-title-color: text-contrast($header-background); @@ -56,8 +58,8 @@ $body-color: text-contrast($body-background); } - // if statement place @return extend($theme, ( + name: $name, palette: $palette, header-background: $header-background, header-focus-background: $header-focus-background, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-filtering/_grid-filtering-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-filtering/_grid-filtering-theme.scss index 966c048a1d1..fb7b80448b7 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid-filtering/_grid-filtering-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-filtering/_grid-filtering-theme.scss @@ -7,22 +7,24 @@ /// Grid Filtering Theme /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. -/// @param {Color} $toggle-icon-color [inherit] - The idle toggle icon color. -/// @param {Color} $toggle-icon-hover-color [#fff] - The hover toggle icon color. -/// @param {Color} $toggle-icon-active-color [igx-contrast color of secondary 500] - The active toggle icon color. -/// @param {Color} $toggle-icon-filtered-color [secondary 500] - The filtered toggle icon color. -/// @param {Color} $toggle-background [transparent] - The idle toggle background color. -/// @param {Color} $toggle-hover-background [rgba(0, 0, 0, .12)] - The hover toggle background color. -/// @param {Color} $toggle-active-background [secondary 500] - The active toggle background color. -/// @param {Color} $toggle-filtered-background [transparent] - The filtered toggle background color. -/// @param {Color} $menu-background [#fff] - The idle menu background color. -/// @param {Color} $menu-text-color [rgba(0, 0, 0, .87)] - The idle menu text color. -/// @param {Color} $menu-button-text-color [secondary 500] - The menu button text color. -/// @param {Color} $menu-button-disabled-text-color [inherit] - The menu disabled button text color. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// @param {Color} $toggle-icon-color [null] - The idle toggle icon color. +/// @param {Color} $toggle-icon-hover-color [null] - The hover toggle icon color. +/// @param {Color} $toggle-icon-active-color [null] - The active toggle icon color. +/// @param {Color} $toggle-icon-filtered-color [null] - The filtered toggle icon color. +/// @param {Color} $toggle-background [null] - The idle toggle background color. +/// @param {Color} $toggle-hover-background [null] - The hover toggle background color. +/// @param {Color} $toggle-active-background [null] - The active toggle background color. +/// @param {Color} $toggle-filtered-background [null] - The filtered toggle background color. +/// @param {Color} $menu-background [null] - The idle menu background color. +/// @param {Color} $menu-text-color [null] - The idle menu text color. +/// @param {Color} $menu-button-text-color [null] - The menu button text color. +/// @param {Color} $menu-button-disabled-text-color [null] - The menu disabled button text color. /// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires extend -/// @requires igx-color -/// @requires igx-contrast-color /// @requires text-contrast /// /// @example scss Change the menu background color @@ -50,7 +52,8 @@ $menu-button-text-color: null, $menu-button-disabled-text-color: null ) { - $theme: apply-palette(map-get($schema, 'igx-grid-filtering'), $palette); + $name: 'igx-grid-filtering'; + $theme: apply-palette(map-get($schema, $name), $palette); @if not($menu-text-color) and $menu-background { $menu-text-color: text-contrast($menu-background); @@ -73,6 +76,7 @@ } @return extend($theme, ( + name: $name, palette: $palette, toggle-icon-color: $toggle-icon-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-paginator/_grid-paginator-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-paginator/_grid-paginator-theme.scss index e55cd97470f..86507bc0210 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid-paginator/_grid-paginator-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-paginator/_grid-paginator-theme.scss @@ -11,9 +11,10 @@ /// @param {Color} $background-color [rgba(0, 0, 0, .04)] - The background color of the paging panel. /// @param {Color} $border-color [rgba(0, 0, 0, .26)] - The border color of the paging panel. /// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires extend -/// @requires igx-color -/// @requires hexrgba /// /// @example scss Change the stripes color /// $my-grid-paginator-theme: igx-grid-paginator-theme( @@ -29,9 +30,11 @@ $background-color: null, $border-color: null ) { - $theme: apply-palette(map-get($schema, 'igx-grid-paginator'), $palette); + $name: 'igx-grid-paginator'; + $theme: apply-palette(map-get($schema, $name), $palette); @return extend($theme, ( + name: $name, palette: $palette, text-color: $text-color, background-color: $background-color, @@ -55,7 +58,7 @@ grid-row: 7; padding: rem(5px) 0; font-size: 12px; - border-top: 1px dotted --var($theme, 'border-color'); + border-top: 1px solid --var($theme, 'border-color'); z-index: 1; &:empty { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss index dc6fec86f17..3b77824b955 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss @@ -5,20 +5,24 @@ /// @author Marin Popov //// -/// Grid Summary Theme /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. -/// @param {Color} $background-color [#f4f4f4] - The summaries background color is inherited form igx-grid__tfoot -/// @param {Color} $label-color [primary 500] - The summaries label color. -/// @param {Color} $result-color [rgba(0, 0, 0, .74)] - The summaries value/result color. -/// @param {Color} $border-color [rgba(0, 0, 0, .26)] - The summaries border color. -/// @param {Color} $pinned-border-width [2px] - The border width of the summary panel. -/// @param {Color} $pinned-border-style [solid] - The border style of the summary panel. -/// @param {Color} $pinned-border-color [rgba(0, 0, 0, .26)] - The border color of the summary panel. -/// @param {Color} $inactive-color [rgba(0, 0, 0, .26)] - The summaries inactive label color. -/// @param {Color} $label-hover-color [primary 700] - The summaries hover label color. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. /// +/// @param {Color} $background-color [null] - The summaries background color is inherited form igx-grid__tfoot +/// @param {Color} $label-color [null] - The summaries label color. +/// @param {Color} $result-color [null] - The summaries value/result color. +/// @param {Color} $border-color [null] - The summaries border color. +/// @param {Color} $pinned-border-width [null] - The border width of the summary panel. +/// @param {Color} $pinned-border-style [null] - The border style of the summary panel. +/// @param {Color} $pinned-border-color [null] - The border color of the summary panel. +/// @param {Color} $inactive-color [null] - The summaries inactive label color. +/// @param {Color} $label-hover-color [null] - The summaries hover label color. +/// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires extend -/// @requires igx-color +/// @requires text-contrast /// /// @example scss Change the summaries background nad labels color /// $my-summary-theme: igx-grid-summary-theme( @@ -41,7 +45,8 @@ $inactive-color: null, $label-hover-color: null ) { - $theme: apply-palette(map-get($schema, 'igx-grid-summary'), $palette); + $name: 'igx-grid-summary'; + $theme: apply-palette(map-get($schema, $name), $palette); @if not($result-color) and $background-color { $result-color: text-contrast($background-color); @@ -56,6 +61,7 @@ } @return extend($theme, ( + name: $name, palette: $palette, background-color: $background-color, label-color: $label-color, @@ -71,7 +77,6 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-root-css-vars -/// @requires igx-color /// @requires {mixin} ellipsis /// @requires rem /// @requires --var @@ -99,7 +104,7 @@ display: flex; flex-direction: column; flex: 1 1 0%; - border-left: 1px dotted --var($theme, 'border-color'); + border-left: 1px solid --var($theme, 'border-color'); padding: map-get($summary-padding, 'comfortable'); background: --var($theme, 'background-color'); overflow: hidden; @@ -131,7 +136,7 @@ } %igx-grid-summary--empty { - border-left: 1px dotted --var($theme, 'border-color'); + border-left: 1px solid --var($theme, 'border-color'); } %igx-grid-summary__item { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss index 98da433eb28..7760910dca9 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss @@ -4,23 +4,30 @@ /// @author Marin Popov /// @author Simeon Simeonoff //// -/// @param {Color} $background-color [rgba(0, 0, 0, .02)] - The toolbar background color. -/// @param {Color} $title-text-color [rgba(0, 0, 0, .54)] - The toolbar title text color. -/// @param {Color} $button-background [#f0f0f0] - The toolbar button background color. -/// @param {Color} $button-text-color [rgba(0, 0, 0, .54)] - The toolbar button text color. -/// @param {Color} $button-hover-background [rgba(0, 0, 0, .04)] - The toolbar button hover background color. -/// @param {Color} $button-hover-text-color [rgba(0, 0, 0, .54)] - The toolbar button hover text color. -/// @param {Color} $button-focus-background [rgba(0, 0, 0, .04)] - The toolbar button focus background color. -/// @param {Color} $button-focus-text-color [rgba(0, 0, 0, .54)] - The toolbar button focus text color. -/// @param {Color} $dropdown-background [#fff] - The toolbar drop-down background color. -/// @param {Color} $item-text-color [rgba(0, 0, 0, .54)] - The toolbar drop-down item text color. -/// @param {Color} $item-hover-background [rgba(0, 0, 0, .04)] - The toolbar drop-down item hover background color. -/// @param {Color} $item-hover-text-color [rgba(0, 0, 0, .54)] - The toolbar drop-down item hover text color. -/// @param {Color} $item-focus-background [rgba(0, 0, 0, .04)] - The toolbar drop-down item focus background color. -/// @param {Color} $item-focus-text-color [rgba(0, 0, 0, .54)] - The toolbar drop-down item focus text color. + +/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// +/// @param {Color} $background-color [null] - The toolbar background color. +/// @param {Color} $title-text-color [null] - The toolbar title text color. +/// @param {Color} $button-background [null] - The toolbar button background color. +/// @param {Color} $button-text-color [null] - The toolbar button text color. +/// @param {Color} $button-hover-background [null] - The toolbar button hover background color. +/// @param {Color} $button-hover-text-color [null] - The toolbar button hover text color. +/// @param {Color} $button-focus-background [null] - The toolbar button focus background color. +/// @param {Color} $button-focus-text-color [null] - The toolbar button focus text color. +/// @param {Color} $dropdown-background [null] - The toolbar drop-down background color. +/// @param {Color} $item-text-color [null] - The toolbar drop-down item text color. +/// @param {Color} $item-hover-background [null] - The toolbar drop-down item hover background color. +/// @param {Color} $item-hover-text-color [null] - The toolbar drop-down item hover text color. +/// @param {Color} $item-focus-background [null] - The toolbar drop-down item focus background color. +/// @param {Color} $item-focus-text-color [null] - The toolbar drop-down item focus text color. /// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires extend -/// @requires igx-color +/// @requires text-contrast /// /// @example scss Change the toolbar background color /// $my-toolbar-theme: igx-grid-toolbar-theme( @@ -50,7 +57,8 @@ $item-focus-background: null, $item-focus-text-color: null ) { - $theme: apply-palette(map-get($schema, 'igx-grid-toolbar'), $palette); + $name: 'igx-grid-toolbar'; + $theme: apply-palette(map-get($schema, $name), $palette); @if not($title-text-color) and $background-color { $title-text-color: text-contrast($background-color); @@ -92,6 +100,7 @@ } @return extend($theme, ( + name: $name, palette: $palette, background-color: $background-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss index e90341788ce..87452d99ada 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss @@ -6,61 +6,65 @@ //// /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. -/// @param {Color} $header-background [#fefefe] - The table header background color. -/// @param {Color} $header-text-color [rgba(0, 0, 0, .54)] - The table header text color. -/// @param {String} $header-border-width [1px] - The border width used for header borders. -/// @param {String} $header-border-style [solid] - The border style used for header borders. -/// @param {Color} $header-border-color [rgba(0, 0, 0, .08)] - The color used for header borders. -/// @param {Color} $ghost-header-text-color [rgba(0, 0, 0, .54)] - The dragged header text color. -/// @param {Color} $ghost-header-icon-color [rgba(0, 0, 0, .38)] - The dragged header icon color. -/// @param {Color} $ghost-header-background [#fff] - The dragged header background color. -/// @param {Color} $content-background [#fff] - The table body background color. -/// @param {Color} $content-text-color [rgba(0, 0, 0, .74)] - The table body text color. -/// @param {Color} $row-odd-background [#fff] - The background color of odd rows. -/// @param {Color} $row-even-background [#fff] - The background color of even rows. -/// @param {Color} $row-odd-text-color [rgba(0, 0, 0, .74)] - The text color of odd rows. -/// @param {Color} $row-even-text-color [rgba(0, 0, 0, .74)] - The text color of even rows. -/// @param {Color} $row-selected-background [rgba(0, 0, 0, .74)] - The selected row background color. -/// @param {Color} $row-selected-text-color [igx-contrast-color of rgba(0, 0, 0, .74)] - The selected row text color. -/// @param {Color} $row-hover-background [#eaeaea] - The hover row background color. -/// @param {Color} $row-hover-text-color [igx-contrast-color of rgba(0, 0, 0, .08)] - The hover row text color. -/// @param {Color} $row-border-color [rgba(0, 0, 0, .12)] - The row bottom border color. -/// @param {String} $pinned-border-width [2px] - The border width of the pinned border. -/// @param {String} $pinned-border-style [solid] - The CSS border style of the pinned border. -/// @param {Color} $pinned-border-color [rgba(0, 0, 0, .24)] - The color of the pinned border. -/// @param {Color} $cell-selected-background [primary 500] - The selected cell background color. -/// @param {Color} $cell-selected-text-color [igx-contrast-color of primary 500] - The selected cell text color. -/// @param {Color} $resize-line-color [secondary 500] - The table header resize line color. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. /// -/// @param {Color} $grouparea-background [#f4f4f4] - The grid group area background color. +/// @param {Color} $header-background [null] - The table header background color. +/// @param {Color} $header-text-color [null] - The table header text color. +/// @param {String} $header-border-width [null] - The border width used for header borders. +/// @param {String} $header-border-style [null] - The border style used for header borders. +/// @param {Color} $header-border-color [null] - The color used for header borders. +/// @param {Color} $ghost-header-text-color [null] - The dragged header text color. +/// @param {Color} $ghost-header-icon-color [null] - The dragged header icon color. +/// @param {Color} $ghost-header-background [null] - The dragged header background color. +/// @param {Color} $content-background [null] - The table body background color. +/// @param {Color} $content-text-color [null] - The table body text color. +/// @param {Color} $row-odd-background [null] - The background color of odd rows. +/// @param {Color} $row-even-background [null] - The background color of even rows. +/// @param {Color} $row-odd-text-color [null] - The text color of odd rows. +/// @param {Color} $row-even-text-color [null] - The text color of even rows. +/// @param {Color} $row-selected-background [null] - The selected row background color. +/// @param {Color} $row-selected-text-color [null] - The selected row text color. +/// @param {Color} $row-hover-background [null] - The hover row background color. +/// @param {Color} $row-hover-text-color [null] - The hover row text color. +/// @param {Color} $row-border-color [null] - The row bottom border color. +/// @param {String} $pinned-border-width [null] - The border width of the pinned border. +/// @param {String} $pinned-border-style [null] - The CSS border style of the pinned border. +/// @param {Color} $pinned-border-color [null] - The color of the pinned border. +/// @param {Color} $cell-selected-background [null] - The selected cell background color. +/// @param {Color} $cell-selected-text-color [null] - The selected cell text color. +/// @param {Color} $resize-line-color [null] - The table header resize line color. /// -/// @param {Color} $group-row-background [#f4f4f4] - The grid group row background color. -/// @param {Color} $group-row-selected-background [rgb(234, 234, 234)] - The drop area background on drop color. -/// @param {Color} $active-expand-icon-color [rgba(0, 0, 0, .54)] - The drop area background on drop color. -/// @param {Color} $active-expand-icon-hover-color [#09f] - The drop area background on drop color. -/// @param {Color} $group-label-column-name-text [primary 500] - The grid group row column name text color. -/// @param {Color} $group-label-icon [primary 500] - The grid group row icon color. -/// @param {Color} $group-label-text [rgba(0, 0, 0, .74)] - The grid group row text color. +/// @param {Color} $grouparea-background [null] - The grid group area background color. /// -/// @param {Color} $expand-all-icon-color [rgba(0, 0, 0, .54)] - The grid header expand all group rows icon color. -/// @param {Color} $expand-all-icon-hover-color [rgba(0, 0, 0, .74)] - The grid header expand all group rows icon hover color. -/// @param {Color} $expand-icon-color [rgba(0, 0, 0, .54)] - The grid row expand icon color. -/// @param {Color} $expand-icon-hover-color [primary 500] - The grid row expand icon hover color. -/// @param {Color} $group-count-background [rgba(0, 0, 0, .08)] - The grid group row cont badge background color. -/// @param {Color} $group-count-text-color [rgba(0, 0, 0, .54)] - The grid group row cont badge text color. -/// @param {Color} $drop-area-text-color [rgba(0, 0, 0, .54)] - The drop area text color. -/// @param {Color} $drop-area-icon-color [rgba(0, 0, 0, .38)] - The drop area icon color. -/// @param {Color} $drop-area-background [rgba(0, 0, 0, .04)] - The drop area background color. -/// @param {Color} $drop-area-on-drop-background [rgba(0, 0, 0, .08)] - The drop area background on drop color. -/// @param {Color} $tree-filtered-text-color [rgba(0, 0, 0, .04)] - grouping row background color on focus. +/// @param {Color} $group-row-background [null] - The grid group row background color. +/// @param {Color} $group-row-selected-background [null] - The drop area background on drop color. +/// @param {Color} $active-expand-icon-color [null] - The drop area background on drop color. +/// @param {Color} $active-expand-icon-hover-color [null] - The drop area background on drop color. +/// @param {Color} $group-label-column-name-text [null] - The grid group row column name text color. +/// @param {Color} $group-label-icon [null] - The grid group row icon color. +/// @param {Color} $group-label-text [null] - The grid group row text color. /// -/// @param {Color} $filtering-header-background [#fff] - The background color of the filtered column header. -/// @param {Color} $filtering-header-text-color [rgba(0, 0, 0, .74)] - The text color color of the filtered column header. -/// @param {Color} $filtering-row-background [#fff] - The background color of the filtering row. -/// @param {Color} $filtering-row-text-color [rgba(0, 0, 0, .74)] - The text-color color of the filtering row. +/// @param {Color} $expand-all-icon-color [null] - The grid header expand all group rows icon color. +/// @param {Color} $expand-all-icon-hover-color [null] - The grid header expand all group rows icon hover color. +/// @param {Color} $expand-icon-color [null] - The grid row expand icon color. +/// @param {Color} $expand-icon-hover-color [null] - The grid row expand icon hover color. +/// @param {Color} $group-count-background [null] - The grid group row cont badge background color. +/// @param {Color} $group-count-text-color [null] - The grid group row cont badge text color. +/// @param {Color} $drop-area-text-color [null] - The drop area text color. +/// @param {Color} $drop-area-icon-color [null] - The drop area icon color. +/// @param {Color} $drop-area-background [null] - The drop area background color. +/// @param {Color} $drop-area-on-drop-background [null] - The drop area background on drop color. +/// @param {Color} $tree-filtered-text-color [null] - grouping row background color on focus. /// -/// @requires igx-color -/// @requires igx-contrast-color +/// @param {Color} $filtering-header-background [null] - The background color of the filtered column header. +/// @param {Color} $filtering-header-text-color [null] - The text color color of the filtered column header. +/// @param {Color} $filtering-row-background [null] - The background color of the filtering row. +/// @param {Color} $filtering-row-text-color [null] - The text-color color of the filtering row. +/// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette +/// @requires luminance /// @requires text-contrast /// @requires hexrgba /// @requires extend @@ -137,7 +141,8 @@ $filtering-row-text-color: null, $tree-filtered-text-color: null ) { - $theme: apply-palette(map-get($schema, 'igx-grid'), $palette); + $name: 'igx-grid'; + $theme: apply-palette(map-get($schema, $name), $palette); $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); @@ -279,6 +284,7 @@ } @return extend($theme, ( + name: $name, palette: $palette, header-background: $header-background, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss index 02077e633d3..f92755fb900 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss @@ -6,13 +6,16 @@ //// /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. -/// @param {Color} $color [currentColor] - The icon color. -/// @param {String} $size [24px] - The icon size. -/// @param {Color} $disabled-color [rgba(0, 0, 0, .38)] - The disabled icon color. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. /// -/// @requires igx-color +/// @param {Color} $color [null] - The icon color. +/// @param {String} $size [null] - The icon size. +/// @param {Color} $disabled-color [null] - The disabled icon color. +/// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires extend -/// @requires rem /// /// @example scss Change the icon color /// $my-icon-theme: igx-icon-theme($color: orange); @@ -26,9 +29,11 @@ $size: null, $disabled-color: null ) { - $theme: apply-palette(map-get($schema, 'igx-icon'), $palette); + $name: 'igx-icon'; + $theme: apply-palette(map-get($schema, $name), $palette); @return extend($theme, ( + name: $name, palette: $palette, color: $color, size: $size, @@ -38,7 +43,6 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-root-css-vars -/// @requires rem /// @requires --var @mixin igx-icon($theme) { @include igx-root-css-vars($theme); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss index 7c5eb373c6b..fd11acafb06 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss @@ -5,41 +5,44 @@ //// /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. -/// @param {Color} $idle-text-color [rgba(0, 0, 0, .54)] - The input text color in the idle state. -/// @param {Color} $filled-text-color [rgba(0, 0, 0, .87)] - The input text color in the filled state. -/// @param {Color} $focused-text-color [rgba(0, 0, 0, .87)] - The input text color in the focused state. -/// @param {Color} $disabled-text-color [rgba(0, 0, 0, .38)] - The input text color in the disabled state. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. /// -/// @param {Color} $idle-secondary-color [rgba(0, 0, 0, .54)] - The label color in the idle state. -/// @param {Color} $filled-secondary-color [rgba(0, 0, 0, .54] - The label color in the filled state. -/// @param {Color} $focused-secondary-color [primary 500] - The label color in the focused state. +/// @param {Color} $idle-text-color [null] - The input text color in the idle state. +/// @param {Color} $filled-text-color [null] - The input text color in the filled state. +/// @param {Color} $focused-text-color [null] - The input text color in the focused state. +/// @param {Color} $disabled-text-color [null] - The input text color in the disabled state. /// -/// @param {Color} $idle-bottom-line-color [rgba(0, 0, 0, .54)] - The bottom line and border colors in the idle state. -/// @param {Color} $hover-bottom-line-color [rgba(0, 0, 0, .87)] - The bottom line and border colors in the hover state. -/// @param {Color} $focused-bottom-line-color [primary 500] - The bottom line and border colors in the focused state. -/// @param {Color} $interim-bottom-line-color [12% of primary 500] - The bottom line and border colors during the to-focused transition. -/// @param {Color} $disabled-bottom-line-color [rgba(0, 0, 0, .42)] - The bottom line and border colors in the disabled state. -/// @param {Color} $disabled-border-color [6% of rgba(0, 0, 0, .38)] - The disabled border color for input groups of type border. +/// @param {Color} $idle-secondary-color [null] - The label color in the idle state. +/// @param {Color} $filled-secondary-color [null] - The label color in the filled state. +/// @param {Color} $focused-secondary-color [null] - The label color in the focused state. /// -/// @param {Color} $box-background [rgba(0, 0, 0, .06)] - The background color of an input group of type box. -/// @param {Color} $box-disabled-background [rgba(0, 0, 0, .03)] - The background color of an input group of type box in the disabled state. +/// @param {Color} $idle-bottom-line-color [null] - The bottom line and border colors in the idle state. +/// @param {Color} $hover-bottom-line-color [null] - The bottom line and border colors in the hover state. +/// @param {Color} $focused-bottom-line-color [null] - The bottom line and border colors in the focused state. +/// @param {Color} $interim-bottom-line-color [null] - The bottom line and border colors during the to-focused transition. +/// @param {Color} $disabled-bottom-line-color [null] - The bottom line and border colors in the disabled state. +/// @param {Color} $disabled-border-color [null] - The disabled border color for input groups of type border. /// -/// @param {Color} $border-background [transparent] - The background color of an input group of type border. -/// @param {Color} $border-disabled-background [rgba(0, 0, 0, .03)] - The background color of an input group of type border in the disabled state. +/// @param {Color} $box-background [null] - The background color of an input group of type box. +/// @param {Color} $box-disabled-background [null] - The background color of an input group of type box in the disabled state. /// -/// @param {Color} $search-background [white] - The background color of an input group of type search. -/// @param {Color} $search-disabled-background [white] - The background color of an input group of type search in the disabled state. -/// @param {Color} $search-shadow-color [rgba(0, 0, 0, .54)] - The shadow color of an input group of type search. -/// @param {Color} $search-disabled-shadow-color [rgba(0, 0, 0, .12)] - The shadow color of an input group of type search in the disabled state. +/// @param {Color} $border-background [null] - The background color of an input group of type border. +/// @param {Color} $border-disabled-background [null] - The background color of an input group of type border in the disabled state. /// -/// @param {Color} $success-secondary-color [igx-color($palette, 'success')] - The success color used in the valid state. -/// @param {Color} $warning-secondary-color [igx-color($palette, 'warn')] - The warning color used in the warning state. -/// @param {Color} $error-secondary-color [igx-color($palette, 'error)] - The error color used in the error state. +/// @param {Color} $search-background [null] - The background color of an input group of type search. +/// @param {Color} $search-disabled-background [null] - The background color of an input group of type search in the disabled state. +/// @param {Color} $search-shadow-color [null] - The shadow color of an input group of type search. +/// @param {Color} $search-disabled-shadow-color [null] - The shadow color of an input group of type search in the disabled state. /// -/// @param {String} $variant ['dark'] - Can be either 'dark' or 'light'. Use 'light' when the input is used on dark backgrounds. +/// @param {Color} $success-secondary-color [null] - The success color used in the valid state. +/// @param {Color} $warning-secondary-color [null] - The warning color used in the warning state. +/// @param {Color} $error-secondary-color [null] - The error color used in the error state. /// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires extend -/// @requires igx-color +/// @requires text-contrast /// /// @example scss Change the focused border and label colors /// $my-input-group-theme: igx-input-group-theme($focused-secondary-color: pink, $focused-bottom-line-color: pink); @@ -60,7 +63,6 @@ $idle-bottom-line-color: null, $hover-bottom-line-color: null, - $filled-bottom-line-color: null, $focused-bottom-line-color: null, $interim-bottom-line-color: null, $disabled-bottom-line-color: null, @@ -81,95 +83,14 @@ $error-secondary-color: null, $placeholder-color: null, - $disabled-placeholder-color: null, - - $variant: 'dark' + $disabled-placeholder-color: null ) { $name: 'igx-input-group'; - - // $dark-theme: ( - // name: $name, - - // idle-text-color: igx-color($palette, 'grays', 600), - // filled-text-color: igx-color($palette, 'grays', 900), - // focused-text-color: igx-color($palette, 'grays', 900), - // disabled-text-color: igx-color($palette, 'grays', 500), - - // idle-secondary-color: igx-color($palette, 'grays', 600), - // filled-secondary-color: igx-color($palette, 'grays', 600), - // focused-secondary-color: igx-color($palette, 'primary'), - - // idle-bottom-line-color: igx-color($palette, 'grays', 600), - // hover-bottom-line-color: igx-color($palette, 'grays', 900), - // filled-bottom-line-color: igx-color($palette, 'grays', 600), - // focused-bottom-line-color: igx-color($palette, 'primary'), - // interim-bottom-line-color: rgba(igx-color($palette, 'primary'), .12), - // disabled-bottom-line-color: rgba(0, 0, 0, .42), - // disabled-border-color: rgba(igx-color($palette, 'grays', 500), .06), - - // box-background: rgba(0, 0, 0, .06), - // box-disabled-background: rgba(0, 0, 0, .03), - - // border-background: transparent, - // border-disabled-background: rgba(0, 0, 0, .03), - - // search-background: white, - // search-disabled-background: white, - // search-shadow-color: igx-color($palette, 'grays', 600), - // search-disabled-shadow-color: igx-color($palette, 'grays', 300), - - // success-secondary-color: igx-color($palette, 'success'), - // warning-secondary-color: igx-color($palette, 'warn'), - // error-secondary-color: igx-color($palette, 'error'), - // placeholder-color: igx-color($palette, 'grays', 500), - // disabled-placeholder-color: igx-color($palette, 'grays', 400) - // ); - - $light-theme: ( - name: $name, - - idle-text-color: white, - filled-text-color: white, - focused-text-color: white, - disabled-text-color: rgba(255, 255, 255, .5), - - idle-secondary-color: rgba(255, 255, 255, .7), - filled-secondary-color: rgba(255, 255, 255, .7), - focused-secondary-color: igx-color($palette, 'primary'), - - idle-bottom-line-color: rgba(255, 255, 255, .7), - hover-bottom-line-color: white, - filled-bottom-line-color: rgba(255, 255, 255, .7), - focused-bottom-line-color: igx-color($palette, 'primary'), - interim-bottom-line-color: rgba(igx-color($palette, 'primary'), .12), - disabled-bottom-line-color: rgba(255, 255, 255, .7), - disabled-border-color: rgba(rgba(255, 255, 255, .5), .06), - - box-background: rgba(255, 255, 255, .1), - box-disabled-background: rgba(255, 255, 255, .06), - - border-background: transparent, - border-disabled-background: rgba(255, 255, 255, .06), - - search-background: rgba(255, 255, 255, .1), - search-disabled-background: rgba(255, 255, 255, .06), - search-shadow-color: igx-color($palette, 'grays', 600), - search-disabled-shadow-color: igx-color($palette, 'grays', 300), - - success-secondary-color: igx-color($palette, 'success'), - warning-secondary-color: igx-color($palette, 'warn'), - error-secondary-color: igx-color($palette, 'error'), - placeholder-color: #999, - disabled-placeholder-color: #777 - ); - - $theme: map-get(( - dark: apply-palette(map-get($schema, 'igx-input-group'), $palette), - light: $light-theme - ), $variant); + $theme: apply-palette(map-get($schema, $name), $palette); @return extend($theme, ( palette: $palette, + name: $name, idle-text-color: $idle-text-color, filled-text-color: $filled-text-color, @@ -182,7 +103,6 @@ idle-bottom-line-color: $idle-bottom-line-color, hover-bottom-line-color: $hover-bottom-line-color, - filled-bottom-line-color: $filled-bottom-line-color, focused-bottom-line-color: $focused-bottom-line-color, interim-bottom-line-color: $interim-bottom-line-color, disabled-bottom-line-color: $disabled-bottom-line-color, @@ -204,8 +124,6 @@ error-secondary-color: $error-secondary-color, placeholder-color: $placeholder-color, disabled-placeholder-color: $disabled-placeholder-color, - - variant: $variant )); @if not($placeholder-color) and $box-background { @@ -221,10 +139,9 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-root-css-vars -/// @requires igx-color /// @requires igx-elevation /// @requires $elevations -/// @requires em +/// @requires rem /// @requires {mixin} ellipsis /// @requires --var @mixin igx-input-group($theme) { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss index 1c0254756e2..636fd95a3f5 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss @@ -6,13 +6,20 @@ //// /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. -/// @param {Color} $background [#fff] - The list background color. -/// @param {Color} $header-background [#fff] - The list header background color. -/// @param {Color} $header-text-color [secondary 500] - The list header text color. -/// @param {Color} $item-background [#fff] - The list item background color. -/// @param {Color} $item-text-color [rgba(0, 0, 0, .74)] - The list item text color. -/// @param {Color} $item-background-active [rgba(0, 0, 0, .04)] - The active list item background color. -/// @param {Color} $item-text-color-active [rgba(0, 0, 0, .74)] - The active list item text color. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// +/// @param {Color} $background [null] - The list background color. +/// @param {Color} $header-background [null] - The list header background color. +/// @param {Color} $header-text-color [null] - The list header text color. +/// @param {Color} $item-background [null] - The list item background color. +/// @param {Color} $item-text-color [null] - The list item text color. +/// @param {Color} $item-background-active [null] - The active list item background color. +/// @param {Color} $item-text-color-active [null] - The active list item text color. +/// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette +/// @requires extend /// @requires text-contrast /// /// @example scss Change the list background color @@ -31,7 +38,8 @@ $item-background-active: null, $item-text-color-active: null ) { - $theme: apply-palette(map-get($schema, 'igx-list'), $palette); + $name: 'igx-list'; + $theme: apply-palette(map-get($schema, $name), $palette); @if not($header-background) and $background { $header-background: $background; @@ -62,6 +70,7 @@ } @return extend($theme, ( + name: $name, palette: $palette, background: $background, header-background: $header-background, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss index dfdd75106f7..e08a2b88c6e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss @@ -5,14 +5,18 @@ /// @author Marin Popov //// -/// Navbar Theme /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. -/// @param {Color} $background [primary 500] - The navbar background color. -/// @param {Color} $text-color [#fff] - The navbar text color. -/// @param {Color} $idle-icon-color [#fff] - The navbar idle icon color. -/// @param {Color} $hover-icon-color [#fff] - The navbar hover icon color. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// +/// @param {Color} $background [null] - The navbar background color. +/// @param {Color} $text-color [null] - The navbar text color. +/// @param {Color} $idle-icon-color [null] - The navbar idle icon color. +/// @param {Color} $hover-icon-color [null] - The navbar hover icon color. /// @param {Bool} $disable-shadow [true] - Sets the navbar shadow visibility. /// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires extend /// @requires text-contrast /// @requires igx-elevations @@ -34,7 +38,8 @@ ) { $nav-shadow: if($disable-shadow == false, igx-elevation($elevations, 4), none); - $theme: apply-palette(map-get($schema, 'igx-navbar'), $palette); + $name: 'igx-navbar'; + $theme: apply-palette(map-get($schema, $name), $palette); @if not($text-color) and $background { $text-color: text-contrast($background); @@ -49,6 +54,7 @@ } @return extend($theme, ( + name: $name, palette: $palette, background: $background, text-color: $text-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss index 577d3e90ed7..4ad9fbe978c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss @@ -6,20 +6,24 @@ //// /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. -/// @param {Color} $background [#fff] - The navigation drawer background color. -/// @param {Color} $border-color [rgba(0, 0, 0, .14)] - The navigation drawer right border color. -/// @param {Color} $item-header-text-color [rgba(0, 0, 0, .54)] - The header's idle text color. -/// @param {Color} $item-text-color [rgba(0, 0, 0, .62)] - The item's idle text color. -/// @param {Color} $item-icon-color [rgba(0, 0, 0, .62)] - The item's icon color. -/// @param {Color} $item-active-text-color [rgba(0, 0, 0, .38)] - The item's active text color. -/// @param {Color} $item-active-background [rgba(0, 0, 0, .04)] - The item's active background color. -/// @param {Color} $item-active-icon-color [rgba(0, 0, 0, .38)] - The item's icon active color. -/// @param {Color} $item-hover-background [rgba(0, 0, 0, .08)] - The item's hover background color. -/// @param {Color} $item-hover-text-color [rgba(0, 0, 0, .74)] - The item's hover text color. -/// @param {Color} $item-hover-icon-color [rgba(0, 0, 0, .74)] - The item's hover icon color. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. /// +/// @param {Color} $background [null] - The navigation drawer background color. +/// @param {Color} $border-color [null] - The navigation drawer right border color. +/// @param {Color} $item-header-text-color [null] - The header's idle text color. +/// @param {Color} $item-text-color [null] - The item's idle text color. +/// @param {Color} $item-icon-color [null] - The item's icon color. +/// @param {Color} $item-active-text-color [null] - The item's active text color. +/// @param {Color} $item-active-background [null] - The item's active background color. +/// @param {Color} $item-active-icon-color [null] - The item's icon active color. +/// @param {Color} $item-hover-background [null] - The item's hover background color. +/// @param {Color} $item-hover-text-color [null] - The item's hover text color. +/// @param {Color} $item-hover-icon-color [null] - The item's hover icon color. +/// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires extend -/// @requires igx-color /// @requires text-contrast /// /// @example scss Change the background and item colors @@ -49,7 +53,8 @@ $item-hover-text-color: null, $item-hover-icon-color: null ) { - $theme: apply-palette(map-get($schema, 'igx-navdrawer'), $palette); + $name: 'igx-navdrawer'; + $theme: apply-palette(map-get($schema, $name), $palette); @if not($item-header-text-color) and $background { $item-header-text-color: text-contrast($background); @@ -84,6 +89,7 @@ } @return extend($theme, ( + name: $name, palette: $palette, background: $background, border-color: $border-color, @@ -101,7 +107,6 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-root-css-vars -/// @requires igx-color /// @requires igx-elevation /// @requires $elevations /// @requires $overlay-color diff --git a/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss index 9eed4f636ea..8a1978bb310 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss @@ -5,10 +5,14 @@ /// @author Marin Popov //// +/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. /// -/// @param {Color} $background-color [$overlay-color] - The background color used for modal overlays. +/// @param {Color} $background-color [null] - The background color used for modal overlays. /// -/// @requires $overlay-color +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// /// @example scss Change the background color /// $my-overlay-theme: igx-overlay-theme($background-color: rgba(yellow, .74)); @@ -20,9 +24,11 @@ $schema: $light-schema, $background-color: null ) { - $theme: apply-palette(map-get($schema, 'igx-overlay'), $palette); + $name: 'igx-overlay'; + $theme: apply-palette(map-get($schema, $name), $palette); @return extend($theme, ( + name: $name, palette: $palette, background-color: $background-color )); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss index 1f9c41a837a..368b72ebe93 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss @@ -6,17 +6,21 @@ //// /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. -/// @param {Color} $track-color [rgba(0, 0, 0, .12)] - The main track color. -/// @param {Color} $fill-color-default [primary 500] - The track default fill color. -/// @param {Color} $fill-color-danger [error 500] - The track danger fill color. -/// @param {Color} $fill-color-warning [warn 500] - The track warning fill color. -/// @param {Color} $fill-color-info [info 500] - The track info fill color. -/// @param {Color} $fill-color-success [success 500] - The track success fill color. -/// @param {Color} $stripes-color [rgba(255, 255, 255, .7)] - The track stripes color. -/// @param {Color} $text-color [rgba(0, 0, 0, .62)] - The track value text color. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. /// +/// @param {Color} $track-color [null] - The main track color. +/// @param {Color} $fill-color-default [null] - The track default fill color. +/// @param {Color} $fill-color-danger [null] - The track danger fill color. +/// @param {Color} $fill-color-warning [null] - The track warning fill color. +/// @param {Color} $fill-color-info [null] - The track info fill color. +/// @param {Color} $fill-color-success [null] - The track success fill color. +/// @param {Color} $stripes-color [null] - The track stripes color. +/// @param {Color} $text-color [null] - The track value text color. +/// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires extend -/// @requires igx-color /// /// @example scss Change the stripes color /// $my-progress-linear-theme: igx-progress-linear-theme( @@ -37,9 +41,11 @@ $stripes-color: null, $text-color: null ) { - $theme: apply-palette(map-get($schema, 'igx-progress-linear'), $palette); + $name: 'igx-progress-linear'; + $theme: apply-palette(map-get($schema, $name), $palette); @return extend($theme, ( + name: $name, palette: $palette, track-color: $track-color, fill-color-default: $fill-color-default, @@ -160,12 +166,16 @@ } /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. -/// @param {Color} $base-circle-color [rgba(0, 0, 0, .12)] - The base circle fill color. -/// @param {Color} $progress-circle-color [primary 500] - The progress circle fill color. -/// @param {Color} $text-color [rgba(0, 0, 0, .62)] - The value text color. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// +/// @param {Color} $base-circle-color [null] - The base circle fill color. +/// @param {Color} $progress-circle-color [null] - The progress circle fill color. +/// @param {Color} $text-color [null] - The value text color. /// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires extend -/// @requires igx-color /// /// @example scss Change the circle progress color /// $my-progress-circular-theme: igx-progress-circular-theme( @@ -181,9 +191,11 @@ $progress-circle-color: null, $text-color: null ) { - $theme: apply-palette(map-get($schema, 'igx-progress-circular'), $palette); + $name: 'igx-progress-circular'; + $theme: apply-palette(map-get($schema, $name), $palette); @return extend($theme, ( + name: $name, palette: $palette, base-circle-color: $base-circle-color, progress-circle-color: $progress-circle-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss index 3741e4bb87a..65e1e23106b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss @@ -9,14 +9,17 @@ //// /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. -/// @param {Color} $label-color [rgba(0, 0, 0, .87)]- The text color used for the label text. -/// @param {Color} $empty-color [rgba(0, 0, 0, .62)] - The unchecked border color. -/// @param {Color} $fill-color [secondary 500] - The checked border and dot colors. -/// @param {Color} $disabled-color [rgba(0, 0, 0, .26)] - The disabled border and dot colors. -/// @param {String} $variant ['dark'] - Determines the default color scheme - could be 'light' or 'dark'. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. /// +/// @param {Color} $label-color [null]- The text color used for the label text. +/// @param {Color} $empty-color [null] - The unchecked border color. +/// @param {Color} $fill-color [null] - The checked border and dot colors. +/// @param {Color} $disabled-color [null] - The disabled border and dot colors. +/// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires extend -/// @requires igx-color /// /// Set light to true when the surrounding area is dark. /// @example scss Change the checked dot and border colors @@ -30,34 +33,19 @@ $label-color: null, $empty-color: null, $fill-color: null, - $disabled-color: null, + $disabled-color: null - $variant: 'dark' ) { $name: 'igx-radio'; - - $dark-theme: apply-palette(map-get($schema, 'igx-radio'), $palette); - - $light-theme: ( - name: $name, - label-color: #fff, - empty-color: rgba(255, 255, 255, .7), - fill-color: igx-color($palette, 'secondary', 500), - disabled-color: rgba(255, 255, 255, .3) - ); - - $theme: map-get(( - dark: $dark-theme, - light: $light-theme - ), $variant); + $theme: apply-palette(map-get($schema, $name), $palette); @return extend($theme, ( + name: $name, palette: $palette, label-color: $label-color, empty-color: $empty-color, fill-color: $fill-color, disabled-color: $disabled-color, - variant: $variant )); } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-theme.scss index 9fb4ff9bada..fbc5ca13742 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-theme.scss @@ -6,10 +6,14 @@ //// /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. -/// @param {Color} $color [rgba(0, 0, 0, .74)] - The color of the ripple. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. /// +/// @param {Color} $color [null] - The color of the ripple. +/// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires extend -/// @requires igx-color /// /// @example scss Change the color /// $my-ripple-theme: igx-ripple-theme($color: yellow); @@ -20,9 +24,11 @@ $schema: $light-schema, $color: null ) { - $theme: apply-palette(map-get($schema, 'igx-ripple'), $palette); + $name: 'igx-ripple'; + $theme: apply-palette(map-get($schema, $name), $palette); @return extend($theme, ( + name: $name, palette: $palette, color: $color )); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss index ea6606bef83..3cc8799dcf6 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss @@ -6,22 +6,27 @@ //// /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. -/// @param {Color} $track-color [secondary 500] - The color of the track. -/// @param {Color} $thumb-color [secondary 500] - The color of the thumb. -/// @param {Color} $label-background-color [secondary 500] - The background color of the bubble label. -/// @param {Color} $label-text-color [igx-contrast-color of secondary 500] - The text color of the bubble label. -/// @param {Bool} $variant ['dark'] - Determines the default color scheme - can be 'light' or 'dark'. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. /// +/// @param {Color} $track-color [null] - The color of the track. +/// @param {Color} $thumb-color [null] - The color of the thumb. +/// @param {Color} $label-background-color [null] - The background color of the bubble label. +/// @param {Color} $label-text-color [null] - The text color of the bubble label. +/// +/// @param {Color} $disabled-thumb-color [null] - The thumb color when its disabled. +/// @param {Color} $base-track-color [null] - The base background color of the track. +/// @param {Color} $disabled-base-track-color [null] - The base background color of the track when is disabled. +/// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires extend -/// @requires igx-color /// @requires text-contrast -/// @requires hexrgba /// -/// Set light to true when the surrounding area is dark. /// @example scss Set custom track and thumb on colors -/// $my-switch-theme: igx-toast-theme($thumb-on-color: black, $track-on-color: yellow); -/// // Pass the theme to the igx-bottom-nav component mixin -/// @include igx-switch($my-switch-theme); +/// $my-slider-theme: igx-slider-theme($thumb-on-color: black, $track-on-color: yellow); +/// // Pass the theme to the igx-slider component mixin +/// @include igx-slider($my-slider-theme); @function igx-slider-theme( $palette: $default-palette, $schema: $light-schema, @@ -32,41 +37,28 @@ $label-background-color: null, $label-text-color: null, - $variant: 'dark' + $disabled-thumb-color: null, + $base-track-color: null, + $disabled-base-track-color: null + ) { $name: 'igx-slider'; - - $dark-theme: apply-palette(map-get($schema, 'igx-slider'), $palette); - - $light-theme: ( - name: $name, - track-color: igx-color($palette, 'secondary'), - - thumb-color: igx-color($palette, 'secondary'), - disabled-thumb-color: rgba(#fff, .3), - - label-background-color: igx-color($palette, 'secondary'), - - base-track-color: rgba(#fff, .3), - disabled-base-track-color: rgba(#fff, .3) - ); - - $theme: map-get(( - dark: $dark-theme, - light: $light-theme - ), $variant); + $theme: apply-palette(map-get($schema, $name), $palette); @if not($label-text-color) and $label-background-color { $label-text-color: text-contrast($label-background-color); } @return extend($theme, ( + name: $name, palette: $palette, track-color: $track-color, thumb-color: $thumb-color, label-background-color: $label-background-color, label-text-color: $label-text-color, - variant: $variant + disabled-thumb-color: $disabled-thumb-color, + base-track-color: $base-track-color, + disabled-base-track-color: $disabled-base-track-color )); } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss index dc72dbb3275..02d57d37f75 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss @@ -7,16 +7,19 @@ /// If you specify a background color, but do not specify colors for either the /// button or the text, their colors will be set automatically to a contrasting color. +/// /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. -/// @param {Color} $background [#323232] - The background color used in the snackbar. -/// @param {Color} $text-color [#fff] - The text color used in the snackbar. -/// @param {Color} $button-color [secondary 500] - The button color used in the snackbar. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// +/// @param {Color} $background [null] - The background color used in the snackbar. +/// @param {Color} $text-color [null] - The text color used in the snackbar. +/// @param {Color} $button-color [null] - The button color used in the snackbar. /// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires extend /// @requires text-contrast -/// @requires igx-color -/// -/// @todo Add light option /// /// @example scss Set a custom background color /// $my-snackbar-theme: igx-snackbar-theme($background: white); @@ -30,7 +33,8 @@ $text-color: null, $button-color: null ) { - $theme: apply-palette(map-get($schema, 'igx-snackbar'), $palette); + $name: 'igx-snackbar'; + $theme: apply-palette(map-get($schema, $name), $palette); @if not($button-color) and $background { $button-color: text-contrast($background); @@ -41,6 +45,7 @@ } @return extend($theme, ( + name: $name, palette: $palette, background: $background, text-color: $text-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss index 0d6ed88efb7..2416452b668 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss @@ -9,19 +9,22 @@ //// /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. -/// @param {Color} $thumb-on-color [secondary 500] - The color of the thumb when the switch is on. -/// @param {Color} $track-on-color [50% of secondary 500] - The color of the track when the switch is on. -/// @param {Color} $thumb-off-color [#fafafa] - The color of the thumb when the switch is off. -/// @param {Color} $track-off-color [rgba(0, 0, 0, .5)] - The color of the track when the switch is off. -/// @param {Color} $thumb-disabled-color [rgba(0, 0, 0, .26)] - The color of the thumb when the switch is disabled. -/// @param {Color} $track-disabled-color [rgba(0, 0, 0, .12)] - The color of the track when the switch is disabled. -/// @param {String} $variant ['dark'] - Determines the default color scheme - could be 'light' or 'dark'. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. /// +/// @param {Color} $thumb-on-color [null] - The color of the thumb when the switch is on. +/// @param {Color} $track-on-color [null] - The color of the track when the switch is on. +/// @param {Color} $thumb-off-color [null] - The color of the thumb when the switch is off. +/// @param {Color} $track-off-color [null] - The color of the track when the switch is off. +/// @param {Color} $thumb-disabled-color [null] - The color of the thumb when the switch is disabled. +/// @param {Color} $track-disabled-color [null] - The color of the track when the switch is disabled. +/// @param {Color} $label-color [null] - The color of the switch label +/// @param {Color} $label-disabled-color [null] - The color of the switch label when the switch is disabled +/// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires extend -/// @requires igx-color -/// @requires hexrgba /// -/// Set light to true when the surrounding area is dark. /// @example scss Set custom track and thumb on colors /// $my-switch-theme: igx-toast-theme($thumb-on-color: black, $track-on-color: yellow); /// // Pass the theme to the igx-bottom-nav component mixin @@ -40,36 +43,13 @@ $thumb-disabled-color: null, $label-color: null, - $label-disabled-color: null, - - $variant: 'dark' + $label-disabled-color: null ) { $name: 'igx-switch'; - - $dark-theme: apply-palette(map-get($schema, 'igx-switch'), $palette); - - $light-theme: ( - name: $name, - - thumb-on-color: igx-color($palette, 'secondary', 500), - track-on-color: rgba(igx-color($palette, 'secondary', 500), .5), - - thumb-off-color: #bdbdbd, - track-off-color: rgba(255, 255, 255, .3), - - label-color: #fff, - label-disabled-color: rgba(255, 255, 255, .3), - - track-disabled-color: #424242, - thumb-disabled-color: #6c6c6c - ); - - $theme: map-get(( - dark: $dark-theme, - light: $light-theme - ), $variant); + $theme: apply-palette(map-get($schema, $name), $palette); @return extend($theme, ( + name: $name, palette: $palette, thumb-on-color: $thumb-on-color, @@ -83,8 +63,6 @@ label-color: $label-color, label-disabled-color: $label-disabled-color, - - variant: $variant )); } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss index dde874fe443..217c4ba1462 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss @@ -6,27 +6,32 @@ /// If only background color is specified, /// the idle item color will be assigned automatically to a contrasting color. +/// /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. -/// @param {Color} $item-text-color [rgba(0, 0, 0, .62)] - The color used for the tab text color. -/// @param {Color} $item-background [#fff] - The background color used for the tabs header. -/// @param {Color} $item-hover-background [rgba(0, 0, 0, .08)] - The background used for the tabs on hover. -/// @param {Color} $item-hover-color [rgba(0, 0, 0, .62)] - The text color used for the tabs on hover. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// +/// @param {Color} $item-text-color [null] - The color used for the tab text color. +/// @param {Color} $item-background [null] - The background color used for the tabs header. +/// @param {Color} $item-hover-background [null] - The background used for the tabs on hover. +/// @param {Color} $item-hover-color [null] - The text color used for the tabs on hover. /// -/// @param {Color} $item-active-color [rgba(0, 0, 0, .74)] - The color used for the active tabs text. -/// @param {Color} $item-active-icon-color [rgba(0, 0, 0, .38)] - The color used for the active tabs icon. -/// @param {Color} $item-active-background [rgba(0, 0, 0, .08)] - The color used for the active/focused tab background. +/// @param {Color} $item-active-color [null] - The color used for the active tabs text. +/// @param {Color} $item-active-icon-color [null] - The color used for the active tabs icon. +/// @param {Color} $item-active-background [null] - The color used for the active/focused tab background. /// -/// @param {Color} $indicator-color [primary 500] - The color used for the active tab indicator. -/// @param {Color} $button-color [rgba(0, 0, 0, .38)] - The color used for the button icon/text color. -/// @param {Color} $button-hover-color [rgba(0, 0, 0, .54)] - The color used for the button icon/text color on hover. -/// @param {Color} $button-background [#fff] - The color used for the button background. -/// @param {Color} $button-hover-background [rgba(0, 0, 0, .04)] - The color used for the button background on hover. +/// @param {Color} $indicator-color [null] - The color used for the active tab indicator. +/// @param {Color} $button-color [null] - The color used for the button icon/text color. +/// @param {Color} $button-hover-color [null] - The color used for the button icon/text color on hover. +/// @param {Color} $button-background [null] - The color used for the button background. +/// @param {Color} $button-hover-background [null] - The color used for the button background on hover. /// -/// @param {Color} $tab-ripple-color [rgba(0, 0, 0, .04)] - The color used for the button background. -/// @param {Color} $button-ripple-color [rgba(0, 0, 0, 0.04)] - The color used for the button background on hover. +/// @param {Color} $tab-ripple-color [null] - The color used for the button background. +/// @param {Color} $button-ripple-color [null] - The color used for the button background on hover. /// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires extend -/// @requires igx-color /// @requires text-contrast /// /// @example scss Set a custom background color @@ -59,7 +64,8 @@ $tab-ripple-color: null, $button-ripple-color: null ) { - $theme: apply-palette(map-get($schema, 'igx-tabs'), $palette); + $name: 'igx-tabs'; + $theme: apply-palette(map-get($schema, $name), $palette); @if not($item-text-color) and $item-background { $item-text-color: text-contrast($item-background); @@ -102,6 +108,7 @@ } @return extend($theme, ( + name: $name, palette: $palette, item-text-color: $item-text-color, item-background: $item-background, @@ -126,7 +133,6 @@ /// @requires {mixin} ellipsis /// @requires igx-ripple-theme /// @requires {mixin} igx-ripple -/// @requires igx-color /// @requires igx-elevation /// @requires $elevations /// @requires rem diff --git a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss index 3f77e1df3c0..dacd15c91f2 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss @@ -9,19 +9,22 @@ /// Does ___not___ apply for disabled state colors. /// /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. -/// @param {Color} $text-color [rgba(0, 0, 0, .38)] - The text color of a open time picker. -/// @param {Color} $hover-text-color [secondary 500] - The hover text color of a open time picker. -/// @param {Color} $selected-text-color [secondary 500] - The text color of a selected item in time picker. -/// @param {Color} $active-item-background [rgba(0, 0, 0, .04)] - The background color for current item in focused column inside the time picker. -/// @param {Color} $header-background [secondary 500] - The header background color of a time picker. -/// @param {Color} $header-hour-text-color [igx-contrast-color of secondary 500] - The header hour text color of a time picker. -/// @param {Color} $header-time-period-color [80% of igx-contrast-color of secondary 500] - The header AM/PM text color of a time picker. -/// @param {Color} $background-color [white] - The time-picker panel background color. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. /// -/// @requires extend +/// @param {Color} $text-color [null] - The text color of a open time picker. +/// @param {Color} $hover-text-color [null] - The hover text color of a open time picker. +/// @param {Color} $selected-text-color [null] - The text color of a selected item in time picker. +/// @param {Color} $active-item-background [null] - The background color for current item in focused column inside the time picker. +/// @param {Color} $header-background [null] - The header background color of a time picker. +/// @param {Color} $header-hour-text-color [null] - The header hour text color of a time picker. +/// @param {Color} $header-time-period-color [null] - The header AM/PM text color of a time picker. +/// @param {Color} $background-color [null] - The time-picker panel background color. +/// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires text-contrast -/// @requires igx-color -/// @requires igx-contrast-color +/// @requires extend /// /// @example scss Change the background and text colors in time picker /// $my-time-picker-theme: igx-time-picker-theme( @@ -29,7 +32,7 @@ /// $background-color: black /// ); /// // Pass the theme to the igx-time-picker component mixin -/// @include igx-time-picker($my-button-theme); +/// @include igx-time-picker($my-time-picker-theme); @function igx-time-picker-theme( $palette: $default-palette, $schema: $light-schema, @@ -43,7 +46,8 @@ $header-time-period-color: null, $background-color: null ) { - $theme: apply-palette(map-get($schema, 'igx-time-picker'), $palette); + $name: 'igx-time-picker'; + $theme: apply-palette(map-get($schema, $name), $palette); @if not($text-color) and $background-color { $text-color: text-contrast($background-color); @@ -65,11 +69,8 @@ $active-item-background: rgba(text-contrast($background-color), .12); } - //@if not($active-item-background) and $background-color { - // $active-item-background: lighten($background-color, 5%); - //} - @return extend($theme, ( + name: $name, palette: $palette, text-color: $text-color, hover-text-color: $hover-text-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss index 8bbfe811115..30f8ad37be8 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss @@ -7,13 +7,18 @@ /// If only background color is specified, /// the text-color will be assigned automatically to a contrasting color. +/// /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. -/// @param {Color} $background [rgba(0, 0, 0, .54)] - The background color used for the toast. -/// @param {Color} $text-color [#fff] - The text-color used for the toast. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. /// -/// @requires extend -/// @requires igx-color +/// @param {Color} $background [null] - The background color used for the toast. +/// @param {Color} $text-color [null] - The text-color used for the toast. +/// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires text-contrast +/// @requires extend /// /// @example scss Set a custom background color /// $my-toast-theme: igx-toast-theme($background: green); @@ -26,13 +31,15 @@ $background: null, $text-color: null ) { - $theme: apply-palette(map-get($schema, 'igx-toast'), $palette); + $name: 'igx-toast'; + $theme: apply-palette(map-get($schema, $name), $palette); @if not($text-color) and $background { $text-color: text-contrast($background); } @return extend($theme, ( + name: $name, palette: $palette, background: $background, text-color: $text-color diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss index 52b638da951..48010d74694 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss @@ -7,53 +7,40 @@ /// Returns a map containing all style properties related to the theming the tooltip directive. /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. -/// @param {Color} $background [] - The background color of the tooltip. -/// @param {Color} $text-color [] - The text color of the tooltip. -/// @param {Number} $roundness [] - The border roundness of the tooltip. Smaller values mean less roundness. -/// @param {String} $variant ['dark'] - Determines the default color scheme - could be either 'dark' or 'light'. -/// Set to light when the surrounding area is dark. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. /// +/// @param {Color} $background [null] - The background color of the tooltip. +/// @param {Color} $text-color [null] - The text color of the tooltip. +/// @param {Number} $roundness [null] - The border roundness of the tooltip. Smaller values mean less roundness. +/// +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette /// @requires extend -/// @requires igx-color /// @requires text-contrast /// -/// @example scss Change the checked fill color -/// $my-checkbox-theme: igx-checkbox-theme($fill-color: magenta); -/// // Pass the theme to the igx-checkbox component mixin -/// @include igx-checkbox($my-checkbox-theme); +/// @example scss Change the tooltip background +/// $my-tooltip-theme: igx-tooltip-theme($background: magenta); +/// // Pass the theme to the igx-tooltip component mixin +/// @include igx-tooltip($my-checkbox-theme); @function igx-tooltip-theme( $palette: $default-palette, $schema: $light-schema, $background: null, $text-color: null, - $roundness: null, - $variant: 'dark' + $roundness: null ) { - $name: 'igx-tooltip'; - $dark-background: hexrgba(igx-color($palette, 'grays', 700)); - $light-background: rgba(#fff, .94); $border-radius: rem(4px); - - $dark-theme: apply-palette(map-get($schema, 'igx-tooltip'), $palette); - - $light-theme: ( - name: $name, - background: $light-background, - text-color: text-contrast($light-background), - roundness: $border-radius - ); - - $theme: map-get(( - dark: $dark-theme, - light: $light-theme - ), $variant); + $name: 'igx-tooltip'; + $theme: apply-palette(map-get($schema, $name), $palette); @if not($text-color) and $background { $text-color: text-contrast($background); } @return extend($theme, ( + name: $name, palette: $default-palette, background: $background, text-color: $text-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss index 8a48ffca80e..13268b17f62 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss @@ -264,6 +264,34 @@ } } -@mixin igx-green-theme() { - @include igx-theme($palette: $dark-green-palette, $schema: $dark-green-theme); +@mixin igx-light-theme( + $palette, + $exclude: (), + $legacy-support: true +) { + $primary: igx-color($palette, 'primary'); + $secondary: igx-color($palette, 'secondary'); + + @include igx-theme( + $palette: igx-palette($primary, $secondary, $grays: #000), + $schema: $light-schema, + $legacy-support: $legacy-support, + $exclude: $exclude + ); +} + +@mixin igx-dark-theme( + $palette, + $exclude: (), + $legacy-support: true +) { + $primary: igx-color($palette, 'primary'); + $secondary: igx-color($palette, 'secondary'); + + @include igx-theme( + $palette: igx-palette($primary, $secondary, $grays: #fff), + $schema: $dark-schema, + $legacy-support: $legacy-support, + $exclude: $exclude + ); } diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss index 9648f628396..376901f43cb 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss @@ -69,6 +69,6 @@ $elevations: igx-elevations( rgba(0, 0, 0, .08) ) !default; -$dark-green-palette: igx-palette($primary: #09f, $secondary: #72da67) !default; - - +/// Green palette +/// @type {Map} +$green-palette: igx-palette($primary: #09f, $secondary: #72da67) !default; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-dark-green.scss b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-dark-green.scss index 77134088c98..e7f5be9ec3a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-dark-green.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-dark-green.scss @@ -1,6 +1,4 @@ @import '../index'; -@import '../schemas/dark-green/index'; -// Generate a palette @include igx-core(); -@include igx-theme($default-palette, $schema: $dark-green-theme); +@include igx-dark-theme($dark-green-palette); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark-green/_components-theme.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark-green/_components-theme.scss deleted file mode 100644 index 29410dc3e91..00000000000 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark-green/_components-theme.scss +++ /dev/null @@ -1,235 +0,0 @@ -@import 'vars'; - -// AVATAR -$avatar-dark-green-theme: igx-avatar-theme( - $icon-background: $dark-green-white-40, - $icon-color: $dark-green-white-80, - $initials-background: $dark-green-white-40, - $initials-color: $dark-green-white-80, - $image-background: $dark-green-white-40 -); - -// BADGE -$badge-dark-green-theme: igx-badge-theme( - $background-color: $dark-green-dark-text -); - -// BUTTONS -$button-dark-green-theme: ( - raised-background: red, - disabled-color: $dark-green-white-40, - disabled-background: $dark-green-white-10, - icon-background: $dark-green-background-darker -); - -// BUTTONS GROUP -$button-group-dark-green-theme: igx-button-group-theme( - $item-background: $dark-green-background-darker, - $item-hover-background: $dark-green-white-30, - $item-selected-background: $dark-green-white-30, - $item-border-color: $dark-green-white-20 -); - -// INPUT GROUP -$input-gruop-dark-green-theme: igx-input-group-theme( - $variant: 'light' -); - -// RIPPLE -$ripple-dark-green-theme: igx-ripple-theme( - $color: $dark-green-white-70 -); - -// SLIDER -$slider-dark-green-theme: igx-slider-theme( - $variant: 'light' -); - -// CALENDAR -$calendar-dark-green-theme: igx-calendar-theme( - $content-background: $dark-green-background-darker -); - -// DIALOG -$dialog-dark-green-theme: igx-dialog-theme( - $background: $dark-green-background-darker -); - -// TIME PICKER -$time-picker-dark-green-theme: igx-time-picker-theme( - $background-color: $dark-green-background-darker -); - -// EXPANSION PANEL -$expansion-panel-dark-green-theme: igx-expansion-panel-theme( - $header-background: $dark-green-background-darker, - $header-focus-background: darken($dark-green-background-darker, 5%) -); - -// SWITCH -$switch-dark-green-theme: igx-switch-theme( - $variant: 'light' -); - -// RADIO -$radio-dark-green-theme: igx-radio-theme( - $variant: 'light' -); - -// CHECKBOX -$checkbox-dark-green-theme: igx-checkbox-theme( - $variant: 'light' -); - -// NAV-DRAWER -$navdrawer-dark-green-theme: igx-navdrawer-theme( - $background: $dark-green-background-darker, - $item-header-text-color: $dark-green-white-70, - $item-icon-color: $dark-green-white-50, - $item-hover-icon-color: $dark-green-light-text, - $item-active-text-color: igx-color($dark-green-palette, 'secondary'), - $item-active-icon-color: igx-color($dark-green-palette, 'secondary'), - $item-active-background: $dark-green-background-black -); - -// CARD -$card-dark-green-theme: igx-card-theme( - $background: $dark-green-background-darker -); - -// CAROUSEL -$carousel-dark-green-theme: igx-carousel-theme( - $button-background: $dark-green-background-darker, - $button-arrow-color: $dark-green-white-80, - $button-hover-background: $dark-green-background-black -); - -// BOTTOM NAV -$bottom-nav-dark-green-theme: ( - background: $dark-green-content-background -); - -// LIST -$list-dark-green-theme: igx-list-theme( - $background: $dark-green-background-darker, - $item-background: $dark-green-background-darker, - $item-background-active: lighten($dark-green-background-black, 5%), - $header-text-color: igx-color($dark-green-palette, 'secondary') -); - -// DROP DOWN -$dropdown-dark-green-theme: igx-drop-down-theme( - $background-color: $dark-green-background-darker -); - -// COMBO -$combo-dark-green-theme: igx-combo-theme( - $empty-list-placeholder-color: $dark-green-white-50, - $empty-list-background: $dark-green-background-darker -); - -// PROGRESSBAR LINEAR -$progressbar-lin-dark-green-theme: igx-progress-linear-theme( - $track-color: $dark-green-white-40, - $text-color: $dark-green-white-90 -); - -// PROGRESS BARs -$progressbar-cir-dark-green-theme: igx-progress-circular-theme( - $text-color: $dark-green-white-90, - $base-circle-color: $dark-green-white-40 -); - -// GRID -$grid-dark-green-theme: igx-grid-theme( - $content-background: $dark-green-content-background, - $content-text-color: $dark-green-light-text, - $header-background: igx-color($dark-green-palette, 'grays', 800), - $header-text-color: $dark-green-white-70, - $header-border-color: $dark-green-white-40, - $row-selected-background: #333, - $row-selected-text-color: text-contrast(#333), - $row-hover-background: #222, - $row-hover-text-color: text-contrast(#222), - $row-border-color: #333, - $cell-selected-background: igx-color($dark-green-palette, 'primary'), - $cell-selected-text-color: igx-color($dark-green-palette, 'grays', 900), - - $group-count-background: #333, - $group-label-icon: igx-color($dark-green-palette, 'secondary'), - $group-label-column-name-text: igx-color($dark-green-palette, 'secondary'), - - $expand-icon-color: $dark-green-white-60, - $expand-icon-hover-color: igx-color($dark-green-palette, 'secondary'), - $expand-all-icon-color: $dark-green-white-60, - $expand-all-icon-hover-color: igx-color($dark-green-palette, 'secondary'), - $drop-area-text-color: #fff, - $drop-area-icon-color: #b4b4b4, - $drop-area-background: #333, - $drop-area-on-drop-background: #ddd, - $ghost-header-background: #333, - $ghost-header-icon-color: $dark-green-white-70, - $pinned-border-color: $dark-green-white-50, - $cell-editing-background: $dark-green-background-darker -); - -// FILTERING DIALOG -$filtering-dark-green-theme: igx-grid-filtering-theme( - $toggle-icon-color: $dark-green-white-70, - $toggle-icon-filtered-color: igx-color($dark-green-palette, 'secondary'), - $menu-background: $dark-green-background-darker, - $menu-button-text-color: igx-color($dark-green-palette, 'secondary'), - $toggle-icon-active-color: #000 -); - -// PAGINATOR -$paginator-dark-green-theme: igx-grid-paginator-theme( - $background-color: $dark-green-content-background, - $text-color: $dark-green-white-70 -); - -// SUMMARY -$summary-dark-green-theme: igx-grid-summary-theme( - $background-color: #111, - $label-color: igx-color($dark-green-palette, 'secondary'), - $label-hover-color: igx-color($dark-green-palette, 'secondary') -); - -// TOOLBAR -$toolbar-dark-green-theme: igx-grid-toolbar-theme( - $background-color: $dark-green-content-background, - $dropdown-background: $dark-green-background-darker, - $item-hover-background: $dark-green-white-30, - $item-focus-background: $dark-green-white-30 -); - -// TABS -$tabs-dark-green-theme: igx-tabs-theme( - $item-background: igx-color($dark-green-palette, 'primary'), - $button-background: igx-color($dark-green-palette, 'primary'), - $item-hover-background: igx-color($dark-green-palette, 'primary', 300), - $item-text-color: $dark-green-white-80, - $item-active-color: #fff, - $item-hover-color: #fff, - $item-active-icon-color: #fff, - $item-active-background: $dark-green-white-30, - $indicator-color: #fff, - $button-color: #fff, - $button-hover-color: #fff, - $button-hover-background: igx-color($dark-green-palette, 'primary', 600) -); - -// CHIP -$chips-dark-green-theme: igx-chip-theme( - $background: #222, - $selected-background: #222, - $hover-selected-background: #555, - $hover-background: #444, - $focus-selected-background: #444, - $focus-background: #444 -); - -// BANNER -$banner-dark-green-theme: igx-banner-theme( - $banner-background: $dark-green-background-darker -); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark-green/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark-green/_index.scss deleted file mode 100644 index a2b2c506617..00000000000 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark-green/_index.scss +++ /dev/null @@ -1,34 +0,0 @@ -@import 'components-theme'; - -$dark-green-theme: ( - igx-avatar: $avatar-dark-green-theme, - igx-badge: $badge-dark-green-theme, - igx-button: $button-dark-green-theme, - igx-button-group: $button-group-dark-green-theme, - igx-input-group: $input-gruop-dark-green-theme, - igx-slider: $slider-dark-green-theme, - igx-calendar: $calendar-dark-green-theme, - igx-time-picker: $time-picker-dark-green-theme, - igx-dialog: $dialog-dark-green-theme, - igx-expansion-panel: $expansion-panel-dark-green-theme, - igx-switch: $switch-dark-green-theme, - igx-radio: $radio-dark-green-theme, - igx-checkbox: $checkbox-dark-green-theme, - igx-navdrawer: $navdrawer-dark-green-theme, - igx-card: $card-dark-green-theme, - igx-carousel: $carousel-dark-green-theme, - igx-bottom-nav: $bottom-nav-dark-green-theme, - igx-list: $list-dark-green-theme, - igx-drop-down: $dropdown-dark-green-theme, - igx-combo: $combo-dark-green-theme, - igx-progress-linear: $progressbar-lin-dark-green-theme, - igx-progress-circular: $progressbar-cir-dark-green-theme, - igx-grid: $grid-dark-green-theme, - igx-grid-filtering: $filtering-dark-green-theme, - igx-grid-paginator: $paginator-dark-green-theme, - igx-grid-summary: $summary-dark-green-theme, - igx-grid-toolbar: $toolbar-dark-green-theme, - igx-tabs: $tabs-dark-green-theme, - igx-chip: $chips-dark-green-theme, - igx-banner: $banner-dark-green-theme -); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark-green/_vars.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark-green/_vars.scss deleted file mode 100644 index 69aa8fabc22..00000000000 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark-green/_vars.scss +++ /dev/null @@ -1,19 +0,0 @@ -$igx-background-color: #333; -$igx-foreground-color: #fff; - -$dark-green-light-text: #fff; -$dark-green-dark-text: #b7b7b7; -$dark-green-disabled-text: rgba(255, 255, 255, .38); -$dark-green-background-darker: #424242; -$dark-green-background-black: #212121; -$dark-green-content-background: #000; - -$dark-green-white-10: rgba(255, 255, 255, .04); -$dark-green-white-20: rgba(255, 255, 255, .08); -$dark-green-white-30: rgba(255, 255, 255, .12); -$dark-green-white-40: rgba(255, 255, 255, .26); -$dark-green-white-50: rgba(255, 255, 255, .38); -$dark-green-white-60: rgba(255, 255, 255, .54); -$dark-green-white-70: rgba(255, 255, 255, .62); -$dark-green-white-80: rgba(255, 255, 255, .74); -$dark-green-white-90: rgba(255, 255, 255, .87); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_avatar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_avatar.scss new file mode 100644 index 00000000000..06846dc04c8 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_avatar.scss @@ -0,0 +1,13 @@ +@import '../light/avatar'; +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a dark avatar schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-avatar +/// @see $default-palette +$_dark-avatar: extend($_light-avatar, ()); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_badge.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_badge.scss new file mode 100644 index 00000000000..3c1b4b552de --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_badge.scss @@ -0,0 +1,14 @@ +@import '../light/badge'; + +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a dark badge schema. +/// @type {Map} +/// @requires extend +/// @requires $_light-badge +/// @see $default-palette +$_dark-badge: extend($_light-badge, ()); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_banner.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_banner.scss new file mode 100644 index 00000000000..2e50b3ac437 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_banner.scss @@ -0,0 +1,17 @@ +@import '../light/banner'; +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a dark banner schema. +/// @type {Map} +/// @prop {Color} banner-background [#222]- The background color used banner background. +/// @requires extend +/// @requires $_light-banner +/// @see $default-palette + +$_dark-banner: extend($_light-banner, ( + banner-background: #222, +)); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_bottom-nav.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_bottom-nav.scss new file mode 100644 index 00000000000..6188ec0eec6 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_bottom-nav.scss @@ -0,0 +1,17 @@ +@import '../light/bottom-nav'; +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a dark bottom navigation schema. +/// @type {Map} +/// @prop {Color} background [#222] - The background color used for the toast. +/// @requires {function} extend +/// @requires $_light-bottom-nav +/// @see $default-palette + +$_dark-bottom-nav: extend($_light-bottom-nav, ( + background: #222 +)); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_button-group.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_button-group.scss new file mode 100644 index 00000000000..b74288ee246 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_button-group.scss @@ -0,0 +1,17 @@ +@import '../light/button-group'; +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a dark button group schema. +/// @type {Map} +/// @prop {Color} item-background [#222] - The background color for button group items . +/// @requires {function} extend +/// @requires $_light-button-group +/// @see $default-palette + +$_dark-button-group: extend($_light-button-group, ( + item-background: #222 +)); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_button.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_button.scss new file mode 100644 index 00000000000..34b1465d939 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_button.scss @@ -0,0 +1,36 @@ +@import '../light/button'; +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a dark button schema. +/// @type {Map} +/// @prop {Map} flat-hover-background [igx-color: ('secondary', 500), rgba: .12 ] - The hover background color of a flat button. +/// @prop {Map} flat-focus-background [igx-color: ('secondary', 400), rgba: .24] - The focus background color of a flat button. +/// @prop {Map} icon-hover-background [igx-color: ('grays', 300)] - The hover background color of an icon button. +/// @prop {Map} disabled-background [igx-color: ('grays', 200)] - The disabled background color of raised, fab, or icon buttons. +/// @requires extend +/// @requires $_light-button +/// @see $default-palette + +$_dark-button: extend($_light-button, ( + flat-hover-background: ( + igx-color: ('secondary', 500), + rgba: .12 + ), + + flat-focus-background: ( + igx-color: ('secondary', 400), + rgba: .24 + ), + + icon-hover-background: ( + igx-color: ('grays', 300) + ), + + disabled-background: ( + igx-color: ('grays', 200) + ) +)); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_calendar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_calendar.scss new file mode 100644 index 00000000000..bc1f14741f2 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_calendar.scss @@ -0,0 +1,16 @@ +@import '../light/calendar'; +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a dark calendar schema. +/// @type {Map} +/// @prop {Color} content-background [#222] - The main content background color. +/// @requires extend +/// @requires $_light-calendar +/// @see $default-palette +$_dark-calendar: extend($_light-calendar, ( + content-background: #222 +)); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_card.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_card.scss new file mode 100644 index 00000000000..70ca43b6579 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_card.scss @@ -0,0 +1,16 @@ +@import '../light/card'; +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a dark card schema. +/// @type {Map} +/// @prop {Color} background [#222]- The card background color. +/// @requires extend +/// @requires $_light-card +/// @see $default-palette +$_dark-card: extend($_light-card, ( + background: #222 +)); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_carousel.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_carousel.scss new file mode 100644 index 00000000000..d70835f06bd --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_carousel.scss @@ -0,0 +1,18 @@ +@import '../light/carousel'; +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a dark carousel schema. +/// @type {Map} +/// @prop {Color} button-background [#222] - The previous/next buttons idle background color. +/// @prop {Color} button-hover-background [#222] - The previous/next buttons hover background color. +/// @requires extend +/// @requires $_light-carousel +/// @see $default-palette +$_dark-carousel: extend($_light-carousel, ( + button-background: #222, + button-hover-background: #222, +)); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_checkbox.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_checkbox.scss new file mode 100644 index 00000000000..b6bbd8e965d --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_checkbox.scss @@ -0,0 +1,16 @@ +@import '../light/checkbox'; +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a dark checkbox schema. +/// @type {Map} +/// @prop {Color} tick-color [#222] - The checked mark color. +/// @requires extend +/// @requires $_light-checkbox +/// @see $default-palette +$_dark-checkbox: extend($_light-checkbox, ( + tick-color: #222 +)); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_chip.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_chip.scss new file mode 100644 index 00000000000..3ef07efb460 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_chip.scss @@ -0,0 +1,19 @@ +@import '../light/chip'; +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a dark chip schema. +/// @type {Map} +/// @prop {Map} ghost-background [igx-color: ('grays', 400), hexrgba: #000] - The chip ghost background color. +/// @requires extend +/// @requires $_light-chip +/// @see $default-palette +$_dark-chip: extend($_light-chip, ( + ghost-background: ( + igx-color: ('grays', 400), + hexrgba: #000 + ) +)); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_column-hiding.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_column-hiding.scss new file mode 100644 index 00000000000..c4a6c358830 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_column-hiding.scss @@ -0,0 +1,13 @@ +@import '../light/column-hiding'; +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a dark column hiding schema. +/// @type {Map} +/// @requires extend +/// @requires $_light-column-hiding +/// @see $default-palette +$_dark-column-hiding: extend($_light-column-hiding, ()); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_combo.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_combo.scss new file mode 100644 index 00000000000..5bc494d2344 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_combo.scss @@ -0,0 +1,17 @@ +@import '../light/combo'; + +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a dark combo schema. +/// @type {Map} +/// @prop {Color} empty-list-background [#222] - The combo list background color. +/// @requires extend +/// @requires $_light-combo +/// @see $default-palette +$_dark-combo: extend($_light-combo, ( + empty-list-background: #222, +)); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_date-picker.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_date-picker.scss new file mode 100644 index 00000000000..a97d3065710 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_date-picker.scss @@ -0,0 +1,14 @@ +@import '../light/date-picker'; + +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a dark date picker schema. +/// @type {Map} +/// @requires extend +/// @requires $_light-date-picker +/// @see $default-palette +$_dark-date-picker: extend($_light-date-picker, ()); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_dialog.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_dialog.scss new file mode 100644 index 00000000000..26b35bf3c9c --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_dialog.scss @@ -0,0 +1,16 @@ +@import '../light/dialog'; +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a dark dialog schema. +/// @type {Map} +/// @prop {Color} background [#222] - The dialog background color. +/// @requires extend +/// @requires $_light-dialog +/// @see $default-palette +$_dark-dialog: extend($_light-dialog, ( + background: #222 +)); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_drop-down.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_drop-down.scss new file mode 100644 index 00000000000..a197a5d3c24 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_drop-down.scss @@ -0,0 +1,17 @@ +@import '../light/drop-down'; +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a dark drop-down schema. +/// @type {Map} +/// @requires extend +/// @prop {Color} background-color [#222] - The drop-down background color. +/// @requires $_light-drop-down +/// @requires extend +/// @see $default-palette +$_dark-drop-down: extend($_light-drop-down, ( + background-color: #222 +)); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_expansion-panel.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_expansion-panel.scss new file mode 100644 index 00000000000..89edfe30549 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_expansion-panel.scss @@ -0,0 +1,18 @@ +@import '../light/expansion-panel'; +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a dark expansion panel schema. +/// @type {Map} +/// @prop {Color} header-background [#222] - The panel header background color. +/// @prop {Color} body-background [#222] - The panel body background color. +/// @requires extend +/// @requires $_light-expansion-panel +/// @see $default-palette +$_dark-expansion-panel: extend($_light-expansion-panel, ( + header-background: #222, + body-background: #222, +)); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-filtering.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-filtering.scss new file mode 100644 index 00000000000..46d0ed80db4 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-filtering.scss @@ -0,0 +1,13 @@ +@import '../light/grid-filtering'; +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a dark grid-filtering schema. +/// @type {Map} +/// @requires extend +/// @requires $_light-grid-filtering +/// @see $default-palette +$_dark-grid-filtering: extend($_light-grid-filtering, ()); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-pagination.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-pagination.scss new file mode 100644 index 00000000000..b2d92bcc773 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-pagination.scss @@ -0,0 +1,16 @@ +@import '../light/grid-pagination'; +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a dark grid pagination schema. +/// @type {Map} +/// @requires extend +/// @prop {Map} background-color [#222] - The background color of the paging panel. +/// @requires $_light-grid-pagination +/// @see $default-palette +$_dark-grid-pagination: extend($_light-grid-pagination, ( + background-color: #222 +)); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-summary.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-summary.scss new file mode 100644 index 00000000000..a0af439b4f4 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-summary.scss @@ -0,0 +1,15 @@ +@import '../light/grid-summary'; + +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a dark grid-summary schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-grid-summary +/// @see $default-palette + +$_dark-grid-summary: extend($_light-grid-summary, ()); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-toolbar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-toolbar.scss new file mode 100644 index 00000000000..08d7f9619e8 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-toolbar.scss @@ -0,0 +1,16 @@ +@import '../light/grid-toolbar'; +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a dark grid-toolbar schema. +/// @type {Map} +/// @prop {map} background-color [#222] - The toolbar background color. +/// @requires {function} extend +/// @requires $_light-grid-toolbar +/// @see $default-palette +$_dark-grid-toolbar: extend($_light-grid-toolbar, ( + background-color: #222 +)); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid.scss new file mode 100644 index 00000000000..10ad83b1bf5 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid.scss @@ -0,0 +1,75 @@ +@import '../light/grid'; +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a dark grid schema. +/// @type {Map} +/// @prop {Map} header-background [igx-color: ('grays', 100), hexrgba: #222] - The table header background color. +/// @prop {Color} content-background [#222] - The table body background color. +/// @prop {Color} row-odd-background [#222] - The background color of odd rows. +/// @prop {Color} row-even-background [#222] - The background color of even rows. +/// @prop {Map} row-hover-background [igx-color: ('grays', 200), hexrgba: #222] - The hover row background color. +/// @prop {Map} row-selected-background [igx-color: ('grays', 400), hexrgba: #222] - The selected row background color. +/// @prop {Color} row-selected-text-color [#fff] - The selected row text color. +/// @prop {Color} ghost-header-background [#222] - The dragged header background color. +/// @prop {Color} cell-editing-background [#222] - The background for the cell in editing mode. +/// @prop {Map} grouparea-background [igx-color: ('grays', 100), hexrgba: #222] - The grid group area background color. +/// @prop {Map} group-row-background [igx-color: ('grays', 100), hexrgba: #222] - The grid group row background color. +/// @prop {Map} group-row-selected-background [igx-color: ('grays', 200), hexrgba: #222] - The drop area background on drop color. +/// @prop {Color} filtering-header-background [#222] - The background color of the filtered column header. +/// @prop {Color} filtering-row-background [#222] - The background color of the filtering row. +/// @requires extend +/// @requires $_light-grid +/// @see $default-palette +$_dark-grid: extend($_light-grid, ( + header-background: ( + igx-color: ('grays', 100), + hexrgba: #222 + ), + + content-background: #222, + + row-odd-background: #222, + + row-even-background: #222, + + row-hover-background: ( + igx-color: ('grays', 200), + hexrgba: #222 + ), + + row-hover-text-color: #fff, + + row-selected-background: ( + igx-color: ('grays', 400), + hexrgba: #222 + ), + + row-selected-text-color: #fff, + + ghost-header-background: #222, + + cell-editing-background: #222, + + grouparea-background: ( + igx-color: ('grays', 100), + hexrgba: #222 + ), + + group-row-background: ( + igx-color: ('grays', 100), + hexrgba: #222 + ), + + group-row-selected-background: ( + igx-color: ('grays', 200), + hexrgba: #222 + ), + + filtering-header-background: #222, + + filtering-row-background: #222, +)); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_icon.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_icon.scss new file mode 100644 index 00000000000..b17768c9639 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_icon.scss @@ -0,0 +1,16 @@ +@import '../light/icon'; + +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a dark icon schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-icon +/// @see $default-palette + + +$_dark-icon: extend($_light-icon, ()); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss index e69de29bb2d..2a96244a1df 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss @@ -0,0 +1,122 @@ +@import './avatar'; +@import './badge'; +@import './banner'; +@import './bottom-nav'; +@import './button'; +@import './button-group'; +@import './calendar'; +@import './card'; +@import './carousel'; +@import './checkbox'; +@import './chip'; +@import './column-hiding'; +@import './combo'; +@import './date-picker'; +@import './dialog'; +@import './drop-down'; +@import './expansion-panel'; +@import './grid'; +@import './grid-filtering'; +@import './grid-pagination'; +@import './grid-summary'; +@import './grid-toolbar'; +@import './icon'; +@import './input-group'; +@import './list'; +@import './navbar'; +@import './navdrawer'; +@import './overlay'; +@import './progress'; +@import './radio'; +@import './ripple'; +@import './slider'; +@import './snackbar'; +@import './switch'; +@import './tabs'; +@import './time-picker'; +@import './toast'; +@import './tooltip'; + +/// The default dark schema for all components. +/// @type {Map} +/// @property {Map} igx-avatar [$_dark-avatar] +/// @property {Map} igx-badge [$_dark-badge] +/// @property {Map} igx-banner [$_dark-banner] +/// @property {Map} igx-bottom-nav [$_dark-bottom-nav] +/// @property {Map} igx-button [$_dark-button] +/// @property {Map} igx-button-group [$_dark-button-group] +/// @property {Map} igx-calendar [$_dark-calendar] +/// @property {Map} igx-card [$_dark-card] +/// @property {Map} igx-carousel [$_dark-carousel] +/// @property {Map} igx-checkbox [$_dark-checkbox] +/// @property {Map} igx-chip [$_dark-chip] +/// @property {Map} igx-column-hiding [$_dark-column-hiding] +/// @property {Map} igx-combo [$_dark-combo] +/// @property {Map} igx-date-picker [$_dark-date-picker] +/// @property {Map} igx-dialog [$_dark-dialog] +/// @property {Map} igx-drop-down [$_dark-drop-down] +/// @property {Map} igx-expansion-panel [$_dark-expansion-panel] +/// @property {Map} igx-grid [$_dark-grid] +/// @property {Map} igx-grid-filtering [$_dark-grid-filtering] +/// @property {Map} igx-grid-paginator [$_dark-grid-pagination] +/// @property {Map} igx-grid-summary [$_dark-grid-summary] +/// @property {Map} igx-grid-toolbar [$_dark-grid-toolbar] +/// @property {Map} igx-icon [$_dark-icon] +/// @property {Map} igx-input-group [$_dark-input-group] +/// @property {Map} igx-list [$_dark-list] +/// @property {Map} igx-navbar [$_dark-navbar] +/// @property {Map} igx-navdrawer [$_dark-navdrawer] +/// @property {Map} igx-overlay [$_dark-overlay] +/// @property {Map} igx-progress-linear [$_dark-progress-linear] +/// @property {Map} igx-progress-circular [$_dark-progress-circular] +/// @property {Map} igx-radio [$_dark-radio] +/// @property {Map} igx-ripple [$_dark-ripple] +/// @property {Map} igx-slider [$_dark-slider] +/// @property {Map} igx-snackbar [$_dark-snackbar] +/// @property {Map} igx-switch [$_dark-switch] +/// @property {Map} igx-tabs [$_dark-tabs] +/// @property {Map} igx-time-picker [$_dark-time-picker] +/// @property {Map} igx-toast [$_dark-toast] +/// @property {Map} igx-tooltip [$_dark-tooltip] + +$dark-schema: ( + igx-avatar: $_dark-avatar, + igx-badge: $_dark-badge, + igx-banner: $_dark-banner, + igx-bottom-nav: $_dark-bottom-nav, + igx-button: $_dark-button, + igx-button-group: $_dark-button-group, + igx-calendar: $_dark-calendar, + igx-card: $_dark-card, + igx-carousel: $_dark-carousel, + igx-checkbox: $_dark-checkbox, + igx-chip: $_dark-chip, + igx-column-hiding: $_dark-column-hiding, + igx-combo: $_dark-combo, + igx-date-picker: extend($_dark-calendar, $_dark-date-picker), + igx-dialog: $_dark-dialog, + igx-drop-down: $_dark-drop-down, + igx-expansion-panel: $_dark-expansion-panel, + igx-grid: $_dark-grid, + igx-grid-filtering: $_dark-grid-filtering, + igx-grid-paginator: $_dark-grid-pagination, + igx-grid-summary: $_dark-grid-summary, + igx-grid-toolbar: $_dark-grid-toolbar, + igx-icon: $_dark-icon, + igx-input-group: $_dark-input-group, + igx-list: $_dark-list, + igx-navbar: $_dark-navbar, + igx-navdrawer: $_dark-navdrawer, + igx-overlay: $_dark-overlay, + igx-progress-linear: $_dark-progress-linear, + igx-progress-circular: $_dark-progress-circular, + igx-radio: $_dark-radio, + igx-ripple: $_dark-ripple, + igx-slider: $_dark-slider, + igx-snackbar: $_dark-snackbar, + igx-switch: $_dark-switch, + igx-tabs: $_dark-tabs, + igx-time-picker: $_dark-time-picker, + igx-toast: $_dark-toast, + igx-tooltip: $_dark-tooltip +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_input-group.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_input-group.scss new file mode 100644 index 00000000000..083a5cf71d2 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_input-group.scss @@ -0,0 +1,20 @@ +@import '../light/input-group'; + +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a light input-group schema. +/// @type {Map} +/// @prop {Color} search-background [#222] - The background color of an input group of type search. +/// @prop {Color} search-disabled-background [darken(#222, 5%)] - The background color of an input group of type search in the disabled state. +/// @requires {function} extend +/// @requires $_light-input-group +/// @see $default-palette + +$_dark-input-group: extend($_light-input-group, ( + search-background: #222, + search-disabled-background: darken(#222, 5%) +)); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_list.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_list.scss new file mode 100644 index 00000000000..b63eea0a80e --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_list.scss @@ -0,0 +1,23 @@ +@import '../light/list'; + +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a dark list schema. +/// @type {Map} +/// @property {Color} background [#222] - The list background color. +/// @property {Color} header-background [#222] - The list header background color. +/// @property {Color} item-background [#222] - The list item background color. +/// @property {Color} item-background-active [lighten(#222, 10%)] - The active list item background color. +/// @requires {function} extend +/// @requires $_light-list +/// @see $default-palette +$_dark-list: extend($_light-list, ( + background: #222, + header-background: #222, + item-background: #222, + item-background-active: lighten(#222, 10%) +)); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_navbar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_navbar.scss new file mode 100644 index 00000000000..51586576014 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_navbar.scss @@ -0,0 +1,15 @@ +@import '../light/navbar'; + +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a dark navbar schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-navbar +/// @see $default-palette + +$_dark-navbar: extend($_light-navbar, ()); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_navdrawer.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_navdrawer.scss new file mode 100644 index 00000000000..f7cf5bab078 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_navdrawer.scss @@ -0,0 +1,18 @@ +@import '../light/navdrawer'; + +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a dark navdrawer schema. +/// @type {Map} +/// @prop {Color} background [#222] - The navigation drawer background color. +/// @requires {function} extend +/// @requires $_light-navdrawer +/// @see $default-palette + +$_dark-navdrawer: extend($_light-navdrawer, ( + background: #222 +)); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_overlay.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_overlay.scss new file mode 100644 index 00000000000..57266926130 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_overlay.scss @@ -0,0 +1,15 @@ +@import '../light/overlay'; + +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a dark overlay schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-overlay +/// @see $default-palette + +$_dark-overlay: extend($_light-overlay, ()); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_progress.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_progress.scss new file mode 100644 index 00000000000..6613f0e8aa0 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_progress.scss @@ -0,0 +1,23 @@ +@import '../light/progress'; + +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a dark progress-linear schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-progress-linear +/// @see $default-palette + +$_dark-progress-linear: extend($_light-progress-linear, ()); + +/// Generates a dark progress-circular schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-progress-circular +/// @see $default-palette + +$_dark-progress-circular: extend($_light-progress-circular, ()); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_radio.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_radio.scss new file mode 100644 index 00000000000..7c2486480eb --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_radio.scss @@ -0,0 +1,15 @@ +@import '../light/radio'; + +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a dark radio schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-ripple +/// @see $default-palette + +$_dark-radio: extend($_light-radio, ()); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_ripple.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_ripple.scss new file mode 100644 index 00000000000..d2dc5de9d1b --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_ripple.scss @@ -0,0 +1,16 @@ +@import '../light/ripple'; + +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a dark ripple schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-ripple +/// @see $default-palette + + +$_dark-ripple: extend($_light-ripple, ()); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_slider.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_slider.scss new file mode 100644 index 00000000000..f8bc1804bb3 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_slider.scss @@ -0,0 +1,15 @@ +@import '../light/slider'; + +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a dark slider schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-slider +/// @see $default-palette + +$_dark-slider: extend($_light-slider, ()); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_snackbar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_snackbar.scss new file mode 100644 index 00000000000..009214aae98 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_snackbar.scss @@ -0,0 +1,15 @@ +@import '../light/snackbar'; + +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a dark snackbar schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-snackbar +/// @see $default-palette + +$_dark-snackbar: extend($_light-snackbar, ()); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_switch.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_switch.scss new file mode 100644 index 00000000000..44b7c384575 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_switch.scss @@ -0,0 +1,21 @@ +@import '../light/switch'; + +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a light switch schema. +/// @type {Map} +/// @prop {map} thumb-disabled-color [igx-color: ('grays', 400), hexrgba: #000] - The color of the thumb when the switch is disabled. +/// @requires {function} extend +/// @requires $_light-switch +/// @see $default-palette + +$_dark-switch: extend($_light-switch, ( + thumb-disabled-color: ( + igx-color: ('grays', 400), + hexrgba: #000 + ) +)); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_tabs.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_tabs.scss new file mode 100644 index 00000000000..1f111f5c30e --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_tabs.scss @@ -0,0 +1,20 @@ +@import '../light/badge'; + +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a dark tabs schema. +/// @type {Map} +/// @prop {Color} item-background [#222] - The background color used for the tabs header. +/// @prop {Color} button-background [#222] - The color used for the button background. +/// @requires {function} extend +/// @requires $_light-tabs +/// @see $default-palette + +$_dark-tabs: extend($_light-tabs, ( + item-background: #222, + button-background: #222 +)); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_time-picker.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_time-picker.scss new file mode 100644 index 00000000000..611c3ddce16 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_time-picker.scss @@ -0,0 +1,19 @@ +@import '../light/badge'; + +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a dark time-picker schema. +/// @type {Map} +/// @property {Color} background-color [#222] - The time-picker panel background color. +/// @requires {function} extend +/// @requires $_light-time-picker +/// @see $default-palette + + +$_dark-time-picker: extend($_light-time-picker, ( + background-color: #222 +)); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_toast.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_toast.scss new file mode 100644 index 00000000000..ff1da5a1ba9 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_toast.scss @@ -0,0 +1,15 @@ +@import '../light/toast'; + +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a dark toast schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-toast +/// @see $default-palette + +$_dark-toast: extend($_light-toast, ()); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_tooltip.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_tooltip.scss new file mode 100644 index 00000000000..b7c66c27bc4 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_tooltip.scss @@ -0,0 +1,14 @@ +@import '../light/tooltip'; +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a light tooltip schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-tooltip +/// @see $default-palette + +$_dark-tooltip: extend($_light-tooltip, ()); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_avatar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_avatar.scss index fd1a487462f..1098a6518b1 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_avatar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_avatar.scss @@ -1,6 +1,18 @@ -$_light-avatar: ( - name: 'igx-avatar', +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// +/// Generates a light avatar schema. +/// @type {Map} +/// @property {Map} icon-background [igx-color: ('grays', 400)]- The background color used for avatars of type icon. +/// @property {Map} icon-color [igx-color: ('grays', 800)] - The icon color used for avatars of type icon. +/// @property {Map} initials-background [igx-color: ('grays', 400)] - The background color used for avatars of type initials. +/// @property {Map} initials-color [igx-color: ('grays', 800)] - The text color used for avatars of type initials. +/// @property {Color} image-background [transparent] - The background color used for avatars of type image. +/// @see $default-palette +$_light-avatar: ( icon-background: ( igx-color: ('grays', 400) ), diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_badge.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_badge.scss index 35062eae5b7..3e08a43bbb2 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_badge.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_badge.scss @@ -1,8 +1,27 @@ +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a light badge schema. +/// @type {Map} +/// @property {Map} icon-color [igx-contrast-color: ('primary', 500)] - The icon color used. +/// @property {Map} text-color [igx-contrast-color: ('primary', 500)] - The text color used. +/// @property {Color} border-color [#fff] - The border color used. +/// @property {Map} background-color [igx-color: ('primary', 500)] - The background color used. +/// @see $default-palette $_light-badge: ( - name: 'igx-badge', - icon-color: #fff, - text-color: #fff, + icon-color: ( + igx-contrast-color: ('primary', 500) + ), + + text-color: ( + igx-contrast-color: ('primary', 500) + ), + border-color: #fff, + background-color: ( igx-color: ('primary', 500) ) diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_banner.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_banner.scss index 973fb28126b..f80a585c631 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_banner.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_banner.scss @@ -1,5 +1,19 @@ +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a light banner schema. +/// @type {Map} +/// @property {Color} banner-background [#fff]- The background color used banner background. +/// @property {Color} banner-message-color [igx-color: ('grays', 900)]- The color used for banner label. +/// @property {Color} banner-border-color [igx-color: ('grays', 400)] - The border color used banner border. +/// @property {Color} banner-illustration-background [igx-color: ('grays', 100)] - The background color used for banner illustration. +/// @property {Color} banner-illustration-color [igx-color: ('grays', 900)] - The color used banner illustration. +/// @see $default-palette + $_light-banner: ( - name: 'igx-banner', banner-background: #fff, banner-message-color: ( diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_bottom-nav.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_bottom-nav.scss index 8ec2fb9dc7e..db401b4cbba 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_bottom-nav.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_bottom-nav.scss @@ -1,5 +1,17 @@ +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a light bottom navigation scheme. +/// @type {Map} +/// @property {Color} background [#fff] - The background color used for the toast. +/// @property {Color} idle-item-color [igx-color: ('grays', 700)] - The text-color used for the idle color. +/// @property {Color} active-item-color [igx-color: ('primary', 500)] - The text-color used for the active color. +/// @see $default-palette + $_light-bottom-nav: ( - name: 'igx-bottom-nav', background: #fff, idle-item-color: ( diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button-group.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button-group.scss index 4689ff4b85e..1604e120106 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button-group.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button-group.scss @@ -1,5 +1,26 @@ +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a light button group schema. +/// @type {Map} +/// @prop {Color} item-text-color [igx-color: ('grays', 700)]- The text color for button group items. +/// @prop {Color} item-background [#fff] - The background color for button group items . +/// @prop {Color} item-border-color [transparent] - The border color between button group items. +/// +/// @prop {Color} item-hover-text-color [igx-color: ('grays', 800)] - The hover text color for button group items. +/// @prop {Color} item-hover-background [igx-color: ('grays', 400)] - The hover background color for button group items. +/// +/// @prop {Color} disabled-text-color [igx-color: ('grays', 400)]- The text/icon color for a disabled item in the button group. +/// @prop {Color} disabled-background-color [igx-color: ('grays', 100)] - The background color for a disabled item in the button group. +/// +/// @prop {Color} item-selected-text-color [igx-color: ('grays', 800)]- The text color for a selected item in the button group. +/// @prop {Color} item-selected-background [igx-color: ('grays', 400)] - The background color for a selected item in the button group. +/// @prop {Color} item-selected-border-color [igx-color: ('grays', 600), rgba: .12] - The border color for a selected item from the button group. +/// @see $default-palette $_light-button-group: ( - name: 'igx-button-group', item-background: #fff, item-border-color: transparent, diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button.scss index dde4d6b32e0..4806e281af5 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button.scss @@ -1,6 +1,40 @@ +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a light button schema. +/// @type {Map} +/// @property {String} button-roundness [4px]- The edge roundness (border-radius) for flat and raised buttons. +/// @property {Color} flat-background [transparent] - The background color of a flat button. +/// @property {Map} flat-text-color [igx-color: ('secondary', 500)] - The idle text color of a flat button. +/// @property {Map} flat-hover-background [igx-color: ('secondary', 500), rgba: .05 ] - The hover background color of a flat button. +/// @property {Map} flat-hover-text-color [igx-color: ('secondary', 500)] - The hover text color of a flat button. +/// @property {Map} flat-focus-background [igx-color: ('secondary', 400), rgba: .12] - The focus background color of a flat button. +/// @property {Map} flat-focus-text-color [igx-color: ('secondary', 500)] - The focus text color of a flat button. +/// @property {Map} raised-background [igx-color: ('secondary', 500)] - The background color of a raised button. +/// @property {Map} raised-text-color [igx-contrast-color: ('secondary', 500)] - The idle text color of a raised button. +/// @property {Map} raised-hover-background [igx-color: ('secondary', 300)] - The hover background of a raised button. +/// @property {Map} raised-hover-text-color [igx-contrast-color: ('secondary', 300)] - The hover text color of a raised button. +/// @property {Map} raised-focus-background [igx-color: ('secondary', 300)] - The focus background color of a raised button. +/// @property {Map} raised-focus-text-color [igx-contrast-color: ('secondary', 300)] - The focus text color of a raised button. +/// @property {Map} fab-background [igx-color: ('secondary', 500)] - The background color of a floating action button. +/// @property {Map} fab-text-color [igx-contrast-color: ('secondary', 500)] - The text color of a floating action button. +/// @property {Map} fab-hover-background [igx-color: ('secondary', 300)] - The hover background color of a floating action button. +/// @property {Map} fab-hover-text-color [igx-contrast-color: ('secondary', 300)] - The hover text color of a floating action button. +/// @property {Map} fab-focus-background [igx-color: ('secondary', 300)] - The focus background color of floating action button. +/// @property {Map} fab-focus-text-color [igx-contrast-color: ('secondary', 300)] - The focus text color of a floating action button. +/// @property {Map} icon-color [igx-color: ('grays', 800)] - The icon color of an icon button. +/// @property {Map} icon-hover-color [igx-color: ('grays', 800)] - The hover icon color of an icon button. +/// @property {Color} icon-background [transparent] - The background color of the an icon button. +/// @property {Map} icon-hover-background [igx-color: ('grays', 100)] - The hover background color of an icon button. +/// @property {Map} icon-focus-color [igx-color: ('grays', 800)] - The focus icon color of an icon button. +/// @property {Map} icon-focus-background [igx-color: ('grays', 400] - The focus background color an icon button. +/// @property {Color} disabled-color [igx-color: ('grays', 400)] - The disabled text/icon color of a button. +/// @property {Color} disabled-background [igx-color: ('grays', 100)] - The disabled background color of raised, fab, or icon buttons. +/// @see $default-palette $_light-button: ( - name: 'igx-button', - button-roundness: 4px, flat-background: transparent, diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_calendar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_calendar.scss index dc242b2506a..f8aa734bedb 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_calendar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_calendar.scss @@ -1,6 +1,34 @@ +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a light calendar schema. +/// @type {Map} +/// @prop {Color} content-background [#fff] - The main content background color. +/// @prop {Map} content-text-color [igx-color: ('grays', 900)] - The main content text color. +/// @prop {Map} header-background [igx-color: ('secondary', 500)] - The header background color. +/// @prop {Map} header-text-color [igx-contrast-color: ('secondary', 500)] - The header text color. +/// @prop {Map} picker-arrow-color [igx-color: ('grays', 800)] - The idle picker arrow color. +/// @prop {Map} picker-arrow-hover-color [igx-color: ('secondary', 500)] - The picker hover arrow color. +/// @prop {Map} picker-text-color [igx-color: ('grays', 800)]- The idle picker month/year color. +/// @prop {Map} picker-text-hover-color [igx-color: ('secondary', 500)]- The hover picker month/year color. +/// @prop {Map} inactive-text-color [igx-color: ('grays', 400)] - The text color for weekday labels and other month dates. +/// @prop {Map} weekend-text-color [igx-color: ('grays', 500)] - The text color for weekend days. +/// @prop {Map} year-current-text-color [igx-color: ('secondary', 500)] - The text color for the current/selected year. +/// @prop {Map} month-current-text-color [igx-color: ('secondary', 500)]- The text color for the current/selected month. +/// @prop {Map} year-hover-text-color [igx-color: ('secondary', 500)] - The year hover text color. +/// @prop {Map} month-hover-text-color [igx-color: ('secondary', 500)] - The month hover text color. +/// @prop {Map} date-selected-background [igx-color: ('secondary', 500)] - The background color for the selected date. +/// @prop {Map} date-selected-text-color [igx-contrast-color: ('secondary', 500)] - The text color for the selected date. +/// @prop {Map} date-current-text-color [igx-color: ('secondary', 500)] - The text color for the current date. +/// @prop {Map} date-hover-background [igx-color: ('grays', 200)] - The hover date background color. +/// @prop {Map} date-special-background [igx-color: ('grays', 100)] - The background color used for special dates. +/// @prop {Map} date-special-text-color [igx-color: ('grays', 900)] - The text color used for special dates. +/// @prop {Map} date-disabled-text-color [igx-color: ('grays', 500), hexrgba: (), rgba: .6] - The text color for disabled dates. +/// @see $default-palette $_light-calendar: ( - name: 'igx-calendar', - content-background: #fff, content-text-color: ( diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_card.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_card.scss index b755f7066ea..1c70be06523 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_card.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_card.scss @@ -1,5 +1,18 @@ +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a light card schema. +/// @type {Map} +/// @prop {Color} background [#fff]- The card background color. +/// @prop {Map} header-text-color [igx-color: ('grays', 800)] - The text color of the card title. +/// @prop {Map} subtitle-text-color [igx-color: ('grays', 600)] - The text color of the card subtitle. +/// @prop {Map} content-text-color [igx-color: ('grays', 600)] - The text color of the card content. +/// @prop {Map} actions-text-color [igx-color: ('grays', 600)] - The text color of the card buttons. +/// @see $default-palette $_light-card: ( - name: 'igx-card', background: #fff, header-text-color: ( diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_carousel.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_carousel.scss index 19099e27082..7fefd400380 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_carousel.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_carousel.scss @@ -1,5 +1,20 @@ +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a light carousel schema. +/// @type {Map} +/// @prop {Color} button-background [#fff] - The previous/next buttons idle background color. +/// @prop {Color} button-hover-background [#fff] - The previous/next buttons hover background color. +/// @prop {Map} button-arrow-color [igx-color: ('grays', 700)] - The previous/next buttons idle arrow color. +/// @prop {Map} button-hover-arrow-color [igx-color: ('grays', 900)] - The previous/next buttons hover arrow color. +/// @prop {Color} indicator-dot-color [#fff] - The active indicator dot color. +/// @prop {Color} indicator-border-color [#fff] - The idle indicator border color. +/// @prop {Color} indicator-active-border-color [#fff] - The active indicator border color. +/// @see $default-palette $_light-carousel: ( - name: 'igx-carousel', button-background: #fff, button-hover-background: #fff, diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_checkbox.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_checkbox.scss index e8bc10b5017..46bb22e0dd4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_checkbox.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_checkbox.scss @@ -1,5 +1,18 @@ +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a light checkbox schema. +/// @type {Map} +/// @prop {Color} tick-color [#fff] - The checked mark color. +/// @prop {Map} label-color [igx-color: ('grays', 900)]- The text color used for the label text. +/// @prop {Map} empty-color [igx-color: ('grays', 600)] - The unchecked border color. +/// @prop {Map} fill-color [igx-color: ('secondary', 500)] - The checked border and fill colors. +/// @prop {Map} disabled-color [igx-color: ('grays', 400)] - The disabled border and fill colors. +/// @see $default-palette $_light-checkbox: ( - name: 'igx-checkbox', tick-color: #fff, label-color: ( diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_chip.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_chip.scss index 0fe3b175e20..5f3e7d56206 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_chip.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_chip.scss @@ -1,5 +1,30 @@ +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a light chip schema. +/// @type {Map} +/// @prop {Number} roundness [32px] - The chip roundness. +/// @prop {Map} text-color [igx-color: ('grays', 700)] - The chip text color. +/// @prop {Map} background [igx-color: ('grays', 200)] - The chip background color. +/// @prop {Color} border-color [transparent] - The chip border color. +/// @prop {Map} ghost-background [igx-color: ('grays', 400), hexrgba: #fff)] - The chip ghost background color. +/// @prop {Map} hover-text-color [igx-color: ('grays', 700)] - The chip text hover color. +/// @prop {Map} hover-background [igx-color: ('grays', 300)] - The chip hover background color. +/// @prop {Color} hover-border-color [transparent] - The chip hover border color. +/// @prop {Map} selected-text-color [igx-color: ('grays', 700)] - The selected chip text color. +/// @prop {Map} selected-background [igx-color: ('grays', 300)] - The selected chip background color. +/// @prop {Color} selected-border-color [transparent] The selected chip border color. +/// @prop {Map} hover-selected-text-color [igx-color: ('grays', 700)] - The selected chip hover text color. +/// @prop {Map} hover-selected-background [igx-color: ('grays', 400)] - The selected chip hover background color. +/// @prop {Map} hover-selected-border-color [transparent] - The selected chip hover border color. +/// @prop {Map} focus-selected-text-color [igx-color: ('grays', 700)] - The selected chip text focus color. +/// @prop {Map} focus-selected-background [igx-color: ('grays', 400)] - The selected chip focus background color. +/// @prop {Map} focus-selected-border-color [transparent] - The selected chip focus border color. +/// @see $default-palette $_light-chip: ( - name: 'igx-chip', roundness: rem(32px), text-color: ( @@ -12,6 +37,11 @@ $_light-chip: ( border-color: transparent, + ghost-background: ( + igx-color: ('grays', 400), + hexrgba: #fff + ), + hover-text-color: ( igx-color: ('grays', 700) ), diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_column-hiding.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_column-hiding.scss index 08b5c8d70ed..c29b954031d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_column-hiding.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_column-hiding.scss @@ -1,5 +1,15 @@ +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a light column hiding schema. +/// @type {Map} +/// @prop {Map} title-color [igx-color: ('primary', 500)]- The text color used for the title of the list. +/// @prop {Color} background-color [transparent] - The background color of the panel. +/// @see $default-palette $_light-column-hiding: ( - name: 'igx-column-hiding', background-color: transparent, title-color: ( igx-color: ('primary', 500) diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_combo.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_combo.scss index b3921cf5df4..26895012334 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_combo.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_combo.scss @@ -1,5 +1,16 @@ +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a light combo schema. +/// @type {Map} +/// @prop {Color} empty-list-background [#fff] - The combo list background color. +/// @prop {Color} search-separator-border-color [igx-color: ('grays', 300)] - The combo search box separator color. +/// @prop {Color} empty-list-placeholder-color [igx-color: ('grays', 400)] - The combo placeholder text color. +/// @see $default-palette $_light-combo: ( - name: 'igx-combo', empty-list-background: #fff, search-separator-border-color: ( diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_date-picker.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_date-picker.scss index a45fde16926..1a2fe5b578c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_date-picker.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_date-picker.scss @@ -1,3 +1,10 @@ -$_light-date-picker: ( - name: 'igx-date-picker' -); +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a light date picker schema. +/// @type {Map} +/// @see $default-palette +$_light-date-picker: (); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_dialog.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_dialog.scss index d0c34480f05..1ec885a268f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_dialog.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_dialog.scss @@ -1,5 +1,16 @@ +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a light dialog schema. +/// @type {Map} +/// @prop {Color} background [#fff] - The dialog background color. +/// @prop {Map} title-color [igx-color: ('grays', 800)] - The dialog title text color. +/// @prop {Map} message-color [igx-color: ('grays', 600)] - The dialog message text color. +/// @see $default-palette $_light-dialog: ( - name: 'igx-dialog', background: #fff, title-color: ( diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_drop-down.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_drop-down.scss index 07ff600ef48..ebc571c6754 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_drop-down.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_drop-down.scss @@ -1,6 +1,28 @@ -$_light-drop-down: ( - name: 'igx-drop-down', +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// +/// Generates a light drop-down schema. +/// @type {Map} +/// @prop {Color} background-color [#fff] - The drop-down background color. +/// @prop {Map} header-text-color [igx-color: ('secondary', 500)] - The drop-down header text color. +/// @prop {Map} item-text-color [igx-color: ('grays', 800)] - The drop-down text color. +/// @prop {Map} hover-item-text-color [igx-color: ('grays', 800)] - The drop-down hover text color. +/// @prop {Map} hover-item-background [igx-color: ('grays', 100)] - The drop-down hover item background color. +/// @prop {Map} focused-item-background [igx-color: ('grays', 100)] - The drop-down focused item background color. +/// @prop {Map} focused-item-text-color [igx-color: ('grays', 800)] - The drop-down focused item text color. +/// @prop {Map} selected-item-background [igx-color: ('secondary', 500)] - The drop-down selected item background color. +/// @prop {Map} selected-item-text-color [igx-contrast-color: ('secondary', 500)] - The drop-down selected item text color. +/// @prop {Map} selected-hover-item-background [igx-color: ('secondary', 300)] - The drop-down selected item hover background color. +/// @prop {Map} selected-hover-item-text-color [igx-contrast-color: ('secondary', 300)] - The drop-down selected item hover text color. +/// @prop {Map} selected-focus-item-background [igx-color: ('secondary', 300)] - The drop-down selected item focus background color. +/// @prop {Map} selected-focus-item-text-color [igx-contrast-color: ('secondary', 300)] - The drop-down selected item focus text color. +/// @prop {Color} disabled-item-background [transparent] - The drop-down disabled item background color. +/// @prop {Map} disabled-item-text-color [igx-color: ('grays', 500)] - The drop-down disabled item text color. +/// @see $default-palette +$_light-drop-down: ( background-color: #fff, header-text-color: ( diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_expansion-panel.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_expansion-panel.scss index e296d70f18e..bc087749057 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_expansion-panel.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_expansion-panel.scss @@ -1,5 +1,21 @@ +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a light expansion panel schema. +/// @type {Map} +/// @prop {Color} header-background [#fff] - The panel header background color. +/// @prop {Color} body-background [#fff] - The panel body background color. +/// @prop {Map} header-focus-background [igx-color: ('grays', 100)] - The panel header focus background color. +/// @prop {Map} header-title-color [igx-color: ('grays', 800)] - The panel header title text color. +/// @prop {Map} header-description-color [igx-color: ('grays', 600)] - The panel header description text color. +/// @prop {Map} header-icon-color [igx-color: ('grays', 800)] - The panel header icon color. +/// @prop {Map} body-color [igx-color: ('grays', 800)] - The panel body text color. +/// @prop {Map} disabled-color [igx-color: ('grays', 500)] - The panel disabled text color. +/// @see $default-palette $_light-expansion-panel: ( - name: 'igx-expansion-panel', header-background: #fff, body-background: #fff, diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-filtering.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-filtering.scss index 0468c1ba255..ea3679514e6 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-filtering.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-filtering.scss @@ -1,5 +1,25 @@ +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a light grid-filtering schema. +/// @type {Map} +/// @prop {Color} menu-background [#fff] - The idle menu background color. +/// @prop {Color} toggle-background [transparent] - The idle toggle background color. +/// @prop {Color} toggle-filtered-background [transparent] - The filtered toggle background color. +/// @prop {Color} toggle-icon-color [inherit] - The idle toggle icon color. +/// @prop {Color} toggle-icon-hover-color [#fff] - The hover toggle icon color. +/// @prop {Color} menu-button-disabled-text-color [initial] - The menu disabled button text color. +/// @prop {Color} toggle-icon-active-color [igx-contrast-color: ('secondary', 500)] - The active toggle icon color. +/// @prop {Color} toggle-icon-filtered-color [igx-color: ('secondary', 500)] - The filtered toggle icon color. +/// @prop {Color} toggle-hover-background [igx-color: ('grays', 300)] - The hover toggle background color. +/// @prop {Color} toggle-active-background [igx-color: ('secondary', 500)] - The active toggle background color. +/// @prop {Color} menu-text-color [igx-color: ('grays', 900)] - The idle menu text color. +/// @prop {Color} menu-button-text-color [igx-color: ('secondary', 500)] - The menu button text color. +/// @see $default-palette $_light-grid-filtering: ( - name: 'igx-grid-filtering', menu-background: #fff, toggle-background: transparent, toggle-filtered-background: transparent, diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-pagination.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-pagination.scss index d9065938442..9f6b04581ef 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-pagination.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-pagination.scss @@ -1,11 +1,21 @@ -$_light-grid-pagination: ( - name: 'igx-grid-paginator', +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// +/// Generates a light avatar schema. +/// @type {Map} +/// @prop {Color} text-color [currentColor] - The text color. +/// @prop {Map} background-color [igx-color: ('grays', 100), hexrgba: #fff] - The background color of the paging panel. +/// @prop {Map} border-color [igx-color: ('grays', 400)] - The border color of the paging panel. +/// @see $default-palette +$_light-grid-pagination: ( text-color: currentColor, background-color: ( igx-color: ('grays', 100), - hexrgba: () + hexrgba: #fff ), border-color: ( diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-summary.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-summary.scss index 43137d34d11..8c9c710f5e5 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-summary.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-summary.scss @@ -1,31 +1,46 @@ -$_light-grid-summary: ( - name: 'igx-grid-summary', +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a light grid-summary schema. +/// @type {Map} +/// +/// @property {Color} background-color [inherit] - The summaries background color is inherited form igx-grid__tfoot +/// @property {map} label-color [igx-color: ('primary', 500)] - The summaries label color. +/// @property {Color} result-color [currentColor] - The summaries value/result color. +/// @property {map} border-color [igx-color: ('grays', 400)] - The summaries border color. +/// @property {String} pinned-border-width [2px] - The border width of the summary panel. +/// @property {String} pinned-border-style [solid] - The border style of the summary panel. +/// @property {map} pinned-border-color [igx-color: ('grays', 400)] - The border color of the summary panel. +/// @property {map} inactive-color [igx-color: ('grays', 400)] - The summaries inactive label color. +/// @property {map} label-hover-color [igx-color: ('primary', 700)] - The summaries hover label color. +/// +/// @see $default-palette +$_light-grid-summary: ( background-color: inherit, - - result-color: currentColor, - label-color: ( igx-color: ('primary', 500) ), - label-hover-color: ( - igx-color: ('primary', 700) - ), - + result-color: currentColor, border-color: ( igx-color: ('grays', 400) ), pinned-border-width: 2px, - pinned-border-style: solid, - pinned-border-color: ( igx-color: ('grays', 400) ), inactive-color: ( igx-color: ('grays', 400) + ), + + label-hover-color: ( + igx-color: ('primary', 700) ) ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-toolbar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-toolbar.scss index fcda7962805..b69f23b1368 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-toolbar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-toolbar.scss @@ -1,18 +1,42 @@ -$_light-grid-toolbar: ( - name: 'igx-grid-toolbar', +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a light grid-toolbar schema. +/// @type {Map} +/// +/// @property {map} background-color [igx-color: ('grays', 50)] - The toolbar background color. +/// @property {map} title-text-color [igx-color: ('grays', 600)] - The toolbar title text color. +/// @property {map} button-background [igx-color: ('grays', 100)] - The toolbar button background color. +/// @property {map} button-text-color [igx-color: ('grays', 600)] - The toolbar button text color. +/// @property {map} button-hover-background [igx-color: ('grays', 100)] - The toolbar button hover background color. +/// @property {map} button-hover-text-color [igx-color: ('grays', 600)] - The toolbar button hover text color. +/// @property {map} button-focus-background [igx-color: ('grays', 100)] - The toolbar button focus background color. +/// @property {map} button-focus-text-color [igx-color: ('grays', 600)] - The toolbar button focus text color. +/// @property {Color} dropdown-background [#fff] - The toolbar drop-down background color. +/// @property {map} item-text-color [igx-color: ('grays', 600)] - The toolbar drop-down item text color. +/// @property {map} item-hover-background [igx-color: ('grays', 100)] - The toolbar drop-down item hover background color. +/// @property {map} item-hover-text-color [igx-color: ('grays', 600)] - The toolbar drop-down item hover text color. +/// @property {map} item-focus-background [igx-color: ('grays', 100)] - The toolbar drop-down item focus background color. +/// @property {map} item-focus-text-color [igx-color: ('grays', 600)] - The toolbar drop-down item focus text color. +/// +/// @see $default-palette +$_light-grid-toolbar: ( background-color: ( igx-color: ('grays', 50) ), - button-background: ( - igx-color: ('grays', 100) - ), - title-text-color : ( igx-color: ('grays', 600) ), + button-background: ( + igx-color: ('grays', 100) + ), + button-text-color: ( igx-color: ('grays', 600) ), diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss index 4fddf6f7044..cc207f60ea9 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss @@ -1,9 +1,64 @@ +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a light grid schema. +/// @type {Map} +/// @prop {Map} header-background [igx-color: ('grays', 100), hexrgba: #fff] - The table header background color. +/// @prop {Map} header-text-color [igx-color: ('grays', 600)] - The table header text color. +/// @prop {Number} header-border-width [1px] - The border width used for header borders. +/// @prop {String} header-border-style [solid] - The border style used for header borders. +/// @prop {Map} header-border-color [igx-color: ('grays', 200)] - The color used for header borders. +/// @prop {Map} ghost-header-text-color [igx-color: ('grays', 600)] - The dragged header text color. +/// @prop {Map} ghost-header-icon-color [igx-color: ('grays', 500)] - The dragged header icon color. +/// @prop {Color} ghost-header-background [#fff] - The dragged header background color. +/// @prop {Color} content-background [#fff] - The table body background color. +/// @prop {Map} content-text-color [igx-color: ('grays', 800)] - The table body text color. +/// @prop {Color} row-odd-background [#fff] - The background color of odd rows. +/// @prop {Color} row-even-background [#fff] - The background color of even rows. +/// @prop {Color} row-odd-text-color [inherit] - The text color of odd rows. +/// @prop {Color} row-even-text-color [inherit] - The text color of even rows. +/// @prop {Map} row-selected-background [igx-color: ('grays', 800), hexrgba: #fff] - The selected row background color. +/// @prop {Map} row-selected-text-color [igx-contrast-color: ('grays', 800)] - The selected row text color. +/// @prop {Map} row-hover-background [igx-color: ('grays', 200), hexrgba: #fff] - The hover row background color. +/// @prop {Map} row-hover-text-color [igx-contrast-color: ('grays', 200)] - The hover row text color. +/// @prop {Map} row-border-color [igx-color: ('grays', 300)] - The row bottom border color. +/// @prop {Number} pinned-border-width [2px] - The border width of the pinned border. +/// @prop {String} pinned-border-style [solid] - The CSS border style of the pinned border. +/// @prop {Map} pinned-border-color [igx-color: ('grays', 400)] - The color of the pinned border. +/// @prop {Map} cell-selected-background [igx-color: ('primary', 500)] - The selected cell background color. +/// @prop {Map} cell-selected-text-color [igx-contrast-color: ('primary', 500)] - The selected cell text color. +/// @prop {Map} resize-line-color [igx-color: ('secondary', 500)] - The table header resize line color. +/// @prop {Map} grouparea-background [igx-color: ('grays', 100), hexrgba: #fff] - The grid group area background color. +/// @prop {Map} group-row-background [igx-color: ('grays', 100), hexrgba: #fff] - The grid group row background color. +/// @prop {Map} group-row-selected-background [igx-color: ('grays', 200), hexrgba: #fff] - The drop area background on drop color. +/// @prop {Map} active-expand-icon-color [igx-color: ('grays', 500)] - The drop area background on drop color. +/// @prop {Map} active-expand-icon-hover-color [igx-color: ('primary', 500)] - The drop area background on drop color. +/// @prop {Map} group-label-column-name-text [igx-color: ('primary', 500)] - The grid group row column name text color. +/// @prop {Map} group-label-icon [igx-color: ('primary', 500)] - The grid group row icon color. +/// @prop {Map} group-label-text [igx-color: ('grays', 800)] - The grid group row text color. +/// @prop {Map} expand-all-icon-color [igx-color: ('grays', 600)] - The grid header expand all group rows icon color. +/// @prop {Map} expand-all-icon-hover-color [igx-color: ('grays', 800)] - The grid header expand all group rows icon hover color. +/// @prop {Map} expand-icon-color [igx-color: ('grays', 600)] - The grid row expand icon color. +/// @prop {Map} expand-icon-hover-color [igx-color: ('primary', 500)] - The grid row expand icon hover color. +/// @prop {Map} group-count-background [igx-color: ('grays', 200)] - The grid group row cont badge background color. +/// @prop {Map} group-count-text-color [igx-color: ('grays', 600)] - The grid group row cont badge text color. +/// @prop {Map} drop-area-text-color [igx-color: ('grays', 600)] - The drop area text color. +/// @prop {Map} drop-area-icon-color [igx-color: ('grays', 500)] - The drop area icon color. +/// @prop {Map} drop-area-background [igx-color: ('grays', 100)] - The drop area background color. +/// @prop {Map} drop-area-on-drop-background [igx-color: ('grays', 200)] - The drop area background on drop color. +/// @prop {Map} tree-filtered-text-color [igx-color: ('grays', 500)] - grouping row background color on focus. +/// @prop {Color} filtering-header-background [#fff] - The background color of the filtered column header. +/// @prop {Map} filtering-header-text-color [igx-color: ('grays', 800)] - The text color color of the filtered column header. +/// @prop {Color} filtering-row-background [#fff] - The background color of the filtering row. +/// @prop {Map} filtering-row-text-color [igx-color: ('grays', 800)] - The text-color color of the filtering row. +/// @see $default-palette $_light-grid: ( - name: 'igx-grid', - header-background: ( igx-color: ('grays', 100), - hexrgba: () + hexrgba: #fff ), header-text-color: ( @@ -39,7 +94,7 @@ $_light-grid: ( row-selected-background: ( igx-color: ('grays', 800), - hexrgba: () + hexrgba: #fff ), row-selected-text-color: ( @@ -48,7 +103,7 @@ $_light-grid: ( row-hover-background: ( igx-color: ('grays', 200), - hexrgba: () + hexrgba: #fff ), row-hover-text-color: ( @@ -97,7 +152,7 @@ $_light-grid: ( grouparea-background: ( igx-color: ('grays', 100), - hexrgba: () + hexrgba: #fff ), group-label-column-name-text: ( @@ -162,12 +217,12 @@ $_light-grid: ( group-row-background: ( igx-color: ('grays', 100), - hexrgba: () + hexrgba: #fff ), group-row-selected-background: ( igx-color: ('grays', 200), - hexrgba: () + hexrgba: #fff ), filtering-header-background: #fff, diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_icon.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_icon.scss index a3a15702924..e980f92b724 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_icon.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_icon.scss @@ -1,6 +1,19 @@ -$_light-icon: ( - name: 'igx-icon', +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a light icon schema. +/// @type {Map} +/// +/// @property {Color} color [currentColor] - The icon color. +/// @property {String} size [rem(24px)] - The icon size. +/// @property {Color} disabled-color [currentColor] - The disabled icon color. +/// +/// @see $default-palette +$_light-icon: ( color: currentColor, size: rem(24px), diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss index 3204f8d5b88..3bd6057c9db 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss @@ -1,3 +1,9 @@ +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + @import './avatar'; @import './badge'; @import './banner'; @@ -37,6 +43,48 @@ @import './toast'; @import './tooltip'; +/// The default light schema for all components. +/// @type {Map} +/// @property {Map} igx-avatar [$_light-avatar] +/// @property {Map} igx-badge [$_light-badge] +/// @property {Map} igx-banner [$_light-banner] +/// @property {Map} igx-bottom-nav [$_light-bottom-nav] +/// @property {Map} igx-button [$_light-button] +/// @property {Map} igx-button-group [$_light-button-group] +/// @property {Map} igx-calendar [$_light-calendar] +/// @property {Map} igx-card [$_light-card] +/// @property {Map} igx-carousel [$_light-carousel] +/// @property {Map} igx-checkbox [$_light-checkbox] +/// @property {Map} igx-chip [$_light-chip] +/// @property {Map} igx-column-hiding [$_light-column-hiding] +/// @property {Map} igx-combo [$_light-combo] +/// @property {Map} igx-date-picker [$_light-date-picker] +/// @property {Map} igx-dialog [$_light-dialog] +/// @property {Map} igx-drop-down [$_light-drop-down] +/// @property {Map} igx-expansion-panel [$_light-expansion-panel] +/// @property {Map} igx-grid [$_light-grid] +/// @property {Map} igx-grid-filtering [$_light-grid-filtering] +/// @property {Map} igx-grid-paginator [$_light-grid-pagination] +/// @property {Map} igx-grid-summary [$_light-grid-summary] +/// @property {Map} igx-grid-toolbar [$_light-grid-toolbar] +/// @property {Map} igx-icon [$_light-icon] +/// @property {Map} igx-input-group [$_light-input-group] +/// @property {Map} igx-list [$_light-list] +/// @property {Map} igx-navbar [$_light-navbar] +/// @property {Map} igx-navdrawer [$_light-navdrawer] +/// @property {Map} igx-overlay [$_light-overlay] +/// @property {Map} igx-progress-linear [$_light-progress-linear] +/// @property {Map} igx-progress-circular [$_light-progress-circular] +/// @property {Map} igx-radio [$_light-radio] +/// @property {Map} igx-ripple [$_light-ripple] +/// @property {Map} igx-slider [$_light-slider] +/// @property {Map} igx-snackbar [$_light-snackbar] +/// @property {Map} igx-switch [$_light-switch] +/// @property {Map} igx-tabs [$_light-tabs] +/// @property {Map} igx-time-picker [$_light-time-picker] +/// @property {Map} igx-toast [$_light-toast] +/// @property {Map} igx-tooltip [$_light-tooltip] + $light-schema: ( igx-avatar: $_light-avatar, igx-badge: $_light-badge, diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss index 825e6298020..5c444013dc3 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss @@ -1,6 +1,47 @@ -$_light-input-group: ( - name: 'igx-input-group', +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a light input-group schema. +/// @type {Map} +/// +/// @property {map} idle-text-color [igx-color: ('grays', 600)] - The input text color in the idle state. +/// @property {map} filled-text-color [igx-color: ('grays', 900)] - The input text color in the filled state. +/// @property {map} focused-text-color [igx-color: ('grays', 900)] - The input text color in the focused state. +/// @property {map} disabled-text-color [igx-color: ('grays', 500)] - The input text color in the disabled state. +/// +/// @property {map} idle-secondary-color [igx-color: ('grays', 600)] - The label color in the idle state. +/// @property {map} filled-secondary-color [igx-color: ('grays', 600)] - The label color in the filled state. +/// @property {map} focused-secondary-color [ igx-color: ('primary', 500)] - The label color in the focused state. +/// +/// @property {map} idle-bottom-line-color [igx-color: ('grays', 600)] - The bottom line and border colors in the idle state. +/// @property {map} hover-bottom-line-color [igx-color: ('grays', 900)] - The bottom line and border colors in the hover state. +/// @property {map} focused-bottom-line-color [igx-color: ('primary', 500)] - The bottom line and border colors in the focused state. +/// @property {map} interim-bottom-line-color [igx-color: ('primary', 500), rgba: .12] - The bottom line and border colors during the to-focused transition. +/// @property {map} disabled-bottom-line-color [igx-color: ('grays', 500)] - The bottom line and border colors in the disabled state. +/// @property {map} disabled-border-color [igx-color: ('grays', 500), rgba: .06] - The disabled border color for input groups of type border. +/// +/// @property {map} box-background [igx-color: ('grays', 200)] - The background color of an input group of type box. +/// @property {map} box-disabled-background [igx-color: ('grays', 50)] - The background color of an input group of type box in the disabled state. +/// +/// @property {Color} border-background [transparent] - The background color of an input group of type border. +/// @property {map} border-disabled-background [igx-color: ('grays', 50)] - The background color of an input group of type border in the disabled state. +/// +/// @property {Color} search-background [#fff] - The background color of an input group of type search. +/// @property {Color} search-disabled-background [#fff] - The background color of an input group of type search in the disabled state. +/// @property {map} search-shadow-color [igx-color: ('grays', 600)] - The shadow color of an input group of type search. +/// @property {map} search-disabled-shadow-color [igx-color: ('grays', 300)] - The shadow color of an input group of type search in the disabled state. +/// +/// @property {map} success-secondary-color [igx-color: ('success')] - The success color used in the valid state. +/// @property {map} warning-secondary-color [igx-color: ('warn')] - The warning color used in the warning state. +/// @property {map} error-secondary-color [igx-color: ('error')] - The error color used in the error state. +/// +/// @see $default-palette + +$_light-input-group: ( idle-text-color: ( igx-color: ('grays', 600) ), @@ -37,10 +78,6 @@ $_light-input-group: ( igx-color: ('grays', 900) ), - filled-bottom-line-color: ( - igx-color: ('grays', 600) - ), - focused-bottom-line-color: ( igx-color: ('primary', 500) ), @@ -50,21 +87,31 @@ $_light-input-group: ( rgba: .12 ), - disabled-bottom-line-color: rgba(0, 0, 0, .42), + disabled-bottom-line-color: ( + igx-color: ('grays', 500) + ), disabled-border-color: ( igx-color: ('grays', 500), rgba: .06 ), - box-background: rgba(0, 0, 0, .06), - box-disabled-background: rgba(0, 0, 0, .03), + box-background: ( + igx-color: ('grays', 200) + ), + + box-disabled-background: ( + igx-color: ('grays', 50) + ), border-background: transparent, - border-disabled-background: rgba(0, 0, 0, .03), - search-background: white, - search-disabled-background: white, + border-disabled-background: ( + igx-color: ('grays', 50) + ), + + search-background: #fff, + search-disabled-background: #fff, search-shadow-color: ( igx-color: ('grays', 600) diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_list.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_list.scss index 496156c114e..683afdc04dc 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_list.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_list.scss @@ -1,6 +1,23 @@ -$_light-list: ( - name: 'igx-list', +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a light list schema. +/// @type {Map} +/// +/// @property {Color} background [#fff] - The list background color. +/// @property {Color} header-background [#fff] - The list header background color. +/// @property {map} header-text-color [igx-color: ('secondary', 500)] - The list header text color. +/// @property {Color} item-background [#fff] - The list item background color. +/// @property {map} item-text-color [igx-color: ('grays', 800)] - The list item text color. +/// @property {map} item-background-active [igx-color: ('grays', 100), hexrgba: ()] - The active list item background color. +/// @property {map} item-text-color-active [igx-color: ('grays', 800)] - The active list item text color. +/// +/// @see $default-palette +$_light-list: ( background: #fff, header-background: #fff, diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navbar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navbar.scss index 8b290515cf2..2b4e378692b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navbar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navbar.scss @@ -1,13 +1,33 @@ -$_light-navbar: ( - name: 'igx-navbar', - - text-color: #fff, +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// - idle-icon-color: #fff, - - hover-icon-color: #fff, +/// Generates a light navbar schema. +/// @type {Map} +/// +/// @property {map} $background [igx-color: ('primary', 500)] - The navbar background color. +/// @property {map} $text-color [igx-contrast-color: ('primary', 500)] - The navbar text color. +/// @property {map} $idle-icon-color [igx-contrast-color: ('primary', 500)] - The navbar idle icon color. +/// @property {map} $hover-icon-color [igx-contrast-color: ('primary', 500)] - The navbar hover icon color. +/// +/// @see $default-palette +$_light-navbar: ( background: ( igx-color: ('primary', 500) + ), + + text-color: ( + igx-contrast-color: ('primary', 500) + ), + + idle-icon-color: ( + igx-contrast-color: ('primary', 500) + ), + + hover-icon-color: ( + igx-contrast-color: ('primary', 500) ) ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navdrawer.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navdrawer.scss index 358079b762d..55bedb2443a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navdrawer.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navdrawer.scss @@ -1,14 +1,43 @@ -$_light-navdrawer: ( - name: 'igx-navdrawer', +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a light navdrawer schema. +/// @type {Map} +/// +/// @property {Color} background [#fff] - The navigation drawer background color. +/// @property {Color} border-color [rgba(0, 0, 0, .14)] - The navigation drawer right border color. +/// @property {map} item-header-text-color [igx-color: ('grays', 600)] - The header's idle text color. +/// @property {map} item-text-color [igx-color: ('grays', 700)] - The item's idle text color. +/// @property {map} item-icon-color [igx-color: ('grays', 700)] - The item's icon color. +/// @property {map} item-active-text-color [igx-color: ('primary', 500)] - The item's active text color. +/// @property {map} item-active-background [igx-color: ('grays', 100)] - The item's active background color. +/// @property {map} item-active-icon-color [igx-color: ('primary', 500)] - The item's icon active color. +/// @property {map} item-hover-background [igx-color: ('grays', 200)] - The item's hover background color. +/// @property {map} item-hover-text-color [igx-color: ('grays', 800)] - The item's hover text color. +/// @property {map} item-hover-icon-color [igx-color: ('primary', 500)] - The item's hover icon color. +/// +/// @see $default-palette +$_light-navdrawer: ( background: #fff, border-color: rgba(0, 0, 0, .14), + item-header-text-color: ( + igx-color: ('grays', 600) + ), + item-text-color: ( igx-color: ('grays', 700) ), + item-icon-color: ( + igx-color: ('grays', 700) + ), + item-active-text-color: ( igx-color: ('primary', 500) ), @@ -25,14 +54,6 @@ $_light-navdrawer: ( igx-color: ('grays', 800) ), - item-header-text-color: ( - igx-color: ('grays', 600) - ), - - item-icon-color: ( - igx-color: ('grays', 700) - ), - item-active-icon-color: ( igx-color: ('primary', 500) ), diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_overlay.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_overlay.scss index 9f61a97dbf3..c85d83a2290 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_overlay.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_overlay.scss @@ -1,5 +1,16 @@ +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a light overlay schema. +/// @type {Map} +/// +/// @property {map} background-color [igx-color: ('grays', 500)] - The background color used for modal overlays. +/// +/// @see $default-palette $_light-overlay: ( - name: 'igx-overlay', background-color: ( igx-color: ('grays', 500) ) diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_progress.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_progress.scss index 2182d9adae7..94deb7defdf 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_progress.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_progress.scss @@ -1,8 +1,26 @@ +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a light progress-linear schema. +/// @type {Map} +/// +/// @property {map} track-color [igx-color: ('grays', 300)] - The main track color. +/// @property {map} fill-color-default [igx-color: ('primary', 500)] - The track default fill color. +/// @property {map} fill-color-danger [igx-color: ('error')] - The track danger fill color. +/// @property {map} fill-color-warning [igx-color: ('warn')] - The track warning fill color. +/// @property {map} fill-color-info [igx-color: ('info')] - The track info fill color. +/// @property {map} fill-color-success [igx-color: ('success')] - The track success fill color. +/// @property {color} stripes-color [rgba(#fff, .7)] - The track stripes color. +/// @property {map} text-color [igx-color: ('grays', 700)] - The track value text color. +/// +/// @see $default-palette + $_light-progress-linear: ( name: 'igx-progress-linear', - stripes-color: rgba(#fff, .7), - track-color: ( igx-color: ('grays', 300) ), @@ -27,11 +45,22 @@ $_light-progress-linear: ( igx-color: ('success') ), + stripes-color: rgba(#fff, .7), + text-color: ( igx-color: ('grays', 700) ) ); +/// Generates a light progress-circular schema. +/// @type {Map} +/// +/// @property {map} base-circle-color [igx-color: ('grays', 300)] - The base circle fill color. +/// @property {map} progress-circle-color [igx-color: ('primary', 500)] - The progress circle fill color. +/// @property {map} text-color [igx-color: ('grays', 700)] - The value text color. +/// +/// @see $default-palette + $_light-progress-circular: ( name: 'igx-progress-circular', diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_radio.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_radio.scss index 40f300d9eef..29b1f51cce8 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_radio.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_radio.scss @@ -1,3 +1,19 @@ +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a light radio schema. +/// @type {Map} +/// +/// @property {map} label-color [igx-color: ('grays', 900)] - The text color used for the label text. +/// @property {map} empty-color [igx-color: ('grays', 600)] - The unchecked border color. +/// @property {map} fill-color [igx-color: ('secondary', 500)] - The checked border and dot colors. +/// @property {map} disabled-color [igx-color: ('grays', 400)] - The disabled border and dot colors. +/// +/// @see $default-palette + $_light-radio: ( name: 'igx-radio', diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_ripple.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_ripple.scss index 6b2ff5ff80f..821f9c958e6 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_ripple.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_ripple.scss @@ -1,5 +1,17 @@ +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a light ripple schema. +/// @type {Map} +/// +/// @property {map} color [igx-color: ('grays', 800)] - The color of the ripple. +/// +/// @see $default-palette + $_light-ripple: ( - name: 'igx-ripple', color: ( igx-color: ('grays', 800) ) diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_slider.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_slider.scss index bc2f58c082a..27fcd98dde9 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_slider.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_slider.scss @@ -1,18 +1,31 @@ -$_light-slider: ( - name: 'igx-slider', +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a light slider schema. +/// @type {Map} +/// +/// @property {map} track-color [igx-color: ('secondary', 500)] - The color of the track. +/// @property {map} thumb-color [igx-color: ('secondary', 500)] - The color of the thumb. +/// @property {map} label-background-color [igx-color: ('secondary', 500)] - The background color of the bubble label. +/// @property {map} label-text-color [igx-contrast-color: ('secondary', 500)] - The text color of the bubble label. +/// @property {map} disabled-thumb-color [igx-color: ('grays', 400), hexrgba: ()] - The thumb color when its disabled. +/// @property {map} base-track-color [igx-color: ('grays', 500)] - The base background color of the track. +/// @property {map} disabled-base-track-color [igx-color: ('grays', 400)] - The base background color of the track when is disabled. +/// +/// @see $default-palette +$_light-slider: ( track-color: ( - igx-color: ('secondary', 500), + igx-color: ('secondary', 500) ), thumb-color: ( igx-color: ('secondary', 500) ), - disabled-thumb-color: ( - igx-color: ('grays', 400), - hexrgba: () - ), label-background-color: ( igx-color: ('secondary', 500) @@ -22,6 +35,11 @@ $_light-slider: ( igx-contrast-color: ('secondary', 500) ), + disabled-thumb-color: ( + igx-color: ('grays', 400), + hexrgba: () + ), + base-track-color: ( igx-color: ('grays', 500) ), diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_snackbar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_snackbar.scss index a000610499b..9c7d6ab4226 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_snackbar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_snackbar.scss @@ -1,6 +1,19 @@ -$_light-snackbar: ( - name: 'igx-snackbar', +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a light snackbar schema. +/// @type {Map} +/// +/// @property {map} background [igx-color: ('grays', 900)] - The background color used in the snackbar. +/// @property {map} text-color [igx-contrast-color: ('grays', 900)] - The text color used in the snackbar. +/// @property {map} button-color [igx-color: ('secondary', 500)] - The button color used in the snackbar. +/// +/// @see $default-palette +$_light-snackbar: ( background: ( igx-color: ('grays', 900) ), diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss index e087e80acd7..b99dfc4e92a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss @@ -1,6 +1,24 @@ -$_light-switch: ( - name: 'igx-switch', +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a light switch schema. +/// @type {Map} +/// +/// @property {map} thumb-on-color [igx-color: ('secondary', 500)] - The color of the thumb when the switch is on. +/// @property {map} track-on-color [igx-color: ('secondary', 500), rgba: .5] - The color of the track when the switch is on. +/// @property {map} thumb-off-color [igx-color: ('grays', 200), hexrgba: #fff] - The color of the thumb when the switch is off. +/// @property {map} track-off-color [igx-color: ('grays', 600)] - The color of the track when the switch is off. +/// @property {map} thumb-disabled-color [igx-color: ('grays', 400), hexrgba: #fff] - The color of the thumb when the switch is disabled. +/// @property {map} track-disabled-color [igx-color: ('grays', 300)] - The color of the track when the switch is disabled. +/// @property {map} label-color [gx-color: ('grays', 900)] - The color of the switch label +/// @property {map} label-disabled-color [gx-color: ('grays', 400)] - The color of the switch label when the switch is disabled +/// +/// @see $default-palette +$_light-switch: ( thumb-on-color: ( igx-color: ('secondary', 500) ), @@ -10,9 +28,23 @@ $_light-switch: ( rgba: .5 ), - thumb-off-color: #fafafa, + thumb-off-color: ( + igx-color: ('grays', 200), + hexrgba: #fff + ), + + track-disabled-color: ( + igx-color: ('grays', 300) + ), - track-off-color: rgba(0, 0, 0, .5), + track-off-color: ( + igx-color: ('grays', 600) + ), + + thumb-disabled-color: ( + igx-color: ('grays', 400), + hexrgba: #fff + ), label-color: ( igx-color: ('grays', 900) @@ -21,13 +53,4 @@ $_light-switch: ( label-disabled-color: ( igx-color: ('grays', 400) ), - - track-disabled-color: ( - igx-color: ('grays', 300) - ), - - thumb-disabled-color: ( - igx-color: ('grays', 400), - hexrgba: () - ) ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tabs.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tabs.scss index e16cbf08fd6..a592f4bcc4c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tabs.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tabs.scss @@ -1,28 +1,56 @@ -$_light-tabs: ( - name: 'igx-tabs', +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a light tabs schema. +/// @type {Map} +/// +/// @property {map} item-text-color [igx-color: ('grays', 700)] - The color used for the tab text color. +/// @property {map} item-background [#fff] - The background color used for the tabs header. +/// @property {map} item-hover-background [igx-color: ('grays', 200)] - The background used for the tabs on hover. +/// @property {map} item-hover-color [igx-color: ('grays', 700)] - The text color used for the tabs on hover. +/// +/// @property {map} item-active-color [igx-color: ('primary', 500)] - The color used for the active tabs text. +/// @property {map} item-active-icon-color [igx-color: ('primary', 500)] - The color used for the active tabs icon. +/// @property {map} item-active-background [igx-color: ('grays', 200)] - The color used for the active/focused tab background. +/// +/// @property {map} indicator-color [igx-color: ('primary', 500)] - The color used for the active tab indicator. +/// @property {map} button-color [igx-color: ('grays', 500)] - The color used for the button icon/text color. +/// @property {map} button-hover-color [igx-color: ('grays', 600)] - The color used for the button icon/text color on hover. +/// @property {Color} button-background [#fff] - The color used for the button background. +/// @property {map} button-hover-background [igx-color: ('grays', 100)] - The color used for the button background on hover. +/// +/// @property {map} tab-ripple-color [igx-color: ('grays', 100)] - The color used for the button background. +/// @property {map} button-ripple-color [igx-color: ('grays', 100)] - The color used for the button background on hover. +/// +/// @see $default-palette + +$_light-tabs: ( item-text-color: ( igx-color: ('grays', 700) ), item-background: #fff, - item-hover-color: ( - igx-color: ('grays', 700) - ), - item-hover-background: ( igx-color: ('grays', 200) ), - item-active-icon-color: ( - igx-color: ('primary', 500) + item-hover-color: ( + igx-color: ('grays', 700) ), item-active-color: ( igx-color: ('primary', 500) ), + item-active-icon-color: ( + igx-color: ('primary', 500) + ), + item-active-background: ( igx-color: ('grays', 200) ), diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_time-picker.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_time-picker.scss index 41ef81eabec..d3bd091f50f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_time-picker.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_time-picker.scss @@ -1,6 +1,24 @@ -$_light-time-picker: ( - name: 'igx-time-picker', +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a light time-picker schema. +/// @type {Map} +/// +/// @property {map} text-color [igx-color: ('grays', 500)] - The text color of a open time picker. +/// @property {map} hover-text-color [igx-color: ('secondary', 500)] - The hover text color of a open time picker. +/// @property {map} selected-text-color [igx-color: ('secondary', 500)] - The text color of a selected item in time picker. +/// @property {map} active-item-background [igx-color: ('grays', 100)] - The background color for current item in focused column inside the time picker. +/// @property {map} header-background [igx-color: ('secondary', 500)] - The header background color of a time picker. +/// @property {map} header-hour-text-color [igx-contrast-color: ('secondary', 500)] - The header hour text color of a time picker. +/// @property {map} header-time-period-color [igx-contrast-color: ('secondary', 500), rgba: .8] - The header AM/PM text color of a time picker. +/// @property {Color} background-color [#fff] - The time-picker panel background color. +/// +/// @see $default-palette +$_light-time-picker: ( text-color: ( igx-color: ('grays', 500) ), @@ -29,5 +47,5 @@ $_light-time-picker: ( rgba: .8 ), - background-color: white + background-color: #fff ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_toast.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_toast.scss index 34be2a45833..88c790a84c9 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_toast.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_toast.scss @@ -1,6 +1,18 @@ -$_light-toast: ( - name: 'igx-toast', +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a light toast schema. +/// @type {Map} +/// +/// @property {map} background [igx-color: ('grays', 600)] - The background color used for the toast. +/// @property {map} text-color [igx-contrast-color: ('grays', 600)] - The text-color used for the toast. +/// +/// @see $default-palette +$_light-toast: ( background: ( igx-color: ('grays', 600) ), diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tooltip.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tooltip.scss index 5ddfd338f51..75b57e7ae7e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tooltip.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tooltip.scss @@ -1,6 +1,19 @@ -$_light-tooltip: ( - name: 'igx-tooltip', +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a light tooltip schema. +/// @type {Map} +/// +/// @property {map} background [igx-color: ('grays', 700), hexrgba: (), rgba: .9] - The background color of the tooltip. +/// @property {map} text-color [igx-color: ('grays', 700), hexrgba: (), rgba: .9, text-contrast: ()] - The text color of the tooltip. +/// @property {Number} roundness [rem(4px)] - The border roundness of the tooltip. Smaller values mean less roundness. +/// +/// @see $default-palette +$_light-tooltip: ( background: ( igx-color: ('grays', 700), hexrgba: (), diff --git a/src/app/mask/mask.sample.css b/src/app/mask/mask.sample.css index e01d36d9b57..d4593fc1ba3 100644 --- a/src/app/mask/mask.sample.css +++ b/src/app/mask/mask.sample.css @@ -3,7 +3,6 @@ position: relative; height: 100%; margin: 0 auto; - background: #fff; } .sample-content { @@ -25,24 +24,6 @@ min-width: 280px; } -@-webkit-keyframes fade-in { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} - -@keyframes fade-in { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} - .input-sample { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); padding: 24px 16px; @@ -54,7 +35,6 @@ margin-bottom: 48px; } -.igx-form-group + .igx-form-group { +.igx-form-group+.igx-form-group { margin-top: 42px; } - diff --git a/src/index.html b/src/index.html index b62752b3f8a..91a926bdd06 100644 --- a/src/index.html +++ b/src/index.html @@ -8,7 +8,7 @@ - + diff --git a/src/styles/igniteui-theme.scss b/src/styles/igniteui-theme.scss index db8f9939cd0..c491c2c390f 100644 --- a/src/styles/igniteui-theme.scss +++ b/src/styles/igniteui-theme.scss @@ -1,8 +1,6 @@ @import url('https://fonts.googleapis.com/icon?family=Material+Icons'); @import url('https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700'); - @import '../../projects/igniteui-angular/src/lib/core/styles/themes/index'; -@import '../../projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark-green/index'; @import 'mixins'; @import 'app-palettes'; @@ -18,19 +16,18 @@ color: $igx-foreground-color; @include scrollbar-love(); - @include igx-theme($default-palette, $legacy-support: true); + @include igx-theme($default-palette); } - -.dark-green-theme { - $igx-background-color: #484848; +.dark-theme { + $igx-background-color: #333; $igx-foreground-color: text-contrast($igx-background-color); background: $igx-background-color; color: $igx-foreground-color; - @include scrollbar-love($igx-background-color); - @include igx-green-theme(); + @include scrollbar-love(lighten($igx-background-color, 15%)); + @include igx-dark-theme($green-palette); .igniteui-logo__text { fill: #fff;