PR_26175_OWNER_057: refresh generated artifacts for main

Author: Delta Team

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/buttons.css

@@ -17,6 +17,36 @@
   border-color: var(--orange-border-strong)
 }
 
+.btn--with-icon {
+  gap: var(--space-8)
+}
+
+.btn--with-icon .theme-icon {
+  height: var(--icon-size-sm);
+  width: var(--icon-size-sm)
+}
+
+.btn--icon-only {
+  border-radius: var(--radius-pill);
+  height: var(--space-44);
+  min-width: var(--space-44);
+  padding: var(--space-0);
+  width: var(--space-44)
+}
+
+.btn--icon-only .theme-icon {
+  height: var(--icon-size-md);
+  width: var(--icon-size-md)
+}
+
+.btn--icon-danger {
+  color: var(--red)
+}
+
+.btn--icon-success {
+  color: var(--green)
+}
+
 .btn--compact {
   margin: var(--space-0);
   min-width: calc(var(--space-44) + var(--space-28));

assets/theme-v2/css/icons.css

@@ -0,0 +1,130 @@
+.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--delete {
+  --theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-trash.svg")
+}
+
+.theme-icon--edit {
+  --theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-settings.svg")
+}
+
+.theme-icon--error {
+  --theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-error.svg")
+}
+
+.theme-icon--external-link {
+  --theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-chevron-right.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--save {
+  --theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-success.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--validation {
+  --theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-warning.svg")
+}
+
+.theme-icon--warning {
+  --theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-warning.svg")
+}
+
+.status-icon {
+  height: var(--icon-size-sm);
+  width: var(--icon-size-sm)
+}
+
+.status-icon--error {
+  color: var(--red)
+}
+
+.status-icon--info {
+  color: var(--cyan)
+}
+
+.status-icon--save {
+  color: var(--green)
+}
+
+.status-icon--validation,
+.status-icon--warning {
+  color: var(--gold)
+}

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/status.css

@@ -85,12 +85,20 @@
 }
 
 .toolbox-status-bar__message {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-8);
   margin: var(--space-0);
   max-width: var(--measure-lg);
   line-height: var(--line-height-copy);
   overflow-wrap: anywhere
 }
 
+.toolbox-status-bar__status-icon {
+  flex: 0 0 auto
+}
+
 .toolbox-status-bar__progress {
   min-width: var(--space-0);
   max-width: var(--toolbox-status-progress-max);

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 {