Unify input and container styling to glass design

apps/web/src/components/editor/editor.css.ts

@@ -77,7 +77,7 @@ export const toolbarSlot = style({
 
 // MDEditor wrapper — globalStyle overrides for third-party component
 export const editorWrap = style({
-  background: vars.color.surface,
+  background: 'transparent',
   position: 'relative',
   outline: 'none',
 });
@@ -95,9 +95,11 @@ globalStyle(`${editorWrap} .w-md-editor:focus-within`, {
 });
 
 globalStyle(`${editorWrap} .w-md-editor-toolbar`, {
+  // 与编辑器输入区一致：透明背景，透出外层 editorCard 的 glass 底色
+  background: 'transparent',
+  // 上下各一条很轻的分隔线
   borderTop: `1px solid ${vars.color.borderFaint}`,
   borderBottom: `1px solid ${vars.color.borderFaint}`,
-  background: vars.color.surfaceStrong,
   // 右侧留位给「源码/实时」toggle（absolute 定位到工具栏尾部）
   padding: `${vars.spacing.sm} 116px ${vars.spacing.sm} ${vars.spacing.lg}`,
 });
@@ -264,9 +266,9 @@ export const previewPhoneFrame = style({
   width: '100%',
   // 与写作台编辑卡空态等高：titleRow(70) + 编辑区(420) + 数据栏(~45) ≈ 535px
   minHeight: '33.5rem',
-  borderRadius: vars.radius.xl,
-  border: `1px solid ${vars.color.border}`,
-  background: vars.color.surface,
+  borderRadius: vars.radius.lg,
+  border: `1px solid transparent`,
+  background: vars.color.glassInput,
   overflow: 'hidden',
 });
 
@@ -278,7 +280,7 @@ export const previewPhoneBar = style({
   height: '38px',
   padding: `0 ${vars.spacing['lg-xl']}`,
   borderBottom: `1px solid ${vars.color.borderFaint}`,
-  background: vars.color.surfaceStrong,
+  background: 'transparent',
 });
 
 export const previewPhoneBarDot = style({
@@ -302,6 +304,7 @@ export const previewPhoneBarLabel = style({
 // 文章内容内边距容器
 export const previewInner = style({
   padding: `${vars.spacing['4xl']} ${vars.spacing['4xl']} ${vars.spacing['5xl']}`,
+  background: 'transparent',
 });
 
 export const previewKicker = style({

apps/web/src/components/editor/templatePicker.css.ts

@@ -109,15 +109,16 @@ export const saveForm = style({
 
 export const saveInput = style({
   flex: 1,
-  padding: `${vars.spacing.sm} ${vars.spacing['md-lg']}`,
-  borderRadius: vars.radius.lg,
-  border: `1px solid ${vars.color.border}`,
-  background: vars.color.surface,
+  padding: `${vars.spacing['md-lg']} ${vars.spacing.lg}`,
+  borderRadius: vars.radius.md,
+  border: `1px solid transparent`,
+  background: vars.color.glassInput,
   color: vars.color.text,
   fontSize: vars.fontSize.sm,
   outline: 'none',
+  transition: 'border-color 150ms',
   ':focus': {
-    borderColor: vars.color.accent,
+    borderColor: vars.color.glassInputFocus,
   },
 });
 

apps/web/src/components/publish/PublishChecklist.css.ts

@@ -227,17 +227,20 @@ export const resultLink = style({
 export const platformCards = style({
   display: 'flex',
   flexDirection: 'column',
-  gap: vars.spacing['md-lg'],
 });
 
+// 平铺样式：去掉卡片边框/背景/圆角，靠底部分隔线区分条目
 export const variantCard = style({
   display: 'flex',
   flexDirection: 'column',
   gap: vars.spacing.md,
-  borderRadius: vars.radius.lg,
-  border: `1px solid ${vars.color.borderFaint}`,
-  background: vars.color.surfaceStrong,
-  padding: vars.spacing.lg,
+  padding: `${vars.spacing.md} 0`,
+  borderBottom: `1px solid ${vars.color.borderFaint}`,
+  selectors: {
+    '&:last-child': {
+      borderBottom: 'none',
+    },
+  },
 });
 
 export const cardHeader = style({
@@ -353,28 +356,28 @@ export const metaTag = style({
 
 export const titleInput = style({
   width: '100%',
-  borderRadius: vars.radius.sm,
-  border: `1px solid ${vars.color.border}`,
-  background: vars.color.surface,
-  padding: `${vars.spacing.sm} ${vars.spacing.md}`,
+  borderRadius: vars.radius.md,
+  border: `1px solid transparent`,
+  background: vars.color.glassInput,
+  padding: `${vars.spacing['md-lg']} ${vars.spacing.lg}`,
   fontSize: vars.fontSize.sm,
   fontWeight: 500,
   color: vars.color.text,
   outline: 'none',
   transition: 'border-color 150ms',
   ':focus': {
-    borderColor: vars.color.accent,
+    borderColor: vars.color.glassInputFocus,
   },
 });
 
 export const contentArea = style({
   width: '100%',
   minHeight: '80px',
   maxHeight: '200px',
-  borderRadius: vars.radius.sm,
-  border: `1px solid ${vars.color.border}`,
-  background: vars.color.surface,
-  padding: `${vars.spacing.sm} ${vars.spacing.md}`,
+  borderRadius: vars.radius.md,
+  border: `1px solid transparent`,
+  background: vars.color.glassInput,
+  padding: `${vars.spacing['md-lg']} ${vars.spacing.lg}`,
   fontSize: vars.fontSize.xs,
   lineHeight: 1.6,
   color: vars.color.text,
@@ -383,7 +386,7 @@ export const contentArea = style({
   fontFamily: 'inherit',
   transition: 'border-color 150ms',
   ':focus': {
-    borderColor: vars.color.accent,
+    borderColor: vars.color.glassInputFocus,
   },
 });
 

apps/web/src/components/publish/publish.css.ts

@@ -41,25 +41,26 @@ export const platformLabel = recipe({
     cursor: 'pointer',
     userSelect: 'none',
     alignItems: 'center',
-    gap: vars.spacing.md,
-    borderRadius: vars.radius.lg,
-    padding: `${vars.spacing.md} ${vars.spacing.lg}`,
-    fontSize: vars.fontSize.md,
+    gap: vars.spacing.sm,
+    borderRadius: vars.radius.md,
+    padding: `${vars.spacing.sm} ${vars.spacing.md}`,
+    fontSize: vars.fontSize.sm,
+    position: 'relative',
     transition: 'background-color 150ms, color 150ms',
   },
   variants: {
     checked: {
       true: {
-        background: vars.color.accentSoft,
-        fontWeight: 500,
-        color: vars.color.signal,
+        background: vars.color.glassInput,
+        color: vars.color.text,
+        fontWeight: 600,
       },
       false: {
-        background: vars.color.surface,
-        color: vars.color.text,
+        background: 'transparent',
+        color: vars.color.textMuted,
         ':hover': {
-          background: vars.color.bgElevated,
-          color: vars.color.textMuted,
+          background: vars.color.glassInput,
+          color: vars.color.text,
         },
       },
     },

apps/web/src/components/settings/settings.css.ts

@@ -177,7 +177,7 @@ export const promptTab = recipe({
 export const promptTextarea = style({
   width: '100%',
   borderRadius: vars.radius.md,
-  border: 'none',
+  border: `1px solid transparent`,
   background: vars.color.glassInput,
   padding: `${vars.spacing['md-lg']} ${vars.spacing['lg-xl']}`,
   fontSize: vars.fontSize.sm,
@@ -187,7 +187,7 @@ export const promptTextarea = style({
   outline: 'none',
   transition: `border-color ${vars.transition.fast}`,
   ':focus': {
-    border: `1px solid ${vars.color.glassInputFocus}`,
+    borderColor: vars.color.glassInputFocus,
   },
 });
 

apps/web/src/pages/page.css.ts

@@ -36,10 +36,9 @@ export const publishPanel = style({
   display: 'flex',
   flexDirection: 'column',
   gap: vars.spacing.xl,
-  borderRadius: vars.radius.xl,
-  background: vars.color.surface,
-  border: `1px solid ${vars.color.border}`,
-  boxShadow: vars.shadow.sm,
+  borderRadius: vars.radius.lg,
+  background: vars.color.glassInput,
+  border: `1px solid transparent`,
   padding: vars.spacing.xl,
   '@media': {
     'screen and (min-width: 640px)': {
@@ -61,9 +60,8 @@ export const editorCard = recipe({
     overflow: 'hidden',
     outline: 'none',
     borderRadius: vars.radius.xl,
-    background: vars.color.surface,
-    border: `1px solid ${vars.color.border}`,
-    boxShadow: vars.shadow.md,
+    background: vars.color.glassInput,
+    border: `1px solid transparent`,
   },
   variants: {
     // 预览态去掉卡底色/圆角/边框/阴影，让 phone frame 直接浮在页面背景上，消除卡中卡
@@ -73,7 +71,6 @@ export const editorCard = recipe({
         borderRadius: 0,
         background: 'transparent',
         border: 'none',
-        boxShadow: 'none',
       },
     },
   },

apps/web/src/pages/settings.css.ts

@@ -413,40 +413,38 @@ export const fieldInputWrap = style({
 export const fieldInput = style({
   width: '100%',
   borderRadius: vars.radius.md,
-  border: `1px solid ${vars.color.border}`,
-  background: vars.color.bg,
+  border: `1px solid transparent`,
+  background: vars.color.glassInput,
   padding: `${vars.spacing['md-lg']} ${vars.spacing.xl}`,
   paddingRight: '48px',
   fontSize: vars.fontSize.md,
   color: vars.color.text,
   outline: 'none',
-  transition: 'border-color 150ms, box-shadow 150ms',
+  transition: 'border-color 150ms',
   '::placeholder': {
     color: vars.color.textMuted,
   },
   ':focus': {
-    borderColor: vars.color.accent,
-    boxShadow: `0 0 0 3px ${vars.color.accentSoft}`,
+    borderColor: vars.color.glassInputFocus,
   },
 });
 
 export const fieldTextarea = style({
   width: '100%',
-  resize: 'none',
+  resize: 'vertical',
   borderRadius: vars.radius.md,
-  border: `1px solid ${vars.color.border}`,
-  background: vars.color.bg,
+  border: `1px solid transparent`,
+  background: vars.color.glassInput,
   padding: `${vars.spacing['md-lg']} ${vars.spacing.xl}`,
   fontSize: vars.fontSize.md,
   color: vars.color.text,
   outline: 'none',
-  transition: 'border-color 150ms, box-shadow 150ms',
+  transition: 'border-color 150ms',
   '::placeholder': {
     color: vars.color.textMuted,
   },
   ':focus': {
-    borderColor: vars.color.accent,
-    boxShadow: `0 0 0 3px ${vars.color.accentSoft}`,
+    borderColor: vars.color.glassInputFocus,
   },
 });