fix(theme): set correct background and text color for panels (#94)

Author: SamVerschueren

docs/demo/theme.ts

@@ -179,6 +179,7 @@ export const theme: ConfigBase['theme'] = {
         },
         panel: {
           backgroundColor: 'var(--tk-elements-panel-backgroundColor)',
+          textColor: 'var(--tk-elements-panel-textColor)',
           header: {
             backgroundColor: 'var(--tk-elements-panel-header-backgroundColor)',
             textColor: 'var(--tk-elements-panel-header-textColor)',

packages/astro/src/default/styles/variables.css

@@ -175,6 +175,7 @@
 
   /* Panel */
   --tk-elements-panel-backgroundColor: var(--tk-elements-app-backgroundColor);
+  --tk-elements-panel-textColor: var(--tk-elements-app-textColor);
 
   /* Panel > Header */
   --tk-elements-panel-header-backgroundColor: var(--tk-background-secondary);

packages/astro/src/theme.ts

@@ -179,6 +179,7 @@ export const theme: ConfigBase['theme'] = {
         },
         panel: {
           backgroundColor: 'var(--tk-elements-panel-backgroundColor)',
+          textColor: 'var(--tk-elements-panel-textColor)',
           header: {
             backgroundColor: 'var(--tk-elements-panel-header-backgroundColor)',
             textColor: 'var(--tk-elements-panel-header-textColor)',

packages/components/react/src/BootScreen.tsx

@@ -11,12 +11,7 @@ export function BootScreen({ className, tutorialStore }: Props) {
   const steps = useStore(tutorialStore.steps);
 
   return (
-    <div
-      className={classNames(
-        'flex-grow w-full flex justify-center items-center text-sm bg-tk-elements-app-backgroundColor text-tk-elements-app-textColor',
-        className,
-      )}
-    >
+    <div className={classNames('flex-grow w-full flex justify-center items-center text-sm', className)}>
       {steps ? (
         <ul className="space-y-1">
           {steps.map((step, index) => (

packages/components/react/src/Panels/EditorPanel.tsx

@@ -62,7 +62,7 @@ export function EditorPanel({
   }, [id]);
 
   return (
-    <PanelGroup className="bg-tk-elements-app-backgroundColor" direction="horizontal">
+    <PanelGroup className="bg-tk-elements-panel-backgroundColor" direction="horizontal">
       <Panel className="flex flex-col" collapsible defaultSize={0} minSize={10} ref={fileTreePanelRef}>
         <div className="panel-header border-r border-b border-tk-elements-app-borderColor">
           <div className="panel-title">

packages/components/react/src/Panels/PreviewPanel.tsx

@@ -73,7 +73,7 @@ export const PreviewPanel = memo(
 
     if (!hasPreviews) {
       return (
-        <div className="flex flex-col h-full w-full">
+        <div className="panel-container bg-tk-elements-panel-backgroundColor text-tk-elements-panel-textColor">
           <div className="panel-header border-b border-tk-elements-app-borderColor justify-between">
             <div className="panel-title">
               <div className="panel-icon i-ph-lightning-duotone"></div>

packages/components/react/src/Panels/TerminalPanel.tsx

@@ -44,7 +44,7 @@ export function TerminalPanel({ theme, tutorialStore }: TerminalPanelProps) {
   }, []);
 
   return (
-    <div className="panel-container bg-tk-elements-app-backgroundColor">
+    <div className="panel-container bg-tk-elements-panel-backgroundColor text-tk-elements-panel-textColor">
       <div className="panel-tabs-header overflow-x-hidden">
         <div className="panel-title w-full">
           <ul

packages/components/react/src/Panels/WorkspacePanel.tsx

@@ -146,6 +146,7 @@ export function WorkspacePanel({ tutorialStore, theme }: Props) {
         maxSize={hasEditor ? 100 : 0}
         collapsible={!hasEditor}
         ref={editorPanelRef}
+        className="bg-tk-elements-panel-backgroundColor text-tk-elements-panel-textColor"
       >
         <EditorPanel
           id={tutorialStore.ref}
@@ -209,7 +210,7 @@ export function WorkspacePanel({ tutorialStore, theme }: Props) {
         onExpand={() => {
           terminalExpanded.current = true;
         }}
-        className={classNames({
+        className={classNames('bg-tk-elements-panel-backgroundColor text-tk-elements-panel-textColor', {
           'border-t border-tk-elements-app-borderColor': hasPreviews,
         })}
       >