Описание тега theme-ui

Описание тега Вопросы с тегом

Пользовательский интерфейс темы - это библиотека для создания тематических пользовательских интерфейсов на основе принципов проектирования на основе ограничений. Создавайте библиотеки пользовательских компонентов, системы дизайна, веб-приложения, темы Gatsby и многое другое с помощью гибкого API, обеспечивающего лучшую в своем классе эргономику для разработчиков.

Домашняя страница

https://theme-ui.com/

Документы

https://theme-ui.com/getting-started

Github

https://github.com/system-ui/theme-ui

Демо

https://theme-ui.com/demo

Синтаксис

// example theme.js
export default {
  fonts: {
    body: 'system-ui, sans-serif',
    heading: '"Avenir Next", sans-serif',
    monospace: 'Menlo, monospace',
  },
  colors: {
    text: '#000',
    background: '#fff',
    primary: '#33e',
  },
}

// basic usage
import React from 'react'
import { ThemeProvider } from 'theme-ui'
import theme from './theme'
export default props => (
  <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
)

/** @jsx jsx */
import { jsx } from 'theme-ui'
export default props => (
  <div
    sx={{
      fontWeight: 'bold',
      fontSize: 4, // picks up value from `theme.fontSizes[4]`
      color: 'primary', // picks up value from `theme.colors.primary`
    }}>
    Hello
  </div>
)