-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
18 changed files
with
357 additions
and
104 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -51,6 +51,7 @@ const headings = { | |
const text = { | ||
base: { | ||
styles: { | ||
marginTop: 0, | ||
lineHeight: 1.45 | ||
} | ||
}, | ||
|
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
import { | ||
Paragraph, | ||
Strong, | ||
HR, | ||
H4, | ||
Doc, | ||
APIheading, | ||
ParamsTable | ||
} from '@components'; | ||
import { Syntax } from '../../components/Code/Syntax'; | ||
import { hexToRGB } from './example/hexToRGB'; | ||
|
||
export function HexToRGB() { | ||
return ( | ||
<Doc title="hexToRGB"> | ||
<HexToRGBContent /> | ||
</Doc> | ||
); | ||
} | ||
|
||
export function HexToRGBContent() { | ||
return ( | ||
<> | ||
<Paragraph> | ||
hexToRGB is simply a utility function that allows you to convert | ||
hexadecimal colour values to RGB. | ||
</Paragraph> | ||
|
||
<HR /> | ||
|
||
<APIheading name="hexToRGB" /> | ||
<Paragraph> | ||
Usage is straightforward, simply input the hexadecimal colour value you | ||
wish to convert. | ||
</Paragraph> | ||
|
||
<Syntax>{hexToRGB}</Syntax> | ||
|
||
<HR /> | ||
|
||
<H4>Parameters</H4> | ||
|
||
<Paragraph> | ||
The <Strong>hexToRGB</Strong> function only accepts a single argument. | ||
</Paragraph> | ||
|
||
<ParamsTable | ||
APIname={'base'} | ||
cells={[ | ||
{ | ||
name: 'hex', | ||
type: 'string', | ||
defaultValue: 'N/A', | ||
content: 'A string type hexidecimal colour value eg. #fdfdfd.' | ||
} | ||
]} | ||
/> | ||
</> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
export const hexToRGB = ` | ||
import { hexToRGB } from 'artifak'; | ||
import styled from 'styled-components'; | ||
// The function returns a string | ||
// const RGBvalue = hexToRGB('#FFF'); | ||
// console.log(RGBvalue) // logs string 'rgb(255, 255, 255)' | ||
const Badge = styled.div\` | ||
display: none; | ||
margin: 0 auto; | ||
width: 100%; | ||
color: \${hexToRGB('#FFF')}; | ||
\`; | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,68 @@ | ||
import { | ||
Paragraph, | ||
Strong, | ||
H4, | ||
ParamsTable, | ||
HR, | ||
Doc, | ||
APIheading | ||
} from '@components'; | ||
import { Syntax } from '../../components/Code/Syntax'; | ||
import { hexToRGBAusage } from './example/hexToRGBAusage'; | ||
|
||
export function HexToRGBA() { | ||
return ( | ||
<Doc title="hexToRGBA"> | ||
<HexToRGBAContent /> | ||
</Doc> | ||
); | ||
} | ||
|
||
export function HexToRGBAContent() { | ||
return ( | ||
<> | ||
<Paragraph> | ||
hexToRGBA is simply a utility function that allows you to convert | ||
hexadecimal colour values to RGBA. | ||
</Paragraph> | ||
|
||
<HR /> | ||
|
||
<APIheading name="hexToRGBA" /> | ||
<Paragraph> | ||
Usage is straightforward, simply input the hexadecimal colour value you | ||
wish to convert and provide an alpha value as well if you wish. | ||
</Paragraph> | ||
|
||
<Syntax>{hexToRGBAusage}</Syntax> | ||
|
||
<HR /> | ||
|
||
<H4>Parameters</H4> | ||
|
||
<Paragraph> | ||
The <Strong>hexToRGBA</Strong> function only accepts 2 arguments,{' '} | ||
<Strong>hex</Strong>, which is the hexadecimal colour value and{' '} | ||
<Strong>alpha</Strong>, which is the alpha value. | ||
</Paragraph> | ||
|
||
<ParamsTable | ||
APIname={'base'} | ||
cells={[ | ||
{ | ||
name: 'hex', | ||
type: 'string', | ||
defaultValue: 'N/A', | ||
content: 'A string type hexidecimal colour value eg. #fdfdfd.' | ||
}, | ||
{ | ||
name: 'alpha', | ||
type: 'number', | ||
defaultValue: '1', | ||
content: 'A numeric value between 0 and 1 eg. 0.75.' | ||
} | ||
]} | ||
/> | ||
</> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
export const hexToRGBAusage = ` | ||
import { hexToRGBA } from 'artifak'; | ||
import styled from 'styled-components'; | ||
// The function returns a string | ||
// const RGBvalue = hexToRGBA('#FFF', 0.5); | ||
// console.log(RGBvalue) // logs string 'rgba(255, 255, 255, 0.5)' | ||
// The 2nd parameter for alpha value is optional | ||
// const RGBvalue = hexToRGBA('#FFF'); | ||
// console.log(RGBvalue) // logs string 'rgba(255, 255, 255, 1)' | ||
const Badge = styled.div\` | ||
display: none; | ||
margin: 0 auto; | ||
width: 100%; | ||
color: \${hexToRGB('#FFF', 0.5)}; | ||
\`; | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
import { | ||
Paragraph, | ||
Strong, | ||
H4, | ||
ParamsTable, | ||
HR, | ||
Doc, | ||
APIheading | ||
} from '@components'; | ||
import { Syntax } from '../../components/Code/Syntax'; | ||
import { pxToEmUsage } from './example/pxToEmUsage'; | ||
|
||
export function PxToEm() { | ||
return ( | ||
<Doc title="pxToEm"> | ||
<PxToEmContent /> | ||
</Doc> | ||
); | ||
} | ||
|
||
export function PxToEmContent() { | ||
return ( | ||
<> | ||
<Paragraph> | ||
This utility function converts <Strong>PX</Strong> values to{' '} | ||
<Strong>EM</Strong> values. | ||
</Paragraph> | ||
|
||
<HR /> | ||
|
||
<APIheading name="pxToEm" /> | ||
<Paragraph> | ||
Simply include your desired px value to convert and a size to base it | ||
off of for the 2nd paramater. | ||
</Paragraph> | ||
|
||
<Syntax>{pxToEmUsage}</Syntax> | ||
|
||
<HR /> | ||
|
||
<H4>Parameters</H4> | ||
|
||
<Paragraph> | ||
The <Strong>pxToEm</Strong> function accepts 2 arguments. | ||
</Paragraph> | ||
|
||
<ParamsTable | ||
APIname={'base'} | ||
cells={[ | ||
{ | ||
name: 'size', | ||
type: 'string | number', | ||
defaultValue: 'N/A', | ||
content: 'A numeric or string type value eg. 16 or 16px.' | ||
}, | ||
{ | ||
name: 'baseSize', | ||
type: 'number', | ||
defaultValue: '16', | ||
content: 'The base or parent size you wish the sizing to adhere to.' | ||
} | ||
]} | ||
/> | ||
</> | ||
); | ||
} |
Oops, something went wrong.