feat: Remove post install compilation

Signed-off-by: Avior <github@avior.me>
This commit is contained in:
Florian Bouillon 2022-10-04 00:51:39 +02:00
parent 6f8c627e33
commit c47a02c529
Signed by: Florian Bouillon
GPG Key ID: BEEAF3722D0EBF64
13 changed files with 288 additions and 288 deletions

View File

@ -1,4 +1,8 @@
.github/ .github/
src/
README.md
tsconfig.json
vite.config.js
.storybook/ .storybook/
node_modules/ node_modules/
*.stories.js *.stories.js

View File

@ -10,11 +10,16 @@
"@storybook/builder-vite": "^0.2.2", "@storybook/builder-vite": "^0.2.2",
"@storybook/cli": "^6", "@storybook/cli": "^6",
"@storybook/react": "^6", "@storybook/react": "^6",
"@types/json5": "^2",
"@types/node": "^18", "@types/node": "^18",
"@types/react": "^18",
"@types/react-dom": "^18",
"next": "^12", "next": "^12",
"react": "^18", "react": "^18",
"react-dom": "^18", "react-dom": "^18",
"style-loader": "^3" "style-loader": "^3",
"typescript": "^4",
"vite": "^3"
}, },
"peerDependencies": { "peerDependencies": {
"next": ">=11.0.0", "next": ">=11.0.0",
@ -24,16 +29,10 @@
"scripts": { "scripts": {
"dev": "start-storybook --port 6006 --no-version-updates --disable-telemetry --no-manager-cache --modern --no-open", "dev": "start-storybook --port 6006 --no-version-updates --disable-telemetry --no-manager-cache --modern --no-open",
"build": "npx vite build && npx tsc --emitDeclarationOnly", "build": "npx vite build && npx tsc --emitDeclarationOnly",
"prepublishOnly": "npx vite build && npx tsc --emitDeclarationOnly", "prepublishOnly": "npx vite build && npx tsc --emitDeclarationOnly"
"postinstall": "npx vite build && npx tsc --emitDeclarationOnly"
}, },
"dependencies": { "dependencies": {
"@dzeio/object-util": "^1", "@dzeio/object-util": "^1",
"@types/react": "^18", "lucide-react": "^0.88.0"
"@types/json5": "^2",
"@types/react-dom": "^18",
"typescript": "^4",
"lucide-react": "^0.88.0",
"vite": "^3"
} }
} }

View File

@ -31,6 +31,6 @@
width 24px width 24px
height 24px height 24px
display inline-block display inline-block
background nativeRGB(var(--theme-color)) background nativeRGB(var(--theme-500))
border-radius 4px border-radius 4px
margin-right 8px margin-right 8px

View File

@ -17,7 +17,7 @@
justify-content center justify-content center
align-items center align-items center
color white color white
background-color nativeRGB(var(--theme-color)) background-color nativeRGB(var(--theme-500))
// Chrome Specific // Chrome Specific
outline none outline none
@ -33,7 +33,7 @@
&:active &:active
&:focus &:focus
background-color nativeRGB(var(--theme-color)) background-color nativeRGB(var(--theme-500))
color white color white
&.outline &.outline

View File

@ -30,7 +30,7 @@ $backColor = #757575
border-radius 20px border-radius 20px
position absolute position absolute
transition all $transition transition all $transition
background nativeRGB(var(--theme-color)) background nativeRGB(var(--theme-500))
svg svg
transition $transition transition $transition

View File

@ -140,7 +140,7 @@
@media (prefers-color-scheme dark) @media (prefers-color-scheme dark)
color white color white
&:focus &:focus
border-color nativeRGB(var(--theme-color)) border-color nativeRGB(var(--theme-500))
~ svg ~ svg
color @border-color color @border-color

View File

@ -2,7 +2,7 @@
.menu .menu
&.outline &.outline
border 2px solid nativeRGB(var(--theme-color)) border 2px solid nativeRGB(var(--theme-500))
&.hidden &.hidden
display none display none
ul ul

View File

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

View File

@ -59,7 +59,7 @@
background nativeRGB(var(--gray-700)) background nativeRGB(var(--gray-700))
&:active &:active
color white color white
background nativeRGB(var(--theme-color)) background nativeRGB(var(--theme-500))
&.short &.short
width 88px width 88px
.userSpace > div:not(:last-child) .userSpace > div:not(:last-child)
@ -145,7 +145,7 @@
background nativeRGB(var(--gray-700)) background nativeRGB(var(--gray-700))
&:active &:active
color white color white
background nativeRGB(var(--theme-color)) background nativeRGB(var(--theme-500))
padding 8px padding 8px
display flex display flex
@ -169,7 +169,7 @@
&.active > div &.active > div
color white color white
background nativeRGB(var(--theme-color)) background nativeRGB(var(--theme-500))
ul ul
list-style none list-style none
margin 0 margin 0

View File

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

View File

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

View File

@ -5,21 +5,8 @@ nativeRGB(color)
unquote('rgb(') color unquote(');') unquote('rgb(') color unquote(');')
// @deprecated // @deprecated
$main = nativeRGB(var(--theme-color)) $main = nativeRGB(var(--theme-500))
$textOnMain = white $textOnMain = white
$mainGradient = linear-gradient(to right, $main, nativeRGB(var(--theme-color)))
$infoDark = #01579B
$infoLight = #29B6F6
$successDark = #1B5E20
$successLight = #7CB342
$errorDark = #7F0000
$errorLight = #F44336
$warningDark = #C43E00
$warningLight = #FF9800
$backgroundDark = nativeRGB(var(--gray-900)) $backgroundDark = nativeRGB(var(--gray-900))
$backgroundLight = nativeRGB(var(--gray-50)) $backgroundLight = nativeRGB(var(--gray-50))
@ -54,9 +41,3 @@ $gapSize = 16px
rem($a) rem($a)
($a / 16)rem ($a / 16)rem
// See https://github.com/stylus/stylus/issues/1872#issuecomment-86553717
use('stylusUtils.js')
// Import theme in the root folder of the project
@import '../../../../../theme' if file-exists('../../../../../theme.styl')

View File

@ -1,11 +0,0 @@
// See https://github.com/stylus/stylus/issues/1872#issuecomment-86553717
var stylus = require('stylus');
module.exports = function() {
return function(style) {
style.define('file-exists', function(path) {
return !!stylus.utils.lookup(path.string, this.paths);
});
};
};