팔레트

Ignite UI for Angular 일관된 방식으로 애플리케이션의 색상을 업데이트할 수 있는 CSS 변수를 노출합니다.

개요

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

primary, secondary 및 gray 색상은 2014 머티리얼 디자인 색상 팔레트를 따릅니다. 이는 이러한 색상에 다음 변형이 포함됨을 의미합니다.

모두										기본 및 보조만
50	100	200	300	400	500	600	700	800	900	A100	A200	A400	A700

위의 표에 표시된 것처럼 '회색' 색상에는 'A100', 'A200', 'A400', 'A700' 변형이 포함되지 않는 반면, '기본' 및 '보조' 색상에는 14가지 색상 변형이 모두 포함됩니다. 2014 머티리얼 디자인 색상 팔레트에 포함되지 않은 5가지 추가 색상(`info`, `success`, `warn`, `error` 및 `surface`)을 포함합니다.

앞서 언급한 색상 외에도 각 색상 변형에 대한 레벨 AAA WCAG 준수 contrast 색상도 포함되어 있습니다. 이는 해당 contrast 색상 변형을 기본 색상 변형의 전경색으로 안전하게 사용할 수 있음을 의미합니다.

Note

대비 색상은 Sass 테마 엔진에 의해 빌드 시 생성됩니다. CSS 변수를 재정의하면 해당 대비 색상이 업데이트되지 않습니다.

다음은 Light Material Palette에 선언된 primary 색상의 발췌입니다.

:root {
  --ig-primary-h: 204deg;
  --ig-primary-s: 100%;
  --ig-primary-l: 50%;
  --ig-primary-a: 1;
  --ig-primary-50: hsla(
                      var(--ig-primary-h), 
                      calc(var(--ig-primary-s) * 1.23),
                      calc(var(--ig-primary-l) * 1.78), 
                      var(--ig-primary-a)
                    );
  --ig-primary-100: hsla(
                      var(--ig-primary-h), 
                      calc(var(--ig-primary-s) * 0.8),
                      calc(var(--ig-primary-l) * 1.66),
                      var(--ig-primary-a)
                    );
  --ig-primary-200: hsla(
                      var(--ig-primary-h),
                      calc(var(--ig-primary-s) * 0.64),
                      calc(var(--ig-primary-l) * 1.43),
                      var(--ig-primary-a)
                    );
  // ...
  --ig-primary-50-contrast: black;
  --ig-primary-100-contrast: black;
  --ig-primary-200-contrast: black;
  // ...
}

모든 기본 색상 변형은 4가지 기본 변수(--ig-primary-h,--ig-primary-s,--ig-primary-l 및--ig-primary-a에서 파생됩니다. 이러한 각 변수는 단일 색상에 대한 HSLA 부분을 보유합니다. HSLA는 hue), saturation, lightness) 및 alpha 나타냅니다. 색상을 설명하는 데 사용되는 또 다른 색상 구성표입니다. 우리는 런타임 시 primary 색상, secondary 및 기타 색상의 모든 변형을 수정할 수 있으므로 이 접근 방식을 사용하기로 결정했습니다.

Defining Palettes

팔레트의 색상에 대한 색상 변형을 변경하려면 스타일시트에서 해당 HSLA 값을 재정의하면 됩니다. 예를 들어 기본 색상을 변경하는 것은 다음과 같이 작성하는 것만큼 쉽습니다.

/* The HSLA representation of orange (#ffa500) */
/* hsla(38.8,100%,50%, 1); */
:root {
  --ig-primary-h: 38.8deg; 
  --ig-primary-s: 100%; 
  --ig-primary-l: 50%; 
  --ig-primary-a: 1; 
}

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

각 색상의 색상 변형은 단색이라는 것을 알 수 있습니다. 이는 모든 색상 변형이 HSLA 변수에서 생성되기 때문입니다.

Scoping

팔레트의 색상을 재정의하는 것이 상대적으로 쉽다는 것을 확인했습니다. 우리는 글로벌 색상 변형 범위를 지정하여 팔레트:root 선택기 styles.css 우리 신청서 파일:

회사 기본 색상이 #9f349c 이고 이에 대한 기본 변형을 생성한다고 가정해 보겠습니다. 이 작업을 수행하는 방법은 다음과 같습니다. 먼저 HSLA 색상 공간에서 색상의 HEX 표현을 가져옵니다. 이 경우 색조는 302도, 채도는 51%, 밝기는 41%, 알파는 1입니다. HSLA 값을 파생한 후 기본 팔레트를 이 색상으로 업데이트하기 위해 수행해야 할 작업은 기본 팔레트의 전역 h, s 및 l 값을 바꾸는 것입니다.

:root {
  --ig-primary-h: 302deg;
  --ig-primary-s: 51%;
  --ig-primary-l: 41%;
}

각 기본 색상 변형에 대한 대비 색상은 자동으로 계산되지 않습니다. 특정 색상이 다른 색상과 함께 사용될 때 대비가 충분한지 확인하는 데 도움이 되는 도구가 많이 있습니다. 각 색상 변형에 대해 선택하려는 대비 색상을 결정할 때 Chrome에 내장된 대비 검사기를 사용할 수 있습니다. 우리는 빌드 타임에 색상 팔레트를 생성하기 위한 Sass 함수를 제공합니다. 귀하가 원하는 색상에서 모든 색상 변형과 대비 색상을 생성하려면 설명서의 Sass가 포함된 팔레트 섹션을 확인하세요.

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

/* styles.css */

/* cornflowerblue hsl(218.5,79.2%,66.1%) */
.blue-theme {
  --ig-primary-h: 218.5deg; 
  --ig-primary-s: 79.2%; 
  --ig-primary-l: 66.1%; 
  --ig-primary-a: 1; 
}

/* brick red hsl(351.7,57%,52.5%) */
.red-theme {
  --ig-primary-h: 351.7deg; 
  --ig-primary-s: 57%; 
  --ig-primary-l: 52.5%; 
  --ig-primary-a: 1; 
}

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

그런 다음 클래스 속성 값을 blue-theme에서 red-theme로 변경하여 애플리케이션의 색상을 간단히 점검할 수 있습니다.

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

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

igx-avatar {
  --ig-gray-400: 146deg, 36%, 64%;
}

Dark vs. Light

Warning

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

Ignite UI for Angular의 팔레트는 테마가 밝을지 어두울지 여부를 결정합니다. 그것에 가장 큰 영향을 미치는 두 가지 색상은 gray과 surface 입니다. 모든 테마의 gray 색상 변형은 #fff와 같은 매우 밝은 색상 또는 #222와 같은 매우 어두운 색상을 기반으로 합니다. 밝은 테마에는 어두운 회색 음영을 기반으로 한 gray 변형이 있는 반면 어두운 테마에는 그 반대입니다. 모든 gray 변형은 흰색 음영입니다. 이러한 gray 색상은 다른 색상, 일반적으로 surface 색상과 대조되어 표시됩니다. 테마가 보기 좋게 보이도록 surface 색상은 항상 회색조의 gray 반대쪽 끝에 있어야 합니다.

이를 좀 더 명확하게 하기 위해 아래에는 밝은 테마와 어두운 테마의 gray 및 surface 색상 변형 목록이 나와 있습니다.

소재 조명:

:root {
  /* surface is set to white, i.e. ligthness 100% */
  --ig-surface-h: 0deg;
  --ig-surface-s: 0%;
  --ig-surface-l: 100%;
  --ig-surface-a: 1;
  --ig-gray-h: 0deg;

  /* grays are based on black to contrast the surface color */
  --ig-gray-h: 0%;
  --ig-gray-s: 0%;
  --ig-gray-900: var(--ig-gray-h), var(--ig-gray-s), 13%;
}

어두운 소재:

:root {
  /* surface is a dark shade of gray, i.e. lightness only at 13% */
  --ig-surface-h: 0deg;
  --ig-surface-s: 0%;
  --ig-surface-l: 13%;
  --ig-surface-a: 1;

  /* grays are based on white to contrast the surface color */
  --ig-gray-h: 0deg;
  --ig-gray-s: 0%;
  --ig-gray-900: var(--ig-gray-h), var(--ig-gray-s), 98%;
}

gray 및 surface 색상 변형은 대부분의 구성 요소에 사용되며 전체적인 모양과 느낌에 큰 영향을 미치므로 변경할 때 주의하십시오.

Other Colors

지금까지 primary, secondary, gray 및 surface 색상 변형과 이를 재정의하는 방법을 다루었습니다. info, success, warn 및 error의 네 가지 색상이 더 있습니다. 일반적으로 다양한 상태의 색상을 설정하는 데 사용됩니다. 예를 들어, igx-input-group 구성 요소는 입력 유효성 검사 상태에서 이러한 색상을 사용합니다. 처음 세 가지 변형으로 변경할 수 있습니다. h, s 및 l 변수만 업데이트하면 됩니다.

팔레트

개요