@goodhood-web/ui 4.2.0-development.8 → 4.2.0-development.9

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 (6) hide show
  1. package/index.js +45 -45
  2. package/index.mjs +4497 -4477
  3. package/package.json +1 -1
  4. package/style.css +1 -1
  5. package/styles/_functions.scss +8 -7
  6. package/styles/_mixins.scss +60 -43
package/styles/_functions.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @use 'sass:color';
2
2
  @use 'sass:map';
3
3
  @use 'sass:math';
4
- @forward 'design-tokens';
4
+ @use 'design-tokens';
5
5
 
6
6
  @function mapGet($map, $keys...) {
7
7
  $value: map.get($map, $keys...);
@@ -14,29 +14,30 @@
14
14
  }
15
15
 
16
16
  @function getSemanticColor($color, $shade) {
17
- @return mapGet($tokens, color, semantic, $color, $shade);
17
+ @return mapGet(design-tokens.$tokens, color, semantic, $color, $shade);
18
18
  }
19
19
 
20
20
  @function getSpacing($spacingType) {
21
- @return mapGet($tokens, spacing, $spacingType);
21
+ @return mapGet(design-tokens.$tokens, spacing, $spacingType);
22
22
  }
23
23
 
24
24
  @function getBoxShadow($type, $variant) {
25
- @return mapGet($tokens, Shadow, $type, $variant);
25
+ @return mapGet(design-tokens.$tokens, Shadow, $type, $variant);
26
26
  }
27
27
 
28
28
  @function getBorderRadius($spacingType) {
29
- @return mapGet($tokens, 'borderRadius', $spacingType);
29
+ @return mapGet(design-tokens.$tokens, 'borderRadius', $spacingType);
30
30
  }
31
31
 
32
32
  @function getFontFamily($type, $level) {
33
- $typo-settings: map.get(map.get($tokens, $type), $level);
33
+ $typo-settings: map.get(map.get(design-tokens.$tokens, $type), $level);
34
34
 
35
35
  @return map.get($typo-settings, 'fontFamily'), 'Helvetica Neue', 'Arial', sans-serif;
36
36
  }
37
37
 
38
38
  @function hex2rgb($hex) {
39
- @return color.red($hex), color.green($hex), color.blue($hex);
39
+ @return color.channel($hex, 'red', $space: rgb),
40
+ color.channel($hex, 'green', $space: rgb), color.channel($hex, 'blue', $space: rgb);
40
41
  }
41
42
 
42
43
  @function ceilFunction($number) {
package/styles/_mixins.scss CHANGED
@@ -1,9 +1,13 @@
1
1
  @use 'sass:map';
2
+ @use 'design-tokens';
3
+ @use 'design-tokens-landing';
4
+ @use 'functions';
5
+ @use 'media';
2
6
 
3
- @mixin spacing($properties, $map: map.get($tokens, 'spacing')) {
7
+ @mixin spacing($properties, $map: map.get(design-tokens.$tokens, 'spacing')) {
4
8
  // Extract the correct spacing settings;
5
9
  @each $size, $i in $map {
6
- $value: map.get($tokens, 'spacing', $size);
10
+ $value: map.get(design-tokens.$tokens, 'spacing', $size);
7
11
  &-#{$size} {
8
12
  @each $property in $properties {
9
13
  #{$property}: #{$value};
@@ -14,73 +18,86 @@
14
18
 
15
19
  @mixin typography($type, $level) {
16
20
  // Extract the correct typography settings based on the provided type and level
17
- $typo-settings: map.get(map.get($tokens, $type), $level);
21
+ $typo-settings: map.get(map.get(design-tokens.$tokens, $type), $level);
18
22
 
19
23
  // Ensure the level exists
20
24
  @if $typo-settings {
25
+ margin-bottom: functions.mapGet($typo-settings, 'paragraphSpacing');
21
26
  font-family:
22
- mapGet($typo-settings, 'fontFamily'), 'Helvetica Neue', Arial, sans-serif;
27
+ functions.mapGet($typo-settings, 'fontFamily'), 'Helvetica Neue', Arial, sans-serif;
23
28
  font-feature-settings: 'salt';
24
- font-size: mapGet($typo-settings, 'fontSize');
25
- font-weight: mapGet($typo-settings, 'fontWeight');
26
- letter-spacing: mapGet($typo-settings, 'letterSpacing');
27
- line-height: mapGet($typo-settings, 'lineHeight');
28
- text-decoration: mapGet($typo-settings, 'textDecoration');
29
- text-indent: mapGet($typo-settings, 'paragraphIndent');
30
- text-transform: mapGet($typo-settings, 'textCase');
29
+ font-size: functions.mapGet($typo-settings, 'fontSize');
30
+ font-weight: functions.mapGet($typo-settings, 'fontWeight');
31
+ letter-spacing: functions.mapGet($typo-settings, 'letterSpacing');
32
+ line-height: functions.mapGet($typo-settings, 'lineHeight');
33
+ text-decoration: functions.mapGet($typo-settings, 'textDecoration');
34
+ text-indent: functions.mapGet($typo-settings, 'paragraphIndent');
35
+ text-transform: functions.mapGet($typo-settings, 'textCase');
31
36
  } @else {
32
37
  @error "Unknown typography type: #{$type} or level: #{$level}.";
33
38
  }
34
39
  }
35
40
 
36
41
  @mixin typographyLanding($type, $level) {
37
- $typo-settings-desktop: map.get(map.get($tokensLanding, desktop, $type), $level);
38
- $typo-settings-tablet: map.get(map.get($tokensLanding, tablet, $type), $level);
39
- $typo-settings-mobile: map.get(map.get($tokensLanding, mobile, $type), $level);
42
+ $typo-settings-desktop: map.get(
43
+ map.get(design-tokens-landing.$tokensLanding, desktop, $type),
44
+ $level
45
+ );
46
+ $typo-settings-tablet: map.get(
47
+ map.get(design-tokens-landing.$tokensLanding, tablet, $type),
48
+ $level
49
+ );
50
+ $typo-settings-mobile: map.get(
51
+ map.get(design-tokens-landing.$tokensLanding, mobile, $type),
52
+ $level
53
+ );
40
54
 
41
55
  @if $typo-settings-mobile {
42
56
  font-family:
43
- mapGet($typo-settings-mobile, 'fontFamily'), 'Helvetica Neue', Arial, sans-serif;
57
+ functions.mapGet($typo-settings-mobile, 'fontFamily'), 'Helvetica Neue', Arial,
58
+ sans-serif;
44
59
  font-feature-settings: 'salt';
45
- font-size: mapGet($typo-settings-mobile, 'fontSize');
46
- font-style: mapGet($typo-settings-mobile, 'fontStyle');
47
- font-weight: mapGet($typo-settings-mobile, 'fontWeight');
48
- letter-spacing: mapGet($typo-settings-mobile, 'letterSpacing');
49
- line-height: mapGet($typo-settings-mobile, 'lineHeight');
50
- text-decoration: mapGet($typo-settings-mobile, 'textDecoration');
51
- text-indent: mapGet($typo-settings-mobile, 'paragraphIndent');
52
- text-transform: mapGet($typo-settings-mobile, 'textCase');
60
+ font-size: functions.mapGet($typo-settings-mobile, 'fontSize');
61
+ font-style: functions.mapGet($typo-settings-mobile, 'fontStyle');
62
+ font-weight: functions.mapGet($typo-settings-mobile, 'fontWeight');
63
+ letter-spacing: functions.mapGet($typo-settings-mobile, 'letterSpacing');
64
+ line-height: functions.mapGet($typo-settings-mobile, 'lineHeight');
65
+ text-decoration: functions.mapGet($typo-settings-mobile, 'textDecoration');
66
+ text-indent: functions.mapGet($typo-settings-mobile, 'paragraphIndent');
67
+ text-transform: functions.mapGet($typo-settings-mobile, 'textCase');
53
68
  }
54
69
 
55
70
  @if $typo-settings-tablet {
56
- @media #{$media-tablet} {
71
+ @media #{media.$media-tablet} {
57
72
  font-family:
58
- mapGet($typo-settings-tablet, 'fontFamily'), 'Helvetica Neue', Arial, sans-serif;
73
+ functions.mapGet($typo-settings-tablet, 'fontFamily'), 'Helvetica Neue', Arial,
74
+ sans-serif;
59
75
  font-feature-settings: 'salt';
60
- font-size: mapGet($typo-settings-tablet, 'fontSize');
61
- font-style: mapGet($typo-settings-tablet, 'fontStyle');
62
- font-weight: mapGet($typo-settings-tablet, 'fontWeight');
63
- letter-spacing: mapGet($typo-settings-tablet, 'letterSpacing');
64
- line-height: mapGet($typo-settings-tablet, 'lineHeight');
65
- text-decoration: mapGet($typo-settings-tablet, 'textDecoration');
66
- text-indent: mapGet($typo-settings-tablet, 'paragraphIndent');
67
- text-transform: mapGet($typo-settings-tablet, 'textCase');
76
+ font-size: functions.mapGet($typo-settings-tablet, 'fontSize');
77
+ font-style: functions.mapGet($typo-settings-tablet, 'fontStyle');
78
+ font-weight: functions.mapGet($typo-settings-tablet, 'fontWeight');
79
+ letter-spacing: functions.mapGet($typo-settings-tablet, 'letterSpacing');
80
+ line-height: functions.mapGet($typo-settings-tablet, 'lineHeight');
81
+ text-decoration: functions.mapGet($typo-settings-tablet, 'textDecoration');
82
+ text-indent: functions.mapGet($typo-settings-tablet, 'paragraphIndent');
83
+ text-transform: functions.mapGet($typo-settings-tablet, 'textCase');
68
84
  }
69
85
  }
70
86
 
71
87
  @if $typo-settings-desktop {
72
- @media #{$media-desktop} {
88
+ @media #{media.$media-desktop} {
73
89
  font-family:
74
- mapGet($typo-settings-desktop, 'fontFamily'), 'Helvetica Neue', Arial, sans-serif;
90
+ functions.mapGet($typo-settings-desktop, 'fontFamily'), 'Helvetica Neue', Arial,
91
+ sans-serif;
75
92
  font-feature-settings: 'salt';
76
- font-size: mapGet($typo-settings-desktop, 'fontSize');
77
- font-style: mapGet($typo-settings-desktop, 'fontStyle');
78
- font-weight: mapGet($typo-settings-desktop, 'fontWeight');
79
- letter-spacing: mapGet($typo-settings-desktop, 'letterSpacing');
80
- line-height: mapGet($typo-settings-desktop, 'lineHeight');
81
- text-decoration: mapGet($typo-settings-desktop, 'textDecoration');
82
- text-indent: mapGet($typo-settings-desktop, 'paragraphIndent');
83
- text-transform: mapGet($typo-settings-desktop, 'textCase');
93
+ font-size: functions.mapGet($typo-settings-desktop, 'fontSize');
94
+ font-style: functions.mapGet($typo-settings-desktop, 'fontStyle');
95
+ font-weight: functions.mapGet($typo-settings-desktop, 'fontWeight');
96
+ letter-spacing: functions.mapGet($typo-settings-desktop, 'letterSpacing');
97
+ line-height: functions.mapGet($typo-settings-desktop, 'lineHeight');
98
+ text-decoration: functions.mapGet($typo-settings-desktop, 'textDecoration');
99
+ text-indent: functions.mapGet($typo-settings-desktop, 'paragraphIndent');
100
+ text-transform: functions.mapGet($typo-settings-desktop, 'textCase');
84
101
  }
85
102
  }
86
103
  }