@tanstack/devtools-ui 0.5.0 → 0.5.1

package/dist/esm/styles/use-styles.js

@@ -1,59 +1,261 @@
-import * as goober from "goober";
-import { createSignal, createEffect } from "solid-js";
 import { useTheme } from "../components/theme.js";
 import { tokens } from "./tokens.js";
-const buttonVariantColors = {
-  primary: {
-    bg: tokens.colors.gray[900],
-    hover: tokens.colors.gray[800],
-    active: tokens.colors.gray[700],
-    text: "#fff",
-    border: tokens.colors.gray[900]
-  },
-  secondary: {
-    bg: tokens.colors.gray[100],
-    hover: tokens.colors.gray[200],
-    active: tokens.colors.gray[300],
-    text: tokens.colors.gray[900],
-    border: tokens.colors.gray[300]
-  },
-  info: {
-    bg: tokens.colors.blue[500],
-    hover: tokens.colors.blue[600],
-    active: tokens.colors.blue[700],
-    text: "#fff",
-    border: tokens.colors.blue[500]
-  },
-  warning: {
-    bg: tokens.colors.yellow[500],
-    hover: tokens.colors.yellow[600],
-    active: tokens.colors.yellow[700],
-    text: "#fff",
-    border: tokens.colors.yellow[500]
-  },
-  danger: {
-    bg: tokens.colors.red[500],
-    hover: tokens.colors.red[600],
-    active: tokens.colors.red[700],
-    text: "#fff",
-    border: tokens.colors.red[500]
-  },
-  success: {
-    bg: tokens.colors.green[500],
-    hover: tokens.colors.green[600],
-    active: tokens.colors.green[700],
-    text: "#fff",
-    border: tokens.colors.green[500]
-  }
+import { createEffect, createSignal } from "solid-js";
+import * as goober from "goober";
+//#region src/styles/use-styles.ts
+var buttonVariantColors = {
+	primary: {
+		bg: {
+			light: tokens.colors.gray[900],
+			dark: tokens.colors.gray[100]
+		},
+		hover: {
+			light: tokens.colors.gray[800],
+			dark: tokens.colors.gray[200]
+		},
+		active: {
+			light: tokens.colors.gray[700],
+			dark: tokens.colors.gray[300]
+		},
+		text: {
+			light: "#fff",
+			dark: tokens.colors.gray[900]
+		},
+		border: {
+			light: tokens.colors.gray[800],
+			dark: tokens.colors.gray[200]
+		},
+		outline: {
+			light: tokens.colors.gray[900],
+			dark: tokens.colors.gray[100]
+		},
+		outlineHover: {
+			light: tokens.colors.gray[800],
+			dark: tokens.colors.gray[200]
+		}
+	},
+	secondary: {
+		bg: {
+			light: tokens.colors.gray[100],
+			dark: tokens.colors.gray[100]
+		},
+		hover: {
+			light: tokens.colors.gray[200],
+			dark: tokens.colors.gray[200]
+		},
+		active: {
+			light: tokens.colors.gray[300],
+			dark: tokens.colors.gray[300]
+		},
+		text: {
+			light: tokens.colors.gray[900],
+			dark: tokens.colors.gray[900]
+		},
+		border: {
+			light: tokens.colors.gray[300],
+			dark: tokens.colors.gray[300]
+		},
+		outline: {
+			light: tokens.colors.gray[700],
+			dark: tokens.colors.gray[300]
+		},
+		outlineHover: {
+			light: tokens.colors.gray[800],
+			dark: tokens.colors.gray[200]
+		}
+	},
+	info: {
+		bg: {
+			light: tokens.colors.blue[500],
+			dark: tokens.colors.blue[500]
+		},
+		hover: {
+			light: tokens.colors.blue[600],
+			dark: tokens.colors.blue[600]
+		},
+		active: {
+			light: tokens.colors.blue[700],
+			dark: tokens.colors.blue[700]
+		},
+		text: {
+			light: "#fff",
+			dark: "#fff"
+		},
+		border: {
+			light: tokens.colors.blue[500],
+			dark: tokens.colors.blue[500]
+		},
+		outline: {
+			light: tokens.colors.blue[700],
+			dark: tokens.colors.blue[300]
+		},
+		outlineHover: {
+			light: tokens.colors.blue[600],
+			dark: tokens.colors.blue[200]
+		}
+	},
+	warning: {
+		bg: {
+			light: tokens.colors.yellow[500],
+			dark: tokens.colors.yellow[500]
+		},
+		hover: {
+			light: tokens.colors.yellow[600],
+			dark: tokens.colors.yellow[600]
+		},
+		active: {
+			light: tokens.colors.yellow[700],
+			dark: tokens.colors.yellow[700]
+		},
+		text: {
+			light: "#fff",
+			dark: "#fff"
+		},
+		border: {
+			light: tokens.colors.yellow[500],
+			dark: tokens.colors.yellow[500]
+		},
+		outline: {
+			light: tokens.colors.yellow[700],
+			dark: tokens.colors.yellow[300]
+		},
+		outlineHover: {
+			light: tokens.colors.yellow[600],
+			dark: tokens.colors.yellow[200]
+		}
+	},
+	danger: {
+		bg: {
+			light: tokens.colors.red[500],
+			dark: tokens.colors.red[500]
+		},
+		hover: {
+			light: tokens.colors.red[600],
+			dark: tokens.colors.red[600]
+		},
+		active: {
+			light: tokens.colors.red[700],
+			dark: tokens.colors.red[700]
+		},
+		text: {
+			light: "#fff",
+			dark: "#fff"
+		},
+		border: {
+			light: tokens.colors.red[500],
+			dark: tokens.colors.red[500]
+		},
+		outline: {
+			light: tokens.colors.red[700],
+			dark: tokens.colors.red[300]
+		},
+		outlineHover: {
+			light: tokens.colors.red[600],
+			dark: tokens.colors.red[200]
+		}
+	},
+	success: {
+		bg: {
+			light: tokens.colors.green[500],
+			dark: tokens.colors.green[500]
+		},
+		hover: {
+			light: tokens.colors.green[600],
+			dark: tokens.colors.green[600]
+		},
+		active: {
+			light: tokens.colors.green[700],
+			dark: tokens.colors.green[700]
+		},
+		text: {
+			light: "#fff",
+			dark: "#fff"
+		},
+		border: {
+			light: tokens.colors.green[500],
+			dark: tokens.colors.green[500]
+		},
+		outline: {
+			light: tokens.colors.green[700],
+			dark: tokens.colors.green[300]
+		},
+		outlineHover: {
+			light: tokens.colors.green[600],
+			dark: tokens.colors.green[200]
+		}
+	}
 };
-const css = goober.css;
-const stylesFactory = (theme = "dark") => {
-  const { colors, font, size, border } = tokens;
-  const { fontFamily } = font;
-  const t = (light, dark) => theme === "light" ? light : dark;
-  const wrapperSize = 320;
-  return {
-    logo: css`
+var css = goober.css;
+var stylesFactory = (theme) => {
+	const { colors, font, size, border } = tokens;
+	const { fontFamily } = font;
+	const t = (light, dark) => theme === "light" ? light : dark;
+	const buildButtonVariant = (variant) => {
+		const v = buttonVariantColors[variant];
+		const outlineColor = t(v.outline.light, v.outline.dark);
+		const outlineHoverColor = t(v.outlineHover.light, v.outlineHover.dark);
+		const solidBg = t(v.bg.light, v.bg.dark);
+		const solidHover = t(v.hover.light, v.hover.dark);
+		const solidActive = t(v.active.light, v.active.dark);
+		const solidText = t(v.text.light, v.text.dark);
+		const solidBorder = t(v.border.light, v.border.dark);
+		return {
+			ghost: css`
+        background: transparent;
+        color: ${outlineColor};
+        border-color: transparent;
+        &:hover {
+          background: ${t(colors.gray[100], colors.darkGray[800])};
+          color: ${outlineHoverColor};
+        }
+        &:active {
+          background: ${t(colors.gray[200], colors.darkGray[700])};
+          color: ${outlineHoverColor};
+        }
+      `,
+			outline: css`
+        background: transparent;
+        color: ${outlineColor};
+        border-color: ${outlineColor};
+        &:hover {
+          background: ${t(colors.gray[50], colors.darkGray[800])};
+          color: ${outlineHoverColor};
+          border-color: ${outlineHoverColor};
+        }
+        &:active {
+          background: ${t(colors.gray[100], colors.darkGray[700])};
+          color: ${outlineHoverColor};
+          border-color: ${outlineHoverColor};
+        }
+      `,
+			solid: css`
+        background: ${solidBg};
+        color: ${solidText};
+        border-color: ${solidBorder};
+        &:hover {
+          background: ${solidHover};
+          border-color: ${solidHover};
+          box-shadow: ${t(tokens.shadow.xs("rgb(0 0 0 / 0.12)"), tokens.shadow.xs("rgb(0 0 0 / 0.5)"))};
+        }
+        &:active {
+          background: ${solidActive};
+          border-color: ${solidActive};
+          box-shadow: ${t(tokens.shadow.inner("rgb(0 0 0 / 0.2)"), tokens.shadow.inner("rgb(0 0 0 / 0.6)"))};
+        }
+      `
+		};
+	};
+	const buttonVariants = {
+		primary: buildButtonVariant("primary"),
+		secondary: buildButtonVariant("secondary"),
+		info: buildButtonVariant("info"),
+		warning: buildButtonVariant("warning"),
+		danger: buildButtonVariant("danger"),
+		success: buildButtonVariant("success")
+	};
+	const wrapperSize = 320;
+	return {
+		logo: css`
       cursor: pointer;
       display: flex;
       flex-direction: column;
@@ -62,36 +264,36 @@ const stylesFactory = (theme = "dark") => {
       width: ${size[12]};
       height: ${size[12]};
       font-family: ${fontFamily.sans};
-      gap: ${tokens.size[0.5]};
-      padding: 0px;
+      gap: ${tokens.size[.5]};
+      padding: 0;
       &:hover {
         opacity: 0.7;
       }
     `,
-    selectWrapper: css`
+		selectWrapper: css`
       width: 100%;
       max-width: ${wrapperSize}px;
       display: flex;
       flex-direction: column;
       gap: 0.375rem;
     `,
-    selectContainer: css`
+		selectContainer: css`
       width: 100%;
     `,
-    selectLabel: css`
+		selectLabel: css`
       font-size: 0.875rem;
       font-weight: 500;
       color: ${t(colors.gray[900], colors.gray[100])};
       text-align: left;
     `,
-    selectDescription: css`
+		selectDescription: css`
       font-size: 0.8rem;
       color: ${t(colors.gray[500], colors.gray[400])};
       margin: 0;
       line-height: 1.3;
       text-align: left;
     `,
-    select: css`
+		select: css`
       appearance: none;
       width: 100%;
       padding: 0.5rem 3rem 0.5rem 0.75rem;
@@ -119,30 +321,30 @@ const stylesFactory = (theme = "dark") => {
         box-shadow: 0 0 0 3px ${t(colors.gray[200], colors.gray[800])};
       }
     `,
-    inputWrapper: css`
+		inputWrapper: css`
       width: 100%;
       max-width: ${wrapperSize}px;
       display: flex;
       flex-direction: column;
       gap: 0.375rem;
     `,
-    inputContainer: css`
+		inputContainer: css`
       width: 100%;
     `,
-    inputLabel: css`
+		inputLabel: css`
       font-size: 0.875rem;
       font-weight: 500;
       color: ${t(colors.gray[900], colors.gray[100])};
       text-align: left;
     `,
-    inputDescription: css`
+		inputDescription: css`
       font-size: 0.8rem;
       color: ${t(colors.gray[500], colors.gray[400])};
       margin: 0;
       line-height: 1.3;
       text-align: left;
     `,
-    input: css`
+		input: css`
       appearance: none;
       box-sizing: border-box;
       width: 100%;
@@ -169,7 +371,7 @@ const stylesFactory = (theme = "dark") => {
         box-shadow: 0 0 0 3px ${t(colors.gray[200], colors.gray[800])};
       }
     `,
-    checkboxWrapper: css`
+		checkboxWrapper: css`
       display: flex;
       align-items: flex-start;
       gap: 0.75rem;
@@ -183,16 +385,16 @@ const stylesFactory = (theme = "dark") => {
         background-color: ${t(colors.gray[50], colors.darkGray[900])};
       }
     `,
-    checkboxContainer: css`
+		checkboxContainer: css`
       width: 100%;
     `,
-    checkboxLabelContainer: css`
+		checkboxLabelContainer: css`
       display: flex;
       flex-direction: column;
       gap: 0.25rem;
       flex: 1;
     `,
-    checkbox: css`
+		checkbox: css`
       appearance: none;
       width: 1.25rem;
       height: 1.25rem;
@@ -224,21 +426,21 @@ const stylesFactory = (theme = "dark") => {
         margin-top: -3px;
       }
     `,
-    checkboxLabel: css`
+		checkboxLabel: css`
       color: ${t(colors.gray[900], colors.gray[100])};
       font-size: 0.875rem;
       font-weight: 500;
       line-height: 1.4;
       text-align: left;
     `,
-    checkboxDescription: css`
+		checkboxDescription: css`
       color: ${t(colors.gray[500], colors.gray[400])};
       font-size: 0.8rem;
       line-height: 1.3;
       text-align: left;
     `,
-    button: {
-      base: css`
+		button: {
+			base: css`
         display: inline-flex;
         align-items: center;
         justify-content: center;
@@ -257,62 +459,21 @@ const stylesFactory = (theme = "dark") => {
         border-width: 1px;
         border-style: solid;
       `,
-      variant(variant, outline, ghost) {
-        const v = buttonVariantColors[variant];
-        if (ghost) {
-          return css`
-            background: transparent;
-            color: ${t(v.bg, v.bg)};
-            border-color: transparent;
-            &:hover {
-              background: ${t(colors.gray[100], colors.darkGray[800])};
-            }
-            &:active {
-              background: ${t(colors.gray[200], colors.darkGray[700])};
-            }
-          `;
-        }
-        if (outline) {
-          return css`
-            background: transparent;
-            color: ${t(v.bg, v.bg)};
-            border-color: ${t(v.bg, v.bg)};
-            &:hover {
-              background: ${t(colors.gray[50], colors.darkGray[800])};
-              border-color: ${t(v.hover, v.hover)};
-            }
-            &:active {
-              background: ${t(colors.gray[100], colors.darkGray[700])};
-              border-color: ${t(v.active, v.active)};
-            }
-          `;
-        }
-        return css`
-          background: ${t(v.bg, v.bg)};
-          color: ${t(v.text, v.text)};
-          border-color: ${t(v.border, v.border)};
-          &:hover {
-            background: ${t(v.hover, v.hover)};
-            border-color: ${t(v.hover, v.hover)};
-          }
-          &:active {
-            background: ${t(v.active, v.active)};
-            border-color: ${t(v.active, v.active)};
-          }
-        `;
-      }
-    },
-    tag: {
-      dot: (color) => css`
+			variant(variant, outline, ghost) {
+				const v = buttonVariants[variant];
+				if (ghost) return v.ghost;
+				if (outline) return v.outline;
+				return v.solid;
+			}
+		},
+		tag: {
+			dot: (color) => css`
         width: ${tokens.size[1.5]};
         height: ${tokens.size[1.5]};
         border-radius: ${tokens.border.radius.full};
-        background-color: ${t(
-        tokens.colors[color][500],
-        tokens.colors[color][500]
-      )};
+        background-color: ${t(tokens.colors[color][500], tokens.colors[color][500])};
       `,
-      base: css`
+			base: css`
         display: flex;
         gap: ${tokens.size[1.5]};
         box-sizing: border-box;
@@ -333,10 +494,10 @@ const stylesFactory = (theme = "dark") => {
           outline: 2px solid ${t(colors.blue[700], colors.blue[800])};
         }
       `,
-      label: css`
+			label: css`
         font-size: ${font.size.xs};
       `,
-      count: css`
+			count: css`
         font-size: ${font.size.xs};
         padding: 0 5px;
         display: flex;
@@ -348,19 +509,19 @@ const stylesFactory = (theme = "dark") => {
         font-variant-numeric: tabular-nums;
         height: ${tokens.size[4.5]};
       `
-    },
-    tree: {
-      info: css`
+		},
+		tree: {
+			info: css`
         color: ${t(colors.gray[500], colors.gray[500])};
         font-size: ${font.size.xs};
         margin-right: ${size[1]};
       `,
-      actionButton: css`
+			actionButton: css`
         background-color: transparent;
         color: ${t(colors.gray[500], colors.gray[500])};
         border: none;
         display: inline-flex;
-        padding: 0px;
+        padding: 0;
         align-items: center;
         justify-content: center;
         cursor: pointer;
@@ -379,10 +540,10 @@ const stylesFactory = (theme = "dark") => {
           outline-offset: 2px;
         }
       `,
-      expanderContainer: css`
+			expanderContainer: css`
         position: relative;
       `,
-      expander: css`
+			expander: css`
         position: absolute;
         cursor: pointer;
         left: -16px;
@@ -399,13 +560,13 @@ const stylesFactory = (theme = "dark") => {
         align-items: center;
         transition: all 0.1s ease;
       `,
-      expandedLine: (hasBorder) => css`
+			expandedLine: (hasBorder) => css`
         display: block;
         padding-left: 0.75rem;
         margin-left: -0.7rem;
         ${hasBorder ? `border-left: 1px solid ${t(colors.blue[400], colors.blue[300])};` : ""}
       `,
-      collapsible: css`
+			collapsible: css`
         cursor: pointer;
         transition: all 0.2s ease;
         &:hover {
@@ -414,7 +575,7 @@ const stylesFactory = (theme = "dark") => {
           padding: 0 ${tokens.size[1]};
         }
       `,
-      actions: css`
+			actions: css`
         display: inline-flex;
         margin-left: ${size[2]};
         gap: ${size[2]};
@@ -424,32 +585,32 @@ const stylesFactory = (theme = "dark") => {
           width: 12px;
         }
       `,
-      valueCollapsed: css`
+			valueCollapsed: css`
         color: ${t(colors.gray[500], colors.gray[400])};
       `,
-      valueFunction: css`
+			valueFunction: css`
         color: ${t(colors.cyan[500], colors.cyan[400])};
       `,
-      valueString: css`
+			valueString: css`
         color: ${t(colors.green[500], colors.green[400])};
       `,
-      valueNumber: css`
+			valueNumber: css`
         color: ${t(colors.yellow[500], colors.yellow[400])};
       `,
-      valueBoolean: css`
+			valueBoolean: css`
         color: ${t(colors.pink[500], colors.pink[400])};
       `,
-      valueNull: css`
+			valueNull: css`
         color: ${t(colors.gray[500], colors.gray[400])};
         font-style: italic;
       `,
-      valueKey: css`
+			valueKey: css`
         color: ${t(colors.blue[400], colors.blue[300])};
       `,
-      valueBraces: css`
+			valueBraces: css`
         color: ${colors.gray[500]};
       `,
-      valueContainer: (isRoot) => css`
+			valueContainer: (isRoot) => css`
         display: block;
         margin-left: ${isRoot ? "0" : "1rem"};
 
@@ -461,9 +622,9 @@ const stylesFactory = (theme = "dark") => {
           display: inline-flex;
         }
       `
-    },
-    header: {
-      row: css`
+		},
+		header: {
+			row: css`
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -472,7 +633,7 @@ const stylesFactory = (theme = "dark") => {
         border-bottom: ${t(colors.gray[300], colors.darkGray[500])} 1px solid;
         align-items: center;
       `,
-      logoAndToggleContainer: css`
+			logoAndToggleContainer: css`
         display: flex;
         gap: ${tokens.size[3]};
         align-items: center;
@@ -481,18 +642,18 @@ const stylesFactory = (theme = "dark") => {
           background: transparent;
           border: none;
           display: flex;
-          gap: ${size[0.5]};
+          gap: ${size[.5]};
           flex-direction: column;
         }
       `,
-      logo: css`
+			logo: css`
         cursor: pointer;
         display: flex;
         flex-direction: column;
         background-color: transparent;
         border: none;
-        gap: ${tokens.size[0.5]};
-        padding: 0px;
+        gap: ${tokens.size[.5]};
+        padding: 0;
         &:hover {
           opacity: 0.7;
         }
@@ -502,14 +663,14 @@ const stylesFactory = (theme = "dark") => {
           outline: 2px solid ${colors.blue[800]};
         }
       `,
-      tanstackLogo: css`
+			tanstackLogo: css`
         font-size: ${font.size.md};
         font-weight: ${font.weight.bold};
         line-height: ${font.lineHeight.xs};
         white-space: nowrap;
         color: ${t(colors.gray[700], colors.gray[300])};
       `,
-      flavorLogo: (flavorLight, flavorDark) => css`
+			flavorLogo: (flavorLight, flavorDark) => css`
         font-weight: ${font.weight.semibold};
         font-size: ${font.size.xs};
         background: linear-gradient(to right, ${t(flavorLight, flavorDark)});
@@ -519,9 +680,9 @@ const stylesFactory = (theme = "dark") => {
         -webkit-text-fill-color: transparent;
         white-space: nowrap;
       `
-    },
-    section: {
-      main: css`
+		},
+		section: {
+			main: css`
         margin-bottom: 1.5rem;
         padding: 1rem;
         background-color: ${t(colors.gray[50], colors.darkGray[800])};
@@ -529,7 +690,7 @@ const stylesFactory = (theme = "dark") => {
         border-radius: 0.5rem;
         box-shadow: none;
       `,
-      title: css`
+			title: css`
         font-size: 1rem;
         font-weight: 600;
         color: ${t(colors.gray[900], colors.gray[100])};
@@ -541,7 +702,7 @@ const stylesFactory = (theme = "dark") => {
         gap: 0.5rem;
         text-align: left;
       `,
-      icon: css`
+			icon: css`
         height: 18px;
         width: 18px;
         & > svg {
@@ -550,34 +711,31 @@ const stylesFactory = (theme = "dark") => {
         }
         color: ${t(colors.gray[700], colors.gray[400])};
       `,
-      description: css`
+			description: css`
         color: ${t(colors.gray[500], colors.gray[400])};
         font-size: 0.8rem;
         margin: 0 0 1rem 0;
         line-height: 1.4;
         text-align: left;
       `
-    },
-    mainPanel: {
-      panel: (withPadding) => css`
+		},
+		mainPanel: { panel: (withPadding) => css`
         padding: ${withPadding ? tokens.size[3] : 0};
         background: ${t(colors.gray[50], colors.darkGray[700])};
         overflow-y: auto;
         height: 100%;
-      `
-    }
-  };
+      ` }
+	};
 };
 function useStyles() {
-  const { theme } = useTheme();
-  const [styles, setStyles] = createSignal(stylesFactory(theme()));
-  createEffect(() => {
-    setStyles(stylesFactory(theme()));
-  });
-  return styles;
+	const { theme } = useTheme();
+	const [styles, setStyles] = createSignal(stylesFactory(theme()));
+	createEffect(() => {
+		setStyles(stylesFactory(theme()));
+	});
+	return styles;
 }
-export {
-  css,
-  useStyles
-};
-//# sourceMappingURL=use-styles.js.map
+//#endregion
+export { css, useStyles };
+
+//# sourceMappingURL=use-styles.js.map