팔레트

    Ignite UI for Angular 테마 엔진은 색상을 생성하고 검색하기 위한 몇 가지 강력한 기능과 믹스인을 제공합니다.

    개요

    Ignite UI for Angular의 컨텍스트에서 팔레트는 Sass Maps로 선언되며, 해당 맵의 키는 팔레트 색상(primary, secondary, surface, 등)입니다. 각 색상은 차례로 맵 자체이며 모든 색상 변형이 키로 나열됩니다. 이러한 색상 변형에 할당된 값은 모든 구성 요소 테마에서 사용되는 실제 색상입니다. 모든 팔레트 맵은 palette 함수에 의해 프로그래밍 방식으로 생성됩니다. 이 함수는 ,,,,,, successerror​ ​warn colors 인수 primary를 허용합니다. info​ ​gray​ ​surface​ ​secondary 색상은 primary 일반적으로 브랜드 색상입니다. 주로 구성 요소와 같은 igx-navbar 정적 요소의 스타일을 지정하는 데 사용됩니다. secondary 색상은 버튼, 스위치, 슬라이더 등과 같이 실행 가능한 요소에 사용되는 색상입니다. 색상 surface은 카드, 메뉴, 날짜/시간 선택기, 배너, 시트 등과 같은 일부 구성 요소의 배경색에 사용되는 색상입니다. 유일하게 필요한 인수는 for primarysecondary​ ​surface colors입니다. , gray, info, success,에 warn​ ​error 대한 surface 색상을 기본적으로 선택하고 미리 정의된 집합으로 설정합니다.

    첫 번째 색상 팔레트를 시작하려면 전역 테마의 기본 파일이 될 scss 파일을 만듭니다. 나는 내_variables.scss 것을 부를 것이다.

    // _variables.scss
    
    $melon-palette: palette(
        $primary: #2ab759,
        $secondary: #f96a88,
        $surface: #e5e5e5
    );
    scss

    전달하는 $primary​ ​$secondary 값 및/ surface 또는 다른 색상은 color 형식이어야 합니다. CSS 변수는 Sass 빌드 시간에 해결할 수 없으므로 인수로 전달할 수 없습니다.

    각 변형에 대해 자동으로 생성된 텍스트 대비 색상을 포함하여 모든 색상에 대한 변형이 포함된 팔레트를 만들었습니다. CSS 변수가 있는 팔레트에 관한 문서를 확인하지 않았다면 지금 확인해보세요. 여기에는 팔레트의 모든 색상 변형에 대한 정보가 포함되어 있습니다.

    palette 기능은 빌드 시.scss 문서 전체에서 재사용할 수 있는 색상을 생성하는 데 도움이 되도록 내부적으로 많은 작업을 수행합니다. 이 기능은 사용자를 위해 거대한 색상 맵을 생성한다는 점에서 훌륭하지만 색상 변형을 생성하는 알고리즘은 매우 독단적이며 사용자의 정확한 요구 사항과 일치하지 않을 수 있습니다. 우리의 구성 요소 테마는 팔레트가 생성되는 방식에는 관심이 없으며 지도의 모양에만 관심이 있습니다.

    팔레트를 수동으로 생성하거나 팔레트 생성 기능을 직접 생성하려는 경우 팔레트 맵으로 얻을 수 있는 것이 있습니다.

    $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
        )
    );
    
    scss

    map 키를 따옴표 - 'primary', 'secondary',, 'gray' 등 명시적으로 문자열로 설정하는 것이 중요합니다. 모든 색상 변형에 동일하게 적용됩니다 -500, 500-contrast, 등.

    미리 정의된 팔레트

    우리는 구성 요소에 대한 테마를 생성하기 위해 스키마와 함께 사용할 수 있는 사전 정의된 밝은 팔레트와 어두운 팔레트를 제공합니다.

    • 라이트 팔레트
      • $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

    모든 밝은 팔레트를 원하는 밝은 스키마와 혼합하고 일치시킬 수 있으며 그 반대도 가능합니다. 즉, 귀하의 필요와 비전에 가장 잘 맞을 것이라고 생각되는 어두운 스키마의 모든 어두운 팔레트를 혼합하여 사용할 수 있습니다.

    그레이스케일 색상

    surface colors와 primary 유사하게, secondary 회색 음영을 생성하는 데 사용할 함수에 palette 다른 색상을 제공할 수 있습니다. 모든 밝은 테마에서 팔레트를 gray 생성하는 데 사용되는 기본 색상은 #000 다음과 같거나 더 잘 알려져 있습니다 black. 색상 변형은 gray 주로 구성 요소 간에 텍스트 색상을 설정하는 데 사용됩니다. 값을 수정하면 응용 프로그램에서 배경 또는 표면 색을 변경할 때 유용합니다. 예를 들어, 응용 프로그램에서 더 어두운 표면 배경을 사용하는 경우 색상을 로 white 설정하는 gray 것이 합리적이며 모든 텍스트 색상이 음영 white을 기반으로 하도록 합니다.

    회색 음영에 white 사용하는 팔레트를 생성하려면:

    // 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
    );
    scss

    색상 변형

    기억하기 쉽고 사용하기 쉬운 기능을 제공합니다 -color. 최대 4개의 인수를 사용할 수 있습니다 -palette, color,and variant​ ​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;
    }
    scss

    $palette 인수를 생략하면 해당 CSS 변수 변형을 참조하는 문자열을 얻게 됩니다. $color 및/또는 $variant 제공하지 않으면 각각 primary500에 할당됩니다.

    App Builder | CTA 배너

    대비 텍스트 색상

    색상 변형을 검색하는 방법과 유사하게, 함수를 contrast-color 사용하여 팔레트의 각 색상 변형에 대한 대비 텍스트 색상을 가져오는 방법이 있으며, 함수와 color 동일한 유형과 인수 수를 허용합니다.

    $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;
    }
    scss

    색상 클래스

    우리는 일부 사람들이 CSS 클래스를 사용하여 텍스트나 배경 등 웹 요소에 색상을 적용하는 것을 선호한다는 것을 알고 있습니다. 팔레트의 각 색상에 대해 CSS 클래스를 생성할 수 있는 믹스인이 있습니다.

    믹스인은 CSS 클래스 이름과 팔레트 색상을 전달할 CSS 속성을 제어할 수 있는 몇 가지 인수를 사용합니다.

    • $prop- 색상을 할당할 CSS 속성입니다.
    • $prefix- 생성된 클래스 이름에 첨부할 접두사 문자열입니다. 기본값은 'igx'입니다.
    • $suffix- 생성된 클래스 이름에 첨부할 접미사 문자열입니다.
    • $palette- 사용할 팔레트입니다.

    예를 들어 요소에 배경색을 적용하는 CSS 클래스를 생성하려는 경우 다음을 수행할 수 있습니다.

    @include color-classes(
        $prop: 'background-color',
        $prefix: 'bg'
    );
    scss

    위의 코드는 팔레트의 각 색상 변형에 대한 CSS 클래스를 생성합니다. 예를 들어, primary 팔레트의 500 색상 변형에는 다음 클래스.bg-primary-500 지정됩니다.

    <div class="bg-primary-500">...</div>
    html

    CSS 변수

    문서의 CSS 변수 섹션에서 색상 팔레트에 대해 읽을 때 모든 팔레트 색상이 CSS 변수로 포함되어 있음을 알 수 있습니다. theme 믹스인을 사용하여 테마를 생성할 때마다 내부적으로 이 작업을 수행합니다. theme 본문 palette에서 또 다른 믹스인을 호출합니다. 팔레트를 가져와 그 안의 색상을 CSS 변수로 변환합니다.

    사용자 정의 팔레트 색상을 CSS 변수로 포함시키려는 경우 이 믹스인을 사용합니다.

    예는 다음과 같습니다.

    $my-palette: palette(
      $primary: #2ab759,
      $secondary: #f96a88,
      $surface: #e5e5e5
    );
    
    @include palette($my-palette);
    scss

    API 참조

    추가 리소스

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.