Styling is broken for ring styles like 'ring-1'

[Wanderwichtl]

Hello,
I am having some huge problems in order to get the :ring-1 styles applied. It seems to be broken.
When the styles :ring-1 :ring-secondary-body-border are applied, I get:

    --gi-ring-color: rgba(114,124,121,var(--gi-ring-opacity));
    --gi-bg-opacity: 1;
    box-shadow: var(--gi-ring-inset) 0 0 0 calc(1px+var(--gi-ring-offset-width)) var(--gi-ring-color);

This is computed to none in the browser

I tried to get this up and running with a custom-rule, but even there I have some problems. Even just to get it up and running.

(defn- ring-width-compiler [{[value] :component-data}]
  (let [size (if (nil? value)
               "3px"
               (common/value-unit->css value {:zero-unit nil
                                              :number    {:unit "px"}}))]
    {:--gi-ring-opacity (str "var(--gi-ring-opacity, 1)")
     :--gi-ring-color (str "var(--gi-ring-color, rgb(114 124 121 / var(gi-ring-opacity)))")
     :--gi-ring-offset-shadow (str "var(--gi-ring-inset) 0 0 0 var(--gi-ring-offset-width, 0px) var(--gi-ring-offset-color, #fff)")
     :--gi-ring-offset-width (str "var(--gi-ring-offset-width, 0px)")
     :--gi-ring-shadow (str "var(--gi-ring-inset) 0 0 0 calc(" size " + var(--gi-ring-offset-width, 0px)) var(--gi-ring-color)")
     :box-shadow (str "var(--gi-ring-offset-shadow), var(--gi-ring-shadow), var(--gi-shadow, 0 0 #0000)")}))

;; config part
{:components [{:id     :ring-width 
                         :rules  "ring-width = <'ring'> (<'-'> ('inset' | number | length | length-unit))?"
                         :garden ring-width-compiler}]}

I would be glad for any advises or help Alex

[plexus]

Hi Alex,

Seems like this might actually be a girouette issue. Have you filed an upstream issue we could track?

Thanks!

[green-coder]

@Wanderwichtl Hi,

As Plexus said, it seems to be a Girouette issue. Please open an issue at https://github.com/green-coder/girouette or (even better) create a PR.

Thanks !

[Wanderwichtl]

Hi, I've created an issue at https://github.com/green-coder/girouette/issues/95