feat: Move to css variables !

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

src/Box/Box.module.styl

@@ -1,9 +1,9 @@
 @import "../config"
 
 .box
-	background $foregroundLight
+	background nativeRGB(var(--theme-50))
 	@media (prefers-color-scheme dark)
-		background $foregroundDark
+		background nativeRGB(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 $main
+	background nativeRGB(var(--theme-color))
 	border-radius 4px
 	margin-right 8px

src/Breadcrumb/Breadcrumb.module.styl

@@ -1,3 +1,5 @@
+@import "../config"
+
 .breadcrumb ol
 	display flex
 	display inline-flex
@@ -14,3 +16,8 @@
 
 .item
 	padding 0 16px
+
+.chevron
+	color nativeRGB(var(--theme-500))
+	@media (prefers-color-scheme dark)
+		color white

src/Breadcrumb/index.tsx

@@ -31,7 +31,7 @@ export default class Breadcrumb extends React.Component<Props> {
 					</li>
 					{this.props.items.map((el, index) => (
 						<li property="itemListElement" typeof="ListItem" key={index}>
-							<Text {...this.props.textProps} tag="span"><ChevronRight size={14} /></Text>
+							<Text {...this.props.textProps} tag="span"><ChevronRight size={14} className={css.chevron} /></Text>
 							{el.href ? (
 								<Link className={css.item} noStyle href={el.href.replace(/ /g, '-')} linkProps={{ property: "item", typeof: "WebPage" }}>
 									<Text {...this.props.textProps} tag="span" textProps={{ property: "name" }}>{el.display}</Text>

src/Button/Button.module.styl

@@ -16,8 +16,8 @@
 	border none
 	justify-content center
 	align-items center
-	color $textOnMain
+	color white
-	background-color $main
+	background-color nativeRGB(var(--theme-color))
 
 	// Chrome Specific
 	outline none
@@ -29,12 +29,12 @@
 	&.ghost
 		&:hover
 			box-shadow none
-			background-color rgba($main, .25)
+			background-color nativeRGBA(var(--theme-500), .2)
 
 		&:active
 		&:focus
-			background-color $main
+			background-color nativeRGB(var(--theme-color))
-			color $textOnMain
+			color white
 
 	&.outline
 		border 2px solid @background-color
@@ -45,7 +45,7 @@
 		&:not(:disabled)
 			&:active
 			&:focus
-				color $textOnMain
+				color white
 
 
 	&.ghost
@@ -56,11 +56,11 @@
 
 	&:hover
 		background-color @background-color
-		box-shadow 0 0 0 4px rgba(@background-color,.2)
+		box-shadow 0 0 0 4px nativeRGBA(var(--theme-500), .2)
 
 	&:active
 	&:focus
-		background-color darken(@background-color, 30%)
+		background-color nativeRGB(var(--theme-800))
 
 	&.block
 		display flex
@@ -86,8 +86,8 @@
 		margin-top 0
 
 	&:disabled
-		background $lightGrayLight
+		background nativeRGB(var(--gray-500))
-		color $darkGrayLight
+		color nativeRGB(var(--gray-500))
 		transform none
 		box-shadow none
 		cursor initial
@@ -97,11 +97,11 @@
 			color $darkGrayDark
 
 		&.outline
-			border 2px solid @color
+			border 2px solid nativeRGB(var(--gray-500))
 			background transparent
 
 			@media (prefers-color-scheme dark)
-				border 2px solid $darkGrayDark
+				border 2px solid nativeRGB(var(--gray-500))
 
 	&.loading
 		color transparent
@@ -111,8 +111,8 @@
 		&::after
 			content ""
 			display block
-			border $textOnMain 2px solid
+			border white 2px solid
-			border-color transparent transparent $textOnMain $textOnMain
+			border-color transparent transparent white white
 			width 1em
 			position absolute
 			top calc(50% - (1em / 2))
@@ -122,10 +122,11 @@
 			box-sizing inherit
 			animation ButtonLoading .75s infinite linear
 
-		&:disabled::after
+		// &:disabled::after
-			border-color transparent transparent $darkGrayLight $darkGrayLight
+		// 	$rgb = nativeRGB(var(--gray-500))
-			@media (prefers-color-scheme dark)
+		// 	border-color transparent transparent $rgb $rgb
-				border-color transparent transparent $darkGrayDark $darkGrayDark
+		// 	@media (prefers-color-scheme dark)
+		// 		border-color transparent transparent $rgb $rgb
 
 svg + .textInner
 	margin-left 8px
@@ -161,7 +162,7 @@ btn($color, $theme)
 		if $theme is 'darken'
 			&:active
 			&:focus
-				background-color darken(@color, 30%)
+				background-color nativeRGB(var(--theme-700))
 
 
 	&.ghost
@@ -170,7 +171,7 @@ btn($color, $theme)
 
 		&:hover
 			box-shadow none
-			background-color rgba($color, .25)
+			background-color nativeRGBA($color, .25)
 
 		&:active
 		&:focus
@@ -178,40 +179,20 @@ btn($color, $theme)
 
 	&:hover
 		background-color @background-color
-		box-shadow 0 4px 4px rgba(@background-color,.2)
+		box-shadow 0 4px 4px nativeRGBA(@background-color,.2)
 
 	&:active
 	&:focus
 		if $theme is 'darken'
-			background-color darken(@background-color, 30%)
+			background-color nativeRGB(var(--theme-700))
 		else
-			background-color lighten(@background-color, 30%)
+			background-color nativeRGB(var(--theme-300))
 
 	&.loading
 		color transparent
 		&::after
 			border-color transparent transparent $textColor $textColor
 
-.info:not(:disabled)
-	btn($infoLight, 'darken')
-	@media (prefers-color-scheme dark)
-		btn($infoDark, 'lighten')
-
-.success:not(:disabled)
-	btn($successLight, 'darken')
-	@media (prefers-color-scheme dark)
-		btn($successDark, 'lighten')
-
-.error:not(:disabled)
-	btn($errorLight, 'darken')
-	@media (prefers-color-scheme dark)
-		btn($errorDark, 'lighten')
-
-.warning:not(:disabled)
-	btn($warningLight, 'darken')
-	@media (prefers-color-scheme dark)
-		btn($warningDark, 'lighten')
-
 @keyframes ButtonLoading
 	0%
 		transform rotate(0)

src/Checkbox/Checkbox.module.styl

@@ -20,9 +20,9 @@ $backColor = #757575
 		width 20px
 		height @width
 		position relative
-		box-shadow inset 0 0 0 2px $darkGrayLight
+		box-shadow inset 0 0 0 2px nativeRGB(var(--gray-600))
 		@media (prefers-color-scheme dark)
-			box-shadow inset 0 0 0 2px $darkGrayDark
+			box-shadow inset 0 0 0 2px nativeRGB(var(--gray-400))
 		border-radius 4px
 		transition all $transition
 
@@ -30,7 +30,7 @@ $backColor = #757575
 			border-radius 20px
 			position absolute
 			transition all $transition
-			background $main
+			background nativeRGB(var(--theme-color))
 
 	svg
 		transition $transition
@@ -46,11 +46,8 @@ $backColor = #757575
 		opacity 0
 
 		&:checked + span
-			background $infoLight
+			background nativeRGB(var(--theme-500))
-			box-shadow inset 0 0 0 2px $infoLight
+			box-shadow inset 0 0 0 2px nativeRGB(var(--theme-500))
-			@media (prefers-color-scheme dark)
-				box-shadow inset 0 0 0 2px $infoDark
-				background $infoDark
 
 			svg
 				color white
@@ -59,9 +56,7 @@ $backColor = #757575
 
 	&:hover
 		span
-			box-shadow inset 0 0 0 2px $infoLight
+			box-shadow inset 0 0 0 2px nativeRGB(var(--theme-500))
-			@media (prefers-color-scheme dark)
-				box-shadow inset 0 0 0 2px $infoDark
 
 .radio
 	span
@@ -85,9 +80,7 @@ $backColor = #757575
 	&:hover span
 		box-shadow none
 		&::after
-			background $darkGrayLight
+			background nativeRGB(var(--theme-500))
-			@media (prefers-color-scheme dark)
-				background $darkGrayDark
 
 	span
 		width 24px
@@ -95,19 +88,14 @@ $backColor = #757575
 		border-radius 20px
 		margin-right 10px
 		box-shadow none
-		background rgba($darkGrayLight, .3)
+		background nativeRGB(var(--gray-500))
-		@media (prefers-color-scheme dark)
-			background rgba($darkGrayDark, .3)
-
 
 		&::after
 			content " "
 			top 50%
 			transform translate(-50%, -50%)
 			left 0
-			background $darkGrayLight
+			background nativeRGB(var(--gray-600))
-			@media (prefers-color-scheme dark)
-				background $darkGrayDark
 			width 20px
 			height @width
 
@@ -118,44 +106,8 @@ $backColor = #757575
 		&:checked + span
 
 			box-shadow none
-			background rgba($infoLight, .3)
+			background nativeRGB(var(--theme-300))
-			@media (prefers-color-scheme dark)
-				background rgba($infoDark, .3)
 			&::after
 				left 100%
 				transform translate(-50%, -50%)
-				background $infoLight
+				background nativeRGB(var(--theme-500))
-				@media (prefers-color-scheme dark)
-					background $infoDark
-
-checkBox($color)
-	input:checked + span
-		background rgba($color, .5)
-		box-shadow inset 0 0 0 2px $color
-
-		&::after
-			background $color
-	input:focus:checked + span
-		box-shadow inset 0 0 0 2px $color, 0 0 0 2px rgba($color,.3)
-	&.switch
-		input:checked + span
-			box-shadow none
-.info
-	checkBox($infoLight)
-	@media (prefers-color-scheme dark)
-		checkBox($infoDark)
-
-.success
-	checkBox($successLight)
-	@media (prefers-color-scheme dark)
-		checkBox($successDark)
-
-.error
-	checkBox($errorLight)
-	@media (prefers-color-scheme dark)
-		checkBox($errorDark)
-
-.warning
-	checkBox($warningLight)
-	@media (prefers-color-scheme dark)
-		checkBox($warningDark)

src/Code/Code.module.styl

@@ -1,12 +1,13 @@
-@import "../config.styl"
+@import "../config"
 
 .code
 .pre
-	background $lightGrayLight
+	background nativeRGB(var(--theme-50))
 	padding 4px 8px
 	border-radius 8px
 	@media (prefers-color-scheme dark)
-		background $lightGrayDark
+		background nativeRGB(var(--gray-700))
+		color white
 
 .pre
 	display block

src/Fieldset/Fieldset.module.styl

@@ -1,8 +1,8 @@
 @import '../config.styl'
 
 .fieldset
-	border-radius 4px
+	border-radius 8px
-	border 2px solid $grayDark
+	border 2px solid nativeRGB(var(--gray-500))
 	transition all $transition
 	margin 0
 
@@ -12,8 +12,3 @@
 		padding 0 4px
 		@media (prefers-color-scheme dark)
 			color white
-	&:hover
-		border-color black
-
-		@media (prefers-color-scheme dark)
-			border-color white

src/Footer/Footer.module.styl

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

src/GradientBackground/GradientBackground.module.styl

@@ -1,30 +0,0 @@
-@import "../config"
-
-$percent = 15%
-
-.back
-	transition all $transition
-	background $mainGradient
-
-	&.fullscreen > :first-child
-		min-height 100vh
-
-.info
-	background linear-gradient(to right, $infoLight, lighten($infoLight, $percent))
-	@media (prefers-color-scheme dark)
-		background linear-gradient(to right, $infoDark, darken($infoDark, $percent))
-
-.success
-	background linear-gradient(to right, $successLight, lighten($successLight, $percent))
-	@media (prefers-color-scheme dark)
-		background linear-gradient(to right, $successDark, darken($successDark, $percent))
-
-.error
-	background linear-gradient(to right, $errorLight, lighten($errorLight, $percent))
-	@media (prefers-color-scheme dark)
-		background linear-gradient(to right, $errorDark, darken($errorDark, $percent))
-
-.warning
-	background linear-gradient(to right, $warningLight, lighten($warningLight, $percent))
-	@media (prefers-color-scheme dark)
-		background linear-gradient(to right, $warningDark, darken($warningDark, $percent))

src/GradientBackground/index.tsx

@@ -1,27 +0,0 @@
-import React from 'react'
-import { ColorType } from '../interfaces'
-
-import { buildClassName } from '../Util'
-import css from './GradientBackground.module.styl'
-
-interface Props {
-	color?: ColorType
-	className?: string
-	children: React.ReactNode
-	fullscreen?: boolean
-}
-
-/**
- * Make the background a linear-gradient
- *
- * @version 1.0.2
- */
-export default class GradientBackground extends React.Component<Props> {
-
-	public render = () => (
-		<div className={buildClassName(css.back, [css[this.props.color as string], this.props.color], this.props.className, [css.fullscreen, this.props.fullscreen])}>
-			{this.props.children}
-		</div>
-	)
-
-}

src/Input/Input.module.styl

@@ -22,9 +22,9 @@
 	svg
 		position absolute
 		user-select none
-		color $darkGrayLight
+		color black
 		@media (prefers-color-scheme dark)
-			color $darkGrayDark
+			color white
 		transition color $transition
 		pointer-events none
 		&.iconClickable
@@ -44,10 +44,10 @@
 		appearance none
 
 		option
-			background $foregroundLight
+			background nativeRGB(var(--theme-50))
 			color black
 			@media (prefers-color-scheme dark)
-				background lighten($foregroundDark, 5%)
+				background nativeRGB(var(--gray-800))
 				color white
 
 	textarea
@@ -101,17 +101,17 @@
 		max-width 100%
 		font-size .875rem
 		outline none
-		background $lightGrayLight
+		background nativeRGB(var(--theme-50))
 		transition all $transition
 		border 2px solid black
 		color black
 		@media (prefers-color-scheme dark)
-			background $lightGrayDark
+			background nativeRGB(var(--gray-800))
 			border-color transparent
+			border 2px solid nativeRGB(var(--gray-500))
 			color white
 
 		&::placeholder
-			font-weight 700
 			font-size rem(16)
 			transition color $transition
 			opacity 1
@@ -125,10 +125,7 @@
 
 
 		&:disabled
-			border-color $darkGrayLight
+			border-color nativeRGB(var(--gray-500))
-
-			@media (prefers-color-scheme dark)
-				border-color $darkGrayDark
 
 		&:not(:disabled)
 			&:hover
@@ -143,7 +140,7 @@
 					@media (prefers-color-scheme dark)
 						color white
 			&:focus
-				border-color $main
+				border-color nativeRGB(var(--theme-color))
 
 				~ svg
 					color @border-color
@@ -153,18 +150,6 @@
 				// 	@media (prefers-color-scheme dark)
 				// 		color white
 
-			&:invalid
-				border-color $errorLight
-
-				~ svg
-					color @border-color
-				@media (prefers-color-scheme dark)
-					border-color $errorDark
-
-					~ svg
-						color @border-color
-
-
 		&.iconLeft
 			padding-left 16px + 24px + 10px
 		&.iconRight

src/Input/Input.stories.tsx

@@ -23,7 +23,9 @@ tmp.args = {
 	id: 'pouet',
 	type: 'number',
 	step: 10,
-	defaultValue: 'test'
+	defaultValue: 'test',
+	placeholder: 'test',
+	disabled: false
 }
 
 export const Normal = tmp

src/Input/index.tsx

@@ -53,6 +53,8 @@ interface Props extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLIn
 	 * Allows you to disable automatic icons
 	 */
 	disableAutoIcons?: boolean
+
+	placeholder?: string
 }
 
 interface States {

src/Link/Link.module.styl

@@ -1,11 +1,8 @@
 @import '../config'
 
 .link
-	color $infoDark
+	color nativeRGB(var(--theme-500))
-	@media (prefers-color-scheme dark)
+	text-decoration underline
-		color $infoLight
-	&:hover
-		text-decoration underline
 
 .icon
 	vertical-align sub

src/Menu/Menu.module.styl

@@ -2,7 +2,7 @@
 
 .menu
 	&.outline
-		border 2px solid $main
+		border 2px solid nativeRGB(var(--theme-color))
 	&.hidden
 		display none
 	ul
@@ -20,20 +20,20 @@
 			overflow-x hidden
 			text-overflow: ellipsis;
 			margin-bottom 8px
-			color $darkGrayLight
+			color black
 			cursor pointer
 			transition all $transition
 			font-weight bold
 			border-radius 8px
 			&:hover
 				color black
-				background $lightGrayLight
+				background nativeRGB(var(--theme-100))
 			@media (prefers-color-scheme dark)
-				color $lightGrayDark
+				color white
 				&:hover
 					color white
-					background $darkGrayDark
+					background nativeRGB(var(--gray-700))
 			&.selected
 			&:active
-				background $main
+				background nativeRGB(var(--theme-500))
-				color $textOnMain
+				color white

src/Navbar/Navbar.module.styl

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

src/Popup/Popup.module.styl

@@ -7,9 +7,9 @@
 	top 0
 	margin 0 !important // sorry :(
 	left 0
-	background rgba($lightGrayLight, .7)
+	background nativeRGBA($lightGrayLight, .7)
 	@media (prefers-color-scheme dark)
-		background rgba($lightGrayDark, .7)
+		background nativeRGBA($lightGrayDark, .7)
 	cursor pointer
 	z-index 200
 	animation fadeIn .3s ease-in-out 1 forwards

src/ProgressBar/ProgressBar.module.styl

@@ -2,7 +2,7 @@
 
 .bar
 	width 100%
-	background rgba($main, .15)
+	background nativeRGBA(var(--theme-color), 0.15)
 	height 8px
 	border-radius 8px
 
@@ -21,5 +21,5 @@
 		height 100%
 		max-width 100%
 		width 0
-		background $main
+		background nativeRGB(var(--theme-color))
 		border-radius 8px

src/Sidebar/Sidebar.module.styl

@@ -10,9 +10,9 @@
 		margin-left 56px
 
 .sidebar
-	background $foregroundLight
+	background nativeRGB(var(--theme-50))
 	@media (prefers-color-scheme dark)
-		background $foregroundDark
+		background nativeRGB(var(--gray-800))
 	position fixed
 	left 0
 	top 0
@@ -53,13 +53,13 @@
 			border-radius 8px
 			&:hover
 				color black
-				background $lightGrayLight
+				background nativeRGB(var(--theme-100))
 				@media (prefers-color-scheme dark)
 					color white
-					background $darkGrayDark
+					background nativeRGB(var(--gray-700))
 			&:active
-				color $textOnMain
+				color white
-				background $main
+				background nativeRGB(var(--theme-color))
 	&.short
 		width 88px
 		.userSpace > div:not(:last-child)
@@ -109,9 +109,9 @@
 		&::before
 			content " "
 			position absolute
-			background $darkGrayLight
+			background black
-			@media (prefers-color-theme dark)
+			@media (prefers-color-scheme dark)
-				background $lightGrayDark
+				background white
 			border-radius 2px
 			width 2px
 			height 100%
@@ -131,21 +131,21 @@
 			cursor pointer
 			border-radius 8px
 			transition all $transition
-			color $darkGrayLight
+			color black
 			@media (prefers-color-scheme dark)
-				color $lightGrayDark
+				color white
 			&:first-child
 				margin-top 0
 			&:hover
 
 				color black
-				background $lightGrayLight
+				background nativeRGB(var(--theme-100))
 				@media (prefers-color-scheme dark)
 					color white
-					background $darkGrayDark
+					background nativeRGB(var(--gray-700))
 			&:active
-				color $textOnMain
+				color white
-				background $main
+				background nativeRGB(var(--theme-color))
 
 			padding 8px
 			display flex
@@ -168,8 +168,8 @@
 				//max-height 24px
 
 		&.active > div
-			color $textOnMain
+			color white
-			background $main
+			background nativeRGB(var(--theme-color))
 	ul
 		list-style none
 		margin 0

src/Table/Table.module.styl

@@ -4,22 +4,19 @@
 	border-spacing 0
 	width 100%
 
-	tr
+	tr:not(:last-child) td
-		$radius = 16px
-		th:first-child
-			border-top-left-radius $radius
-			border-bottom-left-radius $radius
-
-		th:last-child
-			border-top-right-radius $radius
-			border-bottom-right-radius $radius
-
-	&.horizontalBorders tr:not(:last-child) td
 		border-bottom 1px solid $darkGrayLight
+	tr th
+		border-bottom 2px solid $darkGrayLight
 
-	&.verticalBorders tr td:not(:first-child)
+	tr td:not(:first-child)
+	tr th:not(:first-child)
 		border-left 1px solid $darkGrayLight
 
+	th
+		font-weight bold
+		font-size rem(18)
+
 	th
 	td
 		padding 16px
@@ -27,12 +24,6 @@
 		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

src/Text/Text.module.styl

@@ -12,10 +12,10 @@
 	color white
 
 .black
-	color #212121
+	color black
 
 .main
-	color $main
+	color nativeRGB(var(--theme-color))
 
 for size in 36 28 24 20 18 16 14
 	.size-{size}
@@ -38,6 +38,6 @@ for weight in 'normal' 'bold'
 
 @media (prefers-color-scheme dark)
 	.white:not(.noDarkTheme)
-		color #212121
+		color black
 	.black:not(.noDarkTheme)
 		color white

src/colors.styl

@@ -0,0 +1,301 @@
+// quick function to transform hex to rgb
+hextorgb(color)
+	red(color) unquote(', ') green(color) unquote(', ') blue(color)
+
+// not as :root for other components to use the closest value
+*
+	--theme-color: var(--theme-500)
+	// @media (prefers-color-scheme dark)
+	// 	--theme-color: var(--theme-500)
+
+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-color"}: hextorgb(c50)
+	{"--" + $name + "-100-color"}: hextorgb(c100)
+	{"--" + $name + "-200-color"}: hextorgb(c200)
+	{"--" + $name + "-300-color"}: hextorgb(c300)
+	{"--" + $name + "-400-color"}: hextorgb(c400)
+	{"--" + $name + "-500-color"}: hextorgb(c500)
+	{"--" + $name + "-600-color"}: hextorgb(c600)
+	{"--" + $name + "-700-color"}: hextorgb(c700)
+	{"--" + $name + "-800-color"}: hextorgb(c800)
+	{"--" + $name + "-900-color"}: hextorgb(c900)
+	{"--" + $name + "-50-text"}: light(c50 ) ? black : white
+	{"--" + $name + "-100-text"}:    light(c100) ? black : white
+	{"--" + $name + "-200-text"}:    light(c200) ? black : white
+	{"--" + $name + "-300-text"}:    light(c300) ? black : white
+	{"--" + $name + "-400-text"}:    light(c400) ? black : white
+	{"--" + $name + "-500-text"}:    light(c500) ? black : white
+	{"--" + $name + "-600-text"}:    light(c600) ? black : white
+	{"--" + $name + "-700-text"}:    light(c700) ? black : white
+	{"--" + $name + "-800-text"}:    light(c800) ? black : white
+	{"--" + $name + "-900-text"}:    light(c900) ? black : white
+
+:root
+	generateTheme(
+		'test',
+		#000,
+		#100,
+		#200,
+		#003,
+		#004,
+		#005,
+		#006,
+		#007,
+		#008,
+		#fff
+	)
+	// gray is not a theme
+	--gray-50 hextorgb(#FAFAFA)
+	--gray-100 hextorgb(#F5F5F5)
+	--gray-200 hextorgb(#EEEEEE)
+	--gray-300 hextorgb(#E0E0E0)
+	--gray-400 hextorgb(#BDBDBD)
+	--gray-500 hextorgb(#9E9E9E)
+	--gray-600 hextorgb(#757575)
+	--gray-700 hextorgb(#616161)
+	--gray-800 hextorgb(#424242)
+	--gray-900 hextorgb(#212121)
+
+:root
+.red
+.red *
+	--theme-50: hextorgb(#FFEBEE)
+	--theme-100: hextorgb(#FFCDD2)
+	--theme-200: hextorgb(#EF9A9A)
+	--theme-300: hextorgb(#E57373)
+	--theme-400: hextorgb(#EF5350)
+	--theme-500: hextorgb(#F44336)
+	--theme-600: hextorgb(#E53935)
+	--theme-700: hextorgb(#D32F2F)
+	--theme-800: hextorgb(#C62828)
+	--theme-900: hextorgb(#B71C1C)
+
+.pink
+.pink *
+	--theme-50: hextorgb(#FCE4EC)
+	--theme-100: hextorgb(#F8BBD0)
+	--theme-200: hextorgb(#F48FB1)
+	--theme-300: hextorgb(#F06292)
+	--theme-400: hextorgb(#EC407A)
+	--theme-500: hextorgb(#E91E63)
+	--theme-600: hextorgb(#D81B60)
+	--theme-700: hextorgb(#C2185B)
+	--theme-800: hextorgb(#AD1457)
+	--theme-900: hextorgb(#880E4F)
+
+.purple
+.purple *
+	--theme-50: hextorgb(#F3E5F5)
+	--theme-100: hextorgb(#E1BEE7)
+	--theme-200: hextorgb(#CE93D8)
+	--theme-300: hextorgb(#BA68C8)
+	--theme-400: hextorgb(#AB47BC)
+	--theme-500: hextorgb(#9C27B0)
+	--theme-600: hextorgb(#8E24AA)
+	--theme-700: hextorgb(#7B1FA2)
+	--theme-800: hextorgb(#6A1B9A)
+	--theme-900: hextorgb(#4A148C)
+
+.deep-purple
+.deep-purple *
+	--theme-50 hextorgb(#EDE7F6)
+	--theme-100 hextorgb(#D1C4E9)
+	--theme-200 hextorgb(#B39DDB)
+	--theme-300 hextorgb(#9575CD)
+	--theme-400 hextorgb(#7E57C2)
+	--theme-500 hextorgb(#673AB7)
+	--theme-600 hextorgb(#5E35B1)
+	--theme-700 hextorgb(#512DA8)
+	--theme-800 hextorgb(#4527A0)
+	--theme-900 hextorgb(#311B92)
+
+.indigo
+.indigo *
+	--theme-50 hextorgb(#E8EAF6)
+	--theme-100 hextorgb(#C5CAE9)
+	--theme-200 hextorgb(#9FA8DA)
+	--theme-300 hextorgb(#7986CB)
+	--theme-400 hextorgb(#5C6BC0)
+	--theme-500 hextorgb(#3F51B5)
+	--theme-600 hextorgb(#3949AB)
+	--theme-700 hextorgb(#303F9F)
+	--theme-800 hextorgb(#283593)
+	--theme-900 hextorgb(#1A237E)
+
+.blue
+.blue *
+	--theme-50 hextorgb(#E3F2FD)
+	--theme-100 hextorgb(#BBDEFB)
+	--theme-200 hextorgb(#90CAF9)
+	--theme-300 hextorgb(#64B5F6)
+	--theme-400 hextorgb(#42A5F5)
+	--theme-500 hextorgb(#2196F3)
+	--theme-600 hextorgb(#1E88E5)
+	--theme-700 hextorgb(#1976D2)
+	--theme-800 hextorgb(#1565C0)
+	--theme-900 hextorgb(#0D47A1)
+
+.light-blue
+.light-blue *
+	--theme-50 hextorgb(#E1F5FE)
+	--theme-100 hextorgb(#B3E5FC)
+	--theme-200 hextorgb(#81D4FA)
+	--theme-300 hextorgb(#4FC3F7)
+	--theme-400 hextorgb(#29B6F6)
+	--theme-500 hextorgb(#03A9F4)
+	--theme-600 hextorgb(#039BE5)
+	--theme-700 hextorgb(#0288D1)
+	--theme-800 hextorgb(#0277BD)
+	--theme-900 hextorgb(#01579B)
+
+.cyan
+.cyan *
+	--theme-50 hextorgb(#E0F7FA)
+	--theme-100 hextorgb(#B2EBF2)
+	--theme-200 hextorgb(#80DEEA)
+	--theme-300 hextorgb(#4DD0E1)
+	--theme-400 hextorgb(#26C6DA)
+	--theme-500 hextorgb(#00BCD4)
+	--theme-600 hextorgb(#00ACC1)
+	--theme-700 hextorgb(#0097A7)
+	--theme-800 hextorgb(#00838F)
+	--theme-900 hextorgb(#006064)
+
+.teal
+.teal *
+	--theme-50 hextorgb(#E0F2F1)
+	--theme-100 hextorgb(#B2DFDB)
+	--theme-200 hextorgb(#80CBC4)
+	--theme-300 hextorgb(#4DB6AC)
+	--theme-400 hextorgb(#26A69A)
+	--theme-500 hextorgb(#009688)
+	--theme-600 hextorgb(#00897B)
+	--theme-700 hextorgb(#00796B)
+	--theme-800 hextorgb(#00695C)
+	--theme-900 hextorgb(#004D40)
+
+.green
+.green *
+	--theme-50 hextorgb(#E8F5E9)
+	--theme-100 hextorgb(#C8E6C9)
+	--theme-200 hextorgb(#A5D6A7)
+	--theme-300 hextorgb(#81C784)
+	--theme-400 hextorgb(#66BB6A)
+	--theme-500 hextorgb(#4CAF50)
+	--theme-600 hextorgb(#43A047)
+	--theme-700 hextorgb(#388E3C)
+	--theme-800 hextorgb(#2E7D32)
+	--theme-900 hextorgb(#1B5E20)
+
+.light-green
+.light-green *
+	--theme-50 hextorgb(#F1F8E9)
+	--theme-100 hextorgb(#DCEDC8)
+	--theme-200 hextorgb(#C5E1A5)
+	--theme-300 hextorgb(#AED581)
+	--theme-400 hextorgb(#9CCC65)
+	--theme-500 hextorgb(#8BC34A)
+	--theme-600 hextorgb(#7CB342)
+	--theme-700 hextorgb(#689F38)
+	--theme-800 hextorgb(#558B2F)
+	--theme-900 hextorgb(#33691E)
+
+.lime
+.lime *
+	--theme-50 hextorgb(#F9FBE7)
+	--theme-100 hextorgb(#F0F4C3)
+	--theme-200 hextorgb(#E6EE9C)
+	--theme-300 hextorgb(#DCE775)
+	--theme-400 hextorgb(#D4E157)
+	--theme-500 hextorgb(#CDDC39)
+	--theme-600 hextorgb(#C0CA33)
+	--theme-700 hextorgb(#AFB42B)
+	--theme-800 hextorgb(#9E9D24)
+	--theme-900 hextorgb(#827717)
+
+.yellow
+.yellow *
+	--theme-50 hextorgb(#FFFDE7)
+	--theme-100 hextorgb(#FFF9C4)
+	--theme-200 hextorgb(#FFF59D)
+	--theme-300 hextorgb(#FFF176)
+	--theme-400 hextorgb(#FFEE58)
+	--theme-500 hextorgb(#FFEB3B)
+	--theme-600 hextorgb(#FDD835)
+	--theme-700 hextorgb(#FBC02D)
+	--theme-800 hextorgb(#F9A825)
+	--theme-900 hextorgb(#F57F17)
+
+.amber
+.amber *
+	--theme-100 hextorgb(#FFECB3)
+	--theme-200 hextorgb(#FFE082)
+	--theme-300 hextorgb(#FFD54F)
+	--theme-400 hextorgb(#FFCA28)
+	--theme-500 hextorgb(#FFC107)
+	--theme-600 hextorgb(#FFB300)
+	--theme-700 hextorgb(#FFA000)
+	--theme-800 hextorgb(#FF8F00)
+	--theme-900 hextorgb(#FF6F00)
+
+.orange
+.orange *
+	--theme-50 hextorgb(#FFF3E0)
+	--theme-100 hextorgb(#FFE0B2)
+	--theme-200 hextorgb(#FFCC80)
+	--theme-300 hextorgb(#FFB74D)
+	--theme-400 hextorgb(#FFA726)
+	--theme-500 hextorgb(#FF9800)
+	--theme-600 hextorgb(#FB8C00)
+	--theme-700 hextorgb(#F57C00)
+	--theme-800 hextorgb(#EF6C00)
+	--theme-900 hextorgb(#E65100)
+
+.deep-orange
+.deep-orange *
+	--theme-50 hextorgb(#FBE9E7)
+	--theme-100 hextorgb(#FFCCBC)
+	--theme-200 hextorgb(#FFAB91)
+	--theme-300 hextorgb(#FF8A65)
+	--theme-400 hextorgb(#FF7043)
+	--theme-500 hextorgb(#FF5722)
+	--theme-600 hextorgb(#F4511E)
+	--theme-700 hextorgb(#E64A19)
+	--theme-800 hextorgb(#D84315)
+	--theme-900 hextorgb(#BF360C)
+
+
+
+.brown *
+	--theme-50 hextorgb(#EFEBE9)
+	--theme-100 hextorgb(#D7CCC8)
+	--theme-200 hextorgb(#BCAAA4)
+	--theme-300 hextorgb(#A1887F)
+	--theme-400 hextorgb(#8D6E63)
+	--theme-500 hextorgb(#795548)
+	--theme-600 hextorgb(#6D4C41)
+	--theme-700 hextorgb(#5D4037)
+	--theme-800 hextorgb(#4E342E)
+	--theme-900 hextorgb(#3E2723)
+
+.blue-gray *
+	--theme-50 hextorgb(#ECEFF1)
+	--theme-100 hextorgb(#CFD8DC)
+	--theme-200 hextorgb(#B0BEC5)
+	--theme-300 hextorgb(#90A4AE)
+	--theme-400 hextorgb(#78909C)
+	--theme-500 hextorgb(#607D8B)
+	--theme-600 hextorgb(#546E7A)
+	--theme-700 hextorgb(#455A64)
+	--theme-800 hextorgb(#37474F)
+	--theme-900 hextorgb(#263238)

src/config.styl

@@ -1,7 +1,13 @@
+// native RGBA function to replace Stylus rgba function
+nativeRGBA(color, opacity)
+	unquote('rgba(') color unquote(', ') opacity unquote(');')
+nativeRGB(color)
+	unquote('rgb(') color unquote(');')
 
-$main = #4285F4
+// @deprecated
+$main = nativeRGB(var(--theme-color))
 $textOnMain = white
-$mainGradient = linear-gradient(to right, $main, lighten($main, 20%))
+$mainGradient = linear-gradient(to right, $main, nativeRGB(var(--theme-color)))
 
 $infoDark = #01579B
 $infoLight = #29B6F6
@@ -15,10 +21,10 @@ $errorLight = #F44336
 $warningDark = #C43E00
 $warningLight = #FF9800
 
-$backgroundDark = darken($main, 92%)
+$backgroundDark = nativeRGB(var(--gray-900))
-$backgroundLight = lighten($main, 94%)
+$backgroundLight = nativeRGB(var(--gray-50))
-$foregroundDark = #202020
+$foregroundDark = nativeRGB(var(--gray-800))
-$foregroundLight = #FFFFFF
+$foregroundLight = nativeRGB(var(--theme-50))
 
 // Light theme grays
 $darkGrayLight = #777
@@ -27,6 +33,7 @@ $lightGrayLight = #F4F4F4
 // Dark theme grays
 $darkGrayDark = #444
 $lightGrayDark = #AAA
+// -@deprecated
 
 $transitionTime = .15s
 $transitionFunction = ease-in-out
@@ -52,4 +59,4 @@ rem($a)
 use('stylusUtils.js')
 
 // Import theme in the root folder of the project
-@import '../../../../../../theme' if file-exists('../../../../../../theme.styl')
+@import '../../../../../theme' if file-exists('../../../../../theme.styl')

src/general.styl

@@ -1,5 +1,6 @@
 //@import "_aileron"
 @import "config"
+@import "colors"
 
 *
 *::before
@@ -7,10 +8,10 @@
 	box-sizing border-box
 
 	scrollbar-width 16px
-	scrollbar-color darken($foregroundLight, 16%) $foregroundLight
+	// scrollbar-color nativeRGB(var(--theme-50)) nativeRGB(var(--theme-50))
-	@media (prefers-color-scheme dark)
+	// @media (prefers-color-scheme dark)
-		scrollbar-color lighten($foregroundDark, 16%) $foregroundDark
+	// 	scrollbar-color nativeRGB(var(--gray-800)) nativeRGB(var(--gray-800))
-	font-family: ui-system, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif
+	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
 
@@ -22,10 +23,10 @@ body
 body > div[id="__next"]
 	margin 0
 	min-height 100vh
-	background $backgroundLight
+	background nativeRGB(var(--gray-50))
 
 	@media (prefers-color-scheme dark)
-		background $backgroundDark
+		background nativeRGB(var(--gray-900))
 
 a
 	color inherit
@@ -35,26 +36,25 @@ a
 ::-webkit-scrollbar
 	width 16px
 
-
 /* Track */
 ::-webkit-scrollbar-corner
 ::-webkit-scrollbar-track
-	background $foregroundLight
+	background nativeRGB(var(--theme-50))
 	transition $transition
 	@media (prefers-color-scheme dark)
-		background $foregroundDark
+		background nativeRGB(var(--gray-800))
 
-::-webkit-scrollbar-thumb
+// ::-webkit-scrollbar-thumb
-	background: darken($foregroundLight, 16%)
+// 	background: darken(nativeRGB(var(--theme-50)), 16%)
-	transition $transition
+// 	transition $transition
-	@media (prefers-color-scheme dark)
+// 	@media (prefers-color-scheme dark)
-		background lighten($foregroundDark, 16%)
+// 		background lighten(nativeRGB(var(--gray-800)), 16%)
-	&:hover
+// 	&:hover
-		background: darken($foregroundLight, 24%)
+// 		background: darken(nativeRGB(var(--theme-50)), 24%)
-		@media (prefers-color-scheme dark)
+// 		@media (prefers-color-scheme dark)
-			background: lighten($foregroundDark, 24%)
+// 			background: lighten(nativeRGB(var(--gray-800)), 24%)
 
-		&:active
+// 		&:active
-			background: darken($foregroundLight, 32%)
+// 			background: darken(nativeRGB(var(--theme-50)), 32%)
-			@media (prefers-color-scheme dark)
+// 			@media (prefers-color-scheme dark)
-				background: lighten($foregroundDark, 32%)
+// 				background: lighten(nativeRGB(var(--gray-800)), 32%)

src/index.ts

@@ -15,7 +15,6 @@ import Container from './Container'
 import DebugCols from './Col/DebugCols'
 import Footer from './Footer'
 import Fieldset from './Fieldset'
-import GradientBackground from './GradientBackground'
 import Image from './Image'
 import Input from './Input'
 import Link from './Link'
@@ -45,7 +44,6 @@ export {
 	DebugCols,
 	Footer,
 	Fieldset,
-	GradientBackground,
 	Image,
 	Input,
 	Link,