@xyd-js/theme-picasso 0.1.0-xyd.2

package/src/theme.tsx

@@ -0,0 +1,71 @@
+import React from "react"
+
+import {Hr, Heading} from "@xyd-js/components/writer"
+import {UISidebar} from "@xyd-js/ui"
+import {FwLogo, FwNav, SurfaceTarget} from "@xyd-js/framework/react"
+import {BaseTheme} from "@xyd-js/themes"
+
+// @ts-ignore
+import {SearchButton} from 'virtual-component:Search'
+
+import syntaxHighlight from "./syntaxHighlight"
+
+import "./imports.css"
+
+import "@xyd-js/themes/index.css"
+
+import './index.css';
+import './override.css';
+import './vars.css';
+
+export default class ThemePicasso extends BaseTheme {
+    constructor() {
+        super();
+
+        if (this.settings?.coder) {
+            this.settings.coder.syntaxHighlight = syntaxHighlight;
+        } else {
+            this.settings.coder = {
+                syntaxHighlight: syntaxHighlight,
+            }
+        }
+
+        this.surfaces.define(SurfaceTarget.SidebarTop, <_Search/>);
+    }
+
+    protected Navbar() {
+        return <>
+            <FwNav />
+        </>
+    }
+    
+    public override reactContentComponents() {
+        const components = super.reactContentComponents();
+        const H2 = components.h2;
+
+        return {
+            ...components,
+            h2: (props: any) => {
+                return <>
+                    <Hr/>
+                    <H2 {...props}/>
+                </>
+            },
+        }
+    }
+}
+
+function _Search() {
+    return <>
+        <UISidebar.Item button anchor>
+            <a href="/">
+                <FwLogo/>
+            </a>
+        </UISidebar.Item>
+
+        <UISidebar.Item button anchor>
+            <SearchButton/>
+        </UISidebar.Item>
+    </>
+}
+

package/src/vars.css

@@ -0,0 +1,72 @@
+/* Core */
+:root {
+    --dark8: color(display-p3 .008 .184 .125 / .067);
+    --dark32: color(display-p3 .012 .094 .051 / .095);
+    --color-text: color(display-p3 0.107 0.129 0.118);
+    --color-primary: color(display-p3 0.08 0.5 0.43);
+    --color-primary--active: color(display-p3 0.08 0.5 0.43);
+
+    --xyd-banner-bgcolor: color(display-p3 .004 .643 .494 / .24);
+    --xyd-sidebar-bgcolor: var(--white);
+    --xyd-subnav-bgcolor: var(--white);
+
+    /* Font Sizes */
+    --xyd-font-size-xsmall: 13px;
+    --xyd-font-size-small: 14px;
+    --xyd-font-size-medium: 17px;
+    --xyd-font-size-large: 19px;
+    --xyd-font-size-xlarge: 23px;
+    --xyd-font-size-xxlarge: 27px;
+    --xyd-font-size-2xl: 33px;
+
+    /* Line Heights */
+    --xyd-line-height-xsmall: 17px;
+    --xyd-line-height-small: 20px;
+    --xyd-line-height-medium: 26px;
+    --xyd-line-height-large: 28px;
+    --xyd-line-height-xlarge: 34px;
+    --xyd-line-height-xxlarge: 40px;
+    --xyd-line-height-2xl: 45px;
+}
+
+/* Utils */
+:root {
+    --xyd-page-gutter: 0;
+}
+
+/* Code */
+:root {
+    --xyd-codetabs-color: var(--white);
+
+    --xyd-coder-code-mark-bgcolor: var(--dark80);
+    --xyd-coder-code-mark-border-color: var(--color-primary);
+}
+
+/* Atlas */
+:root {
+    --XydAtlas-Ref-Palette-White: var(--white);
+    --XydAtlas-Ref-Palette-Primary-60: var(--color-primary);
+    --XydAtlas-Ref-Palette-Primary-70: var(--color-primary--active);
+    --XydAtlas-Ref-Palette-Primary-80: var(--color-primary--active);
+
+    --XydAtlas-Ref-Palette-Neutral-10: var(--dark8);
+    --XydAtlas-Ref-Palette-Neutral-20: var(--dark16);
+    --XydAtlas-Ref-Palette-Neutral-30: var(--dark32);
+    --XydAtlas-Ref-Palette-Neutral-40: var(--dark40);
+    --XydAtlas-Ref-Palette-Neutral-70: var(--dark48);
+    --XydAtlas-Ref-Palette-Neutral-80: var(--dark60);
+    --XydAtlas-Ref-Palette-Neutral-100: var(--dark80);
+
+    --XydAtlas-Sys-Color-Text-Primary: var(--color-text);
+}
+
+[data-color-scheme="dark"] {
+    --xyd-codetabs-color: var(--black);
+    --color-text: var(--black);
+}
+@media (prefers-color-scheme: dark) {
+    :root:not([data-color-scheme="light"]):not([data-color-scheme="dark"]) {
+        --xyd-codetabs-color: var(--black);
+        --color-text: var(--black);
+    }
+}

package/tsconfig.json

@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "paths": {
+        "@xyd-js/themes": ["../xyd-themes/src"],
+    },
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "target": "ES6",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noEmit": true,
+    "incremental": false,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true
+  },
+  "include": [
+    "packages/css/src",
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}