From e30eceed7bc8b6d77990cf454abfd78d49a7b2b2 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Tue, 20 Feb 2024 18:27:50 -0600 Subject: [PATCH 01/10] feat(date-picker-day): add component tokens --- .../calcite-components/src/components.d.ts | 84 ------------------- .../date-picker-day/date-picker-day.scss | 70 +++++++++------- 2 files changed, 38 insertions(+), 116 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 93e23ce88dc..8f6fcd21905 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -779,36 +779,6 @@ export namespace Components { */ "thumbnailPosition": LogicalFlowPosition; } - interface CalciteCardGroup { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - "disabled": boolean; - /** - * Accessible name for the component. - */ - "label": string; - /** - * Specifies the size of the component. Child `calcite-card`s inherit the component's value. - */ - "scale": Scale; - /** - * Specifies the component's selected items. - * @readonly - */ - "selectedItems": HTMLCalciteCardElement[]; - /** - * Specifies the selection mode of the component. - */ - "selectionMode": Extract< - "multiple" | "single" | "single-persist" | "none", - SelectionMode - >; - /** - * Sets focus on the component's first focusable element. - */ - "setFocus": () => Promise; - } interface CalciteCheckbox { /** * When `true`, the component is checked. @@ -5449,10 +5419,6 @@ export interface CalciteCardCustomEvent extends CustomEvent { detail: T; target: HTMLCalciteCardElement; } -export interface CalciteCardGroupCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteCardGroupElement; -} export interface CalciteCheckboxCustomEvent extends CustomEvent { detail: T; target: HTMLCalciteCheckboxElement; @@ -5913,23 +5879,6 @@ declare global { prototype: HTMLCalciteCardElement; new (): HTMLCalciteCardElement; }; - interface HTMLCalciteCardGroupElementEventMap { - "calciteCardGroupSelect": void; - } - interface HTMLCalciteCardGroupElement extends Components.CalciteCardGroup, HTMLStencilElement { - addEventListener(type: K, listener: (this: HTMLCalciteCardGroupElement, ev: CalciteCardGroupCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; - removeEventListener(type: K, listener: (this: HTMLCalciteCardGroupElement, ev: CalciteCardGroupCustomEvent) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; - } - var HTMLCalciteCardGroupElement: { - prototype: HTMLCalciteCardGroupElement; - new (): HTMLCalciteCardGroupElement; - }; interface HTMLCalciteCheckboxElementEventMap { "calciteInternalCheckboxBlur": boolean; "calciteCheckboxChange": void; @@ -7410,7 +7359,6 @@ declare global { "calcite-block-section": HTMLCalciteBlockSectionElement; "calcite-button": HTMLCalciteButtonElement; "calcite-card": HTMLCalciteCardElement; - "calcite-card-group": HTMLCalciteCardGroupElement; "calcite-checkbox": HTMLCalciteCheckboxElement; "calcite-chip": HTMLCalciteChipElement; "calcite-chip-group": HTMLCalciteChipGroupElement; @@ -8135,36 +8083,6 @@ declare namespace LocalJSX { */ "thumbnailPosition"?: LogicalFlowPosition; } - interface CalciteCardGroup { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - "disabled"?: boolean; - /** - * Accessible name for the component. - */ - "label": string; - /** - * Emits when the component's selection changes and the selectionMode is not `none`. - */ - "onCalciteCardGroupSelect"?: (event: CalciteCardGroupCustomEvent) => void; - /** - * Specifies the size of the component. Child `calcite-card`s inherit the component's value. - */ - "scale"?: Scale; - /** - * Specifies the component's selected items. - * @readonly - */ - "selectedItems"?: HTMLCalciteCardElement[]; - /** - * Specifies the selection mode of the component. - */ - "selectionMode"?: Extract< - "multiple" | "single" | "single-persist" | "none", - SelectionMode - >; - } interface CalciteCheckbox { /** * When `true`, the component is checked. @@ -13025,7 +12943,6 @@ declare namespace LocalJSX { "calcite-block-section": CalciteBlockSection; "calcite-button": CalciteButton; "calcite-card": CalciteCard; - "calcite-card-group": CalciteCardGroup; "calcite-checkbox": CalciteCheckbox; "calcite-chip": CalciteChip; "calcite-chip-group": CalciteChipGroup; @@ -13139,7 +13056,6 @@ declare module "@stencil/core" { "calcite-block-section": LocalJSX.CalciteBlockSection & JSXBase.HTMLAttributes; "calcite-button": LocalJSX.CalciteButton & JSXBase.HTMLAttributes; "calcite-card": LocalJSX.CalciteCard & JSXBase.HTMLAttributes; - "calcite-card-group": LocalJSX.CalciteCardGroup & JSXBase.HTMLAttributes; "calcite-checkbox": LocalJSX.CalciteCheckbox & JSXBase.HTMLAttributes; "calcite-chip": LocalJSX.CalciteChip & JSXBase.HTMLAttributes; "calcite-chip-group": LocalJSX.CalciteChipGroup & JSXBase.HTMLAttributes; diff --git a/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss b/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss index ce468a802d3..1b098a5b6fc 100644 --- a/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss +++ b/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss @@ -1,5 +1,10 @@ :host { - @apply cursor-pointer flex relative text-color-3; + cursor: pointer; + display: flex; + position: relative; + --calcite-internal-day-text-color: var(--calcite-color-text-3); + --calcite-internal-day-font-size: var(--calcite-font-size--2); + color: var(--calcite-internal-day-text-color); } @include disabled(); @@ -7,7 +12,8 @@ @mixin range-part-base() { &:before, &:after { - @apply absolute pointer-events-none; + position: absolute; + pointer-events: none; inset-block: 0; content: ""; block-size: var(--calcite-internal-day-size); @@ -42,23 +48,23 @@ @mixin range-part-middle() { &:before { inset-inline-end: 50%; - border-radius: 0; + border-radius: var(--calcite-corner-radius-0); } &:after { inset-inline-start: 50%; - border-radius: 0; + border-radius: var(--calcite-corner-radius-0); } } .day-v-wrapper { - @apply flex-auto; + flex: 1 1 auto; } .day-wrapper { - @apply flex - flex-col - items-center - relative; + display: flex; + flex-direction: column; + position: relative; + align-items: center; } :host([range]), @@ -69,16 +75,15 @@ } .day { - @apply text-n2h - text-color-3 - flex - focus-base - items-center - justify-center - rounded-full - leading-none - transition-default - z-default; + @apply transition-default; + font-size: var(--calcite-internal-day-font-size); + display: flex; + outline-color: transparent; + align-items: center; + justify-content: center; + line-height: normal; + z-index: var(--calcite-z-index); + border-radius: 9999px; background: none; box-shadow: 0 0 0 2px transparent; block-size: var(--calcite-internal-day-size); @@ -86,21 +91,21 @@ } .text { - @apply mt-px mb-0; - margin-inline-start: theme("spacing.0"); + margin-block: var(--calcite-spacing-px) 0; + margin-inline-start: 0; } :host([scale="s"]) { --calcite-internal-day-size: 27px; .day-v-wrapper { - @apply py-0.5; + padding-block: var(--calcite-spacing-base); } .day-wrapper { - @apply p-0; + padding: 0; } .day { - @apply text-n2; + --calcite-internal-day-font-size: var(--calcite-font-size--2); } } @@ -108,13 +113,13 @@ --calcite-internal-day-size: 33px; .day-v-wrapper { - @apply py-1; + padding-block: var(--calcite-spacing-px); } .day-wrapper { - @apply p-0; + padding: 0; } .day { - @apply text-n1; + --calcite-internal-day-font-size: var(--calcite-font-size--1); } } @@ -122,24 +127,25 @@ --calcite-internal-day-size: 43px; .day-v-wrapper { - @apply py-1; + padding-block: var(--calcite-spacing-px); } .day-wrapper { - @apply px-1; + padding-inline: var(--calcite-spacing-px); } .day { - @apply text-0; + --calcite-internal-day-font-size: var(--calcite-font-size--0); } } :host(:not([current-month])) .day { - @apply opacity-disabled; + opacity: var(--calcite-opacity-disabled); } :host(:hover:not([disabled]):not([selected])), :host([active]:not([range]):not([selected])) { & .day { - @apply bg-foreground-2 text-color-1; + background-color: var(--calcite-color-foreground-2); + --calcite-internal-day-text-color: var(--calcite-color-text-1); } } From d59815eeb00b672b1b447ed6ce5897f7f6800dff Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Wed, 21 Feb 2024 14:23:02 -0600 Subject: [PATCH 02/10] add token for background-color --- .../date-picker-day/date-picker-day.scss | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss b/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss index 1b098a5b6fc..ce06b9b08ac 100644 --- a/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss +++ b/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss @@ -4,6 +4,7 @@ position: relative; --calcite-internal-day-text-color: var(--calcite-color-text-3); --calcite-internal-day-font-size: var(--calcite-font-size--2); + --calcite-internal-day-background-color: var(--calcite-color-background-none); color: var(--calcite-internal-day-text-color); } @@ -85,6 +86,7 @@ z-index: var(--calcite-z-index); border-radius: 9999px; background: none; + background-color: var(--calcite-internal-day-background-color); box-shadow: 0 0 0 2px transparent; block-size: var(--calcite-internal-day-size); inline-size: var(--calcite-internal-day-size); @@ -144,7 +146,7 @@ :host(:hover:not([disabled]):not([selected])), :host([active]:not([range]):not([selected])) { & .day { - background-color: var(--calcite-color-foreground-2); + --calcite-internal-day-background-color: var(--calcite-color-foreground-2); --calcite-internal-day-text-color: var(--calcite-color-text-1); } } @@ -159,9 +161,9 @@ } :host([selected]) .day { - @apply font-medium; - background-color: var(--calcite-color-brand); - color: var(--calcite-color-foreground-1); + font-weight: var(--calcite-font-weight-medium); + --calcite-internal-day-background-color: var(--calcite-color-brand); + --calcite-internal-day-text-color: var(--calcite-color-foreground-1); } :host(:focus:not([disabled])), @@ -179,7 +181,7 @@ } .day { - @apply text-color-1; + --calcite-internal-day-text-color: var(--calcite-color-text-1); } } @@ -197,7 +199,7 @@ .day-wrapper { &:before, &:after { - @apply bg-foreground-2; + background-color: var(--calcite-color-foreground-2); } } } @@ -246,7 +248,7 @@ @media (forced-colors: active) { .day { - @apply rounded-none; + border-radius: 0; } :host([selected]) { From 435cbef7675854b261b9f10d9fe0bd47530a4eee Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Wed, 21 Feb 2024 14:40:03 -0600 Subject: [PATCH 03/10] refactor --- .../date-picker-day/date-picker-day.scss | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss b/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss index ce06b9b08ac..53e5ed80fbb 100644 --- a/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss +++ b/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss @@ -3,8 +3,11 @@ display: flex; position: relative; --calcite-internal-day-text-color: var(--calcite-color-text-3); - --calcite-internal-day-font-size: var(--calcite-font-size--2); + --calcite-internal-day-font-size: var(--calcite-font-size); --calcite-internal-day-background-color: var(--calcite-color-background-none); + --calcite-internal-day-shadow: var(--calcite-shadow-none); + --calcite-internal-day-shadow-hover: var(--calcite-shadow-none); + --calcite-internal-day-shadow-focus: var(--calcite-shadow-none); color: var(--calcite-internal-day-text-color); } @@ -87,7 +90,7 @@ border-radius: 9999px; background: none; background-color: var(--calcite-internal-day-background-color); - box-shadow: 0 0 0 2px transparent; + box-shadow: var(--calcite-internal-day-shadow); block-size: var(--calcite-internal-day-size); inline-size: var(--calcite-internal-day-size); } @@ -107,7 +110,7 @@ padding: 0; } .day { - --calcite-internal-day-font-size: var(--calcite-font-size--2); + --calcite-internal-day-font-size: var(--calcite-font-size-sm); } } @@ -120,9 +123,6 @@ .day-wrapper { padding: 0; } - .day { - --calcite-internal-day-font-size: var(--calcite-font-size--1); - } } :host([scale="l"]) { @@ -135,7 +135,7 @@ padding-inline: var(--calcite-spacing-px); } .day { - --calcite-internal-day-font-size: var(--calcite-font-size--0); + --calcite-internal-day-font-size: var(--calcite-font-size-md); } } @@ -170,7 +170,7 @@ :host([start-of-range]:not(:focus)), :host([end-of-range]:not(:focus)) { .day { - box-shadow: 0 0 0 2px var(--calcite-color-foreground-1); + box-shadow: var(--calcite-internal-day-shadow-focus); } } @@ -242,7 +242,7 @@ :host(:hover[range-hover]:not([selected]).focused--start.hover--outside-range), :host(:hover[range-hover]:not([selected]).focused--end.hover--outside-range) { .day { - box-shadow: 0 0 0 2px var(--calcite-color-foreground-1); + box-shadow: var(--calcite-internal-day-shadow-hover); } } From 03393ad36c3b0a83e1a3d672d049af55de77f981 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Thu, 22 Feb 2024 09:43:20 -0600 Subject: [PATCH 04/10] fix regression --- .../src/components/date-picker-day/date-picker-day.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss b/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss index 53e5ed80fbb..d0b0b1426b6 100644 --- a/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss +++ b/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss @@ -96,7 +96,8 @@ } .text { - margin-block: var(--calcite-spacing-px) 0; + margin-block-start: var(--calcite-spacing-px); + margin-block-end: 0; margin-inline-start: 0; } From 137651abbd3ce3654910faf4b0f4ba5ec55f82ea Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Thu, 22 Feb 2024 10:40:50 -0600 Subject: [PATCH 05/10] fix padding scale --- .../date-picker-day/date-picker-day.scss | 21 +++++++++++-------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss b/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss index d0b0b1426b6..9424d19108f 100644 --- a/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss +++ b/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss @@ -80,6 +80,7 @@ .day { @apply transition-default; + color: var(--calcite-internal-day-text-color); font-size: var(--calcite-internal-day-font-size); display: flex; outline-color: transparent; @@ -90,7 +91,7 @@ border-radius: 9999px; background: none; background-color: var(--calcite-internal-day-background-color); - box-shadow: var(--calcite-internal-day-shadow); + box-shadow: 0 0 0 2px transparent; block-size: var(--calcite-internal-day-size); inline-size: var(--calcite-internal-day-size); } @@ -119,21 +120,24 @@ --calcite-internal-day-size: 33px; .day-v-wrapper { - padding-block: var(--calcite-spacing-px); + padding-block: var(--calcite-spacing-xxs); } .day-wrapper { padding: 0; } + .day { + --calcite-internal-day-font-size: var(--calcite-font-size); + } } :host([scale="l"]) { --calcite-internal-day-size: 43px; .day-v-wrapper { - padding-block: var(--calcite-spacing-px); + padding-block: var(--calcite-spacing-xxs); } .day-wrapper { - padding-inline: var(--calcite-spacing-px); + padding-inline: var(--calcite-spacing-xxs); } .day { --calcite-internal-day-font-size: var(--calcite-font-size-md); @@ -164,14 +168,14 @@ :host([selected]) .day { font-weight: var(--calcite-font-weight-medium); --calcite-internal-day-background-color: var(--calcite-color-brand); - --calcite-internal-day-text-color: var(--calcite-color-foreground-1); + --calcite-internal-day-text-color: var(--calcite-color-text-inverse); } :host(:focus:not([disabled])), :host([start-of-range]:not(:focus)), :host([end-of-range]:not(:focus)) { .day { - box-shadow: var(--calcite-internal-day-shadow-focus); + box-shadow: 0 0 0 2px var(--calcite-color-foreground-1); } } @@ -180,7 +184,6 @@ .day-wrapper { @include range-part-middle(); } - .day { --calcite-internal-day-text-color: var(--calcite-color-text-1); } @@ -243,13 +246,13 @@ :host(:hover[range-hover]:not([selected]).focused--start.hover--outside-range), :host(:hover[range-hover]:not([selected]).focused--end.hover--outside-range) { .day { - box-shadow: var(--calcite-internal-day-shadow-hover); + box-shadow: 0 0 0 2px var(--calcite-color-foreground-1); } } @media (forced-colors: active) { .day { - border-radius: 0; + border-radius: var(--calcite-corner-radius-0); } :host([selected]) { From c629af889072718371700e93ac533d2f6cb80ac7 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Thu, 22 Feb 2024 11:19:51 -0600 Subject: [PATCH 06/10] clean up --- .../date-picker-day/date-picker-day.scss | 23 +++++++++---------- 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss b/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss index 9424d19108f..20f101eda25 100644 --- a/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss +++ b/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss @@ -1,13 +1,12 @@ :host { - cursor: pointer; - display: flex; - position: relative; --calcite-internal-day-text-color: var(--calcite-color-text-3); + --calcite-internal-day-text-color-active: var(--calcite-color-text-1); + --calcite-internal-day-text-color-selected: var(--calcite-color-text-inverse); --calcite-internal-day-font-size: var(--calcite-font-size); --calcite-internal-day-background-color: var(--calcite-color-background-none); - --calcite-internal-day-shadow: var(--calcite-shadow-none); - --calcite-internal-day-shadow-hover: var(--calcite-shadow-none); - --calcite-internal-day-shadow-focus: var(--calcite-shadow-none); + cursor: pointer; + display: flex; + position: relative; color: var(--calcite-internal-day-text-color); } @@ -52,11 +51,11 @@ @mixin range-part-middle() { &:before { inset-inline-end: 50%; - border-radius: var(--calcite-corner-radius-0); + border-radius: var(--calcite-corner-radius); } &:after { inset-inline-start: 50%; - border-radius: var(--calcite-corner-radius-0); + border-radius: var(--calcite-corner-radius); } } @@ -152,7 +151,7 @@ :host([active]:not([range]):not([selected])) { & .day { --calcite-internal-day-background-color: var(--calcite-color-foreground-2); - --calcite-internal-day-text-color: var(--calcite-color-text-1); + color: var(--calcite-internal-day-text-color-active); } } @@ -167,8 +166,8 @@ :host([selected]) .day { font-weight: var(--calcite-font-weight-medium); + color: var(--calcite-internal-day-text-color-selected); --calcite-internal-day-background-color: var(--calcite-color-brand); - --calcite-internal-day-text-color: var(--calcite-color-text-inverse); } :host(:focus:not([disabled])), @@ -185,7 +184,7 @@ @include range-part-middle(); } .day { - --calcite-internal-day-text-color: var(--calcite-color-text-1); + color: var(--calcite-internal-day-text-color-active); } } @@ -252,7 +251,7 @@ @media (forced-colors: active) { .day { - border-radius: var(--calcite-corner-radius-0); + border-radius: var(--calcite-corner-radius); } :host([selected]) { From ae6626009a7ec3730209f3274c7d9cd9ecfcab43 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Thu, 22 Feb 2024 17:26:39 -0600 Subject: [PATCH 07/10] restore line-height for day --- .../date-picker-day/date-picker-day.scss | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss b/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss index 20f101eda25..54160aee494 100644 --- a/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss +++ b/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss @@ -15,8 +15,7 @@ @mixin range-part-base() { &:before, &:after { - position: absolute; - pointer-events: none; + @apply absolute pointer-events-none; inset-block: 0; content: ""; block-size: var(--calcite-internal-day-size); @@ -60,14 +59,14 @@ } .day-v-wrapper { - flex: 1 1 auto; + @apply flex-auto; } .day-wrapper { - display: flex; - flex-direction: column; - position: relative; - align-items: center; + @apply flex + flex-col + items-center + relative; } :host([range]), @@ -78,16 +77,17 @@ } .day { - @apply transition-default; + @apply flex + transition-default + focus-base + items-center + justify-center + rounded-full + leading-none + transition-default; color: var(--calcite-internal-day-text-color); font-size: var(--calcite-internal-day-font-size); - display: flex; - outline-color: transparent; - align-items: center; - justify-content: center; - line-height: normal; z-index: var(--calcite-z-index); - border-radius: 9999px; background: none; background-color: var(--calcite-internal-day-background-color); box-shadow: 0 0 0 2px transparent; From 234eb311cfb6778b6d9a58562af5ff95f020f302 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Thu, 22 Feb 2024 17:27:30 -0600 Subject: [PATCH 08/10] restore tailwind util classes --- .../src/components/date-picker-day/date-picker-day.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss b/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss index 54160aee494..df9ccf2525e 100644 --- a/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss +++ b/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss @@ -1,12 +1,10 @@ :host { + @apply cursor-pointer flex relative; --calcite-internal-day-text-color: var(--calcite-color-text-3); --calcite-internal-day-text-color-active: var(--calcite-color-text-1); --calcite-internal-day-text-color-selected: var(--calcite-color-text-inverse); --calcite-internal-day-font-size: var(--calcite-font-size); --calcite-internal-day-background-color: var(--calcite-color-background-none); - cursor: pointer; - display: flex; - position: relative; color: var(--calcite-internal-day-text-color); } From 31e380b440ef3c9ccc1b9d90019cc07739c777bf Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Fri, 23 Feb 2024 17:41:12 -0600 Subject: [PATCH 09/10] refactor --- .../date-picker-day/date-picker-day.scss | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss b/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss index df9ccf2525e..97872b6c5a8 100644 --- a/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss +++ b/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss @@ -1,11 +1,6 @@ :host { @apply cursor-pointer flex relative; - --calcite-internal-day-text-color: var(--calcite-color-text-3); - --calcite-internal-day-text-color-active: var(--calcite-color-text-1); - --calcite-internal-day-text-color-selected: var(--calcite-color-text-inverse); - --calcite-internal-day-font-size: var(--calcite-font-size); - --calcite-internal-day-background-color: var(--calcite-color-background-none); - color: var(--calcite-internal-day-text-color); + color: var(--calcite-internal-day-text-color, var(--calcite-color-text-3) ;); } @include disabled(); @@ -84,10 +79,10 @@ leading-none transition-default; color: var(--calcite-internal-day-text-color); - font-size: var(--calcite-internal-day-font-size); + font-size: var(--calcite-internal-day-font-size, var(--calcite-font-size)); z-index: var(--calcite-z-index); background: none; - background-color: var(--calcite-internal-day-background-color); + background-color: var(--calcite-internal-day-background-color, var(--calcite-color-background-none) ;); box-shadow: 0 0 0 2px transparent; block-size: var(--calcite-internal-day-size); inline-size: var(--calcite-internal-day-size); @@ -149,7 +144,7 @@ :host([active]:not([range]):not([selected])) { & .day { --calcite-internal-day-background-color: var(--calcite-color-foreground-2); - color: var(--calcite-internal-day-text-color-active); + color: var(--calcite-internal-day-text-color-active, var(--calcite-color-text-1) ;); } } @@ -164,7 +159,7 @@ :host([selected]) .day { font-weight: var(--calcite-font-weight-medium); - color: var(--calcite-internal-day-text-color-selected); + color: var(--calcite-internal-day-text-color-selected, var(--calcite-color-text-inverse) ;); --calcite-internal-day-background-color: var(--calcite-color-brand); } @@ -182,7 +177,7 @@ @include range-part-middle(); } .day { - color: var(--calcite-internal-day-text-color-active); + color: var(--calcite-internal-day-text-color-active, var(--calcite-color-text-1) ;); } } From 2570456da9523672334f2658f8fbb443e170db1a Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Fri, 23 Feb 2024 17:55:01 -0600 Subject: [PATCH 10/10] fix build errors --- .../components/date-picker-day/date-picker-day.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss b/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss index 97872b6c5a8..39c0b418b29 100644 --- a/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss +++ b/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss @@ -1,6 +1,6 @@ :host { @apply cursor-pointer flex relative; - color: var(--calcite-internal-day-text-color, var(--calcite-color-text-3) ;); + color: var(--calcite-internal-day-text-color, var(--calcite-color-text-3)); } @include disabled(); @@ -82,7 +82,7 @@ font-size: var(--calcite-internal-day-font-size, var(--calcite-font-size)); z-index: var(--calcite-z-index); background: none; - background-color: var(--calcite-internal-day-background-color, var(--calcite-color-background-none) ;); + background-color: var(--calcite-internal-day-background-color, var(--calcite-color-background-none)); box-shadow: 0 0 0 2px transparent; block-size: var(--calcite-internal-day-size); inline-size: var(--calcite-internal-day-size); @@ -144,7 +144,7 @@ :host([active]:not([range]):not([selected])) { & .day { --calcite-internal-day-background-color: var(--calcite-color-foreground-2); - color: var(--calcite-internal-day-text-color-active, var(--calcite-color-text-1) ;); + color: var(--calcite-internal-day-text-color-active, var(--calcite-color-text-1)); } } @@ -159,7 +159,7 @@ :host([selected]) .day { font-weight: var(--calcite-font-weight-medium); - color: var(--calcite-internal-day-text-color-selected, var(--calcite-color-text-inverse) ;); + color: var(--calcite-internal-day-text-color-selected, var(--calcite-color-text-inverse)); --calcite-internal-day-background-color: var(--calcite-color-brand); } @@ -177,7 +177,7 @@ @include range-part-middle(); } .day { - color: var(--calcite-internal-day-text-color-active, var(--calcite-color-text-1) ;); + color: var(--calcite-internal-day-text-color-active, var(--calcite-color-text-1)); } }