diff --git a/packages/mint-components/.changeset/cozy-boxes-jog.md b/packages/mint-components/.changeset/cozy-boxes-jog.md new file mode 100644 index 0000000000..7ee779e670 --- /dev/null +++ b/packages/mint-components/.changeset/cozy-boxes-jog.md @@ -0,0 +1,5 @@ +--- +"@saasquatch/mint-components": patch +--- + +Update styles.ts with sl-input::part(label) font overrides. Update bold style tokens in sqm-dropdown-field, sqm-name-fields, sqm-email-verification, and sqm-lead-dropdown-field. diff --git a/packages/mint-components/package-lock.json b/packages/mint-components/package-lock.json index 78abc83003..64116755b9 100644 --- a/packages/mint-components/package-lock.json +++ b/packages/mint-components/package-lock.json @@ -1,12 +1,12 @@ { "name": "@saasquatch/mint-components", - "version": "2.2.0", + "version": "2.2.1-0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@saasquatch/mint-components", - "version": "2.2.0", + "version": "2.2.1-0", "hasInstallScript": true, "license": "MIT", "dependencies": { diff --git a/packages/mint-components/src/components/sqm-dropdown-field/sqm-dropdown-field-view.tsx b/packages/mint-components/src/components/sqm-dropdown-field/sqm-dropdown-field-view.tsx index b48d6dd025..1fba5d345e 100644 --- a/packages/mint-components/src/components/sqm-dropdown-field/sqm-dropdown-field-view.tsx +++ b/packages/mint-components/src/components/sqm-dropdown-field/sqm-dropdown-field-view.tsx @@ -42,7 +42,7 @@ const vanillaStyle = ` } sl-select::part(label){ font-size: var(--sl-input-label-font-size-small); - font-weight: var(--sl-font-weight-semibold); + font-weight: var(--sl-font-weight-bold); } `; diff --git a/packages/mint-components/src/components/sqm-lead-form/sqm-lead-dropdown-field-view.tsx b/packages/mint-components/src/components/sqm-lead-form/sqm-lead-dropdown-field-view.tsx index 7d32105ed0..b55ed1aca4 100644 --- a/packages/mint-components/src/components/sqm-lead-form/sqm-lead-dropdown-field-view.tsx +++ b/packages/mint-components/src/components/sqm-lead-form/sqm-lead-dropdown-field-view.tsx @@ -48,7 +48,7 @@ const vanillaStyle = ` } sl-select::part(label){ font-size: var(--sl-input-label-font-size-small); - font-weight: var(--sl-font-weight-semibold); + font-weight: var(--sl-font-weight-bold); } sl-select::part(menu){ max-height: 300px; diff --git a/packages/mint-components/src/components/sqm-name-fields/sqm-name-fields-view.tsx b/packages/mint-components/src/components/sqm-name-fields/sqm-name-fields-view.tsx index 1426f18a1b..ec45bb037a 100644 --- a/packages/mint-components/src/components/sqm-name-fields/sqm-name-fields-view.tsx +++ b/packages/mint-components/src/components/sqm-name-fields/sqm-name-fields-view.tsx @@ -32,7 +32,7 @@ const vanillaStyle = ` *::part(input-label), *::part(select-label), *::part(textarea-label){ font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small)); - font-weight: var(--sl-font-weight-semibold); + font-weight: var(--sl-font-weight-bold); color: var(--sqm-input-label-color, var(--sqm-text), black); } diff --git a/packages/mint-components/src/components/sqm-user-attribute/readme.md b/packages/mint-components/src/components/sqm-user-attribute/readme.md index ead6002003..6c04bd65bb 100644 --- a/packages/mint-components/src/components/sqm-user-attribute/readme.md +++ b/packages/mint-components/src/components/sqm-user-attribute/readme.md @@ -13,7 +13,7 @@ | `demoData` | -- | | `{ loading?: boolean; value?: string; fontSize?: number; color?: string; fontWeight?: number; }` | `undefined` | | `fontSize` | `font-size` | Number in pixels. | `number` | `undefined` | | `fontWeight` | `font-weight` | Font weight | `number` | `undefined` | -| `value` | `value` | The custom field key to display. | `string` | `undefined` | +| `value` | `value` | The custom field key to display. | `number \| string` | `undefined` | ## Dependencies diff --git a/packages/mint-components/src/components/sqm-widget-verification/sqm-email-verification/sqm-email-verification-view.tsx b/packages/mint-components/src/components/sqm-widget-verification/sqm-email-verification/sqm-email-verification-view.tsx index ce8d1b7735..72dcb53c6d 100644 --- a/packages/mint-components/src/components/sqm-widget-verification/sqm-email-verification/sqm-email-verification-view.tsx +++ b/packages/mint-components/src/components/sqm-widget-verification/sqm-email-verification/sqm-email-verification-view.tsx @@ -124,7 +124,7 @@ sl-button[type="secondary"]::part(base):hover { *::part(input-label), *::part(select-label), *::part(textarea-label){ font-family: var(--sqm-primary-font); font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small)); - font-weight: var(--sl-font-weight-semibold); + font-weight: var(--sl-font-weight-bold); color: var(--sqm-input-label-color, var(--sqm-text), black); } diff --git a/packages/mint-components/src/global/styles.ts b/packages/mint-components/src/global/styles.ts index 4db1f82edf..21108df9f0 100644 --- a/packages/mint-components/src/global/styles.ts +++ b/packages/mint-components/src/global/styles.ts @@ -745,7 +745,7 @@ html { config?.formFields?.hoverStateColor || "hsl(0, 0%, 91%)" }; - --sqm-input-label-font-size: inherit; + --sqm-input-label-font-size: var(--sl-input-label-font-size-small); --sqm-input-disabled-color: var(--sqm-text-subdued); --sqm-input-disabled-background: ${ config?.formFields?.disabledBackgroundColor || "#F4F4F5" @@ -943,7 +943,6 @@ sl-button[type="primary"]::part(base):hover{ color: var(--sqm-primary-button-color-hover); } - *::part(primarybutton-base):focus, sl-button[type="primary"]::part(base):focus { box-shadow: none; @@ -968,10 +967,15 @@ sl-button[type="secondary"]::part(base):hover { *::part(input-label), *::part(select-label), *::part(textarea-label){ font-family: var(--sqm-primary-font); font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small)); - font-weight: var(--sl-font-weight-semibold); + font-weight: var(--sl-font-weight-bold); color: var(--sqm-input-label-color, var(--sqm-text), black); } +sl-input::part(label) { + font-weight: var(--sl-font-weight-bold); + font-size: var(--sl-input-font-size-small); +} + *::part(input-base), *::part(select-base), *::part(textarea-base){ font-family: var(--sqm-primary-font); background-color: var(--sqm-input-background, #fff);