@veracity/vui/dist/core/vuiProvider/globalStyle.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { isObject } from "../../utils/assertion.js";
import foundations_default from "../../theme/foundations/index.js";
import { createGlobalStyle, css } from "../styled.js";
import { bounce, fadeDown, fadeIn, fadeLeft, fadeOut, fadeRight, fadeUp, pulse, spin } from "./animations.js";
import { noScrollClass, vuiNextAllTokens } from "./consts.js";
import fontFaces_default from "./fontFaces.js";

//#region src/core/vuiProvider/globalStyle.tsx
/**
* Provides global styles, such as:
* - font face definitions
* - font base styles (color, size, family)
* - animation keyframes
* - CSS variables for each theme value
*/
var globalStyle_default = createGlobalStyle`
${fontFaces_default}
:root {
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  ${generateCSSVariables}
  ${vuiNextAllTokens}
  --vui-colors-focusColor: var(--vui-utility-focus);
  --vui-colors-focus: var(--vui-utility-focus);
}

* {
  --x-ring-color: var(--vui-colors-focus);
  // Fixes a box-shadow issue between some parent and child components
  --x-shadow: 0 0 0 0 transparent;
}

button,
.vui-avatar,
.vui-tag,
.vui-sidemenu-item,
.vui-switchTrack {
  --x-ring-color: transparent;
}

button:focus-visible,
li:focus-visible,
.vui-avatar:focus-visible,
.vui-tag:focus-visible,
.vui-sidemenu-item:focus-visible,
.vui-switchTrack:focus-visible,
.vui-force-focus {
  --x-ring-color: var(--vui-colors-focus);
  outline: var(--vui-colors-focus) solid 3px;
  z-index: 1;
}

body.${noScrollClass} {
  overflow: hidden !important;
  overscroll-behavior: contain;
}

${(p) => p.globalStyle && css`
    body {
      color: sandstone.10;
      font-family: Gantari, Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
      font-size: md;
    }

    h1,
    h2,
    h3,
    h4,
    h5 {
      color: darkBlue.18;
    }
  `}

@keyframes vui-bounce {
${bounce}
}

@keyframes vui-fadeDown {
${fadeDown(20)}
}

@keyframes vui-fadeIn {
${fadeIn}
}

@keyframes vui-fadeLeft {
${fadeLeft(20)}
}

@keyframes vui-fadeLeftLong {
${fadeLeft(600)}
}

@keyframes vui-fadeOut {
${fadeOut}
}


@keyframes vui-fadeRight {
${fadeRight(20)}
}

@keyframes vui-fadeRightLong {
${fadeRight(600)}
}

@keyframes vui-fadeUp {
${fadeUp(20)}
}

@keyframes vui-pulse {
${pulse}
}

@keyframes vui-spin {
${spin}
}
`;
/** Recursively maps through all theme styles and generates a set of CSS properties. */
function generateCSSVariables() {
	function computeStyle(name, value) {
		if (!isObject(value)) return `${name}: ${typeof value === "string" ? value : `${value}px`};\n`;
		return Object.entries(value).reduce((str, [key, value]) => {
			return str += computeStyle(`${name}-${key}`, value);
		}, "");
	}
	const { animations, transformers, ...styles } = foundations_default;
	return computeStyle("--vui", styles);
}

//#endregion
export { globalStyle_default as default };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=globalStyle.js.map