migrate v4 components to use v4.4.0 colors and utilities (current v4.0.0)

[kohsei-ishihara]

v4

Before opening a new issue, please take a moment to review our community guidelines to make the contribution process easy and effective for everyone involved.

Before opening a new issue, you may find an answer in already closed issues:
https://github.com/bootstrap-styled/v4/issues?q=is%3Aissue+is%3Aclosed

Issue Type

• Bug
• Feature

Description

Thank you for the useful component you made. I tried to use this but colors are totally different from bootstrap v4 and I can't use this raw.
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css

Steps to reproduce

Versions

• Node/NPM:
• OS:
• v4:

[kopax]

Hi @kohsei-ishihara,

Hopefully, everything can be tuned using themization.

If you failed to do that, would you mind sharing a reproduction on codesandbox.io and giving more details about the issue you are facing?

• What do you expect
• What do you have ?
• What component are you referring to?
• How do you import
• Reproduction or example
• Version used

etc...

Generally, you are free to use the theme for the following:

  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;

Using props theme

import { makeTheme } from 'bootstrap-styled/lib/theme';
import Button from '@bootstrap-styled/v4/lib/Button';

const myTheme = makeTheme({
 '$blue': '#007bff';
 '$indigo': '#6610f2';
 '$purple': '#6f42c1';
 '$pink': '#e83e8c';
 '$red': '#dc3545';
 '$orange': '#fd7e14';
 '$yellow': '#ffc107';
 '$green': '#28a745';
 '$teal': '#20c997';
 '$cyan': '#17a2b8';
 '$white': '#fff';
 '$gray': '#6c757d';
 '$gray-dark': '#343a40';
 '$primary': '#007bff';
 '$secondary': '#6c757d';
 '$success': '#28a745';
 '$info': '#17a2b8';
 '$warning': '#ffc107';
 '$danger': '#dc3545';
 '$light': '#f8f9fa';
 '$dark': '#343a40';
});

const MyButton = (props) => <Button {...props} theme={myTheme} />

Using BootstrapProvider

import BootstrapProvider from '@bootstrap-styled/provider';
import Button from '@bootstrap-styled/v4/lib/Button';

const myTheme = {
 '$blue': '#007bff';
 '$indigo': '#6610f2';
 '$purple': '#6f42c1';
 '$pink': '#e83e8c';
 '$red': '#dc3545';
 '$orange': '#fd7e14';
 '$yellow': '#ffc107';
 '$green': '#28a745';
 '$teal': '#20c997';
 '$cyan': '#17a2b8';
 '$white': '#fff';
 '$gray': '#6c757d';
 '$gray-dark': '#343a40';
 '$primary': '#007bff';
 '$secondary': '#6c757d';
 '$success': '#28a745';
 '$info': '#17a2b8';
 '$warning': '#ffc107';
 '$danger': '#dc3545';
 '$light': '#f8f9fa';
 '$dark': '#343a40';
};

const MyButton = (props) => <BootstrapProvider theme={myTheme}><Button {...props} /></BoostrapProvider>;

Using props color

import { makeTheme } from 'bootstrap-styled/lib/theme';
import ButtonBs from '@bootstrap-styled/v4/lib/Button';

const myTheme = makeTheme({
 '$blue': '#007bff';
 '$indigo': '#6610f2';
 '$purple': '#6f42c1';
 '$pink': '#e83e8c';
 '$red': '#dc3545';
 '$orange': '#fd7e14';
 '$yellow': '#ffc107';
 '$green': '#28a745';
 '$teal': '#20c997';
 '$cyan': '#17a2b8';
 '$white': '#fff';
 '$gray': '#6c757d';
 '$gray-dark': '#343a40';
 '$primary': '#007bff';
 '$secondary': '#6c757d';
 '$success': '#28a745';
 '$info': '#17a2b8';
 '$warning': '#ffc107';
 '$danger': '#dc3545';
 '$light': '#f8f9fa';
 '$dark': '#343a40';
});

const MyButton = (props) => <ButtonBs {...props} theme={myTheme} color="secondary" />

For this method, it only works for a selection of color per components (for the reason that at the time we started to rewrite the v4 alpha of Bootstrap, these were the color available on each component), but we are open adding more on request.

Using utilities from <BootstrapProvider />

import BootstrapProvider from '@bootstrap-styled/provider';
import Button from '@bootstrap-styled/v4/lib/Button';

const myTheme = {
 '$blue': '#007bff';
 '$indigo': '#6610f2';
 '$purple': '#6f42c1';
 '$pink': '#e83e8c';
 '$red': '#dc3545';
 '$orange': '#fd7e14';
 '$yellow': '#ffc107';
 '$green': '#28a745';
 '$teal': '#20c997';
 '$cyan': '#17a2b8';
 '$white': '#fff';
 '$gray': '#6c757d';
 '$gray-dark': '#343a40';
 '$primary': '#007bff';
 '$secondary': '#6c757d';
 '$success': '#28a745';
 '$info': '#17a2b8';
 '$warning': '#ffc107';
 '$danger': '#dc3545';
 '$light': '#f8f9fa';
 '$dark': '#343a40';
};

const MyButton = (props) => <BootstrapProvider theme={myTheme}><Button {...props} className="bg-secondary text-primary" /></BoostrapProvider>;

Using styled-components

import styled from 'styled-components';
import BootstrapProvider from '@bootstrap-styled/v4/lib/provider/BootstrapProvider';
import Button from '@bootstrap-styled/v4/lib/Button';

const myTheme = {
 '$blue': '#007bff';
 '$indigo': '#6610f2';
 '$purple': '#6f42c1';
 '$pink': '#e83e8c';
 '$red': '#dc3545';
 '$orange': '#fd7e14';
 '$yellow': '#ffc107';
 '$green': '#28a745';
 '$teal': '#20c997';
 '$cyan': '#17a2b8';
 '$white': '#fff';
 '$gray': '#6c757d';
 '$gray-dark': '#343a40';
 '$primary': '#007bff';
 '$secondary': '#6c757d';
 '$success': '#28a745';
 '$info': '#17a2b8';
 '$warning': '#ffc107';
 '$danger': '#dc3545';
 '$light': '#f8f9fa';
 '$dark': '#343a40';
};

export default styled(Button)`
  ${(props) => `color: ${props.theme.$teal};`}
`;

[kohsei-ishihara]

I used BootsrapProvider and worked wrong.
Danger works good but others.

const myTheme = {
  '$blue': '#007bff',
  '$indigo': '#6610f2',
  '$purple': '#6f42c1',
  '$pink': '#e83e8c',
  '$red': '#dc3545',
  '$orange': '#fd7e14',
  '$yellow': '#ffc107',
  '$green': '#28a745',
  '$teal': '#20c997',
  '$cyan': '#17a2b8',
  '$white': '#fff',
  '$gray': '#6c757d',
  '$gray-dark': '#343a40',
  '$primary': '#007bff',
  '$secondary': '#6c757d',
  '$success': '#28a745',
  '$info': '#17a2b8',
  '$warning': '#ffc107',
  '$danger': '#dc3545',
  '$light': '#f8f9fa',
  '$dark': '#343a40'
}

<BootstrapProvider theme={myTheme}>

  <Button color="primary">test</Button>
  <Button color="primary" outline>test</Button>
  <Alert color="primary">test</Alert>

  <Button color="secondary">test</Button>
  <Button color="secondary" outline>test</Button>
  <Alert color="secondary">test</Alert>

  <Button color="success">test</Button>
  <Button color="success" outline>test</Button>
  <Alert color="success">test</Alert>

  <Button color="info">test</Button>
  <Button color="info" outline>test</Button>
  <Alert color="info">test</Alert>

  <Button color="warning">test</Button>
  <Button color="warning" outline>test</Button>
  <Alert color="warning">test</Alert>

  <Button color="danger">test</Button>
  <Button color="danger" outline>test</Button>
  <Alert color="danger">test</Alert>

  <Button color="light">test</Button>
  <Button color="light" outline>test</Button>
  <Alert color="light">test</Alert>

  <Button color="dark">test</Button>
  <Button color="dark" outline>test</Button>
  <Alert color="dark">test</Alert>

</BootstrapProvider>

[santaclauze]

Hi @kohsei-ishihara,

Unfortunately, when we started the lib the v4 was still in alpha.

We have begun the transition towards the actual v4 but we won't be able to release it yet.

[kopax]

@kohsei-ishihara I have implemented the v4.4.0 version of bootstrap utilities.

• We are disabling old behavior by default and enabling new behavior by default.
• Old schema is still required for v4 until old colors such as $brand-primary get removed within all components.
• v4.4.4 utilities require the new color schema so fixing $brand-primary won't update the bg colors of v4.4.0 utilities, you'll have to use the v4.4.0 color ($primary, etc....)
• Those changes have been published to @bootstrap-styled/[email protected].
• New themes variables are already available in @[email protected].
• If you want to revert to the old behaviors (it will be removed in a later future), just do:

import { theme } from 'bootstrap-styled';
import BootstrapProvider from '@bootstrap-styled/provider';

ReactDOM.render(
    <BootstrapProvider theme={theme} utils={{
          // v4.4.0 implementation: new behavior, it is now enabled by default
          screen: false,
          print: false,
          // v4.0.0 implementation: old behavior, now disabled by default, it will be removed in futur version
          align: true,
          background: true,
          border: true,
          display: true,
          flex: true,
          float: true,
          position: true,
          screenreaders: true,
          sizing: true,
          spacing: true,
          text: true,
          visibility: true,
    }}>
      <App />
    </BootstrapProvider>
  document.getElementById('app')
);

See https://github.com/bootstrap-styled/provider/pull/49/files and https://github.com/bootstrap-styled/provider/releases/tag/v2.0.0 for more details.

You can now use those colors schema. You might get warning if you use colors that are not supported by components props, so prefer the className variant until for now!

I leave the issue open until all v4 components get migrated.

Questions and remarks are welcomed.