@xyd-js/theme-picasso 0.0.0-build

package/src/theme.tsx

@@ -0,0 +1,43 @@
+import React from "react"
+
+import {BaseTheme} from "@xyd-js/themes"
+
+import "./imports.css"
+
+import "@xyd-js/themes/index.css"
+
+import './index.css';
+import './vars.css';
+import './override.css';
+
+import syntaxHighlight from "./syntaxHighlight"
+
+export default class ThemePicasso extends BaseTheme {
+    constructor() {
+        super();
+
+        this.theme.Update({
+            coder: {
+                syntaxHighlight: syntaxHighlight
+            },
+            appearance: {
+                header: {
+                    separator: "right"
+                },
+                logo: {
+                    header: "mobile",
+                    sidebar: true
+                },
+                search: {
+                    sidebar: true
+                },
+                content: {
+                    sectionSeparator: true
+                }
+            }
+        })
+    }
+}
+
+
+

package/src/vars.css

@@ -0,0 +1,75 @@
+@import "@xyd-js/themes/dist/decorators/atlas-vars.css";
+
+/* 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);
+
+
+    /* 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;
+}
+
+/* Sidebar */
+:root {
+    --xyd-sidebar-bgcolor: var(--white);
+}
+
+/* Subnav */
+:root {
+    --xyd-subnav-bgcolor: var(--white);
+}
+
+/* Banner */
+:root {
+    --xyd-banner-bgcolor: color(display-p3 .004 .643 .494 / .24);
+}
+
+/* Utils */
+:root {
+    --xyd-page-gutter: 0;
+}
+
+/* Coder */
+:root {
+    --xyd-codetabs-color: var(--white);
+
+    --xyd-coder-code-mark-bgcolor: var(--dark80);
+    --xyd-coder-code-mark-border-color: var(--color-primary);
+
+    --xyd-codetabs-color--active: var(--white);
+}
+
+@define-mixin dark-theme {
+    --xyd-codetabs-color: var(--black);
+    --color-text: var(--black);
+    --xyd-codetabs-color--active: 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"
+  ]
+}