Styling
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 Figma 库 是创建现代企业级 web 应用程序的官方设计资源。它包含了一整套与 DWC 设计系统对齐的组件、排版样式和颜色令牌。设计师和开发人员可以使用这个库来构建视觉一致、用户友好的界面，具有可预测的组件行为、精确的间距和可访问的颜色对比。
主题
CSS Variables
Define, scope, and consume CSS custom properties to control webforJ component styling at runtime without preprocessors.
Shadow Parts
CSS 阴影部分 为开发人员提供了一种从外部样式化组件的阴影 DOM 中元素的方法，同时仍然保持封装。
Themes
Apply built-in light, dark, and dark-pure themes with @AppTheme or define custom themes through data-app-theme selectors.
Colors
webforJ 提供了一个基于 CSS 自定义属性的颜色系统。这些颜色变量能够保持应用程序的视觉风格一致，同时让您能够根据设计需求完全控制调色板的自定义。
Typography
排版令牌用于在您的应用程序中保持一致的字体样式集。
Sizing and Spacing
间距和尺寸代币用于在您的应用程序中提供一致的间距和尺寸。所有尺寸和间距属性以rem为单位定义。
Border
边框属性用于控制组件的边框样式和宽度。请参阅可用边框样式。
Shadows
影子属性在元素框架周围添加阴影效果。阴影表示用户界面中层叠在一 起的项目。
Surfaces
DWC 定义了三个表面级别，用于组织 UI 层次结构，并结合 shadows。所有 palette colors 都经过测试，以确保与这些表面具有足够的对比度。
State
状态令牌定义了组件如何在用户交互时进行视觉响应，例如在禁用或聚焦时。这些变量有助于确保所有 UI 元素的一致行为和样式，并且可以轻松自定义以匹配您的设计系统。
Transitions & Easing
Animate UI changes with consistent DWC duration tokens and cubic-bezier easing curves for natural-feeling transitions.
Styling languages
Author your styles in CSS, compile them from Sass or Less, or generate them with Tailwind, and load the result into a webforJ app.