Ignite UI for Web Components의 팔레트
Ignite UI for Web Components 응용 프로그램의 색상을 일관되게 업데이트할 수 있는 CSS 변수를 노출합니다.
개요
Ignite UI for Web Components의 팔레트는 8가지 기본 색상(primary, secondary, gray, info, success, warn, error 및 surface에 대해 100개 이상의 색상 변형을 제공합니다.
primary, secondary 및 gray 색상은 2014 머티리얼 디자인 색상 팔레트를 따릅니다. 이는 이러한 색상에 다음 변형이 포함됨을 의미합니다.
| 모두 | *회색 없음* | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| **50** | **100** | **200** | **300** | **400** | **500** | **600** | **700** | **800** | **900** | *A100* | *A200* | *A400* | *A700* |
앞서 언급한 색상 외에도 각 색상 변형에 대한 레벨 AAA WCAG 준수 contrast 색상도 포함되어 있습니다. 이는 해당 contrast 색상 변형을 기본 색상 변형의 전경색으로 안전하게 사용할 수 있음을 의미합니다.
[!Note] 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-h: 216deg;
--ig-primary-s: 98%;
--ig-primary-l: 52%;
--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) * .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 변수에서 생성되기 때문입니다. 색상 구성표를 사용해서만 개별 색상을 재정의할 수 있습니다.
/* The HSLA representation of darkorange (#ff6e00) */
:root {
--ig-primary-600: 25.9deg, 100%, 50%;
}
이 작업을 수행할 때는 주의하세요.
:root {
/* The HSLA representation of orange (#ffa500) */
--ig-primary-500: 38.8deg, 100%, 50%;
/* The HSLA representation of blue (#0080ff) */
--ig-primary-600: 210deg, 100%, 50%;
}
일부 구성 요소 테마는 둘 이상의 색상 변형을 사용하므로 예상치 못한 결과가 발생할 수 있습니다. 우리는 단색 팔레트를 중심으로 모든 구성 요소 테마를 디자인했습니다.
Scoping
팔레트의 색상을 재정의하는 것이 상대적으로 쉽다는 것을 확인했습니다. 전역 팔레트는 애플리케이션의 styles.css 파일에 있는:root 선택기로 색상 변형 범위를 지정하여 업데이트할 수 있습니다.
회사 기본 색상이 #9f349c 이고 이에 대한 기본 변형을 생성한다고 가정해 보겠습니다. 한 가지 옵션은 Material Color Tool을 사용하여 모든 색상 변형을 생성하는 것입니다. 도구를 통해 생성된 색상을 선언하는 방법은 다음과 같습니다.
:root {
--ig-primary-50: 305deg, 35%, 93%;
--ig-primary-100: 304deg, 37%, 82%;
--ig-primary-200: 303deg, 38%, 70%;
--ig-primary-300: 303deg, 38%, 58%;
--ig-primary-400: 303deg, 38%, 50%;
--ig-primary-500: 302deg, 51%, 41%;
--ig-primary-600: 298deg, 51%, 39%;
--ig-primary-700: 293deg, 55%, 36%;
--ig-primary-800: 289deg, 56%, 33%;
--ig-primary-900: 279deg, 60%, 28%;
}
Material Color Tool은 각 색상 변형에 대한 대비 색상을 제공하지 않습니다. 특정 색상이 다른 색상과 함께 사용될 때 대비가 충분한지 확인하는 데 도움이 되는 도구가 많이 있습니다. 각 색상 변형에 대해 선택하려는 대비 색상을 결정할 때 Chrome에 내장된 대비 검사기를 사용할 수 있습니다.
단일 전역 팔레트를 갖는 것 외에도 다른 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;
}
그런 다음 클래스 속성 값을 blue-theme에서 red-theme로 변경하여 애플리케이션의 색상을 간단히 점검할 수 있습니다.
Dark vs. Light
Ignite UI for Web Components의 팔레트는 테마가 밝을지 어두울지 여부를 나타냅니다. 그것에 가장 큰 영향을 미치는 두 가지 색상은 gray과 surface 입니다. 모든 테마의 gray 색상 변형은 #fff와 같은 매우 밝은 색상 또는 #222와 같은 매우 어두운 색상을 기반으로 합니다. 밝은 테마에는 어두운 회색 음영을 기반으로 한 gray 변형이 있는 반면 어두운 테마에는 그 반대입니다. 모든 gray 변형은 흰색 음영입니다. 이러한 gray 색상은 다른 색상, 일반적으로 surface 색상과 대조되어 표시됩니다. 테마가 보기 좋게 보이도록 surface 색상은 항상 회색조의 gray 반대쪽 끝에 있어야 합니다.
이를 좀 더 명확하게 하기 위해 밝은 테마와 어두운 테마 모두에 대한 모든 gray 및 surface 색상 변형의 전체 목록이 아래에 나와 있습니다.
Bootstrap Light:
:root {
/* surface is set to a shade of white */
--ig-surface-500: 210deg, 17%, 98%;
/* gray variants */
--ig-gray-h: 210deg;
--ig-gray-s: 11%;
--ig-gray-l: 71%;
--ig-gray-a: 1;
--ig-gray-50: var(--ig-gray-h), var(--ig-gray-s), 98%;
--ig-gray-100: var(--ig-gray-h), var(--ig-gray-s), 96%;
--ig-gray-200: var(--ig-gray-h), var(--ig-gray-s), 93%;
--ig-gray-300: var(--ig-gray-h), var(--ig-gray-s), 88%;
--ig-gray-400: var(--ig-gray-h), var(--ig-gray-s), 74%;
--ig-gray-500: var(--ig-gray-h), var(--ig-gray-s), 62%;
--ig-gray-600: var(--ig-gray-h), var(--ig-gray-s), 54%;
--ig-gray-700: var(--ig-gray-h), var(--ig-gray-s), 38%;
--ig-gray-800: var(--ig-gray-h), var(--ig-gray-s), 26%;
--ig-gray-900: var(--ig-gray-h), var(--ig-gray-s), 13%;
}
Bootstrap Dark:
:root {
/* surface is set to a dark shade of gray */
--ig-surface-500: 210deg, 11%, 15%;
/* gray variants */
--ig-gray-h: 210deg;
--ig-gray-s: 11%;
--ig-gray-l: 71%;
--ig-gray-50: var(--ig-gray-h), var(--ig-gray-s), 13%;
--ig-gray-100: var(--ig-gray-h), var(--ig-gray-s), 26%;
--ig-gray-200: var(--ig-gray-h), var(--ig-gray-s), 38%;
--ig-gray-300: var(--ig-gray-h), var(--ig-gray-s), 54%;
--ig-gray-400: var(--ig-gray-h), var(--ig-gray-s), 62%;
--ig-gray-500: var(--ig-gray-h), var(--ig-gray-s), 74%;
--ig-gray-600: var(--ig-gray-h), var(--ig-gray-s), 88%;
--ig-gray-700: var(--ig-gray-h), var(--ig-gray-s), 93%;
--ig-gray-800: var(--ig-gray-h), var(--ig-gray-s), 96%;
--ig-gray-900: var(--ig-gray-h), var(--ig-gray-s), 98%;
}
gray 및 surface 색상 변형은 대부분의 구성 요소에 사용되며 전체적인 모양과 느낌에 큰 영향을 미치므로 변경할 때 주의하십시오.
Other Colors
지금까지 primary, secondary, gray 및 surface 색상 변형과 이를 재정의하는 방법을 다루었습니다. info, success, warn 및 error의 네 가지 색상이 더 있습니다. 일반적으로 다양한 상태의 색상을 설정하는 데 사용됩니다. 예를 들어, igc-input-group 구성 요소는 입력 유효성 검사 상태에서 이러한 색상을 사용합니다.
:root {
--ig-info-500: 190deg, 90%, 50%;
--ig-success-500: 152deg, 69%, 31%;
--ig-warn-500: 45deg, 100%, 51%;
--ig-error-500: 354deg, 70%, 54%;
}
API References
Palettes