styled-components / xstyled Goto Github PK
View Code? Open in Web Editor NEWA utility-first CSS-in-JS framework built for React. π π©βπ€β‘οΈ
Home Page: https://xstyled.dev
License: MIT License
A utility-first CSS-in-JS framework built for React. π π©βπ€β‘οΈ
Home Page: https://xstyled.dev
License: MIT License
Hi, great library π , I have a
Instead of this:
background-color: primary; /* βΆ theme.colors.primary */
margin: 2; /* βΆ theme.space.2 */
maybe do this
background-color: $primary; /* βΆ theme.colors.primary */
margin: $2; /* βΆ theme.space.2 */
Pros:
Cons:
Component class names are not using display names. They look like this:
<div class="sc-bdVaJa cyWyZX">
Something
</div>
Here are my dependencies:
Previously without xstyled, I would get this class name in my styled components:
<div class="ComponentDisplayName_Text-sc-bdVaJa cyWyZX">
Something
</div>
Hi, I liked xstyled so much and wanted to explore it more with a simple Gatsby project, but I have a problem, when I create a global style and include it to layout component all the styles for the styled components are disappearing even sometimes browser stops working.
here is repo with which I'm having this problem - https://github.com/byurhanbeyzat/gatsby-xstyled
System:
OS: macOS High Sierra 10.13.6
Binaries:
Node: 10.15.0
Yarn: 1.16.0
Browsers:
Chrome: 74.0.3729.169
Safari: 12.1.1
npmPackages:
"@xstyled/styled-components": "^1.2.0",
"babel-plugin-styled-components": "^1.10.0",
"gatsby": "^2.8.6",
"gatsby-plugin-styled-components": "^3.0.7",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"styled-components": "^4.3.1"
I'm using the color mode and some utilities from polished, for example rgba. This helper needs a raw color as an argument, not a custom CSS property. When the color mode is active the colors are replaced with CSS custom properties.
I found the __rawColors object in the theme but when I change the mode this object always has the original colors.
Activate the color mode and try to access to raw colors through the props.theme.__rawColors and change the color mode.
Maybe we need a way to access current raw colors, can be a new object in the theme, also can be a new param in the th getter.
https://codesandbox.io/s/react-example-k7fbm
npx envinfo --system --binaries --npmPackages @xstyled/system,@xstyled/styled-components,styled-components --markdown --clipboard
Paste the results here:
## System:
- OS: Linux 4.15 Ubuntu 18.04.4 LTS (Bionic Beaver)
- CPU: (6) x64 Intel(R) Core(TM) i5-8400 CPU @ 2.80GHz
- Memory: 7.66 GB / 15.53 GB
- Container: Yes
- Shell: 5.4.2 - /usr/bin/zsh
## Binaries:
- Node: 12.14.1 - /usr/local/bin/node
- Yarn: 1.21.1 - /usr/bin/yarn
- npm: 6.13.7 - /usr/local/bin/npm
## npmPackages:
- @xstyled/styled-components: ^1.16.0 => 1.16.0
- @xstyled/system: ^1.16.0 => 1.16.0
- styled-components: ^5.0.1 => 5.0.1
Styled-components
allow you to set default props for a component using .attrs()
method.
Right now, after migrating to xstyled wrapper I was had to rewrite all my components like e.g.
const PasswordInput = styled(Component).attrs({ type: 'password' })``
to
const PasswordInput = styled(Component)``
PasswordInput.attrs = [{ type: 'password' }]
You'll get Object(...)(...).attrs is not a function
It should work in the same way as it proposed in a documentation of a styled-components
package
https://codesandbox.io/s/festive-dhawan-rn2yw?fontsize=14 (you'll have to download the code and run on your local machine, cuz codesandbox have some troubles with your package while it's perfectly working on a local server)
Paste the results here:
npx: installed 1 in 2.141s
*** Clipboard option removed - use clipboardy or clipboard-cli directly ***
## System:
- OS: macOS 10.14.4
- CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
- Memory: 58.19 MB / 16.00 GB
- Shell: 5.3 - /bin/zsh
## Binaries:
- Node: 11.13.0 - ~/.nenv/shims/node
- Yarn: 1.15.2 - /usr/local/bin/yarn
- npm: 6.7.0 - ~/.nenv/shims/npm
## npmPackages:
- @xstyled/styled-components: 1.0.1 => 1.0.1
- styled-components: 4.2.0 => 4.2.0
Will this project be updated to use emotion v11? They already have a fix in it for #77 see emotion-js/emotion#1220 as well as improved typings for Theme
I'm working on a UI library that won't be out for a while so I'm working with v11 that should be out in less than a month, it would be nice to use xstyled alongside it but they've also renamed a lot of the packages so it won't work at the moment
Replace confusing terms for breakpoints functions in documentation
Actually, description for up
and down
utils is switched
How will you handle prop types?
I'm using docz to generate a documentation for my component library and I'd like to know if there's a way to expose/list the props that can be used for the Box component.
Hi,
I am new to styled-components, and xstyled. So far, I am enjoying the possibilities of using such tools. But I was wondering if there is a way to add custom styles to an element (kind of in-line styles)
For example, I have the following code.
const theme = {
tables: {
default: css`
color: red;
`,
primary: css`
color: pink;
`,
secondary: css`
color: purple;
`
}
}
const variants = variant({
// Variants are found in `theme.tables`
key: 'tables',
default: 'default'
})
const StyledTable = styled.table`
${system}
${variants}
`
This code works well, when using the styles from the theme. For example:
<StyledTable variant="primary>
// Table code ...
</StyledTable>
But what if I want to add specific style just for this specific element, is it possible?
Something like:
<StyledTable variant="primary css={css`width: 100%;`}>
// Table code ...
</StyledTable>
PS: I tried searching online and tried different ways, like style prop, className prop, and adding it as a variant with a function but could not make it work. Sorry if this is a dumb question.
Thanks
I am trying to utilize variants for things like buttons and I am also trying to add a custom prop like buttonType
in place of the default variant
. I am still seeing them being passed directly to the html markup no matter how I construct the component. I have tried using the createSystemComponent
method to avoid passing the props through but I still see the variant props passed directly to the html.
Steps to reproduce the behavior:
I put together a code sandbox that illustrates this but essentially any project utilizing variants should see the html with a variant
attribute or with whatever you custom attribute was still on the element.
I would expect this prop to not be passed to the html element
https://codesandbox.io/embed/affectionate-khayyam-zv2xl
Issues without a reproduction link are likely to stall.
npx envinfo --system --binaries --npmPackages @xstyled/system,@xstyled/styled-components,styled-components --markdown --clipboard
Paste the results here:
## System:
- OS: macOS Mojave 10.14.6
- CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
- Memory: 1.11 GB / 16.00 GB
- Shell: 5.3 - /bin/zsh
## Binaries:
- Node: 12.8.1 - ~/.nvm/versions/node/v12.8.1/bin/node
- Yarn: 1.17.3 - ~/.nvm/versions/node/v12.8.1/bin/yarn
- npm: 6.10.2 - ~/.nvm/versions/node/v12.8.1/bin/npm
- Watchman: 4.9.0 - /usr/local/bin/watchman
Hello there,
please, I have a specific case, where I need to get theme value inside component, like this:
const Component = (props) => {
const primaryColor = th.color(βprimaryβ, props)
...
But this doesnt work, because th helper is intended to be used inside styled-components.
I note that this component is under xstyled context provider.
How to do this?
Update styled-components
to V5 :)
https://github.com/styled-components/styled-components/releases/tag/v5.0.0
in styled-system you can do extend variant inside your template
{
heading: {
fontSize: 1,
color: 'heading',
marginBottom: 4,
},
h1: {
variant: 'heading',
font-size: 3;
},
}
Is it possible something similar with xstyled?
I understand that you need to use css.
{
heading: css`
font-size: 1;
color: heading;
margin-bottom: 4;
`,
h1: css`
variant: heading;
or
${variant('heading')}
font-size: 3;
},
}
It would be very nice to have this feature.
This is a question in regards to the functionality around the overflow
property.
I have been using xstyled on a project that needs to support Chrome, Firefox, Edge, Safari, and their mobile equivalents. I recently had a very odd style regression when testing Safari and was able to debug it down to the fact the the overflow
property was not being displayed correctly. I Chrome and Firefox were fine but in Edge and Safari it just disappeared. When I went digging for answers I found that the multiple overflow: x y
syntax is still not supported in all browsers.
My question is should this project support the splitting of that property into overflow-x
and overflow-y
by default so that it supports all browsers?
createGlobalStyle
components are unable to use themes.
import { ThemeProvider, createGlobalStyle } from '@xstyled/styled-components';
const theme = {
colors: {
background: '#000',
}
}
const GlobalStyle = createGlobalStyle`
body {
background-color: background; // Does not work, generates CSS: `background-color: background` instead of #000
}
`
<ThemeProvider theme={theme}>
<>
<GlobalStyle />
<App />
</>
</ThemeProvider>
I have that error with importing module "__DO_NOT_USE_OR_YOU_WILL_BE_HAUNTED_BY_SPOOKY_GHOSTS" from styled-components
During building in Next.js when i run "yarn dev"
Normal dev run in Next.js
https://codesandbox.io/s/ssbed
npx envinfo --system --binaries --npmPackages @xstyled/system,@xstyled/styled-components,styled-components --markdown --clipboard
Paste the results here:
## System:
- OS: Linux 4.19 Debian GNU/Linux 9 (stretch) 9 (stretch)
- CPU: (8) x64 Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz
- Memory: 5.59 GB / 62.70 GB
- Container: Yes
- Shell: 4.4.12 - /bin/bash
## Binaries:
- Node: 10.16.0 - /usr/local/bin/node
- Yarn: 1.16.0 - /usr/local/bin/yarn
- npm: 6.9.0 - /usr/local/bin/npm
## npmPackages:
- @xstyled/styled-components: 1.7.0 => 1.7.0
- @xstyled/system: 1.7.0 => 1.7.0
- styled-components: 5.0.0-beta.6-ej4 => 5.0.0-beta.6-ej4
export const space = [0.8, 1, 2, 3, 4]
space.xs = space[0] / 2 + 'em'
space.small = space[0] + 'em'
space.medium = space[2] + 'em'
space.large = space[4] + 'em'
const StyleComp = styled.div`
margin: 0 0 0 large;
`
Undesired output:
margin: 0.8px 0.8px 0.8px 4em;
Expected output:
margin: 0 0 0 4em;
I do understand the difficulty in this mixed input, where one would want 0
a real value and not place [0] in the theme "space" array. Are you planning to address this?
It's very annoying to specifically write it in 2 lines:
const StyleComp = styled.div`
margin: 0;
margin-left: large;
`
I am trying to figure out if I am doing something wrong when trying to create a styled version the react-router-dom
Link component. I simply passed it into the styled
method like styled(Link)
to create an extensible Link but I am currently getting a few errors in the console like:
React does not recognize the
backgroundColor prop on a DOM element.
The backgroundcolor
prop lives directly on the anchor tag and I am trying to figure out how to get around this.
I'd like to do:
height: 3 - 1px; // which becomes 8px - 1px = 7px
where the theme spec:
const theme = {
sizes: [0, 2, 4, 8]
}
The above doesn't seem to work (CSS rendered is height: 3 - 1px
).
What's the best way to achieve this?
I also tried getting the value using th
but it doesn't seem to work with arrays:
import { th } from '@xstyled/system'
th.sizes('[3]') // doesn't work. Also tried 3, '3', [3].
I FIGURED IT OUT:
Instead of th.sizes
, it is th.size
, so this works
import { th } from '@xstyled/system'
const someCss = css`
height: calc(${th.size(3)} - 1px)
`
Hi :)
I cannot use this library with a basic TypeScript CRA.
npx create-react-app my-app --typescript
npm i @xstyled/styled-components
import styled from "@xstyled/styled-components"
const Toggle = styled.div`
border: 1 violet;
width: 16;
height: 16;
`
export default Toggle
npm start
Failed compilation:
Failed to compile.
./node_modules/@xstyled/styled-components/dist/xstyled.es.js
Module not found: Can't resolve 'styled-components' in '/home/jeahel/dev/devtracker/node_modules/@xstyled/styled-components/dist'
Will you plan to provide type definitions for this library?
Hi, it would seem I cannot import the macro version of styled-components:
https://www.styled-components.com/docs/tooling#babel-macro
import styled from '@xstyled/styled-components/macro';
Failed to compile.
Error: Cannot find module '@xstyled/styled-components/macro'
Thought trying also importing from @xstyled/macro
but no luck.
Importing directly from styled-components does work well:
import styled from 'styled-components/macro';
We have an app based on create-react-app, not ejected, and not using rewire, because CRA supports babel macros, and I wish to utilize that ability to be able to use the babel-plugin-styled-components
plugin.
I need this so my styled-components will be generated with a real display name, to be able to access components in enzyme unit tests.
Not sure if this is currently supported at all, but it would be pretty great!
Using more than one theme value in the border-radius shorthand property is not supported
Using border-top-right-radius, border---radius does'nt allow theme values or integers without units
β
border-radius: 10
compiles to border-radius: 10px
β
border-radius: md
compiles to border-radius: 10px
(if theme.radii.md = 10
)
β
border-radius: 5px 10px 2px 0px
compiles to border-radius: 5px 10px 2px 0px
β οΈ border-radius: md sm
compiles to border-radius: md sm
β οΈ border-radius: 10 5
compiles to border-radius: 10 5
β οΈ border-top-right-radius: md
compiles to border-top-right-radius: md
β οΈ border-top-right-radius: 10
compiles to border-top-right-radius: 10
border-radius: md sm
should compile to border-radius: 10px 5px
border-radius: 10 5
should compile to border-radius: 10px 5px
border-radius: 0.5 0.8
should compile to border-radius: 50% 80%
border-top-right-radius: md
should compile to border-top-right-radius: 10px
border-top-right-radius: 10
should compile to border-top-right-radius: 10px
etc...
https://github.com/WTTJ/welcome-ui/blob/master/src/components/RadioTab/styles.js#L56
Issues without a reproduction link are likely to stall.
npx envinfo --system --binaries --npmPackages @xstyled/system,@xstyled/styled-components,styled-components --markdown --clipboard
Paste the results here:
## System:
- OS: Linux 4.18 Ubuntu 18.04.2 LTS (Bionic Beaver)
- CPU: (4) x64 Intel(R) Xeon(R) Platinum 8175M CPU @ 2.50GHz
- Memory: 12.66 GB / 15.48 GB
- Container: Yes
- Shell: 3.0.2 - /usr/bin/fish
## Binaries:
- Node: 10.15.1 - ~/.asdf/installs/nodejs/10.15.1/bin/node
- Yarn: 1.13.0 - ~/.asdf/installs/nodejs/10.15.1/.npm/bin/yarn
- npm: 6.4.1 - ~/.asdf/installs/nodejs/10.15.1/bin/npm
Hi Man.
Few months ago I have started to work with rebass and styled-system and I found a lot of things which are not great and started to thinking about own package. During search I found this library and you covered almost everything.
I wanted just tell you thank you for this great small library :) I have started to use it in my project.
Feel free to close this ticket :-D
Hey, may I know why the README says:
npm install @xstyled/styled-components styled-components
Why is styled-components
is in this command if it's already included in this repo's package.json?
It will be installed automatically
Prop-types documentation page shows getUtilityPropTypes`` instead of
getSystemPropTypes` as per https://github.com/smooth-code/xstyled/blob/master/packages/prop-types/src/index.js#L3
Steps to reproduce the behavior:
Check https://github.com/smooth-code/xstyled/blob/master/packages/prop-types/src/index.js#L3
getUtilityPropTypes
should be referenced
Hi!
I was wondering if there is support for multi-dimensional theming, as in having one theme that manages colors, one that manages sizes, one that manages typography, etc. and combining them all under one provider.
Currently, adding a negative value is not supported.
It feels natural to write negative values without increasing your theme with negative doublons
margin-bottom: -md
is not supported you have to use margin-bottom: -${th.space('md')}
OR
if you want to be able to make it work, you have to create negative theme values like this :
const theme.space = { '-md': -5 }
Your library is awesome and should allow this.
Hi,
I'm wondering what is the best option to compose typographic styles based on theme values.
For example, I'd like to create a theme object like this :
fontSizes: ["12rpx", "24rpx", "34rpx"],
fontWeight: [100, 500, 800],
colors: {
primary: "#49bd17"
},
typographies: {
title: {
fontSize: 1,
fontWeight: 2
},
label: {
fontSize: 0,
fontWeight: 1
},
...
}
and using it in my styled component :
const Button = styled.button`
background: transparent;
${typographies.label}
`;
Is there a way to achieve this?
This feature is little bit connected with #69
Here is small example
const Test = styled(Box)`
${variant({
key: 'container',
default: 'md',
prop: 'size',
}))
`;
Theme
....
sizes: {
sm: 540,
md: 720,
lg: 960,
xl: 1140,
xs: 30,
},
container: {
sm: css`
width: 320px;
`
}
...
When you render It will render with size property but also it will try to use size property inside Box and it will create another css and override width 320px with width: 540 and height 540px as well.
Can you remove property when it is used as variant and do not forward it to extended component?
My theme code follows the standards:
const baseColors = {
grays: ['#9B9B9B', '#DEE2E5', '#EFF0F4', '#F7F8FA'],
reds: ['#D30C2B', '#EF3920'],
blues: ['#2C304C', '#1A395C', '#6782A4'],
}
const colors : {
...baseColors,
primary: baseColors.reds[0],
secondary: baseColors.blues[1]
}
// ...more code...
export default {
colors,
fontSizes,
fontWeights,
shadows,
space,
radii,
}
I would like to access a specific "blue" color from xstyled:
import styled from '@xstyled/styled-components'
const MyComp = styled.div`
background: grays[3]; // <- xStyled should parse this as: theme.colors.grays[3]
`
I cannot possibly give alias names to all my color, in reality I have many and naming them will be more confusing than accessing an Array index, since colors arrays are sorted by darker to lighter, and it's obvious to developers in the team which gray
is lighter or darker by using an index, instead of creating alias names such as:
const colors : {
...baseColors,
primary: baseColors.reds[0],
secondary: baseColors.blues[1],
gray1: baseColors.grays[1], // <- I don't want to make these only for xStyled
gray2: baseColors.grays[2],
gray3: baseColors.grays[3],
}
Hey! I've been a long-time user of styled-components and thought I'd give xstyled a try since I could totally relate and understand the motivation behind it!
But regarding the topic of this issue, would it be possible to import styled-components/styled-system's preexisting type library? And if not, are there future plans to add types?
Anyways, I really appreciate your work on this library!
When using a transformer, if the value comes from the theme, it isn't resolved.
theme.colors.primary = "#1975f8"
styled.div`
background-color: green.light (this works)
background-color: primary.light (this doesn't)
`
The theme color is resolved before getting to the transformer.
Could be an issue with the regex used to get the css value? Maybe it tries to find primary.light
in the theme?
https://codesandbox.io/embed/vigilant-edison-ofh4t?fontsize=14
Issues without a reproduction link are likely to stall.
## System:
- OS: macOS 10.14.5
- CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
- Memory: 670.15 MB / 16.00 GB
- Shell: 5.3 - /bin/zsh
## Binaries:
- Node: 12.6.0 - /usr/local/bin/node
- Yarn: 1.12.3 - /usr/local/bin/yarn
- npm: 6.10.3 - ~/Desktop/ui-trial/node_modules/.bin/npm
- Watchman: 4.9.0 - /usr/local/bin/watchman
## npmPackages:
- @xstyled/styled-components: ^1.8.4 => 1.8.4
- @xstyled/system: ^1.8.4 => 1.8.4
- styled-components: ^4.3.2 => 4.3.2
When i add a left, right... on a box with system positioning, i can't get the space from theme.
const Box = styled.div`
${positioning};
`
<Box position="absolute" left="sm" top="sm" />
Get the space.sm
from theme.
## System:
- OS: macOS 10.15.3
- CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
- Memory: 48.82 MB / 8.00 GB
- Shell: 3.2.57 - /bin/bash
## Binaries:
- Node: 12.4.0 - ~/.asdf/installs/nodejs/12.4.0/bin/node
- Yarn: 1.19.1 - ~/.asdf/installs/nodejs/12.4.0/.npm/bin/yarn
- npm: 6.9.0 - ~/.asdf/installs/nodejs/12.4.0/bin/npm
- Watchman: 4.9.0 - /usr/local/bin/watchman
## npmPackages:
- @xstyled/styled-components: ^1.15.1 => 1.15.1
- @xstyled/system: ^1.15.1 => 1.15.1
- styled-components: ^4.0.0 || ^5.0.0 => 5.0.0
What about CSS prop for Styled Components? There is Babel preset for the Emption but there is nothing I could find for the Styled Components to support it.
Use bg
as an alias of background
bg
is shorteer than background
and easier to transition from styled-system
that already implements it
function App() {
return (
<Box bg='red'>
</Box>
)
}
Faster development and less code
Add support for the fontStyle
style prop.
I need this to close an issue in the design system I work on.
<Box fontStyle="italic" />
I would really like to have a deeply nested theme object such as:
const theme = {
colors: {
primary: 'blue',
text: '#000',
background: '#fff',
variants: {
primary: {
light: 'lightblue',
dark: 'darkblue'
}
}
}
const StyledDiv = styled.div`
border-color: primary;
background-color: variants.primary.dark;
`
The theme is just simplified and could be flattened, but in my use case it would be a messy if the object is flattened, e.g. I want to have values like colors.variants.state.error.dark
It doesn't seem like there's a way to do this, is there?
fill
is actually not supported, it should be.
When using the included media query utilities the css template literal did not work when using @xstyled/emotion
for example
${up(
'md',
css`
height: 300px;
`,
)}
shown here in the docs would result in a style tag to be placed on the media query. I believe this is because the breakpoint function doesn't reduce the second property to an object take a look here. I've attempted to circumvent this by creating
theme/media.js
which allows me to do
const Wrapper = styled(Box)`
${up('sm')} {
position: relative;
flex-wrap: nowrap;
height: 200px;
margin-bottom: 5;
background: white;
border-color: transparent;
box-shadow: 25;
}
&:last-of-type {
${up('sm')} {
div {
background-color: backgroundDark;
}
}
}
Use a css template literal as a value to any export from breakpoints.js
The functions should handle the css template literal
## System:
- OS: Linux 5.1 Arch Linux undefined
- CPU: (8) x64 AMD Ryzen 5 1500X Quad-Core Processor
- Memory: 1.14 GB / 15.68 GB
- Container: Yes
- Shell: 3.0.2 - /usr/bin/fish
## Binaries:
- Node: 11.15.0 - /usr/bin/node
- Yarn: 1.16.0 - /usr/bin/yarn
- npm: 6.9.0 - /usr/bin/npm
## npmPackages:
- @xstyled/system: ^1.5.0 => 1.5.0
Would be possible to use this project with react-native?. I tried, but I get this error:
scStyled__default.div is not a function
I could see under Box.js it's using a div. (https://github.com/smooth-code/xstyled/blob/master/packages/styled-components/src/Box.js#L4)
Makes sense to create another package to support react-native projects? what do you think? I can try to help
Hi!
For context, I'm coming from ThemeUI which is based at the core on Emotion. On ThemeUI I can do like this:
<h2
css={{
fontSize: ["2.1rem", "2.4rem"],
})}
>
I'm trying to use responsive styles with the Emotion's css
prop but I can't make it work.
I tried the breakpoints
function from @xstyled/system
, also tried the following:
<h2
css={{
fontSize: { sm: "2.1rem", md: "2.4rem" },
})}
>
but doesn't seem to work.
Is there a way of doing this or it's simply a missing feature?
Thanks!
Hi,
I'm trying to make xstyled work within a Styled-Components-v3.4.0-based app, but it seems it needs some v4 stuff to work properly :
export 'createGlobalStyle' (imported as 'createGlobalStyle$1') was not found in 'styled-components'
Should I migrate to v4 for best results ?
Im trying to use components as selector with emotion the following error is showing up
Component selectors can only be used in conjunction with babel-plugin-emotion.
I'm using the xstlyed babel preset, it seems to be working since in the compiled code it's fixing the jsx
stuffs
return (0, _emotion.jsx)(StyledComponent, props);
The thing is when I try to use components as selector.
My babel config is
const paths = require('./config/paths')
module.exports = api => {
api.cache(false)
return {
presets: [
[
'@babel/preset-env',
{
targets: { esmodules: true },
},
],
'@babel/preset-react',
'@xstyled/babel-preset-emotion-css-prop',
],
plugins: [
'@babel/plugin-transform-runtime',
'@babel/plugin-proposal-object-rest-spread',
'@babel/plugin-proposal-class-properties',
'@babel/plugin-proposal-optional-chaining',
[
'module-resolver',
{ root: [paths.src, 'node_modules'] },
],
],
}
}
Also important to mention that I'm running the code in the storybook 5.2.6
What could be wrong?
I'd like to be able to modify colors (adjust alpha, hue, saturation) with the help of polished js:
import styled from '@xstyled/styled-components'
import { th } from '@xstyled/system'
import { rgba } from 'polished'
const theme = {
colors: {
black: '#000'
}
}
const Box = styled.div`
color: ${rgba(th.colors('black'), 0.5)};
`
I have theme with several solid colors but must apply various alpha values for box shadows, shades, etc. Opacity is not useable because it would reduce the opacity of the text within the element as well as the background color.
Flexible color manipulation is crucial to allow users to continue using the colors specified in the sytem without having to create hardcode duplicate colors each time they want to create a variant color.
Custom Transformers in theme are not respected when styling from the css prop
https://codesandbox.io/s/fervent-worker-q4y50
css prop should use transformers from the theme
From the example of the home page it is unclean which unit types are used for things like padding, margin, & font-size (which isn't shown in the demo)
While the theme page provides a very shallow explanation to what's shown on the home page (I think it should explicitly write on the home page which units are used) the theme page does not explain how to use other unit types, such as em
or rem
.
For margins or paddings, should this:
space: [0, 1, 2]
become this?
space: [0, "1em", "1em"]
Thanks!
Hi again, it's me, the person who is addicted to xStyled and asks many questions.
I see this example here:
function Example() {
const theme = useTheme()
return <div style={{ color: theme.colors.primary }}>Primary</div>
}
and this example here:
import { th } from '@xstyled/system'
const Container = styled.div`
color: ${th('colors.primary')}; /* Read the primary color from the theme */
`
My question is: what use-cases does useTheme()
that th
doesn't?
Why is the theme in a hook? Themes cannot and should not change (while the app is running) so they don't have a state, so why is it in a hook-format?
You already have them, only different is that you also have to initialize the custom hook in order to use it, where on the other hand you can use th
directly after importing, and both point to the exact same "theme" (as I understand it)
I also understand that one would want to use any of those only if the whole Application is not wrapper with a ThemeProvider
that passes the theme
prop to all components...
Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.