Merge pull request #71 from Fullscript/more-tokens

feat: add system background tokens + interactive surface tokens under surface
Fullscript · Aug 24, 2022 · 65b063f · 65b063f
2 parents 73bed07 + 5673dce
commit 65b063f
Show file tree

Hide file tree

Showing 17 changed files with 108 additions and 64 deletions.
diff --git a/build/native/colors.d.ts b/build/native/colors.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 19 Aug 2022 13:51:25 GMT
+ * Generated on Wed, 24 Aug 2022 18:23:03 GMT
  */
 
 export const green: {

diff --git a/build/native/colors.js b/build/native/colors.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 19 Aug 2022 13:51:25 GMT
+ * Generated on Wed, 24 Aug 2022 18:23:03 GMT
  */
 
 module.exports = {

diff --git a/build/native/themes/light.d.ts b/build/native/themes/light.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 19 Aug 2022 13:51:25 GMT
+ * Generated on Wed, 24 Aug 2022 18:23:03 GMT
  */
 
 export const text: {
@@ -15,11 +15,9 @@ export const surface: {
   level1: string;
   level2: string;
   level3: string;
-};
-export const interactiveSurface: {
-  background: string;
-  hover: string;
-  active: string;
+  interactiveBackground: string;
+  interactiveHover: string;
+  interactiveActive: string;
 };
 export const primary: {
   textBase: string;
@@ -101,6 +99,10 @@ export const system: {
   textHover: string;
   textActive: string;
   backgroundBase: string;
+  backgroundMuted: string;
+  backgroundMutedHover: string;
+  backgroundMutedActive: string;
+  backgroundBox: string;
   borderBase: string;
   borderHover: string;
   borderActive: string;

diff --git a/build/native/themes/light.js b/build/native/themes/light.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 19 Aug 2022 13:51:25 GMT
+ * Generated on Wed, 24 Aug 2022 18:23:03 GMT
  */
 
 module.exports = {
@@ -16,11 +16,9 @@ module.exports = {
     level1: "#FFFFFF",
     level2: "#F5F7FA",
     level3: "#FFFFFF",
-  },
-  interactiveSurface: {
-    background: "transparent",
-    hover: "#F5F7FA",
-    active: "#E6EDF5",
+    interactiveBackground: "#FFFFFF",
+    interactiveHover: "#F5F7FA",
+    interactiveActive: "#E6EDF5",
   },
   primary: {
     textBase: "#307553",
@@ -102,6 +100,10 @@ module.exports = {
     textHover: "#36485C",
     textActive: "#2E3A47",
     backgroundBase: "#FFFFFF",
+    backgroundMuted: "#F5F7FA",
+    backgroundMutedHover: "#E6EDF5",
+    backgroundMutedActive: "#C8D3E0",
+    backgroundBox: "#FCFEFF",
     borderBase: "#C8D3E0",
     borderHover: "#596D84",
     borderActive: "#475A70",

diff --git a/build/native/typography.d.ts b/build/native/typography.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 19 Aug 2022 13:51:25 GMT
+ * Generated on Wed, 24 Aug 2022 18:23:03 GMT
  */
 
 export const letterSpacingBase: number;

diff --git a/build/native/typography.js b/build/native/typography.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 19 Aug 2022 13:51:25 GMT
+ * Generated on Wed, 24 Aug 2022 18:23:03 GMT
  */
 
 module.exports = {

diff --git a/build/scss/colors.scss b/build/scss/colors.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 19 Aug 2022 13:51:25 GMT
+// Generated on Wed, 24 Aug 2022 18:23:03 GMT
 
 $green100: #FAFFFC;
 $green200: #EBF2EF;

diff --git a/build/scss/themes/light.scss b/build/scss/themes/light.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 19 Aug 2022 13:51:25 GMT
+// Generated on Wed, 24 Aug 2022 18:23:03 GMT
 
 $textHeader: #2E3A47;
 $textEmphasis: #36485C;
@@ -11,9 +11,9 @@ $surfaceLevel0: #F5F7FA;
 $surfaceLevel1: #FFFFFF;
 $surfaceLevel2: #F5F7FA;
 $surfaceLevel3: #FFFFFF;
-$interactiveSurfaceBackground: transparent;
-$interactiveSurfaceHover: #F5F7FA;
-$interactiveSurfaceActive: #E6EDF5;
+$surfaceInteractiveBackground: #FFFFFF;
+$surfaceInteractiveHover: #F5F7FA;
+$surfaceInteractiveActive: #E6EDF5;
 $primaryTextBase: #307553;
 $primaryTextHover: #275E43;
 $primaryTextActive: #244C38;
@@ -83,6 +83,10 @@ $systemTextBase: #475A70;
 $systemTextHover: #36485C;
 $systemTextActive: #2E3A47;
 $systemBackgroundBase: #FFFFFF;
+$systemBackgroundMuted: #F5F7FA;
+$systemBackgroundMutedHover: #E6EDF5;
+$systemBackgroundMutedActive: #C8D3E0;
+$systemBackgroundBox: #FCFEFF;
 $systemBorderBase: #C8D3E0;
 $systemBorderHover: #596D84;
 $systemBorderActive: #475A70;

diff --git a/build/scss/typography.scss b/build/scss/typography.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 19 Aug 2022 13:51:25 GMT
+// Generated on Wed, 24 Aug 2022 18:23:03 GMT
 
 $letterSpacingBase: 0;
 $paragraphSpacingBase: 0;

diff --git a/build/ts/colors.d.ts b/build/ts/colors.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 19 Aug 2022 13:51:25 GMT
+ * Generated on Wed, 24 Aug 2022 18:23:03 GMT
  */
 
 export const green: {

diff --git a/build/ts/colors.js b/build/ts/colors.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 19 Aug 2022 13:51:25 GMT
+ * Generated on Wed, 24 Aug 2022 18:23:03 GMT
  */
 
 module.exports = {

diff --git a/build/ts/themes/light.d.ts b/build/ts/themes/light.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 19 Aug 2022 13:51:25 GMT
+ * Generated on Wed, 24 Aug 2022 18:23:03 GMT
  */
 
 export const text: {
@@ -15,11 +15,9 @@ export const surface: {
   level1: string;
   level2: string;
   level3: string;
-};
-export const interactiveSurface: {
-  background: string;
-  hover: string;
-  active: string;
+  interactiveBackground: string;
+  interactiveHover: string;
+  interactiveActive: string;
 };
 export const primary: {
   textBase: string;
@@ -101,6 +99,10 @@ export const system: {
   textHover: string;
   textActive: string;
   backgroundBase: string;
+  backgroundMuted: string;
+  backgroundMutedHover: string;
+  backgroundMutedActive: string;
+  backgroundBox: string;
   borderBase: string;
   borderHover: string;
   borderActive: string;

diff --git a/build/ts/themes/light.js b/build/ts/themes/light.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 19 Aug 2022 13:51:25 GMT
+ * Generated on Wed, 24 Aug 2022 18:23:03 GMT
  */
 
 module.exports = {
@@ -16,11 +16,9 @@ module.exports = {
     level1: "#FFFFFF",
     level2: "#F5F7FA",
     level3: "#FFFFFF",
-  },
-  interactiveSurface: {
-    background: "transparent",
-    hover: "#F5F7FA",
-    active: "#E6EDF5",
+    interactiveBackground: "#FFFFFF",
+    interactiveHover: "#F5F7FA",
+    interactiveActive: "#E6EDF5",
   },
   primary: {
     textBase: "#307553",
@@ -102,6 +100,10 @@ module.exports = {
     textHover: "#36485C",
     textActive: "#2E3A47",
     backgroundBase: "#FFFFFF",
+    backgroundMuted: "#F5F7FA",
+    backgroundMutedHover: "#E6EDF5",
+    backgroundMutedActive: "#C8D3E0",
+    backgroundBox: "#FCFEFF",
     borderBase: "#C8D3E0",
     borderHover: "#596D84",
     borderActive: "#475A70",

diff --git a/build/ts/typography.d.ts b/build/ts/typography.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 19 Aug 2022 13:51:25 GMT
+ * Generated on Wed, 24 Aug 2022 18:23:03 GMT
  */
 
 export const letterSpacingBase: number;

diff --git a/build/ts/typography.js b/build/ts/typography.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 19 Aug 2022 13:51:25 GMT
+ * Generated on Wed, 24 Aug 2022 18:23:03 GMT
  */
 
 module.exports = {

diff --git a/data/light.json b/data/light.json
@@ -38,20 +38,20 @@
       "level3": {
         "value": "{colors.shades.white}",
         "type": "color"
-      }
-    },
-    "interactiveSurface": {
-      "background": {
-        "value": "{colors.shades.transparent}",
-        "type": "color"
       },
-      "hover": {
-        "value": "{colors.grey.200}",
-        "type": "color"
-      },
-      "active": {
-        "value": "{colors.grey.300}",
-        "type": "color"
+      "interactive": {
+        "background": {
+          "value": "{colors.shades.white}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{colors.grey.200}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{colors.grey.300}",
+          "type": "color"
+        }
       }
     },
     "primary": {
@@ -373,6 +373,22 @@
         "base": {
           "value": "{colors.shades.white}",
           "type": "color"
+        },
+        "muted": {
+          "value": "{colors.grey.200}",
+          "type": "color"
+        },
+        "mutedHover": {
+          "value": "{colors.grey.300}",
+          "type": "color"
+        },
+        "mutedActive": {
+          "value": "{colors.grey.400}",
+          "type": "color"
+        },
+        "box": {
+          "value": "{colors.grey.100}",
+          "type": "color"
         }
       },
       "border": {

diff --git a/transformed/transformed-light.json b/transformed/transformed-light.json
@@ -38,20 +38,20 @@
       "level3": {
         "value": "#FFFFFF",
         "type": "color"
-      }
-    },
-    "interactiveSurface": {
-      "background": {
-        "value": "transparent",
-        "type": "color"
       },
-      "hover": {
-        "value": "#F5F7FA",
-        "type": "color"
-      },
-      "active": {
-        "value": "#E6EDF5",
-        "type": "color"
+      "interactive": {
+        "background": {
+          "value": "#FFFFFF",
+          "type": "color"
+        },
+        "hover": {
+          "value": "#F5F7FA",
+          "type": "color"
+        },
+        "active": {
+          "value": "#E6EDF5",
+          "type": "color"
+        }
       }
     },
     "primary": {
@@ -373,6 +373,22 @@
         "base": {
           "value": "#FFFFFF",
           "type": "color"
+        },
+        "muted": {
+          "value": "#F5F7FA",
+          "type": "color"
+        },
+        "mutedHover": {
+          "value": "#E6EDF5",
+          "type": "color"
+        },
+        "mutedActive": {
+          "value": "#C8D3E0",
+          "type": "color"
+        },
+        "box": {
+          "value": "#FCFEFF",
+          "type": "color"
         }
       },
       "border": {