Using --color vs color: in css

Ionic Framework
1

I’m a bit confused as to how styling should be done, I’m wondering for example what is the difference between these two?

.photo-card-header__title {
    --color: var(--ion-color-danger);
}

.photo-card-header__title {
    color: var(--ion-color-danger);
}

If anyone knows of an open source ionic project that shows this well, feel free to share! I might pick it up from there

2

My rule of thumb:

anything with double dash is a variable exposed by the component creator to style the component, the component being a shadow component. This meaning that the styling is restricted to the API provided for in this way

the color without double dash is a classic CSS attribute, which pending the component may or may not affect the styling.