apphouse
Version:
Component library for React that uses observable state management and theme-able components.
82 lines (68 loc) • 1.95 kB
Markdown
Theme styles are different than Css Snippets. However, it can be a little confusing because they are a little bit similiar.
Here is some information regarding the styles being saved in the theme.
Styles are saved in the DB in the following format:
```ts
export interface StyleType {
id: string;
variant: string;
baseComponent: BaseComponentTypeOption;
value: CssPropertyStyle[]; // <---
state?: BaseComponentStateTypeOption;
previewWithTag?: TagPreviewOption;
themeId?: string;
referenceThemeId?: string;
}
```
```ts
export type CssPropertyStyle = {
property: string;
value: string | number | CssPropertyStyle[];
reference: StyleTokenReference | null;
isSelector: boolean;
};
```
And a Style Token
```ts
export const COLOR = "color";
export const TOKEN = "token";
export type StyleTokenReferenceType = typeof COLOR | typeof TOKEN;
export interface StyleTokenReference {
/**
* The type of this reference
*/
type: StyleTokenReferenceType;
/**
* Actual value for this token reference
* ex. for spacings.small the can be a number
* for backgroundColors.background the value can be a color definition
*/
value: ColorDefinition | string | number;
/**
* The path to the actual value of this token in this system
* ex. backgroundColors.background, spacings.xSmall
* This value will be the token type + token key
*/
key: string;
}
```
```ts
/**
* A publicly stored Style object.
* It doesn't belong to any specific project.
* The difference between this and a ProjectStyle is that
* the value here is just the Raw CSS instead of the
* CssPropertyStyle[];
*/
export interface PublicStyleType {
id: string;
variant: string;
baseComponent: BaseComponentTypeOption;
value: CSSProperties; <---
state?: BaseComponentStateTypeOption;
previewWithTag?: TagPreviewOption;
}
```