@vsn-ux/gaia-styles 0.6.3 → 0.6.5

package/dist/integrations/ag-grid.d.mts

@@ -0,0 +1,6 @@
+import * as _$ag_grid_community0 from "ag-grid-community";
+
+//#region src/integrations/ag-grid/theme.d.ts
+declare const gaiaTheme: _$ag_grid_community0.Theme<_$ag_grid_community0.ThemeDefaultParams>;
+//#endregion
+export { gaiaTheme };

package/dist/integrations/ag-grid.mjs

@@ -0,0 +1,262 @@
+import { themeQuartz } from "ag-grid-community";
+//#region src/integrations/ag-grid/theme.ts
+const gaiaTheme = themeQuartz.withParams({
+	accentColor: "var(--ga-color-primary)",
+	advancedFilterBuilderButtonBarBorder: {
+		width: "var(--ga-size-border-width-sm)",
+		color: "var(--ga-color-neutral-30)",
+		style: "solid"
+	},
+	advancedFilterBuilderColumnPillColor: "var(--ga-color-green-10)",
+	advancedFilterBuilderIndentSize: "var(--ga-size-32)",
+	advancedFilterBuilderJoinPillColor: "var(--ga-color-red-10)",
+	advancedFilterBuilderOptionPillColor: "var(--ga-color-orange-20)",
+	advancedFilterBuilderValuePillColor: "var(--ga-color-blue-10)",
+	backgroundColor: "var(--ga-color-white)",
+	borderColor: "var(--ga-color-neutral-30)",
+	borderRadius: "var(--ga-radius)",
+	browserColorScheme: "light",
+	buttonActiveBackgroundColor: "var(--ga-color-orange-30)",
+	buttonActiveTextColor: "var(--ga-color-text-body)",
+	buttonBackgroundColor: "var(--ga-color-white)",
+	buttonBorder: {
+		width: "var(--ga-size-border-width-sm)",
+		color: "var(--ga-color-neutral-30)",
+		style: "solid"
+	},
+	buttonBorderRadius: "var(--ga-radius)",
+	buttonDisabledBackgroundColor: "var(--ga-color-neutral-20)",
+	buttonDisabledTextColor: "var(--ga-color-neutral-60)",
+	buttonFontWeight: "var(--ga-font-weight-medium)",
+	buttonHorizontalPadding: "var(--ga-size-spacing-05)",
+	buttonHoverBackgroundColor: "var(--ga-color-orange-20)",
+	buttonHoverTextColor: "var(--ga-color-text-body)",
+	buttonTextColor: "var(--ga-color-text-body)",
+	buttonVerticalPadding: "var(--ga-size-spacing-03)",
+	cellEditingBorder: false,
+	cellFontFamily: "var(--ga-font-family-primary)",
+	cellHorizontalPadding: "var(--ga-size-spacing-04)",
+	cellHorizontalPaddingScale: 1,
+	cellTextColor: "var(--ga-color-text-body)",
+	cellWidgetSpacing: "var(--ga-size-spacing-03)",
+	chartMenuPanelWidth: "var(--ga-size-256)",
+	checkboxBorderRadius: "var(--ga-radius)",
+	checkboxBorderWidth: "var(--ga-size-border-width-sm)",
+	checkboxCheckedBackgroundColor: "var(--ga-color-primary)",
+	checkboxCheckedShapeColor: "var(--ga-color-white)",
+	checkboxIndeterminateShapeColor: "var(--ga-color-white)",
+	checkboxUncheckedBackgroundColor: "var(--ga-color-white)",
+	checkboxUncheckedBorderColor: "var(--ga-color-neutral-60)",
+	columnBorder: {
+		width: "var(--ga-size-border-width-sm)",
+		color: "transparent",
+		style: "solid"
+	},
+	columnDropCellBackgroundColor: "color-mix(in srgb, var(--ga-color-primary) 7%, transparent)",
+	columnDropCellBorder: {
+		width: "var(--ga-size-border-width-sm)",
+		color: "var(--ga-color-neutral-30)",
+		style: "solid"
+	},
+	columnDropCellDragHandleColor: "var(--ga-color-text-body)",
+	columnDropCellTextColor: "var(--ga-color-text-body)",
+	columnHoverColor: "color-mix(in srgb, var(--ga-color-primary) 8%, transparent)",
+	columnSelectIndentSize: "var(--ga-size-16)",
+	dataFontSize: "var(--ga-text-md-font-size)",
+	dialogBorder: {
+		width: "var(--ga-size-border-width-sm)",
+		color: "var(--ga-color-neutral-30)",
+		style: "solid"
+	},
+	dragAndDropImageBackgroundColor: "var(--ga-color-white)",
+	dragAndDropImageBorder: {
+		width: "var(--ga-size-border-width-sm)",
+		color: "var(--ga-color-neutral-30)",
+		style: "solid"
+	},
+	dragHandleColor: "var(--ga-color-neutral-60)",
+	filterToolPanelGroupIndent: "var(--ga-size-8)",
+	findActiveMatchBackgroundColor: "var(--ga-color-primary)",
+	findActiveMatchColor: "var(--ga-color-white)",
+	findMatchBackgroundColor: "var(--ga-color-orange-20)",
+	findMatchColor: "var(--ga-color-text-body)",
+	focusShadow: "none",
+	fontFamily: "var(--ga-font-family-primary)",
+	fontSize: "var(--ga-text-md-font-size)",
+	footerRowBorder: {
+		width: "var(--ga-size-border-width-sm)",
+		color: "var(--ga-color-neutral-30)",
+		style: "solid"
+	},
+	foregroundColor: "var(--ga-color-neutral-60)",
+	headerBackgroundColor: "var(--ga-color-neutral-10)",
+	headerCellHoverBackgroundColor: "var(--ga-color-neutral-20)",
+	headerColumnBorder: true,
+	headerColumnBorderHeight: 0,
+	headerColumnResizeHandleHeight: "var(--ga-size-16)",
+	headerColumnResizeHandleWidth: "var(--ga-size-border-width-md)",
+	headerFontFamily: "var(--ga-font-family-primary)",
+	headerFontSize: "var(--ga-text-md-font-size)",
+	headerFontWeight: "var(--ga-font-weight-semibold)",
+	headerHeight: "var(--ga-size-40)",
+	headerRowBorder: {
+		width: "var(--ga-size-border-width-sm)",
+		color: "var(--ga-color-neutral-30)",
+		style: "solid"
+	},
+	headerTextColor: "var(--ga-color-text-body)",
+	headerVerticalPaddingScale: 1,
+	iconButtonActiveBackgroundColor: "var(--ga-color-orange-30)",
+	iconButtonActiveColor: "var(--ga-color-primary)",
+	iconButtonActiveIndicatorColor: "var(--ga-color-primary)",
+	iconButtonBackgroundColor: "transparent",
+	iconButtonBackgroundSpread: "var(--ga-size-4)",
+	iconButtonBorderRadius: "var(--ga-radius)",
+	iconButtonColor: "var(--ga-color-primary)",
+	iconButtonHoverBackgroundColor: "var(--ga-color-orange-20)",
+	iconButtonHoverColor: "var(--ga-color-text-body)",
+	iconColor: "var(--ga-color-primary)",
+	iconSize: "var(--ga-size-16)",
+	inputBackgroundColor: "var(--ga-color-white)",
+	inputBorder: {
+		width: "var(--ga-size-border-width-sm)",
+		color: "var(--ga-color-neutral-60)",
+		style: "solid"
+	},
+	inputBorderRadius: "var(--ga-radius)",
+	inputDisabledBackgroundColor: "var(--ga-color-neutral-20)",
+	inputDisabledBorder: {
+		width: "var(--ga-size-border-width-sm)",
+		color: "var(--ga-color-neutral-30)",
+		style: "solid"
+	},
+	inputDisabledTextColor: "var(--ga-color-neutral-60)",
+	inputFocusBorder: false,
+	inputFocusShadow: "none",
+	inputHeight: "var(--ga-size-32)",
+	inputIconColor: "var(--ga-color-neutral-60)",
+	inputInvalidBorder: {
+		width: "var(--ga-size-border-width-md)",
+		color: "var(--ga-color-error)",
+		style: "solid"
+	},
+	inputPaddingStart: "var(--ga-size-spacing-03)",
+	inputPlaceholderTextColor: "var(--ga-color-neutral-60)",
+	inputTextColor: "var(--ga-color-text-body)",
+	invalidColor: "var(--ga-color-error)",
+	listItemHeight: "var(--ga-size-32)",
+	menuBackgroundColor: "var(--ga-color-white)",
+	menuBorder: {
+		width: "var(--ga-size-border-width-sm)",
+		color: "var(--ga-color-neutral-30)",
+		style: "solid"
+	},
+	menuShadow: "none",
+	oddRowBackgroundColor: "color-mix(in srgb, var(--ga-color-neutral-10) 75%, transparent)",
+	panelTitleBarBorder: {
+		width: "var(--ga-size-border-width-sm)",
+		color: "var(--ga-color-neutral-30)",
+		style: "solid"
+	},
+	panelTitleBarFontWeight: "var(--ga-font-weight-semibold)",
+	pinnedColumnBorder: {
+		width: "var(--ga-size-border-width-sm)",
+		color: "var(--ga-color-neutral-30)",
+		style: "solid"
+	},
+	pinnedRowBorder: {
+		width: "var(--ga-size-border-width-sm)",
+		color: "var(--ga-color-neutral-30)",
+		style: "solid"
+	},
+	popupShadow: "none",
+	rangeHeaderHighlightColor: "color-mix(in srgb, var(--ga-color-primary) 10%, transparent)",
+	rangeSelectionBackgroundColor: "color-mix(in srgb, var(--ga-color-primary) 10%, transparent)",
+	rangeSelectionBorderColor: "var(--ga-color-primary)",
+	rangeSelectionHighlightColor: "color-mix(in srgb, var(--ga-color-green-40) 40%, transparent)",
+	rowBorder: {
+		width: "var(--ga-size-border-width-sm)",
+		color: "var(--ga-color-neutral-30)",
+		style: "solid"
+	},
+	rowGroupIndentSize: "var(--ga-size-28)",
+	rowHeight: "var(--ga-size-40)",
+	rowHoverColor: "var(--ga-color-orange-20)",
+	rowLoadingSkeletonEffectColor: "var(--ga-color-neutral-20)",
+	rowVerticalPaddingScale: 16,
+	selectCellBorder: {
+		width: "var(--ga-size-border-width-sm)",
+		color: "var(--ga-color-primary)",
+		style: "solid"
+	},
+	selectedRowBackgroundColor: "var(--ga-color-green-10)",
+	setFilterIndentSize: "var(--ga-size-16)",
+	sideBarBackgroundColor: "var(--ga-color-neutral-10)",
+	sideBarPanelWidth: "var(--ga-size-224)",
+	sideButtonBarTopPadding: 0,
+	sideButtonHoverBackgroundColor: "var(--ga-color-neutral-20)",
+	sideButtonSelectedBackgroundColor: "var(--ga-color-white)",
+	sideButtonSelectedUnderlineColor: "var(--ga-color-primary)",
+	sidePanelBorder: {
+		width: "var(--ga-size-border-width-sm)",
+		color: "var(--ga-color-neutral-30)",
+		style: "solid"
+	},
+	spacing: 8,
+	statusBarLabelColor: "var(--ga-color-text-body-secondary)",
+	statusBarLabelFontWeight: "var(--ga-font-weight-medium)",
+	statusBarValueColor: "var(--ga-color-text-body)",
+	statusBarValueFontWeight: "var(--ga-font-weight-semibold)",
+	subtleTextColor: "var(--ga-color-text-body-secondary)",
+	tabBackgroundColor: "var(--ga-color-neutral-20)",
+	tabBarBackgroundColor: "var(--ga-color-neutral-10)",
+	tabBarBorder: {
+		width: "var(--ga-size-border-width-sm)",
+		color: "var(--ga-color-neutral-30)",
+		style: "solid"
+	},
+	tabBarHorizontalPadding: "var(--ga-size-spacing-03)",
+	tabBarTopPadding: "var(--ga-size-spacing-03)",
+	tabBottomPadding: "var(--ga-size-spacing-03)",
+	tabHorizontalPadding: "var(--ga-size-spacing-04)",
+	tabHoverBackgroundColor: "var(--ga-color-orange-20)",
+	tabSelectedBorderWidth: "var(--ga-size-border-width-md)",
+	tabSelectedTextColor: "var(--ga-color-primary)",
+	tabSelectedUnderlineColor: "var(--ga-color-primary)",
+	tabSelectedUnderlineTransitionDuration: "var(--ga-duration-0)",
+	tabSelectedUnderlineWidth: "var(--ga-size-border-width-sm)",
+	tabSpacing: "var(--ga-size-spacing-02)",
+	tabTopPadding: "var(--ga-size-spacing-03)",
+	toggleButtonHeight: "var(--ga-size-20)",
+	toggleButtonOffBackgroundColor: "var(--ga-color-neutral-30)",
+	toggleButtonOnBackgroundColor: "var(--ga-color-primary)",
+	toggleButtonSwitchBackgroundColor: "var(--ga-color-white)",
+	toggleButtonSwitchInset: "var(--ga-size-2)",
+	toggleButtonWidth: "var(--ga-size-36)",
+	toolPanelSeparatorBorder: {
+		width: "var(--ga-size-border-width-sm)",
+		color: "var(--ga-color-neutral-30)",
+		style: "solid"
+	},
+	tooltipBackgroundColor: "var(--ga-color-white)",
+	tooltipBorder: {
+		width: "var(--ga-size-border-width-sm)",
+		color: "var(--ga-color-neutral-30)",
+		style: "solid"
+	},
+	valueChangeDeltaDownColor: "var(--ga-color-error)",
+	valueChangeDeltaUpColor: "var(--ga-color-success)",
+	valueChangeValueHighlightBackgroundColor: "var(--ga-color-orange-20)",
+	widgetContainerHorizontalPadding: "var(--ga-size-spacing-04)",
+	widgetContainerVerticalPadding: "var(--ga-size-spacing-03)",
+	widgetHorizontalSpacing: "var(--ga-size-spacing-03)",
+	widgetVerticalSpacing: "var(--ga-size-spacing-03)",
+	wrapperBorder: {
+		width: "var(--ga-size-border-width-sm)",
+		color: "var(--ga-color-neutral-30)",
+		style: "solid"
+	},
+	wrapperBorderRadius: "var(--ga-size-8)"
+});
+//#endregion
+export { gaiaTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vsn-ux/gaia-styles",
-  "version": "0.6.3",
+  "version": "0.6.5",
   "type": "module",
   "license": "MIT",
   "scripts": {
@@ -9,6 +9,7 @@
     "build-tokens": "tz build",
     "build-storybook": "storybook build",
     "build-lib": "node ./build-component-styles.js --clean",
+    "build-integrations": "tsdown",
     "build-docs": "tsx --tsconfig tsconfig.app.json build-docs.js",
     "commitlint": "commitlint --edit",
     "prepare": "husky"
@@ -20,6 +21,10 @@
     "./tailwindcss/components.css": "./src/styles/components.css",
     "./design-tokens.json": "./src/design-tokens/dtcg-tokens.json",
     "./font/*": "./src/font/*",
+    "./integrations/ag-grid": {
+      "types": "./dist/integrations/ag-grid.d.mts",
+      "default": "./dist/integrations/ag-grid.mjs"
+    },
     "./*": "./dist/*"
   },
   "devDependencies": {
@@ -37,6 +42,7 @@
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
+    "ag-grid-community": "^35.2.1",
     "chokidar": "^5.0.0",
     "chromatic": "^15.3.0",
     "glob": "^13.0.6",
@@ -52,6 +58,7 @@
     "storybook": "10.3.0",
     "storybook-addon-pseudo-states": "10.3.0",
     "tailwindcss": "^4.2.2",
+    "tsdown": "^0.21.9",
     "tsx": "^4.21.0",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.57.1",

package/src/styles/components/breadcrumbs.css

@@ -0,0 +1,158 @@
+.ga-breadcrumb {
+  @apply flex flex-wrap content-start items-start gap-6;
+}
+
+.ga-breadcrumb-item {
+  @apply relative inline-flex items-center gap-6;
+
+  /* Explorer button: mouse-only target for sibling navigation menu.
+     tabindex="-1" must be set on the element to remove it from tab order.
+     Focus ring is handled by the parent __group via :focus-within. */
+  .ga-breadcrumb-item__explorer {
+    @apply animate-hover cursor-pointer rounded text-lg transition-colors outline-none;
+
+    .ga-icon {
+      @apply text-(--ga-color-icon-action);
+    }
+
+    &:hover .ga-icon {
+      @apply text-(--ga-color-icon-action-hover);
+    }
+  }
+
+  &.ga-breadcrumb-item--overflow {
+    @apply items-center gap-3;
+
+    .ga-breadcrumb-item__menu {
+      @apply -left-(--ga-size-spacing-02);
+    }
+
+    .ga-breadcrumb-item__trigger {
+      @apply animate-hover flex cursor-pointer items-center justify-center gap-2 rounded text-lg font-normal text-(--ga-color-text-action) transition-colors;
+
+      .ga-breadcrumb-item__label {
+        @apply max-w-80 truncate text-(--ga-color-text-action);
+      }
+
+      .ga-icon {
+        @apply text-(--ga-color-icon-action);
+      }
+
+      &:hover {
+        .ga-breadcrumb-item__label {
+          @apply underline;
+        }
+      }
+
+      &:focus-visible {
+        @apply outline-none;
+
+        .ga-breadcrumb-item__label {
+          @apply rounded-[2px] no-underline outline-2 outline-offset-2 outline-(--ga-color-border-focus);
+        }
+      }
+
+      &[aria-expanded='true'] {
+        @apply outline-none;
+
+        .ga-breadcrumb-item__label {
+          @apply rounded-[2px] no-underline outline-2 outline-offset-2 outline-(--ga-color-border-focus);
+        }
+      }
+    }
+
+    .ga-breadcrumb-item__separator {
+      @apply text-lg text-(--ga-color-text-body);
+    }
+  }
+
+  &.ga-breadcrumb-item--current-page {
+    @apply gap-3;
+
+    .ga-breadcrumb-item__trigger {
+      @apply pr-1 text-lg font-semibold text-(--ga-color-text-body);
+
+      .ga-breadcrumb-item__label {
+        @apply max-w-80 truncate;
+      }
+    }
+  }
+
+  &.ga-breadcrumb-item--back {
+    @apply items-center gap-2;
+
+    .ga-breadcrumb-item__trigger {
+      @apply animate-hover inline-flex cursor-pointer items-center rounded text-lg transition-colors;
+
+      .ga-icon {
+        @apply text-(--ga-color-icon-action);
+      }
+
+      &:hover {
+        .ga-icon {
+          @apply text-(--ga-color-icon-action-hover);
+        }
+      }
+
+      &:focus-visible {
+        @apply outline-2 outline-offset-2 outline-(--ga-color-border-focus);
+      }
+    }
+
+    .ga-breadcrumb-item__label {
+      @apply text-lg font-semibold text-(--ga-color-text-body);
+    }
+  }
+
+  &.ga-breadcrumb-item--link {
+    @apply gap-3;
+
+    .ga-breadcrumb-item__trigger {
+      @apply animate-hover inline-flex cursor-pointer items-center rounded pr-1 text-lg font-normal text-(--ga-color-text-action) transition-colors;
+
+      .ga-breadcrumb-item__label {
+        @apply max-w-80 truncate text-(--ga-color-text-action);
+      }
+
+      &:hover {
+        @apply text-(--ga-color-text-action-hover) underline;
+
+        .ga-breadcrumb-item__label {
+          @apply text-(--ga-color-text-action-hover) underline;
+        }
+      }
+
+      &:active {
+        @apply text-(--ga-color-text-action-hover);
+
+        .ga-breadcrumb-item__label {
+          @apply text-(--ga-color-text-action-hover);
+        }
+      }
+
+      &:focus-visible {
+        @apply outline-2 outline-offset-2 outline-(--ga-color-border-focus);
+      }
+    }
+
+    .ga-breadcrumb-item__explorer {
+      @apply pr-1;
+    }
+
+    .ga-breadcrumb-item__separator {
+      @apply text-lg text-(--ga-color-text-body);
+    }
+  }
+
+  .ga-breadcrumb-item__group {
+    @apply inline-flex items-center rounded;
+
+    &:focus-within {
+      @apply outline-2 outline-offset-2 outline-(--ga-color-border-focus);
+    }
+
+    .ga-breadcrumb-item__trigger:focus-visible {
+      @apply outline-none;
+    }
+  }
+}

package/src/styles/components.css

@@ -1,5 +1,6 @@
 @import './components/avatar.css';
 @import './components/badge.css';
+@import './components/breadcrumbs.css';
 @import './components/button.css';
 @import './components/card.css';
 @import './components/calendar.css';