` 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 !important; -moz-osx-font-smoothing: auto !important; /* 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 !important; }