- {(this.props.headerButtons || this.props.title || this.props.titleColSize || this.props.subtitle || this.props.delimiter || this.props.titleClassName) && (
-
+ {(this.props.rightHeader || this.props.title || this.props.icon) && (
+
- {this.props.title && (
- {this.props.title}
- )}
- {this.props.subtitle && (
- {this.props.subtitle}
- )}
+
+ {this.props.icon && (
+
+
+
+ )}
+ {this.props.title ? this.props.title : undefined}
+
- {this.props.children && (
+ {this.props.rightHeader && (
-
- {this.props.headerButtons}
-
+ {this.props.rightHeader}
)}
@@ -64,7 +48,7 @@ export default class Box extends React.Component
{
{this.props.children && (
{this.props.children}
-
+
)}
)
diff --git a/src/dzeio/Button/Button.stories.tsx b/src/dzeio/Button/Button.stories.tsx
index 107b8b2..cf76433 100644
--- a/src/dzeio/Button/Button.stories.tsx
+++ b/src/dzeio/Button/Button.stories.tsx
@@ -13,7 +13,6 @@ Basic.args = {
nomargintop: true,
icon: Zap,
size: 'small',
- href: '/pouet',
block: true
}
@@ -22,7 +21,6 @@ WithImg.args = {
nomargintop: true,
icon: '/16-16.svg',
size: 'small',
- href: '/pouet',
block: true
}
diff --git a/src/dzeio/Checkbox/Checkbox.module.styl b/src/dzeio/Checkbox/Checkbox.module.styl
index dba7763..7995eec 100644
--- a/src/dzeio/Checkbox/Checkbox.module.styl
+++ b/src/dzeio/Checkbox/Checkbox.module.styl
@@ -12,7 +12,7 @@ $backColor = #757575
margin-top 8px
p
- margin-left 8px
+ margin-left 4px
span
top 0
@@ -20,12 +20,11 @@ $backColor = #757575
width 20px
height @width
position relative
- box-shadow inset 0 0 0 2px $grayDark
- border-radius 2px
- transition all $transition
-
+ box-shadow inset 0 0 0 2px $darkGrayLight
@media (prefers-color-scheme dark)
- box-shadow inset 0 0 0 2px $grayLight
+ box-shadow inset 0 0 0 2px $darkGrayDark
+ border-radius 4px
+ transition all $transition
&::after
border-radius 20px
@@ -47,8 +46,11 @@ $backColor = #757575
opacity 0
&:checked + span
- background rgba($main, .5)
- box-shadow inset 0 0 0 2px $main
+ background $infoLight
+ box-shadow inset 0 0 0 2px $infoLight
+ @media (prefers-color-scheme dark)
+ box-shadow inset 0 0 0 2px $infoDark
+ background $infoDark
svg
color white
@@ -57,9 +59,9 @@ $backColor = #757575
&:hover
span
- box-shadow inset 0 0 0 2px black
+ box-shadow inset 0 0 0 2px $infoLight
@media (prefers-color-scheme dark)
- box-shadow inset 0 0 0 2px white
+ box-shadow inset 0 0 0 2px $infoDark
.radio
span
@@ -78,28 +80,35 @@ $backColor = #757575
background white
.switch
- padding 2px 0 2px 10px // 2px base padding 10px circle padding
+ padding 0 0 0 10px // 2px base padding 10px circle padding
- &:hover span::after
- background black
+ &:hover span
+ box-shadow none
+ &::after
+ background $darkGrayLight
@media (prefers-color-scheme dark)
- background white
+ background $darkGrayDark
span
- width 28px
+ width 24px
height 14px
border-radius 20px
top 50%
margin-right 10px
box-shadow none
- background rgba($backColor, .5)
+ background rgba($darkGrayLight, .3)
+ @media (prefers-color-scheme dark)
+ background rgba($darkGrayDark, .3)
+
&::after
content " "
top 50%
transform translate(-50%, -50%)
left 0
- background $backColor
+ background $darkGrayLight
+ @media (prefers-color-scheme dark)
+ background $darkGrayDark
width 20px
height @width
@@ -108,10 +117,17 @@ $backColor = #757575
width 20px
&:checked + span
+
+ box-shadow none
+ background rgba($infoLight, .3)
+ @media (prefers-color-scheme dark)
+ background rgba($infoDark, .3)
&::after
left 100%
transform translate(-50%, -50%)
- background $main
+ background $infoLight
+ @media (prefers-color-scheme dark)
+ background $infoDark
checkBox($color)
input:checked + span
diff --git a/src/dzeio/Code/Code.module.styl b/src/dzeio/Code/Code.module.styl
index 6b014bc..53151c2 100644
--- a/src/dzeio/Code/Code.module.styl
+++ b/src/dzeio/Code/Code.module.styl
@@ -1,7 +1,6 @@
.code
- font-family 'source code pro', monospace
background #E8EAF6
- padding 4px 8px
+ padding 4px
border-radius 8px
.pre
diff --git a/src/dzeio/Container/Container.module.styl b/src/dzeio/Container/Container.module.styl
index d2ccd01..8f4d70f 100644
--- a/src/dzeio/Container/Container.module.styl
+++ b/src/dzeio/Container/Container.module.styl
@@ -1,2 +1,5 @@
.container
- padding 16px
+ margin 48px auto
+ padding 0 16px
+ width 100%
+ max-width 1312px
diff --git a/src/dzeio/Fieldset/Fieldset.stories.tsx b/src/dzeio/Container/Container.stories.tsx
similarity index 61%
rename from src/dzeio/Fieldset/Fieldset.stories.tsx
rename to src/dzeio/Container/Container.stories.tsx
index 537e67a..aafd3be 100644
--- a/src/dzeio/Fieldset/Fieldset.stories.tsx
+++ b/src/dzeio/Container/Container.stories.tsx
@@ -1,16 +1,19 @@
import { Meta } from '@storybook/react/types-6-0'
import React from 'react'
import Component from '.'
-import Input from '../Input'
+import Text from '../Text'
export default {
- title: 'DZEIO/Fieldset',
+ title: 'DZEIO/Container',
component: Component,
argTypes: {
title: { control: 'text'}
+ },
+ parameters: {
+ layout: 'fullscreen'
}
} as Meta
export const Basic = (args: any) => (
-
+
Test
)
diff --git a/src/dzeio/Container/index.tsx b/src/dzeio/Container/index.tsx
index de793c8..647b9d3 100644
--- a/src/dzeio/Container/index.tsx
+++ b/src/dzeio/Container/index.tsx
@@ -11,9 +11,9 @@ interface Props {
export default class Container extends React.Component
{
public render = () => (
-
+
{this.props.children}
-
+
)
}
diff --git a/src/dzeio/Fieldset/Fieldset.module.styl b/src/dzeio/Fieldset/Fieldset.module.styl
deleted file mode 100644
index 3f0c7e6..0000000
--- a/src/dzeio/Fieldset/Fieldset.module.styl
+++ /dev/null
@@ -1,19 +0,0 @@
-@import '../config.styl'
-
-.fieldset
- border-radius 4px
- border 2px solid $grayDark
- transition all $transition
- margin 0
-
- > legend
- font-weight 600
- transition all $transition
- padding 0 4px
- @media (prefers-color-scheme dark)
- color white
- &:hover
- border-color black
-
- @media (prefers-color-scheme dark)
- border-color white
diff --git a/src/dzeio/Fieldset/index.tsx b/src/dzeio/Fieldset/index.tsx
deleted file mode 100644
index 5c54fe2..0000000
--- a/src/dzeio/Fieldset/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-
-import css from './Fieldset.module.styl'
-
-interface Props {
- title?: string
- children?: React.ReactNode
-}
-
-export default class Fieldset extends React.Component {
-
- public render = () => (
-
- )
-
-}
diff --git a/src/dzeio/Footer/Footer.module.styl b/src/dzeio/Footer/Footer.module.styl
index 159cdd5..753fbbc 100644
--- a/src/dzeio/Footer/Footer.module.styl
+++ b/src/dzeio/Footer/Footer.module.styl
@@ -1,13 +1,15 @@
@import '../config.styl'
.footer
- padding 24px 16px
+ padding 16px
background $foregroundLight
@media (prefers-color-scheme dark)
background $foregroundDark
ul
padding 0
+ margin 0
+ margin-top 12px
display flex
justify-content center
li
@@ -21,6 +23,9 @@
display inline-block
vertical-align middle
margin 0 2px
+ width 16px
+ height @width
+ vertical-align sub
@keyframes grow
0%
diff --git a/src/dzeio/Footer/Footer.stories.tsx b/src/dzeio/Footer/Footer.stories.tsx
index 97248e4..954cb82 100644
--- a/src/dzeio/Footer/Footer.stories.tsx
+++ b/src/dzeio/Footer/Footer.stories.tsx
@@ -1,19 +1,22 @@
-import { Meta, Story } from '@storybook/react/types-6-0'
-import React from 'react'
-import { Zap } from 'lucide-react'
-import Component from '.'
-
-export default {
- title: 'DZEIO/Footer',
- component: Component,
-} as Meta
-
-export const Basic: Story = (args: any) =>
-
-let tmp = Basic.bind({})
-tmp.args = {
- links: [{name: 'test1', path: '/'}, {name: 'test2', path: '/'}, {name: 'test3', path: '/'}],
- socials: [{icon: Zap, href: '/'}, {icon: '/16-16.svg', href: '/'}, {icon: Zap, href: '/'}]
-}
-
-export const Normal = tmp
+import { Meta, Story } from '@storybook/react/types-6-0'
+import React from 'react'
+import { Zap } from 'lucide-react'
+import Component from '.'
+
+export default {
+ title: 'DZEIO/Footer',
+ component: Component,
+ parameters: {
+ layout: 'fullscreen'
+ }
+} as Meta
+
+export const Basic: Story = (args: any) =>
+
+let tmp = Basic.bind({})
+tmp.args = {
+ links: [{name: 'test1', path: '/'}, {name: 'test2', path: '/'}, {name: 'test3', path: '/'}],
+ socials: [{icon: Zap, href: '/'}, {icon: '/16-16.svg', href: '/'}, {icon: Zap, href: '/'}]
+}
+
+export const Normal = tmp
diff --git a/src/dzeio/Footer/index.tsx b/src/dzeio/Footer/index.tsx
index b2d8560..3a7a4d2 100644
--- a/src/dzeio/Footer/index.tsx
+++ b/src/dzeio/Footer/index.tsx
@@ -1,48 +1,48 @@
-import React, { FC } from 'react'
-import { Heart } from 'lucide-react'
-import Link from '../Link'
-import { LucideProps } from 'lucide-react'
-import Text from '../Text'
-import css from './Footer.module.styl'
-import Image from 'next/image'
-
-interface Props {
- text?: string
- company?: string
- links?: Array<{
- path: string
- name: string
- }>
- socials?: Array<{
- href: string
- icon: FC | string
- }>
-}
-
-export default class Footer extends React.Component {
- public render = () => (
-
- )
-}
\ No newline at end of file
+import React, { FC } from 'react'
+import { Heart } from 'lucide-react'
+import Link from '../Link'
+import { Icon } from 'lucide-react'
+import Text from '../Text'
+import css from './Footer.module.styl'
+import Image from 'next/image'
+
+interface Props {
+ text?: string
+ company?: string
+ links?: Array<{
+ path: string
+ name: string
+ }>
+ socials?: Array<{
+ href: string
+ icon: Icon | string
+ }>
+}
+
+export default class Footer extends React.Component {
+ public render = () => (
+
+ )
+}
diff --git a/src/dzeio/Input/Input.module.styl b/src/dzeio/Input/Input.module.styl
index 9cb991a..c015eb6 100644
--- a/src/dzeio/Input/Input.module.styl
+++ b/src/dzeio/Input/Input.module.styl
@@ -2,31 +2,17 @@
.parent
position relative
- margin 16px 0
max-width 100%
display inline-block
&:not(.block) + .parent:not(.block)
margin-left 16px
- label
- font-size 1rem
- font-weight 600
- color black
- display inline-block
- margin-bottom .5rem
- transition all $transition
- position absolute
- top 16px
- pointer-events none
- left 16px
-
- @media (prefers-color-scheme dark)
- color white
-
svg
position absolute
- color #AAA
+ color $darkGrayLight
+ @media (prefers-color-scheme dark)
+ color $darkGrayDark
transition color $transition
pointer-events none
top 14px
@@ -78,15 +64,14 @@
left 0
width 100%
z-index 100
- box-shadow 0 4px 8px rgba(black, .3)
+ box-shadow 0 2px 4px rgba(black, .3)
margin 0
padding 0
- background darken($foregroundLight, 5%)
+ background $foregroundLight
@media (prefers-color-scheme dark)
- background lighten($foregroundDark, 5%)
+ background $foregroundDark
- border-bottom-left-radius 4px
- border-bottom-right-radius 4px
+ border-radius 8px
max-height 25vh
overflow-y auto
@media (max-width $mobile)
@@ -123,32 +108,29 @@
input
select
textarea
- padding 14px 16px
- height 56px
- border 2px solid $grayDark
- border-radius 4px
+ padding 12px
+ border-radius 8px
max-width 100%
- box-sizing border-box
font-size .875rem
outline none
- background transparent
+ background $lightGrayLight
transition all $transition
+ border 2px solid $darkGrayLight
color black
@media (prefers-color-scheme dark)
- border-color $grayLight
+ background $lightGrayDark
+ border-color $darkGrayDark
color white
- &:not(:placeholder-shown)
- &:focus
- &:not([placeholder=" "])
- ~ label
- top -8px
- left 16px - 4px // .input/padding-left label/padding-left
- background white
- padding 0 4px
+ &::placeholder
+ font-weight 700
+ font-size rem(16)
+ transition color $transition
+ opacity 1
+ color $darkGrayLight
+ @media (prefers-color-scheme dark)
+ color $darkGrayDark
- @media (prefers-color-scheme dark)
- background #202020
&:disabled
border-color #999
@@ -166,7 +148,8 @@
@media (prefers-color-scheme dark)
border-color white
- + svg
+ ~ svg
+ &::placeholder
color black
@media (prefers-color-scheme dark)
@@ -178,6 +161,7 @@
color @border-color
~ svg
+ &::placeholder
color @border-color
&:invalid
border-color $errorDark
@@ -252,13 +236,13 @@
transform rotateX(0)
transition $transition
- &:focus ~ svg.rotate, ~.autocomplete:hover ~ svg.rotate
+ &:focus ~ svg.rotate
+ ~ .autocomplete:hover ~ svg.rotate
transform rotateX(180deg)
- div
- display flex
- justify-content space-between
- padding 0 16px
- font-size .9em
+
+ p
+ padding 0 8px
+ font-size rem(14)
&.block, &.block input, &.block select, &.block textarea
width 100%
diff --git a/src/dzeio/Input/index.tsx b/src/dzeio/Input/index.tsx
index cfcb6c4..2f1c2d3 100644
--- a/src/dzeio/Input/index.tsx
+++ b/src/dzeio/Input/index.tsx
@@ -12,7 +12,6 @@ interface Props extends React.DetailedHTMLProps
iconRight?: FC
helper?: string
- characterCount?: boolean
inputRef?: React.RefObject
selectRef?: React.RefObject
type?: 'color' | 'text' | 'date' | 'datetime-local' |
@@ -21,15 +20,10 @@ interface Props extends React.DetailedHTMLProps
- infinityText?: string
- filled?: boolean
- opaque?: boolean
- block?: boolean
children?: React.ReactNode
}
interface States {
- charCount?: string
textAreaHeight?: number
value?: string
isInFirstPartOfScreen?: boolean
@@ -44,9 +38,6 @@ export default class Input extends React.Component {
private parentRef: React.RefObject = React.createRef()
public componentDidMount() {
- if (this.props.characterCount) {
- this.onChange()
- }
if (this.props.type === 'textarea') {
this.textareaHandler()
}
@@ -67,26 +58,19 @@ export default class Input extends React.Component {
delete props.label
delete props.children
delete props.icon
- delete props.opaque
delete props.helper
- delete props.infinityText
delete props.autocomplete
- delete props.filled
delete props.iconRight
delete props.inputRef
delete props.selectRef
- delete props.block
delete props.color
- delete props.characterCount
const baseProps: React.DetailedHTMLProps, HTMLInputElement> = {
- placeholder: this.props.placeholder || ' ',
+ placeholder: this.props.label || this.props.placeholder || ' ',
ref: this.props.inputRef || this.inputRef,
className: buildClassName(
[css.iconLeft, this.props.icon],
- [css.iconRight, this.props.iconRight || this.props.autocomplete],
- [css.filled, this.props.filled],
- [css.opaque, this.props.opaque]
+ [css.iconRight, this.props.iconRight || this.props.autocomplete]
),
onInvalid: (ev: React.FormEvent) => ev.preventDefault(),
}
@@ -105,7 +89,6 @@ export default class Input extends React.Component {
className={buildClassName(
[css.iconLeft, this.props.icon],
[css.iconRight, !this.props.disabled || this.props.iconRight],
- [css.filled, this.props.filled],
[css[this.props.color as string], this.props.color]
)}
>
@@ -146,38 +129,31 @@ export default class Input extends React.Component {
return (
{input}
- {/* Process Icon */}
+ {/* Left Icon */}
{this.props.icon && (
-
+
)}
+ {/* Right Icon */}
{this.props.iconRight ? (
-
+
) : ((this.props.type === 'select' || this.props.autocomplete) && !this.props.disabled) && (
-
+
)}
- {/* Input Label */}
- {this.props.label && (
-
- )}
- {(this.props.helper || this.props.characterCount) && (
-
- {this.props.helper}
- {this.props.characterCount && (
- {this.state?.charCount}
- )}
-
+ {/* Helper text */}
+ {(this.props.helper) && (
+
{this.props.helper}
)}
+ {/* List when this is an autocomplete */}
{this.props.autocomplete && this.props.autocomplete.indexOf(this.state?.value ?? this.props.value?.toString() ?? '') === -1 && (
{this.props.autocomplete.filter((item) => item.toLowerCase().includes(this.state?.value?.toLowerCase() ?? this.props.value?.toString().toLowerCase() ?? '')).map((item) => (- {item}
))}
@@ -187,6 +163,9 @@ export default class Input extends React.Component {
)
}
+ /**
+ * event for autocomplete to detect where on the screen it shoul display
+ */
private parentScroll = async () => {
const div = this.parentRef.current
if (!div) {return}
@@ -230,15 +209,6 @@ export default class Input extends React.Component {
}
private onChange = async (event?: React.FormEvent) => {
- if (this.props.characterCount) {
- const max = this.props.maxLength || this.props.infinityText || 'Infinity'
- const baseItem = this.props.value || this.props.defaultValue || ''
- let currentCount = baseItem.toString().length
- if (event) {
- currentCount = (event.target as HTMLInputElement).value.length
- }
- this.setState({charCount: `${currentCount}/${max}`})
- }
if (event) {
this.setState({value: (event.target as HTMLInputElement).value })
}
diff --git a/src/dzeio/Loader/Loader.stories.tsx b/src/dzeio/Loader/Loader.stories.tsx
new file mode 100644
index 0000000..3d3d8a2
--- /dev/null
+++ b/src/dzeio/Loader/Loader.stories.tsx
@@ -0,0 +1,21 @@
+import { Meta, Story } from '@storybook/react/types-6-0'
+import React from 'react'
+import { Zap } from 'lucide-react'
+import Component from '.'
+
+export default {
+ title: 'DZEIO/Loader',
+ component: Component,
+ parameters: {
+ layout: 'fullscreen'
+ }
+} as Meta
+
+export const Basic: Story = (args: any) =>
+
+let tmp = Basic.bind({})
+tmp.args = {
+ auto: {interval : [10, 100], increment: [0, 5]}
+}
+
+export const Auto = tmp
diff --git a/src/dzeio/NotificationManager/index.tsx b/src/dzeio/NotificationManager/index.tsx
index 17bd210..95d6a2b 100644
--- a/src/dzeio/NotificationManager/index.tsx
+++ b/src/dzeio/NotificationManager/index.tsx
@@ -135,11 +135,8 @@ export default class NotificationManager extends React.Component {
>
- NotificationManager.removeNotification(index)} />
-
+ rightHeader={(
+ NotificationManager.removeNotification(index)} />
)}
>
{el.actions && (
diff --git a/src/dzeio/Overflow/Overflow.module.styl b/src/dzeio/Overflow/Overflow.module.styl
deleted file mode 100644
index d50ef59..0000000
--- a/src/dzeio/Overflow/Overflow.module.styl
+++ /dev/null
@@ -1,6 +0,0 @@
-$height = 45px
-
-.top
- height $height
-.bottom
- margin-top - $height
diff --git a/src/dzeio/Overflow/index.tsx b/src/dzeio/Overflow/index.tsx
deleted file mode 100644
index eff5f85..0000000
--- a/src/dzeio/Overflow/index.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react'
-
-import { buildClassName } from '../Util'
-import css from './Overflow.module.styl'
-
-interface Props {
- bottom?: boolean
- top?: boolean
-}
-
-export default class Overflow extends React.Component {
-
- public render = () => (
-
- )
-
-}
diff --git a/src/dzeio/Popup/index.tsx b/src/dzeio/Popup/index.tsx
index 1ba451d..5e005f8 100644
--- a/src/dzeio/Popup/index.tsx
+++ b/src/dzeio/Popup/index.tsx
@@ -1,32 +1,39 @@
-import React from 'react'
-import { X } from 'lucide-react'
-import Text from '../Text'
-import Box from '../Box'
-import Row from '../Row'
-
-import css from './Popup.module.styl'
-
-interface Props {
- children: React.ReactNode
- onClose?: () => void
- header?: Box['props']
-}
-
-export default class Popup extends React.Component {
-
- public render = () => (
-
- ev.stopPropagation()} headerButtons={()}>
- {this.props.children}
-
-
- )
-
- private parentClose = (ev: React.MouseEvent) => {
- const target = ev.currentTarget
- if (target.classList.contains(css.popup) && this.props.onClose) {
- this.props.onClose()
- }
- }
-
-}
+import React from 'react'
+import { X } from 'lucide-react'
+import Text from '../Text'
+import Box from '../Box'
+import Row from '../Row'
+
+import css from './Popup.module.styl'
+
+interface Props {
+ children: React.ReactNode
+ onClose?: () => void
+ header?: Box['props']
+}
+
+export default class Popup extends React.Component {
+
+ public render = () => (
+
+ ev.stopPropagation()}
+ rightHeader={
+ ()
+ }
+ >
+ {this.props.children}
+
+
+ )
+
+ private parentClose = (ev: React.MouseEvent) => {
+ const target = ev.currentTarget
+ if (target.classList.contains(css.popup) && this.props.onClose) {
+ this.props.onClose()
+ }
+ }
+
+}
diff --git a/src/dzeio/Table/Table.module.styl b/src/dzeio/Table/Table.module.styl
index 8529f8b..626351d 100644
--- a/src/dzeio/Table/Table.module.styl
+++ b/src/dzeio/Table/Table.module.styl
@@ -2,21 +2,33 @@
.table
border-spacing 0
- border 2px solid $grayDark
- @media (prefers-color-scheme dark)
- border-color $grayLight
- border-radius 4px
width 100%
- td
- border-top 1px solid $grayDark
- @media (prefers-color-scheme dark)
- border-color $grayLight
+ tr
+ $radius = 16px
+ td:first-child
+ th:first-child
+ border-top-left-radius $radius
+ border-bottom-left-radius $radius
+
+ td:last-child
+ th:last-child
+ border-top-right-radius $radius
+ border-bottom-right-radius $radius
th
td
- padding 8px
+ padding 16px
text-align left
+ color black
+ @media (prefers-color-scheme dark)
+ color white
+ th
+ background $lightGrayLight
+ color $darkGrayLight
+ @media (prefers-color-scheme dark)
+ background $lightGrayDark
+ color $darkGrayDark
.parent
- overflow-x auto
\ No newline at end of file
+ overflow-x auto
diff --git a/src/dzeio/Table/Table.stories.tsx b/src/dzeio/Table/Table.stories.tsx
new file mode 100644
index 0000000..ebc25a0
--- /dev/null
+++ b/src/dzeio/Table/Table.stories.tsx
@@ -0,0 +1,49 @@
+import { Meta } from '@storybook/react/types-6-0'
+import { Copyright, Settings } from 'lucide-react'
+import React from 'react'
+import Component from '.'
+import Box from '../Box'
+
+export default {
+ title: 'DZEIO/Table',
+ component: Component
+} as Meta
+
+export const Basic = (args: any) => (
+
+
+
+
+ | item1 |
+ item1 |
+ item1 |
+ item1 |
+ item1 |
+
+
+
+
+ | item1 |
+ item1 |
+ item1 |
+ item1 |
+ item1 |
+
+
+ | item1 |
+ item1 |
+ item1 |
+ item1 |
+ item1 |
+
+
+ | item1 |
+ item1 |
+ item1 |
+ item1 |
+ item1 |
+
+
+
+
+)
diff --git a/src/dzeio/Text/index.tsx b/src/dzeio/Text/index.tsx
index 3e9926b..bffe8af 100644
--- a/src/dzeio/Text/index.tsx
+++ b/src/dzeio/Text/index.tsx
@@ -3,7 +3,7 @@ import { buildClassName } from '../Util'
import css from './Text.module.styl'
interface Props {
color?: 'black' | 'white'
- type?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'em' | 'span'
+ type?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'em' | 'span' | 'div'
className?: string
noDarkTheme?: boolean
align?: 'left' | 'right' | 'center'
diff --git a/src/dzeio/config.styl b/src/dzeio/config.styl
index 6d9de7a..c915d99 100644
--- a/src/dzeio/config.styl
+++ b/src/dzeio/config.styl
@@ -14,14 +14,23 @@ $errorLight = #F44336
$warningDark = #C43E00
$warningLight = #FF9800
-
-$backgroundDark = #161616
-$backgroundLight = #EEEEEE
+// hsl($main)
+$backgroundDark = darken($main, 92%)
+$backgroundLight = lighten($main, 94%)
$foregroundDark = #202020
$foregroundLight = #FFFFFF
-$grayDark = #B0B0B0
-$grayLight = #E0E0E0
+// Light theme grays
+$darkGrayLight = #777
+$lightGrayLight = #F4F4F4
+
+// Dark theme grays
+$darkGrayDark = #444
+$lightGrayDark = #AAA
+
+// @deprecated
+$grayLight = $darkGrayLight
+$grayDark = $lightGrayLight
$transitionTime = .15s
diff --git a/src/dzeio/general.styl b/src/dzeio/general.styl
index dbe1e2b..7db7c58 100644
--- a/src/dzeio/general.styl
+++ b/src/dzeio/general.styl
@@ -5,7 +5,12 @@
*::before
*::after
box-sizing border-box
- font-family Aileron, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
+ font-family Aileron, -apple-system, BlinkMacSystemFont, "Segoe UI", "Liberation Sans", sans-serif
+
+// Georgia,Cambria,"Times New Roman",Times,serif
+
+code, pre
+ font-family "Fira Code", ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Menlo, Monaco, Consolas, monospace;
html
body
diff --git a/src/dzeio/util.styl b/src/dzeio/util.styl
deleted file mode 100644
index 7925776..0000000
--- a/src/dzeio/util.styl
+++ /dev/null
@@ -1,15 +0,0 @@
-@import './config'
-
-.fullscreen
- min-height 100vh
-
-.w100p
- width 100%
-
-.hideMobile
- @media (max-width $mobile)
- display none
-
-.hideTablet
- @media (max-width $tablet)
- display none
diff --git a/src/index.ts b/src/index.ts
index 6036255..a66108b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -12,7 +12,6 @@ import Checkbox from './dzeio/Checkbox'
import Code from './dzeio/Code'
import Col from './dzeio/Col'
import Container from './dzeio/Container'
-import Fieldset from './dzeio/Fieldset'
import Footer from './dzeio/Footer'
import GradientBackground from './dzeio/GradientBackground'
import Image from './dzeio/Image'
@@ -21,7 +20,6 @@ import Link from './dzeio/Link'
import Loader from './dzeio/Loader'
import Navbar from './dzeio/Navbar'
import NotificationManager from './dzeio/NotificationManager'
-import Overflow from './dzeio/Overflow'
import Popup from './dzeio/Popup'
import Row from './dzeio/Row'
import Table from './dzeio/Table'
@@ -35,7 +33,6 @@ export {
Code,
Col,
Container,
- Fieldset,
Footer,
GradientBackground,
Image,
@@ -44,10 +41,9 @@ export {
Loader,
Navbar,
NotificationManager,
- Overflow,
Popup,
Row,
Table,
Text,
Util
-}
\ No newline at end of file
+}