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: update component token description for consistency #11062

Merged
merged 2 commits into from
Dec 17, 2024
Merged

docs: update component token description for consistency #11062

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
085c6c4
docs: component token description consistency
geospatialem Dec 16, 2024
b92d168
panel token description feedback
geospatialem Dec 17, 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
38 changes: 19 additions & 19 deletions packages/calcite-components/src/components/input/input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,30 +6,30 @@
* @prop --calcite-input-prefix-size: Specifies the component's prefix width, when present.
* @prop --calcite-input-suffix-size: Specifies the component's suffix width, when present.
*
* @prop --calcite-input-background-color: Specifies the background color of the component.
* @prop --calcite-input-border-color: Specifies the border color of the component.
* @prop --calcite-input-corner-radius: Specifies the corner radius of the component.
* @prop --calcite-input-shadow: Specifies the shadow of the component.

* @prop --calcite-input-icon-color: Specifies the icon color of the component.
* @prop --calcite-input-text-color: Specifies the text color of the component.
* @prop --calcite-input-placeholder-text-color: Specifies the color of placeholder text in the component.

* @prop --calcite-input-actions-background-color: Specifies the background color of Input's `clearable` and `number-button-type` elements.
* @prop --calcite-input-actions-background-color-hover: Specifies the background color of Input's `clearable` and `number-button-type` elements when hovered.
* @prop --calcite-input-actions-background-color-press: Specifies the background color of Input's `clearable` and `number-button-type` elements when pressed.
* @prop --calcite-input-actions-icon-color: Specifies the icon color of Input's `clearable` and `number-button-type` elements.
* @prop --calcite-input-actions-icon-color-hover: Specifies the icon color of Input's `clearable` and `number-button-type` elements when hovered.
* @prop --calcite-input-actions-icon-color-press: Specifies the icon color of Input's `clearable` and `number-button-type` elements when pressed.
* @prop --calcite-input-background-color: Specifies the component's background color.
* @prop --calcite-input-border-color: Specifies the component's border color.
* @prop --calcite-input-corner-radius: Specifies the component's corner radius.
* @prop --calcite-input-shadow: Specifies the shadow around the component.

* @prop --calcite-input-icon-color: Specifies the component's icon color.
* @prop --calcite-input-text-color: Specifies the component's text color.
* @prop --calcite-input-placeholder-text-color: Specifies the component's placeholder text color.

* @prop --calcite-input-actions-background-color: Specifies the background color of the component's `clearable` and `number-button-type` elements.
* @prop --calcite-input-actions-background-color-hover: Specifies the background color of the component's `clearable` and `number-button-type` elements when hovered.
* @prop --calcite-input-actions-background-color-press: Specifies the background color of the component's `clearable` and `number-button-type` elements when pressed.
* @prop --calcite-input-actions-icon-color: Specifies the icon color of the component's `clearable` and `number-button-type` elements.
* @prop --calcite-input-actions-icon-color-hover: Specifies the icon color of the component's `clearable` and `number-button-type` elements when hovered.
* @prop --calcite-input-actions-icon-color-press: Specifies the icon color of the component's `clearable` and `number-button-type` elements when pressed.

* @prop --calcite-input-loading-background-color: Specifies the background color of the `loading` element, when present.
* @prop --calcite-input-loading-fill-color: Specifies the fill color of the `loading` element, when present.

* @prop --calcite-input-prefix-background-color: Specifies the background color of the component's prefix, when present.
* @prop --calcite-input-prefix-text-color: Specifies the text color of the component's prefix, when present.
* @prop --calcite-input-prefix-background-color: Specifies the component's prefix background color, when present.
* @prop --calcite-input-prefix-text-color: Specifies the component's prefix text color, when present.

* @prop --calcite-input-suffix-background-color: Specifies the background color of the component's suffix, when present.
* @prop --calcite-input-suffix-text-color: Specifies the text color of the component's suffix, when present.
* @prop --calcite-input-suffix-background-color: Specifies the component's suffix background color, when present.
* @prop --calcite-input-suffix-text-color: Specifies the component's suffix text color, when present.
*
*/

Expand Down
4 changes: 2 additions & 2 deletions packages/calcite-components/src/components/list-item/list-item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@
* @prop --calcite-list-background-color: Specifies the component's background color.
* @prop --calcite-list-border-color: Specifies the component's border color.
* @prop --calcite-list-content-text-color: Specifies the content color.
* @prop --calcite-list-description-text-color: Specifies the description color.
* @prop --calcite-list-description-text-color: Specifies the `description` color.
* @prop --calcite-list-icon-color: Specifies the component's icon color.
* @prop --calcite-list-label-text-color: Specifies the label color.
* @prop --calcite-list-label-text-color: Specifies the `label` color.
* @prop --calcite-list-selection-border-color: Specifies the component's selection border color.
*/

Expand Down
1 change: 0 additions & 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 @@ -5,7 +5,6 @@
* @prop --calcite-navigation-background-color: Specifies the component's background color.
* @prop --calcite-navigation-logo-heading-text-color: Specifies the component's default color for heading text.
* @prop --calcite-navigation-logo-text-color: Specifies the component's default color for icon and description text.
*
*/

:host {
Expand Down
8 changes: 4 additions & 4 deletions 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 @@ -4,11 +4,11 @@
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-navigation-accent-color: Specifies the components's border color when `active`.
* @prop --calcite-navigation-user-avatar-corner-radius: Specifies the corner radius of avatar.
* @prop --calcite-navigation-user-avatar-color: Specifies the icon color of avatar.
* @prop --calcite-navigation-user-avatar-corner-radius: Specifies the component's avatar corner radius.
* @prop --calcite-navigation-user-avatar-color: Specifies the component's avatar icon color.
* @prop --calcite-navigation-background-color: Specifies the component's background color.
* @prop --calcite-navigation-user-full-name-text-color: Specifies the component's full name text color.
* @prop --calcite-navigation-user-name-text-color: Specifies the component's username text color.
* @prop --calcite-navigation-user-full-name-text-color: Specifies the component's `fullName` text color.
* @prop --calcite-navigation-user-name-text-color: Specifies the component's `username` text color.
*
*/

Expand Down
4 changes: 2 additions & 2 deletions packages/calcite-components/src/components/navigation/navigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
*
* @prop --calcite-navigation-width: Specifies the width of the component's content area.
* @prop --calcite-navigation-background: [Deprecated] Use `--calcite-navigation-background-color`. Specifies the background color of the component.
* @prop --calcite-navigation-background-color: Specifies component's background color.
* @prop --calcite-navigation-border-color: Specifies the border color of the component.
* @prop --calcite-navigation-background-color: Specifies the component's background color.
* @prop --calcite-navigation-border-color: Specifies the component's border color.
*/

@include base-component();
Expand Down
24 changes: 12 additions & 12 deletions packages/calcite-components/src/components/panel/panel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,29 @@
*
* These properties can be overridden using the component's tag as selector.

* @prop --calcite-panel-corner-radius: Specifies the corner radius of the component.
* @prop --calcite-panel-corner-radius: Specifies the component's corner radius.
* @prop --calcite-panel-heading-text-color: Specifies the text color of the component's `heading`.
* @prop --calcite-panel-description-text-color: Specifies the text color of the component's `description`.
* @prop --calcite-panel-border-color: Specifies the border color of the component.
* @prop --calcite-panel-border-color: Specifies the component's border color.

* @prop --calcite-panel-background-color: Specifies the background color of the component.
* @prop --calcite-panel-background-color: Specifies the component's background color.
* @prop --calcite-panel-header-background-color: Specifies the background color of the component's footer.
geospatialem marked this conversation as resolved.
Show resolved Hide resolved
* @prop --calcite-panel-footer-background-color: Specifies the background color of the component's footer.

* @prop --calcite-panel-space: Specifies the padding of the component's `"unnamed (default)"` slot.
* @prop --calcite-panel-header-content-space: Specifies the padding of the `"header-content"` slot.
* @prop --calcite-panel-footer-space: Specifies the padding of the component's footer.

* @prop --calcite-action-background-color: Specifies the background color of the component's `closable`, `collapsible`, and `back` Calcite Action components. Will apply to any slotted Calcite Action components.
* @prop --calcite-action-background-color-hover: Specifies the background color of the component's `closable`, `collapsible`, and `back` Calcite Action components when hovered. Will apply to any slotted Calcite Action components.
* @prop --calcite-action-background-color-pressed: Specifies the background color of the component's `closable`, `collapsible`, and `back` Calcite Action components when pressed. Will apply to any slotted Calcite Action components.
* @prop --calcite-action-text-color-hover: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` Calcite Action components when hovered. Will apply to any slotted Calcite Action components.
* @prop --calcite-action-text-color-pressed: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` Calcite Action components when pressed. Will apply to any slotted Calcite Action components.
* @prop --calcite-popover-border-color: Specifies the border color of the component's internally rendered Calcite Popover component, which is rendered within a Calcite Action Menu when slotted Calcite Actions are present in the `header-actions-end` slot. Will apply to any slotted Calcite Popover components.
* @prop --calcite-action-background-color: Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s. Applies to any slotted `calcite-action`s.
* @prop --calcite-action-background-color-hover: Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s.
* @prop --calcite-action-background-color-pressed: Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s.
* @prop --calcite-action-text-color-hover: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s.
* @prop --calcite-action-text-color-pressed: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s.
* @prop --calcite-popover-border-color: Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s.

* @prop --calcite-panel-content-space: [Deprecated] Specifies the padding of the component's content. Use `--calcite-panel-space` instead.
* @prop --calcite-panel-footer-padding: [Deprecated] Specifies the padding of the component's footer. Use `--calcite-panel-footer-space` instead.
* @prop --calcite-panel-header-border-block-end: [Deprecated] Specifies the component header's block end border. Use `--calcite-panel-border-color` instead.
* @prop --calcite-panel-content-space: [Deprecated] Use `--calcite-panel-space` instead. Specifies the padding of the component's content.
* @prop --calcite-panel-footer-padding: [Deprecated] Use `--calcite-panel-footer-space` instead. Specifies the padding of the component's footer.
* @prop --calcite-panel-header-border-block-end: [Deprecated] Use `--calcite-panel-border-color` instead. Specifies the component header's block end border.
*/

:host {
Expand Down
10 changes: 5 additions & 5 deletions packages/calcite-components/src/components/tooltip/tooltip.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-tooltip-background-color: Specifies the background color of the component.
* @prop --calcite-tooltip-border-color: Specifies the border color of the component.
* @prop --calcite-tooltip-corner-radius: Specifies the corner radius of the component.
* @prop --calcite-tooltip-text-color: Specifies the text color of the component.
* @prop --calcite-tooltip-z-index: Sets the z-index value for the component.
* @prop --calcite-tooltip-background-color: Specifies the component's background color.
* @prop --calcite-tooltip-border-color: Specifies the component's border color.
* @prop --calcite-tooltip-corner-radius: Specifies the component's corner radius.
* @prop --calcite-tooltip-text-color: Specifies the component's text color.
* @prop --calcite-tooltip-z-index: Specifies the z-index value for the component.
*/

:host {
Expand Down
Loading