@maggioli-design-system/styles 17.0.1 → 17.2.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.
@@ -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,15 +1,17 @@
1
1
  {
2
2
  "name": "@maggioli-design-system/styles",
3
- "version": "17.0.1",
3
+ "version": "17.2.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
- "build": "npm run clean && npm run semantic && npm run corner && npm run properties && npm run editor.tokens && npm run copy && npm run hydrated && npm run tailwind.build",
7
+ "build": "npm run clean && npm run semantic && npm run corner && npm run properties && npm run editor.tokens && npm run copy && npm run hydrated && npm run dtcg && npm run consumption && npm run tailwind.build",
8
8
  "clean": "tsx scripts/clean.ts",
9
9
  "semantic": "tsx scripts/semantic.ts",
10
10
  "properties": "tsx scripts/properties.ts",
11
11
  "corner": "tsx scripts/corner.ts",
12
12
  "editor.tokens": "tsx scripts/editor-tokens.ts",
13
+ "dtcg": "tsx scripts/dtcg.ts",
14
+ "consumption": "tsx scripts/consumption.ts",
13
15
  "hydrated": "tsx scripts/hydrated.ts",
14
16
  "copy": "tsx scripts/copy.ts",
15
17
  "tailwind.base": "postcss ./postcss/base.css -o ./dist/css/base.css",
@@ -17,13 +19,15 @@
17
19
  "tailwind.layer": "postcss ./postcss/layer.css -o ./dist/css/layer.css",
18
20
  "tailwind.build": "npm run tailwind.base && npm run tailwind.reset && npm run tailwind.layer && npm run tailwind.typography",
19
21
  "tailwind.typography": "postcss ./postcss/typography.css -o ./dist/css/utility-typography.css",
22
+ "test": "vitest --run",
20
23
  "lint": "eslint .",
21
24
  "lint:fix": "eslint . --fix"
22
25
  },
23
26
  "files": [
24
27
  "/postcss.config.js",
25
28
  "/tailwind.config.js",
26
- "/dist/"
29
+ "/dist/",
30
+ "CHANGELOG.md"
27
31
  ],
28
32
  "repository": {
29
33
  "type": "git",
@@ -59,7 +63,7 @@
59
63
  "@fontsource/merriweather": "5.1.0",
60
64
  "@fontsource/roboto": "5.1.0",
61
65
  "@fontsource/roboto-mono": "5.1.0",
62
- "@maggioli-design-system/design-tokens": "^15.0.1",
66
+ "@maggioli-design-system/design-tokens": "^15.2.0",
63
67
  "normalize.css": "8.0.1"
64
68
  },
65
69
  "devDependencies": {
@@ -67,7 +71,7 @@
67
71
  "autoprefixer": "10.6.1",
68
72
  "handlebars": "4.7.10",
69
73
  "postcss-cli": "11.0.1",
70
- "postcss": "8.5.29",
74
+ "postcss": "8.5.30",
71
75
  "postcss-import": "16.2.0",
72
76
  "tailwindcss": "4.3.3"
73
77
  }