Releases

Releases (릴리스)

Radix Themes의 릴리스 내역과 체인지로그예요.

출처: 문서

본문

3.1.3

  • 비제어(controlled) Checkbox 컴포넌트에서 indeterminate 지시자를 지원해요.

3.1.2

  • Grid 컴포넌트에 areas prop을 추가하고, 모든 레이아웃 컴포넌트(Box, Container, Flex, Grid, Section)에 gridArea prop을 추가해요.
  • DataList 컴포넌트에 overflow-wrap: anywhere 스타일을 추가해서 ID처럼 긴 값이 다음 줄로 끊어질 수 있게 해요.
  • indeterminate Checkbox 컴포넌트에서 indeterminate 지시자를 지원해요.

3.1.1

2024년 6월 21일

3.1.0

2024년 6월 20일

3.0.5

2024년 5월 16일

  • AlertDialog.Content와 Dialog.Content에 align, height, minHeight, maxHeight prop 추가

3.0.4

2024년 5월 15일

  • Radix Themes 패키지가 순환 의존성 때문에 webpack으로 번들되지 못하던 이슈 수정
  • Progress 컴포넌트에서 max prop 지원

3.0.3

2024년 5월 1일

  • 명시적 appearance="light" 또는 appearance="dark" 값과 조합할 때 테마 grayColor 설정이 효과가 없던 이슈 수정
  • 명시적 color 값을 사용할 때 Link가 자동 고대비 색상을 사용하던 회귀(regression) 수정
  • 회색 텍스트 안에 중첩될 때 Link가 올바른 텍스트 선택·포커스 색상을 사용하지 않던 회귀 수정
  • Link 탭 하이라이트 스타일 조정
  • 넘치는 텍스트 잘림(truncation) 레이아웃이 가능하도록 CheckboxGroup.Item과 RadioGroup.Item 조정
  • 실질적 효과가 없는 곳에서 불필요한 data-accent-color 속성 제거
  • color prop 정의의 내부 로직 재작업
  • TextField와 TextArea의 자동 채움(autofill) 및 비활성 색상 재작업
  • Spinner 컴포넌트를 위한 내부 --spinner-animation-duration CSS 변수 추가

3.0.2

2024년 4월 3일

  • CSS에서 불필요한 브라우저 접두사 제거, 번들 크기 17KB 감소
  • 색상 텍스트 안에 중첩될 때 Link가 자동 고대비 색상을 사용하지 않던 회귀 수정
  • button으로 렌더링될 때 Link의 호버 스타일이 표시되지 않던 회귀 수정
  • Firefox에서 TextArea가 연속 공백 시퀀스를 보존하지 않던 회귀 수정

3.0.1

2024년 3월 26일

  • reset 스타일시트의 구문 오류 수정
  • Safari에서 Checkbox size="1" 지시자 체크마크 정렬 수정
  • Safari에서 Checkbox와 Radio의 비활성 커서 스타일이 동작하지 않던 문제 수정

3.0.0

2024년 3월 23일

Radix Themes 3.0은 새로운 레이아웃 엔진, 11개의 새로운 컴포넌트, 그리고 완전한 ESM 지원을 제공해요. 공지 읽어보기.

업그레이드 가이드 (Upgrade guide)

이 릴리스는 여러 breaking change를 도입해요. 업그레이드하려면 아래 단계를 따라 주세요.

일반 (General)

  • 멀티파트 컴포넌트는 이제 명명된 파트를 내보내지 않아요. 대신 React Server Components에서 동작하도록 개정된 점 표기(dot notation)를 사용해 주세요. 예를 들어:
    • DialogRoot → Dialog.Root
    • DialogTrigger → Dialog.Trigger
    • DialogContent → Dialog.Content
    • …모든 멀티파트 컴포넌트에 동일하게:
      • AlertDialog
      • Callout
      • ContextMenu
      • Dialog
      • DropdownMenu
      • HoverCard
      • Popover
      • RadioGroup
      • Select
      • Table
      • Tabs
      • TextField
  • prop 정의나 헬퍼 같은 패키지 내부(internals)는 더 이상 루트 @radix-ui/themes import 엔트리 포인트에서 접근할 수 없어요.
    • 대신 @radix-ui/themes/props와 @radix-ui/themes/helpers에서 import하세요.

Props

  • 레이아웃 컴포넌트의 width와 height prop은 더 이상 space scale에 매핑되지 않아요. width·height prop 사용처를 찾아 대응하는 space scale 단계로 교체해 주세요:
    • width="1" → width="4px"
    • width="2" → width="8px"
    • width="3" → width="12px"
    • width="4" → width="16px"
    • width="5" → width="24px"
    • width="6" → width="32px"
    • width="7" → width="40px"
    • width="8" → width="48px"
    • width="9" → width="64px"
    • …height에도 동일하게 적용
    • 반응형 객체 구문도 함께 업데이트해야 해요
    • 하드코딩 값 대신 var(--space-1)부터 var(--space-9)를 사용할 수도 있어요.
  • 레이아웃 컴포넌트의 shrink와 grow prop 이름이 바뀌었어요
    • shrink → flexShrink
    • grow → flexGrow

색상 (Colors)

커스텀 컴포넌트에서 다음 토큰을 사용하고 있었다면 대응하는 참조를 교체해 주세요.

  • --color-surface-accent → --accent-surface
  • 고대비(contrast) 색상 이름이 바뀌었어요:
    • --accent-9-contrast → --accent-contrast
    • --red-9-contrast → --red-contrast
    • --pink-9-contrast → --pink-contrast
    • --blue-9-contrast → --blue-contrast
    • …모든 스케일에 동일하게 적용
  • 새로운 포커스 색상 스케일이 추가됐어요. 다음 토큰 이름을 바꿔 주세요:
    • --color-autofill-root → --focus-a3
    • --color-focus-root → --focus-8
    • --color-selection-root → --focus-a5
  • --gray-2-translucent와 대응하는 틴트 회색 색상이 제거됐어요.
    • 대신 --color-panel-translucent를 배경 블러(backdrop blur) 필터와 조합해 사용하세요.

컴포넌트 (Components)

  • AlertDialog, Dialog의 Content 부분에 이제 기본적으로 maxWidth="600px"가 적용돼요.
    • 이전 580px 값보다 약간 큽니다. 다른 너비가 필요한 다이얼로그를 쓴다면 maxWidth를 자신의 값으로 덮어쓰세요.
  • Badge에 새 size="3"가 추가되고, size="2"는 훨씬 작아졌으며, size="1" 크기는 조정됐어요.
    • size="2" 사용처를 size="3"으로 교체하세요.
  • Card의 내부 HTML 구조와 스타일이 재작업되어 이제 단일 HTML 노드를 렌더링해요. 스타일이나 동작을 오버라이드하기 위해 구현의 미세한 동작에 의존하고 있었다면 코드가 예상대로 동작하는지 확인해 주세요.
    • ghost 외 variant에서 Card의 배경색을 덮어써야 한다면, background-color를 직접 지정하는 대신 --card-background-color 변수를 사용하거나, Card의 첫 번째 자식으로 중첩된 <Inset p="current"> 요소에 배경색을 설정하세요.
    • asChild를 사용하거나 부모 컴포넌트에 asChild된 Card 인스턴스를 확인해 주세요. (추가 스타일이 없는 링크·버튼 카드의 일반적인 경우는 예상대로 동작해요.)
  • HoverCard와 Popover의 Content 부분에 이제 기본적으로 maxWidth="480px"이 적용돼요.
    • 더 넓은 너비가 필요한 팝오버·호버카드를 쓴다면 maxWidth를 자신의 값으로 덮어쓰세요.
  • RadioGroup의 내부 HTML 구조와 스타일이 재작업되어, Item 파트에 children을 전달할 때 선택적 텍스트 라벨을 표시하도록 설계됐어요. Root 파트는 이제 flex column 스타일과 간격을 제공해요.
    • 더 저수준의 제어가 필요하면 Radio 컴포넌트를 대신 사용할 수 있어요.
  • Section에 새 size="3"이 추가됐어요.
    • size="3"을 사용하던 모든 Section을 size="4"로 업데이트하세요.
  • Tabs와 TabNav 컴포넌트를 모두 지원하도록 Tabs의 문자/단어 간격 CSS 변수 이름이 바뀌었어요. 사용 중이었다면 새 값으로 이름을 바꿔 주세요:
    • --tabs-trigger-active-letter-spacing → --tab-active-letter-spacing
    • --tabs-trigger-active-word-spacing → --tab-active-word-spacing
    • --tabs-trigger-inactive-letter-spacing → --tab-inactive-letter-spacing
    • --tabs-trigger-inactive-word-spacing → --tab-inactive-word-spacing
  • TextField는 이제 Root와 Slot 2개의 파트만 가지며, Input 파트는 제거되고 props 전달 방식이 단순해졌어요.
    • TextField.Root 없이 사용된 모든 TextField.Input 파트는 TextField.Root로 이름을 바꿔야 해요.
    • TextField.Root 안에서 사용된 모든 TextField.Input 파트는 제거하고 그 props를 TextField.Root 파트에 직접 넣어야 해요.
    • TextField.Input의 오른쪽에 배치된 모든 TextField.Slot 파트에는 side="right" prop이 필요해요. 다만 하나의 TextField 안에 두 슬롯(왼쪽 하나, 오른쪽 하나)을 썼다면 조정이 필요 없어요. 그 경우 슬롯들이 자동으로 서로 다른 쪽에 배치되거든요.
    • 스타일이나 동작을 오버라이드하기 위해 구현의 미세한 동작에 의존하고 있었다면 코드가 예상대로 동작하는지 확인해 주세요.
  • Theme는 더 이상 body 배경색을 자동으로 설정하지 않아요. 배경색은 이제 루트 Theme가 기본으로 제공해요. CSS 변수 --color-page-background는 더 이상 사용할 수 없어요.
    • 대부분의 경우 .radix-themes 요소에서 제공하는 --color-background로 안전하게 교체할 수 있어요.
  • Tooltip의 Content 부분에 이제 기본적으로 maxWidth="360px"이 적용돼요.
    • 더 넓어야 하는 툴팁을 쓴다면 maxWidth를 자신의 값으로 덮어쓰세요.

전체 체인지로그 (Full changelog)

  • 일반 (General)
    • 패키지 구조
      • ESM 호환성 개선
      • 개별 컴포넌트 파트의 트리 셰이킹 개선
      • [Breaking] 멀티파트 컴포넌트의 명명된 내보내기 제거
        • 참고: 새 접근 방식은 서버 컴포넌트에서도 점 표기법이 안정적으로 동작하게 해 줘요.
      • [Breaking] 루트 @radix-ui/themes import 엔트리 포인트에서 컴포넌트 prop 정의와 내부 헬퍼를 제거하고, @radix-ui/themes/props와 @radix-ui/themes/helpers에서 내보내서 동일한 기법을 사용해 Radix Themes 위에 자신만의 컴포넌트 라이브러리를 만들 수 있게 해요.
      • 현대적 모듈 해석 규칙을 지원하지 못하는 복잡한 도구 설정을 위한 이스케이프 해치로, 패키지 내부에 직접 접근할 수 있게 하는 와일드카드 엔트리 포인트 추가
      • 고급 사용 사례를 위한 추가 CSS 파일 내보내기:
        • CSS 우선순위를 세밀하게 제어해야 할 때 개별 tokens.css, components.css, utilities.css 파일을 내보내요. 예를 들어 Radix Themes utilities.css는 자신의 CSS 뒤에, 그 외 나머지는 그 전에 import할 수 있어요.
        • 위에 더해, 어떤 색상을 import할지 커스터마이징할 수 있어요. tokens.css 대신 tokens/base.css와 tokens/colors/*.css를 import할 수 있는데, 여기서 *는 프로젝트에 필요한 accent·gray 색상 이름에 해당해요.
        • 레이아웃 컴포넌트(Box, Flex, Grid, Container, Section)의 스타일만 포함하는 layout.css를 내보내요. 위 사용 사례를 지원하기 위해 개별 layout/tokens.css, layout/components.css, layout/utilities.css 내보내기도 제공돼요.
    • Props
      • 모든 레이아웃 컴포넌트에 다음 props를 추가해요:
        • minWidth, maxWidth
        • minHeight, maxHeight
        • flexBasis, flexShrink, flexGrow
        • gridColumn, gridColumnStart, gridColumnEnd
        • gridRow, gridRowStart, gridRowEnd
        • overflow, overflowX, overflowY
      • 모든 레이아웃 props를 임의의 CSS 값을 허용하도록 재작업해요(반응형 객체 구문을 사용할 때도 포함). 임의 값을 지원하는 props는:
        • width, minWidth, maxWidth
        • height, minHeight, maxHeight
        • m, mx, my, mt, mr, mb, ml
        • p, px, py, pt, pr, pb, pl
        • inset, top, right, bottom, left
        • gap, gapX, gapY
        • flexBasis, flexShrink, flexGrow
        • gridColumn, gridColumnStart, gridColumnEnd
        • gridRow, gridRowStart, gridRowEnd
      • [Breaking] width와 height prop이 더 이상 space scale에 매핑되지 않아요. 대부분의 경우 width·height는 space scale로 설정되지 않았고, 그 때문에 IDE 자동완성 제안에서 space scale이 어색/오해를 불러일으켰거든요.
      • [Breaking] shrink와 grow prop을 flexShrink와 flexGrow로 이름 변경
      • 코드 편집기 제안이 가능하면 space scale 값만 사용하도록 레이아웃 props의 타입 시그니처를 업데이트해요. "auto"나 "100vw" 같은 CSS 키워드와 다른 값들은 여전히 수동 문자열 값으로 사용 가능해요.
      • 모든 레이아웃 props를 JSDoc으로 문서화
      • initial 키 없이 중단점 객체를 사용할 때 기본 prop 값이 적용되지 않던 반응형 props 이슈 수정
      • 커스텀 구현과 혼동을 피하기 위해 네이티브 HTML 요소에서 상속받는 color, defaultValue, defaultChecked 네이티브 속성을 제거
      • [Breaking] 모든 컴포넌트와 파트에서 asChild prop의 사용 가능성을 재작업
    • 색상
      • accent 색상을 받는 다른 컴포넌트 안에 중첩될 때 highContrast 텍스트 색상이 일관되게 동작하도록 보장
      • 모든 variant="soft" 메뉴 항목의 배경색 조정
      • [Breaking] --color-surface-accent를 --accent-surface로 이름 변경
      • [Breaking] --accent-9-contrast, --red-9-contrast, --pink-9-contrast, --blue-9-contrast 등을 --accent-contrast, --red-contrast, --pink-contrast, --blue-contrast 등으로 이름 변경
      • --gray-2-translucent와 대응하는 틴트 회색 색상 제거
      • --color-surface와 --color-panel-translucent 값 조정
      • [Breaking] --color-focus-root, --color-selection-root, --color-autofill-root를 포커스 색상 스케일(예: --focus-1 – --focus-12, --focus-a1 – --focus-a12)로 교체
    • 기타
      • 대부분의 애니메이션 속도 개선
      • 패딩이나 테두리 스타일이 있는 모든 요소가 box-sizing: border-box를 사용하도록 보장
      • 비활성 커서 스타일이 올바르게 적용되도록 보장
      • 반투명 패널에 블러 배경(backdrop blur) 필터 효과 추가
  • 11개의 새로운 컴포넌트
    • DataList
      • 텍스트 데이터를 키-값 쌍으로 표시하는 컴포넌트. 파트:
        • Root
        • Item
        • Label
        • Value
    • CheckboxGroup
      • 선택적 텍스트 라벨과 로빙 포커스가 있는 체크박스 그룹. 파트:
        • Root
        • Item
    • CheckboxCards
      • 목록에서 하나 이상의 값을 고를 수 있는 상호작용 카드 컴포넌트. 파트:
        • Root
        • Item
    • Progress
      • 작업 완료 정도를 나타내는 프로그레스 바 컴포넌트.
    • Radio
      • 라디오 입력으로 자신만의 레이아웃을 만들기 위한 단독 요소.
    • RadioCards
      • 목록에서 한 값을 고르는 상호작용 카드 컴포넌트. 파트:
        • Root
        • Item
    • Reset
      • 어떤 네이티브 HTML 요소의 스타일도 초기화하는 컴포넌트.
    • SegmentedControl
      • 여러 옵션 중 하나를 고르고 탭 같은 인터페이스를 제어하는 컴포넌트.
    • Skeleton
      • 어떤 UI 요소든 감싸 로딩 스켈레톤으로 바꿀 수 있는 컴포넌트. loading prop으로 자기 자신 또는 React Fragment를 조건적으로 렌더링할 수도 있어요.
    • Spinner
      • 로딩 스피너 컴포넌트. Skeleton처럼 어떤 UI 요소든 감쌀 수 있고, 조건적 loading prop으로 자신을 표시해요.
    • TabNav
      • Tabs의 대응이지만 페이지 내비게이션에 사용돼요. 일반 링크를 렌더링하고 로빙 포커스를 지원해요. 파트:
        • Root
        • Link
  • AlertDialog, Dialog
    • 절대 위치 자식 요소를 지원하도록 position: relative 추가
    • Content 부분에 width, minWidth, maxWidth prop 추가
    • Content 부분에 기본적으로 maxWidth="600px" 설정
    • 다이얼로그 Content 부분에 국한되지 않고 뷰포트에 스크롤바가 표시되도록 스크롤 컨테이너 재작업. 스타일·동작 오버라이드를 위해 구현의 미세한 동작에 의존했다면 코드가 예상대로 동작하는지 확인해 주세요.
  • Badge
    • user-select: none 제거
    • [Breaking] size="3" 추가, size="2"를 훨씬 작게, size="1" 크기 조정
  • Blockquote, Code, Em, Heading, Quote, Link, Strong, Text
    • 텍스트가 줄바꿈되는지, 말줄임표로 잘리는지 제어하는 새 wrap·truncate prop 추가
  • Card
    • 내부 HTML 구조와 스타일 재작업. 이 컴포넌트는 이제 단일 HTML 노드를 렌더링해요. 스타일·동작 오버라이드를 위해 구현의 미세한 동작에 의존했다면 코드가 예상대로 동작하는지 확인해 주세요.
  • Code
    • variant="ghost" 색상이 color prop으로 명시하지 않으면 색상을 상속하는 Text처럼 동작해요.
  • Container
    • 컨테이너 콘텐츠가 왼쪽·가운데·오른쪽 중 어디에 정렬될지 제어하는 align prop 추가
    • [Breaking] display="block" 값을 display="initial"로 변경 (이전 값은 깨져 있었음)
  • ContextMenu, DropdownMenu
    • CheckboxItem과 RadioItem 파트에 color prop 추가
  • Checkbox, RadioGroup, Switch
    • 내부 HTML 구조와 스타일 재작업. 이제 더 적은 HTML 노드를 렌더링하고 모든 props를 최상위 노드로 전달해요. 스타일·동작 오버라이드를 위해 구현의 미세한 동작에 의존했다면 코드가 예상대로 동작하는지 확인해 주세요.
  • DropdownMenu
    • Content 부분이 variant="soft"일 때 강조된 항목에 더 밝은 텍스트 색상 사용
    • 아래쪽 화살표 지시자를 렌더링하는 선택적 TriggerIcon 파트 추가
  • Box, Flex, Grid
    • span 또는 div로 렌더링하는 as prop 지원 추가
    • Box의 경우 태그와 무관하게 display: block 스타일이 강제 적용돼요.
  • Button, IconButton
    • 새 loading prop 추가
  • Flex
    • gapX와 gapY prop 추가
  • HoverCard, Popover
    • 절대 위치 자식 요소를 지원하도록 position: relative 추가
    • Content 부분에 width, minWidth, maxWidth, height, minHeight, maxHeight prop 추가
    • Content 부분에 기본적으로 maxWidth="480px" 설정
  • RadioGroup
    • [Breaking] 내부 HTML 구조와 스타일 재작업. Item 파트에 children을 전달하면 선택적 텍스트 라벨을 표시하도록 설계됐고, Root 파트는 flex column 스타일과 간격을 제공해요.
  • Section
    • [Breaking] display="block" 값을 display="initial"로 변경 (이전 값은 깨져 있었음)
    • [Breaking] size="3"에 새 값을 사용하고, size="4"에는 이전 값을 사용
  • Select
    • 감싸는 <label> 요소 같은 곳에서 Trigger 폰트 굵기가 상속되지 않도록 보장
  • Separator
    • orientation prop에 반응형 값 허용
  • ScrollArea
    • 부모의 auto 높이를 기준으로 Scroll Area가 100% 높이로 늘어나지 못하던 이슈 수정
  • Slider
    • Slider 트랙 크기에 맞도록 경계 박스 크기 변경
    • flex-shrink: 0을 flex-grow: 1와 width: stretch/height: stretch로 교체해 레이아웃에서 슬라이더 요소가 더 직관적으로 늘어나고 줄어들게 함
    • Safari의 과한 포커스 아웃라인 수정
  • Table
    • table-layout 스타일 속성을 제어하는 새 layout prop 추가
    • TableCell 파트의 width prop 타입 시그니처와 구현을 재작업된 레이아웃 컴포넌트 width prop과 정렬
    • TableCell 파트에 minWidth·maxWidth prop 추가
  • Tabs:
    • TabsList에 color·highContrast prop 추가
    • TabsList와 TabsContent에 margin props 추가
    • Tabs와 TabNav 컴포넌트를 모두 지원하도록 .radix-themes의 문자/단어 간격 CSS 변수 이름 변경
      • --tabs-trigger-active-letter-spacing → --tab-active-letter-spacing
      • --tabs-trigger-active-word-spacing → --tab-active-word-spacing
      • --tabs-trigger-inactive-letter-spacing → --tab-inactive-letter-spacing
      • --tabs-trigger-inactive-word-spacing → --tab-inactive-word-spacing
  • TextArea
    • radius prop 추가
    • resize prop 추가
    • Grammarly 확장이 컴포넌트 스타일을 깨뜨리던 이슈 수정
    • 감싸는 <label> 요소 같은 곳에서 폰트 굵기가 상속되지 않도록 보장
    • 내부 HTML 구조와 스타일 재작업. 스타일·동작 오버라이드를 위해 구현의 미세한 동작에 의존했다면 코드가 예상대로 동작하는지 확인해 주세요.
  • TextField
    • [Breaking] Input 파트를 제거해 props 전달을 단순화하고 내부 HTML 구조와 스타일 재작업.
    • 일부 input type이 getSelectionRange를 지원하지 않던 이슈 수정
    • Grammarly 확장이 컴포넌트 스타일을 깨뜨리던 이슈 수정
    • 감싸는 <label> 요소 같은 곳에서 폰트 굵기가 상속되지 않도록 보장
  • ThemePanel
    • Theme Panel 토글 단축키를 "T" 키 입력으로, 다크 모드를 "D" 키 입력으로 변경 (수식 키 없이).
  • Theme
    • 루트 Theme 컴포넌트에 min-height: 100vh 설정
    • 특정 상황에서 hasBackground prop 값이 효과가 없던 이슈 수정
    • Theme가 기본적으로 배경색을 가지는 조건을 정제. 명시적 hasBackground prop이 없는 Theme은 배경색을 표시해요:
      • 루트 Theme 컴포넌트일 때
      • 명시적 appearance 값이 있을 때, 예: <Theme apperance="light"> 또는 <Theme apperance="dark">
    • body 배경색이 더 이상 자동으로 설정되지 않아요. 배경색은 이제 루트 Theme이 기본으로 제공해요.
      • [Breaking] CSS 변수 --color-page-background는 더 이상 사용할 수 없어요.
      • html의 suppressHydrationWarning이 더 이상 필요 없어요 (next-themes 같은 다른 라이브러리에서 요구하지 않는 한).
    • 모든 Theme props를 JSDoc으로 문서화
  • Tooltip
    • width, minWidth, maxWidth prop 추가
    • 툴팁 콘텐츠에 기본적으로 maxWidth="360px" 설정
    • 기본 지연(delay) 시간을 200ms로 변경

2.0.2

2023년 12월 5일

  • Radix Themes 스타일시트에서 CSS inspector를 사용할 때 Chrome이 때때로 충돌하던 이슈 수정.

2.0.1

2023년 11월 14일

  • Card
    • color-mix를 지원하지 않는 브라우저에서 variant="surface" 테두리 색상이 사라질 수 있던 이슈 수정.
    • variant="surface" 테두리 색상 조정.
  • Code
    • Link 안에서 variant="ghost"가 사용될 때 Link의 underline="hover"가 존중되도록 보장.
  • TextField
    • 일반적인 폰트에서 세로 텍스트 정렬 개선.
    • input이 비활성일 때 자동 채움 accent 색상을 적용하지 않음.
    • 자동 채움 accent 색상이 항상 포커스 아웃라인 색상과 짝을 이루도록 보장.

2.0.0

2023년 10월 2일

이 버전의 문서 보기

  • 일반 (General)
    • CSS 빌드에서 셀렉터를 결합해 브라우저에서 요소를 검사할 때 개발자 경험 개선.
    • CSS 빌드에서 주석 제거.
    • CSS 셀렉터 특이도를 HTML 요소 스타일링에는 0,1,0, 의사 요소 스타일링에는 0,1,1로 제한해 Tailwind와의 호환성 개선.
      • [Upgrade guide] Radix Themes의 특이도 미세 동작에 의존하고 있었다면 스타일 오버라이드가 예상대로 동작하는지 확인하세요.
    • 다크 모드 색상 재작업, 라이트 모드 색상 정제 (Radix Colors 3.0.0 통해).
      • 과포화된 투명 회색 수정.
      • [Upgrade guide] 커스텀 스타일에 색상 토큰을 사용하고 있었다면 디자인이 예상대로 보이는지 확인하세요.
      • [Upgrade guide] 특정 색상을 오버라이드하고 있었다면 새 색상 스케일과 조화를 이루는지 확인하세요.
    • 투명 검정/흰색 색상 스케일 재작업.
      • [Upgrade guide] 커스텀 스타일에 투명 검정·흰색 스케일(--black-a1, --white-a1 등)을 사용하고 있었다면 새 값을 확인하고 사용 단계를 업데이트해 디자인이 예상대로 보이게 하세요:
        • --black-a1 → rgba(0, 0, 0, 0.01).
        • --black-a2 → rgba(0, 0, 0, 0.024).
        • --black-a3 → --black-a1.
        • --black-a4 → --black-a2.
        • --black-a5 → --black-a2.
        • --black-a6 → --black-a3.
        • --black-a7 → --black-a3 또는 --black-a4.
        • --black-a8 → --black-a5.
        • --black-a9 → --black-a6 또는 --black-a7.
        • --black-a10 → --black-a7.
        • --black-a11 → --black-a8.
        • --black-a12 → --black-a11.
        • --white-a1 → transparent.
        • --white-a2 → rgba(255, 255, 255, 0.01).
        • --white-a3 → --white-a1 또는 --white-a2.
        • --white-a4 → --white-a2.
        • --white-a5 → --white-a3.
        • --white-a6 → --white-a3 또는 --white-a4.
        • --white-a7 → --white-a4.
        • --white-a8 → --white-a5.
        • --white-a9 → --white-a6.
        • --white-a10 → --white-a7.
        • --white-a11 → --white-a9.
        • --white-a12 → --white-a11 또는 --white-a12.
    • 그림자 스케일 정제.
    • 대부분의 color="gray" 컴포넌트에서 텍스트 선택 색상처럼 테마 accent 색상을 포커스 링에 유지.
    • 명명 패턴을 따르도록 일부 내부 컴포넌트 전용 CSS 변수 변경.
    • Theme 컴포넌트에서 강제된 라이트/다크 appearance가 올바른 input 자동 채움 배경색 같은 브라우저 색상도 설정하도록 보장.
    • 모든 @keyframes 애니메이션을 rt- 접두사와 kebab-case로 이름 변경.
    • 대부분의 포커스 스타일에 box-shadow 대신 outline 사용. 포커스된 요소에서 Chrome의 미세한 안티앨리어싱 문제를 피함.
  • AlertDialog, Dialog
    • 다이얼로그 콘텐츠가 뷰포트 가장자리에 닿지 않도록 패딩 추가.
    • 다이얼로그 콘텐츠가 iOS에서 뷰포트를 넘치지 않도록 보장.
  • Avatar
    • fallback 아이콘 크기를 강제하지 않음.
      • [Upgrade guide] svg 자산을 fallback으로 사용했다면 크기를 수동으로 적절히 설정하세요.
    • 상호작용 요소의 커서 스타일을 제어하는 CSS 변수 추가:
      • --cursor-button: default;
      • --cursor-checkbox: default;
      • --cursor-disabled: not-allowed;
      • --cursor-link: pointer;
      • --cursor-menu-item: default;
      • --cursor-radio: default;
      • --cursor-slider-thumb: default;
      • --cursor-slider-thumb-active: default;
      • --cursor-switch: default;
    • .rt-reset-button와 .rt-reset-a 클래스를 단일 .rt-reset 클래스로 교체.
      • 새 .rt-reset 클래스는 커스텀 컴포넌트를 만들 때 a, button, h1, h2, h3, h4, h5, h6, ol, ul, p, pre 태그를 초기화하는 데 사용할 수 있어요.
      • [Upgrade guide] 커스텀 컴포넌트에서 이 클래스들을 사용했다면 사용 클래스 이름을 업데이트하세요.
  • Blockquote
    • [Breaking] trim prop 제거.
  • Button, IconButton
    • 비활성 상태의 모습과 느낌 정제·표준화.
    • disabled를 asChild와 함께 사용할 때 다른 요소에도 비활성 스타일 적용.
    • 라이트·다크 모드에서 다양한 accent 색상에 걸쳐 variant="classic" 모습·느낌 개선.
  • Callout
    • Callout.Root 안에 여러 Callout.Text 요소를 중첩할 수 있도록 레이아웃 동작 조정.
      • [Upgrade guide] Callout.Root가 flex 속성을 제공하던 것에 의존했다면 Flex 컴포넌트를 명시적으로 사용하도록 레이아웃을 바꾸세요.
    • 명시적 color prop 없이 호출아웃이 텍스트 색상을 상속하던 이슈 수정.
      • [Upgrade guide] 이전 모습을 선호한다면 호출아웃에 highContrast prop을 전달해 텍스트를 더 어둡게 하세요.
    • 회색 variant="surface"에 회색 배경 사용.
    • variant="outline"에 더 어두운 아웃라인 색상 사용.
  • Checkbox
    • [Breaking] 체크박스를 Text 컴포넌트로 감싸면 텍스트 첫 줄과 자동으로 정렬되도록 레이아웃 개선.
      • [Upgrade guide] 체크박스가 있는 레이아웃이 예상대로 보이는지 확인하세요. 그렇지 않다면 원하는 텍스트 크기로 체크박스를 <Text as="label" size="...">로 감싸세요.
    • [Breaking] 크기 재작업 – 더 작은 size="1" 추가, 기본 크기를 size="2"로, 더 정제된 size="3" 추가.
      • [Upgrade guide] 명시적 size prop으로 size="1"·size="2" 체크박스를 사용했다면 각각 size="2"·size="3"으로 이름을 바꾸세요.
    • variant="classic" 모습·느낌 정제.
    • 비활성 상태의 모습·느낌 정제·표준화.
  • Card
    • variant="classic" 그림자가 요소 밖으로 나가지 않도록 업데이트.
    • variant="classic"의 호버·누름 스타일 정제.
    • 누락된 누름 스타일 추가.
    • 내부 그림자가 컴포넌트 바깥 배경과 어우러지도록 적용 방식 정제.
  • Code
    • Code가 Link 안에 있을 때 상호작용 스타일 추가.
    • 폰트 크기가 부모 Text 요소에서 왔는지 Code 자체의 size prop에서 왔는지에 따라 variant="ghost" 폰트 크기가 불일치하던 이슈 수정.
    • variant="outline"과 variant="surface"에서 폰트 크기에 비례해 아웃라인 두께를 스케일.
    • variant="solid"의 ::selection 배경색 개선.
    • 커스텀 코드 폰트의 세로 메트릭과 기본값이 잘 맞지 않을 때 Code variant의 패딩을 커스터마이징하기 위해 .radix-themes에 CSS 변수 추가.
      • --code-padding-top
      • --code-padding-bottom
  • DropdownMenu, ContextMenu
    • 테마 설정이 radius="full"일 때 테두리 반경 줄임.
    • 가로 패딩 정제.
    • 라벨 모습·느낌 정제.
  • Grid
    • Grid 컴포넌트를 중첩할 때 하위 Grid가 의도치 않게 일부 부모 스타일을 상속하던 버그 수정.
  • Inset
    • 콘텐츠가 부모 요소의 패딩까지 잘릴지 테두리까지 잘릴지를 제어하는 clip prop 추가.
    • Table이 Inset 안에 있을 때 테이블 셀 패딩을 자동으로 조정.
  • Kbd
    • 세로 정렬 조정.
  • Link
    • 밑줄 색상 채도 낮춤.
    • 색상이 있는 Heading 요소 안에서 링크를 자동 고대비로 처리 (Text 안에서의 자동 고대비와 유사).
    • variant="outline"과 variant="surface"에서 폰트 크기에 비례해 밑줄 두께를 스케일.
  • RadioGroup
    • [Breaking] 라디오 버튼을 Text 컴포넌트로 감싸면 텍스트 첫 줄과 자동으로 정렬되도록 레이아웃 개선.
      • [Upgrade guide] 라디오 버튼이 있는 레이아웃이 예상대로 보이는지 확인하세요. 그렇지 않다면 원하는 텍스트 크기로 라디오 버튼을 <Text as="label" size="...">로 감싸세요.
    • [Breaking] 크기 재작업 – 더 작은 size="1" 추가, 기본 크기를 size="2"로, 더 정제된 size="3" 추가.
      • [Upgrade guide] 명시적 size prop으로 size="1"·size="2" 라디오 버튼을 사용했다면 각각 size="2"·size="3"으로 이름을 바꾸세요.
    • variant="classic" 모습·느낌 정제.
    • 비활성 상태의 모습·느낌 정제·표준화.
  • Select
    • 긴 항목 목록에서 보이지 않는 스크롤바 수정.
    • 라이트·다크 모드에서 variant="classic" 모습·느낌 개선.
    • position="popper" 사용 시 SelectContent를 트리거 왼쪽에 정렬.
    • 가로 패딩 정제.
    • 라벨 모습·느낌 정제.
    • size="3" 재작업.
  • ScrollArea
    • 상위(uptream) 타입 이슈를 수정하며 프리미티브 버전 업그레이드.
    • 스크롤바 위치 조정을 쉽게 하도록 스크롤바 margin 변수 이름에 스크롤바 방향을 포함하고 .radix-themes에 선언.
      • [Upgrade guide] --scrollarea-scrollbar-margin-top, --scrollarea-scrollbar-margin-left 같은 변수를 사용하고 있었다면 새 이름을 따르고 적절한 수준에 설정했는지 확인하세요. 오버라이드가 필요한 컴포넌트에만 설정하면 되므로 더 이상 .rt-ScrollAreaScrollbar 요소를 타겟팅할 필요가 없어요. 새 변수:
        • --scrollarea-scrollbar-horizontal-margin-top
        • --scrollarea-scrollbar-horizontal-margin-bottom
        • --scrollarea-scrollbar-horizontal-margin-left
        • --scrollarea-scrollbar-horizontal-margin-right
        • --scrollarea-scrollbar-vertical-margin-top
        • --scrollarea-scrollbar-vertical-margin-bottom
        • --scrollarea-scrollbar-vertical-margin-left
        • --scrollarea-scrollbar-vertical-margin-right
  • Slider
    • 컴포넌트에 사용되는 그림자와 색상 정제.
    • 비활성 상태의 모습·느낌 정제·표준화.
    • 고대비 슬라이더가 잘못된 비활성 스타일을 갖던 이슈 수정.
  • Switch
    • [Breaking] 스위치를 Switch 컴포넌트로 감싸면 텍스트 첫 줄과 자동으로 정렬되도록 레이아웃 개선.
      • [Upgrade guide] 스위치가 있는 레이아웃이 예상대로 보이는지 확인하세요. 그렇지 않다면 원하는 텍스트 크기로 스위치를 <Text as="label" size="...">로 감싸세요.
    • [Breaking] size="2"·size="3"을 더 작게 만들도록 크기 재작업.
      • [Upgrade guide] 이전 모습과 맞추려면 size="2" 대신 size="3"을 사용하세요.
    • 컴포넌트에 사용되는 그림자와 색상 정제.
    • 비활성 상태의 모습·느낌 정제·표준화.
  • Table
    • 바깥 테두리가 컴포넌트 밖 배경과 어우러지도록 적용 방식 정제.
  • Tabs
    • 커스텀 폰트에 기본값이 맞지 않을 때 활성·비활성 탭의 자간과 단어 간격을 커스터마이징할 수 있도록 .radix-themes에 CSS 변수 추가.
      • --tabs-trigger-active-letter-spacing
      • --tabs-trigger-active-word-spacing
      • --tabs-trigger-inactive-letter-spacing
      • --tabs-trigger-inactive-word-spacing
  • Text
    • as prop에 as="label" 옵션 추가.
    • as prop이 지정되지 않았을 때 prop 타입을 해석하는 방식 개선.
  • TextArea
    • 내부 구현 재작업. 이제 스타일링을 위해 여러 HTML 노드를 사용해요.
      • TextArea가 가로로 사용 가능한 공간을 채우는 진짜 display: block 요소처럼 동작하도록 레이아웃 스타일 조정.
      • style과 className을 이제 감싸는 div 요소로 전달해요. ref와 그 외 props는 여전히 textarea 자체로 전달돼요.
      • [Upgrade guide] style, className 또는 관련 HTML 노드를 타겟팅하는 커스텀 CSS로 TextArea 스타일을 오버라이드했다면 커스텀 스타일이 예상대로 동작하는지 확인하세요.
      • [Upgrade guide] 브라우저가 설정한 TextArea의 고유 너비에 의존했다면 레이아웃이 예상대로 보이는지 확인하세요.
    • 더 균형 잡힌 모습을 위해 패딩 값 정제.
      • TextArea가 넘칠 때 더 나은 타이핑 경험을 위해 일치하는 스크롤 margin 사용.
    • 내부 그림자가 컴포넌트 밖 배경과 어우러지도록 적용 방식 정제.
    • 비활성·읽기 전용 상태의 모습·느낌 정제·표준화.
    • 비활성 input에서 텍스트 값이 색조를 띠어 보이던 Safari 버그 수정.
    • 자동 채움 스타일 개선.
  • TextField
    • 잠재적 스택킹 이슈를 피하도록 컨테이너의 z-index 재설정.
    • 더 균형 잡힌 모습을 위해 패딩 값 정제.
      • 긴 값이 커서가 input 끝에 있을 때 왼쪽에서 잘리지 않도록 padding-left 대신 text-indent 사용.
    • 내부 그림자가 컴포넌트 밖 배경과 어우러지도록 적용 방식 정제.
    • 비활성·읽기 전용 상태의 모습·느낌 정제·표준화.
    • 비활성 input에서 텍스트 값이 색조를 띠어 보이던 Safari 버그 수정.
    • Chrome에서 input을 가로로 스크롤할 때 긴 값이 표시되지 않게 하던 말줄임표 잘림 제거.
    • 자동 채움 스타일 개선.
  • ThemePanel
    • appearance를 바꿀 때 트랜지션 비활성화.
    • 테두리 반경 미리보기에서 대비 개선.
  • Tooltip
    • 테마 설정이 radius="full"일 때 테두리 반경 줄임.
    • [Breaking] multiline prop 제거.
      • [Upgrade guide] multiline prop을 사용했다면 관련 Tooltip 요소에 style={{ maxWidth: 250 }}을 전달하세요.

1.1.2

2023년 8월 22일

  • ThemeProps와 ThemePanelProps 내보내기

1.1.1

2023년 8월 22일

이 버전의 문서 보기

  • 모든 컴포넌트에 prop 타입을 내보내 특정 설정의 타입 오류를 해결.

1.1.0

2023년 8월 21일

이 버전의 문서 보기

  • 새 색상 스케일 3개: ruby, iris, jade
  • 안정적인 빌드를 위해 Radix Primitives 의존성의 명시적 버전 설정.
  • ContextMenuSub, DialogRoot, HoverCardRoot, PopoverRoot에 명시적 React.FC 타입을 사용해 특정 설정의 타입 오류 해결.

1.0.0

2023년 8월 8일

이 버전의 문서 보기

  • 최초 릴리스! 🎉

더 알아보기 (Learn more)

  • 버전 변경 내역은 각 릴리스별로 정리돼 있으며, 3.0.0에는 breaking change가 많은 대규모 업그레이드 가이드가 포함돼 있어요.