primefaces / primevue-sass-theme Goto Github PK

Details; primefaces/primevue#5000

The $colors lists do not have a !default tag in most (if not all) themes which makes it impossible to change the colors without copying the whole variables file and base theme.

It would be great if this tag is added so it can be modified like every other variable in the variables file.

Example:

Proposed changes:

     "red": #F44336,
     "primary": $primaryColor
-);
+) !default;

Migrate to Inter Var as the default font of Lara

primefaces/primevue#4714

There appears to be only one theme, the aura-light that provides this variable, but it is required in the base theme.

ERROR  [sass] Undefined variable.
outline-offset: $inputFocusOutlineOffset;
                ^^^^^^^^^^^^^^^^^^^^^^^^
assets/css/theme-base/_mixins.scss 21:21                         focused-input()

• OverlayPanel
• ConfirmPopup
• Divider
• Badge directive

In dark mode, hover and active colors of primary color e.g. on button should lighten instead of darken.

The Message and InlineMessage component background color for severity="error" messages is the same with the warning background in tailwind-light theme.

#14

This rule :focus overwrite extended rules when is used only :focus-visible.

Details; primefaces/primevue#5214

primefaces/primevue#4818

Not sure if this is a bug or not.

I just updated to version 3.47.2 (from 3.44.0), and now my primary buttons don't have a focus ring when they are pressed (has the :focus state active), but the Secondary, Info, Warning, etc buttons still do.

They have the SCSS like below inside the theme-base\components\button\_button.scss file

    &:not(:disabled):focus {
        box-shadow: $secondaryButtonFocusShadow;
    }

I noticed that the non-primary buttons have rules that target the :focus state, but the primary button does not have this rule. It looks like this commit changed it to be :focus-visible : 08026c0

Flipping around the themes on https://primevue.org/button/ it looks like the Aura themes do not have this focus ring, but the Lara theme does.

It seems like the mytheme editable base is maybe broken? Or is the intent to manually set the focus ring for the primary button when using the mytheme ?

Go to https://primevue.org/password/#togglemask
Hover/Click on the eye icon.
Hand/Cursor icon not showing.

Details; primefaces/primevue#5155

Details; primefaces/primevue#5012

Hello folks!

I am reaching out to ask you if there would be a possibility to see a spoiler of how the new theming approach will be?

The reason is that in my team we are starting to build a component library based on prime vue.
We are literally just starting, and in the phase of understanding how the sass-theme structure works, and configuring the tokens etc.

I just watched this video: https://youtu.be/iZp_l0Yl3Zw?t=829

Where you explains high level that the new theming will use only css variables, and be backwards compatible.

As we are just starting, we could perhaps start with the "new approach" or have a temporal thing that allow us to migrate to the new way sooner. And that is the reason why I am asking if there was some doc, diagram, or a bit more insights about how the new theming will work?

Could be a nice opportunity to get early feedback from early adopters :)

Thank you for your work on this!
Daniela

primefaces/primevue#4028

primefaces/primevue#5176

I dont know if this is meant to go on npm, but the fact that this exists makes it a little confusing. Maybe @riad-rymexp can chime in as well.

primevue/resources/primevue.css from the the original package has some classes that are missing from this repository. for example .p-hidden-accessible or .p-overflow-hidden , so you still need to import /node_modules/primevue/resources/primevue.min.css in parallel with your theme.

I'm not sure this is intentional, but in the tutorial video (Create your own PrimeVue Themes) there is no mentioning of this.

Both versions are at 3.26 on my local.

primefaces/primevue#5067

Related primefaces/primevue#5099

• Galleria
• Image
• Message
• Toast
• Password
• DataTable
• Tree
• TreeTable
• SpeedDial
• Rating
• ContextMenu
• TieredMenu
• ScrollTop
• Tag
• ConfirmPopup
• Checkbox

Hi,

There is a code smell in this file :

The link of the code smell error: https://rules.sonarsource.com/css/RSPEC-4656/

Affected Components;

• Checkbox
• RadioButton
• TriStateCheckbox
• InputSwitch
• ToggleButton
• Slider

Details; primefaces/primevue#5071