dzeio/components
1
0
Fork 0
mirror of https://github.com/dzeiocom/components.git synced 2025-04-23 19:32:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Add normal variant of colors for easyness of usage in projects

Browse Source 
Signed-off-by: Avior <f.bouillon@aptatio.com>
This commit is contained in:
Florian Bouillon 2022-12-09 10:12:30 +01:00
parent d985ffc1c1
commit 5540647c04
Signed by: Florian Bouillon
GPG Key ID: E05B3A94178D3A7C
19 changed files with 1997 additions and 1957 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3766
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@dzeio/components",
"version": "1.0.0-beta.10",
"version": "1.0.0-beta.11",
"license": "MIT",
"main": "./index.umd.js",
"module": "./index.es.js",
@ -35,6 +35,6 @@
},
"dependencies": {
"@dzeio/object-util": "^1",
"lucide-react": "^0.91.0"
"lucide-react": "^0.104.1"
}
}

6
src/Box/Box.module.styl
View File

@ -1,9 +1,9 @@
@import "../config"
.box
background nativeRGB(var(--theme-100))
background var(--theme-100)
@media (prefers-color-scheme dark)
background nativeRGB(var(--gray-800))
background var(--gray-800)
border-radius 16px
&.noBottomBorder
border-radius 16px 16px 0 0
@ -31,6 +31,6 @@
width 24px
height 24px
display inline-block
background nativeRGB(var(--theme-500))
background var(--theme-500)
border-radius 4px
margin-right 8px

2
src/Breadcrumb/Breadcrumb.module.styl
View File

@ -18,6 +18,6 @@
padding 0 16px
.chevron
color nativeRGB(var(--theme-500))
color var(--theme-500)
@media (prefers-color-scheme dark)
color white

18
src/Button/Button.module.styl
View File

@ -16,7 +16,7 @@
justify-content center
align-items center
color var(--theme-500-text)
background-color nativeRGB(var(--theme-500))
background-color var(--theme-500)
// Chrome Specific
outline none
@ -28,11 +28,11 @@
&.ghost
&:hover
box-shadow none
background-color nativeRGBA(var(--theme-500), .2)
background-color nativeRGBA(var(--theme-500-rgb), .2)
&:active
&:focus
background-color nativeRGB(var(--theme-500))
background-color var(--theme-500)
color var(--theme-500-text)
&.outline
@ -55,11 +55,11 @@
&:hover
background-color @background-color
box-shadow 0 0 0 4px nativeRGBA(var(--theme-500), .2)
box-shadow 0 0 0 4px nativeRGBA(var(--theme-500-rgb), .2)
&:active
&:focus
background-color nativeRGB(var(--theme-800))
background-color var(--theme-800)
&.block
display flex
@ -89,18 +89,18 @@
padding 3px 8px // @padding - @border
&:disabled
background nativeRGB(var(--gray-500))
background var(--gray-500)
color var(--gray-500--text)
transform none
box-shadow none
cursor initial
&.outline
border 2px solid nativeRGB(var(--gray-500))
border 2px solid var(--gray-500)
background transparent
@media (prefers-color-scheme dark)
border 2px solid nativeRGB(var(--gray-500))
border 2px solid var(--gray-500)
&.loading
color transparent
@ -122,7 +122,7 @@
animation ButtonLoading .75s infinite linear
// &:disabled::after
// $rgb = nativeRGB(var(--gray-500))
// $rgb = var(--gray-500)
// border-color transparent transparent $rgb $rgb
// @media (prefers-color-scheme dark)
// border-color transparent transparent $rgb $rgb

22
src/Checkbox/Checkbox.module.styl
View File

@ -20,9 +20,9 @@ $backColor = #757575
width 20px
height @width
position relative
box-shadow inset 0 0 0 2px nativeRGB(var(--gray-600))
box-shadow inset 0 0 0 2px var(--gray-600)
@media (prefers-color-scheme dark)
box-shadow inset 0 0 0 2px nativeRGB(var(--gray-400))
box-shadow inset 0 0 0 2px var(--gray-400)
border-radius 4px
transition all $transition
@ -30,7 +30,7 @@ $backColor = #757575
border-radius 20px
position absolute
transition all $transition
background nativeRGB(var(--theme-500))
background var(--theme-500)
svg
transition $transition
@ -46,8 +46,8 @@ $backColor = #757575
opacity 0
&:checked + span
background nativeRGB(var(--theme-500))
box-shadow inset 0 0 0 2px nativeRGB(var(--theme-500))
background var(--theme-500)
box-shadow inset 0 0 0 2px var(--theme-500)
svg
color white
@ -56,7 +56,7 @@ $backColor = #757575
&:hover
span
box-shadow inset 0 0 0 2px nativeRGB(var(--theme-500))
box-shadow inset 0 0 0 2px var(--theme-500)
.radio
span
@ -80,7 +80,7 @@ $backColor = #757575
&:hover span
box-shadow none
&::after
background nativeRGB(var(--theme-500))
background var(--theme-500)
span
width 24px
@ -88,14 +88,14 @@ $backColor = #757575
border-radius 20px
margin-right 10px
box-shadow none
background nativeRGB(var(--gray-500))
background var(--gray-500)
&::after
content " "
top 50%
transform translate(-50%, -50%)
left 0
background nativeRGB(var(--gray-600))
background var(--gray-600)
width 20px
height @width
@ -106,8 +106,8 @@ $backColor = #757575
&:checked + span
box-shadow none
background nativeRGB(var(--theme-300))
background var(--theme-300)
&::after
left 100%
transform translate(-50%, -50%)
background nativeRGB(var(--theme-500))
background var(--theme-500)

4
src/Code/Code.module.styl
View File

@ -2,11 +2,11 @@
.code
.pre
background nativeRGB(var(--theme-50))
background var(--theme-50)
padding 4px 8px
border-radius 8px
@media (prefers-color-scheme dark)
background nativeRGB(var(--gray-700))
background var(--gray-700)
color var(--gray-700-text)
.pre

2
src/Fieldset/Fieldset.module.styl
View File

@ -2,7 +2,7 @@
.fieldset
border-radius 8px
border 2px solid nativeRGB(var(--gray-500))
border 2px solid var(--gray-500)
transition all $transition
margin 0

4
src/Footer/Footer.module.styl
View File

@ -2,9 +2,9 @@
.footer
padding 24px 0
background nativeRGB(var(--theme-50))
background var(--theme-50)
@media (prefers-color-scheme dark)
background nativeRGB(var(--gray-800))
background var(--gray-800)
ul
padding 0

30
src/Input/Input.module.styl
View File

@ -44,10 +44,10 @@
appearance none
option
background nativeRGB(var(--theme-50))
background var(--theme-50)
color black
@media (prefers-color-scheme dark)
background nativeRGB(var(--gray-800))
background var(--gray-800)
color white
textarea
@ -101,14 +101,14 @@
max-width 100%
font-size .875rem
outline none
background nativeRGB(var(--theme-50))
background var(--theme-50)
transition all $transition
border 2px solid black
color black
@media (prefers-color-scheme dark)
background nativeRGB(var(--gray-800))
background var(--gray-800)
border-color transparent
border 2px solid nativeRGB(var(--gray-500))
border 2px solid var(--gray-500)
color white
&::placeholder
@ -122,7 +122,7 @@
&:disabled
border-color nativeRGB(var(--gray-500))
border-color var(--gray-500)
&:not(:disabled)
&:hover
@ -137,7 +137,7 @@
@media (prefers-color-scheme dark)
color white
&:focus
border-color nativeRGB(var(--theme-500))
border-color var(--theme-500)
~ svg
color @border-color
@ -170,26 +170,26 @@
$height = 4px
&::-webkit-slider-runnable-track
appearance none
background-color nativeRGB(var(--theme-100))
background-color var(--theme-100)
height $height
width 100%
border-radius $height
transition $transition
@media (prefers-color-scheme dark)
background-color nativeRGB(var(--gray-800))
background-color var(--gray-800)
&:active::-webkit-slider-runnable-track
background nativeRGB(var(--theme-200))
background var(--theme-200)
@media (prefers-color-scheme dark)
background-color nativeRGB(var(--gray-700))
background-color var(--gray-700)
&::-moz-range-track
appearance none
background-color nativeRGB(var(--theme-100))
background-color var(--theme-100)
height $height
width 100%
border-radius $height
transition $transition
@media (prefers-color-scheme dark)
background-color nativeRGB(var(--gray-800))
background-color var(--gray-800)
&::-webkit-slider-thumb
appearance none
$size = 16px
@ -197,7 +197,7 @@
height $size
width $size
border none
background-color nativeRGB(var(--theme-500))
background-color var(--theme-500)
border-radius $size
&::-moz-range-thumb
appearance none
@ -206,7 +206,7 @@
height $size
width $size
border none
background-color nativeRGB(var(--theme-500))
background-color var(--theme-500)
border-radius $size
p

2
src/Link/Link.module.styl
View File

@ -1,7 +1,7 @@
@import '../config'
.link
color nativeRGB(var(--theme-500))
color var(--theme-500)
text-decoration underline
.icon

8
src/Menu/Menu.module.styl
View File

@ -2,7 +2,7 @@
.menu
&.outline
border 2px solid nativeRGB(var(--theme-500))
border 2px solid var(--theme-500)
&.hidden
display none
ul
@ -29,15 +29,15 @@
border-radius 8px
&:hover
color black
background nativeRGB(var(--theme-100))
background var(--theme-100)
@media (prefers-color-scheme dark)
color white
&:hover
color white
background nativeRGB(var(--gray-700))
background var(--gray-700)
&.selected
&:active
background nativeRGB(var(--theme-500))
background var(--theme-500)
color white
.link

4
src/Navbar/Navbar.module.styl
View File

@ -8,9 +8,9 @@ $height = 76px
.navbar
position fixed
left 0
background nativeRGB(var(--theme-50))
background var(--theme-50)
@media (prefers-color-scheme dark)
background nativeRGB(var(--gray-800))
background var(--gray-800)
top 0
height $height
width 100%

2
src/ProgressBar/ProgressBar.module.styl
View File

@ -21,5 +21,5 @@
height 100%
max-width 100%
width 0
background nativeRGB(var(--theme-500))
background var(--theme-500)
border-radius 8px

18
src/Sidebar/Sidebar.module.styl
View File

@ -10,9 +10,9 @@
margin-left 56px
.sidebar
background nativeRGB(var(--theme-50))
background var(--theme-50)
@media (prefers-color-scheme dark)
background nativeRGB(var(--gray-800))
background var(--gray-800)
position fixed
left 0
top 0
@ -53,13 +53,13 @@
border-radius 8px
&:hover
color black
background nativeRGB(var(--theme-100))
background var(--theme-100)
@media (prefers-color-scheme dark)
color white
background nativeRGB(var(--gray-700))
background var(--gray-700)
&:active
color white
background nativeRGB(var(--theme-500))
background var(--theme-500)
&.short
width 88px
.userSpace > div:not(:last-child)
@ -139,13 +139,13 @@
&:hover
color black
background nativeRGB(var(--theme-100))
background var(--theme-100)
@media (prefers-color-scheme dark)
color white
background nativeRGB(var(--gray-700))
background var(--gray-700)
&:active
color white
background nativeRGB(var(--theme-500))
background var(--theme-500)
padding 8px
display flex
@ -174,7 +174,7 @@
&.active > div
color white
background nativeRGB(var(--theme-500))
background var(--theme-500)
ul
list-style none
margin 0

6
src/Table/Table.module.styl
View File

@ -5,13 +5,13 @@
width 100%
tr:not(:last-child) td
border-bottom 1px solid nativeRGB(var(--gray-600))
border-bottom 1px solid var(--gray-600)
tr th
border-bottom 2px solid nativeRGB(var(--gray-600))
border-bottom 2px solid var(--gray-600)
tr td:not(:first-child)
tr th:not(:first-child)
border-left 1px solid nativeRGB(var(--gray-600))
border-left 1px solid var(--gray-600)
th
font-weight bold

2
src/Text/Text.module.styl
View File

@ -15,7 +15,7 @@
color black
.main
color nativeRGB(var(--theme-500))
color var(--theme-500)
for size in 36 28 24 20 18 16 14
.size-{size}

30
src/colors.styl
View File

@ -3,16 +3,26 @@ hextorgb(color)
red(color) unquote(', ') green(color) unquote(', ') blue(color)
generateTheme($name, c50, c100, c200, c300, c400, c500, c600, c700, c800, c900)
{"--" + $name + "-50"}: hextorgb(c50)
{"--" + $name + "-100"}: hextorgb(c100)
{"--" + $name + "-200"}: hextorgb(c200)
{"--" + $name + "-300"}: hextorgb(c300)
{"--" + $name + "-400"}: hextorgb(c400)
{"--" + $name + "-500"}: hextorgb(c500)
{"--" + $name + "-600"}: hextorgb(c600)
{"--" + $name + "-700"}: hextorgb(c700)
{"--" + $name + "-800"}: hextorgb(c800)
{"--" + $name + "-900"}: hextorgb(c900)
{"--" + $name + "-50"}: c50
{"--" + $name + "-100"}: c100
{"--" + $name + "-200"}: c200
{"--" + $name + "-300"}: c300
{"--" + $name + "-400"}: c400
{"--" + $name + "-500"}: c500
{"--" + $name + "-600"}: c600
{"--" + $name + "-700"}: c700
{"--" + $name + "-800"}: c800
{"--" + $name + "-900"}: c900
{"--" + $name + "-50-rgb"}: hextorgb(c50)
{"--" + $name + "-100-rgb"}: hextorgb(c100)
{"--" + $name + "-200-rgb"}: hextorgb(c200)
{"--" + $name + "-300-rgb"}: hextorgb(c300)
{"--" + $name + "-400-rgb"}: hextorgb(c400)
{"--" + $name + "-500-rgb"}: hextorgb(c500)
{"--" + $name + "-600-rgb"}: hextorgb(c600)
{"--" + $name + "-700-rgb"}: hextorgb(c700)
{"--" + $name + "-800-rgb"}: hextorgb(c800)
{"--" + $name + "-900-rgb"}: hextorgb(c900)
{"--" + $name + "-50-text"}: light(c50) ? black : white
{"--" + $name + "-100-text"}: light(c100) ? black : white
{"--" + $name + "-200-text"}: light(c200) ? black : white

24
src/general.styl
View File

@ -8,9 +8,9 @@
box-sizing border-box
scrollbar-width 16px
// scrollbar-color nativeRGB(var(--theme-50)) nativeRGB(var(--theme-50))
// scrollbar-color var(--theme-50) var(--theme-50)
// @media (prefers-color-scheme dark)
// scrollbar-color nativeRGB(var(--gray-800)) nativeRGB(var(--gray-800))
// scrollbar-color var(--gray-800) var(--gray-800)
font-family ui-system, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif
// Georgia,Cambria,"Times New Roman",Times,serif
@ -23,10 +23,10 @@ body
body > div[id="__next"]
margin 0
min-height 100vh
background nativeRGB(var(--gray-50))
background var(--gray-50)
@media (prefers-color-scheme dark)
background nativeRGB(var(--gray-900))
background var(--gray-900)
a
color inherit
@ -39,22 +39,22 @@ a
/* Track */
::-webkit-scrollbar-corner
::-webkit-scrollbar-track
background nativeRGB(var(--theme-100))
background var(--theme-100)
transition $transition
@media (prefers-color-scheme dark)
background nativeRGB(var(--gray-800))
background var(--gray-800)
::-webkit-scrollbar-thumb
background: nativeRGB(var(--theme-200))
background: var(--theme-200)
transition $transition
@media (prefers-color-scheme dark)
background nativeRGB(var(--gray-700))
background var(--gray-700)
&:hover
background: nativeRGB(var(--theme-300))
background: var(--theme-300)
@media (prefers-color-scheme dark)
background: nativeRGB(var(--gray-600))
background: var(--gray-600)
&:active
background: nativeRGB(var(--theme-400))
background: var(--theme-400)
@media (prefers-color-scheme dark)
background: nativeRGB(var(--gray-500))
background: var(--gray-500)