@vsn-ux/gaia-styles 0.4.7 → 0.4.8

package/dist/all-no-reset-10pt.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.6 | MIT License | https://tailwindcss.com */
 @layer properties;
 :root {
   --ga-color-black: #000000;
@@ -48,7 +48,7 @@
   --ga-color-information-light: var(--ga-color-utility-blue-light);
   --ga-color-lime-10: #edf6dd;
   --ga-color-lime-40: #a5c656;
-  --ga-color-miscellaneous-overlay: #371cff91;
+  --ga-color-miscellaneous-overlay: #70778891;
   --ga-color-miscellaneous-skeleton-element: var(--ga-color-neutral-10);
   --ga-color-miscellaneous-skeleton-highlight: var(--ga-color-neutral-20);
   --ga-color-neutral: var(--ga-color-neutral-30);
@@ -210,17 +210,12 @@
   --ga-text-xs-line-height: 1rem;
   --ga-text-xs-tracking: 0.005rem;
 }
-@media (color-gamut: p3) {
-  :root {
-    --ga-color-miscellaneous-overlay: #3800ff91;
-  }
-}
-@media (color-gamut: rec2020) {
-  :root {
-    --ga-color-miscellaneous-overlay: #3e00ff91;
+@layer theme, base, components, utilities;
+@layer theme {
+  :root, :host {
+    --spacing: 0.4rem;
   }
 }
-@layer theme, base, components, utilities;
 @layer base {
   body {
     font-family: Inter, ui-sans-serif, system-ui, sans-serif;
@@ -350,8 +345,8 @@
   ));
     --tw-leading: calc(0.4rem * 1);
     line-height: calc(0.4rem * 1);
-    --tw-font-weight: 700;
-    font-weight: 700;
+    --tw-font-weight: 500;
+    font-weight: 500;
     white-space: nowrap;
     &:focus-visible {
       outline-style: var(--tw-outline-style);
@@ -606,8 +601,6 @@
       letter-spacing: var(--tw-tracking, calc(
     var(--ga-text-md-tracking) * var(--ga-base-scaling-factor, 1)
   ));
-      --tw-leading: 1;
-      line-height: 1;
       color: var(--ga-color-text-action);
       &:first-child {
         border-top-left-radius: var(--ga-radius);
@@ -1121,6 +1114,139 @@
       font-weight: 600;
     }
   }
+  .ga-modal__backdrop {
+    position: fixed;
+    inset: calc(0.4rem * 0);
+    z-index: 50;
+    background-color: var(--ga-color-miscellaneous-overlay);
+  }
+  .ga-modal__container {
+    position: fixed;
+    inset: calc(0.4rem * 0);
+    z-index: 50;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    .ga-modal {
+      margin-top: calc(0.4rem * 16);
+    }
+  }
+  .ga-modal {
+    display: inline-flex;
+    max-height: calc(100vh - var(--spacing) * 16 * 2);
+    width: 100%;
+    max-width: calc(100vw - var(--spacing) * 8 * 2);
+    flex-direction: column;
+    overflow-y: auto;
+    border-radius: var(--ga-radius);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--ga-color-border-focus);
+    background-color: #fff;
+    padding-inline: calc(0.4rem * 2);
+    padding-block: calc(0.4rem * 4);
+    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)
+  ));
+    scrollbar-width: thin;
+    &.ga-modal--small {
+      width: calc(0.4rem * 85);
+    }
+    &.ga-modal--medium {
+      width: calc(0.4rem * 174);
+    }
+    &.ga-modal--large {
+      width: calc(0.4rem * 307.5);
+    }
+    &.ga-modal--danger .ga-modal__icon {
+      color: var(--ga-color-icon-error);
+    }
+    &.ga-modal--warning .ga-modal__icon {
+      color: var(--ga-color-icon-warning);
+    }
+    &.ga-modal--success .ga-modal__icon {
+      color: var(--ga-color-icon-success);
+    }
+    &.ga-modal--information .ga-modal__icon {
+      color: var(--ga-color-icon-information);
+    }
+    .ga-modal__top-section {
+      display: flex;
+      min-height: calc(0.4rem * 16);
+      flex-shrink: 0;
+      align-items: flex-start;
+      gap: calc(0.4rem * 4);
+      padding-inline: calc(0.4rem * 2);
+      padding-bottom: calc(0.4rem * 2);
+      &.ga-modal__top-section--scrollable {
+        flex-shrink: 1;
+      }
+    }
+    .ga-modal__heading {
+      display: flex;
+      min-height: calc(0.4rem * 0);
+      flex: 1;
+      flex-direction: column;
+      align-self: stretch;
+    }
+    .ga-modal__icon {
+      padding: calc(0.4rem * 2);
+    }
+    .ga-modal__label {
+      margin-bottom: calc(0.4rem * 1);
+      display: flex;
+      min-height: calc(0.4rem * 6);
+      align-items: center;
+    }
+    .ga-modal__title {
+      font-size: calc(
+    var(--ga-text-xl-font-size) * var(--ga-base-scaling-factor, 1)
+  );
+      line-height: var(--tw-leading, calc(
+    var(--ga-text-xl-line-height) * var(--ga-base-scaling-factor, 1)
+  ));
+      letter-spacing: var(--tw-tracking, calc(
+    var(--ga-text-xl-tracking) * var(--ga-base-scaling-factor, 1)
+  ));
+      --tw-font-weight: 600;
+      font-weight: 600;
+    }
+    .ga-modal__content {
+      margin-top: calc(0.4rem * 4);
+      min-height: calc(0.4rem * 0);
+      overflow-y: auto;
+      padding: calc(0.4rem * 2);
+      &:empty {
+        margin-top: calc(0.4rem * 0);
+      }
+      scrollbar-width: thin;
+    }
+    .ga-modal__description {
+      margin-top: calc(0.4rem * 4);
+      min-height: calc(0.4rem * 0);
+      overflow-y: auto;
+      scrollbar-width: thin;
+    }
+    .ga-modal__actions {
+      margin-top: calc(0.4rem * 6);
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: flex-end;
+      gap: calc(0.4rem * 2);
+      padding-right: calc(0.4rem * 2);
+    }
+    .ga-modal__close-icon {
+      margin-top: calc(0.4rem * -2);
+      margin-right: calc(0.4rem * -2);
+    }
+  }
   .ga-radio-group {
     display: inline-flex;
     flex-direction: column;
@@ -1706,7 +1832,7 @@
     .ga-tag__separator {
       height: calc(0.4rem * 5);
       width: 1px;
-      background-color: var(--ga-color-border-primary);
+      background-color: var(--ga-color-border-disabled);
     }
   }
   .ga-text-area {

package/dist/all-no-reset.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.6 | MIT License | https://tailwindcss.com */
 @layer properties;
 :root {
   --ga-color-black: #000000;
@@ -48,7 +48,7 @@
   --ga-color-information-light: var(--ga-color-utility-blue-light);
   --ga-color-lime-10: #edf6dd;
   --ga-color-lime-40: #a5c656;
-  --ga-color-miscellaneous-overlay: #371cff91;
+  --ga-color-miscellaneous-overlay: #70778891;
   --ga-color-miscellaneous-skeleton-element: var(--ga-color-neutral-10);
   --ga-color-miscellaneous-skeleton-highlight: var(--ga-color-neutral-20);
   --ga-color-neutral: var(--ga-color-neutral-30);
@@ -210,17 +210,12 @@
   --ga-text-xs-line-height: 1rem;
   --ga-text-xs-tracking: 0.005rem;
 }
-@media (color-gamut: p3) {
-  :root {
-    --ga-color-miscellaneous-overlay: #3800ff91;
-  }
-}
-@media (color-gamut: rec2020) {
-  :root {
-    --ga-color-miscellaneous-overlay: #3e00ff91;
+@layer theme, base, components, utilities;
+@layer theme {
+  :root, :host {
+    --spacing: 0.25rem;
   }
 }
-@layer theme, base, components, utilities;
 @layer base {
   body {
     font-family: Inter, ui-sans-serif, system-ui, sans-serif;
@@ -350,8 +345,8 @@
   ));
     --tw-leading: calc(0.25rem * 1);
     line-height: calc(0.25rem * 1);
-    --tw-font-weight: 700;
-    font-weight: 700;
+    --tw-font-weight: 500;
+    font-weight: 500;
     white-space: nowrap;
     &:focus-visible {
       outline-style: var(--tw-outline-style);
@@ -606,8 +601,6 @@
       letter-spacing: var(--tw-tracking, calc(
     var(--ga-text-md-tracking) * var(--ga-base-scaling-factor, 1)
   ));
-      --tw-leading: 1;
-      line-height: 1;
       color: var(--ga-color-text-action);
       &:first-child {
         border-top-left-radius: var(--ga-radius);
@@ -1121,6 +1114,139 @@
       font-weight: 600;
     }
   }
+  .ga-modal__backdrop {
+    position: fixed;
+    inset: calc(0.25rem * 0);
+    z-index: 50;
+    background-color: var(--ga-color-miscellaneous-overlay);
+  }
+  .ga-modal__container {
+    position: fixed;
+    inset: calc(0.25rem * 0);
+    z-index: 50;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    .ga-modal {
+      margin-top: calc(0.25rem * 16);
+    }
+  }
+  .ga-modal {
+    display: inline-flex;
+    max-height: calc(100vh - var(--spacing) * 16 * 2);
+    width: 100%;
+    max-width: calc(100vw - var(--spacing) * 8 * 2);
+    flex-direction: column;
+    overflow-y: auto;
+    border-radius: var(--ga-radius);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--ga-color-border-focus);
+    background-color: #fff;
+    padding-inline: calc(0.25rem * 2);
+    padding-block: calc(0.25rem * 4);
+    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)
+  ));
+    scrollbar-width: thin;
+    &.ga-modal--small {
+      width: calc(0.25rem * 85);
+    }
+    &.ga-modal--medium {
+      width: calc(0.25rem * 174);
+    }
+    &.ga-modal--large {
+      width: calc(0.25rem * 307.5);
+    }
+    &.ga-modal--danger .ga-modal__icon {
+      color: var(--ga-color-icon-error);
+    }
+    &.ga-modal--warning .ga-modal__icon {
+      color: var(--ga-color-icon-warning);
+    }
+    &.ga-modal--success .ga-modal__icon {
+      color: var(--ga-color-icon-success);
+    }
+    &.ga-modal--information .ga-modal__icon {
+      color: var(--ga-color-icon-information);
+    }
+    .ga-modal__top-section {
+      display: flex;
+      min-height: calc(0.25rem * 16);
+      flex-shrink: 0;
+      align-items: flex-start;
+      gap: calc(0.25rem * 4);
+      padding-inline: calc(0.25rem * 2);
+      padding-bottom: calc(0.25rem * 2);
+      &.ga-modal__top-section--scrollable {
+        flex-shrink: 1;
+      }
+    }
+    .ga-modal__heading {
+      display: flex;
+      min-height: calc(0.25rem * 0);
+      flex: 1;
+      flex-direction: column;
+      align-self: stretch;
+    }
+    .ga-modal__icon {
+      padding: calc(0.25rem * 2);
+    }
+    .ga-modal__label {
+      margin-bottom: calc(0.25rem * 1);
+      display: flex;
+      min-height: calc(0.25rem * 6);
+      align-items: center;
+    }
+    .ga-modal__title {
+      font-size: calc(
+    var(--ga-text-xl-font-size) * var(--ga-base-scaling-factor, 1)
+  );
+      line-height: var(--tw-leading, calc(
+    var(--ga-text-xl-line-height) * var(--ga-base-scaling-factor, 1)
+  ));
+      letter-spacing: var(--tw-tracking, calc(
+    var(--ga-text-xl-tracking) * var(--ga-base-scaling-factor, 1)
+  ));
+      --tw-font-weight: 600;
+      font-weight: 600;
+    }
+    .ga-modal__content {
+      margin-top: calc(0.25rem * 4);
+      min-height: calc(0.25rem * 0);
+      overflow-y: auto;
+      padding: calc(0.25rem * 2);
+      &:empty {
+        margin-top: calc(0.25rem * 0);
+      }
+      scrollbar-width: thin;
+    }
+    .ga-modal__description {
+      margin-top: calc(0.25rem * 4);
+      min-height: calc(0.25rem * 0);
+      overflow-y: auto;
+      scrollbar-width: thin;
+    }
+    .ga-modal__actions {
+      margin-top: calc(0.25rem * 6);
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: flex-end;
+      gap: calc(0.25rem * 2);
+      padding-right: calc(0.25rem * 2);
+    }
+    .ga-modal__close-icon {
+      margin-top: calc(0.25rem * -2);
+      margin-right: calc(0.25rem * -2);
+    }
+  }
   .ga-radio-group {
     display: inline-flex;
     flex-direction: column;
@@ -1706,7 +1832,7 @@
     .ga-tag__separator {
       height: calc(0.25rem * 5);
       width: 1px;
-      background-color: var(--ga-color-border-primary);
+      background-color: var(--ga-color-border-disabled);
     }
   }
   .ga-text-area {

package/dist/all.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.6 | MIT License | https://tailwindcss.com */
 @layer properties;
 :root {
   --ga-color-black: #000000;
@@ -48,7 +48,7 @@
   --ga-color-information-light: var(--ga-color-utility-blue-light);
   --ga-color-lime-10: #edf6dd;
   --ga-color-lime-40: #a5c656;
-  --ga-color-miscellaneous-overlay: #371cff91;
+  --ga-color-miscellaneous-overlay: #70778891;
   --ga-color-miscellaneous-skeleton-element: var(--ga-color-neutral-10);
   --ga-color-miscellaneous-skeleton-highlight: var(--ga-color-neutral-20);
   --ga-color-neutral: var(--ga-color-neutral-30);
@@ -210,20 +210,11 @@
   --ga-text-xs-line-height: 1rem;
   --ga-text-xs-tracking: 0.005rem;
 }
-@media (color-gamut: p3) {
-  :root {
-    --ga-color-miscellaneous-overlay: #3800ff91;
-  }
-}
-@media (color-gamut: rec2020) {
-  :root {
-    --ga-color-miscellaneous-overlay: #3e00ff91;
-  }
-}
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
     --font-inter: Inter, ui-sans-serif, system-ui, sans-serif;
+    --spacing: 0.25rem;
   }
 }
 @layer base {
@@ -500,8 +491,8 @@
   ));
     --tw-leading: calc(0.25rem * 1);
     line-height: calc(0.25rem * 1);
-    --tw-font-weight: 700;
-    font-weight: 700;
+    --tw-font-weight: 500;
+    font-weight: 500;
     white-space: nowrap;
     &:focus-visible {
       outline-style: var(--tw-outline-style);
@@ -756,8 +747,6 @@
       letter-spacing: var(--tw-tracking, calc(
     var(--ga-text-md-tracking) * var(--ga-base-scaling-factor, 1)
   ));
-      --tw-leading: 1;
-      line-height: 1;
       color: var(--ga-color-text-action);
       &:first-child {
         border-top-left-radius: var(--ga-radius);
@@ -1271,6 +1260,139 @@
       font-weight: 600;
     }
   }
+  .ga-modal__backdrop {
+    position: fixed;
+    inset: calc(0.25rem * 0);
+    z-index: 50;
+    background-color: var(--ga-color-miscellaneous-overlay);
+  }
+  .ga-modal__container {
+    position: fixed;
+    inset: calc(0.25rem * 0);
+    z-index: 50;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    .ga-modal {
+      margin-top: calc(0.25rem * 16);
+    }
+  }
+  .ga-modal {
+    display: inline-flex;
+    max-height: calc(100vh - var(--spacing) * 16 * 2);
+    width: 100%;
+    max-width: calc(100vw - var(--spacing) * 8 * 2);
+    flex-direction: column;
+    overflow-y: auto;
+    border-radius: var(--ga-radius);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--ga-color-border-focus);
+    background-color: #fff;
+    padding-inline: calc(0.25rem * 2);
+    padding-block: calc(0.25rem * 4);
+    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)
+  ));
+    scrollbar-width: thin;
+    &.ga-modal--small {
+      width: calc(0.25rem * 85);
+    }
+    &.ga-modal--medium {
+      width: calc(0.25rem * 174);
+    }
+    &.ga-modal--large {
+      width: calc(0.25rem * 307.5);
+    }
+    &.ga-modal--danger .ga-modal__icon {
+      color: var(--ga-color-icon-error);
+    }
+    &.ga-modal--warning .ga-modal__icon {
+      color: var(--ga-color-icon-warning);
+    }
+    &.ga-modal--success .ga-modal__icon {
+      color: var(--ga-color-icon-success);
+    }
+    &.ga-modal--information .ga-modal__icon {
+      color: var(--ga-color-icon-information);
+    }
+    .ga-modal__top-section {
+      display: flex;
+      min-height: calc(0.25rem * 16);
+      flex-shrink: 0;
+      align-items: flex-start;
+      gap: calc(0.25rem * 4);
+      padding-inline: calc(0.25rem * 2);
+      padding-bottom: calc(0.25rem * 2);
+      &.ga-modal__top-section--scrollable {
+        flex-shrink: 1;
+      }
+    }
+    .ga-modal__heading {
+      display: flex;
+      min-height: calc(0.25rem * 0);
+      flex: 1;
+      flex-direction: column;
+      align-self: stretch;
+    }
+    .ga-modal__icon {
+      padding: calc(0.25rem * 2);
+    }
+    .ga-modal__label {
+      margin-bottom: calc(0.25rem * 1);
+      display: flex;
+      min-height: calc(0.25rem * 6);
+      align-items: center;
+    }
+    .ga-modal__title {
+      font-size: calc(
+    var(--ga-text-xl-font-size) * var(--ga-base-scaling-factor, 1)
+  );
+      line-height: var(--tw-leading, calc(
+    var(--ga-text-xl-line-height) * var(--ga-base-scaling-factor, 1)
+  ));
+      letter-spacing: var(--tw-tracking, calc(
+    var(--ga-text-xl-tracking) * var(--ga-base-scaling-factor, 1)
+  ));
+      --tw-font-weight: 600;
+      font-weight: 600;
+    }
+    .ga-modal__content {
+      margin-top: calc(0.25rem * 4);
+      min-height: calc(0.25rem * 0);
+      overflow-y: auto;
+      padding: calc(0.25rem * 2);
+      &:empty {
+        margin-top: calc(0.25rem * 0);
+      }
+      scrollbar-width: thin;
+    }
+    .ga-modal__description {
+      margin-top: calc(0.25rem * 4);
+      min-height: calc(0.25rem * 0);
+      overflow-y: auto;
+      scrollbar-width: thin;
+    }
+    .ga-modal__actions {
+      margin-top: calc(0.25rem * 6);
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: flex-end;
+      gap: calc(0.25rem * 2);
+      padding-right: calc(0.25rem * 2);
+    }
+    .ga-modal__close-icon {
+      margin-top: calc(0.25rem * -2);
+      margin-right: calc(0.25rem * -2);
+    }
+  }
   .ga-radio-group {
     display: inline-flex;
     flex-direction: column;
@@ -1856,7 +1978,7 @@
     .ga-tag__separator {
       height: calc(0.25rem * 5);
       width: 1px;
-      background-color: var(--ga-color-border-primary);
+      background-color: var(--ga-color-border-disabled);
     }
   }
   .ga-text-area {

package/dist/base.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.6 | MIT License | https://tailwindcss.com */
 body {
   font-family: Inter, ui-sans-serif, system-ui, sans-serif;
   font-feature-settings: 'liga' 1, 'calt' 1;

package/dist/components/avatar.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.6 | MIT License | https://tailwindcss.com */
 @layer properties;
 .ga-avatar {
   display: inline-flex;

package/dist/components/badge.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.6 | MIT License | https://tailwindcss.com */
 @layer properties;
 .ga-badge {
   display: inline-block;

package/dist/components/button.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.6 | MIT License | https://tailwindcss.com */
 @layer properties;
 .ga-button {
   display: inline-flex;
@@ -21,8 +21,8 @@
   ));
   --tw-leading: calc(0.25rem * 1);
   line-height: calc(0.25rem * 1);
-  --tw-font-weight: 700;
-  font-weight: 700;
+  --tw-font-weight: 500;
+  font-weight: 500;
   white-space: nowrap;
   &:focus-visible {
     outline-style: var(--tw-outline-style);

package/dist/components/card.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.6 | MIT License | https://tailwindcss.com */
 @layer properties;
 .ga-card {
   display: inline-block;

package/dist/components/checkbox.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.6 | MIT License | https://tailwindcss.com */
 @layer properties;
 .ga-checkbox {
   position: relative;

package/dist/components/dropdown.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.6 | MIT License | https://tailwindcss.com */
 @layer properties;
 .ga-dropdown {
   display: flex;
@@ -45,8 +45,6 @@
     letter-spacing: var(--tw-tracking, calc(
     var(--ga-text-md-tracking) * var(--ga-base-scaling-factor, 1)
   ));
-    --tw-leading: 1;
-    line-height: 1;
     color: var(--ga-color-text-action);
     &:first-child {
       border-top-left-radius: var(--ga-radius);
@@ -129,10 +127,6 @@
   inherits: false;
   initial-value: solid;
 }
-@property --tw-leading {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-font-weight {
   syntax: "*";
   inherits: false;
@@ -146,7 +140,6 @@
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
       --tw-border-style: solid;
-      --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-content: "";
     }

package/dist/components/form-field.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.6 | MIT License | https://tailwindcss.com */
 @layer properties;
 .ga-form-field {
   display: flex;

package/dist/components/input.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.6 | MIT License | https://tailwindcss.com */
 @layer properties;
 .ga-input {
   display: flex;

package/dist/components/link.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.6 | MIT License | https://tailwindcss.com */
 @layer properties;
 .ga-link {
   display: inline-flex;

package/dist/components/menu.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.6 | MIT License | https://tailwindcss.com */
 @layer properties;
 .ga-menu {
   display: flex;

package/dist/components/modal.css

@@ -0,0 +1,152 @@
+/*! tailwindcss v4.1.6 | MIT License | https://tailwindcss.com */
+@layer properties;
+.ga-modal__backdrop {
+  position: fixed;
+  inset: calc(0.25rem * 0);
+  z-index: 50;
+  background-color: var(--ga-color-miscellaneous-overlay);
+}
+.ga-modal__container {
+  position: fixed;
+  inset: calc(0.25rem * 0);
+  z-index: 50;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  .ga-modal {
+    margin-top: calc(0.25rem * 16);
+  }
+}
+.ga-modal {
+  display: inline-flex;
+  max-height: calc(100vh - var(--spacing) * 16 * 2);
+  width: 100%;
+  max-width: calc(100vw - var(--spacing) * 8 * 2);
+  flex-direction: column;
+  overflow-y: auto;
+  border-radius: var(--ga-radius);
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-color: var(--ga-color-border-focus);
+  background-color: #fff;
+  padding-inline: calc(0.25rem * 2);
+  padding-block: calc(0.25rem * 4);
+  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)
+  ));
+  scrollbar-width: thin;
+  &.ga-modal--small {
+    width: calc(0.25rem * 85);
+  }
+  &.ga-modal--medium {
+    width: calc(0.25rem * 174);
+  }
+  &.ga-modal--large {
+    width: calc(0.25rem * 307.5);
+  }
+  &.ga-modal--danger .ga-modal__icon {
+    color: var(--ga-color-icon-error);
+  }
+  &.ga-modal--warning .ga-modal__icon {
+    color: var(--ga-color-icon-warning);
+  }
+  &.ga-modal--success .ga-modal__icon {
+    color: var(--ga-color-icon-success);
+  }
+  &.ga-modal--information .ga-modal__icon {
+    color: var(--ga-color-icon-information);
+  }
+  .ga-modal__top-section {
+    display: flex;
+    min-height: calc(0.25rem * 16);
+    flex-shrink: 0;
+    align-items: flex-start;
+    gap: calc(0.25rem * 4);
+    padding-inline: calc(0.25rem * 2);
+    padding-bottom: calc(0.25rem * 2);
+    &.ga-modal__top-section--scrollable {
+      flex-shrink: 1;
+    }
+  }
+  .ga-modal__heading {
+    display: flex;
+    min-height: calc(0.25rem * 0);
+    flex: 1;
+    flex-direction: column;
+    align-self: stretch;
+  }
+  .ga-modal__icon {
+    padding: calc(0.25rem * 2);
+  }
+  .ga-modal__label {
+    margin-bottom: calc(0.25rem * 1);
+    display: flex;
+    min-height: calc(0.25rem * 6);
+    align-items: center;
+  }
+  .ga-modal__title {
+    font-size: calc(
+    var(--ga-text-xl-font-size) * var(--ga-base-scaling-factor, 1)
+  );
+    line-height: var(--tw-leading, calc(
+    var(--ga-text-xl-line-height) * var(--ga-base-scaling-factor, 1)
+  ));
+    letter-spacing: var(--tw-tracking, calc(
+    var(--ga-text-xl-tracking) * var(--ga-base-scaling-factor, 1)
+  ));
+    --tw-font-weight: 600;
+    font-weight: 600;
+  }
+  .ga-modal__content {
+    margin-top: calc(0.25rem * 4);
+    min-height: calc(0.25rem * 0);
+    overflow-y: auto;
+    padding: calc(0.25rem * 2);
+    &:empty {
+      margin-top: calc(0.25rem * 0);
+    }
+    scrollbar-width: thin;
+  }
+  .ga-modal__description {
+    margin-top: calc(0.25rem * 4);
+    min-height: calc(0.25rem * 0);
+    overflow-y: auto;
+    scrollbar-width: thin;
+  }
+  .ga-modal__actions {
+    margin-top: calc(0.25rem * 6);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: calc(0.25rem * 2);
+    padding-right: calc(0.25rem * 2);
+  }
+  .ga-modal__close-icon {
+    margin-top: calc(0.25rem * -2);
+    margin-right: calc(0.25rem * -2);
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-border-style: solid;
+      --tw-font-weight: initial;
+    }
+  }
+}

package/dist/components/notification.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.6 | MIT License | https://tailwindcss.com */
 @layer properties;
 .ga-notification {
   display: inline-flex;

package/dist/components/radio.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.6 | MIT License | https://tailwindcss.com */
 @layer properties;
 .ga-radio-group {
   display: inline-flex;

package/dist/components/segmented-control.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.6 | MIT License | https://tailwindcss.com */
 @layer properties;
 .ga-segmented-control {
   display: inline-flex;

package/dist/components/select.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.6 | MIT License | https://tailwindcss.com */
 @layer properties;
 .ga-native-select {
   position: relative;

package/dist/components/switch.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.6 | MIT License | https://tailwindcss.com */
 @layer properties;
 .ga-switch {
   position: relative;

package/dist/components/tag.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.6 | MIT License | https://tailwindcss.com */
 @layer properties;
 .ga-tag {
   box-sizing: content-box;
@@ -175,7 +175,7 @@
   .ga-tag__separator {
     height: calc(0.25rem * 5);
     width: 1px;
-    background-color: var(--ga-color-border-primary);
+    background-color: var(--ga-color-border-disabled);
   }
 }
 @property --tw-border-style {

package/dist/components/text-area.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.6 | MIT License | https://tailwindcss.com */
 @layer properties;
 .ga-text-area {
   display: flex;

package/dist/components/tooltip.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.6 | MIT License | https://tailwindcss.com */
 @layer properties;
 .ga-tooltip {
   position: relative;

package/dist/components.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.6 | MIT License | https://tailwindcss.com */
 @layer properties;
 .ga-avatar {
   display: inline-flex;
@@ -121,8 +121,8 @@
   ));
   --tw-leading: calc(0.25rem * 1);
   line-height: calc(0.25rem * 1);
-  --tw-font-weight: 700;
-  font-weight: 700;
+  --tw-font-weight: 500;
+  font-weight: 500;
   white-space: nowrap;
   &:focus-visible {
     outline-style: var(--tw-outline-style);
@@ -377,8 +377,6 @@
     letter-spacing: var(--tw-tracking, calc(
     var(--ga-text-md-tracking) * var(--ga-base-scaling-factor, 1)
   ));
-    --tw-leading: 1;
-    line-height: 1;
     color: var(--ga-color-text-action);
     &:first-child {
       border-top-left-radius: var(--ga-radius);
@@ -892,6 +890,139 @@
     font-weight: 600;
   }
 }
+.ga-modal__backdrop {
+  position: fixed;
+  inset: calc(0.25rem * 0);
+  z-index: 50;
+  background-color: var(--ga-color-miscellaneous-overlay);
+}
+.ga-modal__container {
+  position: fixed;
+  inset: calc(0.25rem * 0);
+  z-index: 50;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  .ga-modal {
+    margin-top: calc(0.25rem * 16);
+  }
+}
+.ga-modal {
+  display: inline-flex;
+  max-height: calc(100vh - var(--spacing) * 16 * 2);
+  width: 100%;
+  max-width: calc(100vw - var(--spacing) * 8 * 2);
+  flex-direction: column;
+  overflow-y: auto;
+  border-radius: var(--ga-radius);
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-color: var(--ga-color-border-focus);
+  background-color: #fff;
+  padding-inline: calc(0.25rem * 2);
+  padding-block: calc(0.25rem * 4);
+  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)
+  ));
+  scrollbar-width: thin;
+  &.ga-modal--small {
+    width: calc(0.25rem * 85);
+  }
+  &.ga-modal--medium {
+    width: calc(0.25rem * 174);
+  }
+  &.ga-modal--large {
+    width: calc(0.25rem * 307.5);
+  }
+  &.ga-modal--danger .ga-modal__icon {
+    color: var(--ga-color-icon-error);
+  }
+  &.ga-modal--warning .ga-modal__icon {
+    color: var(--ga-color-icon-warning);
+  }
+  &.ga-modal--success .ga-modal__icon {
+    color: var(--ga-color-icon-success);
+  }
+  &.ga-modal--information .ga-modal__icon {
+    color: var(--ga-color-icon-information);
+  }
+  .ga-modal__top-section {
+    display: flex;
+    min-height: calc(0.25rem * 16);
+    flex-shrink: 0;
+    align-items: flex-start;
+    gap: calc(0.25rem * 4);
+    padding-inline: calc(0.25rem * 2);
+    padding-bottom: calc(0.25rem * 2);
+    &.ga-modal__top-section--scrollable {
+      flex-shrink: 1;
+    }
+  }
+  .ga-modal__heading {
+    display: flex;
+    min-height: calc(0.25rem * 0);
+    flex: 1;
+    flex-direction: column;
+    align-self: stretch;
+  }
+  .ga-modal__icon {
+    padding: calc(0.25rem * 2);
+  }
+  .ga-modal__label {
+    margin-bottom: calc(0.25rem * 1);
+    display: flex;
+    min-height: calc(0.25rem * 6);
+    align-items: center;
+  }
+  .ga-modal__title {
+    font-size: calc(
+    var(--ga-text-xl-font-size) * var(--ga-base-scaling-factor, 1)
+  );
+    line-height: var(--tw-leading, calc(
+    var(--ga-text-xl-line-height) * var(--ga-base-scaling-factor, 1)
+  ));
+    letter-spacing: var(--tw-tracking, calc(
+    var(--ga-text-xl-tracking) * var(--ga-base-scaling-factor, 1)
+  ));
+    --tw-font-weight: 600;
+    font-weight: 600;
+  }
+  .ga-modal__content {
+    margin-top: calc(0.25rem * 4);
+    min-height: calc(0.25rem * 0);
+    overflow-y: auto;
+    padding: calc(0.25rem * 2);
+    &:empty {
+      margin-top: calc(0.25rem * 0);
+    }
+    scrollbar-width: thin;
+  }
+  .ga-modal__description {
+    margin-top: calc(0.25rem * 4);
+    min-height: calc(0.25rem * 0);
+    overflow-y: auto;
+    scrollbar-width: thin;
+  }
+  .ga-modal__actions {
+    margin-top: calc(0.25rem * 6);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: calc(0.25rem * 2);
+    padding-right: calc(0.25rem * 2);
+  }
+  .ga-modal__close-icon {
+    margin-top: calc(0.25rem * -2);
+    margin-right: calc(0.25rem * -2);
+  }
+}
 .ga-radio-group {
   display: inline-flex;
   flex-direction: column;
@@ -1477,7 +1608,7 @@
   .ga-tag__separator {
     height: calc(0.25rem * 5);
     width: 1px;
-    background-color: var(--ga-color-border-primary);
+    background-color: var(--ga-color-border-disabled);
   }
 }
 .ga-text-area {

package/dist/design-tokens.css

@@ -50,7 +50,7 @@
   --ga-color-information-light: var(--ga-color-utility-blue-light);
   --ga-color-lime-10: #edf6dd;
   --ga-color-lime-40: #a5c656;
-  --ga-color-miscellaneous-overlay: #371cff91;
+  --ga-color-miscellaneous-overlay: #70778891;
   --ga-color-miscellaneous-skeleton-element: var(--ga-color-neutral-10);
   --ga-color-miscellaneous-skeleton-highlight: var(--ga-color-neutral-20);
   --ga-color-neutral: var(--ga-color-neutral-30);
@@ -213,15 +213,3 @@
   --ga-text-xs-tracking: 0.005rem;
 }
 
-@media (color-gamut: p3) {
-  :root {
-    --ga-color-miscellaneous-overlay: #3800ff91;
-  }
-}
-
-@media (color-gamut: rec2020) {
-  :root {
-    --ga-color-miscellaneous-overlay: #3e00ff91;
-  }
-}
-

package/dist/design-tokens.js

@@ -1819,9 +1819,9 @@ export const tokens = {
     ".": {
       "colorSpace": "oklch",
       "channels": [
-        0.4949,
-        10.28,
-        270.77
+        0.57,
+        0.0276,
+        267.73
       ],
       "alpha": 0.57
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vsn-ux/gaia-styles",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "type": "module",
   "scripts": {
     "dev": "storybook dev -p 6006",

package/src/design-tokens/dtcg-tokens.json

@@ -498,7 +498,7 @@
       "overlay": {
         "$value": {
           "colorSpace": "oklch",
-          "channels": [0.4949, 10.28, 270.77],
+          "channels": [0.57, 0.0276, 267.73],
           "alpha": 0.57
         }
       },
@@ -593,16 +593,16 @@
     "weight": {
       "$type": "fontWeight",
       "normal": {
-        "$value": "normal"
+        "$value": 400
       },
       "medium": {
-        "$value": "medium"
+        "$value": 500
       },
       "semibold": {
-        "$value": "semi-bold"
+        "$value": 600
       },
       "bold": {
-        "$value": "bold"
+        "$value": 700
       }
     }
   },

package/src/styles/components/button.css

@@ -1,5 +1,5 @@
 .ga-button {
-  @apply text-md inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded px-4 align-middle leading-1 font-bold whitespace-nowrap;
+  @apply text-md inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded px-4 align-middle leading-1 font-medium whitespace-nowrap;
 
   &:focus-visible {
     @apply outline-2 outline-offset-2 outline-(--ga-color-border-focus);

package/src/styles/components/dropdown.css

@@ -2,7 +2,7 @@
   @apply text-md flex max-h-81 max-w-[80ch] flex-col items-stretch overflow-y-auto rounded border border-(--ga-color-border-primary) bg-(--ga-color-surface-primary) outline-none;
 
   .ga-dropdown__item {
-    @apply text-md relative flex h-9 min-w-0 shrink-0 cursor-pointer flex-row items-center gap-2 px-3 py-2 text-left leading-none text-(--ga-color-text-action);
+    @apply text-md relative flex h-9 min-w-0 shrink-0 cursor-pointer flex-row items-center gap-2 px-3 py-2 text-left text-(--ga-color-text-action);
 
     &:first-child {
       @apply rounded-t;

package/src/styles/components/modal.css

@@ -0,0 +1,89 @@
+.ga-modal__backdrop {
+  @apply fixed inset-0 z-50 bg-(--ga-color-miscellaneous-overlay);
+}
+
+.ga-modal__container {
+  @apply fixed inset-0 z-50 flex items-start justify-center;
+
+  .ga-modal {
+    @apply mt-16;
+  }
+}
+
+.ga-modal {
+  @apply text-md inline-flex max-h-[calc(100vh-var(--spacing)*16*2)] w-full max-w-[calc(100vw-var(--spacing)*8*2)] flex-col overflow-y-auto rounded border border-(--ga-color-border-focus) bg-white px-2 py-4;
+
+  scrollbar-width: thin;
+
+  &.ga-modal--small {
+    @apply w-85;
+  }
+
+  &.ga-modal--medium {
+    @apply w-174;
+  }
+
+  &.ga-modal--large {
+    @apply w-307.5;
+  }
+
+  &.ga-modal--danger .ga-modal__icon {
+    @apply text-(--ga-color-icon-error);
+  }
+
+  &.ga-modal--warning .ga-modal__icon {
+    @apply text-(--ga-color-icon-warning);
+  }
+
+  &.ga-modal--success .ga-modal__icon {
+    @apply text-(--ga-color-icon-success);
+  }
+
+  &.ga-modal--information .ga-modal__icon {
+    @apply text-(--ga-color-icon-information);
+  }
+
+  .ga-modal__top-section {
+    @apply flex min-h-16 shrink-0 items-start gap-4 px-2 pb-2;
+
+    &.ga-modal__top-section--scrollable {
+      @apply shrink;
+    }
+  }
+
+  .ga-modal__heading {
+    @apply flex min-h-0 flex-1 flex-col self-stretch;
+  }
+
+  .ga-modal__icon {
+    @apply p-2;
+  }
+
+  .ga-modal__label {
+    @apply mb-1 flex min-h-6 items-center;
+  }
+
+  .ga-modal__title {
+    @apply text-xl font-semibold;
+  }
+
+  .ga-modal__content {
+    @apply mt-4 min-h-0 overflow-y-auto p-2 empty:mt-0;
+
+    scrollbar-width: thin;
+  }
+
+  .ga-modal__description {
+    @apply mt-4 min-h-0 overflow-y-auto;
+
+    scrollbar-width: thin;
+  }
+
+  .ga-modal__actions {
+    @apply mt-6 flex flex-wrap items-center justify-end gap-2 pr-2;
+  }
+
+  .ga-modal__close-icon {
+    @apply -mt-2 -mr-2;
+  }
+}

package/src/styles/components/tag.css

@@ -161,6 +161,6 @@
   }
 
   .ga-tag__separator {
-    @apply h-5 w-px bg-(--ga-color-border-primary);
+    @apply h-5 w-px bg-(--ga-color-border-disabled);
   }
 }

package/src/styles/components.css

@@ -8,6 +8,7 @@
 @import './components/input.css';
 @import './components/notification.css';
 @import './components/menu.css';
+@import './components/modal.css';
 @import './components/radio.css';
 @import './components/segmented-control.css';
 @import './components/select.css';