​
Theme Object

export interface ColorConfig {
    [string]: string[] // 10 different shades of the color specified in the key 
}

export interface ClaspTheme {
    fontFamily?: string
    colors?: ColorConfig
    primaryShade?: string
    primaryColor?: string
    radius?: {
        xs: string
        sm: string
        md: string
        lg: string
        xl: string
    }
    fontSizes?: {
        xs: string
        sm: string
        md: string
        lg: string
        xl: string
    }
    lineHeights?: {
        xs: string
        sm: string
        md: string
        lg: string
        xl: string
    }
    shadows?: {
        xs: string
        sm: string
        md: string
        lg: string
        xl: string
    }
}

you can provide a Partial<ClaspTheme> to any ClaspView. This is the easiest and most consistent way of changing the styling of a clasp component

the most important styles to change are

  1. ClaspTheme.fontFamily : to align the font family with your application’s

​
CSS File

import 'clasp-components/dist/style.css'
import './ClaspStyleOverride.css'

if you need more granular management of styles you can create your own css file and override the styles found in the clasp-components/dist/styles.css

The best way of finding the style you want to override is to inspect the element in the browser to find the appropriate class name or id

​
ClaspStyleOverride.css

._button_1a1ab_1{
    color: white;
}

​
Font Family

you can pass any font family to the clasp-components as long as it has been previously imported or is web safe font

​
Positioning

the clasp-components views attempt to be unopinionated about positioning, so there is no padding / alignment attached to the views.

As such, wherever you implement a Clasp view you should position it as you want

Here’s an example using flex to position the SDK in the middle with a padding of 24px

.wrapper {
    height: 52px;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 24px;
    box-sizing: border-box;
}

import { ClaspEmployerView } from 'clasp-components'
...

export const BenefitsPage = () => {
    return (
        <div id={styles.benefits}>
            <ClaspEmployerView
                config={...}
                theme={...}
            />
        </div>
    )
}

​
Theme Object

export interface ColorConfig {
    [string]: string[] // 10 different shades of the color specified in the key 
}

export interface ClaspTheme {
    fontFamily?: string
    colors?: ColorConfig
    primaryShade?: string
    primaryColor?: string
    radius?: {
        xs: string
        sm: string
        md: string
        lg: string
        xl: string
    }
    fontSizes?: {
        xs: string
        sm: string
        md: string
        lg: string
        xl: string
    }
    lineHeights?: {
        xs: string
        sm: string
        md: string
        lg: string
        xl: string
    }
    shadows?: {
        xs: string
        sm: string
        md: string
        lg: string
        xl: string
    }
}

you can provide a Partial<ClaspTheme> to any ClaspView. This is the easiest and most consistent way of changing the styling of a clasp component

the most important styles to change are

  1. ClaspTheme.fontFamily : to align the font family with your application’s

​
CSS File

import 'clasp-components/dist/style.css'
import './ClaspStyleOverride.css'

if you need more granular management of styles you can create your own css file and override the styles found in the clasp-components/dist/styles.css

The best way of finding the style you want to override is to inspect the element in the browser to find the appropriate class name or id

​
ClaspStyleOverride.css

._button_1a1ab_1{
    color: white;
}

​
Font Family

you can pass any font family to the clasp-components as long as it has been previously imported or is web safe font

​
Positioning

the clasp-components views attempt to be unopinionated about positioning, so there is no padding / alignment attached to the views.

As such, wherever you implement a Clasp view you should position it as you want

Here’s an example using flex to position the SDK in the middle with a padding of 24px

.wrapper {
    height: 52px;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 24px;
    box-sizing: border-box;
}

import { ClaspEmployerView } from 'clasp-components'
...

export const BenefitsPage = () => {
    return (
        <div id={styles.benefits}>
            <ClaspEmployerView
                config={...}
                theme={...}
            />
        </div>
    )
}