@teseor/css 1.3.0 → 1.5.0

package/src/04-components/typography/code-block/code-block.docs.json

@@ -0,0 +1,289 @@
+{
+  "id": "code-block",
+  "type": "component",
+  "title": "Code Block",
+  "description": "Multi-line code display with monospace font, horizontal scroll, and optional line numbers.",
+  "api": "./code-block.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "pre",
+              "class": "ui-code-block",
+              "children": [
+                {
+                  "tag": "code",
+                  "class": "ui-code-block__code",
+                  "text": ".button {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--ui-space-1);\n}"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Horizontal overflow",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "pre",
+              "class": "ui-code-block",
+              "children": [
+                {
+                  "tag": "code",
+                  "class": "ui-code-block__code",
+                  "text": "export function calculateGridRhythm(element: HTMLElement, unit: number): { violations: string[]; totalHeight: number } {\n  const computed = getComputedStyle(element);\n  return { violations: [], totalHeight: parseFloat(computed.height) };\n}"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Compact",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "pre",
+              "class": "ui-code-block ui-code-block--compact",
+              "children": [
+                {
+                  "tag": "code",
+                  "class": "ui-code-block__code",
+                  "text": "npm install @teseor/css\nimport \"@teseor/css/dist/index.css\";"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Line numbers",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "pre",
+              "class": "ui-code-block ui-code-block--line-numbers",
+              "children": [
+                {
+                  "tag": "code",
+                  "class": "ui-code-block__code",
+                  "children": [
+                    {
+                      "tag": "span",
+                      "class": "ui-code-block__line",
+                      "children": [
+                        {
+                          "tag": "span",
+                          "class": "ui-code-block__line-number"
+                        },
+                        {
+                          "tag": "span",
+                          "text": "@layer components {"
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "span",
+                      "class": "ui-code-block__line",
+                      "children": [
+                        {
+                          "tag": "span",
+                          "class": "ui-code-block__line-number"
+                        },
+                        {
+                          "tag": "span",
+                          "text": "  .card {"
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "span",
+                      "class": "ui-code-block__line",
+                      "children": [
+                        {
+                          "tag": "span",
+                          "class": "ui-code-block__line-number"
+                        },
+                        {
+                          "tag": "span",
+                          "text": "    padding: var(--_padding);"
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "span",
+                      "class": "ui-code-block__line",
+                      "children": [
+                        {
+                          "tag": "span",
+                          "class": "ui-code-block__line-number"
+                        },
+                        {
+                          "tag": "span",
+                          "text": "    background: var(--_bg);"
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "span",
+                      "class": "ui-code-block__line",
+                      "children": [
+                        {
+                          "tag": "span",
+                          "class": "ui-code-block__line-number"
+                        },
+                        {
+                          "tag": "span",
+                          "text": "    border-radius: var(--_radius);"
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "span",
+                      "class": "ui-code-block__line",
+                      "children": [
+                        {
+                          "tag": "span",
+                          "class": "ui-code-block__line-number"
+                        },
+                        {
+                          "tag": "span",
+                          "text": "  }"
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "span",
+                      "class": "ui-code-block__line",
+                      "children": [
+                        {
+                          "tag": "span",
+                          "class": "ui-code-block__line-number"
+                        },
+                        {
+                          "tag": "span",
+                          "text": "}"
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Compact with line numbers",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "pre",
+              "class": "ui-code-block ui-code-block--compact ui-code-block--line-numbers",
+              "children": [
+                {
+                  "tag": "code",
+                  "class": "ui-code-block__code",
+                  "children": [
+                    {
+                      "tag": "span",
+                      "class": "ui-code-block__line",
+                      "children": [
+                        {
+                          "tag": "span",
+                          "class": "ui-code-block__line-number"
+                        },
+                        {
+                          "tag": "span",
+                          "text": "const name = \"world\";"
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "span",
+                      "class": "ui-code-block__line",
+                      "children": [
+                        {
+                          "tag": "span",
+                          "class": "ui-code-block__line-number"
+                        },
+                        {
+                          "tag": "span",
+                          "text": "console.log(`Hello, ${name}`);"
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-code-block-bg",
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Background color"
+    },
+    {
+      "token": "--ui-code-block-color",
+      "default": "var(--ui-color-text)",
+      "description": "Text color"
+    },
+    {
+      "token": "--ui-code-block-border-color",
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
+    },
+    {
+      "token": "--ui-code-block-padding",
+      "default": "var(--ui-space-3)",
+      "description": "Content padding"
+    },
+    {
+      "token": "--ui-code-block-font-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size"
+    },
+    {
+      "token": "--ui-code-block-line-height",
+      "default": "var(--ui-leading-tight-sm)",
+      "description": "Line height"
+    },
+    {
+      "token": "--ui-code-block-radius",
+      "default": "var(--ui-radius-md)",
+      "description": "Border radius"
+    },
+    {
+      "token": "--ui-code-block-padding-compact",
+      "default": "var(--ui-space-1)",
+      "description": "Padding for compact variant"
+    },
+    {
+      "token": "--ui-code-block-line-number-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Line number text color"
+    },
+    {
+      "token": "--ui-code-block-line-number-border-color",
+      "default": "var(--ui-color-border)",
+      "description": "Line number separator color"
+    }
+  ]
+}

package/src/04-components/typography/code-block/code-block.visual.spec.ts

@@ -0,0 +1,14 @@
+import { resolve } from 'node:path';
+import { expect, test } from '@playwright/test';
+import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
+
+const DOCS_PATH = resolve(__dirname, 'code-block.docs.json');
+
+test.describe('code-block visual regression', () => {
+  test('all variations', async ({ page }) => {
+    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await validateGridRhythm(page, 'code-block');
+    await saveForLostPixel(page, 'code-block');
+    await expect(page.locator('body')).toHaveScreenshot('code-block.visual.png');
+  });
+});

package/src/04-components/typography/code-block/index.scss

@@ -0,0 +1,87 @@
+@use '../../../00-config/tokens/variables' as t;
+
+// Token definitions
+@layer components.tokens {
+  .code-block {
+    --_bg: var(--ui-code-block-bg, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
+    --_color: var(--ui-code-block-color, var(--ui-color-text, #{t.$color-text}));
+    --_border-color: var(--ui-code-block-border-color, var(--ui-color-border, #{t.$color-border}));
+    --_padding: var(--ui-code-block-padding, var(--ui-space-3, #{t.$space-3}));
+    --_font-size: var(--ui-code-block-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    --_line-height: var(--ui-code-block-line-height, var(--ui-leading-tight-sm, #{t.$leading-tight-sm}));
+    --_radius: var(--ui-code-block-radius, var(--ui-radius-md, #{t.$radius-md}));
+  }
+
+  .code-block--compact {
+    --_padding: var(--ui-code-block-padding-compact, var(--ui-space-1, #{t.$space-1}));
+  }
+
+  .code-block--line-numbers {
+    --_line-number-color: var(--ui-code-block-line-number-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    --_line-number-border-color: var(--ui-code-block-line-number-border-color, var(--ui-color-border, #{t.$color-border}));
+  }
+}
+
+// Implementation
+@layer components.styles {
+  .code-block {
+    display: block;
+    // Subtract border from padding to keep total on grid
+    padding: calc(var(--_padding) - var(--ui-border-width-sm, #{t.$border-width-sm}));
+    overflow-x: auto;
+
+    font-family: var(--ui-font-mono, #{t.$font-mono});
+    font-size: var(--_font-size);
+    line-height: var(--_line-height);
+    white-space: pre;
+    color: var(--_color);
+
+    background: var(--_bg);
+    border: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--_border-color);
+    border-radius: var(--_radius);
+  }
+
+  // Reset nested code element
+  .code-block__code {
+    padding: 0;
+
+    font: inherit;
+    color: inherit;
+
+    background: none;
+    border: none;
+  }
+
+  // Line numbers via CSS counters
+  .code-block--line-numbers {
+    counter-reset: line-number;
+
+    padding-inline-start: 0;
+
+    .code-block__line {
+      display: block;
+    }
+
+    .code-block__line-number {
+      display: inline-block;
+      counter-increment: line-number;
+
+      box-sizing: border-box;
+      min-inline-size: var(--ui-space-4, #{t.$space-4});
+      padding-inline-end: var(--ui-space-2, #{t.$space-2});
+      margin-inline-end: var(--ui-space-2, #{t.$space-2});
+
+      font-variant-numeric: tabular-nums;
+
+      text-align: end;
+      color: var(--_line-number-color);
+
+      border-inline-end: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--_line-number-border-color);
+      user-select: none;
+
+      &::before {
+        content: counter(line-number);
+      }
+    }
+  }
+}

package/src/04-components/typography/list/index.scss

@@ -0,0 +1,65 @@
+@use '../../../00-config/tokens/variables' as t;
+
+// Ordered and unordered lists with spacing and layout variants
+
+@layer components.tokens {
+  .list {
+    --_spacing: var(--ui-list-spacing, #{t.$unit});
+    --_marker-color: var(--ui-list-marker-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    --_indent: var(--ui-list-indent, var(--ui-space-3, #{t.$space-3}));
+    --_line-height: var(--ui-list-line-height, var(--ui-leading-md, #{t.$leading-md}));
+  }
+
+  // @modifier spacing
+  .list--compact {
+    --_spacing: 0;
+  }
+
+  .list--loose {
+    --_spacing: calc(#{t.$unit} * 2);
+  }
+}
+
+@layer components.styles {
+  .list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--_spacing);
+
+    padding-inline-start: var(--_indent);
+    margin: 0;
+
+    line-height: var(--_line-height);
+  }
+
+  .list::marker,
+  .list li::marker {
+    color: var(--_marker-color);
+  }
+
+  // Removes markers and indent
+  .list--unstyled {
+    padding-inline-start: 0;
+
+    list-style: none;
+  }
+
+  // Horizontal flow with wrapping
+  .list--inline {
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    padding-inline-start: 0;
+
+    list-style: none;
+  }
+
+  // Nested lists inherit spacing
+  .list .list {
+    margin-block-start: var(--_spacing);
+  }
+
+  .list__item {
+    line-height: var(--_line-height);
+  }
+}

package/src/04-components/typography/list/list.api.json

@@ -0,0 +1,33 @@
+{
+  "name": "list",
+  "element": "ul",
+  "modifiers": {
+    "style": {
+      "values": ["unstyled", "inline"]
+    },
+    "spacing": {
+      "values": ["compact", "loose"]
+    }
+  },
+  "elements": {
+    "item": {}
+  },
+  "cssVars": [
+    {
+      "name": "--ui-list-spacing",
+      "default": "var(--unit)"
+    },
+    {
+      "name": "--ui-list-marker-color",
+      "default": "var(--ui-color-text-muted)"
+    },
+    {
+      "name": "--ui-list-indent",
+      "default": "var(--ui-space-3)"
+    },
+    {
+      "name": "--ui-list-line-height",
+      "default": "var(--ui-leading-md)"
+    }
+  ]
+}