팔레트

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

개요

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

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

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

위의 표에서 볼 수 있듯이 색상에는 gray, A200, A400 및 A700 변형이 포함되지 A100 않지만 및 secondary 색상에는 primary 14가지 색상 변형이 모두 포함됩니다. 2014 Material Design Color Palette info​ ​error​ ​success​ ​warn에 포함되지 않은 5 가지 추가 색상이 포함되어 있습니다. surface​

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

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

다음은 Light Material Palette 에 선언된 변수 color 의 발췌 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);
}
css

모든 기본 색상 변형은 단일 기본 변수:--ig-primary-500에서 가져옵니다. 이 동일한 패턴이 and--ig-surface-500와 같은--ig-secondary-500 다른 색상 변수에도 적용됩니다. 추가 변형은 main 500 변수를 가져와서 조정하고 saturation​ ​lightness 다른 변형(600, 700 등)을 만드는 상대 색상 CSS 함수를 사용하여 만들어집니다. 우리가 이 접근 방식을 선택한 이유는 런타임 중에 , secondary,, surface 및 기타 색상의 모든 변형을 primary 수정할 수 있기 때문입니다.

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

믹스인을 사용하여 palette 대비 수준을 전역적으로 지정하거나 요소의 범위에서 구체적으로 설정하려는 경우 믹스인을 사용할 adaptive-contrast 수 있습니다. 둘 다 미리 정의된 값 중 하나를 허용합니다. a​ ​aa​ ​aaa​

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

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

Defining Palettes

색상표에서 색상의 색상 변형을 변경하려면 해당 500 색상 변형을 재정의하면 됩니다. 예를 들어, 기본 색상을 변경하는 것은 다음과 같이 작성하는 것만큼 쉽습니다.

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

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

각 색상에 대한 색상 변형이 단색임을 알 수 있습니다. 이는 모든 색상 변형이 relative color 함수 hsl()로 생성되기 때문입니다.

Scoping

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

회사의 기본 색상이 #9f349c 있고 이에 대한 기본 변형을 만들고 싶다고 가정해 보겠습니다. 당신이해야 할 일은 변수를 RGB, HEX 등 모든 색상 값 유형에서 원하는 색상으로 바꾸는--ig-primary-500 것입니다.

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

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

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

/* styles.css */

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

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

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

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

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

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

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

Dark vs. Light

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

Ignite UI for Angular의 팔레트는 테마가 밝을지 어두울지를 결정합니다. 그것에 가장 큰 영향을 미치는 두 가지 색상은 gray and입니다 surface. gray 모든 테마의 색상 변형은 매우 밝은 색상 음영 또는 매우 어두운 #222 색상 음영 #fff을 기반으로 합니다. 밝은 테마에는 어두운 회색 음영을 기반으로 하는 변형이 있는 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%);
  //...
}
css

어두운 소재:

: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%);
  //...
}
css

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

Other Colors

지금까지 , secondary, gray, 색상 surface 변형과 이를 재정의하는 방법에 대해 다루 primary 었습니다. 4 가지 색상이 더 있습니다 -info, success, warn,. error 일반적으로 다른 상태에서 색상을 설정하는 데 사용됩니다. 예를 들어, igx-input-group 구성 요소는 입력 유효성 검사 상태에서 이러한 색상을 사용합니다. 그것들은 다른 색상 변형으로 변경할 수 있으며, 변형을 500 설정하기 위해 수행해야 하는 모든 다른 varints가 생성됩니다.

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

Additional Resources

관련 주제:

• Sass를 사용한 팔레트

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

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