config.ts

const config = {
  conditions: {
    light: {
      value: ".light &",
      description: "Light mode",
    },
    dark: {
      value: ".dark &",
      description: "Dark mode",
    },
    highContrast: {
      value: "@media (forced-colors: active)",
      description: "High contrast mode",
    },
  },

  semanticTokens: {
    colors: {
      type: "color",
      primary: {
        description: "The primary color",
        value: { light: "{colors.red.200}", dark: "{pink.200}" },
      },
    },
  },

  tokens: {
    colors: {
      type: "color",
      gray: {
        value: "#ccc",
      },
    },

    components: {
      button: {
        description: "Button component",
        primary: {
          bg: {
            type: "color",
            value: "colors.green.500",
          },
        },
      },
    },
  },
};

const token = {
  type: "color",
  name: "dark:colors.gray.200",
  value: "#000",
  description: "The testubg",
  path: ["gray", "200"],
  meta: {
    condition: "dark",
    private: false,
  },
};

const token = {
  type: "color",
  name: "dark:colors.gray.200",
  value: "{colors.red.200}",
  description: "The testubg",
  condition: "dark",
  path: ["gray", "200"],
  meta: {
    private: false,
  },
};

Panda.mdx

Assets

Rename assets to chunks

A chunk will look like this

const file = {
  base: ``,
  utilities: ``,
  recipes: ``,
};

When the files are changed:

• we merge/dedupe utilities, recipes
• we replace global styles

JSX

Allow create jsx components from factory directly. This is useful for custom components.

const Button = chakra("button",{
    --test: "fontSizes.xl",
    fontSize: "clamp(var(--test), 20px)"
})

Extract css prop from every component-like jsx elements.

function App() {
  return <Button css={{ fontSize: "40px" }}>Welcome</Button>;
}

Tokens

const dict = new TokenDictionary({
  tokens: {},
  semanticTokens: {},
});

dict.allTokens;
dict.isReference(value);
dict.getReference(value);

dict.allTokens.forEach((token) => {
  if (token.attributes.category === "space") {
    const negativeToken = negate(token);
    dict.allTokens.push(negativeToken);
  }
});

// value | attribute | name

dict.registerTransform({
  name: "colors",
  type: "value",
  match: (token) => token.attributes.category === "colors",
  transform(token) {
    return "....";
  },
});

dict.registerFormat({
  name: "css-var",
  resolveReference: true,
  formatter: ({ dictionary }) => {},
});

dict.compile({
  format: "css-var",
  output(result) {},
});

class TokenDictionary {
  _values = [];
  constructor({ tokens, semanticTokens }) {
    const walkFn = (value, paths) => {
      _values.push({ value, paths });
    };

    walkObject(tokens, walkFn, {
      stop(value) {
        return isObject(value) && "value" in value;
      },
    });
  }

  compile() {}

  getReferenceRegex() {}

  findReference() {}

  resolveReference() {}
}