@patternfly/patternfly 6.5.0-prerelease.8 → 6.5.0-prerelease.81

package/base/patternfly-common.css

@@ -55,11 +55,61 @@
   --pf-t--global--duration--200: 1ms !important;
   --pf-t--global--duration--100: 1ms !important;
   --pf-t--global--duration--50: 1ms !important;
+  --pf-v6-global--thinking-active--Animation--Duration: 0 !important;
 }
 
+.pf-v6-m-ai-indicator {
+  position: relative;
+}
+.pf-v6-m-ai-indicator::before {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  background: linear-gradient(to right, #f56e6e 0%, #876fd4 65%, #5e40be 100%) border-box;
+  border: var(--pf-t--global--border--width--extra-strong) solid transparent;
+  border-radius: inherit;
+  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
+  mask-composite: exclude;
+}
+
+@property --pf-v6-global--thinking--BoxShadow--Spread {
+  syntax: "<length>";
+  initial-value: 0;
+  inherits: false;
+}
+.pf-v6-m-thinking {
+  box-shadow: 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-End), 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-End), 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-Start), 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-Start);
+  animation: pf-v6-global-thinking var(--pf-v6-global--thinking-active--Animation--Duration) infinite ease-in-out;
+}
+.pf-v6-m-thinking.pf-m-inset {
+  box-shadow: inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-End), inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-End), inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-Start), inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-Start);
+}
+
+@keyframes pf-v6-global-thinking {
+  50% {
+    --pf-v6-global--thinking--BoxShadow--Spread: var(--pf-v6-global--thinking-active--BoxShadow--Spread);
+  }
+}
 :root {
   --pf-v6-global--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
   --pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-global--thinking--BoxShadow--Spread: 0px;
+  --pf-v6-global--thinking--BoxShadow--Color--Start-Start: oklch(45.9% 0.187 3.815deg);
+  --pf-v6-global--thinking--BoxShadow--Color--Start-End: oklch(50% 0.134 242.749deg);
+  --pf-v6-global--thinking--BoxShadow--Color--End-Start: oklch(45.9% 0.187 3.815deg);
+  --pf-v6-global--thinking--BoxShadow--Color--End-End: oklch(43.2% 0.232 292.759deg);
+  --pf-v6-global--thinking-active--BoxShadow--Spread: 15px;
+  --pf-v6-global--thinking-active--Animation--Duration: 0;
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  :root {
+    --pf-v6-global--thinking-active--Animation--Duration: 2s;
+  }
+}
+:root {
+  container-type: inline-size;
+  container-name: pf-v6-contain-viewport pf-v6-contain-table;
 }
 
 @property --pf-v6-global--danger-jiggle--TranslateX {

package/base/patternfly-common.scss

@@ -64,13 +64,72 @@
   --pf-t--global--duration--200: 1ms !important;
   --pf-t--global--duration--100: 1ms !important;
   --pf-t--global--duration--50: 1ms !important;
+  --#{$pf-global}--thinking-active--Animation--Duration: 0 !important;
 
   // stylelink-enable declaration-no-important
 }
 
+.#{$pf-prefix}m-ai-indicator {
+  position: relative;
+
+  &::before {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    content: "";
+    background: linear-gradient(to right, #f56e6e 0%, #876fd4 65%, #5e40be 100%)
+      border-box;
+    border: var(--pf-t--global--border--width--extra-strong) solid transparent;
+    border-radius: inherit;
+    mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
+    mask-composite: exclude;
+  }
+}
+
+@property --#{$pf-global}--thinking--BoxShadow--Spread {
+  syntax: "<length>";
+  initial-value: 0;
+  inherits: false;
+}
+
+.#{$pf-prefix}m-thinking {
+  box-shadow: 0 0 var(--#{$pf-global}--thinking--BoxShadow--Spread) var(--#{$pf-global}--thinking--BoxShadow--Color--End-End),
+  0 0 var(--#{$pf-global}--thinking--BoxShadow--Spread) var(--#{$pf-global}--thinking--BoxShadow--Color--Start-End),
+  0 0 var(--#{$pf-global}--thinking--BoxShadow--Spread) var(--#{$pf-global}--thinking--BoxShadow--Color--End-Start),
+  0 0 var(--#{$pf-global}--thinking--BoxShadow--Spread) var(--#{$pf-global}--thinking--BoxShadow--Color--Start-Start);
+  animation: #{$pf-global}-thinking var(--#{$pf-global}--thinking-active--Animation--Duration) infinite ease-in-out;
+
+  &.pf-m-inset {
+    box-shadow: inset 0 0 var(--#{$pf-global}--thinking--BoxShadow--Spread) var(--#{$pf-global}--thinking--BoxShadow--Color--End-End),
+    inset 0 0 var(--#{$pf-global}--thinking--BoxShadow--Spread) var(--#{$pf-global}--thinking--BoxShadow--Color--Start-End),
+    inset 0 0 var(--#{$pf-global}--thinking--BoxShadow--Spread) var(--#{$pf-global}--thinking--BoxShadow--Color--End-Start),
+    inset 0 0 var(--#{$pf-global}--thinking--BoxShadow--Spread) var(--#{$pf-global}--thinking--BoxShadow--Color--Start-Start);
+  }
+}
+
+@keyframes #{$pf-global}-thinking {
+  50% {
+    --#{$pf-global}--thinking--BoxShadow--Spread: var(--#{$pf-global}--thinking-active--BoxShadow--Spread);
+  }
+}
+
 :root {
   --#{$pf-global}--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
   --#{$pf-global}--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
+  --#{$pf-global}--thinking--BoxShadow--Spread: 0px;
+  --#{$pf-global}--thinking--BoxShadow--Color--Start-Start: oklch(45.9% 0.187 3.815deg);
+  --#{$pf-global}--thinking--BoxShadow--Color--Start-End: oklch(50% 0.134 242.749deg);
+  --#{$pf-global}--thinking--BoxShadow--Color--End-Start: oklch(45.9% 0.187 3.815deg);
+  --#{$pf-global}--thinking--BoxShadow--Color--End-End: oklch(43.2% 0.232 292.759deg);
+  --#{$pf-global}--thinking-active--BoxShadow--Spread: 15px;
+  --#{$pf-global}--thinking-active--Animation--Duration: 0;
+
+  @media screen and (prefers-reduced-motion: no-preference) {
+    --#{$pf-global}--thinking-active--Animation--Duration: 2s;
+  }
+
+  container-type: inline-size;
+  container-name: #{$pf-prefix}contain-viewport #{$pf-prefix}contain-table;
 }
 
 // Register the property type for the custom property to be animatable

package/base/patternfly-svg-icons.css

@@ -2,4 +2,21 @@
   width: 1em;
   height: 1em;
   vertical-align: -0.125em;
+}
+
+.pf-v6-svg .pf-v6-icon-rh-ui {
+  display: none;
+}
+
+.pf-v6-icon-set-rh-ui .pf-v6-svg .pf-v6-icon-default {
+  display: none;
+}
+.pf-v6-icon-set-rh-ui .pf-v6-svg .pf-v6-icon-rh-ui {
+  display: revert;
+}
+
+.pf-v6-icon-rh-standard {
+  width: 3rem;
+  height: 3rem;
+  color: var(--pf-t--global--icon--color--brand--accent--default);
 }

package/base/patternfly-svg-icons.scss

@@ -6,3 +6,23 @@
   height: 1em;
   vertical-align: -.125em;
 }
+
+.#{$pf-prefix}svg .#{$pf-prefix}icon-rh-ui {
+  display: none;
+}
+
+.#{$pf-prefix}icon-set-rh-ui {
+  .#{$pf-prefix}svg .#{$pf-prefix}icon-default {
+    display: none;
+  }
+
+  .#{$pf-prefix}svg .#{$pf-prefix}icon-rh-ui {
+    display: revert;
+  }
+}
+
+.#{$pf-prefix}icon-rh-standard {
+  width: 3rem;
+  height: 3rem;
+  color: var(--pf-t--global--icon--color--brand--accent--default);
+}