Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace hex and RGB values #213

Merged
merged 28 commits into from
May 10, 2023
Merged

Replace hex and RGB values #213

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
dd4d551
renaming light to white and dark to black with linting
abhijitb Apr 13, 2023
2c65cba
Merge branch 'trunk' into enhance/PRESS2-563-replace-hex-rgb-values
abhijitb Apr 13, 2023
896c2d2
Merge branch 'trunk' into enhance/PRESS2-563-replace-hex-rgb-values
abhijitb Apr 18, 2023
959c71f
removed references to $white and $black also removed redundant vars
abhijitb Apr 19, 2023
317a97e
lint changes
abhijitb Apr 19, 2023
d48dbbf
some more liint
abhijitb Apr 19, 2023
be7fd23
renamed vars from light to base
abhijitb Apr 19, 2023
c77c40b
renamed css vars in JS file
abhijitb Apr 19, 2023
78adc8f
renamed css vars from dark to contrast
abhijitb Apr 19, 2023
3306f37
Js lint fixes
abhijitb Apr 19, 2023
f6f625c
SCSS linting
abhijitb Apr 19, 2023
b665b3b
reverted light -> base for gray color CSS
abhijitb Apr 27, 2023
de1120b
replaced bg -> base and fg -> contrast
abhijitb Apr 28, 2023
a037604
Merge branch 'trunk' into enhance/PRESS2-563-replace-hex-rgb-values
abhijitb Apr 28, 2023
36e2ff9
lint fix
abhijitb Apr 28, 2023
1f67805
Merge branch 'trunk' into enhance/PRESS2-563-replace-hex-rgb-values
abhijitb May 2, 2023
fb45fd3
fixed renaming css class issue
abhijitb May 3, 2023
263ebd1
added new CSS vars and renamed some
abhijitb May 3, 2023
03c3572
using css var instead of hex code
abhijitb May 3, 2023
726685a
renaming bg to base and fg to contrast
abhijitb May 3, 2023
f41d334
fix box shadow not working with CSS var
abhijitb May 4, 2023
7f8f330
hardcoding sidebar subheading color
abhijitb May 5, 2023
a14a7d9
Merge branch 'trunk' into enhance/PRESS2-563-replace-hex-rgb-values
abhijitb May 5, 2023
3622bab
fixed issues reported in QA
abhijitb May 8, 2023
001c6fc
missed updating in CSS var
abhijitb May 8, 2023
06a9ca2
Merge branch 'trunk' into enhance/PRESS2-563-replace-hex-rgb-values
abhijitb May 10, 2023
9571a7c
fixed merge conflicts and CSS vars
abhijitb May 10, 2023
df6fb35
Merge branch 'trunk' into enhance/PRESS2-563-replace-hex-rgb-values
abhijitb May 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 28 additions & 28 deletions src/OnboardingSPA/components/Accordion/stylesheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,34 @@
.nfd-onboarding-accordion {
border: $border-width solid var(--nfd-onboarding-dark);
margin-bottom: $grid-unit-05;
margin-top: $grid-unit-05;
opacity: 0.8;
padding: $border-width;
transition: opacity 233ms ease;
@include reduce-motion("transition");
border: $border-width solid var(--nfd-onboarding-contrast);
margin-bottom: $grid-unit-05;
margin-top: $grid-unit-05;
opacity: 0.8;
padding: $border-width;
transition: opacity 233ms ease;

&:hover,
&:focus,
&[open] {
opacity: 1;
}
@include reduce-motion("transition");

&__summary {
background-color: var(--nfd-onboarding-light);
color: var(--nfd-onboarding-dark);
cursor: pointer;
font-weight: 700;
padding: $grid-unit-05 $grid-unit-10;
&:hover,
&:focus,
&[open] {
opacity: 1;
}

p {
display: inline;
}
}
&__summary {
background-color: var(--nfd-onboarding-base);
color: var(--nfd-onboarding-contrast);
cursor: pointer;
font-weight: 700;
padding: $grid-unit-05 $grid-unit-10;

&__content {
margin: 0 $grid-unit-20;
padding: $grid-unit-10 0;
color: var(--nfd-onboarding-dark);
}
p {
display: inline;
}
}

}
&__content {
margin: 0 $grid-unit-20;
padding: $grid-unit-10 0;
color: var(--nfd-onboarding-contrast);
}
}
2 changes: 1 addition & 1 deletion src/OnboardingSPA/components/App/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,7 @@ const App = () => {

return (
<Fragment>
<FullscreenMode isActive={ true } />\
<FullscreenMode isActive={ true } />
<SlotFillProvider>
<NewfoldInterfaceSkeleton
className={ classNames(
Expand Down
3 changes: 1 addition & 2 deletions src/OnboardingSPA/components/Button/ButtonBlue/stylesheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
$button-blue-text-color : #fff;

.nfd-onboarding-button {

&--blue {
justify-content: center;
align-items: center;
width: 100%;
color: $button-blue-text-color;
color: var(--nfd-onboarding-white);
height: 36px;
border: none;
margin: 10px 0;
Expand Down
3 changes: 1 addition & 2 deletions src/OnboardingSPA/components/Button/ButtonWhite/stylesheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
$button-white-background-color : #fff;

.nfd-onboarding-button {

&--white {
justify-content: center;
align-items: center;
width: 100%;
background: $button-white-background-color;
background: var(--nfd-onboarding-white);
color: var(--wp-admin-theme-color);
border: 1px solid var(--wp-admin-theme-color);
height: 36px;
Expand Down
41 changes: 17 additions & 24 deletions src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,3 @@
/*COLOR VARIABLES*/
$white-offset: rgb(224, 224, 224);
$main-color-dark: var(--wp-admin-theme-color);
$main-color-light: var(--nfd-onboarding-white);
$main-color: var(--nfd-onboarding-highlighted--rgb);
$main-border-main: var(--nfd-onboarding-primary-alt);
$box-shadow: var(--nfd-onboarding-light-gray-highlighted);

.checkbox-item {

Expand All @@ -15,8 +8,8 @@ $box-shadow: var(--nfd-onboarding-light-gray-highlighted);
margin: 12px;
padding: 16px;
margin-top: 16px;
background: $main-color-light;
border: 1px solid $white-offset;
background: var(--nfd-onboarding-white);
border: 1px solid var(--nfd-onboarding-light-gray-6);
width: clamp(15rem, 25vw, 35rem);
box-shadow: 0 2px 8px 2px rgba(204, 204, 204, 0.175295);

Expand Down Expand Up @@ -50,11 +43,11 @@ $box-shadow: var(--nfd-onboarding-light-gray-highlighted);
justify-content: center;

&--selected {
background: $main-color-dark !important;
background: var(--wp-admin-theme-color) !important;
}

&--shown {
background: #f0f0f0;
background: var(--nfd-onboarding-light-gray);
}
}

Expand All @@ -72,7 +65,7 @@ $box-shadow: var(--nfd-onboarding-light-gray-highlighted);
font-size: clamp(0.9rem, 2vw, 1rem);

&--selected {
color: $main-color-dark;
color: var(--wp-admin-theme-color);
}
}

Expand All @@ -96,18 +89,18 @@ $box-shadow: var(--nfd-onboarding-light-gray-highlighted);
}

&--selected {
background: rgba($main-color, 0.2);
border: 1px solid rgba($main-color, 0.6);
box-shadow: 0 2px 8px 2px rgba($white-offset, 0.8);
background: rgba(var(--nfd-onboarding-highlighted--rgb), 0.2);
border: 1px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.6);
box-shadow: 0 2px 8px 2px rgba(224, 224, 224, 0.8);
}

&--shown {
border-bottom: none;
background: $box-shadow;
background: var(--nfd-onboarding-light-gray-highlighted);
border-radius: 2px 2px 0 0;
border-top: 1px solid rgba($main-color, 0.1);
border-left: 1px solid rgba($main-color, 0.1);
border-right: 1px solid rgba($main-color, 0.1);
border-top: 1px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.1);
border-left: 1px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.1);
border-right: 1px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.1);
}

&__dropdown {
Expand All @@ -123,14 +116,14 @@ $box-shadow: var(--nfd-onboarding-light-gray-highlighted);
margin-top: -12px;
position: absolute;
font-style: italic;
background: $box-shadow;
background: var(--nfd-onboarding-light-gray-highlighted);
border-radius: 0 0 2px 2px;
transform-origin: top center;
width: clamp(15rem, 25vw, 35rem);
font-size: clamp(0.82rem, 2vw, 0.9rem);
border-left: 1px solid rgba($main-color, 0.1);
border-right: 1px solid rgba($main-color, 0.1);
border-bottom: 1px solid rgba($main-color, 0.1);
box-shadow: 0 11px 8px -3px rgba($main-color, 0.37);
border-left: 1px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.1);
border-right: 1px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.1);
border-bottom: 1px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.1);
box-shadow: 0 11px 8px -3px rgba(var(--nfd-onboarding-highlighted--rgb), 0.37);
}
}
12 changes: 3 additions & 9 deletions src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,13 @@
/*COLOR VARIABLES*/
$white-offset: rgb(224, 224, 224);
$main-color-light: var(--nfd-onboarding-white);
$grey-color: #f6f7f8;

.checkbox-skeleton-item {
height: 45px;
margin: 12px;
padding: 16px;
margin-top: 16px;
border: 0.5px solid $white-offset;
border: 0.5px solid var(--nfd-onboarding-light-gray-6);
cursor: not-allowed;
width: clamp(15rem, 25vw, 35rem);
box-shadow: 0 2px 8px 2px rgba(204, 204, 204, 0.175295);
background: $grey-color;
background: var(--nfd-onboarding-light-gray-7);
background-repeat: no-repeat;
background-image:
linear-gradient(to right, $grey-color 0%, $main-color-grey 20%, $grey-color 40%, $grey-color 100%);
background-image: linear-gradient(to right, var(--nfd-onboarding-light-gray-7) 0%, var(--nfd-onboarding-light-gray) 20%, var(--nfd-onboarding-light-gray-7) 40%, var(--nfd-onboarding-light-gray-7) 100%);
}
6 changes: 3 additions & 3 deletions src/OnboardingSPA/components/Content/stylesheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.interface-interface-skeleton__content {
background-color: var(--nfd-onboarding-content-bg);
color: var(--nfd-onboarding-content-fg);
}
background-color: var(--nfd-onboarding-content-base);
color: var(--nfd-onboarding-content-contrast);
}
Loading