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

Signed-off-by: Avior <f.bouillon@aptatio.com>

package.json

@@ -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"
 	}
 }

src/Box/Box.module.styl

@@ -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

src/Breadcrumb/Breadcrumb.module.styl

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

src/Button/Button.module.styl

@@ -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

src/Checkbox/Checkbox.module.styl

@@ -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))
+			background var(--theme-500)
-			box-shadow inset 0 0 0 2px nativeRGB(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)

src/Code/Code.module.styl

@@ -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

src/Fieldset/Fieldset.module.styl

@@ -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
 

src/Footer/Footer.module.styl

@@ -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

src/Input/Input.module.styl

@@ -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

src/Link/Link.module.styl

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

src/Menu/Menu.module.styl

@@ -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

src/Navbar/Navbar.module.styl

@@ -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%

src/ProgressBar/ProgressBar.module.styl

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

src/Sidebar/Sidebar.module.styl

@@ -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

src/Table/Table.module.styl

@@ -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

src/Text/Text.module.styl

@@ -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}

src/colors.styl

@@ -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 + "-50"}:  c50
-	{"--" + $name + "-100"}: hextorgb(c100)
+	{"--" + $name + "-100"}: c100
-	{"--" + $name + "-200"}: hextorgb(c200)
+	{"--" + $name + "-200"}: c200
-	{"--" + $name + "-300"}: hextorgb(c300)
+	{"--" + $name + "-300"}: c300
-	{"--" + $name + "-400"}: hextorgb(c400)
+	{"--" + $name + "-400"}: c400
-	{"--" + $name + "-500"}: hextorgb(c500)
+	{"--" + $name + "-500"}: c500
-	{"--" + $name + "-600"}: hextorgb(c600)
+	{"--" + $name + "-600"}: c600
-	{"--" + $name + "-700"}: hextorgb(c700)
+	{"--" + $name + "-700"}: c700
-	{"--" + $name + "-800"}: hextorgb(c800)
+	{"--" + $name + "-800"}: c800
-	{"--" + $name + "-900"}: hextorgb(c900)
+	{"--" + $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

src/general.styl

@@ -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)