How to use <custom-style> in Vaadin 14?

Hi There

I am updating from Vaadin 13 and want to migrate to the new frontend mode (Polymer 3, not compatibility mode).
I was using a @HtmlImport that registers a block to globally customize some styles. This annotation is now ignored by Vaadin 14.
The content of my .html file looks like the following:

<custom-style>
    <style>
        /* https://www.paulirish.com/2012/box-sizing-border-box-ftw */
        html {
            box-sizing: border-box;
        }
        *, *:before, *:after {
            box-sizing: inherit;
        }

        html {
            --lumo-primary-color: rgb(255, 165, 0) /* = orange */;
            --lumo-body-text-color2: var(--lumo-primary-color);
            --lumo-contrast-10pct: white;
            --lumo-error-color-10pct: white;
            --lumo-header-text-color: var(--lumo-primary-color);
        }
    </style>
</custom-style>

How do I correctly migrate this to a @JsImport or @CssImport?

Hi, good question. Because in the [Migration guide]
(https://vaadin.com/docs/v14/flow/v14-migration/v14-migration-guide.html#styles) they only mention it’s better with @CssImport but don’t show how it’s done.

  1. remove the html brackets and save it as actual .css file.
/* https://www.paulirish.com/2012/box-sizing-border-box-ftw */
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}

html {
	--lumo-primary-color: rgb(255, 165, 0) /* = orange */;
	--lumo-body-text-color2: var(--lumo-primary-color);
	--lumo-contrast-10pct: white;
	--lumo-error-color-10pct: white;
	--lumo-header-text-color: var(--lumo-primary-color);
}
  1. Use @CssImport to import it, do not use the theme-for attribute on that annotation (it is for dom-modules). For info where to store the files and how to reference them ,see the [Resource Cheat Sheet]
    (https://vaadin.com/docs/v14/flow/importing-dependencies/tutorial-ways-of-importing.html#resource-cheat-sheet)

very well! thanks!