Skip to content

Commit

Permalink
Merge pull request #213 from newfold-labs/enhance/PRESS2-563-replace-…
Browse files Browse the repository at this point in the history
…hex-rgb-values

Replace hex and RGB values
  • Loading branch information
arunshenoy99 authored May 10, 2023
2 parents e37050a + df6fb35 commit 8973903
Show file tree
Hide file tree
Showing 37 changed files with 787 additions and 800 deletions.
56 changes: 28 additions & 28 deletions src/OnboardingSPA/components/Accordion/stylesheet.scss
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
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
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
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
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);
}
}
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
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

0 comments on commit 8973903

Please sign in to comment.