@citizenplane/pimp 16.0.3 → 16.2.0

package/src/stories/CpTransitionTabContent.stories.ts

@@ -1,6 +1,6 @@
 import { ref } from 'vue'
 
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import CpTabs from '@/components/CpTabs.vue'
 import CpTransitionTabContent from '@/components/CpTransitionTabContent.vue'
@@ -36,6 +36,10 @@ const layoutStyle = 'display: flex; flex-direction: column; gap: 20px; min-width
 const panelStyle =
   'min-height: 120px; padding: 20px; border-radius: 12px; background: #f3f4f6; font-size: 15px; line-height: 1.5;'
 
+/**
+ * Directional slide between tab panels. `direction` is driven by the
+ * current vs. previous tab index to slide forward or backward.
+ */
 export const Default: Story = {
   args: {
     duration: 300,

package/src/stories/Dimensions.mdx

@@ -0,0 +1,9 @@
+import { Meta, Title, Description, Stories } from '@storybook/addon-docs/blocks'
+
+import * as DimensionsStories from './Dimensions.stories'
+
+<Meta of={DimensionsStories} />
+
+<Title />
+<Description />
+<Stories />

package/src/stories/Dimensions.stories.ts

@@ -0,0 +1,119 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import type { Token } from '@/stories/tokenUtils'
+import {
+  copyableClass,
+  copyableCopiedClass,
+  readTokens,
+  sortTokensBySize,
+  splitRemPx,
+  tokenTableClass,
+  useCopier,
+} from '@/stories/tokenUtils'
+
+const meta: Meta = {
+  title: 'Foundations/Dimensions',
+  tags: ['!dev'],
+  parameters: {
+    layout: 'padded',
+    controls: { disable: true },
+    docs: { source: { code: null } },
+  },
+}
+
+export default meta
+
+type Story = StoryObj
+
+type DimensionKind = 'bar' | 'none' | 'radius' | 'square'
+
+const previewStyle = (kind: DimensionKind, tokenName: string): string => {
+  const ref = `var(${tokenName})`
+  switch (kind) {
+    case 'bar':
+      return `height: 12px; width: ${ref}; max-width: 100%; background: var(--cp-background-accent-solid, #603dfd); border-radius: 4px;`
+    case 'radius':
+      return `width: 56px; height: 56px; background: var(--cp-background-accent-primary, #eaecff); border: 1px solid var(--cp-border-accent-primary, #ccd0ff); border-radius: ${ref};`
+    case 'square':
+      return `width: ${ref}; height: ${ref}; background: var(--cp-background-accent-solid, #603dfd); border-radius: 2px;`
+    case 'none':
+      return ''
+  }
+}
+
+type SectionArgs = { kind: DimensionKind; prefix: string }
+
+const makeSectionStory = (section: SectionArgs): Story => ({
+  render: () => ({
+    setup() {
+      const tokens = sortTokensBySize(readTokens([section.prefix]))
+      const { copiedKey, copy } = useCopier()
+      return {
+        kind: section.kind,
+        tokens,
+        copiedKey,
+        copy,
+        tableClass: tokenTableClass,
+        copyClass: copyableClass,
+        copiedClass: copyableCopiedClass,
+        preview: (kind: DimensionKind, tokenName: string) => previewStyle(kind, tokenName),
+        split: (token: Token) => splitRemPx(token),
+      }
+    },
+    template: `
+      <table v-if="tokens.length > 0" :class="tableClass">
+        <thead>
+          <tr>
+            <th scope="col">Token</th>
+            <th scope="col">rem</th>
+            <th scope="col">px</th>
+            <th scope="col">Preview</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="token in tokens" :key="token.name">
+            <td>
+              <span
+                :class="[copyClass, copiedKey === token.name ? copiedClass : '']"
+                role="button"
+                tabindex="0"
+                :title="'Click to copy ' + token.name"
+                @click="copy(token.name)"
+                @keydown.enter.prevent="copy(token.name)"
+                @keydown.space.prevent="copy(token.name)"
+              >{{ copiedKey === token.name ? 'Copied!' : token.name }}</span>
+            </td>
+            <td>{{ split(token).rem }}</td>
+            <td>{{ split(token).px }}</td>
+            <td class="cp-token-table__preview">
+              <div :style="preview(kind, token.name)"></div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div v-else style="padding: 12px 0; color: #9ca3af; font-size: 12px;">No tokens</div>
+    `,
+  }),
+})
+
+/**
+ * Responsive breakpoints. These values match the `min-width` media queries
+ * the design system uses to adapt layouts.
+ */
+export const Breakpoint: Story = makeSectionStory({ prefix: '--cp-breakpoint-', kind: 'none' })
+
+/**
+ * Border radius scale, from sharp corners to fully rounded pill shapes.
+ */
+export const Radius: Story = makeSectionStory({ prefix: '--cp-radius-', kind: 'radius' })
+
+/**
+ * Spacing scale used for padding, margin and gap. Rendered as horizontal
+ * bars to compare relative widths.
+ */
+export const Spacing: Story = makeSectionStory({ prefix: '--cp-spacing-', kind: 'bar' })
+
+/**
+ * Width tokens used for icons, avatars and small fixed-size surfaces.
+ */
+export const Width: Story = makeSectionStory({ prefix: '--cp-width-', kind: 'square' })

package/src/stories/Easings.mdx

@@ -0,0 +1,9 @@
+import { Meta, Title, Description, Stories } from '@storybook/addon-docs/blocks'
+
+import * as EasingsStories from './Easings.stories'
+
+<Meta of={EasingsStories} />
+
+<Title />
+<Description />
+<Stories />

package/src/stories/Easings.stories.ts

@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import { copyableClass, copyableCopiedClass, readTokens, tokenTableClass, useCopier } from '@/stories/tokenUtils'
+
+const meta: Meta = {
+  title: 'Foundations/Easings',
+  tags: ['!dev'],
+  parameters: {
+    layout: 'padded',
+    controls: { disable: true },
+    docs: { source: { code: null } },
+  },
+}
+
+export default meta
+
+type Story = StoryObj
+
+/**
+ * Cubic-bezier curves used for the design-system transitions. Hover (or
+ * focus) any track to play the animation and compare curves side by side.
+ */
+export const Curves: Story = {
+  render: () => ({
+    setup() {
+      const easings = readTokens(['--cp-easing-'])
+      const { copiedKey, copy } = useCopier()
+      return {
+        easings,
+        copiedKey,
+        copy,
+        tableClass: tokenTableClass,
+        copyClass: copyableClass,
+        copiedClass: copyableCopiedClass,
+        ballStyle: (tokenName: string) => `transition-timing-function: var(${tokenName});`,
+      }
+    },
+    template: `
+      <div>
+        <style>
+          .cp-easing-track {
+            position: relative;
+            width: 220px;
+            height: 36px;
+            background: #f3f4f6;
+            border-radius: 18px;
+            overflow: hidden;
+          }
+          .cp-easing-ball {
+            position: absolute;
+            top: 4px;
+            left: 4px;
+            width: 28px;
+            height: 28px;
+            border-radius: 50%;
+            background: var(--cp-background-accent-solid, #603dfd);
+            transition-property: transform;
+            transition-duration: 900ms;
+            transform: translateX(0);
+          }
+          .cp-easing-track:hover .cp-easing-ball,
+          .cp-easing-track:focus-within .cp-easing-ball {
+            transform: translateX(184px);
+          }
+        </style>
+        <p style="margin: 0 0 12px 0; color: #6b7280; font-size: 12px;">Hover a track to play the transition.</p>
+        <table v-if="easings.length > 0" :class="tableClass">
+          <thead>
+            <tr>
+              <th scope="col">Token</th>
+              <th scope="col">Value</th>
+              <th scope="col">Preview</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="token in easings" :key="token.name">
+              <td>
+                <span
+                  :class="[copyClass, copiedKey === token.name ? copiedClass : '']"
+                  role="button"
+                  tabindex="0"
+                  :title="'Click to copy ' + token.name"
+                  @click="copy(token.name)"
+                  @keydown.enter.prevent="copy(token.name)"
+                  @keydown.space.prevent="copy(token.name)"
+                >{{ copiedKey === token.name ? 'Copied!' : token.name }}</span>
+              </td>
+              <td>{{ token.value }}</td>
+              <td class="cp-token-table__preview">
+                <div class="cp-easing-track" tabindex="0">
+                  <div class="cp-easing-ball" :style="ballStyle(token.name)"></div>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div v-else style="padding: 12px 0; color: #9ca3af; font-size: 12px;">No tokens</div>
+      </div>
+    `,
+  }),
+}

package/src/stories/FocusRings.mdx

@@ -0,0 +1,9 @@
+import { Meta, Title, Description, Stories } from '@storybook/addon-docs/blocks'
+
+import * as FocusRingsStories from './FocusRings.stories'
+
+<Meta of={FocusRingsStories} />
+
+<Title />
+<Description />
+<Stories />

package/src/stories/FocusRings.stories.ts

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import { copyableClass, copyableCopiedClass, readTokens, tokenTableClass, useCopier } from '@/stories/tokenUtils'
+
+const meta: Meta = {
+  title: 'Foundations/Focus Rings',
+  tags: ['!dev'],
+  parameters: {
+    layout: 'padded',
+    controls: { disable: true },
+    docs: { source: { code: null } },
+  },
+}
+
+export default meta
+
+type Story = StoryObj
+
+const previewStyle = (tokenName: string): string =>
+  `display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border-radius: 8px; background: #ffffff; border: 1px solid #e9eaf6; color: #36384d; font-size: 14px; box-shadow: var(${tokenName});`
+
+/**
+ * Composite focus-ring tokens (one token per color role). Each token is a
+ * multi-layered `box-shadow` that produces a consistent, accessible focus
+ * outline when applied to an element.
+ */
+export const Composite: Story = {
+  render: () => ({
+    setup() {
+      const composites = readTokens([/^--cp-shadow-focus-ring-[^-]+$/])
+      const { copiedKey, copy } = useCopier()
+      return {
+        composites,
+        copiedKey,
+        copy,
+        tableClass: tokenTableClass,
+        copyClass: copyableClass,
+        copiedClass: copyableCopiedClass,
+        preview: (tokenName: string) => previewStyle(tokenName),
+      }
+    },
+    template: `
+      <table v-if="composites.length > 0" :class="tableClass">
+        <thead>
+          <tr>
+            <th scope="col">Token</th>
+            <th scope="col">Value</th>
+            <th scope="col">Preview</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="token in composites" :key="token.name">
+            <td>
+              <span
+                :class="[copyClass, copiedKey === token.name ? copiedClass : '']"
+                role="button"
+                tabindex="0"
+                :title="'Click to copy ' + token.name"
+                @click="copy(token.name)"
+                @keydown.enter.prevent="copy(token.name)"
+                @keydown.space.prevent="copy(token.name)"
+              >{{ copiedKey === token.name ? 'Copied!' : token.name }}</span>
+            </td>
+            <td>{{ token.value }}</td>
+            <td class="cp-token-table__preview">
+              <span :style="preview(token.name)">Focused</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div v-else style="padding: 12px 0; color: #9ca3af; font-size: 12px;">No tokens</div>
+    `,
+  }),
+}

package/src/stories/Shadows.mdx

@@ -0,0 +1,9 @@
+import { Meta, Title, Description, Stories } from '@storybook/addon-docs/blocks'
+
+import * as ShadowsStories from './Shadows.stories'
+
+<Meta of={ShadowsStories} />
+
+<Title />
+<Description />
+<Stories />

package/src/stories/Shadows.stories.ts

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import type { Token } from '@/stories/tokenUtils'
+import {
+  copyableClass,
+  copyableCopiedClass,
+  readTokens,
+  sortTokensBySize,
+  tokenTableClass,
+  useCopier,
+} from '@/stories/tokenUtils'
+
+const meta: Meta = {
+  title: 'Foundations/Shadows',
+  tags: ['!dev'],
+  parameters: {
+    layout: 'padded',
+    controls: { disable: true },
+    docs: { source: { code: null } },
+  },
+}
+
+export default meta
+
+type Story = StoryObj
+
+const previewStyle = (tokenName: string): string =>
+  `width: 160px; height: 80px; background: #ffffff; border-radius: 8px; box-shadow: var(${tokenName});`
+
+const makeSectionStory = (loader: () => Token[]): Story => ({
+  render: () => ({
+    setup() {
+      const { copiedKey, copy } = useCopier()
+      return {
+        tokens: loader(),
+        copiedKey,
+        copy,
+        tableClass: tokenTableClass,
+        copyClass: copyableClass,
+        copiedClass: copyableCopiedClass,
+        preview: (tokenName: string) => previewStyle(tokenName),
+      }
+    },
+    template: `
+      <table v-if="tokens.length > 0" :class="tableClass">
+        <thead>
+          <tr>
+            <th scope="col">Token</th>
+            <th scope="col">Value</th>
+            <th scope="col">Preview</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="token in tokens" :key="token.name">
+            <td>
+              <span
+                :class="[copyClass, copiedKey === token.name ? copiedClass : '']"
+                role="button"
+                tabindex="0"
+                :title="'Click to copy ' + token.name"
+                @click="copy(token.name)"
+                @keydown.enter.prevent="copy(token.name)"
+                @keydown.space.prevent="copy(token.name)"
+              >{{ copiedKey === token.name ? 'Copied!' : token.name }}</span>
+            </td>
+            <td>{{ token.value }}</td>
+            <td class="cp-token-table__preview">
+              <div :style="preview(token.name)"></div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div v-else style="padding: 12px 0; color: #9ca3af; font-size: 12px;">No tokens</div>
+    `,
+  }),
+})
+
+/**
+ * Drop shadows ordered from the most to the least prominent. Use them to
+ * lift cards, popovers and menus off the surface.
+ */
+export const DropShadows: Story = makeSectionStory(() =>
+  sortTokensBySize(readTokens(['--cp-shadows-'], [/-inset$/, /^--cp-shadows-overlay$/, /^--cp-shadows-side-panel$/])),
+)
+
+/**
+ * Inset shadows sit inside the element. Useful for pressed states and
+ * recessed surfaces like form fields.
+ */
+export const InsetShadows: Story = makeSectionStory(() => sortTokensBySize(readTokens([/^--cp-shadows-.*-inset$/])))
+
+/**
+ * Dedicated shadow for the side panel container.
+ */
+export const SidePanel: Story = makeSectionStory(() => readTokens(['--cp-shadows-side-panel']))
+
+/**
+ * Multi-layered shadow used for modals and full-screen overlays.
+ */
+export const Overlay: Story = makeSectionStory(() => readTokens(['--cp-shadows-overlay']))

package/src/stories/Typography.mdx

@@ -0,0 +1,9 @@
+import { Meta, Title, Description, Stories } from '@storybook/addon-docs/blocks'
+
+import * as TypographyStories from './Typography.stories'
+
+<Meta of={TypographyStories} />
+
+<Title />
+<Description />
+<Stories />

package/src/stories/Typography.stories.ts

@@ -0,0 +1,181 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import type { ProbeProperty, Token } from '@/stories/tokenUtils'
+import {
+  copyableClass,
+  copyableCopiedClass,
+  getTokenPixels,
+  readTokens,
+  sortTokensBySize,
+  splitRemPx,
+  tokenTableClass,
+  useCopier,
+} from '@/stories/tokenUtils'
+
+const meta: Meta = {
+  title: 'Foundations/Typography',
+  tags: ['!dev'],
+  parameters: {
+    layout: 'padded',
+    controls: { disable: true },
+    docs: { source: { code: null } },
+  },
+}
+
+export default meta
+
+type Story = StoryObj
+
+type PreviewKind = 'letter-spacing' | 'line-height' | 'text-size'
+
+const previewStyle = (kind: PreviewKind, tokenName: string): string => {
+  const ref = `var(${tokenName})`
+  switch (kind) {
+    case 'text-size':
+      return `font-size: ${ref}; line-height: 1.1; color: #36384d;`
+    case 'line-height':
+      return `font-size: 14px; line-height: ${ref}; color: #36384d; max-width: 280px; width:280px; display:block; white-space: initial;`
+    case 'letter-spacing':
+      return `font-size: 14px; letter-spacing: ${ref}; color: #36384d;`
+  }
+}
+
+const sampleForKind = (kind: PreviewKind): string => {
+  switch (kind) {
+    case 'text-size':
+      return 'The quick brown fox'
+    case 'line-height':
+      return 'Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.'
+    case 'letter-spacing':
+      return 'AVERAGE spacing sample'
+  }
+}
+
+/**
+ * Raw text sizes, sorted from the biggest to the smallest. Prefer the
+ * semantic `--cp-text-*-size` tokens (Text scale) in application code.
+ */
+export const TextSize: Story = {
+  render: () => ({
+    setup() {
+      const tokens = sortTokensBySize(readTokens(['--cp-text-size-']))
+      const { copiedKey, copy } = useCopier()
+      return {
+        tokens,
+        copiedKey,
+        copy,
+        tableClass: tokenTableClass,
+        copyClass: copyableClass,
+        copiedClass: copyableCopiedClass,
+        preview: (tokenName: string) => previewStyle('text-size', tokenName),
+        sample: sampleForKind('text-size'),
+        split: (token: Token) => splitRemPx(token),
+      }
+    },
+    template: `
+      <table v-if="tokens.length > 0" :class="tableClass">
+        <thead>
+          <tr>
+            <th scope="col">Token</th>
+            <th scope="col">rem</th>
+            <th scope="col">px</th>
+            <th scope="col">Preview</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="token in tokens" :key="token.name">
+            <td>
+              <span
+                :class="[copyClass, copiedKey === token.name ? copiedClass : '']"
+                role="button"
+                tabindex="0"
+                :title="'Click to copy ' + token.name"
+                @click="copy(token.name)"
+                @keydown.enter.prevent="copy(token.name)"
+                @keydown.space.prevent="copy(token.name)"
+              >{{ copiedKey === token.name ? 'Copied!' : token.name }}</span>
+            </td>
+            <td>{{ split(token).rem }}</td>
+            <td>{{ split(token).px }}</td>
+            <td class="cp-token-table__preview">
+              <span :style="preview(token.name)">{{ sample }}</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div v-else style="padding: 12px 0; color: #9ca3af; font-size: 12px;">No tokens</div>
+    `,
+  }),
+}
+
+type ValueSectionArgs = { kind: 'letter-spacing' | 'line-height'; loader: () => Token[] }
+
+const makeValueStory = ({ kind, loader }: ValueSectionArgs): Story => ({
+  render: () => ({
+    setup() {
+      const { copiedKey, copy } = useCopier()
+      const probeProperty: ProbeProperty = kind
+      return {
+        kind,
+        tokens: loader(),
+        copiedKey,
+        copy,
+        tableClass: tokenTableClass,
+        copyClass: copyableClass,
+        copiedClass: copyableCopiedClass,
+        preview: (k: PreviewKind, tokenName: string) => previewStyle(k, tokenName),
+        sample: (k: PreviewKind) => sampleForKind(k),
+        px: (tokenName: string) => getTokenPixels(tokenName, probeProperty) ?? '—',
+      }
+    },
+    template: `
+      <table v-if="tokens.length > 0" :class="tableClass">
+        <thead>
+          <tr>
+            <th scope="col">Token</th>
+            <th scope="col">Value</th>
+            <th scope="col">px</th>
+            <th scope="col">Preview</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="token in tokens" :key="token.name">
+            <td>
+              <span
+                :class="[copyClass, copiedKey === token.name ? copiedClass : '']"
+                role="button"
+                tabindex="0"
+                :title="'Click to copy ' + token.name"
+                @click="copy(token.name)"
+                @keydown.enter.prevent="copy(token.name)"
+                @keydown.space.prevent="copy(token.name)"
+              >{{ copiedKey === token.name ? 'Copied!' : token.name }}</span>
+            </td>
+            <td>{{ token.value }}</td>
+            <td>{{ px(token.name) }}</td>
+            <td class="cp-token-table__preview">
+              <span :style="preview(kind, token.name)">{{ sample(kind) }}</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div v-else style="padding: 12px 0; color: #9ca3af; font-size: 12px;">No tokens</div>
+    `,
+  }),
+})
+
+/**
+ * Raw line-heights. The gradient line marks the baseline of each sample.
+ */
+export const LineHeight: Story = makeValueStory({
+  kind: 'line-height',
+  loader: () => sortTokensBySize(readTokens(['--cp-line-height-'])),
+})
+
+/**
+ * Letter-spacing (tracking) scale.
+ */
+export const LetterSpacing: Story = makeValueStory({
+  kind: 'letter-spacing',
+  loader: () => sortTokensBySize(readTokens(['--cp-letter-spacing-'])),
+})

package/src/stories/documentationStyles.ts

@@ -1,16 +1,8 @@
-export const docPageStyle =
-  'padding: 24px; background: #f3f4f6; min-height: 100vh; width: 70vw; box-sizing: border-box;'
-
-export const docSectionStyle =
-  'background: #fff; border-radius: 8px; padding: 24px; margin-bottom: 28px; box-shadow: 0 1px 3px rgba(0,0,0,0.08);'
-
-export const docTitleStyle =
-  'margin: 0 0 16px 0; font-size: 12px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em;'
-
 export const docRowWrapStyle = 'display: flex; flex-wrap: wrap; gap: 24px 32px; align-items: flex-end;'
 
 export const docRowColumnStyle = 'display: flex; flex-direction: column; gap: 24px;'
 
-export const docCellStyle = 'display: flex; flex-direction: column; gap: 10px; align-items: flex-start;'
+export const docCellStyle =
+  'display: flex; flex-direction: column; gap: 10px; align-items: flex-start; justify-content: space-between; align-self: stretch;'
 
 export const docLabelStyle = 'font-size: 12px; color: #6b7280;'