Skip to content

Commit 6cd70cd

Browse files
dnplkndlldnplkndll
committed
[19.0][DOC] dms: map dms accent tokens onto Odoo 19 design tokens
Adds a token-by-token comparison table to USAGE.md so reviewers can see exactly which Odoo 19 `$o-*` and Bootstrap variables every `--dms-*` value falls back to, plus the rationale for places where we deliberately diverge (smaller 56px tile, smaller 11px chip font, hover-lift not present in Odoo core). Authoritative reference for the comparison is upstream `odoo/odoo@19.0:addons/web/static/src/scss/primary_variables.scss` and `addons/web/static/src/views/kanban/kanban.variables.scss`. Odoo does not publish a formal design-system document for 19.0, so we inline the relevant tokens here for review convenience. README.rst + the static description page are regenerated from readme/*.md by oca-gen-addon-readme.
1 parent ed1b3c0 commit 6cd70cd

3 files changed

Lines changed: 368 additions & 15 deletions

File tree

‎dms/README.rst‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,6 +197,118 @@ by both the backend (``web.assets_backend`` → ``kanban.scss``) and the
197197
portal (``web.assets_frontend`` → ``portal.scss``), so adding a new
198198
mimetype only requires touching one map.
199199

200+
Alignment with Odoo 19 tokens
201+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
202+
203+
Every ``--dms-*`` variable falls back to an Odoo 19 default via
204+
``var(--o-foo-…, #literal)``, so the module stays themable — when a host
205+
project overrides Odoo's ``$o-gray-*`` palette, our chips and tiles
206+
inherit the new colors automatically. Specifically:
207+
208+
+----------------+----------------+----------------+----------------+
209+
| Surface | Our value | Odoo 19 token | Notes |
210+
+================+================+================+================+
211+
| Card neutral | `` | ``$o-gray- | Tile preview |
212+
| background | var(--o-gray-1 | 100: #f8f9fa`` | state |
213+
| | 00, #f1f3f5)`` | | |
214+
+----------------+----------------+----------------+----------------+
215+
| Chip neutral | `` | ``$o-gray- | Exact |
216+
| background | var(--o-gray-2 | 200: #e9ecef`` | |
217+
| | 00, #e9ecef)`` | | |
218+
+----------------+----------------+----------------+----------------+
219+
| Chip neutral | `` | ``$o-gray- | We go one step |
220+
| text | var(--o-gray-8 | 800: #343a40`` | lighter for |
221+
| | 00, #495057)`` | | chip contrast |
222+
| | | | against the |
223+
| | | | light bg |
224+
+----------------+----------------+----------------+----------------+
225+
| Subtitle muted | `` | ``$o-gray- | Exact |
226+
| text | var(--o-gray-6 | 600: #6c757d`` | |
227+
| | 00, #6c757d)`` | | |
228+
+----------------+----------------+----------------+----------------+
229+
| Title text | `` | ``$o-gray- | Exact |
230+
| | var(--o-gray-9 | 900: #212529`` | |
231+
| | 00, #212529)`` | | |
232+
+----------------+----------------+----------------+----------------+
233+
| Spine width | ``3px`` | ``$o-kanb | Exact match — |
234+
| | | an-color-borde | same width |
235+
| | | r-width: 3px`` | Odoo uses for |
236+
| | | | the user-set |
237+
| | | | ``hig |
238+
| | | | hlight_color`` |
239+
| | | | border, so the |
240+
| | | | two stack |
241+
| | | | predictably |
242+
+----------------+----------------+----------------+----------------+
243+
| Card tile size | ``56×56px`` | ``$ | We're 12 % |
244+
| | | o-kanban-image | smaller for |
245+
| | | -width: 64px`` | chip-row |
246+
| | | | density; the |
247+
| | | | kanban grid |
248+
| | | | still aligns |
249+
| | | | since both fit |
250+
| | | | inside the |
251+
| | | | 320px card |
252+
+----------------+----------------+----------------+----------------+
253+
| Chip font | ``var(--bs- | ``$o | Bootstrap |
254+
| family | font-monospace | -font-family-m | variable that |
255+
| | , monospace)`` | onospace: SFMo | Odoo populates |
256+
| | | no-Regular, Me | |
257+
| | | nlo, Monaco, C | |
258+
| | | onsolas, ...`` | |
259+
+----------------+----------------+----------------+----------------+
260+
| Chip font size | ``11px`` | ``$o-fo | We go one tier |
261+
| | | nt-size-base-s | smaller for |
262+
| | | maller: 12px`` | footer-chip |
263+
| | | | density |
264+
+----------------+----------------+----------------+----------------+
265+
| Lock chip | ``var | ``$o-warn | Odoo's warning |
266+
| warning | (--o-warning-1 | ing: #ffac00`` | palette tints |
267+
| | 00, #fff3cd)`` | | |
268+
| | / | | |
269+
| | ``--o | | |
270+
| | -warning-800`` | | |
271+
+----------------+----------------+----------------+----------------+
272+
| Lock chip | ``var | ``$o-succ | Odoo's success |
273+
| success | (--o-success-1 | ess: #28a745`` | palette tints |
274+
| (is_mine) | 00, #d1e7dd)`` | | |
275+
| | / | | |
276+
| | ``--o | | |
277+
| | -success-800`` | | |
278+
+----------------+----------------+----------------+----------------+
279+
| Brand accent | ``var | ``$ | Used only when |
280+
| fallback | (--o-primary-5 | o-community-co | no |
281+
| | 00, #5b3bd6)`` | lor: #71639e`` | `` |
282+
| | | | --dms-accent`` |
283+
| | | | is set (e.g. |
284+
| | | | unknown file |
285+
| | | | extension) |
286+
+----------------+----------------+----------------+----------------+
287+
| Hover lift | ``tran | none in Odoo | Added by us; |
288+
| | slateY(-1px)`` | core | Odoo 19's |
289+
| | + | | kanban cards |
290+
| | ``box-shadow: | | have no |
291+
| | 0 4px 18px rgb | | hover-lift |
292+
| | a(0,0,0,.08)`` | | convention, so |
293+
| | | | this is a |
294+
| | | | deliberate |
295+
| | | | enhancement |
296+
+----------------+----------------+----------------+----------------+
297+
298+
The only token we introduce that has no Odoo counterpart is
299+
``--dms-accent`` itself — the per-record hashed tint. By design it's
300+
opt-in (only applied to elements that carry the ``o_dms_*`` class
301+
ancestry), so it doesn't bleed into Odoo core widgets.
302+
303+
Odoo doesn't publish a formal design-system document for 19.0 — the
304+
authoritative source is
305+
``addons/web/static/src/scss/primary_variables.scss`` in
306+
``odoo/odoo@19.0``. The rationale for these specific tokens (e.g.
307+
hashing into eight buckets rather than per-extension hard-coding for
308+
directories, dropping the 64→56px tile size, monospace 11px chips) is
309+
documented inline in ``dms/static/src/scss/_dms_tokens.scss`` and
310+
``kanban.scss``.
311+
200312
Known issues / Roadmap
201313
======================
202314

‎dms/readme/USAGE.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,3 +53,39 @@ The accent palette + bucket-hash helpers live in
5353
by both the backend (`web.assets_backend` → `kanban.scss`) and the
5454
portal (`web.assets_frontend` → `portal.scss`), so adding a new
5555
mimetype only requires touching one map.
56+
57+
### Alignment with Odoo 19 tokens
58+
59+
Every `--dms-*` variable falls back to an Odoo 19 default via
60+
`var(--o-foo-…, #literal)`, so the module stays themable — when a host
61+
project overrides Odoo's `$o-gray-*` palette, our chips and tiles
62+
inherit the new colors automatically. Specifically:
63+
64+
| Surface | Our value | Odoo 19 token | Notes |
65+
| --- | --- | --- | --- |
66+
| Card neutral background | `var(--o-gray-100, #f1f3f5)` | `$o-gray-100: #f8f9fa` | Tile preview state |
67+
| Chip neutral background | `var(--o-gray-200, #e9ecef)` | `$o-gray-200: #e9ecef` | Exact |
68+
| Chip neutral text | `var(--o-gray-800, #495057)` | `$o-gray-800: #343a40` | We go one step lighter for chip contrast against the light bg |
69+
| Subtitle muted text | `var(--o-gray-600, #6c757d)` | `$o-gray-600: #6c757d` | Exact |
70+
| Title text | `var(--o-gray-900, #212529)` | `$o-gray-900: #212529` | Exact |
71+
| Spine width | `3px` | `$o-kanban-color-border-width: 3px` | Exact match — same width Odoo uses for the user-set `highlight_color` border, so the two stack predictably |
72+
| Card tile size | `56×56px` | `$o-kanban-image-width: 64px` | We're 12 % smaller for chip-row density; the kanban grid still aligns since both fit inside the 320px card |
73+
| Chip font family | `var(--bs-font-monospace, monospace)` | `$o-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, ...` | Bootstrap variable that Odoo populates |
74+
| Chip font size | `11px` | `$o-font-size-base-smaller: 12px` | We go one tier smaller for footer-chip density |
75+
| Lock chip warning | `var(--o-warning-100, #fff3cd)` / `--o-warning-800` | `$o-warning: #ffac00` | Odoo's warning palette tints |
76+
| Lock chip success (is_mine) | `var(--o-success-100, #d1e7dd)` / `--o-success-800` | `$o-success: #28a745` | Odoo's success palette tints |
77+
| Brand accent fallback | `var(--o-primary-500, #5b3bd6)` | `$o-community-color: #71639e` | Used only when no `--dms-accent` is set (e.g. unknown file extension) |
78+
| Hover lift | `translateY(-1px)` + `box-shadow: 0 4px 18px rgba(0,0,0,.08)` | none in Odoo core | Added by us; Odoo 19's kanban cards have no hover-lift convention, so this is a deliberate enhancement |
79+
80+
The only token we introduce that has no Odoo counterpart is
81+
`--dms-accent` itself — the per-record hashed tint. By design it's
82+
opt-in (only applied to elements that carry the `o_dms_*` class
83+
ancestry), so it doesn't bleed into Odoo core widgets.
84+
85+
Odoo doesn't publish a formal design-system document for 19.0 — the
86+
authoritative source is `addons/web/static/src/scss/primary_variables.scss`
87+
in `odoo/odoo@19.0`. The rationale for these specific tokens (e.g.
88+
hashing into eight buckets rather than per-extension hard-coding for
89+
directories, dropping the 64→56px tile size, monospace 11px chips) is
90+
documented inline in `dms/static/src/scss/_dms_tokens.scss` and
91+
`kanban.scss`.

0 commit comments

Comments
 (0)