cclkit4svelte 3.0.0 → 3.1.0

package/dist/PrismaticSectionHeading.svelte.d.ts

@@ -0,0 +1,28 @@
+export type PrismaticSectionHeadingTone = '--strawberry-pink' | '--pineapple-yellow' | '--soda-blue' | '--melon-green' | '--grape-purple' | '--wrap-grey';
+export type PrismaticSectionHeadingProps = {
+    eyebrow?: string;
+    title?: string;
+    tone?: PrismaticSectionHeadingTone;
+};
+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 PrismaticSectionHeading: $$__sveltets_2_IsomorphicComponent<{
+    eyebrow?: string;
+    title?: string;
+    tone?: PrismaticSectionHeadingTone;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PrismaticSectionHeading = InstanceType<typeof PrismaticSectionHeading>;
+export default PrismaticSectionHeading;

package/dist/PrismaticSiteFooter.svelte

@@ -0,0 +1,216 @@
+<script context="module" lang="ts">
+  export type PrismaticSiteFooterTone =
+    | '--strawberry-pink'
+    | '--pineapple-yellow'
+    | '--soda-blue'
+    | '--melon-green'
+    | '--grape-purple'
+    | '--wrap-grey';
+
+  export type PrismaticSiteFooterLink = {
+    label: string;
+    href: string;
+  };
+
+  export type PrismaticSiteFooterProps = {
+    brand?: string;
+    brandHref?: string;
+    logoUrl?: string;
+    logoAlt?: string;
+    logoHeight?: string;
+    links?: PrismaticSiteFooterLink[];
+    copyright?: string;
+    ariaLabel?: string;
+    tone?: PrismaticSiteFooterTone;
+  };
+</script>
+
+<script lang="ts">
+  import { CCLVividColor } from './const/config';
+
+  const defaultLinks: PrismaticSiteFooterLink[] = [
+    { label: 'PRIVACY', href: '#privacy' },
+    { label: 'CONTACT', href: '#contact' }
+  ];
+
+  const year = new Date().getFullYear();
+
+  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 links: PrismaticSiteFooterLink[] = defaultLinks;
+  export let copyright: string = `Copyright © ${year} CANDY CHUPS Lab. All Rights Reserved.`;
+  export let ariaLabel: string = 'フッターナビゲーション';
+  export let tone: PrismaticSiteFooterTone = CCLVividColor.STRAWBERRY_PINK;
+
+  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>
+
+<footer class="prismatic-site-footer" style="--accent-color: {accentColor};">
+  <div class="footer-main">
+    {#if brandHref}
+      <a 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}
+      </a>
+    {: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}
+
+    {#if links.length > 0}
+      <nav aria-label={ariaLabel}>
+        <ul>
+          {#each links as item (item.href + item.label)}
+            <li><a href={item.href}>{item.label}</a></li>
+          {/each}
+        </ul>
+      </nav>
+    {/if}
+  </div>
+
+  <small>{copyright}</small>
+</footer>
+
+<style>
+  .prismatic-site-footer {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 32px;
+    width: min(100%, 1300px);
+    min-height: 180px;
+    box-sizing: border-box;
+    padding: 40px 48px 32px;
+    border: 1.5px solid color-mix(in srgb, var(--accent-color) 52%, transparent);
+    border-radius: 34px;
+    background: linear-gradient(
+      112deg,
+      color-mix(in srgb, var(--accent-color) 78%, var(--color-surface-glass)) 0%,
+      color-mix(in srgb, var(--accent-color) 42%, var(--color-surface-glass)) 58%,
+      color-mix(in srgb, var(--accent-color) 18%, var(--color-surface-glass)) 100%
+    );
+    box-shadow: 0 16px 20px color-mix(in srgb, var(--palette-grape-900) 18%, transparent);
+    color: var(--palette-grape-900);
+    font-family: Inter, sans-serif;
+    line-height: normal;
+    letter-spacing: 0;
+  }
+
+  .footer-main {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 32px;
+  }
+
+  .brand {
+    display: flex;
+    align-items: center;
+    color: inherit;
+    font-size: 22px;
+    font-weight: 700;
+    text-decoration: none;
+    white-space: nowrap;
+  }
+
+  .brand-logo {
+    display: block;
+    width: min(300px, 48vw);
+    height: var(--logo-height);
+    background: var(--color-surface-glass);
+    -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;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 12px 24px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  li a {
+    color: inherit;
+    font-size: 13px;
+    font-weight: 700;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 5px;
+  }
+
+  li a:hover,
+  li a:focus-visible {
+    text-decoration-line: underline;
+  }
+
+  a:focus-visible {
+    outline: 3px solid color-mix(in srgb, var(--accent-color) 42%, Canvas);
+    outline-offset: 4px;
+  }
+
+  small {
+    font-size: 10px;
+    font-weight: 500;
+  }
+
+  @media (max-width: 640px) {
+    .prismatic-site-footer {
+      gap: 28px;
+      min-height: 220px;
+      padding: 32px 28px 28px;
+      border-radius: 28px;
+    }
+
+    .footer-main {
+      flex-direction: column;
+      gap: 24px;
+    }
+
+    ul {
+      justify-content: flex-start;
+    }
+  }
+</style>

package/dist/PrismaticSiteFooter.svelte.d.ts

@@ -0,0 +1,44 @@
+export type PrismaticSiteFooterTone = '--strawberry-pink' | '--pineapple-yellow' | '--soda-blue' | '--melon-green' | '--grape-purple' | '--wrap-grey';
+export type PrismaticSiteFooterLink = {
+    label: string;
+    href: string;
+};
+export type PrismaticSiteFooterProps = {
+    brand?: string;
+    brandHref?: string;
+    logoUrl?: string;
+    logoAlt?: string;
+    logoHeight?: string;
+    links?: PrismaticSiteFooterLink[];
+    copyright?: string;
+    ariaLabel?: string;
+    tone?: PrismaticSiteFooterTone;
+};
+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 PrismaticSiteFooter: $$__sveltets_2_IsomorphicComponent<{
+    brand?: string;
+    brandHref?: string | undefined;
+    logoUrl?: string | undefined;
+    logoAlt?: string | undefined;
+    logoHeight?: string;
+    links?: PrismaticSiteFooterLink[];
+    copyright?: string;
+    ariaLabel?: string;
+    tone?: PrismaticSiteFooterTone;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PrismaticSiteFooter = InstanceType<typeof PrismaticSiteFooter>;
+export default PrismaticSiteFooter;

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;