fix(ui): update text mappings

akveo · Apr 26, 2019 · 87b89c1 · 87b89c1
1 parent 9aa396c
commit 87b89c1
Show file tree

Hide file tree

Showing 15 changed files with 212 additions and 16 deletions.
diff --git a/src/framework/ui/avatar/avatar.spec.tsx.snap b/src/framework/ui/avatar/avatar.spec.tsx.snap
@@ -100,6 +100,7 @@ exports[`@avatar: matches snapshot * appearance * default 1`] = `
       "color-warning-800": "#945400",
       "color-warning-900": "#703C00",
       "color-white": "#FFFFFF",
+      "font-light-color": "#FFFFFF",
       "font-primary-color": "#0D1C2E",
       "font-primary-disabled-color": "#C8CEDB",
       "font-primary-family": "",

diff --git a/src/framework/ui/bottomNavigation/bottomNavigation.spec.tsx.snap b/src/framework/ui/bottomNavigation/bottomNavigation.spec.tsx.snap
@@ -103,6 +103,7 @@ exports[`@bottom-navigation: component checks * additional appearance 1`] = `
       "color-warning-800": "#945400",
       "color-warning-900": "#703C00",
       "color-white": "#FFFFFF",
+      "font-light-color": "#FFFFFF",
       "font-primary-color": "#0D1C2E",
       "font-primary-disabled-color": "#C8CEDB",
       "font-primary-family": "",
@@ -265,6 +266,7 @@ exports[`@bottom-navigation: component checks * empty 1`] = `
       "color-warning-800": "#945400",
       "color-warning-900": "#703C00",
       "color-white": "#FFFFFF",
+      "font-light-color": "#FFFFFF",
       "font-primary-color": "#0D1C2E",
       "font-primary-disabled-color": "#C8CEDB",
       "font-primary-family": "",
@@ -413,6 +415,7 @@ exports[`@bottom-navigation: component checks * with routes 1`] = `
       "color-warning-800": "#945400",
       "color-warning-900": "#703C00",
       "color-white": "#FFFFFF",
+      "font-light-color": "#FFFFFF",
       "font-primary-color": "#0D1C2E",
       "font-primary-disabled-color": "#C8CEDB",
       "font-primary-family": "",
@@ -580,6 +583,7 @@ exports[`@bottom-navigation-tab: component checks * empty 1`] = `
       "color-warning-800": "#945400",
       "color-warning-900": "#703C00",
       "color-white": "#FFFFFF",
+      "font-light-color": "#FFFFFF",
       "font-primary-color": "#0D1C2E",
       "font-primary-disabled-color": "#C8CEDB",
       "font-primary-family": "",
@@ -700,6 +704,7 @@ exports[`@bottom-navigation-tab: component checks * text/selected 1`] = `
       "color-warning-800": "#945400",
       "color-warning-900": "#703C00",
       "color-white": "#FFFFFF",
+      "font-light-color": "#FFFFFF",
       "font-primary-color": "#0D1C2E",
       "font-primary-disabled-color": "#C8CEDB",
       "font-primary-family": "",
@@ -835,6 +840,7 @@ exports[`@bottom-navigation-tab: component checks * text/unselected 1`] = `
       "color-warning-800": "#945400",
       "color-warning-900": "#703C00",
       "color-white": "#FFFFFF",
+      "font-light-color": "#FFFFFF",
       "font-primary-color": "#0D1C2E",
       "font-primary-disabled-color": "#C8CEDB",
       "font-primary-family": "",
@@ -970,6 +976,7 @@ exports[`@bottom-navigation-tab: component checks * with icon 1`] = `
       "color-warning-800": "#945400",
       "color-warning-900": "#703C00",
       "color-white": "#FFFFFF",
+      "font-light-color": "#FFFFFF",
       "font-primary-color": "#0D1C2E",
       "font-primary-disabled-color": "#C8CEDB",
       "font-primary-family": "",

diff --git a/src/framework/ui/button/button.spec.tsx.snap b/src/framework/ui/button/button.spec.tsx.snap
@@ -103,6 +103,7 @@ exports[`@button: matches snapshot * appearance * empty 1`] = `
       "color-warning-800": "#945400",
       "color-warning-900": "#703C00",
       "color-white": "#FFFFFF",
+      "font-light-color": "#FFFFFF",
       "font-primary-color": "#0D1C2E",
       "font-primary-disabled-color": "#C8CEDB",
       "font-primary-family": "",
@@ -234,6 +235,7 @@ exports[`@button: matches snapshot * appearance * icon 1`] = `
       "color-warning-800": "#945400",
       "color-warning-900": "#703C00",
       "color-white": "#FFFFFF",
+      "font-light-color": "#FFFFFF",
       "font-primary-color": "#0D1C2E",
       "font-primary-disabled-color": "#C8CEDB",
       "font-primary-family": "",
@@ -381,6 +383,7 @@ exports[`@button: matches snapshot * appearance * icon and text 1`] = `
       "color-warning-800": "#945400",
       "color-warning-900": "#703C00",
       "color-white": "#FFFFFF",
+      "font-light-color": "#FFFFFF",
       "font-primary-color": "#0D1C2E",
       "font-primary-disabled-color": "#C8CEDB",
       "font-primary-family": "",
@@ -541,6 +544,7 @@ exports[`@button: matches snapshot * appearance * text 1`] = `
       "color-warning-800": "#945400",
       "color-warning-900": "#703C00",
       "color-white": "#FFFFFF",
+      "font-light-color": "#FFFFFF",
       "font-primary-color": "#0D1C2E",
       "font-primary-disabled-color": "#C8CEDB",
       "font-primary-family": "",
@@ -686,6 +690,7 @@ exports[`@button: matches snapshot * interaction * stateless 1`] = `
       "color-warning-800": "#945400",
       "color-warning-900": "#703C00",
       "color-white": "#FFFFFF",
+      "font-light-color": "#FFFFFF",
       "font-primary-color": "#0D1C2E",
       "font-primary-disabled-color": "#C8CEDB",
       "font-primary-family": "",

diff --git a/src/framework/ui/checkbox/checkbox.spec.tsx.snap b/src/framework/ui/checkbox/checkbox.spec.tsx.snap
@@ -132,6 +132,7 @@ exports[`@checkbox matches snapshots * active 1`] = `
           "color-warning-800": "#945400",
           "color-warning-900": "#703C00",
           "color-white": "#FFFFFF",
+          "font-light-color": "#FFFFFF",
           "font-primary-color": "#0D1C2E",
           "font-primary-disabled-color": "#C8CEDB",
           "font-primary-family": "",
@@ -308,6 +309,7 @@ exports[`@checkbox matches snapshots * active: default 1`] = `
           "color-warning-800": "#945400",
           "color-warning-900": "#703C00",
           "color-white": "#FFFFFF",
+          "font-light-color": "#FFFFFF",
           "font-primary-color": "#0D1C2E",
           "font-primary-disabled-color": "#C8CEDB",
           "font-primary-family": "",
@@ -487,6 +489,7 @@ exports[`@checkbox matches snapshots * checked.disabled 1`] = `
           "color-warning-800": "#945400",
           "color-warning-900": "#703C00",
           "color-white": "#FFFFFF",
+          "font-light-color": "#FFFFFF",
           "font-primary-color": "#0D1C2E",
           "font-primary-disabled-color": "#C8CEDB",
           "font-primary-family": "",
@@ -663,6 +666,7 @@ exports[`@checkbox matches snapshots * default 1`] = `
           "color-warning-800": "#945400",
           "color-warning-900": "#703C00",
           "color-white": "#FFFFFF",
+          "font-light-color": "#FFFFFF",
           "font-primary-color": "#0D1C2E",
           "font-primary-disabled-color": "#C8CEDB",
           "font-primary-family": "",
@@ -840,6 +844,7 @@ exports[`@checkbox matches snapshots * with text 1`] = `
           "color-warning-800": "#945400",
           "color-warning-900": "#703C00",
           "color-white": "#FFFFFF",
+          "font-light-color": "#FFFFFF",
           "font-primary-color": "#0D1C2E",
           "font-primary-disabled-color": "#C8CEDB",
           "font-primary-family": "",

diff --git a/src/framework/ui/common/mapping.json b/src/framework/ui/common/mapping.json
@@ -1994,16 +1994,31 @@
       "meta": {
         "scope": "all",
         "parameters": {
-          "color": {
-            "type": "string"
-          },
           "fontSize": {
             "type": "number"
+          },
+          "lineHeight": {
+            "type": "number"
+          },
+          "fontWeight": {
+            "type": "string"
+          },
+          "color": {
+            "type": "string"
           }
         },
         "appearances": {
-          "primary": {
+          "dark": {
             "default": true
+          },
+          "light": {
+            "default": false
+          },
+          "hintLight": {
+            "default": false
+          },
+          "hintDark": {
+            "default": false
           }
         },
         "variantGroups": {
@@ -2026,43 +2041,162 @@
             "h6": {
               "default": false
             },
-            "body": {
+            "s1": {
+              "default": false
+            },
+            "s2": {
+              "default": false
+            },
+            "p1": {
               "default": true
+            },
+            "p2": {
+              "default": false
+            },
+            "c1": {
+              "default": false
+            },
+            "c2": {
+              "default": false
+            },
+            "overline": {
+              "default": false
+            },
+            "label": {
+              "default": false
+            }
+          },
+          "status": {
+            "primary": {
+              "default": false
+            },
+            "success": {
+              "default": false
+            },
+            "info": {
+              "default": false
+            },
+            "warning": {
+              "default": false
+            },
+            "danger": {
+              "default": false
             }
           }
         },
         "states": {}
       },
       "appearances": {
-        "primary": {
+        "dark": {
           "mapping": {
-            "color": "text-primary"
+            "color": "font-primary-color"
           },
           "variantGroups": {
             "category": {
               "h1": {
-                "fontSize": 64
+                "fontSize": 72,
+                "lineHeight": 80,
+                "fontWeight": "800"
               },
               "h2": {
-                "fontSize": 40
+                "fontSize": 60,
+                "lineHeight": 72,
+                "fontWeight": "800"
               },
               "h3": {
-                "fontSize": 32
+                "fontSize": 48,
+                "lineHeight": 56,
+                "fontWeight": "800"
               },
               "h4": {
-                "fontSize": 24
+                "fontSize": 32,
+                "lineHeight": 40,
+                "fontWeight": "800"
               },
               "h5": {
-                "fontSize": 16
+                "fontSize": 24,
+                "lineHeight": 32,
+                "fontWeight": "800"
               },
               "h6": {
-                "fontSize": 14
+                "fontSize": 20,
+                "lineHeight": 28,
+                "fontWeight": "800"
+              },
+              "s1": {
+                "fontSize": 15,
+                "lineHeight": 24,
+                "fontWeight": "600"
+              },
+              "s2": {
+                "fontSize": 13,
+                "lineHeight": 24,
+                "fontWeight": "600"
+              },
+              "p1": {
+                "fontSize": 15,
+                "lineHeight": 20,
+                "fontWeight": "normal"
+              },
+              "p2": {
+                "fontSize": 13,
+                "lineHeight": 16,
+                "fontWeight": "normal"
+              },
+              "c1": {
+                "fontSize": 11,
+                "lineHeight": 16,
+                "fontWeight": "normal"
+              },
+              "c2": {
+                "fontSize": 11,
+                "lineHeight": 16,
+                "fontWeight": "600"
+              },
+              "overline": {
+                "fontSize": 11,
+                "lineHeight": 16,
+                "fontWeight": "bold"
+              },
+              "label": {
+                "fontSize": 12,
+                "lineHeight": 16,
+                "fontWeight": "bold"
+              }
+            },
+            "status": {
+              "primary": {
+                "color": "color-primary-500"
               },
-              "body": {
-                "fontSize": 16
+              "success": {
+                "color": "color-success-500"
+              },
+              "info": {
+                "color": "color-info-500"
+              },
+              "warning": {
+                "color": "color-warning-500"
+              },
+              "danger": {
+                "color": "color-danger-500"
               }
             }
           }
+        },
+        "light": {
+          "mapping": {
+            "color": "font-light-color"
+          }
+        },
+        "hintLight": {
+          "mapping": {
+            "color": "color-basic-400"
+          }
+        },
+        "hintDark": {
+          "mapping": {
+            "color": "color-basic-600"
+          }
         }
       }
     },

diff --git a/src/framework/ui/common/theme.json b/src/framework/ui/common/theme.json
@@ -96,6 +96,7 @@
   "outline-disabled-color":	"transparent",
   "font-primary-family": "",
   "font-primary-color": "#0D1C2E",
+  "font-light-color": "#FFFFFF",
   "font-primary-disabled-color": "#C8CEDB",
   "font-primary-regular-text-size": 14,
   "font-primary-regular-text-weight": "600",

diff --git a/src/framework/ui/input/input.spec.tsx.snap b/src/framework/ui/input/input.spec.tsx.snap
@@ -118,6 +118,7 @@ exports[`@input: matches snapshot * appearance * icon 1`] = `
           "color-warning-800": "#945400",
           "color-warning-900": "#703C00",
           "color-white": "#FFFFFF",
+          "font-light-color": "#FFFFFF",
           "font-primary-color": "#0D1C2E",
           "font-primary-disabled-color": "#C8CEDB",
           "font-primary-family": "",
@@ -303,6 +304,7 @@ exports[`@input: matches snapshot * appearance * label + caption 1`] = `
           "color-warning-800": "#945400",
           "color-warning-900": "#703C00",
           "color-white": "#FFFFFF",
+          "font-light-color": "#FFFFFF",
           "font-primary-color": "#0D1C2E",
           "font-primary-disabled-color": "#C8CEDB",
           "font-primary-family": "",
@@ -488,6 +490,7 @@ exports[`@input: matches snapshot * interaction * stateless 1`] = `
           "color-warning-800": "#945400",
           "color-warning-900": "#703C00",
           "color-white": "#FFFFFF",
+          "font-light-color": "#FFFFFF",
           "font-primary-color": "#0D1C2E",
           "font-primary-disabled-color": "#C8CEDB",
           "font-primary-family": "",