primefaces / community Goto Github PK

0.0 0.0 0.0 0 B

Community Forum

community's Introduction

PrimeFaces

This is an overview page, please visit PrimeFaces.org for more information.

Overview

PrimeFaces is one of the most popular UI libraries in Java EE Ecosystem and widely used by software companies, world renowned brands, banks, financial institutions, insurance companies, universities and more. Here are some of the users who notified us or subscribed to a PrimeFaces Support Service.

Community <> Elite <> Pro

This is the open source code and issue tracker of the PrimeFaces master (a.k.a. community version).
Please check the following link for informations about Elite and Pro: PrimeFaces Support

What does that mean?

PrimeFaces is developed by PrimeTek and the open source community.
The most contributers here on GitHub are working on PrimeFaces in their spare time.
PrimeTek pushes fixes and new features from their closed source Elite and Pro repositories to the community edition.
We, the community on GitHub, only provide support for issues, which are reproducable with the current SNAPSHOT (scroll down for more information on how to use it).
We are NOT able to port bugfixes to elite releases. This is up to PrimeTek and can e.g. be triggered with PrimeFaces PRO.

Versions

Binary	Source	JSF version	Java version	Documentation
JAR	Sources	2.3 - 4.0	11 - ?	14.0.0 Documentation
JAR	Sources	2.0 - 4.0	1.8 - ?	13.0.7 Documentation
JAR	Sources	2.0 - 4.0	1.8 - ?	12.0.0 Documentation

Version	Binary	Source	JSF version	Java version	Documentation
11.0.0	primefaces-11.0.0.jar	primefaces-11.0.0-sources.jar	2.0 - 4.0	1.8 - ?	11.0.0 Documentation
10.0.0	primefaces-10.0.0.jar	primefaces-10.0.0-sources.jar	2.0 - 3.0	1.8 - ?	10.0.0 Documentation
8.0	primefaces-8.0.jar	primefaces-8.0-sources.jar	2.0 - 2.3	1.8 - ?	8.0 Documentation
7.0	primefaces-7.0.jar	primefaces-7.0-sources.jar	2.0 - 2.3	1.7 - ?	7.0 Documentation
6.2	primefaces-6.2.jar	primefaces-6.2-sources.jar	2.0 - 2.3	1.6 - ?	6.2 Documentation
6.1	primefaces-6.1.jar	primefaces-6.1-sources.jar	2.0 - 2.3	1.5 - ?	6.1 Documentation
6.0	primefaces-6.0.jar	primefaces-6.0-sources.jar	2.0 - 2.2	1.5 - ?	6.0 Documentation
5.3	primefaces-5.3.jar	primefaces-5.3-sources.jar	2.0 - 2.2	1.5 - ?	5.3 Documentation
5.2	primefaces-5.2.jar	primefaces-5.2-sources.jar	2.0 - 2.2	1.5 - ?	5.2 Documentation
5.1	primefaces-5.1.jar	primefaces-5.1-sources.jar	2.0 - 2.2	1.5 - ?	5.1 Documentation

Maven

Release

<!-- Java EE / javax.* / JSF 2.2 - JSF 2.3 -->
<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>13.0.7</version>
</dependency>

<!-- Jakarta EE / jakarta.* / Faces 3.0 - Faces 4.0  -->	
<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>13.0.7</version>
    <classifier>jakarta</classifier>
</dependency>

SNAPSHOT

<!-- Java EE / javax.* / JSF 2.3 -->
<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>14.0.0-SNAPSHOT</version>
</dependency>

<!-- Jakarta EE / jakarta.* / Faces 3.0 - Faces 4.0  -->
<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>14.0.0-SNAPSHOT</version>
    <classifier>jakarta</classifier>
</dependency>

<repositories>
  <repository>
    <id>sonatype-snapshots</id>
    <name>Sonatype Snapshot Repository</name>
    <url>https://oss.sonatype.org/content/repositories/snapshots</url>
    <releases>
        <enabled>false</enabled>
    </releases>
    <snapshots>
        <enabled>true</enabled>
    </snapshots>
  </repository>
</repositories>

Usage

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
	xmlns:jsf="http://xmlns.jcp.org/jsf"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

	<h:head>

	</h:head>

	<h:body>

		<p:spinner />

	</h:body>
</html>

Demo

Please refer to the showcase in order to see the full usage of the components. Sources of PrimeFaces showcase are available within module primefaces-showcase.

Contribution

Visit the contribution page for detailed information.

Release Instructions

Run mvn versions:set -DgenerateBackupPoms=false -DnewVersion=14.0.0 to update all modules versions
Commit and push the changes to GitHub
In GitHub create a new Release titled 14.0.0 to tag this release
Run mvn clean deploy -Prelease to push to Maven Central
Rename Milestone in GitHub Issues and close it
Create a new Milestone

License

Licensed under the MIT License.

community's People

Contributors

Watchers

community's Issues

Rendering issues with PrimeNG Ultima 17 update

Discussed in https://github.com/orgs/primefaces/discussions/792

^{Originally posted by admin-nexgen December 30, 2023}
There are a couple of issues with the styling in the latest update.

The mega menu text colors are hard-coded to red in the dark theme _variables.scss file.

New update

$menuitemTextColor:red !default;

Should be

$menuitemTextColor:$textColor !default;

Also the table demo rating icons are too big compared to the previous release

The blog demo text and images are not appearing as well

There might be other issues, these are just the ones that I found so far.

Prevent accordion tab change based on a condition

Discussed in https://github.com/orgs/primefaces/discussions/917

^{Originally posted by thomasesh January 12, 2024}
We use the accordion component to configure our settings and each tab has a separate group of settings and a submit button to save the changes on the tab. Primeng version 15.3.0.

I am implementing a feature that will pop up a confirmation dialog if the user tries to switch from or close a tab on which they have unsubmitted changes on the tab.

To do this, I use a templated header for the tab with click handler surrounding it to that will prompt before switching if there is a change on the tab. If the prompt is answered no, then the change will not occur.

This works except that the icon in the tab header is not covered by the click handler. So clicking on the icon will always change the tab regardless and not prompt.

I have a solution if I change the accordion code to take as input a "canToggle()" method, which will be used by the accordion tab to determine if toggling the tab is allowed or not. I can create a PR for this change but before I do, I want to make sure I am not missing some way to do this without changing the existing primeng accordion component.

Is there a way to do this using the existing primeng accordion component?

Primeng table virtual scroll header jumping while scrolling up - Firefox

Discussed in https://github.com/orgs/primefaces/discussions/1207

^{Originally posted by ShivrajChougule February 16, 2024}
Primeng table & treetable virtual scroll header jumping while scrolling up - Firefox

The similar issue is mentioned here #10630

But, it still exists for the Firefox. PFB links,

https://primeng.org/table#virtual-scroll
https://www.primefaces.org/primeng-v14-lts/table/virtualscroll

PrimgNg splitbutton component menubutton disabled state

Discussed in https://github.com/orgs/primefaces/discussions/992

^{Originally posted by pouyababaie January 22, 2024}
i wanted to disabled just the menubutton , but there was no option , so i added it myself. i create a pull request for it.

inputNumber doesn't accept entering a number with a leading decimal point like ".5"

Discussed in https://github.com/orgs/primefaces/discussions/525

^{Originally posted by iMarti November 22, 2023*}
When using an inputNumber control, typing a number starting with a decimal point, like ".5" instead of "0.5" is not possible. The effect is that the entered number is only "5".

You can see the effect yourself in the third box named "Min-Max Fraction Digits" on PrimeNG documentation page here https://primeng.org/inputnumber. It is visible in any North American locale that uses a dot as a decimal point.

Actually, this is a common need supported by the standard <input type="number"> element.

*Edited to add more details.

No ability to add custom submenu icon in menubar

Discussed in https://github.com/orgs/primefaces/discussions/738

^{Originally posted by AlexanderLevchenko December 20, 2023}
Hi, colleagues!
Since primeng v16.2 we faced with a problem:
we have no ability to add custom submenu icon in menubar

This is because you are trying to get submenuIconTemplate from menubar, but appropriate viewChild for menubar is menubarViewChild

I believe, submenuIconTemplate should be retrieved from menubarViewChild instead of menubar in the template

This is not reproducible in v16.0.2
Could you please help on this?
Thank you in advance!

Markdown Documentation for GPT Implementations

Description

If we look at amazing projects like builder.io's Frontend component builder it would be nice to have the PrimeVue (and others) and PrimeFlex Documentation as pure markdown. So that it can be used to fine tune LLMs or make automatic prompts based on the original Documentation stored in a vector Database.
Are there plans to provide the Documentation not only via the Website?

Describe the solution you would like

Markdown Documentation

Additional context

No response

deprecated virtualScrollBody property in PrimeNG 14

Discussed in https://github.com/orgs/primefaces/discussions/817

^{Originally posted by Sayali77 January 3, 2024}
my PrimeNG 13 application, I was utilizing the virtualScrollBody property of the Table component to access the scroll viewport bounds using the following code:

const scrollViewportBounds = this.table.virtualScrollBody.elementRef.nativeElement.getBoundingClientRect();

this gives the current scroll location
However, after upgrading to PrimeNG 14, I've discovered that the virtualScrollBody property is now deprecated, and I'm unable to find a direct replacement.
Could you please advise on the recommended approach to access the scroll viewport bounds in PrimeNG 14, particularly for virtual scrolling scenarios?
Is there an alternative property or method that I should be using instead of virtualScrollBody?

PrimeReact TreeSelect feature request

Discussed in https://github.com/orgs/primefaces/discussions/1298

^{Originally posted by rdyava February 26, 2024}
Hello all,

I am using the TreeSelect component and was wondering if there is a way to alter the behavior of the checkbox selection mode. Currently when there is a single child node of a parent node, with the checkbox selection mode enabled and selecting the child, it also checks the parent node as well. Is there a way to make it so that for this sort of use case, the parent node is not selected? For example, in the example in the documentation, selecting "Invoices.txt" also selects "Home", I would need "Home" to be a partially selected value in this case and not showing as a selection with "Invoices.txt".

The propogateSelectionUp and propogateSelectionDown props from the standard Tree component which modify the checkbox selection behavior are not present in the TreeSelect component. For my use case which I defined in the linked discussion, I would like these props to be made available in the TreeSelect component if possible.

Creation of some source of a migration guide

Discussed in https://github.com/orgs/primefaces/discussions/1203

^{Originally posted by reacts99 February 15, 2024}
I like the migration guide that you guys have on primefaces documentation, and is something real useful. I know people with older version of primereact in there projects because they encounter problems when migrating to the latest one and cause there is not some documentation they can follow up to debug there flow when migrating they just give up. And newer version of primereact have really cool features that are just getting missed for those folks.

DataTable: Arial-label issues

Discussed in https://github.com/orgs/primefaces/discussions/1240

^{Originally posted by xaxoxavi February 20, 2024}
Some elements (buttons or form elements) generated by the DataTable component do not have an 'aria-label' attribute.
Here is the list of the ones I spotted:

Same issue resolved in primereact

(1) The filter button generated by property filterDisplay='menu
(2) The paginator dropdown menu to select the number of rows to display. This element generates a 'p-hidden-accessible' div with an input element (with role="textbox") in it, but this input has no aria-label attribute. It also generates a 'p-dropdown-trigger' div with the role 'button' and this div has no aria-label attribute
(3) The radio buttons and checkboxes generated in selection mode

(1)

(2)

(3.1)

(3.2)

Changing Theme fails on Vue 3 PrimeVue

Discussed in https://github.com/orgs/primefaces/discussions/1022

^{Originally posted by Aleroms January 25, 2024}
Hello,
I've tried to the best of my abilities to follow the documentation on switching themes but have not had success. When I inspect the page, I view changes in the head, specifically the link element, where it does reflect changes. My href attribute changes from <link id="theme-link" rel="stylesheet" href="/themes/lara-light-green/theme.css"> to <link id="theme-link" rel="stylesheet" href="/themes/lara-dark-green/theme.css">, however, the actual theme does not change.

I have created a test app with just this implemented in my repo changeTheme_PrimeVue as well as a live site example.

Here are the steps I took to create this below.

how to replicate:
create vue app npm init vue@latest
install primevue npm install primevue
in main.js
register plugin and import theme
import 'primevue/resources/themes/lara-light-green/theme.css'
import "primevue/resources/themes/lara-dark-green/theme.css";
copy themes from PrimeVue resources/themes folder into public/themes
place link in index.html <link id="theme-link" rel="stylesheet" href="/themes/lara-light-green/theme.css"/>
copy and paste code from App.vue into App.vue
run dev npm run dev

Virtual Scroll Jumping Backwards

Discussed in https://github.com/orgs/primefaces/discussions/353

^{Originally posted by msixfour October 31, 2023}
if we have a textarea next to a dropdown and pass [autoresize]=true to it, the virtual scroll doesn't work correctly.
Code to reproduce:

<div class="card flex justify-content-center">
  <textarea pInputTextarea rows="1" [autoResize]="true"></textarea>
  <p-dropdown
    [options]="items"
    [(ngModel)]="selectedItem"
    placeholder="Select Item"
    [virtualScroll]="true"
    [virtualScrollItemSize]="38"
  ></p-dropdown>
</div>

constructor() {
    this.items = [];
    for (let i = 0; i < 50; i++) {
      this.items.push({ label: 'Item ' + i, value: 'Item ' + i });
    }
  }

@cetincakiroglu
codesandbox example: https://codesandbox.io/s/primeng-dropdown-virtualscroll-demo-forked-8tn6m7?file=/src/app/demo/dropdown-virtualscroll-demo.html

Cursor does not allow you to select items in a P-Dropdown in v17.3.3

Discussed in https://github.com/orgs/primefaces/discussions/969

^{Originally posted by hepple January 20, 2024}
I have the below, as well as many other examples, where in v16 the cursor would allow you to select an item. This has stopped working in v17+

<div class="col-4"> <span class="p-float-label"> <p-dropdown formControlName="newGovernorSalutationId" [options]="siSalutations" id="newGovernorSalutationId" [filter]="true" filterBy="label" optionLabel="label" optionValue="value" appendTo="body"></p-dropdown> <label for="newGovernorSalutationId">Salutation</label> </span> </div>

Multiselect's onChange event is not fired on Select all/Unselect all or range selection

I believe this is a bug. It was introduced in version 16.8.0. You can see it in the diff between version 16.7.2 and 16.8.0 in the src/app/components/multiselect/multiselect.ts. Also, the breaking change is not listed in the release notes for 16.8.0. Yes, you can look at the full change log but a breaking change should be called out and should be in a major version bump instead of a minor version bump.

v16.7.2 shows the updateModel and onChange functions fire every time.

v16.8.0 checks for this.selectAll to be explicitly null for updateModel to fire. And the call to onChanged was removed.

v17.1.0 updated the this.selectAll check to be less strict

In master, there are 2 place onChanged is called: onOptionsSelect and removeOption

updateModel is called in 6 places: onOptionsSelect, onOptionSelectRange, onKeydown, onToggleAll, clear, and removeOption

Should the onChange event be fired in all 6 cases where updateModel is called? The onSelectAllChange and clear events give hooks for those 2 cases but onOptionSelectRange and onKeydown don't provide events. I could, of course, tap into the control value accessor and use the forms system to watch the changes but then I'm forced to wrap each multselect in a form.

^{Originally posted by edvard-mit January 4, 2024}
Hi team, with 17.3.0 version p-multiSelect neither onChange neither onSelectAllChange event fired on Select All/ Unselect All action.
Stackblitz
<p-multiSelect [options]="cities" [(ngModel)]="selectedCities" optionLabel="name" (onChange)="onChanged()" (onSelectAllChange)="onAllChanged()"></p-multiSelect>

Is it a bug or feature?

Additional oddity

In the SlackBlitz reproducer below, setting the Input property selectAll to true causes the select all checkbox to always be checked and the onSelectAllChange event fires. Setting the Input property selectAll to false causes the select all checkbox to always be unchecked and the onSelectAllChange event fires. Setting the Input property selectAll to null causes the select all checkbox to be toggled and the onSelectAllChange event does not fire.

Environment

Windows 10, Edge Version 121.0.2277.106 (Official build) (64-bit)

Reproducer

https://stackblitz.com/edit/pqrhxe-2vxseb?file=src%2Fapp%2Fdemo%2Fmulti-select-basic-demo.html

Angular version

16.2.12, 17.2

PrimeNG version

16..8.0 and later

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.16.0

Browser(s)

No response

Steps to reproduce the behavior

Bind an onChange to a multiselect. Checking select all/ unselect all does not fire onChange

Expected behavior

Select all and unselect call onChange

Galleria fullscreen with thumbnails

Discussed in https://github.com/orgs/primefaces/discussions/1158

^{Originally posted by BAZDemkivDev February 9, 2024}
Hi, I have some trouble with the Galleria component that has fullscreen property enabled with thumbnails.
Screenshot:

The thumbnails have overflow auto, visible scrolls and the photos in the thumbnails are very close to each other and have weird width.
Also, when navigating via thumbnail navigation, the items sometimes disappear, as seen on these screenshots:

I expected it to be more like the original without the fullscreen property:

When discussing this with other developers, most of them said that older versions of PrimeVue didn't have this problem, but I couldn't find a working version of the component in older versions. Right now I'm using version 3.48.1, the previous versions that I've tried are: 3.47.0, 3.46.0 and 3.45.0.
The screenshots provided are all from PrimeVue documentation: https://primevue.org/galleria/#fullscreenwiththumbnail
Looking forward to your reply!

Feature: "not-in" mode for filter function accessed by component reference [DataTable]

Discussed in https://github.com/orgs/primefaces/discussions/571

^{Originally posted by dnyaneshwar2023 November 28, 2023}
Hello folks 👋 ,

Do you guys think we should also have "not-in"/"notIn" mode for the filter function that is used from the component reference for the DataTable?

https://primereact.org/datatable/#api.DataTable.methods

I was using it in one of my projects and I was hoping this mode to have since there can be use case where I have use case to avoid some items. (That could be achieved through providing all items except that we want to avoid in "in" mode but that seems hacky when I don't have the whole list of data)

I am happy to contribute on it if it's needed.

p-columnFilter' is not a known element

optionValue of p-dropdown is not properly working

Discussed in https://github.com/orgs/primefaces/discussions/421

^{Originally posted by BrayanDevM November 8, 2023}

The issue

The optionValue of the component is not working correctly. I performed a version migration from PrimeNG 15 to 16.7.2, and immediately the dropdowns that receive an object but have their value and label specified stopped working. They are displayed correctly, but when selecting an option, the dropdown remains empty, and in the HTML, the value "empty" appears.

Code

form = this.fb.nonNullable.group({
  identificationTypeId: [1, [Validators.required]],
  identification: ['', [Validators.required, Validators.pattern(/^[0-9]*$/)]]
});

identificationTypeList = [
  { id: 1, shortName: 'CC', description: 'Cedula de ciudadania' },
  { id: 2, shortName: 'CE', description: 'Cedula de extranjeria' }
];

<p-dropdown
  optionValue="id"
  optionLabel="description"
  formControlName="identificationTypeId"
  [options]="identificationList"
></p-dropdown>

This is a testcase showing the problem:

https://stackblitz.com/edit/rxgqkz?file=src%2Fapp%2Fdemo%2Fdropdown-basic-demo.ts

PanelMenu Component: Add header/icon template

As far as I know, and after looking for a solution, it seems there's no template available for the header of the PanelMenu.

My goal is to use a custom icon, as describe here https://primeng.org/customicons#svg
But this doesn't seem possible with the PanelMenu component.

The only template available is submenuicon, but it affects the arrow, not the icon.

The issue #13789 pointed out that there's an item template available for all menu item and has been closed, but for PanelMenu it affects only the submenu, not the first level menu.

Is there something I missed? If I didn't, would it be possible to add this feature? Thanks.

Freya PrimeVue does not compile SCSS

Discussed in https://github.com/orgs/primefaces/discussions/1150

^{Originally posted by petrbouda February 8, 2024}
Hi,

I bought Freya PrimeVue today and did

npm install
npm run dev

And it look like scss files are not compiled.

npm run build says
/layout/styles/theme/theme-light/teal/theme.css doesn't exist at build time, it will remain unchanged to be resolved at runtime
transforming (370) node_modules/@fullcalendar/interaction/index.js^C

and generates to dist:

`
── index.html
└── layout
├── images
│   ├── [email protected]
│   └── avatar-m-1.jpg
└── styles
├── preloading
│   ├── preloading.css
│   └── preloading.scss
└── theme
├── extensions
│   └── _fullcalendar.scss
├── theme-base
│   ├── _colors.scss
│   ├── _common.scss
│   ├── components
│   │   ├── button
│   │   │   ├── _button.scss
│   │   │   ├── _speeddial.scss
│   │   │   └── _splitbutton.scss
│   │   ├── data
│   │   │   ├── _carousel.scss
│   │   │   ├── _datatable.scss
│   │   │   ├── _dataview.scss
│   │   │   ├── _filter.scss
│   │   │   ├── _orderlist.scss
│   │   │   ├── _organizationchart.scss
│   │   │   ├── _paginator.scss
│   │   │   ├── _picklist.scss
│   │   │   ├── _timeline.scss
│   │   │   ├── _tree.scss
│   │   │   └── _treetable.scss
│   │   ├── file
│   │   │   └── _fileupload.scss
│   │   ├── input
│   │   │   ├── _autocomplete.scss
│   │   │   ├── _calendar.scss
│   │   │   ├── _cascadeselect.scss
│   │   │   ├── _checkbox.scss
│   │   │   ├── _chips.scss
│   │   │   ├── _colorpicker.scss
│   │   │   ├── _dropdown.scss
│   │   │   ├── _editor.scss
│   │   │   ├── _inputgroup.scss
│   │   │   ├── _inputnumber.scss
│   │   │   ├── _inputswitch.scss
│   │   │   ├── _inputtext.scss
│   │   │   ├── _listbox.scss
│   │   │   ├── _multiselect.scss
│   │   │   ├── _password.scss
│   │   │   ├── _radiobutton.scss
│   │   │   ├── _rating.scss
│   │   │   ├── _selectbutton.scss
│   │   │   ├── _slider.scss
│   │   │   ├── _togglebutton.scss
│   │   │   └── _treeselect.scss
│   │   ├── menu
│   │   │   ├── _breadcrumb.scss
│   │   │   ├── _contextmenu.scss
│   │   │   ├── _dock.scss
│   │   │   ├── _megamenu.scss
│   │   │   ├── _menubar.scss
│   │   │   ├── _menu.scss
│   │   │   ├── _panelmenu.scss
│   │   │   ├── _steps.scss
│   │   │   ├── _tabmenu.scss
│   │   │   └── _tieredmenu.scss
│   │   ├── messages
│   │   │   ├── _inlinemessage.scss
│   │   │   ├── _message.scss
│   │   │   └── _toast.scss
│   │   ├── misc
│   │   │   ├── _avatar.scss
│   │   │   ├── _badge.scss
│   │   │   ├── _blockui.scss
│   │   │   ├── _chip.scss
│   │   │   ├── _inplace.scss
│   │   │   ├── _progressbar.scss
│   │   │   ├── _progressspinner.scss
│   │   │   ├── _scrolltop.scss
│   │   │   ├── _skeleton.scss
│   │   │   ├── _tag.scss
│   │   │   └── _terminal.scss
│   │   ├── multimedia
│   │   │   ├── _galleria.scss
│   │   │   └── _image.scss
│   │   ├── overlay
│   │   │   ├── _confirmpopup.scss
│   │   │   ├── _dialog.scss
│   │   │   ├── _overlaypanel.scss
│   │   │   ├── _sidebar.scss
│   │   │   └── _tooltip.scss
│   │   └── panel
│   │   ├── _accordion.scss
│   │   ├── _card.scss
│   │   ├── _divider.scss
│   │   ├── _fieldset.scss
│   │   ├── _panel.scss
│   │   ├── _scrollpanel.scss
│   │   ├── _splitter.scss
│   │   ├── _tabview.scss
│   │   └── _toolbar.scss
│   ├── _components.scss
│   └── _mixins.scss
├── theme-dark
│   ├── avocado
│   │   └── theme.scss
│   ├── blue
│   │   └── theme.scss
│   ├── _extensions.scss
│   ├── green
│   │   └── theme.scss
│   ├── indigo
│   │   └── theme.scss
│   ├── orange
│   │   └── theme.scss
│   ├── purple
│   │   └── theme.scss
│   ├── red
│   │   └── theme.scss
│   ├── teal
│   │   └── theme.scss
│   ├── turquoise
│   │   └── theme.scss
│   ├── _variables.scss
│   └── yellow
│   └── theme.scss
└── theme-light
├── avocado
│   └── theme.scss
├── blue
│   └── theme.scss
├── _extensions.scss
├── green
│   └── theme.scss
├── indigo
│   └── theme.scss
├── orange
│   └── theme.scss
├── purple
│   └── theme.scss
├── red
│   └── theme.scss
├── teal
│   └── theme.scss
├── turquoise
│   └── theme.scss
├── _variables.scss
└── yellow
└── theme.scss