样式
webforJ 配备了一个全面的设计系统，名为 DWC。它不仅仅是一个主题，而是一个结构化、可扩展的系统，管理您应用程序的视觉语言。DWC 的构建旨在帮助开发人员和设计师快速而自信地创建一致的、品牌对齐的界面。
DWC 的核心提供了一组经过精心设计的 CSS 变量（设计令牌），涵盖了关键的视觉元素，如颜色、排版、边框和间距。这些令牌作为所有组件样式的基础构建块，并允许以最小的努力进行全局自定义。
为了支持更高级的样式，webforJ 使用 CSS Shadow Parts，允许在不破坏封装的情况下选择性地为组件内部样式。这使团队能够对组件的外观进行精细控制，即使是在更大的应用程序中也是如此。
DWC 还包含一个可自定义的颜色调色板，默认采用干净、明亮的视觉主题，但每个方面都可以根据您的品牌或产品风格进行调整。
The webforj-styling-apps skill can theme and style webforJ apps with DWC design tokens. After installing the webforJ AI plugin, ask your assistant:
- "Theme this app with a blue palette."
- "Style the dwc-button to match the brand guidelines."
- "Make this layout tighter - adjust spacing and typography."
Figma 设计工具包
DWC 设计工具包 是为设计 webforJ 应用程序提供的官方 Figma 资源。它涵盖了每个 DWC 组件的主题、扩展和状态，以及设计系统的颜色调色板、排版、间距和阴影令牌，以 Figma 变量和样式呈现，适用于明亮和黑暗模式。设计师和开发人员可以使用此工具包构建视觉一致、 用户友好的界面，确保组件行为的可预测性、精确的间距和可访问的颜色对比度。
主题
CSS 变量
Define, scope, and consume CSS custom properties to control webforJ component styling at runtime without preprocessors.
Shadow Parts
CSS 阴影部分 为开发人员提供了一种从外部样式化组件的阴影 DOM 中元素的方法，同时仍然保持封装。
主题
Apply built-in light, dark, and dark-pure themes with @AppTheme or define custom themes through data-app-theme selectors.
颜色
webforJ 提供了一个基于 CSS 自定义属性的颜色系统。这些颜色变量能够保持应用程序的视觉风格一致，同时让您能够根据设计需求完全控制调色板的自定义。
字体排印
排版令牌用于在您的应用程序中保持一致的字体样式集。
尺寸与间距
间距和尺寸代币用于在您的应用程序中提供一致的间距和尺寸。所有尺寸和间距属性以rem为单位定义。
边框
边框属性用于控制组件的边框样式和宽度。请参阅可用边框样式。
阴影
影子属性在元素框架周围添加阴影效果。阴影表示用户界面中层叠在一起的项目。
表面
DWC 定义了三个表面级别，用于组织 UI 层次结构，并结合 shadows。所有 palette colors 都经过测试，以确保与这些表面具有足够的对比度。
状态
状态令牌定义了组件如何在用户交互时进行视觉响应，例如在禁用或聚焦时。这些变量有助于确保所有 UI 元素的一致行为和样式，并且可以轻松自定 义以匹配您的设计系统。
过渡与缓动
Animate UI changes with consistent DWC duration tokens and cubic-bezier easing curves for natural-feeling transitions.
样式语言
Author your styles in CSS, compile them from Sass or Less, or generate them with Tailwind, and load the result into a webforJ app.