DistributionBar display juste the number with Valo theme

Hello,

I tried to use the component DistributionBar, it seems simple to realize, but i got nothing to display on the screen.
No bar, i can just see the number for each part, it's related to the css?
Thank you.

this.setSpacing(true);
        bar = new DistributionBar(3);
        bar.setCaption("Change in part count:");
        bar.setWidth("100%");
        bar.addStyleName("my-bar-one");
        bar.addDistributionBarClickListener(new DistributionBarClickListener()
        {
            @Override
            public void onItemClicked(int index)
            {
                Notification.show("Clicked index=" + index);
            }
        });
        bar.setPartSize(0, 2);
        bar.setPartSize(1, 3);
        bar.setPartSize(2, 6);
        bar.setPartTooltip(0, "<b>Part 1</b><br/>");
        bar.setPartTooltip(1, "<b>Part 2</b><br/>");
        addComponent(bar);
        this.setComponentAlignment(bar, Alignment.MIDDLE_CENTER);
        
        gridLayout = new GridLayout();
        addComponent(gridLayout);