diff --git a/apps/docs/components/CodeBlock.js b/apps/docs/components/CodeBlock.js deleted file mode 100755 index 4dbef9af..00000000 --- a/apps/docs/components/CodeBlock.js +++ /dev/null @@ -1,114 +0,0 @@ -/** - * Copyright (c) Meta Platforms, Inc. and affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @format - */ - -import * as React from 'react'; -import * as stylex from '@stylexjs/stylex'; -import {PrismLight as SyntaxHighlighter} from 'react-syntax-highlighter'; -import {useColorMode} from '@docusaurus/theme-common'; -import tsx from 'react-syntax-highlighter/dist/cjs/languages/prism/tsx'; -import bash from 'react-syntax-highlighter/dist/cjs/languages/prism/bash'; -import themeLight from 'react-syntax-highlighter/dist/cjs/styles/prism/material-light'; -import themeDark from 'react-syntax-highlighter/dist/cjs/styles/prism/material-dark'; - -SyntaxHighlighter.registerLanguage('tsx', tsx); -SyntaxHighlighter.registerLanguage('bash', bash); - -function tweakStyle(theme) { - return Object.fromEntries( - Object.entries(theme).map(([key, value]) => [ - key, - Object.fromEntries( - Object.entries(value).map(([k, v]) => { - if (k === 'background') { - return [k, 'transparent']; - } - if (k === 'margin') { - return [k, '0']; - } - if (k === 'padding') { - return [k, '1.25em 1em 0']; - } - return [k, v]; - }), - ), - ]), - ); -} - -function tweakStyleH(theme) { - return Object.fromEntries( - Object.entries(theme).map(([key, value]) => [ - key, - Object.fromEntries( - Object.entries(value).map(([k, v]) => { - if (k === 'background') { - return [k, 'var(--bg2)']; - } - if (k === 'margin') { - return [k, '0']; - } - if (k === 'padding') { - return [k, '1.25em 1em']; - } - return [k, v]; - }), - ), - ]), - ); -} - -const lightTheme = tweakStyle(themeLight); -const darkTheme = tweakStyle(themeDark); - -const lightThemeH = tweakStyleH(themeLight); -const darkThemeH = tweakStyleH(themeDark); - -export default function CodeBlock({ - children, - style, - language = 'tsx', - highlight = false, -}) { - const isDarkTheme = useColorMode().colorMode === 'dark'; - const finalTheme = highlight - ? isDarkTheme - ? darkThemeH - : lightThemeH - : isDarkTheme - ? darkTheme - : lightTheme; - return ( - - {children} - - ); -} - -/** -a11y-dark - OK (background is lightish grey, good for both light and dark mode.) -atom-dark - Quite good, but background has a greenish hue compared to website colors -base16-ateliersulphurpool.light - OK for light mode. -coldark-cold - OK for light mode. -coldark-dark - Kinda Good -duotone-dark - Kinda Good -funky - Interesting - No BG -hopscotch - Too brown -material-dark - Good except for the background -material-light - Good for light mode -material-oceanic - Same as dark, but bg is still bad -nord - Quite Good BG, but bad syntax coloring -okaidia - Decently Good, except for the background -synthwave84 - Viable as is. Looks Neon -vs-dark - Almost Viable as is, but the background is too grey. -vs - -vsc-dark-plus - -*/ diff --git a/apps/docs/components/FeatureCard.js b/apps/docs/components/FeatureCard.js index 2cc8dda3..b7395b11 100644 --- a/apps/docs/components/FeatureCard.js +++ b/apps/docs/components/FeatureCard.js @@ -9,17 +9,7 @@ import * as React from 'react'; import * as stylex from '@stylexjs/stylex'; -import Link from '@docusaurus/Link'; - -let count = 0; - -function useId() { - const [id, setId] = React.useState(null); - React.useEffect(() => { - setId(`id-${++count}`); - }, []); - return id; -} +import useId from './hooks/useId'; export default function FeatureCard({ to, @@ -31,7 +21,7 @@ export default function FeatureCard({ }) { const titleId = useId(); return ( - @@ -47,7 +37,7 @@ export default function FeatureCard({

{children}

- + ); } @@ -57,16 +47,16 @@ const styles = stylex.create({ card: { alignItems: 'center', backgroundColor: 'var(--bg1)', - borderColor: 'hsla(var(--pink-h), var(--pink-s), var(--pink-l), 0.1)', + borderColor: 'hsla(var(--cyan-h), var(--cyan-s), var(--cyan-l), 0.25)', borderRadius: 32, borderStyle: 'solid', borderWidth: 1, - boxShadow: { - default: - '0 2px 4px hsla(var(--pink-h), var(--pink-s), var(--pink-l), 0.1)', - ':hover': - '0 2px 8px hsla(var(--pink-h), var(--pink-s), var(--pink-l), 0.5)', - }, + // boxShadow: { + // default: + // '0 2px 4px hsla(var(--pink-h), var(--pink-s), var(--pink-l), 0.1)', + // ':hover': + // '0 2px 8px hsla(var(--pink-h), var(--pink-s), var(--pink-l), 0.5)', + // }, boxSizing: 'border-box', color: { default: 'inherit', @@ -83,7 +73,7 @@ const styles = stylex.create({ '@container (max-width: 940px)': 'span 1', }, height: '100%', - justifyContent: 'center', + justifyContent: 'flex-start', position: 'relative', transitionProperty: 'box-shadow', transitionDuration: '0.2s', @@ -96,24 +86,17 @@ const styles = stylex.create({ [LARGE]: 'row', }, width: '100%', - alignItems: 'center', + alignItems: 'flex-start', justifyContent: { default: 'center', [LARGE]: 'flex-start', }, - textAlign: { - default: 'center', - [LARGE]: 'left', - }, - padding: { - default: 16, - [LARGE]: 32, - }, + paddingBlock: 16, + paddingInline: 32, columnGap: 32, }, emoji: { fontSize: '8rem', - alignSelf: 'center', marginBlock: '-0.16em', }, title: { @@ -131,6 +114,6 @@ const styles = stylex.create({ marginTop: '1em', fontSize: '1rem', lineHeight: 1.4, - opacity: 0.5, + color: 'var(--fg2)', }, }); diff --git a/apps/docs/components/FeaturePile.js b/apps/docs/components/FeaturePile.js index 0d0d03ab..d7f5ab98 100644 --- a/apps/docs/components/FeaturePile.js +++ b/apps/docs/components/FeaturePile.js @@ -17,45 +17,70 @@ export default function FeaturePile() {
- Scale new heights without being weighed down by the size of CSS - bundles. + subtitle="Scale new heights without bundle sizes weighing you down" + title="Scalable"> + - You shouldn't need a crystal ball to know what styles are applied on - an element. + subtitle="You shouldn't need a crystal ball to know how an element is styled" + title="Predictable"> + - Styles can be passed around as props, and merged deterministically. It - all fits together. + subtitle="Merging styles shouldn't feel like a puzzle" + title="Composable"> + - The StyleX compiler bundles styles into a static CSS file. No runtime - style injection. + subtitle="Dynamic at the speed of static, because it is static" + title="Fast"> + - Safety first! Static types catch common styling mistakes in code. + subtitle="More safety than just your eyes" + title="Type-Safe"> +
@@ -97,4 +122,13 @@ const styles = stylex.create({ }, gridColumn: null, }, + ul: { + marginTop: '0.5rem', + padding: 0, + paddingInline: '1.2rem', + display: 'flex', + flexDirection: 'column', + gap: '0.5rem', + textAlign: 'left', + }, }); diff --git a/apps/docs/components/ZStack.js b/apps/docs/components/ZStack.js index 4c261a5e..806a176b 100644 --- a/apps/docs/components/ZStack.js +++ b/apps/docs/components/ZStack.js @@ -14,55 +14,50 @@ const {useEffect, useState} = React; const styles = stylex.create({ container: { - display: 'inline-flex', - flexDirection: 'column', - height: '1.3em', - position: 'relative', - // borderWidth: 1, - // borderStyle: 'solid', - // borderColor: 'rgba(200, 200, 200, 0.1)', - alignItems: 'flex-start', - // marginInlineStart: '0.5em', - overflow: 'hidden', - }, - itemLayout: { - visibility: 'hidden', + display: 'inline-grid', }, item: { - position: 'absolute', - // top: 0, - // start: 0, + gridArea: '1 / 1', opacity: 0, - transition: 'opacity 0.5s ease-in-out', + transitionProperty: 'opacity', + transitionDuration: '0.5s', + transitionTimingFunction: 'linear', }, visible: { opacity: 1, }, }); -export default function ZStack({children, xstyle}) { +const ActiveItemContext = React.createContext(false); + +export function ZStack({children, xstyle}) { const [active, setActive] = useState(0); useEffect(() => { const interval = setInterval(() => { setActive((active) => (active + 1) % children.length); - }, 2500); + }, 3000); return () => { - setActive(0); clearInterval(interval); }; }, [children.length]); return ( - {children.map((child, _i) => ( - {child} - ))} {children.map((child, i) => ( - + {child} - + ))} ); } + +export function ZStackItem({children, style}) { + const active = React.useContext(ActiveItemContext); + return ( + + {children} + + ); +} diff --git a/apps/docs/components/hooks/useId.js b/apps/docs/components/hooks/useId.js new file mode 100644 index 00000000..e1673dcc --- /dev/null +++ b/apps/docs/components/hooks/useId.js @@ -0,0 +1,20 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + */ + +import * as React from 'react'; + +let count = 0; + +export default function useId() { + const [id, setId] = React.useState(null); + React.useEffect(() => { + setId(`id-${++count}`); + }, []); + return id; +} diff --git a/apps/docs/components/hooks/useViewTransition.js b/apps/docs/components/hooks/useViewTransition.js new file mode 100644 index 00000000..1cb5491e --- /dev/null +++ b/apps/docs/components/hooks/useViewTransition.js @@ -0,0 +1,49 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + */ + +import {useLayoutEffect, useRef} from 'react'; + +export default function useViewTransition() { + const promise = useRef(null); + const transition = useRef(null); + + useLayoutEffect(() => { + if (promise.current) { + promise.current.resolve(); + promise.current = null; + transition.current = null; + } + () => { + if (promise.current) { + promise.current.resolve(); + promise.current = null; + } + if (transition.current) { + transition.current.skipTransition(); + } + }; + }); + + const withAnimation = (callback) => { + if (!document.startViewTransition) { + callback(); + return; + } + + transition.current = document.startViewTransition( + () => + new Promise((resolve, reject) => { + promise.current = {resolve, reject}; + callback(); + }), + ); + }; + + return withAnimation; +} diff --git a/apps/docs/docs/learn/02-installation.mdx b/apps/docs/docs/learn/02-installation.mdx index ffa9f512..eb117a92 100755 --- a/apps/docs/docs/learn/02-installation.mdx +++ b/apps/docs/docs/learn/02-installation.mdx @@ -237,10 +237,10 @@ your styles. -```json -{ - "plugins": ["@stylexjs"], - "rules": { +```tsx title=".eslintrc.js" +module.exports = { + plugins: ["@stylexjs"], + rules: { "@stylexjs/valid-styles": ["error", {...options}], }, }; diff --git a/apps/docs/docs/learn/05-styling-ui/01-defining-styles.mdx b/apps/docs/docs/learn/05-styling-ui/01-defining-styles.mdx index 429cd0f2..4626cfec 100755 --- a/apps/docs/docs/learn/05-styling-ui/01-defining-styles.mdx +++ b/apps/docs/docs/learn/05-styling-ui/01-defining-styles.mdx @@ -13,7 +13,7 @@ styles in React DOM, or styles in React Native. ## Constraints -Since `StyleX` depends on ahead-of-time compilation, it is important for all +Since StyleX depends on ahead-of-time compilation, it is important for all your styles to be statically analyzable. This means that every "Raw Style Object" must only contain: diff --git a/apps/docs/docs/learn/index.mdx b/apps/docs/docs/learn/index.mdx index a5574844..ae19451f 100644 --- a/apps/docs/docs/learn/index.mdx +++ b/apps/docs/docs/learn/index.mdx @@ -20,38 +20,9 @@ superior to what could be authored and maintained by hand. ## Features at a glance -### Predictable +import FeaturePile from '../../components/FeaturePile' -- Style Encapsulation - All styles are applied as class names applied directly - on elements -- No specificity issues -- “The last style applied always wins!” - -### Scalable - -- Minimize CSS output with atomic CSS -- The CSS size plateaus even as the number of components grows -- Styles remain readable and maintainable within growing codebases - -### Flexible & Composable - -- Apply styles conditionally -- Merge and compose arbitrary styles across component and file boundaries -- Use local constants and expressions to keep your styles DRY - - Or repeat yourself without worrying about performance - -### Static & Fast - -- No runtime style injection -- All styles are bundled in a static CSS file at compile-time -- Optimized runtime for merging class names - -### Type-Safe - -- Type-safe APIs -- Type-safe styles -- Type-safe theming -- Type-safe style props + ## Ideal conditions for using StyleX? diff --git a/apps/docs/src/css/custom.css b/apps/docs/src/css/custom.css index 6f4a8f6d..ce541b02 100644 --- a/apps/docs/src/css/custom.css +++ b/apps/docs/src/css/custom.css @@ -57,8 +57,8 @@ --bg2: hsl(0, 0%, 100%); --code-bg: hsl(276, 17%, 96%); - --fg1: hsl(330, 6%, 7%); - --fg2: hsl(251, 19%, 29%); + --fg1: hsl(0, 0%, 0%); + --fg2: hsl(0, 0%, 40%); --link: hsla(202, 100%, 50%, 1); @@ -137,14 +137,14 @@ html[data-theme='dark']:root { --ifm-color-primary-lighter: hsl(295, 52%, 62%); --ifm-color-primary-lightest: hsl(295, 52%, 69%); - --bg1: hsl(249, 30%, 7%); - --bg1-alpha50: hsla(249, 30%, 7%, 0.5); - --bg1-alpha75: hsla(249, 30%, 7%, 0.75); + --bg1: hsl(249, 30%, 3%); + --bg1-alpha50: hsla(249, 30%, 3%, 0.5); + --bg1-alpha75: hsla(249, 30%, 3%, 0.75); --bg2: hsl(249, 35%, 16%); --code-bg: #000000; --fg1: hsl(0, 0%, 100%); - --fg2: hsl(0, 0%, 80%); + --fg2: hsl(0, 0%, 60%); --link: hsl(202, 100%, 57%); --cyan: hsl(249, 70%, 57%); @@ -196,21 +196,6 @@ article .theme-doc-markdown.markdown { padding-inline: 1rem; } -.theme-doc-breadcrumbs { - position: sticky; - top: 60px; - background-color: var(--bg1-alpha75); - backdrop-filter: blur(10px); - z-index: 1; - padding-block: 0.5rem; - margin-block: -0.5rem; -} -@media (max-width: 768px) { - .theme-doc-breadcrumbs { - position: static; - } -} - .aa-DetachedSearchButton { border: 1px solid rgba(128, 126, 163, 0.8); } @@ -258,3 +243,7 @@ html[data-theme='dark'] .aa-DetachedSearchButton { html[data-theme='dark'] .navbar-github-link:after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E"); } + +.navbar--fixed-top { + view-transition-name: navbar; +} diff --git a/apps/docs/src/pages/index.js b/apps/docs/src/pages/index.js index ddafa8a7..3023ce75 100644 --- a/apps/docs/src/pages/index.js +++ b/apps/docs/src/pages/index.js @@ -11,9 +11,11 @@ import * as React from 'react'; import * as stylex from '@stylexjs/stylex'; import Layout from '@theme/Layout'; import StylexAnimatedLogo from '@site/components/StylexAnimatedLogo'; -import CodeBlock from '@site/components/CodeBlock'; import Link from '@docusaurus/Link'; import FeaturePile from '../../components/FeaturePile'; +import {ZStack, ZStackItem} from '../../components/ZStack'; +// import ThinkingInStylex from '../../docs/learn/04-thinking-in-stylex.mdx'; +import CodeBlock from '@theme/CodeBlock'; const STEP_CONFIGURE = `import plugin from '@stylexjs/rollup-plugin'; @@ -68,7 +70,7 @@ const CardDescription = ({children}) => ( const CodeContainer = ({children}) => (
- {children} + {children}
); @@ -82,41 +84,44 @@ export default function Home() {

- - Predictable + The + + {' '} + styling system{' '} {' '} - & scalable{' '} - styling -
for{' '} - - ambitious - {' '} - user-interfaces. + that powers +
+ + + facebook.com + + + instagram.com + + + whatsapp.com + + + threads.net + +

- Get Started → + Get Started - Thinking in StyleX → + Thinking in StyleX
@@ -140,6 +145,11 @@ export default function Home() { + {/*
+
+ +
+
*/} ); @@ -156,7 +166,7 @@ const styles = stylex.create({ alignItems: 'center', backgroundColor: 'var(--bg1)', backgroundImage: - 'radial-gradient(hsla(var(--cyan-h), var(--cyan-s), var(--cyan-l), 0.15), var(--bg1) 70%)', + 'radial-gradient(hsla(var(--cyan-h), var(--cyan-s), var(--cyan-l), 0.3), var(--bg1) 70%)', }, hero: { paddingBlock: 50, @@ -167,7 +177,9 @@ const styles = stylex.create({ justifyContent: 'center', width: '100%', }, - heroPadding: { + bentoContainer: { + width: '100%', + maxWidth: 900, padding: 32, }, title: { @@ -189,7 +201,7 @@ const styles = stylex.create({ paddingInline: 24, fontWeight: '400', textAlign: 'center', - color: 'var(--fg2)', + color: 'var(--fg1)', fontSize: 'clamp(1rem, 1rem + 2vw, 3rem)', }, h3: { @@ -218,9 +230,10 @@ const styles = stylex.create({ alignItems: 'center', justifyContent: 'center', borderRadius: 8, + fontWeight: 'bold', color: { - default: 'var(--fg1)', - ':hover': 'var(--fg1)', + default: 'white', + ':hover': 'white', }, textDecoration: { default: 'none', @@ -235,7 +248,7 @@ const styles = stylex.create({ paddingInline: '2rem', boxShadow: { default: - '0 0 4px hsla(var(--pink-h), var(--pink-s), var(--pink-l), 0.35)', + '0 0 2px hsla(var(--pink-h), var(--pink-s), var(--pink-l), 0.35)', ':hover': '0 0 10px hsla(var(--pink-h), var(--pink-s), var(--pink-l), 0.75)', }, @@ -254,26 +267,37 @@ const styles = stylex.create({ backgroundColor: 'hsl(var(--cyan-h), var(--cyan-s), var(--cyan-l))', boxShadow: { default: - '0 0 4px hsla(var(--cyan-h), var(--cyan-s), var(--cyan-l), 0.35)', + '0 0 2px hsla(var(--cyan-h), var(--cyan-s), var(--cyan-l), 0.35)', ':hover': '0 0 10px hsla(var(--cyan-h), var(--cyan-s), var(--cyan-l), 0.75)', }, }, subtitleHighlight: { - color: 'var(--pink)', fontWeight: '700', - textShadow: - '0 0 10px hsla(var(--pink-h), var(--pink-s), var(--pink-l), 0.5)', }, highlightBlue: { color: 'var(--cyan)', - textShadow: - '0 0 10px hsla(var(--cyan-h), var(--cyan-s), var(--cyan-l), 0.5)', }, highlightPrimary: { color: 'currentColor', textShadow: null, }, + facebook: { + color: '#0866FF', + }, + whatsapp: { + color: 'rgb(30, 169, 82)', + }, + instagram: { + backgroundColor: '#d6249f', + backgroundImage: + 'radial-gradient(circle at 30% 107%, #ddd477 0%, #ddd477 5%, #fd5949 45%,#d6249f 60%, #285AEB 90%)', + WebkitBackgroundClip: 'text', + WebkitTextFillColor: 'transparent', + backgroundClip: 'text', + textFillColor: 'transparent', + }, + threads: {}, sectionTitle: { fontSize: 'clamp(2rem, 1rem + 5vw, 4rem)', width: '100%', @@ -281,8 +305,15 @@ const styles = stylex.create({ marginVertical: '1rem', color: 'var(--fg1)', }, - getStarted: { + secondaryBg: { + width: '100%', backgroundColor: 'var(--bg2)', + paddingBlock: 64, + paddingInline: 32, + }, + contentSection: { + maxWidth: 768, + marginInline: 'auto', }, getStartedLayout: { width: '100%', @@ -321,16 +352,20 @@ const styles = stylex.create({ paddingHorizontal: 24, }, codeContainer: { - flexGrow: 1, + backgroundColor: '#282A36', + borderColor: 'hsla(var(--cyan-h), var(--cyan-s), var(--cyan-l), 0.25)', + borderRadius: 16, + borderStyle: 'solid', + borderWidth: 1, + containerType: 'inline-size', display: 'flex', flexDirection: 'column', - paddingHorizontal: '1rem', - backgroundColor: 'var(--code-bg)', - marginTop: 16, + flexGrow: 1, fontFamily: 'ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace', - borderRadius: 32, - containerType: 'inline-size', + marginTop: 16, + '--ifm-leading': '0px', + overflow: 'hidden', }, code: { flexGrow: 1, diff --git a/apps/docs/src/theme/MDXComponents/Details.js b/apps/docs/src/theme/MDXComponents/Details.js index fb0a2b94..7cb86a5f 100644 --- a/apps/docs/src/theme/MDXComponents/Details.js +++ b/apps/docs/src/theme/MDXComponents/Details.js @@ -7,22 +7,42 @@ * @format */ -import React from 'react'; +import * as React from 'react'; +import {useState} from 'react'; import * as stylex from '@stylexjs/stylex'; import {tokens} from './DetailsTokens.stylex'; -export default function MDXDetails({children: _children, style, ...props}) { +export default function MDXDetails({ + children: _children, + style, + mdxType: _1, + originalType: _2, + open = false, + ...props +}) { + const [isOpen, setIsOpen] = useState(open); + + const onToggle = (e) => { + e.preventDefault(); + setIsOpen(!isOpen); + }; + const items = React.Children.toArray(_children); // Split summary item from the rest to pass it as a separate prop to the // Details theme component const summary = items.find( (item) => React.isValidElement(item) && item.props?.mdxType === 'summary', ); + const {mdxType: _3, originalType: _4, ...summaryProps} = summary.props; const children = <>{items.filter((item) => item !== summary)}; return ( -
- +
+ {children}
);