@veracity/vui 2.0.6 → 2.1.0

package/src/pagination/paginationPrevNext.tsx

@@ -16,7 +16,7 @@ export const PaginationPrevNext = vui<'button', PaginationPrevNextProps>((props,
   const pageChange = isPrev ? -1 : 1
   const directionProps = {
     disabled: isPrev ? page === 1 : page === pageCount,
-    icon: isPrev ? 'falAngleLeft' : 'falAngleRight',
+    icon: `falAngle${isPrev ? 'Left' : 'Right'}`,
     onClick: () => onPageChange(page + pageChange)
   }
 

package/src/pagination/paginationResults.tsx

@@ -12,15 +12,7 @@ export const PaginationResults = vui<'span', TProps>((props, ref) => {
   const styles = useStyleConfig('Pagination', usePaginationContext())
 
   return (
-    <T
-      className={cs('vui-paginationResults', className)}
-      color="grey.80"
-      ref={ref}
-      size="sm"
-      weight="medium"
-      {...styles.results}
-      {...rest}
-    >
+    <T className={cs('vui-paginationResults', className)} ref={ref} size="sm" {...styles.results} {...rest}>
       {children ?? `Showing ${rangeStart} to ${rangeEnd} of ${count} results.`}
     </T>
   )

package/src/pagination/theme.ts

@@ -1,4 +1,25 @@
-const baseStyle = {}
+const base = {
+  bg: 'transparent',
+  border: 'none',
+  color: 'darkBlue.18'
+}
+
+const baseStyle = {
+  button: {
+    ...base,
+    color: 'seaBlue.28',
+    hoverBg: 'skyBlue.80',
+    minW: 24
+  },
+  ellipsis: { ...base },
+  goToPage: { ...base },
+  prevNext: {
+    ...base
+  },
+  results: {
+    color: 'sandstone.30'
+  }
+}
 
 const defaultProps = {}
 

package/src/tag/tag.tsx

@@ -26,13 +26,11 @@ export const TagBase = styled.spanBox`
   }
 
   &[aria-disabled='true'] {
-    background-color: disabled .bg;
-    color: disabled .color;
+    opacity: 0.5;
     cursor: not-allowed;
     user-select: none;
   }
 `
-
 /**
  * Displays text, icons or custom content. Can be made interactive or a link.
  * Exposes some props to the children via context.
@@ -121,7 +119,7 @@ export const Tag = vui<'span', TagProps>((props, ref) => {
 
             {isString(iconRight) ? <TagIcon ml={spaceX} name={iconRight} /> : iconRight}
 
-            {onDelete ? <TagButton isRound={isRound} ml={spaceX} onClick={onDelete} /> : itemRight}
+            {onDelete ? <TagButton disabled={disabled} isRound={isRound} ml={spaceX} onClick={onDelete} /> : itemRight}
           </>
         )}
       </TagBase>

package/src/tag/theme.ts

@@ -66,18 +66,18 @@ const sizes = {
 const variants = {
   subtleGrey: {
     container: {
-      bg: 'sandstone.95',
-      hoverBg: 'sandstone.90',
-      borderColor: 'sandstone.90',
+      bg: 'sandstone.90',
+      hoverBg: 'sandstone.85',
+      borderColor: 'sandstone.85',
       color: 'sandstone.20',
-      activeBg: 'sandstone.85'
+      activeBg: 'sandstone.79'
     },
     button: {
       bg: 'transparent',
-      hoverBg: 'sandstone.90',
+      hoverBg: 'sandstone.85',
       hoverBorderColor: 'transparent',
       color: 'sandstone.20',
-      activeBg: 'sandstone.85'
+      activeBg: 'sandstone.79'
     }
   },
   subtleBlue: {
@@ -198,10 +198,10 @@ const variants = {
   },
   solidYellow: {
     container: {
-      bg: 'sunflower.65',
+      bg: 'sunflower.50',
       hoverBg: 'sunflower.80',
       activeBg: 'sunflower.85',
-      borderColor: 'sunflower.65',
+      borderColor: 'sunflower.50',
       color: 'sunflower.15'
     },
     button: {