fix styles

fastrepl · Jul 23, 2024 · afea1da · afea1da
1 parent 4ab5b81
commit afea1da
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 13 deletions.
diff --git a/js/packages/web/.storybook/preview.ts b/js/packages/web/.storybook/preview.ts
@@ -31,7 +31,8 @@ const preview: Preview = {
       disable: true,
     },
     cssprops: {
-      "canary-color-primary-ch": { value: "30 296" },
+      "canary-color-primary-c": { value: "0.1" },
+      "canary-color-primary-h": { value: "260" },
     },
     msw: {
       handlers: {

diff --git a/js/packages/web/src/canary-reference.ts b/js/packages/web/src/canary-reference.ts
@@ -76,12 +76,14 @@ export class CanaryReference extends LitElement {
       padding: 8px 16px;
       border: 1px solid var(--canary-color-gray-90);
       border-radius: 8px;
-      background-color: var(--canary-color-gray-95);
+      background-color: var(--canary-is-light, var(--canary-color-gray-95))
+        var(--canary-is-dark, var(--canary-color-gray-80));
     }
 
     .container:hover,
     .selected {
-      background-color: var(--canary-color-primary-80);
+      background-color: var(--canary-is-light, var(--canary-color-primary-95))
+        var(--canary-is-dark, var(--canary-color-primary-70));
     }
 
     .selected .arrow,
@@ -122,10 +124,8 @@ export class CanaryReference extends LitElement {
     }
 
     .excerpt mark {
-      background-color: var(--canary-color-primary-10);
+      background-color: var(--canary-color-primary-20);
       color: var(--canary-color-gray-90);
-      border-radius: 2px;
-      padding: 0 2px;
     }
 
     .paths {

diff --git a/js/packages/web/src/canary-search-results-group.ts b/js/packages/web/src/canary-search-results-group.ts
@@ -147,10 +147,6 @@ export class CanarySearchResultsGroup extends LitElement {
         flex-direction: column;
         gap: 10px;
         max-height: 425px;
-        overflow-y: hidden;
-      }
-      .container:hover {
-        overflow-y: auto;
       }
 
       .skeleton-container {

diff --git a/js/packages/web/src/canary-search-results.ts b/js/packages/web/src/canary-search-results.ts
@@ -69,7 +69,6 @@ export class CanarySearchResults extends LitElement {
         flex-direction: column;
         gap: 8px;
         max-height: 425px;
-        overflow-y: scroll;
       }
       .skeleton-container {
         display: flex;

diff --git a/js/packages/web/src/canary-styles-default.ts b/js/packages/web/src/canary-styles-default.ts
@@ -70,7 +70,8 @@ export class CanaryStylesDefault extends LitElement {
     `,
     css`
       :host {
-        --canary-theme: "light";
+        --canary-is-light: initial;
+        --canary-is-dark: ;
 
         --l-0: 0%;
         --l-5: 0%;
@@ -88,7 +89,8 @@ export class CanaryStylesDefault extends LitElement {
       }
 
       :host([theme="dark"]) {
-        --canary-theme: "dark";
+        --canary-is-light: ;
+        --canary-is-dark: initial;
 
         --l-0: 100%;
         --l-5: 95%;

diff --git a/js/packages/web/src/styles.ts b/js/packages/web/src/styles.ts
@@ -85,6 +85,7 @@ export const scrollContainer = css`
     padding-left: 4px;
     padding-right: 4px;
 
+    overflow-y: scroll;
     scrollbar-width: thin;
     scrollbar-color: var(--canary-color-gray-90) var(--canary-color-gray-100);
   }