Skip to content

Commit

Permalink
feat(badges and labels): add tokens and update shim (#892)
Browse files Browse the repository at this point in the history 
## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

- [ ] Bugfix
- [X] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?

<!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. -->

Issue Number: CDE-692

## What is the new behavior?

## Does this PR introduce a breaking change?

- [ ] Yes
- [X] No

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

## Other information

---------

Co-authored-by: Daniel Tsanev <[email protected]>
Co-authored-by: Daniel Tsanev <[email protected]>
Co-authored-by: GitHub <[email protected]>
Co-authored-by: Kevin Buhmann <[email protected]>
  • Loading branch information
@mivaylo @dtsanevmw
@web-flow @kevinbuhmann
5 people authored Aug 24, 2023
1 parent b2b9a1f commit fec1d76
Show file tree
Hide file tree
Showing 18 changed files with 453 additions and 180 deletions.
107 changes: 83 additions & 24 deletions projects/angular/src/emphasis/STYLES.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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-<color> | Label class with specific color |
| clickable | Clickable label class |
52 changes: 43 additions & 9 deletions projects/angular/src/emphasis/_badges.clarity.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,27 +58,61 @@
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
);

&: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
);
Expand Down
Loading

0 comments on commit fec1d76

Please sign in to comment.