@utrecht/web-component-library-stencil
Version:
Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture
171 lines (170 loc) • 7.04 kB
CSS
/**
* @license EUPL-1.2
* Copyright (c) 2020-2024 Frameless B.V.
* Copyright (c) 2021-2024 Gemeente Utrecht
*/
/**
* @license EUPL-1.2
* Copyright (c) 2020-2024 Frameless B.V.
* Copyright (c) 2021-2024 Gemeente Utrecht
*/
/**
* @license EUPL-1.2
* Copyright (c) 2020-2024 Frameless B.V.
* Copyright (c) 2021-2024 Gemeente Utrecht
*/
/* stylelint-disable-next-line block-no-empty */
/* Override the browser focus ring with our own focus ring.
* Use `:where()` so the CSS selector specificity is `0,0,0`.
*/
/* Override the browser focus ring with our own focus ring.
* Use `:where()` so the CSS selector specificity is `0,0,0`.
*/
/**
* Only use this on Root components with an explicit height, that is not calculated based on its children.
*/
/**
* Use this mixin for `<html class="utrecht-root">`.
*/
/**
* Use this mixin for `<body class="utrecht-root">`.
*/
/**
* The focus indicator should be applied to all elements that have the `:focus-visible` state.
*/
/**
* Avoid setting `font-size` on `:root` if you want to keep `1rem` at `16px` for most users.
* Set `line-height` on the same element as `font-size`, to support font-relative line heights,
* even though they are discouraged.
*/
/**
* Ensure enough contrast with `var(--utrecht-root-color)`, by overriding the
* browser black default background color of full screen elements.
*
* You can test this by opening any element inside the Root component with the
* following JavaScript, for example the Heading 1:
*
* document.querySelector('h1').requestFullscreen()
*
* In dark mode there might be enough contrast, but dark text on a black background
* would become unreadable in full screen.
*
* Use `:where()` so this background color can be overriden by a CSS selector
* with a higher specificity than (0,0,1).
*/
:host {
/*
* Goals:
*
* - take up 100% of the space, both horizontally and vertically.
* - create a scrollable viewport experience both on `<html>` in the root,
* as well as on a `<div>` somewhere in a document.
* - override commonly applied `font-smoothing` CSS that reduces text contrast.
* - the root must be a "positioned ancestor", so elements that are positioned
* outside the normal document flow (`absolute`, `fixed` and `sticky`)
* are positioned relative to the root component.
* - ensure text content fits at 400% zoom by enabling hypenation.
* - do not influence the `rem` unit by avoiding `font-size` on the root element.
* - reset `body` element styles for `margin`
* - reset `dialog` element styles for `border`, `margin` and `padding`
*/
/* Prevent a less accessible page with lower text contrast, because other CSS is downgrading from `subpixel-antialiased` to `antialiased`.
* Reset `font-smoothing: antialiasing` to `auto`, and prefer automatic (`subpixel-antialiasing`) behavior for high-dpi screens. */
-webkit-font-smoothing: auto ;
-moz-osx-font-smoothing: auto ;
/* For some new properties, temporarily provide the `utrecht.body.*` design tokens as fallback for backwards compatibility. */
/**
* When the Root component is positioned above another content,
* the text must remain legible. Avoid a transparent background,
* causing underlying content to interfere with contents of Root.
*
* When no `background-color` design token is specified, fallback
* to the system `Canvas` color.
*/
background-color: var(--utrecht-root-background-color, Canvas);
/* Avoid `border` on a `dialog` element. */
border-width: 0;
/*
* Avoid overflowing scroll container because of a `border` or `padding`,
* by configuring `box-sizing: border-box`.
*/
box-sizing: border-box;
/**
* Prevent there is insufficient color contrast for text, when no design tokens
* for `color` and `background-color` are specified. In that case use
* the system default colors `Canvas` and `CanvasText`.
*/
color: var(--utrecht-root-color, CanvasText);
font-family: var(--utrecht-root-font-family);
font-size-adjust: var(--utrecht-root-font-size-adjust, 0.5);
font-weight: var(--utrecht-root-font-weight, var(--utrecht-body-font-weight));
/* Avoid changing the meaning of text by adding word-breaks without hyphenation,
* in languages where this is appropriate. Browsers will hyphenate based on the language of the text
* as specified in the `lang` HTML-attribute.
*/
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
inline-size: 100%;
/* Avoid `margin` on the `body` and `dialog` element. */
/* stylelint-disable-next-line property-disallowed-list */
margin: 0;
min-block-size: 100%;
overflow-wrap: break-word;
/* Avoid `padding` on the `dialog` element. */
/* stylelint-disable-next-line property-disallowed-list */
padding: 0;
/* Position fixed and sticky elements relative to the Root component,
* such as the Skip Link or a Sticky Navigation Bar.
*
* While the `html` element supports this out-of-the-box,
* adding `position: relative` adds support for elements such as `div` and `dialog`.
*/
position: relative;
/* Prefer legibility over rendering speed, for all font-sizes.
*
* When user tests and metrics indicate slow performance, we should reconsider this choice.
*
* For specific parts of the page that require high performance, this setting should
* be disabled locally using `text-rendering: auto`.
*
* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-rendering
*/
text-rendering: optimizeLegibility;
/* Ensure the font-size is rendered predictably on mobile screens,
* by disabling the `text-size-adjust` text inflation algorithm.
*
* The responsibility now shifts to configuring the design tokens with
* sufficiently large font-sizes.
*
* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-size-adjust
*/
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
/* Provide a built-in name for page transitions. */
view-transition-name: root;
}
@media (prefers-reduced-motion: no-preference) {
:host {
/* Provide a better user experience for keyboard users, by enabling smooth scrolling.
* With smooth scrolling it is easier to track where the next focusable item is in relation
* to the previous position.
*
* Avoid this extra motion for users with specific motion preferences, by only enabling this feature
* when no preference is specified.
*
* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-behavior
*/
scroll-behavior: smooth;
}
}
:host {
/* For some new properties, temporarily provide the `utrecht.body.*` design tokens as fallback for backwards compatibility. */
font-size: var(--utrecht-root-font-size, var(--utrecht-body-font-size));
line-height: var(--utrecht-root-line-height, var(--utrecht-body-line-height));
}
:host([hidden]) {
display: none ;
}