Skip to content

Commit

Permalink
feat(nxt-color-picker): ensure normalized colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@HitkoDev
HitkoDev committed Mar 9, 2023
1 parent 7786a4b commit f529445
Show file tree
Hide file tree
Showing 6 changed files with 335 additions and 153 deletions.
42 changes: 21 additions & 21 deletions packages/color-picker/src/lib/color-picker/color-picker.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@
max="100"
nxtText
[rg]="100"
[value]="hslaText?.l"
[value]="hslaText?.l?.toFixed(0)"
(keyup.enter)="onAccept($event)"
(newValue)="onValueInput($event)" />
<span class="color-picker__input-field-label">V</span>
Expand All @@ -117,10 +117,10 @@
pattern="[0-9]+([\.,][0-9]{1,2})?"
min="0"
max="1"
step="0.1"
step="0.01"
nxtText
[rg]="1"
[value]="hslaText?.a"
[value]="formatAlpha(hslaText?.a)"
(keyup.enter)="onAccept($event)"
(newValue)="onAlphaInput($event)" />
<span class="color-picker__input-field-label">A</span>
Expand All @@ -136,7 +136,7 @@
max="360"
nxtText
[rg]="360"
[value]="hslaText?.h"
[value]="hslaText?.h?.toFixed(0)"
(keyup.enter)="onAccept($event)"
(newValue)="onHueInput($event)" />
<span class="color-picker__input-field-label">H</span>
Expand All @@ -148,7 +148,7 @@
max="100"
nxtText
[rg]="100"
[value]="hslaText?.s"
[value]="hslaText?.s?.toFixed(0)"
(keyup.enter)="onAccept($event)"
(newValue)="onSaturationInput($event)" />
<span class="color-picker__input-field-label">S</span>
Expand All @@ -160,7 +160,7 @@
max="100"
nxtText
[rg]="100"
[value]="hslaText?.l"
[value]="hslaText?.l?.toFixed(0)"
(keyup.enter)="onAccept($event)"
(newValue)="onLightnessInput($event)" />
<span class="color-picker__input-field-label">L</span>
Expand All @@ -171,10 +171,10 @@
pattern="[0-9]+([\.,][0-9]{1,2})?"
min="0"
max="1"
step="0.1"
step="0.01"
nxtText
[rg]="1"
[value]="hslaText?.a"
[value]="formatAlpha(hslaText?.a)"
(keyup.enter)="onAccept($event)"
(newValue)="onAlphaInput($event)" />
<span class="color-picker__input-field-label">A</span>
Expand All @@ -188,7 +188,7 @@
max="255"
nxtText
[rg]="255"
[value]="rgbaText?.r"
[value]="rgbaText?.r?.toFixed(0)"
(keyup.enter)="onAccept($event)"
(newValue)="onRedInput($event)" />
<span class="color-picker__input-field-label">R</span>
Expand All @@ -200,7 +200,7 @@
max="255"
nxtText
[rg]="255"
[value]="rgbaText?.g"
[value]="rgbaText?.g?.toFixed(0)"
(keyup.enter)="onAccept($event)"
(newValue)="onGreenInput($event)" />
<span class="color-picker__input-field-label">G</span>
Expand All @@ -212,7 +212,7 @@
max="255"
nxtText
[rg]="255"
[value]="rgbaText?.b"
[value]="rgbaText?.b?.toFixed(0)"
(keyup.enter)="onAccept($event)"
(newValue)="onBlueInput($event)" />
<span class="color-picker__input-field-label">B</span>
Expand All @@ -223,10 +223,10 @@
pattern="[0-9]+([\.,][0-9]{1,2})?"
min="0"
max="1"
step="0.1"
step="0.01"
nxtText
[rg]="1"
[value]="hslaText?.a"
[value]="formatAlpha(hslaText?.a)"
(keyup.enter)="onAccept($event)"
(newValue)="onAlphaInput($event)" />
<span class="color-picker__input-field-label">A</span>
Expand All @@ -240,7 +240,7 @@
max="100"
nxtText
[rg]="100"
[value]="cmykText?.c"
[value]="cmykText?.c?.toFixed(0)"
(keyup.enter)="onAccept($event)"
(newValue)="onCyanInput($event)" />
<span class="color-picker__input-field-label">C</span>
Expand All @@ -252,7 +252,7 @@
max="100"
nxtText
[rg]="100"
[value]="cmykText?.m"
[value]="cmykText?.m?.toFixed(0)"
(keyup.enter)="onAccept($event)"
(newValue)="onMagentaInput($event)" />
<span class="color-picker__input-field-label">M</span>
Expand All @@ -264,7 +264,7 @@
max="100"
nxtText
[rg]="100"
[value]="cmykText?.y"
[value]="cmykText?.y?.toFixed(0)"
(keyup.enter)="onAccept($event)"
(newValue)="onYellowInput($event)" />
<span class="color-picker__input-field-label">Y</span>
Expand All @@ -276,7 +276,7 @@
max="100"
nxtText
[rg]="100"
[value]="cmykText?.k"
[value]="cmykText?.k?.toFixed(0)"
(keyup.enter)="onAccept($event)"
(newValue)="onBlackInput($event)" />
<span class="color-picker__input-field-label">K</span>
Expand All @@ -287,10 +287,10 @@
pattern="[0-9]+([\.,][0-9]{1,2})?"
min="0"
max="1"
step="0.1"
step="0.01"
nxtText
[rg]="1"
[value]="cmykText?.c"
[value]="formatAlpha(cmykText?.a)"
(keyup.enter)="onAccept($event)"
(newValue)="onAlphaInput($event)" />
<span class="color-picker__input-field-label">A</span>
Expand All @@ -311,10 +311,10 @@
pattern="[0-9]+([\.,][0-9]{1,2})?"
min="0"
max="1"
step="0.1"
step="0.01"
nxtText
[rg]="1"
[value]="hexAlpha"
[value]="formatAlpha(hexAlpha)"
(keyup.enter)="onAccept($event)"
(newValue)="onAlphaInput($event)" />
<span class="color-picker__input-field-label">A</span>
Expand Down
7 changes: 7 additions & 0 deletions packages/color-picker/src/lib/color-picker/color-picker.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -321,6 +321,13 @@ $light: #dadada;
button {
flex: auto 0 0;
margin: math.div($baseSize, 4);
color: var(--nxt-color-picker-button-color, inherit);
background: var(--nxt-color-picker-button-background, #dadada);
padding: var(--nxt-color-picker-button-padding, #{math.div($baseSize, 4) math.div($baseSize, 2)});
border: var(--nxt-color-picker-button-border, none);
border-radius: var(--nxt-color-picker-button-border-radius, #{math.div($baseSize, 4)});
font-size: var(--nxt-color-picker-button-font-size, inherit);
font-weight: var(--nxt-color-picker-button-font-weight, inherit);
}
}
}
Expand Down
Loading

0 comments on commit f529445

Please sign in to comment.