@vsn-ux/gaia-styles 0.5.19 → 0.6.1

package/src/design-tokens/resolver.json

@@ -0,0 +1,22 @@
+{
+  "name": "Gaia Design System",
+  "version": "2025.10",
+  "resolutionOrder": [
+    { "$ref": "#/sets/foundation" },
+    { "$ref": "#/modifiers/viewport" }
+  ],
+  "sets": {
+    "foundation": {
+      "sources": [{ "$ref": "dtcg-tokens.json" }]
+    }
+  },
+  "modifiers": {
+    "viewport": {
+      "contexts": {
+        "mobile": [],
+        "desktop": [{ "$ref": "desktop-overrides.json" }]
+      },
+      "default": "mobile"
+    }
+  }
+}

package/src/styles/all-10pt.css

@@ -1,4 +1,5 @@
 @import '../../dist/design-tokens.css';
+@import './utilities.css';
 
 @layer theme, base, components, utilities;
 

package/src/styles/all-no-reset-10pt.css

@@ -1,4 +1,5 @@
 @import '../../dist/design-tokens.css';
+@import './utilities.css';
 
 @layer theme, base, components, utilities;
 

package/src/styles/all-no-reset.css

@@ -1,4 +1,5 @@
 @import '../../dist/design-tokens.css';
+@import './utilities.css';
 
 @layer theme, base, components, utilities;
 

package/src/styles/all.css

@@ -1,4 +1,5 @@
 @import '../../dist/design-tokens.css';
+@import './utilities.css';
 
 @layer theme, base, components, utilities;
 

package/src/styles/components/badge.css

@@ -17,19 +17,19 @@
     }
 
     &.ga-badge--information {
-      @apply bg-(--ga-color-utility-blue-light) text-(--ga-color-text-information) ring-1 ring-(--ga-color-border-information) ring-inset;
+      @apply bg-(--ga-color-utility-blue-accent) text-(--ga-color-text-information) ring-1 ring-(--ga-color-border-information) ring-inset;
     }
 
     &.ga-badge--error {
-      @apply bg-(--ga-color-utility-red-light) text-(--ga-color-text-error) ring-1 ring-(--ga-color-border-error) ring-inset;
+      @apply bg-(--ga-color-utility-red-accent) text-(--ga-color-text-error) ring-1 ring-(--ga-color-border-error) ring-inset;
     }
 
     &.ga-badge--warning {
-      @apply bg-(--ga-color-utility-orange-light) text-(--ga-color-text-warning) ring-1 ring-(--ga-color-border-warning) ring-inset;
+      @apply bg-(--ga-color-utility-orange-accent) text-(--ga-color-text-warning) ring-1 ring-(--ga-color-border-warning) ring-inset;
     }
 
     &.ga-badge--success {
-      @apply bg-(--ga-color-utility-green-light) text-(--ga-color-text-success) ring-1 ring-(--ga-color-border-success) ring-inset;
+      @apply bg-(--ga-color-utility-green-accent) text-(--ga-color-text-success) ring-1 ring-(--ga-color-border-success) ring-inset;
     }
 
     &.ga-badge--disabled {
@@ -37,7 +37,7 @@
     }
 
     &.ga-badge--disabled-inverted {
-      @apply bg-(--ga-color-icon-pictograms-pictogram-fill) text-(--ga-color-text-disabled);
+      @apply bg-(--ga-color-icon-on-primary) text-(--ga-color-text-disabled);
     }
   }
 
@@ -77,7 +77,7 @@
     }
 
     &.ga-badge--disabled-inverted {
-      @apply bg-(--ga-color-icon-pictograms-pictogram-fill);
+      @apply bg-(--ga-color-icon-on-primary);
     }
   }
 }

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-medium whitespace-nowrap;
+  @apply text-md animate-hover inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded px-4 align-middle leading-1 font-medium whitespace-nowrap transition-colors;
 
   .ga-icon {
     @apply text-(--ga-color-icon-action);
@@ -29,7 +29,7 @@
     }
 
     &:active {
-      @apply bg-(--ga-color-primary-70);
+      @apply bg-(--ga-color-surface-action);
     }
 
     &:disabled {

package/src/styles/components/calendar.css

@@ -22,7 +22,7 @@
   }
 
   .ga-calendar__navigation-button {
-    @apply cursor-pointer hover:text-(--ga-color-icon-action-hover);
+    @apply animate-hover cursor-pointer transition-colors hover:text-(--ga-color-icon-action-hover);
   }
 
   .ga-calendar__week-row {
@@ -51,7 +51,7 @@
 
   .ga-calendar__year,
   .ga-calendar__month {
-    @apply h-10 cursor-pointer rounded text-center text-lg leading-10 font-medium text-(--ga-color-text-action);
+    @apply animate-hover h-10 cursor-pointer rounded text-center text-lg leading-10 font-medium text-(--ga-color-text-action) transition-colors;
 
     &:not(.ga-calendar__year--disabled, .ga-calendar__month--disabled):hover {
       @apply text-(--ga-color-text-action-hover) underline underline-offset-6;
@@ -69,7 +69,7 @@
   }
 
   .ga-calendar__day {
-    @apply text-md relative flex h-10 cursor-pointer items-center justify-center rounded text-center text-(--ga-color-text-body);
+    @apply text-md animate-hover relative flex h-10 cursor-pointer items-center justify-center rounded text-center text-(--ga-color-text-body) transition-colors;
 
     &:hover {
       @apply bg-(--ga-color-surface-action-hover-2) text-(--ga-color-text-action-hover);
@@ -113,7 +113,7 @@
     }
 
     &.ga-calendar__day--selected-range-middle {
-      @apply rounded-none border-y border-(--ga-color-border-success) bg-(--ga-color-success-light) text-(--ga-color-text-body);
+      @apply rounded-none border-y border-(--ga-color-border-success) bg-(--ga-color-success-accent) text-(--ga-color-text-body);
     }
 
     &.ga-calendar__day--selected-range-end {

package/src/styles/components/card.css

@@ -1,15 +1,19 @@
 .ga-card {
-  @apply text-md inline-block rounded border border-(--ga-color-border-primary) bg-white p-4;
+  @apply text-md inline-block rounded border border-(--ga-color-border-tertiary) bg-white p-4;
 
   &.ga-card--selectable {
-    @apply cursor-pointer;
+    @apply animate-hover relative cursor-pointer transition-[color,background-color,border-color,box-shadow];
 
     &:hover:not(.ga-card--selected) {
-      @apply border-(--ga-color-border-action-hover) bg-(--ga-color-surface-action-hover-2);
+      @apply shadow-north border-(--ga-color-border-action-hover) bg-(--ga-color-surface-action-hover-2);
     }
 
     &:focus-visible {
-      @apply outline-2 outline-offset-2 outline-(--ga-color-border-focus);
+      @apply outline-none;
+    }
+
+    &:focus-visible::after {
+      @apply absolute -inset-[5px] border-2 border-(--ga-color-border-focus) content-[''];
     }
   }
 

package/src/styles/components/checkbox.css

@@ -2,7 +2,7 @@
   @apply relative inline-flex gap-2;
 
   .ga-checkbox__marker {
-    @apply pointer-events-none absolute top-0 left-0 h-4 w-4 rounded border-2 border-(--ga-color-border-action) text-white;
+    @apply animate-state pointer-events-none absolute top-0 left-0 h-4 w-4 rounded border-2 border-(--ga-color-border-action) text-white transition-colors;
 
     .ga-checkbox__marker__indicator-checked,
     .ga-checkbox__marker__indicator-indeterminate {

package/src/styles/components/datepicker.css

@@ -1,5 +1,5 @@
 .ga-datepicker {
-  @apply rounded border border-(--ga-color-border-primary) bg-(--ga-color-surface-primary) p-4;
+  @apply shadow-north rounded border border-(--ga-color-border-primary) bg-(--ga-color-surface-primary) p-4;
 
   .ga-datepicker__footer {
     @apply mt-2;

package/src/styles/components/dropdown.css

@@ -1,5 +1,5 @@
 .ga-dropdown {
-  @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;
+  @apply text-md shadow-north 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;
 
   @supports (scroll-timeline: --dropdown-scroll block) {
     scroll-timeline: --dropdown-scroll block;
@@ -12,7 +12,7 @@
   }
 
   .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 text-(--ga-color-text-action);
+    @apply text-md animate-hover 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) transition-colors;
 
     &:first-child {
       @apply rounded-t;

package/src/styles/components/form-field.css

@@ -15,7 +15,7 @@
   }
 
   .ga-form-field__label-text {
-    @apply text-md min-w-0 truncate font-medium;
+    @apply text-md animate-hover min-w-0 truncate font-medium transition-colors;
   }
 
   .ga-form-field__label-state {

package/src/styles/components/input.css

@@ -1,5 +1,5 @@
 .ga-input {
-  @apply text-md flex h-10 w-50 flex-row items-center gap-2 rounded border border-(--ga-color-border-primary) bg-(--ga-color-surface-primary) px-3 py-2;
+  @apply text-md animate-hover flex h-10 w-50 flex-row items-center gap-2 rounded border border-(--ga-color-border-primary) bg-(--ga-color-surface-primary) px-3 py-2 transition-colors;
 
   &:hover {
     @apply border-(--ga-color-border-action-hover);

package/src/styles/components/link.css

@@ -1,5 +1,5 @@
 .ga-link {
-  @apply text-md inline-flex h-5 cursor-pointer items-center justify-center gap-1 rounded px-0.5 align-middle font-medium whitespace-nowrap text-(--ga-color-text-action) tabular-nums;
+  @apply text-md animate-hover inline-flex h-5 cursor-pointer items-center justify-center gap-1 rounded px-0.5 align-middle font-medium whitespace-nowrap text-(--ga-color-text-action) tabular-nums transition-colors;
 
   &.ga-link--inline {
     @apply underline decoration-(--ga-color-primary-90) decoration-1;

package/src/styles/components/menu.css

@@ -1,8 +1,8 @@
 .ga-menu {
-  @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);
+  @apply text-md shadow-north 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);
 
   .ga-menu__item {
-    @apply relative flex min-h-9 shrink-0 cursor-pointer flex-row gap-2 px-3 py-2 text-left leading-none;
+    @apply animate-hover relative flex min-h-9 shrink-0 cursor-pointer flex-row gap-2 px-3 py-2 text-left leading-none transition-colors;
 
     &:first-child {
       @apply rounded-t;

package/src/styles/components/notification.css

@@ -89,7 +89,7 @@
     @apply absolute right-0 bottom-px left-0 h-1 overflow-hidden rounded-b-[2px] bg-(--ga-color-surface-disabled);
 
     .ga-notification__progress-bar {
-      @apply absolute h-full origin-top-left rounded bg-(--ga-color-primary-70);
+      @apply absolute h-full origin-top-left rounded bg-(--ga-color-surface-progress);
     }
 
     &.ga-notification__progress--indeterminate .ga-notification__progress-bar {

package/src/styles/components/progress-bar.css

@@ -14,7 +14,7 @@
   }
 
   .ga-progress__bar {
-    @apply absolute h-full w-full origin-top-left rounded bg-(--ga-color-primary-70);
+    @apply absolute h-full w-full origin-top-left rounded bg-(--ga-color-surface-progress);
   }
 
   &.ga-progress--success {

package/src/styles/components/progress-indicator.css

@@ -40,7 +40,7 @@
   }
 
   .ga-progress-indicator__label-text {
-    @apply text-md min-w-0 truncate font-medium text-(--ga-color-text-action);
+    @apply text-md animate-hover min-w-0 truncate font-medium text-(--ga-color-text-action) transition-colors;
   }
 
   .ga-progress-indicator__label-state {

package/src/styles/components/quick-filter-button.css

@@ -1,5 +1,5 @@
 .ga-quick-filter-button {
-  @apply text-md inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded-full px-4 align-middle leading-1 font-medium whitespace-nowrap;
+  @apply text-md animate-hover inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded-full px-4 align-middle leading-1 font-medium whitespace-nowrap transition-colors;
   @apply border border-(--ga-color-border-action) bg-(--ga-color-surface-primary) text-(--ga-color-text-action);
 
   .ga-icon {

package/src/styles/components/radio.css

@@ -58,7 +58,7 @@
   }
 
   .ga-radio-button__marker {
-    @apply pointer-events-none absolute top-0 left-0 h-4 w-4 rounded-full border-2 border-(--ga-color-border-action) text-white;
+    @apply animate-state pointer-events-none absolute top-0 left-0 h-4 w-4 rounded-full border-2 border-(--ga-color-border-action) text-white transition-colors;
   }
 
   .ga-radio-button__label {

package/src/styles/components/segmented-control.css

@@ -1,8 +1,8 @@
 .ga-segmented-control {
-  @apply text-md inline-flex items-center justify-center gap-0.5 rounded border border-(--ga-color-border-primary) p-0.5 align-middle;
+  @apply text-md inline-flex items-center justify-center gap-0.5 rounded border border-(--ga-color-border-tertiary) p-0.5 align-middle;
 
   .ga-segmented-control__button {
-    @apply inline-flex h-8.5 cursor-pointer items-center justify-center gap-2 rounded border border-transparent px-4 align-middle leading-1 whitespace-nowrap text-(--ga-color-text-action);
+    @apply animate-hover inline-flex h-8.5 cursor-pointer items-center justify-center gap-2 rounded border border-transparent px-4 align-middle leading-1 whitespace-nowrap text-(--ga-color-text-action) transition-colors;
 
     &.ga-segmented-control__button--selected,
     &:hover {
@@ -18,7 +18,7 @@
     }
 
     &:focus-visible {
-      @apply outline-2 outline-offset-2 outline-(--ga-color-border-focus);
+      @apply outline-2 outline-offset-1 outline-(--ga-color-border-focus);
     }
 
     &.ga-segmented-control__button--icon-only {

package/src/styles/components/select.css

@@ -11,7 +11,7 @@
 }
 
 .ga-select {
-  @apply text-md inline-flex h-10 w-50 cursor-pointer appearance-none items-start gap-2 rounded border border-(--ga-color-border-primary) bg-(--ga-color-surface-primary) px-2.5 py-1.5 text-left leading-none;
+  @apply text-md animate-hover inline-flex h-10 w-50 cursor-pointer appearance-none items-start gap-2 rounded border border-(--ga-color-border-primary) bg-(--ga-color-surface-primary) px-2.5 py-1.5 text-left leading-none transition-colors;
 
   &.ga-select--expanded {
     @apply border-(--ga-color-border-focus) ring-1 ring-(--ga-color-border-focus);

package/src/styles/components/switch.css

@@ -2,15 +2,15 @@
   @apply relative inline-flex items-center gap-3;
 
   .ga-switch__marker {
-    @apply pointer-events-none absolute top-0 left-0 inline-block h-6 w-12 rounded-full border border-(--ga-color-border-action) bg-(--ga-color-surface-primary);
+    @apply animate-state pointer-events-none absolute top-0 left-0 inline-block h-6 w-12 rounded-full border border-(--ga-color-border-action) bg-(--ga-color-surface-primary) transition-colors;
   }
 
   .ga-switch__check-icon {
-    @apply absolute top-0.75 left-1.5 text-(--ga-color-icon-on-primary) opacity-0 transition-opacity duration-300;
+    @apply animate-state absolute top-0.75 left-1.5 text-(--ga-color-icon-on-primary) opacity-0 transition-opacity;
   }
 
   .ga-switch__slider {
-    @apply pointer-events-none absolute top-0.75 left-0.75 inline-block h-4 w-4 rounded-full bg-(--ga-color-surface-action) transition-transform duration-300;
+    @apply animate-state pointer-events-none absolute top-0.75 left-0.75 inline-block h-4 w-4 rounded-full bg-(--ga-color-surface-action) transition-transform;
   }
 
   .ga-switch__label {

package/src/styles/components/tabs.css

@@ -2,11 +2,11 @@
   @apply flex gap-2;
 
   &.ga-tabs--keyline {
-    @apply border-(--ga-color-border-primary);
+    @apply border-(--ga-color-border-tertiary);
   }
 
   .ga-tabs__tab {
-    @apply text-md relative flex h-8 cursor-pointer items-center gap-2 border-(--ga-color-surface-primary) bg-(--ga-color-surface-primary) leading-4 font-medium text-(--ga-color-text-action);
+    @apply text-md animate-hover relative flex h-8 cursor-pointer items-center gap-2 border-(--ga-color-surface-primary) bg-(--ga-color-surface-primary) leading-4 font-medium text-(--ga-color-text-action) transition-colors;
 
     &.ga-tabs__tab--selected {
       @apply border-(--ga-color-border-action) font-semibold;

package/src/styles/components/tag.css

@@ -46,7 +46,7 @@
   }
 
   &.ga-tag--interactive {
-    @apply cursor-pointer border-dashed bg-(--ga-color-surface-primary);
+    @apply animate-hover cursor-pointer border-dashed bg-(--ga-color-surface-primary) transition-colors;
 
     &:hover {
       @apply bg-(--ga-color-surface-action-hover-2);
@@ -66,7 +66,7 @@
   }
 
   &.ga-tag--interactive-selected {
-    @apply border-solid bg-(--ga-color-surface-primary) text-(--ga-color-text-action);
+    @apply animate-hover border-solid bg-(--ga-color-surface-primary) text-(--ga-color-text-action) transition-colors;
 
     &:hover {
       @apply border-(--ga-color-border-action-hover);
@@ -92,7 +92,6 @@
   &.ga-tag--utility-purple,
   &.ga-tag--utility-pink,
   &.ga-tag--utility-rose,
-  &.ga-tag--utility-yellow,
   &.ga-tag--utility-blue,
   &.ga-tag--utility-green,
   &.ga-tag--utility-orange,
@@ -105,47 +104,43 @@
   }
 
   &.ga-tag--utility-grey {
-    @apply border-(--ga-color-utility-grey) bg-(--ga-color-utility-grey-light);
+    @apply border-(--ga-color-utility-grey) bg-(--ga-color-utility-grey-accent);
   }
 
   &.ga-tag--utility-indigo {
-    @apply border-(--ga-color-utility-indigo) bg-(--ga-color-utility-indigo-light);
+    @apply border-(--ga-color-utility-indigo) bg-(--ga-color-utility-indigo-accent);
   }
 
   &.ga-tag--utility-teal {
-    @apply border-(--ga-color-utility-teal) bg-(--ga-color-utility-teal-light);
+    @apply border-(--ga-color-utility-teal) bg-(--ga-color-utility-teal-accent);
   }
 
   &.ga-tag--utility-lime {
-    @apply border-(--ga-color-utility-lime) bg-(--ga-color-utility-lime-light);
+    @apply border-(--ga-color-utility-lime) bg-(--ga-color-utility-lime-accent);
   }
 
   &.ga-tag--utility-purple {
-    @apply border-(--ga-color-utility-purple) bg-(--ga-color-utility-purple-light);
+    @apply border-(--ga-color-utility-purple) bg-(--ga-color-utility-purple-accent);
   }
 
   &.ga-tag--utility-pink {
-    @apply border-(--ga-color-utility-pink) bg-(--ga-color-utility-pink-light);
+    @apply border-(--ga-color-utility-pink) bg-(--ga-color-utility-pink-accent);
   }
 
   &.ga-tag--utility-rose {
-    @apply border-(--ga-color-utility-rose) bg-(--ga-color-utility-rose-light);
-  }
-
-  &.ga-tag--utility-yellow {
-    @apply border-(--ga-color-utility-yellow) bg-(--ga-color-utility-yellow-light);
+    @apply border-(--ga-color-utility-rose) bg-(--ga-color-utility-rose-accent);
   }
 
   &.ga-tag--utility-blue {
-    @apply border-(--ga-color-utility-blue) bg-(--ga-color-utility-blue-light);
+    @apply border-(--ga-color-utility-blue) bg-(--ga-color-utility-blue-accent);
   }
 
   &.ga-tag--utility-green {
-    @apply border-(--ga-color-utility-green) bg-(--ga-color-utility-green-light);
+    @apply border-(--ga-color-utility-green) bg-(--ga-color-utility-green-accent);
   }
 
   &.ga-tag--utility-orange {
-    @apply border-(--ga-color-utility-orange) bg-(--ga-color-utility-orange-light);
+    @apply border-(--ga-color-utility-orange) bg-(--ga-color-utility-orange-accent);
   }
 
   &.ga-tag--utility-disabled {

package/src/styles/components/text-area.css

@@ -1,5 +1,5 @@
 textarea.ga-text-area {
-  @apply text-md inline-flex w-full min-w-0 rounded border border-(--ga-color-border-primary) bg-(--ga-color-surface-primary) px-3 py-2 leading-6;
+  @apply text-md animate-hover inline-flex w-full min-w-0 rounded border border-(--ga-color-border-primary) bg-(--ga-color-surface-primary) px-3 py-2 leading-6 transition-colors;
 
   &:hover {
     @apply border-(--ga-color-border-action-hover);

package/src/styles/components/text-size.css

@@ -1,27 +1,27 @@
-.ga-text-xs {
+.ga-text-helper {
   @apply text-xs;
 }
 
-.ga-text-sm {
+.ga-text-caption {
   @apply text-sm;
 }
 
-.ga-text-md {
+.ga-text-body {
   @apply text-md;
 }
 
-.ga-text-lg {
+.ga-text-heading {
   @apply text-lg;
 }
 
-.ga-text-xl {
+.ga-text-title {
   @apply text-xl;
 }
 
-.ga-text-2xl {
+.ga-text-headline {
   @apply text-2xl;
 }
 
-.ga-text-3xl {
+.ga-text-display {
   @apply text-3xl;
 }

package/src/styles/theme.css

@@ -44,8 +44,6 @@
   --color-teal-80: var(--ga-color-teal-80);
   --color-teal-90: var(--ga-color-teal-90);
   --color-teal-100: var(--ga-color-teal-100);
-  --color-yellow-10: var(--ga-color-yellow-10);
-  --color-yellow-40: var(--ga-color-yellow-40);
   --color-black: #000;
   --color-white: #fff;
 
@@ -61,7 +59,7 @@
     var(--ga-text-xs-line-height) * var(--ga-base-scaling-factor, 1)
   );
   --text-xs--letter-spacing: calc(
-    var(--ga-text-xs-tracking) * var(--ga-base-scaling-factor, 1)
+    var(--ga-text-xs-letter-spacing) * var(--ga-base-scaling-factor, 1)
   );
 
   --text-sm: calc(
@@ -79,7 +77,7 @@
     var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
   );
   --text-md--letter-spacing: calc(
-    var(--ga-text-md-tracking) * var(--ga-base-scaling-factor, 1)
+    var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
   );
 
   --text-lg: calc(
@@ -89,7 +87,7 @@
     var(--ga-text-lg-line-height) * var(--ga-base-scaling-factor, 1)
   );
   --text-lg--letter-spacing: calc(
-    var(--ga-text-lg-tracking) * var(--ga-base-scaling-factor, 1)
+    var(--ga-text-lg-letter-spacing) * var(--ga-base-scaling-factor, 1)
   );
 
   --text-xl: calc(
@@ -99,7 +97,7 @@
     var(--ga-text-xl-line-height) * var(--ga-base-scaling-factor, 1)
   );
   --text-xl--letter-spacing: calc(
-    var(--ga-text-xl-tracking) * var(--ga-base-scaling-factor, 1)
+    var(--ga-text-xl-letter-spacing) * var(--ga-base-scaling-factor, 1)
   );
 
   --text-2xl: calc(
@@ -109,7 +107,7 @@
     var(--ga-text-2xl-line-height) * var(--ga-base-scaling-factor, 1)
   );
   --text-2xl--letter-spacing: calc(
-    var(--ga-text-2xl-tracking) * var(--ga-base-scaling-factor, 1)
+    var(--ga-text-2xl-letter-spacing) * var(--ga-base-scaling-factor, 1)
   );
 
   --text-3xl: calc(
@@ -119,7 +117,7 @@
     var(--ga-text-3xl-line-height) * var(--ga-base-scaling-factor, 1)
   );
   --text-3xl--letter-spacing: calc(
-    var(--ga-text-3xl-tracking) * var(--ga-base-scaling-factor, 1)
+    var(--ga-text-3xl-letter-spacing) * var(--ga-base-scaling-factor, 1)
   );
 
   --font-weight-normal: 400;
@@ -132,5 +130,15 @@
     var(--ga-radius-sharp) * var(--ga-base-scaling-factor, 1)
   );
 
+  --shadow-north: var(--ga-shadow-north);
+  --shadow-south: var(--ga-shadow-south);
+  --shadow-east: var(--ga-shadow-east);
+  --shadow-west: var(--ga-shadow-west);
+
   --spacing: 0.25rem;
+
+  --breakpoint-xs: 20rem; /* 320px */
+  --breakpoint-s: 48rem; /* 768px */
+  --breakpoint-m: 90rem; /* 1440px */
+  --breakpoint-l: 120rem; /* 1920px */
 }

package/src/styles/utilities.css

@@ -0,0 +1,34 @@
+@utility animate-hover {
+  transition-duration: var(--ga-duration-instant);
+  transition-timing-function: var(--ga-easing-standard);
+}
+
+@utility animate-state {
+  transition-duration: var(--ga-duration-fast);
+  transition-timing-function: var(--ga-easing-standard);
+}
+
+@utility animate-reveal {
+  transition-duration: var(--ga-duration-moderate);
+  transition-timing-function: var(--ga-easing-entrance);
+}
+
+@utility animate-dismiss {
+  transition-duration: var(--ga-duration-moderate);
+  transition-timing-function: var(--ga-easing-exit);
+}
+
+@utility animate-overlay-in {
+  transition-duration: var(--ga-duration-slow);
+  transition-timing-function: var(--ga-easing-entrance);
+}
+
+@utility animate-overlay-out {
+  transition-duration: var(--ga-duration-slow);
+  transition-timing-function: var(--ga-easing-exit);
+}
+
+@utility animate-backdrop {
+  transition-duration: var(--ga-duration-slower);
+  transition-timing-function: var(--ga-easing-standard);
+}