Merge pull request #819 from basecamp/adjust-fizzy-bar

Remove input label, adjust placeholder, and text size

app/assets/stylesheets/_global.css

@@ -67,7 +67,7 @@
   --lch-ink-medium: 66% 0.008 258;
   --lch-ink-light: 84% 0.005 256;
   --lch-ink-lighter: 92% 0.003 254;
-  --lch-ink-lightest: 96% 0.002 252;
+  --lch-ink-lightest: 98% 0.002 252;
 
   --lch-uncolor-darkest: 26% 0.018 40;
   --lch-uncolor-darker: 40.04% 0.0376 50.06;
@@ -174,9 +174,9 @@
   --color-selected-dark: oklch(var(--lch-blue-light));
   --color-highlight: oklch(var(--lch-yellow-lighter));
   --color-marker: oklch(var(--lch-red-medium));
-  --color-terminal-bg: var(--color-canvas);
-  --color-terminal-text: oklch(var(--lch-green-dark));
-  --color-terminal-text-light: oklch(var(--lch-green-medium));
+  --color-terminal-bg: var(--color-ink-lightest);
+  --color-terminal-text: var(--color-ink);
+  --color-terminal-text-light: var(--color-ink-lighter);
 
   /* Colors: Cards */
   --color-card-default: oklch(var(--lch-blue-dark));

app/assets/stylesheets/actiontext-lexical.css

@@ -178,6 +178,7 @@
     display: flex;
     gap: var(--lexical-prompt-padding);
     padding: var(--lexical-prompt-padding);
+    white-space: nowrap;
 
     &:hover {
       background-color: var(--color-ink-lightest);

app/assets/stylesheets/animation.css

@@ -16,7 +16,7 @@
 
   @keyframes pulse {
     0%   { opacity: 1; }
-    50%  { opacity: 0.6; }
+    50%  { opacity: 0.4; }
     100% { opacity: 1; }
   }
 

app/assets/stylesheets/terminals.css

@@ -3,10 +3,9 @@
     --row-gap: 0.2lh;
 
     background-color: var(--color-terminal-bg);
-    border-block-start: 1px solid var(--color-ink-light);
     color: var(--color-terminal-text);
     font-family: var(--font-mono);
-    font-size: var(--text-normal);
+    font-size: 0.9em;
     inset: auto 0 0 0;
     max-block-size: 100%;
     padding: var(--block-space) calc(var(--tray-size) + calc(var(--inline-space) * 3)) calc(var(--block-space) + env(safe-area-inset-bottom));
@@ -105,7 +104,7 @@
     }
   }
 
-  .terminal__input:is(.input) {
+  .terminal__input {
     --input-border-color: transparent;
     --input-border-radius: 0.3em;
     --input-color: var(--color-terminal-text);
@@ -113,20 +112,42 @@
     accent-color: var(--color-terminal-text);
     caret-color: var(--color-terminal-text);
     font-family: inherit;
-
-    &::placeholder {
-      color: var(--color-terminal-text-light);
-      opacity: 0.5;
-    }
-
-    &:focus::placeholder {
-      opacity: 0.7;
-    }
+    font-weight: 500;
+    text-align: start;
 
     &.lexical-editor--empty {
       overflow: hidden;
+      text-align: center;
       text-overflow: ellipsis; 
       white-space: nowrap;
+
+      &:focus-within {
+        text-align: start;
+
+        .lexical-editor__content::before {
+          inset: 0;
+          transform: translateX(0);
+        }
+      }
+
+      .lexical-editor__content::before {
+        color: var(--color-ink);
+        inline-size: 100%;
+        inset: 0 0 0 50%;
+        opacity: 0.5;
+        transform: translateX(-50%);
+        transform-origin: start start;
+        transition: inset 150ms ease-in;
+
+        @starting-style {
+          inset: 0 0 0 50%;
+          transform: translateX(-50%);
+        }
+      }
+    }
+
+    .terminal--busy:is(:not(.terminal--confirmation)) & {
+      animation: pulse 1.5s infinite;
     }
 
     .terminal--confirmation & {
@@ -156,20 +177,6 @@
     }
   }
 
-  .terminal__label {
-    font-weight: 600;
-
-    .terminal--busy:is(:not(.terminal--confirmation)) & {
-      animation: pulse 1s infinite;
-    }
-
-    &:has(~ .terminal__input:focus-within) {
-      @media (max-width: 640px) {
-        display: none;
-      }
-    }
-  }
-
   .terminal__menu {
     display: none;
     list-style: none;

app/views/commands/_form.html.erb

@@ -19,8 +19,6 @@
             turbo:submit-end->terminal#handleCommandResponse
         "
       } do %>
-  <label class="terminal__label txt-nowrap" for="command">Fizzy do &gt;</label>
-
   <%= rich_textarea_tag "command", nil,
         toolbar: false,
         class: "terminal__input input hide-focus-ring fill-transparent unpad",