@veracity/vui 1.9.1 → 2.0.0

package/dist/cjs/theme/defaultTheme.d.ts

@@ -12,6 +12,297 @@ declare const defaultTheme: {
     };
     borders: {};
     colors: {
+        buttonTypePrimaryDefaultBorderColorDark: string;
+        buttonTypePrimaryDefaultBackgroundColorDark: string;
+        buttonTypePrimaryDefaultTextColorDark: string;
+        buttonTypePrimaryHoverBackgroundColorDark: string;
+        buttonTypePrimaryHoverBorderColorDark: string;
+        buttonTypePrimaryHoverTextColorDark: string;
+        buttonTypePrimaryActiveBackgroundColorDark: string;
+        buttonTypePrimaryActiveBorderColorDark: string;
+        buttonTypePrimaryActiveTextColorDark: string;
+        buttonTypePrimaryDefaultBorderColorLight: string;
+        buttonTypePrimaryDefaultBackgroundColorLight: string;
+        buttonTypePrimaryDefaultTextColorLight: string;
+        buttonTypePrimaryFocusOutline: string;
+        buttonTypePrimaryHoverBackgroundColorLight: string;
+        buttonTypePrimaryHoverBorderColorLight: string;
+        buttonTypePrimaryHoverTextColorLight: string;
+        buttonTypePrimaryActiveBackgroundColorLight: string;
+        buttonTypePrimaryActiveBorderColorLight: string;
+        buttonTypePrimaryActiveTextColorLight: string;
+        buttonTypeSecondaryDefaultBorderColorDark: string;
+        buttonTypeSecondaryDefaultBackgroundColorDark: string;
+        buttonTypeSecondaryDefaultTextColorDark: string;
+        buttonTypeSecondaryFocusOutline: string;
+        buttonTypeSecondaryHoverBackgroundColorDark: string;
+        buttonTypeSecondaryHoverBorderColorDark: string;
+        buttonTypeSecondaryHoverTextColorDark: string;
+        buttonTypeSecondaryActiveBackgroundColorDark: string;
+        buttonTypeSecondaryActiveBorderColorDark: string;
+        buttonTypeSecondaryActiveTextColorDark: string;
+        buttonTypeSecondaryDefaultBorderColorLight: string;
+        buttonTypeSecondaryDefaultBackgroundColorLight: string;
+        buttonTypeSecondaryDefaultTextColorLight: string;
+        buttonTypeSecondaryHoverBackgroundColorLight: string;
+        buttonTypeSecondaryHoverBorderColorLight: string;
+        buttonTypeSecondaryHoverTextColorLight: string;
+        buttonTypeSecondaryActiveBackgroundColorLight: string;
+        buttonTypeSecondaryActiveBorderColorLight: string;
+        buttonTypeSecondaryActiveTextColorLight: string;
+        buttonTypeTertiaryDefaultBorderColorDark: string;
+        buttonTypeTertiaryDefaultBackgroundColorDark: string;
+        buttonTypeTertiaryDefaultTextColorDark: string;
+        buttonTypeTertiaryHoverBackgroundColorDark: string;
+        buttonTypeTertiaryHoverBorderColorDark: string;
+        buttonTypeTertiaryHoverTextColorDark: string;
+        buttonTypeTertiaryFocusOutline: string;
+        buttonTypeTertiaryActiveBackgroundColorDark: string;
+        buttonTypeTertiaryActiveBorderColorDark: string;
+        buttonTypeTertiaryActiveTextColorDark: string;
+        buttonTypeTertiaryDefaultBorderColorLight: string;
+        buttonTypeTertiaryDefaultBackgroundColorLight: string;
+        buttonTypeTertiaryDefaultTextColorLight: string;
+        buttonTypeTertiaryHoverBackgroundColorLight: string;
+        buttonTypeTertiaryHoverBorderColorLight: string;
+        buttonTypeTertiaryHoverTextColorLight: string;
+        buttonTypeTertiaryActiveBackgroundColorLight: string;
+        buttonTypeTertiaryActiveBorderColorLight: string;
+        buttonTypeTertiaryActiveTextColorLight: string;
+        buttonDisabledCursor: string;
+        buttonDisabledOpacity: string;
+        darkBlue: {
+            95: string;
+            90: string;
+            85: string;
+            80: string;
+            75: string;
+            70: string;
+            65: string;
+            60: string;
+            55: string;
+            50: string;
+            45: string;
+            40: string;
+            35: string;
+            30: string;
+            25: string;
+            18: string;
+            15: string;
+            10: string;
+            5: string;
+        };
+        digiGreen: {
+            95: string;
+            90: string;
+            85: string;
+            80: string;
+            78: string;
+            70: string;
+            65: string;
+            60: string;
+            55: string;
+            50: string;
+            45: string;
+            40: string;
+            35: string;
+            30: string;
+            25: string;
+            20: string;
+            15: string;
+            10: string;
+            5: string;
+        };
+        earth: {
+            95: string;
+            89: string;
+            85: string;
+            80: string;
+            75: string;
+            70: string;
+            65: string;
+            60: string;
+            55: string;
+            50: string;
+            45: string;
+            40: string;
+            35: string;
+            30: string;
+            25: string;
+            20: string;
+            15: string;
+            10: string;
+            5: string;
+        };
+        energyRed: {
+            95: string;
+            90: string;
+            85: string;
+            80: string;
+            75: string;
+            70: string;
+            65: string;
+            60: string;
+            54: string;
+            50: string;
+            45: string;
+            40: string;
+            35: string;
+            30: string;
+            25: string;
+            20: string;
+            15: string;
+            10: string;
+            5: string;
+        };
+        focusColor: string;
+        landGreen: {
+            95: string;
+            90: string;
+            85: string;
+            80: string;
+            75: string;
+            70: string;
+            65: string;
+            60: string;
+            55: string;
+            50: string;
+            45: string;
+            41: string;
+            35: string;
+            30: string;
+            25: string;
+            20: string;
+            15: string;
+            10: string;
+            5: string;
+        };
+        sandstone: {
+            95: string;
+            90: string;
+            85: string;
+            79: string;
+            75: string;
+            70: string;
+            65: string;
+            60: string;
+            55: string;
+            50: string;
+            45: string;
+            40: string;
+            35: string;
+            30: string;
+            25: string;
+            20: string;
+            15: string;
+            10: string;
+            5: string;
+        };
+        seaBlue: {
+            95: string;
+            90: string;
+            85: string;
+            80: string;
+            75: string;
+            70: string;
+            65: string;
+            60: string;
+            55: string;
+            50: string;
+            45: string;
+            40: string;
+            35: string;
+            28: string;
+            25: string;
+            20: string;
+            15: string;
+            10: string;
+            5: string;
+        };
+        skyBlue: {
+            97: string;
+            95: string;
+            90: string;
+            85: string;
+            80: string;
+            77: string;
+            65: string;
+            60: string;
+            55: string;
+            50: string;
+            45: string;
+            40: string;
+            35: string;
+            30: string;
+            25: string;
+            20: string;
+            15: string;
+            10: string;
+            5: string;
+        };
+        sunflower: {
+            95: string;
+            90: string;
+            85: string;
+            80: string;
+            73: string;
+            70: string;
+            65: string;
+            60: string;
+            55: string;
+            50: string;
+            45: string;
+            40: string;
+            35: string;
+            30: string;
+            25: string;
+            20: string;
+            15: string;
+            10: string;
+            5: string;
+        };
+        terracotta: {
+            95: string;
+            90: string;
+            85: string;
+            80: string;
+            75: string;
+            70: string;
+            65: string;
+            60: string;
+            55: string;
+            50: string;
+            45: string;
+            40: string;
+            35: string;
+            30: string;
+            25: string;
+            20: string;
+            15: string;
+            10: string;
+            5: string;
+        };
+        warmGrey: {
+            95: string;
+            90: string;
+            85: string;
+            80: string;
+            75: string;
+            70: string;
+            65: string;
+            60: string;
+            56: string;
+            50: string;
+            45: string;
+            40: string;
+            35: string;
+            30: string;
+            25: string;
+            20: string;
+            15: string;
+            10: string;
+            5: string;
+        };
         blue: {
             10: string;
             20: string;
@@ -121,7 +412,6 @@ declare const defaultTheme: {
         regular: string;
         medium: string;
         demi: string;
-        bold: string;
     };
     gridTemplateColumns: {
         1: string;
@@ -150,6 +440,7 @@ declare const defaultTheme: {
         sm: number;
         md: number;
         lg: number;
+        xl: number;
         round: number;
     };
     ringWidths: {};
@@ -272,6 +563,133 @@ declare const defaultTheme: {
                 };
             };
         };
+        Badge: {
+            baseStyle: {};
+            defaultProps: {
+                size: string;
+                variant: string;
+            };
+            parts: string[];
+            sizes: {
+                xs: {
+                    container: {
+                        borderRadius: string;
+                        fontSize: string;
+                        h: number;
+                        spaceX: number;
+                    };
+                    icon: {
+                        size: string;
+                    };
+                };
+                sm: {
+                    container: {
+                        fontSize: string;
+                        h: number;
+                        spaceX: number;
+                    };
+                    icon: {
+                        size: string;
+                    };
+                };
+                md: {
+                    container: {
+                        fontSize: string;
+                        h: number;
+                        spaceX: number;
+                    };
+                    icon: {
+                        size: string;
+                    };
+                };
+                lg: {
+                    container: {
+                        fontSize: string;
+                        h: number;
+                        spaceX: number;
+                    };
+                    icon: {
+                        size: string;
+                    };
+                };
+            };
+            variants: {
+                subtleSandstone: {
+                    container: {
+                        bg: string;
+                        color: string;
+                        borderColor: string;
+                    };
+                };
+                subtleEarth: {
+                    container: {
+                        bg: string;
+                        color: string;
+                    };
+                };
+                subtleBlue: {
+                    container: {
+                        bg: string;
+                        color: string;
+                    };
+                };
+                subtleBlue2: {
+                    container: {
+                        bg: string;
+                        color: string;
+                    };
+                };
+                subtleRed: {
+                    container: {
+                        bg: string;
+                        color: string;
+                    };
+                };
+                subtleYellow: {
+                    container: {
+                        bg: string;
+                        color: string;
+                    };
+                };
+                subtleGreen: {
+                    container: {
+                        bg: string;
+                        color: string;
+                    };
+                };
+                solidBlue: {
+                    container: {
+                        bg: string;
+                        color: string;
+                    };
+                };
+                solidDarkBlue: {
+                    container: {
+                        bg: string;
+                        borderColor: string;
+                        color: string;
+                    };
+                };
+                solidRed: {
+                    container: {
+                        bg: string;
+                        color: string;
+                    };
+                };
+                solidYellow: {
+                    container: {
+                        bg: string;
+                        color: string;
+                    };
+                };
+                solidGreen: {
+                    container: {
+                        bg: string;
+                        color: string;
+                    };
+                };
+            };
+        };
         Box: {
             baseStyle: {};
             defaultProps: {};
@@ -299,13 +717,12 @@ declare const defaultTheme: {
         Button: {
             baseStyle: {};
             defaultProps: {
-                colorScheme: string;
                 size: string;
                 variant: string;
             };
             parts: string[];
             sizes: {
-                xs: {
+                sm: {
                     container: {
                         fontSize: string;
                         h: number;
@@ -317,7 +734,7 @@ declare const defaultTheme: {
                     };
                     text: {};
                 };
-                sm: {
+                md: {
                     container: {
                         fontSize: string;
                         h: number;
@@ -329,7 +746,7 @@ declare const defaultTheme: {
                     };
                     text: {};
                 };
-                md: {
+                lg: {
                     container: {
                         fontSize: string;
                         h: number;
@@ -341,7 +758,7 @@ declare const defaultTheme: {
                     };
                     text: {};
                 };
-                lg: {
+                xl: {
                     container: {
                         fontSize: string;
                         h: number;
@@ -355,39 +772,204 @@ declare const defaultTheme: {
                 };
             };
             variants: {
-                outlined: (props: import("..").Dict<any>) => {
+                primaryDark: {
                     container: {
+                        bg: string;
                         borderColor: string;
+                        color: string;
+                        hoverBg: string;
                         hoverBorderColor: string;
-                        focusRing: number;
+                        hoverColor: string;
+                        activeBg: string;
+                        activeBorderColor: string;
+                        activeColor: string;
+                    };
+                };
+                primaryLight: {
+                    container: {
+                        bg: string;
+                        borderColor: string;
+                        color: string;
                         hoverBg: string;
+                        hoverBorderColor: string;
+                        hoverColor: string;
                         activeBg: string;
+                        activeBorderColor: string;
+                        activeColor: string;
+                    };
+                };
+                secondaryDark: {
+                    container: {
                         bg: string;
-                        borderWidth: number;
+                        borderColor: string;
                         color: string;
+                        hoverBg: string;
+                        hoverBorderColor: string;
+                        hoverColor: string;
+                        activeBg: string;
+                        activeBorderColor: string;
+                        activeColor: string;
                     };
                 };
-                solid: (props: import("..").Dict<any>) => {
+                secondaryLight: {
                     container: {
+                        bg: string;
+                        borderColor: string;
+                        color: string;
                         hoverBg: string;
                         hoverBorderColor: string;
+                        hoverColor: string;
                         activeBg: string;
+                        activeBorderColor: string;
+                        activeColor: string;
+                    };
+                };
+                tertiaryDark: {
+                    container: {
                         bg: string;
                         borderColor: string;
-                        borderWidth: number;
                         color: string;
+                        hoverBg: string;
+                        hoverBorderColor: string;
+                        hoverColor: string;
+                        activeBg: string;
+                        activeBorderColor: string;
+                        activeColor: string;
                     };
                 };
-                text: (props: import("..").Dict<any>) => {
+                tertiaryLight: {
                     container: {
+                        bg: string;
+                        borderColor: string;
+                        color: string;
                         hoverBg: string;
                         hoverBorderColor: string;
+                        hoverColor: string;
                         activeBg: string;
+                        activeBorderColor: string;
+                        activeColor: string;
+                    };
+                };
+                solidBlue: {
+                    container: {
                         bg: string;
                         borderColor: string;
-                        borderWidth: number;
                         color: string;
-                        focusRing: number;
+                        disabledBg: string;
+                        disabledBorderColor: string;
+                        disabledColor: string;
+                        hoverBg: string;
+                        hoverBorderColor: string;
+                        focusBg: string;
+                        activeBg: string;
+                        activeBorderColor: string;
+                    };
+                };
+                blueOutlined: {
+                    container: {
+                        bg: string;
+                        borderColor: string;
+                        color: string;
+                        disabledBg: string;
+                        disabledBorderColor: string;
+                        disabledColor: string;
+                        hoverBg: string;
+                        hoverBorderColor: string;
+                        activeBg: string;
+                        activeBorderColor: string;
+                    };
+                };
+                blueText: {
+                    container: {
+                        bg: string;
+                        borderColor: string;
+                        color: string;
+                        disabledBg: string;
+                        disabledBorderColor: string;
+                        disabledColor: string;
+                        hoverBg: string;
+                        hoverBorderColor: string;
+                        focusBg: string;
+                        activeBg: string;
+                        activeBorderColor: string;
+                    };
+                };
+                solidGreen: {
+                    container: {
+                        bg: string;
+                        borderColor: string;
+                        color: string;
+                        disabledBg: string;
+                        disabledBorderColor: string;
+                        disabledColor: string;
+                        hoverBg: string;
+                        hoverBorderColor: string;
+                        focusBg: string;
+                        activeBg: string;
+                        activeBorderColor: string;
+                    };
+                };
+                solidRed: {
+                    container: {
+                        bg: string;
+                        borderColor: string;
+                        color: string;
+                        disabledBg: string;
+                        disabledBorderColor: string;
+                        disabledColor: string;
+                        hoverBg: string;
+                        hoverBorderColor: string;
+                        focusBg: string;
+                        activeBg: string;
+                        activeBorderColor: string;
+                    };
+                };
+                subtleBlue: {
+                    container: {
+                        bg: string;
+                        borderColor: string;
+                        color: string;
+                        disabledBg: string;
+                        disabledBorderColor: string;
+                        disabledColor: string;
+                        hoverBg: string;
+                        hoverBorderColor: string;
+                        focusBg: string;
+                        activeBg: string;
+                        activeBorderColor: string;
+                    };
+                };
+                subtleRed: {
+                    container: {
+                        bg: string;
+                        borderColor: string;
+                        hoverBg: string;
+                        hoverBorderColor: string;
+                        focusBg: string;
+                        activeBg: string;
+                        color: string;
+                    };
+                };
+                subtleYellow: {
+                    container: {
+                        bg: string;
+                        borderColor: string;
+                        hoverBg: string;
+                        hoverBorderColor: string;
+                        focusBg: string;
+                        activeBg: string;
+                        color: string;
+                    };
+                };
+                subtleGreen: {
+                    container: {
+                        bg: string;
+                        borderColor: string;
+                        hoverBg: string;
+                        hoverBorderColor: string;
+                        focusBg: string;
+                        activeBg: string;
+                        color: string;
                     };
                 };
             };
@@ -577,39 +1159,97 @@ declare const defaultTheme: {
             };
         };
         Heading: {
-            baseStyle: {};
+            baseStyle: {
+                color: string;
+            };
             defaultProps: {
                 size: string;
             };
             sizes: {
+                title: {
+                    as: string;
+                    fontFamily: string;
+                    fontSize: {
+                        desktop: string;
+                        mobile: string;
+                    };
+                    fontWeight: string;
+                    lineHeight: {
+                        desktop: string;
+                        mobile: string;
+                    };
+                };
                 h1: {
                     as: string;
-                    fontSize: string;
-                    lineHeight: string;
+                    fontSize: {
+                        desktop: string;
+                        mobile: string;
+                    };
+                    fontWeight: string;
+                    lineHeight: {
+                        desktop: string;
+                        mobile: string;
+                    };
+                };
+                lead: {
+                    as: string;
+                    color: string;
+                    fontSize: {
+                        desktop: string;
+                        mobile: string;
+                    };
+                    fontWeight: string;
+                    lineHeight: {
+                        desktop: string;
+                        mobile: string;
+                    };
                 };
                 h2: {
                     as: string;
-                    fontSize: string;
-                    lineHeight: string;
+                    fontSize: {
+                        desktop: string;
+                        mobile: string;
+                    };
+                    fontWeight: string;
+                    lineHeight: {
+                        desktop: string;
+                        mobile: string;
+                    };
                 };
                 h3: {
                     as: string;
-                    fontSize: string;
+                    fontSize: {
+                        desktop: string;
+                        mobile: string;
+                    };
+                    fontWeight: string;
                     lineHeight: string;
                 };
                 h4: {
                     as: string;
-                    fontSize: string;
+                    fontSize: {
+                        desktop: string;
+                        mobile: string;
+                    };
+                    fontWeight: string;
                     lineHeight: string;
                 };
                 h5: {
                     as: string;
-                    fontSize: string;
-                    lineHeight: string;
+                    fontSize: {
+                        desktop: string;
+                        mobile: string;
+                    };
+                    fontWeight: string;
+                    lineHeight: {
+                        desktop: string;
+                        mobile: string;
+                    };
                 };
                 h6: {
                     as: string;
                     fontSize: string;
+                    fontWeight: string;
                     lineHeight: string;
                 };
             };
@@ -637,6 +1277,10 @@ declare const defaultTheme: {
                     height: number;
                     width: number;
                 };
+                xl: {
+                    height: number;
+                    width: number;
+                };
             };
             variants: {};
         };
@@ -711,7 +1355,6 @@ declare const defaultTheme: {
         Link: {
             baseStyle: {};
             defaultProps: {
-                colorScheme: string;
                 size: string;
                 variant: string;
             };
@@ -720,6 +1363,7 @@ declare const defaultTheme: {
                 sm: {
                     container: {
                         fontSize: string;
+                        lineHeight: string;
                     };
                     icon: {
                         size: string;
@@ -728,6 +1372,7 @@ declare const defaultTheme: {
                 md: {
                     container: {
                         fontSize: string;
+                        lineHeight: string;
                     };
                     icon: {
                         size: string;
@@ -736,6 +1381,16 @@ declare const defaultTheme: {
                 lg: {
                     container: {
                         fontSize: string;
+                        lineHeight: string;
+                    };
+                    icon: {
+                        size: string;
+                    };
+                };
+                xl: {
+                    container: {
+                        fontSize: string;
+                        lineHeight: string;
                     };
                     icon: {
                         size: string;
@@ -743,13 +1398,13 @@ declare const defaultTheme: {
                 };
             };
             variants: {
-                default: (props: import("..").Dict<any>) => {
+                default: () => {
                     container: {
                         color: string;
                         hoverColor: string;
                     };
                 };
-                light: (props: import("..").Dict<any>) => {
+                light: () => {
                     container: {
                         color: string;
                         hoverColor: string;
@@ -760,6 +1415,12 @@ declare const defaultTheme: {
                         hoverTextDecoration: string;
                     };
                 };
+                white: () => {
+                    container: {
+                        color: string;
+                        hoverColor: string;
+                    };
+                };
             };
         };
         List: {
@@ -900,23 +1561,40 @@ declare const defaultTheme: {
         Notification: {
             baseStyle: {};
             defaultProps: {
-                colorScheme: string;
                 variant: string;
             };
             parts: string[];
             sizes: {};
             variants: {
-                subtle: (props: import("..").Dict<any>) => {
+                subtleBlue: {
                     container: {
                         bg: string;
                         borderColor: string;
-                        borderWidth: number;
                         color: string;
                     };
                     button: {
+                        borderColor: string;
+                    };
+                };
+                subtleRed: {
+                    container: {
+                        bg: string;
+                        borderColor: string;
+                        color: string;
+                    };
+                };
+                subtleYellow: {
+                    container: {
+                        bg: string;
+                        borderColor: string;
+                        color: string;
+                    };
+                };
+                subtleGreen: {
+                    container: {
+                        bg: string;
+                        borderColor: string;
                         color: string;
-                        hoverBg: string;
-                        activeBg: string;
                     };
                 };
             };
@@ -939,14 +1617,6 @@ declare const defaultTheme: {
                     fontSize: string;
                     lineHeight: string;
                 };
-                xl: {
-                    fontSize: string;
-                    lineHeight: string;
-                };
-                xxl: {
-                    fontSize: string;
-                    lineHeight: string;
-                };
             };
             variants: {};
         };
@@ -1304,7 +1974,16 @@ declare const defaultTheme: {
                     fontSize: string;
                 };
             };
-            variants: {};
+            variants: {
+                label: {
+                    fontSize: string;
+                    fontWeight: string;
+                };
+                caption: {
+                    fontSize: string;
+                    fontWeight: string;
+                };
+            };
         };
         Table: {
             baseStyle: {};
@@ -1337,6 +2016,11 @@ declare const defaultTheme: {
                     };
                 };
                 striped: {};
+                basic: {
+                    td: {
+                        borderBottom: string;
+                    };
+                };
             };
         };
         Tabs: {
@@ -1344,22 +2028,71 @@ declare const defaultTheme: {
             defaultProps: {};
             parts: string[];
             sizes: {
-                sm: {};
-                md: {};
-                lg: {};
-                xl: {};
+                sm: {
+                    tabsNavBar: {
+                        borderWidth: string;
+                        fontSize: string;
+                        h: string;
+                        py: string;
+                    };
+                };
+                md: {
+                    tabsNavBar: {
+                        borderWidth: string;
+                        fontSize: string;
+                        h: string;
+                        py: string;
+                    };
+                };
+                lg: {
+                    tabsNavBar: {
+                        borderWidth: string;
+                        fontSize: string;
+                        h: number;
+                        py: string;
+                    };
+                };
+                xl: {
+                    tabsNavBar: {
+                        borderWidth: string;
+                        fontSize: string;
+                        h: number;
+                        py: string;
+                    };
+                };
+                xxl: {
+                    tabsNavBar: {
+                        borderWidth: string;
+                        fontSize: string;
+                        h: number;
+                        py: string;
+                    };
+                };
             };
             variants: {};
         };
         Tag: {
             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;
@@ -1401,31 +2134,166 @@ declare const defaultTheme: {
                 };
             };
             variants: {
-                solid: (props: import("..").Dict<any>) => {
+                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;
-                        focusRing: number;
                     };
                     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;
                     };
                 };
-                subtle: (props: import("..").Dict<any>) => {
+                subtleGreen: {
+                    container: {
+                        bg: string;
+                        hoverBg: string;
+                        borderColor: string;
+                        color: string;
+                        activeBg: string;
+                    };
+                    button: {
+                        bg: string;
+                        hoverBg: string;
+                        activeBg: string;
+                        hoverBorderColor: string;
+                        color: string;
+                    };
+                };
+                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;
                     };
                 };