Some text
``` 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 ++ Some text +
+``` + +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; +} +``` + + + ### Grid spacing  diff --git a/api/modules/features_typography.md b/api/modules/features_typography.md index faa321a3..6d2317b9 100644 --- a/api/modules/features_typography.md +++ b/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) diff --git a/api/modules/features_typography_utils_template.md b/api/modules/features_typography_utils_template.md index 4ecc3986..a624f1e9 100644 --- a/api/modules/features_typography_utils_template.md +++ b/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) diff --git a/public/typography-syntax.png b/public/typography-syntax.png new file mode 100644 index 00000000..dc105f86 Binary files /dev/null and b/public/typography-syntax.png differ diff --git a/src/features/typography/index.ts b/src/features/typography/index.ts index f150ed92..02edfa6a 100644 --- a/src/features/typography/index.ts +++ b/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.typography {
+ font-family: ${_fontFamily};
+ font-size: ${_fontSize};
+ font-weight: ${_styles.fontWeight};
+ font-variation-settings: ${_styles.fontVariationSettings};
+ line-height: ${_lineHeight};
+ letter-spacing: ${_letterSpacing};
+ font-style: ${_styles.fontStyle};
+}