feat(tile): add design tokens #10476
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
alisonailea
reviewed
Oct 3, 2024
alisonailea
requested changes
Oct 3, 2024
There was a problem hiding this comment.
Thanks Erik! Looking good. I have a few suggestions to ensure we keep the component aligned to current design patterns.
@ashetland can you confirm "heading" "description/text" align with the future cross-component heading patterns?
| } | ||
| } | ||
|
|
||
| :host([selection-appearance="border"][layout="vertical"]) { | ||
| .container.selected { | ||
| box-shadow: inset 4px 0 0 0 var(--calcite-color-brand); |
There was a problem hiding this comment.
only the "x" and "y" axis lengths are in changing between these box-shadows. You could probably simplify this down to a single style prop. Something like....
.container {
box-shadow: inset var(--calcite-internal-tile-shadow-x) var(--calcite-internal-tile-shadow-y) 0 0 var(--calcite-internal-tile-shadow-color, none);
}
:host([selection-appearance="border"]) .container.selected {
--calcite-internal-tile-shadow-color: var(--calcite-tile-color-selected, var(--calcite-color-brand));
}
:host([layout="vertical"]) .container {
--calcite-internal-tile-shadow-x: 4px;
--calcite-internal-tile-shadow-y: 0;
}
:host([layout="horizontal"]) .container {
--calcite-internal-tile-shadow-x: 0;
--calcite-internal-tile-shadow-y: -4px;
}…xt-color-hover" token to allow both a default and overridable hover color.
macandcheese
reviewed
Oct 3, 2024
…ender this unnecessary and we don't want to ship a token we'll have to immediately deprecate
…so that one color token controls both the unfocused and focused states
…irectly on a calcite-tile element selector in CSS
… Restoring selection-appearance border selected styles with box-shadow rules.
…internal-tile-border-color and using brand token for hover, focus states on borders
…calcite-tile-heading-text-color-hover
…way of setting the color of the presentation calcite-icon using a direct color property, and adding additional --calcite-tile-href-icon-color-hover token that defaults to the link color
…le-description-text-color, syncing up all current css properties in tests and demos, commenting out some tests that need fixed in a follow-up
…ption-text-color-hover token with correct fallback, refactoring icon selectors to use css classes instead of element selectors, fixing heading text hover color, updating tests and demos, adding a link token test for heading text and icon hover
…cite-tile-selection-color/hover just like Card does.
…cite-tile-icon-color with an href attribute + hover css selector
…cription-text-color, icon-color and selection-color variables based on guidance from Ali
…lharper/7180-tile-tokens
alisonailea
requested changes
Oct 25, 2024
benelan
added a commit
that referenced
this pull request
Oct 25, 2024
…orepo * origin/dev: build(deps): update typescript-eslint monorepo to v7.18.0 (#10593) feat(tile): add design tokens (#10476) deprecate: deprecate web-adaptor in favor of web-adapter (#10598) docs: update component READMEs (#10600) build(deps): update dependency @rollup/plugin-replace to v6 (#10604) chore: release main (#10597) ci(chromatic): build storybook even when skipping snapshots (#10589) build(deps): update dependency axe-core to v4.10.1 (#10566) ci: add calcite-ui-icons label to relevant package PRs (#10590) chore: release next feat: add buffer point, buffer polygon, buffer polyline, contour, offset (#10594) feat(input-date-picker, date-picker): improve date picking experience (#8402) chore: release next fix: updated web-adapter name (#10581) build(deps): update nrwl monorepo to v19.8.6 (#10575) build(deps): update dependency tsx to v4.19.1 (#10574) build(deps): update dependency @cspell/eslint-plugin to v8.15.4 (#10565)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Related Issue: #7180
Summary
Adds design tokens for the Tile component.
--calcite-tile-accent-color-press: When the parent
calcite-tile-grouphas aselectionModethat is not"none", specifies the color of the component's selection elements, such as the radio, checkbox, and border.--calcite-tile-background-color: Specifies the component's background color.
--calcite-tile-border-color: Specifies the component's border color.
--calcite-tile-corner-radius: Specifies the component's corner radius.
--calcite-tile-heading-text-color: Specifies the component's
headingtext color.--calcite-tile-link-color: When the
hrefproperty exists, specifies the color of the component's link elements, such as the border, icon and heading text on hover, focus and press.--calcite-tile-shadow: Specifies the shadow around the component.
--calcite-tile-text-color: Specifies the component's
descriptionandicontext color, but not theheadingtext color.