@xyd-js/components 0.1.0-xyd.7 → 0.1.0-xyd.8

package/src/writer/GuideCard/GuideCard.styles.tsx

@@ -1,115 +1,119 @@
 import {css} from "@linaria/core";
+import colors from "@livesession/design-system-colors"
 
-export const $guide = {
-    host: css`
-    `,
-    host$$secondary: css`
-        //flex-grow: 1;
-        //width: 100%;
-        display: flex;
-        position: relative;
-        overflow: hidden;
-        border: .5px solid #ececf1;
-        background: linear-gradient(238deg, rgba(247, 247, 248, .5) 0%, rgba(247, 247, 248, 1) 100%);
-        border-radius: 8px;
-        padding: 16px 20px 20px;
-        z-index: 0;
-        transition: box-shadow .2s ease-in-out, background-image .2s ease;
-
-        &:hover {
-            background: linear-gradient(238deg, rgba(255, 255, 255, .5) 0%, rgba(250, 250, 250, 1) 100%);
-        }
-    `,
-    host$$secondary$$md: css`
-        padding: 21px 25px 25px;
-    `,
-    link: css`
-        width: 100%;
-        height: 100%;
-    `,
-    item: css`
-        border-radius: 8px;
-        display: flex;
-
-        align-items: flex-start;
-        cursor: pointer;
-        transition: opacity .15s;
-
-        &:hover {
-            [data-pointer="true"] {
-                opacity: 1;
-                transform: translate(0);
-            }
+export const GuideHost = css``;
+
+export const GuideHostSecondary = css`
+    //flex-grow: 1;
+    //width: 100%;
+    display: flex;
+    position: relative;
+    overflow: hidden;
+    border: 1px solid ${colors.dark16};
+    background: ${colors.dark8};
+    border-radius: 8px;
+    padding: 24px;
+    z-index: 0;
+    transition: box-shadow .2s ease-in-out, background-image .2s ease;
+
+    &:hover {
+        background: ${colors.white};
+    }
+`;
+
+export const GuideHostSecondaryMd = css`
+    padding: 21px 25px 25px;
+`;
+
+export const GuideLink = css`
+    width: 100%;
+    height: 100%;
+`;
+
+export const GuideItem = css`
+    border-radius: 8px;
+    display: flex;
+
+    align-items: flex-start;
+    cursor: pointer;
+    transition: opacity .15s;
+
+    &:hover {
+        [data-pointer="true"] {
+            opacity: 1;
+            transform: translate(0);
         }
-    `,
-    item$$secondary: css`
-        width: 100%;
-        height: 100%;
-    `,
-    icon: css`
-        line-height: 0px;
-        font-size: 24px;
-        border-radius: 8px;
-        width: 48px;
-        height: 48px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: #353740;
-        border: 1px solid #ececf1;
-        background: linear-gradient(238deg, rgba(255, 255, 255, .5) 0%, rgba(250, 250, 250, 1) 100%);
-        transition: background .2s ease;
-        box-sizing: border-box;
-        flex-shrink: 0;
-    `,
-    right: css`
-        padding-left: 16px;
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-    `,
-    title: css`
-        display: flex;
-        color: #202123;
-        font-weight: 400;
-        align-items: center;
-        transition: color .15s;
-    `,
-    titleBody: css`
-        font-size: 16px;
-        line-height: 20px;
-    `,
-    titleBody$$md: css`
-        font-size: 18px;
-    `,
-    body: css`
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 20px;
-
-        color: #6e6e80;
-        white-space: normal;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    `,
-    body$$md: css`
-        font-size: 16px;
-    `,
-    pointer: css`
-        opacity: 0;
-        transform: translate(-4px);
-        display: flex;
-        justify-content: center;
-        transition: opacity .15s ease-in-out, transform .15s ease-in-out;
-    `
-}
-
-
-export const $list = {
-    host: css`
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        justify-content: center;
-        gap: 30px;
-    `
-}
+    }
+`;
+
+export const GuideItemSecondary = css`
+    width: 100%;
+    height: 100%;
+`;
+
+export const GuideIcon = css`
+    line-height: 0px;
+    font-size: 24px;
+    height: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #000;
+    transition: background .2s ease;
+    box-sizing: border-box;
+    flex-shrink: 0;
+`;
+
+export const GuideRight = css`
+    padding-left: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+`;
+
+export const GuideTitle = css`
+    display: flex;
+    color: #000;
+    font-weight: 600;
+    align-items: center;
+    transition: color .15s;
+`;
+
+export const GuideTitleBody = css`
+    font-size: 16px;
+    line-height: 20px;
+`;
+
+export const GuideTitleBodyMd = css`
+    font-size: 18px;
+`;
+
+export const GuideBody = css`
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+
+    color: ${colors.dark80};
+    white-space: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+`;
+
+export const GuideBodyMd = css`
+    font-size: 16px;
+`;
+
+export const GuidePointer = css`
+    opacity: 0;
+    transform: translate(-4px);
+    display: flex;
+    justify-content: center;
+    transition: opacity .15s ease-in-out, transform .15s ease-in-out;
+`;
+
+export const GuideListHost = css`
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    justify-content: center;
+    gap: 24px;
+`;

package/src/writer/GuideCard/GuideCard.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 
-import {$guide, $list} from "./GuideCard.styles";
+import * as cn from "./GuideCard.styles";
 
 export interface GuideCardProps {
     children: React.ReactNode;
@@ -21,32 +21,32 @@ export function GuideCard({
 
                           }: GuideCardProps) {
     return <div className={`
-        ${$guide.host}
-        ${kind === "secondary" && $guide.host$$secondary}
-        ${kind === "secondary" && size == "md" && $guide.host$$secondary$$md}
+        ${cn.GuideHost}
+        ${kind === "secondary" && cn.GuideHostSecondary}
+        ${kind === "secondary" && size == "md" && cn.GuideHostSecondaryMd}
     `}>
-        <a className={$guide.link} href={href}>
+        <a className={cn.GuideLink} href={href}>
             <div className={`
-                ${$guide.item}
-                ${kind === "secondary" && $guide.item$$secondary}
+                ${cn.GuideItem}
+                ${kind === "secondary" && cn.GuideItemSecondary}
             `}>
-                {icon && <div className={$guide.icon}>
+                {icon && <div className={cn.GuideIcon}>
                     {icon}
                 </div>}
-                <div className={$guide.right}>
-                    <div className={$guide.title}>
+                <div className={cn.GuideRight}>
+                    <div className={cn.GuideTitle}>
                         <div className={`
-                            ${$guide.title} 
-                            ${$guide.titleBody}
-                            ${size == "md" && $guide.titleBody$$md}
+                            ${cn.GuideTitle} 
+                            ${cn.GuideTitleBody}
+                            ${size == "md" && cn.GuideTitleBodyMd}
                         `}>
                             {title}
                         </div>
-                        <$Pointer/>
+                        <Pointer/>
                     </div>
                     <div className={`
-                        ${$guide.body}
-                        ${size == "md" && $guide.body$$md}
+                        ${cn.GuideBody}
+                        ${size == "md" && cn.GuideBodyMd}
                     `}>
                         {children}
                     </div>
@@ -57,13 +57,13 @@ export function GuideCard({
 }
 
 GuideCard.List = function GuideCardList({children}: { children: React.ReactNode }) {
-    return <div className={$list.host}>
+    return <div className={cn.GuideListHost}>
         {children}
     </div>
 }
 
-function $Pointer() {
-    return <div data-pointer="true" className={$guide.pointer}>
+function Pointer() {
+    return <div data-pointer="true" className={cn.GuidePointer}>
         <svg
             xmlns="http://www.w3.org/2000/svg"
             width={24}

package/src/writer/Heading/Heading.styles.tsx

@@ -1,73 +1,77 @@
 import {css} from "@linaria/core";
 
-export const $heading = {
-    host: css`
-        line-height: 40px;
-        font-weight: 300;
-        color: #202123;
-
-        position: relative;
-        display: inline-block;
-        margin: 0;
-        padding: 0 24px 0 0;
-        scroll-margin-top: 30px;
-        cursor: pointer;
-
-        &:hover {
-            svg {
-                opacity: 1;
-            }
-        }
-    `,
-    h1: css`
-        font-size: 36px;
+export const HeadingHost = css`
+    line-height: 40px;
+    font-weight: 600;
+
+    position: relative;
+    display: inline-block;
+    margin: 0;
+    padding: 0 24px 0 0;
+    scroll-margin-top: 30px;
+    cursor: pointer;
 
-        code {
-            font-size: 30px;
+    &:hover {
+        svg {
+            opacity: 1;
         }
-    `,
-    h2: css`
+    }
+`;
+
+export const HeadingH1 = css`
+    font-size: 36px;
+
+    code {
         font-size: 30px;
+    }
+`;
 
-        code {
-            font-size: 24px;
-        }
-    `,
-    h3: css`
-        font-size: 26px;
+export const HeadingH2 = css`
+    font-size: 30px;
 
-        code {
-            font-size: 22px;
-        }
-    `,
-    h4: css`
+    code {
+        font-size: 24px;
+    }
+`;
+
+export const HeadingH3 = css`
+    font-size: 26px;
+
+    code {
         font-size: 22px;
+    }
+`;
 
-        code {
-            font-size: 18px;
-        }
-    `,
-    h5: css`
+export const HeadingH4 = css`
+    font-size: 22px;
+
+    code {
         font-size: 18px;
+    }
+`;
 
-        code {
-            font-size: 14px;
-        }
-    `,
-    h6: css`
-        font-size: 16px;
+export const HeadingH5 = css`
+    font-size: 18px;
 
-        code {
-            font-size: 12px;
-        }
-    `,
-    link: css`
-        position: absolute;
-        top: 50%;
-        right: 0;
-        margin-top: -6px;
-        opacity: 0;
-        color: #7051d4;
-        transition: opacity .15s ease;
-    `
-}
+    code {
+        font-size: 14px;
+    }
+`;
+
+export const HeadingH6 = css`
+    font-size: 16px;
+
+    code {
+        font-size: 12px;
+    }
+`;
+
+export const HeadingLink = css`
+    position: absolute;
+    top: 50%;
+    right: 0;
+    margin-top: -6px;
+    opacity: 0;
+    color: #7051d4;
+    transition: opacity .15s ease;
+`;

package/src/writer/Heading/Heading.tsx

@@ -1,6 +1,6 @@
 import React, {useRef} from "react"
 
-import {$heading} from "./Heading.styles";
+import * as cn from "./Heading.styles";
 
 export interface HeadingProps {
     children: React.ReactNode
@@ -17,31 +17,31 @@ export function Heading({children, size = 1, as, id, onClick}: HeadingProps) {
 
     return <HeadingComponent
         className={`
-            ${$heading.host}
-            ${size === 1 && $heading.h1}
-            ${size === 2 && $heading.h2}
-            ${size === 3 && $heading.h3}
-            ${size === 4 && $heading.h4}
-            ${size === 5 && $heading.h5}
-            ${size === 6 && $heading.h6}
+            ${cn.HeadingHost}
+            ${size === 1 && cn.HeadingH1}
+            ${size === 2 && cn.HeadingH2}
+            ${size === 3 && cn.HeadingH3}
+            ${size === 4 && cn.HeadingH4}
+            ${size === 5 && cn.HeadingH5}
+            ${size === 6 && cn.HeadingH6}
             xyd_comp-comp-heading
         `}
         onClick={onClick}
     >
         {children}
 
-        {id && <$Anchor/>}
+        {id && <Anchor/>}
     </HeadingComponent>
 }
 
-function $Anchor() {
+function Anchor() {
     return <svg
         xmlns="http://www.w3.org/2000/svg"
         width={15}
         height={15}
         fill="currentColor"
         viewBox="0 0 24 24"
-        className={$heading.link}
+        className={cn.HeadingLink}
         role="presentation"
     >
         <path

package/src/writer/Hr/Hr.styles.tsx

@@ -1,7 +1,5 @@
 import {css} from "@linaria/core";
 
-export const $hr = {
-    host: css`
-        border-color: rgb(229 229 229 / 0.7);
-    `
-}
+export const HrHost = css`
+    border-color: rgb(229 229 229 / 0.7);
+`;

package/src/writer/Hr/Hr.tsx

@@ -1,13 +1,13 @@
 import React from "react"
 
-import {$hr} from "./Hr.styles";
+import * as cn from "./Hr.styles";
 
 export interface HrProps {
     children: React.ReactNode;
 }
 
 export function Hr({children}: HrProps) {
-    return <hr className={$hr.host}>
+    return <hr className={cn.HrHost}>
         {children}
     </hr>
 }

package/src/writer/NavLinks/NavLinks.styles.ts

@@ -1,33 +1,32 @@
 import {css} from "@linaria/core";
+import colors from "@livesession/design-system-colors";
 
-export const $navLinks = {
-    host: css`
-        display: flex;
-        padding-top: 2rem;
-        margin-top: 2rem;
-        margin-bottom: 2rem;
-        justify-content: space-between;
-        align-items: center;
-        border-top-width: 1px;
-        border-color: #ececf1;
-    `,
-    link: css`
-        display: flex;
-        padding-top: 1rem;
-        padding-bottom: 1rem;
-        gap: 0.25rem;
-        align-items: center;
-        font-size: 1rem;
-        line-height: 1.5rem;
-        font-weight: 500;
-        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 300ms;
-        max-width: 50%;
-    `,
-    icon: css`
-        display: inline;
-        height: 1.25rem;
-        flex-shrink: 0;
-    `,
-};
+export const NavLinksHost = css`
+    display: flex;
+    padding-top: 2rem;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    justify-content: space-between;
+    align-items: center;
+    border-top-width: 1px;
+    border-color: ${colors.dark32};
+`;
+
+export const NavLinksLink = css`
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    font-size: 16px;
+    line-height: 1.5;
+    font-weight: 600;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms;
+    max-width: 50%;
+`;
+
+export const NavLinksIcon = css`
+    display: inline;
+    height: 1.25rem;
+    flex-shrink: 0;
+`;

package/src/writer/NavLinks/NavLinks.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import {ArrowLeftIcon, ArrowRightIcon} from '@radix-ui/react-icons'
 
-import {$navLinks} from "./NavLinks.styles";
+import * as cn from "./NavLinks.styles";
 
 function Anchor({children, ...rest}) {
     return <a {...rest}>
@@ -22,14 +22,14 @@ export interface NavLinksProps {
 
 export function NavLinks(props: NavLinksProps) {
     return (
-        <div className={$navLinks.host}>
+        <div className={cn.NavLinksHost}>
             {props.prev ? (
                 <Anchor
                     href={props.prev.href}
                     title={props.prev.title}
-                    className={$navLinks.link}
+                    className={cn.NavLinksLink}
                 >
-                    <ArrowLeftIcon className={$navLinks.icon}/>
+                    <ArrowLeftIcon className={cn.NavLinksIcon}/>
                     {props.prev.title}
                 </Anchor>
             ) : <div/>}
@@ -37,10 +37,10 @@ export function NavLinks(props: NavLinksProps) {
                 <Anchor
                     href={props.next.href}
                     title={props.next.title}
-                    className={$navLinks.link}
+                    className={cn.NavLinksLink}
                 >
                     {props.next.title}
-                    <ArrowRightIcon className={$navLinks.icon}/>
+                    <ArrowRightIcon className={cn.NavLinksIcon}/>
                 </Anchor>
             )}
         </div>

package/src/writer/Pre/Pre.styles.tsx

@@ -1,13 +1,11 @@
 import {css} from "@linaria/core";
 
-export const $pre = {
-    host: css`
-        margin-top: 0;
-        border-radius: 6px;
-        padding: 16px;
-        border: 0;
+export const PreHost = css`
+    margin-top: 0;
+    border-radius: 6px;
+    padding: 16px;
+    border: 0;
 
-        background-color: rgb(246, 248, 250);
-        overflow: auto;
-    `
-}
+    background-color: rgb(246, 248, 250);
+    overflow: auto;
+`;

package/src/writer/Pre/Pre.tsx

@@ -1,13 +1,13 @@
 import React from "react"
 
-import {$pre} from "./Pre.styles"
+import * as cn from "./Pre.styles"
 
 export interface PreProps {
     children: React.ReactNode
 }
 
 export function Pre({children}: PreProps) {
-    return <pre className={$pre.host}>
+    return <pre className={cn.PreHost}>
         {children}
     </pre>
 }