PR_26175_ALFA_048-theme-v2-chevron-conversion

assets/theme-v2/css/accordion.css

@@ -50,7 +50,7 @@ details.vertical-accordion summary::-webkit-details-marker {
   display: none
 }
 
-details.vertical-accordion summary:after {
+.horizontal-accordion-toggle {
   --accordion-button-border: var(--line);
   --accordion-button-background: var(--panel-soft);
   --accordion-button-color: var(--gold);
@@ -66,74 +66,53 @@ details.vertical-accordion summary:after {
   line-height: var(--line-height-single);
   display: inline-grid;
   place-items: center;
-  flex: 0 0 auto
+  flex: 0 0 auto;
+  margin-left: auto;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-heavy);
+  overflow: hidden;
+  position: relative
 }
 
-.horizontal-accordion-toggle {
+.horizontal-accordion-toggle__icon,
+.vertical-accordion__chevron,
+.tool-display-mode__chevron {
   --accordion-button-border: var(--line);
   --accordion-button-background: var(--panel-soft);
   --accordion-button-color: var(--gold);
-  min-width: var(--space-20);
-  width: var(--space-20);
-  height: var(--space-20);
-  padding: var(--space-0);
+  align-items: center;
+  background: var(--accordion-button-background);
   border: var(--border-standard);
   border-color: var(--accordion-button-border);
   border-radius: var(--radius-pill);
-  background: var(--accordion-button-background);
   color: var(--accordion-button-color);
-  line-height: var(--line-height-single);
-  display: inline-grid;
-  place-items: center;
+  display: inline-flex;
   flex: 0 0 auto;
-  margin-left: auto;
-  font-size: var(--space-0);
-  overflow: hidden;
-  position: relative
+  height: var(--space-20);
+  justify-content: center;
+  line-height: var(--line-height-single);
+  min-width: var(--space-20);
+  padding: var(--space-0);
+  width: var(--space-20)
 }
 
-.horizontal-accordion-toggle:before {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: var(--space-14);
-  height: var(--space-14);
+.horizontal-accordion-toggle__icon {
   background: currentColor;
-  clip-path: polygon(70% 50%, 30% 20%, 30% 80%);
-  transform-origin: center
-}
-
-.horizontal-accordion-toggle[aria-expanded="true"]:before {
-  transform: translate(-50%, -50%)
-}
-
-.horizontal-accordion-toggle[aria-expanded="false"]:before {
-  transform: translate(-50%, -50%) rotate(180deg)
-}
-
-.horizontal-accordion-toggle--left[aria-expanded="true"]:before {
-  transform: translate(-50%, -50%) rotate(180deg)
-}
-
-.horizontal-accordion-toggle--left[aria-expanded="false"]:before {
-  transform: translate(-50%, -50%)
-}
-
-details.vertical-accordion summary:after {
-  content: "";
-  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
-  background-position: calc(50% - var(--space-3)) 50%, calc(50% + var(--space-3)) 50%;
-  background-size: var(--space-7) var(--space-7);
-  background-repeat: no-repeat
+  border: 0;
+  border-radius: var(--space-0);
+  height: var(--space-14);
+  min-width: var(--space-14);
+  width: var(--space-14)
 }
 
-details.vertical-accordion[open] summary:after {
-  background-image: linear-gradient(135deg, transparent 50%, currentColor 50%), linear-gradient(45deg, currentColor 50%, transparent 50%)
+.vertical-accordion__chevron {
+  margin-left: auto
 }
 
-details.vertical-accordion summary:active:after {
-  background-image: linear-gradient(135deg, transparent 50%, currentColor 50%), linear-gradient(45deg, currentColor 50%, transparent 50%)
+.vertical-accordion__chevron .theme-icon,
+.tool-display-mode__chevron .theme-icon {
+  height: var(--space-14);
+  width: var(--space-14)
 }
 
 details.vertical-accordion summary .status {
@@ -150,7 +129,7 @@ details.vertical-accordion summary.accordion-summary--control-grid {
   align-items: center
 }
 
-details.vertical-accordion summary.accordion-summary--control-grid:after {
+details.vertical-accordion summary.accordion-summary--control-grid .vertical-accordion__chevron {
   justify-self: end
 }
 
@@ -188,10 +167,6 @@ details.vertical-accordion summary.accordion-summary--control-grid .accordion-su
   min-width: var(--space-34)
 }
 
-details.vertical-accordion[open] summary:active:after {
-  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%)
-}
-
 .accordion-body {
   padding: var(--space-0) var(--space-14) var(--space-14);
   color: var(--muted);

assets/theme-v2/css/icons.css

@@ -0,0 +1,88 @@
+.theme-icon {
+  --theme-v2-icon-url: none;
+  background: currentColor;
+  color: inherit;
+  display: inline-block;
+  flex: 0 0 auto;
+  height: 1em;
+  line-height: var(--line-height-single);
+  pointer-events: none;
+  vertical-align: -0.125em;
+  width: 1em;
+  -webkit-mask-image: var(--theme-v2-icon-url);
+  mask-image: var(--theme-v2-icon-url);
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain
+}
+
+.theme-icon--add {
+  --theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-add.svg")
+}
+
+.theme-icon--chevron-down {
+  --theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-chevron-down.svg")
+}
+
+.theme-icon--chevron-left {
+  --theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-chevron-left.svg")
+}
+
+.theme-icon--chevron-right {
+  --theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-chevron-right.svg")
+}
+
+.theme-icon--chevron-up {
+  --theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-chevron-up.svg")
+}
+
+.theme-icon--close {
+  --theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-close.svg")
+}
+
+.theme-icon--error {
+  --theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-error.svg")
+}
+
+.theme-icon--exit-fullscreen {
+  --theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-exit-fullscreen.svg")
+}
+
+.theme-icon--fullscreen {
+  --theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-fullscreen.svg")
+}
+
+.theme-icon--info {
+  --theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-info.svg")
+}
+
+.theme-icon--menu {
+  --theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-menu.svg")
+}
+
+.theme-icon--search {
+  --theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-search.svg")
+}
+
+.theme-icon--settings {
+  --theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-settings.svg")
+}
+
+.theme-icon--subtract {
+  --theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-subtract.svg")
+}
+
+.theme-icon--success {
+  --theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-success.svg")
+}
+
+.theme-icon--trash {
+  --theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-trash.svg")
+}
+
+.theme-icon--warning {
+  --theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-warning.svg")
+}

assets/theme-v2/css/panels.css

@@ -206,7 +206,7 @@
 }
 
 .tool-column[class*="tool-group-"] .horizontal-accordion-toggle,
-.tool-column[class*="tool-group-"] details.vertical-accordion summary:after {
+.tool-column[class*="tool-group-"] details.vertical-accordion .vertical-accordion__chevron {
   --accordion-button-border: var(--tool-group-accent);
   --accordion-button-color: var(--tool-group-color)
 }
@@ -298,36 +298,12 @@ body.tool-focus-mode .tool-center-panel:has(>details.vertical-accordion)>p {
   display: none
 }
 
-.tool-display-mode summary:after {
-  content: "";
+.tool-display-mode__chevron {
   position: absolute;
   right: var(--space-12);
   top: 50%;
   transform: translateY(-50%);
-  width: var(--space-20);
-  height: var(--space-20);
-  border: var(--border-standard);
-  border-radius: var(--radius-pill);
-  background: var(--panel-soft);
-  color: var(--gold);
-  display: inline-grid;
-  place-items: center;
-  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
-  background-position: calc(50% - var(--space-3)) 50%, calc(50% + var(--space-3)) 50%;
-  background-size: var(--space-7) var(--space-7);
-  background-repeat: no-repeat
-}
-
-.tool-display-mode[open] summary:after {
-  background-image: linear-gradient(135deg, transparent 50%, currentColor 50%), linear-gradient(45deg, currentColor 50%, transparent 50%)
-}
-
-.tool-display-mode summary:active:after {
-  background-image: linear-gradient(135deg, transparent 50%, currentColor 50%), linear-gradient(45deg, currentColor 50%, transparent 50%)
-}
-
-.tool-display-mode[open] summary:active:after {
-  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%)
+  z-index: var(--z-index-sm)
 }
 
 .tool-display-mode__badge {

assets/theme-v2/css/tables.css

@@ -131,27 +131,10 @@ td {
 
 .idea-board-idea-chevron {
   display: inline-block;
-  width: 1em;
   height: 1em;
   margin-right: .35em;
-  background: currentColor;
   vertical-align: -0.125em;
-  -webkit-mask-position: center;
-  mask-position: center;
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  -webkit-mask-size: contain;
-  mask-size: contain
-}
-
-.idea-board-idea-chevron--down {
-  -webkit-mask-image: url("../images/gfs-chevron-down.svg");
-  mask-image: url("../images/gfs-chevron-down.svg")
-}
-
-.idea-board-idea-chevron--up {
-  -webkit-mask-image: url("../images/gfs-chevron-up.svg");
-  mask-image: url("../images/gfs-chevron-up.svg")
+  width: 1em
 }
 
 .idea-board-notes-child-surface {

assets/theme-v2/css/theme.css

@@ -4,6 +4,7 @@
 @import url("typography.css");
 @import url("layout.css");
 @import url("buttons.css");
+@import url("icons.css");
 @import url("forms.css");
 @import url("controls.css");
 @import url("panels.css");

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

@@ -0,0 +1,73 @@
+const themeV2IconRegistry = Object.freeze({
+  add: "gfs-add.svg",
+  "chevron-down": "gfs-chevron-down.svg",
+  "chevron-left": "gfs-chevron-left.svg",
+  "chevron-right": "gfs-chevron-right.svg",
+  "chevron-up": "gfs-chevron-up.svg",
+  close: "gfs-close.svg",
+  error: "gfs-error.svg",
+  "exit-fullscreen": "gfs-exit-fullscreen.svg",
+  fullscreen: "gfs-fullscreen.svg",
+  info: "gfs-info.svg",
+  menu: "gfs-menu.svg",
+  search: "gfs-search.svg",
+  settings: "gfs-settings.svg",
+  subtract: "gfs-subtract.svg",
+  success: "gfs-success.svg",
+  trash: "gfs-trash.svg",
+  warning: "gfs-warning.svg",
+});
+
+function themeIconFileName(name) {
+  const fileName = themeV2IconRegistry[name];
+  if (!fileName) {
+    throw new RangeError(`Unknown Theme V2 icon: ${name}`);
+  }
+  return fileName;
+}
+
+function themeIconPath(name) {
+  return `/assets/theme-v2/svg/${themeIconFileName(name)}`;
+}
+
+function normalizeClassName(className) {
+  if (Array.isArray(className)) {
+    return className.filter(Boolean).join(" ");
+  }
+  return className || "";
+}
+
+function createThemeIcon(name, options = {}) {
+  const icon = document.createElement("span");
+  const extraClassName = normalizeClassName(options.className);
+  icon.className = ["theme-icon", `theme-icon--${name}`, extraClassName].filter(Boolean).join(" ");
+  icon.dataset.themeIcon = name;
+  icon.dataset.themeIconFile = themeIconFileName(name);
+
+  if (options.label) {
+    icon.setAttribute("role", "img");
+    icon.setAttribute("aria-label", options.label);
+  } else {
+    icon.setAttribute("aria-hidden", "true");
+  }
+
+  return icon;
+}
+
+const themeIconsApi = Object.freeze({
+  createThemeIcon,
+  themeIconFileName,
+  themeIconPath,
+  themeV2IconRegistry,
+});
+
+if (typeof window !== "undefined") {
+  window.ThemeV2Icons = themeIconsApi;
+}
+
+export {
+  createThemeIcon,
+  themeIconFileName,
+  themeIconPath,
+  themeV2IconRegistry,
+};