Introducing Socket Firewall: Free, Proactive Protection for Your Software Supply Chain.Learn More
Socket
Book a DemoInstallSign in
Socket

@warp-ds/css

Package Overview
Dependencies
Maintainers
7
Versions
199
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@warp-ds/css

This is the CSS package for WARP.

Source
npmnpm
Version
2.2.0-next.1
Version published
Weekly downloads
2K
83.24%
Maintainers
7
Weekly downloads
 
Created
Source

WARP CSS

This is the CSS package for WARP.

The package includes resets, component classes and tokens.

Usage

The CSS files should be used directly from Eik. This is because we can alias releases by major versions.

We publish 4 css files.

  • Resets: https://assets.finn.no/pkg/@warp-ds/css/v2/resets.css
  • Components css: https://assets.finn.no/pkg/@warp-ds/css/v2/components.css
  • Brand css with tokens: https://assets.finn.no/pkg/@warp-ds/css/v2/tokens/[BRANDNAME e.g. tori-fi].css
  • Data Vizualization tokens: https://assets.finn.no/pkg/@warp-ds/css/v2/tokens/dataviz.css

Usage (npm)

Only component classes are published to npm to be used in the component libraries.

pnpm add @warp-ds/css

Component classes

The package includes component classes for components like:

  • alert
  • attention
  • badge
  • box
  • breadcrumbs
  • button
  • card
  • combobox
  • expandable
  • modal
  • page indicator
  • pagination
  • pill
  • select
  • slider
  • switch
  • step
  • tabs
  • toast
  • toggle

And shortcuts for covering use-cases from predecessors of Warp DS, such as:

  • button
  • button--secondary
  • button--default
  • button--small
  • button--link
  • button--primary
  • button--cta
  • button--pill
  • button--utility
  • button--utility-flat
  • button--destructive
  • button--destructive-flat
  • button--flat

Tokens

Run pnpm build to generate brand CSS and dataviz CSS files containing CSS variables which refer to tokens used in Warp.

The majority of Warp tokens generated upon build are imported from Figma and initially processed using a library called Style Dictionary in the @warp-ds/tokens repository. The output files are then made available for download by iOS, Android and web.

In the event when tokens are removed from Figma or for some reason are different for each brand, we can add them manually to the tokens directory in the current repository (in a .yml format). We then use a tool called Tokenizer to build CSS variables from those files. The output is added to the final CSS files.

How to contribute

If you'd like to contribute to @warp-ds/css, start by reviewing the contributing guidelines.

FAQs

Package last updated on 10 Apr 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts