@progressio_resources/gravity-design-system 3.0.11 → 3.0.13

package/src/lib/assets/json/icons.json

@@ -288,6 +288,22 @@
       "iconName": "gt-icon-chevron-double-up-xl-32",
       "iconPath": "/assets/gravity/icon-set/gt-icon-chevron-double-up/gt-icon-chevron-double-up-xl-32.svg"
     },
+    {
+      "iconName": "gt-icon-clock-lg-24",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-clock/gt-icon-clock-lg-24.svg"
+    },
+    {
+      "iconName": "gt-icon-clock-md-16",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-clock/gt-icon-clock-md-16.svg"
+    },
+    {
+      "iconName": "gt-icon-clock-sm-12",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-clock/gt-icon-clock-sm-12.svg"
+    },
+    {
+      "iconName": "gt-icon-clock-xl-32",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-clock/gt-icon-clock-xl-32.svg"
+    },
     {
       "iconName": "gt-icon-copy-lg-24",
       "iconPath": "/assets/gravity/icon-set/gt-icon-copy/gt-icon-copy-lg-24.svg"
@@ -608,6 +624,22 @@
       "iconName": "gt-icon-question-circle-xl-32",
       "iconPath": "/assets/gravity/icon-set/gt-icon-question-circle/gt-icon-question-circle-xl-32.svg"
     },
+    {
+      "iconName": "gt-icon-queue-lg-24",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-queue/gt-icon-queue-lg-24.svg"
+    },
+    {
+      "iconName": "gt-icon-queue-md-16",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-queue/gt-icon-queue-md-16.svg"
+    },
+    {
+      "iconName": "gt-icon-queue-sm-12",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-queue/gt-icon-queue-sm-12.svg"
+    },
+    {
+      "iconName": "gt-icon-queue-xl-32",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-queue/gt-icon-queue-xl-32.svg"
+    },
     {
       "iconName": "gt-icon-rates-lg-24",
       "iconPath": "/assets/gravity/icon-set/gt-icon-rates/gt-icon-rates-lg-24.svg"

package/src/lib/styles/foundations/colors/themes/_hero.theme.scss

@@ -90,6 +90,12 @@ $bg-button-pressed-alternative-light: $o300;
 $on-bg-button-pressed-alternative-dark: $o100;
 $bg-button-pressed-alternative-dark: $o300;
 
+// button-neutral
+$on-bg-button-active-neutro-light: $n400;
+$bg-button-active-neutro-light: $n800;
+$on-bg-button-active-neutro-dark: $n800;
+$bg-button-active-neutro-dark: $n200;
+
 // disabled-status
 $on-bg-disabled-light: $n600;
 $bg-disabled-light: $n800;
@@ -101,8 +107,10 @@ $outline-disabled-dark: $n500;
 // surface
 $surface-primary-light: $n800;
 $surface-secondary-light: $n900;
+$surface-tertiary-light: $n600;
 $surface-primary-dark: $n200;
 $surface-secondary-dark: $n100;
+$surface-tertiary-dark: $n100;
 
 // text
 $text-primary-light: $n400;
@@ -397,14 +405,14 @@ $on-bg-icon-dialog-primary-dark: $n300;
 $bg-icon-dialog-primary-dark: $n800;
 
 // link
-$link-active-primary-light: $b400;
-$link-hover-primary-light: $b400;
-$bg-link-hover-primary-light: $b800;
+$link-active-primary-light: $b500;
+$link-hover-primary-light: $b800;
+$bg-link-hover-primary-light: $b400;
 $link-disabled-primary-light: $n600;
 $link-visited-primary-light: $b200;
-$link-active-primary-dark: $b700;
-$link-hover-primary-dark: $b700;
-$bg-link-hover-primary-dark: $n300;
+$link-active-primary-dark: $b800;
+$link-hover-primary-dark: $n300;
+$bg-link-hover-primary-dark: $n700;
 $link-disabled-primary-dark: $n500;
 $link-visited-primary-dark: $n900;
 
@@ -520,6 +528,20 @@ $bg-icon-button-pressed-dark: $n300;
 $on-bg-icon-button-disabled-light: $n700;
 $on-bg-icon-button-disabled-dark: $n400;
 
+// generic-avatar
+$cl-generic-avatar-label-primary-light: $n400;
+$cl-generic-avatar-label-primary-dark: $n800;
+$cl-generic-avatar-label-disabled-light: $n600;
+$cl-generic-avatar-label-disabled-dark: $n500;
+$bg-generic-avatar-initials-primary-light: $n400;
+$bg-generic-avatar-initials-primary-dark: $n800;
+$bg-generic-avatar-initials-disabled-light: $n800;
+$bg-generic-avatar-initials-disabled-dark: $n200;
+$cl-generic-avatar-initials-text-primary-light: $n900;
+$cl-generic-avatar-initials-text-primary-dark: $n500;
+$cl-generic-avatar-initials-text-disabled-light: $n600;
+$cl-generic-avatar-initials-text-disabled-dark: $n500;
+
 // currencies
 $on-bg-currency: $c1;
 $btc-primary-light: $c10;

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

@@ -53,6 +53,10 @@
   --on-bg-button-pressed-alternative: #{$on-bg-button-pressed-alternative-light};
   --bg-button-pressed-alternative: #{$bg-button-pressed-alternative-light};
 
+  // button-neutral
+  --on-bg-button-active-neutro: #{$on-bg-button-active-neutro-light};
+  --bg-button-active-neutro: #{$bg-button-active-neutro-light};
+
   // disabled-status
   --on-bg-disabled: #{$on-bg-disabled-light};
   --bg-disabled: #{$bg-disabled-light};
@@ -61,6 +65,8 @@
   // surface
   --surface-primary: #{$surface-primary-light};
   --surface-secondary: #{$surface-secondary-light};
+  --surface-tertiary: #{$surface-tertiary-light};
+  --surface-opacity: .25;
 
   // text
   --text-primary: #{$text-primary-light};
@@ -293,6 +299,14 @@
   --bg-icon-button-pressed: #{$bg-icon-button-pressed-light};
   --on-bg-icon-button-disabled: #{$on-bg-icon-button-disabled-light};
 
+  // generic-avatar
+  --cl-generic-avatar-label-primary: #{$cl-generic-avatar-label-primary-light};
+  --cl-generic-avatar-label-disabled: #{$cl-generic-avatar-label-disabled-light};
+  --bg-generic-avatar-initials-primary: #{$bg-generic-avatar-initials-primary-light};
+  --bg-generic-avatar-initials-disabled: #{$bg-generic-avatar-initials-disabled-light};
+  --cl-generic-avatar-initial-text-primary: #{$cl-generic-avatar-initials-text-primary-light};
+  --cl-generic-avatar-initial-text-disabled: #{$cl-generic-avatar-initials-text-disabled-light};
+
   // Currencies 
   --btc-primary: #{$btc-primary-light};
   --busd-primary: #{$busd-primary-light};
@@ -382,6 +396,10 @@
   --on-bg-button-pressed-alternative: #{$on-bg-button-pressed-alternative-dark};
   --bg-button-pressed-alternative: #{$bg-button-pressed-alternative-dark};
 
+  // button-neutral
+  --on-bg-button-active-neutro: #{$on-bg-button-active-neutro-dark};
+  --bg-button-active-neutro: #{$bg-button-active-neutro-dark};
+
   // disabled-status
   --on-bg-disabled: #{$on-bg-disabled-dark};
   --bg-disabled: #{$bg-disabled-dark};
@@ -390,6 +408,8 @@
   // surface
   --surface-primary: #{$surface-primary-dark};
   --surface-secondary: #{$surface-secondary-dark};
+  --surface-tertiary: #{$surface-tertiary-dark};
+  --surface-opacity: .6;
 
   // text
   --text-primary: #{$text-primary-dark};
@@ -622,6 +642,14 @@
   --bg-icon-button-pressed: #{$bg-icon-button-pressed-dark};
   --on-bg-icon-button-disabled: #{$on-bg-icon-button-disabled-dark};
 
+  // generic-avatar
+  --cl-generic-avatar-label-primary: #{$cl-generic-avatar-label-primary-dark};
+  --cl-generic-avatar-label-disabled: #{$cl-generic-avatar-label-disabled-dark};
+  --bg-generic-avatar-initials-primary: #{$bg-generic-avatar-initials-primary-dark};
+  --bg-generic-avatar-initials-disabled: #{$bg-generic-avatar-initials-disabled-dark};
+  --cl-generic-avatar-initial-text-primary: #{$cl-generic-avatar-initials-text-primary-dark};
+  --cl-generic-avatar-initial-text-disabled: #{$cl-generic-avatar-initials-text-disabled-dark};
+
   // Currencies
   --btc-primary: #{$c10};
   --busd-primary: #{$busd-primary-dark};

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

@@ -1,24 +1,31 @@
 $scss-types: padding, margin;
-$spacing-sizes: none, xxs, xs, sm, md, lg, xl, xxl, xxxl, xxxxl;
+$spacing-sizes: none, xxs, xs, sm, md, lg, xl, xxl, xxxl, xxxxl, xxxxxl;
 $spacing-types: '', -top, -bottom, -left, -right, -block, -inline;
 
 $spacing-values: (
-  none: 0,
-  xxs: 0.25rem,
-  xs: 0.5rem,
-  sm: 1rem,
-  md: 1.5rem,
-  lg: 2rem,
-  xl: 3rem,
-  xxl: 4rem,
-  xxxl: 6rem,
-  xxxxl: 12rem
+  none: 0,        // 0px
+  xxs: 0.25rem,   // 4px
+  xs: 0.5rem,     // 8px
+  sm: 1rem,       // 16px
+  md: 1.5rem,     // 24px
+  lg: 2rem,       // 32px
+  xl: 2.5rem,     // 40px
+  xxl: 3rem,      // 48px
+  xxxl: 4rem,     // 64px
+  xxxxl: 6rem,    // 96px
+  xxxxxl: 12rem   // 192px
 );
 
+:root {
+  @each $key, $value in $spacing-values {
+    --gravity-spacing-#{$key}: #{$value};
+  }
+}
+
 @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}}-{{xxs, xs,sm,md,lg,xl,xxl,xxxl,xxxxl}}
+      //.gravity-{{padding,margin}}-{{top,bottom,left,right,block,inline}}-{{xxs, xs, sm, md, lg, xl, xxl, xxxl, xxxxl, xxxxxl}}
       .gravity-#{$scss-type}#{$spacing-type}-#{$size} {
         #{$scss-type}#{$spacing-type}: map-get($spacing-values, $size) !important;
       }

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

@@ -121,7 +121,7 @@ $modal-margin: 3.5rem;
 }
 
 .modal-backdrop {
-  background-color: var(--surface-secondary);
+  background-color: var(--surface-tertiary);
   height: 100vh;
   left: 0;
   position: fixed;
@@ -133,7 +133,7 @@ $modal-margin: 3.5rem;
   }
 
   &.show {
-    opacity: .6;
+    opacity: var(--surface-opacity);
   }
 }
 

package/src/lib/assets/icon-set/gt-icon-security/gt-icon-security-sm-12.svg

@@ -1,3 +0,0 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.62052 0.945869C4.12491 0.945869 3.72314 1.34001 3.72314 1.82621V4.2111H8.27686V1.82621C8.27686 1.34001 7.87509 0.945869 7.37948 0.945869H4.62052ZM4.62052 0C3.59241 0 2.75895 0.817623 2.75895 1.82621V4.2111H0.482091C0.215839 4.2111 0 4.42284 0 4.68403V11.5271C0 11.7883 0.215839 12 0.482091 12H11.5179C11.7842 12 12 11.7883 12 11.5271V4.68403C12 4.42284 11.7842 4.2111 11.5179 4.2111H9.24105V1.82621C9.24105 0.817623 8.40759 0 7.37948 0H4.62052ZM0.964182 5.15697V11.0541H11.0358V5.15697H0.964182Z" fill="var(--icon-color, #394C6E)"/>
-</svg>