Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(icon): add component tokens #10062

Merged
merged 5 commits into from
Aug 27, 2024
Merged

feat(icon): add component tokens #10062

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8eb7d9c
fix(icon): add component token
alisonailea Aug 13, 2024
0f1498f
fix(global): remove unnecessary setting the icon-color token
alisonailea Aug 14, 2024
555cd94
fix(global): remove ref to ui-icon-color
alisonailea Aug 16, 2024
ef8e055
fix(chip): use current color for icons
alisonailea Aug 26, 2024
0284f1d
Merge branch 'dev' of github.com:Esri/calcite-design-system into ali-…
alisonailea Aug 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/calcite-components/calcite-preset.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export default {
3: "var(--calcite-color-text-3)",
inverse: "var(--calcite-color-text-inverse)",
link: "var(--calcite-color-text-link)",
icon: "var(--calcite-ui-icon-color)",
icon: "var(--calcite-icon-color, var(--calcite-ui-icon-color, currentColor))",
},
transparent: "transparent",
},
Expand Down
1 change: 0 additions & 1 deletion packages/calcite-components/src/assets/styles/global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@
--calcite-border-radius-base: 0;
--calcite-offset-invert-focus: 0; // should be 0 or 1
--calcite-panel-width-multiplier: 1;
--calcite-ui-icon-color: currentColor;

text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
Expand Down
10 changes: 5 additions & 5 deletions packages/calcite-components/src/components/card/card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,10 +173,10 @@
display: flex;
align-items: center;
justify-items: center;
--calcite-ui-icon-color: var(--calcite-card-selection-icon-color);
--calcite-icon-color: var(--calcite-card-selection-icon-color);
&:hover {
background-color: var(--calcite-card-selection-background-color-hover);
--calcite-ui-icon-color: var(--calcite-card-selection-icon-color-hover);
--calcite-icon-color: var(--calcite-card-selection-icon-color-hover);
}
&:active {
background-color: var(--calcite-card-selection-background-color-active);
Expand All @@ -187,7 +187,7 @@
}

:host([selected]) .checkbox-wrapper {
--calcite-ui-icon-color: var(--calcite-card-selection-icon-color-selected);
--calcite-icon-color: var(--calcite-card-selection-icon-color-selected);
background-color: var(--calcite-card-selection-background-color-selected);
&:hover {
background-color: var(--calcite-card-selection-background-color-hover);
Expand All @@ -199,12 +199,12 @@

:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper {
background-color: var(--calcite-card-selection-background-color-hover);
--calcite-ui-icon-color: var(--calcite-card-selection-icon-color-hover);
--calcite-icon-color: var(--calcite-card-selection-icon-color-hover);
}

:host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper {
background-color: var(--calcite-card-selection-background-color-active);
--calcite-ui-icon-color: var(--calcite-card-selection-icon-color-selected);
--calcite-icon-color: var(--calcite-card-selection-icon-color-selected);
}

.thumbnail-wrapper {
Expand Down
12 changes: 0 additions & 12 deletions packages/calcite-components/src/components/chip/chip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -400,9 +400,6 @@ slot[name="image"]::slotted(*) {
.close {
color: var(--calcite-color-text-3);
}
.chip-icon {
color: var(--calcite-ui-icon-color, var(--calcite-color-text-3));
}
}

:host([kind="inverse"]) {
Expand All @@ -414,9 +411,6 @@ slot[name="image"]::slotted(*) {
.close {
@apply text-color-inverse;
}
.chip-icon {
color: var(--calcite-ui-icon-color, var(--calcite-color-text-inverse));
}
}

:host([kind="brand"]) {
Expand All @@ -428,9 +422,6 @@ slot[name="image"]::slotted(*) {
.close {
@apply text-color-inverse;
}
.chip-icon {
color: var(--calcite-ui-icon-color, var(--calcite-color-text-inverse));
}
}

:host([appearance="outline-fill"]),
Expand All @@ -439,9 +430,6 @@ slot[name="image"]::slotted(*) {
.close {
@apply text-color-3;
}
.chip-icon {
color: var(--calcite-ui-icon-color, var(--calcite-color-text-3));
}
}

:host([appearance="outline-fill"]) {
Expand Down
2 changes: 1 addition & 1 deletion packages/calcite-components/src/components/chip/chip.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ export const withAvatarAndIconAndClosable = (): string => {
`;
};
export const overriddenIconColor = (): string =>
html`<calcite-chip icon="banana" style="--calcite-ui-icon-color: #ac9f42" closable>Banana</calcite-chip>`;
html`<calcite-chip icon="banana" style="--calcite-icon-color: #ac9f42" closable>Banana</calcite-chip>`;

export const darkModeRTL_TestOnly = (): string => html`
<div style="background-color:#2b2b2b;padding:100px" dir="rtl">
Expand Down
19 changes: 18 additions & 1 deletion packages/calcite-components/src/components/icon/icon.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { newE2EPage } from "@stencil/core/testing";
import { accessible, defaults, hidden, reflects, renders } from "../../tests/commonTests";
import { accessible, defaults, hidden, reflects, renders, themed } from "../../tests/commonTests";
import { CSS } from "./resources";
import { scaleToPx } from "./utils";

Expand Down Expand Up @@ -106,4 +106,21 @@ describe("calcite-icon", () => {
);
});
});

describe("theme", () => {
describe("default", () => {
themed("calcite-icon", {
"--calcite-icon-color": {
targetProp: "color",
},
});
});
describe("deprecated", () => {
themed("calcite-icon", {
"--calcite-ui-icon-color": {
targetProp: "color",
},
});
});
});
});
3 changes: 2 additions & 1 deletion packages/calcite-components/src/components/icon/icon.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-ui-icon-color: The component's color. Defaults to `currentColor`.
* @prop --calcite-ui-icon-color: [Deprecated] Use --calcite-icon-color. Specifies the component's color. Defaults to `currentColor`.
* @prop --calcite-icon-color: Specifies the component's color. Defaults to `currentColor`.
*/

:host {
Expand Down
11 changes: 11 additions & 0 deletions packages/calcite-components/src/components/icon/icon.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { iconNames } from "../../../.storybook/helpers";
import { modesDarkDefault } from "../../../.storybook/utils";
import { html } from "../../../support/formatting";
import { ATTRIBUTES } from "../../../.storybook/resources";
import { setCSSVariables } from "../../tests/utils/cssTokenValues";
import { Icon } from "./icon";
const { scale } = ATTRIBUTES;

Expand Down Expand Up @@ -45,3 +46,13 @@ export const darkModeRTL_TestOnly = (): string => html`
<calcite-icon class="calcite-mode-dark" dir="rtl" icon="${sampleIcon}" flip-rtl></calcite-icon>
`;
darkModeRTL_TestOnly.parameters = { themes: modesDarkDefault };

export const theming_TestOnly = (): string => html`
<style>
.container {
${setCSSVariables(["--calcite-icon-color"])}
</style>
<div class="container">
<calcite-icon icon="banana" scale="s"></calcite-icon>
</div>
`;
4 changes: 2 additions & 2 deletions packages/calcite-components/src/components/input-time-picker/input-time-picker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,12 @@
inset-inline-end: 0;
inset-block: 0;
padding-inline: var(--calcite-toggle-spacing);
--calcite-ui-icon-color: var(--calcite-color-text-3);
--calcite-icon-color: var(--calcite-color-text-3);
}

.input-wrapper:hover .toggle-icon,
calcite-input-text:focus + .toggle-icon {
--calcite-ui-icon-color: var(--calcite-color-text-1);
--calcite-icon-color: var(--calcite-color-text-1);
}

@include form-validation-message();
Expand Down
6 changes: 3 additions & 3 deletions packages/calcite-components/src/components/menu-item/menu-item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@
@apply text-color-1;
border-color: var(--calcite-color-brand);
.icon {
--calcite-ui-icon-color: var(--calcite-color-brand);
--calcite-icon-color: var(--calcite-color-brand);
}
}
:host([layout="vertical"]) .content {
Expand All @@ -86,7 +86,7 @@

.icon--dropdown {
@apply ms-auto me-0 ps-2 relative;
--calcite-ui-icon-color: var(--calcite-color-text-3);
--calcite-icon-color: var(--calcite-color-text-3);
}

:host([layout="vertical"]) .icon--end ~ .icon--dropdown {
Expand All @@ -106,7 +106,7 @@

.icon--breadcrumb {
@apply ps-2 me-0;
--calcite-ui-icon-color: var(--calcite-color-text-3);
--calcite-icon-color: var(--calcite-color-text-3);
}

:host([layout="vertical"]) .icon--breadcrumb {
Expand Down
2 changes: 1 addition & 1 deletion packages/calcite-components/src/components/navigation-logo/navigation-logo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
:host([active]) .anchor {
@apply text-color-1;
border-color: var(--calcite-color-brand);
--calcite-ui-icon-color: var(--calcite-color-brand);
--calcite-icon-color: var(--calcite-color-brand);
}

.container {
Expand Down
2 changes: 1 addition & 1 deletion packages/calcite-components/src/components/navigation-user/navigation-user.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@

:host([active]) .button {
@apply text-color-1 border-color-brand;
--calcite-ui-icon-color: var(--calcite-color-brand);
--calcite-icon-color: var(--calcite-color-brand);
}

.text-container {
Expand Down
6 changes: 3 additions & 3 deletions packages/calcite-components/src/components/tile/tile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
--calcite-tile-border-color: var(--calcite-color-border-2);
--calcite-tile-description-text-color: var(--calcite-color-text-3);
--calcite-tile-heading-text-color: var(--calcite-color-text-2);
--calcite-ui-icon-color: var(--calcite-color-text-3);
--calcite-icon-color: var(--calcite-color-text-3);

box-sizing: border-box;
display: inline-block;
Expand All @@ -35,7 +35,7 @@
outline-color: var(--calcite-color-brand);
position: relative;
.selection-icon {
--calcite-ui-icon-color: var(--calcite-color-brand);
--calcite-icon-color: var(--calcite-color-brand);
}
}
&.selected {
Expand Down Expand Up @@ -216,7 +216,7 @@
:host([href]:hover:not([disabled])) {
--calcite-tile-border-color: var(--calcite-color-text-link);
--calcite-tile-heading-text-color: var(--calcite-color-text-link);
--calcite-ui-icon-color: var(--calcite-color-text-link);
--calcite-icon-color: var(--calcite-color-text-link);
.container {
position: relative;
z-index: var(--calcite-z-index);
Expand Down
8 changes: 4 additions & 4 deletions packages/calcite-components/src/demos/chip-group.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
}

.icon-search calcite-chip[selected] {
--calcite-ui-icon-color: #974dff;
--calcite-icon-color: #974dff;
}

.themed-children calcite-chip:first-of-type {
Expand Down Expand Up @@ -101,19 +101,19 @@
.themed-children-card calcite-chip:first-of-type {
--calcite-color-foreground-2: rgb(222 239 220);
--calcite-color-text-1: var(--calcite-color-status-success);
--calcite-ui-icon-color: var(--calcite-color-status-success);
--calcite-icon-color: var(--calcite-color-status-success);
}

.themed-children-card calcite-chip:nth-of-type(2) {
--calcite-color-foreground-2: rgb(221 238 249);
--calcite-color-text-1: var(--calcite-color-status-info);
--calcite-ui-icon-color: var(--calcite-color-status-info);
--calcite-icon-color: var(--calcite-color-status-info);
}

.themed-children-card calcite-chip:nth-of-type(3) {
--calcite-color-foreground-2: rgb(221 238 249);
--calcite-color-text-1: var(--calcite-color-status-info);
--calcite-ui-icon-color: var(--calcite-color-status-info);
--calcite-icon-color: var(--calcite-color-status-info);
}

hr {
Expand Down
6 changes: 3 additions & 3 deletions packages/calcite-components/src/demos/chip.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,19 +98,19 @@
.themed-children-card calcite-chip:first-of-type {
--calcite-color-foreground-2: rgb(222 239 220);
--calcite-color-text-1: var(--calcite-color-status-success);
--calcite-ui-icon-color: var(--calcite-color-status-success);
--calcite-icon-color: var(--calcite-color-status-success);
}

.themed-children-card calcite-chip:nth-of-type(2) {
--calcite-color-foreground-2: rgb(221 238 249);
--calcite-color-text-1: var(--calcite-color-status-info);
--calcite-ui-icon-color: var(--calcite-color-status-info);
--calcite-icon-color: var(--calcite-color-status-info);
}

.themed-children-card calcite-chip:nth-of-type(3) {
--calcite-color-foreground-2: rgb(221 238 249);
--calcite-color-text-1: var(--calcite-color-status-info);
--calcite-ui-icon-color: var(--calcite-color-status-info);
--calcite-icon-color: var(--calcite-color-status-info);
}
</style>
<script src="_assets/head.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion packages/calcite-components/src/demos/icon.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
}

.my-icon-color-class {
--calcite-ui-icon-color: #007ac2;
--calcite-icon-color: #007ac2;
}
</style>
<script src="./_assets/head.js"></script>
Expand Down
10 changes: 5 additions & 5 deletions packages/calcite-components/src/demos/navigation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -757,7 +757,7 @@ <h2>Theming</h2>
--calcite-color-text-1: white;
--calcite-color-text-2: white;
--calcite-color-text-3: white;
--calcite-ui-icon-color: white;
--calcite-icon-color: white;
}

.example-theming-tier-primary calcite-navigation-logo {
Expand All @@ -767,7 +767,7 @@ <h2>Theming</h2>
--calcite-color-text-1: white;
--calcite-color-text-2: white;
--calcite-color-text-3: white;
--calcite-ui-icon-color: white;
--calcite-icon-color: white;
}

.example-theming-tier-primary calcite-navigation-user {
Expand All @@ -777,7 +777,7 @@ <h2>Theming</h2>
--calcite-color-text-1: white;
--calcite-color-text-2: white;
--calcite-color-text-3: white;
--calcite-ui-icon-color: white;
--calcite-icon-color: white;
}

calcite-menu.example-primary-theming {
Expand All @@ -787,7 +787,7 @@ <h2>Theming</h2>
--calcite-color-text-1: white;
--calcite-color-text-2: white;
--calcite-color-text-3: white;
--calcite-ui-icon-color: white;
--calcite-icon-color: white;
}

calcite-menu.example-secondary-theming {
Expand All @@ -797,7 +797,7 @@ <h2>Theming</h2>
--calcite-color-text-1: white;
--calcite-color-text-2: white;
--calcite-color-text-3: white;
--calcite-ui-icon-color: white;
--calcite-icon-color: white;
}

calcite-menu.example-tertiary-theming {
Expand Down
Loading
Loading