Skip to content

Commit

Permalink
fix: utilize tap system color tokens
Browse files Browse the repository at this point in the history
  • Loading branch information
@hossein-nas
hossein-nas committed Oct 14, 2024
1 parent 0a44b92 commit fe44902
Show file tree
Hide file tree
Showing 3 changed files with 111 additions and 119 deletions.
127 changes: 59 additions & 68 deletions src/pin-input-cell/pin-input-cell.style.ts
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,46 @@
import { css } from 'lit';
import {css} from 'lit';

export default css`
:host {
box-sizing: border-box;
--height: var(--tap-pin-input-cell-height, 52px);
--bg-color: var(--tap-pin-input-cell-bg-color, #eaeded);
--error-bg-color: var(--tap-pin-input-cell-error-bg-color, #ffefed);
--disabled-bg-color: var(
--tap-pin-input-cell-disabled-bg-color,
var(--tap-sys-color-surface-disabled)
);
--color: var(--tap-pin-input-cell-color, #000);
--disabled-color: var(
--tap-pin-input-cell-disabled-color,
var(--tap-sys-color-content-disabled)
);
--border-radius: var(--tap-pin-input-cell-border-radius, 8px);
--border-width: var(--tap-pin-input-cell-border-width, 2px);
--border-default-color: var(
--tap-pin-input-cell-border-default-color,
transparent
);
--max-cell-width-ratio: var(
--tap-pin-input-cell-max-cell-width-ratio,
1.25
);
--border-focus-color: var(--tap-pin-input-cell-border-focus-color, #323333);
--border-error-color: var(--tap-pin-input-cell-border-error-color, #f1998e);
--border-disabled-color: var(
--tap-pin-input-cell-border-disabled-color,
transparent
);
--tap-pin-input-cell-box-sizing: border-box;
--tap-pin-input-cell-height: 52px;
--tap-pin-input-cell-max-cell-width-ratio: 1.25;
--tap-pin-input-cell-font-family: var(--tap-sys-font-family);
--tap-pin-input-cell-font-size-small: var(--tap-sys-typography-headline-xs-size, 16px);
--tap-pin-input-cell-font-size-medium: var(--tap-sys-typography-headline-sm-size, 20px);
--tap-pin-input-cell-font-size-large: var(--tap-sys-typography-headline-md-size, 24px);
--font-size-sm: var(--tap-pin-input-cell-font-size-small, 16px);
--font-size-md: var(--tap-pin-input-cell-font-size-medium, 20px);
--font-size-lg: var(--tap-pin-input-cell-font-size-large, 24px);
--tap-pin-input-cell-font-weight-small: var(--tap-sys-typography-headline-xs-weight, 600);
--tap-pin-input-cell-font-weight-medium: var(--tap-sys-typography-headline-sm-weight, 600);
--tap-pin-input-cell-font-weight-large: var(--tap-sys-typography-headline-md-weight, 600);
--font-weight-sm: var(--tap-pin-input-cell-font-weight-small, 400);
--font-weight-md: var(--tap-pin-input-cell-font-weight-medium, 600);
--font-weight-lg: var(--tap-pin-input-cell-font-weight-large, 600);
--tap-pin-input-cell-line-height-small: var(--tap-sys-typography-headline-xs-height, 26px);
--tap-pin-input-cell-line-height-medium: var(--tap-sys-typography-headline-sm-height, 32px);
--tap-pin-input-cell-line-height-large: var(--tap-sys-typography-headline-md-height, 36px);
--line-height-sm: var(--tap-pin-input-cell-line-height-small, 26px);
--line-height-md: var(--tap-pin-input-cell-line-height-medium, 32px);
--line-height-lg: var(--tap-pin-input-cell-line-height-large, 36px);
--tap-pin-input-cell-padding-small: var(--tap-sys-spacing-3, 6px);
--tap-pin-input-cell-padding-medium: var(--tap-sys-spacing-4, 8px);
--tap-pin-input-cell-padding-large: var(--tap-sys-spacing-5, 12px);
--padding-sm: var(--tap-pin-input-cell-padding-small, 6px);
--padding-md: var(--tap-pin-input-cell-padding-medium, 8px);
--padding-lg: var(--tap-pin-input-cell-padding-large, 12px);
--tap-pin-input-cell-bg-color: var(--tap-palette-gray-100);
--tap-pin-input-cell-error-bg-color: var(--tap-palette-red-50);
--tap-pin-input-cell-disabled-bg-color: var(--tap-sys-color-surface-disabled);
--tap-pin-input-cell-color: var(--tap-palette-black);
--tap-pin-input-cell-disabled-color: var(--tap-sys-color-content-disabled);
--tap-pin-input-cell-border-focus-color: var(--tap-sys-color-border-focus);
--tap-pin-input-cell-border-error-color: var(--tap-sys-color-border-negative);
--tap-pin-input-cell-border-disabled-color: transparent;
--tap-pin-input-cell-border-radius: var(--tap-sys-radius-3);
--tap-pin-input-cell-border-width: var(--tap-sys-stroke-4);
--tap-pin-input-cell-border-default-color: transparent;
}
:host *,
:host *::before,
:host *::after {
box-sizing: inherit;
box-sizing: var(--tap-pin-input-cell-box-sizing, inherit);
}
[hidden] {
Expand All @@ -63,53 +51,56 @@ export default css`
border: none;
padding: 0;
margin: 0;
background-color: var(--bg-color);
color: var(--color);
border: var(--border-width) solid var(--border-default-color);
border-radius: var(--border-radius);
background-color: var(--tap-pin-input-cell-bg-color);
color: var(--tap-pin-input-cell-color);
border: var(--tap-pin-input-cell-border-width) solid var(--tap-pin-input-cell-border-default-color);
border-radius: var(--tap-pin-input-cell-border-radius);
outline: none;
min-width: 0;
text-align: center;
font-family: var(--tap-sys-font-family);
min-width: var(--height);
max-width: calc(var(--height) * var(--max-cell-width-ratio));
font-family: var(--tap-pin-input-cell-font-family);
min-width: var(--tap-pin-input-cell-height);
max-width: calc(
var(--tap-pin-input-cell-height) *
var(--tap-pin-input-cell-max-cell-width-ratio)
);
}
.cell[disabled] {
border-color: var(--border-disabled-color);
background-color: var(--disabled-bg-color);
color: var(--disabled-color);
border-color: var(--tap-pin-input-cell-border-disabled-color);
background-color: var(--tap-pin-input-cell-disabled-bg-color);
color: var(--tap-pin-input-cell-border-disabled-color);
user-select: none;
pointer-events: none;
}
.cell:focus {
border-color: var(--border-focus-color);
border-color: var(--tap-pin-input-cell-border-focus-color);
}
.cell.cell-sm {
padding: var(--padding-sm);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-sm);
line-height: var(--line-height-sm);
padding: var(--tap-pin-input-cell-padding-small);
font-size: var(--tap-pin-input-cell-font-size-small);
font-weight: var(--tap-pin-input-cell-font-weight-small);
line-height: var(--tap-pin-input-cell-line-height-small);
}
.cell.cell-md {
padding: var(--padding-md);
font-size: var(--font-size-md);
font-weight: var(--font-weight-md);
line-height: var(--line-height-md);
padding: var(--tap-pin-input-cell-padding-medium);
font-size: var(--tap-pin-input-cell-font-size-medium);
font-weight: var(--tap-pin-input-cell-font-weight-medium);
line-height: var(--tap-pin-input-cell-line-height-medium);
}
.cell.cell-lg {
padding: var(--padding-lg);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-lg);
line-height: var(--line-height-lg);
padding: var(--tap-pin-input-cell-padding-large);
font-size: var(--tap-pin-input-cell-font-size-large);
font-weight: var(--tap-pin-input-cell-font-weight-large);
line-height: var(--tap-pin-input-cell-line-height-large);
}
.cell.has-error {
background-color: var(--error-bg-color);
border-color: var(--border-error-color);
background-color: var(--tap-pin-input-cell-error-bg-color);
border-color: var(--tap-pin-input-cell-error-bg-color);
}
`;
22 changes: 11 additions & 11 deletions src/pin-input-cell/pin-input-cell.ts
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,33 @@
import { html, LitElement, PropertyValues } from 'lit';
import { property, query } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import {html, LitElement, PropertyValues} from 'lit';
import {property, query} from 'lit/decorators.js';
import {classMap} from 'lit/directives/class-map.js';
import {
englishToPersian,
isArrowKeyPressed,
isDeletionKeyPressed,
isDeletionKeyWithCtrlOrMetaPressed,
isValidDigit,
persianToEnglish,
} from './util';
import { ValueChangedEventParams } from './types';
import {ValueChangedEventParams} from './types';

export class PinInputCell extends LitElement {
@query('.cell') _cell!: HTMLInputElement;

@property({ type: Boolean, reflect: true }) disabled: boolean = false;
@property({type: Boolean, reflect: true}) disabled: boolean = false;

@property({ attribute: 'auto-focus', type: Boolean }) autoFocus: boolean =
@property({attribute: 'auto-focus', type: Boolean}) autoFocus: boolean =
false;

@property({ reflect: true, type: Boolean, attribute: 'has-error' }) hasError =
@property({reflect: true, type: Boolean, attribute: 'has-error'}) hasError =
false;

@property({ reflect: true, type: String }) value: string = '';
@property({reflect: true, type: String}) value: string = '';

@property() label = '';

@property() size: 'small' | 'medium' | 'large' = 'medium';

@property({ type: Number }) index: number = null!;
@property({type: Number}) index: number = null!;

protected updated(changed: PropertyValues) {
if (changed.has('value') && !Number.isNaN(this.value)) {
Expand All @@ -38,7 +37,7 @@ export class PinInputCell extends LitElement {

private async updateInputValue(newValue: string) {
this.value = persianToEnglish(newValue);
this._cell.value = englishToPersian(newValue);
this._cell.value = (newValue);

if (newValue.length) {
await this.emitValueChanged();
Expand Down Expand Up @@ -218,6 +217,7 @@ export class PinInputCell extends LitElement {
private async handleDeletionWithMetaKeys() {
await this.emitDeletionWithMetaKeys();
}

private async handleArrowKeyPressed(key: 'ArrowLeft' | 'ArrowRight') {
await this.emitArrowKeyPressed(key);
}
Expand Down
81 changes: 41 additions & 40 deletions src/pin-input/pin-input.style.ts
View file
Original file line number Diff line number Diff line change
@@ -1,89 +1,90 @@
import { css } from 'lit';
import {css} from 'lit';

export default css`
:host {
box-sizing: border-box;
direction: rtl;
--justify-content: var(--tap-pin-input-justify-content, start);
--tap-pin-input-box-sizing: border-box;
--tap-pin-input-direction: rtl;
--description-font-family: var(--tap-sys-typography-body-sm-font);
--description-font-size: var(--tap-sys-typography-body-sm-size);
--description-line-height: var(--tap-sys-typography-body-sm-height);
--description-font-weight: var(--tap-sys-typography-body-sm-weight);
--tap-pin-input-description-font-family: var(--tap-sys-typography-body-sm-font);
--tap-pin-input-description-font-size: var(--tap-sys-typography-body-sm-size);
--tap-pin-input-description-line-height: var(--tap-sys-typography-body-sm-height);
--tap-pin-input-description-font-weight: var(--tap-sys-typography-body-sm-weight);
--description-font-family: var(--tap-sys-typography-body-sm-font);
--description-font-size: var(--tap-sys-typography-body-sm-size);
--description-line-height: var(--tap-sys-typography-body-sm-height);
--description-font-weight: var(--tap-sys-typography-body-sm-weight);
--description-text-color: var(--tap-sys-color-content-tertiary);
--description-error-text-color: var(--tap-sys-color-content-negative);
--description-disabled-text-color: var(--tap-sys-color-content-disabled);
--tap-pin-input-description-font-family: var(--tap-sys-typography-body-sm-font);
--tap-pin-input-description-font-size: var(--tap-sys-typography-body-sm-size);
--tap-pin-input-description-line-height: var(--tap-sys-typography-body-sm-height);
--tap-pin-input-description-font-weight: var(--tap-sys-typography-body-sm-weight);
--tap-pin-input-description-text-color: var(--tap-sys-color-content-tertiary);
--tap-pin-input-description-error-text-color: var(--tap-sys-color-content-negative);
--tap-pin-input-description-disabled-text-color: var(--tap-sys-color-content-disabled);
--title-font-family: var(--tap-sys-typography-body-md-font);
--title-font-size: var(--tap-sys-typography-body-md-size);
--title-line-height: var(--tap-sys-typography-body-md-height);
--title-font-weight: var(--tap-sys-typography-body-md-weight);
--title-text-color: var(--tap-sys-color-content-primary);
--title-disabled-text-color: var(--tap-sys-color-content-disabled);
--tap-inpu-input-title-font-family: var(--tap-sys-typography-body-md-font);
--tap-inpu-input-title-font-size: var(--tap-sys-typography-body-md-size);
--tap-inpu-input-title-line-height: var(--tap-sys-typography-body-md-height);
--tap-inpu-input-title-font-weight: var(--tap-sys-typography-body-md-weight);
--tap-inpu-input-title-text-color: var(--tap-sys-color-content-primary);
--tap-inpu-input-title-disabled-text-color: var(--tap-sys-color-content-disabled);
--vertical-gap: 0.5rem;
--horizontal-cell-gap: var(--tap-pin-input-cell-gap, 1rem);
--tap-pin-input-justify-content: start;
--tap-input-input-vertical-gap: 0.5rem;
--tap-pin-input-horizontal-cell-gap: 1rem;
}
:host *,
:host *::before,
:host *::after {
box-sizing: inherit;
box-sizing: var(--tap-pin-input-box-sizing);
direction: var(--tap-pin-input-direction);
}
[hidden] {
display: none !important;
}
:host([has-error]) .description {
color: var(--description-error-text-color);
color: var(--tap-pin-input-description-error-text-color);
}
:host([disabled]) .title,
:host([disabled]) .description {
color: var(--title-disabled-text-color);
color: var(--tap-inpu-input-title-disabled-text-color);
}
:host([disabled]) .description {
color: var(--description-disabled-text-color);
color: var(--tap-pin-input-description-disabled-text-color);
}
.pin-input {
}
.pin-input-wrapper {
display: flex;
row-gap: var(--vertical-gap);
row-gap: var(--tap-input-input-vertical-gap);
flex-direction: column;
}
.title {
flex: 0 1;
font-family: var(--title-font-family);
font-size: var(--title-font-size);
font-weight: var(--title-font-weight);
line-height: var(--title-line-height);
color: var(--title-text-color);
font-family: var(--tap-inpu-input-title-font-family);
font-size: var(--tap-inpu-input-title-font-size);
font-weight: var(--tap-inpu-input-title-font-weight);
line-height: var(--tap-inpu-input-title-line-height);
color: var(--tap-inpu-input-title-text-color);
}
.description {
flex: 0 1;
font-family: var(--description-font-family);
font-size: var(--description-font-size);
font-weight: var(--description-font-weight);
line-height: var(--description-line-height);
color: var(--description-text-color);
font-family: var(--tap-pin-input-description-font-family);
font-size: var(--tap-pin-input-description-font-size);
font-weight: var(--tap-pin-input-description-font-weight);
line-height: var(--tap-pin-input-description-line-height);
color: var(--tap-pin-input-description-text-color);
}
.input-cells {
display: flex;
justify-content: var(--justify-content);
justify-content: var(--tap-pin-input-justify-content);
flex-direction: row-reverse;
gap: var(--horizontal-cell-gap);
gap: var(--tap-pin-input-horizontal-cell-gap);
}
`;

0 comments on commit fe44902

Please sign in to comment.