feat: add new variants and update agent docs for tokens

[adithyaakrishna]

Summary

• New variants for some components
• Created a semantic-tokens.md file for agents.

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation
• Other: Updating of components.

Testing

• Go to /playground
• Check for Skeleton, FormField, Banner components

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

Screenshots/Videos

[cursor]

PR Summary

Medium Risk
Introduces new styling variants and new/changed props on shared UI components (Input, Switch, Slider, Label, Skeleton), which may require consumer updates (notably Input now reserves size). Mostly UI-only changes with limited blast radius beyond component usage.

Overview
Adds a comprehensive .claude/rules/semantic-tokens.md reference documenting EMCN semantic tokens, Tailwind extensions, component APIs, and styling guidelines.

Extends several emcn components with new variants/props and exports: Input and Textarea gain error/ghost variants (and Input adds sm/md sizing), Switch and Slider gain size variants, Label adds size variants plus a required asterisk, and Skeleton adds shape variants. Banner expands beyond default/destructive to include warning/info/success, and Combobox disallows passing the native size attribute through inputProps.

Updates the /playground page to showcase the new variants and adds sections for FormField, Banner, and Skeleton.

^{Written by Cursor Bugbot for commit 3c28b33. This will update automatically on new commits. Configure here.}

[vercel]

@adithyaakrishna is attempting to deploy a commit to the Sim Team on Vercel.

A member of the Team first needs to authorize it.

[greptile-apps]

Greptile Summary

This PR extends the EMCN component library with new variants across several components and adds a comprehensive semantic-tokens.md reference document for AI agent context.

Key changes:

• Banner: New warning, info, and success variants added via CVA. Raw Tailwind palette classes are used (acknowledged with a TODO comment pending semantic token additions to globals.css).
• Skeleton: Refactored from a plain className-based component to a full CVA implementation with line, circle, and rectangle shape variants.
• Input / Textarea: New ghost variant added (transparent background, border only on focus/hover), plus an explicit sm/md size axis for Input.
• Label: Size variants (sm/md/lg) and an optional required asterisk prop added.
• Switch / Slider: Multi-size variants (sm/md/lg) formalised via CVA and a typed constant map respectively.
• Playground page: New sections added for Skeleton, FormField, and the new Banner variants to allow visual regression testing.
• Documentation: .claude/rules/semantic-tokens.md created as a full reference for the design token system and component API surface.

Confidence Score: 5/5

Safe to merge — all remaining findings are P2 style suggestions that do not affect runtime behaviour.

The only open finding is that bannerVariants is not exported from banner.tsx or the barrel index, which is a minor style inconsistency relative to the rest of the library. It does not break any existing usage. All prior P1 concerns (raw Tailwind colours) were addressed with a TODO comment in the follow-up commit. No logic, data, or security issues were found.

apps/sim/components/emcn/components/banner/banner.tsx — bannerVariants export consistency

Important Files Changed

Filename	Overview
apps/sim/components/emcn/components/banner/banner.tsx	Adds warning, info, and success variants via CVA; raw Tailwind palette colors remain with a TODO comment; bannerVariants is not exported unlike all peer components.
apps/sim/components/emcn/components/skeleton/skeleton.tsx	Refactored from a plain className component to CVA with line, circle, and rectangle variants; uses semantic tokens; follows established emcn patterns.
apps/sim/app/playground/page.tsx	Adds playground sections for Skeleton, FormField, and Banner variants; all new usages look correct and consistent with the component APIs.
.claude/rules/semantic-tokens.md	New agent reference document capturing the full EMCN design token system, component API surface, and styling guidelines; accurate and well-structured.
apps/sim/components/emcn/components/label/label.tsx	Adds size variants (sm/md/lg) via CVA and a required asterisk prop; follows emcn patterns correctly.
apps/sim/components/emcn/components/input/input.tsx	Adds ghost variant and sm/md size variants; uses semantic tokens consistently; TSDoc updated.

Class Diagram

%%{init: {'theme': 'neutral'}}%%
classDiagram
    class Banner {
        +variant: default|destructive|warning|info|success
        +text: ReactNode
        +actionLabel: ReactNode
        +actionVariant: ButtonVariant
        +onAction(): void
        -bannerVariants: CVA
    }

    class Skeleton {
        +variant: line|circle|rectangle
        +className: string
        -skeletonVariants: CVA
    }

    class Input {
        +variant: default|error|ghost
        +size: sm|md
        -inputVariants: CVA
    }

    class Textarea {
        +variant: default|error|ghost
        -textareaVariants: CVA
    }

    class Label {
        +size: sm|md|lg
        +required: boolean
        -labelVariants: CVA
    }

    class Switch {
        +size: sm|md|lg
        -switchVariants: CVA
        -switchThumbVariants: CVA
    }

    class Slider {
        +size: sm|md|lg
        -SLIDER_SIZES: const
    }

Loading

_{Reviews (2): Last reviewed commit: "chore: fix review changes" | Re-trigger Greptile}

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}