@patternfly/patternfly 6.3.0-prerelease.78 → 6.3.0-prerelease.79

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/components/CodeEditor/code-editor.css +17 -2
  2. package/components/CodeEditor/code-editor.scss +20 -2
  3. package/components/_index.css +17 -2
  4. package/docs/components/CodeEditor/examples/CodeEditor.md +17 -3
  5. package/package.json +2 -2
  6. package/patternfly-no-globals.css +17 -2
  7. package/patternfly.css +17 -2
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/components/CodeEditor/code-editor.css CHANGED
@@ -41,6 +41,7 @@
41
41
  --pf-v6-c-code-editor__header-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
42
42
  --pf-v6-c-code-editor__header-main--PaddingInlineStart: var(--pf-t--global--spacer--sm);
43
43
  --pf-v6-c-code-editor__tab--BackgroundColor: var(--pf-t--global--background--color--primary--default);
44
+ --pf-v6-c-code-editor--m-read-only__tab--BackgroundColor: var(--pf-v6-c-code-editor--m-read-only__main--BackgroundColor);
44
45
  --pf-v6-c-code-editor__tab--Color: var(--pf-t--global--text--color--subtle);
45
46
  --pf-v6-c-code-editor__tab--PaddingBlockStart: var(--pf-t--global--spacer--sm);
46
47
  --pf-v6-c-code-editor__tab--PaddingInlineEnd: var( --pf-t--global--spacer--sm);
@@ -60,6 +61,7 @@
60
61
  flex-direction: column;
61
62
  }
62
63
  .pf-v6-c-code-editor.pf-m-read-only {
64
+ --pf-v6-c-code-editor__tab--BackgroundColor: var(--pf-v6-c-code-editor--m-read-only__tab--BackgroundColor);
63
65
  --pf-v6-c-code-editor__main--BackgroundColor: var(--pf-v6-c-code-editor--m-read-only__main--BackgroundColor);
64
66
  }
65
67
  .pf-v6-c-code-editor.pf-m-full-height {
@@ -76,17 +78,29 @@
76
78
  position: relative;
77
79
  display: flex;
78
80
  }
79
- .pf-v6-c-code-editor__header::before {
81
+ .pf-v6-c-code-editor__header::before, .pf-v6-c-code-editor__header::after {
82
+ position: absolute;
83
+ pointer-events: none;
84
+ content: "";
85
+ }
86
+ .pf-v6-c-code-editor__header::after {
80
87
  position: absolute;
81
88
  inset: 0;
82
89
  pointer-events: none;
83
90
  content: "";
84
91
  border: var(--pf-v6-c-code-editor__header--BorderWidth) solid var(--pf-v6-c-code-editor__header--BorderColor);
85
- border-block-end: var(--pf-v6-c-code-editor__header--before--BorderBlockEndWidth) solid var(--pf-v6-c-code-editor__header--before--BorderBlockEndColor);
92
+ border-block-end-width: 0;
86
93
  border-start-start-radius: var(--pf-v6-c-code-editor__header--BorderStartStartRadius);
87
94
  border-start-end-radius: var(--pf-v6-c-code-editor__header--BorderStartEndRadius);
88
95
  }
96
+ .pf-v6-c-code-editor__header::before {
97
+ inset-block-end: 0;
98
+ inset-inline-start: 0;
99
+ inset-inline-end: 0;
100
+ border-block-end: var(--pf-v6-c-code-editor__header--before--BorderBlockEndWidth) solid var(--pf-v6-c-code-editor__header--before--BorderBlockEndColor);
101
+ }
89
102
  .pf-v6-c-code-editor__header.pf-m-plain {
103
+ --pf-v6-c-code-editor__header--BorderWidth: 0;
90
104
  --pf-v6-c-code-editor__header-content--BackgroundColor: var(--pf-v6-c-code-editor__header-content--m-plain--BackgroundColor);
91
105
  }
92
106
 
@@ -183,6 +197,7 @@
183
197
  padding-block-end: var(--pf-v6-c-code-editor__tab--PaddingBlockEnd);
184
198
  padding-inline-start: var(--pf-v6-c-code-editor__tab--PaddingInlineStart);
185
199
  padding-inline-end: var(--pf-v6-c-code-editor__tab--PaddingInlineEnd);
200
+ margin-inline-start: auto;
186
201
  color: var(--pf-v6-c-code-editor__tab--Color);
187
202
  background-color: var(--pf-v6-c-code-editor__tab--BackgroundColor);
188
203
  border-color: var(--pf-v6-c-code-editor__tab--BorderColor);
package/components/CodeEditor/code-editor.scss CHANGED
@@ -58,6 +58,7 @@
58
58
 
59
59
  // tab
60
60
  --#{$code-editor}__tab--BackgroundColor: var(--pf-t--global--background--color--primary--default);
61
+ --#{$code-editor}--m-read-only__tab--BackgroundColor: var(--#{$code-editor}--m-read-only__main--BackgroundColor);
61
62
  --#{$code-editor}__tab--Color: var(--pf-t--global--text--color--subtle);
62
63
  --#{$code-editor}__tab--PaddingBlockStart: var(--pf-t--global--spacer--sm);
63
64
  --#{$code-editor}__tab--PaddingInlineEnd: var( --pf-t--global--spacer--sm);
@@ -79,6 +80,7 @@
79
80
  flex-direction: column;
80
81
 
81
82
  &.pf-m-read-only {
83
+ --#{$code-editor}__tab--BackgroundColor: var(--#{$code-editor}--m-read-only__tab--BackgroundColor);
82
84
  --#{$code-editor}__main--BackgroundColor: var(--#{$code-editor}--m-read-only__main--BackgroundColor);
83
85
  }
84
86
 
@@ -97,18 +99,33 @@
97
99
  position: relative;
98
100
  display: flex;
99
101
 
100
- &::before {
102
+ &::before,
103
+ &::after {
104
+ position: absolute;
105
+ pointer-events: none;
106
+ content: "";
107
+ }
108
+
109
+ &::after {
101
110
  position: absolute;
102
111
  inset: 0;
103
112
  pointer-events: none;
104
113
  content: "";
105
114
  border: var(--#{$code-editor}__header--BorderWidth) solid var(--#{$code-editor}__header--BorderColor);
106
- border-block-end: var(--#{$code-editor}__header--before--BorderBlockEndWidth) solid var(--#{$code-editor}__header--before--BorderBlockEndColor); // TODO - remove in breaking change
115
+ border-block-end-width: 0;
107
116
  border-start-start-radius: var(--#{$code-editor}__header--BorderStartStartRadius);
108
117
  border-start-end-radius: var(--#{$code-editor}__header--BorderStartEndRadius);
109
118
  }
110
119
 
120
+ &::before {
121
+ inset-block-end: 0;
122
+ inset-inline-start: 0;
123
+ inset-inline-end: 0;
124
+ border-block-end: var(--#{$code-editor}__header--before--BorderBlockEndWidth) solid var(--#{$code-editor}__header--before--BorderBlockEndColor);
125
+ }
126
+
111
127
  &.pf-m-plain {
128
+ --#{$code-editor}__header--BorderWidth: 0;
112
129
  --#{$code-editor}__header-content--BackgroundColor: var(--#{$code-editor}__header-content--m-plain--BackgroundColor);
113
130
  }
114
131
  }
@@ -212,6 +229,7 @@
212
229
  padding-block-end: var(--#{$code-editor}__tab--PaddingBlockEnd);
213
230
  padding-inline-start: var(--#{$code-editor}__tab--PaddingInlineStart);
214
231
  padding-inline-end: var(--#{$code-editor}__tab--PaddingInlineEnd);
232
+ margin-inline-start: auto;
215
233
  color: var(--#{$code-editor}__tab--Color);
216
234
  background-color: var(--#{$code-editor}__tab--BackgroundColor);
217
235
  border-color: var(--#{$code-editor}__tab--BorderColor);
package/components/_index.css CHANGED
@@ -3284,6 +3284,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3284
3284
  --pf-v6-c-code-editor__header-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3285
3285
  --pf-v6-c-code-editor__header-main--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3286
3286
  --pf-v6-c-code-editor__tab--BackgroundColor: var(--pf-t--global--background--color--primary--default);
3287
+ --pf-v6-c-code-editor--m-read-only__tab--BackgroundColor: var(--pf-v6-c-code-editor--m-read-only__main--BackgroundColor);
3287
3288
  --pf-v6-c-code-editor__tab--Color: var(--pf-t--global--text--color--subtle);
3288
3289
  --pf-v6-c-code-editor__tab--PaddingBlockStart: var(--pf-t--global--spacer--sm);
3289
3290
  --pf-v6-c-code-editor__tab--PaddingInlineEnd: var( --pf-t--global--spacer--sm);
@@ -3303,6 +3304,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3303
3304
  flex-direction: column;
3304
3305
  }
3305
3306
  .pf-v6-c-code-editor.pf-m-read-only {
3307
+ --pf-v6-c-code-editor__tab--BackgroundColor: var(--pf-v6-c-code-editor--m-read-only__tab--BackgroundColor);
3306
3308
  --pf-v6-c-code-editor__main--BackgroundColor: var(--pf-v6-c-code-editor--m-read-only__main--BackgroundColor);
3307
3309
  }
3308
3310
  .pf-v6-c-code-editor.pf-m-full-height {
@@ -3319,17 +3321,29 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3319
3321
  position: relative;
3320
3322
  display: flex;
3321
3323
  }
3322
- .pf-v6-c-code-editor__header::before {
3324
+ .pf-v6-c-code-editor__header::before, .pf-v6-c-code-editor__header::after {
3325
+ position: absolute;
3326
+ pointer-events: none;
3327
+ content: "";
3328
+ }
3329
+ .pf-v6-c-code-editor__header::after {
3323
3330
  position: absolute;
3324
3331
  inset: 0;
3325
3332
  pointer-events: none;
3326
3333
  content: "";
3327
3334
  border: var(--pf-v6-c-code-editor__header--BorderWidth) solid var(--pf-v6-c-code-editor__header--BorderColor);
3328
- border-block-end: var(--pf-v6-c-code-editor__header--before--BorderBlockEndWidth) solid var(--pf-v6-c-code-editor__header--before--BorderBlockEndColor);
3335
+ border-block-end-width: 0;
3329
3336
  border-start-start-radius: var(--pf-v6-c-code-editor__header--BorderStartStartRadius);
3330
3337
  border-start-end-radius: var(--pf-v6-c-code-editor__header--BorderStartEndRadius);
3331
3338
  }
3339
+ .pf-v6-c-code-editor__header::before {
3340
+ inset-block-end: 0;
3341
+ inset-inline-start: 0;
3342
+ inset-inline-end: 0;
3343
+ border-block-end: var(--pf-v6-c-code-editor__header--before--BorderBlockEndWidth) solid var(--pf-v6-c-code-editor__header--before--BorderBlockEndColor);
3344
+ }
3332
3345
  .pf-v6-c-code-editor__header.pf-m-plain {
3346
+ --pf-v6-c-code-editor__header--BorderWidth: 0;
3333
3347
  --pf-v6-c-code-editor__header-content--BackgroundColor: var(--pf-v6-c-code-editor__header-content--m-plain--BackgroundColor);
3334
3348
  }
3335
3349
 
@@ -3426,6 +3440,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3426
3440
  padding-block-end: var(--pf-v6-c-code-editor__tab--PaddingBlockEnd);
3427
3441
  padding-inline-start: var(--pf-v6-c-code-editor__tab--PaddingInlineStart);
3428
3442
  padding-inline-end: var(--pf-v6-c-code-editor__tab--PaddingInlineEnd);
3443
+ margin-inline-start: auto;
3429
3444
  color: var(--pf-v6-c-code-editor__tab--Color);
3430
3445
  background-color: var(--pf-v6-c-code-editor__tab--BackgroundColor);
3431
3446
  border-color: var(--pf-v6-c-code-editor__tab--BorderColor);
package/docs/components/CodeEditor/examples/CodeEditor.md CHANGED
@@ -121,7 +121,6 @@ cssPrefix: pf-v6-c-code-editor
121
121
  ```html
122
122
  <div class="pf-v6-c-code-editor">
123
123
  <div class="pf-v6-c-code-editor__header">
124
- <div class="pf-v6-c-code-editor__header-main"></div>
125
124
  <div class="pf-v6-c-code-editor__tab">
126
125
  <span class="pf-v6-c-code-editor__tab-icon">
127
126
  <i class="fas fa-code" aria-hidden="true"></i>
@@ -166,12 +165,27 @@ cssPrefix: pf-v6-c-code-editor
166
165
 
167
166
  ```
168
167
 
168
+ ### Without language tab
169
+
170
+ ```html
171
+ <div class="pf-v6-c-code-editor">
172
+ <div class="pf-v6-c-code-editor__header"></div>
173
+ <div class="pf-v6-c-code-editor__main">
174
+ <div dir="ltr" class="pf-v6-c-code-editor__code">
175
+ <pre class="pf-v6-c-code-editor__code-pre">
176
+ code goes here
177
+ </pre>
178
+ </div>
179
+ </div>
180
+ </div>
181
+
182
+ ```
183
+
169
184
  ### Drag file and hover over component
170
185
 
171
186
  ```html
172
187
  <div class="pf-v6-c-code-editor">
173
188
  <div class="pf-v6-c-code-editor__header">
174
- <div class="pf-v6-c-code-editor__header-main"></div>
175
189
  <div class="pf-v6-c-code-editor__tab">
176
190
  <span class="pf-v6-c-code-editor__tab-icon">
177
191
  <i class="fas fa-code" aria-hidden="true"></i>
@@ -457,7 +471,7 @@ This is an extra container used in React to prevent event propagation if upload
457
471
  | Class | Applied to | Outcome |
458
472
  | ------------------------------------------ | ---------- | --------------------------------------------------------------------------------------------- |
459
473
  | `.pf-v6-c-code-editor` | `<div>` | Initiates the code editor component. **Required** |
460
- | `.pf-v6-c-code-editor__header` | `<div>` | Initiates the code editor header used for the controls and tab elements. **Required** |
474
+ | `.pf-v6-c-code-editor__header` | `<div>` | Initiates the code editor header used for the controls and tab elements. |
461
475
  | `.pf-v6-c-code-editor__header-content` | `<div>` | Initiates the code editor header content used for the controls and tab elements. **Required** |
462
476
  | `.pf-v6-c-code-editor__main` | `<div>` | Initiates the main container for a code editor e.g. Monaco **Required** |
463
477
  | `.pf-v6-c-code-editor__code` | `<div>` | Initiates the container for code without a JS code editor. Comes with PatternFly styling. |
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.3.0-prerelease.78",
4
+ "version": "6.3.0-prerelease.79",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "engines": {
@@ -114,5 +114,5 @@
114
114
  "registry": "https://registry.npmjs.org/",
115
115
  "access": "public"
116
116
  },
117
- "packageManager": "yarn@4.9.3"
117
+ "packageManager": "yarn@4.10.3"
118
118
  }
package/patternfly-no-globals.css CHANGED
@@ -11951,6 +11951,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
11951
11951
  --pf-v6-c-code-editor__header-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
11952
11952
  --pf-v6-c-code-editor__header-main--PaddingInlineStart: var(--pf-t--global--spacer--sm);
11953
11953
  --pf-v6-c-code-editor__tab--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11954
+ --pf-v6-c-code-editor--m-read-only__tab--BackgroundColor: var(--pf-v6-c-code-editor--m-read-only__main--BackgroundColor);
11954
11955
  --pf-v6-c-code-editor__tab--Color: var(--pf-t--global--text--color--subtle);
11955
11956
  --pf-v6-c-code-editor__tab--PaddingBlockStart: var(--pf-t--global--spacer--sm);
11956
11957
  --pf-v6-c-code-editor__tab--PaddingInlineEnd: var( --pf-t--global--spacer--sm);
@@ -11970,6 +11971,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
11970
11971
  flex-direction: column;
11971
11972
  }
11972
11973
  .pf-v6-c-code-editor.pf-m-read-only {
11974
+ --pf-v6-c-code-editor__tab--BackgroundColor: var(--pf-v6-c-code-editor--m-read-only__tab--BackgroundColor);
11973
11975
  --pf-v6-c-code-editor__main--BackgroundColor: var(--pf-v6-c-code-editor--m-read-only__main--BackgroundColor);
11974
11976
  }
11975
11977
  .pf-v6-c-code-editor.pf-m-full-height {
@@ -11986,17 +11988,29 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
11986
11988
  position: relative;
11987
11989
  display: flex;
11988
11990
  }
11989
- .pf-v6-c-code-editor__header::before {
11991
+ .pf-v6-c-code-editor__header::before, .pf-v6-c-code-editor__header::after {
11992
+ position: absolute;
11993
+ pointer-events: none;
11994
+ content: "";
11995
+ }
11996
+ .pf-v6-c-code-editor__header::after {
11990
11997
  position: absolute;
11991
11998
  inset: 0;
11992
11999
  pointer-events: none;
11993
12000
  content: "";
11994
12001
  border: var(--pf-v6-c-code-editor__header--BorderWidth) solid var(--pf-v6-c-code-editor__header--BorderColor);
11995
- border-block-end: var(--pf-v6-c-code-editor__header--before--BorderBlockEndWidth) solid var(--pf-v6-c-code-editor__header--before--BorderBlockEndColor);
12002
+ border-block-end-width: 0;
11996
12003
  border-start-start-radius: var(--pf-v6-c-code-editor__header--BorderStartStartRadius);
11997
12004
  border-start-end-radius: var(--pf-v6-c-code-editor__header--BorderStartEndRadius);
11998
12005
  }
12006
+ .pf-v6-c-code-editor__header::before {
12007
+ inset-block-end: 0;
12008
+ inset-inline-start: 0;
12009
+ inset-inline-end: 0;
12010
+ border-block-end: var(--pf-v6-c-code-editor__header--before--BorderBlockEndWidth) solid var(--pf-v6-c-code-editor__header--before--BorderBlockEndColor);
12011
+ }
11999
12012
  .pf-v6-c-code-editor__header.pf-m-plain {
12013
+ --pf-v6-c-code-editor__header--BorderWidth: 0;
12000
12014
  --pf-v6-c-code-editor__header-content--BackgroundColor: var(--pf-v6-c-code-editor__header-content--m-plain--BackgroundColor);
12001
12015
  }
12002
12016
 
@@ -12093,6 +12107,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12093
12107
  padding-block-end: var(--pf-v6-c-code-editor__tab--PaddingBlockEnd);
12094
12108
  padding-inline-start: var(--pf-v6-c-code-editor__tab--PaddingInlineStart);
12095
12109
  padding-inline-end: var(--pf-v6-c-code-editor__tab--PaddingInlineEnd);
12110
+ margin-inline-start: auto;
12096
12111
  color: var(--pf-v6-c-code-editor__tab--Color);
12097
12112
  background-color: var(--pf-v6-c-code-editor__tab--BackgroundColor);
12098
12113
  border-color: var(--pf-v6-c-code-editor__tab--BorderColor);
package/patternfly.css CHANGED
@@ -12091,6 +12091,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12091
12091
  --pf-v6-c-code-editor__header-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
12092
12092
  --pf-v6-c-code-editor__header-main--PaddingInlineStart: var(--pf-t--global--spacer--sm);
12093
12093
  --pf-v6-c-code-editor__tab--BackgroundColor: var(--pf-t--global--background--color--primary--default);
12094
+ --pf-v6-c-code-editor--m-read-only__tab--BackgroundColor: var(--pf-v6-c-code-editor--m-read-only__main--BackgroundColor);
12094
12095
  --pf-v6-c-code-editor__tab--Color: var(--pf-t--global--text--color--subtle);
12095
12096
  --pf-v6-c-code-editor__tab--PaddingBlockStart: var(--pf-t--global--spacer--sm);
12096
12097
  --pf-v6-c-code-editor__tab--PaddingInlineEnd: var( --pf-t--global--spacer--sm);
@@ -12110,6 +12111,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12110
12111
  flex-direction: column;
12111
12112
  }
12112
12113
  .pf-v6-c-code-editor.pf-m-read-only {
12114
+ --pf-v6-c-code-editor__tab--BackgroundColor: var(--pf-v6-c-code-editor--m-read-only__tab--BackgroundColor);
12113
12115
  --pf-v6-c-code-editor__main--BackgroundColor: var(--pf-v6-c-code-editor--m-read-only__main--BackgroundColor);
12114
12116
  }
12115
12117
  .pf-v6-c-code-editor.pf-m-full-height {
@@ -12126,17 +12128,29 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12126
12128
  position: relative;
12127
12129
  display: flex;
12128
12130
  }
12129
- .pf-v6-c-code-editor__header::before {
12131
+ .pf-v6-c-code-editor__header::before, .pf-v6-c-code-editor__header::after {
12132
+ position: absolute;
12133
+ pointer-events: none;
12134
+ content: "";
12135
+ }
12136
+ .pf-v6-c-code-editor__header::after {
12130
12137
  position: absolute;
12131
12138
  inset: 0;
12132
12139
  pointer-events: none;
12133
12140
  content: "";
12134
12141
  border: var(--pf-v6-c-code-editor__header--BorderWidth) solid var(--pf-v6-c-code-editor__header--BorderColor);
12135
- border-block-end: var(--pf-v6-c-code-editor__header--before--BorderBlockEndWidth) solid var(--pf-v6-c-code-editor__header--before--BorderBlockEndColor);
12142
+ border-block-end-width: 0;
12136
12143
  border-start-start-radius: var(--pf-v6-c-code-editor__header--BorderStartStartRadius);
12137
12144
  border-start-end-radius: var(--pf-v6-c-code-editor__header--BorderStartEndRadius);
12138
12145
  }
12146
+ .pf-v6-c-code-editor__header::before {
12147
+ inset-block-end: 0;
12148
+ inset-inline-start: 0;
12149
+ inset-inline-end: 0;
12150
+ border-block-end: var(--pf-v6-c-code-editor__header--before--BorderBlockEndWidth) solid var(--pf-v6-c-code-editor__header--before--BorderBlockEndColor);
12151
+ }
12139
12152
  .pf-v6-c-code-editor__header.pf-m-plain {
12153
+ --pf-v6-c-code-editor__header--BorderWidth: 0;
12140
12154
  --pf-v6-c-code-editor__header-content--BackgroundColor: var(--pf-v6-c-code-editor__header-content--m-plain--BackgroundColor);
12141
12155
  }
12142
12156
 
@@ -12233,6 +12247,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12233
12247
  padding-block-end: var(--pf-v6-c-code-editor__tab--PaddingBlockEnd);
12234
12248
  padding-inline-start: var(--pf-v6-c-code-editor__tab--PaddingInlineStart);
12235
12249
  padding-inline-end: var(--pf-v6-c-code-editor__tab--PaddingInlineEnd);
12250
+ margin-inline-start: auto;
12236
12251
  color: var(--pf-v6-c-code-editor__tab--Color);
12237
12252
  background-color: var(--pf-v6-c-code-editor__tab--BackgroundColor);
12238
12253
  border-color: var(--pf-v6-c-code-editor__tab--BorderColor);