cclkit4svelte 3.0.0 → 4.0.0

package/dist/PrismaticSiteHeader.svelte

@@ -0,0 +1,239 @@
+<script context="module" lang="ts">
+  export type PrismaticSiteHeaderTone =
+    | '--strawberry-pink'
+    | '--pineapple-yellow'
+    | '--soda-blue'
+    | '--melon-green'
+    | '--grape-purple'
+    | '--wrap-grey';
+
+  export type PrismaticSiteHeaderItem = {
+    label: string;
+    href: string;
+    active?: boolean;
+  };
+
+  export type PrismaticSiteHeaderProps = {
+    brand?: string;
+    brandHref?: string;
+    logoUrl?: string;
+    logoAlt?: string;
+    logoHeight?: string;
+    navigation?: PrismaticSiteHeaderItem[];
+    ariaLabel?: string;
+    tone?: PrismaticSiteHeaderTone;
+  };
+</script>
+
+<script lang="ts">
+  import { CCLVividColor } from './const/config';
+
+  const defaultNavigation: PrismaticSiteHeaderItem[] = [
+    { label: 'DISCOVER', href: '#discover', active: true },
+    { label: 'WORKS', href: '#works' },
+    { label: 'BOOKS', href: '#books' },
+    { label: 'ABOUT', href: '#about' },
+    { label: 'SHOP', href: '#shop' }
+  ];
+
+  export let brand: string = 'CANDY CHUPS Lab.';
+  export let brandHref: string | undefined = undefined;
+  export let logoUrl: string | undefined = undefined;
+  export let logoAlt: string | undefined = undefined;
+  export let logoHeight: string = '40px';
+  export let navigation: PrismaticSiteHeaderItem[] = defaultNavigation;
+  export let ariaLabel: string = 'メインナビゲーション';
+  export let tone: PrismaticSiteHeaderTone = CCLVividColor.STRAWBERRY_PINK;
+
+  const brandLinkElement = 'a';
+
+  function toCssUrl(value: string): string {
+    const escaped = value
+      .replace(/\0/g, '\uFFFD')
+      .replace(/\\/g, '\\\\')
+      .replace(/"/g, '\\"')
+      .replace(/\n/g, '\\a ')
+      .replace(/\r/g, '\\d ')
+      .replace(/\f/g, '\\c ');
+
+    return `url("${escaped}")`;
+  }
+
+  $: accentColor = `var(${tone})`;
+  $: logoImage = logoUrl ? toCssUrl(logoUrl) : 'none';
+  $: logoLabel = logoAlt?.trim() || brand;
+</script>
+
+<header class="prismatic-site-header" style="--accent-color: {accentColor};">
+  {#if brandHref}
+    <svelte:element this={brandLinkElement} class="brand" href={brandHref}>
+      {#if logoUrl}
+        <span
+          class="brand-logo"
+          role="img"
+          aria-label={logoLabel}
+          data-logo-url={logoUrl}
+          style="--logo-height: {logoHeight}; --logo-image: {logoImage};"
+        ></span>
+      {:else}
+        {brand}
+      {/if}
+    </svelte:element>
+  {:else}
+    <span class="brand">
+      {#if logoUrl}
+        <span
+          class="brand-logo"
+          role="img"
+          aria-label={logoLabel}
+          data-logo-url={logoUrl}
+          style="--logo-height: {logoHeight}; --logo-image: {logoImage};"
+        ></span>
+      {:else}
+        {brand}
+      {/if}
+    </span>
+  {/if}
+
+  <nav aria-label={ariaLabel}>
+    <ul>
+      {#each navigation as item (item.href + item.label)}
+        <li>
+          <a
+            class:active={item.active}
+            href={item.href}
+            aria-current={item.active ? 'page' : undefined}
+          >
+            {item.label}
+          </a>
+        </li>
+      {/each}
+    </ul>
+  </nav>
+</header>
+
+<style>
+  .prismatic-site-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 32px;
+    width: min(100%, 1300px);
+    min-height: 104px;
+    box-sizing: border-box;
+    padding: 24px 35px;
+    border: 1.5px solid color-mix(in srgb, var(--accent-color) 42%, transparent);
+    border-radius: 34px;
+    background: color-mix(in srgb, var(--color-surface-glass) 78%, transparent);
+    box-shadow: 0 16px 20px color-mix(in srgb, var(--palette-grape-900) 18%, transparent);
+    font-family: Inter, sans-serif;
+    font-weight: 700;
+    line-height: normal;
+    letter-spacing: 0;
+  }
+
+  .brand {
+    display: flex;
+    align-items: center;
+    flex: 0 0 auto;
+    color: var(--accent-color);
+    font-size: 18px;
+    text-decoration: none;
+    white-space: nowrap;
+  }
+
+  .brand-logo {
+    display: block;
+    width: min(260px, 40vw);
+    max-width: min(260px, 40vw);
+    height: var(--logo-height);
+    background: var(--accent-color);
+    -webkit-mask: var(--logo-image) left center / contain no-repeat;
+    mask: var(--logo-image) left center / contain no-repeat;
+  }
+
+  nav {
+    min-width: 0;
+  }
+
+  ul {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 20px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  a:not(.brand) {
+    position: relative;
+    display: block;
+    padding: 8px 0;
+    color: color-mix(in srgb, var(--palette-grape-900) 42%, var(--palette-wrap-900));
+    font-size: 14px;
+    text-decoration: none;
+    white-space: nowrap;
+  }
+
+  a:not(.brand)::after {
+    position: absolute;
+    right: 0;
+    bottom: 2px;
+    left: 0;
+    height: 2px;
+    border-radius: 2px;
+    background: var(--accent-color);
+    content: '';
+    opacity: 0;
+    transform: scaleX(0.4);
+    transition:
+      opacity 160ms ease,
+      transform 160ms ease;
+  }
+
+  a:not(.brand):hover::after,
+  a:not(.brand):focus-visible::after,
+  a:not(.brand).active::after {
+    opacity: 1;
+    transform: scaleX(1);
+  }
+
+  a:focus-visible {
+    outline: 3px solid color-mix(in srgb, var(--accent-color) 42%, Canvas);
+    outline-offset: 4px;
+  }
+
+  @media (max-width: 760px) {
+    .prismatic-site-header {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 12px;
+      min-height: 104px;
+      padding: 22px 28px;
+    }
+
+    nav {
+      width: 100%;
+      overflow-x: auto;
+      scrollbar-width: thin;
+    }
+
+    ul {
+      justify-content: flex-start;
+      width: max-content;
+      min-width: 100%;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .prismatic-site-header {
+      padding: 20px 22px;
+      border-radius: 28px;
+    }
+
+    ul {
+      gap: 16px;
+    }
+  }
+</style>

package/dist/PrismaticSiteHeader.svelte.d.ts

@@ -0,0 +1,43 @@
+export type PrismaticSiteHeaderTone = '--strawberry-pink' | '--pineapple-yellow' | '--soda-blue' | '--melon-green' | '--grape-purple' | '--wrap-grey';
+export type PrismaticSiteHeaderItem = {
+    label: string;
+    href: string;
+    active?: boolean;
+};
+export type PrismaticSiteHeaderProps = {
+    brand?: string;
+    brandHref?: string;
+    logoUrl?: string;
+    logoAlt?: string;
+    logoHeight?: string;
+    navigation?: PrismaticSiteHeaderItem[];
+    ariaLabel?: string;
+    tone?: PrismaticSiteHeaderTone;
+};
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const PrismaticSiteHeader: $$__sveltets_2_IsomorphicComponent<{
+    brand?: string;
+    brandHref?: string | undefined;
+    logoUrl?: string | undefined;
+    logoAlt?: string | undefined;
+    logoHeight?: string;
+    navigation?: PrismaticSiteHeaderItem[];
+    ariaLabel?: string;
+    tone?: PrismaticSiteHeaderTone;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PrismaticSiteHeader = InstanceType<typeof PrismaticSiteHeader>;
+export default PrismaticSiteHeader;

package/dist/PrismaticStoryCard.svelte

@@ -0,0 +1,264 @@
+<script context="module" lang="ts">
+  export type PrismaticStoryCardSize = 'featured' | 'default';
+  export type PrismaticStoryCardTone =
+    | '--strawberry-pink'
+    | '--pineapple-yellow'
+    | '--soda-blue'
+    | '--melon-green'
+    | '--grape-purple'
+    | '--wrap-grey';
+
+  export type PrismaticStoryCardProps = {
+    title?: string;
+    label?: string;
+    href?: string;
+    linkLabel?: string;
+    imageUrl?: string;
+    imageAlt?: string;
+    squareImage?: boolean;
+    size?: PrismaticStoryCardSize;
+    tone?: PrismaticStoryCardTone;
+  };
+</script>
+
+<script lang="ts">
+  import { CCLPastelColor, CCLVividColor } from './const/config';
+  import type { ColorVar } from './const/config';
+
+  type GradientStops = {
+    start: ColorVar;
+    end: ColorVar;
+  };
+
+  export let title: string = '技術書典20・新刊のお知らせ';
+  export let label: string | undefined = undefined;
+  export let href: string | undefined = undefined;
+  export let linkLabel: string = 'Read more';
+  export let imageUrl: string | undefined = undefined;
+  export let imageAlt: string = '';
+  export let squareImage: boolean = false;
+  export let size: PrismaticStoryCardSize = 'featured';
+  export let tone: PrismaticStoryCardTone = CCLVividColor.STRAWBERRY_PINK;
+
+  const fallbackStops: GradientStops = {
+    start: CCLPastelColor.PEACH_PINK,
+    end: CCLPastelColor.SUGAR_BLUE
+  };
+
+  const gradientStops: Record<string, GradientStops> = {
+    [CCLVividColor.STRAWBERRY_PINK]: fallbackStops,
+    [CCLVividColor.PINEAPPLE_YELLOW]: {
+      start: CCLPastelColor.LEMON_YELLOW,
+      end: CCLPastelColor.PEACH_PINK
+    },
+    [CCLVividColor.SODA_BLUE]: {
+      start: CCLPastelColor.SUGAR_BLUE,
+      end: CCLPastelColor.AKEBI_PURPLE
+    },
+    [CCLVividColor.MELON_GREEN]: {
+      start: CCLPastelColor.MATCHA_GREEN,
+      end: CCLPastelColor.SUGAR_BLUE
+    },
+    [CCLVividColor.GRAPE_PURPLE]: {
+      start: CCLPastelColor.AKEBI_PURPLE,
+      end: CCLPastelColor.LEMON_YELLOW
+    },
+    [CCLVividColor.WRAP_GREY]: {
+      start: CCLPastelColor.CLOUD_GREY,
+      end: CCLPastelColor.SUGAR_BLUE
+    }
+  };
+  const linkElement = 'a';
+
+  $: stops = gradientStops[tone] ?? fallbackStops;
+  $: gradientStart = `var(${stops.start})`;
+  $: gradientEnd = `var(${stops.end})`;
+  $: accentColor = `var(${tone})`;
+</script>
+
+<article
+  class="prismatic-story-card size-{size}"
+  style="--gradient-start: {gradientStart}; --gradient-end: {gradientEnd}; --accent-color: {accentColor};"
+>
+  <div
+    class="image-slot"
+    class:square-image={squareImage}
+    aria-label={imageUrl ? undefined : imageAlt || undefined}
+  >
+    {#if imageUrl}
+      <img class="image" src={imageUrl} alt={imageAlt} />
+    {:else}
+      <slot name="image">
+        <span class="image-fallback" aria-hidden="true"></span>
+      </slot>
+    {/if}
+  </div>
+
+  <div class="body">
+    {#if label}
+      <p class="label">{label}</p>
+    {/if}
+
+    <h3 class="title">{title}</h3>
+
+    {#if href}
+      <svelte:element
+        this={linkElement}
+        class="link"
+        {href}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {linkLabel}
+      </svelte:element>
+    {/if}
+  </div>
+</article>
+
+<style>
+  .prismatic-story-card {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border: 1.5px solid color-mix(in srgb, var(--gradient-start) 52%, transparent);
+    border-radius: 34px;
+    background: color-mix(in srgb, var(--color-surface-glass) 82%, transparent);
+    box-shadow: 0 18px 38px color-mix(in srgb, var(--palette-grape-900) 16%, transparent);
+    color: color-mix(in srgb, var(--palette-grape-900) 42%, var(--palette-wrap-900));
+    font-family: Inter, sans-serif;
+    letter-spacing: 0;
+  }
+
+  .size-featured {
+    width: min(100%, 600px);
+    min-height: 430px;
+  }
+
+  .size-default {
+    width: 300px;
+    min-height: 360px;
+  }
+
+  .image-slot {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    width: 100%;
+    overflow: hidden;
+    background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
+  }
+
+  .size-featured .image-slot {
+    height: 300px;
+  }
+
+  .size-default .image-slot {
+    height: 230px;
+  }
+
+  .image,
+  .image-fallback {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  .image,
+  .image-slot :global(img),
+  .image-slot :global(video) {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .square-image .image,
+  .square-image :global(img),
+  .square-image :global(video) {
+    display: block;
+    width: auto;
+    max-width: 100%;
+    aspect-ratio: 1 / 1;
+    object-fit: contain;
+  }
+
+  .size-featured .square-image .image,
+  .size-featured .square-image :global(img),
+  .size-featured .square-image :global(video) {
+    height: 300px;
+  }
+
+  .size-default .square-image .image,
+  .size-default .square-image :global(img),
+  .size-default .square-image :global(video) {
+    height: 230px;
+  }
+
+  .body {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  .size-featured .body {
+    padding: 21px 20px 20px;
+  }
+
+  .size-default .body {
+    padding: 20px;
+  }
+
+  .label,
+  .title {
+    margin: 0;
+    max-width: 100%;
+    overflow-wrap: anywhere;
+    word-break: normal;
+  }
+
+  .label {
+    color: var(--accent-color);
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 1.25;
+    text-transform: uppercase;
+  }
+
+  .title {
+    color: inherit;
+    font-weight: 400;
+    line-height: normal;
+  }
+
+  .size-featured .title {
+    font-size: 24px;
+  }
+
+  .size-default .title {
+    font-size: 18px;
+  }
+
+  .link {
+    margin-top: auto;
+    color: var(--accent-color);
+    font-size: 13px;
+    font-weight: 700;
+    line-height: 1.4;
+    text-decoration: none;
+  }
+
+  .link:hover {
+    text-decoration: underline;
+  }
+
+  .link:focus-visible {
+    outline: 3px solid color-mix(in srgb, var(--accent-color) 42%, Canvas);
+    outline-offset: 4px;
+  }
+</style>

package/dist/PrismaticStoryCard.svelte.d.ts

@@ -0,0 +1,43 @@
+export type PrismaticStoryCardSize = 'featured' | 'default';
+export type PrismaticStoryCardTone = '--strawberry-pink' | '--pineapple-yellow' | '--soda-blue' | '--melon-green' | '--grape-purple' | '--wrap-grey';
+export type PrismaticStoryCardProps = {
+    title?: string;
+    label?: string;
+    href?: string;
+    linkLabel?: string;
+    imageUrl?: string;
+    imageAlt?: string;
+    squareImage?: boolean;
+    size?: PrismaticStoryCardSize;
+    tone?: PrismaticStoryCardTone;
+};
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const PrismaticStoryCard: $$__sveltets_2_IsomorphicComponent<{
+    title?: string;
+    label?: string | undefined;
+    href?: string | undefined;
+    linkLabel?: string;
+    imageUrl?: string | undefined;
+    imageAlt?: string;
+    squareImage?: boolean;
+    size?: PrismaticStoryCardSize;
+    tone?: PrismaticStoryCardTone;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    image: {};
+}, {}, string>;
+type PrismaticStoryCard = InstanceType<typeof PrismaticStoryCard>;
+export default PrismaticStoryCard;