@flytedan/flytebot-design-system 0.2.1 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flytedan/flytebot-design-system",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "flytedesk Design System — shared component library, tokens, and business-logic kits for flytedesk apps.",
   "type": "module",
   "license": "UNLICENSED",
@@ -56,6 +56,7 @@
     "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^9.14.0",
     "eslint-plugin-react-hooks": "^5.0.0",
+    "jsdom": "^30.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tsup": "^8.3.5",

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;