@patternfly/patternfly 6.0.0-alpha.76 → 6.0.0-alpha.77

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 (12) hide show
  1. package/components/CodeBlock/code-block.css +4 -0
  2. package/components/CodeBlock/code-block.scss +4 -0
  3. package/components/CodeEditor/code-editor.css +91 -73
  4. package/components/CodeEditor/code-editor.scss +99 -82
  5. package/docs/components/CodeEditor/examples/CodeEditor.md +144 -132
  6. package/package.json +1 -1
  7. package/patternfly-no-globals.css +95 -77
  8. package/patternfly-theme-dark-unversioned.css +95 -77
  9. package/patternfly.css +95 -77
  10. package/patternfly.min.css +1 -1
  11. package/patternfly.min.css.map +1 -1
  12. package/components/CodeEditor/themes/dark/code-editor.scss +0 -14
package/components/CodeBlock/code-block.css CHANGED
@@ -3,6 +3,8 @@
3
3
  --pf-v5-c-code-block--BorderRadius: var(--pf-t--global--border--radius--medium);
4
4
  --pf-v5-c-code-block__header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
5
5
  --pf-v5-c-code-block__header--BorderBottomColor: var(--pf-t--global--border--color--default);
6
+ --pf-v5-c-code-block__header--PaddingTop: var(--pf-t--global--spacer--xs);
7
+ --pf-v5-c-code-block__header--PaddingBottom: var(--pf-t--global--spacer--xs);
6
8
  --pf-v5-c-code-block__header--PaddingRight: var(--pf-t--global--spacer--sm);
7
9
  --pf-v5-c-code-block__header--PaddingLeft: var(--pf-t--global--spacer--sm);
8
10
  --pf-v5-c-code-block__content--PaddingTop: var(--pf-t--global--spacer--md);
@@ -20,6 +22,8 @@
20
22
 
21
23
  .pf-v5-c-code-block__header {
22
24
  display: flex;
25
+ padding-block-start: var(--pf-v5-c-code-block__header--PaddingTop);
26
+ padding-block-end: var(--pf-v5-c-code-block__header--PaddingBottom);
23
27
  padding-inline-start: var(--pf-v5-c-code-block__header--PaddingLeft);
24
28
  padding-inline-end: var(--pf-v5-c-code-block__header--PaddingRight);
25
29
  border-block-end: var(--pf-v5-c-code-block__header--BorderBottomWidth) solid var(--pf-v5-c-code-block__header--BorderBottomColor);
package/components/CodeBlock/code-block.scss CHANGED
@@ -5,6 +5,8 @@
5
5
  --#{$code-block}--BorderRadius: var(--pf-t--global--border--radius--medium);
6
6
  --#{$code-block}__header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
7
7
  --#{$code-block}__header--BorderBottomColor: var(--pf-t--global--border--color--default);
8
+ --#{$code-block}__header--PaddingTop: var(--pf-t--global--spacer--xs);
9
+ --#{$code-block}__header--PaddingBottom: var(--pf-t--global--spacer--xs);
8
10
  --#{$code-block}__header--PaddingRight: var(--pf-t--global--spacer--sm);
9
11
  --#{$code-block}__header--PaddingLeft: var(--pf-t--global--spacer--sm);
10
12
  --#{$code-block}__content--PaddingTop: var(--pf-t--global--spacer--md);
@@ -22,6 +24,8 @@
22
24
 
23
25
  .#{$code-block}__header {
24
26
  display: flex;
27
+ padding-block-start: var(--#{$code-block}__header--PaddingTop);
28
+ padding-block-end: var(--#{$code-block}__header--PaddingBottom);
25
29
  padding-inline-start: var(--#{$code-block}__header--PaddingLeft);
26
30
  padding-inline-end: var(--#{$code-block}__header--PaddingRight);
27
31
  border-block-end: var(--#{$code-block}__header--BorderBottomWidth) solid var(--#{$code-block}__header--BorderBottomColor);
package/components/CodeEditor/code-editor.css CHANGED
@@ -1,39 +1,55 @@
1
- .pf-v5-c-code-editor {
2
- --pf-v5-c-code-editor__controls--c-button--m-control--Color: var(--pf-v5-global--Color--200);
3
- --pf-v5-c-code-editor__controls--c-button--m-control--hover--Color: var(--pf-v5-global--Color--100);
4
- --pf-v5-c-code-editor__controls--c-button--m-control--focus--Color: var(--pf-v5-global--Color--100);
5
- --pf-v5-c-code-editor__controls--c-button--m-control--disabled--after--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
6
- --pf-v5-c-code-editor__header--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
7
- --pf-v5-c-code-editor__header--before--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
8
- --pf-v5-c-code-editor__main--BorderColor: var(--pf-v5-global--BorderColor--100);
9
- --pf-v5-c-code-editor__main--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
10
- --pf-v5-c-code-editor__main--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
11
- --pf-v5-c-code-editor--m-read-only__main--BackgroundColor: var(--pf-v5-global--disabled-color--300);
12
- --pf-v5-c-code-editor__main--m-drag-hover--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
13
- --pf-v5-c-code-editor__main--m-drag-hover--before--BorderColor: var(--pf-v5-global--primary-color--100);
14
- --pf-v5-c-code-editor__main--m-drag-hover--after--BackgroundColor: var(--pf-v5-global--primary-color--100);
1
+ :where(:root), :where(.pf-v5-c-code-editor) {
2
+ --pf-v5-c-code-editor__controls--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3
+ --pf-v5-c-code-editor__controls--Gap: var(--pf-t--global--spacer--xs);
4
+ --pf-v5-c-code-editor__header--before--BorderBottomWidth: var(--pf-t--global--border--width--box--default);
5
+ --pf-v5-c-code-editor__header--before--BorderBottomColor: var(--pf-t--global--border--color--default);
6
+ --pf-v5-c-code-editor__header-content--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
7
+ --pf-v5-c-code-editor__header-content--m-plain--BackgroundColor: var(--pf-t--global--background--color--primary--default);
8
+ --pf-v5-c-code-editor__header-content--PaddingBlockStart: var(--pf-t--global--spacer--xs);
9
+ --pf-v5-c-code-editor__header-content--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
10
+ --pf-v5-c-code-editor__header-content--PaddingInlineStart: var(--pf-t--global--spacer--sm);
11
+ --pf-v5-c-code-editor__header-content--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
12
+ --pf-v5-c-code-editor__header-content--BorderStartStartRadius: var(--pf-t--global--border--radius--medium);
13
+ --pf-v5-c-code-editor__upload--PaddingInlineStart: var(--pf-t--global--spacer--md);
14
+ --pf-v5-c-code-editor__upload--PaddingInlineEnd: var(--pf-t--global--spacer--md);
15
+ --pf-v5-c-code-editor__upload--PaddingBlockStart: var(--pf-t--global--spacer--md);
16
+ --pf-v5-c-code-editor__upload--PaddingBlockEnd: var(--pf-t--global--spacer--md);
17
+ --pf-v5-c-code-editor__upload--BorderRadius: var(--pf-t--global--border--radius--medium);
18
+ --pf-v5-c-code-editor__main--BorderColor: var(--pf-t--global--border--color--default);
19
+ --pf-v5-c-code-editor__main--BorderWidth: var(--pf-t--global--border--width--box--default);
20
+ --pf-v5-c-code-editor__main--BorderEndStartRadius: var(--pf-t--global--border--radius--medium);
21
+ --pf-v5-c-code-editor__main--BorderEndEndRadius: var(--pf-t--global--border--radius--medium);
22
+ --pf-v5-c-code-editor__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
23
+ --pf-v5-c-code-editor--m-read-only__main--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
24
+ --pf-v5-c-code-editor__upload--before--BorderWidth: 0;
25
+ --pf-v5-c-code-editor__upload--before--BorderColor: transparent;
26
+ --pf-v5-c-code-editor__main--m-drag-hover--before--BorderWidth: var(--pf-t--global--border--width--divider--hover);
27
+ --pf-v5-c-code-editor__main--m-drag-hover--before--BorderColor: var( --pf-t--global--border--color--clicked);
28
+ --pf-v5-c-code-editor__main--m-drag-hover--after--BackgroundColor: var(--pf-t--global--background--color--primary--default);
15
29
  --pf-v5-c-code-editor__main--m-drag-hover--after--Opacity: .1;
16
- --pf-v5-c-code-editor__code--PaddingTop: var(--pf-v5-global--spacer--sm);
17
- --pf-v5-c-code-editor__code--PaddingRight: var(--pf-v5-global--spacer--sm);
18
- --pf-v5-c-code-editor__code--PaddingBottom: var(--pf-v5-global--spacer--sm);
19
- --pf-v5-c-code-editor__code--PaddingLeft: var(--pf-v5-global--spacer--sm);
20
- --pf-v5-c-code-editor__code-pre--FontSize: var(--pf-v5-global--FontSize--sm);
21
- --pf-v5-c-code-editor__code-pre--FontFamily: var(--pf-v5-global--FontFamily--monospace);
22
- --pf-v5-c-code-editor__header-main--PaddingRight: var(--pf-v5-global--spacer--sm);
23
- --pf-v5-c-code-editor__header-main--PaddingLeft: var(--pf-v5-global--spacer--sm);
24
- --pf-v5-c-code-editor__tab--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
25
- --pf-v5-c-code-editor__tab--Color: var(--pf-v5-global--Color--200);
26
- --pf-v5-c-code-editor__tab--PaddingTop: var(--pf-v5-global--spacer--form-element);
27
- --pf-v5-c-code-editor__tab--PaddingRight: var(--pf-v5-global--spacer--sm);
28
- --pf-v5-c-code-editor__tab--PaddingBottom: var(--pf-v5-global--spacer--form-element);
29
- --pf-v5-c-code-editor__tab--PaddingLeft: var(--pf-v5-global--spacer--sm);
30
- --pf-v5-c-code-editor__tab--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
31
- --pf-v5-c-code-editor__tab--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
30
+ --pf-v5-c-code-editor__code--PaddingTop: var(--pf-t--global--spacer--sm);
31
+ --pf-v5-c-code-editor__code--PaddingRight: var(--pf-t--global--spacer--sm);
32
+ --pf-v5-c-code-editor__code--PaddingBottom: var(--pf-t--global--spacer--sm);
33
+ --pf-v5-c-code-editor__code--PaddingLeft: var(--pf-t--global--spacer--sm);
34
+ --pf-v5-c-code-editor__code-pre--FontSize: var(--pf-t--global--font--size--sm);
35
+ --pf-v5-c-code-editor__code-pre--FontFamily: var(--pf-t--global--font--family--mono);
36
+ --pf-v5-c-code-editor__header-main--PaddingRight: var(--pf-t--global--spacer--sm);
37
+ --pf-v5-c-code-editor__header-main--PaddingLeft: var(--pf-t--global--spacer--sm);
38
+ --pf-v5-c-code-editor__tab--BackgroundColor: var(--pf-t--global--background--color--primary--default);
39
+ --pf-v5-c-code-editor__tab--Color: var(--pf-t--global--text--color--subtle);
40
+ --pf-v5-c-code-editor__tab--PaddingTop: var(--pf-t--global--spacer--sm);
41
+ --pf-v5-c-code-editor__tab--PaddingRight: var( --pf-t--global--spacer--sm);
42
+ --pf-v5-c-code-editor__tab--PaddingBottom: var(--pf-t--global--spacer--sm);
43
+ --pf-v5-c-code-editor__tab--PaddingLeft: var( --pf-t--global--spacer--sm);
44
+ --pf-v5-c-code-editor__tab--BorderTopWidth: var(--pf-t--global--border--width--box--default);
45
+ --pf-v5-c-code-editor__tab--BorderRightWidth: var(--pf-t--global--border--width--box--default);
32
46
  --pf-v5-c-code-editor__tab--BorderBottomWidth: 0;
33
- --pf-v5-c-code-editor__tab--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
34
- --pf-v5-c-code-editor__tab--BorderColor: var(--pf-v5-global--BorderColor--100);
35
- --pf-v5-c-code-editor__tab-icon--text--MarginLeft: var(--pf-v5-global--spacer--sm);
47
+ --pf-v5-c-code-editor__tab--BorderLeftWidth: var(--pf-t--global--border--width--box--default);
48
+ --pf-v5-c-code-editor__tab--BorderColor: var(--pf-t--global--border--color--default);
49
+ --pf-v5-c-code-editor__tab--BorderStartEndRadius: var(--pf-t--global--border--radius--medium);
50
+ --pf-v5-c-code-editor__tab-icon--text--MarginLeft: var(--pf-t--global--spacer--sm);
36
51
  }
52
+
37
53
  .pf-v5-c-code-editor.pf-m-read-only {
38
54
  --pf-v5-c-code-editor__main--BackgroundColor: var(--pf-v5-c-code-editor--m-read-only__main--BackgroundColor);
39
55
  }
@@ -41,7 +57,6 @@
41
57
  .pf-v5-c-code-editor__header {
42
58
  position: relative;
43
59
  display: flex;
44
- align-items: flex-end;
45
60
  }
46
61
  .pf-v5-c-code-editor__header::before {
47
62
  position: absolute;
@@ -52,54 +67,65 @@
52
67
  content: "";
53
68
  border-block-end: var(--pf-v5-c-code-editor__header--before--BorderBottomWidth) solid var(--pf-v5-c-code-editor__header--before--BorderBottomColor);
54
69
  }
70
+ .pf-v5-c-code-editor__header.pf-m-plain {
71
+ --pf-v5-c-code-editor__header-content--BackgroundColor: var(--pf-v5-c-code-editor__header-content--m-plain--BackgroundColor);
72
+ }
55
73
 
56
- .pf-v5-c-code-editor__controls {
74
+ .pf-v5-c-code-editor__header-content {
57
75
  display: flex;
76
+ flex: 1;
77
+ align-items: flex-end;
78
+ padding-block-start: var(--pf-v5-c-code-editor__header-content--PaddingBlockStart);
79
+ padding-block-end: var(--pf-v5-c-code-editor__header-content--PaddingBlockEnd);
80
+ padding-inline-start: var(--pf-v5-c-code-editor__header-content--PaddingInlineStart);
81
+ padding-inline-end: var(--pf-v5-c-code-editor__header-content--PaddingInlineEnd);
82
+ background-color: var(--pf-v5-c-code-editor__header-content--BackgroundColor);
83
+ border-start-start-radius: var(--pf-v5-c-code-editor__header-content--BorderStartStartRadius);
58
84
  }
59
- .pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control {
60
- --pf-v5-c-button--m-control--Color: var(--pf-v5-c-code-editor__controls--c-button--m-control--Color);
61
- }
62
- .pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control:hover {
63
- --pf-v5-c-code-editor__controls--c-button--m-control--Color: var(--pf-v5-c-code-editor__controls--c-button--m-control--hover--Color);
64
- }
65
- .pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control:focus {
66
- --pf-v5-c-code-editor__controls--c-button--m-control--Color: var(--pf-v5-c-code-editor__controls--c-button--m-control--focus--Color);
67
- }
68
- .pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control:disabled::after {
69
- border-block-end-color: var(--pf-v5-c-code-editor__controls--c-button--m-control--disabled--after--BorderBottomColor);
85
+
86
+ .pf-v5-c-code-editor__controls {
87
+ display: flex;
88
+ gap: var(--pf-v5-c-code-editor__controls--Gap);
89
+ align-items: flex-start;
70
90
  }
71
91
 
72
92
  .pf-v5-c-code-editor__header-main {
73
93
  flex-grow: 1;
94
+ align-self: center;
74
95
  padding-inline-start: var(--pf-v5-c-code-editor__header-main--PaddingLeft);
75
96
  padding-inline-end: var(--pf-v5-c-code-editor__header-main--PaddingRight);
76
97
  }
77
98
 
99
+ .pf-v5-c-code-editor__upload {
100
+ position: relative;
101
+ padding-block-start: var(--pf-v5-c-code-editor__upload--PaddingBlockStart);
102
+ padding-block-end: var(--pf-v5-c-code-editor__upload--PaddingBlockEnd);
103
+ padding-inline-start: var(--pf-v5-c-code-editor__upload--PaddingInlineStart);
104
+ padding-inline-end: var(--pf-v5-c-code-editor__upload--PaddingInlineEnd);
105
+ }
106
+ .pf-v5-c-code-editor__upload::before {
107
+ position: absolute;
108
+ inset-block-start: var(--pf-v5-c-code-editor__upload--PaddingBlockStart);
109
+ inset-block-end: var(--pf-v5-c-code-editor__upload--PaddingBlockEnd);
110
+ inset-inline-start: var(--pf-v5-c-code-editor__upload--PaddingInlineStart);
111
+ inset-inline-end: var(--pf-v5-c-code-editor__upload--PaddingInlineEnd);
112
+ content: "";
113
+ border: var(--pf-v5-c-code-editor__upload--before--BorderWidth) dashed var(--pf-v5-c-code-editor__upload--before--BorderColor);
114
+ border-radius: var(--pf-v5-c-code-editor__upload--BorderRadius);
115
+ }
116
+
78
117
  .pf-v5-c-code-editor__main {
79
118
  position: relative;
80
119
  color: var(--pf-v5-c-code-editor__main--Color, inherit);
81
120
  background-color: var(--pf-v5-c-code-editor__main--BackgroundColor);
82
121
  border: var(--pf-v5-c-code-editor__main--BorderWidth) solid;
83
122
  border-color: var(--pf-v5-c-code-editor__main--BorderColor);
123
+ border-end-start-radius: var(--pf-v5-c-code-editor__main--BorderEndStartRadius);
124
+ border-end-end-radius: var(--pf-v5-c-code-editor__main--BorderEndEndRadius);
84
125
  }
85
- .pf-v5-c-code-editor__main.pf-m-drag-hover::after {
86
- position: absolute;
87
- inset-block-start: 0;
88
- inset-block-end: 0;
89
- inset-inline-start: 0;
90
- inset-inline-end: 0;
91
- content: "";
92
- background-color: var(--pf-v5-c-code-editor__main--m-drag-hover--after--BackgroundColor);
93
- opacity: var(--pf-v5-c-code-editor__main--m-drag-hover--after--Opacity);
94
- }
95
- .pf-v5-c-code-editor__main.pf-m-drag-hover::before {
96
- position: absolute;
97
- inset-block-start: 0;
98
- inset-block-end: 0;
99
- inset-inline-start: 0;
100
- inset-inline-end: 0;
101
- content: "";
102
- border: var(--pf-v5-c-code-editor__main--m-drag-hover--before--BorderWidth) solid var(--pf-v5-c-code-editor__main--m-drag-hover--before--BorderColor);
126
+ .pf-v5-c-code-editor__main.pf-m-drag-hover {
127
+ --pf-v5-c-code-editor__upload--before--BorderWidth: var(--pf-v5-c-code-editor__main--m-drag-hover--before--BorderWidth);
128
+ --pf-v5-c-code-editor__upload--before--BorderColor: var(--pf-v5-c-code-editor__main--m-drag-hover--before--BorderColor);
103
129
  }
104
130
  .pf-v5-c-code-editor__main .monaco-editor {
105
131
  background-color: var(--pf-v5-c-code-editor__main--BackgroundColor);
@@ -130,7 +156,6 @@
130
156
  padding-block-end: var(--pf-v5-c-code-editor__tab--PaddingBottom);
131
157
  padding-inline-start: var(--pf-v5-c-code-editor__tab--PaddingLeft);
132
158
  padding-inline-end: var(--pf-v5-c-code-editor__tab--PaddingRight);
133
- margin-inline-start: auto;
134
159
  color: var(--pf-v5-c-code-editor__tab--Color);
135
160
  background-color: var(--pf-v5-c-code-editor__tab--BackgroundColor);
136
161
  border-color: var(--pf-v5-c-code-editor__tab--BorderColor);
@@ -139,16 +164,9 @@
139
164
  border-block-end-width: var(--pf-v5-c-code-editor__tab--BorderBottomWidth);
140
165
  border-inline-start-width: var(--pf-v5-c-code-editor__tab--BorderLeftWidth);
141
166
  border-inline-end-width: var(--pf-v5-c-code-editor__tab--BorderRightWidth);
167
+ border-start-end-radius: var(--pf-v5-c-code-editor__tab--BorderStartEndRadius);
142
168
  }
143
169
 
144
170
  .pf-v5-c-code-editor__tab-icon + .pf-v5-c-code-editor__tab-text {
145
171
  margin-inline-start: var(--pf-v5-c-code-editor__tab-icon--text--MarginLeft);
146
- }
147
-
148
- :where(.pf-v5-theme-dark) .pf-v5-c-code-editor {
149
- --pf-v5-c-code-editor--m-read-only__main--Color: var(--pf-v5-global--disabled-color--300);
150
- --pf-v5-c-code-editor--m-read-only__main--BackgroundColor: var(--pf-v5-global--disabled-color--200);
151
- }
152
- :where(.pf-v5-theme-dark) .pf-v5-c-code-editor__controls > * + * {
153
- border-inline-start: 1px solid var(--pf-v5-global--palette--black-700);
154
172
  }
package/components/CodeEditor/code-editor.scss CHANGED
@@ -1,54 +1,75 @@
1
1
  // @debug $code-editor; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
- .#{$code-editor} {
3
+ :where(:root), :where(.#{$code-editor}) {
4
4
  // controls
5
- --#{$code-editor}__controls--c-button--m-control--Color: var(--#{$pf-global}--Color--200);
6
- --#{$code-editor}__controls--c-button--m-control--hover--Color: var(--#{$pf-global}--Color--100);
7
- --#{$code-editor}__controls--c-button--m-control--focus--Color: var(--#{$pf-global}--Color--100);
8
- --#{$code-editor}__controls--c-button--m-control--disabled--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--100);
9
-
10
- // Header
11
- --#{$code-editor}__header--before--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
12
- --#{$code-editor}__header--before--BorderBottomColor: var(--#{$pf-global}--BorderColor--100);
5
+ --#{$code-editor}__controls--PaddingInlineStart: var(--pf-t--global--spacer--sm);
6
+ --#{$code-editor}__controls--Gap: var(--pf-t--global--spacer--xs);
7
+
8
+ // header
9
+ --#{$code-editor}__header--before--BorderBottomWidth: var(--pf-t--global--border--width--box--default);
10
+ --#{$code-editor}__header--before--BorderBottomColor: var(--pf-t--global--border--color--default);
11
+
12
+ // header content
13
+ --#{$code-editor}__header-content--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
14
+ --#{$code-editor}__header-content--m-plain--BackgroundColor: var(--pf-t--global--background--color--primary--default);
15
+ --#{$code-editor}__header-content--PaddingBlockStart: var(--pf-t--global--spacer--xs);
16
+ --#{$code-editor}__header-content--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
17
+ --#{$code-editor}__header-content--PaddingInlineStart: var(--pf-t--global--spacer--sm);
18
+ --#{$code-editor}__header-content--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
19
+ --#{$code-editor}__header-content--BorderStartStartRadius: var(--pf-t--global--border--radius--medium);
20
+
21
+ // upload
22
+ --#{$code-editor}__upload--PaddingInlineStart: var(--pf-t--global--spacer--md);
23
+ --#{$code-editor}__upload--PaddingInlineEnd: var(--pf-t--global--spacer--md);
24
+ --#{$code-editor}__upload--PaddingBlockStart: var(--pf-t--global--spacer--md);
25
+ --#{$code-editor}__upload--PaddingBlockEnd: var(--pf-t--global--spacer--md);
26
+ --#{$code-editor}__upload--BorderRadius: var(--pf-t--global--border--radius--medium);
13
27
 
14
28
  // main
15
- --#{$code-editor}__main--BorderColor: var(--#{$pf-global}--BorderColor--100);
16
- --#{$code-editor}__main--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
17
- --#{$code-editor}__main--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
18
- --#{$code-editor}--m-read-only__main--BackgroundColor: var(--#{$pf-global}--disabled-color--300);
19
- --#{$code-editor}__main--m-drag-hover--before--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
20
- --#{$code-editor}__main--m-drag-hover--before--BorderColor: var(--#{$pf-global}--primary-color--100);
21
- --#{$code-editor}__main--m-drag-hover--after--BackgroundColor: var(--#{$pf-global}--primary-color--100);
29
+ --#{$code-editor}__main--BorderColor: var(--pf-t--global--border--color--default);
30
+ --#{$code-editor}__main--BorderWidth: var(--pf-t--global--border--width--box--default);
31
+ --#{$code-editor}__main--BorderEndStartRadius: var(--pf-t--global--border--radius--medium);
32
+ --#{$code-editor}__main--BorderEndEndRadius: var(--pf-t--global--border--radius--medium);
33
+ --#{$code-editor}__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
34
+ --#{$code-editor}--m-read-only__main--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
35
+ --#{$code-editor}__upload--before--BorderWidth: 0;
36
+ --#{$code-editor}__upload--before--BorderColor: transparent;
37
+ --#{$code-editor}__main--m-drag-hover--before--BorderWidth: var(--pf-t--global--border--width--divider--hover);
38
+ --#{$code-editor}__main--m-drag-hover--before--BorderColor: var( --pf-t--global--border--color--clicked);
39
+ --#{$code-editor}__main--m-drag-hover--after--BackgroundColor: var(--pf-t--global--background--color--primary--default);
22
40
  --#{$code-editor}__main--m-drag-hover--after--Opacity: .1;
23
41
 
24
42
  // code
25
- --#{$code-editor}__code--PaddingTop: var(--#{$pf-global}--spacer--sm);
26
- --#{$code-editor}__code--PaddingRight: var(--#{$pf-global}--spacer--sm);
27
- --#{$code-editor}__code--PaddingBottom: var(--#{$pf-global}--spacer--sm);
28
- --#{$code-editor}__code--PaddingLeft: var(--#{$pf-global}--spacer--sm);
29
- --#{$code-editor}__code-pre--FontSize: var(--#{$pf-global}--FontSize--sm);
30
- --#{$code-editor}__code-pre--FontFamily: var(--#{$pf-global}--FontFamily--monospace);
43
+ --#{$code-editor}__code--PaddingTop: var(--pf-t--global--spacer--sm);
44
+ --#{$code-editor}__code--PaddingRight: var(--pf-t--global--spacer--sm);
45
+ --#{$code-editor}__code--PaddingBottom: var(--pf-t--global--spacer--sm);
46
+ --#{$code-editor}__code--PaddingLeft: var(--pf-t--global--spacer--sm);
47
+ --#{$code-editor}__code-pre--FontSize: var(--pf-t--global--font--size--sm);
48
+ --#{$code-editor}__code-pre--FontFamily: var(--pf-t--global--font--family--mono);
31
49
 
32
50
  // content
33
- --#{$code-editor}__header-main--PaddingRight: var(--#{$pf-global}--spacer--sm);
34
- --#{$code-editor}__header-main--PaddingLeft: var(--#{$pf-global}--spacer--sm);
51
+ --#{$code-editor}__header-main--PaddingRight: var(--pf-t--global--spacer--sm);
52
+ --#{$code-editor}__header-main--PaddingLeft: var(--pf-t--global--spacer--sm);
35
53
 
36
54
  // tab
37
- --#{$code-editor}__tab--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
38
- --#{$code-editor}__tab--Color: var(--#{$pf-global}--Color--200);
39
- --#{$code-editor}__tab--PaddingTop: var(--#{$pf-global}--spacer--form-element);
40
- --#{$code-editor}__tab--PaddingRight: var(--#{$pf-global}--spacer--sm);
41
- --#{$code-editor}__tab--PaddingBottom: var(--#{$pf-global}--spacer--form-element);
42
- --#{$code-editor}__tab--PaddingLeft: var(--#{$pf-global}--spacer--sm);
43
- --#{$code-editor}__tab--BorderTopWidth: var(--#{$pf-global}--BorderWidth--sm);
44
- --#{$code-editor}__tab--BorderRightWidth: var(--#{$pf-global}--BorderWidth--sm);
55
+ --#{$code-editor}__tab--BackgroundColor: var(--pf-t--global--background--color--primary--default);
56
+ --#{$code-editor}__tab--Color: var(--pf-t--global--text--color--subtle);
57
+ --#{$code-editor}__tab--PaddingTop: var(--pf-t--global--spacer--sm);
58
+ --#{$code-editor}__tab--PaddingRight: var( --pf-t--global--spacer--sm);
59
+ --#{$code-editor}__tab--PaddingBottom: var(--pf-t--global--spacer--sm);
60
+ --#{$code-editor}__tab--PaddingLeft: var( --pf-t--global--spacer--sm);
61
+ --#{$code-editor}__tab--BorderTopWidth: var(--pf-t--global--border--width--box--default);
62
+ --#{$code-editor}__tab--BorderRightWidth: var(--pf-t--global--border--width--box--default);
45
63
  --#{$code-editor}__tab--BorderBottomWidth: 0;
46
- --#{$code-editor}__tab--BorderLeftWidth: var(--#{$pf-global}--BorderWidth--sm);
47
- --#{$code-editor}__tab--BorderColor: var(--#{$pf-global}--BorderColor--100);
64
+ --#{$code-editor}__tab--BorderLeftWidth: var(--pf-t--global--border--width--box--default);
65
+ --#{$code-editor}__tab--BorderColor: var(--pf-t--global--border--color--default);
66
+ --#{$code-editor}__tab--BorderStartEndRadius: var(--pf-t--global--border--radius--medium);
48
67
 
49
68
  // tab text
50
- --#{$code-editor}__tab-icon--text--MarginLeft: var(--#{$pf-global}--spacer--sm);
69
+ --#{$code-editor}__tab-icon--text--MarginLeft: var(--pf-t--global--spacer--sm);
70
+ }
51
71
 
72
+ .#{$code-editor} {
52
73
  &.pf-m-read-only {
53
74
  --#{$code-editor}__main--BackgroundColor: var(--#{$code-editor}--m-read-only__main--BackgroundColor);
54
75
  }
@@ -57,7 +78,6 @@
57
78
  .#{$code-editor}__header {
58
79
  position: relative;
59
80
  display: flex;
60
- align-items: flex-end;
61
81
 
62
82
  &::before {
63
83
  position: absolute;
@@ -68,64 +88,68 @@
68
88
  content: "";
69
89
  border-block-end: var(--#{$code-editor}__header--before--BorderBottomWidth) solid var(--#{$code-editor}__header--before--BorderBottomColor);
70
90
  }
91
+
92
+ &.pf-m-plain {
93
+ --#{$code-editor}__header-content--BackgroundColor: var(--#{$code-editor}__header-content--m-plain--BackgroundColor);
94
+ }
71
95
  }
72
96
 
73
- .#{$code-editor}__controls {
97
+ .#{$code-editor}__header-content {
74
98
  display: flex;
99
+ flex: 1;
100
+ align-items: flex-end;
101
+ padding-block-start: var(--#{$code-editor}__header-content--PaddingBlockStart);
102
+ padding-block-end: var(--#{$code-editor}__header-content--PaddingBlockEnd);
103
+ padding-inline-start: var(--#{$code-editor}__header-content--PaddingInlineStart);
104
+ padding-inline-end: var(--#{$code-editor}__header-content--PaddingInlineEnd);
105
+ background-color: var(--#{$code-editor}__header-content--BackgroundColor);
106
+ border-start-start-radius: var(--#{$code-editor}__header-content--BorderStartStartRadius);
107
+ }
75
108
 
76
- .#{$button}.pf-m-control {
77
- --#{$button}--m-control--Color: var(--#{$code-editor}__controls--c-button--m-control--Color);
78
-
79
- &:hover {
80
- --#{$code-editor}__controls--c-button--m-control--Color: var(--#{$code-editor}__controls--c-button--m-control--hover--Color);
81
- }
82
-
83
- &:focus {
84
- --#{$code-editor}__controls--c-button--m-control--Color: var(--#{$code-editor}__controls--c-button--m-control--focus--Color);
85
- }
86
-
87
- &:disabled {
88
- &::after {
89
- border-block-end-color: var(--#{$code-editor}__controls--c-button--m-control--disabled--after--BorderBottomColor);
90
- }
91
- }
92
- }
109
+ .#{$code-editor}__controls {
110
+ display: flex;
111
+ gap: var(--#{$code-editor}__controls--Gap);
112
+ align-items: flex-start;
93
113
  }
94
114
 
95
115
  .#{$code-editor}__header-main {
96
116
  flex-grow: 1;
117
+ align-self: center;
97
118
  padding-inline-start: var(--#{$code-editor}__header-main--PaddingLeft);
98
119
  padding-inline-end: var(--#{$code-editor}__header-main--PaddingRight);
99
120
  }
100
121
 
122
+ .#{$code-editor}__upload {
123
+ position: relative;
124
+ padding-block-start: var(--#{$code-editor}__upload--PaddingBlockStart);
125
+ padding-block-end: var(--#{$code-editor}__upload--PaddingBlockEnd);
126
+ padding-inline-start: var(--#{$code-editor}__upload--PaddingInlineStart);
127
+ padding-inline-end: var(--#{$code-editor}__upload--PaddingInlineEnd);
128
+
129
+ &::before {
130
+ position: absolute;
131
+ inset-block-start: var(--#{$code-editor}__upload--PaddingBlockStart);
132
+ inset-block-end: var(--#{$code-editor}__upload--PaddingBlockEnd);
133
+ inset-inline-start: var(--#{$code-editor}__upload--PaddingInlineStart);
134
+ inset-inline-end: var(--#{$code-editor}__upload--PaddingInlineEnd);
135
+ content: "";
136
+ border: var(--#{$code-editor}__upload--before--BorderWidth) dashed var(--#{$code-editor}__upload--before--BorderColor);
137
+ border-radius: var(--#{$code-editor}__upload--BorderRadius);
138
+ }
139
+ }
140
+
101
141
  .#{$code-editor}__main {
102
142
  position: relative;
103
143
  color: var(--#{$code-editor}__main--Color, inherit);
104
144
  background-color: var(--#{$code-editor}__main--BackgroundColor);
105
145
  border: var(--#{$code-editor}__main--BorderWidth) solid;
106
146
  border-color: var(--#{$code-editor}__main--BorderColor);
147
+ border-end-start-radius: var(--#{$code-editor}__main--BorderEndStartRadius);
148
+ border-end-end-radius: var(--#{$code-editor}__main--BorderEndEndRadius);
107
149
 
108
150
  &.pf-m-drag-hover {
109
- &::after {
110
- position: absolute;
111
- inset-block-start: 0;
112
- inset-block-end: 0;
113
- inset-inline-start: 0;
114
- inset-inline-end: 0;
115
- content: "";
116
- background-color: var(--#{$code-editor}__main--m-drag-hover--after--BackgroundColor);
117
- opacity: var(--#{$code-editor}__main--m-drag-hover--after--Opacity);
118
- }
119
-
120
- &::before {
121
- position: absolute;
122
- inset-block-start: 0;
123
- inset-block-end: 0;
124
- inset-inline-start: 0;
125
- inset-inline-end: 0;
126
- content: "";
127
- border: var(--#{$code-editor}__main--m-drag-hover--before--BorderWidth) solid var(--#{$code-editor}__main--m-drag-hover--before--BorderColor);
128
- }
151
+ --#{$code-editor}__upload--before--BorderWidth: var(--#{$code-editor}__main--m-drag-hover--before--BorderWidth);
152
+ --#{$code-editor}__upload--before--BorderColor: var(--#{$code-editor}__main--m-drag-hover--before--BorderColor);
129
153
  }
130
154
 
131
155
  // stylelint-disable selector-class-pattern
@@ -161,7 +185,6 @@
161
185
  padding-block-end: var(--#{$code-editor}__tab--PaddingBottom);
162
186
  padding-inline-start: var(--#{$code-editor}__tab--PaddingLeft);
163
187
  padding-inline-end: var(--#{$code-editor}__tab--PaddingRight);
164
- margin-inline-start: auto; // remove at breaking change
165
188
  color: var(--#{$code-editor}__tab--Color);
166
189
  background-color: var(--#{$code-editor}__tab--BackgroundColor);
167
190
  border-color: var(--#{$code-editor}__tab--BorderColor);
@@ -170,15 +193,9 @@
170
193
  border-block-end-width: var(--#{$code-editor}__tab--BorderBottomWidth);
171
194
  border-inline-start-width: var(--#{$code-editor}__tab--BorderLeftWidth);
172
195
  border-inline-end-width: var(--#{$code-editor}__tab--BorderRightWidth);
196
+ border-start-end-radius: var(--#{$code-editor}__tab--BorderStartEndRadius);
173
197
  }
174
198
 
175
199
  .#{$code-editor}__tab-icon + .#{$code-editor}__tab-text {
176
200
  margin-inline-start: var(--#{$code-editor}__tab-icon--text--MarginLeft);
177
201
  }
178
-
179
- // stylelint-disable no-invalid-position-at-import-rule
180
- @import "themes/dark/code-editor";
181
-
182
- @include pf-v5-theme-dark {
183
- @include pf-v5-theme-dark-code-editor;
184
- }