Why is typography.secondary explicitly placed before primary in the output CSS?

[unekinn]

In #2560 I found this sorting function used when concatenating the different generated css files into one entry file per theme.

const sortLightmodeFirst = R.sortWith<string>([R.descend(R.includes('light')), R.descend(R.includes('secondary'))]);

The PR changed this to a deterministic order:

const sortOrder = [
  'color-mode/light',
  'typography/secondary',
  'semantic',
  'color-mode/dark',
  'color-mode/contrast',
  'typography/primary',
];

This sort order keeps the brand css files unchanged from the existing commited files when running yarn build:tokens. But is there a reason for this exact ordering? The old sorting function would be equivalent to this:

const sortOrder = [
  'color-mode/light',
  'typography/secondary',
];

That is to say, these two would always come first, and then the rest in an unspecified — but usually the same — order.

However, wouldn't it make more sense for the things that are added to :root -- color-mode/light, typography/primary, and semantic, to be first, and then other color modes, then typography/secondary?

[unekinn]

I will check if the order can now be

  'semantic',
  'color-mode/light',
  'color-mode/dark',
  'color-mode/contrast',
  'color/',
  'builtin-colors',
  'typography/primary',
  'typography/secondary',

There should be no conflicting rules that rely on the order of definition to ensure correctness, so I'm pretty sure this should work 😄

[mimarz]

I can't remember why, but it seems to still work fine now, so lets reopen this if it becomes a problem again :)