@humanitec/ui-components v2.0.0

Humanitec ui component library

Contributing

To publish this package, build the package with npm run build, bump the version using npm version patch|minor|major and finally publish it using npm publish to publish the library.

Styled components

This library depends on styled-components. Any component using this library should be wrapped in a ThemeProvider.

A theme with the following type should be passed to ThemeProvider.

interface Theme {
  white: string;
  black: string;
  navBgColor: string;

  // Base
  baseDarker: string;
  base: string;
  baseTransparent: string;
  baseBrighter: string;
  baseBrightest: string;
  baseOutline: string;
  baseLayer: string;
  baseLayerTransparent: string;
  baseDeployButton: string;
  baseShadow: string;
  baseSecondaryButton: string;
  // Main
  mainDarker: string;
  main: string;
  mainBrighter: string;
  mainBrighterTransparent: string;
  mainTransparent: string;
  mainTransparentSolid: string;
  // Alert
  alert: string;
  alertBrighter: string;
  alertDarker: string;
  alertBrightest: string;
  alertTransparent: string;
  alertInput: string;
  // Placeholder
  placeholderText: string;
  placeholderBackground: string;
  // Date Picker
  datePickerColorScheme: string;
}

example:

import { ThemeProvider } from 'styled-components/macro';

const theme: Theme = {
  color: {
    white: '#FFF',
    black: '#000',
    navBgColor: rgba('#000', 0.4),
    // Base
    baseDarker: '#101114',
    base: '#17181C',
    baseTransparent: rgba('#242628', 0.5),
    baseBrighter: '#24252B',
    baseBrightest: '#0b0b0f',
    baseOutline: '#414450',
    baseLayer: '#0D0D0D',
    baseLayerTransparent: rgba('#0D0D0D', 0.5), // previously baseOverlayTransparent
    baseDeployButton: '#425566',
    baseShadow: rgba(18, 22, 25, 0.15), // all shadows color dark theme
    baseSecondaryButton: '#3C3E42',
    // Main
    mainDarker: '#0049BD',
    main: '#0062FF',
    mainBrighter: '#428BFF',
    mainTransparent:  '#428BFF',
    mainBrighterTransparent: rgba('#428BFF', 0.16),
    mainTransparentSolid: '#28374C',
    // Alert
    alert: '#E80000',
    alertBrighter: '#FF6B6B',
    alertDarker: '#B20000',
    alertBrightest: '#B20000',
    alertTransparent: '#B20000',
    alertInput: '#48222D',
    // Text
    text: '#FAFAFA',
    textTranslucent: '#BDBDBD',
    // Other
    green: '#50D37D',
    yellow: '#F1C21B',
    yellowTransparent: '#F1C21B',
    // Outline
    outline: '#FFF',
    // Placeholders
    placeholderText: '#D48FFF',
    placeholderBackground: '#2F004D',
    // Date Picker
    datePickerColorScheme: 'dark',
    // Extra
    buttonGreen: '#28A745',
    buttonGreenHover: rgba('#28A745', 0.8),
    mainTransparentFlat: '#27384d',
    alertTransparentFlat: '#4b282f'
  },
};

<ThemeProvider theme={theme}>
  <WalButton>Test</WalButton>
</ThemeProvider>