Building the Foundation

Consistency in application design relies on important elements such as colors and typography. This page provides a general overview of how to import and utilize the color & typography configuration files of this design system into Lit and Tailwind CSS (React) environments.

Tip

Note: This page does not cover the installation methods for Lit or Tailwind themselves. Please refer to the official documentation.

1. Cloning the GitHub Repository

Start by obtaining the color and typography configuration files managed by this design system. You can begin by cloning or downloading the repository below and copying only the necessary files.

Repository

Lit

Tailwind (React)

Note

If you only want to use certain parts, it is recommended to pick up and copy the relevant CSS files or modules.

2. Example of Applying

Tailwind

When using Tailwind, the basic approach is to merge the CSS files that incorporate the colors and fonts defined in this design system into the CSS files used by Tailwind by incorporating them into the tailwind.config.js.

Caution

This is merely a method of adding based on the configuration files. For Tailwind installation and detailed configuration, please refer to the official documentation.

Example

tailwind.config.js

export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        black: "var(--basic-black)",
        silver: "var(--basic-silver)",
        gray: "var(--basic-gray)",
        white: "var(--basic-white)",
        // Additional styles
      },
      fontFamily: {
        // Additional styles
      }
    },
  }

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --basic-black: #000000;
  --basic-silver: #c0c0c0;
  --basic-gray: #808080;
  --basic-white: #ffffff;
  /* Additional styles */
}

Lit

When using Lit, you can simply load CSS files such as my-colors.css or my-typography.css directly into your web components.

Tip

However, for Lit environment setup and dependency construction procedures, please refer to the official documentation.

Example

colorPalette.js

import { css } from "lit";

export const colorPalette = css`
  :host {
    /* basic theme */
    --basic-black: #000000;
    --basic-silver: #c0c0c0;
    --basic-gray: #808080;
    --basic-white: #ffffff;
    // Additional styles
  }`

my-web-component.js

import { LitElement, html, css } from 'lit';
import { colorPalette } from './path/to/my-colors.css';
import { typography } from './path/to/my-typography.css';

export class MyWebComponent extends LitElement {
  static styles = [
    colorPalette,
    typography,
    css`
      --color-black: var(--basic-black);
      --color-silver: var(--basic-silver);
      --color-gray:  var(--basic-gray);
      --color-white: var(--basic-white);
    `,
  ];

  render() {
    return html`
      <div class="my-class">
        <slot></slot>
      </div>
    `;
  }
}
customElements.define('my-web-component', MyWebComponent);

Danger

Versions and file names may change over time. Always check the latest information in the repository.

3. Future Developments

• Planned additions for component usage methods In addition to the foundational settings for colors & typography, we plan to add how to use components and sample code in the future. As experience accumulates, more detailed documentation will be provided.

• Regularly check the official documentation Lit and Tailwind are continuously updated. Refer to the official documentation regularly to incorporate the latest information.

Tip

The aim of this design system is to firmly establish the foundation, making it easier to focus on component development and layout implementation.

1. Obtain files from the GitHub repository
2. Set up the Tailwind or Lit environment (refer to official documentation)
3. Load the placed files in tailwind.config.js or CSS modules
4. Customize as needed and utilize in your project