Merge branch 'master' into dl/ai-grounding

Author: dlarocque

ai/ai-react-app/src/components/Common/FileUploader.module.css

@@ -7,8 +7,8 @@
 
 .uploadButton {
   background-color: transparent;
-  color: var(--fb-gray-70);
-  border: 1px dashed var(--fb-gray-40);
+  color: var(--color-text-secondary);
+  border: 1px dashed var(--color-border-secondary);
   padding: 6px 12px;
   border-radius: 4px;
   cursor: pointer;
@@ -28,21 +28,21 @@
 }
 
 .uploadButton:hover:not(:disabled) {
-  background-color: var(--fb-gray-30);
-  border-color: var(--fb-gray-50);
-  color: var(--fb-gray-90);
+  background-color: var(--color-surface-tertiary);
+  border-color: var(--brand-gray-50);
+  color: var(--color-text-primary);
 }
 
 .uploadButton:disabled {
   opacity: 0.5;
   cursor: not-allowed;
-  color: var(--fb-gray-50);
-  border-color: var(--fb-gray-40);
+  color: var(--color-text-disabled);
+  border-color: var(--color-border-secondary);
 }
 
 .clearButton {
   background-color: transparent;
-  color: var(--fb-gray-60);
+  color: var(--color-text-placeholder);
   border: none;
   padding: 0;
   width: 24px;
@@ -60,12 +60,12 @@
 }
 
 .clearButton:hover:not(:disabled) {
-  background-color: var(--fb-gray-40);
-  color: var(--fb-gray-90);
+  background-color: var(--color-surface-tertiary);
+  color: var(--color-text-primary);
 }
 
 .clearButton:disabled {
   opacity: 0.5;
   cursor: not-allowed;
-  color: var(--fb-gray-50);
-}
+  color: var(--color-text-disabled);
+}

ai/ai-react-app/src/components/Common/PromptInput.module.css

@@ -14,9 +14,9 @@
 }
 
 .suggestionButton {
-  background-color: var(--fb-gray-30);
-  color: var(--fb-gray-80);
-  border: 1px solid var(--fb-gray-40);
+  background-color: var(--color-surface-tertiary);
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border-secondary);
   padding: 4px 10px;
   border-radius: 16px;
   cursor: pointer;
@@ -27,9 +27,9 @@
     color 0.15s ease;
 }
 .suggestionButton:hover:not(:disabled) {
-  background-color: var(--fb-gray-40);
-  border-color: var(--fb-gray-50);
-  color: var(--fb-gray-95);
+  background-color: var(--brand-gray-40);
+  border-color: var(--brand-gray-50);
+  color: var(--color-text-primary);
 }
 .suggestionButton:disabled {
   opacity: 0.5;
@@ -39,22 +39,22 @@
 .inputArea {
   display: flex;
   align-items: flex-end;
-  background-color: var(--fb-gray-10);
+  background-color: var(--color-surface-primary);
   border-radius: 4px;
-  border: 1px solid var(--fb-gray-40);
+  border: 1px solid var(--color-border-secondary);
   padding: 4px 4px 4px 12px;
   transition: border-color 0.15s ease;
   box-sizing: border-box;
 }
 .inputArea:focus-within {
-  border-color: var(--google-blue);
+  border-color: var(--color-border-focus);
 }
 
 .promptTextarea {
   flex-grow: 1;
   background-color: transparent;
   border: none;
-  color: var(--fb-gray-90);
+  color: var(--color-text-primary);
   resize: none;
   outline: none;
   font-size: 0.875rem;
@@ -66,12 +66,12 @@
   margin-right: 8px;
 }
 .promptTextarea::placeholder {
-  color: var(--fb-gray-60);
+  color: var(--color-text-placeholder);
 }
 
 .runButton {
-  background-color: var(--google-blue);
-  color: var(--fb-gray-100);
+  background-color: var(--color-surface-interactive);
+  color: var(--color-text-on-interactive);
   border: none;
   padding: 0 16px;
   border-radius: 4px;
@@ -86,11 +86,11 @@
   flex-shrink: 0;
 }
 .runButton:hover:not(:disabled) {
-  background-color: var(--google-blue-darker);
+  background-color: var(--color-surface-interactive-hover);
 }
 .runButton:disabled {
-  background-color: var(--fb-gray-30);
-  color: var(--fb-gray-50);
+  background-color: var(--color-surface-tertiary);
+  color: var(--color-text-disabled);
   cursor: not-allowed;
 }
 
@@ -103,9 +103,9 @@
 }
 
 .countButton {
-  background-color: var(--fb-gray-30);
-  color: var(--fb-gray-80);
-  border: 1px solid var(--fb-gray-40);
+  background-color: var(--color-surface-tertiary);
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border-secondary);
   padding: 4px 10px;
   border-radius: 4px;
   cursor: pointer;
@@ -118,20 +118,20 @@
   flex-shrink: 0;
 }
 .countButton:hover:not(:disabled) {
-  background-color: var(--fb-gray-40);
-  border-color: var(--fb-gray-50);
-  color: var(--fb-gray-95);
+  background-color: var(--brand-gray-40);
+  border-color: var(--brand-gray-50);
+  color: var(--color-text-primary);
 }
 .countButton:disabled {
   opacity: 0.5;
   cursor: not-allowed;
-  background-color: var(--fb-gray-20);
-  border-color: var(--fb-gray-30);
+  background-color: var(--color-surface-secondary);
+  border-color: var(--color-border-primary);
 }
 
 .tokenCountDisplay {
   font-size: 0.8125rem;
-  color: var(--fb-gray-70);
+  color: var(--color-text-secondary);
   flex-grow: 1;
   text-align: right;
   min-height: 1.2em;
@@ -141,10 +141,10 @@
 }
 
 .tokenError {
-  color: var(--fb-error-text);
+  color: var(--color-error-text);
   font-style: italic;
 }
 .tokenPlaceholder {
-  color: var(--fb-gray-60);
+  color: var(--color-text-placeholder);
   font-style: italic;
-}
+}

ai/ai-react-app/src/components/Common/ResponseDisplay.module.css

@@ -1,11 +1,11 @@
 .responseContainer {
   margin: 20px 24px;
   padding: 0;
-  color: var(--fb-gray-90);
+  color: var(--color-text-primary);
 }
 
 .responseTitle {
-  color: var(--fb-gray-70);
+  color: var(--color-text-secondary);
   font-weight: 500;
   margin: 0 0 12px 0;
   padding-bottom: 0;
@@ -16,10 +16,10 @@
 }
 
 .responseOutput {
-  background-color: var(--fb-gray-10);
+  background-color: var(--color-surface-secondary);
   padding: 16px;
   border-radius: 4px;
-  border: 1px solid var(--fb-gray-30);
+  border: 1px solid var(--color-border-primary);
   min-height: 100px;
   margin-bottom: 16px;
   position: relative;
@@ -28,15 +28,15 @@
   font-family: "Roboto Mono", monospace;
   font-size: 0.875rem;
   line-height: 1.6;
-  color: var(--fb-gray-90);
+  color: var(--color-text-primary);
 }
 
 .responseText {
   margin: 0;
 }
 
 .placeholder {
-  color: var(--fb-gray-60);
+  color: var(--color-text-placeholder);
   font-style: italic;
 }
 
@@ -50,48 +50,48 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  color: var(--fb-gray-80);
+  color: var(--brand-gray-80);
   font-style: italic;
   border-radius: 4px;
   z-index: 1;
 }
 
 .jsonDetails {
   margin-top: 16px;
-  border: 1px solid var(--fb-gray-40);
+  border: 1px solid var(--color-border-secondary);
   border-radius: 4px;
-  background-color: var(--fb-gray-10);
+  background-color: var(--color-surface-secondary);
 }
 
 .jsonSummary {
   padding: 8px 12px;
   cursor: pointer;
-  background-color: var(--fb-gray-10);
+  background-color: transparent;
   border-radius: 4px 4px 0 0;
-  border-bottom: 1px solid var(--fb-gray-40);
+  border-bottom: 1px solid var(--color-border-secondary);
   outline: none;
   font-size: 0.8125rem;
-  color: var(--fb-gray-80);
+  color: var(--color-text-secondary);
   font-weight: 500;
   list-style: none;
 }
 .jsonSummary::-webkit-details-marker {
   display: none;
 }
 .jsonSummary:hover {
-  background-color: var(--fb-gray-30);
+  background-color: var(--color-surface-tertiary);
 }
 
 .jsonPre {
   padding: 12px 16px;
   margin: 0;
   font-family: "Roboto Mono", monospace;
   font-size: 0.8125rem;
-  color: var(--fb-gray-90);
+  color: var(--color-text-primary);
   white-space: pre-wrap;
   word-wrap: break-word;
-  background-color: var(--fb-gray-10);
+  background-color: transparent;
   border-radius: 0 0 4px 4px;
   max-height: 400px;
   overflow: auto;
-}
+}

ai/ai-react-app/src/components/Layout/LeftSidebar.module.css

@@ -11,7 +11,7 @@
 .navButton {
   background-color: transparent;
   border: none;
-  color: var(--fb-gray-70);
+  color: var(--color-text-secondary);
   padding: 8px 12px;
   text-align: left;
   width: 100%;
@@ -25,29 +25,29 @@
 }
 
 .navButton:hover {
-  background-color: var(--fb-gray-30);
-  color: var(--fb-gray-95);
+  background-color: var(--color-surface-tertiary);
+  color: var(--color-text-primary);
 }
 
 .navButton.active {
-  background-color: var(--fb-gray-30);
-  color: var(--fb-yellow);
+  background-color: var(--color-surface-tertiary);
+  color: var(--color-text-accent);
   font-weight: 500;
 }
 
 .navButton.active:hover {
-  background-color: var(--fb-gray-40);
+  background-color: var(--brand-gray-40);
 }
 
 .backendSelector {
   margin-top: 24px;
   padding: 0 12px;
-  border-top: 1px solid var(--fb-gray-30);
+  border-top: 1px solid var(--color-border-primary);
   padding-top: 16px;
 }
 
 .selectorTitle {
-  color: var(--fb-gray-70);
+  color: var(--color-text-secondary);
   font-size: 0.75rem;
   font-weight: 500;
   margin: 0 0 8px 0;
@@ -63,11 +63,11 @@
   display: flex;
   align-items: center;
   font-size: 0.875rem;
-  color: var(--fb-gray-80);
+  color: var(--color-text-primary);
   cursor: pointer;
 }
 
 .radioGroup input[type="radio"] {
   margin-right: 8px;
-  accent-color: var(--google-blue);
-}
+  accent-color: var(--brand-google-blue);
+}