sparkle-design-cli/templates/sparkle-variables/sparkle-design.template.css

Sparkle Design CSS Generator - デザインシステムCSSを設定ファイルから生成するツール

/* フォントのインポート */
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,0..200");
@import url("https://fonts.googleapis.com/css2?family={{FONT_PRO_URL}}:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family={{FONT_MONO_URL}}:wght@400;700&display=swap");

/* Primitive Tokens */
:root {
  /* 色 */
  /* {{COLOR_TOKENS}} */

  /* 角丸変数 */
  --radius-none: 0; /* 0px */
  --radius-xs: 0.125rem;  /* 2px */
  --radius-sm: 0.25rem;  /* 4px */
  --radius-md: 0.375rem;  /* 6px */
  --radius-lg: 0.5rem;  /* 8px */
  --radius-xl: 0.75rem;  /* 12px */
  --radius-2xl: 1rem;  /* 16px */
  --radius-3xl: 1.5rem;  /* 24px */
  --radius-full: 9999px;

  /* タイポグラフィ変数 */
  /* フォントファミリー */
  --font-family-pro: "{{FONT_PRO}}", sans-serif;
  --font-family-mono: "{{FONT_MONO}}", monospace;
  --font-family-icon: "Material Symbols Rounded";

  /* フォントサイズ */
  --font-size-12: 0.75rem; /* 12px */
  --font-size-14: 0.875rem; /* 14px */
  --font-size-16: 1rem; /* 16px */
  --font-size-18: 1.125rem; /* 18px */
  --font-size-20: 1.25rem; /* 20px */
  --font-size-24: 1.5rem; /* 24px */
  --font-size-28: 1.75rem; /* 28px */
  --font-size-32: 2rem; /* 32px */
  --font-size-36: 2.25rem; /* 36px */
  --font-size-42: 2.625rem; /* 42px */
  --font-size-48: 3rem; /* 48px */
  --font-size-54: 3.375rem; /* 54px */

  /* 行の高さ */
  --line-height-20: 1.25rem; /* 20px */
  --line-height-24: 1.5rem; /* 24px */
  --line-height-28: 1.75rem; /* 28px */
  --line-height-32: 2rem; /* 32px */
  --line-height-36: 2.25rem; /* 36px */
  --line-height-44: 2.75rem; /* 44px */
  --line-height-48: 3rem; /* 48px */
  --line-height-56: 3.5rem; /* 56px */
  --line-height-64: 4rem; /* 64px */
  --line-height-72: 4.5rem; /* 72px */
  --line-height-84: 5.25rem; /* 84px */
  --line-height-leading-none: 1; /* アイコン用 */

  /* 文字間隔 */
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em; /* 2.5% */
  --letter-spacing-wider: 0.05em; /* 5% */
  --letter-spacing-widest: 0.1em; /* 10% */

  /* フォントウェイト */
  --font-weight-char-normal: 400;
  --font-weight-char-bold: 700;
  --font-weight-icon-fill-0: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
  --font-weight-icon-fill-1: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;

  /* シャドウ */
  /* Primitive */
  --shadow-none: 0px 0px 0px 0px #000;
  --shadow-2xs: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
  --shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
    0px 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0px 4px 6px -1px rgba(0, 0, 0, 0.1),
    0px 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0px 10px 15px -3px rgba(0, 0, 0, 0.1),
    0px 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* セマンティクスのトークン定義 */
@theme inline {
  /* セマンティクスカラー定義 */
  --color-neutral-50: var(--color-gray-50);
  --color-neutral-100: var(--color-gray-100);
  --color-neutral-200: var(--color-gray-200);
  --color-neutral-300: var(--color-gray-300);
  --color-neutral-400: var(--color-gray-400);
  --color-neutral-500: var(--color-gray-500);
  --color-neutral-600: var(--color-gray-600);
  --color-neutral-700: var(--color-gray-700);
  --color-neutral-800: var(--color-gray-800);
  --color-neutral-900: var(--color-gray-900);

  /* プライマリカラーは設定可能 */
  --color-primary-50: var(--color-{{PRIMARY}}-50);
  --color-primary-100: var(--color-{{PRIMARY}}-100);
  --color-primary-200: var(--color-{{PRIMARY}}-200);
  --color-primary-300: var(--color-{{PRIMARY}}-300);
  --color-primary-400: var(--color-{{PRIMARY}}-400);
  --color-primary-500: var(--color-{{PRIMARY}}-500);
  --color-primary-600: var(--color-{{PRIMARY}}-600);
  --color-primary-700: var(--color-{{PRIMARY}}-700);
  --color-primary-800: var(--color-{{PRIMARY}}-800);
  --color-primary-900: var(--color-{{PRIMARY}}-900);

  --color-secondary-50: var(--color-gray-50);
  --color-secondary-100: var(--color-gray-100);
  --color-secondary-200: var(--color-gray-200);
  --color-secondary-300: var(--color-gray-300);
  --color-secondary-400: var(--color-gray-400);
  --color-secondary-500: var(--color-gray-500);
  --color-secondary-600: var(--color-gray-600);
  --color-secondary-700: var(--color-gray-700);
  --color-secondary-800: var(--color-gray-800);
  --color-secondary-900: var(--color-gray-900);

  --color-info-50: var(--color-blue-50);
  --color-info-100: var(--color-blue-100);
  --color-info-200: var(--color-blue-200);
  --color-info-300: var(--color-blue-300);
  --color-info-400: var(--color-blue-400);
  --color-info-500: var(--color-blue-500);
  --color-info-600: var(--color-blue-600);
  --color-info-700: var(--color-blue-700);
  --color-info-800: var(--color-blue-800);
  --color-info-900: var(--color-blue-900);

  --color-success-50: var(--color-green-50);
  --color-success-100: var(--color-green-100);
  --color-success-200: var(--color-green-200);
  --color-success-300: var(--color-green-300);
  --color-success-400: var(--color-green-400);
  --color-success-500: var(--color-green-500);
  --color-success-600: var(--color-green-600);
  --color-success-700: var(--color-green-700);
  --color-success-800: var(--color-green-800);
  --color-success-900: var(--color-green-900);

  --color-warning-50: var(--color-yellow-50);
  --color-warning-100: var(--color-yellow-100);
  --color-warning-200: var(--color-yellow-200);
  --color-warning-300: var(--color-yellow-300);
  --color-warning-400: var(--color-yellow-400);
  --color-warning-500: var(--color-yellow-500);
  --color-warning-600: var(--color-yellow-600);
  --color-warning-700: var(--color-yellow-700);
  --color-warning-800: var(--color-yellow-800);
  --color-warning-900: var(--color-yellow-900);

  --color-negative-50: var(--color-red-50);
  --color-negative-100: var(--color-red-100);
  --color-negative-200: var(--color-red-200);
  --color-negative-300: var(--color-red-300);
  --color-negative-400: var(--color-red-400);
  --color-negative-500: var(--color-red-500);
  --color-negative-600: var(--color-red-600);
  --color-negative-700: var(--color-red-700);
  --color-negative-800: var(--color-red-800);
  --color-negative-900: var(--color-red-900);

  /* コンポーネントカラー定義 */
  --color-divider-low: var(--color-neutral-100);
  --color-divider-middle: var(--color-neutral-200);
  --color-divider-high: var(--color-neutral-300);
  --color-text-disabled: var(--color-neutral-200);
  --color-text-placeholder: var(--color-neutral-300);
  --color-text-low: var(--color-neutral-500);
  --color-text-middle: var(--color-neutral-700);
  --color-text-high: var(--color-neutral-900);
  --color-skeleton-fill: var(--color-neutral-200);

  /* ベースカラー（base） - gray と同等 */
  --color-base-50: var(--color-gray-50);
  --color-base-100: var(--color-gray-100);
  --color-base-200: var(--color-gray-200);
  --color-base-300: var(--color-gray-300);
  --color-base-400: var(--color-gray-400);
  --color-base-500: var(--color-gray-500);
  --color-base-600: var(--color-gray-600);
  --color-base-700: var(--color-gray-700);
  --color-base-800: var(--color-gray-800);
  --color-base-900: var(--color-gray-900);

  /* 角丸 - デフォルト値は設定可能 */
  --radius-divide: var(--radius-none);
  --radius-minimum: var(--radius-xs);
  --radius-notice: var(--radius-sm);
  --radius-action: var(--radius-{{RADIUS}});
  --radius-halfModal: var(--radius-lg);
  --radius-modal: var(--radius-xl);
  --radius-round: var(--radius-full);

  /* シャドウ */
  --shadow-base: var(--shadow-none);
  --shadow-flat: var(--shadow-2xs);
  --shadow-raise: var(--shadow-xs);
  --shadow-stick: var(--shadow-sm);
  --shadow-float: var(--shadow-md);
  --shadow-popout: var(--shadow-lg);
}

/* Figmaのテキストスタイル定義 */
@utility character-1-regular-pro {
  /* Character テキストスタイル */
  font-family: var(--font-family-pro);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-char-normal);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-20);
}
@utility character-1-regular-mono {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-char-normal);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-20);
}
@utility character-1-bold-pro {
  font-family: var(--font-family-pro);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-char-bold);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-20);
}
@utility character-1-bold-mono {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-char-bold);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-20);
}
@utility character-2-regular-pro {
  font-family: var(--font-family-pro);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-char-normal);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-24);
}
@utility character-2-regular-mono {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-char-normal);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-24);
}
@utility character-2-bold-pro {
  font-family: var(--font-family-pro);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-char-bold);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-24);
}
@utility character-2-bold-mono {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-char-bold);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-24);
}
@utility character-3-regular-pro {
  font-family: var(--font-family-pro);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-char-normal);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-24);
}
@utility character-3-regular-mono {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-char-normal);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-24);
}
@utility character-3-bold-pro {
  font-family: var(--font-family-pro);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-char-bold);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-24);
}
@utility character-3-bold-mono {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-char-bold);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-24);
}
@utility character-4-regular-pro {
  font-family: var(--font-family-pro);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-char-normal);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-28);
}
@utility character-4-regular-mono {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-char-normal);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-32);
}
@utility character-4-bold-pro {
  font-family: var(--font-family-pro);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-char-bold);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-28);
}
@utility character-4-bold-mono {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-char-bold);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-28);
}
@utility character-5-regular-pro {
  font-family: var(--font-family-pro);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-char-normal);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-28);
}
@utility character-5-regular-mono {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-char-normal);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-32);
}
@utility character-5-bold-pro {
  font-family: var(--font-family-pro);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-char-bold);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-32);
}
@utility character-5-bold-mono {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-char-bold);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-32);
}
@utility character-6-regular-pro {
  font-family: var(--font-family-pro);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-char-normal);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-36);
}
@utility character-6-regular-mono {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-char-normal);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-36);
}
@utility character-6-bold-pro {
  font-family: var(--font-family-pro);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-char-bold);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-36);
}
@utility character-6-bold-mono {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-char-bold);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-36);
}
@utility character-7-regular-pro {
  font-family: var(--font-family-pro);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-char-normal);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-44);
}
@utility character-7-regular-mono {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-char-normal);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-44);
}
@utility character-7-bold-pro {
  font-family: var(--font-family-pro);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-char-bold);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-44);
}
@utility character-7-bold-mono {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-char-bold);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-44);
}
@utility character-8-regular-pro {
  font-family: var(--font-family-pro);
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-char-normal);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-48);
}
@utility character-8-regular-mono {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-char-normal);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-48);
}
@utility character-8-bold-pro {
  font-family: var(--font-family-pro);
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-char-bold);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-48);
}
@utility character-8-bold-mono {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-char-bold);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-48);
}
@utility character-9-regular-pro {
  font-family: var(--font-family-pro);
  font-size: var(--font-size-36);
  font-weight: var(--font-weight-char-normal);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-56);
}
@utility character-9-regular-mono {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-36);
  font-weight: var(--font-weight-char-normal);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-56);
}
@utility character-9-bold-pro {
  font-family: var(--font-family-pro);
  font-size: var(--font-size-36);
  font-weight: var(--font-weight-char-bold);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-56);
}
@utility character-9-bold-mono {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-36);
  font-weight: var(--font-weight-char-bold);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-56);
}
@utility character-10-regular-pro {
  font-family: var(--font-family-pro);
  font-size: var(--font-size-42);
  font-weight: var(--font-weight-char-normal);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-64);
}
@utility character-10-regular-mono {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-42);
  font-weight: var(--font-weight-char-normal);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-64);
}
@utility character-10-bold-pro {
  font-family: var(--font-family-pro);
  font-size: var(--font-size-42);
  font-weight: var(--font-weight-char-bold);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-64);
}
@utility character-10-bold-mono {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-42);
  font-weight: var(--font-weight-char-bold);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-64);
}
@utility character-11-regular-pro {
  font-family: var(--font-family-pro);
  font-size: var(--font-size-48);
  font-weight: var(--font-weight-char-normal);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-72);
}
@utility character-11-regular-mono {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-48);
  font-weight: var(--font-weight-char-normal);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-72);
}
@utility character-11-bold-pro {
  font-family: var(--font-family-pro);
  font-size: var(--font-size-48);
  font-weight: var(--font-weight-char-bold);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-72);
}
@utility character-11-bold-mono {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-48);
  font-weight: var(--font-weight-char-bold);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-72);
}
@utility character-12-regular-pro {
  font-family: var(--font-family-pro);
  font-size: var(--font-size-54);
  font-weight: var(--font-weight-char-normal);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-84);
}
@utility character-12-regular-mono {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-54);
  font-weight: var(--font-weight-char-normal);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-84);
}
@utility character-12-bold-pro {
  font-family: var(--font-family-pro);
  font-size: var(--font-size-54);
  font-weight: var(--font-weight-char-bold);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-84);
}
@utility character-12-bold-mono {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-54);
  font-weight: var(--font-weight-char-bold);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-84);
}
@utility icon-1-fill-0 {
  /* アイコンスタイル */
  font-family: var(--font-family-icon);
  font-size: var(--font-size-12);
  font-variation-settings: var(--font-weight-icon-fill-0);
  letter-spacing: var(--letter-spacing-normal);
  line-height: var(--line-height-leading-none);
}
@utility icon-1-fill-1 {
  font-family: var(--font-family-icon);
  font-size: var(--font-size-12);
  font-variation-settings: var(--font-weight-icon-fill-1);
  letter-spacing: var(--letter-spacing-normal);
  line-height: var(--line-height-leading-none);
}
@utility icon-2-fill-0 {
  font-family: var(--font-family-icon);
  font-size: var(--font-size-14);
  font-variation-settings: var(--font-weight-icon-fill-0);
  letter-spacing: var(--letter-spacing-normal);
  line-height: var(--line-height-leading-none);
}
@utility icon-2-fill-1 {
  font-family: var(--font-family-icon);
  font-size: var(--font-size-14);
  font-variation-settings: var(--font-weight-icon-fill-1);
  letter-spacing: var(--letter-spacing-normal);
  line-height: var(--line-height-leading-none);
}
@utility icon-3-fill-0 {
  font-family: var(--font-family-icon);
  font-size: var(--font-size-16);
  font-variation-settings: var(--font-weight-icon-fill-0);
  letter-spacing: var(--letter-spacing-normal);
  line-height: var(--line-height-leading-none);
}
@utility icon-3-fill-1 {
  font-family: var(--font-family-icon);
  font-size: var(--font-size-16);
  font-variation-settings: var(--font-weight-icon-fill-1);
  letter-spacing: var(--letter-spacing-normal);
  line-height: var(--line-height-leading-none);
}
@utility icon-4-fill-0 {
  font-family: var(--font-family-icon);
  font-size: var(--font-size-18);
  font-variation-settings: var(--font-weight-icon-fill-0);
  letter-spacing: var(--letter-spacing-normal);
  line-height: var(--line-height-leading-none);
}
@utility icon-4-fill-1 {
  font-family: var(--font-family-icon);
  font-size: var(--font-size-18);
  font-variation-settings: var(--font-weight-icon-fill-1);
  letter-spacing: var(--letter-spacing-normal);
  line-height: var(--line-height-leading-none);
}
@utility icon-5-fill-0 {
  font-family: var(--font-family-icon);
  font-size: var(--font-size-20);
  font-variation-settings: var(--font-weight-icon-fill-0);
  letter-spacing: var(--letter-spacing-normal);
  line-height: var(--line-height-leading-none);
}
@utility icon-5-fill-1 {
  font-family: var(--font-family-icon);
  font-size: var(--font-size-20);
  font-variation-settings: var(--font-weight-icon-fill-1);
  letter-spacing: var(--letter-spacing-normal);
  line-height: var(--line-height-leading-none);
}
@utility icon-6-fill-0 {
  font-family: var(--font-family-icon);
  font-size: var(--font-size-24);
  font-variation-settings: var(--font-weight-icon-fill-0);
  letter-spacing: var(--letter-spacing-normal);
  line-height: var(--line-height-leading-none);
}
@utility icon-6-fill-1 {
  font-family: var(--font-family-icon);
  font-size: var(--font-size-24);
  font-variation-settings: var(--font-weight-icon-fill-1);
  letter-spacing: var(--letter-spacing-normal);
  line-height: var(--line-height-leading-none);
}
@utility icon-7-fill-0 {
  font-family: var(--font-family-icon);
  font-size: var(--font-size-28);
  font-variation-settings: var(--font-weight-icon-fill-0);
  letter-spacing: var(--letter-spacing-normal);
  line-height: var(--line-height-leading-none);
}
@utility icon-7-fill-1 {
  font-family: var(--font-family-icon);
  font-size: var(--font-size-28);
  font-variation-settings: var(--font-weight-icon-fill-1);
  letter-spacing: var(--letter-spacing-normal);
  line-height: var(--line-height-leading-none);
}
@utility icon-8-fill-0 {
  font-family: var(--font-family-icon);
  font-size: var(--font-size-32);
  font-variation-settings: var(--font-weight-icon-fill-0);
  letter-spacing: var(--letter-spacing-normal);
  line-height: var(--line-height-leading-none);
}
@utility icon-8-fill-1 {
  font-family: var(--font-family-icon);
  font-size: var(--font-size-32);
  font-variation-settings: var(--font-weight-icon-fill-1);
  letter-spacing: var(--letter-spacing-normal);
  line-height: var(--line-height-leading-none);
}
@utility icon-9-fill-0 {
  font-family: var(--font-family-icon);
  font-size: var(--font-size-36);
  font-variation-settings: var(--font-weight-icon-fill-0);
  letter-spacing: var(--letter-spacing-normal);
  line-height: var(--line-height-leading-none);
}
@utility icon-9-fill-1 {
  font-family: var(--font-family-icon);
  font-size: var(--font-size-36);
  font-variation-settings: var(--font-weight-icon-fill-1);
  letter-spacing: var(--letter-spacing-normal);
  line-height: var(--line-height-leading-none);
}
@utility icon-10-fill-0 {
  font-family: var(--font-family-icon);
  font-size: var(--font-size-42);
  font-variation-settings: var(--font-weight-icon-fill-0);
  letter-spacing: var(--letter-spacing-normal);
  line-height: var(--line-height-leading-none);
}
@utility icon-10-fill-1 {
  font-family: var(--font-family-icon);
  font-size: var(--font-size-42);
  font-variation-settings: var(--font-weight-icon-fill-1);
  letter-spacing: var(--letter-spacing-normal);
  line-height: var(--line-height-leading-none);
}
@utility icon-11-fill-0 {
  font-family: var(--font-family-icon);
  font-size: var(--font-size-48);
  font-variation-settings: var(--font-weight-icon-fill-0);
  letter-spacing: var(--letter-spacing-normal);
  line-height: var(--line-height-leading-none);
}
@utility icon-11-fill-1 {
  font-family: var(--font-family-icon);
  font-size: var(--font-size-48);
  font-variation-settings: var(--font-weight-icon-fill-1);
  letter-spacing: var(--letter-spacing-normal);
  line-height: var(--line-height-leading-none);
}
@utility icon-12-fill-0 {
  font-family: var(--font-family-icon);
  font-size: var(--font-size-54);
  font-variation-settings: var(--font-weight-icon-fill-0);
  letter-spacing: var(--letter-spacing-normal);
  line-height: var(--line-height-leading-none);
}
@utility icon-12-fill-1 {
  font-family: var(--font-family-icon);
  font-size: var(--font-size-54);
  font-variation-settings: var(--font-weight-icon-fill-1);
  letter-spacing: var(--letter-spacing-normal);
  line-height: var(--line-height-leading-none);
}