Skip to content
This repository has been archived by the owner on Nov 29, 2023. It is now read-only.

Commit

Permalink
package: eject styled-components
Browse files Browse the repository at this point in the history
  • Loading branch information
arnemolland committed Mar 9, 2022
1 parent 0bf4570 commit 226770c
Show file tree
Hide file tree
Showing 4 changed files with 31 additions and 17 deletions.
9 changes: 5 additions & 4 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 4 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -49,10 +49,11 @@
"**/*.css"
],
"dependencies": {
"chroma-js": "^2.4.2",
"chroma-js": "^2.4.2"
},
"peerDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"styled-components": "^5.3.3"
"react-dom": "^17.0.2"
},
"devDependencies": {
"@mdx-js/loader": "^2.0.0",
Expand Down
31 changes: 21 additions & 10 deletions src/lib/providers/Ambiance.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,31 @@
import { ReactNode } from 'react'
import styled from 'styled-components'
import { CSSProperties, ReactNode } from 'react'
import { Ambiance, AmbianceConsumer } from './Ambiance'

export default {
title: 'Ambiance/Sample',
component: Ambiance
}

const ColorBox = styled.div<{ color?: string; size?: string }>`
background-color: ${(props) => props.color};
width: ${(props) => props.size};
height: ${(props) => props.size};
padding: 8px 16px;
border-radius: 6px;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
`
const ColorBox = ({
color,
size,
children
}: {
color?: string
size?: string
children?: ReactNode
}) => {
const style: CSSProperties = {
backgroundColor: color,
width: size,
height: size,
padding: '8px 16px',
borderRadius: '6px',
boxShadow: '0px 0px 4px rgba(0, 0, 0, 0.25)'
}

return <div style={style}>{children}</div>
}

const AmbientBox = ({
children,
Expand Down
1 change: 1 addition & 0 deletions src/lib/utils/index.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
export { getLuminance } from './getLuminance'
export { saturate } from './saturate'
export { pxToRem, remToPx, numberToPx, numberToRem } from './units'

0 comments on commit 226770c

Please sign in to comment.