Aliasing 앨리어싱

A guide to providing semantic aliases for colors.
색상에 시맨틱 별칭을 제공하는 방법에 대한 가이드입니다.

Semantic aliases 시맨틱 별칭

Referencing color scales by their actual scale name can work well, like blue and red. But often, creating semantic aliases like accent, primary, neutral, or brand can be helpful, especially when it comes to theming.
blue 및 red 과 같이 실제 스케일 이름으로 색상 스케일을 참조하는 것이 효과적일 수 있습니다. 하지만 accent , primary , neutral , brand 와 같은 시맨틱 별칭을 만드는 것이 특히 테마에 도움이 될 수 있습니다.

/*
 * Note: Importing from the CDN in production is not recommended.
 * It's intended for prototyping only.
 */
@import 'https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/blue.css';
@import 'https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/green.css';
@import 'https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/yellow.css';
@import 'https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/red.css';

:root {
  --accent-1: var(--blue-1);
  --accent-2: var(--blue-2);
  --accent-3: var(--blue-3);
  --accent-4: var(--blue-4);
  --accent-5: var(--blue-5);
  --accent-6: var(--blue-6);
  --accent-7: var(--blue-7);
  --accent-8: var(--blue-8);
  --accent-9: var(--blue-9);
  --accent-10: var(--blue-10);
  --accent-11: var(--blue-11);
  --accent-12: var(--blue-12);

  --success-1: var(--green-1);
  --success-2: var(--green-2);
  /* repeat for all steps */

  --warning-1: var(--yellow-1);
  --warning-2: var(--yellow-2);
  /* repeat for all steps */

  --danger-1: var(--red-1);
  --danger-2: var(--red-2);
  /* repeat for all steps */
}

With this approach, you will likely run into issues where you need to use the same scale for multiple semantics. Common examples include:
이 접근 방식을 사용하면 여러 의미론에 동일한 척도를 사용해야 하는 문제가 발생할 수 있습니다. 일반적인 예는 다음과 같습니다:

If you map yellow to "warning", you might also need yellow to communicate "pending".
yellow 을 "경고"에 매핑하는 경우 "보류 중"을 전달하려면 yellow 도 필요할 수 있습니다.
If you map red to "danger", you might also need red to communicate "error" or "rejected".
red 을 "위험"에 매핑하는 경우, "오류" 또는 "거부됨"을 전달하려면 red 도 필요할 수 있습니다.
If you map green to "success", you might also need green to communicate "valid".
green 을 "성공"에 매핑하는 경우, "유효"를 전달하려면 green 도 필요할 수 있습니다.
If you map blue to "accent", you might also need blue to communicate "info".
blue 을 "악센트"에 매핑하는 경우 "정보"를 전달하기 위해 blue 도 필요할 수 있습니다.

In this scenario, you can choose to define multiple semantic aliases which map to the same scale.
이 시나리오에서는 동일한 척도에 매핑되는 여러 의미론적 별칭을 정의하도록 선택할 수 있습니다.

/*
 * Note: Importing from the CDN in production is not recommended.
 * It's intended for prototyping only.
 */
@import 'https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/blue.css';
@import 'https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/green.css';
@import 'https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/yellow.css';

:root {
  --accent-1: var(--blue-1);
  --accent-2: var(--blue-2);
  --info-1: var(--blue-1);
  --info-2: var(--blue-2);

  --success-1: var(--green-1);
  --success-2: var(--green-2);
  --valid-1: var(--green-1);
  --valid-2: var(--green-2);

  --warning-1: var(--yellow-1);
  --warning-2: var(--yellow-2);
  --pending-1: var(--yellow-1);
  --pending-2: var(--yellow-2);
}

Or you can simply recommend that your teammates defer to the original scale name for situations where there is no appropriate semantic alias.
또는 적절한 의미상의 별칭이 없는 상황에서는 팀원들에게 원래의 스케일 이름을 사용하도록 권장할 수도 있습니다.

Use case aliases 사용 사례 별칭

Each step in Radix Colors scales is designed for a specific use case. To help your team know which step to use, you can provide aliases based on the designed use cases.
기수 색상 척도의 각 단계는 특정 사용 사례에 맞게 설계되었습니다. 팀에서 어떤 단계를 사용할지 알 수 있도록 설계된 사용 사례에 따라 별칭을 제공할 수 있습니다.

/*
 * Note: Importing from the CDN in production is not recommended.
 * It's intended for prototyping only.
 */
@import 'https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/blue.css';
@import 'https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/green.css';
@import 'https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/yellow.css';
@import 'https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/red.css';

:root {
  --accent-base: var(--blue-1);
  --accent-bg-subtle: var(--blue-2);
  --accent-bg: var(--blue-3);
  --accent-bg-hover: var(--blue-4);
  --accent-bg-active: var(--blue-5);
  --accent-line: var(--blue-6);
  --accent-border: var(--blue-7);
  --accent-border-hover: var(--blue-8);
  --accent-solid: var(--blue-9);
  --accent-solid-hover: var(--blue-10);
  --accent-text: var(--blue-11);
  --accent-text-contrast: var(--blue-12);

  --success-base: var(--green-1);
  --success-bg-subtle: var(--green-2);
  /* repeat for all steps */

  --warning-base: var(--yellow-1);
  --warning-bg-subtle: var(--yellow-2);
  /* repeat for all steps */

  --danger-base: var(--red-1);
  --danger-bg-subtle: var(--red-2);
  /* repeat for all steps */
}

Again, with this approach, you will likely run into issues where you need to use the same step for multiple use cases. Common examples include:
다시 말하지만, 이 접근 방식을 사용하면 여러 사용 사례에 동일한 단계를 사용해야 하는 문제가 발생할 수 있습니다. 일반적인 예는 다음과 같습니다:

Step 9 is designed for solid backgrounds, but it also may work for input placeholder text.
9단계는 단색 배경용으로 설계되었지만 입력 자리 표시자 텍스트에도 사용할 수 있습니다.
Step 8 is designed for hovered component borders, but it also works well for focus rings.
8단계는 호버링된 컴포넌트 테두리를 위해 설계되었지만 포커스 링에도 잘 작동합니다.

In these cases, you can choose to define multiple aliases which map to the same step.
이러한 경우 동일한 단계에 매핑되는 여러 별칭을 정의하도록 선택할 수 있습니다.

/*
 * Note: Importing from the CDN in production is not recommended.
 * It's intended for prototyping only.
 */
@import 'https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/gray.css';
@import 'https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/blue.css';
@import 'https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/green.css';
@import 'https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/yellow.css';
@import 'https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/red.css';

:root {
  --gray-solid: var(--gray-9);
  --gray-placeholder-text: var(--gray-9);

  --accent-border-hover: var(--blue-8);
  --accent-focus-ring: var(--blue-8);
}

Or you can simply recommend that your teammates defer to the original step number for situations where use cases don't have an alias.
또는 별칭이 없는 사용 사례의 경우 팀원에게 원래 단계 번호로 돌아가도록 권장할 수도 있습니다.

Mutable aliases 변경 가능한 별칭

When designing for both light and dark modes, you sometimes need to map a variable to one color in light mode, and another color in dark mode. Common examples include:
밝은 모드와 어두운 모드 모두에 맞게 디자인할 때 변수를 밝은 모드에서는 한 색상에, 어두운 모드에서는 다른 색상에 매핑해야 하는 경우가 있습니다. 일반적인 예는 다음과 같습니다:

Components that have a white background in light mode and a subtle gray background in dark mode. For example, Card, Popover, DropdownMenu, HoverCard, Dialog etc.
밝은 모드에서는 흰색 배경을, 어두운 모드에서는 은은한 회색 배경을 가진 컴포넌트. 예를 들어 카드, 팝오버, 드롭다운메뉴, 호버카드, 다이얼로그 등이 있습니다.
Components that have a transparent black background in light mode and a transparent white background in dark mode. For example, Tooltip.
밝은 모드에서는 투명한 검정색 배경을, 어두운 모드에서는 투명한 흰색 배경을 가진 컴포넌트입니다. 예를 들어, 툴팁.
Shadows that are saturated, transparent gray in light mode, and pure black in dark mode.
채도가 높은 그림자, 밝은 모드에서는 투명한 회색, 어두운 모드에서는 순수한 검정색입니다.
An overlay that is light transparent black in light mode, and a darker transparent black in dark mode.
밝은 모드에서는 밝은 투명 검정색, 어두운 모드에서는 더 어두운 투명 검정색의 오버레이입니다.

/*
 * Note: Importing from the CDN in production is not recommended.
 * It's intended for prototyping only.
 */
@import 'https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/slate.css';
@import 'https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/slate-alpha.css';
@import 'https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/white-alpha.css';
@import 'https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/black-alpha.css';

:root {
  --panel: white;
  --panel-contrast: var(--black-a9);
  --shadow: var(--slate-a3);
  --overlay: var(--black-a8);
}

.dark {
  /* Remap your colors for dark mode */
  --panel: var(--slate-2);
  --panel-contrast: var(--white-a9);
  --shadow: black;
  --overlay: var(--black-a11);
}

Avoid using specific variable names like "CardBg", or "Tooltip", because you will likely need to use each variable for multiple use cases.
여러 사용 사례에 각 변수를 사용해야 할 가능성이 높으므로 'CardBg' 또는 'Tooltip'과 같은 특정 변수 이름을 사용하지 마세요.

Renaming scales 저울 이름 바꾸기

If you wish, you can rename scales. Reasons might include:
원하는 경우 스케일 이름을 변경할 수 있습니다. 이유는 다음과 같습니다:

Rename a saturated gray to gray to keep things simple.
포화 회색의 이름을 gray 으로 변경하여 단순하게 유지합니다.
Rename sky or grass to blue or green to keep the naming intuitive.
sky 또는 grass 의 이름을 blue 또는 green 으로 변경하여 직관적인 이름을 유지하세요.
Rename a scale to match your brand, like how Discord use blurple.
Discord에서 blurple 을 사용하는 것처럼 브랜드에 맞게 스케일 이름을 변경합니다.

/*
 * Note: Importing from the CDN in production is not recommended.
 * It's intended for prototyping only.
 */
@import 'https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/slate.css';
@import 'https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/sky.css';
@import 'https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/grass.css';
@import 'https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/violet.css';
@import 'https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/crimson.css';

:root {
  --gray-1: var(--slate-1);
  --gray-2: var(--slate-2);

  --blue-1: var(--sky-1);
  --blue-2: var(--sky-2);

  --green-1: var(--grass-1);
  --green-2: var(--grass-2);

  --blurple-1: var(--violet-1);
  --blurple-2: var(--violet-2);

  --caribbean-sunset-1: var(--crimson-1);
  --caribbean-sunset-2: var(--crimson-2);
}

Previous 이전 게시물Usage 사용법

NextCustom palettes 다음사용자 지정 팔레트

Edit this page on GitHub.
GitHub에서 이 페이지를 편집합니다.