forked from stylify/web
-
Notifications
You must be signed in to change notification settings - Fork 0
/
stylify.config.js
171 lines (160 loc) · 6.64 KB
/
stylify.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
import { hooks } from '@stylify/stylify';
import { defineConfig } from '@stylify/nuxt-module';
hooks.addListener('compiler:newMacroMatch', ({selectorProperties}) => {
const pixelUnit = selectorProperties.properties['font-size'];
if (typeof pixelUnit === 'undefined' || !pixelUnit.endsWith('px')) {
return;
}
const pixelFontSize = Number(pixelUnit.slice(0,-2));
const remFontSize = pixelFontSize / 10;
selectorProperties.addMultiple({
'font-size': `${remFontSize}rem`,
'line-height': `${remFontSize * (pixelFontSize >= 28 ? 1.2 : 1.7)}rem`
});
});
export default defineConfig({
compiler: {
ignoredAreas: [
/\b((?:docs__aside|js-main-nav)-link)/,
// Ignore code areas in docs
/`{3}\S+([\s\S]+?)`{3}/
],
// #0f172a
variables: {
blue1: '#01befe',
blue2: '#f2fcff',
blue3: '#0a101d',
blue4: '#99a6b8',
blue5: '#36425b',
blue6: '#0e1526cc',
orange1: '#fe9901',
orange2: '#fff9f2',
grey1: '#f8f9fa',
grey2: '#222',
grey3: '#e5e7eb',
grey4: '#71717a',
grey5: '#cecfd2',
shadow1: 'rgb(99 99 99 / 20%) 0px 2px 8px 0px',
shadow2: '0 2px 12px rgba(0, 0, 0, 0.25)',
radius1: '4px',
radius2: '8px',
stickyHeaderMargin: '62px'
},
keyframes: {
bounce: `
from, 20%, 53%, 80%, to {
transform: translate3d(0, 0, 0);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
40%, 43% {
transform: translate3d(0, -19px, 0);
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
}
70% {
transform: translate3d(0, -10px, 0);
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
}
90% {
transform: translate3d(0, -4px, 0);
}
`
},
customSelectors: {
// Global
html: 'color-scheme:dark',
'*': 'box-sizing:border-box scroll-behavior:smooth',
'body': 'font-size:16px color:$grey5 background-color:$blue3',
'img,video': 'max-width:100% object-fit:contain',
textarea: 'outline:none',
hr: 'border:0 height:1px background:lighten($blue3,40)',
'::selection': 'color:#fff background:$blue1',
'.prism-editor-wrapper *': 'font-size:14px line-height:24px',
'li': `
p {
&:first-of-type { margin-top:0 }
&:last-of-type { margin-bottom:0 }
}
`,
// Articles common
'h1,h2,h3,h4,h5,h6': 'color:#fefefe scroll-margin-top:80px',
'article': 'margin-top:0 font-size:16px word-break:break-word',
'article iframe, article img': 'max-width:100% filter:brightness(.8)_contrast(1.2)',
'article h1': 'cursor:pointer margin-top:0 font-size:30px md:font-size:34px margin-bottom:8px',
'article h2': 'cursor:pointer position:relative font-size:26px margin-top:48px margin-bottom:0',
'article h3': 'cursor:pointer position:relative font-size:20px margin-top:32px margin-bottom:0',
'article h4': 'cursor:pointer position:relative margin-top:24px margin-bottom:0',
'article h1 + p, article h2 + p, article h3 + p, article h4 + p, article h5 + p': 'margin-top:0',
'article pre': 'margin-top:0',
'article a': 'color:$blue1',
'article table': 'margin-bottom:24px min-width:800px',
'article table td': 'word-break:keep-all border-bottom:1px_solid_#1e2431 padding:4px',
'article table th': 'text-align:left padding:4px',
'article table thead': 'position:sticky top:0 left:0 background-color:lighten($blue3,20) backdrop-filter:blur(12px)',
'article .note': 'margin:16px_0',
'article .note, article .note *': 'font-size:14px',
'article .example-editor': 'margin:24px_0',
'article * a[href^="#"][aria-hidden=true]': 'display:inline-block font-size:18px visibility:hidden padding:4px line-height:1 position:absolute top:50% text-decoration:none left:-24px transform:translateY(-50%)',
'article h2:hover > a[href^="#"][aria-hidden=true], article h3:hover > a[href^="#"][aria-hidden=true], article h4:hover > a[href^="#"][aria-hidden=true]': 'visibility:visible',
'article .nuxt-content-highlight': 'font-size:14px',
'.nuxt-content .nuxt-content-highlight': 'position:relative margin-top:24px margin-bottom:24px',
'.hp__example-editor .example-editor': 'min-height:400px md:min-height:300px align-items:flex-start',
// Editor
'.client-only-placeholder': 'display:flex align-self:center',
// Docs
'.docs__aside-link.nuxt-link-active': 'font-weight:bold color:$blue1 background-color:lighten($blue3,20)'
},
components: {
'field__wrapper': 'position:relative display:flex',
'field': `
width:100% padding:12px border-radius:4px min-height:50px background:#fff color:$blue3 outline:none
&:focus+label, &:not(:placeholder-shown)+label { top:0 background:#fff }
`,
'field__label': 'position:absolute top:50% transform:translateY(-50%) max-width:calc(100%_-_16px) will-change:top transition:top_0.2s,background_0.2s left:8px padding:0_4px font-weight:bold',
'field-pair-rounded': `
display:flex flex-direction:column sm:flex-direction:row justify-content:center align-items:stretch
[type="submit"] { justify-content:center text-align:center font-size:20px sm:margin-left:-116px }
[type="email"] { border-color:transparent flex:1 border-radius:50px padding:0_24px outline:none display:flex border-color:transparent width:100% tosm:margin-bottom:12px sm:width:calc(100%_-_131px) sm:padding-right:130px }
`,
'bounce-animation': `
animation-name:bounce
animation-duration:2s
animation-timing-function:cubic-bezier(0.32,0.31,0.18,0.96)
animation-delay:4s
animation-iteration-count:3
animation-fill-mode:forwards
`,
// Global
container: `
max-width:1280px margin-left:auto scroll-margin-top:50px margin-right:auto padding-left:8px padding-right:8px
md:padding-left:12px md:padding-right:12px
lg:padding-left:24px lg:padding-right:24px
&-lg { max-width:1920px }
`,
btn: `
background-color:$blue1 white-space:nowrap line-height:1 transition:background-color_0.3s,_color_0.3s cursor:pointer color:#fff text-decoration:none font-weight:bold
border-radius:$radius2 padding:8px_12px md:padding:12px_24px display:inline-flex align-items:center
hover:background-color:darken($blue1,10)
`,
'btn--transparent': `
&.btn {
background:none hover:background-color:rgba(1,190,254,0.1)
}
`,
'visually-hidden': `
position:absolute!important
overflow:hidden
clip:rect(0_0_0_0)
width:1px
height:1px
margin:-1px
padding:0
border:0
`,
badge: `
min-height:36px display:inline-flex align-items:center white-space:nowrap padding:4px font-size:14px
color:#fff border:2px_solid_#f1f1f1 border-radius:4px text-decoration:none transition:background_0.3s hover:background:rgba(255,255,255,0.2)
`,
'link': 'color:$blue1 display:inline-flex align-items:center'
}
},
});