From d5597602fed224a31a273451b31ec6b9c9d67e9f Mon Sep 17 00:00:00 2001 From: Remko Date: Thu, 31 Oct 2024 15:07:29 +0100 Subject: [PATCH 1/2] Updated tokens --- .../card/cardHeader/CardHeader.module.css | 9 +++++++++ .../formFields/checkbox/Checkbox.module.css | 4 ++++ src/components/formFields/select/select.tsx | 2 +- .../primaryTopNav/PrimaryTopNav.module.css | 20 ++++++++++++++++++- 4 files changed, 33 insertions(+), 2 deletions(-) diff --git a/src/components/card/cardHeader/CardHeader.module.css b/src/components/card/cardHeader/CardHeader.module.css index 0a5afdc..5cb5bf7 100644 --- a/src/components/card/cardHeader/CardHeader.module.css +++ b/src/components/card/cardHeader/CardHeader.module.css @@ -6,7 +6,12 @@ /* --conduction-card-header-hover-border-bottom-style: unset; */ /* --conduction-card-header-hover-border-bottom-color: unset; */ --conduction-card-header-title-color: #000000; + /* --conduction-card-header-title-text-decoration: none; */ + /* --conduction-card-header-title-text-underline-offset: 2px; */ /* --conduction-card-header-title-hover-color: #000000; */ + /* --conduction-card-header-title-hover-text-decoration: none; */ + /* --conduction-card-header-title-hover-text-underline-offset: 2px; */ + --conduction-card-header-date-color: #000000; --conduction-card-header-date-font-size: 16px; --conduction-card-header-date-font-weight: 100; @@ -28,10 +33,14 @@ .title > * { color: var(--conduction-card-header-title-color) !important; + text-decoration: var(--conduction-card-header-title-text-decoration) !important; + text-underline-offset: var(--conduction-card-header-title-text-underline-offset) !important; } .title:hover > * { color: var(--conduction-card-header-title-hover-color, var(--conduction-card-header-title-color)) !important; + text-decoration: var(--conduction-card-header-title-hover-text-decoration, var(--conduction-card-header-title-text-decoration)) !important; + text-underline-offset: var(--conduction-card-header-title-hover-text-underline-offset, var(--conduction-card-header-title-text-underline-offset)) !important; } .date { diff --git a/src/components/formFields/checkbox/Checkbox.module.css b/src/components/formFields/checkbox/Checkbox.module.css index dfe6a70..45d224e 100644 --- a/src/components/formFields/checkbox/Checkbox.module.css +++ b/src/components/formFields/checkbox/Checkbox.module.css @@ -103,6 +103,10 @@ box-sizing: border-box; } +.checkbox:hover + label { + color: var(--conduction-input-checkbox-label-hover-color, var(--conduction-input-checkbox-label-color, var(--utrecht-document-color))); + +} .checkbox:hover + label::before { content: " "; display: inline-block; diff --git a/src/components/formFields/select/select.tsx b/src/components/formFields/select/select.tsx index 4717fbc..75e17b0 100644 --- a/src/components/formFields/select/select.tsx +++ b/src/components/formFields/select/select.tsx @@ -11,7 +11,7 @@ export type TSelectOption = { label: string; value: string }; export type TGroupedSelectOption = { label: string; options: TSelectOption[] }; interface ISelectProps { - control: Control; + control: Control; options: TSelectOption[] | TGroupedSelectOption[]; name: string; ariaLabel: string; diff --git a/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css b/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css index b5141c1..8471c69 100644 --- a/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css +++ b/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css @@ -25,10 +25,21 @@ /* --conduction-primary-top-nav-dropdown-hover-color: #4376fc; */ /* --conduction-primary-top-nav-dropdown-hover-background-color: #ffffff; */ /* --conduction-primary-top-nav-dropdown-hover-box-shadow: inset 0 -4px black; */ + + /* --conduction-primary-top-nav-container-padding-block-end: 18px; */ + /* --conduction-primary-top-nav-container-padding-block-start: 18px; */ + /* --conduction-primary-top-nav-container-padding-inline-end: 18px; */ + /* --conduction-primary-top-nav-container-padding-inline-start: 18px; */ + + /* --conduction-primary-top-nav-list-gap: var(--skeleton-size-2x); */ } .container { width: 100%; + padding-block-end: var(--conduction-primary-top-nav-container-padding-block-end); + padding-block-start: var(--conduction-primary-top-nav-container-padding-block-start); + padding-inline-end: var(--conduction-primary-top-nav-container-padding-inline-end); + padding-inline-start: var(--conduction-primary-top-nav-container-padding-inline-start); } .menuToggleContainer { @@ -80,6 +91,7 @@ border-color: var(--conduction-primary-top-nav-list-border-color); border-style: var(--conduction-primary-top-nav-list-border-style); border-width: var(--conduction-primary-top-nav-list-border-width); + gap: var(--conduction-primary-top-nav-list-gap); } .li { @@ -108,7 +120,7 @@ } .current:hover { - box-shadow: var(--conduction-primary-top-nav-current-box-shadow); + box-shadow: var(--conduction-primary-top-nav-current-hover-box-shadow, var(--conduction-primary-top-nav-current-box-shadow)); } .current:hover > .currentLink { @@ -224,6 +236,7 @@ .dropdown > li { padding-inline-start: 18px; + font-weight: var(--conduction-primary-top-nav-dropdown-font-weight); } .toggleIcon { @@ -252,6 +265,11 @@ z-index: 1; } +:not(.dropdown) .li.current:hover { + box-shadow: var(--conduction-primary-top-nav-current-hover-box-shadow, var(--conduction-primary-top-nav-current-box-shadow)); + font-weight: var(--conduction-primary-top-nav-current-hover-font-weight, var(--conduction-primary-top-nav-current-font-weight)); +} + @media only screen and (min-width: 992px) { .container { width: fit-content; From 578a222f6b409852c3b9951e8a1cac508b994598 Mon Sep 17 00:00:00 2001 From: Remko Date: Thu, 31 Oct 2024 15:11:02 +0100 Subject: [PATCH 2/2] Updated package and readme --- README.md | 4 ++++ package.json | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 6d20248..3a02eb4 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,10 @@ - **Version 2.2 (breaking changes from 2.1.x)** + - 2.2.51: + - Added text-decoration tokens to CardHeader. + - Added label color tokens to checkbox. + - Added font-weight, gap, padding and hover box-shadow tokens to PrimaryTopNav. - 2.2.50: - Added transition and box-shadow to CardWrapper. - Added font-style to CardHeader. diff --git a/package.json b/package.json index 772dacf..66c85a6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@conduction/components", - "version": "2.2.50", + "version": "2.2.51", "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)", "main": "lib/index.js", "scripts": {