30:[] 2e:{"title":"Using React95","cells":[{"id":0,"value":"md`# Using React95\n\n- Program (full screen): https://observablehq.com/embed/@hastebrot/using-react95?cell=program\n- React95 (style guide): https://storybook.react95.io/?path=/story/tabs--default\n- Bitmap font by Lou Huang licensed under Creative Commons License ([CC BY-SA 3.0](https://creativecommons.org/licenses/by-sa/3.0/)): https://github.com/arturbien/React95/tree/v3.1.0/src/assets/fonts/src/ms-sans-serif\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"program = React.render(htm`<${Program} />`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"Program = () => {\n const { List, ListItem, Divider } = react95\n return htm`\n <${WinContainer}>\n <${List}>\n <${ListItem} size=\"sm\">View\n <${Divider} />\n <${ListItem} size=\"sm\">Paste\n <${ListItem} size=\"sm\">Paste Shortcut\n <${ListItem} size=\"sm\">Undo Copy\n <${Divider} />\n <${ListItem} size=\"sm\">Properties\n \n \n `\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"WinContainer = ({ children, theme = react95_theme, ...otherProps }) => {\n const { createGlobalStyle, ThemeProvider } = styled\n const { styleReset } = react95\n //const GlobalStyle = createGlobalStyle`\n // ${styleReset};\n //`\n return htm`\n <${WinStyleContainer} backgroundColor=${theme.backgroundColor} ...${otherProps}>\n <${ThemeProvider} theme=${theme}>\n ${children}\n \n \n `\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"WinStyleContainer = styled.div`\n ${winFontFaces};\n\n font-family: 'MS Sans Serif', sans-serif;\n background: ${props => props.backgroundColor} none repeat scroll 0% 0%;\n padding: 2rem;\n\n & {\n hr { padding: unset; }\n }\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"winFontFaces = styled.css`\n @font-face {\n font-family: 'MS Sans Serif';\n src: url('${react95_font_normal_url}') format('woff2');\n font-weight: normal; /* 400 */\n font-style: normal;\n }\n @font-face {\n font-family: 'MS Sans Serif';\n src: url('${react95_font_bold_url}') format('woff2');\n font-weight: bold; /* 700 */\n font-style: normal;\n }\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import { React, ReactDOM, htm, styled } from \"@hastebrot/react@356\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"react95_version = \"3.3.0\" // https://github.com/arturbien/React95/releases","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"react95 = {\n const requires = require.alias({\n \"react95\": `https://unpkg.com/react95@${react95_version}/dist/cjs/index.js`,\n })\n const modules = {\n \"react\": React,\n \"react-dom\": ReactDOM,\n \"styled-components\": { ...styled, default: styled },\n }\n const _exports = window.exports = {}\n const _require = window.require = name => modules[name]\n return requires(\"react95\").catch(() => _exports)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"react95_theme = ({\n name: 'original',\n backgroundColor: 'teal',\n anchor: '#1034a6',\n anchorVisited: '#440381',\n borderDark: '#848584',\n borderDarkest: '#0a0a0a',\n borderLight: '#dfdfdf',\n borderLightest: '#fefefe',\n canvas: '#ffffff',\n canvasText: '#0a0a0a',\n canvasTextDisabled: '#848584',\n canvasTextDisabledShadow: '#fefefe',\n canvasTextInvert: '#fefefe',\n checkmark: '#0a0a0a',\n checkmarkDisabled: '#848584',\n flatDark: '#9e9e9e',\n flatLight: '#d8d8d8',\n focusSecondary: '#fefe03',\n headerBackground: '#060084',\n headerNotActiveBackground: '#7f787f',\n headerNotActiveText: '#c6c6c6',\n headerText: '#fefefe',\n hoverBackground: '#060084',\n material: '#c6c6c6',\n materialDark: '#9a9e9c',\n materialText: '#0a0a0a',\n materialTextDisabled: '#848584',\n materialTextDisabledShadow: '#fefefe',\n materialTextInvert: '#fefefe',\n progress: '#060084',\n tooltip: '#fefbcc',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"react95_theme_2k = ({\n name: 'millenium',\n backgroundColor: '#3a6ea5',\n anchor: '#1034a6',\n anchorVisited: '#440381',\n borderDark: '#828282',\n borderDarkest: 'black',\n borderLight: '#e5e5e5',\n borderLightest: '#ffffff',\n canvas: '#ffffff',\n canvasText: 'black',\n canvasTextDisabled: '#828282',\n canvasTextDisabledShadow: '#ffffff',\n canvasTextInvert: '#ffffff',\n checkmark: 'black',\n checkmarkDisabled: '#828282',\n flatDark: '#9e9e9e',\n flatLight: '#d8d8d8',\n focusSecondary: '#fefe03',\n headerBackground: 'linear-gradient(to right, #012470, #a5c7e7)',\n headerNotActiveBackground: '#7f7f7f',\n headerNotActiveText: '#d6cfc7',\n headerText: '#ffffff',\n hoverBackground: '#00256e',\n material: '#d6cfc7',\n materialDark: '#9a9e9c',\n materialText: 'black',\n materialTextDisabled: '#828282',\n materialTextDisabledShadow: '#ffffff',\n materialTextInvert: '#ffffff',\n progress: '#00256e',\n tooltip: '#fefbcc',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"react95_theme_original_url = `https://unpkg.com/react95@${react95_version}/dist/themes/original.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"react95_font_normal_url = `https://unpkg.com/react95@${react95_version}/dist/fonts/ms_sans_serif.woff2`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"react95_font_bold_url = `https://unpkg.com/react95@${react95_version}/dist/fonts/ms_sans_serif_bold.woff2`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}