@maggioli-design-system/styles 11.4.0 → 11.5.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 (25) hide show
  1. package/README.md +6 -1
  2. package/dist/css/base.css +4 -3
  3. package/dist/css/colors-hex-brand-synbee.css +37 -37
  4. package/dist/css/colors-hex-brand.css +37 -37
  5. package/dist/css/colors-hex-default.css +574 -0
  6. package/dist/css/colors-hex-label.css +181 -181
  7. package/dist/css/colors-hex-status.css +109 -109
  8. package/dist/css/colors-hex-synbee-v1.css +1 -1
  9. package/dist/css/colors-hex-tones.css +1 -1
  10. package/dist/css/colors-hex.css +391 -361
  11. package/dist/css/colors-rgb-brand-synbee.css +37 -37
  12. package/dist/css/colors-rgb-brand.css +37 -37
  13. package/dist/css/colors-rgb-default.css +574 -0
  14. package/dist/css/colors-rgb-label.css +181 -181
  15. package/dist/css/colors-rgb-status.css +109 -109
  16. package/dist/css/colors-rgb-synbee-v1.css +1 -1
  17. package/dist/css/colors-rgb-tones.css +1 -1
  18. package/dist/css/colors-rgb.css +391 -361
  19. package/dist/css/globals.css +1 -1
  20. package/dist/css/typography.css +11 -14
  21. package/dist/tailwind/base.css +4 -8
  22. package/dist/tailwind/components.css +2 -0
  23. package/dist/tailwind/typography.css +18 -31
  24. package/package.json +2 -2
  25. package/tailwind.config.js +3 -1
package/dist/css/globals.css CHANGED
@@ -1,4 +1,5 @@
1
1
  :root {
2
+
2
3
  --magma-backdrop-blur: 4px;
3
4
  --magma-backdrop-color: 0 0 0;
4
5
  --magma-backdrop-opacity: 0.1;
@@ -11,7 +12,6 @@
11
12
  --magma-outline-blur: 2px solid transparent;
12
13
  --magma-outline-focus-offset: 2px;
13
14
  --magma-outline-focus: 2px solid theme('colors.tone-neutral-05');
14
- --magma-tooltip-z-index: 4000;
15
15
  --magma-overlay-blur: var(--magma-backdrop-blur);
16
16
  --magma-overlay-color: var(--magma-backdrop-color);
17
17
  --magma-overlay-opacity: 0.5;
package/dist/css/typography.css CHANGED
@@ -2,9 +2,9 @@
2
2
  .typography-title-h1 {
3
3
  font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
4
4
  font-size: 3rem;
5
- line-height: 1;
6
- font-weight: 900;
5
+ line-height: 3rem;
7
6
  letter-spacing: -0.025em;
7
+ font-weight: 900;
8
8
  -webkit-font-smoothing: antialiased;
9
9
  -moz-osx-font-smoothing: grayscale
10
10
  }
@@ -12,8 +12,8 @@
12
12
  font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
13
13
  font-size: 2.25rem;
14
14
  line-height: 2.5rem;
15
- font-weight: 900;
16
15
  letter-spacing: -0.025em;
16
+ font-weight: 900;
17
17
  -webkit-font-smoothing: antialiased;
18
18
  -moz-osx-font-smoothing: grayscale
19
19
  }
@@ -21,8 +21,8 @@
21
21
  font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
22
22
  font-size: 1.875rem;
23
23
  line-height: 2.25rem;
24
- font-weight: 900;
25
24
  letter-spacing: -0.025em;
25
+ font-weight: 900;
26
26
  -webkit-font-smoothing: antialiased;
27
27
  -moz-osx-font-smoothing: grayscale
28
28
  }
@@ -30,8 +30,8 @@
30
30
  font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
31
31
  font-size: 1.5rem;
32
32
  line-height: 2rem;
33
- font-weight: 700;
34
33
  letter-spacing: -0.025em;
34
+ font-weight: 700;
35
35
  -webkit-font-smoothing: antialiased;
36
36
  -moz-osx-font-smoothing: grayscale
37
37
  }
@@ -39,8 +39,8 @@
39
39
  font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
40
40
  font-size: 1.25rem;
41
41
  line-height: 1.75rem;
42
- font-weight: 700;
43
42
  letter-spacing: -0.025em;
43
+ font-weight: 700;
44
44
  -webkit-font-smoothing: antialiased;
45
45
  -moz-osx-font-smoothing: grayscale
46
46
  }
@@ -48,17 +48,16 @@
48
48
  font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
49
49
  font-size: 1rem;
50
50
  line-height: 1.5rem;
51
- font-weight: 700;
52
51
  letter-spacing: -0.025em;
52
+ font-weight: 700;
53
53
  -webkit-font-smoothing: antialiased;
54
54
  -moz-osx-font-smoothing: grayscale
55
55
  }
56
56
  .typography-title-action {
57
57
  font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
58
58
  font-size: 0.875rem;
59
- line-height: 1.25rem;
59
+ line-height: 1.5rem;
60
60
  font-weight: 500;
61
- line-height: 1.625;
62
61
  -webkit-font-smoothing: antialiased;
63
62
  -moz-osx-font-smoothing: grayscale
64
63
  }
@@ -95,10 +94,10 @@
95
94
  .typography-info-option {
96
95
  font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
97
96
  font-size: 0.625rem;
97
+ line-height: 0.625rem;
98
+ letter-spacing: -0.025em;
98
99
  font-weight: 700;
99
100
  text-transform: uppercase;
100
- line-height: 1;
101
- letter-spacing: -0.025em;
102
101
  -webkit-font-smoothing: antialiased;
103
102
  -moz-osx-font-smoothing: grayscale
104
103
  }
@@ -112,8 +111,8 @@
112
111
  .typography-read-paragraph {
113
112
  font-family: 'Merriweather', Times, 'Times New Roman', serif;
114
113
  font-size: 1.25rem;
115
- font-weight: 300;
116
114
  line-height: 2rem;
115
+ font-weight: 300;
117
116
  -webkit-font-smoothing: antialiased;
118
117
  -moz-osx-font-smoothing: grayscale
119
118
  }
@@ -136,7 +135,6 @@
136
135
  font-family: 'Roboto Mono', monospace;
137
136
  font-size: 1rem;
138
137
  line-height: 1.5rem;
139
- line-height: 1.625;
140
138
  -webkit-font-smoothing: antialiased;
141
139
  -moz-osx-font-smoothing: grayscale
142
140
  }
@@ -144,7 +142,6 @@
144
142
  font-family: 'Roboto Mono', monospace;
145
143
  font-size: 0.875rem;
146
144
  line-height: 1.25rem;
147
- line-height: 1.625;
148
145
  -webkit-font-smoothing: antialiased;
149
146
  -moz-osx-font-smoothing: grayscale
150
147
  }
package/dist/tailwind/base.css CHANGED
@@ -11,8 +11,8 @@ body {
11
11
  @apply
12
12
  antialiased
13
13
  font-info
14
- text-tone-neutral-02
15
- text-info-detail;
14
+ text-info-detail
15
+ text-theme-default-03-secondary-text;
16
16
 
17
17
  -moz-osx-font-smoothing: grayscale;
18
18
  -webkit-font-smoothing: antialiased;
@@ -29,11 +29,7 @@ body {
29
29
  button,
30
30
  optgroup,
31
31
  select {
32
- @apply
33
- antialiased
34
- font-medium
35
- font-title
36
- leading-relaxed;
32
+ @apply text-title-action;
37
33
  }
38
34
 
39
35
  input,
@@ -51,7 +47,7 @@ strong {
51
47
  }
52
48
 
53
49
  a {
54
- @apply text-brand-maggioli-03;
50
+ @apply text-theme-default-02-primary-text;
55
51
 
56
52
  font-family: inherit;
57
53
  font-size: inherit;
package/dist/tailwind/components.css CHANGED
@@ -17,12 +17,14 @@
17
17
  .focus-on,
18
18
  .focusable-light:focus-visible,
19
19
  .focusable:focus-visible {
20
+
20
21
  --magma-outline-blur-offset: var(--magma-outline-focus-offset);
21
22
  --magma-outline-blur: var(--magma-outline-focus);
22
23
  }
23
24
 
24
25
  .focus-light-on,
25
26
  .focusable-light:focus-visible {
27
+
26
28
  --magma-outline-blur: 2px solid theme('colors.tone-neutral');
27
29
  }
28
30
 
package/dist/tailwind/typography.css CHANGED
@@ -4,8 +4,7 @@
4
4
  antialiased
5
5
  font-black
6
6
  font-title
7
- text-5xl
8
- tracking-tight;
7
+ text-size-title-h1;
9
8
  }
10
9
 
11
10
  .text-title-h2 {
@@ -13,8 +12,7 @@
13
12
  antialiased
14
13
  font-black
15
14
  font-title
16
- text-4xl
17
- tracking-tight;
15
+ text-size-title-h2;
18
16
  }
19
17
 
20
18
  .text-title-h3 {
@@ -22,8 +20,7 @@
22
20
  antialiased
23
21
  font-black
24
22
  font-title
25
- text-3xl
26
- tracking-tight;
23
+ text-size-title-h3;
27
24
  }
28
25
 
29
26
  .text-title-h4 {
@@ -31,8 +28,7 @@
31
28
  antialiased
32
29
  font-bold
33
30
  font-title
34
- text-2xl
35
- tracking-tight;
31
+ text-size-title-h4;
36
32
  }
37
33
 
38
34
  .text-title-h5 {
@@ -40,8 +36,7 @@
40
36
  antialiased
41
37
  font-bold
42
38
  font-title
43
- text-xl
44
- tracking-tight;
39
+ text-size-title-h5;
45
40
  }
46
41
 
47
42
  .text-title-h6 {
@@ -49,8 +44,7 @@
49
44
  antialiased
50
45
  font-bold
51
46
  font-title
52
- text-base
53
- tracking-tight;
47
+ text-size-title-h6;
54
48
  }
55
49
 
56
50
  .text-title-action {
@@ -58,30 +52,28 @@
58
52
  antialiased
59
53
  font-medium
60
54
  font-title
61
- leading-relaxed
62
- text-sm;
55
+ text-size-title-action;
63
56
  }
64
57
 
65
58
  .text-info-paragraph {
66
59
  @apply
67
60
  antialiased
68
61
  font-info
69
- leading-8
70
- text-xl;
62
+ text-size-info-paragraph;
71
63
  }
72
64
 
73
65
  .text-info-detail {
74
66
  @apply
75
67
  antialiased
76
68
  font-info
77
- text-base;
69
+ text-size-info-detail;
78
70
  }
79
71
 
80
72
  .text-info-caption {
81
73
  @apply
82
74
  antialiased
83
75
  font-info
84
- text-sm;
76
+ text-size-info-caption;
85
77
  }
86
78
 
87
79
  .text-info-label {
@@ -89,7 +81,7 @@
89
81
  antialiased
90
82
  font-bold
91
83
  font-info
92
- text-xs
84
+ text-size-info-label
93
85
  uppercase;
94
86
  }
95
87
 
@@ -98,9 +90,7 @@
98
90
  antialiased
99
91
  font-bold
100
92
  font-info
101
- leading-none
102
- text-xxs
103
- tracking-tight
93
+ text-size-info-option
104
94
  uppercase;
105
95
  }
106
96
 
@@ -108,7 +98,7 @@
108
98
  @apply
109
99
  antialiased
110
100
  font-info
111
- text-xs;
101
+ text-size-info-tip;
112
102
  }
113
103
 
114
104
  .text-read-paragraph {
@@ -116,8 +106,7 @@
116
106
  antialiased
117
107
  font-light
118
108
  font-read
119
- leading-8
120
- text-xl;
109
+ text-size-read-paragraph;
121
110
  }
122
111
 
123
112
  .text-read-detail {
@@ -125,29 +114,27 @@
125
114
  antialiased
126
115
  font-light
127
116
  font-read
128
- text-base;
117
+ text-size-read-detail;
129
118
  }
130
119
 
131
120
  .text-read-caption {
132
121
  @apply
133
122
  antialiased
134
123
  font-read
135
- text-sm;
124
+ text-size-read-caption;
136
125
  }
137
126
 
138
127
  .text-code-snippet {
139
128
  @apply
140
129
  antialiased
141
130
  font-code
142
- leading-relaxed
143
- text-base;
131
+ text-size-code-snippet;
144
132
  }
145
133
 
146
134
  .text-code-hack {
147
135
  @apply
148
136
  antialiased
149
137
  font-code
150
- leading-relaxed
151
- text-sm;
138
+ text-size-code-hack;
152
139
  }
153
140
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@maggioli-design-system/styles",
3
- "version": "11.4.0",
3
+ "version": "11.5.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": {
@@ -45,7 +45,7 @@
45
45
  "@fontsource/merriweather": "^4.5.14",
46
46
  "@fontsource/roboto": "^4.5.8",
47
47
  "@fontsource/roboto-mono": "^4.5.10",
48
- "@maggioli-design-system/design-tokens": "^10.5.0",
48
+ "@maggioli-design-system/design-tokens": "^10.6.0",
49
49
  "normalize.css": "^8.0.1"
50
50
  },
51
51
  "devDependencies": {
package/tailwind.config.js CHANGED
@@ -1,7 +1,8 @@
1
1
  /* eslint-disable @typescript-eslint/no-var-requires */
2
2
  const { palette } = require('@maggioli-design-system/design-tokens')
3
3
  const mediaQueries = require('@maggioli-design-system/design-tokens/dist/js/media').media
4
- const { fontFamily } = require('@maggioli-design-system/design-tokens/dist/js/font-family')
4
+ const { fontFamily } = require('@maggioli-design-system/design-tokens/dist/js/tailwind-font-family')
5
+ const { fontSize } = require('@maggioli-design-system/design-tokens/dist/js/tailwind-font-size')
5
6
  const { ease } = require('@maggioli-design-system/design-tokens/dist/js/ease')
6
7
  const { gap } = require('@maggioli-design-system/design-tokens/dist/js/gap')
7
8
 
@@ -71,6 +72,7 @@ module.exports = {
71
72
  'sharp-sm': '0 0 1px 1px rgba(0, 0, 0, 0.06), 0 1px 2px 0 rgba(0, 0, 0, 0.05)',
72
73
  },
73
74
  fontSize: {
75
+ ...fontSize,
74
76
  xxs: '0.625rem',
75
77
  },
76
78
  gap: {