docs: new homepage

.changeset/twenty-islands-run.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+Update dependencies

.nvmrc

@@ -1 +1 @@
-v23.2.0
+v23.8.0

docs/_includes/layouts/pages/tokens.11ty.ts

@@ -1,4 +1,4 @@
-import type { DesignToken } from '#11ty-plugins/tokensHelpers.js';
+import type { Color, DesignToken } from '@rhds/tokens';
 
 import tinycolor from 'tinycolor2';
 import { tokens as tokensMeta } from '@rhds/tokens/meta.js';
@@ -140,12 +140,12 @@ export default class TokensPage extends Renderer<Data> {
                   || token.name === '_') {
                 return '';
               }
-              const { r, g, b } = token.attributes?.rgb ?? {};
-              const { h, s, l } = token.attributes?.hsl ?? {};
+              const { r, g, b } = (token.attributes?.rgb ?? {}) as Color['rgb'];
+              const { h, s, l } = (token.attributes?.hsl ?? {}) as Color['hsl'];
               const isColor = !!token.path.includes('color');
-              const isCrayon = isColor && token.name.match(/0$/);
+              const isCrayon = isColor && token.name?.match(/0$/);
               const isDimension = token.$type === 'dimension';
-              const isHSLorRGB = isColor && !!token.name.match(/(hsl|rgb)$/);
+              const isHSLorRGB = isColor && !!token.name?.match(/(hsl|rgb)$/);
               const isFamily = !!token.path.includes('family');
               const isFont = !!token.path.includes('font');
               const isRadius = !!token.path.includes('radius');
@@ -165,7 +165,7 @@ export default class TokensPage extends Renderer<Data> {
                 light: isLight,
                 dark: !isLight,
                 color: isColor,
-                crayon: isCrayon,
+                crayon: !!isCrayon,
                 dimension: isDimension,
                 family: isFamily,
                 font: isFont,
@@ -201,13 +201,13 @@ export default class TokensPage extends Renderer<Data> {
                 '--samp-font-weight':
                   isWeight ? token.$value : 'var(--rh-font-weight-body-text-regular)',
                 [`--samp-${token.$type === 'dimension' ? `${name}-size` : name}`]: token.$value,
-                [`${token.$type === 'dimension' && token.attributes.category === 'space' ? `--samp-${name}-color` : ``}`]: isSpace ? token.original['$extensions']['com.redhat.ux'].color : '',
+                [`${token.$type === 'dimension' && token.attributes?.category === 'space' ? `--samp-${name}-color` : ``}`]: isSpace ? token.original['$extensions']['com.redhat.ux'].color : '',
               })}">
               <td data-label="Example">
                 <samp class="${classes}">
                   ${isSpace ? `<span class="${parseInt(token.$value) < 16 ? `offset` : ''}">${parseInt(token.$value)}</span>` : ``}
                   ${isColor && token.path.includes('text') ? 'Aa'
-                  : isFont ? (example || token.attributes?.aliases?.[0] || 'Aa')
+                  : isFont ? (example || (token.attributes?.aliases as string[])?.[0] || 'Aa')
                   : name === 'breakpoint' ? `
                   <img src="/assets/breakpoints/device-${token.name}.svg" role="presentation">`
                   : example}
@@ -221,7 +221,7 @@ export default class TokensPage extends Renderer<Data> {
                   : isColor ? `<code style="--color: ${token.$value}">${token.$value}</code> `
                   : isWeight ? `
                   <code class="numerical">${token.$value}</code>
-                  <code class="common">${token.attributes?.aliases?.[0] ?? ''}</code>`
+                  <code class="common">${(token.attributes?.aliases as string[])?.[0] ?? ''}</code>`
                   : `<code>${token.$value}</code>`
                   )}
               </td>

docs/_plugins/tokensHelpers.ts

@@ -1,4 +1,5 @@
 import type { CssCustomProperty } from 'custom-elements-manifest';
+import type { DesignToken } from '@rhds/tokens';
 import { tokens as tokensMeta } from '@rhds/tokens/meta.js';
 import { createRequire } from 'node:module';
 
@@ -7,10 +8,6 @@ const tokensJSON = require('@rhds/tokens/json/rhds.tokens.json');
 
 export const capitalize = (x: string): string => `${x.at(0)?.toUpperCase() ?? ''}${x.slice(1)}`;
 
-type MapValue<T> = T extends Map<infer _, infer V> ? V : never;
-
-export type DesignToken = MapValue<typeof tokensMeta>;
-
 /* eslint-disable jsdoc/require-param */
 
 /**
@@ -32,10 +29,17 @@ export function getParentCollection(options: {
   return { parent, key };
 }
 
+function isDesignToken(token: DesignToken | CssCustomProperty): token is DesignToken {
+  return '$value' in token;
+}
+
 /** generate `var(--rh-xxx, xxx)` string, given a token or css property */
 export function getVariableSyntax(token: DesignToken | CssCustomProperty) {
-  const name = formatTokenVariableName(token.name);
-  return `var(${name}, ${escapeDoubleQuotes(token.$value ?? token.default)})`;
+  if (token.name) {
+    const name = formatTokenVariableName(token.name);
+    const value = isDesignToken(token) ? token.$value : token.default;
+    return `var(${name}, ${escapeDoubleQuotes(value)})`;
+  }
 }
 
 /** generate string of copy cell for 11ty templates */
@@ -58,11 +62,14 @@ export function copyCell(token: DesignToken) {
   `.trim();
 }
 
-function formatTokenVariableName(token: DesignToken) {
+function formatTokenVariableName(token: string) {
   return `--${token}`.replace('----', '--') as `--rh-${string}`;
 }
 
 function getTokenCategorySlug(token: DesignToken) {
+  if (!token.name) {
+    throw new Error(`Unknown token`);
+  }
   const name = formatTokenVariableName(token.name);
   const data = tokensMeta.get(name);
   if (!data) {

docs/about/index.md

@@ -25,7 +25,6 @@ tags:
 </style>
 
 <script data-helmet type="module">
-  import '@uxdot/elements/uxdot-hero.js'
   import '@rhds/elements/rh-icon/rh-icon.js';
   import '@rhds/elements/rh-card/rh-card.js';
 </script>