@muonic/muon 0.0.2-experimental-187-647c5c4.0 → 0.0.2-experimental-189-bdb89ed.0

package/components/inputter/src/design-tokens.json

@@ -61,6 +61,9 @@
           "value": "2px"
         }
       },
+      "lineHeight": {
+        "value": "inherit"
+      },
       "icon": {
         "size": {
           "description": "Size of the icon used within the field.",
@@ -280,12 +283,6 @@
       }
     },
     "detail": {
-      "font": {
-        "size": {
-          "description": "Font size for the detail.",
-          "value": "12px"
-        }
-      },
       "color": {
         "description": "Text color for the detail.",
         "value": "{ inputter.field.color.value }"
@@ -299,6 +296,7 @@
       "heading": {
         "font": {
           "size": {
+            "description": "Font size for the detail heading.",
             "value": "14px"
           }
         },
@@ -320,6 +318,12 @@
         }
       },
       "content": {
+        "font": {
+          "size": {
+            "description": "Font size for the detail content.",
+            "value": "12px"
+          }
+        },
         "margin": {
           "block": {
             "start": {

package/components/inputter/src/inputter-styles-detail.css

@@ -54,7 +54,7 @@
     margin-block-start: $INPUTTER_DETAIL_CONTENT_MARGIN_BLOCK_START;
     margin-block-end: $INPUTTER_DETAIL_CONTENT_MARGIN_BLOCK_END;
     padding-inline-start: $INPUTTER_DETAIL_CONTENT_PADDING_INLINE;
-    font-size: 12px;
+    font-size: $INPUTTER_DETAIL_CONTENT_FONT_SIZE;
     border-inline-start-color: $INPUTTER_DETAIL_BORDER_COLOR;
     border-inline-start-style: $INPUTTER_DETAIL_BORDER_STYLE;
     border-inline-start-width: $INPUTTER_DETAIL_BORDER_WIDTH;

package/components/inputter/src/inputter-styles.css

@@ -31,6 +31,7 @@
     padding-inline-start: $INPUTTER_FIELD_PADDING_INLINE_START;
     padding-inline-end: $INPUTTER_FIELD_PADDING_INLINE_END;
     color: $INPUTTER_FIELD_COLOR;
+    line-height: $INPUTTER_FIELD_LINE_HEIGHT;
     background-color: $INPUTTER_FIELD_BACKGROUND_COLOR;
     border-width: $INPUTTER_FIELD_BORDER_WIDTH;
     border-style: $INPUTTER_FIELD_BORDER_STYLE;
@@ -95,7 +96,6 @@
   }
 
   & .wrapper {
-    max-width: fit-content;
     position: relative;
   }
 
@@ -216,6 +216,8 @@
   & .search,
   & .select {
     & .wrapper {
+      width: fit-content;
+
       & inputter-icon {
         pointer-events: none;
         position: absolute;
@@ -254,7 +256,14 @@
       input[type="search"],
       input[type="tel"],
       input[type="text"])) {
-      width: calc((var(--maxlength)) * 1ch);
+      width: calc(
+        (var(--maxlength))
+        * 1ch
+        + $INPUTTER_FIELD_PADDING_INLINE_START
+        + $INPUTTER_FIELD_PADDING_INLINE_END
+        + $INPUTTER_FIELD_BORDER_WIDTH
+        + $INPUTTER_FIELD_BORDER_WIDTH
+      );
       font-family: $INPUTTER_MASK_FONT_FAMILY;
     }
 
@@ -275,7 +284,7 @@
       color: $INPUTTER_MASK_COLOR;
       pointer-events: none;
       white-space: pre;
-      line-height: initial;
+      line-height: $INPUTTER_FIELD_LINE_HEIGHT;
       text-align: start;
     }
 
@@ -291,7 +300,7 @@
     width: fit-content;
     margin-block-start: $INPUTTER_VALIDATION_MARGIN_BLOCK;
     color: $INPUTTER_VALIDATION_WARNING_COLOR;
-    font-size: 14px;
+    font-size: $INPUTTER_VALIDATION_FONT_SIZE;
 
     & .icon {
       width: $INPUTTER_VALIDATION_ICON_SIZE;

package/css/global.css

@@ -3,23 +3,33 @@
 /**
   * [1] Apply a natural box layout model to all elements
   */
-html {
-  box-sizing: border-box; /* [1] */
-}
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box; /* [1] */
+  }
 
-*,
-*::before,
-*::after {
-  box-sizing: inherit; /* [1] */
-}
+/**
+  * [1] Remove the user agent margin
+  * [2] Default font family and base size
+  * [3] Disallow any content to overflow the width
+  * [4] TODO: Tokenise the global line-height
+  * [5] TODO: Investigate this property as it may not be necessary
+  */
+  body {
+    margin: 0; /* [1] */
+    font-family: $THEME_FONT_FAMILY_DEFAULT; /* [2] */
+    font-size: 16px; /* [2] */
+    overflow-x: hidden; /* [3] */
+    line-height: 1.5; /* [4] */
+    min-height: 100vh; /* [5] */
+  }
 
-body {
-  margin: 0;
-  font-family: $THEME_FONT_FAMILY_DEFAULT;
-  font-size: 16px;
-  overflow-x: hidden;
-  line-height: 1.5;
-  min-height: 100vh;
-}
+  /**
+    * [1] Reset the user agent margin to 0 for figure
+    */
+  figure {
+    margin: 0; /* [1] */
+  }
 
-/* global.css END */
+  /* global.css END */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muonic/muon",
-  "version": "0.0.2-experimental-187-647c5c4.0",
+  "version": "0.0.2-experimental-189-bdb89ed.0",
   "description": "",
   "main": "index.js",
   "scripts": {