입력 설명에 대한 색상 변수 지원

  • 릴리스 버전: Xanadu
  • 업데이트 날짜 2024년 08월 01일
  • 읽기4분
  • 색상 변수를 사용하여 모바일 입력 설명의 테마를 변경하는 방법을 알아보세요.

    입력의 설명 필드에 색상 변수를 사용하여 텍스트 색상을 제어합니다.

    설명 필드가 HTML로 구성된 경우 입력의 설명 필드에 색상 변수를 사용하여 텍스트 색상을 제어합니다.

    예를 들어, #FF0000와 같은 색상 16진수 값 외에도 --now-color-primary-0과 같은 색상 변수를 사용할 수 있습니다. 사용 가능한 변수 목록은 을 참조하십시오 모바일에 대한 색상 테마 고려 사항.

    입력에 대한 자세한 내용은 을 참조하십시오 입력 양식 화면 구성.

    입력 설명에 사용되는 색 변수

    입력 설명 색상 가이드

    색상 변수는 다음과 같이 나뉩니다. 디자인 가이드라인을 사용하여 사용 사례에 적합한 색상 변수를 식별합니다.

    경보 색상표
    경보 색상표 색상은 중요한 상태, 상태 및 작업을 강조 표시합니다. 장식이나 구성이 아닌 특정 의미를 전달하기 위해 경고 색상을 사용합니다.
    그룹화된 색상표
    그룹화된 색상표 색상은 업계 라인의 색상 규칙을 따릅니다. 이러한 색상을 사용하여 색상이 지정된 항목이 특정 산업 또는 사업부와 관련이 있음을 나타냅니다. 각 색의 의미는 컨텍스트에 따라 다르지만 앱 내에서 일관되게 유지되어야 합니다.
    표 1. 경보 색상표
    색 이름 색상 변수
    중요 중요 경보 색상 스키마
    모바일 변수
    alert--critical-0
    웹 변수
    --now-color_alert--critical-0
    높음 높은 경보 색 구성표
    모바일 변수
    alert--high-0
    웹 변수
    --now-color_alert--높음-0
    경고 경고 경보 색 구성표
    모바일 변수
    alert--warning-0
    웹 변수
    --now-color_alert--경고-0
    보통 보통 경보 색 구성표
    모바일 변수
    alert--moderate-0
    웹 변수
    --now-color_alert--moderate-0
    정보 정보 경보 색 구성표
    모바일 변수
    alert--info-0
    웹 변수
    --now-color_alert--정보-0
    긍정적 양수 경보 색 구성표
    모바일 변수
    alert--positive-0
    웹 변수
    --now-color_alert--양수-0
    낮음 경보 부족 색 구성표
    모바일 변수
    alert--low-0
    웹 변수
    --now-color_alert--낮음-0
    사용 안 함 비활성화된 경보 색 구성표
    모바일 변수
    alert-disabled-background
    웹 변수
    --now-color_background--secondary
    심각(대체) 중요 경보 색상 체계 대체
    모바일 변수
    alert--critical-4
    웹 변수
    --now-color_alert--critical-4
    높음(대체) 높은 경보 색 구성표 대체
    모바일 변수
    alert--high-4
    웹 변수
    --지금-color_alert--높음-4
    경고(대체) 경고 경보 색 구성표 대체
    모바일 변수
    alert--warning-4
    웹 변수
    --now-color_alert--경고-4
    보통(대체) 보통 경보 색 구성표 대체
    모바일 변수
    alert--moderate-4
    웹 변수
    --now-color_alert--moderate-4
    정보(대체) 정보 경보 색 구성표 대체
    모바일 변수
    alert--info-4
    웹 변수
    --now-color_alert--정보-4
    양수(대체) 양성 경보 색 구성표 대체
    모바일 변수
    alert--positive-4
    웹 변수
    --now-color_alert--positive-4
    낮음(대체) 낮은 경보 색 구성표 대체
    모바일 변수
    alert--low-4
    웹 변수
    --지금 color_alert--낮음-4
    비활성화됨(대체) 비활성화된 경보 색 구성표 대체
    모바일 변수
    alert-disabled-text
    웹 변수
    --now-color_text--3차
    표 2. 그룹화된 색상표
    색 이름 색상 옵션
    파란색 파란색으로 그룹화된 색 구성표
    웹 변수
    --now-color_grouped--파란색-0
    갈색 갈색으로 그룹화된 색 구성표
    웹 변수
    --now-color_grouped--brown-0
    회색 회색으로 그룹화된 색 구성표
    웹 변수
    --now-color_grouped--회색-0
    녹색 녹색으로 그룹화된 색 구성표
    웹 변수
    --now-color_grouped--녹색-0
    녹색-노란색 녹색-노란색 그룹화된 색 구성표
    웹 변수
    --now-color_grouped--녹색-노란색-0
    자홍색 자홍색으로 그룹화된 색 구성표
    웹 변수
    --now-color_grouped--자홍색-0
    주황색 주황색으로 그룹화된 색 구성표
    웹 변수
    --now-color_grouped--주황색-0
    분홍색 분홍색으로 그룹화된 색 구성표
    웹 변수
    --now-color_grouped--분홍색-0
    보라색 보라색으로 그룹화된 색 구성표
    웹 변수
    --now-color_grouped--보라색-0
    청록색 청록색으로 그룹화된 색 구성표
    웹 변수
    --now-color_grouped--청록색 0
    노란색 노란색으로 그룹화된 색 구성표
    웹 변수
    --now-color_grouped--노란색-0
    파란색(대체) 파란색으로 그룹화된 색 구성표 대체
    웹 변수
    --now-color_grouped--blue-4
    브라운 (대체) 갈색으로 그룹화된 색 구성표 대체
    웹 변수
    --지금-color_grouped--갈색-4
    회색(대체) 회색으로 그룹화된 색 구성표 대체
    웹 변수
    --now-color_grouped--회색-4
    녹색(대체) 녹색으로 그룹화된 색 구성표 대체
    웹 변수
    --now-color_grouped--녹색-4
    녹색-노란색(대체) 녹색-노란색 그룹화된 색 구성표 대체
    웹 변수
    --now-color_grouped--녹색-노란색-4
    마젠타(대체) 자홍색 그룹화 색 구성표 대체
    웹 변수
    --now-color_grouped--자홍색-4
    주황색(대체) 주황색으로 그룹화된 색 구성표 대체
    웹 변수
    --now-color_grouped--주황색-4
    분홍색(대체) 분홍색으로 그룹화된 색 구성표 대체
    웹 변수
    --now-color_grouped--분홍색-4
    보라색(대체) 보라색으로 그룹화된 색 구성표 대체
    웹 변수
    --now-color_grouped--보라색-4
    청록색(대체) 청록색 그룹화 색 구성표 대체
    웹 변수
    --now-color_grouped--청록색-4
    노란색(대체) 노란색으로 그룹화된 색 구성표 대체
    웹 변수
    --now-color_grouped--yellow-4