Input color and font-weight stylig is not applied

[MikolajKaminski]

I'm unable to style the input (specifically color and font-weight).

As can be seen on the images below. I do correctly set the --color and --item-font-weight variables, yet these are not applied to the actual input styles. I apply other styles too ie. --item-background and this one works, so I believe it is not an issue with my implemenation.

I worked my way around it using ::ng-deep, however it is not the desired solution as it is deprecated.

Correctly set variables.

Not applied to the input.

[AlexMiniApps]

@MikolajKaminski Hi. What the version of the code-input component do you use?

[MikolajKaminski]

@MikolajKaminski Hi. What the version of the code-input component do you use?

@AlexMiniApps Lastest release - v1.6.0

[AlexMiniApps]

@MikolajKaminski it looks like you have incorrect styled the component, the styles have the different css paths:

[MikolajKaminski]

That is because the style variables are applied to the code-input component, which then contains the input fields. As you can see on the bottom screenshot, the other variables are applied to the input, it's just the --color and --input-font-weight which are not passed through.

[MikolajKaminski]

@AlexMiniApps As you can see, the --item-background styling works well, so I do not expect this to be an issue with how I apply the styling.

[AlexMiniApps]

@MikolajKaminski ok. Please provide the SCSS source sample where you are styling the component for further research.

[MikolajKaminski]

@AlexMiniApps Below is the styling I use for updating the code-input component

:host {
    --light-gray: #F4F4F4;
  
    --border-light-gray: 1px solid var(--light-gray);
    --border-gray: 1px solid #CAD4DA;
    --border-purple: 1px solid #5950ec;
}

code-input {
    --color: #0B2242;
    --item-font-weight: 500;
    --item-spacing: 1rem;
    --item-background: var(--light-gray);
    --item-height: 3.5rem;
    --item-border: var(--border-light-gray);
    --item-border-bottom: var(--border-light-gray);
    --item-border-has-value: var(--border-gray);
    --item-border-bottom-has-value: var(--border-gray);
    --item-border-focused: var(--border-purple);
    --item-border-bottom-focused: var(--border-purple);
    --item-shadow-focused: none;
    --item-border-radius: 0.625rem;
}