@oxide/design-system 1.8.0--canary.7d8d904.0 → 1.8.0

package/README.md

@@ -35,9 +35,7 @@ back with figma.
 ## Exporting Icons
 
 Icons are also exported from figma using
-[figma export cli](https://figma-export.marcomontalbano.com/). A PR should be opened
-automatically for updating icons via the
-[update-icons workflow](.github/workflows/update-icons.yaml).
+[figma export cli](https://figma-export.marcomontalbano.com/).
 
 Icons are processed and exported as SVGs for direct use in environments where SVGR is
 supported (like our web console). However, for other internal sites such as the marketing

package/components/dist/asciidoc.css

@@ -7,20 +7,26 @@
  */
 
 @layer components {
+  .accent-link {
+    @apply text-accent-secondary hover:text-accent;
+    text-decoration: underline;
+    text-decoration-color: var(--content-accent-tertiary);
+  }
+
   .asciidoc-body .line-through {
     text-decoration: line-through;
   }
 
   .asciidoc-body .quoteblock {
-    @apply mb-8 mt-8 border-l pl-[1.6rem] text-tertiary border-default;
+    @apply mb-8 mt-8 border-l pl-[1.6rem] text-secondary border-default;
   }
 
   .asciidoc-body .quoteblock p {
-    @apply text-tertiary;
+    @apply text-secondary;
   }
 
   .asciidoc-body .quoteblock .attribution {
-    @apply mt-8 text-default;
+    @apply mt-8 text-raise;
   }
 
   .asciidoc-body .attribution cite {
@@ -68,7 +74,7 @@
 
   /* Use semi-bold for strong */
   .asciidoc-body strong {
-    @apply font-[500] text-default;
+    @apply font-[500] text-raise;
   }
 
   .asciidoc-body a strong {
@@ -79,7 +85,7 @@
   .asciidoc-body h3,
   .asciidoc-body h4,
   .asciidoc-body h5 {
-    @apply relative mb-3 mt-10 text-default;
+    @apply relative mb-3 mt-10 text-raise;
   }
 
   /* Removes top spacing from header if it is the first element */
@@ -96,7 +102,7 @@
   .asciidoc-body h3 a,
   .asciidoc-body h4 a,
   .asciidoc-body h5 a {
-    @apply flex items-center text-default;
+    @apply flex items-center text-raise;
   }
 
   .asciidoc-body h1[data-sectnum]:before,
@@ -104,7 +110,7 @@
   .asciidoc-body h3[data-sectnum]:before,
   .asciidoc-body h4[data-sectnum]:before,
   .asciidoc-body h5[data-sectnum]:before {
-    @apply bottom-0 mr-2 inline-block text-quaternary 800:absolute 800:-left-[72px] 800:mr-0 800:w-[60px] 800:text-right 800:text-sans-lg;
+    @apply bottom-0 mr-2 inline-block text-tertiary 800:absolute 800:-left-[72px] 800:mr-0 800:w-[60px] 800:text-right 800:text-sans-lg;
   }
 
   .asciidoc-body h3[data-sectnum]:before,
@@ -122,7 +128,7 @@
 
   .asciidoc-body h4,
   .asciidoc-body h5 {
-    @apply mb-2 mt-8 text-sans-lg text-default;
+    @apply mb-2 mt-8 text-sans-lg text-raise;
   }
 
   .asciidoc-body .anchor {
@@ -133,12 +139,12 @@
   }
 
   .asciidoc-body .dlist dt {
-    @apply text-sans-lg text-default;
+    @apply text-sans-lg text-raise;
   }
 
   .asciidoc-body .dlist dt:after {
     content: ':';
-    @apply text-sans-lg text-quaternary;
+    @apply text-sans-lg text-tertiary;
   }
 
   .asciidoc-body {
@@ -161,7 +167,7 @@
 
   .asciidoc-body ul,
   .asciidoc-body ol {
-    @apply mb-4 list-disc text-mono-sm text-tertiary;
+    @apply mb-4 list-disc text-mono-sm text-secondary;
   }
 
   .asciidoc-body ul p,
@@ -239,7 +245,7 @@
   }
 
   .asciidoc-body p {
-    @apply text-secondary;
+    @apply text-default;
   }
 
   .asciidoc-body .arabic {
@@ -263,7 +269,7 @@
   }
 
   .asciidoc-body ol p {
-    @apply normal-case text-secondary;
+    @apply normal-case text-default;
   }
 
   .text-mono-code {
@@ -278,8 +284,8 @@
   .asciidoc-body h3 code,
   .asciidoc-body h4 code,
   .asciidoc-body h5 code,
-  .asciidoc-body table code {
-    @apply text-secondary;
+  .asciidoc-body table code .inline-code {
+    @apply text-[0.825rem] text-default;
     @apply ml-[1px] mr-[1px] rounded border px-[4px] py-[1px] align-[1px] bg-raise border-secondary;
   }
 
@@ -300,19 +306,6 @@
     @apply overflow-x-auto !text-[13px] text-mono-code;
   }
 
-  .asciidoc-body h1 code,
-  .asciidoc-body h2 code,
-  .asciidoc-body h3 code,
-  .asciidoc-body h4 code,
-  .asciidoc-body h5 code {
-    @apply text-[0.825em];
-  }
-
-  .asciidoc-body .paragraph > code,
-  .asciidoc-body p code {
-    @apply text-[0.825rem];
-  }
-
   .asciidoc-body code {
     font-feature-settings: 'calt' 0;
   }
@@ -322,16 +315,16 @@
   }
 
   .asciidoc-body .listingblock pre:not(.highlight) {
-    @apply text-secondary;
+    @apply text-default;
   }
 
   .asciidoc-body .listingblock code[data-lang]:before {
-    @apply absolute right-2 top-2 block text-mono-xs text-tertiary;
+    @apply absolute right-2 top-2 block text-mono-xs text-secondary;
     content: attr(data-lang);
   }
 
   .asciidoc-body pre .conum[data-value] {
-    @apply relative -top-[0.125rem] inline-block h-[1rem] min-w-[1rem] rounded-full text-center not-italic text-mono-xs text-tertiary bg-raise;
+    @apply relative -top-[0.125rem] inline-block h-[1rem] min-w-[1rem] rounded-full text-center not-italic text-mono-xs text-secondary bg-raise;
   }
 
   .asciidoc-body pre .conum[data-value]:after {
@@ -503,7 +496,7 @@
   }
 
   .asciidoc-body .imageblock .title {
-    @apply mt-3 max-w-full text-center not-italic text-mono-xs text-tertiary;
+    @apply mt-3 max-w-full text-center not-italic text-mono-xs text-secondary;
   }
 
   .asciidoc-body img.wide {
@@ -513,7 +506,7 @@
   }
 
   .asciidoc-body sup.footnote {
-    @apply text-mono-xs text-tertiary;
+    @apply text-mono-xs text-secondary;
   }
 
   .asciidoc-body sup.footnote a {
@@ -531,11 +524,11 @@
   }
 
   .asciidoc-body .title {
-    @apply mb-2 max-w-[40rem] text-left italic text-sans-lg text-tertiary;
+    @apply mb-2 max-w-[40rem] text-left italic text-sans-lg text-secondary;
   }
 
   .asciidoc-body summary.title {
-    @apply not-italic;
+    @apply not-italic text-raise;
   }
 
   .asciidoc-body .conum {
@@ -590,7 +583,7 @@
   }
 
   .asciidoc-body table th {
-    @apply text-left text-mono-xs text-tertiary bg-raise;
+    @apply text-left text-mono-xs text-secondary bg-raise;
   }
 
   .asciidoc-body table th p {
@@ -618,7 +611,7 @@
   }
 
   .asciidoc-body .colist table tr td:first-of-type {
-    @apply w-[1%] whitespace-nowrap text-quaternary;
+    @apply w-[1%] whitespace-nowrap text-tertiary;
   }
 
   .asciidoc-body .colist table b {
@@ -650,11 +643,6 @@
     @apply bg-raise p-4 rounded-lg my-8 px-6 py-5;
   }
 
-  /* Boosting body text for long text readability */
-  .asciidoc-body p {
-    color: #c8cacb;
-  }
-
   @media print {
     html {
       font-size: 14px !important;
@@ -736,8 +724,50 @@
     }
 
     .asciidoc-body .admonitionblock {
-      color: var(--content-default) !important;
+      color: var(--content-raise) !important;
       background-color: var(--surface-raise) !important;
     }
   }
+
+  @media screen and (min-width: 720px) {
+    .animated-accordion[data-state='open'].hydrated {
+      animation: accordionSlideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
+    }
+    .animated-accordion[data-state='closed'].hydrated {
+      animation: accordionSlideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
+    }
+  }
+
+  @media screen and (min-width: 720px) {
+    .animated-accordion {
+      overflow: hidden;
+    }
+  }
+
+  @media screen and (prefers-reduced-motion) {
+    .animated-accordion[data-state='open'] {
+      animation-name: none;
+    }
+    .animated-accordion[data-state='closed'] {
+      animation-name: none;
+    }
+  }
+
+  @keyframes accordionSlideDown {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes accordionSlideUp {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
 }

package/components/dist/index.d.ts

@@ -1,10 +1,42 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _oxide_react_asciidoc from '@oxide/react-asciidoc';
+import { DocumentSection, Block, DocumentBlock } from '@oxide/react-asciidoc';
+import * as _asciidoctor_core from '@asciidoctor/core';
+import { Registry, Document, Html5Converter, Block as Block$1 } from '@asciidoctor/core';
 import * as react from 'react';
 import { ReactNode } from 'react';
 import { TabsProps, TabsTriggerProps, TabsListProps, TabsContentProps } from '@radix-ui/react-tabs';
 import { SetRequired } from 'type-fest';
 
+declare function useIntersectionObserver(elements: Element[], callback: IntersectionObserverCallback, options: IntersectionObserverInit): IntersectionObserver | null;
+declare function useActiveSectionTracking(initialSections: Element[], onSectionChange: (element: Element) => void, debug?: boolean): {
+    setSections: (sections: Element[]) => void;
+    debugNode: react_jsx_runtime.JSX.Element | null;
+};
+declare const DesktopOutline: ({ toc, activeItem, className, }: {
+    toc: DocumentSection[];
+    activeItem: string;
+    className?: string | undefined;
+}) => react_jsx_runtime.JSX.Element | null;
+declare const SmallScreenOutline: ({ toc, activeItem, className, }: {
+    toc: DocumentSection[];
+    activeItem: string;
+    className?: string | undefined;
+}) => react_jsx_runtime.JSX.Element | null;
+
+declare function useDelegatedReactRouterLinks(nodeRef: React.RefObject<HTMLElement>, key: string): void;
+
+declare const highlight: (block: Block) => Promise<Block>;
+declare const attrs: {
+    sectlinks: string;
+    stem: string;
+    stylesheet: boolean;
+};
+declare const loadAsciidoctor: ({ extensions, }: {
+    extensions?: ((this: Registry) => void)[] | undefined;
+}) => _asciidoctor_core.Asciidoctor;
+declare const handleDocument: (document: Document) => Promise<_oxide_react_asciidoc.DocumentBlock>;
+
 declare const AsciiDocBlocks: {
     Admonition: ({ node }: {
         node: _oxide_react_asciidoc.AdmonitionBlock;
@@ -12,7 +44,26 @@ declare const AsciiDocBlocks: {
     Table: ({ node }: {
         node: _oxide_react_asciidoc.TableBlock;
     }) => react_jsx_runtime.JSX.Element;
+    Section: ({ node }: {
+        node: _oxide_react_asciidoc.SectionBlock;
+    }) => react_jsx_runtime.JSX.Element;
+    MinimalDocument: ({ document }: {
+        document: DocumentBlock;
+    }) => react_jsx_runtime.JSX.Element;
 };
+/**
+ * Adds word break opportunities (<wbr/>) after slashes in text, except within HTML tags.
+ * This function is used to improve line breaks for long paths or URLs in rendered content.
+ * *
+ * renderWithBreaks('/path/to/long/file.txt')
+ * '/<wbr/>path/<wbr/>to/<wbr/>long/<wbr/>file.txt'
+ */
+declare const renderWithBreaks: (text: string) => string;
+declare class InlineConverter {
+    baseConverter: Html5Converter;
+    constructor();
+    convert(node: Block$1, transform: string): string;
+}
 
 type BadgeColor = 'default' | 'destructive' | 'notice' | 'neutral' | 'purple' | 'blue';
 type BadgeVariant = 'default' | 'solid';
@@ -96,4 +147,4 @@ interface ListboxProps<Value extends string = string> {
 }
 declare const Listbox: <Value extends string = string>({ name, selected, items, placeholder, className, onChange, hasError, disabled, isLoading, ...props }: ListboxProps<Value>) => react_jsx_runtime.JSX.Element;
 
-export { AsciiDocBlocks, Badge, BadgeColor, BadgeProps, BadgeVariant, Button, ButtonProps, ButtonSize, Checkbox, CheckboxProps, Listbox, ListboxItem, ListboxProps, Spinner, SpinnerLoader, SpinnerSize, SpinnerVariant, Tabs, TabsRootProps, Variant, badgeColors, buttonSizes, buttonStyle, spinnerSizes, spinnerVariants, variants };
+export { AsciiDocBlocks, Badge, BadgeColor, BadgeProps, BadgeVariant, Button, ButtonProps, ButtonSize, Checkbox, CheckboxProps, DesktopOutline, InlineConverter, Listbox, ListboxItem, ListboxProps, SmallScreenOutline, Spinner, SpinnerLoader, SpinnerSize, SpinnerVariant, Tabs, TabsRootProps, Variant, attrs, badgeColors, buttonSizes, buttonStyle, handleDocument, highlight, loadAsciidoctor, renderWithBreaks, spinnerSizes, spinnerVariants, useActiveSectionTracking, useDelegatedReactRouterLinks, useIntersectionObserver, variants };