@maggioli-design-system/styles 9.0.0 → 10.0.1
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/dist/css/base.css +43 -44
- package/dist/css/colors-hex-brand-synbee.css +1 -1
- package/dist/css/colors-hex-brand.css +1 -1
- package/dist/css/colors-hex-label.css +1 -1
- package/dist/css/colors-hex-status.css +1 -1
- package/dist/css/colors-hex-tones.css +1 -1
- package/dist/css/colors-hex.css +1 -1
- package/dist/css/colors-rgb-brand-synbee.css +1 -1
- package/dist/css/colors-rgb-brand.css +1 -1
- package/dist/css/colors-rgb-label.css +1 -1
- package/dist/css/colors-rgb-status.css +1 -1
- package/dist/css/colors-rgb-tones.css +1 -1
- package/dist/css/colors-rgb.css +1 -1
- package/dist/css/globals.css +5 -0
- package/dist/css/reset.css +9 -2
- package/dist/css/typography.css +5 -3
- package/dist/tailwind/components.css +18 -0
- package/dist/tailwind/typography.css +7 -5
- package/package.json +11 -10
package/dist/css/base.css
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
|
|
1
|
+
@tailwind components;
|
|
2
2
|
html {
|
|
3
3
|
scroll-behavior: smooth;
|
|
4
4
|
}
|
|
5
|
-
body,
|
|
6
|
-
html
|
|
5
|
+
body,
|
|
6
|
+
html{
|
|
7
7
|
margin: 0px;
|
|
8
8
|
}
|
|
9
|
-
body
|
|
9
|
+
body{
|
|
10
10
|
font-size: 1rem;
|
|
11
11
|
line-height: 1.5rem;
|
|
12
12
|
font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
|
|
@@ -18,7 +18,6 @@ body {
|
|
|
18
18
|
-webkit-tap-highlight-color: transparent;
|
|
19
19
|
text-rendering: optimizelegibility;
|
|
20
20
|
-webkit-text-size-adjust: 100%;
|
|
21
|
-
-moz-text-size-adjust: 100%;
|
|
22
21
|
text-size-adjust: 100%;
|
|
23
22
|
}
|
|
24
23
|
::-moz-selection {
|
|
@@ -29,29 +28,29 @@ body {
|
|
|
29
28
|
background-color: var(--selection-background, rgb(var(--label-sky-09)));
|
|
30
29
|
color: var(--selection-color, rgb(var(--label-sky-01)));
|
|
31
30
|
}
|
|
32
|
-
button,
|
|
33
|
-
optgroup,
|
|
34
|
-
select
|
|
31
|
+
button,
|
|
32
|
+
optgroup,
|
|
33
|
+
select{
|
|
35
34
|
font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
|
|
36
35
|
font-weight: 500;
|
|
37
36
|
line-height: 1.625;
|
|
38
37
|
-webkit-font-smoothing: antialiased;
|
|
39
38
|
-moz-osx-font-smoothing: grayscale;
|
|
40
39
|
}
|
|
41
|
-
input,
|
|
42
|
-
textarea
|
|
40
|
+
input,
|
|
41
|
+
textarea{
|
|
43
42
|
-webkit-appearance: none;
|
|
44
43
|
-moz-appearance: none;
|
|
45
44
|
appearance: none;
|
|
46
45
|
|
|
47
46
|
font-family: inherit;
|
|
48
47
|
}
|
|
49
|
-
b,
|
|
50
|
-
strong
|
|
48
|
+
b,
|
|
49
|
+
strong{
|
|
51
50
|
font-weight: 600;
|
|
52
51
|
letter-spacing: -0.025em;
|
|
53
52
|
}
|
|
54
|
-
a
|
|
53
|
+
a{
|
|
55
54
|
--tw-text-opacity: 1;
|
|
56
55
|
color: rgba(var(--brand-maggioli-03), var(--tw-text-opacity));
|
|
57
56
|
|
|
@@ -59,38 +58,38 @@ a {
|
|
|
59
58
|
font-size: inherit;
|
|
60
59
|
font-weight: inherit;
|
|
61
60
|
}
|
|
62
|
-
a,
|
|
63
|
-
aside,
|
|
64
|
-
body,
|
|
65
|
-
code,
|
|
66
|
-
div,
|
|
67
|
-
datalist,
|
|
68
|
-
footer,
|
|
69
|
-
form,
|
|
70
|
-
h1,
|
|
71
|
-
h2,
|
|
72
|
-
h3,
|
|
73
|
-
h4,
|
|
74
|
-
h5,
|
|
75
|
-
h6,
|
|
76
|
-
header,
|
|
77
|
-
hr,
|
|
78
|
-
html,
|
|
79
|
-
input,
|
|
80
|
-
li,
|
|
81
|
-
main,
|
|
82
|
-
section,
|
|
83
|
-
span,
|
|
84
|
-
ul,
|
|
85
|
-
textarea
|
|
61
|
+
a,
|
|
62
|
+
aside,
|
|
63
|
+
body,
|
|
64
|
+
code,
|
|
65
|
+
div,
|
|
66
|
+
datalist,
|
|
67
|
+
footer,
|
|
68
|
+
form,
|
|
69
|
+
h1,
|
|
70
|
+
h2,
|
|
71
|
+
h3,
|
|
72
|
+
h4,
|
|
73
|
+
h5,
|
|
74
|
+
h6,
|
|
75
|
+
header,
|
|
76
|
+
hr,
|
|
77
|
+
html,
|
|
78
|
+
input,
|
|
79
|
+
li,
|
|
80
|
+
main,
|
|
81
|
+
section,
|
|
82
|
+
span,
|
|
83
|
+
ul,
|
|
84
|
+
textarea{
|
|
86
85
|
box-sizing: border-box;
|
|
87
86
|
}
|
|
88
|
-
h1,
|
|
89
|
-
h2,
|
|
90
|
-
h3,
|
|
91
|
-
h4,
|
|
92
|
-
h5,
|
|
93
|
-
h6,
|
|
94
|
-
p
|
|
87
|
+
h1,
|
|
88
|
+
h2,
|
|
89
|
+
h3,
|
|
90
|
+
h4,
|
|
91
|
+
h5,
|
|
92
|
+
h6,
|
|
93
|
+
p{
|
|
95
94
|
margin: 0px;
|
|
96
95
|
}
|
package/dist/css/colors-hex.css
CHANGED
package/dist/css/colors-rgb.css
CHANGED
package/dist/css/globals.css
CHANGED
|
@@ -4,7 +4,12 @@
|
|
|
4
4
|
--backdrop-color: 0 0 0;
|
|
5
5
|
--backdrop-opacity: 0.1;
|
|
6
6
|
--backdrop: rgba(var(--backdrop-color) / var(--backdrop-opacity));
|
|
7
|
+
--disabled-opacity: 0.5;
|
|
7
8
|
--modal-z-index: 1000;
|
|
9
|
+
--outline-blur-offset: 6px;
|
|
10
|
+
--outline-blur: 2px solid transparent;
|
|
11
|
+
--outline-focus-offset: 2px;
|
|
12
|
+
--outline-focus: 2px solid theme('colors.tone-neutral-05');
|
|
8
13
|
--overlay-blur: var(--backdrop-blur);
|
|
9
14
|
--overlay-color: var(--backdrop-color);
|
|
10
15
|
--overlay-opacity: 0.5;
|
package/dist/css/reset.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*
|
|
2
|
-
! tailwindcss v3.
|
|
2
|
+
! tailwindcss v3.2.4 | MIT License | https://tailwindcss.com
|
|
3
3
|
*//*
|
|
4
4
|
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
|
|
5
5
|
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
|
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
2. Prevent adjustments of font size after orientation changes in iOS.
|
|
25
25
|
3. Use a more readable tab size.
|
|
26
26
|
4. Use the user's configured `sans` font-family by default.
|
|
27
|
+
5. Use the user's configured `sans` font-feature-settings by default.
|
|
27
28
|
*/
|
|
28
29
|
|
|
29
30
|
html {
|
|
@@ -33,6 +34,7 @@ html {
|
|
|
33
34
|
-o-tab-size: 4;
|
|
34
35
|
tab-size: 4; /* 3 */
|
|
35
36
|
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
|
|
37
|
+
font-feature-settings: normal; /* 5 */
|
|
36
38
|
}
|
|
37
39
|
|
|
38
40
|
/*
|
|
@@ -107,7 +109,7 @@ code,
|
|
|
107
109
|
kbd,
|
|
108
110
|
samp,
|
|
109
111
|
pre {
|
|
110
|
-
font-family:
|
|
112
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
|
|
111
113
|
font-size: 1em; /* 2 */
|
|
112
114
|
}
|
|
113
115
|
|
|
@@ -368,6 +370,11 @@ video {
|
|
|
368
370
|
height: auto;
|
|
369
371
|
}
|
|
370
372
|
|
|
373
|
+
/* Make elements with the HTML hidden attribute stay hidden by default */
|
|
374
|
+
[hidden] {
|
|
375
|
+
display: none;
|
|
376
|
+
}
|
|
377
|
+
|
|
371
378
|
*, ::before, ::after {
|
|
372
379
|
--tw-border-spacing-x: 0;
|
|
373
380
|
--tw-border-spacing-y: 0;
|
package/dist/css/typography.css
CHANGED
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
|
|
58
58
|
font-size: 0.875rem;
|
|
59
59
|
line-height: 1.25rem;
|
|
60
|
-
font-weight:
|
|
60
|
+
font-weight: 500;
|
|
61
61
|
line-height: 1.625;
|
|
62
62
|
-webkit-font-smoothing: antialiased;
|
|
63
63
|
-moz-osx-font-smoothing: grayscale
|
|
@@ -112,6 +112,7 @@
|
|
|
112
112
|
.typography-read-paragraph {
|
|
113
113
|
font-family: 'Merriweather', Times, 'Times New Roman', serif;
|
|
114
114
|
font-size: 1.25rem;
|
|
115
|
+
font-weight: 300;
|
|
115
116
|
line-height: 2rem;
|
|
116
117
|
-webkit-font-smoothing: antialiased;
|
|
117
118
|
-moz-osx-font-smoothing: grayscale
|
|
@@ -120,6 +121,7 @@
|
|
|
120
121
|
font-family: 'Merriweather', Times, 'Times New Roman', serif;
|
|
121
122
|
font-size: 1rem;
|
|
122
123
|
line-height: 1.5rem;
|
|
124
|
+
font-weight: 300;
|
|
123
125
|
-webkit-font-smoothing: antialiased;
|
|
124
126
|
-moz-osx-font-smoothing: grayscale
|
|
125
127
|
}
|
|
@@ -130,7 +132,7 @@
|
|
|
130
132
|
-webkit-font-smoothing: antialiased;
|
|
131
133
|
-moz-osx-font-smoothing: grayscale
|
|
132
134
|
}
|
|
133
|
-
.typography-
|
|
135
|
+
.typography-code-snippet {
|
|
134
136
|
font-family: 'Roboto Mono', monospace;
|
|
135
137
|
font-size: 1rem;
|
|
136
138
|
line-height: 1.5rem;
|
|
@@ -138,7 +140,7 @@
|
|
|
138
140
|
-webkit-font-smoothing: antialiased;
|
|
139
141
|
-moz-osx-font-smoothing: grayscale
|
|
140
142
|
}
|
|
141
|
-
.typography-
|
|
143
|
+
.typography-code-hack {
|
|
142
144
|
font-family: 'Roboto Mono', monospace;
|
|
143
145
|
font-size: 0.875rem;
|
|
144
146
|
line-height: 1.25rem;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
@tailwind components;
|
|
2
|
+
|
|
3
|
+
@layer components {
|
|
4
|
+
.focusable {
|
|
5
|
+
@apply
|
|
6
|
+
duration-200
|
|
7
|
+
ease-out;
|
|
8
|
+
|
|
9
|
+
outline-offset: var(--outline-blur-offset, 6px);
|
|
10
|
+
outline: var(--outline-blur, 2px solid transparent);
|
|
11
|
+
transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.focusable:focus-visible {
|
|
15
|
+
outline-offset: var(--outline-focus-offset, 2px);
|
|
16
|
+
outline: var(--outline-focus, 2px solid theme('colors.label-sky-05'));
|
|
17
|
+
}
|
|
18
|
+
}
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
.text-title-action {
|
|
57
57
|
@apply
|
|
58
58
|
antialiased
|
|
59
|
-
font-
|
|
59
|
+
font-medium
|
|
60
60
|
font-title
|
|
61
61
|
leading-relaxed
|
|
62
62
|
text-sm;
|
|
@@ -114,6 +114,7 @@
|
|
|
114
114
|
.text-read-paragraph {
|
|
115
115
|
@apply
|
|
116
116
|
antialiased
|
|
117
|
+
font-light
|
|
117
118
|
font-read
|
|
118
119
|
leading-8
|
|
119
120
|
text-xl;
|
|
@@ -122,6 +123,7 @@
|
|
|
122
123
|
.text-read-detail {
|
|
123
124
|
@apply
|
|
124
125
|
antialiased
|
|
126
|
+
font-light
|
|
125
127
|
font-read
|
|
126
128
|
text-base;
|
|
127
129
|
}
|
|
@@ -133,18 +135,18 @@
|
|
|
133
135
|
text-sm;
|
|
134
136
|
}
|
|
135
137
|
|
|
136
|
-
.text-
|
|
138
|
+
.text-code-snippet {
|
|
137
139
|
@apply
|
|
138
140
|
antialiased
|
|
139
|
-
font-
|
|
141
|
+
font-code
|
|
140
142
|
leading-relaxed
|
|
141
143
|
text-base;
|
|
142
144
|
}
|
|
143
145
|
|
|
144
|
-
.text-
|
|
146
|
+
.text-code-hack {
|
|
145
147
|
@apply
|
|
146
148
|
antialiased
|
|
147
|
-
font-
|
|
149
|
+
font-code
|
|
148
150
|
leading-relaxed
|
|
149
151
|
text-sm;
|
|
150
152
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@maggioli-design-system/styles",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "10.0.1",
|
|
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": {
|
|
@@ -41,17 +41,18 @@
|
|
|
41
41
|
],
|
|
42
42
|
"license": "ISC",
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@fontsource/karla": "^4.5.
|
|
45
|
-
"@fontsource/merriweather": "^4.5.
|
|
46
|
-
"@fontsource/roboto": "^4.5.
|
|
47
|
-
"@
|
|
44
|
+
"@fontsource/karla": "^4.5.10",
|
|
45
|
+
"@fontsource/merriweather": "^4.5.14",
|
|
46
|
+
"@fontsource/roboto": "^4.5.8",
|
|
47
|
+
"@fontsource/roboto-mono": "^4.5.8",
|
|
48
|
+
"@maggioli-design-system/design-tokens": "^10.0.0",
|
|
48
49
|
"normalize.css": "^8.0.1"
|
|
49
50
|
},
|
|
50
51
|
"devDependencies": {
|
|
51
|
-
"autoprefixer": "^10.4.
|
|
52
|
-
"postcss-cli": "^
|
|
53
|
-
"postcss": "^8.4.
|
|
54
|
-
"postcss-import": "^
|
|
55
|
-
"tailwindcss": "^3.
|
|
52
|
+
"autoprefixer": "^10.4.13",
|
|
53
|
+
"postcss-cli": "^10.1.0",
|
|
54
|
+
"postcss": "^8.4.19",
|
|
55
|
+
"postcss-import": "^15.0.1",
|
|
56
|
+
"tailwindcss": "^3.2.4"
|
|
56
57
|
}
|
|
57
58
|
}
|