Merge pull request #214 from phun-ky/feat/212

feat: 🎸 Add support to use syntax highlighting for typography

README.md

@@ -26,6 +26,7 @@
       - [Subtle anatomy](#subtle-anatomy)
     - [Curly brackets](#curly-brackets)
     - [Element typography](#element-typography)
+      - [Syntax highlighting for typography](#syntax-highlighting-for-typography)
     - [Grid spacing](#grid-spacing)
     - [Mark elements](#mark-elements)
     - [A11y notation](#a11y-notation)
@@ -300,13 +301,62 @@ The curly brackets are made with SVG paths, and it is required to have the follo
 In your component examples, use the following attribute.
 
 ```html
-<div data-speccer-typography="[left|right|top|bottom]" class="...">
-  Some text
-</div>
+<p data-speccer-typography="[left|right|top|bottom]" class="...">Some text</p>
 ```
 
 This will place a box to display typography information. Default is `left`.
 
+> [!NOTE]  
+> `getComputedStyles` are used to get the _computed_ values, so for example, a `line-height` set to `1.5` will be presented in pixels, like `96px` if the `font-size` is set to `64px`.
+
+#### Syntax highlighting for typography
+
+If you want to produce a box that uses `pre` and `code` tags with support for syntax highlighting ([PrismJS](https://prismjs.com/) compatible), add `syntax` to the `data-speccer-typography` attribute.
+
+```html
+<p data-speccer-typography="[left|right|top|bottom][syntax]" class="...">
+  Some text
+</p>
+```
+
+You can then override the colors, based on these variables:
+
+```css
+.ph-speccer.speccer.typography.syntax {
+  --ph-speccer-color-code-color-1: #737373;
+  --ph-speccer-color-code-color-2: #ff3aa8;
+  --ph-speccer-color-code-color-3: #38383d;
+  --ph-speccer-color-code-color-4: #ff3aa8;
+  --ph-speccer-color-code-color-5: #ff3aa8;
+  --ph-speccer-color-code-color-6: #0074e8;
+  --ph-speccer-color-code-color-7: #000000;
+  --ph-speccer-color-code-color-8: #cd0404;
+}
+```
+
+Here is an example with these colors and overrides:
+
+```css
+.ph-speccer.speccer.typography.syntax {
+  color: #8c9b9b;
+  background-color: #262831;
+  border-radius: 0.375rem;
+  font-size: 12px;
+  line-height: 1.5;
+  border: none;
+  --ph-speccer-color-code-color-1: #859ba3;
+  --ph-speccer-color-code-color-2: #c79500;
+  --ph-speccer-color-code-color-3: #2caaa0;
+  --ph-speccer-color-code-color-4: #469edd;
+  --ph-speccer-color-code-color-5: #8c9b9b;
+  --ph-speccer-color-code-color-6: #e4e4e7;
+  --ph-speccer-color-code-color-7: #262831;
+  --ph-speccer-color-code-color-8: #ff6666;
+}
+```
+
+![Screenshot of typgraphy with different syntax theme](./public/typography-syntax.png)
+
 ### Grid spacing
 
 ![Screenshot of grid feature](./public/grid.png)

api/modules/features_typography.md

@@ -69,4 +69,4 @@ if (targetElement) {
 
 #### Defined in
 
-[features/typography/index.ts:54](https://github.com/phun-ky/speccer/blob/main/src/features/typography/index.ts#L54)
+[features/typography/index.ts:58](https://github.com/phun-ky/speccer/blob/main/src/features/typography/index.ts#L58)

api/modules/features_typography_utils_template.md

@@ -6,15 +6,16 @@
 
 ### template
 
-▸ **template**(`targetEl`): `Promise`\<`string`\>
+▸ **template**(`targetEl`, `useHighlighting?`): `Promise`\<`string`\>
 
 Generate a HTML string for typography styles of a target element.
 
 #### Parameters
 
-| Name | Type | Description |
-| :------ | :------ | :------ |
-| `targetEl` | `HTMLElement` | The target element for which to generate typography styles. |
+| Name | Type | Default value | Description |
+| :------ | :------ | :------ | :------ |
+| `targetEl` | `HTMLElement` | `undefined` | The target element for which to generate typography styles. |
+| `useHighlighting?` | `boolean` | `false` | If we should use highlighting markup |
 
 #### Returns
 
@@ -26,10 +27,10 @@ Generate a HTML string for typography styles of a target element.
 
 ```ts
 const targetElement = document.getElementById('target');
-const typographyStyles = await template(targetElement);
+const typographyStyles = await template(targetElement, true);
 console.log(typographyStyles);
 ```
 
 #### Defined in
 
-[features/typography/utils/template.ts:17](https://github.com/phun-ky/speccer/blob/main/src/features/typography/utils/template.ts#L17)
+[features/typography/utils/template.ts:18](https://github.com/phun-ky/speccer/blob/main/src/features/typography/utils/template.ts#L18)

src/features/typography/index.ts

@@ -24,7 +24,11 @@ export const create = (html: string, area: string | null): HTMLElement => {
   const _el = document.createElement('div');
   const _extra_class_names = {};
 
-  if (area !== null && area !== '') _extra_class_names[area] = true;
+  if (area !== null && area !== '') {
+    area.split(' ').forEach(a => {
+      _extra_class_names[a] = true;
+    });
+  }
 
   const _class_names = cx('ph-speccer speccer typography', _extra_class_names);
 
@@ -64,9 +68,11 @@ export const element = async (targetEl: HTMLElement): Promise<void> => {
   )
     return;
 
+  const _use_highlighting = _area?.includes('syntax');
+
   targetEl.classList.add('is-specced');
 
-  const _html = await template(targetEl);
+  const _html = await template(targetEl, _use_highlighting);
   const _speccer_el = create(_html, _area);
 
   document.body.appendChild(_speccer_el);

src/features/typography/utils/template.ts

@@ -5,35 +5,64 @@ import { get as getStyles } from '../../../utils/styles';
  * Generate a HTML string for typography styles of a target element.
  *
  * @param {HTMLElement} targetEl - The target element for which to generate typography styles.
+ * @param {boolean} [useHighlighting=false] - If we should use highlighting markup
  * @returns {Promise<string>} - A promise that resolves with the HTML string.
  *
  * @example
  * ```ts
  * const targetElement = document.getElementById('target');
- * const typographyStyles = await template(targetElement);
+ * const typographyStyles = await template(targetElement, true);
  * console.log(typographyStyles);
  * ```
  */
-export const template = async (targetEl: HTMLElement): Promise<string> => {
+export const template = async (targetEl: HTMLElement, useHighlighting = false): Promise<string> => {
   const _target_styles = await getStyles(targetEl);
   const _styles = getTypography(_target_styles);
-  const _line_height =
-    _styles.lineHeight !== 'normal'
-      ? parseInt(_styles.lineHeight, 10) / 16 + 'rem'
-      : 'normal';
+
+  if(useHighlighting){
+    const _fontFamily = _styles.fontFamily.split(',').map(font => {
+      if(font.indexOf('\'') !== -1){
+        return `<span class="token string">${font}</span>`;
+      }
+
+      return font;
+    }).join('<span class="token punctuation">, </span>');
+    const _fontSize = `<span class="token number">${parseInt(_styles.fontSize,10)}</span><span class="token unit">px</span> <span class="token operator">/</span> <span class="token number">${
+      parseInt(_styles.fontSize, 10) / 16
+    }</span><span class="token unit">rem</span>`;
+    const _letterSpacing = _styles.letterSpacing.indexOf('px') !== -1 ? `<span class="token number">${parseInt(_styles.letterSpacing, 10)}</span><span class="token unit">px</span>` : _styles.letterSpacing;
+    const _lineHeight = _styles.lineHeight !== 'normal' ? `<span class="token number">${parseInt(_styles.lineHeight,10)}</span><span class="token unit">px</span> <span class="token operator">/</span> <span class="token number">${
+      parseInt(_styles.lineHeight, 10) / 16
+    }</span><span class="token unit">rem</span>` : 'normal';
+
+    return (
+      `
+<pre class="language-css" tabindex="-1"><code class="language-css"><span class="token selector"><span class="token class">.typography</span></span> <span class="token punctuation">{</span>
+  <span class="token property">font-family</span><span class="token punctuation">:</span> ${_fontFamily}<span class="token punctuation">;</span>
+  <span class="token property">font-size</span><span class="token punctuation">:</span> ${_fontSize}<span class="token punctuation">;</span>
+  <span class="token property">font-weight</span><span class="token punctuation">:</span> <span class="token number">${_styles.fontWeight}</span><span class="token punctuation">;</span>
+  <span class="token property">font-variation-settings</span><span class="token punctuation">:</span> ${_styles.fontVariationSettings}<span class="token punctuation">;</span>
+  <span class="token property">line-height</span><span class="token punctuation">:</span> ${_lineHeight}<span class="token punctuation">;</span>
+  <span class="token property">letter-spacing</span><span class="token punctuation">:</span> ${_letterSpacing}<span class="token punctuation">;</span>
+  <span class="token property">font-style</span><span class="token punctuation">:</span> ${_styles.fontStyle}<span class="token punctuation">;</span>
+<span class="token punctuation">}</span></code></pre>`
+    );
+  }
 
   return (
     `
 ` +
-    'font-styles: {' +
+    'typography: {' +
     '<ul class="speccer-styles">' +
     `  <li><span class="property">font-family:</span> ${_styles.fontFamily};</li>` +
     `  <li><span class="property">font-size:</span> ${_styles.fontSize} / ${
       parseInt(_styles.fontSize, 10) / 16
     }rem;</li>` +
     `  <li><span class="property">font-weight:</span> ${_styles.fontWeight};</li>` +
     `  <li><span class="property">font-variation-settings:</span> ${_styles.fontVariationSettings};</li>` +
-    `  <li><span class="property">line-height:</span> ${_styles.lineHeight} / ${_line_height};</li>` +
+    `  <li><span class="property">line-height:</span> ${_styles.lineHeight !== 'normal'
+      ? `${parseInt(_styles.lineHeight, 10)}px / ${parseInt(_styles.lineHeight, 10) / 16}rem`
+      : 'normal'};</li>` +
     `  <li><span class="property">letter-spacing:</span> ${_styles.letterSpacing};</li>` +
     `  <li><span class="property">font-style:</span> ${_styles.fontStyle};</li>` +
     '</ul>' +

src/styles/index.styl

@@ -11,8 +11,8 @@ $ph-speccer-spacing-color = $ph-speccer-color-contrast;
 $ph-speccer-measure-color = rgb(255,0,0);
 $ph-speccer-pin-color = $ph-speccer-color-contrast;
 $ph-speccer-typography-background-color = rgb(255, 255,255);
-$ph-speccer-typography-color-property = rgb(63, 133, 242);
-$ph-speccer-typography-color-text = rgb(87, 87, 91);
+$ph-speccer-typography-color-property = #0074e8;
+$ph-speccer-typography-color-text = #ff3aa8;
 $ph-speccer-typography-color-value = $ph-speccer-color-contrast;
 $ph-speccer-depth-opacity-400 = 0.4;
 $ph-speccer-font-family = "Menlo for Powerline", "Menlo Regular for Powerline", "DejaVu Sans Mono", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;

src/styles/typography.styl

@@ -83,3 +83,94 @@
       margin 0
       list-style none
       border none
+
+
+.ph-speccer.speccer.typography
+  &.syntax
+    & > pre
+      margin 0
+
+.ph-speccer.speccer.typography.syntax
+  --ph-speccer-color-code-color-1 #737373
+  --ph-speccer-color-code-color-2 #ff3aa8
+  --ph-speccer-color-code-color-3 #38383d
+  --ph-speccer-color-code-color-4 #ff3aa8
+  --ph-speccer-color-code-color-5 #ff3aa8
+  --ph-speccer-color-code-color-6 #0074e8
+  --ph-speccer-color-code-color-7 #000000
+  --ph-speccer-color-code-color-8 #CD0404
+
+.ph-speccer.speccer.typography.syntax
+  & .namespace
+    opacity: 0.7;
+
+.ph-speccer.speccer.typography.syntax
+  & .token.comment,
+  & .token.prolog,
+  & .token.doctype,
+  & .token.cdata
+    color: var(--ph-speccer-color-code-color-1);
+
+.ph-speccer.speccer.typography.syntax
+  & .token.null,
+  & .token.operator,
+  & .token.boolean,
+  & .token.number
+    color: var(--ph-speccer-color-code-color-5);
+
+.ph-speccer.speccer.typography.syntax
+  & .token.attr-name
+    color: var(--ph-speccer-color-code-color-2);
+
+.ph-speccer.speccer.typography.syntax
+  & .token.entity,
+  & .token.url,
+  & .token.string
+    color: var(--ph-speccer-color-code-color-3);
+
+.ph-speccer.speccer.typography.syntax
+  & .token.selector
+    color: var(--ph-speccer-color-code-color-3);
+
+.ph-speccer.speccer.typography.syntax
+  & .token.atrule,
+  & .token.attr-value,
+  & .token.keyword,
+  & .token.control,
+  & .token.directive,
+  & .token.important,
+  & .token.unit
+    color: var(--ph-speccer-color-code-color-4);
+
+.ph-speccer.speccer.typography.syntax
+  & .token.regex,
+  & .token.statement
+    color: var(--ph-speccer-color-code-color-3);
+
+.ph-speccer.speccer.typography.syntax
+  & .token.placeholder,
+  & .token.variable
+    color: var(--ph-speccer-color-code-color-6);
+
+.ph-speccer.speccer.typography.syntax
+  & .token.property,
+  & .token.tag
+    color: var(--ph-speccer-color-code-color-6)
+
+.ph-speccer.speccer.typography.syntax
+  & .token.important,
+  & .token.statement
+    font-weight: bold;
+
+.ph-speccer.speccer.typography.syntax
+  & .token.punctuation
+    color: var(--ph-speccer-color-code-color-7);
+
+.ph-speccer.speccer.typography.syntax
+  & .token.entity
+    cursor: help;
+
+.ph-speccer.speccer.typography.syntax
+  & .token.debug
+    color: var(--ph-speccer-color-code-color-8);
+