팔레트

Ignite UI for Angular는 일관된 방식으로 응용 프로그램의 색상을 업데이트할 수 있는 CSS 변수를 노출합니다.

개요

Ignite UI for Angular 8가지 기본 색상 -primary,secondary,surface,gray,info​success에warn​error 대해 80가지 이상의 색상 변형을 CSS 변수로 노출합니다.

그primary,secondary 그리고gray 색상은 다음에 따라 2014년 머티리얼 디자인 컬러 팔레트. 즉, 이 색상들은 다음과 같은 변형을 포함합니다:

모두										Primary & Secondary(기본 및 보조) 전용
50	100	200	300	400	500	600	700	800	900	A100	A200	A400	A700

위 표에서 보듯, 색상에는gray 변형A100이 포함되지 않지만,A200​A400​A700 색상primary은secondary 14가지 색상 변형을 모두 포함합니다. 2014년 머티리얼 디자인 컬러 팔레트에 포함되지 않은 5가지 추가 색상을 포함하고 있습니다 -info,success,warn​error,,그리고surface​

앞서 언급한 색상 외에도, 각 색상 변형에 대해 Level AA WCAG 준수contrast 색상도 포함되어 있습니다. 즉, 해당contrast 색상 변형을 기본 색상 변형의 전경색으로 안전하게 사용할 수 있다는 뜻입니다.

Note

대비 색상은 CSS 상대 색상이며 해당 음영 색상(기본, 보조 등)을 기반으로 런타임에 계산됩니다.

다음은 Light Material Palette에 명시된 가변 색상의 발췌primary 문입니다:

:root {
  //...
  --ig-primary-500: #09f;
  --ig-primary-500-contrast: hsl(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l);
  --ig-primary-600: hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.89));
  --ig-primary-600-contrast: hsl(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l);
  --ig-primary-700: hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.81));
  //...
  --ig-secondary-400: hsl(from var(--ig-secondary-500) h calc(s * 0.875) calc(l * 1.08));
  --ig-secondary-400-contrast: hsl(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l);
  --ig-secondary-500: #df1b74;
  --ig-secondary-500-contrast: hsl(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l);
  --ig-secondary-600: hsl(from var(--ig-secondary-500) h calc(s * 1.26) calc(l * 0.89));
  --ig-secondary-600-contrast: hsl(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l);
  //...
  --ig-wcag-a: 0.31;
  --ig-wcag-aa: 0.185;
  --ig-wcag-aaa: 0.178;
  --ig-contrast-level: var(--ig-wcag-aa);
  --y: clamp(0,(y / var(--ig-contrast-level) - 1)* -infinity, 1);
  --y-contrast: xyz-d65 var(--y) var(--y) var(--y);
}

모든 기본 색상 변형은 하나의 기본 변수에서 나옵니다:--ig-primary-500이 패턴은 and--ig-secondary-500와 같은--ig-surface-500 다른 색상 변수에도 적용됩니다. 추가 변형은 상대 색상 CSS 함수를 사용하여 주요500 변수를 조정saturation 하고,lightness 다른 변형(600, 700 등)을 만듭니다. 이 방식을 선택한 이유는 실행 중에 모든 색상 변형과 다른 색상을primary​secondary​surface 수정할 수 있기 때문입니다.

대비 색상은 제공된 색상의 휘도와 선택한 대비 수준을 기반으로 CSS 런타임에 생성되어 최적의 대비 색상을 계산합니다. 주요 색상 변형(500)을 변경하면 대비 색상도 업데이트됩니다.

Note

믹싱을 사용palette 해 대비 수준을 전역적으로 지정할 수도 있고, 요소의 범위 내에서 구체적으로 설정하고 싶다면 믹싱을adaptive-contrast 사용할 수도 있습니다. 두 경우 모두 미리 정의된 값 중 하나를 받아들입니다:a​aa 또는aaa​

 @include palette($palette, $contrast-level: 'aaa');

Defining Palettes

팔레트에서 색상 변형을 변경하고 싶다면, 색상500 변형을 덮어쓰면 됩니다. 예를 들어, 원색을 바꾸는 것은 다음과 같이 쓰기만 하면 됩니다:

:root {
  --ig-primary-500: #09f;
}

그러면 다른 모든 기본 변형이 자동으로 업데이트됩니다.

각 색상의 색상 변형은 단색임을 알 수 있을 것입니다. 이는 모든 색상 변형이 상대 색상 함수hsl()로 생성되기 때문입니다.

Scoping

팔레트에서 색상을 덮어쓰는 것이 비교적 쉽다는 것을 우리는 이미 확인했습니다. 우리는 글로벌 색상 변형을 범위 내어 팔레트를:root 선택기(selector)styles.css 신청서 작성 파일:

예를 들어, 당신의 기업 기본 색상이 그렇#9f349c 고, 그에 맞는 주요 변형을 만들고 싶다고 가정해 봅시다. 필요한 것은 RGB, HEX 등 어떤 색상 값 유형이든 원하는 색상으로 변수를--ig-primary-500 교체하는 것뿐입니다.

:root {
  --ig-primary-500: #9f349c;
}

이렇게 하면 각 기본 색상 변형이 자동으로 변경됩니다.

단일 전역 팔레트를 갖는 것 외에도 다른 CSS 선택기로 범위가 지정된 여러 팔레트를 만들 수도 있습니다. 예를 들어, 클래스 선택기로 범위가 지정된 파란색 및 빨간색 팔레트를 가질 수 있습니다.

/* styles.css */

.blue-theme {
  --ig-primary-500: #0008ff;
}

.red-theme {
  --ig-primary-500: #ff0400;
}

<app-component class="blue-theme"></app-component>

그 다음에는 클래스 속성의 값을 에서blue-theme에서 로red-theme 바꾸어 애플리케이션 내 색상을 전면 수정할 수 있습니다.

이 접근 방식은 개별 구성 요소의 팔레트 색상을 재정의하는 데에도 효과적입니다. 경우에 따라 여러 팔레트를 생성하고 싶지 않지만 구성 요소에 사용되는 팔레트 색상을 변경하고 싶을 수도 있습니다.

머티리얼 아바타 컴포넌트 테마를 살펴보겠습니다. 배경에는 회색 색상의 400 변형이 사용됩니다. 이제 배경 설정을 담당하는 속성을 재정의하여 테마를 사용자 정의하거나 회색 400 팔레트 색상을 재정의하여 비활성화된 배경색을 변경할 수 있습니다.

igx-avatar {
  --ig-gray-400: #efefef;
}

Dark vs. Light

Warning

전경과 배경색에 가장 큰 영향을 미치는 색상은gray와surface 입니다. 이 두 색상은 대부분의 경우 서로 대조하여 표시됩니다. 그래서 색상은surface 항상 대비되어야 합니다gray.

Ignite UI for Angular의 팔레트는 테마가 밝은지 어두울지를 결정합니다. 가장 큰 영향을 주는 두 가지 색상은gray와 입니다surface. 모든 테마의 색상 변형은gray 매우 밝은 색조(like)나 아주 어두운 색조(like#fff​#222)를 기반으로 합니다. 밝은 테마는 어두운 회색 음영을 기반으로 한 변형이 있고gray, 어두운 테마는 반대로 모든gray 변형이 흰색 음영입니다. 이 색상들은gray 보통 다른surface 색상과 대비되어 표시됩니다. 색상은surface 항상 회색 스케일의gray 반대편에 있어야 주제가 잘 보이도록 합니다.

조금 더 명확하게 하기 위해, 아래는 밝은 색과 어두운 색 테마의 일부gray​surface 및 색상 변형 목록을 소개합니다;

소재 조명:

:root {
  //...
  /* surface is set to light color*/
  --ig-surface-500: white;
  //...
  /* grays are based on dark gray to contrast the surface color */
  --ig-gray-500: hsl(0, 0%, 62%);
  //...
}

어두운 소재:

:root {
  //...
  /* surface is set to dark color*/
  --ig-surface-500: #222;
  //...
  /* grays are based on light gray to contrast the surface color */
  --ig-gray-500: hsl(0, 0%, 74%);
  //...
}

색상 변경을 할 때gray​surface는 대부분의 부품에 사용되며 전체적인 외관과 느낌에 큰 영향을 미치므로 주의하세요.

Other Colors

지금까지 색상 변형과primary​secondary​gray​surface 이를 어떻게 무시할 수 있는지 다뤘습니다. 네 가지 색깔이 더 있습니다 -info,,success,warn, 그리고error 보통 색상을 다른 상태로 설정할 때 사용됩니다. 예를 들어, 구성 요소는igx-input-group 입력 검증 상태에서 이러한 색상을 사용합니다. 다른 색상 변형과 함께 변경할 수 있으며, 변형을 설정500 하기만 하면 나머지 변형들이 모두 생성됩니다.

:root {
  --ig-info-500: #1377d5;
  --ig-success-500: #4eb862;
  --ig-warn-500: #faa419;
  --ig-error-500: #ff134a;
}

Additional Resources

관련 주제:

• Sass를 사용한 팔레트

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Angular 포럼
• ​GitHub Ignite UI for Angular