@maggioli-design-system/styles 17.1.0 → 17.2.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.
Files changed (32) hide show
  1. package/CHANGELOG.md +132 -0
  2. package/README.md +39 -2
  3. package/dist/css/base.css +0 -6
  4. package/dist/css/colors-hex-brand-rnd.css +2 -2
  5. package/dist/css/colors-hex-brand.css +2 -2
  6. package/dist/css/colors-hex-default.css +2 -2
  7. package/dist/css/colors-hex-label.css +2 -2
  8. package/dist/css/colors-hex-status.css +2 -2
  9. package/dist/css/colors-hex-theme.css +2 -2
  10. package/dist/css/colors-hex-tones.css +2 -2
  11. package/dist/css/colors-hex.css +2 -2
  12. package/dist/css/colors-rgb-brand-rnd.css +2 -2
  13. package/dist/css/colors-rgb-brand.css +2 -2
  14. package/dist/css/colors-rgb-default.css +2 -2
  15. package/dist/css/colors-rgb-label.css +2 -2
  16. package/dist/css/colors-rgb-status.css +2 -2
  17. package/dist/css/colors-rgb-theme.css +2 -2
  18. package/dist/css/colors-rgb-tones.css +2 -2
  19. package/dist/css/colors-rgb.css +2 -2
  20. package/dist/css/globals.css +73 -362
  21. package/dist/css/hydrated.css +132 -0
  22. package/dist/css/semantic.css +3 -1
  23. package/dist/css/tailwind-theme-color.css +2 -2
  24. package/dist/css/tailwind-theme-typography.css +3 -3
  25. package/dist/css/tokens.editor.css +161 -209
  26. package/dist/css/transitions.css +3 -3
  27. package/dist/css/typography.css +2 -2
  28. package/dist/dtcg/globals.tokens.json +10 -0
  29. package/dist/tailwind/base.css +3 -12
  30. package/dist/tailwind/consumption.json +119 -1
  31. package/dist/tailwind/semantic.css +111 -111
  32. package/package.json +9 -8
package/dist/tailwind/semantic.css CHANGED
@@ -5,115 +5,115 @@
5
5
  */
6
6
 
7
7
  @theme {
8
- --color-surface-sunken: rgb(var(--magma-surface-sunken));
9
- --color-surface-muted: rgb(var(--magma-surface-muted));
10
- --color-surface-default: rgb(var(--magma-surface-default));
11
- --color-surface-raised: rgb(var(--magma-surface-raised));
12
- --color-surface-overlay: rgb(var(--magma-surface-overlay));
13
- --color-wash-soft: rgb(var(--magma-wash-soft));
14
- --color-wash-base: rgb(var(--magma-wash-base));
15
- --color-wash-strong: rgb(var(--magma-wash-strong));
16
- --color-shadow-ink: rgb(var(--magma-shadow-ink));
17
- --color-fg-default: rgb(var(--magma-text-default));
18
- --color-fg-muted: rgb(var(--magma-text-muted));
19
- --color-fg-subtle: rgb(var(--magma-text-subtle));
20
- --color-fg-disabled: rgb(var(--magma-text-disabled));
21
- --color-fg-on-emphasis: rgb(var(--magma-text-on-emphasis));
22
- --color-border-muted: rgb(var(--magma-border-muted));
23
- --color-border-default: rgb(var(--magma-border-default));
24
- --color-border-strong: rgb(var(--magma-border-strong));
25
- --color-border-focus: rgb(var(--magma-border-focus));
26
- --color-info-wash-soft: rgb(var(--magma-info-wash-soft));
27
- --color-info-wash-base: rgb(var(--magma-info-wash-base));
28
- --color-info-wash-strong: rgb(var(--magma-info-wash-strong));
29
- --color-info-fg-default: rgb(var(--magma-info-text-default));
30
- --color-info-fg-muted: rgb(var(--magma-info-text-muted));
31
- --color-info-fg-subtle: rgb(var(--magma-info-text-subtle));
32
- --color-info-fg-disabled: rgb(var(--magma-info-text-disabled));
33
- --color-info-border-muted: rgb(var(--magma-info-border-muted));
34
- --color-info-border-default: rgb(var(--magma-info-border-default));
35
- --color-info-border-strong: rgb(var(--magma-info-border-strong));
36
- --color-info-emphasis: rgb(var(--magma-info-emphasis));
37
- --color-info-emphasis-hover: rgb(var(--magma-info-emphasis-hover));
38
- --color-info-emphasis-active: rgb(var(--magma-info-emphasis-active));
39
- --color-info-on-emphasis: rgb(var(--magma-info-on-emphasis));
40
- --color-info-surface: rgb(var(--magma-info-surface));
41
- --color-info-fg: rgb(var(--magma-info-fg));
42
- --color-info-border: rgb(var(--magma-info-border));
43
- --color-success-wash-soft: rgb(var(--magma-success-wash-soft));
44
- --color-success-wash-base: rgb(var(--magma-success-wash-base));
45
- --color-success-wash-strong: rgb(var(--magma-success-wash-strong));
46
- --color-success-fg-default: rgb(var(--magma-success-text-default));
47
- --color-success-fg-muted: rgb(var(--magma-success-text-muted));
48
- --color-success-fg-subtle: rgb(var(--magma-success-text-subtle));
49
- --color-success-fg-disabled: rgb(var(--magma-success-text-disabled));
50
- --color-success-border-muted: rgb(var(--magma-success-border-muted));
51
- --color-success-border-default: rgb(var(--magma-success-border-default));
52
- --color-success-border-strong: rgb(var(--magma-success-border-strong));
53
- --color-success-emphasis: rgb(var(--magma-success-emphasis));
54
- --color-success-emphasis-hover: rgb(var(--magma-success-emphasis-hover));
55
- --color-success-emphasis-active: rgb(var(--magma-success-emphasis-active));
56
- --color-success-on-emphasis: rgb(var(--magma-success-on-emphasis));
57
- --color-success-surface: rgb(var(--magma-success-surface));
58
- --color-success-fg: rgb(var(--magma-success-fg));
59
- --color-success-border: rgb(var(--magma-success-border));
60
- --color-warning-wash-soft: rgb(var(--magma-warning-wash-soft));
61
- --color-warning-wash-base: rgb(var(--magma-warning-wash-base));
62
- --color-warning-wash-strong: rgb(var(--magma-warning-wash-strong));
63
- --color-warning-fg-default: rgb(var(--magma-warning-text-default));
64
- --color-warning-fg-muted: rgb(var(--magma-warning-text-muted));
65
- --color-warning-fg-subtle: rgb(var(--magma-warning-text-subtle));
66
- --color-warning-fg-disabled: rgb(var(--magma-warning-text-disabled));
67
- --color-warning-border-muted: rgb(var(--magma-warning-border-muted));
68
- --color-warning-border-default: rgb(var(--magma-warning-border-default));
69
- --color-warning-border-strong: rgb(var(--magma-warning-border-strong));
70
- --color-warning-emphasis: rgb(var(--magma-warning-emphasis));
71
- --color-warning-emphasis-hover: rgb(var(--magma-warning-emphasis-hover));
72
- --color-warning-emphasis-active: rgb(var(--magma-warning-emphasis-active));
73
- --color-warning-on-emphasis: rgb(var(--magma-warning-on-emphasis));
74
- --color-warning-surface: rgb(var(--magma-warning-surface));
75
- --color-warning-fg: rgb(var(--magma-warning-fg));
76
- --color-warning-border: rgb(var(--magma-warning-border));
77
- --color-danger-wash-soft: rgb(var(--magma-danger-wash-soft));
78
- --color-danger-wash-base: rgb(var(--magma-danger-wash-base));
79
- --color-danger-wash-strong: rgb(var(--magma-danger-wash-strong));
80
- --color-danger-fg-default: rgb(var(--magma-danger-text-default));
81
- --color-danger-fg-muted: rgb(var(--magma-danger-text-muted));
82
- --color-danger-fg-subtle: rgb(var(--magma-danger-text-subtle));
83
- --color-danger-fg-disabled: rgb(var(--magma-danger-text-disabled));
84
- --color-danger-border-muted: rgb(var(--magma-danger-border-muted));
85
- --color-danger-border-default: rgb(var(--magma-danger-border-default));
86
- --color-danger-border-strong: rgb(var(--magma-danger-border-strong));
87
- --color-danger-emphasis: rgb(var(--magma-danger-emphasis));
88
- --color-danger-emphasis-hover: rgb(var(--magma-danger-emphasis-hover));
89
- --color-danger-emphasis-active: rgb(var(--magma-danger-emphasis-active));
90
- --color-danger-on-emphasis: rgb(var(--magma-danger-on-emphasis));
91
- --color-danger-surface: rgb(var(--magma-danger-surface));
92
- --color-danger-fg: rgb(var(--magma-danger-fg));
93
- --color-danger-border: rgb(var(--magma-danger-border));
94
- --color-neutral-fg: rgb(var(--magma-neutral-fg));
95
- --color-neutral-border: rgb(var(--magma-neutral-border));
96
- --color-surface-inverse: rgb(var(--magma-surface-inverse));
97
- --color-surface-inverse-muted: rgb(var(--magma-surface-inverse-muted));
98
- --color-on-inverse: rgb(var(--magma-on-inverse));
99
- --color-neutral-emphasis: rgb(var(--magma-neutral-emphasis));
100
- --color-neutral-on-emphasis: rgb(var(--magma-neutral-on-emphasis));
101
- --color-accent-surface: rgb(var(--magma-accent-surface));
102
- --color-accent-fg: rgb(var(--magma-accent-fg));
103
- --color-accent-border: rgb(var(--magma-accent-border));
104
- --color-accent-emphasis: rgb(var(--magma-accent-emphasis));
105
- --color-accent-emphasis-hover: rgb(var(--magma-accent-emphasis-hover));
106
- --color-accent-emphasis-active: rgb(var(--magma-accent-emphasis-active));
107
- --color-accent-surface-hover: rgb(var(--magma-accent-surface-hover));
108
- --color-accent-surface-subtle: rgb(var(--magma-accent-surface-subtle));
109
- --color-accent-on-emphasis: rgb(var(--magma-accent-on-emphasis));
110
- --color-accent-ai-surface: rgb(var(--magma-accent-ai-surface));
111
- --color-accent-ai-fg: rgb(var(--magma-accent-ai-fg));
112
- --color-accent-ai-border: rgb(var(--magma-accent-ai-border));
113
- --color-accent-ai-emphasis: rgb(var(--magma-accent-ai-emphasis));
114
- --color-accent-ai-emphasis-hover: rgb(var(--magma-accent-ai-emphasis-hover));
115
- --color-accent-ai-emphasis-active: rgb(var(--magma-accent-ai-emphasis-active));
116
- --color-accent-ai-surface-hover: rgb(var(--magma-accent-ai-surface-hover));
117
- --color-accent-ai-surface-subtle: rgb(var(--magma-accent-ai-surface-subtle));
118
- --color-accent-ai-on-emphasis: rgb(var(--magma-accent-ai-on-emphasis));
8
+ --color-surface-sunken: rgb(var(--magma-surface-sunken, 232 232 232));
9
+ --color-surface-muted: rgb(var(--magma-surface-muted, 235 235 235));
10
+ --color-surface-default: rgb(var(--magma-surface-default, 242 242 242));
11
+ --color-surface-raised: rgb(var(--magma-surface-raised, 248 248 248));
12
+ --color-surface-overlay: rgb(var(--magma-surface-overlay, 255 255 255));
13
+ --color-wash-soft: rgb(var(--magma-wash-soft, 237 237 237));
14
+ --color-wash-base: rgb(var(--magma-wash-base, 225 225 225));
15
+ --color-wash-strong: rgb(var(--magma-wash-strong, 208 208 208));
16
+ --color-shadow-ink: rgb(var(--magma-shadow-ink, 5 5 5));
17
+ --color-fg-default: rgb(var(--magma-text-default, 5 5 5));
18
+ --color-fg-muted: rgb(var(--magma-text-muted, 73 73 73));
19
+ --color-fg-subtle: rgb(var(--magma-text-subtle, 99 99 99));
20
+ --color-fg-disabled: rgb(var(--magma-text-disabled, 119 119 119));
21
+ --color-fg-on-emphasis: rgb(var(--magma-text-on-emphasis, 255 255 255));
22
+ --color-border-muted: rgb(var(--magma-border-muted, 219 219 219));
23
+ --color-border-default: rgb(var(--magma-border-default, 196 196 196));
24
+ --color-border-strong: rgb(var(--magma-border-strong, 140 140 140));
25
+ --color-border-focus: rgb(var(--magma-border-focus, 36 103 231));
26
+ --color-info-wash-soft: rgb(var(--magma-info-wash-soft, 220 240 250));
27
+ --color-info-wash-base: rgb(var(--magma-info-wash-base, 193 230 246));
28
+ --color-info-wash-strong: rgb(var(--magma-info-wash-strong, 168 219 242));
29
+ --color-info-fg-default: rgb(var(--magma-info-text-default, 0 45 86));
30
+ --color-info-fg-muted: rgb(var(--magma-info-text-muted, 0 71 114));
31
+ --color-info-fg-subtle: rgb(var(--magma-info-text-subtle, 0 94 137));
32
+ --color-info-fg-disabled: rgb(var(--magma-info-text-disabled, 0 138 184));
33
+ --color-info-border-muted: rgb(var(--magma-info-border-muted, 184 226 245));
34
+ --color-info-border-default: rgb(var(--magma-info-border-default, 141 207 235));
35
+ --color-info-border-strong: rgb(var(--magma-info-border-strong, 18 154 196));
36
+ --color-info-emphasis: rgb(var(--magma-info-emphasis, 0 119 164));
37
+ --color-info-emphasis-hover: rgb(var(--magma-info-emphasis-hover, 0 94 137));
38
+ --color-info-emphasis-active: rgb(var(--magma-info-emphasis-active, 0 71 114));
39
+ --color-info-on-emphasis: rgb(var(--magma-info-on-emphasis, 255 255 255));
40
+ --color-info-surface: rgb(var(--magma-info-surface, 193 230 246));
41
+ --color-info-fg: rgb(var(--magma-info-fg, 0 45 86));
42
+ --color-info-border: rgb(var(--magma-info-border, 141 207 235));
43
+ --color-success-wash-soft: rgb(var(--magma-success-wash-soft, 220 243 227));
44
+ --color-success-wash-base: rgb(var(--magma-success-wash-base, 191 233 205));
45
+ --color-success-wash-strong: rgb(var(--magma-success-wash-strong, 165 225 186));
46
+ --color-success-fg-default: rgb(var(--magma-success-text-default, 0 53 0));
47
+ --color-success-fg-muted: rgb(var(--magma-success-text-muted, 0 80 7));
48
+ --color-success-fg-subtle: rgb(var(--magma-success-text-subtle, 0 102 32));
49
+ --color-success-fg-disabled: rgb(var(--magma-success-text-disabled, 0 148 76));
50
+ --color-success-border-muted: rgb(var(--magma-success-border-muted, 185 232 201));
51
+ --color-success-border-default: rgb(var(--magma-success-border-default, 143 215 169));
52
+ --color-success-border-strong: rgb(var(--magma-success-border-strong, 17 166 98));
53
+ --color-success-emphasis: rgb(var(--magma-success-emphasis, 0 128 57));
54
+ --color-success-emphasis-hover: rgb(var(--magma-success-emphasis-hover, 0 102 32));
55
+ --color-success-emphasis-active: rgb(var(--magma-success-emphasis-active, 0 80 7));
56
+ --color-success-on-emphasis: rgb(var(--magma-success-on-emphasis, 255 255 255));
57
+ --color-success-surface: rgb(var(--magma-success-surface, 191 233 205));
58
+ --color-success-fg: rgb(var(--magma-success-fg, 0 53 0));
59
+ --color-success-border: rgb(var(--magma-success-border, 143 215 169));
60
+ --color-warning-wash-soft: rgb(var(--magma-warning-wash-soft, 255 237 181));
61
+ --color-warning-wash-base: rgb(var(--magma-warning-wash-base, 255 220 117));
62
+ --color-warning-wash-strong: rgb(var(--magma-warning-wash-strong, 255 205 57));
63
+ --color-warning-fg-default: rgb(var(--magma-warning-text-default, 58 44 0));
64
+ --color-warning-fg-muted: rgb(var(--magma-warning-text-muted, 88 66 0));
65
+ --color-warning-fg-subtle: rgb(var(--magma-warning-text-subtle, 113 85 0));
66
+ --color-warning-fg-disabled: rgb(var(--magma-warning-text-disabled, 164 123 0));
67
+ --color-warning-border-muted: rgb(var(--magma-warning-border-muted, 239 216 168));
68
+ --color-warning-border-default: rgb(var(--magma-warning-border-default, 226 191 117));
69
+ --color-warning-border-strong: rgb(var(--magma-warning-border-strong, 184 130 0));
70
+ --color-warning-emphasis: rgb(var(--magma-warning-emphasis, 142 106 0));
71
+ --color-warning-emphasis-hover: rgb(var(--magma-warning-emphasis-hover, 113 85 0));
72
+ --color-warning-emphasis-active: rgb(var(--magma-warning-emphasis-active, 88 66 0));
73
+ --color-warning-on-emphasis: rgb(var(--magma-warning-on-emphasis, 255 255 255));
74
+ --color-warning-surface: rgb(var(--magma-warning-surface, 255 220 117));
75
+ --color-warning-fg: rgb(var(--magma-warning-fg, 58 44 0));
76
+ --color-warning-border: rgb(var(--magma-warning-border, 226 191 117));
77
+ --color-danger-wash-soft: rgb(var(--magma-danger-wash-soft, 255 232 230));
78
+ --color-danger-wash-base: rgb(var(--magma-danger-wash-base, 255 214 211));
79
+ --color-danger-wash-strong: rgb(var(--magma-danger-wash-strong, 254 198 194));
80
+ --color-danger-fg-default: rgb(var(--magma-danger-text-default, 89 0 0));
81
+ --color-danger-fg-muted: rgb(var(--magma-danger-text-muted, 132 0 11));
82
+ --color-danger-fg-subtle: rgb(var(--magma-danger-text-subtle, 165 33 40));
83
+ --color-danger-fg-disabled: rgb(var(--magma-danger-text-disabled, 217 83 82));
84
+ --color-danger-border-muted: rgb(var(--magma-danger-border-muted, 255 203 198));
85
+ --color-danger-border-default: rgb(var(--magma-danger-border-default, 254 171 165));
86
+ --color-danger-border-strong: rgb(var(--magma-danger-border-strong, 218 96 93));
87
+ --color-danger-emphasis: rgb(var(--magma-danger-emphasis, 196 64 65));
88
+ --color-danger-emphasis-hover: rgb(var(--magma-danger-emphasis-hover, 165 33 40));
89
+ --color-danger-emphasis-active: rgb(var(--magma-danger-emphasis-active, 132 0 11));
90
+ --color-danger-on-emphasis: rgb(var(--magma-danger-on-emphasis, 255 255 255));
91
+ --color-danger-surface: rgb(var(--magma-danger-surface, 255 214 211));
92
+ --color-danger-fg: rgb(var(--magma-danger-fg, 89 0 0));
93
+ --color-danger-border: rgb(var(--magma-danger-border, 254 171 165));
94
+ --color-neutral-fg: rgb(var(--magma-neutral-fg, 73 73 73));
95
+ --color-neutral-border: rgb(var(--magma-neutral-border, 165 165 165));
96
+ --color-surface-inverse: rgb(var(--magma-surface-inverse, 42 42 42));
97
+ --color-surface-inverse-muted: rgb(var(--magma-surface-inverse-muted, 73 73 73));
98
+ --color-on-inverse: rgb(var(--magma-on-inverse, 255 255 255));
99
+ --color-neutral-emphasis: rgb(var(--magma-neutral-emphasis, 42 42 42));
100
+ --color-neutral-on-emphasis: rgb(var(--magma-neutral-on-emphasis, 255 255 255));
101
+ --color-accent-surface: rgb(var(--magma-accent-surface, 220 224 231));
102
+ --color-accent-fg: rgb(var(--magma-accent-fg, 7 76 204));
103
+ --color-accent-border: rgb(var(--magma-accent-border, 148 172 218));
104
+ --color-accent-emphasis: rgb(var(--magma-accent-emphasis, 36 103 231));
105
+ --color-accent-emphasis-hover: rgb(var(--magma-accent-emphasis-hover, 7 76 204));
106
+ --color-accent-emphasis-active: rgb(var(--magma-accent-emphasis-active, 0 57 163));
107
+ --color-accent-surface-hover: rgb(var(--magma-accent-surface-hover, 204 212 226));
108
+ --color-accent-surface-subtle: rgb(var(--magma-accent-surface-subtle, 236 237 240));
109
+ --color-accent-on-emphasis: rgb(var(--magma-accent-on-emphasis, 255 255 255));
110
+ --color-accent-ai-surface: rgb(var(--magma-accent-ai-surface, 229 218 253));
111
+ --color-accent-ai-fg: rgb(var(--magma-accent-ai-fg, 87 20 242));
112
+ --color-accent-ai-border: rgb(var(--magma-accent-ai-border, 184 156 250));
113
+ --color-accent-ai-emphasis: rgb(var(--magma-accent-ai-emphasis, 126 73 245));
114
+ --color-accent-ai-emphasis-hover: rgb(var(--magma-accent-ai-emphasis-hover, 87 20 242));
115
+ --color-accent-ai-emphasis-active: rgb(var(--magma-accent-ai-emphasis-active, 65 11 190));
116
+ --color-accent-ai-surface-hover: rgb(var(--magma-accent-ai-surface-hover, 219 205 252));
117
+ --color-accent-ai-surface-subtle: rgb(var(--magma-accent-ai-surface-subtle, 240 234 254));
118
+ --color-accent-ai-on-emphasis: rgb(var(--magma-accent-ai-on-emphasis, 255 255 255));
119
119
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@maggioli-design-system/styles",
3
- "version": "17.1.0",
3
+ "version": "17.2.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": {
@@ -26,7 +26,8 @@
26
26
  "files": [
27
27
  "/postcss.config.js",
28
28
  "/tailwind.config.js",
29
- "/dist/"
29
+ "/dist/",
30
+ "CHANGELOG.md"
30
31
  ],
31
32
  "repository": {
32
33
  "type": "git",
@@ -58,11 +59,11 @@
58
59
  ],
59
60
  "license": "ISC",
60
61
  "dependencies": {
61
- "@fontsource/karla": "5.1.0",
62
- "@fontsource/merriweather": "5.1.0",
63
- "@fontsource/roboto": "5.1.0",
64
- "@fontsource/roboto-mono": "5.1.0",
65
- "@maggioli-design-system/design-tokens": "^15.1.0",
62
+ "@fontsource/karla": "5.3.0",
63
+ "@fontsource/merriweather": "5.3.0",
64
+ "@fontsource/roboto": "5.3.0",
65
+ "@fontsource/roboto-mono": "5.3.0",
66
+ "@maggioli-design-system/design-tokens": "^15.2.1",
66
67
  "normalize.css": "8.0.1"
67
68
  },
68
69
  "devDependencies": {
@@ -70,7 +71,7 @@
70
71
  "autoprefixer": "10.6.1",
71
72
  "handlebars": "4.7.10",
72
73
  "postcss-cli": "11.0.1",
73
- "postcss": "8.5.30",
74
+ "postcss": "8.5.31",
74
75
  "postcss-import": "16.2.0",
75
76
  "tailwindcss": "4.3.3"
76
77
  }