@vectara/vectara-ui 9.8.5 → 9.8.7

package/lib/components/progressBar/_index.scss

@@ -2,7 +2,7 @@
 
 .vuiProgressBar {
   position: relative;
-  border-radius: $sizeXxs;
+  border-radius: $sizeS;
   height: $sizeS;
   overflow: hidden;
 }
@@ -35,29 +35,29 @@
 // Color
 $color: (
   accent: (
-    "background-color": $colorAccent
+    "background-color": linear-gradient(to top, $colorAccent, $colorAccentLightShade)
   ),
   primary: (
-    "background-color": $colorPrimary
+    "background-color": linear-gradient(to top, $colorPrimary, $colorPrimaryLightShade)
   ),
   success: (
-    "background-color": $colorSuccess
+    "background-color": linear-gradient(to top, $colorSuccess, $colorSuccessLightShade)
   ),
   warning: (
-    "background-color": $colorWarning
+    "background-color": linear-gradient(to top, $colorWarning, $colorWarningLightShade)
   ),
   danger: (
-    "background-color": $colorDanger
+    "background-color": linear-gradient(to top, $colorDanger, $colorDangerLightShade)
   ),
   neutral: (
-    "background-color": $colorDarkShade
+    "background-color": linear-gradient(to top, $colorDarkShade, $colorMediumShade)
   )
 );
 
 @each $colorName, $colorValue in $color {
   .vuiProgressBar--#{$colorName} {
     .vuiProgressBar__bar {
-      background-color: #{map.get($colorValue, "background-color")};
+      background-image: #{map.get($colorValue, "background-color")};
     }
   }
 }

package/lib/components/toggle/_index.scss

@@ -1,7 +1,8 @@
 $toggleWidth: $sizeL * 1.5;
 $toggleHeight: $sizeM * 1.25;
 $buttonOffset: 2px;
-$buttonSize: $toggleHeight - ($buttonOffset * 2);
+$buttonHeight: $toggleHeight - ($buttonOffset * 2);
+$buttonWidth: $toggleWidth * 0.75 - ($buttonOffset * 2);
 
 .vuiToggle {
   position: relative;
@@ -25,7 +26,7 @@ $buttonSize: $toggleHeight - ($buttonOffset * 2);
   }
 
   &:checked + .vuiToggle__button:before {
-    transform: translateX($toggleWidth - $buttonSize - ($buttonOffset * 2));
+    transform: translateX($toggleWidth - $buttonWidth - ($buttonOffset * 2));
   }
 }
 
@@ -38,18 +39,18 @@ $buttonSize: $toggleHeight - ($buttonOffset * 2);
   bottom: 0;
   background-color: $colorMediumShade;
   transition: $transitionSpeed;
-  border-radius: $buttonSize;
+  border-radius: $buttonHeight;
   box-shadow: inset rgba(0, 0, 0, 0.1) 0px 2px 2px;
 
   &:before {
     position: absolute;
     content: "";
-    height: $buttonSize;
-    width: $buttonSize;
+    height: $buttonHeight;
+    width: $buttonWidth;
     left: $buttonOffset;
     bottom: $buttonOffset;
     background-color: $colorEmptyShade;
     transition: $transitionSpeed;
-    border-radius: 50%;
+    border-radius: $buttonHeight;
   }
 }

package/lib/components/typography/_text.scss

@@ -134,7 +134,7 @@ $textRhythm: $sizeM;
 
   code,
   pre {
-    font-size: $fontSize * 0.75;
+    font-size: $fontSize * 0.85;
   }
 
   h1 {

package/lib/styles/index.css

@@ -3468,7 +3468,7 @@ h2.react-datepicker__current-month {
 
 .vuiProgressBar {
   position: relative;
-  border-radius: 4px;
+  border-radius: 12px;
   height: 12px;
   overflow: hidden;
 }
@@ -3499,27 +3499,27 @@ h2.react-datepicker__current-month {
 }
 
 .vuiProgressBar--accent .vuiProgressBar__bar {
-  background-color: #5f30c3;
+  background-image: linear-gradient(to top, #5f30c3, rgba(95, 48, 195, 0.5));
 }
 
 .vuiProgressBar--primary .vuiProgressBar__bar {
-  background-color: #045dda;
+  background-image: linear-gradient(to top, #045dda, rgba(4, 93, 218, 0.5));
 }
 
 .vuiProgressBar--success .vuiProgressBar__bar {
-  background-color: #249719;
+  background-image: linear-gradient(to top, #249719, rgba(36, 151, 25, 0.5));
 }
 
 .vuiProgressBar--warning .vuiProgressBar__bar {
-  background-color: #a86f1b;
+  background-image: linear-gradient(to top, #a86f1b, rgba(168, 111, 27, 0.5));
 }
 
 .vuiProgressBar--danger .vuiProgressBar__bar {
-  background-color: #d22d2d;
+  background-image: linear-gradient(to top, #d22d2d, rgba(210, 45, 45, 0.5));
 }
 
 .vuiProgressBar--neutral .vuiProgressBar__bar {
-  background-color: #3f4551;
+  background-image: linear-gradient(to top, #3f4551, #cbd1de);
 }
 
 .vuiPrompt {
@@ -4403,7 +4403,7 @@ h2.react-datepicker__current-month {
   outline-offset: 2px;
 }
 .vuiToggle__input:checked + .vuiToggle__button:before {
-  transform: translateX(16px);
+  transform: translateX(9px);
 }
 
 .vuiToggle__button {
@@ -4422,12 +4422,12 @@ h2.react-datepicker__current-month {
   position: absolute;
   content: "";
   height: 16px;
-  width: 16px;
+  width: 23px;
   left: 2px;
   bottom: 2px;
   background-color: #ffffff;
   transition: 0.2s;
-  border-radius: 50%;
+  border-radius: 16px;
 }
 
 .vuiTooltip {
@@ -4646,7 +4646,7 @@ h2.react-datepicker__current-month {
 }
 .vuiText--xs code,
 .vuiText--xs pre {
-  font-size: 9px;
+  font-size: 10.2px;
 }
 .vuiText--xs h1 {
   font-size: 24px;
@@ -4700,7 +4700,7 @@ h2.react-datepicker__current-month {
 }
 .vuiText--s code,
 .vuiText--s pre {
-  font-size: 10.5px;
+  font-size: 11.9px;
 }
 .vuiText--s h1 {
   font-size: 28px;
@@ -4754,7 +4754,7 @@ h2.react-datepicker__current-month {
 }
 .vuiText--m code,
 .vuiText--m pre {
-  font-size: 12px;
+  font-size: 13.6px;
 }
 .vuiText--m h1 {
   font-size: 32px;
@@ -4808,7 +4808,7 @@ h2.react-datepicker__current-month {
 }
 .vuiText--l code,
 .vuiText--l pre {
-  font-size: 13.5px;
+  font-size: 15.3px;
 }
 .vuiText--l h1 {
   font-size: 36px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "9.8.5",
+  "version": "9.8.7",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",