@mezzanine-ui/system 1.0.0-rc.0 → 1.0.0-rc.2

package/package.json

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

package/spacing/_primitives.scss

@@ -47,6 +47,7 @@ $primitive-scales: (
   140,
   160,
   240,
+  280,
   320,
   360,
   400,
@@ -101,6 +102,7 @@ $default-primitives: (
   140: 140px,
   160: 160px,
   240: 240px,
+  280: 280px,
   320: 320px,
   360: 360px,
   400: 400px,

package/spacing/_semantic.scss

@@ -53,6 +53,7 @@ $container-tones: (
   snug,
   tight,
   slim,
+  slender,
   narrow,
   compact,
   standard,
@@ -280,6 +281,10 @@ $semantic-spacings: (
         default: primitive.variable(240),
         compact: primitive.variable(240),
       ),
+      slender: (
+        default: primitive.variable(280),
+        compact: primitive.variable(280),
+      ),
       narrow: (
         default: primitive.variable(320),
         compact: primitive.variable(320),

package/spacing/typings.d.ts

@@ -1,7 +1,7 @@
 /**
  * Spacing primitive scales - 間距原始級距（對應 px 值）
  */
-export type SpacingScale = 0 | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 18 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 52 | 56 | 60 | 64 | 80 | 160 | 240 | 320 | 360 | 400 | 480 | 560 | 640 | 720 | 960 | 1140;
+export type SpacingScale = 0 | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 18 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 52 | 56 | 60 | 64 | 80 | 160 | 240 | 280 | 320 | 360 | 400 | 480 | 560 | 640 | 720 | 960 | 1140;
 /**
  * Spacing primitives configuration
  */
@@ -29,7 +29,7 @@ export type ElementTone = 'hairline' | 'tiny' | 'tight' | 'compact' | 'slim' | '
 /**
  * Container size tones - 容器尺寸調性
  */
-export type ContainerTone = 'collapsed' | 'tiny' | 'tight' | 'slim' | 'narrow' | 'compact' | 'standard' | 'balanced' | 'broad' | 'wide' | 'expanded' | 'max';
+export type ContainerTone = 'collapsed' | 'tiny' | 'tight' | 'slim' | 'slender' | 'narrow' | 'compact' | 'standard' | 'balanced' | 'broad' | 'wide' | 'expanded' | 'max';
 /**
  * Gap tones - 間隙調性
  */

package/transition/_transition.scss

@@ -3,31 +3,37 @@
 @use '../motion';
 
 @function entrance($property, $duration: moderate, $delay: 0ms) {
-  $duration-value: if(
-    meta.type-of($duration) == number or string.index(meta.inspect($duration), 'calc') != null,
-    $duration,
-    motion.duration($duration)
-  );
+  $duration-value: null;
+
+  @if meta.type-of($duration) == number or string.index(meta.inspect($duration), 'calc') {
+    $duration-value: $duration;
+  } @else {
+    $duration-value: motion.duration($duration);
+  }
 
   @return $property $duration-value motion.easing(entrance) $delay;
 }
 
 @function exit($property, $duration: moderate, $delay: 0ms) {
-  $duration-value: if(
-    meta.type-of($duration) == number or string.index(meta.inspect($duration), 'calc') != null,
-    $duration,
-    motion.duration($duration)
-  );
+  $duration-value: null;
+
+  @if meta.type-of($duration) == number or string.index(meta.inspect($duration), 'calc') {
+    $duration-value: $duration;
+  } @else {
+    $duration-value: motion.duration($duration);
+  }
 
   @return $property $duration-value motion.easing(exit) $delay;
 }
 
 @function standard($property, $duration: moderate, $delay: 0ms) {
-  $duration-value: if(
-    meta.type-of($duration) == number or string.index(meta.inspect($duration), 'calc') != null,
-    $duration,
-    motion.duration($duration)
-  );
+  $duration-value: null;
+
+  @if meta.type-of($duration) == number or string.index(meta.inspect($duration), 'calc') {
+    $duration-value: $duration;
+  } @else {
+    $duration-value: motion.duration($duration);
+  }
 
   @return $property $duration-value motion.easing(standard) $delay;
 }

package/typography/_semantic.scss

@@ -24,6 +24,7 @@ $semantic-types: (
   button-highlight,
   input,
   input-mono,
+  input-highlight,
   label-primary,
   label-primary-highlight,
   label-secondary
@@ -152,6 +153,12 @@ $semantic-typographies: (
     line-height: primitive.line-height-variable(functional),
     letter-spacing: primitive.letter-spacing-variable(0),
   ),
+  input-highlight: (
+    font-size: primitive.font-size-variable(14),
+    font-weight: primitive.font-weight-variable(medium),
+    line-height: primitive.line-height-variable(functional),
+    letter-spacing: primitive.letter-spacing-variable(0),
+  ),
   label-primary: (
     font-size: primitive.font-size-variable(14),
     font-weight: primitive.font-weight-variable(regular),

package/typography/typings.d.ts

@@ -3,7 +3,7 @@ export type TypographyPrimitiveFontWeight = 'regular' | 'medium' | 'semibold';
 export type TypographyPrimitiveFontSize = 24 | 18 | 16 | 14 | 12 | 10;
 export type TypographyPrimitiveLineHeight = 'h1' | 'h2' | 'h3' | 'body' | 'caption' | 'annotation' | 'functional';
 export type TypographyPrimitiveLetterSpacing = 0;
-export type TypographySemanticType = 'h1' | 'h2' | 'h3' | 'body' | 'body-highlight' | 'body-mono' | 'body-mono-highlight' | 'text-link-body' | 'text-link-caption' | 'caption' | 'caption-highlight' | 'annotation' | 'annotation-highlight' | 'button' | 'button-highlight' | 'input' | 'input-mono' | 'label-primary' | 'label-primary-highlight' | 'label-secondary';
+export type TypographySemanticType = 'h1' | 'h2' | 'h3' | 'body' | 'body-highlight' | 'body-mono' | 'body-mono-highlight' | 'text-link-body' | 'text-link-caption' | 'caption' | 'caption-highlight' | 'annotation' | 'annotation-highlight' | 'button' | 'button-highlight' | 'input' | 'input-mono' | 'input-highlight' | 'label-primary' | 'label-primary-highlight' | 'label-secondary';
 export type TypographySemanticProp = 'font-family' | 'font-size' | 'font-weight' | 'line-height' | 'letter-spacing';
 export declare const typographyPrimitivePrefix = "mzn-typography-primitive";
 export declare const typographySemanticPrefix = "mzn-typography";

package/utils/_list.scss

@@ -12,11 +12,14 @@
 
 @function flat-push($list, $values...) {
   @each $value in $values {
-    $pusher: if(
-      meta.type-of($value) == list,
-      meta.get-function('join', $module: list),
-      meta.get-function('append', $module: list)
-    );
+    $pusher: null;
+
+    @if meta.type-of($value) == list {
+      $pusher: meta.get-function('join', $module: list);
+    } @else {
+      $pusher: meta.get-function('append', $module: list);
+    }
+
     $list: meta.call($pusher, $list, $value);
   }