@storybook/theming#styled JavaScript Examples

The following examples show how to use @storybook/theming#styled. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Usage.js    From storybook-documentation-primitives with MIT License 6 votes vote down vote up 
UsageItem = styled(Div)`
  display: flex;
  flex-direction: column;
  flex: 1 1 50%;
  margin: 0 16px;
  padding: 24px 32px 16px;
  background-color: #fafafa;
  border-top-style: solid;
  border-top-width: 5px;
`
Example #2
Source File: Swatch.js    From storybook-documentation-primitives with MIT License 5 votes vote down vote up 
Item = styled.div`
  padding: 0 8px;
  margin: 0 0 16px;
`
Example #3
Source File: panel.js    From virtuoso-design-system with MIT License 5 votes vote down vote up 
Iframe = styled.iframe({
  width: '100%',
  height: '100%',
  border: '0 none',
})
Example #4
Source File: Var.js    From storybook-documentation-primitives with MIT License 5 votes vote down vote up 
Code = styled(components.code)`
  cursor: ${({ noCopy }) => (noCopy ? 'auto' : 'pointer')};
`
Example #5
Source File: Usage.js    From storybook-documentation-primitives with MIT License 5 votes vote down vote up 
IncorrectTitle = styled(H4)`
  color: red;
`
Example #6
Source File: Usage.js    From storybook-documentation-primitives with MIT License 5 votes vote down vote up 
CorrectTitle = styled(H4)`
  color: green;
`
Example #7
Source File: Usage.js    From storybook-documentation-primitives with MIT License 5 votes vote down vote up 
IncorrectItem = styled(UsageItem)`
  border-top-color: red;
`
Example #8
Source File: Usage.js    From storybook-documentation-primitives with MIT License 5 votes vote down vote up 
CorrectItem = styled(UsageItem)`
  border-top-color: green;
`
Example #9
Source File: Usage.js    From storybook-documentation-primitives with MIT License 5 votes vote down vote up 
Container = styled.div`
  display: flex;
  margin: 0 -16px;

  & + & {
    margin-top: 32px;
  }
`
Example #10
Source File: Swatch.js    From storybook-documentation-primitives with MIT License 5 votes vote down vote up 
Name = styled.p(withReset, ({ theme }) => ({
  fontSize: theme.typography.size.s2,
  fontWeight: theme.typography.weight.bold,
  lineHeight: '24px',
  color: theme.color.defaultText,
}))
Example #11
Source File: Swatch.js    From storybook-documentation-primitives with MIT License 5 votes vote down vote up 
Color = styled.div(withReset, ({ value }) => ({
  width: 128,
  height: 128,
  marginBottom: 4,
  borderRadius: 4,
  border: '1px solid #0000001a',
  backgroundColor: value,
}))
Example #12
Source File: EditLink.js    From storybook-documentation-primitives with MIT License 5 votes vote down vote up 
Link = styled(components.a)`
  display: flex;
  align-items: center;
  cursor: pointer;
`
Example #13
Source File: Swatch.js    From storybook-documentation-primitives with MIT License 5 votes vote down vote up 
ContainerItems = styled.div`
  display: flex;
  flex-wrap: wrap;
  margin: 0 -8px;
`
Example #14
Source File: Swatch.js    From storybook-documentation-primitives with MIT License 5 votes vote down vote up 
Container = styled.div`
  & + & {
    margin-top: 32px;
  }
`
Example #15
Source File: SpacingScale.js    From storybook-documentation-primitives with MIT License 5 votes vote down vote up 
StyledTile = styled.div`
  width: ${({ value, unit }) => widthWithUnit(value, unit)};
  height: ${({ square, value, unit }) =>
    square ? widthWithUnit(value, unit) : '10px'};
  background-color: ${(props) => props.color};
`
Example #16
Source File: SpacingScale.js    From storybook-documentation-primitives with MIT License 5 votes vote down vote up 
Cell = styled.td`
  width: 150px;
`
Example #17
Source File: SpacingScale.js    From storybook-documentation-primitives with MIT License 5 votes vote down vote up 
Table = styled(components.table)`
  width: 100%;
`
Example #18
Source File: Panel.js    From storybook-documentation-primitives with MIT License 5 votes vote down vote up 
WarningPanel = styled(StyledPanel)`
  background-color: #fffae6;
  border-color: #fbc02d;
`
Example #19
Source File: Panel.js    From storybook-documentation-primitives with MIT License 5 votes vote down vote up 
InfoPanel = styled(StyledPanel)`
  background-color: #e8f4fd;
  border-color: #2196f3;
`
Example #20
Source File: Panel.js    From storybook-documentation-primitives with MIT License 5 votes vote down vote up 
StyledPanel = styled(Panel)`
  padding: 0 24px;
  border: 1px solid #0000;
  border-left-width: 5px;
`
Example #21
Source File: EditLink.js    From storybook-documentation-primitives with MIT License 5 votes vote down vote up 
Text = styled.span`
  margin-left: 0.4em;
`