The @tinacms/styles package serves as the foundation for all Tina UI components. It contains a number of related elements:
Theme — this contains GlobalStyles (for Tina CSS custom properties) and a FontLoader for Inter.ResetStyles— a wrapper component that applies TinaResetStyles CSS.Button & IconButton components which are used throughout Tina.Tina uses CSS custom properties to define a range of universal values used by Tina UI components. Using CSS custom properties allows anyone using Tina in their project to override any or all of the definitions as needed, either at a global or local scope.
This is how they're defined in the @tinacms/styles package:
:root {
--tina-color-primary-light: #2296fe;
--tina-color-primary: #2296fe;
--tina-color-primary-dark: #0574e4;
--tina-color-error-light: #eb6337;
--tina-color-error: #ec4815;
--tina-color-error-dark: #dc4419;
--tina-color-warning-light: #f5e06e;
--tina-color-warning: #e9d050;
--tina-color-warning-dark: #d3ba38;
--tina-color-success-light: #57c355;
--tina-color-success: #3cad3a;
--tina-color-success-dark: #249a21;
--tina-color-grey-0: #ffffff;
--tina-color-grey-1: #f6f6f9;
--tina-color-grey-2: #edecf3;
--tina-color-grey-3: #e1ddec;
--tina-color-grey-4: #b2adbe;
--tina-color-grey-5: #918c9e;
--tina-color-grey-6: #716c7f;
--tina-color-grey-7: #565165;
--tina-color-grey-8: #433e52;
--tina-color-grey-9: #363145;
--tina-color-grey-10: #282828;
--tina-radius-small: 5px;
--tina-radius-big: 24px;
--tina-padding-small: 12px;
--tina-padding-big: 20px;
--tina-font-size-0: 11px;
--tina-font-size-1: 13px;
--tina-font-size-2: 15px;
--tina-font-size-3: 16px;
--tina-font-size-4: 18px;
--tina-font-size-5: 20px;
--tina-font-size-6: 22px;
--tina-font-size-7: 26px;
--tina-font-size-8: 32px;
--tina-font-family: 'Inter', sans-serif;
--tina-font-weight-regular: 500;
--tina-font-weight-bold: 600;
--tina-shadow-big: 0px 2px 3px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(48, 48, 48, 0.1);
--tina-shadow-small: 0px 2px 3px rgba(0, 0, 0, 0.12);
--tina-timing-short: 85ms;
--tina-timing-medium: 150ms;
--tina-timing-long: 250ms;
--tina-z-index-0: 500;
--tina-z-index-1: 1000;
--tina-z-index-2: 1500;
--tina-z-index-3: 2000;
--tina-z-index-4: 2500;
}Shouldn't Tina use
rem?While
remandemare the current preference for UI work, Tina can't control the root font size of the page where UI components are displayed, so it's necessary to use a more predictable unit.
To override any Tina properties, you can redefine them in your own stylesheet with a higher specificity selector, or simply :root if you know your styles will be loaded after Tina's.
Here's an example where we override the default primary color in favor of red:
html body {
--tina-color-primary-light: Red;
--tina-color-primary: Crimson;
--tina-color-primary-dark: Firebrick;
}The Button component is used throughout other Tina UI components. You can import and use it in your own project, which can be useful for in-page editing or additional UI.
Here is an example where we use two available boolean props to create a regular, primary, small, and small primary button.
import { Button } from '@tinacms/styles'
export const MyComponent = () => {
return (
<Button>I'm a Button</Button>
<Button primary>I'm a Primary Button</Button>
<Button small>I'm a Small Button</Button>
<Button small primary>I'm a Small Primary Button</Button>
)
}
)By default, the TinaProvider component will add the Theme to your project. You can use the styled prop to conditionally render the theme. By default, the TinaProvider will load the Theme if the CMS is enabled and no styled prop has been passed.
pages/_app.js
import App from 'next/app'
import { TinaProvider, TinaCMS } from 'tinacms'
export default class Site extends App {
constructor() {
//...
}
render() {
const { Component, pageProps } = this.props
return (
<TinaProvider
cms={this.cms}
styled={process.env.NODE_ENV === 'production'}
>
<Component {...pageProps} />
</TinaProvider>
)
}
}In this example, the Tina Theme won't render in production. This means the CSS custom properties won't register and the custom 'Inter' font won't load.
pages/_app.js
import React from 'react'
import App from 'next/app'
import { TinaProvider, TinaCMS } from 'tinacms'
import { GlobalStyles as TinaStyles } from '@tinacms/styles'
export default class Site extends App {
constructor() {
//...
}
render() {
const { Component, pageProps } = this.props
return (
<TinaProvider cms={this.cms} styled={false}>
<TinaStyles />
<Component {...pageProps} />
</TinaProvider>
)
}
}In this example, only the GlobalStyles(as TinaStyles) are manually imported and rendered, while the 'Inter' font will not load.