@mezzanine-ui/system 1.0.0-canary.10 → 1.0.0-canary.11

package/motion/_motion.scss

@@ -8,6 +8,7 @@ $default-durations: (
   fast: 150ms,
   moderate: 250ms,
   slow: 400ms,
+  long: 1000ms,
   loop: 1600ms,
   pause-short: 3000ms,
   pause-long: 10000ms,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/system",
-  "version": "1.0.0-canary.10",
+  "version": "1.0.0-canary.11",
   "description": "Design System for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {

package/palette/_semantic.scss

@@ -13,6 +13,7 @@ $semantic-contexts: (
   icon,
   border,
   separator,
+  scrollbar,
   overlay,
   surface,
   shadow
@@ -336,6 +337,14 @@ $semantic-colors: (
       light: primitive.variable(white-base, white-alpha-20),
       dark: primitive.variable(white-base, white-alpha-20),
     ),
+    invisible: (
+      light: primitive.variable(black-base, black-alpha-0),
+      dark: primitive.variable(gray, 700),
+    ),
+    neutral-ghost: (
+      light: primitive.variable(gray, 100),
+      dark: primitive.variable(gray, 800),
+    ),
     neutral-faint: (
       light: primitive.variable(gray, 200),
       dark: primitive.variable(gray, 700),
@@ -395,6 +404,20 @@ $semantic-colors: (
       dark: primitive.variable(brand, 500),
     ),
   ),
+  scrollbar: (
+    neutral-light: (
+      light: primitive.variable(black-base, black-alpha-5),
+      dark: primitive.variable(white-base, white-alpha-5),
+    ),
+    neutral: (
+      light: primitive.variable(black-base, black-alpha-40),
+      dark: primitive.variable(white-base, white-alpha-40),
+    ),
+    strong: (
+      light: primitive.variable(black-base, black-alpha-60),
+      dark: primitive.variable(white-base, white-alpha-60),
+    ),
+  ),
   overlay: (
     strong: (
       light: primitive.variable(black-base, black-alpha-60),

package/spacing/_semantic.scss

@@ -150,6 +150,10 @@ $semantic-spacings: (
         default: primitive.variable(20),
         compact: primitive.variable(18),
       ),
+      gentle-fixed: (
+        default: primitive.variable(20),
+        compact: primitive.variable(20),
+      ),
       relaxed: (
         default: primitive.variable(24),
         compact: primitive.variable(20),
@@ -158,6 +162,10 @@ $semantic-spacings: (
         default: primitive.variable(28),
         compact: primitive.variable(24),
       ),
+      airy-fixed: (
+        default: primitive.variable(28),
+        compact: primitive.variable(28),
+      ),
       roomy: (
         default: primitive.variable(32),
         compact: primitive.variable(28),
@@ -198,6 +206,10 @@ $semantic-spacings: (
         default: primitive.variable(80),
         compact: primitive.variable(64),
       ),
+      xwide: (
+        default: primitive.variable(100),
+        compact: primitive.variable(92),
+      ),
     ),
     container: (
       minimal: (
@@ -331,6 +343,10 @@ $semantic-spacings: (
       default: primitive.variable(24),
       compact: primitive.variable(20),
     ),
+    relaxed: (
+      default: primitive.variable(32),
+      compact: primitive.variable(28),
+    ),
     loose: (
       default: primitive.variable(40),
       compact: primitive.variable(36),

package/typography/_semantic.scss

@@ -16,6 +16,7 @@ $semantic-types: (
   text-link-body,
   text-link-caption,
   caption,
+  caption-mono,
   caption-highlight,
   annotation,
   annotation-highlight,
@@ -101,6 +102,13 @@ $semantic-typographies: (
     line-height: primitive.line-height-variable(caption),
     letter-spacing: primitive.letter-spacing-variable(0),
   ),
+  caption-mono: (
+    font-family: primitive.font-family-variable(sfmono),
+    font-size: primitive.font-size-variable(12),
+    font-weight: primitive.font-weight-variable(regular),
+    line-height: primitive.line-height-variable(caption),
+    letter-spacing: primitive.letter-spacing-variable(0),
+  ),
   caption-highlight: (
     font-size: primitive.font-size-variable(12),
     font-weight: primitive.font-weight-variable(semibold),