Skip to content

Commit ba0a773

Browse files
nilloqnilloq
committed
Merge branch 'ouds/main' into ouds/main-sco-password-input
2 parents dc365f9 + dbfaa89 commit ba0a773

File tree

15 files changed

+185
-140
lines changed

15 files changed

+185
-140
lines changed

‎package-lock.json‎

Lines changed: 28 additions & 14 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/orange/scss/tokens/_composite.scss‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,19 @@ $ouds-elevation-sticky: $ouds-elevation-x-sticky $ouds-elevation-y-sticky $ouds-
1414

1515
// Font
1616

17+
// stylelint-disable value-keyword-case, scss/dollar-variable-colon-space-after
18+
// scss-docs-start ouds-composite-font-sans-serif
1719
$custom-font-name: "HelvNeueOrange" !default;
1820

1921
// Map of CDN URLs for custom font, with weight as keys
20-
$custom-font-cdn-urls: () !default;
22+
$custom-font-cdn-urls: (
23+
$ouds-font-weight-system-web-default: "https://mastermedia.dam-broadcast.com/pm_12751_490_490071-myaimdgylf--HelveticaNeue-Default.woff2",
24+
$ouds-font-weight-system-web-moderate: "https://mastermedia.dam-broadcast.com/pm_12751_490_490074-tqtijgs7e4--HelveticaNeue-Moderate.woff2",
25+
$ouds-font-weight-system-web-strong: "https://mastermedia.dam-broadcast.com/pm_12751_490_490077-wejriti88u--HelveticaNeue-Strong.woff2"
26+
) !default;
2127

22-
// stylelint-disable value-keyword-case, scss/dollar-variable-colon-space-after
23-
// scss-docs-start ouds-composite-font-sans-serif
2428
$ouds-font-family-sans-serif-stack:
25-
// Custom OUDS font
29+
// OUDS custom font
2630
$custom-font-name,
2731
// Older macOS and iOS
2832
"Helvetica Neue",

‎packages/sosh/scss/tokens/_composite.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ $ouds-elevation-sticky: $ouds-elevation-x-sticky $ouds-elevation-y-sticky $ouds-
1414

1515
// Font
1616

17+
// stylelint-disable value-keyword-case, scss/dollar-variable-colon-space-after
18+
// scss-docs-start ouds-composite-font-sans-serif
1719
$custom-font-name: "Sosh" !default;
1820

1921
// Map of CDN URLs for custom font, with weight as keys
@@ -22,10 +24,8 @@ $custom-font-cdn-urls: (
2224
$ouds-font-weight-system-web-strong: "https://mastermedia.dam-broadcast.com/pm_12751_481_481815-qd9nelrt7o--Sosh-Bold.woff2"
2325
) !default;
2426

25-
// stylelint-disable value-keyword-case, scss/dollar-variable-colon-space-after
26-
// scss-docs-start ouds-composite-font-sans-serif
2727
$ouds-font-family-sans-serif-stack:
28-
// Custom OUDS font
28+
// OUDS custom font
2929
$custom-font-name,
3030
// Basic web fallback
3131
Arial,

‎scss/_maps.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,8 @@ $ouds-font-sizes: (
120120

121121
$ouds-font-weights: (
122122
normal: $ouds-font-weight-system-web-default,
123-
bold: $ouds-font-weight-system-web-strong
123+
medium: $ouds-font-weight-system-web-moderate,
124+
bold: $ouds-font-weight-system-web-strong,
124125
) !default;
125126

126127
$ouds-icon-sizes: ("small", "medium", "large") !default;

‎scss/forms/_text-input.scss‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -226,6 +226,7 @@
226226

227227
// Disabled inputs
228228
&:has(.text-input-field:disabled) {
229+
--#{$prefix}text-input-label-color: var(--#{$prefix}color-action-disabled);
229230
--#{$prefix}text-input-color: var(--#{$prefix}color-action-disabled);
230231
--#{$prefix}text-input-border-color: var(--#{$prefix}color-action-disabled);
231232

@@ -281,6 +282,8 @@
281282
--#{$prefix}text-input-border-color: var(--#{$prefix}color-action-negative-enabled);
282283
--#{$prefix}text-input-label-color: var(--#{$prefix}color-action-negative-enabled);
283284

285+
padding-right: calc(var(--#{$prefix}text-input-trailing-action-padding-right) - var(--#{$prefix}text-input-border-width-left)); // stylelint-disable-line function-disallowed-list
286+
284287
.text-input-field,
285288
.input-container,
286289
label {
@@ -313,7 +316,7 @@
313316

314317
&:has(> button)::after {
315318
// stylelint-disable-next-line function-disallowed-list
316-
right: calc(calc(var(--#{$prefix}text-input-trailing-action-padding-right) + var(--#{$prefix}text-input-trailing-action-width) + var(--#{$prefix}text-input-column-gap-trailing-error)) - var(--#{$prefix}text-input-border-width-left));
319+
right: calc(var(--#{$prefix}text-input-trailing-action-padding-right) + var(--#{$prefix}text-input-trailing-action-width) + var(--#{$prefix}text-input-column-gap-trailing-error) - var(--#{$prefix}text-input-border-width-left));
317320
width: px-to-rem($ouds-button-size-icon-only);
318321
}
319322

@@ -366,9 +369,6 @@
366369
max-width: px-to-rem($ouds-text-area-size-max-width);
367370

368371
padding-top: calc($ouds-text-area-space-padding-block - var(--#{$prefix}text-input-border-width-top)); // stylelint-disable-line function-disallowed-list
369-
padding-right: calc($ouds-text-input-border-width-focus - var(--#{$prefix}text-input-border-width-right)); // stylelint-disable-line function-disallowed-list
370-
padding-bottom: calc($ouds-text-input-border-width-focus - var(--#{$prefix}text-input-border-width-bottom)); // stylelint-disable-line function-disallowed-list
371-
padding-left: calc($ouds-text-input-border-width-focus - var(--#{$prefix}text-input-border-width-left)); // stylelint-disable-line function-disallowed-list
372372
background-color: var(--#{$prefix}text-input-background-color);
373373
background-clip: padding-box;
374374
border-color: var(--#{$prefix}text-input-border-color);
@@ -390,8 +390,8 @@
390390

391391
> label {
392392
z-index: 2;
393-
padding-right: calc(#{$ouds-text-input-space-padding-inline-trailing-action} + var(--#{$prefix}text-input-trailing-action-width) + var(--#{$prefix}text-input-column-gap)); // stylelint-disable-line function-disallowed-list
394-
padding-left: $ouds-text-input-space-padding-inline-default;
393+
padding-right: calc($ouds-text-input-space-padding-inline-trailing-action + var(--#{$prefix}text-input-trailing-action-width) + var(--#{$prefix}text-input-column-gap) - var(--#{$prefix}text-input-border-width-right)); // stylelint-disable-line function-disallowed-list
394+
padding-left: calc(#{$ouds-text-input-space-padding-inline-default} - var(--#{$prefix}text-input-border-width-left)); // stylelint-disable-line function-disallowed-list
395395
color: var(--#{$prefix}text-input-label-color);
396396
text-overflow: ellipsis;
397397
white-space: nowrap;
@@ -413,12 +413,12 @@
413413
.text-area-field {
414414
z-index: 3;
415415
width: 100%;
416-
min-height: calc(px-to-rem($ouds-text-area-size-min-height-input) * 2); // stylelint-disable-line function-disallowed-list
416+
min-height: calc(px-to-rem($ouds-text-area-size-min-height-input) * 2 + $ouds-text-area-space-padding-block - var(--#{$prefix}text-input-border-width-bottom)); // stylelint-disable-line function-disallowed-list
417417
max-height: px-to-rem($ouds-text-area-size-max-height-input);
418418
padding: 0;
419-
padding-right: calc(#{$ouds-text-input-space-padding-inline-trailing-action} + var(--#{$prefix}text-input-trailing-action-width) + var(--#{$prefix}text-input-column-gap)); // stylelint-disable-line function-disallowed-list
419+
padding-right: calc($ouds-text-input-space-padding-inline-trailing-action + var(--#{$prefix}text-input-trailing-action-width) + var(--#{$prefix}text-input-column-gap) - var(--#{$prefix}text-input-border-width-right)); // stylelint-disable-line function-disallowed-list
420420
padding-bottom: $ouds-text-area-space-padding-block;
421-
padding-left: $ouds-text-input-space-padding-inline-default;
421+
padding-left: calc(#{$ouds-text-input-space-padding-inline-default} - var(--#{$prefix}text-input-border-width-left)); // stylelint-disable-line function-disallowed-list
422422
color: var(--#{$prefix}text-input-color);
423423
appearance: none;
424424
caret-color: var(--#{$prefix}text-input-caret-color);
@@ -429,7 +429,7 @@
429429

430430
@supports (field-sizing: content) {
431431
field-sizing: content; // Not yet standard, but supported in some browsers
432-
min-height: px-to-rem($ouds-text-area-size-min-height-input);
432+
min-height: calc(px-to-rem($ouds-text-area-size-min-height-input) + $ouds-text-area-space-padding-block - var(--#{$prefix}text-input-border-width-bottom)); // stylelint-disable-line function-disallowed-list
433433
}
434434

435435
&:focus,
@@ -485,6 +485,7 @@
485485

486486
// Disabled inputs
487487
&:has(.text-area-field:disabled) {
488+
--#{$prefix}text-input-label-color: var(--#{$prefix}color-action-disabled);
488489
--#{$prefix}text-input-color: var(--#{$prefix}color-action-disabled);
489490
--#{$prefix}text-input-border-color: var(--#{$prefix}color-action-disabled);
490491

@@ -508,7 +509,7 @@
508509

509510
&::after {
510511
position: absolute;
511-
top: calc(px-to-rem($ouds-text-area-size-max-height-assets-container) / 2 + ($ouds-text-area-space-padding-block) / 2 - var(--#{$prefix}text-input-border-width-top)); // stylelint-disable-line function-disallowed-list
512+
top: calc(px-to-rem($ouds-text-area-size-max-height-assets-container) / 2 + ($ouds-text-area-space-padding-block) - var(--#{$prefix}text-input-border-width-top)); // stylelint-disable-line function-disallowed-list
512513
right: calc(var(--#{$prefix}text-input-trailing-action-padding-right) - var(--#{$prefix}text-input-border-width-left)); // stylelint-disable-line function-disallowed-list
513514
width: var(--#{$prefix}text-input-trailing-action-width);
514515
height: var(--#{$prefix}text-input-trailing-action-height);

0 commit comments

Comments
 (0)