README

`ha-primatives`

The very basis of the HeyAuto design system. This package includes Colors, Typography, Shadows, and Z-Index Declarations. These foundation represent the ground truth primative types for all ui elements built for HeyAuto in accordance with the HeyAuto design system. This package takes inspiration from the (artsy palette)[https://github.com/artsy/palette] structure for its design paradigm.

Installation

In the top level of HeyAuto

yarn run bootstrap

Build/Compile

This package must be compiled before running ha-dealer, ha-buyer, or ha-admin.

yarn run build

Dissimilar to yd-ui, this package uses tsc for building and compiling in efforts to keep bundle size and dependancies at a minimum.

Usage

This package is meant to be a foundation for building atomic ui components and should not be needed directly within yd-buyer. It should be used purely as a transitive dependancy of ha-ui. Requiring this package anywhere other than ha-ui may suggest an underlying issue with the abstraction of the design system.

// Loads All Components
import { foundations } from "@vividtheory/ha-primatives";

// OR

// Load individual components

import TextVaraints from "@vividtheory/ha-primatives/text";

Foundations

These are the base level primative types used for constructing the HeyAuto theme and agnostic atomic components. Their purpose is to enforce strong ui standards while maintaining a high level of abstraction and allowing for site wide customization of base appearance. For example, we have a collection of box shadow definitions defined in the foundation. If the spec on any one of those box shadows changes it need only be updated here (assuming these definitions have been pre-implemented site wide). Therefore, this package holds the ground truth for all ui components present on the site.

Colors

Within the foundations there custom defenitions for colors. Each of which contian intensity values of 20, 40, 60, 80, 100, and 120. 20 being the lightest and most commonly used for background, 100 being the primary color intensity, and 120 being the darker variant of the color.

Example:

    yellow: {
        120: "#FDA51B",
        100: "#FDB81B",
        80: "#FDC749",
        60: "#FED476",
        40: "#FEE099",
        20: "#FFF1D1",
    },

Shadows

Shadow definitions are used for a standardized approach to box shadows on the site. This object contains definition for top and bottom shadows as well as component specific shadows.

Z-Indexes

Z-Index definitions provide a means for keeping track of the convoluted nature of z-dimentional placement. It allows for major components to be given a standard z-position while allowing edge case components to fit in between as needed.

Text

Within this package there is a seperate file pertaining to text properties. These are still imported as foundation definitions but these require some extra helpers for use in ha-ui. The text properties include font families, font sizes, letter spacings, line heights, consolodated text variants, and material ui specific variant mappings. Each property is defined with generalize names to accomidate future changes.

Most of the definitions are straight forward but one that is important to note is the TEXT_VARIANT_MAPPING.

    export const TEXT_VARIANT_MAPPING = {
        h1: "h1",
        h1Mobile: "h1",
        h1MobileSmall: "h1",
        h1Caption: "h1",
        h1CaptionMobile: "h1",
        h2: "h2",
        h2Mobile: "h2",
        h3: "h3",
        h3Mobile: "h3",
        h4: "h4",
        h5: "h5",
        h6: "h6",
        title: "h6",
        body: "body1",
        bodyInput: "body1",
        bodyCaption: "body1",
        bodyLink: "body1",
        button: "body1",
    };

This object exists for 2 reasons. One, to convert all custom variants back to material ui variants to ensure material ui's map can construct the appropriate html tag in the DOM. And two, to aid in enforcing the declaration of typography with a concrete variant prop. This second reason finds its importance in SEO as H1 tags need to be present on every page to improve site indexing.

There exists a custom typography component override in ha-ui that enforces the inclusion of a variant prop of which a developer can initialize to any one of our custom variants. With this type map we can now handle the styling and the proper tagging of a typography component with one variant declaration.

Usage no npm install needed!