@1024pix/pix-ui 30.1.0 → 31.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# Pix-UI Changelog
|
|
2
2
|
|
|
3
|
+
## v31.0.0 (14/04/2023)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### :building_construction: Tech
|
|
7
|
+
- [#381](https://github.com/1024pix/pix-ui/pull/381) [TECH] Modification de la valeur du Design Token warning-60 et suppression des placeholders de font-weight (PIX-7666).
|
|
8
|
+
|
|
3
9
|
## v30.1.0 (14/04/2023)
|
|
4
10
|
|
|
5
11
|
|
|
@@ -38,7 +38,7 @@ import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
|
|
|
38
38
|
Secondary: '#ffd235',
|
|
39
39
|
40: '#ffbe00',
|
|
40
40
|
50: '#eaa600',
|
|
41
|
-
60: '#
|
|
41
|
+
60: '#d87016',
|
|
42
42
|
70: '#a95800',
|
|
43
43
|
80: '#874d00'}}
|
|
44
44
|
/>
|
|
@@ -103,7 +103,7 @@ import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
|
|
|
103
103
|
30: '#ffd235',
|
|
104
104
|
40: '#ffbe00',
|
|
105
105
|
50: '#eaa600',
|
|
106
|
-
60: '#
|
|
106
|
+
60: '#d87016',
|
|
107
107
|
70: '#a95800',
|
|
108
108
|
80: '#874d00'}}
|
|
109
109
|
/>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<!-- Typography.stories.mdx -->
|
|
2
2
|
|
|
3
|
-
import { Meta, Typeset } from '@storybook/addon-docs';
|
|
3
|
+
import { Meta, Typeset, Markdown } from '@storybook/addon-docs';
|
|
4
4
|
|
|
5
5
|
<Meta title="Utiliser Pix UI/Design Tokens/Typographie" />
|
|
6
6
|
|
|
@@ -82,24 +82,6 @@ Des **placeholder SCSS** équivalents aux tokens de Figma sont disponibles. C'es
|
|
|
82
82
|
fontFamily={'Roboto, Arial, sans-serif'}
|
|
83
83
|
/>
|
|
84
84
|
|
|
85
|
-
#### Variantes de gras
|
|
86
|
-
|
|
87
|
-
Pour les corps, on peut préciser une graisse différente en complément :
|
|
88
|
-
|
|
89
|
-
<Typeset
|
|
90
|
-
fontSizes={[16]}
|
|
91
|
-
fontWeight={500}
|
|
92
|
-
sampleText={'@extend %pix-weight-medium;'}
|
|
93
|
-
fontFamily={'Roboto, Arial, sans-serif'}
|
|
94
|
-
/>
|
|
95
|
-
|
|
96
|
-
<Typeset
|
|
97
|
-
fontSizes={[16]}
|
|
98
|
-
fontWeight={700}
|
|
99
|
-
sampleText={'@extend %pix-weight-bold;'}
|
|
100
|
-
fontFamily={'Roboto, Arial, sans-serif'}
|
|
101
|
-
/>
|
|
102
|
-
|
|
103
85
|
### Comment utiliser un placeholder SCSS ?
|
|
104
86
|
|
|
105
87
|
```css
|
|
@@ -140,6 +122,29 @@ Pour chaque placeholder SCSS, une **classe CSS** utilitaire de même nom existe
|
|
|
140
122
|
- `pix-body-s`
|
|
141
123
|
- `pix-body-xs`
|
|
142
124
|
|
|
125
|
+
## Design tokens
|
|
126
|
+
|
|
127
|
+
Des variables SCSS existent pour certaines propriétés de typographie.
|
|
128
|
+
|
|
129
|
+
### Font-weight
|
|
130
|
+
|
|
131
|
+
ℹ️ Ces variables ne devraient pas être utilisées pour modifier la graisse d'un titre car les classes utilitaires et les placeholders ci-dessus s'en occupent déjà.
|
|
132
|
+
|
|
133
|
+
`$font-normal: 400;`
|
|
134
|
+
|
|
135
|
+
`$font-medium: 500;`
|
|
136
|
+
|
|
137
|
+
`$font-bold: 700;`
|
|
138
|
+
|
|
139
|
+
### Font-family
|
|
140
|
+
|
|
141
|
+
ℹ️ Vous ne devriez pas avoir à les utiliser car elles vont de pair avec d'autres propriétés de typo (font-size, line-height, ...).<br/>
|
|
142
|
+
Pour en savoir plus, voir les classes utilitaires et les placeholders ci-dessus.
|
|
143
|
+
|
|
144
|
+
`$font-open-sans: 'Open Sans', Arial, sans-serif;`
|
|
145
|
+
|
|
146
|
+
`$font-roboto: 'Roboto', Arial, sans-serif;`
|
|
147
|
+
|
|
143
148
|
## Détails techniques
|
|
144
149
|
|
|
145
150
|
On utilise sur les applications Pix deux polices d'écriture :
|