CTI with a pre-fix for component organization

Looking to see if anybody has tried doing a configuration that respects CTI, but has a prefix for component organization (e.g: button-color-background, button-color-text)? Looking to follow this method: https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676

One thing I saw in the Advanced examples was flipping the category (color, type) to the end (CSS taxonomy), but looking for implementation guidance on allowing for a prefix (e.g: base-, semanticBase-, or a component like button-)? I do like the CSS way, but state modifiers like -hover and -pressed get somewhat complicated as ideally those would end with the state modifier, but the Component CTI example desires the value in components to end in category.

Naming is a trip. Following this because I have similar questions.