ui Architecture Docs
Home / File/ apply-color-mapping.test.ts — ui Source File

apply-color-mapping.test.ts — ui Source File

Architecture documentation for apply-color-mapping.test.ts, a typescript file in the ui codebase. 5 imports, 0 dependents.

File typescript FrameworkTooling 5 imports

Entity Profile

Dependency Diagram

graph LR
  3cdfbc67_84ba_982a_287c_bc42934b2efc["apply-color-mapping.test.ts"]
  68902008_e67e_dfe4_353e_be9dad09e8d9["transform-css-vars.ts"]
  3cdfbc67_84ba_982a_287c_bc42934b2efc --> 68902008_e67e_dfe4_353e_be9dad09e8d9
  15235ae6_6a22_6fdf_a8f4_354a12d93b40["applyColorMapping"]
  3cdfbc67_84ba_982a_287c_bc42934b2efc --> 15235ae6_6a22_6fdf_a8f4_354a12d93b40
  35f5833f_e233_d06c_e1a4_06b1e4fca37c["splitClassName"]
  3cdfbc67_84ba_982a_287c_bc42934b2efc --> 35f5833f_e233_d06c_e1a4_06b1e4fca37c
  4687ea56_6812_da95_d9f9_75f2ff6b150e["slate.json"]
  3cdfbc67_84ba_982a_287c_bc42934b2efc --> 4687ea56_6812_da95_d9f9_75f2ff6b150e
  c8d55bee_7008_1e1f_317b_8dc47b31b6a8["vitest"]
  3cdfbc67_84ba_982a_287c_bc42934b2efc --> c8d55bee_7008_1e1f_317b_8dc47b31b6a8
  style 3cdfbc67_84ba_982a_287c_bc42934b2efc fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { describe, expect, test } from "vitest"

import {
  applyColorMapping,
  splitClassName,
} from "../../src/utils/transformers/transform-css-vars"
import baseColor from "../fixtures/colors/slate.json"

describe("split className", () => {
  test.each([
    {
      input: "bg-popover",
      output: [null, "bg-popover", null],
    },
    {
      input: "bg-popover/50",
      output: [null, "bg-popover", "50"],
    },
    {
      input: "hover:bg-popover/50",
      output: ["hover", "bg-popover", "50"],
    },
    {
      input: "hover:bg-popover",
      output: ["hover", "bg-popover", null],
    },
    {
      input: "[&_[cmdk-group-heading]]:px-2",
      output: ["[&_[cmdk-group-heading]]", "px-2", null],
    },
    {
      input: "[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0",
      output: ["[&_[cmdk-group]:not([hidden])_~[cmdk-group]]", "pt-0", null],
    },
    {
      input: "[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:bg-red-200",
      output: [
        "[&_[cmdk-group]:not([hidden])_~[cmdk-group]]",
        "bg-red-200",
        null,
      ],
    },
    {
      input: "sm:focus:text-accent-foreground/30",
      output: ["sm:focus", "text-accent-foreground", "30"],
    },
  ])(`splitClassName($input) -> $output`, ({ input, output }) => {
    expect(splitClassName(input)).toStrictEqual(output)
  })
})

describe("apply color mapping", async () => {
  test.each([
    {
      input: "bg-background text-foreground",
      output: "bg-white text-slate-950 dark:bg-slate-950 dark:text-slate-50",
    },
    {
      input: "rounded-lg border bg-card text-card-foreground shadow-sm",
      output:
        "rounded-lg border border-slate-200 bg-white text-slate-950 shadow-sm dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
    },
    {
      input:
        "text-destructive border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive",
      output:
        "text-red-500 border-red-500/50 dark:border-red-500 [&>svg]:text-red-500 dark:text-red-900 dark:border-red-900/50 dark:dark:border-red-900 dark:[&>svg]:text-red-900",
    },
    {
      input:
        "flex h-full w-full items-center justify-center rounded-full bg-muted",
      output:
        "flex h-full w-full items-center justify-center rounded-full bg-slate-100 dark:bg-slate-800",
    },
    {
      input:
        "absolute right-4 top-4 bg-primary rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary",
      output:
        "absolute right-4 top-4 bg-slate-900 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 dark:bg-slate-50 dark:ring-offset-slate-950 dark:focus:ring-slate-800 dark:data-[state=open]:bg-slate-800",
    },
  ])(`applyColorMapping($input) -> $output`, ({ input, output }) => {
    expect(applyColorMapping(input, baseColor.inlineColors)).toBe(output)
  })
})

Domain

Dependencies

Source

Frequently Asked Questions

What does apply-color-mapping.test.ts do?
apply-color-mapping.test.ts is a source file in the ui codebase, written in typescript. It belongs to the FrameworkTooling domain.
What does apply-color-mapping.test.ts depend on?
apply-color-mapping.test.ts imports 5 module(s): applyColorMapping, slate.json, splitClassName, transform-css-vars.ts, vitest.
Where is apply-color-mapping.test.ts in the architecture?
apply-color-mapping.test.ts is located at packages/shadcn/test/utils/apply-color-mapping.test.ts (domain: FrameworkTooling, directory: packages/shadcn/test/utils).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free