@vsn-ux/gaia-styles 0.3.2 → 0.4.0

package/dist/all-no-reset.css

@@ -1,5 +1,35 @@
-/*! tailwindcss v4.0.15 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.1 | MIT License | https://tailwindcss.com */
+@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+  @layer base {
+    *, ::before, ::after, ::backdrop {
+      --tw-border-style: solid;
+      --tw-font-weight: initial;
+      --tw-leading: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
+      --tw-content: "";
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
+      --tw-duration: initial;
+    }
+  }
+}
 :root {
+  --ga-color-black: #000000;
   --ga-color-blue-10: #edf4fe;
   --ga-color-blue-40: #93bbf9;
   --ga-color-blue-60: #366af6;
@@ -11,7 +41,7 @@
   --ga-color-border-error: var(--ga-color-error);
   --ga-color-border-focus: var(--ga-color-primary);
   --ga-color-border-information: var(--ga-color-information);
-  --ga-color-border-primary: var(--ga-color-neutral-30);
+  --ga-color-border-primary: var(--ga-color-neutral-60);
   --ga-color-border-secondary: var(--ga-color-secondary-30);
   --ga-color-border-success: var(--ga-color-success);
   --ga-color-border-warning: var(--ga-color-warning);
@@ -35,6 +65,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-primary: var(--ga-color-primary-90);
   --ga-color-icon-success: var(--ga-color-success);
   --ga-color-icon-warning: var(--ga-color-warning);
@@ -44,6 +76,9 @@
   --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-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);
   --ga-color-neutral-10: #f2f3f5;
   --ga-color-neutral-20: #e2e4e9;
@@ -63,6 +98,7 @@
   --ga-color-primary-90: var(--ga-color-cyan-90);
   --ga-color-purple-10: #f3f1fe;
   --ga-color-purple-40: #c3acf9;
+  --ga-color-purple-80: #591ab5;
   --ga-color-red-10: #fcf1ee;
   --ga-color-red-40: #eca79e;
   --ga-color-red-60: #cc453e;
@@ -72,12 +108,22 @@
   --ga-color-secondary: var(--ga-color-orange-20);
   --ga-color-secondary-10: var(--ga-color-orange-10);
   --ga-color-secondary-30: var(--ga-color-orange-30);
+  --ga-color-sequential-graph-10: var(--ga-color-teal-10);
+  --ga-color-sequential-graph-20: var(--ga-color-teal-20);
+  --ga-color-sequential-graph-30: var(--ga-color-teal-30);
+  --ga-color-sequential-graph-40: var(--ga-color-teal-40);
+  --ga-color-sequential-graph-50: var(--ga-color-teal-50);
+  --ga-color-sequential-graph-60: var(--ga-color-teal-60);
+  --ga-color-sequential-graph-70: var(--ga-color-teal-70);
+  --ga-color-sequential-graph-80: var(--ga-color-teal-80);
+  --ga-color-sequential-graph-90: var(--ga-color-teal-90);
+  --ga-color-sequential-graph-100: var(--ga-color-teal-100);
   --ga-color-success: var(--ga-color-green-60);
   --ga-color-success-light: var(--ga-color-utility-green-light);
   --ga-color-surface-action: var(--ga-color-primary);
   --ga-color-surface-action-hover: var(--ga-color-primary-90);
   --ga-color-surface-action-hover-2: var(--ga-color-orange-20);
-  --ga-color-surface-disable-selected: var(--ga-color-neutral-50);
+  --ga-color-surface-disable-selected: var(--ga-color-neutral-60);
   --ga-color-surface-disabled: var(--ga-color-neutral-20);
   --ga-color-surface-error: var(--ga-color-utility-red-light);
   --ga-color-surface-information: var(--ga-color-information-light);
@@ -99,10 +145,11 @@
   --ga-color-text-action-hover: var(--ga-color-primary-90);
   --ga-color-text-body: var(--ga-color-primary-90);
   --ga-color-text-disable-selected: var(--ga-color-neutral-60);
-  --ga-color-text-disabled: var(--ga-color-neutral);
+  --ga-color-text-disabled: var(--ga-color-utility-grey);
   --ga-color-text-error: var(--ga-color-primary-90);
   --ga-color-text-headings: var(--ga-color-primary-90);
   --ga-color-text-information: var(--ga-color-primary-90);
+  --ga-color-text-link-visited: var(--ga-color-purple-80);
   --ga-color-text-on-action: var(--ga-color-secondary-10);
   --ga-color-text-on-disabled: var(--ga-color-primary-70);
   --ga-color-text-success: var(--ga-color-primary-90);
@@ -136,36 +183,70 @@
   --ga-color-white: #ffffff;
   --ga-color-yellow-10: #fdf5ae;
   --ga-color-yellow-40: #e1b402;
-  --ga-font-family: "Inter";
+  --ga-font-family-primary: "Inter", -system-ui, sans-serif;
+  --ga-font-weight-bold: 700;
+  --ga-font-weight-medium: 500;
+  --ga-font-weight-normal: 400;
+  --ga-font-weight-semibold: 600;
   --ga-radius: 4px;
-  --ga-radius-round: 99999px;
-  --ga-radius-sharp: 0.28px;
-  --ga-size-0: 0;
-  --ga-size-2: 2px;
-  --ga-size-4: 4px;
-  --ga-size-8: 8px;
-  --ga-size-10: 10px;
-  --ga-size-11: 11px;
-  --ga-size-12: 12px;
-  --ga-size-14: 14px;
-  --ga-size-16: 16px;
-  --ga-size-20: 20px;
-  --ga-size-24: 24px;
-  --ga-size-32: 32px;
-  --ga-size-36: 36px;
-  --ga-size-40: 40px;
-  --ga-size-48: 48px;
-  --ga-size-64: 64px;
-  --ga-size-80: 80px;
-  --ga-size-96: 96px;
-  --ga-size-160: 160px;
-  --ga-size-font-2xl: var(--ga-size-24);
-  --ga-size-font-3xl: var(--ga-size-36);
-  --ga-size-font-lg: var(--ga-size-16);
-  --ga-size-font-md: var(--ga-size-14);
-  --ga-size-font-sm: var(--ga-size-12);
-  --ga-size-font-xl: var(--ga-size-20);
-  --ga-size-font-xs: var(--ga-size-11);
+  --ga-radius-round: 999px;
+  --ga-radius-sharp: 0.02rem;
+  --ga-size-border-width-lg: 4px;
+  --ga-size-border-width-md: 2px;
+  --ga-size-border-width-none: 0;
+  --ga-size-border-width-sm: 1px;
+  --ga-size-spacing-00: 0;
+  --ga-size-spacing-01: 0.125rem;
+  --ga-size-spacing-02: 0.25rem;
+  --ga-size-spacing-03: 0.5rem;
+  --ga-size-spacing-04: 0.75rem;
+  --ga-size-spacing-05: 1rem;
+  --ga-size-spacing-06: 1.5rem;
+  --ga-size-spacing-07: 2rem;
+  --ga-size-spacing-08: 2.5rem;
+  --ga-size-spacing-09: 3rem;
+  --ga-size-spacing-10: 4rem;
+  --ga-size-spacing-11: 5rem;
+  --ga-size-spacing-12: 6rem;
+  --ga-size-spacing-13: 10rem;
+  --ga-text-2xl-font-size: 1.5rem;
+  --ga-text-2xl-font-style: normal;
+  --ga-text-2xl-line-height: 2.25;
+  --ga-text-2xl-tracking: -0.019rem;
+  --ga-text-3xl-font-size: 2.25rem;
+  --ga-text-3xl-font-style: normal;
+  --ga-text-3xl-line-height: 3.5;
+  --ga-text-3xl-tracking: -0.022rem;
+  --ga-text-lg-font-size: 1rem;
+  --ga-text-lg-font-style: normal;
+  --ga-text-lg-line-height: 1.5;
+  --ga-text-lg-tracking: -0.011rem;
+  --ga-text-md-font-size: 0.875rem;
+  --ga-text-md-font-style: normal;
+  --ga-text-md-line-height: 1.25;
+  --ga-text-md-tracking: -0.006rem;
+  --ga-text-sm-font-size: 0.75rem;
+  --ga-text-sm-font-style: normal;
+  --ga-text-sm-line-height: 1.25;
+  --ga-text-sm-tracking: 0;
+  --ga-text-xl-font-size: 1.25rem;
+  --ga-text-xl-font-style: normal;
+  --ga-text-xl-line-height: 2;
+  --ga-text-xl-tracking: -0.017rem;
+  --ga-text-xs-font-size: 0.6875rem;
+  --ga-text-xs-font-style: normal;
+  --ga-text-xs-line-height: 1;
+  --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 {
@@ -197,15 +278,15 @@
     &.ga-avatar--small {
       height: calc(0.25rem * 6);
       width: calc(0.25rem * 6);
-      font-size: var(--ga-size-font-sm);
-      line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+      font-size: var(--ga-text-sm-font-size);
+      line-height: var(--tw-leading, var(--ga-text-sm-line-height));
       letter-spacing: var(--tw-tracking, 0);
     }
     &.ga-avatar--large {
       height: calc(0.25rem * 16);
       width: calc(0.25rem * 16);
-      font-size: var(--ga-size-font-2xl);
-      line-height: var(--tw-leading, calc(var(--spacing) * 4 * 2.25));
+      font-size: var(--ga-text-2xl-font-size);
+      line-height: var(--tw-leading, var(--ga-text-2xl-line-height));
       letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.019));
     }
   }
@@ -217,8 +298,8 @@
       min-width: calc(0.25rem * 6);
       padding: calc(0.25rem * 1);
       text-align: center;
-      font-size: var(--ga-size-font-sm);
-      line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+      font-size: var(--ga-text-sm-font-size);
+      line-height: var(--tw-leading, var(--ga-text-sm-line-height));
       letter-spacing: var(--tw-tracking, 0);
       --tw-leading: calc(0.25rem * 4);
       line-height: calc(0.25rem * 4);
@@ -277,8 +358,8 @@
     border-radius: var(--ga-radius);
     padding-inline: calc(0.25rem * 4);
     vertical-align: middle;
-    font-size: var(--ga-size-font-md);
-    line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+    font-size: var(--ga-text-md-font-size);
+    line-height: var(--tw-leading, var(--ga-text-md-line-height));
     letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
     --tw-leading: calc(0.25rem * 1);
     line-height: calc(0.25rem * 1);
@@ -321,7 +402,7 @@
       }
       &:disabled {
         border-color: var(--ga-color-border-disabled);
-        background-color: var(--ga-color-surace-page);
+        background-color: var(--ga-color-surface-page);
         color: var(--ga-color-text-disabled);
       }
     }
@@ -373,8 +454,8 @@
     border-color: var(--ga-color-border-primary);
     background-color: #fff;
     padding: calc(0.25rem * 4);
-    font-size: var(--ga-size-font-md);
-    line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+    font-size: var(--ga-text-md-font-size);
+    line-height: var(--tw-leading, var(--ga-text-md-line-height));
     letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
     &.ga-card--selectable {
       cursor: pointer;
@@ -471,8 +552,8 @@
     }
     .ga-checkbox__label {
       min-height: calc(0.25rem * 4);
-      font-size: var(--ga-size-font-md);
-      line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+      font-size: var(--ga-text-md-font-size);
+      line-height: var(--tw-leading, var(--ga-text-md-line-height));
       letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
       --tw-leading: calc(0.25rem * 4);
       line-height: calc(0.25rem * 4);
@@ -493,8 +574,8 @@
     border-width: 1px;
     border-color: var(--ga-color-border-primary);
     background-color: var(--ga-color-surface-primary);
-    font-size: var(--ga-size-font-md);
-    line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+    font-size: var(--ga-text-md-font-size);
+    line-height: var(--tw-leading, var(--ga-text-md-line-height));
     letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
     --tw-outline-style: none;
     outline-style: none;
@@ -511,8 +592,8 @@
       padding-inline: calc(0.25rem * 3);
       padding-block: calc(0.25rem * 2);
       text-align: left;
-      font-size: var(--ga-size-font-md);
-      line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+      font-size: var(--ga-text-md-font-size);
+      line-height: var(--tw-leading, var(--ga-text-md-line-height));
       letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
       --tw-leading: 1;
       line-height: 1;
@@ -569,8 +650,8 @@
       padding-inline: calc(0.25rem * 3);
       padding-top: calc(0.25rem * 3);
       padding-bottom: calc(0.25rem * 2);
-      font-size: var(--ga-size-font-sm);
-      line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+      font-size: var(--ga-text-sm-font-size);
+      line-height: var(--tw-leading, var(--ga-text-sm-line-height));
       letter-spacing: var(--tw-tracking, 0);
       --tw-font-weight: 600;
       font-weight: 600;
@@ -620,15 +701,15 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      font-size: var(--ga-size-font-md);
-      line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+      font-size: var(--ga-text-md-font-size);
+      line-height: var(--tw-leading, var(--ga-text-md-line-height));
       letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
       --tw-font-weight: 500;
       font-weight: 500;
     }
     .ga-form-field__label-state {
-      font-size: var(--ga-size-font-sm);
-      line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+      font-size: var(--ga-text-sm-font-size);
+      line-height: var(--tw-leading, var(--ga-text-sm-line-height));
       letter-spacing: var(--tw-tracking, 0);
       --tw-font-weight: 400;
       font-weight: 400;
@@ -655,8 +736,8 @@
       display: flex;
       align-items: center;
       gap: calc(0.25rem * 1);
-      font-size: var(--ga-size-font-xs);
-      line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1));
+      font-size: var(--ga-text-xs-font-size);
+      line-height: var(--tw-leading, var(--ga-text-xs-line-height));
       letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * 0.005));
     }
   }
@@ -674,8 +755,8 @@
     background-color: var(--ga-color-bg-primary);
     padding-inline: calc(0.25rem * 3);
     padding-block: calc(0.25rem * 2);
-    font-size: var(--ga-size-font-md);
-    line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+    font-size: var(--ga-text-md-font-size);
+    line-height: var(--tw-leading, var(--ga-text-md-line-height));
     letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
     &:hover {
       border-color: var(--ga-color-border-action-hover);
@@ -748,8 +829,8 @@
     padding-right: calc(0.25rem * 2);
     padding-bottom: calc(0.25rem * 4);
     padding-left: calc(0.25rem * 4);
-    font-size: var(--ga-size-font-md);
-    line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+    font-size: var(--ga-text-md-font-size);
+    line-height: var(--tw-leading, var(--ga-text-md-line-height));
     letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
     &.ga-notification--information {
       border-color: var(--ga-color-border-information);
@@ -813,8 +894,8 @@
     border-width: 1px;
     border-color: var(--ga-color-border-primary);
     background-color: var(--ga-color-surface-primary);
-    font-size: var(--ga-size-font-md);
-    line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+    font-size: var(--ga-text-md-font-size);
+    line-height: var(--tw-leading, var(--ga-text-md-line-height));
     letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
     .ga-menu__item {
       position: relative;
@@ -924,8 +1005,8 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      font-size: var(--ga-size-font-md);
-      line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+      font-size: var(--ga-text-md-font-size);
+      line-height: var(--tw-leading, var(--ga-text-md-line-height));
       letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
       --tw-font-weight: 500;
       font-weight: 500;
@@ -939,16 +1020,16 @@
       border-color: var(--ga-color-border-disabled);
       background-color: #fff;
       padding-inline: calc(0.25rem * 1);
-      font-size: var(--ga-size-font-xs);
-      line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1));
+      font-size: var(--ga-text-xs-font-size);
+      line-height: var(--tw-leading, var(--ga-text-xs-line-height));
       letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * 0.005));
       --tw-font-weight: 500;
       font-weight: 500;
       color: var(--ga-color-text-body);
     }
     .ga-menu__item-description {
-      font-size: var(--ga-size-font-xs);
-      line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1));
+      font-size: var(--ga-text-xs-font-size);
+      line-height: var(--tw-leading, var(--ga-text-xs-line-height));
       letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * 0.005));
       color: var(--ga-color-text-disable-selected);
     }
@@ -962,8 +1043,8 @@
       padding-inline: calc(0.25rem * 3);
       padding-top: calc(0.25rem * 3);
       padding-bottom: calc(0.25rem * 2);
-      font-size: var(--ga-size-font-sm);
-      line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+      font-size: var(--ga-text-sm-font-size);
+      line-height: var(--tw-leading, var(--ga-text-sm-line-height));
       letter-spacing: var(--tw-tracking, 0);
       --tw-font-weight: 600;
       font-weight: 600;
@@ -1060,8 +1141,8 @@
     }
     .ga-radio-button__label {
       min-height: calc(0.25rem * 4);
-      font-size: var(--ga-size-font-md);
-      line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+      font-size: var(--ga-text-md-font-size);
+      line-height: var(--tw-leading, var(--ga-text-md-line-height));
       letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
       --tw-leading: calc(0.25rem * 4);
       line-height: calc(0.25rem * 4);
@@ -1072,64 +1153,54 @@
   }
   .ga-segmented-control {
     display: inline-flex;
-    height: calc(0.25rem * 10);
     align-items: center;
     justify-content: center;
+    gap: calc(0.25rem * 1);
+    border-radius: var(--ga-radius);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--ga-color-border-primary);
+    padding: calc(0.25rem * 0.5);
     vertical-align: middle;
-    font-size: var(--ga-size-font-md);
-    line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+    font-size: var(--ga-text-md-font-size);
+    line-height: var(--tw-leading, var(--ga-text-md-line-height));
     letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
     .ga-segmented-control__button {
       display: inline-flex;
-      height: calc(0.25rem * 10);
+      height: calc(0.25rem * 9);
+      cursor: pointer;
       align-items: center;
       justify-content: center;
       gap: calc(0.25rem * 2);
-      border-top-style: var(--tw-border-style);
-      border-top-width: 1px;
-      border-bottom-style: var(--tw-border-style);
-      border-bottom-width: 1px;
-      border-left-style: var(--tw-border-style);
-      border-left-width: 1px;
-      border-color: var(--ga-color-neutral-30);
-      background-color: #fff;
+      border-radius: var(--ga-radius);
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      border-color: transparent;
+      background-color: var(--ga-color-surface-primary);
       padding-inline: calc(0.25rem * 4);
       vertical-align: middle;
       --tw-leading: calc(0.25rem * 1);
       line-height: calc(0.25rem * 1);
-      --tw-font-weight: 500;
-      font-weight: 500;
-      color: var(--ga-color-cyan-80);
-      &:first-of-type {
-        border-top-left-radius: var(--ga-radius);
-        border-bottom-left-radius: var(--ga-radius);
+      color: var(--ga-color-text-action);
+      &.ga-segmented-control__button--selected, &:hover {
+        border-color: var(--ga-color-border-action);
       }
-      &:last-of-type {
-        border-top-right-radius: var(--ga-radius);
-        border-bottom-right-radius: var(--ga-radius);
-        border-right-style: var(--tw-border-style);
-        border-right-width: 1px;
+      &:hover {
+        background-color: var(--ga-color-surface-action-hover-2);
+        color: var(--ga-color-text-action-hover);
       }
-      &.ga-segmented-control__button--selected {
-        background-color: var(--ga-color-cyan-80);
-        --tw-font-weight: 600;
-        font-weight: 600;
-        color: var(--ga-color-orange-10);
+      &:focus-visible {
+        outline-style: var(--tw-outline-style);
+        outline-width: 2px;
+        outline-offset: 2px;
+        outline-color: var(--ga-color-border-focus);
       }
-      &:not( .ga-segmented-control__button--selected, .ga-segmented-control__button--disabled, :disabled ) {
-        cursor: pointer;
+      &.ga-segmented-control__button--icon-only {
+        padding-inline: 0.5625rem;
         &:hover {
-          background-color: var(--ga-color-surface-action-hover-2);
-        }
-        &:active {
-          background-color: #fff;
+          color: var(--ga-color-icon-action-hover);
         }
       }
-      &.ga-segmented-control__button--disabled, &:disabled {
-        border-color: var(--ga-color-neutral-30);
-        background-color: var(--ga-color-neutral-10);
-        color: var(--ga-color-grey-40);
-      }
     }
   }
   .ga-native-select {
@@ -1145,8 +1216,8 @@
       padding-block: calc(0.25rem * 2);
       padding-right: calc(0.25rem * 9);
       padding-left: calc(0.25rem * 3);
-      font-size: var(--ga-size-font-md);
-      line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+      font-size: var(--ga-text-md-font-size);
+      line-height: var(--tw-leading, var(--ga-text-md-line-height));
       letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
       --tw-leading: 1;
       line-height: 1;
@@ -1176,8 +1247,8 @@
     padding-inline: calc(0.25rem * 3);
     padding-block: calc(0.25rem * 2);
     text-align: left;
-    font-size: var(--ga-size-font-md);
-    line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+    font-size: var(--ga-text-md-font-size);
+    line-height: var(--tw-leading, var(--ga-text-md-line-height));
     letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
     --tw-leading: 1;
     line-height: 1;
@@ -1242,6 +1313,117 @@
       }
     }
   }
+  .ga-switch {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: calc(0.25rem * 3);
+    .ga-switch__marker {
+      pointer-events: none;
+      position: absolute;
+      top: calc(0.25rem * 0);
+      left: calc(0.25rem * 0);
+      display: inline-block;
+      height: calc(0.25rem * 6);
+      width: calc(0.25rem * 12);
+      border-radius: calc(infinity * 1px);
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      border-color: var(--ga-color-border-action);
+      background-color: var(--ga-color-surface-primary);
+    }
+    .ga-switch__check-icon {
+      position: absolute;
+      top: calc(0.25rem * 0.75);
+      left: calc(0.25rem * 1.5);
+      color: var(--ga-color-icon-on-primary);
+      opacity: 0%;
+      transition-property: opacity;
+      transition-timing-function: var(--tw-ease, ease);
+      transition-duration: var(--tw-duration, 0s);
+      --tw-duration: 300ms;
+      transition-duration: 300ms;
+    }
+    .ga-switch__slider {
+      pointer-events: none;
+      position: absolute;
+      top: calc(0.25rem * 0.75);
+      left: calc(0.25rem * 0.75);
+      display: inline-block;
+      height: calc(0.25rem * 4);
+      width: calc(0.25rem * 4);
+      border-radius: calc(infinity * 1px);
+      background-color: var(--ga-color-surface-action);
+      transition-property: transform, translate, scale, rotate;
+      transition-timing-function: var(--tw-ease, ease);
+      transition-duration: var(--tw-duration, 0s);
+      --tw-duration: 300ms;
+      transition-duration: 300ms;
+    }
+    .ga-switch__label {
+      -webkit-user-select: none;
+      user-select: none;
+    }
+    input {
+      display: inline-block;
+      height: calc(0.25rem * 6);
+      width: calc(0.25rem * 12);
+      cursor: pointer;
+      border-radius: calc(infinity * 1px);
+      opacity: 0%;
+      &:hover ~ .ga-switch__marker {
+        background-color: var(--ga-color-surface-action-hover-2);
+        .ga-switch__slider {
+          background-color: var(--ga-color-surface-action-hover);
+        }
+      }
+      &:checked {
+        ~ .ga-switch__marker {
+          border-color: var(--ga-color-border-action);
+          background-color: var(--ga-color-surface-action);
+          .ga-switch__slider {
+            --tw-translate-x: calc(0.25rem * 6);
+            translate: var(--tw-translate-x) var(--tw-translate-y);
+            background-color: var(--ga-color-surface-primary);
+          }
+          .ga-switch__check-icon {
+            opacity: 100%;
+          }
+        }
+        &:hover:not(:disabled) ~ .ga-switch__marker {
+          background-color: var(--ga-color-surface-action-hover);
+          .ga-switch__slider {
+            background-color: var(--ga-color-surface-action-hover-2);
+          }
+        }
+      }
+      &:focus-visible ~ .ga-switch__marker {
+        outline-style: var(--tw-outline-style);
+        outline-width: 2px;
+        outline-offset: 2px;
+        outline-color: var(--ga-color-border-focus);
+      }
+      &:disabled {
+        cursor: not-allowed;
+        ~ .ga-switch__marker {
+          border-color: var(--ga-color-border-disabled);
+          background-color: var(--ga-color-surface-disabled);
+          .ga-switch__check-icon {
+            color: var(--ga-color-icon-on-disabled);
+          }
+          .ga-switch__slider {
+            background-color: var(--ga-color-icon-on-disabled);
+          }
+        }
+      }
+    }
+    &.ga-switch--invalid input ~ .ga-switch__marker {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+      outline-offset: 2px;
+      outline-color: var(--ga-color-border-error);
+    }
+  }
   .ga-tag {
     box-sizing: content-box;
     display: inline-flex;
@@ -1255,8 +1437,8 @@
     border-color: var(--ga-color-border-action);
     padding-right: calc(0.25rem * 1);
     padding-left: calc(0.25rem * 2);
-    font-size: var(--ga-size-font-sm);
-    line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+    font-size: var(--ga-text-sm-font-size);
+    line-height: var(--tw-leading, var(--ga-text-sm-line-height));
     letter-spacing: var(--tw-tracking, 0);
     &:focus-visible {
       outline-style: var(--tw-outline-style);
@@ -1427,8 +1609,8 @@
     border-width: 1px;
     border-color: var(--ga-color-border-primary);
     background-color: var(--ga-color-bg-primary);
-    font-size: var(--ga-size-font-md);
-    line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+    font-size: var(--ga-text-md-font-size);
+    line-height: var(--tw-leading, var(--ga-text-md-line-height));
     letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
     &:has(textarea:hover) {
       border-color: var(--ga-color-border-action-hover);
@@ -1470,8 +1652,8 @@
     border-radius: var(--ga-radius);
     background-color: var(--ga-color-surface-action-hover);
     padding: calc(0.25rem * 2);
-    font-size: var(--ga-size-font-md);
-    line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+    font-size: var(--ga-text-md-font-size);
+    line-height: var(--tw-leading, var(--ga-text-md-line-height));
     letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
     color: var(--ga-color-text-on-action);
     &.ga-tooltip--top-start, &.ga-tooltip--top-center, &.ga-tooltip--top-end, &.ga-tooltip--bottom-start, &.ga-tooltip--bottom-center, &.ga-tooltip--bottom-end, &.ga-tooltip--left-start, &.ga-tooltip--left-center, &.ga-tooltip--left-end, &.ga-tooltip--right-start, &.ga-tooltip--right-center, &.ga-tooltip--right-end {
@@ -1583,6 +1765,11 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
 @property --tw-inset-shadow {
   syntax: "*";
   inherits: false;
@@ -1592,6 +1779,11 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
 @property --tw-ring-color {
   syntax: "*";
   inherits: false;
@@ -1654,3 +1846,7 @@
   inherits: false;
   initial-value: 0;
 }
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}