@veracity/vui 1.7.0-beta.3 → 1.7.0-redesign.1

package/dist/esm/tag/theme.d.ts

@@ -1,41 +1,25 @@
-import { Dict } from '../utils';
-declare function variantSolid(props: Dict): {
-    container: {
-        hoverBg: string;
-        activeBg: string;
-        bg: string;
-        color: string;
-        focusRing: number;
-    };
-    button: {
-        hoverBg: string;
-        activeBg: string;
-        bg: string;
-        color: string;
-    };
-};
-declare function variantSubtle(props: Dict): {
-    container: {
-        hoverBg: string;
-        activeBg: string;
-        bg: string;
-        color: string;
-    };
-    button: {
-        hoverBg: string;
-        activeBg: string;
-        color: string;
-    };
-};
 declare const _default: {
     baseStyle: {};
     defaultProps: {
-        colorScheme: string;
         size: string;
         variant: string;
     };
     parts: string[];
     sizes: {
+        xs: {
+            container: {
+                borderRadius: string;
+                fontSize: string;
+                h: number;
+                spaceX: number;
+            };
+            button: {
+                size: string;
+            };
+            icon: {
+                size: string;
+            };
+        };
         sm: {
             container: {
                 fontSize: string;
@@ -77,8 +61,170 @@ declare const _default: {
         };
     };
     variants: {
-        solid: typeof variantSolid;
-        subtle: typeof variantSubtle;
+        subtleGrey: {
+            container: {
+                bg: string;
+                hoverBg: string;
+                borderColor: string;
+                color: string;
+                activeBg: string;
+            };
+            button: {
+                bg: string;
+                hoverBg: string;
+                hoverBorderColor: string;
+                color: string;
+                activeBg: string;
+            };
+        };
+        subtleBlue: {
+            container: {
+                bg: string;
+                hoverBg: string;
+                activeBg: string;
+                borderColor: string;
+                color: string;
+            };
+            button: {
+                bg: string;
+                hoverBg: string;
+                activeBg: string;
+                hoverBorderColor: string;
+                color: string;
+            };
+        };
+        subtleRed: {
+            container: {
+                bg: string;
+                borderColor: string;
+                hoverBg: string;
+                activeBg: string;
+                color: string;
+            };
+            button: {
+                bg: string;
+                hoverBg: string;
+                activeBg: string;
+                hoverBorderColor: string;
+                color: string;
+            };
+        };
+        subtleYellow: {
+            container: {
+                bg: string;
+                hoverBg: string;
+                activeBg: string;
+                borderColor: string;
+                color: string;
+            };
+            button: {
+                bg: string;
+                hoverBg: string;
+                activeBg: string;
+                hoverBorderColor: string;
+                color: string;
+            };
+        };
+        subtleGreen: {
+            container: {
+                bg: string;
+                hoverBg: string;
+                borderColor: string;
+                color: string;
+                activeBg: string;
+            };
+            button: {
+                bg: string;
+                hoverBg: string;
+                activeBg: string;
+                hoverBorderColor: string;
+                color: string;
+            };
+        };
+        /** solids next */
+        solidBlue: {
+            container: {
+                bg: string;
+                hoverBg: string;
+                activeBg: string;
+                borderColor: string;
+                color: string;
+            };
+            button: {
+                bg: string;
+                hoverBg: string;
+                activeBg: string;
+                hoverBorderColor: string;
+                activeBorderColor: string;
+                color: string;
+            };
+        };
+        solidDarkBlue: {
+            container: {
+                bg: string;
+                hoverBg: string;
+                activeBg: string;
+                borderColor: string;
+                color: string;
+            };
+            button: {
+                bg: string;
+                hoverBg: string;
+                activeBg: string;
+                hoverBorderColor: string;
+                color: string;
+            };
+        };
+        solidRed: {
+            container: {
+                bg: string;
+                hoverBg: string;
+                activeBg: string;
+                borderColor: string;
+                color: string;
+            };
+            button: {
+                bg: string;
+                hoverBg: string;
+                activeBg: string;
+                hoverBorderColor: string;
+                activeBorderColor: string;
+                color: string;
+            };
+        };
+        solidYellow: {
+            container: {
+                bg: string;
+                hoverBg: string;
+                activeBg: string;
+                borderColor: string;
+                color: string;
+            };
+            button: {
+                bg: string;
+                hoverBg: string;
+                activeBg: string;
+                hoverBorderColor: string;
+                color: string;
+            };
+        };
+        solidGreen: {
+            container: {
+                bg: string;
+                hoverBg: string;
+                activeBg: string;
+                borderColor: string;
+                color: string;
+            };
+            button: {
+                bg: string;
+                hoverBg: string;
+                activeBg: string;
+                hoverBorderColor: string;
+                activeBorderColor: string;
+                color: string;
+            };
+        };
     };
 };
 export default _default;

package/dist/esm/tag/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/tag/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,iBAAS,YAAY,CAAC,KAAK,EAAE,IAAI;;;;;;;;;;;;;;EAmChC;AAED,iBAAS,aAAa,CAAC,KAAK,EAAE,IAAI;;;;;;;;;;;;EAgCjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DD,wBAMC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/tag/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAmJE,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsFpB,wBAMC"}

package/dist/esm/tag/theme.js

@@ -1,69 +1,24 @@
-function variantSolid(props) {
-    const { colorScheme: c } = props;
-    const container = {
-        hoverBg: `${c}.90`,
-        activeBg: `${c}.100`,
-        bg: `${c}.80`,
-        color: 'white',
-        focusRing: 3
-    };
-    const button = {
-        hoverBg: `${c}.70`,
-        activeBg: `${c}.60`,
-        bg: `${c}.80`,
-        color: 'white'
-    };
-    if (c === 'prussian') {
-        container.hoverBg = 'prussian.60';
-        container.activeBg = 'prussian.50';
-        button.hoverBg = 'prussian.60';
-        button.activeBg = 'prussian.50';
-    }
-    if (c === 'yellow') {
-        container.hoverBg = 'yellow.80';
-        container.activeBg = 'yellow.90';
-        container.bg = 'yellow.70';
-        button.hoverBg = 'yellow.60';
-        button.activeBg = 'yellow.50';
-        button.bg = 'yellow.70';
-    }
-    return { container, button };
-}
-function variantSubtle(props) {
-    const { colorScheme: c } = props;
-    const container = {
-        hoverBg: `${c}.30`,
-        activeBg: `${c}.40`,
-        bg: `${c}.20`,
-        color: `${c}.90`
-    };
-    const button = {
-        hoverBg: `${c}.30`,
-        activeBg: `${c}.40`,
-        color: `${c}.90`
-    };
-    if (c === 'blue') {
-        container.color = 'blue.80';
-        button.color = 'blue.80';
-    }
-    if (c === 'grey') {
-        container.color = 'prussian.80';
-        button.color = 'prussian.80';
-    }
-    if (c === 'yellow') {
-        container.color = 'yellow.100';
-        button.color = 'yellow.100';
-    }
-    return { container, button };
-}
 const baseStyle = {};
 const defaultProps = {
-    colorScheme: 'blue',
     size: 'md',
-    variant: 'subtle'
+    variant: 'subtleBlue'
 };
 const parts = ['container', 'button', 'icon', 'text'];
 const sizes = {
+    xs: {
+        container: {
+            borderRadius: 'lg',
+            fontSize: 'sm',
+            h: 20,
+            spaceX: 4
+        },
+        button: {
+            size: 'sm'
+        },
+        icon: {
+            size: 'xs'
+        }
+    },
     sm: {
         container: {
             fontSize: 'sm',
@@ -71,7 +26,7 @@ const sizes = {
             spaceX: 4
         },
         button: {
-            size: 'xs'
+            size: 'sm'
         },
         icon: {
             size: 'xs'
@@ -84,7 +39,7 @@ const sizes = {
             spaceX: 6
         },
         button: {
-            size: 'xs'
+            size: 'sm'
         },
         icon: {
             size: 'sm'
@@ -97,7 +52,7 @@ const sizes = {
             spaceX: 8
         },
         button: {
-            size: 'sm'
+            size: 'md'
         },
         icon: {
             size: 'md'
@@ -105,8 +60,170 @@ const sizes = {
     }
 };
 const variants = {
-    solid: variantSolid,
-    subtle: variantSubtle
+    subtleGrey: {
+        container: {
+            bg: 'sandstone.95',
+            hoverBg: 'sandstone.90',
+            borderColor: 'sandstone.90',
+            color: 'sandstone.20',
+            activeBg: 'sandstone.85'
+        },
+        button: {
+            bg: 'transparent',
+            hoverBg: 'sandstone.90',
+            hoverBorderColor: 'transparent',
+            color: 'sandstone.20',
+            activeBg: 'sandstone.85'
+        }
+    },
+    subtleBlue: {
+        container: {
+            bg: 'skyBlue.95',
+            hoverBg: 'skyBlue.90',
+            activeBg: 'skyBlue.85',
+            borderColor: 'skyBlue.95',
+            color: 'seaBlue.28'
+        },
+        button: {
+            bg: 'transparent',
+            hoverBg: 'skyBlue.90',
+            activeBg: 'skyBlue.85',
+            hoverBorderColor: 'transparent',
+            color: 'seaBlue.28'
+        }
+    },
+    subtleRed: {
+        container: {
+            bg: 'energyRed.95',
+            borderColor: 'energyRed.95',
+            hoverBg: 'energyRed.90',
+            activeBg: 'energyRed.85',
+            color: 'energyRed.45'
+        },
+        button: {
+            bg: 'transparent',
+            hoverBg: 'energyRed.90',
+            activeBg: 'energyRed.85',
+            hoverBorderColor: 'transparent',
+            color: 'energyRed.45'
+        }
+    },
+    subtleYellow: {
+        container: {
+            bg: 'sunflower.85',
+            hoverBg: 'sunflower.70',
+            activeBg: 'sunflower.65',
+            borderColor: 'terracotta.30',
+            color: 'sunflower.20'
+        },
+        button: {
+            bg: 'transparent',
+            hoverBg: 'sunflower.70',
+            activeBg: 'sunflower.65',
+            hoverBorderColor: 'transparent',
+            color: 'sunflower.20'
+        }
+    },
+    subtleGreen: {
+        container: {
+            bg: 'landGreen.95',
+            hoverBg: 'landGreen.90',
+            borderColor: 'landGreen.30',
+            color: 'landGreen.30',
+            activeBg: 'landGreen.85'
+        },
+        button: {
+            bg: 'transparent',
+            hoverBg: 'landGreen.90',
+            activeBg: 'landGreen.85',
+            hoverBorderColor: 'transparent',
+            color: 'landGreen.30'
+        }
+    },
+    /** solids next */
+    solidBlue: {
+        container: {
+            bg: 'seaBlue.28',
+            hoverBg: 'seaBlue.35',
+            activeBg: 'seaBlue.40',
+            borderColor: 'seaBlue.28',
+            color: 'white'
+        },
+        button: {
+            bg: 'transparent',
+            hoverBg: 'seaBlue.35',
+            activeBg: 'seaBlue.40',
+            hoverBorderColor: 'transparent',
+            activeBorderColor: 'transparent',
+            color: 'white'
+        }
+    },
+    solidDarkBlue: {
+        container: {
+            bg: 'darkBlue.18',
+            hoverBg: 'darkBlue.25',
+            activeBg: 'darkBlue.35',
+            borderColor: 'darkBlue.18',
+            color: 'white'
+        },
+        button: {
+            bg: 'transparent',
+            hoverBg: 'darkBlue.25',
+            activeBg: 'darkBlue.35',
+            hoverBorderColor: 'transparent',
+            color: 'white'
+        }
+    },
+    solidRed: {
+        container: {
+            bg: 'energyRed.45',
+            hoverBg: 'energyRed.54',
+            activeBg: 'energyRed.60',
+            borderColor: 'energyRed.45',
+            color: 'white'
+        },
+        button: {
+            bg: 'transparent',
+            hoverBg: 'energyRed.54',
+            activeBg: 'energyRed.60',
+            hoverBorderColor: 'transparent',
+            activeBorderColor: 'transparent',
+            color: 'white'
+        }
+    },
+    solidYellow: {
+        container: {
+            bg: 'sunflower.65',
+            hoverBg: 'sunflower.80',
+            activeBg: 'sunflower.85',
+            borderColor: 'sunflower.65',
+            color: 'sunflower.15'
+        },
+        button: {
+            bg: 'transparent',
+            hoverBg: 'sunflower.80',
+            activeBg: 'sunflower.85',
+            hoverBorderColor: 'transparent',
+            color: 'sunflower.15'
+        }
+    },
+    solidGreen: {
+        container: {
+            bg: 'landGreen.35',
+            hoverBg: 'landGreen.41',
+            activeBg: 'landGreen.45',
+            borderColor: 'landGreen.35',
+            color: 'white'
+        },
+        button: {
+            bg: 'transparent',
+            hoverBg: 'landGreen.41',
+            activeBg: 'landGreen.45',
+            hoverBorderColor: 'transparent',
+            activeBorderColor: 'transparent',
+            color: 'white'
+        }
+    }
 };
 export default {
     baseStyle,

package/dist/esm/textarea/textarea.js

@@ -4,7 +4,7 @@ import T from '../t';
 import { cs, filterUndefined } from '../utils';
 import { getInitialCount } from './helpers';
 const TextareaTextarea = styled.textareaBox `
-  border-radius: md;
+  border-radius: none;
   border-width: 1px;
   outline: none;
   padding: 1;