Variable naming conventions

[apreg]

Hi, Please, give me some hint about how to name the variable in this case:

//theme-map.css
--Settings-inputText-borderColor: var(--color-dark-grey);
--Settings-inputTextFocus-borderColor: var(--color-blue);

//Settings.css
.Settings-inputText {
border-color: var(--Settings-inputText-borderColor);
}
.Settings-inputText:focus {
border-color: var(--Settings-inputTextFocus-borderColor);
}

Normally Settings-inputTextFocus would mean I have an inputTextFocus descendant under Settings so how could I emphasize that is not the case but I have a :focus selector instead?

[giuseppeg]

You can treat that as a state class instead e.g.:

:root {
  --Settings-inputText-isFocus-borderColor: var(--color-blue);
}

or (terrible idea) but worth mentioning it:

:root {
  --Settings-inputText\:focus-borderColor: var(--color-blue);
}
.Settings-inputText:focus {
  border-color: var(--Settings-inputText\:focus-borderColor);
}

[giuseppeg]

Hope this helps. Since there is already an old issue about variable naming convention I am going to close this one.

[apreg]

The old issue link gives me 404 but otherwise your comment helped me. Thank you.

[giuseppeg]

@apreg fixed the link :)