feat: add system, interactiveSurface tokens

Fullscript · Aug 15, 2022 · a2cc9cc · a2cc9cc
2 parents c04c7b7 + 2f4292d
commit a2cc9cc
Show file tree

Hide file tree

Showing 18 changed files with 162 additions and 20 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 Mon, 15 Aug 2022 15:21:29 GMT
+ * Generated on Mon, 15 Aug 2022 18:01:22 GMT
  */
 
 export const green : { green100 : string,green200 : string,green300 : string,green400 : string,green500 : string,green600 : string,green700 : string,green800 : string};

diff --git a/build/native/colors.js b/build/native/colors.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 15 Aug 2022 15:21:29 GMT
+ * Generated on Mon, 15 Aug 2022 18:01:22 GMT
  */
 
 module.exports = {green : { green100 : "#FAFFFC",green200 : "#EBF2EF",green300 : "#D1E0D9",green400 : "#B6CFC2",green500 : "#86B09B",green600 : "#307553",green700 : "#275E43",green800 : "#244C38"},

diff --git a/build/native/themes/light.d.ts b/build/native/themes/light.d.ts
@@ -1,14 +1,16 @@
 /**
  * Do not edit directly
- * Generated on Mon, 15 Aug 2022 15:21:29 GMT
+ * Generated on Mon, 15 Aug 2022 18:01:22 GMT
  */
 
-export const text : { textBase : string,textEmphasis : string,textSubdued : string};
+export const text : { textBase : string,textEmphasis : string,textSubdued : string,textOnBackground : string};
 export const surface : { surfaceLevel0 : string,surfaceLevel1 : string,surfaceLevel2 : string,surfaceLevel3 : string};
+export const interactiveSurface : { interactiveSurfaceBackground : string,interactiveSurfaceHover : string,interactiveSurfaceActive : string};
 export const primary : { primaryTextBase : string,primaryTextHover : string,primaryTextActive : string,primaryBackgroundBase : string,primaryBackgroundHover : string,primaryBackgroundActive : string,primaryBackgroundMuted : string,primaryBackgroundMutedHover : string,primaryBackgroundMutedActive : string,primaryBackgroundBox : string,primaryBorderBase : string,primaryBorderHover : string,primaryBorderActive : string};
 export const info : { infoTextBase : string,infoTextHover : string,infoTextActive : string,infoBackgroundBase : string,infoBackgroundHover : string,infoBackgroundActive : string,infoBackgroundMuted : string,infoBackgroundMutedHover : string,infoBackgroundMutedActive : string,infoBackgroundBox : string,infoBorderBase : string,infoBorderHover : string,infoBorderActive : string};
 export const warning : { warningTextBase : string,warningTextHover : string,warningTextActive : string,warningBackgroundBase : string,warningBackgroundHover : string,warningBackgroundActive : string,warningBackgroundMuted : string,warningBackgroundMutedHover : string,warningBackgroundMutedActive : string,warningBackgroundBox : string,warningBorderBase : string,warningBorderHover : string,warningBorderActive : string};
 export const danger : { dangerTextBase : string,dangerTextHover : string,dangerTextActive : string,dangerBackgroundBase : string,dangerBackgroundHover : string,dangerBackgroundActive : string,dangerBackgroundMuted : string,dangerBackgroundMutedHover : string,dangerBackgroundMutedActive : string,dangerBackgroundBox : string,dangerBorderBase : string,dangerBorderHover : string,dangerBorderActive : string};
 export const highlight : { highlightTextBase : string,highlightTextHover : string,highlightTextActive : string,highlightBackgroundBase : string,highlightBackgroundHover : string,highlightBackgroundActive : string,highlightBackgroundMuted : string,highlightBackgroundMutedHover : string,highlightBackgroundMutedActive : string,highlightBackgroundBox : string,highlightBorderBase : string,highlightBorderHover : string,highlightBorderActive : string};
+export const system : { systemTextBase : string,systemTextHover : string,systemTextActive : string,systemBackgroundBase : string,systemBorderBase : string,systemBorderHover : string,systemBorderActive : string,systemBorderFocused : string};
 export const disabled : { disabledText : string,disabledBackground : string,disabledNakedContent : string,disabledNakedBackground : string,disabledBorder : string,disabledInputBackground : string,disabledInputLabelText : string};
 export const input : { inputBackgroundBase : string,inputBackgroundHover : string,inputBackgroundInformation : string,inputTextBase : string,inputTextInformation : string,inputTextInformationError : string,inputTextLabel : string,inputTextFloatingLabel : string,inputTextFloatingLabelError : string,inputTextPlaceholder : string,inputBorderBase : string,inputBorderError : string};
diff --git a/build/native/themes/light.js b/build/native/themes/light.js
diff --git a/build/native/typography.d.ts b/build/native/typography.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 15 Aug 2022 15:21:29 GMT
+ * Generated on Mon, 15 Aug 2022 18:01:22 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 Mon, 15 Aug 2022 15:21:29 GMT
+ * Generated on Mon, 15 Aug 2022 18:01:22 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 Mon, 15 Aug 2022 15:21:29 GMT
+// Generated on Mon, 15 Aug 2022 18:01:22 GMT
 
 $green100: #FAFFFC;
 $green200: #EBF2EF;

diff --git a/build/scss/themes/light.scss b/build/scss/themes/light.scss
@@ -1,14 +1,18 @@
 
 // Do not edit directly
-// Generated on Mon, 15 Aug 2022 15:21:29 GMT
+// Generated on Mon, 15 Aug 2022 18:01:22 GMT
 
 $textBase: #2E3A47;
 $textEmphasis: #36485C;
 $textSubdued: #596D84;
+$textOnBackground: #FFFFFF;
 $surfaceLevel0: #F5F7FA;
 $surfaceLevel1: #FFFFFF;
 $surfaceLevel2: #FCFEFF;
 $surfaceLevel3: #FFFFFF;
+$interactiveSurfaceBackground: transparent;
+$interactiveSurfaceHover: #F5F7FA;
+$interactiveSurfaceActive: #E6EDF5;
 $primaryTextBase: #307553;
 $primaryTextHover: #275E43;
 $primaryTextActive: #244C38;
@@ -74,6 +78,14 @@ $highlightBackgroundBox: #FCFAFF;
 $highlightBorderBase: #533E7D;
 $highlightBorderHover: #3B2566;
 $highlightBorderActive: #2A174F;
+$systemTextBase: #475A70;
+$systemTextHover: #36485C;
+$systemTextActive: #2E3A47;
+$systemBackgroundBase: #FFFFFF;
+$systemBorderBase: #C8D3E0;
+$systemBorderHover: #596D84;
+$systemBorderActive: #475A70;
+$systemBorderFocused: #3971A8;
 $disabledText: #596D84;
 $disabledBackground: #F5F7FA;
 $disabledNakedContent: #F5F7FA;

diff --git a/build/scss/typography.scss b/build/scss/typography.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 15 Aug 2022 15:21:29 GMT
+// Generated on Mon, 15 Aug 2022 18:01:22 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 Mon, 15 Aug 2022 15:21:29 GMT
+ * Generated on Mon, 15 Aug 2022 18:01:22 GMT
  */
 
 export const green : { green100 : string,green200 : string,green300 : string,green400 : string,green500 : string,green600 : string,green700 : string,green800 : string};

diff --git a/build/ts/colors.js b/build/ts/colors.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 15 Aug 2022 15:21:29 GMT
+ * Generated on Mon, 15 Aug 2022 18:01:22 GMT
  */
 
 module.exports = {green : { green100 : "#FAFFFC",green200 : "#EBF2EF",green300 : "#D1E0D9",green400 : "#B6CFC2",green500 : "#86B09B",green600 : "#307553",green700 : "#275E43",green800 : "#244C38"},

diff --git a/build/ts/themes/light.d.ts b/build/ts/themes/light.d.ts
@@ -1,14 +1,16 @@
 /**
  * Do not edit directly
- * Generated on Mon, 15 Aug 2022 15:21:29 GMT
+ * Generated on Mon, 15 Aug 2022 18:01:22 GMT
  */
 
-export const text : { textBase : string,textEmphasis : string,textSubdued : string};
+export const text : { textBase : string,textEmphasis : string,textSubdued : string,textOnBackground : string};
 export const surface : { surfaceLevel0 : string,surfaceLevel1 : string,surfaceLevel2 : string,surfaceLevel3 : string};
+export const interactiveSurface : { interactiveSurfaceBackground : string,interactiveSurfaceHover : string,interactiveSurfaceActive : string};
 export const primary : { primaryTextBase : string,primaryTextHover : string,primaryTextActive : string,primaryBackgroundBase : string,primaryBackgroundHover : string,primaryBackgroundActive : string,primaryBackgroundMuted : string,primaryBackgroundMutedHover : string,primaryBackgroundMutedActive : string,primaryBackgroundBox : string,primaryBorderBase : string,primaryBorderHover : string,primaryBorderActive : string};
 export const info : { infoTextBase : string,infoTextHover : string,infoTextActive : string,infoBackgroundBase : string,infoBackgroundHover : string,infoBackgroundActive : string,infoBackgroundMuted : string,infoBackgroundMutedHover : string,infoBackgroundMutedActive : string,infoBackgroundBox : string,infoBorderBase : string,infoBorderHover : string,infoBorderActive : string};
 export const warning : { warningTextBase : string,warningTextHover : string,warningTextActive : string,warningBackgroundBase : string,warningBackgroundHover : string,warningBackgroundActive : string,warningBackgroundMuted : string,warningBackgroundMutedHover : string,warningBackgroundMutedActive : string,warningBackgroundBox : string,warningBorderBase : string,warningBorderHover : string,warningBorderActive : string};
 export const danger : { dangerTextBase : string,dangerTextHover : string,dangerTextActive : string,dangerBackgroundBase : string,dangerBackgroundHover : string,dangerBackgroundActive : string,dangerBackgroundMuted : string,dangerBackgroundMutedHover : string,dangerBackgroundMutedActive : string,dangerBackgroundBox : string,dangerBorderBase : string,dangerBorderHover : string,dangerBorderActive : string};
 export const highlight : { highlightTextBase : string,highlightTextHover : string,highlightTextActive : string,highlightBackgroundBase : string,highlightBackgroundHover : string,highlightBackgroundActive : string,highlightBackgroundMuted : string,highlightBackgroundMutedHover : string,highlightBackgroundMutedActive : string,highlightBackgroundBox : string,highlightBorderBase : string,highlightBorderHover : string,highlightBorderActive : string};
+export const system : { systemTextBase : string,systemTextHover : string,systemTextActive : string,systemBackgroundBase : string,systemBorderBase : string,systemBorderHover : string,systemBorderActive : string,systemBorderFocused : string};
 export const disabled : { disabledText : string,disabledBackground : string,disabledNakedContent : string,disabledNakedBackground : string,disabledBorder : string,disabledInputBackground : string,disabledInputLabelText : string};
 export const input : { inputBackgroundBase : string,inputBackgroundHover : string,inputBackgroundInformation : string,inputTextBase : string,inputTextInformation : string,inputTextInformationError : string,inputTextLabel : string,inputTextFloatingLabel : string,inputTextFloatingLabelError : string,inputTextPlaceholder : string,inputBorderBase : string,inputBorderError : string};
diff --git a/build/ts/themes/light.js b/build/ts/themes/light.js
diff --git a/build/ts/typography.d.ts b/build/ts/typography.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 15 Aug 2022 15:21:29 GMT
+ * Generated on Mon, 15 Aug 2022 18:01:22 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 Mon, 15 Aug 2022 15:21:29 GMT
+ * Generated on Mon, 15 Aug 2022 18:01:22 GMT
  */
 
 module.exports = {

diff --git a/data/$metadata.json b/data/$metadata.json
@@ -0,0 +1,6 @@
+{
+  "tokenSetOrder": [
+    "core",
+    "light"
+  ]
+}
diff --git a/data/light.json b/data/light.json
@@ -12,6 +12,10 @@
       "subdued": {
         "value": "{colors.grey.500}",
         "type": "color"
+      },
+      "onBackground": {
+        "value": "{colors.shades.white}",
+        "type": "color"
       }
     },
     "surface": {
@@ -32,6 +36,20 @@
         "type": "color"
       }
     },
+    "interactiveSurface": {
+      "background": {
+        "value": "{colors.shades.transparent}",
+        "type": "color"
+      },
+      "hover": {
+        "value": "{colors.grey.200}",
+        "type": "color"
+      },
+      "active": {
+        "value": "{colors.grey.300}",
+        "type": "color"
+      }
+    },
     "primary": {
       "text": {
         "base": {
@@ -332,6 +350,46 @@
         }
       }
     },
+    "system": {
+      "text": {
+        "base": {
+          "value": "{colors.grey.600}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{colors.grey.700}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{colors.grey.800}",
+          "type": "color"
+        }
+      },
+      "background": {
+        "base": {
+          "value": "{colors.shades.white}",
+          "type": "color"
+        }
+      },
+      "border": {
+        "base": {
+          "value": "{colors.grey.400}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{colors.grey.500}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{colors.grey.600}",
+          "type": "color"
+        },
+        "focused": {
+          "value": "{colors.blue.600}",
+          "type": "color"
+        }
+      }
+    },
     "disabled": {
       "text": {
         "value": "{colors.grey.500}",
@@ -421,4 +479,4 @@
       }
     }
   }
-}
+}