@xyd-js/components 0.1.0-build.168

package/src/coder/themes/cosmo.ts

@@ -0,0 +1,264 @@
+// TODO: in the future move to separate package
+export default {
+    name: "cosmo",
+    "type": "from-css",
+    colors: {
+        "list.focusForeground": "var(--syntax1)",
+        "scrollbar.shadow": "var(--syntax2)",
+        "tab.activeBorder": "var(--syntax1)",
+        "widget.shadow": "var(--syntax2)",
+        "activityBar.border": "var(--syntax3)",
+        "editorGroup.border": "var(--syntax3)",
+        "editorGroupHeader.tabsBorder": "var(--syntax3)",
+        "editorWidget.border": "var(--syntax3)",
+        "editorWidget.resizeBorder": "var(--syntax3)",
+        "input.border": "var(--syntax3)",
+        "notificationCenter.border": "var(--syntax3)",
+        "notifications.border": "var(--syntax3)",
+        "panel.border": "var(--syntax3)",
+        "sideBar.border": "var(--syntax3)",
+        "statusBar.border": "var(--syntax3)",
+        "tab.border": "var(--syntax3)",
+        "activityBar.background": "var(--syntax4)",
+        "statusBar.background": "var(--syntax4)",
+        "statusBar.noFolderBackground": "var(--syntax4)",
+        "statusBar.debuggingBackground": "var(--syntax4)",
+        "editorGroupHeader.tabsBackground": "var(--syntax5)",
+        "editorWidget.background": "var(--syntax5)",
+        "sideBar.background": "var(--syntax5)",
+        "sideBarSectionHeader.background": "var(--syntax5)",
+        "tab.inactiveBackground": "var(--syntax5)",
+        "activityBarBadge.background": "var(--syntax6)",
+        "activityBar.foreground": "var(--syntax6)",
+        "statusBar.foreground": "var(--syntax7)",
+        "input.placeholderForeground": "var(--syntax8)",
+        "editorLineNumber.foreground": "var(--syntax9)",
+        "editorLineNumber.activeForeground": "var(--syntax6)",
+        foreground: "var(--syntax6)",
+        "panelTitle.activeForeground": "var(--syntax6)",
+        "sideBarTitle.foreground": "var(--syntax6)",
+        "sideBarSectionHeader.foreground": "var(--syntax6)",
+        "panelTitle.inactiveForeground": "var(--syntax10)",
+        "tab.inactiveForeground": "var(--syntax10)",
+        "list.highlightForeground": "var(--syntax10)",
+        "editor.lineHighlightBackground": "var(--syntax11)",
+        focusBorder: "var(--syntax12)",
+        "button.background": "var(--syntax13)",
+        "list.activeSelectionBackground": "var(--syntax13)",
+        "list.focusBackground": "var(--syntax13)",
+        "selection.background": "#B3D7FF",
+        "list.inactiveSelectionBackground": "var(--syntax14)",
+        "terminal.ansiBlack": "var(--syntax15)",
+        "terminal.ansiBrightBlack": "var(--syntax15)",
+        "terminal.ansiRed": "var(--syntax16)",
+        "terminal.ansiBrightRed": "var(--syntax16)",
+        "terminal.ansiGreen": "var(--syntax17)",
+        "terminal.ansiBrightGreen": "var(--syntax17)",
+        "terminal.ansiYellow": "var(--syntax18)",
+        "terminal.ansiBrightYellow": "var(--syntax18)",
+        "terminal.ansiBlue": "var(--syntax19)",
+        "terminal.ansiBrightBlue": "var(--syntax19)",
+        "terminal.ansiMagenta": "var(--syntax20)",
+        "terminal.ansiBrightMagenta": "var(--syntax20)",
+        "terminal.ansiCyan": "var(--syntax21)",
+        "terminal.ansiBrightCyan": "var(--syntax21)",
+    },
+    tokenColors: [
+        {
+            scope: "new.expr entity.name",
+            settings: {
+                foreground: "var(--syntax22)",
+            },
+        },
+        {
+            name: "Comments",
+            scope: ["comment", "comment storage.type"],
+            settings: {
+                foreground: "var(--syntax23)",
+                fontStyle: "italic",
+            },
+        },
+        {
+            name: "CSS",
+            scope: [
+                "entity.other.attribute-name.pseudo-class.css",
+                "entity.other.attribute-name.pseudo-class.scss",
+                "entity.other.attribute-name.pseudo-element.css",
+                "entity.other.attribute-name.pseudo-element.scss",
+                "support.function.calc.css",
+                "support.function.calc.scss",
+                "support.type.property-name.css",
+                "support.type.property-name.scss",
+                "support.type.vendored.property-name.css",
+                "support.type.vendored.property-name.scss",
+                "meta.property-value.css support.constant",
+                "meta.property-value.scss support.constant",
+                "meta.property-value.css support.constant.property-value",
+                "meta.property-value.scss support.constant.property-value",
+                "support.function.transform.css",
+                "support.function.transform.scss",
+            ],
+            settings: {
+                foreground: "var(--syntax20)",
+            },
+        },
+        {
+            name: "Decorator",
+            scope: [
+                "meta.decorator",
+                "meta.decorator punctuation.decorator",
+                "meta.decorator variable.other.readwrite",
+                "meta.decorator meta.function-call entity.name.function",
+            ],
+            settings: {
+                foreground: "var(--syntax18)",
+            },
+        },
+        {
+            name: "Doctype",
+            scope: ["meta.tag.sgml.html"],
+            settings: {
+                foreground: "var(--syntax9)",
+            },
+        },
+        {
+            name: "Functions",
+            scope: ["entity.name.function", "support.function"],
+            settings: {
+                foreground: "var(--syntax24)",
+            },
+        },
+        {
+            name: "Keys",
+            scope: [
+                "meta.property-list meta.property-name",
+                "support.type.property-name",
+                "support.type.map.key",
+                "entity.name.tag.yaml",
+            ],
+            settings: {
+                foreground: "var(--syntax24)",
+            },
+        },
+        {
+            name: "Keywords",
+            scope: [
+                "keyword.control",
+                "keyword.declaration",
+                "keyword.expressions-and-types",
+                "keyword.operator.new",
+                "keyword.reserved",
+                "keyword.statement",
+                "storage.type",
+                "storage.modifier",
+                "constant.language",
+                "variable.language.super",
+                "variable.language.this",
+                "text.html entity.name.tag",
+                "meta.tag entity.name.tag",
+                "meta.tag support.class",
+                "string.regexp keyword.other",
+            ],
+            settings: {
+                foreground: "var(--syntax25)",
+                fontStyle: "bold",
+            },
+        },
+        {
+            name: "Operators",
+            scope: [
+                "storage.type.function.arrow",
+                "meta.template.expression punctuation",
+                "punctuation.separator.key-value",
+                "meta.object-literal.key meta.brace.square",
+                "meta.template.expression keyword.operator",
+                "keyword.operator.or.regexp",
+                "keyword.operator.quantifier",
+                "punctuation.definition.group.regexp",
+                "punctuation.definition.character-class",
+            ],
+            settings: {
+                foreground: "var(--syntax15)",
+            },
+        },
+        {
+            scope: [
+                "meta.tag entity.other.attribute-name",
+                "constant.character.escape.backslash",
+            ],
+            settings: {
+                foreground: "var(--syntax26)",
+            },
+        },
+        {
+            name: "Numbers",
+            scope: ["constant.numeric", "keyword.other.unit", "constant.other.color"],
+            settings: {
+                foreground: "var(--syntax19)",
+            },
+        },
+        {
+            name: "Strings",
+            scope: [
+                "string",
+                "variable.parameter.url.scss",
+                "markup.heading.markdown",
+                "beginning.punctuation.definition.list.markdown",
+                "meta.template.expression meta.embedded punctuation.definition.string.begin",
+                "meta.template.expression meta.embedded punctuation.definition.string.end",
+            ],
+            settings: {
+                foreground: "var(--syntax27)",
+            },
+        },
+        {
+            name: "Types",
+            scope: [
+                "meta.type",
+                "meta.return.type",
+                "entity.name.type",
+                "support.type.primitive",
+            ],
+            settings: {
+                foreground: "var(--syntax22)",
+            },
+        },
+        {
+            scope: [
+                "meta.objectliteral variable.other.object",
+                "entity.name.type.module",
+                "entity.other.inherited-class",
+                "variable.scss",
+                "variable.other.bracket.shell",
+                "entity.name.function.scss",
+            ],
+            settings: {
+                foreground: "var(--syntax21)",
+            },
+        },
+        {
+            scope: [
+                "keyword.control.at-rule",
+                "meta.import variable.other.readwrite",
+                "meta.definition.variable variable.other.readwrite",
+                "meta.definition.variable variable.other.constant",
+                "meta.template.expression variable.other.readwrite",
+                "meta.template.expression variable.other.constant",
+                "support.constant.property-value",
+            ],
+            settings: {
+                foreground: "var(--syntax15)",
+            },
+        },
+        {
+            scope: [
+                "variable.other.property",
+                "variable.other.object.property",
+                "support.variable.property",
+            ],
+            settings: {
+                foreground: "var(--syntax22)",
+            },
+        },
+    ],
+}

package/src/content/AppearanceDecorator.styles.tsx

@@ -0,0 +1,11 @@
+import { css } from "@linaria/core";
+
+export const SearchButtonFullWidth = css`
+    [data-desktop]:has(xyd-nav-item xyd-search-button) {
+        width: 100%;
+    }
+
+    xyd-nav-item:has(xyd-search-button) {
+        flex: 1;
+    }
+`

package/src/content/ContentDecoator.styles.tsx

@@ -0,0 +1,180 @@
+import { css } from "@linaria/core";
+
+export default {
+    ContentDecoratorHost: css`
+        @layer components {
+            --space-small: 8px;
+            --space-medium: 16px;
+            --space-large: 20px;
+            --space-xlarge: 24px;
+            --space-xxlarge: 32px;
+            --space-2xlarge: 50px;
+
+            font-size: var(--xyd-font-size-medium);
+            line-height: var(--xyd-line-height-medium);
+
+            p:not(li p):not(ul p):not(xyd-callout p):not(xyd-codetabs p):not(xyd-guidecard p):not([data-button="true"] p) {
+                margin-top: var(--space-medium);
+            }
+
+            button {
+                p {
+                    color: var(--xyd-button-primary-color);
+                }
+            }
+
+            & > img {
+                margin-top: var(--space-medium);
+            }
+
+            figure {
+                margin: 0;
+                padding: 12px;
+                background: var(--dark16);
+                border-radius: 15px;
+                border: 1px solid var(--dark32);
+                text-align: center;
+                padding-bottom: 0;
+
+                figcaption {
+                    padding: 4px;
+                }
+            }
+
+            blockquote {
+                margin-top: var(--space-medium);
+            }
+            
+            img {
+                margin-top: var(--space-medium);
+            }
+
+            xyd-steps {
+                margin-top: var(--space-medium);
+            }
+            
+            table {
+                margin-top: var(--space-xlarge);
+                font-size: var(--xyd-font-size-small);
+                line-height: var(--xyd-line-height-small);
+            }
+            
+            details {
+                &:not([data-kind="tertiary"]) {
+                    --xyd-callout-bgcolor: var(--white);
+                }
+                margin-top: var(--space-medium);
+
+                summary {
+                    [part="summary-deep"], [part="summary-deep-label"] {
+                        font-size: var(--xyd-font-size-small);
+                        line-height: var(--xyd-line-height-small);
+                    }
+                    [part="summary-deep-label"] {
+                        font-weight: bold;
+                    }
+                }
+
+                &[data-kind="secondary"] {
+                    code {
+                        background: var(--xyd-details-bgcolor--secondary);
+                    }
+                }
+            }
+
+            hr {
+                margin: var(--space-xxlarge) 0;
+            }
+            
+            p {
+                display: block;
+
+                code {
+                    font-size: var(--xyd-font-size-small);
+                    line-height: var(--xyd-line-height-small);
+                    margin: 0;
+                }
+            }
+            
+            h2,h3,h4,h5,h6 {
+                margin-top: var(--space-xxlarge);
+                &[data-kind="muted"] {
+                    display: block;
+                }
+            }
+            h2 {
+                margin-top: var(--space-2xlarge);
+            }
+            h2:first-of-type {
+                margin-top: var(--space-xxlarge);
+            }
+            h4 {
+                &[data-kind="muted"] {
+                    margin: 4px 0 16px;
+                }
+            }
+            
+            ul:not(xyd-tabs ul), ol:not(xyd-tabs ol) {
+                margin-top: var(--space-medium);
+            }
+            
+            xyd-codetabs, xyd-callout, xyd-guidecard, xyd-tabs {
+                margin: var(--space-large) 0;
+            }
+            
+            xyd-guidecard [part="body"]  {
+                color: var(--dark48);
+                font-size: var(--xyd-font-size-small);
+                line-height: var(--xyd-line-height-medium);
+
+                p {
+                    color: var(--dark48);
+                    font-size: var(--xyd-font-size-small);
+                    line-height: var(--xyd-line-height-medium);
+                }
+            }
+            
+            xyd-guidecard-list xyd-guidecard {
+                margin-bottom: 0;
+            }
+
+            xyd-tabs [part="buttons"] {
+                font-size: var(--xyd-font-size-small);
+                line-height: var(--xyd-line-height-small);
+            }
+
+            xyd-callout {
+                --xyd-font-size-medium: var(--xyd-font-size-small);
+            }
+        
+            xyd-codetabs {
+                xyd-code-pre {
+                    font-size: var(--xyd-font-size-xsmall);
+                    line-height: var(--xyd-line-height-xsmall);
+                }
+            }
+
+            xyd-breadcrumbs {
+                font-size: var(--xyd-font-size-small);
+                line-height: var(--xyd-line-height-small);
+            }
+
+            xyd-grid-decorator {
+                @media (min-width: 1025px) and (max-width: 1400px) {
+                    ul ul {
+                        grid-template-columns: repeat(2, 1fr);
+                    }
+                    
+                    /* Override data-cols for tablet */
+                    &[data-cols] {
+                        --data-cols: 2;
+                    }
+                }
+            }
+
+            [data-content-element]:not([data-content-element="false"]) {
+                margin-top: var(--space-medium);
+            }
+        }
+    `
+}

package/src/content/ContentDecorator.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import cn from "./ContentDecoator.styles";
+
+interface ContentDecoratorProps {
+    children: React.ReactNode
+    metaComponent?: string
+}
+
+export function ContentDecorator({ children, metaComponent }: ContentDecoratorProps) {
+    return <xyd-content-decorator
+        className={cn.ContentDecoratorHost}
+        meta-component={metaComponent || undefined}
+    >
+        {children}
+    </xyd-content-decorator>
+}

package/src/content/GridDecorator.styles.tsx

@@ -0,0 +1,86 @@
+import { css } from "@linaria/core";
+
+export default {
+    GridDecoratorHost: css`
+        @layer components {
+            display: grid;
+            gap: 1rem;
+            width: 100%;
+
+            /* First level ul - 1fr */
+            > ul {
+                display: grid;
+                grid-template-columns: 1fr;
+                gap: 1rem;
+                width: 100%;
+            }
+
+            /* Nested ul - 2fr */
+            ul ul {
+                display: grid;
+                grid-template-columns: repeat(2, 1fr);
+                gap: 1rem;
+                width: 100%;
+            }
+
+
+            &[data-cols="2"] { --data-cols: 2; }
+            &[data-cols="3"] { --data-cols: 3; }
+            &[data-cols="4"] { --data-cols: 4; }
+            &[data-cols="5"] { --data-cols: 5; }
+            &[data-cols="6"] { --data-cols: 6; }
+
+            &[data-cols] {
+                --cols: var(--data-cols, 2);
+                ul ul {
+                    grid-template-columns: repeat(var(--cols), 1fr);
+                }
+            }
+
+            @media (max-width: 768px) {
+                > ul {
+                    gap: 0;
+                }
+                ul ul {
+                    grid-template-columns: 1fr;
+                }
+                
+                /* Override data-cols for mobile */
+                &[data-cols] {
+                    --data-cols: 1;
+                }
+            }
+
+            /* Tablet breakpoint for 2 columns */
+            @media (min-width: 769px) and (max-width: 1024px) {
+                ul ul {
+                    grid-template-columns: repeat(2, 1fr);
+                }
+                
+                /* Override data-cols for tablet */
+                &[data-cols] {
+                    --data-cols: 2;
+                }
+            }
+
+
+            ul, ol, li {
+                &::before {
+                    content: none;
+                }
+            }
+
+            ul, ol {
+                display: grid;
+                margin: 0;
+                padding: 0 !important;
+                list-style: none;
+            }
+
+            li {
+                margin-left: 0 !important;
+                padding-left: 0 !important;
+            }
+        }
+    `
+}

package/src/content/GridDecorator.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import cn from "./GridDecorator.styles";
+
+export interface GridDecoratorProps {
+    children: React.ReactNode
+    cols?: 2 | 3 | 4 | 5 | 6
+}
+
+/**
+ * A wrapper component that applies grid decoration styling to its children.
+ * This component uses a custom element `xyd-grid-decorator` to provide grid-based layout decoration.
+ *
+ * @category Component
+ */
+export function GridDecorator({ children, cols }: GridDecoratorProps) {
+    return <xyd-grid-decorator
+        className={cn.GridDecoratorHost}
+        data-cols={cols}
+    >
+        {children}
+    </xyd-grid-decorator>
+}