diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.scss b/packages/calcite-components/src/components/accordion-item/accordion-item.scss index 69f139c4cd7..1575cd8bac9 100644 --- a/packages/calcite-components/src/components/accordion-item/accordion-item.scss +++ b/packages/calcite-components/src/components/accordion-item/accordion-item.scss @@ -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 { diff --git a/packages/calcite-components/src/components/action-bar/action-bar.scss b/packages/calcite-components/src/components/action-bar/action-bar.scss index 3ebe406552a..fcd10ee8cbd 100755 --- a/packages/calcite-components/src/components/action-bar/action-bar.scss +++ b/packages/calcite-components/src/components/action-bar/action-bar.scss @@ -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. */ diff --git a/packages/calcite-components/src/components/action-group/action-group.scss b/packages/calcite-components/src/components/action-group/action-group.scss index 53e584deddf..b8fb7617d8a 100755 --- a/packages/calcite-components/src/components/action-group/action-group.scss +++ b/packages/calcite-components/src/components/action-group/action-group.scss @@ -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. * */ diff --git a/packages/calcite-components/src/components/action-pad/action-pad.scss b/packages/calcite-components/src/components/action-pad/action-pad.scss index 2ba31ec0583..d5e1a1d3d28 100755 --- a/packages/calcite-components/src/components/action-pad/action-pad.scss +++ b/packages/calcite-components/src/components/action-pad/action-pad.scss @@ -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 { diff --git a/packages/calcite-components/src/components/action/action.scss b/packages/calcite-components/src/components/action/action.scss index c3da22ceaa8..1966054df1d 100755 --- a/packages/calcite-components/src/components/action/action.scss +++ b/packages/calcite-components/src/components/action/action.scss @@ -4,7 +4,7 @@ * 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. @@ -12,7 +12,7 @@ * @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. */ diff --git a/packages/calcite-components/src/components/avatar/avatar.scss b/packages/calcite-components/src/components/avatar/avatar.scss index bbee7267811..0b8d27057ed 100644 --- a/packages/calcite-components/src/components/avatar/avatar.scss +++ b/packages/calcite-components/src/components/avatar/avatar.scss @@ -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. * */ diff --git a/packages/calcite-components/src/components/card-group/card-group.scss b/packages/calcite-components/src/components/card-group/card-group.scss index 44f95abc855..86d69a3d1a6 100644 --- a/packages/calcite-components/src/components/card-group/card-group.scss +++ b/packages/calcite-components/src/components/card-group/card-group.scss @@ -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 { diff --git a/packages/calcite-components/src/components/card/card.scss b/packages/calcite-components/src/components/card/card.scss index ae58ceedd19..90370319493 100644 --- a/packages/calcite-components/src/components/card/card.scss +++ b/packages/calcite-components/src/components/card/card.scss @@ -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. * */ diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss index 1390e67fa25..e1ca4d68f02 100644 --- a/packages/calcite-components/src/components/chip/chip.scss +++ b/packages/calcite-components/src/components/chip/chip.scss @@ -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. * */ diff --git a/packages/calcite-components/src/components/icon/icon.scss b/packages/calcite-components/src/components/icon/icon.scss index be0af200edd..82649d010cd 100644 --- a/packages/calcite-components/src/components/icon/icon.scss +++ b/packages/calcite-components/src/components/icon/icon.scss @@ -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 { diff --git a/packages/calcite-components/src/components/popover/popover.scss b/packages/calcite-components/src/components/popover/popover.scss index ca6e5392b1d..4d749315d37 100644 --- a/packages/calcite-components/src/components/popover/popover.scss +++ b/packages/calcite-components/src/components/popover/popover.scss @@ -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 { diff --git a/packages/calcite-components/src/components/progress/progress.scss b/packages/calcite-components/src/components/progress/progress.scss index 50877482ce2..0526478d6d7 100644 --- a/packages/calcite-components/src/components/progress/progress.scss +++ b/packages/calcite-components/src/components/progress/progress.scss @@ -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"; diff --git a/packages/calcite-components/src/components/text-area/text-area.scss b/packages/calcite-components/src/components/text-area/text-area.scss index 28d60404b9c..5d2ef27d57c 100644 --- a/packages/calcite-components/src/components/text-area/text-area.scss +++ b/packages/calcite-components/src/components/text-area/text-area.scss @@ -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 {