@flytedan/flytebot-design-system 0.2.1 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flytedan/flytebot-design-system",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "flytedesk Design System — shared component library, tokens, and business-logic kits for flytedesk apps.",
   "type": "module",
   "license": "UNLICENSED",

package/styles/components.css

@@ -2034,9 +2034,6 @@
   display: inline-flex;
   align-items: center;
   line-height: 0;
-  background: #fff;
-  border-radius: var(--r-sm);
-  padding: 4px 8px;
   flex: none;
 }
 .fd-brand-mark img {
@@ -2044,6 +2041,16 @@
   height: 26px;
   width: auto;
 }
+/* The mark's own artwork is a fixed dark navy with no light colorway (see
+   FlytedeskBrand.tsx's comment) — on a dark surface it would otherwise vanish.
+   brightness(0) turns every opaque ink pixel pure black while leaving transparent
+   pixels transparent; invert(1) flips that black to white — same trick as
+   forcing a single-color mark to work on both themes without a second asset to
+   keep in sync. Light theme (the default, no selector needed) gets no filter and
+   shows the real navy ink, which is what the mark was actually drawn in. */
+[data-theme="dark"] .fd-brand-mark img {
+  filter: brightness(0) invert(1);
+}
 .fd-brand-sm .fd-brand-mark img,
 .fd-brand-mark-sm img {
   height: 19px;