While a lot of progress has been made when issue NEXT-28267 was resolved, the Shopware CSS is still full of hardcoded and borderline obsolete code, which makes creating custom themes difficult and results in a bloated codebase.

As an example, this code block can be found in _filter-panel.scss:

.icon.icon-filter-panel-item-toggle {
    margin-left: 8px;

    > svg {
        top: 4px;
    }
}

In the same file, a height and padding is hardcoded in pixels for the filter panel:

.offcanvas-filter {
    .filter-panel {
        height: calc(100% - 80px);
        overflow-y: auto;
        width: 100%;
        padding: 0 25px 25px;
    }
}

This creates incredibly specific selectors with hardcoded pixel values (which isn't good practice to begin with), that requires an even higher specificity to be overriden.

It is not only problematic for developers creating custom themes that need those values overriden, but also for the users. It can make the website inaccessible for users using assistive technology (or even just differently sized devices) due to the overwhelming use of pixels instead of relative units (like rem/em). Additionally, the use of physical instead of logical properties (e.g. margin-top vs margin-block-start) can make the website unusable for users using a different writing mode than LTR.

While I do realise that modifying the entire CSS codebase to accomodate those changes is quite a challenge, I believe in the long run it is critical to address this issue for the benefit of both developers and users.