antd-distinct-system-css

v1.0.2

Published

14 days ago

A modern, override-friendly CSS design system for Ant Design v6.

0High
0Medium
0Low

iamesk

ant-design antd antd-v6 css css-variables design-system react theme

Ant Distinct System CSS

A modern, restrained design-system layer for Ant Design v6. It keeps AntD's components, APIs, behavior, accessibility, and RTL support while replacing the default visual language with a mineral-teal and warm-graphite theme.

Compatibility

Ant Design >=6.5.0 <7
React 18 or newer
AntD zeroRuntime mode
Modern browsers with CSS custom properties and color-mix() support

The current release is verified against Ant Design 6.5.1.

Install from npm

npm install [email protected] [email protected]

Import AntD's static CSS first and this package second:

import React from "react";
import ReactDOM from "react-dom/client";
import { App as AntdApp, ConfigProvider } from "antd";

import "antd/dist/antd.css";
import "antd-distinct-system-css/index.css";

import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ConfigProvider theme={{ zeroRuntime: true }}>
      <AntdApp>
        <App />
      </AntdApp>
    </ConfigProvider>
  </React.StrictMode>,
);

Apply the theme classes to body so AntD portals such as Modal, Dropdown, Select, DatePicker, and Tooltip remain in scope:

<body class="ads-theme ads-v1">
  <div id="root"></div>
</body>

Use from a CDN

Load the matching AntD static CSS before this package:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/antd.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/index.css"
/>

Keep theme={{ zeroRuntime: true }} on your React ConfigProvider. When using the CDN links, do not also import the same two CSS files from JavaScript.

Always pin both packages to exact versions. Do not use @latest in production.

Theme modes

Light mode is the default:

<body class="ads-theme ads-v1">

Force dark mode:

<body class="ads-theme ads-v1 ads-dark">

Follow the operating-system preference:

<body class="ads-theme ads-v1 ads-auto">

Consumer overrides

Only variables beginning with --ads- are public API. Define overrides after the package import:

.brand-acme {
  --ads-font-sans: "IBM Plex Sans", ui-sans-serif, sans-serif;
  --ads-accent: #8a5a16;
  --ads-accent-hover: #754b12;
  --ads-accent-active: #633f0f;
  --ads-accent-soft: #fbf2df;
  --ads-radius-md: 0.375rem;
}

<body class="ads-theme ads-v1 brand-acme">

Do not consume or override --ant-* variables. Those are integration details owned by Ant Design and may change between AntD releases.

AntD components keep their native keyboard focus behavior. For custom interactive elements outside AntD, opt into the matching focus ring:

<button data-ads-focus-ring>Custom action</button>

AntD components also retain AntD 6.5's native motion behavior. The public --ads-motion-* and --ads-ease-* variables are for custom application UI; changing them does not alter Modal, Drawer, popup, feedback, or collapse animations.

Scoped usage

The theme may be placed on an inner application root instead of body:

<div id="app" class="ads-theme ads-v1"></div>

When scoped this way, configure ConfigProvider.getPopupContainer so portaled content is rendered inside that root. Global body scope is simpler and is the recommended setup.

Versioning

Patch and minor releases preserve the documented --ads-* contract. Removing or renaming a public variable requires a new major version. CDN consumers should use immutable URLs such as:

https://cdn.jsdelivr.net/npm/[email protected]/index.css

License

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme