diff --git a/sass/themes/components/_index.scss b/sass/themes/components/_index.scss index a53ca8d1..c1ad66f0 100644 --- a/sass/themes/components/_index.scss +++ b/sass/themes/components/_index.scss @@ -1,3 +1,4 @@ +@forward 'action-strip/action-strip-theme'; @forward 'avatar/avatar-theme'; @forward 'badge/badge-theme'; @forward 'banner/banner-theme'; @@ -22,6 +23,7 @@ @forward 'icon/icon-theme'; @forward 'icon-button/icon-button-theme'; @forward 'input/input-theme'; +@forward 'input/file-input-theme'; @forward 'label/label-theme'; @forward 'list/list-theme'; @forward 'navbar/navbar-theme'; diff --git a/sass/themes/components/action-strip/_action-strip-theme.scss b/sass/themes/components/action-strip/_action-strip-theme.scss new file mode 100644 index 00000000..0f584e9a --- /dev/null +++ b/sass/themes/components/action-strip/_action-strip-theme.scss @@ -0,0 +1,68 @@ +@use 'sass:map'; +@use '../../config'; +@use '../../functions' as *; +@use '../../schemas/' as *; +@use '../../../utils/map' as *; +@use '../../../color/functions' as *; + +//// +/// @group themes +/// @package theming +/// @access public +/// @author Simeon Simeonoff +/// @author Marin Popov +//// + +/// If only background color is specified, text/icon color will be assigned automatically to a contrasting color. +/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. +/// +/// @param {Color} $icon-color [null] - The color used for the actions icons. +/// @param {Color} $background [null] - The color used for the action strip component content background. +/// @param {Color} $actions-background [null] - The color used for the actions background. +/// @param {Color} $delete-action [null] - The color used for the delete icon in action strip component. +/// @param {List} $actions-border-radius [null] - The border radius used for actions container inside action strip component. +/// +/// @example scss Change the background and icon colors in action strip +/// $my-action-strip-theme: action-strip-theme($background: black); +/// // Pass the theme to the css-vars() mixin +/// @include css-vars($my-action-strip-theme); +@function action-strip-theme( + $schema: $light-material-schema, + + $background: null, + $actions-background: null, + $icon-color: null, + $delete-action: null, + $actions-border-radius: null +) { + $name: 'igx-action-strip'; + $action-strip-schema: (); + + @if map.has-key($schema, 'action-strip') { + $action-strip-schema: map.get($schema, 'action-strip'); + } @else { + $action-strip-schema: $schema; + } + + $theme: digest-schema($action-strip-schema); + + @if not($icon-color) and $actions-background { + $icon-color: adaptive-contrast(var(--actions-background)); + } + + @if not($actions-border-radius) { + $actions-border-radius: map.get($theme, 'actions-border-radius'); + } + + @return extend( + $theme, + ( + name: $name, + background: $background, + actions-background: $actions-background, + icon-color: $icon-color, + delete-action: $delete-action, + actions-border-radius: $actions-border-radius, + ) + ); +} diff --git a/sass/themes/components/grid/_index.scss b/sass/themes/components/grid/_index.scss index 3f80ac6a..9fd9c91e 100644 --- a/sass/themes/components/grid/_index.scss +++ b/sass/themes/components/grid/_index.scss @@ -1,3 +1,4 @@ @forward 'grid-theme'; @forward 'grid-summary-theme'; @forward 'grid-toolbar-theme'; +@forward 'pivot-data-selector-theme'; diff --git a/sass/themes/components/grid/_pivot-data-selector-theme.scss b/sass/themes/components/grid/_pivot-data-selector-theme.scss new file mode 100644 index 00000000..4276cd33 --- /dev/null +++ b/sass/themes/components/grid/_pivot-data-selector-theme.scss @@ -0,0 +1,36 @@ +@use 'sass:map'; +@use '../../config'; +@use '../../functions' as *; +@use '../../schemas/' as *; +@use '../../../utils/map' as *; +@use '../../../color/functions' as *; +@use '../../../elevations/' as *; + +//// +/// @group themes +/// @package theming +/// @access public +/// @author Simeon Simeonoff +//// + +/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. +@function pivot-data-selector-theme($schema: $light-material-schema, $background: null) { + $name: 'igx-pivot-data-selector'; + $selector: '.igx-pivot-data-selector'; + $pivot-data-selector-schema: (); + + @if map.has-key($schema, 'pivot-data-selector') { + $pivot-data-selector-schema: map.get($schema, 'pivot-data-selector'); + } @else { + $pivot-data-selector-schema: $schema; + } + + $theme: digest-schema($pivot-data-selector-schema); + + @return extend( + $theme, + ( + name: $name, + ) + ); +} diff --git a/sass/themes/components/input/_file-input-theme.scss b/sass/themes/components/input/_file-input-theme.scss new file mode 100644 index 00000000..5cf117e7 --- /dev/null +++ b/sass/themes/components/input/_file-input-theme.scss @@ -0,0 +1,150 @@ +@use 'sass:map'; +@use '../../config'; +@use '../../functions' as *; +@use '../../schemas/' as *; +@use '../../../utils/map' as *; +@use '../../../color/functions' as *; +@use '../../../elevations/' as *; + +//// +/// @group themes +/// @package theming +/// @access public +//// + +/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. +/// @param {Color} $file-names-background [null] - The file names container background color. +/// @param {Color} $file-names-background--focused [null] - The file names container background color when the file input is focused. +/// @param {Color} $file-names-background--filled [null] - The file names container background color when the file input is filled. +/// @param {Color} $file-names-background--disabled [null] - The file names container background color when the file input is disabled. +/// @param {Color} $file-names-foreground [null] - The file names color. +/// @param {Color} $file-names-foreground--focused [null] - The file names color when the file input is focused. +/// @param {Color} $file-names-foreground--filled [null] - The file names color when the file input is filled. +/// @param {Color} $file-names-foreground--disabled [null] - The file names color when the file input is disabled. +/// @param {Color} $file-selector-button-background [null] - The file input selector button background color. +/// @param {Color} $file-selector-button-background--focused [null] - The selector button background color when the file input is focused. +/// @param {Color} $file-selector-button-background--filled [null] - The selector button background color when the file input is filled. +/// @param {Color} $file-selector-button-background--disabled [null] - The selector button background color when the file input is disabled. +/// @param {Color} $file-selector-button-foreground [null] - The file input selector button foreground color. +/// @param {Color} $file-selector-button-foreground--focused [null] - The selector button foreground color when the file input is focused. +/// @param {Color} $file-selector-button-foreground--filled [null] - The selector button foreground color when the file input is filled. +/// @param {Color} $file-selector-button-foreground--disabled [null] - The selector button foreground color when the file input is disabled. +/// @example scss Change the focused border and label colors +/// $my-file-input-theme: file-input-theme($file-names-foreground: #09f); +/// // Pass the theme to the css-vars() mixin +/// @include css-vars($my-file-input-theme); +@function file-input-theme( + $schema: $light-material-schema, + $file-names-background: null, + $file-names-background--focused: null, + $file-names-background--filled: null, + $file-names-background--disabled: null, + $file-names-foreground: null, + $file-names-foreground--focused: null, + $file-names-foreground--filled: null, + $file-names-foreground--disabled: null, + + $file-selector-button-background: null, + $file-selector-button-background--focused: null, + $file-selector-button-background--filled: null, + $file-selector-button-background--disabled: null, + $file-selector-button-foreground: null, + $file-selector-button-foreground--focused: null, + $file-selector-button-foreground--filled: null, + $file-selector-button-foreground--disabled: null +) { + $name: 'igx-file-input'; + $file-input-schema: (); + + @if map.has-key($schema, 'file-input') { + $file-input-schema: map.get($schema, 'file-input'); + } @else { + $file-input-schema: $schema; + } + + $theme: digest-schema($file-input-schema); + + @if $file-names-background != transparent { + @if not($file-names-background--focused) and $file-names-background { + $file-names-background--focused: dynamic-shade(var(--file-names-background)); + } + + @if not($file-names-background--filled) and $file-names-background { + $file-names-background--filled: $file-names-background; + } + + @if not($file-names-background--disabled) and $file-names-background { + $file-names-background--disabled: hsla(from $file-names-background h s l / 0.4); + } + + @if not($file-names-foreground) and $file-names-background { + $file-names-foreground: adaptive-contrast($file-names-background); + } + + @if not($file-names-foreground--focused) and $file-names-background--focused { + $file-names-foreground--focused: adaptive-contrast($file-names-background--focused); + } + + @if not($file-names-foreground--filled) and $file-names-background--filled { + $file-names-foreground--filled: adaptive-contrast($file-names-background--filled); + } + + @if not($file-names-foreground--disabled) and $file-names-background--disabled { + $file-names-foreground--disabled: adaptive-contrast($file-names-background--disabled); + } + } + + @if $file-selector-button-background != transparent { + @if not($file-selector-button-background--focused) and $file-selector-button-background { + $file-selector-button-background--focused: dynamic-shade(var(--file-selector-button-background)); + } + + @if not($file-selector-button-background--filled) and $file-selector-button-background { + $file-selector-button-background--filled: $file-selector-button-background; + } + + @if not($file-selector-button-background--disabled) and $file-selector-button-background { + $file-selector-button-background--disabled: hsla(from $file-selector-button-background h s l / 0.4); + } + + @if not($file-selector-button-foreground) and $file-selector-button-background { + $file-selector-button-foreground: adaptive-contrast($file-selector-button-background); + } + + @if not($file-selector-button-foreground--focused) and $file-selector-button-background--focused { + $file-selector-button-foreground--focused: adaptive-contrast($file-selector-button-background--focused); + } + + @if not($file-selector-button-foreground--filled) and $file-selector-button-background--filled { + $file-selector-button-foreground--filled: adaptive-contrast($file-selector-button-background--filled); + } + + @if not($file-selector-button-foreground--disabled) and $file-selector-button-background--disabled { + $file-selector-button-foreground--disabled: adaptive-contrast($file-selector-button-background--disabled); + } + } + + @return extend( + $theme, + ( + name: $name, + file-names-background: $file-names-background, + file-names-background--focused: $file-names-background--focused, + file-names-background--filled: $file-names-background--filled, + file-names-background--disabled: $file-names-background--disabled, + file-names-foreground: $file-names-foreground, + file-names-foreground--focused: $file-names-foreground--focused, + file-names-foreground--filled: $file-names-foreground--filled, + file-names-foreground--disabled: $file-names-foreground--disabled, + + file-selector-button-background: $file-selector-button-background, + file-selector-button-background--focused: $file-selector-button-background--focused, + file-selector-button-background--filled: $file-selector-button-background--filled, + file-selector-button-background--disabled: $file-selector-button-background--disabled, + file-selector-button-foreground: $file-selector-button-foreground, + file-selector-button-foreground--focused: $file-selector-button-foreground--focused, + file-selector-button-foreground--filled: $file-selector-button-foreground--filled, + file-selector-button-foreground--disabled: $file-selector-button-foreground--disabled, + ) + ); +}