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/resetlink 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); }

No comments:

Post a Comment