Skip to content

Commit 3cb4ccc

Browse files
ToolboxAidToolboxAid
authored
Merge PR #165: PR_26175_ALFA_048-theme-v2-chevron-conversion
Merge validated ALFA_048 Theme V2 chevron conversion.
2 parents 592f217 + c824b44 commit 3cb4ccc

15 files changed

Lines changed: 1123 additions & 157 deletions

‎assets/theme-v2/css/accordion.css‎

Lines changed: 32 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ details.vertical-accordion summary::-webkit-details-marker {
5050
display: none
5151
}
5252

53-
details.vertical-accordion summary:after {
53+
.horizontal-accordion-toggle {
5454
--accordion-button-border: var(--line);
5555
--accordion-button-background: var(--panel-soft);
5656
--accordion-button-color: var(--gold);
@@ -66,74 +66,53 @@ details.vertical-accordion summary:after {
6666
line-height: var(--line-height-single);
6767
display: inline-grid;
6868
place-items: center;
69-
flex: 0 0 auto
69+
flex: 0 0 auto;
70+
margin-left: auto;
71+
font-size: var(--font-size-sm);
72+
font-weight: var(--font-weight-heavy);
73+
overflow: hidden;
74+
position: relative
7075
}
7176

72-
.horizontal-accordion-toggle {
77+
.horizontal-accordion-toggle__icon,
78+
.vertical-accordion__chevron,
79+
.tool-display-mode__chevron {
7380
--accordion-button-border: var(--line);
7481
--accordion-button-background: var(--panel-soft);
7582
--accordion-button-color: var(--gold);
76-
min-width: var(--space-20);
77-
width: var(--space-20);
78-
height: var(--space-20);
79-
padding: var(--space-0);
83+
align-items: center;
84+
background: var(--accordion-button-background);
8085
border: var(--border-standard);
8186
border-color: var(--accordion-button-border);
8287
border-radius: var(--radius-pill);
83-
background: var(--accordion-button-background);
8488
color: var(--accordion-button-color);
85-
line-height: var(--line-height-single);
86-
display: inline-grid;
87-
place-items: center;
89+
display: inline-flex;
8890
flex: 0 0 auto;
89-
margin-left: auto;
90-
font-size: var(--space-0);
91-
overflow: hidden;
92-
position: relative
91+
height: var(--space-20);
92+
justify-content: center;
93+
line-height: var(--line-height-single);
94+
min-width: var(--space-20);
95+
padding: var(--space-0);
96+
width: var(--space-20)
9397
}
9498

95-
.horizontal-accordion-toggle:before {
96-
content: "";
97-
position: absolute;
98-
top: 50%;
99-
left: 50%;
100-
width: var(--space-14);
101-
height: var(--space-14);
99+
.horizontal-accordion-toggle__icon {
102100
background: currentColor;
103-
clip-path: polygon(70% 50%, 30% 20%, 30% 80%);
104-
transform-origin: center
105-
}
106-
107-
.horizontal-accordion-toggle[aria-expanded="true"]:before {
108-
transform: translate(-50%, -50%)
109-
}
110-
111-
.horizontal-accordion-toggle[aria-expanded="false"]:before {
112-
transform: translate(-50%, -50%) rotate(180deg)
113-
}
114-
115-
.horizontal-accordion-toggle--left[aria-expanded="true"]:before {
116-
transform: translate(-50%, -50%) rotate(180deg)
117-
}
118-
119-
.horizontal-accordion-toggle--left[aria-expanded="false"]:before {
120-
transform: translate(-50%, -50%)
121-
}
122-
123-
details.vertical-accordion summary:after {
124-
content: "";
125-
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
126-
background-position: calc(50% - var(--space-3)) 50%, calc(50% + var(--space-3)) 50%;
127-
background-size: var(--space-7) var(--space-7);
128-
background-repeat: no-repeat
101+
border: 0;
102+
border-radius: var(--space-0);
103+
height: var(--space-14);
104+
min-width: var(--space-14);
105+
width: var(--space-14)
129106
}
130107

131-
details.vertical-accordion[open] summary:after {
132-
background-image: linear-gradient(135deg, transparent 50%, currentColor 50%), linear-gradient(45deg, currentColor 50%, transparent 50%)
108+
.vertical-accordion__chevron {
109+
margin-left: auto
133110
}
134111

135-
details.vertical-accordion summary:active:after {
136-
background-image: linear-gradient(135deg, transparent 50%, currentColor 50%), linear-gradient(45deg, currentColor 50%, transparent 50%)
112+
.vertical-accordion__chevron .theme-icon,
113+
.tool-display-mode__chevron .theme-icon {
114+
height: var(--space-14);
115+
width: var(--space-14)
137116
}
138117

139118
details.vertical-accordion summary .status {
@@ -150,7 +129,7 @@ details.vertical-accordion summary.accordion-summary--control-grid {
150129
align-items: center
151130
}
152131

153-
details.vertical-accordion summary.accordion-summary--control-grid:after {
132+
details.vertical-accordion summary.accordion-summary--control-grid .vertical-accordion__chevron {
154133
justify-self: end
155134
}
156135

@@ -188,10 +167,6 @@ details.vertical-accordion summary.accordion-summary--control-grid .accordion-su
188167
min-width: var(--space-34)
189168
}
190169

191-
details.vertical-accordion[open] summary:active:after {
192-
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%)
193-
}
194-
195170
.accordion-body {
196171
padding: var(--space-0) var(--space-14) var(--space-14);
197172
color: var(--muted);

‎assets/theme-v2/css/icons.css‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
.theme-icon {
2+
--theme-v2-icon-url: none;
3+
background: currentColor;
4+
color: inherit;
5+
display: inline-block;
6+
flex: 0 0 auto;
7+
height: 1em;
8+
line-height: var(--line-height-single);
9+
pointer-events: none;
10+
vertical-align: -0.125em;
11+
width: 1em;
12+
-webkit-mask-image: var(--theme-v2-icon-url);
13+
mask-image: var(--theme-v2-icon-url);
14+
-webkit-mask-position: center;
15+
mask-position: center;
16+
-webkit-mask-repeat: no-repeat;
17+
mask-repeat: no-repeat;
18+
-webkit-mask-size: contain;
19+
mask-size: contain
20+
}
21+
22+
.theme-icon--add {
23+
--theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-add.svg")
24+
}
25+
26+
.theme-icon--chevron-down {
27+
--theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-chevron-down.svg")
28+
}
29+
30+
.theme-icon--chevron-left {
31+
--theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-chevron-left.svg")
32+
}
33+
34+
.theme-icon--chevron-right {
35+
--theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-chevron-right.svg")
36+
}
37+
38+
.theme-icon--chevron-up {
39+
--theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-chevron-up.svg")
40+
}
41+
42+
.theme-icon--close {
43+
--theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-close.svg")
44+
}
45+
46+
.theme-icon--error {
47+
--theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-error.svg")
48+
}
49+
50+
.theme-icon--exit-fullscreen {
51+
--theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-exit-fullscreen.svg")
52+
}
53+
54+
.theme-icon--fullscreen {
55+
--theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-fullscreen.svg")
56+
}
57+
58+
.theme-icon--info {
59+
--theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-info.svg")
60+
}
61+
62+
.theme-icon--menu {
63+
--theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-menu.svg")
64+
}
65+
66+
.theme-icon--search {
67+
--theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-search.svg")
68+
}
69+
70+
.theme-icon--settings {
71+
--theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-settings.svg")
72+
}
73+
74+
.theme-icon--subtract {
75+
--theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-subtract.svg")
76+
}
77+
78+
.theme-icon--success {
79+
--theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-success.svg")
80+
}
81+
82+
.theme-icon--trash {
83+
--theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-trash.svg")
84+
}
85+
86+
.theme-icon--warning {
87+
--theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-warning.svg")
88+
}

‎assets/theme-v2/css/panels.css‎

Lines changed: 3 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -206,7 +206,7 @@
206206
}
207207

208208
.tool-column[class*="tool-group-"] .horizontal-accordion-toggle,
209-
.tool-column[class*="tool-group-"] details.vertical-accordion summary:after {
209+
.tool-column[class*="tool-group-"] details.vertical-accordion .vertical-accordion__chevron {
210210
--accordion-button-border: var(--tool-group-accent);
211211
--accordion-button-color: var(--tool-group-color)
212212
}
@@ -298,36 +298,12 @@ body.tool-focus-mode .tool-center-panel:has(>details.vertical-accordion)>p {
298298
display: none
299299
}
300300

301-
.tool-display-mode summary:after {
302-
content: "";
301+
.tool-display-mode__chevron {
303302
position: absolute;
304303
right: var(--space-12);
305304
top: 50%;
306305
transform: translateY(-50%);
307-
width: var(--space-20);
308-
height: var(--space-20);
309-
border: var(--border-standard);
310-
border-radius: var(--radius-pill);
311-
background: var(--panel-soft);
312-
color: var(--gold);
313-
display: inline-grid;
314-
place-items: center;
315-
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
316-
background-position: calc(50% - var(--space-3)) 50%, calc(50% + var(--space-3)) 50%;
317-
background-size: var(--space-7) var(--space-7);
318-
background-repeat: no-repeat
319-
}
320-
321-
.tool-display-mode[open] summary:after {
322-
background-image: linear-gradient(135deg, transparent 50%, currentColor 50%), linear-gradient(45deg, currentColor 50%, transparent 50%)
323-
}
324-
325-
.tool-display-mode summary:active:after {
326-
background-image: linear-gradient(135deg, transparent 50%, currentColor 50%), linear-gradient(45deg, currentColor 50%, transparent 50%)
327-
}
328-
329-
.tool-display-mode[open] summary:active:after {
330-
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%)
306+
z-index: var(--z-index-sm)
331307
}
332308

333309
.tool-display-mode__badge {

‎assets/theme-v2/css/tables.css‎

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -131,27 +131,10 @@ td {
131131

132132
.idea-board-idea-chevron {
133133
display: inline-block;
134-
width: 1em;
135134
height: 1em;
136135
margin-right: .35em;
137-
background: currentColor;
138136
vertical-align: -0.125em;
139-
-webkit-mask-position: center;
140-
mask-position: center;
141-
-webkit-mask-repeat: no-repeat;
142-
mask-repeat: no-repeat;
143-
-webkit-mask-size: contain;
144-
mask-size: contain
145-
}
146-
147-
.idea-board-idea-chevron--down {
148-
-webkit-mask-image: url("../images/gfs-chevron-down.svg");
149-
mask-image: url("../images/gfs-chevron-down.svg")
150-
}
151-
152-
.idea-board-idea-chevron--up {
153-
-webkit-mask-image: url("../images/gfs-chevron-up.svg");
154-
mask-image: url("../images/gfs-chevron-up.svg")
137+
width: 1em
155138
}
156139

157140
.idea-board-notes-child-surface {

‎assets/theme-v2/css/theme.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
@import url("typography.css");
55
@import url("layout.css");
66
@import url("buttons.css");
7+
@import url("icons.css");
78
@import url("forms.css");
89
@import url("controls.css");
910
@import url("panels.css");

‎assets/theme-v2/js/theme-icons.js‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
const themeV2IconRegistry = Object.freeze({
2+
add: "gfs-add.svg",
3+
"chevron-down": "gfs-chevron-down.svg",
4+
"chevron-left": "gfs-chevron-left.svg",
5+
"chevron-right": "gfs-chevron-right.svg",
6+
"chevron-up": "gfs-chevron-up.svg",
7+
close: "gfs-close.svg",
8+
error: "gfs-error.svg",
9+
"exit-fullscreen": "gfs-exit-fullscreen.svg",
10+
fullscreen: "gfs-fullscreen.svg",
11+
info: "gfs-info.svg",
12+
menu: "gfs-menu.svg",
13+
search: "gfs-search.svg",
14+
settings: "gfs-settings.svg",
15+
subtract: "gfs-subtract.svg",
16+
success: "gfs-success.svg",
17+
trash: "gfs-trash.svg",
18+
warning: "gfs-warning.svg",
19+
});
20+
21+
function themeIconFileName(name) {
22+
const fileName = themeV2IconRegistry[name];
23+
if (!fileName) {
24+
throw new RangeError(`Unknown Theme V2 icon: ${name}`);
25+
}
26+
return fileName;
27+
}
28+
29+
function themeIconPath(name) {
30+
return `/assets/theme-v2/svg/${themeIconFileName(name)}`;
31+
}
32+
33+
function normalizeClassName(className) {
34+
if (Array.isArray(className)) {
35+
return className.filter(Boolean).join(" ");
36+
}
37+
return className || "";
38+
}
39+
40+
function createThemeIcon(name, options = {}) {
41+
const icon = document.createElement("span");
42+
const extraClassName = normalizeClassName(options.className);
43+
icon.className = ["theme-icon", `theme-icon--${name}`, extraClassName].filter(Boolean).join(" ");
44+
icon.dataset.themeIcon = name;
45+
icon.dataset.themeIconFile = themeIconFileName(name);
46+
47+
if (options.label) {
48+
icon.setAttribute("role", "img");
49+
icon.setAttribute("aria-label", options.label);
50+
} else {
51+
icon.setAttribute("aria-hidden", "true");
52+
}
53+
54+
return icon;
55+
}
56+
57+
const themeIconsApi = Object.freeze({
58+
createThemeIcon,
59+
themeIconFileName,
60+
themeIconPath,
61+
themeV2IconRegistry,
62+
});
63+
64+
if (typeof window !== "undefined") {
65+
window.ThemeV2Icons = themeIconsApi;
66+
}
67+
68+
export {
69+
createThemeIcon,
70+
themeIconFileName,
71+
themeIconPath,
72+
themeV2IconRegistry,
73+
};

0 commit comments

Comments
 (0)