OLD - AFFiNE Docs
  • ⚠️
  • ⚠️ This website is inactive
  • ⚠️ For reference only
  • ⚠️ Please use our community site
  • ⚠️ community.affine.pro
  • ⚠️
  • Welcome
    • Welcome to the AFFiNE Docs!
  • Getting Started
    • 🎉Welcome
    • 🆒Install AFFiNE with Docker
    • 💻Deploy AFFiNE to Vercel
    • 🌟How to Get Help
  • Developer Docs
    • 🎉Welcome
    • 🌳Setup
    • 🗂️Working with our code
    • 🖥️Contributions
      • ☘️Writing CSS in AFFiNE
      • 💐Adding UI Components
        • 📐Customize rollup config
      • 🌱Icons
      • 🌐Internationalization
    • 🔭Architecture
      • 🎼CodeMap
      • 💫Editor (Virgo)
      • 🦄Whiteboard (Phasor)
      • 💎Collaboration (OctoBase)
    • 📚Glossary
    • 📒AFFiNE Mentorship Program
  • Internationalization
    • 🎉Welcome
    • 📋Apply
    • 📘Operation Guide
    • 📝Contributors
  • AFFiNE Ambassadors
    • 🎉Welcome
    • ✔️Requirements
    • 🎁Benefits
    • 📋Apply
    • ❓FAQ
    • 📚Branding resources
    • 📝Best practices
    • 📑Resources
  • Branding Resources
    • 🎉Welcome
    • Logo (icon)
    • Logo (text)
    • Logo (3D)
    • Tagline banners
    • Colors
  • Community Links
    • 📢AFFiNE Community
    • 🗣️Official Communities
    • 📗Community Resources
Powered by GitBook
On this page

Was this helpful?

  1. Developer Docs
  2. Contributions

Adding UI Components

PreviousWriting CSS in AFFiNENextCustomize rollup config

Last updated 2 years ago

Was this helpful?

AFFiNE defines a new component development specification in Figma, extends AFFiNE UI Components based on and , and supplements as needed https://github.com/toeverything/AFFiNE/tree/master/libs/components/ui , e.g. src/libs/components/ui/src/button/base-button.ts.

import ButtonUnstyled, {
    buttonUnstyledClasses,
} from '@mui/base/ButtonUnstyled';
import { styled } from '../styled';

/* eslint-disable @typescript-eslint/naming-convention */
const blue = {
    500: '#007FFF',
    600: '#0072E5',
    700: '#0059B2',
};
/* eslint-enable @typescript-eslint/naming-convention */

export const BaseButton = styled(ButtonUnstyled)`
    font-family: IBM Plex Sans, sans-serif;
    font-weight: bold;
    font-size: 0.875rem;
    background-color: ${blue[500]};
    border-radius: 8px;
    padding: 4px 8px;
    color: white;
    transition: all 150ms ease;
    cursor: pointer;
    border: none;

    &:hover {
        background-color: ${blue[600]};
    }

    &.${buttonUnstyledClasses.active} {
        background-color: ${blue[700]};
    }

    &.${buttonUnstyledClasses.focusVisible} {
        box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
        outline: none;
    }

    &.${buttonUnstyledClasses.disabled} {
        opacity: 0.5;
        cursor: not-allowed;
    }
`;

export { BaseButton } from './base-button';
🖥️
💐
MUI BASE
MUI SYSTEM