Skip to content

Commit

Permalink
feat: refine bg/text color for dark mode (#686)
Browse files Browse the repository at this point in the history
Co-authored-by: arlo <[email protected]>
  • Loading branch information
alexzhang1030 and webfansplz authored Nov 11, 2024
1 parent 30d7875 commit 9e8ae0e
Show file tree
Hide file tree
Showing 10 changed files with 35 additions and 20 deletions.
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

0 comments on commit 9e8ae0e

Please sign in to comment.