@xyd-js/themes 0.0.0 → 0.1.1-build.161

package/src/styles/tokens.css

@@ -0,0 +1,472 @@
+    :root {
+    color-scheme: light dark;
+}
+
+/* Global */
+:root {
+    --white: #fff;
+    --black: #000;
+    --dark8: #f7f7f8;
+    --dark16: #f9f9f9;
+    --dark32: #ececf1;
+    --dark32-rgb: 236, 236, 241;
+    --dark40: #c5c5d2;
+    --dark48: #6e6e80;
+    --dark60: #443a3a;
+    --dark80: #111827;
+    --dark100: var(--black);
+    --shadow: var(--dark16);
+    --purple80: #7051d4;
+    --purple100: #2e108e;
+    --blue16: #e4edff;
+    --blue32: #60A5FA;
+    --blue80: #1971a8;
+    --blue100: #00529b;
+    --green32: #d4f5e7;
+    --green60: #14c397;
+    --green80: #28a745;
+    --green100: #00936f;
+    --red80: #dc3545;
+    --red100: #b91c1c;
+    --yellow80: #ffc107;
+    --yellow100: #dea806;
+
+    --color-bg: var(--white);
+    --color-text: var(--dark100);
+
+    --text-primary: var(--color-text);
+    --text-secondary: var(--dark80);
+    --text-tertiary: var(--dark60);
+
+    --color-primary: var(--theme-color-primary, var(--purple80));
+    --color-primary--active: var(--theme-color-primary-active, var(--purple100));
+
+    --xyd-gradient-from-position: ;
+    --xyd-gradient-to-position: ;
+    --xyd-gradient-via-position: ;
+}
+
+/* Dark Mode Global */
+[data-color-scheme="dark"] {
+    --white: #0e0e10;
+    --black: #fff;
+    --dark8: #1a1a1a;
+    --dark16: #2d2d2d;
+    --dark32: #404040;
+    --dark32-rgb: 64, 64, 64;
+    --dark40: #525252;
+    --dark48: #9E9E9E;
+    --dark60: #a3a3a3;
+    --dark80: #d4d4d4;
+    --dark100: var(--black);
+    --shadow: #090D0D;
+    --purple80: #7051d4;
+    --purple100: #2e108e;
+    --blue16: #e4edff;
+    --blue32: #60A5FA;
+    --blue80: #1971a8;
+    --blue100: #00529b;
+    --green80: #28a745;
+    --green100: #108944;
+    --red80: #dc3545;
+    --red100: #b91c1c;
+    --yellow80: #ffc107;
+    --yellow100: #dea806;
+    --color-bg: var(--white);
+    --color-text: var(--dark100);
+
+    --text-primary: var(--color-text);
+    --text-secondary: var(--dark80);
+    --text-tertiary: var(--dark60);
+
+    --color-primary: var(--theme-color-primary, var(--purple80));
+    --color-primary--active: var(--theme-color-primary-active, var(--purple100));
+    
+    body {
+        color: var(--xyd-text-color--default);
+    }
+}
+
+/* System Dark Mode Support */
+@media (prefers-color-scheme: dark) {
+    :root:not([data-color-scheme="light"]):not([data-color-scheme="dark"]) {
+        --white: #0e0e10;
+        --black: #fff;
+        --dark8: #1a1a1a;
+        --dark16: #2d2d2d;
+        --dark32: #404040;
+        --dark32-rgb: 64, 64, 64;
+        --dark40: #525252;
+        --dark48: #9E9E9E;
+        --dark60: #a3a3a3;
+        --dark80: #d4d4d4;
+        --dark100: var(--black);
+        --shadow: #090D0D;
+        --purple80: #7051d4;
+        --purple100: #2e108e;
+        --blue16: #e4edff;
+        --blue32: #60A5FA;
+        --blue80: #1971a8;
+        --blue100: #00529b;
+        --green80: #28a745;
+        --green100: #108944;
+        --red80: #dc3545;
+        --red100: #b91c1c;
+        --yellow80: #ffc107;
+        --yellow100: #dea806;
+
+        --color-bg: var(--white);
+        --color-text: var(--dark100);
+
+        --text-primary: var(--color-text);
+        --text-secondary: var(--dark80);
+        --text-tertiary: var(--dark60);
+
+        --color-primary: var(--theme-color-primary, var(--purple80));
+        --color-primary--active: var(--theme-color-primary-active, var(--purple100));
+
+        --color-header-border: unset;
+    }
+    
+    :root:not([data-color-scheme="light"]):not([data-color-scheme="dark"]) body {
+        color: var(--xyd-text-color--default);
+    }
+}
+
+/* Layout */
+:root {
+    --xyd-page-body-bgcolor: var(--color-bg);
+    --xyd-layout-header-bgcolor: var(--color-bg);
+    --xyd-page-body-color: var(--text-primary);
+    --xyd-page-body-color--secondary: var(--dark60);
+
+    --xyd-page-gutter: 8px;
+    --xyd-content-space: 12px;
+
+    --xyd-sidebar-width: 250px;
+    --xyd-sidebar-width--mobile: 250px;
+    --xyd-layout-sidebar-bgcolor: var(--color-bg);
+
+    --xyd-header-total-height: calc(var(--xyd-nav-height) + var(--xyd-subnav-height) + var(--xyd-banner-height-dynamic));
+
+    --xyd-layout-width-small: 800px;
+    --xyd-layout-width-medium: 1000px;
+    --xyd-layout-width-large: 1200px;
+    
+    --xyd-layout-nav-width-small: 200px;
+    --xyd-layout-nav-width-medium: 256px;
+
+    --xyd-border-radius-small: 4px;
+    --xyd-border-radius-medium: 8px;
+    --xyd-border-radius-large: 16px;
+}
+
+/* Fonts */
+:root {
+    /* Font Sizes */
+    --xyd-font-size-xsmall: 12px;
+    --xyd-font-size-small: 14px;
+    --xyd-font-size-medium: 16px;
+    --xyd-font-size-large: 18px;
+    --xyd-font-size-xlarge: 22px;
+    --xyd-font-size-xxlarge: 26px;
+    --xyd-font-size-2xl: 32px;
+    --xyd-font-size-3xl: 48px;
+
+    /* Line Heights */
+    --xyd-line-height-xsmall: 16px;
+    --xyd-line-height-small: 19px;
+    --xyd-line-height-medium: 25px;
+    --xyd-line-height-large: 27px;
+    --xyd-line-height-xlarge: 33px;
+    --xyd-line-height-xxlarge: 39px;
+    --xyd-line-height-2xl: 44px;
+    --xyd-line-height-3xl: 56px;
+
+    /* Font Weights */
+    --xyd-font-weight-normal: 400;
+    --xyd-font-weight-medium: 500;
+    --xyd-font-weight-semibold: 600;
+    --xyd-font-weight-bold: 700;
+    --xyd-font-weight-extrabold: 800;
+    --xyd-font-weight-black: 900;
+}
+
+/* Media Queries */
+:root {
+    /* ////////////// MEDIA QUERIES ////////////// */
+    --xyd-mobile-breakpoint: 768px;
+    --xyd-tablet-breakpoint: 1024px;
+}
+
+/* Transitions */
+:root {
+    --xyd-cubic-bezier: cubic-bezier(.65, 0, .35, 1);
+
+}
+
+/* Sizes */
+:root {
+    --xyd-padding-small: 6px;
+    --xyd-padding-medium: 10px;
+    --xyd-padding-large: 18px;
+    --xyd-padding-xlarge: 30px; 
+    --xyd-padding-xxlarge: 44px;
+}
+
+/* Components */
+:root {
+    /* Callout */
+    --xyd-callout-bgcolor: var(--dark8);
+    --xyd-callout-border-color: var(--dark32);
+    --xyd-callout-icon-color: var(--dark48);
+    --xyd-callout-message-color: var(--dark80);
+
+    /* Button */
+    --xyd-button-primary-bg: var(--color-primary);
+    --xyd-button-primary-color: var(--white);
+    --xyd-button-primary-border: var(--color-primary);
+    --xyd-button-primary-bg-hover: var(--color-primary--active);
+    --xyd-button-primary-border-hover: var(--color-primary--active);
+
+    --xyd-button-secondary-bg: var(--dark16);
+    --xyd-button-secondary-color: var(--text-primary);
+    --xyd-button-secondary-border: var(--dark32);
+    --xyd-button-secondary-bg-hover: var(--dark32);
+    --xyd-button-secondary-border-hover: var(--dark40);
+
+    --xyd-button-tertiary-bg: transparent;
+    --xyd-button-tertiary-color: var(--text-primary);
+    --xyd-button-tertiary-border: transparent;
+    --xyd-button-tertiary-bg-hover: var(--dark16);
+    --xyd-button-tertiary-border-hover: var(--dark32);
+    --xyd-button-border-radius: 6px;
+
+    /* Card */
+    --xyd-card-bgcolor: var(--color-bg);
+    --xyd-card-shadow-color: var(--dark32);
+    --xyd-card-border-color: var(--dark32);
+
+    /* Coder */
+    --xyd-code-bgcolor: linear-gradient(45deg, var(--dark8) 0%, var(--dark8) 100%);
+    --xyd-code-border-color: var(--dark32);
+
+    /* Coder Code */
+    --xyd-coder-code-background: linear-gradient(45deg, var(--dark8) 0%, var(--dark8) 100%);
+    --xyd-coder-code-border-color: var(--dark32);
+    --xyd-coder-code-mark-border-color: var(--blue32);
+    --xyd-coder-code-mark-bgcolor: var(--dark16);
+    --xyd-coder-code-copy-color: var(--dark48);
+    --xyd-coder-code-description-bgcolor: var(--color-bg);
+
+    /* Code Tabs */
+    --xyd-codetabs-border-color: var(--dark32);
+    --xyd-codetabs-bgcolor: linear-gradient(45deg, var(--dark8) 0%, var(--dark8) 100%);
+    --xyd-codetabs-color: var(--dark80);
+    --xyd-codetabs-color--active: var(--color-text);
+    --xyd-codetabs-color--hover: var(--dark32);
+
+    /* Badge */
+    --xyd-badge-color--default: var(--xyd-text-color);
+    --xyd-badge-bgcolor--default: var(--dark32);
+
+    --xyd-badge-color--warning: var(--xyd-page-body-color);
+    --xyd-badge-bgcolor--warning: var(--yellow80);
+    --xyd-badge-color--info: var(--color-bg);
+    --xyd-badge-bgcolor--info: var(--blue80);
+
+    /* Banner */
+    --xyd-banner-bgcolor: var(--blue16);
+    --xyd-banner-border-color: unset;
+    --xyd-banner-color: var(--black);
+    --xyd-banner-boxshadow: 0 2px 5px rgba(0, 0, 0, .1);
+    --xyd-banner-height-dynamic: 0px; /* banner height is calculated dynamically in js, TODO: fix to pure css*/
+
+    /* Breadcrumbs */
+    --xyd-breadcrumbs-color: var(--dark48);
+    --xyd-breadcrumbs-color--active: var(--text-primary);
+
+    /* Details */
+    --xyd-details-border-color: var(--dark32);
+    --xyd-details-bgcolor--secondary: var(--dark16);
+    --xyd-details-summary-color: var(--dark48);
+    --xyd-details-summary-color--active: var(--text-primary);
+    --xyd-details-summary-code-bgcolor: var(--color-bg);
+    --xyd-details-content-bgcolor: var(--color-bg);
+
+    /* GuideCard */
+    --xyd-guidecard-border-color--secondary: var(--dark32);
+    --xyd-guidecard-bgcolor--secondary: var(--dark16);
+    --xyd-guidecard-bgcolor--secondary-active: var(--color-bg);
+    --xyd-guidecard-icon-color: var(--text-primary);
+    --xyd-guidecard-title-color: var(--text-primary);
+    --xyd-guidecard-color: var(--dark48);
+    /* Heading */
+    --xyd-heading-color: var(--text-primary);
+    --xyd-heading-color--muted: var(--dark48);
+    --xyd-heading-icon-color: var(--color-primary);
+
+    /* Text */
+    --xyd-text-color: var(--text-primary);
+    --xyd-text-color--default: var(--text-primary);
+    --xyd-text-color--ghost: var(--text-tertiary);
+    --xyd-text-color--success: var(--green80);
+    --xyd-text-color--success--active: var(--green100);
+    --xyd-text-color--success--muted: rgba(40, 167, 69, 0.3);
+    --xyd-text-color--info: var(--blue80);
+    --xyd-text-color--info--active: var(--blue100);
+    --xyd-text-color--info--muted: rgba(9, 109, 232, 0.3);
+    --xyd-text-color--warn: var(--yellow80);
+    --xyd-text-color--warn--active: var(--yellow100);
+    --xyd-text-color--warn--muted: rgba(255, 193, 7, 0.3);
+    --xyd-text-color--error: var(--red80);
+    --xyd-text-color--error--active: var(--red100);
+    --xyd-text-color--error--muted: rgba(220, 53, 69, 0.3);
+    --xyd-text-color--primary: var(--color-primary);
+    --xyd-text-color--secondary: var(--text-secondary);
+
+    /* Anchor */
+    --xyd-anchor-color: var(--color-primary);
+    --xyd-anchor-color--hover: var(--color-primary--active);
+
+    /* Hr */
+    --xyd-hr-border-color: var(--dark32);
+
+    /* List */
+    --xyd-list-marker-color: var(--dark48);
+    --xyd-list-item-bgcolor: var(--dark48);
+
+    /* NavLinks */
+    --xyd-navlinks-border-color: var(--dark32);
+
+    /* Pre */
+    --xyd-pre-bgcolor: var(--dark16);
+
+    /* Steps */
+    --xyd-steps-marker-bgcolor: var(--dark32);
+    --xyd-steps-marker-color: var(--dark80);
+
+    /* Table */
+    --xyd-table-border-color: var(--dark32);
+    --xyd-table-bgcolor: var(--dark16);
+
+    /* Tabs */
+    --xyd-tabs-primary-bgcolor: var(--color-bg);
+    --xyd-tabs-primary-border-color: hsl(212, 15%, calc(96% - 12% * 1));
+    --xyd-tabs-primary-list-color: hsl(212, 15%, calc(96% - 12% * 4));
+    --xyd-tabs-primary-color--active: var(--color-primary);
+    --xyd-tabs-bgcolor: var(--dark16);
+    --xyd-tabs-arrow-bgcolor: var(--color-bg);
+    --xyd-tabs-color: var(--dark48);
+    --xyd-tabs-color--active: var(--text-primary);
+    --xyd-tabs-bgcolor--active: var(--color-bg);
+    --xyd-tabs-shadow-color--active: rgba(0, 0, 0, 0.05);
+
+    /* TocCard */
+    --xyd-toccard-border-color: var(--dark32);
+    --xyd-toccard-border-color--active: var(--dark40);
+    --xyd-toccard-color: var(--dark48);
+    --xyd-toccard-title-color: var(--dark80);
+    --xyd-toccard-icon-color: var(--dark80);
+
+    /* VideoGuide Miniature*/
+    --xyd-videoguide-miniature-mini-width: 202px;
+    --xyd-videoguide-miniature-mini-height: 113px;
+    --xyd-videoguide-miniature-expanded-height: 100px;
+    --xyd-videoguide-miniature-z-index: 1000;
+    --xyd-videoguide-miniature-radius: 4px;
+    --xyd-videoguide-miniature-shadow: 0 7px 14px 0 rgba(60, 66, 87, 0.08), 0 3px 6px 0 rgba(0, 0, 0, 0.12);
+    --xyd-videoguide-miniature-bgcolor: var(--color-bg);
+    --xyd-videoguide-miniature-duration: 0.3s;
+    --xyd-videoguide-miniature-color: var(--color-bg);
+
+    /* Nav */
+    --xyd-nav-height: 50px;
+    --xyd-nav-shadow-bgcolor: var(--color-bg);
+    --xyd-nav-item-color: var(--text-primary);
+    --xyd-nav-item-color--active: var(--dark80);
+    --xyd-nav-item-bgcolor--active: var(--dark16);
+    --xyd-nav-padding: var(--xyd-padding-medium);
+    --xyd-nav-padding-y: calc(var(--xyd-nav-padding) / 2);
+    --xyd-nav-item-padding: var(--xyd-padding-medium);
+    --xyd-nav-item-padding-y: calc(var(--xyd-nav-item-padding) / 2);
+
+    /* ProgressBar */
+    --xyd-progressbar-bgcolor: var(--dark16);
+    --xyd-progressbar-bgcolor--active: var(--color-primary);
+
+    /* Sidebar */
+    --xyd-sidebar-padding: 8px;
+
+    --xyd-sidebar-bgcolor: var(--dark16);
+    --xyd-sidebar-divider-color: var(--dark32);
+    --xyd-sidebar-divider-shadow-color: var(--dark32);
+
+    --xyd-sidebar-item-color--active: var(--text-primary);
+    --xyd-sidebar-item-bgcolor--active: var(--dark32);
+    --xyd-sidebar-item-bgcolor--active-hover: var(--dark32);
+    --xyd-sidebar-item-bgcolor--active-mark: var(--color-primary);
+    --xyd-sidebar-item-color: var(--dark48);
+    --xyd-sidebar-item-header-color: var(--text-primary);
+    --xyd-sidebar-item-padding-left: var(--xyd-padding-large);
+    --xyd-sidebar-item-padding-total: calc(var(--xyd-sidebar-padding) + var(--xyd-sidebar-item-padding-left));
+    --xyd-sidebar-ghost-item-padding: 6px 12px 12px var(--xyd-sidebar-item-padding-left);
+
+    /* SubNav */
+    --xyd-subnav-height: 44px;
+    --xyd-subnav-bgcolor: var(--dark16);
+    --xyd-subnav-prefix-color: var(--dark48);
+    --xyd-subnav-prefix-marker-color: var(--dark32);
+    --xyd-subnav-item-color: var(--dark48);
+    --xyd-subnav-item-color--active: var(--color-text);
+    --xyd-subnav-item-color--active-mark: var(--color-primary);
+
+    /* Toc */
+    --xyd-toc-bgcolor: var(--dark32);
+    --xyd-toc-scroll-bgcolor: var(--dark80);
+    --xyd-toc-item-color: var(--dark48);
+    --xyd-toc-item-color--active: var(--dark80);
+
+    /* SearchButton */
+    --xyd-searchbutton-background: var(--dark16);
+
+    /* Blockquote */
+    --xyd-blockquote-color: var(--dark48);
+    --xyd-blockquote-border-color: var(--dark32);
+}
+
+/* Atlas */
+:root {
+    --XydAtlas-Ref-Palette-White: var(--white);
+    --XydAtlas-Ref-Palette-Primary-60: var(--purple80);
+    --XydAtlas-Ref-Palette-Primary-70: var(--purple80);
+    --XydAtlas-Ref-Palette-Primary-80: var(--purple80);
+    --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(--dark48);
+    --XydAtlas-Ref-Palette-Neutral-70: var(--dark60);
+    --XydAtlas-Ref-Palette-Neutral-80: var(--dark80);
+    --XydAtlas-Ref-Palette-Neutral-100: var(--dark100);
+}
+
+:root {
+    --sidebar-top: calc(var(--xyd-nav-height) + var(--xyd-banner-height-dynamic) + var(--theme-nav-height-space, 0px));
+}
+
+[data-color-scheme="dark"] {
+    --xyd-sidebar-bgcolor: var(--white);
+    --xyd-text-color--default: var(--dark48);
+    --xyd-heading-color--muted: var(--dark80);
+    --xyd-button-primary-color: var(--black);
+}
+
+/* System dark mode support for sidebar - only when OS preference is enabled */
+@media (prefers-color-scheme: dark) {
+    :root:not([data-color-scheme="light"]):not([data-color-scheme="dark"]) {
+        --xyd-sidebar-bgcolor: var(--white);
+        --xyd-text-color--default: var(--dark48);
+        --xyd-heading-color--muted: var(--dark80);
+        --xyd-button-primary-color: var(--black);
+    }
+}

package/tsconfig.json

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

package/tsup.config.ts

@@ -0,0 +1,38 @@
+import { defineConfig } from 'tsup';
+import pkg from './package.json' assert { type: 'json' }
+
+const deps = [
+    ...Object.keys(pkg.dependencies || {}),
+    ...Object.keys(pkg.devDependencies || {}),
+    ...Object.keys(pkg.peerDependencies || {}),
+]
+
+export default defineConfig({
+    entry: {
+        index: 'src/index.ts',
+        rollup: 'src/rollup.ts',
+    },
+    format: ['esm'],
+    target: 'node16',
+    dts: {
+        entry: {
+            index: 'src/index.ts',
+            rollup: 'src/rollup.ts',
+        },
+        resolve: true,
+    },
+    splitting: false,
+    sourcemap: true,
+    clean: true,
+    external: [
+        ...deps,
+        'fs',
+        'path'
+    ],
+    esbuildOptions: (options) => {
+        options.platform = 'node';
+        options.external = ['node:fs/promises', 'react-router', 'fs', 'path'];
+        options.loader = { '.js': 'jsx' };
+    },
+    ignoreWatch: ['node_modules', 'dist', '.git', 'build']
+});

package/types.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react'
+
+declare global {
+  namespace React {
+    namespace JSX {
+      interface IntrinsicElements {
+        'xyd-built-with': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'xyd-page-footer': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'xyd-secondary-content': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+      }
+    }
+  }
+}