Ignite UI for Web Components의 팔레트

Ignite UI for Web Components는 응용 프로그램의 색상을 일관되게 업데이트할 수 있는 CSS 변수를 노출합니다.

개요

Palettes in Ignite UI for Web Components provide over 80 color variants as CSS variables for 8 base colors - primary, secondary, surface, gray, info, success, warn, and error.

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

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

As the table above shows, the gray color doesn't include the A100, A200, A400, and A700 variants, while the primary and secondary colors contain all 14 color variants. We include 5 additional colors that are not part of the 2014 Material Design Color Palette - info, success, warn, error, and surface.

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

[!Note] Contrast colors are generated at build-time therefore overriding the CSS variables will not update the corresponding contrast colors.

Here's an excerpt of the primary color as declared in the Light Bootstrap Palette:

:root {
  //...
  --ig-primary-500: #09f;
  --ig-primary-500-contrast: black;
  --ig-primary-600: hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.89));
  --ig-primary-600-contrast: black;
  --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: black;
  --ig-secondary-500: #df1b74;
  --ig-secondary-500-contrast: white;
  --ig-secondary-600: hsl(from var(--ig-secondary-500) h calc(s * 1.26) calc(l * 0.89));
  --ig-secondary-600-contrast: white;
  //...
}

All primary color variants are derived from one base variable color variant --ig-primary-500. The same goes for the other color variables --ig-secondary-500, --ig-surface-500, etc. The other variants are generated through the relative color function hsl() which takes the main variable color variant 500 and changes it's staturation and lightness according to the variable variant which is assigned on (600,700, etc.). We decided to use this approach as it allows us to modify all variants of the primary, secondary, surface and other colors at runtime.

[!WARNING] Because the contrast colors are not generated at CSS runtime like the rest, if we change the main color variant(500), the contrast color would not be updated. We would need to change them manually. This behavior will be improved upon in an upcoming release, where the contrast colors will also be calculated at CSS runtime.

Defining Palettes

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

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

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

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

:root {
  --ig-primary-600: hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.89));
}

Scoping

We've seen that overriding colors in the palette is relatively easy. The global palette can be updated by scoping color variants to the :root selector in the styles.css file of our application.

예를 들어, 당신의 기업 기본 색상이 그렇#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;
}

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

Dark vs. Light

Palettes in Ignite UI for Web Components dictate whether a theme is going to be light or dark. The two colors that have the biggest impact on that are gray and surface. See, the gray color variants in all themes are based on either a very light color shade, like #fff, or a very dark one like #222. Light themes have gray variants based on dark shades of gray, while dark themes are the opposite - all gray variants are a shade of white. These gray colors will be displayed against another color, usually the surface color. The surface color should always be on the opposite end of the gray in the gray scale to ensure themes look good.

To make this a bit clearer, below is the complete list of all gray and surface color variants in both a light and a dark theme.

Bootstrap Light:

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

Bootstrap Dark:

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

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

Other Colors

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

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

API References

Palettes