[Feature] Update theme and design system to follow 'Frosted Sage' visuals

Author: looorent

.storybook/manager.ts

@@ -9,44 +9,44 @@ const theme = create({
   brandTarget: '_self',
 
   // Colors — match toolbox tokens
-  colorPrimary: '#5f61e8',
-  colorSecondary: '#5f61e8',
+  colorPrimary: '#7a9a60',
+  colorSecondary: '#7a9a60',
 
   // UI
-  appBg: '#0f1117',
-  appContentBg: '#0f1117',
-  appPreviewBg: '#0f1117',
-  appBorderColor: '#565e8c',
+  appBg: '#0e120f',
+  appContentBg: '#0e120f',
+  appPreviewBg: '#0e120f',
+  appBorderColor: '#2e3a2c',
   appBorderRadius: 8,
 
   // Text
-  textColor: '#e2e8f0',
-  textMutedColor: '#7a8a9b',
-  textInverseColor: '#0f1117',
+  textColor: '#dce4d0',
+  textMutedColor: '#56634e',
+  textInverseColor: '#0e120f',
 
   // Toolbar
-  barBg: '#1a1d2e',
-  barTextColor: '#94a3b8',
-  barSelectedColor: '#818cf8',
-  barHoverColor: '#818cf8',
+  barBg: '#181e1a',
+  barTextColor: '#99a88e',
+  barSelectedColor: '#8aac6c',
+  barHoverColor: '#8aac6c',
 
   // Inputs
-  inputBg: '#1a1d2e',
-  inputBorder: '#565e8c',
-  inputTextColor: '#e2e8f0',
+  inputBg: '#181e1a',
+  inputBorder: '#2e3a2c',
+  inputTextColor: '#dce4d0',
   inputBorderRadius: 4,
 
   // Buttons
-  buttonBg: '#1a1d2e',
-  buttonBorder: '#565e8c',
+  buttonBg: '#181e1a',
+  buttonBorder: '#2e3a2c',
 
   // Fonts
   fontBase: '"Inter", ui-sans-serif, system-ui, sans-serif',
   fontCode: '"JetBrains Mono", ui-monospace, monospace',
 
   // Boolean
-  booleanBg: '#1a1d2e',
-  booleanSelectedBg: '#5f61e8',
+  booleanBg: '#181e1a',
+  booleanSelectedBg: '#7a9a60',
 })
 
 addons.setConfig({ theme })

.storybook/preview.ts

@@ -7,20 +7,20 @@ const docsTheme = create({
   base: 'dark',
   fontBase: '"Inter", ui-sans-serif, system-ui, sans-serif',
   fontCode: '"JetBrains Mono", ui-monospace, monospace',
-  colorPrimary: '#5f61e8',
-  colorSecondary: '#5f61e8',
-  appBg: '#0f1117',
-  appContentBg: '#0f1117',
-  textColor: '#e2e8f0',
-  textMutedColor: '#7a8a9b',
-  barBg: '#1a1d2e',
+  colorPrimary: '#7a9a60',
+  colorSecondary: '#7a9a60',
+  appBg: '#0e120f',
+  appContentBg: '#0e120f',
+  textColor: '#dce4d0',
+  textMutedColor: '#56634e',
+  barBg: '#181e1a',
 })
 
 const preview: Preview = {
   parameters: {
     backgrounds: {
       default: 'dark',
-      values: [{ name: 'dark', value: '#0f1117' }],
+      values: [{ name: 'dark', value: '#0e120f' }],
     },
     docs: {
       theme: docsTheme,

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 * [Feature] Convert an image into base64
 * [Bug] The hamburger menu does not open on click
+* [Feature] Update theme and design system to follow `Frosted Sage` visuals
 
 ## [1.0.4] - 2026-03-05
 

public/logo.svg

@@ -94,14 +94,27 @@ function handleSearchKeydown(event: KeyboardEvent) {
       class="tb-dropdown__menu tb-dropdown--fixed-width"
     >
       <div class="tb-dropdown__search">
-        <input
-          v-model="search"
-          :placeholder="placeholder"
-          class="tb-dropdown__search-input"
-          :aria-controls="listboxId"
-          :aria-activedescendant="activeIndex >= 0 ? optionId(activeIndex) : undefined"
-          @keydown="handleSearchKeydown"
-        />
+        <div class="tb-search-field">
+          <input
+            v-model="search"
+            :placeholder="placeholder"
+            class="tb-dropdown__search-input"
+            :aria-controls="listboxId"
+            :aria-activedescendant="activeIndex >= 0 ? optionId(activeIndex) : undefined"
+            @keydown="handleSearchKeydown"
+          />
+          <button
+            v-if="search"
+            type="button"
+            class="tb-search-field__clear"
+            aria-label="Clear search"
+            @click="search = ''"
+          >
+            <svg class="tb-icon-sm" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+            </svg>
+          </button>
+        </div>
       </div>
       <div :id="listboxId" role="listbox" class="tb-dropdown__list">
         <button

src/assets/logo.svg

@@ -1107,9 +1107,49 @@
   min-height: 20rem;
 }
 
+.tb-preview-panel--ambient {
+  position: relative;
+  overflow: hidden;
+}
+
+.tb-preview-panel--ambient::before {
+  content: "";
+  position: absolute;
+  width: 220px;
+  height: 220px;
+  background: radial-gradient(circle, var(--color-accent-15), transparent 70%);
+  top: -15%;
+  left: -8%;
+  border-radius: 50%;
+  animation: tb-drift 8s ease-in-out infinite alternate;
+}
+
+.tb-preview-panel--ambient::after {
+  content: "";
+  position: absolute;
+  width: 180px;
+  height: 180px;
+  background: radial-gradient(circle, var(--color-accent-10), transparent 70%);
+  bottom: -10%;
+  right: -5%;
+  border-radius: 50%;
+  animation: tb-drift 10s ease-in-out infinite alternate-reverse;
+}
+
+@keyframes tb-drift {
+  0% {
+    transform: translate(0, 0) scale(1);
+  }
+  100% {
+    transform: translate(15px, -10px) scale(1.1);
+  }
+}
+
 .tb-preview-media {
   display: block;
   max-height: 24rem;
+  position: relative;
+  z-index: 1;
 }
 
 .tb-preview-media--full {
@@ -1118,6 +1158,13 @@
   max-height: 32rem;
 }
 
+/* --- Gradient separator --- */
+
+.tb-separator {
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--color-accent-15) 30%, var(--color-accent-10) 70%, transparent);
+}
+
 /* --- Webhook request list sidebar --- */
 
 .tb-webhook-sidebar {

src/components/TbSearchableDropdown.vue

@@ -188,3 +188,27 @@
 .tb-checkbox__input:disabled {
   cursor: not-allowed;
 }
+
+/* --- Search field with clear button --- */
+
+.tb-search-field {
+  position: relative;
+}
+
+.tb-search-field__clear {
+  position: absolute;
+  right: var(--spacing-3);
+  top: 50%;
+  transform: translateY(-50%);
+  padding: var(--spacing-2);
+  border-radius: var(--radius-sm);
+  border: none;
+  background: none;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  transition: color var(--duration-fast);
+}
+
+.tb-search-field__clear:hover {
+  color: var(--color-text-primary);
+}

src/css/components.css

@@ -375,6 +375,7 @@
   font-weight: 500;
   color: var(--color-text-muted);
   text-decoration: none;
+  cursor: pointer;
   transition:
     color var(--duration-fast),
     background-color var(--duration-fast);

src/css/forms.css

@@ -26,7 +26,7 @@ function download() {
 
 <template>
   <div class="tb-stack-4">
-    <div class="tb-card tb-flex-center tb-preview-panel">
+    <div class="tb-card tb-flex-center tb-preview-panel tb-preview-panel--ambient">
       <div class="tb-checkerboard">
         <img :src="dataUri" alt="Preview" class="tb-img-contain tb-preview-media" />
       </div>