Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/applet/src/components/state/RootStateViewer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ const { expanded, toggleExpanded } = useToggleExpanded(props.expandedStateId)
/>
<!-- placeholder -->
<span v-else pl5 />
<span font-state-field text-3.5>
<span font-state-field text-3.5 text-hex-a3a3a3>
{{ key }}
</span>
</div>
Expand Down
17 changes: 14 additions & 3 deletions packages/applet/src/components/state/StateFieldViewer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const stateFormatClass = computed(() => {
if (type.value === 'custom')
return `${(props.data.value as InspectorCustomState)._custom?.type ?? 'string'}-custom-state`
else
return ``
return 'unknown-state-type'
})

const fieldsCount = computed(() => {
Expand Down Expand Up @@ -199,12 +199,12 @@ async function submitDrafting() {
/>
<!-- placeholder -->
<span v-else pl5 />
<span op70 class="whitespace-nowrap">
<span whitespace-nowrap text-purple-700 op70 dark:text-purple-300>
{{ normalizedDisplayedKey }}
</span>
<span mx1>:</span>
<StateFieldInputEditor v-if="editing" v-model="editingText" class="mr-1" :custom-type="raw.customType" @cancel="toggleEditing" @submit="submit" />
<span :class="stateFormatClass" class="flex whitespace-nowrap">
<span :class="stateFormatClass" class="flex whitespace-nowrap dark:text-#bdc6cf">
<span class="flex" v-html="normalizedDisplayedValue" />
</span>
<StateFieldEditor
Expand All @@ -231,6 +231,17 @@ async function submitDrafting() {
</div>
</template>

<style lang="scss">
// Maybe related https://github.com/vuejs/core/issues/12241
// Let's leave it global for now, until it's fixed
// This will compiled to `.dark[v-xxx] selectors` if using scoped
.function-custom-state {
& > span {
--at-apply: 'dark:text-#997fff!';
}
}
</style>

<style lang="scss" scoped>
// string
:deep(.string-custom-state) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ function close() {
</script>

<template>
<div class="absolute left-0 top-0 h-full w-full flex flex-col rounded-br-2.5 rounded-tr-2.5 bg-white p2 dark:bg-[#121212]">
<div class="absolute left-0 top-0 h-full w-full flex flex-col rounded-br-2.5 rounded-tr-2.5 bg-white p2 dark:bg-#121212">
<div class="h-12 w-full flex items-center justify-between p-2">
<span class="font-500">Render Code</span>
<i class="i-carbon-close cursor-pointer hover:op80" @click="close" />
Expand Down
8 changes: 4 additions & 4 deletions packages/applet/uno.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,19 +38,19 @@ export default defineConfig(mergeConfigs([unoConfig, {
],
shortcuts: [{
// general
'bg-base': 'bg-white dark:bg-black',
'text-base': 'text-black dark:text-white',
'bg-base': 'bg-white dark:bg-#121212',
'text-base': 'text-black dark:text-#dfe0e2',
'bg-active': 'bg-gray:5',
'border-base': 'border-gray/20',
'transition-base': 'transition-all duration-200',

// selective list
'selectable-item': 'flex items-center px-2 py-1 rounded cursor-pointer hover:bg-primary-200 dark:(hover:bg-gray-800) @active:(text-white bg-primary-600 hover:(text-white bg-primary-600))',

'code-block': 'dark:bg-[#121212] bg-white',
'code-block': 'dark:bg-#121212 bg-white',

// state
'string-state-type': 'text-#e74c3c dark:(text-#c41a16)',
'string-state-type': 'text-#e74c3c dark:(text-#FFB980)',
'literal-state-type': 'text-#03c dark:(text-#997fff)',
'boolean-state-type': 'text-#27ae60 dark:(text-#abebc6)',
'null-state-type': 'text-#999',
Expand Down
2 changes: 1 addition & 1 deletion packages/client/src/assets/styles/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ body::-webkit-scrollbar {
.v-popper--theme-tooltip .v-popper__arrow-inner,
.v-popper--theme-dropdown .v-popper__arrow-inner {
visibility: visible;
--uno: 'border-white dark:border-hex-121212';
--uno: 'border-white dark:border-#121212';
}

.v-popper--theme-tooltip .v-popper__arrow-outer,
Expand Down
10 changes: 5 additions & 5 deletions packages/client/uno.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,8 @@ export default defineConfig(mergeConfigs([unoConfig, {
],
shortcuts: [{
// general
'bg-base': 'bg-white dark:bg-[#121212]',
'text-base': 'text-black dark:text-white',
'bg-base': 'bg-white dark:bg-#121212',
'text-base': 'text-black dark:text-#dfe0e2',
'bg-active': 'bg-gray:5',
'border-base': 'border-gray/20',
'navbar-base': 'border-b border-base h-50px',
Expand All @@ -61,11 +61,11 @@ export default defineConfig(mergeConfigs([unoConfig, {
'x-divider': 'h-1px w-full bg-gray/15',

// glass
'glass-effect': 'backdrop-blur-6 bg-white/80 dark:bg-[#121212]/90',
'glass-effect': 'backdrop-blur-6 bg-white/80 dark:bg-#121212/90',
'navbar-glass': 'sticky z-10 top-0 glass-effect',

// code
'code-block': 'dark:bg-[#121212] bg-white',
'code-block': 'dark:bg-#121212 bg-white',

// panel grids
'panel-grids': 'panel-grids-light dark:panel-grids-dark',
Expand All @@ -80,7 +80,7 @@ export default defineConfig(mergeConfigs([unoConfig, {
'state-value': 'text-#444 dark:(text-#bdc6cf)',
'state-value-label': 'text-gray-500',
'state-value-literal': 'text-#03c dark:(text-#997fff)',
'state-value-string': 'text-#c41a16',
'state-value-string': 'text-#FFB980',
}, [/^theme-card-(\w+)$/, $ => `p2 flex gap2 border border-base bg-base items-center rounded min-w-40 min-h-25 justify-center transition-all saturate-0 op50 shadow hover:(op100 bg-${$[1]}/10 text-${$[1]}6 saturate-100)`]],
presets: [
presetAttributify(),
Expand Down
2 changes: 1 addition & 1 deletion packages/devtools-kit/src/core/component/state/custom.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export function getFunctionDetails(func: Function) {
return {
_custom: {
type: 'function' satisfies customTypeEnums,
displayText: `<span style="opacity:.5;margin-right:5px;">function</span> <span style="white-space:nowrap;">${escape(name)}${args}</span>`,
displayText: `<span style="opacity:.8;margin-right:5px;">function</span> <span style="white-space:nowrap;">${escape(name)}${args}</span>`,
tooltipText: string.trim() ? `<pre>${string}</pre>` : null,
},
}
Expand Down
2 changes: 1 addition & 1 deletion packages/overlay/src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const panelState = ref<{
const cssVars = computed(() => {
const dark = mode.value === 'dark'
return {
'--vue-devtools-widget-bg': dark ? '#111' : '#ffffff',
'--vue-devtools-widget-bg': dark ? '#121212' : '#ffffff',
'--vue-devtools-widget-fg': dark ? '#F5F5F5' : '#111',
'--vue-devtools-widget-border': dark ? '#3336' : '#efefef',
'--vue-devtools-widget-shadow': dark ? 'rgba(0,0,0,0.3)' : 'rgba(128,128,128,0.1)',
Expand Down
4 changes: 4 additions & 0 deletions packages/ui/src/components/CodeBlock.vue
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,10 @@ const rendered = computed(() => {
}
}
}
span {
--at-apply: '$ui-bg-base!';
}
--at-apply: '$ui-bg-base!';
}
pre {
&:focus-visible {
Expand Down
6 changes: 3 additions & 3 deletions packages/ui/theme/uno.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -44,14 +44,14 @@ export const unoConfig = {
'$ui-z-max-override': 'z-2147483647',

// general
'$ui-bg-base': 'bg-white dark:bg-black',
'$ui-bg-base': 'bg-white dark:bg-#121212',
'$ui-base': 'box-border font-inherit',
'$ui-transition': 'transition-all duration-300 ease-in-out',
'$ui-borderless': '!border-transparent !shadow-none',
'$ui-base-br': 'rounded-3px',
'$ui-border-base': 'border-gray/20',
'$ui-text': 'text-black dark:text-white',
'$ui-glass-effect': 'backdrop-blur-6 bg-white/80 dark:bg-black/90',
'$ui-text': 'text-black dark:text-#dfe0e2',
'$ui-glass-effect': 'backdrop-blur-6 bg-white/80 dark:bg-#3C3C3C/90',
},
rules: [
['$ui-font-inherit', { 'font-family': 'inherit' }],
Expand Down