@progressio_resources/gravity-design-system 2.0.5 → 2.0.7

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 (11) hide show
  1. package/esm2022/lib/components/gravity-attach-file/gravity-attach-file.component.mjs +2 -2
  2. package/esm2022/lib/components/gravity-button/gravity-button.component.mjs +5 -3
  3. package/fesm2022/progressio_resources-gravity-design-system.mjs +6 -4
  4. package/fesm2022/progressio_resources-gravity-design-system.mjs.map +1 -1
  5. package/lib/components/gravity-button/gravity-button.component.d.ts +4 -3
  6. package/package.json +1 -1
  7. package/src/lib/styles/_functions.scss +3 -0
  8. package/src/lib/styles/foundations/colors/themes/_hero.theme.scss +21 -21
  9. package/src/lib/styles/foundations/colors/tokens/_hero.tokens.scss +5 -0
  10. package/src/lib/styles/foundations/elevation/_hero.elevation.scss +4 -4
  11. package/src/lib/styles/foundations/spacing/_spacing.scss +1 -0
package/lib/components/gravity-button/gravity-button.component.d.ts CHANGED
@@ -2,10 +2,11 @@ import * as i0 from "@angular/core";
2
2
  export declare class GravityButtonComponent {
3
3
  cypressTag: string;
4
4
  disabled: boolean;
5
+ customState: 'active' | 'hover' | 'pressed';
5
6
  iconName: string;
6
7
  isLoading: boolean;
7
- size: 'sm' | 'md';
8
- type: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'negative' | 'alternative' | 'disabled';
8
+ size: 'sm' | 'md' | 'lg';
9
+ type: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'negative' | 'disabled';
9
10
  static ɵfac: i0.ɵɵFactoryDeclaration<GravityButtonComponent, never>;
10
- static ɵcmp: i0.ɵɵComponentDeclaration<GravityButtonComponent, "gravity-button", never, { "cypressTag": { "alias": "cypressTag"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "iconName": { "alias": "iconName"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; }; "size": { "alias": "size"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, {}, never, ["*"], false, never>;
11
+ static ɵcmp: i0.ɵɵComponentDeclaration<GravityButtonComponent, "gravity-button", never, { "cypressTag": { "alias": "cypressTag"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "customState": { "alias": "customState"; "required": false; }; "iconName": { "alias": "iconName"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; }; "size": { "alias": "size"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, {}, never, ["*"], false, never>;
11
12
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@progressio_resources/gravity-design-system",
3
3
  "description": "Gravity Design System",
4
- "version": "2.0.5",
4
+ "version": "2.0.7",
5
5
  "license": "SEE LICENSE IN LIBRARY-LICENSE",
6
6
  "peerDependencies": {
7
7
  "@angular/common": "^16.2.12",
package/src/lib/styles/_functions.scss ADDED
@@ -0,0 +1,3 @@
1
+ @function to-rgb($value) {
2
+ @return red($value), green($value), blue($value);
3
+ }
package/src/lib/styles/foundations/colors/themes/_hero.theme.scss CHANGED
@@ -2,15 +2,15 @@
2
2
 
3
3
  // button-primary
4
4
  $on-bg-button-active-primary-light: $n900;
5
- $bg-button-active-primary-light: $b400;
5
+ $bg-button-active-primary-light: $b500;
6
6
  $on-bg-button-active-primary-dark: $n100;
7
- $bg-button-active-primary-dark: $b700;
7
+ $bg-button-active-primary-dark: $b800;
8
8
  $on-bg-button-hover-primary-light: $n900;
9
- $bg-button-hover-primary-light: $b500;
9
+ $bg-button-hover-primary-light: $b300;
10
10
  $on-bg-button-hover-primary-dark: $b200;
11
- $bg-button-hover-primary-dark: $b800;
11
+ $bg-button-hover-primary-dark: $b700;
12
12
  $on-bg-button-pressed-primary-light: $n900;
13
- $bg-button-pressed-primary-light: $b300;
13
+ $bg-button-pressed-primary-light: $b200;
14
14
  $on-bg-button-pressed-primary-dark: $b200;
15
15
  $bg-button-pressed-primary-dark: $b600;
16
16
 
@@ -36,11 +36,11 @@ $bg-button-pressed-secondary-dark: $n100;
36
36
 
37
37
  // button-tertiary
38
38
  $on-bg-button-active-tertiary-light: $b400;
39
- $bg-button-active-tertiary-light: $b700;
39
+ $bg-button-active-tertiary-light: $b800;
40
40
  $on-bg-button-active-tertiary-dark: $n900;
41
41
  $bg-button-active-tertiary-dark: $n400;
42
42
  $on-bg-button-hover-tertiary-light: $b400;
43
- $bg-button-hover-tertiary-light: $b800;
43
+ $bg-button-hover-tertiary-light: $b700;
44
44
  $on-bg-button-hover-tertiary-dark: $n900;
45
45
  $bg-button-hover-tertiary-dark: $n500;
46
46
  $on-bg-button-pressed-tertiary-light: $b300;
@@ -50,13 +50,13 @@ $bg-button-pressed-tertiary-dark: $n200;
50
50
 
51
51
  // button-positive
52
52
  $on-bg-button-active-positive-light: $g100;
53
- $bg-button-active-positive-light: $g500;
53
+ $bg-button-active-positive-light: $g600;
54
54
  $on-bg-button-active-positive-dark: $g100;
55
- $bg-button-active-positive-dark: $g500;
55
+ $bg-button-active-positive-dark: $g600;
56
56
  $on-bg-button-hover-positive-light: $g100;
57
- $bg-button-hover-positive-light: $g600;
57
+ $bg-button-hover-positive-light: $g500;
58
58
  $on-bg-button-hover-positive-dark: $g100;
59
- $bg-button-hover-positive-dark: $g600;
59
+ $bg-button-hover-positive-dark: $g500;
60
60
  $on-bg-button-pressed-positive-light: $g100;
61
61
  $bg-button-pressed-positive-light: $g400;
62
62
  $on-bg-button-pressed-positive-dark: $g100;
@@ -64,13 +64,13 @@ $bg-button-pressed-positive-dark: $g400;
64
64
 
65
65
  // button-negative
66
66
  $on-bg-button-active-negative-light: $r200;
67
- $bg-button-active-negative-light: $r600;
68
- $on-bg-button-active-negative-dark: $r200;
69
- $bg-button-active-negative-dark: $r600;
67
+ $bg-button-active-negative-light: $r700;
68
+ $on-bg-button-active-negative-dark: $r300;
69
+ $bg-button-active-negative-dark: $r700;
70
70
  $on-bg-button-hover-negative-light: $r200;
71
- $bg-button-hover-negative-light: $r700;
72
- $on-bg-button-hover-negative-dark: $r300;
73
- $bg-button-hover-negative-dark: $r700;
71
+ $bg-button-hover-negative-light: $r600;
72
+ $on-bg-button-hover-negative-dark: $r200;
73
+ $bg-button-hover-negative-dark: $r600;
74
74
  $on-bg-button-pressed-negative-light: $r100;
75
75
  $bg-button-pressed-negative-light: $r500;
76
76
  $on-bg-button-pressed-negative-dark: $r100;
@@ -93,10 +93,10 @@ $bg-button-pressed-alternative-dark: $o300;
93
93
  // disabled-status
94
94
  $on-bg-disabled-light: $n600;
95
95
  $bg-disabled-light: $n800;
96
- $on-bg-disabled-dark: $n400;
96
+ $on-bg-disabled-dark: $n500;
97
97
  $bg-disabled-dark: $n200;
98
- $outline-disabled-light: $n700;
99
- $outline-disabled-dark: $n200;
98
+ $outline-disabled-light: $n600;
99
+ $outline-disabled-dark: $n500;
100
100
 
101
101
  // surface
102
102
  $surface-primary-light: $n800;
@@ -235,9 +235,9 @@ $placeholder-empty-enabled-primary-light: $n600;
235
235
  $label-text-empty-enabled-primary-light: $n400;
236
236
  $bg-field-empty-enabled-hover-primary-light: $n800;
237
237
  $bg-field-full-enabled-pressed-primary-light: $n900;
238
+ $placeholder-full-enabled-pressed-primary-light: $n400;
238
239
  $label-text-full-enabled-pressed-primary-light: $n400;
239
240
  $outline-field-full-enabled-pressed-primary-light: $b400;
240
- $placeholder-full-enabled-pressed-primary-light: $n400;
241
241
  $bg-field-empty-disabled-primary-light: $n800;
242
242
  $placeholder-empty-disabled-primary-light: $n700;
243
243
  $label-text-empty-disabled-primary-light: $n700;
package/src/lib/styles/foundations/colors/tokens/_hero.tokens.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @import "../themes/hero.theme";
2
+ @import "../../../functions";
2
3
 
3
4
  .hero-light-theme {
4
5
  // button-primary
@@ -227,6 +228,8 @@
227
228
 
228
229
  // shadow
229
230
  --shadow-primary: #{$shadow-primary-light};
231
+ --shadow-primary-rgba: #{to-rgb($shadow-primary-light)};
232
+ --shadow-opacity: 0.22;
230
233
  }
231
234
 
232
235
  .hero-dark-theme {
@@ -456,4 +459,6 @@
456
459
 
457
460
  // shadow
458
461
  --shadow-primary: #{$shadow-primary-dark};
462
+ --shadow-primary-rgba: #{to-rgb($shadow-primary-dark)};
463
+ --shadow-opacity: 1;
459
464
  }
package/src/lib/styles/foundations/elevation/_hero.elevation.scss CHANGED
@@ -10,13 +10,13 @@ $elevations: (
10
10
  }
11
11
 
12
12
  .elevation-xs {
13
- box-shadow: 0 1px 4px 0 rgba(var(--shadow-primary), 0.22);
13
+ box-shadow: 0 1px 4px 0 rgba(var(--shadow-primary-rgba), var(--shadow-opacity));
14
14
  }
15
15
 
16
16
  .elevation-sm {
17
- box-shadow: 0 4px 10px 0 rgba(var(--shadow-primary), 0.22);
17
+ box-shadow: 0 4px 10px 0 rgba(var(--shadow-primary-rgba), var(--shadow-opacity));
18
18
  }
19
19
 
20
- .elevation-xs {
21
- box-shadow: 0 8px 35px 0 rgba(var(--shadow-primary), 0.22);
20
+ .elevation-md {
21
+ box-shadow: 0 8px 35px 0 rgba(var(--shadow-primary-rgba), var(--shadow-opacity));
22
22
  }
package/src/lib/styles/foundations/spacing/_spacing.scss CHANGED
@@ -16,6 +16,7 @@ $spacing-values: (
16
16
  @each $scss-type in $scss-types {
17
17
  @each $size in $spacing-sizes {
18
18
  @each $spacing-type in $spacing-types {
19
+ //.gravity-{{padding,margin}}-{{top,bottom,left,right,block,inline}}-{{xs,sm,md,lg,xl,xxl,xxxl,xxxxl}}
19
20
  .gravity-#{$scss-type}#{$spacing-type}-#{$size} {
20
21
  #{$scss-type}#{$spacing-type}: map-get($spacing-values, $size);
21
22
  }