@fpkit/acss 3.1.1 → 3.2.1

package/src/sass/_globals.scss

@@ -2,12 +2,41 @@
   --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
     Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
     "Segoe UI Symbol", "Noto Color Emoji";
+
+  // Boolean-like utility variables for conditional CSS logic
+  // Usage: property: var(--condition, var(--TRUE)) value;
+  // --TRUE (initial) applies the value, --FALSE (empty) skips it
   --TRUE: initial;
   --FALSE: ;
+
   --fs-weight: 500;
   --min-w: 20rem;
   --border-radius: 0.25rem;
   --padding: 1.5rem;
+
+  // Unified spacing scale (used by Box, Stack, Cluster, Grid)
+  --spacing-0: 0;
+  --spacing-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);   /* 4-8px */
+  --spacing-sm: clamp(0.5rem, 0.45rem + 0.35vw, 0.75rem);  /* 8-12px */
+  --spacing-md: clamp(0.75rem, 0.65rem + 0.45vw, 1.125rem); /* 12-18px */
+  --spacing-lg: clamp(1rem, 0.85rem + 0.6vw, 1.5rem);      /* 16-24px */
+  --spacing-xl: clamp(1.5rem, 1.25rem + 0.75vw, 2rem);     /* 24-32px */
+
+  // Max width scale (for Box component)
+  --box-max-width-xs: 30rem;    /* 480px */
+  --box-max-width-sm: 40rem;    /* 640px */
+  --box-max-width-md: 48rem;    /* 768px */
+  --box-max-width-lg: 64rem;    /* 1024px */
+  --box-max-width-xl: 80rem;    /* 1280px */
+  --box-max-width-container: 75rem; /* 1200px */
+
+  // Border radius scale (for Box component)
+  --box-radius-xs: 0.125rem;    /* 2px */
+  --box-radius-sm: 0.25rem;     /* 4px */
+  --box-radius-md: 0.375rem;    /* 6px */
+  --box-radius-lg: 0.5rem;      /* 8px */
+  --box-radius-xl: 0.75rem;     /* 12px */
+  --box-radius-full: 9999px;
 }
 
 html {
@@ -16,7 +45,7 @@ html {
 }
 
 body {
-  display: var(--body-dsp, flex);
+  display: var(--body-display, flex);
   min-height: 100%;
   flex-direction: var(--body-direction, column);
   min-width: 20.3125rem;
@@ -37,31 +66,18 @@ body {
     z-index: 100;
     transition: top 0.3s;
     border-radius: 0;
-    // padding: 1rem;
-    background-color: whitesmoke;
+    background-color: var(--color-skip-link-bg, #f5f5f5);
     &:focus {
       top: 0;
     }
   }
 }
 
-div:empty {
-  display: none;
-}
-
 main,
 header,
 footer,
 section {
   font-size: var(--fs-0);
-  > section,
-  > div {
-    margin-inline: auto;
-    width: var(--content-w, 80%);
-  }
-  > div {
-    text-align: center;
-  }
 }
 
 section {
@@ -72,7 +88,6 @@ section {
 }
 
 p {
-  max-width: 75ch;
   max-width: 75ch;
   font-size: var(--fs-0);
   line-height: 1.6;
@@ -110,8 +125,12 @@ sup {
 }
 
 blockquote {
-  padding: 1rem;
-  border-left: 5px lightgray solid;
+  --blockquote-padding: 1rem;
+  --blockquote-border-width: 0.3125rem;
+  --blockquote-border-style: solid;
+  --blockquote-border-color: var(--color-border, #d3d3d3);
+  padding: var(--blockquote-padding);
+  border-left: var(--blockquote-border-width) var(--blockquote-border-style) var(--blockquote-border-color);
 }
 
 strong {
@@ -131,11 +150,13 @@ h6 {
 }
 
 hr {
-  --hr-h: 0.0625rem;
-  --hr-color: lightgray;
-  --hr-my: 1.5rem;
-  --hr-style: dotted;
+  --hr-border-width: 0.0625rem;
+  --hr-border-color: var(--color-border-subtle, #d3d3d3);
+  --hr-margin-block: 1.5rem;
+  --hr-border-style: solid;
   border: none;
-  border-bottom: var(--hr-h) var(--hr-style) var(--hr-color);
-  margin-block: var(--hr-my);
+  border-bottom: var(--hr-border-width) var(--hr-border-style) var(--hr-border-color);
+  margin-block: var(--hr-margin-block);
+  display: block;
+  min-width: 100%;
 }

package/src/sass/_styles.scss

@@ -1,2 +1,2 @@
-@use "./styles/shadows";
-@use "./styles/colors";
+@forward "./styles/shadows";
+@forward "./styles/colors";

package/src/styles/box/box.css

@@ -0,0 +1,220 @@
+/**
+ * Box Component Styles
+ *
+ * Utility classes for the Box layout primitive.
+ * All spacing values use the unified spacing scale from globals.
+ * All units are in rem (1rem = 16px base).
+ */
+.box-padding-0 {
+  padding: 0;
+}
+
+.box-padding-xs {
+  padding: var(--spacing-xs);
+}
+
+.box-padding-sm {
+  padding: var(--spacing-sm);
+}
+
+.box-padding-md {
+  padding: var(--spacing-md);
+}
+
+.box-padding-lg {
+  padding: var(--spacing-lg);
+}
+
+.box-padding-xl {
+  padding: var(--spacing-xl);
+}
+
+.box-padding-inline-0 {
+  padding-inline: 0;
+}
+
+.box-padding-inline-xs {
+  padding-inline: var(--spacing-xs);
+}
+
+.box-padding-inline-sm {
+  padding-inline: var(--spacing-sm);
+}
+
+.box-padding-inline-md {
+  padding-inline: var(--spacing-md);
+}
+
+.box-padding-inline-lg {
+  padding-inline: var(--spacing-lg);
+}
+
+.box-padding-inline-xl {
+  padding-inline: var(--spacing-xl);
+}
+
+.box-padding-block-0 {
+  padding-block: 0;
+}
+
+.box-padding-block-xs {
+  padding-block: var(--spacing-xs);
+}
+
+.box-padding-block-sm {
+  padding-block: var(--spacing-sm);
+}
+
+.box-padding-block-md {
+  padding-block: var(--spacing-md);
+}
+
+.box-padding-block-lg {
+  padding-block: var(--spacing-lg);
+}
+
+.box-padding-block-xl {
+  padding-block: var(--spacing-xl);
+}
+
+.box-margin-0 {
+  margin: 0;
+}
+
+.box-margin-xs {
+  margin: var(--spacing-xs);
+}
+
+.box-margin-sm {
+  margin: var(--spacing-sm);
+}
+
+.box-margin-md {
+  margin: var(--spacing-md);
+}
+
+.box-margin-lg {
+  margin: var(--spacing-lg);
+}
+
+.box-margin-xl {
+  margin: var(--spacing-xl);
+}
+
+.box-margin-inline-0 {
+  margin-inline: 0;
+}
+
+.box-margin-inline-xs {
+  margin-inline: var(--spacing-xs);
+}
+
+.box-margin-inline-sm {
+  margin-inline: var(--spacing-sm);
+}
+
+.box-margin-inline-md {
+  margin-inline: var(--spacing-md);
+}
+
+.box-margin-inline-lg {
+  margin-inline: var(--spacing-lg);
+}
+
+.box-margin-inline-xl {
+  margin-inline: var(--spacing-xl);
+}
+
+.box-margin-block-0 {
+  margin-block: 0;
+}
+
+.box-margin-block-xs {
+  margin-block: var(--spacing-xs);
+}
+
+.box-margin-block-sm {
+  margin-block: var(--spacing-sm);
+}
+
+.box-margin-block-md {
+  margin-block: var(--spacing-md);
+}
+
+.box-margin-block-lg {
+  margin-block: var(--spacing-lg);
+}
+
+.box-margin-block-xl {
+  margin-block: var(--spacing-xl);
+}
+
+.box-width-auto {
+  width: auto;
+}
+
+.box-width-full {
+  width: 100%;
+}
+
+.box-width-fit {
+  width: fit-content;
+}
+
+.box-width-max {
+  width: max-content;
+}
+
+.box-max-width-xs {
+  max-width: var(--box-max-width-xs);
+}
+
+.box-max-width-sm {
+  max-width: var(--box-max-width-sm);
+}
+
+.box-max-width-md {
+  max-width: var(--box-max-width-md);
+}
+
+.box-max-width-lg {
+  max-width: var(--box-max-width-lg);
+}
+
+.box-max-width-xl {
+  max-width: var(--box-max-width-xl);
+}
+
+.box-max-width-container {
+  max-width: var(--box-max-width-container);
+}
+
+.box-radius-0 {
+  border-radius: 0;
+}
+
+.box-radius-xs {
+  border-radius: var(--box-radius-xs);
+}
+
+.box-radius-sm {
+  border-radius: var(--box-radius-sm);
+}
+
+.box-radius-md {
+  border-radius: var(--box-radius-md);
+}
+
+.box-radius-lg {
+  border-radius: var(--box-radius-lg);
+}
+
+.box-radius-xl {
+  border-radius: var(--box-radius-xl);
+}
+
+.box-radius-full {
+  border-radius: var(--box-radius-full);
+}
+
+/*# sourceMappingURL=box.css.map */

package/src/styles/box/box.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../components/box/box.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaA;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAQF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAOF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAOF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAOF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE","file":"box.css"}

package/src/styles/cards/card.css

@@ -1,26 +1,28 @@
 :root {
-  --card-padding: 2rem;
-  --card-bg: #fff;
+  --card-padding: 1.5rem;
+  --card-bg: var(--color-surface, #ffffff);
   --card-radius: calc(var(--card-padding) / 4);
-  --card-position: relative;
-  --card-display: flex;
-  --card-direction: column;
   --card-gap: 1rem;
   --card-header-padding: 1rem 1.5rem;
-  --card-header-bg: #f8f9fa;
-  --card-header-border-bottom: 1px solid #dee2e6;
+  --card-header-bg: var(--color-surface-secondary, #f8f9fa);
+  --card-header-border-bottom-width: 0.0625rem;
+  --card-header-border-bottom-style: solid;
+  --card-header-border-bottom-color: var(--color-border, #dee2e6);
   --card-body-padding: 1.5rem;
   --card-footer-padding: 1rem 1.5rem;
-  --card-footer-bg: #f8f9fa;
-  --card-footer-border-top: 1px solid #dee2e6;
+  --card-footer-bg: var(--color-surface-secondary, #f8f9fa);
+  --card-footer-border-top-width: 0.0625rem;
+  --card-footer-border-top-style: solid;
+  --card-footer-border-top-color: var(--color-border, #dee2e6);
 }
 
 [data-card],
 [data-component~=card] {
-  display: var(--card-display);
-  flex-direction: var(--card-direction);
+  display: flex;
+  flex-direction: column;
   gap: var(--card-gap);
   border-radius: var(--card-radius);
+  border: var(--card-border, 0.0625rem solid rgba(0, 0, 0, 0.08));
   background-color: var(--card-bg);
   text-align: var(--card-align, left);
 }
@@ -59,7 +61,7 @@
 [data-component~=card] > [data-card-header] {
   padding: var(--card-header-padding);
   background-color: var(--card-header-bg);
-  border-bottom: var(--card-header-border-bottom);
+  border-bottom: var(--card-header-border-bottom-width) var(--card-header-border-bottom-style) var(--card-header-border-bottom-color);
   border-radius: var(--card-radius) var(--card-radius) 0 0;
 }
 [data-card] > [data-card-body],
@@ -73,20 +75,24 @@
 [data-component~=card] > [data-card-footer] {
   padding: var(--card-footer-padding);
   background-color: var(--card-footer-bg);
-  border-top: var(--card-footer-border-top);
+  border-top: var(--card-footer-border-top-width) var(--card-footer-border-top-style) var(--card-footer-border-top-color);
   border-radius: 0 0 var(--card-radius) var(--card-radius);
 }
 
 [data-card=interactive] {
+  --card-transition-duration: 0.2s;
+  --card-transition-timing: ease;
+  --card-hover-lift: -0.125rem;
+  --card-hover-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
   cursor: pointer;
-  transition: box-shadow 0.2s ease, transform 0.2s ease;
+  transition: box-shadow var(--card-transition-duration) var(--card-transition-timing), transform var(--card-transition-duration) var(--card-transition-timing);
 }
 [data-card=interactive]:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
+  transform: translateY(var(--card-hover-lift));
+  box-shadow: var(--card-hover-shadow);
 }
 [data-card=interactive]:focus-visible {
-  outline: 0.125rem solid var(--focus-color, #0066CC);
+  outline: 0.125rem solid var(--color-focus, #0066cc);
   outline-offset: 0.125rem;
 }
 [data-card=interactive]:focus:not(:focus-visible) {

package/src/styles/cards/card.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../components/cards/card.scss"],"names":[],"mappings":"AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EAEA;EAEA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;EAEE;EACA;;AAEF;AAAA;EACE;;AAEF;AAAA;EACE;EACA;EACA;;AAGF;AAAA;EACE;;AAEF;AAAA;EAEE;;AAEF;AAAA;EACE;;AAIF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;;AAEA;EACE;EACA;;AAIF;EACE;EACA;;AAIF;EACE","file":"card.css"}
+{"version":3,"sourceRoot":"","sources":["../../components/cards/card.scss"],"names":[],"mappings":"AAAA;EAEE;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;EAEE;EACA;;AAEF;AAAA;EACE;;AAEF;AAAA;EACE;EACA;EACA;;AAGF;AAAA;EACE;;AAEF;AAAA;EACE;;AAEF;AAAA;EAGE;;AAIF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;EACA;EAEA;EACA,YACE;;AAGF;EACE;EACA;;AAIF;EACE;EACA;;AAIF;EACE","file":"card.css"}

package/src/styles/cluster/cluster.css

@@ -0,0 +1,71 @@
+/**
+ * Cluster Component Styles
+ *
+ * Utility classes for the Cluster layout primitive.
+ * Provides wrapping flex layout for inline groups (tags, badges, buttons).
+ * All spacing values use the unified spacing scale from globals.
+ * All units are in rem (1rem = 16px base).
+ */
+.cluster {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
+}
+
+.cluster-gap-0 {
+  gap: 0;
+}
+
+.cluster-gap-xs {
+  gap: var(--spacing-xs);
+}
+
+.cluster-gap-sm {
+  gap: var(--spacing-sm);
+}
+
+.cluster-gap-md {
+  gap: var(--spacing-md);
+}
+
+.cluster-gap-lg {
+  gap: var(--spacing-lg);
+}
+
+.cluster-gap-xl {
+  gap: var(--spacing-xl);
+}
+
+.cluster-justify-start {
+  justify-content: flex-start;
+}
+
+.cluster-justify-center {
+  justify-content: center;
+}
+
+.cluster-justify-end {
+  justify-content: flex-end;
+}
+
+.cluster-justify-between {
+  justify-content: space-between;
+}
+
+.cluster-align-start {
+  align-items: flex-start;
+}
+
+.cluster-align-center {
+  align-items: center;
+}
+
+.cluster-align-end {
+  align-items: flex-end;
+}
+
+.cluster-align-baseline {
+  align-items: baseline;
+}
+
+/*# sourceMappingURL=cluster.css.map */

package/src/styles/cluster/cluster.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../components/cluster/cluster.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaA;EACE;EACA;EACA;;;AAOF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAOF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAOF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE","file":"cluster.css"}