Skip to content

Commit

Permalink
feat: update component colors, input styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@laurelfulford
laurelfulford committed Apr 5, 2024
1 parent 1399602 commit 8b24067
Show file tree
Hide file tree
Showing 12 changed files with 120 additions and 73 deletions.
13 changes: 7 additions & 6 deletions assets/newspack-ui/scss/_modals.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,8 +108,8 @@
}
&__modal {
// CSS Variables - update button background, with fallbacks to the Newspack UI defaults
--newspack-ui-color-button-bg: var( --newspack-ui-color-primary, var( --newspack-ui-color-gray-900 ) );
--newspack-ui-color-button-text: var( --newspack-ui-color-against-primary, var( --newspack-ui-color-white ) );
--newspack-ui-color-button-bg: var( --newspack-ui-color-primary, var( --newspack-ui-color-neutral-90 ) );
--newspack-ui-color-button-text: var( --newspack-ui-color-against-primary, var( --newspack-ui-color-neutral-0 ) );

// Modal styles
background: var( --newspack-ui-color-body-bg );
Expand All @@ -135,6 +135,7 @@
border-bottom: 1px solid var( --newspack-ui-color-border );

h2 {
font-family: var( --newspack-ui-font-family );
font-size: var( --newspack-ui-font-size-medium );
margin: 0;
}
Expand All @@ -144,13 +145,13 @@
margin: -2px -5px 0 0; // Offsets a padding in the SVG.
padding: 0 0 0 8px;
background: transparent;
color: var( --newspack-ui-color-text-high-contrast );
color: var( --newspack-ui-color-neutral-90 );
cursor: pointer;

&:focus,
&:hover {
background: transparent;
color: var( --newspack-ui-color-text-med-contrast );
color: var( --newspack-ui-color-neutral-70 );
}
svg {
display: block;
Expand All @@ -165,8 +166,8 @@
}

&__footer {
background: var( --newspack-ui-color-gray-100 );
color: var( --newspack-ui-color-text-med-contrast );
background: var( --newspack-ui-color-neutral-5 );
color: var( --newspack-ui-color-neutral-60 );
font-size: var( --newspack-ui-font-size-extra-small );
line-height: var( --newspack-ui-line-height-small );
a {
Expand Down
6 changes: 3 additions & 3 deletions assets/newspack-ui/scss/elements/_boxes.scss
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
.newspack-ui {
.newspack-ui {
&__box {
background: var( --newspack-ui-color-gray-100 );
background: var( --newspack-ui-color-neutral-5 );
border-radius: var( --newspack-ui-border-radius );
margin-bottom: var( --newspack-ui-spacer-5 );
padding: var( --newspack-ui-spacer-5 );

// Backgrounds & Borders
&--success {
background: var( --newspack-ui-color-alert-green-bg );
background: var( --newspack-ui-color-success-0 );
}

&--error {
background: var( --newspack-ui-color-alert-red-bg );
background: var( --newspack-ui-color-error-0 );
}

&--warning {
Expand Down
6 changes: 3 additions & 3 deletions assets/newspack-ui/scss/elements/_icons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,17 @@
width: var( --newspack-ui-spacer-7 );

&--success {
background: var( --newspack-ui-color-alert-green );
background: var( --newspack-ui-color-success-50 );
color: var( --newspack-ui-color-body-bg );
}

&--error {
background: var( --newspack-ui-color-alert-red );
background: var( --newspack-ui-color-error-50 );
color: var( --newspack-ui-color-body-bg );
}

&--warning {
background: var( --newspack-ui-color-alert-yellow );
background: var( --newspack-ui-color-warning-30 );
color: var( --newspack-ui-color-body-bg );
}
}
Expand Down
19 changes: 9 additions & 10 deletions assets/newspack-ui/scss/elements/forms/_buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@
}

&:disabled {
background: var( --newspack-ui-color-gray-100 ) !important;
color: var( --newspack-ui-color-text-med-contrast ) !important;
background: var( --newspack-ui-color-neutral-10 ) !important;
color: var( --newspack-ui-color-neutral-70 ) !important; //
cursor: default;
}

Expand All @@ -46,25 +46,24 @@
}

&--secondary {
background: transparent;
border: 1px solid var( --newspack-ui-color-border );
color: var( --newspack-ui-color-text-high-contrast );
background: var( --newspack-ui-color-neutral-10 );
color: var( --newspack-ui-color-neutral-90 );
padding: calc( var( --newspack-ui-spacer-2 ) - 1px )
calc( var( --newspack-ui-spacer-3 ) - 1px );

&:hover {
background: var( --newspack-ui-color-gray-100 );
color: var( --newspack-ui-color-text-high-contrast );
background: var( --newspack-ui-color-neutral-30 );
color: var( --newspack-ui-color-neutral-90 );
}
}

&--tertiary {
background: transparent;
color: var( --newspack-ui-color-text-high-contrast );
color: var( ---newspack-ui-color-neutral-90 );

&:hover {
background: var( --newspack-ui-color-gray-100 );
color: var( --newspack-ui-color-text-high-contrast );
background: var( --newspack-ui-color-neutral-10 );
color: var( --newspack-ui-color-neutral-90 );
}
}
}
Expand Down
22 changes: 11 additions & 11 deletions assets/newspack-ui/scss/elements/forms/_checkbox-radio.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@
input[type='radio'] {
appearance: none;
background: white;
border: solid 1px var( --newspack-ui-color-border );
border: solid 1px var( --newspack-ui-color-input-border );
color: white;
cursor: pointer;
display: inline-grid;
font: inherit;
height: var( --newspack-ui-spacer-5 ) !important;
height: var( --newspack-ui-spacer-4 ) !important;
margin: 0;
place-content: center;
width: var( --newspack-ui-spacer-5 ) !important;
width: var( --newspack-ui-spacer-4 ) !important;

&::before {
content: '';
Expand All @@ -26,7 +26,7 @@
}

&:focus {
outline: 1.5px solid var( --newspack-ui-color-radio-bg );
outline: 1.5px solid var( --newspack-ui-color-neutral-90 );
outline-offset: 1px;
}

Expand All @@ -37,7 +37,7 @@
}

input[type='checkbox'] {
border-radius: var( --newspack-ui-border-radius );
border-radius: var( --newspack-ui-border-radius-extra-small );

&::before {
background: transparent
Expand All @@ -48,7 +48,7 @@
}

&:checked {
background: var( --newspack-ui-color-radio-bg );
background: var( --newspack-ui-color-neutral-90 );
border-color: transparent;
}
}
Expand All @@ -57,15 +57,15 @@
border-radius: 100%;

&::before {
background: var( --newspack-ui-color-radio-bg );
background: var( --newspack-ui-color-neutral-0 );
border-radius: 100%;
height: var( --newspack-ui-spacer-3 );
margin: 4px;
width: var( --newspack-ui-spacer-3 );
height: var( --newspack-ui-spacer-base );
width: var( --newspack-ui-spacer-base );
}

&:checked {
border-color: var( --newspack-ui-color-radio-bg );
background: var( --newspack-ui-color-neutral-90 );
border-color: var( --newspack-ui-color-neutral-90 );
}
}
}
2 changes: 1 addition & 1 deletion assets/newspack-ui/scss/elements/forms/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,6 @@
}

&__inline-error {
color: var( --newspack-ui-color-alert-red );
color: var( --newspack-ui-color-error-50 );
}
}
4 changes: 2 additions & 2 deletions assets/newspack-ui/scss/elements/forms/_labels.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@

// This selector isn't supported in Firefox yet.
&:has( input:checked ) {
background: var( --newspack-ui-color-gray-100 );
border-color: var( --newspack-ui-color-gray-900 );
background: var( --newspack-ui-color-neutral-5 );
border-color: var( --newspack-ui-color-neutral-90 );
}

+ .newspack-ui__input-list {
Expand Down
2 changes: 1 addition & 1 deletion assets/newspack-ui/scss/elements/forms/_spinner.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
> span {
animation: spin 1s infinite linear;
border: 2px solid var( --newspack-ui-color-body-bg );
border-top-color: var( --newspack-ui-color-text-med-contrast );
border-top-color: var( --newspack-ui-color-neutral-70 );
border-radius: 50%;
height: 25px;
width: 25px;
Expand Down
8 changes: 5 additions & 3 deletions assets/newspack-ui/scss/elements/forms/_text-inputs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
input[type='zip'],
input[type='color'],
textarea {
border-color: var( --newspack-ui-color-border );
border-color: var( --newspack-ui-color-input-border );
border-radius: var( --newspack-ui-border-radius );
display: block;
font-family: var( --newspack-ui-font-family);
Expand All @@ -28,11 +28,13 @@
width: 100%;

&:focus {
border-color: var( --newspack-ui-color-text-med-contrast );
border-color: var( --newspack-ui-color-input-border-focus );
border-width: 2px;
}

&:disabled {
// TODO.
background-color: var( --newspack-ui-color-input-background-disabled );
border-color: var( --newspack-ui-color-input-border-disabled );
}
}
}
107 changes: 75 additions & 32 deletions assets/newspack-ui/scss/variables/_colors.scss
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,82 @@
:root {
// Grays - notes from the Gutenberg styles.
// TODO: Import from 'wordpress/base-styles/colors' ?
--newspack-ui-color-black: #000; // Use only when you truly need pure black. For UI, use $gray-900.
--newspack-ui-color-gray-900: #1e1e1e;
--newspack-ui-color-gray-800: #2f2f2f;
--newspack-ui-color-gray-700: #757575; // Meets 4.6:1 text contrast against white.
--newspack-ui-color-gray-600: #949494; // Meets 3:1 UI or large text contrast against white.
--newspack-ui-color-gray-400: #ccc;
--newspack-ui-color-gray-300: #ddd; // Used for most borders.
--newspack-ui-color-gray-200: #e0e0e0; // Used sparingly for light borders.
--newspack-ui-color-gray-100: #f0f0f0; // Used for light gray backgrounds.
--newspack-ui-color-white: #fff;

// Alert colors
--newpsack-ui-color-alert-yellow: #f0b849;
--newspack-ui-color-alert-green: #4ab866;
--newspack-ui-color-alert-red: #cc1818;
// --newpsack-ui-color-alert-yellow-bg: TBD
--newspack-ui-color-alert-green-bg: #edfaef;
--newpsack-ui-color-alert-red-bg: #fcf0f1;
// Neutral:
--newspack-ui-color-neutral-0: #fff;
--newspack-ui-color-neutral-5: #f7f7f7;
--newspack-ui-color-neutral-10: #f0f0f0;
--newspack-ui-color-neutral-20: #e0e0e0;
--newspack-ui-color-neutral-30: #ddd;
--newspack-ui-color-neutral-40: #ccc;
--newspack-ui-color-neutral-50: #949494;
--newspack-ui-color-neutral-60: #6c6c6c;
--newspack-ui-color-neutral-70: #00000070;
--newspack-ui-color-neutral-80: #3e3e3e;
--newspack-ui-color-neutral-90: #1e1e1e;
--newspack-ui-color-neutral-100: #000;

// Primary:
--newspack-ui-color-primary-0: #f5fdff;
--newspack-ui-color-primary-5: #d6f6ff;
--newspack-ui-color-primary-10: #b4e4ff;
--newspack-ui-color-primary-20: #93ccfd;
--newspack-ui-color-primary-30: #72affb;
--newspack-ui-color-primary-40: #528dfc;
--newspack-ui-color-primary-50: #36f;
--newspack-ui-color-primary-60: #2240d5;
--newspack-ui-color-primary-70: #1522af;
--newspack-ui-color-primary-80: #0b0b8d;
--newspack-ui-color-primary-90: #0d046e;
--newspack-ui-color-primary-100: #0e0052;

// Secondary:
--newspack-ui-color-secondary-30: #fffff0;
--newspack-ui-color-secondary-40: #ffffd3;
--newspack-ui-color-secondary-50: #ff0;
--newspack-ui-color-secondary-60: #f2f200;
--newspack-ui-color-secondary-70: #e4e400;

// Success:
--newspack-ui-color-success-0: #edfaef;
--newspack-ui-color-success-5: #b8e6bf;
--newspack-ui-color-success-50: #008a20;
--newspack-ui-color-success-60: #007017;

// Error:
--newspack-ui-color-error-0: #fcf0f1;
--newspack-ui-color-error-5: #facfd2;
--newspack-ui-color-error-50: #d63638;
--newspack-ui-color-error-60: #b32d2e;

//Warning:
--newspack-ui-color-warning-0: #fcf9e8;
--newspack-ui-color-warning-5: #f5e6ab;
--newspack-ui-color-warning-30: #dba617;
--newspack-ui-color-warning-40: #bd8600;

// Theme variables - from the classic theme; overridden in class-newspack-ui.php for block theme.
--newspack-ui-color-primary: var( --newspack-theme-color-primary );
--newspack-ui-color-against-primary: var( --newspack-theme-color-against-primary );

// Specific assignments - general:
--newspack-ui-color-text-high-contrast: var( --newspack-ui-color-gray-900 );
--newspack-ui-color-text-med-contrast: var( --newspack-ui-color-gray-700 );
--newspack-ui-color-border: var( --newspack-ui-color-gray-300 );
--newspack-ui-color-body-bg: var( --newspack-ui-color-white );

// Specific assignments - form elements
--newspack-ui-color-button-bg: var( --newspack-ui-color-gray-900 );
--newspack-ui-color-button-bg-hover: var( --newspack-ui-color-gray-800 ); // TODO: Replace w/correct value.
--newspack-ui-color-button-text: var( --newspack-ui-color-white );
--newspack-ui-color-button-text-hover: var( --newspack-ui-color-white );
--newspack-ui-color-radio-bg: var( --newspack-ui-color-gray-900 );
}
--newspack-ui-color-border: var( --newspack-ui-color-neutral-30 );
--newspack-ui-color-body-bg: var( --newspack-ui-color-neutral-0 );

// Specific assignments - form elements - buttons:
--newspack-ui-color-button-bg: var( --newspack-ui-color-neutral-90 );
--newspack-ui-color-button-bg-hover: var( --newspack-ui-color-neutral-60 );
--newspack-ui-color-button-text: var( --newspack-ui-color-neutral-0 );
--newspack-ui-color-button-text-hover: var( --newspack-ui-color-neutral-0 );

// Specific assignments - form elements - inputs:
--newspack-ui-color-input-border: var( --newspack-ui-color-neutral-40 );
--newspack-ui-color-input-border-focus: var( --newspack-ui-color-neutral-60 );
--newspack-ui-color-input-border-disabled: var( --newspack-ui-color-neutral-40 );
--newspack-ui-color-input-background-disabled: var( --newspack-ui-color-neutral-10 );

// Alternatives for when prefers-contrast is set to 'more':
@media ( prefers-contrast: more ) {
--newspack-ui-color-input-border: var( --newspack-ui-color-neutral-60 );
--newspack-ui-color-input-border-focus: var( --newspack-ui-color-neutral-90 );
--newspack-ui-color-input-border-disabled: var( --newspack-ui-color-neutral-50 );
--newspack-ui-color-input-background-disabled: var( --newspack-ui-color-neutral-30 );
}
}
2 changes: 2 additions & 0 deletions assets/newspack-ui/scss/variables/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@
--newspack-ui-modal-width-small: 368px;

// Border radius - not ems because the font size of the element itself caused a cascade.
// TODO: give these better names.
--newspack-ui-border-radius: 6px;
--newspack-ui-border-radius-small: 5px;
--newspack-ui-border-radius-extra-small: 2px;

}
2 changes: 1 addition & 1 deletion assets/newspack-ui/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

// Need better spot for this
&__color-text-gray {
color: var( --newspack-ui-color-text-med-contrast );
color: var( --newspack-ui-color-neutral-70 );
}

// Overrides for theme styles -- to move to theme?
Expand Down

0 comments on commit 8b24067

Please sign in to comment.