@xyd-js/components 0.1.0-xyd.5 → 0.1.0-xyd.52

package/rollup.config.js

@@ -6,19 +6,19 @@ import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import typescript from '@rollup/plugin-typescript';
 import dts from 'rollup-plugin-dts';
-import {terser} from 'rollup-plugin-terser';
+import { terser } from 'rollup-plugin-terser';
 import babel from '@rollup/plugin-babel';
 import postcss from 'rollup-plugin-postcss';
 import wyw from '@wyw-in-js/rollup';
 
-import {createRequire} from 'module';
+import { createRequire } from 'module';
 
 const require = createRequire(import.meta.url);
 const {
     dependencies,
     peerDependencies,
     devDependencies
-} = require('./package.json', {assert: {type: 'json'}});
+} = require('./package.json', { assert: { type: 'json' } });
 
 const external = [
     ...Object.keys(dependencies),
@@ -47,6 +47,7 @@ export default [
             pages: 'src/pages/index.ts',
             views: 'src/views/index.ts',
             writer: 'writer.ts',
+            system: 'src/system/index.ts',
             ...themes
         },
         output: [
@@ -66,6 +67,25 @@ export default [
                         '@babel/preset-react'
                     ],
                 },
+                // classNameSlug: (hash, title, {file}) => {
+                //     // Get the full path after 'src/components/'
+                //     const pathParts = file.split('/');
+                //     const componentsIndex = pathParts.indexOf('src');
+                //     if (componentsIndex === -1) return `XydComponents-Component-${title}`;
+
+                //     // Get everything after 'components' directory
+                //     const componentPath = pathParts
+                //         .slice(componentsIndex + 1)
+                //         .filter(part => !part.endsWith('.styles.tsx')) // Remove styles.tsx
+                //         .join('-');
+
+                //     // Use the title as the style name (it's already the variable name)
+                //     const styleName = title.replace(/^\$/, ''); // Remove $ prefix if present
+
+                //     // TODO: in the future hash + system to override styles for specific components if hash
+                //     return `XydComponents-Component-${componentPath}__${styleName}`;
+                //     // return `XydComponents-Component-${componentPath}__${styleName}_${hash}`;
+                // }
             }),
             postcss({
                 extract: true,
@@ -163,6 +183,15 @@ export default [
         plugins: [dts()],
         external
     },
+    {
+        input: 'src/system/index.ts',
+        output: {
+            file: 'dist/system.d.ts',
+            format: 'es',
+        },
+        plugins: [dts()],
+        external
+    },
     ...Object.keys(themes).map(theme => ({
         input: themes[theme],
         output: {

package/src/brand/Button/Button.styles.tsx

@@ -0,0 +1,28 @@
+import {css} from "@linaria/core";
+
+export const ButtonHost = css`
+    display: inline-block;
+    border: 1px solid transparent;
+    text-align: center;
+    white-space: nowrap;
+    border-radius: 20px;
+    padding: 0 20px;
+    border-color: transparent;
+    color: #3c3c43;
+    background-color: #f7f7f8;
+
+    transition: color .25s, border-color .25s, background-color .25s;
+
+    &:hover {
+        background: #e3e3e6;
+    }
+`;
+
+export const ButtonHostSecondary = css`
+    color: #fff;
+    background-color: rgb(112, 81, 212);
+
+    &:hover {
+        background-color: rgb(95, 59, 211)
+    }
+`; 

package/src/brand/Button/Button.tsx

@@ -1,37 +1,5 @@
 import React from "react";
-import {css} from "@linaria/core";
-
-const $button = {
-    host: css`
-        display: inline-block;
-        border: 1px solid transparent;
-        text-align: center;
-        font-weight: 600;
-        white-space: nowrap;
-        border-radius: 20px;
-        padding: 0 20px;
-        line-height: 38px;
-        font-size: 14px;
-        border-color: transparent;
-        color: #3c3c43;
-        background-color: #f7f7f8;
-
-        transition: color .25s, border-color .25s, background-color .25s;
-
-        &:hover {
-            background: #e3e3e6;
-        }
-    `,
-
-    host$$secondary: css`
-        color: #fff;
-        background-color: rgb(112, 81, 212);
-
-        &:hover {
-            background-color: rgb(95, 59, 211)
-        }
-    `
-}
+import * as cn from "./Button.styles";
 
 export interface ButtonProps {
     children: React.ReactNode
@@ -40,8 +8,8 @@ export interface ButtonProps {
 
 export function Button({children, kind}: ButtonProps) {
     return <button className={`
-        ${$button.host}
-        ${kind === "secondary" && $button.host$$secondary}
+        ${cn.ButtonHost}
+        ${kind === "secondary" && cn.ButtonHostSecondary}
     `}>
         {children}
     </button>

package/src/brand/CTABanner/CTABanner.styles.tsx

@@ -0,0 +1,80 @@
+import {css} from "@linaria/core";
+
+export const CTABannerHost = css`
+    padding: 20px;
+`;
+
+export const CTABannerContainer = css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 80px;
+`;
+
+export const CTABannerHero = css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 40px;
+`;
+
+export const CTABannerHeadingEffect = css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    background: -webkit-linear-gradient(
+            120deg,
+            var(--headingEffect-color-tertiary) 20%,
+            var(--headingEffect-color-tertiary) 30%,
+            var(--headingEffect-color-secondary) 60%,
+            var(--headingEffect-color-primary) 75%,
+            var(--headingEffect-color-primary) 85%
+    );
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: wave 5s infinite;
+    background-size: 200% 200%;
+    background-position: 50% 50%; // Start with all colors visible
+
+    @keyframes wave {
+        0% {
+            background-position: 50% 50%;
+        }
+        50% {
+            background-position: 0% 50%;
+        }
+        100% {
+            background-position: 50% 50%;
+        }
+    }
+`;
+
+export const CTABannerHeadingHost = css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+`;
+
+export const CTABannerHeadingTitle = css`
+    font-weight: var(--xyd-font-weight-black);
+    text-align: center;
+    letter-spacing: 3px;
+    margin: 0;
+`;
+
+export const CTABannerHeadingSubtitle = css`
+    color: #3c3c43;
+    font-weight: var(--xyd-font-weight-semibold);
+    text-align: center;
+`;
+
+export const CTABannerButtonGroupHost = css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+`; 

package/src/brand/CTABanner/CTABanner.tsx

@@ -1,127 +1,49 @@
-import React from "react"
-import {css} from "@linaria/core";
+import React from "react";
+import * as cn from "./CTABanner.styles";
 
-const $banner = {
-    host: css`
-        padding: 20px;
-    `,
-    container: css`
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 80px;
-    `,
-    hero: css`
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        gap: 40px;
-    `,
-    headingEffect: css`
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-
-        background: -webkit-linear-gradient(
-                120deg,
-                var(--headingEffect-color-tertiary) 20%,
-                var(--headingEffect-color-tertiary) 30%,
-                var(--headingEffect-color-secondary) 60%,
-                var(--headingEffect-color-primary) 75%,
-                var(--headingEffect-color-primary) 85%
-        );
-        background-clip: text;
-        -webkit-text-fill-color: transparent;
-        animation: wave 5s infinite;
-        background-size: 200% 200%;
-        background-position: 50% 50%; // Start with all colors visible
+export interface CTABannerProps {
+    children: React.ReactNode;
+}
 
-        @keyframes wave {
-            0% {
-                background-position: 50% 50%;
-            }
-            50% {
-                background-position: 0% 50%;
-            }
-            100% {
-                background-position: 50% 50%;
-            }
-        }
-    `
+export interface CTABannerHeadingProps {
+    title: string;
+    subtitle: string;
 }
 
-export interface CTABannerProps {
-    children: React.ReactNode
+export interface CTABannerButtonGroupProps {
+    children: React.ReactNode;
 }
 
 export function CTABanner({children}: CTABannerProps) {
-    return <div className={$banner.host}>
-        <div className={$banner.container}>
-            <div className={$banner.hero}>
-                {children}
+    return (
+        <div className={cn.CTABannerHost}>
+            <div className={cn.CTABannerContainer}>
+                <div className={cn.CTABannerHero}>
+                    {children}
+                </div>
             </div>
         </div>
-    </div>
-}
-
-const $heading = {
-    host: css`
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-    `,
-    title: css`
-        font-size: 76px;
-        font-weight: 900;
-        text-align: center;
-        letter-spacing: 3px;
-        margin: 0;
-    `,
-    subtitle: css`
-        color: #3c3c43;
-        font-size: 46px;
-        font-weight: 600;
-        text-align: center;
-    `
+    );
 }
 
-export interface CTABannerHeadingProps {
-    title: string
-    subtitle: string | React.ReactNode
-    headingEffect?: boolean
-}
-
-CTABanner.Heading = function CTABannerHeading({title, subtitle, headingEffect}: CTABannerHeadingProps) {
-    return <div className={$heading.host}>
-        <h1 className={$heading.title}>
-            {
-                headingEffect
-                    ? <span className={$banner.headingEffect}>
-                        {title}
-                      </span>
-                    : title
-            }
-        </h1>
-        <p className={$heading.subtitle}>
-            {subtitle}
-        </p>
-    </div>
+function Heading({title, subtitle}: CTABannerHeadingProps) {
+    return (
+        <div className={cn.CTABannerHeadingHost}>
+            <div className={cn.CTABannerHeadingEffect}>
+                <h1 className={cn.CTABannerHeadingTitle}>{title}</h1>
+            </div>
+            <h2 className={cn.CTABannerHeadingSubtitle}>{subtitle}</h2>
+        </div>
+    );
 }
 
-const $btnGroup = {
-    host: css`
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 10px;
-    `
+function ButtonGroup({children}: CTABannerButtonGroupProps) {
+    return (
+        <div className={cn.CTABannerButtonGroupHost}>
+            {children}
+        </div>
+    );
 }
 
-CTABanner.ButtonGroup = function CTABannerButtonGroup({children}) {
-    return <div className={$btnGroup.host}>
-        {children}
-    </div>
-}
+CTABanner.Heading = Heading;
+CTABanner.ButtonGroup = ButtonGroup;

package/src/brand/Footer/Footer.styles.tsx

@@ -0,0 +1,18 @@
+import {css} from "@linaria/core";
+
+export const FooterHost = css`
+    position: relative;
+    border-top: 1px solid #f0f0f0;
+    padding: 32px;
+    background-color: #fff;
+`;
+
+export const FooterContainer = css`
+    margin: 0 auto;
+    max-width: 1200px;
+    text-align: center;
+`;
+
+export const FooterTextContainer = css`
+    color: rgba(60, 60, 67, .78);
+`; 

package/src/brand/Footer/Footer.tsx

@@ -1,34 +1,14 @@
 import React from "react";
-import {css} from "@linaria/core";
-
-const $footer = {
-    host: css`
-        position: relative;
-        border-top: 1px solid #f0f0f0;
-        padding: 32px;
-        background-color: #fff;
-    `,
-    container: css`
-        margin: 0 auto;
-        max-width: 1200px;
-        text-align: center;
-    `,
-    textContainer: css`
-        line-height: 24px;
-        font-size: 14px;
-        font-weight: 500;
-        color: rgba(60, 60, 67, .78);
-    `
-}
+import * as cn from "./Footer.styles";
 
 export interface FooterProps {
     children?: React.ReactNode
 }
 
 export function Footer({children}: FooterProps) {
-    return <footer className={$footer.host}>
-        <div className={$footer.container}>
-            <div className={$footer.textContainer}>
+    return <footer className={cn.FooterHost}>
+        <div className={cn.FooterContainer}>
+            <div className={cn.FooterTextContainer}>
                 {children}
             </div>
         </div>

package/src/brand/TODO.md

@@ -0,0 +1 @@
+DELETE `brand`

package/src/coder/Code/Code.styles.tsx

@@ -1,50 +1,149 @@
-import {css} from "@linaria/core";
+import { css } from "@linaria/core";
 
-export const $mark = {
-    host: css`
+export const LineNumberHost = css`
+    @layer defaults {
+        display: flex;
+        position: relative;
+        
+        [part="line-number"] {
+            /* margin: 0 12px 0px 4px; */
+            width: 25px;
+            left: -15px;
+            position: absolute;
+            margin: 0;
+            text-align: right;
+            user-select: none;
+            opacity: 0.5;
+        }
+    }
+`;
+
+export const MarkHost = css`
+    @layer defaults {
         display: flex;
         border-left-width: 4px;
         border-color: transparent;
         margin: 4px 0;
-    `,
-    line: css`
-        flex: 1 1 0%;
-    `,
-    $$annotated: css`
-        border-color: #60A5FA;
-        background-color: #EEF2FF;
-    `
-}
-
-export const $lineNumber = {
-    host: css`
-        margin: 0 12px 0px 4px;
-        //text-align: right;
-        user-select: none;
-        opacity: 0.5;
-    `
-}
-
-export const $code = {
-    host: css`
+
+        &[data-annotated="true"] {
+            border-color: var(--xyd-coder-code-mark-border-color);
+            background-color: var(--xyd-coder-code-mark-bgcolor);
+        }
+
+        &[data-diff="true"] {
+            position: relative;
+
+            &[data-query="-"] {
+                border-color: var(--xyd-text-color--error--active);
+                background-color: var(--xyd-text-color--error--muted);
+            }
+
+            &[data-query="+"] {
+                border-color: var(--xyd-text-color--success--active);
+                background-color: var(--xyd-text-color--success--muted);
+            }
+
+            & > :first-child {
+                position: absolute;
+                left: 5px;
+            }
+        }
+
+        [part="line"] {
+            flex: 1 1 0%;
+        }
+
+        xyd-code-linenumber [part="line"]{
+            position: relative;
+            left: 25px;
+        }
+    }
+`;
+
+export const MarkInlineHost = css`
+    @layer defaults {
+        display: inline-block;
+
+        outline: solid 1px var(--xyd-coder-code-mark-border-color);
+        background: var(--xyd-coder-code-mark-bgcolor);
+
+
+        &[data-diff="true"] {
+            &[data-query="-"] {
+                border-color: var(--xyd-text-color--error--active);
+                background-color: var(--xyd-text-color--error--muted);
+            }
+
+            &[data-query="+"] {
+                border-color: var(--xyd-text-color--success--active);
+                background-color: var(--xyd-text-color--success--muted);
+            }
+        }
+    }
+`
+
+export const BgHost = css`
+    @layer defaults {
+        &[data-annotated="true"] {
+            border-color: var(--xyd-coder-code-mark-border-color);
+            background-color: var(--xyd-coder-code-mark-bgcolor);
+        }
+    }
+`
+
+export const CodeHost = css`
+    @layer defaults {
         max-height: 400px;
-        background: linear-gradient(45deg, rgb(247, 247, 248) 0%, rgb(247, 247, 248) 100%) !important;
+        background: var(--xyd-coder-code-background); // cuz can be overwritten by style - better solution in the future?
 
         margin: 0;
         padding: 8px 16px;
 
-        border-top: 1px solid rgb(236, 236, 241);
-        border-bottom-left-radius: 10px;
-        border-bottom-right-radius: 10px;
+        border-top: 1px solid var(--xyd-coder-code-border-color);
+        
+        &:not(:has(+ [part="code-description"])) {
+            border-bottom-left-radius: 10px;
+            border-bottom-right-radius: 10px;
+        }
 
-        font-size: 12px;
-        line-height: 20px;
         white-space: pre-wrap;
         word-break: break-all;
 
         overflow-y: scroll;
-    `,
-    host$$full: css`
-        max-height: 100%;   
-    `
-}
+
+        &[data-size="full"] {
+            max-height: 100%;   
+        }
+
+        & > div {
+        }
+    }
+`;
+
+
+export const CodeDescription = css`
+    padding: 17px 20px 10px;
+    background-color: var(--white);
+    border-radius: 0 0 8px 7px;
+    display: flex;
+    gap: 12px;
+    align-items: flex-start;
+    color: var(--text-primary);
+
+    & > div:first-child {
+        display: flex;
+        align-items: center;
+        padding-top: 5px;
+    }
+
+    & > div:last-child {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+
+        > span {
+            display: flex;
+            align-items: center;
+        }
+    }
+`