As WikimediaUI Base is becoming a public interface (still early stage, little dependencies), I'd like to discuss early-on several variables naming questions, as naming is
- hard,
- hard for a non-native English speaker like myself,
- hard to change later on if insufficiently clear
There are several ideas and questions that I'd like to have clarified:
- --color-base-contrast: contrast was meant to describe the opposite to the normal color combination, which after thinking about it reccurringly seems ambigous. -invert makes probably more sense, although it doesn't describe the inverted color of -base (#222) fully correct
- *-filled-disabled: Is this understandable for a native speaker. If the widget is filled disabled, that's the color or border-color for it.
- I'd like to change the modifier variables of a base variable to use -- in order to be easier readable (in the tradition of BEM's two dashes style) and featuring self-documenting code
So instead of
/* Foreground Colors */ --color-base: #222; --color-base-hover: #444; --color-base-active: #000; --color-base-contrast: #fff; --color-base-emphasized: var( --color-base-active ); --color-base-disabled: #72777d; /* = HSB 210°, 9%, 49%; WCAG 2.0 level AA at 4.52:1 contrast ratio on `#fff` */ --color-filled-disabled: var( --color-base-contrast );
we would feature
/* Foreground Colors */ --color-base: #222; --color-base--hover: #444; --color-base--active: #000; --color-base--contrast: #fff; --color-base--emphasized: var( --color-base--active ); --color-base--disabled: #72777d; /* = HSB 210°, 9%, 49%; WCAG 2.0 level AA at 4.52:1 contrast ratio on `#fff` */ --color-filled--disabled: var( --color-base--contrast );
Feedback welcome!