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

docs: component token description consistency #10430

Merged
merged 2 commits into from
Sep 27, 2024
Merged

docs: component token description consistency #10430

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4ed2a9a
docs: component token descriptions consistency
geospatialem Sep 27, 2024
372018a
docs: component token descriptions consistency
geospatialem Sep 27, 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
16 changes: 8 additions & 8 deletions packages/calcite-components/src/components/accordion-item/accordion-item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,20 @@
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-accordion-border-color: [Deprecate] Use --calcite-accordion-item-border-color. Specifies the component's border color.
* @prop --calcite-accordion-border-color: [Deprecate] Use `--calcite-accordion-item-border-color`. Specifies the component's border color.
* @prop --calcite-accordion-item-background-color: Specifies the component's background color.
* @prop --calcite-accordion-item-border-color: Specifies the component's border color.
* @prop --calcite-accordion-item-content-space: Specifies the component's padding.
* @prop --calcite-accordion-item-end-icon-color: Specifies the component's end icon color. Fallback to --calcite-accordion-item-icon-color or current color.
* @prop --calcite-accordion-item-end-icon-color: Specifies the component's `iconEnd` color. Fallback to `--calcite-accordion-item-icon-color` or current color.
* @prop --calcite-accordion-item-expand-icon-color: Specifies the component's expand icon color.
* @prop --calcite-accordion-item-header-background-color: Specifies the background color of the component's header.
* @prop --calcite-accordion-item-heading-text-color: Specifies the component's heading text color.
* @prop --calcite-accordion-item-header-background-color: Specifies the component's `heading` background color.
* @prop --calcite-accordion-item-heading-text-color: Specifies the component's `heading` text color.
* @prop --calcite-accordion-item-icon-color: Specifies the component's default icon color.
* @prop --calcite-accordion-item-start-icon-color: Specifies the component's start icon color. Fallback to --calcite-accordion-item-icon-color or current color.
* @prop --calcite-accordion-item-start-icon-color: Specifies the component's `iconStart` color. Fallback to `--calcite-accordion-item-icon-color` or current color.
* @prop --calcite-accordion-item-text-color: Specifies the component's text color.
* @prop --calcite-accordion-text-color-hover: [Deprecated] Use --calcite-accordion-item-text-color-hover. Specifies the component's main text color on hover.
* @prop --calcite-accordion-text-color-pressed: [Deprecated] Use --calcite-accordion-item-text-color-press. Specifies the component's main text color when pressed.
* @prop --calcite-accordion-text-color: [Deprecated] Use --calcite-accordion-item-text-color. Specifies the component's text color.
* @prop --calcite-accordion-text-color-hover: [Deprecated] Use `--calcite-accordion-item-text-color-hover`. Specifies the component's main text color on hover.
* @prop --calcite-accordion-text-color-pressed: [Deprecated] Use `--calcite-accordion-item-text-color-press`. Specifies the component's main text color when pressed.
* @prop --calcite-accordion-text-color: [Deprecated] Use `--calcite-accordion-item-text-color`. Specifies the component's text color.
*/

%icon-position {
Expand Down
2 changes: 1 addition & 1 deletion packages/calcite-components/src/components/action-bar/action-bar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-action-bar-expanded-max-width: Specifies the maximum width of the component when it's `layout` is `"vertical"`.
* @prop --calcite-action-bar-expanded-max-width: When `layout` is `"vertical"`, specifies the component's maximum width.
* @prop --calcite-action-bar-items-space: Specifies the space between slotted components in the component.
*/

Expand Down
8 changes: 4 additions & 4 deletions packages/calcite-components/src/components/action-group/action-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-action-background-color: Specifies the component's background color.
* @prop --calcite-action-group-border-color: Specifies the component's border color when used in a calcite-action-bar or calcite-action-menu.
* @prop --calcite-action-group-columns: Specifies the component's grid-template-columns when the `layout` property is `"grid"`.
* @prop --calcite-action-group-gap: Specifies the component's gap when the `layout` property is `"grid" and padding`.
* @prop --calcite-action-group-padding: [Deprecated] Use --calcite-action-group-gap. Specifies the component's padding.
* @prop --calcite-action-group-border-color: Specifies the component's border color when used in a `calcite-action-bar` or `calcite-action-menu`.
* @prop --calcite-action-group-columns: When `layout` is `"grid"`, specifies the component's grid-template-columns.
* @prop --calcite-action-group-gap: When `layout` is `"grid"`, specifies the component's gap.
* @prop --calcite-action-group-padding: [Deprecated] Use `--calcite-action-group-gap`. Specifies the component's padding.
*
*/

Expand Down
4 changes: 2 additions & 2 deletions packages/calcite-components/src/components/action-pad/action-pad.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-action-pad-corner-radius: Specifies the component's border radius.
* @prop --calcite-action-pad-expanded-max-width: Specifies the component's maximum width when `expanded` and the `layout` is `"vertical"`.
* @prop --calcite-action-pad-items-space: Specifies the space between slotted components in the component.
* @prop --calcite-action-pad-expanded-max-width: When `layout` is `"vertical"`, specifies the component's maximum width when `expanded`.
* @prop --calcite-action-pad-items-space: Specifies the component's space between slotted components.
*/

:host {
Expand Down
4 changes: 2 additions & 2 deletions packages/calcite-components/src/components/action/action.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-action-indicator-color: Specifies the component's indicator color.
* @prop --calcite-action-background-color: Specifies the component's background color.
* @prop --calcite-action-background-color: Specifies the component's background color.
* @prop --calcite-action-background-color-hover: Specifies the component's background color when hovered or focused.
* @prop --calcite-action-background-color-pressed: Specifies the component's background color when active.
* @prop --calcite-action-corner-radius: Specifies the component's corner radius.
* @prop --calcite-action-corner-radius-end-end: Specifies the component's corner radius end end.
* @prop --calcite-action-corner-radius-end-start: Specifies the component's corner radius end start.
* @prop --calcite-action-corner-radius-start-end: Specifies the component's corner radius start end.
* @prop --calcite-action-corner-radius-start-start: Specifies the component's corner radius start start.
* @prop --calcite-action-text-color: Specifies the text color of the component.
* @prop --calcite-action-text-color: Specifies the component's text color.
* @prop --calcite-action-text-color-pressed: Specifies the component's text color when hovered.
*/

Expand Down
6 changes: 3 additions & 3 deletions packages/calcite-components/src/components/avatar/avatar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-avatar-corner-radius: defines the corner radius of the component.
* @prop --calcite-avatar-color: defines the icon or initial color in the component.
* @prop --calcite-avatar-background-color: defines the background color of the component.
* @prop --calcite-avatar-corner-radius: Specifies the component's corner radius.
* @prop --calcite-avatar-color: Specifies the component's icon or initial color.
* @prop --calcite-avatar-background-color: Specifies the component's background color.
*
*/

Expand Down
4 changes: 2 additions & 2 deletions packages/calcite-components/src/components/card-group/card-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-card-group-gap: [Deprecated] Use --calcite-card-group-space. Specifies the gap between slotted components.
* @prop --calcite-card-group-space: Specifies the space between slotted components.
* @prop --calcite-card-group-gap: [Deprecated] Use `--calcite-card-group-space`. Specifies the gap between slotted elements.
* @prop --calcite-card-group-space: Specifies the space between slotted elements.
*/

:host {
Expand Down
30 changes: 15 additions & 15 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 @@ -3,21 +3,21 @@
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-card-accent-color-selected: Specifies the accent color of the component when `selected`.
* @prop --calcite-card-background-color: Specifies the background color of the component.
* @prop --calcite-card-border-color: Specifies the border color of the component.
* @prop --calcite-card-corner-radius: Specifies the corner radius of the component.
* @prop --calcite-card-selection-background-color-active: [Deprecated] Use --calcite-card-selection-background-color-press. Specifies the background color of the component's selection element when active.
* @prop --calcite-card-selection-background-color-hover: Specifies the background color of the component's selection element when hovered.
* @prop --calcite-card-selection-background-color-press: Specifies the background color of the component's selection element when active.
* @prop --calcite-card-selection-background-color-selected: [Deprecated] Use --calcite-card-background-color. Specifies the icon color of the component's selection element when `selected`.
* @prop --calcite-card-selection-background-color: [Deprecated] Use --calcite-card-background-color. Specifies the background color of the component's selection element.
* @prop --calcite-card-selection-color-hover: Specifies the color of the component's selection element when hovered or focused.
* @prop --calcite-card-selection-color: Specifies the color of the component's selection element.
* @prop --calcite-card-selection-icon-color-hover: [Deprecated] Use --calcite-card-selection-color-hover. Specifies the icon color of the component's selection element when hovered.
* @prop --calcite-card-selection-icon-color-selected: [Deprecated] Use --calcite-card-accent-color-selected. Specifies the icon color of the component's selection element when `selected`.
* @prop --calcite-card-selection-icon-color: [Deprecated] Use --calcite-card-selection-color. Specifies the icon color of the component's selection element.
* @prop --calcite-card-shadow: Specifies the shadow of the component.
* @prop --calcite-card-accent-color-selected: Specifies the component's accent color when `selected`.
* @prop --calcite-card-background-color: Specifies the component's background color.
* @prop --calcite-card-border-color: Specifies the component's border color.
* @prop --calcite-card-corner-radius: Specifies the component's corner radius.
* @prop --calcite-card-selection-background-color-active: [Deprecated] Use `--calcite-card-selection-background-color-press`. Specifies the component's selection element background color when active.
* @prop --calcite-card-selection-background-color-hover: Specifies the component's selection element background color when hovered.
* @prop --calcite-card-selection-background-color-press: Specifies the component's selection element background color when active.
* @prop --calcite-card-selection-background-color-selected: [Deprecated] Use `--calcite-card-background-color`. Specifies the component's selection element icon color when `selected`.
* @prop --calcite-card-selection-background-color: [Deprecated] Use `--calcite-card-background-color`. Specifies the component's selection element background color.
* @prop --calcite-card-selection-color-hover: Specifies the component's selection element color when hovered or focused.
* @prop --calcite-card-selection-color: Specifies the component's selection element color.
* @prop --calcite-card-selection-icon-color-hover: [Deprecated] Use `--calcite-card-selection-color-hover`. Specifies the component's selection element icon color when hovered.
* @prop --calcite-card-selection-icon-color-selected: [Deprecated] Use `--calcite-card-accent-color-selected`. Specifies the component's selection element icon color when `selected`.
* @prop --calcite-card-selection-icon-color: [Deprecated] Use `--calcite-card-selection-color`. Specifies the component's selection element icon color.
* @prop --calcite-card-shadow: Specifies the component's shadow.
*
*/

Expand Down
16 changes: 8 additions & 8 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 @@ -3,14 +3,14 @@
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-chip-background-color: Specifies the background color of the component.
* @prop --calcite-chip-border-color: Specifies the border color of the component.
* @prop --calcite-chip-corner-radius: Specifies the corner radius of the component.
* @prop --calcite-chip-text-color: Specifies the text color of the component.
* @prop --calcite-chip-icon-color: Specifies the icon color of the component.
* @prop --calcite-chip-close-icon-color: Specifies the icon color of the close element of the component.
* @prop --calcite-chip-select-icon-color: Specifies the icon color of the selection element of the component.
* @prop --calcite-chip-select-icon-color-pressed: Specifies the icon color of the selection element of the component when active.
* @prop --calcite-chip-background-color: Specifies the component's background color.
* @prop --calcite-chip-border-color: Specifies the component's border color.
* @prop --calcite-chip-corner-radius: Specifies the component's corner radius.
* @prop --calcite-chip-text-color: Specifies the component's text color.
* @prop --calcite-chip-icon-color: Specifies the component's icon color.
* @prop --calcite-chip-close-icon-color: Specifies the component's close element icon color.
* @prop --calcite-chip-select-icon-color: Specifies the component's selection element icon color.
* @prop --calcite-chip-select-icon-color-pressed: Specifies the component's selection element icon color when active.
*
*/

Expand Down
4 changes: 2 additions & 2 deletions 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,8 +3,8 @@
*
* These properties can be overridden using the component's tag as selector.
*
* @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`.
* @prop --calcite-ui-icon-color: [Deprecated] Use `--calcite-icon-color`. Specifies the component's color. Defaults to current color.
* @prop --calcite-icon-color: Specifies the component's color. Defaults to current color.
*/

:host {
Expand Down
10 changes: 5 additions & 5 deletions packages/calcite-components/src/components/popover/popover.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-popover-background-color: Specifies the background color of the component.
* @prop --calcite-popover-border-color: Specifies the border color of the component.
* @prop --calcite-popover-corner-radius: Specifies the corner radius of the component.
* @prop --calcite-popover-text-color: Specifies the text color of the component.
* @prop --calcite-popover-z-index: Sets the z-index value for the component.
* @prop --calcite-popover-background-color: Specifies the component's background color.
* @prop --calcite-popover-border-color: Specifies the component's border color.
* @prop --calcite-popover-corner-radius: Specifies the component's corner radius.
* @prop --calcite-popover-text-color: Specifies the component's text color.
* @prop --calcite-popover-z-index: Specifies the component's z-index value.
*/

:host {
Expand Down
6 changes: 3 additions & 3 deletions packages/calcite-components/src/components/progress/progress.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-progress-background-color: Defines the background color of the component.
* @prop --calcite-progress-fill-color: Defines the fill color of the progress bar.
* @prop --calcite-progress-text-color: Defines the text color of the component.
* @prop --calcite-progress-background-color: Specifies the component's background color.
* @prop --calcite-progress-fill-color: Specifies the component's fill color.
* @prop --calcite-progress-text-color: Specifies the component's text color.
*/

@import "../../assets/styles/animation";
Expand Down
18 changes: 9 additions & 9 deletions packages/calcite-components/src/components/text-area/text-area.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,17 @@
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-text-area-background-color: Specifies the background color of the component.
* @prop --calcite-text-area-border-color: Specifies the border color of the text area.
* @prop --calcite-text-area-character-limit-text-color: Specifies the color of the character limit text displayed in footer of the component.
* @prop --calcite-text-area-background-color: Specifies the component's background color.
* @prop --calcite-text-area-border-color: Specifies the component's text area border color.
* @prop --calcite-text-area-character-limit-text-color: Specifies the color of the character limit text displayed in the footer of the component.
* @prop --calcite-text-area-divider-color: Specifies the color of the divider between the text area and footer.
* @prop --calcite-text-area-font-size: Specifies the font size of the text area and footer.
* @prop --calcite-text-area-max-height: Specifies the maximum height of the text area in the component.
* @prop --calcite-text-area-min-height: Specifies the minimum height of the text area in the component.
* @prop --calcite-text-area-max-width: Specifies the maximum width of the text area in the component.
* @prop --calcite-text-area-min-width: Specifies the minimum width of the text area in the component.
* @prop --calcite-text-area-text-color: Specifies the color of text in the component.
* @prop --calcite-text-area-footer-border-color: Specifies the border color of the footer.
* @prop --calcite-text-area-max-height: Specifies the component's text area maximum height.
* @prop --calcite-text-area-min-height: Specifies the component's text area minimum height.
* @prop --calcite-text-area-max-width: Specifies the component's text area maximum width.
* @prop --calcite-text-area-min-width: Specifies the component's text area minimum width.
* @prop --calcite-text-area-text-color: Specifies the component's text color.
* @prop --calcite-text-area-footer-border-color: Specifies the footer's border color.
*/

:host {
Expand Down
Loading