@tanstack/devtools-ui 0.5.0 → 0.5.1

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

@@ -1 +1 @@
-{"version":3,"file":"use-styles.js","sources":["../../../src/styles/use-styles.ts"],"sourcesContent":["import * as goober from 'goober'\nimport { createEffect, createSignal } from 'solid-js'\nimport { useTheme } from '../components/theme'\nimport { tokens } from './tokens'\nimport type { ButtonVariant } from '../components/button'\nimport type { Theme } from '../components/theme'\n\nconst buttonVariantColors: Record<\n  ButtonVariant,\n  { bg: string; hover: string; active: string; text: string; border: string }\n> = {\n  primary: {\n    bg: tokens.colors.gray[900],\n    hover: tokens.colors.gray[800],\n    active: tokens.colors.gray[700],\n    text: '#fff',\n    border: tokens.colors.gray[900],\n  },\n  secondary: {\n    bg: tokens.colors.gray[100],\n    hover: tokens.colors.gray[200],\n    active: tokens.colors.gray[300],\n    text: tokens.colors.gray[900],\n    border: tokens.colors.gray[300],\n  },\n  info: {\n    bg: tokens.colors.blue[500],\n    hover: tokens.colors.blue[600],\n    active: tokens.colors.blue[700],\n    text: '#fff',\n    border: tokens.colors.blue[500],\n  },\n  warning: {\n    bg: tokens.colors.yellow[500],\n    hover: tokens.colors.yellow[600],\n    active: tokens.colors.yellow[700],\n    text: '#fff',\n    border: tokens.colors.yellow[500],\n  },\n  danger: {\n    bg: tokens.colors.red[500],\n    hover: tokens.colors.red[600],\n    active: tokens.colors.red[700],\n    text: '#fff',\n    border: tokens.colors.red[500],\n  },\n  success: {\n    bg: tokens.colors.green[500],\n    hover: tokens.colors.green[600],\n    active: tokens.colors.green[700],\n    text: '#fff',\n    border: tokens.colors.green[500],\n  },\n}\nexport const css = goober.css\nconst stylesFactory = (theme: Theme = 'dark') => {\n  const { colors, font, size, border } = tokens\n  const { fontFamily } = font\n\n  const t = (light: string, dark: string) => (theme === 'light' ? light : dark)\n\n  const wrapperSize = 320\n\n  return {\n    logo: css`\n      cursor: pointer;\n      display: flex;\n      flex-direction: column;\n      background-color: transparent;\n      border: none;\n      width: ${size[12]};\n      height: ${size[12]};\n      font-family: ${fontFamily.sans};\n      gap: ${tokens.size[0.5]};\n      padding: 0px;\n      &:hover {\n        opacity: 0.7;\n      }\n    `,\n\n    selectWrapper: css`\n      width: 100%;\n      max-width: ${wrapperSize}px;\n      display: flex;\n      flex-direction: column;\n      gap: 0.375rem;\n    `,\n    selectContainer: css`\n      width: 100%;\n    `,\n    selectLabel: css`\n      font-size: 0.875rem;\n      font-weight: 500;\n      color: ${t(colors.gray[900], colors.gray[100])};\n      text-align: left;\n    `,\n    selectDescription: css`\n      font-size: 0.8rem;\n      color: ${t(colors.gray[500], colors.gray[400])};\n      margin: 0;\n      line-height: 1.3;\n      text-align: left;\n    `,\n    select: css`\n      appearance: none;\n      width: 100%;\n      padding: 0.5rem 3rem 0.5rem 0.75rem;\n      border-radius: 0.375rem;\n      background-color: ${t(colors.gray[50], colors.darkGray[800])};\n      color: ${t(colors.gray[900], colors.gray[100])};\n      border: 1px solid ${t(colors.gray[200], colors.gray[800])};\n      font-size: 0.875rem;\n      transition: all 0.15s ease;\n      cursor: pointer;\n\n      /* Custom arrow */\n      background-image: url(\"data:image/svg+xml;utf8,<svg fill='%236b7280' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>\");\n      background-repeat: no-repeat;\n      background-position: right 0.75rem center;\n      background-size: 1.25rem;\n\n      &:hover {\n        border-color: ${t(colors.gray[300], colors.gray[700])};\n      }\n\n      &:focus {\n        outline: none;\n        border-color: ${colors.gray[400]};\n        box-shadow: 0 0 0 3px ${t(colors.gray[200], colors.gray[800])};\n      }\n    `,\n    inputWrapper: css`\n      width: 100%;\n      max-width: ${wrapperSize}px;\n      display: flex;\n      flex-direction: column;\n      gap: 0.375rem;\n    `,\n    inputContainer: css`\n      width: 100%;\n    `,\n    inputLabel: css`\n      font-size: 0.875rem;\n      font-weight: 500;\n      color: ${t(colors.gray[900], colors.gray[100])};\n      text-align: left;\n    `,\n    inputDescription: css`\n      font-size: 0.8rem;\n      color: ${t(colors.gray[500], colors.gray[400])};\n      margin: 0;\n      line-height: 1.3;\n      text-align: left;\n    `,\n    input: css`\n      appearance: none;\n      box-sizing: border-box;\n      width: 100%;\n      padding: 0.5rem 0.75rem;\n      border-radius: 0.375rem;\n      background-color: ${t(colors.gray[50], colors.darkGray[800])};\n      color: ${t(colors.gray[900], colors.gray[100])};\n      border: 1px solid ${t(colors.gray[200], colors.gray[800])};\n      font-size: 0.875rem;\n      font-family: ${fontFamily.mono};\n      transition: all 0.15s ease;\n\n      &::placeholder {\n        color: ${t(colors.gray[400], colors.gray[500])};\n      }\n\n      &:hover {\n        border-color: ${t(colors.gray[300], colors.gray[700])};\n      }\n\n      &:focus {\n        outline: none;\n        border-color: ${t(colors.gray[400], colors.gray[600])};\n        box-shadow: 0 0 0 3px ${t(colors.gray[200], colors.gray[800])};\n      }\n    `,\n    checkboxWrapper: css`\n      display: flex;\n      align-items: flex-start;\n      gap: 0.75rem;\n      cursor: pointer;\n      user-select: none;\n      padding: 0.375rem;\n      border-radius: 0.375rem;\n      transition: background-color 0.15s ease;\n\n      &:hover {\n        background-color: ${t(colors.gray[50], colors.darkGray[900])};\n      }\n    `,\n    checkboxContainer: css`\n      width: 100%;\n    `,\n    checkboxLabelContainer: css`\n      display: flex;\n      flex-direction: column;\n      gap: 0.25rem;\n      flex: 1;\n    `,\n    checkbox: css`\n      appearance: none;\n      width: 1.25rem;\n      height: 1.25rem;\n      border: 2px solid ${t(colors.gray[300], colors.gray[700])};\n      border-radius: 0.25rem;\n      background-color: ${t(colors.gray[50], colors.darkGray[800])};\n      display: grid;\n      place-items: center;\n      transition: all 0.15s ease;\n      flex-shrink: 0;\n      margin-top: 0.125rem;\n\n      &:hover {\n        border-color: ${t(colors.gray[400], colors.gray[600])};\n      }\n\n      &:checked {\n        background-color: ${t(colors.gray[900], colors.gray[100])};\n        border-color: ${t(colors.gray[900], colors.gray[100])};\n      }\n\n      &:checked::after {\n        content: '';\n        width: 0.4rem;\n        height: 0.6rem;\n        border: solid ${t('#fff', colors.gray[900])};\n        border-width: 0 2px 2px 0;\n        transform: rotate(45deg);\n        margin-top: -3px;\n      }\n    `,\n    checkboxLabel: css`\n      color: ${t(colors.gray[900], colors.gray[100])};\n      font-size: 0.875rem;\n      font-weight: 500;\n      line-height: 1.4;\n      text-align: left;\n    `,\n    checkboxDescription: css`\n      color: ${t(colors.gray[500], colors.gray[400])};\n      font-size: 0.8rem;\n      line-height: 1.3;\n      text-align: left;\n    `,\n    button: {\n      base: css`\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        font-family: ${tokens.font.fontFamily.sans};\n        font-size: 0.8rem;\n        font-weight: 500;\n        border-radius: 0.375rem;\n        padding: 0.375rem 0.75rem;\n        cursor: pointer;\n        transition:\n          background 0.15s,\n          color 0.15s,\n          border 0.15s,\n          box-shadow 0.15s;\n        outline: none;\n        border-width: 1px;\n        border-style: solid;\n      `,\n      variant(variant: ButtonVariant, outline?: boolean, ghost?: boolean) {\n        const v = buttonVariantColors[variant]\n        if (ghost) {\n          return css`\n            background: transparent;\n            color: ${t(v.bg, v.bg)};\n            border-color: transparent;\n            &:hover {\n              background: ${t(colors.gray[100], colors.darkGray[800])};\n            }\n            &:active {\n              background: ${t(colors.gray[200], colors.darkGray[700])};\n            }\n          `\n        }\n        if (outline) {\n          return css`\n            background: transparent;\n            color: ${t(v.bg, v.bg)};\n            border-color: ${t(v.bg, v.bg)};\n            &:hover {\n              background: ${t(colors.gray[50], colors.darkGray[800])};\n              border-color: ${t(v.hover, v.hover)};\n            }\n            &:active {\n              background: ${t(colors.gray[100], colors.darkGray[700])};\n              border-color: ${t(v.active, v.active)};\n            }\n          `\n        }\n        // Default solid button\n        return css`\n          background: ${t(v.bg, v.bg)};\n          color: ${t(v.text, v.text)};\n          border-color: ${t(v.border, v.border)};\n          &:hover {\n            background: ${t(v.hover, v.hover)};\n            border-color: ${t(v.hover, v.hover)};\n          }\n          &:active {\n            background: ${t(v.active, v.active)};\n            border-color: ${t(v.active, v.active)};\n          }\n        `\n      },\n    },\n    tag: {\n      dot: (color: keyof typeof tokens.colors) => css`\n        width: ${tokens.size[1.5]};\n        height: ${tokens.size[1.5]};\n        border-radius: ${tokens.border.radius.full};\n        background-color: ${t(\n          tokens.colors[color][500],\n          tokens.colors[color][500],\n        )};\n      `,\n      base: css`\n        display: flex;\n        gap: ${tokens.size[1.5]};\n        box-sizing: border-box;\n        height: ${tokens.size[6.5]};\n        background: ${t(colors.gray[50], colors.darkGray[500])};\n        color: ${t(colors.gray[700], colors.gray[300])};\n        border-radius: ${tokens.border.radius.sm};\n        font-size: ${font.size.sm};\n        padding: ${tokens.size[1]};\n        padding-left: ${tokens.size[1.5]};\n        align-items: center;\n        font-weight: ${font.weight.medium};\n        border: ${t('1px solid ' + colors.gray[300], '1px solid transparent')};\n        user-select: none;\n        position: relative;\n        &:focus-visible {\n          outline-offset: 2px;\n          outline: 2px solid ${t(colors.blue[700], colors.blue[800])};\n        }\n      `,\n      label: css`\n        font-size: ${font.size.xs};\n      `,\n      count: css`\n        font-size: ${font.size.xs};\n        padding: 0 5px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: ${t(colors.gray[500], colors.gray[400])};\n        background-color: ${t(colors.gray[200], colors.darkGray[300])};\n        border-radius: 2px;\n        font-variant-numeric: tabular-nums;\n        height: ${tokens.size[4.5]};\n      `,\n    },\n    tree: {\n      info: css`\n        color: ${t(colors.gray[500], colors.gray[500])};\n        font-size: ${font.size.xs};\n        margin-right: ${size[1]};\n      `,\n      actionButton: css`\n        background-color: transparent;\n        color: ${t(colors.gray[500], colors.gray[500])};\n        border: none;\n        display: inline-flex;\n        padding: 0px;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        width: ${size[3]};\n        height: ${size[3]};\n        position: relative;\n        z-index: 1;\n\n        &:hover svg {\n          color: ${t(colors.gray[600], colors.gray[400])};\n        }\n\n        &:focus-visible {\n          border-radius: ${border.radius.xs};\n          outline: 2px solid ${t(colors.blue[700], colors.blue[800])};\n          outline-offset: 2px;\n        }\n      `,\n      expanderContainer: css`\n        position: relative;\n      `,\n      expander: css`\n        position: absolute;\n        cursor: pointer;\n        left: -16px;\n        top: 3px;\n        & path {\n          stroke: ${t(colors.blue[400], colors.blue[300])};\n        }\n        & svg {\n          width: ${size[3]};\n          height: ${size[3]};\n        }\n\n        display: inline-flex;\n        align-items: center;\n        transition: all 0.1s ease;\n      `,\n      expandedLine: (hasBorder: boolean) => css`\n        display: block;\n        padding-left: 0.75rem;\n        margin-left: -0.7rem;\n        ${hasBorder\n          ? `border-left: 1px solid ${t(colors.blue[400], colors.blue[300])};`\n          : ''}\n      `,\n      collapsible: css`\n        cursor: pointer;\n        transition: all 0.2s ease;\n        &:hover {\n          background-color: ${t(colors.gray[100], colors.darkGray[700])};\n          border-radius: ${tokens.border.radius.sm};\n          padding: 0 ${tokens.size[1]};\n        }\n      `,\n      actions: css`\n        display: inline-flex;\n        margin-left: ${size[2]};\n        gap: ${size[2]};\n        align-items: center;\n        & svg {\n          height: 12px;\n          width: 12px;\n        }\n      `,\n      valueCollapsed: css`\n        color: ${t(colors.gray[500], colors.gray[400])};\n      `,\n      valueFunction: css`\n        color: ${t(colors.cyan[500], colors.cyan[400])};\n      `,\n      valueString: css`\n        color: ${t(colors.green[500], colors.green[400])};\n      `,\n      valueNumber: css`\n        color: ${t(colors.yellow[500], colors.yellow[400])};\n      `,\n      valueBoolean: css`\n        color: ${t(colors.pink[500], colors.pink[400])};\n      `,\n      valueNull: css`\n        color: ${t(colors.gray[500], colors.gray[400])};\n        font-style: italic;\n      `,\n      valueKey: css`\n        color: ${t(colors.blue[400], colors.blue[300])};\n      `,\n      valueBraces: css`\n        color: ${colors.gray[500]};\n      `,\n      valueContainer: (isRoot: boolean) => css`\n        display: block;\n        margin-left: ${isRoot ? '0' : '1rem'};\n\n        &:not(:hover) .actions {\n          display: none;\n        }\n\n        &:hover .actions {\n          display: inline-flex;\n        }\n      `,\n    },\n    header: {\n      row: css`\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: ${tokens.size[2]} ${tokens.size[2.5]};\n        gap: ${tokens.size[2.5]};\n        border-bottom: ${t(colors.gray[300], colors.darkGray[500])} 1px solid;\n        align-items: center;\n      `,\n      logoAndToggleContainer: css`\n        display: flex;\n        gap: ${tokens.size[3]};\n        align-items: center;\n        & > button {\n          padding: 0;\n          background: transparent;\n          border: none;\n          display: flex;\n          gap: ${size[0.5]};\n          flex-direction: column;\n        }\n      `,\n      logo: css`\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n        background-color: transparent;\n        border: none;\n        gap: ${tokens.size[0.5]};\n        padding: 0px;\n        &:hover {\n          opacity: 0.7;\n        }\n        &:focus-visible {\n          outline-offset: 4px;\n          border-radius: ${border.radius.xs};\n          outline: 2px solid ${colors.blue[800]};\n        }\n      `,\n      tanstackLogo: css`\n        font-size: ${font.size.md};\n        font-weight: ${font.weight.bold};\n        line-height: ${font.lineHeight.xs};\n        white-space: nowrap;\n        color: ${t(colors.gray[700], colors.gray[300])};\n      `,\n      flavorLogo: (flavorLight: string, flavorDark: string) => css`\n        font-weight: ${font.weight.semibold};\n        font-size: ${font.size.xs};\n        background: linear-gradient(to right, ${t(flavorLight, flavorDark)});\n        background-clip: text;\n        -webkit-background-clip: text;\n        line-height: 1;\n        -webkit-text-fill-color: transparent;\n        white-space: nowrap;\n      `,\n    },\n    section: {\n      main: css`\n        margin-bottom: 1.5rem;\n        padding: 1rem;\n        background-color: ${t(colors.gray[50], colors.darkGray[800])};\n        border: 1px solid ${t(colors.gray[200], colors.gray[800])};\n        border-radius: 0.5rem;\n        box-shadow: none;\n      `,\n      title: css`\n        font-size: 1rem;\n        font-weight: 600;\n        color: ${t(colors.gray[900], colors.gray[100])};\n        margin: 0 0 0.75rem 0;\n        padding-bottom: 0.5rem;\n        border-bottom: 1px solid ${t(colors.gray[200], colors.gray[800])};\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        text-align: left;\n      `,\n      icon: css`\n        height: 18px;\n        width: 18px;\n        & > svg {\n          height: 100%;\n          width: 100%;\n        }\n        color: ${t(colors.gray[700], colors.gray[400])};\n      `,\n      description: css`\n        color: ${t(colors.gray[500], colors.gray[400])};\n        font-size: 0.8rem;\n        margin: 0 0 1rem 0;\n        line-height: 1.4;\n        text-align: left;\n      `,\n    },\n    mainPanel: {\n      panel: (withPadding: boolean) => css`\n        padding: ${withPadding ? tokens.size[3] : 0};\n        background: ${t(colors.gray[50], colors.darkGray[700])};\n        overflow-y: auto;\n        height: 100%;\n      `,\n    },\n  }\n}\n\nexport function useStyles() {\n  const { theme } = useTheme()\n  const [styles, setStyles] = createSignal(stylesFactory(theme()))\n  createEffect(() => {\n    setStyles(stylesFactory(theme()))\n  })\n  return styles\n}\n"],"names":[],"mappings":";;;;AAOA,MAAM,sBAGF;AAAA,EACF,SAAS;AAAA,IACP,IAAI,OAAO,OAAO,KAAK,GAAG;AAAA,IAC1B,OAAO,OAAO,OAAO,KAAK,GAAG;AAAA,IAC7B,QAAQ,OAAO,OAAO,KAAK,GAAG;AAAA,IAC9B,MAAM;AAAA,IACN,QAAQ,OAAO,OAAO,KAAK,GAAG;AAAA,EAAA;AAAA,EAEhC,WAAW;AAAA,IACT,IAAI,OAAO,OAAO,KAAK,GAAG;AAAA,IAC1B,OAAO,OAAO,OAAO,KAAK,GAAG;AAAA,IAC7B,QAAQ,OAAO,OAAO,KAAK,GAAG;AAAA,IAC9B,MAAM,OAAO,OAAO,KAAK,GAAG;AAAA,IAC5B,QAAQ,OAAO,OAAO,KAAK,GAAG;AAAA,EAAA;AAAA,EAEhC,MAAM;AAAA,IACJ,IAAI,OAAO,OAAO,KAAK,GAAG;AAAA,IAC1B,OAAO,OAAO,OAAO,KAAK,GAAG;AAAA,IAC7B,QAAQ,OAAO,OAAO,KAAK,GAAG;AAAA,IAC9B,MAAM;AAAA,IACN,QAAQ,OAAO,OAAO,KAAK,GAAG;AAAA,EAAA;AAAA,EAEhC,SAAS;AAAA,IACP,IAAI,OAAO,OAAO,OAAO,GAAG;AAAA,IAC5B,OAAO,OAAO,OAAO,OAAO,GAAG;AAAA,IAC/B,QAAQ,OAAO,OAAO,OAAO,GAAG;AAAA,IAChC,MAAM;AAAA,IACN,QAAQ,OAAO,OAAO,OAAO,GAAG;AAAA,EAAA;AAAA,EAElC,QAAQ;AAAA,IACN,IAAI,OAAO,OAAO,IAAI,GAAG;AAAA,IACzB,OAAO,OAAO,OAAO,IAAI,GAAG;AAAA,IAC5B,QAAQ,OAAO,OAAO,IAAI,GAAG;AAAA,IAC7B,MAAM;AAAA,IACN,QAAQ,OAAO,OAAO,IAAI,GAAG;AAAA,EAAA;AAAA,EAE/B,SAAS;AAAA,IACP,IAAI,OAAO,OAAO,MAAM,GAAG;AAAA,IAC3B,OAAO,OAAO,OAAO,MAAM,GAAG;AAAA,IAC9B,QAAQ,OAAO,OAAO,MAAM,GAAG;AAAA,IAC/B,MAAM;AAAA,IACN,QAAQ,OAAO,OAAO,MAAM,GAAG;AAAA,EAAA;AAEnC;AACO,MAAM,MAAM,OAAO;AAC1B,MAAM,gBAAgB,CAAC,QAAe,WAAW;AAC/C,QAAM,EAAE,QAAQ,MAAM,MAAM,WAAW;AACvC,QAAM,EAAE,eAAe;AAEvB,QAAM,IAAI,CAAC,OAAe,SAAkB,UAAU,UAAU,QAAQ;AAExE,QAAM,cAAc;AAEpB,SAAO;AAAA,IACL,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAMK,KAAK,EAAE,CAAC;AAAA,gBACP,KAAK,EAAE,CAAC;AAAA,qBACH,WAAW,IAAI;AAAA,aACvB,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOzB,eAAe;AAAA;AAAA,mBAEA,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,IAK1B,iBAAiB;AAAA;AAAA;AAAA,IAGjB,aAAa;AAAA;AAAA;AAAA,eAGF,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,IAGhD,mBAAmB;AAAA;AAAA,eAER,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKhD,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKc,EAAE,OAAO,KAAK,EAAE,GAAG,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA,eACnD,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA,0BAC1B,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAYvC,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKrC,OAAO,KAAK,GAAG,CAAC;AAAA,gCACR,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,IAGjE,cAAc;AAAA;AAAA,mBAEC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,IAK1B,gBAAgB;AAAA;AAAA;AAAA,IAGhB,YAAY;AAAA;AAAA;AAAA,eAGD,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,IAGhD,kBAAkB;AAAA;AAAA,eAEP,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKhD,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAMe,EAAE,OAAO,KAAK,EAAE,GAAG,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA,eACnD,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA,0BAC1B,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA,qBAE1C,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA,iBAInB,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,wBAI9B,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKrC,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA,gCAC7B,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,IAGjE,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAWO,EAAE,OAAO,KAAK,EAAE,GAAG,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,IAGhE,mBAAmB;AAAA;AAAA;AAAA,IAGnB,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMxB,UAAU;AAAA;AAAA;AAAA;AAAA,0BAIY,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA,0BAErC,EAAE,OAAO,KAAK,EAAE,GAAG,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQ1C,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,4BAIjC,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA,wBACzC,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAOrC,EAAE,QAAQ,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAM/C,eAAe;AAAA,eACJ,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMhD,qBAAqB;AAAA,eACV,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKhD,QAAQ;AAAA,MACN,MAAM;AAAA;AAAA;AAAA;AAAA,uBAIW,OAAO,KAAK,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAe5C,QAAQ,SAAwB,SAAmB,OAAiB;AAClE,cAAM,IAAI,oBAAoB,OAAO;AACrC,YAAI,OAAO;AACT,iBAAO;AAAA;AAAA,qBAEI,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC;AAAA;AAAA;AAAA,4BAGN,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGzC,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,QAG7D;AACA,YAAI,SAAS;AACX,iBAAO;AAAA;AAAA,qBAEI,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC;AAAA,4BACN,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC;AAAA;AAAA,4BAEb,EAAE,OAAO,KAAK,EAAE,GAAG,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA,8BACtC,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC;AAAA;AAAA;AAAA,4BAGrB,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA,8BACvC,EAAE,EAAE,QAAQ,EAAE,MAAM,CAAC;AAAA;AAAA;AAAA,QAG3C;AAEA,eAAO;AAAA,wBACS,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC;AAAA,mBAClB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC;AAAA,0BACV,EAAE,EAAE,QAAQ,EAAE,MAAM,CAAC;AAAA;AAAA,0BAErB,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC;AAAA,4BACjB,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC;AAAA;AAAA;AAAA,0BAGrB,EAAE,EAAE,QAAQ,EAAE,MAAM,CAAC;AAAA,4BACnB,EAAE,EAAE,QAAQ,EAAE,MAAM,CAAC;AAAA;AAAA;AAAA,MAG3C;AAAA,IAAA;AAAA,IAEF,KAAK;AAAA,MACH,KAAK,CAAC,UAAsC;AAAA,iBACjC,OAAO,KAAK,GAAG,CAAC;AAAA,kBACf,OAAO,KAAK,GAAG,CAAC;AAAA,yBACT,OAAO,OAAO,OAAO,IAAI;AAAA,4BACtB;AAAA,QAClB,OAAO,OAAO,KAAK,EAAE,GAAG;AAAA,QACxB,OAAO,OAAO,KAAK,EAAE,GAAG;AAAA,MAAA,CACzB;AAAA;AAAA,MAEH,MAAM;AAAA;AAAA,eAEG,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA,kBAEb,OAAO,KAAK,GAAG,CAAC;AAAA,sBACZ,EAAE,OAAO,KAAK,EAAE,GAAG,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA,iBAC7C,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA,yBAC7B,OAAO,OAAO,OAAO,EAAE;AAAA,qBAC3B,KAAK,KAAK,EAAE;AAAA,mBACd,OAAO,KAAK,CAAC,CAAC;AAAA,wBACT,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA,uBAEjB,KAAK,OAAO,MAAM;AAAA,kBACvB,EAAE,eAAe,OAAO,KAAK,GAAG,GAAG,uBAAuB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,+BAK9C,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,MAG9D,OAAO;AAAA,qBACQ,KAAK,KAAK,EAAE;AAAA;AAAA,MAE3B,OAAO;AAAA,qBACQ,KAAK,KAAK,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKhB,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA,4BAC1B,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,kBAGnD,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA,IAAA;AAAA,IAG9B,MAAM;AAAA,MACJ,MAAM;AAAA,iBACK,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA,qBACjC,KAAK,KAAK,EAAE;AAAA,wBACT,KAAK,CAAC,CAAC;AAAA;AAAA,MAEzB,cAAc;AAAA;AAAA,iBAEH,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAOrC,KAAK,CAAC,CAAC;AAAA,kBACN,KAAK,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKN,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,2BAI7B,OAAO,OAAO,EAAE;AAAA,+BACZ,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,MAI9D,mBAAmB;AAAA;AAAA;AAAA,MAGnB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMI,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,mBAGtC,KAAK,CAAC,CAAC;AAAA,oBACN,KAAK,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOrB,cAAc,CAAC,cAAuB;AAAA;AAAA;AAAA;AAAA,UAIlC,YACE,0BAA0B,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC,MAC/D,EAAE;AAAA;AAAA,MAER,aAAa;AAAA;AAAA;AAAA;AAAA,8BAIW,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA,2BAC5C,OAAO,OAAO,OAAO,EAAE;AAAA,uBAC3B,OAAO,KAAK,CAAC,CAAC;AAAA;AAAA;AAAA,MAG/B,SAAS;AAAA;AAAA,uBAEQ,KAAK,CAAC,CAAC;AAAA,eACf,KAAK,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOhB,gBAAgB;AAAA,iBACL,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA,MAEhD,eAAe;AAAA,iBACJ,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA,MAEhD,aAAa;AAAA,iBACF,EAAE,OAAO,MAAM,GAAG,GAAG,OAAO,MAAM,GAAG,CAAC,CAAC;AAAA;AAAA,MAElD,aAAa;AAAA,iBACF,EAAE,OAAO,OAAO,GAAG,GAAG,OAAO,OAAO,GAAG,CAAC,CAAC;AAAA;AAAA,MAEpD,cAAc;AAAA,iBACH,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA,MAEhD,WAAW;AAAA,iBACA,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,MAGhD,UAAU;AAAA,iBACC,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA,MAEhD,aAAa;AAAA,iBACF,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA,MAE3B,gBAAgB,CAAC,WAAoB;AAAA;AAAA,uBAEpB,SAAS,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,IAWxC,QAAQ;AAAA,MACN,KAAK;AAAA;AAAA;AAAA;AAAA,mBAIQ,OAAO,KAAK,CAAC,CAAC,IAAI,OAAO,KAAK,GAAG,CAAC;AAAA,eACtC,OAAO,KAAK,GAAG,CAAC;AAAA,yBACN,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,MAG5D,wBAAwB;AAAA;AAAA,eAEf,OAAO,KAAK,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAOZ,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,MAIpB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAMG,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAOJ,OAAO,OAAO,EAAE;AAAA,+BACZ,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA,MAGzC,cAAc;AAAA,qBACC,KAAK,KAAK,EAAE;AAAA,uBACV,KAAK,OAAO,IAAI;AAAA,uBAChB,KAAK,WAAW,EAAE;AAAA;AAAA,iBAExB,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA,MAEhD,YAAY,CAAC,aAAqB,eAAuB;AAAA,uBACxC,KAAK,OAAO,QAAQ;AAAA,qBACtB,KAAK,KAAK,EAAE;AAAA,gDACe,EAAE,aAAa,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,IAQtE,SAAS;AAAA,MACP,MAAM;AAAA;AAAA;AAAA,4BAGgB,EAAE,OAAO,KAAK,EAAE,GAAG,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA,4BACxC,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,MAI3D,OAAO;AAAA;AAAA;AAAA,iBAGI,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,mCAGnB,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMlE,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAOK,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA,MAEhD,aAAa;AAAA,iBACF,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,IAOlD,WAAW;AAAA,MACT,OAAO,CAAC,gBAAyB;AAAA,mBACpB,cAAc,OAAO,KAAK,CAAC,IAAI,CAAC;AAAA,sBAC7B,EAAE,OAAO,KAAK,EAAE,GAAG,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAI1D;AAEJ;AAEO,SAAS,YAAY;AAC1B,QAAM,EAAE,MAAA,IAAU,SAAA;AAClB,QAAM,CAAC,QAAQ,SAAS,IAAI,aAAa,cAAc,MAAA,CAAO,CAAC;AAC/D,eAAa,MAAM;AACjB,cAAU,cAAc,MAAA,CAAO,CAAC;AAAA,EAClC,CAAC;AACD,SAAO;AACT;"}
+{"version":3,"file":"use-styles.js","names":[],"sources":["../../../src/styles/use-styles.ts"],"sourcesContent":["import * as goober from 'goober'\nimport { createEffect, createSignal } from 'solid-js'\nimport { useTheme } from '../components/theme'\nimport { tokens } from './tokens'\n\nimport type { TanStackDevtoolsTheme } from '../components/theme'\nimport type { ButtonVariant } from '../components/button'\n\nconst buttonVariantColors: Record<\n  ButtonVariant,\n  {\n    bg: { light: string; dark: string }\n    hover: { light: string; dark: string }\n    active: { light: string; dark: string }\n    text: { light: string; dark: string }\n    border: { light: string; dark: string }\n    outline: { light: string; dark: string }\n    outlineHover: { light: string; dark: string }\n  }\n> = {\n  primary: {\n    bg: { light: tokens.colors.gray[900], dark: tokens.colors.gray[100] },\n    hover: { light: tokens.colors.gray[800], dark: tokens.colors.gray[200] },\n    active: { light: tokens.colors.gray[700], dark: tokens.colors.gray[300] },\n    text: { light: '#fff', dark: tokens.colors.gray[900] },\n    border: { light: tokens.colors.gray[800], dark: tokens.colors.gray[200] },\n    outline: {\n      light: tokens.colors.gray[900],\n      dark: tokens.colors.gray[100],\n    },\n    outlineHover: {\n      light: tokens.colors.gray[800],\n      dark: tokens.colors.gray[200],\n    },\n  },\n  secondary: {\n    bg: { light: tokens.colors.gray[100], dark: tokens.colors.gray[100] },\n    hover: { light: tokens.colors.gray[200], dark: tokens.colors.gray[200] },\n    active: { light: tokens.colors.gray[300], dark: tokens.colors.gray[300] },\n    text: { light: tokens.colors.gray[900], dark: tokens.colors.gray[900] },\n    border: { light: tokens.colors.gray[300], dark: tokens.colors.gray[300] },\n    outline: {\n      light: tokens.colors.gray[700],\n      dark: tokens.colors.gray[300],\n    },\n    outlineHover: {\n      light: tokens.colors.gray[800],\n      dark: tokens.colors.gray[200],\n    },\n  },\n  info: {\n    bg: { light: tokens.colors.blue[500], dark: tokens.colors.blue[500] },\n    hover: { light: tokens.colors.blue[600], dark: tokens.colors.blue[600] },\n    active: { light: tokens.colors.blue[700], dark: tokens.colors.blue[700] },\n    text: { light: '#fff', dark: '#fff' },\n    border: { light: tokens.colors.blue[500], dark: tokens.colors.blue[500] },\n    outline: {\n      light: tokens.colors.blue[700],\n      dark: tokens.colors.blue[300],\n    },\n    outlineHover: {\n      light: tokens.colors.blue[600],\n      dark: tokens.colors.blue[200],\n    },\n  },\n  warning: {\n    bg: { light: tokens.colors.yellow[500], dark: tokens.colors.yellow[500] },\n    hover: {\n      light: tokens.colors.yellow[600],\n      dark: tokens.colors.yellow[600],\n    },\n    active: {\n      light: tokens.colors.yellow[700],\n      dark: tokens.colors.yellow[700],\n    },\n    text: { light: '#fff', dark: '#fff' },\n    border: {\n      light: tokens.colors.yellow[500],\n      dark: tokens.colors.yellow[500],\n    },\n    outline: {\n      light: tokens.colors.yellow[700],\n      dark: tokens.colors.yellow[300],\n    },\n    outlineHover: {\n      light: tokens.colors.yellow[600],\n      dark: tokens.colors.yellow[200],\n    },\n  },\n  danger: {\n    bg: { light: tokens.colors.red[500], dark: tokens.colors.red[500] },\n    hover: { light: tokens.colors.red[600], dark: tokens.colors.red[600] },\n    active: { light: tokens.colors.red[700], dark: tokens.colors.red[700] },\n    text: { light: '#fff', dark: '#fff' },\n    border: { light: tokens.colors.red[500], dark: tokens.colors.red[500] },\n    outline: {\n      light: tokens.colors.red[700],\n      dark: tokens.colors.red[300],\n    },\n    outlineHover: {\n      light: tokens.colors.red[600],\n      dark: tokens.colors.red[200],\n    },\n  },\n  success: {\n    bg: { light: tokens.colors.green[500], dark: tokens.colors.green[500] },\n    hover: { light: tokens.colors.green[600], dark: tokens.colors.green[600] },\n    active: { light: tokens.colors.green[700], dark: tokens.colors.green[700] },\n    text: { light: '#fff', dark: '#fff' },\n    border: { light: tokens.colors.green[500], dark: tokens.colors.green[500] },\n    outline: {\n      light: tokens.colors.green[700],\n      dark: tokens.colors.green[300],\n    },\n    outlineHover: {\n      light: tokens.colors.green[600],\n      dark: tokens.colors.green[200],\n    },\n  },\n}\nexport const css = goober.css\nconst stylesFactory = (theme: TanStackDevtoolsTheme) => {\n  const { colors, font, size, border } = tokens\n  const { fontFamily } = font\n\n  const t = (light: string, dark: string) => (theme === 'light' ? light : dark)\n  const buildButtonVariant = (variant: ButtonVariant) => {\n    const v = buttonVariantColors[variant]\n    const outlineColor = t(v.outline.light, v.outline.dark)\n    const outlineHoverColor = t(v.outlineHover.light, v.outlineHover.dark)\n    const solidBg = t(v.bg.light, v.bg.dark)\n    const solidHover = t(v.hover.light, v.hover.dark)\n    const solidActive = t(v.active.light, v.active.dark)\n    const solidText = t(v.text.light, v.text.dark)\n    const solidBorder = t(v.border.light, v.border.dark)\n\n    return {\n      ghost: css`\n        background: transparent;\n        color: ${outlineColor};\n        border-color: transparent;\n        &:hover {\n          background: ${t(colors.gray[100], colors.darkGray[800])};\n          color: ${outlineHoverColor};\n        }\n        &:active {\n          background: ${t(colors.gray[200], colors.darkGray[700])};\n          color: ${outlineHoverColor};\n        }\n      `,\n      outline: css`\n        background: transparent;\n        color: ${outlineColor};\n        border-color: ${outlineColor};\n        &:hover {\n          background: ${t(colors.gray[50], colors.darkGray[800])};\n          color: ${outlineHoverColor};\n          border-color: ${outlineHoverColor};\n        }\n        &:active {\n          background: ${t(colors.gray[100], colors.darkGray[700])};\n          color: ${outlineHoverColor};\n          border-color: ${outlineHoverColor};\n        }\n      `,\n      solid: css`\n        background: ${solidBg};\n        color: ${solidText};\n        border-color: ${solidBorder};\n        &:hover {\n          background: ${solidHover};\n          border-color: ${solidHover};\n          box-shadow: ${t(\n            tokens.shadow.xs('rgb(0 0 0 / 0.12)'),\n            tokens.shadow.xs('rgb(0 0 0 / 0.5)'),\n          )};\n        }\n        &:active {\n          background: ${solidActive};\n          border-color: ${solidActive};\n          box-shadow: ${t(\n            tokens.shadow.inner('rgb(0 0 0 / 0.2)'),\n            tokens.shadow.inner('rgb(0 0 0 / 0.6)'),\n          )};\n        }\n      `,\n    }\n  }\n  const buttonVariants: Record<\n    ButtonVariant,\n    { ghost: string; outline: string; solid: string }\n  > = {\n    primary: buildButtonVariant('primary'),\n    secondary: buildButtonVariant('secondary'),\n    info: buildButtonVariant('info'),\n    warning: buildButtonVariant('warning'),\n    danger: buildButtonVariant('danger'),\n    success: buildButtonVariant('success'),\n  }\n\n  const wrapperSize = 320\n\n  return {\n    logo: css`\n      cursor: pointer;\n      display: flex;\n      flex-direction: column;\n      background-color: transparent;\n      border: none;\n      width: ${size[12]};\n      height: ${size[12]};\n      font-family: ${fontFamily.sans};\n      gap: ${tokens.size[0.5]};\n      padding: 0;\n      &:hover {\n        opacity: 0.7;\n      }\n    `,\n\n    selectWrapper: css`\n      width: 100%;\n      max-width: ${wrapperSize}px;\n      display: flex;\n      flex-direction: column;\n      gap: 0.375rem;\n    `,\n    selectContainer: css`\n      width: 100%;\n    `,\n    selectLabel: css`\n      font-size: 0.875rem;\n      font-weight: 500;\n      color: ${t(colors.gray[900], colors.gray[100])};\n      text-align: left;\n    `,\n    selectDescription: css`\n      font-size: 0.8rem;\n      color: ${t(colors.gray[500], colors.gray[400])};\n      margin: 0;\n      line-height: 1.3;\n      text-align: left;\n    `,\n    select: css`\n      appearance: none;\n      width: 100%;\n      padding: 0.5rem 3rem 0.5rem 0.75rem;\n      border-radius: 0.375rem;\n      background-color: ${t(colors.gray[50], colors.darkGray[800])};\n      color: ${t(colors.gray[900], colors.gray[100])};\n      border: 1px solid ${t(colors.gray[200], colors.gray[800])};\n      font-size: 0.875rem;\n      transition: all 0.15s ease;\n      cursor: pointer;\n\n      /* Custom arrow */\n      background-image: url(\"data:image/svg+xml;utf8,<svg fill='%236b7280' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>\");\n      background-repeat: no-repeat;\n      background-position: right 0.75rem center;\n      background-size: 1.25rem;\n\n      &:hover {\n        border-color: ${t(colors.gray[300], colors.gray[700])};\n      }\n\n      &:focus {\n        outline: none;\n        border-color: ${colors.gray[400]};\n        box-shadow: 0 0 0 3px ${t(colors.gray[200], colors.gray[800])};\n      }\n    `,\n    inputWrapper: css`\n      width: 100%;\n      max-width: ${wrapperSize}px;\n      display: flex;\n      flex-direction: column;\n      gap: 0.375rem;\n    `,\n    inputContainer: css`\n      width: 100%;\n    `,\n    inputLabel: css`\n      font-size: 0.875rem;\n      font-weight: 500;\n      color: ${t(colors.gray[900], colors.gray[100])};\n      text-align: left;\n    `,\n    inputDescription: css`\n      font-size: 0.8rem;\n      color: ${t(colors.gray[500], colors.gray[400])};\n      margin: 0;\n      line-height: 1.3;\n      text-align: left;\n    `,\n    input: css`\n      appearance: none;\n      box-sizing: border-box;\n      width: 100%;\n      padding: 0.5rem 0.75rem;\n      border-radius: 0.375rem;\n      background-color: ${t(colors.gray[50], colors.darkGray[800])};\n      color: ${t(colors.gray[900], colors.gray[100])};\n      border: 1px solid ${t(colors.gray[200], colors.gray[800])};\n      font-size: 0.875rem;\n      font-family: ${fontFamily.mono};\n      transition: all 0.15s ease;\n\n      &::placeholder {\n        color: ${t(colors.gray[400], colors.gray[500])};\n      }\n\n      &:hover {\n        border-color: ${t(colors.gray[300], colors.gray[700])};\n      }\n\n      &:focus {\n        outline: none;\n        border-color: ${t(colors.gray[400], colors.gray[600])};\n        box-shadow: 0 0 0 3px ${t(colors.gray[200], colors.gray[800])};\n      }\n    `,\n    checkboxWrapper: css`\n      display: flex;\n      align-items: flex-start;\n      gap: 0.75rem;\n      cursor: pointer;\n      user-select: none;\n      padding: 0.375rem;\n      border-radius: 0.375rem;\n      transition: background-color 0.15s ease;\n\n      &:hover {\n        background-color: ${t(colors.gray[50], colors.darkGray[900])};\n      }\n    `,\n    checkboxContainer: css`\n      width: 100%;\n    `,\n    checkboxLabelContainer: css`\n      display: flex;\n      flex-direction: column;\n      gap: 0.25rem;\n      flex: 1;\n    `,\n    checkbox: css`\n      appearance: none;\n      width: 1.25rem;\n      height: 1.25rem;\n      border: 2px solid ${t(colors.gray[300], colors.gray[700])};\n      border-radius: 0.25rem;\n      background-color: ${t(colors.gray[50], colors.darkGray[800])};\n      display: grid;\n      place-items: center;\n      transition: all 0.15s ease;\n      flex-shrink: 0;\n      margin-top: 0.125rem;\n\n      &:hover {\n        border-color: ${t(colors.gray[400], colors.gray[600])};\n      }\n\n      &:checked {\n        background-color: ${t(colors.gray[900], colors.gray[100])};\n        border-color: ${t(colors.gray[900], colors.gray[100])};\n      }\n\n      &:checked::after {\n        content: '';\n        width: 0.4rem;\n        height: 0.6rem;\n        border: solid ${t('#fff', colors.gray[900])};\n        border-width: 0 2px 2px 0;\n        transform: rotate(45deg);\n        margin-top: -3px;\n      }\n    `,\n    checkboxLabel: css`\n      color: ${t(colors.gray[900], colors.gray[100])};\n      font-size: 0.875rem;\n      font-weight: 500;\n      line-height: 1.4;\n      text-align: left;\n    `,\n    checkboxDescription: css`\n      color: ${t(colors.gray[500], colors.gray[400])};\n      font-size: 0.8rem;\n      line-height: 1.3;\n      text-align: left;\n    `,\n    button: {\n      base: css`\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        font-family: ${tokens.font.fontFamily.sans};\n        font-size: 0.8rem;\n        font-weight: 500;\n        border-radius: 0.375rem;\n        padding: 0.375rem 0.75rem;\n        cursor: pointer;\n        transition:\n          background 0.15s,\n          color 0.15s,\n          border 0.15s,\n          box-shadow 0.15s;\n        outline: none;\n        border-width: 1px;\n        border-style: solid;\n      `,\n      variant(variant: ButtonVariant, outline?: boolean, ghost?: boolean) {\n        const v = buttonVariants[variant]\n        if (ghost) {\n          return v.ghost\n        }\n        if (outline) {\n          return v.outline\n        }\n        return v.solid\n      },\n    },\n    tag: {\n      dot: (color: keyof typeof tokens.colors) => css`\n        width: ${tokens.size[1.5]};\n        height: ${tokens.size[1.5]};\n        border-radius: ${tokens.border.radius.full};\n        background-color: ${t(\n          tokens.colors[color][500],\n          tokens.colors[color][500],\n        )};\n      `,\n      base: css`\n        display: flex;\n        gap: ${tokens.size[1.5]};\n        box-sizing: border-box;\n        height: ${tokens.size[6.5]};\n        background: ${t(colors.gray[50], colors.darkGray[500])};\n        color: ${t(colors.gray[700], colors.gray[300])};\n        border-radius: ${tokens.border.radius.sm};\n        font-size: ${font.size.sm};\n        padding: ${tokens.size[1]};\n        padding-left: ${tokens.size[1.5]};\n        align-items: center;\n        font-weight: ${font.weight.medium};\n        border: ${t('1px solid ' + colors.gray[300], '1px solid transparent')};\n        user-select: none;\n        position: relative;\n        &:focus-visible {\n          outline-offset: 2px;\n          outline: 2px solid ${t(colors.blue[700], colors.blue[800])};\n        }\n      `,\n      label: css`\n        font-size: ${font.size.xs};\n      `,\n      count: css`\n        font-size: ${font.size.xs};\n        padding: 0 5px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: ${t(colors.gray[500], colors.gray[400])};\n        background-color: ${t(colors.gray[200], colors.darkGray[300])};\n        border-radius: 2px;\n        font-variant-numeric: tabular-nums;\n        height: ${tokens.size[4.5]};\n      `,\n    },\n    tree: {\n      info: css`\n        color: ${t(colors.gray[500], colors.gray[500])};\n        font-size: ${font.size.xs};\n        margin-right: ${size[1]};\n      `,\n      actionButton: css`\n        background-color: transparent;\n        color: ${t(colors.gray[500], colors.gray[500])};\n        border: none;\n        display: inline-flex;\n        padding: 0;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        width: ${size[3]};\n        height: ${size[3]};\n        position: relative;\n        z-index: 1;\n\n        &:hover svg {\n          color: ${t(colors.gray[600], colors.gray[400])};\n        }\n\n        &:focus-visible {\n          border-radius: ${border.radius.xs};\n          outline: 2px solid ${t(colors.blue[700], colors.blue[800])};\n          outline-offset: 2px;\n        }\n      `,\n      expanderContainer: css`\n        position: relative;\n      `,\n      expander: css`\n        position: absolute;\n        cursor: pointer;\n        left: -16px;\n        top: 3px;\n        & path {\n          stroke: ${t(colors.blue[400], colors.blue[300])};\n        }\n        & svg {\n          width: ${size[3]};\n          height: ${size[3]};\n        }\n\n        display: inline-flex;\n        align-items: center;\n        transition: all 0.1s ease;\n      `,\n      expandedLine: (hasBorder: boolean) => css`\n        display: block;\n        padding-left: 0.75rem;\n        margin-left: -0.7rem;\n        ${hasBorder\n          ? `border-left: 1px solid ${t(colors.blue[400], colors.blue[300])};`\n          : ''}\n      `,\n      collapsible: css`\n        cursor: pointer;\n        transition: all 0.2s ease;\n        &:hover {\n          background-color: ${t(colors.gray[100], colors.darkGray[700])};\n          border-radius: ${tokens.border.radius.sm};\n          padding: 0 ${tokens.size[1]};\n        }\n      `,\n      actions: css`\n        display: inline-flex;\n        margin-left: ${size[2]};\n        gap: ${size[2]};\n        align-items: center;\n        & svg {\n          height: 12px;\n          width: 12px;\n        }\n      `,\n      valueCollapsed: css`\n        color: ${t(colors.gray[500], colors.gray[400])};\n      `,\n      valueFunction: css`\n        color: ${t(colors.cyan[500], colors.cyan[400])};\n      `,\n      valueString: css`\n        color: ${t(colors.green[500], colors.green[400])};\n      `,\n      valueNumber: css`\n        color: ${t(colors.yellow[500], colors.yellow[400])};\n      `,\n      valueBoolean: css`\n        color: ${t(colors.pink[500], colors.pink[400])};\n      `,\n      valueNull: css`\n        color: ${t(colors.gray[500], colors.gray[400])};\n        font-style: italic;\n      `,\n      valueKey: css`\n        color: ${t(colors.blue[400], colors.blue[300])};\n      `,\n      valueBraces: css`\n        color: ${colors.gray[500]};\n      `,\n      valueContainer: (isRoot: boolean) => css`\n        display: block;\n        margin-left: ${isRoot ? '0' : '1rem'};\n\n        &:not(:hover) .actions {\n          display: none;\n        }\n\n        &:hover .actions {\n          display: inline-flex;\n        }\n      `,\n    },\n    header: {\n      row: css`\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: ${tokens.size[2]} ${tokens.size[2.5]};\n        gap: ${tokens.size[2.5]};\n        border-bottom: ${t(colors.gray[300], colors.darkGray[500])} 1px solid;\n        align-items: center;\n      `,\n      logoAndToggleContainer: css`\n        display: flex;\n        gap: ${tokens.size[3]};\n        align-items: center;\n        & > button {\n          padding: 0;\n          background: transparent;\n          border: none;\n          display: flex;\n          gap: ${size[0.5]};\n          flex-direction: column;\n        }\n      `,\n      logo: css`\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n        background-color: transparent;\n        border: none;\n        gap: ${tokens.size[0.5]};\n        padding: 0;\n        &:hover {\n          opacity: 0.7;\n        }\n        &:focus-visible {\n          outline-offset: 4px;\n          border-radius: ${border.radius.xs};\n          outline: 2px solid ${colors.blue[800]};\n        }\n      `,\n      tanstackLogo: css`\n        font-size: ${font.size.md};\n        font-weight: ${font.weight.bold};\n        line-height: ${font.lineHeight.xs};\n        white-space: nowrap;\n        color: ${t(colors.gray[700], colors.gray[300])};\n      `,\n      flavorLogo: (flavorLight: string, flavorDark: string) => css`\n        font-weight: ${font.weight.semibold};\n        font-size: ${font.size.xs};\n        background: linear-gradient(to right, ${t(flavorLight, flavorDark)});\n        background-clip: text;\n        -webkit-background-clip: text;\n        line-height: 1;\n        -webkit-text-fill-color: transparent;\n        white-space: nowrap;\n      `,\n    },\n    section: {\n      main: css`\n        margin-bottom: 1.5rem;\n        padding: 1rem;\n        background-color: ${t(colors.gray[50], colors.darkGray[800])};\n        border: 1px solid ${t(colors.gray[200], colors.gray[800])};\n        border-radius: 0.5rem;\n        box-shadow: none;\n      `,\n      title: css`\n        font-size: 1rem;\n        font-weight: 600;\n        color: ${t(colors.gray[900], colors.gray[100])};\n        margin: 0 0 0.75rem 0;\n        padding-bottom: 0.5rem;\n        border-bottom: 1px solid ${t(colors.gray[200], colors.gray[800])};\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        text-align: left;\n      `,\n      icon: css`\n        height: 18px;\n        width: 18px;\n        & > svg {\n          height: 100%;\n          width: 100%;\n        }\n        color: ${t(colors.gray[700], colors.gray[400])};\n      `,\n      description: css`\n        color: ${t(colors.gray[500], colors.gray[400])};\n        font-size: 0.8rem;\n        margin: 0 0 1rem 0;\n        line-height: 1.4;\n        text-align: left;\n      `,\n    },\n    mainPanel: {\n      panel: (withPadding: boolean) => css`\n        padding: ${withPadding ? tokens.size[3] : 0};\n        background: ${t(colors.gray[50], colors.darkGray[700])};\n        overflow-y: auto;\n        height: 100%;\n      `,\n    },\n  }\n}\n\nexport function useStyles() {\n  const { theme } = useTheme()\n  const [styles, setStyles] = createSignal(stylesFactory(theme()))\n  createEffect(() => {\n    setStyles(stylesFactory(theme()))\n  })\n  return styles\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools-ui",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "TanStack Devtools UI is a set of UI components for building devtool panels for your application.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -53,7 +53,7 @@
     "solid-js": ">=1.9.7"
   },
   "devDependencies": {
-    "vite-plugin-solid": "^2.11.8"
+    "vite-plugin-solid": "^2.11.11"
   },
   "scripts": {
     "clean": "premove ./build ./dist",

package/src/components/button.tsx

@@ -1,6 +1,8 @@
-import { splitProps } from 'solid-js'
+import { createMemo } from 'solid-js'
 import clsx from 'clsx'
 import { useStyles } from '../styles/use-styles'
+
+// types
 import type { JSX } from 'solid-js'
 
 export type ButtonVariant =
@@ -17,26 +19,21 @@ type ButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
   children?: any
   className?: string
 }
-
 export function Button(props: ButtonProps) {
   const styles = useStyles()
-  const [local, rest] = splitProps(props, [
-    'variant',
-    'outline',
-    'ghost',
-    'children',
-    'className',
-  ])
-  const variant = local.variant || 'primary'
-  const classes = clsx(
-    styles().button.base,
-    styles().button.variant(variant, local.outline, local.ghost),
-    local.className,
-  )
+
+  const classes = createMemo(() => {
+    const variant = props.variant || 'primary'
+    return clsx(
+      styles().button.base,
+      styles().button.variant(variant, props.outline, props.ghost),
+      props.className,
+    )
+  })
 
   return (
-    <button {...rest} class={classes}>
-      {local.children}
+    <button {...props} class={classes()}>
+      {props.children}
     </button>
   )
 }

package/src/components/icons.tsx

@@ -1,5 +1,7 @@
 // import { Show, createUniqueId } from 'solid-js'
 
+import type { TanStackDevtoolsTheme } from './theme'
+
 /* export function Search() {
   return (
     <svg
@@ -39,7 +41,7 @@ export function Trash() {
     </svg>
   )
 } */
-/* 
+/*
 export function ChevronDown() {
   return (
     <svg
@@ -466,7 +468,7 @@ export function Link() {
     </svg>
   )
 }
-/* 
+/*
 
 export function Pencil() {
   return (
@@ -696,7 +698,7 @@ export function PiP() {
   )
 }
 
-export function CopiedCopier(props: { theme: 'light' | 'dark' }) {
+export function CopiedCopier(props: { theme: TanStackDevtoolsTheme }) {
   return (
     <svg
       width="24"
@@ -735,7 +737,7 @@ export function ErrorCopier() {
     </svg>
   )
 }
-/* 
+/*
 export function List() {
   return (
     <svg
@@ -755,7 +757,7 @@ export function List() {
   )
 }
 
-export function Check(props: { checked: boolean; theme: 'light' | 'dark' }) {
+export function Check(props: { checked: boolean; theme: TanStackDevtoolsTheme }) {
   return (
     <>
       <Show when={props.checked}>
@@ -884,7 +886,7 @@ export function PauseCircle() {
     </svg>
   )
 } */
-/* 
+/*
 export function TanstackLogo() {
   const id = createUniqueId()
   return (

package/src/components/theme.tsx

@@ -1,19 +1,19 @@
 import { createContext, createEffect, createSignal, useContext } from 'solid-js'
 import type { Accessor, JSX } from 'solid-js'
 
-export type Theme = 'light' | 'dark'
+export type TanStackDevtoolsTheme = 'light' | 'dark'
 
 type ThemeContextValue = {
-  theme: Accessor<Theme>
-  setTheme: (theme: Theme) => void
+  theme: Accessor<TanStackDevtoolsTheme>
+  setTheme: (theme: TanStackDevtoolsTheme) => void
 }
 const ThemeContext = createContext<ThemeContextValue | undefined>(undefined)
 
 export const ThemeContextProvider = (props: {
   children: JSX.Element
-  theme: Theme
+  theme: TanStackDevtoolsTheme
 }) => {
-  const [theme, setTheme] = createSignal<Theme>(props.theme)
+  const [theme, setTheme] = createSignal<TanStackDevtoolsTheme>(props.theme)
   createEffect(() => {
     setTheme(props.theme)
   })

package/src/index.ts

@@ -14,6 +14,7 @@ export {
 } from './components/section'
 export { Header, HeaderLogo } from './components/header'
 export { useTheme, ThemeContextProvider } from './components/theme'
+export type { TanStackDevtoolsTheme } from './components/theme'
 export {
   CheckCircleIcon,
   ChevronDownIcon,

package/src/styles/use-styles.ts

@@ -2,62 +2,201 @@ import * as goober from 'goober'
 import { createEffect, createSignal } from 'solid-js'
 import { useTheme } from '../components/theme'
 import { tokens } from './tokens'
+
+import type { TanStackDevtoolsTheme } from '../components/theme'
 import type { ButtonVariant } from '../components/button'
-import type { Theme } from '../components/theme'
 
 const buttonVariantColors: Record<
   ButtonVariant,
-  { bg: string; hover: string; active: string; text: string; border: string }
+  {
+    bg: { light: string; dark: string }
+    hover: { light: string; dark: string }
+    active: { light: string; dark: string }
+    text: { light: string; dark: string }
+    border: { light: string; dark: string }
+    outline: { light: string; dark: string }
+    outlineHover: { light: string; dark: string }
+  }
 > = {
   primary: {
-    bg: tokens.colors.gray[900],
-    hover: tokens.colors.gray[800],
-    active: tokens.colors.gray[700],
-    text: '#fff',
-    border: tokens.colors.gray[900],
+    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: tokens.colors.gray[100],
-    hover: tokens.colors.gray[200],
-    active: tokens.colors.gray[300],
-    text: tokens.colors.gray[900],
-    border: tokens.colors.gray[300],
+    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: tokens.colors.blue[500],
-    hover: tokens.colors.blue[600],
-    active: tokens.colors.blue[700],
-    text: '#fff',
-    border: tokens.colors.blue[500],
+    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: tokens.colors.yellow[500],
-    hover: tokens.colors.yellow[600],
-    active: tokens.colors.yellow[700],
-    text: '#fff',
-    border: tokens.colors.yellow[500],
+    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: tokens.colors.red[500],
-    hover: tokens.colors.red[600],
-    active: tokens.colors.red[700],
-    text: '#fff',
-    border: tokens.colors.red[500],
+    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: tokens.colors.green[500],
-    hover: tokens.colors.green[600],
-    active: tokens.colors.green[700],
-    text: '#fff',
-    border: tokens.colors.green[500],
+    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],
+    },
   },
 }
 export const css = goober.css
-const stylesFactory = (theme: Theme = 'dark') => {
+const stylesFactory = (theme: TanStackDevtoolsTheme) => {
   const { colors, font, size, border } = tokens
   const { fontFamily } = font
 
   const t = (light: string, dark: string) => (theme === 'light' ? light : dark)
+  const buildButtonVariant = (variant: ButtonVariant) => {
+    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: Record<
+    ButtonVariant,
+    { ghost: string; outline: string; solid: string }
+  > = {
+    primary: buildButtonVariant('primary'),
+    secondary: buildButtonVariant('secondary'),
+    info: buildButtonVariant('info'),
+    warning: buildButtonVariant('warning'),
+    danger: buildButtonVariant('danger'),
+    success: buildButtonVariant('success'),
+  }
 
   const wrapperSize = 320
 
@@ -72,7 +211,7 @@ const stylesFactory = (theme: Theme = 'dark') => {
       height: ${size[12]};
       font-family: ${fontFamily.sans};
       gap: ${tokens.size[0.5]};
-      padding: 0px;
+      padding: 0;
       &:hover {
         opacity: 0.7;
       }
@@ -268,49 +407,14 @@ const stylesFactory = (theme: Theme = 'dark') => {
         border-style: solid;
       `,
       variant(variant: ButtonVariant, outline?: boolean, ghost?: boolean) {
-        const v = buttonVariantColors[variant]
+        const v = buttonVariants[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])};
-            }
-          `
+          return v.ghost
         }
         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 v.outline
         }
-        // Default solid button
-        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)};
-          }
-        `
+        return v.solid
       },
     },
     tag: {
@@ -371,7 +475,7 @@ const stylesFactory = (theme: Theme = 'dark') => {
         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;
@@ -505,7 +609,7 @@ const stylesFactory = (theme: Theme = 'dark') => {
         background-color: transparent;
         border: none;
         gap: ${tokens.size[0.5]};
-        padding: 0px;
+        padding: 0;
         &:hover {
           opacity: 0.7;
         }

package/dist/esm/icons.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"icons.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/esm/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}