npm - @chassis-ui/docs - Versions diffs - 0.4.0 → 0.5.0 - Mend

@chassis-ui/docs 0.4.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (31) hide show

package/README.md +1 -1
package/package.json +2 -2
package/src/components/DocsSidebar.astro +1 -1
package/src/components/FeatureCard.astro +7 -7
package/src/components/NavLink.astro +1 -1
package/src/components/ThemeToggler.astro +2 -2
package/src/components/shortcodes/AddedIn.astro +1 -1
package/src/components/shortcodes/CSSOnly.astro +1 -1
package/src/components/shortcodes/Code.astro +3 -3
package/src/components/shortcodes/DeprecatedIn.astro +1 -1
package/src/components/shortcodes/Example.astro +2 -2
package/src/components/shortcodes/InFigma.astro +1 -1
package/src/components/shortcodes/ResizableExample.astro +2 -2
package/src/layouts/DocsLayout.astro +15 -15
package/src/layouts/SingleLayout.astro +3 -3
package/src/layouts/footer/Footer.astro +10 -10
package/src/layouts/head/Social.astro +1 -1
package/src/layouts/header/Navigation.astro +22 -22
package/src/layouts/header/SearchDialog.astro +5 -5
package/src/layouts/header/Skippy.astro +3 -3
package/src/scss/_content.scss +3 -3
package/src/scss/_footer.scss +1 -1
package/src/scss/_layout.scss +4 -4
package/src/scss/_navbar.scss +6 -6
package/src/scss/_placeholder-img.scss +1 -1
package/src/scss/_search.scss +38 -38
package/src/scss/_sidebar.scss +14 -14
package/src/scss/_snippets.scss +15 -15
package/src/scss/_toc.scss +9 -9
package/src/scss/_vars.scss +1 -1
package/src/scss/main.scss +4 -4

package/README.md CHANGED Viewed

@@ -2,7 +2,7 @@
 > Shared Astro layouts, components, and utilities for Chassis documentation sites.
-[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) [![Version: 0.4.0](https://img.shields.io/badge/Version-0.4.0-blue.svg)](https://www.npmjs.com/package/@chassis-ui/docs) [![npm](https://img.shields.io/npm/v/@chassis-ui/docs.svg)](https://www.npmjs.com/package/@chassis-ui/docs)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) [![Version: 0.5.0](https://img.shields.io/badge/Version-0.5.0-blue.svg)](https://www.npmjs.com/package/@chassis-ui/docs) [![npm](https://img.shields.io/npm/v/@chassis-ui/docs.svg)](https://www.npmjs.com/package/@chassis-ui/docs)
 ## Overview

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@chassis-ui/docs",
   "description": "Shared Astro components and layouts for Chassis documentation sites.",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
   "repository": {
     "type": "git",
@@ -45,7 +45,7 @@
   },
   "peerDependencies": {
     "@astrojs/markdown-remark": "^7.0.0",
-    "@chassis-ui/css": "^0.4.0",
+    "@chassis-ui/css": "^0.5.0-0",
     "@pagefind/component-ui": "^1.0.0",
     "@shikijs/transformers": "^4.3.1",
     "astro": "^7.0.0",

package/src/components/DocsSidebar.astro CHANGED Viewed

@@ -118,7 +118,7 @@ const sidebar = getData('sidebar')
           return (
             <>
-              <li class="cxd-links-span-all mt-2xsmall mb-medium mx-large border-top" />
+              <li class="cxd-links-span-all mt-2xs mb-md mx-lg border-top" />
               <a
                 href={`${getConfig().docsPath}/${groupSlug}/`}
                 class:list={['cxd-links-link cxd-links-span-all', { active }]}

package/src/components/FeatureCard.astro CHANGED Viewed

@@ -27,8 +27,8 @@ const hasContent = Astro.slots.has('default')
 // Build class strings
 const cardClasses = [
-  'feature-item bg-even d-flex flex-column rounded-large',
-  'p-medium large:p-xlarge gap-medium medium:gap-xlarge',
+  'feature-item bg-even d-flex flex-column rounded-lg',
+  'p-md lg:p-xl gap-md md:gap-xl',
   horizontal ? '' : 'h-100',
   classes
 ]
@@ -37,8 +37,8 @@ const cardClasses = [
 const headerClasses = [
   'feature-header d-flex',
-  'gap-medium medium:gap-xlarge',
-  horizontal ? 'flex-column medium:flex-row' : 'flex-column'
+  'gap-md md:gap-xl',
+  horizontal ? 'flex-column md:flex-row' : 'flex-column'
 ].join(' ')
 ---
@@ -47,15 +47,15 @@ const headerClasses = [
     {
       icon && (
         <div class="feature-thumb">
-          <Icon name={icon} class="feature-icon icon-3xlarge medium:icon-4xlarge" sprite="" />
+          <Icon name={icon} class="feature-icon icon-3xl md:icon-4xl" sprite="" />
         </div>
       )
     }
     <div>
-      <h3 class="feature-title font-large medium:font-xlarge mb-3xsmall medium:mb-2xsmall">
+      <h3 class="feature-title font-lg md:font-xl mb-3xs md:mb-2xs">
         <slot name="title" />
       </h3>
-      <p class="feature-body medium:font-large mb-0">
+      <p class="feature-body md:font-lg mb-0">
         <slot name="body" />
       </p>
     </div>

package/src/components/NavLink.astro CHANGED Viewed

@@ -21,7 +21,7 @@ interface Props {
 const { active, class: className, ...props } = Astro.props
 ---
-<li class="nav-item col-6 large:col-auto">
+<li class="nav-item col-6 lg:col-auto">
   <a
     aria-current={active ? true : undefined}
     class:list={['nav-link', className, { active }]}

package/src/components/ThemeToggler.astro CHANGED Viewed

@@ -17,7 +17,7 @@ const { layout } = Astro.props
 ---
 <button
-  class="nav-link caret px-0 large:px-xsmall"
+  class="nav-link caret px-0 lg:px-xs"
   id="cxd-theme"
   type="button"
   aria-expanded="false"
@@ -27,7 +27,7 @@ const { layout } = Astro.props
 >
   <Icon name="circle-half-solid" class="theme-icon-active" />
   <span
-    class=`${layout === 'examples' ? 'visually-hidden' : 'large:d-none ms-xsmall'}`
+    class=`${layout === 'examples' ? 'visually-hidden' : 'lg:d-none ms-xs'}`
     id="cxd-theme-text">Toggle theme</span
   >
 </button>

package/src/components/shortcodes/AddedIn.astro CHANGED Viewed

@@ -13,4 +13,4 @@ interface Props {
 const { version } = Astro.props
 ---
-<span class="badge large success smooth mb-medium rounded-medium">Added in v{version}</span>
+<span class="badge lg success smooth mb-md rounded-md">Added in v{version}</span>

package/src/components/shortcodes/CSSOnly.astro CHANGED Viewed

@@ -16,7 +16,7 @@ const { tooltip = 'This feature is only available in CSS and not in Figma compon
 ---
 <span
-  class="badge large info smooth mb-medium rounded-medium"
+  class="badge lg info smooth mb-md rounded-md"
   data-cx-toggle="tooltip"
   title={tooltip}>CSS Only</span
 >

package/src/components/shortcodes/Code.astro CHANGED Viewed

@@ -181,7 +181,7 @@ if (codeToDisplay && detectedLang) {
       ) : (
         <small class="font-code fg-subtle text-uppercase">{displayLang}</small>
       )}
-      <div class="d-flex ms-auto gap-2xsmall">
+      <div class="d-flex ms-auto gap-2xs">
         {hasPreview && (
           <>
             <button
@@ -193,7 +193,7 @@ if (codeToDisplay && detectedLang) {
             >
               <Icon name="swatchbook-solid" />
             </button>
-            <span class="vr mx-2xsmall" />
+            <span class="vr mx-2xs" />
             <button
               type="button"
               class="button-edit"
@@ -248,7 +248,7 @@ if (codeToDisplay && detectedLang) {
           ) : (
             <small class="font-code fg-subtle text-uppercase">{displayLang}</small>
           )}
-          <div class="d-flex ms-auto gap-2xsmall">
+          <div class="d-flex ms-auto gap-2xs">
             <button
               type="button"
               class="button-clipboard"

package/src/components/shortcodes/DeprecatedIn.astro CHANGED Viewed

@@ -13,6 +13,6 @@ interface Props {
 const { version } = Astro.props
 ---
-<span class="badge large warning smooth mb-medium rounded-medium">
+<span class="badge lg warning smooth mb-md rounded-md">
   Deprecated in v{version}
 </span>

package/src/components/shortcodes/Example.astro CHANGED Viewed

@@ -84,11 +84,11 @@ let sourceMarkup = customMarkup
 const simplifiedMarkup = sourceMarkup
   .replace(
-    /<svg.*class="cxd-placeholder-image(?:-large)?(?: *?cxd-placeholder-image-large)? ?(.*?)".*?<\/svg>/g,
+    /<svg.*class="cxd-placeholder-image(?:-lg)?(?: *?cxd-placeholder-image-lg)? ?(.*?)".*?<\/svg>/g,
     (_match, classes) => `<img src="..."${classes ? ` class="${classes}"` : ''} alt="...">`
   )
   .replace(
-    /<img.*class="cxd-placeholder-image(?:-large)?(?: *?cxd-placeholder-image-large)? ?(.*?)".*?>/g,
+    /<img.*class="cxd-placeholder-image(?:-lg)?(?: *?cxd-placeholder-image-lg)? ?(.*?)".*?>/g,
     (_match, classes) => `<img src="..."${classes ? ` class="${classes}"` : ''} alt="...">`
   )
   .replace(/(<svg class="icon\b[^"]*")\s+width="\d+"\s+height="\d+"/g, '$1')

package/src/components/shortcodes/InFigma.astro CHANGED Viewed

@@ -20,7 +20,7 @@ const tooltipText =
 ---
 <span
-  class="badge large primary smooth mb-medium rounded-medium"
+  class="badge lg primary smooth mb-md rounded-md"
   data-cx-toggle="tooltip"
   title={tooltipText}>In Figma</span
 >

package/src/components/shortcodes/ResizableExample.astro CHANGED Viewed

@@ -86,11 +86,11 @@ let sourceMarkup = customMarkup
 const simplifiedMarkup = sourceMarkup
   .replace(
-    /<svg.*class="cxd-placeholder-img(?:-large)?(?: *?cxd-placeholder-img-large)? ?(.*?)".*?<\/svg>/g,
+    /<svg.*class="cxd-placeholder-img(?:-lg)?(?: *?cxd-placeholder-img-lg)? ?(.*?)".*?<\/svg>/g,
     (_match, classes) => `<img src="..."${classes ? ` class="${classes}"` : ''} alt="...">`
   )
   .replace(
-    /<img.*class="cxd-placeholder-img(?:-large)?(?: *?cxd-placeholder-img-large)? ?(.*?)".*?>/g,
+    /<img.*class="cxd-placeholder-img(?:-lg)?(?: *?cxd-placeholder-img-lg)? ?(.*?)".*?>/g,
     (_match, classes) => `<img src="..."${classes ? ` class="${classes}"` : ''} alt="...">`
   )
   .replace(/(<svg class="icon\b[^"]*")\s+width="\d+"\s+height="\d+"/g, '$1')

package/src/layouts/DocsLayout.astro CHANGED Viewed

@@ -46,7 +46,7 @@ if (frontmatter.toc) {
   <div slot="main" class="container fluid cxd-gutter cxd-layout">
     <aside class="cxd-sidebar">
       <dialog
-        class="max-large:drawer drawer-start"
+        class="max-lg:drawer drawer-start"
         id="cxdSidebar"
         aria-labelledby="cxdSidebarOffcanvasLabel"
       >
@@ -59,8 +59,8 @@ if (frontmatter.toc) {
             aria-label="Close"
             data-cx-target="#cxdSidebar"></button>
         </div>
-        <hr class="large:d-none m-0" />
-        <div class="drawer-body large:p-0">
+        <hr class="lg:d-none m-0" />
+        <div class="drawer-body lg:p-0">
           <slot name="sidebar">
             <DocsSidebar />
           </slot>
@@ -72,22 +72,22 @@ if (frontmatter.toc) {
       <div class="cxd-intro">
         <slot name="intro">
           <div
-            class="medium:d-flex medium:flex-row-reverse justify-content-between align-items-start"
+            class="md:d-flex md:flex-row-reverse justify-content-between align-items-start"
           >
-            <div class="mb-medium medium:mb-0 d-flex text-nowrap">
+            <div class="mb-md md:mb-0 d-flex text-nowrap">
               {
                 // This is needed because we want to show the badge if show_badge isn't present or is set to false
                 frontmatter.added &&
                   ((frontmatter.added.show_badge !== undefined &&
                     frontmatter.added.show_badge === true) ||
                     frontmatter.added.show_badge === undefined) && (
-                    <span class="badge success smooth rounded-medium me-xsmall">
+                    <span class="badge success smooth rounded-md me-xs">
                       Added in v{frontmatter.added.version}
                     </span>
                   )
               }
               <a
-                class="button default small"
+                class="button default sm"
                 href={`${getConfig().repo}/blob/${id}.mdx`}
                 title="View and edit this file on GitHub"
                 target="_blank"
@@ -96,7 +96,7 @@ if (frontmatter.toc) {
                 View on GitHub
               </a>
             </div>
-            <h1 class="cxd-title mb-small" id="content">{frontmatter.title}</h1>
+            <h1 class="cxd-title mb-sm" id="content">{frontmatter.title}</h1>
           </div>
           <div class="cxd-subtitle">
             {
@@ -112,7 +112,7 @@ if (frontmatter.toc) {
         frontmatter.toc && headings && (
           <div class="cxd-toc">
             <button
-              class="button default mb-large text-decoration-none cxd-toc-toggle medium:d-none"
+              class="button default mb-lg text-decoration-none cxd-toc-toggle md:d-none"
               type="button"
               data-cx-toggle="collapse"
               data-cx-target="#tocContents"
@@ -120,10 +120,10 @@ if (frontmatter.toc) {
               aria-controls="tocContents"
             >
               On this page
-              <Icon name="chevron-sort-solid" class="icon-small" />
+              <Icon name="chevron-sort-solid" class="icon-sm" />
             </button>
-            <strong class="d-none medium:d-block h6 my-xsmall">On this page</strong>
-            <hr class="d-none medium:d-block my-xsmall" />
+            <strong class="d-none md:d-block h6 my-xs">On this page</strong>
+            <hr class="d-none md:d-block my-xs" />
             <div class="collapse cxd-toc-collapse" id="tocContents">
               <nav id="TableOfContents" aria-label="Table of contents">
                 <slot name="toc">
@@ -138,16 +138,16 @@ if (frontmatter.toc) {
       <div class="cxd-content">
         {
           frontmatter.sections && (
-            <div class="row g-xlarge">
+            <div class="row g-xl">
               {frontmatter.sections.map((section: DocSection) => (
-                <div class="medium:col-6">
+                <div class="md:col-6">
                   <a
                     class="d-block text-decoration-none"
                     href={getChassisDocsPath(
                       `${parentDirectory ? parentDirectory + '/' : ''}${section.slug ? section.slug : getSlug(section.title)}/`
                     )}
                   >
-                    <strong class="d-block h5 mb-2xsmall">{section.title}</strong>
+                    <strong class="d-block h5 mb-2xs">{section.title}</strong>
                     <span class="fg-subtle">{section.description}</span>
                   </a>
                 </div>

package/src/layouts/SingleLayout.astro CHANGED Viewed

@@ -22,10 +22,10 @@ mainProps['class'] = 'min-vh-100'
 ---
 <BaseLayout {...Astro.props} layout="single" overrides={{ main: mainProps }}>
-  <header class="py-xlarge medium:py-3xlarge border-bottom border-subtle">
-    <div class="container 2xlarge">
+  <header class="py-xl md:py-3xl border-bottom border-subtle">
+    <div class="container 2xl">
       <div class="row">
-        <div class="col large:col-10 2xlarge:col-8">
+        <div class="col lg:col-10 2xl:col-8">
           <h1 class="mt-0">{title}</h1>
           <p class="font-lead">{description}</p>
           <slot name="header-content" />

package/src/layouts/footer/Footer.astro CHANGED Viewed

@@ -6,12 +6,12 @@
  */
 ---
-<footer class="cxd-footer py-6xlarge">
-  <div class="container 2xlarge fg-subtle">
+<footer class="cxd-footer py-6xl">
+  <div class="container 2xl fg-subtle">
     <div class="row">
-      <div class="medium:col-10 large:col-5 mb-medium">
+      <div class="md:col-10 lg:col-5 mb-md">
         <a
-          class="d-inline-flex align-items-center mb-xsmall text-body-emphasis text-decoration-none"
+          class="d-inline-flex align-items-center mb-xs text-body-emphasis text-decoration-none"
           href="/"
           aria-label="Chassis"
         >
@@ -22,8 +22,8 @@
           and distribution of the software.
         </p>
       </div>
-      <div class="small:col-4 large:col-2 large:offset-1 mb-medium">
-        <p class="h6 mb-xsmall">Docs</p>
+      <div class="sm:col-4 lg:col-2 lg:offset-1 mb-md">
+        <p class="h6 mb-xs">Docs</p>
         <ul class="nav">
           <li><a href="/tokens">Design Tokens</a></li>
           <li><a href="/assets">Asset Distributor</a></li>
@@ -32,8 +32,8 @@
           <li><a href="/icons">Icon Generator</a></li>
         </ul>
       </div>
-      <div class="small:col-4 large:col-2 mb-medium">
-        <p class="h6 mb-xsmall">Github</p>
+      <div class="sm:col-4 lg:col-2 mb-md">
+        <p class="h6 mb-xs">Github</p>
         <ul class="nav">
           <li><a href="https://github.com/chassis-ui/tokens">Chassis Tokens</a></li>
           <li><a href="https://github.com/chassis-ui/assets">Chassis Assets</a></li>
@@ -42,8 +42,8 @@
           <li><a href="https://github.com/chassis-ui/icons">Chassis Icons</a></li>
         </ul>
       </div>
-      <div class="small:col-4 large:col-2 mb-medium">
-        <p class="h6 mb-xsmall">Project</p>
+      <div class="sm:col-4 lg:col-2 mb-md">
+        <p class="h6 mb-xs">Project</p>
         <ul class="nav">
           <li><a href="/about">About</a></li>
           <li><a href="/blog">Blog</a></li>

package/src/layouts/head/Social.astro CHANGED Viewed

@@ -31,7 +31,7 @@ const socialImageSize = isRemoteThumbnail
   : await getStaticImageSize(path.join(getDocsPublicFsPath(), thumbnail))
 ---
-<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:card" content="summary_lg_image" />
 <meta name="twitter:site" content=`@${getConfig().x_username}` />
 <meta name="twitter:creator" content=`@${getConfig().x_username}` />
 <meta name="twitter:title" content={title} />

package/src/layouts/header/Navigation.astro CHANGED Viewed

@@ -32,8 +32,8 @@ const isActive = (path: string) => {
 }
 ---
-<header class="navbar translucent large:navbar-expand cxd-navbar sticky-top">
-  <nav class="container 2xlarge" aria-label="Site navigation">
+<header class="navbar translucent lg:navbar-expand cxd-navbar sticky-top">
+  <nav class="container 2xl" aria-label="Site navigation">
     {
       layout === 'docs' && (
         <div class="cxd-navbar-toggle">
@@ -45,15 +45,15 @@ const isActive = (path: string) => {
             aria-controls="cxdSidebar"
             aria-label="Toggle docs navigation"
           >
-            <Icon name="bars-solid" class="icon-large" />
-            <span class="d-none large:d-inline fs-6 pe-2xsmall">Browse</span>
+            <Icon name="bars-solid" class="icon-lg" />
+            <span class="d-none lg:d-inline fs-6 pe-2xs">Browse</span>
           </button>
         </div>
       )
     }
-    {layout !== 'docs' && <div class="large:d-none" style="width: 4.25rem;" />}
+    {layout !== 'docs' && <div class="lg:d-none" style="width: 4.25rem;" />}
-    <a class="navbar-brand m-0 py-small large:me-medium" href="/" aria-label="Chassis">
+    <a class="navbar-brand m-0 py-sm lg:me-md" href="/" aria-label="Chassis">
       <img src="/static/images/site-logo.svg" alt="Chassis UI" width="123" height="32" />
     </a>
@@ -73,7 +73,7 @@ const isActive = (path: string) => {
     </div>
     <dialog
-      class="max-large:drawer drawer-end flex-grow-1"
+      class="max-lg:drawer drawer-end flex-grow-1"
       id="cxdNavbar"
       aria-labelledby="cxdNavbarOffcanvasLabel"
     >
@@ -87,46 +87,46 @@ const isActive = (path: string) => {
           data-cx-target="#cxdNavbar"></button>
       </div>
-      <hr class="large:d-none m-0" />
-      <div class="drawer-body large:p-0">
-        <ul class="navbar-nav flex-row flex-wrap cxd-navbar-nav mx-0 large:mx-medium">
+      <hr class="lg:d-none m-0" />
+      <div class="drawer-body lg:p-0">
+        <ul class="navbar-nav flex-row flex-wrap cxd-navbar-nav mx-0 lg:mx-md">
           <NavLink active={isActive('/tokens')} href="/tokens">Tokens</NavLink>
           <NavLink active={isActive('/figma')} href="/figma">Figma</NavLink>
           <NavLink active={isActive('/css')} href="/css">CSS</NavLink>
           <NavLink active={isActive('/assets')} href="/assets">Assets</NavLink>
           <NavLink active={isActive('/icons')} href="/icons">Icons</NavLink>
-          <li class="nav-item col-12 large:col-auto large:d-flex">
-            <div class="vr d-none large:d-flex my-auto large:mx-small"></div>
-            <hr class="large:d-none" />
+          <li class="nav-item col-12 lg:col-auto lg:d-flex">
+            <div class="vr d-none lg:d-flex my-auto lg:mx-sm"></div>
+            <hr class="lg:d-none" />
           </li>
           <NavLink active={isActive('/blog')} href="/blog">Blog</NavLink>
           <NavLink active={isActive('/examples')} href="/examples">Examples</NavLink>
         </ul>
-        <hr class="large:d-none m-0" />
+        <hr class="lg:d-none m-0" />
-        <ul class="navbar-nav flex-row flex-wrap large:ms-auto align-items-center">
+        <ul class="navbar-nav flex-row flex-wrap lg:ms-auto align-items-center">
           <NavLink
-            class="px-0 large:px-xsmall"
+            class="px-0 lg:px-xs"
             href={`https://figma.com/@${getConfig().figma_handle}`}
             target="_blank"
             rel="noopener"
           >
             <Icon name="figma-brand" title="Figma" />
-            <small class="large:d-none ms-xsmall">Figma Community</small>
+            <small class="lg:d-none ms-xs">Figma Community</small>
           </NavLink>
           <NavLink
-            class="px-0 large:px-xsmall"
+            class="px-0 lg:px-xs"
             href={`https://github.com/${getConfig().github_org}`}
             target="_blank"
             rel="noopener"
           >
             <Icon name="github-brand" title="GitHub" />
-            <small class="large:d-none ms-xsmall">GitHub</small>
+            <small class="lg:d-none ms-xs">GitHub</small>
           </NavLink>
-          <li class="nav-item col-12 large:col-auto">
-            <div class="vr d-none large:d-flex h-100 large:mx-2xsmall"></div>
-            <hr class="large:d-none" />
+          <li class="nav-item col-12 lg:col-auto">
+            <div class="vr d-none lg:d-flex h-100 lg:mx-2xs"></div>
+            <hr class="lg:d-none" />
           </li>
           <li class="nav-item">

package/src/layouts/header/SearchDialog.astro CHANGED Viewed

@@ -20,7 +20,7 @@ const { id = 'cxdSearchDialog', placeholder = 'Search docs…' } = Astro.props
 ---
 <dialog
-  class="modal dialog large cxd-search-dialog scrollable"
+  class="modal dialog lg cxd-search-dialog scrollable"
   id={id}
   aria-labelledby={`${id}-label`}
 >
@@ -63,14 +63,14 @@ const { id = 'cxdSearchDialog', placeholder = 'Search docs…' } = Astro.props
   <div class="modal-footer cxd-search-footer">
     <ul class="list horizontal cxd-search-shortcuts-list">
       <li class="list-item">
-        <kbd class="cxd-search-shortcut-key font-2xsmall">⮐</kbd>
+        <kbd class="cxd-search-shortcut-key font-2xs">⮐</kbd>
         <span class="cxd-search-shortcut-label">to select</span>
       </li><li class="list-item">
-        <kbd class="cxd-search-shortcut-key font-small">↑</kbd>
-        <kbd class="cxd-search-shortcut-key font-small">↓</kbd>
+        <kbd class="cxd-search-shortcut-key font-sm">↑</kbd>
+        <kbd class="cxd-search-shortcut-key font-sm">↓</kbd>
         <span class="cxd-search-shortcut-label">to navigate</span>
       </li><li class="list-item">
-        <kbd class="cxd-search-shortcut-key font-xsmall">ESC</kbd>
+        <kbd class="cxd-search-shortcut-key font-xs">ESC</kbd>
         <span class="cxd-search-shortcut-label">to close</span>
       </li>
     </ul>

package/src/layouts/header/Skippy.astro CHANGED Viewed

@@ -16,11 +16,11 @@ const { layout } = Astro.props
 ---
 <div class="skippy visually-hidden-focusable overflow-hidden">
-  <div class="container xlarge">
-    <a class="d-inline-flex p-xsmall m-xsmall" href="#content">Skip to main content</a>
+  <div class="container xl">
+    <a class="d-inline-flex p-xs m-xs" href="#content">Skip to main content</a>
     {
       layout === 'docs' && (
-        <a class="d-none d-medium-inline-flex p-xsmall m-xsmall" href="#cxd-docs-nav">
+        <a class="d-none d-md-inline-flex p-xs m-xs" href="#cxd-docs-nav">
           Skip to docs navigation
         </a>
       )

package/src/scss/_content.scss CHANGED Viewed

@@ -36,7 +36,7 @@
     > ol > li {
       &:has(:where(h3, h4):first-child)::marker {
-        @include font-size(var(--cx-font-size-xlarge));
+        @include font-size(var(--cx-font-size-xl));
         font-weight: var(--cx-font-weight-strong);
       }
     }
@@ -92,8 +92,8 @@
     @include font();
   }
-  .border-large-start {
-    @include media-breakpoint-up(large) {
+  .border-lg-start {
+    @include media-breakpoint-up(lg) {
       border-inline-start: var(--cx-border-width) solid var(--cx-border-color);
     }
   }

package/src/scss/_footer.scss CHANGED Viewed

@@ -10,7 +10,7 @@
       display: block;
       > li {
         display: list-item;
-        margin-block-end: var(--cx-space-xsmall);
+        margin-block-end: var(--cx-space-xs);
       }
     }

package/src/scss/_layout.scss CHANGED Viewed

@@ -7,7 +7,7 @@
   }
   .cxd-layout {
-    @include media-breakpoint-up(large) {
+    @include media-breakpoint-up(lg) {
       display: grid;
       grid-template-areas: "sidebar main";
       grid-template-columns: 14rem auto;
@@ -32,11 +32,11 @@
     grid-area: main;
     order: 1;
-    @include media-breakpoint-down(large) {
+    @include media-breakpoint-down(lg) {
       margin-inline: auto;
     }
-    @include media-breakpoint-up(medium) {
+    @include media-breakpoint-up(md) {
       display: grid;
       grid-template-areas:
         "intro"
@@ -46,7 +46,7 @@
       gap: inherit;
     }
-    @include media-breakpoint-up(large) {
+    @include media-breakpoint-up(lg) {
       grid-template-areas:
         "intro   toc"
         "content toc";

package/src/scss/_navbar.scss CHANGED Viewed

@@ -3,7 +3,7 @@
 @layer custom {
   .cxd-navbar {
     padding: 0;
-    border-block-end: var(--cx-border-width-medium) solid var(--cx-border-subtle);
+    border-block-end: var(--cx-border-width-md) solid var(--cx-border-subtle);
     > .container {
       position: relative;
@@ -12,18 +12,18 @@
     .navbar-toggler,
     .nav-link {
       --cx-caret-color: var(--cx-fg-color);
-      @include font-size(var(--cx-font-size-small));
+      @include font-size(var(--cx-font-size-sm));
       font-weight: var(--cx-font-weight-strong);
       text-transform: uppercase;
       .icon {
         --cx-icon-color: var(--cx-fg-color);
       }
-      @include media-breakpoint-up(large) {
-        padding: var(--cx-space-large) var(--cx-space-xsmall);
+      @include media-breakpoint-up(lg) {
+        padding: var(--cx-space-lg) var(--cx-space-xs);
         &.active {
-          padding-block-end: var(--cx-space-medium);
-          border-block-end: var(--cx-border-width-2xlarge) solid var(--cx-primary-cue-main);
+          padding-block-end: var(--cx-space-md);
+          border-block-end: var(--cx-border-width-2xl) solid var(--cx-primary-cue-main);
         }
       }
     }

package/src/scss/_placeholder-img.scss CHANGED Viewed

@@ -13,7 +13,7 @@
     text-anchor: middle;
   }
-  .cxd-placeholder-image-large {
+  .cxd-placeholder-image-lg {
     @include font-size(3.5rem);
   }
 }

package/src/scss/_search.scss CHANGED Viewed

@@ -9,7 +9,7 @@
   .cxd-search {
     position: relative;
-    @include media-breakpoint-up(large) {
+    @include media-breakpoint-up(lg) {
       position: absolute;
       top: 20%;
       right: 11rem;
@@ -31,7 +31,7 @@
   .cxd-search-trigger {
     // @extend %form-input;
-    --cx-padding-x: var(--cx-space-xsmall);
+    --cx-padding-x: var(--cx-space-xs);
     --cx-padding-y: .375rem;
     --cx-icon-color: var(--cx-fg-color);
     display: inline-flex;
@@ -41,22 +41,22 @@
     // padding-inline-end: .5rem;
     // padding: .25rem .5rem;
     @include exclude-strokes(form-input);
-    @include font-size(var(--cx-font-size-small));
+    @include font-size(var(--cx-font-size-sm));
     color: var(--cx-fg-subtle);
     text-align: start;
     cursor: pointer;
     background-color: transparent;
     border: 0;
-    @include border-radius(var(--cx-border-radius-medium));
+    @include border-radius(var(--cx-border-radius-md));
     @include transition(color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out);
     &:focus-visible {
       @include focus-ring(true);
     }
-    @include media-breakpoint-up(large) {
+    @include media-breakpoint-up(lg) {
       --cx-border-color: var(--cx-border-subtle);
-      --cx-icon-size: var(--cx-icon-small);
+      --cx-icon-size: var(--cx-icon-sm);
       --cx-icon-color: var(--cx-fg-subtle);
       width: 100%;
       background-color: var(--cx-bg-main);
@@ -79,7 +79,7 @@
   .cxd-search-trigger-shortcut {
     display: none;
-    @include media-breakpoint-up(large) {
+    @include media-breakpoint-up(lg) {
       display: inline-flex;
     }
   }
@@ -103,12 +103,12 @@
     min-width: 1.25rem;
     padding: .125rem .375rem;
     font-family: var(--cx-font-family-code);
-    @include font-size(var(--cx-font-size-small));
-    @include line-height(var(--cx-line-height-small));
+    @include font-size(var(--cx-font-size-sm));
+    @include line-height(var(--cx-line-height-sm));
     color: var(--cx-fg-subtle);
     background-color: var(--cx-bg-evident);
     // border: var(--cx-border-width) solid var(--cx-border-color);
-    @include border-radius(var(--cx-border-radius-small));
+    @include border-radius(var(--cx-border-radius-sm));
   }
   // Search dialog shell
@@ -121,7 +121,7 @@
     --cx-dialog-padding: .75rem;
     --cx-dialog-header-padding: .75rem;
     --cx-dialog-footer-padding: .5rem .75rem;
-    --cx-dialog-border-radius: var(--cx-border-radius-large);
+    --cx-dialog-border-radius: var(--cx-border-radius-lg);
     align-self: flex-start;
     width: 640px;
@@ -130,7 +130,7 @@
     overflow: hidden;
     background-color: var(--cx-bg-even);
-    @include media-breakpoint-down(small) {
+    @include media-breakpoint-down(sm) {
       max-height: calc(100dvh - 4rem);
     }
   }
@@ -142,7 +142,7 @@
     flex-wrap: nowrap;
     gap: .75rem;
     align-items: center;
-    padding: var(--cx-space-medium);
+    padding: var(--cx-space-md);
     border-bottom: 0;
   }
@@ -161,7 +161,7 @@
   //   --cx-padding-y: .375rem;
   //   --cx-padding-x: .5rem;
   //   width: auto;
-  //   @include font-size(var(--cx-font-size-small));
+  //   @include font-size(var(--cx-font-size-sm));
   // }
   // .cxd-search-input {
   //   flex: 1;
@@ -186,7 +186,7 @@
   // Body / results
   .cxd-search-body {
-    padding: 0 var(--cx-space-medium) var(--cx-space-medium);
+    padding: 0 var(--cx-space-md) var(--cx-space-md);
   }
   .cxd-search-results {
@@ -199,8 +199,8 @@
     // --cx-list-border-width: 0;
     // --cx-list-border-radius: 0;
-    gap: var(--cx-space-small);
-    padding-block-start: var(--cx-space-xsmall);
+    gap: var(--cx-space-sm);
+    padding-block-start: var(--cx-space-xs);
     list-style: none;
     .list-item {
       padding: 0;
@@ -211,7 +211,7 @@
   .cxd-search-result {
     display: flex;
     flex-direction: column;
-    // gap: var(--cx-space-xsmall);
+    // gap: var(--cx-space-xs);
     gap: 0;
     padding: 0;
   }
@@ -227,18 +227,18 @@
   // Single row template: top-level results, sub-results, and recent visits.
   .cxd-search-item {
-    --cx-icon-size: var(--cx-icon-medium);
+    --cx-icon-size: var(--cx-icon-md);
     --cx-icon-color: var(--cx-fg-subtle);
     position: relative;
     display: grid;
     grid-template-columns: auto 1fr;
     column-gap: .5rem;
     align-items: center;
-    padding: var(--cx-space-xsmall);
+    padding: var(--cx-space-xs);
     text-decoration: none;
     background-color: var(--cx-bg-main);
     @include border();
-    @include border-radius(var(--cx-border-radius-medium));
+    @include border-radius(var(--cx-border-radius-md));
     mark {
       background: none;
@@ -284,16 +284,16 @@
     color: var(--cx-fg-subtle);
     text-overflow: ellipsis;
     white-space: nowrap;
-    @include font-size(var(--cx-font-size-small));
-    @include line-height(var(--cx-line-height-small));
+    @include font-size(var(--cx-font-size-sm));
+    @include line-height(var(--cx-line-height-sm));
   }
   .cxd-search-subitem {
-    --cx-icon-size: var(--cx-icon-small);
+    --cx-icon-size: var(--cx-icon-sm);
     --cx-icon-color: var(--cx-fg-subtle);
     align-items: center;
-    padding-inline-start: var(--cx-space-4xlarge);
-    // padding-inline-start: var(--cx-space-medium);
+    padding-inline-start: var(--cx-space-4xl);
+    // padding-inline-start: var(--cx-space-md);
     &::before {
       position: absolute;
@@ -316,8 +316,8 @@
       background-color: var(--cx-fg-subtle);
     }
     .cxd-search-item-title {
-      @include font-size(var(--cx-font-size-small));
-      @include line-height(var(--cx-line-height-small));
+      @include font-size(var(--cx-font-size-sm));
+      @include line-height(var(--cx-line-height-sm));
     }
   }
@@ -325,9 +325,9 @@
   .cxd-search-subresults {
     display: flex;
     flex-direction: column;
-    // gap: var(--cx-space-xsmall);
+    // gap: var(--cx-space-xs);
     gap: 0;
-    // padding-inline-start: var(--cx-space-large);
+    // padding-inline-start: var(--cx-space-lg);
     .cxd-search-subitem {
       border-block-end-width: 0;
       @include border-radius(0);
@@ -353,7 +353,7 @@
   }
   .cxd-search-recent-label {
-    @include font-size(var(--cx-font-size-xsmall));
+    @include font-size(var(--cx-font-size-xs));
     font-weight: 600;
     color: var(--cx-fg-subtle);
     text-transform: uppercase;
@@ -362,12 +362,12 @@
   .cxd-search-recent-clear {
     padding: .125rem .375rem;
-    @include font-size(var(--cx-font-size-xsmall));
+    @include font-size(var(--cx-font-size-xs));
     color: var(--cx-fg-subtle);
     cursor: pointer;
     background-color: transparent;
     border: 0;
-    @include border-radius(var(--cx-border-radius-medium));
+    @include border-radius(var(--cx-border-radius-md));
     @include transition(color .15s ease-in-out, background-color .15s ease-in-out);
     &:hover {
@@ -385,7 +385,7 @@
   .cxd-search-empty,
   .cxd-search-error {
     padding: 2rem 1rem;
-    @include font-size(var(--cx-font-size-small));
+    @include font-size(var(--cx-font-size-sm));
     color: var(--cx-fg-subtle);
     text-align: center;
   }
@@ -397,12 +397,12 @@
   .cxd-search-loading {
     display: flex;
     flex-direction: column;
-    gap: var(--cx-space-small);
+    gap: var(--cx-space-sm);
   }
   .cxd-search-footer {
-    padding-block: var(--cx-space-small);
+    padding-block: var(--cx-space-sm);
     background-color: var(--cx-bg-evident);
   }
@@ -428,7 +428,7 @@
   .cxd-search-shortcut-label {
     padding-inline-start: .25rem;
-    @include font-size(var(--cx-font-size-small));
-    @include line-height(var(--cx-line-height-small));
+    @include font-size(var(--cx-font-size-sm));
+    @include line-height(var(--cx-line-height-sm));
   }
 }

package/src/scss/_sidebar.scss CHANGED Viewed

@@ -9,7 +9,7 @@
     --cx-bg-highlight: var(--cx-default-bg-highlight);
     --cx-fg-highlight: var(--cx-fg-main);
-    @include media-breakpoint-up(large) {
+    @include media-breakpoint-up(lg) {
       position: sticky;
       top: 4rem;
       display: block;
@@ -22,10 +22,10 @@
       border-inline-end: var(--cx-border-width) solid var(--cx-border-subtle);
     }
-    @include media-breakpoint-down(large) {
-      .#{large-down\:}drawer {
+    @include media-breakpoint-down(lg) {
+      .#{lg-down\:}drawer {
         border-right-color: var(--cx-border-color);
-        box-shadow: var(--cx-box-shadow-large);
+        box-shadow: var(--cx-box-shadow-lg);
       }
     }
   }
@@ -51,7 +51,7 @@
       list-style: none;
     }
-    @include media-breakpoint-up(large) {
+    @include media-breakpoint-up(lg) {
       li:has(.active) {
         // --cx-cue-main: var(--cx-secondary-contrast-color);
       }
@@ -101,17 +101,17 @@
   .cxd-links-heading {
     --cx-icon-color: var(--cx-fg-main);
-    --cx-icon-size: var(--cx-icon-xsmall);
+    --cx-icon-size: var(--cx-icon-xs);
     display: flex;
-    gap: var(--cx-space-xsmall);
+    gap: var(--cx-space-xs);
     align-items: center;
     color: var(--cx-fg-main);
   }
   .cxd-links-subgroup {
-    @include font-size(var(--cx-font-size-xsmall));
-    @include line-height(var(--cx-line-height-small));
-    --cx-icon-size: var(--cx-icon-xsmall);
+    @include font-size(var(--cx-font-size-xs));
+    @include line-height(var(--cx-line-height-sm));
+    --cx-icon-size: var(--cx-icon-xs);
     padding-inline-start: 1.5rem;
     margin-block: 1em .25em;
     font-weight: var(--cx-font-weight-strong);
@@ -121,11 +121,11 @@
   .cxd-links-nav {
-    @include media-breakpoint-down(large) {
+    @include media-breakpoint-down(lg) {
       @include font-size(.875rem);
     }
-    @include media-breakpoint-between(xsmall, large) {
+    @include media-breakpoint-between(xs, lg) {
       column-count: 2;
       column-gap: 1.5rem;
@@ -147,8 +147,8 @@
     margin-inline-start: 0;
     color: var(--cx-fg-color);
     text-decoration: if(sass($link-decoration == none): null; else: none);
-    @include font-size(var(--cx-font-size-small));
-    @include border-radius(var(--cx-border-radius-medium));
+    @include font-size(var(--cx-font-size-sm));
+    @include border-radius(var(--cx-border-radius-md));
     &:hover,
     &:focus {

package/src/scss/_snippets.scss CHANGED Viewed

@@ -13,10 +13,10 @@
     border: solid var(--cx-border-subtle);
     border-width: 1px 0;
-    @include media-breakpoint-up(medium) {
+    @include media-breakpoint-up(md) {
       margin-inline: 0;
       border-width: 1px;
-      @include border-radius(var(--cx-border-radius-medium));
+      @include border-radius(var(--cx-border-radius-md));
     }
   }
@@ -31,11 +31,11 @@
     border-width: 1px 0;
     // @include clearfix();
-    @include media-breakpoint-up(medium) {
+    @include media-breakpoint-up(md) {
       --cxd-example-padding: 1.5rem;
       margin-inline: 0;
       border-width: 1px;
-      @include border-radius(var(--cx-border-radius-medium));
+      @include border-radius(var(--cx-border-radius-md));
       &:has(~ .cxd-snippet-toolbar) {
         @include border-bottom-radius(0);
       }
@@ -69,8 +69,8 @@
     position: relative;
     background-color: var(--cxd-pre-bg, var(--cx-bg-even));
-    @include media-breakpoint-up(medium) {
-      @include border-radius(calc(var(--cx-border-radius-medium) - 1px));
+    @include media-breakpoint-up(md) {
+      @include border-radius(calc(var(--cx-border-radius-md) - 1px));
     }
     .cxd-clipboard ~ & {
@@ -81,8 +81,8 @@
       padding: var(--cxd-code-padding);
       margin-block-end: 0;
       overflow: overlay;
-      @include font-size(var(--cx-font-size-code-small));
-      line-height: var(--cx-line-height-code-small);
+      @include font-size(var(--cx-font-size-code-sm));
+      line-height: var(--cx-line-height-code-sm);
       white-space: pre;
       background-color: transparent;
       border: 0;
@@ -100,10 +100,10 @@
   .cxd-snippet-toolbar {
     display: flex;
-    gap: var(--cx-space-xsmall);
+    gap: var(--cx-space-xs);
     align-items: center;
-    padding-block: var(--cx-space-2xsmall);
-    padding-inline: var(--cx-space-small) var(--cx-space-xsmall);
+    padding-block: var(--cx-space-2xs);
+    padding-inline: var(--cx-space-sm) var(--cx-space-xs);
     background-color: var(--cxd-pre-bg, var(--cx-bg-even));
     border-block-end: var(--cx-border-width) var(--cx-border-style) var(--cx-border-subtle);
     .cxd-example ~ & {
@@ -115,15 +115,15 @@
     }
     > a {
-      @include font-size(var(--cx-font-size-small));
+      @include font-size(var(--cx-font-size-sm));
     }
   }
   .cxd-file-ref {
     .cxd-snippet-toolbar {
       border-block-start: 0;
-      @include media-breakpoint-up(medium) {
-        @include border-top-radius(calc(var(--cx-border-radius-medium) - 1px));
+      @include media-breakpoint-up(md) {
+        @include border-top-radius(calc(var(--cx-border-radius-md) - 1px));
       }
     }
   }
@@ -155,7 +155,7 @@
   .button-clipboard,
   .button-edit {
     --cx-icon-color: var(--cx-fg-subtle);
-    --cx-icon-size: var(--cx-icon-small);
+    --cx-icon-size: var(--cx-icon-sm);
     display: block;
     padding: .25em;
     line-height: 1;

package/src/scss/_toc.scss CHANGED Viewed

@@ -4,7 +4,7 @@
 @layer custom {
   .cxd-toc {
-    @include media-breakpoint-up(large) {
+    @include media-breakpoint-up(lg) {
       position: sticky;
       top: 4rem;
       right: 0;
@@ -20,12 +20,12 @@
       // border-style: solid;
       border-inline-start: var(--cx-border-width) var(--cx-border-style) var(--cx-border-subtle);
     }
-    @include media-breakpoint-between(medium, large) {
+    @include media-breakpoint-between(md, lg) {
       padding: .5rem 1rem;
       margin-block-end: 1rem;
       background-color: var(--cx-bg-even);
       border: var(--cx-border-width) var(--cx-border-style) var(--cx-border-subtle);
-      @include border-radius(var(--cx-border-radius-medium));
+      @include border-radius(var(--cx-border-radius-md));
     }
     nav {
@@ -78,15 +78,15 @@
     display: flex;
     align-items: center;
-    @include media-breakpoint-down(small) {
+    @include media-breakpoint-down(sm) {
       justify-content: space-between;
       width: 100%;
     }
-    @include media-breakpoint-down(medium) {
+    @include media-breakpoint-down(md) {
       color: var(--cx-fg-color);
       border: var(--cx-border-width) var(--cx-border-style) var(--cx-border-color);
-      @include border-radius(var(--cx-border-radius-medium));
+      @include border-radius(var(--cx-border-radius-md));
       &:hover,
       &:focus,
@@ -105,16 +105,16 @@
   }
   .cxd-toc-collapse {
-    @include media-breakpoint-down(medium) {
+    @include media-breakpoint-down(md) {
       nav {
         padding: 1.25rem 1.25rem 1.25rem 1rem;
         background-color: var(--cx-bg-even);
         border: var(--cx-border-width) solid var(--cx-border-subtle);
-        @include border-radius(var(--cx-border-radius-medium));
+        @include border-radius(var(--cx-border-radius-md));
       }
     }
-    @include media-breakpoint-up(medium) {
+    @include media-breakpoint-up(md) {
       display: block;
     }
   }

package/src/scss/_vars.scss CHANGED Viewed

@@ -82,7 +82,7 @@ $cxd-callout-variants: info, warning, danger, default !default;
   //
   // .cxd-playground textarea {
   //   font-family: var(--cx-font-family-code) !important;
-  //   //font-size: var(--cx-font-small) !important;
+  //   //font-size: var(--cx-font-sm) !important;
   //   background-color: var(--cx-default-bg-even) !important;
   //   border-color: var(--cx-default-border-subtle);
   // }

package/src/scss/main.scss CHANGED Viewed

@@ -34,7 +34,7 @@
   .docs-body .navbar,
   .docs-body .cxd-footer {
-    .container.#{\32 xlarge} {
+    .container.#{\32 xl} {
       max-width: 100%;
     }
   }
@@ -52,14 +52,14 @@
   .section-content:has(.gallery-image) > div {
     height: var(--gallery-image-height, 256px);
-    border: var(--cx-border-width-medium) solid var(--cx-bg-evident);
+    border: var(--cx-border-width-md) solid var(--cx-bg-evident);
   }
   .gallery-image {
     display: flex;
     align-items: center;
-    @include media-breakpoint-down(medium) {
+    @include media-breakpoint-down(md) {
       margin-block-start: -25%;
     }
@@ -78,7 +78,7 @@
     border: 0;
     .cxd-code {
-      padding: var(--cx-space-medium);
+      padding: var(--cx-space-md);
       background-color: var(--cx-bg-even);
     }
     pre {