Ivy Design System

Color tokens for Ivy-Framework with light and dark theme support.

Installation

npm

npm install ivy-design-system

.NET

dotnet add package Ivy.DesignSystem

Usage

CSS

@import "ivy-design-system/css/ivy-framework";
@import "ivy-design-system/css/light";

.button {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
}

Tailwind

import ivyTokens from "ivy-design-system/tailwind/ivy-framework";

export default {
  ...ivyTokens,
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
};

TypeScript

import { tokens } from "ivy-design-system";

const primary = tokens["color-primary"];

C#

using Ivy.Themes;

var primary = IvyFrameworkTokens.Color.Primary;
var background = LightThemeTokens.Color.Background;

Tokens

• Semantic: primary, secondary, destructive, success, warning, info
• UI: background, foreground, border, input, ring, muted, accent, card, popover
• All tokens include foreground variants
• Light and dark theme support

Tokens are defined in figma-tokens/$tokens.json and exported to CSS, Tailwind, TypeScript, and C#.

Development

npm install
npm run build

Links

• GitHub
• npm
• NuGet

MIT © Ivy Interactive