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

package/src/styles/decorators/page-leftpad.css

@@ -0,0 +1,46 @@
+@layer decorators {
+    xyd-layout-primary {
+        --theme-sidebar-left: unset;
+        --theme-sidebar-width: unset;
+
+        /* media: Large Desktop */
+        @media (min-width: 1440px) {
+            --theme-layout-max-width: 1600px;
+            --theme-sidebar-width-var: 350px; 
+
+            --theme-sidebar-left-padding-space: 32px;
+            --theme-sidebar-left-vars: (var(--theme-layout-max-width) / 2) + var(--theme-sidebar-left-padding-space);
+            --theme-sidebar-left-calc: calc(50% - var(--theme-sidebar-left-vars));
+
+            --theme-sidebar-width-padding-space: 8px;
+
+            --theme-sidebar-left: max(32px, var(--theme-sidebar-left-calc));
+            --theme-sidebar-width: calc((100% - (var(--theme-layout-max-width))) / 2 + var(--theme-sidebar-width-var) + var(--theme-sidebar-width-padding-space));
+        }
+
+        /* layout: Sidebar */
+        [part="sidebar"] {
+            padding-left: var(--theme-sidebar-left);
+            width: var(--theme-sidebar-width);
+        }
+
+        /* component: Nav */
+        xyd-nav {
+            [part="nav"]>*:first-child {
+                position: relative;
+                left: calc(var(--theme-sidebar-left) + var(--xyd-sidebar-item-padding-total) - var(--xyd-nav-padding));
+            }
+        }
+
+        /* component: SubNav */
+        xyd-subnav {
+            padding-left: var(--theme-sidebar-left);
+        }
+
+        @media (max-width: 1024px) {
+            xyd-subnav {
+                padding-left: var(--xyd-nav-padding);
+            }
+        }
+    }
+}

package/src/styles/decorators/page-sketch.css

@@ -0,0 +1,30 @@
+@import "./header-sketch.css";
+
+:root {
+    --decorator-sketch-border-color: var(--dark32);
+    --color-header-border: var(--decorator-sketch-border-color);
+    --xyd-sidebar-divider-color: var(--decorator-sketch-border-color);
+}
+
+@layer decorators {
+    xyd-layout-primary {
+        &[data-hide-subheader="true"] {
+            xyd-subnav {
+                border-top: none;
+            }
+        }
+
+        &:not([data-layout="wide"]) {
+            [part="page-article"] {
+                border-right: 1px solid var(--decorator-sketch-border-color);
+            }
+        }
+
+        /* component: BaseTheme.ContentSecondary */
+        xyd-secondary-content {
+            [part="secondary-content-header"] {
+                border-bottom: 1px solid var(--decorator-sketch-border-color);
+            }
+        }
+    }
+}

package/src/styles/decorators/sidebar-pad.css

@@ -0,0 +1,24 @@
+@layer decorators {
+    xyd-layout-primary {
+        --sidebar-height: calc(100dvh - var(--xyd-nav-height) - var(--xyd-banner-height-dynamic) - var(--theme-nav-height-space, 0px));
+        --sidebar-top: calc(var(--xyd-nav-height) + var(--xyd-banner-height-dynamic) + var(--theme-nav-height-space, 0px));
+        
+        --sidebar-subheader-height: calc(100dvh - var(--xyd-header-total-height) - var(--theme-nav-height-space, 0px));
+        --sidebar-subheader-top: calc(var(--xyd-header-total-height) + var(--theme-nav-height-space, 0px));
+        
+        /* layout: Sidebar */
+        [part="sidebar"] {
+            position: sticky;
+            height: var(--sidebar-height);
+            top: var(--sidebar-top);
+            z-index: 1;
+        }
+
+        &[data-subheader="true"][data-hide-subheader="false"] {
+            [part="sidebar"] {
+                height: var(--sidebar-subheader-height);
+                top: var(--sidebar-subheader-top);
+            }
+        }
+    }
+}

package/src/styles/decorators/sidebar-scroll.css

@@ -0,0 +1,51 @@
+@layer decorators {
+    :root {
+        --decorator-sidebar-scroll-bgcolor: var(--xyd-toc-scroll-bgcolor);
+    }
+
+    xyd-layout-primary {
+        xyd-sidebar {
+            scrollbar-color: transparent transparent;
+            scrollbar-width: thin;
+        }
+
+        xyd-sidebar::-webkit-scrollbar-corner,
+        xyd-sidebar::-webkit-scrollbar-thumb,
+        xyd-sidebar::-webkit-scrollbar-track {
+            background: none;
+        }
+
+        xyd-sidebar::-webkit-scrollbar-thumb {
+            background:  var(--decorator-sidebar-scroll-bgcolor);
+            background-clip: content-box;
+            border: 1px solid transparent;
+            border-radius: 10px;
+        }
+
+        /* Hover effect for scrollbar */
+        xyd-sidebar:hover {
+            scrollbar-color: var(--decorator-sidebar-scroll-bgcolor) transparent;
+        }
+
+        xyd-sidebar:hover::-webkit-scrollbar-thumb {
+            background: var(--decorator-sidebar-scroll-bgcolor);
+            background-clip: content-box;
+            border: 1px solid transparent;
+            border-radius: 10px;
+        }
+
+        /* Mobile responsive scrollbar */
+        @media screen and (max-width: 640px) {
+            xyd-sidebar {
+                scrollbar-color: var(--decorator-sidebar-scroll-bgcolor) transparent;
+            }
+
+            xyd-sidebar::-webkit-scrollbar-thumb {
+                background: var(--decorator-sidebar-scroll-bgcolor);
+                background-clip: content-box;
+                border: 1px solid transparent;
+                border-radius: 10px;
+            }
+        }
+    }
+}

package/src/styles/index.css

@@ -0,0 +1,26 @@
+/* CSS Layer Hierarchy
+ * @layer reset - Base style resets to normalize browser defaults
+ * @layer defaults - Basic component styles for UI, writer, and coder components
+ * @layer defaultfix - Default fixed styles within defualts
+ * @layer components - Composite styles built on top of base components
+ * @layer fabric - Fabric styles after components // TODO: deprecate and move to decorator?
+ * @layer templates - Template-specific styles like Atlas
+ * @layer decorators - Decorate previous layers before theming
+ * @layer themes - Theme-level CSS modifications
+ * @layer themedecorator - After theme-level decorator styles
+ * @layer presets - Preset theming after themes layer
+ * @layer user - User-level styles after presets layer
+ * @layer overrides - Final override layer for styles not applicable in other layers
+ */
+@layer reset, defaults, defaultfix, components, fabric, templates, decorators, themes, themedecorator, presets, user, overrides;
+
+@import "@xyd-js/ui/dist/index.css";
+@import "@xyd-js/components/dist/index.css";
+@import "@xyd-js/atlas/dist/tokens.css";
+@import "@xyd-js/atlas/dist/index.css";
+@import "@xyd-js/atlas/dist/styles.css";
+
+@import "./tokens.css";
+@import "./reset.css";
+@import "./styles.css";
+

package/src/styles/reset.css

@@ -0,0 +1,56 @@
+/*TODO: in the future not needed cuz every component would have have default styles itself?*/
+
+@layer reset {
+    body {
+        margin: 0;
+    }
+    
+    ol, ul, menu {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+    
+    button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]) {
+        -webkit-appearance: button;
+        background-color: transparent;
+        background-image: none;
+    }
+    
+    button, [role=button] {
+        cursor: pointer;
+    }
+    
+    button, select {
+        text-transform: none;
+    }
+    
+    button, input, optgroup, select, textarea {
+        font-family: inherit;
+        font-feature-settings: inherit;
+        font-variation-settings: inherit;
+        font-size: 100%;
+        font-weight: inherit;
+        line-height: inherit;
+        letter-spacing: inherit;
+        color: inherit;
+        margin: 0;
+        padding: 0;
+    }
+    
+    a {
+        color: inherit;
+        text-decoration: inherit;
+    }
+    
+    *, :before, :after {
+        box-sizing: border-box;
+        border-width: 0;
+        border-style: solid;
+    }
+    
+    p {
+        padding: 0;
+        margin: 0;
+    }
+}

package/src/styles/styles.css

@@ -0,0 +1,156 @@
+@import "./decorators/page-layout.css";
+
+@layer defaults {
+    html {
+        font-family: var(--font-body-family);
+        font-weight: var(--font-body-weight);
+        font-optical-sizing: auto;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+    pre {
+        font-family: var(--font-coder-family, monospace);
+        font-weight: var(--font-coder-weight, 400);
+    }
+    
+    body {
+        font-size: var(--xyd-font-size-small);
+        line-height: var(--xyd-line-height-small);
+        color: var(--text-primary);
+        background: var(--color-bg, var(--white));
+    }
+}
+
+@layer defaults {
+    /* Color Scheme Visibility Rules */
+
+    /* When html has data-color-scheme="light", hide dark elements */
+    html[data-color-scheme="light"] [data-color-scheme="dark"]:not(html):not(head):not(body) {
+        display: none;
+    }
+
+    /* When html has data-color-scheme="dark", hide light elements */
+    html[data-color-scheme="dark"] [data-color-scheme="light"]:not(html):not(head):not(body) {
+        display: none;
+    }
+   
+    /* When html has data-color-scheme="os", use system preference */
+    @media (prefers-color-scheme: light) {
+        html[data-color-scheme="os"] [data-color-scheme="dark"]:not(html):not(head):not(body) {
+            display: none;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        html[data-color-scheme="os"] [data-color-scheme="light"]:not(html):not(head):not(body) {
+            display: none;
+        }
+    }
+
+    /* Fallback: when no data-color-scheme on html, use system preference */
+    @media (prefers-color-scheme: light) {
+        html:not([data-color-scheme]) [data-color-scheme="dark"]:not(html):not(head):not(body) {
+            display: none;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        html:not([data-color-scheme]) [data-color-scheme="light"]:not(html):not(head):not(body) {
+            display: none;
+        }
+    }
+
+    @media (max-width: 1024px) {
+        [data-desktop]:not([data-desktop="false"]) {
+            display: none;
+        }
+    }
+
+    @media (min-width: 1024px) {
+        [data-mobile]:not([data-mobile="false"]) {
+            display: none;
+        }
+    }
+
+
+}
+
+@layer defaults {
+    /* TODO: move to components */
+    /*  github-button to apps? */
+    xyd-page-footer {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+
+        [part="github-button-container"] {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            gap: 8px;
+            padding: 15px;
+        }
+    }
+
+    /* TODO: move to components */
+    xyd-built-with {
+        display: flex;
+        gap: 8px;
+        padding: 15px;
+        justify-content: center;
+
+        [part="text"] {
+            font-size: var(--xyd-font-size-xsmall);
+            color: var(--dark48);
+            letter-spacing: 0.5px;
+        }
+
+        [part="logo"] {
+            a {
+                margin: 0;
+                padding: 0;
+            }
+
+            svg {
+                width: 48px;
+                height: 100%;
+            }
+        }
+    }
+}
+
+@layer defaults {
+    xyd-secondary-content {
+        [part="secondary-content-header"] {
+            padding: 25px 75px;
+            border-bottom: 1px solid var(--dark32);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            @media (max-width: 1024px) {
+                padding-inline: var(--xyd-sidebar-item-padding-total)
+               
+            }
+        }
+
+        [part="secondary-content"] {
+            padding: 25px 75px;
+
+            @media (max-width: 1024px) {
+                padding-inline: var(--xyd-sidebar-item-padding-total)
+            }
+        }
+    }
+
+    @media (max-width: 1024px) {
+        xyd-secondary-content {
+            [part="secondary-content-header"] {
+                display: block;
+            }
+        }
+    }
+}