Make sure all the CSS variables used exist (& upgrade the design tokens) #68
Conversation
sandhose
requested review from
SimonBrandner and
robintown
and removed request for
a team
Deploying with
|
| Latest commit: |
3972eb7
|
| Status: | ⚡️ Build in progress... |
| "importFrom": [ | ||
| "./src/styles/global.css", | ||
| "./node_modules/@vector-im/compound-design-tokens/assets/web/css/cpd-common.css", | ||
| "./node_modules/@vector-im/compound-design-tokens/assets/web/css/cpd-light-mq.css" |
There was a problem hiding this comment.
I chose one of the themes to define the variables
| @@ -17,7 +17,7 @@ limitations under the License. | |||
| .button { | |||
| border-radius: var(--cpd-radius-pill-effect); | |||
| cursor: pointer; | |||
| -webkit-appeareance: none; | |||
There was a problem hiding this comment.
That was a typo not being caught by stylelint because of the shell expansion issue
| import VisibilityVisible from "@vector-im/compound-design-tokens/icons/visibility-visible.svg"; | ||
| import VisibilityInvisible from "@vector-im/compound-design-tokens/icons/visibility-invisible.svg"; | ||
| import VisibilityOn from "@vector-im/compound-design-tokens/icons/visibility-on.svg"; | ||
| import VisibilityOff from "@vector-im/compound-design-tokens/icons/visibility-off.svg"; |
There was a problem hiding this comment.
Those icons were renamed in the design tokens
| @@ -18,158 +18,135 @@ limitations under the License. | |||
| * Font – Body – Extra Small | |||
| */ | |||
|
|
|||
| [class^="font-body-xs"] { | |||
There was a problem hiding this comment.
Looking at the CSS output file makes it obvious that this trick does not work with CSS modules
|
|
||
| /* Default icon and avatar size */ | ||
| --cpd-icon-button-size: var(--cpd-space-8x); | ||
| --cpd-avatar-size: var(--cpd-space-16x); |
There was a problem hiding this comment.
This is mainly to avoid the "variable is not defined" error for those, even though they are always set within the component
sandhose
force-pushed
the
quenting/cleanup-variables
branch
from
e0b40c5 to
3972eb7
Compare
|
When I merged back |
After #67, I saw a bunch of places which were using undefined CSS variables. This adds a stylelint plugin to make sure only defined variables are being used.
While looking at this, I saw a bunch of issues that I fixed along the way:
stylelintwas actually not being run because of some shell quoting issue