Skip to content

Commit a30b5e2

Browse files
david-poindexterdavid-poindexter
authored
Merge pull request #1252 from valadas/inputs-css-vars
Fixed some issues with css-variables of inputs
2 parents 6ad4cc7 + a629ac1 commit a30b5e2

File tree

12 files changed

+106
-64
lines changed

12 files changed

+106
-64
lines changed

‎packages/stencil-library/custom-elements.json‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -677,7 +677,7 @@
677677
],
678678
"cssProperties": [
679679
{
680-
"name": "--background",
680+
"name": "--background-color",
681681
"description": "Defines the background color."
682682
},
683683
{
@@ -693,7 +693,7 @@
693693
"description": "Defines the color when the component is focused."
694694
},
695695
{
696-
"name": "--foreground",
696+
"name": "--foreground-color",
697697
"description": "Defines the foreground color."
698698
}
699699
],
@@ -981,10 +981,6 @@
981981
}
982982
],
983983
"cssProperties": [
984-
{
985-
"name": "--background",
986-
"description": "Defines the background color."
987-
},
988984
{
989985
"name": "--control-radius",
990986
"description": "Defines the radius for the control corners."
@@ -994,12 +990,16 @@
994990
"description": "Defines the danger color used for invalid data."
995991
},
996992
{
997-
"name": "--focus-color",
998-
"description": "Defines the color when the component is focused."
993+
"name": "--fieldset-background-color",
994+
"description": "Defines the background color."
999995
},
1000996
{
1001-
"name": "--foreground",
997+
"name": "--fieldset-foreground-color",
1002998
"description": "Defines the foreground color."
999+
},
1000+
{
1001+
"name": "--focus-color",
1002+
"description": "Defines the color when the component is focused."
10031003
}
10041004
],
10051005
"cssParts": []
@@ -1305,7 +1305,7 @@
13051305
],
13061306
"cssProperties": [
13071307
{
1308-
"name": "--background",
1308+
"name": "--background-color",
13091309
"description": "Defines the background color."
13101310
},
13111311
{
@@ -1321,7 +1321,7 @@
13211321
"description": "Defines the color when the component is focused."
13221322
},
13231323
{
1324-
"name": "--foreground",
1324+
"name": "--foreground-color",
13251325
"description": "Defines the foreground color."
13261326
},
13271327
{
@@ -1881,7 +1881,7 @@
18811881
"slots": [],
18821882
"cssProperties": [
18831883
{
1884-
"name": "--background",
1884+
"name": "--background-color",
18851885
"description": "Defines the background color."
18861886
},
18871887
{
@@ -1897,7 +1897,7 @@
18971897
"description": "Defines the color when the component is focused."
18981898
},
18991899
{
1900-
"name": "--foreground",
1900+
"name": "--foreground-color",
19011901
"description": "Defines the foreground color."
19021902
},
19031903
{
@@ -2180,7 +2180,7 @@
21802180
"slots": [],
21812181
"cssProperties": [
21822182
{
2183-
"name": "--background",
2183+
"name": "--background-color",
21842184
"description": "Defines the background color."
21852185
},
21862186
{
@@ -2196,7 +2196,7 @@
21962196
"description": "Defines the color when the component is focused."
21972197
},
21982198
{
2199-
"name": "--foreground",
2199+
"name": "--foreground-color",
22002200
"description": "Defines the foreground color."
22012201
}
22022202
],

‎packages/stencil-library/src/components/dnn-autocomplete/dnn-autocomplete.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ dnn-fieldset{
5252
height: 1rem;
5353
width: auto;
5454
transform: scale(1.2);
55+
fill: var(--foreground-color);
5556
cursor: pointer;
5657
}
5758

@@ -100,3 +101,11 @@ dnn-fieldset{
100101
}
101102
}
102103
}
104+
105+
dnn-fieldset{
106+
--fieldset-foreground-color: var(--foreground-color);
107+
--fieldset-background-color: var(--background-color);
108+
--fieldset-focus-color: var(--focus-color);
109+
--fieldset-danger-color: var(--danger-color);
110+
--fieldset-control-radius: var(--control-radius);
111+
}

‎packages/stencil-library/src/components/dnn-color-input/dnn-color-input.scss‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
:host {
22
display: inline-block;
33

4-
/** @prop --foreground: Defines the foreground color. */
5-
--foreground: var(--dnn-color-foreground, #000);
4+
/** @prop --foreground-color: Defines the foreground color. */
5+
--foreground-color: var(--dnn-color-foreground, #000);
66

7-
/** @prop --background: Defines the background color. */
8-
--background: var(--dnn-color-background, #fff);
7+
/** @prop --background-color: Defines the background color. */
8+
--background-color: var(--dnn-color-background, #fff);
99

1010
/** @prop --focus-color: Defines the color when the component is focused. */
1111
--focus-color: var(--dnn-color-primary, #3792ED);
@@ -25,7 +25,7 @@ dnn-fieldset{
2525
justify-content: space-between;
2626
position: relative;
2727
width: 100%;
28-
background-color: var(--background);
28+
background-color: var(--background-color);
2929
}
3030

3131
button{
@@ -79,4 +79,12 @@ h3{
7979
display: flex;
8080
justify-content: space-between;
8181
margin-top: 1em;
82+
}
83+
84+
dnn-fieldset{
85+
--fieldset-foreground-color: var(--foreground-color);
86+
--fieldset-background-color: var(--background-color);
87+
--fieldset-focus-color: var(--focus-color);
88+
--fieldset-danger-color: var(--danger-color);
89+
--fieldset-control-radius: var(--control-radius);
8290
}

‎packages/stencil-library/src/components/dnn-color-input/readme.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,11 +47,11 @@ A custom input component that allows previewing and changing a color value.
4747

4848
| Name | Description |
4949
| ---------------------- | -------------------------------------------------------------------- |
50-
| `--background` | Defines the background color. |
50+
| `--background-color` | Defines the background color. |
5151
| `--contast-text-align` | Allows customizing the text alignment of the contast indicator text. |
5252
| `--control-radius` | Defines the radius for the control corners. |
5353
| `--focus-color` | Defines the color when the component is focused. |
54-
| `--foreground` | Defines the foreground color. |
54+
| `--foreground-color` | Defines the foreground color. |
5555

5656

5757
## Dependencies

‎packages/stencil-library/src/components/dnn-fieldset/dnn-fieldset.scss‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
:host {
22
display: inline-block;
33

4-
/** @prop --foreground: Defines the foreground color. */
5-
--fieldset-foreground: var(--dnn-color-foreground, #000);
4+
/** @prop --fieldset-foreground-color: Defines the foreground color. */
5+
--fieldset-foreground-color: var(--dnn-color-foreground, #000);
66

7-
/** @prop --background: Defines the background color. */
8-
--fieldset-background: var(--dnn-color-background, #fff);
7+
/** @prop --fieldset-background-color: Defines the background color. */
8+
--fieldset-background-color: var(--dnn-color-background, #fff);
99

1010
/** @prop --focus-color: Defines the color when the component is focused. */
1111
--fieldset-focus-color: var(--dnn-color-primary, #3792ED);
@@ -18,14 +18,14 @@
1818
}
1919

2020
.container{
21-
border: 1px solid var(--fieldset-foreground, #000);
21+
border: 1px solid var(--fieldset-foreground-color, #000);
2222
border-radius: var(--fieldset-control-radius, 3px);
2323
padding: 0.75em;
2424
display: flex;
2525
justify-content: space-between;
2626
gap: 0.1em;
2727
position: relative;
28-
background-color: var(--fieldset-background);
28+
background-color: var(--fieldset-background-color);
2929
margin-top: 1em;
3030
line-height: 1em;
3131
.resizer{
@@ -34,7 +34,7 @@
3434
.inner-container{
3535
position: relative;
3636
width: 100%;
37-
background-color: var(--fieldset-background);
37+
background-color: var(--fieldset-background-color);
3838
height: calc(100% - 1em);
3939
}
4040
label{
@@ -45,7 +45,7 @@
4545
left: 0.5em;
4646
top: -1.5em;
4747
padding: 0 0.5em;
48-
background-color: var(--fieldset-background);
48+
background-color: var(--fieldset-background-color);
4949
white-space: nowrap;
5050
max-width: 100%;
5151
border-radius: var(--fieldset-control-radius);
@@ -63,7 +63,7 @@
6363
box-shadow: 0 0 0 1px var(--fieldset-danger-color);
6464
}
6565
input{
66-
color: var(--fieldset-foreground, #000);
66+
color: var(--fieldset-foreground-color, #000);
6767
}
6868
}
6969
&.float-label{

‎packages/stencil-library/src/components/dnn-fieldset/readme.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -112,13 +112,13 @@ Type: `Promise<void>`
112112

113113
## CSS Custom Properties
114114

115-
| Name | Description |
116-
| ------------------ | ------------------------------------------------ |
117-
| `--background` | Defines the background color. |
118-
| `--control-radius` | Defines the radius for the control corners. |
119-
| `--danger-color` | Defines the danger color used for invalid data. |
120-
| `--focus-color` | Defines the color when the component is focused. |
121-
| `--foreground` | Defines the foreground color. |
115+
| Name | Description |
116+
| ----------------------------- | ------------------------------------------------ |
117+
| `--control-radius` | Defines the radius for the control corners. |
118+
| `--danger-color` | Defines the danger color used for invalid data. |
119+
| `--fieldset-background-color` | Defines the background color. |
120+
| `--fieldset-foreground-color` | Defines the foreground color. |
121+
| `--focus-color` | Defines the color when the component is focused. |
122122

123123

124124
## Dependencies

‎packages/stencil-library/src/components/dnn-input/dnn-input.scss‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
:host {
22
display: inline-block;
33

4-
/** @prop --foreground: Defines the foreground color. */
5-
--foreground: var(--dnn-color-foreground, #000);
4+
/** @prop --foreground-color: Defines the foreground color. */
5+
--foreground-color: var(--dnn-color-foreground, #000);
66

7-
/** @prop --background: Defines the background color. */
8-
--background: var(--dnn-color-background, #fff);
7+
/** @prop --background-color: Defines the background color. */
8+
--background-color: var(--dnn-color-background, #fff);
99

1010
/** @prop --focus-color: Defines the color when the component is focused. */
1111
--focus-color: var(--dnn-color-primary, #3792ED);
@@ -62,4 +62,12 @@ button.show-password{
6262
fill: var(--foreground);
6363
transform: scale(1.5);
6464
}
65+
}
66+
67+
dnn-fieldset{
68+
--fieldset-foreground-color: var(--foreground-color);
69+
--fieldset-background-color: var(--background-color);
70+
--fieldset-focus-color: var(--focus-color);
71+
--fieldset-danger-color: var(--danger-color);
72+
--fieldset-control-radius: var(--control-radius);
6573
}

‎packages/stencil-library/src/components/dnn-input/readme.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,11 +83,11 @@ Type: `Promise<void>`
8383

8484
| Name | Description |
8585
| -------------------- | -------------------------------------------------------- |
86-
| `--background` | Defines the background color. |
86+
| `--background-color` | Defines the background color. |
8787
| `--control-radius` | Defines the radius for the control corners. |
8888
| `--danger-color` | Defines the danger color used for invalid data. |
8989
| `--focus-color` | Defines the color when the component is focused. |
90-
| `--foreground` | Defines the foreground color. |
90+
| `--foreground-color` | Defines the foreground color. |
9191
| `--input-text-align` | Allows customizing the text alignment of the input text. |
9292

9393

‎packages/stencil-library/src/components/dnn-select/dnn-select.scss‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
:host {
22
display: inline-block;
33

4-
/** @prop --foreground: Defines the foreground color. */
5-
--foreground: var(--dnn-color-foreground, #000);
4+
/** @prop --foreground-color: Defines the foreground color. */
5+
--foreground-color: var(--dnn-color-foreground, #000);
66

7-
/** @prop --background: Defines the background color. */
8-
--background: var(--dnn-color-background, #fff);
7+
/** @prop --background-color: Defines the background color. */
8+
--background-color: var(--dnn-color-background, #fff);
99

1010
/** @prop --focus-color: Defines the color when the component is focused. */
1111
--focus-color: var(--dnn-color-primary, #3792ED);
@@ -29,13 +29,14 @@ dnn-fieldset{
2929
justify-content: space-between;
3030
position: relative;
3131
width: 100%;
32-
background-color: var(--background);
32+
background-color: var(--background-color);
3333
}
3434

3535
select{
3636
border: none;
3737
outline: none;
38-
background-color: var(--background);
38+
background-color: var(--background-color);
39+
color: var(--foreground-color);
3940
text-align: var(--input-text-align);
4041
width: 100%;
4142
cursor: pointer;
@@ -51,4 +52,12 @@ svg{
5152
height: 1em;
5253
transform: scale(1.5);
5354
}
55+
}
56+
57+
dnn-fieldset{
58+
--fieldset-foreground-color: var(--foreground-color);
59+
--fieldset-background-color: var(--background-color);
60+
--fieldset-focus-color: var(--focus-color);
61+
--fieldset-danger-color: var(--danger-color);
62+
--fieldset-control-radius: var(--control-radius);
5463
}

‎packages/stencil-library/src/components/dnn-select/readme.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,11 +43,11 @@ Type: `Promise<ValidityState>`
4343

4444
| Name | Description |
4545
| -------------------- | -------------------------------------------------------- |
46-
| `--background` | Defines the background color. |
46+
| `--background-color` | Defines the background color. |
4747
| `--control-radius` | Defines the radius for the control corners. |
4848
| `--danger-color` | Defines the danger color used for invalid data. |
4949
| `--focus-color` | Defines the color when the component is focused. |
50-
| `--foreground` | Defines the foreground color. |
50+
| `--foreground-color` | Defines the foreground color. |
5151
| `--input-text-align` | Allows customizing the text alignment of the input text. |
5252

5353

0 commit comments

Comments
 (0)