From 8961e26d4f47e03882b773e84f01a9c30eea66cf Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 27 Feb 2026 13:13:15 +0000
Subject: [PATCH 1/2] Initial plan
From dfb71bc4126d9b6e00fd3fcb4314c4fc902da5d6 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 27 Feb 2026 13:24:45 +0000
Subject: [PATCH 2/2] fix: replace CSS variable-based Toolbar styling with
self-contained Tailwind classes
The Toolbar component previously relied on PrimeReact CSS variables
(--surface-card, --surface-border, --text-color-secondary, etc.) from
the lara-dark-blue theme. Consumers using a different theme or no
PrimeReact theme would see an invisible container (transparent background,
no border).
Replace all CSS variable-based styles with hardcoded Tailwind utility
classes (bg-gray-800, border-white/10, text-gray-400, etc.) so the
toolbar renders consistently regardless of the consumer's theme setup.
Co-authored-by: einari <134365+einari@users.noreply.github.com>
---
Source/Toolbar/Toolbar.css | 37 +++-------------------------
Source/Toolbar/Toolbar.tsx | 5 ++--
Source/Toolbar/ToolbarButton.tsx | 6 +++--
Source/Toolbar/ToolbarFanOutItem.tsx | 7 ++++--
Source/Toolbar/ToolbarSection.tsx | 1 +
5 files changed, 16 insertions(+), 40 deletions(-)
diff --git a/Source/Toolbar/Toolbar.css b/Source/Toolbar/Toolbar.css
index 499d154..813a017 100644
--- a/Source/Toolbar/Toolbar.css
+++ b/Source/Toolbar/Toolbar.css
@@ -1,42 +1,12 @@
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
-/* ── Toolbar container ───────────────────────────────────────────────────── */
-.toolbar {
- background: var(--surface-card);
- border: 1px solid var(--surface-border);
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-}
-
-/* ── Toolbar button ──────────────────────────────────────────────────────── */
-.toolbar-button {
- color: var(--text-color-secondary);
- background: transparent;
- border: none;
- transition: background 0.15s, color 0.15s;
-}
-
-.toolbar-button:hover {
- background: var(--surface-100);
- color: var(--text-color);
-}
-
-.toolbar-button--active {
- background: var(--primary-color);
- color: var(--primary-color-text);
-}
-
-.toolbar-button--active:hover {
- background: var(--primary-color);
- color: var(--primary-color-text);
-}
-
/* ── Toolbar project name label ──────────────────────────────────────────── */
.toolbar-project-name {
padding: 0 8px;
font-size: 0.875rem;
font-weight: 500;
- color: var(--text-color);
+ color: #f3f4f6;
white-space: nowrap;
}
@@ -102,8 +72,9 @@
align-items: center;
gap: 0.25rem;
padding: 0.5rem;
- background: var(--surface-card);
- border: 1px solid var(--surface-border);
+ /* bg-gray-800 / border-white/10 — matches the Toolbar container Tailwind classes */
+ background: #1f2937;
+ border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
border-radius: 1rem;
white-space: nowrap;
diff --git a/Source/Toolbar/Toolbar.tsx b/Source/Toolbar/Toolbar.tsx
index a273bcf..46ce351 100644
--- a/Source/Toolbar/Toolbar.tsx
+++ b/Source/Toolbar/Toolbar.tsx
@@ -2,7 +2,6 @@
// Licensed under the MIT license. See LICENSE file in the project root for full license information.
import { ReactNode } from 'react';
-import './Toolbar.css';
/** Props for the {@link Toolbar} component. */
export interface ToolbarProps {
@@ -19,9 +18,9 @@ export interface ToolbarProps {
*/
export const Toolbar = ({ children, orientation = 'vertical' }: ToolbarProps) => (
{children}
diff --git a/Source/Toolbar/ToolbarButton.tsx b/Source/Toolbar/ToolbarButton.tsx
index 4d3ad71..80f5d41 100644
--- a/Source/Toolbar/ToolbarButton.tsx
+++ b/Source/Toolbar/ToolbarButton.tsx
@@ -27,7 +27,9 @@ export interface ToolbarButtonProps {
* Uses the shared {@link Tooltip} component for consistent hover labels.
*/
export const ToolbarButton = ({ icon, tooltip, active = false, onClick, tooltipPosition = 'right' }: ToolbarButtonProps) => {
- const activeClass = active ? 'toolbar-button--active' : '';
+ const buttonStateClass = active
+ ? 'bg-blue-600 text-white'
+ : 'text-gray-400 hover:bg-gray-700 hover:text-gray-100';
return (
@@ -35,7 +37,7 @@ export const ToolbarButton = ({ icon, tooltip, active = false, onClick, tooltipP
type='button'
aria-label={tooltip}
onClick={onClick}
- className={`toolbar-button w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer ${activeClass}`}
+ className={`w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer transition-colors duration-150 ${buttonStateClass}`}
>
diff --git a/Source/Toolbar/ToolbarFanOutItem.tsx b/Source/Toolbar/ToolbarFanOutItem.tsx
index 5216008..a9c655f 100644
--- a/Source/Toolbar/ToolbarFanOutItem.tsx
+++ b/Source/Toolbar/ToolbarFanOutItem.tsx
@@ -2,6 +2,7 @@
// Licensed under the MIT license. See LICENSE file in the project root for full license information.
import { ReactNode, useEffect, useRef, useState } from 'react';
+import './Toolbar.css';
import { Tooltip } from '../Common/Tooltip';
import type { TooltipPosition } from '../Common/Tooltip';
@@ -63,7 +64,9 @@ export const ToolbarFanOutItem = ({
};
}, [isExpanded]);
- const activeClass = isExpanded ? 'toolbar-button--active' : '';
+ const buttonStateClass = isExpanded
+ ? 'bg-blue-600 text-white'
+ : 'text-gray-400 hover:bg-gray-700 hover:text-gray-100';
const panelVisibleClass = isExpanded ? 'toolbar-fanout-panel--visible' : '';
const directionClass = `toolbar-fanout-panel--${fanOutDirection}`;
@@ -75,7 +78,7 @@ export const ToolbarFanOutItem = ({
aria-label={tooltip}
aria-expanded={isExpanded}
onClick={handleToggle}
- className={`toolbar-button w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer ${activeClass}`}
+ className={`w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer transition-colors duration-150 ${buttonStateClass}`}
>
diff --git a/Source/Toolbar/ToolbarSection.tsx b/Source/Toolbar/ToolbarSection.tsx
index ac97e97..4276dbd 100644
--- a/Source/Toolbar/ToolbarSection.tsx
+++ b/Source/Toolbar/ToolbarSection.tsx
@@ -3,6 +3,7 @@
import { Children, ReactElement, ReactNode, isValidElement, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import './Toolbar.css';
import type { ToolbarContextProps } from './ToolbarContext';
/** Props for the {@link ToolbarSection} component. */