diff --git a/projects/angular/src/emphasis/STYLES.md b/projects/angular/src/emphasis/STYLES.md index 8aecb6c8f9..3c6a8eeffa 100644 --- a/projects/angular/src/emphasis/STYLES.md +++ b/projects/angular/src/emphasis/STYLES.md @@ -2,30 +2,37 @@ ## CSS Custom Properties -| CSS Custom Property | Description | -| ------------------------------- | ------------------------------------------------------------ | -| --clr-badge-background-color | Not used | -| --clr-badge-color | Not used | -| --clr-badge-info-bg-color | Info badge background color | -| --clr-badge-info-color | Info badge text color | -| --clr-badge-success-bg-color | Success badge background color | -| --clr-badge-success-color | Success badge text color | -| --clr-badge-warning-bg-color | Warning badge background color | -| --clr-badge-warning-color | Warning badge text color | -| --clr-badge-danger-bg-color | Danger badge background color | -| --clr-badge-danger-color | Danger badge text color | -| --clr-badge-gray-bg-color | Gray badge background color | -| --clr-badge-gray-color | Gray badge text color | -| --clr-badge-purple-bg-color | Purple badge background color | -| --clr-badge-purple-color | Purple badge text color | -| --clr-badge-blue-bg-color | Blue badge background color | -| --clr-badge-blue-color | Blue badge text color | -| --clr-badge-orange-bg-color | Orange badge background color | -| --clr-badge-orange-color | Orange badge text color | -| --clr-badge-light-blue-bg-color | Light-blue badge background color | -| --clr-badge-light-blue-color | Light-blue badge text color | -| --clr-badge-font-color-light | Default, gray, purple, blue and `:visited` badges text color | -| --clr-badge-font-color-dark | Orange, light-blue badges text color | +| CSS Custom Property | Description | +| ------------------------------- | --------------------------------- | +| --clr-badge-background-color | Background color | +| --clr-badge-color | Font color | +| --clr-badge-info-bg-color | Info badge background color | +| --clr-badge-info-color | Info badge text color | +| --clr-badge-success-bg-color | Success badge background color | +| --clr-badge-success-color | Success badge text color | +| --clr-badge-warning-bg-color | Warning badge background color | +| --clr-badge-warning-color | Warning badge text color | +| --clr-badge-danger-bg-color | Danger badge background color | +| --clr-badge-danger-color | Danger badge text color | +| --clr-badge-gray-bg-color | Gray badge background color | +| --clr-badge-gray-color | Gray badge text color | +| --clr-badge-purple-bg-color | Purple badge background color | +| --clr-badge-purple-color | Purple badge text color | +| --clr-badge-blue-bg-color | Blue badge background color | +| --clr-badge-blue-color | Blue badge text color | +| --clr-badge-orange-bg-color | Orange badge background color | +| --clr-badge-orange-color | Orange badge text color | +| --clr-badge-light-blue-bg-color | Light-blue badge background color | +| --clr-badge-light-blue-color | Light-blue badge text color | +| --clr-badge-padding | Padding | +| --clr-badge-height | Height | +| --clr-badge-min-width | Min width | +| --clr-badge-border-radius | Border radius | +| --clr-badge-font-size | Font size | +| --clr-badge-font-weight | Font weight | +| --clr-badge-letter-spacing | Letter spacing | +| --clr-badge-line-height | Line height | +| --clr-badge-font-family | Font family | ## CSS Classes @@ -41,3 +48,55 @@ | badge-blue | Blue badge | | badge-orange | Orange badge | | badge-light-blue | Light-blue badge | + +# Label + +## CSS Properties + +| CSS Property Name | Description | +| ------------------------------------ | -------------------------------------- | +| --clr-label-font-color-light | Font color for light labels | +| --clr-label-font-color-dark | Font color for dark labels | +| --clr-label-default-border-color | Default border color for labels | +| --clr-label-bg-hover-color | Background color on hover for labels | +| --clr-label-gray-bg-color | Not used | +| --clr-label-gray-color | Not used | +| --clr-label-purple-bg-color | Background color for purple labels | +| --clr-label-purple-color | Font color for purple labels | +| --clr-label-blue-bg-color | Background color for blue labels | +| --clr-label-blue-color | Font color for blue labels | +| --clr-label-orange-bg-color | Background color for orange labels | +| --clr-label-orange-color | Font color for orange labels | +| --clr-label-light-blue-bg-color | Background color for light blue labels | +| --clr-label-light-blue-color | Font color for light blue labels | +| --clr-label-info-bg-color | Background color for info labels | +| --clr-label-info-font-color | Font color for info labels | +| --clr-label-info-border-color | Border color for info labels | +| --clr-label-success-bg-color | Background color for success labels | +| --clr-label-success-font-color | Font color for success labels | +| --clr-label-success-border-color | Border color for success labels | +| --clr-label-warning-bg-color | Background color for warning labels | +| --clr-label-warning-font-color | Font color for warning labels | +| --clr-label-warning-border-color | Border color for warning labels | +| --clr-label-danger-bg-color | Background color for danger labels | +| --clr-label-danger-font-color | Font color for danger labels | +| --clr-label-danger-border-color | Border color for danger labels | +| --clr-label-font-size | Font size for labels | +| --clr-label-font-weight | Font weight for label | +| --clr-label-letter-spacing | Letter spacing for label | +| --clr-label-border-radius | Border radius for label | +| --clr-label-padding | Padding for labels | +| --clr-label-gap-size | Gap size for labels | +| --clr-label-line-height | Line height for labels | +| --clr-label-clickable-font-size | Font size for clickable labels | +| --clr-label-clickable-font-weight | Font weight for clickable labels | +| --clr-label-clickable-letter-spacing | Letter spacing for clickable labels | +| --clr-label-clickable-line-height | Line Height for clickable labels | + +## Classes + +| Class Name | Description | +| ------------- | ------------------------------- | +| label | Default label class | +| label- | Label class with specific color | +| clickable | Clickable label class | diff --git a/projects/angular/src/emphasis/_badges.clarity.scss b/projects/angular/src/emphasis/_badges.clarity.scss index 88cf3b0884..4853e1cb0f 100644 --- a/projects/angular/src/emphasis/_badges.clarity.scss +++ b/projects/angular/src/emphasis/_badges.clarity.scss @@ -58,19 +58,53 @@ vertical-align: middle; align-items: center; justify-content: center; - min-width: variables.$clr_baselineRem_0_625; - background: label-variables.getLabelColor(gray, bg-color); - height: variables.$clr_baselineRem_0_625; - line-height: normal; - border-radius: variables.$clr_baselineRem_0_416; - font-size: variables.$clr_baselineRem_0_416; - padding: 0 variables.$clr_baselineRem_4px; + @include mixins.css-var( + min-width, + clr-badge-min-width, + variables.$clr_baselineRem_0_625, + variables.$clr-use-custom-properties + ); + @include mixins.css-var( + background-color, + clr-badge-background-color, + label-variables.getLabelColor(gray, bg-color), + variables.$clr-use-custom-properties + ); + @include mixins.css-var( + height, + clr-badge-height, + variables.$clr_baselineRem_0_625, + variables.$clr-use-custom-properties + ); + @include mixins.css-var( + border-radius, + clr-badge-border-radius, + variables.$clr_baselineRem_0_416, + variables.$clr-use-custom-properties + ); + + @include mixins.css-var( + font-size, + clr-badge-font-size, + variables.$clr_baselineRem_0_416, + variables.$clr-use-custom-properties + ); + @include mixins.css-var(font-weight, clr-badge-font-weight, inherit, variables.$clr-use-custom-properties); + @include mixins.css-var(letter-spacing, clr-badge-letter-spacing, inherit, variables.$clr-use-custom-properties); + @include mixins.css-var(line-height, clr-badge-line-height, normal, variables.$clr-use-custom-properties); + + @include mixins.css-var( + padding, + clr-badge-padding, + 0 variables.$clr_baselineRem_4px, + variables.$clr-use-custom-properties + ); margin-right: variables.$clr_baselineRem_0_25; white-space: nowrap; text-align: center; @include mixins.css-var( color, - clr-badge-font-color-light, + clr-badge-color, badges-variables.$clr-badge-font-color-light, variables.$clr-use-custom-properties ); @@ -78,7 +112,7 @@ &:visited { @include mixins.css-var( color, - clr-badge-font-color-light, + clr-badge-color, badges-variables.$clr-badge-font-color-light, variables.$clr-use-custom-properties ); diff --git a/projects/angular/src/emphasis/_labels.clarity.scss b/projects/angular/src/emphasis/_labels.clarity.scss index fad7cea221..46954ec26c 100644 --- a/projects/angular/src/emphasis/_labels.clarity.scss +++ b/projects/angular/src/emphasis/_labels.clarity.scss @@ -14,32 +14,30 @@ $cssVarBgColor: label-variables.getLabelColor($color, bg-color, 'css-var'); $sassVarTextColor: label-variables.getLabelColor($color, color); $cssVarTextColor: label-variables.getLabelColor($color, color, 'css-var'); + $cssVarBorderColor: label-variables.getLabelColor($color, border-color, 'css-var'); &.label-#{'' + $color}, &.label-#{$alias} { - border: label-variables.$clr-label-borderwidth solid; - @include mixins.css-var(border-color, $cssVarBgColor, $sassVarBgColor, variables.$clr-use-custom-properties); + @include mixins.css-var( + border-width, + clr-label-border-width, + label-variables.$clr-label-borderwidth, + variables.$clr-use-custom-properties + ); + border-style: solid; + @include mixins.css-var(border-color, $cssVarBorderColor, $sassVarBgColor, variables.$clr-use-custom-properties); + @include mixins.css-var(background-color, $cssVarBgColor, transparent, variables.$clr-use-custom-properties); } &.clickable.label-#{'' + $color} { - &:hover, &:active { - text-decoration: none; @include mixins.css-var( - background, - clr-label-bg-hover-color, - label-variables.$clr-label-bg-hover-color, + box-shadow, + clr-label-box-shadow, + 0 label-variables.$clr-label-borderwidth 0 0 $sassVarBgColor inset, variables.$clr-use-custom-properties ); } - - &:active { - // OldEdge/IE - box-shadow: 0 label-variables.$clr-label-borderwidth 0 0 $sassVarBgColor inset; - box-shadow: 0 label-variables.$clr-label-borderwidth 0 0 - var(mixins.css-variablize-string($cssVarBgColor), $sassVarBgColor) inset; - transform: translateY(0.5px); - } } &.label-#{'' + $color} > .badge { @@ -72,7 +70,13 @@ label-variables.getLabelColor($status, color), variables.$clr-use-custom-properties ); - border: label-variables.$clr-label-borderwidth solid; + @include mixins.css-var( + border-width, + clr-label-border-width, + label-variables.$clr-label-borderwidth, + variables.$clr-use-custom-properties + ); + border-style: solid; @include mixins.css-var( border-color, label-variables.getLabelColor($status, border-color, 'css-var'), @@ -80,6 +84,20 @@ variables.$clr-use-custom-properties ); } + &.label-#{'' + $status} > .badge { + @include mixins.css-var( + background, + badges-variables.getBadgeColor($status, bg-color, 'css-var'), + badges-variables.getBadgeColor($status, bg-color), + variables.$clr-use-custom-properties + ); + @include mixins.css-var( + color, + badges-variables.getBadgeColor($status, color, 'css-var'), + badges-variables.getBadgeColor($status, color), + variables.$clr-use-custom-properties + ); + } } @include meta.load-css('properties.label'); @@ -111,27 +129,49 @@ label-variables.$clr-label-letter-spacing, variables.$clr-use-custom-properties ); + @include mixins.css-var( + line-height, + clr-label-line-height, + // line-height needed to be adjusted to force center alignment + label-variables.$clr-label-font-size + variables.$clr_baselineRem_1px, + variables.$clr-use-custom-properties + ); - // line-height needed to be adjusted to force center alignment - line-height: label-variables.$clr-label-font-size + variables.$clr_baselineRem_1px; display: inline-flex; justify-content: center; align-items: center; - padding: 0 label-variables.$clr-label-padding-left-right 0; + @include mixins.css-var( + padding, + clr-label-padding, + 0 label-variables.$clr-label-padding-left-right 0, + variables.$clr-use-custom-properties + ); + @include mixins.css-var(gap, clr-label-gap-size, 0, variables.$clr-use-custom-properties); @include mixins.css-var( border-radius, clr-label-border-radius, variables.$clr_baselineRem_0_5, variables.$clr-use-custom-properties ); - border: label-variables.$clr-label-borderwidth solid; + @include mixins.css-var( + border-width, + clr-label-border-width, + label-variables.$clr-label-borderwidth, + variables.$clr-use-custom-properties + ); + border-style: solid; @include mixins.css-var( border-color, clr-label-default-border-color, label-variables.$clr-label-default-border-color, variables.$clr-use-custom-properties ); - height: variables.$clr_baselineRem_0_875; + @include mixins.css-var( + height, + clr-label-height, + variables.$clr_baselineRem_0_875, + variables.$clr-use-custom-properties + ); margin: 0 variables.$clr_baselineRem_0_25 $label-nudge-for-vertical-alignment 0; white-space: nowrap; @include mixins.css-var( @@ -157,24 +197,75 @@ } &.clickable { - &:hover, - &:active { + @include mixins.css-var( + font-size, + clr-label-clickable-font-size, + label-variables.$clr-label-font-size, + variables.$clr-use-custom-properties + ); + @include mixins.css-var( + font-weight, + clr-label-clickable-font-weight, + label-variables.$clr-label-font-weight, + variables.$clr-use-custom-properties + ); + @include mixins.css-var( + letter-spacing, + clr-label-clickable-letter-spacing, + label-variables.$clr-label-letter-spacing, + variables.$clr-use-custom-properties + ); + @include mixins.css-var( + line-height, + clr-label-clickable-line-height, + // line-height needed to be adjusted to force center alignment + label-variables.$clr-label-font-size + variables.$clr_baselineRem_1px, + variables.$clr-use-custom-properties + ); + } + + &.clickable:not(.disabled) { + &:hover { + text-decoration: none; @include mixins.css-var( background, clr-label-bg-hover-color, label-variables.$clr-label-bg-hover-color, variables.$clr-use-custom-properties ); + @include mixins.css-var( + color, + clr-label-hover-color, + label-variables.$clr-label-font-color-light, + variables.$clr-use-custom-properties + ); } &:active { - $mySassShadow: label-variables.getLabelColor(gray, bg-color); - // OldEdge/IE - box-shadow: 0 variables.$clr_baselineRem_1px 0 0 label-variables.getLabelColor(gray, bg-color) inset; - box-shadow: 0 variables.$clr_baselineRem_1px 0 0 - var(mixins.css-variablize-string(label-variables.getLabelColor(gray, bg-color, 'css-var')), $mySassShadow) - inset; - transform: translateY(0.5px); + @include mixins.css-var( + color, + clr-label-active-color, + label-variables.$clr-label-font-color-light, + variables.$clr-use-custom-properties + ); + @include mixins.css-var( + background, + clr-label-bg-active-color, + label-variables.$clr-label-bg-hover-color, + variables.$clr-use-custom-properties + ); + @include mixins.css-var( + box-shadow, + clr-label-box-shadow, + 0 variables.$clr_baselineRem_1px 0 0 label-variables.getLabelColor(gray, bg-color) inset, + variables.$clr-use-custom-properties + ); + @include mixins.css-var( + transform, + clr-label-pressed-transform, + translateY(0.5px), + variables.$clr-use-custom-properties + ); } } @@ -193,6 +284,38 @@ margin: 0 (-1 * variables.$clr_baselineRem_0_375) 0 variables.$clr_baselineRem_0_25; //-0.375 is -9px. 12px initial label padding plus a negative margin of 9 } + + &.disabled, + &:disabled { + cursor: not-allowed; + pointer-events: none; + @include mixins.css-var( + background, + clr-label-bg-disabled-color, + transparent, + variables.$clr-use-custom-properties + ); + @include mixins.css-var( + color, + clr-label-disabled-color, + label-variables.$clr-label-font-color-light, + variables.$clr-use-custom-properties + ); + @include mixins.css-var( + border-color, + clr-label-disabled-border-color, + label-variables.$clr-label-default-border-color, + variables.$clr-use-custom-properties + ); + .badge { + @include mixins.css-var( + background, + clr-label-disabled-color, + label-variables.getLabelColor(gray, bg-color), + variables.$clr-use-custom-properties + ); + } + } } @include mixins.fixForFirefox() { diff --git a/projects/angular/src/emphasis/_properties.badges.scss b/projects/angular/src/emphasis/_properties.badges.scss index 3bd1c84b47..d05a561d6f 100644 --- a/projects/angular/src/emphasis/_properties.badges.scss +++ b/projects/angular/src/emphasis/_properties.badges.scss @@ -10,7 +10,7 @@ @if variables.$clr-use-custom-properties == true { :root { --clr-badge-background-color: var(--clr-color-neutral-600); - --clr-badge-color: var(--clr-color-on-neutral-600); + --clr-badge-color: var(--clr-color-neutral-0); // START: deprecated for removal in 4.0 --clr-badge-info-bg-color: var(--clr-color-action-800); @@ -23,11 +23,11 @@ --clr-badge-danger-color: var(--clr-color-neutral-0); --clr-badge-gray-bg-color: var(--clr-color-neutral-600); - --clr-badge-gray-color: var(--clr-badge-font-color-light); + --clr-badge-gray-color: var(--clr-color-neutral-0); --clr-badge-purple-bg-color: var(--clr-color-secondary-action-500); - --clr-badge-purple-color: var(--clr-badge-font-color-light); + --clr-badge-purple-color: var(--clr-color-neutral-0); --clr-badge-blue-bg-color: var(--clr-color-action-800); - --clr-badge-blue-color: var(--clr-badge-font-color-light); + --clr-badge-blue-color: var(--clr-color-neutral-0); --clr-badge-orange-bg-color: var(--clr-color-warning-1000); --clr-badge-orange-color: var(--clr-color-neutral-0); --clr-badge-light-blue-bg-color: var(--clr-color-action-500); diff --git a/projects/angular/src/emphasis/_properties.label.scss b/projects/angular/src/emphasis/_properties.label.scss index de983e2a4a..06c745a46f 100644 --- a/projects/angular/src/emphasis/_properties.label.scss +++ b/projects/angular/src/emphasis/_properties.label.scss @@ -5,16 +5,22 @@ */ @use '../utils/mixins'; @use '../utils/variables/variables'; +@use './variables.label' as label-variables; @include mixins.exports('label.properties') { @if variables.$clr-use-custom-properties == true { :root { + --clr-label-padding: 0 #{label-variables.$clr-label-padding-left-right} 0; + --clr-label-gap-size: 0; + // COLOR // Usage: // - ./_labels.clarity.scss --clr-label-font-color-light: var(--clr-color-neutral-1000); --clr-label-font-color-dark: var(--clr-color-neutral-1000); --clr-label-default-border-color: var(--clr-color-neutral-600); + --clr-label-active-color: var(--clr-label-font-color-light); + --clr-label-hover-color: var(--clr-label-font-color-light); // TYPOGRAPHIC STYLES // Usage: @@ -22,26 +28,38 @@ --clr-label-font-size: #{variables.$clr-p7-font-size}; --clr-label-font-weight: #{variables.$clr-p7-font-weight}; --clr-label-letter-spacing: #{variables.$clr-p7-letter-spacing}; + --clr-label-line-height: calc(#{label-variables.$clr-label-font-size} + #{variables.$clr_baselineRem_1px}); + + --clr-label-clickable-font-size: var(--clr-label-font-size); + --clr-label-clickable-font-weight: var(--clr-label-font-weight); + --clr-label-clickable-letter-spacing: var(--clr-label-letter-spacing); + --clr-label-clickable-line-height: var(--clr-label-line-height); --clr-label-border-radius: #{variables.$clr_baselineRem_0_5}; + --clr-label-border-width: #{label-variables.$clr-label-borderwidth}; // Usage: ./_labels.clarity.scss --clr-label-bg-hover-color: var(--clr-color-neutral-200); // START: deprecated for removal in 4.0 - --clr-label-gray-bg-color: var(--clr-color-neutral-600); + --clr-label-gray-bg-color: transparent; + --clr-label-gray-border-color: var(--clr-color-neutral-600); --clr-label-gray-color: var(--clr-label-font-color-light); - --clr-label-purple-bg-color: var(--clr-color-secondary-action-500); + --clr-label-purple-bg-color: transparent; + --clr-label-purple-border-color: var(--clr-color-secondary-action-500); --clr-label-purple-color: var(--clr-label-font-color-light); - --clr-label-blue-bg-color: var(--clr-color-action-800); + --clr-label-blue-bg-color: transparent; + --clr-label-blue-border-color: var(--clr-color-action-800); --clr-label-blue-color: var(--clr-label-font-color-light); - --clr-label-orange-bg-color: var(--clr-color-warning-1000); + --clr-label-orange-bg-color: transparent; + --clr-label-orange-border-color: var(--clr-color-warning-1000); --clr-label-orange-color: var(--clr-label-font-color-dark); - --clr-label-light-blue-bg-color: var(--clr-color-action-500); + --clr-label-light-blue-bg-color: transparent; + --clr-label-light-blue-border-color: var(--clr-color-action-500); --clr-label-light-blue-color: var(--clr-label-font-color-dark); --clr-label-info-bg-color: var(--clr-color-action-50); diff --git a/projects/angular/src/forms/combobox/_combobox.clarity.scss b/projects/angular/src/forms/combobox/_combobox.clarity.scss index f8f4681912..6b76425ddc 100644 --- a/projects/angular/src/forms/combobox/_combobox.clarity.scss +++ b/projects/angular/src/forms/combobox/_combobox.clarity.scss @@ -292,7 +292,12 @@ ); font-size: variables.$clr-typography-xxsmalltext; font-weight: variables.$clr-font-weight-regular; - padding: 0 variables.$clr_baselineRem_8px 0 variables.$clr_baselineRem_4px; + @include mixins.css-var( + padding, + clr-combobox-pill-content-padding, + 0 variables.$clr_baselineRem_8px 0 variables.$clr_baselineRem_4px, + variables.$clr-use-custom-properties + ); } cds-icon, diff --git a/projects/angular/src/forms/common/STYLES.md b/projects/angular/src/forms/common/STYLES.md deleted file mode 100644 index 7f57bbdfc5..0000000000 --- a/projects/angular/src/forms/common/STYLES.md +++ /dev/null @@ -1,44 +0,0 @@ -# Label - -## CSS Properties - -| CSS Property Name | Description | -| -------------------------------- | --------------------------------------- | -| --clr-label-font-color-light | Font color for light labels. | -| --clr-label-font-color-dark | Font color for dark labels. | -| --clr-label-default-border-color | Default border color for labels. | -| --clr-label-bg-hover-color | Background color on hover for labels. | -| --clr-label-gray-bg-color | Not used. | -| --clr-label-gray-color | Not used. | -| --clr-label-purple-bg-color | Background color for purple labels. | -| --clr-label-purple-color | Font color for purple labels. | -| --clr-label-blue-bg-color | Background color for blue labels. | -| --clr-label-blue-color | Font color for blue labels. | -| --clr-label-orange-bg-color | Background color for orange labels. | -| --clr-label-orange-color | Font color for orange labels. | -| --clr-label-light-blue-bg-color | Background color for light blue labels. | -| --clr-label-light-blue-color | Font color for light blue labels. | -| --clr-label-info-bg-color | Background color for info labels. | -| --clr-label-info-font-color | Font color for info labels. | -| --clr-label-info-border-color | Border color for info labels. | -| --clr-label-success-bg-color | Background color for success labels. | -| --clr-label-success-font-color | Font color for success labels. | -| --clr-label-success-border-color | Border color for success labels. | -| --clr-label-warning-bg-color | Background color for warning labels. | -| --clr-label-warning-font-color | Font color for warning labels. | -| --clr-label-warning-border-color | Border color for warning labels. | -| --clr-label-danger-bg-color | Background color for danger labels. | -| --clr-label-danger-font-color | Font color for danger labels. | -| --clr-label-danger-border-color | Border color for danger labels. | -| --clr-label-font-size | Not used. | -| --clr-label-font-weight | Not used. | -| --clr-label-letter-spacing | Not used. | -| --clr-label-border-radius | Not used. | - -## Classes - -| Class Name | Description | -| ------------- | ------------------------------- | -| label | Default label class | -| label- | Label class with specific color | -| clickable | Clickable label class | diff --git a/projects/angular/src/utils/_components.clarity.scss b/projects/angular/src/utils/_components.clarity.scss index 21c34648cb..e304ddba21 100644 --- a/projects/angular/src/utils/_components.clarity.scss +++ b/projects/angular/src/utils/_components.clarity.scss @@ -50,14 +50,6 @@ //depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, layers.clarity @forward '../popover/dropdown/dropdown.clarity'; -//Badges -// depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, typography.clarity -@forward '../emphasis/badges.clarity'; - -//Labels -// depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, typography.clarity, badges.clarity -@forward '../emphasis/labels.clarity'; - //Login //depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, icons.clarity @forward '../layout/login.clarity'; @@ -78,6 +70,14 @@ @forward '../layout/vertical-nav/vertical-nav.clarity'; // depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity @forward '../layout/nav/responsive-nav.clarity'; // depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, layers.clarity +//Badges +// depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, typography.clarity +@forward '../emphasis/badges.clarity'; + +//Labels +// depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, typography.clarity, badges.clarity +@forward '../emphasis/labels.clarity'; + //Progress Bars //depends on variables.clarity, helpers.clarity, color.clarity, cards.clarity @forward '../progress/progress-bars/progress-bars.clarity'; diff --git a/projects/demo/src/app/labels/labels-clickable.demo.html b/projects/demo/src/app/labels/labels-clickable.demo.html index c26fa88787..4e83a25dc3 100644 --- a/projects/demo/src/app/labels/labels-clickable.demo.html +++ b/projects/demo/src/app/labels/labels-clickable.demo.html @@ -11,3 +11,13 @@ San Francisco Seattle +
+ + james@test.com + + + + jimmy@test.com + + +
diff --git a/projects/ui/src/shim.cds-core.scss b/projects/ui/src/shim.cds-core.scss index 9514c165cf..f8c61099fd 100644 --- a/projects/ui/src/shim.cds-core.scss +++ b/projects/ui/src/shim.cds-core.scss @@ -504,68 +504,130 @@ --clr-app-alert-success-pager-font-color: var(--cds-alias-typography-color-100, var(--cds-global-typography-color-100)); // New custom property /* Labels */ + --clr-label-padding: var(--cds-global-space-3) var(--cds-global-space-5); + --clr-label-gap-size: var(--cds-global-space-5); + --clr-label-box-shadow: 0; + + // ATM - remove and use as default or think a better way express clicked state + --clr-label-pressed-transform: translateY(var(--cds-global-space-2)); + + --clr-label-font-size: var(--clr-p6-font-size); + --clr-label-font-weight: var(--cds-global-typography-font-weight-regular); + --clr-label-letter-spacing: var(--clr-p6-letter-spacing); + --clr-label-line-height: var(--clr-p6-line-height); + --clr-label-font-color-light: var(--cds-alias-typography-color-500, var(--cds-global-typography-color-500)); + + --clr-label-clickable-font-size: var(--clr-label-font-size); + --clr-label-clickable-font-weight: var(--clr-label-font-weight); + --clr-label-clickable-letter-spacing: var(--clr-label-letter-spacing); + --clr-label-clickable-line-height: var(--clr-label-line-height); + + --clr-label-default-border-color: var(--cds-alias-utility-gray); + --clr-label-default-bg-color: var(--cds-alias-object-opacity-0); + + --clr-label-bg-hover-color: var(--cds-alias-object-interaction-background-hover); + --clr-label-hover-color: var(--cds-alias-object-interaction-color-hover); + --clr-label-bg-active-color: var(--cds-alias-object-interaction-background-active); + --clr-label-active-color: var(--cds-alias-object-interaction-color-active); + --clr-label-bg-disabled-color: var(--cds-alias-object-interaction-background-disabled); + --clr-label-disabled-color: var(--cds-alias-typography-disabled); + --clr-label-disabled-border-color: var(--cds-alias-utility-disabled, var(--cds-alias-object-interaction-color-disabled)); + + --clr-label-gray-bg-color: var(--cds-alias-object-opacity-0); + --clr-label-gray-border-color: var(--cds-alias-utility-gray); + --clr-label-gray-color: var(--cds-alias-typography-color-500, var(--cds-global-typography-color-500)); + + --clr-label-purple-bg-color: var(--cds-alias-object-opacity-0); + --clr-label-purple-border-color: var(--cds-alias-utility-violet); + --clr-label-purple-color: var(--cds-alias-typography-color-500, var(--cds-global-typography-color-500)); + + --clr-label-blue-bg-color: var(--cds-alias-object-opacity-0); + --clr-label-blue-border-color: var(--cds-alias-utility-dark-blue); + --clr-label-blue-color: var(--cds-alias-typography-color-500, var(--cds-global-typography-color-500)); + + --clr-label-orange-bg-color: var(--cds-alias-object-opacity-0); + --clr-label-orange-border-color: var(--cds-alias-utility-tangerine); + --clr-label-orange-color: var(--cds-alias-typography-color-500, var(--cds-global-typography-color-500)); + + --clr-label-light-blue-bg-color: var(--cds-alias-object-opacity-0); + --clr-label-light-blue-border-color: var(--cds-alias-utility-light-blue); + --clr-label-light-blue-color: var(--cds-alias-typography-color-500, var(--cds-global-typography-color-500)); + + --clr-label-info-bg-color: var(--cds-alias-utility-blue-tint); // var(--clr-color-action-50); + --clr-label-info-font-color: var(--cds-alias-typography-color-500, var(--cds-global-typography-color-500)); + --clr-label-info-border-color: var(--cds-alias-utility-blue); // var(--clr-color-action-800); + + --clr-label-success-bg-color: var(--cds-alias-utility-green-tint); // var(--clr-color-success-50); + --clr-label-success-font-color: var(--cds-alias-typography-color-500, var(--cds-global-typography-color-500)); + --clr-label-success-border-color: var(--cds-alias-utility-green); // var(--clr-color-success-800); + + --clr-label-warning-bg-color: var(--cds-alias-utility-yellow-tint); // var(--clr-color-warning-100); + --clr-label-warning-font-color: var(--cds-alias-typography-color-500, var(--cds-global-typography-color-500)); + --clr-label-warning-border-color: var(--cds-alias-utility-yellow); // var(--clr-color-warning-800); + + --clr-label-danger-bg-color: var(--cds-alias-utility-red-tint); // var(--clr-color-danger-100); + --clr-label-danger-font-color: var(--cds-alias-typography-color-500, var(--cds-global-typography-color-500)); + --clr-label-danger-border-color: var(--cds-alias-utility-red); // var(--clr-color-danger-900); + + --clr-label-height: var(--cds-global-space-9); // 24px + --clr-label-border-radius: var(--cds-alias-object-border-radius-200); // 12px + --clr-label-border-width: var(--cds-alias-object-border-width-100); // 1px + + --clr-label-icon-size: var(--cds-global-space-7); // 16px + + --clr-label-horizontal-padding: var(--cds-global-space-5); // 8px + --clr-label-vertical-padding: var(--cds-global-space-3); // 4px + + // ATM - use as default state for labels + // Two state: 1. label with text only 2. labels with icons or badges should have lower padding on the right + .label { + &:has(> .badge), + &:has(> cds-icon) { + padding-right: var(--cds-global-space-3); + } - --clr-label-font-color-light: var(--cds-alias-typography-color-500, var(--cds-global-typography-color-500)); // var(--clr-color-neutral-1000); - --clr-label-font-color-dark: var(--cds-alias-typography-color-500, var(--cds-global-typography-color-500)); // var(--clr-color-neutral-1000); - --clr-label-default-border-color: var(--cds-alias-status-neutral); // var(--clr-color-neutral-600); - - --clr-label-bg-hover-color: var(--cds-alias-status-neutral-tint); // var(--clr-color-neutral-200); - - --clr-label-gray-bg-color: var(--cds-alias-status-neutral); // var(--cds-global-color-gray-600); // var(--clr-color-neutral-600); // actually border color - --clr-label-gray-color: var(--clr-label-font-color-light); // indirectly mapped to CDS token - - --clr-label-purple-bg-color: var(--cds-global-color-violet-600); // var(--clr-color-secondary-action-500); - --clr-label-purple-color: var(--clr-label-font-color-light); // indirectly mapped to CDS token - - --clr-label-blue-bg-color: var(--cds-global-color-blue-800); // var(--clr-color-action-800); - --clr-label-blue-color: var(--clr-label-font-color-light); // indirectly mapped to CDS token - - --clr-label-orange-bg-color: var(--cds-global-color-ochre-800); // var(--clr-color-warning-1000); - --clr-label-orange-color: var(--clr-label-font-color-dark); // indirectly mapped to CDS token - - --clr-label-light-blue-bg-color: var(--cds-global-color-blue-600); // var(--clr-color-action-500); - --clr-label-light-blue-color: var(--clr-label-font-color-dark); // indirectly mapped to CDS token - - --clr-label-info-bg-color: var(--cds-alias-status-tint); // var(--clr-color-action-50); - --clr-label-info-font-color: var(--clr-label-font-color-light); // var(--clr-color-action-800); - --clr-label-info-border-color: var(--cds-alias-status-info); // var(--clr-color-action-800); - - --clr-label-success-bg-color: var(--cds-alias-status-tint); // var(--clr-color-success-50); - --clr-label-success-font-color: var(--clr-label-font-color-light); // var(--clr-color-success-800); - --clr-label-success-border-color: var(--cds-alias-status-success); // var(--clr-color-success-800); - - --clr-label-warning-bg-color: var(--cds-alias-status-tint); // var(--clr-color-warning-100); - --clr-label-warning-font-color: var(--clr-label-font-color-light); // var(--clr-color-neutral-900); - --clr-label-warning-border-color: var(--cds-alias-status-warning); // var(--clr-color-warning-800); - - --clr-label-danger-bg-color: var(--cds-alias-status-tint); // var(--clr-color-danger-100); - --clr-label-danger-font-color: var(--clr-label-font-color-light); // var(--clr-color-danger-900); - --clr-label-danger-border-color: var(--cds-alias-status-danger); // var(--clr-color-danger-900); + .badge, + cds-icon { + margin: 0; + text-decoration: none; + } + } /* Badges */ - --clr-badge-background-color: var(--cds-alias-status-neutral-shade); // var(--clr-color-neutral-600); - --clr-badge-color: var(--cds-global-color-white); // var(--clr-color-on-neutral-600); + --clr-badge-background-color: var(--cds-alias-utility-gray); // var(--clr-color-neutral-600); + --clr-badge-color: var(--cds-alias-typography-color-100, var(--cds-global-typography-color-100)); // var(--clr-color-on-neutral-600); - --clr-badge-info-bg-color: var(--cds-alias-status-info-shade); // var(--clr-color-action-800); - --clr-badge-info-color: var(--cds-global-color-white); // var(--clr-color-neutral-0); - --clr-badge-success-bg-color: var(--cds-alias-status-success-shade); // var(--clr-color-success-800); - --clr-badge-success-color: var(--cds-global-color-white); // var(--clr-color-neutral-0); - --clr-badge-warning-bg-color: var(--cds-alias-status-warning-shade); // var(--clr-color-warning-1000); + --clr-badge-info-bg-color: var(--cds-alias-utility-blue); // var(--clr-color-action-800); + --clr-badge-info-color: var(--cds-alias-typography-color-100, var(--cds-global-typography-color-100)); // var(--clr-color-neutral-0); + --clr-badge-success-bg-color: var(--cds-alias-utility-green); // var(--clr-color-success-800); + --clr-badge-success-color: var(--cds-alias-typography-color-100, var(--cds-global-typography-color-100)); + --clr-badge-warning-bg-color: var(--cds-alias-utility-yellow); // var(--clr-color-warning-1000); --clr-badge-warning-color: var(--cds-global-color-black); // var(--clr-color-neutral-0); - --clr-badge-danger-bg-color: var(--cds-alias-status-danger-shade); // var(--clr-color-danger-900); - --clr-badge-danger-color: var(--cds-global-color-white); // var(--clr-color-neutral-0); - - --clr-badge-gray-bg-color: var(--cds-global-color-gray-600); // var(--clr-color-neutral-600); - --clr-badge-gray-color: var(--cds-global-color-white); // var(--clr-badge-font-color-light); - --clr-badge-purple-bg-color: var(--cds-global-color-violet-500); // var(--clr-color-secondary-action-500); - --clr-badge-purple-color: var(--cds-global-color-white); // var(--clr-badge-font-color-light); - --clr-badge-blue-bg-color: var(--cds-global-color-blue-800); // var(--clr-color-action-800); - --clr-badge-blue-color: var(--cds-global-color-white); // var(--clr-badge-font-color-light); - --clr-badge-orange-bg-color: var(--cds-global-color-tangerine-400); // var(--clr-color-warning-1000); + --clr-badge-danger-bg-color: var(--cds-alias-utility-red); // var(--clr-color-danger-900); + --clr-badge-danger-color: var(--cds-alias-typography-color-100, var(--cds-global-typography-color-100)); // var(--clr-color-neutral-0); + + --clr-badge-gray-bg-color: var(--cds-alias-utility-gray); // var(--clr-color-neutral-600); + --clr-badge-gray-color: var(--cds-alias-typography-color-100, var(--cds-global-typography-color-100)); + --clr-badge-purple-bg-color: var(--cds-alias-utility-violet); // var(--clr-color-secondary-action-500); + --clr-badge-purple-color: var(--cds-alias-typography-color-100, var(--cds-global-typography-color-100)); // var(--clr-badge-font-color-light); + --clr-badge-blue-bg-color: var(--cds-alias-utility-dark-blue); // var(--clr-color-action-800); + --clr-badge-blue-color: var(--cds-alias-typography-color-100, var(--cds-global-typography-color-100)); + --clr-badge-orange-bg-color: var(--cds-alias-utility-tangerine); // var(--clr-color-warning-1000); --clr-badge-orange-color: var(--cds-global-color-black); // var(--clr-color-neutral-0); - --clr-badge-light-blue-bg-color: var(--cds-global-color-blue-300); // var(--clr-color-action-500); - --clr-badge-light-blue-color: var(--cds-global-color-black); // var(--clr-color-neutral-0); + --clr-badge-light-blue-bg-color: var(--cds-alias-utility-light-blue); // var(--clr-color-action-500); + --clr-badge-light-blue-color: var(--cds-alias-typography-color-500, var(--cds-global-typography-color-500)); // var(--clr-color-neutral-0); + + --clr-badge-padding: var(--cds-global-space-2) var(--cds-global-space-3); // 2px 4px + --clr-badge-height: var(--cds-global-space-7); // 16px + --clr-badge-min-width: var(--cds-global-space-7); // 16px + --clr-badge-border-radius: calc(2 * var(--cds-alias-object-border-radius-100)); + + --clr-badge-font-size: var(--clr-p7-font-size); + --clr-badge-font-weight: var(--clr-p7-font-weight); + --clr-badge-letter-spacing: var(--clr-p7-letter-spacing); + --clr-badge-line-height: var(--clr-p7-line-height); + --clr-badge-font-family: var(--cds-global-typography-font-family); /* Progress Bars */ @@ -829,6 +891,12 @@ --clr-combobox-input-align: middle; --clr-combobox-pill-align-items: center; --clr-combobox-item-icon-override: calc(-1 * var(--cds-global-space-1)); + --clr-combobox-pill-content-padding: 0; + + .clr-combobox-wrapper .clr-combobox-remove-btn { + display: flex; + padding: 0; + } /* Datepicker */ diff --git a/tests/snapshots/badge/badge--variants-core-dark.png b/tests/snapshots/badge/badge--variants-core-dark.png index 3f0624442c..6dc78c0683 100644 Binary files a/tests/snapshots/badge/badge--variants-core-dark.png and b/tests/snapshots/badge/badge--variants-core-dark.png differ diff --git a/tests/snapshots/badge/badge--variants-core-light.png b/tests/snapshots/badge/badge--variants-core-light.png index 52a6f15f0c..5ad2510c84 100644 Binary files a/tests/snapshots/badge/badge--variants-core-light.png and b/tests/snapshots/badge/badge--variants-core-light.png differ diff --git a/tests/snapshots/combobox/combobox--variants-core-dark.png b/tests/snapshots/combobox/combobox--variants-core-dark.png index 6e7e0d076c..717897b9f1 100644 Binary files a/tests/snapshots/combobox/combobox--variants-core-dark.png and b/tests/snapshots/combobox/combobox--variants-core-dark.png differ diff --git a/tests/snapshots/combobox/combobox--variants-core-light.png b/tests/snapshots/combobox/combobox--variants-core-light.png index 11f1a2900d..875ed2c5a4 100644 Binary files a/tests/snapshots/combobox/combobox--variants-core-light.png and b/tests/snapshots/combobox/combobox--variants-core-light.png differ diff --git a/tests/snapshots/label/label--variants-core-dark.png b/tests/snapshots/label/label--variants-core-dark.png index e7cafd90a3..d06ca54356 100644 Binary files a/tests/snapshots/label/label--variants-core-dark.png and b/tests/snapshots/label/label--variants-core-dark.png differ diff --git a/tests/snapshots/label/label--variants-core-light.png b/tests/snapshots/label/label--variants-core-light.png index bfe5f960cd..4b49478da7 100644 Binary files a/tests/snapshots/label/label--variants-core-light.png and b/tests/snapshots/label/label--variants-core-light.png differ diff --git a/tests/snapshots/label/label--variants-ng-dark.png b/tests/snapshots/label/label--variants-ng-dark.png index 57d435b680..1fdd9614db 100644 Binary files a/tests/snapshots/label/label--variants-ng-dark.png and b/tests/snapshots/label/label--variants-ng-dark.png differ diff --git a/tests/snapshots/label/label--variants-ng-light.png b/tests/snapshots/label/label--variants-ng-light.png index e1e00c5b6c..e03c0d54a7 100644 Binary files a/tests/snapshots/label/label--variants-ng-light.png and b/tests/snapshots/label/label--variants-ng-light.png differ