@tanstack/pacer-devtools 1.4.0 → 1.5.0

package/src/styles/tokens.ts

@@ -1,305 +0,0 @@
-export const tokens = {
-  colors: {
-    inherit: 'inherit',
-    current: 'currentColor',
-    transparent: 'transparent',
-    black: '#000000',
-    white: '#ffffff',
-    neutral: {
-      50: '#f9fafb',
-      100: '#f2f4f7',
-      200: '#eaecf0',
-      300: '#d0d5dd',
-      400: '#98a2b3',
-      500: '#667085',
-      600: '#475467',
-      700: '#344054',
-      800: '#1d2939',
-      900: '#101828',
-    },
-    darkGray: {
-      50: '#525c7a',
-      100: '#49536e',
-      200: '#414962',
-      300: '#394056',
-      400: '#313749',
-      500: '#292e3d',
-      600: '#212530',
-      700: '#191c24',
-      800: '#111318',
-      900: '#0b0d10',
-    },
-    gray: {
-      50: '#f9fafb',
-      100: '#f2f4f7',
-      200: '#eaecf0',
-      300: '#d0d5dd',
-      400: '#98a2b3',
-      500: '#667085',
-      600: '#475467',
-      700: '#344054',
-      800: '#1d2939',
-      900: '#101828',
-    },
-    blue: {
-      25: '#F5FAFF',
-      50: '#EFF8FF',
-      100: '#D1E9FF',
-      200: '#B2DDFF',
-      300: '#84CAFF',
-      400: '#53B1FD',
-      500: '#2E90FA',
-      600: '#1570EF',
-      700: '#175CD3',
-      800: '#1849A9',
-      900: '#194185',
-    },
-    green: {
-      25: '#F6FEF9',
-      50: '#ECFDF3',
-      100: '#D1FADF',
-      200: '#A6F4C5',
-      300: '#6CE9A6',
-      400: '#32D583',
-      500: '#12B76A',
-      600: '#039855',
-      700: '#027A48',
-      800: '#05603A',
-      900: '#054F31',
-    },
-    red: {
-      50: '#fef2f2',
-      100: '#fee2e2',
-      200: '#fecaca',
-      300: '#fca5a5',
-      400: '#f87171',
-      500: '#ef4444',
-      600: '#dc2626',
-      700: '#b91c1c',
-      800: '#991b1b',
-      900: '#7f1d1d',
-      950: '#450a0a',
-    },
-    yellow: {
-      25: '#FFFCF5',
-      50: '#FFFAEB',
-      100: '#FEF0C7',
-      200: '#FEDF89',
-      300: '#FEC84B',
-      400: '#FDB022',
-      500: '#F79009',
-      600: '#DC6803',
-      700: '#B54708',
-      800: '#93370D',
-      900: '#7A2E0E',
-    },
-    purple: {
-      25: '#FAFAFF',
-      50: '#F4F3FF',
-      100: '#EBE9FE',
-      200: '#D9D6FE',
-      300: '#BDB4FE',
-      400: '#9B8AFB',
-      500: '#7A5AF8',
-      600: '#6938EF',
-      700: '#5925DC',
-      800: '#4A1FB8',
-      900: '#3E1C96',
-    },
-    teal: {
-      25: '#F6FEFC',
-      50: '#F0FDF9',
-      100: '#CCFBEF',
-      200: '#99F6E0',
-      300: '#5FE9D0',
-      400: '#2ED3B7',
-      500: '#15B79E',
-      600: '#0E9384',
-      700: '#107569',
-      800: '#125D56',
-      900: '#134E48',
-    },
-    pink: {
-      25: '#fdf2f8',
-      50: '#fce7f3',
-      100: '#fbcfe8',
-      200: '#f9a8d4',
-      300: '#f472b6',
-      400: '#ec4899',
-      500: '#db2777',
-      600: '#be185d',
-      700: '#9d174d',
-      800: '#831843',
-      900: '#500724',
-    },
-    cyan: {
-      25: '#ecfeff',
-      50: '#cffafe',
-      100: '#a5f3fc',
-      200: '#67e8f9',
-      300: '#22d3ee',
-      400: '#06b6d4',
-      500: '#0891b2',
-      600: '#0e7490',
-      700: '#155e75',
-      800: '#164e63',
-      900: '#083344',
-    },
-  },
-  alpha: {
-    100: 'ff',
-    90: 'e5',
-    80: 'cc',
-    70: 'b3',
-    60: '99',
-    50: '80',
-    40: '66',
-    30: '4d',
-    20: '33',
-    10: '1a',
-    0: '00',
-  },
-  font: {
-    size: {
-      '2xs': 'calc(var(--tsrd-font-size) * 0.625)',
-      xs: 'calc(var(--tsrd-font-size) * 0.75)',
-      sm: 'calc(var(--tsrd-font-size) * 0.875)',
-      md: 'var(--tsrd-font-size)',
-      lg: 'calc(var(--tsrd-font-size) * 1.125)',
-      xl: 'calc(var(--tsrd-font-size) * 1.25)',
-      '2xl': 'calc(var(--tsrd-font-size) * 1.5)',
-      '3xl': 'calc(var(--tsrd-font-size) * 1.875)',
-      '4xl': 'calc(var(--tsrd-font-size) * 2.25)',
-      '5xl': 'calc(var(--tsrd-font-size) * 3)',
-      '6xl': 'calc(var(--tsrd-font-size) * 3.75)',
-      '7xl': 'calc(var(--tsrd-font-size) * 4.5)',
-      '8xl': 'calc(var(--tsrd-font-size) * 6)',
-      '9xl': 'calc(var(--tsrd-font-size) * 8)',
-    },
-    lineHeight: {
-      '3xs': 'calc(var(--tsrd-font-size) * 0.75)',
-      '2xs': 'calc(var(--tsrd-font-size) * 0.875)',
-      xs: 'calc(var(--tsrd-font-size) * 1)',
-      sm: 'calc(var(--tsrd-font-size) * 1.25)',
-      md: 'calc(var(--tsrd-font-size) * 1.5)',
-      lg: 'calc(var(--tsrd-font-size) * 1.75)',
-      xl: 'calc(var(--tsrd-font-size) * 2)',
-      '2xl': 'calc(var(--tsrd-font-size) * 2.25)',
-      '3xl': 'calc(var(--tsrd-font-size) * 2.5)',
-      '4xl': 'calc(var(--tsrd-font-size) * 2.75)',
-      '5xl': 'calc(var(--tsrd-font-size) * 3)',
-      '6xl': 'calc(var(--tsrd-font-size) * 3.25)',
-      '7xl': 'calc(var(--tsrd-font-size) * 3.5)',
-      '8xl': 'calc(var(--tsrd-font-size) * 3.75)',
-      '9xl': 'calc(var(--tsrd-font-size) * 4)',
-    },
-    weight: {
-      thin: '100',
-      extralight: '200',
-      light: '300',
-      normal: '400',
-      medium: '500',
-      semibold: '600',
-      bold: '700',
-      extrabold: '800',
-      black: '900',
-    },
-    fontFamily: {
-      sans: 'ui-sans-serif, Inter, system-ui, sans-serif, sans-serif',
-      mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`,
-    },
-  },
-  breakpoints: {
-    xs: '320px',
-    sm: '640px',
-    md: '768px',
-    lg: '1024px',
-    xl: '1280px',
-    '2xl': '1536px',
-  },
-  border: {
-    radius: {
-      none: '0px',
-      xs: 'calc(var(--tsrd-font-size) * 0.125)',
-      sm: 'calc(var(--tsrd-font-size) * 0.25)',
-      md: 'calc(var(--tsrd-font-size) * 0.375)',
-      lg: 'calc(var(--tsrd-font-size) * 0.5)',
-      xl: 'calc(var(--tsrd-font-size) * 0.75)',
-      '2xl': 'calc(var(--tsrd-font-size) * 1)',
-      '3xl': 'calc(var(--tsrd-font-size) * 1.5)',
-      full: '9999px',
-    },
-  },
-  size: {
-    0: '0px',
-    0.25: 'calc(var(--tsrd-font-size) * 0.0625)',
-    0.5: 'calc(var(--tsrd-font-size) * 0.125)',
-    1: 'calc(var(--tsrd-font-size) * 0.25)',
-    1.5: 'calc(var(--tsrd-font-size) * 0.375)',
-    2: 'calc(var(--tsrd-font-size) * 0.5)',
-    2.5: 'calc(var(--tsrd-font-size) * 0.625)',
-    3: 'calc(var(--tsrd-font-size) * 0.75)',
-    3.5: 'calc(var(--tsrd-font-size) * 0.875)',
-    4: 'calc(var(--tsrd-font-size) * 1)',
-    4.5: 'calc(var(--tsrd-font-size) * 1.125)',
-    5: 'calc(var(--tsrd-font-size) * 1.25)',
-    5.5: 'calc(var(--tsrd-font-size) * 1.375)',
-    6: 'calc(var(--tsrd-font-size) * 1.5)',
-    6.5: 'calc(var(--tsrd-font-size) * 1.625)',
-    7: 'calc(var(--tsrd-font-size) * 1.75)',
-    8: 'calc(var(--tsrd-font-size) * 2)',
-    9: 'calc(var(--tsrd-font-size) * 2.25)',
-    10: 'calc(var(--tsrd-font-size) * 2.5)',
-    11: 'calc(var(--tsrd-font-size) * 2.75)',
-    12: 'calc(var(--tsrd-font-size) * 3)',
-    14: 'calc(var(--tsrd-font-size) * 3.5)',
-    16: 'calc(var(--tsrd-font-size) * 4)',
-    20: 'calc(var(--tsrd-font-size) * 5)',
-    24: 'calc(var(--tsrd-font-size) * 6)',
-    28: 'calc(var(--tsrd-font-size) * 7)',
-    32: 'calc(var(--tsrd-font-size) * 8)',
-    36: 'calc(var(--tsrd-font-size) * 9)',
-    40: 'calc(var(--tsrd-font-size) * 10)',
-    44: 'calc(var(--tsrd-font-size) * 11)',
-    48: 'calc(var(--tsrd-font-size) * 12)',
-    52: 'calc(var(--tsrd-font-size) * 13)',
-    56: 'calc(var(--tsrd-font-size) * 14)',
-    60: 'calc(var(--tsrd-font-size) * 15)',
-    64: 'calc(var(--tsrd-font-size) * 16)',
-    72: 'calc(var(--tsrd-font-size) * 18)',
-    80: 'calc(var(--tsrd-font-size) * 20)',
-    96: 'calc(var(--tsrd-font-size) * 24)',
-  },
-  shadow: {
-    xs: (_: string = 'rgb(0 0 0 / 0.1)') =>
-      `0 1px 2px 0 rgb(0 0 0 / 0.05)` as const,
-    sm: (color: string = 'rgb(0 0 0 / 0.1)') =>
-      `0 1px 3px 0 ${color}, 0 1px 2px -1px ${color}` as const,
-    md: (color: string = 'rgb(0 0 0 / 0.1)') =>
-      `0 4px 6px -1px ${color}, 0 2px 4px -2px ${color}` as const,
-    lg: (color: string = 'rgb(0 0 0 / 0.1)') =>
-      `0 10px 15px -3px ${color}, 0 4px 6px -4px ${color}` as const,
-    xl: (color: string = 'rgb(0 0 0 / 0.1)') =>
-      `0 20px 25px -5px ${color}, 0 8px 10px -6px ${color}` as const,
-    '2xl': (color: string = 'rgb(0 0 0 / 0.25)') =>
-      `0 25px 50px -12px ${color}` as const,
-    inner: (color: string = 'rgb(0 0 0 / 0.05)') =>
-      `inset 0 2px 4px 0 ${color}` as const,
-    none: () => `none` as const,
-  },
-  zIndices: {
-    hide: -1,
-    auto: 'auto',
-    base: 0,
-    docked: 10,
-    dropdown: 1000,
-    sticky: 1100,
-    banner: 1200,
-    overlay: 1300,
-    modal: 1400,
-    popover: 1500,
-    skipLink: 1600,
-    toast: 1700,
-    tooltip: 1800,
-  },
-} as const

package/src/styles/use-styles.ts

@@ -1,385 +0,0 @@
-import * as goober from 'goober'
-import { createEffect, createSignal } from 'solid-js'
-import { createTheme } from '@tanstack/devtools-ui'
-import { tokens } from './tokens'
-
-const stylesFactory = (theme: 'light' | 'dark') => {
-  const { colors, font, size, alpha, border } = tokens
-  const { fontFamily, size: fontSize } = font
-  const css = goober.css
-  const t = (light: string, dark: string) => (theme === 'light' ? light : dark)
-
-  return {
-    /**
-     * Fills the devtools-utils portal div (height: 100%) and is a flex parent so MainPanel
-     * gets a real flex height budget (not just height: 100% without a flex chain).
-     */
-    shellRoot: css`
-      display: flex;
-      flex-direction: column;
-      box-sizing: border-box;
-      width: 100%;
-      height: 100%;
-      min-height: 0;
-      overflow: hidden;
-    `,
-    /** Overrides devtools-ui MainPanel overflow-y: auto so inner columns own scrolling */
-    mainPanelShell: css`
-      display: flex;
-      flex-direction: column;
-      flex: 1 1 0%;
-      min-height: 0;
-      overflow: hidden !important;
-    `,
-    mainContainer: css`
-      display: flex;
-      flex: 1 1 0%;
-      min-height: 0;
-      overflow: hidden;
-      padding: ${size[2]};
-      padding-top: 0;
-      margin-top: ${size[2]};
-    `,
-    dragHandle: css`
-      width: 8px;
-      background: ${t(colors.gray[300], colors.darkGray[600])};
-      cursor: col-resize;
-      position: relative;
-      transition: all 0.2s ease;
-      user-select: none;
-      pointer-events: all;
-      margin: 0 ${size[1]};
-      border-radius: 2px;
-
-      &:hover {
-        background: ${t(colors.blue[600], colors.blue[500])};
-        margin: 0 ${size[1]};
-      }
-
-      &.dragging {
-        background: ${t(colors.blue[700], colors.blue[600])};
-        margin: 0 ${size[1]};
-      }
-
-      &::after {
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 2px;
-        height: 20px;
-        background: ${t(colors.gray[400], colors.darkGray[400])};
-        border-radius: 1px;
-        pointer-events: none;
-      }
-
-      &:hover::after,
-      &.dragging::after {
-        background: ${t(colors.blue[500], colors.blue[300])};
-      }
-    `,
-    leftPanel: css`
-      background: ${t(colors.gray[100], colors.darkGray[800])};
-      border-radius: ${border.radius.lg};
-      border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      min-height: 0;
-      flex-shrink: 0;
-    `,
-    rightPanel: css`
-      background: ${t(colors.gray[100], colors.darkGray[800])};
-      border-radius: ${border.radius.lg};
-      border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      min-height: 0;
-      flex: 1;
-    `,
-    panelHeader: css`
-      font-size: ${fontSize.md};
-      font-weight: ${font.weight.bold};
-      color: ${t(colors.blue[700], colors.blue[400])};
-      padding: ${size[2]};
-      border-bottom: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
-      background: ${t(colors.gray[100], colors.darkGray[800])};
-      flex-shrink: 0;
-    `,
-    utilList: css`
-      flex: 1;
-      overflow-y: auto;
-      padding: ${size[1]};
-      min-height: 0;
-    `,
-    utilGroup: css`
-      margin-bottom: ${size[2]};
-    `,
-    utilGroupHeader: css`
-      font-size: ${fontSize.xs};
-      font-weight: ${font.weight.semibold};
-      color: ${t(colors.gray[600], colors.gray[400])};
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      margin-bottom: ${size[1]};
-      padding: ${size[1]} ${size[2]};
-      background: ${t(colors.gray[200], colors.darkGray[700])};
-      border-radius: ${border.radius.md};
-    `,
-    utilRow: css`
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: ${size[2]};
-      margin-bottom: ${size[1]};
-      background: ${t(colors.gray[200], colors.darkGray[700])};
-      border-radius: ${border.radius.md};
-      cursor: pointer;
-      transition: all 0.2s ease;
-      border: 1px solid transparent;
-
-      &:hover {
-        background: ${t(colors.gray[300], colors.darkGray[600])};
-        border-color: ${t(colors.gray[400], colors.darkGray[500])};
-      }
-    `,
-    utilRowSelected: css`
-      background: ${t(colors.blue[100], colors.blue[900] + alpha[20])};
-      border-color: ${t(colors.blue[600], colors.blue[500])};
-      box-shadow: 0 0 0 1px
-        ${t(colors.blue[600] + alpha[30], colors.blue[500] + alpha[30])};
-    `,
-    utilKey: css`
-      font-family: ${fontFamily.mono};
-      font-size: ${fontSize.xs};
-      color: ${t(colors.gray[900], colors.gray[100])};
-      flex: 1;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    `,
-    utilStatus: css`
-      font-size: ${fontSize.xs};
-      color: ${t(colors.gray[600], colors.gray[400])};
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      padding: ${size[1]} ${size[1]};
-      background: ${t(colors.gray[300], colors.darkGray[600])};
-      border-radius: ${border.radius.sm};
-      margin-left: ${size[1]};
-    `,
-    stateDetails: css`
-      flex: 1;
-      overflow-y: auto;
-      padding: ${size[2]};
-      min-height: 0;
-    `,
-    stateHeader: css`
-      margin-bottom: ${size[2]};
-      padding-bottom: ${size[2]};
-      border-bottom: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
-    `,
-    stateTitle: css`
-      font-size: ${fontSize.md};
-      font-weight: ${font.weight.bold};
-      color: ${t(colors.blue[700], colors.blue[400])};
-      margin-bottom: ${size[1]};
-    `,
-    stateKey: css`
-      font-family: ${fontFamily.mono};
-      font-size: ${fontSize.xs};
-      color: ${t(colors.gray[600], colors.gray[400])};
-      word-break: break-all;
-    `,
-    stateContent: css`
-      background: ${t(colors.gray[100], colors.darkGray[700])};
-      border-radius: ${border.radius.md};
-      padding: ${size[2]};
-      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
-    `,
-    detailsGrid: css`
-      display: grid;
-      grid-template-columns: 1fr;
-      gap: ${size[2]};
-      align-items: start;
-    `,
-    detailSection: css`
-      background: ${t(colors.white, colors.darkGray[700])};
-      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
-      border-radius: ${border.radius.md};
-      padding: ${size[2]};
-    `,
-    detailSectionHeader: css`
-      font-size: ${fontSize.sm};
-      font-weight: ${font.weight.bold};
-      color: ${t(colors.gray[800], colors.gray[200])};
-      margin-bottom: ${size[1]};
-      text-transform: uppercase;
-      letter-spacing: 0.04em;
-    `,
-    actionsRow: css`
-      display: flex;
-      flex-wrap: wrap;
-      gap: ${size[2]};
-    `,
-    actionButton: css`
-      display: inline-flex;
-      align-items: center;
-      gap: ${size[1]};
-      padding: ${size[1]} ${size[2]};
-      border-radius: ${border.radius.md};
-      border: 1px solid ${t(colors.gray[300], colors.darkGray[500])};
-      background: ${t(colors.gray[200], colors.darkGray[600])};
-      color: ${t(colors.gray[900], colors.gray[100])};
-      font-size: ${fontSize.xs};
-      cursor: pointer;
-      user-select: none;
-      transition:
-        background 0.15s,
-        border-color 0.15s;
-      &:hover {
-        background: ${t(colors.gray[300], colors.darkGray[500])};
-        border-color: ${t(colors.gray[400], colors.darkGray[400])};
-      }
-      &:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-        &:hover {
-          background: ${t(colors.gray[200], colors.darkGray[600])};
-          border-color: ${t(colors.gray[300], colors.darkGray[500])};
-        }
-      }
-    `,
-    actionDotBlue: css`
-      width: 6px;
-      height: 6px;
-      border-radius: 9999px;
-      background: ${colors.blue[400]};
-    `,
-    actionDotGreen: css`
-      width: 6px;
-      height: 6px;
-      border-radius: 9999px;
-      background: ${colors.green[400]};
-    `,
-    actionDotRed: css`
-      width: 6px;
-      height: 6px;
-      border-radius: 9999px;
-      background: ${colors.red[400]};
-    `,
-    actionDotYellow: css`
-      width: 6px;
-      height: 6px;
-      border-radius: 9999px;
-      background: ${colors.yellow[400]};
-    `,
-    actionDotOrange: css`
-      width: 6px;
-      height: 6px;
-      border-radius: 9999px;
-      background: ${colors.pink[400]};
-    `,
-    actionDotPurple: css`
-      width: 6px;
-      height: 6px;
-      border-radius: 9999px;
-      background: ${colors.purple[400]};
-    `,
-    infoGrid: css`
-      display: grid;
-      grid-template-columns: auto 1fr;
-      gap: ${size[1]};
-      row-gap: ${size[1]};
-      align-items: center;
-    `,
-    infoLabel: css`
-      color: ${t(colors.gray[600], colors.gray[400])};
-      font-size: ${fontSize.xs};
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-    `,
-    infoValueMono: css`
-      font-family: ${fontFamily.mono};
-      font-size: ${fontSize.xs};
-      color: ${t(colors.gray[900], colors.gray[100])};
-      word-break: break-all;
-    `,
-    noSelection: css`
-      flex: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: ${t(colors.gray[500], colors.gray[500])};
-      font-style: italic;
-      text-align: center;
-      padding: ${size[4]};
-    `,
-    // Keep existing styles for backward compatibility
-    sectionContainer: css`
-      display: flex;
-      flex-wrap: wrap;
-      gap: ${size[4]};
-    `,
-    section: css`
-      background: ${t(colors.gray[100], colors.darkGray[800])};
-      border-radius: ${border.radius.lg};
-      box-shadow: ${tokens.shadow.md(
-        t(colors.gray[400] + alpha[80], colors.black + alpha[80]),
-      )};
-      padding: ${size[4]};
-      margin-bottom: ${size[4]};
-      border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
-      min-width: 0;
-      max-width: 33%;
-      max-height: fit-content;
-    `,
-    sectionHeader: css`
-      font-size: ${fontSize.lg};
-      font-weight: ${font.weight.bold};
-      margin-bottom: ${size[2]};
-      color: ${t(colors.blue[600], colors.blue[400])};
-      letter-spacing: 0.01em;
-      display: flex;
-      align-items: center;
-      gap: ${size[2]};
-    `,
-    sectionEmpty: css`
-      color: ${t(colors.gray[500], colors.gray[500])};
-      font-size: ${fontSize.sm};
-      font-style: italic;
-      margin: ${size[2]} 0;
-    `,
-    instanceList: css`
-      display: flex;
-      flex-direction: column;
-      gap: ${size[2]};
-      background: ${t(colors.gray[200], colors.darkGray[700])};
-      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
-    `,
-    instanceCard: css`
-      background: ${t(colors.gray[200], colors.darkGray[700])};
-      border-radius: ${border.radius.md};
-      padding: ${size[3]};
-      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
-      font-size: ${fontSize.sm};
-      color: ${t(colors.gray[900], colors.gray[100])};
-      font-family: ${fontFamily.mono};
-      overflow-x: auto;
-      transition:
-        box-shadow 0.3s,
-        background 0.3s;
-    `,
-  }
-}
-
-export function useStyles() {
-  const { theme } = createTheme()
-  const [styles, setStyles] = createSignal(stylesFactory(theme()))
-  createEffect(() => {
-    setStyles(stylesFactory(theme()))
-  })
-  return styles
-}