@maggioli-design-system/styles 3.10.1 → 4.0.2

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/dist/css/base.css +4 -4
  2. package/dist/css/base.css.map +1 -1
  3. package/dist/css/color-palette.css +5373 -20501
  4. package/dist/css/color-palette.css.map +1 -1
  5. package/dist/css/color-palette.min.css +1 -1
  6. package/dist/css/colors.css +244 -484
  7. package/dist/css/colors.css.map +1 -1
  8. package/dist/css/colors.min.css +1 -1
  9. package/dist/css/components.css +4 -4
  10. package/dist/css/styles.css +5707 -21215
  11. package/dist/css/styles.css.map +1 -1
  12. package/dist/css/styles.min.css +1 -1
  13. package/dist/css/typography.css +4 -4
  14. package/dist/css/typography.css.map +1 -1
  15. package/dist/scss/global/scaffolding/cosmetics.scss +5 -44
  16. package/dist/scss/global/scaffolding/tokens.scss +0 -6
  17. package/dist/scss/mixins/scaffolding.scss +1 -9
  18. package/dist/tailwind/base.css +15 -4
  19. package/dist/tailwind/typography.css +79 -14
  20. package/package.json +3 -3
  21. package/postcss.config.js +1 -1
package/dist/css/typography.css CHANGED
@@ -1,7 +1,7 @@
1
- /*
2
- Do not edit directly
3
- Generated on Tue, 28 Sep 2021 11:59:51 GMT
4
- */
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Fri, 26 Nov 2021 09:35:11 GMT
4
+ */
5
5
  .text-primary {
6
6
  font-family: Roboto, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Helvetica Neue, sans-serif;
7
7
  }
package/dist/css/typography.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../node_modules/@maggioli-design-system/design-tokens/dist/scss/variables.scss","../../scss/global/scaffolding/typography.scss","../../scss/mixins/scaffolding.scss","../../scss/mixins/media.scss"],"names":[],"mappings":"AACA;AAAA;AAAA;AAAA;ACAE;EACE;;AAEA;EACE;;;ACqEF;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;EAI3B,aAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;EAI3B,aAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;EAI3B,aAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,mBAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,mBAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,mBAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;ACxBjC;EDsEE;IAlCQ,aAZuB;;;AAiD7B;EA7CE,WAJ2B;EAI3B,mBAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;ACxBjC;EDyEI;IArCM,aAZuB;;;;AA8C/B;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;;AD3BjC;EACE;;AAEA;EACE;;;ACqEF;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;;;AD3BjC;EACE;;AAEA;EACE;;;ACqEF;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B","file":"typography.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../node_modules/@maggioli-design-system/design-tokens/dist/scss/variables.scss","../../scss/global/scaffolding/typography.scss","../../scss/mixins/scaffolding.scss","../../scss/mixins/media.scss"],"names":[],"mappings":"AACA;AAAA;AAAA;AAAA;ACAE;EACE;;AAEA;EACE;;;AC6DF;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;EAI3B,aAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;EAI3B,aAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;EAI3B,aAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,mBAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,mBAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,mBAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;AChBjC;ED8DE;IAlCQ,aAZuB;;;AAiD7B;EA7CE,WAJ2B;EAI3B,mBAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;AChBjC;EDiEI;IArCM,aAZuB;;;;AA8C/B;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;;ADnBjC;EACE;;AAEA;EACE;;;AC6DF;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;EAI3B,gBAJ2B;;;ADnBjC;EACE;;AAEA;EACE;;;AC6DF;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;;AA8C/B;EA1CI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;AAiD7B;EA7CE,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B","file":"typography.css"}
package/dist/scss/global/scaffolding/cosmetics.scss CHANGED
@@ -1,4 +1,4 @@
1
- @mixin scaffold-property-set ($name, $property, $list, $interactive: true) {
1
+ @mixin scaffold-property-set ($name, $property, $list) {
2
2
 
3
3
  @if (property-name($property, 2) == $name) {
4
4
 
@@ -10,53 +10,14 @@
10
10
  $property-name: $property-name,
11
11
  $property-selector: $property-selector,
12
12
  $variant: $variant,
13
- $value: $value,
14
- $interactive: $interactive
13
+ $value: $value
15
14
  );
16
15
  }
17
16
  }
18
17
  }
19
18
 
20
19
  @each $property in $config-scaffold-properties {
21
- @include scaffold-property-set($name: 'box-shadow', $property: $property, $list: $shadow, $interactive: true);
22
- @include scaffold-property-set($name: 'border-radius', $property: $property, $list: $radius, $interactive: true);
23
- @include scaffold-property-set($name: 'padding', $property: $property, $list: $list-sizes, $interactive: true);
24
-
25
- @if (property-name($property, 2) == 'horizontal-padding') {
26
-
27
- $property-selector: property-name($property, 1);
28
- $property-name: property-name($property, 2);
29
-
30
- @each $variant, $value in $list-sizes {
31
- .#{$property-selector}-#{$variant} {
32
- padding-left: $value !important;
33
- padding-right: $value !important;
34
- }
35
- }
36
- }
37
-
38
- @if (property-name($property, 2) == 'vertical-padding') {
39
-
40
- $property-selector: property-name($property, 1);
41
- $property-name: property-name($property, 2);
42
-
43
- @each $variant, $value in $list-sizes {
44
- .#{$property-selector}-#{$variant} {
45
- padding-bottom: $value !important;
46
- padding-top: $value !important;
47
- }
48
- }
49
- }
50
- }
51
-
52
- .transition-cosmetics {
53
- transition: box-shadow get($tween, 'hover'), border-radius get($tween, 'hover'), padding get($tween, 'hover') !important;
54
- }
55
-
56
- .transition-colors {
57
- transition: background-color get($tween, 'hover'), color get($tween, 'hover') !important;
58
- }
59
-
60
- .transition {
61
- transition: background-color get($tween, 'hover'), color get($tween, 'hover'), box-shadow get($tween, 'hover'), border-radius get($tween, 'hover'), padding get($tween, 'hover') !important;
20
+ @include scaffold-property-set($name: 'box-shadow', $property: $property, $list: $shadow);
21
+ @include scaffold-property-set($name: 'border-radius', $property: $property, $list: $radius);
22
+ @include scaffold-property-set($name: 'padding', $property: $property, $list: $list-sizes);
62
23
  }
package/dist/scss/global/scaffolding/tokens.scss CHANGED
@@ -18,12 +18,6 @@
18
18
  .#{$property-selector}-#{$selector} {
19
19
  #{$property-name}: color($color-name, $contrast-level) !important;
20
20
  }
21
-
22
- .hover\:#{$property-selector}-#{$selector} {
23
- &:hover {
24
- #{$property-name}: color($color-name, $contrast-level) !important;
25
- }
26
- }
27
21
  } @else {
28
22
  .color-mode {
29
23
  &--auto {
package/dist/scss/mixins/scaffolding.scss CHANGED
@@ -1,15 +1,7 @@
1
- @mixin scaffold-property ($property-name, $variant, $value, $property-selector:$property-name, $interactive: true) {
1
+ @mixin scaffold-property ($property-name, $variant, $value, $property-selector:$property-name) {
2
2
  .#{$property-selector}-#{$variant} {
3
3
  #{$property-name}: $value !important;
4
4
  }
5
-
6
- @if ($interactive) {
7
- .hover\:#{$property-selector}-#{$variant} {
8
- &:hover {
9
- #{$property-name}: $value !important;
10
- }
11
- }
12
- }
13
5
  }
14
6
 
15
7
  @mixin add-property-set ($property-name, $map, $group-name: false) {
package/dist/tailwind/base.css CHANGED
@@ -8,7 +8,10 @@ html {
8
8
  }
9
9
 
10
10
  body {
11
- @apply font-secondary text-secondary-detail text-adjust-tone-03;
11
+ @apply
12
+ font-secondary
13
+ text-secondary-detail
14
+ text-adjust-tone-04;
12
15
 
13
16
  -moz-osx-font-smoothing: grayscale;
14
17
  -webkit-font-smoothing: antialiased;
@@ -20,7 +23,11 @@ body {
20
23
  button,
21
24
  optgroup,
22
25
  select {
23
- @apply antialiased font-medium font-primary leading-relaxed;
26
+ @apply
27
+ antialiased
28
+ font-medium
29
+ font-primary
30
+ leading-relaxed;
24
31
  }
25
32
 
26
33
  input,
@@ -32,7 +39,9 @@ textarea {
32
39
 
33
40
  b,
34
41
  strong {
35
- @apply tracking-tight font-semibold;
42
+ @apply
43
+ tracking-tight
44
+ font-semibold;
36
45
  }
37
46
 
38
47
  a {
@@ -81,5 +90,7 @@ p {
81
90
  }
82
91
 
83
92
  ::selection {
84
- @apply bg-brand-maggioli-15 text-brand-maggioli;
93
+ @apply
94
+ bg-brand-maggioli-15
95
+ text-brand-maggioli;
85
96
  }
package/dist/tailwind/typography.css CHANGED
@@ -1,57 +1,122 @@
1
1
  @layer components {
2
2
  .text-primary-h1 {
3
- @apply antialiased font-extrabold font-primary text-5xl tracking-tight;
3
+ @apply
4
+ antialiased
5
+ font-extrabold
6
+ font-primary
7
+ text-5xl
8
+ tracking-tight;
4
9
  }
5
10
 
6
11
  .text-primary-h2 {
7
- @apply antialiased font-extrabold font-primary text-4xl tracking-tight;
12
+ @apply
13
+ antialiased
14
+ font-extrabold
15
+ font-primary
16
+ text-4xl
17
+ tracking-tight;
8
18
  }
9
19
 
10
20
  .text-primary-h3 {
11
- @apply antialiased font-bold font-primary text-3xl tracking-tight;
21
+ @apply
22
+ antialiased
23
+ font-extrabold
24
+ font-primary
25
+ text-3xl
26
+ tracking-tight;
12
27
  }
13
28
 
14
29
  .text-primary-h4 {
15
- @apply antialiased font-bold font-primary text-2xl tracking-tight;
30
+ @apply
31
+ antialiased
32
+ font-bold
33
+ font-primary
34
+ text-2xl
35
+ tracking-tight;
16
36
  }
17
37
 
18
38
  .text-primary-h5 {
19
- @apply antialiased font-bold font-primary text-xl tracking-tight;
39
+ @apply
40
+ antialiased
41
+ font-bold
42
+ font-primary
43
+ text-xl
44
+ tracking-tight;
20
45
  }
21
46
 
22
47
  .text-primary-h6 {
23
- @apply antialiased font-bold font-primary text-base tracking-tight;
48
+ @apply
49
+ antialiased
50
+ font-bold
51
+ font-primary
52
+ text-base
53
+ tracking-tight;
24
54
  }
25
55
 
26
56
  .text-primary-action {
27
- @apply antialiased font-bold font-primary leading-relaxed text-sm;
57
+ @apply
58
+ antialiased
59
+ font-bold
60
+ font-primary
61
+ leading-relaxed
62
+ text-sm;
28
63
  }
29
64
 
30
65
  .text-secondary-paragraph {
31
- @apply antialiased font-secondary text-xl;
66
+ @apply
67
+ antialiased
68
+ font-secondary
69
+ leading-8
70
+ text-xl;
32
71
  }
33
72
 
34
73
  .text-secondary-detail {
35
- @apply antialiased font-secondary text-base;
74
+ @apply
75
+ antialiased
76
+ font-secondary
77
+ text-base;
36
78
  }
37
79
 
38
80
  .text-secondary-caption {
39
- @apply antialiased font-secondary text-sm;
81
+ @apply
82
+ antialiased
83
+ font-secondary
84
+ text-sm;
40
85
  }
41
86
 
42
87
  .text-secondary-label {
43
- @apply antialiased font-bold font-secondary text-xs uppercase;
88
+ @apply
89
+ antialiased
90
+ font-bold
91
+ font-secondary
92
+ text-xs
93
+ uppercase;
44
94
  }
45
95
 
46
96
  .text-secondary-option {
47
- @apply antialiased font-bold font-secondary leading-none text-xxs tracking-tight uppercase;
97
+ @apply
98
+ antialiased
99
+ font-bold
100
+ font-secondary
101
+ leading-none
102
+ text-xxs
103
+ tracking-tight
104
+ uppercase;
48
105
  }
49
106
 
50
107
  .text-mono-code {
51
- @apply antialiased font-mono leading-relaxed text-base;
108
+ @apply
109
+ antialiased
110
+ font-mono
111
+ leading-relaxed
112
+ text-base;
52
113
  }
53
114
 
54
115
  .text-mono-hack {
55
- @apply antialiased font-mono leading-relaxed text-xs;
116
+ @apply
117
+ antialiased
118
+ font-mono
119
+ leading-relaxed
120
+ text-sm;
56
121
  }
57
122
  }
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@maggioli-design-system/styles",
3
- "version": "3.10.1",
3
+ "version": "4.0.2",
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
- "main": "css/styles.min.css",
5
+ "main": "./tailwind.config.js",
6
6
  "scripts": {
7
7
  "build": "npm run clean && npm run config && npm run sass && npm run copy:sass && npm run copy:tailwind",
8
8
  "clean": "rm -rf dist || true && mkdir -p dist/css dist/scss dist/tailwind",
@@ -48,7 +48,7 @@
48
48
  ],
49
49
  "license": "ISC",
50
50
  "dependencies": {
51
- "@maggioli-design-system/design-tokens": "^4.0.2",
51
+ "@maggioli-design-system/design-tokens": "^5.0.2",
52
52
  "@tailwindcss/aspect-ratio": "0.2.1",
53
53
  "normalize.css": "^8.0.1",
54
54
  "tailwindcss-multi-column": "^1.0.2",
package/postcss.config.js CHANGED
@@ -3,5 +3,5 @@ module.exports = {
3
3
  require('postcss-import'),
4
4
  require('tailwindcss'),
5
5
  require('autoprefixer'),
6
- ]
6
+ ],
7
7
  }