{"pageProps":{"error":null,"preview":false,"file":{"fileRelativePath":"content/docs/ui/styles.md","data":{"frontmatter":{"title":"Styles","prev":"/docs/ui/alerts","next":null},"excerpt":" The @tinacms/styles package serves as the foundation for all Tina UI components. It contains a number of related elements: Definitions for a range of CSS custom properties that define color, spacing&hellip;","markdownBody":"\nThe `@tinacms/styles` package serves as the foundation for all Tina UI components. It contains a number of related elements:\n\n- Definitions for a range of CSS custom properties that define color, spacing, sizing & timing of Tina components.\n- `Theme` — this contains `GlobalStyles` (for Tina CSS custom properties) and a `FontLoader` for [Inter](https://rsms.me/inter/).\n- `ResetStyles`— a wrapper component that applies `TinaResetStyles` CSS.\n- The `Button` & `IconButton` components which are used throughout Tina.\n\n## CSS Custom Properties\n\nTina 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.\n\nThis is how they're defined in the `@tinacms/styles` package:\n\n```css\n:root {\n  --tina-color-primary-light: #2296fe;\n  --tina-color-primary: #2296fe;\n  --tina-color-primary-dark: #0574e4;\n  --tina-color-error-light: #eb6337;\n  --tina-color-error: #ec4815;\n  --tina-color-error-dark: #dc4419;\n  --tina-color-warning-light: #f5e06e;\n  --tina-color-warning: #e9d050;\n  --tina-color-warning-dark: #d3ba38;\n  --tina-color-success-light: #57c355;\n  --tina-color-success: #3cad3a;\n  --tina-color-success-dark: #249a21;\n  --tina-color-grey-0: #ffffff;\n  --tina-color-grey-1: #f6f6f9;\n  --tina-color-grey-2: #edecf3;\n  --tina-color-grey-3: #e1ddec;\n  --tina-color-grey-4: #b2adbe;\n  --tina-color-grey-5: #918c9e;\n  --tina-color-grey-6: #716c7f;\n  --tina-color-grey-7: #565165;\n  --tina-color-grey-8: #433e52;\n  --tina-color-grey-9: #363145;\n  --tina-color-grey-10: #282828;\n\n  --tina-radius-small: 5px;\n  --tina-radius-big: 24px;\n\n  --tina-padding-small: 12px;\n  --tina-padding-big: 20px;\n\n  --tina-font-size-0: 11px;\n  --tina-font-size-1: 13px;\n  --tina-font-size-2: 15px;\n  --tina-font-size-3: 16px;\n  --tina-font-size-4: 18px;\n  --tina-font-size-5: 20px;\n  --tina-font-size-6: 22px;\n  --tina-font-size-7: 26px;\n  --tina-font-size-8: 32px;\n\n  --tina-font-family: 'Inter', sans-serif;\n\n  --tina-font-weight-regular: 500;\n  --tina-font-weight-bold: 600;\n\n  --tina-shadow-big: 0px 2px 3px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(48, 48, 48, 0.1);\n  --tina-shadow-small: 0px 2px 3px rgba(0, 0, 0, 0.12);\n\n  --tina-timing-short: 85ms;\n  --tina-timing-medium: 150ms;\n  --tina-timing-long: 250ms;\n\n  --tina-z-index-0: 500;\n  --tina-z-index-1: 1000;\n  --tina-z-index-2: 1500;\n  --tina-z-index-3: 2000;\n  --tina-z-index-4: 2500;\n}\n```\n\n> ### Shouldn't Tina use `rem`?\n>\n> While `rem` and `em` are 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.\n\nTo 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.\n\nHere's an example where we override the default primary color in favor of red:\n\n```css\nhtml body {\n  --tina-color-primary-light: Red;\n  --tina-color-primary: Crimson;\n  --tina-color-primary-dark: Firebrick;\n}\n```\n\n## Button Component\n\nThe 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.\n\nHere is an example where we use two available boolean props to create a regular, primary, small, and small primary button.\n\n```jsx\nimport { Button } from '@tinacms/styles'\n\nexport const MyComponent = () => {\n    return (\n      <Button>I'm a Button</Button>\n      <Button primary>I'm a Primary Button</Button>\n      <Button small>I'm a Small Button</Button>\n      <Button small primary>I'm a Small Primary Button</Button>\n    )\n  }\n)\n```\n\n## Dynamically loading Tina styles\n\nBy 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.\n\n### Example: Load styles based on environment variable\n\n**pages/\\_app.js**\n\n```js\nimport App from 'next/app'\nimport { TinaProvider, TinaCMS } from 'tinacms'\n\nexport default class Site extends App {\n  constructor() {\n    //...\n  }\n\n  render() {\n    const { Component, pageProps } = this.props\n    return (\n      <TinaProvider\n        cms={this.cms}\n        styled={process.env.NODE_ENV === 'production'}\n      >\n        <Component {...pageProps} />\n      </TinaProvider>\n    )\n  }\n}\n```\n\nIn 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.\n\n### Example: Only load _GlobalStyles_\n\n**pages/\\_app.js**\n\n```js\nimport React from 'react'\nimport App from 'next/app'\nimport { TinaProvider, TinaCMS } from 'tinacms'\nimport { GlobalStyles as TinaStyles } from '@tinacms/styles'\n\nexport default class Site extends App {\n  constructor() {\n    //...\n  }\n\n  render() {\n    const { Component, pageProps } = this.props\n    return (\n      <TinaProvider cms={this.cms} styled={false}>\n        <TinaStyles />\n        <Component {...pageProps} />\n      </TinaProvider>\n    )\n  }\n}\n```\n\nIn this example, only the `GlobalStyles`(as `TinaStyles`) are manually imported and rendered, while the **'Inter' font will not load**.\n"}},"tocItems":"- [CSS Custom Properties](#css-custom-properties)\n  * [Shouldn't Tina use `rem`?](#shouldnt-tina-use-rem)\n- [Button Component](#button-component)\n- [Dynamically loading Tina styles](#dynamically-loading-tina-styles)\n  * [Example: Load styles based on environment variable](#example-load-styles-based-on-environment-variable)\n  * [Example: Only load _GlobalStyles_](#example-only-load-globalstyles)","docsNav":[{"title":"Getting Started","id":"getting-started","items":[{"id":"/docs/getting-started/introduction","slug":"/docs/getting-started/introduction","title":"Introduction"}]},{"title":"CMS","id":"the-cms","items":[{"id":"/docs/cms","slug":"/docs/cms","title":"Overview"}]},{"title":"User Interface","id":"user-interface","items":[{"id":"/docs/ui","title":"Sidebar & Toolbar","slug":"/docs/ui"},{"title":"Inline Editing","id":"inline-editing","slug":"/docs/ui/inline-editing","items":[{"id":"/docs/ui/inline-editing/inline-text","title":"Inline Text","slug":"/docs/ui/inline-editing/inline-text"},{"id":"/docs/ui/inline-editing/inline-textarea","title":"Inline Textarea","slug":"/docs/ui/inline-editing/inline-textarea"},{"id":"/docs/ui/inline-editing/inline-wysiwyg","title":"Inline Wysiwyg","slug":"/docs/ui/inline-editing/inline-wysiwyg"},{"id":"/docs/ui/inline-editing/inline-image","title":"Inline Image","slug":"/docs/ui/inline-editing/inline-image"},{"id":"/docs/ui/inline-editing/inline-group","title":"Inline Group","slug":"/docs/ui/inline-editing/inline-group"},{"id":"/docs/ui/inline-editing/inline-blocks","title":"Inline Blocks","slug":"/docs/ui/inline-editing/inline-blocks"}]},{"id":"/docs/ui/alerts","title":"Alerts","slug":"/docs/ui/alerts"},{"id":"/docs/ui/styles","title":"Custom Styles","slug":"/docs/ui/styles"}]},{"id":"plugins","title":"Plugins","items":[{"title":"About Plugins","id":"forms","slug":"/docs/plugins"},{"title":"Forms","id":"forms","slug":"/docs/plugins/forms"},{"title":"Fields","id":"fields","slug":"/docs/plugins/fields","items":[{"id":"/docs/plugins/fields/text","slug":"/docs/plugins/fields/text","title":"Text"},{"id":"/docs/plugins/fields/textarea","slug":"/docs/plugins/fields/textarea","title":"Text Area"},{"id":"/docs/plugins/fields/number","slug":"/docs/plugins/fields/number","title":"Number"},{"id":"/docs/plugins/fields/image","slug":"/docs/plugins/fields/image","title":"Image"},{"id":"/docs/plugins/fields/color","slug":"/docs/plugins/fields/color","title":"Color"},{"id":"/docs/plugins/fields/toggle","slug":"/docs/plugins/fields/toggle","title":"Toggle"},{"id":"/docs/plugins/fields/select","slug":"/docs/plugins/fields/select","title":"Select"},{"id":"/docs/plugins/fields/tags","slug":"/docs/plugins/fields/tags","title":"Tags"},{"id":"/docs/plugins/fields/list","slug":"/docs/plugins/fields/list","title":"List"},{"id":"/docs/plugins/fields/group","slug":"/docs/plugins/fields/group","title":"Group"},{"id":"/docs/plugins/fields/group-list","slug":"/docs/plugins/fields/group-list","title":"Group List"},{"id":"/docs/plugins/fields/blocks","slug":"/docs/plugins/fields/blocks","title":"Blocks"},{"id":"/docs/plugins/fields/date","slug":"/docs/plugins/fields/date","title":"Date & Time"},{"id":"/docs/plugins/fields/markdown","slug":"/docs/plugins/fields/markdown","title":"Markdown"},{"id":"/docs/plugins/fields/html","slug":"/docs/plugins/fields/html","title":"HTML"},{"id":"/docs/plugins/fields/custom-fields","slug":"/docs/plugins/fields/custom-fields","title":"Custom Fields"}]},{"title":"Content Creators","id":"content-creator","slug":"/docs/plugins/content-creators"},{"title":"Screens","id":"screens","slug":"/docs/plugins/screens"},{"title":"Toolbar Widgets","id":"toolbar:widget","slug":"/docs/plugins/toolbar-widgets"}]},{"id":"events","title":"Events","items":[{"id":"/docs/events","slug":"/docs/events","title":"About Events"}]},{"title":"Media","id":"media","items":[{"id":"/docs/media","slug":"/docs/media","title":"About Media"}]},{"id":"apis","title":"External APIs","items":[{"id":"/docs/api","slug":"/docs/apis","title":"About APIs"}]},{"title":"Integrations","id":"nextjs","items":[{"id":"/docs/integrations/nextjs","slug":"/docs/integrations/nextjs","title":"Next.js"},{"id":"/docs/integrations/gatsby","slug":"/docs/integrations/gatsby","title":"Gatsby"}]},{"title":"Release Notes","id":"releases","items":[{"id":"/docs/releases","href":"/docs/releases","title":"All Releases"}]},{"title":"Packages","id":"packages","items":[{"id":"/packages/react-tinacms-date","slug":"/packages/react-tinacms-date","title":"react-tinacms-date"},{"id":"/packages/react-tinacms-editor","slug":"/packages/react-tinacms-editor","title":"react-tinacms-editor"},{"id":"/packages/react-tinacms-github","slug":"/packages/react-tinacms-github","title":"react-tinacms-github"},{"id":"/packages/react-tinacms-inline","slug":"/packages/react-tinacms-inline","title":"react-tinacms-inline"},{"id":"/packages/react-tinacms-strapi","slug":"/packages/react-tinacms-strapi","title":"react-tinacms-strapi"},{"id":"/packages/next-tinacms-github","slug":"/packages/next-tinacms-github","title":"next-tinacms-github"},{"id":"/packages/next-tinacms-json","slug":"/packages/next-tinacms-json","title":"next-tinacms-json"},{"id":"/packages/next-tinacms-markdown","slug":"/packages/next-tinacms-markdown","title":"next-tinacms-markdown"},{"id":"/packages/gatsby-plugin-tinacms","slug":"/packages/gatsby-plugin-tinacms","title":"gatsby-plugin-tinacms"},{"id":"/packages/gatsby-tinacms-git","slug":"/packages/gatsby-tinacms-git","title":"gatsby-tinacms-git"},{"id":"/packages/gatsby-tinacms-json","slug":"/packages/gatsby-tinacms-json","title":"gatsby-tinacms-json"},{"id":"/packages/gatsby-tinacms-remark","slug":"/packages/gatsby-tinacms-remark","title":"gatsby-tinacms-remark"}]}],"nextPage":{"slug":null,"title":null},"prevPage":{"slug":"/docs/ui/alerts","title":"Alerts"}},"__N_SSG":true}