Styling
webforJ 配备了一个全面的设计系统，名为 DWC。这不仅仅是一个主题，它是一个结构化、可扩展的系统，管理着您应用的视觉语言。DWC 的构建旨在帮助开发人员和设计师快速而自信地创建一致的、与品牌对齐的界面。
DWC 的核心提供了一套经过精心设计的 CSS 变量（设计令牌），涵盖了关键的视觉元素，如颜色、排版、边框和间距。这些令牌作为所有组件样式的基础构建块，允许全球自定义，几乎不需要额外努力。
为了支持更高级的样式，webforJ 利用 CSS Shadow Parts，允许组件内部被有选择性地样式化，而不会破坏封装性。这为团队提供了对组件外观的细粒度控制，即使在大型应用程序中也适用。
DWC 还包括一个可自定义的调色板，并默认为干净、明亮的视觉主题，但每个方面都可以根据您的品牌或产品风格进行调整。
Figma Design Kit
DWC Figma 库 是创建现代企业级 Web 应用的官方设计资源。它包括一整套组件、排版样式和与 DWC 设计系统对齐的颜色令牌。利用这个库，设计师和开发人员可以构建视觉一致、用户友好的界面，平衡功能与精致的用户体验。
Topics
📄️ CSS Variables
CSS 变量在自定义 webforJ 组件外观中发挥着核心作用。这些变量存储可重用的值，如颜色、字体大小和间距，可以在您的应用中一致地应用。
📄️ Shadow Parts
CSS 阴影部分 为开发人员提供了一种从外部样式化组件的阴影 DOM 中元素的方法，同时仍然保持封装。
📄️ Themes
webforJ 包含三个内置应用主题，并支持定义您自己的自定义主题。默认主题包括：
📄️ Colors
webforJ 提供了一种基于 CSS 自定义属性的颜色系统。这些颜色变量在应用程序中保持一致的视觉风格，同时让您可以根据设计需求完全控制调色板。
📄️ Typography
排版标记用于在整个应用中保持一致的字体样式集。
📄️ Sizing and Spacing
间距和大小的标记用于在您的应用 中提供一致的间距和大小。所有的大小和间距属性都以 rem 为单位定义。
📄️ Border
边框属性用于控制组件的边框样式和宽度。请查看 可用边框样式。
📄️ Shadows
阴影属性用于在元素的框架周围添加阴影效果。您可以设置多个效果，用逗号分隔。在大多数情况下，阴影用于表示用户界面中互相叠加的项目。
📄️ Surfaces
有三个级别的表面用于组织UI层次结构，通常与阴影结合使用。所有调色板颜色都经过测试，以确保与这些表面有足够的对比度。
📄️ State
状态令牌定义了组件如何在用户交互时在视觉上响应——例如，当它们被禁用或聚焦时。这些变量有助于确保所有用户界面元素之间的一致行为和样式，并且可以很容易地自定义以匹配你的设计系统。
📄️ Transitions & Easing
过渡变量用于为您的应用提供一致的动画持续时间。它们控制动画完成所需的时间。