Vivid typography tokens

[rachelbt]

When Vonage authors are using Vivid 3.x some additional imports are needed for using the Spezia font.
Vivid typography tokens need to be override with new tokens using the Spezia font.
We advise the tokens to be set on the vvd-root class.
As tokens are css, they also obey to the cascading and the Spezia tokens may be override by the default ones.

Scenario 1
the tokens are imported to the project in a link in the header
the css of the project (where the Spezia tokens are) added the same as link in the head but comes before vivid-tokens

<link rel="stylesheet" href="project-style.css" media="all">
<link rel="stylesheet" href="node_modules/@vonage/vivid/styles/tokens/theme-light.css" media="all">

this can be easily fixed with changing the order of the imports or by giving a higher specification in the css file (e.g. :root .vvd-root {tokens})

Scenario 2
tokens are imported inside css file (or scss)
In this scenario the import need to be at the top of the file - so there will not be un-needed override.
However we can recommend the authors to assign the tokens to a layer to set it as a lower specificity.

Unlayered styles follow style rules outside of the cascade layers and take the highest priority over any layers in a stylesheet. As such, unlayered styles will always win out over styles nested within layers regardless of their specificity or order of appearance

Question raised:

• Is css tokens override is vivd's responsibility or the authors?
• should we assign the tokens to a layer by default?

@layer {
  .vvd-root {
    tokens
  } 
}

[yinonov]

authors can take advantage of @layer statement and set their preferred priority

@layer reset, base, ..., vivid.tokens, vivid.tokens.customization; /* the last is provided by authors */

that will only require the vivid custom properties to be wrapped by a layer

@layer vivid.tokens {
  /* vivid token contained here */
}

alternatively, overrides can be injected by authors directly to the vivid.tokens layer:

@layer reset, base, ..., vivid.tokens;

and authors do

@layer vivid.tokens {
  .vvd-root {
    /* overrides... */
  }
}

[yinonov]

1 caveat I can think of is that unlayered styles would be placed at the top of the stack. meaning Vivid@2.x tokens will always get prioritized over Vivid@3.x tokens. should be tested