Skip to content

Commit b7c4a0e

Browse files
adrianptrvsimeonoffCopilotCopilot
authored
feat(breadcrumbs): add theme and schemas (#601)
* feat(breadcrumbs): add theme + schemas * feat(breadcrumbs): add separator color to schemas * Fix formatting of breadcrumb theme documentation Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * refactor(breadcrumb): schema documentation comments Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * docs(breadcrumb): normalize schema prop docs * fix(): extend the light Fluent schema to the dark one Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
1 parent d07ba22 commit b7c4a0e

6 files changed

Lines changed: 1127 additions & 0 deletions

File tree

‎packages/theming/sass/themes/components/_index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@forward 'badge/badge-theme';
44
@forward 'banner/banner-theme';
55
@forward 'bottom-nav/bottom-nav-theme';
6+
@forward 'breadcrumb/breadcrumb-theme';
67
@forward 'button/button-theme';
78
@forward 'button-group/button-group-theme';
89
@forward 'calendar/calendar-theme';

‎packages/theming/sass/themes/components/breadcrumb/_breadcrumb-theme.scss‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
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+
/// @package theming
11+
/// @group themes
12+
/// @access public
13+
/// @author <a href="https://github.com/adrianptrv" target="_blank">Adrian Petrov</a>
14+
////
15+
/// Breadcrumb Theme
16+
///
17+
/// PRIMARY TOKENS:
18+
/// - `$text-color` — The text color of the breadcrumb.
19+
///
20+
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
21+
/// @param {Color} $text-color [null] - The text color of the breadcrumb.
22+
/// @param {Color} $icon-color [null] - The color of the breadcrumb icon. Auto-derived from text-color.
23+
/// @param {Color} $current-text-color [null] - The text color of the currently selected breadcrumb item.
24+
/// @param {Color} $current-icon-color [null] - The icon color of the currently selected breadcrumb item.
25+
/// @param {Color} $pressed-text-color [null] - The text color of the breadcrumb when pressed. Auto-derived from text-color.
26+
/// @param {Color} $pressed-icon-color [null] - The color of the breadcrumb icon when pressed. Auto-derived from pressed-text-color.
27+
/// @param {Color} $hover-text-color [null] - The text color of the breadcrumb when hovered. Auto-derived from text-color.
28+
/// @param {Color} $hover-icon-color [null] - The color of the breadcrumb icon when hovered. Auto-derived from hover-text-color.
29+
/// @param {Color} $focus-text-color [null] - The text color of the breadcrumb when focused. Auto-derived from text-color.
30+
/// @param {Color} $focus-icon-color [null] - The color of the breadcrumb icon when focused. Auto-derived from focus-text-color.
31+
/// @param {Color} $focus-underline-color [null]- The text underline color of the breadcrumb on focus. Auto-derived from focus-text-color. Only used in the Material theme.
32+
/// @param {Color} $focus-border-color [null] - The focus border color.
33+
/// @param {Color} $focus-hover-text-color [null] - The text color of the breadcrumb when focused and hovered. Auto-derived from hover-text-color.
34+
/// @param {Color} $focus-hover-icon-color [null] - The color of the breadcrumb icon when focused and hovered. Auto-derived from focus-hover-text-color.
35+
/// @param {Color} $focus-hover-underline-color [null]- The text underline color of the breadcrumb on focus and hover. Auto-derived from focus-hover-text-color. Only used in the Material theme.
36+
/// @param {Color} $focus-pressed-text-color [null] - The text color of the breadcrumb when focused and pressed. Auto-derived from pressed-text-color.
37+
/// @param {Color} $focus-pressed-icon-color [null] - The color of the breadcrumb icon when focused and pressed. Auto-derived from focus-pressed-text-color.
38+
/// @param {Color} $focus-pressed-underline-color [null]- The text underline color of the breadcrumb on focus and pressed. Auto-derived from focus-pressed-text-color. Only used in the Material theme.
39+
/// @param {Color} $disabled-text-color [null] - The text color of the breadcrumb when disabled.
40+
/// @param {Color} $disabled-icon-color [null] - The color of the breadcrumb icon when disabled. Auto-derived from disabled-text-color.
41+
/// @param {Color} $separator-color [null] - The color of the breadcrumb separator.
42+
///
43+
/// @requires $light-material-schema
44+
///
45+
/// @example scss - Change the text and icon color of the breadcrumb:
46+
/// $my-breadcrumb-theme: breadcrumb-theme(
47+
/// $text-color: magenta,
48+
/// $icon-color: cyan
49+
/// );
50+
/// // Pass the theme to the css-vars mixin
51+
/// @include tokens($my-breadcrumb-theme);
52+
@function breadcrumb-theme(
53+
$schema: $light-material-schema,
54+
55+
$text-color: null,
56+
$icon-color: null,
57+
$current-text-color: null,
58+
$current-icon-color: null,
59+
$hover-text-color: null,
60+
$hover-icon-color: null,
61+
$pressed-text-color: null,
62+
$pressed-icon-color: null,
63+
$focus-text-color: null,
64+
$focus-icon-color: null,
65+
$focus-underline-color: null,
66+
$focus-border-color: null,
67+
$focus-hover-text-color: null,
68+
$focus-hover-icon-color: null,
69+
$focus-hover-underline-color: null,
70+
$focus-pressed-text-color: null,
71+
$focus-pressed-icon-color: null,
72+
$focus-pressed-underline-color: null,
73+
$disabled-text-color: null,
74+
$disabled-icon-color: null,
75+
$separator-color: null
76+
) {
77+
$selector: #{config.element-prefix() + '-' + 'breadcrumb'};
78+
$breadcrumb-schema: ();
79+
80+
@if map.has-key($schema, 'breadcrumb') {
81+
$breadcrumb-schema: map.get($schema, 'breadcrumb');
82+
} @else {
83+
$breadcrumb-schema: $schema;
84+
}
85+
86+
$theme: digest-schema($breadcrumb-schema);
87+
$variant: map.get($theme, '_meta', 'theme');
88+
89+
@if not($icon-color) and $text-color {
90+
$icon-color: var(--text-color);
91+
}
92+
93+
@if not($current-icon-color) and $current-text-color {
94+
$current-icon-color: var(--current-text-color);
95+
}
96+
97+
@if not($hover-text-color) and $text-color {
98+
$hover-text-color: dynamic-shade(var(--text-color));
99+
}
100+
101+
@if not($hover-icon-color) and $hover-text-color {
102+
$hover-icon-color: var(--hover-text-color);
103+
}
104+
105+
@if not($pressed-text-color) and $text-color {
106+
$pressed-text-color: dynamic-shade(var(--text-color));
107+
}
108+
109+
@if not($pressed-icon-color) and $pressed-text-color {
110+
$pressed-icon-color: var(--pressed-text-color);
111+
}
112+
113+
@if not($focus-text-color) and $text-color {
114+
$focus-text-color: dynamic-shade(var(--text-color));
115+
}
116+
117+
@if not($focus-icon-color) and $focus-text-color {
118+
$focus-icon-color: var(--focus-text-color);
119+
}
120+
121+
@if $variant == 'material' {
122+
@if not($focus-underline-color) and $focus-text-color {
123+
$focus-underline-color: var(--focus-text-color);
124+
}
125+
}
126+
127+
@if not($focus-hover-text-color) and $hover-text-color {
128+
$focus-hover-text-color: dynamic-shade(var(--hover-text-color));
129+
}
130+
131+
@if not($focus-hover-icon-color) and $focus-hover-text-color {
132+
$focus-hover-icon-color: var(--focus-hover-text-color);
133+
}
134+
135+
@if $variant == 'material' {
136+
@if not($focus-hover-underline-color) and $focus-hover-text-color {
137+
$focus-hover-underline-color: var(--focus-hover-text-color);
138+
}
139+
}
140+
141+
@if not($focus-pressed-text-color) and $pressed-text-color {
142+
$focus-pressed-text-color: dynamic-shade(var(--pressed-text-color));
143+
}
144+
145+
@if not($focus-pressed-icon-color) and $focus-pressed-text-color {
146+
$focus-pressed-icon-color: var(--focus-pressed-text-color);
147+
}
148+
149+
@if $variant == 'material' {
150+
@if not($focus-pressed-underline-color) and $focus-pressed-text-color {
151+
$focus-pressed-underline-color: var(--focus-pressed-text-color);
152+
}
153+
}
154+
155+
@if not($disabled-icon-color) and $disabled-text-color {
156+
$disabled-icon-color: var(--disabled-text-color);
157+
}
158+
159+
@return extend(
160+
$theme,
161+
(
162+
selector: $selector,
163+
text-color: $text-color,
164+
icon-color: $icon-color,
165+
current-text-color: $current-text-color,
166+
current-icon-color: $current-icon-color,
167+
hover-text-color: $hover-text-color,
168+
hover-icon-color: $hover-icon-color,
169+
pressed-text-color: $pressed-text-color,
170+
pressed-icon-color: $pressed-icon-color,
171+
focus-text-color: $focus-text-color,
172+
focus-icon-color: $focus-icon-color,
173+
focus-underline-color: $focus-underline-color,
174+
focus-border-color: $focus-border-color,
175+
focus-hover-text-color: $focus-hover-text-color,
176+
focus-hover-icon-color: $focus-hover-icon-color,
177+
focus-hover-underline-color: $focus-hover-underline-color,
178+
focus-pressed-text-color: $focus-pressed-text-color,
179+
focus-pressed-icon-color: $focus-pressed-icon-color,
180+
focus-pressed-underline-color: $focus-pressed-underline-color,
181+
disabled-text-color: $disabled-text-color,
182+
disabled-icon-color: $disabled-icon-color,
183+
separator-color: $separator-color,
184+
)
185+
);
186+
}

0 commit comments

Comments
 (0)