@progressio_resources/gravity-design-system 1.1.12 → 1.1.13

package/package.json

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

package/src/lib/styles/_responsive.scss

@@ -0,0 +1,61 @@
+@import "./fundamentals/breakpoints/breakpoints";
+
+.hide-xl {
+  @media (max-width: map-get($breakpoints, xl)) {
+    display: none;
+  }
+}
+
+.hide-lg {
+  @media (max-width: map-get($breakpoints, lg)) {
+    display: none;
+  }
+}
+
+.hide-md {
+  @media (max-width: map-get($breakpoints, md)) {
+    display: none;
+  }
+}
+
+.hide-sm {
+  @media (max-width: map-get($breakpoints, sm)) {
+    display: none;
+  }
+}
+
+.hide-xs {
+  @media (max-width: map-get($breakpoints, xs)) {
+    display: none;
+  }
+}
+
+.show-xl {
+  @media (min-width: map-get($breakpoints, xl) + 1) {
+    display: none;
+  }
+}
+
+.show-lg {
+  @media (min-width: map-get($breakpoints, lg) + 1) {
+    display: none;
+  }
+}
+
+.show-md {
+  @media (min-width: map-get($breakpoints, md) + 1) {
+    display: none;
+  }
+}
+
+.show-sm {
+  @media (min-width: map-get($breakpoints, sm) + 1) {
+    display: none;
+  }
+}
+
+.show-xs {
+  @media (min-width: map-get($breakpoints, xs) + 1) {
+    display: none;
+  }
+}

package/src/lib/styles/_shared.scss

@@ -1,4 +1,3 @@
-$border-radius-system: 0.625rem;
 $input-height: 3rem;
 
 .text-negative {

package/src/lib/styles/{_card_highlight.scss → components/_card_highlight.scss}

@@ -1,12 +1,13 @@
-@import "fundamentals/typography/hero.typography";
-@import "shared";
+@import "../fundamentals/typography/hero.typography";
+@import "../fundamentals/border-radius/hero.border-radius";
+@import "src/lib/styles/shared";
 
 .gravity-card-highlight {
   @extend .hr-body-text, .md-regular;
 
   background-color: var(--surface-primary);
   border-left: 1.25rem solid var(--bg-highlight-neutro-secondary);
-  border-radius: $border-radius-system;
+  border-radius: $border-radius-md;
   color: var(--text-primary);
   padding: 1.5rem;
 
@@ -23,7 +24,7 @@
 
     &.gravity-card-content {
       border: 1px solid var(--divider-primary);
-      border-radius: $border-radius-system;
+      border-radius: $border-radius-md;
       margin-top: 1rem;
     }
 

package/src/lib/styles/{_datepicker.scss → components/_datepicker.scss}

@@ -1,16 +1,17 @@
-@import "./fundamentals/typography/hero.typography";
-@import "shared";
+@import "../fundamentals/typography/hero.typography";
+@import "../fundamentals/border-radius/hero.border-radius";
+@import "src/lib/styles/shared";
 
 ngb-datepicker.gravity-datepicker-dialog {
   background-color: var(--bg-calender-primary);
-  border-radius: $border-radius-system;
+  border-radius: $border-radius-md;
   box-shadow: 0 0 10px #AAA;
   color: var(--on-bg-calender-primary);
 
   .ngb-dp-header {
     background-color: var(--bg-calendar-nav-primary);
-    border-top-left-radius: $border-radius-system;
-    border-top-right-radius: $border-radius-system;
+    border-top-left-radius: $border-radius-md;
+    border-top-right-radius: $border-radius-md;
     color: var(--on-bg-calendar-nav-primary);
     height: 3.125rem;
     min-width: 17.75rem;

package/src/lib/styles/fundamentals/border-radius/_hero.border-radius.scss

@@ -0,0 +1,40 @@
+$border-radius-none: 0;
+$border-radius-xs: 0.0625rem; //1px
+$border-radius-sm: 0.3125rem; //5px
+$border-radius-md: 0.625rem; //10px
+$border-radius-lg: 0.9375rem; //16px
+$border-radius-xl: 1.25rem; //20px
+$border-radius-xxl: 2rem; //32px
+$border-radius-rounded: 50%;
+
+.border-radius-none {
+  border-radius: $border-radius-none;
+}
+
+.border-radius-xs {
+  border-radius: $border-radius-xs;
+}
+
+.border-radius-sm {
+  border-radius: $border-radius-sm;
+}
+
+.border-radius-md {
+  border-radius: $border-radius-md;
+}
+
+.border-radius-lg {
+  border-radius: $border-radius-lg;
+}
+
+.border-radius-xl {
+  border-radius: $border-radius-xl;
+}
+
+.border-radius-xxl {
+  border-radius: $border-radius-xxl;
+}
+
+.border-radius-rounded {
+  border-radius: $border-radius-rounded;
+}

package/src/lib/styles/fundamentals/breakpoints/breakpoints.scss

@@ -0,0 +1,7 @@
+$breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 992px,
+  lg: 1440px,
+  xl: 1920px
+);

package/src/lib/styles/fundamentals/grids/grids.scss

@@ -0,0 +1,6 @@
+$grids: (
+  sm: 4,
+  md: 6,
+  lg: 12,
+  xl: 16
+);

package/src/lib/styles/fundamentals/spacing/spacing.scss

@@ -0,0 +1,24 @@
+$scss-types: padding, margin;
+$spacing-sizes: xs, sm, md, lg, xl, xxl, xxxl, xxxxl;
+$spacing-types: '', -top, -bottom, -left, -right, -block, -inline;
+
+$spacing-values: (
+  xs: 8px,
+  sm: 16px,
+  md: 24px,
+  lg: 32px,
+  xl: 48px,
+  xxl: 64px,
+  xxxl: 96px,
+  xxxxl: 192px
+);
+
+@each $scss-type in $scss-types {
+  @each $size in $spacing-sizes {
+    @each $spacing-type in $spacing-types {
+      .gravity-#{$scss-type}#{$spacing-type}-#{$size} {
+        #{$scss-type}#{$spacing-type}: map-get($spacing-values, $size);
+      }
+    }
+  }
+}

package/src/lib/styles/gravity-design-system.scss

@@ -1,7 +1,9 @@
+@import "./fundamentals/border-radius/hero.border-radius";
 @import "./fundamentals/colors/tokens/hero.tokens";
+@import "./fundamentals/spacing/spacing";
 @import "./fundamentals/typography/hero.typography";
 @import "./overwrite/bootstrap/bootstrap-export";
 @import "./overwrite/pretty-checkbox/pretty-checkbox.scss";
-@import "./card_highlight";
-@import "./datepicker";
-@import "./link";
+@import "components/card_highlight";
+@import "components/datepicker";
+@import "components/link";

package/src/lib/styles/overwrite/bootstrap/_modal.scss

@@ -1,4 +1,4 @@
-@import "../../shared";
+@import "../../fundamentals/border-radius/hero.border-radius";
 
 $modal-margin: 3.5rem;
 
@@ -87,7 +87,7 @@ $modal-margin: 3.5rem;
 
   background-clip: padding-box;
   background-color: var(--dialog-background-color);
-  border-radius: $border-radius-system;
+  border-radius: $border-radius-md;
   box-shadow: 0 27px 34px #000c208f;
   color: var(--dialog-text-color);
   display: flex;