# Oracle Redwood 设计系统 ## Oracle Redwood 设计系统界面预览 编辑数量、检查验证结果、排序和筛选，同时保留有效的草稿。 ## Oracle Redwood 设计系统设计参考 基础公开声明来自指定版本的 JET 19.0.0 Redwood 样式表。工作表的原创行为与布局已另行标明；基础参考中不包含私有变量和后续反色覆盖。 ### Redwood 基础语义用途 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --oj-core-text-color-primary | rgb(var(--oj-palette-neutral-rgb-190)) | 来自 JET 19 Redwood 的首个/基础声明。反色和密度选择器可能会覆盖这些值；不要将所有声明简化为仅查找最后一个值。 | | --oj-core-text-color-secondary | rgba(var(--oj-palette-neutral-rgb-190), .70) | 来自 JET 19 Redwood 的首个/基础声明。反色和密度选择器可能会覆盖这些值；不要将所有声明简化为仅查找最后一个值。 | | --oj-core-text-color-disabled | rgba(var(--oj-palette-neutral-rgb-190), .4) | 来自 JET 19 Redwood 的首个/基础声明。反色和密度选择器可能会覆盖这些值；不要将所有声明简化为仅查找最后一个值。 | | --oj-core-bg-color-content | rgb(var(--oj-palette-neutral-rgb-0)) | 来自 JET 19 Redwood 的首个/基础声明。反色和密度选择器可能会覆盖这些值；不要将所有声明简化为仅查找最后一个值。 | | --oj-body-bg-color | rgb(var(--oj-palette-neutral-rgb-10)) | 来自 JET 19 Redwood 的首个/基础声明。反色和密度选择器可能会覆盖这些值；不要将所有声明简化为仅查找最后一个值。 | | --oj-core-divider-color | rgba(var(--oj-palette-neutral-rgb-190),.12) | 来自 JET 19 Redwood 的首个/基础声明。反色和密度选择器可能会覆盖这些值；不要将所有声明简化为仅查找最后一个值。 | | --oj-core-focus-border-color | rgb(var(--oj-palette-neutral-rgb-190)) | 来自 JET 19 Redwood 的首个/基础声明。反色和密度选择器可能会覆盖这些值；不要将所有声明简化为仅查找最后一个值。 | ### 工作表使用的调色板值 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --oj-palette-neutral-rgb-0 | 255, 255, 255 | 原始 RGB 通道值会在 rgb() 或 rgba() 中使用，单独使用时并不是完整的 CSS 色值。 | | --oj-palette-neutral-rgb-10 | 251, 249, 248 | 原始 RGB 通道值会在 rgb() 或 rgba() 中使用，单独使用时并不是完整的 CSS 色值。 | | --oj-palette-neutral-rgb-20 | 245, 244, 242 | 原始 RGB 通道值会在 rgb() 或 rgba() 中使用，单独使用时并不是完整的 CSS 色值。 | | --oj-palette-neutral-rgb-190 | 22, 21, 19 | 原始 RGB 通道值会在 rgb() 或 rgba() 中使用，单独使用时并不是完整的 CSS 色值。 | | --oj-palette-brand-rgb-120 | 0, 104, 140 | 原始 RGB 通道值会在 rgb() 或 rgba() 中使用，单独使用时并不是完整的 CSS 色值。 | | --oj-palette-info-rgb-20 | 237, 246, 249 | 原始 RGB 通道值会在 rgb() 或 rgba() 中使用，单独使用时并不是完整的 CSS 色值。 | | --oj-palette-danger-rgb-120 | 179, 49, 31 | 原始 RGB 通道值会在 rgb() 或 rgba() 中使用，单独使用时并不是完整的 CSS 色值。 | | --oj-palette-success-rgb-20 | 235, 248, 222 | 原始 RGB 通道值会在 rgb() 或 rgba() 中使用，单独使用时并不是完整的 CSS 色值。 | | --oj-palette-success-rgb-140 | 53, 86, 23 | 原始 RGB 通道值会在 rgb() 或 rgba() 中使用，单独使用时并不是完整的 CSS 色值。 | ### 间距与形状 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --oj-core-spacing-1x | .25rem | 已发布的基础比例。工作表的原生 HTML 控件使用其中选定的值，但不代表具备 JET 组件行为。 | | --oj-core-spacing-2x | .5rem | 已发布的基础比例。工作表的原生 HTML 控件使用其中选定的值，但不代表具备 JET 组件行为。 | | --oj-core-spacing-3x | .75rem | 已发布的基础比例。工作表的原生 HTML 控件使用其中选定的值，但不代表具备 JET 组件行为。 | | --oj-core-spacing-4x | 1rem | 已发布的基础比例。工作表的原生 HTML 控件使用其中选定的值，但不代表具备 JET 组件行为。 | | --oj-core-spacing-5x | 1.25rem | 已发布的基础比例。工作表的原生 HTML 控件使用其中选定的值，但不代表具备 JET 组件行为。 | | --oj-core-spacing-6x | 1.5rem | 已发布的基础比例。工作表的原生 HTML 控件使用其中选定的值，但不代表具备 JET 组件行为。 | | --oj-core-spacing-7x | 1.75rem | 已发布的基础比例。工作表的原生 HTML 控件使用其中选定的值，但不代表具备 JET 组件行为。 | | --oj-core-spacing-8x | 2rem | 已发布的基础比例。工作表的原生 HTML 控件使用其中选定的值，但不代表具备 JET 组件行为。 | | --oj-core-spacing-9x | 2.25rem | 已发布的基础比例。工作表的原生 HTML 控件使用其中选定的值，但不代表具备 JET 组件行为。 | | --oj-core-spacing-10x | 2.5rem | 已发布的基础比例。工作表的原生 HTML 控件使用其中选定的值，但不代表具备 JET 组件行为。 | | --oj-core-spacing-11x | 2.75rem | 已发布的基础比例。工作表的原生 HTML 控件使用其中选定的值，但不代表具备 JET 组件行为。 | | --oj-core-spacing-12x | 3rem | 已发布的基础比例。工作表的原生 HTML 控件使用其中选定的值，但不代表具备 JET 组件行为。 | | --oj-core-border-radius-sm | 2px | 已发布的基础比例。工作表的原生 HTML 控件使用其中选定的值，但不代表具备 JET 组件行为。 | | --oj-core-border-radius-md | .25rem | 已发布的基础比例。工作表的原生 HTML 控件使用其中选定的值，但不代表具备 JET 组件行为。 | | --oj-core-border-radius-lg | .375rem | 已发布的基础比例。工作表的原生 HTML 控件使用其中选定的值，但不代表具备 JET 组件行为。 | | --oj-core-border-radius-xl | .5rem | 已发布的基础比例。工作表的原生 HTML 控件使用其中选定的值，但不代表具备 JET 组件行为。 | ### 正文字体排版与控件尺寸 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --oj-typography-body-xs-font-size | 0.75rem | 基础主题声明。原始示例使用 Arial 作为回退字体，其表格和内容布局属于应用代码。 | | --oj-typography-body-sm-font-size | 0.859rem | 基础主题声明。原始示例使用 Arial 作为回退字体，其表格和内容布局属于应用代码。 | | --oj-typography-body-md-font-size | 1rem | 基础主题声明。原始示例使用 Arial 作为回退字体，其表格和内容布局属于应用代码。 | | --oj-typography-body-lg-font-size | 1.125rem | 基础主题声明。原始示例使用 Arial 作为回退字体，其表格和内容布局属于应用代码。 | | --oj-typography-body-xl-font-size | 1.25rem | 基础主题声明。原始示例使用 Arial 作为回退字体，其表格和内容布局属于应用代码。 | | --oj-typography-body-md-line-height | 1.25 | 基础主题声明。原始示例使用 Arial 作为回退字体，其表格和内容布局属于应用代码。 | | --oj-button-height | 2.75rem | 基础主题声明。原始示例使用 Arial 作为回退字体，其表格和内容布局属于应用代码。 | | --oj-button-border-radius | var(--oj-core-border-radius-md) | 基础主题声明。原始示例使用 Arial 作为回退字体，其表格和内容布局属于应用代码。 | ### 公共样式边界 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | Global theme overrides | :root declarations after JET CSS | 覆盖根级公共变量会影响所有使用方。 | | Instance styling | A class scoped to the target component | 如果只有一个原生组件需要更改，请限定公共变量的作用范围。 | | Redwood base | Tracks Oracle visual changes | 如果目标是匹配 Oracle 的外观，可选择此方案；升级可能会改变继承的值。 | | Stable base | Alternative for a distinct custom theme | 不要将其描述为与 Redwood 完全相同，也不要假设所有反色或缩放功能都一致。 | | Private variables | --oj-private-* excluded | 示例构建公共参考时没有依赖私有实现钩子。 | ## Oracle Redwood 设计系统完整指南 实用指南，介绍如何为真实界面选择、应用和评审此系统。 完整指导、实现起点和源代码链接。 ## Oracle Redwood 设计系统与 JET 版本边界 ### 准确说明实现层 > Redwood 的范围不止一个可下载的组件库。本指南使用 Oracle JET 19.0.0 随附的公共 CSS 基础样式，作为可具体查阅的参考。预览是一个原创的 HTML/CSS 库存审查工作表，使用这些值；它不会实例化 oj-table、oj-input-number 或任何其他 JET 原生自定义元素。这里明确说明运行时，避免读者将视觉基础样式误认为完整的 Oracle 应用 SDK。 - 参考来源：Oracle JET 19 Redwood CSS。 - 预览运行时：原创的原生浏览器 HTML/CSS/JavaScript。 - 数据和验证规则：原创的本地示例。 ### 将 Oracle 应用采用与其他活动区分开 在 Oracle SaaS 产品中采用 Redwood、配置 JET 应用，以及借用公共主题作为参考，是不同的活动。此示例不会更改租户、连接库存记录或执行产品迁移。完整的本地文档适合用于研究视觉规则和状态模型；实际的 JET 应用则应遵循对应版本的框架设置指南和原生组件文档。 ## Oracle Redwood 设计系统语义角色与调色板值 ### 正确解析基础声明 参考资料从固定版本的样式表中提取每个公共变量的首个（基础）声明。后续的反色或密度作用域可能会重新定义相同名称。因此，简单地提取最后一个匹配项，会把反色前景色误标为默认的浅色文本颜色。本指南明确限定基础作用域，并将 --oj-private-* 钩子排除在发布的参考内容之外。 ### 区分原始通道值与颜色值 --oj-palette-brand-rgb-120 等调色板变量包含三个 RGB 通道，而语义角色会用 rgb() 或 rgba() 包裹这些通道。原始操作按钮通过 rgb() 使用品牌色通道，文本使用 core-text-color-primary，卡片表面使用 core-bg-color-content。即使通道数字看起来合理，直接将原始通道字符串复制到 background-color 中仍会导致 CSS 无效。 ## Oracle Redwood 设计系统间距、字体与密度 ### 采用具体的基础样式比例 公共 core-spacing 序列从 1x 到 12x，以 4px 为步进。小、中、大和特大边框角色各不相同，按钮高度则是单独的组件变量。工作表在适用处采用这些实际值，并将 32px 标题、响应式表格转换和 1120px 外层宽度标明为原创的布局决策。 ### 不要混用特定密度的值 在此固定版本的样式表中，基础 body-md 字号为 1rem，行高为 1.25；后续选择器可能会呈现按比例缩放的像素值。本指南记录的是基础值，并不意味着 Redwood 的所有场景都必须使用同一个计算字号。浏览器示例使用 Arial 回退字体，并未声称已加载 Oracle Sans。原生 JET 应用应结合所选密度、主题和平台进行测试。 ## Oracle Redwood 受 Oracle Redwood 设计系统启发的工作表结构 ### 让数据和操作一目了然 每个原创行项目都列出一种工作室用品、说明其计量单位、将当前库存与最低库存进行比较，并提供数量输入框。审查状态标签会重复显示该项目是否计入本地草稿。摘要统计整个草稿中的单位总数，包括被筛选条件隐藏的行。这些都是虚构的示例记录，不代表库存证据或采购建议。 ### 排序时保持行标识稳定 应用按项目 ID 而非表格位置存储数量。因此，按名称排序或恢复原始顺序后，编辑内容仍会保留。“低于最低库存”筛选只会更改可见项目集合。若使用与已渲染行顺序绑定的位置数组，排序后可能会将某个项目的数量分配给另一个项目；所提供的代码明确避免了这一问题。 ## Oracle Redwood 受 Oracle Redwood 设计系统启发的数量验证 ### 拒绝超出所述本地规则的值 原始数量输入框只接受 0 到 99 的整数。输入为空、负数、小数或超出范围时，会显示行内错误并禁用审查操作。草稿模型会保留最后一个有效数量，直到有效编辑替换它。可见错误会清楚说明这一差异，无效值不会计入审查总数。 ### 说明何时会丢弃无效编辑 更改筛选或排序时，系统会根据最后有效的草稿值重新生成可见行，因此未完成的无效编辑会被丢弃。这是本地示例有意设定的边界，并非 JET 原生验证保证。生产环境中的可编辑表格也可以选择在切换视图时保留无效草稿，或阻止页面跳转；这些行为必须在各自的状态模型中进行设计和测试。 ## Oracle Redwood 受 Oracle Redwood 设计系统启发的审查与重置 ### 说明这是本地审查，而非提交订单 “审查此草稿”会生成易读的单位数和相关项目数，并明确说明没有发送订单。示例允许审查单位数为零且有效的草稿，因为它没有臆造强制采购规则。编辑数量会清除之前的审查消息，避免草稿更改后仍显示过期的确认信息。 ### 提供可预测的恢复方式 重置数量会恢复最初建议的补货量，并清除审核提示。当前筛选和排序会保留，随后根据重置后的数据重新绘制这些行。这样无需重新加载页面，也能清楚看到恢复结果。此示例不使用存储或后端服务，因此重新加载页面也会恢复初始本地数据。 ## Oracle Redwood 设计系统：Oracle Redwood 风格的响应式表格 ### 在窄屏上保留信息层级 宽屏布局采用表格形式，包含列标题和作为行标题的商品名称。宽度低于 650px 时，表格行会变为易读的信息块，每个数据单元格都会在数值前显示标签。输入框不会超出可用宽度，商品描述也会与商品名称保持关联。此处展示的是原始应用 CSS 的布局转换，并非声称 oj-table 具备相同的响应式行为。 ### 测试编辑和筛选状态 浏览器检查会先输入无效数量并更正，再对商品排序、筛选低于最低库存的项目，并在测量布局前检查汇总数量。检查了从 1440px 到 280px 的四种屏幕宽度。这些测试覆盖实际内容和状态变化，而不只是确认空表格容器存在。 ## Oracle Redwood 设计系统完整参考实现 ### 运行提供的完整文档 HTML 示例包含所需的公共令牌声明、原始样式、示例记录和所有事件处理程序。将其保存为 index.html 并提供该目录即可运行；无需补充导入，也没有外部运行时调用。参考值固定为 JET 19.0.0，但本地实现无需安装 JET JavaScript 软件包即可运行。 1. 将提供的完整文档保存为 index.html。 2. 通过本地 HTTP 服务提供该文件夹。 3. 测试无效数量及其更正。 4. 对同一份草稿进行排序和筛选，然后检查并重置。 ### 通过各自的配置方式使用原生 JET 组件 对于原生应用，请安装匹配的 Oracle JET 软件包并按照其框架配置指南操作，然后使用对应版本的 oj-* 组件契约和公共样式变量。不要将 oj-* 标签粘贴到此独立实现中，并假定它会自动初始化。链接的样式概览区分了根级主题设置和组件范围内的覆盖样式，并说明何时更适合以 Redwood 或 Stable 为基础。 ## Oracle Redwood 设计系统组件示例 ### index.html — 完整的原始工作表 完整的公共令牌子集、响应式 HTML、验证、稳定的行状态，以及仅限本地的审核和重置行为。 ``` Studio supplies worksheet

REDWOOD FOUNDATIONS / ORIGINAL WORKSHEET

Prepare the studio supplies

An original stock-review worksheet using public Oracle JET 19 Redwood variables. This is plain HTML/CSS and JavaScript, not a native JET component runtime or an Oracle inventory service. Arial is an explicit font fallback.

0units in the local draft
ItemOn hand / minimumAdd to draftReview state

Change a quantity to build a local replenishment draft. A draft may contain zero units. Nothing is ordered, approved or sent from this example.

``` 代码参考 - 这并非 oj-table 或 oj-input-number。 - 未连接 Oracle 应用、库存服务或订单接口。 ## Oracle Redwood 设计系统 Agent 设置 ### 实现起点 运行原始独立实现。采用原生 JET 是另一种框架配置方式，相关说明见链接中的官方文档。 ``` # Save the complete supplied document as index.html. python3 -m http.server 8000 # Open http://localhost:8000/ ``` ### 适用于你项目的提示词 ``` 使用经验证的 JET 19 公共基础变量，实现提供的原始 Redwood 风格库存审核工作表。保留 RGB 通道语法、以商品 ID 为键的有效数量状态、验证边界、排序和筛选状态，以及仅限本地的审核和重置行为。不要将此浏览器实现描述为原生 JET 或 Oracle 服务。 ``` ## Oracle Redwood 设计系统来源与范围 采用 Oracle JET 19 公共 Redwood 变量的 OpenDesign 实现。预览使用纯 HTML/CSS/JavaScript，并非原生 JET 组件或 Oracle 库存服务。明确指定 Arial 作为备用字体。 - JET 样式概览 公共变量的作用范围、Redwood 与 Stable 的区别，以及主题边界。 - 固定版本的 Redwood CSS 参考实现和示例中实际使用的基础值。 - Oracle JET 文档 原生框架配置和开发背景。 - 采用 Redwood Oracle 应用采用方案的独立背景说明。 ## Oracle Redwood 设计系统相关资源 ### Orange OUDS Web 通过完整的响应式对比研究，查看 Orange OUDS 1.4 的实际语义设计令牌、主题软件包和原生 Offcanvas 行为。 ### Palantir Blueprint 使用 Blueprint 构建密集的数据工作区：经验证的字体和意图令牌、可选择的数据集表、审核检查器，以及完整的 React 源码。 ### Pega Bolt 探索 Bolt 的 Pega 品牌内容系统：流动排版、横向与纵向间距分开设置，以及用于编辑资源页面的 Twig 手风琴式组合布局。 - [实现参考](https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-styling/CssVariablesOverview.html) - [来源](https://cdn.jsdelivr.net/npm/@oracle/oraclejet@19.0.0/dist/css/redwood/oj-redwood.css) - [来源](https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-styling/CssVariablesOverview.html) - [代码参考](https://cdn.jsdelivr.net/npm/@oracle/oraclejet@19.0.0/dist/css/redwood/oj-redwood.css) - [JET 样式概览 公共变量的作用范围、Redwood 与 Stable 的区别，以及主题边界。](https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-styling/CssVariablesOverview.html) - [固定版本的 Redwood CSS 参考实现和示例中实际使用的基础值。](https://cdn.jsdelivr.net/npm/@oracle/oraclejet@19.0.0/dist/css/redwood/oj-redwood.css) - [Oracle JET 文档 原生框架配置和开发背景。](https://docs.oracle.com/en/middleware/developer-tools/jet/19/develop/index.html) - [采用 Redwood Oracle 应用采用方案的独立背景说明。](https://docs.oracle.com/en/cloud/saas/readiness/redwood-adoption/)