@maggioli-design-system/styles 3.9.0 → 4.0.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 (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 +230 -470
  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 +5693 -21201
  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 +78 -14
  20. package/package.json +3 -3
  21. package/tailwind.config.js +4 -0
package/dist/css/typography.css CHANGED
@@ -1,7 +1,7 @@
1
- /*
2
- Do not edit directly
3
- Generated on Tue, 17 Aug 2021 12:21:59 GMT
4
- */
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Tue, 16 Nov 2021 11:40:36 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,121 @@
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-bold
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
+ text-xl;
32
70
  }
33
71
 
34
72
  .text-secondary-detail {
35
- @apply antialiased font-secondary text-base;
73
+ @apply
74
+ antialiased
75
+ font-secondary
76
+ text-base;
36
77
  }
37
78
 
38
79
  .text-secondary-caption {
39
- @apply antialiased font-secondary text-sm;
80
+ @apply
81
+ antialiased
82
+ font-secondary
83
+ text-sm;
40
84
  }
41
85
 
42
86
  .text-secondary-label {
43
- @apply antialiased font-bold font-secondary text-xs uppercase;
87
+ @apply
88
+ antialiased
89
+ font-bold
90
+ font-secondary
91
+ text-xs
92
+ uppercase;
44
93
  }
45
94
 
46
95
  .text-secondary-option {
47
- @apply antialiased font-bold font-secondary leading-none text-xxs tracking-tight uppercase;
96
+ @apply
97
+ antialiased
98
+ font-bold
99
+ font-secondary
100
+ leading-none
101
+ text-xxs
102
+ tracking-tight
103
+ uppercase;
48
104
  }
49
105
 
50
106
  .text-mono-code {
51
- @apply antialiased font-mono leading-relaxed text-base;
107
+ @apply
108
+ antialiased
109
+ font-mono
110
+ leading-relaxed
111
+ text-base;
52
112
  }
53
113
 
54
114
  .text-mono-hack {
55
- @apply antialiased font-mono leading-relaxed text-xs;
115
+ @apply
116
+ antialiased
117
+ font-mono
118
+ leading-relaxed
119
+ text-sm;
56
120
  }
57
121
  }
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@maggioli-design-system/styles",
3
- "version": "3.9.0",
3
+ "version": "4.0.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
- "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.0",
52
52
  "@tailwindcss/aspect-ratio": "0.2.1",
53
53
  "normalize.css": "^8.0.1",
54
54
  "tailwindcss-multi-column": "^1.0.2",
package/tailwind.config.js CHANGED
@@ -75,12 +75,16 @@ module.exports = {
75
75
  fontSize: {
76
76
  xxs: '0.625rem',
77
77
  },
78
+ gridAutoRows: {
79
+ 1: '1fr',
80
+ },
78
81
  gridTemplateColumns: {
79
82
  'fit-sm': 'repeat(auto-fit, minmax(10rem, 1fr))',
80
83
  fit: 'repeat(auto-fit, minmax(12.5rem, 1fr))',
81
84
  'fit-md': 'repeat(auto-fit, minmax(15rem, 1fr))',
82
85
  'fit-lg': 'repeat(auto-fit, minmax(17.5rem, 1fr))',
83
86
  'fit-xl': 'repeat(auto-fit, minmax(20rem, 1fr))',
87
+ full: '100%',
84
88
  },
85
89
  maxWidth: {
86
90
  '1/4': '25%',