Skip to content

Commit

Permalink
feat: use o-private-foundation's o-normalise
Browse files Browse the repository at this point in the history
  • Loading branch information
@frshwtr
frshwtr committed Nov 7, 2024
1 parent a27875a commit b510e4c
Show file tree
Hide file tree
Showing 21 changed files with 57 additions and 44 deletions.
2 changes: 1 addition & 1 deletion components/o-banner/demos/src/demo.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
@include oBanner();
@import '@financial-times/o-fonts/main';
@include oFonts();
@financial-times/o-normalise/main
@import '@financial-times/o-normalise/main';
@include oNormalise();

body {
Expand Down
2 changes: 1 addition & 1 deletion components/o-colors/demos/src/demo.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
@include oColors();
@import '@financial-times/o-fonts/main';
@include oFonts();
@financial-times/o-normalise/main
@import "@financial-times/o-normalise/main";
@include oNormalise();


Expand Down
2 changes: 1 addition & 1 deletion components/o-comments/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
"@financial-times/o-colors": "^6.5.0",
"@financial-times/o-editorial-typography": "^2.0.1",
"@financial-times/o-forms": "^9.2.0",
"@financial-times/o-normalise": "^3.3.0",
"@financial-times/o-private-foundation": "0.0.0",
"@financial-times/o-overlay": "^4.2.1",
"@financial-times/o-spacing": "^3.0.0",
"@financial-times/o-typography": "^7.4.1",
Expand Down
3 changes: 2 additions & 1 deletion components/o-comments/src/scss/_mixins.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@use '@financial-times/o-private-foundation/o-normalise/src/scss/_mixins.scss' as *;
/// Output All oComments Features
@mixin oComments($opts: ('coral-talk-iframe': true)) {

Expand Down Expand Up @@ -45,7 +46,7 @@
}

.o-comments__edit-display-name-descriptive {
@include oNormaliseVisuallyHidden();
@include oPrivateNormaliseVisuallyHidden();
}

.o-overlay.o-comments__displayname-prompt {
Expand Down
2 changes: 1 addition & 1 deletion components/o-forms/demos/src/demo.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
@include oFonts();
@import '@financial-times/o-buttons/main';
@include oButtons();
@financial-times/o-normalise/main
@import '@financial-times/o-normalise/main';
@include oNormalise();
body {
background: oColorsByUsecase(page, background);
Expand Down
6 changes: 3 additions & 3 deletions components/o-forms/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
@import '@financial-times/o-grid/main';
@import '@financial-times/o-icons/main';
@import '@financial-times/o-loading/main';
@financial-times/o-normalise/main
@use '@financial-times/o-private-foundation/o-normalise/src/_mixins.scss' as *;
@import '@financial-times/o-typography/main';

@import 'src/scss/main';
Expand Down Expand Up @@ -82,8 +82,8 @@
}
}
.o-forms-field--#{$theme} input {
@include oNormaliseFocusApply() {
@include oNormaliseFocusContentInverse();
@include oPrivateNormaliseFocusApply() {
@include oPrivateNormaliseFocusContentInverse();
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion components/o-forms/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
"@financial-times/o-grid": "^6.0.0",
"@financial-times/o-icons": "^7.0.0",
"@financial-times/o-loading": "^5.0.0",
"@financial-times/o-normalise": "^3.3.0",
"@financial-times/o-private-foundation": "0.0.0",
"@financial-times/o-spacing": "^3.0.0",
"@financial-times/o-typography": "^7.4.1",
"@financial-times/o-utils": "^2.2.0"
Expand Down
17 changes: 9 additions & 8 deletions components/o-forms/src/scss/_checkbox.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@use '@financial-times/o-private-foundation/o-normalise/src/scss/_mixins.scss' as *;
/// @access private
/// @param {Boolean} $disabled Whether to output disabled state styling
/// @param {Boolean} $right Whether to display checkbox to the right of text
Expand All @@ -13,9 +14,9 @@
@include _oFormsControlsBase($disabled);

&:focus {
@include oNormaliseFocusUnsetContent();
@include oPrivateNormaliseFocusUnsetContent();
& + .o-forms-input__label:before { // stylelint-disable-line selector-no-qualifying-type
@include oNormaliseFocusContent();
@include oPrivateNormaliseFocusContent();
}
}

Expand All @@ -26,12 +27,12 @@
// do not understand `@supports: selector()`.
@supports selector(:focus-visible) {
&:focus + .o-forms-input__label:before { // stylelint-disable-line selector-no-qualifying-type
@include oNormaliseFocusUnsetContent();
@include oPrivateNormaliseFocusUnsetContent();
}

&:focus-visible {
& + .o-forms-input__label:before { // stylelint-disable-line selector-no-qualifying-type
@include oNormaliseFocusContent();
@include oPrivateNormaliseFocusContent();
}
}
}
Expand Down Expand Up @@ -128,9 +129,9 @@
@if $theme and oColorsColorBrightness(_oFormsGet("default-text", $theme)) > 65% {
input[type=checkbox] { // stylelint-disable-line selector-no-qualifying-type
&:focus {
@include oNormaliseFocusUnsetContent();
@include oPrivateNormaliseFocusUnsetContent();
& + .o-forms-input__label:before { // stylelint-disable-line selector-no-qualifying-type
@include oNormaliseFocusContentInverse();
@include oPrivateNormaliseFocusContentInverse();
}
}

Expand All @@ -141,12 +142,12 @@
// do not understand `@supports: selector()`.
@supports selector(:focus-visible) {
&:focus + .o-forms-input__label:before { // stylelint-disable-line selector-no-qualifying-type
@include oNormaliseFocusUnsetContent();
@include oPrivateNormaliseFocusUnsetContent();
}

&:focus-visible {
& + .o-forms-input__label:before { // stylelint-disable-line selector-no-qualifying-type
@include oNormaliseFocusContentInverse();
@include oPrivateNormaliseFocusContentInverse();
}
}
}
Expand Down
14 changes: 8 additions & 6 deletions components/o-forms/src/scss/_radio-box.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@use '@financial-times/o-private-foundation/o-normalise/src/scss/_mixins.scss' as *;

// sass-lint:disable no-qualifying-elements
/// @access private
/// @param {Boolean} $disabled Whether to output disabled state styling
Expand Down Expand Up @@ -101,13 +103,13 @@
}

&:focus {
@include oNormaliseFocusUnsetContent();
@include oPrivateNormaliseFocusUnsetContent();
& + .o-forms-input__label { // stylelint-disable-line selector-no-qualifying-type
$default-text: _oFormsGet("default-text", $theme);
@if $default-text and oColorsColorBrightness($default-text) > 65% {
@include oNormaliseFocusContentInverse();
@include oPrivateNormaliseFocusContentInverse();
} @else {
@include oNormaliseFocusContent();
@include oPrivateNormaliseFocusContent();
}
}
}
Expand All @@ -119,16 +121,16 @@
// do not understand `@supports: selector()`.
@supports selector(:focus-visible) {
&:focus + .o-forms-input__label { // stylelint-disable-line selector-no-qualifying-type
@include oNormaliseFocusUnsetContent();
@include oPrivateNormaliseFocusUnsetContent();
}

&:focus-visible {
& + .o-forms-input__label { // stylelint-disable-line selector-no-qualifying-type
$default-text: _oFormsGet("default-text", $theme);
@if $default-text and oColorsColorBrightness($default-text) > 65% {
@include oNormaliseFocusContentInverse();
@include oPrivateNormaliseFocusContentInverse();
} @else {
@include oNormaliseFocusContent();
@include oPrivateNormaliseFocusContent();
}
}
}
Expand Down
18 changes: 10 additions & 8 deletions components/o-forms/src/scss/_radio-round.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@use '@financial-times/o-private-foundation/o-normalise/src/scss/_mixins.scss' as *;

// sass-lint:disable selector-no-qualifying-type
/// @access private
/// @param {Boolean} $disabled Whether to output disabled state styling
Expand Down Expand Up @@ -44,9 +46,9 @@
}

&:focus {
@include oNormaliseFocusUnsetContent();
@include oPrivateNormaliseFocusUnsetContent();
& + .o-forms-input__label:before { // stylelint-disable-line selector-no-qualifying-type
@include oNormaliseFocusContent();
@include oPrivateNormaliseFocusContent();
}
}

Expand All @@ -57,12 +59,12 @@
// do not understand `@supports: selector()`.
@supports selector(:focus-visible) {
&:focus + .o-forms-input__label:before { // stylelint-disable-line selector-no-qualifying-type
@include oNormaliseFocusUnsetContent();
@include oPrivateNormaliseFocusUnsetContent();
}

&:focus-visible {
& + .o-forms-input__label:before { // stylelint-disable-line selector-no-qualifying-type
@include oNormaliseFocusContent();
@include oPrivateNormaliseFocusContent();
}
}
}
Expand Down Expand Up @@ -104,9 +106,9 @@
@if $theme and oColorsColorBrightness(_oFormsGet("default-text", $theme)) > 65% {
input[type="radio"] {// stylelint-disable-line selector-no-qualifying-type
&:focus {
@include oNormaliseFocusUnsetContent();
@include oPrivateNormaliseFocusUnsetContent();
& + .o-forms-input__label:before {// stylelint-disable-line selector-no-qualifying-type
@include oNormaliseFocusContentInverse();
@include oPrivateNormaliseFocusContentInverse();
}
}

Expand All @@ -117,12 +119,12 @@
// do not understand `@supports: selector()`.
@supports selector(:focus-visible) {
&:focus + .o-forms-input__label:before {// stylelint-disable-line selector-no-qualifying-type
@include oNormaliseFocusUnsetContent();
@include oPrivateNormaliseFocusUnsetContent();
}

&:focus-visible {
& + .o-forms-input__label:before {// stylelint-disable-line selector-no-qualifying-type
@include oNormaliseFocusContentInverse();
@include oPrivateNormaliseFocusContentInverse();
}
}
}
Expand Down
1 change: 1 addition & 0 deletions components/o-forms/src/scss/_toggle.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@use '@financial-times/o-private-foundation/o-normalise/src/scss/_mixins.scss' as *;
// sass-lint:disable selector-no-qualifying-type
/// @access private
/// @param {Boolean} $disabled Whether to output disabled state styling
Expand Down
2 changes: 1 addition & 1 deletion components/o-forms/stories/forms.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import '@financial-times/o-fonts/main';
@financial-times/o-normalise/main
@import '@financial-times/o-normalise/main';
@include oFonts();
@include oNormalise();

Expand Down
3 changes: 2 additions & 1 deletion components/o-header/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,8 @@
"devDependencies": {
"@financial-times/o-fonts": "^5.2.0",
"@financial-times/o-grid": "^6.1.1",
"@financial-times/o-normalise": "^3.3.0"
"@financial-times/o-normalise": "^3.3.0",
"@financial-times/o-private-foundation": "0.0.0"
},
"engines": {
"npm": ">7"
Expand Down
6 changes: 4 additions & 2 deletions components/o-header/src/scss/_base.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@use '@financial-times/o-private-foundation/o-normalise/src/scss/_mixins.scss' as *;

@mixin _oHeaderBase() {
.o-header {
position: relative;
Expand All @@ -11,10 +13,10 @@

.o-header__container {
@include oGridContainer();
@include oNormaliseClearfix();
@include oPrivateNormaliseClearfix();
}

.o-header__visually-hidden {
@include oNormaliseVisuallyHidden;
@include oPrivateNormaliseVisuallyHidden;
}
}
2 changes: 1 addition & 1 deletion components/o-private-foundation/o-normalise/src/scss/_mixins.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/// Visually hide an element while still
/// allowing it to be read by a screenreader
@include oPrivateNormaliseVisuallyHidden {
@mixin oPrivateNormaliseVisuallyHidden {
position: absolute;
clip: rect(0 0 0 0);
clip-path: polygon(0 0, 0 0);
Expand Down
2 changes: 1 addition & 1 deletion components/o-share/demos/src/demo.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
@include oShare();
@import '@financial-times/o-fonts/main';
@include oFonts();
@financial-times/o-normalise/main
@import '@financial-times/o-normalise/main';
@include oNormalise();

.demo {
Expand Down
4 changes: 2 additions & 2 deletions components/o-share/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
@import '@financial-times/o-brand/main';
@import '@financial-times/o-colors/main';
@import '@financial-times/o-grid/main';
@financial-times/o-normalise/main
@import '@financial-times/o-spacing/main';
@import '@financial-times/o-typography/main';
@use '@financial-times/o-private-foundation/o-normalise/src/scss/_mixins.scss' as *;

@import 'src/scss/variables';
@import 'src/scss/color-use-cases';
Expand Down Expand Up @@ -101,7 +101,7 @@
// Icon text is visually hidden by default without the class
// `.o-share__action--labelled`.
.o-share__action:not(.o-share__action--labelled) .o-share__text {
@include oNormaliseVisuallyHidden();
@include oPrivateNormaliseVisuallyHidden();
}


Expand Down
2 changes: 1 addition & 1 deletion components/o-share/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
"@financial-times/o-brand": "^4.1.0",
"@financial-times/o-colors": "^6.5.0",
"@financial-times/o-grid": "^6.0.0",
"@financial-times/o-normalise": "^3.3.0",
"@financial-times/o-private-foundation": "0.0.0",
"@financial-times/o-spacing": "^3.0.0",
"@financial-times/o-typography": "^7.4.1"
},
Expand Down
5 changes: 3 additions & 2 deletions components/o-share/src/scss/_mixins.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@use '@financial-times/o-private-foundation/o-normalise/src/scss/_mixins.scss' as *;
/// Output styles for a theme such as the inverse variant
/// @param {String|Null} $name (null) - The theme to output styles for.
/// @param {List} $icons [()] - A list of icons to support.
Expand All @@ -11,8 +12,8 @@
color: $color;
border-color: $border-color;

@include oNormaliseFocusApply() {
@include oNormaliseFocusContentForElementColour($color);
@include oPrivateNormaliseFocusApply() {
@include oPrivateNormaliseFocusContentForElementColour($color);
}
}

Expand Down
2 changes: 1 addition & 1 deletion components/o-share/stories/share.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import '@financial-times/o-fonts/main';
@financial-times/o-normalise/main
@import '@financial-times/o-normalise/main';
@include oFonts();
@include oNormalise();

Expand Down
4 changes: 3 additions & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit b510e4c

Please sign in to comment.