mirror of
https://github.com/dzeiocom/components.git
synced 2025-04-23 19:32:14 +00:00
feat: Remove post install compilation
Signed-off-by: Avior <github@avior.me>
This commit is contained in:
parent
6f8c627e33
commit
c47a02c529
@ -1,4 +1,8 @@
|
|||||||
.github/
|
.github/
|
||||||
|
src/
|
||||||
|
README.md
|
||||||
|
tsconfig.json
|
||||||
|
vite.config.js
|
||||||
.storybook/
|
.storybook/
|
||||||
node_modules/
|
node_modules/
|
||||||
*.stories.js
|
*.stories.js
|
||||||
|
17
package.json
17
package.json
@ -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"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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
|
||||||
|
@ -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
|
||||||
|
@ -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
|
||||||
|
@ -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
|
||||||
|
@ -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
|
||||||
|
@ -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
|
||||||
|
@ -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
|
||||||
|
@ -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}
|
||||||
|
499
src/colors.styl
499
src/colors.styl
@ -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
|
||||||
|
)
|
||||||
|
@ -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')
|
|
||||||
|
@ -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);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
};
|
|
Loading…
x
Reference in New Issue
Block a user