팔레트
Ignite UI for Angular 테마 엔진은 색상을 생성하고 검색하기 위한 몇 가지 강력한 기능과 믹스인을 제공합니다.
개요
Palettes in the context of Ignite UI for Angular are declared as Sass Maps with the keys of those map being the palette colors (primary, secondary, surface, etc.). Each color is in turn a map itself and has all color variants listed as keys. The values assigned to those color variants are the actual colors used throughout all component themes. All palette maps are generated programmatically by the palette function. The function accepts arguments for primary, secondary, surface, gray, info, success, warn, and error colors. The primary color is usually your brand color. It is mostly used to style static elements, such as the igx-navbar component. The secondary color is the one used on elements that are actionable, such as buttons, switches, sliders, etc.
The surface color is the one used for background color of some components, such as cards, menus, date/time pickers, banners sheets, etc.. The only required arguments are the ones for primary, secondary and surface colors. We default the colors for surface, gray, info, success, warn, and error to a predefined set of our choosing.
To get started with your first color palette, create an scss file that would be the base file for your global theme. I will call mine _variables.scss.
// _variables.scss
$melon-palette: palette(
$primary: #2ab759,
$secondary: #f96a88,
$surface: #e5e5e5
);
Warning
The value you pass to $primary, $secondary and surface or any other color must be of type color. You cannot pass CSS variables as arguments as those can't be resolved at Sass build-time.
각 변형에 대해 자동으로 생성된 텍스트 대비 색상을 포함하여 모든 색상에 대한 변형이 포함된 팔레트를 만들었습니다. CSS 변수가 있는 팔레트에 관한 문서를 확인하지 않았다면 지금 확인해보세요. 여기에는 팔레트의 모든 색상 변형에 대한 정보가 포함되어 있습니다.
The palette function does a lot internally to help you create colors at build-time that you can reuse throughout your .scss documents. The function is nice in that it will create a huge map of colors for you, but the algorithm for generating the color variants is very opinionated and may not match your exact needs. Our component themes don't care how the palette is generated, it only cares about the shape of the map.
팔레트를 수동으로 생성하거나 팔레트 생성 기능을 직접 생성하려는 경우 팔레트 맵으로 얻을 수 있는 것이 있습니다.
$handmade-palette: (
'primary': (
'50': #e6eff8,
'50-contrast': black,
'100': #bfd7f2,
'100-contrast': black,
'200': #98bfec,
'200-contrast': black,
'300': #85b5e9,
'300-contrast': white,
'400': #73a6e4,
'400-contrast': white,
'500': #6797de,
'500-contrast': white,
'600': #3681dd,
'600-contrast': white,
'700': #357fda,
'700-contrast': white,
'800': #306dc8,
'800-contrast': white,
'900': #284ea8,
'900-contrast': white,
'A100': #98bfec,
'A100-contrast': white,
'A200': #73a6e4,
'A200-contrast': white,
'A400': #3681dd,
'A400-contrast': white,
'A700': #284ea8,
'A700-contrast': white
),
'secondary': (
'50': #fef7e2,
'50-contrast': black,
'100': #fdeab7,
'100-contrast': black,
'200': #fbdd89,
'200-contrast': black,
'300': #fad15c,
'300-contrast': black,
'400': #f9c63f,
'400-contrast': black,
'500': #f7bd32,
'500-contrast': white,
'600': #f6b02d,
'600-contrast': white,
'700': #f49e2a,
'700-contrast': white,
'800': #f38e28,
'800-contrast': white,
'900': #f38e28,
'900-contrast': white,
'A100': #fbdd89,
'A100-contrast': black,
'A200': #f9c63f,
'A200-contrast': black,
'A400': #f6b02d,
'A400-contrast': white,
'A700': #f38e28,
'A700-contrast': white
),
'gray': (
'50': #fff,
'50-contrast': black,
'100': #fafafa,
'100-contrast': black,
'200': #f5f5f5,
'200-contrast': black,
'300': #f0f0f0,
'300-contrast': black,
'400': #dedede,
'400-contrast': black,
'500': #b3b2b2,
'500-contrast': black,
'600': #979696,
'600-contrast': white,
'700': #7b7a7a,
'700-contrast': white,
'800': #404040,
'800-contrast': white,
'900': #1a1a1a,
'900-contrast': white
),
'info': (
'500': rgb(18, 118, 211),
'500-contrast': black
),
'success': (
'500': rgb(76, 184, 96),
'500-contrast': black
),
'warn': (
'500': rgb(251, 178, 60),
'500-contrast': black
),
'error': (
'500': rgb(255, 20, 75),
'500-contrast': black
),
'surface': (
'500': rgb(255, 255, 255),
'500-contrast': black
)
);
Warning
It's important to set the map keys as strings, explicitly between quotation marks - 'primary', 'secondary', 'gray', etc. The same applies for all color variants - 500, 500-contrast, etc.
Predefined Palettes
우리는 구성 요소에 대한 테마를 생성하기 위해 스키마와 함께 사용할 수 있는 사전 정의된 밝은 팔레트와 어두운 팔레트를 제공합니다.
- 라이트 팔레트
$light-material-palette$light-fluent-excel-palette$light-fluent-word-palette$light-fluent-palette$light-bootstrap-palette$light-indigo-palette
- 다크 팔레트
$dark-material-palette$dark-fluent-excel-palette$dark-fluent-word-palette$dark-fluent-palette$dark-bootstrap-palette$dark-indigo-palette
모든 밝은 팔레트를 원하는 밝은 스키마와 혼합하고 일치시킬 수 있으며 그 반대도 가능합니다. 즉, 귀하의 필요와 비전에 가장 잘 맞을 것이라고 생각되는 어두운 스키마의 모든 어두운 팔레트를 혼합하여 사용할 수 있습니다.
Grayscale Colors
Similar to the primary, secondary and surface colors, you can provide another color to the palette function that will be used to generate shades of gray. The default color used to generate the gray palette in all light themes is #000, or better known as black. The gray color variants are mainly used for setting text colors across components. Modifying the value is useful when changing the background or surface colors in your application. For instance, if your application uses a darker surface background, setting the gray color to white is sensible, and will force all text colors to be based on shades of white.
To generate a palette that uses white for its gray shades:
// Import the Ignite UI themes library first
$company-color: #2ab759; /* Some green shade I like */
$secondary-color: #f96a88; /* Watermelon pink */
$surface-color: #e5e5e5 /* Light gray for backgrounds/ */
$grayscale-base: #fff; /* Used to generate shades of gray */
$my-color-palette: palette(
$primary: $company-color,
$secondary: $secondary-color,
$surface: $surface-color,
$gray: $grayscale-base
);
Colors Variants
We provide a function that is easy to remember and use - color. It can take up to four arguments - palette, color, variant and opacity;
// Get the primary color as CSS variable reference to the 500 color variant
$my-primary-500: color();
// Get the primary color as CSS variable reference to the 600 color variant
$my-primary-600: color($variant: 600);
// Get the primary color as CSS variable reference to the 600 color variant with .5 opacity
$my-primary-600-opacity: color($variant: 600, $opacity: .5);
// 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;
}
If you omit the $palette argument, you will get a string referencing the corresponding CSS variable variant. If you do not provide $color and/or $variant, they will be assigned to primary and 500 respectively.
Contrast Text Colors
Similar to how we retrieve color variants, there's a way to get the contrast text color for each of the color variants in the palette with the function contrast-color, accepts the same type and number of arguments as the color function.
$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- The CSS property to assign the color to.$prefix- A prefix string to be attached to the generated class name. The default is 'igx'.$suffix- A suffix string to be attached to the generated class name.$palette- The palette to use.
예를 들어 요소에 배경색을 적용하는 CSS 클래스를 생성하려는 경우 다음을 수행할 수 있습니다.
@include color-classes(
$prop: 'background-color',
$prefix: 'bg'
);
The above code will generate CSS classes for each color variant in the palette. For instance, the 500 color variant of the primary palette will be given the following class .bg-primary-500;
<div class="bg-primary-500">...</div>
CSS Variables
When reading about the color palette in the CSS Variables section of the documentation, you would've noticed that all palette colors are included as CSS variables. We do this internally every time we generate a theme using the theme mixin. The theme calls another mixin in its body - palette. It takes a palette and converts the colors in it into CSS variables.
사용자 정의 팔레트 색상을 CSS 변수로 포함시키려는 경우 이 믹스인을 사용합니다.
예는 다음과 같습니다.
$my-palette: palette(
$primary: #2ab759,
$secondary: #f96a88,
$surface: #e5e5e5
);
@include palette($my-palette);
API Reference
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub