@corto-ai/gds-angular 2.1.5 → 2.1.6-dev.1

package/assets/css/corto.css

@@ -179,6 +179,7 @@
     --corto-primitive-green-300: 139, 208, 180;
     --corto-primitive-green-500: 62, 177, 129;
     --corto-primitive-green-700: 36, 105, 77;
+    --corto-primitive-green-800: 24, 71, 52;
     --corto-primitive-grey-0: 255, 255, 255;
     --corto-primitive-grey-50: 245, 245, 245;
     --corto-primitive-grey-100: 229, 229, 229;
@@ -227,7 +228,6 @@
     --corto-primitive-pink-50: 250, 229, 242;
     --corto-primitive-pink-500: 204, 1, 127;
     --gds-primitive-fontFamily-sansSerif: 'Satoshi', 'Helvetica', 'Arial', sans-serif;
-    --gds-primitive-fontFamily-inter: 'Inter', 'Helvetica', 'Arial', sans-serif;
     --gds-primitive-fontWeight-light: 400;
     --gds-primitive-fontWeight-medium: 500;
     --gds-primitive-fontWeight-bold: 700;
@@ -362,7 +362,6 @@
     --gds-borderRadius-3xl: var(--gds-primitive-size-900);
     --gds-borderRadius-pill: 999px;
     --gds-fontFamily-body: var(--gds-primitive-fontFamily-sansSerif);
-    --gds-fontFamily-inputMobile: var(--gds-primitive-fontFamily-inter);
     --gds-fontSize-display: var(--gds-primitive-fontSize-700);
     --gds-fontSize-titleLarge: var(--gds-primitive-fontSize-600);
     --gds-fontSize-title: var(--gds-primitive-fontSize-500);
@@ -484,10 +483,10 @@
     --gds-palette-accent-green-inverse: rgb(var(--corto-primitive-green-500));
     --gds-palette-accent-blue-default: rgb(var(--corto-primitive-blue-50));
     --gds-palette-accent-blue-inverse: rgb(var(--corto-primitive-blue-500));
-    --gds-pattern-toast-default-backgroundColor-rest: rgb(237, 237, 238);
-    --gds-pattern-toast-default-iconColor-rest: rgb(var(--corto-primitive-blue-500));
-    --gds-pattern-toast-default-btnColor-rest: rgb(var(--corto-primitive-blue-500));
-    --gds-pattern-toast-default-btnColor-hover: rgb(var(--corto-primitive-blue-300));
+    --gds-pattern-toast-default-backgroundColor-rest: var(--gds-palette-accent-primary-inverse);
+    --gds-pattern-toast-default-iconColor-rest: var(--gds-palette-button-primary-default);
+    --gds-pattern-toast-default-btnColor-rest: var(--gds-palette-button-primary-default);
+    --gds-pattern-toast-default-btnColor-hover: var(--gds-palette-button-primary-hover);
     --gds-pattern-toast-error-btnColor-rest: rgb(var(--corto-primitive-red-500));
     --gds-pattern-toast-error-btnColor-hover: rgb(var(--corto-primitive-red-300));
     --gds-pattern-toast-warning-btnColor-rest: rgb(var(--corto-primitive-orange-500));
@@ -560,7 +559,7 @@
     --gds-text-input-shorthand: var(--gds-fontWeight-body) var(--gds-fontSize-body) / var(--gds-lineHeight-input)
       var(--gds-fontFamily-body);
     --gds-text-inputMobile-shorthand: var(--gds-fontWeight-inputMobile) var(--gds-fontSize-inputMobile) /
-      var(--gds-lineHeight-input) var(--gds-fontFamily-inputMobile);
+      var(--gds-lineHeight-input) var(--gds-fontFamily-body);
     --gds-border-default-shorthand: var(--gds-borderWidth-sm) solid var(--gds-palette-border-default);
     --gds-border-default-selected-shorthand: var(--gds-borderWidth-sm) solid var(--gds-palette-border-selected);
     --gds-border-strong-shorthand: var(--gds-borderWidth-md) solid var(--gds-palette-border-default);
@@ -568,6 +567,7 @@
     --gds-shadow-default: 0px 8px 16px rgba(0, 0, 0, 0.14);
     --gds-shadow-element: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
     --gds-shadow-card: 0px 2px 4px 0px rgba(0, 0, 0, 0.14), 0px 0px 2px 0px rgba(0, 0, 0, 0.12);
+    --gds-shadow-tooltip: 0 4px 8px 0 rgba(0, 0, 0, 0.14);
   }
   body [brand="corto dark"], body[brand="corto dark"] {
     --gds-palette-border-default: rgb(var(--corto-primitive-grey-400));
@@ -927,6 +927,11 @@
   .gds-cdk-overlay--scaleOutBoxShadow {
     animation: boxShadowBottomRight 0s ease 0s 1 reverse forwards;
   }
+  .cdk-overlay-pane.gds-toast-overlay-pane {
+    max-width: none !important;
+    transform: none !important;
+    pointer-events: none !important;
+  }
   @keyframes boxShadowBottomRight {
     0% {
       opacity: 0;
@@ -997,6 +1002,31 @@
     top: 0;
     margin-bottom: -1px;
   }
+  .ng-dropdown-panel .ng-option {
+    display: flex !important;
+    gap: var(--gds-spacing-3xs);
+    padding: 11px var(--gds-spacing-sm);
+    border-radius: var(--gds-borderRadius-sm);
+    color: var(--gds-palette-text-default-primary);
+    position: relative;
+  }
+  .ng-dropdown-panel .ng-option.ng-option-marked::before {
+    content: "";
+    position: absolute;
+    border-radius: var(--gds-borderRadius-sm);
+    width: calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));
+    height: calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));
+    top: var(--wrapper-margin-block, var(--wrapper-margin, 0px));
+    left: var(--wrapper-margin-inline, var(--wrapper-margin, 0px));
+    background: var(--gds-palette-background-hover);
+    pointer-events: none;
+    --wrapper-margin-inline: 5px;
+    --wrapper-margin-block: 4px;
+    z-index: -1;
+  }
+  .ng-dropdown-panel .ng-option.ng-option-disabled {
+    cursor: default !important;
+  }
   .scroll-host::-webkit-scrollbar {
     width: 10px;
   }
@@ -1167,13 +1197,6 @@
     font-display: swap;
     font-style: italic;
   }
-  @font-face {
-    font-family: "Inter";
-    src: url("../fonts/Inter-VariableFont.ttf") format("truetype");
-    font-weight: 400;
-    font-display: swap;
-    font-style: normal;
-  }
   @-webkit-keyframes shimmer {
     0% {
       background-position: 100% 0;
@@ -1491,6 +1514,9 @@
   .gds-shadow-card {
     box-shadow: var(--gds-shadow-card);
   }
+  .gds-shadow-tooltip {
+    box-shadow: var(--gds-shadow-tooltip);
+  }
   .gds-shadow-none {
     box-shadow: none;
   }
@@ -1531,6 +1557,9 @@
     .gds-responsive-xl-shadow-card {
       box-shadow: var(--gds-shadow-card);
     }
+    .gds-responsive-xl-shadow-tooltip {
+      box-shadow: var(--gds-shadow-tooltip);
+    }
     .gds-responsive-xl-shadow-none {
       box-shadow: none;
     }
@@ -1572,6 +1601,9 @@
     .gds-responsive-lg-shadow-card {
       box-shadow: var(--gds-shadow-card);
     }
+    .gds-responsive-lg-shadow-tooltip {
+      box-shadow: var(--gds-shadow-tooltip);
+    }
     .gds-responsive-lg-shadow-none {
       box-shadow: none;
     }
@@ -1613,6 +1645,9 @@
     .gds-responsive-md-shadow-card {
       box-shadow: var(--gds-shadow-card);
     }
+    .gds-responsive-md-shadow-tooltip {
+      box-shadow: var(--gds-shadow-tooltip);
+    }
     .gds-responsive-md-shadow-none {
       box-shadow: none;
     }
@@ -1654,6 +1689,9 @@
     .gds-responsive-sm-shadow-card {
       box-shadow: var(--gds-shadow-card);
     }
+    .gds-responsive-sm-shadow-tooltip {
+      box-shadow: var(--gds-shadow-tooltip);
+    }
     .gds-responsive-sm-shadow-none {
       box-shadow: none;
     }
@@ -1694,6 +1732,9 @@
   body[isMobile=true] .gds-mobile-shadow-card {
     box-shadow: var(--gds-shadow-card);
   }
+  body[isMobile=true] .gds-mobile-shadow-tooltip {
+    box-shadow: var(--gds-shadow-tooltip);
+  }
   body[isMobile=true] .gds-mobile-shadow-none {
     box-shadow: none;
   }
@@ -3687,6 +3728,12 @@
     outline: 0;
     box-shadow: 0px 0px 0px 2px #444;
   }
+  .gds-outline-focus-visible:focus-visible {
+    outline-width: 2px;
+    outline-style: solid;
+    outline-color: var(--gds-neutral-700);
+    outline-offset: 1px;
+  }
   .gds-outline-none {
     outline: none;
   }
@@ -4504,6 +4551,9 @@
   .gds-z-index-1 {
     z-index: 1;
   }
+  .gds-z-index-2 {
+    z-index: 2;
+  }
   @media (max-width: 1440px) {
     .gds-responsive-xl-position-static {
       position: static;
@@ -4847,6 +4897,9 @@
     .gds-responsive-xl-z-index-1 {
       z-index: 1;
     }
+    .gds-responsive-xl-z-index-2 {
+      z-index: 2;
+    }
   }
   @media (max-width: 1200px) {
     .gds-responsive-lg-position-static {
@@ -5191,6 +5244,9 @@
     .gds-responsive-lg-z-index-1 {
       z-index: 1;
     }
+    .gds-responsive-lg-z-index-2 {
+      z-index: 2;
+    }
   }
   @media (max-width: 900px) {
     .gds-responsive-md-position-static {
@@ -5535,6 +5591,9 @@
     .gds-responsive-md-z-index-1 {
       z-index: 1;
     }
+    .gds-responsive-md-z-index-2 {
+      z-index: 2;
+    }
   }
   @media (max-width: 600px) {
     .gds-responsive-sm-position-static {
@@ -5879,6 +5938,9 @@
     .gds-responsive-sm-z-index-1 {
       z-index: 1;
     }
+    .gds-responsive-sm-z-index-2 {
+      z-index: 2;
+    }
   }
   body[isMobile=true] .gds-mobile-position-static {
     position: static;
@@ -6222,6 +6284,9 @@
   body[isMobile=true] .gds-mobile-z-index-1 {
     z-index: 1;
   }
+  body[isMobile=true] .gds-mobile-z-index-2 {
+    z-index: 2;
+  }
   /* export scrollbar width of scrollbar-width: thin style */
   /*
     The Mac Word add-in does not support scrollbar-gutter: stable
@@ -18940,158 +19005,6 @@
   body[isMobile=true] .gds-mobile-line-height-3xl {
     line-height: var(--gds-primitive-lineHeight-700);
   }
-  .cdk-overlay-pane.gds-toast-overlay-pane {
-    max-width: none !important;
-    transform: none !important;
-    pointer-events: none !important;
-  }
-  .toast-container {
-    pointer-events: none;
-    position: fixed;
-    z-index: 999999;
-    display: flex;
-    flex-direction: column;
-    gap: var(--gds-spacing-2xs);
-    bottom: 0;
-    right: 0;
-    left: auto;
-    top: auto;
-    align-items: flex-end;
-    margin: var(--gds-spacing-2xs);
-    width: calc(100% - 2 * var(--gds-spacing-2xs));
-  }
-  .toast-container > * {
-    pointer-events: auto;
-    max-width: 100%;
-  }
-  .toast-top-left {
-    inset: 0 auto auto 0;
-    align-items: flex-start;
-  }
-  .toast-top-right {
-    inset: 0 0 auto auto;
-    align-items: flex-end;
-  }
-  .toast-bottom-left {
-    inset: auto auto 0 0;
-    align-items: flex-start;
-  }
-  .toast-top-center {
-    inset: 0 auto auto auto;
-    align-items: center;
-  }
-  .toast-bottom-center {
-    inset: auto auto 0 auto;
-    align-items: center;
-  }
-  @media (max-width: 1440px) {
-    .toast-responsive-xl-top-left {
-      inset: 0 auto auto 0;
-      align-items: flex-start;
-    }
-    .toast-responsive-xl-top-right {
-      inset: 0 0 auto auto;
-      align-items: flex-end;
-    }
-    .toast-responsive-xl-bottom-left {
-      inset: auto auto 0 0;
-      align-items: flex-start;
-    }
-    .toast-responsive-xl-top-center {
-      inset: 0 auto auto auto;
-      align-items: center;
-    }
-    .toast-responsive-xl-bottom-center {
-      inset: auto auto 0 auto;
-      align-items: center;
-    }
-  }
-  @media (max-width: 1200px) {
-    .toast-responsive-lg-top-left {
-      inset: 0 auto auto 0;
-      align-items: flex-start;
-    }
-    .toast-responsive-lg-top-right {
-      inset: 0 0 auto auto;
-      align-items: flex-end;
-    }
-    .toast-responsive-lg-bottom-left {
-      inset: auto auto 0 0;
-      align-items: flex-start;
-    }
-    .toast-responsive-lg-top-center {
-      inset: 0 auto auto auto;
-      align-items: center;
-    }
-    .toast-responsive-lg-bottom-center {
-      inset: auto auto 0 auto;
-      align-items: center;
-    }
-  }
-  @media (max-width: 900px) {
-    .toast-responsive-md-top-left {
-      inset: 0 auto auto 0;
-      align-items: flex-start;
-    }
-    .toast-responsive-md-top-right {
-      inset: 0 0 auto auto;
-      align-items: flex-end;
-    }
-    .toast-responsive-md-bottom-left {
-      inset: auto auto 0 0;
-      align-items: flex-start;
-    }
-    .toast-responsive-md-top-center {
-      inset: 0 auto auto auto;
-      align-items: center;
-    }
-    .toast-responsive-md-bottom-center {
-      inset: auto auto 0 auto;
-      align-items: center;
-    }
-  }
-  @media (max-width: 600px) {
-    .toast-responsive-sm-top-left {
-      inset: 0 auto auto 0;
-      align-items: flex-start;
-    }
-    .toast-responsive-sm-top-right {
-      inset: 0 0 auto auto;
-      align-items: flex-end;
-    }
-    .toast-responsive-sm-bottom-left {
-      inset: auto auto 0 0;
-      align-items: flex-start;
-    }
-    .toast-responsive-sm-top-center {
-      inset: 0 auto auto auto;
-      align-items: center;
-    }
-    .toast-responsive-sm-bottom-center {
-      inset: auto auto 0 auto;
-      align-items: center;
-    }
-  }
-  body[isMobile=true] .toast-mobile-top-left {
-    inset: 0 auto auto 0;
-    align-items: flex-start;
-  }
-  body[isMobile=true] .toast-mobile-top-right {
-    inset: 0 0 auto auto;
-    align-items: flex-end;
-  }
-  body[isMobile=true] .toast-mobile-bottom-left {
-    inset: auto auto 0 0;
-    align-items: flex-start;
-  }
-  body[isMobile=true] .toast-mobile-top-center {
-    inset: 0 auto auto auto;
-    align-items: center;
-  }
-  body[isMobile=true] .toast-mobile-bottom-center {
-    inset: auto auto 0 auto;
-    align-items: center;
-  }
   .gds-sr-only {
     border: 0;
     clip: rect(0 0 0 0);