How to access the alpha of an --ion-color

Ionic Framework
1

I noticed this syntax being used by ion-chip:

:host(.ion-activated) {
    --background: rgba(var(--ion-text-color-rgb,0,0,0),0.2);
}

It looks like a way of getting the 0.2 opacity of a color set by a css variable. so I thought I would try it:

 border: 1px solid rgba(var(--ion-color-success), 0.5);

but this doesn’t work. also tried:

 --border: 1px solid rgba(var(--ion-color-success), 0.5);

I find the ion-success color to be too strong and would love to be able to get the 50% version of it.
I’m open to any ideas, not necessary nesting a variable from inside a rgba()…

2

Two potentially important issues here:

  • --ion-color-success is not the same thing as --ion-color-success-rgb (the -rgb suffix is crucial to the “nested rgba hack”)
  • separating out border into its components may be helpful:
border-width: 1px;
border-style: solid;
border-color: rgba(var(--ion-color-success-rgb), 0.5);
2 Likes
3

Oh that’s brilliant. -rgb is the key there.
breaking it up doesn’t seem necessary, this works like a charm:

 border: 1px solid rgba(var(--ion-color-primary-rgb), 0.5);

Is there a way to test this kind of stuff? Like a debug console or playground for “advanced” css? Strongly typed css??!