Semantic palette/vocabulary search

 

I am trying to make a sense of semantic naming convention to theme. May be you could give a hint where to look for vocabulary.
For example we have a "actionable" component. It could be in active, disabled, hovered, focused states. There are primary(default), secondary and "alternate" actions( to go out of flow like Cancel or 'x' buttons). 

`button`, input type=submit/reset, link with button appearance are samples of such actionable UX components. In semantic terms the properties of those UX elements would use semantic variables:

Semantic CSS variables sample

--primary-text-color : black; --primary-bg-color : white;   .light-theme{ --primary-text-color : black; } /* not needed as light could be default one */ .dark-theme{ --primary-text-color : white; }     --action-primary-color: var( --primary-text-color ); --action-primary-color-bg: var( --primary-bg-color );   button{ color: var(--action-secondary-color); background: var(--action-secondary-color-bg); } button[type=submit]{ color: var(--action-primary-color); background: var(--action-primary-color-bg); } button[type=reset], .alt-action{ color: var(--action-alt-color); background: var(--action-alt-color-bg); }