diff --git a/apps/design-system/.gitignore b/apps/design-system/.gitignore new file mode 100644 index 0000000..2068747 --- /dev/null +++ b/apps/design-system/.gitignore @@ -0,0 +1 @@ +storybook-static diff --git a/apps/design-system/.storybook/preview.ts b/apps/design-system/.storybook/preview.ts index e5edef0..3d62859 100644 --- a/apps/design-system/.storybook/preview.ts +++ b/apps/design-system/.storybook/preview.ts @@ -1,6 +1,6 @@ import type { Preview } from "@storybook/react"; -import "@repo/design-system/styles.css"; +import "@repo/design-system/styles"; const preview: Preview = { parameters: { diff --git a/apps/design-system/package.json b/apps/design-system/package.json index 1a222f2..c85f38b 100644 --- a/apps/design-system/package.json +++ b/apps/design-system/package.json @@ -3,8 +3,8 @@ "version": "1.0.0", "private": true, "scripts": { - "build": "storybook build -o dist", - "dev": "storybook dev -p 6006", + "build": "storybook build", + "dev": "storybook dev -p 6006 --no-open", "lint": "eslint . --max-warnings 0" }, "dependencies": { diff --git a/apps/design-system/stories/typography.mdx b/apps/design-system/stories/typography.mdx new file mode 100644 index 0000000..0d3392d --- /dev/null +++ b/apps/design-system/stories/typography.mdx @@ -0,0 +1,48 @@ +import { Meta, Unstyled } from "@storybook/blocks"; + + + +# Typography + +## Fonts + +### Radio Canada + +The default typeface used by Kalkulacka.1 is [Radio-Canada](https://github.com/cbcrc/radiocanadafonts), +a well-internationalized set of variable (weight 300–700 & width 75–100) normal & italic fonts made for +CBC/Radio-Canada (Canada's national public broadcaster). + + +
+
+

Radio Canada Light 300

+

Radio Canada Light 300 Semi-condensed 87.5%

+

Radio Canada Light 300 Condensed 75%

+

Radio Canada Light 300 Italic

+
+
+

Radio Canada Normal 400

+

Radio Canada Normal 400 Semi-condensed 87.5%

+

Radio Canada Normal 400 Condensed 75%

+

Radio Canada Normal 400 Italic

+
+
+

Radio Canada Medium 500

+

Radio Canada Medium 500 Semi-condensed 87.5%

+

Radio Canada Medium 500 Condensed 75%

+

Radio Canada Medium 500 Italic

+
+
+

Radio Canada Semibold 600

+

Radio Canada Semibold 600 Semi-condensed 87.5%

+

Radio Canada Semibold 600 Condensed 75%

+

Radio Canada Semibold 600 Italic

+
+
+

Radio Canada Bold 700

+

Radio Canada Bold 700 Semi-condensed 87.5%

+

Radio Canada Bold 700 Condensed 75%

+

Radio Canada Bold 700 Italic

+
+
+ diff --git a/packages/design-system/package.json b/packages/design-system/package.json index e055d90..c6b7155 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -3,17 +3,21 @@ "version": "0.0.0", "private": true, "exports": { - "./styles.css": "./dist/index.css", + "./styles": "./dist/index.css", + "./fonts": "./dist/fonts", "./button": "./src/button.tsx", "./card": "./src/card.tsx", "./code": "./src/code.tsx", "./dropdown": "./src/dropdown.tsx" }, "scripts": { - "build": "tailwindcss -i ./src/styles.css -o ./dist/index.css", - "dev": "tailwindcss -i ./src/styles.css -o ./dist/index.css --watch", + "build": "npm run fonts && npm run tailwind", + "fonts": "mkdir -p ./dist && cp -r ./src/fonts ./dist/fonts", + "dev": "npm run fonts && npm run tailwind:watch", "generate:component": "turbo gen react-component", - "lint": "eslint . --max-warnings 0" + "lint": "eslint . --max-warnings 0", + "tailwind": "tailwindcss -i ./src/styles.css -o ./dist/index.css", + "tailwind:watch": "npm run tailwind -- --watch" }, "packageManager": "npm@10.8.2", "devDependencies": { diff --git a/packages/design-system/src/fonts/radio-canada/LICENSE b/packages/design-system/src/fonts/radio-canada/LICENSE new file mode 100644 index 0000000..211e0bd --- /dev/null +++ b/packages/design-system/src/fonts/radio-canada/LICENSE @@ -0,0 +1,93 @@ +Copyright 2019 The Radio-Canada Project Authors (https://github.com/cbcrc/radiocanadafonts) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +https://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/packages/design-system/src/fonts/radio-canada/italic.woff b/packages/design-system/src/fonts/radio-canada/italic.woff new file mode 100644 index 0000000..fd7d23b Binary files /dev/null and b/packages/design-system/src/fonts/radio-canada/italic.woff differ diff --git a/packages/design-system/src/fonts/radio-canada/italic.woff2 b/packages/design-system/src/fonts/radio-canada/italic.woff2 new file mode 100644 index 0000000..f3c505d Binary files /dev/null and b/packages/design-system/src/fonts/radio-canada/italic.woff2 differ diff --git a/packages/design-system/src/fonts/radio-canada/normal.woff b/packages/design-system/src/fonts/radio-canada/normal.woff new file mode 100644 index 0000000..3894102 Binary files /dev/null and b/packages/design-system/src/fonts/radio-canada/normal.woff differ diff --git a/packages/design-system/src/fonts/radio-canada/normal.woff2 b/packages/design-system/src/fonts/radio-canada/normal.woff2 new file mode 100644 index 0000000..2c7212d Binary files /dev/null and b/packages/design-system/src/fonts/radio-canada/normal.woff2 differ diff --git a/packages/design-system/src/styles.css b/packages/design-system/src/styles.css index b5c61c9..3128f9f 100644 --- a/packages/design-system/src/styles.css +++ b/packages/design-system/src/styles.css @@ -1,3 +1,33 @@ @tailwind base; @tailwind components; @tailwind utilities; + +@layer base { + @font-face { + font-family: "Radio Canada"; + font-weight: 300 700; + src: + url("./fonts/radio-canada/normal.woff2") format("woff2"), + url("./fonts/radio-canada/normal.woff") format("woff"); + } + + @font-face { + font-family: "Radio Canada"; + font-weight: 300 700; + font-style: italic; + src: + url("./fonts/radio-canada/italic.woff2") format("woff2"), + url("./fonts/radio-canada/italic.woff") format("woff"); + } +} + +@layer utilities { + /* TODO: Remove after upgrading to Tailwind CSS v4. + See https://github.com/tailwindlabs/tailwindcss/pull/13153. */ + .ds-font-stretch-semi-condensed { + font-stretch: semi-condensed; + } + .ds-font-stretch-condensed { + font-stretch: condensed; + } +} diff --git a/packages/design-system/tailwind.config.ts b/packages/design-system/tailwind.config.ts index 3a94a12..b81c0f9 100644 --- a/packages/design-system/tailwind.config.ts +++ b/packages/design-system/tailwind.config.ts @@ -1,5 +1,6 @@ import globalConfig from "@repo/tailwind-config"; import type { Config } from "tailwindcss"; +import defaultTheme from "tailwindcss/defaultTheme"; const colors = { theme: { @@ -13,10 +14,20 @@ const colors = { }, }; +const fonts = { + theme: { + extend: { + fontFamily: { + sans: ['"Radio Canada"', ...defaultTheme.fontFamily.sans], + }, + }, + }, +}; + const config: Pick = { content: ["./src/**/*.tsx"], prefix: "ds-", - presets: [globalConfig, colors], + presets: [globalConfig, colors, fonts], }; export default config;