Ignite UI for Web Components의 팔레트

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

개요

Ignite UI for Web Components의 팔레트는 8가지 기본 색상인 -primary, secondary, surface, success warn gray info 및 error에 대한 CSS 변수로 80개 이상의 색상 변형을 제공합니다.

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이 포함되지 않지만 및 secondary 색상에는 primary 14가지 색상 변형이 모두 포함됩니다. 2014 머티리얼 디자인 컬러 팔레트에 포함되지 않은 5 가지 추가 색상 -info,,, warn error, and surface success.

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

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

다음은 Light Bootstrap Palette에 선언된 primary 색상의 일부입니다.

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

모든 기본 색상 변형은 하나의 기본 변수 색상 변형--ig-primary-500에서 파생됩니다. 다른 색상 변수--ig-secondary-500--ig-surface-500 등도 마찬가지입니다. 다른 변형은 주요 변수 색상 변형 500을 가져 와서 변경하고 (600, 700 등)에 할당 된 변수 변형에 따라 변경하는 staturation lightness 상대 색상 함수를 hsl() 통해 생성됩니다. 우리는 런타임에 , secondary,의 surface 모든 변형 primary과 다른 색상을 수정할 수 있기 때문에 이 접근 방식을 사용하기로 결정했습니다.

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;
}
css

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

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

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

Scoping

팔레트의 색상을 재정의하는 것이 상대적으로 쉽다는 것을 확인했습니다. 전역 팔레트는 애플리케이션의 styles.css 파일에 있는:root 선택기로 색상 변형 범위를 지정하여 업데이트할 수 있습니다.

회사의 기본 색상이 #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

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

Dark vs. Light

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

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

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

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

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

Other Colors

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

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

API References

Palettes