Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit d201435

Browse files
codebender828codebender828
committed
chore: improve landing page
1 parent cd394c1 commit d201435

File tree

19 files changed

+7093
-103
lines changed

19 files changed

+7093
-103
lines changed

‎package.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
"repository": "https://github.com/chakra-ui/chakra-ui-vue-next.git",
77
"author": "Jonathan Bakebwa codebender828@gmail.com",
88
"workspaces": [
9-
"packages/*"
9+
"packages/*",
10+
"website"
1011
],
1112
"scripts": {
1213
"postinstall": "yarn bootstrap",
@@ -20,6 +21,7 @@
2021
"docs:dev": "vitepress dev docs",
2122
"docs:build": "vitepress build docs",
2223
"docs:serve": "vitepress serve docs",
24+
"website": "yarn workspace @chakra-ui/vue-docs",
2325
"core": "yarn workspace @chakra-ui/vue-next",
2426
"nuxt": "yarn workspace @chakra-ui/nuxt-next",
2527
"system": "yarn workspace @chakra-ui/vue-system",
@@ -99,7 +101,7 @@
99101
"vue-router": "4.0.0-beta.10"
100102
},
101103
"dependencies": {
102-
"@chakra-ui/styled-system": "^1.4.1",
104+
"@chakra-ui/styled-system": "^1.8.0",
103105
"@emotion/css": "^11.1.3",
104106
"@emotion/server": "^11.0.0",
105107
"@types/lodash.camelcase": "^4.3.6",

‎packages/c-flex/src/flex.ts

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,52 @@
11
import { h, defineComponent, PropType, reactive } from 'vue'
2+
import type CSS from 'csstype'
23
import { chakra, DOMElements, ThemingProps } from '@chakra-ui/vue-system'
3-
import { SystemStyleObject } from '@chakra-ui/styled-system'
4+
5+
type ArrayOrStringProp<T> = T | T[]
46

57
export interface FlexProps {
68
/**
79
* Shorthand for `alignItems` style prop
810
* @type SystemStyleObject["alignItems"]
911
* SystemStyleObject because prop can be String, Array or Object
1012
*/
11-
align?: SystemStyleObject['alignItems']
13+
align?: ArrayOrStringProp<CSS.Properties['alignItems']>
1214

1315
/**
1416
* Shorthand for `justifyContent` style prop
1517
* @type SystemStyleObject["justifyContent"]
1618
*/
17-
justify?: SystemStyleObject['justifyContent']
19+
justify?: ArrayOrStringProp<CSS.Properties['justifyContent']>
1820

1921
/**
2022
* Shorthand for `flexWrap` style prop
2123
* @type SystemStyleObject["flexWrap"]
2224
*/
23-
wrap?: SystemStyleObject['flexWrap']
25+
wrap?: ArrayOrStringProp<CSS.Properties['flexWrap']>
2426

2527
/**
2628
* Shorthand for `flexDirection` style prop
2729
* @type SystemStyleObject["flexDirection"]
2830
*/
29-
direction?: SystemStyleObject['flexDirection']
31+
direction?: ArrayOrStringProp<CSS.Properties['flexDirection']>
3032

3133
/**
3234
* Shorthand for `flexBasis` style prop
3335
* @type SystemStyleObject["flexBasis"]
3436
*/
35-
basis?: SystemStyleObject['flexBasis']
37+
basis?: ArrayOrStringProp<CSS.Properties['flexBasis']>
3638

3739
/**
3840
* Shorthand for `flexGrow` style prop
3941
* @type SystemStyleObject["flexGrow"]
4042
*/
41-
grow?: SystemStyleObject['flexGrow']
43+
grow?: ArrayOrStringProp<CSS.Properties['flexGrow']>
4244

4345
/**
4446
* Shorthand for `flexShrink` style prop
4547
* @type SystemStyleObject["flexShrink"]
4648
*/
47-
shrink?: SystemStyleObject['flexShrink']
49+
shrink?: ArrayOrStringProp<CSS.Properties['flexShrink']>
4850
}
4951

5052
const CFlex = defineComponent({

‎packages/system/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"watch:types": "cross-env tsc --emitDeclarationOnly --declaration --declarationDir dist/types --watch --incremental"
2121
},
2222
"dependencies": {
23-
"@chakra-ui/styled-system": "^1.4.1",
23+
"@chakra-ui/styled-system": "^1.8.1",
2424
"@chakra-ui/vue-theme": "*",
2525
"@chakra-ui/vue-utils": "*",
2626
"@emotion/css": "^11.1.3",

‎website/.vite-ssg-temp/assets/style.b3bce579.css

Lines changed: 279 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,279 @@
1+
/* https://github.com/antfu/prism-theme-vars */
2+
:root {
3+
--prism-scheme: light;
4+
5+
/* Colors */
6+
--prism-foreground: #6e6e6e;
7+
--prism-background: #f4f4f4;
8+
9+
/* Tokens */
10+
--prism-comment: #a8a8a8;
11+
--prism-string: #555555;
12+
--prism-literal: #333333;
13+
--prism-keyword: #000000;
14+
--prism-function: #4f4f4f;
15+
--prism-deleted: #333333;
16+
--prism-class: #333333;
17+
--prism-builtin: #757575;
18+
--prism-property: #333333;
19+
--prism-namespace: #4f4f4f;
20+
--prism-punctuation: #ababab;
21+
--prism-decorator: var(--prism-class);
22+
--prism-operator: var(--prism-punctuation);
23+
--prism-number: var(--prism-literal);
24+
--prism-boolean: var(--prism-literal);
25+
--prism-variable: var(--prism-literal);
26+
--prism-constant: var(--prism-literal);
27+
--prism-symbol: var(--prism-literal);
28+
--prism-interpolation: var(--prism-literal);
29+
--prism-selector: var(--prism-keyword);
30+
--prism-keyword-control: var(--prism-keyword);
31+
--prism-regex: var(--prism-string);
32+
--prism-json-property: var(--prism-property);
33+
--prism-inline-background: var(--prism-background);
34+
35+
/* Token Styles */
36+
--prism-comment-style: italic;
37+
--prism-url-decoration: underline;
38+
39+
/* Extension */
40+
--prism-line-number: #a5a5a5;
41+
--prism-line-number-gutter: #333333;
42+
--prism-line-highlight-background: #eeeeee;
43+
--prism-selection-background: #aaaaaa;
44+
--prism-marker-color: var(--prism-foreground);
45+
--prism-marker-opacity: 0.4;
46+
--prism-marker-font-size: 0.8em;
47+
48+
/* Font */
49+
--prism-font-size: 1em;
50+
--prism-line-height: 1.5em;
51+
--prism-font-family: monospace;
52+
--prism-inline-font-size: var(--prism-font-size);
53+
--prism-block-font-size: var(--prism-font-size);
54+
55+
/* Sizing */
56+
--prism-tab-size: 2;
57+
58+
--prism-block-padding-x: 1em;
59+
--prism-block-padding-y: 1em;
60+
--prism-block-margin-x: 0;
61+
--prism-block-margin-y: 0.5em;
62+
--prism-block-radius: 0.3em;
63+
--prism-inline-padding-x: 0.3em;
64+
--prism-inline-padding-y: 0.1em;
65+
--prism-inline-radius: 0.3em;
66+
}
67+
div[class*='language-'],
68+
pre[class*='language-'],
69+
code[class*='language-'] {
70+
font-size: var(--prism-font-size);
71+
font-family: var(--prism-font-family);
72+
direction: ltr;
73+
text-align: left;
74+
white-space: pre;
75+
word-spacing: normal;
76+
word-break: normal;
77+
line-height: var(--prism-line-height);
78+
-moz-tab-size: var(--prism-tab-size);
79+
-o-tab-size: var(--prism-tab-size);
80+
tab-size: var(--prism-tab-size);
81+
-webkit-hyphens: none;
82+
-moz-hyphens: none;
83+
-ms-hyphens: none;
84+
hyphens: none;
85+
color: var(--prism-foreground) !important;
86+
}
87+
/* Code blocks */
88+
div[class*='language-'],
89+
pre[class*='language-'] {
90+
font-size: var(--prism-block-font-size);
91+
padding: var(--prism-block-padding-y) var(--prism-block-padding-x);
92+
margin: var(--prism-block-margin-y) var(--prism-block-margin-x);
93+
border-radius: var(--prism-block-radius);
94+
overflow: auto;
95+
background: var(--prism-background);
96+
}
97+
/* Inline code */
98+
:not(pre) > code[class*='language-'] {
99+
font-size: var(--prism-inline-font-size);
100+
padding: var(--prism-inline-padding-y) var(--prism-inline-padding-x);
101+
border-radius: var(--prism-inline-radius);
102+
background: var(--prism-inline-background);
103+
}
104+
/* Selection */
105+
pre[class*='language-']::selection,
106+
pre[class*='language-'] ::selection,
107+
code[class*='language-']::selection,
108+
code[class*='language-'] ::selection,
109+
pre[class*='language-']::-moz-selection,
110+
pre[class*='language-'] ::-moz-selection,
111+
code[class*='language-']::-moz-selection,
112+
code[class*='language-'] ::-moz-selection {
113+
background: var(--prism-selection-background);
114+
}
115+
/* Tokens */
116+
.token.comment,
117+
.token.prolog,
118+
.token.doctype,
119+
.token.cdata {
120+
color: var(--prism-comment);
121+
font-style: var(--prism-comment-style);
122+
}
123+
.token.namespace {
124+
color: var(--prism-namespace);
125+
}
126+
.token.interpolation {
127+
color: var(--prism-interpolation);
128+
}
129+
.token.string {
130+
color: var(--prism-string);
131+
}
132+
.token.punctuation {
133+
color: var(--prism-punctuation);
134+
}
135+
.token.operator {
136+
color: var(--prism-operator);
137+
}
138+
.token.keyword.module,
139+
.token.keyword.control-flow {
140+
color: var(--prism-keyword-control);
141+
}
142+
.token.url,
143+
.token.symbol,
144+
.token.inserted {
145+
color: var(--prism-symbol);
146+
}
147+
.token.constant {
148+
color: var(--prism-constant);
149+
}
150+
.token.string.url {
151+
text-decoration: var(--prism-url-decoration);
152+
}
153+
.token.boolean,
154+
.language-json .token.boolean {
155+
color: var(--prism-boolean);
156+
}
157+
.token.number,
158+
.language-json .token.number {
159+
color: var(--prism-number);
160+
}
161+
.token.variable {
162+
color: var(--prism-variable);
163+
}
164+
.token.keyword {
165+
color: var(--prism-keyword);
166+
}
167+
.token.atrule,
168+
.token.attr-value,
169+
.token.selector {
170+
color: var(--prism-selector);
171+
}
172+
.token.function {
173+
color: var(--prism-function);
174+
}
175+
.token.deleted {
176+
color: var(--prism-deleted);
177+
}
178+
.token.important,
179+
.token.bold {
180+
font-weight: bold;
181+
}
182+
.token.italic {
183+
font-style: italic;
184+
}
185+
.token.class-name {
186+
color: var(--prism-class);
187+
}
188+
.token.tag,
189+
.token.builtin {
190+
color: var(--prism-builtin);
191+
}
192+
.token.attr-name,
193+
.token.property,
194+
.token.entity {
195+
color: var(--prism-property);
196+
}
197+
.language-json .token.property {
198+
color: var(--prism-json-property);
199+
}
200+
.token.regex {
201+
color: var(--prism-regex);
202+
}
203+
.token.decorator,
204+
.token.annotation {
205+
color: var(--prism-decorator);
206+
}
207+
/* overrides color-values for the Line Numbers plugin
208+
* http://prismjs.com/plugins/line-numbers/
209+
*/
210+
.line-numbers .line-numbers-rows {
211+
border-right-color: var(--prism-line-number);
212+
}
213+
.line-numbers-rows > span:before {
214+
color: var(--prism-line-number-gutter);
215+
}
216+
/* overrides color-values for the Line Highlight plugin
217+
* http://prismjs.com/plugins/line-highlight/
218+
*/
219+
.line-highlight {
220+
background: var(--prism-line-highlight-background);
221+
}
222+
:root {
223+
--prism-font-family: 'Input Mono', monospace;
224+
}
225+
html:not(.dark) {
226+
--prism-foreground: #393a34;
227+
--prism-background: #fbfbfb;
228+
--prism-comment: #8e8f8e;
229+
--prism-string: #a1644c;
230+
--prism-literal: #3a9c9b;
231+
--prism-keyword: #248358;
232+
--prism-function: #7e8a42;
233+
--prism-deleted: #a14f55;
234+
--prism-class: #2b91af;
235+
--prism-builtin: #a52727;
236+
--prism-property: #ad502b;
237+
--prism-namespace: #c96880;
238+
--prism-punctuation: #8e8f8b;
239+
--prism-decorator: #bd8f8f;
240+
--prism-json-property: #698c96;
241+
}
242+
html.dark {
243+
--prism-scheme: dark;
244+
--prism-foreground: #d4cfbf;
245+
--prism-background: #1e1e1e;
246+
--prism-comment: #758575;
247+
--prism-string: #ce9178;
248+
--prism-literal: #4fb09d;
249+
--prism-keyword: #4d9375;
250+
--prism-function: #c2c275;
251+
--prism-deleted: #a14f55;
252+
--prism-class: #5ebaa8;
253+
--prism-builtin: #cb7676;
254+
--prism-property: #dd8e6e;
255+
--prism-namespace: #c96880;
256+
--prism-punctuation: #d4d4d4;
257+
--prism-decorator: #bd8f8f;
258+
--prism-regex: #ab5e3f;
259+
--prism-json-property: #6b8b9e;
260+
--prism-line-number: #888888;
261+
--prism-line-number-gutter: #eeeeee;
262+
--prism-line-highlight-background: #444444;
263+
--prism-selection-background: #444444;
264+
}
265+
h1,
266+
h2,
267+
h3,
268+
h4 {
269+
font-weight: bold;
270+
}
271+
h1 {
272+
font-size: 2em;
273+
}
274+
h2 {
275+
font-size: 1.5em;
276+
}
277+
h3 {
278+
font-size: 1.17em;
279+
}

‎website/src/assets/chakra-ui-logo.svg renamed to ‎website/.vite-ssg-temp/chakra-ui-logo.svg

File renamed without changes.

‎website/.vite-ssg-temp/favicon.ico

4.19 KB
Binary file not shown.

‎website/.vite-ssg-temp/fonts/Inter.woff2

35.7 KB
Binary file not shown.

0 commit comments

Comments
 (0)