# Theme Styles

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:

## Style

```ts
export interface StyleType {
  id: string;
  variant: string;
  baseComponent: BaseComponentTypeOption;
  value: CssPropertyStyle[]; // <---
  state?: BaseComponentStateTypeOption;
  previewWithTag?: TagPreviewOption;
  themeId?: string;
  referenceThemeId?: string;
}
```

### Where Css Property Style is defined as follows:

```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;
}
```

## Public Style

```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;
}
```