cclkit4svelte 3.0.0 → 4.0.0

package/dist/PrismaticGradientButton.svelte

@@ -0,0 +1,211 @@
+<script context="module" lang="ts">
+  export type PrismaticGradientButtonTone = 'primary' | 'secondary';
+  export type PrismaticGradientButtonSize = 'large' | 'medium';
+  export type PrismaticGradientButtonType = 'button' | 'submit' | 'reset';
+</script>
+
+<script lang="ts">
+  import { CCLPastelColor, CCLVividColor } from './const/config';
+  import type { ColorVar } from './const/config';
+
+  type GradientStops = {
+    primaryStart: ColorVar;
+    primaryEnd: ColorVar;
+    secondaryStart: ColorVar;
+    secondaryEnd: ColorVar;
+    disabledStart: ColorVar;
+    disabledEnd: ColorVar;
+  };
+
+  /**
+   * ボタン内に表示するラベル
+   * @default Explore the Lab
+   */
+  export let label: string = 'Explore the Lab';
+
+  /**
+   * ボタンの視覚的な強さ
+   * @default primary
+   */
+  export let tone: PrismaticGradientButtonTone = 'primary';
+
+  /**
+   * ボタンサイズ
+   * @default large
+   */
+  export let size: PrismaticGradientButtonSize = 'large';
+
+  /**
+   * グラデーションの基準色
+   * @default --strawberry-pink
+   */
+  export let color: ColorVar = CCLVividColor.STRAWBERRY_PINK;
+
+  /**
+   * ボタンの非活性状態
+   * @default false
+   */
+  export let disabled: boolean = false;
+
+  /**
+   * button要素のtype属性
+   * @default button
+   */
+  export let type: PrismaticGradientButtonType = 'button';
+
+  /**
+   * クリックイベントハンドラ
+   * @default () => {}
+   */
+  export let onClick: () => void = () => {};
+
+  const fallbackStops: GradientStops = {
+    primaryStart: CCLVividColor.STRAWBERRY_PINK,
+    primaryEnd: CCLVividColor.SODA_BLUE,
+    secondaryStart: CCLPastelColor.PEACH_PINK,
+    secondaryEnd: CCLVividColor.STRAWBERRY_PINK,
+    disabledStart: CCLPastelColor.LEMON_YELLOW,
+    disabledEnd: CCLPastelColor.PEACH_PINK
+  };
+
+  const gradientStops: Record<string, GradientStops> = {
+    [CCLVividColor.STRAWBERRY_PINK]: fallbackStops,
+    [CCLVividColor.PINEAPPLE_YELLOW]: {
+      primaryStart: CCLVividColor.PINEAPPLE_YELLOW,
+      primaryEnd: CCLVividColor.MELON_GREEN,
+      secondaryStart: CCLPastelColor.LEMON_YELLOW,
+      secondaryEnd: CCLVividColor.PINEAPPLE_YELLOW,
+      disabledStart: CCLPastelColor.LEMON_YELLOW,
+      disabledEnd: CCLPastelColor.PEACH_PINK
+    },
+    [CCLVividColor.SODA_BLUE]: {
+      primaryStart: CCLVividColor.SODA_BLUE,
+      primaryEnd: CCLVividColor.GRAPE_PURPLE,
+      secondaryStart: CCLPastelColor.SUGAR_BLUE,
+      secondaryEnd: CCLVividColor.SODA_BLUE,
+      disabledStart: CCLPastelColor.SUGAR_BLUE,
+      disabledEnd: CCLPastelColor.CLOUD_GREY
+    },
+    [CCLVividColor.MELON_GREEN]: {
+      primaryStart: CCLVividColor.MELON_GREEN,
+      primaryEnd: CCLVividColor.SODA_BLUE,
+      secondaryStart: CCLPastelColor.MATCHA_GREEN,
+      secondaryEnd: CCLVividColor.MELON_GREEN,
+      disabledStart: CCLPastelColor.MATCHA_GREEN,
+      disabledEnd: CCLPastelColor.CLOUD_GREY
+    },
+    [CCLVividColor.GRAPE_PURPLE]: {
+      primaryStart: CCLVividColor.GRAPE_PURPLE,
+      primaryEnd: CCLVividColor.PINEAPPLE_YELLOW,
+      secondaryStart: CCLPastelColor.AKEBI_PURPLE,
+      secondaryEnd: CCLVividColor.GRAPE_PURPLE,
+      disabledStart: CCLPastelColor.AKEBI_PURPLE,
+      disabledEnd: CCLPastelColor.CLOUD_GREY
+    },
+    [CCLVividColor.WRAP_GREY]: {
+      primaryStart: CCLVividColor.WRAP_GREY,
+      primaryEnd: CCLVividColor.PINEAPPLE_YELLOW,
+      secondaryStart: CCLPastelColor.CLOUD_GREY,
+      secondaryEnd: CCLVividColor.WRAP_GREY,
+      disabledStart: CCLPastelColor.CLOUD_GREY,
+      disabledEnd: CCLPastelColor.CLOUD_GREY
+    }
+  };
+
+  $: stops = gradientStops[color] ?? fallbackStops;
+  $: gradientStart = disabled
+    ? stops.disabledStart
+    : tone === 'secondary'
+      ? stops.secondaryStart
+      : stops.primaryStart;
+  $: gradientEnd = disabled
+    ? stops.disabledEnd
+    : tone === 'secondary'
+      ? stops.secondaryEnd
+      : stops.primaryEnd;
+  $: gradientStartValue = `var(${gradientStart})`;
+  $: gradientEndValue =
+    color === CCLVividColor.WRAP_GREY && !disabled
+      ? `color-mix(in srgb, var(${CCLVividColor.WRAP_GREY}) 14%, Canvas)`
+      : `var(${gradientEnd})`;
+  $: labelColor = disabled
+    ? `var(${CCLVividColor.WRAP_GREY})`
+    : 'var(--prismatic-gradient-button-primary-fg, Canvas)';
+</script>
+
+<button
+  class="prismatic-gradient-button tone-{tone} size-{size}"
+  style="--gradient-start: {gradientStartValue}; --gradient-end: {gradientEndValue}; --label-color: {labelColor};"
+  on:click={onClick}
+  {disabled}
+  {type}
+>
+  <span class="label">{label}</span>
+</button>
+
+<style>
+  .prismatic-gradient-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    width: fit-content;
+    min-width: 156px;
+    border: 0;
+    border-radius: 999px;
+    background: linear-gradient(105deg, var(--gradient-start), var(--gradient-end));
+    color: var(--label-color);
+    font-family: inherit;
+    font-weight: 700;
+    line-height: 1;
+    letter-spacing: 0;
+    white-space: nowrap;
+    cursor: pointer;
+    transition:
+      transform 160ms ease,
+      filter 160ms ease,
+      opacity 160ms ease;
+  }
+
+  .size-large {
+    min-height: 48px;
+    padding: 0 28px;
+    font-size: 14px;
+  }
+
+  .size-medium {
+    min-height: 40px;
+    min-width: 132px;
+    padding: 0 22px;
+    font-size: 12px;
+  }
+
+  .tone-secondary {
+    color: var(--label-color);
+  }
+
+  .prismatic-gradient-button:hover:not(:disabled) {
+    filter: saturate(1.08) brightness(1.02);
+    transform: translateY(-1px);
+  }
+
+  .prismatic-gradient-button:active:not(:disabled) {
+    filter: saturate(1.02) brightness(0.96);
+    transform: translateY(0);
+  }
+
+  .prismatic-gradient-button:focus-visible {
+    outline: 3px solid color-mix(in srgb, var(--gradient-end) 48%, Canvas);
+    outline-offset: 3px;
+  }
+
+  .prismatic-gradient-button:disabled {
+    cursor: not-allowed;
+    opacity: 0.68;
+  }
+
+  .label {
+    display: inline-flex;
+    align-items: center;
+  }
+</style>

package/dist/PrismaticGradientButton.svelte.d.ts

@@ -0,0 +1,51 @@
+export type PrismaticGradientButtonTone = 'primary' | 'secondary';
+export type PrismaticGradientButtonSize = 'large' | 'medium';
+export type PrismaticGradientButtonType = 'button' | 'submit' | 'reset';
+import type { ColorVar } from './const/config';
+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 PrismaticGradientButton: $$__sveltets_2_IsomorphicComponent<{
+    /**
+       * ボタン内に表示するラベル
+       * @default Explore the Lab
+       */ label?: string;
+    /**
+       * ボタンの視覚的な強さ
+       * @default primary
+       */ tone?: PrismaticGradientButtonTone;
+    /**
+       * ボタンサイズ
+       * @default large
+       */ size?: PrismaticGradientButtonSize;
+    /**
+       * グラデーションの基準色
+       * @default --strawberry-pink
+       */ color?: ColorVar;
+    /**
+       * ボタンの非活性状態
+       * @default false
+       */ disabled?: boolean;
+    /**
+       * button要素のtype属性
+       * @default button
+       */ type?: PrismaticGradientButtonType;
+    /**
+       * クリックイベントハンドラ
+       * @default () => {}
+       */ onClick?: () => void;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PrismaticGradientButton = InstanceType<typeof PrismaticGradientButton>;
+export default PrismaticGradientButton;

package/dist/PrismaticSectionHeading.svelte

@@ -0,0 +1,70 @@
+<script context="module" lang="ts">
+  export type PrismaticSectionHeadingTone =
+    | '--strawberry-pink'
+    | '--pineapple-yellow'
+    | '--soda-blue'
+    | '--melon-green'
+    | '--grape-purple'
+    | '--wrap-grey';
+
+  export type PrismaticSectionHeadingProps = {
+    eyebrow?: string;
+    title?: string;
+    tone?: PrismaticSectionHeadingTone;
+  };
+</script>
+
+<script lang="ts">
+  import { CCLVividColor } from './const/config';
+
+  export let eyebrow: string = 'LATEST';
+  export let title: string = 'Latest Stories';
+  export let tone: PrismaticSectionHeadingTone = CCLVividColor.STRAWBERRY_PINK;
+
+  $: toneValue = `var(${tone})`;
+</script>
+
+<div class="prismatic-section-heading" style="--eyebrow-color: {toneValue};">
+  <p class="eyebrow">{eyebrow}</p>
+  <h2 class="title">{title}</h2>
+</div>
+
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');
+
+  .prismatic-section-heading {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    width: min(100%, 600px);
+    min-height: 80px;
+    color: color-mix(in srgb, var(--palette-grape-900) 42%, var(--palette-wrap-900));
+    font-family: 'DotGothic16', sans-serif;
+    font-weight: 400;
+    line-height: normal;
+    letter-spacing: 0;
+    overflow-wrap: anywhere;
+    word-break: normal;
+  }
+
+  .eyebrow,
+  .title {
+    margin: 0;
+    max-width: 100%;
+    font-weight: 400;
+  }
+
+  .eyebrow {
+    color: var(--eyebrow-color);
+    font-size: 12px;
+    line-height: 1.25;
+    text-transform: uppercase;
+  }
+
+  .title {
+    color: inherit;
+    font-size: 42px;
+    line-height: 1.05;
+  }
+</style>

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;