@oxide/design-system 2.7.0 → 2.8.0--canary.437591d.0

package/dist/asciidoc.css

@@ -6,24 +6,27 @@
  * Copyright Oxide Computer Company
  */
 
-@layer utilities {
-  .text-mono-code {
-    @apply text-[0.825em] !normal-case;
-    font-feature-settings: 'calt' 0;
-    letter-spacing: 0;
-  }
+@utility text-mono-code {
+  @apply text-[0.825em] !normal-case;
+  font-feature-settings: 'calt' 0;
+  letter-spacing: 0;
+}
 
-  .accent-link {
-    @apply text-accent-secondary hover:text-accent;
-    text-decoration: underline;
-    text-decoration-color: color-mix(in srgb, currentColor 60%, transparent);
-  }
+@utility accent-link {
+  @apply text-accent-secondary hover:text-accent;
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, currentColor 60%, transparent);
+}
 
-  .link-with-underline {
-    @apply text-default hover:text-raise;
-    text-decoration: underline;
-    text-decoration-color: color-mix(in srgb, currentColor 60%, transparent);
-  }
+@utility link-with-underline {
+  @apply text-default hover:text-raise;
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, currentColor 60%, transparent);
+}
+
+@utility inline-code {
+  @apply text-secondary;
+  @apply ml-[1px] mr-[1px] rounded border px-[4px] py-[1px] align-[1px] text-[0.825em] bg-raise border-secondary;
 }
 
 @layer components {
@@ -288,11 +291,6 @@
       @apply normal-case text-default;
     }
 
-    .inline-code {
-      @apply text-secondary;
-      @apply ml-[1px] mr-[1px] rounded border px-[4px] py-[1px] align-[1px] text-[0.825em] bg-raise border-secondary;
-    }
-
     p code,
     h1 code,
     h2 code,
@@ -403,7 +401,7 @@
     }
 
     .admonitionblock.tip strong {
-      color: var(--base-purple-800);
+      color: var(--color-purple-800);
     }
 
     .admonitionblock,
@@ -413,9 +411,9 @@
 
     .admonitionblock.tip,
     .admonitionblock.tip blockquote {
-      background-color: var(--base-purple-200);
-      color: var(--base-purple-800);
-      border-color: var(--base-purple-400);
+      background-color: var(--color-purple-200);
+      color: var(--color-purple-800);
+      border-color: var(--color-purple-400);
     }
 
     .admonitionblock.caution,
@@ -440,7 +438,7 @@
     }
 
     .admonitionblock.tip {
-      color: var(--base-purple-800);
+      color: var(--color-purple-800);
     }
 
     .admonitionblock.caution p code,
@@ -453,7 +451,7 @@
     }
 
     .admonitionblock.tip p code {
-      background-color: var(--base-purple-800);
+      @apply bg-purple-800;
     }
 
     .admonitionblock a {
@@ -474,7 +472,7 @@
     }
 
     .admonitionblock.tip a {
-      color: var(--base-purple-800);
+      @apply text-purple-800;
     }
 
     .admonition-icon svg {

package/dist/button.css

@@ -44,7 +44,7 @@ label {
     @apply text-secondary hover:bg-hover disabled:bg-transparent disabled:text-disabled;
   }
   &.btn-ghost:after {
-    @apply text-[var(--base-neutral-300)] opacity-100;
+    @apply text-neutral-300 opacity-100;
   }
 
   &.btn-accent-ghost {

package/dist/components/src/index.js

@@ -343,7 +343,7 @@ var DesktopOutline = ({
     ] }, item.id));
   };
   if (toc && toc.length > 0) {
-    return /* @__PURE__ */ jsx4("ul", { className: cn3("toc w-[--toc-width]", className), children: renderToc(toc) });
+    return /* @__PURE__ */ jsx4("ul", { className: cn3("toc w-(--toc-width)", className), children: renderToc(toc) });
   }
   return null;
 };
@@ -393,12 +393,12 @@ var SmallScreenOutline = ({
         value,
         onValueChange: setValue,
         children: /* @__PURE__ */ jsxs3(Accordion.Item, { value: "toc", children: [
-          /* @__PURE__ */ jsx4(Accordion.Header, { children: /* @__PURE__ */ jsxs3(Accordion.Trigger, { className: "flex h-12 w-full items-center justify-between text-sans-md text-default hover:bg-hover px-[--container-px] [&>svg]:data-[state=open]:rotate-90", children: [
+          /* @__PURE__ */ jsx4(Accordion.Header, { children: /* @__PURE__ */ jsxs3(Accordion.Trigger, { className: "flex h-12 w-full items-center justify-between text-sans-md text-default hover:bg-hover px-(--container-px) [&>svg]:data-[state=open]:rotate-90", children: [
             "Table of Contents",
             " ",
             /* @__PURE__ */ jsx4(DirectionRightIcon_default, { className: "transition-all text-tertiary" })
           ] }) }),
-          /* @__PURE__ */ jsx4(Accordion.Content, { className: "animated-accordion hydrated max-h-[60vh] overflow-y-scroll w-full border-t border-secondary px-[--container-px]", children: /* @__PURE__ */ jsx4("div", { className: "py-4", children: renderToc(toc) }) })
+          /* @__PURE__ */ jsx4(Accordion.Content, { className: "animated-accordion hydrated max-h-[60vh] overflow-y-scroll w-full border-t border-secondary px-(--container-px)", children: /* @__PURE__ */ jsx4("div", { className: "py-4", children: renderToc(toc) }) })
         ] })
       }
     );
@@ -2068,19 +2068,19 @@ import cn4 from "classnames";
 import { jsx as jsx6 } from "react/jsx-runtime";
 var badgeColors = {
   default: {
-    default: `ring-1 ring-inset bg-accent-secondary text-accent ring-[rgba(var(--base-green-800-rgb),0.15)]`,
-    destructive: `ring-1 ring-inset bg-destructive-secondary text-destructive ring-[rgba(var(--base-red-800-rgb),0.15)]`,
-    notice: `ring-1 ring-inset bg-notice-secondary text-notice ring-[rgba(var(--base-yellow-800-rgb),0.15)]`,
-    neutral: `ring-1 ring-inset bg-secondary text-secondary ring-[rgba(var(--base-neutral-700-rgb),0.15)]`,
-    purple: `ring-1 ring-inset bg-[var(--base-purple-200)] text-[var(--base-purple-700)] ring-[rgba(var(--base-purple-800-rgb),0.15)]`,
-    blue: `ring-1 ring-inset bg-info-secondary text-info ring-[rgba(var(--base-blue-800-rgb),0.15)]`
+    default: "bg-accent-secondary text-accent ring-accent/15",
+    destructive: "bg-destructive-secondary text-destructive ring-destructive/15",
+    notice: "bg-notice-secondary text-notice ring-notice/15",
+    blue: "bg-blue-200 text-blue-800 ring-blue-800/15",
+    purple: "bg-purple-200 text-purple-800 ring-purple-800/15",
+    neutral: "bg-secondary text-default ring-neutral-700/15"
   },
   solid: {
     default: "bg-accent text-inverse",
     destructive: "bg-destructive text-inverse",
     notice: "bg-notice text-inverse",
     neutral: "bg-inverse-tertiary text-inverse",
-    purple: "bg-[var(--base-purple-700)] text-inverse",
+    purple: "bg-purple-700 text-inverse",
     blue: "bg-info text-inverse"
   }
 };
@@ -2094,7 +2094,7 @@ var Badge = ({
     "span",
     {
       className: cn4(
-        "ox-badge",
+        "ox-badge ring ring-inset",
         `variant-${variant}`,
         "inline-flex h-4 items-center whitespace-nowrap rounded-sm px-[3px] py-[1px] uppercase text-mono-sm",
         badgeColors[variant][color],