apps/demo/src/index.scss

@import "@openfun/cunningham-react/sass/fonts";
@import "@openfun/cunningham-react/sass/icons";
@import "@openfun/cunningham-react/style";
@import "cunningham-tokens";

:root {
  font-family: Roboto, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  background-color: #242424;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}


.center {
  display: flex;
  flex-direction: column;
  align-items: center;

  h1, h3 {
    color: white;
    margin-bottom: 40px;
  }
}
✨(fonts) allow async font loading Vite automatically inline assets in CSS in lib mode and this is hardcoded in it. After multiple approaches it seems that this one is the most trivial and easy-to-maintain one. 2023-03-17 17:11:03 +01:00			`@import "@openfun/cunningham-react/sass/fonts";`
			`@import "@openfun/cunningham-react/sass/icons";`
✨(demo) add app demo This demo is useful to test in the real usage of the design system as a real user that will generate its own customized design tokens, implements the design system's components, etc ... 2022-12-01 12:05:50 +01:00			`@import "@openfun/cunningham-react/style";`
♻️(react) split fonts in a seperate CSS file Fonts were de-facto included in the bundled dist/style.css file which wasn't convenient in situations were consumers wanted to import fonts by themselves. 2023-02-16 15:25:05 +01:00			`@import "cunningham-tokens";`
✨(demo) add app demo This demo is useful to test in the real usage of the design system as a real user that will generate its own customized design tokens, implements the design system's components, etc ... 2022-12-01 12:05:50 +01:00
			`:root {`
			`font-family: Roboto, sans-serif;`
			`font-size: 16px;`
			`line-height: 24px;`
			`font-weight: 400;`
			`background-color: #242424;`
			`height: 100vh;`
			`display: flex;`
			`align-items: center;`
			`justify-content: center;`
			`}`


			`.center {`
			`display: flex;`
			`flex-direction: column;`
			`align-items: center;`

✨(tokens) add TS generator and re-organize the repo Add TS Generator which is a lot based on JS Generator. 2023-01-02 12:06:00 +01:00			`h1, h3 {`
✨(demo) add app demo This demo is useful to test in the real usage of the design system as a real user that will generate its own customized design tokens, implements the design system's components, etc ... 2022-12-01 12:05:50 +01:00			`color: white;`
			`margin-bottom: 40px;`
			`}`
			`}`