wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update style.md

Browse source
This commit is contained in:
Prasanta Kumar Dutta 2023-03-16 02:13:13 +05:30
parent 317c355aee
commit 5e38bb64c6
8 changed files with 87 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Theme/themes/dark.js
View file

@ -2,7 +2,7 @@
export default {
scale: {
'size-base': 1.375,
'size-base-mobile': 1.25,
'size-base-mobile': 1.125,
'size-1': 'calc(var(--theme-scale-size-base) * 2.25rem)',
'size-2': 'calc(var(--theme-scale-size-base) * 1.5rem)',
'size-3': 'calc(var(--theme-scale-size-base) * 1rem)',

BIN
src/docs/typography/demo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 426 KiB

13
src/docs/typography/docs/face.md
View file

@ -1,5 +1,16 @@
There are four font families provided via the `Theme`, which feeds into all the text styles. If you need to specifically apply font family styles to your HTML elements, you can use the following methods.
<br />
**These are the available font family types and their corresponding tokens.**
| typeface | class | mixin |
| --------------- | ---------------------- | --------------------- |
| Display font | `.typeface-display` | `typeface-display` |
| Serif font | `.typeface-serif` | `typeface-serif` |
| Sans-serif font | `.typeface-sans-serif` | `typeface-sans-serif` |
| Monospace font | `.typeface-monospace` | `typeface-monospace` |
## With CSS classes
Add the `typeface-` class to any element for the classes to take effect. Check out the available classes and their associated sizes in the example below.
@ -23,3 +34,5 @@ Include the mixins in your stylesheets as shown below.
}
</style>
```
## See the typefaces in action

18
src/docs/typography/docs/size.md
View file

@ -6,6 +6,22 @@ You may need to use the sizes from this scale in situations like -
- Sizing chart elemnents in D3
- Defining bespoke style beyond what is provided by the `text-styles`
<br />
**These are the available text size levels and their corresponding tokens.**
| level | class | mixin |
| ----- | -------------- | ------------- |
| 1 | `.font-size-1` | `font-size-1` |
| 2 | `.font-size-2` | `font-size-2` |
| 3 | `.font-size-3` | `font-size-3` |
| 4 | `.font-size-4` | `font-size-4` |
| 5 | `.font-size-5` | `font-size-5` |
| 6 | `.font-size-6` | `font-size-6` |
> The text sizes are always a multiple of `size-base = 1.375`. On mobile
> {max-width:510px}, levels 1, 2, 3, 4 scale down to `size-base-mobile = 1.125`
## With CSS classes
Add the `font-size-*` class to any element for the classes to take effect, where `*` = 1 to 6. Check out the available classes and their associated sizes in the example below.
@ -29,3 +45,5 @@ Include the mixins in your stylesheets as shown below.
}
</style>
```
## See the text size levels in action

31
src/docs/typography/docs/style.md
View file

@ -7,17 +7,34 @@ The styles are automatically applied to native HTML elements like the `H` and `p
</div>
```
## With CSS classes
**These are the available styles and their corresponding tokens.**
Add the `font-` class to any element for the classes to take effect. Check out the available classes and their associated styles in the example below.
| Style | class | mixin |
| ------------- | ---------------- | --------------- |
| Page title | `.font-hed ` | `font-hed ` |
| Section title | `.font-subhed-1` | `font-subhed-1` |
| Subhed | `.font-subhed-2` | `font-subhed-2` |
| Smallhed | `.font-subhed-3` | `font-subhed-3` |
| Body text | `.font-body ` | `font-body` |
| Body note | `.font-note-1` | `font-note-1` |
| Endnotes | `.font-note-2` | `font-note-2` |
| Footnotes | `.font-note-3` | `font-note-3` |
## Styling with with CSS classes
> This is the most common way you probably will add styles inside your svelte components in the HTML code.
Add the `font-` class to any element for the classes to take effect.
```svelte
<div class="font-body">...your text here</div>
<!-- Text using body font style --><div class="font-body">your text here</div>
```
## With SCSS mixins
## Styling with with SCSS mixins
Include the mixins in your stylesheets as shown below.
> This is useful when you need to compose styles for elements using your own classes.
Include the mixins in your SCSS code block as shown below.
```svelte
<div class="my-class">...your text here</div>
@ -30,3 +47,7 @@ Include the mixins in your stylesheets as shown below.
}
</style>
```
## See the styles in action
Select a style from the menu in the `control` column and see it added to the text.

8
src/docs/typography/intro.stories.mdx
View file

@ -3,6 +3,7 @@ import { parameters } from '$docs/utils/docsPage.js';
import Typeset from './typeset.png';
import TypeGuides from './type-guides.png'
import DemoImg from './demo.png';
<Meta title="Typography/Intro" parameters={{ ...parameters }} />
@ -43,6 +44,13 @@ The styles are also applied to native HTML elements like the `H` and `p` tags.
> For Graphics Kit users, the typographic styles are already imported and applied to the individual components. So, if you want to customise them, check the next `Customising text styles` section.
<img
className="feature"
src={DemoImg}
width="100%"
style={{ margin: '3rem 0' }}
/>
## How it works
Somthing about the base sizes and derived scale coupled with other styles

8
src/scss/typography/_mixins.scss
View file

@ -57,6 +57,7 @@
font-family: var(--theme-font-family-hed) #{$important};
font-weight: 500 #{$important};
line-height: 1.14 #{$important};
color: var(--theme-colour-text-primary) #{$important};
}
@mixin font-subhed-1($i: false) {
@ -65,6 +66,7 @@
font-family: var(--theme-font-family-subhed) #{$important};
font-weight: 700 #{$important};
line-height: 1.14 #{$important};
color: var(--theme-colour-text-primary) #{$important};
}
@mixin font-subhed-2($i: false) {
@ -73,6 +75,7 @@
font-family: var(--theme-font-family-subhed) #{$important};
font-weight: 700 #{$important};
line-height: 1.28 #{$important};
color: var(--theme-colour-text-primary) #{$important};
}
@mixin font-subhed-3($i: false) {
@ -82,6 +85,7 @@
font-weight: 500 #{$important};
line-height: 1.4 #{$important};
text-transform: uppercase #{$important};
color: var(--theme-colour-text-secondary) #{$important};
}
@mixin font-body($i: false) {
@ -90,6 +94,7 @@
font-family: var(--theme-font-family-body) #{$important};
font-weight: 400 #{$important};
line-height: 1.5 #{$important};
color: var(--theme-colour-text-primary) #{$important};
}
@mixin font-note-1($i: false) {
@ -98,6 +103,7 @@
font-family: var(--theme-font-family-note) #{$important};
font-weight: 300 #{$important};
line-height: 1.4 #{$important};
color: var(--theme-colour-text-primary) #{$important};
}
@mixin font-note-2($i: false) {
@ -106,6 +112,7 @@
font-family: var(--theme-font-family-note) #{$important};
font-weight: 300 #{$important};
line-height: 1.4 #{$important};
color: var(--theme-colour-text-secondary) #{$important};
}
@mixin font-note-3($i: false) {
@ -114,4 +121,5 @@
font-family: var(--theme-font-family-note) #{$important};
font-weight: 400 #{$important};
line-height: 1.4 #{$important};
color: var(--theme-colour-text-secondary) #{$important};
}

14
src/scss/typography/_rules.scss
View file

@ -1,7 +1,19 @@
/* RESPONSIVE SCALING */
@media (max-width: 510px) {
div.theme {
--theme-scale-size-base: var(--theme-scale-size-base-mobile);
// --theme-scale-size-base: var(--theme-scale-size-base-mobile) !important;
--theme-scale-size-1: calc(
var(--theme-scale-size-base-mobile) * 2.25rem
) !important;
--theme-scale-size-2: calc(
var(--theme-scale-size-base-mobile) * 1.5rem
) !important;
--theme-scale-size-3: calc(
var(--theme-scale-size-base-mobile) * 1rem
) !important;
--theme-scale-size-4: calc(
var(--theme-scale-size-base-mobile) * 0.9rem
) !important;
}
}