Update Typography; Add Components

components/core/typography/typography.constants.ts

@@ -2,7 +2,10 @@ import { DefaultTagMap } from './typography.types'
 
 export const defaultTag: DefaultTagMap = {
   Banner: 'h2',
-  Accent: 'h3',
+  Accent1: 'h2',
+  Accent2: 'h3',
+  Accent3: 'h3',
+  Accent4: 'p',
   H1: 'h1',
   H2: 'h2',
   H3: 'h3',

components/core/typography/typography.tsx

@@ -18,7 +18,9 @@ const sharedBodyStyles = css`
 `
 
 const isHeaderFontFamily = (style: TypographyProps['variant']): boolean =>
-  ['Banner', 'Accent', 'H1', 'H3'].includes(style)
+  ['Banner', 'Accent1', 'Accent2', 'Accent3', 'Accent4', 'H1', 'H3'].includes(
+    style,
+  )
 
 const StyledText = styled.p<{
   $align: TypographyProps['align']
@@ -47,7 +49,20 @@ const StyledText = styled.p<{
             font-size: 12.5rem;
           }
         `
-      case 'Accent': // Still very large text
+      case 'Accent1': // Very very large text
+        return css`
+          font-size: 3.75rem;
+          line-height: ${70 / 60};
+          letter-spacing: -0.023em;
+          text-transform: uppercase;
+          text-wrap: balance;
+
+          @media (min-width: ${THIN_BREAKPOINT}rem) {
+            font-size: 4.6875rem;
+            line-height: ${80 / 75};
+          }
+        `
+      case 'Accent2': // Very large text
         return css`
           font-size: 2.1875rem;
           line-height: ${40 / 35};
@@ -60,6 +75,32 @@ const StyledText = styled.p<{
             line-height: ${55 / 45};
           }
         `
+      case 'Accent3': // Large text
+        return css`
+          font-size: 1.5rem;
+          line-height: ${30 / 24};
+          letter-spacing: -0.023em;
+          text-transform: uppercase;
+          text-wrap: balance;
+
+          @media (min-width: ${THIN_BREAKPOINT}rem) {
+            font-size: 1.875rem;
+            line-height: ${35 / 30};
+          }
+        `
+      case 'Accent4':
+        return css`
+          font-size: 1rem;
+          line-height: ${18 / 16};
+          letter-spacing: -0.023em;
+          text-transform: uppercase;
+          text-wrap: balance;
+
+          @media (min-width: ${THIN_BREAKPOINT}rem) {
+            font-size: 1.25rem;
+            line-height: ${24 / 20};
+          }
+        `
       case 'H1': // Not visible
         return css`
           font-size: 2rem;

components/core/typography/typography.types.ts

@@ -18,7 +18,10 @@ export type TypographyTag = (typeof typographyTags)[number]
 
 export const typographyVariants = [
   'Banner',
-  'Accent',
+  'Accent1',
+  'Accent2',
+  'Accent3',
+  'Accent4',
   'H1',
   'H2',
   'H3',

components/interactive/buttons/button-link-xl/button-link-xl.stories.tsx

@@ -0,0 +1,101 @@
+/* eslint-disable import/no-default-export */
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { fn } from '@storybook/test'
+import { MouseEvent } from 'react'
+import {
+  ButtonState,
+  buttonStates,
+  StatesGrid,
+} from '@/components/helpers/states-grid'
+import { ButtonLinkXl as ButtonLinkXlUi } from './button-link-xl'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta = {
+  title: 'Interactive / Buttons / Button Link XL',
+  component: ButtonLinkXlUi,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    children: {
+      control: {
+        type: 'text',
+      },
+      description: 'The button content',
+      table: {
+        defaultValue: {
+          summary: '[required]',
+        },
+        type: {
+          summary: 'ReactNode',
+        },
+      },
+    },
+    href: {
+      control: {
+        type: 'text',
+      },
+      description: 'The destination href',
+      table: {
+        defaultValue: {
+          summary: '[required]',
+        },
+        type: {
+          summary: 'string Url',
+        },
+      },
+    },
+    inverse: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Whether the theme colors should be inverted',
+      table: {
+        defaultValue: {
+          summary: 'false',
+        },
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+  },
+  args: {
+    onClick: (event: MouseEvent<HTMLAnchorElement>) => {
+      event.stopPropagation()
+      event.preventDefault()
+      fn()
+    },
+  },
+} satisfies Meta<typeof ButtonLinkXlUi>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const States: Story = {
+  args: {
+    children: 'Button',
+    href: 'https://plasticlabs.ai',
+    inverse: false,
+  },
+  decorators: [
+    (_, { args }) => {
+      const story: React.FC<{ column: string; row: string }> = ({ row }) => {
+        return <ButtonLinkXlUi {...args} data-state={row as ButtonState} />
+      }
+
+      return (
+        <StatesGrid columns={['States']} rows={buttonStates} Story={story} />
+      )
+    },
+  ],
+}
+
+export const ButtonLinkXl: Story = {
+  args: {
+    children: 'Button',
+    href: 'https://plasticlabs.ai',
+    inverse: false,
+  },
+}

components/interactive/buttons/button-link-xl/button-link-xl.tsx

@@ -0,0 +1,172 @@
+'use client'
+
+import styled, { css } from 'styled-components'
+import { inverseThemePaletteVar } from '@/styles/themes'
+import { isInternalUrl } from '@/utils/url'
+import { ButtonChildren } from '../shared/button-children'
+import type { ButtonLinkXlProps } from './button-link-xl.types'
+import type { SharedThemeStylesProps } from '../shared/theme.types'
+
+const StyledAnchor = styled.a<SharedThemeStylesProps>`
+  // vars
+  --surface: var(--interactive-primary-button-surface);
+  --surface-contrast: var(--interactive-primary-button-surface-contrast);
+  --accent: var(--interactive-primary-button-accent);
+
+  // base styles
+  justify-self: stretch;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0 3rem;
+  height: 6.5rem;
+  min-height: 6.5rem;
+  overflow: hidden;
+
+  font-family: var(--font-family-roboto-mono);
+  font-size: 1rem;
+  font-weight: 300;
+  line-height: 1;
+  letter-spacing: -0.01em;
+  text-transform: uppercase;
+  text-decoration: none;
+  white-space: nowrap;
+
+  border-width: 0;
+  border-radius: 0.25rem;
+
+  transition: color var(--ui-transition-speed) ease;
+
+  box-sizing: border-box;
+  appearance: none;
+  user-select: none;
+
+  * {
+    z-index: 2;
+  }
+
+  // over background
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: var(--surface);
+    opacity: 0;
+    z-index: 0;
+    transition: opacity var(--ui-transition-speed) ease;
+  }
+
+  // border
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-width: 0.0625rem;
+    border-style: dotted;
+    border-color: var(--surface);
+    border-radius: inherit;
+    z-index: 1;
+    transition: border-color var(--ui-transition-speed) ease;
+  }
+
+  // states
+  &,
+  &:visited {
+    color: var(--surface);
+    background: var(--surface-contrast);
+  }
+
+  &:hover:not(:active):not([href='']):not([href='#']):not([data-state]),
+  &[data-state='hover'] {
+    color: var(--surface-contrast);
+
+    &::before {
+      opacity: 1;
+    }
+
+    &::after {
+      border-color: var(--surface-contrast);
+    }
+  }
+
+  &:active:not([href='']):not([href='#']):not([data-state]),
+  &:hover:active:not([href='']):not([href='#']):not([data-state]),
+  &[data-state='pressed'] {
+    color: var(--color-black);
+    background: var(--accent);
+
+    &::after {
+      border-color: var(--color-black);
+    }
+  }
+
+  &[href='']:not([data-state]),
+  &[href='#']:not([data-state]),
+  &[data-state='disabled'] {
+    color: hsl(from var(--color-black) h s l / 0.6);
+    background: var(--neutral-grey);
+    pointer-events: none;
+
+    &::after {
+      border-color: hsl(from var(--color-black) h s l / 0.3);
+    }
+  }
+
+  ${({ $inverse, theme }) =>
+    $inverse
+      ? css`
+          --surface: var(
+            ${inverseThemePaletteVar(
+              theme,
+              '--interactive-primary-button-surface',
+            )}
+          );
+          --surface-contrast: var(
+            ${inverseThemePaletteVar(
+              theme,
+              '--interactive-primary-button-surface-contrast',
+            )}
+          );
+          --accent: var(
+            ${inverseThemePaletteVar(
+              theme,
+              '--interactive-primary-button-accent',
+            )}
+          );
+        `
+      : ''}
+`
+
+/**
+ * This component is for outbound links which appear as gigantic buttons.
+ */
+export const ButtonLinkXl: React.FC<ButtonLinkXlProps> = ({
+  children,
+  href,
+  inverse,
+  ...props
+}) => {
+  if (!children || isInternalUrl(href)) {
+    return null
+  }
+
+  return (
+    <StyledAnchor
+      {...props}
+      href={href}
+      rel="noopener"
+      target="_blank"
+      $inverse={inverse}
+    >
+      <ButtonChildren>{children}</ButtonChildren>
+    </StyledAnchor>
+  )
+}

components/interactive/buttons/button-link-xl/button-link-xl.types.ts

@@ -0,0 +1,9 @@
+import { AnchorHTMLAttributes, ReactNode } from 'react'
+import { SharedThemeProps } from '../shared/theme.types'
+
+export interface ButtonLinkXlProps
+  extends AnchorHTMLAttributes<HTMLAnchorElement>,
+    SharedThemeProps {
+  href: string
+  children: ReactNode
+}

components/interactive/cards/pricing-card/index.ts

@@ -0,0 +1 @@
+export { PricingCard } from './pricing-card'