@hraness/design-kit 0.40.0 → 0.40.1

package/dist/stylex.css

@@ -4031,6 +4031,10 @@
     .x1k5gbb1.x1k5gbb1 {
       color: highlighttext;
     }
+
+    .x1ljrylj.x1ljrylj {
+      color: linktext;
+    }
   }
 
   @media (width <= 48rem) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hraness/design-kit",
-  "version": "0.40.0",
+  "version": "0.40.1",
   "description": "React components and CSS for Hraness apps and product sites: application shells, marketing sections, charts, themes, effects, and syntax highlighting. Built on @hraness/ui.",
   "license": "MIT",
   "type": "module",

package/portfolio-inventory.json

@@ -6,7 +6,7 @@
       "name": "@hraness/design-kit",
       "path": ".",
       "visibility": "public",
-      "version": "0.40.0"
+      "version": "0.40.1"
     }
   ],
   "contract": "hraness.portfolio-inventory/v1",

package/src/plain-publication.css

@@ -25,7 +25,7 @@
   flex: 1 0 auto;
 }
 
-:where(.plain-site.plain-publication a:not(.hraness-design-skip-link)) {
+:where(.plain-site.plain-publication a:not(.hraness-design-skip-link)):not(:where(.hraness-marketing-account__primary, .hraness-marketing-account__sign-in)) {
   color: var(--plain-link);
   overflow-wrap: anywhere;
   text-decoration: none;
@@ -36,12 +36,12 @@
 :where(
   .plain-site.plain-publication
     a:not(.hraness-design-skip-link):is(:hover, :focus-visible)
-) {
+):not(:where(.hraness-marketing-account__primary, .hraness-marketing-account__sign-in)) {
   text-decoration-line: underline;
   text-decoration-style: dotted;
 }
 
-:where(.plain-site.plain-publication a:not(.hraness-design-skip-link):focus-visible) {
+:where(.plain-site.plain-publication a:not(.hraness-design-skip-link):focus-visible):not(:where(.hraness-marketing-account__primary, .hraness-marketing-account__sign-in)) {
   border-radius: 1px;
   outline: 1px dotted currentColor;
   outline-offset: 3px;
@@ -50,7 +50,7 @@
 :where(
   .plain-site.plain-publication
     a:not(.hraness-design-skip-link):focus:not(:focus-visible)
-) {
+):not(:where(.hraness-marketing-account__primary, .hraness-marketing-account__sign-in)) {
   outline: none;
 }
 
@@ -726,6 +726,7 @@
 }
 
 @media (forced-colors: none) {
+  .plain-site.plain-publication.plain-publication--embedded .plain-publication__byline a:is(:hover, :focus-visible),
   .plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body a:is(:hover, :focus-visible) {
     text-decoration-color: currentColor;
   }

package/src/plain-site.css

@@ -111,7 +111,7 @@
   box-sizing: border-box;
 }
 
-:where(.plain-header a, .plain-page a, .plain-footer a) {
+:where(.plain-header a, .plain-page a, .plain-footer a):not(:where(.hraness-marketing-account__primary, .hraness-marketing-account__sign-in)) {
   color: var(--plain-link);
   overflow-wrap: anywhere;
   text-decoration: none;
@@ -123,7 +123,7 @@
   .plain-header a:is(:hover, :focus-visible),
   .plain-page a:is(:hover, :focus-visible),
   .plain-footer a:is(:hover, :focus-visible)
-) {
+):not(:where(.hraness-marketing-account__primary, .hraness-marketing-account__sign-in)) {
   text-decoration: underline;
 }
 
@@ -131,7 +131,7 @@
   .plain-header a:focus-visible,
   .plain-page a:focus-visible,
   .plain-footer a:focus-visible
-) {
+):not(:where(.hraness-marketing-account__primary, .hraness-marketing-account__sign-in)) {
   border-radius: 1px;
   outline: 1px dotted currentColor;
   outline-offset: 3px;
@@ -141,7 +141,7 @@
   .plain-header a:focus:not(:focus-visible),
   .plain-page a:focus:not(:focus-visible),
   .plain-footer a:focus:not(:focus-visible)
-) {
+):not(:where(.hraness-marketing-account__primary, .hraness-marketing-account__sign-in)) {
   outline: none;
 }
 

package/src/react/design-gallery.tsx

@@ -309,6 +309,16 @@ export function DesignSystemGallery({
             </p>
           </div>
         </div>
+        <div
+          aria-label="Plain site account actions"
+          className="design-gallery__plain-theme plain-site plain-publication"
+        >
+          <div className="plain-page">
+            <MarketingAccount id="plain-account" summary="Keep your preferences across devices.">
+              <MarketingAccountActions primary={{ href: "#plain-account", label: "Create account" }} signIn={{ href: "#plain-account" }} />
+            </MarketingAccount>
+          </div>
+        </div>
       </section>
 
       <section className="design-gallery__section" id="paper-theme">

package/src/react/marketing-account.stylex.ts

@@ -56,7 +56,7 @@ export const marketingAccountStyles = stylex.create({
   },
   signIn: {
     alignItems: "center",
-    color: "var(--foreground)",
+    color: { default: "var(--foreground)", "@media (forced-colors: active)": "LinkText" },
     display: "inline-flex",
     fontFamily: "var(--font-text)",
     fontSize: "1.0625rem",
@@ -67,7 +67,7 @@ export const marketingAccountStyles = stylex.create({
     outlineOffset: { default: null, ":focus-visible": "3px" },
     textDecorationLine: "underline",
     textDecorationStyle: "dotted",
-    textDecorationColor: { default: "color-mix(in srgb, currentColor 45%, transparent)", ":hover": "currentColor", "@media (forced-colors: active)": "LinkText" },
+    textDecorationColor: { default: "color-mix(in srgb, currentColor 45%, transparent)", ":hover": "currentColor", ":focus-visible": "currentColor", "@media (forced-colors: active)": "LinkText" },
     textDecorationThickness: "1px",
     textUnderlineOffset: "0.22em",
   },