ticketsLog in with ident

antcolony #3formerly #34

Shared design tokens as one .hl file for all apps

done

opened by architect

opened · updated

Every app has its own copy of the tokens and the names already drift (tickets: --real-red, --light-blue; ident and layouts workbench: --red, --blue-light). Creator: styles.hl can import any other .hl file. So: one shared tokens .hl (palette, semantic tokens; base: background rgb(25,30,35), text rgb(195,200,205)) in its own folder next to the apps; each app's styles.hl imports it and sets only --color-accent. Must work in dev (relative import), in the gate, and in the deployed container / --native build. Keep layouts.worldapi.org/css/foundation/tokens.css in sync (or generated). Start after mission 006 (ident styles.hl is being edited).

Children

all children done (2)

History

  1. architect opened the ticket
  2. architect commented

    Creator (2026-09-24): tokens.hl declares the tokens, styles.hl imports them. Mechanism in webex: import { var } from 'hl:webex/css', dark = var('rgb(25, 30, 35)') at the root of a styles file; the walker (plugins/webex/css.hl) names it --dark and turns every use into var(--dark) (see demo-social-network/styles.hl). First prove: are var() tokens declared in an IMPORTED file named correctly (css.hl mentions styles-file inherits; its error says a var must be declared as a root member of a styles file)? If not, find the supported way (inherits) or report it as a hybriel issue.

  3. Architect changed the state progress

    Mission 018 started: prove the var() import mechanism, one shared tokens file, switch tickets + ident, same rendered colours.

  4. Architect changed the state review

    Mission 018 deployed to tickets + ident: shared tokens in loreana:/media/STORAGE/projects/worldapi-tokens (tokens.css = copy of layouts tokens.css, sync.sh generates tokens.hl and vendors it into each app as shared/tokens.hl, sync.sh --check reports drift). Apps inherit it and only set their accent (live: tickets --purple, ident --orange win). Rendered colours identical (23/23 Chrome comparisons, CSS after :root byte-identical); tickets renamed --real-red/--light-blue to --red/--blue-light. var() across files does not work in webex (filed on hybriel). Questions: should deploy.sh refuse on token drift?; move --color-accent-text into layouts tokens.css?

  5. Caramboleyo changed the state reopened

    this is not even remotely solved as described

  6. Architect changed the state progress

    Rejection understood: you described tokens.hl declaring var() tokens that styles.hl imports; mission 018 delivered a generated plain :root block + sync script instead (a workaround for the webex bug hybriel#39). Redo as described in mission 021: hand-written tokens.hl with var() members, imported by each app's styles.hl; webex fixed by a local patch (the fix mission 018 tested in its probe), upstream on hybriel#39; no generated file, no sync script.

  7. Architect changed the state review

    The colours now come from one hand-written tokens.hl, exactly as you described — both apps import it.

    Test:

    1. Open https://tickets.worldapi.org and https://ident.worldapi.org — colours look as before (purple / orange accents).
    2. The file: loreana:/media/STORAGE/projects/worldapi-tokens/tokens.hl — tokens like static dark = var('rgb(25, 30, 35)').
    3. Each app's styles.hl starts with import { purple, colorText, … } from './shared/tokens.hl' and sets only colorAccent = var(purple).

    Details:

    • The earlier workaround (generated file + sync script) is gone.
    • Hybriel could not do this yet; both apps carry a small fix for it (reported upstream in hybriel#39).
    • After changing tokens.hl: copy it into the apps and restart them.
  8. Caramboleyo changed the state done

Reading is open to everyone. To comment or change the state, log in with ident (top right) and choose a display name.