チャートでブラシとして使用されるカラー値のリスト。
$brushes-regular: ( rgb(157 231 114), rgb(139 91 177), rgb(109 177 255), rgb(154 242 228), rgb(238 88 121), rgb(115 86 86), rgb(247 210 98), rgb(168 168 183), rgb(224 81 169), rgb(248 161 95));チャートで色覚障がいに配慮ブラシとして使用される色値のリスト。
$brushes-color-blind: ( rgb(86 180 233), rgb(0 158 115), rgb(240 228 68), rgb(213 94 0), rgb(214 0 254), rgb(0 73 159), rgb(230 159 0), rgb(0 0 0), rgb(132 240 223), rgb(115 86 86));生成されたグレーの色合いの色すべてを含むリスト。
$IGrayShades: ('50', '100', '200', '300', '400', '500', '600', '700', '800', '900');パレット カラー用のすべての生成された色合いを含むリスト。
$IColorShades: list.join($IGrayShades, ('A100', 'A200', 'A400', 'A700'));すべてのパレット カラーと、それに対応する色合いをマッピングしたリスト。
$IPaletteColors: ( 'primary': $IColorShades, 'secondary': $IColorShades, 'gray': $IGrayShades, 'surface': $IColorShades, 'info': $IColorShades, 'success': $IColorShades, 'warn': $IColorShades, 'error': $IColorShades,);Light material パレットを生成します。
$palette: palette( $primary: #0d6efd, $secondary: #6c757d, $gray: #adb5bd, $surface: #212529, $info: #0dcaf0, $success: #198754, $warn: #ffc107, $error: #dc3545, $variant: 'bootstrap',);Light green パレットを生成します。
$green-palette: palette( $primary: #09f, $secondary: #72da67, $surface: #222, $info: #1377d5, $success: #4eb862, $warn: #fbb13c, $error: #ff134a,);Light purple パレットを生成します。
$purple-palette: palette( $primary: #00b4d6, $secondary: #514590, $surface: #333, $info: #1377d5, $success: #4eb862, $warn: #fbb13c, $error: #ff134a,);Light material パレットを生成します。
$palette: palette( $primary: #0078d4, $secondary: #2b88d8, $surface: #1b1b1b, $info: #1377d5, $success: #107c10, $warn: #797673, $error: #a80000, $variant: 'fluent',);Light fluent word パレットを生成します。
$word-palette: palette( $primary: #2b579a, $secondary: #2b579a, $surface: #1b1b1b, $info: #1377d5, $success: #107c10, $warn: #797673, $error: #a80000, $variant: 'fluent',);Dark green パレットを生成します。
$excel-palette: palette( $primary: #217346, $secondary: #217346, $surface: #1b1b1b, $info: #1377d5, $success: #107c10, $warn: #797673, $error: #a80000, $variant: 'fluent',);Light material パレットを生成します。
$palette: ( 'primary': ( '50': #c5cdff, '50-contrast': black, '100': #a3aff6, '100-contrast': black, '200': #8293f8, '200-contrast': black, '300': #7385f4, '300-contrast': black, '400': #5468d9, '400-contrast': black, '500': #3f51b5, '500-contrast': white, '600': #39479c, '600-contrast': white, '700': #333d83, '700-contrast': white, '800': #2e3172, '800-contrast': white, '900': #262851, '900-contrast': white, 'A100': #39479c, 'A100-contrast': white, 'A200': #333d83, 'A200-contrast': white, 'A400': #2e3172, 'A400-contrast': white, 'A700': #262851, 'A700-contrast': white, ), 'secondary': ( '50': #c5cdff, '50-contrast': black, '100': #a3aff6, '100-contrast': black, '200': #8293f8, '200-contrast': black, '300': #7385f4, '300-contrast': black, '400': #5468d9, '400-contrast': black, '500': #3f51b5, '500-contrast': white, '600': #39479c, '600-contrast': white, '700': #333d83, '700-contrast': white, '800': #2e3172, '800-contrast': white, '900': #262851, '900-contrast': white, 'A100': #39479c, 'A100-contrast': white, 'A200': #333d83, 'A200-contrast': white, 'A400': #2e3172, 'A400-contrast': white, 'A700': #262851, 'A700-contrast': white, ), 'gray': ( '50': #24252c, '50-contrast': white, '100': #3b3d47, '100-contrast': white, '200': #545762, '200-contrast': white, '300': #6c707a, '300-contrast': white, '400': #9a9da2, '400-contrast': black, '500': #c3c4c7, '500-contrast': black, '600': #d6d8dc, '600-contrast': black, '700': #ebedf2, '700-contrast': black, '800': #f8f8fa, '800-contrast': black, '900': #fcfcfd, '900-contrast': black, ), 'info': ( '50': #f1c3ff, '50-contrast': black, '100': #e89eff, '100-contrast': black, '200': #dd71ff, '200-contrast': black, '300': #da64ff, '300-contrast': black, '400': #bc34d3, '400-contrast': white, '500': #9c27b0, '500-contrast': white, '600': #8c16a0, '600-contrast': white, '700': #7f1192, '700-contrast': white, '800': #6f0a80, '800-contrast': white, '900': #5c056b, '900-contrast': white, 'A100': #8c16a0, 'A100-contrast': white, 'A200': #7f1192, 'A200-contrast': white, 'A400': #6f0a80, 'A400-contrast': white, 'A700': #5c056b, 'A700-contrast': white, ), 'success': ( '50': #edf3e7, '50-contrast': black, '100': #d2e2c3, '100-contrast': black, '200': #b4cf9c, '200-contrast': black, '300': #95bc74, '300-contrast': black, '400': #7fad56, '400-contrast': black, '500': #689f38, '500-contrast': black, '600': #5a912a, '600-contrast': black, '700': #4e8222, '700-contrast': white, '800': #3d7012, '800-contrast': white, '900': #316109, '900-contrast': white, 'A100': #5a912a, 'A100-contrast': black, 'A200': #4e8222, 'A200-contrast': white, 'A400': #3d7012, 'A400-contrast': white, 'A700': #316109, 'A700-contrast': white, ), 'warn': ( '50': #fed7b7, '50-contrast': black, '100': #ffc696, '100-contrast': black, '200': #ffad67, '200-contrast': black, '300': #fb8f32, '300-contrast': black, '400': #fa7b0e, '400-contrast': black, '500': #f56b1d, '500-contrast': black, '600': #f05a2b, '600-contrast': black, '700': #ec4820, '700-contrast': black, '800': #df370e, '800-contrast': black, '900': #d22900, '900-contrast': white, 'A100': #f05a2b, 'A100-contrast': black, 'A200': #ec4820, 'A200-contrast': black, 'A400': #df370e, 'A400-contrast': black, 'A700': #d22900, 'A700-contrast': white, ), 'error': ( '50': #ffebf0, '50-contrast': black, '100': #ffb0b7, '100-contrast': black, '200': #fc7f8a, '200-contrast': black, '300': #ec5461, '300-contrast': black, '400': #dd3544, '400-contrast': black, '500': #cf1a2b, '500-contrast': white, '600': #c31223, '600-contrast': white, '700': #b90415, '700-contrast': white, '800': #ae0111, '800-contrast': white, '900': #9f000f, '900-contrast': white, 'A100': #c31223, 'A100-contrast': white, 'A200': #b90415, 'A200-contrast': white, 'A400': #ae0111, 'A400-contrast': white, 'A700': #9f000f, 'A700-contrast': white, ), 'surface': $surface-shades, _meta: ( variant: 'indigo', ),);Light material パレットを生成します。
$palette: palette( $primary: #09f, $secondary: #df1b74, $surface: #222, $info: #1377d5, $success: #4eb862, $warn: #faa419, $error: #ff134a, $variant: 'material',);Light material パレットを生成します。
$palette: palette( $primary: #0d6efd, $secondary: #6c757d, $gray: #adb5bd, $surface: #f8f9fa, $info: #0dcaf0, $success: #198754, $warn: #ffc107, $error: #dc3545, $variant: 'bootstrap',);Light green パレットを生成します。
$green-palette: palette( $primary: #09f, $secondary: #72da67, $surface: #fff, $info: #1377d5, $success: #4eb862, $warn: #fbb13c, $error: #ff134a,);Light purple パレットを生成します。
$purple-palette: palette( $primary: #00b4d6, $secondary: #514590, $surface: #fff, $info: #1377d5, $success: #4eb862, $warn: #fbb13c, $error: #ff134a,);Light material パレットを生成します。
$palette: palette( $primary: #0078d4, $secondary: #2b88d8, $surface: #fff, $info: #1377d5, $success: #107c10, $warn: #797673, $error: #a80000, $variant: 'fluent',);Light fluent word パレットを生成します。
$word-palette: palette( $primary: #2b579a, $secondary: #2b579a, $surface: #fff, $info: #1377d5, $success: #107c10, $warn: #797673, $error: #a80000, $variant: 'fluent',);Dark green パレットを生成します。
$excel-palette: palette( $primary: #217346, $secondary: #217346, $surface: #fff, $info: #1377d5, $success: #107c10, $warn: #797673, $error: #a80000, $variant: 'fluent',);Light material パレットを生成します。
$palette: ( 'primary': ( '50': #c5cdff, '50-contrast': black, '100': #a3aff6, '100-contrast': black, '200': #8293f8, '200-contrast': black, '300': #7385f4, '300-contrast': black, '400': #5468d9, '400-contrast': black, '500': #3f51b5, '500-contrast': white, '600': #39479c, '600-contrast': white, '700': #333d83, '700-contrast': white, '800': #2e3172, '800-contrast': white, '900': #262851, '900-contrast': white, 'A100': #39479c, 'A100-contrast': white, 'A200': #333d83, 'A200-contrast': white, 'A400': #2e3172, 'A400-contrast': white, 'A700': #262851, 'A700-contrast': white, ), 'secondary': ( '50': #c5cdff, '50-contrast': black, '100': #a3aff6, '100-contrast': black, '200': #8293f8, '200-contrast': black, '300': #7385f4, '300-contrast': black, '400': #5468d9, '400-contrast': black, '500': #3f51b5, '500-contrast': white, '600': #39479c, '600-contrast': white, '700': #333d83, '700-contrast': white, '800': #2e3172, '800-contrast': white, '900': #262851, '900-contrast': white, 'A100': #39479c, 'A100-contrast': white, 'A200': #333d83, 'A200-contrast': white, 'A400': #2e3172, 'A400-contrast': white, 'A700': #262851, 'A700-contrast': white, ), 'gray': ( '50': #fcfcfd, '50-contrast': black, '100': #f8f8fa, '100-contrast': black, '200': #ebedf2, '200-contrast': black, '300': #d6d8dc, '300-contrast': black, '400': #c3c4c7, '400-contrast': black, '500': #9a9da2, '500-contrast': black, '600': #6c707a, '600-contrast': white, '700': #545762, '700-contrast': white, '800': #3b3d47, '800-contrast': white, '900': #24252c, '900-contrast': white, ), 'info': ( '50': #f1c3ff, '50-contrast': black, '100': #e89eff, '100-contrast': black, '200': #dd71ff, '200-contrast': black, '300': #da64ff, '300-contrast': black, '400': #bc34d3, '400-contrast': white, '500': #9c27b0, '500-contrast': white, '600': #8c16a0, '600-contrast': white, '700': #7f1192, '700-contrast': white, '800': #6f0a80, '800-contrast': white, '900': #5c056b, '900-contrast': white, 'A100': #8c16a0, 'A100-contrast': white, 'A200': #7f1192, 'A200-contrast': white, 'A400': #6f0a80, 'A400-contrast': white, 'A700': #5c056b, 'A700-contrast': white, ), 'success': ( '50': #edf3e7, '50-contrast': black, '100': #d2e2c3, '100-contrast': black, '200': #b4cf9c, '200-contrast': black, '300': #95bc74, '300-contrast': black, '400': #7fad56, '400-contrast': black, '500': #689f38, '500-contrast': black, '600': #5a912a, '600-contrast': black, '700': #4e8222, '700-contrast': white, '800': #3d7012, '800-contrast': white, '900': #316109, '900-contrast': white, 'A100': #5a912a, 'A100-contrast': black, 'A200': #4e8222, 'A200-contrast': white, 'A400': #3d7012, 'A400-contrast': white, 'A700': #316109, 'A700-contrast': white, ), 'warn': ( '50': #fed7b7, '50-contrast': black, '100': #ffc696, '100-contrast': black, '200': #ffad67, '200-contrast': black, '300': #fb8f32, '300-contrast': black, '400': #fa7b0e, '400-contrast': black, '500': #f56b1d, '500-contrast': black, '600': #f05a2b, '600-contrast': black, '700': #ec4820, '700-contrast': black, '800': #df370e, '800-contrast': black, '900': #d22900, '900-contrast': white, 'A100': #f05a2b, 'A100-contrast': black, 'A200': #ec4820, 'A200-contrast': black, 'A400': #df370e, 'A400-contrast': black, 'A700': #d22900, 'A700-contrast': white, ), 'error': ( '50': #ffebf0, '50-contrast': black, '100': #ffb0b7, '100-contrast': black, '200': #fc7f8a, '200-contrast': black, '300': #ec5461, '300-contrast': black, '400': #dd3544, '400-contrast': black, '500': #cf1a2b, '500-contrast': white, '600': #c31223, '600-contrast': white, '700': #b90415, '700-contrast': white, '800': #ae0111, '800-contrast': white, '900': #9f000f, '900-contrast': white, 'A100': #c31223, 'A100-contrast': white, 'A200': #b90415, 'A200-contrast': white, 'A400': #ae0111, 'A400-contrast': white, 'A700': #9f000f, 'A700-contrast': white, ), 'surface': $surface-shades, _meta: ( variant: 'indigo', ),);Light material パレットを生成します。
$palette: palette( $primary: #09f, $secondary: #df1b74, $surface: white, $info: #1377d5, $success: #4eb862, $warn: #faa419, $error: #ff134a, $variant: 'material',);$light-material-palette と同じです。
$light-palette: palettes.$light-material-palette;$dark-material-palette と同じですが、gray と surface カラーを変更します。
$dark-palette: palettes.$dark-material-palette;カラー パレットを生成します。
// 必要な色を渡します。$my-palette: palette( $primary: rebeccapurple, $secondary: orange, $surface: white,);
// 生成されたパレットの色を CSS 変数として含めます。@include palette($my-palette);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $primary * | Color | - | 基本パレットの生成に使用する primary カラー (必須)。 |
| $secondary * | Color | - | 二次色パレットの生成に使用する secondary カラー (必須)。 |
| $surface * | Color | - | コンポーネントの背景として使用されるカラー (必須)。 |
| $gray | Color | null | グレースケール パレットの生成に使用するカラー (オプション)。 |
| $info | Color | #1377d5 | アプリケーション内で使用する information カラー (オプション)。 |
| $success | Color | #4eb862 | アプリケーション内で使用する success カラー (オプション)。 |
| $warn | Color | #faa419 | アプリケーション内で使用する warning カラー (オプション)。 |
| $error | Color | #ff134a | アプリケーション内で使用する error カラー (オプション)。 |
| $variant | String | null | 内部で使用されます (オプション)。 |
指定された色の色合いを生成します。
$color-name: 'accent';
// 生成されたパレットの色を CSS 変数として含みます。@include palette( ( #{$color-name}: shades($color-name, #a57865, $IColorShades), ));| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $name * | String | - | カラーの名前。 |
| $color * | Color | - | 色合いの生成に使用する基本色。 |
| $shades * | List | - | 色合いバリアントのリスト。 |
| $surface | Color | null | surface のカラー。gray の色合いを生成する場合に便利です (オプション)。 |
カラーパレットから色を取得します。
パレットから色を取得する方法
// パレットを指定せずに取得する場合.my-component-1 { background: color($color: primary, $variant: 200); // var(--ig-primary-200) }
// 特定のパレットを使用して取得する場合.my-component-2 { background: color($my-palette, primary, 200); // #88c0e5 }不透明度を指定して色を取得する方法
.my-component-1 { background: color($color: primary, $variant: 200, $opacity: 0.5); // hsl(from var(--ig-primary-200) h s l/0.5) }
// 特定のパレットを使用して取得する場合.my-component-2 { background: color($my-palette, primary, 200, $opacity: 0.5); // rgba(136, 192, 229, 0.5) }| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $palette | Map | null | ソースのパレット マップ (オプション)。 |
| $color | String | primary | カラー パレットからターゲット色を取得します。 |
| $variant | Number | String | 500 | カラー パレットからのターゲット色の影 |
| $opacity | Number | null | 色合いに適用するオプションの不透明度。 |
カラー レットから指定のカラー バリアントのためコントラストの色を取得します。color 関数と同様に動作します。
パレットを通さずに
.my-component { background: color($color: 'primary', $variant: 200); color: contrast-color($color: 'primary', $variant: 200); }| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $palette | Map | null | ソースのパレット マップ (オプション)。 |
| $color | String | primary | カラー パレットからターゲット色を取得します。 |
| $variant | Number | String | 500 | カラー パレットからのターゲット色の影。 |
| $opacity | Number | null | 色合いに適用するオプションの不透明度。 |
チャート ブラシとして使用される色のリストを返します。戻り値は、enhanced-accessibility の値によって異なります。
指定されたパレットのため CSS 変数を生成します。
パレットのため CSS 変数を生成します。
$palette: palette($primary: red, $secondary: blue, $gray: #000);@include palette($palette);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $palette * | Map | - | CSS 変数の生成に使用するパレット。 |
| $contrast | Boolean | true | コントラスト色を含めるかどうかを指定します。 |