agroptima-design-system 0.20.0 → 0.21.0-beta.2

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.
Files changed (6) hide show
  1. package/package.json +1 -1
  2. package/src/atoms/Button/Button.scss +1 -0
  3. package/src/generic/_reset.scss +0 -1
  4. package/src/settings/typography/_content.scss +43 -55
  5. package/src/stories/Changelog.mdx +4 -0
  6. package/src/stories/Typography.stories.js +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "agroptima-design-system",
3
- "version": "0.20.0",
3
+ "version": "0.21.0-beta.2",
4
4
  "scripts": {
5
5
  "dev": "npm run storybook",
6
6
  "storybook": "storybook dev -p 6006 --ci",
package/src/atoms/Button/Button.scss CHANGED
@@ -37,6 +37,7 @@
37
37
  border: 1px solid transparent;
38
38
 
39
39
  > .icon {
40
+ margin-top: 2px;
40
41
  width: config.$icon-size-3x;
41
42
  height: config.$icon-size-3x;
42
43
  > svg {
package/src/generic/_reset.scss CHANGED
@@ -54,7 +54,6 @@ video {
54
54
  7. Remove built-in form typography styles
55
55
  */
56
56
  input,
57
- button,
58
57
  textarea,
59
58
  select {
60
59
  font: inherit;
package/src/settings/typography/_content.scss CHANGED
@@ -1,25 +1,34 @@
1
1
  @use '../color_alias';
2
- // 87.5 = SemiCondensed , 400..600 normal, medium, semibold
3
- @import 'https://fonts.googleapis.com/css2?family=Noto+Sans:wdth,wght@87.5,100..600';
2
+ @import 'https://fonts.googleapis.com/css2?family=Mulish:wght@200..1000&display=swap';
3
+
4
+ $font-size-footnote: 0.875rem;
5
+ $font-size-body: 1rem;
6
+ $font-size-h4: 1.25rem;
7
+ $font-size-h3: 1.5rem;
8
+ $font-size-h2: 2rem;
9
+ $font-size-h1: 2.5rem;
10
+ $font-line-height-footnote: 1.375rem;
11
+ $font-line-height-body: 1.5rem;
12
+ $font-line-height-h4: 1.75rem;
13
+ $font-line-height-h3: 2rem;
14
+ $font-line-height-h2: 2.375rem;
15
+ $font-line-height-h1: 3rem;
4
16
 
5
17
  @mixin base {
6
- font-style: 1rem;
7
18
  font-variant: normal;
8
19
  font-weight: 400;
9
- font-family:
10
- Noto Sans,
11
- sans-serif;
20
+ font-family: Mulish, sans-serif;
12
21
  color: color_alias.$neutral-color-1000;
13
- font-size: 1rem;
14
- line-height: normal;
22
+ font-size: $font-size-body;
23
+ line-height: $font-line-height-body;
15
24
  }
16
25
 
17
26
  @mixin h1 {
18
27
  @include base;
19
28
  font-weight: 700;
20
29
  color: color_alias.$neutral-color-1000;
21
- font-size: 2.375rem;
22
- line-height: 2.875rem;
30
+ font-size: $font-size-h1;
31
+ line-height: $font-line-height-h1;
23
32
  margin: 0;
24
33
  }
25
34
 
@@ -27,8 +36,8 @@
27
36
  @include base;
28
37
  font-weight: 700;
29
38
  color: color_alias.$neutral-color-1000;
30
- font-size: 1.875rem;
31
- line-height: 2.375rem;
39
+ font-size: $font-size-h2;
40
+ line-height: $font-line-height-h2;
32
41
  margin: 0;
33
42
  }
34
43
 
@@ -36,8 +45,8 @@
36
45
  @include base;
37
46
  font-weight: 700;
38
47
  color: color_alias.$neutral-color-1000;
39
- font-size: 1.5rem;
40
- line-height: 2rem;
48
+ font-size: $font-size-h3;
49
+ line-height: $font-line-height-h3;
41
50
  margin: 0;
42
51
  }
43
52
 
@@ -45,96 +54,75 @@
45
54
  @include base;
46
55
  font-weight: 700;
47
56
  color: color_alias.$neutral-color-1000;
48
- font-size: 1.25rem;
49
- line-height: 1.75rem;
57
+ font-size: $font-size-h4;
58
+ line-height: $font-line-height-h4;
50
59
  margin: 0;
51
60
  }
52
61
 
53
62
  @mixin body-regular-primary {
54
63
  @include base;
55
- font-weight: 400;
56
64
  color: color_alias.$neutral-color-1000;
57
- font-size: 1rem;
58
- line-height: 1.5rem;
59
65
  }
60
66
 
61
67
  @mixin body-regular-secondary {
62
68
  @include base;
63
- font-weight: 400;
64
69
  color: color_alias.$neutral-color-600;
65
- font-size: 1rem;
66
- line-height: 1.5rem;
67
70
  }
68
71
 
69
72
  @mixin body-regular-disabled {
70
73
  @include base;
71
- font-weight: 400;
72
74
  color: color_alias.$neutral-color-400;
73
- font-size: 1rem;
74
- line-height: 1.5rem;
75
75
  }
76
76
 
77
77
  @mixin body-regular-error {
78
78
  @include base;
79
- font-weight: 400;
80
79
  color: color_alias.$error-color-1000;
81
- font-size: 1rem;
82
- line-height: 1.5rem;
83
80
  }
84
81
 
85
82
  @mixin body-regular-warning {
86
83
  @include base;
87
- font-weight: 400;
88
84
  color: color_alias.$warning-color-1000;
89
- font-size: 1rem;
90
- line-height: 1.5rem;
91
85
  }
92
86
 
93
- @mixin body-medium {
87
+ @mixin body-underline {
94
88
  @include base;
95
- font-weight: 600;
96
89
  color: color_alias.$neutral-color-1000;
97
- font-size: 1rem;
98
- line-height: 1.5rem;
90
+ text-decoration-line: underline;
99
91
  }
100
92
 
101
- @mixin body-bold {
93
+ @mixin body-link {
102
94
  @include base;
103
- font-weight: 700;
95
+ color: color_alias.$primary-color-600;
96
+ }
97
+
98
+ @mixin body-medium {
99
+ @include base;
100
+ font-weight: 500;
104
101
  color: color_alias.$neutral-color-1000;
105
- font-size: 1rem;
106
- line-height: 1.5rem;
107
102
  }
108
103
 
109
- @mixin body-underline {
104
+ @mixin body-bold {
110
105
  @include base;
111
- font-weight: 400;
106
+ font-weight: 700;
112
107
  color: color_alias.$neutral-color-1000;
113
- font-size: 1rem;
114
- line-height: 1.5rem;
115
- text-decoration-line: underline;
116
108
  }
117
109
 
118
- @mixin body-link {
110
+ @mixin body-extrabold {
119
111
  @include base;
120
- font-weight: 400;
121
- color: color_alias.$primary-color-600;
122
- font-size: 1rem;
123
- line-height: 1.5rem;
112
+ font-weight: 800;
113
+ color: color_alias.$neutral-color-1000;
124
114
  }
125
115
 
126
116
  @mixin footnote-primary {
127
117
  @include base;
128
- font-weight: 400;
129
118
  color: color_alias.$neutral-color-600;
130
- font-size: 0.875rem;
131
- line-height: 1.375rem;
119
+ font-size: $font-size-footnote;
120
+ line-height: $font-line-height-footnote;
132
121
  }
133
122
 
134
123
  @mixin footnote-error {
135
124
  @include base;
136
- font-weight: 400;
137
125
  color: color_alias.$error-color-1000;
138
- font-size: 0.875rem;
139
- line-height: 1.375rem;
126
+ font-size: $font-size-footnote;
127
+ line-height: $font-line-height-footnote;
140
128
  }
package/src/stories/Changelog.mdx CHANGED
@@ -4,6 +4,10 @@ import { Meta } from "@storybook/blocks";
4
4
 
5
5
  # Changelog
6
6
 
7
+ ## 0.21.0
8
+
9
+ * Update typography styles
10
+
7
11
  ## 0.20.0
8
12
 
9
13
  * Update colors
package/src/stories/Typography.stories.js CHANGED
@@ -21,7 +21,7 @@ export const Typography = {
21
21
  fontStyle: '1rem',
22
22
  fontVariant: 'normal',
23
23
  fontWeight: 400,
24
- fontFamily: 'Noto Sans, sans-serif',
24
+ fontFamily: 'Mulish, sans-serif',
25
25
  color: '#444444FF',
26
26
  fontSize: '1rem',
27
27
  lineHeight: 'normal',