From a54c70cff529da7ea2093b56bd2dbccf2d18ecbc Mon Sep 17 00:00:00 2001 From: Prasanta Kumar Dutta Date: Fri, 17 Mar 2023 00:23:04 +0530 Subject: [PATCH] describe style classes and mixins --- .storybook/preview.js | 2 +- src/components/Theme/themes/dark.js | 2 +- src/docs/theme/css-variables.stories.mdx | 18 ++++ src/docs/typography/custom-fonts.stories.mdx | 2 + src/docs/typography/docs/style.md | 87 ++++++++++++++++++- .../typography/using-faces.stories.svelte | 2 +- .../typography/using-sizes.stories.svelte | 2 +- .../typography/using-styles.stories.svelte | 2 +- src/scss/typography/_classes.scss | 36 ++++---- 9 files changed, 126 insertions(+), 27 deletions(-) diff --git a/.storybook/preview.js b/.storybook/preview.js index 5fdf905a..d62f6ee1 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -51,7 +51,7 @@ export const parameters = { 'SCSS', ['Intro', '*'], 'Typography', - ['Intro', 'How to use', ['Text styles', '*'], '*'], + ['Intro', 'Using the system', ['Text styles', '*'], '*'], 'Actions', ['Intro', '*'], 'Contributing', diff --git a/src/components/Theme/themes/dark.js b/src/components/Theme/themes/dark.js index 8c304dd5..7d591a05 100644 --- a/src/components/Theme/themes/dark.js +++ b/src/components/Theme/themes/dark.js @@ -35,7 +35,7 @@ export default { background: '#2e3440', 'text-primary': '#ffffff', 'text-secondary': 'rgb(255 255 255 / 60%)', - accent: ' #ef3c2a', + accent: '#ef3c2a', 'brand-logo': '#ffffff', 'brand-rules': 'rgb(255 255 255 / 25%)', 'brand-shadow': 'rgb(255 255 255 / 10%)', diff --git a/src/docs/theme/css-variables.stories.mdx b/src/docs/theme/css-variables.stories.mdx index 0b9013d0..13b717d1 100644 --- a/src/docs/theme/css-variables.stories.mdx +++ b/src/docs/theme/css-variables.stories.mdx @@ -79,6 +79,24 @@ Read more about how to override or define your own CSS variables in the [Themes] | `--theme-scale-size-5` | Size level 5 | calc(var(--theme-scale-size-base) \* 0.72rem) | | `--theme-scale-size-6` | Size level 6 | calc(var(--theme-scale-size-base) \* 0.66rem) | +## Customising variables + +You can redefine any of the CSS variables by declaring it in your `` component with the new values. Read more on how to [customise theme](/docs/theming-theme--custom-theme). + +```svelte + + + +``` + ## Adding custom variables For some projects, you may need more style attributes that you can define globally while allowing it to be customisable. You may be doing so using SCSS variable in your `main.scss` but that prevent those styles from being customised/overridden from the client side. Hence, it is a good practice to define such thematic styles in the `Theme` component using CSS variables. diff --git a/src/docs/typography/custom-fonts.stories.mdx b/src/docs/typography/custom-fonts.stories.mdx index b12c5371..ea3cba1d 100644 --- a/src/docs/typography/custom-fonts.stories.mdx +++ b/src/docs/typography/custom-fonts.stories.mdx @@ -31,6 +31,8 @@ In this sample from [Google Fonts](https://fonts.google.com/), once we have sele In your project, navigate to `Pages` > `layout.svelte` and add the code in `svelte:head` fragment as follows: +If you don't have the layout file, add it. + ```svelte diff --git a/src/docs/typography/docs/style.md b/src/docs/typography/docs/style.md index 68626bb5..a9f8d7ef 100644 --- a/src/docs/typography/docs/style.md +++ b/src/docs/typography/docs/style.md @@ -27,27 +27,106 @@ These are the available **text styles** and their **corresponding tokens**. The Add the `font-` class to any element for the classes to take effect. ```svelte -
your text here
+ +
+ Two hardy boxing kangaroos jet from Sydney to Zanzibar on quicksilver pinions. +
+ + +

+ Back in my quaint garden jaunty zinnias vie with flaunting phlox. +

+``` + +It is a good practice to not use `` tags unless it is a heading level due to _a11y_ concerns. You should use the CSS styles instead for your elements to style it like a heading. + +```svelte + +

+ The vegetarian menu included gazpacho, piquant julienne beets, rusk rounds + with yogurt, and excellent flan. +

+``` + +You can also use the clases for styling text elemnets in SVG charts. + +```svelte + +Gazpacho +Baguette +Lamb Biryani ``` ## Styling with with SCSS mixins -> This is useful when you need to compose styles for elements using your own classes. +[Mixins](https://sass-lang.com/documentation/at-rules/mixin) allow you to define styles that can be re-used throughout your stylesheet. This is useful when you need to compose styles for elements using your own classes, while using some predefined styles. Include the mixins in your SCSS code block as shown below. ```svelte -
...your text here
+
+ The July sun caused a fragment of black pine wax to ooze on the velvet quilt. +
``` +The mixins also allow you to add the styles as `!important` to overrule any other styles. You can specify it using `($i: true)` arg while including the mixin. + +```scss +.my-class { + @include font-note-3($i: true); + // more style declarations... +} +``` + +The above code will effectively compile to the following CSS: + +```scss +.my-class { + font-size: var(--theme-font-size-note-3) !important; + font-family: var(--theme-font-family-note) !important; + font-weight: 400 !important; + line-height: 1.4 !important; + color: var(--theme-colour-text-secondary) !important; + // more style declarations... +} +``` + +## Customising text styles + +Since the styles are inherited from the `--theme-font-*` and `--theme-colour-*`CSS variables, any modifcation must happen in the `` component in `page.svelte`. Read how to [customise CSS variables](../?path=/docs/theming-theme--custom-theme). + +### Example: Changing the font family for the page title + +Page title uses `--theme-font-family-hed` to define the font family, which inherits `--theme-typeface-display` (refer the [CSS variables](../?path=/docs/theming-css-variables--page)). Hence, in this case, you should redefine the `--theme-typeface-display` and the changes should reflect on your page. + +If you want to redefine `--theme-font-family-hed` independently, you should add a new CSS typeface variable (e.g. `--theme-typeface-hed`) and assign it to the text style variable. + +```svelte + + + +``` + ## See the styles in action Select a style from the menu in the `control` column and see it added to the text. diff --git a/src/docs/typography/using-faces.stories.svelte b/src/docs/typography/using-faces.stories.svelte index 87e64eae..bf82cd75 100644 --- a/src/docs/typography/using-faces.stories.svelte +++ b/src/docs/typography/using-faces.stories.svelte @@ -12,7 +12,7 @@ import face from './docs/face.md?raw'; const meta = { - title: 'Typography/How to use', + title: 'Typography/Using the system', component: FaceDemo, ...withComponentDocs(face), argTypes: { diff --git a/src/docs/typography/using-sizes.stories.svelte b/src/docs/typography/using-sizes.stories.svelte index 61742f44..6a79beb8 100644 --- a/src/docs/typography/using-sizes.stories.svelte +++ b/src/docs/typography/using-sizes.stories.svelte @@ -12,7 +12,7 @@ import size from './docs/size.md?raw'; const meta = { - title: 'Typography/How to use', + title: 'Typography/Using the system', component: SizeDemo, ...withComponentDocs(size), argTypes: { diff --git a/src/docs/typography/using-styles.stories.svelte b/src/docs/typography/using-styles.stories.svelte index 8e0184f4..3b8b492a 100644 --- a/src/docs/typography/using-styles.stories.svelte +++ b/src/docs/typography/using-styles.stories.svelte @@ -12,7 +12,7 @@ import style from './docs/style.md?raw'; const meta = { - title: 'Typography/How to use', + title: 'Typography/Using the system', component: StyleDemo, ...withComponentDocs(style), argTypes: { diff --git a/src/scss/typography/_classes.scss b/src/scss/typography/_classes.scss index 6a73acb8..b3c9baf5 100644 --- a/src/scss/typography/_classes.scss +++ b/src/scss/typography/_classes.scss @@ -1,74 +1,74 @@ /* FONT SIZE CLASSES */ .font-size-1 { - @include font-size-1($i: true); + @include font-size-1($i: false); } .font-size-2 { - @include font-size-2($i: true); + @include font-size-2($i: false); } .font-size-3 { - @include font-size-3($i: true); + @include font-size-3($i: false); } .font-size-4 { - @include font-size-4($i: true); + @include font-size-4($i: false); } .font-size-5 { - @include font-size-5($i: true); + @include font-size-5($i: false); } .font-size-6 { - @include font-size-6($i: true); + @include font-size-6($i: false); } /* TYPEFACE CLASSES */ .typeface-display { - @include typeface-display($i: true); + @include typeface-display($i: false); } .typeface-serif { - @include typeface-serif($i: true); + @include typeface-serif($i: false); } .typeface-sans-serif { - @include typeface-sans-serif($i: true); + @include typeface-sans-serif($i: false); } .typeface-monospace { - @include typeface-monospace($i: true); + @include typeface-monospace($i: false); } /* FONT STYLE TOKEN CLASSES */ .font-hed { - @include font-hed($i: true); + @include font-hed($i: false); } .font-subhed-1 { - @include font-subhed-1($i: true); + @include font-subhed-1($i: false); } .font-subhed-2 { - @include font-subhed-2($i: true); + @include font-subhed-2($i: false); } .font-subhed-3 { - @include font-subhed-3($i: true); + @include font-subhed-3($i: false); } .font-body { - @include font-body($i: true); + @include font-body($i: false); } .font-note-1 { - @include font-note-1($i: true); + @include font-note-1($i: false); } .font-note-2 { - @include font-note-2($i: true); + @include font-note-2($i: false); } .font-note-3 { - @include font-note-3($i: true); + @include font-note-3($i: false); }