@maggioli-design-system/styles 7.0.0 → 8.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.
Files changed (21) hide show
  1. package/README.md +17 -0
  2. package/dist/css/base.css +70 -23
  3. package/dist/css/colors-brand-synbee.css +45 -45
  4. package/dist/css/colors-brand.css +13 -13
  5. package/dist/css/colors-label.css +105 -105
  6. package/dist/css/colors-rgb-brand-synbee.css +45 -45
  7. package/dist/css/colors-rgb-brand.css +13 -13
  8. package/dist/css/colors-rgb-label.css +105 -105
  9. package/dist/css/colors-rgb-status.css +50 -50
  10. package/dist/css/colors-rgb-tones.css +60 -60
  11. package/dist/css/colors-rgb.css +269 -269
  12. package/dist/css/colors-status.css +50 -50
  13. package/dist/css/colors-tones.css +60 -60
  14. package/dist/css/colors.css +269 -269
  15. package/dist/css/globals.css +13 -0
  16. package/dist/css/reset.css +510 -0
  17. package/dist/css/typography.css +133 -125
  18. package/dist/tailwind/base.css +10 -9
  19. package/dist/tailwind/typography.css +48 -26
  20. package/package.json +17 -11
  21. package/postcss.config.js +1 -0
package/dist/css/typography.css CHANGED
@@ -1,140 +1,148 @@
1
- .text-primary-h1 {
2
- font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
3
- font-size: 3rem;
4
- line-height: 1;
5
- font-weight: 800;
6
- letter-spacing: -0.025em;
7
- -webkit-font-smoothing: antialiased;
8
- -moz-osx-font-smoothing: grayscale
9
- }
10
1
 
11
- .text-primary-h2 {
12
- font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
13
- font-size: 2.25rem;
14
- line-height: 2.5rem;
15
- font-weight: 800;
16
- letter-spacing: -0.025em;
17
- -webkit-font-smoothing: antialiased;
18
- -moz-osx-font-smoothing: grayscale
2
+ .typography-title-h1 {
3
+ font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
4
+ font-size: 3rem;
5
+ line-height: 1;
6
+ font-weight: 800;
7
+ letter-spacing: -0.025em;
8
+ -webkit-font-smoothing: antialiased;
9
+ -moz-osx-font-smoothing: grayscale
19
10
  }
20
-
21
- .text-primary-h3 {
22
- font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
23
- font-size: 1.875rem;
24
- line-height: 2.25rem;
25
- font-weight: 800;
26
- letter-spacing: -0.025em;
27
- -webkit-font-smoothing: antialiased;
28
- -moz-osx-font-smoothing: grayscale
11
+ .typography-title-h2 {
12
+ font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
13
+ font-size: 2.25rem;
14
+ line-height: 2.5rem;
15
+ font-weight: 800;
16
+ letter-spacing: -0.025em;
17
+ -webkit-font-smoothing: antialiased;
18
+ -moz-osx-font-smoothing: grayscale
29
19
  }
30
-
31
- .text-primary-h4 {
32
- font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
33
- font-size: 1.5rem;
34
- line-height: 2rem;
35
- font-weight: 700;
36
- letter-spacing: -0.025em;
37
- -webkit-font-smoothing: antialiased;
38
- -moz-osx-font-smoothing: grayscale
20
+ .typography-title-h3 {
21
+ font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
22
+ font-size: 1.875rem;
23
+ line-height: 2.25rem;
24
+ font-weight: 800;
25
+ letter-spacing: -0.025em;
26
+ -webkit-font-smoothing: antialiased;
27
+ -moz-osx-font-smoothing: grayscale
39
28
  }
40
-
41
- .text-primary-h5 {
42
- font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
43
- font-size: 1.25rem;
44
- line-height: 1.75rem;
45
- font-weight: 700;
46
- letter-spacing: -0.025em;
47
- -webkit-font-smoothing: antialiased;
48
- -moz-osx-font-smoothing: grayscale
29
+ .typography-title-h4 {
30
+ font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
31
+ font-size: 1.5rem;
32
+ line-height: 2rem;
33
+ font-weight: 700;
34
+ letter-spacing: -0.025em;
35
+ -webkit-font-smoothing: antialiased;
36
+ -moz-osx-font-smoothing: grayscale
49
37
  }
50
-
51
- .text-primary-h6 {
52
- font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
53
- font-size: 1rem;
54
- line-height: 1.5rem;
55
- font-weight: 700;
56
- letter-spacing: -0.025em;
57
- -webkit-font-smoothing: antialiased;
58
- -moz-osx-font-smoothing: grayscale
38
+ .typography-title-h5 {
39
+ font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
40
+ font-size: 1.25rem;
41
+ line-height: 1.75rem;
42
+ font-weight: 700;
43
+ letter-spacing: -0.025em;
44
+ -webkit-font-smoothing: antialiased;
45
+ -moz-osx-font-smoothing: grayscale
59
46
  }
60
-
61
- .text-primary-action {
62
- font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
63
- font-size: 0.875rem;
64
- line-height: 1.25rem;
65
- font-weight: 700;
66
- line-height: 1.625;
67
- -webkit-font-smoothing: antialiased;
68
- -moz-osx-font-smoothing: grayscale
47
+ .typography-title-h6 {
48
+ font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
49
+ font-size: 1rem;
50
+ line-height: 1.5rem;
51
+ font-weight: 700;
52
+ letter-spacing: -0.025em;
53
+ -webkit-font-smoothing: antialiased;
54
+ -moz-osx-font-smoothing: grayscale
69
55
  }
70
-
71
- .text-secondary-paragraph {
72
- font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
73
- font-size: 1.25rem;
74
- line-height: 2rem;
75
- -webkit-font-smoothing: antialiased;
76
- -moz-osx-font-smoothing: grayscale
56
+ .typography-title-action {
57
+ font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
58
+ font-size: 0.875rem;
59
+ line-height: 1.25rem;
60
+ font-weight: 700;
61
+ line-height: 1.625;
62
+ -webkit-font-smoothing: antialiased;
63
+ -moz-osx-font-smoothing: grayscale
77
64
  }
78
-
79
- .text-secondary-detail {
80
- font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
81
- font-size: 1rem;
82
- line-height: 1.5rem;
83
- -webkit-font-smoothing: antialiased;
84
- -moz-osx-font-smoothing: grayscale
65
+ .typography-info-paragraph {
66
+ font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
67
+ font-size: 1.25rem;
68
+ line-height: 2rem;
69
+ -webkit-font-smoothing: antialiased;
70
+ -moz-osx-font-smoothing: grayscale
85
71
  }
86
-
87
- .text-secondary-caption {
88
- font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
89
- font-size: 0.875rem;
90
- line-height: 1.25rem;
91
- -webkit-font-smoothing: antialiased;
92
- -moz-osx-font-smoothing: grayscale
72
+ .typography-info-detail {
73
+ font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
74
+ font-size: 1rem;
75
+ line-height: 1.5rem;
76
+ -webkit-font-smoothing: antialiased;
77
+ -moz-osx-font-smoothing: grayscale
93
78
  }
94
-
95
- .text-secondary-tip {
96
- font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
97
- font-size: 0.75rem;
98
- line-height: 1rem;
99
- -webkit-font-smoothing: antialiased;
100
- -moz-osx-font-smoothing: grayscale
79
+ .typography-info-caption {
80
+ font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
81
+ font-size: 0.875rem;
82
+ line-height: 1.25rem;
83
+ -webkit-font-smoothing: antialiased;
84
+ -moz-osx-font-smoothing: grayscale
101
85
  }
102
-
103
- .text-secondary-label {
104
- font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
105
- font-size: 0.75rem;
106
- line-height: 1rem;
107
- font-weight: 700;
108
- text-transform: uppercase;
109
- -webkit-font-smoothing: antialiased;
110
- -moz-osx-font-smoothing: grayscale
86
+ .typography-info-label {
87
+ font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
88
+ font-size: 0.75rem;
89
+ line-height: 1rem;
90
+ font-weight: 700;
91
+ text-transform: uppercase;
92
+ -webkit-font-smoothing: antialiased;
93
+ -moz-osx-font-smoothing: grayscale
111
94
  }
112
-
113
- .text-secondary-option {
114
- font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
115
- font-size: 0.625rem;
116
- font-weight: 700;
117
- text-transform: uppercase;
118
- line-height: 1;
119
- letter-spacing: -0.025em;
120
- -webkit-font-smoothing: antialiased;
121
- -moz-osx-font-smoothing: grayscale
95
+ .typography-info-option {
96
+ font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
97
+ font-size: 0.625rem;
98
+ font-weight: 700;
99
+ text-transform: uppercase;
100
+ line-height: 1;
101
+ letter-spacing: -0.025em;
102
+ -webkit-font-smoothing: antialiased;
103
+ -moz-osx-font-smoothing: grayscale
122
104
  }
123
-
124
- .text-mono-code {
125
- font-family: 'Roboto Mono', monospace;
126
- font-size: 1rem;
127
- line-height: 1.5rem;
128
- line-height: 1.625;
129
- -webkit-font-smoothing: antialiased;
130
- -moz-osx-font-smoothing: grayscale
105
+ .typography-info-tip {
106
+ font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
107
+ font-size: 0.75rem;
108
+ line-height: 1rem;
109
+ -webkit-font-smoothing: antialiased;
110
+ -moz-osx-font-smoothing: grayscale
131
111
  }
132
-
133
- .text-mono-hack {
134
- font-family: 'Roboto Mono', monospace;
135
- font-size: 0.875rem;
136
- line-height: 1.25rem;
137
- line-height: 1.625;
138
- -webkit-font-smoothing: antialiased;
139
- -moz-osx-font-smoothing: grayscale
112
+ .typography-read-paragraph {
113
+ font-family: 'Merriweather', Times, 'Times New Roman', serif;
114
+ font-size: 1.25rem;
115
+ line-height: 2rem;
116
+ -webkit-font-smoothing: antialiased;
117
+ -moz-osx-font-smoothing: grayscale
118
+ }
119
+ .typography-read-detail {
120
+ font-family: 'Merriweather', Times, 'Times New Roman', serif;
121
+ font-size: 1rem;
122
+ line-height: 1.5rem;
123
+ -webkit-font-smoothing: antialiased;
124
+ -moz-osx-font-smoothing: grayscale
125
+ }
126
+ .typography-read-caption {
127
+ font-family: 'Merriweather', Times, 'Times New Roman', serif;
128
+ font-size: 0.875rem;
129
+ line-height: 1.25rem;
130
+ -webkit-font-smoothing: antialiased;
131
+ -moz-osx-font-smoothing: grayscale
132
+ }
133
+ .typography-mono-code {
134
+ font-family: 'Roboto Mono', monospace;
135
+ font-size: 1rem;
136
+ line-height: 1.5rem;
137
+ line-height: 1.625;
138
+ -webkit-font-smoothing: antialiased;
139
+ -moz-osx-font-smoothing: grayscale
140
+ }
141
+ .typography-mono-hack {
142
+ font-family: 'Roboto Mono', monospace;
143
+ font-size: 0.875rem;
144
+ line-height: 1.25rem;
145
+ line-height: 1.625;
146
+ -webkit-font-smoothing: antialiased;
147
+ -moz-osx-font-smoothing: grayscale
140
148
  }
package/dist/tailwind/base.css CHANGED
@@ -9,16 +9,23 @@ html {
9
9
 
10
10
  body {
11
11
  @apply
12
- text-adjust-tone-04
13
- text-secondary-detail;
12
+ antialiased
13
+ font-secondary
14
+ text-adjust-tone-02
15
+ typography-secondary-detail;
14
16
 
15
17
  -moz-osx-font-smoothing: grayscale;
16
18
  -webkit-font-smoothing: antialiased;
17
19
  -webkit-tap-highlight-color: transparent;
18
- text-rendering: optimizeLegibility;
20
+ text-rendering: optimizelegibility;
19
21
  text-size-adjust: 100%;
20
22
  }
21
23
 
24
+ ::selection {
25
+ background-color: var(--selection-background, theme('colors.label-sky-09'));
26
+ color: var(--selection-color, theme('colors.label-sky-01'));
27
+ }
28
+
22
29
  button,
23
30
  optgroup,
24
31
  select {
@@ -87,9 +94,3 @@ h6,
87
94
  p {
88
95
  @apply m-0;
89
96
  }
90
-
91
- ::selection {
92
- @apply
93
- bg-brand-maggioli-09
94
- text-brand-maggioli-02;
95
- }
package/dist/tailwind/typography.css CHANGED
@@ -1,116 +1,138 @@
1
1
  @layer components {
2
- .text-primary-h1 {
2
+ .text-title-h1 {
3
3
  @apply
4
4
  antialiased
5
5
  font-extrabold
6
- font-primary
6
+ font-title
7
7
  text-5xl
8
8
  tracking-tight;
9
9
  }
10
10
 
11
- .text-primary-h2 {
11
+ .text-title-h2 {
12
12
  @apply
13
13
  antialiased
14
14
  font-extrabold
15
- font-primary
15
+ font-title
16
16
  text-4xl
17
17
  tracking-tight;
18
18
  }
19
19
 
20
- .text-primary-h3 {
20
+ .text-title-h3 {
21
21
  @apply
22
22
  antialiased
23
23
  font-extrabold
24
- font-primary
24
+ font-title
25
25
  text-3xl
26
26
  tracking-tight;
27
27
  }
28
28
 
29
- .text-primary-h4 {
29
+ .text-title-h4 {
30
30
  @apply
31
31
  antialiased
32
32
  font-bold
33
- font-primary
33
+ font-title
34
34
  text-2xl
35
35
  tracking-tight;
36
36
  }
37
37
 
38
- .text-primary-h5 {
38
+ .text-title-h5 {
39
39
  @apply
40
40
  antialiased
41
41
  font-bold
42
- font-primary
42
+ font-title
43
43
  text-xl
44
44
  tracking-tight;
45
45
  }
46
46
 
47
- .text-primary-h6 {
47
+ .text-title-h6 {
48
48
  @apply
49
49
  antialiased
50
50
  font-bold
51
- font-primary
51
+ font-title
52
52
  text-base
53
53
  tracking-tight;
54
54
  }
55
55
 
56
- .text-primary-action {
56
+ .text-title-action {
57
57
  @apply
58
58
  antialiased
59
59
  font-bold
60
- font-primary
60
+ font-title
61
61
  leading-relaxed
62
62
  text-sm;
63
63
  }
64
64
 
65
- .text-secondary-paragraph {
65
+ .text-info-paragraph {
66
66
  @apply
67
67
  antialiased
68
- font-secondary
68
+ font-info
69
69
  leading-8
70
70
  text-xl;
71
71
  }
72
72
 
73
- .text-secondary-detail {
73
+ .text-info-detail {
74
74
  @apply
75
75
  antialiased
76
- font-secondary
76
+ font-info
77
77
  text-base;
78
78
  }
79
79
 
80
- .text-secondary-caption {
80
+ .text-info-caption {
81
81
  @apply
82
82
  antialiased
83
- font-secondary
83
+ font-info
84
84
  text-sm;
85
85
  }
86
86
 
87
- .text-secondary-label {
87
+ .text-info-label {
88
88
  @apply
89
89
  antialiased
90
90
  font-bold
91
- font-secondary
91
+ font-info
92
92
  text-xs
93
93
  uppercase;
94
94
  }
95
95
 
96
- .text-secondary-option {
96
+ .text-info-option {
97
97
  @apply
98
98
  antialiased
99
99
  font-bold
100
- font-secondary
100
+ font-info
101
101
  leading-none
102
102
  text-xxs
103
103
  tracking-tight
104
104
  uppercase;
105
105
  }
106
106
 
107
- .text-secondary-tip {
107
+ .text-info-tip {
108
108
  @apply
109
109
  antialiased
110
- font-secondary
110
+ font-info
111
111
  text-xs;
112
112
  }
113
113
 
114
+ .text-read-paragraph {
115
+ @apply
116
+ antialiased
117
+ font-read
118
+ leading-8
119
+ text-xl;
120
+ }
121
+
122
+ .text-read-detail {
123
+ @apply
124
+ antialiased
125
+ font-read
126
+ text-base;
127
+ }
128
+
129
+ .text-read-caption {
130
+ @apply
131
+ antialiased
132
+ font-read
133
+ text-sm;
134
+ }
135
+
114
136
  .text-mono-code {
115
137
  @apply
116
138
  antialiased
package/package.json CHANGED
@@ -1,17 +1,16 @@
1
1
  {
2
2
  "name": "@maggioli-design-system/styles",
3
- "version": "7.0.0",
3
+ "version": "8.0.0",
4
4
  "description": "This module contains SCSS and CSS styles used by Maggioli Design System, it also makes available a Tailwind config based on Maggioli design tokens.",
5
5
  "main": "./tailwind.config.js",
6
6
  "scripts": {
7
7
  "build": "npm run clean && npm run copy && npm run tailwind.build",
8
- "clean": "rm -rf dist || true && mkdir -p dist/css dist/tailwind",
9
- "copy": "npm run copy.tailwind && npm run copy.css",
10
- "copy.tailwind": "cp -rf tailwind dist",
11
- "copy.css": "cp -rf ../design-tokens/dist/css/*.css ./dist/css/.",
12
- "tailwind.base": "tailwindcss -i ./css/base.css -o ./dist/css/base.css",
13
- "tailwind.build": "npm run tailwind.base && npm run tailwind.typography",
14
- "tailwind.typography": "tailwindcss -i ./css/typography.css -o ./dist/css/typography.css"
8
+ "clean": "npx ts-node scripts/clean.ts",
9
+ "copy": "npx ts-node scripts/copy.ts",
10
+ "tailwind.base": "postcss ./postcss/base.css -o ./dist/css/base.css",
11
+ "tailwind.reset": "postcss ./postcss/reset.css -o ./dist/css/reset.css",
12
+ "tailwind.build": "npm run tailwind.base && npm run tailwind.reset && npm run tailwind.typography",
13
+ "tailwind.typography": "postcss ./postcss/typography.css -o ./dist/css/typography.css"
15
14
  },
16
15
  "files": [
17
16
  "/postcss.config.js",
@@ -33,19 +32,26 @@
33
32
  "name": "Vittorio Vittori",
34
33
  "email": "vittorio.vittori@maggioli.it",
35
34
  "role": "UX UI Designer"
35
+ },
36
+ {
37
+ "name": "Daniele Tardia",
38
+ "email": "daniele.tardia@hibo.it",
39
+ "role": "Senior Developer"
36
40
  }
37
41
  ],
38
42
  "license": "ISC",
39
43
  "dependencies": {
40
- "@maggioli-design-system/design-tokens": "^7.0.0",
44
+ "@maggioli-design-system/design-tokens": "^8.0.0",
41
45
  "normalize.css": "^8.0.1",
42
46
  "typeface-karla": "^1.1.13",
43
- "typeface-roboto": "^1.1.13"
47
+ "typeface-roboto": "^1.1.13",
48
+ "typeface-merriweather": "^1.1.13"
44
49
  },
45
50
  "devDependencies": {
46
51
  "autoprefixer": "^10.4.7",
52
+ "postcss-cli": "^9.1.0",
47
53
  "postcss": "^8.4.13",
48
54
  "postcss-import": "^14.0.7",
49
- "tailwindcss": "^3.0.24"
55
+ "tailwindcss": "^3.1.4"
50
56
  }
51
57
  }
package/postcss.config.js CHANGED
@@ -1,6 +1,7 @@
1
1
  module.exports = {
2
2
  plugins: [
3
3
  require('postcss-import'),
4
+ require('tailwindcss/nesting'),
4
5
  require('tailwindcss'),
5
6
  require('autoprefixer'),
6
7
  ],