Skip to content

Commit c40c09f

Browse files
didimmovasimeonoff
didimmova
and
simeonoff
authored
chore(themes): move leftover component themes from angular (#477)
* chore(themes): move leftover component themmes from angular * chore(themes): change route to config * feat(file-input): add conditional styles to file input theme * chore(themes): add @Package theming meta to themes --------- Co-authored-by: Simeon Simeonoff <[email protected]>
1 parent c328a7d commit c40c09f

File tree

5 files changed

+257
-0
lines changed

5 files changed

+257
-0
lines changed

‎sass/themes/components/_index.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@forward 'action-strip/action-strip-theme';
12
@forward 'avatar/avatar-theme';
23
@forward 'badge/badge-theme';
34
@forward 'banner/banner-theme';
@@ -22,6 +23,7 @@
2223
@forward 'icon/icon-theme';
2324
@forward 'icon-button/icon-button-theme';
2425
@forward 'input/input-theme';
26+
@forward 'input/file-input-theme';
2527
@forward 'label/label-theme';
2628
@forward 'list/list-theme';
2729
@forward 'navbar/navbar-theme';

‎sass/themes/components/action-strip/_action-strip-theme.scss‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
@use 'sass:map';
2+
@use '../../config';
3+
@use '../../functions' as *;
4+
@use '../../schemas/' as *;
5+
@use '../../../utils/map' as *;
6+
@use '../../../color/functions' as *;
7+
8+
////
9+
/// @group themes
10+
/// @package theming
11+
/// @access public
12+
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
13+
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
14+
////
15+
16+
/// If only background color is specified, text/icon color will be assigned automatically to a contrasting color.
17+
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
18+
///
19+
/// @param {Color} $icon-color [null] - The color used for the actions icons.
20+
/// @param {Color} $background [null] - The color used for the action strip component content background.
21+
/// @param {Color} $actions-background [null] - The color used for the actions background.
22+
/// @param {Color} $delete-action [null] - The color used for the delete icon in action strip component.
23+
/// @param {List} $actions-border-radius [null] - The border radius used for actions container inside action strip component.
24+
///
25+
/// @example scss Change the background and icon colors in action strip
26+
/// $my-action-strip-theme: action-strip-theme($background: black);
27+
/// // Pass the theme to the css-vars() mixin
28+
/// @include css-vars($my-action-strip-theme);
29+
@function action-strip-theme(
30+
$schema: $light-material-schema,
31+
32+
$background: null,
33+
$actions-background: null,
34+
$icon-color: null,
35+
$delete-action: null,
36+
$actions-border-radius: null
37+
) {
38+
$name: 'igx-action-strip';
39+
$action-strip-schema: ();
40+
41+
@if map.has-key($schema, 'action-strip') {
42+
$action-strip-schema: map.get($schema, 'action-strip');
43+
} @else {
44+
$action-strip-schema: $schema;
45+
}
46+
47+
$theme: digest-schema($action-strip-schema);
48+
49+
@if not($icon-color) and $actions-background {
50+
$icon-color: adaptive-contrast(var(--actions-background));
51+
}
52+
53+
@if not($actions-border-radius) {
54+
$actions-border-radius: map.get($theme, 'actions-border-radius');
55+
}
56+
57+
@return extend(
58+
$theme,
59+
(
60+
name: $name,
61+
background: $background,
62+
actions-background: $actions-background,
63+
icon-color: $icon-color,
64+
delete-action: $delete-action,
65+
actions-border-radius: $actions-border-radius,
66+
)
67+
);
68+
}

‎sass/themes/components/grid/_index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
@forward 'grid-theme';
22
@forward 'grid-summary-theme';
33
@forward 'grid-toolbar-theme';
4+
@forward 'pivot-data-selector-theme';

‎sass/themes/components/grid/_pivot-data-selector-theme.scss‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
@use 'sass:map';
2+
@use '../../config';
3+
@use '../../functions' as *;
4+
@use '../../schemas/' as *;
5+
@use '../../../utils/map' as *;
6+
@use '../../../color/functions' as *;
7+
@use '../../../elevations/' as *;
8+
9+
////
10+
/// @group themes
11+
/// @package theming
12+
/// @access public
13+
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
14+
////
15+
16+
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
17+
@function pivot-data-selector-theme($schema: $light-material-schema, $background: null) {
18+
$name: 'igx-pivot-data-selector';
19+
$selector: '.igx-pivot-data-selector';
20+
$pivot-data-selector-schema: ();
21+
22+
@if map.has-key($schema, 'pivot-data-selector') {
23+
$pivot-data-selector-schema: map.get($schema, 'pivot-data-selector');
24+
} @else {
25+
$pivot-data-selector-schema: $schema;
26+
}
27+
28+
$theme: digest-schema($pivot-data-selector-schema);
29+
30+
@return extend(
31+
$theme,
32+
(
33+
name: $name,
34+
)
35+
);
36+
}

‎sass/themes/components/input/_file-input-theme.scss‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
@use 'sass:map';
2+
@use '../../config';
3+
@use '../../functions' as *;
4+
@use '../../schemas/' as *;
5+
@use '../../../utils/map' as *;
6+
@use '../../../color/functions' as *;
7+
@use '../../../elevations/' as *;
8+
9+
////
10+
/// @group themes
11+
/// @package theming
12+
/// @access public
13+
////
14+
15+
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
16+
/// @param {Color} $file-names-background [null] - The file names container background color.
17+
/// @param {Color} $file-names-background--focused [null] - The file names container background color when the file input is focused.
18+
/// @param {Color} $file-names-background--filled [null] - The file names container background color when the file input is filled.
19+
/// @param {Color} $file-names-background--disabled [null] - The file names container background color when the file input is disabled.
20+
/// @param {Color} $file-names-foreground [null] - The file names color.
21+
/// @param {Color} $file-names-foreground--focused [null] - The file names color when the file input is focused.
22+
/// @param {Color} $file-names-foreground--filled [null] - The file names color when the file input is filled.
23+
/// @param {Color} $file-names-foreground--disabled [null] - The file names color when the file input is disabled.
24+
/// @param {Color} $file-selector-button-background [null] - The file input selector button background color.
25+
/// @param {Color} $file-selector-button-background--focused [null] - The selector button background color when the file input is focused.
26+
/// @param {Color} $file-selector-button-background--filled [null] - The selector button background color when the file input is filled.
27+
/// @param {Color} $file-selector-button-background--disabled [null] - The selector button background color when the file input is disabled.
28+
/// @param {Color} $file-selector-button-foreground [null] - The file input selector button foreground color.
29+
/// @param {Color} $file-selector-button-foreground--focused [null] - The selector button foreground color when the file input is focused.
30+
/// @param {Color} $file-selector-button-foreground--filled [null] - The selector button foreground color when the file input is filled.
31+
/// @param {Color} $file-selector-button-foreground--disabled [null] - The selector button foreground color when the file input is disabled.
32+
/// @example scss Change the focused border and label colors
33+
/// $my-file-input-theme: file-input-theme($file-names-foreground: #09f);
34+
/// // Pass the theme to the css-vars() mixin
35+
/// @include css-vars($my-file-input-theme);
36+
@function file-input-theme(
37+
$schema: $light-material-schema,
38+
$file-names-background: null,
39+
$file-names-background--focused: null,
40+
$file-names-background--filled: null,
41+
$file-names-background--disabled: null,
42+
$file-names-foreground: null,
43+
$file-names-foreground--focused: null,
44+
$file-names-foreground--filled: null,
45+
$file-names-foreground--disabled: null,
46+
47+
$file-selector-button-background: null,
48+
$file-selector-button-background--focused: null,
49+
$file-selector-button-background--filled: null,
50+
$file-selector-button-background--disabled: null,
51+
$file-selector-button-foreground: null,
52+
$file-selector-button-foreground--focused: null,
53+
$file-selector-button-foreground--filled: null,
54+
$file-selector-button-foreground--disabled: null
55+
) {
56+
$name: 'igx-file-input';
57+
$file-input-schema: ();
58+
59+
@if map.has-key($schema, 'file-input') {
60+
$file-input-schema: map.get($schema, 'file-input');
61+
} @else {
62+
$file-input-schema: $schema;
63+
}
64+
65+
$theme: digest-schema($file-input-schema);
66+
67+
@if $file-names-background != transparent {
68+
@if not($file-names-background--focused) and $file-names-background {
69+
$file-names-background--focused: dynamic-shade(var(--file-names-background));
70+
}
71+
72+
@if not($file-names-background--filled) and $file-names-background {
73+
$file-names-background--filled: $file-names-background;
74+
}
75+
76+
@if not($file-names-background--disabled) and $file-names-background {
77+
$file-names-background--disabled: hsla(from $file-names-background h s l / 0.4);
78+
}
79+
80+
@if not($file-names-foreground) and $file-names-background {
81+
$file-names-foreground: adaptive-contrast($file-names-background);
82+
}
83+
84+
@if not($file-names-foreground--focused) and $file-names-background--focused {
85+
$file-names-foreground--focused: adaptive-contrast($file-names-background--focused);
86+
}
87+
88+
@if not($file-names-foreground--filled) and $file-names-background--filled {
89+
$file-names-foreground--filled: adaptive-contrast($file-names-background--filled);
90+
}
91+
92+
@if not($file-names-foreground--disabled) and $file-names-background--disabled {
93+
$file-names-foreground--disabled: adaptive-contrast($file-names-background--disabled);
94+
}
95+
}
96+
97+
@if $file-selector-button-background != transparent {
98+
@if not($file-selector-button-background--focused) and $file-selector-button-background {
99+
$file-selector-button-background--focused: dynamic-shade(var(--file-selector-button-background));
100+
}
101+
102+
@if not($file-selector-button-background--filled) and $file-selector-button-background {
103+
$file-selector-button-background--filled: $file-selector-button-background;
104+
}
105+
106+
@if not($file-selector-button-background--disabled) and $file-selector-button-background {
107+
$file-selector-button-background--disabled: hsla(from $file-selector-button-background h s l / 0.4);
108+
}
109+
110+
@if not($file-selector-button-foreground) and $file-selector-button-background {
111+
$file-selector-button-foreground: adaptive-contrast($file-selector-button-background);
112+
}
113+
114+
@if not($file-selector-button-foreground--focused) and $file-selector-button-background--focused {
115+
$file-selector-button-foreground--focused: adaptive-contrast($file-selector-button-background--focused);
116+
}
117+
118+
@if not($file-selector-button-foreground--filled) and $file-selector-button-background--filled {
119+
$file-selector-button-foreground--filled: adaptive-contrast($file-selector-button-background--filled);
120+
}
121+
122+
@if not($file-selector-button-foreground--disabled) and $file-selector-button-background--disabled {
123+
$file-selector-button-foreground--disabled: adaptive-contrast($file-selector-button-background--disabled);
124+
}
125+
}
126+
127+
@return extend(
128+
$theme,
129+
(
130+
name: $name,
131+
file-names-background: $file-names-background,
132+
file-names-background--focused: $file-names-background--focused,
133+
file-names-background--filled: $file-names-background--filled,
134+
file-names-background--disabled: $file-names-background--disabled,
135+
file-names-foreground: $file-names-foreground,
136+
file-names-foreground--focused: $file-names-foreground--focused,
137+
file-names-foreground--filled: $file-names-foreground--filled,
138+
file-names-foreground--disabled: $file-names-foreground--disabled,
139+
140+
file-selector-button-background: $file-selector-button-background,
141+
file-selector-button-background--focused: $file-selector-button-background--focused,
142+
file-selector-button-background--filled: $file-selector-button-background--filled,
143+
file-selector-button-background--disabled: $file-selector-button-background--disabled,
144+
file-selector-button-foreground: $file-selector-button-foreground,
145+
file-selector-button-foreground--focused: $file-selector-button-foreground--focused,
146+
file-selector-button-foreground--filled: $file-selector-button-foreground--filled,
147+
file-selector-button-foreground--disabled: $file-selector-button-foreground--disabled,
148+
)
149+
);
150+
}

0 commit comments

Comments
 (0)