@brightspace-ui/core 3.127.4 → 3.127.5

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 (3) hide show
  1. package/components/inputs/input-select-styles.js +5 -1
  2. package/components/inputs/input-styles.js +27 -21
  3. package/package.json +1 -1
package/components/inputs/input-select-styles.js CHANGED
@@ -73,7 +73,7 @@ export const selectStyles = css`
73
73
  color: FieldText;
74
74
  forced-color-adjust: none;
75
75
  height: 2rem;
76
- outline: 1px solid FieldText;
76
+ outline: 1px solid ButtonBorder;
77
77
  padding-inline: 0.6rem 16px;
78
78
  }
79
79
 
@@ -83,6 +83,10 @@ export const selectStyles = css`
83
83
  outline: 2px solid Highlight;
84
84
  }
85
85
 
86
+ .d2l-input-select:disabled {
87
+ outline: 1px solid GrayText;
88
+ }
89
+
86
90
  .d2l-input-select[aria-invalid="true"] {
87
91
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICA8cGF0aCBmaWxsPSIjY2QyMDI2IiBkPSJNMTcuNzkgMTUuMTFsLTctMTRhMiAyIDAgMCAwLTMuNTggMGwtNyAxNGExLjk3NSAxLjk3NSAwIDAgMCAuMDkgMS45NEEyIDIgMCAwIDAgMiAxOGgxNGExLjk5NCAxLjk5NCAwIDAgMCAxLjctLjk1IDEuOTY3IDEuOTY3IDAgMCAwIC4wOS0xLjk0ek05IDE2YTEuNSAxLjUgMCAxIDEgMS41LTEuNUExLjUgMS41IDAgMCAxIDkgMTZ6bS45OC00LjgwNmExIDEgMCAwIDEtMS45NiAwbC0uOTktNUExIDEgMCAwIDEgOC4wMSA1aDEuOTgzYTEgMSAwIDAgMSAuOTggMS4xOTR6Ii8+Cjwvc3ZnPgo=");
88
92
  background-position: center right calc(1px + 11px + 17px);
package/components/inputs/input-styles.js CHANGED
@@ -1,5 +1,8 @@
1
1
  import '../colors/colors.js';
2
- import { css } from 'lit';
2
+ import { css, unsafeCSS } from 'lit';
3
+ import { getFocusPseudoClass } from '../../helpers/focus.js';
4
+
5
+ const focusClass = unsafeCSS(getFocusPseudoClass());
3
6
 
4
7
  export const inputStyles = css`
5
8
  .d2l-input {
@@ -26,7 +29,7 @@ export const inputStyles = css`
26
29
  }
27
30
  .d2l-input,
28
31
  .d2l-input:hover:disabled,
29
- .d2l-input:focus:disabled,
32
+ .d2l-input:${focusClass}:disabled,
30
33
  [aria-invalid="true"].d2l-input:disabled {
31
34
  border-color: var(--d2l-input-border-color, var(--d2l-color-galena));
32
35
  border-width: 1px;
@@ -44,7 +47,7 @@ export const inputStyles = css`
44
47
  font-weight: 400;
45
48
  }
46
49
  .d2l-input:hover,
47
- .d2l-input:focus,
50
+ .d2l-input:${focusClass},
48
51
  .d2l-input-focus {
49
52
  border-color: var(--d2l-color-celestine);
50
53
  border-width: 2px;
@@ -72,45 +75,48 @@ export const inputStyles = css`
72
75
  }
73
76
  textarea.d2l-input,
74
77
  textarea.d2l-input:hover:disabled,
75
- textarea.d2l-input:focus:disabled,
78
+ textarea.d2l-input:${focusClass}:disabled,
76
79
  textarea[aria-invalid="true"].d2l-input:disabled {
77
- padding-bottom: 0.5rem;
78
- padding-top: 0.5rem;
80
+ padding-block: 0.5rem;
79
81
  }
80
82
  textarea.d2l-input:hover,
81
- textarea.d2l-input:focus {
83
+ textarea.d2l-input:${focusClass} {
82
84
  padding: var(--d2l-input-padding-focus, calc(0.75rem - 1px));
83
- padding-bottom: calc(0.5rem - 1px);
84
- padding-top: calc(0.5rem - 1px);
85
+ padding-block: calc(0.5rem - 1px);
85
86
  }
86
87
  textarea.d2l-input[aria-invalid="true"] {
87
88
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICA8cGF0aCBmaWxsPSIjY2QyMDI2IiBkPSJNMTcuNzkgMTUuMTFsLTctMTRhMiAyIDAgMCAwLTMuNTggMGwtNyAxNGExLjk3NSAxLjk3NSAwIDAgMCAuMDkgMS45NEEyIDIgMCAwIDAgMiAxOGgxNGExLjk5NCAxLjk5NCAwIDAgMCAxLjctLjk1IDEuOTY3IDEuOTY3IDAgMCAwIC4wOS0xLjk0ek05IDE2YTEuNSAxLjUgMCAxIDEgMS41LTEuNUExLjUgMS41IDAgMCAxIDkgMTZ6bS45OC00LjgwNmExIDEgMCAwIDEtMS45NiAwbC0uOTktNUExIDEgMCAwIDEgOC4wMSA1aDEuOTgzYTEgMSAwIDAgMSAuOTggMS4xOTR6Ii8+Cjwvc3ZnPgo=");
88
89
  background-position: top 12px right 18px;
89
90
  background-repeat: no-repeat;
90
91
  background-size: 0.8rem 0.8rem;
91
- padding-right: calc(18px + 0.8rem);
92
+ padding-inline-end: calc(18px + 0.8rem);
92
93
  }
93
94
  textarea.d2l-input[aria-invalid="true"]:hover,
94
- textarea.d2l-input[aria-invalid="true"]:focus {
95
+ textarea.d2l-input[aria-invalid="true"]:${focusClass} {
95
96
  background-position: top calc(12px - 1px) right calc(18px - 1px);
96
- padding-right: calc(18px + 0.8rem - 1px);
97
+ padding-inline-end: calc(18px + 0.8rem - 1px);
97
98
  }
98
99
  :host([dir="rtl"]) textarea.d2l-input[aria-invalid="true"] {
99
100
  background-position: top 12px left 18px;
100
- padding: var(--d2l-input-padding, 0.75rem);
101
- padding-bottom: 0.5rem;
102
- padding-left: calc(18px + 0.8rem);
103
- padding-top: 0.5rem;
104
101
  }
105
- :host([dir="rtl"]) textarea.d2l-input[aria-invalid="true"]:focus,
102
+ :host([dir="rtl"]) textarea.d2l-input[aria-invalid="true"]:${focusClass},
106
103
  :host([dir="rtl"]) textarea.d2l-input[aria-invalid="true"]:hover {
107
104
  background-position: top calc(12px - 1px) left calc(18px - 1px);
108
- padding: var(--d2l-input-padding-focus, calc(0.75rem - 1px));
109
- padding-bottom: calc(0.5rem - 1px);
110
- padding-left: calc(18px + 0.8rem - 1px);
111
- padding-top: calc(0.5rem - 1px);
112
105
  }
113
106
  textarea[aria-invalid="true"].d2l-input:disabled {
114
107
  background-image: none;
115
108
  }
109
+
110
+ @media (prefers-contrast: more) {
111
+ [aria-invalid="true"].d2l-input {
112
+ background-color: Field;
113
+ border-color: var(--d2l-color-cinnabar);
114
+ box-shadow: none;
115
+ color: FieldText;
116
+ forced-color-adjust: none;
117
+ }
118
+ .d2l-input-focus {
119
+ border-color: Highlight;
120
+ }
121
+ }
116
122
  `;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.127.4",
3
+ "version": "3.127.5",
4
4
  "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
5
5
  "type": "module",
6
6
  "repository": "https://github.com/BrightspaceUI/core.git",