mm

packages/css/utility/align-content.css

@@ -0,0 +1,37 @@
+@layer utility {
+  .align-content-normal {
+    align-content: normal;
+  }
+
+  .align-content-center {
+    align-content: center;
+  }
+
+  .align-content-start {
+    align-content: flex-start;
+  }
+
+  .align-content-end {
+    align-content: flex-end;
+  }
+
+  .align-content-between {
+    align-content: space-between;
+  }
+
+  .align-content-around {
+    align-content: space-around;
+  }
+
+  .align-content-evenly {
+    align-content: space-evenly;
+  }
+
+  .align-content-baseline {
+    align-content: baseline;
+  }
+
+  .align-content-stretch {
+    align-content: stretch;
+  }
+}

packages/css/utility/align-items.css

@@ -0,0 +1,33 @@
+@layer utility {
+  .items-start {
+    align-items: flex-start;
+  }
+
+  .items-end {
+    align-items: flex-end;
+  }
+
+  .items-end-safe {
+    align-items: safe flex-end;
+  }
+
+  .items-center {
+    align-items: center;
+  }
+
+  .items-center-safe {
+    align-items: safe center;
+  }
+
+  .items-baseline {
+    align-items: baseline;
+  }
+
+  .items-baseline-last {
+    align-items: last baseline;
+  }
+
+  .items-stretch {
+    align-items: stretch;
+  }
+}

packages/css/utility/align-self.css

@@ -0,0 +1,37 @@
+@layer utility {
+  .align-self-auto {
+    align-self: auto;
+  }
+
+  .align-self-start {
+    align-self: flex-start;
+  }
+
+  .align-self-end {
+    align-self: flex-end;
+  }
+
+  .align-self-end-safe {
+    align-self: safe flex-end;
+  }
+
+  .align-self-center {
+    align-self: center;
+  }
+
+  .align-self-center-safe {
+    align-self: safe center;
+  }
+
+  .align-self-stretch {
+    align-self: stretch;
+  }
+
+  .align-self-baseline {
+    align-self: baseline;
+  }
+
+  .align-self-baseline-last {
+    align-self: last baseline;
+  }
+}

packages/css/utility/animate.css

@@ -0,0 +1,105 @@
+@layer utility {
+  .animate-fade-in-down {
+    animation: var(--animate-fade-in-down);
+
+    @keyframes fade-in-down {
+      from {
+        opacity: 0;
+        transform: translate3d(0, -100%, 0);
+      }
+      to {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+      }
+    }
+  }
+  .animate-fade-out-down {
+    animation: var(--animate-fade-out-down);
+  }
+
+  @keyframes fade-out-down {
+    from {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      opacity: 0;
+      transform: translate3d(0, 100%, 0);
+    }
+  }
+  .animate-fade-in-up {
+    animation: var(--animate-fade-in-up);
+  }
+
+  @keyframes fade-in-up {
+    from {
+      opacity: 0;
+      transform: translate3d(0, 100%, 0);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+  }
+  .animate-fade-out-up {
+    animation: var(--animate-fade-out-up);
+  }
+
+  @keyframes fade-out-up {
+    from {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      opacity: 0;
+      transform: translate3d(0, -100%, 0);
+    }
+  }
+  .animate-spin {
+    animation: var(--animate-spin);
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  }
+  .animate-ping {
+    animation: var(--animate-ping);
+
+    @keyframes ping {
+      75%,
+      100% {
+        transform: scale(2);
+        opacity: 0;
+      }
+    }
+  }
+  .animate-pulse {
+    animation: var(--animate-pulse);
+
+    @keyframes pulse {
+      50% {
+        opacity: 0.5;
+      }
+    }
+  }
+  .animate-bounce {
+    animation: var(--animate-bounce); /* bounce 1s infinite */
+
+    @keyframes bounce {
+      0%,
+      100% {
+        transform: translateY(-25%);
+        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+      }
+      50% {
+        transform: none;
+        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+      }
+    }
+  }
+  .animate-none {
+    animation: none;
+  }
+}

packages/css/utility/border-radius.css

@@ -0,0 +1,23 @@
+@layer utility {
+  .rounded-full {
+    border-radius: 9999px;
+  }
+  .rounded-none {
+    border-radius: 0;
+  }
+  .rounded-xs {
+    border-radius: var(--radius-xs);
+  }
+  .rounded-sm {
+    border-radius: var(--radius-sm);
+  }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
+  .rounded-xl {
+    border-radius: var(--radius-xl);
+  }
+}

packages/css/utility/box-decoration.css

@@ -0,0 +1,9 @@
+@layer utility {
+  .box-decoration-clone {
+    box-decoration-break: clone;
+  }
+
+  .box-decoration-slice {
+    box-decoration-break: slice;
+  }
+}

packages/css/utility/box-inside.css

@@ -0,0 +1,17 @@
+@layer utility {
+  .break-inside-auto {
+    break-inside: auto;
+  }
+
+  .break-inside-avoid {
+    break-inside: avoid;
+  }
+
+  .break-inside-avoid-page {
+    break-inside: avoid-page;
+  }
+
+  .break-inside-avoid-column {
+    break-inside: avoid-column;
+  }
+}

packages/css/utility/box-sizing.css

@@ -0,0 +1,9 @@
+@layer utility {
+  .box-sizing-border {
+    box-sizing: border-box;
+  }
+
+  .box-sizing-content {
+    box-sizing: content-box;
+  }
+}

packages/css/utility/brand.css

@@ -0,0 +1,42 @@
+@layer utility {
+  .brand-info {
+    --brand-bg: var(--info-bg);
+    --brand-bg-hover: var(--info-bg-hover);
+    --brand-bg-active: var(--info-bg-active);
+    --brand-bg-low: var(--info-bg-low);
+    --brand-bg-low-hover: var(--info-bg-low-hover);
+    --brand-bg-low-active: var(--info-bg-low-active);
+  }
+  .brand-danger {
+    --brand-bg: var(--danger-bg);
+    --brand-bg-hover: var(--danger-bg-hover);
+    --brand-bg-active: var(--danger-bg-active);
+    --brand-bg-low: var(--danger-bg-low);
+    --brand-bg-low-hover: var(--danger-bg-low-hover);
+    --brand-bg-low-active: var(--danger-bg-low-active);
+  }
+  .brand-success {
+    --brand-bg: var(--success-bg);
+    --brand-bg-hover: var(--success-bg-hover);
+    --brand-bg-active: var(--success-bg-active);
+    --brand-bg-low: var(--success-bg-low);
+    --brand-bg-low-hover: var(--success-bg-low-hover);
+    --brand-bg-low-active: var(--success-bg-low-active);
+  }
+  .brand-warning {
+    --brand-bg: var(--warning-bg);
+    --brand-bg-hover: var(--warning-bg-hover);
+    --brand-bg-active: var(--warning-bg-active);
+    --brand-bg-low: var(--warning-bg-low);
+    --brand-bg-low-hover: var(--warning-bg-low-hover);
+    --brand-bg-low-active: var(--warning-bg-low-active);
+  }
+  .brand-default {
+    --brand-bg: var(--default-bg);
+    --brand-bg-hover: var(--default-bg-hover);
+    --brand-bg-active: var(--default-bg-active);
+    --brand-bg-low: var(--default-bg-low);
+    --brand-bg-low-hover: var(--default-bg-low-hover);
+    --brand-bg-low-active: var(--default-bg-low-active);
+  }
+}

packages/css/utility/break-after.css

@@ -0,0 +1,33 @@
+@layer utility {
+  .break-after-auto {
+    break-after: auto;
+  }
+
+  .break-after-avoid {
+    break-after: avoid;
+  }
+
+  .break-after-all {
+    break-after: all;
+  }
+
+  .break-after-avoid-page {
+    break-after: avoid-page;
+  }
+
+  .break-after-page {
+    break-after: page;
+  }
+
+  .break-after-left {
+    break-after: left;
+  }
+
+  .break-after-right {
+    break-after: right;
+  }
+
+  .break-after-column {
+    break-after: column;
+  }
+}

packages/css/utility/break-before.css

@@ -0,0 +1,33 @@
+@layer utility {
+  .break-before-auto {
+    break-before: auto;
+  }
+
+  .break-before-avoid {
+    break-before: avoid;
+  }
+
+  .break-before-all {
+    break-before: all;
+  }
+
+  .break-before-avoid-page {
+    break-before: avoid-page;
+  }
+
+  .break-before-page {
+    break-before: page;
+  }
+
+  .break-before-left {
+    break-before: left;
+  }
+
+  .break-before-right {
+    break-before: right;
+  }
+
+  .break-before-column {
+    break-before: column;
+  }
+}

packages/css/utility/cursor.css

@@ -0,0 +1,111 @@
+@layer utility {
+  /* ===== 基础光标 ===== */
+  .cursor-auto {
+    cursor: auto;
+  }
+  .cursor-default {
+    cursor: default;
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .cursor-wait {
+    cursor: wait;
+  }
+  .cursor-text {
+    cursor: text;
+  }
+  .cursor-move {
+    cursor: move;
+  }
+  .cursor-help {
+    cursor: help;
+  }
+  .cursor-not-allowed {
+    cursor: not-allowed;
+  }
+
+  /* ===== 拖拽 / 抓取 ===== */
+  .cursor-grab {
+    cursor: grab;
+  }
+  .cursor-grabbing {
+    cursor: grabbing;
+  }
+
+  /* ===== 调整大小（通用 & 方向）===== */
+  .cursor-resize {
+    cursor: resize;
+  }
+  .cursor-ew-resize {
+    cursor: ew-resize;
+  }
+  .cursor-ns-resize {
+    cursor: ns-resize;
+  }
+  .cursor-nesw-resize {
+    cursor: nesw-resize;
+  }
+  .cursor-nwse-resize {
+    cursor: nwse-resize;
+  }
+  .cursor-col-resize {
+    cursor: col-resize;
+  }
+  .cursor-row-resize {
+    cursor: row-resize;
+  }
+
+  .cursor-n-resize {
+    cursor: n-resize;
+  }
+  .cursor-e-resize {
+    cursor: e-resize;
+  }
+  .cursor-s-resize {
+    cursor: s-resize;
+  }
+  .cursor-w-resize {
+    cursor: w-resize;
+  }
+  .cursor-ne-resize {
+    cursor: ne-resize;
+  }
+  .cursor-nw-resize {
+    cursor: nw-resize;
+  }
+  .cursor-se-resize {
+    cursor: se-resize;
+  }
+  .cursor-sw-resize {
+    cursor: sw-resize;
+  }
+
+  /* ===== 视觉反馈 ===== */
+  .cursor-crosshair {
+    cursor: crosshair;
+  }
+  .cursor-progress {
+    cursor: progress;
+  }
+  .cursor-no-drop {
+    cursor: no-drop;
+  }
+  .cursor-vertical-text {
+    cursor: vertical-text;
+  }
+
+  /* ===== 现代 / 扩展光标 ===== */
+  .cursor-zoom-in {
+    cursor: zoom-in;
+  }
+  .cursor-zoom-out {
+    cursor: zoom-out;
+  }
+  .cursor-alias {
+    cursor: alias;
+  }
+  .cursor-copy {
+    cursor: copy;
+  }
+}

packages/css/utility/display.css

@@ -0,0 +1,90 @@
+@layer utility {
+  /* 基础 display */
+  .display-inline {
+    display: inline;
+  }
+
+  .display-block {
+    display: block;
+  }
+
+  .display-inline-block {
+    display: inline-block;
+  }
+
+  .display-flow-root {
+    display: flow-root;
+  }
+
+  .display-contents {
+    display: contents;
+  }
+
+  .display-none {
+    display: none;
+  }
+
+  /* Flex */
+  .display-flex {
+    display: flex;
+  }
+
+  .display-inline-flex {
+    display: inline-flex;
+  }
+
+  /* Grid */
+  .display-grid {
+    display: grid;
+  }
+
+  .display-inline-grid {
+    display: inline-grid;
+  }
+
+  /* Table */
+  .display-table {
+    display: table;
+  }
+
+  .display-inline-table {
+    display: inline-table;
+  }
+
+  .display-table-caption {
+    display: table-caption;
+  }
+
+  .display-table-cell {
+    display: table-cell;
+  }
+
+  .display-table-column {
+    display: table-column;
+  }
+
+  .display-table-column-group {
+    display: table-column-group;
+  }
+
+  .display-table-footer-group {
+    display: table-footer-group;
+  }
+
+  .display-table-header-group {
+    display: table-header-group;
+  }
+
+  .display-table-row-group {
+    display: table-row-group;
+  }
+
+  .display-table-row {
+    display: table-row;
+  }
+
+  /* List */
+  .display-list-item {
+    display: list-item;
+  }
+}

packages/css/utility/flex-direction.css

@@ -0,0 +1,14 @@
+@layer utility {
+  .flex-direction-row {
+    flex-direction: row;
+  }
+  .flex-direction-row-reverse {
+    flex-direction: row-reverse;
+  }
+  .flex-direction-col {
+    flex-direction: column;
+  }
+  .flex-direction-col-reverse {
+    flex-direction: column-reverse;
+  }
+}

packages/css/utility/flex-wrap.css

@@ -0,0 +1,13 @@
+@layer utility {
+  .flex-wrap-nowrap {
+    flex-wrap: nowrap;
+  }
+
+  .flex-wrap-wrap {
+    flex-wrap: wrap;
+  }
+
+  .flex-wrap-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+}

packages/css/utility/font-family.css

@@ -0,0 +1,11 @@
+@layer utility {
+  .font-family-sans {
+    font-family: var(--font-sans);
+  }
+  .font-family-serif {
+    font-family: var(--font-serif);
+  }
+  .font-family-mono {
+    font-family: var(--font-mono);
+  }
+}

packages/css/utility/font-size.css

@@ -0,0 +1,38 @@
+@layer utility {
+  .text-xs {
+    /* 12px 支持rem字体放大 */
+    font-size: var(--font-size-xs);
+    /* 不能超过 16px */
+    line-height: var(--line-height-xs);
+  }
+  .text-sm {
+    /* 14px 支持rem字体放大 */
+    font-size: var(--font-size-sm);
+    /* 不能超过 20px */
+    line-height: var(--line-height-sm);
+  }
+  .text-md {
+    /* 16px 支持rem字体放大 */
+    font-size: var(--font-size-md);
+    /* 不能超过 24px */
+    line-height: var(--line-height-md);
+  }
+  .text-lg {
+    /* 18px 支持rem字体放大 */
+    font-size: var(--font-size-lg);
+    /* 不能超过 28px */
+    line-height: var(--line-height-lg);
+  }
+  .text-xl {
+    /* 24px 支持rem字体放大 */
+    font-size: var(--font-size-2xl);
+    /* 不能超过 32px */
+    line-height: var(--line-height-2xl);
+  }
+  .text-2xl {
+    /* 30px 支持rem字体放大 */
+    font-size: var(--font-size-2xl);
+    /* 不能超过 36px */
+    line-height: var(--line-height-2xl);
+  }
+}

packages/css/utility/font-weight.css

@@ -0,0 +1,20 @@
+@layer utility {
+  .font-weight-light {
+    font-weight: 300;
+  }
+  .font-weight-normal {
+    font-weight: 400;
+  }
+  .font-weight-extranormal {
+    font-weight: 500;
+  }
+  .font-weight-semibold {
+    font-weight: 600;
+  }
+  .font-weight-bold {
+    font-weight: 700;
+  }
+  .font-weight-extrabold {
+    font-weight: 700;
+  }
+}

packages/css/utility/gap.css

@@ -0,0 +1,20 @@
+@layer utility {
+  .gap-xs {
+    /* 2px */
+    gap: calc(var(--spacing));
+  }
+  .gap-sm {
+    /* 4px */
+    gap: calc(var(--spacing) * 2);
+  }
+  .gap-md {
+    /* 6px */
+    gap: calc(var(--spacing) * 3);
+  }
+  .gap-lg {
+    gap: calc(var(--spacing) * 2);
+  }
+  .gap-xl {
+    gap: calc(var(--spacing) * 2.5);
+  }
+}

packages/css/utility/height.css

@@ -0,0 +1,45 @@
+@layer utility {
+  .h-item-xs {
+    /* 24px minimum touch size for text line */
+    height: var(--height-item-xs);
+  }
+  .h-item-sm {
+    /* 28px save space for most used size */
+    height: var(--height-item-sm);
+  }
+  .h-item-md {
+    /* 34px most used size */
+    height: var(--height-item-md);
+  }
+  .h-item-lg {
+    /* 44px maximum touch size without waste */
+    height: var(--height-item-lg);
+  }
+  .h-item-xl {
+    /* 64px navigation bar */
+    height: var(--height-item-xl);
+  }
+  .h-item-2xl {
+    /* 64px navigation bar */
+    height: var(--height-item-2xl);
+  }
+  /* -------------- */
+  .h-inline-xs {
+    height: calc(var(--font-size-xs) * var(--line-height-xs));
+  }
+  .h-inline-sm {
+    height: calc(var(--font-size-sm) * var(--line-height-sm));
+  }
+  .h-inline-md {
+    height: calc(var(--font-size-md) * var(--line-height-md));
+  }
+  .h-inline-lg {
+    height: calc(var(--font-size-lg) * var(--line-height-lg));
+  }
+  .h-inline-xl {
+    height: calc(var(--font-size-xl) * var(--line-height-xl));
+  }
+  .h-inline-2xl {
+    height: calc(var(--font-size-2xl) * var(--line-height-2xl));
+  }
+}

packages/css/utility/justify-content.css

@@ -0,0 +1,45 @@
+@layer utility {
+  .justify-start {
+    justify-content: flex-start;
+  }
+
+  .justify-end {
+    justify-content: flex-end;
+  }
+
+  .justify-end-safe {
+    justify-content: safe flex-end;
+  }
+
+  .justify-center {
+    justify-content: center;
+  }
+
+  .justify-center-safe {
+    justify-content: safe center;
+  }
+
+  .justify-between {
+    justify-content: space-between;
+  }
+
+  .justify-around {
+    justify-content: space-around;
+  }
+
+  .justify-evenly {
+    justify-content: space-evenly;
+  }
+
+  .justify-stretch {
+    justify-content: stretch;
+  }
+
+  .justify-baseline {
+    justify-content: baseline;
+  }
+
+  .justify-normal {
+    justify-content: normal;
+  }
+}

packages/css/utility/justify-items.css

@@ -0,0 +1,29 @@
+@layer utility {
+  .justify-items-start {
+    justify-items: start;
+  }
+
+  .justify-items-end {
+    justify-items: end;
+  }
+
+  .justify-items-end-safe {
+    justify-items: safe end;
+  }
+
+  .justify-items-center {
+    justify-items: center;
+  }
+
+  .justify-items-center-safe {
+    justify-items: safe center;
+  }
+
+  .justify-items-stretch {
+    justify-items: stretch;
+  }
+
+  .justify-items-normal {
+    justify-items: normal;
+  }
+}

packages/css/utility/justify-self.css

@@ -0,0 +1,29 @@
+@layer utility {
+  .justify-self-auto {
+    justify-self: auto;
+  }
+
+  .justify-self-start {
+    justify-self: start;
+  }
+
+  .justify-self-center {
+    justify-self: center;
+  }
+
+  .justify-self-center-safe {
+    justify-self: safe center;
+  }
+
+  .justify-self-end {
+    justify-self: end;
+  }
+
+  .justify-self-end-safe {
+    justify-self: safe end;
+  }
+
+  .justify-self-stretch {
+    justify-self: stretch;
+  }
+}

packages/css/utility/margin-block.css

@@ -0,0 +1,58 @@
+@layer utility {
+  .my-e-none {
+    margin-block-end: 0;
+  }
+  .my-e-xs {
+    margin-block-end: var(--margin-xs);
+  }
+  .my-e-sm {
+    margin-block-end: var(--margin-sm);
+  }
+  .my-e-md {
+    margin-block-end: var(--margin-md);
+  }
+  .my-e-lg {
+    margin-block-end: var(--margin-lg);
+  }
+  .my-e-xl {
+    margin-block-end: var(--margin-xl);
+  }
+  /* ------------------ */
+  .my-s-none {
+    margin-block-start: 0;
+  }
+  .my-s-xs {
+    margin-block-start: var(--margin-xs);
+  }
+  .my-s-sm {
+    margin-block-start: var(--margin-sm);
+  }
+  .my-s-md {
+    margin-block-start: var(--margin-md);
+  }
+  .my-s-lg {
+    margin-block-start: var(--margin-lg);
+  }
+  .my-s-xl {
+    margin-block-start: var(--margin-xl);
+  }
+  /* --------------------- */
+  .my-none {
+    margin-block: 0;
+  }
+  .my-xs {
+    margin-block: var(--margin-xs);
+  }
+  .my-sm {
+    margin-block: var(--margin-sm);
+  }
+  .my-md {
+    margin-block: var(--margin-md);
+  }
+  .my-lg {
+    margin-block: var(--margin-lg);
+  }
+  .my-xl {
+    margin-block: var(--margin-xl);
+  }
+}

packages/css/utility/margin-inline.css

@@ -0,0 +1,58 @@
+@layer utility {
+  .mx-e-none {
+    margin-inline-end: 0;
+  }
+  .mx-e-xs {
+    margin-inline-end: var(--margin-xs);
+  }
+  .mx-e-sm {
+    margin-inline-end: var(--margin-sm);
+  }
+  .mx-e-md {
+    margin-inline-end: var(--margin-md);
+  }
+  .mx-e-lg {
+    margin-inline-end: var(--margin-lg);
+  }
+  .mx-e-xl {
+    margin-inline-end: var(--margin-xl);
+  }
+  /* ------------------ */
+  .mx-s-none {
+    margin-inline-start: 0;
+  }
+  .mx-s-xs {
+    margin-inline-start: var(--margin-xs);
+  }
+  .mx-s-sm {
+    margin-inline-start: var(--margin-sm);
+  }
+  .mx-s-md {
+    margin-inline-start: var(--margin-md);
+  }
+  .mx-s-lg {
+    margin-inline-start: var(--margin-lg);
+  }
+  .mx-s-xl {
+    margin-inline-start: var(--margin-xl);
+  }
+  /* --------------------- */
+  .mx-none {
+    margin-inline: 0;
+  }
+  .mx-xs {
+    margin-inline: var(--margin-xs);
+  }
+  .mx-sm {
+    margin-inline: var(--margin-sm);
+  }
+  .mx-md {
+    margin-inline: var(--margin-md);
+  }
+  .mx-lg {
+    margin-inline: var(--margin-lg);
+  }
+  .mx-xl {
+    margin-inline: var(--margin-xl);
+  }
+}

packages/css/utility/overflow.css

@@ -0,0 +1,61 @@
+@layer utility {
+  .overflow-auto {
+    overflow: auto;
+  }
+
+  .overflow-hidden {
+    overflow: hidden;
+  }
+
+  .overflow-clip {
+    overflow: clip;
+  }
+
+  .overflow-visible {
+    overflow: visible;
+  }
+
+  .overflow-scroll {
+    overflow: scroll;
+  }
+
+  .overflow-x-auto {
+    overflow-x: auto;
+  }
+
+  .overflow-y-auto {
+    overflow-y: auto;
+  }
+
+  .overflow-x-hidden {
+    overflow-x: hidden;
+  }
+
+  .overflow-y-hidden {
+    overflow-y: hidden;
+  }
+
+  .overflow-x-clip {
+    overflow-x: clip;
+  }
+
+  .overflow-y-clip {
+    overflow-y: clip;
+  }
+
+  .overflow-x-visible {
+    overflow-x: visible;
+  }
+
+  .overflow-y-visible {
+    overflow-y: visible;
+  }
+
+  .overflow-x-scroll {
+    overflow-x: scroll;
+  }
+
+  .overflow-y-scroll {
+    overflow-y: scroll;
+  }
+}

packages/css/utility/overscroll-behavior.css

@@ -0,0 +1,37 @@
+@layer utility {
+  .overscroll-auto {
+    overscroll-behavior: auto;
+  }
+
+  .overscroll-contain {
+    overscroll-behavior: contain;
+  }
+
+  .overscroll-none {
+    overscroll-behavior: none;
+  }
+
+  .overscroll-x-auto {
+    overscroll-behavior-x: auto;
+  }
+
+  .overscroll-x-contain {
+    overscroll-behavior-x: contain;
+  }
+
+  .overscroll-x-none {
+    overscroll-behavior-x: none;
+  }
+
+  .overscroll-y-auto {
+    overscroll-behavior-y: auto;
+  }
+
+  .overscroll-y-contain {
+    overscroll-behavior-y: contain;
+  }
+
+  .overscroll-y-none {
+    overscroll-behavior-y: none;
+  }
+}

packages/css/utility/padding-long.css

@@ -0,0 +1,21 @@
+@layer utility {
+  .px-long-xs {
+    /* 6px */
+    padding-inline: var(--padding-long-xs);
+  }
+  .px-long-sm {
+    /* 8px */
+    padding-inline: var(--padding-long-sm);
+  }
+  .px-long-md {
+    /* 10px */
+    padding-inline: var(--padding-long-md);
+  }
+  .px-long-lg {
+    /* 16px */
+    padding-inline: var(--padding-long-lg);
+  }
+  .px-long-xl {
+    padding-inline: var(--padding-long-xl);
+  }
+}

packages/css/utility/padding-short.css

@@ -0,0 +1,43 @@
+@layer utility {
+  .px-none {
+    padding-inline: 0px;
+  }
+  .px-xs {
+    /* 6px */
+    padding-inline: var(--padding-xs);
+  }
+  .px-sm {
+    /* 8px */
+    padding-inline: var(--padding-sm);
+  }
+  .px-md {
+    /* 10px */
+    padding-inline: var(--padding-md);
+  }
+  .px-lg {
+    /* 16px */
+    padding-inline: var(--padding-lg);
+  }
+  .px-xl {
+    padding-inline: var(--padding-xl);
+  }
+  /* ------------------------ */
+  .py-none {
+    padding-block: 0px;
+  }
+  .py-xs {
+    padding-block: var(--padding-xs);
+  }
+  .py-sm {
+    padding-block: var(--padding-sm);
+  }
+  .py-md {
+    padding-block: var(--padding-md);
+  }
+  .py-lg {
+    padding-block: var(--padding-lg);
+  }
+  .py-xl {
+    padding-block: var(--padding-xl);
+  }
+}

packages/css/utility/position.css

@@ -0,0 +1,21 @@
+@layer utility {
+  .position-static {
+    position: static;
+  }
+
+  .position-fixed {
+    position: fixed;
+  }
+
+  .position-absolute {
+    position: absolute;
+  }
+
+  .position-relative {
+    position: relative;
+  }
+
+  .position-sticky {
+    position: sticky;
+  }
+}

packages/css/utility/screen-reader.css

@@ -0,0 +1,23 @@
+@layer utility {
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+  .sr-only-cancel {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    clip-path: none;
+    white-space: normal;
+  }
+}

packages/css/utility/theme.css

@@ -0,0 +1,11 @@
+@layer utility {
+  .theme-light {
+    --base-fg: var(--color-gray-950);
+    --base-bg: var(--color-white);
+  }
+
+  .theme-dark {
+    --base-fg: var(--color-gray-50);
+    --base-bg: var(--color-black);
+  }
+}

packages/css/utility/width.css

@@ -0,0 +1,38 @@
+@layer utility {
+  .w-item-xs {
+    /* 24px minimum touch size for text line */
+    width: var(--height-item-xs);
+  }
+  .w-item-sm {
+    /* 30px save space for most used size */
+    width: var(--height-item-sm);
+  }
+  .w-item-md {
+    /* 34px most used size */
+    width: var(--height-item-lg);
+  }
+  .w-item-lg {
+    /* 44px maximum touch size without waste */
+    width: var(--height-item-lg);
+  }
+  .w-item-xl {
+    /* 64px navigation bar */
+    width: var(--height-item-xl);
+  }
+  /* ---------------------------------------------------- */
+  .w-inline-xs {
+    width: calc(var(--font-size-xs) * var(--line-height-xs));
+  }
+  .w-inline-sm {
+    width: calc(var(--font-size-sm) * var(--line-height-sm));
+  }
+  .w-inline-md {
+    width: calc(var(--font-size-md) * var(--line-height-md));
+  }
+  .w-inline-lg {
+    width: calc(var(--font-size-lg) * var(--line-height-lg));
+  }
+  .w-inline-xl {
+    width: calc(var(--font-size-xl) * var(--line-height-xl));
+  }
+}

packages/css/utility/z-index.css

@@ -0,0 +1,43 @@
+@layer utility {
+  /* 自动 & 零 */
+  .z-auto {
+    z-index: auto;
+  }
+  .z-0 {
+    z-index: 0;
+  }
+
+  /* 正值 */
+  .z-10 {
+    z-index: 10;
+  }
+  .z-20 {
+    z-index: 20;
+  }
+  .z-30 {
+    z-index: 30;
+  }
+  .z-40 {
+    z-index: 40;
+  }
+  .z-50 {
+    z-index: 50;
+  }
+
+  /* 负值（negative） */
+  .z-n-10 {
+    z-index: -10;
+  }
+  .z-n-20 {
+    z-index: -20;
+  }
+  .z-n-30 {
+    z-index: -30;
+  }
+  .z-n-40 {
+    z-index: -40;
+  }
+  .z-n-50 {
+    z-index: -50;
+  }
+}