@progressio_resources/gravity-design-system 2.0.4 → 2.0.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progressio_resources/gravity-design-system",
   "description": "Gravity Design System",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "license": "SEE LICENSE IN LIBRARY-LICENSE",
   "peerDependencies": {
     "@angular/common": "^16.2.12",

package/src/lib/styles/_functions.scss

@@ -0,0 +1,3 @@
+@function to-rgb($value) {
+  @return red($value), green($value), blue($value);
+}

package/src/lib/styles/foundations/colors/tokens/_hero.tokens.scss

@@ -1,4 +1,5 @@
 @import "../themes/hero.theme";
+@import "../../../functions";
 
 .hero-light-theme {
   // button-primary
@@ -227,6 +228,8 @@
 
   // shadow
   --shadow-primary: #{$shadow-primary-light};
+  --shadow-primary-rgba: #{to-rgb($shadow-primary-light)};
+  --shadow-opacity: 0.22;
 }
 
 .hero-dark-theme {
@@ -456,4 +459,6 @@
 
   // shadow
   --shadow-primary: #{$shadow-primary-dark};
+  --shadow-primary-rgba: #{to-rgb($shadow-primary-dark)};
+  --shadow-opacity: 1;
 }

package/src/lib/styles/foundations/elevation/_hero.elevation.scss

@@ -10,13 +10,13 @@ $elevations: (
 }
 
 .elevation-xs {
-  box-shadow: 0 1px 4px 0 rgba(var(--shadow-primary), 0.22);
+  box-shadow: 0 1px 4px 0 rgba(var(--shadow-primary-rgba), var(--shadow-opacity));
 }
 
 .elevation-sm {
-  box-shadow: 0 4px 10px 0 rgba(var(--shadow-primary), 0.22);
+  box-shadow: 0 4px 10px 0 rgba(var(--shadow-primary-rgba), var(--shadow-opacity));
 }
 
-.elevation-xs {
-  box-shadow: 0 8px 35px 0 rgba(var(--shadow-primary), 0.22);
+.elevation-md {
+  box-shadow: 0 8px 35px 0 rgba(var(--shadow-primary-rgba), var(--shadow-opacity));
 }

package/src/lib/styles/foundations/grids/_grids.scss

@@ -5,154 +5,308 @@ $grids: (
   xl: 16
 );
 
+$gutter: 8px;
+
 .gravity-col-sm-1 {
   width: calc(100% / 4) * 1;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-sm-2 {
   width: calc(100% / 4) * 2;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-sm-3 {
   width: calc(100% / 4) * 3;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-sm-4 {
   width: calc(100% / 4) * 4;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-md-1 {
   width: calc(100% / 6) * 1;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-md-2 {
   width: calc(100% / 6) * 2;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-md-3 {
   width: calc(100% / 6) * 3;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-md-4 {
   width: calc(100% / 6) * 4;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-md-5 {
   width: calc(100% / 6) * 5;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-md-6 {
   width: calc(100% / 6) * 6;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-lg-1 {
   width: calc(100% / 12) * 1;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-lg-2 {
   width: calc(100% / 12) * 2;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-lg-3 {
   width: calc(100% / 12) * 3;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-lg-4 {
   width: calc(100% / 12) * 4;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-lg-5 {
   width: calc(100% / 12) * 5;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-lg-6 {
   width: calc(100% / 12) * 6;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-lg-7 {
   width: calc(100% / 12) * 7;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-lg-8 {
   width: calc(100% / 12) * 8;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-lg-9 {
   width: calc(100% / 12) * 9;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-lg-10 {
   width: calc(100% / 12) * 10;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-lg-11 {
   width: calc(100% / 12) * 11;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-lg-12 {
   width: calc(100% / 12) * 12;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-xl-1 {
   width: calc(100% / 16) * 1;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-xl-2 {
   width: calc(100% / 16) * 2;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-xl-3 {
   width: calc(100% / 16) * 3;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-xl-4 {
   width: calc(100% / 16) * 4;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-xl-5 {
   width: calc(100% / 16) * 5;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-xl-6 {
   width: calc(100% / 16) * 6;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-xl-7 {
   width: calc(100% / 16) * 7;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-xl-8 {
   width: calc(100% / 16) * 8;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-xl-9 {
   width: calc(100% / 16) * 9;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-xl-10 {
   width: calc(100% / 16) * 10;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-xl-11 {
   width: calc(100% / 16) * 11;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-xl-12 {
   width: calc(100% / 16) * 12;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-xl-13 {
   width: calc(100% / 16) * 13;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-xl-14 {
   width: calc(100% / 16) * 14;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-xl-15 {
   width: calc(100% / 16) * 15;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-xl-16 {
   width: calc(100% / 16) * 16;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }

package/src/lib/styles/foundations/spacing/_spacing.scss

@@ -16,6 +16,7 @@ $spacing-values: (
 @each $scss-type in $scss-types {
   @each $size in $spacing-sizes {
     @each $spacing-type in $spacing-types {
+      //.gravity-{{padding,margin}}-{{top,bottom,left,right,block,inline}}-{{xs,sm,md,lg,xl,xxl,xxxl,xxxxl}}
       .gravity-#{$scss-type}#{$spacing-type}-#{$size} {
         #{$scss-type}#{$spacing-type}: map-get($spacing-values, $size);
       }