@xyd-js/theme-gusto 0.0.0-build

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@xyd-js/theme-gusto",
+  "version": "0.0.0-build+6952c2c-20250813013245",
+  "description": "",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    "./index.css": "./dist/index.css",
+    ".": {
+      "import": "./dist/index.js"
+    },
+    "./presets/*": "./dist/presets/*"
+  },
+  "dependencies": {
+    "@linaria/core": "^6.2.0"
+  },
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router": "^7.7.1",
+    "@xyd-js/atlas": "0.0.0-build+6952c2c-20250813013245",
+    "@xyd-js/components": "0.0.0-build+6952c2c-20250813013245",
+    "@xyd-js/framework": "0.0.0-build+6952c2c-20250813013245",
+    "@xyd-js/themes": "0.0.0-build+6952c2c-20250813013245",
+    "@xyd-js/ui": "0.0.0-build+6952c2c-20250813013245"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "clean": "rimraf build",
+    "build": "rollup -c rollup.config.js"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,3 @@
+import themeRollup from '@xyd-js/themes/rollup';
+
+export default themeRollup(import.meta.url)

package/src/imports.css

@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

package/src/index.css

@@ -0,0 +1,6 @@
+@layer themes {
+    :root {
+        --font-body-family: "Inter", sans-serif;
+        --font-body-weight: 400;
+    }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export {default} from "./theme"

package/src/override.css

@@ -0,0 +1,122 @@
+@import "@xyd-js/themes/dist/decorators/header-sketch.css";
+@import "@xyd-js/themes/dist/decorators/sidebar-scroll.css";
+
+@layer themes {
+    :root {
+        --decorator-sketch-border-color: var(--dark32);
+        --decorator-sidebar-scroll-bgcolor: var(--dark48);
+        --color-header-border: var(--decorator-sketch-border-color);
+        --xyd-sidebar-divider-color: var(--decorator-sketch-border-color);
+    }
+}
+
+@layer themes {
+    xyd-layout-primary {
+        --xyd-layout-width-small: 700px;
+        --xyd-layout-width-medium: 900px;
+        --xyd-layout-width-large: 1100px;
+
+        @media (min-width: 1024px) {
+            &:not([data-layout="page"]) header[part="header"] {
+                display: none;
+            }
+
+            &:not([data-layout="page"]):not([data-layout="reader"]) {
+                [part="page"] {
+                    left: var(--xyd-sidebar-width);
+                    margin-right: var(--xyd-sidebar-width);
+                }
+                footer {
+                    margin-left: var(--xyd-sidebar-width);
+                }
+            }
+
+            &:not([data-layout="page"]):not([data-layout="wide"]) {
+                [part=page-article] {
+                    max-width: var(--xyd-layout-width-small);
+                }
+            }
+        }
+
+        [part="sidebar"] {
+            position: fixed;
+            top: var(--xyd-page-gutter);
+            z-index: 10;
+        }
+
+        [part="page"] {
+            position: relative;
+            right: 0;
+        }
+
+        [part=page-container]  {
+            max-width: 100%;
+        }
+
+        [part=page-article] {
+            margin: 0 auto;
+        }
+
+        /* component: SubNav */
+        xyd-subnav {
+            padding: 0;
+
+            [part="list"] {
+                padding: 0 var(--xyd-nav-item-padding);
+                margin-left: var(--xyd-nav-item-padding);
+            }
+        }
+
+        @media (min-width: 1024px) {
+
+            /* component: Nav */
+            xyd-nav {
+                [part="nav"] {
+                    padding-left: 0;
+                }
+
+                [part="nav"]>*:first-child {
+                    position: relative;
+                    left: calc(var(--xyd-sidebar-width));
+                    margin-left: var(--xyd-nav-item-padding);
+                }
+            }
+
+            /* component: SubNav */
+            xyd-subnav {
+                position: relative;
+                left: calc(var(--xyd-sidebar-width) / 1);
+                width: calc(100% - var(--xyd-sidebar-width));
+            }
+        }
+
+        xyd-sidebar-tabs-dropdown {
+            [part="dropdown-trigger"] {
+                border-radius: var(--xyd-border-radius-medium);
+                /* padding: 8px 8px; */
+
+                [part="dropdown-icon"] {
+                    color: var(--color-primary);
+                }
+                [part="dropdown-icon"] svg {
+                    width: 16px !important;
+                    height: 16px !important;
+                }
+            }
+        }
+
+        xyd-search-button {
+            height: 40px;
+        }
+        
+        xyd-sidebar-tabs-dropdown [part="dropdown-trigger"],  xyd-search-button {
+            border-radius: var(--xyd-button-border-radius, 8px);
+        }
+
+        xyd-sidebar {
+            [part=item-button]::after {
+                width: 10px;
+            }
+        }
+    }
+}

package/src/theme.tsx

@@ -0,0 +1,67 @@
+import React, {} from "react"
+
+import {css} from "@linaria/core";
+
+import {ColorSchemeButton} from "@xyd-js/components/writer";
+import {UISidebar} from "@xyd-js/ui";
+import {BaseTheme} from "@xyd-js/themes"
+import {FwLogo} from "@xyd-js/framework/react";
+import syntaxThemeClassic from "@xyd-js/components/coder/themes/classic.js"
+
+import "./imports.css"
+
+import "@xyd-js/themes/index.css"
+import "@xyd-js/components/coder/themes/classic.css"
+
+import './index.css';
+import './vars.css';
+import './override.css';
+
+const styles = {
+    SidebarTop: css`
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+    `
+}
+
+export default class ThemeGusto extends BaseTheme {
+    constructor() {
+        super()
+
+        this.theme.Update({
+            coder: {
+                syntaxHighlight: syntaxThemeClassic
+            },
+            appearance: {
+                search: {
+                    sidebar: true
+                },
+                tabs: {
+                    surface: "sidebar"
+                },
+                buttons: {
+                    rounded: "lg"
+                }
+            }
+        })
+
+        this.surfaces.define("sidebar.top", <_SidebarTop/>);
+    }
+}
+
+function _SidebarTop() {
+    return <>
+        <UISidebar.Item ghost>
+            <div className={styles.SidebarTop}>
+                <FwLogo/>
+                <div>
+                    <ColorSchemeButton/>
+                </div>
+            </div>
+        </UISidebar.Item>
+    </>
+}
+
+

package/src/vars.css

@@ -0,0 +1,61 @@
+@import "@xyd-js/themes/dist/decorators/atlas-vars.css";
+
+/* Core */
+:root {
+    --dark32: #ececf1;
+    --dark48: #484444;
+    --color-text: #000;
+    --color-primary: #10a37f;
+    --color-primary--active: #1a7f64;
+
+    --theme-color-primary: var(--color-primary);
+    /* --theme-color-primary-active: var(--color-primary--active); */
+    --color-primary--active: color-mix(in srgb, var(--color-primary) 85%, transparent);
+}
+
+/* Utils */
+:root {
+    --xyd-page-gutter: 0;
+}
+
+/* Subnav */
+:root {
+    --xyd-subnav-bgcolor: var(--white);
+}
+
+/* Banner Item */
+:root {
+    --xyd-banner-bgcolor: color(display-p3 .004 .643 .494 / .24);
+}
+
+/* Sidebar */
+:root {
+    --xyd-sidebar-width: 320px;
+    --xyd-sidebar-bgcolor: var(--white);
+}
+
+/* Coder */
+:root {
+    --xyd-codetabs-color: var(--color-text);
+
+    --xyd-coder-code-mark-bgcolor: var(--dark32);
+    --xyd-coder-code-mark-border-color: var(--color-primary);
+}
+
+@define-mixin dark-theme {
+    --color-text: rgb(222, 226, 226);
+    --dark16: rgb(222, 226, 226, 0.05);
+    --dark32: rgb(255,255,255, 0.07);
+    --dark48: rgb(158,163,162);
+    --xyd-codetabs-color: var(--black);
+    --color-text: var(--black);
+}
+[data-color-scheme="dark"] {
+    @mixin dark-theme;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-color-scheme="light"]):not([data-color-scheme="dark"]) {
+        @mixin dark-theme;
+    }
+}

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"
+  ]
+}

package/types.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react'
+
+declare global {
+  namespace React {
+    namespace JSX {
+      interface IntrinsicElements {
+      }
+    }
+  }
+}