At some point it would be nice to support react

buttons.scss uses raw color values. variables should be used instead

At some point it would be nice to support angular

When changing to dark mode via the button on https://codedgar.github.io/Puppertino/examples/dark_mode.html, it seems that there are no shadows visible in the shadow components.

I understand it defeats the purpose of having shadows in darkmode, but maybe you can get "inspiration" from one of the options how others tried to solve it?

Light mode (shadows clearly visible):

Dark mode:

Potential solutions:

1. https://codyhouse.co/nuggets/beautiful-css-shadows
2. https://meta.discourse.org/t/suggestion-regarding-the-box-shadow-of-the-dark-theme-composer/77102

Workstation:

• Win 11
• Chrome, Firefox, Opera, Edge, Brave: seeing the same behavior
• Latest GA version

There are multiple repetitive variables definitions in the project. I would propose to move them in one place.

Could you make famoust OS X scrollbar to be part of this?

I think scrollbar very vital, yet missing piece.

There's a bug in line 1326 in full.css.

The line says:
"bottom: 20%;"

Just comment it out or remove it, it will make the "OK" button too big if it is set.

full.css code:

@media (max-width: 568px) {
.p-modal {
/* bottom: 20%; user edit from alex */
left: 15%;
top: unset;
width: 70vw;
}

modals.scss should use scss variables instead of css

To make github issues more obvious, we should introduce some labels like: feature, bug, feature request and more

forms.scss should import global scss variables instead of defining them in the file

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

To enforce a guide line we should install and configure style linter

At some point it would be nice to support Vue

full.scss uses css variables instead of scss

The Layout examples page only deals with font sizes, whereas "layout" usually refers to the disposition of elements in the screen area (e.g. a column-based layout, the holy grail layout, etc.). This is partly acknowledged in the README, where those styles are referred to as "Font Layout".

Similarly, the layout.css file should be renamed typography.css, as well as other references.

To enforce a code guide line we should setup at least a pre commit hook which runs all the linters.

Please add new Components to this awesome framework.

segmented-controls.scss should use scss variables instead of css

If the project should support different frameworks, I would like to propose to run the project as a monorepo

Simple issue - the sizing on an ios device seems wrong - for example the mobile bottom nav is huge compared to native... Thanks! Nick

cards.scss uses raw color values. Variables should be used instead

No prettier is configured yet. To enforce a guide line, we should setup prettier.

color_palette.scss uses raw color values instead of variables. Those should be defined somewhere else and used across tho project

I'm trying to implement your modals.js/modals.css only and running in to this error:

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at modals.js?ver=1.0:35:5
    at modals.js?ver=1.0:53:3

Any ideas where this can be solved? It's breaking the functionality for me.

Hey there devs.

I was interested to code with Puppertino and I want to use it with Next.js

Is your feature request related to a problem? Please describe.
No

Describe the solution you'd like
Have the framework updated to support the current macOS version -- Big Sur 11.*

Describe alternatives you've considered
This is the best package I've found so -- none really.

Describe the bug
The link to "actions.js" in the documentation (section: actions) doesn't work anymore as the file doesn't exist in the repository.
Because of this action buttons won't work.
I opened up dev tools and figured out on the documentation tag (bottom of body tag) there is a script tag containing the required javascript to use actions. I just copied this script and now the example code provided in the docs works just fine.
So I believe it probably wasn't intended that actions.js got removed from the repository.

Additional context
Referring to this page: https://codedgar.github.io/Puppertino/examples/actions.html

Fix
Following script tag was copied from the html page to make actions work as intended:

<script type="text/javascript">
    (function (document) {

        var p_actions = document.querySelectorAll("[data-p-open-actions]");
        var actions = document.querySelectorAll(".p-action-big-container");
        var cancel_action = document.querySelectorAll("[data-p-cancel-action]");

        for (var item of p_actions) {
            item.addEventListener("click", function (event) {
                event.preventDefault();
                var selector = this.getAttribute("data-p-open-actions");
                if (selector.length == 0) {
                    console.warn(
                        "Error. The data-p-open-action attribute is empty, please add the ID of the action you want to open."
                    );
                    return false;
                }
                document.querySelector(".p-action-background").classList.add("nowactive");
                document.body.classList.add("p-modal-opened");
                document.querySelector(selector).classList.add("active");
            });
        }

        for (var element of cancel_action) {
            element.addEventListener("click", function (event) {
                event.preventDefault();
                document.querySelector(".p-action-big-container.active").classList.remove("active");
                document.querySelector(".p-action-background").classList.remove("nowactive");
                document.body.classList.remove("p-modal-opened");
            });
        }

        document
            .querySelector(".p-action-background")
            .addEventListener("click", function (event) {
                event.preventDefault();
                var opened_action = document.querySelector(".p-action-big-container.active");
                if (opened_action.getAttribute("data-p-close-on-outside") == "true") {
                    event.stopPropagation();
                    opened_action.classList.remove("active");
                    document
                        .querySelector(".p-action-background")
                        .classList.remove("nowactive");
                    document.body.classList.remove("p-modal-opened");
                }
            });

        for (var action of actions) {
            action.addEventListener("click", function (event) {
                event.stopPropagation();
            });
        }
    })(document)
</script>

This should probably be included in the repository again as actions.js :)