Skip to content

feat(themes): export component themes from angular to theming #16027

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: 20.0.x
Choose a base branch
from
Open

feat(themes): export component themes from angular to theming #16027

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 0 additions & 58 deletions projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,65 +1,7 @@
@use 'sass:map';
@use '../../base' as *;
@use '../../themes/schemas' as *;
@use 'igniteui-theming/sass/animations/easings' as *;

////
/// @group themes
/// @access public
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
////

/// 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} $color [null] - The text color used of the avatar.
/// @param {Color} $icon-color [null] - The icon color used of the avatar.
/// @param {Color} $background [null] - The background color used of the avatar.
/// @param {Number} $border-radius [null] - The border-radius used of the avatar.
/// @param {Number} $size [null] - The size of the avatar.
/// @requires $light-material-schema
///
/// @example scss Change the background and icon colors in icon avatars
/// $my-avatar-theme: avatar-theme($icon-background: black, $icon-color: white);
/// // Pass the theme to the css-vars() mixin
/// @include css-vars($my-avatar-theme);
@function avatar-theme(
$schema: $light-material-schema,
$background: null,
$color: null,
$icon-color: null,
$border-radius: null,
$size: null,
) {
$name: 'igx-avatar';
$avatar-schema: ();

@if map.has-key($schema, 'avatar') {
$avatar-schema: map.get($schema, 'avatar');
} @else {
$avatar-schema: $schema;
}

$theme: digest-schema($avatar-schema);

@if not($color) and $background {
$color: adaptive-contrast(var(--background));
}

@if not($icon-color) and $background {
$icon-color: adaptive-contrast(var(--background));
}

@return extend($theme, (
name: $name,
background: $background,
color: $color,
icon-color: $icon-color,
border-radius: $border-radius,
size: $size,
));
}

/// @deprecated Use the `css-vars` mixin instead.
/// @see {mixin} css-vars
/// @param {Map} $theme - The theme used to style the component.
Expand Down
72 changes: 0 additions & 72 deletions projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,78 +1,6 @@
@use '../../base' as *;
@use '../../themes/schemas' as *;
@use 'sass:map';

////
/// @group themes
/// @access public
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
////

/// 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 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 {box-shadow} $shadow [null] - Sets a shadow to be used for the badge.
/// @param {Number} $border-radius [null] - The border radius used for badge component.
///
/// @requires $light-material-schema
///
/// @example scss Change the text and icon colors in a badge
/// $my-badge-theme: badge-theme($icon-color: black, $background-color: white);
/// // Pass the theme to the css-vars() mixin
/// @include css-vars($my-badge-theme);
@function badge-theme(
$schema: $light-material-schema,

$icon-color: null,
$text-color: null,

$border-color: null,
$border-radius: null,

$background-color: null,
$shadow: null,
) {
$name: 'igx-badge';
$badge-schema: ();

@if map.has-key($schema, 'badge') {
$badge-schema: map.get($schema, 'badge');
} @else {
$badge-schema: $schema;
}

$theme: digest-schema($badge-schema);

@if not($icon-color) and $background-color {
$icon-color: adaptive-contrast(var(--background-color));
}

@if not($text-color) and $background-color {
$text-color: adaptive-contrast(var(--background-color));
}

@if not($shadow) {
$elevation: map.get($badge-schema, 'elevation');
$shadow: elevation($elevation);
}

@return extend($theme, (
name: $name,
icon-color: $icon-color,
text-color: $text-color,
border-color: $border-color,
border-radius: $border-radius,
background-color: $background-color,
shadow: $shadow,
));
}

/// @deprecated Use the `css-vars` mixin instead.
/// @see {mixin} css-vars
/// @param {Map} $theme - The theme used to style the component.
Expand Down
62 changes: 0 additions & 62 deletions projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,67 +1,5 @@
@use 'sass:map';
@use '../../base' as *;
@use '../../themes/schemas' as *;

////
/// @group themes
/// @access public
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
////

/// 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} $banner-background [null] - The color used for the banner background.
/// @param {Color} $banner-message-color [null] - The color used for the banner label.
/// @param {Color} $banner-border-color [null] - The color used for the banner border.
/// @param {Color} $banner-illustration-color [null] - The color used for the banner illustration.
/// @param {Number} $border-radius [null] - The border-radius for the banner.
///
/// @requires $light-material-schema
///
/// @example scss Change the background in banner
/// $my-banner-theme: banner-theme($banner-background: #000);
/// // Pass the theme to the css-vars() mixin
/// @include css-vars($my-banner-theme);
@function banner-theme(
$schema: $light-material-schema,
$banner-background: null,
$banner-message-color: null,
$banner-border-color: null,
$banner-illustration-color: null,
$border-radius: null,
) {
$name: 'igx-banner';
$selector: 'igx-banner, .igx-banner';
$banner-schema: ();

@if map.has-key($schema, 'banner') {
$banner-schema: map.get($schema, 'banner');
} @else {
$banner-schema: $schema;
}

$theme: digest-schema($banner-schema);

@if not($banner-message-color) and $banner-background {
$banner-message-color: adaptive-contrast(var(--banner-background));
}

@if not($banner-illustration-color) and $banner-background {
$banner-illustration-color: adaptive-contrast(var(--banner-background));
}

@return extend($theme, (
name: $name,
selector: $selector,
banner-background: $banner-background,
banner-message-color: $banner-message-color,
banner-border-color: $banner-border-color,
banner-illustration-color: $banner-illustration-color,
border-radius: $border-radius,
));
}

/// @deprecated Use the `css-vars` mixin instead.
/// @see {mixin} css-vars
Expand Down
100 changes: 0 additions & 100 deletions projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,107 +1,7 @@
@use 'sass:map';
@use 'sass:meta';
@use '../../base' as *;
@use '../../themes/schemas' as *;
@use 'igniteui-theming/sass/animations/easings' as *;

////
/// @group themes
/// @access public
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
////

/// If only background color is specified,
/// the label and icon colors 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} $background [null] - The background color used for the toast.
/// @param {Color} $label-color [null] - The label color used in idle state.
/// @param {Color} $icon-color [null] - The icon color used in idle state.
/// @param {Color} $label-selected-color [null] - The label color used in selected state.
/// @param {Color} $icon-selected-color [null] - The icon color used in selected state.
/// @param {Color} $icon-disabled-color [null] - The disabled color of the icon.
/// @param {Color} $label-disabled-color [null] - The disabled color of the label.
/// @param {Color} $border-color [null] - The border color of the bottom navigation.
/// @param {box-shadow} $shadow [null] - Sets a shadow to be used for the bar.
/// @requires $light-material-schema
/// @example scss Set a custom background color
/// $my-bottom-nav-theme: bottom-nav-theme($background: black);
/// // Pass the theme to the css-vars() mixin
/// @include css-vars($my-bottom-nav-theme);
@function bottom-nav-theme(
$schema: $light-material-schema,
$background: null,
$icon-color: null,
$icon-selected-color: null,
$label-color: null,
$label-selected-color: null,
$icon-disabled-color: null,
$label-disabled-color: null,
$border-color: null,
$shadow: null,
) {
$name: 'igx-bottom-nav';
$bottom-nav-schema: ();

@if map.has-key($schema, 'bottom-nav') {
$bottom-nav-schema: map.get($schema, 'bottom-nav');
} @else {
$bottom-nav-schema: $schema;
}

$theme: digest-schema($bottom-nav-schema);

@if not($label-color) and not($icon-color) and $background {
$label-color: adaptive-contrast(var(--background));
}

@if not($icon-color) and $label-color {
$icon-color: $label-color;
}

@if not($label-color) and $icon-color {
$label-color: $icon-color;
}

@if not($icon-disabled-color) and not($label-disabled-color) and $label-color {
$label-disabled-color: adaptive-contrast(var(--background));
}

@if not($icon-disabled-color) and $label-disabled-color {
$icon-disabled-color: $label-disabled-color;
}

@if not($label-disabled-color) and $icon-disabled-color {
$label-disabled-color: $icon-disabled-color;
}

@if not($icon-selected-color) and $label-selected-color {
$icon-selected-color: $label-selected-color;
}

@if not($label-selected-color) and $icon-selected-color {
$label-selected-color: $icon-selected-color;
}

@if not($shadow) {
$elevation: map.get($bottom-nav-schema, 'elevation');
$shadow: elevation($elevation);
}

@return extend($theme, (
name: $name,
background: $background,
icon-color: $icon-color,
icon-selected-color: $icon-selected-color,
label-color: $label-color,
label-selected-color: $label-selected-color,
icon-disabled-color: $icon-disabled-color,
label-disabled-color: $label-disabled-color,
border-color: $border-color,
shadow: $shadow,
));
}

/// @deprecated Use the `css-vars` mixin instead.
/// @see {mixin} css-vars
/// @param {Map} $theme - The theme used to style the component.
Expand Down
Loading
Loading