@matteusan/himig 1.5.0 → 1.5.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 (13) hide show
  1. package/ms-card/_card-base.scss +2 -2
  2. package/ms-card/_card-styles.scss +5 -0
  3. package/ms-card/_card-theme.scss +8 -3
  4. package/ms-form-field/_form-field-base.scss +5 -1
  5. package/ms-form-field/_form-field-styles.scss +14 -10
  6. package/ms-form-field/_form-field-theme.scss +20 -8
  7. package/ms-link/_link-theme.scss +4 -4
  8. package/ms-select-field/_select-field-styles.scss +17 -9
  9. package/ms-select-field/_select-field-theme.scss +16 -8
  10. package/ms-tick-field/_tick-field-styles.scss +2 -13
  11. package/ms-tick-field/_tick-field-theme.scss +5 -0
  12. package/package.json +1 -1
  13. package/pintig/package.json +1 -1
package/ms-card/_card-base.scss CHANGED
@@ -51,9 +51,9 @@
51
51
  $icon-size: pintig.theme-get($struct, 'size', 'icon');
52
52
 
53
53
  .ms-card {
54
- // @include pintig.key-bind('card-section-gap', pintig.primitive-token-switch('spacing.#{$section-gap}', $section-gap));
54
+ display: flex;
55
+ flex-flow: column nowrap;
55
56
  @include pintig.struct-gap('card-section', $section-gap, 'bind');
56
- // overflow: hidden;
57
57
 
58
58
  @content;
59
59
 
package/ms-card/_card-styles.scss CHANGED
@@ -46,6 +46,11 @@
46
46
  ));
47
47
  @include pintig.color-border('card', pintig.theme-get($color, 'border'), 'bind');
48
48
  @include pintig.struct-apply('card', (
49
+ width: (
50
+ default: pintig.theme-get($struct, 'width'),
51
+ min: pintig.theme-get($struct, 'width', 'min'),
52
+ max: pintig.theme-get($struct, 'width', 'max'),
53
+ ),
49
54
  radius: pintig.theme-get($struct, 'radius'),
50
55
  shadow: 'none',
51
56
  ));
package/ms-card/_card-theme.scss CHANGED
@@ -22,14 +22,19 @@
22
22
 
23
23
  $init-color: (
24
24
  fill: (
25
- default: 'surface-200',
25
+ default: 'primary-400',
26
26
  outlined: 'surface-alpha-400'
27
27
  ),
28
- ink: 'surface-ink',
29
- border: 'surface-200',
28
+ ink: 'primary-ink',
29
+ border: 'primary-400',
30
30
  );
31
31
 
32
32
  $init-struct: (
33
+ width: (
34
+ default: 100%,
35
+ min: auto,
36
+ max: auto
37
+ ),
33
38
  radius: 'md',
34
39
  padding: 'lg',
35
40
  border-width: 'xs',
package/ms-form-field/_form-field-base.scss CHANGED
@@ -69,7 +69,11 @@
69
69
 
70
70
  .ms-form-field__input {
71
71
  @include pintig.struct-apply('form-field', (
72
- width: 100%,
72
+ width: (
73
+ default: 100%,
74
+ min: inherit,
75
+ max: inherit
76
+ ),
73
77
  margin: 0,
74
78
  radius: 0,
75
79
  border-width: 2px,
package/ms-form-field/_form-field-styles.scss CHANGED
@@ -70,7 +70,11 @@
70
70
 
71
71
  .ms-form-field__input {
72
72
  @include pintig.struct-bind('form-field', (
73
- width: pintig.theme-get($struct, 'width'),
73
+ width: (
74
+ default: pintig.theme-get($struct, 'width'),
75
+ min: pintig.theme-get($struct, 'width', 'min'),
76
+ max: pintig.theme-get($struct, 'width', 'max')
77
+ ),
74
78
  padding: pintig.theme-get($struct, 'padding'),
75
79
  radius: pintig.theme-get($struct, 'radius'),
76
80
  border-width: pintig.theme-get($struct, 'border-width'),
@@ -94,7 +98,7 @@
94
98
 
95
99
  &:focus {
96
100
  @include pintig.color-bind('form-field', (
97
- fill: pintig.theme-get($color, 'fill', 'hover'),
101
+ fill: pintig.theme-get($color, 'fill', 'focus'),
98
102
  border: pintig.theme-get($color, 'border', 'focus'),
99
103
  ));
100
104
  @include pintig.struct-bind('form-field', (
@@ -170,7 +174,7 @@
170
174
  .ms-form-field__input:not(:disabled) {
171
175
  @include pintig.color-bind('form-field', (
172
176
  fill: rgba(0 0 0 / 0) !important,
173
- border: 'error-alpha-600',
177
+ border: pintig.theme-get($color, 'border', 'error'),
174
178
  ));
175
179
  }
176
180
  }
@@ -186,7 +190,7 @@
186
190
  &:has(.ms-form-field__input:not(:read-only):not(:disabled)) {
187
191
  .ms-form-field__label {
188
192
  @include pintig.color-bind('form-field-label', (
189
- ink: 'error-400',
193
+ ink: pintig.theme-get($color, 'ink', 'error'),
190
194
  ));
191
195
  }
192
196
  }
@@ -194,22 +198,22 @@
194
198
  .ms-form-field__input:not(:disabled),
195
199
  .ms-form-field__input:not(:read-only) {
196
200
  @include pintig.color-bind('form-field', (
197
- fill: 'error-alpha-300',
198
- ink: 'error-400',
199
- border: 'error-alpha-400'
201
+ fill: pintig.theme-get($color, 'fill', 'error'),
202
+ ink: pintig.theme-get($color, 'ink', 'error'),
203
+ border: pintig.theme-get($color, 'border', 'error'),
200
204
  ));
201
205
 
202
206
  &:focus {
203
207
  @include pintig.color-bind('form-field', (
204
- fill: 'error-alpha-300',
205
- border: 'error-400'
208
+ fill: pintig.theme-get($color, 'fill', 'error', 'focus'),
209
+ border: pintig.theme-get($color, 'border', 'error', 'focus'),
206
210
  ));
207
211
  }
208
212
  }
209
213
 
210
214
  .ms-form-field__helper {
211
215
  @include pintig.color-bind('form-field-helper', (
212
- ink: 'error-400',
216
+ ink: pintig.theme-get($color, 'ink', 'error'),
213
217
  ));
214
218
  }
215
219
  }
package/ms-form-field/_form-field-theme.scss CHANGED
@@ -22,25 +22,37 @@
22
22
 
23
23
  $init-color: (
24
24
  fill: (
25
- default: 'surface-alpha-600',
26
- hover: 'accent-alpha-300',
27
- disabled: 'disabled'
25
+ default: 'surface-alpha-800',
26
+ focus: 'accent-alpha-300',
27
+ disabled: 'disabled',
28
+ error: (
29
+ default: 'error-alpha-300',
30
+ focus: 'error-alpha-400'
31
+ )
28
32
  ),
29
33
  ink: (
30
34
  default: 'surface-ink',
31
35
  helper: 'surface-ink',
32
- disabled: 'disabled-ink'
36
+ disabled: 'disabled-ink',
37
+ error: 'error-400'
33
38
  ),
34
39
  border: (
35
- default: 'surface-600',
36
- hover: 'accent-alpha-600',
40
+ default: 'surface-400',
37
41
  focus: 'accent-400',
38
- disabled: 'disabled'
42
+ disabled: 'disabled',
43
+ error: (
44
+ default: 'error-alpha-800',
45
+ focus: 'error-400'
46
+ )
39
47
  ),
40
48
  );
41
49
 
42
50
  $init-struct: (
43
- width: 100%,
51
+ width: (
52
+ default: 100%,
53
+ min: auto,
54
+ max: auto
55
+ ),
44
56
  padding: ('md', 'lg'),
45
57
  radius: 'small',
46
58
  border-width: (
package/ms-link/_link-theme.scss CHANGED
@@ -32,10 +32,10 @@ $init-color: (
32
32
  $init-struct: ();
33
33
 
34
34
  $init-typography: (
35
- family: 'global',
36
- size: 'body',
37
- weight: 'normal',
38
- line-height: 'normal'
35
+ family: inherit,
36
+ size: inherit,
37
+ weight: inherit,
38
+ line-height: inherit
39
39
  );
40
40
 
41
41
  $init-settings: ();
package/ms-select-field/_select-field-styles.scss CHANGED
@@ -44,7 +44,7 @@
44
44
  pintig.primitive-token-switch('padding.#{list.nth(pintig.theme-get($struct, 'padding'), 1)}', list.nth(pintig.theme-get($struct, 'padding'), 1)),
45
45
  ) {
46
46
  @include pintig.color-bind('select-field-label', (
47
- ink: pintig.theme-get($color, 'ink', 'disabled'),
47
+ ink: pintig.theme-get($color, 'ink'),
48
48
  ));
49
49
  @include pintig.typography-bind('select-field-label', (
50
50
  family: pintig.theme-get($typography, 'family'),
@@ -80,14 +80,22 @@
80
80
 
81
81
  &:has(.ms-select-field__input:not(:read-only):not(:disabled)) {
82
82
  .ms-select-field__label {
83
- @include pintig.color-bind('select-field-label', (
84
- ink: pintig.theme-get($color, 'ink'),
85
- ));
83
+ @include pintig.color-ink('select-field-label', pintig.theme-get($color, 'ink'), 'bind');
84
+ }
85
+
86
+ .ms-select-field__helper {
87
+ @include pintig.color-ink('select-field-helper', pintig.theme-get($color, 'ink', 'helper'), 'bind');
86
88
  }
87
89
  }
88
90
 
89
91
  &:has(.ms-select-field__input:read-only:disabled) {
90
- @include pintig.color-ink('select-field-helper', pintig.theme-get($color, 'ink', 'disabled'), 'bind');
92
+ .ms-select-field__label {
93
+ @include pintig.color-ink('select-field-label', pintig.theme-get($color, 'ink', 'disabled'), 'bind');
94
+ }
95
+
96
+ .ms-select-field__helper {
97
+ @include pintig.color-ink('select-field-helper', pintig.theme-get($color, 'ink', 'disabled'), 'bind');
98
+ }
91
99
  }
92
100
 
93
101
  .ms-select-field__input {
@@ -96,12 +104,12 @@
96
104
  @include pintig.color-bind('select-field', (
97
105
  fill: pintig.theme-get($color, 'fill'),
98
106
  ink: pintig.theme-get($color, 'ink'),
99
- border: pintig.theme-get($color, 'fill'),
107
+ border: pintig.theme-get($color, 'border'),
100
108
  ));
101
109
 
102
110
  &:focus {
103
111
  @include pintig.color-bind('select-field', (
104
- fill: pintig.theme-get($color, 'fill', 'hover'),
112
+ fill: pintig.theme-get($color, 'fill', 'focus'),
105
113
  border: pintig.theme-get($color, 'border', 'focus'),
106
114
  ));
107
115
  @include pintig.struct-bind('select-field', (
@@ -114,7 +122,7 @@
114
122
  @include pintig.color-bind('select-field', (
115
123
  fill: pintig.theme-get($color, 'fill', 'disabled'),
116
124
  ink: pintig.theme-get($color, 'ink', 'disabled'),
117
- border: pintig.theme-get($color, 'fill', 'disabled'),
125
+ border: pintig.theme-get($color, 'border', 'disabled'),
118
126
  ));
119
127
  cursor: not-allowed;
120
128
  }
@@ -131,7 +139,7 @@
131
139
  @include pintig.color-bind('select-field', (
132
140
  fill: transparent,
133
141
  ink: pintig.theme-get($color, 'ink'),
134
- border: pintig.theme-get($color, 'fill'),
142
+ border: pintig.theme-get($color, 'border'),
135
143
  ));
136
144
 
137
145
  &:focus {
package/ms-select-field/_select-field-theme.scss CHANGED
@@ -22,26 +22,34 @@
22
22
 
23
23
  $init-color: (
24
24
  fill: (
25
- default: 'surface-alpha-600',
26
- hover: 'accent-alpha-300',
27
- disabled: 'disabled'
25
+ default: 'surface-alpha-800',
26
+ focus: 'accent-alpha-300',
27
+ disabled: 'disabled',
28
+ error: (
29
+ default: 'error-alpha-300',
30
+ focus: 'error-alpha-400'
31
+ )
28
32
  ),
29
33
  ink: (
30
34
  default: 'surface-ink',
31
35
  helper: 'surface-ink',
32
- disabled: 'disabled-ink'
36
+ disabled: 'disabled-ink',
37
+ error: 'error-400'
33
38
  ),
34
39
  border: (
35
- default: 'surface-600',
36
- hover: 'accent-alpha-600',
40
+ default: 'surface-400',
37
41
  focus: 'accent-400',
38
- disabled: 'disabled'
42
+ disabled: 'disabled',
43
+ error: (
44
+ default: 'error-alpha-800',
45
+ focus: 'error-400'
46
+ )
39
47
  ),
40
48
  );
41
49
 
42
50
  $init-struct: (
43
51
  width: 100%,
44
- padding: ('md' 'lg'),
52
+ padding: ('md', 'lg'),
45
53
  radius: 'small',
46
54
  border-width: (
47
55
  'default': 2px,
package/ms-tick-field/_tick-field-styles.scss CHANGED
@@ -42,19 +42,8 @@
42
42
  ink: pintig.theme-get($color, 'ink'),
43
43
  border: pintig.theme-get($color, 'border'),
44
44
  ));
45
- @include pintig.struct-apply('tick-field', (
46
- radius: pintig.theme-get($struct, 'radius'),
47
- padding: pintig.theme-get($struct, 'padding'),
48
- gap: pintig.theme-get($struct, 'gap'),
49
- border-width: pintig.theme-get($struct, 'border-width'),
50
- border-style: pintig.theme-get($struct, 'border-style'),
51
- ));
52
- @include pintig.typography-bind('tick-field', (
53
- family: pintig.theme-get($typography, 'family'),
54
- size: pintig.theme-get($typography, 'size'),
55
- weight: pintig.theme-get($typography, 'weight'),
56
- line-height: pintig.theme-get($typography, 'line-height'),
57
- ));
45
+ @include pintig.struct-apply('tick-field', $struct);
46
+ @include pintig.typography-bind('tick-field', $typography);
58
47
  @include pintig.typography-bind('tick-field-helper', (
59
48
  family: pintig.theme-get($typography, 'family'),
60
49
  size: pintig.theme-get($typography, 'size', 'helper'),
package/ms-tick-field/_tick-field-theme.scss CHANGED
@@ -48,6 +48,11 @@ $init-color: (
48
48
  );
49
49
 
50
50
  $init-struct: (
51
+ width: (
52
+ default: 100%,
53
+ min: auto,
54
+ max: auto
55
+ ),
51
56
  radius: (
52
57
  default: 'sm',
53
58
  input: (
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@matteusan/himig",
3
- "version": "1.5.0",
3
+ "version": "1.5.1",
4
4
  "description": "Matteu's personal design system for building user interfaces.",
5
5
  "repository": "https://github.com/MatteuSan/himig",
6
6
  "author": "Matteu <matteugt@gmail.com>",
package/pintig/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@matteusan/pintig",
3
- "version": "1.5.0",
3
+ "version": "1.5.1",
4
4
  "description": "The core library for the Himig Design System. Portable to any design system.",
5
5
  "main": "_index.scss",
6
6
  "repository": "https://github.com/MatteuSan/himig",