Create a focus halo from an inner and outer ring color.

Disable animations and transitions when either children of .reduced-motion or the user has specified that they prefer reduced motion on their OS.

Screen reader only - ensure that the element is only visible to screen readers.

A box shadow focus indicator that is offset from the focused element.

A box shadow focus indicator that is directly attached to the focused element. Should only be used when the focused element conveys focus through some additional mechanism, such as the <input>'s caret.

The default focus shadow has a 2px outer ring and an inner ring that matches the body's background color by default, giving the illusion of transparency.

A collapsed focus shadow that is meant to be used when the focused element conveys focus through some other mechanism, such as an <input>'s caret.

Create a new color family map that references an existing family map.

The primary color family is used in UI elements that use a default color.

The grade that defines the "midpoint" of the primary family. For instance, setting this to 60 will cause the primary token to reference primary-60.

The base color family is used for background color gradients and text colors.

The grade that defines the "midpoint" of the base family. For instance, setting this to 60 will cause the base token to reference base-60.

The color family that will be used for disabled controls.

The grade that defines the "midpoint" of the disabled family. For instance, setting this to 60 will cause the disabled token to reference disabled-60.

The color family that will be used to convey errors/failing.

The grade that defines the "midpoint" of the error family. For instance, setting this to 60 will cause the error token to reference error-60.

The color family that will be used to convey success/passing.

The grade that defines the "midpoint" of the success family. For instance, setting this to 60 will cause the success token to reference success-60.

The color family that will be used to convey warning/caution.

The grade that defines the "midpoint" of the warning family. For instance, setting this to 60 will cause the warning token to reference warning-60.

A list of the color families that should be used.

A list of the color families that should not be used.

The default blue family. Override by declaring a $blue map.

The default cyan family. Override by declaring a $cyan map.

The default gray family. Override by declaring a $gray map.

The default green family. Override by declaring a $green map.

The default navy family. Override by declaring a $navy map.

The default purple family. Override by declaring a $purple map.

The default red family. Override by declaring a $red map.

The default teal family. Override by declaring a $teal map.

The default yellow family. Override by declaring a $yellow map.

The main background color.

The inverse background color.

The main text color.

The inverse text color.

A subdued or "muted" text color, used for less emphasized text.

The background color.

The text color.

The color used for the :focus state.

The background color used for the :focus state in focusable lists, such as listboxes and menus.

The color of the inner ring for the focus halo. Used to visually offset the default focus halo from the focused element.

The color of the outer ring for the focus halo.

Color tokens as CSS custom properties.

The expected browser font size, which determines the value of 1rem. This is 16 in all browsers by default and shouldn't be changed under most scenarios.

Indicates whether duplicate declarations should be allowed. If true, including a style mixin will result in duplicate CSS. If false, including a style mixin multiple times will only create a declaration the first time.

Enable the dark scheme. This will only make it possible for the dark scheme to be applied by either the user's OS setting or by manually applying a class to the :root element.

Enable helper declarations. Only has an effect when using the full stylesheet. Helper declarations can always be used imperatively via @include.

The default map of utilities for reference. All utilities are disabled by default.

A map of utility declarations that should be included in the full stylesheet. Only has an effect when using the full stylesheet. See $-default-utilities for a list of the possible utilities. Utility declarations can always be used imperatively via @include.

Enable link styling for the specified selector context. Setting this to null will result in link styling being applied to all links. The default (main) means the link styling is applied to the main :link selector.

Enable the :visited pseudo class styling.

Indicates whether the :focus-visible polyfill is being used. When true, focus selectors will use the focus-visible polyfill classes.

The minimum dots per inch (dpi) of a high-resolution screen

The minimum dots per pixel unit (dppx) for a high-resolution screen

The minimum width for an extra small screen: a handset.

The minimum width for a small screen: a large handset or small tablet.

The minimum width for a medium screen: a large tablet or small laptop.

The minimum width for a large screen: a desktop.

The minimum width for an extra large screen: a high-definition device.

A media query helper for high definition screens.

A media query helper for device sizes. @content will apply to the given size and up.

Elevation tokens as CSS custom properties.

Accessibility helper classes.

All foundational design tokens set as CSS custom properties on the :root.

All foundational design tokens as CSS custom properties. Use when you need access to all CSS custom properties outside of the :root context.

Declarations for every component.

Helper declarations that set a composed style uncoupled from any component.

Utility declarations that set one property per class.

The complete design system set in a single global stylesheet.

The global HTML reset. Forked from the Bootstrap reboot to use the Norton Design System foundations.

The base border radius.

Miscellaneous tokens as CSS custom properties.

Apply one transition to many properties.

A multiplier used for increasing/decreasing all motion speed when motion is allowed (prefers-reduced-motion: no-preference).

A duration used for simple animations such as selection controls.

A duration used for simple entrances such as fade-ins.

A duration used for simple exits such as fade-outs.

A duration used for complex animations such as shape changes.

A duration used for detailed animations such as icon transformations.

A duration used for elements that open from a closed state, such as a sidebar.

A duration used for elements that close from an opened state, such as a sidebar.

A duration used when an element expands (grows).

A duration used when an element collapses (shrinks).

A duration used for elements with a small transition areas, such as icons and selection controls.

A duration used for expanding elements with larger transition areas, such as bottom sheets and expanding chips.

A duration used for collapsing elements with larger transition areas, such as bottom sheets and expanding chips.

A duration used for expanding elements that traverse a large portion of the screen.

A duration used for collapsing elements that traverse a large portion of the screen.

Standard easing puts subtle attention at the end of an animation, by giving more time to deceleration than acceleration. It is the most common form of easing.

Elements that begin and end at rest use standard easing. They speed up quickly and slow down gradually, in order to emphasize the end of the transition.

Incoming elements are animated using deceleration easing, which starts a transition at peak velocity (the fastest point of an element’s movement) and ends at rest.

Elements exiting a screen use acceleration easing, where they start at rest and end at peak velocity.

Timing function to quickly accelerate and decelerate

Motion tokens as CSS custom properties.

Convert a px value to a rem spacer.

Convert a rem value to a px spacer.

Use a px value as a px spacer.

Use a rem value as a rem spacer.

Padding helper Ensures that padding fits the design system box model.

Get a spacer from a role or a value.

Spacing tokens as CSS custom properties.

Set a sans-serif font with the system stack fallback.

Set a serif font with the system stack fallback.

Set a monospace font with the system stack fallback.

Get a font size using rem spacers.

Apply font smoothing.

Create a composed set of typography design tokens. Explicitly specifying a value of null values will result in the property not being set.

The "base" body typeset uses all -base tokens.

A typeset suitable for extra small body text.

A typeset suitable for small body text.

A typeset suitable for medium body text.

A typeset suitable for large body text.

The "base" UI typeset uses the ui line height and -base tokens for everything else.

A typeset suitable for extra small UI text.

A typeset suitable for small UI text.

A typeset suitable for medium UI text.

A typeset suitable for large UI text.

A typeset intended for text that is meant to convey hierarchy (i.e., a heading).

A typeset suitable for text that is meant to convey the top level of content hierarchy, such as an h1.

A typeset suitable for text that is meant to convey the second level of content hierarchy, such as an h2.

A typeset suitable for text that is meant to convey the third level of content hierarchy, such as an h3.

A typeset suitable for text that is meant to convey the fourth level of content hierarchy, such as an h4.

A typeset suitable for text that is meant to convey the fifth level of content hierarchy, such as an h5.

A typeset suitable for text that is meant to convey the sixth (and lowest) level of content hierarchy, such as an h6.

Typography tokens as CSS custom properties.

The main sans serif font family. Overrides will have $font-family-system-sans appended as a fallback.

The main serif font family. Overrides will have $font-family-system-serif appended as a fallback.

The main monospace font family. Overrides will have $font-family-system-mono appended as a fallback.

The main font family that will be used throughout your application.

The font family that will be used for all headings.

A triangle arrow that connects with a Popper.js element

Flatten a nested map.

Recursively merge a list of maps. Similar to map.merge but takes many maps and merges any sub-maps recursively.

Get the key that corresponds to a value in a map.

Set a list of properties as CSS custom properties.

Utility declarations for color families.

Utility declarations for spacing tokens.