Skip to main content

New Approach

  1. Foundation that is built on top of css( design tokens) and tailwind. Tailwind may be optional for the consumers of the DS.
  2. Safire will be a meta design System. A Design System that can be used to create a design system.
  3. Safire will make no assumptions of how the app or CNC apps/services will work. It will only provide bulding blocks and not features with BL target for CNC. In The past this has been not fruitful has devs has to always find workaround to customization due to specific business needs

Expected packages

@safire/css

CSS implementation of the Design System

@safire/tokens

Collection of design tokens

@safire/wc

Web Components library based on lit-element

@safire/angular

Optional angular wrapper for the @safire/wc

@safire/react

First class react implementation of the Design System

@safire/cli

All purpose cli tools composing of but not limited to

  1. Quickly scaffold/generate safire project based on a framework or vanilla template
  2. Other useful utilities

@safire/codemod

All code mods that helps in migration and upgrade tasks

@safire/ui

Any other UI Components that acts as recommendation for other projects. Does not necessarly need to be part of Safire code base.

@safire/headless

Accessible Headless UI Primitives

Expected Components

  1. Calendars
  2. Charts
  3. Maps
  4. Media Controls (Video & Audio)
  5. Notifications
  6. Placeholders
  7. Tooltips
  8. Popovers
  9. Overlays (including headless)
  10. Skeleton Loaders