Skip to content

feat(tile): add design tokens #10476

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

Merged
merged 35 commits into from
Oct 25, 2024
Merged

feat(tile): add design tokens #10476

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
45d65d9
feat(tile): add design tokens
eriklharper Oct 2, 2024
c7c4f5e
updating storybook and demo pages for theming examples
eriklharper Oct 2, 2024
6d359d9
Merge branch 'dev' into eriklharper/7180-tile-tokens
eriklharper Oct 2, 2024
b8e6d03
replacing "description-text-color" with "text-color" and adding a "te…
eriklharper Oct 3, 2024
57a9261
removing --calcite-tile-text-color-hover since future patterns will r…
eriklharper Oct 3, 2024
55dd86b
injecting --calcite-tile-border-color into the tile's focus selector …
eriklharper Oct 4, 2024
6fdd1db
removing --calcite-tile-shadow because user can just set box-shadow d…
eriklharper Oct 4, 2024
aa92728
adding --calcite-tile-shadow
eriklharper Oct 8, 2024
0a90132
removing --calcite-internal-tile-shadow since it isn't used anywhere.…
eriklharper Oct 9, 2024
f8bb7a7
removing --calcite-internal-tile-outline-color in favor of --calcite-…
eriklharper Oct 9, 2024
4f05f78
getting rid of --calcite-internal-tile-border-color
eriklharper Oct 9, 2024
9718d7b
removing --calcite-internal-tile-heading-text-color and adding new --…
eriklharper Oct 9, 2024
a7a8ee7
removing --calcite-internal-tile-icon-color, updating to use current …
eriklharper Oct 10, 2024
6f49f28
removing --calcite-tile-text-color in favor of restoring --calcite-ti…
eriklharper Oct 10, 2024
a30b852
removing last internal variable, adding missing --calcite-tile-descri…
eriklharper Oct 10, 2024
1700b3e
fixing href hover border
eriklharper Oct 11, 2024
7713208
replacing --calcite-tile-selection-icon-color/hover tokens with --cal…
eriklharper Oct 11, 2024
0e98c64
correcting the assignment of selection colors to use the "hover" vari…
eriklharper Oct 11, 2024
cd6d629
adding more test coverage for uses of selection color. Fixing broken…
eriklharper Oct 11, 2024
ac7399f
Merge branch 'dev' of github.com:Esri/calcite-design-system into erik…
eriklharper Oct 11, 2024
3abb819
removing --calcite-tile-description-text-color-hover
eriklharper Oct 21, 2024
c284028
removing --calcite-tile-heading-text-color-hover
eriklharper Oct 21, 2024
49a7e9f
removing --calcite-tile-href-icon-color-hover in favor of using --cal…
eriklharper Oct 22, 2024
a4a22c5
Merge branch 'dev' into eriklharper/7180-tile-tokens
eriklharper Oct 23, 2024
b4b759e
adding --calcite-tile-corner-radius
eriklharper Oct 23, 2024
4122e7c
adding accent-color-press variable, text-color variable, removing des…
eriklharper Oct 23, 2024
1e9e6c7
Merge branch 'dev' of github.com:Esri/calcite-design-system into erik…
eriklharper Oct 23, 2024
172eb2c
fixing selection-mode="none" to match visual matrix
eriklharper Oct 24, 2024
3ea5d9a
Fixing href styling behavior to match visual matrix
eriklharper Oct 24, 2024
ce1735b
Merge branch 'dev' into eriklharper/7180-tile-tokens
eriklharper Oct 24, 2024
e5a3a97
adding Kitty's revised property descriptors
eriklharper Oct 25, 2024
3e93905
updating fallback to use --calcite-corner-radius
eriklharper Oct 25, 2024
0453a37
adding --calcite-tile-link-color
eriklharper Oct 25, 2024
8baf0c7
updating doc to for link color to indicate state it applies to
eriklharper Oct 25, 2024
0c9d9aa
adding Kitty's revised tile-link-color description
eriklharper Oct 25, 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
13 changes: 9 additions & 4 deletions packages/calcite-components/src/components/tile/tile.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,10 +244,6 @@ describe("calcite-tile", () => {
shadowSelector: `.${CSS.container}`,
targetProp: "outlineColor",
},
"--calcite-tile-description-text-color": {
shadowSelector: `.${CSS.description}`,
targetProp: "color",
},
"--calcite-tile-heading-text-color": {
shadowSelector: `.${CSS.heading}`,
targetProp: "color",
Expand All @@ -256,6 +252,15 @@ describe("calcite-tile", () => {
shadowSelector: "calcite-icon",
targetProp: "--calcite-icon-color",
},
"--calcite-tile-text-color": {
selector: `calcite-tile`,
targetProp: "color",
},
"--calcite-tile-text-color-hover": {
selector: `calcite-tile`,
targetProp: "color",
state: "hover",
},
},
);
});
Expand Down
12 changes: 4 additions & 8 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 @@ -5,8 +5,9 @@
*
* @prop --calcite-tile-background-color: Specifies the background color of the component.
* @prop --calcite-tile-border-color: Specifies the border color of the component.
* @prop --calcite-tile-description-text-color: Specifies the description text color of the component.
* @prop --calcite-tile-heading-text-color: Specifies the heading text color of the component.
* @prop --calcite-tile-text-color: Specifies the text color of the component.
* @prop --calcite-tile-text-color-hover: Specifies the text color of the component on hover.
* @prop --calcite-tile-icon-color: Specifies the icon color in the component.
* @prop --calcite-tile-selection-icon-color: Specifies the color of the selection icon in the component.
* @prop --calcite-tile-selection-icon-color-hover: Specifies the color of the selection icon in the component on hover.
Expand All @@ -15,7 +16,6 @@

/** Internal variables
* --calcite-internal-tile-border-color
* --calcite-internal-tile-description-text-color
* --calcite-internal-tile-heading-text-color
* --calcite-internal-tile-icon-color
* --calcite-internal-tile-outline-color
Expand All @@ -25,14 +25,11 @@

:host {
--calcite-internal-tile-border-color: var(--calcite-tile-border-color, var(--calcite-color-border-2));
--calcite-internal-tile-description-text-color: var(
--calcite-tile-description-text-color,
var(--calcite-color-text-3)
);
--calcite-internal-tile-heading-text-color: var(--calcite-tile-heading-text-color, var(--calcite-color-text-2));
--calcite-internal-tile-icon-color: var(--calcite-color-text-3);

box-sizing: border-box;
color: var(--calcite-tile-text-color, var(--calcite-color-text-3));
display: inline-block;
}

Expand Down Expand Up @@ -117,7 +114,6 @@
}

.description {
color: var(--calcite-tile-description-text-color, var(--calcite-internal-tile-description-text-color));
font-weight: var(--calcite-font-weight-regular);
overflow-wrap: break-word;
}
Expand Down Expand Up @@ -269,7 +265,7 @@ calcite-icon {

:host(:hover:not([disabled])),
:host([active]:not([disabled])) {
--calcite-internal-tile-description-text-color: var(--calcite-color-text-2);
color: var(--calcite-tile-text-color-hover, --calcite-color-text-2);
--calcite-internal-tile-heading-text-color: var(--calcite-color-text-1);
}

Expand Down
3 changes: 2 additions & 1 deletion packages/calcite-components/src/custom-theme/tile.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,13 @@ import { html } from "../../support/formatting";
export const tileTokens = {
calciteTileBackgroundColor: "",
calciteTileBorderColor: "",
calciteTileDescriptionTextColor: "",
calciteTileHeadingTextColor: "",
calciteTileIconColor: "",
calciteTileSelectionIconColor: "",
calciteTileSelectionIconColorHover: "",
calciteTileShadow: "",
calciteTileTextColor: "",
calciteTileTextColorHover: "",
};

export const tile = html`
Expand Down
10 changes: 6 additions & 4 deletions packages/calcite-components/src/demos/tile-group.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1597,12 +1597,13 @@
tokens="
--calcite-tile-background-color,
--calcite-tile-border-color,
--calcite-tile-description-text-color,
--calcite-tile-heading-text-color,
--calcite-tile-icon-color,
--calcite-tile-selection-icon-color,
--calcite-tile-selection-icon-color-hover,
--calcite-tile-shadow"
--calcite-tile-shadow,
--calcite-tile-text-color,
--calcite-tile-text-color-hover"
>
<!-- themed single -->
<div class="parent">
Expand Down Expand Up @@ -2571,12 +2572,13 @@
tokens="
--calcite-tile-background-color,
--calcite-tile-border-color,
--calcite-tile-description-text-color,
--calcite-tile-heading-text-color,
--calcite-tile-icon-color,
--calcite-tile-selection-icon-color,
--calcite-tile-selection-icon-color-hover,
--calcite-tile-shadow"
--calcite-tile-shadow,
--calcite-tile-text-color,
--calcite-tile-text-color-hover"
>
<div class="parent">
<div class="child right-aligned-text">themed</div>
Expand Down
Loading