@jiangchunbo/ant-island-light

Ant Design skin inspired by JetBrains Islands Light.

Source

• Repository: https://github.com/JetBrains/intellij-community
• File: platform/platform-resources/src/themes/islands/ManyIslandsLight.theme.json
• Commit: 425f1f5aeccec985c8f7e773d228f06ed2006301

The package maps JetBrains Islands Light palette and semantic UI colors to Ant Design tokens and component styles. It does not own application shell, business page, React Flow canvas, or workflow editor styles.

Usage

import { ConfigProvider } from "antd"
import { antIslandLightConfig } from "@jiangchunbo/ant-island-light"
import "@jiangchunbo/ant-island-light/styles.css"

<ConfigProvider
  theme={antIslandLightConfig.theme}
  componentConfig={antIslandLightConfig.componentConfig}
>
  {children}
</ConfigProvider>

Utility Classes

Use these classes for small app components that should look like JetBrains Islands Light while still using Ant Design primitives.

<div className="jcb-ant-island-light-list">
  <Card className="jcb-ant-island-light-item-card">
    <div className="jcb-ant-island-light-item-card__row">
      <Avatar className="jcb-ant-island-light-item-card__avatar" />
      <div className="jcb-ant-island-light-item-card__content">
        <div className="jcb-ant-island-light-item-card__head">...</div>
        <div className="jcb-ant-island-light-item-card__title">...</div>
        <div className="jcb-ant-island-light-item-card__summary">...</div>
        <div className="jcb-ant-island-light-item-card__tags">...</div>
      </div>
      <div className="jcb-ant-island-light-item-card__actions">...</div>
    </div>
  </Card>
</div>