Merge pull request #176 from centrica-engineering/feature/introduce-s…

…pacers Feature/introduce-spacers
centrica-engineering · Jan 31, 2022 · f48bb19 · f48bb19
2 parents 9654b63 + e09dbb7
commit f48bb19
Show file tree

Hide file tree

Showing 8 changed files with 227 additions and 103 deletions.
diff --git a/packages/library/components/cta/src/styles.css b/packages/library/components/cta/src/styles.css
@@ -31,11 +31,11 @@
     flex-direction: row;
     align-items: center;
     text-align: start;
-    column-gap: 1rem;
-    padding-block-start: 0.5rem;
-    padding-block-end: 0.5rem;
-    padding-inline-start: 1rem;
-    padding-inline-end: 1rem;
+    column-gap: $CTA_DEFAULT_GAP;
+    padding-block-start: $CTA_DEFAULT_PADDING_BLOCK;
+    padding-block-end: $CTA_DEFAULT_PADDING_BLOCK;
+    padding-inline-start: $CTA_DEFAULT_PADDING_INLINE;
+    padding-inline-end: $CTA_DEFAULT_PADDING_INLINE;
     background-color: $CTA_DEFAULT_BACKGROUND_COLOR;
     color: $CTA_DEFAULT_COLOR;
     border-color: $CTA_DEFAULT_BORDER_COLOR;
@@ -90,6 +90,7 @@
     & .icon {
       flex-shrink: 0; /* Ensure the icon is not compressed when the content wraps on two lines. */
       width: 1.25rem;
+      height: 1.25rem;
     }
   }
 }

diff --git a/packages/library/components/cta/src/token.json b/packages/library/components/cta/src/token.json
@@ -5,6 +5,32 @@
       "value": "standard",
       "type": "string"
     },
+    "default": {
+      "color": {
+        "value": "{ theme.color.lightest.value }"
+      },
+      "background": {
+        "color": {
+          "value": "{ theme.color.darkest.value }"
+        }
+      },
+      "gap": {
+        "value": "{ theme.spacer.md.value }"
+      },
+      "padding": {
+        "block": {
+          "value": "{ theme.spacer.sm.value }"
+        },
+        "inline": {
+          "value": "{ theme.spacer.md.value }"
+        }
+      },
+      "border": {
+        "color": {
+          "value": "{ cta.default.background.color.value }"
+        }
+      }
+    },
     "loading": {
       "message": {
         "description": "Write description.",
@@ -47,21 +73,6 @@
         "value": "{ theme.font.family.default.value }"
       }
     },
-    "default": {
-      "color": {
-        "value": "{ theme.color.lightest.value }"
-      },
-      "background": {
-        "color": {
-          "value": "{ theme.color.darkest.value }"
-        }
-      },
-      "border": {
-        "color": {
-          "value": "{ cta.default.background.color.value }"
-        }
-      }
-    },
     "hover": {
       "background": {
         "color": {

diff --git a/packages/library/components/detail/src/styles.css b/packages/library/components/detail/src/styles.css
@@ -23,27 +23,25 @@
 
   & .heading {
     display: flex;
-    align-items: center;
     text-align: start;
-    column-gap: 1rem;
-    padding-block-start: 0.5rem;
-    padding-block-end: 0.5rem;
-    padding-inline-start: 1rem;
-    padding-inline-end: 1rem;
-    background-color: $DETAIL_DEFAULT_BACKGROUND_COLOR;
-    color: $DETAIL_DEFAULT_COLOR;
+    column-gap: $DETAIL_HEADING_GAP;
+    padding-block-start: $DETAIL_HEADING_PADDING_BLOCK;
+    padding-block-end: $DETAIL_HEADING_PADDING_BLOCK;
+    padding-inline-start: $DETAIL_HEADING_PADDING_INLINE;
+    padding-inline-end: $DETAIL_HEADING_PADDING_INLINE;
+    background-color: $DETAIL_HEADING_BACKGROUND_COLOR;
+    color: $DETAIL_HEADING_COLOR;
     cursor: pointer;
     font-size: 21px;
 
     & .icon,
     & .toggle {
-      width: 1.5rem;
-      height: 1.5rem;
+      width: $DETAIL_TOGGLE_ICON_SIZE;
     }
 
     &:hover {
-      background-color: $DETAIL_HOVER_BACKGROUND_COLOR;
-      color: $DETAIL_HOVER_COLOR;
+      background-color: $DETAIL_HEADING_HOVER_BACKGROUND_COLOR;
+      color: $DETAIL_HEADING_HOVER_COLOR;
       text-decoration: underline;
     }
 
@@ -56,26 +54,26 @@
     }
 
     &:focus-visible {
-      background-color: $DETAIL_FOCUS_BACKGROUND_COLOR;
-      color: $DETAIL_FOCUS_COLOR;
+      background-color: $DETAIL_HEADING_FOCUS_BACKGROUND_COLOR;
+      color: $DETAIL_HEADING_FOCUS_COLOR;
       outline: 3px;
-      outline-color: $DETAIL_FOCUS_OUTLINE_COLOR;
+      outline-color: $DETAIL_HEADING_FOCUS_OUTLINE_COLOR;
       outline-style: solid;
       text-decoration: underline;
     }
   }
 
   & .content {
-    padding-block-start: 0.5rem;
-    padding-block-end: 0.5rem;
-    padding-inline-start: 1rem;
-    padding-inline-end: 1rem;
+    padding-block-start: $DETAIL_CONTENT_PADDING_BLOCK;
+    padding-block-end: $DETAIL_CONTENT_PADDING_BLOCK;
+    padding-inline-start: $DETAIL_CONTENT_PADDING_INLINE;
+    padding-inline-end: $DETAIL_CONTENT_PADDING_INLINE;
   }
 
   & .has-icon,
   & .toggle-start {
     & .content {
-      padding-inline-start: 3.5rem;
+      padding-inline-start: $DETAIL_CONTENT_ICON_SPACER;
     }
   }
 }
diff --git a/packages/library/components/detail/src/token.json b/packages/library/components/detail/src/token.json
@@ -9,40 +9,74 @@
       },
       "position": {
         "value": "end"
+      },
+      "icon": {
+        "size": {
+          "value": "{ theme.spacer.lg.value }"
+        }
       }
     },
-    "default": {
+    "heading": {
       "color": {
         "value": "{ theme.color.neutral.dark.200.value }"
       },
       "background": {
         "color": {
           "value": "{ theme.color.base.background.value }"
         }
-      }
-    },
-    "hover": {
-      "color": {
-        "value": "{ theme.color.darkest.value }"
       },
-      "background": {
+      "gap": {
+        "value": "{ theme.spacer.md.value }"
+      },
+      "padding": {
+        "block": {
+          "value": "{ theme.spacer.sm.value }"
+        },
+        "inline": {
+          "value": "{ theme.spacer.md.value }"
+        }
+      },
+      "hover": {
+        "color": {
+          "value": "{ theme.color.darkest.value }"
+        },
+        "background": {
+          "color": {
+            "value": "{ detail.heading.background.color.value }"
+          }
+        }
+      },
+      "focus": {
         "color": {
-          "value": "{ detail.default.background.color.value }"
+          "value": "{ detail.heading.hover.color.value }"
+        },
+        "background": {
+          "color": {
+            "value": "{ detail.heading.background.color.value }"
+          }
+        },
+        "outline": {
+          "color": {
+            "value": "{ theme.color.focus.value }"
+          }
         }
       }
     },
-    "focus": {
+    "content": {
       "color": {
-        "value": "{ detail.hover.color.value }"
+        "value": "{ detail.heading.color.value }"
       },
-      "background": {
-        "color": {
-          "value": "{ detail.default.background.color.value }"
+      "padding": {
+        "block": {
+          "value": "{ theme.spacer.sm.value }"
+        },
+        "inline": {
+          "value": "{ theme.spacer.md.value }"
         }
       },
-      "outline": {
-        "color": {
-          "value": "{ theme.color.focus.value }"
+      "icon": {
+        "spacer": {
+          "value": "calc({ detail.heading.padding.inline.value } + { detail.toggle.icon.size.value } + { detail.heading.gap.value })"
         }
       }
     }

diff --git a/packages/library/components/inputter/src/inputter-detail-styles.css b/packages/library/components/inputter/src/inputter-detail-styles.css
@@ -1,9 +1,16 @@
 @import "@muons/library/css/default.css";
 
 :host {
-  display: block;
-  margin-block-start: 0.5rem;
-  color: $INPUTTER_DETAIL_COLOR;
+  & summary {
+    &::-webkit-details-marker {
+      display: none;
+    }
+  }
+
+  & .details {
+    color: $INPUTTER_DETAIL_COLOR;
+    margin-block-start: $INPUTTER_DETAIL_MARGIN_BLOCK;
+  }
 
   & .toggle {
     width: 1rem;
@@ -13,10 +20,11 @@
     display: flex;
     align-items: center;
     text-align: start;
-    column-gap: 0.5rem;
+    column-gap: $INPUTTER_DETAIL_HEADING_GAP;
     width: fit-content;
     cursor: pointer;
     font-size: 14px;
+    margin-block-start: $INPUTTER_DETAIL_HEADING_MARGIN_BLOCK;
 
     &:hover {
       text-decoration: underline;
@@ -42,8 +50,8 @@
   }
 
   & .content {
-    margin-block-start: 0.5rem;
-    padding-inline-start: 0.5rem;
+    margin-block-start: $INPUTTER_DETAIL_CONTENT_MARGIN_BLOCK;
+    padding-inline-start: $INPUTTER_DETAIL_CONTENT_PADDING_INLINE;
     font-size: 12px;
     /* stylelint-disable declaration-block-no-redundant-longhand-properties */
     border-inline-start-style: solid;

diff --git a/packages/library/components/inputter/src/styles.css b/packages/library/components/inputter/src/styles.css
@@ -18,15 +18,15 @@
   select,
   textarea)) {
     margin: 0; /* NOTE: remove `margin: 2px` Safari user agent */
-    padding-block-start: 0.5rem;
-    padding-block-end: 0.5rem;
-    padding-inline-start: 0.5rem;
-    padding-inline-end: 0.5rem;
-    color: $INPUTTER_COLOR;
+    padding-block-start: $INPUTTER_FIELD_PADDING_BLOCK;
+    padding-block-end: $INPUTTER_FIELD_PADDING_BLOCK;
+    padding-inline-start: $INPUTTER_FIELD_PADDING_INLINE;
+    padding-inline-end: $INPUTTER_FIELD_PADDING_INLINE;
+    color: $INPUTTER_FIELD_COLOR;
     background-color: transparent;
     border-width: 2px;
     border-style: solid;
-    border-color: $INPUTTER_BORDER_COLOR;
+    border-color: $INPUTTER_FIELD_BORDER_COLOR;
     border-radius: 0;
     font-size: inherit;
     font-family: inherit;
@@ -57,9 +57,9 @@
       position: relative;
       display: block;
       width: fit-content;
-      padding-inline-start: 1.5em;
-      margin-block-start: 0.5em;
-      margin-block-end: 0.5em;
+      padding-inline-start: $INPUTTER_CHOICE_PADDING_INLINE;
+      margin-block-start: $INPUTTER_CHOICE_MARGIN_BLOCK;
+      margin-block-end: $INPUTTER_CHOICE_MARGIN_BLOCK;
     }
   }
 
@@ -68,11 +68,11 @@
   select,
   input[type="date"])) {
     appearance: none; /* NOTE: remove the user agent visual styles */
-    padding-inline-end: 2rem; /* NOTE: to make space available for the icon */
+    padding-inline-end: $INPUTTER_FIELD_ICON_SPACER;
   }
 
   & ::slotted(input[type="search"]) {
-    padding-inline-start: 2rem; /* NOTE: to make space available for the icon */
+    padding-inline-start: $INPUTTER_FIELD_ICON_SPACER;
   }
 
   & ::slotted(textarea) {
@@ -91,9 +91,9 @@
   }
 
   & .wrapper {
-    margin-block-start: 0.5rem;
+    margin-block-start: $INPUTTER_FIELD_MARGIN_BLOCK;
     max-width: fit-content;
-    background-color: $INPUTTER_BACKGROUND_COLOR;
+    background-color: $INPUTTER_FIELD_BACKGROUND_COLOR;
     position: relative;
   }
 
@@ -106,8 +106,7 @@
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
-        width: 1rem;
-        height: 1rem;
+        width: $INPUTTER_FIELD_ICON_SIZE;
       }
     }
   }
@@ -139,10 +138,10 @@
     }
 
     & .input-mask {
-      padding-block-start: 0.5rem;
-      padding-block-end: 0.5rem;
-      padding-inline-start: 0.5rem;
-      padding-inline-end: 0.5rem;
+      padding-block-start: $INPUTTER_FIELD_PADDING_BLOCK;
+      padding-block-end: $INPUTTER_FIELD_PADDING_BLOCK;
+      padding-inline-start: $INPUTTER_FIELD_PADDING_INLINE;
+      padding-inline-end: $INPUTTER_FIELD_PADDING_INLINE;
       border-width: 2px;
       border-style: solid;
       border-color: transparent;
@@ -164,20 +163,20 @@
     display: flex;
     align-items: center;
     text-align: start;
-    column-gap: 0.5rem;
+    column-gap: $INPUTTER_VALIDATION_GAP;
     width: fit-content;
-    margin-block-start: 0.5rem;
+    margin-block-start: $INPUTTER_VALIDATION_MARGIN_BLOCK;
     color: $INPUTTER_VALIDATION_WARNING_COLOR;
     font-size: 14px;
 
     & .icon {
-      width: 1rem;
+      width: $INPUTTER_VALIDATION_ICON_SIZE;
     }
   }
 
   & .helper {
-    margin-block-start: 0.5rem;
-    color: $INPUTTER_HELPER_COLOR;
+    margin-block-start: $INPUTTER_DETAIL_HEADING_MARGIN_BLOCK;
+    color: $INPUTTER_DETAIL_COLOR;
     font-size: 14px;
   }
 }