@vsn-ux/gaia-styles 0.5.5 → 0.5.7

package/dist/all-10pt.css

@@ -36,8 +36,8 @@
   --ga-color-icon-on-action: var(--ga-color-secondary);
   --ga-color-icon-on-disabled: var(--ga-color-neutral-60);
   --ga-color-icon-on-primary: var(--ga-color-white);
-  --ga-color-icon-pictograms-pictogram-emphasis: var(--ga-color-neutral);
-  --ga-color-icon-pictograms-pictogram-fill: var(--ga-color-neutral);
+  --ga-color-icon-pictograms-pictogram-emphasis: #377ea03d;
+  --ga-color-icon-pictograms-pictogram-fill: #b9b9b914;
   --ga-color-icon-primary: var(--ga-color-primary-90);
   --ga-color-icon-success: var(--ga-color-success);
   --ga-color-icon-warning: var(--ga-color-warning);
@@ -423,46 +423,93 @@
       --tw-font-weight: 500;
       font-weight: 500;
       white-space: nowrap;
+      &.ga-badge--default {
+        background-color: var(--ga-color-surface-action);
+        color: var(--ga-color-text-on-action);
+      }
+      &.ga-badge--default-inverted {
+        background-color: var(--ga-color-icon-on-action);
+        color: var(--ga-color-text-information);
+      }
+      &.ga-badge--muted {
+        background-color: var(--ga-color-icon-on-primary);
+        color: var(--ga-color-text-action);
+      }
+      &.ga-badge--information {
+        background-color: var(--ga-color-utility-blue-light);
+        color: var(--ga-color-text-information);
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+        --tw-ring-color: var(--ga-color-border-information);
+        --tw-ring-inset: inset;
+      }
+      &.ga-badge--error {
+        background-color: var(--ga-color-utility-red-light);
+        color: var(--ga-color-text-error);
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+        --tw-ring-color: var(--ga-color-border-error);
+        --tw-ring-inset: inset;
+      }
+      &.ga-badge--warning {
+        background-color: var(--ga-color-utility-orange-light);
+        color: var(--ga-color-text-warning);
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+        --tw-ring-color: var(--ga-color-border-warning);
+        --tw-ring-inset: inset;
+      }
+      &.ga-badge--success {
+        background-color: var(--ga-color-utility-green-light);
+        color: var(--ga-color-text-success);
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+        --tw-ring-color: var(--ga-color-border-success);
+        --tw-ring-inset: inset;
+      }
+      &.ga-badge--disabled {
+        background-color: var(--ga-color-surface-disabled);
+        color: var(--ga-color-text-disable-selected);
+      }
+      &.ga-badge--disabled-inverted {
+        background-color: var(--ga-color-icon-pictograms-pictogram-fill);
+        color: var(--ga-color-text-disabled);
+      }
     }
     &.ga-badge--dot {
       height: calc(0.4rem * 2);
       width: calc(0.4rem * 2);
-    }
-    &.ga-badge--default {
-      background-color: var(--ga-color-surface-action);
-      color: var(--ga-color-text-on-action);
-    }
-    &.ga-badge--default-inverted {
-      background-color: var(--ga-color-orange-20);
-      color: var(--ga-color-cyan-90);
-    }
-    &.ga-badge--information {
-      background-color: var(--ga-color-blue-40);
-      color: var(--ga-color-cyan-90);
-    }
-    &.ga-badge--error {
-      background-color: var(--ga-color-red-40);
-      color: var(--ga-color-cyan-90);
-    }
-    &.ga-badge--warning {
-      background-color: var(--ga-color-orange-40);
-      color: var(--ga-color-cyan-90);
-    }
-    &.ga-badge--success {
-      background-color: var(--ga-color-green-40);
-      color: var(--ga-color-cyan-90);
-    }
-    &.ga-badge--muted {
-      background-color: #fff;
-      color: var(--ga-color-cyan-70);
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-      --tw-ring-color: var(--ga-color-grey-40);
-      --tw-ring-inset: inset;
-    }
-    &.ga-badge--disabled {
-      background-color: var(--ga-color-surface-disabled);
-      color: var(--ga-color-text);
+      &.ga-badge--default {
+        background-color: var(--ga-color-surface-action);
+      }
+      &.ga-badge--default-inverted {
+        background-color: var(--ga-color-icon-on-action);
+      }
+      &.ga-badge--muted {
+        background-color: var(--ga-color-icon-on-primary);
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+        --tw-ring-color: var(--ga-color-text-disabled);
+        --tw-ring-inset: inset;
+      }
+      &.ga-badge--information {
+        background-color: var(--ga-color-icon-information);
+      }
+      &.ga-badge--error {
+        background-color: var(--ga-color-icon-error);
+      }
+      &.ga-badge--warning {
+        background-color: var(--ga-color-icon-warning);
+      }
+      &.ga-badge--success {
+        background-color: var(--ga-color-icon-success);
+      }
+      &.ga-badge--disabled {
+        background-color: var(--ga-color-icon-on-disabled);
+      }
+      &.ga-badge--disabled-inverted {
+        background-color: var(--ga-color-icon-pictograms-pictogram-fill);
+      }
     }
   }
   .ga-button {
@@ -644,6 +691,264 @@
       background-color: var(--ga-color-surface-success);
     }
   }
+  .ga-calendar {
+    width: calc(0.4rem * 70);
+    background-color: #fff;
+    --tw-numeric-figure: lining-nums;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+    --tw-slashed-zero: slashed-zero;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+    --tw-numeric-spacing: tabular-nums;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+    .ga-calendar__header {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      gap: calc(0.4rem * 1);
+    }
+    .ga-calendar__month-year {
+      display: flex;
+      flex-direction: row;
+      gap: calc(0.4rem * 2);
+    }
+    .ga-calendar__month-year-button {
+      display: flex;
+      cursor: pointer;
+      flex-direction: row;
+      align-items: center;
+      gap: calc(0.4rem * 1);
+      font-size: calc(
+    var(--ga-text-lg-font-size) * var(--ga-base-scaling-factor, 1)
+  );
+      line-height: var(--tw-leading, calc(
+    var(--ga-text-lg-line-height) * var(--ga-base-scaling-factor, 1)
+  ));
+      letter-spacing: var(--tw-tracking, calc(
+    var(--ga-text-lg-tracking) * var(--ga-base-scaling-factor, 1)
+  ));
+      --tw-font-weight: 600;
+      font-weight: 600;
+      color: var(--ga-color-text-action);
+      .ga-icon {
+        color: var(--ga-color-icon-primary);
+      }
+    }
+    .ga-calendar__navigation {
+      display: flex;
+      flex-direction: row;
+      gap: calc(0.4rem * 2);
+    }
+    .ga-calendar__navigation-button {
+      cursor: pointer;
+    }
+    .ga-calendar__week-row {
+      display: flex;
+      flex-direction: row;
+      gap: calc(0.4rem * 4);
+    }
+    .ga-calendar__week-day {
+      width: calc(0.4rem * 6);
+      height: calc(0.4rem * 6);
+    }
+    .ga-calendar__selection {
+      display: grid;
+      &.ga-calendar__selection--year {
+        margin-top: calc(0.4rem * 4);
+        grid-template-columns: repeat(5, minmax(0, 1fr));
+        column-gap: calc(0.4rem * 3);
+        row-gap: calc(0.4rem * 2);
+      }
+      &.ga-calendar__selection--month {
+        margin-top: calc(0.4rem * 4);
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: calc(0.4rem * 3);
+      }
+      &.ga-calendar__selection--day {
+        margin-top: calc(0.4rem * 2);
+        grid-template-columns: repeat(7, minmax(0, 1fr));
+        row-gap: calc(0.4rem * 1);
+      }
+    }
+    .ga-calendar__year, .ga-calendar__month {
+      height: calc(0.4rem * 10);
+      cursor: pointer;
+      border-radius: var(--ga-radius);
+      text-align: center;
+      font-size: calc(
+    var(--ga-text-lg-font-size) * var(--ga-base-scaling-factor, 1)
+  );
+      line-height: var(--tw-leading, calc(
+    var(--ga-text-lg-line-height) * var(--ga-base-scaling-factor, 1)
+  ));
+      letter-spacing: var(--tw-tracking, calc(
+    var(--ga-text-lg-tracking) * var(--ga-base-scaling-factor, 1)
+  ));
+      --tw-leading: calc(0.4rem * 10);
+      line-height: calc(0.4rem * 10);
+      --tw-font-weight: 500;
+      font-weight: 500;
+      color: var(--ga-color-text-action);
+      &:not(.ga-calendar__year--disabled, .ga-calendar__month--disabled):hover {
+        color: var(--ga-color-text-action-hover);
+        text-decoration-line: underline;
+        text-underline-offset: 6px;
+      }
+      &.ga-calendar__year--selected, &.ga-calendar__month--selected {
+        background-color: var(--ga-color-surface-action);
+        font-size: calc(
+    var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
+  );
+        line-height: var(--tw-leading, calc(
+    var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
+  ));
+        letter-spacing: var(--tw-tracking, calc(
+    var(--ga-text-md-tracking) * var(--ga-base-scaling-factor, 1)
+  ));
+        color: var(--ga-color-text-on-action);
+      }
+      &.ga-calendar__year--disabled, &.ga-calendar__month--disabled {
+        cursor: not-allowed;
+        color: var(--ga-color-text-disabled);
+      }
+    }
+    .ga-calendar__day {
+      position: relative;
+      display: flex;
+      height: calc(0.4rem * 10);
+      cursor: pointer;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--ga-radius);
+      text-align: center;
+      font-size: calc(
+    var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
+  );
+      line-height: var(--tw-leading, calc(
+    var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
+  ));
+      letter-spacing: var(--tw-tracking, calc(
+    var(--ga-text-md-tracking) * var(--ga-base-scaling-factor, 1)
+  ));
+      color: var(--ga-color-text-body);
+      &:hover {
+        background-color: var(--ga-color-surface-action-hover-2);
+        color: var(--ga-color-text-action-hover);
+      }
+      &.ga-calendar__day--current::after {
+        position: absolute;
+        bottom: calc(0.4rem * 2);
+        left: calc(1/2 * 100%);
+        height: calc(0.4rem * 0.5);
+        width: calc(0.4rem * 5);
+        --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+        transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
+        border-radius: var(--ga-radius);
+        background-color: var(--ga-color-surface-action);
+        --tw-content: '';
+        content: var(--tw-content);
+      }
+      &.ga-calendar__day--special::after {
+        position: absolute;
+        bottom: calc(0.4rem * 2);
+        left: calc(1/2 * 100%);
+        height: calc(0.4rem * 1);
+        width: calc(0.4rem * 1);
+        --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+        transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
+        border-radius: calc(infinity * 1px);
+        background-color: var(--ga-color-surface-action);
+        --tw-content: '';
+        content: var(--tw-content);
+      }
+      &.ga-calendar__day--disabled {
+        cursor: not-allowed;
+        background-color: var(--ga-color-surface-disabled);
+        color: var(--ga-color-text-disable-selected);
+      }
+      &.ga-calendar__day--weekend {
+        color: var(--ga-color-text-disabled);
+      }
+      &.ga-calendar__day--selected {
+        background-color: var(--ga-color-surface-action);
+        color: var(--ga-color-text-on-action);
+        &.ga-calendar__day--current::after, &.ga-calendar__day--special::after {
+          background-color: var(--ga-color-icon-on-action);
+        }
+        &:hover {
+          background-color: var(--ga-color-surface-action-hover);
+          color: var(--ga-color-text-on-action);
+        }
+        &.ga-calendar__day--disabled {
+          background-color: var(--ga-color-surface-disable-selected);
+          color: var(--ga-color-text-on-action);
+        }
+      }
+      &.ga-calendar__day--selected-range-start {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        background-color: var(--ga-color-surface-action);
+        color: var(--ga-color-text-on-action);
+      }
+      &.ga-calendar__day--selected-range-middle {
+        border-radius: 0;
+        border-block-style: var(--tw-border-style);
+        border-block-width: 1px;
+        border-color: var(--ga-color-border-success);
+        background-color: var(--ga-color-success-light);
+        color: var(--ga-color-text-body);
+      }
+      &.ga-calendar__day--selected-range-end {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        background-color: var(--ga-color-surface-action);
+        color: var(--ga-color-text-on-action);
+      }
+      &.ga-calendar__day--selected-range-middle-hover {
+        border-radius: 0;
+        border-block-style: var(--tw-border-style);
+        border-block-width: 1px;
+        --tw-border-style: dashed;
+        border-style: dashed;
+        border-color: var(--ga-color-border-action-hover);
+        background-color: var(--ga-color-surface-action-hover-2);
+        color: var(--ga-color-text-body);
+      }
+      &.ga-calendar__day--selected-range-end-hover {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        border-style: var(--tw-border-style);
+        border-width: 1px;
+        border-color: var(--ga-color-border-action);
+        background-color: var(--ga-color-surface-primary);
+        color: var(--ga-color-text-body);
+      }
+    }
+    .ga-calendar__weekdays {
+      margin-top: calc(0.4rem * 2);
+      display: grid;
+      height: calc(0.4rem * 6);
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+      align-items: center;
+      justify-items: center;
+      gap: calc(0.4rem * 4);
+    }
+    .ga-calendar__weekday {
+      font-size: calc(
+    var(--ga-text-xs-font-size) * var(--ga-base-scaling-factor, 1)
+  );
+      line-height: var(--tw-leading, calc(
+    var(--ga-text-xs-line-height) * var(--ga-base-scaling-factor, 1)
+  ));
+      letter-spacing: var(--tw-tracking, calc(
+    var(--ga-text-xs-tracking) * var(--ga-base-scaling-factor, 1)
+  ));
+      --tw-font-weight: 500;
+      font-weight: 500;
+    }
+  }
   .ga-checkbox {
     position: relative;
     display: inline-flex;
@@ -736,6 +1041,35 @@
       }
     }
   }
+  .ga-container {
+    margin-inline: calc(0.4rem * 4);
+  }
+  @media (min-width: 840px) {
+    .ga-container {
+      margin-inline: calc(0.4rem * 6);
+    }
+  }
+  @media (min-width: 1440px) {
+    .ga-container {
+      margin-inline: calc(0.4rem * 8);
+    }
+  }
+  @media (min-width: 1920px) {
+    .ga-container {
+      margin-inline: calc(0.4rem * 10);
+    }
+  }
+  .ga-datepicker {
+    border-radius: var(--ga-radius);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--ga-color-border-primary);
+    background-color: var(--ga-color-surface-primary);
+    padding: calc(0.4rem * 4);
+    .ga-datepicker__footer {
+      margin-top: calc(0.4rem * 2);
+    }
+  }
   .ga-dropdown {
     display: flex;
     max-height: calc(0.4rem * 81);
@@ -2603,6 +2937,92 @@
       color: var(--ga-color-icon-primary);
     }
   }
+  .ga-quick-filter-button {
+    display: inline-flex;
+    height: calc(0.4rem * 10);
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    gap: calc(0.4rem * 2);
+    border-radius: calc(infinity * 1px);
+    padding-inline: calc(0.4rem * 4);
+    vertical-align: middle;
+    font-size: calc(
+    var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
+  );
+    line-height: var(--tw-leading, calc(
+    var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
+  ));
+    letter-spacing: var(--tw-tracking, calc(
+    var(--ga-text-md-tracking) * var(--ga-base-scaling-factor, 1)
+  ));
+    --tw-leading: calc(0.4rem * 1);
+    line-height: calc(0.4rem * 1);
+    --tw-font-weight: 500;
+    font-weight: 500;
+    white-space: nowrap;
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--ga-color-border-action);
+    background-color: var(--ga-color-surface-primary);
+    color: var(--ga-color-text-action);
+    .ga-icon {
+      color: var(--ga-color-icon-action);
+    }
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+      outline-offset: 2px;
+      outline-color: var(--ga-color-border-focus);
+    }
+    &:hover:not(:disabled) {
+      background-color: var(--ga-color-surface-action-hover-2);
+      .ga-icon {
+        color: var(--ga-color-icon-action-hover);
+      }
+    }
+    &:active:not(:disabled) {
+      background-color: var(--ga-color-surface-primary);
+    }
+    &:disabled {
+      cursor: not-allowed;
+      border-color: var(--ga-color-border-disabled);
+      background-color: var(--ga-color-surface-page);
+      color: var(--ga-color-text-disabled);
+      .ga-icon {
+        color: var(--ga-color-icon-on-disabled);
+      }
+    }
+    &.ga-quick-filter-button--transparent {
+      background-color: transparent;
+      &:active:not(:disabled) {
+        background-color: transparent;
+      }
+    }
+    &.ga-quick-filter-button--selected {
+      border-color: var(--ga-color-border-action);
+      background-color: var(--ga-color-surface-action);
+      color: var(--ga-color-text-on-action);
+      .ga-icon {
+        color: var(--ga-color-icon-on-action);
+      }
+      &:hover:not(:disabled) {
+        border-color: var(--ga-color-border-action-hover);
+        background-color: var(--ga-color-surface-action-hover);
+        .ga-icon {
+          color: var(--ga-color-icon-on-action-hover);
+        }
+      }
+      &:disabled {
+        border-color: var(--ga-color-surface-disabled);
+        background-color: var(--ga-color-surface-disabled);
+        color: var(--ga-color-text-disable-selected);
+        .ga-icon {
+          color: var(--ga-color-icon-on-disabled);
+        }
+      }
+    }
+  }
 }
 :root, :host {
   --ga-base-scaling-factor: 1.6;
@@ -2680,10 +3100,25 @@
   inherits: false;
   initial-value: solid;
 }
-@property --tw-content {
+@property --tw-ordinal {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-slashed-zero {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-figure {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-spacing {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-fraction {
   syntax: "*";
   inherits: false;
-  initial-value: "";
 }
 @property --tw-translate-x {
   syntax: "*";
@@ -2700,27 +3135,37 @@
   inherits: false;
   initial-value: 0;
 }
-@property --tw-duration {
+@property --tw-rotate-x {
   syntax: "*";
   inherits: false;
+  initial-value: rotateX(0);
 }
-@property --tw-ordinal {
+@property --tw-rotate-y {
   syntax: "*";
   inherits: false;
+  initial-value: rotateY(0);
 }
-@property --tw-slashed-zero {
+@property --tw-rotate-z {
   syntax: "*";
   inherits: false;
+  initial-value: rotateZ(0);
 }
-@property --tw-numeric-figure {
+@property --tw-skew-x {
   syntax: "*";
   inherits: false;
+  initial-value: skewX(0);
 }
-@property --tw-numeric-spacing {
+@property --tw-skew-y {
   syntax: "*";
   inherits: false;
+  initial-value: skewY(0);
 }
-@property --tw-numeric-fraction {
+@property --tw-content {
+  syntax: "*";
+  inherits: false;
+  initial-value: "";
+}
+@property --tw-duration {
   syntax: "*";
   inherits: false;
 }