@dialpad/dialtone 6.34.2 → 7.0.0-beta.3

package/lib/build/less/components/avatar.less

@@ -51,16 +51,6 @@
 
   //  --  COLORS
   //  ------------------------------------------------------------------------
-  &.d-avatar--purple-800 {
-      --avatar--fc: var(--white);
-      --avatar--bgc: var(--purple-800);
-  }
-
-  &.d-avatar--purple-700 {
-      --avatar--fc: var(--white);
-      --avatar--bgc: var(--purple-700);
-  }
-
   &.d-avatar--purple-600 {
       --avatar--fc: var(--white);
       --avatar--bgc: var(--purple-600);
@@ -72,7 +62,7 @@
   }
 
   &.d-avatar--purple-400 {
-      --avatar--fc: var(--purple-800);
+      --avatar--fc: var(--white);
       --avatar--bgc: var(--purple-400);
   }
 

package/lib/build/less/components/badge.less

@@ -52,14 +52,14 @@
   --badge--bgc: var(--purple-300);
 }
 
-.d-badge--purple-500 {
-  --badge--bgc: var(--purple-500);
+.d-badge--purple-400 {
+  --badge--bgc: var(--purple-400);
   --badge--fc: var(--white);
 }
 
-.d-badge--purple-700 {
+.d-badge--purple-500 {
   --badge--fc: var(--white);
-  --badge--bgc: var(--purple-700);
+  --badge--bgc: var(--purple-500);
 }
 
 .d-badge--orange-400 {

package/lib/build/less/components/banner.less

@@ -107,7 +107,7 @@
     --banner--bgc: var(--purple-100);
 
     &.d-banner--important {
-        --banner--bgc: var(--purple-500);
+        --banner--bgc: var(--purple-400);
         --banner--fc: var(--white);
     }
 }

package/lib/build/less/components/button.less

@@ -20,7 +20,7 @@
 .d-btn {
     //  Component specific CSS Vars
     //  ------------------------------------------------------------------------
-    --button--fc: var(--primary-color);
+    --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
     --button--bgc: transparent;
     --button--bc: transparent;
     --button--br: var(--base--corner-radius);
@@ -52,15 +52,15 @@
     //  --  STATES
     //  ------------------------------------------------------------------------
     &:hover {
-        --button--fc: var(--primary-color-hover);
-        --button--bgc: hsla(var(--primary-color-hsl) ~' / ' 3%);
+        --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
+        --button--bgc: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l) ~' / ' 3%);
     }
 
     &:active,
     &.d-btn--active,
     &.d-btn--active:active {
-        --button--fc: var(--primary-color-hover);
-        --button--bgc: hsla(var(--primary-color-hsl) ~' / ' 9%);
+        --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
+        --button--bgc: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l) ~' / ' 9%);
     }
 
 
@@ -276,25 +276,25 @@
 //  $$  OUTLINED BUTTON
 //  ----------------------------------------------------------------------------
 .d-btn--outlined {
-    --button--bc: var(--primary-color);
+    --button--bc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
 }
 
 //  $$  PRIMARY BUTTON
 //  ----------------------------------------------------------------------------
 .d-btn--primary {
     --button--fc: var(--white);
-    --button--bgc: var(--primary-color);
+    --button--bgc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
 
     &:hover {
       --button--fc: var(--white);
-      --button--bgc: hsl(var(--primary-color-h), var(--primary-color-s), 65%);
+      --button--bgc: hsl(var(--purple-400-h), var(--purple-400-s), 65%);
     }
 
     &:active,
     &.d-btn--active,
     &.d-btn--active:active {
       --button--fc: var(--white);
-      --button--bgc: hsl(var(--primary-color-h), var(--primary-color-s), 42%);
+      --button--bgc: hsl(var(--purple-400-h), var(--purple-400-s), 42%);
     }
 }
 
@@ -397,18 +397,18 @@
 
     //  --  PRIMARY
     &.d-btn--primary {
-        --button--fc: var(--primary-color);
+        --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
         --button--bgc: hsl(var(--purple-100-h), var(--purple-100-s), 100%);
 
         &:hover {
-            --button--fc: var(--primary-color-hover);
+            --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
             --button--bgc: hsl(var(--purple-100-h), var(--purple-100-s), 94%);
         }
 
         &:active,
         &.d-btn--active,
         &.d-btn--active:active {
-            --button--fc: var(--primary-color-hover);
+            --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
             --button--bgc: hsl(var(--purple-100-h), var(--purple-100-s), 91%);
         }
     }

package/lib/build/less/components/input.less

@@ -33,7 +33,7 @@
 .d-textarea {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --input--focus-bc: var(--primary-color);
+    --input--focus-bc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
     --input--bc: var(--black-500);
     --input--bgc: var(--white);
     --input--fc: var(--black-800);

package/lib/build/less/components/link.less

@@ -21,7 +21,7 @@
     box-sizing: border-box;
     margin: var(--su0);
     padding: var(--su0);
-    color: var(--primary-color);
+    color: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
     font: inherit;
     text-decoration: underline;
     background-color: transparent;
@@ -35,7 +35,7 @@
     fill: currentColor;
 
     &:hover {
-        color: var(--primary-color-hover);
+        color: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
         text-decoration: none;
         cursor: pointer;
     }

package/lib/build/less/components/list-group.less

@@ -33,16 +33,16 @@
 
     &:hover {
         color: var(--black-900);
-        background-color: hsla(var(--primary-color-hsl) ~' / ' 85%);
+        background-color: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l) ~' / ' 85%);
     }
 
     &-selected {
         color: var(--white);
-        background-color: var(--primary-color);
+        background-color: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
 
         &:hover {
             color: var(--white);
-            background-color: hsl(var(--primary-color-h) var(--primary-color-s) calc(var(--primary-color-l) + 10%));
+            background-color: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) + 10%));
         }
     }
 }

package/lib/build/less/components/notice.less

@@ -115,7 +115,7 @@
     &.d-notice--important,
     &.d-banner--important,
     &.d-toast--important {
-        --notice--bgc: var(--purple-500);
+        --notice--bgc: var(--purple-400);
         --notice--fc: var(--white);
     }
 }

package/lib/build/less/components/radio-checkbox.less

@@ -25,7 +25,7 @@
 .d-radio {
     //  Component specific CSS Vars
     //  ------------------------------------------------------------------------
-    --check-radio--color: var(--primary-color);
+    --check-radio--color: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
     --check-radio--bc: var(--black-500);
     --check-radio--bgc: var(--white);
 

package/lib/build/less/components/selects.less

@@ -115,7 +115,7 @@
   --select--bc: var(--black-500);
 
   &:focus {
-    --select--bc: var(--primary-color);
+    --select--bc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
 
     box-shadow: var(--bs-focus-ring);
   }

package/lib/build/less/components/tabs.less

@@ -103,18 +103,18 @@
 //  $   SELECTED STYLE
 //  ----------------------------------------------------------------------------
 .d-tab--selected {
-    --tab--fc: var(--primary-color);
+    --tab--fc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
 
     z-index: var(--zi-selected);
 
     &:hover {
-        --tab--bgc: hsla(var(--primary-color-hsl) ~' / ' 10%);
-        --tab--fc: var(--primary-color-hover);
+        --tab--bgc: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l) ~' / ' 10%);
+        --tab--fc: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
     }
 
     &::after,
     &:hover::after {
-        --tab--bgc: var(--primary-color);
+        --tab--bgc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
     }
 }
 
@@ -126,7 +126,7 @@
     --tab--fc: var(--white);
 
     &::after {
-        background-color: hsla(var(--purple-800-hsl) ~' / ' 50%);
+        background-color: hsla(var(--purple-600-hsl) ~' / ' 50%);
     }
 
     .d-tab {

package/lib/build/less/components/toast.less

@@ -107,7 +107,7 @@
     --toast--fc: var(--fc-dark);
 
     &.d-toast--important {
-        --toast--bgc: var(--purple-500);
+        --toast--bgc: var(--purple-400);
         --toast--fc: var(--white);
     }
 }

package/lib/build/less/components/toggle.less

@@ -74,7 +74,7 @@
 //  $$  CHECKED TOGGLE
 //  ----------------------------------------------------------------------------
 .d-toggle--checked {
-  --toggle-bc: var(--primary-color);
+  --toggle-bc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
 
   .d-toggle__inner {
     left: var(--su6);

package/lib/build/less/dialtone-globals.less

@@ -51,14 +51,6 @@ body {
     }
 }
 
-.d-svg-primary--stroke {
-    stroke: var(--primary-color);
-}
-
-.d-svg-primary--fill {
-    fill: var(--primary-color);
-}
-
 //  ============================================================================
 //  @   FOCUS VISIBLE
 //  ----------------------------------------------------------------------------

package/lib/build/less/themes/default.less

@@ -34,12 +34,6 @@
 
 
 @theme-vars: {
-    primary-color-h:                        var(--purple-500-h);
-    primary-color-s:                        var(--purple-500-s);
-    primary-color-l:                        var(--purple-500-l);
-    primary-color-hsl:                      var(--primary-color-h) var(--primary-color-s) var(--primary-color-l);
-    primary-color:                          hsl(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l));
-    primary-color-hover:                    hsl(var(--primary-color-h) var(--primary-color-s) calc(var(--primary-color-l) - 10%));
     nav-background-color-h:                 var(--purple-800-h);
     nav-background-color-s:                 var(--purple-800-s);
     nav-background-color-l:                 var(--purple-800-l);
@@ -85,8 +79,6 @@ body {
     #d-internals #color-vars(purple-400, @purple-400);
     #d-internals #color-vars(purple-500, @purple-500);
     #d-internals #color-vars(purple-600, @purple-600);
-    #d-internals #color-vars(purple-700, @purple-700);
-    #d-internals #color-vars(purple-800, @purple-800);
     #d-internals #color-vars(orange-100, @orange-100);
     #d-internals #color-vars(orange-200, @orange-200);
     #d-internals #color-vars(orange-300, @orange-300);
@@ -138,14 +130,12 @@ body {
         #d-internals #color-vars(black-700, @black-050);
         #d-internals #color-vars(black-800, @black-025);
         #d-internals #color-vars(black-900, @white);
-        #d-internals #color-vars(purple-100, @purple-800);
-        #d-internals #color-vars(purple-200, @purple-700);
-        #d-internals #color-vars(purple-300, @purple-600);
-        #d-internals #color-vars(purple-400, @purple-500);
-        #d-internals #color-vars(purple-500, @purple-400);
-        #d-internals #color-vars(purple-600, @purple-300);
-        #d-internals #color-vars(purple-700, @purple-200);
-        #d-internals #color-vars(purple-800, @purple-100);
+        #d-internals #color-vars(purple-100, @purple-600);
+        #d-internals #color-vars(purple-200, @purple-500);
+        #d-internals #color-vars(purple-300, @purple-400);
+        #d-internals #color-vars(purple-400, @purple-300);
+        #d-internals #color-vars(purple-500, @purple-200);
+        #d-internals #color-vars(purple-600, @purple-100);
         #d-internals #color-vars(orange-100, @orange-600);
         #d-internals #color-vars(orange-200, @orange-500);
         #d-internals #color-vars(orange-300, @orange-400);

package/lib/build/less/themes/example.less

@@ -25,16 +25,8 @@
 //  $$  SET THESE
 //      Currently only the following items are themeable in Dialtone.
 //
-//      @primary-color:         This is used for all selected and primary states
-//                              in elements and components (i.e. buttons, input focus,
-//                              links, etc).
-//
-//      @primary-color--hover:  Hover state color for @primary-color.
-//
 //      @nav__background-color: This sets the navigation background color.
 //  ----------------------------------------------------------------------------
-@primary-color:                 @purple-500;
-@primary-color--hover:          darken(@primary-color, 10%);
 @nav__background-color:         @black-400;
 
 //  \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
@@ -43,14 +35,6 @@
 //      Warning:    We use these to extract the HSL values of the HEX code and
 //                  restate them in the CSS Variables.
 //  ----------------------------------------------------------------------------
-@primary-color--h:              hue(@primary-color);
-@primary-color--s:              saturation(@primary-color);
-@primary-color--l:              lightness(@primary-color);
-
-@primary-color--hover--h:       hue(@primary-color--hover);
-@primary-color--hover--s:       saturation(@primary-color--hover);
-@primary-color--hover--l:       lightness(@primary-color--hover);
-
 @nav__background-color--h:      hue(@nav__background-color);
 @nav__background-color--s:      saturation(@nav__background-color);
 @nav__background-color--l:      lightness(@nav__background-color);
@@ -59,23 +43,10 @@
 //  --  RE-DECLARE CSS VARIABLES WITH NEW COLORS
 //  ----------------------------------------------------------------------------
 @theme-vars: {
-    primary-color:              @primary-color;
-    primary-color--h:           @primary-color--h;
-    primary-color--s:           @primary-color--s;
-    primary-color--l:           @primary-color--l;
-
-    primary-color--hover:       @primary-color--hover;
-    primary-color--hover--h:    @primary-color--hover--h;
-    primary-color--hover--s:    @primary-color--hover--s;
-    primary-color--hover--l:    @primary-color--l;
-
     nav__background-color:      @nav__background-color;
     nav__background-color--h:   @nav__background-color--h;
     nav__background-color--s:   @nav__background-color--s;
     nav__background-color--l:   @nav__background-color--l;
-
-    btn--inverted__bg--hover:   fade(mix(#fff, @primary-color, 90%), 25%);
-    btn--inverted--primary__bg--hover: mix(#fff, @primary-color, 90%);
 }
 
 //  ============================================================================

package/lib/build/less/utilities/backgrounds.less

@@ -36,8 +36,6 @@
 #d-internals #gradient-classes(black-075);
 #d-internals #gradient-classes(black-050);
 #d-internals #gradient-classes(black-025);
-#d-internals #gradient-classes(purple-800);
-#d-internals #gradient-classes(purple-700);
 #d-internals #gradient-classes(pink-700);
 #d-internals #gradient-classes(yellow-050);
 #d-internals #gradient-classes(green-700);

package/lib/build/less/utilities/colors.less

@@ -32,17 +32,10 @@
 #d-internals #color-classes(black-050);
 #d-internals #color-classes(black-025);
 #d-internals #color-classes(pink-700);
-#d-internals #color-classes(purple-800);
-#d-internals #color-classes(purple-700);
 #d-internals #color-classes(yellow-050);
 #d-internals #color-classes(green-700);
 #d-internals #color-classes(red-700);
 
-.d-fc-primary {
-    color: hsla(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l)  ~' / ' var(--fco)) !important;
-}
-#d-internals #generate-hover-focus(d-fc-primary, {.d-fc-primary();});
-
 //  $$  TEXT COLORS
 //  ----------------------------------------------------------------------------
 .d-fc-dark { &:extend(.d-fc-black-900); }
@@ -57,7 +50,7 @@
 .d-fc-lighter { &:extend(.d-fc-black-600); }
 #d-internals #generate-hover-focus(d-fc-lighter, {.d-fc-lighter();});
 
-.d-fc-purple { &:extend(.d-fc-purple-500); }
+.d-fc-purple { &:extend(.d-fc-purple-400); }
 #d-internals #generate-hover-focus(d-fc-purple, {.d-fc-purple();});
 
 .d-fc-orange { &:extend(.d-fc-orange-600); }
@@ -72,7 +65,7 @@
 #d-internals #generate-hover-focus(d-fc-success, {.d-fc-success();});
 
 .d-fc-yellow { &:extend(.d-fc-yellow-600); }
-.d-fc-warning { color: var(--fc-warning) }
+.d-fc-warning { color: var(--fc-warning); }
 #d-internals #generate-hover-focus(d-fc-yellow, {.d-fc-yellow();});
 #d-internals #generate-hover-focus(d-fc-warning, {.d-fc-warning();});
 

package/lib/build/less/variables/colors.less

@@ -27,14 +27,12 @@
 @black-800:                     #221F24;
 @black-900:                     #0D0C0F;
 
-@purple-100:                    #ECE1FF;
-@purple-200:                    #D1C0FF;
-@purple-300:                    #A687FF;
-@purple-400:                    #8B65FF;
-@purple-500:                    #6C3DFF;
-@purple-600:                    #3A1C95;
-@purple-700:                    #2A1173;
-@purple-800:                    #160645;
+@purple-100:                    #EEE5FF;
+@purple-200:                    #D3BCFF;
+@purple-300:                    #AB7EFF;
+@purple-400:                    #7C52FF;
+@purple-500:                    #3A1D95;
+@purple-600:                    #10022C;
 
 @orange-100:                    #FFF0E5;
 @orange-200:                    #FFCCA7;
@@ -106,7 +104,7 @@
 //      Used on inputs, buttons, and other focusable elements.
 //  ----------------------------------------------------------------------------
 @focus-rings: {
-    focus-ring:                 hsla(var(--primary-color-hsl) ~' / ' 75%);
+    focus-ring:                 hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l) ~' / ' 75%);
     focus-ring-success:         hsla(var(--success-color-hsl) ~' / ' 75%);
     focus-ring-warning:         hsla(var(--warning-color-hsl) ~' / ' 75%);
     focus-ring-error:           hsla(var(--error-color-hsl) ~' / ' 75%);
@@ -124,7 +122,7 @@
     fc-medium:                  var(--black-800);
     fc-light:                   var(--black-700);
     fc-lighter:                 var(--black-600);
-    fc-purple:                  var(--purple-500);
+    fc-purple:                  var(--purple-400);
     fc-orange:                  var(--orange-600);
     fc-pink:                    var(--pink-600);
     fc-green:                   var(--green-600);
@@ -136,7 +134,6 @@
     fc-warning:                 hsla(var(--yellow-500-h) var(--yellow-500-s) calc(var(--yellow-500-l) - 20%) ~' / ' var(--alpha, 100%));
     fc-warning-hover:           hsla(var(--yellow-500-h) var(--yellow-500-s) calc(var(--yellow-500-l) - 30%) ~' / ' var(--alpha, 100%));
     fc-muted:                   var(--black-900);
-    fc-primary:                 var(--primary-color);
 
     //  --  BASE TEMPLATE
     base--text-color:           var(--black-900);

package/lib/build/svg/brand/brand-dialpad-meetings.svg

@@ -1,11 +1,11 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.1944 7.33835C14.4218 7.33759 13.675 7.62177 13.0917 8.13849C12.5083 8.65522 12.1278 9.36965 12.0202 10.1501V5.65846C12.0203 5.64862 12.0174 5.639 12.012 5.63085C12.0066 5.6227 11.9989 5.61638 11.99 5.61272C11.981 5.60906 11.9712 5.60822 11.9618 5.61032C11.9524 5.61242 11.9438 5.61735 11.9372 5.62448L10.0623 7.59459C9.66732 7.42487 9.24293 7.33773 8.81431 7.33835C7.04501 7.33835 5.60919 8.79762 5.60919 10.5979C5.60919 12.3981 7.04421 13.8574 8.81471 13.8574C9.58725 13.8581 10.334 13.574 10.9174 13.0574C11.5007 12.5407 11.8813 11.8264 11.9889 11.0461V15.5373C11.9889 15.5815 12.0415 15.6028 12.0716 15.5712L13.9468 13.6011C14.3417 13.7708 14.766 13.8579 15.1944 13.8574C16.9645 13.8574 18.3996 12.3981 18.3996 10.5979C18.3996 8.79762 16.9645 7.33835 15.1944 7.33835Z" fill="#6C3DFF"/>
-<path d="M4.32184 19.8208C4.32184 19.9317 4.41178 20.0216 4.52273 20.0216V20.0216C4.63368 20.0216 4.72362 19.9317 4.72362 19.8208V19.0578C4.72362 18.8169 4.86479 18.5903 5.13265 18.5903C5.44756 18.5903 5.50186 18.8025 5.50186 19.0507V19.8208C5.50186 19.9317 5.5918 20.0216 5.70275 20.0216V20.0216C5.8137 20.0216 5.90364 19.9317 5.90364 19.8208V19.0327C5.90364 18.7917 6.05205 18.5903 6.30905 18.5903C6.62396 18.5903 6.67825 18.8025 6.67825 19.0507V19.8208C6.67825 19.9317 6.7682 20.0216 6.87915 20.0216V20.0216C6.9901 20.0216 7.08004 19.9317 7.08004 19.8208V18.9967C7.08004 18.4932 6.8701 18.2055 6.39954 18.2055C6.18598 18.2055 5.9326 18.335 5.81315 18.5436C5.71904 18.3278 5.53081 18.2055 5.24848 18.2055C5.02768 18.2055 4.81774 18.3386 4.72362 18.504V18.4424C4.72362 18.3314 4.63368 18.2415 4.52273 18.2415V18.2415C4.41178 18.2415 4.32184 18.3314 4.32184 18.4424V19.8208Z" fill="#6C3DFF"/>
-<path d="M8.45766 20.0576C8.64754 20.0576 8.83742 20.0099 9.00913 19.9217C9.08483 19.8828 9.10733 19.7883 9.06689 19.7135V19.7135C9.01998 19.6266 8.90756 19.6009 8.81592 19.6376C8.70532 19.682 8.58355 19.7052 8.4649 19.7052C8.19704 19.7052 7.96538 19.5577 7.90747 19.2736H9.26485C9.26485 19.2736 9.27571 19.1945 9.27571 19.119C9.27571 18.6191 8.89202 18.2055 8.41422 18.2055C7.89299 18.2055 7.4912 18.6227 7.4912 19.1334C7.4912 19.7196 7.94728 20.0576 8.45766 20.0576ZM7.90385 18.9787C7.95814 18.7234 8.16085 18.5544 8.3925 18.5544C8.63864 18.5544 8.84497 18.7234 8.88478 18.9787H7.90385Z" fill="#6C3DFF"/>
-<path d="M10.5255 20.0576C10.7154 20.0576 10.9053 20.0099 11.077 19.9217C11.1527 19.8828 11.1752 19.7883 11.1348 19.7135V19.7135C11.0879 19.6266 10.9754 19.6009 10.8838 19.6376C10.7732 19.682 10.6514 19.7052 10.5328 19.7052C10.2649 19.7052 10.0333 19.5577 9.97535 19.2736H11.3327C11.3327 19.2736 11.3436 19.1945 11.3436 19.119C11.3436 18.6191 10.9599 18.2055 10.4821 18.2055C9.96087 18.2055 9.55909 18.6227 9.55909 19.1334C9.55909 19.7196 10.0152 20.0576 10.5255 20.0576ZM9.97173 18.9787C10.026 18.7234 10.2287 18.5544 10.4604 18.5544C10.7065 18.5544 10.9129 18.7234 10.9527 18.9787H9.97173Z" fill="#6C3DFF"/>
-<path d="M12.3437 20.0576C12.4756 20.0576 12.5829 20.0241 12.6648 19.9858C12.731 19.9549 12.7548 19.8756 12.7277 19.8078V19.8078C12.6908 19.7155 12.5735 19.6822 12.4763 19.7033C12.4504 19.7089 12.4228 19.7124 12.3943 19.7124C12.293 19.7124 12.2025 19.6512 12.2025 19.4606V18.5688H12.5782C12.6686 18.5688 12.7418 18.4955 12.7418 18.4051V18.4051C12.7418 18.3148 12.6686 18.2415 12.5782 18.2415H12.2025V17.8561C12.2025 17.7451 12.1126 17.6552 12.0016 17.6552V17.6552C11.8907 17.6552 11.8007 17.7451 11.8007 17.8561V18.2415H11.7001C11.6097 18.2415 11.5365 18.3148 11.5365 18.4051V18.4051C11.5365 18.4955 11.6097 18.5688 11.7001 18.5688H11.8007V19.4498C11.8007 19.8598 11.9781 20.0576 12.3437 20.0576Z" fill="#6C3DFF"/>
-<path d="M13.2298 20.0216H13.6316V18.4424C13.6316 18.3314 13.5416 18.2415 13.4307 18.2415V18.2415C13.3197 18.2415 13.2298 18.3314 13.2298 18.4424V20.0216ZM13.4289 18.0751C13.5628 18.0751 13.675 17.9672 13.675 17.8341C13.675 17.7011 13.5628 17.5896 13.4289 17.5896C13.295 17.5896 13.1864 17.7011 13.1864 17.8341C13.1864 17.9672 13.295 18.0751 13.4289 18.0751Z" fill="#6C3DFF"/>
-<path d="M14.1277 19.8208C14.1277 19.9317 14.2176 20.0216 14.3286 20.0216V20.0216C14.4395 20.0216 14.5295 19.9317 14.5295 19.8208V19.0902C14.5295 18.7953 14.7213 18.5903 14.9856 18.5903C15.286 18.5903 15.3512 18.7594 15.3512 19.0507V19.8208C15.3512 19.9317 15.4411 20.0216 15.552 20.0216V20.0216C15.663 20.0216 15.7529 19.9317 15.7529 19.8208V19.0003C15.7529 18.5256 15.5937 18.2055 15.1086 18.2055C14.8697 18.2055 14.6634 18.299 14.5295 18.4968V18.4424C14.5295 18.3314 14.4395 18.2415 14.3286 18.2415V18.2415C14.2176 18.2415 14.1277 18.3314 14.1277 18.4424V19.8208Z" fill="#6C3DFF"/>
-<path d="M16.95 20.5503C17.464 20.5503 17.8839 20.2374 17.8839 19.6153V18.2415H17.5002V18.5076C17.4061 18.3314 17.1636 18.2055 16.8921 18.2055C16.3962 18.2055 16.0704 18.5903 16.0704 19.0686C16.0704 19.5469 16.3962 19.9281 16.8921 19.9281C17.2179 19.9281 17.4097 19.7663 17.4821 19.6225V19.6368C17.4821 20.0001 17.2939 20.2446 16.9102 20.2446C16.7813 20.2446 16.64 20.2148 16.5184 20.1552C16.4373 20.1154 16.3314 20.1309 16.2838 20.2078V20.2078C16.2463 20.2686 16.2573 20.3487 16.3176 20.387C16.4798 20.4899 16.6979 20.5503 16.95 20.5503ZM16.979 19.5793C16.6966 19.5793 16.4794 19.3635 16.4794 19.0686C16.4794 18.7737 16.6966 18.5544 16.979 18.5544C17.2613 18.5544 17.4821 18.7701 17.4821 19.0543C17.4821 19.3635 17.2685 19.5793 16.979 19.5793Z" fill="#6C3DFF"/>
-<path d="M18.9144 20.0576C19.2474 20.0576 19.6782 19.9066 19.6782 19.4894C19.6782 19.1226 19.3307 18.9895 18.9977 18.9176C18.8384 18.8852 18.69 18.8565 18.69 18.7342C18.69 18.6407 18.8239 18.5795 18.9579 18.5795C19.0692 18.5795 19.1705 18.5965 19.2699 18.6314C19.3688 18.6661 19.484 18.6309 19.5276 18.5357V18.5357C19.5658 18.4524 19.5355 18.3519 19.4525 18.3129C19.3068 18.2444 19.1563 18.2055 18.9542 18.2055C18.6393 18.2055 18.281 18.3925 18.281 18.7414C18.281 19.0902 18.5706 19.1909 18.9108 19.2844C19.0882 19.3348 19.2692 19.3671 19.2692 19.4966C19.2692 19.6225 19.0773 19.6836 18.9144 19.6836C18.7643 19.6836 18.6403 19.6463 18.5399 19.5971C18.4343 19.5453 18.2982 19.5747 18.2486 19.6813V19.6813C18.216 19.7515 18.2313 19.8357 18.2958 19.8785C18.4256 19.9645 18.6374 20.0576 18.9144 20.0576Z" fill="#6C3DFF"/>
+<path d="M15.1944 7.33835C14.4218 7.33759 13.675 7.62177 13.0917 8.13849C12.5083 8.65522 12.1278 9.36965 12.0202 10.1501V5.65846C12.0203 5.64862 12.0174 5.639 12.012 5.63085C12.0066 5.6227 11.9989 5.61638 11.99 5.61272C11.981 5.60906 11.9712 5.60822 11.9618 5.61032C11.9524 5.61242 11.9438 5.61735 11.9372 5.62448L10.0623 7.59459C9.66732 7.42487 9.24293 7.33773 8.81431 7.33835C7.04501 7.33835 5.60919 8.79762 5.60919 10.5979C5.60919 12.3981 7.04421 13.8574 8.81471 13.8574C9.58725 13.8581 10.334 13.574 10.9174 13.0574C11.5007 12.5407 11.8813 11.8264 11.9889 11.0461V15.5373C11.9889 15.5815 12.0415 15.6028 12.0716 15.5712L13.9468 13.6011C14.3417 13.7708 14.766 13.8579 15.1944 13.8574C16.9645 13.8574 18.3996 12.3981 18.3996 10.5979C18.3996 8.79762 16.9645 7.33835 15.1944 7.33835Z" fill="#7C52FF"/>
+<path d="M4.32184 19.8208C4.32184 19.9317 4.41178 20.0216 4.52273 20.0216V20.0216C4.63368 20.0216 4.72362 19.9317 4.72362 19.8208V19.0578C4.72362 18.8169 4.86479 18.5903 5.13265 18.5903C5.44756 18.5903 5.50186 18.8025 5.50186 19.0507V19.8208C5.50186 19.9317 5.5918 20.0216 5.70275 20.0216V20.0216C5.8137 20.0216 5.90364 19.9317 5.90364 19.8208V19.0327C5.90364 18.7917 6.05205 18.5903 6.30905 18.5903C6.62396 18.5903 6.67825 18.8025 6.67825 19.0507V19.8208C6.67825 19.9317 6.7682 20.0216 6.87915 20.0216V20.0216C6.9901 20.0216 7.08004 19.9317 7.08004 19.8208V18.9967C7.08004 18.4932 6.8701 18.2055 6.39954 18.2055C6.18598 18.2055 5.9326 18.335 5.81315 18.5436C5.71904 18.3278 5.53081 18.2055 5.24848 18.2055C5.02768 18.2055 4.81774 18.3386 4.72362 18.504V18.4424C4.72362 18.3314 4.63368 18.2415 4.52273 18.2415V18.2415C4.41178 18.2415 4.32184 18.3314 4.32184 18.4424V19.8208Z" fill="#7C52FF"/>
+<path d="M8.45766 20.0576C8.64754 20.0576 8.83742 20.0099 9.00913 19.9217C9.08483 19.8828 9.10733 19.7883 9.06689 19.7135V19.7135C9.01998 19.6266 8.90756 19.6009 8.81592 19.6376C8.70532 19.682 8.58355 19.7052 8.4649 19.7052C8.19704 19.7052 7.96538 19.5577 7.90747 19.2736H9.26485C9.26485 19.2736 9.27571 19.1945 9.27571 19.119C9.27571 18.6191 8.89202 18.2055 8.41422 18.2055C7.89299 18.2055 7.4912 18.6227 7.4912 19.1334C7.4912 19.7196 7.94728 20.0576 8.45766 20.0576ZM7.90385 18.9787C7.95814 18.7234 8.16085 18.5544 8.3925 18.5544C8.63864 18.5544 8.84497 18.7234 8.88478 18.9787H7.90385Z" fill="#7C52FF"/>
+<path d="M10.5255 20.0576C10.7154 20.0576 10.9053 20.0099 11.077 19.9217C11.1527 19.8828 11.1752 19.7883 11.1348 19.7135V19.7135C11.0879 19.6266 10.9754 19.6009 10.8838 19.6376C10.7732 19.682 10.6514 19.7052 10.5328 19.7052C10.2649 19.7052 10.0333 19.5577 9.97535 19.2736H11.3327C11.3327 19.2736 11.3436 19.1945 11.3436 19.119C11.3436 18.6191 10.9599 18.2055 10.4821 18.2055C9.96087 18.2055 9.55909 18.6227 9.55909 19.1334C9.55909 19.7196 10.0152 20.0576 10.5255 20.0576ZM9.97173 18.9787C10.026 18.7234 10.2287 18.5544 10.4604 18.5544C10.7065 18.5544 10.9129 18.7234 10.9527 18.9787H9.97173Z" fill="#7C52FF"/>
+<path d="M12.3437 20.0576C12.4756 20.0576 12.5829 20.0241 12.6648 19.9858C12.731 19.9549 12.7548 19.8756 12.7277 19.8078V19.8078C12.6908 19.7155 12.5735 19.6822 12.4763 19.7033C12.4504 19.7089 12.4228 19.7124 12.3943 19.7124C12.293 19.7124 12.2025 19.6512 12.2025 19.4606V18.5688H12.5782C12.6686 18.5688 12.7418 18.4955 12.7418 18.4051V18.4051C12.7418 18.3148 12.6686 18.2415 12.5782 18.2415H12.2025V17.8561C12.2025 17.7451 12.1126 17.6552 12.0016 17.6552V17.6552C11.8907 17.6552 11.8007 17.7451 11.8007 17.8561V18.2415H11.7001C11.6097 18.2415 11.5365 18.3148 11.5365 18.4051V18.4051C11.5365 18.4955 11.6097 18.5688 11.7001 18.5688H11.8007V19.4498C11.8007 19.8598 11.9781 20.0576 12.3437 20.0576Z" fill="#7C52FF"/>
+<path d="M13.2298 20.0216H13.6316V18.4424C13.6316 18.3314 13.5416 18.2415 13.4307 18.2415V18.2415C13.3197 18.2415 13.2298 18.3314 13.2298 18.4424V20.0216ZM13.4289 18.0751C13.5628 18.0751 13.675 17.9672 13.675 17.8341C13.675 17.7011 13.5628 17.5896 13.4289 17.5896C13.295 17.5896 13.1864 17.7011 13.1864 17.8341C13.1864 17.9672 13.295 18.0751 13.4289 18.0751Z" fill="#7C52FF"/>
+<path d="M14.1277 19.8208C14.1277 19.9317 14.2176 20.0216 14.3286 20.0216V20.0216C14.4395 20.0216 14.5295 19.9317 14.5295 19.8208V19.0902C14.5295 18.7953 14.7213 18.5903 14.9856 18.5903C15.286 18.5903 15.3512 18.7594 15.3512 19.0507V19.8208C15.3512 19.9317 15.4411 20.0216 15.552 20.0216V20.0216C15.663 20.0216 15.7529 19.9317 15.7529 19.8208V19.0003C15.7529 18.5256 15.5937 18.2055 15.1086 18.2055C14.8697 18.2055 14.6634 18.299 14.5295 18.4968V18.4424C14.5295 18.3314 14.4395 18.2415 14.3286 18.2415V18.2415C14.2176 18.2415 14.1277 18.3314 14.1277 18.4424V19.8208Z" fill="#7C52FF"/>
+<path d="M16.95 20.5503C17.464 20.5503 17.8839 20.2374 17.8839 19.6153V18.2415H17.5002V18.5076C17.4061 18.3314 17.1636 18.2055 16.8921 18.2055C16.3962 18.2055 16.0704 18.5903 16.0704 19.0686C16.0704 19.5469 16.3962 19.9281 16.8921 19.9281C17.2179 19.9281 17.4097 19.7663 17.4821 19.6225V19.6368C17.4821 20.0001 17.2939 20.2446 16.9102 20.2446C16.7813 20.2446 16.64 20.2148 16.5184 20.1552C16.4373 20.1154 16.3314 20.1309 16.2838 20.2078V20.2078C16.2463 20.2686 16.2573 20.3487 16.3176 20.387C16.4798 20.4899 16.6979 20.5503 16.95 20.5503ZM16.979 19.5793C16.6966 19.5793 16.4794 19.3635 16.4794 19.0686C16.4794 18.7737 16.6966 18.5544 16.979 18.5544C17.2613 18.5544 17.4821 18.7701 17.4821 19.0543C17.4821 19.3635 17.2685 19.5793 16.979 19.5793Z" fill="#7C52FF"/>
+<path d="M18.9144 20.0576C19.2474 20.0576 19.6782 19.9066 19.6782 19.4894C19.6782 19.1226 19.3307 18.9895 18.9977 18.9176C18.8384 18.8852 18.69 18.8565 18.69 18.7342C18.69 18.6407 18.8239 18.5795 18.9579 18.5795C19.0692 18.5795 19.1705 18.5965 19.2699 18.6314C19.3688 18.6661 19.484 18.6309 19.5276 18.5357V18.5357C19.5658 18.4524 19.5355 18.3519 19.4525 18.3129C19.3068 18.2444 19.1563 18.2055 18.9542 18.2055C18.6393 18.2055 18.281 18.3925 18.281 18.7414C18.281 19.0902 18.5706 19.1909 18.9108 19.2844C19.0882 19.3348 19.2692 19.3671 19.2692 19.4966C19.2692 19.6225 19.0773 19.6836 18.9144 19.6836C18.7643 19.6836 18.6403 19.6463 18.5399 19.5971C18.4343 19.5453 18.2982 19.5747 18.2486 19.6813V19.6813C18.216 19.7515 18.2313 19.8357 18.2958 19.8785C18.4256 19.9645 18.6374 20.0576 18.9144 20.0576Z" fill="#7C52FF"/>
 </svg>

package/lib/build/svg/brand/brand-dialpad.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0247 11.1973V4.17909C12.0247 4.1105 11.9408 4.07659 11.8929 4.12594L8.91146 7.20446C8.30175 6.94669 7.6314 6.804 6.9275 6.804C4.11247 6.804 1.83051 9.08445 1.83051 11.8974C1.83051 14.7101 4.11247 16.9906 6.9275 16.9906C9.50479 16.9906 11.6338 15.079 11.9755 12.5973V19.6155C11.9755 19.6845 12.0592 19.7182 12.107 19.6688L15.0885 16.5903C15.6982 16.8481 16.3688 16.9906 17.0725 16.9906C19.8875 16.9906 22.1695 14.7101 22.1695 11.8974C22.1695 9.08445 19.8875 6.804 17.0725 6.804C14.4952 6.804 12.3662 8.71581 12.0247 11.1973Z" fill="#6C3DFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0247 11.1973V4.17909C12.0247 4.1105 11.9408 4.07659 11.8929 4.12594L8.91146 7.20446C8.30175 6.94669 7.6314 6.804 6.9275 6.804C4.11247 6.804 1.83051 9.08445 1.83051 11.8974C1.83051 14.7101 4.11247 16.9906 6.9275 16.9906C9.50479 16.9906 11.6338 15.079 11.9755 12.5973V19.6155C11.9755 19.6845 12.0592 19.7182 12.107 19.6688L15.0885 16.5903C15.6982 16.8481 16.3688 16.9906 17.0725 16.9906C19.8875 16.9906 22.1695 14.7101 22.1695 11.8974C22.1695 9.08445 19.8875 6.804 17.0725 6.804C14.4952 6.804 12.3662 8.71581 12.0247 11.1973Z" fill="#7C52FF"/>
 </svg>

package/lib/build/svg/spot/browser-list-callout.svg

@@ -5,7 +5,7 @@
     <path d="M12 33H80V74.0629C80 75.1327 79.1327 76 78.0629 76H13.9371C12.8673 76 12 75.1327 12 74.0629V33Z"
         fill="white" />
     <path d="M80 31H12V25.9371C12 24.8673 12.8673 24 13.9371 24H78.0629C79.1327 24 80 24.8673 80 25.9371V31Z"
-        fill="#6C3DFF" />
+        fill="#7C52FF" />
     <path opacity="0.75"
         d="M80 31H12V25.9371C12 24.8673 12.8673 24 13.9371 24H78.0629C79.1327 24 80 24.8673 80 25.9371V31Z"
         fill="white" />
@@ -26,7 +26,7 @@
     <path d="M69 66H17V70H69V66Z" fill="#EAE9EF" />
     <path
         d="M48 74C48 69.5817 51.5817 66 56 66H88C92.418 66 96 69.5817 96 74C96 78.4183 92.418 82 88 82H56C51.5817 82 48 78.4183 48 74Z"
-        fill="#6C3DFF" />
+        fill="#7C52FF" />
     <path opacity="0.3"
         d="M48 74C48 69.5817 51.5817 66 56 66H88C92.418 66 96 69.5817 96 74C96 78.4183 92.418 82 88 82H56C51.5817 82 48 78.4183 48 74Z"
         fill="white" />
@@ -40,7 +40,7 @@
     <path opacity="0.5" d="M66 76H90" stroke="white" stroke-width="3.55" />
     <path
         d="M65.4725 40H80.7912C82.7818 40 84.3956 41.745 84.3956 43.8974V59M84.3956 59L80.7912 55.1026M84.3956 59L88 55.1026"
-        stroke="#6C3DFF" stroke-width="1.2" />
+        stroke="#7C52FF" stroke-width="1.2" />
     <path d="M64.1209 40H47" stroke-dasharray="4 1" />
     <g opacity="0.4">
         <path

package/lib/build/svg/spot/browser-table-graph.svg

@@ -5,7 +5,7 @@
   <path d="M14 33H82V74.0629C82 75.1327 81.1327 76 80.0629 76H15.9371C14.8673 76 14 75.1327 14 74.0629V33Z"
     fill="white" />
   <path d="M82 31H14V25.9371C14 24.8673 14.8673 24 15.9371 24H80.0629C81.1327 24 82 24.8673 82 25.9371V31Z"
-    fill="#6C3DFF" />
+    fill="#7C52FF" />
   <path opacity="0.75"
     d="M82 31H14V25.9371C14 24.8673 14.8673 24 15.9371 24H80.0629C81.1327 24 82 24.8673 82 25.9371V31Z" fill="white" />
   <path
@@ -23,19 +23,19 @@
   <path d="M56 38H51V70H56V38Z" fill="url(#paint4_linear_3:120)" />
   <path d="M66 38H61V70H66V38Z" fill="url(#paint5_linear_3:120)" />
   <path d="M76 38H72V70H76V38Z" fill="url(#paint6_linear_3:120)" />
-  <path d="M25.954 60.2081L38.5351 70.273L52.554 45.4703L70.5 63.5L84.546 43.673" stroke="#6C3DFF" stroke-width="1.2" />
+  <path d="M25.954 60.2081L38.5351 70.273L52.554 45.4703L70.5 63.5L84.546 43.673" stroke="#7C52FF" stroke-width="1.2" />
   <path
     d="M26.15 58.6291C26.15 59.6094 25.3553 60.4041 24.375 60.4041C23.3947 60.4041 22.6 59.6094 22.6 58.6291C22.6 57.6488 23.3947 56.8541 24.375 56.8541C25.3553 56.8541 26.15 57.6488 26.15 58.6291Z"
-    fill="white" stroke="#6C3DFF" stroke-width="1.2" />
+    fill="white" stroke="#7C52FF" stroke-width="1.2" />
   <path
     d="M38.375 72.15C39.3553 72.15 40.15 71.3553 40.15 70.375C40.15 69.3947 39.3553 68.6 38.375 68.6C37.3947 68.6 36.6 69.3947 36.6 70.375C36.6 71.3553 37.3947 72.15 38.375 72.15Z"
-    fill="white" stroke="#6C3DFF" stroke-width="1.2" />
+    fill="white" stroke="#7C52FF" stroke-width="1.2" />
   <path
     d="M52.375 47.15C53.3553 47.15 54.15 46.3553 54.15 45.375C54.15 44.3947 53.3553 43.6 52.375 43.6C51.3947 43.6 50.6 44.3947 50.6 45.375C50.6 46.3553 51.3947 47.15 52.375 47.15Z"
-    fill="white" stroke="#6C3DFF" stroke-width="1.2" />
+    fill="white" stroke="#7C52FF" stroke-width="1.2" />
   <path
     d="M85.375 44.15C86.3553 44.15 87.15 43.3553 87.15 42.375C87.15 41.3947 86.3553 40.6 85.375 40.6C84.3947 40.6 83.6 41.3947 83.6 42.375C83.6 43.3553 84.3947 44.15 85.375 44.15Z"
-    fill="white" stroke="#6C3DFF" stroke-width="1.2" />
+    fill="white" stroke="#7C52FF" stroke-width="1.2" />
   <g opacity="0.4">
     <path d="M25.954 60.2081L38.5351 70.273L52.554 45.4703L70.5 63.5L84.546 43.673" stroke="#0D0C0F"
       stroke-width="1.2" />
@@ -54,11 +54,11 @@
   </g>
   <path
     d="M76.4815 61.4365C75.9671 60.9222 75.1332 60.9222 74.6188 61.4365C74.1044 61.9509 74.1044 62.7849 74.6188 63.2993L85.2059 73.8863C85.7202 74.4007 86.5542 74.4007 87.0686 73.8864C87.583 73.372 87.583 72.538 87.0686 72.0236L76.4815 61.4365Z"
-    fill="#6C3DFF" />
+    fill="#7C52FF" />
   <path
     d="M71 66.4C66.3608 66.4 62.6 62.6392 62.6 58C62.6 53.3608 66.3608 49.6 71 49.6C75.6392 49.6 79.4 53.3608 79.4 58C79.4 62.6392 75.6392 66.4 71 66.4Z"
-    fill="white" stroke="#6C3DFF" stroke-width="1.2" />
-  <path d="M66.0336 55C65.1916 56.927 65.409 59.0496 66.4304 60.7163" stroke="#6C3DFF" stroke-width="1.2"
+    fill="white" stroke="#7C52FF" stroke-width="1.2" />
+  <path d="M66.0336 55C65.1916 56.927 65.409 59.0496 66.4304 60.7163" stroke="#7C52FF" stroke-width="1.2"
     stroke-linecap="round" />
   <defs>
     <linearGradient id="paint0_linear_3:120" x1="82" y1="87" x2="6.5" y2="7.5" gradientUnits="userSpaceOnUse">