Merge pull request #15 from instructure/v1.8.0

chore: net new banner

Author: adamlobler

tokensStudio/$metadata.json

@@ -9,6 +9,7 @@
     "canvas/component/AppNav",
     "canvas/component/Avatar",
     "canvas/component/Badge",
+    "canvas/component/Banner",
     "canvas/component/BaseButton",
     "canvas/component/Billboard",
     "canvas/component/Breadcrumb",
@@ -77,6 +78,7 @@
     "rebrand/component/AppNav",
     "rebrand/component/Avatar",
     "rebrand/component/Badge",
+    "rebrand/component/Banner",
     "rebrand/component/BaseButton",
     "rebrand/component/Billboard",
     "rebrand/component/Breadcrumb",

tokensStudio/$themes.json

@@ -49,4 +49,4 @@
       "type": "spacing"
     }
   }
-}
+}

tokensStudio/canvas/component/AiInformation.json

@@ -89,4 +89,4 @@
       "type": "spacing"
     }
   }
-}
+}

tokensStudio/canvas/component/Alert.json

@@ -63,4 +63,4 @@
       "type": "fontSizes"
     }
   }
-}
+}

tokensStudio/canvas/component/AppNav.json

@@ -161,4 +161,4 @@
       "type": "borderRadius"
     }
   }
-}
+}

tokensStudio/canvas/component/Avatar.json

@@ -53,7 +53,7 @@
       "type": "other"
     },
     "notificationZIndex": {
-      "value": 1,
+      "value": "1",
       "type": "number"
     },
     "pulseBorderThickness": {

tokensStudio/canvas/component/Badge.json

@@ -0,0 +1,105 @@
+{
+  "banner": {
+    "borderRadius": {
+      "value": "{semantic.borderRadius.container.md}",
+      "type": "borderRadius"
+    },
+    "relaxedIconBorderRadius": {
+      "value": "{semantic.borderRadius.lg}",
+      "type": "borderRadius"
+    },
+    "borderStyle": {
+      "value": "solid",
+      "type": "other"
+    },
+    "borderWidth": {
+      "value": "{semantic.borderWidth.sm}",
+      "type": "borderWidth"
+    },
+    "color": {
+      "value": "{semantic.color.institutional.brandFontColorDark}",
+      "type": "color"
+    },
+    "borderColor": {
+      "value": "{semantic.color.stroke.strong}",
+      "type": "color",
+      "$extensions": {
+        "studio.tokens": {
+          "modify": {
+            "type": "alpha",
+            "value": "0.1",
+            "space": "hsl"
+          }
+        }
+      }
+    },
+    "iconColor": {
+      "value": "{semantic.color.icon.onColor}",
+      "type": "color"
+    },
+    "violetBackground": {
+      "value": "{semantic.color.background.pastel.violet}",
+      "type": "color"
+    },
+    "violetIconBackground": {
+      "value": "{semantic.color.background.accent.violet}",
+      "type": "color"
+    },
+    "seaBackground": {
+      "value": "{semantic.color.background.pastel.sea}",
+      "type": "color"
+    },
+    "seaIconBackground": {
+      "value": "{semantic.color.background.accent.sea}",
+      "type": "color"
+    },
+    "aiBackgroundTopGradientColor": {
+      "value": "{semantic.color.background.interactive.action.aiSecondary.active.topGradient}",
+      "type": "color"
+    },
+    "aiBackgroundBottomGradientColor": {
+      "value": "{semantic.color.background.interactive.action.aiSecondary.active.bottomGradient}",
+      "type": "color"
+    },
+    "relaxedPaddingVertical": {
+      "value": "{semantic.spacing.spaceXl}",
+      "type": "spacing"
+    },
+    "closeButtonMarginRight": {
+      "value": "0.5rem",
+      "type": "spacing"
+    },
+    "closeButtonMarginTop": {
+      "value": "0.5rem",
+      "type": "spacing"
+    },
+    "contentGapVertical": {
+      "value": "{semantic.spacing.spaceMd}",
+      "type": "spacing"
+    },
+    "relaxedPaddingHorizontal": {
+      "value": "{semantic.spacing.spaceXl}",
+      "type": "spacing"
+    },
+    "relaxedContentGapHorizontal": {
+      "value": "{semantic.spacing.spaceLg}",
+      "type": "spacing"
+    },
+    "compactContentGapHorizontal": {
+      "value": "{semantic.spacing.spaceSm}",
+      "type": "spacing"
+    },
+    "compactPaddingHorizontal": {
+      "value": "{semantic.spacing.spaceMd}",
+      "type": "spacing"
+    },
+    "compactPaddingVertical": {
+      "value": "{semantic.spacing.spaceMd}",
+      "type": "spacing"
+    },
+    "compactIconBorderRadius": {
+      "value": "{semantic.borderRadius.md}",
+      "type": "borderRadius"
+    }
+  }
+}

tokensStudio/canvas/component/Banner.json

@@ -73,4 +73,4 @@
       "type": "fontSizes"
     }
   }
-}
+}

tokensStudio/canvas/component/Billboard.json

@@ -13,4 +13,4 @@
       "type": "spacing"
     }
   }
-}
+}