diff --git a/assets/newspack-ui/scss/elements/forms/_labels.scss b/assets/newspack-ui/scss/elements/forms/_labels.scss index de18d6b9cc..68679b747b 100644 --- a/assets/newspack-ui/scss/elements/forms/_labels.scss +++ b/assets/newspack-ui/scss/elements/forms/_labels.scss @@ -6,10 +6,11 @@ font-size: var( --newspack-ui-font-size-small ) !important; // !important to override Newspack Theme. font-weight: 600; line-height: var( --newspack-ui-line-height-small ); - margin: 0 0 var( --newspack-ui-spacer-1 ); + margin: 0 0 var( --newspack-ui-spacer-base ); // For labels containing radio, checkbox inputs: - &.newspack-ui__input-checkradio { // For Firefox; otherwise could use &:has( input[type='checkbox'] ),&:has( input[type='radio'] ) + &:has( input[type='checkbox'] ), + &:has( input[type='radio'] ) { align-items: center; display: flex; gap: var( --newspack-ui-spacer-2 ); @@ -25,8 +26,8 @@ // This selector isn't supported in Firefox yet. &:has( input:checked ) { - background: var( --newspack-ui-color-primary-000 ); - border-color: var( --newspack-ui-color-primary-500 ); + background: var( --newspack-ui-color-gray-100 ); + border-color: var( --newspack-ui-color-gray-900 ); } + .newspack-ui__input-list { diff --git a/assets/newspack-ui/scss/variables/_colors.scss b/assets/newspack-ui/scss/variables/_colors.scss index c18b13b7ef..49f336d161 100644 --- a/assets/newspack-ui/scss/variables/_colors.scss +++ b/assets/newspack-ui/scss/variables/_colors.scss @@ -1,18 +1,4 @@ :root { - // Newspack Blues - --newspack-ui-color-primary-000: #f5fdff; - --newspack-ui-color-primary-050: #d6f6ff; - --newspack-ui-color-primary-100: #b4e4ff; - --newspack-ui-color-primary-200: #93ccfd; - --newspack-ui-color-primary-300: #72affb; - --newspack-ui-color-primary-400: #528dfc; - --newspack-ui-color-primary-500: #36f; - --newspack-ui-color-primary-600: #2240d5; - --newspack-ui-color-primary-700: #1522af; - --newspack-ui-color-primary-800: #0b0b8d; - --newspack-ui-color-primary-900: #0d046e; - --newspack-ui-color-primary-950: #0e0052; - // 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.