@fabrica_communications/design-system 0.1.0

package/src/components/ui/text.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+const textVariants = cva("text-[var(--color-color-body-text)]", {
+  variants: {
+    size: {
+      xs: "text-[length:var(--font-size-usage-caption)]",
+      sm: "text-[length:var(--font-size-usage-parts-sm)]",
+      base: "text-[length:var(--font-size-usage-default)]",
+      lg: "text-[length:var(--font-size-usage-parts-md)]",
+      xl: "text-[length:var(--font-size-usage-parts-lg)]",
+      "2xl": "text-[length:var(--font-size-usage-title-sm)]",
+    },
+    lineHeight: {
+      tight: "leading-[1.25]",
+      normal: "leading-[1.4]",
+      relaxed: "leading-[1.5]",
+      loose: "leading-[1.6]",
+    },
+  },
+  defaultVariants: {
+    size: "base",
+    lineHeight: "normal",
+  },
+})
+
+function Text({
+  className,
+  size,
+  lineHeight,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"p"> &
+  VariantProps<typeof textVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "p"
+
+  return (
+    <Comp
+      data-slot="text"
+      className={cn(textVariants({ size, lineHeight }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Text, textVariants }
+

package/src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/src/components/ui/toggle.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "../../lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/index.ts

@@ -0,0 +1,37 @@
+export * from "./components/ui/accordion"
+export * from "./components/ui/alert-dialog"
+export * from "./components/ui/aspect-ratio"
+export * from "./components/ui/badge"
+export * from "./components/ui/breadcrumb"
+export * from "./components/ui/button"
+export * from "./components/ui/card"
+export * from "./components/ui/carousel"
+export * from "./components/ui/checkbox"
+export * from "./components/ui/dialog"
+export * from "./components/ui/field"
+export * from "./components/ui/heading"
+export * from "./components/ui/icon"
+export * from "./components/ui/input"
+export * from "./components/ui/input-group"
+export * from "./components/ui/label"
+export * from "./components/ui/native-select"
+export * from "./components/ui/pagination"
+export * from "./components/ui/radio-group"
+export * from "./components/ui/scroll-area"
+export * from "./components/ui/section-container"
+export * from "./components/ui/select"
+export * from "./components/ui/separator"
+export * from "./components/ui/skeleton"
+export * from "./components/ui/sonner"
+export * from "./components/ui/switch"
+export * from "./components/ui/table"
+export * from "./components/ui/tabs"
+export * from "./components/ui/text"
+export * from "./components/ui/text-link"
+export * from "./components/ui/textarea"
+export * from "./components/ui/toggle"
+export * from "./components/ui/tooltip"
+
+export * from "./components/shared/gap"
+export * from "./components/shared/page-header"
+export * from "./components/shared/page-top-button"

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/styles/globals.css

@@ -0,0 +1,162 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "./variables.css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --font-sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Helvetica Neue", system-ui,
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  
+  /* Shadcn/ui base variables */
+  --background: var(--white); /* アプリ全体のデフォルト背景色 */
+  --foreground: var(--body-text); /* 標準テキストカラー */
+  --card: var(--white); /* カードコンポーネントの背景色 */
+  --card-foreground: var(--body-text); /* カード内テキストの色 */
+  --popover: var(--white); /* ポップオーバーの背景色 */
+  --popover-foreground: var(--body-text); /* ポップオーバー内テキストの色 */
+  --primary: var(--theme); /* プライマリ要素の基調カラー */
+  --primary-foreground: var(--white); /* プライマリ要素上のテキスト色 */
+  --secondary: var(--primitive-neutral-200); /* セカンダリ要素の背景色 */
+  --secondary-foreground: var(--body-text); /* セカンダリ要素上のテキスト色 */
+  --muted: var(--usage-background); /* ミュート領域の背景色 */
+  --muted-foreground: var(--primitive-neutral-700); /* ミュート領域のテキスト色 */
+  --accent: var(--primitive-accent-500); /* アクセント領域の背景色 */
+  --accent-foreground: var(--white); /* アクセント領域上のテキスト色 */
+  --destructive: var(--usage-button-destructive); /* 破壊的アクションの背景色 */
+  --destructive-foreground: var(--white); /* 破壊的アクション上のテキスト色 */
+  --border: var(--usage-border); /* デフォルトのボーダーカラー */
+  --input: var(--usage-form-border); /* フォーム入力のボーダーカラー */
+  --ring: var(--usage-form-focus-border); /* フォーカスリングのカラー */
+  --radius: var(--usage-card); /* コンポーネントの角丸半径 */
+  --chart-1: var(--usage-calendar-01); /* チャート用カラーパレット1 */
+  --chart-2: var(--usage-calendar-02); /* チャート用カラーパレット2 */
+  --chart-3: var(--usage-calendar-03); /* チャート用カラーパレット3 */
+  --chart-4: var(--usage-calendar-04); /* チャート用カラーパレット4 */
+  --chart-5: var(--usage-calendar-05); /* チャート用カラーパレット5 */
+  --sidebar: var(--primitive-neutral-050); /* サイドバーの背景色 */
+  --sidebar-foreground: var(--body-text); /* サイドバー内のテキスト色 */
+  --sidebar-primary: var(--theme); /* サイドバー内のプライマリ色 */
+  --sidebar-primary-foreground: var(--white); /* サイドバーのプライマリ上テキスト色 */
+  --sidebar-accent: var(--primitive-neutral-100); /* サイドバー内アクセント背景色 */
+  --sidebar-accent-foreground: var(--body-text); /* サイドバーアクセント上テキスト色 */
+  --sidebar-border: var(--usage-border); /* サイドバーのボーダーカラー */
+  --sidebar-ring: var(--usage-form-focus-border); /* サイドバー要素のフォーカスリング色 */
+}
+
+@theme inline {
+  /* Colors - Design tokens mapping */
+  --color-background: var(--background); /* Tailwind変数として使用する背景色 */
+  --color-foreground: var(--foreground); /* Tailwind変数として使用する前景色 */
+  --color-card: var(--card); /* カード用背景のTailwindマップ */
+  --color-card-foreground: var(--card-foreground); /* カード内テキスト用Tailwindマップ */
+  --color-popover: var(--popover); /* ポップオーバー用背景のTailwindマップ */
+  --color-popover-foreground: var(--popover-foreground); /* ポップオーバー内テキスト用マップ */
+  --color-primary: var(--primary); /* プライマリ色のTailwindマップ */
+  --color-primary-foreground: var(--primary-foreground); /* プライマリ上のテキスト色マップ */
+  --color-secondary: var(--secondary); /* セカンダリ色のTailwindマップ */
+  --color-secondary-foreground: var(--secondary-foreground); /* セカンダリ上のテキスト色マップ */
+  --color-muted: var(--muted); /* ミュート背景のTailwindマップ */
+  --color-muted-foreground: var(--muted-foreground); /* ミュートテキスト色のマップ */
+  --color-accent: var(--accent); /* アクセント色のTailwindマップ */
+  --color-accent-foreground: var(--accent-foreground); /* アクセント上のテキスト色マップ */
+  --color-destructive: var(--destructive); /* 破壊的アクション色のTailwindマップ */
+  --color-destructive-foreground: var(--destructive-foreground); /* 破壊的アクション上のテキスト色マップ */
+  --color-border: var(--border); /* コンポーネント境界色のマップ */
+  --color-input: var(--input); /* 入力ボーダー色のTailwindマップ */
+  --color-ring: var(--ring); /* フォーカスリング色のTailwindマップ */
+  --color-chart-1: var(--chart-1); /* チャート配色1のTailwindマップ */
+  --color-chart-2: var(--chart-2); /* チャート配色2のTailwindマップ */
+  --color-chart-3: var(--chart-3); /* チャート配色3のTailwindマップ */
+  --color-chart-4: var(--chart-4); /* チャート配色4のTailwindマップ */
+  --color-chart-5: var(--chart-5); /* チャート配色5のTailwindマップ */
+  --color-sidebar: var(--sidebar); /* サイドバー背景のTailwindマップ */
+  --color-sidebar-foreground: var(--sidebar-foreground); /* サイドバーテキスト色のマップ */
+  --color-sidebar-primary: var(--sidebar-primary); /* サイドバープライマリ色のマップ */
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); /* サイドバープライマリ上テキスト色マップ */
+  --color-sidebar-accent: var(--sidebar-accent); /* サイドバーアクセント色のマップ */
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); /* サイドバーアクセント上テキスト色マップ */
+  --color-sidebar-border: var(--sidebar-border); /* サイドバー境界色のマップ */
+  --color-sidebar-ring: var(--sidebar-ring); /* サイドバーフォーカスリング色のマップ */
+  
+  /* Border radius */
+  --radius-xs: var(--primitive-radius-radius-2); /* rounded-xs 用角丸 */
+  --radius-sm: var(--primitive-radius-radius-4); /* rounded-sm 用角丸 */
+  --radius-md: var(--primitive-radius-radius-8); /* rounded-md 用角丸 */
+  --radius-lg: var(--primitive-radius-radius-12); /* rounded-lg 用角丸 */
+  --radius-xl: var(--primitive-radius-radius-16); /* rounded-xl 用角丸 */
+  --radius-2xl: var(--primitive-radius-radius-24); /* rounded-2xl 用角丸 */
+  --radius-3xl: var(--primitive-radius-radius-32); /* rounded-3xl 用角丸 */
+  --radius-4xl: var(--primitive-radius-radius-999); /* rounded-4xl 用角丸 */
+  --radius-full: var(--primitive-radius-radius-999); /* rounded-full 用角丸 */
+  
+  /* Spacing scale */
+  --spacing: var(--primitive-spacing-spacing-4); /* spacing base (1 = 0.4rem) */
+  --spacing-px: 1px; /* spacing px 用 */
+  --spacing-0: 0; /* spacing 0 用 */
+  --spacing-0\.5: calc(var(--spacing) / 2); /* spacing 0.5 用 */
+  --spacing-1: var(--spacing); /* spacing 1 用 */
+  --spacing-1\.5: calc(var(--spacing) * 1.5); /* spacing 1.5 用 */
+  --spacing-2: var(--primitive-spacing-spacing-8); /* spacing 2 用 */
+  --spacing-2\.5: calc(var(--primitive-spacing-spacing-8) * 1.25); /* spacing 2.5 用 */
+  --spacing-3: var(--primitive-spacing-spacing-12); /* spacing 3 用 */
+  --spacing-3\.5: calc(var(--primitive-spacing-spacing-12) * 1.1666666667); /* spacing 3.5 用 */
+  --spacing-4: var(--primitive-spacing-spacing-16); /* spacing 4 用 */
+  --spacing-5: var(--primitive-spacing-spacing-24); /* spacing 5 用 */
+  --spacing-6: var(--primitive-spacing-spacing-32); /* spacing 6 用 */
+  --spacing-7: calc(var(--primitive-spacing-spacing-32) * 1.25); /* spacing 7 用 */
+  --spacing-8: var(--primitive-spacing-spacing-40); /* spacing 8 用 */
+  --spacing-9: calc(var(--primitive-spacing-spacing-40) * 1.125); /* spacing 9 用 */
+  --spacing-10: var(--primitive-spacing-spacing-48); /* spacing 10 用 */
+  --spacing-11: calc(var(--primitive-spacing-spacing-48) * 1.125); /* spacing 11 用 */
+  --spacing-12: var(--primitive-spacing-spacing-56); /* spacing 12 用 */
+  --spacing-14: var(--primitive-spacing-spacing-64); /* spacing 14 用 */
+  --spacing-16: var(--primitive-spacing-spacing-72); /* spacing 16 用 */
+  --spacing-20: var(--primitive-spacing-spacing-96); /* spacing 20 用 */
+  --spacing-24: var(--primitive-spacing-spacing-120); /* spacing 24 用 */
+  --spacing-28: calc(var(--primitive-spacing-spacing-120) * 1.1666666667); /* spacing 28 用 */
+  --spacing-32: calc(var(--spacing-24) + var(--spacing-8)); /* spacing 32 用 */
+  --spacing-36: calc(var(--spacing-32) + var(--spacing-4)); /* spacing 36 用 */
+  --spacing-40: var(--usage-contents-column-gap); /* spacing 40 用 */
+  --spacing-44: calc(var(--spacing-40) + var(--spacing-4)); /* spacing 44 用 */
+  --spacing-48: calc(var(--spacing-32) + var(--spacing-16)); /* spacing 48 用 */
+  --spacing-52: calc(var(--spacing-48) + var(--spacing-4)); /* spacing 52 用 */
+  --spacing-56: var(--usage-section-padding); /* spacing 56 用 */
+  --spacing-60: calc(var(--spacing-56) + var(--spacing-4)); /* spacing 60 用 */
+  --spacing-64: var(--usage-table-column-gap); /* spacing 64 用 */
+  --spacing-72: calc(var(--spacing-64) + var(--spacing-8)); /* spacing 72 用 */
+  --spacing-80: calc(var(--spacing-64) + var(--spacing-16)); /* spacing 80 用 */
+  --spacing-96: var(--usage-contents-row-gap-nodivider); /* spacing 96 用 */
+
+  /* Font sizes - Design tokens override */
+  --text-xs: var(--font-size-usage-caption); /* 1.2rem */
+  --text-sm: var(--font-size-usage-parts-sm); /* 1.2rem */
+  --text-base: var(--font-size-usage-default); /* 1.4rem */
+  --text-lg: var(--font-size-usage-parts-md); /* 1.4rem */
+  --text-xl: var(--font-size-usage-parts-lg); /* 1.6rem */
+  --text-2xl: var(--font-size-usage-title-sm); /* 1.6rem */
+  --text-3xl: var(--font-size-usage-title-md); /* 2rem */
+  --text-4xl: var(--font-size-usage-title-lg); /* 2.4rem */
+  --text-5xl: var(--font-size-usage-pagetitle); /* 2.8rem */
+}
+
+@layer base {
+  html {
+    font-size: 62.5%;
+    scroll-behavior: smooth;
+    scroll-padding-top: 24rem;
+  }
+  body {
+    font-size: var(--font-size-usage-default);
+    color: var(--body-text);
+    background-color: var(--white);
+  }
+
+  button,
+  input[type='checkbox'],
+  input[type='radio'],
+  select {
+    cursor: pointer;
+  }
+}
+

package/src/styles/variables.css

@@ -0,0 +1,261 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --primitive-neutral-100: #f5f6f6;
+  --primitive-neutral-200: #eceded;
+  --primitive-neutral-300: #e0e2e3;
+  --primitive-neutral-400: #ced1d2;
+  --primitive-neutral-500: #b2b6b8;
+  --primitive-neutral-600: #959b9d;
+  --primitive-neutral-700: #636b6f;
+  --primitive-neutral-800: #3e484d;
+  --primitive-neutral-900: #303538;
+  --primitive-neutral-050: #f9fafa;
+  --primitive-primary-100: #e8fafe;
+  --primitive-primary-200: #dbf6fc;
+  --primitive-primary-300: #baf1fd;
+  --primitive-primary-400: #84e0f8;
+  --primitive-primary-500: #51c9e9;
+  --primitive-primary-600: #14b2dd;
+  --primitive-primary-700: #099ece;
+  --primitive-primary-800: #008ec1;
+  --primitive-primary-900: #0079a5;
+  --primitive-primary-050: #f5feff;
+  --primitive-secondary-100: #e3eaf2;
+  --primitive-secondary-200: #d5dfeb;
+  --primitive-secondary-300: #c7d4e4;
+  --primitive-secondary-400: #abbfd6;
+  --primitive-secondary-500: #8ea9c8;
+  --primitive-secondary-600: #6489b4;
+  --primitive-secondary-700: #406ea3;
+  --primitive-secondary-800: #1c5291;
+  --primitive-secondary-900: #19487f;
+  --primitive-secondary-050: #f1f5f9;
+  --primitive-accent-100: #e1f9f9;
+  --primitive-accent-200: #c5f0f0;
+  --primitive-accent-300: #99e4e5;
+  --primitive-accent-400: #64d5d6;
+  --primitive-accent-500: #14bebf;
+  --primitive-accent-600: #0aaeaf;
+  --primitive-accent-700: #009e9e;
+  --primitive-accent-800: #009191;
+  --primitive-accent-900: #008383;
+  --primitive-accent-050: #effbfb;
+  --primitive-success-100: #e9fac8;
+  --primitive-success-200: #bdea6d;
+  --primitive-success-300: #82cd17;
+  --primitive-success-400: #5ea500;
+  --primitive-success-500: #4e8500;
+  --primitive-warning-100: #fff4cc;
+  --primitive-warning-200: #ffe893;
+  --primitive-warning-300: #ffd84a;
+  --primitive-warning-400: #ffc700;
+  --primitive-warning-500: #dd9200;
+  --primitive-danger-100: #ffeae7;
+  --primitive-danger-200: #ffd4ce;
+  --primitive-danger-300: #f89789;
+  --primitive-danger-400: #e6533e;
+  --primitive-danger-500: #da3520;
+  --primitive-functional-10: #666666;
+  --primitive-functional-10-opacity: rgba(102, 102, 102, 0);
+  --primitive-functional-09-opacity: rgba(149, 99, 58, 0);
+  --primitive-functional-08-opacity: rgba(172, 93, 164, 0);
+  --primitive-functional-07-opacity: rgba(53, 102, 172, 0);
+  --primitive-functional-06-opacity: rgba(7, 142, 216, 0);
+  --primitive-functional-05-opacity: rgba(6, 185, 186, 0);
+  --primitive-functional-07: #3566ac;
+  --primitive-functional-06: #078ed8;
+  --primitive-functional-04-opacity: rgba(23, 161, 76, 0);
+  --primitive-functional-04: #17a14c;
+  --primitive-functional-03-opacity: rgba(107, 188, 26, 0);
+  --primitive-functional-09: #95633a;
+  --primitive-functional-03: #6bbc1a;
+  --primitive-functional-02-opacity: rgba(234, 152, 21, 0);
+  --primitive-functional-05: #06b9ba;
+  --primitive-functional-02: #ea9815;
+  --primitive-functional-01-opacity: rgba(226, 101, 101, 0);
+  --primitive-functional-08: #ac5da4;
+  --primitive-functional-01: #e26565;
+  --usage-status-optional: #636b6f;
+  --usage-status-ok: #82cd17;
+  --usage-status-required: #e6533e;
+  --usage-overlay-default-60: rgba(0, 0, 0, 0.6);
+  --usage-overlay-default-20: rgba(0, 0, 0, 0.2);
+  --usage-form-error-text: #da3520;
+  --usage-form-focus-0: rgba(132, 224, 248, 0);
+  --usage-form-focus-20: rgba(132, 224, 248, 0.2);
+  --usage-form-focus-40: rgba(132, 224, 248, 0.4);
+  --usage-form-error-border: #f89789;
+  --usage-form-default-bg: #f5f6f6;
+  --usage-form-border: #b2b6b8;
+  --usage-form-icon-sub: #b2b6b8;
+  --usage-form-disabled-bg: #e0e2e3;
+  --usage-form-border-sub: #ced1d2;
+  --usage-form-error-bg: #ffeae7;
+  --usage-form-icon-main: #636b6f;
+  --usage-form-focus-border: #84e0f8;
+  --usage-form-placeholder: #b2b6b8;
+  --usage-opacity-textlink-hover: 4rem;
+  --usage-opacity-disabled: 3rem;
+  --usage-border: #e0e2e3;
+  --usage-button-primary: #008ec1;
+  --usage-button-primary-hover: #1c5291;
+  --usage-button-disabled: #b2b6b8;
+  --usage-button-accent: #009191;
+  --usage-button-accent-hover: #006b6b;
+  --usage-button-destructive: #e6533e;
+  --usage-button-destructive-hover: #c01600;
+  --usage-section-border: #ced1d2;
+  --usage-background: #f5f6f6;
+  --usage-table-bg: #f5f6f6;
+  --usage-table-hover: #e8fafe;
+  --usage-calendar-01: #e26565;
+  --usage-calendar-others: #666666;
+  --usage-calendar-02: #ea9815;
+  --usage-calendar-03: #6bbc1a;
+  --usage-calendar-04: #17a14c;
+  --usage-calendar-05: #06b9ba;
+  --usage-calendar-07: #3566ac;
+  --usage-calendar-08: #ac5da4;
+  --usage-calendar-09: #95633a;
+  --usage-calendar-06: #078ed8;
+  --usage-calendar-01-opacity: rgba(226, 101, 101, 0);
+  --usage-calendar-02-opacity: rgba(234, 152, 21, 0);
+  --usage-calendar-03-opacity: rgba(107, 188, 26, 0);
+  --usage-calendar-04-opacity: rgba(23, 161, 76, 0);
+  --usage-calendar-05-opacity: rgba(6, 185, 186, 0);
+  --usage-calendar-06-opacity: rgba(7, 142, 216, 0);
+  --usage-calendar-07-opacity: rgba(53, 102, 172, 0);
+  --usage-calendar-08-opacity: rgba(172, 93, 164, 0);
+  --usage-calendar-09-opacity: rgba(149, 99, 58, 0);
+  --usage-calendar-others-opacity: rgba(102, 102, 102, 0);
+  --usage-calendar-today-bg: #fffae4;
+  --usage-calendar-sat: #008ec1;
+  --usage-calendar-sun: #e6533e;
+  --usage-calendar-cancel-bg: #eceded;
+  --usage-calendar-cancel-text: #959b9d;
+  --usage-active-border: #84e0f8;
+  --usage-active-bg: #e8fafe;
+  --usage-preview-bg: #f9fafa;
+  --usage-active-bg-0: rgba(232, 250, 254, 0);
+  --usage-card-bg: #f5f6f6;
+  --usage-icon-neutral: #636b6f;
+  --usage-icon-neutral-disabled: #ced1d2;
+  --white: #ffffff;
+  --neutral-850: #373f43;
+  --body-text: #303538;
+  --theme: #008ec1;
+  --text-link: #0074ad;
+  --font-weight-bold: Bold;
+  --font-weight-regular: Regular;
+  --font-weight-extrabold: ExtraBold;
+  --font-family-number: Roboto;
+  --font-family-default: Noto Sans JP;
+  --font-family-price: Sofia Sans Condensed;
+  --font-family-information: A P-OTF UD Shin Go Pr6N;
+  --font-size-usage-pagetitle: 2.8rem;
+  --font-size-usage-title-lg: 2.4rem;
+  --font-size-usage-title-md: 2rem;
+  --font-size-usage-title-sm: 1.6rem;
+  --font-size-usage-default: 1.4rem;
+  --font-size-usage-parts-md: 1.4rem;
+  --font-size-usage-parts-lg: 1.6rem;
+  --font-size-usage-parts-sm: 1.2rem;
+  --font-size-usage-caption: 1.2rem;
+  --font-size-usage-pagetitle-header: 2rem;
+  --font-size-alphanumeric-lg: 2rem;
+  --font-size-alphanumeric-md: 1.6rem;
+  --usage-floating: 1.6rem;
+  --usage-section-flame: 1.6rem;
+  --usage-modal-window: 1.6rem;
+  --usage-card: 0.8rem;
+  --usage-list-parts: 1.2rem;
+  --usage-table: 1.6rem;
+  --usage-tooltip: 0.4rem;
+  --usage-form: 0.4rem;
+  --usage-menu: 0.4rem;
+  --usage-timeline: 0.4rem;
+  --usage-button-s: 0.4rem;
+  --usage-button-m: 0.6rem;
+  --xl: 1.6rem;
+  --lg: 1.2rem;
+  --md: 0.8rem;
+  --sm: 0.6rem;
+  --xs: 0.4rem;
+  --usage-section-row-gap: 1.6rem;
+  --usage-contents-row-gap: 0.8rem;
+  --usage-page-row-gap: 1.6rem;
+  --usage-contents-column-gap: 2.4rem;
+  --usage-section-column-gap: 1.6rem;
+  --usage-page-padding: 1.6rem;
+  --usage-page-column-gap: 1.6rem;
+  --usage-section-padding: 2.4rem;
+  --usage-title-l-bottom: 2.4rem;
+  --usage-title-m-bottom: 1.6rem;
+  --usage-section-m-gap: 4.8rem;
+  --usage-section-l-gap: 8rem;
+  --usage-paragraph-gap: 1.6rem;
+  --usage-contents-row-gap-nodivider: 4.8rem;
+  --usage-form-column-gap-xs: 0.4rem;
+  --usage-form-column-gap-xl: 4.8rem;
+  --usage-form-column-gap-md: 1.6rem;
+  --usage-form-column-gap-sm: 0.8rem;
+  --usage-form-column-gap-lg: 2.4rem;
+  --usage-table-column-gap: 6.4rem;
+  --usage-modal-padding: 3.2rem;
+  --parts-gap-column-sm: 0.8rem;
+  --parts-gap-column-md: 1.6rem;
+  --parts-gap-column-lg: 2.4rem;
+  --parts-gap-column-xl: 3.2rem;
+  --parts-gap-column-xs: 0.4rem;
+  --parts-gap-row-sm: 0.8rem;
+  --parts-gap-row-md: 1.6rem;
+  --parts-gap-row-xs: 0.4rem;
+  --parts-gap-row-xl: 3.2rem;
+  --parts-gap-column-2xs: 0.2rem;
+  --parts-gap-column-2xl: 4.8rem;
+  --parts-gap-row-lg: 2.4rem;
+  --primitive-spacing-spacing-2: 0.2rem;
+  --primitive-spacing-spacing-4: 0.4rem;
+  --primitive-spacing-spacing-6: 0.6rem;
+  --primitive-spacing-spacing-8: 0.8rem;
+  --primitive-spacing-spacing-12: 1.2rem;
+  --primitive-spacing-spacing-16: 1.6rem;
+  --primitive-spacing-spacing-24: 2.4rem;
+  --primitive-spacing-spacing-32: 3.2rem;
+  --primitive-spacing-spacing-40: 4rem;
+  --primitive-spacing-spacing-48: 4.8rem;
+  --primitive-spacing-spacing-56: 5.6rem;
+  --primitive-spacing-spacing-64: 6.4rem;
+  --primitive-spacing-spacing-72: 7.2rem;
+  --primitive-spacing-spacing-80: 8rem;
+  --primitive-spacing-spacing-96: 9.6rem;
+  --primitive-spacing-spacing-120: 12rem;
+  --primitive-spacing-spacing-200: 20rem;
+  --primitive-radius-radius-2: 0.2rem;
+  --primitive-radius-radius-4: 0.4rem;
+  --primitive-radius-radius-6: 0.6rem;
+  --primitive-radius-radius-12: 1.2rem;
+  --primitive-radius-radius-16: 1.6rem;
+  --primitive-radius-radius-999: 99.9rem;
+  --primitive-radius-radius-24: 2.4rem;
+  --primitive-radius-radius-32: 3.2rem;
+  --primitive-radius-radius-8: 0.8rem;
+  --primitive-fontsize-fontsize-8: 0.8rem;
+  --primitive-fontsize-fontsize-10: 1rem;
+  --primitive-fontsize-fontsize-12: 1.2rem;
+  --primitive-fontsize-fontsize-14: 1.4rem;
+  --primitive-fontsize-fontsize-16: 1.6rem;
+  --primitive-fontsize-fontsize-18: 1.8rem;
+  --primitive-fontsize-fontsize-20: 2rem;
+  --primitive-fontsize-fontsize-22: 2.2rem;
+  --primitive-fontsize-fontsize-24: 2.4rem;
+  --primitive-fontsize-fontsize-28: 2.8rem;
+  --primitive-fontsize-fontsize-32: 3.2rem;
+  --primitive-fontsize-fontsize-40: 4rem;
+  --primitive-fontsize-fontsize-48: 4.8rem;
+  --primitive-fontsize-fontsize-36: 3.6rem;
+}
+