Commit @27bbef71be2dd252b9f7349eccbe3ecb358343a3

임동욱 08-12

feat: FoxTextButton·FoxLinkButton·FoxIconButton 추가

Figma btn-txt(106:2468) · btn-lnk(107:207) · btn-ico(400:6312) ·
btn-ico-toggle(404:5247)을 토큰만으로 옮긴다. 컴파일된 CSS에 원시
hex/px/rem 리터럴은 0건이다.

btn-ico와 btn-ico-toggle은 계열·크기·모양이 같고 켜짐 상태만 달라
FoxIconButton 하나로 합쳤다. 켜짐은 `aria-pressed`로 표시해 스타일 훅과
접근성 표시를 겸한다. 시안에 켜짐과 hover가 겹치는 조합이 없어(상태가 단일
축이다) 켜진 동안에는 켜짐 색이 유지된다.

FoxLinkButton은 href가 있으면 , 없으면

@27bbef71be2dd252b9f7349eccbe3ecb358343a3

229df21

27bbef7

@fox/README.md

--- @fox/README.md

+++ @fox/README.md

...	...	@@ -8,7 +8,7 @@
8	8	styles/ SCSS — 여기가 디자인의 전부입니다
9	9	index.scss 토큰 진입점 (앱이 한 번 @use)
10	10	components.scss 공용 컴포넌트 스타일 묶음 진입점
11		- _fox-button.scss 컴포넌트별 스타일 (개별 @use 가능)
	11	+ _fox-*.scss 컴포넌트별 스타일 (개별 @use 가능)
12	12	abstracts.scss 저작 진입점 — 함수·믹스인 (CSS 출력 0)
13	13	tokens/ 토큰 map = 단일 진실 공급원 (자동 생성)
14	14	_root.scss map → --fox-* 커스텀 프로퍼티
...	...	@@ -69,7 +69,7 @@
69	69	클래스명이 `fox-` 접두사 + BEM이라 전역에 풀어도 충돌하지 않습니다. Vue·Svelte·서버
70	70	템플릿·순수 HTML 어디서든 위 2~4번만 하고 마크업 계약을 지키면 같은 결과가 나옵니다.
71	71
72		-각 컴포넌트의 마크업 계약은 해당 스타일 파일 상단 주석에 있습니다. 버튼은 이렇습니다.
	72	+각 컴포넌트의 마크업 계약은 해당 스타일 파일 상단 주석에 있습니다. 버튼 네 종류는 이렇습니다.
73	73
74	74	```html
75	75	<button class="fox-button fox-button--primary fox-button--md">
...	...	@@ -77,10 +77,25 @@
77	77	<span class="fox-button__label">버튼</span>
78	78	<span class="fox-button__icon"><!-- svg (선택) --></span>
79	79	</button>
	80	+
	81	+<button class="fox-text-button fox-text-button--primary fox-text-button--md">
	82	+ <span class="fox-text-button__label">텍스트 버튼</span>
	83	+</button>
	84	+
	85	+<a href="…" class="fox-link-button fox-link-button--primary fox-link-button--md">
	86	+ <span class="fox-link-button__label">링크</span>
	87	+ <span class="fox-link-button__icon"><!-- svg (선택, 항상 라벨 뒤) --></span>
	88	+</a>
	89	+
	90	+<button class="fox-icon-button fox-icon-button--ghost fox-icon-button--md" aria-label="공유">
	91	+ <span class="fox-icon-button__icon"><!-- svg --></span>
	92	+</button>
80	93	```
81	94
82		-- 비활성은 네이티브 `disabled` 속성으로 표현합니다(별도 클래스 없음).
	95	+- 비활성은 네이티브 `disabled` 속성으로 표현합니다(별도 클래스 없음). 앵커에는 `disabled`가
	96	+ 없으므로 `aria-disabled="true"`를 쓰고 `href`를 뺍니다.
83	97	- 로딩은 앞 아이콘 자리에 `fox-button__spinner`를 두고 `disabled`를 함께 겁니다.
	98	+- 토글은 `fox-icon-button`에 `aria-pressed="true\|false"`를 더합니다.
84	99	- 아이콘 SVG는 `currentColor`로 그려야 계열별 색이 적용됩니다. 크기는 슬롯이 정합니다.
85	100
86	101	`core/`의 React 컴포넌트는 이 클래스를 조립해주는 얇은 래퍼일 뿐입니다 — 쓰지 않아도

27bbef7

@fox/core/components/fox-icon-button/fox-icon-button.tsx (added)

+++ @fox/core/components/fox-icon-button/fox-icon-button.tsx

...	...	@@ -0,0 +1,91 @@
	1	+"use client";
	2	+
	3	+import type { ReactNode, Ref } from "react";
	4	+import { cx } from "../../utils";
	5	+
	6	+export type FoxIconButtonType = "default" \| "ghost" \| "overlay";
	7	+export type FoxIconButtonSize = "lg" \| "md" \| "sm" \| "xsm";
	8	+
	9	+export interface FoxIconButtonProps {
	10	+ type?: FoxIconButtonType;
	11	+ size: FoxIconButtonSize;
	12	+ /** 네이티브 `type` — prop의 `type`이 시각 계열을 쓰므로 분리했다. */
	13	+ htmlType?: "button" \| "submit" \| "reset";
	14	+ /** 배치 조정용. 모양이 달라야 하면 여기 말고 `type`을 추가한다. */
	15	+ className?: string;
	16	+ /** `currentColor`로 그린 SVG여야 계열별 색이 적용된다. 크기는 슬롯이 정한다. */
	17	+ icon: ReactNode;
	18	+ /** 글자가 보이지 않으므로 `aria-label`이 된다. 무엇을 하는 버튼인지 적는다. */
	19	+ label: string;
	20	+ /**
	21	+ * 주면 토글 버튼이 된다(`aria-pressed`). 생략하면 일반 아이콘 버튼이다.
	22	+ * 호출부가 소유한다 — 버튼이 스스로 뒤집지 않는다.
	23	+ */
	24	+ active?: boolean;
	25	+ disabled?: boolean;
	26	+ /** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
	27	+ hidden?: boolean;
	28	+ onAction?: () => void;
	29	+ /** 포인터가 올라오면 `true`, 벗어나면 `false`. */
	30	+ onHoverChange?: (hovered: boolean) => void;
	31	+ ref?: Ref<HTMLButtonElement>;
	32	+}
	33	+
	34	+const TYPE_CLASS: Record<FoxIconButtonType, string> = {
	35	+ default: "fox-icon-button--default",
	36	+ ghost: "fox-icon-button--ghost",
	37	+ overlay: "fox-icon-button--overlay",
	38	+};
	39	+
	40	+const SIZE_CLASS: Record<FoxIconButtonSize, string> = {
	41	+ lg: "fox-icon-button--lg",
	42	+ md: "fox-icon-button--md",
	43	+ sm: "fox-icon-button--sm",
	44	+ xsm: "fox-icon-button--xsm",
	45	+};
	46	+
	47	+/**
	48	+ * @fox 아이콘 버튼. 상태를 갖지 않는다.
	49	+ *
	50	+ * `active`를 주면 토글로 동작한다 — 시안의 btn-ico와 btn-ico-toggle이 계열·크기·모양이
	51	+ * 같고 켜짐 상태만 다르므로 한 컴포넌트로 둔다.
	52	+ *
	53	+ * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
	54	+ * (또는 개별 파티셜)로 한 번 불러와야 한다.
	55	+ */
	56	+export function FoxIconButton({
	57	+ type = "default",
	58	+ size,
	59	+ htmlType = "button",
	60	+ className,
	61	+ icon,
	62	+ label,
	63	+ active,
	64	+ disabled = false,
	65	+ hidden = false,
	66	+ onAction,
	67	+ onHoverChange,
	68	+ ref,
	69	+}: FoxIconButtonProps) {
	70	+ if (hidden) {
	71	+ return null;
	72	+ }
	73	+
	74	+ return (
	75	+ <button
	76	+ ref={ref}
	77	+ type={htmlType}
	78	+ className={cx("fox-icon-button", TYPE_CLASS[type], SIZE_CLASS[size], className)}
	79	+ aria-label={label}
	80	+ aria-pressed={active}
	81	+ disabled={disabled}
	82	+ onClick={disabled ? undefined : onAction}
	83	+ onMouseEnter={onHoverChange ? () => onHoverChange(true) : undefined}
	84	+ onMouseLeave={onHoverChange ? () => onHoverChange(false) : undefined}
	85	+ >
	86	+ <span className="fox-icon-button__icon" aria-hidden="true">
	87	+ {icon}
	88	+ </span>
	89	+ </button>
	90	+ );
	91	+}

27bbef7

@fox/core/components/fox-icon-button/index.ts (added)

+++ @fox/core/components/fox-icon-button/index.ts

...	...	@@ -0,0 +1,6 @@
	1	+export {
	2	+ FoxIconButton,
	3	+ type FoxIconButtonProps,
	4	+ type FoxIconButtonType,
	5	+ type FoxIconButtonSize,
	6	+} from "./fox-icon-button";

27bbef7

@fox/core/components/fox-link-button/fox-link-button.tsx (added)

+++ @fox/core/components/fox-link-button/fox-link-button.tsx

...	...	@@ -0,0 +1,119 @@
	1	+"use client";
	2	+
	3	+import type { ReactNode, Ref } from "react";
	4	+import { cx } from "../../utils";
	5	+
	6	+export type FoxLinkButtonType = "primary" \| "secondary" \| "tertiary";
	7	+export type FoxLinkButtonSize = "lg" \| "md" \| "sm";
	8	+
	9	+export interface FoxLinkButtonProps {
	10	+ type?: FoxLinkButtonType;
	11	+ size: FoxLinkButtonSize;
	12	+ /** 주면 `<a>`, 없으면 `<button>`으로 렌더한다. 방문 색은 앵커에서만 켜진다. */
	13	+ href?: string;
	14	+ target?: string;
	15	+ /** 생략하고 `target="_blank"`를 주면 `noopener noreferrer`가 자동으로 붙는다. */
	16	+ rel?: string;
	17	+ /** 배치 조정용. 모양이 달라야 하면 여기 말고 `type`을 추가한다. */
	18	+ className?: string;
	19	+ /** 라벨 뒤에만 놓인다(시안에 앞 슬롯이 없다). 색은 라벨을 따라간다. */
	20	+ icon?: ReactNode;
	21	+ label: string;
	22	+ disabled?: boolean;
	23	+ /** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
	24	+ hidden?: boolean;
	25	+ onAction?: () => void;
	26	+ /** 포인터가 올라오면 `true`, 벗어나면 `false`. */
	27	+ onHoverChange?: (hovered: boolean) => void;
	28	+ ref?: Ref<HTMLAnchorElement \| HTMLButtonElement>;
	29	+}
	30	+
	31	+const TYPE_CLASS: Record<FoxLinkButtonType, string> = {
	32	+ primary: "fox-link-button--primary",
	33	+ secondary: "fox-link-button--secondary",
	34	+ tertiary: "fox-link-button--tertiary",
	35	+};
	36	+
	37	+const SIZE_CLASS: Record<FoxLinkButtonSize, string> = {
	38	+ lg: "fox-link-button--lg",
	39	+ md: "fox-link-button--md",
	40	+ sm: "fox-link-button--sm",
	41	+};
	42	+
	43	+/**
	44	+ * @fox 링크 버튼. 상태를 갖지 않는다.
	45	+ *
	46	+ * `href`를 주면 진짜 앵커라 새 탭 열기·주소 복사 같은 브라우저 기본 동작이 살아 있고
	47	+ * 방문 색(`:visited`)도 켜진다. 방문 여부는 브라우저만 알아 JS로는 읽을 수 없다.
	48	+ *
	49	+ * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
	50	+ * (또는 개별 파티셜)로 한 번 불러와야 한다.
	51	+ */
	52	+export function FoxLinkButton({
	53	+ type = "primary",
	54	+ size,
	55	+ href,
	56	+ target,
	57	+ rel,
	58	+ className,
	59	+ icon,
	60	+ label,
	61	+ disabled = false,
	62	+ hidden = false,
	63	+ onAction,
	64	+ onHoverChange,
	65	+ ref,
	66	+}: FoxLinkButtonProps) {
	67	+ if (hidden) {
	68	+ return null;
	69	+ }
	70	+
	71	+ const classes = cx("fox-link-button", TYPE_CLASS[type], SIZE_CLASS[size], className);
	72	+ const onMouseEnter = onHoverChange ? () => onHoverChange(true) : undefined;
	73	+ const onMouseLeave = onHoverChange ? () => onHoverChange(false) : undefined;
	74	+
	75	+ const body = (
	76	+ <>
	77	+ <span className="fox-link-button__label">{label}</span>
	78	+ {icon && (
	79	+ <span className="fox-link-button__icon" aria-hidden="true">
	80	+ {icon}
	81	+ </span>
	82	+ )}
	83	+ </>
	84	+ );
	85	+
	86	+ if (href !== undefined) {
	87	+ return (
	88	+ <a
	89	+ // 렌더 요소가 갈리므로 호출부가 넘긴 ref를 이 분기의 타입으로 좁힌다.
	90	+ ref={ref as Ref<HTMLAnchorElement>}
	91	+ // 비활성 앵커에는 href를 두지 않는다 — 포커스와 클릭이 함께 사라진다.
	92	+ href={disabled ? undefined : href}
	93	+ target={target}
	94	+ rel={rel ?? (target === "_blank" ? "noopener noreferrer" : undefined)}
	95	+ className={classes}
	96	+ aria-disabled={disabled \|\| undefined}
	97	+ onClick={disabled ? undefined : onAction}
	98	+ onMouseEnter={onMouseEnter}
	99	+ onMouseLeave={onMouseLeave}
	100	+ >
	101	+ {body}
	102	+ </a>
	103	+ );
	104	+ }
	105	+
	106	+ return (
	107	+ <button
	108	+ ref={ref as Ref<HTMLButtonElement>}
	109	+ type="button"
	110	+ className={classes}
	111	+ disabled={disabled}
	112	+ onClick={disabled ? undefined : onAction}
	113	+ onMouseEnter={onMouseEnter}
	114	+ onMouseLeave={onMouseLeave}
	115	+ >
	116	+ {body}
	117	+ </button>
	118	+ );
	119	+}

27bbef7

@fox/core/components/fox-link-button/index.ts (added)

+++ @fox/core/components/fox-link-button/index.ts

...	...	@@ -0,0 +1,6 @@
	1	+export {
	2	+ FoxLinkButton,
	3	+ type FoxLinkButtonProps,
	4	+ type FoxLinkButtonType,
	5	+ type FoxLinkButtonSize,
	6	+} from "./fox-link-button";

27bbef7

@fox/core/components/fox-text-button/fox-text-button.tsx (added)

+++ @fox/core/components/fox-text-button/fox-text-button.tsx

...	...	@@ -0,0 +1,90 @@
	1	+"use client";
	2	+
	3	+import type { ReactNode, Ref } from "react";
	4	+import { cx } from "../../utils";
	5	+
	6	+export type FoxTextButtonType = "primary" \| "secondary";
	7	+export type FoxTextButtonSize = "lg" \| "md" \| "sm" \| "xsm";
	8	+
	9	+export interface FoxTextButtonProps {
	10	+ type?: FoxTextButtonType;
	11	+ size: FoxTextButtonSize;
	12	+ /** 네이티브 `type` — prop의 `type`이 시각 계열을 쓰므로 분리했다. */
	13	+ htmlType?: "button" \| "submit" \| "reset";
	14	+ /** 배치 조정용. 모양이 달라야 하면 여기 말고 `type`을 추가한다. */
	15	+ className?: string;
	16	+ /** `currentColor`로 그린 SVG여야 계열별 색이 적용된다. 크기는 슬롯이 정한다. */
	17	+ leadingIcon?: ReactNode;
	18	+ trailingIcon?: ReactNode;
	19	+ label: string;
	20	+ disabled?: boolean;
	21	+ /** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
	22	+ hidden?: boolean;
	23	+ onAction?: () => void;
	24	+ /** 포인터가 올라오면 `true`, 벗어나면 `false`. */
	25	+ onHoverChange?: (hovered: boolean) => void;
	26	+ ref?: Ref<HTMLButtonElement>;
	27	+}
	28	+
	29	+const TYPE_CLASS: Record<FoxTextButtonType, string> = {
	30	+ primary: "fox-text-button--primary",
	31	+ secondary: "fox-text-button--secondary",
	32	+};
	33	+
	34	+const SIZE_CLASS: Record<FoxTextButtonSize, string> = {
	35	+ lg: "fox-text-button--lg",
	36	+ md: "fox-text-button--md",
	37	+ sm: "fox-text-button--sm",
	38	+ xsm: "fox-text-button--xsm",
	39	+};
	40	+
	41	+/**
	42	+ * @fox 텍스트 버튼. 배경 없이 글자만으로 동작을 나타낸다. 상태를 갖지 않는다.
	43	+ *
	44	+ * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
	45	+ * (또는 개별 파티셜)로 한 번 불러와야 한다.
	46	+ */
	47	+export function FoxTextButton({
	48	+ type = "primary",
	49	+ size,
	50	+ htmlType = "button",
	51	+ className,
	52	+ leadingIcon,
	53	+ trailingIcon,
	54	+ label,
	55	+ disabled = false,
	56	+ hidden = false,
	57	+ onAction,
	58	+ onHoverChange,
	59	+ ref,
	60	+}: FoxTextButtonProps) {
	61	+ if (hidden) {
	62	+ return null;
	63	+ }
	64	+
	65	+ return (
	66	+ <button
	67	+ ref={ref}
	68	+ type={htmlType}
	69	+ className={cx("fox-text-button", TYPE_CLASS[type], SIZE_CLASS[size], className)}
	70	+ disabled={disabled}
	71	+ onClick={disabled ? undefined : onAction}
	72	+ onMouseEnter={onHoverChange ? () => onHoverChange(true) : undefined}
	73	+ onMouseLeave={onHoverChange ? () => onHoverChange(false) : undefined}
	74	+ >
	75	+ {leadingIcon && (
	76	+ <span className="fox-text-button__icon" aria-hidden="true">
	77	+ {leadingIcon}
	78	+ </span>
	79	+ )}
	80	+
	81	+ <span className="fox-text-button__label">{label}</span>
	82	+
	83	+ {trailingIcon && (
	84	+ <span className="fox-text-button__icon" aria-hidden="true">
	85	+ {trailingIcon}
	86	+ </span>
	87	+ )}
	88	+ </button>
	89	+ );
	90	+}

27bbef7

@fox/core/components/fox-text-button/index.ts (added)

+++ @fox/core/components/fox-text-button/index.ts

...	...	@@ -0,0 +1,6 @@
	1	+export {
	2	+ FoxTextButton,
	3	+ type FoxTextButtonProps,
	4	+ type FoxTextButtonType,
	5	+ type FoxTextButtonSize,
	6	+} from "./fox-text-button";

229df21

27bbef7

@fox/core/components/index.ts

--- @fox/core/components/index.ts

+++ @fox/core/components/index.ts

...	...	@@ -1,1 +1,4 @@
1	1	export * from "./fox-button";
	2	+export * from "./fox-text-button";
	3	+export * from "./fox-link-button";
	4	+export * from "./fox-icon-button";

229df21

27bbef7

@fox/dev-test/component-registry.tsx

--- @fox/dev-test/component-registry.tsx

+++ @fox/dev-test/component-registry.tsx

...	...	@@ -1,5 +1,10 @@
1		-import type { ReactNode } from "react";
	1	+"use client";
	2	+
	3	+import { useState, type ReactNode } from "react";
2	4	import { FoxButton } from "../core/components/fox-button";
	5	+import { FoxTextButton } from "../core/components/fox-text-button";
	6	+import { FoxLinkButton } from "../core/components/fox-link-button";
	7	+import { FoxIconButton } from "../core/components/fox-icon-button";
3	8
4	9	export interface ComponentExample {
5	10	/** 해시 링크에 쓰이는 kebab-case 식별자. */
...	...	@@ -16,6 +21,67 @@
16	21	<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
17	22	<path d="M6 3l5 5-5 5" />
18	23	</svg>
	24	+ );
	25	+}
	26	+
	27	+function DemoStar() {
	28	+ return (
	29	+ <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
	30	+ <path d="M8 1.6l1.9 4 4.4.6-3.2 3 .8 4.3L8 11.5l-3.9 2 .8-4.3-3.2-3 4.4-.6z" />
	31	+ </svg>
	32	+ );
	33	+}
	34	+
	35	+// overlay 계열은 어두운 반투명 배경이라 밝은 바탕 위에서는 대비를 볼 수 없다.
	36	+function OnPhoto({ children }: { children: ReactNode }) {
	37	+ return (
	38	+ <span
	39	+ style={{
	40	+ display: "inline-flex",
	41	+ gap: "0.8rem",
	42	+ padding: "0.8rem",
	43	+ borderRadius: "0.8rem",
	44	+ backgroundImage: "url(https://picsum.photos/seed/picsum/200/300)",
	45	+ backgroundSize: "cover",
	46	+ }}
	47	+ >
	48	+ {children}
	49	+ </span>
	50	+ );
	51	+}
	52	+
	53	+// active는 호출부가 소유하므로 켜고 끄는 걸 보려면 예제가 상태를 들고 있어야 한다.
	54	+function IconToggleDemo() {
	55	+ const [on, setOn] = useState(false);
	56	+ return (
	57	+ <>
	58	+ <FoxIconButton
	59	+ size="md"
	60	+ type="default"
	61	+ label={on ? "즐겨찾기 해제" : "즐겨찾기"}
	62	+ icon={<DemoStar />}
	63	+ active={on}
	64	+ onAction={() => setOn((prev) => !prev)}
	65	+ />
	66	+ <FoxIconButton
	67	+ size="md"
	68	+ type="ghost"
	69	+ label={on ? "즐겨찾기 해제" : "즐겨찾기"}
	70	+ icon={<DemoStar />}
	71	+ active={on}
	72	+ onAction={() => setOn((prev) => !prev)}
	73	+ />
	74	+ <OnPhoto>
	75	+ <FoxIconButton
	76	+ size="md"
	77	+ type="overlay"
	78	+ label={on ? "즐겨찾기 해제" : "즐겨찾기"}
	79	+ icon={<DemoStar />}
	80	+ active={on}
	81	+ onAction={() => setOn((prev) => !prev)}
	82	+ />
	83	+ </OnPhoto>
	84	+ </>
19	85	);
20	86	}
21	87
...	...	@@ -90,4 +156,199 @@
90	156	},
91	157	],
92	158	},
	159	+ {
	160	+ id: "fox-text-button",
	161	+ name: "FoxTextButton",
	162	+ description:
	163	+ "Figma 시안(btn-txt, 컴포넌트 세트 106:2468)을 토큰만으로 옮겼습니다. 높이를 고정하지 않고 패딩과 line-height로만 크기를 잡습니다. lg만 상하 패딩과 간격이 한 단계 넓습니다.",
	164	+ variants: [
	165	+ {
	166	+ label: "계열 (type) — primary는 굵기가 한 단계 더 굵다",
	167	+ node: (
	168	+ <>
	169	+ <FoxTextButton size="md" type="primary" label="primary" />
	170	+ <FoxTextButton size="md" type="secondary" label="secondary" />
	171	+ </>
	172	+ ),
	173	+ },
	174	+ {
	175	+ label: "크기 (size)",
	176	+ node: (
	177	+ <>
	178	+ <FoxTextButton size="lg" label="lg" />
	179	+ <FoxTextButton size="md" label="md" />
	180	+ <FoxTextButton size="sm" label="sm" />
	181	+ <FoxTextButton size="xsm" label="xsm" />
	182	+ </>
	183	+ ),
	184	+ },
	185	+ {
	186	+ label: "아이콘",
	187	+ node: (
	188	+ <>
	189	+ <FoxTextButton size="md" label="leading" leadingIcon={<DemoIcon />} />
	190	+ <FoxTextButton size="md" label="trailing" trailingIcon={<DemoIcon />} />
	191	+ <FoxTextButton
	192	+ size="md"
	193	+ label="both"
	194	+ leadingIcon={<DemoIcon />}
	195	+ trailingIcon={<DemoIcon />}
	196	+ />
	197	+ </>
	198	+ ),
	199	+ },
	200	+ {
	201	+ label: "상태 — disabled",
	202	+ node: (
	203	+ <>
	204	+ <FoxTextButton size="md" label="normal" onAction={() => undefined} />
	205	+ <FoxTextButton size="md" label="disabled" disabled />
	206	+ <FoxTextButton size="md" type="secondary" label="disabled (secondary)" disabled />
	207	+ </>
	208	+ ),
	209	+ },
	210	+ ],
	211	+ },
	212	+ {
	213	+ id: "fox-link-button",
	214	+ name: "FoxLinkButton",
	215	+ description:
	216	+ "Figma 시안(btn-lnk, 컴포넌트 세트 107:207)을 토큰만으로 옮겼습니다. href를 주면 <a>, 없으면 <button>으로 렌더합니다. 방문 색은 브라우저가 실제 방문 기록으로만 켜므로 아래에서 링크를 한 번 눌러 돌아오면 색이 바뀝니다. tertiary만 평소에 밑줄이 없고 hover에서만 생깁니다.",
	217	+ variants: [
	218	+ {
	219	+ label: "계열 (type) — hover하면 tertiary에 밑줄이 생긴다",
	220	+ node: (
	221	+ <>
	222	+ <FoxLinkButton size="md" type="primary" label="primary" href="https://example.com" />
	223	+ <FoxLinkButton
	224	+ size="md"
	225	+ type="secondary"
	226	+ label="secondary"
	227	+ href="https://example.com"
	228	+ />
	229	+ <FoxLinkButton size="md" type="tertiary" label="tertiary" href="https://example.com" />
	230	+ </>
	231	+ ),
	232	+ },
	233	+ {
	234	+ label: "크기 (size)",
	235	+ node: (
	236	+ <>
	237	+ <FoxLinkButton size="lg" label="lg" href="https://example.com" />
	238	+ <FoxLinkButton size="md" label="md" href="https://example.com" />
	239	+ <FoxLinkButton size="sm" label="sm" href="https://example.com" />
	240	+ </>
	241	+ ),
	242	+ },
	243	+ {
	244	+ label: "아이콘 — 라벨 뒤에만 놓인다",
	245	+ node: (
	246	+ <>
	247	+ <FoxLinkButton size="lg" label="lg" href="https://example.com" icon={<DemoIcon />} />
	248	+ <FoxLinkButton size="md" label="md" href="https://example.com" icon={<DemoIcon />} />
	249	+ <FoxLinkButton size="sm" label="sm" href="https://example.com" icon={<DemoIcon />} />
	250	+ </>
	251	+ ),
	252	+ },
	253	+ {
	254	+ label: "href 없음 — <button>으로 렌더된다(방문 색이 켜지지 않는다)",
	255	+ node: (
	256	+ <>
	257	+ <FoxLinkButton size="md" label="onAction만" onAction={() => undefined} />
	258	+ <FoxLinkButton size="md" type="tertiary" label="tertiary" onAction={() => undefined} />
	259	+ </>
	260	+ ),
	261	+ },
	262	+ {
	263	+ label: "상태 — disabled (앵커는 href가 빠져 포커스·클릭이 함께 사라진다)",
	264	+ node: (
	265	+ <>
	266	+ <FoxLinkButton size="md" label="disabled (a)" href="https://example.com" disabled />
	267	+ <FoxLinkButton size="md" label="disabled (button)" disabled />
	268	+ </>
	269	+ ),
	270	+ },
	271	+ ],
	272	+ },
	273	+ {
	274	+ id: "fox-icon-button",
	275	+ name: "FoxIconButton",
	276	+ description:
	277	+ "Figma 시안(btn-ico 400:6312 + btn-ico-toggle 404:5247)을 토큰만으로 옮겼습니다. 두 시안이 계열·크기·모양이 같고 켜짐 상태만 달라 한 컴포넌트로 합쳤습니다 — active를 주면 토글(aria-pressed)이 됩니다. ghost는 테두리가 없는 대신 아이콘이 한 단계 큽니다.",
	278	+ variants: [
	279	+ {
	280	+ label: "계열 (type) — overlay는 사진 위에서 봐야 한다",
	281	+ node: (
	282	+ <>
	283	+ <FoxIconButton size="md" type="default" label="default" icon={<DemoIcon />} />
	284	+ <FoxIconButton size="md" type="ghost" label="ghost" icon={<DemoIcon />} />
	285	+ <OnPhoto>
	286	+ <FoxIconButton size="md" type="overlay" label="overlay" icon={<DemoIcon />} />
	287	+ </OnPhoto>
	288	+ </>
	289	+ ),
	290	+ },
	291	+ {
	292	+ label: "크기 (size) — default 계열",
	293	+ node: (
	294	+ <>
	295	+ <FoxIconButton size="lg" label="lg" icon={<DemoIcon />} />
	296	+ <FoxIconButton size="md" label="md" icon={<DemoIcon />} />
	297	+ <FoxIconButton size="sm" label="sm" icon={<DemoIcon />} />
	298	+ <FoxIconButton size="xsm" label="xsm" icon={<DemoIcon />} />
	299	+ </>
	300	+ ),
	301	+ },
	302	+ {
	303	+ label: "크기 (size) — ghost는 같은 상자에 아이콘만 한 단계 크다",
	304	+ node: (
	305	+ <>
	306	+ <FoxIconButton size="lg" type="ghost" label="lg" icon={<DemoIcon />} />
	307	+ <FoxIconButton size="md" type="ghost" label="md" icon={<DemoIcon />} />
	308	+ <FoxIconButton size="sm" type="ghost" label="sm" icon={<DemoIcon />} />
	309	+ <FoxIconButton size="xsm" type="ghost" label="xsm" icon={<DemoIcon />} />
	310	+ </>
	311	+ ),
	312	+ },
	313	+ {
	314	+ label: "토글 — 눌러서 켜고 끈다 (active)",
	315	+ node: <IconToggleDemo />,
	316	+ },
	317	+ {
	318	+ label: "토글 켜짐 고정 — 계열별 색 비교",
	319	+ node: (
	320	+ <>
	321	+ <FoxIconButton size="md" type="default" label="on" icon={<DemoStar />} active />
	322	+ <FoxIconButton size="md" type="ghost" label="on" icon={<DemoStar />} active />
	323	+ <OnPhoto>
	324	+ <FoxIconButton size="md" type="overlay" label="on" icon={<DemoStar />} active />
	325	+ </OnPhoto>
	326	+ </>
	327	+ ),
	328	+ },
	329	+ {
	330	+ label: "상태 — disabled (켜짐보다 우선한다)",
	331	+ node: (
	332	+ <>
	333	+ <FoxIconButton size="md" label="disabled" icon={<DemoIcon />} disabled />
	334	+ <FoxIconButton size="md" type="ghost" label="disabled" icon={<DemoIcon />} disabled />
	335	+ <FoxIconButton
	336	+ size="md"
	337	+ type="overlay"
	338	+ label="disabled"
	339	+ icon={<DemoIcon />}
	340	+ disabled
	341	+ />
	342	+ <FoxIconButton
	343	+ size="md"
	344	+ label="active + disabled"
	345	+ icon={<DemoStar />}
	346	+ active
	347	+ disabled
	348	+ />
	349	+ </>
	350	+ ),
	351	+ },
	352	+ ],
	353	+ },
93	354	];

27bbef7

@fox/styles/_fox-icon-button.scss (added)

+++ @fox/styles/_fox-icon-button.scss

...	...	@@ -0,0 +1,179 @@
	1	+// FoxIconButton — 시안: 관리자페이지 Figma btn-ico (400:6312) + btn-ico-toggle (404:5247)
	2	+//
	3	+// 두 시안은 계열·크기·모양이 같고 토글에만 `active` 상태가 하나 더 있다. 그래서 한 블록으로
	4	+// 두고, 켜짐은 `aria-pressed="true"`로 표시한다 — 토글 버튼의 표준 속성이라 스타일 훅과
	5	+// 접근성 표시를 겸한다.
	6	+//
	7	+// 마크업 계약 (React 밖 소비자용):
	8	+// <button class="fox-icon-button fox-icon-button--ghost fox-icon-button--md" aria-label="공유">
	9	+// <span class="fox-icon-button__icon">…svg…</span>
	10	+// </button>
	11	+// 토글이면 `aria-pressed="true\|false"`를 함께 준다. 아이콘만 있으므로 `aria-label`이 필수다.
	12	+// 아이콘 SVG는 `currentColor`로 그려야 계열별 색이 적용된다.
	13	+//
	14	+// 시안에 `active`와 hover·pressed가 겹치는 조합이 없어(상태가 단일 축이다) 켜진 동안에는
	15	+// 켜짐 색이 유지된다.
	16	+//
	17	+// 토큰이 아닌 값(FoxButton과 동일한 근거로 승인된 항목):
	18	+// - box-sizing / cursor / flex-shrink: 구조·상호작용 규칙.
	19	+// - `blur()`: backdrop-filter의 필수 함수 표기. 반지름은 토큰이다.
	20	+
	21	+@use "abstracts" as fox;
	22	+
	23	+.fox-icon-button {
	24	+ box-sizing: border-box;
	25	+ display: inline-flex;
	26	+ align-items: center;
	27	+ justify-content: center;
	28	+ border: none;
	29	+ cursor: pointer;
	30	+
	31	+ &:disabled {
	32	+ cursor: default;
	33	+ }
	34	+
	35	+ &__icon {
	36	+ display: inline-flex;
	37	+ flex-shrink: 0;
	38	+ align-items: center;
	39	+ justify-content: center;
	40	+ }
	41	+
	42	+ &__icon > * {
	43	+ inline-size: 100%;
	44	+ block-size: 100%;
	45	+ }
	46	+
	47	+ // ── 크기 (정사각형) ────────────────────────────────────────────────────────
	48	+ // 아이콘 슬롯은 ghost만 한 단계 크다. 테두리가 없는 만큼 시안이 아이콘을 키웠다.
	49	+ &--lg {
	50	+ inline-size: fox.form(height-lg);
	51	+ block-size: fox.form(height-lg);
	52	+ border-radius: fox.form(radius-lg);
	53	+
	54	+ .fox-icon-button__icon {
	55	+ inline-size: fox.icon(6);
	56	+ block-size: fox.icon(6);
	57	+ }
	58	+
	59	+ &.fox-icon-button--ghost .fox-icon-button__icon {
	60	+ inline-size: fox.icon(7);
	61	+ block-size: fox.icon(7);
	62	+ }
	63	+ }
	64	+
	65	+ &--md {
	66	+ inline-size: fox.form(height-md);
	67	+ block-size: fox.form(height-md);
	68	+ border-radius: fox.form(radius-md);
	69	+
	70	+ .fox-icon-button__icon {
	71	+ inline-size: fox.icon(5);
	72	+ block-size: fox.icon(5);
	73	+ }
	74	+
	75	+ &.fox-icon-button--ghost .fox-icon-button__icon {
	76	+ inline-size: fox.icon(6);
	77	+ block-size: fox.icon(6);
	78	+ }
	79	+ }
	80	+
	81	+ &--sm {
	82	+ inline-size: fox.form(height-sm);
	83	+ block-size: fox.form(height-sm);
	84	+ border-radius: fox.form(radius-sm);
	85	+
	86	+ .fox-icon-button__icon {
	87	+ inline-size: fox.icon(4);
	88	+ block-size: fox.icon(4);
	89	+ }
	90	+
	91	+ &.fox-icon-button--ghost .fox-icon-button__icon {
	92	+ inline-size: fox.icon(5);
	93	+ block-size: fox.icon(5);
	94	+ }
	95	+ }
	96	+
	97	+ &--xsm {
	98	+ inline-size: fox.form(height-xsm);
	99	+ block-size: fox.form(height-xsm);
	100	+ border-radius: fox.form(radius-xsm);
	101	+
	102	+ .fox-icon-button__icon {
	103	+ inline-size: fox.icon(3);
	104	+ block-size: fox.icon(3);
	105	+ }
	106	+
	107	+ &.fox-icon-button--ghost .fox-icon-button__icon {
	108	+ inline-size: fox.icon(4);
	109	+ block-size: fox.icon(4);
	110	+ }
	111	+ }
	112	+
	113	+ // ── 계열 ──────────────────────────────────────────────────────────────────
	114	+ &--default {
	115	+ border: fox.border(1) solid fox.color(button-default-border);
	116	+ background: fox.color(button-default-surface);
	117	+ color: fox.color(icon-neutral-default);
	118	+
	119	+ &:hover:not(:disabled) {
	120	+ background: fox.color(button-default-surface-hover);
	121	+ }
	122	+
	123	+ &:active:not(:disabled) {
	124	+ background: fox.color(button-default-surface-pressed);
	125	+ }
	126	+ }
	127	+
	128	+ &--ghost {
	129	+ background: fox.color(button-default-surface);
	130	+ color: fox.color(icon-neutral-default);
	131	+
	132	+ &:hover:not(:disabled) {
	133	+ background: fox.color(button-default-surface-hover);
	134	+ }
	135	+
	136	+ &:active:not(:disabled) {
	137	+ background: fox.color(button-default-surface-pressed);
	138	+ }
	139	+ }
	140	+
	141	+ &--overlay {
	142	+ background: fox.color(alpha-default-inverse50);
	143	+ backdrop-filter: blur(fox.backdrop(blur1));
	144	+ color: fox.color(icon-neutral-strong-inverse);
	145	+
	146	+ &:hover:not(:disabled),
	147	+ &:active:not(:disabled) {
	148	+ background: fox.color(alpha-default-inverse75);
	149	+ }
	150	+ }
	151	+
	152	+ // ── 켜짐 (토글) ────────────────────────────────────────────────────────────
	153	+ // 계열 hover·pressed 뒤에 와서 켜진 동안 색이 흔들리지 않는다.
	154	+ &--default[aria-pressed="true"]:not(:disabled) {
	155	+ border: none;
	156	+ background: fox.color(button-primary-surface);
	157	+ color: fox.color(icon-neutral-strong-inverse);
	158	+ }
	159	+
	160	+ // ghost는 배경이 그대로 투명하고 아이콘 색만 바뀐다.
	161	+ &--ghost[aria-pressed="true"]:not(:disabled) {
	162	+ background: fox.color(button-default-surface);
	163	+ color: fox.color(icon-theme-primary);
	164	+ }
	165	+
	166	+ &--overlay[aria-pressed="true"]:not(:disabled) {
	167	+ border: fox.border(1) solid fox.color(border-neutral-subtle);
	168	+ background: fox.color(action-default);
	169	+ color: fox.color(icon-theme-primary);
	170	+ }
	171	+}
	172	+
	173	+// 계열과 무관하게 같고 테두리·배경흐림이 없다.
	174	+.fox-icon-button:disabled {
	175	+ border: none;
	176	+ background: fox.color(button-disabled-surface);
	177	+ backdrop-filter: none;
	178	+ color: fox.color(icon-neutral-disabled-strong);
	179	+}

27bbef7

@fox/styles/_fox-link-button.scss (added)

+++ @fox/styles/_fox-link-button.scss

...	...	@@ -0,0 +1,123 @@
	1	+// FoxLinkButton — 시안: 관리자페이지 Figma btn-lnk (컴포넌트 세트 107:207)
	2	+//
	3	+// 마크업 계약 (React 밖 소비자용):
	4	+// <a href="…" class="fox-link-button fox-link-button--primary fox-link-button--md">
	5	+// <span class="fox-link-button__label">링크</span>
	6	+// <span class="fox-link-button__icon">…svg…</span> <!-- 선택, 항상 라벨 뒤 -->
	7	+// </a>
	8	+// href가 없으면 `<button>`으로 써도 되고, 그때는 `:visited`가 켜지지 않는다.
	9	+// 앵커의 비활성은 `disabled` 속성이 없으므로 `aria-disabled="true"`로 표시한다.
	10	+//
	11	+// 크기·계열과 무관하게 상자는 하나뿐이다 — 패딩·간격·모서리가 전부 같다.
	12	+//
	13	+// 토큰이 아닌 값(FoxButton과 동일한 근거로 승인된 항목):
	14	+// - line-height / letter-spacing: 시안 텍스트 스타일 label/*-strong의 값이나 Figma가
	15	+// 변수로 export하지 않는다.
	16	+// - box-sizing / cursor / white-space / flex-shrink / text-decoration: 구조·상호작용 규칙.
	17	+//
	18	+// 아이콘 크기: lg는 `icon/4`(고정 20px), md·sm은 `form/icon/sm`(PC 16 · 모바일 12)로
	19	+// 시안이 서로 다른 그룹에 바인딩해 두었다. 그대로 따른다.
	20	+
	21	+@use "abstracts" as fox;
	22	+
	23	+.fox-link-button {
	24	+ box-sizing: border-box;
	25	+ display: inline-flex;
	26	+ align-items: center;
	27	+ cursor: pointer;
	28	+ border: none;
	29	+ padding: fox.padding(1);
	30	+ border-radius: fox.form(radius-xsm);
	31	+ gap: fox.gap(1);
	32	+ background: fox.color(button-text-surface);
	33	+
	34	+ font-family: fox.font-family(body);
	35	+ font-weight: fox.font-weight(medium);
	36	+ line-height: 1;
	37	+ letter-spacing: -0.025em;
	38	+ white-space: nowrap;
	39	+ text-decoration: underline;
	40	+
	41	+ &__label {
	42	+ min-inline-size: 0;
	43	+ }
	44	+
	45	+ &__icon {
	46	+ display: inline-flex;
	47	+ flex-shrink: 0;
	48	+ align-items: center;
	49	+ justify-content: center;
	50	+ }
	51	+
	52	+ &__icon > * {
	53	+ inline-size: 100%;
	54	+ block-size: 100%;
	55	+ }
	56	+
	57	+ // ── 크기 ──────────────────────────────────────────────────────────────────
	58	+ &--lg {
	59	+ font-size: fox.font-size(label-lg);
	60	+
	61	+ .fox-link-button__icon {
	62	+ inline-size: fox.icon(4);
	63	+ block-size: fox.icon(4);
	64	+ }
	65	+ }
	66	+
	67	+ &--md {
	68	+ font-size: fox.font-size(label-md);
	69	+
	70	+ .fox-link-button__icon {
	71	+ inline-size: fox.form(icon-sm);
	72	+ block-size: fox.form(icon-sm);
	73	+ }
	74	+ }
	75	+
	76	+ &--sm {
	77	+ font-size: fox.font-size(label-sm);
	78	+
	79	+ .fox-link-button__icon {
	80	+ inline-size: fox.form(icon-sm);
	81	+ block-size: fox.form(icon-sm);
	82	+ }
	83	+ }
	84	+
	85	+ // ── 계열 ──────────────────────────────────────────────────────────────────
	86	+ &--primary {
	87	+ color: fox.color(font-theme-primary);
	88	+ }
	89	+
	90	+ &--secondary {
	91	+ color: fox.color(font-neutral-default);
	92	+ }
	93	+
	94	+ // tertiary만 평소에 밑줄이 없고 hover·pressed에서만 생긴다.
	95	+ &--tertiary {
	96	+ color: fox.color(font-neutral-default);
	97	+ text-decoration: none;
	98	+ }
	99	+
	100	+ &:hover:not([aria-disabled="true"]):not(:disabled) {
	101	+ background: fox.color(button-text-surface-hover);
	102	+ text-decoration: underline;
	103	+ }
	104	+
	105	+ &:active:not([aria-disabled="true"]):not(:disabled) {
	106	+ background: fox.color(button-text-surface-pressed);
	107	+ text-decoration: underline;
	108	+ }
	109	+
	110	+ // 방문 색은 계열과 무관하게 같다. `:visited`는 앵커에서만, 그리고 색만 적용된다.
	111	+ &:visited {
	112	+ color: fox.color(button-text-visited);
	113	+ }
	114	+}
	115	+
	116	+// 시안이 비활성 글자에도 `color/icon/neutral/disabled`를 쓴다(font 쪽이 아니다).
	117	+// 계열·`:visited`를 이기려면 특이도가 높아야 해 블록과 함께 지목한다.
	118	+.fox-link-button[aria-disabled="true"],
	119	+.fox-link-button:disabled {
	120	+ cursor: default;
	121	+ background: fox.color(button-text-surface);
	122	+ color: fox.color(icon-neutral-disabled);
	123	+}

27bbef7

@fox/styles/_fox-text-button.scss (added)

+++ @fox/styles/_fox-text-button.scss

...	...	@@ -0,0 +1,145 @@
	1	+// FoxTextButton — 시안: 관리자페이지 Figma btn-txt (컴포넌트 세트 106:2468)
	2	+//
	3	+// 마크업 계약 (React 밖 소비자용):
	4	+// <button class="fox-text-button fox-text-button--primary fox-text-button--md">
	5	+// <span class="fox-text-button__icon">…svg…</span> <!-- 선택 -->
	6	+// <span class="fox-text-button__label">버튼</span>
	7	+// <span class="fox-text-button__icon">…svg…</span> <!-- 선택 -->
	8	+// </button>
	9	+// 비활성은 네이티브 `disabled`. 아이콘 SVG는 `currentColor`로 그려야 계열별 색이 적용된다.
	10	+//
	11	+// 높이를 고정하지 않는다 — 시안이 패딩과 line-height로만 크기를 잡는다.
	12	+//
	13	+// 토큰이 아닌 값(FoxButton과 동일한 근거로 승인된 항목):
	14	+// - line-height / letter-spacing: 시안 텍스트 스타일 label/*-strong·em의 값이나 Figma가
	15	+// 변수로 export하지 않는다.
	16	+// - box-sizing / cursor / white-space / flex-shrink: 구조·상호작용 규칙.
	17	+//
	18	+// 아이콘 크기는 시안이 변수를 걸지 않아 리터럴(20/16/16/12px)로 나온다. 값이 정확히
	19	+// 일치하는 `icon-`(모드 무관)에 매핑했다. `form-icon-`은 PC에서 24/20/16/12라 어긋난다.
	20	+
	21	+@use "abstracts" as fox;
	22	+
	23	+.fox-text-button {
	24	+ box-sizing: border-box;
	25	+ display: inline-flex;
	26	+ align-items: center;
	27	+ justify-content: center;
	28	+ border: none;
	29	+ cursor: pointer;
	30	+ background: fox.color(button-text-surface);
	31	+
	32	+ font-family: fox.font-family(body);
	33	+ line-height: 1;
	34	+ letter-spacing: -0.025em;
	35	+ white-space: nowrap;
	36	+
	37	+ &:disabled {
	38	+ cursor: default;
	39	+ }
	40	+
	41	+ &__label {
	42	+ min-inline-size: 0;
	43	+ }
	44	+
	45	+ &__icon {
	46	+ display: inline-flex;
	47	+ flex-shrink: 0;
	48	+ align-items: center;
	49	+ justify-content: center;
	50	+ }
	51	+
	52	+ &__icon > * {
	53	+ inline-size: 100%;
	54	+ block-size: 100%;
	55	+ }
	56	+
	57	+ // ── 크기 ──────────────────────────────────────────────────────────────────
	58	+ // lg만 상하 패딩과 간격이 한 단계 넓다. 나머지는 네 방향이 같은 값이다.
	59	+ &--lg {
	60	+ padding-block: fox.padding(3);
	61	+ padding-inline: fox.padding(2);
	62	+ border-radius: fox.form(radius-sm);
	63	+ gap: fox.gap(2);
	64	+ font-size: fox.font-size(label-lg);
	65	+
	66	+ .fox-text-button__icon {
	67	+ inline-size: fox.icon(4);
	68	+ block-size: fox.icon(4);
	69	+ }
	70	+ }
	71	+
	72	+ &--md {
	73	+ padding: fox.padding(2);
	74	+ border-radius: fox.form(radius-sm);
	75	+ gap: fox.gap(1);
	76	+ font-size: fox.font-size(label-md);
	77	+
	78	+ .fox-text-button__icon {
	79	+ inline-size: fox.icon(3);
	80	+ block-size: fox.icon(3);
	81	+ }
	82	+ }
	83	+
	84	+ &--sm {
	85	+ padding: fox.padding(2);
	86	+ border-radius: fox.form(radius-sm);
	87	+ gap: fox.gap(1);
	88	+ font-size: fox.font-size(label-sm);
	89	+
	90	+ .fox-text-button__icon {
	91	+ inline-size: fox.icon(3);
	92	+ block-size: fox.icon(3);
	93	+ }
	94	+ }
	95	+
	96	+ &--xsm {
	97	+ padding: fox.padding(2);
	98	+ border-radius: fox.form(radius-sm);
	99	+ gap: fox.gap(1);
	100	+ font-size: fox.font-size(label-xsm);
	101	+
	102	+ .fox-text-button__icon {
	103	+ inline-size: fox.icon(2);
	104	+ block-size: fox.icon(2);
	105	+ }
	106	+ }
	107	+
	108	+ // ── 계열 ──────────────────────────────────────────────────────────────────
	109	+ // 계열은 색과 굵기만 바꾼다. 배경은 상태에 따라서만 달라진다.
	110	+ &--primary {
	111	+ font-weight: fox.font-weight(bold);
	112	+ color: fox.color(font-theme-primary);
	113	+
	114	+ .fox-text-button__icon {
	115	+ color: fox.color(icon-theme-primary-strong);
	116	+ }
	117	+ }
	118	+
	119	+ &--secondary {
	120	+ font-weight: fox.font-weight(medium);
	121	+ color: fox.color(font-neutral-default);
	122	+
	123	+ .fox-text-button__icon {
	124	+ color: fox.color(icon-neutral-default);
	125	+ }
	126	+ }
	127	+
	128	+ &:hover:not(:disabled) {
	129	+ background: fox.color(button-text-surface-hover);
	130	+ }
	131	+
	132	+ &:active:not(:disabled) {
	133	+ background: fox.color(button-text-surface-pressed);
	134	+ }
	135	+}
	136	+
	137	+// 계열과 무관하게 같다. 굵기는 계열 값을 유지한다(시안에서 disabled도 계열별로 다르다).
	138	+.fox-text-button:disabled {
	139	+ background: fox.color(button-text-surface);
	140	+ color: fox.color(font-neutral-disabled);
	141	+
	142	+ .fox-text-button__icon {
	143	+ color: fox.color(icon-neutral-disabled);
	144	+ }
	145	+}

229df21

27bbef7

@fox/styles/components.scss

--- @fox/styles/components.scss

+++ @fox/styles/components.scss

...	...	@@ -2,3 +2,6 @@
2	2	// 직접 @use 한다. 둘을 같이 써도 Sass가 모듈을 한 번만 로드해 중복되지 않는다.
3	3
4	4	@use "fox-button";
	5	+@use "fox-text-button";
	6	+@use "fox-link-button";
	7	+@use "fox-icon-button";

Add a comment

Open 0
Closed 0

List

Delete comment