팔레트
Ignite UI for Angular 색상 생성 및 검색을 위한 여러 가지 강력한 기능과 믹스인을 제공합니다.
개요
Ignite UI for Angular 컨텍스트의 팔레트는 다음과 같이 선언됩니다. 사스 지도 해당 맵의 키는 팔레트 색상(primary, secondary, gray, 등.). 각 색상은 결국 맵 자체가 되며 모든 색상 변형이 키로 나열됩니다. 해당 색상 변형에 할당된 값은 모든 구성 요소 테마 전체에 사용되는 실제 색상입니다. 모든 팔레트 맵은 팔레트 기능에 의해 프로그래밍 방식으로 생성됩니다. 이 함수는 다음에 대한 인수를 허용합니다. primary, secondary, gray, surface, info, success, warn, 그리고 error 그림 물감. 그만큼 primary 색상은 일반적으로 브랜드 색상입니다. 주로 다음과 같은 정적 요소의 스타일을 지정하는 데 사용됩니다. igx-navbar 요소. 보조 색상은 버튼, 스위치, 슬라이더 등과 같이 실행 가능한 요소에 사용되는 색상입니다. 유일한 필수 인수는 primary 그리고 secondary 그림 물감. 표면 색상은 카드, 메뉴, 날짜/시간 선택기, 배너 시트 등과 같은 일부 구성 요소의 '표면' 색상을 지정하는 데 사용됩니다. surface, gray, info, success, warn, 그리고 error 우리가 선택한 사전 정의된 세트에 적용됩니다.
첫 번째 색상 팔레트를 시작하려면 전역 테마의 기본 파일이 될 scss 파일을 만듭니다. 내 이름을 _" variable.scss" 라고 부르겠습니다.
// _variables.scss
$melon-palette: palette(
$primary: #2ab759,
$secondary: #f96a88,
);
Warning
$primary, $secondary 또는 기타 색상에 전달하는 값은 color 유형이어야 합니다. CSS 변수는 Sass 빌드 타임에 해결될 수 없으므로 인수로 전달할 수 없습니다.
각 변형에 대해 자동으로 생성된 텍스트 대비 색상을 포함하여 모든 색상에 대한 변형이 포함된 팔레트를 만들었습니다. CSS 변수가 있는 팔레트에 관한 문서를 확인하지 않았다면 지금 확인해보세요. 여기에는 팔레트의 모든 색상 변형에 대한 정보가 포함되어 있습니다.
palette 기능은 빌드 시.scss 문서 전체에서 재사용할 수 있는 색상을 생성하는 데 도움이 되도록 내부적으로 많은 작업을 수행합니다. 이 기능은 사용자를 위해 거대한 색상 맵을 생성한다는 점에서 훌륭하지만 색상 변형을 생성하는 알고리즘은 매우 독단적이며 사용자의 정확한 요구 사항과 일치하지 않을 수 있습니다. 우리의 구성 요소 테마는 팔레트가 생성되는 방식에는 관심이 없으며 지도의 모양에만 관심이 있습니다.
팔레트를 수동으로 생성하거나 팔레트 생성 기능을 직접 생성하려는 경우 팔레트 맵으로 얻을 수 있는 것이 있습니다.
$handmade-palette: (
primary: (
50: to-hsl(#e6eff8),
'50-contrast': black,
100: to-hsl(#bfd7f2),
'100-contrast': black,
200: to-hsl(#98bfec),
'200-contrast': black,
300: to-hsl(#85b5e9),
'300-contrast': white,
400: to-hsl(#73a6e4),
'400-contrast': white,
500: to-hsl(#6797de),
'500-contrast': white,
600: to-hsl(#3681dd),
'600-contrast': white,
700: to-hsl(#357fda),
'700-contrast': white,
800: to-hsl(#306dc8),
'800-contrast': white,
900: to-hsl(#284ea8),
'900-contrast': white,
'A100': to-hsl(#98bfec),
'A100-contrast': white,
'A200': to-hsl(#73a6e4),
'A200-contrast': white,
'A400': to-hsl(#3681dd),
'A400-contrast': white,
'A700': to-hsl(#284ea8),
'A700-contrast': white
),
secondary: (
50: to-hsl(#fef7e2),
'50-contrast': black,
100: to-hsl(#fdeab7),
'100-contrast': black,
200: to-hsl(#fbdd89),
'200-contrast': black,
300: to-hsl(#fad15c),
'300-contrast': black,
400: to-hsl(#f9c63f),
'400-contrast': black,
500: to-hsl(#f7bd32),
'500-contrast': white,
600: to-hsl(#f6b02d),
'600-contrast': white,
700: to-hsl(#f49e2a),
'700-contrast': white,
800: to-hsl(#f38e28),
'800-contrast': white,
900: to-hsl(#f38e28),
'900-contrast': white,
'A100': to-hsl(#fbdd89),
'A100-contrast': black,
'A200': to-hsl(#f9c63f),
'A200-contrast': black,
'A400': to-hsl(#f6b02d),
'A400-contrast': white,
'A700': to-hsl(#f38e28),
'A700-contrast': white
),
gray: (
50: to-hsl(#fff),
'50-contrast': black,
100: to-hsl(#fafafa),
'100-contrast': black,
200: to-hsl(#f5f5f5),
'200-contrast': black,
300: to-hsl(#f0f0f0),
'300-contrast': black,
400: to-hsl(#dedede),
'400-contrast': black,
500: to-hsl(#b3b2b2),
'500-contrast': black,
600: to-hsl(#979696),
'600-contrast': white,
700: to-hsl(#7b7a7a),
'700-contrast': white,
800: to-hsl(#404040),
'800-contrast': white,
900: to-hsl(#1a1a1a),
'900-contrast': white
),
info: (
500: to-hsl(rgb(18, 118, 211)),
'500-contrast': black
),
success: (
500: to-hsl(rgb(76, 184, 96)),
'500-contrast': black
),
warn: (
500: to-hsl(rgb(251, 178, 60)),
'500-contrast': black
),
error: (
500: to-hsl(rgb(255, 20, 75)),
'500-contrast': black
),
surface: (
500: to-hsl(rgb(255, 255, 255)),
'500-contrast': black
)
);
:root {
--ig-primary-a: 1;
--ig-secondary-a: 1;
--ig-info-a: 1;
--ig-success-a: 1;
--ig-warn-a: 1;
--ig-error-a: 1;
--ig-gray-a: 1;
--ig-surface-a: 1;
}
to-hsl() 함수는 색상 공간에 관계없이 색상을 가져와 팔레트의 각 음영에 대한 CSS 변수를 선언할 때 사용되는 쉼표로 구분된 목록으로 색상, 채도 및 밝기 값을 반환합니다. 각 팔레트 색상(기본, 보조, 회색 등)에 대한 alpha 값은 별도로 초기화되어야 합니다.
Predefined Palettes
우리는 구성 요소에 대한 테마를 생성하기 위해 스키마와 함께 사용할 수 있는 사전 정의된 밝은 팔레트와 어두운 팔레트를 제공합니다.
- 라이트 팔레트
- $ 가벼운 재료 팔레트
- $light-fluent-excel-팔레트
- $light-fluent-단어 팔레트
- $ 가벼운 유창 팔레트
- $라이트-부트스트랩-팔레트
- $라이트-인디고-팔레트
- 다크 팔레트
- $어두운 재료 팔레트
- $dark-fluent-excel-팔레트
- $dark-fluent-단어 팔레트
- $dark-fluent-팔레트
- $어두운-부트스트랩-팔레트
- $ 다크 인디고 팔레트
또한 사용할 수 있는 몇 가지 추가 팔레트도 제공됩니다.
- 라이트 추가 팔레트
- $ 밝은 녹색 팔레트
- $ 밝은 보라색 팔레트
- 어두운 추가 팔레트
- $진한 녹색 팔레트
- $어두운 보라색 팔레트
모든 밝은 팔레트를 원하는 밝은 스키마와 혼합하고 일치시킬 수 있으며 그 반대도 가능합니다. 즉, 귀하의 필요와 비전에 가장 잘 맞을 것이라고 생각되는 어두운 스키마의 모든 어두운 팔레트를 혼합하여 사용할 수 있습니다.
The Default Palette
theme 믹스인은 팔레트(이전 섹션 참조)를 인수 중 하나로 사용합니다. 전달된 팔레트는 전역 $default-palette 변수에 할당됩니다. 이 변수에 저장된 이 팔레트는 팔레트가 필요할 때마다 Sass 라이브러리 전체에서 대체 팔레트로 사용되지만 사용자가 명시적으로 제공하지 않습니다.
이 지식을 활용하면 애플리케이션의 여러 Sass 문서에서 동일한 팔레트를 재사용할 수 있습니다.
예를 들어 앱에 다음 Sass 파일이 있을 수 있습니다.
// src/styles/_variables.scss
$my-palette: palette(
$primary: #2ab759,
$secondary: #f96a88,
);
$default-palette: $my-palette;
기본 스타일 파일에서:
// src/styles/styles.scss
@use 'variables' as *;
@include theme($palette: $my-palette);
구성요소.scss 파일에서:
@use '../styles/styles/variables' as *;
:host {
background: color($variant: 900);
}
이렇게 하면_variables.scss 파일에 선언된 동일한 팔레트가 모든 Sass 파일에서 사용됩니다.
Grayscale Colors
primary 및 secondary 색상과 유사하게 회색 음영을 생성하는 데 사용되는 palette 기능에 다른 색상을 제공할 수 있습니다. 모든 조명 테마에서 gray 팔레트를 생성하는 데 사용되는 기본 색상은 #000 또는 black으로 더 잘 알려져 있습니다. gray 색상 변형은 주로 구성 요소 전체에 텍스트 색상을 설정하는 데 사용됩니다. 값을 수정하면 애플리케이션에서 배경색이나 표면 색상을 변경할 때 유용합니다. 예를 들어, 애플리케이션이 더 어두운 표면 배경을 사용하는 경우 gray 색상을 white으로 설정하는 것이 합리적이며 모든 텍스트 색상이 white 음영을 기반으로 하도록 강제합니다.
회색 음영에 white 사용하는 팔레트를 생성하려면:
// Import the Ignite UI themes library first
$company-color: #2ab759; /* Some green shade I like */
$secondary-color: #f96a88; /* Watermelon pink */
$grayscale-base: #fff; /* Used to generate shades of gray */
$my-color-palette: palette(
$primary: $company-color,
$secondary: $secondary-color,
$gray: $grayscale-base
);
Colors Variants
기억하기 쉽고 사용하기 쉬운 기능인 color 제공합니다. palette, color, variant 최대 3개의 인수를 사용할 수 있습니다.
// Get the primary CSS variable reference of the 500 color variant
$my-primary-500: color();
// Get the primary CSS variable reference of the 600 color variant
$my-primary-600: color($variant: 600);
// Get the secondary A700 color variant as a HEX value from $my-palette
$my-primary-A700: color($my-palette, 'secondary', 'A700');
// Get the warn 500 color variant as HEX value from $my-palette
$my-warning-color: color($my-palette, 'warn');
.my-awesome-class {
background: $my-primary-600;
border-color: $my-primary-A700;
}
.warning-bg {
background: $my-warning-color;
}
$palette 인수를 생략하면 해당 CSS 변수 변형을 참조하는 문자열을 얻게 됩니다. $color 및/또는 $variant 제공하지 않으면 각각 primary 및 500에 할당됩니다.
Contrast Text Colors
색상 변형을 검색하는 방법과 유사하게 팔레트의 각 색상 변형에 대한 대비 텍스트 색상을 가져오는 방법이 있습니다.
$my-primary-800: color($my-palette, 'primary', 600);
$my-primary-800-text: contrast-color($my-palette, 'primary', 600);
// sample usage
.my-awesome-article {
color: $my-primary-800-text;
background: $my-primary-800;
}
Color Classes
우리는 일부 사람들이 CSS 클래스를 사용하여 텍스트나 배경 등 웹 요소에 색상을 적용하는 것을 선호한다는 것을 알고 있습니다. 팔레트의 각 색상에 대해 CSS 클래스를 생성할 수 있는 믹스인이 있습니다.
믹스인은 CSS 클래스 이름과 팔레트 색상을 전달할 CSS 속성을 제어할 수 있는 몇 가지 인수를 사용합니다.
$prop- 색상을 할당할 CSS 속성입니다.$prefix- 생성된 클래스 이름에 첨부할 접두사 문자열입니다. 기본값은 'igx'입니다.$suffix- 생성된 클래스 이름에 첨부할 접미사 문자열입니다.$palette- 사용할 팔레트입니다.
예를 들어 요소에 배경색을 적용하는 CSS 클래스를 생성하려는 경우 다음을 수행할 수 있습니다.
@include color-classes(
$prop: 'background-color',
$prefix: 'bg'
);
위의 코드는 팔레트의 각 색상 변형에 대한 CSS 클래스를 생성합니다. 예를 들어, primary 팔레트의 500 색상 변형에는 다음 클래스.bg-primary-500 지정됩니다.
<div class="bg-primary-500">...</div>
CSS Variables
문서의 CSS 변수 섹션에서 색상 팔레트에 대해 읽을 때 모든 팔레트 색상이 CSS 변수로 포함되어 있음을 알 수 있습니다. theme 믹스인을 사용하여 테마를 생성할 때마다 내부적으로 이 작업을 수행합니다. theme 본문 palette에서 또 다른 믹스인을 호출합니다. 팔레트를 가져와 그 안의 색상을 CSS 변수로 변환합니다.
사용자 정의 팔레트 색상을 CSS 변수로 포함시키려는 경우 이 믹스인을 사용합니다.
예는 다음과 같습니다.
$my-palette: palette(
$primary: #2ab759,
$secondary: #f96a88,
);
@include palette($my-palette);
API Reference
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub