@texturehq/edges 5.2.0 → 5.3.0

package/dist/prose.css

@@ -132,13 +132,15 @@
   text-decoration-color: currentcolor;
 }
 
-/* Inline code — warm-tinted pill (the Slack/GitHub/Notion convention). */
+/* Inline code — tinted pill (the Slack/GitHub/Notion convention), on the
+   shared `--color-code-*` tokens. Was rose-pastel/rose-base, which read as
+   the right convention but only reached 3.56:1. */
 .prose :where(code):not(pre code) {
   font: var(--text-code);
   letter-spacing: var(--text-code-letter-spacing);
   font-size: 0.875em;
-  background: var(--color-rose-pastel);
-  color: var(--color-rose-base);
+  background: var(--color-code-background);
+  color: var(--color-code-text);
   padding: 0 5px;
   border-radius: var(--radius-sm);
 }

package/dist/styles/theme-light-override.css

@@ -60,6 +60,8 @@
   --color-action-default: var(--color-action-primary);
   --color-action-default-hover: var(--color-action-primary-hover);
   --color-action-default-text: var(--color-action-primary-text);
+  --color-code-text: #1d6b74;
+  --color-code-background: #dcf1f4;
   --color-skeleton-base: #e7e6e5;
   --color-skeleton-highlight: #f5f5f4;
   --color-skeleton-wave: rgba(255, 255, 255, 0.6);

package/dist/styles.css

@@ -26,6 +26,7 @@
   --color-moss-base: #8fbf2c;
   --color-ocean-pastel: #dcf1f4;
   --color-ocean-base: #2fa3b0;
+  --color-ocean-deep: #1d6b74;
   --color-iris-pastel: #e3e6f5;
   --color-iris-base: #3945a8;
   --color-plum-pastel: #f0e3f7;
@@ -221,6 +222,8 @@
   --color-action-destructive: #c42d2d;
   --color-action-destructive-hover: #7a1212;
   --color-action-destructive-text: #ffffff;
+  --color-code-text: #1d6b74;
+  --color-code-background: #dcf1f4;
   --color-feedback-success-text: #15452a;
   --color-feedback-success-background: #e4f3e9;
   --color-feedback-success-border: #278a4a;
@@ -472,6 +475,7 @@
   --color-moss-base: #8fbf2c;
   --color-ocean-pastel: #dcf1f4;
   --color-ocean-base: #2fa3b0;
+  --color-ocean-deep: #1d6b74;
   --color-iris-pastel: #e3e6f5;
   --color-iris-base: #3945a8;
   --color-plum-pastel: #f0e3f7;
@@ -708,6 +712,8 @@
   --color-action-destructive: #c42d2d;
   --color-action-destructive-hover: #7a1212;
   --color-action-destructive-text: #ffffff;
+  --color-code-text: #1d6b74;
+  --color-code-background: #dcf1f4;
   --color-feedback-success-text: #15452a;
   --color-feedback-success-background: #e4f3e9;
   --color-feedback-success-border: #278a4a;
@@ -965,6 +971,8 @@
   --color-action-destructive: var(--color-feedback-error-border);
   --color-action-destructive-hover: var(--color-feedback-error-text);
   --color-action-destructive-text: var(--color-text-inverse);
+  --color-code-text: var(--color-ocean-deep);
+  --color-code-background: var(--color-ocean-pastel);
   --color-feedback-success-text: var(--color-success-dark);
   --color-feedback-success-background: var(--color-success-light);
   --color-feedback-success-border: var(--color-success-base);
@@ -1036,6 +1044,7 @@
   --color-moss-base: #a8d44a;
   --color-ocean-pastel: #15343a;
   --color-ocean-base: #48bcc8;
+  --color-ocean-deep: #1d6b74;
   --color-iris-pastel: #1e2248;
   --color-iris-base: #6270d0;
   --color-plum-pastel: #2e1640;
@@ -1195,6 +1204,8 @@
   --color-action-destructive: var(--color-feedback-error-border);
   --color-action-destructive-hover: var(--color-feedback-error-text);
   --color-action-destructive-text: var(--color-text-inverse);
+  --color-code-text: var(--color-ocean-base);
+  --color-code-background: var(--color-ocean-pastel);
   --color-feedback-success-text: var(--color-success-dark);
   --color-feedback-success-background: var(--color-success-light);
   --color-feedback-success-border: var(--color-success-base);
@@ -1580,8 +1591,8 @@
   font: var(--text-code);
   letter-spacing: var(--text-code-letter-spacing);
   font-size: 0.875em;
-  background: var(--color-rose-pastel);
-  color: var(--color-rose-base);
+  background: var(--color-code-background);
+  color: var(--color-code-text);
   padding: 0 5px;
   border-radius: var(--radius-sm);
 }
@@ -1751,6 +1762,8 @@
   --color-action-default: var(--color-action-primary);
   --color-action-default-hover: var(--color-action-primary-hover);
   --color-action-default-text: var(--color-action-primary-text);
+  --color-code-text: #1d6b74;
+  --color-code-background: #dcf1f4;
   --color-skeleton-base: #e7e6e5;
   --color-skeleton-highlight: #f5f5f4;
   --color-skeleton-wave: rgba(255, 255, 255, 0.6);
@@ -3885,6 +3898,9 @@
   .border-ocean-base {
     border-color: var(--color-ocean-base);
   }
+  .border-ocean-deep {
+    border-color: var(--color-ocean-deep);
+  }
   .border-ocean-pastel {
     border-color: var(--color-ocean-pastel);
   }
@@ -4149,6 +4165,9 @@
   .bg-canary-pastel {
     background-color: var(--color-canary-pastel);
   }
+  .bg-code-background {
+    background-color: var(--color-code-background);
+  }
   .bg-current {
     background-color: currentcolor;
   }
@@ -4284,6 +4303,9 @@
   .bg-ocean-base {
     background-color: var(--color-ocean-base);
   }
+  .bg-ocean-deep {
+    background-color: var(--color-ocean-deep);
+  }
   .bg-ocean-pastel {
     background-color: var(--color-ocean-pastel);
   }
@@ -5278,6 +5300,9 @@
   .text-canary-pastel {
     color: var(--color-canary-pastel);
   }
+  .text-code-text {
+    color: var(--color-code-text);
+  }
   .text-current {
     color: currentcolor;
   }
@@ -5389,6 +5414,9 @@
   .text-ocean-base {
     color: var(--color-ocean-base);
   }
+  .text-ocean-deep {
+    color: var(--color-ocean-deep);
+  }
   .text-ocean-pastel {
     color: var(--color-ocean-pastel);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@texturehq/edges",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "author": "Nicholas Brown <nick@texturehq.com>",
   "description": "A shared component library for Texture",
   "type": "module",
@@ -96,7 +96,7 @@
     "@internationalized/date": "^3.12.0",
     "@phosphor-icons/react": "^2.1.7",
     "@tanstack/react-virtual": "^3.13.12",
-    "@texturehq/edges-tokens": "^0.4.3",
+    "@texturehq/edges-tokens": "^0.5.0",
     "@tiptap/core": "^3.4.5",
     "@tiptap/extension-link": "^3.4.5",
     "@tiptap/pm": "^3.4.5",

package/scripts/generate-color-utilities.mjs

@@ -73,6 +73,12 @@ function classify(token) {
   if (token.startsWith("input-background-")) return ["bg"];
   if (token.startsWith("scrim-") || token.startsWith("skeleton-")) return ["bg"];
 
+  if (token.startsWith("code-")) {
+    if (token.endsWith("-background")) return ["bg"];
+    if (token.endsWith("-text")) return ["text"];
+    return null;
+  }
+
   if (token.startsWith("feedback-")) {
     if (token.endsWith("-background")) return ["bg"];
     if (token.endsWith("-border")) return ["border"];