@tanstack/devtools-ui 0.4.1 → 0.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/esm/styles/tokens.js +0 -4
  2. package/dist/esm/styles/tokens.js.map +1 -1
  3. package/dist/esm/styles/use-styles.js +59 -63
  4. package/dist/esm/styles/use-styles.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/styles/use-styles.ts +59 -63
package/dist/esm/styles/tokens.js CHANGED
@@ -146,9 +146,6 @@ const tokens = {
146
146
  900: "#083344"
147
147
  }
148
148
  },
149
- alpha: {
150
- 20: "33"
151
- },
152
149
  font: {
153
150
  size: {
154
151
  xs: "calc(var(--tsrd-font-size) * 0.75)",
@@ -182,7 +179,6 @@ const tokens = {
182
179
  2: "calc(var(--tsrd-font-size) * 0.5)",
183
180
  2.5: "calc(var(--tsrd-font-size) * 0.625)",
184
181
  3: "calc(var(--tsrd-font-size) * 0.75)",
185
- 4: "calc(var(--tsrd-font-size) * 1)",
186
182
  4.5: "calc(var(--tsrd-font-size) * 1.125)",
187
183
  6.5: "calc(var(--tsrd-font-size) * 1.625)",
188
184
  12: "calc(var(--tsrd-font-size) * 3)"
package/dist/esm/styles/tokens.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tokens.js","sources":["../../../src/styles/tokens.ts"],"sourcesContent":["export const tokens = {\n colors: {\n inherit: 'inherit',\n current: 'currentColor',\n transparent: 'transparent',\n black: '#000000',\n white: '#ffffff',\n neutral: {\n 50: '#f9fafb',\n 100: '#f2f4f7',\n 200: '#eaecf0',\n 300: '#d0d5dd',\n 400: '#98a2b3',\n 500: '#667085',\n 600: '#475467',\n 700: '#344054',\n 800: '#1d2939',\n 900: '#101828',\n },\n darkGray: {\n 50: '#525c7a',\n 100: '#49536e',\n 200: '#414962',\n 300: '#394056',\n 400: '#313749',\n 500: '#292e3d',\n 600: '#212530',\n 700: '#191c24',\n 800: '#111318',\n 900: '#0b0d10',\n },\n gray: {\n 50: '#f9fafb',\n 100: '#f2f4f7',\n 200: '#eaecf0',\n 300: '#d0d5dd',\n 400: '#98a2b3',\n 500: '#667085',\n 600: '#475467',\n 700: '#344054',\n 800: '#1d2939',\n 900: '#101828',\n },\n blue: {\n 25: '#F5FAFF',\n 50: '#EFF8FF',\n 100: '#D1E9FF',\n 200: '#B2DDFF',\n 300: '#84CAFF',\n 400: '#53B1FD',\n 500: '#2E90FA',\n 600: '#1570EF',\n 700: '#175CD3',\n 800: '#1849A9',\n 900: '#194185',\n },\n green: {\n 25: '#F6FEF9',\n 50: '#ECFDF3',\n 100: '#D1FADF',\n 200: '#A6F4C5',\n 300: '#6CE9A6',\n 400: '#32D583',\n 500: '#12B76A',\n 600: '#039855',\n 700: '#027A48',\n 800: '#05603A',\n 900: '#054F31',\n },\n red: {\n 50: '#fef2f2',\n 100: '#fee2e2',\n 200: '#fecaca',\n 300: '#fca5a5',\n 400: '#f87171',\n 500: '#ef4444',\n 600: '#dc2626',\n 700: '#b91c1c',\n 800: '#991b1b',\n 900: '#7f1d1d',\n 950: '#450a0a',\n },\n yellow: {\n 25: '#FFFCF5',\n 50: '#FFFAEB',\n 100: '#FEF0C7',\n 200: '#FEDF89',\n 300: '#FEC84B',\n 400: '#FDB022',\n 500: '#F79009',\n 600: '#DC6803',\n 700: '#B54708',\n 800: '#93370D',\n 900: '#7A2E0E',\n },\n purple: {\n 25: '#FAFAFF',\n 50: '#F4F3FF',\n 100: '#EBE9FE',\n 200: '#D9D6FE',\n 300: '#BDB4FE',\n 400: '#9B8AFB',\n 500: '#7A5AF8',\n 600: '#6938EF',\n 700: '#5925DC',\n 800: '#4A1FB8',\n 900: '#3E1C96',\n },\n teal: {\n 25: '#F6FEFC',\n 50: '#F0FDF9',\n 100: '#CCFBEF',\n 200: '#99F6E0',\n 300: '#5FE9D0',\n 400: '#2ED3B7',\n 500: '#15B79E',\n 600: '#0E9384',\n 700: '#107569',\n 800: '#125D56',\n 900: '#134E48',\n },\n pink: {\n 25: '#fdf2f8',\n 50: '#fce7f3',\n 100: '#fbcfe8',\n 200: '#f9a8d4',\n 300: '#f472b6',\n 400: '#ec4899',\n 500: '#db2777',\n 600: '#be185d',\n 700: '#9d174d',\n 800: '#831843',\n 900: '#500724',\n },\n cyan: {\n 25: '#ecfeff',\n 50: '#cffafe',\n 100: '#a5f3fc',\n 200: '#67e8f9',\n 300: '#22d3ee',\n 400: '#06b6d4',\n 500: '#0891b2',\n 600: '#0e7490',\n 700: '#155e75',\n 800: '#164e63',\n 900: '#083344',\n },\n },\n alpha: {\n 100: 'ff',\n 90: 'e5',\n 80: 'cc',\n 70: 'b3',\n 60: '99',\n 50: '80',\n 40: '66',\n 30: '4d',\n 20: '33',\n 10: '1a',\n 0: '00',\n },\n font: {\n size: {\n '2xs': 'calc(var(--tsrd-font-size) * 0.625)',\n xs: 'calc(var(--tsrd-font-size) * 0.75)',\n sm: 'calc(var(--tsrd-font-size) * 0.875)',\n md: 'var(--tsrd-font-size)',\n lg: 'calc(var(--tsrd-font-size) * 1.125)',\n xl: 'calc(var(--tsrd-font-size) * 1.25)',\n '2xl': 'calc(var(--tsrd-font-size) * 1.5)',\n '3xl': 'calc(var(--tsrd-font-size) * 1.875)',\n '4xl': 'calc(var(--tsrd-font-size) * 2.25)',\n '5xl': 'calc(var(--tsrd-font-size) * 3)',\n '6xl': 'calc(var(--tsrd-font-size) * 3.75)',\n '7xl': 'calc(var(--tsrd-font-size) * 4.5)',\n '8xl': 'calc(var(--tsrd-font-size) * 6)',\n '9xl': 'calc(var(--tsrd-font-size) * 8)',\n },\n lineHeight: {\n '3xs': 'calc(var(--tsrd-font-size) * 0.75)',\n '2xs': 'calc(var(--tsrd-font-size) * 0.875)',\n xs: 'calc(var(--tsrd-font-size) * 1)',\n sm: 'calc(var(--tsrd-font-size) * 1.25)',\n md: 'calc(var(--tsrd-font-size) * 1.5)',\n lg: 'calc(var(--tsrd-font-size) * 1.75)',\n xl: 'calc(var(--tsrd-font-size) * 2)',\n '2xl': 'calc(var(--tsrd-font-size) * 2.25)',\n '3xl': 'calc(var(--tsrd-font-size) * 2.5)',\n '4xl': 'calc(var(--tsrd-font-size) * 2.75)',\n '5xl': 'calc(var(--tsrd-font-size) * 3)',\n '6xl': 'calc(var(--tsrd-font-size) * 3.25)',\n '7xl': 'calc(var(--tsrd-font-size) * 3.5)',\n '8xl': 'calc(var(--tsrd-font-size) * 3.75)',\n '9xl': 'calc(var(--tsrd-font-size) * 4)',\n },\n weight: {\n thin: '100',\n extralight: '200',\n light: '300',\n normal: '400',\n medium: '500',\n semibold: '600',\n bold: '700',\n extrabold: '800',\n black: '900',\n },\n fontFamily: {\n sans: 'ui-sans-serif, Inter, system-ui, sans-serif, sans-serif',\n mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`,\n },\n },\n breakpoints: {\n xs: '320px',\n sm: '640px',\n md: '768px',\n lg: '1024px',\n xl: '1280px',\n '2xl': '1536px',\n },\n border: {\n radius: {\n none: '0px',\n xs: 'calc(var(--tsrd-font-size) * 0.125)',\n sm: 'calc(var(--tsrd-font-size) * 0.25)',\n md: 'calc(var(--tsrd-font-size) * 0.375)',\n lg: 'calc(var(--tsrd-font-size) * 0.5)',\n xl: 'calc(var(--tsrd-font-size) * 0.75)',\n '2xl': 'calc(var(--tsrd-font-size) * 1)',\n '3xl': 'calc(var(--tsrd-font-size) * 1.5)',\n full: '9999px',\n },\n },\n size: {\n 0: '0px',\n 0.25: 'calc(var(--tsrd-font-size) * 0.0625)',\n 0.5: 'calc(var(--tsrd-font-size) * 0.125)',\n 1: 'calc(var(--tsrd-font-size) * 0.25)',\n 1.5: 'calc(var(--tsrd-font-size) * 0.375)',\n 2: 'calc(var(--tsrd-font-size) * 0.5)',\n 2.5: 'calc(var(--tsrd-font-size) * 0.625)',\n 3: 'calc(var(--tsrd-font-size) * 0.75)',\n 3.5: 'calc(var(--tsrd-font-size) * 0.875)',\n 4: 'calc(var(--tsrd-font-size) * 1)',\n 4.5: 'calc(var(--tsrd-font-size) * 1.125)',\n 5: 'calc(var(--tsrd-font-size) * 1.25)',\n 5.5: 'calc(var(--tsrd-font-size) * 1.375)',\n 6: 'calc(var(--tsrd-font-size) * 1.5)',\n 6.5: 'calc(var(--tsrd-font-size) * 1.625)',\n 7: 'calc(var(--tsrd-font-size) * 1.75)',\n 8: 'calc(var(--tsrd-font-size) * 2)',\n 9: 'calc(var(--tsrd-font-size) * 2.25)',\n 10: 'calc(var(--tsrd-font-size) * 2.5)',\n 11: 'calc(var(--tsrd-font-size) * 2.75)',\n 12: 'calc(var(--tsrd-font-size) * 3)',\n 14: 'calc(var(--tsrd-font-size) * 3.5)',\n 16: 'calc(var(--tsrd-font-size) * 4)',\n 20: 'calc(var(--tsrd-font-size) * 5)',\n 24: 'calc(var(--tsrd-font-size) * 6)',\n 28: 'calc(var(--tsrd-font-size) * 7)',\n 32: 'calc(var(--tsrd-font-size) * 8)',\n 36: 'calc(var(--tsrd-font-size) * 9)',\n 40: 'calc(var(--tsrd-font-size) * 10)',\n 44: 'calc(var(--tsrd-font-size) * 11)',\n 48: 'calc(var(--tsrd-font-size) * 12)',\n 52: 'calc(var(--tsrd-font-size) * 13)',\n 56: 'calc(var(--tsrd-font-size) * 14)',\n 60: 'calc(var(--tsrd-font-size) * 15)',\n 64: 'calc(var(--tsrd-font-size) * 16)',\n 72: 'calc(var(--tsrd-font-size) * 18)',\n 80: 'calc(var(--tsrd-font-size) * 20)',\n 96: 'calc(var(--tsrd-font-size) * 24)',\n },\n shadow: {\n xs: (_: string = 'rgb(0 0 0 / 0.1)') =>\n `0 1px 2px 0 rgb(0 0 0 / 0.05)` as const,\n sm: (color: string = 'rgb(0 0 0 / 0.1)') =>\n `0 1px 3px 0 ${color}, 0 1px 2px -1px ${color}` as const,\n md: (color: string = 'rgb(0 0 0 / 0.1)') =>\n `0 4px 6px -1px ${color}, 0 2px 4px -2px ${color}` as const,\n lg: (color: string = 'rgb(0 0 0 / 0.1)') =>\n `0 10px 15px -3px ${color}, 0 4px 6px -4px ${color}` as const,\n xl: (color: string = 'rgb(0 0 0 / 0.1)') =>\n `0 20px 25px -5px ${color}, 0 8px 10px -6px ${color}` as const,\n '2xl': (color: string = 'rgb(0 0 0 / 0.25)') =>\n `0 25px 50px -12px ${color}` as const,\n inner: (color: string = 'rgb(0 0 0 / 0.05)') =>\n `inset 0 2px 4px 0 ${color}` as const,\n none: () => `none` as const,\n },\n zIndices: {\n hide: -1,\n auto: 'auto',\n base: 0,\n docked: 10,\n dropdown: 1000,\n sticky: 1100,\n banner: 1200,\n overlay: 1300,\n modal: 1400,\n popover: 1500,\n skipLink: 1600,\n toast: 1700,\n tooltip: 1800,\n },\n} as const\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"tokens.js","sources":["../../../src/styles/tokens.ts"],"sourcesContent":["export const tokens = {\n colors: {\n inherit: 'inherit',\n current: 'currentColor',\n transparent: 'transparent',\n black: '#000000',\n white: '#ffffff',\n neutral: {\n 50: '#f9fafb',\n 100: '#f2f4f7',\n 200: '#eaecf0',\n 300: '#d0d5dd',\n 400: '#98a2b3',\n 500: '#667085',\n 600: '#475467',\n 700: '#344054',\n 800: '#1d2939',\n 900: '#101828',\n },\n darkGray: {\n 50: '#525c7a',\n 100: '#49536e',\n 200: '#414962',\n 300: '#394056',\n 400: '#313749',\n 500: '#292e3d',\n 600: '#212530',\n 700: '#191c24',\n 800: '#111318',\n 900: '#0b0d10',\n },\n gray: {\n 50: '#f9fafb',\n 100: '#f2f4f7',\n 200: '#eaecf0',\n 300: '#d0d5dd',\n 400: '#98a2b3',\n 500: '#667085',\n 600: '#475467',\n 700: '#344054',\n 800: '#1d2939',\n 900: '#101828',\n },\n blue: {\n 25: '#F5FAFF',\n 50: '#EFF8FF',\n 100: '#D1E9FF',\n 200: '#B2DDFF',\n 300: '#84CAFF',\n 400: '#53B1FD',\n 500: '#2E90FA',\n 600: '#1570EF',\n 700: '#175CD3',\n 800: '#1849A9',\n 900: '#194185',\n },\n green: {\n 25: '#F6FEF9',\n 50: '#ECFDF3',\n 100: '#D1FADF',\n 200: '#A6F4C5',\n 300: '#6CE9A6',\n 400: '#32D583',\n 500: '#12B76A',\n 600: '#039855',\n 700: '#027A48',\n 800: '#05603A',\n 900: '#054F31',\n },\n red: {\n 50: '#fef2f2',\n 100: '#fee2e2',\n 200: '#fecaca',\n 300: '#fca5a5',\n 400: '#f87171',\n 500: '#ef4444',\n 600: '#dc2626',\n 700: '#b91c1c',\n 800: '#991b1b',\n 900: '#7f1d1d',\n 950: '#450a0a',\n },\n yellow: {\n 25: '#FFFCF5',\n 50: '#FFFAEB',\n 100: '#FEF0C7',\n 200: '#FEDF89',\n 300: '#FEC84B',\n 400: '#FDB022',\n 500: '#F79009',\n 600: '#DC6803',\n 700: '#B54708',\n 800: '#93370D',\n 900: '#7A2E0E',\n },\n purple: {\n 25: '#FAFAFF',\n 50: '#F4F3FF',\n 100: '#EBE9FE',\n 200: '#D9D6FE',\n 300: '#BDB4FE',\n 400: '#9B8AFB',\n 500: '#7A5AF8',\n 600: '#6938EF',\n 700: '#5925DC',\n 800: '#4A1FB8',\n 900: '#3E1C96',\n },\n teal: {\n 25: '#F6FEFC',\n 50: '#F0FDF9',\n 100: '#CCFBEF',\n 200: '#99F6E0',\n 300: '#5FE9D0',\n 400: '#2ED3B7',\n 500: '#15B79E',\n 600: '#0E9384',\n 700: '#107569',\n 800: '#125D56',\n 900: '#134E48',\n },\n pink: {\n 25: '#fdf2f8',\n 50: '#fce7f3',\n 100: '#fbcfe8',\n 200: '#f9a8d4',\n 300: '#f472b6',\n 400: '#ec4899',\n 500: '#db2777',\n 600: '#be185d',\n 700: '#9d174d',\n 800: '#831843',\n 900: '#500724',\n },\n cyan: {\n 25: '#ecfeff',\n 50: '#cffafe',\n 100: '#a5f3fc',\n 200: '#67e8f9',\n 300: '#22d3ee',\n 400: '#06b6d4',\n 500: '#0891b2',\n 600: '#0e7490',\n 700: '#155e75',\n 800: '#164e63',\n 900: '#083344',\n },\n },\n alpha: {\n 100: 'ff',\n 90: 'e5',\n 80: 'cc',\n 70: 'b3',\n 60: '99',\n 50: '80',\n 40: '66',\n 30: '4d',\n 20: '33',\n 10: '1a',\n 0: '00',\n },\n font: {\n size: {\n '2xs': 'calc(var(--tsrd-font-size) * 0.625)',\n xs: 'calc(var(--tsrd-font-size) * 0.75)',\n sm: 'calc(var(--tsrd-font-size) * 0.875)',\n md: 'var(--tsrd-font-size)',\n lg: 'calc(var(--tsrd-font-size) * 1.125)',\n xl: 'calc(var(--tsrd-font-size) * 1.25)',\n '2xl': 'calc(var(--tsrd-font-size) * 1.5)',\n '3xl': 'calc(var(--tsrd-font-size) * 1.875)',\n '4xl': 'calc(var(--tsrd-font-size) * 2.25)',\n '5xl': 'calc(var(--tsrd-font-size) * 3)',\n '6xl': 'calc(var(--tsrd-font-size) * 3.75)',\n '7xl': 'calc(var(--tsrd-font-size) * 4.5)',\n '8xl': 'calc(var(--tsrd-font-size) * 6)',\n '9xl': 'calc(var(--tsrd-font-size) * 8)',\n },\n lineHeight: {\n '3xs': 'calc(var(--tsrd-font-size) * 0.75)',\n '2xs': 'calc(var(--tsrd-font-size) * 0.875)',\n xs: 'calc(var(--tsrd-font-size) * 1)',\n sm: 'calc(var(--tsrd-font-size) * 1.25)',\n md: 'calc(var(--tsrd-font-size) * 1.5)',\n lg: 'calc(var(--tsrd-font-size) * 1.75)',\n xl: 'calc(var(--tsrd-font-size) * 2)',\n '2xl': 'calc(var(--tsrd-font-size) * 2.25)',\n '3xl': 'calc(var(--tsrd-font-size) * 2.5)',\n '4xl': 'calc(var(--tsrd-font-size) * 2.75)',\n '5xl': 'calc(var(--tsrd-font-size) * 3)',\n '6xl': 'calc(var(--tsrd-font-size) * 3.25)',\n '7xl': 'calc(var(--tsrd-font-size) * 3.5)',\n '8xl': 'calc(var(--tsrd-font-size) * 3.75)',\n '9xl': 'calc(var(--tsrd-font-size) * 4)',\n },\n weight: {\n thin: '100',\n extralight: '200',\n light: '300',\n normal: '400',\n medium: '500',\n semibold: '600',\n bold: '700',\n extrabold: '800',\n black: '900',\n },\n fontFamily: {\n sans: 'ui-sans-serif, Inter, system-ui, sans-serif, sans-serif',\n mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`,\n },\n },\n breakpoints: {\n xs: '320px',\n sm: '640px',\n md: '768px',\n lg: '1024px',\n xl: '1280px',\n '2xl': '1536px',\n },\n border: {\n radius: {\n none: '0px',\n xs: 'calc(var(--tsrd-font-size) * 0.125)',\n sm: 'calc(var(--tsrd-font-size) * 0.25)',\n md: 'calc(var(--tsrd-font-size) * 0.375)',\n lg: 'calc(var(--tsrd-font-size) * 0.5)',\n xl: 'calc(var(--tsrd-font-size) * 0.75)',\n '2xl': 'calc(var(--tsrd-font-size) * 1)',\n '3xl': 'calc(var(--tsrd-font-size) * 1.5)',\n full: '9999px',\n },\n },\n size: {\n 0: '0px',\n 0.25: 'calc(var(--tsrd-font-size) * 0.0625)',\n 0.5: 'calc(var(--tsrd-font-size) * 0.125)',\n 1: 'calc(var(--tsrd-font-size) * 0.25)',\n 1.5: 'calc(var(--tsrd-font-size) * 0.375)',\n 2: 'calc(var(--tsrd-font-size) * 0.5)',\n 2.5: 'calc(var(--tsrd-font-size) * 0.625)',\n 3: 'calc(var(--tsrd-font-size) * 0.75)',\n 3.5: 'calc(var(--tsrd-font-size) * 0.875)',\n 4: 'calc(var(--tsrd-font-size) * 1)',\n 4.5: 'calc(var(--tsrd-font-size) * 1.125)',\n 5: 'calc(var(--tsrd-font-size) * 1.25)',\n 5.5: 'calc(var(--tsrd-font-size) * 1.375)',\n 6: 'calc(var(--tsrd-font-size) * 1.5)',\n 6.5: 'calc(var(--tsrd-font-size) * 1.625)',\n 7: 'calc(var(--tsrd-font-size) * 1.75)',\n 8: 'calc(var(--tsrd-font-size) * 2)',\n 9: 'calc(var(--tsrd-font-size) * 2.25)',\n 10: 'calc(var(--tsrd-font-size) * 2.5)',\n 11: 'calc(var(--tsrd-font-size) * 2.75)',\n 12: 'calc(var(--tsrd-font-size) * 3)',\n 14: 'calc(var(--tsrd-font-size) * 3.5)',\n 16: 'calc(var(--tsrd-font-size) * 4)',\n 20: 'calc(var(--tsrd-font-size) * 5)',\n 24: 'calc(var(--tsrd-font-size) * 6)',\n 28: 'calc(var(--tsrd-font-size) * 7)',\n 32: 'calc(var(--tsrd-font-size) * 8)',\n 36: 'calc(var(--tsrd-font-size) * 9)',\n 40: 'calc(var(--tsrd-font-size) * 10)',\n 44: 'calc(var(--tsrd-font-size) * 11)',\n 48: 'calc(var(--tsrd-font-size) * 12)',\n 52: 'calc(var(--tsrd-font-size) * 13)',\n 56: 'calc(var(--tsrd-font-size) * 14)',\n 60: 'calc(var(--tsrd-font-size) * 15)',\n 64: 'calc(var(--tsrd-font-size) * 16)',\n 72: 'calc(var(--tsrd-font-size) * 18)',\n 80: 'calc(var(--tsrd-font-size) * 20)',\n 96: 'calc(var(--tsrd-font-size) * 24)',\n },\n shadow: {\n xs: (_: string = 'rgb(0 0 0 / 0.1)') =>\n `0 1px 2px 0 rgb(0 0 0 / 0.05)` as const,\n sm: (color: string = 'rgb(0 0 0 / 0.1)') =>\n `0 1px 3px 0 ${color}, 0 1px 2px -1px ${color}` as const,\n md: (color: string = 'rgb(0 0 0 / 0.1)') =>\n `0 4px 6px -1px ${color}, 0 2px 4px -2px ${color}` as const,\n lg: (color: string = 'rgb(0 0 0 / 0.1)') =>\n `0 10px 15px -3px ${color}, 0 4px 6px -4px ${color}` as const,\n xl: (color: string = 'rgb(0 0 0 / 0.1)') =>\n `0 20px 25px -5px ${color}, 0 8px 10px -6px ${color}` as const,\n '2xl': (color: string = 'rgb(0 0 0 / 0.25)') =>\n `0 25px 50px -12px ${color}` as const,\n inner: (color: string = 'rgb(0 0 0 / 0.05)') =>\n `inset 0 2px 4px 0 ${color}` as const,\n none: () => `none` as const,\n },\n zIndices: {\n hide: -1,\n auto: 'auto',\n base: 0,\n docked: 10,\n dropdown: 1000,\n sticky: 1100,\n banner: 1200,\n overlay: 1300,\n modal: 1400,\n popover: 1500,\n skipLink: 1600,\n toast: 1700,\n tooltip: 1800,\n },\n} as const\n"],"names":[],"mappings":"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"}
package/dist/esm/styles/use-styles.js CHANGED
@@ -4,18 +4,18 @@ import { useTheme } from "../components/theme.js";
4
4
  import { tokens } from "./tokens.js";
5
5
  const buttonVariantColors = {
6
6
  primary: {
7
- bg: tokens.colors.purple[500],
8
- hover: tokens.colors.purple[600],
9
- active: tokens.colors.purple[700],
7
+ bg: tokens.colors.gray[900],
8
+ hover: tokens.colors.gray[800],
9
+ active: tokens.colors.gray[700],
10
10
  text: "#fff",
11
- border: tokens.colors.purple[500]
11
+ border: tokens.colors.gray[900]
12
12
  },
13
13
  secondary: {
14
- bg: tokens.colors.gray[800],
15
- hover: tokens.colors.gray[700],
16
- active: tokens.colors.gray[600],
17
- text: tokens.colors.gray[100],
18
- border: tokens.colors.gray[700]
14
+ bg: tokens.colors.gray[100],
15
+ hover: tokens.colors.gray[200],
16
+ active: tokens.colors.gray[300],
17
+ text: tokens.colors.gray[900],
18
+ border: tokens.colors.gray[300]
19
19
  },
20
20
  info: {
21
21
  bg: tokens.colors.blue[500],
@@ -48,7 +48,7 @@ const buttonVariantColors = {
48
48
  };
49
49
  const css = goober.css;
50
50
  const stylesFactory = (theme = "dark") => {
51
- const { colors, font, size, alpha, border } = tokens;
51
+ const { colors, font, size, border } = tokens;
52
52
  const { fontFamily } = font;
53
53
  const t = (light, dark) => theme === "light" ? light : dark;
54
54
  const wrapperSize = 320;
@@ -94,13 +94,13 @@ const stylesFactory = (theme = "dark") => {
94
94
  select: css`
95
95
  appearance: none;
96
96
  width: 100%;
97
- padding: 0.75rem 3rem 0.75rem 0.75rem;
98
- border-radius: 0.5rem;
97
+ padding: 0.5rem 3rem 0.5rem 0.75rem;
98
+ border-radius: 0.375rem;
99
99
  background-color: ${t(colors.gray[50], colors.darkGray[800])};
100
100
  color: ${t(colors.gray[900], colors.gray[100])};
101
- border: 1px solid ${t(colors.gray[300], colors.gray[700])};
101
+ border: 1px solid ${t(colors.gray[200], colors.gray[800])};
102
102
  font-size: 0.875rem;
103
- transition: all 0.2s ease;
103
+ transition: all 0.15s ease;
104
104
  cursor: pointer;
105
105
 
106
106
  /* Custom arrow */
@@ -110,13 +110,13 @@ const stylesFactory = (theme = "dark") => {
110
110
  background-size: 1.25rem;
111
111
 
112
112
  &:hover {
113
- border-color: ${t(colors.gray[400], colors.gray[600])};
113
+ border-color: ${t(colors.gray[300], colors.gray[700])};
114
114
  }
115
115
 
116
116
  &:focus {
117
117
  outline: none;
118
- border-color: ${colors.purple[400]};
119
- box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};
118
+ border-color: ${colors.gray[400]};
119
+ box-shadow: 0 0 0 3px ${t(colors.gray[200], colors.gray[800])};
120
120
  }
121
121
  `,
122
122
  inputWrapper: css`
@@ -146,28 +146,27 @@ const stylesFactory = (theme = "dark") => {
146
146
  appearance: none;
147
147
  box-sizing: border-box;
148
148
  width: 100%;
149
- padding: 0.75rem;
150
- border-radius: 0.5rem;
149
+ padding: 0.5rem 0.75rem;
150
+ border-radius: 0.375rem;
151
151
  background-color: ${t(colors.gray[50], colors.darkGray[800])};
152
152
  color: ${t(colors.gray[900], colors.gray[100])};
153
- border: 1px solid ${t(colors.gray[300], colors.gray[700])};
153
+ border: 1px solid ${t(colors.gray[200], colors.gray[800])};
154
154
  font-size: 0.875rem;
155
155
  font-family: ${fontFamily.mono};
156
- transition: all 0.2s ease;
156
+ transition: all 0.15s ease;
157
157
 
158
158
  &::placeholder {
159
159
  color: ${t(colors.gray[400], colors.gray[500])};
160
160
  }
161
161
 
162
162
  &:hover {
163
- border-color: ${t(colors.gray[400], colors.gray[600])};
163
+ border-color: ${t(colors.gray[300], colors.gray[700])};
164
164
  }
165
165
 
166
166
  &:focus {
167
167
  outline: none;
168
- border-color: ${t(colors.purple[500], colors.purple[400])};
169
- box-shadow: 0 0 0 3px
170
- ${t(colors.purple[100] + alpha[20], colors.purple[400] + alpha[20])};
168
+ border-color: ${t(colors.gray[400], colors.gray[600])};
169
+ box-shadow: 0 0 0 3px ${t(colors.gray[200], colors.gray[800])};
171
170
  }
172
171
  `,
173
172
  checkboxWrapper: css`
@@ -176,12 +175,12 @@ const stylesFactory = (theme = "dark") => {
176
175
  gap: 0.75rem;
177
176
  cursor: pointer;
178
177
  user-select: none;
179
- padding: 0.5rem;
180
- border-radius: 0.5rem;
181
- transition: background-color 0.2s ease;
178
+ padding: 0.375rem;
179
+ border-radius: 0.375rem;
180
+ transition: background-color 0.15s ease;
182
181
 
183
182
  &:hover {
184
- background-color: ${t(colors.gray[100], colors.darkGray[800])};
183
+ background-color: ${t(colors.gray[50], colors.darkGray[900])};
185
184
  }
186
185
  `,
187
186
  checkboxContainer: css`
@@ -198,28 +197,28 @@ const stylesFactory = (theme = "dark") => {
198
197
  width: 1.25rem;
199
198
  height: 1.25rem;
200
199
  border: 2px solid ${t(colors.gray[300], colors.gray[700])};
201
- border-radius: 0.375rem;
200
+ border-radius: 0.25rem;
202
201
  background-color: ${t(colors.gray[50], colors.darkGray[800])};
203
202
  display: grid;
204
203
  place-items: center;
205
- transition: all 0.2s ease;
204
+ transition: all 0.15s ease;
206
205
  flex-shrink: 0;
207
206
  margin-top: 0.125rem;
208
207
 
209
208
  &:hover {
210
- border-color: ${t(colors.purple[500], colors.purple[400])};
209
+ border-color: ${t(colors.gray[400], colors.gray[600])};
211
210
  }
212
211
 
213
212
  &:checked {
214
- background-color: ${t(colors.purple[500], colors.purple[700])};
215
- border-color: ${t(colors.purple[500], colors.purple[700])};
213
+ background-color: ${t(colors.gray[900], colors.gray[100])};
214
+ border-color: ${t(colors.gray[900], colors.gray[100])};
216
215
  }
217
216
 
218
217
  &:checked::after {
219
218
  content: '';
220
219
  width: 0.4rem;
221
220
  height: 0.6rem;
222
- border: solid ${t("#fff", colors.gray[100])};
221
+ border: solid ${t("#fff", colors.gray[900])};
223
222
  border-width: 0 2px 2px 0;
224
223
  transform: rotate(45deg);
225
224
  margin-top: -3px;
@@ -246,14 +245,14 @@ const stylesFactory = (theme = "dark") => {
246
245
  font-family: ${tokens.font.fontFamily.sans};
247
246
  font-size: 0.8rem;
248
247
  font-weight: 500;
249
- border-radius: 0.2rem;
250
- padding: 0.2rem 0.6rem;
248
+ border-radius: 0.375rem;
249
+ padding: 0.375rem 0.75rem;
251
250
  cursor: pointer;
252
251
  transition:
253
- background 0.2s,
254
- color 0.2s,
255
- border 0.2s,
256
- box-shadow 0.2s;
252
+ background 0.15s,
253
+ color 0.15s,
254
+ border 0.15s,
255
+ box-shadow 0.15s;
257
256
  outline: none;
258
257
  border-width: 1px;
259
258
  border-style: solid;
@@ -266,10 +265,10 @@ const stylesFactory = (theme = "dark") => {
266
265
  color: ${t(v.bg, v.bg)};
267
266
  border-color: transparent;
268
267
  &:hover {
269
- background: ${t(colors.purple[100], colors.darkGray[700])};
268
+ background: ${t(colors.gray[100], colors.darkGray[800])};
270
269
  }
271
270
  &:active {
272
- background: ${t(colors.purple[200], colors.darkGray[800])};
271
+ background: ${t(colors.gray[200], colors.darkGray[700])};
273
272
  }
274
273
  `;
275
274
  }
@@ -279,11 +278,11 @@ const stylesFactory = (theme = "dark") => {
279
278
  color: ${t(v.bg, v.bg)};
280
279
  border-color: ${t(v.bg, v.bg)};
281
280
  &:hover {
282
- background: ${t(colors.purple[100], colors.darkGray[700])};
281
+ background: ${t(colors.gray[50], colors.darkGray[800])};
283
282
  border-color: ${t(v.hover, v.hover)};
284
283
  }
285
284
  &:active {
286
- background: ${t(colors.purple[200], colors.darkGray[800])};
285
+ background: ${t(colors.gray[100], colors.darkGray[700])};
287
286
  border-color: ${t(v.active, v.active)};
288
287
  }
289
288
  `;
@@ -523,48 +522,45 @@ const stylesFactory = (theme = "dark") => {
523
522
  },
524
523
  section: {
525
524
  main: css`
526
- margin-bottom: 2rem;
527
- padding: 1.5rem;
525
+ margin-bottom: 1.5rem;
526
+ padding: 1rem;
528
527
  background-color: ${t(colors.gray[50], colors.darkGray[800])};
529
- border: 1px solid ${t(colors.gray[300], colors.gray[700])};
530
- border-radius: 0.75rem;
531
- box-shadow: ${t(
532
- "0 1px 3px rgba(0,0,0,0.06)",
533
- "0 1px 3px rgba(0,0,0,0.18)"
534
- )};
528
+ border: 1px solid ${t(colors.gray[200], colors.gray[800])};
529
+ border-radius: 0.5rem;
530
+ box-shadow: none;
535
531
  `,
536
532
  title: css`
537
- font-size: 1.125rem;
533
+ font-size: 1rem;
538
534
  font-weight: 600;
539
535
  color: ${t(colors.gray[900], colors.gray[100])};
540
- margin: 0 0 1rem 0;
536
+ margin: 0 0 0.75rem 0;
541
537
  padding-bottom: 0.5rem;
542
- border-bottom: 1px solid ${t(colors.gray[300], colors.gray[700])};
538
+ border-bottom: 1px solid ${t(colors.gray[200], colors.gray[800])};
543
539
  display: flex;
544
540
  align-items: center;
545
541
  gap: 0.5rem;
546
542
  text-align: left;
547
543
  `,
548
544
  icon: css`
549
- height: 20px;
550
- width: 20px;
545
+ height: 18px;
546
+ width: 18px;
551
547
  & > svg {
552
548
  height: 100%;
553
549
  width: 100%;
554
550
  }
555
- color: ${t(colors.purple[500], colors.purple[400])};
551
+ color: ${t(colors.gray[700], colors.gray[400])};
556
552
  `,
557
553
  description: css`
558
554
  color: ${t(colors.gray[500], colors.gray[400])};
559
- font-size: 0.875rem;
560
- margin: 0 0 1.5rem 0;
561
- line-height: 1.5;
555
+ font-size: 0.8rem;
556
+ margin: 0 0 1rem 0;
557
+ line-height: 1.4;
562
558
  text-align: left;
563
559
  `
564
560
  },
565
561
  mainPanel: {
566
562
  panel: (withPadding) => css`
567
- padding: ${withPadding ? tokens.size[4] : 0};
563
+ padding: ${withPadding ? tokens.size[3] : 0};
568
564
  background: ${t(colors.gray[50], colors.darkGray[700])};
569
565
  overflow-y: auto;
570
566
  height: 100%;
package/dist/esm/styles/use-styles.js.map CHANGED
@@ -1 +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.purple[500],\n hover: tokens.colors.purple[600],\n active: tokens.colors.purple[700],\n text: '#fff',\n border: tokens.colors.purple[500],\n },\n secondary: {\n bg: tokens.colors.gray[800],\n hover: tokens.colors.gray[700],\n active: tokens.colors.gray[600],\n text: tokens.colors.gray[100],\n border: tokens.colors.gray[700],\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, alpha, 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.75rem 3rem 0.75rem 0.75rem;\n border-radius: 0.5rem;\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[300], colors.gray[700])};\n font-size: 0.875rem;\n transition: all 0.2s 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[400], colors.gray[600])};\n }\n\n &:focus {\n outline: none;\n border-color: ${colors.purple[400]};\n box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};\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.75rem;\n border-radius: 0.5rem;\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[300], colors.gray[700])};\n font-size: 0.875rem;\n font-family: ${fontFamily.mono};\n transition: all 0.2s ease;\n\n &::placeholder {\n color: ${t(colors.gray[400], colors.gray[500])};\n }\n\n &:hover {\n border-color: ${t(colors.gray[400], colors.gray[600])};\n }\n\n &:focus {\n outline: none;\n border-color: ${t(colors.purple[500], colors.purple[400])};\n box-shadow: 0 0 0 3px\n ${t(colors.purple[100] + alpha[20], colors.purple[400] + alpha[20])};\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.5rem;\n border-radius: 0.5rem;\n transition: background-color 0.2s ease;\n\n &:hover {\n background-color: ${t(colors.gray[100], colors.darkGray[800])};\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.375rem;\n background-color: ${t(colors.gray[50], colors.darkGray[800])};\n display: grid;\n place-items: center;\n transition: all 0.2s ease;\n flex-shrink: 0;\n margin-top: 0.125rem;\n\n &:hover {\n border-color: ${t(colors.purple[500], colors.purple[400])};\n }\n\n &:checked {\n background-color: ${t(colors.purple[500], colors.purple[700])};\n border-color: ${t(colors.purple[500], colors.purple[700])};\n }\n\n &:checked::after {\n content: '';\n width: 0.4rem;\n height: 0.6rem;\n border: solid ${t('#fff', colors.gray[100])};\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.2rem;\n padding: 0.2rem 0.6rem;\n cursor: pointer;\n transition:\n background 0.2s,\n color 0.2s,\n border 0.2s,\n box-shadow 0.2s;\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.purple[100], colors.darkGray[700])};\n }\n &:active {\n background: ${t(colors.purple[200], colors.darkGray[800])};\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.purple[100], colors.darkGray[700])};\n border-color: ${t(v.hover, v.hover)};\n }\n &:active {\n background: ${t(colors.purple[200], colors.darkGray[800])};\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: 2rem;\n padding: 1.5rem;\n background-color: ${t(colors.gray[50], colors.darkGray[800])};\n border: 1px solid ${t(colors.gray[300], colors.gray[700])};\n border-radius: 0.75rem;\n box-shadow: ${t(\n '0 1px 3px rgba(0,0,0,0.06)',\n '0 1px 3px rgba(0,0,0,0.18)',\n )};\n `,\n title: css`\n font-size: 1.125rem;\n font-weight: 600;\n color: ${t(colors.gray[900], colors.gray[100])};\n margin: 0 0 1rem 0;\n padding-bottom: 0.5rem;\n border-bottom: 1px solid ${t(colors.gray[300], colors.gray[700])};\n display: flex;\n align-items: center;\n gap: 0.5rem;\n text-align: left;\n `,\n icon: css`\n height: 20px;\n width: 20px;\n & > svg {\n height: 100%;\n width: 100%;\n }\n color: ${t(colors.purple[500], colors.purple[400])};\n `,\n description: css`\n color: ${t(colors.gray[500], colors.gray[400])};\n font-size: 0.875rem;\n margin: 0 0 1.5rem 0;\n line-height: 1.5;\n text-align: left;\n `,\n },\n mainPanel: {\n panel: (withPadding: boolean) => css`\n padding: ${withPadding ? tokens.size[4] : 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":"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"}
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":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tanstack/devtools-ui",
3
- "version": "0.4.1",
3
+ "version": "0.4.2",
4
4
  "description": "TanStack Devtools UI is a set of UI components for building devtool panels for your application.",
5
5
  "author": "Tanner Linsley",
6
6
  "license": "MIT",
package/src/styles/use-styles.ts CHANGED
@@ -10,18 +10,18 @@ const buttonVariantColors: Record<
10
10
  { bg: string; hover: string; active: string; text: string; border: string }
11
11
  > = {
12
12
  primary: {
13
- bg: tokens.colors.purple[500],
14
- hover: tokens.colors.purple[600],
15
- active: tokens.colors.purple[700],
13
+ bg: tokens.colors.gray[900],
14
+ hover: tokens.colors.gray[800],
15
+ active: tokens.colors.gray[700],
16
16
  text: '#fff',
17
- border: tokens.colors.purple[500],
17
+ border: tokens.colors.gray[900],
18
18
  },
19
19
  secondary: {
20
- bg: tokens.colors.gray[800],
21
- hover: tokens.colors.gray[700],
22
- active: tokens.colors.gray[600],
23
- text: tokens.colors.gray[100],
24
- border: tokens.colors.gray[700],
20
+ bg: tokens.colors.gray[100],
21
+ hover: tokens.colors.gray[200],
22
+ active: tokens.colors.gray[300],
23
+ text: tokens.colors.gray[900],
24
+ border: tokens.colors.gray[300],
25
25
  },
26
26
  info: {
27
27
  bg: tokens.colors.blue[500],
@@ -54,7 +54,7 @@ const buttonVariantColors: Record<
54
54
  }
55
55
  export const css = goober.css
56
56
  const stylesFactory = (theme: Theme = 'dark') => {
57
- const { colors, font, size, alpha, border } = tokens
57
+ const { colors, font, size, border } = tokens
58
58
  const { fontFamily } = font
59
59
 
60
60
  const t = (light: string, dark: string) => (theme === 'light' ? light : dark)
@@ -104,13 +104,13 @@ const stylesFactory = (theme: Theme = 'dark') => {
104
104
  select: css`
105
105
  appearance: none;
106
106
  width: 100%;
107
- padding: 0.75rem 3rem 0.75rem 0.75rem;
108
- border-radius: 0.5rem;
107
+ padding: 0.5rem 3rem 0.5rem 0.75rem;
108
+ border-radius: 0.375rem;
109
109
  background-color: ${t(colors.gray[50], colors.darkGray[800])};
110
110
  color: ${t(colors.gray[900], colors.gray[100])};
111
- border: 1px solid ${t(colors.gray[300], colors.gray[700])};
111
+ border: 1px solid ${t(colors.gray[200], colors.gray[800])};
112
112
  font-size: 0.875rem;
113
- transition: all 0.2s ease;
113
+ transition: all 0.15s ease;
114
114
  cursor: pointer;
115
115
 
116
116
  /* Custom arrow */
@@ -120,13 +120,13 @@ const stylesFactory = (theme: Theme = 'dark') => {
120
120
  background-size: 1.25rem;
121
121
 
122
122
  &:hover {
123
- border-color: ${t(colors.gray[400], colors.gray[600])};
123
+ border-color: ${t(colors.gray[300], colors.gray[700])};
124
124
  }
125
125
 
126
126
  &:focus {
127
127
  outline: none;
128
- border-color: ${colors.purple[400]};
129
- box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};
128
+ border-color: ${colors.gray[400]};
129
+ box-shadow: 0 0 0 3px ${t(colors.gray[200], colors.gray[800])};
130
130
  }
131
131
  `,
132
132
  inputWrapper: css`
@@ -156,28 +156,27 @@ const stylesFactory = (theme: Theme = 'dark') => {
156
156
  appearance: none;
157
157
  box-sizing: border-box;
158
158
  width: 100%;
159
- padding: 0.75rem;
160
- border-radius: 0.5rem;
159
+ padding: 0.5rem 0.75rem;
160
+ border-radius: 0.375rem;
161
161
  background-color: ${t(colors.gray[50], colors.darkGray[800])};
162
162
  color: ${t(colors.gray[900], colors.gray[100])};
163
- border: 1px solid ${t(colors.gray[300], colors.gray[700])};
163
+ border: 1px solid ${t(colors.gray[200], colors.gray[800])};
164
164
  font-size: 0.875rem;
165
165
  font-family: ${fontFamily.mono};
166
- transition: all 0.2s ease;
166
+ transition: all 0.15s ease;
167
167
 
168
168
  &::placeholder {
169
169
  color: ${t(colors.gray[400], colors.gray[500])};
170
170
  }
171
171
 
172
172
  &:hover {
173
- border-color: ${t(colors.gray[400], colors.gray[600])};
173
+ border-color: ${t(colors.gray[300], colors.gray[700])};
174
174
  }
175
175
 
176
176
  &:focus {
177
177
  outline: none;
178
- border-color: ${t(colors.purple[500], colors.purple[400])};
179
- box-shadow: 0 0 0 3px
180
- ${t(colors.purple[100] + alpha[20], colors.purple[400] + alpha[20])};
178
+ border-color: ${t(colors.gray[400], colors.gray[600])};
179
+ box-shadow: 0 0 0 3px ${t(colors.gray[200], colors.gray[800])};
181
180
  }
182
181
  `,
183
182
  checkboxWrapper: css`
@@ -186,12 +185,12 @@ const stylesFactory = (theme: Theme = 'dark') => {
186
185
  gap: 0.75rem;
187
186
  cursor: pointer;
188
187
  user-select: none;
189
- padding: 0.5rem;
190
- border-radius: 0.5rem;
191
- transition: background-color 0.2s ease;
188
+ padding: 0.375rem;
189
+ border-radius: 0.375rem;
190
+ transition: background-color 0.15s ease;
192
191
 
193
192
  &:hover {
194
- background-color: ${t(colors.gray[100], colors.darkGray[800])};
193
+ background-color: ${t(colors.gray[50], colors.darkGray[900])};
195
194
  }
196
195
  `,
197
196
  checkboxContainer: css`
@@ -208,28 +207,28 @@ const stylesFactory = (theme: Theme = 'dark') => {
208
207
  width: 1.25rem;
209
208
  height: 1.25rem;
210
209
  border: 2px solid ${t(colors.gray[300], colors.gray[700])};
211
- border-radius: 0.375rem;
210
+ border-radius: 0.25rem;
212
211
  background-color: ${t(colors.gray[50], colors.darkGray[800])};
213
212
  display: grid;
214
213
  place-items: center;
215
- transition: all 0.2s ease;
214
+ transition: all 0.15s ease;
216
215
  flex-shrink: 0;
217
216
  margin-top: 0.125rem;
218
217
 
219
218
  &:hover {
220
- border-color: ${t(colors.purple[500], colors.purple[400])};
219
+ border-color: ${t(colors.gray[400], colors.gray[600])};
221
220
  }
222
221
 
223
222
  &:checked {
224
- background-color: ${t(colors.purple[500], colors.purple[700])};
225
- border-color: ${t(colors.purple[500], colors.purple[700])};
223
+ background-color: ${t(colors.gray[900], colors.gray[100])};
224
+ border-color: ${t(colors.gray[900], colors.gray[100])};
226
225
  }
227
226
 
228
227
  &:checked::after {
229
228
  content: '';
230
229
  width: 0.4rem;
231
230
  height: 0.6rem;
232
- border: solid ${t('#fff', colors.gray[100])};
231
+ border: solid ${t('#fff', colors.gray[900])};
233
232
  border-width: 0 2px 2px 0;
234
233
  transform: rotate(45deg);
235
234
  margin-top: -3px;
@@ -256,14 +255,14 @@ const stylesFactory = (theme: Theme = 'dark') => {
256
255
  font-family: ${tokens.font.fontFamily.sans};
257
256
  font-size: 0.8rem;
258
257
  font-weight: 500;
259
- border-radius: 0.2rem;
260
- padding: 0.2rem 0.6rem;
258
+ border-radius: 0.375rem;
259
+ padding: 0.375rem 0.75rem;
261
260
  cursor: pointer;
262
261
  transition:
263
- background 0.2s,
264
- color 0.2s,
265
- border 0.2s,
266
- box-shadow 0.2s;
262
+ background 0.15s,
263
+ color 0.15s,
264
+ border 0.15s,
265
+ box-shadow 0.15s;
267
266
  outline: none;
268
267
  border-width: 1px;
269
268
  border-style: solid;
@@ -276,10 +275,10 @@ const stylesFactory = (theme: Theme = 'dark') => {
276
275
  color: ${t(v.bg, v.bg)};
277
276
  border-color: transparent;
278
277
  &:hover {
279
- background: ${t(colors.purple[100], colors.darkGray[700])};
278
+ background: ${t(colors.gray[100], colors.darkGray[800])};
280
279
  }
281
280
  &:active {
282
- background: ${t(colors.purple[200], colors.darkGray[800])};
281
+ background: ${t(colors.gray[200], colors.darkGray[700])};
283
282
  }
284
283
  `
285
284
  }
@@ -289,11 +288,11 @@ const stylesFactory = (theme: Theme = 'dark') => {
289
288
  color: ${t(v.bg, v.bg)};
290
289
  border-color: ${t(v.bg, v.bg)};
291
290
  &:hover {
292
- background: ${t(colors.purple[100], colors.darkGray[700])};
291
+ background: ${t(colors.gray[50], colors.darkGray[800])};
293
292
  border-color: ${t(v.hover, v.hover)};
294
293
  }
295
294
  &:active {
296
- background: ${t(colors.purple[200], colors.darkGray[800])};
295
+ background: ${t(colors.gray[100], colors.darkGray[700])};
297
296
  border-color: ${t(v.active, v.active)};
298
297
  }
299
298
  `
@@ -536,48 +535,45 @@ const stylesFactory = (theme: Theme = 'dark') => {
536
535
  },
537
536
  section: {
538
537
  main: css`
539
- margin-bottom: 2rem;
540
- padding: 1.5rem;
538
+ margin-bottom: 1.5rem;
539
+ padding: 1rem;
541
540
  background-color: ${t(colors.gray[50], colors.darkGray[800])};
542
- border: 1px solid ${t(colors.gray[300], colors.gray[700])};
543
- border-radius: 0.75rem;
544
- box-shadow: ${t(
545
- '0 1px 3px rgba(0,0,0,0.06)',
546
- '0 1px 3px rgba(0,0,0,0.18)',
547
- )};
541
+ border: 1px solid ${t(colors.gray[200], colors.gray[800])};
542
+ border-radius: 0.5rem;
543
+ box-shadow: none;
548
544
  `,
549
545
  title: css`
550
- font-size: 1.125rem;
546
+ font-size: 1rem;
551
547
  font-weight: 600;
552
548
  color: ${t(colors.gray[900], colors.gray[100])};
553
- margin: 0 0 1rem 0;
549
+ margin: 0 0 0.75rem 0;
554
550
  padding-bottom: 0.5rem;
555
- border-bottom: 1px solid ${t(colors.gray[300], colors.gray[700])};
551
+ border-bottom: 1px solid ${t(colors.gray[200], colors.gray[800])};
556
552
  display: flex;
557
553
  align-items: center;
558
554
  gap: 0.5rem;
559
555
  text-align: left;
560
556
  `,
561
557
  icon: css`
562
- height: 20px;
563
- width: 20px;
558
+ height: 18px;
559
+ width: 18px;
564
560
  & > svg {
565
561
  height: 100%;
566
562
  width: 100%;
567
563
  }
568
- color: ${t(colors.purple[500], colors.purple[400])};
564
+ color: ${t(colors.gray[700], colors.gray[400])};
569
565
  `,
570
566
  description: css`
571
567
  color: ${t(colors.gray[500], colors.gray[400])};
572
- font-size: 0.875rem;
573
- margin: 0 0 1.5rem 0;
574
- line-height: 1.5;
568
+ font-size: 0.8rem;
569
+ margin: 0 0 1rem 0;
570
+ line-height: 1.4;
575
571
  text-align: left;
576
572
  `,
577
573
  },
578
574
  mainPanel: {
579
575
  panel: (withPadding: boolean) => css`
580
- padding: ${withPadding ? tokens.size[4] : 0};
576
+ padding: ${withPadding ? tokens.size[3] : 0};
581
577
  background: ${t(colors.gray[50], colors.darkGray[700])};
582
578
  overflow-y: auto;
583
579
  height: 100%;