cclkit4svelte 3.0.0 → 3.1.0

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;

package/dist/PrismaticWorkCard.svelte

@@ -0,0 +1,228 @@
+<script context="module" lang="ts">
+  export type PrismaticWorkCardTone =
+    | '--strawberry-pink'
+    | '--pineapple-yellow'
+    | '--soda-blue'
+    | '--melon-green'
+    | '--grape-purple'
+    | '--wrap-grey';
+
+  export type PrismaticWorkCardProps = {
+    title?: string;
+    href?: string;
+    linkLabel?: string;
+    imageUrl?: string;
+    imageAlt?: string;
+    tone?: PrismaticWorkCardTone;
+  };
+</script>
+
+<script lang="ts">
+  import { CCLPastelColor, CCLVividColor } from './const/config';
+  import type { ColorVar } from './const/config';
+
+  export let title: string = 'CCL Component Kit';
+  export let href: string | undefined = undefined;
+  export let linkLabel: string = 'VIEW PROJECT';
+  export let imageUrl: string | undefined = undefined;
+  export let imageAlt: string = '';
+  export let tone: PrismaticWorkCardTone = CCLVividColor.STRAWBERRY_PINK;
+
+  const imageColors: Record<string, ColorVar> = {
+    [CCLVividColor.STRAWBERRY_PINK]: CCLPastelColor.PEACH_PINK,
+    [CCLVividColor.PINEAPPLE_YELLOW]: CCLPastelColor.LEMON_YELLOW,
+    [CCLVividColor.SODA_BLUE]: CCLPastelColor.SUGAR_BLUE,
+    [CCLVividColor.MELON_GREEN]: CCLPastelColor.MATCHA_GREEN,
+    [CCLVividColor.GRAPE_PURPLE]: CCLPastelColor.AKEBI_PURPLE,
+    [CCLVividColor.WRAP_GREY]: CCLPastelColor.CLOUD_GREY
+  };
+  const linkElement = 'a';
+
+  $: accentColor = `var(${tone})`;
+  $: imageColor = `var(${imageColors[tone] ?? CCLPastelColor.PEACH_PINK})`;
+</script>
+
+<article
+  class="prismatic-work-card"
+  style="--accent-color: {accentColor}; --image-color: {imageColor};"
+>
+  <div class="image-slot" 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">
+    <h3 class="title">{title}</h3>
+
+    {#if href}
+      <svelte:element
+        this={linkElement}
+        class="link"
+        {href}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <span>{linkLabel}</span>
+        <svg class="link-icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+          <path d="M5 3.5L9.5 8L5 12.5" />
+          <path d="M9 8H2.5" />
+        </svg>
+      </svelte:element>
+    {:else}
+      <span class="link-label">
+        <span>{linkLabel}</span>
+        <svg class="link-icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+          <path d="M5 3.5L9.5 8L5 12.5" />
+          <path d="M9 8H2.5" />
+        </svg>
+      </span>
+    {/if}
+  </div>
+</article>
+
+<style>
+  .prismatic-work-card {
+    display: flex;
+    align-items: center;
+    gap: 44px;
+    width: min(100%, 620px);
+    min-height: 250px;
+    box-sizing: border-box;
+    padding: 38px 32px;
+    border: 1.5px solid color-mix(in srgb, var(--accent-color) 52%, transparent);
+    border-radius: 34px;
+    background: color-mix(in srgb, var(--color-surface-glass) 72%, transparent);
+    color: color-mix(in srgb, var(--palette-grape-900) 42%, var(--palette-wrap-900));
+    font-family: Inter, sans-serif;
+    letter-spacing: 0;
+  }
+
+  .image-slot {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 170px;
+    width: 170px;
+    height: 170px;
+    overflow: hidden;
+    border-radius: 24px;
+    background: var(--image-color);
+  }
+
+  .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;
+  }
+
+  .body {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    gap: 58px;
+    min-width: 0;
+  }
+
+  .title {
+    margin: 0;
+    max-width: 100%;
+    color: inherit;
+    font-size: 26px;
+    font-weight: 700;
+    line-height: normal;
+    overflow-wrap: anywhere;
+    word-break: normal;
+  }
+
+  .link,
+  .link-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    width: fit-content;
+    color: var(--accent-color);
+    font-size: 15px;
+    font-weight: 700;
+    line-height: normal;
+    text-decoration: none;
+  }
+
+  .link-icon {
+    display: block;
+    flex: 0 0 16px;
+    width: 16px;
+    height: 16px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.8;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .link:hover {
+    text-decoration: underline;
+  }
+
+  .link:focus-visible {
+    outline: 3px solid color-mix(in srgb, var(--accent-color) 42%, Canvas);
+    outline-offset: 4px;
+  }
+
+  @media (max-width: 640px) {
+    .prismatic-work-card {
+      align-items: flex-start;
+      gap: 24px;
+      min-height: auto;
+      padding: 24px;
+    }
+
+    .image-slot {
+      flex-basis: 132px;
+      width: 132px;
+      height: 132px;
+      border-radius: 20px;
+    }
+
+    .body {
+      gap: 32px;
+      min-height: 132px;
+    }
+
+    .title {
+      font-size: 22px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .prismatic-work-card {
+      flex-direction: column;
+    }
+
+    .image-slot {
+      width: min(100%, 170px);
+      height: auto;
+      aspect-ratio: 1 / 1;
+    }
+
+    .body {
+      min-height: auto;
+    }
+  }
+</style>

package/dist/PrismaticWorkCard.svelte.d.ts

@@ -0,0 +1,36 @@
+export type PrismaticWorkCardTone = '--strawberry-pink' | '--pineapple-yellow' | '--soda-blue' | '--melon-green' | '--grape-purple' | '--wrap-grey';
+export type PrismaticWorkCardProps = {
+    title?: string;
+    href?: string;
+    linkLabel?: string;
+    imageUrl?: string;
+    imageAlt?: string;
+    tone?: PrismaticWorkCardTone;
+};
+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 PrismaticWorkCard: $$__sveltets_2_IsomorphicComponent<{
+    title?: string;
+    href?: string | undefined;
+    linkLabel?: string;
+    imageUrl?: string | undefined;
+    imageAlt?: string;
+    tone?: PrismaticWorkCardTone;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    image: {};
+}, {}, string>;
+type PrismaticWorkCard = InstanceType<typeof PrismaticWorkCard>;
+export default PrismaticWorkCard;