Codey

Appearance

Style ​

TIP

Before you start, be sure to read the Introduction.

codey-style ​

This package contains all source files to build the Codey stylesheet and the necessary config and scripts to build the tailwind file. These are available through the CDN or as a npm package.

Local development ​

The style package is implemented in the Playground. You can open this by running:

bash
npm run dev:playground

Note

The TurboRepo setup isn't fully setup to allow live updates from style changes yet. after changes to the styles run npm run build:stylesheet -w @xerius/codey-styles to update the output. This will reload the Playground.

Adding a new pictogram ​

When a new pictogram is created in Figma, it needs to be added to codey-style in order to be published to the CDN.

Open the provided link to Figma, select the pictogram and copy it as svg using the context menu.

Add to style package ​

Create a new file under packages/core/style/assets/images/pictograms with the name of the new pictogram and paste the svg code.

Update the docs ​

To make the new pictogram visible in the documentation, open apps/documentation/src/docs/style/assets/components/PictogramList.vue and add the new pictogram to the list.

INFO

The pictogram will not show be shown until it is deployed to the CDN. Using the pre-release flow, you can validate if everything is working correctly before releasing.

Add a new Icon ​

Icons can be found within the components package under packages/core/components/src/icon. They are showcased within the documentation that can be run with:

bash
npm run app:docs

Adding the icon ​

Within the icon folder of the components do the following steps:

  • Create a folder with the name of the icon.
  • Create an index.js within your created folder and copy the icon svg js into it.
  • Add an export for the added icon to packages/core/components/src/icon/index.js with the following structure: export { default as xerYoutube } from "./youtube";

Update docs ​

In order to showcase the new icon it needs to be add to the iconList component inside the codey docs.

Go to the component at apps/documentation/src/docs/style/assets/components/iconList.vue and add the new icon name to the icons array with its matching import.

Add changesets ​

In order to have a correct representation in the changelog a changeset needs to be added running the following command:

sh
npm run changeset:add

When asked, select that this is a change for @xerius/codey-components and/or for @xerius/codey-style when styles were added. Since this adds a new functionality, it needs to be marked as a minor change. As last step, give a descriptive message what component you added.

The last step is to open a PR for review