vaadin / vaadin-lumo-styles Goto Github PK

Currently if I run gulp icons (in master branch) the generated font-icons.html seems to have some differences to the committed one, and after that when looking at the demos locally, the spacing of the font icons seems to be broken.

This is how the font icon demos look like after running gulp icons:

This is how they looked before:

presets/compact.js is not included in npm release since it isn't included by the files property of package.json.

Currently, the dark palette is always loaded for all apps even if it is not used.

We should refactor the dark palette into a similar preset as the new compact preset. That would fix #50.

But, it will also remove the feature of using the theme="dark" attribute on the HTML element (or any other element), so it’s a breaking change. Therefore it seems like it should be postponed until Lumo 2.0.

Hi,
I have opened an issue here some days ago.

Maybe here the location is better so I can get your help..

I have decide to clone the repo for the dialog-example and edit it to test the styling.

I'd like to use the dialog with the Theme dark for the application and the Theme Light for the header of the dialog.

The dafault Dialog has LIGHT there for the application and DARK theme for the Dialog header, and it works perfeclty. I'd like to do the opposite, my application has DARK theme and Dialog header LIGHT, but the result obtained is a full DARK application and full DARK dialog... Here is my code, I have just added to the MainView the annotation @Theme(value = Lumo.class, variant = Lumo.DARK) and to the dialog styling header.getElement().getThemeList().add(Lumo.LIGHT);.

I'am missing something? Thanks in advance..

package com.example;

import com.example.components.dialogs.MyDialog;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.theme.Theme;
import com.vaadin.flow.theme.lumo.Lumo;

@Route
@CssImport(value = "./styles/dialog-overlay.css", themeFor = "vaadin-dialog-overlay")

@Theme(value = Lumo.class, variant = Lumo.DARK)

public class MainView extends VerticalLayout {

    MyDialog myDialog;

    /**
     * Construct a new Vaadin view.
     * <p>
     * Build the initial UI state for the user accessing the application.
     */
    public MainView() {

        // Button click listeners can be defined as lambda expressions
        Button button = new Button("Open demo dialog", event -> openTheDialog());
        button.addThemeVariants(ButtonVariant.LUMO_PRIMARY);

        add(button);
    }

    private void openTheDialog() {
        if (myDialog != null) {
            myDialog.close();
        }
        myDialog = new MyDialog();
        myDialog.open();
    }

}

package com.example.components.dialogs;

import java.util.ArrayList;
import java.util.List;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.dialog.Dialog;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Footer;
import com.vaadin.flow.component.html.H2;
import com.vaadin.flow.component.html.Header;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.textfield.TextArea;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.theme.lumo.Lumo;

@CssImport("./styles/modless-dialog.css")
public class MyDialog extends Dialog {

	public String DOCK = "dock";
	public String FULLSCREEN = "fullscreen";

	private boolean isDocked = false;
	private boolean isFullScreen = false;

	private Header header;
	private Button min;
	private Button max;

	private Div content;
	private Footer footer;

	public MyDialog() {
		setDraggable(true);
		setModal(false);
		setResizable(true);

		// Dialog theming
		getElement().getThemeList().add("modless-dialog");
		setWidth("600px");

		// Accessibility
		getElement().setAttribute("aria-labelledby", "dialog-title");

		// Header
		H2 title = new H2("New message");
		title.addClassName("dialog-title");

		min = new Button(VaadinIcon.DOWNLOAD_ALT.create());
		min.addClickListener(event -> minimise());

		max = new Button(VaadinIcon.EXPAND_SQUARE.create());
		max.addClickListener(event -> maximise());

		Button close = new Button(VaadinIcon.CLOSE_SMALL.create());
		close.addClickListener(event -> close());

		header = new Header(title, min, max, close);
		header.getElement().getThemeList().add(Lumo.LIGHT);
		add(header);

		// Content
		TextField recipients = new TextField("Recipients");

		List<Person> aa = new ArrayList<Person>();
		aa.add(new Person("Pino"));
		aa.add(new Person("aaa"));
		aa.add(new Person("vds"));
		aa.add(new Person("Pibvfbfdbno"));
		aa.add(new Person("sdgdss"));
		aa.add(new Person("bsfd"));
		aa.add(new Person("bsdbsbsdb"));
		
		Grid<Person> grid = new Grid<Person>();
		grid.addColumn(Person::getName).setAutoWidth(true);
		
		grid.setItems(aa);
		
		content = new Div(recipients, grid);
		content.addClassName("dialog-content");
		add(content);

		// Footer
		Button send = new Button("Send");
		send.addThemeVariants(ButtonVariant.LUMO_PRIMARY);

		Button attachFiles = new Button(VaadinIcon.PAPERCLIP.create());
		Button discardDraft = new Button(VaadinIcon.TRASH.create());

		footer = new Footer(send, attachFiles, discardDraft);
		add(footer);

		// Button theming
		for (Button button : new Button[] {min, max, close, attachFiles, discardDraft}) {
			button.addThemeVariants(ButtonVariant.LUMO_CONTRAST, ButtonVariant.LUMO_TERTIARY);
		}
	}

	private void minimise() {
		if (isDocked) {
			initialSize();
		} else {
			if (isFullScreen) {
				initialSize();
			}
			min.setIcon(VaadinIcon.UPLOAD_ALT.create());
			getElement().getThemeList().add(DOCK);
			setWidth("320px");
		}
		isDocked = !isDocked;
		isFullScreen = false;
		content.setVisible(!isDocked);
		footer.setVisible(!isDocked);
	}

	private void initialSize() {
		min.setIcon(VaadinIcon.DOWNLOAD_ALT.create());
		getElement().getThemeList().remove(DOCK);
		max.setIcon(VaadinIcon.EXPAND_SQUARE.create());
		getElement().getThemeList().remove(FULLSCREEN);
		setHeight("auto");
		setWidth("600px");
	}

	private void maximise() {
		if (isFullScreen) {
			initialSize();
		} else {
			if (isDocked) {
				initialSize();
			}
			max.setIcon(VaadinIcon.COMPRESS_SQUARE.create());
			getElement().getThemeList().add(FULLSCREEN);
			setSizeFull();
			content.setVisible(true);
			footer.setVisible(true);
		}
		isFullScreen = !isFullScreen;
		isDocked = false;
	}
}

https://github.com/vaadin/vaadin-lumo-styles/blob/master/package.json#L5

"main": "lumo.html",

There's no lumo.html

The current success color does not pass the contrast test. We indicate that in the docs, but it’s still poor service and bad service for users.

Try convert master with magi then run yarn install and it fails due to a new dependency of @vaadin/elements-demo-resources which actually does not exist

https://github.com/vaadin/vaadin-lumo-styles/blob/master/demo/index.html#L48 <--

Let's say you are using Polymer Starter Kit and when building a bundled version of your project, it will not bundle the imports in index.html. Now you could add these as extra dependencies in polymer.json, but then you'll be importing Polymer from two sources and bundled app will break.

I'd solve this issue by creating a style module (where lumo is imported) and use it in all of my elements but not sure which is the best solution.

Similar to other properties in the styles (shadows for example), we should have a scale of border radiuses to choose from.

Introduce the following custom properties:

• --lumo-border-radius-s
• --lumo-border-radius-m
• --lumo-border-radius-l

Consider deprecating the current --lumo-border-radius property in favor or --lumo-border-radius-m, to align with the other size properties in the theme.

There should be an easy and clean way to import Lumo styles into LitElement based components and views.

There may be different ways of achieving this. One idea would be to make the Lumo JS files (in P3/npm version) explicitly export CSSResult objects (adding a dependency to lit-element) like:

export default css`
  ...
`;

Another alternative might be to provide the CSS sources as *.css files which could be additionally included in npm and used in a variety of ways (e.g. webpack loader configuration can import CSS file directly as a CSSResult). In this case it might make sense to add a build step to generate the current HTML import files and JS modules using the CSS files as the source for avoiding CSS duplication.

It should be considered if this needs to be done in a backwards compatible way keeping the current P2 sources, or can we convert the repository to next gen and release as a new major?

This is needed for vaadin-learning-center/crm-tutorial-typescript#18

Somewhat related: #69, #81

I noticed that this page is missing the '10pct' values for shade, tint and contrast

Not sure if this is the right place to report issues related to documentation

Description:

When using the Dark variant of the Lumo Theme the shadow is rather invisible (at least on my monitor 😅) when showing content with a --lumo-box-shadow... on the default background-color, the content is visually hard to seperate from the background.

A clearly visible shadow in the Light Theme:

A seemingly invisible shadow in the Dark Theme:

In Lumo terms speaking the default contrast between --lumo-base-color and the resulting:

• --lumo-box-shadow-s
• --lumo-box-shadow-m
• --lumo-box-shadow-l
• --lumo-box-shadow-xl

is (in my opinion) too small.

The low contrast may cause "floating elements" to appear "non floating" and could be disturbing in some cases when using non-modal dialoges or any components that make use of context menus.

As a fix I suggest to make the shadows in the Dark theme even darker.

A visible shadow in the Lumo Dark Theme:

The used css:

--lumo-box-shadow-s: 0 1px 2px 0 var(--lumo-shade-80pct), 0 2px 8px -2px var(--lumo-shade);
--lumo-box-shadow-m: 0 2px 6px -1px var(--lumo-shade-80pct), 0 8px 24px -4px var(--lumo-shade);
--lumo-box-shadow-l: 0 3px 18px -2px var(--lumo-shade-80pct), 0 12px 48px -6px var(--lumo-shade);
--lumo-box-shadow-xl: 0 4px 24px -3px var(--lumo-shade-80pct), 0 18px 64px -8px var(--lumo-shade);

As valo-theme had default theme (with some styles applied) for especific components like vaadin-combo-box I can't find something similar in vaadin-lumo-styles....am I missing something? thanks!!

Currently, Lumo does not use pointer: cursor; for many of the clickable items in the UI (buttons, dropdown toggles, checkboxes/radio buttons, list items). This is a deliberate choice, that the pointer cursor is reserved for “link-like” actions. Tabs is currently an exception, as they are not actual links, though they are a similar navigational element as traditional links.

But, this is a divisive topic (see this and this article and this discussion), and we should make it easy to switch to the opposite “camp” where most clickable elements do have pointer: cursor;.

Something like a --lumo-clickable-cursor property which could be used in the component themes.

I don't know if this is a component or a lumo issue, so please move it if necessary,

I found that setting --vaadin-text-field-default-width has no effect on BigDecimalField.

(Vaadin 14.2.3, Lumo 1.5.0)

When going into the node_modules vaadin-lumo-styles directory and doing npm install, I get this error:

npm ERR! code E404 npm ERR! 404 Not Found - GET https://registry.npmjs.org/@vaadin%2felements-demo-resources - Not found npm ERR! 404 npm ERR! 404 '@vaadin/elements-demo-resources@^2.1.0' is not in the npm registry. npm ERR! 404 You should bug the author to publish it (or use the name yourself!) npm ERR! 404 It was specified as a dependency of '@vaadin/vaadin-lumo-styles' npm ERR! 404 npm ERR! 404 Note that you can also install from a npm ERR! 404 tarball, folder, http url, or git url

going in and deleting this dependency from package.json fixes the issue. What is the purpose for this dependency?

I found this file in a jar and got some trouble because of the whitespace.

The overlay doesn't fit correctly the entire window as shown on the following screenshot :

From @vlukashov on November 30, 2017 9:59

When using the Vaadin Valo theme for a <vaadin-button> in IE11, the height of the button is determined differently than in other browsers (tested Firefox, Chrome, Safari and Edge).

For example, see a comparison to Firefox:

It looks like in IE11 the --valo-size custom property gets defined when it was not supposed to.
A live demo is here: https://vlukashov.github.io/vaadin-valo-button-sizing/ (source code at https://github.com/vlukashov/vaadin-valo-button-sizing/)

Copied from original issue: vaadin/vaadin-valo-styles#38

Now when #90 is implemented, we need to also provide d.ts files to make TypeScript happy. Currently it fails:

    TS7016: Could not find a declaration file for module '@vaadin/vaadin-lumo-styles/typography.js'. '/Users/sergey/vaadin/starter-wizard/node_modules/@vaadin/vaadin-lumo-styles/typography.js' implicitly has an 'any' type.
  Try `npm install @types/vaadin__vaadin-lumo-styles` if it exists or add a new declaration (.d.ts) file containing `declare module '@vaadin/vaadin-lumo-styles/typography.js';`

See “Generic steps” at vaadin/components-team-tasks#326

leho@papaya vaadin-lumo-styles $ [git:master] npx gulp icons
fs.js:35
} = primordials;
    ^

ReferenceError: primordials is not defined
    at fs.js:35:5
    at req_ (/home/leho/Documents/web-components/vaadin-lumo-styles/node_modules/natives/index.js:143:24)
    at Object.req [as require] (/home/leho/Documents/web-components/vaadin-lumo-styles/node_modules/natives/index.js:55:10)
    at Object.<anonymous> (/home/leho/Documents/web-components/vaadin-lumo-styles/node_modules/graceful-fs/fs.js:1:37)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)

See

• https://stackoverflow.com/questions/55921442/how-to-fix-referenceerror-primordials-is-not-defined-in-node
• gulpjs/gulp#2324

Convert existing styles to be RTL friendly and add them to the end of the file with
/* RTL specific styles */ comment.

:host([dir="rtl"]) selector should be used

Can i use it without lumo theme ? if can how to remove lumo style from project ?

I use this package indirectly via @vaadin/vaadin-grid. Now imagine the usecase that an app which uses vaadin-grid needs to load a different app which uses vaadin-grid. The bundles are not shared, and so both apps will call:

customElements.define('vaadin-lumo-styles', Lumo);

One of them will throw an error. This could be easily solved in the package

customElements.get('vaadin-lumo-styles') || customElements.define('vaadin-lumo-styles', Lumo);

This is useful in some cases like when doing lazy asynchronous imports (like vaadin.com is doing).

Let's make this aligned with vaadin-icons. See: vaadin/vaadin-icons#72

In my environment I don't have a "/modules/" path so the resources below do not import properly.

I cannot figure out how to link (ie line numbers copied below) to any of the npm resources related to this repo, branch names and code don't appear to map.

@vaadin/[email protected]
node_modules/@vaadin/vaadin-lumo-styles/color.js
import '/modules/@polymer/polymer/lib/elements/custom-style.js';

@vaadin/[email protected]
node_modules/@vaadin/vaadin-grid/theme/lumo/vaadin-grid.js
import '/modules/@vaadin/vaadin-lumo-styles/color.js';
import '/modules/@vaadin/vaadin-lumo-styles/font-icons.js';
import '/modules/@vaadin/vaadin-lumo-styles/sizing.js';
import '/modules/@vaadin/vaadin-lumo-styles/spacing.js';
import '/modules/@vaadin/vaadin-lumo-styles/style.js';
import '/modules/@vaadin/vaadin-lumo-styles/typography.js';
import '/modules/@vaadin/vaadin-checkbox/theme/lumo/vaadin-checkbox.js';
import './vaadin-grid-styles.js';
import '../../src/vaadin-grid.js';

Note: components list to be added below

In review

• checkbox vaadin/vaadin-checkbox#140
• upload vaadin/vaadin-upload#300

In a majority of cases, users will want to include all the following parts of Lumo. Could we add a combined import that pulls in all of them? Document the pros/cons of using the convenience import and retain the ability to import individual parts.

<link rel="import" href="bower_components/vaadin-lumo-styles/color.html">
<link rel="import" href="bower_components/vaadin-lumo-styles/sizing.html">
<link rel="import" href="bower_components/vaadin-lumo-styles/spacing.html">
<link rel="import" href="bower_components/vaadin-lumo-styles/style.html">
<link rel="import" href="bower_components/vaadin-lumo-styles/typography.html">