feat(Stamps): update styling of stamps component (#2610)

* feat(Stamps): update styling of stamps component

* feat(Stamps): undo color changes and create new spacing for stamp condensed padding

* feat(Stamps): update stamps to use new Typography

* feat(Stamps): tweak background color of primary and positive stamps

* feat(Stamps): update line height for condensed text used in condensed stamps

.changeset/dirty-meals-share.md

@@ -0,0 +1,6 @@
+---
+'@commercetools-uikit/stamp': minor
+'@commercetools-uikit/design-system': minor
+---
+
+Update styling of stamp components

design-system/materials/custom-properties.css

@@ -12,6 +12,7 @@
   --color-primary-30: hsl(175, 55%, 30%);
   --color-primary-40: hsl(175, 55%, 40%);
   --color-primary-85: hsl(175, 70%, 85%);
+  --color-primary-90: hsl(175, 70%, 90%);
   --color-primary-95: hsl(175, 90%, 95%);
   --color-accent: #213c45;
   --color-accent-10: hsl(195, 35.2941176471%, 10%);
@@ -110,6 +111,7 @@
   --font-weight-500: 500;
   --font-weight-600: 600;
   --font-weight-700: 700;
+  --line-height-05: 1.125rem;
   --line-height-10: 1.25rem;
   --line-height-18: 1.3rem;
   --line-height-20: 1.375rem;
@@ -162,6 +164,7 @@
   --spacing-m: 16px;
   --spacing-l: 24px;
   --spacing-xl: 32px;
+  --spacing-05: 2px;
   --spacing-10: 4px;
   --spacing-20: 8px;
   --spacing-25: 12px;
@@ -218,7 +221,8 @@
   --background-color-for-tag-when-hovered: hsl(232, 18%, 90%);
   --background-color-for-collapsible-panel-header-icon-when-disabled: #fff;
   --background-color-for-select-input-option-when-hovered: hsl(232, 18%, 98%);
-  --background-color-for-stamp-as-positive: hsl(175, 90%, 95%);
+  --background-color-for-stamp-as-positive: hsl(175, 70%, 90%);
+  --background-color-for-stamp-as-primary: hsl(175, 70%, 90%);
   --background-color-for-localized-input-label: #fff;
   --background-color-for-localized-input-label-when-readonly: hsl(
     232,
@@ -394,7 +398,8 @@
   --border-radius-for-tag: 2px;
   --border-radius-for-card: 4px;
   --border-radius-for-table-manager-droppable-list: 4px;
-  --border-radius-for-stamp: 20px;
+  --border-radius-for-stamp: 4px;
+  --border-radius-for-stamp-as-condensed: 2px;
   --border-radius-for-view-switcher: 4px;
   --border-radius-for-content-notification: 4px;
   --border-radius-for-primary-action-dropdown: var(--border-radius-4) 0 0
@@ -504,11 +509,10 @@
   --font-size-for-text-as-h4: 1rem;
   --font-size-for-text-as-h5: 1rem;
   --font-size-for-text-as-body: 1rem;
-  --font-size-for-text-as-caption: 0.8rem;
+  --font-size-for-text-as-caption: 0.75rem;
   --font-size-for-text-as-detail: 0.875rem;
   --font-size-for-body: 16px;
   --font-size-for-link: 1rem;
-  --font-size-for-stamp: 0.875rem;
   --font-size-for-view-switcher: 0.875rem;
   --font-size-for-table: 0.875rem;
   --font-size-for-localized-input-label: 1rem;
@@ -522,7 +526,7 @@
   --line-height-for-text-as-h4: 1.375rem;
   --line-height-for-text-as-h5: 1.375rem;
   --line-height-for-text-as-body: 1.625rem;
-  --line-height-for-text-as-caption: 1.3rem;
+  --line-height-for-text-as-caption: 1.125rem;
   --line-height-for-text-as-detail: 1.375rem;
   --line-height-for-select-input-options: 1.625rem;
   --line-height-for-table-header: 26px;
@@ -554,7 +558,7 @@
   --margin-for-rich-text-dropdown-item-label: 0 0 0 var(--spacing-20);
   --margin-for-tag-list: 0 var(--spacing-20) var(--spacing-20) 0;
   --padding-for-stamp: 4px 12px;
-  --padding-for-stamp-as-condensed: 0 var(--spacing-20);
+  --padding-for-stamp-as-condensed: var(--spacing-05) var(--spacing-10);
   --padding-for-tag: 2px 12px;
   --padding-for-table-header: 24px;
   --padding-for-table-header-as-condensed: 24px;

design-system/materials/custom-properties.json

@@ -5,6 +5,7 @@
   "--color-primary-30": "hsl(175, 55%, 30%)",
   "--color-primary-40": "hsl(175, 55%, 40%)",
   "--color-primary-85": "hsl(175, 70%, 85%)",
+  "--color-primary-90": "hsl(175, 70%, 90%)",
   "--color-primary-95": "hsl(175, 90%, 95%)",
   "--color-accent": "#213c45",
   "--color-accent-10": "hsl(195, 35.2941176471%, 10%)",
@@ -103,6 +104,7 @@
   "--font-weight-500": "500",
   "--font-weight-600": "600",
   "--font-weight-700": "700",
+  "--line-height-05": "1.125rem",
   "--line-height-10": "1.25rem",
   "--line-height-18": "1.3rem",
   "--line-height-20": "1.375rem",
@@ -150,6 +152,7 @@
   "--spacing-m": "16px",
   "--spacing-l": "24px",
   "--spacing-xl": "32px",
+  "--spacing-05": "2px",
   "--spacing-10": "4px",
   "--spacing-20": "8px",
   "--spacing-25": "12px",
@@ -194,7 +197,8 @@
   "--background-color-for-tag-when-hovered": "hsl(232, 18%, 90%)",
   "--background-color-for-collapsible-panel-header-icon-when-disabled": "#fff",
   "--background-color-for-select-input-option-when-hovered": "hsl(232, 18%, 98%)",
-  "--background-color-for-stamp-as-positive": "hsl(175, 90%, 95%)",
+  "--background-color-for-stamp-as-positive": "hsl(175, 70%, 90%)",
+  "--background-color-for-stamp-as-primary": "hsl(175, 70%, 90%)",
   "--background-color-for-localized-input-label": "#fff",
   "--background-color-for-localized-input-label-when-readonly": "hsl(232, 18%, 95%)",
   "--background-color-for-localized-input-label-when-disabled": "hsl(232, 18%, 95%)",
@@ -294,7 +298,8 @@
   "--border-radius-for-tag": "2px",
   "--border-radius-for-card": "4px",
   "--border-radius-for-table-manager-droppable-list": "4px",
-  "--border-radius-for-stamp": "20px",
+  "--border-radius-for-stamp": "4px",
+  "--border-radius-for-stamp-as-condensed": "2px",
   "--border-radius-for-view-switcher": "4px",
   "--border-radius-for-content-notification": "4px",
   "--border-radius-for-primary-action-dropdown": "var(--border-radius-4) 0 0 var(--border-radius-4)",
@@ -394,11 +399,10 @@
   "--font-size-for-text-as-h4": "1rem",
   "--font-size-for-text-as-h5": "1rem",
   "--font-size-for-text-as-body": "1rem",
-  "--font-size-for-text-as-caption": "0.8rem",
+  "--font-size-for-text-as-caption": "0.75rem",
   "--font-size-for-text-as-detail": "0.875rem",
   "--font-size-for-body": "16px",
   "--font-size-for-link": "1rem",
-  "--font-size-for-stamp": "0.875rem",
   "--font-size-for-view-switcher": "0.875rem",
   "--font-size-for-table": "0.875rem",
   "--font-size-for-localized-input-label": "1rem",
@@ -412,7 +416,7 @@
   "--line-height-for-text-as-h4": "1.375rem",
   "--line-height-for-text-as-h5": "1.375rem",
   "--line-height-for-text-as-body": "1.625rem",
-  "--line-height-for-text-as-caption": "1.3rem",
+  "--line-height-for-text-as-caption": "1.125rem",
   "--line-height-for-text-as-detail": "1.375rem",
   "--line-height-for-select-input-options": "1.625rem",
   "--line-height-for-table-header": "26px",
@@ -444,7 +448,7 @@
   "--margin-for-rich-text-dropdown-item-label": "0 0 0 var(--spacing-20)",
   "--margin-for-tag-list": "0 var(--spacing-20) var(--spacing-20) 0",
   "--padding-for-stamp": "4px 12px",
-  "--padding-for-stamp-as-condensed": "0 var(--spacing-20)",
+  "--padding-for-stamp-as-condensed": "var(--spacing-05) var(--spacing-10)",
   "--padding-for-tag": "2px 12px",
   "--padding-for-table-header": "24px",
   "--padding-for-table-header-as-condensed": "24px",

design-system/materials/internals/definition.yaml

@@ -42,6 +42,7 @@ choiceGroupsByTheme:
         color-primary-30: 'hsl(175, 55%, 30%)'
         color-primary-40: 'hsl(175, 55%, 40%)'
         color-primary-85: 'hsl(175, 70%, 85%)'
+        color-primary-90: 'hsl(175, 70%, 90%)'
         color-primary-95: 'hsl(175, 90%, 95%)'
         color-accent: '#213c45'
         color-accent-10: 'hsl(195, 35.2941176471%, 10%)'
@@ -170,6 +171,7 @@ choiceGroupsByTheme:
       label: Line heights
       prefix: line-height
       choices:
+        line-height-05: '1.125rem'
         line-height-10: '1.25rem'
         line-height-18: '1.3rem'
         line-height-20: '1.375rem'
@@ -233,6 +235,7 @@ choiceGroupsByTheme:
         spacing-l: 24px
         spacing-xl: 32px
         # New tokens
+        spacing-05: 2px
         spacing-10: 4px
         spacing-20: 8px
         spacing-25: 12px
@@ -561,7 +564,9 @@ decisionGroupsByTheme:
         background-color-for-select-input-option-when-hovered:
           choice: color-neutral-98
         background-color-for-stamp-as-positive:
-          choice: color-primary-95
+          choice: color-primary-90
+        background-color-for-stamp-as-primary:
+          choice: color-primary-90
         background-color-for-localized-input-label:
           choice: color-surface
         background-color-for-localized-input-label-when-readonly:
@@ -776,7 +781,9 @@ decisionGroupsByTheme:
         border-radius-for-table-manager-droppable-list:
           choice: border-radius-4
         border-radius-for-stamp:
-          choice: border-radius-20
+          choice: border-radius-4
+        border-radius-for-stamp-as-condensed:
+          choice: border-radius-2
         border-radius-for-view-switcher:
           choice: border-radius-4
         border-radius-for-content-notification:
@@ -1017,15 +1024,13 @@ decisionGroupsByTheme:
         font-size-for-text-as-body:
           choice: font-size-30
         font-size-for-text-as-caption:
-          choice: font-size-12
+          choice: font-size-10
         font-size-for-text-as-detail:
           choice: font-size-20
         font-size-for-body:
           choice: '16px'
         font-size-for-link:
           choice: font-size-30
-        font-size-for-stamp:
-          choice: font-size-20
         font-size-for-view-switcher:
           choice: font-size-20
         font-size-for-table:
@@ -1063,7 +1068,7 @@ decisionGroupsByTheme:
         line-height-for-text-as-body:
           choice: line-height-40
         line-height-for-text-as-caption:
-          choice: line-height-18
+          choice: line-height-05
         line-height-for-text-as-detail:
           choice: line-height-20
         line-height-for-select-input-options:
@@ -1142,7 +1147,7 @@ decisionGroupsByTheme:
         padding-for-stamp:
           choice: '4px 12px'
         padding-for-stamp-as-condensed:
-          choice: '0 var(--spacing-20)'
+          choice: 'var(--spacing-05) var(--spacing-10)'
         padding-for-tag:
           choice: '2px 12px'
         padding-for-table-header:

design-system/src/design-tokens.ts

@@ -11,6 +11,7 @@ export const themes = {
     colorPrimary30: 'hsl(175, 55%, 30%)',
     colorPrimary40: 'hsl(175, 55%, 40%)',
     colorPrimary85: 'hsl(175, 70%, 85%)',
+    colorPrimary90: 'hsl(175, 70%, 90%)',
     colorPrimary95: 'hsl(175, 90%, 95%)',
     colorAccent: '#213c45',
     colorAccent10: 'hsl(195, 35.2941176471%, 10%)',
@@ -109,6 +110,7 @@ export const themes = {
     fontWeight500: '500',
     fontWeight600: '600',
     fontWeight700: '700',
+    lineHeight05: '1.125rem',
     lineHeight10: '1.25rem',
     lineHeight18: '1.3rem',
     lineHeight20: '1.375rem',
@@ -161,6 +163,7 @@ export const themes = {
     spacingM: '16px',
     spacingL: '24px',
     spacingXl: '32px',
+    spacing05: '2px',
     spacing10: '4px',
     spacing20: '8px',
     spacing25: '12px',
@@ -207,7 +210,8 @@ export const themes = {
     backgroundColorForTagWhenHovered: 'hsl(232, 18%, 90%)',
     backgroundColorForCollapsiblePanelHeaderIconWhenDisabled: '#fff',
     backgroundColorForSelectInputOptionWhenHovered: 'hsl(232, 18%, 98%)',
-    backgroundColorForStampAsPositive: 'hsl(175, 90%, 95%)',
+    backgroundColorForStampAsPositive: 'hsl(175, 70%, 90%)',
+    backgroundColorForStampAsPrimary: 'hsl(175, 70%, 90%)',
     backgroundColorForLocalizedInputLabel: '#fff',
     backgroundColorForLocalizedInputLabelWhenReadonly: 'hsl(232, 18%, 95%)',
     backgroundColorForLocalizedInputLabelWhenDisabled: 'hsl(232, 18%, 95%)',
@@ -322,7 +326,8 @@ export const themes = {
     borderRadiusForTag: '2px',
     borderRadiusForCard: '4px',
     borderRadiusForTableManagerDroppableList: '4px',
-    borderRadiusForStamp: '20px',
+    borderRadiusForStamp: '4px',
+    borderRadiusForStampAsCondensed: '2px',
     borderRadiusForViewSwitcher: '4px',
     borderRadiusForContentNotification: '4px',
     borderRadiusForPrimaryActionDropdown:
@@ -425,11 +430,10 @@ export const themes = {
     fontSizeForTextAsH4: '1rem',
     fontSizeForTextAsH5: '1rem',
     fontSizeForTextAsBody: '1rem',
-    fontSizeForTextAsCaption: '0.8rem',
+    fontSizeForTextAsCaption: '0.75rem',
     fontSizeForTextAsDetail: '0.875rem',
     fontSizeForBody: '16px',
     fontSizeForLink: '1rem',
-    fontSizeForStamp: '0.875rem',
     fontSizeForViewSwitcher: '0.875rem',
     fontSizeForTable: '0.875rem',
     fontSizeForLocalizedInputLabel: '1rem',
@@ -443,7 +447,7 @@ export const themes = {
     lineHeightForTextAsH4: '1.375rem',
     lineHeightForTextAsH5: '1.375rem',
     lineHeightForTextAsBody: '1.625rem',
-    lineHeightForTextAsCaption: '1.3rem',
+    lineHeightForTextAsCaption: '1.125rem',
     lineHeightForTextAsDetail: '1.375rem',
     lineHeightForSelectInputOptions: '1.625rem',
     lineHeightForTableHeader: '26px',
@@ -475,7 +479,7 @@ export const themes = {
     marginForRichTextDropdownItemLabel: '0 0 0 var(--spacing-20)',
     marginForTagList: '0 var(--spacing-20) var(--spacing-20) 0',
     paddingForStamp: '4px 12px',
-    paddingForStampAsCondensed: '0 var(--spacing-20)',
+    paddingForStampAsCondensed: 'var(--spacing-05) var(--spacing-10)',
     paddingForTag: '2px 12px',
     paddingForTableHeader: '24px',
     paddingForTableHeaderAsCondensed: '24px',
@@ -565,6 +569,7 @@ const designTokens = {
   colorPrimary30: 'var(--color-primary-30, hsl(175, 55%, 30%))',
   colorPrimary40: 'var(--color-primary-40, hsl(175, 55%, 40%))',
   colorPrimary85: 'var(--color-primary-85, hsl(175, 70%, 85%))',
+  colorPrimary90: 'var(--color-primary-90, hsl(175, 70%, 90%))',
   colorPrimary95: 'var(--color-primary-95, hsl(175, 90%, 95%))',
   colorAccent: 'var(--color-accent, #213c45)',
   colorAccent10: 'var(--color-accent-10, hsl(195, 35.2941176471%, 10%))',
@@ -670,6 +675,7 @@ const designTokens = {
   fontWeight500: 'var(--font-weight-500, 500)',
   fontWeight600: 'var(--font-weight-600, 600)',
   fontWeight700: 'var(--font-weight-700, 700)',
+  lineHeight05: 'var(--line-height-05, 1.125rem)',
   lineHeight10: 'var(--line-height-10, 1.25rem)',
   lineHeight18: 'var(--line-height-18, 1.3rem)',
   lineHeight20: 'var(--line-height-20, 1.375rem)',
@@ -728,6 +734,7 @@ const designTokens = {
   spacingM: 'var(--spacing-m, 16px)',
   spacingL: 'var(--spacing-l, 24px)',
   spacingXl: 'var(--spacing-xl, 32px)',
+  spacing05: 'var(--spacing-05, 2px)',
   spacing10: 'var(--spacing-10, 4px)',
   spacing20: 'var(--spacing-20, 8px)',
   spacing25: 'var(--spacing-25, 12px)',
@@ -800,7 +807,9 @@ const designTokens = {
   backgroundColorForSelectInputOptionWhenHovered:
     'var(--background-color-for-select-input-option-when-hovered, hsl(232, 18%, 98%))',
   backgroundColorForStampAsPositive:
-    'var(--background-color-for-stamp-as-positive, hsl(175, 90%, 95%))',
+    'var(--background-color-for-stamp-as-positive, hsl(175, 70%, 90%))',
+  backgroundColorForStampAsPrimary:
+    'var(--background-color-for-stamp-as-primary, hsl(175, 70%, 90%))',
   backgroundColorForLocalizedInputLabel:
     'var(--background-color-for-localized-input-label, #fff)',
   backgroundColorForLocalizedInputLabelWhenReadonly:
@@ -990,7 +999,9 @@ const designTokens = {
   borderRadiusForCard: 'var(--border-radius-for-card, 4px)',
   borderRadiusForTableManagerDroppableList:
     'var(--border-radius-for-table-manager-droppable-list, 4px)',
-  borderRadiusForStamp: 'var(--border-radius-for-stamp, 20px)',
+  borderRadiusForStamp: 'var(--border-radius-for-stamp, 4px)',
+  borderRadiusForStampAsCondensed:
+    'var(--border-radius-for-stamp-as-condensed, 2px)',
   borderRadiusForViewSwitcher: 'var(--border-radius-for-view-switcher, 4px)',
   borderRadiusForContentNotification:
     'var(--border-radius-for-content-notification, 4px)',
@@ -1161,11 +1172,10 @@ const designTokens = {
   fontSizeForTextAsH4: 'var(--font-size-for-text-as-h-4, 1rem)',
   fontSizeForTextAsH5: 'var(--font-size-for-text-as-h-5, 1rem)',
   fontSizeForTextAsBody: 'var(--font-size-for-text-as-body, 1rem)',
-  fontSizeForTextAsCaption: 'var(--font-size-for-text-as-caption, 0.8rem)',
+  fontSizeForTextAsCaption: 'var(--font-size-for-text-as-caption, 0.75rem)',
   fontSizeForTextAsDetail: 'var(--font-size-for-text-as-detail, 0.875rem)',
   fontSizeForBody: 'var(--font-size-for-body, 16px)',
   fontSizeForLink: 'var(--font-size-for-link, 1rem)',
-  fontSizeForStamp: 'var(--font-size-for-stamp, 0.875rem)',
   fontSizeForViewSwitcher: 'var(--font-size-for-view-switcher, 0.875rem)',
   fontSizeForTable: 'var(--font-size-for-table, 0.875rem)',
   fontSizeForLocalizedInputLabel:
@@ -1183,7 +1193,8 @@ const designTokens = {
   lineHeightForTextAsH4: 'var(--line-height-for-text-as-h-4, 1.375rem)',
   lineHeightForTextAsH5: 'var(--line-height-for-text-as-h-5, 1.375rem)',
   lineHeightForTextAsBody: 'var(--line-height-for-text-as-body, 1.625rem)',
-  lineHeightForTextAsCaption: 'var(--line-height-for-text-as-caption, 1.3rem)',
+  lineHeightForTextAsCaption:
+    'var(--line-height-for-text-as-caption, 1.125rem)',
   lineHeightForTextAsDetail: 'var(--line-height-for-text-as-detail, 1.375rem)',
   lineHeightForSelectInputOptions:
     'var(--line-height-for-select-input-options, 1.625rem)',
@@ -1228,7 +1239,7 @@ const designTokens = {
     'var(--margin-for-tag-list, 0 var(--spacing-20) var(--spacing-20) 0)',
   paddingForStamp: 'var(--padding-for-stamp, 4px 12px)',
   paddingForStampAsCondensed:
-    'var(--padding-for-stamp-as-condensed, 0 var(--spacing-20))',
+    'var(--padding-for-stamp-as-condensed, var(--spacing-05) var(--spacing-10))',
   paddingForTag: 'var(--padding-for-tag, 2px 12px)',
   paddingForTableHeader: 'var(--padding-for-table-header, 24px)',
   paddingForTableHeaderAsCondensed: