SourceLogo
기록이 어디서 왔는지 보여주는 타사 서비스 로고. 항상 서비스 이름 글자와 함께 쓴다.
- 출시 화면에서 사용
개요
미리보기
LightGmail
DarkGmail
예시
상태
기본 16px
LightGmailDarkGmail20px
LightGmailDarkGmail24px
LightGmailDarkGmail테마 변형 (ChatGPT)
LightChatGPTDarkChatGPT글리프 (currentColor)
LightMacBookDarkMacBook기기 타일 40px
LightComputerDarkComputer- My computerWindows and macOS app · Coming soon
- My phoneNotes, photos, ideas · App · Coming soon
전체 로고
각 로고를 라이트·다크 프레임에 서비스 이름과 함께 보인다.
Google
LightGoogleDarkGoogleGmail
LightGmailDarkGmailGoogle Calendar
LightGoogle CalendarDarkGoogle CalendarGoogle Drive
LightGoogle DriveDarkGoogle DriveGoogle Sheets
LightGoogle SheetsDarkGoogle SheetsGoogle Slides
LightGoogle SlidesDarkGoogle SlidesGoogle Meet
LightGoogle MeetDarkGoogle MeetNotion
LightNotionDarkNotionSlack
LightSlackDarkSlackChatGPT
LightChatGPTDarkChatGPTApple
LightAppleDarkAppleMacBook
LightMacBookDarkMacBookiPhone
LightiPhoneDarkiPhoneComputer
LightComputerDarkComputer- My computerWindows and macOS app · Coming soon
- My phoneNotes, photos, ideas · App · Coming soon
Phone
LightPhoneDarkPhone- My computerWindows and macOS app · Coming soon
- My phoneNotes, photos, ideas · App · Coming soon
이렇게 · 이렇게 하지 않기
- 이렇게 내 기기(컴퓨터·휴대폰)는 기기 타일(device-computer·device-phone)을 40px로 목록 행 앞에 둔다. 글자 크기 자리(출처 줄 16)에는 macbook·iphone 글리프를 쓴다.
- 이렇게 로고는 출처 표시일 뿐이다. 항상 서비스 이름 글자와 함께 두고(“[로고] Gmail · 3월 4일”), 로고만으로 출처를 말하지 않는다.
- 이렇게 하지 않기 재채색·늘이기·자르기·회전하지 않고, 센트럴바이 브랜드처럼 쓰지 않는다. 각 상표는 해당 회사 소유다.
- 이렇게 하지 않기 public/v4/sources의 SVG를 <img>로 직접 걸지 않는다. SourceLogo는 마크업을 인라인해 네트워크 요청·404·깜빡임이 없다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
service | SourceLogoService | gmail | 출처 서비스 15개 중 하나. 목록에 없는 값이면 아무것도 그리지 않는다(깨진 이미지 없음). openai·apple은 테마에 맞는 변형으로, macbook·iphone은 글자 색(currentColor) 글리프로 그린다. device-computer·device-phone은 센트럴바이의 기기 타일(v3-jh 그대로, 둥근 그라디언트 칸)이다. |
size? | 16 | 20 | 24 | 40 | 16 | px. 출처 줄·기록 행 16, 위젯 머리 20, 연결 목록 24, 기기 타일 행 40. 정사각형 상자 안에 원래 비율로 들어간다. |
sourceLogos / sourceLogoServices | — | — | 로고 집합은 logos.ts 하나다(public/v4/sources에서 변환). 이름 표시용 sourceLogos[service].name도 여기 있다. |
ref | — | — | ref는 바깥 span으로 간다. |
| 그 밖의 속성 | — | — | id, data-* 등 span 속성은 그대로 전달된다. 항상 aria-hidden이라 aria-hidden·role, className·style·children은 받지 않는다. |
접근성
키보드: 해당 없음(비대화형).
- 항상 aria-hidden="true", svg는 focusable="false". 서비스 이름은 옆 글자가 전달한다(<img>라면 alt="").
- svg id는 인스턴스마다 useId 접두사를 붙여 한 화면의 여러 로고가 마스크·그라디언트를 서로 덮지 않는다.
- forced-colors에서 컬러 로고는 원래 색을 유지하고(forced-color-adjust: none), macbook·iphone 글리프는 시스템 글자 색을 따른다.