wrong color on desktop

[hans2103]

trying to apply a change of color from breakpoint md using the following styling:

part of my components/Button.js

import React from "react";
import styled from "styled-components";
import breakpoint from "styled-components-breakpoint";

const StyledButtonAddRemove = styled(Button)`
  color: ${({ theme }) => theme.colors.type};
  background-color: ${({ theme }) => theme.colors.typeInverse};

  ${breakpoint("md")`
    color: ${({ theme }) => theme.colors.typeInverse};
    background-color: ${({ theme }) => theme.colors.type};
  `}
`;

part of my ./theme.js

const colors = {
  type: "hsl(0, 0%, 100%)",
  typeInverse: "hsl(0, 0%, 0%)"
};

After rendering I see the following in the my dev tools while inspecting desktop:

@media screen and (min-width: 48em)
.bDBudy {
    color: hsl(0,0%,0%)hsl(0,0%,100%);
}

while I was expecting to see:

@media screen and (min-width: 48em)
.bDBudy {
    color: hsl(0,0%,0%);
    background-color: hsl(0,0%,100%);
}

It does seem to work when I replace the reference to my them by hard coded colors:

import React from "react";
import styled from "styled-components";
import breakpoint from "styled-components-breakpoint";

const StyledButtonAddRemove = styled(Button)`
  color: ${({ theme }) => theme.colors.type};
  background-color: ${({ theme }) => theme.colors.typeInverse};

  ${breakpoint("md")`
    color: red;
    background-color: blue;
  `}
`;

this renders as

@media screen and (min-width: 48em)
.gzeeqj {
    color: red;
    background-color: blue;
}

ThemeProvider is added in App.js

I would like to be able to use the theme colors. How can I achieve this?

[profyt]

its bug, #26

[hans2103]

when bug is solved, this issue will be solved too.... I guess. therefor... closing this issue