@mezzanine-ui/system 1.0.0-alpha.0 → 1.0.0-beta.0

package/effect/_effect.scss

@@ -18,15 +18,30 @@ $effect-values: (
     modal: (
       value: string.unquote('0 9px 28px 8px #{semantic.variable(shadow, dark-faint)}, 0 20px 24px -4px #{semantic.variable(shadow, dark-light)}, 0 3px 6px -4px #{semantic.variable(shadow, dark-ghost)}'),
     ),
-    table-sticky: (
+    drawer: (
+      value: -6px 0 10px 0 semantic.variable(shadow, dark),
+    ),
+    table-sticky-left: (
       value: 1px 0 4px 0 semantic.variable(shadow, dark),
     ),
+    table-sticky-right: (
+      value: -1px 0 4px 0 semantic.variable(shadow, dark),
+    ),
+    table-list-floating: (
+      value: 0px 6px 16px 0 semantic.variable(shadow, dark),
+    ),
     slider-handle: (
       value: 0 2px 3px 0 semantic.variable(shadow, brand),
     ),
     inner-top-and-bottom: (
       value: string.unquote('0 1px 1px 0 #{semantic.variable(shadow, light-faint)} inset, 0 -1px 1px 0 #{semantic.variable(shadow, light-faint)} inset, 0 0 12px 0 #{semantic.variable(shadow, dark)}'),
     ),
+    inner-top: (
+      value: string.unquote('0 1px 1px 0 #{semantic.variable(shadow, light-faint)} inset, 0 0 12px 0 #{semantic.variable(shadow, dark)}'),
+    ),
+    inner-bottom: (
+      value: string.unquote('0 -1px 1px 0 #{semantic.variable(shadow, light-faint)} inset, 0 0 12px 0 #{semantic.variable(shadow, dark)}'),
+    ),
   ),
   focus: (
     primary: (

package/package.json

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

package/palette/_primitives.scss

@@ -116,6 +116,7 @@ $default-primitives: (
   // 白色系 - 特殊級距: white, white-alpha-10/20/.../90
   white-base: (
     white: #FFF,
+    white-alpha-0: rgb(255 255 255 / 0%),
     white-alpha-5:  rgb(255 255 255 / 5%),
     white-alpha-10: rgb(255 255 255 / 10%),
     white-alpha-20: rgb(255 255 255 / 20%),
@@ -130,6 +131,7 @@ $default-primitives: (
   // 黑色系 - 特殊級距: black, black-alpha-3/5/8/10/20/.../90
   black-base: (
     black: #000,
+    black-alpha-0: rgb(0 0 0 / 0%),
     black-alpha-3: rgb(0 0 0 / 3%),
     black-alpha-5: rgb(0 0 0 / 5%),
     black-alpha-8: rgb(0 0 0 / 8%),

package/palette/_semantic.scss

@@ -50,6 +50,10 @@ $semantic-colors: (
       light: primitive.variable(gray, 700),
       dark: primitive.variable(gray, 950),
     ),
+    fixed-solid: (
+      light: primitive.variable(gray, 800),
+      dark: primitive.variable(gray, 800),
+    ),
     neutral-ghost: (
       light: primitive.variable(gray, 50),
       dark: primitive.variable(gray, 950),
@@ -320,6 +324,10 @@ $semantic-colors: (
     ),
   ),
   border: (
+    ghost: (
+      light: primitive.variable(black-base, black-alpha-0),
+      dark: primitive.variable(black-base, black-alpha-0),
+    ),
     fixed-light: (
       light: primitive.variable(white-base, white),
       dark: primitive.variable(white-base, white),
@@ -366,6 +374,10 @@ $semantic-colors: (
     ),
   ),
   separator: (
+    ghost: (
+      light: primitive.variable(black-base, black-alpha-0),
+      dark: primitive.variable(black-base, black-alpha-0),
+    ),
     neutral-faint: (
       light: primitive.variable(gray, 200),
       dark: primitive.variable(gray, 700),

package/spacing/_primitives.scss

@@ -25,13 +25,21 @@ $primitive-scales: (
   32,
   36,
   40,
+  44,
   48,
   52,
   56,
   60,
   64,
+  68,
   70,
+  76,
   80,
+  88,
+  92,
+  96,
+  100,
+  120,
   140,
   160,
   240,
@@ -43,7 +51,8 @@ $primitive-scales: (
   640,
   720,
   960,
-  1140
+  1140,
+  1280,
 );
 
 // 預設 spacing 值定義（px 會自動轉換為 rem）
@@ -66,13 +75,21 @@ $default-primitives: (
   32: 32px,
   36: 36px,
   40: 40px,
+  44: 44px,
   48: 48px,
   52: 52px,
   56: 56px,
   60: 60px,
   64: 64px,
+  68: 68px,
   70: 70px,
+  76: 76px,
   80: 80px,
+  88: 88px,
+  92: 92px,
+  96: 96px,
+  100: 100px,
+  120: 120px,
   140: 140px,
   160: 160px,
   240: 240px,
@@ -85,6 +102,7 @@ $default-primitives: (
   720: 720px,
   960: 960px,
   1140: 1140px,
+  1280: 1280px
 );
 
 // 驗證 scale 是否有效

package/spacing/_semantic.scss

@@ -37,9 +37,16 @@ $element-tones: (
 );
 
 $container-tones: (
+  minimal,
+  minimized,
   collapsed,
+  reduced,
+  condensed,
   compressed,
+  tightened,
   tiny,
+  medium,
+  small,
   snug,
   tight,
   slim,
@@ -50,7 +57,8 @@ $container-tones: (
   broad,
   wide,
   expanded,
-  max
+  max,
+  xwide
 );
 
 $horizontal-tones: (
@@ -71,9 +79,11 @@ $horizontal-tones: (
   relaxed,
   airy,
   breath,
+  loose,
   wide,
   max,
-  ultra
+  ultra,
+  xultra
 );
 
 $vertical-tones: (
@@ -81,13 +91,20 @@ $vertical-tones: (
   micro,
   tiny,
   tight,
+  tight-fixed,
   base,
   calm,
   comfort,
   roomy,
   spacious,
   generous,
-  relaxed
+  relaxed,
+  airy,
+  breath,
+  loose,
+  wide,
+  max,
+  ultra
 );
 
 $semantic-spacings: (
@@ -149,6 +166,10 @@ $semantic-spacings: (
         default: primitive.variable(36),
         compact: primitive.variable(32),
       ),
+      loose-fixed: (
+        default: primitive.variable(36),
+        compact: primitive.variable(36),
+      ),
       extra-wide: (
         default: primitive.variable(40),
         compact: primitive.variable(36),
@@ -157,35 +178,71 @@ $semantic-spacings: (
         default: primitive.variable(40),
         compact: primitive.variable(24),
       ),
+      wide-expanded: (
+        default: primitive.variable(40),
+        compact: primitive.variable(24),
+      ),
       expansive: (
         default: primitive.variable(60),
-        compact: primitive.variable(24),
+        compact: primitive.variable(56),
       ),
       extra: (
         default: primitive.variable(64),
         compact: primitive.variable(48),
       ),
+      ultra-fixed: (
+        default: primitive.variable(68),
+        compact: primitive.variable(68),
+      ),
       max: (
         default: primitive.variable(80),
         compact: primitive.variable(64),
       ),
     ),
     container: (
+      minimal: (
+        default: primitive.variable(36),
+        compact: primitive.variable(28),
+      ),
+      minimized: (
+        default: primitive.variable(40),
+        compact: primitive.variable(32),
+      ),
       collapsed: (
         default: primitive.variable(52),
         compact: primitive.variable(52),
       ),
+      reduced: (
+        default: primitive.variable(56),
+        compact: primitive.variable(48),
+      ),
+      condensed: (
+        default: primitive.variable(60),
+        compact: primitive.variable(52),
+      ),
       compressed: (
         default: primitive.variable(70),
         compact: primitive.variable(70),
       ),
+      tightened: (
+        default: primitive.variable(76),
+        compact: primitive.variable(68),
+      ),
       tiny: (
         default: primitive.variable(80),
         compact: primitive.variable(80),
       ),
+      medium: (
+        default: primitive.variable(96),
+        compact: primitive.variable(88),
+      ),
+      small: (
+        default: primitive.variable(100),
+        compact: primitive.variable(92),
+      ),
       snug: (
         default: primitive.variable(140),
-        compact: primitive.variable(140),
+        compact: primitive.variable(120),
       ),
       tight: (
         default: primitive.variable(160),
@@ -227,6 +284,10 @@ $semantic-spacings: (
         default: primitive.variable(960),
         compact: primitive.variable(960),
       ),
+      xwide: (
+        default: primitive.variable(1280),
+        compact: primitive.variable(1280),
+      ),
     ),
   ),
   gap: (
@@ -237,7 +298,7 @@ $semantic-spacings: (
     tiny: (
       default: primitive.variable(2),
       compact: primitive.variable(2),
-      ),
+    ),
     tight: (
       default: primitive.variable(4),
       compact: primitive.variable(2),
@@ -345,6 +406,10 @@ $semantic-spacings: (
         default: primitive.variable(32),
         compact: primitive.variable(28),
       ),
+      loose: (
+        default: primitive.variable(36),
+        compact: primitive.variable(32),
+      ),
       wide: (
         default: primitive.variable(40),
         compact: primitive.variable(36),
@@ -357,6 +422,10 @@ $semantic-spacings: (
         default: primitive.variable(64),
         compact: primitive.variable(56),
       ),
+      xultra: (
+        default: primitive.variable(80),
+        compact: primitive.variable(76),
+      ),
     ),
     vertical: (
       none: (
@@ -375,6 +444,10 @@ $semantic-spacings: (
         default: primitive.variable(6),
         compact: primitive.variable(4),
       ),
+      tight-fixed: (
+        default: primitive.variable(6),
+        compact: primitive.variable(6),
+      ),
       base: (
         default: primitive.variable(8),
         compact: primitive.variable(4),
@@ -397,11 +470,35 @@ $semantic-spacings: (
       ),
       generous: (
         default: primitive.variable(20),
-        compact: primitive.variable(14),
+        compact: primitive.variable(16),
       ),
       relaxed: (
         default: primitive.variable(24),
-        compact: primitive.variable(16),
+        compact: primitive.variable(20),
+      ),
+      airy: (
+        default: primitive.variable(28),
+        compact: primitive.variable(24),
+      ),
+      breath: (
+        default: primitive.variable(32),
+        compact: primitive.variable(28),
+      ),
+      loose: (
+        default: primitive.variable(36),
+        compact: primitive.variable(32),
+      ),
+      wide: (
+        default: primitive.variable(40),
+        compact: primitive.variable(36),
+      ),
+      max: (
+        default: primitive.variable(48),
+        compact: primitive.variable(44),
+      ),
+      ultra: (
+        default: primitive.variable(68),
+        compact: primitive.variable(64),
       ),
     ),
   ),