@qctrl/elements-css

9.0.1 • Public • Published

Q-CTRL Elements CSS

Elements CSS is a collection of CSS variables that extend TailwindCSS theme with semantic variables for Elements Design System.

Installation guide

Install Elements CSS and its peer dependencies

  pnpm add -D @qctrl/elements-css@latest tailwindcss@latest @tailwindcss/postcss@latest

Follow TailwindCSS setup steps

For most projects, we recommend setting up TailwindCSS and Elements with PostCSS.

https://tailwindcss.com/docs/installation/using-postcss

Import Elements CSS into your main css file

@import "tailwindcss";
@import "@qctrl/elements-css";

Note: You can also import individual CSS files if you need to omit/override some properties.

@import "tailwindcss";
@import "@qctrl/elements-css/theme/color.css";
@import "@qctrl/elements-css/theme/font.css";
@import "@qctrl/elements-css/theme/typography.css";
/** ... */

Figma variables

For development purposes, you can import both semantic and primitive variables in JSON format:

import semanticVariables from "@qctrl/elements-css/figma/semantic-variables.json";
import primitiveVariables from "@qctrl/elements-css/figma/primitive-variables.json";

/@qctrl/elements-css/

    Package Sidebar

    Install

    npm i @qctrl/elements-css

    Weekly Downloads

    265

    Version

    9.0.1

    License

    UNLICENCED

    Unpacked Size

    715 kB

    Total Files

    16

    Last publish

    Collaborators

    • tabishb
    • luigibertaco
    • ryanbarker
    • robertlove
    • iconic21
    • cfarrend
    • damienmetcalf
    • tysonwolker
    • john_q-ctrl
    • qctrlrobot
    • christinamaresca
    • jasperdu28
    • lianapache
    • kunj.dave
    • baileyivancic
    • knottyau
    • elkobia
    • daniel.q-ctrl
    • js636
    • newplasticideas
    • ryan.barker
    • luigi.cristofolini
    • salmolon
    • byronho24
    • charlie_wilson_qctrl
    • henrygoodman1
    • haimaki