@xyd-js/theme-opener 0.1.0-build.157

package/src/vars.css

@@ -0,0 +1,80 @@
+@import "@xyd-js/themes/dist/decorators/atlas-vars.css";
+
+/* Theme specific */
+:root {
+    --opener-blue: #0b64dd;
+    --opener-blue--active: #1750ba;
+
+    --opener-gray4-rgb: 246, 247, 249;
+    --opener-gray4: #f6f7f9;
+
+    --opener-gray64: #363434;
+    --opener-gray80: #1e1e1e;
+
+    --opener-content-background: linear-gradient(180deg, rgba(var(--opener-gray4-rgb), 0.5) 0%, rgba(var(--opener-gray4-rgb), 0) 48.32%);
+}
+
+/* Core */
+:root {
+    --color-primary: var(--opener-blue);
+    --color-primary--active: var(--opener-blue--active);
+}
+
+/* Utils */
+:root {
+    --xyd-page-gutter: 0;
+}
+
+/* Subnav */
+:root {
+    --xyd-subnav-height: 50px;
+    --xyd-subnav-bgcolor: var(--white);
+}
+
+/* Sidebar */
+:root {
+    /* --xyd-sidebar-width: 450px; */
+    --xyd-sidebar-bgcolor: var(--white)
+}
+
+/* Sidebar Item */
+:root {
+    --xyd-sidebar-item-bgcolor--active: var(--opener-gray4);
+    --xyd-sidebar-item-bgcolor--active-hover: var(--opener-gray4);
+}
+
+/* Coder */
+:root {
+    --xyd-codetabs-bgcolor: var(--opener-gray80);
+    --xyd-codetabs-color: var(--white);
+    --xyd-codetabs-color--hover: var(--opener-gray64);
+
+    --xyd-coder-code-mark-bgcolor: var(--xyd-codetabs-color--hover);
+    --xyd-coder-code-mark-border-color: var(--color-primary);
+    --xyd-coder-code-border-color: var(--opener-gray80);
+    --xyd-codetabs-color--active: var(--white);
+}
+
+/* Tabs */
+:root {
+    --xyd-tabs-primary-bgcolor: unset;
+}
+
+@define-mixin dark-theme {
+    --opener-gray4-rgb: var(--dark32-rgb);
+    --opener-gray4: var(--dark32);
+
+    --xyd-codetabs-color: var(--black);
+    --xyd-tabs-primary-border-color: unset;
+    --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"
+  ]
+}

package/types.d.ts

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