Use Codex tokens and custom spacing variables

[codders]

Migrate away from Wikit tokens to Codex SASS variables where they are available. In some cases we use custom CSS variables for values from Wikit whose Codex equivalents are missing.

Bug: T369510
Bug: T369508
Bug: T369509

[github-actions]

https://2a4448cdd30c6fdd80b09ba4848c7a8561ac--new-lexeme-special-page.netlify.app

[lucaswerkmeister]

Is there a reason to make --dimension-layout-xsmall a CSS variable? Looking at this change overall, to me it feels like it would make more sense to make it a Sass variable like all the other tokens. (This would also fix the minor issue that the current version includes the variable styles three times in the build output as part of different components.)

[lucaswerkmeister]

Tried to go through the changes and figure out which task they correspond to and whether they’re right or not. Many of the comments are just acknowledgements, but I think some represent issues.

[codders]

Is there a reason to make --dimension-layout-xsmall a CSS variable? Looking at this change overall, to me it feels like it would make more sense to make it a Sass variable like all the other tokens. (This would also fix the minor issue that the current version includes the variable styles three times in the build output as part of different components.)

I'm not super opinionated. I think the intention was to have a CSS file at the end of the migration that we could try an upstream to Codex to have them add the variables to the CSS, but we could also keep the missing variables in Sass in our repo for now.

[lucaswerkmeister]

I'm not super opinionated. I think the intention was to have a CSS file at the end of the migration that we could try an upstream to Codex to have them add the variables to the CSS, but we could also keep the missing variables in Sass in our repo for now.

I’d prefer to make them Sass variables for now and then potentially reevaluate that at the end of T375370, but I’m also okay with keeping them as they are.

(The other questions are now blocked on feedback from UX IIUC.)

[codders]

Updated per UX feedback - should be good to go now.

[lucaswerkmeister]

There’s currently too much space before the lexeme language / lexical category asterisks, but I think that’s just a consequence of #773 being blocked – the asterisks currently have both the gap on the surrounding label and the margin that’s supposed to replace the gap, if I understand correctly.