Package Imports - Seventh UI CSS

Package Name

Use @seventh-ui/css as the public package name. The scoped name keeps the CSS library tied to the Seventh UI family and leaves room for future sibling packages.

@seventh-ui/css

Install From Seventh ProGet

The package is distributed through the corporate ProGet npm feed at https://proget.seventh.com.br:8553/npm/seventh-npm/. Configure the package scope once, then install from the normal npm workflow.

npm config set @seventh-ui:registry https://proget.seventh.com.br:8553/npm/seventh-npm/
npm install @seventh-ui/css

If the feed requires authentication, log in with your ProGet user or an API key before installing.

npm login --registry https://proget.seventh.com.br:8553/npm/seventh-npm/ --auth-type=legacy

The official TLS setup is to make Node/npm trust the corporate certificate authority used by ProGet.

npm config set cafile /path/to/seventh-corporate-ca.pem
npm install @seventh-ui/css

For one-off commands or CI jobs, the same trust can be provided through the Node environment.

NODE_EXTRA_CA_CERTS=/path/to/seventh-corporate-ca.pem npm install @seventh-ui/css

If npm reports UNABLE_TO_VERIFY_LEAF_SIGNATURE and no .pem file is available, request the corporate CA bundle from the infrastructure team and ask the ProGet owners to publish the complete TLS certificate chain on the server. Fixing the server chain is the preferred long-term solution.

As a temporary local unblock only, run the install command with TLS verification disabled for that single process. Do not commit this setting, do not save it in a project .npmrc, and do not make it a global developer-machine default.

npm_config_strict_ssl=false npm install @seventh-ui/css

Runtime Packages

This package does not ship JavaScript behavior. Runtime and framework packages should install beside it, consume the CSS contract, and add behavior without duplicating component styles.

npm install @seventh-ui/css

# Install the selected runtime or framework package according to its own docs.

See JavaScript Derivatives for the implementation contract.

Browser Bundle Order

Legacy and static applications must expose npm artifacts from a public directory and load them in the contract order. The contract is exported as @seventh-ui/css/contracts/runtime-integration.json.

<link rel="stylesheet" href="<public path to @seventh-ui/css/dist/seventh-ui.css>">

<!-- Render normal Seventh UI markup here. -->

<script defer src="<public path to the selected runtime bundle>"></script>

Runtime bundles must not embed the CSS by default. The CSS package owns visual classes and assets; JavaScript packages own behavior.

Full Import

Use the full entrypoint for prototypes, documentation, and internal tools where convenience is more important than the smallest browser payload.

import "@seventh-ui/css";

Granular CSS

Use core tokens plus only the layout or components needed by the application view.

import "@seventh-ui/css/core.css";
import "@seventh-ui/css/layout.css";
import "@seventh-ui/css/components/button.css";
import "@seventh-ui/css/components/input.css";

Icon Imports

Use the full icon catalog only for prototypes and documentation. Prefer category entrypoints for icon-heavy screens, or individual icon entrypoints for production screens that need a small subset.

import "@seventh-ui/css/icons/user.css";
import "@seventh-ui/css/icons/access.css";

import "@seventh-ui/css/icons/base.css";
import "@seventh-ui/css/icons/individual/file-system-asterisk-failed.css";

Individual icon CSS does not import the base helper. Import @seventh-ui/css/icons/base.css once, then import each icon used by the view.

Colored icons are separate from the monochrome mask contract. Prefer raw SVG paths; use colored CSS helpers only when a static or legacy screen benefits from class-based background images.

import ptBrFlag from "@seventh-ui/css/icons-colored/svg/languages/languages-pt-br-square.svg";
import seventhLogo from "@seventh-ui/css/icons-colored/svg/brand/brand-seventh-logo.svg";

import "@seventh-ui/css/icons-colored/base.css";
import "@seventh-ui/css/icons-colored/brand.css";
import "@seventh-ui/css/icons-colored/languages.css";

Raw Assets

Bundler-managed icons and illustrations can use raw SVG paths. Colored icons preserve their internal palette; colored illustrations remain opt-in and are not referenced by the default CSS.

import userOutline from "@seventh-ui/css/icons/svg/user/user-outline.svg";
import ptBrFlag from "@seventh-ui/css/icons-colored/svg/languages/languages-pt-br-square.svg";
import seventhLogo from "@seventh-ui/css/icons-colored/svg/brand/brand-seventh-logo.svg";
import warningTriangle from "@seventh-ui/css/illustrations/svg/warning-triangle-outline.svg";

Install Size vs Browser Delivery

Installing @seventh-ui/css may place all CSS and SVG assets in node_modules. Browser delivery is controlled by the imports chosen by the application build.

import "@seventh-ui/css/core.css";
import "@seventh-ui/css/components/button.css";