asksuite-citrus 3.17.7 → 3.17.8-beta.0

package/styles/colors-light.scss

@@ -266,14 +266,12 @@ $color-light-neutral-NLA200: $color-nla-200;
 $color-light-neutral-NLA300: #13293921;
 $color-Y200: #FFE5B2;
 
-$message-area-scroll-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.55) 50%, #FFF 100%);
+$message-area-scroll-gradient: linear-gradient(180deg, rgba($color-nl-0, 0.00) 0%, rgba($color-nl-0, 0.55) 50%, $color-nl-0 100%);
 // livechat - tokens
 
 //TODO: REMOVE DUPLICATE SEMANTICS
 $color-texticon-brand-asksuite-contrast: $color-a-600;
 $color-texticon-inverse-default: $color-nl-0;
-$color-texticon-subtlest: $color-nla-1000;
-$color-texticon-disabled: $color-nla-700;
 $color-texticon-link-default: $color-b-500;
 
 $color-elevation-surface-selected-ask: $color-a-100;
@@ -288,7 +286,6 @@ $color-border-default: $color-nla-300;
 $color-border-brand-asksuite-subtle: $color-a-300;
 
 $color-background-alpha-bolder-default: $color-nla-1600;
-$color-background-brand-asksuite-contrast-default: $color-a-600;
 $color-background-alpha-subtlest-default: $color-nla-200;
 $color-background-inverse-default: $color-nl-0;
 $color-background-disabled: $color-nla-200;
@@ -358,18 +355,27 @@ $color-background-accent-lime-subtle-pressed: $color-l-600;
 $color-background-accent-lime-subtlest-default: $color-l-200;
 $color-background-accent-lime-subtlest-hovered: $color-l-300;
 $color-background-accent-lime-subtlest-pressed: $color-l-400;
-$color-background-accent-magenta-bold-default: $color-m-800;
-$color-background-accent-magenta-bold-hovered: $color-m-900;
-$color-background-accent-magenta-bold-pressed: $color-m-1000;
+$color-background-accent-magenta-boldest-default: $color-m-1000;
+$color-background-accent-magenta-boldest-hovered: $color-m-900;
+$color-background-accent-magenta-boldest-pressed: $color-m-800;
+$color-background-accent-magenta-bolder-default: $color-m-800;
+$color-background-accent-magenta-bolder-hovered: $color-m-900;
+$color-background-accent-magenta-bolder-pressed: $color-m-1000;
+$color-background-accent-magenta-bold-default: $color-m-700;
+$color-background-accent-magenta-bold-hovered: $color-m-800;
+$color-background-accent-magenta-bold-pressed: $color-m-900;
 $color-background-accent-magenta-contrast-default: $color-m-600;
 $color-background-accent-magenta-contrast-hovered: $color-m-700;
 $color-background-accent-magenta-contrast-pressed: $color-m-800;
-$color-background-accent-magenta-subtle-default: $color-m-400;
-$color-background-accent-magenta-subtle-hovered: $color-m-500;
-$color-background-accent-magenta-subtle-pressed: $color-m-600;
-$color-background-accent-magenta-subtlest-default: $color-m-200;
-$color-background-accent-magenta-subtlest-hovered: $color-m-300;
-$color-background-accent-magenta-subtlest-pressed: $color-m-400;
+$color-background-accent-magenta-subtle-default: $color-m-300;
+$color-background-accent-magenta-subtle-hovered: $color-m-400;
+$color-background-accent-magenta-subtle-pressed: $color-m-500;
+$color-background-accent-magenta-subtler-default: $color-m-200;
+$color-background-accent-magenta-subtler-hovered: $color-m-300;
+$color-background-accent-magenta-subtler-pressed: $color-m-400;
+$color-background-accent-magenta-subtlest-default: $color-m-100;
+$color-background-accent-magenta-subtlest-hovered: $color-m-200;
+$color-background-accent-magenta-subtlest-pressed: $color-m-300;
 $color-background-accent-orange-bold-default: $color-o-800;
 $color-background-accent-orange-bold-hovered: $color-o-900;
 $color-background-accent-orange-bold-pressed: $color-o-1000;
@@ -474,7 +480,13 @@ $color-border-accent-blue: $color-b-600;
 $color-border-accent-green: $color-g-600;
 $color-border-accent-grey: $color-nl-1000;
 $color-border-accent-lime: $color-l-600;
-$color-border-accent-magenta: $color-m-600;
+$color-border-accent-magenta-boldest: $color-m-1000;
+$color-border-accent-magenta-bolder: $color-m-900;
+$color-border-accent-magenta-bold: $color-m-800;
+$color-border-accent-magenta-contrast: $color-m-600;
+$color-border-accent-magenta-subtle: $color-m-300;
+$color-border-accent-magenta-subtler: $color-m-200;
+$color-border-accent-magenta-subtlest: $color-m-100;
 $color-border-accent-orange: $color-o-600;
 $color-border-accent-purple: $color-p-600;
 $color-border-accent-red: $color-r-600;
@@ -511,8 +523,13 @@ $color-texticon-accent-grey-bold: $color-nl-1300;
 $color-texticon-accent-grey-contrast: $color-nl-1000;
 $color-texticon-accent-lime-bold: $color-l-800;
 $color-texticon-accent-lime-contrast: $color-l-600;
+$color-texticon-accent-magenta-boldest: $color-m-1000;
+$color-texticon-accent-magenta-bolder: $color-m-900;
 $color-texticon-accent-magenta-bold: $color-m-800;
 $color-texticon-accent-magenta-contrast: $color-m-600;
+$color-texticon-accent-magenta-subtle: $color-m-400;
+$color-texticon-accent-magenta-subtler: $color-m-300;
+$color-texticon-accent-magenta-subtlest: $color-m-200;
 $color-texticon-accent-orange-bold: $color-o-800;
 $color-texticon-accent-orange-contrast: $color-o-600;
 $color-texticon-accent-purple-bold: $color-p-800;
@@ -525,7 +542,10 @@ $color-texticon-accent-violet-bold: $color-v-800;
 $color-texticon-accent-violet-contrast: $color-v-600;
 $color-texticon-accent-yellow-bold: $color-y-800;
 $color-texticon-accent-yellow-contrast: $color-y-600;
-$color-texticon-contrast: $color-nla-1500;
+$color-texticon-contrast: $color-nla-1700;
+$color-texticon-subtle: $color-nla-1300;
+$color-texticon-subtler: $color-nla-1000;
+$color-texticon-subtlest: $color-nla-1000;
 $color-texticon-disabled: $color-nla-700;
 $color-texticon-high-contrast-black-default: $color-nla-1500;
 $color-texticon-high-contrast-black-disabled: $color-nla-1000;
@@ -538,12 +558,21 @@ $color-texticon-link-visited: $color-p-500;
 $color-texticon-subtle: $color-nla-1200;
 $color-texticon-subtlest: $color-nla-1000;
 
+$color-background-brand-asksuite-boldest-default: $color-a-1000;
+$color-background-brand-asksuite-boldest-hovered: $color-a-900;
+$color-background-brand-asksuite-boldest-pressed: $color-a-800;
+$color-background-brand-asksuite-bolder-default: $color-a-800;
+$color-background-brand-asksuite-bolder-hovered: $color-a-900;
+$color-background-brand-asksuite-bolder-pressed: $color-a-1000;
 $color-background-brand-asksuite-bold-default: $color-a-700;
 $color-background-brand-asksuite-bold-hovered: $color-a-800;
 $color-background-brand-asksuite-bold-pressed: $color-a-900;
 $color-background-brand-asksuite-contrast-default: $color-a-600;
 $color-background-brand-asksuite-contrast-hovered: $color-a-700;
 $color-background-brand-asksuite-contrast-pressed: $color-a-800;
+$color-background-brand-asksuite-subtle-default: $color-a-300;
+$color-background-brand-asksuite-subtle-hovered: $color-a-400;
+$color-background-brand-asksuite-subtle-pressed: $color-a-500;
 $color-background-brand-asksuite-subtler-default: $color-a-200;
 $color-background-brand-asksuite-subtler-hovered: $color-a-300;
 $color-background-brand-asksuite-subtler-pressed: $color-a-400;
@@ -562,33 +591,70 @@ $color-background-brand-flow-subtler-pressed: $color-f-400;
 $color-background-brand-flow-subtlest-default: $color-f-100;
 $color-background-brand-flow-subtlest-hovered: $color-f-200;
 $color-background-brand-flow-subtlest-pressed: $color-f-300;
+$color-background-brand-sophia-boldest-default: linear-gradient(90deg, $color-background-accent-magenta-boldest-default 0%, $color-background-brand-asksuite-boldest-default 100%);
+$color-background-brand-sophia-boldest-hovered: linear-gradient(90deg, $color-background-accent-magenta-boldest-hovered 0%, $color-background-brand-asksuite-boldest-hovered 100%);
+$color-background-brand-sophia-boldest-pressed: linear-gradient(90deg, $color-background-accent-magenta-boldest-pressed 0%, $color-background-brand-asksuite-boldest-pressed 100%);
+$color-background-brand-sophia-bolder-default: linear-gradient(90deg, $color-background-accent-magenta-bolder-default 0%, $color-background-brand-asksuite-bolder-default 100%);
+$color-background-brand-sophia-bolder-hovered: linear-gradient(90deg, $color-background-accent-magenta-bolder-hovered 0%, $color-background-brand-asksuite-bolder-hovered 100%);
+$color-background-brand-sophia-bolder-pressed: linear-gradient(90deg, $color-background-accent-magenta-bolder-pressed 0%, $color-background-brand-asksuite-bolder-pressed 100%);
+$color-background-brand-sophia-bold-default: linear-gradient(90deg, $color-background-accent-magenta-bold-default 0%, $color-background-brand-asksuite-bold-default 100%);
+$color-background-brand-sophia-bold-hovered: linear-gradient(90deg, $color-background-accent-magenta-bold-hovered 0%, $color-background-brand-asksuite-bold-hovered 100%);
+$color-background-brand-sophia-bold-pressed: linear-gradient(90deg, $color-background-accent-magenta-bold-pressed 0%, $color-background-brand-asksuite-bold-pressed 100%);
+$color-background-brand-sophia-contrast-default: linear-gradient(90deg, $color-background-accent-magenta-contrast-default 0%, $color-background-brand-asksuite-contrast-default 100%);
+$color-background-brand-sophia-contrast-hovered: linear-gradient(90deg, $color-background-accent-magenta-contrast-hovered 0%, $color-background-brand-asksuite-contrast-hovered 100%);
+$color-background-brand-sophia-contrast-pressed: linear-gradient(90deg, $color-background-accent-magenta-contrast-pressed 0%, $color-background-brand-asksuite-contrast-pressed 100%);
+$color-background-brand-sophia-subtle-default: linear-gradient(90deg, $color-background-accent-magenta-subtle-default 0%, $color-background-brand-asksuite-subtle-default 100%);
+$color-background-brand-sophia-subtle-hovered: linear-gradient(90deg, $color-background-accent-magenta-subtle-hovered 0%, $color-background-brand-asksuite-subtle-hovered 100%);
+$color-background-brand-sophia-subtle-pressed: linear-gradient(90deg, $color-background-accent-magenta-subtle-pressed 0%, $color-background-brand-asksuite-subtle-pressed 100%);
+$color-background-brand-sophia-subtler-default: linear-gradient(90deg, $color-background-accent-magenta-subtler-default 0%, $color-background-brand-asksuite-subtler-default 100%);
+$color-background-brand-sophia-subtler-hovered: linear-gradient(90deg, $color-background-accent-magenta-subtler-hovered 0%, $color-background-brand-asksuite-subtler-hovered 100%);
+$color-background-brand-sophia-subtler-pressed: linear-gradient(90deg, $color-background-accent-magenta-subtler-pressed 0%, $color-background-brand-asksuite-subtler-pressed 100%);
+$color-background-brand-sophia-subtlest-default: linear-gradient(90deg, $color-background-accent-magenta-subtlest-default 0%, $color-background-brand-asksuite-subtlest-default 100%);
+$color-background-brand-sophia-subtlest-hovered: linear-gradient(90deg, $color-background-accent-magenta-subtlest-hovered 0%, $color-background-brand-asksuite-subtlest-hovered 100%);
+$color-background-brand-sophia-subtlest-pressed: linear-gradient(90deg, $color-background-accent-magenta-subtlest-pressed 0%, $color-background-brand-asksuite-subtlest-pressed 100%);
 
 $color-background-selected-ask: $color-a-100;
 $color-background-selected-flow: $color-f-100;
 
-$color-border-brand-asksuite-bold: $color-a-700;
+$color-border-brand-asksuite-boldest: $color-a-1000;
 $color-border-brand-asksuite-bolder: $color-a-900;
-$color-border-brand-asksuite-contrast: $color-a-500;
+$color-border-brand-asksuite-bold: $color-a-800;
+$color-border-brand-asksuite-contrast: $color-a-600;
 $color-border-brand-asksuite-subtle: $color-a-300;
-$color-border-brand-asksuite-subtler: $color-a-100;
+$color-border-brand-asksuite-subtler: $color-a-200;
+$color-border-brand-asksuite-subtlest: $color-a-100;
 $color-border-brand-flow-bold: $color-f-700;
 $color-border-brand-flow-bolder: $color-f-900;
 $color-border-brand-flow-contrast: $color-f-500;
 $color-border-brand-flow-subtle: $color-f-300;
 $color-border-brand-flow-subtler: $color-f-100;
+$color-border-brand-sophia-subtlest: linear-gradient(90deg, $color-border-accent-magenta-subtlest 0%, $color-border-brand-asksuite-subtlest 100%);
+$color-border-brand-sophia-subtler: linear-gradient(90deg, $color-border-accent-magenta-subtler 0%, $color-border-brand-asksuite-subtler 100%);
+$color-border-brand-sophia-subtle: linear-gradient(90deg, $color-border-accent-magenta-subtle 0%, $color-border-brand-asksuite-subtle 100%);
+$color-border-brand-sophia-contrast: linear-gradient(90deg, $color-border-accent-magenta-contrast 0%, $color-border-brand-asksuite-contrast 100%);
+$color-border-brand-sophia-bold: linear-gradient(90deg, $color-border-accent-magenta-bold 0%, $color-border-brand-asksuite-bold 100%);
+$color-border-brand-sophia-bolder: linear-gradient(90deg, $color-border-accent-magenta-bolder 0%, $color-border-brand-asksuite-bolder 100%);
+$color-border-brand-sophia-boldest: linear-gradient(90deg, $color-border-accent-magenta-boldest 0%, $color-border-brand-asksuite-boldest 100%);
 
 $color-skeleton: $color-background-alpha-subtlest-default;
 
-$color-texticon-brand-asksuite-bold: $color-a-700;
+$color-texticon-brand-asksuite-boldest: $color-a-1000;
 $color-texticon-brand-asksuite-bolder: $color-a-900;
+$color-texticon-brand-asksuite-bold: $color-a-800;
 $color-texticon-brand-asksuite-contrast: $color-a-600;
-$color-texticon-brand-asksuite-subtle: $color-a-300;
-$color-texticon-brand-asksuite-subtler: $color-a-100;
+$color-texticon-brand-asksuite-subtle: $color-a-400;
+$color-texticon-brand-asksuite-subtler: $color-a-300;
+$color-texticon-brand-asksuite-subtlest: $color-a-200;
 $color-texticon-brand-flow-bold: $color-f-700;
 $color-texticon-brand-flow-bolder: $color-f-900;
 $color-texticon-brand-flow-contrast: $color-f-500;
 $color-texticon-brand-flow-subtle: $color-f-300;
 $color-texticon-brand-flow-subtler: $color-f-100;
+$color-texticon-brand-sophia-boldest: linear-gradient(90deg, $color-texticon-accent-magenta-bolder 0%, $color-texticon-brand-asksuite-bolder 100%);
+$color-texticon-brand-sophia-bold: linear-gradient(90deg, $color-texticon-accent-magenta-bold 0%, $color-texticon-brand-asksuite-bold 100%);
+$color-texticon-brand-sophia-contrast: linear-gradient(90deg, $color-texticon-accent-magenta-contrast 0%, $color-texticon-brand-asksuite-contrast 100%);
+$color-texticon-brand-sophia-subtle: linear-gradient(90deg, $color-texticon-accent-magenta-subtle 0%, $color-texticon-brand-asksuite-subtle 100%);
+$color-texticon-brand-sophia-subtlest: linear-gradient(90deg, $color-texticon-accent-magenta-subtlest 0%, $color-texticon-brand-asksuite-subtler 100%);
 $color-texticon-danger: $color-texticon-accent-red-contrast;
 $color-texticon-info: $color-texticon-accent-blue-contrast;
 $color-texticon-success: $color-texticon-accent-green-contrast;
@@ -679,6 +745,7 @@ $color-border-contrast: $color-nla-1200;
   --color-texticon-inverse-default: #{$color-texticon-inverse-default};
   --color-texticon-contrast: #{$color-texticon-contrast};
   --color-texticon-subtle: #{$color-texticon-subtle};
+  --color-texticon-subtler: #{$color-texticon-subtler};
   --color-texticon-subtlest: #{$color-texticon-subtlest};
   --color-texticon-disabled: #{$color-texticon-disabled};
   --color-texticon-brand-asksuite-bold: #{$color-a-800};
@@ -782,7 +849,21 @@ $color-border-contrast: $color-nla-1200;
   --color-message-area-scroll-gradient: #{$message-area-scroll-gradient};
   --color-background-accent-magenta-subtlest-default: #{$color-background-accent-magenta-subtlest-default};
   --color-background-alpha-inverse-pressed: #{$color-nla-300};
-  --color-background-accent-magenta-contrast-default: #{$color-m-600};
-  --color-background-brand-asksuite-contrast-default: #{$color-a-600};
-  --color-background-sophia-contrast-default: linear-gradient(90deg, var(--color-background-accent-magenta-contrast-default) 0%, var(--color-background-brand-asksuite-contrast-default) 100%);
+
+  --color-background-sophia-contrast-default: #{$color-background-brand-sophia-contrast-default};
+  --color-background-sophia-contrast-hovered: #{$color-background-brand-sophia-contrast-hovered};
+  --color-background-sophia-contrast-pressed: #{$color-background-brand-sophia-contrast-pressed};
+  --color-background-sophia-subtlest-default: #{$color-background-brand-sophia-subtlest-default};
+  --color-background-sophia-subtlest-hovered: #{$color-background-brand-sophia-subtlest-hovered};
+  --color-background-sophia-subtlest-pressed: #{$color-background-brand-sophia-subtlest-pressed};
+  --color-background-sophia-subtler-default:  #{$color-background-brand-sophia-subtler-default};
+  --color-background-sophia-subtler-hovered:  #{$color-background-brand-sophia-subtler-hovered};
+  --color-background-sophia-subtler-pressed:  #{$color-background-brand-sophia-subtler-pressed};
+  --color-texticon-sophia-contrast: #{$color-texticon-brand-sophia-contrast};
+  --color-texticon-sophia-bold: #{$color-texticon-brand-sophia-bold};
+  --color-border-sophia-subtle: #{$color-border-brand-sophia-subtle};
+  --color-border-sophia-contrast: #{$color-border-brand-sophia-contrast};
+  --color-border-sophia-bold: #{$color-border-brand-sophia-bold};
+  --color-border-sophia-bolder: #{$color-border-brand-sophia-bolder};
+
 }

package/styles/theme-primitives.scss

@@ -226,3 +226,118 @@ $color-background-accent-grey-bold-default: $color-nl-1400;
 $color-border-inverse-subtle: $color-nl-400;
 $color-background-accent-grey-subtler-hovered: $color-nl-400;
 //
+
+// Sophia
+$color-background-accent-magenta-boldest-default: $color-m-100;
+$color-background-accent-magenta-boldest-hovered: $color-m-200;
+$color-background-accent-magenta-boldest-pressed: $color-m-300;
+$color-background-accent-magenta-bolder-default: $color-m-300;
+$color-background-accent-magenta-bolder-hovered: $color-m-200;
+$color-background-accent-magenta-bolder-pressed: $color-m-100;
+$color-background-accent-magenta-bold-default: $color-m-400;
+$color-background-accent-magenta-bold-hovered: $color-m-300;
+$color-background-accent-magenta-bold-pressed: $color-m-200;
+$color-background-accent-magenta-contrast-default: $color-m-500;
+$color-background-accent-magenta-contrast-hovered: $color-m-400;
+$color-background-accent-magenta-contrast-pressed: $color-m-300;
+$color-background-accent-magenta-subtle-default: $color-m-800;
+$color-background-accent-magenta-subtle-hovered: $color-m-700;
+$color-background-accent-magenta-subtle-pressed: $color-m-600;
+$color-background-accent-magenta-subtler-default: $color-m-900;
+$color-background-accent-magenta-subtler-hovered: $color-m-800;
+$color-background-accent-magenta-subtler-pressed: $color-m-700;
+$color-background-accent-magenta-subtlest-default: $color-m-1000;
+$color-background-accent-magenta-subtlest-hovered: $color-m-900;
+$color-background-accent-magenta-subtlest-pressed: $color-m-800;
+
+$color-texticon-accent-magenta-boldest: $color-m-100;
+$color-texticon-accent-magenta-bolder: $color-m-200;
+$color-texticon-accent-magenta-bold: $color-m-300;
+$color-texticon-accent-magenta-contrast: $color-m-500;
+$color-texticon-accent-magenta-subtle: $color-m-800;
+$color-texticon-accent-magenta-subtler: $color-m-900;
+$color-texticon-accent-magenta-subtlest: $color-m-1000;
+
+$color-border-accent-magenta-boldest: $color-m-100;
+$color-border-accent-magenta-bolder: $color-m-200;
+$color-border-accent-magenta-bold: $color-m-300;
+$color-border-accent-magenta-contrast: $color-m-500;
+$color-border-accent-magenta-subtle: $color-m-800;
+$color-border-accent-magenta-subtler: $color-m-900;
+$color-border-accent-magenta-subtlest: $color-m-1000;
+
+$color-background-brand-asksuite-boldest-default: $color-a-100;
+$color-background-brand-asksuite-boldest-hovered: $color-a-200;
+$color-background-brand-asksuite-boldest-pressed: $color-a-300;
+$color-background-brand-asksuite-bolder-default: $color-a-300;
+$color-background-brand-asksuite-bolder-hovered: $color-a-200;
+$color-background-brand-asksuite-bolder-pressed: $color-a-100;
+$color-background-brand-asksuite-bold-default: $color-a-400;
+$color-background-brand-asksuite-bold-hovered: $color-a-300;
+$color-background-brand-asksuite-bold-pressed: $color-a-200;
+$color-background-brand-asksuite-contrast-default: $color-a-500;
+$color-background-brand-asksuite-contrast-hovered: $color-a-400;
+$color-background-brand-asksuite-contrast-pressed: $color-a-300;
+$color-background-brand-asksuite-subtle-default: $color-a-800;
+$color-background-brand-asksuite-subtle-hovered: $color-a-700;
+$color-background-brand-asksuite-subtle-pressed: $color-a-600;
+$color-background-brand-asksuite-subtler-default: $color-a-900;
+$color-background-brand-asksuite-subtler-hovered: $color-a-800;
+$color-background-brand-asksuite-subtler-pressed: $color-a-700;
+$color-background-brand-asksuite-subtlest-default: $color-a-1000;
+$color-background-brand-asksuite-subtlest-hovered: $color-a-900;
+$color-background-brand-asksuite-subtlest-pressed: $color-a-800;
+
+$color-border-brand-asksuite-boldest: $color-a-100;
+$color-border-brand-asksuite-bolder: $color-a-200;
+$color-border-brand-asksuite-bold: $color-a-300;
+$color-border-brand-asksuite-contrast: $color-a-500;
+$color-border-brand-asksuite-subtle: $color-a-800;
+$color-border-brand-asksuite-subtler: $color-a-900;
+$color-border-brand-asksuite-subtlest: $color-a-1000;
+
+$color-texticon-brand-asksuite-boldest: $color-a-100;
+$color-texticon-brand-asksuite-bolder: $color-a-200;
+$color-texticon-brand-asksuite-bold: $color-a-300;
+$color-texticon-brand-asksuite-contrast: $color-a-500;
+$color-texticon-brand-asksuite-subtle: $color-a-800;
+$color-texticon-brand-asksuite-subtler: $color-a-900;
+$color-texticon-brand-asksuite-subtlest: $color-a-1000;
+
+
+$color-background-brand-sophia-boldest-default: linear-gradient(90deg, $color-background-accent-magenta-boldest-default 0%, $color-background-brand-asksuite-boldest-default 100%);
+$color-background-brand-sophia-boldest-hovered: linear-gradient(90deg, $color-background-accent-magenta-boldest-hovered 0%, $color-background-brand-asksuite-boldest-hovered 100%);
+$color-background-brand-sophia-boldest-pressed: linear-gradient(90deg, $color-background-accent-magenta-boldest-pressed 0%, $color-background-brand-asksuite-boldest-pressed 100%);
+$color-background-brand-sophia-bolder-default: linear-gradient(90deg, $color-background-accent-magenta-bolder-default 0%, $color-background-brand-asksuite-bolder-default 100%);
+$color-background-brand-sophia-bolder-hovered: linear-gradient(90deg, $color-background-accent-magenta-bolder-hovered 0%, $color-background-brand-asksuite-bolder-hovered 100%);
+$color-background-brand-sophia-bolder-pressed: linear-gradient(90deg, $color-background-accent-magenta-bolder-pressed 0%, $color-background-brand-asksuite-bolder-pressed 100%);
+$color-background-brand-sophia-bold-default: linear-gradient(90deg, $color-background-accent-magenta-bold-default 0%, $color-background-brand-asksuite-bold-default 100%);
+$color-background-brand-sophia-bold-hovered: linear-gradient(90deg, $color-background-accent-magenta-bold-hovered 0%, $color-background-brand-asksuite-bold-hovered 100%);
+$color-background-brand-sophia-bold-pressed: linear-gradient(90deg, $color-background-accent-magenta-bold-pressed 0%, $color-background-brand-asksuite-bold-pressed 100%);
+$color-background-brand-sophia-contrast-default: linear-gradient(90deg, $color-background-accent-magenta-contrast-default 0%, $color-background-brand-asksuite-contrast-default 100%);
+$color-background-brand-sophia-contrast-hovered: linear-gradient(90deg, $color-background-accent-magenta-contrast-hovered 0%, $color-background-brand-asksuite-contrast-hovered 100%);
+$color-background-brand-sophia-contrast-pressed: linear-gradient(90deg, $color-background-accent-magenta-contrast-pressed 0%, $color-background-brand-asksuite-contrast-pressed 100%);
+$color-background-brand-sophia-subtle-default: linear-gradient(90deg, $color-background-accent-magenta-subtle-default 0%, $color-background-brand-asksuite-subtle-default 100%);
+$color-background-brand-sophia-subtle-hovered: linear-gradient(90deg, $color-background-accent-magenta-subtle-hovered 0%, $color-background-brand-asksuite-subtle-hovered 100%);
+$color-background-brand-sophia-subtle-pressed: linear-gradient(90deg, $color-background-accent-magenta-subtle-pressed 0%, $color-background-brand-asksuite-subtle-pressed 100%);
+$color-background-brand-sophia-subtler-default: linear-gradient(90deg, $color-background-accent-magenta-subtler-default 0%, $color-background-brand-asksuite-subtler-default 100%);
+$color-background-brand-sophia-subtler-hovered: linear-gradient(90deg, $color-background-accent-magenta-subtler-hovered 0%, $color-background-brand-asksuite-subtler-hovered 100%);
+$color-background-brand-sophia-subtler-pressed: linear-gradient(90deg, $color-background-accent-magenta-subtler-pressed 0%, $color-background-brand-asksuite-subtler-pressed 100%);
+$color-background-brand-sophia-subtlest-default: linear-gradient(90deg, $color-background-accent-magenta-subtlest-default 0%, $color-background-brand-asksuite-subtlest-default 100%);
+$color-background-brand-sophia-subtlest-hovered: linear-gradient(90deg, $color-background-accent-magenta-subtlest-hovered 0%, $color-background-brand-asksuite-subtlest-hovered 100%);
+$color-background-brand-sophia-subtlest-pressed: linear-gradient(90deg, $color-background-accent-magenta-subtlest-pressed 0%, $color-background-brand-asksuite-subtlest-pressed 100%);
+
+$color-border-brand-sophia-subtlest: linear-gradient(90deg, $color-border-accent-magenta-subtlest 0%, $color-border-brand-asksuite-subtlest 100%);
+$color-border-brand-sophia-subtler: linear-gradient(90deg, $color-border-accent-magenta-subtler 0%, $color-border-brand-asksuite-subtler 100%);
+$color-border-brand-sophia-subtle: linear-gradient(90deg, $color-border-accent-magenta-subtle 0%, $color-border-brand-asksuite-subtle 100%);
+$color-border-brand-sophia-contrast: linear-gradient(90deg, $color-border-accent-magenta-contrast 0%, $color-border-brand-asksuite-contrast 100%);
+$color-border-brand-sophia-bold: linear-gradient(90deg, $color-border-accent-magenta-bold 0%, $color-border-brand-asksuite-bold 100%);
+$color-border-brand-sophia-bolder: linear-gradient(90deg, $color-border-accent-magenta-bolder 0%, $color-border-brand-asksuite-bolder 100%);
+$color-border-brand-sophia-boldest: linear-gradient(90deg, $color-border-accent-magenta-boldest 0%, $color-border-brand-asksuite-boldest 100%);
+
+$color-texticon-brand-sophia-boldest: linear-gradient(90deg, $color-texticon-accent-magenta-bolder 0%, $color-texticon-brand-asksuite-bolder 100%);
+$color-texticon-brand-sophia-bold: linear-gradient(90deg, $color-texticon-accent-magenta-bold 0%, $color-texticon-brand-asksuite-bold 100%);
+$color-texticon-brand-sophia-contrast: linear-gradient(90deg, $color-texticon-accent-magenta-contrast 0%, $color-texticon-brand-asksuite-contrast 100%);
+$color-texticon-brand-sophia-subtle: linear-gradient(90deg, $color-texticon-accent-magenta-subtle 0%, $color-texticon-brand-asksuite-subtle 100%);
+$color-texticon-brand-sophia-subtlest: linear-gradient(90deg, $color-texticon-accent-magenta-subtlest 0%, $color-texticon-brand-asksuite-subtler 100%);
+//