diff --git a/packages/system/package.json b/packages/system/package.json index 759f9d2..94442cd 100644 --- a/packages/system/package.json +++ b/packages/system/package.json @@ -8,9 +8,13 @@ }, "dependencies": { "@types/react": "^18.0.17", - "@vanilla-extract/css": "^1.12.0", - "@vanilla-extract/sprinkles": "^1.6.1", "clsx": "^2.0.0", "react": "^18.2.0" + }, + "devDependencies": { + "@capsizecss/core": "^3.1.1", + "@capsizecss/metrics": "^1.2.0", + "@capsizecss/vanilla-extract": "^1.0.0", + "@vanilla-extract/css": "^1.12.0" } } diff --git a/packages/system/src/components/Heading.tsx b/packages/system/src/components/Heading.tsx index 1f1bc0b..4ff9dc2 100644 --- a/packages/system/src/components/Heading.tsx +++ b/packages/system/src/components/Heading.tsx @@ -1,10 +1,11 @@ -import type { ReactNode } from 'react'; +import type { ElementType, ReactNode } from 'react'; import { Box } from './Box'; +import * as typographyStyles from './typography.css'; -type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6; +type HeadingLevel = 1 | 2 | 3 | 4; interface HeadingProps { - component?: `h${HeadingLevel}`; + component?: ElementType; level: HeadingLevel; children: ReactNode; id?: string; @@ -15,8 +16,6 @@ const componentFromLevel: { [Level in HeadingLevel]: `h${Level}` } = { 2: 'h2', 3: 'h3', 4: 'h4', - 5: 'h5', - 6: 'h6', }; export const Heading = ({ @@ -28,7 +27,11 @@ export const Heading = ({ const component = rawComponent || componentFromLevel[level]; return ( - + {children} ); diff --git a/packages/system/src/components/Text.tsx b/packages/system/src/components/Text.tsx new file mode 100644 index 0000000..c032ee4 --- /dev/null +++ b/packages/system/src/components/Text.tsx @@ -0,0 +1,28 @@ +import type { ElementType, ReactNode } from 'react'; +import { Box } from './Box'; +import * as typographyStyles from './typography.css'; + +type TextSize = keyof typeof typographyStyles.text; + +interface TextProps { + component?: ElementType; + children: ReactNode; + size?: TextSize; +} + +export const Text = ({ + component: rawComponent, + children, + size = 'standard', +}: TextProps) => { + const component = rawComponent || 'span'; + + return ( + + {children} + + ); +}; diff --git a/packages/system/src/components/typography.css.ts b/packages/system/src/components/typography.css.ts new file mode 100644 index 0000000..83e3d35 --- /dev/null +++ b/packages/system/src/components/typography.css.ts @@ -0,0 +1,77 @@ +import { createFontStack } from '@capsizecss/core'; +import { createTextStyle } from '@capsizecss/vanilla-extract'; +import openSansMetrics from '@capsizecss/metrics/openSans'; +import arialMetrics from '@capsizecss/metrics/arial'; +import { globalFontFace, style, styleVariants } from '@vanilla-extract/css'; + +const headingLevels = { + 1: { + fontSize: 44, + lineGap: 18, + }, + 2: { + fontSize: 38, + lineGap: 16, + }, + 3: { + fontSize: 32, + lineGap: 14, + }, + 4: { + fontSize: 24, + lineGap: 12, + }, +}; + +export const heading = styleVariants( + headingLevels, + ({ fontSize, lineGap }, level) => [ + createTextStyle( + { + fontSize, + lineGap, + fontMetrics: openSansMetrics, + }, + `heading_${level}`, + ), + ], +); + +const textSizes = { + large: { + fontSize: 20, + lineGap: 14, + }, + standard: { + fontSize: 18, + lineGap: 12, + }, + small: { + fontSize: 16, + lineGap: 12, + }, +}; + +export const text = styleVariants(textSizes, ({ fontSize, lineGap }, size) => [ + createTextStyle( + { + fontSize, + lineGap, + fontMetrics: openSansMetrics, + }, + `text_${size}`, + ), +]); + +const { fontFamily, fontFaces } = createFontStack( + [openSansMetrics, arialMetrics], + { + fontFaceFormat: 'styleObject', + }, +); + +export const font = style({ fontFamily: `${fontFamily}, sans-serif` }); + +fontFaces.forEach((face) => + globalFontFace(face['@font-face'].fontFamily, face['@font-face']), +); diff --git a/packages/system/src/index.ts b/packages/system/src/index.ts index 2e44248..9852256 100644 --- a/packages/system/src/index.ts +++ b/packages/system/src/index.ts @@ -1,2 +1,3 @@ export { Box } from './components/Box'; export { Heading } from './components/Heading'; +export { Text } from './components/Text'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ae1f0fe..0930022 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -29,18 +29,25 @@ importers: '@types/react': specifier: ^18.0.17 version: 18.0.21 - '@vanilla-extract/css': - specifier: ^1.12.0 - version: 1.12.0 - '@vanilla-extract/sprinkles': - specifier: ^1.6.1 - version: 1.6.1(@vanilla-extract/css@1.12.0) clsx: specifier: ^2.0.0 version: 2.0.0 react: specifier: ^18.2.0 version: 18.2.0 + devDependencies: + '@capsizecss/core': + specifier: ^3.1.1 + version: 3.1.1 + '@capsizecss/metrics': + specifier: ^1.2.0 + version: 1.2.0 + '@capsizecss/vanilla-extract': + specifier: ^1.0.0 + version: 1.0.0(@vanilla-extract/css@1.12.0) + '@vanilla-extract/css': + specifier: ^1.12.0 + version: 1.12.0 site: dependencies: @@ -69,6 +76,9 @@ importers: '@types/node': specifier: ^20.4.5 version: 20.4.5 + '@types/react': + specifier: ^18.0.17 + version: 18.0.21 '@vanilla-extract/css': specifier: ^1.12.0 version: 1.12.0 @@ -456,6 +466,7 @@ packages: engines: {node: '>=6.9.0'} dependencies: regenerator-runtime: 0.13.10 + dev: true /@babel/template@7.22.5: resolution: {integrity: sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==} @@ -490,6 +501,25 @@ packages: '@babel/helper-validator-identifier': 7.22.5 to-fast-properties: 2.0.0 + /@capsizecss/core@3.1.1: + resolution: {integrity: sha512-1YxfErFXdxcyDyc8peDwH2hiJF5U8sBY5i5HX0f/tpvabbu40w9r8VHYMOOw9Fox5O/+kf2gAhyfVe+sLnaaBA==} + dependencies: + csstype: 3.1.1 + dev: true + + /@capsizecss/metrics@1.2.0: + resolution: {integrity: sha512-zUYcqaR0rv4TYXyY97G1vRMMOyz+3EteXqLsM1XO/N8LnThwR1wYSE5cU15CUx3KPAiAEIbUZ13B7+plxYjHUA==} + dev: true + + /@capsizecss/vanilla-extract@1.0.0(@vanilla-extract/css@1.12.0): + resolution: {integrity: sha512-/cY34CgCAmuf6SmpgPXmDJaIdJOaRe37MsoeZIeZme4k0F0HFts+poTxq4m8UtBH7LRxpUkfUHDoRO9OYjjVBg==} + peerDependencies: + '@vanilla-extract/css': ^1.2.1 + dependencies: + '@capsizecss/core': 3.1.1 + '@vanilla-extract/css': 1.12.0 + dev: true + /@emmetio/abbreviation@2.3.3: resolution: {integrity: sha512-mgv58UrU3rh4YgbE/TzgLQwJ3pFsHHhCLqY20aJq+9comytTXUDNGG/SMtSeMJdkpxgXSXunBGLD8Boka3JyVA==} dependencies: @@ -508,6 +538,7 @@ packages: /@emotion/hash@0.9.1: resolution: {integrity: sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==} + dev: true /@esbuild-kit/cjs-loader@2.4.2: resolution: {integrity: sha512-BDXFbYOJzT/NBEtp71cvsrGPwGAMGRB/349rwKuoxNSiKjPraNNnlK6MIIabViCjqZugu6j+xeMDlEkWdHHJSg==} @@ -1340,7 +1371,6 @@ packages: /@types/prop-types@15.7.5: resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==} - dev: false /@types/react-dom@18.2.7: resolution: {integrity: sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==} @@ -1354,7 +1384,6 @@ packages: '@types/prop-types': 15.7.5 '@types/scheduler': 0.16.2 csstype: 3.1.1 - dev: false /@types/resolve@1.20.2: resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==} @@ -1362,7 +1391,6 @@ packages: /@types/scheduler@0.16.2: resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==} - dev: false /@types/semver@7.5.0: resolution: {integrity: sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==} @@ -1589,6 +1617,7 @@ packages: deepmerge: 4.2.2 media-query-parser: 2.0.2 outdent: 0.8.0 + dev: true /@vanilla-extract/integration@6.2.1(@types/node@20.4.5): resolution: {integrity: sha512-+xYJz07G7TFAMZGrOqArOsURG+xcYvqctujEkANjw2McCBvGEK505RxQqOuNiA9Mi9hgGdNp2JedSa94f3eoLg==} @@ -1619,14 +1648,7 @@ packages: /@vanilla-extract/private@1.0.3: resolution: {integrity: sha512-17kVyLq3ePTKOkveHxXuIJZtGYs+cSoev7BlP+Lf4916qfDhk/HBjvlYDe8egrea7LNPHKwSZJK/bzZC+Q6AwQ==} - - /@vanilla-extract/sprinkles@1.6.1(@vanilla-extract/css@1.12.0): - resolution: {integrity: sha512-N/RGKwGAAidBupZ436RpuweRQHEFGU+mvAqBo8PRMAjJEmHoPDttV8RObaMLrJHWLqvX+XUMinHUnD0hFRQISw==} - peerDependencies: - '@vanilla-extract/css': ^1.0.0 - dependencies: - '@vanilla-extract/css': 1.12.0 - dev: false + dev: true /@vanilla-extract/vite-plugin@3.8.2(@types/node@20.4.5)(vite@4.4.6): resolution: {integrity: sha512-i0vpuBUoh10Obl0hJr0dWQa6M3Udu/irm4tnsg1lUze8DXTbv3ctHmVu/wrRZHKw1EzzW/v+nLoJJRvisApspQ==} @@ -1685,6 +1707,7 @@ packages: /ahocorasick@1.0.2: resolution: {integrity: sha512-hCOfMzbFx5IDutmWLAt6MZwOUjIfSM9G9FyVxytmE4Rs/5YDPWQrD/+IR1w+FweD9H2oOZEnv36TmkjhNURBVA==} + dev: true /ajv@6.12.6: resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==} @@ -2155,11 +2178,13 @@ packages: /css-what@6.1.0: resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==} engines: {node: '>= 6'} + dev: true /cssesc@3.0.0: resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} engines: {node: '>=4'} hasBin: true + dev: true /csstype@3.1.1: resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==} @@ -2198,6 +2223,7 @@ packages: /deep-object-diff@1.1.9: resolution: {integrity: sha512-Rn+RuwkmkDwCi2/oXOFS9Gsr5lJZu/yTGpK7wAaAIE75CC+LCGEZHpY6VQJa/RoJcrmaA/docWJZvYohlNkWPA==} + dev: true /deepmerge-ts@4.3.0: resolution: {integrity: sha512-if3ZYdkD2dClhnXR5reKtG98cwyaRT1NeugQoAPTTfsOpV9kqyeiBF9Qa5RHjemb3KzD5ulqygv6ED3t5j9eJw==} @@ -2207,6 +2233,7 @@ packages: /deepmerge@4.2.2: resolution: {integrity: sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==} engines: {node: '>=0.10.0'} + dev: true /default-browser-id@3.0.0: resolution: {integrity: sha512-OZ1y3y0SqSICtE8DE4S8YOE9UZOJ8wO16fKWVP5J1Qz42kV9jcnMVFrEE/noXb/ss3Q4pZIH79kxofzyNNtUNA==} @@ -3852,6 +3879,7 @@ packages: resolution: {integrity: sha512-1N4qp+jE0pL5Xv4uEcwVUhIkwdUO3S/9gML90nqKA7v7FcOS5vUtatfzok9S9U1EJU8dHWlcv95WLnKmmxZI9w==} dependencies: '@babel/runtime': 7.19.4 + dev: true /merge-stream@2.0.0: resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==} @@ -4316,6 +4344,7 @@ packages: /outdent@0.8.0: resolution: {integrity: sha512-KiOAIsdpUTcAXuykya5fnVVT+/5uS0Q1mrkRHcF89tpieSmY33O/tmc54CqwA+bfhbtEfZUNLHaPUiB9X3jt1A==} + dev: true /p-limit@2.3.0: resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==} @@ -4590,6 +4619,7 @@ packages: /regenerator-runtime@0.13.10: resolution: {integrity: sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw==} + dev: true /regexp.prototype.flags@1.4.3: resolution: {integrity: sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==} diff --git a/site/markdoc.config.mjs b/site/markdoc.config.mjs index b79ac7c..ff8f195 100644 --- a/site/markdoc.config.mjs +++ b/site/markdoc.config.mjs @@ -8,7 +8,7 @@ export default defineMarkdocConfig({ }, paragraph: { ...nodes.paragraph, - render: component('./src/components/Paragraph.astro'), + render: component('./src/components/Text.astro'), }, blockquote: { ...nodes.paragraph, diff --git a/site/package.json b/site/package.json index 6417b40..9207c3b 100644 --- a/site/package.json +++ b/site/package.json @@ -26,6 +26,7 @@ "devDependencies": { "@types/gh-pages": "^3.2.1", "@types/node": "^20.4.5", + "@types/react": "^18.0.17", "@vanilla-extract/css": "^1.12.0", "@vanilla-extract/vite-plugin": "^3.8.2", "gh-pages": "^5.0.0", diff --git a/site/src/components/Block.astro b/site/src/components/Block.astro new file mode 100644 index 0000000..07b6aa8 --- /dev/null +++ b/site/src/components/Block.astro @@ -0,0 +1,13 @@ +--- +import { Box } from '@askoufis/system'; +import { block } from './Block.css'; +import type { ElementType } from 'react'; + +interface Props { + component?: ElementType; +} + +const { component = 'div' } = Astro.props; +--- + + diff --git a/site/src/components/Block.css.ts b/site/src/components/Block.css.ts new file mode 100644 index 0000000..efdf56b --- /dev/null +++ b/site/src/components/Block.css.ts @@ -0,0 +1,3 @@ +import { style } from '@vanilla-extract/css'; + +export const block = style({ margin: '0 auto', paddingBottom: 20 }); diff --git a/site/src/components/Heading.astro b/site/src/components/Heading.astro index 5eb772f..e687af4 100644 --- a/site/src/components/Heading.astro +++ b/site/src/components/Heading.astro @@ -1,12 +1,16 @@ --- +import type { ComponentProps } from 'react'; import { Heading as SystemHeading } from '@askoufis/system'; +import Block from './Block.astro'; interface Props { - level: 1 | 2 | 3 | 4 | 5 | 6; + level: ComponentProps['level']; id: string; } const { level, id } = Astro.props; --- - + + + diff --git a/site/src/components/Paragraph.astro b/site/src/components/Paragraph.astro deleted file mode 100644 index baa5683..0000000 --- a/site/src/components/Paragraph.astro +++ /dev/null @@ -1,5 +0,0 @@ ---- -import { Box } from '@askoufis/system'; ---- - - diff --git a/site/src/components/Text.astro b/site/src/components/Text.astro new file mode 100644 index 0000000..d09223f --- /dev/null +++ b/site/src/components/Text.astro @@ -0,0 +1,8 @@ +--- +import { Text as SystemText } from '@askoufis/system'; +import Block from './Block.astro'; +--- + + + + diff --git a/site/src/content/blog/heading-test.mdoc b/site/src/content/blog/typography-test.mdoc similarity index 51% rename from site/src/content/blog/heading-test.mdoc rename to site/src/content/blog/typography-test.mdoc index dd97ec1..a015c88 100644 --- a/site/src/content/blog/heading-test.mdoc +++ b/site/src/content/blog/typography-test.mdoc @@ -1,27 +1,27 @@ --- -title: Heading Test +title: I'm a Heading 1 --- Regular text -## Heading 2 +## I'm a Heading 2 Regular text -### Heading 3 +### I'm a Heading 3 Regular text -#### Heading 4 +#### I'm a Heading 4 Regular text -##### Heading 5 - Regular text -###### Heading 6 - Regular text > I'm a blockquote + +**Bold text** + +_Italic text_ diff --git a/site/src/layouts/Base.astro b/site/src/layouts/Base.astro index 168c44d..d79ce7e 100644 --- a/site/src/layouts/Base.astro +++ b/site/src/layouts/Base.astro @@ -12,6 +12,12 @@ const { title } = Astro.props; {title} + + + diff --git a/site/src/layouts/BlogPost.astro b/site/src/layouts/BlogPost.astro index c80ed66..293c43e 100644 --- a/site/src/layouts/BlogPost.astro +++ b/site/src/layouts/BlogPost.astro @@ -1,6 +1,6 @@ --- -import { Heading } from '@askoufis/system'; import Base from './Base.astro'; +import Heading from '../components/Heading.astro'; interface Props { title: string;