var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { createSignal } from \"solid-js\";\n\nfunction App() {\n  const [num, setNum] = createSignal(0);\n  setInterval(() => setNum((num() + 1) % 255), 30)\n\n  return <div>Some Text</div>;\n}\n\nrender(() => <App />, document.getElementById('app'));"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { createSignal } from \"solid-js\";\n\nfunction App() {\n  const [num, setNum] = createSignal(0);\n  setInterval(() => setNum((num() + 1) % 255), 30)\n\n  return (\n    <div style={{\n      color: `rgb(${num()}, 180, ${num()})`,\n      \"font-weight\": 800,\n      \"font-size\": `${num()}px`}}\n    >\n      Some Text\n    </div>\n  );\n}\n\nrender(() => <App />, document.getElementById('app'));"
		}
	]
};
var markdown = "Solid の `style` 属性は、スタイルの文字列かオブジェクトのどちらかを受け付けます。ただし、オブジェクトの形式は `Element.prototype.style` とは異なり、代わりに `style.setProperty` を呼び出すためのラッパーとなります。これは、キーが \"backgroundColor \"ではなく \"background-color \"のようにダッシュケース形式をとることを意味します。これは CSS 変数を設定できるということです:\n\n```js\n<div style={{ \"--my-custom-color\": themeColor() }} />\n```\n\nそれでは、いくつかのインラインスタイルを使って、div をアニメーションしてみましょう:\n```jsx\n<div style={{\n  color: `rgb(${num()}, 180, ${num()})`,\n  \"font-weight\": 800,\n  \"font-size\": `${num()}px`}}\n>\n  Some Text\n</div>\n```\n";
var bindings_style = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

export { bindings_style as default, lesson, markdown, solved };
